/* ==========================================================================
   ENDOLINEA MÉDICA — STYLE SYSTEM
   --------------------------------------------------------------------------
   01. Design tokens      07. Brands
   02. Reset & base       08. Contact
   03. Utilidades         09. Footer
   04. Header / nav       10. Keyframes
   05. Hero               11. Responsive
   06. News / carrusel    12. Reduced motion
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Color */
  --color-white:        #ffffff;
  --color-surface:      #f5f5f7;
  --color-gray-300:     #86868b;
  --color-gray-500:     #6e6e73;
  --color-ink:          #1d1d1f;
  --color-ink-rgb:      29, 29, 31;
  --color-black:        #000000;
  --color-accent:       #0066cc;
  --color-accent-dark:  #004499;
  --color-link:         #6cbaed;
  --color-link-bright:  #94cef4;
  --color-sky:          #6cbaed;
  --color-sky-bright:   #94cef4;

  /* Tipografía: Inter como fuente única */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --container-max: 1200px;
  --header-h: 64px;
  --news-overlap: 120px;

  /* Carrusel */
  --carousel-gap: 20px;

  /* Radios y sombras */
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 24px 48px rgba(0, 0, 0, 0.45);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: all 0.3s ease;
    /* Transición del header entre modo oscuro y claro:
     curva simétrica (arranca y termina suave → nunca "de golpe") */
  --ease-header: cubic-bezier(0.4, 0, 0.2, 1);
  --header-theme-dur: 0.5s;   /* sube a 0.6s–0.7s si lo quieres aún más pausado */

  /* Z-index */
  --z-header: 100;
  --z-hero-blur: 2;
  --z-hero-fade: 3;
  --z-hero-content: 4;
  --z-news: 5;
  --z-skip: 200;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* El scroll suave lo gestiona Lenis (main.js). NO usar scroll-behavior: smooth. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Clases que Lenis inyecta en <html> */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }

::selection { background: rgba(0, 102, 204, 0.25); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ==========================================================================
   03. UTILIDADES
   ========================================================================== */
.container {
  width: min(var(--container-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--gutter);
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.3s ease;
}
.skip-link:focus { top: 0; }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

/* Header — CTA estilo "Buy": píldora azul sólida, texto blanco */
.btn--glass {
  background: var(--color-sky);
  border-color: transparent;
  color: var(--color-white);
}
.btn--glass:hover {
  background: var(--color-sky-bright);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(108, 186, 237, 0.4);
}

/* Hero */
.btn--hero {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--hero:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Formulario */
.btn--primary { background: var(--color-ink); color: var(--color-white); }
.btn--primary:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Secciones claras */
.btn--outline {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--outline:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Enlace secundario ("Saber mas") */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  color: var(--color-link);
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
}
.text-link svg { transition: transform 0.3s var(--ease-out); }
.text-link:hover { color: var(--color-link-bright); }
.text-link:hover svg { transform: translateX(3px); }

/* Cabecera de sección reutilizable */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
}
.section-head__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-white);
}

/* ==========================================================================
   04. HEADER / NAVEGACIÓN  (glass premium + modo claro + crossfade suave)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);

  /* --- MODO OSCURO (default) --- */
  background: linear-gradient(180deg,
    rgba(38, 38, 40, 0.66) 0%,
    rgba(20, 20, 22, 0.78) 55%,
    rgba(14, 14, 16, 0.84) 100%);
  /* brightness(0.82) domestica los frames claros del video (sin velo blanco) */
  backdrop-filter: blur(22px) saturate(180%) brightness(0.82);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(0.82);
  border-bottom: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 10px 30px rgba(0, 0, 0, 0.35);

  /* Crossfade SUAVE entre modos: misma duración/curva para fondo, blur y sombra */
  transition:
    background var(--header-theme-dur) var(--ease-header),
    backdrop-filter var(--header-theme-dur) var(--ease-header),
    -webkit-backdrop-filter var(--header-theme-dur) var(--ease-header),
    box-shadow var(--header-theme-dur) var(--ease-header);
}

/* Filo luminoso inferior */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(255, 255, 255, 0) 100%);
  transition: background var(--header-theme-dur) var(--ease-header);
}

/* Oscuro + scroll */
.site-header.is-scrolled {
  background: linear-gradient(180deg,
    rgba(30, 30, 32, 0.80) 0%,
    rgba(16, 16, 18, 0.90) 100%);
  backdrop-filter: blur(26px) saturate(180%) brightness(0.78);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 34px rgba(0, 0, 0, 0.42);
}

/* --- MODO CLARO (.is-light) --- */
.site-header.is-light {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.40) 55%,
    rgba(245, 245, 247, 0.46) 100%);
  /* 👇 CLAVE: brightness(1) = neutro, pero IGUALA la lista de funciones
     del modo oscuro → ahora el blur SE INTERPOLA en vez de saltar */
  backdrop-filter: blur(28px) saturate(180%) brightness(1);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.06);
}
.site-header.is-light::after { background: rgba(0, 0, 0, 0.10); }
.site-header.is-light.is-scrolled {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(245, 245, 247, 0.56) 100%);
  backdrop-filter: blur(32px) saturate(180%) brightness(1);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 12px 34px rgba(0, 0, 0, 0.08);
}

/* --- Barra de navegación --- */
.header-nav {
  display: flex;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  /* top > bottom → la fila "baja" y gana aire arriba;
     padding horizontal simétrico → logo y botón equidistan de los bordes */
  padding: 1rem clamp(1.5rem, 4vw, 3rem) 0.7rem;
}

/* Logo con crossfade entre logo.png y logoalter.png */
.header-nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-nav__logo img {
  height: 24px;
  width: auto;
  transition: opacity var(--header-theme-dur) var(--ease-header);
}
.header-nav__logo .logo-alt {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.site-header.is-light .logo-default { opacity: 0; }
.site-header.is-light .logo-alt     { opacity: 1; }

.header-nav__toggle { display: none; }

.header-nav__menu {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 2rem;
}

.nav-list { display: flex; align-items: center; gap: 1.8rem; }
.nav-list__link {
  display: inline-flex;        /* 👈 ahora su padding vertical sí cuenta (antes era inline) */
  align-items: center;
  padding: 0.3rem 0;
  border: 1px solid transparent; /* 👈 mismo borde que el botón → cajas idénticas */
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;              /* 👈 caja controlada, igual que el botón */
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}
.nav-list__link:hover { color: var(--color-white); }
.site-header.is-light .nav-list__link { color: rgba(0, 0, 0, 0.72); }
.site-header.is-light .nav-list__link:hover { color: var(--color-black); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  white-space: nowrap;
}
.nav-actions__search {
  display: inline-flex;
  padding: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--header-theme-dur) var(--ease-header);
}
.nav-actions__search:hover { color: var(--color-white); }
.site-header.is-light .nav-actions__search { color: rgba(0, 0, 0, 0.72); }
.site-header.is-light .nav-actions__search:hover { color: var(--color-black); }

/* El CTA azul se mantiene igual en ambos modos */
.nav-actions .btn {
  padding: 0.3rem 0.85rem;     /* 👈 vertical = 0.3rem, igual que el link */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;              /* 👈 idem → botón y texto quedan a la misma altura */
  letter-spacing: 0;
  text-transform: none;
}

/* --- Móvil: hamburguesa y menú también hacen crossfade suave --- */
@media (max-width: 900px) {
  .header-nav__toggle span {
    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      background var(--header-theme-dur) var(--ease-header);
  }
  .site-header.is-light .header-nav__toggle span { background: var(--color-ink); }
  .site-header.is-light .header-nav__menu {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  .site-header.is-light .header-nav__menu .nav-list__link {
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }
}

/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh + var(--news-overlap));
  min-height: calc(100svh + var(--news-overlap));
  overflow: hidden;
  background-color: var(--color-ink);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }

/* TRANSICIÓN HERO → NEWS (estilo Apple)
   --hero-fade: 0 en scrollY = 0 (video intacto), 1 a los ~180px de scroll. */
.hero__blur {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(260px, 48vh, 540px);
  z-index: var(--z-hero-blur);
  pointer-events: none;
  opacity: var(--hero-fade, 0);
  will-change: opacity;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 45%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 45%, #000 78%);
}

.hero__fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(220px, 42vh, 480px);
  z-index: var(--z-hero-fade);
  pointer-events: none;
  opacity: var(--hero-fade, 0);
  will-change: opacity;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-ink-rgb), 0) 0%,
    rgba(var(--color-ink-rgb), 0.02) 18%,
    rgba(var(--color-ink-rgb), 0.08) 38%,
    rgba(var(--color-ink-rgb), 0.22) 56%,
    rgba(var(--color-ink-rgb), 0.48) 72%,
    rgba(var(--color-ink-rgb), 0.76) 86%,
    rgba(var(--color-ink-rgb), 0.95) 95%,
    rgb(var(--color-ink-rgb)) 100%
  );
}

/* En reposo: las capas salen del render (el backdrop-filter no consume GPU) */
.hero:not(.is-fading) .hero__blur,
.hero:not(.is-fading) .hero__fade { visibility: hidden; }

.hero__content {
  position: relative;
  z-index: var(--z-hero-content);
  width: 100%;
  /* Margen izquierdo proporcional estilo Apple (~9% del viewport, con topes).
     NO se centra con container a propósito: en Apple el texto del hero queda
     a la izquierda del nav en pantallas anchas, y así se ve intencional. */
  padding: 0 var(--gutter) 12rem clamp(1.5rem, 9vw, 13rem);
}

/* Titular: peso 600 (semibold) como Apple, leading apretado y tracking negativo.
   Sin max-width → en desktop queda en UNA línea, igual que "Fast runs in the family." */
.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: 0.7rem;
}

/* Subtítulo brillante (el equivalente a "Now with M5…" de Apple) */
.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.6rem;
}

/* Cobertura como micro-etiqueta sutil bajo el subtítulo */
.hero__tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* CTA del hero alineado a la DERECHA */
.hero__cta {
  display: flex;          /* block-level → permite que margin-left:auto funcione */
  width: fit-content;     /* se encoge al texto (si no, ocuparía todo el ancho) */
  margin-top: 1.8rem;
  margin-left: auto;      /* 👈 esto es lo que empuja el botón a la derecha */
  padding: 0.8rem 1.7rem;
  font-size: 0.85rem;
}

/* Palabras animadas (las genera JS con data-split-words) — sin cambios */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-60px);
  filter: blur(8px);
  animation: word-in 0.55s var(--ease-out) forwards;
  animation-delay: var(--word-delay, 0s);
  will-change: transform, filter, opacity;
}

/* Entradas escalonadas del resto (JS agrega .is-animated) — sin cambios */
.hero.is-animated .hero__lead,
.hero.is-animated .hero__tagline,
.hero.is-animated .hero__cta {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  animation: fade-up 0.55s var(--ease-out) forwards;
}
.hero.is-animated .hero__lead    { animation-delay: 0.35s; }
.hero.is-animated .hero__tagline { animation-delay: 0.45s; }
.hero.is-animated .hero__cta     { animation-delay: 0.55s; }

/* Indicador de scroll — visible solo al estar hasta arriba */
.hero__scroll-cue {
  position: absolute;
  bottom: calc(var(--news-overlap) + 1.5rem);
  left: 50%;
  width: 1px;
  height: 48px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  pointer-events: none;
  opacity: calc(1 - var(--hero-fade, 0) * 1.6);
}
.hero__scroll-cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--color-white));
  transform: translateY(-100%);
  animation: scroll-cue-drop 2.2s var(--ease-out) infinite;
}

/* --- Layout del hero: texto a la izquierda + CTA a la derecha (misma base) ---
   Grid de 2 columnas. align-items:end alinea el CTA por la BASE con el texto
   (igual que la cápsula de precio de Apple). El padding simétrico hace que el
   CTA se separe del borde derecho lo mismo que el texto del izquierdo.
   Estas reglas SOLO colocan; no tocan peso/color/tamaño de tu tipografía. */
.hero__content {
  display: grid;
  grid-template-columns: 1fr auto;     /* col1 = texto (crece), col2 = CTA (su ancho) */
  align-items: end;                    /* todo alineado por la base */
  column-gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: none;                     /* anula el 800px para que ocupe toda la pantalla */
  /* 👈 mismo valor a izq y der → simetría horizontal estilo Apple */
  padding: 0 clamp(1.5rem, 9vw, 13rem) 12rem;
}

/* Texto apilado en la columna 1 */
.hero__title    { grid-column: 1; grid-row: 1; }
.hero__lead     { grid-column: 1; grid-row: 2; }
.hero__tagline  { grid-column: 1; grid-row: 3; }

/* CTA en la columna 2, abarcando las 3 filas y clavado ABAJO
   → queda a la misma altura (base) que el tagline, no flotando debajo */
.hero__cta {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  width: fit-content;
  margin: 0;                           /* limpia el margin-top/auto anterior: el grid ya lo coloca */
}

/* En tablet/móvil volvemos a apilar (1 columna) para que no se aplaste */
@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter) 10rem;
  }
  .hero__title,
  .hero__lead,
  .hero__tagline { grid-column: 1; grid-row: auto; }
  .hero__cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    margin-top: 1.8rem;
  }
}

/* ==========================================================================
   06. NEWS / CARRUSEL
   ========================================================================== */
.news {
  position: relative;
  z-index: var(--z-news);
  background: var(--color-ink);
  margin-top: calc(var(--news-overlap) * -1);
  padding-top: var(--news-overlap);
  padding-bottom: 8rem;
}

.carousel { position: relative; width: 100%; }

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform 0.6s var(--ease-out);
}

.carousel__slide {
  position: relative;
  flex: 0 0 min(calc(100% - (var(--gutter) * 2)), 1136px);
  height: clamp(420px, 60vh, 640px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black);
  opacity: 0.4;
  transform: scale(0.96);
  cursor: pointer;
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-card);
  cursor: default;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.carousel__caption {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}
.carousel__caption-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}
.carousel__caption-text {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
}

.carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 2.5rem;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: rgba(60, 60, 60, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}
.carousel__dot:hover { background: rgba(255, 255, 255, 0.7); }
.carousel__dot.is-active { width: 28px; background: var(--color-white); }

.carousel__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.6);
  color: var(--color-white);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.carousel__toggle:hover { background: rgba(90, 90, 90, 0.8); transform: scale(1.05); }

.carousel__toggle .icon-play { display: none; }
.carousel__toggle[data-state="paused"] .icon-play  { display: block; }
.carousel__toggle[data-state="paused"] .icon-pause { display: none; }

/* ==========================================================================
   07. BRANDS / EXCLUSIVOS (Efecto Scroll Apple - Desvanecimiento Cuadrado)
   ========================================================================== */

.brands-section {
  height: 700vh; 
  background-color: #000000;
  position: relative;
}

.brands__sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.brands__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Capa 0: Introducción (EXCLUSIVOS) --- */
.brands__layer--intro {
  opacity: var(--brands-intro-op, 1);
  transform: translateY(var(--brands-intro-y, 0));
  will-change: opacity, transform;
  text-align: center; /* Todo perfectamente centrado */
  color: #ffffff;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Contenedor para que el texto no se estire demasiado en pantallas grandes */
.intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.brands__layer--intro h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 0.5rem; /* Margen reducido para acercarlo al subtítulo */
  letter-spacing: -0.03em;
}

.brands__layer--intro h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: 1.5rem;
  color: #e4e4e7; /* Un blanco ligeramente apagado para hacer jerarquía */
  font-weight: 500;
  letter-spacing: -0.01em;
}

.brands__layer--intro p {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: #a1a1aa; /* Gris elegante para lectura */
  line-height: 1.6;
}

/* La parte en negritas que pediste que resalte */
.brands__layer--intro p strong {
  color: #ffffff; /* Lo hacemos blanco puro para que destaque */
  font-weight: 600;
}

/* --- Capas de Productos --- */
.brands__layer--product {
  opacity: var(--brands-p-layer-op, 0); 
  pointer-events: none;
}

.brands__layer--product[style*="opacity: 1"],
.brands__layer--product[style*="opacity: 0."] {
  pointer-events: auto; 
}

/* --- Contenedor General Ampliado --- */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* --- Animación de la Imagen --- */
.product-showcase__media {
  position: relative;
  opacity: var(--brands-p-media-op, 0);
  transform: 
    scale(var(--brands-p-media-scale, 0.95))
    translateY(var(--brands-p-media-y, 20px))
    rotateX(var(--brands-p-media-rx, 5deg)); 
  filter: blur(var(--brands-p-media-blur, 15px));
  will-change: transform, opacity, filter;
  width: 100%;
}

.product-showcase__media img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: cover;
  border-radius: 16px;
  
  /* AQUÍ ESTÁ LA CORRECCIÓN: 
     Usamos 60px fijos desde los bordes hacia adentro. 
     Esto garantiza que el grosor del difuminado sea idéntico en todas las imágenes. */
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent 0px, black 60px, black calc(100% - 60px), transparent 100%),
    linear-gradient(to right, transparent 0px, black 60px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-composite: source-in;
  
  mask-image: 
    linear-gradient(to bottom, transparent 0px, black 60px, black calc(100% - 60px), transparent 100%),
    linear-gradient(to right, transparent 0px, black 60px, black calc(100% - 60px), transparent 100%);
  mask-composite: intersect;
}

/* --- Animación de la Información --- */
.product-showcase__info {
  opacity: var(--brands-p-info-op, 0);
  transform: translateY(var(--brands-p-info-y, 20px));
  filter: blur(var(--brands-p-info-blur, 8px));
  will-change: transform, opacity, filter;
  color: #ffffff;
}

.product-showcase__info h3 { 
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); 
  margin-bottom: 0.8rem; 
  letter-spacing: -0.02em; 
}

.product-showcase__info p { 
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); 
  color: #a1a1aa; 
  line-height: 1.6;
}


/* ==========================================================================
   DISEÑOS ESPECÍFICOS POR PRODUCTO (Escritorio / Tablets Grandes)
   ========================================================================== */
@media (min-width: 768px) {

  /* --- PRODUCTO 1: Texto a la izquierda (CENTRADO), Imagen a la derecha muy grande --- */
  .brands__layer[data-index="1"] .product-showcase {
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
  }
  .brands__layer[data-index="1"] .product-showcase__info {
    order: 1;
    text-align: center;
  }
  .brands__layer[data-index="1"] .product-showcase__media {
    order: 2;
  }

  /* --- PRODUCTO 2: Imagen ARRIBA y Texto ABAJO (CENTRADO) --- */
  .brands__layer[data-index="2"] .product-showcase {
    grid-template-columns: 1fr;
    max-width: 950px;
    gap: 2rem;
  }
  .brands__layer[data-index="2"] .product-showcase__media {
    order: 1;
    max-width: 850px;
    margin: 0 auto;
  }
  .brands__layer[data-index="2"] .product-showcase__info {
    order: 2;
    text-align: center;
  }

  /* --- PRODUCTO 3: Texto a la izquierda (IZQUIERDA), Imagen derecha --- */
  .brands__layer[data-index="3"] .product-showcase {
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
  }
  .brands__layer[data-index="3"] .product-showcase__info {
    order: 1;
    text-align: left;
  }
  .brands__layer[data-index="3"] .product-showcase__media {
    order: 2;
  }

  /* --- PRODUCTO 4: Imagen arriba a la derecha (grande), Texto abajo a la izquierda --- */
  .brands__layer[data-index="4"] .product-showcase {
    position: relative;
    height: 100vh;
    max-width: 100%;
    padding: 0 4rem;
    display: block;
  }
  .brands__layer[data-index="4"] .product-showcase__media {
    position: absolute;
    top: 6%;
    right: 5%;
    width: 60vw;
    max-width: 950px;
    z-index: 1;
  }
  .brands__layer[data-index="4"] .product-showcase__info {
    position: absolute;
    bottom: 10%;
    left: 8%;
    max-width: 480px;
    text-align: left;
    z-index: 3;
  }

  /* --- PRODUCTO 5: Texto izquierda, Imagen derecha (Texto CENTRADO) --- */
  .brands__layer[data-index="5"] .product-showcase {
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
  }
  .brands__layer[data-index="5"] .product-showcase__info {
    order: 1;
    text-align: center;
  }
  .brands__layer[data-index="5"] .product-showcase__media {
    order: 2;
  }

  /* --- PRODUCTO 6: Imagen izquierda, Texto derecha (Texto CENTRADO) --- */
  .brands__layer[data-index="6"] .product-showcase {
    grid-template-columns: 1.3fr 1fr;
    gap: 5rem;
  }
  .brands__layer[data-index="6"] .product-showcase__info {
    order: 2;
    text-align: center;
  }
  .brands__layer[data-index="6"] .product-showcase__media {
    order: 1;
  }
}
/* ==========================================================================
   08. MANTENTE INFORMADO / CONTACTO Y DESPLEGABLE
   ========================================================================== */

.informed-section {
  background-color: #000000;
  color: #ffffff;
  padding: 6rem 2rem; 
  border-top: 1px solid #1f1f1f; 
}

.informed__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; 
  gap: 4rem;
}

.informed__text h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.informed__text p {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: #a1a1aa; 
  line-height: 1.7;
}

.informed__links {
  display: flex;
  align-items: center; 
}

.informed__links-content {
  width: 100%;
}

.informed__links-content h3,
.informed__links .separator {
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.informed__links-content h3 {
  margin-bottom: 2rem;
}

.informed__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem; 
}

/* Enlaces y botón del desplegable */
.informed__links a,
.dropdown-toggle {
  color: #9d9da6;
  text-decoration: none;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  width: 100%;
}

.informed__links a:hover,
.dropdown-toggle:hover {
  color: #ffffff;
  transform: translateX(10px); 
}

/* --- Menú Desplegable de Teléfonos --- */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  list-style: none;
  padding: 0.8rem 0 0.8rem 1rem;
  margin: 0.8rem 0 0 0;
  background-color: #0a0a0a;
  border-left: 2px solid #27272a;
  border-radius: 0 8px 8px 0;
  display: none; /* Oculto por defecto */
  flex-direction: column;
  gap: 1rem;
}

.dropdown-menu.active {
  display: flex; /* Se muestra al hacer clic */
}

.dropdown-menu a {
  color: #a1a1aa !important;
  font-size: 1rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transform: none !important;
}

.dropdown-menu a span {
  font-size: 0.8rem;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropdown-menu a strong {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 600;
}

.dropdown-menu a:hover {
  color: #ffffff !important;
  transform: translateX(5px) !important;
}

/* Separador "Más" */
.informed__links .separator {
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  text-transform: none; 
  cursor: default;
}

@media (min-width: 768px) {
  .informed__container {
    grid-template-columns: 1.2fr 1fr; 
    gap: 6rem;
  }
  
  .informed__links {
    padding-left: 4rem; 
    border-left: 1px solid #1f1f1f; 
  }
}
/* ==========================================================================
   09. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-ink); padding: 2rem 0; }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer__copy { font-size: 0.8rem; color: var(--color-gray-300); }
.site-footer__links { display: flex; gap: 2rem; }
.site-footer__links a {
  font-size: 0.8rem;
  color: var(--color-gray-300);
  transition: color 0.3s ease;
}
.site-footer__links a:hover { color: var(--color-white); }

/* ==========================================================================
   10. KEYFRAMES
   ========================================================================== */
@keyframes word-in { to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes scroll-cue-drop {
  0%        { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .brand-row { min-height: 0; }
}

@media (max-width: 900px) {
  .header-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .header-nav__toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    margin-inline: auto;
    background: var(--color-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .header-nav__toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .header-nav__toggle.is-active span:nth-child(2) { opacity: 0; }
  .header-nav__toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .header-nav__menu {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0.3s;
  }
  .header-nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list__link {
    display: block;
    padding: 0.9rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-actions { margin: 1.25rem 0 0; justify-content: space-between; }

  .brand-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .brand-row--reverse .brand-row__media { order: 0; }
  .brand-row + .brand-row { margin-top: 4rem; }

  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .carousel__slide { height: clamp(340px, 48vh, 480px); }
  .section-head { flex-wrap: wrap; gap: 0.5rem; }
  .hero__scroll-cue { height: 36px; bottom: calc(var(--news-overlap) + 1.1rem); }
  .site-footer__inner { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero__word,
  .hero.is-animated .hero__lead,
  .hero.is-animated .hero__tagline,
  .hero.is-animated .hero__cta {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}