/* SUTMP: celulosa, eucalipto y cartelería de planta. Una familia (Archivo, de ancho variable): títulos angostos y
   pesados como los carteles de planta, texto en ancho normal. Solo verdes y blanco: el botón principal es blanco. */

:root {
    --pulpa: #f2f4ef;
    --papel: #fbfcf9;
    --tinta: #1f2a1c;
    --tinta-suave: #4a5544;
    --eucalipto: #6f8045;
    --monte: #34401f;
    --hoja: #b7c9c0;
    /* contorno del foco de teclado: verde sobre fondo claro, blanco sobre las franjas oscuras */
    --foco: var(--eucalipto);

    --angosto: 'wdth' 68;
    --normal: 'wdth' 100;

    --texto-chico: 0.875rem;
    --texto: 1.0625rem;
    --texto-grande: 1.25rem;
    --titulo: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

    --margen: clamp(1rem, 4vw, 3rem);
    --ancho: 72rem;
    --radio: 0.375rem;
    --alto-barra: 4.25rem;

    color-scheme: light;
    interpolate-size: allow-keywords;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--alto-barra);
}

body {
    margin: 0;
    background: var(--pulpa);
    color: var(--tinta);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: var(--texto);
    font-variation-settings: var(--normal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-variation-settings: var(--angosto);
    font-weight: 800;
    line-height: 1.05;
    text-wrap: balance;
}

h2 {
    font-size: var(--titulo);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--texto-grande);
    line-height: 1.2;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
}

.barra,
.portada,
.banda,
.pie,
.aviso {
    --foco: #fff;
}

.saltar {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--monte);
    color: #fff;
    font-weight: 700;
    text-decoration: none;

    &:focus {
        top: 1rem;
    }
}

.contenedor {
    width: min(100% - 2 * var(--margen), var(--ancho));
    margin-inline: auto;
}

/* ---------- Botones ---------- */
.boton {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radio);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton-principal {
    background: #fff;
    color: var(--monte);

    &:hover {
        background: var(--hoja);
    }
}

.boton-claro {
    border-color: rgb(255 255 255 / 0.8);
    color: #fff;

    &:hover {
        background: #fff;
        color: var(--tinta);
    }
}

.boton-chico {
    padding: 0.5rem 1rem;
    background: var(--monte);
    color: #fff;
    white-space: nowrap;

    &:hover {
        background: var(--eucalipto);
    }
}

/* ---------- Barra superior ---------- */
.barra {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: var(--margen);
    color: #fff;
    background: rgb(52 64 31 / 0.96);
}

/* Sobre la foto de portada la barra es transparente y se vuelve sólida al bajar, solo con CSS */
@supports (animation-timeline: scroll()) {
    .barra {
        animation: barra-solida linear both;
        animation-timeline: scroll();
        animation-range: 0 40vh;
    }

    @keyframes barra-solida {
        from {
            background: rgb(52 64 31 / 0);
        }
        to {
            background: rgb(52 64 31 / 0.96);
            box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
        }
    }
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    text-decoration: none;
    font-variation-settings: var(--angosto);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.04em;

    & img {
        width: 3rem;
        height: 3rem;
        object-fit: contain;
    }
}

.menu-boton {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--monte);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

#menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: static;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;

    & > a:not(.boton) {
        padding: 0.5rem 0.75rem;
        border-radius: var(--radio);
        text-decoration: none;
        font-weight: 600;

        &:hover {
            background: rgb(255 255 255 / 0.12);
        }
    }

    & > .boton {
        margin-left: 0.75rem;
        padding: 0.55rem 1.1rem;
    }
}

.salir {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.75rem;

    & .saludo {
        font-size: var(--texto-chico);
        opacity: 0.85;
    }

    & button {
        padding: 0.5rem 1rem;
        border: 2px solid rgb(255 255 255 / 0.6);
        border-radius: var(--radio);
        background: none;
        color: #fff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;

        &:hover {
            background: #fff;
            color: var(--tinta);
        }
    }
}

/* En pantallas chicas el menú es un popover nativo: se abre con el botón y se cierra tocando afuera o con Esc */
@media (max-width: 960px) {
    .menu-boton {
        display: grid;
        place-items: center;
    }

    #menu {
        position: fixed;
        inset: var(--alto-barra) 0 auto auto;
        width: min(20rem, 100%);
        height: calc(100dvh - var(--alto-barra));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem;
        background: var(--monte);
        box-shadow: -1rem 0 2rem rgb(0 0 0 / 0.25);
        transition: translate 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
        translate: 100% 0;

        &:not(:popover-open) {
            display: none;
        }

        &:popover-open {
            translate: 0 0;

            @starting-style {
                translate: 100% 0;
            }
        }

        & > a:not(.boton) {
            padding: 0.9rem 0.75rem;
            font-size: var(--texto-grande);
            border-bottom: 1px solid rgb(255 255 255 / 0.1);
        }

        & > .boton {
            margin: 1.25rem 0 0;
            justify-content: center;
        }
    }

    #menu::backdrop {
        background: rgb(0 0 0 / 0.35);
    }

    .salir {
        flex-direction: column;
        align-items: stretch;
        margin: 1.25rem 0 0;
    }
}

/* ---------- Aviso del ingreso ---------- */
.aviso {
    position: fixed;
    top: calc(var(--alto-barra) + 0.75rem);
    left: 50%;
    translate: -50% 0;
    z-index: 60;
    width: min(32rem, 100% - 2rem);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-left: 6px solid var(--hoja);
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.25);

    & > i {
        margin-top: 0.3rem;
        color: var(--hoja);
    }

    & p {
        flex: 1;
    }
}

.aviso-cerrar {
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.8;

    &:hover {
        opacity: 1;
    }
}

/* ---------- Portada ---------- */
.portada {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(100svh, 60rem);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--alto-barra) + 2rem) var(--margen) clamp(2.5rem, 8vh, 5rem);
    background: var(--monte);
    color: #fff;

    /* la foto, en su capa: entra con un fundido y se aleja apenas, recién cuando terminó de bajar (scripts.js saca
       «cargando»). Si el JS no corre, aparece igual a los 3 segundos */
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background: var(--fondo) center 35% / cover no-repeat;
        transition: opacity 1s ease, transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    &.cargando::before {
        opacity: 0;
        transform: scale(1.06);
        animation: mostrar-igual 0s 3s forwards;
    }

    /* la foto tiene un casco blanco detrás del título: se oscurece abajo y a la izquierda para que se lea */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(to right, rgb(31 42 28 / 0.78) 0%, rgb(31 42 28 / 0.45) 45%, rgb(31 42 28 / 0) 75%),
            linear-gradient(to top, rgb(31 42 28 / 0.9) 0%, rgb(31 42 28 / 0.4) 40%, rgb(31 42 28 / 0) 70%),
            linear-gradient(to bottom, rgb(31 42 28 / 0.55) 0%, rgb(31 42 28 / 0) 22%);
    }
}

.portada-texto {
    width: min(100%, var(--ancho));
    margin-inline: auto;

    & h1 {
        max-width: 14ch;
        font-size: clamp(3rem, 1.2rem + 7.5vw, 7.5rem);
        font-weight: 900;
        line-height: 0.92;
        letter-spacing: -0.015em;
        text-wrap: balance;
    }

    & p {
        margin-top: 1.25rem;
        max-width: 34ch;
        font-size: var(--texto-grande);
        color: rgb(255 255 255 / 0.88);
    }

    & p,
    & .acciones {
        animation: aparecer 0.7s ease-out 1.15s both;
    }
}

/* El único movimiento automático: cada palabra sube desde su ranura, de a una, y mientras sube se aprieta y se
   pone pesada, como un cartel que se arma. Cada palabra reserva su lugar final (::before, invisible) y la que se
   anima va encima: así las líneas no se reacomodan mientras dura la entrada */
.palabra {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /* recorta solo arriba y abajo (la ranura); a los costados la palabra puede pasarse mientras se aprieta */
    clip-path: inset(-0.12em -50vw -0.1em 0);

    &::before {
        content: attr(data-palabra);
        visibility: hidden;
    }

    & > span {
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        animation: entrar 0.95s cubic-bezier(0.16, 0.9, 0.25, 1) both;
        animation-delay: calc(0.15s + var(--i) * 0.085s);
    }
}

@keyframes entrar {
    from {
        transform: translateY(110%);
        font-variation-settings: 'wdth' 100, 'wght' 400;
    }
    55% {
        transform: translateY(0);
    }
    to {
        transform: translateY(0);
        font-variation-settings: 'wdth' 68, 'wght' 900;
    }
}

@keyframes mostrar-igual {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ---------- Secciones ---------- */
.seccion {
    padding-block: clamp(4rem, 10vw, 7rem);
}

.dos-columnas {
    display: grid;
    gap: 1.5rem 4rem;

    @media (min-width: 860px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.historia {
    max-width: 62ch;
    font-size: var(--texto-grande);
    color: var(--tinta-suave);

    & p + p {
        margin-top: 1em;
    }
}

.banda {
    background: var(--monte);
    color: #fff;

    & h2 {
        color: #fff;
    }
}

.ayuda {
    margin-top: 0.75rem;
    color: rgb(255 255 255 / 0.75);
}

/* ---------- Links de interés ---------- */
.lista-links {
    border-top: 1px solid rgb(255 255 255 / 0.18);

    & li {
        border-bottom: 1px solid rgb(255 255 255 / 0.18);
    }

    & a {
        display: grid;
        grid-template-columns: 2.5rem 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 0.5rem;
        text-decoration: none;
        transition: background-color 0.15s;

        &:hover {
            background: rgb(255 255 255 / 0.06);

            & .externo {
                color: #fff;
            }
        }
    }

    & .fa-solid:first-child {
        font-size: 1.5rem;
        color: var(--hoja);
        text-align: center;
    }

    & strong {
        display: block;
        font-variation-settings: var(--angosto);
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.15;
    }

    & small {
        display: block;
        font-size: var(--texto-chico);
        color: rgb(255 255 255 / 0.72);
    }

    & .externo {
        color: rgb(255 255 255 / 0.5);
        transition: color 0.15s;
    }
}

/* ---------- Área de afiliados ---------- */
.zona-afiliados {
    border-top: 6px solid var(--eucalipto);
}

.zona-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-top: 1.5rem;
    font-weight: 700;

    & .fa-lock-open {
        color: var(--eucalipto);
        margin-right: 0.35rem;
    }

    & .visitas {
        font-weight: 400;
        font-size: var(--texto-chico);
        color: var(--tinta-suave);
    }
}

.zona-afiliados #beneficios {
    padding-top: clamp(2.5rem, 6vw, 4rem);
}

.titulo-con-herramienta {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 2.5rem;
}

.buscador {
    position: relative;
    flex: 0 1 22rem;

    & i {
        position: absolute;
        left: 1rem;
        top: 50%;
        translate: 0 -50%;
        color: var(--tinta-suave);
    }

    & input {
        width: 100%;
        padding: 0.8rem 1rem 0.8rem 2.75rem;
        border: 2px solid #d5dbcf;
        border-radius: var(--radio);
        background: var(--papel);
        color: var(--tinta);
        font: inherit;

        &:focus {
            border-color: var(--eucalipto);
            outline: none;
        }
    }
}

.sin-resultados {
    margin-bottom: 2rem;
    color: var(--tinta-suave);
}

.grilla-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

.beneficio {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #dfe4d9;
    border-radius: var(--radio);
    background: var(--papel);

    &[hidden] {
        display: none;
    }

    & h3 {
        color: var(--monte);
    }
}

.beneficio-logo {
    height: 7.5rem;
    overflow: hidden;
    padding: 0.75rem;
    border-radius: calc(var(--radio) - 2px);
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf0ea;

    /* tamaño fijo del recuadro: los logos vienen de cualquier forma y tamaño */
    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    & i {
        display: grid;
        place-items: center;
        height: 100%;
        font-size: 2rem;
        color: var(--hoja);
    }
}

.beneficio-texto {
    font-size: 0.95rem;
    color: var(--tinta-suave);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;

    .beneficio.abierto & {
        display: block;
    }
}

.leer-mas {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--eucalipto);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

/* ---------- Contactos ---------- */
.grilla-contactos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2.5rem 2rem;
    margin-top: 2.5rem;
}

.grupo-contacto {
    & h3 {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem;
        border-bottom: 2px solid var(--eucalipto);
        font-size: 1.5rem;

        & i {
            font-size: 1.1rem;
            color: var(--hoja);
        }
    }

    & a,
    & span {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.45rem 0;
        text-decoration: none;
    }

    & a:hover {
        color: var(--hoja);
    }

    & .fa-whatsapp {
        color: #7fd99a;
    }
}

/* ---------- Documentos ---------- */
.lista-documentos {
    margin-top: 2.5rem;
    border-top: 1px solid #d5dbcf;

    & li {
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        align-items: center;
        gap: 0.5rem 1.25rem;
        padding: 1.1rem 0.25rem;
        border-bottom: 1px solid #d5dbcf;
    }

    & h3 {
        font-variation-settings: var(--normal);
        font-size: var(--texto);
        font-weight: 700;
    }

    & p {
        max-width: 70ch;
        margin-top: 0.2rem;
        font-size: 0.95rem;
        color: var(--tinta-suave);
    }

    @media (max-width: 600px) {
        & li {
            grid-template-columns: 2rem 1fr;
        }

        & .boton {
            grid-column: 2;
            justify-self: start;
        }
    }
}

.documento-icono {
    font-size: 1.5rem;
    color: var(--eucalipto);
    text-align: center;
}

/* ---------- Pie ---------- */
.pie {
    padding-block: 2.5rem;
    background: var(--tinta);
    color: rgb(255 255 255 / 0.75);
    font-size: var(--texto-chico);

    & .contenedor {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    & img {
        width: 3.5rem;
        height: 3.5rem;
        object-fit: contain;
    }

    & strong {
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .barra {
        background: rgb(52 64 31 / 0.96);
    }
}