/* ═══════════════════════════════════════════════════════════════
   MUNDO.CSS · Cosas Agénticas · 30-jul-2026
   Un solo mundo oscuro. Decisión de Julián del 20-jul-2026, que hasta
   hoy no se había aplicado a ninguna página.

   Se carga DESPUÉS de joy.css y antes de tienda.css.

   Los tokens NO son inventados: salen de _proto-tienda-dark.html, que es
   el prototipo de Julián, y coinciden con la paleta declarada en
   docs/copy-context/01-contexto-y-marca.md.

   REGLA DEL LATÓN: --brass marca solo lo comprable y lo seleccionable.
   No decora. Un subrayado de sección, un adorno o un icono NUNCA van en
   latón: van en línea o en apagado. Si el latón decora, deja de señalar.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* MUNDO CLARO · 3-sep-2026, orden de Julián: "quita de una vez el negro".
     Los nombres de los tokens son históricos y ya no describen su color:
     --void es el FONDO y --paper es el TEXTO. Se mantienen porque los usan
     cientos de reglas; lo que cambia es el valor, no el papel que juegan.
     El latón baja a bronce: #c9a86c sobre papel da 2,0:1 y no se lee. En
     bronce da 6,4:1 tanto de texto sobre papel como de fondo con texto
     claro, así que las reglas `background:var(--brass);color:var(--void)`
     siguen siendo correctas sin tocar ninguna. */
  --void:#f2ede3;        /* papel cálido, fondo del mundo      */
  --void-2:#e9e1d3;      /* superficie elevada: tarjeta, panel */
  --void-3:#ded5c4;      /* superficie sobre superficie        */
  --paper:#17140f;       /* texto principal (tinta)            */
  --muted:#57503f;       /* texto secundario · 6,86:1          */
  --faint:#6a6250;       /* datos, etiquetas, terciarias · 5,18:1 */
  --brass:#7a5c22;       /* SOLO comprable o seleccionado · 5,32:1 */
  --brass-dim:#654b1c;   /* hover del bronce: MÁS oscuro, no más claro.
                            En claro daba 3,45:1 y el rótulo del botón
                            dejaba de leerse al pasar por encima. 6,99:1 */
  --free:#356b4a;        /* lo que no cuesta dinero · 5,37:1   */
  --line:rgba(23,20,15,.15);
  --line-2:rgba(23,20,15,.28);

  --serif:'Bodoni Moda',Georgia,serif;   /* SOLO acento, nunca cuerpo */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* Una sola curva para todo el sitio. Build in Amsterdam usa 53 y
     Louis Paquet 1. Nosotros: una para lo normal y otra para lo que
     tiene que sentirse pesado. */
  /* ── Movimiento · medido en Build in Amsterdam el 3-sep-2026 ──────
     No son valores admirados de oído: salen de sus propias variables,
     servidas hoy por su web. La nuestra era cubic-bezier(.22,.61,.36,1),
     una desaceleración educada. La suya es exponencial: mantiene la
     velocidad casi hasta el final y frena de golpe al aterrizar. Por eso
     su motion parece que pesa y el nuestro parecía que se deslizaba.

     Y son LENTOS: un segundo entero donde todo el mundo pone 300 ms. */
  --e:cubic-bezier(.19,1,.22,1);        /* easeOutExpo · el suyo         */
  --e-linea:cubic-bezier(.45,.02,.09,.98); /* para filetes y subrayados  */
  --dur:1s;                              /* entrada de bloque            */
  --dur-linea:.3s;                       /* trazo, borde, subrayado      */
  --retardo:.3s;                         /* espera antes de revelar      */

  /* Su escala de separación: 15px en móvil, 35 en escritorio. Nosotros
     íbamos de 19 a 40 con un clamp por vw. La suya es más apretada y
     tiene solo dos estados, que es más fácil de mantener coherente. */
  --gap:.9375rem;
  --e-peso:cubic-bezier(.77,0,.175,1);
}

/* El segundo estado de su escala, en su mismo breakpoint. */
@media (min-width:1024px){ :root{ --gap:2.1875rem; } }

/* ── Base ────────────────────────────────────────────────────── */
body{background:var(--void);color:var(--paper)}

/* Los adornos dejan de ser naranjas y pasan a ser línea. No compiten
   con el latón, que es el que tiene que cantar. */
section h2::after,
.section-kicker::before{background:var(--line-2)}
.section-kicker{color:var(--faint)}

/* ── Barra superior ──────────────────────────────────────────── */
.topbar{background:rgba(242,237,227,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-logo{color:var(--paper)}
.topbar-nav a{color:var(--muted)}
.topbar-nav a:hover{color:var(--paper)}
/* El pack se compra: latón. */
.topbar-cta{background:transparent;color:var(--brass)!important;border:1px solid var(--brass-dim)}
.topbar-cta:hover{background:var(--brass);color:var(--void)!important}
/* El catálogo se visita: mismo latón, trazo más fino. */
.topbar-guia{color:var(--brass)!important;border-color:var(--brass-dim)}
.topbar-guia:hover{background:var(--brass);color:var(--void)!important}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{background:var(--void)}
.hero h1{color:var(--paper)}
/* El degradado naranja-rosa se va. El acento es la itálica, a la manera
   del prototipo: "una misma obra". */
.hero h1 .highlight{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:currentColor;
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--brass);
}
.hero-eyebrow{color:var(--faint);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.hero-dek,.hero-note{color:var(--muted)}
.btn-primary{background:var(--brass);color:var(--void);border:1px solid var(--brass)}
.btn-primary:hover{background:transparent;color:var(--brass)}
.btn-ghost{color:var(--muted);border-color:var(--line-2)}
.btn-ghost:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.hero-photo{background:var(--void-2)}
.hero-caption,.hero-badge{
  background:var(--void-2);color:var(--muted);
  border:1px solid var(--line);
}
.hero-caption::after{background:var(--line-2)}
.hero-badge{color:var(--brass);font-family:var(--mono);font-size:.72rem}

/* ── Regalo ──────────────────────────────────────────────────── */
.gift{background:var(--void)}
.gift-dek,.gift-ps{color:var(--muted)}
.gift-card{background:var(--void-2);border:1px solid var(--line)}
.gift-card::before{background:var(--free);color:var(--void)}
.gift-fact-num{color:var(--paper)}
.gift-fact span:last-child{color:var(--faint)}
/* Gratis no es comprable: verde, no latón. */
.btn-gift{background:transparent;color:var(--free);border:1px solid var(--free)}
.btn-gift:hover{background:var(--free);color:var(--void)}

/* ── Germán ──────────────────────────────────────────────────── */
.why{background:var(--void)}
.why-text p{color:var(--muted)}
.why-text strong{color:var(--paper)}
.why-signature{color:var(--faint)}
.why-stat{background:var(--void-2);border:1px solid var(--line)}
.why-stat-num{color:var(--paper);font-family:var(--serif);font-style:italic}
.why-stat-label{color:var(--faint);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em}

/* ── Pack ────────────────────────────────────────────────────── */
.bundle{background:var(--void-2);color:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bundle-dek{color:var(--muted)}
.bundle-math-row{color:var(--muted);font-family:var(--mono)}
.bundle-math-big{color:var(--paper)}
.bundle-math-save{color:var(--free)}
.bundle-perks li{color:var(--muted)}
.btn-bundle{background:var(--brass);color:var(--void);border:1px solid var(--brass)}
.btn-bundle:hover{background:transparent;color:var(--brass)}
.bundle-note,.bundle-note-exclusivo{color:var(--faint)}

/* ── Soporte, FAQ, confesionario ─────────────────────────────── */
.support{background:var(--void)}
.support-card{background:var(--void-2);border:1px solid var(--line)}
.support-card::before{background:var(--line-2)}
.support-card h3{color:var(--paper)}
.support-card p{color:var(--muted)}
.faq{background:var(--void)}
.faq details{background:var(--void-2);border:1px solid var(--line);color:var(--paper)}
.faq details[open]{background:var(--void-3)}
.faq summary{color:var(--paper)}
.faq p{color:var(--muted)}
.conf-item{background:var(--void-2);border:1px solid var(--line);color:var(--muted)}
.conf-form textarea,
.conf-form input[type=text]{background:var(--void-2);color:var(--paper);border:1px solid var(--line-2)}
.conf-form textarea::placeholder,
.conf-form input::placeholder{color:var(--faint)}

/* ── Radar ───────────────────────────────────────────────────── */
/* El mapa ya era dark-v11 de Mapbox. Era la página la que iba en crema
   alrededor de un mapa oscuro. Ahora el hueco del mapa es del color del
   mundo, así que mientras carga no hay un rectángulo claro parpadeando. */
.globe-final{background:var(--void)}
.globe-final-dek{color:var(--muted)}
/* Acotado a .globe-final el 3-sep: era un selector de id suelto y le pintaba
   papel al lienzo del viaje, que es un mundo oscuro. */
.globe-final .globe-final-map,
.globe-final #globe-container{background:var(--void-2)!important}
.globe-pin{background:var(--pin,var(--brass))}
.globe-play{background:transparent;color:var(--brass);border:1px solid var(--brass-dim)}
.globe-play:hover{background:var(--brass);color:var(--void)}
.globe-final .location-list,
.globe-final .project-panel{background:var(--void-2);border:1px solid var(--line);color:var(--paper)}
.globe-final .panel-cta{background:var(--brass);color:var(--void)}

/* ── Pie ─────────────────────────────────────────────────────── */
.footer{background:var(--void-2);color:var(--muted);border-top:1px solid var(--line)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--brass)}

/* ── Detalles que se notan aunque no se miren ────────────────── */
::selection{background:var(--brass);color:var(--void)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
html{color-scheme:dark}
/* Las barras de scroll también son parte del objeto. */
*{scrollbar-color:var(--line-2) transparent}

/* ── Tipografía del canon ────────────────────────────────────
 * Instrument Serif sale del sitio: la decisión del 20-jul dice DM Sans
 * para display, Bodoni itálica SOLO como acento y IBM Plex Mono para
 * datos. Sin esta regla los titulares caen a la serif del sistema, que
 * es exactamente el "parece una plantilla" del NO GO 98. */
h1,h2,h3,h4,.hero h1,.gcard__titulo,.ruta__nom{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:500;
  letter-spacing:-.02em;
}
/* La itálica es el acento, y solo eso. */
.hero h1 .highlight,.why-stat-num{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

/* ── Rescate de los textos con degradado recortado ───────────
 * joy.css pinta tres textos con `background-clip:text` y
 * `-webkit-text-fill-color:transparent`: el color venía del degradado
 * naranja. Al cambiarles el fondo por el del mundo, el relleno seguía
 * transparente y el texto DESAPARECÍA. Se devuelve el relleno. */
.hero-dek,
.hero-caption{
  -webkit-text-fill-color:currentColor;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  animation:none;
}
.hero-caption{color:var(--muted)}
.hero-dek{color:var(--muted);background:none}

/* El último naranja del mundo viejo: el titular del regalo. */
.gift h2{color:var(--paper)}

/* El subrayado de sección sobrevivía en naranja porque su regla lista
 * `.gift h2::after` (0,1,2) y mi `section h2::after` es (0,0,3): más baja.
 * Se igualan las clases y se acabó el último naranja. */
.gift h2::after,.bundle h2::after,.faq h2::after,.support h2::after{background:var(--line-2)}
/* El "+" del desplegable de preguntas. */
.faq summary::after{color:var(--brass)}

/* ── El confesionario nunca cruzó al mundo oscuro ─────────────
 * 31-jul. Julián: "la página no se puede leer".
 * Aquí arriba ya estaba `.conf-item{color:var(--muted)}`, pero joy.css
 * lista `.conf-item p` (0,1,1) y gana a mi `.conf-item` (0,1,0): los
 * siete pecados se pintaban en #2a2a3a, azul marino sobre negro.
 * Medido: 1,29:1. El mínimo legal es 4,5. Eso no es "poco contraste",
 * es texto que no existe.
 * La regla: cuando una clase del mundo viejo pinta texto, se la iguala
 * en especificidad, no se confía en el orden de carga. */
.conf-item p{color:var(--muted)}
.conf-dek{color:var(--muted)}
.conf-firma,.conf-fecha{color:var(--faint)}
.conf-aviso{color:var(--muted);background:rgba(243,239,231,.04)}
.conf-aviso strong{color:var(--paper)}

/* El rojo del pecado. #c62828 nació para papel blanco y sobre el void
 * se queda en 3,24:1. Este mismo rojo aclarado da 6,1:1 y sigue
 * leyéndose como rojo, que es lo que tiene que decir. No es latón:
 * el latón solo marca lo comprable. */
:root{--rojo:#e57373}
.conf-num,.support-card strong,.support strong{color:var(--rojo)}
.conf-item{border-left-color:var(--rojo)}

/* Las respuestas de las preguntas frecuentes. Mismo caso: mi
 * `.faq p` perdía contra `.faq details p`, y quien compra lee esto
 * justo antes de decidir. */
.faq details p{color:var(--muted)}
.support-dek{color:var(--muted)}