/* ================== HERO 100% VIEWPORT + CENTRADO ================== */
/* Parámetros */
:root { --header-h: 72px; } /* altura del header móvil si es fijo */

/* --- Estructura base --- */
.hero-section {
  position: relative;
  padding-top: 0;
  max-width: 100%;
  margin: 0;                 /* sin márgenes para ocupar toda la pantalla */
  height: 100vh;
}
@supports (height: 100dvh) { .hero-section { height: 100dvh; } }
@supports (height: 100svh) { .hero-section { height: 100svh; } }

/* Swiper: hereda altura total */
.hero-section .hero-swiper,
.hero-section .hero-swiper .swiper-wrapper,
.hero-section .hero-swiper .swiper-slide {
  height: 100%;
}

/* Contenedor de vídeo a pantalla completa */
.hero-video-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  height: 100%;
  border-top-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
}

/* Video una sola vez (evita duplicados) */
.hero-video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(150%);
}

/* Overlay multicolor + capas */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(248,173,64,.6),   /* naranja tools */
    rgba(149,193,33,.6),   /* verde CIFE */
    rgba(0,172,216,.6),    /* azul agente360 */
    rgba(219,81,133,.6),   /* rosa Talentia */
    rgba(0,62,92,.6)       /* azul corporativo NeoCK */
  );
  pointer-events: none;
}
.hero-overlay.overlay-2 { background: linear-gradient(135deg, rgba(148,193,33,.305), rgba(148,193,33,.40)); }
.hero-overlay.overlay-3 { background: linear-gradient(135deg, rgba(219,81,133,.30), rgba(219,81,133,.40)); }

/* Contenido: centrado absoluto por flex a altura completa */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centrado vertical */
  align-items: center;       /* centrado horizontal */
  text-align: center;
  height: 100%;              /* ocupa toda la slide */
  width: 100%;
  max-width: 78vw;
  margin: 0 auto;
  padding: 0 1rem;
  gap: .9rem;
}

/* Texto: título con corchetes */
.hero-title-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all .3s ease;
  max-width: 600px;
}

.hero-title-brackets-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;               /* un pelín más de aire */
  margin: .8rem 0;
  overflow: visible;
}
.hero-title-brackets-horizontal .corchete {
  width: clamp(110px, 12vw, 180px);
  height: auto;
  opacity: .9;
}
.hero-title-brackets-horizontal .abajo { transform: rotate(180deg); }

/* Titulares */
.hero-title-text { max-width: min(42rem, 88vw); }
.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-title span { font-family: 'Lato', sans-serif; }
.hero-title .font-light { font-weight: 300; }
.hero-title .font-bold  { font-weight: 700; }
.hero-title span:last-child { border-bottom: 2px solid transparent; padding-bottom: 2px; }

/* Copia */
.hero-lead, .hero-description {
  margin-top: .35rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  max-width: min(40rem, 88vw);
}

/* Bloque texto general */
.hero-text { max-width: 40rem; }

/* CTA */
.hero-content .cta-button {
  display: inline-block;
  margin-top: .6rem;
  padding: .7rem 1.2rem;
  font-size: 1.4rem;
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background .3s ease;
}
.cta-button:hover { background: #f1f1f1; }

/* Utilidades */
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

/* Stats opcionales */
.stats-container { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.stat-number { font-size: 3rem; font-weight: 700; color: #fff; display: inline-block; }
.stat-label  { font-size: 1.2rem; font-weight: 300; color: #fff; margin: 0; }

/* Botones responsive */
.boton-movil { display: none; }
.boton { display: block; }

/* Forzar texto blanco en el hero (alta especificidad) */
section.hero-section .hero-content,
section.hero-section .hero-content .hero-text,
section.hero-section .hero-content .hero-text .hero-title,
section.hero-section .hero-content .hero-text .hero-lead,
section.hero-section .hero-content .hero-text .hero-title *,
section.hero-section .hero-content .hero-text .hero-lead * { color: #fff !important; }

.text-white { color: #fff !important; }
section.hero-section * { -webkit-text-fill-color: inherit !important; }

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
  /* Si tu header es fijo y quieres restarlo:
     descomenta este bloque para evitar que el header tape el hero en móviles.
  .hero-section { height: calc(100svh - var(--header-h)); }
  @supports (height: 100dvh) { .hero-section { height: calc(100dvh - var(--header-h)); } }
  @supports (height: 100svh) { .hero-section { height: calc(100svh - var(--header-h)); } }
  */

  .hero-title { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.15; }
  .hero-lead, .hero-description { font-size: clamp(1rem, 4.2vw, 1.2rem); line-height: 1.4; max-width: 84vw; }
  .hero-title-brackets-horizontal .corchete { width: clamp(68px, 22vw, 118px); }
  .boton-movil { display: block; }
  .boton { display: block; }
}

/* Teléfonos muy pequeños */
@media (max-width: 360px) {
  .hero-title-brackets-horizontal .corchete { width: 62px; }
  .hero-title { font-size: clamp(1.2rem, 6.2vw, 1.6rem); }
  .hero-lead, .hero-description { font-size: clamp(.95rem, 4.2vw, 1.05rem); }
}

/* Landscape móvil: mantenemos centrado */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-content { justify-content: center !important; padding-top: .6rem !important; padding-bottom: .6rem !important; }
}

/* 2K / 4K */
@media (min-width: 2560px) { .hero-title { font-size: 3.6rem; } .hero-lead { font-size: 1.3rem; } }
@media (min-width: 3840px) { .hero-title { font-size: 4rem; } .hero-lead { font-size: 1.4rem; } }

/* === Espaciado extra entre corchetes y título (móvil) === */
@media (max-width: 768px) {
  /* Aumenta el espacio vertical del conjunto */
  .hero-title-brackets-horizontal {
    gap: clamp(.9rem, 3.5vw, 1.2rem);
    margin: clamp(.6rem, 2.2vw, 1rem) 0;
  }

  /* Separación explícita por si el gap no basta en algunos dispositivos */
  .hero-title-brackets-horizontal .corchete.arriba {
    display: block;
    margin-bottom: clamp(8px, 2.8vw, 14px);
  }
  .hero-title-brackets-horizontal .corchete.abajo {
    display: block;
    margin-top: clamp(8px, 2.8vw, 14px);
  }

  /* Un pelín de “colchón” al texto del título */
  .hero-title-text {
    padding-block: clamp(4px, 1.4vw, 8px);
  }

  /* Evita que line-height comprima demasiado */
  .hero-title {
    line-height: 1.2;
  }
}