/* Paleta compartida del quiz y la lectura «¿Para qué viniste?» v2 (P-1910-02.4). Mismos valores que los --claro-* de APP (P-1910-06).
   Oscuro (por defecto) = bloques noche de ar.ramainfinito.com. Claro = esa landing tal cual. Medido en app-06.1/REFERENCIA-CARTA.md. */

:root {
  /* tipografía (M390 de la carta) */
  --ff-base: Assistant, system-ui, sans-serif;
  --ff-acento: "Cormorant Garamond", Georgia, serif;
  --ff-firma: "Pinyon Script", cursive;

  /* ---------- OSCURO: bloques noche de la carta ---------- */
  --fondo: #140506;
  --fondo: #120405;
  --fondo-img: radial-gradient(60% 34% at 50% 0%, rgba(233, 201, 127, .20), transparent 70%), radial-gradient(130% 80% at 50% 0%, #5e1c1f 0%, #34100f 46%, #1a0607 78%, #120405 100%);
  --estrellas: 1;
  --e1: #fff3cf; --e2: #fff; --e3: #e9c97f;          /* estrellas */
  --rueda: url(rueda-oscuro.svg); --rueda-op: .16;    /* rueda zodiacal fina detrás de la tapa (Rama 19/10 03:0x: «el fondo no muy lindo») */
  --texto: #f6e7c6;          /* noche-texto */
  --texto-2: #f0dcd0;        /* noche-texto-2 */
  --texto-3: #b9a29a;        /* footer */
  --titulo: #fff3cf;         /* noche-titulo */
  --acento-h1: linear-gradient(180deg, #fff6d8, #e9c97f 55%, #c99a45);
  --acento-h1-color: transparent;
  --negrita: #fff3cf;
  --oro-linea: #e9c97f;
  --firma: #e9c97f;
  --eb-bg: linear-gradient(135deg, #fff3cf 0%, #e9c97f 30%, #b8843a 62%, #f3dc9e 100%);
  --eb-borde: transparent;
  --eb-texto: #3a1408;
  --card-bg: radial-gradient(120% 90% at 50% 0%, #4a1618 0%, #2a0c0d 70%);
  --card-borde: linear-gradient(135deg, #fff3cf 0%, #e9c97f 30%, #b8843a 62%, #f3dc9e 100%);
  --card-sombra: 0 0 0 5px rgba(233, 201, 127, .10), 0 26px 50px -24px rgba(0, 0, 0, .85);
  --barra: rgba(233, 201, 127, .16);
  --campo-bg: rgba(20, 5, 6, .5);
  --campo-borde: rgba(233, 201, 127, .38);
  --campo-texto: #fff3cf;
  --campo-ph: #a8918a;
  --campo-foco: #e9c97f;
  --campo-foco-halo: rgba(233, 201, 127, .18);
  --opc-bg: rgba(20, 5, 6, .5);
  --opc-borde: rgba(233, 201, 127, .3);
  --opc-sel-bg: rgba(233, 201, 127, .12);
  --opc-sel-borde: #e9c97f;
  --check-bg: rgba(233, 201, 127, .07);
  --check-borde: rgba(233, 201, 127, .5);
  --check-texto: #f3d98f;
  --link: #e9c97f;
  --err: #f3a28f;
  --rama-bg: linear-gradient(180deg, #2a0c0d, #3d1214);   /* cinta oscura de la carta (.tres) */
  --bajada: #f0dcd0;
  --don: #f1dcaa;            /* frase en Cormorant de la lectura */
  --firma-papel: #e9c97f;    /* firma suelta sobre el fondo */
  --cab: #e9c97f;            /* etiquetas en mayúscula */
  --rama-texto: #f0dcd0;
  --div: rgba(233, 201, 127, .22);
  --tbtn-bg: rgba(20, 5, 6, .72);
  --tbtn-borde: rgba(233, 201, 127, .55);
  --tbtn-texto: #f6e7c6;
  /* botón principal: igual en los dos modos (bordó con borde de oro de 3 px, M390 .btn) */
  --btn: linear-gradient(180deg, #a83131, #7a2222);
  --btn-borde: linear-gradient(135deg, #fff3cf, #e9c97f 30%, #a8752f 60%, #f6e2a8);
  --btn-sombra: 0 0 0 1px rgba(184, 132, 58, .55), 0 16px 30px -14px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* ---------- CLARO: la landing de la carta (tokens --claro-* medidos) ---------- */
html[data-tema="claro"] {
  --fondo: #f9f9f7;
  --fondo-img: radial-gradient(circle at 12% 0%, rgba(232, 185, 106, .30), transparent 38%), radial-gradient(circle at 88% 8%, rgba(149, 42, 42, .16), transparent 40%), linear-gradient(180deg, #f8f4f0 0%, #f9f9f7 60%);
  --estrellas: .55;
  --e1: #b8843a; --e2: #952a2a; --e3: #a8752f;       /* en claro los detalles van en oro oscuro y bordó («cuando lo pasás a claro, los detalles esos desaparecen») */
  --rueda: url(rueda-claro.svg); --rueda-op: .16;
  --texto: #1a1212;
  --texto-2: #55504c;
  --texto-3: #7d726a;
  --titulo: #1a1212;
  --acento-h1: none;
  --acento-h1-color: #8e5c14;
  --negrita: #952a2a;
  --oro-linea: #b8843a;
  --firma: #e9c97f;
  --eb-bg: #fff4e2;
  --eb-borde: #f0d9ae;
  --eb-texto: #8a5a00;
  --card-bg: linear-gradient(#fff, #fff);
  --card-borde: linear-gradient(135deg, #fff3cf 0%, #e9c97f 30%, #b8843a 62%, #f3dc9e 100%);
  --card-sombra: 0 16px 40px -24px rgba(58, 20, 20, .45);
  --barra: #f0e6da;
  --campo-bg: #f8f4f0;
  --campo-borde: #ece3da;
  --campo-texto: #1a1212;
  --campo-ph: #9a8f86;
  --campo-foco: #952a2a;
  --campo-foco-halo: rgba(149, 42, 42, .10);
  --opc-bg: #f8f4f0;
  --opc-borde: #ece3da;
  --opc-sel-bg: #fdf1f1;
  --opc-sel-borde: #952a2a;
  --check-bg: #fffaf0;
  --check-borde: #e2c896;
  --check-texto: #7a2222;
  --link: #7a2222;
  --err: #c0392b;
  --rama-bg: linear-gradient(180deg, #2a0c0d, #3d1214);   /* en el claro también va oscura, como la cinta de arriba de la carta */
  --rama-texto: #f6e7c6;
  --bajada: #952a2a;
  --don: #8e5c14;
  --firma-papel: #a86d1c;
  --cab: #8a5a00;
  --div: #ece3da;
  --tbtn-bg: rgba(255, 253, 248, .9);
  --tbtn-borde: #e2c896;
  --tbtn-texto: #7a2222;
  --btn-sombra: 0 0 0 1px rgba(184, 132, 58, .55), 0 16px 30px -14px rgba(122, 34, 34, .9);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--fondo); overflow-x: clip; }
body { margin: 0; min-height: 100vh; position: relative; overflow-x: clip; color: var(--texto); background: var(--fondo-img) top / 100% 1400px no-repeat, var(--fondo);   /* el tono cálido solo arriba, como la carta */
  font: 400 17px/1.55 var(--ff-base); -webkit-font-smoothing: antialiased; }
p { margin: 0; }
b, strong { color: var(--negrita); font-weight: 800; }
.hide { display: none !important; }
/* estrellas: oro y blanco en el oscuro, oro oscuro y bordó en el claro */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--estrellas); transition: opacity .3s; background-image:
  radial-gradient(1.7px 1.7px at 67% 77%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.7px 1.7px at 51% 40%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 58% 59%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 42% 95%, var(--e2) 50%, transparent 51%),
  radial-gradient(1.7px 1.7px at 87% 4%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 86% 90%, var(--e3) 50%, transparent 51%),
  radial-gradient(1px 1px at 46% 85%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 42% 12%, var(--e2) 50%, transparent 51%),
  radial-gradient(1.7px 1.7px at 44% 97%, var(--e3) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 81% 78%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 76% 57%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 40% 15%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 54% 46%, var(--e2) 50%, transparent 51%),
  radial-gradient(1.7px 1.7px at 59% 52%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 38% 88%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 26% 4%, var(--e2) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 14% 70%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 48% 45%, var(--e3) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 19% 44%, var(--e3) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 75% 9%, var(--e3) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 94% 42%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 47% 45%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 44% 28%, var(--e1) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 19% 29%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 47%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 64% 63%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 61% 30%, var(--e3) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 54% 36%, var(--e1) 50%, transparent 51%),
  radial-gradient(1px 1px at 28% 32%, var(--e2) 50%, transparent 51%),
  radial-gradient(1px 1px at 64% 22%, var(--e2) 50%, transparent 51%); }
/* rueda zodiacal: 12 casas y 72 marcas, gira muy lento detrás de la tapa */
body::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -210px; left: calc(50% - 320px); width: 640px; height: 640px;
  background: var(--rueda) center / contain no-repeat; opacity: var(--rueda-op); animation: rueda 240s linear infinite; }
@keyframes rueda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------- zócalo de Instagram (el de siempre, Rama 17/10: arriba de todo, en lugar del logo) ---------- */
.zc { --orog: linear-gradient(135deg, #fff3cf 0%, #e9c97f 30%, #b8843a 62%, #f3dc9e 100%);
  width: 100%; max-width: 400px; padding: 12px 14px; border-radius: 16px; border: 2px solid transparent; text-align: left;
  background: linear-gradient(#fff, #fff) padding-box, var(--orog) border-box; box-shadow: 0 0 0 1px rgba(184, 132, 58, .3), 0 12px 26px -16px rgba(122, 84, 32, .6);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #262626; }
.zc-top { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; }
.zc-r { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zc-av { width: 72px; height: 72px; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #952a2a, #e9c97f, #f9ce34); display: block; }
.zc-hd { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; color: #000; margin: 0; }
.zc-hd svg { width: 17px; height: 17px; flex: none; }
.zc-nm { font-size: 17px; font-weight: 600; color: #262626; }
.zc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 12px; }
.zc-stats div { display: flex; flex-direction: column; font-size: 17px; line-height: 1.25; color: #262626; }
.zc-stats b { font-weight: 600; color: #000; }

body > * { position: relative; z-index: 1; }

/* ---------- el botoncito de modo, arriba a la derecha ---------- */
#tema-btn { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 99px; cursor: pointer;
  font: 800 11.5px/1 var(--ff-base); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tbtn-texto); background: var(--tbtn-bg); border: 1px solid var(--tbtn-borde);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45); }
#tema-btn i { width: 16px; height: 16px; flex: none; border-radius: 50%; }
html:not([data-tema="claro"]) #tema-btn i { box-shadow: inset -5px -3px 0 0 #f1dcaa; transform: rotate(-20deg); }   /* luna: pasar a claro */
html[data-tema="claro"] #tema-btn i { background: #c99a45; box-shadow: 0 0 0 3px #fff4e2, 0 0 0 4px #e2c896; }      /* sol: pasar a oscuro */
#tema-btn:focus-visible { outline: 2px solid var(--oro-linea); outline-offset: 3px; }