/* ==========================================================================
   Lev Vygotsky — estilos del sitio
   ========================================================================== */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --morado: #8750f7;
  --morado-oscuro: #2a1454;
  --morado-medio: #5a2fc2;
  --lavanda: #f6f2ff;
  --lavanda-2: #ece4ff;
  --borde: #e6dcfb;
  --texto: #2b2238;
  --texto-suave: #5d5470;
  --blanco: #fff;
  --degradado: linear-gradient(95deg, var(--morado) 0%, var(--morado-oscuro) 100%);
  --sombra: 0 10px 40px rgba(42, 20, 84, .08);
  --sombra-fuerte: 0 18px 50px rgba(42, 20, 84, .16);
  --radio: 20px;
  --radio-grande: 28px;
  --cabecera: 76px;
  --ancho: 1200px;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--morado); text-decoration: none; }
a:hover { color: var(--morado-oscuro); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; color: var(--morado-oscuro); margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--morado-oscuro); color: #fff; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { top: 12px; color: #fff; }
.icono { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.contenedor--estrecho { width: min(780px, 100% - 40px); }

.texto-degradado {
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }

.etiqueta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--morado);
  border: 1px solid var(--borde);
  background: var(--blanco);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.titulo-seccion h2 { font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; }
.titulo-seccion--centro { text-align: center; }
.titulo-seccion--centro p { color: var(--texto-suave); }
.titulo-grande { font-size: clamp(42px, 8vw, 110px); text-transform: uppercase; letter-spacing: -.03em; line-height: 1; }
.titulo-mediano { font-size: clamp(26px, 3vw, 36px); }
.vacio { text-align: center; color: var(--texto-suave); padding: 40px 0; }

/* ---------------------------------------------------------------- Botones */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background-position .4s;
}
.boton--primario { background: linear-gradient(95deg, var(--morado), var(--morado-oscuro), var(--morado)); background-size: 200% 100%; color: #fff; }
.boton--primario:hover { color: #fff; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(135, 80, 247, .35); }
.boton--borde { border: 1.5px solid var(--morado); color: var(--morado); background: transparent; }
.boton--borde:hover { background: var(--morado); color: #fff; }
.boton--pequeno { padding: 10px 22px; font-size: 14px; }
.boton[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ---------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .3s;
}
.cabecera.con-sombra { box-shadow: 0 6px 30px rgba(42, 20, 84, .08); }
.cabecera__barra { height: var(--cabecera); display: flex; align-items: center; gap: 24px; }
.logo img { width: 60px; height: auto; }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__lista { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav__lista > li > a, .nav__desplegable summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--morado-oscuro);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.nav__desplegable summary::-webkit-details-marker { display: none; }
.nav__lista > li > a:hover, .nav__desplegable summary:hover, .nav__lista a[aria-current="page"] { color: var(--morado); background: var(--lavanda); }
.nav__desplegable { position: relative; }
.nav__desplegable .icono { width: 14px; height: 14px; transition: transform .2s; }
.nav__desplegable details[open] summary .icono { transform: rotate(180deg); }
.nav__desplegable ul {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sombra-fuerte);
}
.nav__desplegable ul a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--texto); }
.nav__desplegable ul a:hover { background: var(--lavanda); color: var(--morado); }
.nav__desplegable ul .icono { width: 18px; height: 18px; color: var(--morado); transform: none; }
.nav__extra { display: flex; align-items: center; gap: 16px; }

.redes { display: flex; gap: 8px; }
.redes a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--morado-oscuro);
  border: 1px solid var(--borde);
  transition: background .2s, color .2s;
}
.redes a:hover { background: var(--morado); border-color: var(--morado); color: #fff; }
.redes .icono { width: 17px; height: 17px; }

.menu-boton { display: none; margin-left: auto; background: var(--lavanda); border: 0; width: 44px; height: 44px; border-radius: 12px; color: var(--morado-oscuro); cursor: pointer; place-items: center; }
.menu-boton .icono { width: 24px; height: 24px; }
.menu-boton__cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

/* ---------------------------------------------------------------- Hero inicio */
.hero {
  position: relative;
  padding: clamp(60px, 10vw, 120px) 0 clamp(60px, 8vw, 100px);
  background:
    radial-gradient(600px 420px at 85% 30%, rgba(135, 80, 247, .18), transparent 70%),
    radial-gradient(500px 360px at 10% 90%, rgba(135, 80, 247, .08), transparent 70%);
}
.hero__grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; }
.hero__saludo { font-size: clamp(18px, 2vw, 22px); font-weight: 600; color: var(--texto-suave); margin-bottom: 8px; }
.saludo-mano { display: inline-block; transform-origin: 70% 70%; animation: saludo 2.4s ease-in-out infinite; }
@keyframes saludo { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.hero__titulo { font-size: clamp(56px, 11vw, 150px); line-height: .92; text-transform: uppercase; letter-spacing: -.04em; margin-bottom: 20px; }
.hero__lema { font-size: 18px; color: var(--texto-suave); font-weight: 500; letter-spacing: .04em; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.voz-hoy { padding: 22px; position: relative; }
.voz-hoy__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 20%; border-radius: 999px; border: 3px solid var(--morado); background: var(--lavanda); margin-bottom: 18px; }
.voz-hoy h2 { font-size: 20px; margin-bottom: 8px; }
.voz-hoy blockquote { margin: 0; }
.voz-hoy blockquote p { font-size: 15px; margin-bottom: 10px; }
.voz-hoy blockquote footer { font-weight: 700; font-size: 14px; color: var(--morado-oscuro); }
.voz-hoy__mas { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-bottom: 6px; border-bottom: 1.5px solid var(--morado-oscuro); font-weight: 600; font-size: 14px; color: var(--morado-oscuro); }

/* ---------------------------------------------------------------- Marquesina de marcas */
.marquesina { background: var(--lavanda); padding: 26px 0; overflow: hidden; }
.marquesina__ventana { display: flex; width: max-content; animation: desplazar 40s linear infinite; }
.marquesina:hover .marquesina__ventana { animation-play-state: paused; }
.marquesina__pista { display: flex; align-items: center; gap: 70px; padding-right: 70px; }
.marquesina__pista img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(.15); opacity: .9; }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- Sobre el Lev */
.sobre { padding: clamp(70px, 10vw, 130px) 0; }
.sobre__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.sobre__imagen {
  border-radius: var(--radio-grande);
  background: linear-gradient(115deg, var(--morado) 0%, #b896ff 45%, rgba(255, 255, 255, 0) 90%);
  padding: 40px 20px 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.sobre__imagen img { max-height: 560px; width: auto; }
.sobre__texto p { color: var(--texto-suave); font-size: 17px; }
.sobre__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 30px; }
.contador { display: flex; align-items: center; gap: 12px; margin: 0; }
.contador strong { font-size: clamp(48px, 6vw, 72px); line-height: 1; }
.contador span { max-width: 110px; font-size: 14px; color: var(--texto-suave); line-height: 1.3; }

/* ---------------------------------------------------------------- Niveles */
.niveles {
  padding: 40px 0 clamp(70px, 10vw, 130px);
  background: radial-gradient(700px 500px at 0% 60%, rgba(135, 80, 247, .12), transparent 70%), linear-gradient(var(--blanco), var(--lavanda));
  overflow: hidden;
}
.texto-gigante {
  display: flex;
  width: max-content;
  margin: 0 0 50px;
  font-size: clamp(56px, 10vw, 140px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.03em;
  white-space: nowrap;
  animation: desplazar 50s linear infinite;
}
.texto-gigante span {
  background: linear-gradient(90deg, #d9cff2, var(--morado-oscuro), #d9cff2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .3em;
}
.niveles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.niveles__col { display: grid; gap: 30px; }
.niveles__col .titulo-seccion { padding: 10px 0 30px; }
@media (min-width: 901px) { .niveles__col--der { margin-top: -10px; } .niveles__col:first-child .nivel { margin-top: 40px; } }
.nivel { background: var(--lavanda); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 30px; transition: translate .3s, box-shadow .3s; }
.nivel:hover { translate: 0 -6px; box-shadow: var(--sombra-fuerte); }
.nivel img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: 20px; }
.nivel__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nivel h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 2px; }
.nivel p { margin: 0; color: var(--texto-suave); font-size: 14px; }
.nivel__boton { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--borde); color: var(--morado-oscuro); transition: background .2s, color .2s; }
.nivel__boton:hover { background: var(--morado); color: #fff; }

/* ---------------------------------------------------------------- Voces */
.voces { padding: clamp(70px, 9vw, 110px) 0; background: var(--lavanda); }
.voces__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.voz { margin: 0; padding: 28px; display: flex; flex-direction: column; }
.voz:nth-child(2) { margin-top: 24px; }
.voz__comillas { color: var(--morado); }
.voz__comillas .icono { width: 30px; height: 30px; }
.voz blockquote { margin: 16px 0 20px; flex: 1; }
.voz blockquote p { margin: 0; font-size: 16px; }
.voz figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.voz figcaption img { width: 48px; height: 48px; border-radius: 50%; background: var(--lavanda-2); object-fit: cover; }
.voz figcaption strong { display: block; color: var(--morado-oscuro); }
.voz figcaption small { display: block; font-size: 12px; color: var(--morado); }
.voz__estrellas { display: flex; gap: 2px; flex-basis: 100%; padding-left: 60px; margin-top: -6px; color: var(--morado); }
.voz__estrellas .icono { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- Noticias */
.noticias-inicio { padding: clamp(70px, 9vw, 120px) 0; }
.noticias-inicio__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.noticias-inicio__cabecera h2 { margin: 0; }
.noticias-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.noticia-tarjeta { border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); overflow: hidden; transition: translate .3s, box-shadow .3s; }
.noticia-tarjeta:hover { translate: 0 -6px; box-shadow: var(--sombra-fuerte); }
.noticia-tarjeta__enlace { display: flex; flex-direction: column; height: 100%; color: inherit; }
.noticia-tarjeta__enlace:hover { color: inherit; }
.noticia-tarjeta__imagen { aspect-ratio: 16 / 10; background: var(--degradado); overflow: hidden; }
.noticia-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.noticia-tarjeta__imagen img.sin-imagen { object-fit: contain; padding: 18%; }
.noticia-tarjeta:hover .noticia-tarjeta__imagen img { transform: scale(1.04); }
.noticia-tarjeta__texto { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.noticia-tarjeta h3 { font-size: 20px; }
.noticia-tarjeta__texto > p:not(.noticia-tarjeta__meta) { color: var(--texto-suave); font-size: 15px; }
.noticia-tarjeta__leer { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--morado); }
.noticia-tarjeta__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--texto-suave); margin-bottom: 12px; }
.insignia { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.insignia--noticia { background: var(--lavanda-2); color: var(--morado-medio); }
.insignia--evento { background: var(--morado-oscuro); color: #fff; }
@media (min-width: 901px) {
  .noticia-tarjeta--destacada { grid-column: span 2; }
  .noticia-tarjeta--destacada .noticia-tarjeta__enlace { flex-direction: row; }
  .noticia-tarjeta--destacada .noticia-tarjeta__imagen { aspect-ratio: auto; flex: 1.2; min-height: 100%; }
  .noticia-tarjeta--destacada .noticia-tarjeta__texto { flex: 1; padding: 34px; justify-content: center; }
  .noticia-tarjeta--destacada h3 { font-size: 26px; }
}
.noticias-listado, .noticias-relacionadas { padding: 0 0 clamp(70px, 9vw, 110px); }
.noticias-relacionadas { padding-top: 60px; background: var(--lavanda); }

/* ---------------------------------------------------------------- Artículo */
.articulo { padding: 50px 0 40px; }
.volver { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 26px; }
.articulo__cabecera h1 { font-size: clamp(32px, 5vw, 52px); }
.articulo__resumen { font-size: 19px; color: var(--texto-suave); }
.articulo__imagen { margin-block: 30px; }
.articulo__imagen img { width: 100%; border-radius: var(--radio-grande); }
.articulo__cuerpo { font-size: 17px; }
.articulo__cuerpo h2 { font-size: 28px; margin-top: 1.6em; }
.articulo__cuerpo h3 { font-size: 22px; margin-top: 1.4em; }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.4em; margin: 0 0 1em; }
.articulo__cuerpo ul { list-style: disc; }
.articulo__cuerpo ol { list-style: decimal; }
.articulo__cuerpo li { margin-bottom: .4em; }
.articulo__cuerpo li::marker { color: var(--morado); }
.articulo__cuerpo a { text-decoration: underline; text-underline-offset: 3px; }
.articulo__cuerpo img { border-radius: var(--radio); margin: 1.4em 0; }
.articulo__cuerpo blockquote { margin: 1.4em 0; padding: 18px 24px; border-left: 4px solid var(--morado); background: var(--lavanda); border-radius: 0 var(--radio) var(--radio) 0; }
.articulo__cuerpo blockquote p:last-child { margin: 0; }
.articulo__cuerpo hr { border: 0; border-top: 1px solid var(--borde); margin: 2em 0; }
.articulo__cuerpo table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.articulo__cuerpo th, .articulo__cuerpo td { border: 1px solid var(--borde); padding: 8px 12px; text-align: left; }
.articulo__pie { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--borde); }

/* ---------------------------------------------------------------- CTA */
.cta { padding: 0 0 clamp(70px, 9vw, 110px); }
.cta__tarjeta {
  margin-top: 30px;
  border-radius: var(--radio-grande);
  padding: clamp(50px, 8vw, 90px) 24px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(420px 300px at 15% 90%, rgba(99, 179, 255, .55), transparent 70%),
    radial-gradient(500px 340px at 85% 10%, rgba(255, 120, 230, .45), transparent 70%),
    radial-gradient(600px 400px at 50% 50%, #7a36e8, transparent 80%),
    var(--morado-oscuro);
  overflow: hidden;
}
.cta__correo { display: inline-block; max-width: 100%; font-size: clamp(16px, 5.2vw, 58px); font-weight: 700; color: #fff; letter-spacing: -.02em; word-break: break-word; }
.cta__correo:hover { color: #fff; opacity: .85; }
.cta__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 30px; }
.cta__datos a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); font-size: 14px; }
.cta__datos a:hover { color: #fff; }

/* ---------------------------------------------------------------- Contacto */
.contacto { padding: clamp(70px, 9vw, 110px) 0; background: var(--lavanda); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.contacto__form { padding: clamp(28px, 4vw, 44px); }
.contacto__form h2 { font-size: clamp(32px, 4vw, 44px); text-transform: uppercase; margin-bottom: 8px; }
.contacto__form > p { color: var(--texto-suave); }
.formulario { display: grid; gap: 16px; margin-top: 20px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--morado-oscuro); }
.formulario input, .formulario select, .formulario textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--lavanda);
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
  transition: border-color .2s, background .2s;
}
.formulario textarea { resize: vertical; min-height: 130px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--morado); background: #fff; box-shadow: 0 0 0 4px rgba(135, 80, 247, .12); }
.formulario .boton { justify-self: start; }
.formulario__estado { margin: 0; font-size: 14px; min-height: 1.4em; }
.formulario__estado.ok { color: #1a7f4b; }
.formulario__estado.error { color: #b42318; }
.formulario { position: relative; }
.formulario .trampa { position: absolute; top: 0; left: 0; width: 1px !important; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.contacto__info { display: grid; gap: 28px; }
.contacto__info li { display: flex; align-items: center; gap: 18px; }
.contacto__icono { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--degradado); color: #fff; }
.contacto__icono .icono { width: 22px; height: 22px; }
.contacto__info small { display: block; font-size: 13px; color: var(--texto-suave); }
.contacto__info a { font-size: 18px; color: var(--morado-oscuro); font-weight: 500; word-break: break-word; }
.contacto__info a:hover { color: var(--morado); }

/* ---------------------------------------------------------------- Páginas internas */
.hero-interno {
  padding: clamp(60px, 9vw, 110px) 0;
  background: radial-gradient(520px 380px at 90% 20%, rgba(135, 80, 247, .16), transparent 70%);
  overflow: hidden;
}
.hero-interno__grid { position: relative; min-height: 220px; display: flex; align-items: center; }
.hero-interno__fondo {
  position: absolute;
  left: clamp(60px, 14vw, 180px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(110px, 20vw, 250px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--morado);
  opacity: .9;
  pointer-events: none;
  user-select: none;
}
.hero-interno__texto { position: relative; }
.hero-interno__ante { font-size: clamp(22px, 3vw, 34px); font-weight: 700; color: var(--morado-oscuro); margin-bottom: 0; }
.hero-interno h1 .texto-degradado { display: inline-block; }
.hero-interno h1 { font-size: clamp(40px, 6vw, 72px); text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 10px; }
.hero-interno__desc { color: var(--texto-suave); font-size: 18px; }

.cifras { padding: 0 0 70px; }
.cifras__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cifras li { display: flex; align-items: center; gap: 12px; justify-content: center; }
.cifras strong { font-size: clamp(40px, 5vw, 60px); line-height: 1; }
.cifras span { font-size: 14px; color: var(--morado); line-height: 1.3; max-width: 120px; }

.proceso { padding: clamp(70px, 9vw, 110px) 0; background: var(--lavanda); }
.proceso__marco { position: relative; margin-top: 36px; aspect-ratio: 16 / 9; border-radius: var(--radio-grande); overflow: hidden; background: #fff; box-shadow: var(--sombra-fuerte); }
.proceso__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proceso__alterno { text-align: center; margin-top: 18px; }
.proceso__alterno a { font-weight: 600; font-size: 14px; }
.proceso__alterno .icono { vertical-align: -3px; margin-left: 4px; }

.documentos { padding: 0 0 clamp(70px, 9vw, 110px); }
.documentos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.documento {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 22px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--morado-oscuro);
  transition: translate .25s, box-shadow .25s, border-color .25s;
}
.documento:hover { translate: 0 -4px; box-shadow: var(--sombra-fuerte); border-color: var(--morado); color: var(--morado-oscuro); }
.documento__icono { display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; background: var(--degradado); color: #fff; }
.documento__icono .icono { width: 22px; height: 22px; }
.documento__titulo { flex: 1; font-weight: 600; line-height: 1.35; }
.documento__tipo { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--morado); background: var(--lavanda); padding: 4px 8px; border-radius: 6px; }

.error404 { padding: 120px 0; text-align: center; }
.error404__codigo { font-size: clamp(100px, 20vw, 200px); font-weight: 800; line-height: 1; margin: 0; }
.error404 p:not(.error404__codigo) { color: var(--texto-suave); }

/* ---------------------------------------------------------------- Accesos rápidos */
.accesos { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40; }
.accesos ul { display: grid; gap: 6px; padding: 6px; background: rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: var(--sombra); }
.accesos a { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--morado-oscuro); }
.accesos a:hover { background: var(--morado); color: #fff; }
.accesos .icono { width: 18px; height: 18px; }
.accesos a::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--morado-oscuro);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .2s, transform .2s;
}
.accesos a:hover::after, .accesos a:focus-visible::after { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Pie */
.pie { background: var(--morado-oscuro); color: rgba(255, 255, 255, .75); padding: 56px 0 40px; }
.pie__interno { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.redes--pie a { color: #c9b6ff; border-color: rgba(201, 182, 255, .5); }
.pie__logo { width: 90px; }
.pie__lema { margin: -10px 0 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #c9b6ff; }
.pie__legal { margin: 0; font-size: 13px; }
.pie__legal a { color: #b596ff; }
.pie__legal a:hover { color: #fff; }

/* ---------------------------------------------------------------- Responsivo */
@media (max-width: 1100px) {
  .nav__extra .redes { display: none; }
  .nav__lista > li > a, .nav__desplegable summary { padding: 8px 9px; font-size: 13.5px; }
}
@media (max-width: 960px) {
  :root { --cabecera: 68px; }
  .menu-boton { display: grid; }
  .nav {
    position: fixed;
    inset: var(--cabecera) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    padding: 24px 20px 40px;
    background: #fff;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav.abierto { visibility: visible; opacity: 1; transform: none; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
  .nav__lista > li > a, .nav__desplegable summary { display: flex; padding: 14px 16px; font-size: 17px; border-radius: 12px; }
  .nav__desplegable summary { justify-content: space-between; }
  .nav__desplegable ul { position: static; transform: none; box-shadow: none; padding: 0 0 0 12px; min-width: 0; }
  .nav__extra { flex-direction: column; align-items: stretch; }
  .nav__extra .redes { display: flex; justify-content: center; }
  .nav__extra .boton { justify-content: center; }
  body.menu-abierto { overflow: hidden; }

  .hero__grid, .sobre__grid, .contacto__grid { grid-template-columns: 1fr; }
  .voz-hoy { max-width: 420px; }
  .sobre__imagen img { max-height: 420px; }
  .niveles__grid { grid-template-columns: 1fr 1fr; }
  .cabecera { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .voces__lista { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .voz:nth-child(2) { margin-top: 0; }
  .noticias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accesos { top: auto; bottom: 16px; transform: none; }
  .accesos li:not(.accesos__wa) { display: none; }
  .accesos ul { padding: 0; background: none; box-shadow: none; }
  .accesos__wa a { width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
  .accesos__wa .icono { width: 28px; height: 28px; }
  .accesos a::after { display: none; }
}
@media (max-width: 640px) {
  .niveles__grid, .noticias-grid { grid-template-columns: 1fr; }
  .cifras__lista { gap: 22px 14px; }
  .cifras li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cifras span { max-width: none; }
  .formulario__fila { grid-template-columns: 1fr; }
  .cifras li { justify-content: flex-start; }
  .hero-interno__fondo { left: 30px; opacity: .55; }
  .proceso__marco { aspect-ratio: 3 / 4; }
  .sobre__pie { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .marquesina__ventana, .texto-gigante { transform: none; }
}

/* ==========================================================================
   Animaciones (solo se activan con html.js-anim, que añade js/temprano.js)
   ========================================================================== */

/* ---------------------------------------------------------------- Preloader "#SOYDELLEV" */
.preloader { display: none; }
.cargando body { overflow: hidden; }
.cargando .preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.preloader > svg { position: absolute; top: 0; left: 0; width: 100vw; height: 110vh; fill: var(--morado-oscuro); }
.preloader__texto {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 300;
  letter-spacing: 15px;
  text-transform: uppercase;
  transition: transform .5s cubic-bezier(.6, 0, .4, 1), opacity .5s;
}
.preloader__texto span { animation: parpadeo 1s infinite alternate; }
.preloader__texto span:nth-child(2) { animation-delay: .1s; }
.preloader__texto span:nth-child(3) { animation-delay: .2s; }
.preloader__texto span:nth-child(4) { animation-delay: .3s; }
.preloader__texto span:nth-child(5) { animation-delay: .4s; }
.preloader__texto span:nth-child(6) { animation-delay: .5s; }
.preloader__texto span:nth-child(7) { animation-delay: .6s; }
.preloader__texto span:nth-child(8) { animation-delay: .7s; }
.preloader__texto span:nth-child(9) { animation-delay: .8s; }
.preloader__texto span:nth-child(10) { animation-delay: .9s; }
.preloader--salida .preloader__texto { transform: translateY(-100px); opacity: 0; }
@keyframes parpadeo { from { opacity: 1; } to { opacity: 0; } }

/* ---------------------------------------------------------------- Entrada del encabezado (hero) */
.hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo .linea > span { display: inline-block; }
.js-anim [data-hero] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1);
}
.js-anim .hero__titulo [data-hero] { opacity: 1; transform: translateY(110%); }
.js-anim .voz-hoy[data-hero] { transform: translateX(60px); }
.js-anim .hero-interno__fondo[data-hero] { transform: translateY(-50%); letter-spacing: .25em; transition: opacity 1.6s ease, letter-spacing 1.6s cubic-bezier(.2, .7, .2, 1); }
.hero-listo [data-hero] { opacity: 1; transform: none; }
.hero-listo .hero__titulo [data-hero], .hero-listo .voz-hoy[data-hero] { transform: none; }
.hero-listo .hero-interno__fondo[data-hero] { opacity: .9; transform: translateY(-50%); letter-spacing: -.02em; }
.hero-listo [data-hero="1"] { transition-delay: .05s; }
.hero-listo [data-hero="2"] { transition-delay: .15s; }
.hero-listo [data-hero="3"] { transition-delay: .28s; }
.hero-listo [data-hero="4"] { transition-delay: .42s; }
.hero-listo [data-hero="5"] { transition-delay: .55s; }
.hero-listo [data-hero="6"] { transition-delay: .4s; }

/* Puntos flotantes de la portada */
.punto { position: absolute; border-radius: 50%; background: var(--morado-medio); pointer-events: none; }
.punto--1 { width: 6px; height: 6px; top: 24%; left: 52%; animation: flotar-1 9s ease-in-out infinite alternate; }
.punto--2 { width: 10px; height: 10px; top: 44%; left: 70%; animation: flotar-2 11s ease-in-out infinite alternate; }
.punto--3 { width: 8px; height: 8px; top: 86%; left: 58%; animation: flotar-3 13s ease-in-out infinite alternate; }
@keyframes flotar-1 { to { transform: translate(60px, 40px); } }
@keyframes flotar-2 { to { transform: translate(-50px, 70px); } }
@keyframes flotar-3 { to { transform: translate(80px, -50px); } }

/* ---------------------------------------------------------------- Aparición al hacer scroll */
.js-anim [data-anim] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), translate .3s, box-shadow .3s;
  transition-delay: var(--retraso, 0s);
}
.js-anim [data-anim="arriba"] { transform: translateY(50px); }
.js-anim [data-anim="izquierda"] { transform: translateX(-70px); }
.js-anim [data-anim="derecha"] { transform: translateX(70px); }
.js-anim [data-anim="zoom"] { transform: scale(.88); }
.js-anim [data-anim].visible { opacity: 1; transform: none; }

/* Títulos que se rellenan de color al hacer scroll */
.palabra { color: #d9cff2; transition: color .4s ease; }
.palabra.activa { color: inherit; }

/* Tarjetas que se inclinan con el mouse */
[data-inclinar] { transform-style: preserve-3d; will-change: transform; }

/* ---------------------------------------------------------------- Cursor morado */
.cursor { display: none; }
@media (pointer: fine) {
  .js-anim .cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: var(--morado);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, scale .3s;
  }
  .js-anim .cursor.activo { opacity: .9; }
  .js-anim .cursor.oculto { opacity: 0; scale: 0; }
}

/* ---------------------------------------------------------------- Botón volver arriba */
.subir {
  position: fixed;
  right: 70px;
  bottom: 24px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--morado);
  box-shadow: var(--sombra);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir > svg:not(.icono) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(0deg); }
.subir > svg:not(.icono) path { fill: none; stroke: var(--morado); stroke-width: 4; stroke-dasharray: 307.919; stroke-dashoffset: 307.919; }
.subir .icono { position: relative; width: 20px; height: 20px; }
.subir { border: 1.5px solid var(--borde); }
.subir:hover { background: var(--morado); color: #fff; }
@media (max-width: 960px) {
  .subir { right: 22px; bottom: 84px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .punto, .cursor { display: none !important; }
}

/* ---------------------------------------------------------------- Sin desbordes horizontales
   Las secciones recortan horizontalmente lo que se sale (animaciones de entrada, textos
   gigantes, marquesinas) para que en el celular nunca se pueda deslizar hacia los lados. */
main > section, main > article, .pie { overflow-x: clip; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
img, svg, video, iframe { max-width: 100%; }

/* ---------------------------------------------------------------- Ajustes de alineación en celular */
@media (max-width: 640px) {
  .etiqueta { font-size: 10px; letter-spacing: .1em; padding: 4px 10px; }
  .cta__tarjeta { padding-inline: 16px; }
  .cta__correo { white-space: nowrap; }
  .hero-interno__grid { min-height: 0; }
  .hero-interno__fondo,
  .js-anim .hero-interno__fondo[data-hero],
  .hero-listo .hero-interno__fondo[data-hero] {
    top: auto;
    bottom: -48px;
    left: auto;
    right: -8px;
    transform: none;
    font-size: 120px;
  }
  .hero-interno__fondo, .hero-listo .hero-interno__fondo[data-hero] { opacity: .18; }
  .proceso__marco { aspect-ratio: 4 / 3; }
  .documento { padding: 18px; gap: 14px; }
  .documento__titulo { font-size: 15px; }
}
@media (max-width: 380px) {
  .hero__titulo { font-size: 50px; }
  .hero__botones .boton { width: 100%; justify-content: center; }
}
.sin-corte { white-space: nowrap; }

/* Pantallas medianas: la barra lateral de accesos se reduce al botón de WhatsApp para no tapar el contenido */
@media (min-width: 961px) and (max-width: 1320px) {
  .accesos { top: auto; bottom: 16px; transform: none; }
  .accesos li:not(.accesos__wa) { display: none; }
  .accesos ul { padding: 0; background: none; box-shadow: none; }
  .accesos__wa a { width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
  .accesos__wa .icono { width: 28px; height: 28px; }
  .accesos a::after { display: none; }
  .subir { right: 84px; }
}

/* ---------------------------------------------------------------- WhatsApp siempre visible con el número */
.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 9px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: translate .25s, box-shadow .25s;
}
.wa-flotante:hover { color: #fff; translate: 0 -3px; box-shadow: 0 14px 32px rgba(0, 0, 0, .28); }
.wa-flotante .icono { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.wa-flotante__texto small { display: block; font-size: 11px; font-weight: 500; opacity: .9; }
.js-anim .wa-flotante { animation: wa-entrada .6s 1.2s both cubic-bezier(.2, .8, .2, 1.2); }
@keyframes wa-entrada { from { opacity: 0; transform: translateY(30px) scale(.8); } }
.subir, .subir.visible { right: 24px; bottom: 86px; }
.boton--wa { background: #25d366; color: #fff; }
.boton--wa:hover { color: #fff; background: #1ebe5a; }
@media (min-width: 961px) { .nav__extra .boton--wa { display: none; } }
@media (max-width: 1320px) { .accesos { display: none; } }
@media (max-width: 640px) {
  .wa-flotante { right: 14px; bottom: 14px; padding: 6px 14px 6px 6px; font-size: 14px; }
  .wa-flotante .icono { width: 34px; height: 34px; }
  .subir, .subir.visible { right: 20px; bottom: 74px; }
}

/* Pie con datos de contacto */
.pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 14px; }
.pie__contacto li, .pie__contacto a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); }
.pie__contacto a:hover { color: #fff; }
.pie__contacto .icono { color: #b596ff; }
.pie { padding-bottom: 90px; }

/* "La Voz de hoy": ancho completo en celular y al lado del título en tablets */
@media (max-width: 960px) {
  .voz-hoy { max-width: none; width: 100%; }
}
@media (min-width: 700px) and (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr 300px; gap: 28px; }
  .hero__titulo { font-size: clamp(56px, 9vw, 90px); }
}

/* ==========================================================================
   Encabezado animado: personajes, objetos que caen y voces que se escriben
   ========================================================================== */
.hero { isolation: isolate; }
.hero__grid { position: relative; z-index: 2; }
.hero__cielo, .hero__personajes { position: absolute; inset: 0; pointer-events: none; }
.hero__cielo { z-index: 0; overflow: hidden; }
.hero__personajes { z-index: 1; }

/* Título con degradado en movimiento */
.hero__titulo .texto-degradado {
  background-image: linear-gradient(100deg, #8750f7 0%, #2a1454 35%, #a77bff 65%, #8750f7 100%);
  background-size: 250% 100%;
  animation: degradado 9s ease-in-out infinite alternate;
}
@keyframes degradado { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Objetos que caen */
.cae { position: absolute; top: -70px; display: block; color: var(--morado); opacity: .45; animation: caer 18s linear infinite; }
.cae svg { display: block; width: 100%; height: auto; }
.cae__letra { display: block; font-weight: 800; font-size: 26px; line-height: 1; color: #c9b6ff; }
@keyframes caer {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(24px, 600px, 0) rotate(180deg); }
  100% { transform: translate3d(-12px, 1250px, 0) rotate(360deg); }
}
.cae--1 { left: 6%; width: 54px; animation-duration: 21s; animation-delay: -3s; }
.cae--2 { left: 18%; width: 18px; animation-duration: 16s; animation-delay: -9s; color: #ffc94d; opacity: .7; }
.cae--3 { left: 31%; animation-duration: 19s; animation-delay: -14s; }
.cae--4 { left: 44%; width: 18px; animation-duration: 23s; animation-delay: -6s; color: #f28ab2; opacity: .55; }
.cae--5 { left: 57%; width: 46px; animation-duration: 25s; animation-delay: -18s; }
.cae--6 { left: 66%; animation-duration: 17s; animation-delay: -2s; }
.cae--7 { left: 74%; width: 14px; animation-duration: 20s; animation-delay: -12s; color: var(--morado); }
.cae--8 { left: 83%; animation-duration: 22s; animation-delay: -7s; }
.cae--9 { left: 91%; width: 16px; animation-duration: 18s; animation-delay: -15s; color: #f28ab2; opacity: .55; }
.cae--10 { left: 12%; animation-duration: 24s; animation-delay: -20s; }
.cae--11 { left: 50%; width: 12px; animation-duration: 15s; animation-delay: -5s; color: #ffc94d; opacity: .7; }
.cae--12 { left: 95%; width: 40px; animation-duration: 26s; animation-delay: -11s; }

/* Personajes que flotan, siguen el mouse y saludan */
.personaje { position: absolute; will-change: transform; transition: transform .25s ease-out; }
.personaje img { display: block; width: auto; height: 100%; pointer-events: auto; cursor: pointer; transform-origin: 50% 90%; animation: flotar-personaje 5s ease-in-out infinite alternate; filter: drop-shadow(0 12px 18px rgba(42, 20, 84, .18)); }
.personaje.saluda img { animation: saludo-personaje .9s ease-in-out, flotar-personaje 5s ease-in-out .9s infinite alternate; }
@keyframes flotar-personaje { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes saludo-personaje {
  0%, 100% { rotate: 0deg; scale: 1; }
  20% { rotate: -9deg; scale: 1.06; }
  40% { rotate: 8deg; }
  60% { rotate: -6deg; }
  80% { rotate: 4deg; }
}
.personaje--nina { height: 170px; top: 15%; left: 50%; }
.personaje--nina img { animation-delay: -1s; }
.personaje--nino { height: 150px; bottom: 4%; left: calc(50% + 130px); }
.personaje--nino img { animation-delay: -2.5s; animation-duration: 6s; }
.personaje--lector { height: 110px; bottom: 2%; right: 3%; }
.personaje--lector img { animation-delay: -4s; animation-duration: 7s; }
.personaje--rompecabezas { height: 112px; bottom: 3%; left: calc(50% - 50px); }
.personaje--rompecabezas img { animation-delay: -3s; animation-duration: 5.5s; }
.js-anim .personaje { opacity: 0; }
.hero-listo .personaje { opacity: 1; transition: opacity .8s ease .7s, transform .25s ease-out; }
@media (max-width: 1180px) {
  .personaje--nina { left: 47%; height: 140px; top: 12%; }
  .personaje--nino { height: 120px; left: calc(50% + 50px); }
  .personaje--rompecabezas { display: none; }
}
@media (max-width: 960px) {
  .personaje--nino, .personaje--lector, .personaje--rompecabezas { display: none; }
  .personaje--nina { height: 120px; top: 108px; left: auto; right: 6%; }
}
@media (max-width: 699px) {
  .personaje--nina { height: 88px; top: 96px; right: 4%; }
}

/* La Voz de hoy: frases que se escriben solas */
.voz-hoy__cita p { min-height: 4.95em; }
.voz-hoy__cursor { display: none; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--morado); animation: cursor-parpadeo .8s steps(1) infinite; }
.escribiendo .voz-hoy__cursor { display: inline-block; }
@keyframes cursor-parpadeo { 50% { opacity: 0; } }
.voz-hoy__autor { display: flex; align-items: center; gap: 10px; transition: opacity .35s; }
.voz-hoy__autor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--lavanda-2); flex-shrink: 0; }
.voz-hoy__autor strong { display: block; font-size: 14px; color: var(--morado-oscuro); line-height: 1.2; }
.voz-hoy__autor small { display: block; font-size: 12px; color: var(--morado); }
.voz-hoy__autor.cambiando { opacity: 0; }
.voz-hoy__puntos { display: flex; gap: 6px; margin-top: 16px; }
.voz-hoy__puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--borde); cursor: pointer; transition: width .3s, background .3s; }
.voz-hoy__puntos button[aria-current="true"] { width: 22px; background: var(--morado); }
.voz-hoy__mas { margin-top: 14px; }

/* ==========================================================================
   Calendario "El camino del Lev"
   ========================================================================== */
.camino-intro { padding: 0 0 20px; }
.camino-intro .contenedor { text-align: center; }
.camino-intro__ayuda { max-width: 620px; margin: 0 auto 20px; color: var(--texto-suave); font-size: 17px; }
.camino-intro__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.camino-intro__nota { margin: 18px auto 0; max-width: 620px; font-size: 13px; color: var(--texto-suave); }

.camino {
  padding: 40px 0 140px;
  background:
    radial-gradient(circle at 1px 1px, rgba(135, 80, 247, .13) 1.5px, transparent 0) 0 0 / 26px 26px,
    linear-gradient(var(--blanco), var(--lavanda) 12%, var(--lavanda) 88%, var(--blanco));
}
.camino__contenedor { position: relative; }
.camino__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.camino__base { fill: none; stroke: #e2d6fb; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.camino__guia { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 14 16; stroke-linecap: round; }
.camino__trazo { fill: none; stroke: url(#camino-degradado); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }

.camino__lista { position: relative; z-index: 2; display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.estacion { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; scroll-margin-top: 120px; }
.estacion__hito { grid-column: 2; grid-row: 1; justify-self: center; position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 4px solid var(--morado); box-shadow: 0 10px 24px rgba(42, 20, 84, .18); font-size: 30px; line-height: 1; transition: transform .4s cubic-bezier(.2, .8, .2, 1.4), filter .4s, border-color .4s; }
.estacion[data-lado="izquierda"] .estacion__hito { translate: -48px 0; }
.estacion[data-lado="derecha"] .estacion__hito { translate: 48px 0; }
.estacion__tarjeta { grid-row: 1; position: relative; padding: 22px 24px; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); border: 2px solid transparent; transition: border-color .3s, box-shadow .3s; }
.estacion[data-lado="izquierda"] .estacion__tarjeta { grid-column: 1; margin-right: 10px; }
.estacion[data-lado="derecha"] .estacion__tarjeta { grid-column: 3; margin-left: 10px; }
.estacion__tarjeta h3 { font-size: 20px; margin: 6px 0 4px; }
.estacion__fecha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.estacion__fecha time { display: inline-flex; align-items: baseline; gap: 6px; color: var(--morado); font-weight: 600; text-transform: uppercase; font-size: 14px; }
.estacion__fecha time strong { font-size: 34px; line-height: 1; font-weight: 800; }
.estacion__tipo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--morado-medio); background: var(--lavanda-2); padding: 3px 10px; border-radius: 999px; }
.estacion__cuando { margin: 0 0 8px; font-size: 13px; color: var(--texto-suave); }
.estacion__desc { margin: 0 0 10px; font-size: 15px; }
.estacion__aviso { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-size: 12px; font-weight: 600; }
.estacion__acciones { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: 13px; font-weight: 600; }
.estacion__acciones a { display: inline-flex; align-items: center; gap: 6px; }
.estacion__acciones .icono { width: 15px; height: 15px; }
.estacion:target .estacion__tarjeta { border-color: var(--morado); box-shadow: var(--sombra-fuerte); }

/* Estados: pasada, próxima y alcanzada por el caminante */
.estacion--pasada .estacion__hito { filter: grayscale(1); border-color: #cfc5e6; opacity: .75; }
.estacion--pasada .estacion__tarjeta { opacity: .72; }
.estacion--proxima .estacion__hito { width: 84px; height: 84px; font-size: 36px; border-width: 5px; }
.estacion--proxima .estacion__hito::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--morado); animation: pulso 1.8s ease-out infinite; }
.estacion--proxima .estacion__tarjeta { border-color: var(--morado); }
.estacion--proxima .estacion__tarjeta::before { content: "¡Lo que viene!"; position: absolute; top: -12px; right: 18px; padding: 3px 12px; border-radius: 999px; background: var(--degradado); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.estacion.alcanzada .estacion__hito { animation: rebote .7s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes pulso { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1); } }

.camino__mes { display: grid; grid-template-columns: 1fr 150px 1fr; }
.camino__mes span { grid-column: 2; justify-self: center; padding: 6px 16px; border-radius: 999px; background: var(--morado-oscuro); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(42, 20, 84, .2); }
.camino__salida, .camino__meta { display: grid; grid-template-columns: 1fr 150px 1fr; }
.camino__salida span, .camino__meta span { grid-column: 1 / -1; justify-self: center; padding: 10px 22px; border-radius: 999px; background: #fff; border: 2px dashed var(--morado); color: var(--morado-oscuro); font-weight: 700; box-shadow: var(--sombra); }

/* El caminante y el marcador de hoy */
.camino__caminante, .camino__hoy { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.camino__caminante { display: none; width: 58px; }
.camino__caminante img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(42, 20, 84, .3)); transform-origin: 50% 100%; }
.camino__caminante.voltear img { scale: -1 1; }
.camino__caminante.caminando img { animation: caminar .32s ease-in-out infinite alternate; }
@keyframes caminar { from { rotate: -6deg; translate: 0 0; } to { rotate: 6deg; translate: 0 -5px; } }
.camino__hoy { display: none; }
.camino__hoy span { display: inline-block; translate: -50% -50%; padding: 5px 10px; border: 2px solid #fff; border-radius: 999px; background: #ffc94d; color: #3a2400; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.camino--listo .camino__caminante, .camino--listo .camino__hoy { display: block; }

@media (max-width: 760px) {
  .estacion, .camino__mes, .camino__salida, .camino__meta { grid-template-columns: 78px 1fr; }
  .estacion__hito { grid-column: 1; width: 56px; height: 56px; font-size: 24px; border-width: 3px; }
  .estacion--proxima .estacion__hito { width: 64px; height: 64px; font-size: 28px; }
  .estacion[data-lado="izquierda"] .estacion__hito { translate: -6px 0; }
  .estacion[data-lado="derecha"] .estacion__hito { translate: 6px 0; }
  .estacion[data-lado] .estacion__tarjeta { grid-column: 2; margin: 0; padding: 18px; }
  .camino__mes span { grid-column: 2; justify-self: start; }
  .camino__salida span, .camino__meta span { grid-column: 2; justify-self: start; }
  .camino__base { stroke-width: 26; }
  .camino__caminante { width: 44px; }
  .estacion__fecha time strong { font-size: 28px; }
  .js-anim .estacion__tarjeta[data-anim] { transform: translateX(40px); }
  .js-anim .estacion__tarjeta[data-anim].visible { transform: none; }
}

/* Próximas fechas en la portada */
.proximas-fechas, .momentos, .videos { padding: clamp(60px, 8vw, 100px) 0; }
.proximas-fechas { background: var(--lavanda); }
.proximas-fechas__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px; margin-bottom: 34px; }
.proximas-fechas__cabecera .titulo-seccion h2 { margin-bottom: 0; }
.proximas-fechas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.proxima { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); color: var(--texto); transition: translate .25s, box-shadow .25s; }
.proxima:hover { translate: 0 -4px; box-shadow: var(--sombra-fuerte); color: var(--texto); }
.proxima__emoji { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--morado); font-size: 24px; }
.proxima__fecha { display: grid; text-align: center; flex-shrink: 0; color: var(--morado); font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.proxima__fecha strong { font-size: 28px; font-weight: 800; }
.proxima__texto strong { display: block; color: var(--morado-oscuro); line-height: 1.25; }
.proxima__texto small { color: var(--texto-suave); font-size: 12px; }
.proxima:first-child .proxima__emoji { animation: pulso-suave 2s ease-in-out infinite; }
@keyframes pulso-suave { 50% { box-shadow: 0 0 0 8px rgba(135, 80, 247, .15); } }

/* Momentos (galería en la portada) */
.momentos__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; }
.momentos__foto { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--lavanda-2); }
.momentos__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.momentos__foto:hover img { transform: scale(1.06); }
.momentos__foto--1 { grid-column: span 2; grid-row: span 2; }

/* Videos de YouTube */
.videos { background: var(--lavanda); }
.videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.video h3 { font-size: 17px; margin: 14px 0 4px; }
.video__fecha { margin: 0; font-size: 13px; color: var(--texto-suave); }
.video__miniatura, .video__marco { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; box-shadow: var(--sombra); }
.video__miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.video__miniatura:hover img { transform: scale(1.05); opacity: .85; }
.video__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--morado); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .25s; }
.video__play svg { width: 28px; height: 28px; margin-left: 4px; }
.video__miniatura:hover .video__play { transform: scale(1.1); }
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Galería */
.galeria, .album { padding: 0 0 clamp(70px, 9vw, 110px); }
.album { padding-top: 50px; }
.album h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 6px; }
.album__meta { color: var(--texto-suave); font-size: 14px; }
.album__desc { max-width: 720px; font-size: 17px; }
.albumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.album-tarjeta { display: block; border-radius: var(--radio); overflow: hidden; background: #fff; border: 1px solid var(--borde); color: var(--texto); transition: translate .3s, box-shadow .3s; }
.album-tarjeta:hover { translate: 0 -6px; box-shadow: var(--sombra-fuerte); color: var(--texto); }
.album-tarjeta__portada { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lavanda-2); }
.album-tarjeta__portada img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.album-tarjeta:hover .album-tarjeta__portada img { transform: scale(1.05); }
.album-tarjeta__cantidad { position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(42, 20, 84, .8); color: #fff; font-size: 12px; font-weight: 600; }
.album-tarjeta__texto { display: block; padding: 16px 20px 20px; }
.album-tarjeta__texto strong { display: block; font-size: 18px; color: var(--morado-oscuro); }
.album-tarjeta__texto time { font-size: 13px; color: var(--texto-suave); }
.album__fotos { columns: 3 260px; column-gap: 14px; margin-top: 30px; }
.album__foto { display: block; margin-bottom: 14px; break-inside: avoid; border-radius: 16px; overflow: hidden; background: var(--lavanda-2); cursor: zoom-in; }
.album__foto img { width: 100%; transition: transform .5s; }
.album__foto:hover img { transform: scale(1.04); }

/* Visor de fotos */
.visor { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 10, 40, .94); }
.visor[hidden] { display: none; }
.visor__figura { margin: 0; text-align: center; }
.visor__figura img { max-width: min(1200px, 92vw); max-height: 82vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.visor__figura figcaption { margin-top: 12px; color: rgba(255, 255, 255, .8); font-size: 14px; }
.visor__cerrar, .visor__nav { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .2s; }
.visor__cerrar:hover, .visor__nav:hover { background: rgba(255, 255, 255, .25); }
.visor__cerrar { top: 18px; right: 18px; width: 48px; height: 48px; }
.visor__cerrar .icono { width: 24px; height: 24px; }
.visor__nav { top: 50%; width: 54px; height: 54px; margin-top: -27px; font-size: 34px; line-height: 1; }
.visor__nav--ant { left: 16px; }
.visor__nav--sig { right: 16px; }
body.visor-abierto { overflow: hidden; }

/* Pie: enlaces rápidos */
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; font-weight: 600; }
.pie__enlaces a { color: #fff; }
.pie__enlaces a:hover { color: #c9b6ff; }
.nav__desplegable summary.activo { color: var(--morado); background: var(--lavanda); }

@media (max-width: 960px) {
  .proximas-fechas__lista, .videos__grid { grid-template-columns: 1fr; max-width: 560px; }
  .momentos__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}

/* ==========================================================================
   Aniversario 35 años
   ========================================================================== */
:root { --dorado: #f5b82e; --dorado-oscuro: #8a5a00; }

/* Cinta superior */
.cinta-aniversario { background: var(--morado-oscuro); color: #fff; font-size: 14px; font-weight: 500; }
.cinta-aniversario__interno { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 9px 0; text-align: center; }
.cinta-aniversario .icono { color: var(--dorado); }
.cinta-aniversario strong { color: var(--dorado); }
.cinta-aniversario a { display: inline-flex; align-items: center; gap: 6px; color: var(--dorado); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cinta-aniversario a:hover { color: #fff; }
.cinta-aniversario a .icono { width: 14px; height: 14px; }

/* Sello junto al logo */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.sello--cabecera { width: 48px; height: 48px; flex-shrink: 0; }
.js-anim .sello--cabecera { transform: rotate(-200deg) scale(0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1.3) .3s; }
.hero-listo .sello--cabecera { transform: none; }
@media (max-width: 960px) { .sello--cabecera { width: 42px; height: 42px; } }

/* Preloader del aniversario: el 35 se dibuja, se rellena y estalla el confeti */
.preloader__aniv { position: relative; display: grid; justify-items: center; transition: transform .5s cubic-bezier(.6, 0, .4, 1), opacity .5s; }
.preloader--salida .preloader__aniv { transform: translateY(-100px); opacity: 0; }
.preloader__numero { width: min(320px, 70vw); height: auto; overflow: visible; }
.preloader__numero text { font-family: "Sora", sans-serif; font-weight: 800; font-size: 190px; letter-spacing: -10px; fill: transparent; stroke: var(--dorado); stroke-width: 3; stroke-dasharray: 900; stroke-dashoffset: 900; animation: dibujar-35 1.1s ease-out forwards, rellenar-35 .4s ease-out 1s forwards; }
@keyframes dibujar-35 { to { stroke-dashoffset: 0; } }
@keyframes rellenar-35 { to { fill: var(--dorado); } }
.preloader__anios { margin: -6px 0 18px; color: #fff; font-size: clamp(16px, 2.4vw, 20px); font-weight: 600; letter-spacing: .4em; text-transform: uppercase; opacity: 0; animation: aparecer .4s ease 1.1s forwards; }
@keyframes aparecer { to { opacity: 1; } }
.preloader--aniversario .preloader__texto { font-size: 14px; letter-spacing: 10px; opacity: .7; }
.preloader__confeti { position: absolute; left: 50%; top: 45%; width: 0; height: 0; }
.confeti { position: absolute; width: 10px; height: 20px; border-radius: 3px; background: var(--dorado); opacity: 0; animation: estallar 1.3s cubic-bezier(.1, .7, .3, 1) 1.15s forwards; }
.confeti:nth-child(3n) { background: #a77bff; }
.confeti:nth-child(3n+1) { background: #f28ab2; width: 9px; height: 9px; border-radius: 50%; }
@keyframes estallar {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
.confeti--1 { --x: -220px; --y: -160px; --r: 300deg; } .confeti--2 { --x: 210px; --y: -170px; --r: -280deg; }
.confeti--3 { --x: -260px; --y: 40px; --r: 200deg; } .confeti--4 { --x: 270px; --y: 30px; --r: -220deg; }
.confeti--5 { --x: -150px; --y: 190px; --r: 360deg; } .confeti--6 { --x: 160px; --y: 200px; --r: -330deg; }
.confeti--7 { --x: -60px; --y: -230px; --r: 240deg; } .confeti--8 { --x: 70px; --y: -240px; --r: -260deg; }
.confeti--9 { --x: -320px; --y: -60px; --r: 180deg; } .confeti--10 { --x: 330px; --y: -70px; --r: -190deg; }
.confeti--11 { --x: -30px; --y: 250px; --r: 280deg; } .confeti--12 { --x: 40px; --y: 230px; --r: -300deg; }
.confeti--13 { --x: -200px; --y: 120px; --r: 210deg; } .confeti--14 { --x: 200px; --y: 130px; --r: -240deg; }
.confeti--15 { --x: -120px; --y: -120px; --r: 160deg; } .confeti--16 { --x: 130px; --y: -110px; --r: -170deg; }
.confeti--17 { --x: -290px; --y: 170px; --r: 320deg; } .confeti--18 { --x: 290px; --y: 160px; --r: -310deg; }

/* Encabezado del aniversario */
.aniv-titulo { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 20px; }
.aniv-titulo__numero { display: block; overflow: hidden; padding-bottom: .02em; }
.aniv-titulo__numero > span { display: inline-block; font-size: clamp(130px, 21vw, 250px); font-weight: 800; line-height: .82; letter-spacing: -.06em; padding-right: .1em; color: var(--morado); background: linear-gradient(100deg, #8750f7, #2a1454 45%, #a77bff 75%, #8750f7); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: degradado 9s ease-in-out infinite alternate; }
.aniv-titulo__lado { display: grid; justify-items: start; gap: 10px; padding-bottom: 16px; }
.aniv-titulo__anios { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; color: var(--morado-oscuro); }
.aniv-titulo__lema { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--dorado); color: #3a2400; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.aniv-texto { max-width: 560px; font-size: 17px; line-height: 1.65; letter-spacing: 0; }
.js-anim .aniv-titulo__numero [data-hero] { opacity: 1; transform: translateY(110%); }
.hero-listo .aniv-titulo__numero [data-hero] { transform: none; }

/* Gorritos de fiesta */
.gorrito { position: absolute; top: -26%; left: 34%; width: 30%; height: auto; transform: rotate(-12deg); pointer-events: none; animation: gorrito 3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.personaje--nino .gorrito { left: 38%; top: -22%; transform: rotate(10deg); }
.personaje--lector .gorrito { left: 18%; top: -16%; width: 18%; }
.personaje--rompecabezas .gorrito { left: 40%; top: -20%; width: 16%; }
@keyframes gorrito { to { rotate: 8deg; } }

/* Cuenta regresiva */
.cuenta { padding: 26px; }
.cuenta__antes { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--morado); }
.cuenta__cajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cuenta__cajas div { display: grid; justify-items: center; padding: 14px 4px; border-radius: 16px; background: var(--lavanda); }
.cuenta__cajas strong { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; line-height: 1; color: var(--morado-oscuro); font-variant-numeric: tabular-nums; }
.cuenta__cajas div:last-child strong { color: var(--morado); }
.cuenta__cajas span { font-size: 12px; color: var(--texto-suave); }
.cuenta__fiesta { margin: 14px 0 0; padding: 16px; border-radius: 16px; background: var(--dorado); color: #3a2400; font-weight: 700; line-height: 1.4; }
.cuenta__fecha { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--texto-suave); }
.cuenta__fecha .icono { color: var(--morado); }

/* Celebra con nosotros */
.celebra { padding: clamp(60px, 8vw, 100px) 0; }
.celebra__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.celebra__tarjeta { display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 30px; border-radius: 24px; background: var(--lavanda); color: var(--texto-suave); transition: translate .3s, box-shadow .3s; }
.celebra__tarjeta:hover { translate: 0 -6px; box-shadow: var(--sombra-fuerte); color: var(--texto-suave); }
.celebra__tarjeta strong { font-size: 23px; line-height: 1.2; color: var(--morado-oscuro); }
.celebra__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--morado); }
.celebra__icono .icono { width: 26px; height: 26px; }
.celebra__accion { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; color: var(--morado); }
.celebra__tarjeta--oscura { background: var(--morado-oscuro); color: rgba(255, 255, 255, .82); }
.celebra__tarjeta--oscura:hover { color: rgba(255, 255, 255, .82); }
.celebra__tarjeta--oscura strong { color: #fff; }
.celebra__tarjeta--oscura .celebra__icono { background: rgba(255, 255, 255, .1); color: var(--dorado); }
.celebra__tarjeta--oscura .celebra__accion { color: var(--dorado); }
.celebra__tarjeta--dorada { background: #fff4d6; color: #5d4a1c; }
.celebra__tarjeta--dorada:hover { color: #5d4a1c; }
.celebra__tarjeta--dorada strong { color: #3a2400; }
.celebra__tarjeta--dorada .celebra__icono { color: var(--dorado-oscuro); }
.celebra__tarjeta--dorada .celebra__accion { color: var(--dorado-oscuro); }

/* Confeti del gran día (lo genera main.js) */
.lluvia-confeti { position: fixed; inset: 0; z-index: 1500; overflow: hidden; pointer-events: none; }
.lluvia-confeti span { position: absolute; top: -30px; width: 10px; height: 18px; border-radius: 3px; animation: caer-confeti linear forwards; }
@keyframes caer-confeti { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--giro, 540deg)); } }

/* ---------------------------------------------------------------- Página de historia */
.historia-hero { background: var(--morado-oscuro); color: #fff; overflow: hidden; }
.historia-hero__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(60px, 9vw, 100px) 0; }
.historia-hero__texto { flex: 999 1 520px; min-width: 0; }
.historia-hero__ante { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--dorado); }
.historia-hero h1 { margin: 0; color: #fff; font-size: clamp(44px, 7vw, 80px); text-transform: uppercase; letter-spacing: -.03em; }
.historia-hero__intro { max-width: 560px; margin: 18px 0 0; font-size: 18px; color: rgba(255, 255, 255, .82); }
.historia-hero__anios { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-weight: 800; letter-spacing: -.03em; }
.historia-hero__anios span { font-size: clamp(36px, 5vw, 56px); color: rgba(255, 255, 255, .4); }
.historia-hero__anios strong { font-size: clamp(52px, 8vw, 88px); color: var(--dorado); font-variant-numeric: tabular-nums; }
.historia-hero__anios .icono { width: 34px; height: 34px; color: var(--dorado); }
.historia-hero__sello { flex: 0 1 300px; }
.historia-hero__sello .sello { width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); animation: girar-suave 30s linear infinite; }
@keyframes girar-suave { to { transform: rotate(360deg); } }

.historia { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px); background: var(--lavanda); }
.historia__contenedor { position: relative; }
.historia__linea { position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; border-radius: 8px; background: #e2d6fb; }
.historia__progreso { display: block; width: 100%; height: 0; border-radius: 8px; background: linear-gradient(var(--morado), var(--morado-oscuro)); }
.historia__lista { position: relative; display: grid; gap: 60px; margin: 0; padding: 0; list-style: none; }
.hito { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 90px; align-items: center; }
.hito__tarjeta { padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--sombra); }
.hito__tarjeta h2 { margin: 6px 0 8px; font-size: 22px; }
.hito__tarjeta p { margin: 0; font-size: 16px; color: var(--texto-suave); }
.hito__tarjeta .hito__anio { font-size: 36px; font-weight: 800; line-height: 1; color: var(--morado); }
.hito__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: 18px; }
.hito--izquierda .hito__tarjeta { grid-column: 1; grid-row: 1; }
.hito--izquierda .hito__personaje { grid-column: 2; grid-row: 1; }
.hito--derecha .hito__tarjeta { grid-column: 2; grid-row: 1; }
.hito--derecha .hito__personaje { grid-column: 1; grid-row: 1; }
.hito__personaje { display: grid; justify-items: center; gap: 12px; }
.hito__figura { position: relative; display: block; }
.hito__figura img { width: auto; height: 190px; filter: drop-shadow(0 12px 16px rgba(42, 20, 84, .2)); }
.birrete { position: absolute; left: 22%; top: -24%; width: 90px; height: auto; transform: rotate(-14deg); }
.hito__etapa { padding: 6px 14px; border-radius: 999px; background: var(--morado-oscuro); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hito__punto { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 5px solid var(--morado); }
.hito:last-child .hito__punto { border-color: var(--dorado); }

.antes-ahora { padding: clamp(60px, 8vw, 100px) 0; }
.antes-ahora__marco { position: relative; margin-top: 26px; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--lavanda-2); }
.antes-ahora__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.antes-ahora__antes { clip-path: inset(0 50% 0 0); }
.antes-ahora__linea { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .3); pointer-events: none; }
.antes-ahora__etiqueta { position: absolute; left: 18px; top: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(42, 20, 84, .85); color: #fff; font-size: 13px; font-weight: 700; }
.antes-ahora__etiqueta--ahora { left: auto; right: 18px; background: var(--morado); }
.antes-ahora__marco input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.historia-cta { padding: 0 0 clamp(70px, 9vw, 110px); background: var(--lavanda); }
.historia-cta__interno { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 70px) 24px; border-radius: 28px; background: #fff4d6; text-align: center; }
.historia-cta__interno h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); text-transform: uppercase; }
.historia-cta__interno p { margin: 0 0 8px; color: #5d4a1c; }

/* ---------------------------------------------------------------- Marco para foto de perfil */
.marco-foto { padding: clamp(50px, 7vw, 90px) 0 clamp(70px, 9vw, 110px); background: var(--lavanda); }
.marco-foto__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.marco-foto__texto h1 { font-size: clamp(34px, 5vw, 56px); }
.marco-foto__texto p { font-size: 17px; color: var(--texto-suave); }
.marco-foto__privado { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 14px !important; }
.marco-foto__privado .icono { margin-top: 2px; color: var(--morado); }
.marco-foto__herramienta { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: #fff; box-shadow: var(--sombra-fuerte); }
.marco-foto__vista { display: grid; place-items: center; }
.marco-foto__vista canvas { width: min(100%, 420px); height: auto; aspect-ratio: 1; border-radius: 50%; }
.marco-foto__opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.marco-foto__opciones legend { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--morado-oscuro); }
.marco-foto__opciones label { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--borde); font-size: 13px; font-weight: 600; color: var(--morado-oscuro); cursor: pointer; }
.marco-foto__opciones input { position: absolute; opacity: 0; }
.marco-foto__opciones label:has(input:checked) { border-color: var(--morado); background: var(--lavanda); }
.marco-foto__opciones label:has(input:focus-visible) { outline: 3px solid var(--morado); outline-offset: 2px; }
.marco-foto__muestra { width: 36px; height: 36px; border-radius: 50%; }
.marco-foto__muestra--morado { background: conic-gradient(#8750f7, #2a1454, #8750f7); }
.marco-foto__muestra--dorado { background: conic-gradient(#f5b82e, #ffe08a, #f5b82e); }
.marco-foto__muestra--fiesta { background: conic-gradient(#f28ab2, #f5b82e, #8750f7, #f28ab2); }
.marco-foto__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.marco-foto__acciones .boton { flex: 1 1 200px; justify-content: center; }
.marco-foto__subir { position: relative; overflow: hidden; }
.marco-foto__subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.marco-foto__subir:has(input:focus-visible) { outline: 3px solid var(--morado); outline-offset: 3px; }
.marco-foto__ayuda { margin: 0; font-size: 13px; color: var(--texto-suave); }
.marco-foto__zoom { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--morado-oscuro); }
.marco-foto__zoom input { flex: 1; accent-color: var(--morado); }

@media (max-width: 960px) {
  .celebra__grid { grid-template-columns: 1fr; max-width: 560px; }
  .marco-foto__grid { grid-template-columns: 1fr; }
  .historia__linea { left: 30px; }
  .hito { grid-template-columns: 1fr; gap: 16px; padding-left: 64px; }
  .hito--izquierda .hito__tarjeta, .hito--derecha .hito__tarjeta { grid-column: 1; grid-row: 2; }
  .hito--izquierda .hito__personaje, .hito--derecha .hito__personaje { grid-column: 1; grid-row: 1; justify-items: start; }
  .hito__figura img { height: 130px; }
  .hito__punto { left: 30px; top: 60px; }
  .birrete { width: 64px; }
}
@media (max-width: 640px) {
  .aniv-titulo__lado { padding-bottom: 8px; }
  .historia-hero__sello { flex-basis: 200px; margin: 0 auto; }
  .marco-foto__opciones { gap: 8px; }
}

@media (max-width: 699px) {
  .hero--aniversario .personaje { display: none; }
}

/* ---------------------------------------------------------------- Llama Lev: guía flotante */
.flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 46; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.flotantes > * { pointer-events: auto; }
.flotantes .wa-flotante { position: relative; right: auto; bottom: auto; }
.guia { position: static; }
.guia__llama {
  display: block; width: 76px; height: 72px; margin: 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer;
  overflow: hidden; transition: translate .25s cubic-bezier(.2, .8, .2, 1.3);
}
.guia__llama img { display: block; width: 76px; height: auto; filter: drop-shadow(0 -4px 10px rgba(42, 20, 84, .18)); transform-origin: 50% 100%; }
.guia__llama:hover, .guia__llama[aria-expanded="true"] { translate: 0 -6px; }
.guia__llama:focus-visible { outline-offset: -3px; }
.js-anim .guia__llama img { animation: llama-asoma .8s 1.6s both cubic-bezier(.2, .8, .2, 1.2), llama-respira 3.2s 2.6s ease-in-out infinite; }
@keyframes llama-asoma { from { transform: translateY(100%); } }
@keyframes llama-respira { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
.guia__burbuja {
  position: absolute; right: 150px; bottom: calc(100% + 4px); margin: 0; padding: 9px 14px; white-space: nowrap;
  border-radius: 16px 16px 4px 16px; background: var(--morado-oscuro); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: var(--sombra-fuerte); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.9); transform-origin: 90% 100%;
  transition: opacity .3s, transform .3s cubic-bezier(.2, .8, .2, 1.3), visibility .3s;
}
.guia__burbuja.visible { opacity: 1; visibility: visible; transform: none; }
.guia__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(310px, calc(100vw - 28px)); padding: 20px 18px 16px;
  border-radius: 22px 22px 6px 22px; background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-fuerte);
  transform-origin: 90% 100%;
}
.guia__panel:not([hidden]) { animation: guia-abre .28s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes guia-abre { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.guia__cerrar { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--lavanda); color: var(--morado-oscuro); cursor: pointer; }
.guia__cerrar .icono { width: 16px; height: 16px; }
.guia__hola { margin: 0 34px 12px 0; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.guia__hola strong { display: block; font-size: 16px; color: var(--morado-oscuro); }
.guia__enlaces { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.guia__enlaces a { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--lavanda); color: var(--morado-oscuro); font-size: 13px; font-weight: 600; }
.guia__enlaces a:hover { background: var(--lavanda-2); color: var(--morado); }
.guia__enlaces .icono { width: 17px; height: 17px; color: var(--morado); flex: none; }
.guia__juego, .guia__wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.guia__juego { margin-bottom: 6px; background: linear-gradient(95deg, #26b0a4, #1d9286); color: #fff; }
.guia__juego:hover { color: #fff; filter: brightness(1.06); }
.guia__wa { background: #25d366; color: #fff; }
.guia__wa:hover { color: #fff; background: #1ebe5a; }
.guia__wa .icono { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .flotantes { right: 14px; bottom: 14px; }
  .guia__llama { width: 64px; height: 60px; margin-bottom: -14px; }
  .guia__llama img { width: 64px; }
}
@media print { .flotantes { display: none; } }

/* ---------------------------------------------------------------- 404 con la llama */
.error404 { padding: 90px 0 0; text-align: left; overflow: hidden; }
.error404__interno { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; }
.error404__texto { padding-bottom: 90px; }
.error404__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.error404__llama { width: clamp(150px, 22vw, 231px); height: auto; filter: drop-shadow(0 18px 24px rgba(42, 20, 84, .2)); }
.js-anim .error404__llama { animation: llama-asoma .9s .2s both cubic-bezier(.2, .8, .2, 1.2); }
@media (max-width: 640px) {
  .error404 { text-align: center; padding-top: 60px; }
  .error404__interno { grid-template-columns: 1fr; justify-items: center; }
  .error404__texto { padding-bottom: 0; }
  .error404__acciones { justify-content: center; }
  .error404__llama { width: 150px; }
}

/* ---------------------------------------------------------------- Juego Llama Lev */
.juego { padding: 18px 0 40px; background: #170a33; }
.juego__escena {
  position: relative; width: min(100% - 24px, 1280px); margin: 0 auto; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--cabecera) - 40px); max-height: calc(100svh - var(--cabecera) - 40px);
  border-radius: 22px; overflow: hidden; background: #2a1454; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none;
}
.juego__escena:fullscreen { width: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.juego__lienzo { display: block; width: 100%; height: 100%; cursor: pointer; }
.juego__hud { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.juego__icono { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .3); color: #fff; font: 700 16px/1 "Sora", sans-serif; cursor: pointer; }
.juego__icono:hover { background: rgba(0, 0, 0, .45); }
.juego__icono[aria-pressed="true"] { opacity: .55; text-decoration: line-through; }
.juego__capa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px 32px; background: rgba(23, 10, 51, .72); backdrop-filter: blur(3px); overflow-y: auto; }
.juego__capa[hidden], .juego__hud[hidden] { display: none; }
.juego__menu { justify-content: space-between; background: linear-gradient(90deg, rgba(23, 10, 51, .9) 0%, rgba(23, 10, 51, .5) 100%); }
.juego__titulo { max-width: 430px; }
.juego__menu-llama { align-self: flex-end; height: min(62%, 380px); width: auto; margin-bottom: 4%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.js-anim .juego__menu-llama { animation: llama-flota 2.6s ease-in-out infinite; }
@keyframes llama-flota { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@media (max-width: 1100px) { .juego__menu-llama { display: none; } }
.juego__escuela { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #c9b6ff; }
.juego h1, .juego h2 { color: #fff; }
.juego h1 { margin: 0; font-size: clamp(34px, 6vw, 78px); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.juego h1 span { display: inline-block; margin-top: 10px; padding: 4px 16px 6px; border-radius: 14px; background: #f5b82e; color: #2a1454; font-size: .5em; letter-spacing: -.02em; transform: rotate(-3deg); }
.juego__ayuda { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: #e5dcfb; }
.juego kbd { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .15); font: inherit; font-weight: 700; }
.juego__opciones { display: flex; flex-direction: column; gap: 14px; width: min(400px, 100%); }
.juego fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.juego legend { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c9b6ff; }
.juego__colores { display: flex; gap: 8px; }
.juego__colores legend { width: 100%; }
.juego__color, .juego__nivel { position: relative; cursor: pointer; }
.juego__color input, .juego__nivel input { position: absolute; opacity: 0; pointer-events: none; }
.juego__color { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 700; }
.juego__color img { width: 26px; height: 54px; object-fit: contain; }
.juego__nivel { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; padding: 9px 12px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); transition: transform .15s, background .15s; }
.juego__color:has(input:checked), .juego__nivel:has(input:checked) { border-color: #f5b82e; background: rgba(255, 255, 255, .16); }
.juego__nivel:has(input:checked) { transform: translateX(-6px); }
.juego__color:has(input:focus-visible), .juego__nivel:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
.juego__nivel-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; background: #8750f7; flex: none; }
.juego__nivel--inicial .juego__nivel-icono { background: #26b0a4; }
.juego__nivel--bachillerato .juego__nivel-icono { background: #e4624b; }
.juego__nivel--aniversario .juego__nivel-icono { background: #f5b82e; }
.juego__nivel-texto { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.juego__nivel-texto strong { font-size: 15px; }
.juego__nivel-texto small { font-size: 12px; opacity: .8; }
.juego__nivel-dif { font-size: 12px; letter-spacing: 1px; color: #f5b82e; }
.juego__nivel-record { position: absolute; right: 12px; bottom: 3px; font-size: 10px; font-weight: 700; color: #9fe7dd; }
.juego__jugar, .juego__secundario, .juego__enlace { font-family: inherit; cursor: pointer; }
.juego__jugar { padding: 14px 30px; border: 0; border-radius: 999px; background: #f5b82e; color: #2a1454; font-size: 20px; font-weight: 800; box-shadow: 0 6px 0 #c48a10; transition: translate .1s, box-shadow .1s; }
.juego__jugar:active { translate: 0 4px; box-shadow: 0 2px 0 #c48a10; }
.juego__secundario { padding: 12px 20px; border: 2px solid rgba(42, 20, 84, .15); border-radius: 999px; background: #fff; color: #2a1454; font-size: 15px; font-weight: 700; }
.juego__pausa { flex-direction: column; gap: 14px; }
.juego__pausa h2 { margin: 0 0 6px; font-size: 44px; }
.juego__fin { background: radial-gradient(90% 80% at 50% 40%, rgba(135, 80, 247, .9) 0%, rgba(42, 20, 84, .95) 100%); }
.juego__fin-llama { height: min(80%, 420px); width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.juego__fin-tarjeta { width: min(480px, 100%); padding: 26px 28px; border-radius: 26px; background: #fff; color: #2a1454; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.juego__fin-tarjeta h2 { margin: 0; color: #2a1454; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.juego__fin-nivel { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8750f7; }
.juego__estrellas { margin: 10px 0; font-size: 42px; line-height: 1; letter-spacing: 6px; }
.juego__estrellas .apagada { opacity: .2; filter: grayscale(1); }
.juego__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.juego__datos div { padding: 10px; border-radius: 14px; background: var(--lavanda); }
.juego__datos dt { font-size: 11px; color: var(--texto-suave); }
.juego__datos dd { margin: 0; font-size: 22px; font-weight: 800; }
.juego__dato { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: #e6f6f3; color: #1d5f58; font-size: 13px; line-height: 1.45; }
.juego__fin-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.juego__fin-botones .juego__jugar { flex: 1 1 100%; font-size: 17px; padding: 12px; }
.juego__fin-botones .juego__secundario { flex: 1; font-size: 14px; padding: 10px; }
.juego__enlace { display: block; margin: 10px auto 0; border: 0; background: none; color: #8750f7; font-size: 13px; font-weight: 600; text-decoration: underline; }
.juego__girar { display: none; }
.juego__info { padding-top: 16px; text-align: center; font-size: 13px; color: #c9b6ff; }
.juego__info p { margin: 0; }

@media (max-width: 760px) {
  .juego { padding-top: 10px; }
  .juego__escena { width: 100%; border-radius: 0; aspect-ratio: auto; height: min(calc(100svh - 16px), 135vw); max-height: 760px; min-height: 460px; }
  .juego__menu, .juego__fin { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 16px; padding: 22px 16px; }
  .juego__titulo { max-width: none; }
  .juego__ayuda { font-size: 13px; margin-top: 10px; }
  .juego__nivel { margin-bottom: 5px; padding: 7px 10px; }
  .juego__nivel:has(input:checked) { transform: none; }
  .juego__fin-llama { display: none; }
  .jugando .juego__girar { display: block; position: absolute; left: 50%; bottom: 10px; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 12px; white-space: nowrap; pointer-events: none; }
  .jugando .juego__girar { animation: girar-oculta 4s forwards; }
}
@keyframes girar-oculta { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) and (orientation: landscape) { .juego__girar { display: none; } .juego__escena { min-height: 0; height: calc(100svh - 20px); } }
/* La página del juego no muestra la guía para que no tape el juego */
body:has(.juego) .flotantes, body:has(.juego) .accesos { display: none; }

/* Juego: ranking */
.juego__acciones { display: flex; gap: 10px; align-items: stretch; }
.juego__acciones .juego__jugar { flex: 1; }
.juego__ranking-boton { padding: 0 18px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 15px/1 "Sora", sans-serif; cursor: pointer; }
.juego__ranking-boton:hover { background: rgba(255, 255, 255, .18); }
.juego__ranking { z-index: 3; background: rgba(23, 10, 51, .8); }
.juego__ranking-tarjeta { position: relative; width: min(520px, 100%); max-height: 100%; overflow-y: auto; padding: 24px 24px 18px; border-radius: 24px; background: #fff; color: #2a1454; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.juego__ranking-tarjeta h2 { margin: 0 0 12px; color: #2a1454; font-size: 28px; }
.juego__cerrar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--lavanda); color: #2a1454; font-size: 16px; cursor: pointer; }
.juego__pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.juego__pestanas button { padding: 7px 12px; border: 0; border-radius: 999px; background: var(--lavanda); color: #2a1454; font: 600 13px/1 "Sora", sans-serif; cursor: pointer; }
.juego__pestanas button[aria-selected="true"] { background: #8750f7; color: #fff; }
.juego__tabla { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.juego__tabla li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--lavanda); font-size: 14px; }
.juego__tabla li.mio { background: #fff4d6; box-shadow: inset 0 0 0 2px #f5b82e; }
.juego__tabla .pos { font-weight: 800; text-align: center; font-size: 16px; }
.juego__tabla .nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.juego__tabla .nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego__tabla .nombre small { font-size: 11px; color: var(--texto-suave); }
.juego__tabla .est { font-weight: 700; white-space: nowrap; }
.juego__tabla .int { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.juego__ranking-estado { margin: 10px 0 0; font-size: 13px; color: var(--texto-suave); }
.juego__ranking-estado:empty { display: none; }
.juego__ranking-nota { margin: 10px 0 0; font-size: 11px; color: var(--texto-suave); }
.juego__guardar { margin: 0 0 14px; padding: 14px; border-radius: 16px; border: 2px dashed #e6dcfb; }
.juego__guardar-titulo { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.juego__guardar-campos { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-bottom: 8px; }
.juego__guardar input, .juego__guardar select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--lavanda); color: #2a1454; font: 500 14px "Sora", sans-serif; }
.juego__guardar input:focus, .juego__guardar select:focus { outline: none; border-color: #8750f7; background: #fff; }
.juego__guardar-boton { width: 100%; padding: 10px; border: 0; border-radius: 999px; background: #8750f7; color: #fff; font: 700 15px "Sora", sans-serif; cursor: pointer; }
.juego__guardar-boton:disabled { opacity: .6; cursor: default; }
.juego__guardar.guardado .juego__guardar-boton, .juego__guardar.guardado .juego__guardar-ayuda { display: none; }
.juego__guardar-ayuda { margin: 6px 0 0; font-size: 11px; color: var(--texto-suave); }
.juego__guardar-estado { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #2a1454; }
.juego__guardar-estado:empty { display: none; }
.juego__enlace-linea { padding: 0; border: 0; background: none; color: #8750f7; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.juego__fin { align-items: flex-start; }
.juego__fin-tarjeta { margin: auto 0; }
@media (max-width: 480px) { .juego__guardar-campos { grid-template-columns: 1fr; } .juego__tabla li { grid-template-columns: 28px minmax(0, 1fr) auto; } .juego__tabla .int { grid-column: 2 / 4; margin-top: -4px; } }

/* ---------------------------------------------------------------- Celular: barra inferior tipo app */
.barra-app, .hoja { display: none; }
@media (max-width: 760px) {
  :root { --barra-app: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--barra-app); }
  .barra-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--lavanda-2); box-shadow: 0 -8px 24px rgba(42, 20, 84, .06);
  }
  .barra-app__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 2px 0;
    border: 0; background: none; color: #8a80a0; font: 600 10.5px/1.2 "Sora", sans-serif; text-align: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .barra-app__icono { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .2s, color .2s; }
  .barra-app__icono .icono { width: 22px; height: 22px; }
  .barra-app__item:hover, .barra-app__item:focus-visible { color: var(--morado-oscuro); }
  .barra-app__item[aria-current="page"], .barra-app__item[aria-expanded="true"] { color: var(--morado); font-weight: 700; }
  .barra-app__item[aria-current="page"] .barra-app__icono, .barra-app__item[aria-expanded="true"] .barra-app__icono { background: var(--lavanda-2); }
  .barra-app__item:active .barra-app__icono { transform: scale(.92); }

  .hoja:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; }
  .hoja__fondo { position: absolute; inset: 0; background: rgba(23, 10, 51, .45); animation: hoja-fondo .25s ease; }
  .hoja__panel {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(42, 20, 84, .2);
    animation: hoja-sube .32s cubic-bezier(.2, .8, .2, 1);
  }
  .hoja__asa { display: block; width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 9px; background: #e0d6f5; }
  .hoja__titulo { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--morado-oscuro); }
  .hoja__lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .hoja__item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--morado-oscuro); text-align: center; }
  .hoja__icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--lavanda); color: var(--morado); }
  .hoja__icono .icono { width: 24px; height: 24px; }
  .hoja__item--wa .hoja__icono { background: #e3f9ea; color: #1ebe5a; }
  .hoja__cerrar { display: block; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: var(--lavanda); color: var(--morado-oscuro); font: 700 14px "Sora", sans-serif; cursor: pointer; }
  @keyframes hoja-sube { from { transform: translateY(100%); } }
  @keyframes hoja-fondo { from { opacity: 0; } }

  /* Lo flotante sube por encima de la barra */
  .flotantes { bottom: var(--barra-app); }
  .flotantes .wa-flotante { margin-bottom: 12px; }
  .subir, .subir.visible { bottom: calc(var(--barra-app) + 70px); }
  .guia__llama { margin-bottom: -12px; }
  /* El juego usa toda la pantalla: sin barra */
  body:has(.juego) { padding-bottom: 0; }
  body:has(.juego) .barra-app { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hoja__panel, .hoja__fondo { animation: none; } }
@media print { .barra-app, .hoja { display: none !important; } }

/* ---------------------------------------------------------------- Instalar como app */
.instalar { display: none; }
.hoja__instalar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 12px; border: 0; border-radius: 14px; background: linear-gradient(95deg, var(--morado), var(--morado-oscuro)); color: #fff; font: 700 14px "Sora", sans-serif; cursor: pointer; }
.hoja__instalar[hidden] { display: none; }
.hoja__instalar .icono { width: 18px; height: 18px; }
.instalar:not([hidden]) {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--barra-app, 0px) + 12px); z-index: 65;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 20px;
  background: #fff; border: 1px solid var(--lavanda-2); box-shadow: var(--sombra-fuerte);
  animation: hoja-sube-aviso .4s cubic-bezier(.2, .8, .2, 1.2);
}
@keyframes hoja-sube-aviso { from { opacity: 0; transform: translateY(30px); } }
.instalar img { flex: none; width: 52px; height: 52px; border-radius: 14px; }
.instalar__texto { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.instalar__texto strong { font-size: 14px; color: var(--morado-oscuro); }
.instalar__botones { display: flex; align-items: center; gap: 6px; }
.instalar__si { padding: 10px 14px; border: 0; border-radius: 999px; background: var(--morado); color: #fff; font: 700 13px "Sora", sans-serif; cursor: pointer; }
.instalar__no { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--lavanda); color: var(--morado-oscuro); font-size: 14px; cursor: pointer; }
.instalar.ios .instalar__si { display: none; }
@media (min-width: 761px) { .instalar:not([hidden]) { left: auto; right: 24px; width: 380px; bottom: 100px; } }
/* Abierta como app: no hace falta ofrecer instalarla */
@media (display-mode: standalone) { .hoja__instalar, .instalar { display: none !important; } }