:root{
    /* SISTEMA CROMÁTICO COMERCIAL (aprobado) — cada token tiene un rol
       comercial fijo, no decorativo: --ink es AUTORIDAD/ESTRUCTURA,
       --rust es IDENTIDAD/INTERACCIÓN, --amber es ACCIÓN COMERCIAL
       exclusiva, --paper es SUPERFICIE/DESCANSO. Ningún selector debe
       usar --amber fuera de un llamado a cotizar/WhatsApp real. */
    --ink: #23282B;         /* acero / grafito — autoridad, estructura */
    --ink-light: #2E3438;   /* acero mas claro — hover de superficies oscuras */
    --paper: #EDEAE2;       /* crema / hormigon claro, fondo general */
    --paper-line: #D9D4C7;  /* lineas sutiles sobre hormigon */
    --line: #CED2D4;        /* lineas neutras sobre acero (antes azuladas) */
    --amber: #E8A63B;       /* accion comercial exclusiva */
    --amber-dark: #C98A22;
    --rust: #A8492F;        /* oxido VASPAS — identidad / interaccion / autoridad institucional */
    --ink-text: #15181A;
    --muted: #5A6266;
    --radius: 4px;
    --ease: cubic-bezier(.4,0,.2,1);
    --shadow-sm: 0 1px 2px rgba(21,24,26,.08);
    --shadow-md: 0 8px 24px -12px rgba(21,24,26,.22);
    --shadow-amber: 0 6px 16px rgba(201,138,34,.28);
    --nav-h: 78px;          /* alto real de .nav .wrap (medido tras el lockup de 2 lineas), usado por el calculo de alto del Hero (R1) */
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink-text);
    font-family:'Public Sans', sans-serif;
    line-height:1.5;
  }
  h1,h2,h3{
    font-family:'Archivo', sans-serif;
    font-weight:900;
    letter-spacing:-0.015em;
    margin:0;
  }
  .wc-card-num, .how-num, .cap-term, .cap-result,
  .pain-num, .subs-num, .case-fact-label{
    font-variant-numeric:tabular-nums;
  }
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:2px;
    border-radius:2px;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit;}
  .wrap{
    max-width:1140px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:40;
    background:rgba(237,234,226,0.92);
    backdrop-filter:blur(6px);
    transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
  }
  .nav.nav--scrolled{
    box-shadow:var(--shadow-md);
    background:rgba(237,234,226,0.97);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    /* Alto pasa de fijo (64px) a definido por contenido: el lockup de 2
       líneas del logo (CONSTRUCTORA/VASPAS) necesita más alto que el
       nav-brand de una sola línea que tenía antes. --nav-h se recalculó
       contra el alto real medido (ver comentario junto a --nav-h en
       :root), de la que depende el sticky de .hero-content. */
    min-height:var(--nav-h);
    padding:12px 24px;
  }
  .nav::after{
    /* línea de cota, mismo lenguaje que .hero::after, ahora también en
       el punto más alto de la página — refuerza "plano técnico" desde
       el primer instante, no solo dentro del Hero. */
    content:"";
    display:block;
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background:repeating-linear-gradient(90deg, rgba(168,73,47,0.5) 0 8px, transparent 8px 16px);
  }
  .nav-brand{
    display:flex;
    flex-direction:column;
    gap:1px;
    line-height:1;
  }
  .nav-brand-top{
    font-size:10px;
    letter-spacing:0.16em;
    color:var(--rust);
    font-weight:600;
  }
  .nav-brand-bottom{
    font-family:'Archivo', sans-serif;
    font-weight:900;
    font-size:19px;
    letter-spacing:0.02em;
  }
  .nav-brand-bottom span{color:var(--rust);}
  .nav-links{
    display:flex; gap:28px; align-items:center;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    position:relative;
    padding-bottom:3px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    color:var(--ink-text);
    transition:color .15s var(--ease);
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:0; height:2px;
    background:var(--rust);
    transition:right .22s var(--ease);
  }
  .nav-links a:hover{ color:var(--rust); }
  .nav-links a:hover::after{ right:0; }
  .nav-cta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--amber);
    color:var(--ink-text);
    padding:9px 18px;
    border-radius:var(--radius);
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .nav-cta:hover{
    background:var(--amber-dark);
    transform:translateY(-1px);
    box-shadow:var(--shadow-amber);
  }
  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
  }

  .nav-burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:44px; height:44px;
    background:none;
    border:1px solid var(--paper-line);
    border-radius:6px;
    cursor:pointer;
  }
  .nav-burger span{
    display:block;
    width:18px; height:2px;
    margin:0 auto;
    background:var(--ink-text);
    transition:transform .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-burger:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:2px;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  @media (max-width:900px){
    .nav-burger{display:flex;}
  }

  .nav-mobile{
    display:flex;
    flex-direction:column;
    background:var(--paper);
    border-top:1px solid var(--paper-line);
    border-bottom:1px solid var(--paper-line);
  }
  .nav-mobile[hidden]{display:none;}
  .nav-mobile:not([hidden]){ animation:navMobileIn .28s var(--ease) both; }
  @keyframes navMobileIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  .nav-mobile a{
    text-decoration:none;
    color:var(--ink-text);
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-bottom:1px solid var(--paper-line);
  }
  .nav-mobile a:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:-2px;
  }
  .nav-mobile-cta{
    background:var(--amber);
    color:var(--ink-text) !important;
    text-align:center;
    border-bottom:none !important;
  }

  /* ---------- HERO (plano tecnico) ---------- */
  .hero{
    position:relative;
    background:var(--ink);
    color:var(--line);
  }
  .hero::after{
    /* linea de dimension decorativa en el borde inferior — es un
       borde decorativo (regla absoluta del ambar: no se usa aqui),
       pasa a oxido: identidad, no accion. */
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:2px;
    z-index:2;
    background:repeating-linear-gradient(90deg, rgba(168,73,47,0.55) 0 10px, transparent 10px 20px);
  }
  /* Modelo (rediseño validado por mockup, iteraciones Opción C → C1..C4.1):
     el Hero ya no tiene alto fijo por viewport. Crece con su contenido
     real. La columna izquierda (texto + CTA) se fija con position:sticky
     bajo el nav mientras la columna derecha —más alta, porque incluye el
     formulario completo sin scroll interno— se recorre con el scroll
     normal de la página. Un solo scroll, nunca dos. */
  .hero-inner{
    position:relative; z-index:3;
    display:flex;
    align-items:flex-start;
    /* Mismo ancho máximo que .wrap (1140px): el Hero comparte retícula con
       el resto del sitio en vez de usar un contenedor propio más ancho —
       antes terminaba 214px más a la derecha que wc-grid/pains-grid a
       1920px, medido. */
    max-width:1140px;
    margin:0 auto;
    padding-bottom:64px;
  }
  @media (max-width:1040px){
    .hero-inner{
      display:block;
      max-width:none;
      padding-bottom:0;
    }
  }
  .hero-content{
    flex:0 0 auto;
    width:440px;
    max-width:40vw;
    /* margin-left (no padding-left) para alinear con el logo del nav sin
       robarle ancho al contenido (R5). 100% en vez de 100vw: vw no
       descuenta el scrollbar en Chrome y desalineaba ~7.5px a 1920/1400px;
       100% usa el ancho real de .hero-inner, igual que .wrap se centra. */
    margin-left:max(24px, calc((100% - 1140px) / 2 + 24px));
    /* padding-left:0 — el texto (eyebrow/H1) debe arrancar en el borde
       del contenedor (= logo del nav), no 40px adentro (R5). Sin
       padding-bottom: ya no se centra verticalmente, no hace falta
       simetría arriba/abajo. */
    padding:56px 40px 0 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    /* Se fija bajo el nav mientras la columna derecha (más alta) sigue
       scrolleando — se libera sola cuando termina la fila, sin JS.
       top usa SOLO var(--nav-h): el offset de 56px ya lo aporta el
       padding-top de esta misma regla — sumarlo también en "top" lo
       duplicaría y desalinearía el eyebrow respecto de la esquina del
       ensamble derecho (bug real, detectado y corregido en el mockup). */
    position:sticky;
    top:var(--nav-h);
    align-self:flex-start;
  }
  @media (max-width:1040px){
    .hero-content{
      width:auto;
      max-width:none;
      margin-left:0;
      padding:44px 24px 0;
      position:static;
    }
  }
  .hero-visual{
    flex:1 1 auto;
    min-width:280px;
    padding:56px 40px 0;
  }
  @media (max-width:1040px){
    .hero-visual{
      flex:none;
      margin-top:28px;
      padding:0 24px;
    }
  }

  /* ---- ensamble de la columna derecha: aloja únicamente la tarjeta de
     evaluación (protagonista único, REG-001). ---- */
  .hero-assembly{
    width:100%;
    max-width:520px;
    margin-left:auto;
  }
  @media (max-width:1040px){
    .hero-assembly{ max-width:none; margin-left:0; }
  }

  @media (max-width:1040px){
    .hero-eval-col{ padding:0 0 40px; }
  }
  .hero-eval-col .eval-card{
    /* Alto natural, sin max-height ni overflow: el formulario completo
       (~804px) ya no necesita scroll propio — el Hero crece con él y el
       único scroll que existe es el de la página (ver .hero-inner).
       Mas aire interno (28px, gap 16px) para que la evaluación se sienta
       cómoda, no apretada — sin tocar contenido ni funcionamiento. */
    max-width:none;
    margin:0;
    padding:28px;
    gap:16px;
  }
  /* encabezado de la evaluacion cuando vive dentro de la tarjeta del Hero
     (mismo .eval-head que usan otras secciones — override solo en este contexto) */
  .hero-eval-col .eval-head{
    text-align:left;
    max-width:none;
    margin:0 0 18px;
  }
  .hero-eval-col .eval-head h2{
    font-size:clamp(19px, 2.1vw, 22px);
    line-height:1.2;
  }
  .hero-eval-col .eval-sub{
    font-size:13.5px;
    margin-top:8px;
  }
  .hero-eyebrow{
    /* placa de IDENTIDAD ("VASPAS E.I.R.L. · CONSTRUCTORA") — oxido, no
       ambar: el ambar queda reservado exclusivamente a la accion
       comercial. Relleno sutil + borde presente para que no se sienta
       apagada frente al H1, sin volverla brillante ni competir con él.
       Texto en un solo color/peso — placa de identidad uniforme, sin
       enfasis diferencial entre el nombre y "CONSTRUCTORA". */
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    line-height:1;
    color:var(--rust);
    font-weight:600;
    background:rgba(168,73,47,0.1);
    border:1px solid rgba(168,73,47,0.55);
    padding:8px 16px;
    border-radius:999px;
    margin-bottom:22px;
    text-align:center;
  }
  .hero-eyebrow::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:var(--rust);
    display:inline-block;
  }
  .hero h1{
    font-size:clamp(36px, 4.4vw, 52px);
    line-height:1.04;
    letter-spacing:-0.018em;
    color:#fff;
  }
  @media (min-width:1140px){
    /* "Resolvemos en terreno." no cabe en los 400px de columna que deja
       .hero-content por defecto (440px - 40px de padding-right). Se quita
       ese padding-right (el aire visual lo sigue dando el padding-left de
       .hero-visual) y se usa solo la holgura ya libre junto a la tarjeta
       (medida: 61-76px, .hero-assembly se mantiene en 520px sin cambios)
       para ensanchar la columna a 500px reales. Con ese ancho, 40px de
       H1 alcanza para la frase completa en una sola línea. */
    .hero-content{ width:500px; max-width:500px; padding-right:0; }
    .hero h1{ font-size:40px; }
  }
  .hero h1 em{
    /* identidad, no accion: si algun titulo llega a usar <em>, tampoco
       debe tomar prestado el ambar. */
    font-style:normal;
    color:var(--rust);
  }
  .hero p.lead{
    margin:24px 0 0;
    max-width:46ch;
    font-size:17px;
    color:rgba(206,210,212,0.85);
  }
  .hero-cta-row{
    display:flex; gap:16px; flex-wrap:wrap;
    margin-top:36px;
  }
  .hero-location{
    margin-top:28px;
    font-size:11.5px;
    color:var(--rust);
    letter-spacing:0.06em;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 22px;
    border-radius:var(--radius);
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
  }
  .btn-icon{
    flex:0 0 auto;
    width:16px; height:16px;
  }
  .btn-primary{
    /* accion comercial — el unico rol autorizado para ambar */
    background:var(--amber);
    color:#1a1204;
    box-shadow:var(--shadow-sm);
  }
  .btn-primary:hover{
    background:var(--amber-dark);
    transform:translateY(-1px);
    box-shadow:var(--shadow-amber);
  }
  .btn-primary:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
  .btn-ghost{
    /* #13: borde y fondo un poco mas presentes — se sentia apagado
       frente al primario ambar, sin llegar a competir con el (sigue sin
       usar ambar: eso queda exclusivo para la accion comercial primaria). */
    background:rgba(206,210,212,0.06);
    border-color:rgba(206,210,212,0.5);
    color:#fff;
  }
  .btn-ghost:hover{ background:rgba(206,210,212,0.12); border-color:rgba(206,210,212,0.8); transform:translateY(-1px); }
  .btn-outline:hover{ transform:translateY(-1px); }

  /* ---------- EVALUACIÓN INTERACTIVA ---------- */
  .eval-head{text-align:center; max-width:720px; margin:0 auto 32px;}
  .eyebrow-mini{
    display:inline-block;
    font-size:11.5px;
    color:var(--rust);
    letter-spacing:0.1em;
    font-weight:700;
    margin-bottom:10px;
  }
  .eval-head h2{
    font-size:clamp(24px, 3vw, 32px);
    color:var(--ink-text);
    line-height:1.12;
  }
  .eval-sub{
    color:#3F4547;
    margin-top:12px;
    font-size:15px;
  }
  .eval-card{
    max-width:440px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--paper-line);
    border-radius:8px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:13px;
    box-shadow:0 10px 28px rgba(21,24,26,0.09), 0 2px 6px rgba(21,24,26,0.05);
  }
  .eval-field label{
    display:block;
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.05em;
    margin-bottom:6px;
  }
  .eval-step-num{
    color:var(--rust);
    font-weight:600;
  }
  .eval-field select,
  .eval-field textarea,
  .eval-field input[type="text"]{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    font-family:'Public Sans', sans-serif;
    font-size:14.5px;
    background:#fff;
    color:var(--ink-text);
  }
  .eval-field select:focus,
  .eval-field textarea:focus,
  .eval-field input[type="text"]:focus{
    outline:2px solid var(--amber);
    outline-offset:1px;
  }
  .eval-submit{
    width:100%;
    justify-content:center;
    margin-top:4px;
  }

  .eval-cat-pills{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
    gap:8px;
  }
  .eval-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:44px;
    background:#fff;
    border:1px solid var(--paper-line);
    border-radius:8px;
    padding:8px 12px;
    font-family:'Public Sans', sans-serif;
    font-size:12.5px;
    font-weight:600;
    line-height:1.3;
    color:var(--ink-text);
    cursor:pointer;
  }
  .eval-pill.is-active{
    background:var(--amber);
    border-color:var(--amber);
    color:#1a1204;
  }
  .eval-pill:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:2px;
  }

  .eval-confirm{
    margin-top:6px;
    padding-top:18px;
    border-top:1px dashed var(--paper-line);
  }
  .eval-confirm[hidden]{display:none;}
  .eval-confirm-title{
    font-size:11px; color:var(--rust); letter-spacing:0.06em; margin-bottom:10px;
  }
  .eval-confirm-row{
    display:flex; justify-content:space-between; gap:12px;
    font-size:13.5px;
    padding:8px 0;
    border-bottom:1px dashed var(--paper-line);
  }
  .eval-confirm-row span{color:var(--muted);}
  .eval-confirm-row strong{color:var(--ink-text); text-align:right;}
  .eval-confirm-question{
    font-size:13px; color:var(--muted); margin:14px 0 12px;
  }
  .eval-confirm-actions{
    display:flex; gap:10px;
  }
  .eval-confirm-actions .btn{flex:1; justify-content:center; padding:11px 14px; font-size:14px;}

  .eval-contact-choice{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed var(--paper-line);
  }
  .eval-contact-label{
    font-size:11px; color:var(--rust); letter-spacing:0.06em; margin-bottom:10px;
  }
  .eval-contact-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .eval-contact-btn{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    width:100%;
    text-align:left;
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid var(--ink);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    font-family:'Public Sans', sans-serif;
    transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
  }
  .eval-contact-btn:hover{ background:var(--ink); color:#fff; transform:translateY(-1px); }
  .eval-contact-btn-name{
    font-weight:700;
    font-size:14.5px;
  }
  .eval-contact-btn-role{
    font-size:12px;
    color:var(--muted);
  }
  .eval-contact-btn:hover .eval-contact-btn-role{ color:rgba(255,255,255,0.75); }

  /* Mensaje de validacion (nombre obligatorio), reutilizado en la
     evaluacion y en el modal de identificacion. */
  .eval-field-error{
    font-size:12px;
    color:var(--rust);
    margin-top:6px;
  }
  .eval-field-error[hidden]{ display:none; }

  /* ---------- MODAL DE IDENTIFICACIÓN (CTA de WhatsApp fuera de la evaluación) ---------- */
  .wa-modal-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(21,24,26,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow-y:auto;
  }
  .wa-modal-overlay[hidden]{ display:none; }
  .wa-modal{
    position:relative;
    width:100%;
    max-width:640px;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    background:#fff;
    border-radius:8px;
    padding:28px;
    box-shadow:0 20px 50px rgba(21,24,26,0.3);
  }
  .wa-modal-close{
    position:absolute;
    top:14px; right:14px;
    width:28px; height:28px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    z-index:1;
  }
  .wa-modal-close:hover{ color:var(--ink-text); }
  .wa-modal-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }
  @media (min-width:700px){
    .wa-modal{ padding:32px; }
    .wa-modal-grid{
      grid-template-columns:1fr 1fr;
      gap:32px;
    }
  }
  .wa-modal-icon{
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(168,73,47,0.1);
    color:var(--rust);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
  }
  .wa-modal-icon svg{ display:block; width:20px; height:20px; }
  .wa-modal-eyebrow{
    font-size:11px;
    color:var(--rust);
    letter-spacing:0.08em;
    margin-bottom:8px;
  }
  .wa-modal h3{
    font-size:19px;
    line-height:1.3;
    color:var(--ink-text);
    margin-bottom:8px;
    padding-right:20px;
  }
  .wa-modal-sub{
    font-size:13.5px;
    color:var(--muted);
    line-height:1.5;
    margin-bottom:16px;
  }
  .wa-modal .eval-field{ margin-bottom:14px; }
  .wa-modal .btn{ width:100%; justify-content:center; margin-top:4px; }
  .wa-modal-contact-label{
    font-size:12.5px;
    color:var(--ink-text);
    font-weight:600;
    margin-bottom:2px;
  }
  .wa-modal-contact-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }
  .wa-modal-contact-option{ cursor:pointer; }
  .wa-modal-contact-option.is-selected{
    border-color:var(--rust);
    background:rgba(168,73,47,0.06);
  }
  .wa-modal-contact-option.is-selected .eval-contact-btn-name{ color:var(--rust); }
  .wa-modal-privacy{
    margin-top:18px;
    padding:14px;
    border-radius:var(--radius);
    background:var(--paper);
    border:1px solid var(--paper-line);
  }
  .wa-modal-privacy-title{
    font-size:13px;
    font-weight:700;
    color:var(--ink-text);
    margin-bottom:4px;
  }
  .wa-modal-privacy-text{
    font-size:12.5px;
    color:var(--muted);
    line-height:1.5;
  }
  .wa-modal-footnote{
    font-size:12px;
    color:var(--muted);
    text-align:center;
    margin-top:10px;
  }

  /* ---------- PROBLEMAS DEL CLIENTE ---------- */
  .pains{
    background:var(--paper);
    padding:32px 0 72px;
    border-bottom:1px dashed var(--paper-line);
  }
  .pains-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:40px;
  }
  @media (max-width:900px){
    .pains-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width:600px){
    .pains-grid{grid-template-columns:1fr;}
  }
  .pain-card{
    /* Sin caja: vive directamente sobre el fondo de la sección. El acento
       superior (mismo lenguaje que .case-card, con menor peso — 2px en
       vez de 4px, rust en vez de ámbar) marca cada bloque sin envolverlo
       en border+fondo+radio. La separación la da .pains-grid. */
    border-top:2px solid var(--rust);
    padding:18px 0 0;
    transition:transform .2s var(--ease);
  }
  .pain-card:hover{ transform:translateY(-2px); }
  .pain-num{
    display:block;
    font-size:12px;
    color:var(--rust);
    margin-bottom:10px;
  }
  .pain-card h3{
    font-family:'Public Sans', sans-serif;
    font-weight:700;
    font-size:16.5px;
    line-height:1.35;
    color:var(--ink-text);
    margin-bottom:8px;
  }
  .pain-card p{
    font-size:14px;
    color:var(--muted);
    line-height:1.55;
    margin:0;
  }

  .btn-outline{
    background:transparent;
    border-color:var(--ink);
    color:var(--ink);
  }
  .btn-outline:hover{background:var(--ink); color:#fff;}

  /* ---------- QUIÉNES SOMOS ----------
     Primera pieza de la BANDA 1 ("quién es y qué hace VASPAS"), que
     agrupa Quiénes somos + Qué ejecutamos + Cobertura bajo un mismo
     fondo y sin líneas divisorias internas, para que se lean como una
     sola composición continua en vez de tres capítulos aparte. El
     padding-bottom baja a 0: el cierre de la banda lo aporta .coverage;
     el espacio entre estas tres secciones ahora es el "gap interno" de
     40px (siguiente escalón del ritmo 8/16/24/40/64), no la suma de dos
     paddings completos de sección. */
  .about{
    background:var(--paper);
    padding:56px 0 0;
    text-align:center;
  }
  @media (max-width:1040px){
    .about{
      padding-top:48px;
    }
  }
  /* #9: BASE + COBERTURA agrupadas en Quiénes Somos usando el MISMO
     lenguaje de .tech-frame + divisor superior que ya usa Respaldos
     (.backing), para que ambas fichas de datos del sitio se lean como
     el mismo componente en vez de dos estilos distintos. */
  .about .tech-frame{
    display:inline-block;
    margin-top:20px;
    padding:28px 40px;
  }
  .about .tech-frame .about-facts{
    gap:24px 48px;
    max-width:none;
    margin:0;
  }
  .about .tech-frame .about-fact{
    border-top:2px solid var(--rust);
    padding-top:16px;
    max-width:280px;
  }
  .about-facts{
    /* 5 items desde la incorporación de Registro (MINVU) y Respaldo
       técnico (SISS) — max-width ampliado de 760 a 900px para que los
       valores más largos no fuercen columnas angostas dentro del
       flex-wrap. */
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px 40px;
    max-width:900px;
    margin:0 auto;
  }
  .about-fact{
    display:flex;
    align-items:flex-start;
    gap:10px;
    text-align:left;
    max-width:260px;
  }
  .about-fact-icon{
    flex:0 0 auto;
    width:20px; height:20px;
    margin-top:1px;
    color:var(--rust);
    transition:color .2s var(--ease), transform .2s var(--ease);
  }
  .about-fact:hover .about-fact-icon{ color:var(--ink); transform:scale(1.1); }
  .about-fact-text{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  /* ---------- QUÉ PODEMOS EJECUTAR ----------
     Cierre de la BANDA 1 (Quiénes somos + Qué ejecutamos). Antes seguía
     Cobertura aquí mismo; ahora Cobertura se movió al final de la
     página, así que esta sección pasa a ser el cierre real de la banda:
     gana padding-bottom:64px y la línea punteada que antes tenía
     Cobertura. */
  .services{
    background:var(--paper);
    padding:40px 0 64px;
    border-bottom:1px dashed var(--paper-line);
    text-align:center;
  }
  .services .eval-head{margin-bottom:36px;}
  .wc-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    align-items:start;
    gap:24px;
    text-align:left;
    margin-bottom:36px;
  }
  /* #10: 7 categorías en grid de 2 columnas dejan la última sola con un
     vacío al lado — la 7ª ocupa el ancho completo de la fila en vez de
     dejar ese hueco. Sin agregar ni quitar categorías. */
  .wc-grid .wc-card:last-child{
    grid-column:1 / -1;
  }
  @media (max-width:760px){
    .wc-grid{grid-template-columns:1fr;}
    .wc-grid .wc-card:last-child{ grid-column:auto; }
  }
  .wc-card{
    /* Sin relleno: vive directamente sobre el fondo de la sección (misma
       banda que Quiénes somos/Cobertura). Conserva borde + radio porque
       sigue siendo interactivo (acordeón + lista de trabajos), pero deja
       de leerse como tarjeta de producto. */
    background:transparent;
    border:1px solid var(--paper-line);
    border-radius:6px;
    overflow:hidden;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .wc-card:hover{ border-color:var(--rust); box-shadow:var(--shadow-md); }
  /* abierto/cerrado es un ESTADO de interaccion, no una accion
     comercial (el "Cotizar ->" de cada trabajo es el que se mantiene
     en ambar) — usa oxido, no ambar. */
  .wc-card.is-open{ border-color:var(--rust); box-shadow:var(--shadow-md); }
  .wc-card-head{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 20px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-family:'Public Sans', sans-serif;
  }
  .wc-card-num{margin-top:2px;}
  .wc-card-count,
  .wc-card-toggle{margin-top:1px;}
  .wc-card-head:focus-visible{outline:2px solid var(--amber); outline-offset:-2px;}
  .wc-card-num{
    /* Numeración con más protagonismo: refuerza "sistema de áreas de
       construcción" en vez de lista de servicios. */
    flex:0 0 auto;
    background:var(--ink);
    color:#fff;
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    font-family:'Archivo', sans-serif;
    font-weight:900;
    font-size:14px;
    transition:transform .2s var(--ease);
  }
  .wc-card:hover .wc-card-num{ transform:scale(1.06); }
  .wc-card-title{flex:1 1 auto; min-width:0;}
  .wc-card-title h3{
    font-family:'Public Sans', sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--ink-text);
    margin-bottom:4px;
  }
  .wc-card-title p{
    font-size:13px;
    color:var(--muted);
    margin:0;
    line-height:1.5;
  }
  .wc-card-count{
    flex:0 0 auto;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
  }
  .wc-card-toggle{
    flex:0 0 auto;
    width:26px; height:26px;
    border:1px solid var(--paper-line);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    line-height:1;
    color:var(--ink-text);
    transition:transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .wc-card-head[aria-expanded="true"] .wc-card-toggle{
    /* estado de interaccion (abierto), no accion — oxido */
    transform:rotate(45deg);
    border-color:var(--rust);
    color:var(--rust);
  }
  .wc-card-jobs{
    list-style:none;
    margin:0;
    padding:4px 20px 16px 60px;
    border-top:1px dashed var(--paper-line);
  }
  .wc-card-jobs[hidden]{display:none;}
  .wc-card-jobs li{
    padding:10px 0;
    border-bottom:1px dashed var(--paper-line);
  }
  .wc-card-jobs li:last-child{border-bottom:none;}
  .wc-card-jobs a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-decoration:none;
    font-size:14px;
    color:var(--ink-text);
    transition:color .15s var(--ease);
  }
  .wc-card-jobs a:hover{color:var(--rust);}
  .wc-card-jobs a::after{
    /* accion comercial real (abre WhatsApp) — se mantiene en ambar */
    content:"Cotizar →";
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--amber-dark);
    white-space:nowrap;
    transition:transform .15s var(--ease);
  }
  .wc-card-jobs a:hover::after{ transform:translateX(3px); }
  @media (max-width:600px){
    .wc-card-head{gap:12px; padding:16px;}
    .wc-card-count{display:none;}
    .wc-card-jobs{padding-left:16px;}
  }

  /* ---------- CAPACIDAD DE EJECUCIÓN ----------
     BANDA 2 nueva ("cómo estamos equipados para construir"): agrupa
     Capacidad de ejecución + Obras sanitarias bajo el mismo fondo, con
     una textura de plano técnico muy sutil (mismo recurso que .hero,
     adaptado a fondo claro) para reforzar obra/ingeniería en vez de
     "producto digital". Abre la banda: padding-top:64, sin borde. */
  .capacity{
    /* Un solo tono claro en toda la pagina: crema, no blanco puro —
       antes Capacidad/Sanitaria/Respaldos/Como ejecutamos vivian en
       #fff mientras Quienes somos/Nuestras Obras/Cobertura/Cotiza
       vivian en crema, y esa mezcla se leia como inconsistencia, no
       como sistema. La tarjeta del formulario del Hero sigue en
       blanco: es una superficie elevada, no una banda de fondo. */
    position:relative;
    background:var(--paper);
    padding:48px 0 0;
    text-align:center;
    border-bottom:1px dashed var(--paper-line);
  }
  /* Cuadricula de fondo eliminada en Capacidad/Sanitaria (secciones
     claras): generaba ruido visual. Se mantienen los tech-frame,
     esquinas oxido y lineas divisorias — solo se quita el patron
     decorativo de fondo. La grilla del Hero (.hero::before, fondo
     oscuro) y de Empresas y contratistas (.subs::before, fondo oscuro)
     no son "secciones claras" y quedan igual. */
  .capacity .wrap, .sanitary .wrap{ position:relative; z-index:1; }
  .capacity .eval-head{ margin-bottom:24px; }
  .capacity-equation{
    /* #11: quiebre de linea deliberado via .cap-linebreak (3 terminos +
       3 terminos/resultado) en vez de dejar que el wrap rompa donde
       caiga — con las 2 lineas de peso comparable, justify-content:center
       ya se lee como ecuacion tecnica, no como texto descuadrado. */
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 14px;
    max-width:640px;
    margin:0 auto;
  }
  .cap-linebreak{ flex-basis:100%; height:0; }
  .cap-term{
    font-family:'IBM Plex Mono', monospace;
    font-size:13.5px;
    letter-spacing:0.05em;
    color:var(--ink-text);
    border-top:2px solid var(--rust);
    padding:8px 4px 0;
    white-space:nowrap;
  }
  .cap-op{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--paper-line);
    font-weight:400;
  }
  .cap-op.cap-eq{ font-size:14px; color:var(--muted); margin:0 2px; }
  .cap-result{
    /* afirma una capacidad real ("EJECUCIÓN DE OBRA") — es autoridad,
       no una invitacion a hacer click, asi que usa oxido, no ambar. */
    font-family:'Archivo', sans-serif;
    font-weight:900;
    font-size:22px;
    color:var(--ink-text);
    border-bottom:2px solid var(--rust);
    padding-bottom:4px;
    white-space:nowrap;
  }
  .capacity-note{
    max-width:640px;
    margin:18px auto 0;
    font-size:14.5px;
    color:var(--muted);
    line-height:1.6;
  }
  @media (max-width:700px){
    /* El "+" no se oculta: se apila como su propia línea entre cada
       término, para que siga leyéndose como ecuación y no como lista. */
    .capacity-equation{ flex-direction:column; gap:10px; }
    .cap-op{ font-size:16px; }
    .cap-op.cap-eq{ margin:4px 0; }
  }

  /* ---------- OBRAS SANITARIAS + INGENIAUS ----------
     Cierre de la BANDA 2 (ver comentario en .capacity): mismo fondo y
     textura, gap interno de 40px arriba, cierre real con padding-bottom
     y línea punteada antes de Respaldos. */
  .sanitary{
    position:relative;
    background:var(--paper);
    padding:24px 0 0;
    text-align:center;
    border-bottom:1px dashed var(--paper-line);
  }
  .sanitary .eval-head{ margin-bottom:8px; }
  .sanitary-chain{
    /* #11: mismo criterio que .capacity-equation — quiebre deliberado
       via .chain-linebreak (3+3), manteniendo los 2 terminos destacados
       de VASPAS (CONSTRUCCIÓN / EJECUCIÓN EN TERRENO) juntos en la misma
       linea en vez de separados por un salto accidental. */
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px 10px;
    max-width:640px;
    margin:20px auto 0;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.04em;
    color:var(--muted);
  }
  .chain-linebreak{ flex-basis:100%; height:0; }
  .sanitary-chain .chain-vaspas{
    /* describe el proceso de VASPAS — informativo/autoridad, no accion */
    color:var(--ink-text);
    font-weight:700;
    border-bottom:2px solid var(--rust);
    padding-bottom:3px;
  }
  .chain-arrow{ color:var(--paper-line); font-size:13px; }
  .sanitary-partner{
    max-width:720px;
    margin:24px auto 0;
    font-size:11.5px;
    color:var(--muted);
    letter-spacing:0.02em;
  }
  .sanitary-partner a{
    color:var(--rust);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .sanitary-partner a:hover{ color:var(--ink-text); }
  @media (max-width:760px){
    .sanitary-chain{ flex-direction:column; gap:8px; }
    .chain-arrow{ transform:rotate(90deg); }
  }

  /* ---------- RESPALDOS ----------
     BANDA 3 ("confianza y proceso"): agrupa Respaldos + Cómo ejecutamos
     bajo fondo blanco — mismo criterio que la banda Experiencia+Cómo
     trabajamos que existía antes. Reutiliza el patrón de .about-fact
     (icono + etiqueta + valor) ya usado, sin inventar un componente
     nuevo. Solo MINVU + SISS, sin duplicar la identidad legal (ya vive
     en el footer). */
  .backing{
    background:var(--paper);
    padding:28px 0 0;
    text-align:center;
    border-bottom:1px dashed var(--paper-line);
  }
  .backing .about-facts{
    max-width:none;
    justify-content:center;
    gap:32px 48px;
  }
  .backing .about-fact{
    flex:1 1 260px;
    max-width:340px;
    border-top:2px solid var(--rust);
    padding-top:16px;
    align-items:flex-start;
  }
  .backing .case-fact-value{ font-size:17px; }

  /* Recurso visual propio: marca de esquina técnica, dos trazos rust en
     ángulo recto en esquinas opuestas de un panel — evoca las marcas de
     registro de planos técnicos y levantamientos de terreno. Se usa solo
     en 2 lugares (Capacidad, Respaldos) para seguir siendo un recurso
     reconocible, no decoración repetida. Este marco es también el
     mecanismo de jerarquía: los paneles enmarcados quedan visualmente por
     encima de Nuestras obras/Obras sanitarias/Cómo ejecutamos, que se
     mantienen sin recuadro. */
  .tech-frame{
    position:relative;
    border:1px solid var(--paper-line);
    padding:36px 40px;
    margin-top:32px;
  }
  /* #11: en Capacidad el marco quedaba mucho mas ancho que la ecuacion,
     dejando un vacio grande a la derecha — el marco ahora se ajusta al
     contenido (ancho de la ecuacion) en vez de llenar el wrap. .backing
     no se toca: sus 3 fichas si usan el ancho completo. */
  .capacity .tech-frame{
    display:inline-block;
    padding:28px 36px;
    margin-top:24px;
  }
  .tech-frame::before, .tech-frame::after{
    content:"";
    position:absolute;
    width:18px; height:18px;
    border-color:var(--rust);
    border-style:solid;
    border-width:0;
  }
  .tech-frame::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
  .tech-frame::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
  .capacity .tech-frame .capacity-equation{ margin-top:0; }
  .backing .tech-frame{ padding:28px 36px; }
  .backing .tech-frame .about-facts{ margin:0; }
  /* firma VASPAS en movimiento: el marco "se registra" al entrar en
     pantalla, como un instrumento que toma medida, en vez de aparecer
     ya dibujado — mismo trazo, con comportamiento nuevo. */
  .tech-frame.reveal-el::before, .tech-frame.reveal-el::after{ width:0; height:0; }
  .tech-frame.reveal-el.is-visible::before, .tech-frame.reveal-el.is-visible::after{
    width:18px; height:18px;
    transition:width .4s var(--ease) .1s, height .4s var(--ease) .1s;
  }
  .reveal-el{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .reveal-el.is-visible{ opacity:1; transform:translateY(0); }

  /* ---------- SUBCONTRATOS Y EJECUCIÓN ---------- */
  .subs{
    position:relative;
    overflow:hidden;
    background:var(--ink);
    color:var(--line);
    padding:48px 0;
  }
  .subs .wrap{ position:relative; z-index:1; }
  .subs-inner{
    /* #13: 0.95fr/1.05fr en vez de 1fr/1fr — el bloque izquierdo (titulo+
       parrafo+CTA) pesaba visualmente mas que la grilla derecha de 4
       items; se le da un poco mas de aire a la derecha para equilibrar. */
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:48px;
    align-items:center;
  }
  @media (max-width:860px){
    .subs-inner{grid-template-columns:1fr;}
  }
  .subs-copy h2{
    color:#fff;
    font-size:clamp(24px, 3vw, 30px);
    margin:12px 0 16px;
  }
  .subs-copy p{
    color:rgba(206,210,212,0.82);
    font-size:15px;
    line-height:1.6;
    max-width:44ch;
    margin-bottom:26px;
  }
  .subs-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 28px;
  }
  .subs-item{
    /* Sin caja: vive directamente sobre el fondo oscuro de la sección,
       igual criterio que .pain-card. Línea superior fina en vez de
       fondo+borde+radio completo. */
    border-top:1px solid rgba(206,210,212,0.2);
    padding:16px 0 0;
    transition:border-color .2s var(--ease), transform .2s var(--ease);
  }
  .subs-item:hover{ border-color:var(--rust); transform:translateY(-2px); }
  .subs-num{color:var(--rust); font-size:13px; font-weight:600;}
  .subs-item h3{
    font-family:'Public Sans', sans-serif;
    font-weight:700;
    color:#fff;
    font-size:15px;
    margin:8px 0 6px;
  }
  .subs-item p{
    font-size:13px;
    color:rgba(206,210,212,0.7);
    margin:0;
    line-height:1.5;
  }

  /* .case-fact-label / .case-fact-value se mantienen: siguen en uso
     dentro de .about-fact-text (Quiénes Somos y Respaldos). El resto de
     reglas de la antigua sección Experiencia (.experience, .case-card,
     .case-tag, .case-obj, .case-facts, .case-fact) se eliminó — sin
     referencias activas en el HTML tras quitar esa sección. */
  .case-fact-label{font-size:10.5px; color:var(--muted); letter-spacing:0.06em;}
  .case-fact-value{font-size:15px; font-weight:700; color:var(--ink-text);}

  /* ---------- CÓMO EJECUTAMOS ----------
     Cierre de la BANDA 3 (ver comentario en .backing): mismo fondo
     blanco, gap interno de 40px arriba. padding-bottom y línea punteada
     se mantienen porque este es el límite real de la banda — el punto
     donde empieza "Empresas y contratistas" (fondo oscuro). */
  .howwe{
    background:var(--paper);
    padding:24px 0 56px;
    border-bottom:1px dashed var(--paper-line);
  }
  .how-flow{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:0;
    margin-top:40px;
    position:relative;
  }
  .how-flow::before{
    /* #12: linea de conexion mas legible — de var(--paper-line) (muy
       tenue) a un contraste bajo pero perceptible, y de 1px a 2px.
       right:calc(20% - 13px) en vez de 13px — medido: en un grid de 5
       columnas iguales con el circulo alineado a la izquierda de su
       columna (no centrado), el centro del ultimo circulo cae al 80%
       del ancho del contenedor + 13px, no al borde derecho. Con
       right:13px la linea sobraba ~192px despues del circulo 05. */
    content:"";
    position:absolute;
    top:12px; left:13px; right:calc(20% - 13px); height:2px;
    background:rgba(35,40,43,0.15);
    z-index:0;
  }
  @media (max-width:900px){
    .how-flow{grid-template-columns:1fr; gap:22px;}
    /* la linea horizontal no aplica al layout apilado en 1 columna —
       el conector ahi es la flecha "↓" entre pasos. Sin esto quedaba
       un resto de linea junto al circulo 01. */
    .how-flow::before{ display:none; }
  }
  .how-step{
    position:relative;
    padding:0 18px 0 0;
  }
  .how-step:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-4px; top:0;
    color:var(--paper-line);
    font-size:18px;
  }
  @media (max-width:900px){
    .how-step:not(:last-child)::after{
      content:"↓";
      position:static;
      display:block;
      margin:14px 0 0;
      text-align:left;
    }
    .how-step{padding-right:0;}
  }
  .how-num{
    display:inline-block;
    position:relative;
    z-index:1;
    background:var(--paper);
    font-size:12px;
    color:var(--rust);
    border:1px solid var(--rust);
    border-radius:50%;
    width:26px; height:26px;
    line-height:24px;
    text-align:center;
    margin-bottom:12px;
  }
  .how-step h3{
    font-family:'Public Sans', sans-serif;
    font-weight:700;
    font-size:15px;
    color:var(--ink-text);
    margin-bottom:8px;
    line-height:1.3;
  }
  .how-step p{
    font-size:13px;
    color:var(--muted);
    line-height:1.55;
    margin:0;
  }
  /* ---------- COBERTURA ----------
     Ahora al final de la página, entre "Empresas y contratistas" (fondo
     oscuro) y "Cotiza" (fondo crema) — ya no continúa ninguna banda
     anterior, así que vuelve a un padding-top estándar de 64px en vez
     del gap interno de 40px que usaba cuando seguía a Qué ejecutamos. */
  .coverage{
    background:var(--paper);
    padding:40px 0 0;
    text-align:center;
  }
  .coverage-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    list-style:none;
    margin:28px 0 0;
    padding:0;
  }
  .coverage-list li{
    background:var(--paper);
    border:1px solid var(--paper-line);
    border-radius:999px;
    padding:9px 18px;
    font-size:13px;
    color:var(--ink-text);
    transition:border-color .18s var(--ease), color .18s var(--ease);
    cursor:default;
  }
  .coverage-list li:hover{ border-color:var(--rust); color:var(--rust); }

  /* ---------- CONTACTO / CTA FINAL ---------- */
  .contact-final{
    background:var(--ink);
    color:var(--line);
    padding:48px 0 48px;
    text-align:center;
  }
  .contact-final-inner{
    max-width:520px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .contact-final h2{
    color:#fff;
    font-size:clamp(24px, 3vw, 30px);
    margin:12px 0 14px;
  }
  .contact-final p{
    color:rgba(206,210,212,0.82);
    font-size:15px;
    margin-bottom:26px;
  }

  /* ---------- IDENTIDAD LEGAL (footer) ----------
     Discreto y corporativo, no una sección ni una tarjeta: continúa el
     mismo fondo oscuro de .contact-final (misma banda de cierre), solo
     separado por una línea fina. Texto pequeño y de bajo contraste —
     visible para quien lo busca, sin competir con el CTA de arriba. */
  .site-footer{
    background:var(--ink);
    border-top:1px solid rgba(206,210,212,0.15);
    padding:22px 0;
    text-align:center;
  }
  .site-footer-legal{
    margin:0;
    font-size:11px;
    letter-spacing:0.03em;
    color:rgba(206,210,212,0.5);
  }