/* ============================================================
   TELEMETRY INSIGHT · HERO / CARRUSEL
   Soporta IMAGEN o VIDEO por slide (ver SLIDES en content.js).
   Los controles viven en una barra inferior separada del CTA.
   ============================================================ */

/* El carrusel de fotos conserva su atmósfera profunda en ambos temas.
   --hero-shade es un tono oscuro teñido con el color de la división,
   así el gradiente sobre las fotos nunca se vuelve blanco en modo claro. */
.hero{position:relative;overflow:hidden;
  --hero-shade:color-mix(in srgb,var(--brand-deep) 88%,#05070d);
  background:var(--hero-shade);transition:background var(--tune)}
.hero-stars{position:absolute;inset:0;opacity:.4;pointer-events:none}

/* El carrusel define la altura total; el padding-bottom del SLIDE
   reserva el espacio de la barra de controles, de modo que el
   contenido (y el botón) nunca queden encimados con los botones. */
.carousel{position:relative;height:clamp(520px,74vh,680px)}

.slide{position:absolute;inset:0;display:flex;align-items:center;
  padding-bottom:104px;
  opacity:0;visibility:hidden;
  transition:opacity .75s ease, visibility .75s}
.slide.active{opacity:1;visibility:visible}

/* Entrada escalonada del contenido al cambiar de slide:
   el texto sube suavemente en lugar de aparecer de golpe. */
.slide .kicker,
.slide h1,
.slide p,
.slide .slide-cta{opacity:0;transform:translateY(18px)}
.slide.active .kicker   {animation:slideUp .7s var(--ease) .10s forwards}
.slide.active h1        {animation:slideUp .7s var(--ease) .18s forwards}
.slide.active p         {animation:slideUp .7s var(--ease) .26s forwards}
.slide.active .slide-cta{animation:slideUp .7s var(--ease) .34s forwards}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .slide .kicker,.slide h1,.slide p,.slide .slide-cta{opacity:1;transform:none;animation:none}
}

/* ---------- Fondo del slide: imagen o video ---------- */
.slide-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide-bg img,
.slide-bg video{width:100%;height:100%;object-fit:cover;opacity:.85;
  display:block;transform:scale(1.02)}
/* Movimiento lento y sutil solo en el slide visible (aporta vida sin distraer) */
.slide.active .slide-bg img{animation:heroDrift 18s ease-out forwards}
@keyframes heroDrift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){
  .slide.active .slide-bg img{animation:none}
}
/* Degradado para asegurar legibilidad del texto sobre cualquier foto o video.
   Usa --hero-shade (fijo, oscuro) para mantener el azul/vino/teal profundo
   también en modo claro. Un velo vertical extra da profundidad abajo. */
.slide-bg::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,
    var(--hero-shade) 0%,
    color-mix(in srgb,var(--hero-shade) 80%,transparent) 44%,
    color-mix(in srgb,var(--hero-shade) 28%,transparent) 80%,
    transparent 100%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--hero-shade) 40%,transparent) 0%,
    transparent 30%,
    color-mix(in srgb,var(--hero-shade) 55%,transparent) 100%)}

/* ---------- Contenido del slide ---------- */
.slide-content{position:relative;z-index:2;max-width:720px}
.slide .kicker{color:var(--accent);margin-bottom:20px;opacity:.95}
.slide h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.04;letter-spacing:.012em;
  color:var(--ink);margin-bottom:22px}
.slide h1 em{font-style:normal;color:var(--brand-bright);transition:color var(--tune)}
.slide p{font-weight:400;font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.75;letter-spacing:.006em;
  color:var(--ink-soft);max-width:54ch;margin-bottom:34px}

/* CTA principal — crema institucional con texto en el azul/vino de la división */
.slide-cta{display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:var(--brand-deep);
  font-weight:700;padding:15px 30px;border-radius:12px;font-size:.96rem;
  transition:transform .18s var(--ease),box-shadow .18s,background var(--tune),color var(--tune);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.slide-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.6)}
.slide-cta:active{transform:translateY(0)}

/* ---------- Barra de controles rediseñada ----------
   Cristal teñido con la división + progreso segmentado tipo "historia"
   (cada tramo se llena en 7 s) + contador editorial. Todo armónico y
   con el mismo acento de color de la división. */
.carousel-controls{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-deep) 55%,rgba(6,9,15,.62)),
    color-mix(in srgb,var(--black) 68%,transparent));
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid color-mix(in srgb,var(--brand-bright) 26%,transparent);
  border-radius:100px;padding:8px 12px;
  box-shadow:0 16px 44px -16px rgba(0,0,0,.75),
             inset 0 1px 0 color-mix(in srgb,var(--cream) 12%,transparent)}
.cc-arrow{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--cream);background:color-mix(in srgb,var(--cream) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);
  transition:background .22s,border-color .22s,transform .22s,color .22s;flex:none}
.cc-arrow:hover{background:var(--brand-bright);border-color:var(--brand-bright);color:#fff;transform:scale(1.1)}
.cc-arrow:active{transform:scale(.95)}

/* Contador editorial: 01 / 03 */
.cc-count{display:inline-flex;align-items:baseline;gap:3px;font-family:'Mont',sans-serif;
  color:var(--cream);letter-spacing:.06em;user-select:none;padding:0 2px}
.cc-count .cur{font-weight:800;font-size:.92rem}
.cc-count .sep{opacity:.45;font-weight:400;font-size:.8rem}
.cc-count .tot{opacity:.6;font-weight:600;font-size:.78rem}

/* Progreso segmentado */
.carousel-dots{display:flex;gap:7px;align-items:center}
.cc-seg{position:relative;width:30px;height:5px;border-radius:4px;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:color-mix(in srgb,var(--cream) 24%,transparent);
  transition:width .38s var(--ease),background .25s}
.cc-seg:hover{background:color-mix(in srgb,var(--cream) 42%,transparent)}
.cc-seg-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--brand-bright),color-mix(in srgb,var(--brand-bright) 60%,var(--gold-bright)))}
.cc-seg.active{width:58px;background:color-mix(in srgb,var(--cream) 20%,transparent)}
.cc-seg.active .cc-seg-fill{animation:segFill 7s linear forwards}
@keyframes segFill{from{width:0}to{width:100%}}
/* Al pasar el cursor, el carrusel pausa y el progreso también */
.carousel.is-paused .cc-seg.active .cc-seg-fill{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .cc-seg.active .cc-seg-fill{animation:none;width:100%}
}

/* ============================================================
   FIX MODO CLARO — LEGIBILIDAD DEL CARRUSEL (las 3 divisiones)
   El fondo del slide SIEMPRE es oscuro (--hero-shade se mantiene
   profundo en ambos temas). Por eso el texto del carrusel debe
   ser SIEMPRE claro, sin importar el tema de la página.
   Se replica el tratamiento del modo oscuro solo aquí.
   ============================================================ */
body[data-theme="light"] .slide h1{color:#EFE7DC}
body[data-theme="light"] .slide p{color:#E4DBCB}
body[data-theme="light"] .slide .kicker{color:var(--accent)}
/* El "em" resaltado del título usa el color brillante de la división,
   que se ve bien sobre el fondo oscuro en ambos temas. */
body[data-theme="light"] .slide h1 em{color:var(--brand-bright)}
/* El CTA conserva su fondo crema con texto en el color profundo:
   legible en ambos temas porque el botón trae su propio fondo. */
body[data-theme="light"] .slide-cta{background:#EFE7DC;color:var(--brand-deep)}
/* Refuerzo del velo para garantizar contraste del texto sobre fotos claras */
body[data-theme="light"] .slide-bg img{opacity:.80}