/* =========================================================
   Bitubi Xhaibaa · Club de patinaje · Oaxaca
   Hoja de estilos principal
   Paleta tomada del logotipo (azul y rosa) y del cartel
   del BitubiFest (amarillo y cian).
   ========================================================= */

:root{
  /* Colores */
  --noche:        #0E1424;
  --noche-2:      #161E33;
  --noche-3:      #090D18;
  --nube:         #F2F6FA;
  --nube-clara:   #F8FAFC;
  --blanco:       #FFFFFF;
  --rosa:         #E4298A;
  --rosa-osc:     #B8166C;
  --cian:         #1D94D3;
  --cian-claro:   #4FD8E2;
  --azul:         #12305A;
  --amarillo:     #F5B400;
  --amarillo-claro:#FFC83D;
  --whats:        #25D366;
  --whats-osc:    #08331A;

  --texto:        #0E1424;
  --texto-suave:  #566178;
  --texto-tenue:  #8C96A8;
  --borde:        #DCE3EC;
  --borde-oscuro: #2A3550;
  --sobre-oscuro: #A9B4C8;

  /* Tipografía */
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --cuerpo:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --ancho-max: 1440px;
  --gutter: 20px;
  --radio: 20px;
  --radio-gr: 28px;
  --alto-encabezado: 84px;

  --sombra: 0 24px 48px rgba(14,20,36,.22);
  --transicion: .35s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--alto-encabezado); }

body{
  margin:0;
  background:var(--nube);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,picture,svg{ max-width:100%; }
img{ display:block; height:auto; }

h1,h2,h3{ margin:0; font-weight:700; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:var(--rosa); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--rosa-osc); }

:focus-visible{ outline:3px solid var(--amarillo-claro); outline-offset:3px; border-radius:4px; }

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rosa); color:var(--nube-clara);
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:600;
}
.salto-contenido:focus{ left:0; color:var(--nube-clara); }

.contenedor{
  width:100%; max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Tipografía de apoyo ---------- */
.antetitulo{
  display:flex; align-items:center; gap:14px;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rosa); font-weight:600; margin-bottom:10px;
}
.antetitulo--claro{ color:var(--amarillo-claro); }
.antetitulo__linea{ display:block; width:46px; height:2px; background:currentColor; flex:none; }

.titulo{
  font-family:var(--display);
  font-size:clamp(2.3rem, 5vw, 3.8rem);
  line-height:.98; letter-spacing:-.005em;
  text-transform:uppercase;
  text-wrap:balance;
}
.titulo em{ font-style:italic; color:var(--cian); }
.titulo--claro{ color:var(--nube-clara); }

.etiqueta{
  display:inline-block;
  background:var(--amarillo); color:var(--noche);
  padding:8px 16px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 32px;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--cuerpo); font-size:1rem; font-weight:600;
  cursor:pointer; text-align:center;
  transition:background var(--transicion), color var(--transicion),
             border-color var(--transicion), transform var(--transicion);
}
.boton:active{ transform:translateY(1px); }
.boton--primario{ background:var(--rosa); color:var(--nube-clara); }
.boton--primario:hover{ background:var(--rosa-osc); color:var(--nube-clara); }
.boton--fantasma{ border-color:rgba(242,246,250,.45); color:var(--nube-clara); background:transparent; font-weight:500; }
.boton--fantasma:hover{ background:rgba(242,246,250,.12); color:var(--nube-clara); }
.boton--fantasma-claro{ border-color:rgba(242,246,250,.4); color:var(--nube-clara); background:transparent; font-weight:500; }
.boton--fantasma-claro:hover{ background:rgba(242,246,250,.12); color:var(--nube-clara); }
.boton--contorno{ border-color:#C9D3E0; color:var(--texto); background:transparent; min-height:50px; padding:0 26px; }
.boton--contorno:hover{ border-color:var(--rosa); color:var(--rosa); }
.boton--compacto{ min-height:46px; padding:0 24px; font-size:.9rem; }
.boton--ancho{ width:100%; }

/* =========================================================
   ENCABEZADO
   ========================================================= */
.encabezado{
  position:fixed; inset:0 0 auto 0; z-index:90;
  isolation:isolate;
}
/* El fondo con desenfoque va en un pseudo-elemento: si backdrop-filter
   estuviera en el propio encabezado, el menú móvil (position:fixed)
   quedaría encerrado dentro del alto del encabezado. */
.encabezado::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(14,20,36,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(242,246,250,.12);
  opacity:0; transition:opacity var(--transicion);
}
.encabezado.es-solido::before,
.encabezado.es-menu-abierto::before{ opacity:1; }
.encabezado__interior{
  max-width:var(--ancho-max); margin-inline:auto;
  padding:16px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.marca{ display:flex; align-items:center; gap:14px; color:var(--nube); }
.marca:hover{ color:var(--nube); }
.marca__logo{ width:52px; height:52px; object-fit:contain; flex:none; }
.marca__texto{ display:flex; flex-direction:column; gap:1px; }
.marca__nombre{ font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; text-transform:uppercase; letter-spacing:.02em; }
.marca__sufijo{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cian-claro); }

.navegacion__lista{ display:flex; align-items:center; gap:28px; }
.navegacion__lista a{
  font-size:.82rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:#DCE4EF;
}
.navegacion__lista a:hover{ color:var(--amarillo-claro); }
.navegacion__lista .boton{ color:var(--nube-clara); letter-spacing:.06em; }

.hamburguesa{
  display:none;
  width:48px; height:48px; flex:none;
  background:transparent; border:1px solid rgba(242,246,250,.35);
  border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburguesa span{
  display:block; width:18px; height:1.5px; background:var(--nube);
  transition:transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* =========================================================
   BANNER
   ========================================================= */
.portada{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(90px, 14vh, 150px);
  background:var(--noche);
  overflow:hidden;
  isolation:isolate;
}
.portada__fotos{ position:absolute; inset:0; z-index:-2; }
.portada__foto{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.3s ease-in-out;
}
.portada__foto img{ width:100%; height:100%; object-fit:cover; }
.portada__foto.es-activa{ opacity:1; }
.portada__foto.es-activa img{ animation:acercamiento 9s ease-out both; }

@keyframes acercamiento{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.10); }
}

.portada__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(14,20,36,.82) 0%,
    rgba(14,20,36,.14) 32%,
    rgba(14,20,36,.55) 66%,
    rgba(14,20,36,.95) 100%);
}

.portada__contenido{ max-width:900px; margin-inline:0; }
.portada__titulo{
  font-family:var(--display);
  font-size:clamp(3.4rem, 9vw, 8rem);
  line-height:.88; letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--nube-clara);
  margin:18px 0 22px;
  text-wrap:balance;
}
.portada__titulo em{ font-style:italic; color:var(--cian-claro); }
.portada__bajada{
  font-size:clamp(1rem, 1.3vw, 1.19rem);
  line-height:1.6; color:#D5DEEA; max-width:40ch;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.portada__control{
  position:absolute; right:var(--gutter);
  bottom:clamp(90px, 14vh, 150px);
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.portada__conteo{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:#9FB6CF;
}
.portada__barras{ display:flex; gap:10px; }
.portada__barra{
  width:54px; height:10px; padding:0;
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center;
}
.portada__barra::after{
  content:""; display:block; width:100%; height:3px;
  background:rgba(242,246,250,.3);
  transition:background var(--transicion);
}
.portada__barra.es-activa::after{ background:var(--rosa); }
.portada__barra:hover::after{ background:rgba(242,246,250,.6); }

/* Franja de chevrones inspirada en el cartel del BitubiFest */
.greca{
  position:absolute; left:0; right:0; bottom:0; height:24px;
  background-color:var(--noche);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='24' viewBox='0 0 64 24'>\
<path d='M4 4h8l8 8-8 8H4l8-8Z' fill='%23E4298A'/>\
<path d='M20 4h8l8 8-8 8h-8l8-8Z' fill='%23E4298A' opacity='.55'/>\
<path d='M36 4h8l8 8-8 8h-8l8-8Z' fill='%234FD8E2'/></svg>");
  background-repeat:repeat-x;
  background-size:auto 24px;
}

/* =========================================================
   SECCIONES
   ========================================================= */
.seccion{ padding:clamp(52px, 8vw, 88px) 0 0; }
.seccion--oscura{
  margin-top:clamp(52px, 8vw, 88px);
  background:var(--noche); color:var(--nube);
  padding:clamp(52px, 7vw, 80px) 0;
}

.seccion__encabezado{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-bottom:34px;
}
.seccion__apunte{ color:var(--texto-suave); max-width:32ch; text-align:right; }

/* ---------- Bento ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:18px;
}
.bento__pieza{
  border-radius:var(--radio-gr);
  overflow:hidden;
  position:relative;
}

.bento__pieza--mision{
  grid-column:span 7;
  background:var(--noche); color:var(--nube);
  padding:clamp(28px, 3vw, 42px);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  min-height:330px;
}
.mision__superior{ display:flex; flex-direction:column; gap:22px; }
.mision__sello{ width:76px; height:76px; object-fit:contain; }
.mision__texto{
  font-size:clamp(1.05rem, 1.35vw, 1.24rem);
  line-height:1.6; color:#E3EAF3; max-width:58ch;
}
.mision__pie{
  display:flex; align-items:center; gap:12px;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amarillo-claro);
}
.mision__guion{ display:block; width:30px; height:1px; background:currentColor; flex:none; }

/* Pieza del nombre zapoteco */
.bento__pieza--nombre{
  grid-column:span 5; min-height:330px;
  background:linear-gradient(160deg, var(--cian) 0%, #1677B8 100%);
  color:var(--blanco);
  padding:clamp(28px, 3vw, 42px);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  isolation:isolate;
}
.nombre__origen{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82);
}
.nombre__palabra{
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(2.8rem, 5.4vw, 4.6rem); line-height:.92;
  text-transform:uppercase;
}
.nombre__significado{
  margin-top:12px;
  font-size:clamp(1.1rem, 1.6vw, 1.4rem); font-weight:600; color:#FFE7F3;
}
/* Nubes decorativas */
.nombre__nubes{
  position:absolute; right:-40px; top:-30px; z-index:-1;
  width:260px; height:160px; opacity:.22;
  background:
    radial-gradient(circle at 30% 65%, #fff 0 38px, transparent 39px),
    radial-gradient(circle at 52% 45%, #fff 0 52px, transparent 53px),
    radial-gradient(circle at 74% 62%, #fff 0 40px, transparent 41px),
    linear-gradient(#fff, #fff) 22% 78% / 62% 30px no-repeat;
}

.bento__pieza--foto{ grid-column:span 4; min-height:340px; }
.tarjeta-disciplina img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tarjeta-disciplina:hover img{ transform:scale(1.05); }
.tarjeta-disciplina::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(228,41,138,0) 40%, rgba(184,22,108,.92) 100%);
}
.tarjeta-disciplina--downhill::after{
  background:linear-gradient(180deg, rgba(18,48,90,0) 40%, rgba(18,48,90,.94) 100%);
}
.tarjeta-disciplina--free::after{
  background:linear-gradient(180deg, rgba(29,148,211,0) 40%, rgba(22,119,184,.94) 100%);
}
.tarjeta-disciplina__texto{
  position:absolute; left:26px; right:26px; bottom:24px; z-index:2;
  display:flex; flex-direction:column; gap:6px;
}
.tarjeta-disciplina__texto h3{
  font-family:var(--display); font-style:italic; font-size:2.3rem; line-height:1;
  text-transform:uppercase; color:var(--nube-clara);
}
.tarjeta-disciplina__texto p{ font-size:.9rem; line-height:1.5; color:#EAF1F8; }

/* Compromiso */
.bento__pieza--compromiso{
  grid-column:span 12;
  background:var(--blanco); border:1px solid var(--borde);
  padding:clamp(26px, 3vw, 44px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px, 3vw, 48px); align-items:center;
}
.compromiso__texto{ display:flex; flex-direction:column; gap:14px; }
.compromiso__titulo{
  font-family:var(--display); font-size:2rem; line-height:1;
  text-transform:uppercase; color:var(--rosa);
}
.compromiso__texto p{ color:var(--texto-suave); font-size:1.02rem; }

.valores{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.valor{
  border-radius:16px; padding:18px 18px 18px 20px;
  background:var(--nube); border-left:5px solid var(--rosa);
  font-weight:600; line-height:1.3; font-size:.98rem;
}
.valor--cian{ border-left-color:var(--cian); }
.valor--amarillo{ border-left-color:var(--amarillo); }
.valor--azul{ border-left-color:var(--azul); }

/* ---------- Evento ---------- */
.evento{
  background:var(--noche); border-radius:var(--radio-gr);
  padding:clamp(22px, 3vw, 40px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px, 3vw, 44px); align-items:center;
  color:var(--nube);
  position:relative; overflow:hidden;
}
.evento::before{
  content:""; position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg, var(--rosa), var(--cian-claro), var(--amarillo));
}
.evento__cartel{
  display:block; border-radius:16px; overflow:hidden; box-shadow:var(--sombra);
  transition:transform var(--transicion);
}
.evento__cartel:hover{ transform:scale(1.01); }
.evento__cartel img{ width:100%; }
.evento__detalle{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.evento__titulo{
  font-family:var(--display); font-style:italic;
  font-size:clamp(2.8rem, 5vw, 4.6rem);
  line-height:.9; text-transform:uppercase; color:var(--cian-claro);
}
.evento__titulo em{ color:var(--rosa); }
.evento__lema{ font-size:1.06rem; color:#C3CEDD; max-width:46ch; }

.evento__datos{ display:grid; grid-template-columns:1fr; gap:12px; width:100%; }
.evento__datos li{
  background:rgba(242,246,250,.06); border:1px solid rgba(242,246,250,.16);
  border-radius:14px; padding:14px 18px;
  display:flex; align-items:center; gap:14px;
}
.evento__datos svg{ width:22px; height:22px; color:var(--amarillo); flex:none; }
.evento__datos span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.evento__datos small{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#8EA2BC; }
.evento__datos strong{ font-size:.98rem; font-weight:600; }

.evento__disciplinas{ width:100%; display:flex; flex-direction:column; gap:10px; }
.evento__disciplinas > p{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#8EA2BC;
}
.evento__disciplinas ul{ display:flex; flex-wrap:wrap; gap:8px; }
.evento__disciplinas li{
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(79,216,226,.45); color:#DFF8FA;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.evento__disciplinas li:nth-child(even){ border-color:rgba(228,41,138,.55); color:#FFE1F0; }

.evento__acciones{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Patrocinadores ---------- */
.patrocinadores{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
}
.patrocinador{
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--radio);
  min-height:170px; padding:26px 30px;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.patrocinador:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,20,36,.08); }
.patrocinador picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.patrocinador img{ width:auto; max-width:100%; max-height:110px; object-fit:contain; }

/* ---------- Mosaico de galería ---------- */
.mosaico{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:170px;
  grid-auto-flow:dense;   /* rellena los huecos que dejan las piezas altas */
  gap:16px;
}
.mosaico__cargando{ grid-column:1/-1; color:var(--texto-suave); padding:40px 0; }

.mosaico__foto{
  position:relative; overflow:hidden; border-radius:var(--radio);
  padding:0; border:0; background:var(--borde); cursor:zoom-in;
  grid-column:span 1; grid-row:span 1;
}
.mosaico__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.mosaico__foto::after{
  content:""; position:absolute; inset:0;
  background:rgba(14,20,36,0); transition:background var(--transicion);
}
.mosaico__foto:hover img{ transform:scale(1.06); }
.mosaico__foto:hover::after{ background:rgba(14,20,36,.18); }

/* Ritmo del bento: ciclo de 6 piezas que llena exactamente 4 columnas.
   Con grid-auto-flow:dense no quedan huecos aunque cambie el número de fotos. */
.mosaico__foto:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
.mosaico__foto:nth-child(6n+3){ grid-row:span 2; }
.mosaico__foto:nth-child(6n+5){ grid-column:span 2; }

.mosaico__oculta{ display:none; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px, 3.4vw, 46px); align-items:start;
}
.contacto__bajada{ color:var(--sobre-oscuro); max-width:50ch; margin:14px 0 26px; }

.campos{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px; margin-bottom:14px;
}
.campo{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.campo label{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8796AE;
}
.campo__opcional{ letter-spacing:0; text-transform:none; color:#66728A; }
.campo input,
.campo select,
.campo textarea{
  width:100%;
  min-height:54px; padding:14px 16px;
  background:var(--noche-2); color:var(--nube);
  border:1px solid var(--borde-oscuro); border-radius:12px;
  font-family:var(--cuerpo); font-size:1rem;
  transition:border-color var(--transicion), background var(--transicion);
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C96A8' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ border-color:var(--cian-claro); background:#1B2540; }
.campo input::placeholder, .campo textarea::placeholder{ color:#66728A; }
.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea{ border-color:#F0568F; }
.campo__error{ color:#FF8DB8; font-size:.8rem; min-height:0; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso-form{ margin-top:16px; font-size:.95rem; min-height:1.4em; }
.aviso-form.es-exito{ color:#7BD9A2; }
.aviso-form.es-error{ color:#FF8DB8; }

.contacto__lateral{ display:flex; flex-direction:column; gap:16px; }

.tarjeta-whats{
  background:var(--whats); color:var(--whats-osc);
  border-radius:var(--radio); padding:26px;
  display:flex; align-items:center; gap:18px;
}
.tarjeta-whats:hover{ background:#1FBE5A; color:var(--whats-osc); }
.tarjeta-whats svg{ width:34px; height:34px; flex:none; }
.tarjeta-whats span{ display:flex; flex-direction:column; gap:3px; }
.tarjeta-whats small{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.tarjeta-whats strong{ font-size:1.3rem; font-weight:700; }

.tarjeta-lateral{
  border:1px solid var(--borde-oscuro); border-radius:var(--radio);
  padding:26px; display:flex; flex-direction:column; gap:14px;
}
.tarjeta-lateral__titulo{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#8796AE;
}
.tarjeta-lateral__dato{ font-size:1rem; word-break:break-word; }
.tarjeta-lateral__dato a{ color:var(--amarillo-claro); font-weight:600; }
.tarjeta-lateral__dato a:hover{ color:var(--amarillo); }
.tarjeta-lateral__nota{ font-size:.88rem; color:var(--sobre-oscuro); }

.redes{ display:flex; gap:12px; }
.red{
  flex:1 1 0; min-height:56px;
  border-radius:14px; background:var(--noche-2); color:var(--nube);
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:.88rem; font-weight:600;
}
.red:hover{ background:#202A45; color:var(--cian-claro); }
.red svg{ width:20px; height:20px; flex:none; }

/* =========================================================
   PIE
   ========================================================= */
.pie{ background:var(--noche-3); color:#76829A; padding:28px 0; font-size:.85rem; }
.pie__interior{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whats-flotante{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:var(--whats); color:var(--whats-osc);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(8,51,26,.36);
  transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.whats-flotante:hover{ transform:scale(1.07); background:#1FBE5A; color:var(--whats-osc); }
.whats-flotante svg{ width:32px; height:32px; }
.whats-flotante::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--whats); animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}
.whats-flotante__globo{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--noche); color:var(--nube);
  padding:10px 16px; border-radius:999px;
  font-size:.82rem; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity var(--transicion);
  box-shadow:0 8px 20px rgba(14,20,36,.28);
}
.whats-flotante:hover .whats-flotante__globo{ opacity:1; }

/* =========================================================
   VISOR DE FOTOGRAFÍAS
   ========================================================= */
.visor{
  position:fixed; inset:0; z-index:120;
  background:rgba(9,13,24,.96);
  display:flex; align-items:center; justify-content:center;
  padding:60px 20px;
}
.visor[hidden]{ display:none !important; }
.visor__marco{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.visor__marco img{
  max-width:min(1200px, 92vw); max-height:78vh;
  width:auto; object-fit:contain; border-radius:10px;
}
.visor__marco figcaption{ color:#8C96A8; font-size:.82rem; letter-spacing:.06em; }

.visor__cerrar,
.visor__nav{
  position:absolute; z-index:2;
  width:52px; height:52px; border-radius:50%;
  background:rgba(242,246,250,.1); border:1px solid rgba(242,246,250,.22);
  color:var(--nube); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transicion);
}
.visor__cerrar:hover,.visor__nav:hover{ background:rgba(242,246,250,.24); }
.visor__cerrar svg,.visor__nav svg{ width:24px; height:24px; }
.visor__cerrar{ top:20px; right:20px; }
.visor__nav--previo{ left:20px; top:50%; transform:translateY(-50%); }
.visor__nav--siguiente{ right:20px; top:50%; transform:translateY(-50%); }

html.sin-desplazamiento,
body.sin-desplazamiento{ overflow:hidden; }

/* =========================================================
   REVELADO AL DESPLAZAR
   ========================================================= */
.revelar{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.revelar.es-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .bento__pieza--mision{ grid-column:span 12; min-height:0; }
  .bento__pieza--nombre{ grid-column:span 12; min-height:240px; }
  .bento__pieza--foto{ grid-column:span 4; min-height:300px; }
  .bento__pieza--compromiso{ grid-template-columns:1fr; }

  .evento{ grid-template-columns:minmax(0,1fr); }
  .evento__datos{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

  .navegacion__lista{ gap:20px; }
}

@media (max-width:980px){
  :root{ --gutter:18px; }

  .hamburguesa{ display:flex; position:relative; z-index:2; }
  .marca{ position:relative; z-index:2; }

  /* Menú móvil: panel a pantalla completa, sin desplazamiento propio */
  .navegacion{
    position:fixed; left:0; right:0; top:0;
    height:100vh; height:100dvh;
    z-index:1;
    background:var(--noche);
    padding:calc(var(--alto-encabezado) + 12px) var(--gutter) 28px;
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    overscroll-behavior:contain;
  }
  .navegacion.es-abierto{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .navegacion__lista{
    flex:1; display:flex; flex-direction:column; justify-content:center;
    align-items:stretch; gap:0;
  }
  .navegacion__lista a{
    display:block; padding:14px 4px;
    font-family:var(--display); font-weight:700; font-size:1.9rem; line-height:1.05;
    letter-spacing:.02em; color:var(--nube-clara);
    border-bottom:1px solid rgba(242,246,250,.1);
  }
  .navegacion__lista a:hover,
  .navegacion__lista a:focus-visible{ color:var(--cian-claro); }
  .navegacion__lista li:last-child a{ border-bottom:0; }
  .navegacion__lista .boton{
    margin-top:22px; min-height:56px; width:100%;
    font-family:var(--cuerpo); font-size:1rem; letter-spacing:.06em;
  }
  body.menu-abierto .whats-flotante{ opacity:0; pointer-events:none; }

  .bento__pieza--foto{ grid-column:span 6; }
  .tarjeta-disciplina--free{ grid-column:span 12; }

  .patrocinadores{ grid-template-columns:repeat(2, minmax(0,1fr)); }

  .contacto{ grid-template-columns:1fr; }

  .seccion__encabezado{ align-items:flex-start; }
  .seccion__apunte{ text-align:left; }

  .mosaico{ grid-template-columns:repeat(3, minmax(0,1fr)); grid-auto-rows:152px; }
  .mosaico__foto:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
  .mosaico__foto:nth-child(6n+3){ grid-column:span 1; grid-row:span 2; }
  .mosaico__foto:nth-child(6n+5){ grid-column:span 2; grid-row:span 1; }
}

@media (max-width:980px) and (max-height:520px){
  .navegacion{ overflow-y:auto; }
  .navegacion__lista{ justify-content:flex-start; }
  .navegacion__lista a{ font-size:1.4rem; padding:10px 4px; }
}

@media (max-width:640px){
  :root{ --alto-encabezado:76px; --radio-gr:22px; --radio:16px; }

  .marca__logo{ width:44px; height:44px; }
  .marca__nombre{ font-size:1.25rem; }
  .marca__sufijo{ font-size:.54rem; }

  .antetitulo{ flex-wrap:wrap; font-size:.66rem; letter-spacing:.2em; }
  .antetitulo__linea{ display:none; }

  .portada{ padding-bottom:110px; }
  .portada__acciones{ flex-direction:column; align-items:stretch; }
  .portada__acciones .boton{ width:100%; }
  .portada__control{
    left:var(--gutter); right:var(--gutter);
    bottom:52px; align-items:stretch;
  }
  .portada__barras{ width:100%; }
  .portada__barra{ flex:1 1 0; width:auto; }

  .bento{ gap:14px; }
  .bento__pieza--foto,
  .tarjeta-disciplina--free{ grid-column:span 12; min-height:260px; }
  .valores{ grid-template-columns:1fr; }

  .evento__acciones{ width:100%; flex-direction:column; }
  .evento__acciones .boton{ width:100%; }

  .patrocinador{ min-height:130px; padding:18px; }
  .patrocinador img{ max-height:80px; }

  .campos{ grid-template-columns:1fr; }

  .mosaico{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:134px; gap:12px; }
  .mosaico__foto:nth-child(n){ grid-column:span 1; grid-row:span 1; }
  .mosaico__foto:nth-child(6n+1),
  .mosaico__foto:nth-child(6n+4){ grid-row:span 2; }

  .pie__interior{ flex-direction:column; align-items:flex-start; gap:4px; }

  .whats-flotante{ width:56px; height:56px; right:16px; bottom:16px; }
  .whats-flotante svg{ width:29px; height:29px; }
  .whats-flotante__globo{ display:none; }

  .visor{ padding:80px 12px 40px; }
  .visor__nav{ width:46px; height:46px; }
  .visor__nav--previo{ left:10px; }
  .visor__nav--siguiente{ right:10px; }
}

/* =========================================================
   ACCESIBILIDAD: MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revelar{ opacity:1; transform:none; }
  .portada__foto.es-activa img{ animation:none; }
}

@media print{
  .encabezado,.whats-flotante,.visor,.portada__control{ display:none !important; }
  body{ background:#fff; color:#000; }
}