/* Mujer de Fe · portada · 1. El hero: el medallón del logo y su galaxia dorada están en el lienzo 3D (a la derecha; en el móvil, arriba).
   Aquí solo va el texto, a la izquierda, sobre la noche. Sin 3D, el logo se ve en un círculo con su halo. */

/* La portada es de noche, y el mundo 3D va fijo detrás de todo. Con él (con-3d, lo pone portada.js) las secciones son
   transparentes y se ve a través; sin él (sin WebGL, sin JS o con movimiento reducido), cada sección lleva su fondo */
body.pagina-inicio { background: var(--noche); }
.mundo { display: none; }
.con-3d .mundo { display: block; position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; height: 100lvh; }

.hero-escena {
  position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  display: grid; align-items: center;
  background: radial-gradient(circle at 72% 48%, #4A2A3C 0%, #1D0F1E 38%, #07040A 100%);
}
.con-3d .hero-escena { background: none; }

.hero-respaldo {
  position: absolute; right: 9vw; top: 50%; width: min(36vw, 480px); translate: 0 -50%; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--oro), 0 0 80px 20px rgba(243, 212, 138, .35);
}
.con-3d .hero-respaldo { display: none; }

.hero-texto {
  position: relative; z-index: 2; width: min(48%, 640px);
  margin-left: max(var(--margen), calc((100vw - 1400px) / 2)); padding-top: 40px;
  color: #F8EBD9;
}
.hero-ante { margin-bottom: 4px; }
.hero-titulo { position: relative; display: inline-block; margin: 0 0 4px -.06em; font-weight: 400; line-height: 1; white-space: nowrap; }
.escritura {
  display: inline-block; padding: .08em .14em .22em .04em;
  font: 400 clamp(96px, 11.5vw, 186px)/.86 var(--caligrafia);
  /* oro con un reflejo que pasa, y un resplandor alrededor */
  background: linear-gradient(100deg, #E8B95A 0%, #FFF1C9 18%, #E2AE4E 36%, #F7D58C 50%, #FFF6DD 58%, #D9A546 76%, #F3D48A 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(243, 190, 100, .45));
  animation: reflejo-oro 6s ease-in-out infinite alternate;
}
@keyframes reflejo-oro { to { background-position: 100% 0; } }
.hero-corazon {
  position: absolute; top: .12em; right: -.12em; width: .36em; height: .32em; font-size: clamp(96px, 11.5vw, 186px);
  fill: none; stroke: var(--rosa); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(233, 121, 146, .8));
}
.hero-lema { margin: 0 0 16px; font: 600 clamp(13px, 1.1vw, 16px)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-claro); }
.hero-intro { max-width: 25em; margin: 0 0 34px; font: 400 clamp(17px, 1.35vw, 21px)/1.6 var(--serif); color: rgba(248, 235, 217, .86); }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* «Desliza»: una línea de luz que cae una y otra vez */
.desliza {
  position: absolute; z-index: 2; left: 50%; bottom: 26px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(243, 212, 138, .8);
}
.desliza-linea { position: relative; width: 1.5px; height: 56px; overflow: hidden; background: rgba(243, 212, 138, .2); }
.desliza-linea::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--oro-claro); box-shadow: 0 0 8px var(--oro-claro); animation: caer 2s var(--curva) infinite; }
@keyframes caer { to { top: 110%; } }

/* Estados de partida de la entrada (los anima principal.js en cuanto llega la luz) */
.efectos .hero-texto > :not(.hero-titulo), .efectos .desliza { opacity: 0; }
.efectos .escritura { clip-path: inset(-30% 100% -40% -10%); }
.efectos .hero-corazon { opacity: 0; }

@media (max-width: 1100px) and (min-width: 801px) {
  .hero-texto { width: min(52%, 560px); }
}

/* ---------- Vertical: el medallón arriba (en el lienzo) y el texto debajo, centrado ---------- */
@media (max-width: 800px) {
  .hero-escena { align-items: end; }
  .hero-respaldo { left: 50%; right: auto; top: 18%; width: 62vw; translate: -50% 0; }
  .hero-texto { width: auto; margin: 0 var(--margen); padding: 0 0 34px; text-align: center; }
  .hero-ante { display: none; }
  .escritura, .hero-corazon { font-size: clamp(72px, 21vw, 110px); }
  .hero-lema { font-size: 11.5px; letter-spacing: .22em; margin-bottom: 10px; }
  .hero-intro { margin: 0 auto 22px; font-size: 16px; }
  .hero-acciones { justify-content: center; }
  .hero-acciones .enlace-suave { display: none; }
  .desliza { display: none; }
}