/*
 * layout.css
 * ------------------------------------------------------------
 * Estructura general del sitio: container, header, footer,
 * grids principales. Componentes UI reutilizables van en
 * components.css.
 * ------------------------------------------------------------
 */

/* ==========================================================
   Container
   ========================================================== */
/* El contenedor del contenido. Mismo ancho y mismo aire lateral que la cabecera
   y el pie —los tres salen de los mismos dos tokens—, así que el título de una
   página arranca exactamente donde arranca la marca de arriba. */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ==========================================================
   Site footer (público)
   ========================================================== */
/* La separación con el contenido la pone el relleno propio del pie y nada más.
   Antes se apilaban cuatro reglas que decían lo mismo —el cierre de `.content`,
   el de `main`, el margen del pie y su relleno— y entre el último texto y el
   pie quedaban entre 200 y 280px vacíos en todas las páginas. */
.site-footer {
    padding: var(--space-xl) 0;
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

/* ==========================================================
   Main content
   ========================================================== */
/* Sin cierre propio: cada página termina con el aire de su último bloque
   (`.content`, la última sección del home o el bloque de llamado a la acción),
   y el pie agrega el suyo. Ver la nota del pie de página. */
main {
    padding-bottom: 0;
}

/* Las páginas interiores no tienen hero, así que necesitan aire propio bajo
   el header. El home no: su hero arranca pegado a propósito. */
.site-header + main { padding-top: var(--space-lg); }

/* ==========================================================
   Hero (home)
   ==========================================================
   El titular es la pregunta que la persona escribe en Google, y al lado está
   la respuesta hecha objeto: dos tarjetas superpuestas que muestran el paso
   de un documento opaco a un plan con plazos. Esa transformación es lo que
   vende Evalúamente, así que es lo primero que se ve.
   ========================================================== */
/* Poco aire arriba a propósito: el titular tiene que empezar apenas termina el
   menú. Con el padding anterior quedaba una franja vacía de ~135px entre el
   header y el antetítulo. */
/* La franja salvia se desvanece hacia el crema del cuerpo en vez de cortar en
   seco: así la página se lee como crema con un hero encima, y no como dos
   bloques de color pegados. */
.hero {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(
        180deg,
        var(--sage-soft) 0%,
        var(--sage-soft) 62%,
        var(--color-bg-page) 100%
    );
    overflow: hidden;
}

/* Halo frío detrás del contenido: le saca la planitud al fondo sin
   convertirse en un degradado decorativo. */
.hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 70vw;
    height: 110%;
    background: radial-gradient(ellipse at center, var(--wash-sage), transparent 62%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -55%;
    left: -18%;
    width: 55vw;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--wash-sand), transparent 62%);
    pointer-events: none;
}

/* ==========================================================
   Hero con fotografía
   ==========================================================
   La foto es el fondo de la franja, no un bloque más: el header de vidrio se
   apoya en ella —para eso lleva backdrop-filter— y el titular se lee encima.

   El velo es CREMA, no negro. El manual dice degradado oscuro sobre la imagen
   para que el texto blanco pase, pero acá el texto es tinta sobre crema: subir
   el crema en vez de bajar todo a negro deja el titular en 10:1 y la fotografía
   sigue viéndose. Un velo oscuro habría vuelto la portada un sitio oscuro, que
   es exactamente lo que no queremos.

   El degradado es diagonal y no plano: la foto de consulta tiene a la
   profesional a la derecha del encuadre y el desenfoque a la izquierda. El velo
   pesa donde va el texto y se abre donde está la cara. */
.hero--con-foto {
    /* La franja base se mantiene debajo: es lo que se ve mientras la imagen
       carga, y evita el salto de blanco a foto. */
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

/* Con foto, los dos halos radiales sobran: ensucian la imagen en vez de dar
   profundidad, que era su trabajo sobre un fondo plano. */
.hero--con-foto::before,
.hero--con-foto::after { display: none; }

.hero__foto {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La escena es una conversación entre dos: el encuadre las tiene que dejar
       a las dos dentro. Corrido al 72% —donde estaba— la toma se centraba en el
       hueco entre ambas y quedaban las dos medio cortadas. */
    object-position: 58% center;
}

.hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Cierre hacia el cuerpo de la página: sin esto la franja termina en un
           corte horizontal a mitad de la foto. */
        linear-gradient(180deg, transparent 45%, var(--color-bg-page) 100%),
        /* La foto es clara —pared blanca, sofá claro—, así que el velo pesado de
           antes la borraba: se veía crema y nada más. Con una imagen luminosa el
           titular aguanta un velo bastante más abierto (tinta sobre claro no
           pierde contraste), y la escena por fin se lee. */
        linear-gradient(
            100deg,
            color-mix(in srgb, var(--color-bg-page) 92%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-page) 84%, transparent) 40%,
            color-mix(in srgb, var(--color-bg-page) 42%, transparent) 72%,
            color-mix(in srgb, var(--color-bg-page) 22%, transparent) 100%
        );
}

/* En el teléfono la foto deja de ser fondo y pasa a ser una franja propia.
   ------------------------------------------------------------
   Como fondo no funciona: el texto ocupa el ancho completo, así que no queda
   zona despejada donde correr el velo, y el velo que hace legible al titular
   deja la fotografía en una mancha —probado a 390px: se veía el desenfoque del
   pelo y nada más—. Media foto no convence a nadie.

   Así que arriba, a sangre, sin velo, y el titular abajo sobre crema limpio.
   La foto se ve como foto, el titular se lee a 10:1, y no hay que elegir. */
@media (max-width: 879px) {
    /* Sin aire arriba: la franja arranca pegada al header, que al hacer scroll
       la difumina por detrás. */
    .hero--con-foto { padding-top: 0; }

    .hero__foto {
        position: relative;
        height: clamp(160px, 42vw, 220px);
        margin-bottom: clamp(1.4rem, 5vw, 2rem);
    }
    /* Encuadre más al centro que en escritorio: en una franja baja y ancha, el
       72% dejaba a la profesional cortada por el borde. */
    .hero__foto img { object-position: 60% 30%; }

    /* Solo el cierre hacia el crema: una franja que corta en seco se lee como
       una imagen pegada, no como parte de la página. */
    .hero__foto::after {
        background: linear-gradient(180deg, transparent 55%, var(--color-bg-page) 100%);
    }
}

.hero__inner {
    position: relative;
    /* Por encima de la foto: el velo es un ::after y sin esto se pintaría sobre
       el titular. */
    z-index: 1;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

.hero__content { max-width: 34rem; }

@media (min-width: 880px) {
    /* El panel de agenda de la derecha es más alto que el bloque editorial, y
       esa diferencia hay que resolverla en algún lado. Repartir el aire entre
       los bloques de la izquierda —lo que hacía `space-between`— dejaba 190px
       muertos entre los botones y los puntos del carrusel, y los puntos
       terminaban pegados a las señales de confianza, como si fueran parte de
       ellas.

       Centrado: el bloque se mantiene junto, con su propia separación, y el
       aire sobrante queda arriba y abajo, que es donde no se lee como un
       error. */
    .hero__content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.6rem;
    }
    /* Los márgenes propios se van: acá la separación la da el `gap`. */
    .hero__content > * { margin-bottom: 0; }
    .hero-slider__nav { margin-top: clamp(1.2rem, 2vw, 1.6rem); }
}

/* El titular es lo único que se lee seguro en la primera pantalla. Pesa por
   tamaño y por aire, no por grosor: 600 y no el 700 con tracking -0.042em de
   antes, que dejaba la palabra casi condensada.

   El techo del clamp baja de 4rem a 3.4rem al volver a Poppins. Los 64px eran
   para el serif, que se lee ópticamente más chico a igual cuerpo —el peso está
   en los trazos finos y las mayúsculas son proporcionalmente más bajas—. Con
   una geométrica al mismo valor, el titular ocupaba tres líneas y empujaba los
   botones fuera de la primera pantalla en un portátil de 900px de alto.

   El tracking se da vuelta con la fuente: el serif pedía +0.012em y la sans
   pide el negativo de --tracking-serif. */
.hero__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-4xl), 1.1rem + 2.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.1;
    color: var(--color-text-strong);
}

.hero__subtitle {
    margin: 0 0 1.5rem;
    font-size: clamp(var(--text-base), 0.9rem + 0.3vw, var(--text-lg));
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 32rem;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 1.4rem;
}

/* En el teléfono los dos botones envuelven igual, pero cada uno mide lo que
   mide su texto: quedaban dos píldoras de ancho distinto, una debajo de la
   otra, y la segunda parecía cortada. A ancho completo el borde derecho es uno
   solo y el objetivo táctil crece hasta el ancho de la pantalla. */
@media (max-width: 560px) {
    .hero__cta { display: grid; gap: 0.6rem; }
    .hero__cta .btn { width: 100%; }
}

/* Señales de confianza. En salud pesan más que cualquier adjetivo, así que
   van sobre la línea de flotación y no en el pie. */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.hero__trust li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hero__trust svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--sage-deep);
}

.hero__media { position: relative; min-width: 0; }

@media (min-width: 880px) {
    /* Las dos columnas del hero. La derecha ya no lleva la fotografía sino el
       panel de agenda, que es más angosto y bastante más alto: se estira al
       alto de la fila —`stretch`, el valor por omisión de la grilla— para que
       su borde inferior cierre a la misma altura que las señales de confianza
       de la izquierda. Centrado dejaba el panel flotando con aire arriba y
       abajo mientras la columna izquierda llegaba hasta el fondo. */
    .hero--split .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
        align-items: stretch;
    }
}

/* ==========================================================
   Carrusel del hero
   ==========================================================
   Solo cambia el bloque editorial —antetítulo, titular, bajada y botones—; las
   señales de confianza y el panel de agenda quedan fijos abajo y al costado.
   Esa es la diferencia entre un carrusel y un hero que se reemplaza entero: acá
   lo que sostiene la decisión no desaparece cada siete segundos.

   Las diapositivas se apilan en la MISMA celda de la grilla. Con posicionamiento
   absoluto —el reflejo automático— el contenedor colapsa a cero y el panel de la
   derecha sube; apiladas en grid, el alto es el de la diapositiva más larga y
   nada salta al cambiar.

   Sin JS se ve la primera, completa y con sus botones: el estado inicial lo
   imprime PHP con la clase .is-active, el script solo la mueve.
   ========================================================== */
.hero-slider { position: relative; }

.hero-slider__track { display: grid; }

.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    /* visibility, y no solo opacity: un bloque transparente sigue recibiendo el
       clic y tapando al que está debajo. El retardo en la transición la deja
       apagarse recién cuando terminó de desvanecerse. */
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow) var(--ease-spring),
        visibility 0s linear 280ms;   /* el retardo es la duración de --transition-slow */
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow) var(--ease-spring);
}

/* ---------- Controles ----------
   Puntos y flechas en la misma línea, alineados con el titular. */
.hero-slider__nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* 44px de lado: el mínimo táctil, y de paso el tamaño que hace que la flecha se
   lea como un objeto y no como un icono suelto. */
.hero-slider__arrow {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    color: var(--sage-deep);
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.hero-slider__arrow svg { width: 19px; height: 19px; }

.hero-slider__arrow:hover {
    background: var(--color-cta);
    border-color: transparent;
    color: var(--color-cta-text);
    transform: translateY(-1px);
}

.hero-slider__arrow:active { transform: none; }

.hero-slider__arrow:focus-visible {
    outline: none;
    box-shadow: var(--ring-cta);
}

.hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 0;
    margin-inline: 0.2rem;
}

/* El botón mide 44px y el punto que se ve mide 10: el área táctil es el botón,
   el dibujo es su contenido. Con puntos de 10px de verdad, en un teléfono se
   falla el toque una de cada tres veces. */
.hero-slider__dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.hero-slider__dot-track {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--sage-deep) 26%, transparent);
    transition:
        width var(--transition-slow) var(--ease-spring),
        background var(--transition);
}

/* El activo se estira a píldora en vez de cambiar de color: el cambio de forma
   se ve de reojo, el de color no. */
.hero-slider__dot.is-active .hero-slider__dot-track {
    width: 40px;
    background: color-mix(in srgb, var(--sage-deep) 18%, transparent);
}

.hero-slider__dot.is-active .hero-slider__dot-track::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    border-radius: inherit;
    background: var(--sage-deep);
}

/* Mientras el avance automático corre, la píldora se llena en los mismos 7s del
   intervalo: es el único aviso de que la diapositiva va a cambiar sola. En
   cuanto alguien toca el carrusel el script quita .is-auto, la animación
   desaparece y la píldora queda llena. */
.hero-slider.is-auto .hero-slider__dot.is-active .hero-slider__dot-track::after {
    animation: hero-dot-progreso 7s linear forwards;
}

@keyframes hero-dot-progreso {
    from { width: 0; }
    to   { width: 100%; }
}

.hero-slider__dot:focus-visible {
    outline: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--ring);
}

/* ---------- El carrusel en el teléfono ----------
   Las diapositivas comparten celda para que el alto no salte al cambiar, y el
   alto lo fija la más larga. En escritorio la diferencia entre la más corta y
   la más larga son 40px y no se nota; en 390px de ancho el mismo párrafo pasa
   de dos líneas a cinco, y bajo la diapositiva corta quedaban 110px de nada
   entre los botones y los puntos, con los controles flotando más cerca de las
   señales de confianza que del texto que cambian.

   Acá el apilado se deshace: cada diapositiva mide lo suyo y las otras no
   ocupan lugar. El precio es que el alto del bloque cambia al pasar de una a
   otra, y por eso, más abajo, el avance automático no arranca en el teléfono:
   así el salto solo ocurre cuando la persona lo pide, que es cuando lo
   espera. La bajada además se recorta a tres líneas, que es lo que deja las
   tres diapositivas parecidas y el salto chico.

   Estas reglas van DESPUÉS de las de arriba a propósito: tienen la misma
   especificidad y la que gana es la última. */
@media (max-width: 700px) {
    .hero-slider__track { display: block; }

    .hero-slide {
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .hero-slide.is-active {
        display: block;
        animation: hero-slide-entra 320ms var(--ease-spring) both;
    }

    .hero__subtitle {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        margin-bottom: 1.2rem;
    }

    .hero-slider__nav { margin-top: 1rem; }
}

@keyframes hero-slide-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Bajo 560px las flechas se van: ahí se desliza con el dedo —el gesto ya está
   implementado— y dos círculos de 44px al lado de los puntos ocupan un tercio
   del ancho para hacer lo mismo que el pulgar. Los puntos se quedan: son la
   única señal de cuántas diapositivas hay. */
@media (max-width: 560px) {
    .hero-slider__arrow { display: none; }
    .hero-slider__dots { margin-inline: 0; }
}

/* ==========================================================
   Panel de agenda del hero
   ==========================================================
   Ocupa el lugar que tenía la fotografía. Es la única tarjeta con sombra de la
   primera pantalla, y esa es la razón por la que se ve antes que cualquier otra
   cosa de la columna derecha.

   Cada opción es un enlace completo con la próxima hora ya calculada: no hay
   selector, ni paso intermedio, ni JS. El estado de "elegido" lo da el hover y
   el destino lo resuelve /agenda.
   ========================================================== */
.book-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    box-shadow: var(--shadow-soft);
}

.book-panel__head { display: grid; gap: 0.25rem; }

.book-panel__rotulo {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.book-panel__title {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.2;
}

.book-panel__lead {
    margin: 0.15rem 0 0;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.book-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

/* La flecha ocupa su propia columna y abarca las tres filas: al costado y no al
   pie, porque acá la tarjeta es angosta y alta, al revés que la franja que
   había antes. */
.book-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--surface-quiet);
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.book-option:hover {
    border-color: var(--color-cta);
    background: var(--color-bg);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.book-option:focus-visible {
    outline: none;
    border-color: var(--color-cta);
    box-shadow: var(--ring-cta);
}

.book-option__row {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.book-option__title {
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--color-text-strong);
}

/* El precio en cifras tabulares y alineado a la derecha: las tres opciones
   forman una columna que se compara de arriba abajo sin leer los títulos. */
.book-option__price {
    flex: 0 0 auto;
    font-weight: 650;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

.book-option__meta {
    grid-column: 1;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* La próxima hora real, que es el dato que convierte el panel en una agenda.
   Va en una pastilla salvia: es lo único de la opción que cambia solo, y tiene
   que distinguirse del precio, que es fijo. */
.book-option__slot {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--sage-soft);
    font-size: var(--text-xs);
    color: var(--color-accent-text);
}

.book-option__slot svg { width: 13px; height: 13px; flex: 0 0 auto; }

.book-option__slot strong {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

/* Sin hora disponible no hay pastilla: una cápsula vacía se lee como un dato
   que no cargó. Queda la frase, que es una respuesta. */
.book-option__slot--sin {
    padding-inline: 0;
    background: none;
    color: var(--color-text-muted);
}

.book-option__go {
    grid-column: 2;
    grid-row: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--sage-deep);
    transition: background var(--transition), transform var(--transition), color var(--transition);
}

.book-option__go svg { width: 17px; height: 17px; }

.book-option:hover .book-option__go {
    background: var(--color-cta);
    color: var(--color-cta-text);
    transform: translateX(2px);
}

.book-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.book-panel__todos {
    color: var(--sage-deep);
    font-weight: 550;
    text-decoration-color: color-mix(in srgb, var(--sage-deep) 45%, transparent);
}
.book-panel__todos:hover { color: var(--sage-hover); text-decoration-color: var(--sage-hover); }

.book-panel__nota { display: inline-flex; align-items: center; gap: 0.35rem; }
.book-panel__nota svg { width: 14px; height: 14px; color: var(--sage-deep); }

/* ==========================================================
   Titulares en serif
   ==========================================================
   El sitio venía con Poppins 650 y el tracking en -0.032em: apretado y
   pesado, que es como se ve un panel de control, no una consulta. El serif
   liviano y suelto hace el trabajo contrario, y es lo que separa esta versión
   de la anterior más que cualquier cambio de color.

   Dónde SÍ: h1, h2 y los títulos de sección. Nada más.
   Dónde NO, y a propósito: de h3 para abajo (var(--text-xl) son 18px, y
   Cormorant 500 a ese tamaño se ve endeble), los botones —.btn se queda en
   font-family: inherit, o sea Inter—, la navegación, las etiquetas de
   formulario, los precios y los metadatos. El serif es para leer despacio;
   la interfaz se lee de un vistazo y para eso sirve la sans.

   Por qué el prefijo .sitio-publico si layout.css ya es exclusiva del público:
   documenta la regla. Las mismas declaraciones en components.css —que el admin
   sí carga— serían una fuga, y ahí el prefijo no es decorativo sino necesario.
   Manteniendo la forma igual en las dos hojas no hay que recordar cuál es cuál. */
.sitio-publico h1,
.sitio-publico h2,
.sitio-publico .hero__title,
.sitio-publico .section__title,
.sitio-publico .content__section-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: var(--leading-serif);
}

/* Una palabra del titular en otro tono, como en la referencia. El texto viene
   de la base de datos, así que la marca la pone quien edita escribiendo
   *asteriscos* y la convierte tituloResaltado() en lib/helpers.php.

   El color es el resalte de la marca —el rosa del manual— y no el acento verde,
   y ese es justamente el gesto del logotipo: "Evalua" en verde y "mente" en
   rosa. Repetirlo en el titular es lo que hace que la página se lea como de
   esta marca y no como de una plantilla.

   Que sea legal depende del tamaño: el rosa da 3.1:1 sobre el fondo, el mínimo
   que WCAG pide para texto grande y no el 4.5 del texto corriente. Acá se
   cumple porque esto solo existe dentro de un titular. Si algún día se usa en
   una bajada, hay que cambiarle el color, no la regla.

   Ya no va en itálica: el titular volvió a Poppins y del <link> de Google Fonts
   solo bajan los pesos rectos, así que `font-style: italic` lo resolvía el
   navegador inclinando la fuente por su cuenta —la letra queda deformada, no
   cursiva—. Lo que distingue la palabra en escala de grises pasa a ser el peso:
   sube un escalón sobre el resto del titular. */
.titulo__acento {
    color: var(--accent-alt);
    font-weight: 700;
}

/* ==========================================================
   Secciones de página (home / landings)
   ========================================================== */
/* 80px arriba y 80 abajo dejaban 160px entre una sección y la siguiente: la
   página se leía como una sucesión de islas. Con 56–64px el aire sigue
   separando los bloques y la portada se acorta unos 600px. */
.section {
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.section--alt {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Papel blanco. Era lo que le faltaba al ritmo de la portada: el cuerpo es
   crema y la franja alterna era salvia, o sea dos tonos de la misma familia y
   con la misma luminosidad. Vistas seguidas, las secciones se leían como una
   sola mancha y no se notaba dónde empieza cada bloque.

   El blanco no es un color nuevo: es --color-bg, el mismo de las tarjetas, y
   por eso las tarjetas que caen dentro de una sección de papel pasan a
   distinguirse por borde y no por fondo (ver .service-card).

   En modo oscuro --color-bg es la superficie elevada, un paso POR ENCIMA del
   fondo de página. La sección sigue siendo la que "se aclara" respecto de sus
   vecinas, que es lo que hace el ritmo; no hay una excepción por tema. */
.section--paper {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Sección oscura para el cierre: corta el ritmo y hace que el último llamado
   a la acción no compita con nada. */
.section--ink {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(143, 176, 150, 0.26), transparent 55%),
        var(--ink);
    color: var(--color-text-inverse);
}
.section--ink h2,
.section--ink .section__title { color: #fff; }
.section--ink .section__lead  { color: var(--color-text-on-dark); }
.section--ink .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.section--ink .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.section__head { max-width: 40rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }

/* El tamaño no se toca: el que cambia es el peso, que baja de 640 a 500, y el
   tracking, que se da vuelta de -0.028em a positivo. */
.section__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 1.2rem + 1.3vw, var(--text-5xl));
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
}

.section__lead {
    margin: 0;
    max-width: 40rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: var(--text-lg);
}

/* ==========================================================
   Tarjetas de servicio
   ==========================================================
   El apartado que faltaba en la portada. Reemplaza a las tarjetas de precio
   —la grilla .pricing-* que había acá y que salió de components.css—, y el
   cambio no es de estilo: es de orden. Antes lo primero de cada columna era la
   cifra en cuerpo 42 y el nombre del servicio venía en letra chica arriba.
   Alguien que todavía no sabe qué necesita no está comparando precios; está
   averiguando qué es cada cosa.

   Orden de la tarjeta: foto, categoría, nombre, resumen, duración y modalidad,
   qué incluye, y recién al pie el precio junto al botón.

   La foto no es decoración de relleno: en un catálogo de cuatro servicios que
   se llaman parecido —"acompañamiento" esto, "acompañamiento" lo otro— es lo
   que hace que se distingan de un vistazo antes de leer el título. Sale de
   serviceImage(), que cae en la foto de la categoría si el servicio no tiene la
   suya cargada.

   La tarjeta entera es clicable por el ::after del enlace del título, que se
   estira sobre toda la superficie. El botón "Agendar" queda por encima con
   position: relative y lleva a otro destino —la agenda, no la ficha—, así que
   no hay un enlace dentro de otro: en el HTML son dos <a> hermanos.
   ========================================================== */
.service-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: stretch;
}

@media (min-width: 700px) {
    .service-cards { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
}

/* ---------- Cuando son más de tres: fila desplazable ----------
   Nada de esto se activa con tres o menos; ahí sigue mandando la grilla de
   arriba. La clase la pone index.php contando los servicios.

   `scroll-snap` y no un carrusel con JS que mueva un `transform`: el navegador
   ya sabe desplazar, frenar con inercia y respetar el gesto del dedo. El script
   solo empuja la fila cuando se pulsan las flechas. */
.service-cards--fila {
    display: flex;
    grid-template-columns: none;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Aire para la sombra y el desplazamiento de la tarjeta al pasar el mouse:
       con overflow-x, lo que sobresale se recorta. */
    padding: 4px 4px 1.2rem;
    margin-inline: -4px;
    /* El scroll horizontal de la fila no se lleva el gesto vertical de la
       página cuando se llega al extremo. */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

.service-cards--fila .service-card {
    /* 82% en el teléfono: la tarjeta siguiente asoma por el borde, que es lo
       que avisa que la fila sigue. Sin ese trozo visible, nadie desliza. */
    flex: 0 0 min(340px, 82%);
    scroll-snap-align: start;
}

.service-cards--fila:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-organic);
}

/* Barra de desplazamiento discreta en los navegadores WebKit. */
.service-cards--fila::-webkit-scrollbar { height: 8px; }
.service-cards--fila::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}
.service-cards--fila::-webkit-scrollbar-track { background: transparent; }

/* Las flechas viven en el encabezado de la sección, alineadas con el título. */
.carrusel-nav { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.carrusel-nav__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--sage-deep);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.carrusel-nav__btn svg { width: 19px; height: 19px; }
.carrusel-nav__btn:hover:not(:disabled) {
    background: var(--color-cta);
    border-color: transparent;
    color: var(--color-cta-text);
}
.carrusel-nav__btn:focus-visible { outline: none; box-shadow: var(--ring-cta); }
/* En el extremo el botón se apaga en vez de desaparecer: si se fuera, los dos
   se moverían de lugar en cada desplazamiento. */
.carrusel-nav__btn:disabled { opacity: .35; cursor: default; }

/* En el teléfono se arrastra con el dedo y las flechas sobran. */
@media (max-width: 700px) {
    .carrusel-nav { display: none; }
}

/* ==========================================================
   Barra de catálogo (servicios y tienda)
   ==========================================================
   Vivía en contenido.css, que solo cargan las páginas de contenido. La tienda
   no la carga: sus filtros se veían como tres enlaces subrayados en fila, sin
   pastillas ni estado activo. Acá los ven las dos.
   ========================================================== */
.catalogo__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    margin: 0 0 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
}

/* En el teléfono la barra se apila: la fila de chips necesita el ancho entero
   para poder salirse hasta el borde, y el contador va debajo, que es donde no
   le quita lugar a nada. `min-width: 0` para que el flex la deje encogerse en
   vez de estirar la página. */
@media (max-width: 720px) {
    .catalogo__barra { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .catalogo__barra .chip-nav { min-width: 0; }
}

/* Cuántos hay, como el contador de resultados de una tienda. */
.catalogo__cuenta {
    margin: 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.chip-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0; }

/* ---------- En el teléfono, una sola fila ----------
   Con tres o cuatro áreas los chips envolvían: "Todos" y "Licencias médicas"
   arriba, "Pensión de invalidez" sola abajo. Dos filas de píldoras sueltas se
   leen como dos grupos distintos —como si la de abajo fuera otra cosa— y
   empujan el catálogo casi cien píxeles hacia abajo en la pantalla donde menos
   sobra.

   En fila con desplazamiento lateral: es lo que hace cualquier catálogo en el
   teléfono y el gesto ya se conoce. La barra de scroll se esconde porque acá
   estorba más de lo que informa; lo que dice que hay más es el chip cortado
   contra el borde.

   La sangría negativa es la que consigue ese corte: la fila se sale del
   relleno del contenedor y llega al borde de la pantalla, así el último chip
   se ve partido en vez de terminar justo antes del margen —que se lee como que
   ahí se acabaron—. El relleno interior repone el margen para el primero. */
@media (max-width: 720px) {
    .chip-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        /* Que la sombra suave del chip no quede cortada arriba y abajo. */
        padding-block: 0.2rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .chip-nav::-webkit-scrollbar { display: none; }
    /* Sin esto, flex les quita ancho a los chips largos para que "quepan" y el
       texto se parte igual, que es lo que se venía a evitar. */
    .chip-nav__item { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Pastillas rellenas, no de contorno: es lo que se usa hoy para un filtro, y el
   estado activo se ve sin depender de un borde de 1px. */
.chip-nav__item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text-muted);
    background: var(--color-bg);
    box-shadow: var(--shadow-xs);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.chip-nav__item:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.chip-nav__item.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--color-text-inverse);
}

/* ---------- En el catálogo ----------
   Mismas tarjetas, tres columnas fijas en escritorio. Acá el número de columnas
   se declara y no se calcula, y hay dos razones medidas para eso:

   `auto-fill` —lo que había antes— reserva todas las columnas que quepan aunque
   sobren, y con tres servicios en 1120px dejaba una cuarta columna de aire a la
   derecha que se lee como contenido que no cargó.

   `auto-fit` con un máximo fijo hace lo contrario: como las columnas no pueden
   pasar de ese ancho, tres de 380 no entran en 1120 y la grilla baja a dos,
   dejando media página vacía.

   Con 1/2/3 según el ancho, tres servicios llenan la fila y el cuarto abre una
   segunda, que es como se comporta cualquier catálogo. */
.service-cards--catalogo { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .service-cards--catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .service-cards--catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los dos botones del catálogo —ver detalle y agendar— comparten el pie con el
   precio. En la portada va uno solo y esta regla no llega a aplicarse. */
.service-card__acciones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Sobre el ::after que hace clicable la tarjeta: sin esto los botones
       quedan tapados por él y los dos llevarían a la ficha. */
    position: relative;
    z-index: 1;
}

/* ---------- La tarjeta ---------- */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* El relleno vive en __body: la foto llega hasta el borde. */
    padding: 0;
    overflow: hidden;
    background: var(--surface-quiet);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-organic);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.service-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

/* La destacada se separa por borde y elevación, no por color de fondo: así el
   texto conserva el mismo contraste que en el resto de las tarjetas. */
.service-card--featured {
    border-color: var(--color-cta);
    box-shadow: var(--shadow-soft);
}

/* ---------- Portada ---------- */
.service-card__media {
    position: relative;
    margin: 0;
    /* 3:2, el mismo recorte con el que se guardaron los archivos: así el
       object-fit no vuelve a recortar y la foto se ve como se preparó. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--sage-soft);
}

.service-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--ease-spring);
}

/* Acercamiento apenas perceptible al pasar el mouse: mueve la foto, no la
   tarjeta entera, así el texto no vibra. */
.service-card:hover .service-card__media img { transform: scale(1.04); }

/* El chip de categoría se apoya sobre la foto. Fondo sólido y no un velo
   translúcido: encima de una foto cualquiera, el texto sobre transparencia se
   vuelve ilegible en cuanto la imagen tiene una zona clara. */
.service-card__cat {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: calc(100% - 1.7rem);
    padding: 0.32rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-accent-text);
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: var(--shadow-xs);
}

.service-card__cat-icon { display: inline-flex; }
.service-card__cat-icon svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* Sin foto: la categoría vuelve al cuerpo como línea de texto. */
.service-card__cat--suelta {
    position: static;
    margin: 0.2rem 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
    max-width: none;
}

.service-card__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0;
    padding: 0.3rem 0.8rem;
    background: var(--color-cta);
    color: var(--color-cta-text);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.service-card__badge--suelta {
    position: absolute;
    top: clamp(1.4rem, 2.4vw, 1.9rem);
    right: clamp(1.4rem, 2.4vw, 1.9rem);
}

/* ---------- Cuerpo ---------- */
.service-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    /* `flex: 1` acá y en la lista de viñetas: es lo que alinea los pies de las
       tarjetas vecinas aunque los textos midan distinto. */
    flex: 1;
    padding: clamp(1.2rem, 2.2vw, 1.6rem);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--sage-soft);
    color: var(--sage-deep);
}
.service-card__icon svg { width: 23px; height: 23px; stroke-width: 1.4; }

.service-card__title {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.25;
}

.service-card__title a {
    color: inherit;
    text-decoration: none;
}

/* El área clicable de toda la tarjeta. */
.service-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.service-card:hover .service-card__title a { color: var(--sage-deep); }

.service-card__title a:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.service-card__text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Duración y modalidad: el dato que decide si el servicio sirve o no antes de
   mirar el precio. En pastillas y no en una línea de texto porque son dos
   valores independientes, no una frase. */
.service-card__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    padding: 0;
}

.service-card__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.24rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--sage-soft);
    font-size: var(--text-xs);
    color: var(--color-accent-text);
    font-variant-numeric: tabular-nums;
}
.service-card__meta svg { width: 13px; height: 13px; }

/* ---------- Qué incluye ----------
   Rótulo en versales con un filete que se come el ancho sobrante. Hace dos
   cosas de una: nombra la lista —antes empezaba sin aviso, pegada al resumen, y
   las dos se leían como el mismo párrafo— y separa el bloque sin dibujar otra
   caja dentro de la tarjeta. */
.service-card__rotulo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.6rem 0 0;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.service-card__rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.service-card__list {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Un paso más que los 14px de antes: es la letra chica que de verdad se
       lee, la que responde qué entra en el precio. */
    font-size: var(--text-base);
    line-height: 1.45;
    /* Empuja el pie al fondo: con listas de distinto largo, los precios y los
       botones de las tarjetas vecinas quedan en la misma línea. */
    flex: 1;
}

.service-card__list li {
    position: relative;
    padding-left: 2rem;
    min-height: 1.35rem;
}

/* El check va sobre una pastilla salvia, no suelto sobre el fondo: con la
   viñeta a pelo, cuatro palitos diagonales en una columna se leen como ruido y
   el ojo no encuentra dónde empieza cada línea. El círculo da el punto de
   anclaje y, de paso, repite la forma de los chips de duración y modalidad.

   Dos pseudo-elementos y ningún SVG: son cuatro por tarjeta y no vale cargar un
   icono por viñeta. ::before es la pastilla, ::after el check. */
.service-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.02rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--sage-soft);
}

.service-card__list li::after {
    content: '';
    position: absolute;
    left: 0.46rem;
    top: 0.32rem;
    width: 0.32rem;
    height: 0.6rem;
    border: solid var(--sage-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* En la tarjeta destacada la pastilla se tiñe del color de la acción: es el
   único refuerzo que recibe la lista, y basta para que la columna del medio se
   lea como la completa sin cambiarle el tamaño ni el peso al texto. */
.service-card--featured .service-card__list li::before {
    background: color-mix(in srgb, var(--color-cta) 24%, transparent);
}

.service-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
}

.service-card__price {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

.service-card__unit {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* Por encima del ::after que hace clicable la tarjeta: sin esto el botón
   quedaría tapado por él y "Agendar" llevaría a la ficha del servicio. */
.service-card__foot .btn { position: relative; z-index: 1; }

/* ==========================================================
   Ornamento botánico
   ==========================================================
   El dibujo lo pone components/public/_ornament.php. Como el trazo es
   currentColor, todo el tema se resuelve acá: una regla para el color y otra
   por contexto para la opacidad. No hay una segunda copia para modo oscuro.

   Tres instancias y ninguna más: el tallo del hero, la guirnalda del cierre y
   la rama del pie. Un ornamento repetido deja de leerse como detalle y pasa a
   leerse como textura de fondo, que es otra cosa y bastante peor.

   Las páginas interiores no llevan uno propio a pesar de tener su franja salvia:
   el del pie ya aparece en todas, y sumarle otro obligaba a tocar las seis
   plantillas para repetir el mismo motivo dos veces en la misma pantalla.

   No llevan filter: brightness() en oscuro —a diferencia de .cover-ilustrada,
   que sí tiene blancos fijos—: acá se gradúa por opacidad, y
   --ornament-opacity ya baja solo en el bloque oscuro de base.css. */
/* ---------- La planta del fondo ----------
   Un tallo largo pegado al borde izquierdo, detrás de todo, en todas las
   páginas públicas. La idea es la de la consulta: algo vivo al costado, no un
   patrón que se repite.

   `fixed` y no `absolute`: pegada al documento habría que decidir su alto —y en
   una página de 10.000px o se estira deformada o se corta a un tercio—. Fija al
   viewport, el tallo se ve completo en cualquier página y el contenido pasa por
   encima al desplazarse, que es justo el efecto de fondo que se busca.

   z-index negativo: por debajo de todo. El puntero la atraviesa. */
.fondo-planta {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: clamp(120px, 14vw, 220px);
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ornamento--fondo {
    position: absolute;
    top: -4%;
    /* Un tercio del tallo queda fuera del cuadro: la planta entra desde el
       borde en vez de estar apoyada contra él, que es como se dibujaría un
       florero. */
    left: -24%;
    height: 108%;
    width: auto;
    /* Bastante más tenue que los ornamentos de bloque: acá el dibujo convive con
       texto encima en toda su altura, no con el aire de una esquina. */
    opacity: var(--ornament-opacity);
    /* Se desvanece arriba y abajo para que no corte en seco contra la cabecera
       ni contra el pie. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 74%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 74%, transparent);
}

/* En el teléfono no hay costado libre: el contenido ocupa el ancho completo y
   la planta quedaría debajo del texto. */
@media (max-width: 900px) {
    .fondo-planta { display: none; }
}

/* Al imprimir tampoco: gasta tinta y no aporta nada al papel. */
@media print {
    .fondo-planta { display: none; }
}

.ornamento {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    color: var(--ornament-color);
    opacity: var(--ornament-opacity);
}

/* Sobre la franja salvia el trazo pierde contraste contra su fondo: sube. */
.hero .ornamento,
.cta-block .ornamento { opacity: var(--ornament-strong); }

/* En el pie oscuro la salvia normal desaparece: va la aclarada. */
.site-footer .ornamento {
    color: var(--color-accent-on-dark);
    opacity: .18;
}

.ornamento--hero {
    left: clamp(-2rem, -1vw, 0rem);
    bottom: -1rem;
    width: clamp(90px, 11vw, 150px);
}

/* En el teléfono el hero ya va justo de alto y el tallo se cruzaría con los
   botones. */
@media (max-width: 879px) {
    .ornamento--hero { display: none; }
}

.ornamento--pie {
    right: 3%;
    top: 1.5rem;
    width: clamp(120px, 15vw, 210px);
}

/* En la banda de cierre va centrado bajo el titular, como en la referencia: ahí
   cierra la composición en vez de decorar una esquina, así que es el único que
   ocupa lugar en el flujo. */
.ornamento--cierre {
    position: relative;
    display: block;
    margin: 0 auto 1.1rem;
    width: clamp(130px, 17vw, 210px);
}

/* ==========================================================
   Cómo trabajamos + áreas
   ==========================================================
   El bloque partido de la referencia: a la izquierda quién atiende, a la
   derecha en qué. Son dos preguntas distintas y la respuesta a la primera
   condiciona si alguien se queda a leer la segunda, así que van juntas y no
   como dos secciones separadas por 128px de aire.

   La división es un filete, no un borde ni un cambio de fondo: lo que separa
   las dos mitades tiene que sugerirse, no dibujarse. */
.acompanamos__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 980px) {
    .acompanamos__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: start;
    }
    .acompanamos__areas {
        padding-left: clamp(2.5rem, 4vw, 3.5rem);
        border-left: 1px solid var(--hairline);
    }
}

/* La foto arriba y el texto abajo, como en la referencia, salvo que haya ancho
   de sobra para ponerlas lado a lado. */
.acompanamos__intro { display: grid; gap: 1.6rem; }

@media (min-width: 620px) and (max-width: 979px) {
    .acompanamos__intro {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        align-items: center;
    }
}

.acompanamos__figura { margin: 0; }

/* La forma orgánica en vez del rectángulo redondeado: es lo que más rápido
   separa este sitio de una plantilla. El recorte va en la figura y no en la
   <img> para que object-fit resuelva el encuadre antes de que el radio lo
   corte —al revés, Safari recorta la caja original y la foto se descentra—. */
.acompanamos__figura {
    overflow: hidden;
    border-radius: var(--blob-2);
    box-shadow: var(--shadow-soft);
    background: var(--sage-soft);
}

.acompanamos__figura img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.acompanamos__titulo {
    margin: 0 0 var(--space-md);
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 1.2rem + 1.1vw, var(--text-5xl));
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: var(--leading-serif);
    color: var(--color-text-strong);
}

.acompanamos__texto p { color: var(--color-text-muted); line-height: 1.7; }

/* La firma de la referencia, traducida. Allá es el nombre manuscrito de una
   psicóloga; acá el sitio es de un equipo, así que es una línea de credencial
   y no una rúbrica: firmar en nombre de varias personas con una caligrafía
   inventada sería decorar una mentira. */
.acompanamos__firma {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.acompanamos__areas .section__lead { margin-bottom: var(--space-xl); }
.acompanamos__mas { margin: var(--space-xl) 0 0; }

/* ---------- Las áreas como iconos en círculo ----------
   Eran tarjetas con borde, sombra y flecha. Cuatro cajas seguidas se leen como
   un catálogo de productos, y esto no es un catálogo: es la lista de a qué se
   dedica el lugar. Sin caja, lo que queda es el icono y el nombre, que es lo
   único que alguien mira en este bloque. */
.areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.2rem 0;
}

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

.area-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .7rem;
    padding: 0 1.2rem;
    text-decoration: none;
    color: inherit;
}
.area-item:hover { text-decoration: none; color: inherit; }

.area-item__icon {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--sage-deep);
    transition: background var(--transition), transform var(--transition-slow) var(--ease-spring);
}

/* iconos.php los emite a 24px con stroke 1.6; acá se agrandan y se adelgazan,
   que es el trazo fino de la referencia. */
.area-item__icon svg { width: 30px; height: 30px; stroke-width: 1.3; }

.area-item:hover .area-item__icon {
    background: var(--wash-sage);
    transform: translateY(-3px);
}

.area-item__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.2;
}

.area-item__text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* El filete entre columnas, nunca en la primera de cada fila. La cantidad de
   áreas la decide el catálogo, así que las columnas son fijas: con auto-fit no
   hay forma de saber cuál abre fila y aparecería un filete suelto. */
@media (min-width: 520px) {
    .area-item:nth-child(2n) { border-left: 1px solid var(--hairline); }
}

/* ---------- En el teléfono, una lista y no una columna de pósters ----------
   En una sola columna, cada área ocupaba media pantalla: círculo de 78px
   centrado, título, bajada y 2.2rem de aire hasta la siguiente. Cuatro áreas
   pedían tres pantallazos de scroll para leer cuatro nombres, y como todo iba
   centrado y sin filete, no se veía dónde terminaba una y empezaba otra.

   En fila —icono a la izquierda, nombre y bajada a la derecha, un filete entre
   medio— las cuatro entran de una vez. Es la misma pieza que usan las listas
   de "otras áreas" y "el resto del equipo" en las páginas interiores, así que
   además el sitio se repite a sí mismo en vez de inventar una forma más.

   Grid y no flex en fila: el icono tiene que ocupar el alto de las dos líneas
   —nombre y bajada— y flex lo dejaría como un tercer hermano al lado. */
@media (max-width: 519px) {
    .areas-grid { gap: 0; }

    .area-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icono titulo flecha"
            "icono texto  flecha";
        align-items: center;
        text-align: left;
        gap: 0.15rem 0.9rem;
        padding: 0.95rem 0;
        border-top: 1px solid var(--hairline);
    }
    .area-item:first-child { border-top: 0; }

    .area-item__icon {
        grid-area: icono;
        width: 46px;
        height: 46px;
        border-radius: var(--radius);
    }
    .area-item__icon svg { width: 22px; height: 22px; }
    /* El icono no se levanta al tocar: en una lista, el movimiento de una fila
       sola se lee como que se descolocó. */
    .area-item:hover .area-item__icon { transform: none; }

    .area-item__title { grid-area: titulo; align-self: end; font-size: var(--text-xl); }
    .area-item__text {
        grid-area: texto;
        align-self: start;
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    /* La flecha dice que la fila lleva a alguna parte. Se dibuja con dos bordes
       y no con un SVG porque el marcado lo comparten las dos presentaciones y
       en escritorio esta fila no existe. */
    .area-item::after {
        content: '';
        grid-area: flecha;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--color-text-subtle);
        border-bottom: 2px solid var(--color-text-subtle);
        transform: rotate(-45deg);
    }
}

/* ==========================================================
   Cómo funciona — pasos reales del proceso
   ========================================================== */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem 1.4rem;
    counter-reset: paso;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps li {
    counter-increment: paso;
    position: relative;
    padding-top: 2.9rem;
}

.steps li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sage-deep);
    background: var(--sage-soft);
    border-radius: var(--radius-pill);
    padding: 0.32rem 0.8rem;
    letter-spacing: 0.04em;
}

.steps h3 { margin: 0 0 0.4rem; font-size: var(--text-lg); }
.steps p  { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; }

/* ==========================================================
   Contacto (form + datos del negocio)
   ========================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    margin-top: var(--space-lg);
}

.contact-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 580px; }

/* La caja de datos mide lo que mide su contenido y el formulario es más alto:
   esa diferencia queda como aire al pie de la columna, y está bien así. Se
   probaron las dos alternativas y las dos quedaron peor: pegada al scroll se
   lee como un error, y estirada al alto del formulario deja un vacío enorme
   entre el botón de WhatsApp y los datos. */

@media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Llamado a la acción de cierre
   ==========================================================
   Vino de contenido.css. Esa hoja se carga por página —la portada solo la pide
   si hay entradas publicadas—, así que un bloque compartido entre la home y las
   interiores no puede depender de ella: una instalación sin blog lo habría
   renderizado sin estilo. Acá está garantizado en todo lo público.

   Era una placa --ink oscura. Pasa a la franja salvia de la referencia: el
   cierre deja de ser un corte a negro y se vuelve el mismo verde lavado que ya
   usa el resto de la página, con la marca en grande y muy bajita detrás. El
   peso lo da el tamaño del titular y el aire, no el contraste.

   Sin borde y sin sombra: es una franja de color, no una tarjeta. */
.cta-block {
    position: relative;
    margin-top: 0;
    padding: clamp(3rem, 6vw, 4.5rem) 1.8rem;
    border-radius: var(--radius-organic);
    background: var(--sage-soft);
    border: 0;
    color: var(--color-text);
    text-align: center;
    overflow: hidden;
}

/* En las páginas de contenido el bloque va más apretado. En la portada cierra
   la página y lleva ornamento y marca de agua, así que necesita altura; acá es
   el pie de un catálogo de tres tarjetas y con el mismo relleno quedaban 240px
   de verde con tres líneas al medio. El texto también se acota: centrado y a
   todo el ancho, la bajada de dos líneas se partía en cuatro trozos cortos. */
.content .cta-block {
    padding: clamp(2rem, 3.5vw, 2.8rem) 1.8rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}
.content .cta-block h2 { font-size: clamp(var(--text-3xl), 1.1rem + 1.1vw, var(--text-5xl)); }
.content .cta-block p  { max-width: 46ch; margin-inline: auto; }

/* Todo el contenido va sobre la marca de agua. Sin este z-index el <span>
   posicionado se dibuja encima del texto por orden de pintado. */
.cta-block > *:not(.cta-block__marca) { position: relative; z-index: 1; }

.cta-block h2 {
    margin: 0 0 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(var(--text-3xl), 1.2rem + 1.6vw, var(--text-6xl));
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: var(--leading-serif);
    color: var(--color-text-strong);
    max-width: 22ch;
    margin-inline: auto;
}
.cta-block p { margin: 0 auto 1.6rem; max-width: 46ch; color: var(--color-text); }

.cta-block__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* La fila de contacto del pie de la banda: teléfono y correo a la vista para
   quien prefiere no pasar por un formulario. */
.cta-block__contacto {
    display: flex;
    gap: .5rem 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.4rem 0 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}
.cta-block__contacto a { color: var(--sage-deep); }

/* El isotipo enorme y casi invisible detrás del titular, como la letra griega
   de la referencia. Reusa components/brand_mark.php: es currentColor y no trae
   <defs> con id, así que puede aparecer tres veces en la misma página —header,
   drawer y acá— sin colisionar. */
.cta-block__marca {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(52%, 340px);
    color: var(--sage-deep);
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}
.cta-block__marca svg { width: 100%; height: auto; stroke-width: 1; }

/* Acá subía la opacidad del isotipo en modo oscuro, porque sobre la franja
   #2f382f el dibujo daba 1.12:1 y desaparecía. Se fue con el modo oscuro del
   sitio público (ver base.css): esta hoja es pública, así que la regla ya no
   tenía a quién aplicarse. */

/* ==========================================================
   Página de error (404)
   ========================================================== */
.error-page {
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
}

/* El "404" es dato técnico, no el mensaje: va discreto y el titular explica
   en palabras qué pasó. */
.error-page__code {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: 0.14em;
    color: var(--color-accent-text);
}

.error-page__title { margin: 0 0 var(--space-md); }

.error-page__text {
    margin: 0 auto var(--space-xl);
    max-width: 46ch;
    font-size: var(--text-xl);
    color: var(--color-text-muted);
}

/* Los caminos principales, en tarjetas: quien llega desde Google a una URL
   caída necesita una salida concreta, no solo "volver al inicio". */
.error-page__links {
    list-style: none;
    margin: 0 auto var(--space-xl);
    padding: 0;
    max-width: 640px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.9rem;
    text-align: left;
}
.error-page__links a {
    display: block;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.error-page__links a:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
}
.error-page__links strong { display: block; font-size: var(--text-lg); }
.error-page__links span { display: block; margin-top: 0.15rem; font-size: var(--text-md); color: var(--color-text-muted); }

.error-page__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================
   Ajuste de botones del sitio público
   ==========================================================
   La base vive en components.css, que también carga el admin. Estos retoques
   son de lenguaje visual —sombra difusa, más aire, el objetivo táctil— y en un
   panel de trabajo estorbarían: ahí los botones se aprietan seguido y conviene
   que ocupen poco. Por eso van acá, donde el admin no llega.

   No se toca el color ni el contraste: eso ya está resuelto y verificado en
   components.css. */
.sitio-publico .btn {
    padding: 0.78rem 1.4rem;
    box-shadow: var(--shadow-soft);
}

.sitio-publico .btn:hover {
    /* La sombra dura del hover empujaba el botón hacia adelante de golpe; con
       la difusa el movimiento se siente como que se levanta, no que salta. */
    box-shadow: 0 14px 30px -18px rgba(31, 58, 54, 0.45);
}

.sitio-publico .btn:active { box-shadow: none; }

/* El botón de conversión es el único relleno sólido de la interfaz: se le
   conserva su sombra teñida, que es lo que lo separa del resto. */
.sitio-publico .btn--cta { box-shadow: var(--shadow-cta); }
.sitio-publico .btn--cta:hover { box-shadow: 0 14px 30px -14px rgba(10, 111, 102, 0.55); }

/* Los de contorno no flotan: no tienen relleno del que despegarse. */
.sitio-publico .btn--secondary,
.sitio-publico .btn--ghost { box-shadow: none; }
.sitio-publico .btn--secondary:hover,
.sitio-publico .btn--ghost:hover { box-shadow: var(--shadow-soft); }

@media (pointer: coarse) {
    /* 44px de alto real en pantalla táctil. Con el relleno anterior varios
       botones quedaban en 41 y 42. */
    .sitio-publico .btn { padding-block: 0.85rem; }
}