:root{
    --bg:#ffffff;--bg-alt:#f6f8ff;--card:#ffffff;--text:#3161ff;--muted:#5b6fb0;--brand:#d62828;--brand-2:#b71c1c;--accent:#d62828;--danger:#ef4444;--shadow:0 10px 30px rgba(0,0,0,.12)
    /* Ajustes rápidos de distribuidores */
    --dist-cover-w: 70; /* ANCHO portada distribuidores (relación). Cambia este valor para más ancho */
    --dist-cover-h: 30;  /* ALTO portada distribuidores (relación). */
    --dist-cols: 3;     /* Columnas de tarjetas en desktop */
    --dist-prod-cols: 2;/* Columnas de productos dentro del desplegable */
    --dist-prod-w: 4;   /* Relación ancho productos (ej. 4) */
    --dist-prod-h: 3;   /* Relación alto productos (ej. 3) */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Source Sans 3', -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    background:linear-gradient(180deg,var(--bg),var(--bg-alt));
    color:var(--text);
    line-height:1.6;  
    text-align:center;
  }
  /* Tipografías más grandes */
  body{font-size:18.5px;line-height:1.7}

  h1{font-size:clamp(2.0rem,1.5rem + 4vw,4rem)}
  .section-title{font-size:clamp(2.4rem,1.4rem + 3vw,3.4rem)}
  h2{font-size:clamp(2.0rem,1.0rem + 2.5vw,2.8rem)}
  h3{font-size:1.5rem}
  h4{font-size:1.25rem}

  h1,h2,h3,h4{
    font-family:'Merriweather', Georgia, 'Times New Roman', serif;
  }

  p,
  .section-subtitle,
  .card p,
  .feature p,
  .about-card p,
  .form-note{font-size:1.3rem}

  img{max-width:100%;display:block}
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  .section{padding:80px 0}
  .section.alt{background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}
  .map-section{position:relative;isolation:isolate}
  .map-bg{position:absolute;inset:0;z-index:-2}
  .map-bg iframe{border:0;width:100%;height:100%;filter:grayscale(.05) contrast(1.05) brightness(1)}
  .map-overlay{position:relative;z-index:1}
  .map-section::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0));z-index:-1}
  .section-title{font-family:'Merriweather',Georgia,'Times New Roman',serif;font-size:clamp(1.8rem,1.2rem+2.4vw,2.6rem);margin:0 0 10px;color:var(--brand)}
  .section-subtitle{color:var(--text);margin:0 0 30px}
  h1,h2,h3,h4{color:var(--brand);font-family:'Merriweather',Georgia,'Times New Roman',serif}
  .section-subtitle{color:var(--text);margin:0 0 30px}
  .site-header{position:sticky;top:0;z-index:50;background:#ffffff;backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.3px}
  .brand-logo{height:60px;aspect-ratio:auto;display:block}
  .nav-links{display:flex;gap:20px}
  .nav-links a{color:#0a1f5a;text-decoration:none;font-weight:600}
  .nav-links a:hover{color:var(--brand)}
  .nav-links.open{color: #ffffff;}
  .nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
  .nav-toggle span{width:24px;height:2px;background:#0a1f5a;border-radius:1px}
  .hero{position:relative;overflow:hidden}
  .gradient-bg{position:absolute;inset:-20%;background:
    radial-gradient(800px 300px at 10% 20%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(600px 250px at 90% 10%, rgba(167,139,250,.15), transparent 60%),
    radial-gradient(500px 250px at 50% 80%, rgba(52,211,153,.15), transparent 60%);
    filter:blur(20px);opacity:.7;pointer-events:none}
  .grid-2{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
  .hero-copy h1{margin:0 0 10px}
  .subhead{color:var(--text);margin:0 0 24px}
  .cta{display:flex;gap:12px}
  .badges{display:flex;gap:10px;list-style:none;padding:0;margin:22px 0 0;color:var(--text);flex-wrap:wrap}
  .hero-media .card.demo{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.01));border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .kpi{font-size:3rem;font-weight:800;letter-spacing:-.02em}
  .kpi-number{display:inline-block;min-width:2ch}
  .kpi-label{color:var(--text);margin-top:8px}
  .sparkles{position:absolute;inset:auto 0 0 auto;width:120px;height:120px;background:conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--accent), var(--brand));filter:blur(20px);opacity:.2;border-radius:50%}

  /* Responsive video */
  .video-wrap{position:relative;width:100%;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.01))}
  .video-wrap::before{content:"";display:block;padding-top:56.25%}
  .video-frame{position:absolute;inset:0;width:100%;height:100%}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
  .card{background:#fff;border:1px solid #ffffff;border-radius:14px;padding:20px;box-shadow:var(--shadow)}
  .card h3{margin:0 0 6px}
  .card p{color:var(--text);margin:0}

  /* Square videos 1:1 */
  .square-media{position:relative;width:100%;border-radius:12px;overflow:hidden;margin-bottom:12px;border:1px solid #e5e7eb;background:#fff}
  .square-media::before{content:"";display:block;aspect-ratio:1/1}
  .square-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .square-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .feature .icon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#ff6b6b);box-shadow:0 8px 24px rgba(214,40,40,.2);margin-bottom:8px}
  .about-card{background:#fff;border:1px solid #ffffff;border-radius:14px;padding:24px}
  .quote{font-size:1.1rem;margin:0 0 6px}
  .author{color:var(--text);margin:0}
  .checklist{margin:14px 0 0;padding-left:18px}
  .form{display:grid;gap:12px}
  .form label{display:grid;gap:6px;font-weight:600}
  input,textarea{background:#fff;border:1px solid #e2e8f0;color:var(--text);border-radius:10px;padding:12px 12px;outline:none;transition:border-color .2s, box-shadow .2s}
  input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(214,40,40,.15)}
  .form-note{color:var(--text);min-height:1.2em;margin:6px 0 0}
  .phone{display:inline-block;margin-top:6px;color:var(--text);text-decoration:none}
  .phone:hover{color:var(--brand)}
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid rgba(11,59,167,.15);text-decoration:none;font-weight:900;color:var(--text);background:#fff}
  .btn.primary{background:linear-gradient(135deg,var(--brand),#ff6b6b);border:0;color:#fff}
  .btn.ghost{background:transparent}
  .btn:hover{transform:translateY(-1px)}
  /* Distribuidores */
  .distrib-grid{display:grid;grid-template-columns:repeat(var(--dist-cols, 3), 1fr);gap:20px;margin-top:24px}
  .dist-card{background:#ffffff;border:1px solid #ffffff;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
  .dist-products{display:grid;grid-template-columns:repeat(var(--dist-prod-cols, 2), 1fr);gap:16px;margin-top:16px}
  .dist-products img{width:100%;aspect-ratio:var(--dist-prod-w, 4)/var(--dist-prod-h, 5);height:auto;object-fit:cover;border-radius:14px;border:1px solid #e5e7eb;background:#fff}
  /* Oculta paneles de productos cuando tengan hidden */
  .dist-products[hidden]{display:none !important}

  /* Solo distribuidores: portadas más anchas (16:9) */
  .distrib-grid .square-media::before{aspect-ratio:var(--dist-cover-w, 100)/var(--dist-cover-h, 30)}

  @media (max-width: 1100px){
    .distrib-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 820px){
    .distrib-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 560px){
    .distrib-grid{grid-template-columns:1fr}
  }
  .site-footer{padding:40px 0;border-top:1px solid #e5e7eb;color:var(--text)}
  .site-footer .credit a{color:var(--brand)}
  .reveal{opacity:0;transform:translateY(16px);will-change:transform,opacity}
  .reveal.visible{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
  @media (max-width: 920px){
    .grid-2{grid-template-columns:1fr}
    .hero-media{order:-1}
  }
  @media (max-width: 760px){
    .nav-links{position:fixed;inset:64px 16px auto 16px;background:rgba(11,59,167,.95);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;display:none;flex-direction:column}
    .nav-links.open{display:flex}
    .nav-toggle{display:flex}
    .cards{grid-template-columns:1fr}
    .feature-grid{grid-template-columns:1fr}
  }

  /* 1) Haz las tarjetas más anchas en desktop (2 columnas) */
  @media (min-width: 1100px){
    #distribuidores{ --dist-cols: 3; }
  }

  /* 2) Amplía el ancho máximo solo en esta sección */
  #distribuidores .container{max-width:1280px}

  /* 3) Haz la portada más alta (relación 4:3; antes tenías 70/30 ~ 2.33:1) */
  #distribuidores{
    --dist-cover-w: 4;
    --dist-cover-h: 3;
  }

  /* Opcional: evita que el logo se recorte */
  .distrib-grid .square-img{object-fit:contain}

  /* Centrar botones del hero */
  .cta{justify-content:center;flex-wrap:wrap}

  /* (Opcional) Centrar todo el bloque de texto+botones en su columna */
  @media (min-width: 761px){
    .hero-copy{display:flex;flex-direction:column;align-items:center}
  }

  /* Hero sin video: centrar todo el contenido */
  .hero .container.grid-2{
    grid-template-columns:1fr;
    justify-items:center;
    align-content:center;
    min-height:60vh;
  }

  .hero-copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:0 auto;
    max-width:900px;
  }

  /* Asegura botones centrados y con buen wrap */
  .cta{justify-content:center;flex-wrap:wrap;gap:12px}

  .dist-products img{
    display:block;
    width:100%;
    aspect-ratio:var(--dist-prod-w)/var(--dist-prod-h);
    height:auto;
    object-fit:contain;
    background:#fff;
    border-radius:14px;
    border:1px solid #e5e7eb;
  }

  /* Si quieres que LLENEN la caja (aunque recorte), cambia a cover: */
  /* .dist-products img{ object-fit:cover } */

  /* Opcional: en paneles específicos, forzar cover */
  .dist-products[data-fit="cover"] img{ object-fit:cover }

  /* Tiras de productos en el fondo del hero (sin estirar, sin recorte) */
  .hero{position:relative;overflow:hidden}
  .hero-stripes{position:absolute;inset:0;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:20px 0}
  .hero .gradient-bg{z-index:-1}

  /* Atenúa bordes para un look pro */
  .hero-stripes::before,
  .hero-stripes::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.0));
    z-index:1;
  }
  .hero-stripes{mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}

  /* Cada fila */
  .stripe{overflow:hidden}
  .stripe .track{
    display:flex; align-items:center; gap:26px; will-change:transform;
    animation:slide-left 35s linear infinite;
  }
  .stripe:nth-child(2) .track{animation:slide-right 42s linear infinite}
  .stripe:nth-child(3) .track{animation:slide-left 50s linear infinite}

  /* Imágenes: alto fijo responsivo, ancho auto, sin recorte */
  .stripe img{
    height:72px; width:auto; object-fit:contain; display:block;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); opacity:.95;
  }
  @media (min-width: 900px){
    .stripe img{height:96px}
  }

  /* Animaciones */
  @keyframes slide-left{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  @keyframes slide-right{
    from{transform:translateX(-50%)}
    to{transform:translateX(0)}
  }

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .stripe .track{animation:none}
  }

  /* Más rápido */
  .stripe .track{animation:slide-left 22s linear infinite}
  .stripe:nth-child(2) .track{animation:slide-right 26s linear infinite}
  .stripe:nth-child(3) .track{animation:slide-left 30s linear infinite}

  /* Hover con zoom y sombra (solo donde hay cursor) */
  .stripe{overflow:visible}
  .stripe img{
    transition:transform .25s ease, filter .25s ease;
    will-change:transform, filter;
  }
  @media (hover:hover){
    .stripe img:hover{
      transform:translateY(-4px) scale(1.15);
      filter:drop-shadow(0 10px 24px rgba(0,0,0,.25)) saturate(1.08);
    }
  }

  /* Imágenes del stripe más grandes */
  .stripe img{height:150px}
  @media (min-width:900px){
    .stripe img{height:140px}
  }

  /* Un poco más de espacio entre elementos (opcional) */
  .stripe .track{gap:32px}

  /* Más rápido y compacto en pantallas pequeñas */
  @media (max-width: 900px){
    .stripe .track{animation:slide-left 16s linear infinite; gap:24px}
    .stripe:nth-child(2) .track{animation:slide-right 18s linear infinite}
    .stripe:nth-child(3) .track{animation:slide-left 20s linear infinite}
    .stripe img{height:140px}
  }
  @media (max-width: 560px){
    .stripe .track{animation:slide-left 12s linear infinite; gap:10px}
    .stripe:nth-child(2) .track{animation:slide-right 14s linear infinite}
    .stripe:nth-child(3) .track{animation:slide-left 16s linear infinite}
    .stripe img{height:120px}
  }

  /* Fondo del hero con movimiento sutil */
  .gradient-bg{will-change:transform;animation:blobMove 18s ease-in-out infinite alternate}
  @keyframes blobMove{
    0%{transform:translate3d(-2%, -1%, 0) scale(1)}
    50%{transform:translate3d(2%, 3%, 0) scale(1.06)}
    100%{transform:translate3d(-1%, 2%, 0) scale(1.03)}
  }

  /* Subrayado animado en navegación */
  .nav-links a{position:relative}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;
    background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .25s ease
  }
  .nav-links a:hover::after{transform:scaleX(1)}

  /* Cartas con flotación sutil y hover elegante */
  .card,.dist-card{transition:transform .25s ease, box-shadow .25s ease}
  .card:hover,.dist-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.12)}
  .cards .card:not(:hover){animation:floatY 9s ease-in-out infinite}
  .distrib-grid .dist-card:not(:hover){animation:floatY 10s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  /* Apertura suave de productos */
  .dist-products:not([hidden]){animation:distFade .35s ease both}
  @keyframes distFade{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

  /* Barra de progreso de scroll */
  .scroll-progress{position:fixed;top:0;left:0;height:3px;width:var(--scroll,0%);z-index:9999;
    background:linear-gradient(90deg,var(--brand),#ff6b6b)}

  /* Avatar flotante que sigue la altura del cursor */
  .avatar-cursor{
    position:fixed;
    right:clamp(10px, 2vw, 28px);
    top:var(--avatar-y, 50vh);
    width:clamp(92px, 10vw, 150px);
    aspect-ratio:1/1;
    z-index:1200;
    pointer-events:none;
    transform:translateY(-50%);
    transition:top .18s ease-out, opacity .2s ease, transform .2s ease;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.22));
  }
  .avatar-cursor:focus-within{
    pointer-events:auto;
  }
  .avatar-cursor-video{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:999px;
  }
  .avatar-audio-toggle{
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    pointer-events:auto;
    border:0;
    border-radius:999px;
    padding:6px 10px;
    background:linear-gradient(135deg,var(--brand),#ff6b6b);
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
  .avatar-audio-toggle[aria-pressed="true"]{
    background:#0a1f5a;
  }
  @media (max-width: 760px){
    .avatar-cursor{
      right:8px;
      width:82px;
      top:auto;
      bottom:18px;
      transform:none;
    }
    .avatar-audio-toggle{
      bottom:-8px;
      padding:5px 8px;
      font-size:.7rem;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .avatar-cursor{transition:none}
  }

  /* Base reveal mejorada + variables */
  .reveal{--dur:.75s;--ease:cubic-bezier(.22,.65,.2,1);--delay:0ms;
    opacity:0;transform:translateY(18px);filter:none;
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
    transition-delay:var(--delay);
  }
  .reveal.visible{opacity:1;transform:none}

  /* Variantes */
  .reveal-left{transform:translateX(-32px)}
  .reveal-right{transform:translateX(32px)}
  .reveal-zoom{transform:scale(.94)}
  .reveal-blur{filter:blur(10px)}
  .reveal-blur.visible{filter:blur(0)}



  /* Stagger: contenedores comunes */
  .cards[data-stagger] .reveal,
  .feature-grid[data-stagger] .reveal,
  .distrib-grid[data-stagger] .reveal,
  .checklist[data-stagger] .reveal,
  .form[data-stagger] .reveal{transition-delay:var(--delay,0ms)}

  /* Aparición suave de paneles de productos ya abiertos */
  .dist-products:not([hidden]){animation:distFade .38s var(--ease) both}
  @keyframes distFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .reveal,.reveal-left,.reveal-right,.reveal-zoom,.reveal-blur{transition:none}
    .reveal{opacity:1;transform:none;filter:none}
  }

  .section-title{font-size:clamp(2.4rem,1.4rem + 3vw,3.4rem)}

  /* Títulos/branding con look redondeado */
  h1,h2,h3,h4,
  .brand,
  .nav-links a,
  .btn{
    font-family:'Rubik Rounded', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight:800;
    letter-spacing:.4px;
  }

  /* Párrafos con Rubik Rounded sin bold */
  p,
  .section-subtitle,
  .card p,
  .feature p,
  .about-card p,
  .form-note,
  .checklist li{
    font-family:'Rubik Rounded', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight:400 !important;   /* evita heredar negritas */
    letter-spacing:.2px;
  }

  /* Evita resaltado incluso si usan <b> o <strong> dentro de párrafos */
  p b, p strong{font-weight:500}

  /* Cuerpo se queda formal con Source Sans 3 */
  body{
    font-family:'Source Sans 3', -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  }

  /* === Animaciones limpias (sin blur) para títulos, textos e imágenes === */

  /* TÍTULOS: entrada vertical + ajuste de tracking */
  .reveal.reveal-title{
    opacity:0;
    transform:translateY(14px);
    letter-spacing:.02em;
    transition:transform .6s cubic-bezier(.22,.65,.2,1),
              letter-spacing .6s cubic-bezier(.22,.65,.2,1),
              opacity .6s cubic-bezier(.22,.65,.2,1);
  }
  .reveal.reveal-title.visible{
    opacity:1; transform:none; letter-spacing:0;
  }

  /* Subrayado tipo marca (estilo Jumex) */
  .heading-underline{
    position:relative; display:inline-block; padding-bottom:.22em;
    background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;
    transition:background-size .6s cubic-bezier(.22,.65,.2,1);
  }
  .heading-underline.visible{ background-size:100% 3px }

  /* PÁRRAFOS: fade-up suave */
  .reveal.reveal-text{
    opacity:0; transform:translateY(16px);
    transition:transform .55s cubic-bezier(.22,.65,.2,1),
              opacity .55s cubic-bezier(.22,.65,.2,1);
  }
  .reveal.reveal-text.visible{ opacity:1; transform:none }

  /* IMÁGENES/VIDEOS: scale-in sutil + lift */
  .reveal.reveal-media{
    opacity:0; transform:translateY(12px) scale(.965);
    transition:transform .7s cubic-bezier(.22,.65,.2,1),
              opacity .7s cubic-bezier(.22,.65,.2,1);
    will-change:transform,opacity;
  }
  .reveal.reveal-media.visible{ opacity:1; transform:none }

  /* Hover ligero tipo catálogo */
  @media (hover:hover){
    .square-media:hover .reveal-media{ transform:scale(1.02) }
  }

  /* Si pegaste una versión anterior con blur (title-spark/split), neutralizamos el blur */
  .title-spark{ filter:none !important }

  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .reveal.reveal-title,
    .reveal.reveal-text,
    .reveal.reveal-media{
      transition:none !important; transform:none !important; opacity:1 !important;
    }
  }

  /* === Secciones con fondo alternado + separadores tipo ola (estilo Jumex) === */
  :root{
    --jumex-navy:#0a1f5a;    /* oscuro */
    --jumex-blue:#1e40af;    /* indigo */
    --jumex-sky:#2563eb;     /* azul vivo */
    --section-dark:#0a1f5a;  /* oscuro principal */
  }

  /* Activa “ola” en secciones marcadas por JS */
  .section.wave{ position:relative; background:var(--wave-bg, var(--section-light)); color:var(--wave-fg, #0f172a); overflow:visible }
  .section.wave.is-dark{ --wave-bg:var(--section-dark); --wave-fg:#ffffff }

  /* Ajusta tipografía en oscuro para contraste */
  .section.wave.is-dark h1,.section.wave.is-dark h2,.section.wave.is-dark h3,.section.wave.is-dark h4,
  .section.wave.is-dark p,.section.wave.is-dark .section-subtitle{ color:#ffffff }
  .section.wave.is-dark .btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff }
  .section.wave.is-dark .btn.primary{ background:linear-gradient(135deg,var(--brand),var(--brand)); color:#fff }

  /* Olas (inserta JS un <div class="wave-edge wave-top|wave-bottom"><svg>...) */
  .wave-edge{ position:absolute; left:0; width:200%; height:96px; pointer-events:none; z-index:1 }
  .wave-top{ top:-95px }
  .wave-bottom{ bottom:-95px }

  /* Desplazamiento horizontal de la ola vinculado al scroll */
  .wave-top{ transform:translateX(calc(var(--wave-shift, 0%) * -0.4)) }
  .wave-bottom{ transform:translateX(calc(var(--wave-shift, 0%) * -0.9)) }
  .wave-edge svg{ width:100%; height:100%; display:block }

  /* Transición suave cuando cambias de tema de sección (por si se reordena) */
  .section.wave{ transition:background-color .35s ease, color .35s ease }

  /* Opcional: leve degradado en oscuro para emular bloques de marca */
  .section.wave.is-dark{
    background:
      radial-gradient(1200px 400px at 85% 0%, rgba(37,99,235,.18), transparent 60%),
      radial-gradient(900px 380px at 10% 100%, rgba(34,211,238,.12), transparent 60%),
      var(--wave-bg);
  }

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce){
    .wave-top,.wave-bottom{ transform:none !important }
  }

  /* Correcciones de contraste en secciones oscuras (Distribuidores, Sobre) */

  /* Asegura que el contenido quede por encima de la ola */
  .section.wave .container{ position:relative; z-index:2 }
  .wave-edge{ z-index:1 }

  /* No heredar blanco dentro de superficies blancas */
  .section.wave.is-dark :is(.card,.dist-card,.about-card){
    background:#fff;
    color:var(--text);
    border-color:#ffffff;
  }

  /* Textos dentro de tarjetas blancas: restablecer color legible */
  .section.wave.is-dark :is(.card,.dist-card,.about-card) :is(h3,h4,p,li,.section-subtitle,.author,.quote){
    color:var(--text);
  }

  /* Botones dentro de tarjetas blancas: evitar blanco sobre blanco */
  .section.wave.is-dark :is(.card,.dist-card,.about-card) .btn{
    background:#fff;
    color:var(--text);
    border-color:rgba(11,59,167,.15);
  }
  .section.wave.is-dark :is(.card,.dist-card,.about-card) .btn.ghost{
    background:transparent;
    color:var(--text);
  }
  .section.wave.is-dark :is(.card,.dist-card,.about-card) .btn.primary{
    background:linear-gradient(135deg,var(--brand),#ff6b6b);
    color:#fff;
    border:0;
  }

  /* Hero y footer en azul con olas */
  .hero.section.wave{ background:var(--section-dark) }
  .site-footer.wave{
    position:relative; overflow:visible;
    background:var(--section-dark); color:#fff; border-top:0;
  }
  .site-footer.wave .container{ position:relative; z-index:2 }
  .site-footer.wave .wave-edge{ position:absolute; left:0; width:200%; height:96px; pointer-events:none; z-index:1 }
  .site-footer.wave .wave-top{ top:-95px; transform:translateX(calc(var(--wave-shift, 0%) * -0.4)) }
  .site-footer.wave .wave-bottom{ display:none } /* en footer solo ola superior */

  /* Asegura contraste de texto/botones en superficies blancas dentro de secciones azules */
  :is(.hero.section.wave,.site-footer.wave).is-dark :is(.card,.dist-card,.about-card){
    background:#fff; color:var(--text); border-color:#ffffff;
  }
  :is(.hero.section.wave,.site-footer.wave).is-dark :is(.card,.dist-card,.about-card) :is(h3,h4,p,li,.section-subtitle,.author,.quote){ color:var(--text) }
  :is(.hero.section.wave,.site-footer.wave).is-dark :is(.card,.dist-card,.about-card) .btn{ background:#fff; color:var(--text); border-color:rgba(11,59,167,.15) }
  :is(.hero.section.wave,.site-footer.wave).is-dark :is(.card,.dist-card,.about-card) .btn.ghost{ background:transparent; color:var(--text) }
  :is(.hero.section.wave,.site-footer.wave).is-dark :is(.card,.dist-card,.about-card) .btn.primary{ background:linear-gradient(135deg,var(--brand),#ff6b6b); color:#fff; border:0 }

  /* 1) Ventajas: párrafos en #3161ff */
  #ventajas .feature p{ color:#3161ff }

  /* 3) Contacto: quita la línea blanca (seam) */
  #contacto.map-section::after{ display:none }          /* elimina overlay que genera el borde */
  #contacto .wave-edge svg{ transform:translateY(1px) } /* superpone 1px y evita el halo */



  /* Hero más ancho y texto en una sola línea (solo desktop) */
  .hero .container{ max-width:1280px }
  .hero-copy{ max-width:min(1200px, 95vw) }

  .hero-copy h1{
    white-space:nowrap;
    font-size:clamp(2.2rem, 1.4rem + 4.8vw, 2.6rem);
    letter-spacing:-0.01em;
    line-height:1.1;
  }

  .hero-copy .subhead{
    white-space:nowrap;
    font-size:clamp(1rem, 0.9rem + 1.1vw, 1.12rem);
    line-height:1.45;
  }

  /* En móviles permite que rompa línea para no desbordar */
  @media (max-width: 900px){
    .hero-copy h1,
    .hero-copy .subhead{ white-space:normal }
  }

  /* Servicios y Ventajas: párrafos más pequeños y justificados */
  #servicios .section-subtitle,
  #servicios .card p,
  #ventajas .feature p{
    font-size:clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
    line-height:1.6;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
  }

  /* Fix desbordamiento horizontal (hero + olas) */
  html, body { overflow-x: hidden; }

  .section.wave{
    overflow-y: visible;
    overflow-x: clip;   /* usa hidden si prefieres compatibilidad total */
  }

  /* Las tiras del hero no deben sacar scroll horizontal */
  .hero .stripe{ overflow: clip; }  /* o hidden si te da igual el recorte de la sombra */

  /* Evita que las demás tarjetas se estiren cuando otra se expande */
  .distrib-grid{ align-items: start; }   /* o: .dist-card{ align-self: start; } */

  /* Hero más compacto en móviles */
  @media (max-width: 900px){
    .hero-copy h1{
      font-size:clamp(1.6rem, 4.2vw, 2rem);
      line-height:1.15;
    }
    .hero-copy .subhead{
      font-size:clamp(0.95rem, 1.2vw + 0.8rem, 1.05rem);
      line-height:1.5;
    }
  }

  /* Aún más pequeño en pantallas muy chicas */
  @media (max-width: 560px){
    .hero-copy h1{ font-size:1.8rem; line-height:1.15; }
    .hero-copy .subhead{ font-size:0.92rem; }
    .cta .btn{ padding:8px 12px; font-size:.95rem; }
  }

  /* Sobre nosotros: una sola columna, título centrado y video responsivo */
  #sobre .grid-2{ grid-template-columns:1fr; justify-items:center }
  #sobre .section-title{ text-align:center; margin-bottom:16px }
  #sobre .video-wrap{ max-width:min(900px,95vw) }

  /* Sobre nosotros: 16:9 ya lo da .video-wrap::before (56.25%).
    Forzamos ancho completo del contenedor */
  #sobre .video-wrap{
    max-width:none;
    width:100%;
  }

  /* OPCIONAL: si quieres ancho de ventana (de borde a borde), 
    añade la clase "full-bleed" al .video-wrap */
  #sobre .video-wrap.full-bleed{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0;
    box-shadow:none;
    border:0;
  }

  /* 16:9 + ancho de ventana (borde a borde) solo en #sobre */
  #sobre .video-wrap.full-bleed{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0;
    box-shadow:none;
    border:0;
  }

  /* Sobre nosotros: mobile-first */
  #sobre .video-frame{ object-fit:cover } /* llena el 16:9 sin bandas negras */

  @media (max-width: 900px){
    #sobre.section{ padding:48px 0 }
    #sobre .section-title{
      font-size:clamp(1.4rem, 4.5vw, 2rem);
      margin-bottom:12px;
      text-align:center;
    }
    /* video sin bordes ni sombra en móvil */
    #sobre .video-wrap{
      border:0;
      box-shadow:none;
      border-radius:0;
    }
    /* borde a borde en móvil */
    #sobre .video-wrap.full-bleed{
      width:100vw;
      max-width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
    }
  }

  @media (max-width: 560px){
    #sobre.section{ padding:36px 0 }
    #sobre .section-title{ font-size:1.25rem }
    /* asegura 16:9 compacto */
    #sobre .video-wrap::before{ padding-top:56.25% }
  }

  /* Contacto: tipografías más pequeñas */
  #contacto .section-title{ font-size:clamp(1.35rem, 1rem + 2vw, 1.75rem) }
  #contacto .map-overlay .addr{ font-size:clamp(.95rem, .85rem + .5vw, 1.05rem); margin:.25rem 0 }
  #contacto .map-overlay .map-link{
    display:inline-block; margin-top:.25rem; font-size:clamp(.92rem, .8rem + .5vw, 1rem);
    color:var(--brand); text-decoration:none; font-weight:700;
  }
  #contacto .map-overlay .map-link:hover{ text-decoration:underline }

  /* Pin rojo centrado sobre el iframe */
  .map-bg{ position:absolute; inset:0; z-index:-2 }
  .map-pin{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -100%); /* la punta del pin queda en el centro */
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
    pointer-events:none; z-index:1;
  }

  /* Ajustes móviles */
  @media (max-width: 760px){
    #contacto .section-title{ font-size:1.25rem }
    #contacto .map-overlay .addr, #contacto .map-overlay .map-link{ font-size:.95rem }
  }

  /* Header sticky + auto-ocultado */
  .site-header{
    position:sticky; top:0; z-index:100;
    transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .site-header.hide{ transform:translateY(-100%) }          /* se oculta al bajar */
  .site-header.scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.12) }  /* realce al hacer scroll */

  /* Header fijo con auto-ocultado y compensación */
  :root{ --header-h: 64px; }

  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    transform:translateY(0);
    transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .site-header.hide{ transform:translateY(-100%) }
  .site-header.scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.12) }

  /* deja espacio al body para que no salte el layout */
  body{ padding-top:var(--header-h,64px) }

  /* los anclajes no quedarán tapados por el header */
  .section{ scroll-margin-top:calc(var(--header-h,64px) + 8px) }

  /* Contacto: grid mapa + formulario */
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px;
  align-items:start;
}

.contact-map{ position:relative }
.contact-map iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:14px;
  box-shadow:var(--shadow);
  background:#fff;
}

/* Pin rojo centrado opcional */
.contact-map .map-pin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -100%);
  pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* Responsive: una sola columna en móvil */
@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr }
}

#contacto .addr{
  font-size:clamp(.95rem, .85rem + .5vw, 1.05rem);
  color:var(--text);
  margin:6px 0 18px;
}

/* Contacto: igualar tamaños a las otras secciones */
#contacto .section-title{
  font-size:clamp(2.4rem, 1.4rem + 3vw, 3.4rem);
  margin:0 0 10px;
}

#contacto .addr{
  font-size:1.3rem;        /* mismo tamaño de párrafos generales */
  color:var(--text);
  margin:0 0 30px;         /* mismo espaciamiento que .section-subtitle */
}

/* Palabras del hero: estilo + animación */
/* Hero: palabras de fondo con margen superior y mejor legibilidad */
.hero{ position:relative }
.hero .container{ position:relative; z-index:2 }

.hero-words{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; justify-content:center; align-items:flex-start;
  padding-top:clamp(200px, 25vh, 240px);   /* mueve las palabras hacia arriba */
}

.hero-words .rotating{
  font-size:clamp(1.8rem, 9vw, 4.1rem);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255, 255, 255, 0.795);            /* tenue pero visible */
  text-shadow:0 6px 20px rgba(0,0,0,.25); /* mejora contraste */
  opacity:0; will-change:opacity, transform;
  animation:heroWord 3.6s ease-in-out infinite;
  white-space:nowrap; user-select:none;
}

@keyframes heroWord{
  0%   { opacity:0; transform:translateY(16px) scale(.985) }
  18%  { opacity:1; transform:none }
  82%  { opacity:1; transform:none }
  100% { opacity:0; transform:translateY(-16px) scale(.985) }
}

/* Móvil: un poco más arriba y texto más pequeño */
@media (max-width: 900px){
  .hero-words{ padding-top:clamp(20px, 5vh, 100px) }
  .hero-words .rotating{ font-size:clamp(1.8rem, 7.5vw, 2.8rem) }
}

/* Menú móvil: fondo blanco + enlaces en oscuro */
@media (max-width: 760px){
  .nav-links{
    background:#fff !important;                 /* antes: rgba(11,59,167,.95) */
    border:1px solid rgba(10,31,90,.12);
    box-shadow:0 14px 40px rgba(0,0,0,.12);
  }
  .nav-links.open a{ color:#0a1f5a !important; } /* contrasta con fondo blanco */
  .nav-links.open a:hover{ color:var(--brand); }
}

/* Principios */
#principios .row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:center;
  margin-top:28px;
}
#principios .row.reverse{ grid-template-columns:1fr 1.1fr }
#principios .row.reverse .texto{ order:2 }
#principios .row.reverse .media{ order:1 }

#principios .principio-title{
  margin:0 0 10px;
  color:var(--brand);
  font-size:clamp(1.4rem, 1rem + 1.5vw, 2rem);
}
#principios .texto p{ text-align:justify; hyphens:auto }

#principios .unico{
  max-width:900px;
  margin:34px auto 0;
}
#principios .lista-campo{
  list-style:disc inside;
  padding:0; margin:12px 0 0;
  columns:2; column-gap:28px;
}
@media (max-width: 920px){
  #principios .row{ grid-template-columns:1fr }
  #principios .row.reverse .texto,
  #principios .row.reverse .media{ order:initial }
  #principios .lista-campo{ columns:1 }
}

/* Hero: video de fondo detrás del degradado y las palabras */
.hero{ position:relative; overflow:hidden }
.hero-video-bg{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.hero-video-bg .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.85) contrast(1.05) saturate(1.05);
}
.hero .gradient-bg{ z-index:-1 }    /* queda sobre el video de fondo */
.hero-words{ z-index:1 }
.hero .container{ position:relative; z-index:2 }



/* Principios: mejora responsive de “Visión” y espaciados */
#principios .row{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; }
#principios .row.reverse{ grid-template-columns:1fr 1.1fr }
#principios .principio-title{ margin:0 0 10px; font-size:clamp(1.2rem, .9rem + 1.5vw, 1.6rem); }
#principios .texto p{ line-height:1.65; text-align:justify; hyphens:auto }

/* Mobile: apilar con el video primero y texto después */
@media (max-width: 900px){
  #principios .row,
  #principios .row.reverse{ grid-template-columns:1fr }
  #principios .row .media{ order:1 }
  #principios .row .texto{ order:2 }
  #principios .row .media .video-wrap{ margin-bottom:12px }
  #principios .principio-title{ font-size:1.2rem; margin-bottom:8px }
  #principios .texto p{ font-size:1rem }
}

/* Hero: orden correcto de capas para ver el video */
.hero{ position:relative; overflow:hidden }
.hero-video-bg{ position:absolute; inset:0; z-index:0 !important; pointer-events:none; }
.hero-video-bg .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.85) contrast(1.05) saturate(1.05);
}
.hero .gradient-bg{ position:absolute; inset:-20%; z-index:1 !important; }
.hero-words{ z-index:2 !important; }
.hero .container{ position:relative; z-index:3 !important; }

/* Hero: tira de productos visible sin encimar texto */
.hero .stripe{
  position: relative;         /* vuelve al flujo normal */
  z-index: 2;                 /* sobre el degradado (1) y debajo del texto principal (3) */
  pointer-events: none;       /* no bloquea clics */
}

/* Las palabras del fondo quedan detrás de los productos */
.hero-words{ z-index: 2 !important; }

/* Tamaño responsivo: evita que la franja sea muy alta en móvil */
.hero .stripe img{
  height: clamp(100px, 8.1vw, 100px) !important;
}

/* Opcional: compactar un poco la separación entre productos */
.hero .stripe .track{ gap: 28px !important; }

/* Principios: igualar "Campo de Acción" con Misión/Visión */
#principios .unico p{
  line-height:1.65;
  text-align:justify;
  hyphens:auto;
}

@media (max-width: 900px){
  #principios .unico p{ font-size:1rem; }
  /* opcional, pero ya lo cubre tu regla global */
  /* #principios .unico .principio-title{ font-size:1.2rem; } */
}

/* Hero: subir "hero-words" y evitar que invada el título */
:root{ --hero-words-top: clamp(24px, 7vh, 96px); }  /* ajusta este valor a gusto */

.hero-words{
  padding-top: var(--hero-words-top) !important;   /* antes: clamp(200px,25vh,240px) */
  -webkit-mask-image: linear-gradient(180deg,#000 0 52%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 0 52%,transparent 100%); /* desvanece abajo */
}

.hero-words .rotating{
  font-size: clamp(1.4rem, 6.8vw, 3.1rem) !important;  /* más discreto */
  opacity: .18 !important;
  letter-spacing: .12em;
}

/* Móvil: aún más arriba y compacto */
@media (max-width: 900px){
  :root{ --hero-words-top: clamp(8px, 5.5vh, 40px); }
  .hero-words .rotating{ font-size: clamp(1.1rem, 5.8vw, 2.2rem) !important; opacity:.16 !important; }
}

/* Hero: palabras más blancas y legibles */
.hero-words{
  -webkit-mask-image: linear-gradient(180deg,#000 0 70%,transparent 100%) !important;
          mask-image: linear-gradient(180deg,#000 0 70%,transparent 100%) !important; /* se desvanecen más abajo */
}

.hero-words .rotating{
  color:#fff !important;
  opacity:.92 !important;                   /* antes ~.18 */
  text-shadow:
    0 6px 26px rgba(0,0,0,.55),
    0 2px 10px rgba(0,0,0,.35),
    0 0 2px rgba(0,0,0,.55);                 /* mejor contraste sobre el video */
}

/* Opcional: en móvil, un poco menos intenso */
@media (max-width:900px){
  .hero-words .rotating{ opacity:.88 !important; }
}