/* =============================================================================
   Opo.Site — kit de interactividad compartido para las páginas comerciales
   =============================================================================
   index.html ya tenía, solo para sí misma, un lenguaje de animación bastante
   más rico que el resto: reveal-on-scroll en 3D, tarjetas que se inclinan con
   el ratón, botones "magnéticos", una barra de progreso de scroll y contadores
   animados. Las otras siete páginas comerciales (ALESP, PTESP, METODOLOGIA,
   LA PLATAFORMA, STARNDARD, PREMIUM, JOY) solo tenían un .reveal plano sin
   ningún otro efecto — este archivo saca esas piezas de index.html a un sitio
   común para que las ocho páginas se sientan de la misma familia, sin tener
   que reinventarlas ni duplicarlas siete veces.

   index.html NO enlaza este archivo: ya tiene sus propios estilos probados y
   no se toca para no arriesgar una regresión en la página que mejor funciona.
   Esta hoja es solo para las otras siete.

   Se carga DESPUÉS de assets/movil-app.css (que ya sabe posicionar el FAB de
   WhatsApp y #back-to-top respetando la zona segura del móvil por selector,
   sin depender de esta hoja) y antes de assets/marketing-interactivo.js.
   ============================================================================= */

/* ---------------------------------------------------------------- reveal 3D */

.reveal {
  opacity: 0;
  transform: perspective(1000px) translateY(48px) rotateX(8deg);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1), filter .9s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.reveal.active { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(0deg); filter: blur(0); }
.delay-100 { transition-delay: .1s; }
.delay-150 { transition-delay: .15s; }
.delay-200 { transition-delay: .2s; }
.delay-300 { transition-delay: .3s; }
.delay-400 { transition-delay: .4s; }

/* ------------------------------------------------------------- tilt 3D + magnético */

.tilt-card { transform-style: preserve-3d; transition: transform .15s ease-out, box-shadow .3s ease; will-change: transform; }
.tilt-inner { transform: translateZ(30px); transform-style: preserve-3d; }

/* Sin esta transición el botón "magnético" saltaría de golpe al soltar el
   ratón — con ella, vuelve a su sitio con el mismo suavizado con que sigue
   el cursor mientras está encima. */
.magnetic { transition: transform .2s ease-out; }

/* --------------------------------------------------------------- progreso */

#progress-bar {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: linear-gradient(90deg,#0056D2,#FF7A00);
  z-index: 9998;
  transition: width .1s linear;
}

/* ----------------------------------------------------------- comparativa de modalidades */

/* Tabla completa: solo en pantallas medianas o más — es la versión "quiero
   comparar las tres columnas a la vez". La primera columna (el nombre de la
   fila) queda fija al hacer scroll horizontal si la tabla no cupiera entera. */
.comparison-table { display: none; }
@media (min-width: 768px) {
  .comparison-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
  .comparison-table th, .comparison-table td {
    padding: .9rem 1.1rem; text-align: center; border-bottom: 1px solid rgba(10,25,47,.1);
  }
  .comparison-table thead th {
    font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
    color: #0A192F; background: #FFFFFF; border-bottom: 2px solid #0A192F;
  }
  .comparison-table tbody th {
    text-align: left; font-weight: 700; color: #0A192F; background: #F8FAFC;
    position: sticky; left: 0;
  }
  /* La columna de la modalidad recomendada/actual se resalta con un fondo y
     un borde lateral, para que el ojo la siga sin esfuerzo fila tras fila. */
  .comparison-table [data-highlight] { background: rgba(255,122,0,.07); }
  .comparison-table thead [data-highlight] { background: #FFEDD5; border-radius: .75rem .75rem 0 0; }
  .comparison-table td[data-highlight], .comparison-table th[data-highlight] { border-left: 2px solid #FF7A00; border-right: 2px solid #FF7A00; }
  .comparison-table tbody tr:last-child td[data-highlight] { border-bottom: 2px solid #FF7A00; border-radius: 0 0 .75rem .75rem; }
}

/* Acordeón: la misma información, una modalidad a la vez, para no obligar a
   nadie a hacer scroll horizontal en el móvil (el asesino silencioso de la
   conversión en tablas comparativas). */
.comparison-accordion { display: block; }
@media (min-width: 768px) {
  .comparison-accordion { display: none; }
}
.comparison-accordion .mkt-acc-item { border: 2px solid #0A192F; border-radius: 1.25rem; overflow: hidden; margin-bottom: .75rem; background: #fff; }
.comparison-accordion .mkt-acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; text-align: left; font-weight: 800; font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #0A192F;
}
.comparison-accordion .mkt-acc-trigger .chevron { transition: transform .3s ease; flex-shrink: 0; }
.comparison-accordion .mkt-acc-item.open .mkt-acc-trigger .chevron { transform: rotate(180deg); }
.comparison-accordion .mkt-acc-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0.16,1,0.3,1); }
.comparison-accordion .mkt-acc-item.open .mkt-acc-body { max-height: 600px; }
.comparison-accordion .mkt-acc-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 1.25rem; border-top: 1px solid rgba(10,25,47,.08); font-size: .9rem; }
.comparison-accordion .mkt-acc-row dt { color: rgba(10,25,47,.55); font-weight: 700; }
.comparison-accordion .mkt-acc-row dd { color: #0A192F; font-weight: 600; text-align: right; }

/* ------------------------------------------------------------- quiz de modalidad */

.quiz-modalidad { position: relative; }
.quiz-step { display: none; }
/* Cada paso entra con un deslizamiento suave en vez de aparecer de golpe —
   el mismo lenguaje del reveal del resto de la página. */
.quiz-step.activo { display: block; animation: quiz-paso-entra .45s cubic-bezier(0.16,1,0.3,1); }
@keyframes quiz-paso-entra { from { opacity: 0; transform: translateY(16px); } }
.quiz-resultado.activo { animation: quiz-paso-entra .55s cubic-bezier(0.16,1,0.3,1); }
.quiz-progreso-track { width: 100%; height: 6px; background: rgba(10,25,47,.1); border-radius: 999px; overflow: hidden; }
.quiz-progreso-fill { height: 100%; background: linear-gradient(90deg,#0056D2,#FF7A00); border-radius: 999px; transition: width .4s cubic-bezier(0.16,1,0.3,1); }
.quiz-opcion {
  width: 100%; text-align: left; padding: 1rem 1.25rem; border: 2px solid #0A192F; border-radius: 1rem;
  background: #fff; font-weight: 700; color: #0A192F; transition: transform .15s ease-out, background .2s ease, box-shadow .2s ease;
}
.quiz-opcion:hover { background: #F8FAFC; box-shadow: 3px 3px 0 0 #0A192F; transform: translate(-1px,-1px); }
.quiz-opcion:active { transform: translate(0,0); box-shadow: none; }
.quiz-resultado { display: none; }
.quiz-resultado.activo { display: block; }

/* ----------------------------------------------------------- tarjetas de funciones nuevas */

/* Familia visual común para las secciones de venta de las funciones que hoy
   no se anuncian en ningún sitio (OpoGym, Opo en vivo, Comunidad, Mapa de
   Conceptos, Calendario, Simulacros en directo) — para que aparezcan como un
   conjunto reconocible y no como seis añadidos sueltos. */
.feature-card-new {
  border: 2px solid #0A192F; border-radius: 1.75rem; background: #fff;
  box-shadow: 4px 4px 0 0 #0A192F; transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card-new:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 0 #0A192F; }
.feature-card-new .feature-card-new-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid currentColor;
}

/* --------------------------------------------------------------- plazas grande */

/* Versión grande del pill de plazas ya conectado a disponibilidad.php — para
   sacarlo de la caja de precio del final y ponerlo cerca del hero, donde
   pesa mucho más como argumento de escasez real. */
.plazas-badge-lg {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.plazas-badge-lg .plaza-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px; border: 2px solid #0A192F;
  font-weight: 800; font-size: .85rem;
}
.plazas-badge-lg .plaza-pill.disponible { background: #ECFDF5; color: #047857; }
.plazas-badge-lg .plaza-pill.completo { background: #FEF2F2; color: #B91C1C; }

/* --------------------------------------------------------------- contador con remate */

/* Pequeño "pop" al llegar el contador a su cifra final (lo añade el JS): el
   número celebra su llegada en vez de simplemente pararse. */
.counter.counter-fin { animation: counter-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes counter-pop { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }
.counter { display: inline-block; }

/* --------------------------------------------------------------- accesibilidad */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; }
  .tilt-card, .tilt-inner, .magnetic { transition: none !important; transform: none !important; }
  .quiz-progreso-fill, .mkt-acc-body { transition: none !important; }
  .quiz-step.activo, .quiz-resultado.activo, .counter.counter-fin { animation: none !important; }
}