/* SkyHeads · hoja de estilos compartida por todas las páginas.
   Parte 1: CSS original de index.html (one page), sin cambios.
   Parte 2 (al final): componentes de la arquitectura multipágina. */
  :root {
    /* ===== FORMAS (radios), 12 oct 2026 =====================================
       Cinco medidas para todo el sitio. Ver claude/design-system.md, sección Formas.
       --r-xs   6px  etiquetas dentro de imágenes, insignias diminutas
       --r-sm  10px  botones, campos, íconos en cuadro, miniaturas
       --r-md  16px  tarjetas, videos e imágenes, franjas, barras de filtros, menús
       --r-lg  24px  paneles grandes: cotizador, bandas de llamada, bento
       --r-full     pastillas: chips, etiquetas, interruptores, barras de avance
       Los círculos (íconos redondos, avatares, puntos) usan 50%. */
    --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;
    /* ===== SISTEMA DE COLOR SkyHeads =====================================
       Principal #3965FA · Secundario suave #E9EBFF · Fondo oscuro #202020
       --accent      : rellenos solidos (botones, chips activos, barras)
       --accent-text : el MISMO azul aclarado para TEXTO/iconos/trazos sobre
                       oscuro. #3965FA sobre #202020 da 3.4:1 y reprueba AA
                       para texto; #8FA9FF da 7.8:1, casi igual al dorado
                       anterior (9.1:1). No es otro color de marca, es el
                       mismo tono con luminosidad usable.
       --on-accent   : texto encima de un relleno --accent (blanco: 4.8:1).
       Neutros en gris puro: el azul es frio y los grises calidos peleaban.
    ===================================================================== */
    --bg: #202020;
    --surface: #2A2A2A;
    --surface-hover: #333333;
    --border: #3A3A3A;
    --accent: #3965FA;
    --accent-hover: #5478FF;
    --accent-text: #8FA9FF;
    --accent-soft: rgba(57, 101, 250, 0.16);
    --accent-soft-solid: #E9EBFF;
    --on-accent: #FFFFFF;
    --accent-glow: rgba(57, 101, 250, 0.22);
    --text: #EDEDED;
    --text-muted: #9A9A9A;
    --success: #5FA97A;
    --white: #FFFFFF;
    --warning: #E0A64A;
    --error: #E06A6A;
    --header-bg: rgba(32, 32, 32, 0.97);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --gradient-text-from: #8FA9FF;
    --gradient-text-to: #5478FF;

    /* Tipografia original del sitio - NO TOCAR. Se perdio al reemplazar el
       bloque :root en v4 y provoco que 78 reglas cayeran a la fuente por
       defecto del navegador (menu, hero, botones, textos chicos). */
    --font-display: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
    --font-label: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --font-logo: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-accent: var(--font-heading);
    --font-body: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale — 1.25 modular ratio, base 1rem */
    --text-xs:   0.75rem;    /* 12px — captions, badges */
    --text-sm:   0.875rem;   /* 14px — secondary copy, meta */
    --text-base: 1rem;       /* 16px — body */
    --text-md:   1.125rem;   /* 18px — hero sub, large body */
    --text-lg:   1.25rem;    /* 20px — callouts */
    --text-xl:   1.5625rem;  /* 25px — sub-headings */
    --text-2xl:  clamp(1.75rem, 2.5vw, 2rem);       /* section titles */
    --text-3xl:  clamp(2rem, 3vw, 2.5rem);           /* configurador h2 */
    --text-4xl:  clamp(2.25rem, 4.5vw, 3.5rem);      /* hero h1 */

    /* Line heights */
    --lh-tight:  1.1;
    --lh-snug:   1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.55;
  }
  [data-theme="light"] {
    /* Modo claro: neutros frios, mismo azul de marca */
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --surface-hover: #EFF1F6;
    --border: #DFE3EA;
    --accent: #3965FA;
    --accent-hover: #2B4FD1;
    --accent-text: #2B4FD1;
    --accent-soft: #E9EBFF;
    --accent-soft-solid: #E9EBFF;
    --on-accent: #FFFFFF;
    --accent-glow: rgba(57, 101, 250, 0.15);
    --text: #17191D;
    --text-muted: #5F6570;
    --success: #3F8A5C;
    --white: #FFFFFF;
    --warning: #B0741A;
    --error: #C24141;
    --header-bg: rgba(247, 248, 250, 0.97);
    --card-shadow: 0 4px 14px rgba(23, 25, 29, 0.07);
    --gradient-text-from: #3965FA;
    --gradient-text-to: #2B4FD1;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: var(--lh-normal);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    overflow-x: hidden; /* protege contra scroll horizontal por backdrops full-bleed (100vw) */
  }

  /* ========== HEADER ========== */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    padding: 0 32px; height: 64px;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .site-logo { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); text-decoration: none; }
  .site-logo span { color: var(--text); }
  .header-nav { display: flex; align-items: center; gap: 32px; }
  .header-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; transition: color 0.2s; }
  .header-nav a:hover { color: var(--text); }
  .header-cta {
    background: var(--accent);
    color: var(--on-accent) !important; /* negro sólido — contraste sobre dorado */
    border: none; padding: 11px 26px;
    border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 700; cursor: pointer; letter-spacing: 0.3px;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s, color 0.25s;
    text-decoration: none; display: inline-block;
    box-shadow: 0 4px 18px rgba(57, 101, 250,0.35);
    position: relative;
    animation: ctaPulseGlow 3s ease-in-out infinite;
    text-shadow: none;
  }
  @keyframes ctaPulseGlow {
    0%, 100% { box-shadow: 0 4px 18px rgba(57, 101, 250,0.35); }
    50% { box-shadow: 0 6px 28px rgba(57, 101, 250,0.5), 0 0 0 4px rgba(57, 101, 250,0.12); }
  }
  /* Hover: el fondo se oscurece (especialmente en light mode), así que el texto pasa
     a blanco puro para mantener contraste AA. El glow es decorativo, NO afecta legibilidad. */
  .header-cta:hover {
    background: var(--accent-hover);
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(57, 101, 250,0.45);
    animation: none;
  }
  .header-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* ========== MOBILE NAV (hamburguesa + drawer) ========== */
  .mobile-nav-toggle {
    display: none; /* visible solo en móvil via @media */
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    width: 40px; height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text);
    transition: border-color 0.2s, background 0.2s;
  }
  .mobile-nav-toggle:hover { border-color: var(--accent); }
  .mobile-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .mobile-nav-toggle .mnt-bars {
    position: relative;
    width: 18px; height: 12px;
    display: inline-block;
  }
  .mobile-nav-toggle .mnt-bars::before,
  .mobile-nav-toggle .mnt-bars::after,
  .mobile-nav-toggle .mnt-bars span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.3s var(--ease-out-quint), opacity 0.2s, top 0.3s var(--ease-out-quint);
  }
  .mobile-nav-toggle .mnt-bars::before { top: 0; }
  .mobile-nav-toggle .mnt-bars span { top: 5px; }
  .mobile-nav-toggle .mnt-bars::after { top: 10px; }
  /* Estado abierto = X */
  body.mobile-nav-open .mobile-nav-toggle .mnt-bars::before { top: 5px; transform: rotate(45deg); }
  body.mobile-nav-open .mobile-nav-toggle .mnt-bars::after { top: 5px; transform: rotate(-45deg); }
  body.mobile-nav-open .mobile-nav-toggle .mnt-bars span { opacity: 0; }

  /* Drawer fullscreen */
  .mobile-nav-panel {
    position: fixed;
    top: 64px; /* debajo del header */
    left: 0; right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 199;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s var(--ease-out-quint), opacity 0.3s ease;
    overflow-y: auto;
    padding: 32px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  body.mobile-nav-open .mobile-nav-panel {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-nav-open { overflow: hidden; }
  .mobile-nav-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 6px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s ease, transform 0.25s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
  }
  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus-visible {
    color: var(--accent-text);
    transform: translateX(12px);
  }
  .mobile-nav-panel a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .mobile-nav-panel a::after {
    content: "→";
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-muted);
    transition: color 0.2s, transform 0.25s;
  }
  .mobile-nav-panel a:hover::after { color: var(--accent-text); transform: translateX(4px); }
  .mobile-nav-cta-row {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mobile-nav-cta-row .header-cta {
    width: 100%;
    text-align: center;
    padding: 16px 26px;
    font-size: var(--text-base);
  }

  /* ========== LANG TOGGLE ========== */
  .lang-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .lang-toggle:hover { border-color: var(--accent); color: var(--text); }
  .lang-toggle .lang-flag { font-size: 14px; line-height: 1; }

  /* ========== SECTIONS (general) — editorial rhythm ========== */
  .section { padding: clamp(56px, 10vh, 128px) 48px; max-width: 1280px; margin: 0 auto; }
  .section-label { font-family: var(--font-label); font-size: var(--text-xs); color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: clamp(8px, 1.6vh, 18px); text-align: center; }
  .section-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; text-align: center; letter-spacing: -0.015em; line-height: 1.12; margin-bottom: clamp(10px, 1.8vh, 20px); text-wrap: balance; }
  .section-subtitle { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-muted); text-align: center; max-width: 58ch; margin: 0 auto clamp(26px, 4.5vh, 64px); line-height: var(--lh-relaxed); text-wrap: balance; }
  .section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
    max-width: 1280px;
    margin: clamp(28px, 4.5vh, 64px) auto 0;
    border: none;
  }

  /* ========== S3. PORTAFOLIO · carrusel de piezas ==========
     Alto fijo por tarjeta, ancho segun aspect-ratio: conviven 9:16 y 16:9
     sin recortes ni deformacion. Solo la tarjeta central monta un <video>;
     las demas son un <img> poster (~30 KB), asi la pagina no descarga los
     58 MB de video al entrar. */
  .pf-section{
    min-height:100dvh; max-width:1500px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    scroll-margin-top:var(--header-h,64px);
    gap:clamp(22px,3.2vh,46px);
    padding:clamp(56px,10vh,128px) 20px clamp(40px,5.5vh,72px);
    overflow:hidden;
  }
  .pf-head{flex:0 0 auto; text-align:center; max-width:760px;}
  .pf-head .section-title{margin-bottom:6px;}
  .pf-head .section-subtitle{margin-bottom:0; font-size:15px; max-width:none; white-space:nowrap;}

  .pf-stage{
    position:relative; width:100%; flex:1 1 auto; min-height:min(58vh, 560px);
    display:flex; align-items:center;
  }
  .pf-viewport{position:absolute; inset:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);}
  .pf-track{
    position:absolute; top:0; left:0; height:100%;
    display:flex; align-items:center; gap:clamp(8px,1.2vw,18px);
    will-change:transform;
    transition:transform .62s cubic-bezier(.22,.61,.36,1);
  }
  .pf-card{
    position:relative; flex:0 0 auto; height:100%;
    aspect-ratio:var(--ar,9/16);
    border-radius: var(--r-md); overflow:hidden; padding:0; cursor:pointer;
    background:var(--surface); border:1px solid var(--border);
    -webkit-appearance:none; appearance:none;
    transform:scale(.82); opacity:.45; filter:saturate(.75);
    transition:transform .62s cubic-bezier(.22,.61,.36,1), opacity .4s ease,
               filter .4s ease, border-color .3s ease, box-shadow .4s ease;
  }
  .pf-card:hover{opacity:.75; filter:saturate(.95);}
  .pf-card:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px;}
  .pf-card.is-active{
    transform:scale(1); opacity:1; filter:none; cursor:default;
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), 0 18px 46px rgba(0,0,0,.45), 0 0 56px var(--accent-glow);
  }
  .pf-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .pf-card video.pf-media{background:#000;}
  .pf-cap{
    position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
    font-family: var(--font-label); font-size:11px; font-weight: 500;
    letter-spacing:.07em; text-transform:uppercase; color:#fff; text-align:left;
    background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
    opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:2;
  }
  .pf-card.is-active .pf-cap{opacity:1;}

  .pf-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:42px; height:42px; border-radius: 50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; line-height:1; padding-bottom:3px;
    background:var(--surface); color:var(--text);
    border:1px solid var(--border);
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .pf-nav:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:translateY(-50%) scale(1.08);}
  .pf-nav:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px;}
  .pf-prev{left:4px;} .pf-next{right:4px;}

  .pf-bar{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    gap:clamp(22px,3vw,44px); flex-wrap:wrap;
    margin-top:clamp(14px,2vh,26px);
  }
  .pf-meta{display:inline-flex; align-items:center; gap:10px; min-width:0;}
  .pf-name{font-family: var(--font-label); font-size:12px; font-weight: 500;
    letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text);}
  .pf-sep{width:3px; height:3px; border-radius: 50%; background:var(--text-muted); opacity:.6;}
  .pf-dur{font-family:var(--font-body); font-size:12px; color:var(--text-muted); font-feature-settings:'tnum';}

  .pf-controls{display:inline-flex; gap:8px;}
  .pf-ctrl{
    width:38px; height:38px; border-radius: 50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--border); color:var(--text);
    transition:background .25s ease, border-color .25s ease, transform .2s ease;
  }
  .pf-ctrl:hover{background:var(--accent); border-color:var(--accent); transform:scale(1.07);}
  .pf-ctrl:hover svg [fill="currentColor"]{fill:var(--on-accent);}
  .pf-ctrl:hover svg [stroke="currentColor"]{stroke:var(--on-accent);}
  .pf-ctrl:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px;}

  .pf-dots{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center;}
  .pf-dot{
    width:7px; height:7px; border-radius: 50%; padding:0; cursor:pointer;
    background:var(--border); border:none;
    transition:background .3s ease, width .3s ease;
  }
  .pf-dot:hover{background:var(--text-muted);}
  .pf-dot.is-on{background:var(--accent); width:20px; border-radius: 4px;}
  .pf-dot:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px;}

  .pf-cta{flex:0 0 auto; margin-top:clamp(16px,2.4vh,32px);}

  @media (max-width:900px){
    .pf-section{gap:clamp(10px,1.6vh,18px); padding-left:12px; padding-right:12px;}
    .pf-head .section-subtitle{display:none;}
    .pf-nav{width:36px; height:36px; font-size:19px;}
    .pf-prev{left:0;} .pf-next{right:0;}
    .pf-bar{gap:12px;}
    .pf-dots{order:3; width:100%;}
  }
  @media (prefers-reduced-motion:reduce){
    .pf-track,.pf-card{transition:none;}
  }

  /* ========== S1. HERO ========== */
  .hero {
    padding: clamp(96px, 13vh, 150px) 48px clamp(44px, 7vh, 90px);
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    text-align: left;
    position: relative;
    overflow: visible; /* dejamos que el backdrop full-bleed sangre fuera del max-width */
    max-width: 1280px; margin: 0 auto;
  }
  .hero-content { width: 100%; max-width: 1000px; position: relative; z-index: 2; }
  /* Backdrop full-bleed para el hero — rompe el max-width usando 100vw.
     Aloja los glows y mantiene overflow:hidden interno para que no haya scroll horizontal. */
  .hero-backdrop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-backdrop::before {
    content: '';
    position: absolute; top: -10%; left: 4%;
    width: 860px; height: 640px;
    background: radial-gradient(ellipse, rgba(57, 101, 250,0.13) 0%, rgba(57, 101, 250,0.04) 45%, transparent 72%);
    pointer-events: none;
    filter: blur(8px);
  }
  .hero-backdrop::after {
    content: '';
    position: absolute; bottom: -14%; right: -6%;
    width: 720px; height: 560px;
    background: radial-gradient(ellipse, rgba(122,184,224,0.08) 0%, transparent 68%);
    pointer-events: none;
    filter: blur(12px);
    animation: heroGlowDrift 16s ease-in-out infinite alternate;
  }
  @keyframes heroGlowDrift {
    0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.8; }
    100% { transform: translate3d(-4%, 3%, 0) scale(1.08); opacity: 1; }
  }
  .hero h1 {
    font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 600; letter-spacing: -0.025em; line-height: var(--lh-tight);
    max-width: 720px; margin: 0 auto 20px; text-wrap: balance;
  }
  .hero h1 .gradient-text {
    color: var(--accent-text);
    font-style: normal;
  }
  .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-hero-primary {
    background: var(--accent); color: var(--on-accent); border: none; padding: 16px 32px;
    border-radius: var(--r-sm); font-size: var(--text-base); font-weight: 700; cursor: pointer;
    transition: all 0.2s; text-decoration: none;
  }
  .btn-hero-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 30px var(--accent-glow); }
  .btn-hero-secondary {
    background: transparent; color: var(--text); border: 2px solid var(--border);
    padding: 16px 32px; border-radius: var(--r-sm); font-size: var(--text-base); font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
  }
  .btn-hero-secondary:hover { border-color: var(--accent); background: var(--surface-hover); }

  /* ===== Hero v7 — video reel con alpha (side-by-side blit a canvas) =====
     Un MP4 H.264 universal contiene color + alpha lado a lado (2560x720).
     Un canvas combina ambos cada frame: copia la mitad izquierda como color,
     luego usa la mitad derecha (escala de grises) como destination-in para
     recortar transparencia. Resultado: alpha real con 256 niveles, sin
     depender de codecs especiales. Funciona en TODOS los navegadores. */
  .hero-bg-video {
    position: absolute;
    top: 55%;                   /* 5% más abajo del centro vertical */
    right: 1%;                  /* pegado al borde derecho con respiro mínimo */
    width: 53.4%;               /* -3% respecto al paso anterior */
    max-width: 766px;
    height: 64%;
    max-height: 597px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    /* Sin fades — video se ve completo, sin desvanecimientos en ningún borde */
    filter: none;               /* sin saturate/contrast tampoco — colores reales del reel */
    transform: translateY(-50%) translateZ(0);
  }
  .hero-bg-video canvas {
    width: 100%; height: 100%;
    display: block;
  }
  /* El <video> es solo fuente de pixeles para el canvas — no se renderiza visible.
     Lo dejamos en el DOM (no display:none) porque algunos navegadores pausan
     el video cuando está oculto, lo cual rompería el blit. */
  .hero-bg-video video {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    top: 0; left: 0;
  }
  /* Light theme: mismos colores del reel, sin tratamiento */
  [data-theme="light"] .hero-bg-video {
    filter: none;
  }

  /* ===== Hero v5 — editorial: masthead + display + slot estable ===== */
  /* Masthead eyebrow */
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-label); font-size: 12px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 40px;
  }
  .hero-eyebrow-mark { color: var(--text); font-weight: 700; letter-spacing: 0.3em; }
  .hero-eyebrow-sep { color: var(--accent-text); font-weight: 400; }

  /* Display headline — Bricolage, two deliberate lines.
     Scoped to .hero to beat the legacy ".hero h1" serif rule. */
  .hero h1.hero-headline {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.0; letter-spacing: -0.035em;
    margin: 0 0 38px; color: var(--text);
    display: flex; flex-direction: column; gap: 0.06em;
    max-width: 18ch;
  }
  .hero-line-1 { display: block; }

  /* Rotator line: "para" fija + slot de ancho reservado a la izquierda */
  .hero-rotator {
    display: flex; align-items: baseline; gap: 0.32em;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.0; letter-spacing: -0.035em;
  }
  .hero h1 .hero-rotator-prefix {
    font-family: var(--font-display); font-weight: 600; color: var(--text);
    flex-shrink: 0;
  }
  /* Reserved-width slot: composition never reflows as words change */
  .hero-rotator-slot {
    position: relative; display: inline-block;
    min-width: 6em;   /* fits the longest current word ("tu lanzamiento") without reflow */
    overflow: visible;
  }
  .hero h1 .hero-rotator-word {
    font-family: var(--font-accent); font-style: normal; font-weight: 600;
    color: var(--accent-text); letter-spacing: -0.02em;
    display: inline-block; white-space: nowrap;
    position: relative; will-change: transform, opacity, filter;
    padding-bottom: 0.08em;
  }
  /* Underline that sweeps in with each word */
  .hero-rotator-word::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em;
    height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.55;
    transform-origin: left center;
  }
  .hero-rotator-word.rot-out { animation: rotWordOut 0.38s var(--ease-in-quart) forwards; }
  .hero-rotator-word.rot-in  { animation: rotWordIn 0.55s var(--ease-out-expo) forwards; }
  .hero-rotator-word.rot-in::after { animation: rotUnderline 0.6s var(--ease-out-expo) 0.1s both; }
  @keyframes rotWordOut {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-0.32em); filter: blur(5px); }
  }
  @keyframes rotWordIn {
    from { opacity: 0; transform: translateY(0.42em); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes rotUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* Tagline */
  .hero-tagline {
    font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 400;
    color: var(--text-muted); line-height: 1.6; max-width: 46ch;
    margin: 0 0 40px;
  }
  .hero-actions { justify-content: flex-start; }

  @media (prefers-reduced-motion: reduce) {
    .hero-rotator-word.rot-out, .hero-rotator-word.rot-in,
    .hero-rotator-word.rot-in::after { animation: none; }
  }
  /* Mobile: reduce reserved slot so short words don't leave huge gaps */
  @media (max-width: 640px) {
    .hero-rotator { flex-wrap: wrap; }
    .hero-rotator-slot { min-width: 0; }
    .hero-headline, .hero-rotator { max-width: 100%; }
  }

  /* ========== S2. CÓMO FUNCIONA — timeline escaneable de 5 pasos ========== */
  /* Contrast strip: "antes vs ahora" en una línea, sin texto pesado */
  
  
  
  
  
  
  
  
  
  

  /* The timeline rail */
  .how-steps {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    max-width: 1140px; margin: 0 auto; position: relative;
  }
  .how-step {
    text-align: center; padding: 0 14px; position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
  }
  /* Continuous rail behind the number badges */
  .how-step::before {
    content: ''; position: absolute; top: 23px; left: 0; right: 0;
    height: 2px; background: var(--border); z-index: 0;
  }
  .how-step:first-child::before { left: 50%; }
  .how-step:last-child::before { right: 50%; }
  /* Number badge sits on the rail */
  .how-step-num {
    position: relative; z-index: 1;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 18px; font-weight: 600;
    color: var(--accent-text); background: var(--bg);
    border: 2px solid var(--accent);
    margin-bottom: 22px;
    font-feature-settings: 'tnum';
    transition: transform 0.3s var(--ease-out-quint), background 0.3s, color 0.3s, box-shadow 0.3s;
  }
  .how-step:hover .how-step-num {
    transform: translateY(-3px) scale(1.06);
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 8px 24px var(--accent-glow);
  }
  .how-step-icon {
    color: var(--accent-text); margin-bottom: 14px; opacity: 0.9;
    transition: transform 0.3s var(--ease-out-quint);
  }
  .how-step:hover .how-step-icon { transform: translateY(-2px); }
  .how-step-title {
    font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600;
    margin-bottom: 8px; color: var(--text); letter-spacing: -0.01em; line-height: 1.2;
    text-wrap: balance;
  }
  .how-step-desc {
    font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5;
    max-width: 24ch; margin: 0 auto 16px; text-wrap: balance;
  }
  /* Label chip — now the lead element of each step, more visual weight */
  .how-step-chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--accent-text); background: rgba(57, 101, 250,0.12);
    border: 1px solid rgba(57, 101, 250,0.3);
    padding: 6px 13px; border-radius: var(--r-full); white-space: nowrap;
    margin-bottom: 12px; font-family: var(--font-label);}
  .how-step-chip svg { opacity: 0.85; }
  /* The last step reads as the payoff: filled badge + chip */
  .how-step.is-final .how-step-num { background: var(--accent); color: var(--on-accent); }
  .how-step.is-final .how-step-chip { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

  @media (max-width: 860px) {
    
    
    
    
    .how-steps { grid-template-columns: 1fr; gap: 0; max-width: 460px; text-align: left; }
    .how-step {
      flex-direction: row; align-items: flex-start; gap: 18px;
      padding: 0 0 30px 0; text-align: left;
    }
    /* Vertical rail on mobile */
    .how-step::before {
      top: 0; bottom: 0; left: 23px; right: auto;
      width: 2px; height: auto;
    }
    .how-step:first-child::before { top: 24px; left: 23px; }
    .how-step:last-child::before { bottom: auto; height: 24px; left: 23px; }
    .how-step-num { margin-bottom: 0; flex-shrink: 0; }
    .how-step-icon { display: none; }
    .how-step-body { padding-top: 3px; }
    .how-step-desc { margin-left: 0; max-width: 40ch; }
    .how-step-chip { margin-top: 10px; }
  }

  /* ========== QUIÉN ESTÁ DETRÁS — bento editorial v10 ========== */
  
  
  
  

  /* Bento grid — 12 cols on desktop, asymmetric heights */
  
  
  
  
  

  /* Card placements (bento editorial)
     Fila 1 (rows 1-2): Equipo + Capacidades + Pensamos
     Fila 2 (row 3):    Acompañamiento + Herramientas               */
  
  .ab-capabilities { grid-column: span 4; grid-row: span 2; }
  
  
  .ab-tools        { grid-column: span 7; grid-row: span 1; }

  /* — Card kicker (chico, dorado) y título */
  
  
  
  
  

  /* ---------- CARD 01 · EQUIPO (roles del estudio) ---------- */
  
  
  
  
  
  
  
  
  
  
  
  

  /* ---------- CARD 02 · CAPACIDADES (slideshow editorial) ----------
     header (fijo) + slideshow (flex:1) + dots + close (fijo).
     Una sola slide visible a la vez; cross-fade suave entre slides.        */
  .ab-capabilities {
    overflow: hidden;
    background:
      radial-gradient(140% 70% at 100% 0%, rgba(57, 101, 250,0.08), transparent 55%),
      var(--surface);
    min-height: 0;
  }
  
  .ab-slide {
    position: absolute; inset: 0;
    padding: 0 28px;
    display: flex; flex-direction: column; gap: 14px;
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition:
      opacity 0.6s var(--ease-out-quint),
      transform 0.6s var(--ease-out-quint),
      visibility 0s linear 0.6s;
  }
  .ab-slide.is-active {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition:
      opacity 0.7s var(--ease-out-quint),
      transform 0.7s var(--ease-out-quint),
      visibility 0s linear 0s;
  }
  /* Visual: glyph editorial + tag, placeholder digno hasta foto real */
  
  
  
  /* Slide texto */
  
  
  
  /* Bullets compactos en 2 columnas */
  
  
  
  /* Navegación: flechas + dots + contador */
  
  .ab-arrow {
    width: 30px; height: 30px; padding: 0;
    background: transparent; cursor: pointer;
    border: 1px solid var(--border); border-radius: 50%;
    color: var(--text);
    display: grid; place-items: center;
    transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s;
  }
  .ab-arrow:hover {
    border-color: var(--accent); background: rgba(57, 101, 250,0.08);
    color: var(--accent-text);
  }
  .ab-arrow:active { transform: scale(0.94); }
  .ab-arrow svg { width: 13px; height: 13px; }
  .ab-dots {
    display: flex; gap: 8px;
  }
  .ab-dot-btn {
    width: 22px; height: 22px; padding: 0;
    background: transparent; border: 0;
    cursor: pointer;
    display: grid; place-items: center;
    border-radius: 50%;
  }
  .ab-dot-btn::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--border);
    transition: background 0.35s, width 0.4s var(--ease-out-quint);
  }
  .ab-dot-btn:hover::after { background: var(--text-muted); }
  .ab-dot-btn.is-active::after {
    background: var(--accent);
    width: 22px; border-radius: var(--r-full);
  }
  
  
  /* Cierre */
  
  
  
  
  
  @media (prefers-reduced-motion: reduce) {
    .ab-slide { transition: opacity 0.01s; transform: none; }
  }

  /* ---------- CARD · ACOMPAÑAMIENTO ---------- */
  
  
  
  
  
  
  

  /* ---------- CARD · CÓMO PENSAMOS (filosofía editorial, 2 párrafos) ---------- */
  
  
  
  
  
  
  
  

  /* ---------- CARD 05 · HERRAMIENTAS (2 rieles editorial) ---------- */
  .ab-tools {
    overflow: hidden; gap: 14px;
  }
  
  

  
  
  
  
  

  .ab-tools-rail {
    position: relative;
    margin: 0 -28px;
    padding: 4px 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .ab-tools-rail.is-fast .ab-tools-track { animation-duration: 34s; }
  .ab-tools-rail.is-slow .ab-tools-track { animation-duration: 52s; }
  .ab-tools-rail.is-reverse .ab-tools-track { animation-direction: reverse; }
  .ab-tools-track {
    display: flex; gap: 12px; width: max-content;
    animation: ab-marquee-h 42s linear infinite;
    will-change: transform;
    padding: 0 28px;
  }
  .ab-tools-track:hover { animation-play-state: paused; }
  .ab-tool {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    transition: border-color 0.25s, transform 0.25s;
  }
  [data-theme="light"] .ab-tool { background: var(--surface); }
  .ab-tool:hover { border-color: rgba(143, 169, 255,0.35); transform: translateY(-1px); }
  .ab-tool-logo {
    width: 32px; height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }
  .ab-tool-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; white-space: nowrap; }

  @keyframes ab-marquee-h {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1080px) {
    
    
    .ab-capabilities { grid-column: span 6; grid-row: auto; }
    
    
    .ab-tools        { grid-column: span 6; }
  }
  @media (max-width: 720px) {
    
    
     .ab-capabilities, .ab-tools {
      grid-column: span 1; grid-row: auto;
    }
    
    
    
    
  }
  /* ========== S3. SHOWCASE — two-column editorial layout ========== */
  
  
  
  .showcase-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
  .showcase-tab {
    padding: 10px 22px; border-radius: var(--r-full); font-size: 13px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; transition: all 0.25s; letter-spacing: 0.3px;
  }
  .showcase-tab:hover { border-color: var(--accent); color: var(--text); }
  .showcase-tab.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
  

  /* ===== Editorial showcase viewer ===== */
  
  
  
  /* Navigation arrows */
  
  
  
  
  /* Controls overlay */
  
  
  
  
  
  

  /* ========== S5. CONFIGURADOR WRAPPER ========== */
  .configurador-section {
    padding: clamp(52px, 8.6vh, 104px) 24px;
    position: relative;
  }
  .configurador-section::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(57, 101, 250,0.06) 0%, rgba(57, 101, 250,0.02) 100%);
    pointer-events: none;
  }
  .configurador-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 48px;
    position: relative;
  }
  .configurador-header .cfg-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--accent-text);
    background: rgba(57, 101, 250,0.1); border: 1px solid rgba(57, 101, 250,0.25);
    padding: 6px 16px; border-radius: var(--r-lg); margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--font-label);}
  .configurador-header .cfg-badge .cfg-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    animation: cfgPulse 2s ease-in-out infinite;
  }
  @keyframes cfgPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
  }
  .configurador-header :is(h1, h2) {
    font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; text-wrap: balance;
  }
  .configurador-header p {
    font-size: 15px; color: var(--text-muted); line-height: 1.7; text-wrap: balance;
  }
  .configurador-shell {
    width: 92%; max-width: 1320px; margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(57, 101, 250,0.05);
    overflow: hidden;
    position: relative;
  }
  .configurador-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(57, 101, 250,0.03);
  }
  .configurador-topbar .cfg-step-indicator {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    white-space: nowrap; font-family: var(--font-label);}
  .configurador-topbar .progress-bar {
    flex: 1; margin-bottom: 0;
  }
  .configurador-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    min-height: 520px;
    position: relative;
  }
  /* Full-height fill + divider for the right column — so the sidebar's
     background and border never "cut off" before the bottom of the layout,
     even when the main column is taller than the sticky sidebar content. */
  .configurador-layout::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 360px;
    background: rgba(57, 101, 250,0.02);
    border-left: 1px solid var(--border);
    pointer-events: none; z-index: 0;
  }
  .configurador-main {
    padding: 48px 56px;
    position: relative; z-index: 1;
    min-width: 0;
  }
  .configurador-sidebar {
    background: transparent;
    padding: 28px 24px;
    position: sticky;
    top: 80px;
    align-self: start;
    /* Let the sidebar grow with its content. Only scroll internally if it
       actually exceeds the viewport, so the campaign recap is never truncated. */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1;
    scrollbar-width: thin;
  }
  /* When the sidebar content is tall (final step), prefer natural height over a
     clipped sticky box: drop sticky so the whole recap is reachable. */
  .configurador-sidebar.sidebar-tall {
    position: relative; top: 0; max-height: none; overflow: visible;
  }
  .sidebar-title {
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px; font-family: var(--font-label);}
  .sidebar-title::before {
    content: ''; width: 16px; height: 2px; background: var(--accent); border-radius: 1px;
  }
  .sidebar-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: opacity 0.3s;
  }
  .sidebar-item.empty { opacity: 0.35; }
  .sidebar-item .si-label { color: var(--text-muted); font-weight: 500; }
  .sidebar-item .si-value { font-weight: 600; text-align: right; max-width: 160px; color: var(--text); }
  .sidebar-item .si-value.si-pending {
    color: var(--text-muted); font-weight: 400; font-style: normal; font-size: 12px;
  }
  .sidebar-price-box {
    margin-top: 20px;
    background: rgba(57, 101, 250,0.08);
    border: 1px solid rgba(57, 101, 250,0.2);
    border-radius: var(--r-sm);
    padding: 16px;
    text-align: center;
  }
  .sidebar-price-box .spb-label {
    font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-family: var(--font-label);}
  .sidebar-price-box .spb-value {
    font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em;
    color: var(--accent-text); font-family: var(--font-heading); font-feature-settings: 'tnum';
  }
  .sidebar-price-box .spb-note {
    font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;
  }
  .sidebar-phase-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; padding: 4px 12px;
    border-radius: var(--r-sm); margin-bottom: 16px;
  }
  .sidebar-phase-badge.phase-config {
    color: var(--accent-text); background: rgba(57, 101, 250,0.1); border: 1px solid rgba(57, 101, 250,0.2);
  }
  .sidebar-phase-badge.phase-brief {
    color: var(--success); background: rgba(122,158,110,0.1); border: 1px solid rgba(122,158,110,0.2);
  }
  .sidebar-phase-badge.phase-schedule {
    color: var(--accent-text); background: rgba(57,101,250,0.1); border: 1px solid rgba(57,101,250,0.25);
  }
  /* Dynamic brief recap items */
  .srecap-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    animation: srecIn 0.3s var(--ease-out-quint);
  }
  @keyframes srecIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .srecap-item .srec-label {
    font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent-text); opacity: 0.8; font-family: var(--font-label);}
  .srecap-item .srec-val { font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.4; }
  /* "Ya tenemos tu campaña" header */
  .sidebar-campaign-head {
    text-align: center; padding: 8px 0 20px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    animation: srecIn 0.4s var(--ease-out-quint);
  }
  .sidebar-campaign-head .scampaign-check {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
    background: rgba(122,158,110,0.15); border: 1.5px solid var(--success);
    color: var(--success); font-size: 22px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .sidebar-campaign-head .scampaign-title {
    font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px;
  }
  .sidebar-campaign-head .scampaign-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

  /* Mobile sidebar → floating bottom panel */
  .configurador-mobile-summary {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1.5px solid var(--border);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
    padding: 12px 20px;
    z-index: 150;
    transition: transform 0.3s ease;
  }
  .cms-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .cms-pills {
    display: flex; gap: 6px; flex-wrap: wrap; flex: 1; overflow: hidden;
  }
  .cms-pill {
    font-size: 11px; font-weight: 600; color: var(--accent-text);
    background: rgba(57, 101, 250,0.1); border: 1px solid rgba(57, 101, 250,0.2);
    padding: 3px 10px; border-radius: var(--r-sm); white-space: nowrap;
  }
  .cms-price {
    font-size: 14px; font-weight: 700; white-space: nowrap;
    color: var(--accent-text);
  }
  /* Wider shell, but keep reading lines comfortable: text blocks stay centered
     in a readable column while card grids fill the wider main column. */
  .step-section .step-question,
  .step-section .step-subtitle,
  .step-section .brief-section-hint { max-width: 640px; margin-left: auto; margin-right: auto; }
  .step-section .brief-section-title { max-width: 640px; margin-left: auto; margin-right: auto; }
  /* Forms & single-column inputs read better narrower even in the wide shell */
  .step-section .field-group,
  .step-section .nav-row { max-width: 720px; margin-left: auto; margin-right: auto; }
  .step-section .field-group { margin-bottom: 22px; }

  /* ── Configurador internals (from configurador-prototipo) ── */
  .progress-bar { width: 100%; height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
  /* progress-fill: see animation block above */
  .phase-label { text-align: center; font-size: 11px; color: var(--text-muted); margin-bottom: 28px; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-label);}
  .step-title { text-align: center; margin-bottom: 8px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--font-label);}
  .step-question { text-align: center; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 1.75rem); font-weight: 600; margin-bottom: 32px; letter-spacing: -0.02em; line-height: var(--lh-snug); }
  .step-subtitle { text-align: center; font-size: 14px; color: var(--text-muted); margin-top: -24px; margin-bottom: 32px; line-height: 1.5; }

  /* Cards */
  .cards-grid { display: grid; gap: 12px; grid-auto-rows: 1fr; }
  .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card {
    background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-sm);
    padding: 18px 14px; cursor: pointer; transition: all 0.2s; text-align: center;
    display: flex; flex-direction: column;
  }
  .card:hover { border-color: var(--accent); background: var(--surface-hover); transform: translateY(-2px); }
  .card.selected { border-color: var(--accent); background: rgba(57, 101, 250,0.1); box-shadow: 0 0 20px var(--accent-glow); }
  .card-icon { order: 1; font-size: 24px; margin-bottom: 8px; display: block; line-height: 1; }
  /* Orden visual: icono -> nombre -> ETIQUETAS -> descripcion.
     Las etiquetas cuelgan del nombre como informacion secundaria; la
     descripcion queda separada por una linea para leerse como explicacion. */
  .card-title {
    order: 2;
    font-family: var(--font-heading);
    font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.22; margin: 0 0 5px;
  }
  /* Linea de orientacion de la tarjeta del cotizador: donde/para que usar ese
     tipo de video. Jerarquia por DEBAJO de la descripcion a proposito:
     mas chica, mas clara y con tracking, para que oriente sin competir. */
  .card-use {
    order: 3;
    font-family: var(--font-label);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--accent-text);
    opacity: 0.8;
    margin: 0 0 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
    min-height: 2.9em; /* dos lineas: alinea la descripcion en toda la fila */
  }
  .card.selected .card-use { opacity: 1; }
  .card-desc {
    order: 4;
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
  }
  /* Industry cards */
  .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
  .ind-card {
    background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-sm);
    padding: 14px 10px; cursor: pointer; transition: all 0.2s; text-align: center;
  }
  .ind-card:hover { border-color: var(--accent); background: var(--surface-hover); }
  .ind-card.selected { border-color: var(--accent); background: rgba(57, 101, 250,0.1); box-shadow: 0 0 16px var(--accent-glow); }
  .ind-card .ind-icon { font-size: 22px; display: block; margin-bottom: 4px; }
  .ind-card .ind-name { font-size: 12px; font-weight: 600; }
  /* .ind-other ya no se saca del grid: es una tarjeta mas */

  /* Slider */
  .slider-container { max-width: 600px; margin: 0 auto; }
  .slider-track-wrapper { position: relative; padding: 18px 0 6px; }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--border); border-radius: 3px; outline: none; cursor: pointer; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3); cursor: grab; margin-top: -13px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--accent) var(--slider-pct, 10%), var(--border) var(--slider-pct, 10%)); border-radius: 3px; }
  input[type="range"]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 0 12px var(--accent-glow); cursor: grab; }
  input[type="range"]::-moz-range-progress { background: var(--accent); border-radius: 3px; height: 6px; }
  .slider-presets { display: flex; justify-content: space-between; margin-top: 14px; gap: 6px; }
  .preset-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.2s; position: relative; }
  .preset-btn:hover { border-color: var(--accent); color: var(--text); }
  .preset-btn.active { border-color: var(--accent); color: var(--accent-text); background: rgba(57, 101, 250,0.1); }
  .preset-btn .popular-badge { position: absolute; top: -8px; right: -4px; font-size: 8px; background: var(--accent); color: white; padding: 1px 6px; border-radius: var(--r-xs); font-weight: 600; }

  /* Duration — ONE unified block: type → number → context → slider → presets */
  .dur-unit {
    max-width: 600px; margin: 0 auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 26px 28px 22px; text-align: center;
  }
  .dur-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
  .dur-badge { font-size: 11px; font-weight: 500; color: var(--accent-text); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-label);}
  .dur-popular { font-size: 10px; font-weight: 700; background: var(--accent); color: var(--on-accent); border-radius: var(--r-xs); padding: 2px 8px; white-space: nowrap; line-height: 1.5; }
  .dur-readout { line-height: 1; margin-bottom: 10px; }
  .dur-readout .big-number { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; color: var(--accent-text); font-family: var(--font-heading); font-feature-settings: 'tnum'; }
  .dur-readout .big-unit { font-size: 1.4rem; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
  .dur-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 46ch; margin: 0 auto 4px; text-wrap: balance; }
  .billing-note { font-size: 12px; color: var(--text-muted); }
  .dur-unit .slider-track-wrapper { margin-top: 14px; }
  .dur-tip { font-size: 12px; color: var(--text-muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); line-height: 1.5; opacity: 0.85; text-wrap: balance; }
  @keyframes durFade { from { opacity: 0.5; } to { opacity: 1; } }
  .dur-card-animate .dur-badge, .dur-card-animate .dur-desc { animation: durFade 0.2s ease; }

  /* Aviso de privacidad simplificado: cerrado por defecto, sin fricción
     antes del envío, pero disponible en el mismo punto de captación. */
  .aviso-simple { max-width: 52ch; margin: 10px auto 0; text-align: left; }
  .aviso-simple > summary {
    cursor: pointer; list-style: none;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-muted); text-align: center;
    padding: 4px 0; border-radius: var(--r-xs);
  }
  .aviso-simple > summary::-webkit-details-marker { display: none; }
  .aviso-simple > summary::after { content: " +"; opacity: 0.6; }
  .aviso-simple[open] > summary::after { content: " –"; }
  .aviso-simple > summary:hover { color: var(--text); }
  .aviso-simple > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .aviso-simple-body {
    font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
    margin-top: 9px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  }
  .aviso-simple-body b { color: var(--text); font-weight: 600; }
  .aviso-simple-body p { margin: 0 0 7px; }
  .aviso-simple-body p:last-child { margin-bottom: 0; }
  .aviso-simple-body a { color: var(--accent-text); }

  /* Foco visible para las tarjetas que se operan con teclado */
  .ind-card:focus-visible, .card:focus-visible,
  .quality-card:focus-visible, .opt-card:focus-visible,
  .info-tip:focus-visible {
    outline: 2px solid var(--accent-text); outline-offset: 3px;
  }

  /* Quality — sintetizadas y escaneables */
  .quality-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  /* Cards stretch to equal height; ideal box pinned to bottom for clean baseline */
  .quality-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); padding: 24px 20px; cursor: pointer; transition: all 0.2s; text-align: left; position: relative; display: flex; flex-direction: column; }
  .quality-card:hover { border-color: var(--accent); background: var(--surface-hover); }
  .quality-card.selected { border-color: var(--accent); background: rgba(57, 101, 250,0.1); box-shadow: 0 0 20px var(--accent-glow); }
  .quality-card .q-features { flex: 1 1 auto; }
  /* Recommended (Directo) — subtle persistent highlight so it reads as the default, not the cheap option */
  .quality-card.q-recommended { border-color: rgba(143, 169, 255,0.45); box-shadow: 0 0 0 1px rgba(57, 101, 250,0.12); }
  .quality-card.q-recommended.selected { border-color: var(--accent); }
  /* Star/recommended ribbon */
  .q-ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap;
    background: var(--accent); color: var(--on-accent); padding: 4px 12px; border-radius: var(--r-full);
    box-shadow: 0 4px 14px rgba(57, 101, 250,0.4);
    display: flex; align-items: center; gap: 5px;
  }
  .quality-card .q-name { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-bottom: 4px; margin-top: 4px; letter-spacing: -0.02em; }
  .quality-card .q-subtitle { font-size: 13px; color: var(--accent-text); font-weight: 500; margin-bottom: 16px; }
  .quality-card .q-features { font-size: 13px; color: var(--text-muted); line-height: 1.6; text-align: left; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
  .quality-card .q-features span { display: block; padding-left: 20px; position: relative; }
  .quality-card .q-features span::before { content: "→"; position: absolute; left: 0; color: var(--accent-text); font-weight: 700; font-size: 11px; top: 2px; }
  .quality-card .q-features { margin-bottom: 18px; flex: 1 1 auto; }
  .quality-card .q-ideal { font-size: 12px; color: var(--text-muted); background: rgba(57, 101, 250,0.05); border: 1px solid rgba(57, 101, 250,0.1); border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.4; text-wrap: balance; }

  /* Email gate */
  .email-gate { max-width: 420px; margin: 0 auto; text-align: center; }
  .email-gate .gate-icon { font-size: 48px; margin-bottom: 16px; display: block; }
  .email-gate .gate-text { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
  .gate-name { margin-bottom: 10px; }
  .email-row { display: flex; gap: 10px; }
  .email-row input { flex: 1; }

  /* Result */
  .result-container { text-align: center; padding: 20px 0; }
  .result-label { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; font-family: var(--font-label);}
  .result-price { font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 700; letter-spacing: -0.04em; margin-bottom: 4px; color: var(--accent-text); font-family: var(--font-heading); font-feature-settings: 'tnum'; }
  .result-note { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.5; }
  .result-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 20px 24px; margin-bottom: 28px; text-align: left; }
  .result-summary .sum-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
  .result-summary .sum-row:not(:last-child) { border-bottom: 1px solid var(--border); }
  .result-summary .sum-label { color: var(--text-muted); }
  .result-summary .sum-value { font-weight: 600; }
  .result-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: stretch; max-width: 420px; margin: 0 auto; }
  #resultConfirm .btn-primary { width: 100%; padding: 16px 28px; font-size: 16px; }
  /* Reveal block: how to continue, after confirming the budget */
  .result-next { animation: srecIn 0.4s var(--ease-out-quint); }
  .result-next-head { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
  /* Editable result rows */
  .result-summary-editable .sum-row { align-items: center; min-height: 44px; }
  .result-summary-editable .sum-row-edit { background: rgba(57, 101, 250,0.04); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .sum-select {
    background: var(--surface); border: 1.5px solid rgba(57, 101, 250,0.35); border-radius: var(--r-sm);
    padding: 8px 32px 8px 12px; color: var(--text); font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FA9FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
  }
  .sum-select:hover { border-color: var(--accent); }
  .sum-select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 101, 250,0.28); outline: none; }
  .result-edit-hint { font-size: 12px; color: var(--accent-text); text-align: center; margin: 14px 0 28px; opacity: 0.85; font-weight: 500; }
  /* Price recalculation pulse */
  @keyframes pricePulse { 0%{ transform: scale(1); } 40%{ transform: scale(1.04); } 100%{ transform: scale(1); } }
  .result-price.recalc { animation: pricePulse 0.32s var(--ease-out-quint); }

  /* ===== CONFIRMED STATE — transformación visual sin esconder datos =====
     Cuando el usuario presiona "Confirmar este presupuesto":
       • aparece sello "Presupuesto confirmado" arriba (con check)
       • el note exploratorio se reemplaza por un texto de confirmación
       • los selects se ocultan; en su lugar aparecen píldoras estáticas con check
       • el precio toma un tono de "elegido" (border sutil, lock visual leve)
       • el container completo recibe un wash sutil (success) que comunica "ya"
     La data NO se esconde: industria, tipo, duración y nivel siguen visibles. */
  .sum-control { position: relative; display: inline-flex; align-items: center; }
  .sum-pill {
    display: none;
    align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-full);
    background: rgba(122,158,110,0.14);
    color: var(--text);
    border: 1px solid rgba(122,158,110,0.45);
    font-size: var(--text-sm);
    font-weight: 700;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
  }
  .sum-pill::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--success);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/9px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/9px no-repeat;
    flex-shrink: 0;
  }

  .result-confirmed-seal {
    display: none;
    align-items: center; justify-content: center; gap: 8px;
    margin: 0 auto 14px;
    padding: 8px 16px;
    border-radius: var(--r-full);
    background: rgba(122,158,110,0.12);
    border: 1px solid rgba(122,158,110,0.4);
    color: var(--success);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: max-content; max-width: 100%;
  }
  .result-confirmed-note {
    display: none;
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text);
    line-height: 1.5;
    margin: 0 auto 22px;
    max-width: 48ch;
    text-wrap: balance;
  }

  /* Activación del estado */
  .result-container.confirmed .result-confirmed-seal {
    display: inline-flex;
    animation: confirmedSealIn 0.5s var(--ease-out-quint, cubic-bezier(0.22,1,0.36,1)) both;
  }
  .result-container.confirmed .result-confirmed-note {
    display: block;
    animation: confirmedNoteIn 0.5s 0.08s var(--ease-out-quint, cubic-bezier(0.22,1,0.36,1)) both;
  }
  .result-container.confirmed .result-note { display: none; }
  .result-container.confirmed .result-edit-hint { display: none; }
  .result-container.confirmed .result-price {
    color: var(--text);
    transition: color 0.4s ease;
  }
  .result-container.confirmed .result-summary-editable {
    background: rgba(122,158,110,0.05);
    border-color: rgba(122,158,110,0.32);
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  .result-container.confirmed .result-summary-editable .sum-row-edit {
    background: transparent;
  }
  .result-container.confirmed .sum-select { display: none; }
  .result-container.confirmed .sum-pill { display: inline-flex; animation: pillIn 0.42s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1)) both; }
  .result-container.confirmed .sum-row { color: var(--text); }

  @keyframes confirmedSealIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes confirmedNoteIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pillIn {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .result-container.confirmed .result-confirmed-seal,
    .result-container.confirmed .result-confirmed-note,
    .result-container.confirmed .sum-pill { animation: none; }
  }
  [data-theme="light"] .sum-pill {
    background: rgba(90,126,78,0.12);
    border-color: rgba(90,126,78,0.45);
  }
  [data-theme="light"] .result-container.confirmed .result-summary-editable {
    background: rgba(90,126,78,0.06);
    border-color: rgba(90,126,78,0.35);
  }
  [data-theme="light"] .result-confirmed-seal {
    background: rgba(90,126,78,0.10);
    border-color: rgba(90,126,78,0.40);
  }

  /* Buttons */
  .btn-primary { background: var(--accent); color: var(--bg); border: none; padding: 14px 28px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background 0.2s ease, transform 0.2s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1)), box-shadow 0.2s ease; }
  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
  .btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-secondary { background: transparent; color: var(--text); border: 2px solid var(--border); padding: 14px 28px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
  .btn-secondary:hover { border-color: var(--accent); background: var(--surface-hover); }
  .btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .btn-back { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 8px 16px; border-radius: var(--r-sm);
    transition: color 0.2s ease, background 0.2s ease; }
  .btn-back:hover { color: var(--text); background: var(--surface); }
  .btn-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-row { display: flex; justify-content: space-between; margin-top: 32px; align-items: center; gap: 10px; }
  /* Group skip + next together on the right so they read as one flow */
  .nav-actions { display: flex; align-items: center; gap: 10px; }

  /* Step transitions: see animation block above */

  /* Form fields */
  .field-group { margin-bottom: 22px; }
  .field-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block; }
  .field-input, .field-textarea {
    width: 100%; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-sm);
    padding: 12px 16px; color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s;
  }
  .field-input:focus-visible, .field-textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 101, 250,0.18); }
  .field-input::placeholder, .field-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
  .field-textarea { min-height: 80px; resize: vertical; }

  /* Chips */
  .chip { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    min-height: 44px; display: inline-flex; align-items: center; }
  .chip:hover { border-color: var(--accent); color: var(--text); }
  .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .chip.selected { border-color: var(--accent); color: var(--accent-text); background: rgba(57, 101, 250,0.1); }

  /* ===== Brief Step 11: bloque destacado de Referencias =====
     No es un campo más: es la pregunta de mayor valor del brief.
     Card con presencia, eyebrow con jerarquía propia, input que se siente activo
     y chips de links con favicon + dominio cuando se pegan. */
  .refs-block {
    position: relative;
    background: linear-gradient(180deg, rgba(57, 101, 250,0.06) 0%, rgba(57, 101, 250,0.02) 100%);
    border: 1px solid rgba(57, 101, 250,0.28);
    border-radius: var(--r-md);
    padding: 28px 28px 24px;
    margin-bottom: 28px;
    overflow: hidden;
  }
  .refs-block::before {
    content: "";
    position: absolute; inset: -1px;
    background: radial-gradient(120% 60% at 0% 0%, rgba(57, 101, 250,0.18) 0%, transparent 55%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
  }
  .refs-block > * { position: relative; z-index: 1; }
  [data-theme="light"] .refs-block {
    background: linear-gradient(180deg, rgba(57, 101, 250,0.06) 0%, rgba(57, 101, 250,0.02) 100%);
    border-color: rgba(57, 101, 250,0.32);
  }
  .refs-head { margin-bottom: 18px; }
  .refs-eyebrow {
    font-family: var(--font-label); font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
    color: var(--accent-text); margin-bottom: 10px;
  }
  .refs-title {
    font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
    color: var(--text); margin-bottom: 8px; text-wrap: balance;
  }
  .refs-sub {
    font-family: var(--font-body); font-size: var(--text-sm);
    color: var(--text-muted); line-height: 1.55; max-width: 56ch;
  }

  .refs-input-wrap {
    position: relative; display: flex; align-items: center;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  [data-theme="light"] .refs-input-wrap { background: var(--surface); }
  .refs-input-wrap:hover { border-color: var(--accent); }
  .refs-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(57, 101, 250,0.18);
  }
  .refs-input-icon {
    flex-shrink: 0;
    color: var(--accent-text);
    margin-right: 10px;
  }
  .refs-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
  }
  .refs-input::placeholder { color: var(--text-muted); opacity: 0.7; }
  .refs-input-hint {
    flex-shrink: 0;
    font-family: var(--font-label); font-size: 11px;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em;
    padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .refs-input-wrap:focus-within .refs-input-hint { opacity: 1; }

  .refs-chips {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .refs-chips:empty { display: none; }
  .refs-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 6px 6px 6px 12px;
    font-size: var(--text-sm);
    color: var(--text);
    max-width: 100%;
    animation: refsChipIn 0.28s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
  }
  @keyframes refsChipIn {
    from { opacity: 0; transform: translateY(4px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .refs-chip-favicon {
    width: 16px; height: 16px; flex-shrink: 0; border-radius: 3px;
    background: var(--surface-hover);
    object-fit: cover;
  }
  .refs-chip-domain {
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 200px;
  }
  .refs-chip-path {
    color: var(--text-muted);
    font-size: var(--text-xs);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
  }
  .refs-chip-remove {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 16px; line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
    margin-left: 2px;
  }
  .refs-chip-remove:hover { color: var(--error); background: rgba(199,91,91,0.12); }
  .refs-chip-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .refs-empty {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed var(--border);
  }
  .refs-chips:not(:empty) ~ .refs-empty { display: none; }
  .refs-empty-label {
    font-size: var(--text-xs); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
    margin-right: 4px; font-family: var(--font-label);}
  .refs-example {
    font-family: var(--font-body); font-size: var(--text-xs);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  }
  .refs-example:hover { border-color: var(--accent); color: var(--accent-text); background: rgba(57, 101, 250,0.08); }
  .refs-example:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (max-width: 640px) {
    .refs-block { padding: 22px 20px 20px; }
    .refs-input-hint { display: none; }
    .refs-chip-domain { max-width: 140px; }
    .refs-chip-path { display: none; }
  }
  @keyframes refsShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
  }
  .refs-input.refs-input-error { animation: refsShake 0.32s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1)); }
  .refs-input.refs-input-error + .refs-input-hint { color: var(--error); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .refs-chip { animation: none; }
    .refs-input.refs-input-error { animation: none; }
  }

  /* ===== Guided brief: visible info "i" tooltip ===== */
  .info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
  .info-tip-btn {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--accent); background: rgba(57, 101, 250,0.12); color: var(--accent-text);
    font-size: 11px; font-weight: 700; font-family: var(--font-heading);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; padding: 0; transition: all 0.2s;
  }
  .info-tip-btn:hover { background: var(--accent); color: var(--bg); }
  .info-tip-btn:focus-visible { background: var(--accent); color: var(--bg); outline: 2px solid var(--accent); outline-offset: 2px; }
  .info-tip-bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: 220px; max-width: 70vw;
    background: var(--bg); border: 1px solid var(--accent); border-radius: var(--r-sm);
    padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35); z-index: 30;
    opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    text-align: left; pointer-events: none;
  }
  .info-tip-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--accent);
  }
  /* Show on hover (desktop) AND when toggled open via tap (mobile) */
  .info-tip:hover .info-tip-bubble,
  .info-tip.open .info-tip-bubble {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
  }

  /* ===== Option cards (selectable, richer than chips) — compactas y aireadas ===== */
  .opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .opt-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 12px 14px; cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease-out-quint);
    text-align: left; display: flex; align-items: center; gap: 11px; min-height: 0;
  }
  .opt-card:hover { border-color: rgba(143, 169, 255,0.5); background: var(--surface-hover); }
  .opt-card.selected { border-color: var(--accent); background: rgba(57, 101, 250,0.1); }
  .opt-card .opt-icon { font-size: 18px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; }
  .opt-card .opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .opt-card .opt-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
  .opt-card .opt-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
  .opt-card.selected .opt-name { color: var(--accent-text); }

  /* ===== Age range dual slider — rediseñado, fino y alineado ===== */
  .age-slider-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 20px 22px 16px; }
  .age-readout { text-align: center; font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: var(--accent-text); margin-bottom: 18px; font-feature-settings: 'tnum'; letter-spacing: -0.01em; }
  .age-readout .age-unit { font-size: 13px; color: var(--text-muted); font-family: var(--font-body); margin-left: 4px; font-weight: 400; }
  .age-dual { position: relative; height: 28px; }
  /* The visual rail + fill (centered in the 28px area) */
  .age-dual .age-track { position: absolute; top: 12px; left: 0; right: 0; height: 5px; background: var(--border); border-radius: 3px; }
  .age-dual .age-fill { position: absolute; top: 12px; height: 5px; background: var(--accent); border-radius: 3px; }
  /* Both range inputs overlap; their tracks are invisible, only thumbs show */
  .age-dual input[type="range"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
    -webkit-appearance: none; appearance: none; background: none; pointer-events: none; outline: none;
  }
  .age-dual input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none; appearance: none; height: 28px; background: none; border: none;
  }
  .age-dual input[type="range"]::-moz-range-track { height: 28px; background: none; border: none; }
  .age-dual input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: grab; margin-top: 3px;
  }
  .age-dual input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
  .age-dual input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: grab;
  }

  /* Brief */
  .brief-section-title { font-family: var(--font-heading); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
  .brief-section-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
  .brief-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; align-items: center; }
  .bp-dot {
    width: 28px; height: 28px; border-radius: 50%; background: var(--border);
    transition: all 0.3s; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
  }
  .bp-dot.active { background: var(--accent); color: var(--white); }
  .bp-dot.done { background: var(--success); color: var(--white); }
  .brief-step-counter {
    text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500;
  }
  .brief-encouragement {
    text-align: center; font-size: 13px; color: var(--success); margin-bottom: 20px; font-weight: 500;
    opacity: 0.85;
  }

  /* Schedule */
  .schedule-container { text-align: center; max-width: 480px; margin: 0 auto; }
  .schedule-icon { font-size: 56px; display: block; margin-bottom: 16px; }
  .schedule-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--success); background: rgba(122,158,110,0.1); border: 1px solid rgba(122,158,110,0.3); padding: 4px 14px; border-radius: var(--r-lg); margin-bottom: 20px; }

  .success-icon { font-size: 64px; margin-bottom: 16px; display: block; }

  /* UX additions */
  .select-hint { text-align: left; font-size: 11px; color: var(--text-muted); margin-top: 0; margin-bottom: 10px; opacity: 0.6; letter-spacing: 0.2px; }
  .btn-skip {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    padding: 11px 20px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; font-family: inherit;
  }
  .btn-skip:hover { border-color: var(--text-muted); color: var(--text); background: var(--surface-hover); }

  /* ========== S6. FAQ — layout editorial 2 columnas ========== */
  .faq-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 80px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: start;
  }
  .faq-aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .faq-aside .section-label {
    text-align: left;
    margin-bottom: 0;
  }
  
  
  .faq-contact-card {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .faq-contact-card:hover {
    border-color: rgba(143, 169, 255,0.35);
    box-shadow: 0 14px 40px rgba(0,0,0,0.25);
    transform: translateY(-2px);
  }
  .faq-contact-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .faq-contact-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
  }
  .faq-contact-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
  }
  .faq-contact-cta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color 0.2s;
  }
  .faq-contact-cta:hover { color: var(--accent-text); }
  .faq-contact-cta .faq-contact-arrow {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, transform 0.25s;
  }
  .faq-contact-cta:hover .faq-contact-arrow {
    background: var(--accent-hover);
    transform: translate(2px, -2px);
  }
  .faq-contact-arrow svg { width: 14px; height: 14px; }

  /* Lista de preguntas — acordeón existente, ahora dentro de columna derecha */
  .faq-list { max-width: 100%; margin: 0; }
  .faq-item {
    border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 12px;
    background: var(--surface); overflow: hidden;
  }
  .faq-question {
    width: 100%; background: none; border: none; color: var(--text); font-family: inherit;
    font-size: var(--text-base); font-weight: 600; padding: 20px 24px; text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; transition: color 0.2s;
  }
  .faq-question:hover { color: var(--accent-text); }
  .faq-question .faq-icon { font-size: 20px; transition: transform 0.3s; color: var(--text-muted); }
  .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent-text); }
  .faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px; font-size: 14px; color: var(--text-muted); line-height: 1.7;
  }
  .faq-item.open .faq-answer { max-height: 480px; padding: 0 24px 20px; }

  /* Responsive: en tablet/mobile aside arriba, preguntas debajo */
  @media (max-width: 960px) {
    .faq-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .faq-aside {
      position: static;
      top: auto;
    }
    
    .faq-contact-card { max-width: 480px; }
  }
  @media (max-width: 600px) {
    .faq-layout { gap: 32px; }
    .faq-contact-card { padding: 22px 22px 20px; }
  }

  /* ========== S7. CONTACTO FINAL — cierre conversacional ========== */
  .contact-section {
    position: relative;
    padding: clamp(56px, 10vh, 128px) 48px;
    max-width: 1280px;
    margin: 0 auto;
    isolation: isolate;
  }
  .contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(720px 460px at 18% 30%, rgba(122,184,224,0.05), transparent 60%),
      radial-gradient(680px 440px at 82% 70%, rgba(57, 101, 250,0.045), transparent 60%);
  }
  .contact-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 96px;
    align-items: center;
  }

  /* Columna izquierda: formulario */
  .contact-form-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 40px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  }
  [data-theme="light"] .contact-form-wrap {
    box-shadow: 0 18px 44px rgba(15,15,14,0.08);
  }
  .contact-form { display: flex; flex-direction: column; gap: 20px; }
  .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .contact-field { display: flex; flex-direction: column; gap: 8px; }
  .contact-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em; font-family: var(--font-label);}
  .contact-input,
  .contact-select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
  }
  [data-theme="light"] .contact-input,
  [data-theme="light"] .contact-select {
    background: var(--surface);
  }
  .contact-input::placeholder { color: var(--text-muted); opacity: 0.7; }
  .contact-input:focus-visible,
  .contact-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .contact-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238A8A86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    cursor: pointer;
  }
  .contact-submit {
    margin-top: 8px;
    width: 100%;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--r-sm);
    padding: 16px 24px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .contact-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px var(--accent-glow);
  }
  .contact-submit svg { width: 16px; height: 16px; transition: transform 0.25s; }
  .contact-submit:hover svg { transform: translate(2px, -2px); }
  .contact-legal {
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
  }
  .contact-legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
  .contact-legal a:hover { color: var(--accent-text); }

  /* Columna derecha: copy + datos */
  .contact-copy { display: flex; flex-direction: column; gap: 28px; }
  .contact-copy .section-label { text-align: left; margin-bottom: 0; }
  .contact-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
    text-wrap: balance;
    margin: 0;
  }
  .contact-title em {
    font-style: normal;
    font-weight: 500;
    color: var(--accent-text);
  }
  .contact-lead {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    max-width: 46ch;
    margin: 0;
    text-wrap: balance;
  }
  .contact-direct {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--border);
    padding-top: 28px;
  }
  .contact-direct-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--accent-text);
    margin-bottom: 12px; font-family: var(--font-label);}
  .contact-direct-list { display: flex; flex-direction: column; gap: 4px; }
  .contact-direct-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.25s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
  }
  .contact-direct-row:last-child { border-bottom: none; }
  .contact-direct-row:hover {
    color: var(--accent-text);
    transform: translateX(4px);
  }
  .contact-direct-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s;
  }
  .contact-direct-row:hover .contact-direct-icon {
    background: var(--accent);
    color: var(--on-accent);
  }
  .contact-direct-icon svg { width: 16px; height: 16px; }
  .contact-direct-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
  }
  .contact-direct-kind {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 500; font-family: var(--font-label);}
  .contact-direct-value {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: inherit;
  }

  @media (max-width: 1020px) {
    .contact-layout { grid-template-columns: 1fr; gap: 56px; }
    .contact-copy { order: -1; }
  }
  @media (max-width: 600px) {
    .contact-section { padding: 80px 20px; }
    .contact-form-wrap { padding: 28px 22px; }
    .contact-row { grid-template-columns: 1fr; gap: 18px; }
    .contact-layout { gap: 40px; }
  }

  /* ========== FOOTER ========== */
  .site-footer {
    border-top: 1px solid var(--border); padding: 80px 48px 40px;
    max-width: 1280px; margin: 0 auto;
  }
  .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 56px; margin-bottom: 56px; }
  .footer-brand .footer-logo { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; color: var(--text); }
  .footer-brand .footer-logo span { color: var(--text); }
  .footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 320px; }
  .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; font-family: var(--font-label);}
  .footer-col a { display: block; color: var(--text); text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color 0.2s; }
  .footer-col a:hover { color: var(--accent-text); }
  .footer-col .contact-link { display: flex; align-items: center; gap: 9px; }
  /* Navegación del pie en dos columnas (se llenan de arriba abajo): el pie no crece hacia abajo con cada página nueva */
  .footer-nav-links { columns: 2; column-gap: 36px; }
  .footer-nav-links a { break-inside: avoid; }
  .footer-col .contact-link svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: color 0.2s; }
  .footer-col .contact-link:hover svg { color: var(--accent-text); }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-muted);
  }
  .footer-social { display: flex; gap: 16px; }
  .footer-social a { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
  .footer-social a:hover { color: var(--accent-text); }

  /* ========== SOCIAL PROOF / TESTIMONIALS — layout 2 columnas con carrusel parcial ========== */
  .testimonials-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    max-width: 1240px;
    margin: 40px auto 56px;
    align-items: start;
  }
  .testimonials-aside {
    display: flex; flex-direction: column; gap: 28px;
    padding-top: 8px;
  }
  .testimonials-quote-mark {
    font-family: var(--font-heading);
    font-size: 96px;
    line-height: 0.8;
    color: var(--text-muted);
    opacity: 0.35;
    font-weight: 700;
    user-select: none;
  }
  .testimonials-aside-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    margin: 0;
  }
  .testimonials-arrows {
    display: flex; gap: 14px; margin-top: 8px;
  }
  .testimonials-arrows button {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s;
  }
  .testimonials-arrows button:hover {
    border-color: var(--accent);
    color: var(--accent-text);
    transform: translateY(-1px);
  }
  .testimonials-arrows button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
  }
  .testimonials-arrows svg { width: 16px; height: 16px; }

  /* Viewport con máscara que insinúa continuidad a la derecha */
  .testimonials-viewport {
    position: relative;
    overflow: hidden;
    padding: 4px 0 4px 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 80px), transparent 100%);
  }
  .testimonials-track {
    display: flex;
    gap: 20px;
    transition: transform 0.7s var(--ease-out-quint);
    will-change: transform;
  }
  .testimonial-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 28px 24px 24px; position: relative;
    flex: 0 0 calc((100% - 40px) / 2.4); /* 2 enteras + ~0.4 de la 3ra */
    min-height: 260px;
    display: flex; flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .testimonial-card:hover { border-color: rgba(143, 169, 255,0.35); box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
  .testimonial-card::before {
    content: '\201C'; position: absolute; top: 12px; left: 20px;
    font-size: 3rem; color: var(--accent-text); opacity: 0.3; line-height: 1;
  }
  .testimonial-text { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 20px; padding-top: 20px; font-style: normal; flex: 1; }
  .testimonial-author { display: flex; align-items: center; gap: 12px; }
  .testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--success));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: var(--white);
    flex-shrink: 0;
  }
  .testimonial-stars { color: var(--accent-text); font-size: 12px; letter-spacing: 2px; margin-bottom: 4px; }

  /* Tablet: aside arriba, cards abajo */
  @media (max-width: 960px){
    .testimonials-layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .testimonials-quote-mark { font-size: 72px; }
    .testimonial-card { flex-basis: calc((100% - 20px) / 1.6); }
  }
  @media (max-width: 600px){
    .testimonials-layout { gap: 24px; }
    .testimonial-card { flex-basis: 86%; min-height: 240px; }
    .testimonials-viewport {
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
              mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .testimonials-track { transition: none; }
  }

  /* ========== COMPARISON — una sola tabla editorial ========== */
  /* La diferencia gets its own breathing room as a distinct scene */
  .section-difference { padding-top: clamp(56px, 10vh, 128px); padding-bottom: clamp(56px, 10vh, 128px); }
  .comparison-wrapper { margin-top: 0; }

  /* Tres modelos de producción como tarjetas pares. Se dejó de usar tabla:
     con tres columnas los ejes ya no aplican igual a los tres. */
  .prod-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .prod-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
  .prod-card.nuestra { border-color: rgba(57,101,250,0.34); background: rgba(57,101,250,0.045); }
  .prod-head { display: flex; align-items: flex-start; gap: 10px; }
  .prod-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 8px; background: var(--text-muted); }
  .prod-card.nuestra .prod-dot { background: var(--accent); }
  .prod-titles { flex: 1; min-width: 0; }
  .prod-name { font-family: var(--font-heading); font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
  .prod-card.nuestra .prod-name { color: var(--accent-text); }
  .prod-tag { display: inline-block; margin-top: 7px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: var(--font-label);}
  .prod-card.nuestra .prod-tag { color: var(--accent-text); }
  .prod-i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 700; font-family: var(--font-body); cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; }
  .prod-i:hover { border-color: var(--accent); color: var(--accent-text); }
  .prod-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Nota flotante: no empuja el contenido de la tarjeta al abrirse */
  .prod-nota {
    display: none; position: absolute; top: 62px; left: 18px; right: 18px; z-index: 6;
    font-size: 12.5px; line-height: 1.6; color: var(--text);
    padding: 15px 17px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 14px 36px -14px rgba(0,0,0,0.4);
  }
  .prod-card.nuestra .prod-nota { border-color: rgba(57,101,250,0.28); }
  .prod-nota.abierta { display: block; }
  /* Escritorio: basta con pasar el cursor o llegar con teclado */
  @media (hover: hover) and (pointer: fine) {
    .prod-card:has(.prod-i:hover) .prod-nota,
    .prod-card:has(.prod-i:focus-visible) .prod-nota { display: block; }
  }
  .prod-que { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
  .prod-card.nuestra .prod-que { color: var(--text); }
  .prod-label { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; font-family: var(--font-label);}
  .prod-list { display: flex; flex-direction: column; gap: 9px; }
  .prod-item { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
  .prod-card.nuestra .prod-item { color: var(--text); }
  .prod-num { flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 2px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--surface-hover); color: var(--text-muted); border: 1px solid var(--border); }
  .prod-card.nuestra .prod-num { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .prod-cuando { flex: 1; }
  .prod-time { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .prod-time-l { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: var(--font-label);}
  .prod-time-v { font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
  .prod-card.nuestra .prod-time-v { color: var(--accent-text); }
  
  @media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr; max-width: 560px; gap: 14px; } .prod-time { padding-top: 14px; } }
  /* ========== HEADER ACTIVE STATE ========== */
  .header-nav a.active { color: var(--accent-text); }

  /* ========== THEME TOGGLE ========== */
  .theme-toggle {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 6px 10px; cursor: pointer; font-size: 16px; line-height: 1;
    display: flex; align-items: center; gap: 4px; transition: all 0.3s;
  }
  .theme-toggle:hover { border-color: var(--accent); }
  .theme-toggle .toggle-icon { transition: transform 0.3s; }
  [data-theme="light"] .theme-toggle .toggle-icon.moon { display: inline; }
  [data-theme="light"] .theme-toggle .toggle-icon.sun { display: none; }
  .theme-toggle .toggle-icon.moon { display: none; }
  .theme-toggle .toggle-icon.sun { display: inline; }

  /* Light mode specific overrides */
  [data-theme="light"] .hero-backdrop::before {
    background: radial-gradient(ellipse, rgba(57, 101, 250,0.08) 0%, transparent 70%);
  }
  [data-theme="light"] .result-price,
  [data-theme="light"] .dur-readout .big-number {
    color: var(--accent-text);
    font-style: normal;
  }
  [data-theme="light"] .floating-cta { box-shadow: 0 4px 24px rgba(57, 101, 250,0.35); }
  [data-theme="light"] .testimonial-card,
  [data-theme="light"] .faq-item { box-shadow: var(--card-shadow); }
  [data-theme="light"] .configurador-section::before {
    background: linear-gradient(180deg, rgba(57, 101, 250,0.04) 0%, rgba(57, 101, 250,0.01) 100%);
  }
  [data-theme="light"] .configurador-shell {
    box-shadow: 0 8px 60px rgba(0,0,0,0.06), 0 0 0 1px rgba(57, 101, 250,0.08);
  }
  [data-theme="light"] .configurador-topbar { background: rgba(57, 101, 250,0.03); }
  [data-theme="light"] .configurador-sidebar { background: rgba(57, 101, 250,0.02); }
  [data-theme="light"] .sidebar-price-box {
    background: rgba(57, 101, 250,0.06); border-color: rgba(57, 101, 250,0.15);
  }
  [data-theme="light"] .configurador-mobile-summary {
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08);
  }
  /* ========== EASING TOKENS ========== */
  :root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  }

  /* ========== S4. DE TU MATERIAL AL VIDEO FINAL — diagrama vivo ========== */
  /* full-bleed section: background reaches both screen edges, content stays centered */
  .material {
    position: relative;
    padding: clamp(48px, 8.5vh, 110px) 0;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
  }
  /* layered, full-width atmosphere — gradients + glow + subtle color shifts */
  .material-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(1100px 700px at 12% 18%, rgba(57, 101, 250,0.10), transparent 60%),
      radial-gradient(1000px 800px at 92% 82%, rgba(122,184,224,0.07), transparent 62%),
      radial-gradient(900px 600px at 70% 30%, rgba(125,203,138,0.05), transparent 60%),
      linear-gradient(180deg, rgba(15,15,14,0) 0%, rgba(57, 101, 250,0.035) 50%, rgba(15,15,14,0) 100%);
  }
  /* moving aurora glow for a "system processing" feel */
  .material-glow {
    position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(620px 620px at 30% 40%, rgba(57, 101, 250,0.10), transparent 55%),
      radial-gradient(560px 560px at 75% 65%, rgba(122,184,224,0.08), transparent 55%);
    filter: blur(20px);
    animation: materialAurora 18s ease-in-out infinite alternate;
  }
  @keyframes materialAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.02); opacity: 0.85; }
    50%  { transform: translate3d(2%, 1%, 0)  scale(1.06); opacity: 1; }
    100% { transform: translate3d(4%, -1%, 0) scale(1.03); opacity: 0.9; }
  }
  /* top + bottom hairline glow edges */
  .material::before, .material::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(57, 101, 250,0.4), transparent);
    pointer-events: none;
  }
  .material::before { top: 0; }
  .material::after  { bottom: 0; }
  /* faint technical grid — full bleed */
  .material-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, var(--border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.045;
    mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 75%);
  }
  /* content wrapper — centered, max-width */
  .material-inner {
    position: relative; z-index: 2;
    max-width: 1320px; margin: 0 auto; padding: 0 48px;
  }

  .material-head { text-align: center; margin-bottom: 4px; }
  .material-head .section-subtitle { max-width: 80ch; font-size: var(--text-md); line-height: 1.55; text-wrap: balance; margin-top: 10px; }

  /* The living canvas — a HUD panel. Atmosphere lives in two ::before / ::after layers:
       ::before = dot grid (technical texture, not decoration)
       ::after  = ambient color halos (green / blue / gold from the system palette)
     Both sit behind the wires (z-index:0) and fade at the edges with a radial mask
     so the texture never reaches the section frame. */
  .material-canvas {
    position: relative;
    margin-top: 28px;
    min-height: 640px;
    isolation: isolate;
  }
  /* dot grid — radial-gradient tile, almost imperceptible up close, structural at distance */
  .material-canvas::before {
    content: "";
    position: absolute; inset: -40px;
    z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(234,234,230,0.16) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: 0 0;
    opacity: 0.55;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 0%, black 55%, transparent 100%);
  }
  /* ambient halos — green / blue / gold positioned behind the three "stations" of the journey.
     No animation: the wires already breathe, the background should not. */
  .material-canvas::after {
    content: "";
    position: absolute; inset: -10%;
    z-index: 0; pointer-events: none;
    background:
      /* dorado: behind left column (Tu material) */
      radial-gradient(360px 280px at 18% 38%, rgba(57, 101, 250,0.07), transparent 70%),
      /* verde: behind right cliente/nosotros pair (Nuestra interpretación) */
      radial-gradient(380px 300px at 62% 22%, rgba(125,203,138,0.06), transparent 70%),
      /* azul: behind the final video (Resultado final) */
      radial-gradient(420px 320px at 70% 70%, rgba(122,184,224,0.085), transparent 72%);
    filter: blur(6px);
  }
  /* light mode: dot grid becomes dark on light surface; halos warmer to avoid washing out */
  [data-theme="light"] .material-canvas::before {
    background-image: radial-gradient(rgba(15,15,14,0.14) 1px, transparent 1.4px);
    opacity: 0.5;
  }
  [data-theme="light"] .material-canvas::after {
    background:
      radial-gradient(360px 280px at 18% 38%, rgba(57, 101, 250,0.10), transparent 70%),
      radial-gradient(380px 300px at 62% 22%, rgba(125,203,138,0.08), transparent 70%),
      radial-gradient(420px 320px at 70% 70%, rgba(122,184,224,0.10), transparent 72%);
  }
  /* mobile: drop the dot grid (too dense on small viewports) and tone halos */
  @media (max-width: 980px) {
    .material-canvas::before { display: none; }
    .material-canvas::after { opacity: 0.7; filter: blur(12px); }
  }
  /* SVG connector layer sits above bg, below cards */
  .material-wires {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1; overflow: visible; pointer-events: none;
  }
  .wire {
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 1.4;
    opacity: 0.45;
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
    transition: stroke-dashoffset 1.1s var(--ease-out-quint);
    filter: drop-shadow(0 0 6px rgba(57, 101, 250,0.25));
  }
  .material-canvas.lit .wire { stroke-dashoffset: 0; }
  .wire.w2 { transition-delay: 0.12s; }
  .wire.w3 { transition-delay: 0.24s; }
  .wire.w4 { transition-delay: 0.36s; }
  .wire.w-out { stroke-width: 1.8; opacity: 0.55; transition-delay: 0.5s; }

  /* fiber-optic flow: a bright short dash travelling along each wire toward the video */
  .wire-flow {
    fill: none;
    stroke: var(--accent-hover);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0;
    /* a short lit segment + long gap; pathLength normalized via large dasharray */
    stroke-dasharray: 14 1000;
    filter: drop-shadow(0 0 6px rgba(84, 120, 255,0.9)) drop-shadow(0 0 12px rgba(57, 101, 250,0.5));
    animation: wireFlow var(--flowdur, 3s) linear infinite;
  }
  .material-canvas.lit .wire-flow { opacity: 0.95; }
  @keyframes wireFlow {
    from { stroke-dashoffset: 1014; }
    to   { stroke-dashoffset: 0; }
  }

  /* technological endpoints — sit at every wire's origin and arrival */
  .wire-node {
    fill: var(--bg);
    stroke: var(--accent-text);
    stroke-width: 1.2;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-quint) 0.35s;
    filter: drop-shadow(0 0 4px rgba(57, 101, 250,0.55));
  }
  .wire-node.end { fill: var(--accent); stroke: var(--accent-hover); }
  .material-canvas.lit .wire-node { opacity: 1; }
  .wire-node-halo {
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 1;
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity 0.5s var(--ease-out-quint) 0.4s;
    animation: wireNodePulse 2.8s ease-in-out infinite;
  }
  .material-canvas.lit .wire-node-halo { opacity: 0.55; }
  @keyframes wireNodePulse {
    0%,100% { transform: scale(1);   opacity: 0.55; }
    50%     { transform: scale(2.4); opacity: 0;    }
  }
  @media (prefers-reduced-motion: reduce) {
    .wire-node-halo { animation: none !important; opacity: 0 !important; }
  }
  [data-theme="light"] .wire-node { fill: var(--surface); }
  [data-theme="light"] .wire-node.end { fill: var(--accent); }

  /* ============================================================
     Nodes (parallax layers) — node-as-card system
     Each .node-card is a small system module: head (role+id), media, foot (insight).
     The medium is the hero; the chrome dignifies it without competing with it.
     ============================================================ */
  .node {
    position: absolute;
    z-index: 3;
    will-change: transform;
    transition: transform 0.22s var(--ease-out-quart, cubic-bezier(0.25,1,0.5,1));
  }
  .node-card {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(20,20,18,0.72);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.42);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
  }
  /* role accent — a thin tinted strip at the very top of the card */
  .node-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--role-color, var(--border));
    opacity: 0.55;
    z-index: 4;
    transition: opacity 0.18s ease;
  }
  .pair-raw  .node-card { --role-color: rgba(170,170,165,0.85); }
  .pair-us   .node-card { --role-color: #7DCB8A; }
  .nc-final              { --role-color: #7AB8E0; }

  /* head row — "Tu material 01" / "Nuestra interpretación" / "Resultado final" */
  .nc-head {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: var(--font-label);
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(0,0,0,0.18);
    min-width: 0;
  }
  .nc-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--role-color, var(--text-muted));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--role-color, #888) 22%, transparent);
    flex: 0 0 6px;
  }
  .nc-role { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
  .nc-id { margin-left: auto; color: var(--text-muted); font-weight: 600; letter-spacing: 0.1em; flex: 0 0 auto; }
  /* hide numeric id on "our interpretation" cards — role label is already descriptive */
  .pair-us .nc-id { display: none; }

  /* media slot — the hero of the card */
  .nc-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
  }
  .nc-media img,
  .nc-media .loop-video {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }

  /* foot — microinsight (kicker + 2-3 word synthesis). Only on "Process" / "Output" cards. */
  .nc-foot {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 10px 9px 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.22);
  }
  .nc-kicker {
    font-family: var(--font-label);
    font-size: 9px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .nc-insight {
    font-family: var(--font-heading);
    font-size: 13px; line-height: 1.25; font-style: normal;
    color: var(--text); font-weight: 600;}

  /* hover treatment lives on .is-hover (JS-managed) so timings can be asymmetric */
  .node-card {
    transform-origin: center center;
    /* default (resting / leaving): fast return */
    transition: transform 0.18s var(--ease-out-quart, cubic-bezier(.2,.7,.2,1)),
                border-color 0.18s ease,
                box-shadow 0.18s ease;
  }

  /* ===== Final video card — a card too, just larger ===== */
  .node-video { width: 460px; }
  .nc-final .nv-frame {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; background: #000;
  }
  .nc-final video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .nc-final { border-color: rgba(122,184,224,0.45); box-shadow: 0 26px 80px rgba(0,0,0,0.6), 0 0 60px rgba(122,184,224,0.08); }
  .nc-final .nc-kicker { color: #7AB8E0; }

  /* sound toggle — bottom-right of the media slot */
  .nv-sound {
    position: absolute; bottom: 10px; right: 10px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(15,15,14,0.6); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.28);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.22s ease; padding: 0;
  }
  .nv-sound:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.07); }
  .nv-sound:hover svg path[fill="white"] { fill: var(--on-accent); }
  .nv-sound:hover svg [stroke="white"] { stroke: var(--on-accent); }

  /* arrival emphasis */
  .node-video { opacity: 0; transform: translateY(28px) scale(0.97); transition: opacity 0.8s var(--ease-out-quint), transform 0.8s var(--ease-out-quint); transition-delay: 0.45s; }
  .material-canvas.lit .node-video { opacity: 1; transform: translateY(0) scale(1); }

  /* generic node entrance */
  .node-anim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-quint), transform 0.7s var(--ease-out-quint); }
  .material-canvas.lit .node-anim { opacity: 1; transform: translateY(0); }
  .material-canvas.lit .node-anim.d1 { transition-delay: 0.05s; }
  .material-canvas.lit .node-anim.d2 { transition-delay: 0.13s; }
  .material-canvas.lit .node-anim.d3 { transition-delay: 0.21s; }
  .material-canvas.lit .node-anim.d4 { transition-delay: 0.29s; }
  .material-canvas.lit .node-anim.d5 { transition-delay: 0.37s; }

  /* ---- DESKTOP positions: editorial moodboard, denser & more system-like ----
     Compacted layout — pairs cluster tighter, notes nest closer to the result,
     and the video sits higher so the canvas reads as a single creative board
     rather than a tall sequence. */
  @media (min-width: 981px) {
    .material-canvas { min-height: 612px; }

    /* Horizontal grid — re-centered. Canvas useful width ≈ 1224px.
         left margin           : 130
         left col cliente      : 130 -> 290   (w 160)
         intra-pair gap        :  32   (+14% vs prev)
         left col nosotros     : 322 -> 514   (w 192)
         inter-column gap      : 160
         right col cliente     : 674 -> 834   (w 160)
         intra-pair gap        :  32
         right col nosotros    : 866 -> 1058  (w 192)
         right margin (cols)   : 166
         video (w 430) is centered under the Dron pair, sitting
         left = 651 -> 1081 (right margin 143). Margins read symmetric. */

    /* ===== RIGHT SIDE — Dron pair + final video ===== */
    .n-dron-c    { top: 6px;   left: 674px;  width: 160px; }
    .n-dron-n    { top: 6px;   left: 866px;  width: 192px; }
    .n-video     { top: 210px; left: 651px;  width: 430px; }

    /* ===== LEFT COLUMN — 3 stacked pairs ===== */
    .n-fach-c    { top: 0;     left: 130px; width: 160px; }
    .n-fach-n    { top: 0;     left: 322px; width: 192px; }
    .n-amen-c    { top: 198px; left: 130px; width: 160px; }
    .n-amen-n    { top: 198px; left: 322px; width: 192px; }
    .n-int-c     { top: 396px; left: 130px; width: 160px; }
    .n-int-n     { top: 396px; left: 322px; width: 192px; }
  }

  /* ---- legend ---- */
  .material-legend {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 12px; margin-top: 22px;
  }
  .ml-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em;
    color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border);
    padding: 8px 16px; border-radius: var(--r-full);
  }
  .ml-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
  .ml-raw .dot   { background: var(--text-muted); }
  .ml-us .dot    { background: #7DCB8A; }
  .ml-final .dot { background: #7AB8E0; }
  .ml-arrow { color: var(--accent-text); font-size: var(--text-md); opacity: 0.6; }
  @media (max-width: 980px) {
    .material-legend { flex-direction: column; gap: 10px; margin-top: 32px; }
    .ml-arrow { display: none; }
    .ml-pill { width: auto; }
  }

  /* ---- loop video cards (Amenidades / Interiores) ---- */
  .loop-card { position: relative; }
  .loop-card .loop-video {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }

  /* Hover behavior — asymmetric timings, no resting dim.
     Entry: ~0.55s smooth expansion. Exit: ~0.18s snap back.
     The hovered node lifts; other media dims only while a sibling is active. */
  @media (min-width: 981px) and (hover: hover) {
    .nc-media, .nv-frame { transition: filter 0.18s ease; }

    /* SLOW entry — applied while .is-hover is on the node */
    .node.is-hover { z-index: 50 !important; }
    .node.is-hover .node-card {
      transition: transform 0.55s cubic-bezier(.22,.61,.36,1),
                  border-color 0.45s ease,
                  box-shadow 0.45s ease;
      transform: scale(1.085);
      border-color: color-mix(in oklch, var(--role-color, var(--accent)) 80%, transparent) !important;
      box-shadow: 0 30px 80px rgba(0,0,0,0.7),
                  0 0 0 1px color-mix(in oklch, var(--role-color, var(--accent)) 45%, transparent),
                  0 0 50px color-mix(in oklch, var(--role-color, var(--accent)) 22%, transparent) !important;
    }
    .node.is-hover .node-card::before { opacity: 1; }
    .node.is-hover .nc-media,
    .node.is-hover .nv-frame { filter: brightness(1.05) !important; }

    /* dim others ONLY while there is an active hover in the canvas */
    .material-canvas.has-hover .node:not(.is-hover) .nc-media,
    .material-canvas.has-hover .node:not(.is-hover) .nv-frame { filter: grayscale(0.2) brightness(0.62); }
  }

  /* ============ WHITE MODE refinements (scoped, dark mode untouched) ============ */
  [data-theme="light"] .node-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(15,15,14,0.06);
    backdrop-filter: none;
  }
  [data-theme="light"] .nc-head {
    background: rgba(15,15,14,0.03);
    border-bottom: 1px solid rgba(15,15,14,0.06);
    color: rgba(15,15,14,0.55);
  }
  [data-theme="light"] .nc-role { color: var(--text); }
  [data-theme="light"] .nc-foot {
    background: rgba(15,15,14,0.025);
    border-top: 1px solid rgba(15,15,14,0.06);
  }
  [data-theme="light"] .nc-insight { color: var(--text); }
  [data-theme="light"] .nc-final { box-shadow: 0 4px 22px rgba(122,184,224,0.18), 0 0 0 1px rgba(122,184,224,0.25); }

  @media (min-width: 981px) and (hover: hover) {
    [data-theme="light"] .material-canvas.has-hover .node:not(.is-hover) .nc-media,
    [data-theme="light"] .material-canvas.has-hover .node:not(.is-hover) .nv-frame { filter: grayscale(0.12) brightness(0.92); }
    [data-theme="light"] .node.is-hover .nc-media,
    [data-theme="light"] .node.is-hover .nv-frame { filter: brightness(1.02) !important; }
  }

  

  /* ---- MOBILE / TABLET: collapse the canvas into a clean vertical journey ---- */
  @media (max-width: 980px) {
    .material { padding: 88px 22px; }
    .material-grid { display: none; }
    .material-canvas {
      min-height: 0; margin-top: 40px;
      display: flex; flex-direction: column; gap: 26px;
    }
    .material-wires { display: none; }
    .node {
      position: relative !important;
      top: auto !important; left: auto !important; right: auto !important;
      width: 100% !important; max-width: 460px; margin: 0 auto;
      transform: none !important;
    }
    .node-video { width: 100% !important; }
    /* simple vertical connector between stacked nodes */
    .node:not(:last-child)::after {
      content: ""; position: absolute; left: 50%; bottom: -26px;
      width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent);
      opacity: 0.5; transform: translateX(-50%);
    }
  }
  /* respect reduced motion for the whole section */
  @media (prefers-reduced-motion: reduce) {
    .material-canvas .wire { stroke-dashoffset: 0 !important; transition: none !important; }
    .material-canvas .node-anim,
    .material-canvas .node-video { opacity: 1 !important; transform: none !important; transition: none !important; }
    .node { transition: none !important; }
    .wire-flow { animation: none !important; opacity: 0 !important; }
    .material-glow { animation: none !important; }
  }

  /* ========== SECTION ATMOSPHERES — subtle tone/glow shifts per section ==========
     Gives the scroll a cinematic, editorial cadence without breaking minimalism.
     Each section gets a faint, full-bleed glow; temperature alternates warm/neutral/cool.
     IMPORTANT: glows must reach the viewport edges even when the section itself is
     constrained to max-width 1280px. We break out using 100vw + left:50%/translateX. */
  #como-funciona, #la-diferencia, #portafolio, #configurador, #nosotros, #testimonios, #faq {
    position: relative; isolation: isolate;
  }
  #como-funciona::before, #la-diferencia::before, #portafolio::before,
  #configurador::before, #nosotros::before, #testimonios::before, #faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: -1;
    pointer-events: none;
  }
  /* warm gold wash */
  #como-funciona::before {
    background: radial-gradient(900px 460px at 78% 12%, rgba(57, 101, 250,0.05), transparent 62%);
  }
  /* cool, slightly darker — "the difference" */
  #la-diferencia::before {
    background:
      radial-gradient(1000px 520px at 15% 20%, rgba(122,184,224,0.045), transparent 60%),
      linear-gradient(180deg, rgba(15,15,14,0.0), rgba(15,15,14,0.18) 60%, rgba(15,15,14,0.0));
  }
  /* neutral, airy — portfolio */
  #portafolio::before {
    background: radial-gradient(820px 420px at 88% 85%, rgba(57, 101, 250,0.04), transparent 60%);
  }
  /* warm focus on the configurator (conversion) */
  #configurador::before {
    background: radial-gradient(760px 520px at 50% 0%, rgba(57, 101, 250,0.06), transparent 58%);
  }
  /* cool editorial — about */
  #nosotros::before {
    background: radial-gradient(900px 500px at 20% 10%, rgba(122,184,224,0.04), transparent 60%);
  }
  /* warm, social-proof glow */
  #testimonios::before {
    background: radial-gradient(900px 480px at 80% 18%, rgba(57, 101, 250,0.045), transparent 60%);
  }
  #faq::before {
    background: radial-gradient(700px 400px at 50% 100%, rgba(57, 101, 250,0.035), transparent 60%);
  }
  /* Light mode: shift the darkening overlay to a soft lightening for the same cadence */
  [data-theme="light"] #la-diferencia::before {
    background:
      radial-gradient(1000px 520px at 15% 20%, rgba(122,150,190,0.05), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.025) 60%, rgba(255,255,255,0));
  }
  [data-theme="light"] #nosotros::before {
    background: radial-gradient(900px 500px at 20% 10%, rgba(120,150,190,0.05), transparent 60%);
  }

  .reveal       { opacity: 0; transform: translateY(32px); transition: opacity 0.65s var(--ease-out-quint), transform 0.65s var(--ease-out-quint); }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity 0.65s var(--ease-out-quint), transform 0.65s var(--ease-out-quint); }
  .reveal-left.visible  { opacity: 1; transform: translateX(0); }
  .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.65s var(--ease-out-quint), transform 0.65s var(--ease-out-quint); }
  .reveal-right.visible { opacity: 1; transform: translateX(0); }
  .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.6s var(--ease-out-quint), transform 0.6s var(--ease-out-quint); }
  .reveal-scale.visible { opacity: 1; transform: scale(1); }
  .stagger-1 { transition-delay: 0.08s; }
  .stagger-2 { transition-delay: 0.18s; }
  .stagger-3 { transition-delay: 0.28s; }
  .stagger-4 { transition-delay: 0.38s; }
  .stagger-5 { transition-delay: 0.48s; }

  /* Hero parallax layer */
  .hero-content { position: relative; z-index: 1; }

  /* ========== HERO ENTRANCE — pageload choreography ========== */
  .hero-content .hero-eyebrow,
  .hero-content .hero-headline,
  .hero-content .hero-tagline,
  .hero-content .hero-actions {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.72s var(--ease-out-quint), transform 0.72s var(--ease-out-quint);
  }
  .hero-loaded .hero-eyebrow  { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
  .hero-loaded .hero-headline { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
  .hero-loaded .hero-tagline  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
  .hero-loaded .hero-actions  { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }

  /* ========== HERO AMBIENT GLOW ========== */
  .hero-backdrop::before { animation: heroGlowDrift 14s ease-in-out infinite alternate; }
  @keyframes heroGlowDrift {
    0%   { transform: translateY(0) scale(1); opacity: 0.85; }
    50%  { transform: translateY(-26px) scale(1.08); opacity: 1; }
    100% { transform: translateY(12px) scale(0.95); opacity: 0.8; }
  }

  /* ========== HOW-STEP FLOATING ICON IDLE ========== */
  .how-step:nth-child(1) .how-step-icon { animation: iconFloat 5.4s ease-in-out infinite; }
  .how-step:nth-child(2) .how-step-icon { animation: iconFloat 5.4s ease-in-out 1.1s infinite; }
  .how-step:nth-child(3) .how-step-icon { animation: iconFloat 5.4s ease-in-out 2.2s infinite; }
  .how-step:nth-child(4) .how-step-icon { animation: iconFloat 5.4s ease-in-out 3.3s infinite; }
  .how-step:nth-child(5) .how-step-icon { animation: iconFloat 5.4s ease-in-out 4.4s infinite; }
  @keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
  }
  .how-step:hover .how-step-icon { animation-play-state: paused; }

  /* ========== STAT COUNTER ========== */
  .stat-number { transition: color 0.3s; }
  .stat-number.counting { animation: countPop 0.22s var(--ease-out-quint) forwards; }
  @keyframes countPop {
    0%   { transform: scale(0.88); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* ========== CARD HOVERS ========== */
  .testimonial-card {
    transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
  }
  .testimonial-card:hover { transform: translateY(-4px); }
  .ind-card {
    transition: transform 0.25s var(--ease-out-quart), border-color 0.2s, background 0.2s, box-shadow 0.25s;
  }
  .ind-card:hover:not(.selected) { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
  .ind-card.selected { transform: translateY(-2px); }
  .quality-card {
    transition: transform 0.25s var(--ease-out-quart), border-color 0.25s, box-shadow 0.25s;
  }
  .quality-card:hover:not(.selected) { transform: translateY(-3px); }

  /* ========== BUTTON RIPPLE ========== */
  .btn-hero-primary, .btn-primary, .header-cta { overflow: hidden; position: relative; }
  .ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transform: scale(0);
    animation: rippleOut 0.5s var(--ease-out-expo) forwards;
    pointer-events: none;
  }
  @keyframes rippleOut { to { transform: scale(4); opacity: 0; } }

  /* ========== INPUT FOCUS GLOW ========== */
  .field-input:focus-visible,
  input[type="text"]:focus-visible,
  input[type="email"]:focus-visible,
  input[type="tel"]:focus-visible,
  select:focus-visible, textarea:focus-visible {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(57, 101, 250, 0.22);
    outline: none;
  }

  /* ========== FORM STEP TRANSITIONS ========== */
  .step-section { display: none; opacity: 0; transform: translateY(14px); }
  .step-section.active {
    display: block;
    animation: stepEnter 0.38s var(--ease-out-quint) forwards;
  }
  .step-section.exiting {
    display: block;
    animation: stepExit 0.20s var(--ease-in-quart) forwards;
    pointer-events: none;
  }
  @keyframes stepEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes stepExit  { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-10px); } }

  /* ========== FAQ ACCORDION ========== */
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.38s var(--ease-out-quint), padding 0.38s var(--ease-out-quint); }
  .faq-question .faq-icon { transition: transform 0.3s var(--ease-out-quint), color 0.2s; }
  .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent-text); }

  /* ========== SHOWCASE TAB INDICATOR ========== */
  .showcase-tabs { position: relative; }
  .tab-indicator {
    position: absolute; top: 0; left: 0;
    background: var(--accent); border-radius: var(--r-full);
    transition: left 0.38s var(--ease-out-quint), width 0.38s var(--ease-out-quint),
                top 0.38s var(--ease-out-quint), height 0.38s var(--ease-out-quint);
    z-index: 0; pointer-events: none;
  }
  .showcase-tab { position: relative; z-index: 1; transition: color 0.25s, border-color 0.25s, background 0.25s; }
  .showcase-tab.active { background: transparent; border-color: transparent; color: var(--white); }

  /* ========== HEADER NAV ACTIVE ========== */
  .header-nav a { position: relative; transition: color 0.2s; }
  .header-nav a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: center;
    transition: transform 0.25s var(--ease-out-quint);
  }
  .header-nav a.active::after, .header-nav a:hover::after { transform: scaleX(1); }

  /* ========== PROGRESS BAR ========== */
  .progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 2px; transition: width 0.5s var(--ease-out-quint); width: 0%;
  }

  /* ========== CFG BADGE PULSE ========== */
  @keyframes cfgPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(57, 101, 250,0.5); }
    50%       { opacity: 0.7; transform: scale(0.8); box-shadow: 0 0 0 6px rgba(57, 101, 250,0); }
  }

  /* ========== CTA HEADER GLOW ========== */
  @keyframes ctaPulseGlow {
    0%, 100% { box-shadow: 0 4px 18px rgba(57, 101, 250,0.30); }
    50%       { box-shadow: 0 6px 30px rgba(57, 101, 250,0.52), 0 0 0 5px rgba(57, 101, 250,0.10); }
  }

  /* ========== REDUCED MOTION ========== */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .hero-content .hero-eyebrow,
    .hero-content .hero-headline,
    .hero-content .hero-tagline,
    .hero-content .hero-actions { opacity: 1; transform: none; transition: none; }
    .how-step .how-step-icon { animation: none; }
    .hero-backdrop::before, .hero-backdrop::after { animation: none; }
    .step-section.active { animation: none; opacity: 1; transform: none; }
    .step-section.exiting { animation: none; }
    .ripple { animation: none; }
    .faq-answer { transition: none; }
    .stat-number.counting { animation: none; }
  }

  /* ========== SHOWCASE TABS — editorial selector con íconos ========== */
  .showcase-tabs {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 32px;
  }
  .showcase-tab {
    padding: 16px 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
    transition: border-color 0.22s, background 0.22s, transform 0.22s var(--ease-out-quint), box-shadow 0.22s;
    text-align: left;
    display: flex; align-items: center; gap: 14px;
    position: relative;
  }
  /* Leading icon tile — gives each category a recognizable visual hook */
  
  
  
  
  
  .showcase-tab:hover {
    border-color: rgba(143, 169, 255,0.45); background: var(--surface-hover);
    transform: translateX(3px);
  }
  
  
  .showcase-tab.active {
    background: rgba(57, 101, 250,0.1);
    border-color: var(--accent);
    box-shadow: 0 6px 22px rgba(57, 101, 250,0.14);
  }
  
  
  
  /* Remove old tab indicator since tabs are now vertical */
  .tab-indicator { display: none !important; }
  /* Responsive: on mobile revert to horizontal scroll row */
  @media (max-width: 768px) {
    .showcase-tabs { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .showcase-tab { white-space: nowrap; padding: 12px 14px; flex-direction: row; flex: 0 0 auto; }
    .showcase-tab:hover { transform: none; }
    
    
    
  }

  /* ========== CTA FLOTANTE (mobile) ========== */
  .floating-cta {
    display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 150; background: var(--accent); color: var(--white);
    padding: 14px 28px; border-radius: var(--r-lg); font-size: 14px; font-weight: 700;
    text-decoration: none; box-shadow: 0 4px 24px rgba(57, 101, 250,0.4);
    border: none; cursor: pointer;
  }
  .floating-cta:hover { background: var(--accent-hover); }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 768px) {
    .site-header { padding: 0 16px; }
    .header-nav { gap: 10px; }
    .header-nav a:not(.header-cta) { display: none; }
    .header-nav .lang-toggle,
    .header-nav .theme-toggle { display: none; } /* se mueven al drawer */
    .mobile-nav-toggle { display: inline-flex; }
    .lang-toggle { display: flex; }
    /* Header CTA más compacto en móvil */
    .site-header .header-cta { padding: 9px 18px; font-size: var(--text-xs); }
    /* hero h1 uses clamp() — no override needed */
    
    
    .showcase-tabs { justify-content: center; flex-wrap: wrap; }
    
    .showcase-tab { font-size: 11px; padding: 8px 12px; }
    
    
    
    
    
    
    
    
    
    .cards-grid.cols-3, .industry-grid { grid-template-columns: repeat(2, 1fr); }
    /* .ind-other en movil: tambien dentro del grid */
    .quality-cards { grid-template-columns: 1fr; }
    /* step-question uses clamp() — no override needed */
    /* result-price uses clamp() */
    .result-actions { flex-direction: column; }
    .result-actions button { width: 100%; }
    .email-row { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .floating-cta { display: block; }
    .section { padding: 80px 20px; }
    /* section-title uses clamp() — no override needed */
    /* Hero móvil: stack vertical limpio — primero el video, después el texto.
       Sale del modo "video flotante absoluto" del desktop para evitar sobreposición. */
    .hero {
      padding: 110px 20px 60px;
      min-height: auto;
      justify-content: flex-start;
      gap: 28px;
    }
    .hero-bg-video {
      position: relative;
      top: auto; right: auto; bottom: auto; left: auto;
      transform: none;
      width: 100%;
      max-width: none;
      height: auto;
      aspect-ratio: 16 / 10;
      max-height: 56vh;
      opacity: 1;
      order: -1; /* primero el video */
      margin: 0 auto;
    }
    .hero-bg-video canvas { width: 100%; height: 100%; }
    .hero-content {
      order: 1; /* después el texto */
      max-width: 100%;
    }
    [data-theme="light"] .hero-bg-video { opacity: 1; }
    /* Glows del hero atenuados en móvil para no competir con el video en flujo */
    .hero-backdrop::before, .hero-backdrop::after { opacity: 0.55; }
    /* Configurador mobile */
    .configurador-layout { grid-template-columns: 1fr; min-height: auto; }
    .configurador-layout::after { display: none; }
    .configurador-sidebar { display: none; }
    .configurador-mobile-summary { display: flex; }
    .configurador-main { padding: 28px 20px; }
    .configurador-shell { border-radius: var(--r-md); }
    /* configurador h2 uses clamp() — no override needed */
    .configurador-section { padding: 60px 20px; }
    .configurador-topbar { padding: 12px 20px; }
  }

    /* ===== ADAPTACION A PANTALLAS BAJAS =========================================
     Arriba de 880px de alto el sitio queda EXACTAMENTE igual que el original:
     misma familia, mismo tamano, mismo tracking. Solo por debajo de ese umbral
     la escala grande cede un poco para que las secciones entren en el viewport.
     El cuerpo de texto (base, sm, xs) NO se toca en ningun caso: reducirlo
     afectaria la lectura, no el encuadre.
     Para revertir: borrar estos dos bloques.
  ========================================================================== */
  @media (max-height: 880px) {
    :root {
      --text-2xl: clamp(1.5rem, 3.2vh, 2rem);
      --text-3xl: clamp(1.65rem, 4vh, 2.5rem);
      --text-4xl: clamp(1.9rem, 5.9vh, 3.5rem);
      --text-xl:  1.4rem;
      --text-md:  1.05rem;
    }
    .section:not(.pf-section), .contact-section { padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(40px, 7vh, 80px); }
    .material { padding-top: clamp(36px, 6vh, 76px); padding-bottom: clamp(36px, 6vh, 76px); }
    .configurador-section { padding-top: clamp(34px, 5.5vh, 62px); padding-bottom: clamp(34px, 5.5vh, 62px); }
    .section-subtitle { margin-bottom: clamp(20px, 3.2vh, 40px); }
  }
  @media (max-height: 760px) {
    :root {
      --text-2xl: clamp(1.4rem, 3vh, 2rem);
      --text-3xl: clamp(1.55rem, 3.7vh, 2.5rem);
      --text-4xl: clamp(1.8rem, 5.4vh, 3.5rem);
      --text-xl:  1.3rem;
      --text-md:  1rem;
    }
    .section:not(.pf-section), .contact-section { padding-top: clamp(32px, 5.5vh, 60px); padding-bottom: clamp(32px, 5.5vh, 60px); }
    .material { padding-top: clamp(30px, 5vh, 56px); padding-bottom: clamp(30px, 5vh, 56px); }
    .configurador-section { padding-top: clamp(28px, 4.5vh, 50px); padding-bottom: clamp(28px, 4.5vh, 50px); }
    .section-subtitle { margin-bottom: clamp(16px, 2.6vh, 32px); }
  }

  /* ===== Estado del formulario de contacto (exito / error) ===== */
  .contact-status {
    margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-sm);
    font-size: var(--text-sm); line-height: 1.5; border: 1px solid transparent;
  }
  .contact-status.is-ok {
    color: var(--success); background: rgba(95,169,122,0.12); border-color: rgba(95,169,122,0.35);
  }
  .contact-status.is-error {
    color: var(--error); background: rgba(224,106,106,0.10); border-color: rgba(224,106,106,0.32);
  }
  .contact-status a { color: inherit; text-decoration: underline; }
  .contact-submit:disabled { opacity: 0.72; cursor: default; }

  /* ===== Burbuja flotante de WhatsApp =====
     z-index 160: por encima del CTA flotante y de la barra del cotizador (150),
     por debajo del drawer movil (199) y del header (200), para que el menu la tape. */
  .wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 160;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #25D366; color: #FFFFFF; text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.32), 0 0 0 0 rgba(37,211,102,0.55);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .wa-float svg { width: 30px; height: 30px; display: block; }
  .wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
  .wa-float:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
  .wa-float::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: waPulso 2.8s ease-out infinite;
  }
  @keyframes waPulso {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  @media (max-width: 768px) {
    /* sube para no chocar con .floating-cta (bottom:20px) ni con la barra del cotizador */
    .wa-float { right: 16px; bottom: 88px; width: 52px; height: 52px; }
    .wa-float svg { width: 27px; height: 27px; }
  }
  @media print { .wa-float { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .wa-float, .wa-float::after { transition: none; animation: none; }
  }

  /* ---- Selector de cotizador ---- */
  
  .cfg-swi {
    text-align: center; background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r-md); padding: 24px 22px; cursor: pointer; color: var(--text);
    font-family: var(--font-body); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    transition: border-color .18s, background .18s, transform .18s;
  }
  .cfg-swi:hover { border-color: var(--accent-text); transform: translateY(-2px); }
  .cfg-swi:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
  .cfg-swi.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .cfg-swi-t {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg);
    letter-spacing: -.01em; line-height: 1.2;
  }
  .cfg-swi.is-on .cfg-swi-t { color: var(--accent-text); }
  
  .cfg-pane[hidden] { display: none; }

  /* ---- Plan de contenido: hereda el lenguaje del cotizador 1 ---- */
  .pc-shell {
    max-width: 860px; margin: 0 auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px;
    box-shadow: var(--card-shadow);
  }
  .pc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
  .pc-progress-step {
    font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
    font-weight: 500; color: var(--text-muted); white-space: nowrap; font-family: var(--font-label);}
  .pc-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .pc-progress-fill { height: 100%; width: 33%; background: var(--accent); border-radius: 2px; transition: width .3s ease; }
  .pc-step { display: none; }
  .pc-step.is-on { display: block; animation: pcEntra .28s ease both; }
  @keyframes pcEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .pc-q-sub { text-align: center; font-size: var(--text-sm); color: var(--text-muted); margin: -20px 0 26px; line-height: 1.55; }
  .pc-nav { margin-top: 22px; text-align: center; }
  .pc-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); padding: 6px 10px; }
  .pc-back:hover { color: var(--accent-text); }
  .pc-back:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 3px; }

  .pc-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; margin: 0 auto; }
  .pc-tier {
    background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
    padding: 16px 8px; text-align: center; cursor: pointer; color: var(--text);
    font-family: var(--font-body); transition: border-color .16s, background .16s, transform .16s;
  }
  .pc-tier:hover { border-color: var(--accent-text); transform: translateY(-2px); }
  .pc-tier:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .pc-tier.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .pc-tier-n { display: block; font-size: 26px; font-weight: 700; line-height: 1.05; }
  
  .pc-tier-d { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; opacity: .85; }
   .pc-tier.is-on .pc-tier-d { color: var(--accent-text); }

  .pc-resumen {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    padding: 13px 18px; margin: -14px auto 22px; max-width: 560px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: var(--text-sm); color: var(--text-muted);
  }
  .pc-resumen strong { color: var(--text); font-weight: 600; }

  .pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin: 0 auto; }
  .pc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .pc-label { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); font-family: var(--font-label);}
  .pc-input {
    width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--font-body); font-size: var(--text-base);
  }
  .pc-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .pc-submit {
    display: block; margin: 20px auto 0; background: var(--accent); color: var(--on-accent);
    border: none; border-radius: var(--r-sm); padding: 13px 34px; font-family: var(--font-body);
    font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: background .16s;
  }
  .pc-submit:hover { background: var(--accent-hover); }
  .pc-submit:disabled { opacity: .72; cursor: default; }
  .pc-submit:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
  .pc-status { max-width: 560px; margin: 16px auto 0; padding: 12px 16px; border-radius: var(--r-sm); font-size: var(--text-sm); line-height: 1.5; border: 1px solid transparent; }
  .pc-status.is-ok { color: var(--success); background: rgba(95,169,122,.12); border-color: rgba(95,169,122,.35); }
  .pc-status.is-error { color: var(--error); background: rgba(224,106,106,.10); border-color: rgba(224,106,106,.32); }
  .pc-status a { color: inherit; text-decoration: underline; }
  .pc-legal { max-width: 560px; margin: 14px auto 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; text-align: center; }
  .pc-legal a { color: var(--text-muted); text-decoration: underline; }

  .pc-resultado {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm);
    overflow: hidden; margin: 24px auto 0; max-width: 700px;
  }
  .pc-cifra { background: var(--bg); padding: 18px 12px; text-align: center; }
  .pc-cifra.is-total { background: var(--accent-soft); }
  .pc-cifra-k { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-label);}
  .pc-cifra-v { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
  .pc-cifra.is-total .pc-cifra-v { color: var(--accent-text); font-size: 23px; }

  .pc-incluye { max-width: 700px; margin: 26px auto 0; }
  
  .pc-incluye-t { display: block; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); margin-bottom: 10px; font-family: var(--font-label);}
  .pc-incluye ul { margin: 0; padding-left: 20px; }
  .pc-incluye li { margin-bottom: 7px; font-size: var(--text-sm); color: var(--text); }
  

  .pc-calendly { margin-top: 10px; }
  .pc-siguiente {
    display: block; margin: 26px auto 0; background: var(--accent); color: var(--on-accent);
    border: none; border-radius: var(--r-sm); padding: 13px 40px; font-family: var(--font-body);
    font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: background .16s;
  }
  .pc-siguiente:hover { background: var(--accent-hover); }
  .pc-siguiente:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
  .pc-confirmado {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    max-width: 620px; margin: -14px auto 22px; padding: 13px 18px;
    background: var(--accent-soft); border: 1px solid rgba(57,101,250,.28);
    border-radius: var(--r-sm); font-size: var(--text-sm); color: var(--text-muted);
  }
  .pc-confirmado strong { color: var(--text); font-weight: 600; }
  .pc-cierre.pc-cierre-solo { margin-top: 0; padding-top: 0; border-top: none; }
  .pc-cierre { margin: 28px auto 0; max-width: 700px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; }
  
  .pc-cierre p { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 16px; }
  .pc-cta-final { display: inline-block; background: var(--accent); color: var(--on-accent); padding: 13px 30px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; font-size: var(--text-base); transition: background .16s; }
  .pc-cta-final:hover { background: var(--accent-hover); }
  .pc-cta-final:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

  .pc-recurrente { margin: 26px auto 0; max-width: 700px; padding: 15px 20px; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--r-sm); text-align: center; }
  .pc-recurrente p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
  .pc-recurrente a { color: var(--accent-text); font-weight: 600; text-decoration: none; margin-left: 6px; }
  .pc-recurrente a:hover { text-decoration: underline; }

  @media (max-width: 768px) {
    
    .cfg-swi { padding: 16px 18px; }
    .pc-shell { padding: 22px 16px; }
    .pc-tiers { grid-template-columns: repeat(2, 1fr); }
    .pc-fields { grid-template-columns: 1fr; }
    .pc-resultado { grid-template-columns: repeat(2, 1fr); }
    .pc-submit { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) { .pc-step.is-on { animation: none; } }

/* =====================================================================
   ARQUITECTURA MULTIPÁGINA (2026-09) · componentes nuevos
   Todo lo de aquí abajo es nuevo; lo de arriba es el CSS original de
   index.html sin cambios. Mismos tokens de color y tipografía.
   ===================================================================== */

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Navegación: página actual */
.header-nav a[aria-current="page"] { color: var(--accent-text); position: relative; }
.header-nav a[aria-current="page"]:not(.header-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--accent); }
.mobile-nav-panel a[aria-current="page"] { color: var(--accent-text); }
.header-nav { gap: 26px; }
.header-tools { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); }
.header-tools .theme-toggle, .header-tools .lang-toggle { width: 32px; height: 30px; padding: 0; justify-content: center; border: 0; border-radius: var(--r-full); background: transparent; font-size: 14px; }
.header-tools .lang-toggle { width: auto; padding: 0 9px; font: 700 11.5px/1 var(--font-body); letter-spacing: 0.06em; color: var(--text-muted); }
.header-tools .lang-flag { display: none; }
.header-tools .theme-toggle:hover, .header-tools .lang-toggle:hover { background: var(--accent-soft); color: var(--text); }
.header-tools i { width: 1px; height: 16px; background: var(--border); }
@media (max-width: 1100px) and (min-width: 769px) { .header-nav { gap: 20px; } }
/* Con 6 enlaces el menú ya no cabe en tabletas: se usa el menú desplegable desde 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  .header-nav a:not(.header-cta), .header-nav .lang-toggle, .header-nav .theme-toggle, .header-nav .header-tools { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
}

@media (max-width: 768px) { .header-nav .header-tools { display: none; } }
/* Los anclajes internos no quedan debajo del header fijo */
main [id] { scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
.section-label.is-left { text-align: left; }
.section-title em { font-style: normal; color: var(--accent-text); }

/* ---------- Hero: mismo componente, misma escala y 100% del alto de pantalla en todas las páginas ----------
   El titular usa la escala de Inicio (.hero h1.hero-headline); puede ocupar 3 o 4 líneas.
   El texto se queda en la columna izquierda para no montarse sobre el reel. */
.hero.hero--page, .hero.hero--compact { min-height: 100vh; min-height: 100svh; }
.hero.hero--page h1.hero-headline, .hero.hero--compact h1.hero-headline { max-width: none; }
.hero.hero--page h1 .hero-rotator-word, .hero.hero--compact h1 .hero-rotator-word { white-space: normal; align-self: flex-start; }
.hero--page .hero-tagline, .hero--compact .hero-tagline { max-width: 44ch; }
/* El subrayado sigue al texto aunque el acento ocupe dos líneas (el ::after original mide toda la caja) */
.hero--page .hero-rotator-word::after, .hero--compact .hero-rotator-word::after { display: none; }
.hero--page .hero-rotator-word, .hero--compact .hero-rotator-word { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.hero-support { max-width: 50ch; margin: -18px 0 36px; padding-left: 14px; border-left: 2px solid var(--accent); font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); }
@media (min-width: 1025px) {
  .hero--page .hero-content, .hero--compact .hero-content { max-width: min(880px, 62%); }
}
@media (max-width: 768px) {
  .hero, .hero.hero--page, .hero.hero--compact { min-height: 100svh; }
  .hero--compact { justify-content: center; }
  .hero--compact .hero-bg-video { max-height: 30vh; }
  .hero-support { margin-top: -12px; }
}
/* Ilustración de nubes del hero (una por página, en el lugar del reel).
   85% de opacidad y un «wiggle» de escala uniforme (ancho y alto juntos) con una deriva
   vertical mínima: se siente como una nube flotando. Ciclo largo y desigual para que no se note el loop. */
.hero-art { display: flex; align-items: center; justify-content: center; }
@media (min-width: 769px) {
  /* Más angosta y más a la derecha que el reel: el titular (hasta 4 líneas) conserva su espacio */
  .hero .hero-bg-video.hero-art { width: 46.2%; max-width: 704px; right: 2%; height: 79.2%; max-height: 704px; }
}
.hero-cloud { width: 100%; height: 100%; object-fit: contain; opacity: 0.85; transform-origin: 50% 55%;
  animation: nubeFlota 16s ease-in-out infinite; will-change: transform; user-select: none; -webkit-user-drag: none; }
@keyframes nubeFlota {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.97); }
  24%      { transform: translate3d(0, -9px, 0) scale(1.04); }
  46%      { transform: translate3d(0, -3px, 0) scale(0.985); }
  72%      { transform: translate3d(0, -12px, 0) scale(1.055); }
  88%      { transform: translate3d(0, -5px, 0) scale(1.005); }
}
/* En tema claro, nube blanca sobre fondo claro: una sombra azul muy suave le da volumen */
[data-theme="light"] .hero-cloud { filter: drop-shadow(0 22px 34px rgba(57, 101, 250, 0.16)) drop-shadow(0 2px 6px rgba(23, 25, 29, 0.06)); }
@media (prefers-reduced-motion: reduce) { .hero-cloud { animation: none; } }
@media (max-width: 768px) { .hero-art { aspect-ratio: 1 / 0.8; max-height: 46.2vh; } .hero--compact .hero-art { max-height: 33vh; } }

/* Servicios: las tres formas de producir como puerta de entrada a "La diferencia" */
.hero-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 34px; }
.hero-modes-k { width: 100%; font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.hero-mode { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); color: var(--text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.hero-mode:hover { border-color: var(--accent); transform: translateY(-1px); }
.hero-mode i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero-mode:nth-of-type(2) i { background: linear-gradient(90deg, var(--accent) 50%, #7AB8E0 50%); }
.hero-mode:nth-of-type(3) i { background: #7AB8E0; }

/* Inicio · salida doble del carrusel "Una probada" */
.pf-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 560px) { .pf-cta { padding: 0 20px; } .pf-cta a { flex: 1 1 100%; text-align: center; } }

/* ---------- Pestañas (componente genérico) ---------- */
[role="tabpanel"][hidden] { display: none !important; }
[role="tabpanel"] { animation: tabIn 0.45s var(--ease-out-quint, ease-out); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [role="tabpanel"] { animation: none; } }

/* ---------- Cotiza tu proyecto · dos productos ----------
   Modalidad A (Video a la medida): azul institucional #3965FA.
   Modalidad B (Paquete para redes): expresión secundaria del sistema,
   del azul #5478FF al azul cielo #7AB8E0 (el tono de los halos del hero
   y de "Cómo lo transformamos") sobre lavanda #E9EBFF. No hay tonos
   cálidos: se retiraron del sistema el 1 de septiembre.
   El cambio es un cruce de capas (opacidad), no un salto de tema. */
.configurador-section { --modo-dur: 0.6s; }
.cfg-atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cfg-atmos span { position: absolute; inset: 0; transition: opacity var(--modo-dur) ease; }
.cfg-atmos-a { background: radial-gradient(900px 520px at 78% 40%, rgba(57,101,250,0.10), transparent 65%); opacity: 1; }
.cfg-atmos-b { background: radial-gradient(900px 520px at 78% 40%, rgba(122,184,224,0.20), transparent 65%), linear-gradient(180deg, transparent, rgba(233,235,255,0.55) 45%, transparent); opacity: 0; }
[data-modo="B"] .cfg-atmos-a { opacity: 0; }
[data-modo="B"] .cfg-atmos-b { opacity: 1; }

/* Toggle: dos posiciones del mismo tamaño y una pastilla que se desliza */
.cfg-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(560px, 100%); margin: 0 auto 30px; padding: 6px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(23, 25, 29, 0.06), inset 0 1px 0 rgba(255,255,255,0.6); }
.cfg-toggle-thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: var(--r-full); background: linear-gradient(135deg, #2B4FD1, #3965FA); box-shadow: 0 8px 22px rgba(57,101,250,0.35); transition: transform 0.5s cubic-bezier(.22,.8,.2,1), background 0.5s ease, box-shadow 0.5s ease; }
[data-modo="B"] .cfg-toggle-thumb { transform: translateX(100%); background: linear-gradient(135deg, #5478FF, #7AB8E0); box-shadow: 0 8px 22px rgba(122,184,224,0.45); }
.cfg-toggle .cfg-swi { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 12px 16px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text); cursor: pointer; text-align: center; transform: none; transition: color 0.35s ease; }
.cfg-toggle .cfg-swi:hover { transform: none; background: transparent; }
.cfg-toggle .cfg-swi-t { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); letter-spacing: 0; color: inherit; line-height: 1.2; }
.cfg-toggle .cfg-swi-k { font-size: 12.5px; color: var(--text-muted); transition: color 0.35s ease; }
.cfg-toggle .cfg-swi.is-on, .cfg-toggle .cfg-swi.is-on .cfg-swi-t { color: #fff; }
.cfg-toggle .cfg-swi.is-on .cfg-swi-k { color: rgba(255,255,255,0.85); }
.cfg-toggle .cfg-swi:not(.is-on):hover .cfg-swi-t { color: var(--accent-text); }
.cfg-toggle .cfg-swi:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Composición por modalidad: información (clara) + cotizador a todo lo ancho de su zona.
   A: cotizador a la izquierda, texto a la derecha. B: texto a la izquierda, cotizador a la derecha. */
.cfg-duo { display: grid; grid-template-columns: clamp(290px, 23vw, 330px) minmax(0, 1fr); gap: 14px; width: 94%; max-width: 1380px; margin: 0 auto; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(23, 25, 29, 0.08); overflow: clip; }
.cfg-info { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2vw, 30px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg); }

#cfgPaneA .cfg-duo { grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 330px); }
#cfgPaneA .cfg-info { order: 2; }
#cfgPaneA .cfg-product { order: 1; }

/* Sin marco de color: el cotizador ocupa toda su zona */
.cfg-product { position: relative; min-width: 0; }
.cfg-product .configurador-shell { width: 100%; max-width: none; margin: 0; height: 100%; display: flex; flex-direction: column; box-shadow: none; }
.cfg-product .configurador-shell > .configurador-layout { flex: 1; }
.cfg-product .pc-shell { max-width: none; margin: 0; height: 100%; box-shadow: none; }
/* La columna de resumen y su fondo/divisor (::after del original, fijo en 360px) comparten la misma medida */
.cfg-product .configurador-layout { --cfg-side: 280px; grid-template-columns: minmax(0, 1fr) var(--cfg-side); }
.cfg-product .configurador-layout::after { width: var(--cfg-side); }
.cfg-product .configurador-sidebar, [data-theme="light"] .cfg-product .configurador-sidebar { background: transparent; }
.cfg-product .configurador-main { padding: 40px 30px; }
/* Paso 4: las tarjetas de nivel nunca rebasan su columna */
.cfg-product .quality-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-product .quality-card .q-name { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 1181px) and (max-width: 1400px) {
  .cfg-product .configurador-layout { --cfg-side: 250px; }
  .cfg-product .configurador-main { padding: 36px 24px; }
  .cfg-product .quality-cards { gap: 10px; }
  .cfg-product .quality-card { padding: 22px 14px; }
  .cfg-product .quality-card .q-name { font-size: 17px; }
  .cfg-product .configurador-sidebar { padding: 26px 18px; }
}

/* Transición entre modalidades: sale hacia un lado y entra desde el lado del toggle */
.cfg-pane:not([hidden]) { animation: none; }
.cfg-pane.is-leaving { animation: cfgOut 0.2s ease-in forwards; }
.cfg-pane.is-entering .cfg-info { animation: cfgIn 0.5s cubic-bezier(.22,.8,.2,1) both; }
.cfg-pane.is-entering .cfg-product { animation: cfgIn 0.56s cubic-bezier(.22,.8,.2,1) 0.06s both; }
@keyframes cfgOut { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -36px)); } }
@keyframes cfgIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 56px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cfg-pane.is-leaving, .cfg-pane.is-entering .cfg-info, .cfg-pane.is-entering .cfg-product { animation: none; }
  .cfg-toggle-thumb, .cfg-atmos span { transition: none; }
}

@media (max-width: 1180px) {
  .cfg-duo, #cfgPaneA .cfg-duo { grid-template-columns: 1fr; }
  #cfgPaneA .cfg-info, #cfgPaneA .cfg-product { order: 0; }
}
@media (max-width: 768px) {
  .cfg-duo { width: 100%; padding: 8px; border-radius: var(--r-lg); }
  .cfg-product .configurador-layout { grid-template-columns: 1fr; }
  .cfg-product .configurador-main { padding: 26px 18px; }
  .cfg-toggle .cfg-swi { padding: 10px 8px; }
  .cfg-toggle .cfg-swi-t { font-size: var(--text-sm); }
  .cfg-toggle .cfg-swi-k { font-size: 11.5px; }
}
.page-cotizador .configurador-section { padding-top: calc(var(--header-h, 64px) + clamp(36px, 6vh, 72px)); }
.page-cotizador .floating-cta { display: none !important; }

/* ---------- Banda de cierre (CTA) ---------- */
.cta-band { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-glow), transparent 55%), var(--surface);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 40px; align-items: center; }
.cta-band .section-label { text-align: left; margin-bottom: 10px; }
.cta-band-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; }
.cta-band-title em { font-style: normal; color: var(--accent-text); }
.cta-band-text { color: var(--text-muted); margin-top: 10px; line-height: var(--lh-relaxed); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-band-promo { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; }
.cta-band-promo:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } .cta-band-actions { justify-content: flex-start; } }

/* ---------- Nosotros · Quiénes somos (pestañas verticales + escenario) ----------
   Pestañas y escenario comparten la misma altura: el primer y el último
   borde de la lista coinciden con el borde de la imagen. */

.who { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 3vw, 44px); max-width: 1120px; margin: 0 auto; align-items: stretch; }
.who-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.who-tab { flex: 1 1 0; display: grid; grid-template-columns: 44px 1fr; align-content: center; column-gap: 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 24px 12px 24px 22px; color: var(--text-muted); font: inherit; cursor: pointer; transition: color 0.2s, background 0.2s; position: relative; }
.who-tab::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transition: transform 0.3s var(--ease-out-quint, ease-out); }
.who-tab:hover { color: var(--text); }

.who-tab .who-t { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.3; letter-spacing: -0.005em; }

.who-tab[aria-selected="true"] { color: var(--text); }
.who-tab[aria-selected="true"]::before { transform: scaleY(1); }

.who-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.who-stage { position: relative; min-height: 500px; border-radius: var(--r-lg); overflow: hidden; background: #0d0f16; border: 1px solid var(--border); }

@media (max-width: 900px) {
  .who { grid-template-columns: 1fr; }
  .who-tabs { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; scrollbar-width: none; }
  .who-tab { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-full); padding: 10px 16px; }
  .who-tab::before { display: none; }
  
  .who-tab .who-t { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }
  
  .who-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .who-stage { min-height: 460px; }
  
  
  
}

/* ---------- Nosotros · Cómo entendemos la producción (3 etapas) ----------
   La línea de conexión vive en su propia fila con la misma cuadrícula que
   las tarjetas: cada nodo queda exactamente sobre el centro de su columna. */
.stages { max-width: 1120px; margin: 0 auto; }
.stages-rail, .stages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stages-rail { position: relative; margin-bottom: 18px; }
.stages-rail::before { content: ""; position: absolute; top: 50%; left: calc(100% / 6); right: calc(100% / 6); height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%); }
.stage-node { position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: var(--r-full); background: var(--bg); border: 1px solid var(--border); font: 700 12px/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.stage-node b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent-text); font-size: 12px; letter-spacing: 0; }
.stage-node.is-ai { border-color: var(--accent); }
.stage-node.is-ai b { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stage { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.stage.is-ai { border-color: var(--accent); background: radial-gradient(120% 80% at 50% 0%, var(--accent-soft), transparent 70%), var(--surface); box-shadow: 0 14px 44px var(--accent-glow); }
.stage-step { display: none; font: 700 11px/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.stage-lead { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.22; letter-spacing: -0.01em; text-wrap: balance; }
.stage-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); margin-bottom: 6px; }
.stage-k { font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stage-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; line-height: 1.45; font-size: var(--text-sm); }
.stage-list li::before { content: ""; width: 7px; height: 7px; margin-top: 0.5em; border-radius: 50%; background: var(--accent); justify-self: center; }
.stage-people { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.stage-team { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stage-team li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: var(--r-full); background: var(--bg); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); }
.stage-team li svg { color: var(--accent-text); flex: none; }
.stage.is-ai .stage-team li { background: var(--surface); }
.stages-foot { max-width: 760px; margin: 34px auto 0; text-align: center; }
.stages-foot p { font-family: var(--font-heading); font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; font-weight: 600;}
.stages-foot p em { font-style: normal; color: var(--accent-text); }
.stages-foot a { display: inline-block; margin-top: 12px; color: var(--accent-text); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.stages-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .stages-rail { display: none; }
  .stages-grid { grid-template-columns: 1fr; }
  .stage-step { display: block; }
}

/* ---------- Pestañas horizontales (soluciones) ---------- */

/* ---------- Nosotros · Cómo te podemos ayudar (tarjetas-pestaña + panel) ---------- */
.help { max-width: 1120px; margin: 0 auto; }
.help-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.help-tab { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 14px; padding: 18px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.help-tab:hover { border-color: var(--accent); }
.help-ico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); transition: background 0.2s, color 0.2s; }
.help-k { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-label);}
.help-t { grid-column: 2; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }

.help-tab[aria-selected="true"] { border-color: var(--accent); background: radial-gradient(120% 120% at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); box-shadow: 0 10px 30px var(--accent-glow); }
.help-tab[aria-selected="true"] .help-ico { background: var(--accent); color: var(--on-accent); }

.help-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ilustración de nubes sobre el mismo fondo técnico de «Dos productos» / «Cómo lo transformamos»:
   retícula de puntos, halos azules y nodos. La nube flota (escala uniforme + deriva mínima). */

.help-t { font-size: 1.05rem !important; }

@media (max-width: 960px) {
  .help-tabs { grid-template-columns: 1fr; }
  
  
  
  
  
}

/* ---------- Nosotros · Herramientas (editorial, rieles a todo lo ancho) ----------
   Los rieles avanzan solos y NO se detienen con el cursor (antes se pausaban
   y cada tarjeta brincaba al hacer hover). */
.tools-ed-head { max-width: 1180px; margin: 0 auto clamp(26px, 4vh, 44px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px 40px; }
.tools-ed-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -0.025em; }
.tools-ed-title em { font-style: normal; color: var(--accent-text); }
.tools-ed-sub { max-width: 36ch; color: var(--text-muted); line-height: 1.6; }
.tools-ed-row { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 10px 0; }
.tools-ed-row + .tools-ed-row { margin-top: 6px; }
.tools-ed-label { max-width: 1180px; margin: 0 auto 10px; padding: 0 48px; display: flex; align-items: baseline; gap: 12px; font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.tools-ed-label em { font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; text-transform: none; color: var(--accent-text); }
.tools-ed .ab-tools-rail { margin: 0; }
.tools-ed .ab-tools-track, .tools-ed .ab-tools-track:hover { animation-play-state: running; }
/* Loop sin saltos: el desplazamiento de -50% debe medir exactamente un ciclo.
   Sin padding ni gap en la pista; el espacio va dentro de cada pieza (margin-right). */
.tools-ed .ab-tools-track { gap: 0; padding: 0; animation-name: ab-marquee-h; animation-timing-function: linear; animation-iteration-count: infinite; }
.tools-ed .ab-tool { margin-right: 12px; }
.tools-ed .ab-tool { padding: 16px 22px; border-radius: var(--r-md); gap: 14px; pointer-events: none; }
.tools-ed .ab-tool:hover { transform: none; border-color: var(--border); }
.tools-ed .ab-tool-logo { width: 42px; height: 42px; }
.tools-ed .ab-tool-name { font-size: 16px; }
@media (max-width: 768px) { .tools-ed-head { grid-template-columns: 1fr; } .tools-ed-label { padding: 0 20px; } .tools-ed .ab-tool { padding: 12px 16px; } .tools-ed .ab-tool-logo { width: 32px; height: 32px; } .tools-ed .ab-tool-name { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .tools-ed .ab-tools-track { animation: none; } }

/* ---------- Servicios · soluciones en pestañas ----------
   Fondo del ejemplo en la misma familia que "Cómo lo transformamos"
   (Proceso): retícula de puntos, halo azul y nodos. */
.sol-section { position: relative; }

.sol-stage { max-width: 1180px; margin: 0 auto; overflow: clip; border-radius: var(--r-lg); }
.sol-panel.is-leaving { animation: cfgOut 0.2s ease-in forwards; }
.sol-panel.is-entering .sol-body, .sol-panel.is-entering .sol-media { animation: cfgIn 0.5s cubic-bezier(.22,.8,.2,1) both; }
.sol-panel.is-entering .sol-media { animation-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) { .sol-panel.is-leaving, .sol-panel.is-entering .sol-body, .sol-panel.is-entering .sol-media { animation: none; } }
.sol-k { font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: -10px; }

#sol-b .sol-for span { background: rgba(122,184,224,0.18); color: var(--accent-text); }
.sol-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.sol-media { position: relative; isolation: isolate; display: grid; place-items: center; padding: clamp(28px, 4vw, 52px); min-height: 460px; overflow: hidden;
  background: radial-gradient(520px 380px at 30% 30%, rgba(57,101,250,0.16), transparent 62%), radial-gradient(460px 360px at 80% 85%, rgba(122,184,224,0.12), transparent 62%), var(--bg); }
.sol-media::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(57,101,250,0.35) 1px, transparent 1.5px); background-size: 22px 22px; opacity: 0.55;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%); }
.sol-media::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 14% 22%, transparent 5px, rgba(57,101,250,0.55) 5.5px, transparent 7px),
              radial-gradient(circle at 88% 16%, transparent 4px, rgba(57,101,250,0.45) 4.5px, transparent 6px),
              radial-gradient(circle at 10% 84%, transparent 4px, rgba(57,101,250,0.45) 4.5px, transparent 6px),
              radial-gradient(circle at 90% 80%, transparent 5px, rgba(57,101,250,0.55) 5.5px, transparent 7px); }
.sol-shot { position: relative; z-index: 1; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 24px 60px rgba(13, 20, 60, 0.35); background: #000; transition: transform 0.35s var(--ease-out-quint, ease-out); }
.sol-shot:hover { transform: translateY(-4px); }
.sol-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sol-shot .pfg-play { top: auto; bottom: 10px; right: 10px; }
.sol-shot.is-wide { width: 100%; aspect-ratio: 16 / 9; }
/* Video a la medida: dos ejemplos horizontales escalonados */
.sol-duo { position: relative; z-index: 1; width: 100%; max-width: 520px; aspect-ratio: 16 / 13.5; margin-bottom: 26px; }
.sol-duo .sol-shot { position: absolute; width: 80%; }
.sol-duo .sol-shot:nth-child(1) { top: 0; left: 0; }
.sol-duo .sol-shot:nth-child(2) { right: 0; bottom: 0; z-index: 2; box-shadow: 0 28px 70px rgba(13, 20, 60, 0.42), 0 0 0 4px var(--bg); }
.sol-duo .sol-shot:hover { z-index: 3; }
/* Nombre y duración de cada ejemplo (solo en los horizontales; en el abanico de reels se ocultan) */
.sol-shot-name, .sol-shot-dur { display: none; }
.sol-duo .sol-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 12, 30, 0.72), transparent 48%); pointer-events: none; }
.sol-duo .sol-shot-name, .sol-duo .sol-shot-dur { display: block; position: absolute; z-index: 1; bottom: 12px; color: #fff; }
.sol-duo .sol-shot-name { left: 14px; font-weight: 700; font-size: 14px; }
.sol-duo .sol-shot-dur { left: auto; right: 52px; font-size: 12px; font-weight: 600; opacity: 0.85; }
.sol-duo .sol-shot .pfg-play { z-index: 2; }
/* La pieza de atrás lleva su botón arriba: la de adelante tapa su esquina inferior */
.sol-duo .sol-shot:nth-child(1) .pfg-play { top: 10px; bottom: auto; }
.sol-duo .sol-shot:nth-child(1)::after { background: linear-gradient(to bottom, rgba(8, 12, 30, 0.6), transparent 42%); }
.sol-duo .sol-shot:nth-child(1) .sol-shot-name { top: 14px; bottom: auto; }
.sol-duo .sol-shot:nth-child(1) .sol-shot-dur { top: 16px; bottom: auto; }
/* Trío: el video destacado va al frente y los otros dos asoman detrás */
.sol-duo.is-trio { aspect-ratio: 16 / 14.2; }
.sol-duo.is-trio .sol-shot { width: 60%; }
.sol-duo.is-trio .sol-shot:nth-child(2) { top: 0; left: 0; right: auto; bottom: auto; z-index: 1; box-shadow: 0 18px 44px rgba(13, 20, 60, 0.28); }
.sol-duo.is-trio .sol-shot:nth-child(3) { top: 5%; right: 0; left: auto; bottom: auto; z-index: 1; box-shadow: 0 18px 44px rgba(13, 20, 60, 0.28); }
.sol-duo.is-trio .sol-shot.is-dest { width: 88%; left: 6%; right: auto; top: auto; bottom: 0; z-index: 3; box-shadow: 0 30px 80px rgba(13, 20, 60, 0.45), 0 0 0 4px var(--bg); }
.sol-duo.is-trio .sol-shot:not(.is-dest)::after { background: linear-gradient(to bottom, rgba(8, 12, 30, 0.6), transparent 42%); }
.sol-duo.is-trio .sol-shot:not(.is-dest) .pfg-play { top: 10px; bottom: auto; }
.sol-duo.is-trio .sol-shot:not(.is-dest) .sol-shot-name { top: 12px; bottom: auto; font-size: 13px; }
.sol-duo.is-trio .sol-shot:not(.is-dest) .sol-shot-dur { top: 14px; bottom: auto; }
.sol-duo.is-trio .sol-shot.is-dest::after { background: linear-gradient(to top, rgba(8, 12, 30, 0.72), transparent 48%); }
.sol-duo.is-trio .sol-shot.is-dest .pfg-play { top: auto; bottom: 10px; }
.sol-duo.is-trio .sol-shot.is-dest .sol-shot-name { top: auto; bottom: 14px; font-size: 16px; }
.sol-duo.is-trio .sol-shot.is-dest .sol-shot-dur { top: auto; bottom: 16px; }
.sol-duo.is-trio .sol-shot:not(.is-dest):hover { z-index: 4; }
@media (max-width: 560px) { .sol-duo.is-trio .sol-shot:not(.is-dest) .sol-shot-name, .sol-duo.is-trio .sol-shot:not(.is-dest) .sol-shot-dur { display: none; } }

.sol-caption { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.sol-body { padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; gap: 22px; }
.sol-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.sol-def { color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--text-md); margin-top: -8px; }
.sol-specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sol-specs div { padding: 14px 0 14px 16px; border-left: 1px solid var(--border); }
.sol-specs div:first-child { padding-left: 0; border-left: 0; }
.sol-specs small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-family: var(--font-label);}
.sol-specs b { font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.sol-for { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-for span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); }

.sol-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.btn-sm { display: inline-block; background: var(--accent); color: var(--on-accent); padding: 12px 22px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--text-sm); text-decoration: none; transition: background 0.2s, transform 0.2s; }
.btn-sm:hover { background: var(--accent-hover); transform: translateY(-1px); }
.link-sm { color: var(--accent-text); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.link-sm:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .sol-panel { grid-template-columns: 1fr; } .sol-media { min-height: 320px; } .sol-specs { grid-template-columns: 1fr 1fr; }  }
@media (max-width: 560px) { .sol-specs { grid-template-columns: 1fr; } .sol-specs div { padding-left: 0; border-left: 0; } .sol-specs div + div { border-top: 1px solid var(--border); } }

/* ---------- Portafolio en cuadrícula (se conserva) ---------- */
.pfg-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; }
.pfg-chip { padding: 9px 16px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.pfg-chip span { color: var(--text-muted); font-weight: 500; margin-left: 6px; }
.pfg-chip:hover { border-color: var(--accent); }
.pfg-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pfg-chip.is-on span { color: var(--on-accent); opacity: 0.85; }
.pfg-grid { --pfg-h: 360px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; max-width: 1180px; margin: 0 auto; }
.pfg-grid.is-1fila { justify-content: center; }
.pfg-card { position: relative; flex: 0 0 auto; width: min(calc(var(--pfg-h) * var(--arn)), 100%); aspect-ratio: var(--ar); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; padding: 0; color: #fff; text-align: left; font: inherit; }
.pfg-card[hidden] { display: none; }
.pfg-card { order: var(--d-o, 0); }   /* acomodo tipo Tetris en computadora (paginas.js); en móvil lo reemplaza --m-o */
.pfg-espera .pfg-card { opacity: 0; }
.pfg-grid { overflow-anchor: none; }
.pfg-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out-quint); }
.pfg-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent 55%); pointer-events: none; }
.pfg-card:hover img { transform: scale(1.04); }
.pfg-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pfg-info { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.pfg-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.pfg-sub { font-size: 12px; opacity: 0.88; }
.pfg-play { position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(6px); display: grid; place-items: center; }
@media (max-width: 720px) { .pfg-grid { --pfg-h: 280px; gap: 10px; } }

/* Reproductor: pantalla completa, video centrado, sin descarga */
.pfg-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.pfg-lightbox[open] { display: grid; place-items: center; }
.pfg-lightbox::backdrop { background: rgba(8, 9, 14, 0.9); backdrop-filter: blur(6px); }
.pfg-lb-frame { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; }
.pfg-lightbox video { display: block; max-width: min(90vw, 1200px); max-height: 80dvh; width: auto; height: auto; border-radius: var(--r-md); background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.pfg-lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; color: #fff; font-size: 14px; }
.pfg-lb-name { font-weight: 600; opacity: 0.9; }
.pfg-lb-close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.pfg-lb-close:hover { background: rgba(255,255,255,0.26); }
video::-internal-media-controls-download-button { display: none; }

/* ---------- Proceso · niveles ---------- */

.level-badge { align-self: flex-start; font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); }

.levels-note { text-align: center; margin-top: 22px; color: var(--text-muted); }

/* ---------- Banner de descuento ----------
   Banda azul con recurso visual (abanico de piezas reales + sello del
   15%) para que se lea como oportunidad y no como otro bloque de texto. */
.promo-section { padding: clamp(40px, 7vh, 88px) 48px clamp(56px, 9vh, 110px); max-width: 1280px; margin: 0 auto; }
/* Tarjeta clara: el color vive en el panel visual, no en todo el bloque (invitación, no promoción agresiva) */
.promo-band { position: relative; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr; gap: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(23, 25, 29, 0.08); overflow: hidden; isolation: isolate; }
.promo-visual { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 32px; overflow: hidden; border-right: 1px solid var(--border);
  /* Mismo lenguaje que «Dos productos» (Servicios) y «Cómo lo transformamos» (Proceso): retícula de puntos, halo azul y nodos */
  background: radial-gradient(420px 320px at 30% 30%, rgba(57,101,250,0.16), transparent 62%), radial-gradient(380px 300px at 80% 85%, rgba(122,184,224,0.14), transparent 62%), var(--bg); }
.promo-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(57,101,250,0.35) 1px, transparent 1.5px); background-size: 22px 22px; opacity: 0.55;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%); }
.promo-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 12% 18%, transparent 5px, rgba(57,101,250,0.55) 5.5px, transparent 7px),
              radial-gradient(circle at 90% 14%, transparent 4px, rgba(57,101,250,0.45) 4.5px, transparent 6px),
              radial-gradient(circle at 9% 86%, transparent 4px, rgba(57,101,250,0.45) 4.5px, transparent 6px),
              radial-gradient(circle at 70% 92%, transparent 5px, rgba(57,101,250,0.55) 5.5px, transparent 7px); }
.promo-fan { position: relative; width: 100%; max-width: 340px; height: 300px; }
.promo-fan img { position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); border: 0; box-shadow: 0 24px 60px rgba(13, 20, 60, 0.35); }
.promo-fan img:nth-child(1) { transform: translate(-112%, -46%) rotate(-10deg); }
.promo-fan img:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.promo-fan img:nth-child(3) { transform: translate(12%, -46%) rotate(10deg); }
.promo-seal { position: absolute; z-index: 3; right: 22px; bottom: 22px; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: linear-gradient(145deg, #2B4FD1, #3965FA 60%, #5478FF); color: #fff; box-shadow: 0 16px 40px rgba(57, 101, 250, 0.4), inset 0 0 0 4px rgba(255,255,255,0.18); transform: rotate(-8deg); }
.promo-seal b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 0.9; letter-spacing: -0.04em; }
.promo-seal span { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 5px; max-width: 9ch; margin-inline: auto; line-height: 1.25; font-family: var(--font-label);}
.promo-copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; }
.promo-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--text-xs)/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); padding: 7px 12px; border-radius: var(--r-full); background: var(--accent-soft); }
.promo-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.promo-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; margin-top: 18px; max-width: 18ch; color: var(--text); }
.promo-title em { font-style: normal; color: var(--accent-text); }
.promo-text { margin-top: 12px; line-height: 1.6; max-width: 46ch; color: var(--text-muted); }
.promo-steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.promo-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 600; }
.promo-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--accent); color: var(--on-accent); }
.promo-form { margin-top: 20px; width: 100%; max-width: 480px; }
.promo-field { display: flex; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; transition: border-color 0.2s, box-shadow 0.2s; }
.promo-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.promo-field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px; font: 500 16px var(--font-body); color: var(--text); outline: none; }
.promo-btn { border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font: 700 var(--text-sm)/1 var(--font-body); padding: 0 20px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.promo-btn:hover { background: var(--accent-hover); }
.promo-btn:disabled { opacity: 0.6; cursor: wait; }
.promo-cond { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.promo-cond svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.promo-legal { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.promo-legal a { color: inherit; text-decoration: underline; }
.promo-status { margin-top: 12px; font-weight: 600; background: var(--accent-soft); color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; }
.promo-status.is-error { background: rgba(220, 60, 60, 0.12); }
.promo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promo-kicker::before { animation: cfgPulse 2s ease-in-out infinite; }
.promo-count { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: var(--r-full); font: 700 var(--text-xs)/1 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.promo-legal a + a { margin-left: 0; }
.promo-status.is-ok { background: rgba(46, 160, 67, 0.12); }

/* Entrada tipo anuncio: la tarjeta sube, el panel azul entra desde la izquierda,
   las piezas se abren en abanico, el sello cae y un brillo cruza una vez.
   --p (−1…1) lo actualiza el scroll para dar un poco de profundidad a las piezas. */
.promo-band { --p: 0; }
.promo-band[data-anuncio] { opacity: 0; transform: translateY(56px) scale(0.965); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); }
.promo-band[data-anuncio] .promo-visual { transform: translateX(-40px); transition: transform 1s cubic-bezier(.2,.8,.2,1) 0.1s; }
.promo-band[data-anuncio] .promo-fan img { transition: transform 0.9s cubic-bezier(.2,.9,.25,1.15) 0.35s, opacity 0.5s ease 0.35s; }
.promo-band[data-anuncio]:not(.is-in) .promo-fan img { transform: translate(-50%, -50%) rotate(0deg) scale(0.9); opacity: 0.6; }
.promo-band[data-anuncio] .promo-seal { transition: transform 0.7s cubic-bezier(.3,1.5,.5,1) 0.85s, opacity 0.3s ease 0.85s; }
.promo-band[data-anuncio]:not(.is-in) .promo-seal { transform: scale(0.2) rotate(-70deg); opacity: 0; }
.promo-band[data-anuncio] .promo-copy > * { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); }
.promo-band[data-anuncio]:not(.is-in) .promo-copy > * { opacity: 0; transform: translateX(24px); }
.promo-band[data-anuncio] .promo-copy > :nth-child(2) { transition-delay: 0.3s; }
.promo-band[data-anuncio] .promo-copy > :nth-child(3) { transition-delay: 0.38s; }
.promo-band[data-anuncio] .promo-copy > :nth-child(4) { transition-delay: 0.46s; }
.promo-band[data-anuncio] .promo-copy > :nth-child(5) { transition-delay: 0.54s; }
.promo-band.is-in { opacity: 1; transform: none; }
.promo-band.is-in .promo-visual { transform: none; }
.promo-band.is-in .promo-fan { transform: translateY(calc(var(--p) * -18px)); transition: transform 0.2s linear; }
.promo-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); transform: translateX(-120%); }
.promo-band.is-in .promo-shine { animation: promoShine 1.3s ease 1.1s 1 both; }
@keyframes promoShine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .promo-band[data-anuncio], .promo-band[data-anuncio] * { transition: none !important; animation: none !important; }
  .promo-band[data-anuncio] { opacity: 1; transform: none; }
}

/* Código de descuento en el cotizador */
.dc { margin-top: 14px; text-align: left; width: 100%; }
.dc-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--accent-text); font: 600 var(--text-sm)/1.3 var(--font-body); cursor: pointer; }
.dc-toggle::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); font-size: 14px; line-height: 1; transition: transform 0.2s; }
.dc-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.dc-body { margin-top: 10px; }
.dc-input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed var(--accent); background: var(--surface); color: var(--text); font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; outline: none; }
.dc-input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; color: var(--text-muted); }
.dc-input:focus { border-style: solid; box-shadow: 0 0 0 3px var(--accent-soft); }
.dc-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.dc-status { margin-top: 8px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.45; background: var(--accent-soft); color: var(--text); }
.dc-status.is-ok { background: rgba(46, 160, 67, 0.12); }
.dc-status.is-error { background: rgba(220, 60, 60, 0.12); }
.dc-status.is-warn { background: rgba(230, 160, 40, 0.14); }
.dc-skip { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dc-was { display: block; font-size: 0.5em; font-weight: 500; color: var(--text-muted); text-decoration-thickness: 2px; margin-bottom: 4px; }
.pc-cifra-v .dc-was { font-size: 0.62em; }
.dc-now { color: var(--accent-text); }
.dc-note { display: block; margin-top: 4px; font: 600 11.5px/1.3 var(--font-body); color: var(--text-muted); }
#sidebarPrice .dc-now { display: block; white-space: nowrap; font-size: 0.8em; }
.dc-badge { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 7px 12px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 700; }
.dc-badge::before { content: "✓"; }
.pc-step .dc-badge { display: flex; width: fit-content; margin: 14px auto 0; }
.pc-step .dc-badge[hidden], .dc-badge[hidden] { display: none; }
@media (max-width: 900px) {
  .promo-section { padding-left: 20px; padding-right: 20px; }
  .promo-kicker { letter-spacing: 0.08em; }
  .promo-steps li { font-size: 12.5px; }
  .promo-band { grid-template-columns: 1fr; }
  .promo-visual { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); }
  .promo-fan { height: 230px; max-width: 280px; }
  .promo-seal { width: 96px; height: 96px; right: 14px; bottom: 14px; }
  .promo-seal b { font-size: 1.9rem; }
}
@media (max-width: 420px) { .promo-field { flex-direction: column; } .promo-btn { padding: 14px; } }

/* ---------- Preguntas frecuentes: selector de temas en la columna izquierda ---------- */
.faq-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.faq-nav-t { font: 700 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px 8px; }
.faq-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--text); font: 600 var(--text-sm)/1.3 var(--font-body); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; }
.faq-tab .faq-n { min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--r-full); display: inline-grid; place-items: center; font-size: 12px; background: var(--bg); color: var(--text-muted); }
.faq-tab:hover { background: var(--surface-hover); }
.faq-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.faq-tab[aria-selected="true"] .faq-n { background: rgba(255,255,255,0.2); color: var(--on-accent); }
.faq-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-cat { font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; margin: 0 0 14px; }
.faq-answer a { color: var(--accent-text); font-weight: 600; }
.page-faq .faq-aside { position: sticky; top: calc(var(--header-h, 64px) + 24px); align-self: start; }
.page-faq .faq-aside, .page-faq .faq-list { min-width: 0; }
@media (max-width: 900px) {
  .page-faq .faq-aside { position: static; }
  .faq-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; background: none; border: 0; padding: 0; gap: 6px; }
  .faq-nav-t { display: none; }
  .faq-tab { flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--r-full); padding: 9px 14px; background: var(--surface); }
}

/* ---------- Contacto: canales como acciones claras ---------- */
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.channel { display: grid; grid-template-columns: 48px 1fr 36px; align-items: center; gap: 4px 16px; padding: 20px 20px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--text); box-shadow: var(--card-shadow); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.channel:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 36px var(--accent-glow); }
.channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.channel-ico { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.channel.is-wa .channel-ico { background: #25D366; color: #fff; }
.channel-t { font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.channel-d { grid-column: 2; color: var(--text-muted); font-size: var(--text-sm); }
.channel-go { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform 0.2s; }
.channel:hover .channel-go { transform: translateX(3px); }
.page-contacto .hero.hero--compact { padding-bottom: clamp(40px, 6vh, 72px); }
/* Contacto: los tres canales viven al pie del hero, a todo el ancho del contenido */
.hero .hero-channels { width: 100%; max-width: none; margin: clamp(28px, 5vh, 56px) 0 0; padding: 0; position: relative; z-index: 2; }
.hero .hero-channels { order: 2; }                        /* en móvil van después del texto, no junto a la ilustración */
/* Canales del hero: botones delgados (solo el título), un poco más abajo del texto */
.hero .hero-channels { margin-top: clamp(48px, 9vh, 104px); gap: 12px; }
.hero .hero-channels .channel { grid-template-columns: 36px 1fr 30px; gap: 0 14px; padding: 11px 12px 11px 12px; border-radius: var(--r-md); border-width: 1px; }
.hero .hero-channels .channel-ico { grid-row: auto; width: 36px; height: 36px; border-radius: var(--r-sm); }
.hero .hero-channels .channel-ico svg { width: 18px; height: 18px; }
.hero .hero-channels .channel-t { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .hero-channels .channel-go { grid-row: auto; width: 30px; height: 30px; }
.hero .hero-channels .channel-go svg { width: 14px; height: 14px; }
@media (min-width: 769px) { .page-contacto .hero.hero--compact { min-height: min(100svh, 800px); } }
@media (max-width: 768px) { .hero .hero-channels { margin-top: 12px; gap: 10px; } }
@media (max-width: 900px) { .channels { grid-template-columns: 1fr; padding: 0 20px; } }
.agenda-box { max-width: 1000px; margin: 0 auto; text-align: center; }
.agenda-embed { margin-top: 8px; }

/* Servicios: su H1 nombra los dos productos (SEO) y es más largo que los demás; baja un escalón para no sumar líneas */
.page-servicios .hero h1.hero-headline { font-size: clamp(2.3rem, 4.7vw, 4rem); }

/* FAQ: la pregunta es un h3 (semántica para buscadores e IA) sin cambiar el aspecto del botón */
.faq-item > .faq-h { margin: 0; font: inherit; letter-spacing: inherit; }

/* Celular: la línea chica del hero en un solo renglón (Inicio dice «Video publicitario en Puebla») */
@media (max-width: 440px) {
  .hero-eyebrow { gap: 8px; letter-spacing: 0.13em; font-size: 11px; }
  .hero-eyebrow-mark { letter-spacing: 0.2em; }
}
@media (max-width: 380px) {
  .hero-eyebrow { letter-spacing: 0.08em; }
  .hero-eyebrow-mark { letter-spacing: 0.14em; }
}

/* =====================================================================
   FAQ · «Los dos productos, lado a lado» (al final de la página)
   Mismo lenguaje que «La diferencia» y el toggle del cotizador:
   A = azul de marca (#2B4FD1 → #3965FA), B = azul cielo (#5478FF → #7AB8E0).
   ===================================================================== */
.rs-sec { --rs-a: #3965FA; --rs-a2: #2B4FD1; --rs-b: #7AB8E0; --rs-b2: #5478FF; --rs-b-text: #2F78AE; }
[data-theme="dark"] .rs-sec, .rs-sec { --rs-b-text: #9CCBEA; }
[data-theme="light"] .rs-sec { --rs-b-text: #2F78AE; }
.rs-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.rs-title { margin-bottom: 14px; }
.rs-title em { font-family: var(--font-accent); font-style: normal; color: var(--accent-text); font-weight: 600;}
.rs-sub { font-size: var(--text-md); line-height: 1.65; color: var(--text-muted); text-wrap: balance; }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1080px; margin: 0 auto; }
.rs-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease; }
.rs-card.rs-a { border-color: rgba(57,101,250,0.34); background: linear-gradient(180deg, rgba(57,101,250,0.07), rgba(57,101,250,0.02) 60%), var(--surface); }
.rs-card.rs-b { border-color: rgba(122,184,224,0.55); background: linear-gradient(180deg, rgba(122,184,224,0.14), rgba(122,184,224,0.03) 60%), var(--surface); }
.rs-card:hover { transform: translateY(-4px); }
.rs-card.rs-a:hover { box-shadow: 0 22px 50px rgba(57,101,250,0.16); }
.rs-card.rs-b:hover { box-shadow: 0 22px 50px rgba(122,184,224,0.26); }

/* Franja visual con retícula de puntos, halo, nodos y los "cuadros" del producto */
.rs-visual { position: relative; isolation: isolate; height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.rs-visual::before { content: ""; position: absolute; inset: -22px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--rs-dot) 1px, transparent 1.5px); background-size: 20px 20px; opacity: 0.7;
  mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 35%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 35%, transparent 100%);
  animation: rsPuntos 18s linear infinite; }
.rs-a .rs-visual { --rs-dot: rgba(57,101,250,0.40); background: radial-gradient(320px 180px at 50% 60%, rgba(57,101,250,0.20), transparent 70%); border-bottom-color: rgba(57,101,250,0.2); }
.rs-b .rs-visual { --rs-dot: rgba(84,150,210,0.45); background: radial-gradient(320px 180px at 50% 60%, rgba(122,184,224,0.30), transparent 70%); border-bottom-color: rgba(122,184,224,0.35); }
@keyframes rsPuntos { to { transform: translate(20px, 20px); } }
.rs-node { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.55; animation: rsNodo 3.6s ease-in-out infinite; }
.rs-a .rs-node { color: var(--rs-a); } .rs-b .rs-node { color: var(--rs-b); }
.rs-node.n1 { top: 22%; left: 12%; } .rs-node.n2 { top: 18%; right: 14%; width: 9px; height: 9px; animation-delay: -1.2s; } .rs-node.n3 { bottom: 16%; left: 22%; width: 8px; height: 8px; animation-delay: -2.4s; }
@keyframes rsNodo { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.35); opacity: 0.8; } }

.rs-frame { position: relative; display: block; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 14px 30px rgba(23,25,29,0.18); }
.rs-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 62%); transform: translateX(-120%); animation: rsBrillo 5.5s ease-in-out infinite; }
@keyframes rsBrillo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.rs-bar { position: absolute; left: 10%; right: 10%; bottom: 12%; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.35); overflow: hidden; }
.rs-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: #fff; animation: rsAvance 4s ease-in-out infinite; }
@keyframes rsAvance { 0% { width: 8%; } 100% { width: 92%; } }
/* A: un cuadro horizontal con play */
.rs-frame-wide { width: 200px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--rs-a2), var(--rs-a) 55%, #6F8CFF); animation: rsFlota 7s ease-in-out infinite; }
.rs-play { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,0.92); }
.rs-play::after { content: ""; position: absolute; top: 11px; left: 14px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--rs-a2); }
/* B: cuatro piezas verticales en abanico, cada una flota a su ritmo */
.rs-frame-v { width: 58px; aspect-ratio: 9 / 16; margin: 0 -6px; background: linear-gradient(160deg, var(--rs-b2), var(--rs-b)); animation: rsFlota 6s ease-in-out infinite; }
.rs-frame-v .rs-bar { bottom: 9%; left: 14%; right: 14%; }
.rs-frame-v.v1 { --r: -8deg; animation-delay: 0s; opacity: 0.85; }
.rs-frame-v.v2 { --r: -2.5deg; animation-delay: -1.5s; z-index: 1; }
.rs-frame-v.v3 { --r: 3deg; animation-delay: -3s; z-index: 2; }
.rs-frame-v.v4 { --r: 8.5deg; animation-delay: -4.5s; opacity: 0.85; }
@keyframes rsFlota { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }

.rs-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: clamp(22px, 2.4vw, 32px); }
.rs-kicker { font: 700 11px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.rs-a .rs-kicker { color: var(--accent-text); } .rs-b .rs-kicker { color: var(--rs-b-text); }
.rs-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--text); margin: -4px 0 0; }
.rs-que { font-size: var(--text-base); line-height: 1.6; color: var(--text-muted); }
.rs-specs { margin: 4px 0 0; border-top: 1px solid var(--border); }
.rs-specs div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rs-specs dt { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; font-family: var(--font-label);}
.rs-specs dd { margin: 0; font-size: var(--text-base); line-height: 1.45; color: var(--text); }
.rs-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; }
.rs-price-k { font-size: var(--text-sm); color: var(--text-muted); }
.rs-price b { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.9rem, 2.8vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; }
.rs-a .rs-price b { color: var(--accent-text); } .rs-b .rs-price b { color: var(--rs-b-text); }
.rs-price small { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.rs-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--text-sm); color: #fff; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease; }
.rs-cta::after { content: "→"; transition: transform 0.25s ease; }
.rs-cta:hover { transform: translateY(-1px); } .rs-cta:hover::after { transform: translateX(3px); }
.rs-a .rs-cta { background: linear-gradient(135deg, var(--rs-a2), var(--rs-a)); box-shadow: 0 8px 20px rgba(57,101,250,0.30); }
.rs-b .rs-cta { background: linear-gradient(135deg, var(--rs-b2), #5E9FD0); box-shadow: 0 8px 20px rgba(122,184,224,0.40); }
.rs-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rs-nota { max-width: 1080px; margin: 22px auto 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
[data-theme="dark"] .rs-card.rs-a, :root:not([data-theme="light"]) .rs-card.rs-a { background: linear-gradient(180deg, rgba(57,101,250,0.14), rgba(57,101,250,0.03) 60%), var(--surface); }
[data-theme="dark"] .rs-card.rs-b, :root:not([data-theme="light"]) .rs-card.rs-b { background: linear-gradient(180deg, rgba(122,184,224,0.14), rgba(122,184,224,0.03) 60%), var(--surface); border-color: rgba(122,184,224,0.38); }
[data-theme="light"] .rs-card.rs-a { background: linear-gradient(180deg, rgba(57,101,250,0.07), rgba(57,101,250,0.02) 60%), var(--surface); }
[data-theme="light"] .rs-card.rs-b { background: linear-gradient(180deg, rgba(122,184,224,0.16), rgba(122,184,224,0.03) 60%), var(--surface); border-color: rgba(122,184,224,0.6); }
@media (max-width: 820px) {
  .rs-grid { grid-template-columns: 1fr; max-width: 560px; }
  .rs-visual { height: 160px; }
  .rs-specs div { grid-template-columns: 80px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-visual::before, .rs-node, .rs-frame, .rs-frame::after, .rs-bar::after { animation: none !important; }
  .rs-frame-v { transform: rotate(var(--r, 0deg)); }
}

/* =====================================================================
   COTIZADOR · atmósfera por modalidad (se nota igual en claro y en oscuro)
   A (video a la medida): azul de marca, halo profundo, retícula de puntos azul.
   B (paquete para redes): azul cielo, halo aireado, retícula cielo más fina.
   El cambio cruza capas; al entrar cada modo pasa un barrido de luz.
   ===================================================================== */
.cfg-atmos { inset: 0; }
.cfg-atmos span { overflow: hidden; }
.cfg-atmos span::before, .cfg-atmos span::after { content: ""; position: absolute; pointer-events: none; }
/* Capa A */
.cfg-atmos-a { background:
    radial-gradient(900px 560px at 82% 34%, rgba(57,101,250,0.22), transparent 64%),
    radial-gradient(700px 480px at 8% 88%, rgba(43,79,209,0.16), transparent 62%),
    linear-gradient(180deg, rgba(57,101,250,0.07), rgba(57,101,250,0.02)); }
.cfg-atmos-a::before { inset: -26px; background-image: radial-gradient(rgba(111,140,255,0.42) 1.1px, transparent 1.6px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 78%);
  animation: cfgPuntos 26s linear infinite; }
/* Capa B */
.cfg-atmos-b { background:
    radial-gradient(900px 560px at 18% 34%, rgba(122,184,224,0.30), transparent 64%),
    radial-gradient(760px 500px at 92% 86%, rgba(84,120,255,0.14), transparent 62%),
    linear-gradient(180deg, rgba(122,184,224,0.12), rgba(122,184,224,0.03)); }
.cfg-atmos-b::before { inset: -20px; background-image: radial-gradient(rgba(122,184,224,0.60) 1px, transparent 1.5px); background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 25%, transparent 78%);
  animation: cfgPuntosB 22s linear infinite; }
@keyframes cfgPuntos { to { transform: translate(26px, 26px); } }
@keyframes cfgPuntosB { to { transform: translate(-20px, 20px); } }
/* Barrido de luz al entrar a cada modo (la animación arranca cuando la capa se vuelve la activa) */
.cfg-atmos span::after { top: 0; bottom: 0; left: -40%; width: 40%; opacity: 0; }
.cfg-atmos-a::after { background: linear-gradient(100deg, transparent, rgba(57,101,250,0.16), transparent); }
.cfg-atmos-b::after { background: linear-gradient(100deg, transparent, rgba(122,184,224,0.26), transparent); }
[data-modo="A"] .cfg-atmos-a::after, [data-modo="B"] .cfg-atmos-b::after { animation: cfgBarrido 1.4s cubic-bezier(.3,.7,.2,1) 0.05s both; }
@keyframes cfgBarrido { 0% { left: -40%; opacity: 0; } 20% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
/* En oscuro, B ya no se "lava" a gris: halo cielo sobre fondo oscuro */
:root:not([data-theme="light"]) .cfg-atmos-a { background:
    radial-gradient(900px 560px at 82% 34%, rgba(57,101,250,0.30), transparent 64%),
    radial-gradient(700px 480px at 8% 88%, rgba(43,79,209,0.22), transparent 62%),
    linear-gradient(180deg, rgba(57,101,250,0.10), rgba(57,101,250,0.02)); }
:root:not([data-theme="light"]) .cfg-atmos-b { background:
    radial-gradient(900px 560px at 18% 34%, rgba(122,184,224,0.26), transparent 64%),
    radial-gradient(760px 500px at 92% 86%, rgba(84,120,255,0.16), transparent 62%),
    linear-gradient(180deg, rgba(122,184,224,0.10), rgba(122,184,224,0.02)); }
:root:not([data-theme="light"]) .cfg-atmos-a::before { background-image: radial-gradient(rgba(143,169,255,0.30) 1.1px, transparent 1.6px); }
:root:not([data-theme="light"]) .cfg-atmos-b::before { background-image: radial-gradient(rgba(156,203,234,0.34) 1px, transparent 1.5px); }
/* El marco del cotizador toma el color de la modalidad */
.cfg-duo { transition: border-color var(--modo-dur, 0.6s) ease, box-shadow var(--modo-dur, 0.6s) ease; }
[data-modo="A"] .cfg-duo { border-color: rgba(57,101,250,0.30); box-shadow: 0 30px 80px rgba(57,101,250,0.12); }
[data-modo="B"] .cfg-duo { border-color: rgba(122,184,224,0.55); box-shadow: 0 30px 80px rgba(122,184,224,0.20); }
[data-modo="B"] .cfg-toggle { border-color: rgba(122,184,224,0.55); }
[data-modo="A"] .cfg-toggle { border-color: rgba(57,101,250,0.28); }
/* El section::before original (lavado azul fijo) ya no hace falta */
#configurador.configurador-section::before { background: none; }
@media (prefers-reduced-motion: reduce) {
  .cfg-atmos span::before, .cfg-atmos span::after { animation: none !important; }
}
/* Dentro de B, los acentos del cotizador también van en azul cielo */
#cfgPaneB .pc-progress-fill { background: linear-gradient(90deg, #5478FF, #7AB8E0); }
#cfgPaneB .ind-card.selected { border-color: #7AB8E0; background: rgba(122,184,224,0.16); box-shadow: 0 0 18px rgba(122,184,224,0.35); }
#cfgPaneB .pc-tier.is-on { border-color: #7AB8E0; background: rgba(122,184,224,0.16); }

/* =====================================================================
   HERO · retícula de puntos detrás de la nube, con profundidad
   Solo del lado de la ilustración: se desvanece antes de llegar al texto.
   Late al revés que la nube (mismo ciclo de 16 s de nubeFlota): cuando la nube
   se acerca (escala mayor) los puntos se achican; cuando se aleja, crecen.
   ===================================================================== */
@property --hero-dot { syntax: '<length>'; inherits: false; initial-value: 1.3px; }
.hero-art { isolation: isolate; --hero-dot-c: rgba(143, 169, 255, 0.34); }
[data-theme="light"] .hero-art { --hero-dot-c: rgba(57, 101, 250, 0.36); }
.hero-art::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -28% -10% -28% -46%;
  background-image: radial-gradient(circle, var(--hero-dot-c) var(--hero-dot), transparent calc(var(--hero-dot) + 0.9px));
  background-size: 24px 24px; background-position: 62% 55%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 62% 54%, #000 34%, rgba(0,0,0,0.6) 62%, transparent 94%);
          mask-image: radial-gradient(ellipse 50% 50% at 62% 54%, #000 34%, rgba(0,0,0,0.6) 62%, transparent 94%);
  transform-origin: 62% 55%;
  animation: puntosProfundidad 16s ease-in-out infinite; }
@keyframes puntosProfundidad {
  0%, 100% { --hero-dot: 1.75px; transform: scale(1.025); }
  24%      { --hero-dot: 1.05px; transform: scale(0.975); }
  46%      { --hero-dot: 1.6px;  transform: scale(1.012); }
  72%      { --hero-dot: 0.9px;  transform: scale(0.965); }
  88%      { --hero-dot: 1.35px; transform: scale(0.995); }
}
@media (max-width: 768px) {
  .hero-art::before { inset: -22% 0 -22% 0; background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 54%, #000 32%, rgba(0,0,0,0.6) 62%, transparent 94%);
            mask-image: radial-gradient(ellipse 56% 54% at 50% 54%, #000 32%, rgba(0,0,0,0.6) 62%, transparent 94%);
    transform-origin: 50% 55%; background-position: 50% 55%; }
}
@media (prefers-reduced-motion: reduce) { .hero-art::before { animation: none; } }

/* =====================================================================
   COTIZADOR · transición entre modalidades, más suave
   Sin barrido lineal: la capa nueva entra con un leve acercamiento y un
   resplandor que florece desde el toggle y se disipa.
   ===================================================================== */
.configurador-section { --modo-dur: 1s; }
.cfg-atmos span { transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.22,.7,.2,1), filter 1s ease; transform: scale(1); filter: blur(0); }
[data-modo="B"] .cfg-atmos-a, [data-modo="A"] .cfg-atmos-b { transform: scale(1.04); filter: blur(6px); }
.cfg-atmos span::after { inset: 0; top: 0; bottom: 0; left: 0; width: auto; opacity: 0; transform: scale(0.6); transform-origin: 50% 12%; }
.cfg-atmos-a::after { background: radial-gradient(640px 380px at 50% 12%, rgba(57,101,250,0.22), transparent 70%); }
.cfg-atmos-b::after { background: radial-gradient(640px 380px at 50% 12%, rgba(122,184,224,0.32), transparent 70%); }
[data-modo="A"] .cfg-atmos-a::after, [data-modo="B"] .cfg-atmos-b::after { animation: cfgFlorece 2s cubic-bezier(.22,.7,.2,1) 0.05s both; }
@keyframes cfgFlorece { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .cfg-atmos span { transition: opacity 0.3s ease; transform: none !important; filter: none !important; } }

/* =====================================================================
   COTIZADOR · «¿Tienes un código de descuento?» como tarjeta visible
   (antes era un enlace azul que pasaba desapercibido)
   ===================================================================== */
.dc { margin-top: 16px; }
.dc-toggle { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px dashed rgba(57,101,250,0.55); border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(57,101,250,0.10), rgba(122,184,224,0.12)); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.dc-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); transform: translateX(-120%); animation: dcBrillo 4.5s ease-in-out 1.2s infinite; font-size: 0; }
[data-theme="dark"] .dc-toggle::before, :root:not([data-theme="light"]) .dc-toggle::before { background: linear-gradient(110deg, transparent 35%, rgba(143,169,255,0.18) 50%, transparent 65%); }
@keyframes dcBrillo { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.dc-toggle[aria-expanded="true"]::before { animation: none; opacity: 0; transform: none; }
.dc-toggle:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(57,101,250,0.16); transform: translateY(-1px); }
.dc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: linear-gradient(135deg, #2B4FD1, #3965FA); color: #fff; box-shadow: 0 6px 14px rgba(57,101,250,0.30); animation: dcIco 3.2s ease-in-out infinite; }
.dc-ico svg { width: 20px; height: 20px; }
@keyframes dcIco { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-10deg); } 16% { transform: rotate(8deg); } 24% { transform: rotate(0); } }
.dc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-t { font: 700 var(--text-sm)/1.25 var(--font-body); color: var(--text); }

.dc-pct { padding: 5px 10px; border-radius: var(--r-full); background: var(--accent); color: #fff; font: 800 13px/1 var(--font-body); letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(57,101,250,0.35); }
.dc-chev { width: 9px; height: 9px; margin: 0 4px 0 2px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease; }
.dc-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--accent); }
.dc-toggle[aria-expanded="true"] .dc-chev { transform: rotate(-135deg) translateY(-2px); }
.dc-toggle[aria-expanded="true"] .dc-ico { animation: none; }
.dc-body { margin-top: 10px; }
/* En el paquete para redes, en azul cielo como el resto de B */
#cfgPaneB .dc-toggle { border-color: rgba(122,184,224,0.75); background: linear-gradient(135deg, rgba(122,184,224,0.16), rgba(84,120,255,0.08)); }
#cfgPaneB .dc-ico { background: linear-gradient(135deg, #5478FF, #7AB8E0); box-shadow: 0 6px 14px rgba(122,184,224,0.40); }
#cfgPaneB .dc-pct { background: linear-gradient(135deg, #5478FF, #6FA8DA); box-shadow: 0 4px 12px rgba(122,184,224,0.45); }
#cfgPaneB .dc-toggle[aria-expanded="true"], #cfgPaneB .dc-toggle:hover { border-color: #7AB8E0; }
@media (max-width: 480px) {
  .dc-toggle { grid-template-columns: auto 1fr auto; gap: 10px; padding: 11px 12px; }
  .dc-chev { display: none; }
  .dc-ico { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .dc-toggle::before, .dc-ico { animation: none !important; } }

/* Banner: aviso de bandeja (Promociones / Spam) */
.promo-inbox { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: 13px; line-height: 1.45; color: var(--text); }
.promo-inbox svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.promo-inbox b { font-weight: 700; }

/* =====================================================================
   COTIZADOR A · dos fases de pantalla (sin tocar la lógica)
   cotiza (pasos 1–6): sin resumen lateral «Tu proyecto»; se ve la ayuda de «Video a la medida».
   brief  (pasos 7–13): la ayuda se retira, el cotizador ocupa todo el ancho y el resumen aparece
   y crece con cada respuesta.
   ===================================================================== */
#cfgPaneA:not([data-fase="brief"]) .configurador-layout { grid-template-columns: minmax(0, 1fr); }
#cfgPaneA:not([data-fase="brief"]) .configurador-layout::after,
#cfgPaneA:not([data-fase="brief"]) .configurador-sidebar,
#cfgPaneA:not([data-fase="brief"]) .configurador-mobile-summary { display: none !important; }
#cfgPaneA:not([data-fase="brief"]) .configurador-main { padding-left: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); }
#cfgPaneA[data-fase="brief"] .cfg-duo { grid-template-columns: minmax(0, 1fr); }
#cfgPaneA[data-fase="brief"] .cfg-info { display: none; }
#cfgPaneA[data-fase="brief"] .configurador-layout { --cfg-side: clamp(300px, 26vw, 360px); }
#cfgPaneA[data-fase="brief"] .configurador-sidebar { animation: faseEntra 0.6s cubic-bezier(.22,.7,.2,1) both; }
#cfgPaneA[data-fase="brief"] .configurador-main { animation: faseEntra 0.5s cubic-bezier(.22,.7,.2,1) both; }
@keyframes faseEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #cfgPaneA[data-fase="brief"] .configurador-sidebar, #cfgPaneA[data-fase="brief"] .configurador-main { animation: none; } }
@media (max-width: 1100px) { #cfgPaneA[data-fase="brief"] .configurador-layout { --cfg-side: 280px; } }

/* El código de descuento no rebasa el ancho de los campos del formulario */
#cfgPaneB .dc { max-width: 560px; margin-left: auto; margin-right: auto; }
.dc-toggle { grid-template-columns: auto 1fr auto auto; }

/* Proceso · paso 4 («Trabajamos tu proyecto») lleva a «Cómo lo producimos» */
.how-step-link { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 14px; padding: 8px 13px; white-space: nowrap; border-radius: var(--r-full); border: 1px solid rgba(57,101,250,0.35); background: var(--accent-soft);
  color: var(--accent-text); font: 700 12px/1.2 var(--font-body); text-decoration: none; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.how-step-link::after { content: "↓"; transition: transform 0.25s ease; }
.how-step-link:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); box-shadow: 0 8px 20px var(--accent-glow); }
.how-step-link:hover::after { transform: translateY(2px); }
.how-step-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.page-inicio .how-step-link::after { content: "→"; }
.page-inicio .how-step-link:hover::after { transform: translateX(2px); }
#como-producimos { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }

/* =====================================================================
   NIVELES DE PRODUCCIÓN (Servicios) · mismo lenguaje que «En resumen»
   1 Directo = azul de marca (estrella) · 2 Elaborado = azul cielo · 3 Cinematográfico = índigo profundo
   ===================================================================== */
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.lv-card { --lv-c1: #2B4FD1; --lv-c2: #3965FA; --lv-t: var(--accent-text); --lv-dot: rgba(57,101,250,0.40); --lv-halo: rgba(57,101,250,0.20); --lv-b: rgba(57,101,250,0.34); --lv-tint: rgba(57,101,250,0.07); }
.lv-card.lv-2 { --lv-c1: #5478FF; --lv-c2: #7AB8E0; --lv-t: #2F78AE; --lv-dot: rgba(84,150,210,0.45); --lv-halo: rgba(122,184,224,0.30); --lv-b: rgba(122,184,224,0.55); --lv-tint: rgba(122,184,224,0.14); }
.lv-card.lv-3 { --lv-c1: #1B2A6B; --lv-c2: #4B4FD8; --lv-t: #4B4FD8; --lv-dot: rgba(75,79,216,0.40); --lv-halo: rgba(75,79,216,0.20); --lv-b: rgba(75,79,216,0.34); --lv-tint: rgba(75,79,216,0.07); }
:root:not([data-theme="light"]) .lv-card.lv-2 { --lv-t: #9CCBEA; }
:root:not([data-theme="light"]) .lv-card.lv-3 { --lv-t: #A9ABFF; --lv-c1: #2A2F8F; --lv-c2: #6468F0; --lv-dot: rgba(169,171,255,0.30); }
.lv-card { border-color: var(--lv-b); background: linear-gradient(180deg, var(--lv-tint), transparent 60%), var(--surface); }
.lv-card:hover { box-shadow: 0 22px 50px var(--lv-halo); }
.lv-card .rs-visual { --rs-dot: var(--lv-dot); background: radial-gradient(300px 170px at 50% 60%, var(--lv-halo), transparent 70%); border-bottom-color: var(--lv-b); height: 176px; }
.lv-card .rs-node { color: var(--lv-c2); }
.lv-card .rs-kicker { color: var(--lv-t); }
.lv-card.is-star { box-shadow: 0 18px 44px rgba(57,101,250,0.14); }
.lv-card .level-badge { position: absolute; top: 14px; left: 14px; z-index: 3; box-shadow: 0 6px 16px rgba(57,101,250,0.35); }
/* Visuales por nivel */

.lv-card .rs-play::after { border-color: transparent transparent transparent var(--lv-c1); }

  

/* Cuerpo */

.lv-rev { border-top: 1px solid var(--border); padding-top: 14px; }
.lv-rev b { font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--lv-t); }
.lv-card .rs-price-k { margin-right: auto; }
@media (max-width: 980px) { .lv-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* Niveles de producción · video en loop en lugar de la ilustración */
.lv-card .lv-media { height: auto; aspect-ratio: 16 / 9; padding: 0; background: #0f1320; }
.lv-card .lv-media::before { display: none; }
.lv-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-card .lv-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -40px 60px -30px rgba(0,0,0,0.25); }
.lv-card:hover .lv-video { transform: scale(1.03); }
.lv-video { transition: transform 0.8s cubic-bezier(.2,.8,.2,1); }
/* El desplazamiento suave lo controla paginas.js (curva lenta y duración según distancia) */
section[tabindex="-1"]:focus, div[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* =====================================================================
   TRANSICIÓN ENTRE PÁGINAS · deslizamiento según la posición en el menú
   --sky-dir = 1 (la página destino está a la derecha en el menú) o -1 (a la izquierda).
   Solo se mueve el contenido (main y pie); el encabezado queda fijo.
   ===================================================================== */
html.sky-sale main, html.sky-sale .site-footer { animation: skySale 0.28s cubic-bezier(.55,0,.8,.3) both; }
html.sky-entra main, html.sky-entra .site-footer { animation: skyEntra 0.3s cubic-bezier(.2,.75,.25,1) both; }
@keyframes skySale { to { opacity: 0; transform: translate3d(calc(var(--sky-dir, 1) * -64px), 0, 0); } }
@keyframes skyEntra { from { opacity: 0; transform: translate3d(calc(var(--sky-dir, 1) * 64px), 0, 0); } to { opacity: 1; transform: none; } }
html.sky-sale, html.sky-entra { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html.sky-sale main, html.sky-sale .site-footer, html.sky-entra main, html.sky-entra .site-footer { animation: none; } }

/* =====================================================================
   PORTAFOLIO (Servicios) · retícula de puntos y color por categoría
   Todo = azul de marca · Inmobiliario = azul cielo · Producto = índigo · Tecnología = turquesa · Educación = pervinca
   ===================================================================== */
.pfg-sec { position: relative; isolation: isolate; --pc1: #2B4FD1; --pc2: #3965FA; }
.pfg-sec[data-cat="inmo"] { --pc1: #5478FF; --pc2: #7AB8E0; }
.pfg-sec[data-cat="prod"] { --pc1: #3F43C9; --pc2: #8A8DFF; }
.pfg-sec[data-cat="tech"] { --pc1: #1C7F99; --pc2: #43BCD4; }
.pfg-sec[data-cat="edu"]  { --pc1: #4E68E6; --pc2: #A9B8FF; }
.pfg-sec[data-cat="cultura"] { --pc1: #5B4FD6; --pc2: #B39DFF; }
.pfg-atmos { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none; overflow: hidden; }
.pfg-atmos span { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s cubic-bezier(.4,0,.2,1); }
.pfg-atmos span::before { content: ""; position: absolute; inset: -24px; background-image: radial-gradient(var(--c-dot) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 80%);
  animation: cfgPuntos 30s linear infinite; }
.pfg-atmos span[data-c="todo"] { --c-dot: rgba(57,101,250,0.34); background: radial-gradient(900px 480px at 50% 18%, rgba(57,101,250,0.14), transparent 65%); }
.pfg-atmos span[data-c="inmo"] { --c-dot: rgba(84,150,210,0.42); background: radial-gradient(900px 480px at 50% 18%, rgba(122,184,224,0.24), transparent 65%); }
.pfg-atmos span[data-c="prod"] { --c-dot: rgba(99,102,230,0.36); background: radial-gradient(900px 480px at 50% 18%, rgba(99,102,230,0.16), transparent 65%); }
.pfg-atmos span[data-c="tech"] { --c-dot: rgba(40,160,190,0.40); background: radial-gradient(900px 480px at 50% 18%, rgba(67,188,212,0.18), transparent 65%); }
.pfg-atmos span[data-c="edu"]  { --c-dot: rgba(110,130,240,0.38); background: radial-gradient(900px 480px at 50% 18%, rgba(169,184,255,0.22), transparent 65%); }
.pfg-atmos span[data-c="cultura"] { --c-dot: rgba(120,100,230,0.38); background: radial-gradient(900px 480px at 50% 18%, rgba(179,157,255,0.22), transparent 65%); }
.pfg-sec[data-cat="todo"] .pfg-atmos [data-c="todo"], .pfg-sec[data-cat="inmo"] .pfg-atmos [data-c="inmo"], .pfg-sec[data-cat="prod"] .pfg-atmos [data-c="prod"],
.pfg-sec[data-cat="tech"] .pfg-atmos [data-c="tech"], .pfg-sec[data-cat="edu"] .pfg-atmos [data-c="edu"], .pfg-sec[data-cat="cultura"] .pfg-atmos [data-c="cultura"] { opacity: 1; }
/* Categorías: barra con más presencia, cada una con su color */
.pfg-sec .pfg-filters { width: fit-content; max-width: 100%; margin: 0 auto 34px; padding: 6px; gap: 6px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(23,25,29,0.07), inset 0 1px 0 rgba(255,255,255,0.5); transition: border-color 0.6s ease, box-shadow 0.6s ease; }
.pfg-sec .pfg-filters { border-color: color-mix(in srgb, var(--pc2) 35%, var(--border)); box-shadow: 0 12px 32px color-mix(in srgb, var(--pc2) 18%, transparent); }
.pfg-sec .pfg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; background: transparent; font-size: var(--text-sm); font-weight: 700;
  transition: background 0.45s ease, color 0.3s ease, box-shadow 0.45s ease, transform 0.25s ease; }
.pfg-sec .pfg-chip:hover { background: var(--accent-soft); transform: translateY(-1px); }
.pfg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--d1), var(--d2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d2) 22%, transparent); }
.pfg-chip[data-k="todo"] { --d1: #2B4FD1; --d2: #3965FA; }
.pfg-chip[data-k="inmo"] { --d1: #5478FF; --d2: #7AB8E0; }
.pfg-chip[data-k="prod"] { --d1: #3F43C9; --d2: #8A8DFF; }
.pfg-chip[data-k="tech"] { --d1: #1C7F99; --d2: #43BCD4; }
.pfg-chip[data-k="edu"]  { --d1: #4E68E6; --d2: #A9B8FF; }
.pfg-chip[data-k="cultura"] { --d1: #5B4FD6; --d2: #B39DFF; }
.pfg-sec .pfg-chip.is-on { background: linear-gradient(135deg, var(--d1), var(--d2)); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--d2) 45%, transparent); }
.pfg-sec .pfg-chip.is-on .pfg-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
.pfg-sec .pfg-chip.is-on span { color: rgba(255,255,255,0.85); }
/* Las tarjetas toman el color al pasar el mouse */
.pfg-sec .pfg-card { transition: box-shadow 0.35s ease, transform 0.35s ease, outline-color 0.35s ease; outline: 2px solid transparent; outline-offset: 2px; }
.pfg-sec .pfg-card:hover { outline-color: var(--pc2); box-shadow: 0 18px 40px color-mix(in srgb, var(--pc2) 30%, transparent); }
@media (max-width: 720px) {
  .pfg-sec .pfg-filters { width: auto; border-radius: var(--r-md); justify-content: center; }
  .pfg-sec .pfg-chip { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) { .pfg-atmos span::before { animation: none; } }

/* ============================================================== NIVELES · comparativa progresiva (2026-09-25) */
/* Base común (los tres niveles) */

/* Tarjeta: encabezados alineados entre columnas (subgrid) para que las filas coincidan de lado a lado */
.lv-card .rs-body { gap: 0; }
.lv-card .rs-body > * { margin: 0; }
.lv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; }
.lv-card .level-badge + .lv-top { }
.lv-res { flex: none; font: 800 13px/1 var(--font-body); letter-spacing: 0.04em; padding: 7px 10px; border-radius: var(--r-sm); color: var(--lv-t); background: var(--lv-tint); border: 1px solid var(--lv-b); }
.lv-3 .lv-res { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--lv-c1), var(--lv-c2)); box-shadow: 0 6px 16px var(--lv-halo); font-size: 14px; }
.lv-card .rs-name { padding-bottom: 8px; }
.lv-h { font-family: var(--font-heading); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.35; color: var(--text); padding-bottom: 8px; font-weight: 600;}
.lv-p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); padding-bottom: 18px; }

/* Filas progresivas */
.lv-filas { list-style: none; padding: 0 !important; border-top: 1px solid var(--border); }
.lv-g { font: 700 10.5px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 14px 0 6px; }
.lv-f { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 1.35; color: var(--text); min-height: 2.1em; }
.lv-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; font-style: normal; }
.lv-f.is-si .lv-ico { color: var(--lv-t); background: var(--lv-tint); border: 1px solid var(--lv-b); }
.lv-f.is-si .lv-ico svg { width: 12px; height: 12px; }
/* Lo que suma este nivel: mismo peso tipográfico (para no romper la alineación), más contraste */
.lv-f.is-si:not(.is-nuevo) { color: color-mix(in srgb, var(--text) 72%, var(--text-muted)); }
.lv-f.is-nuevo { color: var(--text); font-weight: 500; }
.lv-f.is-nuevo .lv-ico { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--lv-c1), var(--lv-c2)); }
/* No incluido: atenuado, sin tachar ni «X» (no es negativo, es otro proceso) */
.lv-f:not(.is-si) { color: var(--text-muted); opacity: 0.42; }
.lv-f:not(.is-si) .lv-ico::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* Proceso de revisión: línea de tiempo numerada */
.lv-rev { border-top: 1px solid var(--border); margin-top: 14px !important; padding-top: 16px; }
.lv-rev-t { display: block; font: 700 11px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lv-t); margin-bottom: 12px; }
.lv-pasos { list-style: none; margin: 0; padding: 0; counter-reset: lvp; display: grid; gap: 0; }

.lv-pasos li { counter-increment: lvp; position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; line-height: 1.25; color: var(--text); }
.lv-pasos li::before { content: counter(lvp); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11px/1 var(--font-body); color: #fff; background: linear-gradient(135deg, var(--lv-c1), var(--lv-c2)); position: relative; z-index: 1; }
.lv-pasos li::after { content: ""; position: absolute; left: 10.5px; top: 50%; height: 100%; width: 1px; background: var(--lv-b); }
.lv-pasos li:last-child::after { display: none; }

/* Ejemplo */

/* Escritorio: tres columnas con filas compartidas (subgrid). Navegadores sin subgrid: tarjetas normales. */
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    .lv-grid { grid-auto-rows: auto; row-gap: 0; }
    .lv-grid > .lv-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .lv-grid > .lv-card > .rs-body { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
}
/* Móvil / tablet: una columna; se ocultan las filas que no aplican para no alargar */
@media (max-width: 980px) {
  .lv-f:not(.is-si), .lv-g.is-vacio { display: none; }
  
}

/* Base común dentro de cada tarjeta (2026-09-25 b): primer grupo, filas compactas */
.lv-filas > li.lv-b { font-size: 13.5px; padding: 3px 0; min-height: 0; gap: 9px; }
.lv-filas > li.lv-b .lv-ico { width: 18px; height: 18px; }
.lv-filas > li.lv-b .lv-ico svg { width: 10px; height: 10px; }
.lv-g-base { padding-top: 12px; }
.lv-3 .lv-res { font-size: 12.5px; }

/* Nombre + resolución en la misma línea; sin kicker ni ejemplo (2026-09-25 c) */
.lv-top { align-items: center; padding-bottom: 8px; }
.lv-card .lv-top .rs-name { margin: 0; padding: 0; font-size: clamp(1.4rem, 1.85vw, 1.7rem); min-width: 0; }
.lv-res { font-size: 11.5px; padding: 5px 8px; border-radius: var(--r-xs); white-space: nowrap; }
.lv-3 .lv-res { font-size: 11.5px; }
.lv-card .level-badge ~ .lv-top { }
.lv-f small { font-size: 0.82em; color: var(--text-muted); font-weight: 400; }
.lv-card .rs-body { padding-bottom: clamp(22px, 2.4vw, 30px); }

/* Niveles: subtítulo del mismo ancho que el título, en dos renglones sin viudas (2026-09-25 d) */
.lv-sec .section-subtitle { max-width: min(805px, 100%); text-wrap: balance; }
/* Cotizador · paso 4: sin viudas y enlace grande a la comparativa */
#step4 .step-subtitle, .quality-card .q-subtitle, .quality-card .q-features span { text-wrap: pretty; }
#step4 .step-subtitle { text-wrap: balance; max-width: 62ch; margin-left: auto; margin-right: auto; }
.q-niveles-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 18px; margin: 22px 0 6px; padding: 18px 22px; border-radius: var(--r-md);
  border: 1.5px solid rgba(57,101,250,0.35); background: linear-gradient(135deg, rgba(57,101,250,0.08), rgba(122,184,224,0.08)); color: var(--text); text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s; }
.q-niveles-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(57,101,250,0.16); }
.q-niveles-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.q-niveles-q { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.3; font-weight: 600;}
.q-niveles-cta { grid-row: span 2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-body); white-space: nowrap; }
.q-niveles-nota { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 640px) { .q-niveles-link { grid-template-columns: 1fr; text-align: left; } .q-niveles-cta { grid-row: auto; justify-self: start; margin-top: 8px; } }
/* Corrección: en móvil las tarjetas de nivel del cotizador van en una columna (la regla de 3 columnas pisaba la del original) */
@media (max-width: 768px) { .cfg-product .quality-cards { grid-template-columns: 1fr; } }

/* =====================================================================
   MÓVIL · ajustes solo para pantallas de hasta 768 px (2026-09-26)
   En computadora no cambia nada: los elementos nuevos (.m-sel, .who-m-dots,
   .help-m-eleg) están ocultos fuera de móvil y todas las reglas que cambian
   el diseño viven dentro de @media (max-width: 768px). La lógica está en
   paginas.js (bloque «movil») y en site.js (hero y carrusel).
   ===================================================================== */
.m-sel, .who-m-dots, .help-m-eleg { display: none; }

@media (max-width: 768px) {

  /* ---------- Selector de tres opciones (mismo lenguaje que el toggle de productos) ---------- */
  .m-sel { position: sticky; top: calc(var(--header-h, 64px) + 10px); z-index: 30;
    display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    width: 100%; max-width: 460px; margin: 0 auto 18px; padding: 5px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(57, 101, 250, 0.28);
    box-shadow: 0 8px 26px rgba(23, 25, 29, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  .m-sel-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n, 3));
    border-radius: var(--r-full); background: linear-gradient(135deg, #2B4FD1, #3965FA);
    box-shadow: 0 8px 22px rgba(57, 101, 250, 0.35);
    transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 0.5s cubic-bezier(.22, .8, .2, 1); }
  .m-sel-b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; min-width: 0; min-height: 46px; padding: 7px 4px; border: 0; border-radius: var(--r-full); background: transparent;
    color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-sel-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: -0.01em; transition: color 0.35s ease; }
  .m-sel-k { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; line-height: 1.25; color: var(--text-muted); transition: color 0.35s ease; }
  .m-sel-b.is-on .m-sel-t { color: #fff; }
  .m-sel-b.is-on .m-sel-k { color: rgba(255, 255, 255, 0.86); }
  .m-sel-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Variante por etapas (Proceso): números unidos por una línea que se llena hasta la etapa elegida */
  .m-sel--pasos { border-radius: var(--r-lg); padding: 10px 4px 9px; }
  .m-sel--pasos .m-sel-thumb { display: none; }
  .m-sel--pasos::before, .m-sel--pasos::after { content: ""; position: absolute; top: 26px; left: calc(100% / 6 + 2px); height: 2px; border-radius: 2px; }
  .m-sel--pasos::before { right: calc(100% / 6 + 2px); background: var(--border); }
  .m-sel--pasos::after { width: calc((100% - 100% / 3 - 4px) * var(--i, 0) / (var(--n, 3) - 1)); background: var(--accent); transition: width 0.5s cubic-bezier(.22, .8, .2, 1); }
  .m-sel--pasos .m-sel-b { z-index: 1; gap: 6px; min-height: 0; padding: 0 2px 1px; border-radius: var(--r-sm); }
  .m-sel--pasos .m-sel-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-heading); font-size: 15px; font-weight: 600; font-feature-settings: 'tnum';
    color: var(--text-muted); background: var(--surface); border: 2px solid var(--border);
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }
  .m-sel--pasos .m-sel-b.is-hecho .m-sel-n { color: var(--accent-text); border-color: var(--accent); }
  .m-sel--pasos .m-sel-b.is-on .m-sel-n { color: var(--on-accent, #fff); background: var(--accent); border-color: var(--accent); transform: scale(1.08); box-shadow: 0 6px 18px var(--accent-glow); }
  .m-sel--pasos .m-sel-t { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
  .m-sel--pasos .m-sel-b.is-on .m-sel-t { color: var(--text); font-weight: 700; }

  /* Solo se ve la opción elegida; entra desde el lado de la opción */
  .m-sel-host { scroll-margin-top: calc(var(--header-h, 64px) + 88px); }
  .m-sel-host > .m-op:not(.is-m-on) { display: none !important; }
  .m-sel-host > .is-m-entra { animation: mEntra 0.45s cubic-bezier(.22, .8, .2, 1) both; }
  @keyframes mEntra { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 26px)); } to { opacity: 1; transform: none; } }
  .m-sel-host .stage-step { display: none; }            /* el selector ya dice la etapa */
  .m-sel-host > .prod-card { max-width: 460px; margin-left: auto; margin-right: auto; }

  /* ---------- Inicio · «Una probada»: los horizontales se ven completos ---------- */
  .pf-viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
                         mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .pf-card.is-h { height: auto; width: calc(100vw - 104px); max-width: 560px; }

  /* ---------- Servicios · portafolio: dos columnas, sin huecos; un vertical sin pareja va al final, a la izquierda ---------- */
  .pfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
  .pfg-card { width: auto; order: var(--m-o, 0); margin: 0 !important; }
  .pfg-card[data-h] { grid-column: 1 / -1; }

  /* ---------- Nosotros · «Quiénes somos»: se nota que las pestañas se deslizan ---------- */
  .who-tabs { scroll-snap-type: x proximity; scroll-padding-left: 2px; padding: 2px 2px 4px; margin: 0 -2px; }
  .who-tab { scroll-snap-align: start; }
  .who-tabs.m-mas-der { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%); }
  .who-tabs.m-mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); }
  .who-tabs.m-mas-izq.m-mas-der { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 78%, transparent 100%); }
  .who-m-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 2px; }
  .who-m-dot { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease; }
  .who-m-dot.is-on { width: 22px; border-radius: 4px; background: var(--accent); }
  .who-m-dot::after { content: ""; position: absolute; inset: -12px -4px; }   /* área táctil más grande */
  .who-m-flecha { width: 36px; height: 36px; margin: 0 6px; border-radius: 50%; display: grid; place-items: center; padding: 0 0 2px;
    font-size: 20px; line-height: 1; color: var(--text); background: var(--surface); border: 1px solid var(--border); cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; }
  .who-m-flecha:not(:disabled):active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
  .who-m-flecha:disabled { opacity: 0.35; cursor: default; }

  /* ---------- Nosotros · «Cómo podemos ayudarte»: se ve qué cambió al elegir ---------- */
  
  
  
  
  
  .help-m-eleg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--border); }
  .help-m-ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent); color: var(--on-accent, #fff); }
  .help-m-ico svg { width: 18px; height: 18px; }
  .help-m-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--text); }
  .help-m-txt small { font: 700 10px/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
  .help-m-eleg button { flex: none; padding: 8px 12px; border-radius: var(--r-full); border: 1px solid rgba(57, 101, 250, 0.35); background: var(--surface);
    color: var(--accent-text); font: 600 12.5px/1 var(--font-body); cursor: pointer; }

  /* ---------- Pie: más compacto; navegación en dos columnas y espacio para que el botón flotante no tape el final ---------- */
  .site-footer { padding: 56px 24px 104px; }
  .footer-grid { gap: 30px; margin-bottom: 36px; }
  .footer-nav-links { column-gap: 24px; }
  .footer-nav-links a { white-space: nowrap; }

  /* ---------- Botón flotante «Cuéntanos tu proyecto»: en una sola línea (antes se partía en dos) ---------- */
  .floating-cta { white-space: nowrap; }

  /* ---------- «Cinco pasos» (Inicio y Proceso): mismo contenido, menos alto ---------- */
     /* antes → ahora en una sola fila */
  
  
  
  .how-step { padding-bottom: 20px; }
  .how-step-chip { margin-bottom: 8px; }
  .how-step-title { margin-bottom: 4px; }
  .how-step-desc { margin-bottom: 0; }
  .how-step-link { margin-top: 10px; margin-bottom: 0; }
}
@media (max-width: 380px) {                       /* teléfonos angostos: que quepa «Cinematográfico» */
  .m-sel { padding: 4px; }
  .m-sel-thumb { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); }
  .m-sel-b { padding: 7px 2px; }
  .m-sel-t { font-size: 12px; letter-spacing: -0.02em; }
  .m-sel-k { font-size: 10px; }
  .m-sel--pasos .m-sel-t { font-size: 11.5px; letter-spacing: -0.02em; }
}
@media (max-width: 340px) { .m-sel-t, .m-sel--pasos .m-sel-t { font-size: 10.5px; } }
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .m-sel-thumb, .m-sel--pasos::after, .m-sel-t, .m-sel-k { transition: none; }
  .m-sel-host > .is-m-entra{ animation: none; }
}

/* ===== Verificación humana (Cloudflare Turnstile) =====
   Vive dentro del formulario que se envía, bajo su botón. Plegada e invisible mientras
   Cloudflare verifica en silencio; solo se despliega si pide confirmar con la casilla. */
.sky-humano { box-sizing: border-box; width: 100%; max-height: 0; overflow: hidden; opacity: 0;
  margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-md); text-align: left;
  background: var(--surface, #fff); color: var(--text);
  transition: max-height 0.35s cubic-bezier(.22, .8, .2, 1), opacity 0.25s ease, padding 0.35s ease, margin 0.35s ease; }
.sky-humano.is-on { max-height: 240px; opacity: 1; margin: 14px 0 6px; padding: 14px 14px 12px;
  border-color: var(--accent, #3b5bfd); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #3b5bfd) 14%, transparent); }
.sky-humano-t { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.sky-humano-w { min-height: 0; }
/* Respaldo: si el formulario no se encuentra, tarjeta fija abajo al centro */
.sky-humano--flotante { position: fixed; left: 50%; bottom: 20px; z-index: 400; width: min(340px, calc(100vw - 32px));
  transform: translateX(-50%); box-shadow: 0 18px 50px rgba(10, 14, 40, 0.28); }
.sky-humano--flotante.is-on { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sky-humano { transition: none; } }

/* =====================================================================
   REESTRUCTURA 2026-09-28 · menú con desplegables, páginas de servicio,
   planes para redes, tarjetas de producto e «SkyHeads Impact».
   ===================================================================== */

/* ---------- Menú principal: disparadores ---------- */
.header-nav .nav-item { position: relative; display: flex; align-items: center; height: 64px; }
.header-nav .nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted);
  transition: color .2s;
}
.header-nav .nav-trigger:hover, .header-nav .nav-item.is-open .nav-trigger { color: var(--text); }
.header-nav .nav-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.header-nav .nav-chev { transition: transform .28s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); opacity: .7; }
.header-nav .nav-item.is-open .nav-chev { transform: rotate(180deg); opacity: 1; }
.header-nav .nav-item.is-current > .nav-trigger { color: var(--accent-text); }
.header-nav .nav-item.is-current > .nav-trigger::after {
  content: ""; position: absolute; left: 0; right: 18px; bottom: 14px; height: 2px; border-radius: 2px; background: var(--accent);
}

/* los enlaces dentro de los paneles no heredan el subrayado ni el color del menú */
.header-nav .mega a::after, .header-nav .dd a::after { content: none !important; display: none !important; }
.header-nav .mega a, .header-nav .dd a { color: var(--text); font-size: inherit; }

/* ---------- Panel grande (Servicios) ---------- */
.header-nav .mega {
  position: fixed; left: 0; right: 0; top: 64px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -24px rgba(16, 24, 48, .28);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .32s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), visibility 0s linear .32s;
  z-index: 201;
}
.header-nav .nav-item.is-open .mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .32s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), visibility 0s;
}
.header-nav .mega-inner {
  max-width: 1180px; margin: 0 auto; padding: 28px 32px 32px;
  display: grid; grid-template-columns: 1fr 1fr 300px; gap: 28px;
}
.header-nav .mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.header-nav .mega-k {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-family: var(--font-label);}

/* enlace con icono (panel grande y desplegables chicos) */
.header-nav .mm-link {
  display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none;
  transition: background .2s, transform .2s;
}
.header-nav .mm-link:hover, .header-nav .mm-link:focus-visible { background: var(--surface-hover, var(--accent-soft)); }
.header-nav .mm-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.header-nav .mm-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  transition: background .2s, color .2s, transform .25s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
}
.header-nav .mm-link:hover .mm-ico { background: var(--accent); color: var(--on-accent); transform: scale(1.06); }
.header-nav .mm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.header-nav .mm-txt b { font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: 1.3; }
.header-nav .mm-txt small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.header-nav .mm-go { color: var(--accent-text); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s; }
.header-nav .mm-link:hover .mm-go, .header-nav .mm-link:focus-visible .mm-go { opacity: 1; transform: none; }
.header-nav .mm-link[aria-current="page"] b { color: var(--accent-text); }
.header-nav .mm-link[aria-current="page"] { background: var(--accent-soft); }

.header-nav .mega-all {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 0; align-self: flex-start;
  font-size: var(--text-sm); font-weight: 600; color: var(--accent-text) !important; text-decoration: none;
}
.header-nav .mega-all .mm-go { opacity: 1; transform: none; }
.header-nav .mega-all:hover .mm-go { transform: translateX(4px); }

/* tarjeta destacada del panel */
.header-nav .mega-feature {
  position: relative; overflow: hidden; border-radius: var(--r-md); text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 22px; min-height: 250px;
  background: radial-gradient(120% 90% at 85% 10%, rgba(57,101,250,.30), transparent 60%), var(--accent-soft-solid, #E9EBFF);
  color: #17191D !important;
  transition: transform .3s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), box-shadow .3s;
}
.header-nav .mega-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(57,101,250,.55); }
.header-nav .mega-feature-art {
  position: absolute; right: -40px; top: -34px; width: 230px; height: auto; opacity: .95; pointer-events: none;
  transition: transform .6s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
}
.header-nav .mega-feature:hover .mega-feature-art { transform: translateY(-6px) rotate(-3deg) scale(1.03); }
.header-nav .mega-feature-k { position: relative; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #2B4FD1; font-family: var(--font-label);}
.header-nav .mega-feature-t { position: relative; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; color: #17191D; font-weight: 600;}
.header-nav .mega-feature-t em { font-family: var(--font-accent, var(--font-heading)); font-style: normal; color: #2B4FD1; font-weight: 600;}
.header-nav .mega-feature-cta { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: #2B4FD1; }
.header-nav .mega-feature-cta .mm-go { opacity: 1; transform: none; color: #2B4FD1; }
.header-nav .mega-feature:hover .mega-feature-cta .mm-go { transform: translateX(4px); }

/* entrada escalonada del contenido del panel */
.header-nav .mega .mm-link, .header-nav .mega .mega-all, .header-nav .mega .mega-feature,
.header-nav .dd .mm-link { opacity: 0; transform: translateY(8px); }
.header-nav .nav-item.is-open .mega .mm-link, .header-nav .nav-item.is-open .mega .mega-all,
.header-nav .nav-item.is-open .mega .mega-feature, .header-nav .nav-item.is-open .dd .mm-link {
  opacity: 1; transform: none;
  transition: opacity .3s ease calc(var(--i, 0) * 35ms + 60ms), transform .4s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)) calc(var(--i, 0) * 35ms + 60ms), background .2s;
}
.header-nav .nav-item.is-open .mega .mega-feature:hover { transform: translateY(-3px); }

/* ---------- Desplegables chicos (Nosotros, Recursos) ---------- */
.header-nav .dd {
  position: absolute; top: calc(100% - 6px); left: 50%;
  width: 340px; padding: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 24px 48px -20px rgba(16, 24, 48, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .3s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), visibility 0s linear .3s;
  z-index: 202;
}
.header-nav .nav-item.is-open .dd {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s ease, transform .3s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), visibility 0s;
}

/* velo detrás del panel grande */
.nav-scrim {
  position: fixed; inset: 64px 0 0 0; z-index: 198;
  background: rgba(12, 16, 28, .28); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
body.mega-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }

[data-theme="dark"] .header-nav .mega, [data-theme="dark"] .header-nav .dd { background: #232323; }
[data-theme="dark"] .nav-scrim { background: rgba(0, 0, 0, .45); }

@media (max-width: 1180px) and (min-width: 1025px) {
  .header-nav .mega-inner { grid-template-columns: 1fr 1fr 250px; gap: 20px; }
}
@media (max-width: 1024px) {
  .header-nav .nav-item, .header-nav .nav-link { display: none !important; }
  .nav-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header-nav .mega, .header-nav .dd, .header-nav .mega *, .header-nav .dd *, .nav-scrim { transition: none !important; }
}

/* ---------- Drawer móvil: grupos plegables ---------- */
.mobile-nav-panel .mnav-group { border-bottom: 1px solid var(--border); }
.mobile-nav-panel .mnav-acc {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 6px; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: inherit;
}
.mobile-nav-panel .mnav-acc .nav-chev { transition: transform .3s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); color: var(--text-muted); }
.mobile-nav-panel .mnav-acc[aria-expanded="true"] .nav-chev { transform: rotate(180deg); color: var(--accent-text); }
.mobile-nav-panel .mnav-group.is-current .mnav-acc { color: var(--accent-text); }
.mobile-nav-panel .mnav-sub { padding: 0 0 12px; display: flex; flex-direction: column; }
.mobile-nav-panel .mnav-sub[hidden] { display: none; }
.mobile-nav-panel .mnav-sub a {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0;
  padding: 12px 6px 12px 16px; border-bottom: 0; color: var(--text-muted);
}
.mobile-nav-panel .mnav-sub a[aria-current="page"] { color: var(--accent-text); }

/* ---------- Marca de revisión (quitar antes de publicar) ---------- */

/* ---------- Secciones de un solo producto (sin toggle) ---------- */
.sol-solo .sol-stage { margin-top: clamp(24px, 4vh, 44px); }
.sol-solo .sol-panel[hidden] { display: none; }

/* ---------- Servicios: tarjetas de producto ---------- */
.svc-grid { max-width: 1180px; margin: clamp(28px, 5vh, 52px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.svc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  text-decoration: none; color: var(--text);
  transition: transform .35s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), box-shadow .35s, border-color .35s;
}
.svc-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 28px 56px -28px rgba(57,101,250,.45); }
.svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.svc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1d24; }
.svc-media--wide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.svc-card:hover .svc-media--wide img { transform: scale(1.04); }
.svc-media--fan { display: flex; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(90% 90% at 50% 100%, rgba(84,120,255,.35), transparent 70%), linear-gradient(160deg, #1d2333, #11141c); }
.svc-media--fan img {
  width: 26%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 16px 32px rgba(0,0,0,.4);
  transition: transform .6s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
}
.svc-media--fan img:nth-child(1) { transform: rotate(-8deg) translate(22px, 10px); }
.svc-media--fan img:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.svc-media--fan img:nth-child(3) { transform: rotate(8deg) translate(-22px, 10px); }
.svc-card:hover .svc-media--fan img:nth-child(1) { transform: rotate(-12deg) translate(4px, 12px); }
.svc-card:hover .svc-media--fan img:nth-child(3) { transform: rotate(12deg) translate(-4px, 12px); }
.svc-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.svc-card[data-modo="B"] .svc-k { color: #4F7BE0; }
.svc-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.svc-def { color: var(--text-muted); line-height: 1.55; max-width: 46ch; }
.svc-specs { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 0; margin-top: 4px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.svc-specs span { display: flex; flex-direction: column; gap: 2px; }
.svc-specs small { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-label);}
.svc-specs b { font-weight: 600; }
.svc-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-text); }
.svc-go svg { transition: transform .25s; }
.svc-card:hover .svc-go svg { transform: translateX(5px); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Paquete para redes: planes ---------- */
.plan-grid { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 22px 22px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .35s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), box-shadow .35s, border-color .35s;
}
.plan-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 24px 48px -26px rgba(57,101,250,.45); }
.plan-card.is-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-badge {
  position: absolute; top: -12px; left: 22px; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-name { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.plan-n { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.plan-n b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price small { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; width: 100%; font-family: var(--font-label);}
.plan-price strong { font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.plan-price span { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }

.plan-ideal { color: var(--text-muted); line-height: 1.5; min-height: 3em; }
.plan-specs { list-style: none; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.plan-specs li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.plan-specs li > span { color: var(--text-muted); }
.plan-specs b { font-weight: 600; text-align: right; }
.plan-cta {
  margin-top: auto; display: block; text-align: center; padding: 12px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--accent); color: var(--accent-text); font-weight: 700; font-size: var(--text-sm); text-decoration: none;
  transition: background .2s, color .2s;
}
.plan-card:hover .plan-cta, .plan-card.is-best .plan-cta { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; } }

@media (max-width: 560px) { .plan-grid{ grid-template-columns: 1fr; } }

/* ---------- Portafolio como página propia ---------- */
.pfg-top { padding-top: calc(var(--header-h, 64px) + clamp(40px, 8vh, 96px)) !important; }
.pfg-h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* ---------- Nosotros: SkyHeads Impact ---------- */

.imp-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }

/* =====================================================================
   RONDA 2 · 2026-09-28 noche: línea de tiempo, Contenido para redes,
   Quiénes somos con scroll, Tecnología.
   ===================================================================== */

/* ---------- Línea de tiempo vertical (Cómo trabajamos) ---------- */
.tl-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tl-aside { position: sticky; top: calc(var(--header-h, 64px) + 48px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tl-aside .section-label { text-align: left; margin: 0; }
.tl-h2 { font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.tl-sub { color: var(--text-muted); line-height: 1.6; }
.tl-counter { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.tl-counter b { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--accent-text); letter-spacing: -.03em; transition: opacity .2s; }
.tl-counter span { color: var(--text-muted); font-weight: 600; }
.tl-note { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; max-width: 36ch; }

.tl { list-style: none; margin: 0; padding: 0; position: relative; --tl-p: 0; }
.tl::before, .tl::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; }
.tl::before { background: var(--border); }
.tl::after { background: linear-gradient(var(--accent), #7AB8E0); transform-origin: top; transform: scaleY(var(--tl-p)); bottom: 22px; }
.tl-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 24px; padding-bottom: clamp(40px, 8vh, 88px); }
.tl-step:last-child { padding-bottom: 0; }
.tl-dot {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--text-muted);
  background: var(--bg); border: 2px solid var(--border);
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s, transform .35s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
}
.tl-step.is-on .tl-dot { border-color: var(--accent); color: var(--accent-text); }
.tl-step.is-cur .tl-dot { background: var(--accent); color: var(--on-accent); transform: scale(1.08); box-shadow: 0 0 0 8px var(--accent-soft); }
.tl-body { opacity: .38; transform: translateX(-4px); transition: opacity .45s ease, transform .45s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); padding-top: 4px; }
.tl-step.is-on .tl-body { opacity: 1; transform: none; }
.tl-when { display: inline-block; font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; font-family: var(--font-label);}
.tl-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin-bottom: 8px; }
.tl-lead { color: var(--text-muted); line-height: 1.6; max-width: 56ch; }
.tl-more {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), opacity .4s ease .1s;
}
.tl-step.is-on .tl-more { max-height: 420px; opacity: 1; }
.tl-cell { padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.tl-cell b { font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-label);}
.tl-cell span { font-size: var(--text-sm); line-height: 1.5; }
.tl-cell.is-res { background: var(--accent-soft); border-color: transparent; }
.tl-cell.is-res b { color: var(--accent-text); }
@media (max-width: 960px) {
  .tl-wrap { grid-template-columns: 1fr; }
  .tl-aside { position: static; }
  .tl-counter { display: none; }
  .tl-more { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-body { opacity: 1; transform: none; } .tl-more { max-height: none; opacity: 1; }
  .tl::after { transform: none; }
}

/* ---------- Mini FAQ en páginas de servicio ---------- */
.mini-faq-list { max-width: 820px; margin: clamp(24px, 4vh, 40px) auto 0; }
.mini-faq-more { text-align: center; margin-top: 24px; }
.hero-mode.is-static { cursor: default; }

/* ---------- Contenido para redes: cómo funciona ---------- */
.rf-flow { max-width: 1180px; margin: clamp(28px, 5vh, 52px) auto 0; display: grid; grid-template-columns: 1fr 48px 1fr 48px 1.35fr; align-items: stretch; }
.rf-node {
  position: relative; padding: 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.rf-node.is-hub { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border-color: var(--accent); }
.rf-n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--accent-text); letter-spacing: .06em; }
.rf-node b { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.rf-node p { color: var(--text-muted); line-height: 1.5; font-size: var(--text-sm); }
.rf-link { position: relative; display: flex; align-items: center; justify-content: center; }
.rf-link i { position: relative; width: 100%; height: 2px; background: var(--border); overflow: hidden; }
.rf-link i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: rfFlujo 2.4s linear infinite; }
@keyframes rfFlujo { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.rf-mat { display: flex; margin-top: auto; padding-top: 12px; }
.rf-mat img { width: 38%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm); border: 3px solid var(--surface); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.rf-mat img:nth-child(1) { transform: rotate(-6deg); } .rf-mat img:nth-child(2) { margin-left: -12%; transform: translateY(-6px); z-index: 1; } .rf-mat img:nth-child(3) { margin-left: -12%; transform: rotate(6deg); }
.rf-bank { margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rf-bank span { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--accent-soft) center / cover no-repeat; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(57,101,250,.35); animation: rfPulso 3.6s ease-in-out infinite; }
.rf-bank span:nth-child(2n) { animation-delay: .5s; } .rf-bank span:nth-child(3n) { animation-delay: 1s; }
@keyframes rfPulso { 0%, 100% { opacity: .78; transform: scale(.97); } 50% { opacity: 1; transform: none; } }

.rf-shot { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-sm); overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #111; }
.rf-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.rf-shot:hover img { transform: scale(1.05); }
.rf-shot .pfg-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.rf-shot .sol-shot-dur { position: absolute; right: 8px; bottom: 8px; color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rf-cap { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }

@media (max-width: 1020px) {
  .rf-flow { grid-template-columns: 1fr; gap: 0; }
  .rf-link { height: 36px; } .rf-link i { width: 2px; height: 100%; }
  .rf-link i::after { width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--accent), transparent); animation-name: rfFlujoV; }
  @keyframes rfFlujoV { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
}
@media (prefers-reduced-motion: reduce) { .rf-link i::after, .rf-bank span { animation: none; } }

/* ---------- Contenido para redes: sin contrato ---------- */

.sinc-alt { margin-top: 24px; color: rgba(255,255,255,.86); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sinc-alt a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sinc-alt svg { color: #fff; }

/* ---------- Quiénes somos: texto que avanza, imagen fija ---------- */

 
.w2-prog { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w2-prog i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.w2-prog i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.w2-prog i.is-done::after, .w2-prog i.is-on::after { transform: scaleX(1); }

/* ---------- Nosotros: acceso a Tecnología ---------- */

 

/* ---------- Tecnología ---------- */
.tp { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

@media (max-width: 860px) { .tp { grid-template-columns: 1fr; } }

.tf { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }

@media (max-width: 860px) { .tf { grid-template-columns: 1fr; }  }

.tb { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

@media (max-width: 900px) { .tb { grid-template-columns: 1fr; }   }

.tc { width: 100%; border-collapse: separate; border-spacing: 0; }
.tc th, .tc td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
.tc thead th { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; }
.tc thead th.is-us { color: var(--accent-text); font-style: normal; font-family: var(--font-accent, var(--font-heading)); font-weight: 600;}
.tc tbody th { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); width: 28%; }
.tc td { color: var(--text-muted); }
.tc td.is-us { color: var(--text); background: var(--accent-soft); font-weight: 600; }
.tc tbody tr:first-child td.is-us { border-top-left-radius: 0; }

/* =====================================================================
   RONDA 3 · 2026-09-28 20:10: Quiénes somos en paneles, planes con lo
   incluido, «sin contrato» con un año de ejemplo, páginas de acompañamiento.
   ===================================================================== */

/* ---------- Línea de tiempo: la línea termina en el último punto ---------- */
.tl::before, .tl::after { bottom: auto !important; height: var(--tl-h, calc(100% - 44px)); }

/* ---------- Quiénes somos: paneles que se expanden ---------- */
.w3 { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: flex; gap: 12px; height: clamp(440px, 64vh, 560px); }
.w3-p {
  position: relative; flex: 1 1 0; min-width: 84px; border-radius: var(--r-lg); overflow: hidden; color: #fff;
  background-color: #11141c; background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: flex-grow .7s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
}
.w3-p::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,20,.15) 0%, rgba(10,12,20,.35) 40%, rgba(10,12,20,.88) 100%); transition: background .5s; }
.w3-p:not(.is-on)::before { background: rgba(12,16,28,.62); }
.w3-p.is-on { flex-grow: 4.2; }
.w3-tab {
  position: absolute; inset: 0; z-index: 2; background: none; border: 0; padding: 22px; cursor: pointer; color: #fff; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.w3-p.is-on .w3-tab { inset: 0 0 auto 0; height: 72px; cursor: default; }
.w3-tab:focus-visible { outline: 2px solid #8FA9FF; outline-offset: -6px; border-radius: var(--r-lg); }
.w3-n { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; }
.w3-kick { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .9; font-family: var(--font-label);}
.w3-p.is-on .w3-kick { writing-mode: horizontal-tb; transform: none; position: absolute; left: 64px; top: 25px; color: #8FA9FF; }
.w3-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s ease, transform .5s var(--ease-out-quint, cubic-bezier(.22,1,.36,1));
  min-width: 420px;
}
.w3-p.is-on .w3-body { opacity: 1; transform: none; pointer-events: auto; transition-delay: .28s; }
.w3-t { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.02em; line-height: 1.12; max-width: 20ch; }
.w3-d { color: rgba(255,255,255,.85); line-height: 1.6; max-width: 52ch; }
.w3-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; }
.w3-chips span { padding: 5px 10px; border-radius: var(--r-full); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: 12px; backdrop-filter: blur(6px); }
.w3-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.w3-flow li { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 2px; }
.w3-flow b { font-size: var(--text-sm); } .w3-flow span { font-size: 12px; color: rgba(255,255,255,.75); }
.w3-bar { position: absolute; left: 22px; right: 22px; bottom: 14px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; z-index: 3; opacity: 0; }
.w3-p.is-on .w3-bar { opacity: 1; }
.w3-bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.w3.is-auto .w3-p.is-on .w3-bar::after { animation: w3Bar var(--w3-t, 7s) linear forwards; }
.w3.is-paused .w3-p.is-on .w3-bar::after { animation-play-state: paused; }
@keyframes w3Bar { to { transform: scaleX(1); } }
/* Cifras de Nosotros (12 oct 2026): número y unidad en una línea, descripción abajo; la primera, destacada */
.w3-stats { max-width: 1180px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.w3-stat { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 8px; padding: 22px 26px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.w3-stat::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 55%; height: 100%; pointer-events: none;
  background: radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1.1px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%); }
.w3-stat b { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.2vw, 3.4rem); line-height: .9; color: var(--accent-text); letter-spacing: -.04em; white-space: nowrap; }
.w3-stat span { display: contents; }
.w3-stat em { position: relative; font-style: normal; font-weight: 700; font-size: 1.15rem; }
.w3-stat small { position: relative; grid-column: 1 / -1; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.45; }
.w3-stat:first-child { background: linear-gradient(140deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #0B1A5C) 100%); border-color: transparent; color: var(--on-accent); }
.w3-stat:first-child::after { background-image: radial-gradient(rgba(255,255,255,.34) 1.1px, transparent 1.6px); }
.w3-stat:first-child b { color: var(--on-accent); }
.w3-stat:first-child small { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
@media (max-width: 900px) {
  .w3 { flex-direction: column; height: auto; }
  .w3-p, .w3-p.is-on { flex: none; min-height: 380px; }
  .w3-p::before, .w3-p:not(.is-on)::before { background: linear-gradient(180deg, rgba(10,12,20,.1) 20%, rgba(10,12,20,.9) 100%); }
  .w3-tab, .w3-p.is-on .w3-tab { inset: 0 0 auto 0; height: 64px; cursor: default; pointer-events: none; }
  .w3-kick, .w3-p.is-on .w3-kick { writing-mode: horizontal-tb; transform: none; position: absolute; left: 60px; top: 25px; color: #8FA9FF; }
  .w3-p, .w3-p.is-on { display: flex; flex-direction: column; justify-content: flex-end; }
  .w3-body { position: relative; opacity: 1; transform: none; pointer-events: auto; min-width: 0; padding: 76px 22px 22px; }
  .w3-bar { display: none; }
  .w3-flow { grid-template-columns: 1fr 1fr; }
  .w3-stats { grid-template-columns: 1fr; }
  .w3-stat { padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .w3-p, .w3-body { transition: none; } .w3-bar { display: none; } }

/* ---------- Planes: lo incluido dentro de cada tarjeta ---------- */
.plan-inc-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--font-label);}
.plan-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-inc li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); line-height: 1.4; }
.plan-inc svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.pc-tier-precio { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; }
.pc-tier-precio small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.plan-pts { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.plan-pts b { color: var(--accent-text); font-weight: 800; }
.plan-inc-mas { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.plan-card.is-best .plan-inc svg { color: var(--accent); }

/* ---------- Sin contrato mensual: un año de ejemplo ---------- */

.sinc-alt { text-align: center; margin-top: 22px; color: var(--text-muted); display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 6px; }
.sinc-alt a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.sinc-alt svg { color: var(--accent-text); }

/* ---------- Acompañamiento: tarjetas con icono ---------- */

/* ---------- Diferenciadores ---------- */
.df { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }

@media (max-width: 860px) { .df { grid-template-columns: 1fr; }  }

/* ---------- Ejemplo anónimo ---------- */
.ej { max-width: 980px; margin: 0 auto; padding: clamp(32px, 5vh, 52px) clamp(24px, 4vw, 52px); border-radius: var(--r-lg); color: #EDEDED; text-align: center;
  background: radial-gradient(70% 90% at 100% 0%, rgba(57,101,250,.32), transparent 60%), #161A22; }
.ej .section-label { color: #8FA9FF; }

/* ---------- Branding: etapas ---------- */
.br { max-width: 1180px; margin: clamp(28px, 5vh, 44px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: br; }

.br-note { text-align: center; color: var(--text-muted); margin-top: 18px; font-size: var(--text-sm); }
@media (max-width: 860px) { .br { grid-template-columns: 1fr; } }

/* ---------- «Y después» ---------- */

/* ---------- Servicios (índice): tres formas de trabajar ---------- */
.ak-grid { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ak-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 24px 24px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: transform .35s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)), border-color .35s, box-shadow .35s; }
.ak-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 28px 56px -28px rgba(57,101,250,.45); }
.ak-media { margin: 0 -24px 6px; height: 180px; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 100%, rgba(84,120,255,.18), transparent 70%), var(--accent-soft); overflow: hidden; }
.ak-media img { height: 170px; width: auto; transition: transform .7s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.ak-card:hover .ak-media img { transform: translateY(-6px) scale(1.04); }
.ak-commit { align-self: flex-start; padding: 4px 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.ak-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.55rem; letter-spacing: -.01em; line-height: 1.15; }
.ak-def { color: var(--text-muted); line-height: 1.55; }
.ak-go { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--accent-text); }
.ak-go svg { transition: transform .25s; } .ak-card:hover .ak-go svg { transform: translateX(5px); }
@media (max-width: 960px) { .ak-grid { grid-template-columns: 1fr; } }

/* ===================== RONDA 4 (29 sep) ===================== */
:root { --r4-ease: var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); --r4-b: #7AB8E0; }

/* ---------- Intro visual de los cotizadores ---------- */
.cfg-info.cv { gap: 12px; }
.cv-media { position: relative; border-radius: var(--r-md); overflow: hidden; background: #0f1218; }
.cv-a { aspect-ratio: 16 / 10; }
.cv-a img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--r4-ease); }
.cfg-info.cv:hover .cv-a img { transform: scale(1.08); }
.cv-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(57,101,250,.92); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.cv-play svg { margin-left: 3px; }
.cv-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.cv-bar i { display: block; height: 100%; width: 35%; background: #fff; animation: cvScrub 6s linear infinite; }
@keyframes cvScrub { from { width: 0; } to { width: 100%; } }
.cv-b { aspect-ratio: 16 / 10; background: radial-gradient(80% 90% at 50% 100%, rgba(122,184,224,.35), transparent 70%), #0f1218; }
.cv-b img { position: absolute; bottom: -8%; width: 34%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(0,0,0,.4); transition: transform .8s var(--r4-ease); }
.cv-f1 { left: 9%; transform: rotate(-9deg); }
.cv-f2 { left: 33%; bottom: -3% !important; z-index: 1; }
.cv-f3 { right: 9%; transform: rotate(9deg); }
.cfg-info.cv:hover .cv-f1 { transform: rotate(-13deg) translateX(-6px); }
.cfg-info.cv:hover .cv-f3 { transform: rotate(13deg) translateX(6px); }
.cv-fmt { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.cv-fmt i { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255,255,255,.92); color: #17191D; }
.cv-t { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.15; margin-top: 4px; }
.cv-d { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.cv-specs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-specs li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.cv-specs svg { flex: none; color: var(--accent-text); }
#cfgPaneB .cv-specs svg { color: var(--r4-b); }
.cv-note { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.cv-more { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .25s, color .25s, transform .25s; }
.cv-more:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.cv-more svg { transition: transform .25s; } .cv-more:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) {
  .cfg-info.cv { display: grid; grid-template-columns: 200px 1fr; column-gap: 18px; row-gap: 8px; align-items: start; }
  .cfg-info.cv .cv-media { grid-row: span 5; }
  .cfg-info.cv .cv-more { margin-top: 6px; justify-self: start; }
}
@media (max-width: 640px) {
  .cfg-info.cv { grid-template-columns: 1fr; }
  .cfg-info.cv .cv-media { grid-row: auto; }
  .cv-specs { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .cv-specs li { font-size: 13px; }
}

/* ---------- Cotizador embebido en su página ---------- */
.configurador-section[data-solo] .cfg-info { display: none; }
.configurador-section[data-solo] .cfg-duo, .configurador-section[data-solo] #cfgPaneA .cfg-duo { grid-template-columns: minmax(0, 1fr); }
.configurador-section[data-solo] .configurador-header { margin-bottom: 26px; }

/* ---------- Cotizador B: plan + armador de mezcla ---------- */
.pc-tier-name { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.pc-tier.is-on .pc-tier-name { color: var(--accent-text); }
.pc-tiers { max-width: 640px; }
.pc-mix { max-width: 640px; margin: 18px auto 0; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg); animation: pcMixIn .45s var(--r4-ease) both; }
@keyframes pcMixIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-mix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pc-mix-t { font-weight: 700; }
.pc-mix-rows { display: flex; flex-direction: column; }
.pc-mix-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.pc-mix-ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(122,184,224,.16); color: var(--text); }
.pc-mix-name b { display: block; font-size: 15px; }
.pc-mix-name small { font-size: 12px; color: var(--text-muted); }
.pc-mix-step { display: inline-flex; align-items: center; gap: 6px; }
.pc-mix-b { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.pc-mix-b:hover:not(:disabled) { border-color: var(--r4-b); transform: translateY(-1px); }
.pc-mix-b:disabled { opacity: .35; cursor: not-allowed; }
.pc-mix-b:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pc-mix-n { min-width: 30px; text-align: center; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.pc-mix-txt { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.pc-mix-txt b { color: var(--text); }
.pc-mix-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pc-mix-preset { padding: 7px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.pc-mix-preset.is-on { border-color: var(--r4-b); background: rgba(122,184,224,.16); }
.pc-mix .pc-siguiente { margin-top: 14px; width: 100%; }
.pc-mix .pc-siguiente:disabled { opacity: .45; cursor: not-allowed; }
.pc-mas { text-align: center; margin-top: 16px; font-size: var(--text-sm); }
.pc-mas a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.pc-mas a:hover { text-decoration: underline; }
#pcResPiezas { font-size: 14.5px; line-height: 1.35; }
@media (max-width: 560px) { .pc-mix-txt { white-space: normal; }  }

/* ---------- Video a la medida ---------- */
.sol-specs.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-specs-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: -4px; }
.cmp-cta { max-width: 980px; margin: clamp(26px, 4vh, 40px) auto 0; display: flex; align-items: center; gap: 18px; padding: 18px 20px 18px 18px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--accent); }
.cmp-cta-ico { flex: none; width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.cmp-cta-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cmp-cta-txt b { font-size: 1.12rem; }
.cmp-cta-txt span { color: var(--text-muted); }
.cmp-cta-b { flex: none; }
@media (max-width: 720px) { .cmp-cta { flex-direction: column; align-items: flex-start; } .cmp-cta-b { width: 100%; text-align: center; } }

/* ---------- Contenido para redes: cómo funciona ---------- */
.rf-v4 .rf-bank span { position: relative; overflow: hidden; }
.rf-v4 .rf-bank em { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: var(--r-xs); background: rgba(255,255,255,.92); color: #17191D; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1.4; }
.rf-v4 .rf-bank em.is-ia { background: var(--accent); color: #fff; }
.rf-fun { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rf-fun-row { width: var(--w); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--accent-soft), transparent 90%); border: 1px solid var(--border); }
.rf-fun-row:nth-child(2) { background: linear-gradient(90deg, rgba(84,120,255,.24), transparent 90%); }
.rf-fun-row:nth-child(3) { background: linear-gradient(90deg, rgba(57,101,250,.34), transparent 90%); }
.rf-fun-k { flex: 1; font-size: 12.5px; font-weight: 700; }
.rf-fun .rf-shot { width: 38px; flex: none; border-radius: var(--r-sm); }
.rf-fun .rf-shot .pfg-play { transform: translate(-50%, -50%) scale(.6); }

/* ---------- Planes con mezcla ---------- */
.nc4 { list-style: none; max-width: 1180px; margin: clamp(22px, 4vh, 34px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nc4 li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; }
.nc4-ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.plan-eq { max-width: 1180px; margin: 18px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: var(--text-sm); }
.plan-eq b { color: var(--text); }
.plan-eq-ico { display: inline-flex; gap: 2px; color: var(--accent-text); }
.plan-grid + .plan-precio, .plan-precio { max-width: 1180px; margin: 22px auto 0; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-md); text-decoration: none; color: var(--text);
  background: linear-gradient(110deg, rgba(57,101,250,.14), rgba(122,184,224,.14)); border: 1px dashed var(--accent); transition: transform .3s var(--r4-ease), border-style .3s; }
.plan-precio:hover { transform: translateY(-2px); border-style: solid; }
.plan-precio-ico { flex: none; width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.plan-precio-txt { flex: 1; line-height: 1.45; }
.plan-precio-txt span { color: var(--text-muted); }
.plan-precio-b { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.plan-precio:hover .plan-precio-b svg { transform: translateX(4px); } .plan-precio-b svg { transition: transform .25s; }
.plan4 .plan-ideal { min-height: 3em; }
.pm { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); }
.pm-k { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-label);}
.pm-bar { display: flex; gap: 3px; height: 40px; }
.pm-leg { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.pm-leg i { width: 9px; height: 9px; border-radius: 3px; margin-left: 4px; } .pm-leg i:first-child { margin-left: 0; }
.pm-leg i.is-reel { background: #3965FA; } .pm-leg i.is-carr { background: #6FA4E3; } .pm-leg i.is-img { background: #9CCBEA; }
.pm-seg svg { flex: none; opacity: .85; }
.pm-seg { min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; border-radius: var(--r-sm); color: #fff; font-size: 10.5px; line-height: 1.15; overflow: hidden; white-space: nowrap;
  transform-origin: left center; transform: scaleX(.2); opacity: 0; transition: transform .8s var(--r4-ease), opacity .5s; }
.pm-seg b { font-family: var(--font-display); font-size: 1.05rem; }
.pm-seg.is-reel { background: linear-gradient(160deg, #3965FA, #5478FF); }
.pm-seg.is-carr { background: linear-gradient(160deg, #5C8FE6, #7AB8E0); transition-delay: .1s; }
.pm-seg.is-img  { background: linear-gradient(160deg, #7AB8E0, #9CCBEA); color: #0d2233; transition-delay: .2s; }
.pm.is-in .pm-seg{ transform: none; opacity: 1; }
.pm-o { font-size: 12.5px; color: var(--text-muted); }
.pm-o b { color: var(--text); }
@media (max-width: 1100px) { .nc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-precio { flex-direction: column; align-items: flex-start; } .plan-precio-b { width: 100%; justify-content: center; } .plan-eq { flex-direction: column; text-align: center; gap: 4px; } }
@media (max-width: 420px) { .nc4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pm-seg { transform: none; opacity: 1; transition: none; } }

/* ---------- Bento con visuales ---------- */
.bn { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bn-tile { grid-column: span 2; position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  transition: transform .4s var(--r4-ease), border-color .4s, box-shadow .4s; }
.bn-tile.is-w4 { grid-column: span 4; }
.bn-tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 50px -30px rgba(57,101,250,.55); }
.bn-vis { position: relative; min-height: 168px; padding: 22px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 80% at 80% 0%, rgba(84,120,255,.16), transparent 70%), var(--bg); border-bottom: 1px solid var(--border); overflow: hidden; }
.bn-tile.is-w4 .bn-vis { min-height: 196px; }
.bn-txt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.bn-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px; }
.bn-txt h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.2; }
.bn-txt p { color: var(--text-muted); line-height: 1.55; font-size: var(--text-sm); }
@media (max-width: 980px) { .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bn-tile, .bn-tile.is-w4 { grid-column: span 1; } .bn-tile.is-w4 { grid-column: span 2; } }
@media (max-width: 640px) { .bn { grid-template-columns: 1fr; } .bn-tile, .bn-tile.is-w4 { grid-column: auto; } }

/* capacidad */

   

/* entrega bajo tu nombre */

/* fechas */

/* criterio */

/* herramientas */

/* organigrama */

/* vacantes */
.v-rl { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.v-rl-k { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; font-family: var(--font-label);}
.v-rl > span { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; }
.v-rl s { text-decoration-color: transparent; transition: text-decoration-color .3s; transition-delay: calc(.3s + var(--i) * .15s); }
.bn-tile.is-in .v-rl s { text-decoration-color: var(--text-muted); color: var(--text-muted); }
.v-rl svg { color: var(--accent-text); opacity: 0; transition: opacity .3s; transition-delay: calc(.4s + var(--i) * .15s); }
.bn-tile.is-in .v-rl svg { opacity: 1; }
/* lo que va llegando */

/* crecimiento */
.v-cc { width: 100%; }
.v-cc svg { width: 100%; height: 96px; display: block; overflow: visible; }
.v-cc-area { fill: rgba(57,101,250,.14); }
.v-cc-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.6s var(--r4-ease) .2s; }
.bn-tile.is-in .v-cc-line { stroke-dashoffset: 0; }
.v-cc-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Qué producimos: disciplinas animadas ---------- */
.vp-grid { max-width: 1180px; margin: clamp(28px, 5vh, 48px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vp-tile { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform .4s var(--r4-ease), border-color .4s, box-shadow .4s; }
.vp-tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 50px -30px rgba(57,101,250,.55); }
.vp { position: relative; height: 170px; overflow: hidden; background: #10131A center / cover no-repeat; }
.vp-txt { padding: 18px 20px 20px; }
.vp-txt h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.vp-txt p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; margin-top: 4px; }

 

 
 
 

@keyframes flash { 0%, 90% { opacity: 0; } 92% { opacity: .85; } 100% { opacity: 0; } }

  
 
  

@media (max-width: 980px) { .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
   .cv-bar i { animation: none !important; }
}

/* ---------- Timeline con «por qué» y chips ---------- */
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tl-chips span { padding: 5px 11px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; }
.tl-step.is-on .tl-chips span { border-color: var(--accent); color: var(--accent-text); }
.tl-pq { margin: 18px 0 20px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.tl-pq-k { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; font-family: var(--font-label);}
.tl-pq ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-pq li { display: flex; gap: 10px; align-items: flex-start; }
.tl-pq li svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.tl-pq li b { display: block; font-size: 14.5px; }
.tl-pq li span { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tl4 .tl-counter { margin-top: 0; }

/* ---------- Selector de servicios ---------- */
.pk-group { display: grid; gap: 10px; }
.pk-group.is-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-group.is-cards .pk { padding-right: 44px; }   /* el texto nunca pasa debajo del circulito de selección */
.pk { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--r4-ease), box-shadow .25s; }
.pk:hover { border-color: var(--accent); transform: translateY(-2px); }
.pk:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pk-ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); transition: background .25s, color .25s; }
.pk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-txt b { font-size: 15px; line-height: 1.25; }
.pk-txt small { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.pk-chk { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); color: transparent; transition: background .2s, border-color .2s, color .2s, transform .3s var(--r4-ease); }
.pk[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface)); box-shadow: 0 16px 34px -24px rgba(57,101,250,.7); }
.pk[aria-pressed="true"] .pk-ico { background: var(--accent); color: var(--on-accent); }
.pk[aria-pressed="true"] .pk-chk { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
.pk-group.is-chips, .pk-group.is-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-group.is-chips .pk, .pk-group.is-seg .pk { padding: 8px 14px; border-radius: var(--r-full); align-items: center; }
.pk-group.is-chips .pk-txt b, .pk-group.is-seg .pk-txt b { font-size: 13.5px; font-weight: 600; }
.pk-group.is-chips .pk-chk, .pk-group.is-seg .pk-chk { position: static; width: 18px; height: 18px; order: -1; }
.pk-group.is-chips .pk:not([aria-pressed="true"]) .pk-chk, .pk-group.is-seg .pk:not([aria-pressed="true"]) .pk-chk { display: none; }
.pk-wrap { max-width: 1180px; margin: clamp(28px, 5vh, 44px) auto 0; }
.pk-plazo { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pk-plazo-k { font-weight: 700; font-size: var(--text-sm); }
.pk-plazo .pk-group { margin-top: 0; }
.pk-tray { position: sticky; bottom: 16px; z-index: 5; margin: 20px auto 0; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); transition: border-color .3s, box-shadow .3s; }
.pk-tray.is-on { border-color: var(--accent); box-shadow: 0 18px 40px -18px rgba(57,101,250,.55); }
.pk-tray-n { font-size: var(--text-sm); color: var(--text-muted); }
.pk-tray-n b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.pk-tray-b { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1020px) { .pk-group.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pk-group.is-cards { grid-template-columns: 1fr; } .pk-tray { width: 100%; justify-content: space-between; padding: 8px 8px 8px 14px; gap: 10px; } .pk-tray-n { font-size: 12.5px; line-height: 1.2; } .pk-tray-b { padding: 10px 12px; font-size: 13px; white-space: nowrap; } }

/* ---------- Alcance geográfico ---------- */
.geo { max-width: 1180px; margin: 22px auto 0; display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 20px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--border); }

 

@media (max-width: 960px) { .geo { grid-template-columns: 1fr; } }

/* ---------- Formularios propios ---------- */
.fm { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 30px 80px -40px rgba(23,25,29,.35); }
.fm-side { position: relative; padding: clamp(28px, 4vw, 48px); color: #EDEDED; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(80% 60% at 100% 0%, rgba(57,101,250,.55), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(122,184,224,.28), transparent 60%), #141821; }
.fm-side .section-label { text-align: left; margin: 0; color: #8FA9FF; }
.fm-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.fm-title em { font-family: var(--font-accent, var(--font-heading)); font-style: normal; color: #8FA9FF; font-weight: 600;}
.fm-lead { color: rgba(237,237,237,.78); line-height: 1.6; }
.fm-next { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.fm-next-k { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,237,237,.6); font-family: var(--font-label);}
.fm-next ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fm-next li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.fm-next li span:first-child { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 700; }
.fm-wa { font-size: 14px; color: rgba(237,237,237,.75); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-wa a { color: #fff; font-weight: 700; text-decoration: none; }
.fm-wa svg { color: #8FA9FF; }
.fm-form { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.fm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fm-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fm-f input, .fm-f textarea { font: inherit; font-size: 15px; font-weight: 500; color: var(--text); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); transition: border-color .2s, box-shadow .2s; resize: vertical; }
.fm-f input:focus, .fm-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,101,250,.18); }
.fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fm-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; }
.fm-form .contact-legal { font-size: 12.5px; }
.fm-sel { padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--border); background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fm-sel.has-sel { border-style: solid; border-color: var(--accent); }
.fm-sel-k { font-size: 13px; font-weight: 700; margin-right: 4px; }
.fm-sel-chips { display: contents; }
.fm-chip { padding: 5px 10px; border-radius: var(--r-full); border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fm-chip span { opacity: .75; margin-left: 2px; }
.fm-chip.is-plazo { background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent); cursor: default; }
.fm-sel-none { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); margin: 0; }
.fm-sel-none[hidden] { display: none; }
.fm-sel-edit { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
@media (max-width: 900px) { .fm { grid-template-columns: 1fr; } .fm-next { margin-top: 6px; } }
@media (max-width: 560px) { .fm-row { grid-template-columns: 1fr; } .fm-submit { align-self: stretch; justify-content: center; } }

/* ---------- Branding: para quién y áreas ---------- */
.st-grid { max-width: 1180px; margin: clamp(28px, 5vh, 44px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  transition: transform .4s var(--r4-ease), border-color .4s, box-shadow .4s; }
.st-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--accent-soft), transparent); transition: height .5s var(--r4-ease); z-index: 0; }
.st-card > * { position: relative; z-index: 1; }
.st-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 26px 50px -30px rgba(57,101,250,.55); }
.st-card:hover::before { height: 100%; }
.st-n { position: absolute; top: 14px; right: 18px; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--border); }
.st-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); margin-bottom: 8px; }
.st-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.2; }
.st-card p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 1020px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-grid { grid-template-columns: 1fr; } }
.am { max-width: 1180px; margin: clamp(28px, 5vh, 44px) auto 0; display: grid; grid-template-columns: 1.15fr 1.15fr 1fr .85fr; gap: 14px; align-items: stretch; }
.am-col { --c1: #3965FA; --c2: #5478FF; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 20px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  transition: transform .4s var(--r4-ease), border-color .4s, box-shadow .4s; }
.am-col.is-iden { --c1: #5478FF; --c2: #7AB8E0; } .am-col.is-dise { --c1: #5C8FE6; --c2: #9CCBEA; } .am-col.is-acti { --c1: #2A2F8F; --c2: #6468F0; }
.am-col:hover { transform: translateY(-4px); border-color: var(--c1); box-shadow: 0 26px 50px -30px rgba(57,101,250,.55); }
.am-head { margin: 0 -20px 10px; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.am-ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255,255,255,.18); }
.am-n { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; opacity: .55; }
.am-col h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; }
.am-col p { color: var(--text-muted); font-size: 13.5px; line-height: 1.45; }
.am-col ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-col li { padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); font-size: 14px; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--r4-ease), border-color .25s, color .25s; transition-delay: calc(.1s + var(--j) * .07s); }
.am-col.is-in li { opacity: 1; transform: none; }
.am-col li:hover { border-color: var(--c1); color: var(--accent-text); }
@media (max-width: 1020px) { .am { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .am { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .am-col li{ opacity: 1 !important; transform: none !important; transition: none !important; } }

.floating-cta.is-quieto-ag, .floating-cta.is-quieto { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s, transform .3s; }

/* ===================== RONDA 5 (29 sep, mañana) ===================== */

/* ---------- Bug: al volver del panel B al A el cotizador quedaba en blanco (Safari) ----------
   El paso activo dependía de que la animación corriera para dejar de estar en opacidad 0.
   Si el navegador no la reinicia al volver a mostrarse el panel, se quedaba invisible hasta
   el siguiente repintado (el clic). Ahora el estado final es visible por sí mismo. */
.step-section.active { opacity: 1; transform: none; }

/* ---------- Inicio · Cómo trabajamos: la línea avanza y cada paso se enciende ---------- */
.how-step:nth-child(1) { --k: 0; } .how-step:nth-child(2) { --k: 1; } .how-step:nth-child(3) { --k: 2; }
.how-step:nth-child(4) { --k: 3; } .how-step:nth-child(5) { --k: 4; }
.how-steps.hs-anim .how-step.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.how-steps.hs-anim .how-step::after { content: ""; position: absolute; top: 23px; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 0;
  transform: scaleX(0); transform-origin: left center; transition: transform .3s linear; transition-delay: calc(var(--k) * .28s); }
.how-steps.hs-anim .how-step:first-child::after { left: 50%; }
.how-steps.hs-anim .how-step:last-child::after { right: 50%; }
.how-steps.hs-anim .how-step-num { opacity: 0; transform: scale(.55); }
.how-steps.hs-anim .how-step-icon, .how-steps.hs-anim .how-step-body > * { opacity: 0; translate: 0 10px; transition: opacity .35s ease, translate .45s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.how-steps.hs-anim.is-play .how-step::after { transform: scaleX(1); }
.how-steps.hs-anim.is-play .how-step-num { animation: hsPop .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--k) * .28s + .1s); }
.how-steps.hs-anim.is-play .how-step-icon, .how-steps.hs-anim.is-play .how-step-body > * { opacity: 1; translate: 0 0; }
.how-steps.hs-anim.is-play .how-step-icon { transition-delay: calc(var(--k) * .28s + .18s); }
.how-steps.hs-anim.is-play .how-step-body > :nth-child(1) { transition-delay: calc(var(--k) * .28s + .22s); }
.how-steps.hs-anim.is-play .how-step-body > :nth-child(2) { transition-delay: calc(var(--k) * .28s + .27s); }
.how-steps.hs-anim.is-play .how-step-body > :nth-child(n+3) { transition-delay: calc(var(--k) * .28s + .32s); }
@keyframes hsPop {
  0% { opacity: 0; transform: scale(.55); }
  55% { opacity: 1; transform: scale(1.12); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px rgba(57,101,250,.14); }
  100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 860px) {
  .how-steps.hs-anim .how-step::after { top: 0; bottom: 0; left: 23px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: center top; }
  .how-steps.hs-anim .how-step:first-child::after { top: 24px; left: 23px; }
  .how-steps.hs-anim .how-step:last-child::after { bottom: auto; height: 24px; left: 23px; }
  .how-steps.hs-anim.is-play .how-step::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .how-steps.hs-anim .how-step::after { transform: none; transition: none; }
  .how-steps.hs-anim .how-step-num, .how-steps.hs-anim .how-step-icon, .how-steps.hs-anim .how-step-body > * { opacity: 1; transform: none; translate: none; animation: none; transition: none; }
}
/* paso 4: el enlace se integra al texto en lugar de flotar como botón suelto */
.page-inicio .how-step-link { margin: 8px auto 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; font: 600 var(--text-sm)/1.4 var(--font-body);
  color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(57,101,250,.35); text-underline-offset: 4px; white-space: nowrap; }
.page-inicio .how-step-link:hover { background: none; color: var(--accent); box-shadow: none; transform: none; text-decoration-color: currentColor; }
@media (max-width: 860px) { .page-inicio .how-step-link { margin-left: 0; } }

/* ---------- Cotizador de contenido: planes sin el número de reels al frente ---------- */
#pcTiers .pc-tier, #pcTiersRes .pc-tier { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; }
.pc-tier .pc-tier-name { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; }

.pc-tier .pc-tier-d { font-size: 11px; line-height: 1.35; color: var(--text-muted); opacity: 1; margin: 0; }
.pc-tier .pc-tier-d b { display: block; color: var(--text); font-weight: 700; }
.pc-tier.is-on .pc-tier-name { color: var(--accent-text); }

/* ---------- Armador de mezcla: espacios visibles ---------- */

  
.pc-mix-name small { display: block; }
.pc-mix-b[aria-disabled="true"] { opacity: .38; cursor: help; }

  

.pc-mix-txt { margin: 0; white-space: normal; font-size: 13px; line-height: 1.45; }
.pc-mix-txt b.ok { color: #1f8a4c; }
.pc-mix-aviso { margin: 0; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(242,198,110,.18); border: 1px solid rgba(214,158,46,.45); font-size: 13px; line-height: 1.45; animation: pcMixIn .3s ease both; }
.pc-mix-aviso[hidden] { display: none; }

/* ---------- Dónde trabajamos · banner «En todo México, con un solo equipo» ----------
   Tres modos unidos por una ruta de puntitos; Puebla y CDMX (la base) va resaltado. */
.g6 { max-width: 1180px; margin: 28px auto 0; padding: 28px 30px 30px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); position: relative; overflow: hidden; }
.g6::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(57,101,250,.22) 1px, transparent 1.5px);
  background-size: 14px 14px; -webkit-mask-image: radial-gradient(55% 90% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(55% 90% at 100% 0%, #000, transparent 72%); }
.g6 > * { position: relative; }
.g6-top { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.g6-k { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.g6-t { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.45rem, 2.3vw, 1.85rem); letter-spacing: -.01em; line-height: 1.18; margin-top: 6px; }
.g6-t em { font-style: normal; color: var(--accent-text); }
.g6-key { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; margin: 0; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--text); font-size: 14px; line-height: 1.5; }
.g6-key b { display: block; font-size: 15px; margin-bottom: 2px; }
.g6-key-ico { flex: none; color: var(--accent-text); margin-top: 1px; }
.g6-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.g6-list li:not(:last-child)::before { content: ""; position: absolute; left: 50px; top: 21px; width: calc(100% + 24px - 56px); height: 3px; opacity: .7;
  background-image: radial-gradient(circle, var(--accent) 1.3px, transparent 1.7px); background-size: 10px 3px; background-repeat: repeat-x; }
.g6-list li { position: relative; }
.g6-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-text);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); position: relative; z-index: 1; }
.g6-list li.is-base .g6-ico { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent); }
.g6-list b { display: block; margin-top: 14px; font-size: 15.5px; line-height: 1.3; }
.g6-list p { margin: 5px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.section-difference .g6 { max-width: 980px; }
.g6-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.g6-wrap .g6 { margin-top: 18px; }
@media (max-width: 900px) { .g6-wrap { padding: 0 20px; } }
@media (max-width: 720px) {
  .g6 { padding: 22px 20px 24px; }
  .g6-key { max-width: none; }
  .g6-list { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .g6-list li:not(:last-child)::before { left: 20.5px; top: 50px; bottom: -14px; width: 3px; height: auto; background-size: 3px 10px; background-repeat: repeat-y; }
  .g6-list li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
  .g6-list b { margin-top: 2px; }
}

/* ---------- Puntitos de marca en las gráficas ---------- */
.bn-vis::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(57,101,250,.26) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(90% 100% at 75% 0%, #000 20%, transparent 80%); mask-image: radial-gradient(90% 100% at 75% 0%, #000 20%, transparent 80%); }
.bn-vis > * { position: relative; z-index: 1; }
.vp::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(156,203,234,.35) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); }
.fm-side::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(143,169,255,.28) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 60% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 100% 0%, #000, transparent 75%); }
.fm-side > * { position: relative; }
.sh-wm { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }

/* ---------- Agencias · carga de trabajo (loop) ---------- */
.c5 { width: 100%; max-width: 540px; }
.c5-leg { display: flex; gap: 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.c5-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.c5-leg i { width: 11px; height: 11px; border-radius: 3px; }
.c5-leg i.is-g { background: #9CA3AF; } .c5-leg i.is-b { background: var(--accent); }
.c5-chart { position: relative; height: 128px; display: flex; align-items: stretch; gap: 10px; padding: 0 6px; border-bottom: 1.5px solid var(--border); }
.c5-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.c5-bar i { display: block; height: 0; }
.c5-g { background: #9CA3AF; border-radius: 3px 3px 0 0; animation: c5G 8s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
.c5-g.is-top { animation: c5G 8s ease-in-out infinite, c5Hot 8s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
.c5-b { background: linear-gradient(180deg, #5478FF, var(--accent)); border-radius: 4px 4px 0 0; animation: c5B 8s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
.c5-bar:has(.c5-b) .c5-g { border-radius: 0; }
@keyframes c5G { 0% { height: 0; } 26%, 50% { height: var(--g); } 64%, 90% { height: var(--g2); } 100% { height: 0; } }
@keyframes c5B { 0%, 50% { height: 0; } 64%, 90% { height: var(--b); } 100% { height: 0; } }
@keyframes c5Hot { 0%, 22% { background: #9CA3AF; } 28%, 50% { background: #E8826A; } 60%, 100% { background: #9CA3AF; } }
.c5-lim { position: absolute; left: 0; right: 0; bottom: 72%; border-top: 2px dashed rgba(232,130,106,.75); z-index: 1; }
.c5-lim em { position: absolute; left: 6px; top: -18px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #C9644C; background: var(--bg); padding: 0 4px; border-radius: 4px; }
.c5-badge { position: absolute; right: 4px; top: -6px; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 800; opacity: 0; z-index: 2; }
.c5-badge.is-full { background: #E8826A; color: #fff; animation: c5Full 8s ease-in-out infinite; }
.c5-badge.is-ok { background: var(--accent); color: #fff; animation: c5Ok 8s ease-in-out infinite; }
@keyframes c5Full { 0%, 24% { opacity: 0; transform: translateY(4px); } 30%, 50% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; } }
@keyframes c5Ok { 0%, 60% { opacity: 0; transform: translateY(4px); } 66%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- Agencias · entrega bajo tu marca (loop) ---------- */
.e5 { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.e5-file { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 26px -18px rgba(0,0,0,.35); }
.e5-thumb { flex: none; width: 46px; height: 64px; border-radius: var(--r-sm); background: #111 center / cover; }
.e5-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.e5-meta b { font-size: 12.5px; line-height: 1.25; }
.e5-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e5-meta small { font-size: 11px; font-weight: 700; color: var(--accent-text); }
.e5-prog { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: 3px; }
.e5-prog i { display: block; height: 100%; width: 0; background: var(--accent); animation: e5P 7s ease-in-out infinite; }
.e5-st { position: relative; height: 15px; font-size: 11px; font-weight: 700; }
.e5-st > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; }
.e5-exp { color: var(--text-muted); animation: e5Exp 7s infinite; }
.e5-ok { color: #1f8a4c; opacity: 0; animation: e5Ok 7s infinite; }
.e5-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-full); border: 1.5px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-3deg); animation: e5S 7s infinite; font-family: var(--font-label);}
@keyframes e5P { 0% { width: 0; } 40%, 92% { width: 100%; } 100% { width: 0; } }
@keyframes e5Exp { 0%, 40% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes e5Ok { 0%, 42% { opacity: 0; } 46%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes e5S { 0%, 50% { color: var(--text-muted); border-color: var(--border); background: transparent; transform: rotate(-3deg) scale(1); }
  55% { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); transform: rotate(-3deg) scale(1.15); }
  60%, 92% { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); transform: rotate(-3deg) scale(1); }
  100% { color: var(--text-muted); border-color: var(--border); background: transparent; transform: rotate(-3deg) scale(1); } }

/* ---------- Agencias · conversación (loop) ---------- */
.r5 { position: relative; width: 100%; min-height: 176px; display: flex; flex-direction: column; gap: 7px; }
.r5-msg { display: flex; align-items: flex-end; gap: 7px; opacity: 0; }
.r5-msg.is-ag { justify-content: flex-end; }
.r5-bub { max-width: 82%; display: flex; flex-direction: column; gap: 6px; padding: 8px 11px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.r5-bub p { font-size: 12.5px; line-height: 1.4; margin: 0; }
.r5-msg.is-sh .r5-bub { border-bottom-left-radius: 4px; }
.r5-msg.is-ag .r5-bub { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.r5-doc { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 9px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.r5-av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; background: #17191D; color: #fff; }
.r5-msg.is-ag .r5-av { background: var(--accent-soft); color: var(--accent-text); }
.r5-typing { display: inline-flex; gap: 4px; align-self: flex-end; margin-right: 33px; padding: 8px 11px; border-radius: var(--r-md); background: var(--accent-soft); opacity: 0; height: 0; overflow: hidden; }
.r5-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: r5Dot 1s infinite; }
.r5-typing i:nth-child(2) { animation-delay: .15s; } .r5-typing i:nth-child(3) { animation-delay: .3s; }
.bn-tile.is-in .r5-msg:nth-child(1) { animation: r5M1 9s ease infinite; }
.bn-tile.is-in .r5-typing { animation: r5T 9s ease infinite; }
.bn-tile.is-in .r5-msg:nth-child(3) { animation: r5M2 9s ease infinite; }
.bn-tile.is-in .r5-msg.is-3 { animation: r5M3 9s ease infinite; }
@keyframes r5M1 { 0% { opacity: 0; transform: translateY(8px); } 5%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes r5T { 0%, 18% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; } 22%, 32% { opacity: 1; height: 22px; padding-top: 8px; padding-bottom: 8px; } 35%, 100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes r5M2 { 0%, 34% { opacity: 0; transform: translateY(8px); } 39%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes r5M3 { 0%, 56% { opacity: 0; transform: translateY(8px); } 61%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes r5Dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ---------- Agencias · fechas (loop) ---------- */
.f5 { width: 100%; position: relative; }
.f5-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.f5-days span { height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.bn-tile.is-in .f5-days span { animation: f5D 6s ease infinite; animation-delay: calc(var(--i) * .55s); }
.f5-days span.is-due { border-color: var(--accent); color: var(--accent-text); }
@keyframes f5D { 0% { background: var(--surface); color: var(--text-muted); } 6%, 70% { background: var(--accent-soft); color: var(--accent-text); } 80%, 100% { background: var(--surface); color: var(--text-muted); } }
.f5-track { height: 4px; border-radius: 4px; background: var(--border); margin-top: 10px; overflow: hidden; }
.f5-track i { display: block; height: 100%; width: 0; background: var(--accent); }
.bn-tile.is-in .f5-track i { animation: f5T 6s ease-in-out infinite; }
@keyframes f5T { 0% { width: 0; } 45%, 85% { width: 94%; } 100% { width: 0; } }
.f5-flag { position: absolute; right: 0; top: -12px; padding: 2px 8px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; }
.bn-tile.is-in .f5-flag { animation: f5F 6s ease infinite; }
@keyframes f5F { 0%, 42% { transform: scale(1); } 48% { transform: scale(1.18); } 54%, 100% { transform: scale(1); } }

/* ---------- Agencias · herramientas, de izquierda a derecha (loop) ---------- */
.t5 { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.t5-node { padding: 8px 9px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 700; white-space: nowrap; }
.t5-node.is-sh { background: var(--accent); border-color: var(--accent); color: var(--on-accent); padding: 9px 10px; }
.t5-node.is-sh .sh-wm { font-size: 9px; letter-spacing: .16em; }
.t5-mid { position: relative; display: flex; align-items: center; justify-content: center; min-height: 80px; }
.t5-line { position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; background: var(--border); overflow: hidden; }
.t5-line i { position: absolute; top: 0; width: 34px; height: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); left: -40px; }
.bn-tile.is-in .t5-line i { animation: t5Run 3.4s linear infinite; }
@keyframes t5Run { from { left: -40px; } to { left: 100%; } }
.t5-chips { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.t5-chips span { padding: 5px 7px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }
.t5-chips span.is-mas { border-style: dashed; color: var(--text-muted); }
.bn-tile.is-in .t5-chips span { animation: t5C 3.4s ease infinite; animation-delay: calc(.5s + var(--i) * .45s); }
@keyframes t5C { 0%, 100% { border-color: var(--border); transform: none; } 8% { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(57,101,250,.7); } 22% { border-color: var(--border); transform: none; box-shadow: none; } }
.bn-tile.is-in .t5-node.is-sh { animation: t5Sh 3.4s ease infinite; }
@keyframes t5Sh { 0%, 86% { box-shadow: 0 0 0 0 rgba(57,101,250,.0); } 92% { box-shadow: 0 0 0 7px rgba(57,101,250,.18); } 100% { box-shadow: 0 0 0 0 rgba(57,101,250,0); } }

/* ---------- Marketing · organigrama (loop) ---------- */
.o5 { width: 100%; max-width: 640px; }
.o5 svg { display: block; width: 100%; height: auto; overflow: visible; }
.o5 text { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.o5-n rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.o5-n.is-top rect { fill: #17191D; stroke: #17191D; } .o5-n.is-top text { fill: #fff; }
.o5-l { fill: none; stroke: var(--border); stroke-width: 2; }
.o5-d { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 5; animation: o5Ants 1s linear infinite; }
@keyframes o5Ants { to { stroke-dashoffset: -10; } }
.o5-sh rect { fill: var(--accent); }
.o5-sh text { fill: #fff; }
.o5-wm { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .22em; }
.o5-sub { font-size: 11px !important; font-weight: 600; opacity: .9; }
.o5-s rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.o5-s text { fill: var(--accent-text); font-size: 12px; }
.o5-sh, .o5-s { transform-box: fill-box; transform-origin: center; }
.bn-tile.is-in .o5-rama { animation: o5Ants 1s linear infinite, o5Rama 9s ease infinite; }
.bn-tile.is-in .o5-bus { animation: o5Ants 1s linear infinite, o5Bus 9s ease infinite; }
.bn-tile.is-in .o5-sh { animation: o5Sh 9s ease infinite; }
.bn-tile.is-in .o5-s { animation: o5S 9s ease infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes o5Rama { 0% { clip-path: inset(0 100% 0 0); } 12%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes o5Sh { 0%, 10% { opacity: 0; transform: scale(.85); } 18%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
@keyframes o5Bus { 0%, 18% { clip-path: inset(0 0 100% 0); } 30%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes o5S { 0%, 30% { opacity: 0; transform: translateY(-6px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Marketing · vacantes (loop) ---------- */
.rl5 s { text-decoration-color: transparent; }
.bn-tile.is-in .rl5 s { animation: rl5S 8s ease infinite; animation-delay: calc(var(--i) * .4s); transition: none; }
.bn-tile.is-in .rl5 svg { animation: rl5C 8s ease infinite; animation-delay: calc(var(--i) * .4s); transition: none; }
@keyframes rl5S { 0% { text-decoration-color: transparent; color: var(--text); } 8%, 82% { text-decoration-color: var(--text-muted); color: var(--text-muted); } 92%, 100% { text-decoration-color: transparent; color: var(--text); } }
@keyframes rl5C { 0%, 4% { opacity: 0; } 10%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* ---------- Marketing · lo que va llegando (loop) ---------- */
.d5-box { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.d5-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.d5-box li { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 14px -12px rgba(0,0,0,.4); }
.d5-box li svg { flex: none; color: var(--accent-text); }
.d5-box li em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full); white-space: nowrap; }
.d5-in em { background: var(--border); color: var(--text-muted); }
.d5-out em { background: rgba(31,138,76,.13); color: #1f8a4c; }
.d5-hub { display: flex; align-items: center; gap: 6px; }
.d5-hub .sh-wm { padding: 14px 14px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-size: 11px; box-shadow: 0 0 0 8px rgba(57,101,250,.12), 0 0 0 16px rgba(57,101,250,.05); }
.d5-flow { position: relative; width: 22px; height: 2px; background: var(--border); overflow: hidden; }
.d5-flow i { position: absolute; top: 0; left: -12px; width: 12px; height: 100%; background: var(--accent); animation: d5Flow 1.1s linear infinite; }
@keyframes d5Flow { to { left: 100%; } }
.bn-tile.is-in .d5-in li { animation: d5In 8s ease infinite; animation-delay: calc(var(--i) * 1.1s); }
.bn-tile.is-in .d5-out li { animation: d5Out 8s ease infinite; animation-delay: calc(var(--i) * 1.1s); }
.d5-in li, .d5-out li { opacity: 0; }
.bn-tile.is-in .d5-hub .sh-wm { animation: d5Hub 1.1s ease-in-out infinite; }
@keyframes d5In { 0% { opacity: 0; transform: translateX(-10px); } 5%, 20% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateX(26px) scale(.92); } }
@keyframes d5Out { 0%, 26% { opacity: 0; transform: translateX(-14px); } 33%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes d5Hub { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (max-width: 640px) {
  .d5-box { grid-template-columns: 1fr; justify-items: stretch; }
  .d5-hub { justify-content: center; }
  .d5-flow { width: 2px; height: 16px; }
  .d5-flow i { width: 100%; height: 8px; left: 0; top: -8px; animation-name: d5FlowV; }
  @keyframes d5FlowV { to { top: 100%; } }
  .d5-hub { flex-direction: column; }
}

/* ---------- Crecimiento (loop) ---------- */
.bn-tile.is-in .v-cc-line { animation: ccDraw 8s ease infinite; transition: none; }
@keyframes ccDraw { 0% { stroke-dashoffset: 320; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 320; } }

@media (prefers-reduced-motion: reduce) {
  .c5-g, .c5-b, .c5-badge, .e5-prog i, .e5-exp, .e5-ok, .e5-stamp, .r5-msg, .r5-typing, .f5-days span, .f5-track i, .f5-flag, .t5-line i, .t5-chips span,
  .o5-d, .o5-sh, .o5-s, .rl5 s, .rl5 svg, .d5-box li, .d5-flow i, .d5-hub .sh-wm, .v-cc-line { animation: none !important; }
  .c5-g { height: var(--g2); } .c5-b { height: var(--b); } .c5-badge.is-ok, .e5-ok, .r5-msg, .d5-box li { opacity: 1; } .e5-exp, .d5-in li { display: none; }
  .e5-prog i { width: 100%; } .v-cc-line { stroke-dashoffset: 0; }
}

/* organigrama: versión vertical en teléfono */
.o5-m { display: none; max-width: 320px; margin: 0 auto; }
@media (max-width: 640px) { .o5-d-only { display: none; } .o5-m { display: block; } }
/* herramientas: de arriba hacia abajo en teléfono, para que quepa */
@media (max-width: 640px) {
  .t5 { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .t5-mid { min-height: 0; padding: 14px 0; width: 100%; }
  .t5-line { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .t5-line i { left: 0; top: -40px; width: 100%; height: 34px; background: linear-gradient(180deg, transparent, var(--accent), transparent); }
  .bn-tile.is-in .t5-line i { animation-name: t5RunV; }
  @keyframes t5RunV { from { top: -40px; } to { top: 100%; } }
}

/* ---------- Qué producimos: clips reales ---------- */
.vp-clip { background: #10131A; }
.vp-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-clip::before { z-index: 1; }
.vp-tile .vp { height: 190px; }
.vp-geo { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px !important; line-height: 1.45; color: var(--text-muted); }
.vp-geo svg { flex: none; margin-top: 2px; color: var(--accent-text); }

/* ---------- Cotizador de contenido: puntos ---------- */
.pc-tier .pc-tier-pts { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.pc-tier .pc-tier-pts b { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-tier.is-on .pc-tier-pts b { color: var(--accent-text); }

.pc-pts { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; margin: 4px 0 10px; padding: 14px 16px; border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(57,101,250,.10), rgba(122,184,224,.14)); border: 1px solid rgba(57,101,250,.25); }
.pc-pts-k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-label);}
.pc-pts-v { font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pc-pts-v b { font-size: 30px; font-weight: 800; color: var(--accent-text); line-height: 1; }
.pc-pts-v.is-cero b { color: #1f8a4c; }
.pc-pts-bar { grid-column: 1 / -1; height: 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.7); overflow: hidden; }
.pc-pts-bar i { display: block; height: 100%; border-radius: var(--r-sm); background: linear-gradient(90deg, #7AB8E0, var(--accent)); transition: width .35s var(--ease-out-quint, ease); }
.pc-mix-row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 2px; }
.pc-mix-pts { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0; vertical-align: 2px; white-space: nowrap; }
.pc-mix-sub { grid-column: 3; justify-self: center; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pc-mix-txt { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.pc-mix-aviso { margin-top: 8px; }
@media (max-width: 560px) {
  .pc-mix-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .pc-mix-step { grid-column: 3; grid-row: 1 / span 2; }
  .pc-mix-sub { display: none; }
}

.w3-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .w3-stats.is-2 { grid-template-columns: 1fr; } }

/* =====================================================================
   AGENDA PROPIA · videollamadas (site.js → SKY_CAL). Reemplaza a Calendly.
   Toma los colores del tema (claro / oscuro) de las variables del sitio.
   ===================================================================== */
.agd-host { text-align: left; container-type: inline-size; }
.agenda-inline { margin-top: 8px; }
.agd { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--card-shadow); color: var(--text); font-family: var(--font-body); }
.agd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: radial-gradient(circle, var(--accent-glow) 1.1px, transparent 1.6px) 0 0 / 14px 14px; }
.agd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agd-chips span { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); }
.agd-tz { font-size: 12.5px; color: var(--text-muted); }
.agd-body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; padding: 24px; min-height: 340px; }
.agd-mes, .agd-horas-t { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 14px; }
.agd-mes::first-letter, .agd-horas-t::first-letter, .agd-cuando::first-letter { text-transform: uppercase; }
.agd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.agd-sem { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding-bottom: 4px; font-family: var(--font-label);}
.agd-dia { aspect-ratio: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text);
  font: 600 16px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.agd-dia:hover:not(:disabled) { border-color: var(--accent); }
.agd-dia:focus-visible, .agd-slot:focus-visible, .agd-btn:focus-visible, .agd-link:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.agd-dia.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.agd-dia.is-sin { border-style: dashed; color: var(--text-muted); opacity: .5; cursor: default; }
.agd-pt { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.agd-dia.is-on .agd-pt { background: var(--on-accent); }
.agd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.agd-slot { white-space: nowrap; padding: 14px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--text);
  font: 600 15px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.agd-slot:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.agd-aviso { font-size: 14px; line-height: 1.5; color: var(--error); margin-bottom: 12px; }
.agd-link { background: none; border: 0; padding: 0; color: var(--accent-text); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.agd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font: 700 15.5px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.agd-btn:hover { background: var(--accent-hover); }
.agd-btn:disabled { opacity: .7; cursor: progress; }
.agd-btn--sec { background: transparent; color: var(--accent-text); border: 1px solid var(--accent); }
.agd-btn--sec:hover { background: var(--accent-soft); }
/* Paso 2: datos */
.agd-body--datos { grid-template-columns: minmax(0, 1fr); max-width: 660px; width: 100%; margin: 0 auto; gap: 0; min-height: 0; }
.agd-elegido { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 18px; border-radius: var(--r-md); background: var(--accent-soft); }
.agd-elegido-k { width: 100%; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.agd-cuando { display: inline-block; font-size: 17px; }
.agd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.agd-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.agd-f input, .agd-f textarea { width: 100%; font: 400 15.5px/1.4 var(--font-body); color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 12px; resize: vertical; }
.agd-f input:focus, .agd-f textarea:focus { outline: 3px solid var(--accent-glow); border-color: var(--accent); }
.agd-f--full { grid-column: 1 / -1; }
.agd-confirmar { width: 100%; padding: 16px 22px; }
.agd-legal { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.agd-legal a { color: var(--accent-text); }
.agd-form .sky-humano { grid-column: 1 / -1; }
/* Confirmación, carga y errores */
.agd-body--listo, .agd-body--carga, .agd-body--error { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; gap: 12px; padding: 44px 24px; }
.agd-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); margin-bottom: 4px; }
.agd-listo-t { font-family: var(--font-heading); font-size: 22px; line-height: 1.3; max-width: 32ch; font-weight: 600;}
.agd-listo-s, .agd-body--error p, .agd-vacio p { color: var(--text-muted); max-width: 48ch; line-height: 1.55; }
.agd-err-t { font-weight: 600; color: var(--text) !important; }
.agd-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 6px; }
.agd-vacio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 30px 0; }
.agd-carga-t { color: var(--text-muted); font-size: 14px; }
.agd-cargando { display: grid; grid-template-columns: repeat(5, 10px); gap: 12px; }
.agd-cargando i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .15; animation: agdPulso 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes agdPulso { 0%, 100% { opacity: .15; transform: scale(.75); } 50% { opacity: .85; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .agd-cargando i { animation: none; opacity: .4; } }
/* La agenda se acomoda al ancho de su contenedor (en el cotizador es angosta aunque la pantalla sea grande) */
@container (max-width: 660px) {
  .agd-head { padding: 12px 16px; }
  .agd-body { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px 16px; min-height: 0; }
  .agd-dia { aspect-ratio: auto; height: 50px; }
  .agd-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agd-form { grid-template-columns: minmax(0, 1fr); }
  .agd-mes, .agd-horas-t { font-size: 18px; }
}

/* Cotizadores · paso de agendar: más ancho para que la agenda respire y se vea integrada */
#step13 .schedule-container { max-width: 920px; }
#step13 .schedule-badge { margin-bottom: 14px; }
#step13 .schedule-container .result-note { max-width: 520px; }
.pc-cierre.pc-cierre-solo { max-width: 920px; }
.configurador-main .agd, .pc-calendly .agd, #calA .agd { box-shadow: none; }
/* dentro de los cotizadores hay reglas genéricas para <p>: los títulos de la agenda mantienen su tamaño */
.agd .agd-mes, .agd .agd-horas-t { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0 0 14px; color: var(--text); }
@container (max-width: 660px) { .agd .agd-mes, .agd .agd-horas-t { font-size: 18px; } }

/* =====================================================================
   COTIZADOR · VIDEO A LA MEDIDA (ronda de pruebas con usuarios, 4 oct 2026)
   ===================================================================== */
/* Paso 2 · tipo de video: icono + nombre + una pista visible para quien duda */
#step2 .card { padding: 18px 14px 14px; gap: 0; }
#step2 .card-title { margin-bottom: 12px; }
.card-hint { order: 3; margin-top: auto; padding: 9px 11px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font-size: 12.5px; line-height: 1.45; text-align: left; }
.card-hint b { color: var(--accent-text); font-weight: 700; }
.card.selected .card-hint { background: rgba(57, 101, 250, 0.18); }
[data-theme="light"] .card-hint { background: #EEF1FF; color: #2A2F3A; }

/* Panel lateral: video real en bucle, sin controles ni clic */
.cv-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cv-a .cv-video { transform: scale(1.02); transition: transform 1.2s var(--r4-ease); }
.cfg-info.cv:hover .cv-a .cv-video { transform: scale(1.06); }
.cv-b video { position: absolute; bottom: -3%; width: 34%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(0,0,0,.4); }

/* Paso 3 · duración: la bolita cae exactamente sobre cada etiqueta */
#durationSlider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) calc(16px + (100% - 32px) * var(--slider-frac, .2)), var(--border) 0); }
.dur-unit .slider-presets { position: relative; display: block; height: 34px; margin-top: 12px; }
.dur-unit .slider-presets .preset-btn { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dur-unit .slider-presets .preset-btn:nth-child(1) { left: 16px; }
.dur-unit .slider-presets .preset-btn:nth-child(2) { left: calc(16px + (100% - 32px) * .2); }
.dur-unit .slider-presets .preset-btn:nth-child(3) { left: calc(16px + (100% - 32px) * .4); }
.dur-unit .slider-presets .preset-btn:nth-child(4) { left: calc(16px + (100% - 32px) * .6); }
.dur-unit .slider-presets .preset-btn:nth-child(5) { left: calc(16px + (100% - 32px) * .8); }
.dur-unit .slider-presets .preset-btn:nth-child(6) { left: calc(100% - 16px); }
@media (max-width: 420px) { .dur-unit .slider-presets .preset-btn { padding: 5px 5px; font-size: 11px; letter-spacing: -.01em; } .dur-unit .slider-presets .preset-btn .popular-badge { right: 50%; transform: translateX(50%); } }

/* Paso 4 · niveles: cada tarjeta dice que se elige con un toque; el enlace a detalles ya no parece botón */
.quality-card .q-elegir { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--accent); color: var(--accent-text); font-size: 13.5px; font-weight: 700; transition: background-color .2s, color .2s; }
.quality-card:hover .q-elegir, .quality-card.selected .q-elegir { background: var(--accent); color: var(--on-accent); }
.quality-card .q-elegir svg { transition: transform .2s; }
.quality-card:hover .q-elegir svg { transform: translateX(3px); }
/* Enlace a la comparación completa: arriba de las tarjetas, visible, pero con forma de enlace (no de botón) */
#step4 .step-subtitle { margin-bottom: 18px !important; }
.q-niveles-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: 640px; margin: 0 auto 26px; padding: 12px 18px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); box-shadow: none; text-align: center; color: var(--text); text-decoration: none; transition: border-color .2s; }
.q-niveles-link:hover { border-color: var(--accent); transform: none; box-shadow: none; }
.q-niveles-ico { display: grid; place-items: center; color: var(--accent-text); }
.q-niveles-q { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.35; }
.q-niveles-cta { grid-row: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0; border-radius: 0; background: none; color: var(--accent-text); font: 700 15px/1.35 var(--font-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.q-niveles-cta svg { width: 15px; height: 15px; transition: transform .2s; }
.q-niveles-link:hover .q-niveles-cta svg { transform: translate(2px, -2px); }
.q-niveles-nota { display: none; }
@media (max-width: 640px) { .q-niveles-link { justify-content: flex-start; text-align: left; padding: 12px 14px; } .q-niveles-q { flex: 1; min-width: 0; } .q-niveles-cta { justify-self: auto; margin-top: 0; } }
/* Tarjetas de nivel: frase + descripción (los mismos textos de la sección de niveles) + revisiones a la vista */
.quality-card .q-subtitle { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.quality-card .q-bul { flex: 1 1 auto; list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; align-content: start; }
.quality-card .q-bul li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.quality-card .q-bul li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.quality-card .q-rev .q-rev-t { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.quality-card .q-rev .q-rev-t::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.quality-card .q-desc { flex: 1 1 auto; margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.quality-card .q-rev { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--border); }
.quality-card .q-rev-t { font: 700 11.5px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.q-rev-dots { position: relative; display: flex; justify-content: space-between; max-width: 100%; }
.q-rev-dots::before { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 35%, transparent); }
.q-rev-dots i { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font-body); font-style: normal; color: #fff; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.q-rev-2 { max-width: 40%; } .q-rev-3 { max-width: 62%; } .q-rev-5 { max-width: 100%; }
.quality-card.selected .q-rev-dots i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* Paso 6 · inversión: el bloque para ajustar se ve como algo que se toca */
.result-container:not(.confirmed) .result-summary .sum-row:has(+ .sum-edit) { border-bottom: 0; }
.sum-edit { margin: 4px -24px -20px; padding: 18px 24px 20px; background: var(--accent-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.sum-edit-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sum-edit-ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.sum-edit-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-muted); line-height: 1.4; }
.sum-edit-txt b { font-size: 15.5px; color: var(--text); }
.result-summary-editable .sum-edit .sum-row-edit { display: block; margin: 0; padding: 10px 0; background: none; min-height: 0; border: 0; }
.result-summary-editable .sum-edit .sum-row-edit + .sum-row-edit { border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.sum-edit .sum-label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-label);}
.sum-edit .sum-control { display: block; }
.sum-select--oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.sum-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sum-chip { padding: 9px 14px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 600 14px/1 var(--font-body); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.sum-chip:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); }
.sum-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px var(--accent-glow); }
.sum-chip:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
/* Confirmado: igual que antes (renglones con píldora), sin botones */
.result-container.confirmed .sum-edit { background: none; margin: 0 -24px -20px; padding: 0 24px 6px; border-top: 0; }
.result-container.confirmed .sum-edit-head, .result-container.confirmed .sum-chips { display: none; }
.result-container.confirmed .sum-edit .sum-row-edit { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.result-container.confirmed .sum-edit .sum-label { display: inline; margin: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.result-container.confirmed .sum-edit .sum-control { display: inline-flex; }
.result-summary.result-summary-editable { padding: 20px 24px; }
.result-summary .sum-row { gap: 14px; }
.result-summary .sum-value { text-align: right; }
@media (max-width: 640px) {
  .result-summary.result-summary-editable { padding: 14px 16px; }
  .sum-edit, .result-container.confirmed .sum-edit { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .sum-edit { margin-bottom: -14px; }
  .sum-chip { padding: 9px 12px; font-size: 13.5px; }
  /* tipo de video: una columna, icono y nombre en renglón, la pista debajo */
  #step2 .cards-grid.cols-3 { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  #step2 .card { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 10px; padding: 14px; }
  #step2 .card-icon { margin: 0; font-size: 22px; }
  #step2 .card-title { margin: 0; flex: 1; font-size: 16px; }
  #step2 .card-hint { flex-basis: 100%; margin-top: 0; }
}

/* =====================================================================
   AGENDA · con quién hablas (contacto y encabezado del widget)
   ===================================================================== */
/* Contacto: un solo bloque horizontal — a la izquierda con quién hablas, a la derecha la agenda */
.ag-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); margin: 0 auto; text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--card-shadow); }
.ag-host { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px 32px; border-right: 1px solid var(--border); background: radial-gradient(circle, var(--accent-glow) 1.1px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(160deg, var(--accent-soft), transparent 70%); }
.ag-host-logo { display: inline-grid; place-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: .18em; box-shadow: 0 0 0 6px rgba(57,101,250,.12), 0 0 0 12px rgba(57,101,250,.05); margin: 6px 0 6px 6px; }
.ag-host-t { font-family: var(--font-heading); font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; margin: 0; }
.ag-host-d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 42ch; }
.ag-host-pasos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.ag-host-pasos li { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.ag-host-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 40px; bottom: -12px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ag-host-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 6px 16px var(--accent-glow); }
.ag-host-paso { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.ag-host-paso b { font-size: 15px; color: var(--text); font-weight: 700; }
.ag-card .agenda-embed { margin: 0; min-width: 0; }
#ctAgenda .agd { border: 0; border-radius: 0; box-shadow: none; background: transparent; height: 100%; }
#ctAgenda .agd-body { min-height: 0; }
@media (max-width: 900px) {
  .ag-card { grid-template-columns: minmax(0, 1fr); }
  .ag-host { border-right: 0; border-bottom: 1px solid var(--border); padding: 26px 20px; }
}
/* encabezado del widget */
.agd-quien { display: flex; align-items: center; gap: 10px; }
.agd-logo { padding: 7px 10px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: 9px; letter-spacing: .16em; }
.agd-quien-t { font-size: 14px; font-weight: 700; color: var(--text); }
.agd-head { justify-content: flex-start; }
.agd-head .agd-chips { margin-left: auto; }
.agd-head .agd-tz { flex-basis: 100%; text-align: right; margin-top: -4px; }
#ctAgenda .agd-quien { display: none; }
#ctAgenda .agd-head .agd-chips { margin-left: 0; }
#ctAgenda .agd-head .agd-tz { flex-basis: auto; margin: 0 0 0 auto; text-align: right; }
@container (max-width: 660px) { .agd-head .agd-chips { margin-left: 0; } .agd-head .agd-tz { text-align: left; margin-top: 0; } }
@container (max-width: 660px) { #ctAgenda .agd-head .agd-tz { margin-left: 0; text-align: left; } }

/* ===== H1 con la línea «SkyHeads / …» (oct 2026, SEO) =====
   La línea de arriba ahora es parte del H1 para que Google lea el tema de la página.
   .hero-eyebrow-row recrea la línea de texto que la rodeaba antes, así se ve igual. */
.hero h1.hero-headline > .hero-eyebrow-row { display: block; text-wrap: wrap; font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; letter-spacing: normal; }
.hero h1.hero-headline > .hero-eyebrow-row + * { margin-top: -0.06em; }

/* ===== Páginas temáticas (oct 2026): Videos con IA, Inmobiliarias =====
   Bloques simples para responder lo que la gente busca en Google y en la IA. */
.lp-answer { max-width: 780px; margin: clamp(22px, 3.5vh, 34px) auto 0; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); }
.lp-answer p { font-size: var(--text-md); line-height: 1.65; color: var(--text); }
.lp-answer p + p { margin-top: 12px; color: var(--text-muted); font-size: var(--text-base); }
.lp-cols { max-width: 1180px; margin: clamp(26px, 4.5vh, 44px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-cols.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-card { padding: 24px 22px 22px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.lp-card .lp-k { font: 700 11.5px/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.lp-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; color: var(--text); }
.lp-card p { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.lp-card .lp-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text); }
.lp-split { max-width: 980px; margin: clamp(26px, 4.5vh, 44px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.lp-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.lp-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.lp-list li b { font-weight: 600; }
.lp-table-wrap { max-width: 860px; margin: clamp(24px, 4vh, 38px) auto 0; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.lp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lp-table th, .lp-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lp-table th { font: 700 12px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.lp-table td:first-child { white-space: normal; font-weight: 600; color: var(--text); }
.lp-table td { color: var(--text); }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-note { max-width: 780px; margin: 16px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.lp-note a, .lp-more a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lp-more { text-align: center; margin-top: 22px; font-size: 15px; }
.lp-ej .vp { height: 300px; }
.lp-ej .vp-txt p { font-size: 14px; }
@media (max-width: 980px) { .lp-cols, .lp-cols.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-cols, .lp-cols.is-4, .lp-split { grid-template-columns: 1fr; } .lp-ej .vp { height: 360px; } .lp-table th, .lp-table td { padding: 11px 14px; } }
a.lp-meta { color: var(--accent-text); text-decoration: none; }
a.lp-meta:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-alcance { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ===== Planes de contenido (oct 2026): tarjetas más visuales ===== */
.plan4 .plan-name { color: var(--accent-text); font-weight: 600; }
.plan-pts.pp { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.plan-pts.pp > b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--accent-text); letter-spacing: -.02em; }
.plan-pts.pp .pp-u { font-size: 14px; font-weight: 600; color: var(--text); }
.plan-pts.pp .pp-ico { margin-left: auto; display: inline-flex; gap: 6px; color: var(--accent-text); }
.plan-pts.pp .pp-ico svg { width: 18px; height: 18px; }
.pv { display: flex; flex-direction: column; gap: 8px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pv-it { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 9px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); text-align: center; }
.pv-it svg { color: var(--accent-text); }
.pv-it small { font-size: 12px; color: var(--text-muted); line-height: 1.2; }
.pv-it b { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.pv-it b span { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pv-o { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.plan-inc-plus { padding-top: 10px; border-top: 1px dashed var(--border); }

/* ===== Cotizador de contenido (oct 2026): tarjetas de plan como en la sección Planes ===== */
#cfgPaneB .pc-tiers { max-width: 820px; gap: 12px; }
#cfgPaneB .pc-tier { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 14px 14px; border-radius: var(--r-md); text-align: left; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
#cfgPaneB .pc-tier-name { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--accent-text); }
#cfgPaneB .pc-tier-precio { margin: 0; display: flex; align-items: baseline; gap: 5px; }
#cfgPaneB .pc-tier-precio b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text); }
#cfgPaneB .pc-tier-precio small { font-size: 11px; font-weight: 700; color: var(--text-muted); }
#cfgPaneB .pc-tier-pts { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); font-size: 13px; font-weight: 600; color: var(--text); }
#cfgPaneB .pc-tier-pts b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--accent-text); }
#cfgPaneB .pc-tier-ico { margin-left: auto; display: inline-flex; gap: 4px; color: var(--accent-text); }
#cfgPaneB .pc-tier-d { margin: 0; font-size: 12.5px; color: var(--text-muted); opacity: 1; }
#cfgPaneB .pc-tier-d b { color: var(--text); font-weight: 600; }
#cfgPaneB .pc-tier:hover { border-color: var(--accent-text); transform: translateY(-2px); }
#cfgPaneB .pc-tier.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent); }
#cfgPaneB .pc-tier.is-on::after { content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
#cfgPaneB .pc-tier.is-on .pc-tier-d { color: var(--text-muted); }
#cfgPaneB .pc-mix-ico { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }
@media (max-width: 640px) { #cfgPaneB .pc-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cfgPaneB .pc-tier-ico { display: none; } }
#cfgPaneB .pc-mix { max-width: 820px; }

/* ---------- Contenido para redes: aviso, banco de escenas, tabla de puntos (8 oct 2026) ---------- */
.rf-nota { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text) !important; font-size: 13px !important; line-height: 1.45 !important; }
.rf-nota svg { flex: none; margin-top: 2px; color: var(--accent-text); }

.sh { --s1: #3965FA; --s2: #8B5CF6; --s3: #FF8A5C; --s4: #2BB39A; --s5: #F2B035; --s6: #E25C9B;
  max-width: 1180px; margin: clamp(36px, 6vh, 64px) auto 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); }
.sh-head { max-width: 720px; }
.sh-k { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.sh-t { margin: 8px 0 10px; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.015em; line-height: 1.15; }
.sh-t em { color: var(--accent-text); }
.sh-d { color: var(--text-muted); line-height: 1.6; }
.sh-diag { margin-top: 28px; display: grid; grid-template-columns: minmax(0, .9fr) 56px minmax(0, 1.5fr); align-items: center; gap: 0; }
.sh-lab { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--text); }
.sh-bank { padding: 18px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--accent-soft), var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sh-bank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-sc { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; cursor: default; transition: transform .2s, box-shadow .2s; }
.sh-sc i { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--c); background-image: linear-gradient(150deg, rgba(255,255,255,.35), transparent 60%); background-color: var(--c); }
.sh-sc:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px var(--c); }
.sh-arrow { display: flex; justify-content: center; }
.sh-arrow i { position: relative; width: 70%; height: 2px; background: var(--border); }
.sh-arrow i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--border); border-right: 0; }
.sh-reels { display: flex; flex-direction: column; gap: 10px; }
.sh-reel { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; }
.sh-reel-k { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.sh-reel-k svg { flex: none; color: var(--accent-text); }
.sh-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); }
.sh-seg { display: flex; align-items: flex-end; min-height: 46px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--c); background-image: linear-gradient(150deg, rgba(255,255,255,.3), transparent 60%); color: #fff; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.25); transition: opacity .2s, transform .2s; }
.sh-sc[data-s="1"], .sh-seg[data-s="1"] { --c: var(--s1); } .sh-sc[data-s="2"], .sh-seg[data-s="2"] { --c: var(--s2); }
.sh-sc[data-s="3"], .sh-seg[data-s="3"] { --c: var(--s3); } .sh-sc[data-s="4"], .sh-seg[data-s="4"] { --c: var(--s4); }
.sh-sc[data-s="5"], .sh-seg[data-s="5"] { --c: var(--s5); } .sh-sc[data-s="6"], .sh-seg[data-s="6"] { --c: var(--s6); }
.sh:has(.sh-sc:hover) .sh-seg { opacity: .25; }
.sh:has(.sh-sc[data-s="1"]:hover) .sh-seg[data-s="1"], .sh:has(.sh-sc[data-s="2"]:hover) .sh-seg[data-s="2"],
.sh:has(.sh-sc[data-s="3"]:hover) .sh-seg[data-s="3"], .sh:has(.sh-sc[data-s="4"]:hover) .sh-seg[data-s="4"],
.sh:has(.sh-sc[data-s="5"]:hover) .sh-seg[data-s="5"], .sh:has(.sh-sc[data-s="6"]:hover) .sh-seg[data-s="6"] { opacity: 1; transform: translateY(-2px); }
.sh-vam { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-muted); line-height: 1.6; }
.sh-vam b { color: var(--text); }
.sh-vam a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.sh-vam a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .sh-diag { grid-template-columns: 1fr; }
  .sh-arrow { height: 40px; } .sh-arrow i { width: 2px; height: 70%; }
  .sh-arrow i::after { right: auto; left: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 8px solid var(--border); border-bottom: 0; }
}
@media (max-width: 560px) {
  .sh-reel { grid-template-columns: 1fr; gap: 6px; }
  .sh-seg { min-height: 40px; font-size: 10.5px; padding: 5px 6px; }
  .sh-bank { padding: 14px; }
}

.pt { max-width: 860px; margin: clamp(22px, 4vh, 36px) auto 0; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pt-k { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.01em; }
.pt-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 16px); }
.pt-it { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: clamp(16px, 3vw, 24px) 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.pt-it svg { color: var(--accent-text); margin-bottom: 4px; }
.pt-it > span { font-weight: 600; font-size: var(--text-sm); }
.pt-it b { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent-text); }
.pt-it small { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.pt-n { margin-top: 16px; color: var(--text-muted); }
.plan-card .plan-cta { margin-top: 0; }
.sh-reels .sh-lab { margin-bottom: 2px; }

/* ---------- Banco de escenas animado + tabla de puntos compacta (8 oct 2026, v2) ---------- */
.sh { position: relative; }
.sh-stage { display: none; }
.sh.is-anim .sh-stage { display: block; }
.sh.is-anim .sh-reels { display: none; }
.sh-stage-in { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: center; }
.sh-fun { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sh-fun li { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 14px; text-align: center;
  font-size: 12.5px; font-weight: 700; line-height: 1.15; color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  transition: background .45s, color .45s; }
.sh-fun li:nth-child(1) { width: 100%; } .sh-fun li:nth-child(2) { width: 84%; } .sh-fun li:nth-child(3) { width: 68%; }
.sh-fun li.is-past { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--text); }
.sh-fun li.is-on { background: var(--accent); color: var(--on-accent); }
.sh-build { transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1); }
.sh-build.is-in { animation: shIn .55s cubic-bezier(.22,1,.36,1); }
.sh-build.is-out { opacity: 0; transform: translateX(40px) scale(.97); }
@keyframes shIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.sh-now { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.sh-now small { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.sh-now strong { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.sh-mk { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; }
.sh-phone { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-md); padding: 5px; background: #0E1222; box-shadow: 0 18px 34px -18px rgba(14,18,34,.6); }
.sh-screen { position: relative; height: 100%; border-radius: var(--r-md); overflow: hidden; background: #1B2140; }
.sh-screen::before { content: ""; position: absolute; inset: 0; background: var(--c, transparent); background-image: linear-gradient(160deg, rgba(255,255,255,.32), transparent 55%); opacity: 0; transition: opacity .25s; }
.sh-screen[data-s]::before { opacity: 1; }
.sh-screen.is-cut::before { animation: shZoom .82s ease-out; }
@keyframes shZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.sh-screen-l { position: absolute; left: 8px; right: 8px; bottom: 16px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sh-screen[data-s="1"] { --c: var(--s1); } .sh-screen[data-s="2"] { --c: var(--s2); } .sh-screen[data-s="3"] { --c: var(--s3); }
.sh-screen[data-s="4"] { --c: var(--s4); } .sh-screen[data-s="5"] { --c: var(--s5); } .sh-screen[data-s="6"] { --c: var(--s6); }
.sh-prog { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.sh-prog i { display: block; height: 100%; width: 0; background: #fff; }
.sh-ok { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: var(--r-full); background: #fff; color: #0E1222; font-size: 11px; font-weight: 700; white-space: nowrap;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.sh-ok svg { color: #1f9d55; }
.sh-build.is-done .sh-ok { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sh-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); }
.sh-slot { position: relative; display: flex; align-items: flex-end; height: 72px; padding: 6px 8px; border-radius: var(--r-sm); border: 1.5px dashed color-mix(in srgb, var(--text-muted) 40%, transparent);
  color: #fff; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s, box-shadow .25s; }
.sh-slot.is-on { border: 0; background: var(--c); background-image: linear-gradient(150deg, rgba(255,255,255,.3), transparent 60%); }
.sh-slot.is-play { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.sh-slot[data-s="1"], .sh-fly[data-s="1"] { --c: var(--s1); } .sh-slot[data-s="2"], .sh-fly[data-s="2"] { --c: var(--s2); }
.sh-slot[data-s="3"], .sh-fly[data-s="3"] { --c: var(--s3); } .sh-slot[data-s="4"], .sh-fly[data-s="4"] { --c: var(--s4); }
.sh-slot[data-s="5"], .sh-fly[data-s="5"] { --c: var(--s5); } .sh-slot[data-s="6"], .sh-fly[data-s="6"] { --c: var(--s6); }
.sh-ph { position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; border-radius: 2px; background: var(--text); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sh-fly { position: absolute; z-index: 6; pointer-events: none; border-radius: var(--r-sm); background: var(--c); background-image: linear-gradient(150deg, rgba(255,255,255,.35), transparent 60%); }
.sh-sc.is-pick { animation: shPick .5s ease-out; }
.sh-sc.is-pick i { outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent); outline-offset: 2px; }
@keyframes shPick { 0% { transform: none; } 40% { transform: translateY(-4px) scale(1.04); } 100% { transform: none; } }
@media (max-width: 1100px) { .sh-stage-in { grid-template-columns: 1fr; } .sh-fun { flex-direction: row; } .sh-fun li { flex: 1; width: auto !important; clip-path: none; border-radius: var(--r-sm); height: 40px; font-size: 11.5px; padding: 0 6px; } }
@media (max-width: 560px) { .sh-mk { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } .sh-slot { height: 58px; font-size: 10px; padding: 5px; } .sh-track { gap: 4px; padding: 4px; } .sh-now strong { font-size: 1.1rem; } }

/* Tabla de puntos, más compacta */
.pt { max-width: 760px; padding: 14px 16px; border-radius: var(--r-md); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 18px; text-align: left; }
.pt-k { font-size: 1.05rem; padding-left: 6px; }
.pt-grid { margin-top: 0; gap: 8px; }
.pt-it { flex-direction: row; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: var(--r-sm); }
.pt-it svg { width: 20px; height: 20px; margin: 0; }
.pt-it > span { font-size: 13.5px; }
.pt-it b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-left: 4px; }
.pt-it small { font-size: 12px; }
.pt-n { grid-column: 1 / -1; margin-top: 2px; padding-left: 6px; font-size: 13px; }
@media (max-width: 760px) { .pt { grid-template-columns: 1fr; text-align: center; } .pt-k, .pt-n { padding-left: 0; } .pt-it { flex-direction: column; gap: 2px; padding: 9px 6px; } .pt-it b { margin-left: 0; font-size: 1.25rem; } .pt-it > span { font-size: 12.5px; } }

/* Tabla de puntos v3: dos columnas, ancho de la retícula de planes */
.pt { max-width: 1180px; margin: clamp(22px, 4vh, 36px) auto 0; padding: 22px 26px; border-radius: var(--r-md); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); align-items: center; gap: 28px; text-align: left; }
.pt-txt { display: flex; flex-direction: column; gap: 8px; }
.pt-k { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; padding: 0; }
.pt-n { grid-column: auto; margin: 0; padding: 0; font-size: var(--text-sm); line-height: 1.55; max-width: 38ch; }
.pt-cost { display: flex; flex-direction: column; gap: 10px; }
.pt-ck { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.pt-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt-it { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic name" "ic dots" "val val"; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); flex-direction: initial; justify-content: initial; }
.pt-ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
.pt-ic svg { flex: none; width: 22px; height: 22px; margin: 0; }
.pt-name { grid-area: name; font-weight: 700; font-size: 15px; }
.pt-dots { grid-area: dots; display: flex; gap: 4px; }
.pt-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.pt-dots i.is-off { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pt-val { grid-area: val; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 6px; }
.pt-val b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); margin: 0; }
.pt-val small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 900px) { .pt { grid-template-columns: 1fr; gap: 18px; } .pt-n { max-width: none; } }
@media (max-width: 560px) {
  .pt { padding: 18px 16px; }
  .pt-grid { gap: 8px; }
  .pt-it { grid-template-columns: 1fr; grid-template-areas: "ic" "name" "dots" "val"; justify-items: center; text-align: center; padding: 12px 6px; }
  .pt-ic { width: 38px; height: 38px; } .pt-name { font-size: 13.5px; } .pt-val { justify-content: center; width: 100%; } .pt-val b { font-size: 1.4rem; } .pt-val small { font-size: 12px; }
}
/* Tabla de puntos v4: sin bolitas */
.pt-it { grid-template-areas: "ic name" "val val"; }
.pt-it > .pt-name { font-size: 19px; letter-spacing: -.01em; }
@media (max-width: 560px) { .pt-it { grid-template-areas: "ic" "name" "val"; } .pt-it > .pt-name { font-size: 15.5px; } }

/* ---------- Cómo se arma tu paquete v3: escenas → tu campaña (embudo) → tu video (8 oct 2026) ---------- */
.sh-diag { margin-top: 28px; display: grid; grid-template-columns: minmax(0, .95fr) 44px minmax(0, .78fr) 44px minmax(0, 1.5fr); align-items: start; gap: 0; }
.sh-col { display: flex; flex-direction: column; min-width: 0; }
.sh-col > .sh-lab { margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-family: var(--font-label);}
.sh-arrow { align-self: stretch; padding-top: 28px; }
.sh-arrow i { width: 60%; }
.sh-bank { padding: 12px; }
.sh-bank-grid { gap: 8px; }
.sh-sc { padding: 6px 6px 8px; gap: 6px; font-size: 12px; }
.sh-sc i { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--img, none) center / cover no-repeat, linear-gradient(150deg, rgba(255,255,255,.35), transparent 60%), var(--c); }
.sh-play { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(10,14,30,.45); backdrop-filter: blur(2px); }
.sh-play::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 7px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.sh-fun { gap: 5px; }
.sh-fun li { width: 100%; height: 34px; font-size: 12px; padding: 0 10px; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.sh-fun li:nth-child(1) { width: 100%; } .sh-fun li:nth-child(2) { width: 91%; } .sh-fun li:nth-child(3) { width: 82%; }
.sh-fun li:nth-child(4) { width: 73%; } .sh-fun li:nth-child(5) { width: 64%; } .sh-fun li:nth-child(6) { width: 55%; }
.sh-fun li.is-on { background: var(--accent); color: var(--on-accent); }
.sh-build .sh-now { margin: 0 0 10px; }
.sh-build .sh-now strong { font-size: 1.15rem; }
.sh-mk { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
.sh-screen::before { background: var(--img, none) center / cover no-repeat, linear-gradient(160deg, rgba(255,255,255,.32), transparent 55%), var(--c, transparent); }
.sh-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; border-radius: var(--r-sm); }
.sh-slot { height: auto; aspect-ratio: 9 / 16; border-radius: var(--r-sm); padding: 5px 6px; font-size: 10.5px; }
.sh-slot.is-on { background: var(--img, none) center / cover no-repeat, linear-gradient(160deg, rgba(255,255,255,.3), transparent 60%), var(--c); }
.sh-fly { background: var(--img, none) center / cover no-repeat, linear-gradient(150deg, rgba(255,255,255,.35), transparent 60%), var(--c); }
@media (max-width: 1100px) {
  .sh-diag { grid-template-columns: 1fr; }
  .sh-arrow { height: 40px; padding-top: 0; } .sh-arrow i { width: 2px; height: 70%; }
  .sh-arrow i::after { right: auto; left: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 8px solid var(--border); border-bottom: 0; }
  .sh-col-bank, .sh-col-camp { max-width: 460px; width: 100%; margin: 0 auto; }
  .sh-col-vid { max-width: 560px; width: 100%; margin: 0 auto; }
  .sh-fun { flex-direction: column; } .sh-fun li { flex: none; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); border-radius: 0; height: 34px; }
  .sh-fun li:nth-child(1) { width: 100% !important; } .sh-fun li:nth-child(2) { width: 91% !important; } .sh-fun li:nth-child(3) { width: 82% !important; }
  .sh-fun li:nth-child(4) { width: 73% !important; } .sh-fun li:nth-child(5) { width: 64% !important; } .sh-fun li:nth-child(6) { width: 55% !important; }
}
@media (max-width: 560px) { .sh-mk { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } .sh-slot { height: auto; font-size: 9.5px; padding: 4px; } .sh-track { gap: 4px; padding: 4px; } .sh-fun li { font-size: 11.5px; } }

.sh-arrow { align-self: center; padding-top: 30px; }
.sh-fun li { white-space: nowrap; }
.sh-fun li:nth-child(2) { width: 94%; } .sh-fun li:nth-child(3) { width: 88%; } .sh-fun li:nth-child(4) { width: 82%; } .sh-fun li:nth-child(5) { width: 76%; } .sh-fun li:nth-child(6) { width: 70%; }
@media (max-width: 1100px) { .sh-arrow { padding-top: 0; } .sh-fun li:nth-child(2) { width: 94% !important; } .sh-fun li:nth-child(3) { width: 88% !important; } .sh-fun li:nth-child(4) { width: 82% !important; } .sh-fun li:nth-child(5) { width: 76% !important; } .sh-fun li:nth-child(6) { width: 70% !important; } }

/* Hero: tipografía 2 px más chica en todas las páginas (8 oct 2026). El subtítulo nunca baja de 16 px. */
.hero h1.hero-headline, .hero .hero-rotator { font-size: calc(clamp(2.6rem, 6.2vw, 5rem) - 2px); }
.page-servicios .hero h1.hero-headline { font-size: calc(clamp(2.3rem, 4.7vw, 4rem) - 2px); }
.hero .hero-tagline { font-size: clamp(1rem, calc(1.5vw - 2px), calc(1.2rem - 2px)); }

/* Precios en MXN + IVA (8 oct 2026) */
.iva { white-space: nowrap; font-size: .9em; font-weight: 600; opacity: .8; letter-spacing: 0; }
.result-price .iva, #sidebarPrice .iva, .pc-res-total .iva, #pcResTotal .iva { font-size: .5em; vertical-align: .35em; }
.svc-iva { display: block; white-space: nowrap; font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.svc-iva .iva { font-size: 1em; opacity: 1; }
.svc-specs .svc-iva .iva { display: inline; padding: 0; margin: 0; border: 0; background: none; }


/* =====================================================================
   DESIGN SYSTEM · TIPOGRAFÍA (11 oct 2026)
   Cuatro tipografías de Google Fonts, cada una con un papel. Sin cursiva.
   --font-display  Hanken Grotesk (500–800)  Títulos grandes del hero, precios y cifras.
   --font-heading  Plus Jakarta Sans (500–800)  Títulos de sección, subtítulos, nombres de planes, botones destacados.
   --font-body     Atkinson Hyperlegible Next (300–700)  Párrafos, listas, formularios, menús.
   --font-label    DM Mono (400–500)  Etiquetas en mayúsculas: breadcrumbs, kickers, pasos, «MXN + IVA».
   --font-logo     Source Sans 3 (700)  Solo el logotipo SKYHEADS. No se toca.
   Énfasis: color azul (--accent-text), nunca cursiva.
   ===================================================================== */
html *, html *::before, html *::after { font-style: normal !important; }
.site-logo, .footer-brand .footer-logo, .ag-host-logo, .agd-logo { font-family: var(--font-logo); }
/* La palabra que rota en el hero usa la misma tipografía del título (Hanken Grotesk); solo cambia el color. */
.hero h1 .hero-rotator-word { font-family: var(--font-display); font-weight: inherit; letter-spacing: -0.035em; }

/* ---------- Inicio · «Una probada»: la tarjeta activa se ve completa (11 oct 2026) ----------
   El área que recorta el carrusel ahora sobresale 64 px arriba y abajo del escenario, así el borde azul,
   la sombra y el brillo de la tarjeta activa no se cortan. Las tarjetas conservan su tamaño. */
.pf-viewport { inset: -64px 0; pointer-events: none; }
.pf-track { top: 64px; height: calc(100% - 128px); }
.pf-card { pointer-events: auto; }

/* ---------- Hero: la etiqueta (breadcrumb) más grande y más cerca del título (11 oct 2026) ----------
   Mismo aire entre etiqueta y título que entre título y párrafo. Solo en las secciones hero. */
.hero-eyebrow { font-size: 14px; letter-spacing: 0.1em; margin-bottom: 32px; }
.hero-eyebrow-mark { font-weight: 500; letter-spacing: 0.12em; }
@media (max-width: 440px) { .hero-eyebrow { font-size: 12px; letter-spacing: 0.06em; gap: 8px; } .hero-eyebrow-mark { letter-spacing: 0.12em; } }
@media (max-width: 380px) { .hero-eyebrow { font-size: 11px; letter-spacing: 0.04em; } .hero-eyebrow-mark { letter-spacing: 0.08em; } }


/* =====================================================================
   AJUSTES EDITORIALES (11 oct 2026) · basados en:
   - Bringhurst / webtypography.net: medida ideal de 66 caracteres (45 a 75).
   - Butterick, Practical Typography: texto web de 15 a 25 px; interlineado 120–145 %;
     mayúsculas con 5–12 % de espaciado; negritas con moderación; espacio arriba de un
     título mayor que abajo.
   - WCAG 1.4.8 (AAA): líneas de 80 caracteres o menos; interlineado de 1.5.
   ===================================================================== */
/* Sin negritas falsas: si un peso no existe en la tipografía, se usa el más cercano. */
html { font-synthesis: none; }
/* Tres pesos para el texto: 400 normal · 600 subtítulos e interfaz · 700 énfasis. */
strong, b { font-weight: 700; }
/* Medida: los párrafos de presentación no pasan de unos 70 caracteres por línea. */
.section-subtitle { max-width: 36rem; }
.sh-d, .g-mast-sub { max-width: 36rem; }
/* Interlineado de lectura (1.5) y tamaño mínimo de 15 px en textos que se leen completos. */
.faq-answer { font-size: 16px; line-height: 1.55; }
.faq-answer > *, .faq-answer p { max-width: 36rem; }
.testimonial-text { font-size: 15px; line-height: 1.5; }
.cta-band-text, .contact-lead { line-height: 1.5; }
.lv-p, .prod-que, .stage-desc { font-size: 15px; line-height: 1.5; }
/* Títulos de varias líneas: interlineado cerrado. */
.rf-node b { line-height: 1.25; }
/* Espacio entre secciones más contenido: el texto no queda flotando. */
.section { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.section-subtitle { margin-bottom: clamp(24px, 4vh, 48px); }
.lv-sec .section-subtitle { max-width: 40rem; }
.faq-answer { max-width: 42rem; }

/* ===== COPY Y LECTURA (11 oct 2026): tarjetas de producción y «Dónde trabajamos» compacto ===== */
.prod-card .prod-que, .prod-card.nuestra .prod-que { color: var(--text-muted); }
.prod-ideal { flex: 1; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--text); }
.prod-card.nuestra .prod-ideal { color: var(--accent-text); }
.prod-ideal + .prod-time { margin-top: 16px; }
.g6c { max-width: 1180px; margin: 28px auto 0; padding: 16px 22px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.section-difference .g6c { max-width: 980px; }
.g6c-k { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.g6c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.g6c-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--text); }
.g6c .g6-ico { width: 32px; height: 32px; flex: none; }
.g6c .g6-ico svg { width: 16px; height: 16px; }
.g6c li.is-base .g6-ico { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none; }
@media (max-width: 700px) {
  .g6c { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
  .g6c-list { flex-direction: column; gap: 10px; }
}

/* ===== VIDEO A LA MEDIDA · «La diferencia» con visuales (11 oct 2026) ===== */
.section-difference .prod-grid, .section-difference .cmp-cta, .section-difference .g6c { max-width: 1180px; }
.section-difference .prod-grid { gap: 16px; }
.section-difference .prod-card { overflow: hidden; border-radius: var(--r-lg); transition: transform .4s var(--r4-ease), border-color .4s, box-shadow .4s; }
.section-difference .prod-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 50px -30px rgba(57,101,250,.55); }
.prod-vis { position: relative; margin: -26px -24px 0; height: 184px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(70% 80% at 80% 0%, rgba(84,120,255,.16), transparent 70%), var(--bg); border-bottom: 1px solid var(--border); }
.prod-vis::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(57,101,250,.26) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(90% 100% at 75% 0%, #000 20%, transparent 80%); mask-image: radial-gradient(90% 100% at 75% 0%, #000 20%, transparent 80%); }
.prod-card:not(.nuestra) .prod-vis { background: radial-gradient(70% 80% at 80% 0%, rgba(120,128,150,.12), transparent 70%), var(--bg); }
.prod-card:not(.nuestra) .prod-vis::before { background-image: radial-gradient(rgba(120,128,150,.3) 1px, transparent 1.5px); }
.prod-vis > * { position: relative; z-index: 1; }
.prod-nota { top: 246px; }
.pv-frame { position: relative; width: min(280px, 80%); aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 18px 36px -20px rgba(20,30,70,.45); }

/* Videos en loop, sin controles ni clic */
.pv-frame { pointer-events: none; }
.pv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .section-difference .prod-card { transition: none; } .section-difference .prod-card:hover { transform: none; } }
@media (max-width: 900px) { .section-difference .cmp-cta, .section-difference .g6c { max-width: 560px; } }

/* Contenido para redes: las tres etiquetas de planes ocupan todo el ancho */
.nc4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .nc4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .nc4 { grid-template-columns: 1fr; } }

/* ===== Videos: nunca un cuadro negro mientras cargan (11 oct 2026) ===== */
.pf-card video.pf-media { background: transparent; }
.pfg-lightbox video { background-color: #000; background-size: cover; background-position: center; }
.cv-a { background-size: cover; background-position: center; }
.cv-a .cv-video { background: transparent; }

/* ===== Portafolio: el video se reproduce dentro de la tarjeta (12 oct 2026) ===== */
.pfg-card .pfg-hit { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.pfg-card .pfg-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pfg-card:has(.pfg-hit:focus-visible) { outline: none; }
.pfg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.pfg-card.has-frame img { visibility: hidden; }
.pfg-card.is-on::after { opacity: 0; transition: opacity .3s; }
.pfg-card.is-on .pfg-info, .pfg-card.is-on .pfg-play { opacity: 0; transition: opacity .25s; }
.pfg-card.is-on:hover img { transform: none; }
.pfg-ctl { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: var(--r-full);
  background: rgba(10,12,18,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s; }
.pfg-card.is-on .pfg-ctl { opacity: 1; transform: none; pointer-events: auto; }
.pfg-ctl button { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); cursor: pointer; }
.pfg-ctl button:hover { background: var(--accent); }
.pfg-ctl button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pfg-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.pfg-bar i { display: block; height: 100%; width: 0; background: #fff; }

/* ===== Portafolio: etiqueta de cómo se produjo, avance con clic y menú oculto al ver (12 oct 2026) ===== */
.pfg-modo { position: absolute; top: 12px; left: 12px; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 8px; border-radius: var(--r-full);
  font: 500 10.5px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(10,12,18,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pfg-modo i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pfg-modo.is-generativo i { background: #5B83FF; box-shadow: 0 0 0 2px rgba(91,131,255,.3); }
.pfg-modo.is-hibrido i { background: linear-gradient(90deg, #fff 50%, #5B83FF 50%); }
.pfg-modo.is-tradicional i { background: #fff; }
.pfg-bar { position: relative; cursor: pointer; touch-action: none; transition: height .15s; }
.pfg-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.pfg-ctl:hover .pfg-bar, .pfg-bar:focus-visible { height: 5px; }
.pfg-bar:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.site-header { transition: transform .35s var(--ease-out-quint, ease); }
body.pfg-viendo .site-header { transform: translateY(-100%); }
.pfg-bar { overflow: visible; } .pfg-bar i { border-radius: 3px; position: relative; }

/* ===== Portafolio: banda «Cómo se produjo» (12 oct 2026) ===== */
.pfg-sec .g6c--modos { margin: 22px auto 28px; }
.g6c--modos .g6c-list li b { font-weight: 600; }
.pfm-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); }
.pfm-dot.is-tradicional { background: #fff; border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.pfm-dot.is-hibrido { background: linear-gradient(90deg, #fff 50%, #5B83FF 50%); border-color: #5B83FF; }
.pfm-dot.is-generativo { background: #5B83FF; border-color: #5B83FF; box-shadow: 0 0 0 3px rgba(91,131,255,.25); }

/* ===== FORMAS: excepciones explícitas al mapeo automático (12 oct 2026) =====
   Contenedores nunca son pastilla; botones nunca son pastilla; todo video o imagen grande va en --r-md. */
.pfg-sec .pfg-filters { border-radius: var(--r-full); width: 100%; max-width: 1180px; box-sizing: border-box; justify-content: space-between; }
.pfg-sec .g6c--modos { box-sizing: border-box; width: 100%; }
.rs-frame, .pv-frame, .pf-card, .pfg-card, .sol-shot, .cv-media, .pfg-lightbox video, .lv-media { border-radius: var(--r-md); }
.floating-cta { border-radius: var(--r-sm); }

/* ===== FORMAS, ajuste de Marco (12 oct 2026): las franjas y barras de UNA línea son pastilla,
   para que abracen a las pastillas de adentro. Si en celular se apilan, pasan a --r-lg. ===== */
.g6c { border-radius: var(--r-full); padding: 12px 32px; justify-content: space-between; }
.g6c-list { flex: 1; justify-content: space-evenly; }
.nc4 li { border-radius: var(--r-full); padding: 10px 18px 10px 10px; }
.nc4-ico { border-radius: 50%; }
@media (max-width: 1100px) { .pfg-sec .pfg-filters { border-radius: var(--r-lg); justify-content: center; } }
@media (max-width: 700px) {
  .g6c { border-radius: var(--r-lg); padding: 16px 18px; }
  .g6c-list { justify-content: flex-start; }
}

/* ===== «La diferencia»: Cuándo conviene, dos puntos por tarjeta (12 oct 2026) ===== */
.prod-cuando2 { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.prod-cuando2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.prod-cuando2 li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text); }
.prod-cuando2 li svg { flex: none; margin-top: 3px; color: var(--text-muted); }
.prod-card.nuestra .prod-cuando2 li svg { color: var(--accent-text); }

/* Acceso del equipo en el pie (16 oct 2026): discreto, con candado */
.footer-social a.foot-equipo { display: inline-flex; align-items: center; gap: 6px; }
.footer-social a.foot-equipo::before { content: ""; width: 12px; height: 12px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 768px) {
  .footer-social { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .footer-social a.foot-equipo { flex-basis: 100%; justify-content: center; }
}