/* ======================================================================
   layout.css — Reglas de layout por secciones (sin tocar estilos de .btn)
   ====================================================================== */

/* Bloqueo de scroll cuando hay overlay o modales abiertos */
body.no-scroll {
  overflow: hidden;
  height: 100vh;     /* evita "scroll elástico" en iOS */
  overscroll-behavior: contain;
}

/* ===========================
   Overlay: centrado perfecto
   (id real en tu HTML: #welcome-overlay)
   =========================== */
#welcome-overlay{
  display:flex;               /* centra usando flexbox */
  align-items:center;         /* centro vertical */
  justify-content:center;     /* centro horizontal */
}

#welcome-overlay .overlay-inner{
  text-align:center;          /* alinea texto e hijos al centro */
  margin:0 auto;              /* asegura centrado del bloque interno */
}

/* ---------------------------
   Espaciados guía (A–F) Hero
----------------------------*/
.hero .top-space-A { margin-top: var(--spaceA); }
.hero .space-B     { margin-top: var(--spaceB); }
.hero .space-C     { margin-top: var(--spaceC); }
.hero .space-D     { margin-top: var(--spaceD); }
.hero .space-E     { margin-top: var(--spaceE); }
.hero .space-F     { margin-top: var(--spaceF); }

/* ---------------------------
   Hero: estructura de capas
----------------------------*/
.hero { position: relative; isolation: isolate; }

.hero .bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* fondo más atrás */
  background: url("../assets/WEB_MIS15CLARA_HERO_FONDO.png") center/cover no-repeat;
  will-change: transform;
  background-attachment: fixed; /* sin zoom al final del scroll */
}

.hero .misc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;              /* por encima del fondo, por debajo del contenido */
  pointer-events: none;
  width: 100%;
  height: auto;
  display: block;
}

.hero .content {
  position: relative;
  z-index: 2;              /* contenido siempre por encima */
}

/* ---------------------------
   Hero: flecha indicadora
   (animación definida en animations.css)
----------------------------*/
.hero .arrow{
  width:42px;
  display:block;
  margin:8px auto 0;
  animation:arrowBounce 1.8s cubic-bezier(.22,.61,.36,1) infinite;
  /* mismo tinte rosa oscuro aplicado por filtro */
  filter:invert(26%) sepia(10%) saturate(762%) hue-rotate(303deg) brightness(93%) contrast(87%);
}

/* ---------------------------
   Hero: CTA centrado
----------------------------*/
.cta-wrap{
  display:flex;
  justify-content:center;     /* centra el botón horizontalmente */
  align-items:center;
  margin:0 auto;              /* evita corrimientos laterales */
  width:100%;
}

/* ---------------------------
   Countdown (80% y centrado)
----------------------------*/
.countdown-wrap {
  width: 80%;
  margin: var(--spaceD) auto;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;               /* centra verticalmente números/labels */
}

.countdown .col {
  text-align: center;
  padding: 10px 0 8px;
  position: relative;
}

.countdown .col + .col::before {
  content: "";
  position: absolute;
  left: -.5px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(143, 98, 103, .45);
}

.countdown-sep {
  width: 80%;
  height: 4px;
  background: rgba(143, 98, 103, .25);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* ---------------------------
   Salvaguardas visuales
----------------------------*/
/* Si quedara alguna capa blanca residual en el DOM, ocultarla sin borrar */
.hero .white-mask,
.hero .bg-white,
.hero .overlay-image-white {
  display: none !important;
}

/* ============================================================
   Bloqueo del botón flotante de música mientras overlay activo
   ============================================================ */

/* Por defecto, ocultamos el botón de música si el overlay está visible */
#welcome-overlay[aria-modal="true"] ~ #music-toggle,
body.no-scroll #music-toggle {
  pointer-events: none;   /* desactiva interacción */
  opacity: 0;             /* lo oculta visualmente */
  transition: opacity .4s ease; /* suaviza el fade */
}

/* Cuando el overlay se cierra (no-scroll se quita del body), se reactiva */
body:not(.no-scroll) #music-toggle {
  pointer-events: auto;
  opacity: 1;
}

/* ============================================================
   Bloque separadores de texto del Hero
   ============================================================ */
.separator-block {
  width: 86%;
  margin: 0 auto;
  text-align: center;
}

.separator-block img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 2vh; /* este es el de arriba: línea superior → copy */
}

.separator-block img:last-child {
  width: 70%;
  margin: var(--spaceG) auto 0;   /* 👈 espacio Copy → línea inferior */
}

/* =========================================
   COUNTDOWN 7 columnas con separadores IMG
   ========================================= */
:root{
  --cd-border: rgba(143,98,103,.40); /* rosa oscuro suave */
  --cd-sep-w: 1px;                   /* grosor separador vertical */
}

.countdown-outer{
  width: 86%;
  margin: 0 auto var(--spaceD, 3vh);
}

.countdown-title{
  text-align:center;
  margin: 0 0 1.2vh;
}

/* 4 celdas + 3 separadores (auto = ancho del SVG) */
.countdown-grid.has-seps{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  justify-items: center;
  border: none;              /* 👈 sin marco exterior */
  overflow: visible;         /* permite que las imágenes respiren */
}

/* celda de número + label */
.countdown-grid .cell{
  width: 100%;
  display: grid;
  place-items: center;
  padding: 1.6vh 0;
  border-right: 1px solid var(--cd-border);
  row-gap: .8vh;            /* espacio entre número y label */
}
.countdown-grid .cell:last-child{
  border-right: 0;
}

/* separadores verticales con imagen */
.countdown-grid .sep-v{
  display: flex;
  align-items: stretch;     /* que la imagen estire en alto */
}
.countdown-grid .sep-v img{
  display: block;
  height: 100%;
  width: auto;
}

/* tipografías (pueden quedar aquí o en texts.css si preferís) */
.countdown-grid .num{
  font-size: clamp(38px, 12vw, 62px);
  line-height: 1;
}
.countdown-grid .lbl{
  font-size: clamp(10px, 3vw, 13px);
  letter-spacing: .15em;
}

/* ============================================================
   Sección ¿CUÁNDO?
   ============================================================ */
.section-when{
  position: relative;
  background-color: #e1b1b8;             /* rosa base */
  padding: 12vh 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                      /* evita que la imagen sobresalga */
  margin-top: -1px;          /* solapa 1px para ocultar la línea */
  border-top: 0;             /* por si algún reset agrega borde */
}

/* Fondo decorativo anclado abajo-izquierda */
.section-when::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(100vw, 1080px);   /* <= se adapta al viewport, máx 1080px */
  aspect-ratio: 1080 / 720;    /* proporción correcta del PNG */
  background: url("../assets/cuando_BG.png") left bottom / contain no-repeat;
  pointer-events: none;
}


/* Contenido encima del fondo */
.when-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  display: grid;
  row-gap: 3.6vh;
}


.when-inner{
  width: min(92vw, 980px);
  text-align: center;
  color: #fff;                       /* textos blancos sobre el fondo rosa */
  display: grid;
  row-gap: 3.6vh;                    /* separación entre líneas */
}

/* Barras verticales alrededor de la hora */
.when-time{
  display: inline-flex;
  align-items: center;
  gap: 3vw;
  margin-inline: auto;
}
.when-time::before,
.when-time::after{
  content: "";
  display: block;
  width: 1px;
  height: 1.2em;
  background: rgba(255,255,255,.9);
}
.when-cta{ margin-top: 4vh; }

.when-icon {
  display: block;
  width: clamp(48px, 8vw, 72px);   /* adaptable a móviles y escritorio */
  height: auto;
  margin: 0 auto var(--spaceB);   /* mantiene la coherencia con tus espacios globales */
  /*filter: brightness(0) invert(1);*/ /* convierte el ícono a blanco si es oscuro */
  opacity: 0.95;
}