/* ==========================================================
   WEBVIRTUAL · HERO CAMALÉON V4
   ----------------------------------------------------------
   Archivo de ajustes exclusivo para:
   - hero animado de la home;
   - transición de píxeles hacia Servicios;
   - integración visual del bloque Identidad;
   - integración visual de la tarjeta SEO.

   Principios de estructura / SEO
   - El H1, los textos y los CTA siguen siendo HTML real.
   - El canvas solo aporta decoración/movimiento y lleva aria-hidden.
   - No se redefine la tipografía, tamaño ni interlineado del H1,
     .lead, .eyebrow o .btn del diseño general de la web.
   ========================================================== */

/* ==========================================================
   HERO
   ========================================================== */

.wv-pixel-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(540px, calc(100vh - 80px), 650px);
  color: #f5f7f8;

  /* Azul grisáceo, más luminoso que V3 sin volver a un azul saturado. */
  background:
    radial-gradient(circle at 75% 40%, rgba(81, 126, 159, 0.24) 0%, rgba(53, 91, 121, 0.13) 31%, rgba(25, 54, 78, 0) 63%),
    linear-gradient(135deg, #1b3a55 0%, #183650 48%, #143049 100%) !important;
  background-image:
    radial-gradient(circle at 75% 40%, rgba(81, 126, 159, 0.24) 0%, rgba(53, 91, 121, 0.13) 31%, rgba(25, 54, 78, 0) 63%),
    linear-gradient(135deg, #1b3a55 0%, #183650 48%, #143049 100%) !important;
}

/* Neutraliza cualquier fondo/pseudo-elemento heredado del antiguo hero fotográfico. */
.wv-pixel-hero::before,
.wv-pixel-hero::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/*
   Se reduce bastante el aire vertical respecto a V3.
   Los 24 px laterales son una protección adicional: si .container cambia,
   el contenido nunca queda pegado al borde.
*/
.wv-pixel-hero .hero-grid {
  position: relative;
  z-index: 3;
  width: min(100%, 1240px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vh, 36px) 24px clamp(30px, 4vh, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, 0.84fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
  box-sizing: border-box;
}

.wv-pixel-hero .hero-grid > :first-child {
  position: relative;
  z-index: 4;
  min-width: 0;
}

/* Recupera y separa visualmente la línea dinámica bajo el H1. */
.wv-adapt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin: 14px 0 24px;
  color: rgba(228, 236, 242, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.wv-adapt__swatch {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 2px;
  background: var(--wv-area-color, #00aaa9);
  box-shadow: 0 0 15px color-mix(in srgb, var(--wv-area-color, #00aaa9) 30%, transparent);
  transition: background-color 480ms ease;
}

.wv-adapt strong {
  color: #ffffff;
  font-weight: 600;
  transition: opacity 220ms ease, transform 220ms ease;
}

.wv-adapt strong.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

/* Estrellas/píxeles ambientales: siempre detrás del contenido. */
.wv-hero-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Camaleón algo contenido y alineado con el bloque de texto. */
.wv-hero-stage {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(100%, 440px);
  aspect-ratio: 72 / 59;
  min-width: 0;
  transform: translateY(-4px);
}

/* Respaldo accesible/visual si JS está desactivado o falla. */
.wv-hero-fallback {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(92%, 425px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.92;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.18));
}

html.wv-hero-js .wv-hero-fallback {
  opacity: 0;
}

/*
   IMPORTANTE V4:
   este canvas está FUERA del hero en el HTML. Así no queda atrapado por
   el stacking context del banner y puede dibujar por encima del fondo
   blanco de Servicios hasta que los píxeles llegan a la franja.
*/
.wv-hero-fx {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.wv-hero-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 10px;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(226, 235, 241, 0.50);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================
   TRANSICIÓN HERO → SERVICIOS
   ========================================================== */

/*
   La franja se sitúa ahora ANTES del título de Servicios.
   El espacio superior deja una pequeña zona blanca visible para que se
   aprecie el aterrizaje de los píxeles antes de construir la línea.
*/
.home-redesign .services-section.wv-services-transition {
  position: relative;
  padding-top: clamp(48px, 5vw, 64px);
}

.wv-service-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  height: 5px;
  margin: 0 0 clamp(34px, 4vw, 48px);
  overflow: hidden;
  background: rgba(30, 50, 67, 0.06);
}

.wv-service-strip__segment {
  display: block;
  min-width: 0;
  height: 100%;
  background: var(--wv-strip-color);
  --wv-seg-progress: 0;
  opacity: var(--wv-seg-progress);
  transform: scaleX(var(--wv-seg-progress));
  transform-origin: left center;
  will-change: transform, opacity;
}

/* ==========================================================
   BLOQUE IDENTIDAD · CAMALÉON + PALETA
   Integra el selector en el lenguaje limpio del resto de la web.
   ========================================================== */

.home-redesign .wv-identity-section .logo-panel {
  overflow: visible;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-redesign .wv-identity-section .chameleon-art {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 46px);
  background:
    radial-gradient(circle at 52% 44%, rgba(0, 170, 169, 0.09), rgba(0, 170, 169, 0) 55%),
    linear-gradient(135deg, rgba(239, 246, 245, 0.92), rgba(248, 250, 249, 0.98));
  border: 0 !important;
  border-radius: 0 !important;
}

.home-redesign .wv-identity-section .chameleon-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #00aaa9 0 16.666%,
    #cb9950 16.666% 33.333%,
    #9068c4 33.333% 50%,
    #45ad69 50% 66.666%,
    #3e81cf 66.666% 83.333%,
    #ca5ca5 83.333% 100%
  );
}

.home-redesign .wv-identity-section .chameleon-art img {
  width: min(76%, 330px);
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(25, 55, 66, 0.10));
}

.home-redesign .wv-identity-section .chameleon-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 20px;
  padding: 22px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-redesign .wv-identity-section .palette-caption,
.home-redesign .wv-identity-section .palette-intro {
  grid-column: 1 / -1;
}

.home-redesign .wv-identity-section .palette-caption {
  margin-bottom: 8px;
}

.home-redesign .wv-identity-section .palette-intro {
  margin: 0 0 12px;
}

.home-redesign .wv-identity-section .tone-swatch {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(41, 67, 74, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
}

.home-redesign .wv-identity-section .tone-swatch:hover,
.home-redesign .wv-identity-section .tone-swatch.is-selected {
  background: transparent !important;
  border-bottom-color: var(--swatch) !important;
}

.home-redesign .wv-identity-section .tone-swatch.is-selected .swatch-label {
  font-weight: 600;
}

.home-redesign .wv-identity-section .swatch-dot {
  flex: 0 0 auto;
}

/* ==========================================================
   SEO · INTEGRACIÓN DE LA IMAGEN CON EL RESTO DE CARDS
   ========================================================== */

.home-redesign .wv-seo-integrated .seo-growth-card {
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.home-redesign .wv-seo-integrated .seo-growth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 35, 44, 0.88) 0%, rgba(11, 35, 44, 0.62) 48%, rgba(11, 35, 44, 0.38) 100%);
}

.home-redesign .wv-seo-integrated .seo-growth-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #00aaa9, #45ad69, #3e81cf);
}

.home-redesign .wv-seo-integrated .seo-bg {
  filter: grayscale(1) saturate(0.35) contrast(0.92) brightness(0.78);
  opacity: 0.70;
  transform: scale(1.015);
  transition: filter 420ms ease, opacity 420ms ease, transform 700ms ease;
}

.home-redesign .wv-seo-integrated .seo-card-content {
  position: relative;
  z-index: 2;
}

.home-redesign .wv-seo-integrated .seo-growth-card:hover .seo-bg {
  filter: grayscale(0.20) saturate(0.78) contrast(0.96) brightness(0.80);
  opacity: 0.78;
  transform: scale(1.035);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .wv-pixel-hero .hero-grid {
    grid-template-columns: minmax(0, 1.10fr) minmax(315px, 0.90fr);
    gap: 20px;
  }

  .wv-hero-stage {
    width: min(100%, 405px);
  }
}

@media (max-width: 820px) {
  .wv-pixel-hero {
    min-height: auto;
  }

  .wv-pixel-hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 30px 18px 28px;
  }

  .wv-hero-stage {
    justify-self: center;
    width: min(80vw, 390px);
    transform: none;
  }

  .wv-hero-hint {
    display: none;
  }

  .home-redesign .services-section.wv-services-transition {
    padding-top: 40px;
  }

  .wv-service-strip {
    margin-bottom: 30px;
  }

  .home-redesign .wv-identity-section .chameleon-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .wv-pixel-hero .hero-grid {
    padding-inline: 16px;
  }

  .wv-adapt {
    margin: 12px 0 20px;
  }

  .wv-service-strip {
    height: 4px;
    margin-bottom: 26px;
  }

  .home-redesign .wv-identity-section .chameleon-palette {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wv-adapt strong,
  .wv-adapt__swatch,
  .wv-service-strip__segment,
  .home-redesign .wv-seo-integrated .seo-bg {
    transition: none;
  }
}