/* =========================================================
   RIFP.css — Estilos para RIFP.html (flip cards OK + scroll en reverso)
   ========================================================= */

/* ----- Header local ----- */
header{height:auto!important;background:none!important}

/* ----- HERO ----- */
.noticias-hero-img{position:relative;background:#111}
.noticias-hero-img img{
  width:100%;max-height:650px;display:block;
  object-fit:cover;object-position:center 65%;
}
.noticias-hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35));
  pointer-events:none;
}
.noticias-hero-titulo{
  position:absolute;bottom:50px;left:50%;transform:translateX(-50%);
  width:90%;color:#fff;font-size:3.2rem;font-weight:800;text-align:center;
  letter-spacing:1px;line-height:1.3;text-shadow:0 4px 15px rgba(0,0,0,.6);
}
.noticias-hero-titulo .subtitulo-evento{
  display:block;font-size:2.2rem;font-weight:600;color:#FFC30E;margin-top:.5rem;
  letter-spacing:1.5px;text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* ----- Intro ----- */
.evento-intro{padding:4rem 2rem;text-align:center;max-width:900px;margin:0 auto}
.evento-intro h2{font-size:2.5rem;color:var(--color1);margin-bottom:1.5rem}
.evento-intro p{font-size:1.1rem;line-height:1.7;color:var(--color2)}

/* ----- Galería ----- */
.evento-galeria{padding:4rem 2rem;text-align:center}
.evento-galeria h2{font-size:2.5rem;color:var(--color1);margin-bottom:3rem}

.rifp-gallery-slider{
  position:relative;max-width:1400px;aspect-ratio:2/1;margin:0 auto;
  overflow:hidden;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.rifp-gallery-slider ul{
  display:flex;height:100%;padding:0;margin:0;list-style:none;
  transition:transform .5s ease-in-out;
}
.rifp-gallery-slider li{min-width:100%;height:100%;flex-shrink:0}
.rifp-gallery-slider img{width:100%;height:100%;display:block;object-fit:cover}

.rifp-gallery-slider .slider-button{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.7);border:none;font-size:2rem;cursor:pointer;
  z-index:10;border-radius:50%;width:50px;height:50px;display:grid;place-items:center;
  transition:background .3s ease;
}
.rifp-gallery-slider .slider-button:hover{background:#fff}
.rifp-gallery-slider .slider-button.prev{left:15px}
.rifp-gallery-slider .slider-button.next{right:15px}

/* =========================================================
   Ponentes (flip cards)
   ========================================================= */
.ponentes-seccion{padding:2rem}
.ponentes-seccion h2{font-size:2.5rem;color:var(--color1);text-align:center;margin-bottom:3rem}

.ponentes-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;justify-items:center;
  padding:2rem 0;width:100%;box-sizing:border-box;
}

.ponente-card{
  perspective:1000px;width:100%;max-width:370px;height:520px;border-radius:32px;
  background:none;box-shadow:0 10px 40px rgba(0,0,0,.28);
  transition:box-shadow .3s;margin-bottom:2rem;display:flex;outline:none;
  cursor:pointer;pointer-events:auto;position:relative;
}
.ponente-card:hover{box-shadow:0 18px 56px rgba(0,0,0,.38)}
.ponente-card:focus-visible{outline:3px solid #7aa2ff;outline-offset:4px} /* accesibilidad */

/* Flip */
.ponente-flip{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.25,.8,.25,1);
}
.ponente-card.flipped .ponente-flip{transform:rotateY(180deg)}

/* Caras */
.ponente-front,
.ponente-back{
  position:absolute;inset:0;border-radius:32px;
  display:flex;flex-direction:column;box-sizing:border-box;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* IMPORTANTE: NO bloquear eventos aquí; manejamos el flip por JS */
}

/* =========================================================
   FRENTE (miniatura + nombre + charla)
   ========================================================= */
.ponente-front{
  transform:rotateY(0deg) translateZ(1px); /* evita parpadeos */
  z-index:2;
  background:#2b2940;color:#fff;font-family:'Montserrat',Arial,sans-serif;
  align-items:center;justify-content:flex-start;
  padding:2rem 1.5rem 1.75rem;text-align:center;
  gap:1rem;
}

/* Contenedor de la miniatura */
.ponente-thumb{
  width:min(68%,230px);
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  margin-top:.75rem;
}

/* La imagen de la miniatura (usa la clase .ponente-foto que ya existía) */
.ponente-thumb .ponente-foto{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* Texto del frente */
.ponente-front-text{display:flex;flex-direction:column;align-items:center;gap:.4rem}

.ponente-nombre{
  font-size:1.55rem;font-weight:800;line-height:1.15;letter-spacing:.2px;
}

.ponente-afiliacion{
  font-size:.9rem;margin:0;font-weight:600;line-height:1.2;
  text-transform:uppercase;letter-spacing:1px;opacity:.9;
}

.ponente-charla{
  font-size:1rem;font-style:italic;margin:0;
  font-weight:500;line-height:1.35;max-width:95%;
}

/* =========================================================
   REVERSO (texto descriptivo con scroll)
   ========================================================= */
.ponente-back{
  transform:rotateY(180deg) translateZ(1px);
  background:linear-gradient(180deg,#141226,#1c1a33);
  color:#eae8ff;
  padding:2rem 1.5rem 1.75rem;
  align-items:flex-start;justify-content:flex-start;

  /* CLAVE para poder hacer scroll e interactuar */
  pointer-events:auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch; /* suaviza scroll en iOS */
}

/* Contenido de la descripción */
.ponente-descripcion{
  width:100%;
  font-size:1rem;line-height:1.65;letter-spacing:.2px;
}

.ponente-descripcion p{margin:0 0 .9rem}
.ponente-descripcion p:last-child{margin-bottom:0}

/* Si por cualquier motivo llegan imágenes con clase .placeholder */
.ponente-foto.placeholder{background:#3b3854}

/* Línea decorativa bajo títulos que se ajusta al ancho del texto */
.evento-intro h2.after,.ponentes-seccion h2.after{display:inline-block}
.evento-intro h2.after::after,.ponentes-seccion h2.after::after{width:100%}

/* ----- Menú móvil helper (si lo usas) ----- */
@media (max-width:768px){
  .enlaces{display:none}
  .enlaces.is-open{display:block}
}

/* ----- Responsive ----- */
@media (max-width:1100px){
  .ponentes-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .noticias-hero-titulo{font-size:2rem;bottom:20px;width:95%}
  .noticias-hero-titulo .subtitulo-evento{font-size:1.6rem;margin-top:.3rem}

  .evento-intro,.evento-galeria,.ponentes-seccion{padding:3rem 1rem}
  .evento-intro h2,.evento-galeria h2,.ponentes-seccion h2{font-size:2.1rem;margin-bottom:2rem}
  .evento-intro p{font-size:1rem}

  .rifp-gallery-slider{aspect-ratio:4/3}
  .rifp-gallery-slider .slider-button{width:40px;height:40px;font-size:1.5rem}
  .rifp-gallery-slider .slider-button.prev{left:10px}
  .rifp-gallery-slider .slider-button.next{right:10px}

  .ponentes-grid{grid-template-columns:1fr;gap:1.5rem}
  .ponente-card{height:520px;max-width:350px;margin:0 auto 1.5rem}

  /* Ajustes móviles del frente */
  .ponente-thumb{width:min(78%,250px)}
  .ponente-nombre{font-size:1.4rem}
  .ponente-charla{font-size:.98rem}
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  .rifp-gallery-slider ul{transition:none}
  .ponente-flip{transition:none}
}