:root {
    --color-petroleo: #0F3D3E;
    --color-teal: #1D7874;
    --color-dorado: #F4B942;
    --color-nube: #F7FAFC;
    --color-grafito: #1F2933;
    --petroleo: var(--color-petroleo);
    --petroleo-profundo: #082f31;
    --teal: var(--color-teal);
    --teal-oscuro: #125d5a;
    --teal-suave: #dff3f1;
    --dorado: var(--color-dorado);
    --dorado-oscuro: #d99713;
    --dorado-suave: #fff4d8;
    --nube: var(--color-nube);
    --blanco: #ffffff;
    --grafito: var(--color-grafito);
    --gris: #53616d;
    --gris-claro: #e4ebef;
    --linea: #d8e3e7;
    --exito: #187a52;
    --sombra-sm: 0 8px 24px rgba(15, 61, 62, .08);
    --sombra-md: 0 18px 52px rgba(15, 61, 62, .13);
    --radio-sm: .75rem;
    --radio-md: 1.25rem;
    --radio-lg: 2rem;
    --max: 1180px;
    --header-height: 76px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-width: 0;
    margin: 0;
    color: var(--grafito);
    background: var(--nube);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

main {
    min-height: 55vh;
}

img,
svg {
    display: block;
    max-width: 100%;
}

picture {
    display: block;
}

img {
    height: auto;
}

a {
    color: var(--teal-oscuro);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--petroleo);
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--petroleo);
    font-weight: 800;
    line-height: 1.12;
    text-wrap: balance;
}

h1 {
    margin-bottom: 1.35rem;
    font-size: clamp(2.45rem, 6vw, 5.4rem);
    letter-spacing: -.055em;
}

h2 {
    margin-bottom: 1.1rem;
    font-size: clamp(2rem, 4.1vw, 3.45rem);
    letter-spacing: -.04em;
}

h3 {
    margin-bottom: .75rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    letter-spacing: -.02em;
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

::selection {
    color: var(--petroleo-profundo);
    background: var(--dorado);
}

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(244, 185, 66, .72);
}

.container {
    width: min(calc(100% - 2rem), var(--max));
    margin-inline: auto;
}

.container-narrow {
    width: min(calc(100% - 2rem), 800px);
    margin-inline: auto;
}

.section {
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.section-compact {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section-white {
    background: var(--blanco);
}

.section-soft {
    background: linear-gradient(180deg, #edf7f6 0%, var(--nube) 100%);
}

.section-dark {
    color: #eaf5f4;
    background:
        radial-gradient(circle at 90% 0%, rgba(29, 120, 116, .42), transparent 28rem),
        var(--petroleo-profundo);
}

.section-dark h2,
.section-dark h3 {
    color: var(--blanco);
}

.section-dark a:not(.button) {
    color: #bde9e5;
}

.section-heading {
    max-width: 760px;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading p,
.lead {
    color: var(--gris);
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
    line-height: 1.65;
}

.section-dark .section-heading p,
.section-dark .lead {
    color: #c6dcda;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    color: var(--teal-oscuro);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 1.75rem;
    height: 2px;
    content: "";
    background: var(--dorado);
}

.eyebrow-light {
    color: #d8f2ef;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 999;
    padding: .8rem 1rem;
    color: var(--petroleo);
    background: var(--dorado);
    border-radius: .5rem;
    font-weight: 800;
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.muted {
    color: var(--gris);
}

.fine-print {
    color: var(--gris);
    font-size: .88rem;
    line-height: 1.55;
}

.no-margin {
    margin: 0;
}

.text-center {
    text-align: center;
}

.margin-top-md {
    margin-top: 1rem;
}

.margin-top-lg {
    margin-top: 2rem;
}

.justify-center {
    justify-content: center;
}

@media (max-width: 640px) {
    :root {
        --header-height: 68px;
    }

    .container,
    .container-narrow {
        width: min(calc(100% - 1.25rem), var(--max));
    }

    h1 {
        font-size: clamp(2.25rem, 13vw, 3.4rem);
    }

    h2 {
        font-size: clamp(1.85rem, 9vw, 2.55rem);
    }

    .section {
        padding-block: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}