/* =========================================================
   Sección 3 — Información importante
   (usa variables y clases de styles.css y seccion-2.css:
    .encabezado, .titulo-seccion, .texto-seccion, .payaso, .p-*, .corazon)
   ========================================================= */

.pantalla--info {
  background: linear-gradient(180deg, #e6f3fd 0%, #f4faff 45%, #eaf5fe 100%);
}

/* Animaciones solo cuando la sección está en pantalla */
.pantalla--info:not(.en-vista) *,
.pantalla--info:not(.en-vista) *::before,
.pantalla--info:not(.en-vista) *::after {
  animation-play-state: paused;
}

.nube--i1 { top: 1%;  left: -10%; width: 28%; opacity: .85; }
.nube--i2 { top: 5%;  right: -9%; width: 24%; opacity: .7; animation-duration: 16s; animation-delay: -6s; }

/* ---------- Tarjeta ---------- */
.ficha {
  width: 100%;
  margin-top: 16px;
  padding: 24px 18px 18px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(29, 79, 159, .16), 0 0 0 1px #e3effb;
}
.ficha .titulo-seccion { margin-top: 0; color: var(--azul); }
.ficha .texto-seccion { margin-left: auto; margin-right: auto; }

/* ---------- Filas de datos ---------- */
.filas {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.filas li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1.5px solid #e6f0fa;
}
.filas li:last-child { border-bottom: 1.5px solid #e6f0fa; }

.icono-rojo {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #f25b57, #d4252b 72%);
  color: #fff;
  box-shadow: 0 6px 12px rgba(200, 30, 40, .28);
}
.icono-rojo svg { width: 27px; height: 27px; }

.filas h3 {
  margin: 0;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: var(--azul-oscuro);
}
.filas p {
  margin: 3px 0 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--azul);
}
.filas p:empty { display: none; }

/* ---------- Mapa ---------- */
.mapa {
  position: relative;
  height: clamp(150px, 25svh, 195px);
  margin-top: 18px;
  overflow: hidden;
  border-radius: 18px;
  background: #e4eee0;
  box-shadow: 0 0 0 1.5px #d4e6f7;
}
.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none; /* evita que el mapa "atrape" el scroll del dedo */
}
.mapa__enlace {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mapa__boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(29, 79, 159, .3);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 15px;
  color: var(--azul-oscuro);
  transition: transform .12s ease;
}
.mapa__boton svg { width: 22px; height: 22px; color: var(--azul-boton); }
.mapa__enlace:active .mapa__boton { transform: scale(.95); }
.mapa__enlace:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -3px; border-radius: 18px; }

/* ---------- Pelotero ---------- */
.pelotero {
  position: relative;
  isolation: isolate;
  height: 190px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 126, 182, .35) 0 22%, transparent 23%),
    radial-gradient(circle at 86% 70%, rgba(255, 200, 44, .45) 0 20%, transparent 21%),
    linear-gradient(180deg, #bfe5ff 0%, #e9f5ff 55%, #fff0bf 100%);
}

.pelotero__sol {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 34px;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 68%);
}

/* Banderines */
.pelotero__banderines {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
}
.pelotero__banderines::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 2px;
  background: rgba(29, 79, 159, .3);
}
.banderin {
  position: absolute;
  top: 3px;
  left: var(--x);
  width: 25px;
  height: 29px;
  background: var(--b);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: balancea 2.8s ease-in-out var(--d) infinite alternate;
}

/* Payaso asomándose */
.pelotero .payaso {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -26px;
  width: auto;
  height: 190px;
  margin-left: -68px;
  animation: asoma 4s ease-in-out infinite;
}

/* Corazones del pelotero */
.corazon--p1 { z-index: 1; left: 20%;  top: 34%; width: 20px; }
.corazon--p2 { z-index: 1; right: 19%; top: 24%; width: 17px; animation-delay: -1.3s; }
.corazon--p3 { z-index: 1; right: 10%; top: 56%; width: 14px; animation-delay: -2.4s; }

/* Pelotitas (las crea js/seccion-3.js) */
.pelotero__bolas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bola {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  z-index: var(--z);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255, 255, 255, .9) 0 11%, rgba(255, 255, 255, 0) 12%),
    var(--b);
  box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .13), 0 2px 3px rgba(0, 0, 0, .12);
}
.bola--salta { animation: pelota 2.2s ease-in-out var(--d) infinite; }

/* ---------- Botón Confirmar asistencia ---------- */
.confirmar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, #ee4d49, #d4262b);
  color: #fff;
  font-family: var(--fuente-texto);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 0 #a81c20, 0 14px 22px rgba(168, 28, 32, .32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.confirmar:active { transform: translateY(4px); box-shadow: 0 2px 0 #a81c20, 0 6px 12px rgba(168, 28, 32, .3); }
.confirmar:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.confirmar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  animation: brillo 3.8s ease-in-out infinite;
  pointer-events: none;
}
.confirmar__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--rojo);
  animation: latido 1.8s ease-in-out infinite;
}
.confirmar__check svg { width: 22px; height: 22px; }
.confirmar strong { display: block; font-weight: 800; font-size: 18px; line-height: 1.2; }
.confirmar small  { display: block; margin-top: 2px; font-weight: 700; font-size: 13px; opacity: .95; }

/* ---------- Animaciones ---------- */
@keyframes asoma    { 0%, 100% { transform: translateY(34px); } 22%, 78% { transform: translateY(-2px); } }
@keyframes pelota   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes balancea { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes brillo   { 0%, 55% { left: -40%; } 100% { left: 135%; } }
@keyframes latido   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }