/* Luna nueva · Método Infinito. Misma estética que la landing de la carta astral (v3, bordó y oro, 10/10/2026):
   noche bordó (#2a0c0d → #140506), bordó #7a2222 / #952a2a, oro en degradé, crema cálido y rosado.
   Tipografías: Marcellus (títulos y antetítulos), Assistant (texto), Cormorant Garamond itálica (palabras destacadas). */
:root {
  --papel: #fffdf8; --crema: #f8f4f0; --rosa: #fdf1f1; --tinta: #1a1212; --suave: #55504c; --titulo: #3a1a14;
  --bordo: #7a2222; --bordo2: #952a2a; --noche1: #2a0c0d; --noche2: #140506; --vino: #4a1618;
  --oro: #b8843a; --oro2: #e9c97f; --oro-texto: #8a5a1f; --oro-palido: #f0dcc0; --linea: #ece3da; --sobre-noche: #f6e7c6;
  --orog: linear-gradient(135deg, #fff3cf 0%, #e9c97f 30%, #b8843a 62%, #f3dc9e 100%);
  --orov: linear-gradient(180deg, #fff6d8, #e9c97f 55%, #c99a45);
  --noche: radial-gradient(120% 90% at 50% 0%, #5a1b1d 0%, #2a0c0d 62%, #140506 100%);
  --f-tit: Marcellus, Georgia, serif; --f-ante: Marcellus, Georgia, serif; --f-txt: Assistant, system-ui, sans-serif;
  --f-cur: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
/* fondo: noche bordó con estrellas en toda la página (pedido de Rama 10/10 18:40: nada de crema afuera de la tarjeta).
   Va en un pseudo fijo y no con background-attachment: fixed, que Safari de iPhone ignora. */
html { background: #140506; }
body { position: relative; margin: 0; min-height: 100vh; background: transparent; color: var(--tinta); font: 18px/1.65 var(--f-txt); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
p { margin: 0; }
b, strong { color: var(--bordo); font-weight: 800; }
.hide { display: none !important; }

/* ---------- estrellas de oro sobre la noche, fijas detrás de toda la página ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image:
  radial-gradient(1.3px 1.3px at 8% 12%, #fff3cf 50%, transparent 51%), radial-gradient(1px 1px at 23% 30%, #fff 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 78% 9%, #e9c97f 50%, transparent 51%), radial-gradient(1px 1px at 91% 28%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 58% 18%, #fff3cf 50%, transparent 51%), radial-gradient(1px 1px at 38% 6%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 6% 62%, #e9c97f 50%, transparent 51%), radial-gradient(1px 1px at 95% 70%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 52%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 16% 88%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 86% 92%, #e9c97f 50%, transparent 51%), radial-gradient(1px 1px at 48% 80%, #fff 50%, transparent 51%),
  radial-gradient(120% 70% at 50% 0%, #5a1b1d 0%, #2a0c0d 55%, #140506 100%); background-color: #140506; }
body > * { position: relative; z-index: 1; }
.tapa { color: var(--sobre-noche); text-align: center; padding: 34px 18px 58px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font: 400 12.5px/1 var(--f-ante); letter-spacing: .32em; color: var(--oro2); }
.marca span { margin: 0; font-size: 15px; letter-spacing: 0; }
.logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.luna { width: 88px; height: 88px; border-radius: 50%; margin: 22px auto 18px; position: relative; border: 2px solid transparent;
  background: radial-gradient(circle at 36% 30%, #6a2023, #2a0c0d 68%, #140506) padding-box, var(--orog) border-box;
  box-shadow: 0 0 46px rgba(233, 201, 127, .3), inset -14px -10px 26px rgba(0, 0, 0, .55); }
.luna::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1px solid rgba(233, 201, 127, .35); }
.ante { font: 400 12px/1.4 var(--f-ante); letter-spacing: .24em; text-transform: uppercase; color: var(--oro2); }
.tapa .ante { display: inline-block; background: var(--orog); color: #3a1408; font: 800 11.5px/1.4 var(--f-txt); letter-spacing: .16em; border-radius: 99px; padding: 6px 15px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 248, 225, .7); }
.tapa h1 { margin: 16px auto 0; max-width: 560px; font: 400 clamp(32px, 8.6vw, 44px)/1.12 var(--f-tit); color: #fff3cf; text-wrap: balance; }
.tapa h1 em, .cur { font-family: var(--f-cur); font-style: italic; font-weight: 700; background: var(--orov); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; font-size: 1.08em; }
.tapa .sub { margin: 14px auto 0; max-width: 470px; color: #f0dcd0; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.chips span { border: 1px solid rgba(233, 201, 127, .55); border-radius: 99px; padding: 4px 13px; font: 800 11.5px/1.6 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; color: #fff3cf; background: rgba(20, 5, 6, .35); }

/* ---------- hoja (tarjeta crema con marco de oro, como las tarjetas de la landing) ---------- */
.hoja { position: relative; max-width: 640px; margin: -30px auto 0; padding: 32px 24px 38px; border-radius: 22px; border: 1.5px solid transparent; z-index: 2;
  background: linear-gradient(180deg, #fffdf8, #fff9ef) padding-box, var(--orog) border-box; box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .75), 0 0 40px -10px rgba(233, 201, 127, .18); }
@media (max-width: 680px) { .hoja { margin: -30px 12px 0; padding: 28px 18px 34px; } }
.seccion { margin-top: 36px; }
.seccion:first-child { margin-top: 0; }
.seccion > .ante { display: table; margin: 0 auto; border: 1px solid #f0d9ae; background: #fff4e2; color: var(--bordo2); border-radius: 99px; padding: 5px 15px; font: 800 11.5px/1.5 var(--f-txt); letter-spacing: .16em; text-align: center; }
.seccion h2 { margin: 12px 0 14px; font: 400 29px/1.18 var(--f-tit); color: var(--titulo); text-align: center; text-wrap: balance; }
.seccion p + p { margin-top: 12px; }
.orn { display: flex; align-items: center; gap: 12px; margin: 34px 0 0; color: var(--oro); font-size: 13px; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--oro2), transparent); }
.saludo { font: 400 25px/1.3 var(--f-tit); color: var(--bordo); margin-bottom: 10px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
@media (max-width: 440px) { .dos { grid-template-columns: 1fr; } }
.mini { border: 1px solid #f0dcc0; border-radius: 14px; padding: 12px 14px; background: linear-gradient(160deg, #fff7ea, #fdf1f1); font-size: 16px; line-height: 1.5; }
.mini .ante { text-align: left; font: 800 10.5px/1.4 var(--f-txt); letter-spacing: .14em; color: var(--oro-texto); margin-bottom: 4px; }
ul.est { margin: 14px 0 0; padding: 0; list-style: none; }
ul.est li { position: relative; padding-left: 30px; margin: 11px 0; }
ul.est li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #3a1408; background: var(--orog); }
.chico { font-size: 15px; color: var(--suave); }
.nota { text-align: center; margin-top: 10px; font-family: var(--f-cur); font-style: italic; font-size: 19px; color: var(--bordo2); }
.aviso { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #ecd3a3; background: linear-gradient(180deg, #fffaf0, #fbf0dd); border-radius: 16px; padding: 14px 16px; margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.aviso span { color: var(--oro); font-size: 19px; line-height: 1.2; }

/* caja (tarjeta de noche bordó, como «Lo que casi nadie te muestra») */
.caja { margin-top: 18px; border-radius: 20px; overflow: hidden; color: var(--sobre-noche); background: radial-gradient(120% 90% at 50% 0%, #4a1618, #2a0c0d 70%);
  box-shadow: 0 0 0 1.5px #e9c97f, 0 18px 30px -20px rgba(42, 12, 13, .9); }
.caja .cab { color: #e9c97f; font: 400 12px/1.3 var(--f-ante); letter-spacing: .22em; text-transform: uppercase; padding: 16px 18px 0; }
.caja .cuerpo { padding: 8px 18px 18px; font-size: 16.5px; line-height: 1.6; color: #f0dcd0; }
.caja b, .caja strong { color: #fff3cf; }
/* preguntas para escribir, con renglones */
.preg { margin-top: 18px; }
.preg p { font: 400 20px/1.35 var(--f-tit); color: var(--titulo); }
.preg i { display: block; height: 30px; border-bottom: 1px solid #ecd3a3; }
.preg i + i { height: 26px; }
.decreto { margin-top: 18px; text-align: center; padding: 20px 16px; border-radius: 18px; font: italic 700 27px/1.3 var(--f-cur); color: var(--bordo);
  background: linear-gradient(180deg, #fffaf0, #fbf0dd); border: 1px solid #ecd3a3; box-shadow: 0 10px 24px -18px rgba(122, 84, 32, .6); }
/* calendario */
.fecha { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.fecha + .fecha { border-top: 1px solid var(--linea); }
.fecha .d { flex: none; width: 56px; text-align: center; border: 1.5px solid #e2c896; border-radius: 12px; padding: 7px 0 5px; font: 400 25px/1 var(--f-tit); color: var(--bordo); background: #fffaf0; }
.fecha .d small { display: block; font: 800 9.5px var(--f-txt); letter-spacing: .14em; color: var(--oro-texto); margin-top: 4px; text-transform: uppercase; }
.fecha.hoy .d { background: linear-gradient(180deg, #a83131, #7a2222); color: #fff3cf; border-color: #e9c97f; }
.fecha.hoy .d small { color: #f3d98f; }
.fecha p { font-size: 16.5px; line-height: 1.55; }
.rueda { display: block; margin: 4px auto 0; width: 100%; max-width: 310px; }

/* cierre */
.cierre { margin-top: 30px; text-align: center; }
.firma { font: 48px/1 "Pinyon Script", cursive; color: var(--oro-texto); margin-top: 14px; }
.firma-sub { font: 400 11px var(--f-ante); letter-spacing: .22em; color: var(--suave); text-transform: uppercase; margin-top: 6px; }
.avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block; margin: 18px auto 0; border: 2px solid transparent; background: var(--orog) border-box; }
.legal { text-align: center; font-size: 13px; color: #f0dcd0; opacity: .8; max-width: 640px; margin: 24px auto 0; padding: 0 16px 40px; }

/* llamado a la carta completa (bloque de noche bordó) */
.cta { position: relative; margin: 36px -4px 0; color: var(--sobre-noche); border-radius: 22px; padding: 30px 20px 26px; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(233, 201, 127, .22), rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #2a0c0d, #160607); box-shadow: 0 0 0 2.5px #e9c97f, 0 0 0 5px rgba(233, 201, 127, .22), 0 18px 30px -16px rgba(42, 12, 13, .9); }
.cta > * { position: relative; z-index: 1; }
.cta .ante { display: inline-block; background: var(--orog); color: #3a1408; font: 800 11.5px/1.4 var(--f-txt); letter-spacing: .14em; border-radius: 99px; padding: 6px 15px; }
.cta h2 { margin: 14px 0 12px; font: 400 29px/1.18 var(--f-tit); background: var(--orov); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta p { font-size: 16.5px; color: #f0dcd0; }
.cta b { color: #fff3cf; }
.cta .chico { color: #e9c97f; margin-top: 10px; }

/* botones: bordó con marco de oro, como la landing */
.btn { display: block; width: 100%; margin-top: 18px; text-align: center; text-decoration: none; cursor: pointer; font: 800 17px/1.2 var(--f-txt); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; border: 3px solid transparent; border-radius: 18px; padding: 18px 16px;
  background: linear-gradient(180deg, #a83131, #7a2222) padding-box, linear-gradient(135deg, #fff3cf, #e9c97f 30%, #a8752f 60%, #f6e2a8) border-box;
  box-shadow: 0 0 0 1px rgba(184, 132, 58, .55), 0 16px 30px -14px rgba(122, 34, 34, .9); transition: transform .15s; }
.btn:active { transform: scale(.98); }
.link { background: none; border: 0; color: var(--suave); font: 15px var(--f-txt); text-decoration: underline; cursor: pointer; margin: 10px auto 0; display: block; }

/* ---------- quiz ---------- */
.barra { height: 6px; background: #00000012; border-radius: 99px; overflow: hidden; margin: 0 0 22px; }
.barra i { display: block; height: 100%; width: 0; background: var(--orog); border-radius: 99px; transition: width .4s; }
.paso { display: none; flex-direction: column; gap: 14px; }
.paso.on { display: flex; animation: entra .35s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.paso .num { align-self: center; border: 1px solid #f0d9ae; background: #fff4e2; color: #8a5a00; border-radius: 99px; padding: 4px 14px; font: 800 11.5px var(--f-txt); letter-spacing: .18em; text-transform: uppercase; }
.pregunta { font: 400 30px/1.15 var(--f-tit); color: var(--titulo); text-align: center; text-wrap: balance; }
.ayuda { font-size: 16.5px; color: var(--suave); text-align: center; line-height: 1.5; }
.campo { width: 100%; font: 18px var(--f-txt); color: var(--tinta); background: #fbf6f0; border: 1.5px solid #ece3da; border-radius: 12px; padding: 14px 15px; outline: none; }
.campo:focus { border-color: var(--bordo2); background: #fff; box-shadow: 0 0 0 3px rgba(149, 42, 42, .12); }
.campo:disabled { opacity: .45; }
select.campo { appearance: none; -webkit-appearance: none; text-align: center; padding: 14px 8px; }
.tres { display: grid; grid-template-columns: 1fr 1.6fr 1.25fr; gap: 8px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--bordo); border: 1.5px solid #e2c896; background: #fffaf0; border-radius: 12px; padding: 11px 14px; }
.check input { width: 18px; height: 18px; accent-color: #7a2222; }
.err { color: var(--bordo2); font-size: 15px; font-weight: 700; text-align: center; min-height: 20px; margin-top: -4px; }
.sugs { display: flex; flex-direction: column; gap: 6px; }
.sug { all: unset; box-sizing: border-box; cursor: pointer; border: 1.5px solid #ece3da; border-radius: 12px; padding: 11px 14px; background: #fffdf8; color: var(--tinta); font: 16px var(--f-txt); }
.sug:hover, .sug:focus-visible { border-color: var(--bordo2); background: var(--rosa); }
.sug small { color: var(--suave); }
.elegido { text-align: center; color: var(--bordo); font-weight: 800; font-size: 16px; }
.marco { background: #fff; border: 1px solid #f0dcc0; border-radius: 14px; min-height: 200px; overflow: hidden; }
.resumen { font-size: 16px; color: var(--suave); text-align: center; line-height: 1.5; }
.rama { display: flex; gap: 14px; align-items: center; margin-top: 30px; padding: 16px; border-radius: 18px; border: 1.5px solid transparent;
  background: linear-gradient(180deg, #fffaf0, #fbefd9) padding-box, var(--orog) border-box; box-shadow: 0 8px 18px -12px rgba(122, 84, 32, .7); }
.rama img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid transparent; background: var(--orog) border-box; }
.rama p { font-size: 16px; line-height: 1.5; color: #3a2a24; }
.rama b { color: var(--oro-texto); font: 34px/1 "Pinyon Script", cursive; display: inline-block; margin-left: 4px; vertical-align: -6px; }
.cargando { text-align: center; padding: 60px 0; color: var(--suave); font-family: var(--f-cur); font-style: italic; font-size: 20px; }
.card { text-align: center; padding: 20px; }
.paso .btn { margin-top: 2px; }