/* =========================================================
   SECCIONES.CSS — Capa base COMPARTIDA de secciones aditivas + saludo.
   SPEC 0006. Transversal (como motor.js): NO se versiona.

   Qué estiliza:
     (a) Las fichas de sección DINÁMICA `.ti-sec` (las genera el motor desde el
         manifiesto), dirigidas por tokens `--sec-*` que cada plantilla define en
         su :root, CON fallbacks AA por si una plantilla aún no los define.
     (b) El `.saludo` del invitado — SOLO como FALLBACK: las 7 plantillas con
         `.saludo` nativo (editorial, botanico, acuarela, mariposas, luz-celestial,
         logro, liga-heroes) GANAN por cascada porque su hoja se enlaza DESPUÉS de
         esta (ver class-ti-render: secciones.css va ANTES de la hoja de plantilla).
         Las 8 sin `.saludo` propio toman este estilo, legible por --sec-acento-*.
     (c) El pulso `.musica--invita` "toca para sonar" (guard prefers-reduced-motion).

   Contrato de tokens (§4.3), consumidos SIEMPRE con fallback var(--sec-x, <AA>):
     --sec-bg            fondo del recuadro de ficha
     --sec-borde         borde/hairline de la ficha
     --sec-radio         radio de esquinas
     --sec-titulo-font   tipografía del título de sección/saludo
     --sec-titulo-color  color del título (AA sobre --sec-bg)
     --sec-texto-color   color del cuerpo (AA sobre --sec-bg)
     --sec-acento        acento (enlaces, filetes)
     --sec-acento-bg     fondo del recuadro de saludo
     --sec-acento-tinta  texto sobre --sec-acento-bg (AA)
     --sec-acento-boton-bg / --sec-acento-boton-tinta  botón "Ver mi pase"

   Esta hoja NO declara --sec-* en :root: solo los consume (los declara la
   plantilla; el último :root gana por var(), independiente del orden de hojas).
   ========================================================= */

[hidden] { display: none !important; }

/* =========================================================
   Sección dinámica estándar (.ti-sec) — mobile-first, BEM
   ========================================================= */
.ti-sec {
  max-width: var(--ancho, 620px);
  margin: 40px auto;
  padding: 40px 24px;
  background: var(--sec-bg, #f7f5f2);
  color: var(--sec-texto-color, #2a2a2a);
  border: 1px solid var(--sec-borde, rgba(0, 0, 0, .14));
  border-radius: var(--sec-radio, 14px);
  text-align: center;
}

.ti-sec__titulo {
  margin: 0 0 14px;
  font-family: var(--sec-titulo-font, inherit);
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.15;
  color: var(--sec-titulo-color, #1a1a1a);
}

.ti-sec__cuerpo { color: var(--sec-texto-color, #2a2a2a); }

.ti-sec__texto {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Sub-elementos para renderers futuros (lista/enlaces/colores — roadmap 0006 §6) */
.ti-sec__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ti-sec__lista li { padding: 6px 0; }

.ti-sec__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ti-sec__enlaces a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background: var(--sec-acento, #333);
  color: var(--sec-acento-boton-tinta, #fff);
}

.ti-sec__colores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ti-sec__color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
}

/* =========================================================
   Saludo del invitado — SOLO FALLBACK
   Las 7 plantillas con .saludo nativo prevalecen (cargan después).
   ========================================================= */
.saludo {
  text-align: center;
  padding: 40px 24px;
  background: var(--sec-acento-bg, #2b2b2b);
  color: var(--sec-acento-tinta, #ffffff);
}
.saludo__hola {
  font-family: var(--sec-titulo-font, inherit);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.15;
  color: var(--sec-acento-tinta, #ffffff);
}
.saludo__pases {
  margin-top: 6px;
  letter-spacing: .04em;
  opacity: .92;
}
.saludo__pase {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.saludo__pase-btn,
.saludo__pase-ws {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.saludo__pase-btn {
  background: var(--sec-acento-boton-bg, #ffffff);
  color: var(--sec-acento-boton-tinta, #2b2b2b);
}
.saludo__pase-ws {
  border: 2px solid var(--sec-acento-boton-bg, #ffffff);
  color: var(--sec-acento-tinta, #ffffff);
}
.saludo__pase-btn:focus-visible,
.saludo__pase-ws:focus-visible {
  outline: 3px solid var(--sec-acento-boton-bg, #ffffff);
  outline-offset: 2px;
}

/* =========================================================
   Foto del festejado DENTRO del sello/medallón del hero (capa compartida)
   ---------------------------------------------------------
   El motor inyecta <img class="hero__sello-foto"> dentro de cualquier sello
   ([data-rol="hero-sello"]) cuando hay CFG.fotos.hero. La foto se RECORTA a la
   forma del sello (círculo/cuadro) heredando su radio, sin importar la plantilla.
   Cada plantilla ya da tamaño y forma a su sello; el bloque :has() de abajo es
   solo una red de seguridad por si alguno no trajera dimensiones.
   ========================================================= */
.hero__sello-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
/* Salvaguarda: si algún sello no define tamaño propio, la foto no colapsa. */
[data-rol="hero-sello"]:has(.hero__sello-foto) {
  min-width: 64px;
  min-height: 64px;
}

/* =========================================================
   Pulso "toca para sonar" del botón de música (SPEC 0007 pendiente)
   El motor añade .musica--invita a #musica cuando autoGesto está activo.
   Especificidad .musica.musica--invita para ganar sin depender del orden.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .musica.musica--invita {
    animation: ti-musica-pulso 2.4s ease-in-out infinite;
  }
  @keyframes ti-musica-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .30); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  }
}