/* =====================================================================
   La Centollería · web v2 · TEMA NAVY ("mundo caja mailer") · 26 sep 2026
   Tema principal de v2 (28 sep 2026). Se carga DESPUÉS de styles.css y sólo
   sobrescribe: mismas clases, misma estructura.

   Referencia material: la caja mailer (cartón navy soft-touch, logo crema
   en relieve con el trazo rojo, interior kraft natural, papel de seda
   crema), pizarra oscura, sol bajo y sombras largas.

   Reglas
   · Navy domina. Navy hondo para bandas alternas y pie.
   · Kraft = acento cálido chico (rótulos, filetes, banda "interior de caja").
   · Crema = texto, logo y botón principal.
   · Rojo SÓLO dentro del archivo oficial del logo. Nunca texto, nunca UI.
   · Sin brillos: nada de degradados satinados. Grano de cartón ≤ 4 %.

   Contraste medido (WCAG 2.x, texto normal pide 4,5:1)
     crema #F2EBE0 / navy #0F3546 ............ 10,96:1
     crema / navy hondo #0A2633 .............. 13,26:1
     crema / pizarra #1B2226 ................. 13,61:1
     crema suave #BFC8C9 / navy .............. 7,61:1
     crema suave / navy hondo ................ 9,21:1
     crema 72 % (pie de foto) / navy ......... 6,2:1  (≈ #AEB4B2)
     crema 72 % / navy hondo ................. 7,2:1
     kraft #C49B78 / navy .................... 5,13:1
     kraft / navy hondo ...................... 6,21:1
     navy / crema (botón principal) .......... 10,96:1
     navy hondo / kraft (banda kraft) ........ 6,21:1
     navy / kraft ............................ 5,13:1
     borde de campo crema 50 % / navy hondo .. 4,3:1 (no texto: pide 3:1)
     rojo #D7453F / navy ..................... 2,97:1 → por eso nunca texto
   ===================================================================== */

:root {
  /* ---------- Color de marca (oficial) ---------- */
  --navy:        #0F3546;
  --rojo:        #D7453F;   /* sólo dentro del logo */
  --crema:       #F2EBE0;
  --blanco:      #FFFFFF;

  /* ---------- Derivados del mundo caja ---------- */
  --navy-hondo:  #0A2633;   /* bandas alternas, pie, tarjetas, campos */
  --pizarra:     #1B2226;   /* sólo detrás de fotos (mismo tono que la mesa) */
  --kraft:       #C49B78;   /* muestreado del interior de la caja (S05, pared iluminada) */
  --kraft-sombra:#A98262;   /* kraft en sombra: filete sobre kraft */
  --seda:        #E6D9C3;   /* papel de seda iluminado (reservado) */
  --crema-suave: #BFC8C9;
  --crema-72:    rgba(242, 235, 224, .72);
  --filete:      rgba(242, 235, 224, .16);   /* líneas decorativas */
  --filete-campo:rgba(242, 235, 224, .50);   /* borde de campos y botones: ≥ 3:1 */

  /* ---------- Tokens semánticos de v2, reasignados ---------- */
  --texto:          var(--crema);
  --texto-suave:    var(--crema-suave);
  --texto-inv:      var(--crema);
  --texto-inv-suave:var(--crema-suave);
  --crema-hondo:    var(--navy-hondo);   /* v2 lo usa como banda alterna y fondo de foto */
  --crema-claro:    var(--navy-hondo);   /* v2 lo usa como tarjeta y campo */
  --borde:          var(--filete);
  --borde-fuerte:   rgba(242, 235, 224, .60);
  --foco:           var(--crema);
  --linea:          1px solid var(--filete);
  --sombra-flotante: 0 18px 48px rgba(0, 0, 0, .45);

  /* Cartón: esquinas casi vivas */
  --radio-s: 2px;
  --radio-m: 3px;

  /* Grano del cartón soft-touch (fibras claras finas). Opacidad efectiva ≈ 3 %. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95  0 0 0 0 .92  0 0 0 0 .88  0 0 0 2.2 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
  /* Fibra del kraft: motas oscuras y claras */
  --grano-kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .12  0 0 0 2.4 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.45'/%3E%3C/svg%3E");

  /* Relieve de imprenta (letterpress): sólo títulos muy grandes */
  --relieve: 0 -1px 0 rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---------- Base ---------- */
html { background: var(--navy); color-scheme: dark; }
body {
  background-color: var(--navy);
  background-image: var(--grano);
  color: var(--texto);
}
::selection { background: var(--kraft); color: var(--navy-hondo); }
.saltar { background: var(--crema); color: var(--navy); }

.seccion--alterna { background-color: var(--navy-hondo); background-image: var(--grano); }
.seccion--borde { border-top: var(--linea); }

/* ---------- Tipografía ---------- */
.display { text-shadow: var(--relieve); }
.rotulo {
  color: var(--kraft); font-size: .75rem; letter-spacing: .24em; margin-bottom: var(--s-5);
}
.lead { font-weight: 300; color: var(--crema); }
.cabeza-seccion p { color: var(--texto-suave); }

/* ---------- Botones ---------- */
.btn--primario { background: var(--crema); color: var(--navy); }
.btn--primario:hover { background: var(--blanco); }
.btn--secundario { background: transparent; color: var(--crema); border-color: var(--borde-fuerte); }
.btn--secundario:hover { background: var(--crema); color: var(--navy); border-color: var(--crema); }
.btn--crema { background: var(--crema); color: var(--navy); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent; color: var(--crema-suave); border-color: rgba(242, 235, 224, .28);
}
.enlace { color: var(--crema); }
.enlace:hover { color: var(--blanco); }

/* ---------- Avisos ---------- */
.aviso-qa { background: var(--kraft); color: var(--navy-hondo); }
.aviso-catalogo { background: var(--navy-hondo); border-color: var(--borde-fuerte); }

/* ---------- Cabecera ---------- */
.cabecera {
  background-color: rgba(15, 53, 70, .97); background-image: var(--grano);
  border-bottom: var(--linea);
}
@supports (backdrop-filter: blur(6px)) {
  .cabecera { background-color: rgba(15, 53, 70, .9); backdrop-filter: blur(6px); }
}

.nav a { color: var(--crema); }

/* ---------- Hero: foto de sangre completa, texto sobre navy ---------- */
.hero__texto .display { text-shadow: var(--relieve); }
.hero__foto img { background: var(--pizarra); }

/* ---------- Fotos ---------- */
.foto img { background: var(--pizarra); }
.foto figcaption, .pie-foto { color: var(--crema-72); }

/* ---------- Comprar ---------- */
.opcion-compra { background-color: var(--navy-hondo); background-image: var(--grano); }
.opcion-compra--agotada { background-image: none; }
.opcion-compra__peso { text-shadow: var(--relieve); }
.estado--disponible { color: var(--crema); }

/* ---------- Qué recibes · despacho: acento kraft chico ---------- */
.pasos-uso li::before { color: var(--kraft); }
.tabla-despacho thead th, .despacho__sub { color: var(--kraft); }

/* ---------- Tabla ---------- */
.tabla thead th { color: var(--kraft); border-bottom-color: var(--borde-fuerte); }
.tabla tbody th a { color: var(--crema); }

/* ---------- Campos ---------- */
.campo label, .campo legend { color: var(--crema); }
.campo input, .campo select, .campo textarea {
  background: var(--navy-hondo); border-color: var(--filete-campo); color: var(--crema);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--crema-suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--crema); }
.campo input[aria-invalid="true"] { border-color: var(--crema); }
.campo .error { color: var(--crema); }

/* ---------- Pie ---------- */
.pie { background-color: var(--navy-hondo); background-image: var(--grano); border-top: var(--linea); }
.pie h2 { color: var(--kraft); letter-spacing: .24em; font-size: .75rem; }
.pie__legal { border-top-color: var(--filete); }

/* ---------- Carro lateral ---------- */
.velo { background: rgba(4, 16, 22, .62); }
.carro { background-color: var(--navy); background-image: var(--grano); color: var(--crema); border-left: var(--linea); }
.carro__pie { background: var(--navy); }
.carro__avisos p { border-left-color: var(--kraft); }
.btn-cerrar { color: var(--crema); }
.cantidad { background: var(--navy-hondo); border-color: var(--borde-fuerte); }
.cantidad button { color: var(--crema); }
.cantidad button:disabled { color: rgba(242, 235, 224, .35); }
.toast { background: var(--crema); color: var(--navy); }


/* Acordeón de preguntas */
.acordeon summary { color: var(--crema); }

@media (prefers-reduced-transparency: reduce) {
  .cabecera { background-color: var(--navy); backdrop-filter: none; }
}