/*
 * components.css
 * ------------------------------------------------------------
 * Componentes UI reutilizables. Funcionan igual en público
 * y admin. Naming: BEM simple (.bloque__elemento--modificador).
 * ------------------------------------------------------------
 */

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -0.008em;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
                background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-strong), var(--shadow-sm);
}

.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* El botón de conversión: azul sólido con texto blanco (8.4:1). Es el único
   relleno sólido de color de la interfaz —el resto de los botones son contorno
   o fantasma—, y eso es lo que lo hace destacar sin gritar. */
.btn--cta {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text);
    box-shadow: var(--shadow-cta);
}
.btn--cta:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: var(--color-cta-text);
    box-shadow: 0 14px 30px -8px rgba(10, 111, 102, 0.45);
}
.btn--cta:focus-visible { box-shadow: var(--ring-cta), var(--shadow-sm); }

.btn--secondary {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
    background: var(--color-bg);
    border-color: var(--ink);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
}
.btn--ghost:hover {
    background: var(--color-bg-hover);
    border-color: transparent;
    color: var(--color-text);
    box-shadow: none;
    transform: none;
}

.btn--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}
.btn--danger:hover {
    background: #8f2b21;
    border-color: #8f2b21;
    color: #fff;
}

.btn--small {
    padding: 0.42rem 0.85rem;
    font-size: var(--text-sm);
}

.btn--lg {
    padding: 0.95rem 1.9rem;
    font-size: var(--text-lg);
}

/* Flecha que se desplaza al pasar por encima: indica continuidad sin agregar
   un icono más a la interfaz. */
.btn--arrow::after {
    content: '→';
    transition: transform var(--transition);
}
.btn--arrow:hover::after { transform: translateX(3px); }

/* ==========================================================
   Forms
   ========================================================== */
.form__field {
    display: block;
    margin: 0 0 var(--space-md);
}

.form__field label {
    display: block;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.72rem 0.9rem;
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    appearance: none;
}

/* En el teléfono, 16px. No es una preferencia tipográfica: iOS hace zoom solo
   cuando el campo enfocado mide menos, y al volver deja la página corrida a la
   derecha con el formulario a medio llenar. Los 15px de --text-base caen justo
   debajo del umbral, así que pasaba en cada campo de cada formulario del sitio.

   Va acá y no en la hoja de la agenda por dos razones: le pasa a todos los
   formularios —contacto, reseña, carro, ingreso— y repetir la cadena de :not()
   en otra hoja para ganarle a esta era peor que corregirla en su casa. */
@media (max-width: 900px), (pointer: coarse) {
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
    textarea,
    select {
        font-size: 1rem;
    }
}

input::placeholder,
textarea::placeholder { color: var(--color-text-subtle); }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b73' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2rem;
    cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sage-deep);
    box-shadow: var(--ring-strong);
}

textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.5;
}

.form__submit { margin-top: var(--space-lg); }

.inline-form {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
}
.inline-form select,
.inline-form input { width: auto; flex: 0 0 auto; }

/* ==========================================================
   Tables
   ========================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin: 0 0 var(--space-md);
}

.table th,
.table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table th {
    font-weight: 600;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.table tbody tr:hover { background: var(--color-bg-alt); }

.table--striped tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.table--striped tbody tr:nth-child(even):hover { background: var(--color-bg-hover); }

/* ==========================================================
   Alerts
   ========================================================== */
.alert {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    font-size: var(--text-base);
    line-height: 1.5;
}

.alert--error {
    background: var(--color-danger-soft);
    border-color: #f3d5d0;
    border-left-color: var(--color-danger);
    color: #7d2820;
}

.alert--success {
    background: var(--color-success-soft);
    border-color: #c6e2d8;
    border-left-color: var(--color-success);
    color: #1f5546;
}

/* ==========================================================
   Badges (default fuera de admin)
   ========================================================== */
.badge {
    display: inline-block;
    padding: 0.2rem 0.68rem;
    font-size: var(--text-xs);
    font-weight: 550;
    letter-spacing: 0.01em;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Estados de una cita. Viven acá, junto a la base de .badge, porque los usan
   tanto el panel como la ficha pública "Mi cita". El color acompaña al texto,
   no lo reemplaza: el estado se lee igual en escala de grises. */
.badge--booking-pendiente_pago { background: var(--color-warn-soft); color: var(--color-warn); border-color: #f0d5b8; }
.badge--booking-confirmada     { background: var(--color-success-soft); color: var(--color-success); border-color: #c6e2d8; }
.badge--booking-realizada      { background: var(--sage-soft); color: var(--sage-deep); border-color: var(--color-border-cool); }
.badge--booking-cancelada      { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.badge--booking-no_asistio     { background: var(--color-danger-soft); color: var(--color-danger); border-color: #f3d5d0; }

/* Estados de una orden. */
.badge--order-pendiente      { background: var(--color-warn-soft); color: var(--color-warn); border-color: #f0d5b8; }
.badge--order-pagado         { background: var(--color-success-soft); color: var(--color-success); border-color: #c6e2d8; }
.badge--order-en_elaboracion { background: var(--sage-soft); color: var(--sage-deep); border-color: var(--color-border-cool); }
.badge--order-entregado      { background: var(--color-success-soft); color: var(--color-success); border-color: #c6e2d8; }
.badge--order-cancelado      { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.badge--order-reembolsado    { background: var(--color-danger-soft); color: var(--color-danger); border-color: #f3d5d0; }

.badge--solid {
    background: var(--color-text);
    color: var(--color-primary-text);
    border-color: var(--color-text);
}

/* Las tarjetas de servicio (.service-card) vivían acá, de la época en que la
   portada tenía una grilla .services-grid que ya no existe. El bloque nuevo
   —con foto de portada, chip de categoría y fila desplazable— está en
   layout.css, que es exclusiva del sitio público; esta hoja la carga también el
   admin y las reglas de una tarjeta de la portada no pintan nada ahí.

   No es solo higiene: components.css se carga DESPUÉS de layout.css, así que
   este .service-card ganaba por orden con la misma especificidad y le devolvía
   el relleno a la tarjeta nueva, dejando la foto flotando dentro de un marco
   blanco en vez de llegar hasta el borde. */

/* ==========================================================
   Contact info (datos del negocio junto al form)
   ========================================================== */
.contact-info {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-xs);
}

.contact-info__wa { margin-bottom: var(--space-md); }

.contact-info__list {
    margin: 0;
    display: grid;
    gap: var(--space-xs);
}

.contact-info__list dt {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.contact-info__list dt:first-child { margin-top: 0; }

.contact-info__list dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
}

/* ==========================================================
   Testimonios (home)
   ========================================================== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    /* El aire sube: las tarjetas necesitan separarse entre sí más de lo que
       necesitaban tres columnas de texto suelto, y el sello sobresale por
       arriba. */
    gap: 1.6rem 1.2rem;
    margin-top: calc(var(--space-lg) + 0.6rem);
}

/* Cada cita, una tarjeta.
   ------------------------------------------------------------
   Acá antes no había caja, y con razón: encerrar una cita en una ficha con
   borde y sombra la convierte en producto. Lo que cambia el veredicto es el
   contenido, no el gusto: la puntuación estaba guardada y sin mostrar, y una
   fila de estrellas, una comilla y unas iniciales necesitan un recinto donde
   ordenarse. Sueltas sobre la franja, con un filete al lado, se leían como tres
   cosas distintas apiladas.

   La caja se sostiene con superficie y sombra suave, no con borde: es blanco
   sobre la franja salvia, que ya da el salto. Un borde encima habría sido el
   tercer recurso para separar lo mismo. */
.testimonial-card {
    position: relative;
    margin: 0;
    padding: 1.7rem 1.4rem 1.3rem;
    background: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform var(--transition), box-shadow var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
    /* Columnas fijas y no auto-fit: la cantidad de testimonios la decide quien
       administra, y con auto-fit dos citas quedaban estiradas a media página. */
    .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
    .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El sello: la comilla montada en el borde superior, como la insignia de la
   referencia. Va en un círculo propio y fuera del flujo, así que no empuja el
   texto —que es lo que hacía la comilla anterior, un ::before que se comía una
   línea entera antes de que empezara la cita—. */
.testimonial-card__sello {
    position: absolute;
    top: -16px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--sage-deep);
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* La comilla tipográfica cuelga de la parte alta de su caja: sin este
       empujón queda pegada al techo del círculo. */
    padding-top: 0.5em;
    box-shadow: 0 0 0 5px var(--color-bg-alt);
}

.testimonial-card__estrellas {
    display: flex;
    gap: 2px;
    margin: 0;
}
.testimonial-card__estrellas svg {
    width: 15px;
    height: 15px;
    fill: var(--sage-deep);
}
/* Las que faltan se dibujan igual pero apagadas: cuatro estrellas sobre cinco
   solo se entiende si se ve dónde está la quinta. */
.testimonial-card__estrellas svg.is-vacia { fill: var(--color-border-strong); }

.testimonial-card__quote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 500;
    /* Se va la cursiva. Un párrafo entero en itálica se lee más lento, y con la
       comilla, las estrellas y el nombre ya está claro que es una cita: la
       inclinación no agregaba información, solo esfuerzo. */
    letter-spacing: var(--tracking-serif);
    line-height: 1.5;
    color: var(--color-text);
    flex: 1;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

/* Las iniciales en vez de una foto: quien deja el testimonio es un paciente de
   salud mental, así que retrato no va a haber nunca. Dos letras se leen como
   persona; una silueta genérica, como icono de relleno. */
.testimonial-card__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: 0.02em;
}

.testimonial-card__quien { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.testimonial-card__quien strong { color: var(--color-text-strong); font-weight: 600; }
.testimonial-card__quien span { font-size: var(--text-sm); color: var(--color-text-muted); }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: var(--space-lg);
    max-width: 46rem;
}

/* Título a la izquierda y preguntas a la derecha. El acordeón conserva su
   medida de lectura; lo que cambia es que el ancho sobrante deja de estar al
   costado de las preguntas y pasa a sostener el título. */
@media (min-width: 900px) {
    .faq-split {
        display: grid;
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }
    .faq-split .faq-list { margin-top: 0; }
    .faq-split .section__title { margin: 0; position: sticky; top: var(--sticky-top); }
}

/* Sin caja: una lista de preguntas separadas por un filete, no ocho tarjetas
   apiladas. Como se va el borde, el único indicio de que esto se abre queda
   siendo el "+" de la derecha — por eso ni el marcador ni el reset de la
   flecha nativa de <summary> se pueden tocar. */
.faq-list { gap: 0; }

.faq-item {
    border-bottom: 1px solid var(--hairline);
    padding: 0;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
}

.sitio-publico .faq-item__question {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-serif);
    line-height: 1.3;
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__question::after {
    content: '+';
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--sage-deep);
    flex: 0 0 auto;
    transition: transform var(--transition-slow) var(--ease-out-quart);
}
.faq-item[open] .faq-item__question::after { transform: rotate(45deg); }

.faq-item__answer {
    padding: 0 0 1.15rem;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.65;
}

/* ==========================================================
   Lead form (público)
   ========================================================== */
/* Sin tope de ancho propio: el formulario ocupa lo que le da su contenedor.
   Tenía max-width: 520px de cuando iba suelto en una página ancha, y dentro de
   la tarjeta de /contacto —que mide unos 700px— dejaba 180px muertos a la
   derecha de cada campo, con el relleno izquierdo en 29px. Los dos lugares que
   lo usan (la portada y contacto) ya lo acotan: la columna del formulario en
   una, la tarjeta en la otra. */
.lead-form {
    margin: 0 0 var(--space-lg);
}

.lead-form__field {
    margin: 0 0 var(--space-md);
}

.lead-form__field label {
    display: block;
    font-size: var(--text-md);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.lead-form__submit { margin-top: var(--space-lg); }

.lead-form__field input,
.lead-form__field textarea { width: 100%; }

/* ---------------------------------------------------------------
 * Consentimiento y cookies (Ley 21.719)
 * El texto legal es largo por obligación; se compone en cuerpo chico
 * pero con interlínea amplia para que siga siendo legible, no un
 * bloque que se saltea. La casilla nunca viene marcada.
 * --------------------------------------------------------------- */
.consent {
    margin: 1.2rem 0;
    padding: .9rem 1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.consent__check { margin: 0; }
.consent__check label {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: var(--text-md);
    line-height: 1.5;
    cursor: pointer;
}
.consent__check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: .15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--sage-deep);
}
.consent__rights {
    margin: .7rem 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.form-hint {
    margin: 0 0 .5rem;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    /* Tope explícito: el `clip` de `html` no siempre acota el bloque contenedor
       de un `fixed`, y sin esto el banner salía de 698px en una pantalla de
       375 y el texto quedaba cortado. */
    max-width: 100vw;
    z-index: 60;
    background: var(--ink);
    color: #fff;
    padding: 1rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}
.cookie-banner__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cookie-banner__text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.55;
    /* 62ch es la medida cómoda de lectura, pero nunca más que el ancho
       disponible: en un teléfono, 62ch se sale de la pantalla. */
    max-width: min(62ch, 100%);
}
.cookie-banner__text a { color: #fff; text-decoration: underline; }
/* Las dos opciones pesan lo mismo: un rechazo escondido no es consentimiento libre. */
.cookie-banner__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-banner__actions form { margin: 0; }
.cookie-banner__actions .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
@media (max-width: 640px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions .btn { width: 100%; }
}

/* ==========================================================
   Objetivos táctiles
   ==========================================================
   Solo bajo `pointer: coarse` —es decir, en pantallas que se tocan— para no
   inflar la densidad del panel en escritorio, donde el mouse es preciso.

   El criterio: 44px para lo que la persona viene a hacer (agendar, comprar,
   pagar) y 36px para la navegación secundaria. La WCAG 2.5.8 pide 24px como
   mínimo; los enlaces del pie estaban en 16-17px y los botones "Elegir" de la
   agenda —que son el paso 1 del embudo— en 31px.
   ========================================================== */
@media (pointer: coarse) {
    .btn,
    .btn--small {
        min-height: 44px;
    }

    /* Navegación secundaria: pie, menú lateral y listas de enlaces. */
    .person-card__name a,
    .site-footer__col a,
    .site-footer__legal a,
    .site-topbar__contact a,
    .site-drawer__menu a,
    .site-drawer__contact a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    /* Controles de solo icono: sin texto que los agrande, hay que darles
       el área a mano. */
    .site-navbar__burger,
    .site-drawer__close,
    .site-footer__socials a,
    .site-drawer__socials a,
    .site-topbar__socials a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Las tarjetas de precio (.pricing-*) vivían acá y se fueron con el bloque que
   las usaba: la portada ya no lista precios en columnas, lista servicios en
   tarjetas. El reemplazo es .service-card, y vive en layout.css y no en esta
   hoja porque el admin también carga components.css y ese bloque es del sitio
   público y de ninguna otra parte. */
/* Encabezado de sección con enlace a la derecha ("Ver todos"). */
.section__head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* El tope de 40rem que trae `.section__head` es para que la bajada no se
       estire a lo ancho de la pantalla. Acá dejaba el bloque entero en 640px de
       1120, el enlace caía debajo del texto y quedaban 448px vacíos al lado: el
       tope se mueve al bloque de texto y el encabezado abarca el ancho. */
    max-width: none;
}
.section__head--split > :first-child { max-width: 40rem; }
.section__more {
    flex: 0 0 auto;
    font-size: var(--text-md);
    font-weight: 550;
    white-space: nowrap;
}

/* ==========================================================
   Áreas de trabajo (portada)
   ==========================================================
   Se fueron a layout.css con el nombre .area-item. Dejaron de ser tarjetas
   —caja, borde, sombra y flecha— para ser un icono en círculo con el texto
   debajo, y como solo las usa la portada pública conviene que vivan en la hoja
   que el admin no carga. Acá quedaba la única regla de la portada dentro de una
   hoja compartida, que es justo la que puede filtrarse sin que se note.
   ========================================================== */

/* ==========================================================
   Franja de portada de las páginas interiores
   ==========================================================
   El celeste es el color principal de la marca, pero fuera del home no
   aparecía en ninguna parte: las páginas abrían en crema y se veían planas.
   La cabecera se apoya sobre la misma franja celeste del hero, a sangre.

   Va acá y no en contenido.css porque la tienda no carga esa hoja.

   Solo cuando el título abre la página: en las fichas el primer elemento es la
   ruta de navegación, y ahí la franja quedaría cortando por la mitad.
   ========================================================== */
.content > .content__header:first-child,
.shop__header {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0 clamp(1.25rem, 2vw, 1.75rem);
    margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* La franja de una página interior no es un hero: dice el nombre de la sección
   y poco más. Con el titular a 48px y la bajada debajo medía 210px de alto y
   dejaba la mitad derecha vacía. Acá el titular baja a 36px y la bajada se
   corre al costado, alineada a su base: la franja queda en la mitad de alto y
   ocupa todo el ancho.

   El titular del home no entra en esta regla: ese sí es un hero y tiene su
   propia escala. */
.content > .content__header:first-child h1,
.shop__header h1 {
    font-size: clamp(var(--text-4xl), 1.2rem + 1.4vw, 2.5rem);
    margin: 0;
}

/* El prefijo acá NO es decorativo: components.css la cargan también el admin,
   el login y el instalador, y ninguno tiene la Cormorant descargada. Sin él,
   cualquier .content__header que aparezca en el panel caería al serif de
   sistema y se vería como un error de carga. */
.sitio-publico .content > .content__header:first-child h1,
.sitio-publico .shop__header h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: var(--leading-serif);
}

@media (min-width: 900px) {
    /* Solo cuando la cabecera son dos piezas —título y bajada—: si alguna
       página agrega una tercera, vuelve a apilarse y nada se descoloca. */
    .content > .content__header:first-child:not(:has(> :nth-child(3))),
    .shop__header:not(:has(> :nth-child(3))) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        column-gap: 3rem;
    }
    .content > .content__header:first-child .content__lead,
    .shop__header .shop__intro { margin-bottom: 0; }
}
.content > .content__header:first-child::before,
.shop__header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--sage-soft);
    border-bottom: 1px solid var(--color-border-cool);
    z-index: -1;
}
/* El contenido abre pegado a la cabecera para que la franja arranque donde
   termina el menú, igual que el hero del home. */
.content:has(> .content__header:first-child) { padding-block-start: 0; }

/* ==========================================================
   Enlace de salto al contenido
   ==========================================================
   Fuera de pantalla hasta que recibe el foco. Es la única forma de que quien
   navega con teclado no tenga que recorrer el menú completo en cada página.
   ========================================================== */
.skip-link {
    position: absolute;
    left: .75rem;
    top: -100px;
    z-index: 200;
    padding: .7rem 1.1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transition);
}
.skip-link:focus-visible { top: .75rem; color: #fff; outline: 2px solid var(--sage); outline-offset: 2px; }