/* ─── Tipografías propias, servidas desde nuestro origen ──────────────────────
 *
 * Las fuentes se sirven desde este mismo dominio: así el navegador no contacta
 * con ningún tercero al cargar la página, y la primera pintura no depende de la
 * latencia de un host externo.
 *
 * Son fuentes VARIABLES: un solo fichero por familia y subconjunto cubre todo el
 * RANGO de pesos, en vez de un fichero por peso.
 *
 * Subconjuntos `latin` y `latin-ext` (hacen falta para nombres y ciudades con
 * diacríticos). El `unicode-range` hace que el navegador descargue solo el que
 * necesite.
 *
 * Ambas familias son OFL (SIL Open Font License): auto-alojarlas está permitido
 * expresamente. La licencia va en /static/fonts/OFL-*.txt.
 * ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Astarot: Sistema de diseño
   Estética: mística pero cálida y accesible.
   ============================================================ */
:root {
  /* Paleta */
  --cream: #FBF5EC;
  --cream-deep: #F3E8D7;
  --ink: #2E2A24;
  --ink-soft: #6B5F50;
  --terracotta: #C4633C;
  --terracotta-deep: #A24E2C;
  --ochre: #E0A458;
  --gold: #C9A24B;
  --celeste: #8AA6BE;
  --celeste-deep: #5C7C99;
  --celeste-night: #365975;
  --plum: #5B4B6E;
  --line: #E4D6C2;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(92, 74, 50, 0.12);
  --shadow-soft: 0 4px 16px rgba(92, 74, 50, 0.08);

  --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Las imágenes conservan su proporción cuando el CSS les fija el ancho.
   ────────────────────────────────────────────────────────────────────────
   Las <img> llevan `width`/`height` para que el navegador reserve el hueco
   antes de que la imagen llegue y no haya salto de layout. Sin esta regla, un
   `width` en el CSS junto a un `height` en el atributo hace que el navegador
   tome el atributo como alto real y la imagen salga deformada.

   `height: auto` le dice que el atributo solo declara la PROPORCIÓN, no la
   medida. Va como regla base para que ninguna imagen futura repita el fallo;
   quien de verdad necesite un alto fijo lo pone en su propia regla, que es
   más específica y gana (p. ej. `.tablero-carta img`). */
img { height: auto; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(224, 164, 88, 0.10), transparent 38%),
    radial-gradient(circle at 88% 8%, rgba(138, 166, 190, 0.12), transparent 40%),
    radial-gradient(circle at 70% 92%, rgba(196, 99, 60, 0.07), transparent 45%);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
a { color: var(--terracotta-deep); text-decoration: none; }
a:hover { color: var(--terracotta); }

.container { width: min(1080px, 92vw); margin: 0 auto; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- Encabezado ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
  background: rgba(251, 245, 236, 0.82);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif);
  font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.brand .mark { color: var(--terracotta); font-size: 1.4rem; }

/* ── El ícono de Astarot (estrella de ocho puntas) ──────────────────────
   Reemplaza el carácter ✦ en todo el sitio. Se dibuja a 1em × 1em (como una
   letra más) y toma su color de `color`/currentColor: así se tiñe solo
   según el contexto, igual que hacía el carácter Unicode. */
.icono-estrella {
  width: 1em; height: 1em; flex: none;
  display: inline-block; vertical-align: -0.14em;
  fill: currentColor;
}
.nav { display: flex; gap: 18px; align-items: center; flex-wrap: nowrap; }
.nav a { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.nav a:hover { color: var(--terracotta); }

/* Hamburger (solo mobile) */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--ink); font-size: 1.5rem; padding: 4px 6px; line-height: 1;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; top: calc(100% + 1px); left: -4vw; right: -4vw;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 16px; z-index: 99;
    box-shadow: 0 8px 20px rgba(92,74,50,.12);
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px dashed var(--line); width: 100%; font-size: 1rem; }
  .nav a:last-child { border-bottom: none; }
  .nav form { width: 100%; padding-top: 10px; }
  .nav .btn { width: 100%; justify-content: center; margin-top: 4px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--terracotta), var(--ochre));
  color: #fff; border: none; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; font-weight: 700;
  font-family: var(--sans); font-size: 1rem;
  box-shadow: var(--shadow-soft); transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }
.btn-ghost {
  background: transparent; color: var(--terracotta-deep);
  border: 1.5px solid var(--terracotta); box-shadow: none;
}
.btn-ghost:hover { background: rgba(196, 99, 60, 0.08); color: var(--terracotta-deep); }

/* ---------- Tarjetas ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-soft);
}

/* ── El sello de Astarot ──────────────────────────────────────────────────
   Marca de las cajas destacadas: un fino doble filete interior que evoca el
   marco impreso de una carta de tarot. Se aplica con la clase .sello sobre
   cualquier .card. */
.sello, .big-three .card, .jung-card, .cuerpo-row { position: relative; }
.sello::before,
.big-three .card::before,
.jung-card::before,
.cuerpo-row::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--sello-color, rgba(196, 99, 60, .55));   /* filete (tintable) */
  border-radius: calc(var(--radius) - 7px);              /* radio interior = exterior − inset */
  /* segunda línea hairline hacia adentro, separada por un respiro claro */
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3px rgba(201, 162, 75, .35);
}
/* Marco más ceñido para cajas pequeñas (trío, persona activa). */
.sello.sello-sm::before,
.big-three .card::before { inset: 5px; border-radius: calc(var(--radius) - 5px); }
/* Filas de la carta natal: el mismo filete, tintado con el color del ELEMENTO
   (--sello-color inline), un solo trazo para no recargar ~19 filas. */
.cuerpo-row::before { inset: 6px; border-radius: 8px; box-shadow: none; }
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 70px 0 40px; position: relative; }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .8rem;
  color: var(--celeste-deep); font-weight: 700;
}
.hero p.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 620px; margin: 18px auto 28px; }
.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* A partir de aqui las tres acciones ya no caben en una fila. Apiladas a lo
   ancho completo quedan alineadas entre si y con mas area de toque, en vez
   de partirse en filas centradas de anchos distintos. */
@media (max-width: 560px) {
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .hero-acciones .btn { justify-content: center; }
}

.tool-card { text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tool-card .icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.tool-card h3 { margin: 6px 0; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--sans); font-size: 1rem;
  background: var(--cream); color: var(--ink);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(224,164,88,.2);
}
.row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

/* ---------- Resultado / píldoras ---------- */
.pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
}
.pill-armonico { background: #E7F0E9; color: #3F6B4A; }
.pill-tenso { background: #F6E3DC; color: var(--terracotta-deep); }
.pill-neutral { background: #ECE6F2; color: var(--plum); }

.big-three { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* La barra superior de acento se reemplazó por el sello (filete de Marsella). */

.planet-row { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.planet-row .sym { font-size: 1.4rem; color: var(--terracotta); width: 26px; }
.planet-row .pos { font-weight: 700; min-width: 150px; }
.retro { color: var(--celeste-deep); font-size: .8rem; font-weight: 700; }

/* Marcador de puntaje (sinastría) */
.score-ring {
  --val: 0;
  width: 160px; height: 160px; border-radius: 50%; margin: 0 auto;
  background: conic-gradient(var(--terracotta) calc(var(--val) * 1%), var(--cream-deep) 0);
  display: grid; place-items: center; position: relative;
}
.score-ring-media  { background: conic-gradient(var(--celeste-deep) calc(var(--val) * 1%), var(--cream-deep) 0); }
.score-ring-baja   { background: conic-gradient(var(--ink-soft) calc(var(--val) * 1%), var(--cream-deep) 0); }
.score-ring::before { content: ""; position: absolute; inset: 14px; background: #fff; border-radius: 50%; }
.score-ring .num { position: relative; font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: var(--terracotta-deep); }

/* Selector de baraja */
.deck-selector { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.deck-option input[type=radio] { display: none; }
.deck-option label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 24px; cursor: pointer; transition: all .18s ease;
  background: #fff; min-width: 150px; text-align: center;
}
.deck-option label:hover { border-color: var(--ochre); box-shadow: var(--shadow-soft); }
.deck-option input[type=radio]:checked + label {
  border-color: var(--terracotta); background: var(--cream-deep);
  box-shadow: 0 0 0 3px rgba(196,99,60,.15);
}
.deck-option .deck-icon { font-size: 2rem; }
.deck-option .deck-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.deck-option .deck-desc { font-size: .78rem; color: var(--ink-soft); }

/* Cartas de tarot */
.tarot-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Las interpretaciones, una debajo de otra y separadas. El hueco lo pone el
   contenedor y no un `margin` de `.tarot-card`, para que no se sume al del
   último elemento ni haga falta un `:last-child`. */
#tarot-lectura { display: flex; flex-direction: column; gap: 22px; }
#tarot-lectura:empty { display: none; }
/* Aire entre la mesa y la primera interpretación, para que la mesa se lea como
   un bloque propio y no como cabecera de la primera carta. */
#tarot-lectura:not(:empty) { margin-top: 40px; }

/* Volver a la mesa: solo aparece cuando la mesa ha salido de la pantalla. */
.tarot-volver {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; cursor: pointer; border: none;
  padding: 11px 20px; border-radius: 999px; max-width: calc(100vw - 32px);
  background: var(--plum); color: #fff;
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(46,42,36,.32);
  display: inline-flex; align-items: center; gap: 7px;
  animation: tarot-volver-in .3s ease both;
}
.tarot-volver[hidden] { display: none; }
.tarot-volver:hover { background: var(--celeste-deep); }
@keyframes tarot-volver-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 560px) {
  .tarot-volver { font-size: .84rem; padding: 9px 16px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-volver { animation: none; }
}

.tarot-card { perspective: 1000px; scroll-margin-top: 84px; }
/* Layout HORIZONTAL: cara (imagen/placeholder) a la izquierda, contenido a la derecha */
.tarot-card .inner {
  background: linear-gradient(160deg, var(--plum), var(--celeste-night));
  color: #fff; border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: row; align-items: flex-start; gap: 22px;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.2);
}
.tarot-face { flex: 0 0 168px; }
.tarot-face.invertida .tarot-face-img,
.tarot-face.invertida .tarot-face-ph { transform: rotate(180deg); }
.tarot-face-img {
  width: 168px; border-radius: 10px; display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.tarot-face-ph {
  width: 168px; aspect-ratio: 3 / 5; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 14px;
  background:
    radial-gradient(circle at 50% 30%, rgba(224,164,88,.25), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 7px, transparent 7px 14px),
    linear-gradient(160deg, #3a2f4a, #2c4152);
  border: 1px solid rgba(251,233,207,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.tarot-face-ph .ph-glyph { font-size: 1.6rem; color: rgba(251,233,207,.7); }
.tarot-face-ph .ph-name { font-family: var(--serif); font-size: 1.15rem; color: #FFF6EA; line-height: 1.2; }
.tarot-face-ph .ph-deck { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #FFF6EA; }
.tarot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 560px) {
  .tarot-card .inner { flex-direction: column; align-items: center; }
  .tarot-body { width: 100%; }
  .tarot-card .kw-chips, .tarot-card .corr-row { justify-content: center; }
}
.tarot-card .pos-name { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #DAD7E2; }
.tarot-card .card-name { font-family: var(--serif); font-size: 1.6rem; margin: 4px 0 2px; }
.tarot-card .reversed-tag { font-size: .78rem; color: #FBC772; font-weight: 700; }
.tarot-card .cita-jodorowsky {
  font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.5;
  color: #FBE9CF; margin: 12px 0 4px; padding: 6px 0;
}
.tarot-card .cita-jodorowsky .cita-autor {
  display: block; font-size: .72rem; font-style: normal; font-family: var(--sans);
  letter-spacing: .04em; color: #D8D0C6; margin-top: 6px;
}
.tarot-card .kw-chips {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 10px 0 4px;
}
.tarot-card .kw-chip {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #FBE9CF;
  border: 1px solid rgba(255,255,255,.18);
}
.tarot-card .meaning { margin-top: 8px; font-size: .95rem; line-height: 1.6; }
.tarot-card .kw-chips { justify-content: flex-start; }
.tarot-card .corr-row { justify-content: flex-start; }
.tarot-card .corr-dignidad, .tarot-card .corr-cruce { text-align: left; }
.tarot-card .corr-block {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.tarot-card .corr-row {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
  font-size: .74rem; color: #FBE9CF;
}
.tarot-card .corr-item b {
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: .64rem; color: #D8D0C6; margin-right: 3px;
}
.tarot-card .corr-dignidad {
  margin: 8px 0 0; font-size: .74rem; font-weight: 600; text-align: center;
}
.tarot-card .corr-dignidad.dig-fortalecida { color: #A4DE9E; }
.tarot-card .corr-dignidad.dig-debilitada { color: #FEC3A8; }
.tarot-card .corr-cruce {
  margin: 8px 0 0; font-size: .78rem; font-weight: 700; text-align: center;
  color: #FBE9CF; background: rgba(224,164,88,.22);
  border-radius: 8px; padding: 6px 10px;
}

/* ── Experiencia de mazo interactivo ─────────────────────────────────── */
.tarot-experiencia { margin-top: 20px; }

.tarot-prompt {
  text-align: center; margin: 4px auto 20px; max-width: 560px;
  padding: 11px 18px; border-radius: 12px;
  background: var(--cream-deep); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .95rem;
}
.tarot-prompt strong { color: var(--terracotta); }

/* Mazo de 78 cartas tendido en abanico (superpuestas sobre la mesa) */
.tarot-fan-78 {
  position: relative; width: 100%; margin: 0 auto 2px;
  /* Ajustado al contenido: los reversos miden 116 px y arrancan como mucho a
     26. El hover eleva la carta por encima del borde y el desbordamiento se ve
     igual, así que no hace falta reservar alto para él. */
  height: 150px; transition: opacity .5s ease; scroll-margin-top: 84px;
  /* ⚠️ Crea un contexto de apilamiento, y por eso está aquí.
     Los reversos son `position:absolute` con z-index de 0 a 77, y el hover los
     sube a 200. Sin este `z-index`, esos valores competirían en la raíz contra
     la cabecera (z-index 20) y el mazo se dibujaría por encima del menú
     desplegado. Con el contexto,
     los 78 se ordenan entre ellos y el conjunto vale 0, debajo de todo el
     andamiaje del sitio. */
  z-index: 0;
}
.tarot-fan-78.terminado { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.tarot-back78 {
  position: absolute; top: 0;
  width: 70px; height: 116px; padding: 0; cursor: pointer;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 50% 30%, rgba(224,164,88,.32), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, var(--plum), var(--celeste-deep));
  box-shadow: -3px 4px 10px rgba(46,42,36,.28);
  display: grid; place-items: center;
  transform-origin: bottom center;
  transform: rotate(var(--ang, 0deg));
  transition: transform .18s ease, box-shadow .18s ease, opacity .45s ease;
}
/* Durante el barajado, los reversos se deslizan (left/top) al abrirse o
   contraerse el abanico. Fuera de ese momento, left/top no transicionan
   (así el hover y el reparto por resize son instantáneos). */
.tarot-fan-78.barajando .tarot-back78 {
  transition: left .58s cubic-bezier(.22,.61,.36,1),
              top .58s cubic-bezier(.22,.61,.36,1),
              transform .58s cubic-bezier(.22,.61,.36,1),
              box-shadow .18s ease, opacity .45s ease;
}
.tarot-back78-sello { color: rgba(251,233,207,.6); font-size: 1.1rem; }
.tarot-back78.hover:not(:disabled) {
  transform: rotate(0deg) translateY(-34px) scale(1.08);
  box-shadow: 0 16px 30px rgba(46,42,36,.4);
}
.tarot-back78:disabled { cursor: default; }

/* Tomar la carta y bajarla a la mesa: sin darle la vuelta.
   ────────────────────────────────────────────────────────────────────────
   La carta viaja tapada a la mesa y se descubre al final, así que este gesto
   NO puede ser un volteo: es levantar, llevar abajo y soltar. La carta
   reaparece boca abajo en su hueco (`.tablero-carta .boca-abajo`), que es
   donde termina el movimiento. */
.tarot-back78.flipping { animation: tarot-a-la-mesa .42s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes tarot-a-la-mesa {
  0%   { transform: rotate(0deg) translateY(-34px) scale(1.08); opacity: 1; }
  35%  { transform: rotate(0deg) translateY(-46px) scale(1.10); opacity: 1; }
  100% { transform: rotate(0deg) translateY(26px) scale(.86); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-back78.flipping { animation: none; opacity: 0; }
}
.tarot-back78.elegida { opacity: 0; pointer-events: none; }

/* Animación de entrada de cada interpretación. */
.tarot-card.entrando .inner { animation: tarot-carta-in .55s ease both; }
@keyframes tarot-carta-in {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wheel-wrap { display: grid; place-items: center; }
svg.wheel { max-width: 100%; height: auto; }

footer.site-footer { margin-top: 70px; padding: 30px 0; border-top: 1px solid var(--line); color: var(--ink-soft); text-align: center; font-size: .9rem; }

.alert { background: #F6E3DC; color: var(--terracotta-deep); border: 1px solid #E8C3B5; padding: 14px 18px; border-radius: var(--radius-sm); }

.section { padding: 40px 0; }
.divider-stars { text-align: center; color: var(--ochre); letter-spacing: .5em; margin: 30px 0; }

/* ──────────────────────────────────────────────────────────────
   Carta natal: diseño enriquecido
   ────────────────────────────────────────────────────────────── */

/* Banner / cabecera del resultado */
.natal-hero {
  text-align: center;
  padding: 28px 24px 24px;
  margin: 28px 0 0;
  background: linear-gradient(135deg, rgba(196,99,60,.07), rgba(91,75,110,.07));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.natal-name {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.natal-meta { color: var(--ink-soft); font-size: .95rem; margin-bottom: 16px; }
.natal-summary {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  font-size: 1rem; font-weight: 600;
}
.nsm-item { display: flex; align-items: center; gap: 6px; }
.nsm-glyph { font-size: 1.3rem; line-height: 1; }
.nsm-sep { color: var(--line); font-size: 1.2rem; }

/* Trío solar: Sol · Luna · Ascendente */
.trio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.trio-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.trio-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.trio-label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft);
}
.trio-elem {
  font-size: .75rem; font-weight: 700; color: var(--tc, var(--terracotta));
  background: rgba(0,0,0,.04); padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .08em;
}
.trio-glyph {
  font-size: 2.8rem; line-height: 1; text-align: center;
  margin-bottom: 4px;
}
.trio-sign {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); text-align: center; margin-bottom: 14px;
}
.trio-text { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.trio-casa {
  font-size: .85rem; color: var(--ink-soft); line-height: 1.55;
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
}
.trio-casa strong { color: var(--tc, var(--terracotta)); }

/* Rueda zodiacal */
.natal-wheel-wrap {
  margin: 28px auto 0;
  max-width: 500px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  text-align: center;
}
.natal-wheel-label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 12px;
}

/* Cabeceras de sección */
.natal-section-head { margin: 40px 0 16px; }
.natal-section-head h2 { margin: 0 0 4px; }

.planet-group-label {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* Grid de planetas */
.planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
/* Flujo horizontal de los cuerpos de la carta: 3 por fila en escritorio. */
.cuerpos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.cuerpos-grid .planet-card { height: 100%; }
.planet-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.planet-card-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.planet-card-glyph {
  font-size: 1.9rem; line-height: 1; flex-shrink: 0; margin-top: 2px;
}
.planet-card-info {
  display: flex; flex-direction: column; gap: 3px;
}
.planet-card-name {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.planet-card-pos {
  font-size: .8rem; color: var(--ink-soft); font-weight: 600;
}
.planet-card-text {
  font-size: .88rem; color: var(--ink-soft); line-height: 1.65;
  margin: 0; padding-top: 8px; border-top: 1px dashed var(--line);
}

/* Aspectos */
.aspect-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.aspect-row:last-child { border-bottom: none; }
.aspect-row-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.aspect-planets {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink);
  flex: 1;
}
.aspect-orb { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.aspect-text { margin: 0; font-size: .87rem; line-height: 1.55; }

/* Compatibilidad: bloques Intimidad · Logística · Pasión */
.bloque-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.bloque-head h2 { color: var(--terracotta); }
.bloque-promedio {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
  color: var(--ink);
}
.bloque-promedio small { font-size: .9rem; color: var(--ink-soft); font-weight: 400; }

.dim-row { padding: 13px 0; }
.dim-row-sep { border-bottom: 1px dashed var(--line); }
.dim-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 7px;
}
.dim-nombre { font-weight: 700; font-size: .95rem; color: var(--ink); }
.dim-pregunta { font-size: .8rem; flex: 1; }
.dim-nivel { font-size: .78rem; font-weight: 700; }
.dim-bar {
  height: 8px; border-radius: 6px; background: var(--cream-deep);
  border: 1px solid var(--line); overflow: hidden; margin-bottom: 8px;
}
.dim-bar-fill { height: 100%; border-radius: 6px; }
.dim-bar-fill.dim-alta  { background: linear-gradient(90deg, var(--ochre), var(--terracotta)); }
.dim-bar-fill.dim-media { background: linear-gradient(90deg, var(--celeste), var(--celeste-deep)); }
.dim-bar-fill.dim-baja  { background: linear-gradient(90deg, #C9B39A, var(--ink-soft)); }
.dim-texto {
  margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft);
}

/* Serie por día: barras, fechas en el eje y el detalle del día escrito en la
   página. El texto del eje va en HTML y no dentro del SVG: el gráfico se
   estira a lo ancho para llenar el hueco, y eso deformaría cualquier letra
   que llevara dentro. Cada fecha se coloca por porcentaje sobre el mismo
   ancho, así que cae justo en el centro de su columna. */
.serie-grafico { width: 100%; height: 110px; display: block; }
.serie-barra { fill: var(--terracotta); }
.serie-zona { fill: transparent; cursor: crosshair; transition: fill .12s ease; }
.serie-zona:hover { fill: var(--cream-deep); }
.serie-eje {
  position: relative; height: 1.2em; margin-top: 5px;
  font-size: .72rem; color: var(--ink-soft);
}
.serie-eje span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.serie-detalle {
  margin: 10px 0 0; font-size: .92rem; font-weight: 600; color: var(--ink);
  min-height: 1.45em;  /* el bloque no cambia de alto al cambiar de día */
}
.serie-pie { margin: 3px 0 0; font-size: .76rem; }

/* Carta natal: cuerpos en filas anchas */
.cuerpo-row {
  display: flex; gap: 22px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(46,42,36,.04);
}
.cuerpo-row-nodo { background: linear-gradient(160deg, #fff, #F1ECF3); }
.cuerpo-izq {
  flex: 0 0 168px; display: flex; flex-direction: column; gap: 3px;
  padding-right: 20px; border-right: 1px dashed var(--line);
}
.cuerpo-glyph { font-size: 2rem; line-height: 1; }
.cuerpo-nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.cuerpo-pos { font-size: .82rem; color: var(--ink-soft); }
.cuerpo-info { flex: 1; min-width: 0; }
.cuerpo-nodo-badge {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--plum); padding: 2px 10px; border-radius: 20px; margin-bottom: 8px;
}
.cuerpo-rol { margin: 0 0 12px; font-size: .84rem; font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.cuerpo-sub {
  margin: 14px 0 4px; font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--terracotta);
}
.cuerpo-row-nodo .cuerpo-sub { color: var(--plum); }
.cuerpo-texto { margin: 0 0 6px; font-size: .9rem; line-height: 1.62; color: var(--ink); }

/* Tablero de control: etiqueta de estado + pista breve del área */
.tc-bloque { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 16px 0 6px; }
.tc-label { font-size: .72rem; letter-spacing: .02em; padding: 3px 11px; }
.tc-label-dialogo { background: #EAF1F4; color: var(--celeste-deep); }
.tc-hint { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.dialogos-wrap { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.dialogo-chip {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  text-decoration: none; padding: 5px 0;
}
.dialogo-titular { font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
.dialogo-chip:hover .dialogo-titular { color: var(--ink); text-decoration: underline; }

.aspect-titular {
  margin: 0 0 4px; font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink);
}
.aspect-row:target { background: #F1ECF3; }

@media (max-width: 640px) {
  .cuerpo-row { flex-direction: column; gap: 14px; }
  .cuerpo-izq {
    /* `flex: none` NO es decorativo. La regla de escritorio usa
       `flex: 0 0 168px` para fijar el ANCHO de la columna izquierda, pero aquí
       el contenedor pasa a `column` y esos 168 px pasarían a ser una ALTURA
       fija, con `flex-shrink: 0` impidiendo que se encoja: cada fila quedaría
       con más de 100 px de espacio vacío. */
    flex: none;
    flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap;
    border-right: none; border-bottom: 1px dashed var(--line);
    padding-right: 0; padding-bottom: 10px; width: 100%;
  }
  .cuerpo-glyph { font-size: 1.5rem; }
}

/* Carta natal: capacidades del ser + tipo psicológico (Jung) */
.dialogo-item { padding: 8px 0; border-top: 1px dashed var(--line); }
.dialogo-item:first-child { border-top: none; }
.dialogo-texto { margin: 6px 0 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft); }
.dim-porque { margin: 4px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; opacity: .85; }

/* Cuadrícula del cielo (referencia) */
.cielo-grid-wrap { overflow-x: auto; margin-top: 14px; }
@media (max-width: 560px) {
  /* La tabla no cabe entera en pantallas angostas; el scroll horizontal
     funciona pero no es obvio, así que se avisa con un hint sutil. */
  .cielo-grid-wrap::before {
    content: "→ desliza para ver todo";
    display: block; font-size: .72rem; color: var(--ink-soft);
    text-align: right; margin-bottom: 4px;
  }
}
.cielo-grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cielo-grid thead th {
  text-align: left; font-family: var(--sans); font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  padding: 8px 12px; border-bottom: 2px solid var(--line);
}
.cielo-grid td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cielo-grid tbody tr:hover td { background: var(--cream-deep); }
.cielo-grid .cg-cuerpo { font-weight: 700; color: var(--ink); }
.cielo-grid .cg-glyph { color: var(--terracotta); }
.cielo-grid .cg-elem { font-weight: 700; font-size: .82rem; }

/* .jung-card lleva el sello (definido arriba), no una barra lateral. */
.jung-balance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.jung-elem-top { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-bottom: 3px; }
.jung-bar { height: 8px; border-radius: 6px; background: var(--cream-deep); border: 1px solid var(--line); overflow: hidden; }
.jung-bar-fill { height: 100%; border-radius: 6px; }
@media (max-width: 520px) { .jung-balance { grid-template-columns: 1fr; } }

/* ── Tarot: el tablero de la lectura (geometría física de las cartas) ──── */
/* ⚠️ `[hidden]` NO basta por sí solo aquí.
   La regla `[hidden] { display: none }` viene del navegador y tiene la
   especificidad más baja que existe, así que `.lectura-tablero { display: grid }`
   le gana y la mesa «oculta» se seguiría dibujando vacía. */
.lectura-tablero[hidden] { display: none; }
.lectura-tablero {
  display: grid; gap: 12px 14px; justify-content: center;
  margin: 22px auto 8px; padding: 18px 14px;
  background: var(--cream-deep, #efe8da); border: 1px solid var(--line);
  border-radius: 14px; width: fit-content; max-width: 100%;
}
.tablero-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; align-self: center; }
.tablero-carta {
  width: var(--slot-w, 78px); aspect-ratio: 5 / 9;
  border-radius: 7px; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tablero-carta.vacia {
  border: 1.5px dashed var(--line); color: var(--line);
  background: rgba(255,255,255,.35); font-size: 1rem;
}
.tablero-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tablero-carta.invertida img { transform: rotate(180deg); }
/* ⚠️ `.puesta` y `.volteando` NO pueden convivir en la misma carta.
   Las dos escriben la propiedad `animation`, así que mientras `.volteando`
   está puesta gana ella (va después), pero al QUITARLA el valor vuelve a
   `tablero-pop` y el navegador lo entiende como una animación nueva y la
   REPITE, produciendo un parpadeo tras el giro.
   `tarot.js` quita `.puesta` antes de voltear; esto es el recordatorio. */
.tablero-carta.puesta { box-shadow: 0 4px 12px rgba(60,40,20,.22); animation: tablero-pop .35s ease; }

/* La carta elegida, tapada sobre la mesa.
   ────────────────────────────────────────────────────────────────────────
   Mientras las cartas están en este estado, `tarot.js` pide la lectura al
   servidor y precarga las imágenes, de modo que descubrirlas no tenga espera.
   Usa el mismo dorso que los reversos del abanico (`.tarot-back78`). */
.tablero-carta.boca-abajo {
  border: 1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 50% 30%, rgba(224,164,88,.32), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, var(--plum), var(--celeste-deep));
}
.tablero-sello { color: rgba(251,233,207,.6); font-size: .9rem; }

/* El volteo: media vuelta, se cambia el contenido en el punto ciego (a los
   180 ms, cuando la carta está de canto) y se completa la vuelta. */
.tablero-carta.volteando { animation: tablero-voltear .36s ease; }
@keyframes tablero-voltear {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tablero-carta.volteando { animation: none; }
  .tablero-carta.puesta { animation: none; }
}

/* El contador «2 de 3» del prompt, para saber cuántas cartas faltan sin
   tener que contar los huecos de la mesa. */
.tarot-prompt-cuenta {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--cream-deep); color: var(--ink-soft);
  font-size: .78rem; letter-spacing: .02em;
}
@keyframes tablero-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tablero-ph { font-size: .6rem; text-align: center; padding: 4px; color: var(--ink-soft); background: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* La etiqueta no puede ser más estrecha que su carta: si lo es, «El consejo
   (éter)» parte en tres líneas al lado de una carta ancha. Sigue a `--slot-w`
   y se le deja un poco de holgura. */
.tablero-label {
  font-size: clamp(.66rem, .5rem + .35vw, .8rem);
  color: var(--ink-soft); text-align: center;
  line-height: 1.28; max-width: calc(var(--slot-w, 78px) + 22px);
}
@media (max-width: 560px) {
  .lectura-tablero { gap: 10px 8px; padding: 12px 8px; }
}

/* ── Sinastría: la mirada primero (elementos · Venus · nodos) ─────────── */
.afin-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 14px; }
@media (max-width: 560px) { .afin-balances { grid-template-columns: 1fr; } }

/* ── Nav: grupo Astrología (desplegable) ───────────────────────────────── */
.nav-grupo { position: relative; display: inline-block; }
/* Iguala el botón desplegable a los demás enlaces del nav (.nav a): un
   <button> no hereda el peso/color de los <a>, y quedaba más fino (400 vs 600),
   dando la impresión de "otra fuente". */
.nav-grupo-btn {
  border: none; background: none; font-family: inherit;
  font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; padding: 0; white-space: nowrap;
}
.nav-grupo-btn:hover { color: var(--terracotta); }
.nav-caret { font-size: .7em; opacity: .6; }
/* El wrapper es transparente y arranca PEGADO al botón: su padding-top de
   10px es el "puente" invisible que mantiene el hover mientras el cursor
   baja hacia el panel (antes había un hueco y el submenú se cerraba). */
.nav-grupo-menu {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); padding-top: 10px; z-index: 300;
}
.nav-grupo-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(60,40,20,.14);
  padding: 8px 0; min-width: 180px;
}
.nav-grupo-panel a { display: block; padding: 9px 18px; white-space: nowrap; }
.nav-grupo-panel a:hover { background: var(--cream-deep, #efe8da); }
.nav-grupo.abierto .nav-grupo-menu { display: block; }
@media (hover: hover) and (min-width: 761px) {
  .nav-grupo:hover .nav-grupo-menu,
  .nav-grupo:focus-within .nav-grupo-menu { display: block; }
}
/* En el menú móvil desplegado, el grupo se muestra inline */
.nav.open .nav-grupo { display: block; }
.nav.open .nav-grupo-menu { display: block; position: static; transform: none; padding: 0; }
.nav.open .nav-grupo-panel {
  box-shadow: none; border: none; padding: 0 0 0 16px; background: none;
}
.nav.open .nav-grupo-btn { padding: 10px 0; font-size: 1rem; }

/* ── Leyenda de la rueda ───────────────────────────────────────────────── */
.rueda-leyenda { margin-top: 10px; font-size: .85rem; }
.rueda-leyenda summary { cursor: pointer; color: var(--ink-soft); text-align: center; }
.leyenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 22px; margin-top: 12px; text-align: left; }
.leyenda-titulo { font-weight: 700; color: var(--terracotta); margin: 0 0 5px; font-size: .82rem; }
.leyenda-item { margin: 0 0 5px; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.leyenda-linea { display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

/* La pregunta guía de la lectura: prominente, no una nota al pie. */
.lectura-pregunta-guia {
  margin: 8px auto 0; max-width: 620px;
  font-family: var(--serif); font-size: 1.35rem; font-style: italic;
  color: var(--terracotta-deep); line-height: 1.4;
}
#lectura-titulo { scroll-margin-top: 84px; }

/* La invitación a leer sobre el tarot, al final: visible, no una nota gris. */
.tarot-intro-final-summary {
  cursor: pointer; display: block; text-align: center;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--terracotta-deep);
}

.alma{font-family:var(--serif);font-size:1.02rem;font-style:italic;
  line-height:1.5;color:#fff;margin:.55rem 0 0;}
.pregunta-reflexion {
  margin: 12px 0 0; padding: 10px 14px; font-size: .92rem; line-height: 1.55;
  background: var(--cream-deep, #efe8da); border-radius: 8px; color: var(--ink);
}
.pregunta-reflexion em { color: var(--terracotta-deep); }
/* ── Tarot: CTA destacado "Tus cartas de nacimiento" (al inicio de /tarot) ── */
.tn-cta {
  display: flex; align-items: center; gap: 18px;
  max-width: 720px; margin: 20px auto 0; padding: 20px 24px;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tn-cta-icon {
  flex: none; width: 1.9em; height: 1.9em; color: var(--terracotta);
  display: grid; place-items: center;
}
.tn-cta-icon svg { width: 1.6em; height: 1.6em; }
.tn-cta-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tn-cta-titulo { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.tn-cta-desc { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.tn-cta-flecha { flex: none; font-size: 1.3rem; color: var(--terracotta); }
@media (max-width: 560px) {
  .tn-cta { gap: 12px; padding: 16px 18px; }
  .tn-cta-flecha { display: none; }
}

/* ── Home: bloque de presentación (foto + texto) ───────────────────────── */
.maria-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
.maria-foto {
  width: 100%; height: auto; border-radius: 14px; display: block;
  box-shadow: 0 8px 24px rgba(60,40,20,.18);
}
@media (max-width: 700px) {
  .maria-grid { grid-template-columns: 1fr; text-align: center; }
  .maria-foto { max-width: 280px; margin: 0 auto; }
}

/* ── Mi cosmos ──────────────────────────────────────────────────────────────
   Página de texto corrido, sin gráficos: no usa .dim-bar ni .score-ring. */
.cosmos-esencia { padding: 22px 26px; }
.cosmos-parrafo { margin: 0 0 14px; line-height: 1.72; font-size: 1rem; }
.cosmos-parrafo:last-child { margin-bottom: 0; }
.cosmos-nota-hora {
  max-width: 720px; margin: 10px auto 0; font-size: .82rem; line-height: 1.55;
  color: var(--ink-soft); text-align: center;
}

/* El arcano del año: tarjeta horizontal, imagen a la izquierda. */
.cosmos-arcano { display: flex; gap: 20px; align-items: flex-start; padding: 22px 26px; }
.cosmos-arcano-img {
  flex: 0 0 110px; width: 110px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(46, 42, 36, .16); background: var(--plum);
}
.cosmos-arcano-img img { width: 100%; display: block; }
.cosmos-arcano-ph {
  aspect-ratio: 2/3.4; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .75); font-size: 1.8rem;
}
.cosmos-arcano-nombre {
  font-family: var(--serif); font-size: 1.7rem; line-height: 1.05;
  color: var(--ink); margin: 2px 0 10px;
}

/* Desafío | Medicina: dos cajas hermanas, una al lado de la otra. */
.cosmos-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cosmos-dupla-eyebrow {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 800;
}
.cosmos-dupla-titulo {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.25;
  margin: 4px 0 10px; color: var(--ink);
}

.cosmos-alquimia { padding: 22px 26px; }
.cosmos-carta-dia {
  margin-top: 18px; padding: 18px 20px; border-radius: 10px; color: #fff;
  background: linear-gradient(155deg, var(--plum), var(--celeste-night));
}
.cosmos-carta-dia h3 { font-family: var(--serif); font-size: 1.35rem; color: #fff; }
.cosmos-carta-puente { margin: 0; font-size: .84rem; color: #FBE9CF; }
/* La carta del día se VE. Misma disposición que el arcano del año (imagen a la
   izquierda, texto a la derecha) pero más pequeña: aquí la protagonista es la
   síntesis, y la carta la acompaña. */
.cosmos-carta-cuerpo { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
/* Ancho relativo, no clavado: a 375 px la carta fija dejaba la columna de texto
   en 159 px, unos veinte caracteres por línea. Encogiéndola un poco el párrafo
   respira sin que la carta deje de leerse. */
.cosmos-carta-img {
  flex: 0 0 clamp(70px, 21vw, 92px); width: clamp(70px, 21vw, 92px);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(46, 42, 36, .3); background: rgba(255, 255, 255, .12);
}
.cosmos-carta-img img { width: 100%; display: block; }
/* Invertida se dibuja invertida: la reversión ES la mitad de lo que dice el
   texto de al lado, así que enseñarla derecha contradice lo que se lee. */
.cosmos-carta-img.invertida img { transform: rotate(180deg); }
.cosmos-carta-ph {
  aspect-ratio: 2/3.4; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .75); font-size: 1.6rem;
}
.cosmos-carta-inv { font-size: .8rem; color: #DAD7E2; font-weight: 400; }
.cosmos-carta-link {
  display: inline-block; margin-top: 12px; font-size: .85rem;
  color: #FBE9CF; text-decoration: underline;
}
.cosmos-carta-link:hover { color: #fff; }

/* La brújula: tres acciones numeradas. */
.cosmos-brujula { display: grid; gap: 12px; }
.cosmos-brujula-item { display: flex; gap: 16px; align-items: flex-start; }
.cosmos-brujula-num {
  flex: none; font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  color: var(--terracotta); min-width: 1.6em; text-align: center;
}
.cosmos-brujula-titular {
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink); line-height: 1.2;
}

@media (max-width: 760px) {
  .cosmos-dupla { grid-template-columns: 1fr; }
  .cosmos-arcano { flex-direction: column; gap: 14px; }
  .cosmos-arcano-img { flex: none; width: 96px; align-self: center; }
  .cosmos-esencia, .cosmos-arcano, .cosmos-alquimia { padding: 18px 18px; }
}

/* Casilla "No sé mi hora": sin hora real el Ascendente y las casas son
   inventados, y Mi Cosmos deja de apoyarse en ellos. */
/* ── Buscar la ciudad escribiendo ───────────────────────────────────────
   Sustituye al `<select>` nativo con hasta 6.021 ciudades dentro, que en el
   móvil no deja buscar: había que arrastrar. Ver `_selector_lugar.html`. */
.campo-ciudad { position: relative; }

.ciudad-sugerencias {
  list-style: none; margin: 4px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px rgba(92,74,50,.16);
  /* Tope de alto y scroll propio: con cuarenta sugerencias, sin esto la lista
     empuja el resto del formulario fuera de la pantalla. */
  max-height: 42vh; overflow-y: auto;
  /* En iOS, una lista que no acepta el desplazamiento por inercia se siente
     rota comparada con el resto del sistema. */
  -webkit-overflow-scrolling: touch;
}
.ciudad-sugerencias[hidden] { display: none; }
.ciudad-sugerencias li {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: .95rem; line-height: 1.3;
}
.ciudad-sugerencias li:hover,
.ciudad-sugerencias li.marcada { background: var(--cream-deep); }

/* El departamento/estado, en segunda línea y en gris: con once Springfield en
   Estados Unidos y dos San Francisco en Colombia, es lo ÚNICO que distingue una
   sugerencia de la de al lado, así que tiene que verse siempre, pero como
   dato, no como parte del nombre de la ciudad. */
.ciudad-region {
  display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 1px;
}

.ciudad-nota { margin: 6px 0 0; font-size: .82rem; color: var(--ink-soft); }
.ciudad-nota[hidden] { display: none; }

/* Mientras se cargan las ciudades el campo se deshabilita; que se note. */
.inp-ciudad:disabled { opacity: .6; cursor: not-allowed; }

/* ── Fecha y hora de nacimiento, en partes ──────────────────────────────
   Sustituyen a `<input type="date">` y `<input type="time">`, que en el móvil
   eran el peor momento del sitio: para una fecha de 1983 el calendario obliga a
   retroceder más de quinientos meses, y la hora salía en formato de 24 h a
   secas, quien nació a las cuatro de la tarde escribía «4:20» y guardaba las
   cuatro de la madrugada. Ver `_campo_fecha.html` y `_campo_hora.html`.

   `min-width: 0` en los hijos: sin él, un `<select>` o un `<input>` dentro de
   un flex NO se encoge por debajo de su tamaño intrínseco y la fila desborda
   en pantallas estrechas, que es justo donde esto tiene que funcionar. */
.fecha-partes,
.hora-partes { display: flex; gap: 8px; align-items: center; }
.fecha-partes > *,
.hora-partes > * { min-width: 0; }

/* El ancho se ata a los DÍGITOS que tienen que caber, no a un `rem` a ojo: con
   una medida fija, el padding lateral del campo recorta el último dígito.
   El padding se reduce solo en estos tres: en un campo de dos o cuatro
   dígitos, 14 px por lado ocupan casi todo el campo. */
/* El ancho, en `em` y NO en `ch`.
   ────────────────────────────────────────────────────────────────────────
   Los anchos van en `em` y NO en `ch`: pese a su nombre, `ch` se resuelve en
   esta tipografía a bastante menos de lo que ocupa un dígito, y el año quedaba
   cortado. 0,6em por dígito, con holgura para el cursor. La familia ya tiene
   los dígitos al mismo ancho, así que `font-variant-numeric: tabular-nums` no
   aporta nada aquí. */
/* `.field .x` y no `.x`: el sitio ya trae `.field input, .field select
   { padding: … 14px }`, con especificidad (0,1,1), y una clase suelta (0,1,0)
   no le gana: el padding heredado seguiría cortando el contenido. */
.field .fecha-dia,
.field .fecha-anio,
.field .hora-min { padding-left: 8px; padding-right: 8px; }
.field .fecha-dia  { flex: 0 0 calc(1.2em + 26px); }
.field .fecha-mes  { flex: 1 1 auto; }
.field .fecha-anio { flex: 0 0 calc(2.4em + 26px); }

.field .hora-h   { flex: 1 1 auto; }
.field .hora-min { flex: 0 0 calc(1.2em + 26px); }
.hora-sep { color: var(--ink-soft); font-weight: 700; }

/* Los números salen a la derecha por defecto y con la flechitas del navegador
   encima; centrados y sin ellas se leen como lo que son: dos o cuatro dígitos. */
.fecha-dia, .fecha-anio, .hora-min { text-align: center; }
.fecha-dia::-webkit-outer-spin-button, .fecha-dia::-webkit-inner-spin-button,
.fecha-anio::-webkit-outer-spin-button, .fecha-anio::-webkit-inner-spin-button,
.hora-min::-webkit-outer-spin-button, .hora-min::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.fecha-dia, .fecha-anio, .hora-min { -moz-appearance: textfield; appearance: textfield; }

@media (max-width: 560px) {
  /* En móvil el desplegable del mes es lo que más se aprieta; se le da el
     espacio que sobra y a los números lo justo para sus dígitos. */
  .fecha-partes, .hora-partes { gap: 6px; }
}

.campo-sin-hora {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .8rem; color: var(--ink-soft); font-weight: 400; cursor: pointer;
}
.campo-sin-hora input { width: auto; margin: 0; }
#campo-hora[disabled] { opacity: .45; }

/* Aviso de carta sin hora: los signos son firmes, las casas no. */
.aviso-sin-hora {
  max-width: 720px; margin: 18px auto 0; padding: 16px 20px;
  font-size: .9rem; line-height: 1.6; --sello-color: var(--ochre);
}
.marca-aprox {
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; white-space: nowrap;
}

/* Aviso de autorización (Ley 1581): va pegado al botón que envía los datos.
   Subordinado a propósito: tiene que leerse antes de pulsar, no competir con el
   formulario. Del tamaño de una nota al pie, pero con contraste suficiente para
   que no parezca letra pequeña escondida: que es justo lo contrario de lo que
   una autorización informada necesita. */
/* Aviso de navegador dentro de una aplicacion. Se muestra sobre el contenido,
   una vez por pagina, y se puede cerrar. */
.aviso-app[hidden]{ display:none; }
.aviso-app{
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:62ch;
  margin:14px auto 4px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--cream-deep);
  font-size:.8rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.aviso-app-texto{ flex:1; }
.aviso-app p{ margin:0; }
.aviso-app strong{ color:var(--ink); font-weight:600; }
.aviso-app-accion{
  display:inline-block;
  margin-top:7px;
  color:var(--terracotta);
  font-weight:600;
  text-decoration:underline;
}
.aviso-app-cerrar{
  flex:none;
  padding:0 4px;
  border:0;
  background:none;
  color:var(--ink-soft);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}
.aviso-app-cerrar:hover{ color:var(--ink); }

.aviso-autorizacion{
  max-width:52ch;
  margin:16px auto 12px;
  text-align:center;
  font-size:.83rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.aviso-autorizacion a{ color:var(--terracotta); text-decoration:underline; }

/* ── Elegir a quién se le calcula ────────────────────────────────────────
   La lista de personas guardadas en las páginas de cálculo (`_elegir_persona.html`).

   Sustituye al formulario precargado, que era un editor accidental: mostraba
   los datos de nacimiento de la persona activa en campos editables y los volvía
   a guardar al enviarlos. Aquí no hay ningún dato en un campo: el nombre y la
   fecha son la ETIQUETA de la opción, para saber a quién se elige.

   La fila entera es el área tocable (el `<label>` envuelve al radio), y no solo
   el círculo de 13 px: esto se usa sobre todo desde el teléfono. */
.elegir-personas { display: flex; flex-direction: column; gap: 8px; }

.persona-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.persona-opcion:hover { border-color: var(--celeste); }
/* `:has()` y no una clase puesta por JS: el estado seleccionado lo sabe el
   propio radio, así que pintarlo desde el DOM sería duplicar esa verdad, y
   dejaría la página sin resaltado con JS desactivado. */
.persona-opcion:has(input:checked) {
  border-color: var(--terracotta);
  background: var(--cream-deep);
}
/* El foco del teclado viaja al radio, que es pequeño y va dentro: sin esto, no
   se ve dónde está uno al tabular. */
.persona-opcion:has(input:focus-visible) { outline: 2px solid var(--celeste-deep); outline-offset: 2px; }

.persona-opcion input[type="radio"] { flex: 0 0 auto; margin: 0; accent-color: var(--terracotta); }
.persona-ficha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.persona-nombre { font-weight: 700; color: var(--ink); }
/* El lugar puede ser largo («Villavicencio, Meta, Colombia»): que parta de
   línea antes que ensanchar la tarjeta. */
.persona-datos { font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }