/* ==============================
   IMPROMPTU · QUIÉNES SOMOS 
   ============================== */

:root {
  --page-bg: #ac1f23; /* Fondo del LogoColorines */
  --text-main: #ffffff;
  --text-strong: #ffcccc;
  --text-accent: #ffff99;
}

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

html, body { height: 100%; }
html { background: var(--page-bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-main);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

/* Images fluid */
img { max-width: 100%; height: auto; display: block; }

/* Links */
a { color: #ffffcc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header & Footer */
header {
  background: var(--page-bg);
  text-align: center;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra icono y logo */
  gap: .5rem; /* Espacio entre icono, logo y título */
}
header a img.alborde {
  max-width: 48px; /* Tamaño del icono APortada en header */
  width: min(12vw, 48px);
}
/* Logo 50% más grande que antes (de 320px a 480px) */
header .logo {
  max-width: 480px;
  width: min(60vw, 480px);
  margin: 0 auto;
}
/* Título más pequeño */
.header-title {
  margin-top: .2rem;
  font-size: clamp(1.35rem, 2vw + 0.6rem, 2rem);
  color: var(--text-main);
  font-weight: 700;
}

footer {
  background: var(--page-bg);
  padding: 1rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra logo e icono */
  gap: .5rem; /* Espacio entre logo, icono y texto */
}
/* Logo del footer al mismo tamaño que el del header */
footer .logo {
  max-width: 480px;
  width: min(60vw, 480px);
}
/* Icono APortada en footer del mismo tamaño que en header */
footer a img.alborde {
  max-width: 48px;
  width: min(12vw, 48px);
}
.footer-text {
  margin: 0;
  font-size: clamp(.9rem, .8rem + .5vw, 1.05rem);
  text-align: center;
  color: var(--text-main);
}

/* Typography */
p.f { margin: .25rem 0; color: var(--text-strong); font-weight: 700; font-size: clamp(1.1rem, 1vw + 1rem, 1.5rem); }
p.n { margin: .15rem 0; color: var(--text-main); font-size: clamp(.95rem, .4vw + .95rem, 1.05rem); font-weight: 500; }
p.d, p.db, p.u { margin: .15rem 0; color: var(--text-accent); font-size: clamp(.9rem, .3vw + .9rem, 1rem); }
p.db, p.u { font-weight: 700; }

/* Separadores */
hr.solid { border: 0; border-top: 3px solid #bbb; margin: 1rem 0; }

/* ======= NUEVA MAQUETA ======= */

/* Fila 3 columnas (España – Goteo – Francia) */
.section-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr minmax(12px, 36px) 1fr; /* Columna central muy fina */
  gap: 1rem;
  align-items: start;
}
.section-intro .goteo-col img {
  width: auto;
  max-height: 100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .section-intro .goteo-col img {
    max-height: 80px;
  }
}

/* Fila 1 columna (Contactos centrado) */
.section-contactos {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 1.25rem;
  text-align: center;
}

/* Bloques de persona: EXIT | FOTO | TEXTO */
.person-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 1rem;
  display: grid;
  grid-template-columns: 56px 220px 1fr;
  gap: .75rem;
  align-items: start;
}
.person-block .exit { width: 56px; }
.person-block .foto { width: min(220px, 35vw); margin-inline: auto; }
.person-block .texto { min-width: 0; }

/* FlechaArriba más pequeña que el icono de header/footer */
.person-block .exit img.alborde {
  max-width: 36px;
  width: min(10vw, 36px);
}

@media (max-width: 1024px) {
  .person-block { grid-template-columns: 48px 180px 1fr; }
  .person-block .exit { width: 48px; }
}
@media (max-width: 768px) {
  .section-intro { grid-template-columns: 1fr; }
  .person-block {
    grid-template-columns: 1fr;
  }
  .person-block .exit { order: 1; justify-self: start; }
  .person-block .foto { order: 2; justify-self: center; }
  .person-block .texto { order: 3; }
}

/* Utilidades heredadas */
.alborde { margin: 0; }


/* ===== Rodillo para los bloques de personas ===== */
.person-block { position: relative; }
.person-block .texto {
  position: relative;
  overflow: hidden; /* crea el "viewport" del rodillo */
  padding-right: .25rem;
}
.person-block .texto .roller {
  position: absolute;
  inset: 0 0 auto 0; /* top/left/right 0; bottom auto */
  display: flex;
  flex-direction: column;
  /* La duración se ajusta por JS con --roll-duration */
  animation: rollY var(--roll-duration, 30s) linear infinite;
}
.person-block .texto .roller-track {
  /* Asegura separación mínima entre párrafos */
}
@keyframes rollY {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); } /* 2 pistas idénticas -> bucle perfecto */
}

/* Accesibilidad: permitir pausar con hover */
.person-block .texto:hover .roller {
  /* animation-play-state: paused;  (controlado también por JS) */
}

/* Responsivo: en móvil (columnas apiladas), mantenemos el mismo comportamiento */
@media (max-width: 768px) {
  .person-block { height: auto; } /* JS devolverá el alto acorde a la foto */
}

/* Añadir espacio entre las dos pistas para que no "choquen" visualmente */
.person-block .texto .roller-track + .roller-track {
  margin-top: 3em; /* aproximadamente 3 líneas de texto */
}


/* Espaciado entre fin e inicio del rodillo (3 líneas) */
.person-block .texto .roller-spacer { width: 100%; }

/* Ajuste solicitado: reducir las flechas de volver arriba en 1/3 */
a[href="#top"] img {
  width: 24px !important;    /* de 36px a 24px */
  height: 24px !important;
  margin: 0.5rem auto !important; /* menos espacio vertical */
  display: block;
}

/* Mejora: fade-in / fade-out aplicado al TEXTO del rodillo, sin velos blancos */
/* Tamaño del desvanecido configurable */
.texto {
  --fade-size: 40px;
}

/* Aplica la máscara al contenido que rueda (si existe .roller, preferimos en él) */
.texto .roller {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Si por estructura no hubiese .roller, aplicamos la máscara al propio viewport .texto */
.texto:not(:has(.roller)) {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Opción: reducir el tamaño del fade en pantallas pequeñas si se desea */
@media (max-width: 480px) {
  .texto { --fade-size: 28px; }
}

/* Corrección: fade-in/out aplicado al CONTENEDOR (.texto) para que afecte al texto visible */
.texto {
  --fade-size: 40px;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%) !important;
  mask-image: linear-gradient(to bottom,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%) !important;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Aseguramos que el fondo original de .texto no se pinta por encima */
  background-clip: padding-box;
}

/* fallback si algún navegador no soporta mask: no cambia nada visualmente */
@supports not ((-webkit-mask-image: linear-gradient(black, transparent)) or (mask-image: linear-gradient(black, transparent))) {
  .texto { -webkit-mask-image: none; mask-image: none; }
}

/* Ajuste opcional para pantallas pequeñas */
@media (max-width: 480px) {
  .texto { --fade-size: 28px; }
}