/* Noctra — sistema de diseño. Astrología nocturna adulta. Un solo modo: oscuro. */
:root{
  --base:#05070F; --sup:#0A1128;
  --card:rgba(255,255,255,.045); --linea:rgba(255,255,255,.09);
  --oro:#F5D67B; --oro-hondo:#E0A93A; --azul:#8FD3FF;
  --papel:#D9D6CF; --grafito:#33333A;
  --tx:#F4F6FB; --tx2:#9AA3BE;
  --ok:#7BD8A4; --err:#F08A8A;
  --r:20px; --r-img:16px; --r-pill:999px;
  --sombra:0 20px 60px rgba(0,0,0,.45);
  --head:64px; --tabs:76px;
  /* El borde de abajo del iPhone es zona muerta: la barra de gestos del
     sistema se queda con los toques, y ademas Safari, con su barra oculta,
     usa el primer toque de ahi para volver a mostrarla. Encima
     env(safe-area-inset-bottom) devuelve 0 en varios de esos momentos, asi
     que confiar solo en el no alcanza. Se le pone un piso: la fila de
     pestañas nunca queda pegada al borde. */
  --safe-b:max(env(safe-area-inset-bottom,0px), 26px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{background:var(--base)}
body{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:24px;color:var(--tx);background:var(--base);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
h1,h2,h3,.disp{font-family:"Fraunces","Iowan Old Style","Times New Roman",Georgia,serif;font-weight:700;letter-spacing:-.01em;margin:0}
h1{font-size:32px;line-height:38px}
h2{font-size:24px;line-height:30px}
h3{font-size:20px;line-height:26px;font-weight:500}
p{margin:0 0 14px}
a{color:var(--azul)}
.small{font-size:14px;line-height:21px}
.lab{font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.muted{color:var(--tx2)}
.oro{color:var(--oro)}
.center{text-align:center}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
svg{width:20px;height:20px;flex:0 0 auto}

/* ---------- fondo vivo ---------- */
#cielo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
#app{position:relative;z-index:1}

/* ---------- estructura ---------- */
.head{
  position:fixed;top:0;left:0;right:0;height:calc(var(--head) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 18px 0;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(5,7,15,.92),rgba(5,7,15,.55) 70%,rgba(5,7,15,0));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:40;
}
.logo{display:flex;align-items:center;gap:1px;font-family:"Fraunces",serif;font-weight:700;font-size:22px;letter-spacing:.01em}
.logo .lm{display:inline-block;width:16px;height:16px;margin:0 1px;transform:translateY(1px)}
.fase{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--card);min-height:38px}
.fase .lm{width:20px;height:20px}
.fase span{font-size:12px;letter-spacing:.06em;color:var(--tx2)}

.vista{padding:calc(var(--head) + env(safe-area-inset-top) + 8px) 18px calc(var(--tabs) + var(--safe-b) + 24px)}
.vista.plena{padding:0}

.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tabs) + var(--safe-b));padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;
  background:rgba(10,17,40,.72);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-top:1px solid var(--linea);
}
/* El area tocable ocupa toda la altura util de la barra, que ya esta por
   encima de la zona muerta. 56px es comodo para el pulgar sin agrandar la
   barra. */
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:100%;min-height:56px;color:var(--tx2);transition:color .18s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tab:active{opacity:.7}
.tab svg{width:23px;height:23px}
.tab b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.tab.on{color:var(--oro)}
.tab.on svg{filter:drop-shadow(0 0 10px rgba(245,214,123,.35))}

/* ---------- piezas ---------- */
.card{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:18px;margin:0 0 14px}
.card.hueco{padding:0;overflow:hidden}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  border-radius:var(--r-pill);background:var(--oro);color:#141007;font-weight:700;font-size:16px;
  box-shadow:0 10px 30px rgba(245,214,123,.16);transition:transform .18s var(--ease),opacity .18s
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.4;box-shadow:none}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--linea);box-shadow:none}
.btn.ghost svg{opacity:.85}
.btn svg{width:19px;height:19px}
.btn.sm{min-height:44px;font-size:14px;padding:0 18px;width:auto}
.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--linea);background:var(--card);font-size:14px;min-height:40px}
.pill svg{width:17px;height:17px;flex:0 0 17px}
.pill{white-space:nowrap}
.pill.on{border-color:rgba(245,214,123,.5);background:rgba(245,214,123,.1);color:var(--oro)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.fila{display:flex;gap:10px}
.fila>*{flex:1}
.sep{height:1px;background:var(--linea);margin:18px 0;border:0}
.tag{display:inline-block;padding:5px 11px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border:1px solid var(--linea);color:var(--tx2)}
.tag.oro{color:var(--oro-hondo);border-color:rgba(245,214,123,.35);background:rgba(245,214,123,.08);color:var(--oro)}

input,textarea,select{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:14px;
  padding:14px 15px;min-height:52px;outline:none;transition:border-color .18s
}
textarea{min-height:120px;resize:vertical;line-height:24px}
input:focus,textarea:focus,select:focus{border-color:rgba(143,211,255,.55)}
input::placeholder,textarea::placeholder{color:#6E7793}
label.f{display:block;margin:0 0 16px}
label.f>span{display:block;margin:0 0 7px}

.scroll-x{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:2px 18px 4px;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x>*{scroll-snap-align:start;flex:0 0 auto}

/* ---------- retrato ---------- */
.marco{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--papel);box-shadow:var(--sombra)}
.marco img{width:100%;display:block}
.marco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.32'/></svg>");
  mix-blend-mode:multiply;opacity:.5}
.marco .firma{position:absolute;left:14px;bottom:12px;font-family:"Fraunces",serif;font-size:13px;color:rgba(51,51,58,.72);letter-spacing:.02em}

/* revelado */
#revelado{position:fixed;inset:0;z-index:90;background:radial-gradient(120% 80% at 50% 12%,#131C3E 0%,#080B18 55%,#04060D 100%);display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 26px calc(22px + env(safe-area-inset-bottom,0px))}
/* min-height + centrado adentro: centra cuando entra en pantalla, y cuando no
   entra la caja crece y la pantalla scrollea de verdad en vez de cortar arriba */
#revelado .rw{width:100%;max-width:380px;margin:0 auto;text-align:center;min-height:100%;display:flex;flex-direction:column;justify-content:center}
#revelado .rimg{position:relative;border-radius:var(--r-img);overflow:visible;margin:0 auto 16px;width:100%;max-width:min(380px,38vh)}
#revelado .rimg img{border-radius:var(--r-img);filter:blur(24px);transform:scale(1.04);transition:filter 3s cubic-bezier(.12,.7,.2,1),transform 3s cubic-bezier(.12,.7,.2,1)}
#revelado.go .rimg img{filter:blur(0);transform:scale(1)}
#revelado h1{margin:0 0 16px;font-size:25px;line-height:32px}
/* El Segundo Trazo — la pantalla de la oferta. Mismo lenguaje que el
   revelado a propósito: no tiene que parecer una publicidad metida en la
   app, tiene que parecer la continuación de lo que acaba de pasar. */
#oferta{position:fixed;inset:0;z-index:96;overflow:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 70% at 50% 0%,#161F45 0%,#090D1C 55%,#04060D 100%);
  transform:translateY(100%);transition:transform .62s cubic-bezier(.16,.84,.28,1);
  box-shadow:0 -24px 70px rgba(0,0,0,.6)}
#oferta.on{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ #oferta{transition:none} }
#oferta .ow{max-width:460px;margin:0 auto;padding:calc(40px + env(safe-area-inset-top)) 22px calc(34px + env(safe-area-inset-bottom))}
#oferta .olab{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--oro);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
#oferta .olab svg{width:15px;height:15px}

/* ---------- las tres tarjetas de la oferta ---------- */
/* El teaser: líneas borroneadas con un candado encima. Son dibujo, no texto
   tapado — no hay nada que leer con el inspector. */
.otea{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 0 20px;filter:blur(3px);opacity:.5}
.otea>span{display:block;height:9px;border-radius:99px;
  background:linear-gradient(90deg,rgba(245,214,123,.30),rgba(245,214,123,.10))}
.otea .ocand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  filter:blur(0);opacity:1}
.otea .ocand svg{width:26px;height:26px;color:var(--oro)}

#oferta .ocards{display:flex;flex-direction:column;gap:14px;margin:0 0 18px}
.ocard{border:1px solid var(--linea);border-radius:var(--r);padding:18px 16px 16px;
  background:rgba(255,255,255,.02);text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ocard.on{opacity:1;transform:translateY(0)}
.ocard .octit{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:19px;line-height:25px;color:var(--tx);margin:0 0 6px}
.ocard .ocsub{margin:0;color:var(--tx2);font-size:13.5px;line-height:20px}
.ocard.ya{border-color:rgba(111,211,154,.34)}
.ocard .ocya{margin:14px 0 0;color:var(--ok,#6FD39A);font-size:13.5px}
.ocard .ocya svg{width:15px;height:15px;vertical-align:-2px;margin-right:5px}

/* El botón con el precio en cápsula al costado, como la referencia. */
.ocbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 14px;border-radius:14px;cursor:pointer;text-align:left;
  border:1px solid rgba(245,214,123,.34);background:rgba(245,214,123,.09);color:var(--tx);
  font-family:inherit;font-size:15px;line-height:20px;min-height:56px;
  transition:background .18s,border-color .18s,transform .12s}
.ocbtn:hover{background:rgba(245,214,123,.15);border-color:rgba(245,214,123,.5)}
.ocbtn:active{transform:scale(.985)}
.ocbtn .ocb1{flex:1 1 auto;min-width:0}
.ocbtn .ocb1 b{color:var(--oro);font-weight:700}
.ocbtn .ocpre{flex:0 0 auto;font-style:normal;font-weight:700;font-size:14px;
  padding:6px 12px;border-radius:99px;background:rgba(245,214,123,.16);color:var(--oro);
  white-space:nowrap}

/* El bloque del pack. Es el único con borde dorado y fondo propio: tiene que
   ganarle visualmente a las dos tarjetas de arriba sin gritar. */
.opack2{border:1.5px solid rgba(245,214,123,.52);border-radius:var(--r);padding:20px 16px 16px;
  background:linear-gradient(180deg,rgba(245,214,123,.08),rgba(245,214,123,.02));
  text-align:center;margin:0 0 18px;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.opack2.on{opacity:1;transform:translateY(0)}
.opack2 .op2lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);font-weight:700;margin:0 0 12px}
.opack2 .op2lab svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.opack2 .op2pre{display:flex;align-items:baseline;justify-content:center;gap:10px;
  flex-wrap:wrap;margin:0 0 14px}
.opack2 .op2pre s{color:var(--tx3,#5E6785);font-size:14px}
.opack2 .op2pre b{color:var(--ok,#6FD39A);font-size:19px;font-weight:700}
/* "Desbloquear todo" es la acción que queremos: tiene que ganarle a todo lo
   demás de la pantalla. Respira despacio —escala apenas: nadie lo registra
   como animación, pero el ojo vuelve ahí— y cada tanto le cruza un brillo.
   Todo con transform y filter, que van por GPU; animar la sombra acá
   trababa el scroll en teléfonos modestos. */
.opack2 .btn.op2btn,
.oalerta .btn.op2btn{
  position:relative;overflow:hidden;margin:0;
  padding:18px 16px;font-size:15.5px;
  background:linear-gradient(96deg,var(--oro),#FFEDB4 52%,var(--oro-hondo));
  box-shadow:0 0 36px rgba(245,214,123,.50),0 14px 36px rgba(0,0,0,.45);
  will-change:transform;animation:respira 2.8s ease-in-out infinite}
/* El precio, invertido: chapa oscura y número dorado sobre el botón dorado.
   Es el contraste más fuerte de la pantalla, así que es lo primero que se
   lee del botón —y es justo el dato que la persona está buscando—. */
.opack2 .btn.op2btn i,
.oalerta .btn.op2btn i{
  background:#17110A;color:var(--oro);
  font-size:18.5px;font-weight:800;letter-spacing:-.015em;
  padding:7px 11px;box-shadow:0 3px 12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
.opack2 .btn.op2btn i u,
.oalerta .btn.op2btn i u{text-decoration:none;font-size:10px;font-weight:700;
  letter-spacing:.05em;opacity:.65;margin-left:4px;vertical-align:2px}
.opack2 .btn.op2btn span,
.oalerta .btn.op2btn span{white-space:nowrap}
.opack2 .btn.op2btn::after,
.oalerta .btn.op2btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-260%) skewX(-18deg);
  animation:brilloPasa 3.6s ease-in-out infinite}
.opack2 .btn.op2btn:active,
.oalerta .btn.op2btn:active{animation:none;transform:scale(.985)}
@keyframes respira{0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.028);filter:brightness(1.07)}}
@keyframes brilloPasa{0%,62%{transform:translateX(-260%) skewX(-18deg)}
  100%{transform:translateX(320%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){
  .opack2 .btn.op2btn,.oalerta .btn.op2btn{animation:none}
  .opack2 .btn.op2btn::after,.oalerta .btn.op2btn::after{display:none}
  .oalerta .opunto{animation:none}
}
.opack2 .op2mas{margin:12px 0 0;color:var(--tx2);font-size:12.5px;line-height:19px}
.opack2 .op2mas b{color:var(--tx)}

/* ─── el bloque de oferta suelto en las pestañas ───────────────────
   La tarjeta anterior (.otar) se leía como una sección más de la app y la
   gente la pasaba de largo. Esta tiene barra ámbar arriba con un punto
   latiendo, el precio viejo tachado al lado del de hoy, y el mismo botón
   dorado que respira. Se ve como un aviso, no como contenido.

   Lo que NO tiene, a propósito: contador, "quedan 3 lugares", oferta que
   vence. La persona ya pagó una vez y sigue usando la app; inventarle una
   urgencia falsa acá se nota, y vuelve como reembolso. */
.oalerta{
  border:1.5px solid rgba(245,214,123,.5);padding:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(245,214,123,.10),rgba(245,214,123,.02));
  box-shadow:0 0 30px rgba(245,214,123,.12),0 16px 44px rgba(0,0,0,.42)}
.oalerta .oabarra{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(96deg,rgba(245,214,123,.22),rgba(245,214,123,.08));
  border-bottom:1px solid rgba(245,214,123,.28);
  padding:10px 16px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--oro)}
.oalerta .opunto{
  flex:none;width:9px;height:9px;border-radius:50%;background:#FFB84D;
  animation:oPulso 1.9s ease-out infinite}
@keyframes oPulso{
  0%{box-shadow:0 0 0 0 rgba(255,184,77,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,184,77,0)}
  100%{box-shadow:0 0 0 0 rgba(255,184,77,0)}}
.oalerta .oath{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:24px;line-height:30px;color:var(--tx);margin:16px 16px 8px}
.oalerta .oatp{margin:0 16px 14px;font-size:14px;line-height:21px;color:var(--tx2)}
.oalerta .oapre{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:0 16px 14px}
.oalerta .oapre s{color:var(--tx3,#5E6785);font-size:15px}
.oalerta .oapre b{
  font-family:"Fraunces",Georgia,serif;font-size:27px;font-weight:700;color:var(--ok,#6FD39A)}
.oalerta .oaoff{
  font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#1A1408;background:var(--oro);
  padding:4px 9px;border-radius:99px}
.oalerta .btn.op2btn{margin:0 16px}
.oalerta .oanota{
  margin:11px 16px 16px;text-align:center;font-size:11.5px;color:var(--tx2);opacity:.8}

/* La sección cerrada dentro de la pestaña Encuentro. */
.plcerrada{border-style:dashed}
.plcerrada .plnum{opacity:.5}
.plcerrada .otea{padding:6px 0 16px}

@media (max-width:380px){
  .ocbtn{flex-direction:column;align-items:stretch;gap:9px;text-align:center}
  .ocbtn .ocpre{align-self:center}
}
#oferta h1{text-align:center;font-size:31px;line-height:38px;color:var(--tx);margin:0 0 10px}
#oferta h1 em{font-style:normal;color:var(--oro)}
#oferta .osub{text-align:center;color:var(--tx2);margin:0 0 20px;font-size:15px;line-height:23px}
/* el nombre del pack, como una placa: separa la promesa del producto */
#oferta .opack svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
#oferta .opack{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--oro);padding:9px 0;margin:0 0 18px;
  border-top:1px solid rgba(245,214,123,.2);border-bottom:1px solid rgba(245,214,123,.2)}
#oferta .olista{margin:0 0 18px}
#oferta .oit{display:flex;gap:13px;align-items:flex-start;padding:14px 15px;margin:0 0 9px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--linea);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#oferta .oit.on{opacity:1;transform:translateY(0)}
#oferta .oic{flex:0 0 26px;color:var(--oro);display:flex;padding-top:2px}
#oferta .oic svg{width:19px;height:19px}
#oferta .oit b{display:block;font-size:15px;margin:0 0 3px}
#oferta .oit small{display:block;color:var(--tx2);font-size:13px;line-height:20px}
#oferta .osobre{display:flex;gap:13px;align-items:center;padding:15px;margin:0 0 20px;
  border-radius:var(--r);border:1px dashed rgba(245,214,123,.34);background:rgba(245,214,123,.06)}
#oferta .osel{flex:0 0 26px;color:var(--oro);display:flex}
#oferta .osobre p{margin:0;font-size:14px;line-height:21px;color:#EDE2C6}
/* el precio. Va antes del botón y no adentro de una tarjeta cualquiera:
   es la objeción que queda por resolver, así que se muestra de frente. */
#oferta .oprecio{text-align:center;margin:0 0 18px;padding:18px 14px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,214,123,.11),rgba(245,214,123,.03));
  border:1px solid rgba(245,214,123,.3)}
#oferta .opl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--tx2)}
#oferta .opn{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:46px;line-height:54px;color:var(--oro);margin:2px 0 4px;letter-spacing:-.02em}
/* La moneda va pegada al número, más chica y en versalita: se lee "$9.997
   la moneda" de un golpe sin que la moneda le robe peso al precio. */
#oferta .opn i{font-style:normal;font-family:"Manrope",sans-serif;font-size:15px;
  letter-spacing:.1em;font-weight:700;color:var(--tx2);margin-left:7px;vertical-align:5px}
#oferta .opa{font-size:13px;line-height:20px;color:var(--tx2)}
/* botón con el precio adentro: saca la duda de "cuánto sale" del medio */
.btn.obig{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;font-size:15px;line-height:20px;text-align:left}
.btn.obig span{flex:1}
.btn.obig i{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(20,16,7,.16);white-space:nowrap}
#oferta .olink{display:block;width:100%;margin:14px 0 0;background:none;border:0;
  color:var(--tx2);font-size:14px;text-decoration:underline;cursor:pointer;font-family:inherit}
#oferta .onota{text-align:center;color:var(--tx2);font-size:11px;line-height:17px;margin:22px 0 0;opacity:.75}
/* la tarjeta que queda en la pestaña Retrato. Tiene que cortar la página:
   es lo único que vende cuando la persona vuelve una semana después. */
.otar{border-color:rgba(245,214,123,.4);
  background:linear-gradient(180deg,rgba(245,214,123,.13),rgba(245,214,123,.03));
  box-shadow:0 0 0 1px rgba(245,214,123,.08),0 14px 40px rgba(0,0,0,.35)}
.otar .otag{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--oro);margin:0 0 9px}
.otar .otag svg{width:14px;height:14px}
.otar .oth{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:25px;line-height:31px;color:var(--tx);margin:0 0 8px}
.otar .otp{margin:0 0 13px;font-size:14px;line-height:21px;color:var(--tx2)}
.otar .otf{display:flex;align-items:baseline;gap:8px}
.otar .otpre{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:28px;color:var(--oro)}
.otar .otu{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--tx2)}
@media (min-width:430px){ #oferta h1{font-size:38px;line-height:44px} }

/* el nombre del retrato: entra solo, después de las etiquetas */
#revelado .rnom{margin:0 0 16px;opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
#revelado .rnom.on{opacity:1;transform:translateY(0)}
#revelado .rnom .lab{display:block;margin:0 0 5px}
#revelado #racts .btn{margin:0 0 9px}
#revelado #racts .btn:last-child{margin:0}
/* "Ver mi lectura": el único botón que tiene que verse desde lejos. Los
   otros dos quedan en segundo plano a propósito —guardar y compartir son
   para después; ahora lo que sigue es leer. */
#revelado #racts .btn.lec{
  min-height:60px;font-size:17.5px;letter-spacing:.01em;
  background:linear-gradient(96deg,var(--oro),#FFE9A8 55%,var(--oro-hondo));
  box-shadow:0 0 30px rgba(245,214,123,.42),0 12px 34px rgba(0,0,0,.4);
  will-change:transform;animation:lecLate 1.5s ease-in-out .6s infinite;
}
#revelado #racts .btn.lec svg{width:21px;height:21px}
#revelado #racts .btn.lec:active{animation:none}
#revelado #racts .btn.ghost{min-height:46px;font-size:15px;opacity:.82}
@keyframes lecLate{0%,100%{transform:scale(1)}50%{transform:scale(1.032)}}
@media (prefers-reduced-motion:reduce){ #revelado #racts .btn.lec{animation:none} }
/* Teléfonos bajos: el retrato y los títulos ceden lo necesario para que
   "Ver mi lectura" y "Compartir" queden a la vista sin tener que bajar. */
@media (max-height:700px){
  #revelado{padding:16px 22px calc(16px + env(safe-area-inset-bottom,0px))}
  #revelado h1{margin:0 0 12px;font-size:21px;line-height:27px}
  #revelado .rimg{max-width:min(380px,34vh);margin:0 auto 12px}
  #revelado .rnom{margin:0 0 12px}
  #revelado .rnom b{font-size:26px;line-height:31px}
  #revelado .rnom .lab{margin:0 0 3px}
  #revelado #racts .btn{margin:0 0 7px}
  #revelado #racts .btn.lec{min-height:54px;font-size:16.5px}
  #revelado #racts .btn.ghost{min-height:42px}
}
#revelado .rnom b{display:block;font-family:"Fraunces","Iowan Old Style","Times New Roman",Georgia,serif;font-weight:700;font-size:31px;line-height:37px;letter-spacing:-.01em;color:var(--oro)}
.etq{position:absolute;padding:8px 13px;border-radius:var(--r-pill);background:rgba(10,17,40,.86);border:1px solid rgba(245,214,123,.34);color:var(--oro);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap;backdrop-filter:blur(8px)}
.etq.on{opacity:1;transform:translateY(0)}
.etq.e1{left:-6px;top:16%}
.etq.e2{right:-6px;top:47%}
.etq.e3{left:8%;bottom:-14px}
#chispas{position:fixed;inset:0;pointer-events:none;z-index:91}

/* ---------- lectura ---------- */
.indice{position:sticky;top:calc(var(--head) + env(safe-area-inset-top));z-index:20;margin:0 -18px 16px;padding:10px 18px;
  background:linear-gradient(180deg,rgba(5,7,15,.96),rgba(5,7,15,.72));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* El carrusel de secciones.

   Estaba pegado al texto de arriba y el ultimo chip quedaba cortado a la
   mitad contra el borde, que se lee como un error de maquetado y no como
   "hay mas para el costado". Se le da aire arriba y un degrade a la derecha
   que hace evidente que sigue. */
.indice .scroll-x{margin:0 -18px;padding:4px 18px 6px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
.indice{padding-top:12px}
.lectura-cuenta{margin:0 0 10px}

/* ---------- campo con error ---------- */
/* Antes, cuando faltaba un dato, solo salia un aviso chico que el teclado del
   telefono tapaba. La persona apretaba, no veia nada y pensaba que el boton
   estaba roto. Ahora el campo que falta se marca y dice que le falta. */
.f input.mal, .f textarea.mal{border-color:#E0736B;background:rgba(224,115,107,.07)}
.f input.mal:focus, .f textarea.mal:focus{border-color:#E0736B;box-shadow:0 0 0 3px rgba(224,115,107,.16)}
.msgmal{display:block;color:#E9928B;font-size:12.5px;line-height:1.35;margin:6px 2px 0}
.msgmal:empty{display:none}
.sec{scroll-margin-top:calc(var(--head) + 74px)}
.sec h2{margin:0 0 4px}
.sec .txt p{color:#E4E8F4}
.sec .txt p:first-letter{}
.acts{display:flex;gap:8px;margin:14px 0 0}
.acts .pill{flex:0 0 auto}

/* ---------- calendario / ventanas ---------- */
.mes{border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin:0 0 12px;background:var(--card)}
.mes.vacio-mes{padding:11px 14px;opacity:.62}
.mes.tiene{border-color:rgba(245,214,123,.28);background:linear-gradient(180deg,rgba(245,214,123,.07),rgba(255,255,255,.035))}
.mes .mh{display:flex;align-items:center;justify-content:space-between}
.mes .mh b{font-family:"Fraunces",serif;font-size:18px;text-transform:capitalize}
.barra{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 0}
.barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--oro-hondo),var(--oro))}

/* hoja / modal */
.hoja{position:fixed;inset:0;z-index:80;display:none}
.hoja.on{display:block}
.hoja .fondo{position:absolute;inset:0;background:rgba(3,5,12,.72);backdrop-filter:blur(6px);animation:fadeIn .18s var(--ease)}
.hoja .panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--sup);
  border-radius:26px 26px 0 0;border-top:1px solid var(--linea);padding:10px 18px calc(26px + env(safe-area-inset-bottom));
  box-shadow:var(--sombra);animation:sube .26s var(--ease)}
.hoja .asa{width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:4px auto 16px}
@keyframes sube{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- diario ---------- */
.linea{position:relative;padding:0 0 0 26px}
.linea::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--linea)}
.ent{position:relative;margin:0 0 14px}
.ent::before{content:"";position:absolute;left:-24px;top:8px;width:9px;height:9px;border-radius:99px;background:var(--oro);box-shadow:0 0 0 4px rgba(245,214,123,.14)}
.ent.sena::before{background:var(--azul);box-shadow:0 0 0 4px rgba(143,211,255,.14)}
.cruce{border-left:2px solid var(--oro);background:rgba(245,214,123,.07);border-radius:0 14px 14px 0;padding:11px 14px;margin:10px 0 0;font-size:14px;line-height:21px;color:#EDE2C6}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;gap:12px;padding:0 0 8px}
.msg{max-width:86%;padding:13px 16px;border-radius:18px;line-height:23px;font-size:15px;white-space:pre-wrap;animation:enter .22s var(--ease)}
.msg.m{align-self:flex-start;background:rgba(255,255,255,.055);border:1px solid var(--linea);border-bottom-left-radius:6px}
.msg.y{align-self:flex-end;background:rgba(245,214,123,.14);border:1px solid rgba(245,214,123,.24);border-bottom-right-radius:6px}
.compose{position:fixed;left:0;right:0;bottom:calc(var(--tabs) + var(--safe-b));padding:10px 18px;
  background:linear-gradient(180deg,rgba(5,7,15,0),rgba(5,7,15,.92) 30%);display:flex;gap:9px;align-items:flex-end;z-index:30}
.compose textarea{min-height:52px;max-height:120px;border-radius:26px;padding:14px 18px}
.compose .env{flex:0 0 52px;width:52px;height:52px;border-radius:99px;background:var(--oro);display:flex;align-items:center;justify-content:center}
.compose .env svg{width:20px;height:20px;color:#141007}

@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.enter{animation:enter .22s var(--ease) both}
.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}.d4{animation-delay:.16s}

.vacio{text-align:center;padding:34px 10px;color:var(--tx2)}
.vacio svg{width:34px;height:34px;opacity:.4;margin:0 auto 12px}

@media (min-width:600px){
  .head{padding-left:calc(50% - 260px + 18px);padding-right:calc(50% - 260px + 18px)}
  .vista{max-width:520px;margin:0 auto}
  .tabs{max-width:520px;left:50%;transform:translateX(-50%);border-left:1px solid var(--linea);border-right:1px solid var(--linea);border-radius:20px 20px 0 0}
  .compose{max-width:520px;left:50%;transform:translateX(-50%)}
  .hoja .panel{max-width:520px;left:50%;transform:translateX(-50%)}
  #revelado .rw{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #revelado .rimg img{filter:blur(0) !important;transform:none !important}
}

/* impresión: PDF de la lectura */
@media print{
  @page{size:A4;margin:18mm 16mm}
  body{background:#fff;color:#14161C}
  #cielo,.head,.tabs,.compose,.no-print{display:none !important}
  .vista{padding:0}
  .card{background:none;border:0;padding:0;margin:0 0 10mm}
  .pdf-portada{page-break-after:always;text-align:center;padding:8mm 0}
  .pdf-portada img{width:78mm;margin:0 auto 8mm;border-radius:3mm}
  .pdf-sec{page-break-inside:avoid;margin:0 0 9mm}
  .pdf-sec h2{color:#8A6B18;border-bottom:.4mm solid #DCC98E;padding-bottom:2mm;margin:0 0 4mm}
  .pdf-sec p{color:#22252E;font-size:11.5pt;line-height:1.62}
  .muted,.tx2{color:#6A6F7E}
  a{color:#22252E;text-decoration:none}
}

/* ================= rasgos del retrato ================= */
#rasgos{position:fixed;inset:0;z-index:95;overflow:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 80% at 50% 10%,#131C3E 0%,#080B18 55%,#04060D 100%)}
#rasgos .rwrap{max-width:520px;margin:0 auto;padding:calc(38px + env(safe-area-inset-top)) 22px 44px}
#rasgos .rbar{display:flex;gap:5px;justify-content:center;margin:0 0 28px}
#rasgos .rbar i{display:block;width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.14);transition:all .25s var(--ease)}
#rasgos .rbar i.ya{background:rgba(245,214,123,.55)}
#rasgos .rbar i.hoy{width:18px;background:var(--oro)}
#rasgos .rkicker{margin:0 0 8px;font-size:12px;line-height:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);font-weight:700;opacity:.85}
#rasgos h2{margin:0 0 6px;font-size:25px;line-height:32px}
#rasgos .rsub{margin:0 0 22px}
#rasgos .ropt{width:100%;justify-content:flex-start;margin:0 0 9px;padding:15px 16px;font-size:15px;text-align:left;white-space:normal;min-height:56px}
#rasgos .ropt.on{border-color:rgba(245,214,123,.6);background:rgba(245,214,123,.10)}
#rasgos .rglyph{width:26px;flex:0 0 26px;color:var(--oro);font-size:15px;opacity:.8;text-align:center}
#rasgos .ratras{margin:18px auto 0;display:flex}

/* ================= la pantalla del dibujo ================= */
#dibujo{position:fixed;inset:0;z-index:96;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 8%,#16214A 0%,#0A1024 48%,#04060D 100%);
  display:flex;align-items:center;justify-content:center;padding:26px;
  animation:dEntrar .5s var(--ease) both}
@keyframes dEntrar{from{opacity:0}to{opacity:1}}
#dibujo.salir{animation:dSalir .42s var(--ease) both}
@keyframes dSalir{to{opacity:0;transform:scale(1.03)}}
#dibujo .dcielo{position:absolute;inset:0;width:100%;height:100%;display:block}

/* nebulosas: tres manchas que respiran y giran muy lento */
#dibujo .dneb{position:absolute;border-radius:50%;filter:blur(56px);opacity:.75;pointer-events:none;mix-blend-mode:screen}
#dibujo .dneb.n1{width:62vmin;height:62vmin;left:-14vmin;top:4vmin;
  background:radial-gradient(circle at 40% 40%,rgba(96,124,255,.55),rgba(96,124,255,0) 68%);
  animation:dFlot1 19s ease-in-out infinite alternate}
#dibujo .dneb.n2{width:54vmin;height:54vmin;right:-12vmin;top:26vmin;
  background:radial-gradient(circle at 55% 45%,rgba(214,120,255,.42),rgba(214,120,255,0) 68%);
  animation:dFlot2 23s ease-in-out infinite alternate}
#dibujo .dneb.n3{width:70vmin;height:70vmin;left:12vmin;bottom:-26vmin;
  background:radial-gradient(circle at 50% 50%,rgba(245,214,123,.26),rgba(245,214,123,0) 66%);
  animation:dFlot3 27s ease-in-out infinite alternate}
@keyframes dFlot1{to{transform:translate3d(7vmin,-5vmin,0) scale(1.16)}}
@keyframes dFlot2{to{transform:translate3d(-8vmin,6vmin,0) scale(1.12)}}
@keyframes dFlot3{to{transform:translate3d(5vmin,-8vmin,0) scale(1.09)}}

#dibujo .dwrap{position:relative;z-index:2;width:100%;max-width:360px;text-align:center}

/* el retrato en formación: apenas insinuado, nunca legible */
#dibujo .dmarco{position:relative;width:176px;height:234px;margin:0 auto 24px;border-radius:var(--r-img);
  overflow:hidden;border:1px solid rgba(245,214,123,.20);background:#0A0E1C;
  box-shadow:0 0 70px rgba(96,124,255,.22),inset 0 0 50px rgba(0,0,0,.7)}
/* la hoja: un papel apenas insinuado detrás del trazo */
#dibujo .dmarco::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 80% at 50% 30%,transparent 40%,rgba(4,6,13,.55) 100%)}
#dibujo .dmarco img{width:100%;height:100%;object-fit:cover;opacity:.1;filter:blur(34px)}
#dibujo .dbarrido{position:absolute;left:-30%;top:0;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(245,214,123,.24),transparent);
  animation:dBarrer 2.6s linear infinite}
@keyframes dBarrer{to{transform:translateX(280%)}}

/* anillo de progreso */
#dibujo .danillo{position:relative;width:104px;height:104px;margin:0 auto 20px}
#dibujo .danillo svg{width:104px;height:104px;transform:rotate(-90deg)}
#dibujo .danillo circle{fill:none;stroke-width:2.5;stroke-linecap:round}
#dibujo .danillo .pista{stroke:rgba(255,255,255,.10)}
#dibujo .danillo .arco{stroke:var(--oro);filter:drop-shadow(0 0 6px rgba(245,214,123,.55))}
#dibujo .dpct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-size:26px;color:var(--tx);letter-spacing:-.02em}
#dibujo .dpct i{font-style:normal;font-size:14px;opacity:.55;margin:0 0 0 2px}

#dibujo .dfrase{margin:0 0 6px;font-family:"Fraunces",serif;font-size:19px;line-height:26px;
  color:var(--tx);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);min-height:52px}
#dibujo .dfrase.on{opacity:1;transform:translateY(0)}
#dibujo .dnota{margin:0}
#dibujo .drevelar[hidden]{display:none!important}
#dibujo .drevelar{margin:22px 0 0;animation:dBoton .6s var(--ease) both}
@keyframes dBoton{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#dibujo.listo .dmarco{border-color:rgba(245,214,123,.5);box-shadow:0 0 90px rgba(245,214,123,.30),inset 0 0 40px rgba(0,0,0,.5)}
#dibujo.listo .dbarrido{display:none}

@media (min-width:600px){
  #dibujo .dwrap{max-width:400px}
  #dibujo .dmarco{width:200px;height:266px}
}
@media (prefers-reduced-motion: reduce){
  #dibujo,#dibujo .drevelar{animation:none}
  #dibujo .dneb,#dibujo .dbarrido{animation:none}
  #dibujo .dfrase{transition:none;opacity:1;transform:none}
}

/* ---------- Cuándo, Dónde y Cómo: el pack adentro de Encuentro ---------- */
/* Cerrado: la misma tarjeta de venta, con la salida para el que ya compró
   y no se le abrió solo. */
.plcerr .olink{display:block;width:100%;background:none;border:0;color:var(--tx2);
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;
  padding:8px 0;cursor:pointer}
.otar.abierta{border-color:rgba(123,216,164,.34);
  background:linear-gradient(165deg,rgba(123,216,164,.1),rgba(255,255,255,.035) 60%)}
.otar.abierta .otag{color:var(--ok)}

/* Abierto */
.plcab{margin:0 0 16px}
.plcab .lab{display:flex;align-items:center;gap:6px}
.plcab .lab svg{width:14px;height:14px}
.plcab h2{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:27px;line-height:32px;color:var(--tx)}

/* La tira de arriba: lo que quiere ver de un vistazo cada vez que entra. */
.plfilas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.plfilas>div{padding:11px 10px;border:1px solid var(--linea);border-radius:14px;
  background:var(--card);min-width:0}
.plfilas .lab{display:block;margin:0 0 4px}
.plfilas b{display:block;font-size:13px;line-height:17px;color:var(--oro);
  overflow-wrap:anywhere}

.plsec{margin:0 0 14px}
.plh{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.plh b{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:19px;
  line-height:24px;flex:1;min-width:0}
.plnum{flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(245,214,123,.42);color:var(--oro);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.plic{display:flex;color:var(--oro)}
.plic svg{width:18px;height:18px}

.plgran{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:24px;
  line-height:29px;color:var(--oro);margin:0 0 6px}

/* Un paso: ícono o número a la izquierda, texto a la derecha. Se repite en
   las cinco secciones para que todo el pack se lea igual. */
.plpaso{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-top:1px solid var(--linea)}
.plpaso:first-of-type{border-top:0}
.plpaso>span{flex:0 0 22px;display:flex;justify-content:center;color:var(--oro);
  margin-top:1px}
.plpaso>span svg{width:17px;height:17px}
.plpaso .pln{width:22px;height:22px;border-radius:50%;background:rgba(245,214,123,.14);
  align-items:center;font-size:11px;font-weight:700;margin-top:0}
.plpaso b{display:block;font-size:14px;margin:0 0 3px}
.plpaso small{display:block;font-size:13.5px;line-height:20px;color:var(--tx2)}

.pllista{margin:8px 0 14px;padding:0 0 0 18px}
.pllista li{font-size:14px;line-height:21px;margin:0 0 6px}
.pllista li::marker{color:var(--oro)}

.plotras{margin:14px 0 0;padding:12px 13px;border-radius:14px;
  border:1px solid var(--linea);background:rgba(255,255,255,.03)}
.plotras .small{margin:6px 0 0}

.plsoltar{margin:16px 0 0;padding:13px 14px;border-radius:14px;
  border:1px solid rgba(240,138,138,.26);background:rgba(240,138,138,.07)}
.plsoltar b{display:block;font-size:14.5px;margin:0 0 5px;color:var(--tx)}
.plsoltar small{display:block;font-size:13.5px;line-height:20px;color:var(--tx2)}

.plnota{margin:14px 0 0;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--linea);
  font-size:12.5px;line-height:19px;color:var(--tx2)}
.plnota svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px;color:var(--oro)}

@media (max-width:360px){
  .plfilas{grid-template-columns:1fr 1fr}
  .plfilas>div:last-child{grid-column:1/-1}
}

/* ─── el downsell ───────────────────────────────────────────────────
   Usa la misma hoja que el upsell (#oferta): mismo alto, misma entrada,
   mismos botones. Sólo cambia la alineación de la lista: acá son tres
   renglones que se leen, no tres precios que se comparan, y centrados
   cuestan más de leer. */
#oferta.ods .olista{margin:0 0 14px}
#oferta.ods .oit{text-align:left;padding:13px 14px;margin:0 0 8px}
#oferta.ods .oit b{margin:0;font-weight:600;line-height:20px}
#oferta.ods .opack2 .op2mas{text-align:left}
#oferta.ods .op2pre.odsc{justify-content:space-between;margin:0 0 12px;text-align:left}
#oferta.ods .op2pre.odsc span{color:var(--tx3,#5E6785);font-size:13px}

/* ─── la cinta ──────────────────────────────────────────────────────
   Barra fina para los lugares donde una tarjeta entera interrumpe. */
.ocinta{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;
  padding:12px 14px;border-radius:var(--r);text-align:left;cursor:pointer;
  border:1px solid rgba(245,214,123,.30);
  background:linear-gradient(180deg,rgba(245,214,123,.09),rgba(245,214,123,.02));
  color:var(--tx);font-family:inherit}
.ocinta .ocic{flex:0 0 22px;color:var(--oro);display:flex}
.ocinta .ocic svg{width:18px;height:18px}
.ocinta .ocitx{flex:1;min-width:0}
.ocinta .ocitx b{display:block;font-size:14px;line-height:19px}
.ocinta .ocitx small{display:block;color:var(--tx2);font-size:12.5px;line-height:18px}
.ocinta .ocipre{font-style:normal;font-weight:700;color:var(--oro);font-size:15px;white-space:nowrap}
.ocinta:active{transform:scale(.99)}

/* ─── el aviso flotante ─────────────────────────────────────────────
   Abajo a la izquierda, por encima de la barra de pestañas. Entra
   deslizándose desde el borde y se va solo. No tapa el botón de enviar
   del chat, que vive a la derecha. */
.onudge{position:fixed;left:12px;bottom:calc(80px + env(safe-area-inset-bottom));
  z-index:94;width:min(300px,calc(100vw - 24px));padding:14px 15px 13px;
  border-radius:var(--r);border:1px solid rgba(245,214,123,.38);
  background:linear-gradient(180deg,#101830,#0A0F22);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;transform:translateX(-14px) scale(.98);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.onudge.on{opacity:1;transform:translateX(0) scale(1)}
@media (prefers-reduced-motion:reduce){ .onudge{transition:none} }
.onudge .onx{position:absolute;top:6px;right:8px;background:none;border:0;
  color:var(--tx2);font-size:21px;line-height:1;padding:4px 7px;cursor:pointer}
.onudge .onlab{display:flex;align-items:center;gap:6px;color:var(--oro);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 7px}
.onudge .onlab svg{width:13px;height:13px}
.onudge b{display:block;font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:17px;line-height:22px;margin:0 0 4px}
.onudge p{margin:0 0 11px;color:var(--tx2);font-size:12.5px;line-height:18px}
.onudge .onbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:44px;padding:0 14px;border:0;border-radius:999px;
  background:var(--oro);color:#141007;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer}
.onudge .onbtn i{font-style:normal;font-weight:800;font-size:15px}

/* ─── la isla de compras reales ─────────────────────────────────────
   Más chica que el aviso de oferta y sin botón: no pide nada, sólo
   cuenta algo que pasó. Comparte el borde inferior con el otro aviso,
   que nunca salen los dos juntos. */
.oprueba{position:fixed;left:12px;bottom:calc(80px + env(safe-area-inset-bottom));
  z-index:93;display:flex;align-items:center;gap:10px;
  max-width:min(290px,calc(100vw - 24px));padding:10px 14px 10px 12px;
  border-radius:999px;border:1px solid var(--linea);
  background:rgba(12,17,34,.94);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  opacity:0;transform:translateX(-12px);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.oprueba.on{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){ .oprueba{transition:none} }
.oprueba .opunto{flex:0 0 8px;width:8px;height:8px;border-radius:50%;
  background:var(--ok,#6FD39A);box-shadow:0 0 0 4px rgba(111,211,154,.16)}
.oprueba .oprtx{min-width:0}
.oprueba .oprtx b{display:block;font-size:13px;line-height:17px;font-weight:700}
.oprueba .oprtx small{display:block;color:var(--tx2);font-size:12px;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ---------- Pestaña Hoy ---------- */

.hycarta{ width:168px; height:262px; margin:14px auto 6px; perspective:1000px; cursor:pointer; }
.hycin{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .75s var(--ease); }
.hycarta.hyflip .hycin{ transform:rotateY(180deg); }
.hycara{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border:1px solid var(--oro); border-radius:var(--r);
  background:var(--card); box-shadow:var(--sombra);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:16px; text-align:center;
}
.hydorso{ background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.10), transparent 62%), var(--sup); }
.hydorso span{ font-size:30px; color:var(--oro); }
.hyfrente{ transform:rotateY(180deg); }
.hyfrente strong{ font-size:19px; line-height:1.25; color:var(--tx); }
.hyfrente em{ font-style:normal; font-size:13px; line-height:1.45; color:var(--tx2); }
.hyrom{ font-size:12px; letter-spacing:.18em; color:var(--oro); }
.hypista{ margin-top:0; }

.hybarra{ height:6px; border-radius:99px; background:var(--linea); overflow:hidden; margin:12px 0 8px; }
.hybarra i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--oro-hondo), var(--oro)); transition:width .9s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .hycin{ transition:none; }
  .hybarra i{ transition:none; }
}