:root {
    --textDarker: black;
    --textDark: black;
    --textMedium: rgba(0,0,0,0.7);
    --borderMedium: rgba(0,0,0,0.2);
    --borderLight: rgba(0,0,0,0.075);
    --accent: black;
    --accentDarker: black;
    --light: rgba(0,0,0,0.03);
}
img {filter: grayscale(100%);}

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(14px, 2vw, 16px); line-height: 1.7; height: 100%; scroll-behavior: smooth; background: var(--light);}
body {font-size: 1rem; color: var(--textMedium); background: var(--light);}
.innerbody {margin: 0 auto; background: white;}
.innerbody, .innerbody header {max-width: 100%;}
.container {margin: 0 auto; max-width: 84rem; padding: 0 clamp(1rem,4vw,3rem);}
img, figure, video, audio {max-width: 100%; display: block;}
a {color: var(--textMedium);}
h1, h2 {line-height: 1.1; font-size: 2.6rem; color: var(--textDark);}
a.logo {line-height: 1.15; color: var(--textDark);}
h1 {font-size: 3.25rem; margin-bottom: 1.75rem;}
h1 + p {padding-top: 0.5rem;}
h2 {margin-top: 3.5rem; margin-bottom: 1.25rem;}
h2:first-child {margin-top: 0;}
section.docs h2,
.container.post h2,
h3 {color: var(--textDark); line-height: 1.3; font-size: 1.25rem; margin-top: 0; margin-bottom: 0.4rem; padding-top: 1.5rem; font-weight: bold;}
h2 + h3 {padding-top: 0;}
section.docs h3,
.container.post h3,
h4 {color: var(--textMedium); line-height: 1.4; font-size: 1.1rem; margin-bottom: 0.2rem; padding-top: 1rem;}
div + h3 {padding-top: 3rem;}
p, ul, ol, blockquote, pre, .box.map, figure, details {margin-bottom: 1.7em;}
ul {margin-left: 1rem;}
ol {margin-left: 2rem;}
hr {margin: 3.5rem 0; height: 1px; background: rgba(0,0,0,0.1); border: 0;}
/* cambios Carlos -> margin-block: 2.25rem;) */
p img, p img:last-child {border-radius: 1rem; overflow: hidden; margin-block: 0rem;}
/**/
pre {
    overflow: auto; 
    background: var(--light); 
    padding: 0.75rem 1rem; 
    border: 0.1rem solid var(--light); 
    border-radius: 0.25rem; 
    font-size: 0.95rem;
    white-space: pre-wrap; 
}
blockquote {font-style: italic; border-left: 0.25rem solid var(--borderMedium); padding-left: 1.25rem;}
video, audio {width: 100%;}
.sr-only {display: none;}
:not(pre) > code {
    background: var(--light);
    padding: 0.15rem 0.3rem;
    border: 0.1rem solid var(--light);
    border-radius: 0.25rem;
}

/*------------------------*/
/* fonts
/*------------------------*/

.container.post h2, section.docs h2,
body, input, textarea, select, a.logo > div.has_subtitle > div span:nth-child(2) {font-family: var(--fontBody);}
h1, h2, a.logo {font-family: var(--fontTitles);}

/*------------------------*/
/* logo
/*------------------------*/

a.logo {font-size: 1.8rem; font-weight: bold; text-decoration: none; color: var(--textDark);}
a.logo img.inline {height: 2rem;}
a.logo > div {display: flex; gap: 0.8rem; align-items: center;}
a.logo > div > div span {display: block;}
a.logo > div.has_subtitle {gap: 1rem;}
a.logo > div.has_subtitle > div span:nth-child(1) {line-height: 1.2;}
a.logo > div.has_subtitle > div span:nth-child(2) {font-size: 0.75rem; font-weight: normal;}

/*------------------------*/
/* sections general
/*------------------------*/

section, section.image.alt {padding: 4.5rem 0 5rem;}
section .twocols {display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 5.5rem clamp(2rem, 5vw, 5rem);}
section .twocols > div {display: flex; flex-direction: column; justify-content: center;}
section .container.small {max-width: 40rem;}
section.hasbackgroundcolor {padding: 0; margin-top: 2rem;}
section.hasbackgroundcolor + section.hasbackgroundcolor {padding-top: 3.5rem;}
section.bgimage.hasbackgroundcolor + section:not(.hasbackgroundcolor) {margin-top: 1.5rem;}
section :last-child {margin-bottom: 0;}
section:not(.hasbackgroundcolor) + section:not(.hasbackgroundcolor) {padding-top: 2rem;}
section.hasbackgroundcolor + footer {margin-top: 7.5rem;}
section.stickstofooter + footer {margin-top: 0; border-top: 0;}

/*------------------------*/
/* box
/*------------------------*/

div.box {background: var(--light); border: 0.1rem solid var(--borderLight); padding: 3.5rem clamp(2rem, 5vw, 5rem); border-radius: 1rem; position: relative;}
div.box:not(:last-child) {margin-bottom: 1.7em;}
div.box p img {border-radius: 0;}

/*------------------------*/
/* map
/*------------------------*/

.map:not(section) {aspect-ratio: 2.25; width: 100%; border-radius: 1rem;}
.map:not(section) {position: relative; background-position: center calc(50% + 2rem); background-repeat: repeat;}
.map:not(section)::after {
    content: ""; 
    width: 100%; 
    height: 100%; 
    background: url(/img/marker.svg) center center / auto 4rem no-repeat; 
    left: 0; 
    top: 0;
    position: absolute;
    display: block;
}

/*------------------------*/
/* image
/*------------------------*/

figure {border-radius: 1rem; overflow: hidden;}
div:not(.box) > div.image img {border-radius: 0;}
@media (max-width: 600px) {
    div:not(.box) > div.image {padding: 0;}
    div:not(.box) > div.image img {max-width: 100%;}
}

/*------------------------*/
/* forms
/*------------------------*/

form > div {display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem;}
form > div.radio + div.radio {margin-top: -1rem;}
input, textarea, select {
    font-size: 1rem;
    padding: 0.5em 0.5em;
    border: 1px solid var(--borderMedium);
    color: var(--textDark);
    border-radius: 0.25rem;
}
textarea {resize: vertical; height: 9rem;}
input[type="checkbox"], input[type="radio"] {margin-right: 0.5rem; cursor: pointer;} 
form > div.submit {padding-top: 0.55rem;}
form h3 {padding-top: 0; padding-bottom: 1rem;}
label.inborder {
    position: absolute; 
    background: white; 
    font-size: 0.85rem; 
    line-height: 1;
    padding: 0 0.25rem;
    margin-left: 0.6rem;
    display: inline-block;
    z-index: 2;
}
label.inborder + * {margin-top: 0.5rem;}
div.box label.inborder::after {
    background: linear-gradient(var(--light) 50%, white 50%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    position: absolute;
    z-index: -1;
}

/*------------------------*/
/* buttons
/*------------------------*/

.button, button {
    background: var(--accent); 
    color: white;
    text-decoration: none;
    padding: 0.7em 1.25em;
    font-weight: bold;
    display: inline-block;
    font-size: 1rem;
    border-radius: 0.4rem;
    border: 0;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 0.075s ease-in-out;
}
@media (min-width: 600px) {
.button:hover, button:hover {transform: scale(1.035);}
}
.button.secondary {background: var(--textDark);}
.button.secondary.ghost {background: transparent; color: var(--textDark); box-shadow: inset 0 0 0 0.1rem var(--textDark);}
.button.icon {
    padding: 0; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    aspect-ratio: 1;
    width: 2.25rem;
}
.button.icon img {
    width: calc(100% - 1.25em); 
    height: calc(100% - 1.25em);
    filter: invert(1);
}
.button.ghost {background: transparent; color: var(--accentDarker); box-shadow: inset 0 0 0 0.1rem var(--accent);}
.button.smaller {padding: 0.4rem 1rem;}
p > .button {margin: 0.5rem 0;}
ul.buttons {gap: 1rem; margin-left: 0; display: flex; padding: 0.5rem 0;}
ul.buttons li {list-style: none;}
ul.buttons.social .button {background: var(--textDark);}

/*------------------------*/
/* bgimage
/*------------------------*/

section.bgimage .overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.32);}
section.bgimage .bgimage {position: relative; display: flex; flex-direction: column; justify-content: center;}
section.bgimage .container {position: relative; z-index: 2; color: white; padding-top: 5.5rem; padding-bottom: 6rem;} 
section.bgimage .container h1,
section.bgimage .container h2 {color: white;}
section.bgimage h1 + p {padding-top: 0;}

/*------------------------*/
/* breadcrumbs
/*------------------------*/

ul.breadcrumbs {display: block; margin: -1rem 0 0.25rem; font-size: 0.9rem; text-align: center;}
h1 + ul.breadcrumbs {margin: -1rem 0 2rem;}
h1 + ul.breadcrumbs:last-child {margin-bottom: 0;}
ul.breadcrumbs li {list-style: none; display: inline-block;}
ul.breadcrumbs li::before {content: "/"; display: inline-block; padding: 0 0.25rem;}
ul.breadcrumbs li:first-child::before {content: none;}
ul.breadcrumbs li a {text-decoration: none;}
ul.breadcrumbs li::before,
ul.breadcrumbs li a {color: var(--accentDarker);}

/*------------------------*/
/* grid
/*------------------------*/

ul.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1.55rem 1.5rem; margin: 0; padding-bottom: 1rem;}
ul.grid li {list-style: none; position: relative;}

/*------------------------*/
/* avatar
/*------------------------*/

.avatar {border-radius: 100%; object-fit: cover; filter: grayscale(100%);}

/*------------------------*/
/* people
/*------------------------*/

ul.people li {text-align: center;}
ul.people li .box {height: 100%; padding: 2.25rem clamp(2rem, 4vw, 3.5rem);}
ul.people li .avatar {height: 8rem; width: 8rem; margin: 0.5rem auto 0.15rem;}
ul.people li .function {color: var(--textDark); margin: -0.25rem 0 1.5rem;}
ul.people ul.buttons {justify-content: center;}

/*------------------------*/
/* tabs
/*------------------------*/

ul.tabs {
    display: flex; 
    align-items: flex-end;
    margin: 0 0 1.5rem; 
    gap: 2rem; 
    border-bottom: 0.04rem solid rgba(0,0,0,0.15); 
    padding-top: 2rem;
}
ul.tabs li {list-style: none; line-height: 1.3;}
ul.tabs li a {
    text-decoration: none; 
    color: var(--textDark); 
    line-height: 1.15;
    font-size: 1.25rem;
    position: relative;
    display: block;
    font-weight: bold;
    padding-bottom: 0.5rem;
}
ul.tabs li a::after {
    content: "";
    width: 100%;
    background: var(--textDark);
    height: 0.13rem;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scaleX(0) translateY(50%);
    transition: transform 0.2s ease-in-out;
}
ul.tabs li a:hover::after,
ul.tabs li.selected a::after {transform: scaleX(1) translateY(50%);}
.tabs_container {margin-bottom: 3.5rem;}
.tabs_container .tab h2 {display: none;}


/*------------------------*/
/* gallery
/*------------------------*/

.image-gallery {display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-left: 0;}
.image-gallery li {list-style: none;}
.image-gallery li a {display: block;}
.image-gallery li a img {width: 100%; display: block; border-radius: 0.5rem;}


/*------------------------*/
/* faq
/*------------------------*/
@keyframes opendetails {
  from {grid-template-rows: 0fr;}
  to {grid-template-rows: 1fr;}
}
@keyframes closedetails {
  from {grid-template-rows: 1fr;}
  to {grid-template-rows: 0fr;}
}
details {
    border: 0.1rem solid var(--borderMedium);
    border-left: 0;
    border-right: 0;
}
details summary {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 0.35rem 2rem 0.25rem 0; 
    transition: all 0.15s ease-in-out;
}
details summary::after {
    content: "";
    border: 0.1rem solid var(--textMedium);
    transform: translateY(-50%) rotate(45deg);
    display: block;
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    top: 50%;
    border-left: 0;
    border-bottom: 0;
    right: 0.5rem;
}
details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}
details + details {border-top: 0; margin-top: -1.7rem;}
details > div {
    display: grid;
    grid-template-rows: 0fr;
}
details > div > div {overflow: hidden;}
details > div > div::before {content: ""; display: block; height: 0.75rem;}
details > div > div::after {content: ""; display: block; height: 1.75rem;}
details[open] > div {animation: opendetails .15s 0s 1 normal forwards;}
details[open].closing > div {animation: closedetails .15s 0s 1 normal forwards;}
details[open]:not(.closing) summary {color: var(--textDark); font-weight: 600;}
details summary::after {transition: all 0.15s ease-in-out;}
details[open]:not(.closing) summary::after {
    transform: translateY(calc(-50% + 0.1rem)) rotate(-45deg);
    right: 0.25rem;
}

/*------------------------*/
/* youtube shortcode
/*------------------------*/

.shortcode-youtube {position: relative; display: block; overflow: hidden; border-radius: 1rem;}
.shortcode-youtube::before, .shortcode-youtube::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.shortcode-youtube::before {background: url('/img/youtube_button.svg') center center / auto 4rem no-repeat;}
.shortcode-youtube:hover::before {background-image: url('/img/youtube_button_hover.svg');}
.shortcode-youtube::after {background: url('/img/youtube_text.svg') calc(100% - 1rem) calc(100% - 1rem) / auto 2rem no-repeat;}
.shortcode-youtube img {display: block;}
@media (max-width: 45rem) {
    .shortcode-youtube::before {background-size: auto 12vw;}
    .shortcode-youtube::after {background-position: calc(100% - 3vw) calc(100% - 3vw); background-size: auto 6vw;}
}

/*------------------------*/
/* meta
/*------------------------*/

.meta {color: var(--textDarker); position: relative; margin: 0.5rem 0 1rem; gap: 1rem; font-size: 0.9rem; display: flex; align-items: center; gap: 1rem;}
.meta > div {display: flex; align-items: center; gap: 0.4rem;}
.meta img {height: 1rem; width: 1rem; position: relative; border-radius: 0; display: block; bottom: 0.1rem;}
.meta a {color: var(--textDarker); text-decoration: none;}
.meta ul {margin: 0;display: flex;}
.meta ul li {display: flex;}
.meta ul li::before {content: ","; margin-right: 0.4rem;}
.meta ul li:first-child:before {content: none;}




#search-input {
    background: white;
    color: var(--textDarker);
    border: 1.2px solid var(--borderLight);
    border-right: none; /* Prevent double borders */
    margin: 0;
    padding: 7px 8px;
    font-size: 14px;
    color: inherit;
    border-radius: 6px 0 0 6px;
  }
#search-input:focus {
    outline: 0;
  }
  
#search-submit {
    border-radius: 0 6px 6px 0;
    border: 1.2px solid var(--borderLight);
    border-left: none; /* Prevent double borders */
    background: white;
    text-indent: -999px;
    overflow: hidden;
    width: 40px;
    padding: 0;
    margin: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
  }
#search-submit:focus,
#search-submit:hover {
    outline: 0;
    transform: none;
}

.pagefind-ui__result-inner {
    text-align: left !important;
}
mark {
    background-color: transparent !important;
    color: var(--pagefind-ui-text);
}