/*
Theme Name: Lunara
Theme URI: https://somoslunara.cl
Author: Herreros Ingeniería SpA
Author URI: https://herrerosingenieria.cl
Description: Tema a medida para Lunara Activewear. Dirección de arte "La Luna Aparece": la home transita del día a la noche con el scroll. Sin page builders, sin frameworks CSS, sin tema padre.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lunara
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* =========================================================================
   SISTEMA DE DISEÑO — aprobado, no se modifica sin autorización de Gonzalo.
   Los valores vienen de lunara-maqueta-v2.html (fuente de verdad visual).
   ========================================================================= */
:root{
  --amanecer:#F1EAE1;
  --arena:#C9B49C;
  --noche:#3B1F24;
  --lunamarfil:#EFE6D8;
  --cobre:#9C6B4F;
  /* Derivado de Cobre Tenue: solo texto pequeño funcional sobre Amanecer. 4.99:1 = AA.
     El Cobre Tenue original (--cobre) se mantiene para display y acentos grandes. */
  --cobre-texto:#855840;
  --display:'Fraunces',serif;
  --cuerpo:'Hanken Grotesk',sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* Gutters con resguardo de notch: nunca menos que el inset del dispositivo */
  --gutter:clamp(1.2rem,4vw,3.2rem);
  --gutter-l:max(clamp(1.2rem,4vw,3.2rem),env(safe-area-inset-left));
  --gutter-r:max(clamp(1.2rem,4vw,3.2rem),env(safe-area-inset-right));
}

/* ===== base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:6rem}
body{background:var(--amanecer);color:var(--noche);font-family:var(--cuerpo);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{scroll-margin-top:6rem;text-wrap:balance}
/* Todo lo enfocable, no solo a/button/input: <select> del orden y <summary> del
   buscador también reciben foco y también se tocan con el dedo. */
a,button,input,select,textarea,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(59,31,36,.12)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
.noche :is(a,button,input,select,textarea,summary):focus-visible,footer a:focus-visible{outline-color:var(--arena)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:.75rem;top:-6rem;z-index:100;background:var(--noche);color:var(--lunamarfil);padding:.9rem 1.4rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.skip:focus,.skip:focus-visible{top:calc(.75rem + env(safe-area-inset-top))}

/* ===== placeholder de foto =====
   Ocupa la proporción real de la imagen definitiva para que no haya CLS
   cuando la clienta cargue la sesión fotográfica. La nota de dirección
   solo se muestra a quien puede editar el sitio (ver lunara_placeholder_foto). */
.ph{position:relative;display:block;width:100%;height:100%;background:
  repeating-linear-gradient(135deg,rgba(156,107,79,.07) 0 12px,transparent 12px 24px),
  linear-gradient(180deg,var(--amanecer),var(--arena))}
.ph-nota{position:absolute;inset:auto .6rem .6rem;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(241,234,225,.92);background:rgba(59,31,36,.62);padding:.32rem .55rem;line-height:1.5}

/* ===== header ===== */
.anuncio{text-align:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));padding-top:calc(.55rem + env(safe-area-inset-top));color:var(--cobre-texto);border-bottom:1px solid rgba(59,31,36,.14)}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem var(--gutter-r) 1.15rem var(--gutter-l);position:sticky;top:0;background:rgba(241,234,225,.96);z-index:50;border-bottom:1px solid rgba(59,31,36,.12)}
/* El logotipo de Erika en SVG inline: toma currentColor y sigue a la cabecera de noche (C-18). */
.logo{flex-shrink:0}
.logo a{display:flex;align-items:center;min-height:44px}
.logo .logo-svg{display:block;height:1.9rem;width:auto}
.logo img{max-height:2.4rem;width:auto}
.nav-principal ul{display:flex;gap:clamp(1rem,2.4vw,2.2rem);list-style:none;font-size:.77rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.util{display:flex;align-items:center;gap:1.5rem;font-size:.77rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500}
.util-btn{background:none;border:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:transform .14s var(--ease-out)}
.util-btn:active{transform:scale(.97)}
/* área táctil >=44px sin alterar el ritmo visual del header */
.nav-principal a,.util-btn{position:relative;display:inline-block;padding:.2rem .1rem}
.nav-principal a::before,.util-btn::before{content:"";position:absolute;inset:-12px -8px}
.nav-principal a::after,.util-btn::after{content:"";position:absolute;left:.1rem;right:.1rem;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .22s var(--ease-out)}
.nav-principal a:focus-visible::after,.util-btn:focus-visible::after{transform:scaleX(1);transform-origin:left center}
/* Buscador: disclosure nativo, sin JS. El drawer animado llega en la fase de
   motion como mejora progresiva. Estética mínima sobre los tokens del sistema
   hasta que Gonzalo defina el diseño del buscador. */
.util-buscar{position:relative}
.util-buscar summary{list-style:none;cursor:pointer}
.util-buscar summary::-webkit-details-marker{display:none}
.util-panel{position:absolute;right:0;top:calc(100% + 1.15rem);z-index:60;background:var(--amanecer);border:1px solid rgba(59,31,36,.14);padding:1rem;min-width:min(20rem,80vw)}
.util-panel label{display:block}
.util-panel input[type="search"]{width:100%;min-height:44px;background:none;border:none;border-bottom:1px solid rgba(59,31,36,.35);font-family:var(--cuerpo);font-size:.95rem;color:var(--noche);padding:.4rem 0}
.util-panel button{margin-top:.8rem;background:var(--noche);color:var(--lunamarfil);border:none;font-family:var(--cuerpo);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.7rem 1.4rem;min-height:44px;cursor:pointer;transition:transform .14s var(--ease-out)}
.util-panel button:active{transform:scale(.97)}

/* ===== HERO — acto día ===== */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:
  radial-gradient(ellipse 90% 60% at 50% 0%, #FBF6EC, transparent 60%),
  linear-gradient(180deg,#F1EAE1 0%, #E3D3BD 45%, #C9B49C 100%)}
.hero .sol{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:clamp(200px,30vw,380px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FBF3E2 30%, #EDD9B8 60%, transparent 72%)}
.hero-contenido{position:relative;z-index:2;width:100%;padding:0 var(--gutter-r) clamp(2.5rem,6vh,4.5rem) var(--gutter-l);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.hero-contenido>*{min-width:0}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.8rem,6vw,5.6rem);line-height:1.06;letter-spacing:-.01em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--cobre)}
.hero-lado{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;max-width:30ch}
.hero-lado p{font-size:.96rem;color:var(--noche)}
.cta{position:relative;overflow:hidden;isolation:isolate;display:inline-block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;background:var(--noche);color:var(--lunamarfil);border:none;padding:1.05rem 2.5rem;min-height:44px;cursor:pointer;transition:transform .14s var(--ease-out)}
.cta::before{content:"";position:absolute;inset:0;background:var(--cobre);opacity:0;transition:opacity .2s ease;z-index:-1}
.cta:active{transform:scale(.97)}
/* La foto viene recortada, con fondo transparente (C-19): la modelo se sienta sobre el
   borde del hero, delante del sol, sin recuadro. Entera, sin recorte del encuadre. */
.hero-figura{position:absolute;right:29%;bottom:0;width:clamp(230px,27vw,420px);height:82%}
.hero-figura img,.hero-figura .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center}

/* ===== shop día ===== */
.dia{background:var(--amanecer)}
.shop{padding:clamp(3rem,6vw,5rem) var(--gutter-r) clamp(3rem,6vw,5rem) var(--gutter-l)}
.shop-cab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:2.2rem}
.shop-cab h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.5rem);min-width:0}
.shop-cab a{position:relative;display:inline-block;flex-shrink:0;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--noche);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.shop-cab a::before{content:"";position:absolute;inset:-14px -10px}
.shop-cab a:active{opacity:.7}
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;list-style:none}
.cat{position:relative;aspect-ratio:3/4.4;display:flex;align-items:flex-end;padding:1rem;overflow:hidden}
.cat img,.cat .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat h3{position:relative;color:var(--lunamarfil);font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;z-index:2;transition:transform .26s var(--ease-out)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%, rgba(59,31,36,.45))}
.cat::before{content:"";position:absolute;inset:0;background:rgba(59,31,36,.22);opacity:0;transition:opacity .26s ease;z-index:1}
.cat:focus-visible::before,.cat:active::before{opacity:1}

/* ===== productos ===== */
.prods{padding:0 var(--gutter-r) clamp(3rem,6vw,5rem) var(--gutter-l)}
.prods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none}
.prod{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.prod-link{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.prod-media{display:block;position:relative;aspect-ratio:2/3;overflow:hidden}
.prod-foto,.prod-media .ph{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .28s var(--ease-out)}
/* El nivel del título cambia según la plantilla (ver template-parts/producto-card.php);
   el estilo cuelga de la clase, no de la etiqueta. */
.prod-titulo{font-family:var(--display);font-weight:500;font-size:1.08rem;min-width:0;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .fila{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.9rem;min-width:0}
.prod .fila>*{min-width:0}
.prod .precio{font-weight:600;font-variant-numeric:tabular-nums}
/* wc_price() envuelve el monto en su propio markup; se hereda el estilo del contenedor */
.prod .precio .woocommerce-Price-amount{font-weight:inherit;font-variant-numeric:inherit}
.prod .precio del{opacity:.55;margin-right:.4rem;font-weight:400}
.prod .precio ins{text-decoration:none;color:var(--cobre-texto)}
.prod .colores{display:flex;gap:.4rem;flex-shrink:0;list-style:none}
.prod .colores li{display:flex}
.dot{display:block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(59,31,36,.5)}
.prod .tallas{font-size:.74rem;letter-spacing:.14em;color:#6B4E3E}
.prod .agotado{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cobre-texto)}

/* ===== archivo de categoría =====
   Vive entero en el acto día. Mismos tokens y misma tarjeta de producto que
   la portada; nada de estilo nuevo. */
.archivo{padding:clamp(2.5rem,5vw,4rem) var(--gutter-r) clamp(3rem,6vw,5rem) var(--gutter-l)}
.archivo-cab{max-width:60ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.archivo-cab h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.01em}
.archivo-descripcion{margin-top:1rem;color:#6B4E3E;font-size:.98rem}
.archivo-descripcion p+p{margin-top:.8rem}

.subcats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem);list-style:none}
.subcats a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid rgba(59,31,36,.28);padding:.6rem 1.2rem;transition:color .2s ease,border-color .2s ease}
.subcats a[aria-current="page"]{background:var(--noche);color:var(--lunamarfil);border-color:var(--noche)}
.subcats a:active{opacity:.75}

.archivo-barra{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem 2rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem);padding-bottom:1rem;border-bottom:1px solid rgba(59,31,36,.14)}
.archivo-conteo{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cobre-texto);font-variant-numeric:tabular-nums}
.orden{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.orden label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
/* background-color y color explícitos: sin ellos el <select> nativo se pinta
   ilegible con el modo oscuro de Windows. */
.orden select{background-color:var(--amanecer);color:var(--noche);font-family:var(--cuerpo);font-size:.85rem;border:1px solid rgba(59,31,36,.28);border-radius:0;padding:.6rem .8rem;min-height:44px;cursor:pointer}
.orden button{position:relative;overflow:hidden;isolation:isolate;background:var(--noche);color:var(--lunamarfil);border:none;font-family:var(--cuerpo);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.7rem 1.4rem;min-height:44px;cursor:pointer;transition:transform .14s var(--ease-out)}
.orden button::before{content:"";position:absolute;inset:0;background:var(--cobre);opacity:0;transition:opacity .2s ease;z-index:-1}
.orden button:active{transform:scale(.97)}

.paginacion{margin-top:clamp(2.5rem,5vw,4rem)}
.paginacion ul{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;list-style:none}
.paginacion a,.paginacion span{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .7rem;font-size:.82rem;font-variant-numeric:tabular-nums;border:1px solid rgba(59,31,36,.2);transition:color .2s ease,border-color .2s ease}
.paginacion .current{background:var(--noche);color:var(--lunamarfil);border-color:var(--noche)}
.paginacion .dots{border-color:transparent}
.paginacion a:active{opacity:.75}

.vacio{max-width:52ch;display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;padding:clamp(2rem,5vw,3.5rem) 0}
.vacio p{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.4}

/* ===== páginas de contenido =====
   Carrito, pago, mi cuenta y las páginas del pie. Tipografía y ritmo del
   sistema; el diseño propio de carrito y pago entra en su fase. */
.pagina{padding:clamp(2.5rem,5vw,4rem) var(--gutter-r) clamp(3rem,6vw,5rem) var(--gutter-l)}
.pagina-cab{max-width:60ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.pagina-cab h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.pagina-cuerpo{max-width:72ch}
.pagina-cuerpo>*+*{margin-top:1.1rem}
.pagina-cuerpo h2{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.4rem;text-wrap:balance}
.pagina-cuerpo h3{font-family:var(--display);font-weight:500;font-size:1.15rem;margin-top:1.8rem}
.pagina-cuerpo a{color:var(--cobre-texto);border-bottom:1px solid currentColor}
.pagina-cuerpo ul,.pagina-cuerpo ol{padding-left:1.3rem}
.pagina-cuerpo li+li{margin-top:.4rem}
/* Páginas legales (C-17). La fecha de vigencia es un dato, no un titular. Las
   tablas son filas sobre filete, como el carrito: sin caja ni cebra. Se escriben
   con dos clases para ganarle a la tabla de la librería de bloques (borde en cada
   celda, columnas fijas); con columnas automáticas el texto largo parte y en
   375 px las dos columnas caben. */
/* Enlaces del texto corrido: hijos de un párrafo, lista o tabla que es hijo
   directo del cuerpo. El carrito y el pago viven dentro de su .woocommerce y
   sus enlaces (barra del pago, categorías del carrito vacío) tienen su propio
   hover; sin el > les ganaba a todos. */
.pagina-cuerpo>:is(p,ul,ol,figure) a:not([class]){transition:color .2s ease}
.pagina-cuerpo .pagina-fecha{font-size:.82rem;letter-spacing:.04em;color:#6B4E3E}
.pagina-cuerpo .wp-block-table{margin:1.6rem 0 0;overflow-x:auto}
.pagina-cuerpo .wp-block-table table{width:100%;table-layout:auto;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.pagina-cuerpo .wp-block-table thead{border-bottom:0}
.pagina-cuerpo .wp-block-table :is(th,td){padding:.75rem 1.2rem .75rem 0;text-align:left;vertical-align:top;border:0;border-bottom:1px solid rgba(59,31,36,.16)}
.pagina-cuerpo .wp-block-table :is(th,td):last-child{padding-right:0}
.pagina-cuerpo .wp-block-table th{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom-color:rgba(59,31,36,.4)}
/* El carrito y el pago son bloques de WooCommerce: se les deja el ancho completo. */
.woocommerce-cart .pagina-cuerpo,.woocommerce-checkout .pagina-cuerpo,.woocommerce-account .pagina-cuerpo{max-width:none}

/* ===== ficha de producto =====
   Vive entera en el acto día. Un solo gesto de marca: la luna del selector de
   color. Todo lo demás, sobrio y al servicio de comprar. */
.ficha{padding:clamp(1.5rem,3vw,2.5rem) var(--gutter-r) clamp(3rem,6vw,5rem) var(--gutter-l)}

.miga{margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.miga ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.miga li+li::before{content:"/";margin-right:.5rem;color:var(--arena)}
.miga a{position:relative;color:var(--cobre-texto);transition:color .2s ease}
.miga a::before{content:"";position:absolute;inset:-15px -6px}
.miga [aria-current="page"]{color:#6B4E3E}

.ficha-columnas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}

/* Galería: de a una foto, hacia el lado, en 2:3 como la sesión (C-19). Pista con
   scroll-snap en todos los anchos: sin JavaScript se recorre igual con el dedo,
   la rueda o los indicadores; ficha.js agrega las flechas. */
.galeria,.ficha-info{min-width:0}
.galeria{position:relative}
.galeria-pista{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:.5rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.galeria-pista::-webkit-scrollbar{display:none}
.galeria-pista li{position:relative;scroll-snap-align:center;scroll-margin-top:6rem}
.galeria-pista img,.galeria-pista .ph{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.galeria-pista:focus{outline:none}
/* Foto con el color recreado (C-19): la aclaración va sobre la foto, discreta y legible. */
.foto-recreada{position:absolute;left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);padding:.35rem .6rem;font-size:.7rem;line-height:1.35;color:var(--noche);background:rgba(239,230,216,.88)}
.galeria-indices{display:flex;justify-content:center;gap:.5rem;list-style:none;margin-top:.9rem}
.galeria-indices a{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.galeria-indices a::after{content:"";width:22px;height:1px;background:var(--noche);opacity:.28;transition:opacity .2s ease}
.galeria-indices a:focus-visible{outline:2px solid var(--cobre);outline-offset:-4px}
.galeria-indices a:focus-visible::after{opacity:.75}
.galeria-indices [aria-current="true"]::after{opacity:1;background:var(--cobre-texto)}
/* Flechas sobre la foto, a media altura. Cuadradas y con filete como el resto
   de los controles; deshabilitadas en los extremos en vez de dar la vuelta. */
.galeria-flechas{position:absolute;left:0;right:0;top:0;aspect-ratio:2/3;display:flex;align-items:center;justify-content:space-between;padding:0 .8rem;pointer-events:none}
.galeria-flechas[hidden]{display:none}
.galeria-flecha{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(59,31,36,.18);background:rgba(241,234,225,.88);color:var(--noche);cursor:pointer;transition:opacity .2s ease,border-color .2s ease}
.galeria-flecha:focus-visible{outline:2px solid var(--cobre);outline-offset:2px}
.galeria-flecha[disabled]{opacity:0;pointer-events:none}
/* Notas de la tienda (Portada): colores que varían, días de despacho */
.nota-tienda{margin-top:.8rem;font-size:.82rem;line-height:1.5;color:#6B4E3E}
.nota-tienda--despacho{margin-top:1rem}
.nota-tienda--pago{margin:0 0 1.2rem}

/* Columna de compra: sticky para que el bloque no salga de vista */
/* max-height + overflow: con los tres acordeones abiertos la columna puede
   superar el alto del viewport y el final quedaría inalcanzable mientras se
   scrollean las fotos. La barra solo aparece si el contenido la necesita. */
.ficha-info-sticky{position:sticky;top:calc(6rem + env(safe-area-inset-top));max-height:calc(100svh - 7.5rem);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
.ficha-titulo{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.01em}
.ficha-precio{margin-top:.7rem;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.ficha-precio del{opacity:.55;margin-right:.5rem;font-weight:400}
.ficha-precio ins{text-decoration:none;color:var(--cobre-texto)}
/* "IVA incluido" acompaña al precio, no compite con él: el <small> del navegador
   lo dejaba en 15.3px contra los 18.4px del precio. Versalita como el resto de
   las etiquetas del sistema, y --cobre-texto porque va bajo 18px sobre fondo
   claro (ADR-002). */
.ficha-precio .woocommerce-price-suffix{font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cobre-texto);margin-left:.4rem;white-space:nowrap}

.compra{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.grupo{border:none;margin-bottom:1.6rem}
/* El nombre del color elegido va pegado a su label ("Color — Vino"); el enlace
   a la guía se empuja al extremo opuesto. */
.grupo-cab{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.8rem}
.grupo-guia{margin-left:auto}
.grupo-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.grupo-valor{font-size:.82rem;color:#6B4E3E}
.grupo-guia{position:relative;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto);border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s ease}
.grupo-guia::before{content:"";position:absolute;inset:-14px -8px}
.grupo-guia:active{opacity:.7}

/* --- EL GESTO: la luna del color elegido ---
   El disco es el color real de la variante; el seleccionado gana su anillo
   creciente en Luna Marfil con borde Cobre. Es lo único con tratamiento de
   marca en los controles: nada más lleva lunas. */
.lunas{display:flex;flex-wrap:wrap;gap:1rem}
.luna{position:relative;display:flex}
.luna input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.luna label{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}
.luna-disco{display:block;width:26px;height:26px;border-radius:50%;border:1px solid rgba(59,31,36,.35)}
/* El anillo: escala desde el disco, listo para que la fase motion lo anime */
.luna label::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid var(--cobre);box-shadow:0 0 0 3px var(--lunamarfil);opacity:0;transform:scale(.72);transition:opacity .22s ease,transform .22s var(--ease-out)}
.luna input:checked+label::after{opacity:1;transform:scale(1)}
.luna input:focus-visible+label{outline:2px solid var(--cobre);outline-offset:3px}
.luna--agotada .luna-disco{opacity:.4}
.luna--agotada label{cursor:not-allowed}
/* Diagonal fina sobre el color agotado */
.luna--agotada label::before{content:"";position:absolute;top:50%;left:50%;width:32px;height:1px;margin:-1px 0 0 -16px;background:var(--noche);opacity:.55;transform:rotate(-45deg)}

/* Tallas: pills sobrias, sin tratamiento de marca */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{position:relative;display:flex}
.pill input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill label{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:0 .9rem;font-size:.8rem;letter-spacing:.1em;font-weight:600;border:1px solid rgba(59,31,36,.28);cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.pill input:checked+label{background:var(--noche);color:var(--lunamarfil);border-color:var(--noche)}
.pill input:focus-visible+label{outline:2px solid var(--cobre);outline-offset:3px}
.pill--agotada label{opacity:.42;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}

.escasez{margin-bottom:1.2rem;font-size:.78rem;letter-spacing:.1em;color:var(--cobre-texto);font-variant-numeric:tabular-nums;min-height:1.2em}
.compra-boton{display:block;width:100%;text-align:center}
/* Deshabilitado: el fondo sigue en Burdeo Noche y la diferencia la marca el
   marfil .68 del sistema, que sobre burdeo da 6.36:1. Bajar el fondo en vez del
   texto dejaba el botón en 1.2:1, ilegible. */
.cta[disabled]{cursor:default;color:rgba(239,230,216,.68)}
/* Ocupado no es lo mismo que no disponible: "Agregando…" conserva el marfil pleno (C-15) */
.cta[aria-busy="true"]{color:var(--lunamarfil)}
.cta[disabled]::before{opacity:0}
.compra-agotado{padding:1.05rem 0;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto);border-top:1px solid rgba(59,31,36,.18);border-bottom:1px solid rgba(59,31,36,.18);text-align:center}

/* Doble clase a propósito: .confianza se define más abajo (acto noche) con la
   misma especificidad, y su marfil ganaba por orden dejando este texto en
   1.04:1 sobre el fondo claro. */
.confianza.confianza--ficha{justify-content:flex-start;gap:.4rem 1.4rem;padding:1.4rem 0;margin-top:1.6rem;color:#6B4E3E;border-top:1px solid rgba(59,31,36,.14);border-bottom:none}

.ficha-mensaje{margin-top:.4rem;font-family:var(--display);font-size:1.05rem;line-height:1.5;color:var(--noche)}
.ficha-mensaje em{font-style:italic}

.acordeones{margin-top:1.6rem}
.acordeon{border-top:1px solid rgba(59,31,36,.14)}
.acordeon:last-child{border-bottom:1px solid rgba(59,31,36,.14)}
.acordeon summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.6rem 0;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;list-style:none}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease-out)}
.acordeon[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acordeon-cuerpo{padding-bottom:1.4rem;font-size:.92rem;color:#6B4E3E}
.acordeon-cuerpo p+p{margin-top:.8rem}
.acordeon:target summary{color:var(--cobre-texto)}

/* Completa tu look. La misma franja sirve para "Quizás te guste" del carrito:
   son la misma pieza en dos páginas, así que comparten regla y no divergen. */
.completa,.carro-sugeridos{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(59,31,36,.14)}
.completa h2,.carro-sugeridos h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:1.8rem}
.prods-grid--tres{grid-template-columns:repeat(3,1fr)}

/* Barra fija de compra en móvil. Nace con hidden: sin JavaScript no aparece. */
.barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:1rem;padding:.8rem var(--gutter-r) calc(.8rem + env(safe-area-inset-bottom)) var(--gutter-l);background:rgba(241,234,225,.97);border-top:1px solid rgba(59,31,36,.14);transform:translateY(0);transition:transform .24s var(--ease-out),visibility 0s}
.barra-precio{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.barra-boton{display:block;flex:1;text-align:center;padding:.9rem 1.2rem}
/* Escondida sale también del orden de tabulación y del árbol de accesibilidad: la
   visibility espera a que termine de bajar y vuelve al instante al subir (C-15). */
.barra-compra--oculta{transform:translateY(100%);visibility:hidden;transition:transform .24s var(--ease-out),visibility 0s .24s}
/* Nace con [hidden] y ficha.js la muestra. La regla va explícita porque el
   display:flex de móvil le ganaría al estilo del navegador (C-13, hallazgo 11). */
.barra-compra[hidden]{display:none}

/* ===== carrito =====
   El carrito no está en la maqueta: la v2 cubre solo la portada. Esto extiende
   el sistema con el vocabulario que ya fijaron el archivo y la ficha —filete y
   esquina viva, rótulos en versalita, cifras tabulares— en vez de inventar otro.
   Ver decisiones/ADR-007-carrito-clasico.md. */

/* Avisos de WooCommerce. El tema quita las hojas del plugin, así que sin esto
   saldrían sin estilo. Aquí aparece "prenda eliminada. ¿Deshacer?", que es la
   vuelta atrás de quitar sin querer, y los avisos de stock del servidor. */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{margin:0 0 1.6rem;padding:.9rem 1.1rem;font-size:.9rem;line-height:1.5;list-style:none;background:rgba(201,180,156,.16);border:1px solid rgba(59,31,36,.16);border-left:3px solid var(--noche)}
.woocommerce-error{background:rgba(156,107,79,.12);border-left-color:var(--cobre-texto)}
.woocommerce-error li+li{margin-top:.45rem}
:is(.woocommerce-message,.woocommerce-info,.woocommerce-error) a{color:var(--cobre-texto);border-bottom:1px solid currentColor;padding-bottom:1px}

/* .pagina-cuerpo a pinta cualquier enlace de una página en cobre y con subrayado,
   que es lo correcto en un texto corrido y lo contrario de lo que necesita un
   componente. Sin esto el botón "Ir a pagar" salía en cobre sobre burdeo —bajo el
   mínimo de contraste— y con una línea debajo del texto. Se redeclara con dos
   clases para ganarle a la regla genérica, en vez de debilitarla y arriesgar el
   resto de las páginas. */
.carro .cta,.carro-vacio .cta{color:var(--lunamarfil);border-bottom:none}
.carro-datos .carro-nombre a{color:var(--noche);border-bottom:none}
.carro-foto a{border-bottom:none}
.carro-vacio .subcats a{color:var(--noche);border:1px solid rgba(59,31,36,.28)}
.carro-total-fila dd a{color:var(--cobre-texto)}

/* Las listas de .pagina-cuerpo son listas de texto: van sangradas y separadas
   entre ítems. Las del carrito son estructura, no prosa. Sin esto las prendas
   quedaban 20,8px más adentro que el resumen y con 6,4px de aire extra entre
   filas, que descuadraba el filete que las separa. */
.pagina-cuerpo :is(.carro-lineas,.prods-grid,.subcats,.pago-pedido-lineas,.pago-medios,.pago-despacho-opciones){padding-left:0}
.pagina-cuerpo :is(.carro-lineas,.prods-grid,.subcats,.pago-pedido-lineas,.pago-medios,.pago-despacho-opciones) li+li{margin-top:0}

/* Móvil primero: una columna. Las prendas son filas sobre filete, no tarjetas
   con sombra. Desde 861px el resumen pasa a columna propia. */
.carro{display:grid;gap:clamp(2rem,4vw,3rem)}
.carro-lineas{list-style:none;padding:0;border-top:1px solid rgba(59,31,36,.14)}
.carro-linea{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"foto datos" "foto cantidad" "quitar subtotal";gap:.25rem 1.1rem;padding:1.4rem 0;border-bottom:1px solid rgba(59,31,36,.14)}

.carro-foto{grid-area:foto;align-self:start;position:relative;aspect-ratio:2/3;overflow:hidden}
.carro-foto a{display:block;height:100%}
.carro-foto img,.carro-foto .ph{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

.carro-datos{grid-area:datos;min-width:0}
.carro-nombre{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.25;overflow-wrap:break-word}
.carro-variante{display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin-top:.45rem}
.carro-variante-par{display:flex;align-items:baseline;gap:.35rem}
.carro-variante dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.carro-variante dd{font-size:.82rem;color:#6B4E3E}
.carro-unitario{margin-top:.5rem;font-size:.88rem;font-variant-numeric:tabular-nums}
.carro-unitario .woocommerce-Price-amount{font-variant-numeric:inherit}
.carro-reserva{margin-top:.4rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}

/* Aviso de stock de la línea. El aviso general de arriba no dice cuál de las
   seis prendas es; este va amarrado a su campo de cantidad (aria-describedby). */
.carro-linea--aviso{background:rgba(156,107,79,.06)}
.carro-aviso{margin-top:.55rem;padding-left:.6rem;font-size:.8rem;line-height:1.45;color:var(--cobre-texto);border-left:2px solid var(--cobre-texto)}

.carro-cantidad{grid-area:cantidad;margin-top:.7rem}
.cantidad-rotulo{display:block;margin-bottom:.35rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.carro-cantidad input.qty{width:5.5rem;min-height:44px;padding:.5rem .4rem;background-color:var(--amanecer);color:var(--noche);font-family:var(--cuerpo);font-size:.95rem;font-variant-numeric:tabular-nums;text-align:center;border:1px solid rgba(59,31,36,.28);border-radius:0}
.carro-cantidad input.qty[aria-invalid="true"]{border-color:var(--cobre-texto);box-shadow:inset 0 0 0 1px var(--cobre-texto)}

.carro-subtotal{grid-area:subtotal;align-self:center;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.carro-subtotal .woocommerce-Price-amount{font-weight:inherit;font-variant-numeric:inherit}

/* Terciaria: quitar es la acción destructiva y no compite con pagar ni con
   actualizar. Texto y no una ✕ suelta, para que se pueda leer y tocar. */
.carro-quitar{grid-area:quitar;align-self:center}
.carro-quitar .remove{display:inline-flex;align-items:center;min-height:44px;padding-bottom:1px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto);border-bottom:1px solid currentColor;transition:opacity .2s ease}
.carro-quitar .remove:active{opacity:.6}

.carro-acciones{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem}
/* Secundario: filete sin relleno. cart.js lo deshabilita hasta que cambia una
   cantidad, así que el estado apagado es "no hay nada que guardar todavía". */
.btn-filete{padding:.7rem 1.4rem;min-height:44px;background:none;color:var(--noche);font-family:var(--cuerpo);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:1px solid rgba(59,31,36,.4);border-radius:0;cursor:pointer;transition:transform .14s var(--ease-out),color .2s ease,border-color .2s ease}
.btn-filete:active{transform:scale(.97)}
.btn-filete[disabled]{cursor:default;color:#6B4E3E;border-color:rgba(59,31,36,.18)}

/* Cupón. El mismo campo en el carrito y en el pago. */
.cupon-form{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem;flex:1 1 100%}
.cupon-campo{flex:1 1 11rem;min-width:0;margin:0}
.cupon-campo .input-text{display:block;width:100%;min-height:44px;padding:.6rem .8rem;background-color:var(--amanecer);color:var(--noche);font-family:var(--cuerpo);font-size:1rem;line-height:1.4;border:1px solid rgba(59,31,36,.5);border-radius:0;appearance:none;-webkit-appearance:none}
.cupon-campo .input-text::placeholder{color:#7A6455;opacity:1}
.coupon-error-notice{flex-basis:100%;margin:.45rem 0 0;font-size:.82rem;line-height:1.4;color:var(--cobre-texto)}
.cupon-pago{margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(59,31,36,.14)}
.cupon-pregunta{margin:0;font-size:.9rem}
.cupon-pregunta a{color:var(--cobre-texto);border-bottom:1px solid currentColor;padding-bottom:1px}
.checkout_coupon{margin-top:.9rem}
/* checkout.js lo abre; sin JavaScript queda visible. */
.woocommerce-js .checkout_coupon{display:none}

/* Resumen */
.carro-resumen{align-self:start}
.carro-resumen-titulo{margin-bottom:1rem;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem)}
.carro-totales{border-top:1px solid rgba(59,31,36,.14)}
/* min-height fija la altura de cada fila: al actualizar por ajax el resumen se
   redibuja entero, y sin esto el botón de pagar se movía bajo el dedo. */
.carro-total-fila{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;min-height:3.2rem;padding:.9rem 0;border-bottom:1px solid rgba(59,31,36,.14)}
.carro-total-fila dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.carro-total-fila dd{text-align:right;font-variant-numeric:tabular-nums}
.carro-total-fila--nota dd{font-size:.82rem;color:#6B4E3E;font-variant-numeric:normal}
.carro-total-fila--total{padding-top:1.1rem;border-bottom:none}
.carro-total-fila--total dt{color:var(--noche)}
.carro-total-fila--total dd{font-family:var(--display);font-weight:500;font-size:1.45rem;line-height:1.2}
/* "Valores incluyen $X de IVA": acompaña al total, no compite con él. Misma
   regla que el sufijo de la ficha (ADR-002 para el color). */
.carro-total-fila--total .includes_tax{display:block;margin-top:.35rem;font-family:var(--cuerpo);font-size:.66rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--cobre-texto)}
.carro-total-fila--total .includes_tax .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}

.wc-proceed-to-checkout{margin-top:1.6rem}
.carro-pagar{display:block;width:100%;text-align:center}

/* Carrito vacío: una bifurcación, no una puerta única. */
.carro-vacio{max-width:48ch;padding-top:clamp(.5rem,2vw,1.5rem)}
.carro-vacio-titulo{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;text-wrap:balance}
.carro-vacio-texto{margin-top:.9rem;color:#6B4E3E}
.carro-vacio-accion{margin-top:1.9rem}
.carro-vacio-cats{margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid rgba(59,31,36,.14)}
.carro-vacio-cats .subcats{margin-bottom:0}

/* ===== pago =====
   Mismo vocabulario que el carrito: filete y esquina viva, rótulos en
   versalita, cifras tabulares. Un solo paso: datos a la izquierda, pedido y
   pago a la derecha; en móvil el pedido baja y una barra fija lleva el total.
   Los campos los imprime woocommerce_form_field() (.form-row, .input-text),
   así que se estilan por esas clases. Ver decisiones/ADR-008-checkout.md. */
.pago{display:grid;gap:clamp(2.2rem,4vw,3rem)}
.pago-datos{min-width:0}
/* checkout.js antepone al formulario el resumen de errores: es un hijo más
   de la grilla y sin esto se comía la primera columna. */
.pago>.woocommerce-NoticeGroup,.pago>.woocommerce-notices-wrapper{grid-column:1/-1}
.pago-seccion+.pago-seccion{margin-top:2.4rem}
/* .pagina-cuerpo h2 pone margen arriba a todo h2 de una página de texto;
   aquí el ritmo lo dan las secciones. */
.pago .pago-titulo,.pedido-recibido .pago-titulo{margin:0 0 .4rem;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2}
.pago .pago-titulo--menor{font-size:1.1rem;margin-bottom:.9rem}
.pedido-recibido .pago-titulo--mayor{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;text-wrap:balance}
.pago-nota{margin-bottom:1.4rem;font-size:.9rem;line-height:1.5;color:#6B4E3E}

/* Campos. Dos columnas solo para nombre y apellidos (.form-row-first/-last);
   el resto va a lo ancho, que en un teléfono es lo único que cabe. */
.pago-campos{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem}
.pago .form-row{margin:0;grid-column:1/-1}
.pago .form-row-first,.pago .form-row-last{grid-column:span 1}
.pago .form-row>label{display:block;margin-bottom:.4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
/* Se marca lo opcional, no lo obligatorio: casi todo lo es. */
.pago .form-row .required{display:none}
.pago .form-row .optional{text-transform:none;letter-spacing:.02em;font-weight:500;opacity:.85}
.pago .woocommerce-input-wrapper{display:block}
.pago .input-text,.pago select,.pago textarea{display:block;width:100%;min-height:48px;padding:.7rem .9rem;background-color:var(--amanecer);color:var(--noche);font-family:var(--cuerpo);font-size:1rem;line-height:1.4;border:1px solid rgba(59,31,36,.5);border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color .2s ease}
.pago .input-text::placeholder,.pago textarea::placeholder{color:#7A6455;opacity:1}
.pago .input-text:focus,.pago select:focus,.pago textarea:focus{border-color:var(--noche)}
.pago select{padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B1F24' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 8px}
.pago textarea{min-height:6rem;resize:vertical}
/* Un solo país permitido: WooCommerce imprime el selector con una opción y
   country-select.js lo necesita en el DOM. Se saca del flujo y de la lectura
   sin tocar display: address-i18n.js le pone display:block en línea. */
.pago .form-row:has(.country_to_state--single){position:absolute;visibility:hidden;width:0;height:0;overflow:hidden}
/* Campo con error. */
.pago .woocommerce-invalid .input-text,.pago .woocommerce-invalid select,.pago .woocommerce-invalid textarea{border-color:var(--cobre-texto);box-shadow:inset 0 0 0 1px var(--cobre-texto)}
/* Mensaje junto al campo: lo crea checkout.js por ajax y pago.js cuando el
   error viene del servidor. Mismo trazo que el aviso de stock del carrito. */
.pago .checkout-inline-error-message{margin-top:.5rem;padding-left:.6rem;font-size:.82rem;line-height:1.45;color:var(--cobre-texto);border-left:2px solid var(--cobre-texto)}
.pago .checkout-inline-error-message strong{font-weight:600}

/* Casillas: otra dirección, crear cuenta, términos. */
.pago-casilla-fila{margin:0}
.pago-casilla{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;cursor:pointer;font-size:.95rem;line-height:1.45}
.pago-casilla input{flex:none;width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--noche)}
/* Sin JavaScript, la otra dirección se despliega con la casilla igual que con
   checkout.js: las dos vías coinciden. */
.pago-otra-direccion:has(#ship-to-different-address-checkbox:not(:checked)) .shipping_address{display:none}
.pago-otra-direccion .shipping_address{margin-top:1.2rem}

/* Resumen del pedido. En móvil viene después de los datos, que es el orden en
   que se completa; la barra fija de abajo mantiene el total a la vista. */
.pago-resumen{align-self:start}
.pago-pedido-lineas{list-style:none;padding:0;border-top:1px solid rgba(59,31,36,.14)}
.pago-linea{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"foto datos total";gap:.15rem 1rem;align-items:start;padding:1rem 0;border-bottom:1px solid rgba(59,31,36,.14)}
.pago-linea-foto{grid-area:foto;position:relative;aspect-ratio:2/3;overflow:hidden}
.pago-linea-foto img,.pago-linea-foto .ph{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.pago-linea-datos{grid-area:datos;min-width:0}
.pago-linea-nombre{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.25;overflow-wrap:break-word}
.pago-linea-detalle{margin-top:.25rem;font-size:.8rem;color:#6B4E3E}
.pago-linea-total{grid-area:total;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.pago-linea-total .woocommerce-Price-amount{font-weight:inherit;font-variant-numeric:inherit}
.pago-totales{border-top:none}

/* Despacho dentro de los totales (cart/cart-shipping.php). */
.carro-total-fila--despacho{align-items:flex-start}
.carro-total-fila--despacho dt{padding-top:.15rem}
.pago-despacho-unico{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:.2rem .6rem}
.pago-despacho-nombre{font-size:.82rem;color:#6B4E3E}
.pago-despacho-precio{font-variant-numeric:tabular-nums}
.pago-despacho-nota{display:block;font-size:.82rem;color:#6B4E3E;font-variant-numeric:normal}
.pago-despacho-opciones{list-style:none;padding:0;display:grid;gap:.6rem}
.pago-despacho-opcion{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
.pago-despacho-opcion input{width:18px;height:18px;margin:0;accent-color:var(--noche)}
.pago-despacho-opcion label{display:inline-flex;gap:.6rem;align-items:baseline;min-height:44px;align-items:center;cursor:pointer}

/* Medios de pago. Con uno solo, checkout.js esconde el radio y queda la fila. */
.pago-pagar{margin-top:1.8rem}
.pago-medios{list-style:none;padding:0;display:grid;gap:.6rem}
.pago-medio{display:flex;flex-wrap:wrap;align-items:center;padding:0 1rem;border:1px solid rgba(59,31,36,.45);transition:border-color .2s ease}
.pago-medio:has(input:checked){border-color:var(--noche)}
.pago-medio input.input-radio{flex:none;width:18px;height:18px;margin:0 .8rem 0 0;accent-color:var(--noche)}
.pago-medio-rotulo{display:flex;flex:1;align-items:center;gap:.8rem;min-height:56px;padding:.7rem 0;cursor:pointer}
.pago-medio-nombre{font-size:.9rem;font-weight:600;letter-spacing:.04em}
.pago-medio-rotulo img{height:26px;width:auto;margin-left:auto}
.pago-medio-detalle{flex-basis:100%;padding:0 0 1rem;font-size:.88rem;line-height:1.5;color:#6B4E3E}
.pago-medio-detalle p{margin:0}
.pago-medio-detalle p+p{margin-top:.6rem}
.pago-medio-vacio{list-style:none}
.pago-medio-vacio .woocommerce-info{margin:0}

/* Cierre: aviso legal y el único primario de la página. */
/* Con .pago para ganarle a .pago .form-row, que anula márgenes. */
.pago .pago-cierre{margin-top:1.6rem}
.pago-legal{margin-bottom:1.2rem;font-size:.82rem;line-height:1.55;color:#6B4E3E}
.pago-legal p{margin:0}
.pago-legal p+p,.pago-legal .pago-casilla-fila{margin-top:.8rem}
.pago-legal a{color:var(--cobre-texto);border-bottom:1px solid currentColor}
.pago-nojs{margin-bottom:.8rem;font-size:.85rem;line-height:1.5;color:#6B4E3E}
.pago-actualizar{margin-bottom:1.2rem}
.pago-boton{display:block;width:100%;text-align:center}
.pago-boton[disabled]{cursor:progress;color:rgba(239,230,216,.82)}
/* .pagina-cuerpo a pintaría el enlace de reintento en cobre y subrayado. */
.pedido-recibido .cta,.pago-detenido .cta{color:var(--lunamarfil);border-bottom:none}
.pago-detenido{max-width:60ch}
/* Verificar correo: un solo campo, sin las dos columnas del pago. */
.pago-verificar{display:block;max-width:34rem}
.pago-verificar .pedido-texto{margin:0 0 1.4rem}
.pago-verificar .pago-campos{margin-bottom:1.2rem}
.pago-verificar .woocommerce-error{margin:0 0 1.4rem}

/* Barra fija de móvil. Nace oculta ([hidden]) y pago.js la muestra; la regla
   [hidden] va explícita porque display:flex le ganaría al estilo del navegador. */
.pago-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.8rem;margin:0;padding:.7rem var(--gutter-r) calc(.7rem + env(safe-area-inset-bottom)) var(--gutter-l);background:rgba(241,234,225,.96);border-top:1px solid rgba(59,31,36,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pago-barra[hidden]{display:none}
.pago-barra-rotulo{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.pago-barra-total{font-family:var(--display);font-weight:500;font-size:1.2rem;font-variant-numeric:tabular-nums}
.pago-barra a{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--noche);border-bottom:1px solid currentColor}
/* Que el botón de pagar no quede debajo de la barra cuando esta todavía se ve. */
.pago-datos{scroll-margin-bottom:5rem}

/* Pedido recibido: saludo, datos en rótulos y el detalle de WooCommerce
   (order/order-details.php) estilado como filas. */
.pedido-recibido{max-width:72ch}
.pedido-texto{margin-top:.8rem;font-size:1.05rem;line-height:1.55;color:#6B4E3E}
.pedido-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.2rem 2rem;margin:2rem 0 2.6rem;padding:1.4rem 0;border-top:1px solid rgba(59,31,36,.14);border-bottom:1px solid rgba(59,31,36,.14)}
.pedido-dato dt{margin-bottom:.3rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.pedido-dato dd{font-variant-numeric:tabular-nums}
.pedido-dato--total dd{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2}
.pedido-dato--total .includes_tax{display:block;margin-top:.3rem;font-family:var(--cuerpo);font-size:.66rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--cobre-texto)}
.pedido-dato--total .includes_tax .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}
.pedido-acciones{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 2.6rem}
.pedido-recibido table{width:100%;border-collapse:collapse;font-size:.92rem}
.pedido-recibido th,.pedido-recibido td{padding:.8rem 0;text-align:left;vertical-align:top;border-bottom:1px solid rgba(59,31,36,.14)}
.pedido-recibido th:last-child,.pedido-recibido td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pedido-recibido thead th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.pedido-recibido tfoot th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto)}
.pedido-recibido tfoot tr:last-child th,.pedido-recibido tfoot tr:last-child td{border-bottom:none}
/* La fila del total no trae clase: lunara_filas_totales_pedido() envuelve su valor. */
.pedido-total{font-family:var(--display);font-weight:500;font-size:1.2rem}
.pedido-total .includes_tax{display:block;font-family:var(--cuerpo);font-size:.66rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--cobre-texto)}
.pedido-recibido .product-quantity{font-weight:400;color:#6B4E3E}
.pedido-recibido .wc-item-meta{list-style:none;padding:0;margin-top:.3rem;font-size:.82rem;color:#6B4E3E}
.pedido-recibido .wc-item-meta li+li{margin-top:.1rem}
.pedido-recibido .wc-item-meta p{display:inline}
.pedido-recibido .woocommerce-customer-details{margin-top:2.4rem}
.pedido-recibido .woocommerce-columns--addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem}
.pedido-recibido address{font-style:normal;line-height:1.6}
.pedido-recibido .woocommerce-customer-details--phone,.pedido-recibido .woocommerce-customer-details--email{display:block;margin-top:.3rem}
.pedido-recibido .woocommerce-column__title,.pedido-recibido .woocommerce-order-details__title{margin-top:0}
/* Despacho anotado desde el panel (inc/admin/pedidos.php): empresa, número y
   fecha antes de la tabla del pedido, en Mi cuenta y en pedido recibido. */
.pedido-despacho{margin:0 0 2.4rem;padding:1.4rem 1.6rem;border:1px solid rgba(59,31,36,.14);background:rgba(239,230,216,.55)}
.pedido-despacho-titulo{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.25;text-wrap:balance}
.pedido-despacho .pedido-datos{margin:1.2rem 0 0;padding:1rem 0 0;border-bottom:none}
.pedido-despacho .pedido-datos:empty{display:none}
.pedido-despacho-enlace{margin:1.1rem 0 0}
.pedido-despacho-enlace a{display:inline-flex;align-items:center;min-height:44px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--noche);border-bottom:1px solid currentColor}
.pedido-despacho-enlace a:hover,.pedido-despacho-enlace a:focus-visible{color:var(--cobre-texto)}

/* ===== en construcción =====
   Documento aparte, sin cabecera ni pie: se muestra mientras el sitio vive en su
   hosting definitivo pero todavía no hay mercadería ni fotos. Reusa los tokens
   del sistema para que sea Lunara y no una pantalla de mantenimiento genérica. */
/* El degradado no baja hasta Arena como el hero: medido sobre el sitio, el
   enlace de acceso quedaba en 3,68:1 contra el tramo oscuro, bajo el mínimo.
   Es la regla del ADR-002 otra vez — cobre sobre fondo más oscuro que Amanecer.
   Aquí se resuelve aclarando el fondo y no el token, porque esta pantalla es una
   sala de espera y no necesita el drama del hero: el resplandor de arriba basta. */
.en-obra{min-height:100vh;min-height:100svh;display:flex;background:
  radial-gradient(ellipse 90% 60% at 50% 0%, #FBF6EC, transparent 60%),
  linear-gradient(180deg,#F1EAE1 0%, #EFE6DA 55%, #EDE1D2 100%)}
.obra{margin:auto;max-width:44ch;padding:clamp(2.5rem,8vh,5rem) var(--gutter-r) calc(clamp(2.5rem,8vh,5rem) + env(safe-area-inset-bottom)) var(--gutter-l);text-align:center}
.obra-marca{margin-bottom:clamp(2rem,6vh,3.5rem)}
.obra-marca .logo-svg{display:block;height:clamp(6.5rem,18vh,9rem);width:auto;margin-inline:auto}
.obra-titulo{font-family:var(--display);font-weight:500;font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.obra-texto{margin-top:1.2rem;color:#6B4E3E;text-wrap:pretty}
.obra-acceso{margin-top:clamp(2.5rem,7vh,4rem)}
.obra-acceso a{display:inline-flex;align-items:center;min-height:44px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--cobre-texto);border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s ease}
.obra-acceso a:active{opacity:.6}

/* ===== TRANSICIÓN día → noche (firma) =====
   El degradado estático de la maqueta: es el estado en reposo. El motion
   ligado al scroll (C-14) está al final del archivo, en "Motion · la luna
   aparece", y se dibuja encima de esto sin cambiarlo. */
.ocaso{height:clamp(140px,22vh,220px);background:linear-gradient(180deg,var(--amanecer) 0%, #D9BFA6 30%, #9C6B4F 62%, #5E3A38 84%, var(--noche) 100%)}
/* Interiores: la misma firma, más corta. El ocaso completo se reserva para la
   portada, que es donde la transición es el momento de la página. */
.ocaso--breve{height:clamp(70px,9vh,110px)}

/* ===== acto noche ===== */
.noche{background:var(--noche);color:var(--lunamarfil);color-scheme:dark}
.momento{position:relative;text-align:center;padding:clamp(4rem,10vh,7rem) max(1.5rem,env(safe-area-inset-right)) clamp(3.5rem,8vh,6rem) max(1.5rem,env(safe-area-inset-left));overflow:hidden}
.luna-real{width:clamp(84px,10vw,124px);aspect-ratio:1;border-radius:50%;margin:0 auto 2.4rem;box-shadow:0 0 70px 22px rgba(239,230,216,.2);overflow:hidden}
.momento h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.4vw,4rem);line-height:1.18;max-width:18ch;margin:0 auto 1.4rem}
.momento h2 em{font-style:italic;color:var(--arena)}
.momento p{max-width:52ch;margin:0 auto 2.2rem;color:rgba(239,230,216,.75);font-size:.98rem}
.momento .enlace-momento{position:relative;overflow:hidden;isolation:isolate;display:inline-block;font-size:.77rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border:1px solid rgba(239,230,216,.55);padding:1rem 2.4rem;min-height:44px;transition:color .2s ease,transform .14s var(--ease-out)}
.momento .enlace-momento::before{content:"";position:absolute;inset:0;background:var(--lunamarfil);opacity:0;transition:opacity .2s ease;z-index:-1}
.momento .enlace-momento:active{transform:scale(.97)}

.mantras{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(239,230,216,.16)}
.mantra{padding:clamp(2.2rem,4vw,3.4rem) clamp(1.4rem,3vw,3rem);border-left:1px solid rgba(239,230,216,.16)}
.mantra:first-child{border-left:none}
.mantra h3{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--arena);margin-bottom:1rem;font-weight:600}
.mantra p{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.42;color:rgba(239,230,216,.92)}

.confianza{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;padding:1.4rem max(1.4rem,env(safe-area-inset-right)) 1.4rem max(1.4rem,env(safe-area-inset-left));font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(239,230,216,.68);border-top:1px solid rgba(239,230,216,.16);list-style:none}

.news{text-align:center;padding:clamp(3rem,6vw,5rem) max(1.5rem,env(safe-area-inset-right)) clamp(3rem,6vw,5rem) max(1.5rem,env(safe-area-inset-left));border-top:1px solid rgba(239,230,216,.16)}
.news h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.3rem);margin-bottom:.6rem}
.news>p{color:rgba(239,230,216,.68);font-size:.92rem;margin-bottom:2rem}
.news form{display:flex;align-items:center;justify-content:center;max-width:430px;margin:0 auto;border-bottom:1px solid rgba(239,230,216,.5);padding-bottom:.55rem}
.news input{flex:1;min-width:0;background:none;border:none;color:var(--lunamarfil);font-family:var(--cuerpo);font-size:.95rem;padding:.4rem 0;min-height:44px}
.news input::placeholder{color:rgba(239,230,216,.68)}
.news input[aria-invalid="true"]{box-shadow:0 2px 0 -1px var(--arena)}
.news button{position:relative;background:none;border:none;color:var(--lunamarfil);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:.4rem 0 .4rem 1rem;min-height:44px;transition:transform .14s var(--ease-out),color .2s ease}
.news button:active{transform:scale(.97)}
.news button[disabled]{cursor:default;color:rgba(239,230,216,.68)}
.news-estado{max-width:430px;margin:1rem auto 0;font-size:.85rem;color:var(--arena);min-height:1.4em}

.pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;background:var(--noche);color:rgba(239,230,216,.68);color-scheme:dark;padding:1.5rem var(--gutter-r) calc(1.5rem + env(safe-area-inset-bottom)) var(--gutter-l);font-size:.73rem;letter-spacing:.1em;border-top:1px solid rgba(239,230,216,.16)}
.footer-nav ul{display:flex;gap:2rem;flex-wrap:wrap;list-style:none}
.footer-nav a{position:relative;display:inline-block;padding:.25rem 0;transition:color .2s ease}
.footer-nav a::before{content:"";position:absolute;inset:-12px -8px}
.footer-nav a:active{color:var(--lunamarfil)}

/* Hover solo en punteros finos: en táctil el :hover queda pegado tras el tap */
@media (hover:hover) and (pointer:fine){
  .nav-principal a:hover::after,.util-btn:hover::after{transform:scaleX(1);transform-origin:left center}
  .cta:hover::before{opacity:1}
  .shop-cab a:hover{color:var(--cobre-texto);border-bottom-color:var(--cobre-texto)}
  .cat:hover::before{opacity:1}
  .cat:hover h3{transform:translateY(-4px)}
  .prod-link:hover .prod-foto{transform:scale(1.03)}
  .momento .enlace-momento:hover{color:var(--noche)}
  .momento .enlace-momento:hover::before{opacity:1}
  .news button:hover:not([disabled]){color:var(--arena)}
  .footer-nav a:hover{color:var(--lunamarfil)}
  .subcats a:hover{color:var(--cobre-texto);border-color:var(--cobre-texto)}
  .subcats a[aria-current="page"]:hover{color:var(--lunamarfil);border-color:var(--noche)}
  .orden button:hover::before{opacity:1}
  .paginacion a:hover{color:var(--cobre-texto);border-color:var(--cobre-texto)}
  .pagina-cuerpo>:is(p,ul,ol,figure) a:not([class]):hover{color:var(--noche)}
  .miga a:hover{color:var(--noche)}
  .grupo-guia:hover{opacity:.7}
  .luna:not(.luna--agotada) input:not(:checked):hover+label::after{opacity:.35;transform:scale(.92)}
  .pill:not(.pill--agotada) input:not(:checked):hover+label{border-color:var(--noche)}
  .acordeon summary:hover{color:var(--cobre-texto)}
  .galeria-indices a:hover::after{opacity:.75}
  .galeria-flecha:hover{border-color:var(--noche)}
  .cta[disabled]:hover::before{opacity:0}
  .btn-filete:hover:not([disabled]){color:var(--cobre-texto);border-color:var(--cobre-texto)}
  .cupon-pregunta a:hover{color:var(--noche)}
  .carro-quitar .remove:hover{opacity:.65}
  .carro-nombre a:hover{color:var(--cobre-texto)}
  .obra-acceso a:hover{opacity:.65}
  .pago-barra a:hover,.pago-legal a:hover{color:var(--cobre-texto)}
  .pago-medio:hover{border-color:var(--noche)}
  .pago .input-text:hover,.pago select:hover,.pago textarea:hover{border-color:rgba(59,31,36,.6)}
}

/* Movimiento reducido: se conservan opacidad y color, se elimina todo desplazamiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color,outline-color!important;transition-duration:.12s!important}
  html{scroll-behavior:auto}
  .cta:active,.momento .enlace-momento:active,.util-btn:active,.news button:active,.orden button:active,.btn-filete:active{transform:none}
  .cat:hover h3,.cat:focus-visible h3{transform:none}
  .prod-link:hover .prod-foto{transform:none}
  /* La luna aparece y desaparece por opacidad, sin crecer */
  .luna label::after{transform:scale(1)}
  .luna:not(.luna--agotada) input:not(:checked):hover+label::after{transform:scale(1)}
  /* La barra de compra aparece sin deslizarse */
  .barra-compra{transition-property:opacity}
  /* visibility entra a la lista para que el fundido de salida se vea: por interpolación
     discreta sigue visible hasta que la opacidad termina (C-15) */
  .barra-compra--oculta{transform:none;opacity:0;visibility:hidden;transition-property:opacity,visibility!important;transition-delay:0s}
  .acordeon[open] summary::after{transition:none}
  .galeria-pista{scroll-behavior:auto}
}

@media (min-width:861px){
  .cabecera{background:rgba(241,234,225,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

  /* Carrito en dos columnas: prendas a la izquierda, resumen fijo a la derecha.
     El top del sticky es el mismo scroll-padding del html, para que el resumen
     no quede debajo de la cabecera pegada. */
  .carro{grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .carro-resumen{position:sticky;top:6rem}
  .carro-linea{grid-template-columns:96px minmax(0,1fr) auto auto auto;grid-template-areas:"foto datos cantidad subtotal quitar";align-items:center;gap:.25rem 1.6rem}
  .carro-datos{align-self:center}
  .carro-cantidad{margin-top:0}
  .carro-subtotal{min-width:7rem}
  .carro-quitar{justify-self:end}

  /* Pago en dos columnas: datos a la izquierda, pedido y pago pegados a la
     derecha. La barra fija de móvil sobra. */
  .pago{grid-template-columns:minmax(0,1fr) 24rem;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .pago-resumen{position:sticky;top:6rem}
  .pago-barra{display:none}
}
@media (max-width:860px){
  .nav-principal{display:none}
  .hero{min-height:78vh;min-height:78svh}
  .hero-contenido{flex-direction:column;align-items:flex-start}
  .hero-figura{opacity:.5}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prods-grid{grid-template-columns:repeat(2,1fr)}
  .prods-grid--tres{grid-template-columns:repeat(2,1fr)}
  .mantras{grid-template-columns:1fr}
  .mantra{border-left:none;border-top:1px solid rgba(239,230,216,.16)}

  /* Ficha en móvil: galería con swipe horizontal y scroll-snap, sin librerías.
     La columna de compra baja y deja de ser sticky: en móvil ese papel lo hace
     la barra fija de abajo. */
  .ficha-columnas{grid-template-columns:1fr;gap:1.8rem}
  .ficha-info-sticky{position:static;max-height:none;overflow:visible}
  .galeria{margin-left:calc(var(--gutter-l) * -1);margin-right:calc(var(--gutter-r) * -1)}
  .galeria-pista{grid-auto-columns:86%;padding:0 var(--gutter-l)}
  /* En el teléfono se desliza con el dedo: las flechas sobran (C-19). */
  .galeria-flechas{display:none}
  .barra-compra{display:flex}
  /* Mientras haya una barra fija abajo, lo que se desplaza a la vista (anclas, foco)
     no queda debajo de ella. Sin :has() no pasa nada: queda como estaba (C-15). */
  html:has(.barra-compra:not([hidden])),html:has(.pago-barra:not([hidden])){scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}

/* ===== Motion · la luna aparece (C-14) =====
   El elemento firma: la portada anochece con el scroll. Tres escenas ligadas al
   scroll (el sol se pone, el cielo se oscurece, la luna aparece) en CSS puro,
   solo transform y opacity, dentro de @supports para que sin soporte quede la
   maqueta tal cual. La maqueta es el estado en reposo de cada escena y lo que ve
   quien pide movimiento reducido: el bloque de prefers-reduced-motion de arriba
   ya apaga toda animation. Va al final del archivo a propósito: la cabecera
   nocturna tiene que ganar en cascada a la regla de escritorio de .cabecera.
   Escalera técnica completa en decisiones/ADR-010. */

/* La cabecera sigue a la noche, en dos capas. El fondo se funde con el paso
   de la banda de ocaso por debajo (escena 4, más abajo, ligada al scroll: una
   capa burdeo que se encende al ritmo del cielo). El texto y el borde cambian
   por clase, que portada.js pone cuando la mitad de la banda pasa bajo la
   cabecera, en 450 ms: el color de texto no se puede fundir por opacidad sin
   duplicar el texto. Sin soporte de animation-timeline, o con movimiento
   reducido, la clase también cambia el fondo (a .12s en reducido). 450 ms y no
   los <300 del motion de interfaz: nadie lo dispara con un clic, es atmósfera. */
.cabecera{transition:background-color .45s ease,color .45s ease,border-color .45s ease}
.cabecera.cabecera--noche{background:rgba(59,31,36,.96);color:var(--lunamarfil);border-bottom-color:rgba(239,230,216,.14)}
.cabecera::before{content:"";position:absolute;inset:0;background:rgba(59,31,36,.96);opacity:0;z-index:-1;pointer-events:none}
.cabecera--noche :is(a,button,input,summary):focus-visible{outline-color:var(--arena)}
.cabecera--noche .util-panel{background:var(--noche);border-color:rgba(239,230,216,.2);color-scheme:dark}
.cabecera--noche .util-panel input[type="search"]{color:var(--lunamarfil);border-bottom-color:rgba(239,230,216,.45)}
.cabecera--noche .util-panel input[type="search"]::placeholder{color:rgba(239,230,216,.68)}
.cabecera--noche .util-panel button{background:var(--lunamarfil);color:var(--noche)}

/* La luna por tiempo: en pantallas táctiles y en navegadores sin
   animation-timeline (iOS 18 y anteriores). portada.js pone .momento--antes al
   cargar y la cambia por .momento--aparece cuando la sección entra; la escena
   corre una vez, 1,6 s, y el titular y el texto la siguen. En táctil es el
   camino principal, no el secundario: un flick recorre la sección en un tercio
   de segundo y la versión ligada al scroll no alcanza a verse (Gonzalo, en su
   teléfono, C-14). Curva --ease-out del sistema: aquí sí es tiempo. El enlace
   solo cambia de opacidad y conserva sus transiciones de :active. */
.momento--antes .luna-real{opacity:0;transform:translateY(6rem)}
.momento--antes>h2,.momento--antes>p{opacity:0;transform:translateY(16px)}
.momento--antes>.enlace-momento{opacity:0}
/* Con foco de teclado el enlace se muestra aunque la escena no haya llegado:
   nunca un foco sobre algo invisible. Vale para las dos escaleras. */
.momento--antes>.enlace-momento:focus-visible{opacity:1}
/* La subida frena al final (--ease-out); el encendido arranca lento y dura
   casi lo mismo (curva simétrica): la luna se va encendiendo mientras sube, no
   sube ya encendida. Gonzalo lo vio en el teléfono. */
.momento--aparece .luna-real{transition:transform 1.6s var(--ease-out),opacity 1.4s cubic-bezier(.45,0,.55,1)}
.momento--aparece>h2,.momento--aparece>p{transition:transform 1s var(--ease-out),opacity 1s cubic-bezier(.45,0,.55,1)}
.momento--aparece>h2{transition-delay:.35s}
.momento--aparece>p{transition-delay:.55s}
.momento--aparece>.enlace-momento{transition:opacity 1s cubic-bezier(.45,0,.55,1) .7s,color .2s ease,transform .14s var(--ease-out)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Escena 1 · Amanece. El hero es el amanecer (la paleta lo dice: Amanecer
       es su marfil, la foto es "luz cálida de amanecer"); el ocaso es la banda.
       La línea de tiempo es la salida del hero por arriba: el sol, que es el
       contraluz detrás de la modelo, baja y se esconde detrás de ella (se apaga
       antes de tocar el borde del hero, para que el rectángulo no lo recorte),
       y el pie del hero, arena en reposo, se aclara hasta el marfil del acto
       día: el hero se funde con las categorías sin borde. La capa que aclara va
       debajo de la foto y encima del sol. Conserva el translateX(-50%) que lo
       centra. Lineal: el ritmo lo pone el dedo. (Se probó con el sol subiendo,
       como manda la lógica del amanecer: arranca en el tercio alto del hero y
       en el teléfono se va detrás de la cabecera antes de verse. Bajando se ve.)
       (Antes aquí había un sol que se ponía: un atardecer al inicio de la
       página, seguido del día pleno de las categorías. Gonzalo vio el corte.)
       Ojo con los rangos de todas las escenas: view-timeline-inset es auto y
       toma el scroll-padding-top del html (6rem), así que el borde superior
       del scrollport para estas líneas de tiempo está bajo la cabecera pegada,
       que es donde de verdad empieza lo visible. Es deseable; no "corregir". */
    .hero{view-timeline-name:--hero}
    .hero .sol{animation:lunara-sol-se-esconde linear both;animation-timeline:--hero;animation-range:exit 0% exit 90%}
    .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(241,234,225,0) 0%,rgba(241,234,225,.35) 40%,rgba(241,234,225,.85) 75%,var(--amanecer) 100%);opacity:0;animation:lunara-aclara linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
    /* La foto pasa por encima de la luz del día: nada se le pone encima a la foto. */
    .hero-figura{z-index:1}

    /* Escena 4 · La cabecera anochece con el cielo. La línea de tiempo es la
       banda de ocaso, alcanzada desde la cabecera con timeline-scope en body;
       su rango exit (con el inset del scroll-padding, ~la línea de la cabecera)
       es exactamente el paso de la banda por debajo. La capa burdeo del
       ::before se encende a ese ritmo; el fondo marfil de la clase queda debajo
       para que aquí no salte. */
    body{timeline-scope:--ocaso}
    .ocaso:not(.ocaso--breve){view-timeline-name:--ocaso}
    .cabecera::before{animation:lunara-cabecera-anochece linear both;animation-timeline:--ocaso;animation-range:exit 0% exit 100%}
    .cabecera.cabecera--noche{background-color:rgba(241,234,225,.96)}

    /* Escena 2 · El cielo se oscurece. Dos capas sobre el degradado de la
       maqueta, con el mismo degradado corrido (una más de día, una más de
       noche), ancladas en Amanecer arriba y Burdeo abajo para que nunca haya
       costura con .dia ni con .noche. La banda entra con la capa de día
       encendida, a mitad de pantalla es el degradado exacto de la maqueta, y
       sale con la capa de noche encendida: la noche sube por la banda. */
    .ocaso:not(.ocaso--breve){position:relative}
    .ocaso:not(.ocaso--breve)::before,.ocaso:not(.ocaso--breve)::after{content:"";position:absolute;inset:0;animation:lunara-cielo-dia linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ocaso:not(.ocaso--breve)::before{background:linear-gradient(180deg,var(--amanecer) 0%,var(--amanecer) 28%,#D9BFA6 55%,#9C6B4F 80%,#5E3A38 94%,var(--noche) 100%)}
    .ocaso:not(.ocaso--breve)::after{background:linear-gradient(180deg,var(--amanecer) 0%,#D9BFA6 8%,#9C6B4F 30%,#5E3A38 52%,var(--noche) 72%,var(--noche) 100%);animation-name:lunara-cielo-noche}

    /* Escena 3 · La luna aparece. La línea de tiempo se declara en .momento
       (su overflow:hidden lo haría contenedor de scroll para las de sus hijos).
       La luna sube y se encende con su halo en el primer tramo de la entrada;
       el titular, el párrafo y el enlace la siguen escalonados. Curva ease-out
       suave (cúbica) sobre el scroll: la luna se asienta al final sin saltar al
       principio; la --ease-out del sistema es para tiempo, sobre scroll hace
       que el 70% del recorrido ocurra en el primer cuarto. Reversible al subir.
       El enlace solo cambia de opacidad: una animación de transform le pisaría
       el scale(.97) del :active. */
    /* Solo sin puntero grueso (rueda o trackpad): en táctil la luna va por
       tiempo, arriba, y portada.js decide con la misma consulta de medios. */
    @media not (pointer: coarse){
      .momento{view-timeline-name:--momento}
      .momento .luna-real{animation:lunara-luna-aparece cubic-bezier(.33,1,.68,1) both;animation-timeline:--momento;animation-range:entry 10% entry 55%}
      .momento>h2{animation:lunara-texto-aparece cubic-bezier(.33,1,.68,1) both;animation-timeline:--momento;animation-range:entry 25% entry 65%}
      .momento>p{animation:lunara-texto-aparece cubic-bezier(.33,1,.68,1) both;animation-timeline:--momento;animation-range:entry 35% entry 75%}
      .momento>.enlace-momento{animation:lunara-enlace-aparece cubic-bezier(.33,1,.68,1) both;animation-timeline:--momento;animation-range:entry 45% entry 85%}
      .momento>.enlace-momento:focus-visible{animation:none;opacity:1}
    }
  }
}
@keyframes lunara-sol-se-esconde{0%{transform:translate(-50%,0);opacity:1}40%{opacity:1}75%,100%{opacity:0}100%{transform:translate(-50%,40vh)}}
@keyframes lunara-aclara{from{opacity:0}to{opacity:1}}
@keyframes lunara-cabecera-anochece{from{opacity:0}to{opacity:1}}
@keyframes lunara-cielo-dia{0%{opacity:1}50%,100%{opacity:0}}
@keyframes lunara-cielo-noche{0%,50%{opacity:0}100%{opacity:1}}
@keyframes lunara-luna-aparece{from{transform:translateY(4rem);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes lunara-texto-aparece{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes lunara-enlace-aparece{from{opacity:0}to{opacity:1}}
/* En papel no hay scroll: todo en reposo y visible. */
@media print{
  .hero .sol,.ocaso::before,.ocaso::after,.momento .luna-real,.momento>h2,.momento>p,.momento>.enlace-momento{animation:none!important}
  .momento--antes .luna-real,.momento--antes>h2,.momento--antes>p,.momento--antes>.enlace-momento{opacity:1!important;transform:none!important}
}