/* ============ FONTS (self-hosted, inlined — sin cambios de tipografía) ============ */
  @font-face{
    font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;
    src:url(../fonts/sora.woff2) format('woff2');
  }
  @font-face{
    font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
    src:url(../fonts/manrope.woff2) format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(../fonts/plex-mono-500.woff2) format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
    src:url(../fonts/plex-mono-600.woff2) format('woff2');
  }

  /* ============ DESIGN TOKENS ============
     Paleta oficial del Manual de Marca INNOVATI (pág. 10):
       Turquesa  RGB 3 221 180   #03ddb4
       Verde     RGB 0 255 169   #00ffa9
       Negro     RGB 0 0 0       #000000
       Blanco                    #ffffff
     --brand-darker y --brand-dim son variaciones tonales del turquesa oficial
     para resolver contraste texto/ícono sobre fondos claros (el turquesa y el
     verde de marca son ambos muy claros — igual que en el sitio real, el texto
     sobre esos colores usa un tono oscuro, nunca blanco).
     Página de un solo tema: simula un sitio de producción real, no una app
     adaptativa al tema del sistema. */
  :root{
    --ink:#0A0F0D;
    --paper:#F5FBF8;
    --paper-raised:#FFFFFF;
    --brand:#03DDB4;
    --brand-light:#00FFA9;
    --brand-darker:#019A81;
    --brand-dim:#D6FFF3;
    --on-brand:#04140F;
    --brand-deep:#13181B;
    --brand-deep-2:#1D2528;
    --slate:#57655F;
    --slate-soft:#8B968F;
    --line:#E1EAE6;
    --line-dark:#1B2E27;
    --signal:#00FFA9;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:22px;
    --container:1180px;
    --font-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
    --shadow-sm:0 1px 2px rgba(5,16,12,.08);
    --shadow-md:0 8px 24px -8px rgba(5,16,12,.22);
    --shadow-lg:0 24px 48px -16px rgba(5,16,12,.32);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.12;
    margin:0;
    text-wrap:balance;
    letter-spacing:-.01em;
  }
  p{margin:0;}
  button{font-family:inherit;cursor:pointer;}
  svg{display:block;}
  .icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  /* icons authored as solid glyphs (fill="currentColor" stroke="none" on the <svg>) must win over
     the stroked-outline default above, which otherwise cascades via SVG fill/stroke inheritance */
  .icon[fill="currentColor"]{fill:currentColor;stroke:none;}
  :focus-visible{outline:2px solid var(--brand-darker);outline-offset:3px;border-radius:4px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  }

  .wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
  @media (max-width:640px){.wrap{padding:0 20px;}}

  /* eyebrow: on light surfaces uses brand-darker (contrast-safe on white);
     .on-dark variant switches to the brighter brand-light since dark grounds
     give it plenty of contrast either way. */
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:12.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--brand-darker);
  }
  .eyebrow::before{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-darker);
    box-shadow:0 0 0 3px rgba(1,154,129,.18);
  }
  .eyebrow.on-dark{color:var(--brand);}
  .eyebrow.on-dark::before{background:var(--brand-light);box-shadow:0 0 0 3px rgba(0,255,169,.22);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-body);font-weight:700;font-size:15px;
    padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:var(--brand-light);transform:translateY(-2px);box-shadow:var(--shadow-md);}
  .btn-ghost-dark{border-color:rgba(255,255,255,.28);color:#fff;}
  .btn-ghost-dark:hover{border-color:var(--brand-light);background:rgba(255,255,255,.06);color:var(--brand-light);}
  .btn-ghost-light{border-color:var(--line);color:var(--ink);}
  .btn-ghost-light:hover{border-color:var(--brand);color:var(--brand-darker);}
  .btn-sm{padding:10px 18px;font-size:13.5px;}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;}

  /* ============ CIRCUIT SPINE ============ */
  .spine{
    position:absolute;left:44px;top:0;bottom:0;width:1px;
    background:linear-gradient(to bottom, transparent, var(--line) 40px, var(--line) calc(100% - 40px), transparent);
    z-index:0;
  }
  .spine::before,.spine::after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    width:7px;height:7px;border-radius:50%;background:var(--paper);border:2px solid var(--brand-darker);
  }
  .spine::before{top:0;} .spine::after{bottom:0;}
  .spine.on-dark{background:linear-gradient(to bottom, transparent, var(--line-dark) 40px, var(--line-dark) calc(100% - 40px), transparent);}
  .spine.on-dark::before,.spine.on-dark::after{background:var(--brand-deep);border-color:var(--brand-light);}
  @media (max-width:960px){.spine{display:none;}}

  /* ============ HEADER ============ */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(245,251,248,.82);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
  .brandmark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em;}
  /* Sin contenedor de color: la marca de INNOVATI se usa siempre suelta
     (ícono + wordmark), nunca metida en una placa/badge — así aparece en
     el manual y en todos los archivos de LOGOS. */
  .brand-stack{display:flex;flex-direction:column;gap:3px;}
  .brand-logo{display:block;height:22px;width:auto;}
  .brand-logo-inverted{filter:brightness(0) invert(1);}
  .brandmark .sub{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.1em;color:var(--slate);display:block;margin-top:1px;}
  .navlinks{display:flex;align-items:center;gap:36px;}
  .navlinks a{font-size:14.5px;font-weight:600;color:var(--ink);position:relative;padding:4px 0;}
  .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .2s ease;transform-origin:left;}
  .navlinks a:hover::after{transform:scaleX(1);}
  .navlinks a:hover{color:var(--brand-darker);}
  .nav-cta{display:flex;align-items:center;gap:18px;}
  .navlinks-wrap{display:flex;align-items:center;gap:36px;}
  .burger{display:none;background:none;border:none;padding:6px;color:var(--ink);}
  .burger .icon{width:26px;height:26px;}
  @media (max-width:900px){
    .navlinks-wrap{display:none;}
    .burger{display:inline-flex;}
  }
  .mobile-panel{
    display:none;flex-direction:column;gap:2px;padding:8px 0 20px;
    border-top:1px solid var(--line);
  }
  .mobile-panel.open{display:flex;}
  .mobile-panel a{padding:12px 4px;font-weight:600;font-size:15px;border-bottom:1px solid var(--line);}
  .mobile-panel .btn{margin-top:12px;width:100%;}

  /* ============ HERO ============ */
  .hero{
    position:relative;background:var(--brand-deep);color:#fff;overflow:hidden;
    padding:88px 0 110px;
  }
  .hero-dotgrid{
    position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.4px);
    background-size:26px 26px;
    mask-image:radial-gradient(ellipse 70% 60% at 65% 20%, black 40%, transparent 85%);
  }
  .hero-glow{
    position:absolute;top:-160px;right:-140px;width:640px;height:640px;border-radius:50%;
    background:radial-gradient(circle, rgba(3,221,180,.5), transparent 68%);
    filter:blur(10px);
  }
  .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-bottom:0;}
  @media (max-width:960px){.hero-inner{grid-template-columns:1fr;}}
  .hero-copy h1{font-size:clamp(32px,4.2vw,50px);margin:20px 0 22px;color:#fff;}
  .hero-copy h1 .grad{
    display:block;
    background:linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-copy p{font-size:17px;color:#C9DAD4;max-width:520px;margin-bottom:32px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

  /* hero: una sola imagen corporativa a color real (sin tinte ni duotono —
     igual que las fotos de "Sobre nosotros" y "Nuestra propuesta"). Sin
     borde: se desvanece en degradado hacia el fondo del hero en todo su
     contorno (máscara radial), en vez de cortarse en una línea recta. */
  .hero-photo{
    position:relative;height:440px;
  }
  .hero-photo-inner{
    position:relative;width:100%;height:100%;
    -webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 46%, black 68%, rgba(0,0,0,.55) 85%, transparent 100%);
    mask-image:radial-gradient(ellipse 88% 86% at 50% 46%, black 68%, rgba(0,0,0,.55) 85%, transparent 100%);
  }
  .hero-photo-inner img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  /* degradado transparente (neutro, sin tinte de color) que funde el
     borde inferior de la foto hacia el fondo oscuro del hero */
  .hero-photo-inner::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom, transparent 55%, rgba(19,24,27,.85) 100%);
  }
  .hero-chip{
    position:absolute;left:18px;top:18px;z-index:3;
    background:rgba(5,16,12,.55);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.18);
    border-radius:999px;padding:9px 16px;display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;
  }
  .hero-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-light);flex-shrink:0;}
  @media (max-width:960px){.hero-photo{height:340px;max-width:560px;margin:0 auto;}}
  @media (max-width:520px){.hero-photo{height:280px;}}

  /* ============ BENEFITS STRIP (contenido real, sin cifras) ============ */
  .benefits-strip{background:var(--paper-raised);border-bottom:1px solid var(--line);padding:44px 0;}
  .benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  @media (max-width:760px){.benefits-grid{grid-template-columns:1fr 1fr;row-gap:32px;}}
  .benefit-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
  .benefit-item .ic{
    width:56px;height:56px;border-radius:16px;background:var(--brand-dim);color:var(--brand-darker);
    display:flex;align-items:center;justify-content:center;
  }
  .benefit-item .ic .icon{width:26px;height:26px;}
  .benefit-item p{font-size:13.6px;font-weight:700;line-height:1.35;max-width:190px;}

  /* ============ TRUST / PARTNERS ============ */
  .trust{padding:100px 0;}
  .trust-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);text-align:center;margin-bottom:30px;}
  .trust-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,5vw,52px);}
  .trust-row img{height:30px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1) opacity(.55);transition:filter .2s ease;}
  .trust-row img:hover{filter:grayscale(0) opacity(1);}

  /* ============ SECTION SCAFFOLD ============ */
  section{position:relative;}
  .section{padding:104px 0;}
  .section.tight{padding:80px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);margin-top:16px;}
  .section-head p{color:var(--slate);font-size:16.5px;margin-top:16px;}
  .section-head.on-dark p{color:#B9CCC5;}
  /* .rail only adds the decorative-spine gutter above 960px (the .spine is
     hidden below that breakpoint too); scoping it to min-width avoids fighting
     .wrap's own responsive padding-left at the same specificity, which used
     to zero it out and pin section content to the left edge on mobile. */
  @media (min-width:961px){.rail{padding-left:88px;}}

  /* ============ SERVICES ============ */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media (max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.services-grid{grid-template-columns:1fr;}}
  .svc-card{
    background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:30px 28px;display:flex;flex-direction:column;gap:14px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
  .svc-top{display:flex;align-items:flex-start;justify-content:space-between;}
  .svc-ic{
    width:48px;height:48px;border-radius:12px;background:var(--brand-dim);color:var(--brand-darker);
    display:flex;align-items:center;justify-content:center;
  }
  .svc-ic .icon{width:24px;height:24px;}
  .svc-code{font-family:var(--font-mono);font-size:11.5px;color:var(--slate-soft);letter-spacing:.04em;padding-top:6px;}
  .svc-card h3{font-size:18.5px;}
  .svc-card p{color:var(--slate);font-size:14.4px;flex-grow:1;}
  .svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
  .svc-tags span{font-size:11.5px;font-weight:600;color:var(--brand-darker);background:var(--brand-dim);padding:4px 9px;border-radius:999px;}

  /* ============ ABOUT / SPLIT MEDIA ============ */
  .split-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;}
  .split-grid.rev{grid-template-columns:1.1fr .9fr;}
  .split-grid.rev .split-media{order:2;}
  .split-grid.rev .split-copy{order:1;}
  @media (max-width:960px){
    .split-grid,.split-grid.rev{grid-template-columns:1fr;gap:40px;}
    .split-grid.rev .split-media{order:1;}
    .split-grid.rev .split-copy{order:2;}
  }
  .split-media{position:relative;}
  /* Foto sin filtro ("como el original"): solo se le agrega un
     desvanecido en degradado hacia el contorno (máscara radial), sin
     borde de color ni recorte recto. */
  .split-media .frame{
    aspect-ratio:4/5;position:relative;
  }
  .split-media .frame-inner{
    position:relative;width:100%;height:100%;background:var(--brand-deep);
    -webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 46%, black 68%, rgba(0,0,0,.55) 85%, transparent 100%);
    mask-image:radial-gradient(ellipse 88% 86% at 50% 46%, black 68%, rgba(0,0,0,.55) 85%, transparent 100%);
  }
  .split-media .frame img{width:100%;height:100%;object-fit:cover;}
  .split-badge{
    position:absolute;bottom:-24px;left:24px;right:24px;background:var(--paper-raised);
    border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
    padding:16px 20px;display:flex;align-items:center;gap:12px;
  }
  @media (max-width:520px){.split-badge{left:12px;right:12px;bottom:-18px;padding:13px 16px;}}
  .split-badge .pulse{position:relative;width:10px;height:10px;flex-shrink:0;}
  .split-badge .pulse::before,.split-badge .pulse::after{
    content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand-darker);
  }
  .split-badge .pulse::before{animation:pulse-ring 2s ease-out infinite;}
  @keyframes pulse-ring{0%{transform:scale(1);opacity:.6;}100%{transform:scale(2.6);opacity:0;}}
  .split-badge b{display:block;font-size:14px;}
  .split-badge span{font-size:12px;color:var(--slate);}

  .split-copy p.lead{color:var(--slate);font-size:16.3px;margin:16px 0 16px;}
  .check-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:20px 0 32px;}
  @media (max-width:520px){.check-list{grid-template-columns:1fr;}}
  .check-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.6px;font-weight:600;}
  .check-list li .icon{width:19px;height:19px;color:var(--brand-darker);flex-shrink:0;margin-top:1px;}

  /* ============ CHALLENGES (dark) ============ */
  .challenges{background:var(--brand-deep);color:#fff;}
  .challenges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:900px){.challenges-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.challenges-grid{grid-template-columns:1fr;}}
  .challenge-card{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
    padding:26px 24px;transition:border-color .2s ease, background .2s ease;
  }
  .challenge-card:hover{border-color:rgba(0,255,169,.5);background:rgba(255,255,255,.07);}
  .challenge-card .num{font-family:var(--font-mono);font-size:12px;color:var(--brand);letter-spacing:.06em;}
  .challenge-card h3{font-size:16.5px;color:#fff;margin-top:12px;}
  .challenge-card p{font-size:13.8px;color:#B9CCC5;margin-top:10px;line-height:1.6;}

  /* ============ COMPROMISO: comparación + beneficios (una sola sección, como el sitio real) ============ */
  .compare-band{background:var(--brand-deep);color:#fff;}
  .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media (max-width:760px){.compare-grid{grid-template-columns:1fr;}}
  .compare-card{border-radius:var(--radius-lg);padding:30px 28px;}
  .compare-card.before{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);}
  .compare-card.after{background:rgba(3,221,180,.09);border:1px solid rgba(3,221,180,.35);}
  .compare-card h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
  .compare-card.before h3{color:#7C9089;}
  .compare-card.after h3{color:var(--brand-light);}
  .compare-card ul{margin-top:20px;display:flex;flex-direction:column;gap:13px;}
  .compare-card li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;}
  .compare-card.before li{color:#B9CCC5;}
  .compare-card.after li{color:#fff;}
  .compare-card .icon{width:17px;height:17px;flex-shrink:0;margin-top:2px;}
  .compare-card.before .icon{color:#5F7B72;}
  .compare-card.after .icon{color:var(--brand-light);}

  .benefit-subhead{margin:72px 0 32px;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9FB6AE;}
  .benefit-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:900px){.benefit-cards{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.benefit-cards{grid-template-columns:1fr;}}
  .bcard{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
    padding:26px 24px;transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .bcard:hover{border-color:rgba(0,255,169,.5);background:rgba(255,255,255,.07);transform:translateY(-3px);}
  .bcard .bc-ic{
    width:44px;height:44px;border-radius:12px;background:rgba(0,255,169,.12);color:var(--brand-light);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .bcard .bc-ic .icon{width:22px;height:22px;}
  .bcard h4{font-size:16px;color:#fff;}
  .bcard p{font-size:13.8px;color:#B9CCC5;margin-top:8px;line-height:1.6;}

  .compare-quote{
    margin-top:56px;max-width:760px;margin-left:auto;margin-right:auto;text-align:center;
    font-family:var(--font-display);font-weight:600;
    font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:#fff;text-wrap:balance;
  }

  /* ============ PROCESS ============ */
  .process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  @media (max-width:800px){.process-row{grid-template-columns:1fr 1fr;row-gap:36px;}}
  @media (max-width:520px){.process-row{grid-template-columns:1fr;}}
  .process-step{position:relative;padding-right:24px;}
  .process-step:not(:last-child)::after{
    content:"";position:absolute;top:22px;right:0;left:56px;height:1px;background:var(--line);
  }
  @media (max-width:800px){.process-step:not(:last-child)::after{display:none;}}
  .process-step .n{
    width:44px;height:44px;border-radius:12px;background:var(--brand-deep);color:var(--brand);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:15px;
    position:relative;z-index:1;
  }
  .process-step h3{font-size:17px;margin-top:18px;}
  .process-step p{font-size:14px;color:var(--slate);margin-top:8px;line-height:1.6;max-width:230px;}
  .process-quote{
    margin-top:52px;padding-top:36px;border-top:1px solid var(--line);
    font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);
    max-width:640px;text-wrap:balance;
  }

  /* ============ CONTACT ============ */
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
  .contact-item{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
  .contact-item:first-child{padding-top:0;}
  .contact-item .ic{
    width:46px;height:46px;border-radius:12px;background:var(--brand-dim);color:var(--brand-darker);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .contact-item .lbl{font-size:12.5px;color:var(--slate);}
  .contact-item .val{font-size:16.5px;font-weight:700;margin-top:2px;}
  .contact-item a.val:hover{color:var(--brand-darker);}

  .contact-form{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;}
  /* Honeypot anti-spam: fuera de pantalla, no display:none (algunos bots
     ignoran los campos display:none pero igual rellenan los que solo
     están posicionados fuera de vista). */
  .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  @media (max-width:520px){.form-row{grid-template-columns:1fr;}}
  .field label{display:block;font-size:12.8px;font-weight:700;margin-bottom:7px;color:var(--ink);}
  .field input,.field select,.field textarea{
    width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:11px 14px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:#fff;
    transition:border-color .15s ease;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);}
  .field{margin-bottom:16px;}
  .field textarea{resize:vertical;min-height:96px;}
  .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#DC2626;}
  .field-error{display:none;font-size:12px;color:#DC2626;margin-top:6px;}
  .field.has-error .field-error{display:block;}
  .form-note{font-size:12px;color:var(--slate-soft);margin-top:14px;}
  .form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
  .form-actions .btn{flex:1;min-width:180px;}
  .form-status{margin-top:14px;font-size:13.5px;text-align:center;display:none;}
  .form-status.show{display:block;}
  .form-status.success{color:var(--brand-darker);font-weight:700;}
  .form-status.error{color:#DC2626;}

  /* ============ WHATSAPP FLOTANTE ============ */
  .wa-float{
    position:fixed;right:22px;bottom:22px;z-index:60;
    width:58px;height:58px;border-radius:50%;
    background:var(--brand);color:var(--on-brand);
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lg);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .wa-float:hover{background:var(--brand-light);transform:translateY(-3px) scale(1.05);box-shadow:0 20px 40px -12px rgba(0,0,0,.4);}
  .wa-float .icon{width:27px;height:27px;position:relative;z-index:1;}
  .wa-float .ping{position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:wa-ping 2.4s ease-out infinite;}
  @keyframes wa-ping{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.6);opacity:0;}}
  @media (max-width:640px){.wa-float{right:16px;bottom:16px;width:52px;height:52px;}}

  /* ============ FOOTER ============ */
  footer{background:var(--ink);color:#C7D3CE;padding-top:80px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.09);}
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:44px;}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
  .footer-brand .brandmark{color:#fff;}
  .footer-brand p{margin-top:16px;font-size:14.3px;color:#9FAEA8;max-width:300px;line-height:1.7;}
  .footer-social{display:flex;gap:10px;margin-top:22px;}
  .footer-social a{
    width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;color:#C7D3CE;transition:background .18s ease, border-color .18s ease, color .18s ease;
  }
  .footer-social a:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
  .footer-social .icon{width:16px;height:16px;stroke:currentColor;}
  .footer-col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7E8F88;font-weight:600;margin-bottom:20px;}
  .footer-col ul{display:flex;flex-direction:column;gap:13px;}
  .footer-col a{font-size:14.3px;color:#C7D3CE;transition:color .16s ease;}
  .footer-col a:hover{color:var(--brand-light);}
  .footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#C7D3CE;}
  .footer-contact .icon{width:17px;height:17px;color:var(--brand-light);flex-shrink:0;margin-top:2px;}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    padding:26px 0;font-size:12.8px;color:#6E7D77;font-family:var(--font-mono);
  }
  .footer-bottom a{color:#6E7D77;}
  .footer-bottom a:hover{color:#fff;}
  .footer-legal{display:flex;gap:22px;flex-wrap:wrap;}

  /* reveal-on-scroll */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}