/* ============================================================
   HOME (index.html) — dirección visual editorial/monocromática
   (branding 2026-08). Recorrido: Hero → Explorar → La Mesa →
   Experiencia de producto → Memoria → Hoy en Véloris → Revista →
   Newsletter → CTA final → Footer.
   ============================================================ */

/* html no es descendiente de body.page-home, así que var(--void) en
   html,body (css/base.css) sigue resolviendo el valor claro de :root ahí
   — se ve como un borde crema en overscroll/resize. home.css es
   exclusivo de esta página: fijar el valor oscuro aquí es seguro. */
html{background:#08080c;}

/* ---- Utilidad accesible: oculta visualmente sin quitar del árbol de
   accesibilidad (label del email de newsletter, que hoy solo tenía
   placeholder). ---- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- SCROLL REVEAL — css/layout.css define .reveal compartido por todo
   el sitio (28px / 1.2s); aquí se ajusta solo para esta página a la
   medida de Fase 4 (16-20px / 700-800ms), una sola ejecución por
   elemento (misma lógica de js/core/reveal.js, sin tocarla). ---- */
body.page-home .reveal{
  transform:translateY(18px);
  transition:opacity 0.75s var(--ease-premium), transform 0.75s var(--ease-premium);
}

/* ---- RITMO EDITORIAL — antes cada sección repetía el mismo padding
   (130/104), lo que aplanaba el recorrido en un solo tono. Tres pasos
   reutilizables en vez de valores sueltos por sección, para que el
   scroll tenga cadencia (expansión → concentración → expansión) sin
   perder el aire característico de Véloris. Hero mantiene su propio
   padding (no forma parte de esta escala, ver más abajo). ---- */
:root{
  --rhythm-flagship-t:128px; --rhythm-flagship-b:100px;
  --rhythm-standard-t:108px; --rhythm-standard-b:88px;
  --rhythm-compact-t:88px;   --rhythm-compact-b:72px;
}
@media (max-width:720px){
  :root{
    --rhythm-flagship-t:88px; --rhythm-flagship-b:68px;
    --rhythm-standard-t:72px; --rhythm-standard-b:56px;
    --rhythm-compact-t:56px;  --rhythm-compact-b:44px;
  }
}

/* ---- CAPÍTULOS — en la portada las secciones pierden el marco de
   tarjeta: el vacío es el hilo continuo, la separación la marcan el
   espacio y los section-divider, no bordes duros. ---- */
#landing.chapters .landing-section{
  background:transparent;
  border:none;border-radius:0;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  /* Paso "standard" por defecto — las secciones flagship/compactas lo
     sobreescriben explícitamente más abajo, junto a cada bloque. */
  padding:var(--rhythm-standard-t) 48px var(--rhythm-standard-b);
  margin:0 auto;
}
@media (max-width:720px){
  #landing.chapters .landing-section{padding:var(--rhythm-standard-t) 24px var(--rhythm-standard-b);margin:0 auto;}
}

/* Flagship: La Mesa y Memoria — la respiración más amplia después del
   Hero. Explorar/Experiencia/Hoy/Revista quedan en el paso "standard"
   por defecto (regla de arriba); Newsletter/Aprende más/CTA final usan
   el paso "compact" (definido junto a cada bloque, más abajo). */
/* Prefijo #landing (2 IDs) a propósito: #mesa-reveal/#memoria también
   llevan la clase .landing-section, y #landing.chapters .landing-section
   (1 id + 2 clases) tiene más especificidad que un solo #id — sin el
   prefijo, la regla de abajo perdía en cascada y quedaban en "standard". */
#landing #mesa-reveal,#landing #memoria{
  padding-top:var(--rhythm-flagship-t);
  padding-bottom:var(--rhythm-flagship-b);
}

/* ============================================================
   HERO — texto a la izquierda, The Card a la derecha, tres puntos
   temporales debajo. Sin estrellas/órbitas/partículas: solo tipografía
   y espacio.
   ============================================================ */
#hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:150px 48px 80px;
}
.hero-grid{
  width:100%;max-width:1160px;margin:0 auto;
  display:grid;grid-template-columns:1fr 320px;gap:96px;
  align-items:center;
}
.hero-kicker{
  font-size:var(--fs-kicker);letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:24px;
}
.hero-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(38px, 5vw, 56px);line-height:1.1;letter-spacing:-0.015em;
  color:var(--ink);max-width:460px;
  text-wrap:balance;
}
.hero-title em{font-style:italic;color:var(--gold);font-weight:400;}
.hero-sub{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:16px;line-height:1.65;color:var(--muted);
  max-width:420px;margin-top:26px;
}
.hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:40px;
}
.hero-cta .action-btn.primary{padding:15px 32px;font-size:13px;letter-spacing:1.5px;}
.hero-cta-ghost{
  font-size:13px;letter-spacing:0.5px;
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium);
}
.hero-cta-ghost:hover{color:var(--ink);border-color:var(--border);}
.hero-cta-ghost:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:3px;}

.hero-card-col{
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.hero-card-caption{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:13px;color:var(--muted);text-align:center;
}
.hero-timepoints{display:flex;align-items:center;gap:10px;}
.hero-timepoint{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;color:var(--muted);
}
.hero-timepoint .dot{width:5px;height:5px;border-radius:50%;background:var(--mu, #7A7A80);}
.hero-timepoint--now{color:var(--ink);}
.hero-timepoint--now .dot{
  width:7px;height:7px;background:var(--s1, #EDEDEB);
  box-shadow:0 0 14px rgba(237,237,235,0.45);
  animation:timepointGlow 4s ease-in-out infinite;
}
@keyframes timepointGlow{0%,100%{opacity:0.55;}50%{opacity:1;}}
.hero-timepoint-line{width:36px;height:1px;background:var(--s5, rgba(237,237,235,0.08));}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px;text-align:center;justify-items:center;}
  .hero-title,.hero-sub{max-width:100%;}
  .hero-cta{justify-content:center;}
}
@media (max-width:720px){
  #hero{padding:130px 20px 56px;min-height:auto;}
}

/* ============================================================
   EXPLORAR — cuatro filas editoriales numeradas, sin cards de SaaS.
   ============================================================ */
.explorar-list{border-top:1px solid var(--border);}
.explorar-row{
  display:grid;grid-template-columns:40px 160px 1fr 80px;gap:24px;
  align-items:baseline;
  padding:32px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  /* Entrada + hover comparten transition, con delays independientes por
     posición (ver stagger más abajo): translate/border-color siempre
     con delay 0, opacity/transform con el delay escalonado de la fila.
     El hover usa la propiedad `translate` (independiente de `transform`,
     que ya usa la entrada) en vez de padding-left — mismo desplazamiento
     visual sin disparar layout/reflow en cada frame. */
  opacity:0;
  transform:translateY(16px);
  translate:0;
  transition:
    translate var(--dur-base) var(--ease-premium),
    border-color var(--dur-base) var(--ease-premium),
    opacity 0.7s var(--ease-premium),
    transform 0.7s var(--ease-premium);
}
.explorar-row:nth-child(even){background:var(--s7, rgba(237,237,235,0.02));}
.explorar-row:hover,
.explorar-row:focus-visible{
  translate:8px 0;
  border-bottom-color:var(--s4, rgba(237,237,235,0.15));
}
.explorar-row:hover .explorar-row-link,
.explorar-row:focus-visible .explorar-row-link{color:var(--ink);}
.explorar-row:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:-2px;}

/* Stagger discreto: las 4 filas entran juntas pero con un desfase breve,
   una sola vez (activado por #explorar.in-view, ver js/core/reveal.js). */
#explorar.in-view .explorar-row{opacity:1;transform:translateY(0);}
#explorar.in-view .explorar-row:nth-child(1){transition-delay:0ms,0ms,0ms,0ms;}
#explorar.in-view .explorar-row:nth-child(2){transition-delay:0ms,0ms,70ms,70ms;}
#explorar.in-view .explorar-row:nth-child(3){transition-delay:0ms,0ms,140ms,140ms;}
#explorar.in-view .explorar-row:nth-child(4){transition-delay:0ms,0ms,210ms,210ms;}
.explorar-row-num{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:15px;color:var(--mu, #7A7A80);
}
.explorar-row-title{font-size:18px;color:var(--ink);}
.explorar-row-desc{font-size:14px;color:var(--muted);line-height:1.6;}
.explorar-row-link{
  font-size:13px;color:var(--muted);
  transition:color var(--dur-micro) var(--ease-premium);
}
/* Adelantado de 720px a 820px (Fase 6.1, P2): a 768px la columna de
   descripción quedaba a ~257px, demasiado estrecha para el texto de la
   fila — el layout de una columna entra antes para dar más aire. */
@media (max-width:820px){
  .explorar-row{grid-template-columns:24px 1fr;row-gap:8px;}
  .explorar-row-desc,.explorar-row-link{grid-column:2;}
}

/* ============================================================
   LA MESA — reveal de producto. Sin inclinación 3D: solo hover muy
   sutil (borde + opacidad).
   ============================================================ */
/* Padding vertical de #mesa-reveal: definido junto al resto de la escala
   de ritmo (ver bloque "RITMO EDITORIAL" al inicio del archivo) — aquí
   solo el resto del bloque de La Mesa. */
.mesa-reveal-link{
  display:block;position:relative;
  max-width:980px;margin:0 auto;
  border-radius:8px;border:1px solid var(--border);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-premium);
}
.mesa-reveal-link:hover,
.mesa-reveal-link:focus-visible{
  border-color:var(--s4, rgba(237,237,235,0.15));
  opacity:0.92;
}
.mesa-reveal-link img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(0.35);
}
.mesa-reveal-caption{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
  padding:22px 28px;
  border-top:1px solid var(--border);
  background:var(--void-2);
}
.mesa-reveal-caption .tilt-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;font-style:italic;
  font-size:var(--fs-sub);color:var(--ink);
}
.mesa-reveal-caption .tilt-sub{font-size:12.5px;color:var(--muted);}
@media (max-width:720px){
  .mesa-reveal-caption{padding:18px 20px;}
}

/* ============================================================
   EXPERIENCIA DE PRODUCTO — mockup estático: The Card mediana +
   interpretación + pregunta + referencia de continuidad.
   ============================================================ */
.experiencia-grid{
  display:grid;grid-template-columns:160px 1fr;gap:56px;align-items:center;
  max-width:900px;margin:0 auto;
}
.experiencia-kicker{
  font-size:var(--fs-kicker);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.experiencia-frase{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:22px;line-height:1.5;color:var(--ink);max-width:480px;margin-bottom:22px;
}
.experiencia-pregunta{font-size:14px;color:var(--muted);margin-bottom:26px;}
.experiencia-continuidad{
  font-size:12px;color:var(--muted);
  border-top:1px solid var(--border);padding-top:16px;
}
@media (max-width:720px){
  .experiencia-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
}

/* ============================================================
   MEMORIA — timeline editorial estático (visitante y autenticado).
   ============================================================ */
#memoria{max-width:900px;}
.memoria-timeline{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
}
.memoria-row{
  display:grid;grid-template-columns:110px 190px 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--border);
}
.memoria-fecha{font-size:12px;color:var(--muted);}
.memoria-titulo{font-size:15px;color:var(--ink);}
.memoria-desc{font-size:14px;color:var(--muted);}
.memoria-row--conexion{
  padding:28px 24px;border-left:2px solid var(--s3, rgba(237,237,235,0.4));
  background:var(--s7, rgba(237,237,235,0.02));
}
.memoria-row--conexion .memoria-fecha{color:var(--s2, rgba(237,237,235,0.7));}
.memoria-row--conexion .memoria-titulo{font-size:16px;}
.memoria-row--conexion .memoria-desc{color:var(--s2, rgba(237,237,235,0.7));}
.memoria-row--patron{
  display:block;padding:36px 0;
}
.memoria-row--patron .memoria-fecha{margin-bottom:10px;display:block;}
.memoria-row--patron p{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:20px;line-height:1.5;color:var(--ink);max-width:600px;
}
.memoria-row--hoy{
  display:grid;grid-template-columns:110px 190px 1fr;gap:20px;
  align-items:center;border-bottom:1px solid var(--border);
}
.memoria-hoy-dot{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--s2, rgba(237,237,235,0.7));
}
.memoria-hoy-dot span{
  width:6px;height:6px;border-radius:50%;background:var(--s1, #EDEDEB);
  box-shadow:0 0 12px rgba(237,237,235,0.5);
  animation:memoriaGlow 3.5s ease-in-out infinite;display:inline-block;
}
@keyframes memoriaGlow{0%,100%{opacity:0.5;}50%{opacity:1;}}
.memoria-cta{display:flex;justify-content:center;padding-top:56px;}
@media (max-width:720px){
  .memoria-row,.memoria-row--hoy{grid-template-columns:80px 1fr;row-gap:6px;}
  .memoria-desc{grid-column:1 / -1;}
}

/* ============================================================
   HOY EN VÉLORIS — contenido vivo (main.js: loadDailyContent /
   renderDailyContent). Mismo markup e IDs que antes, reubicados aquí.
   ============================================================ */
#hoy{max-width:1080px;}
.hero-meta{
  display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;
  padding:0 12px 40px;
  font-size:12.5px;color:var(--muted);
}
.hero-meta-item{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.hero-meta-item.energy{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:400;
  color:var(--ink);flex:1 1 220px;justify-content:center;text-align:center;
  white-space:normal;
}
.hero-meta-item.counter{font-size:12px;}
.hero-meta-item.counter strong{color:var(--ink);font-weight:600;}
.hero-meta-item.moon{
  background:none;border:none;padding:0;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:var(--muted);
  cursor:pointer;
}
.hero-meta-item.moon:hover span{color:var(--ink);}
.hero-meta-item.moon:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:3px;}
.hero-meta-item.streak{font-size:12px;}
.hero-meta-item.streak strong{color:var(--ink);font-weight:600;}
.hero-meta-sep{width:1px;height:16px;background:var(--border);flex:0 0 auto;}
.moon-icon{
  position:relative;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;overflow:hidden;
  background:var(--s3, rgba(237,237,235,0.4));
  border:1px solid var(--s4, rgba(237,237,235,0.15));
}
.moon-shadow{
  position:absolute;top:-1px;left:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--void);
  transition:transform var(--dur-base) var(--ease-premium);
}
@media (max-width:820px){
  .hero-meta{flex-direction:column;gap:10px;padding:0 22px 32px;}
  .hero-meta-sep{display:none;}
  .hero-meta-item.energy{text-align:center;}
}
@media (max-width:480px){
  .hero-meta-item.counter, .hero-meta-item.streak{display:none;}
}

.oracle-wrap{width:100%;max-width:920px;margin:0 auto;}
.oracle-panel{
  width:100%;
  display:grid;grid-template-columns:1.1fr 0.9fr;grid-template-rows:auto auto;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  text-align:left;
}
.oracle-cell{
  background:var(--void-2);
  padding:26px 28px;
  transition:transform var(--dur-micro) var(--ease-premium);
}
.oracle-cell.horoscope{
  grid-column:1;grid-row:1 / span 2;
  display:flex;flex-direction:column;justify-content:center;
}
.oracle-cell.card-of-day{grid-column:2;grid-row:1;display:flex;gap:18px;align-items:center;}
.oracle-cell.insights{grid-column:2;grid-row:2;}
.oracle-kicker{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.oracle-kicker .dot{
  width:6px;height:6px;border-radius:50%;background:var(--s1, #EDEDEB);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:0.35;}50%{opacity:0.9;}}

.zodiac-picker{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  margin-bottom:18px;
}
.zodiac-chip{
  font-family:'Space Grotesk',sans-serif;
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--muted);
  padding:8px 0;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.zodiac-chip:hover{border-color:var(--s4, rgba(237,237,235,0.15));color:var(--ink);}
.zodiac-chip:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:2px;}
.zodiac-chip.active{
  border-color:var(--s3, rgba(237,237,235,0.4));color:var(--ink);
  background:var(--s6, rgba(237,237,235,0.04));
  transform:translateY(-1px);
}
.zi{width:19px;height:19px;display:block;margin:0 auto;color:inherit;}
.zi-sm{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:2px;}
.horoscope-sign-name{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:var(--fs-sub);margin-bottom:8px;color:var(--ink);
}
.horoscope-text{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:15px;line-height:1.7;color:var(--muted);
  min-height:78px;
}
.horoscope-text .fx-fade{animation:textFadeIn 0.5s ease;}
@keyframes textFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.card-of-day-visual{flex:0 0 74px;}
.card-of-day-visual img{
  width:100%;border-radius:4px;display:block;
  border:1px solid var(--border);
  filter:grayscale(0.5);
}
.card-of-day-name{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:16px;margin-bottom:6px;color:var(--ink);
}
.card-of-day-frase{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:400;
  font-size:13.5px;color:var(--muted);line-height:1.5;
}
.insight-item{padding:10px 0;border-top:1px solid var(--border);}
.insight-item:first-child{border-top:none;padding-top:0;}
.insight-item strong{
  display:block;font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;font-weight:500;margin-bottom:3px;color:var(--ink);
}
.insight-item p{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:12.5px;color:var(--muted);line-height:1.5;
}
@media (max-width:820px){
  .oracle-panel{grid-template-columns:1fr;}
  .oracle-cell.horoscope,.oracle-cell.card-of-day,.oracle-cell.insights{grid-column:1;}
  .oracle-cell.horoscope{grid-row:auto;}
  .oracle-cell.card-of-day{grid-row:auto;}
  .oracle-cell.insights{grid-row:auto;}
}

/* ============================================================
   REVISTA — filas editoriales en vez de grid de blog. Mismas clases
   que renderFeed() en main.js (feed-card/feed-media/feed-kicker/
   feed-titulo/feed-texto): solo cambia la hoja de estilos.
   ============================================================ */
.feed-grid{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
}
.feed-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:22px 0;text-decoration:none;
  border-bottom:1px solid var(--border);
  translate:0;
  transition:translate var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-premium);
}
.feed-card:hover,
.feed-card:focus-visible{translate:6px 0;border-bottom-color:var(--s4, rgba(237,237,235,0.15));}
.feed-card:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:4px;}
.feed-media{display:none;}
.feed-kicker{
  grid-column:1;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
}
.feed-titulo{
  grid-column:2;
  font-family:'Fraunces','Georgia',serif;font-weight:400;font-size:15px;
  color:var(--s2, rgba(237,237,235,0.7));line-height:1.3;margin:0;
  transition:color var(--dur-micro) var(--ease-premium);
}
.feed-card:hover .feed-titulo{color:var(--ink);}
.feed-card.featured .feed-titulo{
  grid-column:1 / -1;grid-row:1;
  font-family:'Fraunces','Georgia',serif;font-weight:400;font-style:italic;
  font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--ink);
}
.feed-card.featured .feed-kicker{grid-row:2;}
.feed-texto{
  grid-column:1 / -1;grid-row:3;
  font-family:'Fraunces','Georgia',serif;font-weight:300;font-size:14px;
  color:var(--muted);line-height:1.6;margin:8px 0 0;max-width:640px;
}
.feed-card:not(.featured) .feed-texto{display:none;}
.feed-card .action-btn{
  grid-column:3;grid-row:1;
  border:none;background:none;padding:0;color:var(--mu, #7A7A80);
  pointer-events:none;font-size:14px;
  transition:color var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.feed-card .action-btn::before{content:'→';}
.feed-card .action-btn *{display:none;}
.feed-card:hover .action-btn{color:var(--ink);transform:translateX(3px);}
.feed-card.featured .action-btn{grid-row:4;justify-self:start;}
@media (max-width:600px){
  .feed-card{grid-template-columns:1fr auto;}
  .feed-kicker{grid-column:1 / -1;grid-row:1;}
  .feed-titulo{grid-column:1;grid-row:2;}
  .feed-card .action-btn{grid-column:2;grid-row:2;}
}

/* ============================================================
   APRENDE MÁS — enlaza los clusters SEO (horóscopo/tarot/
   compatibilidad); se conserva el contenido/rutas existentes, tratamiento
   más ligero que Explorar: solo texto, sin número.
   ============================================================ */
#landing #aprende-mas{
  padding-top:var(--rhythm-compact-t);
  padding-bottom:var(--rhythm-compact-b);
}
.aprende-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.aprende-card{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 24px;text-decoration:none;
  background:var(--void-2);
  transition:background var(--dur-micro) var(--ease-premium);
}
.aprende-card:hover,
.aprende-card:focus-visible{background:var(--s6, rgba(237,237,235,0.04));}
.aprende-card-kicker{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
.aprende-card-titulo{
  font-family:'Fraunces','Georgia',serif;font-weight:400;font-size:var(--fs-sub);
  color:var(--ink);
}
@media (max-width:720px){
  .aprende-grid{grid-template-columns:1fr;}
}

/* ============================================================
   NEWSLETTER — cierre editorial: campo subrayado, sin caja de
   formulario SaaS.
   ============================================================ */
#landing #newsletter{padding:var(--rhythm-compact-t) 24px var(--rhythm-compact-b);}
#newsletter .section-title{font-size:clamp(24px, 2.6vw, 30px);font-style:italic;}
#newsletter .section-sub{margin-bottom:44px;font-size:15px;}
.newsletter-form{
  max-width:480px;margin:0 auto;
  display:flex;gap:18px;align-items:flex-end;
}
.newsletter-form .config-input{
  flex:1;width:auto;
  background:none;border:none;border-bottom:1px solid var(--border);
  border-radius:0;padding:12px 2px;
  font-size:14px;text-align:left;
}
.newsletter-form .config-input:focus{border-bottom-color:var(--s3, rgba(237,237,235,0.4));}
@media (max-width:560px){
  .newsletter-form{flex-direction:column;}
}

/* ============================================================
   CTA FINAL — cierre emocional, sin ornamento.
   ============================================================ */
#cta-final{
  max-width:1200px;margin:0 auto;
  padding:var(--rhythm-compact-t) 32px var(--rhythm-compact-b);
  text-align:center;
}
.cta-final-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;font-style:italic;
  font-size:clamp(28px, 3.6vw, 42px);color:var(--ink);margin-bottom:32px;
}
@media (max-width:720px){
  #cta-final{padding:var(--rhythm-compact-t) 20px var(--rhythm-compact-b);}
}

/* ============================================================
   AJUSTES DE COMPONENTES COMPARTIDOS — nav/footer/botones son
   markup y lógica compartidos por todas las páginas (partials/nav.html,
   partials/footer.html, css/components/buttons.css). Aquí solo se
   sobreescribe COLOR, aislado a body.page-home: ni el markup, ni la
   lógica JS, ni el resto del sitio se tocan.
   ============================================================ */
body.page-home .btn-enter:hover,
body.page-home .config-btn:hover{box-shadow:0 0 20px rgba(237,237,235,0.08);}
body.page-home .btn-enter{border-color:var(--s4, rgba(237,237,235,0.15));}
body.page-home .btn-enter:hover{
  border-color:var(--s3, rgba(237,237,235,0.4));
  color:var(--ink);
  box-shadow:0 0 22px rgba(237,237,235,0.08);
}
body.page-home .config-btn{border-color:var(--s4, rgba(237,237,235,0.15));}
body.page-home .config-btn:hover{border-color:var(--s3, rgba(237,237,235,0.4));color:var(--ink);}
body.page-home .action-btn.primary{
  background:var(--s1, #EDEDEB);color:var(--void);
}
body.page-home .action-btn.primary:hover{
  box-shadow:0 0 20px rgba(237,237,235,0.16);
  color:var(--void);
}
body.page-home .action-btn.dark:hover{
  background:var(--gh, #1A1A20);
  box-shadow:0 0 18px rgba(237,237,235,0.1);
}

body.page-home .nav-star-icon{
  filter:none;
  animation:navStarPulseMono 4.5s ease-in-out infinite;
}
body.page-home .nav-star-btn:hover .nav-star-icon,
body.page-home .nav-star-btn:focus-visible .nav-star-icon{
  filter:drop-shadow(0 0 10px rgba(237,237,235,0.4));
  animation-play-state:paused;
}
body.page-home .nav-star-btn[aria-expanded="true"] .nav-star-icon{
  filter:drop-shadow(0 0 14px rgba(237,237,235,0.5));
}
@keyframes navStarPulseMono{
  0%,100%{filter:drop-shadow(0 0 4px rgba(237,237,235,0.12));}
  50%{filter:drop-shadow(0 0 9px rgba(237,237,235,0.28));}
}
body.page-home .nav-menu-link:hover,
body.page-home .nav-locale-menu button:hover,
body.page-home .nav-avatar-menu a:hover,
body.page-home .nav-avatar-menu button:hover,
body.page-home .nav-menu-tile:hover{
  background:var(--s6, rgba(237,237,235,0.04));color:var(--ink);
}
body.page-home .nav-locale-btn:hover{color:var(--ink);}
body.page-home .nav-avatar{border-color:var(--s4, rgba(237,237,235,0.15));background:var(--s6, rgba(237,237,235,0.04));color:var(--ink);}

body.page-home .section-label{color:var(--muted);opacity:1;}
body.page-home .section-divider::before,
body.page-home .section-divider::after{background:linear-gradient(to right, transparent, rgba(237,237,235,0.15));}
body.page-home .section-divider::after{background:linear-gradient(to left, transparent, rgba(237,237,235,0.15));}
body.page-home .section-divider span{background:var(--s3, rgba(237,237,235,0.4));box-shadow:none;}

body.page-home #landing-footer{background:var(--void-2);}
/* #footerWordmarkGradient: la regla monocromática ahora vive sin scope
   en css/layout.css (aplica a toda la plataforma) — este bloque quedó
   redundante y se retiró en la migración de branding 2026-08. */
body.page-home .footer-col-title{color:var(--muted);opacity:1;}
body.page-home .footer-links a:hover{color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  .vcard--lg, .hero-timepoint--now .dot, .memoria-hoy-dot span,
  .oracle-kicker .dot, .nav-star-icon{animation:none !important;}
  .explorar-row, .feed-card, .mesa-reveal-link, .reveal{transition:none !important;}
  .reveal, .explorar-row{opacity:1 !important;transform:none !important;}
}