/* ==============================
   TESTIMONIOS / HISTORIAS (Video local)
   Archivo: CSS/testimonios.css
================================ */

.cuet-stories{
  padding: clamp(44px, 6vw, 86px) 16px;
  background: linear-gradient(180deg, var(--cuet-bg) 0%, var(--cuet-bg2) 100%);
  border-top: 1px solid rgba(195,167,169,.35);
}

.cuet-stories__container{ max-width: 1200px; margin: 0 auto; }
.cuet-stories__head{ max-width: 820px; margin-bottom: 18px; }

.cuet-stories__kicker{
  margin: 0 0 8px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(42,27,30,.72);
}

.cuet-stories__title{
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: var(--cuet-ink);
}

.cuet-stories__script{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  color: var(--cuet-wine);
  font-size: 1.05em;
  display: inline-block;
  transform: translateY(5px);
}

.cuet-stories__sub{
  margin: 0;
  color: rgba(42,27,30,.76);
  line-height: 1.6;
  max-width: 70ch;
}

.cuet-stories__grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cuet-story{
  border-radius: var(--radius);
  background: rgba(243,242,238,.82);
  border: 1px solid rgba(195,167,169,.45);
  box-shadow: 0 14px 34px rgba(42,27,30,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cuet-story:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(42,27,30,.12);
  border-color: rgba(85,29,38,.35);
}

.cuet-story__media{
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.cuet-story__media img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.02);
}
.cuet-story__play{
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.cuet-story__play i{
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  color: #fff;
  background: rgba(85,29,38,.60);
  box-shadow: 0 18px 40px rgba(42,27,30,.22);
}
.cuet-story__chip{
  position: absolute;
  top: 12px; left: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cuet-wine);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(195,167,169,.35);
  padding: 6px 10px;
  border-radius: 999px;
}

.cuet-story__body{ padding: 14px; }
.cuet-story__name{
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--cuet-ink);
  font-size: 18px;
}
.cuet-story__meta{
  margin: 0 0 10px;
  font-size: 12.5px;
  color: rgba(42,27,30,.65);
}
.cuet-story__quote{
  margin: 0;
  color: rgba(42,27,30,.78);
  line-height: 1.6;
  font-size: 14px;
}

.cuet-stories__cta{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Modal */
.cuet-video-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.cuet-video-modal.is-open{ display: block; }

.cuet-video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(18,10,12,.55);
  backdrop-filter: blur(2px);
}
.cuet-video-modal__dialog{
  position: relative;
  max-width: 980px;
  margin: 6vh auto;
  background: rgba(243,242,238,.92);
  border: 1px solid rgba(195,167,169,.55);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 26px 80px rgba(0,0,0,.35);
  overflow: hidden;
}
.cuet-video-modal__close{
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(195,167,169,.45);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  z-index: 2;
}
.cuet-video-modal__close i{ font-size: 24px; color: var(--cuet-wine); }

.cuet-video-modal__content{
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr; /* video tipo "phone" + texto */
  gap: 0;
}
/* contenedor del video */
.cuet-video-modal__frameWrap{
  background: #000;
  display: grid;
  place-items: center;
  padding: 14px;
}
/* video vertical con ratio 9:16 */
.cuet-video-modal__frameWrap video{
  width: 100%;
  max-width: 360px;       /* controla tamaño en desktop */
  aspect-ratio: 9 / 16;   /* IMPORTANTÍSIMO */
  height: auto;
  border-radius: 18px;
  background: #000;
  display: block;
  object-fit: cover;      /* llena el frame sin deformar */
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

/* panel derecho */
.cuet-video-modal__text{
  padding: 18px;
  background: rgba(243,242,238,.92);
}
.cuet-video-modal__text{ padding: 18px; }
.cuet-video-modal__text h3{
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  color: var(--cuet-ink);
}
.cuet-video-modal__text p{
  margin: 0 0 10px;
  color: rgba(42,27,30,.74);
  line-height: 1.6;
}
.cuet-video-modal__quote{
  color: rgba(42,27,30,.82);
  font-weight: 600;
}

@media (max-width: 980px){
  .cuet-video-modal__content{
    grid-template-columns: 1fr;
  }

  .cuet-video-modal__frameWrap{
    padding: 12px;
  }

  .cuet-video-modal__frameWrap video{
    max-width: 520px;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
  }
}


/* Modal: que nunca se corte y siempre quepa en pantalla */
.cuet-video-modal__dialog{
  max-height: 88vh;           /* altura máxima del modal */
  overflow: hidden;           /* evita recortes raros */
}

/* El layout debe poder reducirse */
.cuet-video-modal__content{
  height: 88vh;               /* el contenido respeta la altura del modal */
  max-height: 88vh;
}

/* área del video */
.cuet-video-modal__frameWrap{
  display: grid;
  place-items: center;
  padding: 14px;
  max-height: 88vh;
  overflow: hidden;
}

/* video vertical 9:16, sin recorte */
.cuet-video-modal__frameWrap video{
  width: 100%;
  max-width: 360px;
  max-height: calc(88vh - 28px); /* resta padding */
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;          /* clave: NO recorta, se ajusta */
  border-radius: 18px;
  background: #000;
}



/* ===== Modal premium + 9:16 perfecto ===== */
.cuet-video-modal__dialog{
  max-width: 1040px;
  border-radius: calc(var(--radius) + 10px);
  max-height: 88vh;
  overflow: hidden;
}

.cuet-video-modal__content{
  display: grid;
  grid-template-columns: minmax(280px, 390px) 1fr;
  height: 88vh;
  max-height: 88vh;
}

.cuet-video-modal__frameWrap{
  background: #0b0b0b;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}

.cuet-video-modal__frameWrap video{
  width: 100%;
  max-width: 370px;
  max-height: calc(88vh - 32px);
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain; /* NO recorta */
  border-radius: 18px;
  background: #000;
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
}

.cuet-video-modal__text{
  padding: 18px 18px 16px;
  background: rgba(243,242,238,.95);
}

.cuet-video-modal__chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cuet-wine);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(195,167,169,.45);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.cuet-video-modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cuet-video-modal__hint{
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(42,27,30,.62);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 980px){
  .cuet-video-modal__dialog{
    margin: 4vh 12px;
    max-height: 92vh;
  }
  .cuet-video-modal__content{
    grid-template-columns: 1fr;
    height: auto;
    max-height: 92vh;
  }
  .cuet-video-modal__frameWrap video{
    max-width: 520px;
    max-height: 62vh;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
  }
}


/* ===== En móvil: los .cuet-story se apilan 1 por fila ===== */
@media (max-width: 640px){

  /* Agarra el contenedor que envuelve los articles */
  .cuet-story{
    width: 100%;
  }

  /* Si están dentro de un grid/flex: fuerza 1 columna */
  .cuet-story{
    grid-column: 1 / -1;
  }

  /* Por si el contenedor es flex horizontal */
  .cuet-story{
    flex: 0 0 100% !important;
  }

  /* Por si el contenedor está en "carrusel" horizontal */
  .cuet-stories,
  .cuet-stories *{
    scroll-snap-type: none !important;
  }

  /* Si el wrapper tiene overflow-x, lo apagamos */
  .cuet-stories,
  .cuet-stories-wrapper,
  .cuet-stories-grid{
    overflow-x: visible !important;
  }
}



/* ===== Scroll interno SOLO en el panel de texto ===== */
.cuet-video-modal__content{
  max-height: 88vh; /* igual a tu dialog */
}

.cuet-video-modal__text{
  max-height: 88vh;
  overflow: auto;                /* aquí aparece la barra */
  -webkit-overflow-scrolling: touch;
}

/* opcional: que el título/acciones se queden pegados arriba */
.cuet-video-modal__text{
  position: relative;
  padding-bottom: 18px;
}

/* si quieres que la barra no se vea tan fea (Chrome/Edge) */
.cuet-video-modal__text::-webkit-scrollbar{
  width: 10px;
}
.cuet-video-modal__text::-webkit-scrollbar-thumb{
  background: rgba(120, 84, 88, .28);
  border-radius: 999px;
}
.cuet-video-modal__text::-webkit-scrollbar-track{
  background: transparent;
}

/* ===== FIX DEFINITIVO: scroll interno en el texto (móvil) ===== */
@media (max-width: 980px){

  /* El modal debe tener altura fija y ocultar lo que sobre */
  .cuet-video-modal__dialog{
    max-height: 92vh;
    height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* El contenido en columna */
  .cuet-video-modal__content{
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    min-height: 0; /* CLAVE para que overflow funcione */
  }

  /* Video arriba, altura “controlada” */
  .cuet-video-modal__frameWrap{
    flex: 0 0 auto;
    padding: 12px;
  }

  /* El video NO debe crecer infinito */
  .cuet-video-modal__frameWrap video{
    max-height: 52vh;      /* ajusta si lo quieres más grande/pequeño */
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
  }

  /* Texto abajo con scroll */
  .cuet-video-modal__text{
    flex: 1 1 auto;
    min-height: 0;         /* CLAVE para que overflow funcione */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 18px;
  }
}


@media (max-width: 980px){
  .cuet-video-modal__text::-webkit-scrollbar{ width: 10px; }
  .cuet-video-modal__text::-webkit-scrollbar-thumb{
    background: rgba(120, 84, 88, .25);
    border-radius: 999px;
  }
  .cuet-video-modal__text::-webkit-scrollbar-track{ background: transparent; }
}

/* ===== Scroll interno en el texto (teléfonos + tablets mini) ===== */
@media (max-width: 1024px){

  .cuet-video-modal__dialog{
    max-height: 92vh;
    height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .cuet-video-modal__content{
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    min-height: 0; /* CLAVE */
  }

  .cuet-video-modal__frameWrap{
    flex: 0 0 auto;
    padding: 12px;
  }

  .cuet-video-modal__frameWrap video{
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;

    /* Ajuste para que no se coma el texto en pantallas medianas */
    max-height: 55vh;
  }

  .cuet-video-modal__text{
    flex: 1 1 auto;
    min-height: 0; /* CLAVE */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 18px;
  }
}



/* Estado inicial para GSAP */
/* ==============================
   GSAP Reveal — Historias Reales
   Sección: .cuet-stories
================================ */

/* Estado inicial (más evidente) */
.cuet-stories [data-tr="head"],
.cuet-stories [data-tr="card"]{
  opacity: 0;
  transform: translateY(70px) scale(.955);
  filter: blur(22px);
  will-change: transform, opacity, filter;
}

/* Solo para que el play no se vea borroso raro: lo dejamos sin blur y lo animamos con GSAP */
.cuet-stories .cuet-story__play{
  filter: none;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cuet-stories [data-tr="head"],
  .cuet-stories [data-tr="card"]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}