/* ==========================================================================
   Productos: listado (/productos) y fichas (/productos/<producto>).
   Prefijos: pr- (listado) · fi- (ficha). Depende de rediseno.css y de los
   tokens de styles.css.
   ========================================================================== */



/* ==========================================================================
   LISTADO
   Poster nítido por defecto, clip revelado al hover.
   Una sola cosa en movimiento a la vez, disparada por el usuario.
   ========================================================================== */
.pr-hero { max-width: 900px; }

.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pr-cell { min-width: 0; }
.pr-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid rgba(0, 33, 69, 0.08); border-radius: var(--intap-r-card);
  background: var(--intap-white); color: var(--intap-ink); overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 33, 69, 0.08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pr-card:hover, .pr-card:focus-visible {
  border-color: rgba(31, 113, 184, 0.35); box-shadow: 0 18px 48px rgba(0, 33, 69, 0.18);
  transform: translateY(-4px); color: var(--intap-ink);
}
.pr-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--intap-navy-deep); overflow: hidden; }
.pr-card__media img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-card__loop { opacity: 0; transition: opacity .28s ease; }
.pr-card:hover .pr-card__loop.is-ready,
.pr-card:focus-visible .pr-card__loop.is-ready,
.pr-card.is-live .pr-card__loop.is-ready { opacity: 1; }
.pr-card__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 23, 48, 0) 0%, rgba(0, 23, 48, 0.55) 45%, rgba(0, 23, 48, 0.92) 100%);
}
.rd .pr-card__name {
  position: absolute; left: 28px; bottom: 20px; margin: 0;
  font-family: var(--intap-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.022em;
  line-height: 1.1 !important; color: var(--intap-white);
}
.pr-card__play {
  position: absolute; right: 18px; top: 18px; width: 42px; height: 42px; border-radius: var(--intap-r-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 23, 48, 0.55); border: 1px solid rgba(57, 226, 240, 0.45); color: var(--intap-cyan);
  transition: opacity .2s ease;
}
.pr-card:hover .pr-card__play, .pr-card:focus-visible .pr-card__play, .pr-card.is-live .pr-card__play { opacity: 0; }
.pr-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 32px; }
.pr-card__meta {
  font-family: var(--intap-font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--intap-ink-gray);
}
.pr-card__desc { font-size: 15.5px; line-height: 1.72; opacity: 0.82; margin-top: 14px; }
.pr-card__more {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px;
  font-family: var(--intap-font-display); font-size: 13.5px; font-weight: 600; color: var(--intap-blue);
}
.pr-card__more svg { transition: transform .2s ease; }
.pr-card:hover .pr-card__more svg, .pr-card:focus-visible .pr-card__more svg { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .pr-grid { grid-template-columns: 1fr; }
  .rd .pr-card__name { left: 20px; bottom: 16px; font-size: 21px; }
  .pr-card__body { padding: 22px 20px 24px; }
  .pr-card__desc { font-size: 15px; line-height: 1.7; }
  .pr-card__more { padding-top: 22px; }
}

/* ==========================================================================
   FICHA
   ========================================================================== */
.fi-hero { padding: 52px var(--rd-px) 74px; }
.fi-hero__row {
  position: relative; display: grid; align-items: center; gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
}
.fi-hero__text { min-width: 0; }
.rd .fi-h1 { font-size: 58px; line-height: 1.03 !important; margin-top: 20px; }
.fi-hero .rd-lead { max-width: 620px; margin-top: 24px; }
.fi-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }

.fi-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--intap-r-card); overflow: hidden;
  border: 1px solid rgba(57, 226, 240, 0.28); background: var(--intap-navy-deep);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.fi-media img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.fi-media__loop { opacity: 0; transition: opacity .28s ease; }
.fi-media:hover .fi-media__loop.is-ready, .fi-media.is-live .fi-media__loop.is-ready { opacity: 1; }
.fi-media__play {
  position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; border-radius: var(--intap-r-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 23, 48, 0.55); border: 1px solid rgba(57, 226, 240, 0.45); color: var(--intap-cyan);
  transition: opacity .2s ease;
}
.fi-media:hover .fi-media__play, .fi-media.is-live .fi-media__play { opacity: 0; }

/* El reto: la pregunta con la que abre cada video */
.fi-reto { padding: 86px var(--rd-px); background: var(--intap-tint); border-top: 1px solid rgba(0, 33, 69, 0.07); color: var(--intap-ink); }
.fi-reto blockquote { margin: 0; }
.fi-reto__mark {
  display: block; height: 32px; margin-top: 26px;
  font-family: var(--intap-font-display); font-size: 64px; font-weight: 700; line-height: 0.5;
  color: rgba(31, 113, 184, 0.24);
}
.rd .fi-reto__q {
  max-width: 1000px; margin-top: 18px;
  font-family: var(--intap-font-display); font-size: 38px; font-weight: 700; line-height: 1.22; letter-spacing: -0.022em;
  color: var(--intap-ink);
}

/* Qué hace */
.fi-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.fi-cap {
  border: 1px solid rgba(0, 33, 69, 0.08); border-radius: var(--intap-r-card); padding: 30px 28px;
  background: var(--intap-white); box-shadow: 0 10px 40px rgba(0, 33, 69, 0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fi-cap:hover { border-color: rgba(31, 113, 184, 0.35); box-shadow: 0 16px 44px rgba(0, 33, 69, 0.16); }
.fi-cap__icon { display: block; color: var(--intap-blue); line-height: 0; }
.rd .fi-cap__t {
  margin-top: 18px; font-family: var(--intap-font-display); font-size: 19px; font-weight: 600;
  line-height: 1.24 !important; color: var(--intap-ink);
}
/* el visto del icono se dibuja al entrar la tarjeta */
.rd-js .fi-cap__tick { stroke-dasharray: 14; stroke-dashoffset: 14; }
.rd-js .fi-cap.is-in .fi-cap__tick { animation: fi-draw .7s .35s var(--rd-ease) forwards; }
@keyframes fi-draw { to { stroke-dashoffset: 0; } }

/* Cómo funciona */
.fi-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 52px; }
.fi-step {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 26px;
  padding: 28px 0; border-bottom: 1px solid rgba(0, 33, 69, 0.10);
}
.fi-step:last-child { border-bottom: 0; }
.fi-step__n {
  padding-top: 5px; font-family: var(--intap-font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--intap-blue); transition: transform .25s var(--rd-ease);
}
.fi-step:hover .fi-step__n { transform: translateX(4px); }
.rd .fi-step__t {
  font-family: var(--intap-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25 !important; color: var(--intap-ink);
}
.fi-step__d { font-size: 15.5px; line-height: 1.72; opacity: 0.8; margin-top: 10px; max-width: 760px; }

/* Cierre */
.fi-cierre { position: relative; padding: 96px var(--rd-px); overflow: hidden; text-align: center; background: var(--intap-navy-deep); }
.fi-cierre .rd-cta-band__glow { height: 460px; margin-top: -230px; }
.fi-cierre__in { position: relative; }
.rd .fi-cierre__l {
  margin-top: 20px; font-family: var(--intap-font-display); font-size: 52px; font-weight: 700;
  letter-spacing: -0.028em; line-height: 1.1; color: var(--intap-white);
}
.fi-cierre__r { max-width: 720px; margin: 22px auto 0; font-size: 18px; line-height: 1.7; color: var(--intap-ink-soft); }
.fi-cierre__in p, .fi-cierre__in h2 { text-align: center; }
.fi-cierre .rd-cta-band__actions { margin-top: 40px; }

/* Asistente de voz (solo en la ficha de María): el formulario aparece al pulsar el botón */
.fi-widget {
  display: block; max-width: 560px; margin: 32px auto 0; text-align: left;
  --av-fondo: #ffffff; --av-fondo-2: #f5f7fb; --av-texto: var(--intap-ink);
  --av-texto-tenue: var(--intap-ink-gray); --av-linea: #e2e8f0; --av-acento: var(--intap-blue);
}

/* ---------- tablet y celular ---------- */
@media (max-width: 1099.98px) {
  .fi-hero__row { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .fi-media { max-width: 640px; }
}
@media (max-width: 991.98px) {
  .fi-hero { padding-top: 40px; padding-bottom: 56px; }
  .rd .fi-h1 { font-size: 46px; }
  .fi-reto { padding-top: 64px; padding-bottom: 64px; }
  .rd .fi-reto__q { font-size: 30px; }
  .fi-caps { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
  .fi-steps { margin-top: 36px; }
  .fi-cierre { padding-top: 72px; padding-bottom: 72px; }
  .rd .fi-cierre__l { font-size: 40px; }
}
@media (max-width: 575.98px) {
  .fi-hero { padding-top: 28px; padding-bottom: 44px; }
  .rd .fi-h1 { font-size: 38px; }
  .fi-actions { margin-top: 30px; }
  .fi-actions .rd-btn { width: 100%; }
  .fi-hero__row { gap: 34px; }
  .fi-reto { padding-top: 52px; padding-bottom: 52px; }
  .fi-reto__mark { font-size: 52px; margin-top: 18px; }
  .rd .fi-reto__q { font-size: 23px; line-height: 1.3; }
  .fi-cap { padding: 24px 22px; }
  .fi-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .rd .fi-step__t { font-size: 19px; }
  .fi-step__d { font-size: 15px; }
  .fi-cierre { padding-top: 60px; padding-bottom: 60px; }
  .rd .fi-cierre__l { font-size: 30px; }
  .fi-cierre__r { font-size: 16px; }
  .fi-cierre .rd-cta-band__actions .rd-btn { width: 100%; }
}

/* ---------- movimiento apagado si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .pr-card__loop, .fi-media__loop { display: none; }
  .pr-card, .pr-card__more svg, .fi-cap, .fi-step__n, .pr-card__play, .fi-media__play { transition: none; }
  .pr-card:hover, .pr-card:focus-visible, .pr-card:hover .pr-card__more svg, .fi-step:hover .fi-step__n { transform: none; }
  .rd-js .fi-cap__tick { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .rd-js .fi-cap.is-in .fi-cap__tick { animation: none; }
}