/* ==========================================================================
   Páginas — hero, portadas interiores, contacto, legales
   ========================================================================== */

/* HOME · 1 · Apertura: hero inmersivo --------------------------------------
   La fotografía real del producto ocupa toda la primera pantalla; el texto
   se apoya sobre ella, contenido, anclado abajo a la izquierda — nunca
   centrado, nunca una segunda columna. El header flota transparente
   encima mientras dura este hero (ver regla .page--home .site-header más
   abajo) y el propio hero se desliza bajo su hueco con un margen negativo
   igual a su altura (6.25rem, layout.css), así la foto llega hasta el
   borde superior real de la ventana sin tocar el marcado del header. */
.hero-immersive {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Pantalla completa real: nada de la siguiente sección puede asomar en
       la primera carga. 100vh primero (compatibilidad); dvh la corrige por
       encima cuando el navegador la soporta, para que el 100% sea el alto
       real disponible y no el de la ventana con la barra aún desplegada. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    /* Nunca sin foto: si todavía no hay fotografía real, se pierde el
       recorte a pantalla completa pero el hero conserva una altura y un
       fondo de marca razonables en vez de colapsar. */
    background: var(--verde-oscuro);
}

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

.hero-immersive__media .photo,
.hero-immersive__media .photo img { height: 100%; }

/* Mismo pulido tonal discreto que ya llevaba la apertura anterior: más
   cuerpo y más calidez, sin llegar a un filtro evidente. */
.hero-immersive__media .photo img {
    filter: saturate(1.08) contrast(1.05) brightness(0.97);
    /* object-position por tamaño de ventana, más abajo: móvil recorta los
       lados, escritorio recorta arriba/abajo — cada uno necesita su propio
       encuadre para que el queso siga siendo el protagonista. */
}

/* Velo funcional, no decorativo: un único degradado diagonal que nace en
   la esquina donde vive el texto y se disuelve antes de llegar a la mitad
   de la fotografía. El resto de la imagen —textura, color, el queso—
   queda intacto. Intensidad dentro de 18–28%, nunca un lavado general. */
.hero-immersive__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top right,
        rgba(24, 49, 26, 0.5) 0%,
        rgba(24, 49, 26, 0.22) 20%,
        rgba(24, 49, 26, 0.08) 38%,
        transparent 56%
    );
}

/* Envoltorio: es un ".container" normal y corriente, igual que
   site-header__inner — mismo max-width, mismo gutter, mismo eje de
   centrado. No se le toca el "margin-inline": es precisamente heredar esa
   regla lo que garantiza que el folio, el H1 y el CTA arranquen en la
   misma columna óptica que el logo a cualquier ancho, incluidos los
   anchos por encima de los 84rem donde el contenedor del sitio deja de
   ocupar todo el viewport y empieza a centrarse. */
.hero-immersive__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
    color: var(--tinta-inversa);
}

/* El ancho de lectura se limita aquí, un nivel por dentro del contenedor
   compartido — así no interfiere con su alineación. En móvil no se limita:
   el texto usa el ancho completo del gutter, como el resto del sitio. */
.hero-immersive__text { max-width: none; }

.hero-immersive__content .eyebrow--rule {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.hero-immersive__content .eyebrow--rule::before {
    content: '';
    width: 2.1rem;
    height: 1px;
    background: currentColor;
    flex: none;
}

/* Mismo -17% que el resto del sitio editorial: un titular con presencia,
   nunca a pantalla completa, casi siempre dos líneas cortas. */
/* Sin límite en "ch": las dos líneas ya están decididas por el <br> del
   marcado, no por el ajuste de línea del navegador — limitar el ancho aquí
   forzaría un tercer salto en la línea más larga. */
.hero-immersive__title {
    margin-top: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
    font-size: clamp(1.9rem, 0.83rem + 4.32vw, 5.4rem);
    color: var(--tinta-inversa);
    white-space: normal;
}

.hero-immersive__lead {
    margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
    max-width: 34ch;
    color: rgba(246, 243, 236, 0.86);
}

.hero-immersive__action { margin-top: clamp(2.1rem, 1.7rem + 1.4vw, 3rem); }

/* Móvil (<48em): pantalla completa real con svh (evita el salto de la
   barra de Safari/Chrome), recorte de foto centrado ligeramente a la
   derecha para no perder el queso protagonista, y aire extra bajo el CTA
   que respeta el área segura del dispositivo. */
.hero-immersive {
    min-height: 100vh;
    min-height: 100svh;
}

.hero-immersive__media .photo img { object-position: 62% 46%; }

.hero-immersive__content {
    padding-bottom: max(2.5rem, calc(1.25rem + env(safe-area-inset-bottom)));
}

/* Tablet (48–62em): conserva el impacto fotográfico — no es un escritorio
   encogido — con su propio recorte. Hereda la altura completa de la regla
   base: nada de la siguiente sección puede asomar tampoco aquí. */
@media (min-width: 48em) and (max-width: 61.99em) {
    .hero-immersive__media .photo img { object-position: 58% 42%; }
    .hero-immersive__text { max-width: 30rem; }

    /* Mismo criterio que en escritorio: velo pegado a la columna real de
       texto, ya colgada del borde izquierdo. */
    .hero-immersive__veil {
        background: linear-gradient(
            to right,
            rgba(24, 49, 26, 0.46) 0%,
            rgba(24, 49, 26, 0.22) 20%,
            rgba(24, 49, 26, 0.08) 36%,
            transparent 50%
        );
    }
}

/* Escritorio (≥62em): composición cinematográfica — pantalla completa real
   (regla base), el texto vive en una caja de lectura contenida (≈544px)
   colgada del borde izquierdo real, sobre el negro de la fotografía,
   dejando el queso y su etiqueta limpios a la derecha. */
@media (min-width: 62em) {
    .hero-immersive__media .photo img { object-position: 50% 36%; }
    .hero-immersive__text { max-width: 34rem; }

    /* -9% adicional sobre el -17% ya aplicado al resto del sitio: sigue
       siendo Fraunces sobrio, pero deja de rozar el producto. */
    .hero-immersive__title { font-size: clamp(1.73rem, 0.76rem + 3.93vw, 4.91rem); }

    /* El velo se recalcula sobre la columna real de texto (≈544px + gutter)
       en vez de una diagonal de todo el fotograma: fuerte pegado al borde
       izquierdo, disuelto bastante antes de llegar al queso. */
    .hero-immersive__veil {
        background: linear-gradient(
            to right,
            rgba(24, 49, 26, 0.46) 0%,
            rgba(24, 49, 26, 0.22) 16%,
            rgba(24, 49, 26, 0.08) 30%,
            transparent 42%
        );
    }
}

/* HOME · 1 · Header transparente sobre el hero -----------------------------
   En el resto del sitio el header es "sticky" (ocupa su hueco y se fija al
   llegar arriba). En la Home necesita flotar SIEMPRE sobre el contenido
   desde el primer píxel para que la fotografía llegue hasta el borde
   superior real de la ventana, así que aquí es "fixed" en todo momento; lo
   único que cambia al cruzar el hero es el fondo y el color del texto,
   con el mismo mecanismo is-scrolled que ya usa el resto del sitio
   (app.js) — sin JavaScript nuevo. */
.page--home .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.page--home .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}

.page--home .site-header:not(.is-scrolled) .logo__img {
    filter: brightness(0) invert(1);
}

.page--home .site-header:not(.is-scrolled) .nav__link,
.page--home .site-header:not(.is-scrolled) .lang__toggle {
    color: var(--tinta-inversa);
}

.page--home .site-header:not(.is-scrolled) .nav__link.is-current {
    color: var(--tinta-inversa);
    text-decoration-color: rgba(246, 243, 236, 0.65);
}

.page--home .site-header:not(.is-scrolled) .burger {
    border-color: var(--linea-inversa);
}

.page--home .site-header:not(.is-scrolled) .burger__line,
.page--home .site-header:not(.is-scrolled) .burger__box::before,
.page--home .site-header:not(.is-scrolled) .burger__box::after {
    background: var(--tinta-inversa);
}

/* HOME · Ritmo vertical -----------------------------------------------------
   El lujo tranquilo viene de la proporción y el ritmo, no de inflar el
   padding: --space-section (base.css) es el valor por defecto de TODO el
   sitio (catálogo, quesería, pedido) y no se toca. La Home define su propio
   valor, más contenido, en tres tramos — móvil / tablet / desktop — para
   que cada capítulo respire sin convertirse en una pantalla casi vacía.
   Sólo se aplica a los capítulos de contenido editorial y al cierre; el
   hero (pantalla completa) queda fuera por completo. */
.page--home {
    --home-space: clamp(3.25rem, 8vw, 4.5rem);
}

@media (min-width: 48em) {
    .page--home { --home-space: clamp(4rem, 5vw, 5.5rem); }
}

@media (min-width: 75em) {
    .page--home { --home-space: clamp(5rem, 6vw, 6.5rem); }
}

.page--home .origin,
.page--home .curings,
.page--home .awards-home,
.page--home .band--soft {
    padding-block: var(--home-space);
}

/* Garantía DOP: transición, no capítulo completo — ~70% del ritmo base
   (objetivo ≈65-75%), en los tres tramos a la vez. */
.page--home .dop {
    padding-block: calc(var(--home-space) * 0.7);
}

/* HOME · 2 · Origen ---------------------------------------------------------
   Territorio → cabra majorera → leche → queso. La fotografía es prueba, no
   espectáculo: contenida en su propia columna, nunca a sangre, nunca con
   texto encima — así no repite ni el hero ni el planteamiento panorámico
   anterior. El texto lleva el peso del argumento; mucho negativo alrededor
   de la imagen. Mismo .container que el resto de la Home. */
.origin__grid {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* Móvil: foto a ancho completo, 4:3 — nunca recorta lo importante del
   encuadre real. Tablet (48–75em): la foto manda primero, algo más
   contenida que el ancho útil; el texto llega después, ya debajo. */
.origin__media { max-width: none; width: 100%; }

@media (min-width: 48em) and (max-width: 74.99em) {
    .origin__media { width: 75vw; margin-inline: auto; }
}

.origin__media .photo img {
    /* Misma discreción tonal que el hero, nunca un filtro evidente. */
    filter: saturate(1.04) contrast(1.02);
    object-position: 50% 38%;
}

.origin__text { max-width: 30rem; }

.origin__text .eyebrow--rule {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.origin__text .eyebrow--rule::before {
    content: '';
    width: 2.1rem;
    height: 1px;
    background: var(--marron);
    flex: none;
}

.origin__phrase {
    margin-top: 0.9rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--verde-oscuro);
}

.origin__body {
    margin-top: 1rem;
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--tinta-suave);
}

.origin__phrase + .origin__body { margin-top: 1.5rem; }

.origin__close {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea-suave);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marron);
}

@media (min-width: 75em) {
    /* Asimetría deliberada, nunca 50/50: ~47% foto / ~7-8% gutter / ~40%
       texto sobre el ancho del container (mismo eje que header y hero).
       A 1440 esto da una foto de ≈600px — más presencia que antes sin
       convertirse en la mitad de la pantalla. */
    .origin__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: clamp(3.5rem, 3vw + 3rem, 5.5rem);
        align-items: center;
    }
    .origin__media { max-width: none; width: auto; }
    .origin__text { max-width: 30rem; margin-left: clamp(1rem, 2vw, 3rem); }
}

/* HOME · 3 · Garantía DOP ---------------------------------------------------
   Paper Linen: rompe el Warm Cream de Origen justo antes. Titular a la
   izquierda, los tres distintivos oficiales a la derecha con mucho aire —
   nunca en tarjetas. Sin sombras, sin iconos añadidos, sin esquinas
   redondeadas: las propias imágenes del Consejo Regulador son la única
   identidad visual, sin modificarlas. */
.dop {
    background: var(--fondo-alt);
}

.dop__grid {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

.dop__intro { max-width: 34rem; }
.dop__intro .lead { margin-top: 1rem; }

.dop__marks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 1.5rem;
}

.dop__mark { display: grid; gap: 0.6rem; align-content: start; }

.dop__mark-img {
    width: 128px;
    height: auto;
    justify-self: start;
}

.dop__mark--small .dop__mark-img { width: 110px; }

.dop__mark-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--verde-oscuro);
}

.dop__mark-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--tinta-suave);
    max-width: 22ch;
}

@media (max-width: 47.99em) {
    /* Móvil: una columna, aire suficiente pero sin alargar la sección. */
    .dop__marks { grid-template-columns: 1fr; gap: 1.75rem; }
    .dop__mark { justify-items: start; }
}

@media (min-width: 48em) and (max-width: 74.99em) {
    /* Tablet: título arriba, distintivos en fila si caben con lectura
       cómoda; si no, 2+1 — nunca el desktop reducido sin más. */
    .dop__intro { max-width: none; }
    .dop__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dop__mark:last-child { grid-column: 1 / -1; }
}

@media (min-width: 75em) {
    /* Título ~35% / distintivos ~65%, como el resto de la Home: nunca
       50/50, siempre con eje compartido con header y hero. */
    .dop__grid {
        grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
        gap: clamp(3rem, 2vw + 2rem, 4.5rem);
        align-items: start;
    }
    .dop__marks { gap: clamp(2rem, 1.5vw + 1.5rem, 3rem); }
}

/* HOME · 4 · Producto -----------------------------------------------------
   Warm Cream (por defecto, sin declarar): Garantía DOP, justo antes, ya usa
   Paper Linen — repetirlo aquí dejaría dos capítulos seguidos con el mismo
   fondo. El cambio de tono entre Origen/DOP y DOP/Producto ya marca la
   respiración; no hace falta sumar padding extra al ritmo base. */

.curings__head { max-width: 44rem; }
.curings__head .display { margin-top: 0.9rem; }
.curings__head .lead { margin-top: 1.3rem; }

.curings__list {
    display: grid;
    gap: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.curings__media { margin-bottom: 1.5rem; }

.curings__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--verde-oscuro);
}

.curings__text {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--tinta-suave);
    max-width: 34ch;
}

/* Acabado y formato: el mismo lenguaje de ficha (§7 del catálogo), en voz
   baja, como una nota al pie de la pieza. */
.curings__meta {
    margin-top: 1.1rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--marron);
}

.curings__format {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--tinta-suave);
}

.curings__item--1 .curings__format { margin-top: 1.1rem; }

.curings__foot {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea-suave);
}

/* HOME · 6 · Reserva ------------------------------------------------------
   El único gran cambio de contraste de la Home: Deep Field Green (.band--dark,
   layout.css), texto crema, muy poco contenido. Cierre: puede conservar algo
   más de aire que el resto de capítulos, pero sin altura artificial — un
   extra fijo y modesto sobre el ritmo base, no un valor propio inflado. */
.reserve {
    padding-block: calc(var(--home-space) + 1rem);
}

.reserve__inner {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
}

.reserve__text .display { margin-top: 0.9rem; }
.reserve__text .lead { margin-top: 1.3rem; }
.reserve__action { margin-top: 2rem; }
.reserve__note { margin-top: 1.5rem; }
.reserve__steps { margin-top: 0; }

/* Índice editorial: filetes y numeración en lugar de tarjetas -------------- */
.index { border-top: 1px solid var(--linea); }

.index__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.4rem 1rem;
    padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    border-bottom: 1px solid var(--linea-suave);
}

.index__row:last-child { border-bottom: 1px solid var(--linea); }

.index__num {
    grid-row: 1 / 3;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--marron);
    padding-top: 0.5em;
}

.index__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
    line-height: 1.08;
    color: var(--verde-oscuro);
}

.index__title--big { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); }

.index__text {
    grid-column: 2;
    max-width: 52ch;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--tinta-suave);
}

.section__action-note { margin-top: 1.4rem; }

@media (min-width: 62em) {
    .index__row {
        grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: baseline;
    }

    .index__num { grid-row: auto; padding-top: 0; }
    .index__text { grid-column: 3; }
}

/* Cabecera de páginas interiores ------------------------------------------
   Mismo gesto que la apertura de la portada: folio, titular dominante y una
   entradilla estrecha. La fotografía, cuando la hay, va a sangre completa. */
.page-hero {
    padding-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.page-hero__text { max-width: 62rem; }

.page-hero__text .display {
    margin-top: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
    max-width: 15ch;
}

.page-hero__text .lead {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    max-width: 48ch;
}

.page-hero__media { margin-top: clamp(3rem, 2rem + 5vw, 6.5rem); }

.page-hero--plain { padding-bottom: clamp(0.5rem, 1vw, 1.5rem); }

/* Cierre de página --------------------------------------------------------
   Alineado a la izquierda, como el resto de la publicación: un bloque
   centrado con dos acciones debajo es justo el remate de plantilla que este
   sistema evita. Un filete lo separa de lo anterior. */
.closing {
    padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

.closing__inner {
    display: grid;
    justify-items: start;
    gap: 1.4rem;
    max-width: 46rem;
    padding-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
    border-top: 1px solid var(--linea);
}

.closing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.25rem;
    margin-top: 0.6rem;
}

/* Aviso de sección en preparación ---------------------------------------- */
.notice { max-width: 44rem; }

.notice .lead { margin-top: 1.1rem; }

.notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
}

.notice__link {
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.notice__link a {
    color: var(--verde);
    border-bottom: 1px solid var(--linea);
    padding-bottom: 2px;
}

.notice__link a:hover { border-bottom-color: var(--verde); }

/* Contacto -----------------------------------------------------------------
   El mensaje directo es el protagonista: formulario primero, información
   práctica al lado, mapa contenido debajo — nunca al revés. */
.contact {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    align-items: start;
}

/* Formulario: campos de línea, igual que /pedido — nada de cajas pesadas. */
.contact-form { display: grid; }
.contact-form .fields { margin-top: 1.25rem; }

.contact-form__submit { margin-top: 2rem; }

.contact-form__privacy {
    margin-top: 1.5rem;
    max-width: 44ch;
}

.contact-form__privacy .link-line { margin-left: 0.4rem; }

.field__error {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--marron);
}

/* Feedback de envío: un filete de color, nunca una caja ni un banner. */
.form-feedback {
    margin-bottom: 1.75rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--verde-oscuro);
    font-size: 0.95rem;
    color: var(--tinta);
}

.form-feedback--error { border-left-color: var(--marron); }

/* Información: columna secundaria, mismo lenguaje de ficha que antes. */
.contact__info .eyebrow--rule { margin-bottom: 1.5rem; }
.contact__value--pending { color: var(--tinta-suave); }

/* Mapa: contenido, nunca protagonista — ancho y alto propios, dentro del
   mismo container que el formulario, jamás a pantalla completa. */
.contact-map { margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem); }

.map {
    aspect-ratio: auto;
    height: 260px;
    max-width: none;
    margin-top: 0;
}

.map__placeholder { gap: 0.6rem; padding: 1.5rem; }

.map__placeholder-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--verde-oscuro);
}

.contact-map__directions { margin-top: 1rem; }

@media (min-width: 48em) {
    .map { height: 300px; }
}

@media (min-width: 75em) {
    .map { height: 320px; max-width: 860px; }
}

/* Cada dato en su renglón, separado por un filete: una ficha de contacto,
   no una tarjeta. */
.contact__block + .contact__block {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea-suave);
}

.contact__label {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
    margin-bottom: 0.6rem;
}

.contact__value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.45rem, 1.25rem + 0.9vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--verde-oscuro);
}

.contact__value a:hover { color: var(--verde); }

.contact__hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 22rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--linea-suave);
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: 2.5rem;
}

/* Páginas legales -------------------------------------------------------- */
.legal__title { margin-bottom: 1.5rem; max-width: 18ch; }

.legal__holder {
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea-suave);
}

.legal__data li {
    font-size: 0.92rem;
    color: var(--tinta-suave);
    padding-block: 0.15rem;
}

.legal__section { margin-top: 2.75rem; }

.legal__subtitle {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.012em;
    color: var(--verde-oscuro);
    margin-bottom: 0.7rem;
}

/* Texto legal: medida corta y una interlínea generosa. Se lee entero o no
   sirve de nada. */
.legal__section p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--tinta);
    max-width: 64ch;
}

.legal__meta {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea-suave);
    font-size: 0.85rem;
    color: var(--tinta-suave);
}

.legal__meta a { color: var(--verde); }

/* Errores ---------------------------------------------------------------- */
.error-page { padding-block: clamp(5rem, 4rem + 6vw, 9rem); }

/* Escritorio ------------------------------------------------------------- */
@media (min-width: 62em) {
    /* Formulario ~58-60% / información ~40-42%: el mensaje manda. */
    .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

    /* 3 · Producto: eje de tiempo. Las piezas descienden a medida que avanza
       la curación; los tamaños son deliberadamente desiguales. */
    .curings__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 1rem + 3vw, 4rem);
        align-items: start;
    }

    .curings__item--1 { padding-right: 2.5rem; }
    .curings__item--2 { margin-top: 5rem; }
    .curings__item--3 { margin-top: 11rem; padding-left: 1.5rem; }

    .curings__foot {
        grid-template-columns: auto minmax(0, 26rem);
        justify-content: space-between;
        align-items: baseline;
        justify-items: stretch;
    }

    /* 5 · Reserva: la propuesta manda, los pasos acompañan. */
    .reserve__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
    .reserve__steps { margin-top: 3.25rem; }
}

/* Catálogo ----------------------------------------------------------------
   Un sumario de piezas, no una parrilla de producto: cada queso ocupa su
   propia extensión, la fotografía manda y los datos van en un filete de
   ficha. Nada de cajas ni de precios grandes. */
.demo-band { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.demo-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--marron);
    font-size: 0.85rem;
    color: var(--tinta-suave);
    max-width: 58rem;
}

.catalog {
    display: grid;
    gap: clamp(4.5rem, 3rem + 6vw, 9rem);
}

.catalog__item {
    display: grid;
    gap: clamp(1.75rem, 1.25rem + 3vw, 4.5rem);
    align-items: start;
}

.catalog__text > * + * { margin-top: 1.1rem; }

.catalog__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--verde-oscuro);
}

.catalog__title a:hover { color: var(--verde); }

.catalog__meta {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
}

.catalog__description {
    font-size: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
    line-height: 1.75;
    color: var(--tinta-suave);
    max-width: 42ch;
}

/* Las notas sensoriales se leen como una cita al pie de la pieza. */
.catalog__tasting {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    line-height: 1.45;
    color: var(--verde-oscuro);
    max-width: 32ch;
}

.catalog__note { margin-top: 1rem; }

.catalog__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
}

.catalog__footnote {
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea-suave);
}

/* Ficha de queso ---------------------------------------------------------- */
.sheet__back {
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    font-size: 0.82rem;
    color: var(--tinta-suave);
}

.sheet__back a:hover { color: var(--verde); }

.sheet__grid {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    align-items: start;
}

.sheet__text > * + * { margin-top: 1.1rem; }
.sheet__title { margin-top: 0.8rem; max-width: 14ch; }
.sheet__availability { margin-top: 0.9rem; }

.sheet__subtitle {
    margin-top: 2.5rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
}

.sheet__tasting p {
    margin-top: 0.8rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
    line-height: 1.45;
    color: var(--verde-oscuro);
    max-width: 32ch;
}

.sheet__note { margin-top: 1rem; }
.sheet__unavailable { margin-top: 1.25rem; }

.sheet__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
}

.sheet__nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea-suave);
}

.sheet__nav-link { display: grid; gap: 0.35rem; }
.sheet__nav-link--next { text-align: right; }

.sheet__nav-label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marron);
}

.sheet__nav-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--verde-oscuro);
}

.sheet__nav-link:hover .sheet__nav-name { color: var(--verde); }

@media (min-width: 62em) {
    /* Catálogo: la fotografía pesa más que el texto y las piezas alternan
       lado, con un desnivel que rompe la rejilla de producto. */
    .catalog__item { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .catalog__item--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .catalog__item--reverse .catalog__media { order: 2; }
    .catalog__item .catalog__text { padding-top: 2.5rem; }
    .catalog__item--reverse .catalog__text { padding-top: 0; padding-bottom: 2.5rem; }

    /* Ficha: producto protagonista de la jerarquía fotográfica — 4:5,
       ~500-600px a 1440. Presencia clara sin ocupar más de la mitad. */
    .sheet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .sheet__media { position: sticky; top: 8rem; }
}

/* Pedido para recoger ------------------------------------------------------ */
.container--form { max-width: 56rem; }

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-errors {
    margin-bottom: 2.25rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--marron);
}

.form-errors__title {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
    margin-bottom: 0.6rem;
}

.form-errors li {
    font-size: 0.92rem;
    color: var(--tinta);
    padding-block: 0.15rem;
}

.wizard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.wizard__item {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--linea);
    color: var(--tinta-suave);
}

.wizard__item.is-current,
.wizard__item.is-done { border-top-color: var(--verde); color: var(--verde-oscuro); }
.is-enhanced .wizard__item.is-done { cursor: pointer; }

.wizard__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--marron);
}

.wizard__label {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.order-step > .note { margin-top: 0.9rem; }
.order-step h2 { outline: none; }

.pick__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--verde-oscuro);
}

.pick__meta {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marron);
}

.qty { border: 0; margin: 0; padding: 0; }

.qty__legend {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marron);
    padding: 0;
    margin-bottom: 0.75rem;
}

.qty__options { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.qty__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    flex: 1 1 8rem;
    max-width: 11rem;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radius-btn);
    font-size: 0.88rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.qty__option:hover { border-color: var(--verde); }
.qty__option input { accent-color: var(--verde-oscuro); }
.qty__option:has(input:checked) { border-color: var(--verde-oscuro); color: var(--verde-oscuro); background: var(--crema); }

/* Formato: dos botones del mismo ancho, nunca superpuestos. */
.qty--format .qty__options { max-width: 24rem; }

/* Paso 1 · marketplace gourmet -----------------------------------------
   Catálogo visual → configurador en panel → cesta aparte. Nada de esto
   se ve a la vez: cada zona tiene su propio momento. */
.order-step > .note + .note { margin-top: 0.3rem; }

/* Navegación por familia: texto plano, sin pills ni iconos. Sólo aparece
   con JavaScript (sin él, todo el catálogo queda visible igualmente). */
.shop-filter { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; }
.is-enhanced .shop-filter { display: flex; }

.shop-filter__btn {
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.shop-filter__btn:hover { color: var(--tinta); }
.shop-filter__btn.is-active { color: var(--verde-oscuro); border-color: var(--verde-oscuro); }

/* Catálogo: rejilla editorial. Fotografía dominante, aire generoso,
   sin sombras ni radios grandes. */
.shop-grid {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem;
}

.shop-card--off { opacity: 0.55; }

.shop-card__link {
    display: grid;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.shop-card__link--off { cursor: default; }

.shop-card__media { display: block; }
.shop-card__media .photo { border-radius: 0; }

.shop-card__body { display: grid; gap: 0.3rem; }

.shop-card__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--verde-oscuro);
    transition: color var(--transition);
}

.shop-card__link:hover .shop-card__name { color: var(--verde); }

.shop-card__meta {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marron);
}

.shop-card__formats {
    font-size: 0.82rem;
    color: var(--tinta-suave);
}

.shop-card__cta {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde-oscuro);
    border-bottom: 1px solid var(--linea);
    padding-bottom: 0.2rem;
    width: fit-content;
    transition: border-color var(--transition);
}

.shop-card__link:hover .shop-card__cta { border-color: var(--verde-oscuro); }
.shop-card--is-added .shop-card__cta { color: var(--marron); }

/* Marcador neutro cuando todavía no hay fotografía real: nunca el
   monograma de marca, que simularía un producto fotografiado. */
.photo--pending {
    background: var(--fondo-alt);
    border: 1px dashed var(--linea);
}

.photo__pending {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* Configuradores: fuera de flujo visual salvo cuando se abren. Sin
   JavaScript son secciones normales, apiladas debajo del catálogo — un
   formulario lineal perfectamente usable. */
.product-configs { margin-top: clamp(3rem, 2.4rem + 2vw, 4rem); display: grid; gap: 3rem; }

.product-config { padding-top: 2rem; border-top: 1px solid var(--linea-suave); }
.product-config:first-child { padding-top: 0; border-top: 0; }

.product-config__close { display: none; }

.product-config__media { max-width: 22rem; margin-bottom: 1.25rem; }
.product-config__media .photo { border-radius: 0; }

.product-config__body { display: grid; gap: 1.5rem; }

.product-config__select {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    font-size: 0.85rem;
    color: var(--tinta-suave);
    cursor: pointer;
}

.is-enhanced .product-config__select { position: absolute; visibility: hidden; pointer-events: none; }

.product-config .pick__name { margin-top: -0.25rem; }

.product-config__add {
    width: 100%;
    justify-content: center;
    display: none;
}

.is-enhanced .product-config__add { display: inline-flex; }

.product-config__feedback {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--verde-oscuro);
}

/* Preparación: las tres opciones miden lo mismo; el precio queda debajo,
   más pequeño, para que el nombre nunca tenga que partirse en dos líneas. */
.prep__options { display: grid; gap: 0.6rem; width: 100%; }

.prep__option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.prep__option:hover { border-color: var(--verde); }
.prep__option input { flex: none; accent-color: var(--verde-oscuro); }
.prep__option:has(input:checked) {
    border-color: var(--verde-oscuro);
    border-width: 2px;
    padding: calc(0.75rem - 1px) calc(1.1rem - 1px);
    background: var(--crema);
}
.prep__option:has(input:checked) .prep__name { color: var(--verde-oscuro); font-weight: 500; }

.prep__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.prep__name { font-size: 0.88rem; line-height: 1.3; color: var(--tinta); }
.prep__price { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--tinta-suave); }

/* Cantidad: contador compacto, deliberadamente distinto de un campo de
   formulario — sin fondo de input, sin borde de longitud completa. */
.stepper { display: flex; align-items: center; }

.stepper__control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--linea);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.stepper__btn {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--verde-oscuro);
    cursor: pointer;
    transition: background var(--transition);
}

.stepper__btn:hover { background: var(--crema); }
.stepper__btn:disabled { color: var(--tinta-suave); cursor: not-allowed; }

.stepper__input {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-left: 1px solid var(--linea);
    border-right: 1px solid var(--linea);
    text-align: center;
    font-size: 1.05rem;
    color: var(--tinta);
    background: transparent;
    -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Velo detrás del panel abierto (drawer o cesta). Funcional, no
   decorativo: sin él no hay forma accesible de cerrar tocando fuera. */
.shop-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 35, 31, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 55;
}

.shop-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.no-scroll { overflow: hidden; }

/* El panel de configuración. Sin JavaScript vive en el flujo normal de la
   página (ver .product-config arriba); con JavaScript se convierte en una
   capa fija que se desliza sobre el catálogo — claramente una capa, no
   otra página: el catálogo queda visible y oscurecido detrás. */
.is-enhanced .product-config {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    padding: 4.5rem 1.5rem 2rem;
    background: var(--fondo);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 60;
}

.is-enhanced .product-config.is-open { display: block; transform: translateX(0); }
.is-enhanced .product-config__close { display: grid; }

.product-config__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tinta);
    cursor: pointer;
}

/* La cesta: acceso siempre visible en cuanto hay algo dentro, nunca una
   tercera columna permanente del catálogo. */
.cart-bar { position: fixed; z-index: 50; }

.cart-bar__open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    background: var(--verde-oscuro);
    color: var(--tinta-inversa);
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.cart-bar__continue { display: none; }

.cart-panel {
    position: fixed;
    inset: 0;
    z-index: 61;
    background: var(--fondo);
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2rem;
    display: block;
}

.cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.cart-panel__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--verde-oscuro);
}

.cart-panel__close {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--tinta);
    cursor: pointer;
}

.cart-panel__continue { width: 100%; justify-content: center; margin-top: 1.5rem; }

/* Estado vacío: pegado al título, sin centrar verticalmente ni dejar aire
   muerto — sólo el mensaje, nada más hasta que haya una línea real. */
.order-cart__empty { margin-top: 0.6rem; font-size: 0.88rem; color: var(--tinta-suave); }

.order-cart__list { margin-top: 1.5rem; display: grid; gap: 1rem; }

.order-cart__item {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linea-suave);
    font-size: 0.88rem;
    line-height: 1.55;
    transition: opacity var(--transition);
}

.order-cart__item.is-removing { opacity: 0; }

.order-cart__item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.order-cart__item-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--tinta); }
.order-cart__item-detail { color: var(--tinta-suave); white-space: pre-line; }

.order-cart__item-actions { display: flex; gap: 1.25rem; margin-top: 0.6rem; }

.order-cart__note { margin-top: 1.25rem; font-size: 0.78rem; color: var(--marron); }

/* Recuento junto al título: "Tu pedido · 2" sólo cuando hay algo dentro. */
[data-panel-count-wrap] { color: var(--marron); font-weight: 400; }

/* Tablet (§5 del brief): grid de 2, panel de configuración amplio pero no
   a pantalla completa, barra de cesta arriba. */
@media (min-width: 48em) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }

    .is-enhanced .product-config {
        left: auto;
        width: 88vw;
        max-width: 40rem;
        border-left: 1px solid var(--linea);
    }

    .cart-bar { top: 6.5rem; right: var(--gutter); }
    .cart-panel { left: auto; width: min(28rem, 90vw); border-left: 1px solid var(--linea); }
}

/* Desktop (§1 del brief): grid de 3, drawer lateral de 480–520px, cesta
   siempre como capa aparte — nunca una tercera columna fija del catálogo. */
@media (min-width: 75em) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); }

    .is-enhanced .product-config {
        width: clamp(480px, 34vw, 520px);
        max-width: none;
        padding: 4.5rem 2.5rem 2.5rem;
    }

    /* La cesta no necesita el ancho del configurador: sólo lee líneas ya
       decididas, no compara opciones. Angosta a propósito frente al
       drawer del configurador — no tienen por qué medir lo mismo. */
    .cart-panel { width: clamp(420px, 30vw, 460px); padding: 2rem 2.25rem 2.5rem; }
}

/* Móvil (§6 del brief): barra inferior fija, con hueco de área segura. */
@media (max-width: 47.99em) {
    .cart-bar {
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
        background: var(--fondo);
        border-top: 1px solid var(--linea);
    }
    .cart-bar__open { flex: 1; justify-content: center; background: transparent; color: var(--verde-oscuro); border: 1px solid var(--linea); }
    .cart-bar__continue {
        display: inline-flex;
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1.1rem;
        background: var(--verde-oscuro);
        color: var(--tinta-inversa);
        border: 0;
        border-radius: var(--radius-pill);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }
}

.dates, .slots { border: 0; margin: 2rem 0 0; padding: 0; }

.dates__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dates__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radius-btn);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.dates__item:hover { border-color: var(--verde); }
.dates__item input { accent-color: var(--verde-oscuro); }
.dates__item:has(input:checked) { border-color: var(--verde-oscuro); background: var(--crema); }

.slots__list { display: grid; gap: 0.6rem; margin-top: 0.4rem; }

.slot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.slot:hover { border-color: var(--verde); }
.slot:has(input:checked) { border-color: var(--verde-oscuro); background: var(--crema); }
.slot input { accent-color: var(--verde-oscuro); }

.slot__time {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--verde-oscuro);
}

.slot__state {
    margin-left: auto;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.slot--full {
    cursor: not-allowed;
    opacity: 0.5;
    background: repeating-linear-gradient(135deg, transparent, transparent 7px,
        rgba(37, 37, 34, 0.035) 7px, rgba(37, 37, 34, 0.035) 14px);
}

.slot--full:hover { border-color: var(--linea); }
.slot--full .slot__state { color: var(--marron); }

.fields { display: grid; gap: 1.25rem; margin-top: 2rem; }

.field { display: grid; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field--inline { grid-template-columns: auto minmax(0, 8rem); align-items: center; gap: 0.75rem; }

.field__label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--marron);
}

.field__opt { letter-spacing: 0.04em; text-transform: none; color: var(--tinta-suave); }
.field__help { font-size: 0.78rem; color: var(--tinta-suave); }

/* El dato se escribe sobre un renglón, no dentro de una caja. */
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.85rem 0.1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--tinta);
    transition: border-color var(--transition);
}

.field textarea {
    border: 1px solid var(--linea);
    padding: 0.8rem 0.9rem;
}

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--marron); }

.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--verde-oscuro);
    outline: none;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 4px;
}
.field textarea { resize: vertical; }

.summary { margin-top: 2rem; }
.summary__block + .summary__block { margin-top: 2rem; }

.summary__title {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marron);
    margin-bottom: 0.6rem;
}

.summary__list li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.6rem;
    border-top: 1px solid var(--linea-suave);
    font-size: 0.95rem;
}

.summary__list li:last-child { border-bottom: 1px solid var(--linea-suave); }
.summary__list span:last-child { color: var(--tinta-suave); text-align: right; }

.order-foot {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea);
}

/* La promesa de que no se cobra nada ahora es lo más importante de esta
   pantalla: se lee, no se susurra. */
.order-foot__note {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--verde-oscuro);
    max-width: 40ch;
}

.step-error { margin-top: 1rem; font-size: 0.88rem; color: var(--marron); }
.order-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.confirmation__title { margin-top: 1rem; max-width: 14ch; }

/* Resguardo: papel un tono por debajo, ceñido por la pleita. Es el único
   documento que el cliente se lleva, así que se le da entidad. */
.ticket {
    position: relative;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    background: var(--fondo-alt);
    border-radius: 0;
}

.ticket__stamp {
    position: absolute;
    top: clamp(1.25rem, 1rem + 1vw, 2rem);
    right: clamp(1.25rem, 1rem + 1vw, 2rem);
    width: clamp(4.25rem, 3.5rem + 2.5vw, 6rem);
    height: auto;
}

@media (max-width: 30em) {
    .ticket__stamp { position: static; margin-bottom: 1.25rem; }
}

.ticket__number { display: grid; gap: 0.4rem; }

.ticket__label {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
}

.ticket__number strong {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--verde-oscuro);
}

.ticket__data { margin-top: 1.75rem; }

.ticket__subtitle {
    margin-top: 2rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
}

.ticket__items { margin-top: 0.75rem; }

.ticket__items li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--linea-suave);
}

.ticket__item-name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--verde-oscuro); }
.ticket__item-qty { font-size: 0.9rem; color: var(--tinta-suave); }
.ticket__notes { margin-top: 0.75rem; color: var(--tinta-suave); }
.ticket__note { margin-top: 1.75rem; }

.confirmation__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

@media (min-width: 48em) {
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .slots__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.process__media { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* El resguardo va ceñido por la pleita, como la pieza que representa. */
.ticket__seam {
    width: 100%;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.ticket__seam + .ticket { margin-top: 0; }

/* La quesería: el obrador a sangre completa, como el territorio en la
   portada, pero sin repetir su composición. */
.dairy__plate {
    margin: clamp(3rem, 2rem + 4vw, 5.5rem) 0 0;
}

/* Índice sin numerar: para series que no son una secuencia (la numeración
   sólo se usa cuando el orden dice algo). */
.index--plain .index__row { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 62em) {
    .index--plain .index__row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .index--plain .index__text { grid-column: 2; }
}

/* Catálogo por curación --------------------------------------------------
   Cada curación es su propio movimiento editorial; el acabado es un
   subtítulo discreto, no una segunda cuadrícula. */
.curing-group + .curing-group { border-top: 1px solid var(--linea-suave); }

.curing-group__head { margin-bottom: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }

.curing-group__title {
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--verde-oscuro);
}

.curing-group__finish {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    margin-bottom: 1.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marron);
}

.curing-group__finish:first-of-type { margin-top: 0; }

/* Selector de formato en la ficha ------------------------------------------
   Se presenta como una elección clara, no como un botón: dos líneas, un
   filete que se resalta al pasar el cursor, sin píldoras. */
.format-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 0.75rem;
}

.format-pick {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.15rem;
    font-size: 0.95rem;
    color: var(--verde-oscuro);
    border-bottom: 1px solid var(--linea);
    transition: border-color var(--transition);
}

.format-pick:hover { border-color: var(--verde-oscuro); }

.sheet__formats { border: 0; margin: 1.75rem 0 0; padding: 0; }

/* Premios y reconocimientos -------------------------------------------------
   Cronología editorial: prestigio silencioso. Sin trofeos, sin estrellas,
   sin fondos dorados, sin cards. Un filete, un año, un título. */
.awards {
    border-top: 1px solid var(--linea-suave);
}

.awards__item {
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) 1fr;
    gap: 1.25rem 1.75rem;
    align-items: baseline;
    padding-block: 1.6rem;
    border-bottom: 1px solid var(--linea-suave);
}

.awards__year {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--verde-oscuro);
}

.awards__contest {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--marron);
}

.awards__title {
    margin-top: 0.35rem;
    font-size: clamp(1rem, 0.93rem + 0.3vw, 1.15rem);
    font-weight: 500;
    color: var(--tinta);
}

.awards__detail {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--tinta-suave);
}

.awards__ref {
    margin-top: 0.6rem;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* Home: versión condensada, sin detalle ni referencia. */
.awards--condensed .awards__item { padding-block: 1.1rem; }
.awards--condensed .awards__title { margin-top: 0.25rem; }

.awards-home__head { max-width: 44rem; margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }

.awards-home__foot {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea-suave);
}

@media (min-width: 48em) {
    .awards__item { grid-template-columns: 7rem 1fr; }
}

/* En escritorio, los seis hitos se leen en dos columnas de prensa: una
   composición más propia de una sala de trofeos que de una lista larga.
   El filete inferior de cada hito ya resuelve las divisiones dentro de
   cada columna; no hace falta ningún filete adicional. */
@media (min-width: 62em) {
    .awards--condensed {
        column-count: 2;
        column-gap: clamp(2.5rem, 2rem + 2vw, 4rem);
    }
    .awards--condensed .awards__item { break-inside: avoid; }
}