/* ═══════════════════════════════════════════════════════════════════════
   HADA TAROT — identidad "COLLAGE INDIE" (2026-08-22, vigente).
   dark collage + indie + hippie + witchy + vintage + scrapbook + comfy.
   Papel rasgado, cinta, grano analógico, oro apagado, ciruela y rosa seca.
   Regla del brief: "collage sí, caos no" — cada composición tiene UN
   protagonista, 2-4 secundarios y aire.
   PROHIBIDO por el brief: exceso de estrellas/lunas · purple gradients ·
   glassmorphism · partículas constantes · el hada como protagonista.
   Reemplaza a "Aura Viva" (estrellas + auras violetas + chispas) por
   decisión del dueño — ver cerebro/wiki/decisions/web-lecturas-privadas-pitch.md
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ---- oscuro: casi negro CÁLIDO, nunca azulado ---- */
  --bg:#0B0A09; --bg-1:#12100F; --bg-2:#191513; --bg-3:#241B1C; --bg-rgb:11,10,9;
  --ink:#E2D2B9; --ink-dim:#AD9C85; --ink-3:#93826D;
  --linea:rgba(226,210,185,.14); --linea-fuerte:rgba(226,210,185,.3);
  /* oro APAGADO, no amarillo fluorescente */
  --accent:#A47A42; --accent-2:#D5B572; --accent-3:#CBB99B; --on-accent:#12100F; --accent-rgb:164,122,66;
  --ciruela:#836B7B; --ciruela-rgb:131,107,123;
  --rosa:#A36F75; --rosa-rgb:163,111,117;
  --papel:#C3AC8C; --papel-tinta:#241B1C;
  /* Fibra de papel procedural: el swatch fotográfico deja costuras al repetir y
     se embarra al estirarlo. El ruido SVG tilea perfecto a cualquier tamaño. */
  --fibra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.55'/%3E%3C/svg%3E");
  --sombra:0 22px 48px rgba(0,0,0,.62);
  --grade: saturate(.92) sepia(.16) contrast(1.04) brightness(.98);

  /* Mismo sistema que "Luz" (ver luz.css, 2026-09-03): Poiret One para
     titulos, Anton para numerales y precios, Uncial Antiqua para los nombres
     de las cartas. El cuerpo sigue en EB Garamond. */
  --display:'Poiret One',Georgia,serif;
  --numero:'Anton',Impact,system-ui,sans-serif;
  --carta:'Uncial Antiqua',Georgia,serif;
  --mano:'Petit Formal Script','Segoe Script',cursive;
  --maquina:'Courier Prime','Courier New',monospace;
  --ui:'EB Garamond',Georgia,serif;
  --wordmark:'Poiret One',Georgia,serif;
  --r:3px; --contenido:1280px;
  --dur:.5s; --dur-r:.22s;
}
:root[data-theme="light"]{
  --bg:#EFE7D9; --bg-1:#E6DCCB; --bg-2:#DCD0BC; --bg-3:#CFC0A8; --bg-rgb:239,231,217;
  --ink:#241B1C; --ink-dim:#4E4039; --ink-3:#665A4A;
  --linea:rgba(36,27,28,.16); --linea-fuerte:rgba(36,27,28,.34);
  --accent:#7A5526; --accent-2:#5E4019; --accent-3:#6B5B44; --on-accent:#EFE7D9; --accent-rgb:122,85,38;
  --ciruela:#5E4655; --ciruela-rgb:94,70,85;
  --rosa:#7C4950; --rosa-rgb:124,73,80;
  --papel:#D9C5A4; --papel-tinta:#241B1C;
  --sombra:0 18px 40px rgba(36,27,28,.2);
  --grade: saturate(.94) sepia(.12) contrast(1.03) brightness(1.01);
}

/* ═══ MATERIALIDAD — grano analógico y papel, no partículas ═══ */
.grano{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .grano{opacity:.34; mix-blend-mode:multiply}
/* Luz de vela: quieta, no late. El brief prohíbe loops visuales constantes. */
.velon{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 40% at 82% 12%, rgba(var(--accent-rgb),.13), transparent 68%),
    radial-gradient(ellipse 40% 36% at 10% 84%, rgba(var(--ciruela-rgb),.12), transparent 70%);
}
/* Efímera: motivos de línea (estrella, luna, ramita, semillas) dispersos y
   repetidos como textura de fondo detrás de TODA la página, no solo dentro
   de las tarjetas — para que el collage cubra la pantalla, no sólo las fotos. */
.efimera{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%23A47A42' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M48 24v14M48 52v14M27 38h14M55 38h14M33 24l10 10M52 44l10 10M63 24 53 34M43 44 33 54' opacity='.55'/%3E%3Cpath d='M320 70a26 26 0 1 0 18 44 20 20 0 0 1-18-44Z' opacity='.5'/%3E%3Cpath d='M120 150v34M120 184c0-12 9-19 21-21-1 10-9 18-21 21Zm0 0c0-12-9-19-21-21 1 10 9 18 21 21Z' opacity='.5'/%3E%3Ccircle cx='250' cy='190' r='2' opacity='.6'/%3E%3Ccircle cx='262' cy='200' r='1.4' opacity='.5'/%3E%3Ccircle cx='240' cy='204' r='1.6' opacity='.5'/%3E%3Cpath d='M60 300 71 311M71 300 60 311M50 306h32M66 290v32' opacity='.55'/%3E%3Cpath d='M340 260a22 22 0 1 0 15 37 17 17 0 0 1-15-37Z' opacity='.45'/%3E%3Cpath d='M190 340v30M190 370c0-10 8-16 18-18-1 9-8 16-18 18Zm0 0c0-10-8-16-18-18 1 9 8 16 18 18Z' opacity='.45'/%3E%3Ccircle cx='370' cy='140' r='1.8' opacity='.5'/%3E%3Ccircle cx='380' cy='152' r='1.3' opacity='.4'/%3E%3Cpath d='M300 370 309 379M309 370 300 379M292 374h25M300.5 361v27' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:420px 420px; background-repeat:repeat;
}
:root[data-theme="light"] .efimera{opacity:.4}
@media (max-width:640px){ .efimera{opacity:.32} }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ui);
  font-weight:400; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background-color var(--dur) ease, color var(--dur) ease;
}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer}
input,textarea{font-family:inherit}
.app{position:relative; z-index:1}
::selection{background:var(--accent); color:var(--on-accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ═══ HEADER ═══ */
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px 0;
}
.brand{display:flex; align-items:center; gap:0; background:none; border:0; padding:0; color:inherit; cursor:pointer}
/* MAS CHICO, MENOS ESPACIADO (2026-09-01, pedido en vivo: "que no diga hada
   tarot... deja espacio para los botones"). Ester header no tiene un icono
   propio como Luz -sacar el texto entero dejaria el boton "ir al inicio" sin
   nada que mostrar-, asi que se lo reduce en vez de sacarlo: 22px/.13em a
   17px/.06em libera ancho real para `.nav-centro` sin perder la marca. */
.word{
  font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); line-height:1.05;
}
.nav-centro{display:none}
.top-der{display:flex; align-items:center; gap:20px}
.nav-der-link{
  display:none; background:none; border:0; color:var(--ink-dim); font-family:var(--ui);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; transition:color var(--dur-r)
}
.nav-der-link:hover{color:var(--accent)}
.saldo{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.06em; color:var(--ink-dim)}
.coin{
  display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent); font-size:8.5px; flex:0 0 auto;
}
.saldo .num{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0}
.saldo .mas{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--linea-fuerte); background:none;
  color:var(--accent); font-size:12px; display:grid; place-items:center; transition:background var(--dur-r);
}
.saldo .mas:hover{background:var(--linea)}
.entrar, .icono-cuenta{
  border:1px solid var(--linea-fuerte); background:none; color:var(--ink);
  padding:8px 18px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color var(--dur-r), color var(--dur-r);
}
.entrar:hover, .icono-cuenta:hover{border-color:var(--accent); color:var(--accent)}
.icono-cuenta{width:32px; height:32px; padding:0; border-radius:50%; font-size:13px}

/* toggles: tema + idioma */
.controles{display:flex; align-items:center; gap:6px}
.tg-tema{
  background:none; border:1px solid var(--linea-fuerte); border-radius:50%; width:30px; height:30px;
  display:grid; place-items:center; color:var(--ink); transition:border-color var(--dur-r), transform var(--dur-r);
}
.tg-tema:hover{border-color:var(--accent)}
.tg-tema:active{transform:scale(.92)}
.tg-tema svg{width:15px; height:15px}
.tg-tema .ic-sol{display:none}
:root[data-theme="light"] .tg-tema .ic-luna{display:none}
:root[data-theme="light"] .tg-tema .ic-sol{display:block}
.tg-idioma{display:flex; align-items:center; gap:2px; font-size:10.5px; letter-spacing:.05em}
.tg-idioma button{
  background:none; border:0; color:var(--ink-3); padding:4px 6px; text-transform:uppercase;
  transition:color var(--dur-r);
}
.tg-idioma button.activo{color:var(--ink); font-weight:600}
.tg-idioma button:not(.activo):hover{color:var(--ink-dim)}
.tg-idioma .sep{color:var(--linea-fuerte)}

/* ═══ PAPEL — la pieza base del collage ═══
   El borde rasgado sale de clip-path, no de un PNG: así cualquier bloque
   puede ser papel sin tener que fabricar un asset por tamaño. */
.papel{
  position:relative; color:var(--papel-tinta);
  background-color:var(--papel);
  background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.papel-rasgado{
  clip-path:polygon(
    0% 3%, 4% 0.6%, 11% 2.4%, 19% 0.4%, 28% 2.6%, 37% 0.8%, 46% 2.8%, 56% 0.6%,
    65% 2.6%, 74% 0.9%, 83% 2.7%, 92% 0.7%, 100% 2.5%,
    99.4% 24%, 100% 47%, 99.2% 71%, 100% 97%,
    92% 99.3%, 83% 97.4%, 74% 99.2%, 65% 97.3%, 56% 99.4%, 46% 97.2%, 37% 99.3%,
    28% 97.4%, 19% 99.6%, 11% 97.6%, 4% 99.4%, 0% 97.5%,
    0.7% 71%, 0% 47%, 0.8% 24%
  );
}
/* Cinta adhesiva: rectángulo tibio semitransparente, apenas torcido */
.cinta{
  position:absolute; z-index:3; width:86px; height:26px; pointer-events:none;
  background:linear-gradient(180deg, rgba(214,196,164,.5), rgba(190,170,138,.42));
  box-shadow:inset 0 0 0 1px rgba(255,246,225,.18);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ═══ HERO COLLAGE — el collage ES la imagen, no un fondo desenfocado ═══
   El arte va nítido a la derecha y la hoja de papel se apoya encima a la
   izquierda, igual que la referencia 01. */
.carrusel{position:relative; min-height:78vh; overflow:hidden; display:flex; align-items:center}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none}
.slide.activa{opacity:1; pointer-events:auto}
.slide-img{position:absolute; inset:0; overflow:hidden}
.slide-img img{
  width:100%; height:100%; object-fit:cover; object-position:62% 34%;
  filter:none; opacity:1;
}
/* Sólo se oscurece la franja izquierda, donde va el papel: el resto del
   collage queda a la vista y con su propio color. */
.slide::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, var(--bg) 2%, rgba(var(--bg-rgb),.86) 26%, rgba(var(--bg-rgb),.24) 52%, transparent 72%),
    linear-gradient(0deg, var(--bg) 0%, transparent 26%);
}
/* La nota de papel del hero — el protagonista de la composición */
.slide-cap{
  position:relative; z-index:2; margin:0 auto; max-width:var(--contenido);
  width:100%; padding:0 40px;
}
.hoja{
  position:relative; max-width:460px; padding:44px 42px 40px;
  transform:rotate(-.7deg);
  opacity:0; animation:entra .75s .1s ease forwards;
}
.hoja .cinta{top:-11px; left:38px; transform:rotate(-4deg)}
.hoja .cinta.der{top:auto; left:auto; bottom:-10px; right:44px; transform:rotate(3deg); width:70px}
.slide-cap h1{
  font-family:var(--maquina); font-weight:700; font-size:clamp(25px,3vw,37px); line-height:1.32;
  margin:0 0 20px; color:var(--papel-tinta); text-wrap:balance; letter-spacing:-.01em;
}
/* Resaltador rosa seca, como marcado a mano sobre el papel */
.slide-cap h1 em{
  font-style:normal; position:relative; z-index:1; padding:0 .12em;
  background:linear-gradient(180deg, transparent 34%, rgba(var(--rosa-rgb),.42) 34%, rgba(var(--rosa-rgb),.42) 92%, transparent 92%);
}
.slide-cap p{font-family:var(--ui); font-size:17px; color:#2B211D; max-width:34ch; line-height:1.5; margin:0 0 28px}
@keyframes entra{to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .hoja{animation:none; opacity:1} }
/* Nota-frase: tarjeta de cita/afirmación, reutilizable en cualquier sección
   (no solo el hero). .nota-suelta la posiciona flotando sobre el hero. */
.nota-frase{
  max-width:270px; margin:0; padding:20px 22px 22px; transform:rotate(var(--giro,-1deg));
  font-family:var(--maquina); font-size:13.5px; line-height:1.7; text-align:center;
  color:#2B211D;
  background-color:var(--papel);
  background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  clip-path:polygon(0% 6%, 9% 1%, 20% 5%, 32% 0%, 45% 5%, 58% 1%, 70% 5%, 83% 0%, 93% 5%, 100% 2%,
                    100% 95%, 91% 100%, 79% 95%, 66% 99%, 54% 95%, 41% 100%, 28% 95%, 15% 99%, 5% 95%, 0% 98%);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.nota-frase::after{
  content:"♡"; display:block; margin-top:8px; font-size:15px; color:#6B4A16;
}
.nota-suelta{ position:absolute; right:6%; bottom:9%; z-index:2; }
@media (max-width:980px){ .nota-suelta{display:none} }
/* Nota-frase suelta dentro del flujo normal (no el hero): centrada, con aire arriba/abajo */
.nota-flotante{ margin:36px auto; }

/* ═══ REVELADO AL SCROLL — reutilizable, ver revelarAlEntrar() en app.js.
   Mismo patrón que .carta-lectura/.visible, generalizado a cualquier elemento. ═══ */
/* Con DIRECCION y peso: sube mas, llega apenas girada y un pelo mas chica,
   y se asienta — como apoyar un recorte sobre la mesa, no un fade de UI. */
.revelar{
  opacity:0; transform:translateY(36px) rotate(calc(var(--giro,0deg) - 1.6deg)) scale(.985);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .95s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--retraso,0s);
}
.revelar.visible{ opacity:1; transform:translateY(0) rotate(var(--giro,0deg)) scale(1); }
@media (prefers-reduced-motion: reduce){
  .revelar{ opacity:1; transform:none; transition:none; }
}

/* ═══ BOTÓN PRINCIPAL — tarjetita oscura sobre el papel, con filo de tinta ═══ */
.cta-envuelta{position:relative; display:inline-flex}
.cta-dorado{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:12px; cursor:pointer; border-radius:2px;
  border:1px solid rgba(213,181,114,.5); background:var(--bg-2);
  color:var(--accent-2); font-family:var(--display); font-weight:600;
  font-size:16px; letter-spacing:.02em; padding:14px 30px;
  box-shadow:0 8px 20px rgba(0,0,0,.42);
  transition:background var(--dur-r), color var(--dur-r), border-color var(--dur-r), box-shadow var(--dur-r), transform var(--dur-r);
  text-decoration:none;
}
.cta-dorado::after{content:"→"; font-family:var(--ui); opacity:.85; transition:transform var(--dur-r)}
.cta-dorado:hover{border-color:var(--accent-2); color:#F0DFB6; box-shadow:0 12px 26px rgba(0,0,0,.55)}
.cta-dorado:hover::after{transform:translateX(4px)}
.cta-dorado:active{transform:translateY(1px)}
.cta-fantasma{
  display:inline-flex; align-items:center; gap:9px; background:none; border:1px solid var(--linea-fuerte); border-radius:2px;
  color:var(--ink); font-size:11.5px; letter-spacing:.06em; padding:14px 26px; transition:border-color var(--dur-r), color var(--dur-r);
  text-decoration:none;
}
.cta-fantasma:hover{border-color:var(--accent); color:var(--accent)}
.hero-disclaimer{font-size:9.5px; color:var(--ink-3); max-width:42ch; line-height:1.5; margin:20px 0 0}

.dots{position:absolute; right:40px; bottom:70px; z-index:3; display:flex; flex-direction:column; gap:10px}
.dots button{width:22px; height:1px; background:var(--linea-fuerte); border:0; cursor:pointer; padding:0; transition:background var(--dur-r), width var(--dur-r)}
.dots button.activo{background:var(--accent); width:34px}
.scroll-cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; font-size:9px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase}

/* ═══ AYUDA / CATEGORÍAS ═══ */
.ayuda-elegir{max-width:var(--contenido); margin:0 auto; padding:0 40px 26px; font-size:12.5px; color:var(--ink-dim)}
.ayuda-elegir a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
/* ═══ CATEGORÍAS — medallones de papel con símbolo dibujado, sobre el fondo ═══ */
.categorias{
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; justify-content:center;
  padding:34px 40px 30px; margin:0 auto; max-width:var(--contenido); background:none;
}
.categorias::-webkit-scrollbar{display:none}
.cat{
  flex:0 0 auto; background:none; border:0; padding:8px 12px; border-radius:3px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--display); font-size:16px; letter-spacing:.02em; color:var(--ink-dim);
  transition:color var(--dur-r), transform var(--dur-r);
}
.cat-medallon{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:radial-gradient(circle at 50% 42%, rgba(var(--tinte-rgb,var(--accent-rgb)),.28), rgba(0,0,0,.55) 72%);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22), 0 4px 10px rgba(0,0,0,.4);
  opacity:.82; transition:opacity var(--dur-r), transform var(--dur-r);
}
.cat-medallon svg{width:19px; height:19px; color:var(--accent-2)}
.cat-medallon.cm-amor{--tinte-rgb:var(--rosa-rgb)}
.cat-medallon.cm-amor svg{color:var(--rosa)}
.cat-medallon.cm-vida{--tinte-rgb:143,122,66}
.cat-medallon.cm-proposito{--tinte-rgb:var(--accent-rgb)}
.cat-medallon.cm-espiritualidad{--tinte-rgb:var(--ciruela-rgb)}
.cat-medallon.cm-espiritualidad svg{color:var(--ciruela-claro,var(--ciruela))}
.cat-medallon.cm-familia{--tinte-rgb:var(--rosa-rgb)}
.cat-medallon.cm-decisiones{--tinte-rgb:var(--accent-rgb)}
.cat:hover{color:var(--ink)}
.cat:hover .cat-medallon{opacity:1; transform:translateY(-3px)}
.cat.activa{color:var(--accent-2)}
.cat.activa .cat-medallon{opacity:1; box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5), 0 4px 12px rgba(0,0,0,.45)}
/* Filete fino entre medallones, como en la referencia */
.cat + .cat{border-left:1px solid var(--linea); padding-left:22px; margin-left:10px}

/* ═══ GRILLA ═══ */
.seccion-grid{padding:70px 40px 8px; max-width:var(--contenido); margin:0 auto}
.seccion-cab{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 30px; padding-bottom:14px; border-bottom:1px solid var(--linea)}
/* LA CLASE ESTABA EN EL HTML Y NO EXISTIA EN NINGUN CSS (2026-09-01).
   `#vLecturas > .seccion-cab-vista` envuelve el titulo "Elegi tu lectura" y el
   contador "18 lecturas", y sin regla propia el bloque quedaba a ancho completo
   y su texto arrancaba en x=0, pegado al borde de la ventana. Medido con
   Playwright a 1280, 1024 y 390 px: `left=0` en los tres. Se veia como si la
   "E" estuviera cortada.
   Los valores no son inventados: son los MISMOS que ya usan sus hermanas de
   esta hoja -`.categorias` y `.ayuda-elegir`- para alinearse (max-width
   var(--contenido), margin auto, 40px de lateral, 18px en angosto). */
.seccion-cab-vista{
  max-width:var(--contenido); margin:0 auto; padding:0 40px;
  display:flex; flex-direction:column; gap:8px;
}
.et-titulo{font-family:var(--display); font-weight:600; font-size:32px; text-transform:uppercase; margin:0; letter-spacing:.12em; color:var(--ink)}
.et-eyebrow{font-family:var(--maquina); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); margin:0}

.grid-lecturas{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px}
/* Paper lift: la tarjeta está apenas torcida (--giro, distinto por tarjeta) y
   al pasar el mouse se endereza y se levanta, como levantar una foto de la mesa */
.carta-lectura{
  background:none; border:0; cursor:pointer; text-align:left; display:flex; flex-direction:column;
  position:relative; opacity:0; transform:translateY(26px) rotate(var(--giro,0deg));
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .45s cubic-bezier(.2,.8,.3,1);
  transition-delay:var(--retraso, 0s);
}
.carta-lectura.visible{opacity:1; transform:translateY(0) rotate(var(--giro,0deg))}
/* Hover 3D: se inclina hacia el mouse (--rx/--ry via app.js, puntero fino) */
.carta-lectura.visible:hover{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) rotate(0deg);
  transition-delay:0s; z-index:5;
}
/* Cada tarjeta es una FOTO con una hoja de papel rasgada pegada abajo */
.cl-aura{display:none}
.cl-foto{
  aspect-ratio:5/7; overflow:hidden; position:relative; z-index:1; background:var(--bg-1);
  border-radius:var(--r) var(--r) 0 0; transition:box-shadow .4s ease;
}
.carta-lectura.visible:hover .cl-foto{box-shadow:var(--sombra)}
.cl-foto img{
  width:100%; height:100%; object-fit:cover; object-position:var(--foco,center);
  filter:var(--grade); transition:transform .9s cubic-bezier(.16,.84,.44,1);
  /* parallax interno al scrollear (--sy via app.js): la foto es un 8% mas
     grande que el marco y se desliza dentro */
  transform:translateY(var(--sy,0px)) scale(1.08);
}
.carta-lectura:hover .cl-foto img{transform:translateY(var(--sy,0px)) scale(1.11)}
/* Reflejo de luz de vela que sigue al mouse sobre la foto */
.cl-foto::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,236,200,.28), rgba(255,236,200,.06) 30%, transparent 58%);
  transition:opacity .4s ease; mix-blend-mode:screen;
}
.carta-lectura:hover .cl-foto::after{opacity:1}
.cl-chispas{display:none}
.cl-info{
  /* El clip-path rasgado come hasta ~22% del alto: el padding-top tiene que
     dejar aire suficiente o el título queda mordido por el rasgado. */
  position:relative; z-index:2; margin-top:-52px; padding:42px 18px 18px;
  display:flex; flex-direction:column; min-height:172px;
  color:var(--papel-tinta);
  background-color:var(--papel);
  background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  /* borde superior rasgado: el papel se "rompe" sobre la foto */
  clip-path:polygon(
    0% 22%, 7% 13%, 14% 21%, 22% 10%, 30% 19%, 38% 9%, 47% 17%, 56% 8%,
    64% 16%, 72% 7%, 80% 15%, 88% 6%, 95% 14%, 100% 8%,
    100% 100%, 0% 100%
  );
  box-shadow:0 12px 22px rgba(0,0,0,.4);
}
.cl-info h3{
  font-family:var(--maquina); font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1.25;
  margin:0 0 7px; color:var(--papel-tinta);
}
/* El brief pide UNA línea, no párrafos: se corta en dos y no descuadra la grilla */
.cl-info p{
  font-family:var(--ui); font-size:15px; color:#3A2C25; line-height:1.38; margin:0 0 14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cl-meta{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto;
  font-family:var(--ui); font-size:14px; padding-top:10px; border-top:1px solid rgba(36,27,28,.2);
}
/* #5C4A40 -> #4E3F36 y #6B4A16 -> #563B12 (2026-09-01): medidos sobre el papel
   de la tarjeta (--papel #C3AC8C) daban 3,83 y 3,67, debajo del 4,5 de WCAG AA
   para texto de 14px. Se oscurecio el MINIMO que pasa, escalando los tres
   canales para no correr el matiz: quedan en 4,60 y 4,73. */
.cl-cartas{color:#4E3F36; letter-spacing:.01em}
.cl-precio{display:flex; align-items:center; gap:6px; color:#563B12; font-weight:600}
.cl-precio .coin{
  width:17px; height:17px; font-size:9px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #E4C271, #A67C2E 62%, #6E4E14);
  color:#3A2A0B; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,240,200,.35);
}
/* Señal sobre la foto: una etiquetita de papel pegada, como en un scrapbook */
.cl-evento, .cl-destacada{
  position:absolute; top:12px; left:-6px; z-index:3; font-family:var(--maquina);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#2B211D; font-weight:700; padding:5px 11px; transform:rotate(-2.2deg);
  background-color:var(--accent-3); background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  box-shadow:0 5px 12px rgba(0,0,0,.5); text-shadow:none; border:0;
}

/* ═══ CÓMO FUNCIONA — una tira de papel pegada con los 4 pasos ═══ */
.como-funciona{padding:80px 40px 20px; max-width:var(--contenido); margin:0 auto; text-align:center}
.como-funciona .et-eyebrow{display:block; margin-bottom:10px}
.como-funciona h2{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.11em;
  font-size:27px; margin:0 0 40px; color:var(--ink);
}
.pasos{
  position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:24px; max-width:900px; margin:0 auto; padding:38px 34px 34px; text-align:left;
  color:var(--papel-tinta);
  background-color:var(--papel); background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  clip-path:polygon(
    0% 8%, 7% 2%, 15% 7%, 24% 1%, 33% 6%, 42% 1%, 51% 7%, 60% 1%,
    69% 6%, 78% 1%, 86% 7%, 94% 2%, 100% 7%,
    100% 93%, 93% 99%, 84% 93%, 75% 98%, 66% 93%, 56% 99%, 47% 93%,
    38% 98%, 29% 92%, 20% 98%, 11% 93%, 4% 98%, 0% 92%
  );
  box-shadow:0 18px 38px rgba(0,0,0,.5);
}
.paso{font-family:var(--ui); font-size:14.5px; color:#3A2C25; line-height:1.42}
.paso b{
  display:grid; place-items:center; width:30px; height:30px; margin-bottom:11px; border-radius:50%;
  font-family:var(--display); font-size:17px; font-weight:600;
  background:var(--ciruela); color:#F2E6D5; box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.disclaimer{max-width:540px; margin:0 auto; padding:26px 24px 56px; text-align:center; font-size:12px; color:var(--ink-3); line-height:1.65}

/* ═══ CÓMO FUNCIONA — página propia (distinta de la tira .como-funciona de la home) ═══ */
/* `overflow-x:clip` y NO `hidden` (2026-09-01, mismo patron que #vCatalogo):
   `hidden` crearia un contenedor de scroll y rompe `position:sticky` adentro.
   Hace falta porque `.funciona-hero` esta rotado -.4deg a proposito (la
   inclinacion de scrapbook) y una caja rotada tiene un bounding box mas ancho
   que su ancho de layout: medido a 390px daba 391px, o sea 1px de scroll
   horizontal en toda la vista. La rotacion se queda; lo que se contiene es el
   scroll que provoca. */
#vComoFunciona{overflow-x:clip}
.funciona-hero{
  max-width:640px; margin:60px auto 0; padding:44px 42px; text-align:center; transform:rotate(-.4deg);
}
.funciona-hero h1{font-family:var(--display); font-weight:500; font-size:clamp(36px,4.6vw,52px); margin:0 0 12px; color:var(--papel-tinta)}
.funciona-tagline{font-family:var(--maquina); font-size:14px; letter-spacing:.03em; color:#4A3B33; margin:0}

.funciona-cita{
  max-width:520px; margin:44px auto 0; padding:0 40px; text-align:center;
  font-family:var(--display); font-style:italic; font-size:19px; line-height:1.5; color:var(--accent-3);
}
.funciona-cita::before, .funciona-cita::after{content:'"'; opacity:.5}

.funciona-pasos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  max-width:var(--contenido); margin:52px auto 0; padding:0 40px;
}
.funciona-paso{position:relative; text-align:left}
.fp-num{
  position:absolute; top:-10px; left:-10px; z-index:2; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%; font-family:var(--display); font-weight:600; font-size:14px;
  background:var(--ciruela); color:#F2E6D5; box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.funciona-paso img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r); filter:var(--grade); margin-bottom:14px; box-shadow:0 10px 22px rgba(0,0,0,.4)}
/* Paso 2: la pregunta va como nota de papel pegada sobre la foto (que trae un
   texto en español horneado en la imagen) — asi se traduce y no se lee doble. */
.fp-foto{position:relative; margin-bottom:14px}
.fp-foto img{margin-bottom:0}
.fp-nota.nota-frase{
  position:absolute; left:11%; right:20%; top:31%; max-width:none; margin:0;
  padding:16px 14px 14px; --giro:-2.5deg;
  /* Manuscrita, como la foto: la fuente italica del display, no la maquina de
     escribir de las notas del tema oscuro. Color fijado a mano: .nota-frase
     hereda tinta clara y sobre el papel no se veia — solo quedaba el corazon. */
  font-family:var(--display); font-style:italic; font-weight:500; font-size:17px; line-height:1.35;
  color:#2B211D; box-shadow:0 8px 18px rgba(0,0,0,.5);
}
.fp-nota.nota-frase::after{margin-top:6px; font-size:12px}
.funciona-paso h3{font-family:var(--ui); font-size:15px; font-weight:600; color:var(--ink); margin:0 0 6px}
.funciona-paso p{font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin:0}

.funciona-cierre{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--contenido); margin:60px auto 0; padding:30px 40px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.funciona-cierre-texto b{display:block; font-family:var(--display); font-size:19px; color:var(--accent-2); margin-bottom:4px}
.funciona-cierre-texto span{font-size:13px; color:var(--ink-dim)}
.funciona-cierre-conf{display:flex; flex-wrap:wrap; gap:18px 28px}
.funciona-cierre-conf span{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap}
.funciona-cierre-conf svg{width:15px; height:15px; flex:0 0 auto; color:var(--accent-2)}
.funciona-cierre-conf em{font-style:normal}

.funciona-cta-final{text-align:center; padding:44px 40px 70px}

@media (max-width:860px){
  .funciona-pasos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .funciona-pasos{grid-template-columns:1fr}
  .funciona-hero{padding:32px 26px; margin-top:36px}
}

/* Frase de cierre: manuscrita sobre el fondo, sin caja */
.franja{padding:56px 40px 40px; text-align:center; max-width:var(--contenido); margin:0 auto}
.franja p{
  font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(20px,2.4vw,28px);
  max-width:26ch; margin:0 auto; line-height:1.45; color:var(--accent-3);
}

/* ═══ PÁGINA INDIVIDUAL DE LECTURA ═══ */
.pantalla{padding:0 0 40px; max-width:var(--contenido); margin:0 auto; animation:pantallaIn .6s cubic-bezier(.16,.84,.44,1)}
/* Cambio de pantalla: entra desde abajo y se asienta, no un fade plano */
.vista:not([hidden]){animation:pantallaIn .6s cubic-bezier(.16,.84,.44,1)}
@keyframes pantallaIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .pantalla, .vista:not([hidden]){animation:none} }
.volver{background:none; border:0; color:var(--ink-dim); font-size:11.5px; letter-spacing:.04em; padding:20px 40px; display:inline-flex; align-items:center; gap:6px; transition:color var(--dur-r)}
.volver:hover{color:var(--accent)}

/* Cabecera compacta: foto chica + título al lado, sobre una hoja de papel —
   antes era texto plano sobre el fondo, la única zona de la página que no
   tenía nada de collage. Mismo papel/fibra que el resto del sitio, tinta
   oscura en vez del texto claro por defecto (mismo criterio que .hoja). */
.pl-compacta{
  display:flex; align-items:center; gap:18px; margin:16px 40px 22px; padding:16px 22px;
  max-width:640px; color:var(--papel-tinta);
  background-color:var(--papel); background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  box-shadow:0 14px 30px rgba(0,0,0,.4); transform:rotate(-.5deg);
  clip-path:polygon(0% 4%, 5% 0.8%, 14% 3%, 24% 0.6%, 35% 2.8%, 46% 0.9%, 57% 2.6%, 68% 0.7%,
                    79% 2.7%, 90% 0.8%, 100% 3%, 99.3% 32%, 100% 68%, 99.2% 96%,
                    90% 99.3%, 79% 97.2%, 68% 99.4%, 57% 97.3%, 46% 99.4%, 35% 97.2%,
                    24% 99.3%, 14% 97%, 5% 99.4%, 0.6% 68%, 0% 32%);
}
.pl-foto-mini{flex:0 0 auto; width:72px; height:72px; border-radius:var(--r); overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pl-foto-mini img{width:100%; height:100%; object-fit:cover; filter:var(--grade)}
.pl-info-mini{min-width:0}
.pl-eyebrow{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#4E3A20; margin:0 0 4px}
.pl-titulo-mini{font-family:var(--wordmark); font-weight:900; text-transform:uppercase; font-size:clamp(22px,2.8vw,30px); margin:0 0 6px; line-height:1.04; color:var(--papel-tinta)}
.pl-meta-mini{display:flex; align-items:center; gap:14px; font-size:11px; color:#5A4A40; text-transform:uppercase; letter-spacing:.04em}
.pl-meta-mini .precio{color:var(--accent); font-weight:700; display:flex; align-items:center; gap:5px}
.pl-meta-mini .coin{width:13px; height:13px}
@media (max-width:640px){ .pl-compacta{margin:14px 18px 18px; padding:14px 16px; gap:14px} }

.pl-detalle{padding:0 40px; max-width:640px; margin:0 0 22px}
.pl-detalle summary{
  cursor:pointer; font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); list-style:none;
  display:inline-flex; align-items:center; gap:6px; transition:color var(--dur-r);
}
.pl-detalle summary::before{content:"+"; font-family:var(--wordmark); font-size:14px; color:var(--accent); transition:transform .2s}
.pl-detalle[open] summary::before{content:"–"}
.pl-detalle summary:hover{color:var(--ink-dim)}
.pl-detalle summary::-webkit-details-marker{display:none}
.pl-poema{font-family:var(--ui); font-style:italic; font-size:14.5px; color:var(--ink-dim); line-height:1.55; margin:14px 0 10px; max-width:36ch; white-space:pre-line}
.pl-bloque{padding:0 40px; max-width:640px; margin:0 0 40px}
.pl-bloque .et-eyebrow{display:block; margin-bottom:14px}
.pl-bloque p{font-size:14px; line-height:1.7; color:var(--ink-dim); margin:0}
.pl-bloque-ritual{margin:0 0 28px}

#formConfig{display:flex; flex-direction:column; gap:16px}
.campo{display:flex; flex-direction:column; gap:7px}
.campo-doble{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.campo label, label.campo-fecha{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.pantalla input, .pantalla textarea, .modal input, .modal textarea{
  background:var(--bg-1); border:1px solid var(--linea); border-radius:var(--r);
  padding:13px 15px; color:var(--ink); font-size:14.5px; outline:none; width:100%;
  transition:border-color var(--dur-r); font-family:var(--ui);
}
.pantalla input:focus, .pantalla textarea:focus, .modal input:focus{border-color:var(--accent)}
.pantalla textarea{resize:vertical; min-height:76px}
.pantalla input::placeholder, .pantalla textarea::placeholder{color:var(--ink-3)}
.cta-ancha{display:flex; width:100%; margin-top:6px}
.cta-ancha .cta-dorado{width:100%; justify-content:center}
.pl-bloque .cta-dorado{justify-content:center}

/* ═══ MESA — las cartas están siempre a la vista, bloqueadas hasta pagar ═══ */
/* Cuántas cartas faltan, en grande y con cifras de ancho fijo para que el
   número no salte al bajar de 10 a 9 */
.mesa-restantes{
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  margin:14px 0 0; padding:0 40px;
}
.mesa-restantes b{
  font-family:var(--wordmark); font-weight:900; font-size:34px; line-height:1;
  color:var(--accent-2); font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(var(--accent-rgb),.45);
}
.mesa-restantes span{font-size:12.5px; color:var(--ink-dim); letter-spacing:.04em}

.mesa-instruccion{text-align:center; font-family:var(--wordmark); font-weight:900; text-transform:uppercase; font-size:22px; color:var(--ink); margin:8px 0 6px; padding:0 40px}
.mesa-instruccion small{display:block; margin-top:8px; font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.12em; color:var(--accent-2); text-transform:uppercase}

.mazo-zona{position:relative; display:flex; justify-content:center; align-items:center; min-height:200px; margin:20px 0 8px}
/* Halo cálido bajo el mazo — respira aunque esté bloqueado, para que se lea
   "acá pasa algo". Ciruela + oro apagado, no violeta: la vela, no la magia neón. */
.mazo-zona::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:240px; margin-top:-120px;
  z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 220px 110px at 50% 50%, rgba(var(--ciruela-rgb),.4), rgba(var(--accent-rgb),.16) 55%, transparent 76%);
  filter:blur(30px); animation:aura-latir 5.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .mazo-zona::before{animation:none} }
.mazo-preview{position:relative; z-index:1; width:84px; aspect-ratio:640/1106; animation:mazo-flota 4.6s ease-in-out infinite}
@keyframes mazo-flota{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){ .mazo-preview{animation:none} }
.mazo-preview span{position:absolute; inset:0; border-radius:5px; background:url('arte/cartas/card-back.webp') center/100% 100%; box-shadow:0 6px 16px rgba(0,0,0,.5); border:1px solid var(--linea-fuerte)}
.mazo-preview span:nth-child(1){transform:rotate(-6deg) translateY(3px)}
.mazo-preview span:nth-child(2){transform:rotate(3deg) translateY(1px)}
.mazo-preview span:nth-child(3){transform:rotate(0)}
.mazo-candado{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--bg-rgb),.94) 40%, rgba(var(--bg-rgb),.62) 100%);
}
.mazo-candado svg{width:30px; height:30px; color:var(--accent-2); filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.6))}
.mazo-zona.desbloqueada .mazo-candado, .mazo-zona.desbloqueada .mazo-preview{display:none}
/* ═══ ABANICO — arco real: todas las cartas giran desde un pivote común muy
   por debajo (--ae-pivote). Dos capas de transform que no se pisan:
   .ae-carta = posición en el arco · .ae-cuerpo = levantada al pasar el mouse ═══ */
.abanico-elegir{
  /* width:100% es necesario: todos los hijos son absolutos, así que como hijo
     flex de .mazo-zona colapsaría a 0 y las máscaras de borde no existirían */
  position:relative; z-index:1; width:100%; height:190px; margin:0 0 8px;
  --ae-ancho:64px; --ae-pivote:330px; --ae-dur:.34s; --ae-curva:cubic-bezier(.4,0,.3,1);
}
/* Los bordes se desvanecen: el abanico se pierde en la nada, no lo corta una caja */
.abanico-elegir::before, .abanico-elegir::after{
  content:""; position:absolute; top:0; bottom:0; width:34px; z-index:40; pointer-events:none;
}
.abanico-elegir::before{left:0; background:linear-gradient(90deg, var(--bg), transparent)}
.abanico-elegir::after{right:0; background:linear-gradient(270deg, var(--bg), transparent)}
#pantallaLectura.modo-historial .pl-compacta, #pantallaLectura.modo-historial .pl-detalle,
#pantallaLectura.modo-historial .pl-bloque, #pantallaLectura.modo-historial .mazo-zona{display:none}
.ae-carta{
  position:absolute; left:50%; top:18px; width:var(--ae-ancho); aspect-ratio:640/1106; cursor:pointer;
  margin-left:calc(var(--ae-ancho) / -2);
  transform-origin:50% var(--ae-pivote);
  transform:rotate(var(--ang,0deg));
  transition:transform var(--ae-dur) var(--ae-curva), opacity .32s ease;
}
.ae-cuerpo{
  position:absolute; inset:0; border-radius:5px; background:url('arte/cartas/card-back.webp') center/100% 100%;
  border:1px solid var(--linea-fuerte); display:block;
  transition:transform var(--ae-dur) var(--ae-curva), box-shadow var(--ae-dur) ease, filter .3s ease;
}
/* La sombra vive en su propia capa y sólo aparece cuando la carta se levanta */
.ae-sombra{
  position:absolute; inset:0; border-radius:5px; opacity:0; pointer-events:none;
  box-shadow:0 12px 26px rgba(0,0,0,.55), 0 0 20px 3px rgba(var(--accent-rgb),.5), 0 0 38px 9px rgba(var(--ciruela-rgb),.35);
  transition:opacity var(--ae-dur) ease;
}
.ae-carta:hover{z-index:60 !important}
.ae-carta:hover .ae-cuerpo{transform:translateY(-20px) scale(1.05)}
.ae-carta:hover .ae-sombra{opacity:1}
.ae-carta.elegida{opacity:0; transform:rotate(var(--ang,0deg)) translateY(-70px) scale(.72); pointer-events:none}
.abanico-elegir.esperando .ae-carta:not(.elegida):not(.en-espera) .ae-cuerpo{filter:brightness(.5); pointer-events:none}
.abanico-elegir.esperando .ae-carta:not(.elegida){pointer-events:none}
/* La carta elegida mientras el servidor genera: levantada, con halo y un pulso
   suave — "esta es la tuya, ya la estamos leyendo". Reemplaza al abanico
   entero apagado sin senal alguna. */
.ae-carta.en-espera{z-index:60 !important}
.ae-carta.en-espera .ae-cuerpo{transform:translateY(-26px) scale(1.07); animation:ae-latir 1.8s ease-in-out infinite}
.ae-carta.en-espera .ae-sombra{opacity:1}
@keyframes ae-latir{0%,100%{transform:translateY(-26px) scale(1.07)} 50%{transform:translateY(-30px) scale(1.09)}}
@media (prefers-reduced-motion: reduce){ .ae-carta.en-espera .ae-cuerpo{animation:none} }
.abanico-elegir.agotado{display:none}

/* Destello en el momento exacto en que la carta se da vuelta */
.carta .destello{
  position:absolute; inset:-22px; z-index:3; pointer-events:none; opacity:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,224,.95), rgba(var(--accent-rgb),.55) 38%, rgba(var(--ciruela-rgb),.25) 58%, transparent 72%);
}
.carta.revelada .destello{animation:destello .8s ease-out forwards}
@keyframes destello{0%{opacity:0; transform:scale(.45)} 22%{opacity:1} 100%{opacity:0; transform:scale(1.6)}}
@media (prefers-reduced-motion: reduce){ .carta.revelada .destello{animation:none} }

.slots{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-start; min-height:1px; padding:0 20px}
/* PESO FISICO EN LA CARTA (2026-09-02). Antes: aparecia con un fade lineal y
   giraba con una curva simetrica — se leia como un elemento de UI, no como un
   objeto. Ahora: (1) al ponerse en la mesa CAE con un overshoot chico, como
   una carta que se apoya; (2) al darse vuelta se LEVANTA un poco durante el
   giro (perspectiva + un pelo de escala) y vuelve a apoyarse, como una carta
   que se levanta de la mesa para mirarla. Todo con ease-out, 500-700ms, nada
   rebota infinito. prefers-reduced-motion ya lo apaga mas abajo. */
.carta{width:88px; aspect-ratio:640/1106; position:relative; flex:0 0 auto; opacity:0; transform:translateY(22px) scale(.9) rotate(-1.5deg); perspective:900px; transition:opacity .45s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.34,1.4,.44,1)}
.carta.puesta{opacity:1; transform:translateY(0) scale(1) rotate(0)}
.carta .cara{position:absolute; inset:0; border-radius:6px; backface-visibility:hidden; transition:transform .72s cubic-bezier(.3,.05,.2,1), box-shadow .72s ease; box-shadow:0 18px 34px rgba(0,0,0,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 7px; transform-style:preserve-3d}
/* Durante el giro la carta se "levanta": sombra mas larga y suave */
.carta.revelada .cara{box-shadow:0 26px 44px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: reduce){
  .carta{transition:opacity .01ms; transform:none}
  .carta .cara{transition:none}
}
.carta .dorso{background:url('arte/cartas/card-back.webp') center/100% 100% no-repeat}
.carta .frente{background:url('arte/cartas/card-front.webp') center/100% 100% no-repeat; transform:rotateY(180deg); text-align:center; padding:0; overflow:hidden}
.carta.revelada .dorso{transform:rotateY(180deg) translateZ(1px)}
.carta.revelada .frente{transform:rotateY(0) translateZ(1px)}
.carta .f-arte{position:absolute; inset:5.5% 7%; width:86%; height:89%; object-fit:cover; border-radius:4px; z-index:0}
.carta.invertida .f-arte{transform:rotate(180deg)}
.carta .f-pos{position:absolute; top:8%; left:9%; right:9%; z-index:1; font-family:var(--ui); font-size:6px; letter-spacing:.06em; text-transform:uppercase; color:#F3EDE4; font-weight:600; line-height:1.3; text-align:center; background:rgba(11,9,8,.7); border-radius:6px; padding:2.5px 3px}
.carta .f-nombre{position:absolute; left:6%; right:6%; bottom:5%; z-index:1; font-family:var(--ui); font-weight:700; text-transform:uppercase; font-size:10.5px; color:var(--accent-2); line-height:1.1; text-align:center; padding:11px 4px 5px; background:linear-gradient(180deg, transparent, rgba(11,9,8,.9) 45%)}
.carta .f-nombre small{display:block; font-family:var(--ui); font-size:7px; color:#d99; font-weight:600; text-transform:none}
.carta .f-simbolo{font-size:22px; color:var(--accent)}

/* ═══ CHAT / interpretación ═══ */
.chat{margin:30px 0 0; max-width:560px; margin-left:auto; margin-right:auto; padding:0 20px}
.msj{margin-bottom:16px; animation:aparecer .4s ease}
@keyframes aparecer{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.msj.mia{text-align:right}
.avatar{display:none}
.burbuja{max-width:100%}
.msj:not(.mia) .burbuja{border-left:2px solid var(--accent); padding:2px 0 2px 18px}
.msj.mia .burbuja{display:inline-block; text-align:left; background:var(--bg-1); border:1px solid var(--linea); padding:11px 15px; max-width:80%}
.quien{font-family:var(--ui); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.burbuja p{margin:0 0 10px; font-family:var(--ui); font-size:15.5px; line-height:1.6; color:var(--ink); font-weight:400; opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease}
.burbuja p.visible{opacity:1; transform:none}
.burbuja p:last-child{margin-bottom:0}
.msj.mia .burbuja p{font-size:13.5px; opacity:1; transform:none; margin:0}

.voz{display:inline-flex; align-items:center; gap:11px; margin:2px 0 14px; cursor:pointer; border:1px solid var(--linea-fuerte); border-radius:99px; padding:7px 18px 7px 8px; color:var(--ink); background:none; transition:border-color var(--dur-r), background var(--dur-r)}
.voz:hover{border-color:var(--accent)}
.voz .play{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:9px; background:var(--accent); color:var(--on-accent); padding-left:2px; flex:0 0 auto}
.voz.sonando .play{padding-left:0; font-size:8px; letter-spacing:1px}
.voz-txt{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; white-space:nowrap}
.voz .ondas{display:flex; gap:2.5px; align-items:center; height:14px}
.voz .ondas i{width:2.5px; border-radius:2px; background:var(--accent); height:7px; opacity:.85}
.voz.sonando .ondas i{animation:onda 1.1s ease-in-out infinite}
.voz.sonando .ondas i:nth-child(2n){animation-delay:.25s}
@keyframes onda{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.6)}}
.pensando{display:inline-flex; gap:4px; padding:4px 0}
.pensando i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:pensar 1.1s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.2s}.pensando i:nth-child(3){animation-delay:.4s}
@keyframes pensar{0%,100%{opacity:.25}50%{opacity:1}}

/* Upsell: no es un cartel — es la página que sigue respirando, separada por un filete */
.upsell{
  margin:38px auto 0; max-width:560px; padding:30px 20px 4px;
  border-top:1px solid var(--linea); text-align:left;
}
.upsell-titulo{
  font-family:var(--wordmark); font-weight:900; text-transform:uppercase; font-size:24px;
  color:var(--ink); margin:0 0 10px; line-height:1.08;
}
.upsell-texto{font-size:13px; color:var(--ink-dim); line-height:1.6; margin:0 0 20px; max-width:44ch}
.upsell .cta-envuelta::before{inset:-14px; opacity:.55}

/* PAGAR PARA REVELAR (2026-09-01). Las cartas de arriba ya salieron gratis;
   este panel es lo unico que se ve ANTES de pagar. El "sello" son barras
   borrosas -no texto de mentira, todavia no existe ningun texto real-, mismo
   principio que un skeleton-loader: prometen que hay contenido con esa forma,
   sin fingir una frase concreta que no se genero. Es la pieza que reemplaza
   al viejo candado "Pagá para desbloquear tus cartas" -que pedia plata ANTES
   de mostrar nada-, con la logica invertida: primero la intriga, despues el
   pago. */
.revelar-zona{
  margin:34px auto 0; max-width:420px; padding:34px 28px; text-align:center;
  background:var(--bg-1); border:1px solid var(--linea); border-radius:var(--r);
  animation:revelarAparece .5s ease-out;
}
@keyframes revelarAparece{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.revelar-titulo{
  font-family:var(--wordmark); font-weight:600; font-size:19px; color:var(--ink);
  margin:0 0 20px; line-height:1.3;
}
.revelar-sello{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:22px 10px; margin:0 0 18px; background:var(--bg-2); border-radius:var(--r);
}
.revelar-linea{
  display:block; height:9px; border-radius:5px; background:var(--ink-3);
  filter:blur(3px); opacity:.55;
}
.revelar-linea.l1{width:78%}.revelar-linea.l2{width:92%}.revelar-linea.l3{width:56%}
.revelar-sello-simbolo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:22px; color:var(--accent-2); text-shadow:0 0 14px var(--bg-2), 0 0 14px var(--bg-2);
}
.revelar-texto{font-size:13px; color:var(--ink-dim); line-height:1.6; margin:0 0 22px; max-width:38ch; margin-left:auto; margin-right:auto}
.revelar-boton{width:100%; justify-content:center}
.revelar-boton::after{content:none}
.revelar-cargando{
  font-size:12.5px; color:var(--ink-dim); letter-spacing:.03em; margin:4px 0 0;
  animation:pensar 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .revelar-zona{animation:none}
  .revelar-cargando{animation:none}
}

.chips-zona{margin:18px 0 0; max-width:560px; margin-left:auto; margin-right:auto; padding:0 20px}
.chips-titulo{font-size:11.5px; color:var(--ink-dim); margin:0 0 10px; text-transform:uppercase; letter-spacing:.05em}
.chips{display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; background:var(--bg-1); border:1px solid var(--linea); padding:10px 14px; font-size:12px; color:var(--ink); transition:border-color var(--dur-r); display:flex; flex-direction:column; gap:4px; max-width:150px; text-align:left}
.chip:hover{border-color:var(--accent)}
.chip .precio{font-size:10px; color:var(--accent); font-weight:700}

.escribir{display:flex; gap:9px; margin:16px auto 0; max-width:560px; padding:0 20px}
.escribir input{flex:1; border:1px solid var(--linea); background:var(--bg-1); border-radius:99px; padding:12px 18px; color:var(--ink); font-size:14px; outline:none}
.escribir input:focus{border-color:var(--accent)}
.enviar{width:44px; height:44px; border-radius:50%; border:1px solid var(--linea-fuerte); background:none; color:var(--accent); font-size:15px; transition:background var(--dur-r)}
.enviar:hover{background:var(--linea)}
.costo-nota{text-align:center; font-size:11px; color:var(--ink-3); padding:12px 0 0; text-transform:uppercase; letter-spacing:.04em}
.sin-monedas{text-align:center; padding:20px 0}
.sin-monedas p{font-family:var(--wordmark); font-weight:700; text-transform:uppercase; font-size:16px; margin:0 0 14px}

/* ═══ MODALES ═══ */
/* El modal era la unica superficie del sitio sin papel: una caja plana bg-1
   con borde. Ahora es una hoja como todo lo demas (fibra, sombra fisica,
   tinta oscura). El backdrop era violaceo (rgba(8,3,20)) — un resto de la
   identidad "Aura Viva" ya descartada; pasa al negro calido del tema. */
.modal{
  background-color:var(--papel); background-image:var(--fibra);
  background-size:220px 220px; background-repeat:repeat; background-blend-mode:multiply;
  border:0; border-radius:var(--r); box-shadow:0 26px 60px rgba(0,0,0,.6);
  padding:32px 28px 28px; max-width:400px; width:calc(100vw - 40px); color:var(--papel-tinta);
  transform:rotate(-.4deg);
}
.modal::backdrop{background:rgba(var(--bg-rgb),.84)}
:root[data-theme="light"] .modal::backdrop{background:rgba(36,27,28,.45)}
.modal h3{font-family:var(--wordmark); font-weight:900; text-transform:uppercase; font-size:22px; color:var(--papel-tinta); margin:0 0 8px}
.modal-sub{font-size:12.5px; color:#4E3A20; margin:0 0 20px; line-height:1.55}
.modal-sub b{color:#5E4019}
.modal input{background:rgba(255,250,240,.55); border-color:rgba(36,27,28,.22); color:var(--papel-tinta)}
.modal input::placeholder{color:#7A6A5A}
.modal input:focus{border-color:#7A5526}
.modal .cta-dorado{justify-content:center}
.modal .campo-fecha, .modal .modal-nota{color:#5A4A40}
.modal-alt a{color:#5E4019}
.modal .cerrar{color:#5A4A40}
.modal-error{color:#8E2F2F}
.perfil-datos{color:#4E3A20}
.perfil-datos b{color:var(--papel-tinta)}
.perfil-datos .fila{border-bottom-color:rgba(36,27,28,.18)}
.modal form{display:flex; flex-direction:column; gap:14px}
.modal .cerrar{position:absolute; top:16px; right:18px; border:0; background:none; color:var(--ink-3); font-size:14px}
.modal-alt{text-align:center; font-size:12px; margin:4px 0 0}
.modal-alt a{color:var(--accent)}
.modal-error{color:#d98; font-size:12px; text-align:center; margin:6px 0 0}
.modal-nota{font-size:10px; color:var(--ink-3); text-align:center; margin:14px 0 0}
.campo-fecha{font-size:10.5px; color:var(--ink-3); margin:-6px 0 0}
/* ═══ TIENDA — página propia, packs ilustrados sobre papel ═══ */
.tienda-hero{max-width:640px; margin:0 auto; padding:70px 40px 8px; text-align:center}
.tienda-hero h1{font-family:var(--display); font-weight:500; font-size:clamp(38px,5vw,58px); margin:0 0 14px; color:var(--ink)}
.tienda-hero>p{font-family:var(--ui); font-size:17px; color:var(--ink-dim); margin:0 0 22px}
.tienda-que-son{display:inline-block; text-align:left}
.tienda-que-son summary{
  cursor:pointer; list-style:none; font-family:var(--maquina); font-size:12.5px;
  color:var(--accent-2); letter-spacing:.04em; display:inline-flex; align-items:center; gap:7px;
  border-bottom:1px solid var(--linea-fuerte); padding-bottom:2px;
}
.tienda-que-son summary::-webkit-details-marker{display:none}
.tienda-que-son summary::after{content:"→"; transition:transform .2s}
.tienda-que-son[open] summary::after{transform:rotate(90deg)}
.tienda-que-son p{font-size:13.5px; color:var(--ink-dim); max-width:44ch; margin:12px 0 0; line-height:1.6}

.tienda-eyebrow{
  text-align:center; font-family:var(--maquina); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-2); margin:46px 0 26px;
}
.packs-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px;
  max-width:var(--contenido); margin:0 auto; padding:0 40px 10px;
}
.pack{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:30px 20px 24px; cursor:pointer; text-align:center; border-radius:var(--r);
  /* --giro (no un nombre propio): es la variable que lee .revelar.visible, asi
     el pack QUEDA torcido al asentarse en vez de enderezarse al aparecer. */
  --giro:-.6deg; transform:rotate(var(--giro));
  transition:transform var(--dur-r), box-shadow var(--dur-r);
}
.pack:nth-child(even){--giro:.6deg}
.pack:hover{transform:rotate(var(--giro)) translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.4)}
.pack.mejor{box-shadow:0 0 0 2px var(--accent-2), 0 14px 30px rgba(0,0,0,.4)}
.pack.mejor:hover{box-shadow:0 0 0 2px var(--accent-2), 0 18px 36px rgba(0,0,0,.4)}
.pack .badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--maquina); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:#2B211D; background:var(--accent-3); padding:4px 12px; border-radius:99px; box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.pack-arte{width:78px; height:78px; object-fit:contain; margin:6px 0 2px; filter:var(--grade)}
.pack .n{font-family:var(--display); font-size:30px; font-weight:600; color:var(--papel-tinta); line-height:1}
.pack .n small{display:block; font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5A4A40; margin-top:3px}
.pack .nota{font-size:12px; color:#4E3A20; min-height:1.4em}
.pack-pie{display:flex; align-items:center; gap:10px; margin-top:8px; width:100%}
.pack .usd{font-family:var(--display); font-weight:600; font-size:16px; color:var(--papel-tinta); flex:1; text-align:left}
.pack-comprar{
  font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#5E4019; border:1px solid rgba(94,64,25,.4); border-radius:99px; padding:6px 14px;
  transition:background var(--dur-r), color var(--dur-r);
}
.pack:hover .pack-comprar{background:rgba(94,64,25,.9); color:#EFE7D9}

.tienda-nota-pago{max-width:520px; margin:8px auto 0; text-align:center; font-size:11px; color:var(--ink-3)}

/* ═══ HISTORIAL ═══
   Estas clases se inyectan desde app.js (abrirHistorial) y NO tenian ninguna
   regla: el estado vacio quedaba pegado al borde izquierdo sin padding, y la
   lista de lecturas salia como texto plano. Mismo papel que el resto del sitio. */
.historial{max-width:640px; margin:0 auto; padding:0 40px 60px}
.h-vacio{
  display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
  padding:44px 34px 38px; transform:rotate(-.5deg); border-radius:var(--r);
}
.h-vacio p{margin:0; font-family:var(--display); font-style:italic; font-size:18px; line-height:1.5; color:var(--papel-tinta); max-width:30ch}
.h-vacio .cta-dorado{justify-content:center}
.h-item{
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--linea); cursor:pointer;
  transition:background var(--dur-r), padding-left var(--dur-r);
}
.h-item:hover{background:rgba(var(--accent-rgb),.06); padding-left:8px}
.h-fecha{grid-row:span 2; font-family:var(--maquina); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.h-pregunta{font-family:var(--display); font-size:16.5px; color:var(--ink); line-height:1.35}
.h-cartas{font-size:12.5px; color:var(--ink-dim); letter-spacing:.02em}
@media (max-width:640px){
  .historial{padding:0 18px 40px}
  .h-vacio{padding:34px 22px 30px}
  .h-item{grid-template-columns:1fr; gap:4px}
  .h-fecha{grid-row:auto}
}

.confianza-fila{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px;
  max-width:var(--contenido); margin:50px auto 0; padding:28px 40px; border-top:1px solid var(--linea);
}
.confianza-item{display:flex; align-items:flex-start; gap:12px}
.confianza-item svg{width:22px; height:22px; flex:0 0 auto; color:var(--accent-2); margin-top:2px}
.confianza-item b{display:block; font-family:var(--ui); font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px}
.confianza-item span{font-size:12px; color:var(--ink-dim); line-height:1.5}
.perfil-datos{font-size:13px; color:var(--ink-dim); margin:0 0 18px}
.perfil-datos .fila{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--linea)}
.perfil-datos b{color:var(--ink)}
#btnSalir{background:none; border:1px solid var(--linea-fuerte); color:var(--ink-dim)}
#btnSalir:hover{border-color:var(--accent); color:var(--ink)}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:9; background:var(--bg-1); border:1px solid var(--accent); color:var(--ink); border-radius:99px; padding:11px 22px; font-size:13px; box-shadow:var(--sombra); max-width:calc(100vw - 40px); text-align:center}
.toast b{color:var(--accent)}

/* ═══ NAV mobile ═══ */
.nav{position:fixed; bottom:0; left:0; right:0; display:flex; z-index:5; background:var(--bg); border-top:1px solid var(--linea)}
.nav a{flex:1; text-align:center; padding:12px 0 13px; text-decoration:none; color:var(--ink-3); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.nav a .ic{display:block; width:20px; height:20px; margin:0 auto 4px}
.nav a .ic svg{width:100%; height:100%}
.nav a.activo{color:var(--accent)}
.app{padding-bottom:66px}

/* ═══ ESCRITORIO ═══ */
@media (min-width:860px){
  .grid-lecturas{grid-template-columns:repeat(4,1fr)}
  .app{padding-bottom:0}
  .nav{display:none}
  .nav-centro{display:flex; align-items:center; gap:32px}
  .nav-centro a{color:var(--ink-dim); text-decoration:none; font-size:12px; letter-spacing:.04em; transition:color var(--dur-r)}
  .nav-centro a:hover{color:var(--accent)}
  .nav-der-link{display:inline-block}
  .abanico-elegir{height:250px; --ae-ancho:88px; --ae-pivote:470px}
  .carta{width:118px}
  .mesa-instruccion{font-size:24px}
  .pl-poema{font-size:19px}
}
@media (max-width:760px){
  .top{padding:18px 18px 0}
  .word{font-size:16px}
  .top-der{gap:12px}
  .top-der .nav-der-link, .top-der .saldo .saldo-lbl{display:none}
  .carrusel{min-height:auto; padding:26px 0 34px}
  .slide{position:relative; opacity:1}
  .slide-img{position:absolute; inset:0}
  .slide-cap{padding:0 18px}
  .hoja{max-width:none; padding:32px 26px 30px}
  .slide-cap h1{font-size:clamp(21px,6.2vw,28px); line-height:1.3}
  .slide-cap p{font-size:15px; margin-bottom:22px}
  /* justify-content:center + overflow-x deja los primeros items INALCANZABLES:
     el scroll no llega antes del inicio de la caja. En angosto va flex-start. */
  .seccion-cab-vista{padding:0 18px}
  .categorias{justify-content:flex-start; padding:24px 18px 20px}
  .cat{font-size:15px; padding:6px 8px}
  .cat-medallon{width:40px; height:40px}
  .cat-medallon svg{width:17px; height:17px}
  .cat + .cat{padding-left:14px; margin-left:4px}
  .seccion-grid{padding:56px 18px 8px}
  .grid-lecturas{grid-template-columns:repeat(2,1fr)}
  .ayuda-elegir, .categorias, .como-funciona, .franja{padding-left:18px; padding-right:18px}
  .volver, .pl-compacta, .pl-detalle, .pl-bloque{padding-left:18px; padding-right:18px}

}