/* =========================================================
     QUILACO — Design tokens
     Colores extraídos del manual de marca real (logo enviado):
       Naranja marca: #F9B233
       Negro marca:   #000000
       Blanco marca:  #FFFFFF
     El resto son neutros de apoyo derivados para tipografía,
     fondos y superficies — reemplázalos aquí si tu manual de
     marca define otros tonos exactos.
     ========================================================= */
  :root{
    --orange: #f9b233;
    --orange-dark: #dd9615;
    --black: #000000;
    --ink: #1c1a18;        /* fondo oscuro principal (secciones dark) */
    --ink-2: #262320;      /* superficie sobre --ink (tarjetas) */
    --ink-3: #34302b;      /* borde / separador sobre --ink */
    --white: #ffffff;
    --offwhite: #f7f5f1;   /* fondo secciones claras alternas */
    --line: #e7e2da;       /* separadores sobre fondo claro */
    --text: #1c1a18;
    --text-muted: #6b6259;
    --text-on-dark: #f4f1ec;
    --text-on-dark-muted: #b6ada2;

    /* Saira: sans geometrica cuadrada, contraformas de rectangulo redondeado.
       Es la familia del logotipo (Eurostile). Poppins tenia la O circular. */
    --font-head: 'Saira', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --maxw: 1180px;
    --radius: 10px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  /* el reset no cubria figure: el navegador le pone margin:1em 40px, y eso
     dejaba las fotos de la galeria a la mitad del ancho de su columna */
  figure, figcaption{ margin:0; }
  html{ scroll-behavior: smooth; }
  /* el nav es fijo: sin esto los titulos quedan tapados al saltar por ancla */
  section[id]{ scroll-margin-top: 86px; }
  body{
    margin:0;
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  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-head); margin:0; line-height:1.15; letter-spacing:-0.01em; }
  p{ margin:0; }
  section{ position:relative; }
  .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 28px; }

  .eyebrow{
    display:inline-block;
    font-family: var(--font-head);
    font-size: 13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color: var(--orange-dark);
    margin-bottom:14px;
  }
  section.on-dark .eyebrow{ color: var(--orange); }

  h2.section-title{ font-size: clamp(26px, 3.4vw, 38px); font-weight:700; color: var(--text); max-width: 640px; }
  section.on-dark h2.section-title{ color: var(--white); }
  .section-sub{ margin-top:14px; max-width: 620px; color: var(--text-muted); font-size:16.5px; }
  section.on-dark .section-sub{ color: var(--text-on-dark-muted); }
  .section-head{ margin-bottom:44px; }
  /* cabecera con enlace a la derecha (solo donde se declara .with-action) */
  .section-head.with-action{
    display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .section-head.with-action > div{ min-width:0; }
  .link-more{
    display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
    font-family:var(--font-head); font-weight:700; font-size:14px;
    color:var(--text); padding:12px 0; min-height:44px;
    border-bottom:2px solid var(--orange);
    transition: gap .2s ease, color .2s ease;
  }
  .link-more:hover{ gap:14px; color:var(--orange-dark); }
  .link-more svg{ width:17px; height:17px; color:var(--orange-dark); }
  section.on-dark .link-more{ color:var(--white); }
  @media (max-width:760px){
    .section-head.with-action{ gap:18px; }
    .link-more{ font-size:13.5px; }
  }
  .section-pad{ padding: 88px 0; }
  @media (max-width:720px){ .section-pad{ padding:64px 0; } }

  .btn{
    display:inline-flex; align-items:center; gap:9px;
    font-family: var(--font-head); font-weight:600; font-size:15px;
    padding: 14px 26px; border-radius: 999px; border:1.5px solid transparent;
    cursor:pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn svg{ width:16px; height:16px; flex-shrink:0; }
  .btn-primary{ background: var(--orange); color: var(--black); }
  .btn-primary:hover{ background: var(--orange-dark); }
  .btn-outline{ border-color: rgba(255,255,255,.35); color: var(--white); }
  .btn-outline:hover{ border-color: var(--white); }
  .btn-outline-dark{ border-color: rgba(28,26,24,.25); color: var(--text); }
  .btn-outline-dark:hover{ border-color: var(--text); }

  /* ---------- NAV ---------- */
  header.nav{
    position: fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(28,26,24,.0);
    border-bottom: 1px solid rgba(255,255,255,0);
    transition: background .25s ease, border-color .25s ease, padding .25s ease;
    padding: 20px 0;
  }
  header.nav.scrolled{
    background: rgba(20,18,17,.92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 12px 0;
  }
  header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  header.nav .brand{ display:flex; align-items:center; min-height:46px; }
  header.nav .brand img{ height:46px; width:auto; }
  header.nav nav.links{ display:flex; align-items:center; gap:34px; }
  header.nav nav.links a{
    font-family: var(--font-head); font-size:14.5px; font-weight:500;
    color: var(--text-on-dark-muted); transition: color .15s ease;
  }
  header.nav nav.links a:hover{ color: var(--white); }
  .mobile-menu-cta{ display:none; }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:none; border:none; cursor:pointer;
    /* 44x44: minimo real para que el dedo acierte */
    width:44px; height:44px; margin-right:-10px; padding:0;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span{ width:22px; height:2px; background: var(--white); display:block; border-radius:2px; transition: transform .28s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 900px){
    /* OJO: acotado a header.nav — el footer tambien usa <nav class="links">
       y sin acotar se le aplicaba position:fixed + translateX(100%),
       o sea el menu del footer quedaba fuera de pantalla en mobile. */
    header.nav nav.links{
      position:fixed; top:0; right:0; width:78%; max-width:340px;
      /* 100vh miente en iOS Safari por la barra de direcciones; dvh es la altura real */
      height:100vh; height:100dvh;
      background: var(--ink); flex-direction:column; align-items:stretch; justify-content:center;
      gap:6px; padding: 40px 34px; transform: translateX(100%); transition: transform .3s ease;
      border-left:1px solid var(--ink-3); overflow-y:auto;
    }
    header.nav nav.links.open{ transform: translateX(0); }
    header.nav nav.links a{
      font-size:19px; color: var(--text-on-dark);
      /* cada link se toca completo, no solo el texto */
      display:flex; align-items:center; min-height:52px; padding:4px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    header.nav nav.links a:last-of-type{ border-bottom:none; }
    /* capa oscura detras del menu: tocarla lo cierra */
    .nav-backdrop{
      /* z DEBAJO del header (z-100): el drawer y el toggle viven dentro del
         header, y con el backdrop encima ninguno de los dos recibe el toque. */
      position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55);
      opacity:0; pointer-events:none; transition:opacity .3s ease;
      -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    }
    body.menu-open .nav-backdrop{ opacity:1; pointer-events:auto; }
    /* el fondo no debe scrollear mientras el menu esta abierto */
    body.menu-open{ overflow:hidden; }
    /* el toggle va sobre el drawer (mismo stacking context del header):
       si queda debajo, el menu no se puede cerrar con el mismo boton. */
    .nav-cta{ position:relative; z-index:2; }
    .nav-toggle{ display:flex; }
    .nav-cta-btn{ display:none; }
    .mobile-menu-cta{
      display:inline-flex; justify-content:center; margin-top:20px;
      min-height:52px; border-bottom:none !important;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    background: var(--ink);
    color: var(--text-on-dark);
    padding: 168px 0 96px;
    overflow:hidden;
    position:relative;
  }
  .hero::before{
    /* degradado de legibilidad + patron topografico, POR ENCIMA de la foto */
    content:"";
    position:absolute; inset:0; z-index:1;
    background-image:
      linear-gradient(100deg, rgba(12,11,10,.93) 0%, rgba(12,11,10,.80) 44%, rgba(12,11,10,.34) 100%),
      radial-gradient(circle at 82% 18%, rgba(249,178,51,.13), transparent 42%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1.4'%3E%3Cpath d='M-20 60 C 80 10, 160 110, 260 60 S 440 10, 520 60'/%3E%3Cpath d='M-20 120 C 80 70, 160 170, 260 120 S 440 70, 520 120'/%3E%3Cpath d='M-20 180 C 80 130, 160 230, 260 180 S 440 130, 520 180'/%3E%3Cpath d='M-20 240 C 80 190, 160 290, 260 240 S 440 190, 520 240'/%3E%3Cpath d='M-20 300 C 80 250, 160 350, 260 300 S 440 250, 520 300'/%3E%3Cpath d='M-20 360 C 80 310, 160 410, 260 360 S 440 310, 520 360'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 420px 420px;
    pointer-events:none;
  }
  @media (max-width: 760px){
    .hero{ padding: 132px 0 76px; }
    .hero-bg{ background-image:url("/assets/hero-obra-mobile.jpg?v=2"); background-position:center; }
    .hero::before{
      background-image:
        linear-gradient(180deg, rgba(12,11,10,.88) 0%, rgba(12,11,10,.62) 46%, rgba(12,11,10,.90) 100%),
        radial-gradient(circle at 82% 12%, rgba(249,178,51,.12), transparent 46%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3C/svg%3E");
    }
  }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-inner{ max-width: 900px; }
  .hero h1{
    font-size: clamp(36px, 6.6vw, 74px); font-weight:800; color:var(--white);
    text-transform: uppercase;
    /* en mayuscula no hay descendentes: se puede cerrar mucho mas el interlineado */
    line-height: 0.94;
    letter-spacing: -0.005em;
    margin: 20px 0 26px;
  }
  .hero h1 .p{ display:block; }
  .hero h1 em{ font-style:normal; color: var(--orange); }
  @media (max-width: 620px){
    /* en pantalla angosta la 2da pieza no cabe en una linea: en vez de partirse
       a mitad de frase, se abre en tres piezas cortas y controladas */
    .hero h1 .w, .hero h1 em{ display:block; }
  }
  .hero p.lead{
    font-size: clamp(16px, 1.7vw, 19px); color: var(--text-on-dark-muted);
    line-height: 1.5;
    max-width: 600px; margin-bottom: 40px;
  }
  /* sobre texto gris, poner solo peso no destaca: hay que subir el contraste */
  .hero p.lead strong{ color: var(--white); font-weight:600; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:64px; }

  .capability-strip{
    display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--ink-3);
    padding-top: 30px;
  }
  .capability-strip .cap{
    flex:1 1 200px; padding: 0 26px 0 0; margin-right:26px; border-right:1px solid var(--ink-3);
    display:flex; align-items:center; gap:12px;
  }
  .capability-strip .cap:last-child{ border-right:none; }
  .capability-strip svg{ width:22px; height:22px; color: var(--orange); flex-shrink:0; }
  .capability-strip span{ font-family: var(--font-head); font-weight:600; font-size:14.5px; color: var(--text-on-dark); }
  @media (max-width: 760px){
    .capability-strip .cap{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--ink-3); padding:16px 0; margin-right:0; }
  }

  /* ---------- QUIENES SOMOS ---------- */
  .about-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:stretch; }
  @media (max-width: 860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-grid p + p{ margin-top:16px; }
  .about-grid .body-text{ color: var(--text-muted); font-size:16.5px; max-width:540px; }
  .about-grid .body-text strong{ color: var(--text); font-weight:600; }

  .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
  .badge-row span{
    font-family: var(--font-head); font-size:13px; font-weight:600;
    padding: 9px 16px; border-radius:999px; background: var(--offwhite); border:1px solid var(--line); color: var(--text);
  }

  .photo-frame{
    /* en 2 columnas la foto acompaña la altura del texto en vez de imponer
       su propia proporcion, que la dejaba mucho mas alta que la columna */
    height:100%; min-height:400px; border-radius: var(--radius); overflow:hidden;
    background: var(--ink);
    display:flex; align-items:flex-end; padding:22px; position:relative;
  }
  @media (max-width: 860px){
    /* en una sola columna ya no hay texto al lado con que igualarse */
    .photo-frame{ height:auto; min-height:0; aspect-ratio: 4/3; }
  }
  .photo-frame > img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .photo-frame::after{
    /* degradado inferior para que el pie de foto se lea sobre la imagen */
    content:"";
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(to top, rgba(12,11,10,.78) 0%, rgba(12,11,10,.12) 46%, transparent 72%);
  }
  .photo-frame .tag{
    position:relative; z-index:1;
    font-family: var(--font-head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
    color: var(--text-on-dark); background: rgba(0,0,0,.5); padding:9px 14px; border-radius:8px;
    border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px);
  }

  .body-text .lead-in{
    font-size: clamp(17.5px, 2vw, 20px); line-height:1.55; color: var(--text);
    font-weight:500;
  }
  .body-text .lead-in strong{ font-weight:700; }

  /* ---------- EQUIPO ---------- */
  .equipo{
    margin-top:64px; padding-top:40px; border-top:1px solid var(--line);
    display:grid; grid-template-columns: repeat(2, 1fr); gap:44px;
  }
  .equipo h4{
    font-family:var(--font-head); font-weight:700; font-size:11.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--orange-dark);
    margin-bottom:20px;
  }
  .persona{ padding:16px 0; border-bottom:1px solid var(--line); }
  .persona:last-child{ border-bottom:none; }
  .persona b{
    display:block; font-family:var(--font-head); font-weight:700;
    font-size:16.5px; color:var(--ink);
  }
  .persona .cargo{ display:block; margin-top:4px; font-size:14px; color:var(--text-muted); }
  .persona .titulo{
    display:block; margin-top:6px; font-size:13.2px; color:var(--muted, #8d857b);
    font-family:var(--font-head); font-weight:600;
  }
  @media (max-width:760px){
    .equipo{ grid-template-columns:1fr; gap:32px; margin-top:44px; padding-top:32px; }
    .persona b{ font-size:16px; }
  }

  /* ---------- SERVICIOS ---------- */
  /* 2x2 en vez de 3 columnas: son 4 areas reales, y de paso rompe la
     grilla de tres columnas iguales, que es un patron muy de plantilla */
  .cards-3{ display:grid; grid-template-columns: repeat(2, 1fr); gap:26px; }
  @media (max-width: 900px){ .cards-3{ grid-template-columns:1fr; } }
  .service-card{
    background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
    padding: 34px 30px; display:flex; flex-direction:column;
  }
  .service-card .num{
    font-family: var(--font-head); font-weight:800; font-size:14px; color:var(--white);
    width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--black) 50%, var(--orange) 50%);
    margin-bottom:22px;
  }
  .service-card h3{ font-size:20px; font-weight:700; margin-bottom:14px; }
  .service-card ul{ display:flex; flex-direction:column; gap:9px; margin-top:auto; padding-top:6px; }
  .service-card li{ display:flex; gap:10px; font-size:14.8px; color: var(--text-muted); align-items:flex-start; }
  .service-card li svg{ width:15px; height:15px; color: var(--orange-dark); flex-shrink:0; margin-top:3px; }

  .callout{
    margin-top:34px; padding:22px 26px; border-radius: var(--radius);
    background: var(--ink); color: var(--white);
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .callout svg{ width:24px; height:24px; color: var(--orange); flex-shrink:0; }
  .callout p{ font-family: var(--font-head); font-weight:600; font-size:16px; }
  .callout span{ color: var(--text-on-dark-muted); font-weight:400; font-family: var(--font-body); font-size:14.5px; display:block; margin-top:3px; }

  /* ---------- MAQUINARIA ---------- */
  .fleet-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
  @media (max-width: 980px){ .fleet-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .fleet-grid{ grid-template-columns: 1fr; } }
  .fleet-card{
    background: var(--ink-2); border:1px solid var(--ink-3); border-radius: var(--radius);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .fleet-card .shot{ position:relative; aspect-ratio:16/9.6; overflow:hidden; background:#2a2724; }
  .fleet-card .shot img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .fleet-card:hover .shot img{ transform: scale(1.06); }
  .fleet-card .shot::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(20,18,17,.9) 0%, rgba(20,18,17,.15) 46%, transparent 72%);
  }
  .fleet-card .shot figcaption{
    position:absolute; left:14px; right:14px; bottom:11px; z-index:2;
    font-family:var(--font-head); font-weight:600; font-size:11.5px; letter-spacing:.05em;
    text-transform:uppercase; color:#e6ddd2;
  }
  .fleet-card .txt{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
  .fleet-card h4{ font-size:15.5px; font-weight:700; color:var(--white); margin-bottom:12px; font-family:var(--font-head); }
  .fleet-card ul{ display:flex; flex-direction:column; gap:6px; }
  .fleet-card li{ font-size:13.6px; color: var(--text-on-dark-muted); }
  .fleet-card li b{ color: var(--text-on-dark); font-weight:600; }
  .fleet-note{
    margin-top:26px; font-size:13.8px; color: var(--text-on-dark-muted);
    border-top:1px solid var(--ink-3); padding-top:22px;
  }

  /* ---------- MODALIDADES ---------- */
  .cards-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
  @media (max-width: 980px){ .cards-4{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .cards-4{ grid-template-columns: 1fr; } }
  .modal-card{ padding:26px 4px; border-top:3px solid var(--orange); }
  .modal-card .ico{
    width:38px; height:38px; border-radius:9px; background:#fff6e6;
    display:flex; align-items:center; justify-content:center; color:var(--orange-dark);
  }
  .modal-card .ico svg{ width:21px; height:21px; }
  .modal-card h4{ font-size:17px; font-weight:700; margin:16px 0 10px; }
  .modal-card p{ font-size:14.3px; color:var(--text-muted); }

  /* ---------- DIFERENCIADORES ---------- */
  .diff-list{ display:flex; flex-direction:column; }
  .diff-item{
    padding: 26px 0; border-bottom:1px solid var(--line);
  }
  .diff-item:first-child{ border-top:1px solid var(--line); }
  .diff-item h4{ font-size:18px; font-weight:700; margin-bottom:8px; }
  .diff-item p{ color: var(--text-muted); font-size:15px; max-width:560px; }

  /* ---------- COBERTURA ---------- */
  #cobertura{ position:relative; overflow:hidden; }
  #cobertura .wrap{ position:relative; z-index:1; }
  /* silueta de Chile de fondo, trazada desde coordenadas reales.
     Va difuminada para que no compita con el texto. */
  .mapa-chile{
    position:absolute; right:6%; top:50%; transform:translateY(-50%);
    height:118%; width:auto; z-index:0; pointer-events:none;
    opacity:.5; filter:blur(1.1px);
  }
  .chile-silueta{ fill:var(--line); }
  .chile-franja{ fill:var(--orange); opacity:.55; }
  .chile-borde{ fill:none; stroke:var(--muted, #b9b0a5); stroke-width:1.1; opacity:.45; }
  @media (max-width:900px){
    .mapa-chile{ right:-4%; height:96%; opacity:.32; }
  }
  .coverage-flow{ display:flex; align-items:center; gap:0; flex-wrap:wrap; margin-top:40px; }
  .coverage-step{
    background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius);
    padding:22px 24px; flex:1 1 220px; min-width:220px;
  }
  .coverage-step b{ display:block; font-family:var(--font-head); font-weight:700; font-size:16px; margin-bottom:6px; }
  .coverage-step span{ font-size:13.6px; color:var(--text-muted); }
  .coverage-step.active{ border-color: var(--orange); background: #fff9ee; }
  .coverage-arrow{ flex:0 0 auto; width:44px; display:flex; align-items:center; justify-content:center; color: var(--orange-dark); }
  .coverage-arrow svg{ width:22px; height:22px; }
  @media (max-width:760px){
    .coverage-flow{ flex-direction:column; align-items:stretch; margin-top:28px; }
    /* en columna, el "flex:1 1 220px" del desktop aplicaba los 220px a la
       ALTURA y ademas las hacia crecer: cajas enormes y medio vacias */
    .coverage-step{ flex:0 0 auto; min-width:0; padding:16px 18px; }
    .coverage-step b{ font-size:15px; margin-bottom:3px; }
    .coverage-step span{ font-size:13px; }
    .coverage-arrow{ width:100%; height:26px; transform:rotate(90deg); }
  }

  /* ---------- CONTACTO ---------- */
  .contact-band{
    background: linear-gradient(120deg, var(--ink) 0%, #2a251f 100%);
    color: var(--white); border-radius: 18px; padding: 64px 56px; position:relative; overflow:hidden;
  }
  @media (max-width:720px){ .contact-band{ padding:44px 26px; } }
  .contact-band::before{
    content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%;
    background: radial-gradient(circle, rgba(249,178,51,.25), transparent 70%);
  }
  .contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; position:relative; z-index:1; }
  @media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
  .contact-band h2{ font-size: clamp(26px,3.2vw,36px); font-weight:700; color:var(--white); max-width:480px; }
  .contact-band .section-sub{ color: var(--text-on-dark-muted); margin-top:14px; }
  .contact-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }

  .contact-cards{ display:flex; flex-direction:column; gap:14px; }
  .contact-card{
    display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
    background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  }
  .contact-card svg{ width:20px; height:20px; color:var(--orange); flex-shrink:0; margin-top:2px; }
  .contact-card b{ display:block; font-family:var(--font-head); font-size:14.5px; font-weight:600; margin-bottom:3px; }
  .contact-card span{ font-size:13.8px; color: var(--text-on-dark-muted); }

  /* ---------- FORMULARIO DE COTIZACION ---------- */
  .cotizar{
    margin-top:32px; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px 18px;
  }
  .campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
  .campo-ancho{ grid-column:1 / -1; }
  .cotizar label{
    font-family:var(--font-head); font-weight:600; font-size:13px;
    color:var(--text-on-dark-muted); letter-spacing:.02em;
  }
  .cotizar label .opc{ font-weight:500; color:#6f675e; }
  .cotizar input, .cotizar select, .cotizar textarea{
    font-family:var(--font-body); font-size:15px; color:var(--white);
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
    border-radius:9px; padding:12px 14px; min-height:48px; width:100%;
    transition:border-color .18s ease, background .18s ease;
  }
  .cotizar textarea{ min-height:88px; resize:vertical; line-height:1.5; }
  .cotizar select{ appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b6ada2' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
  .cotizar input::placeholder, .cotizar textarea::placeholder{ color:#6f675e; }
  .cotizar input:focus, .cotizar select:focus, .cotizar textarea:focus{
    outline:none; border-color:var(--orange); background:rgba(255,255,255,.09);
  }
  .cotizar .invalido{ border-color:#e06d5f; }
  .form-error{ grid-column:1 / -1; color:#f0a196; font-size:14px; margin-top:-4px; }
  .form-acciones{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
  @media (max-width:760px){
    .cotizar{ grid-template-columns:1fr; }
    .form-acciones .btn{ width:100%; justify-content:center; }
  }

  /* ---------- FOOTER ---------- */
  footer{ background: var(--black); padding:64px 0 28px; }
  .footer-top{
    display:grid; grid-template-columns: 1.35fr 1fr 1.25fr; gap:52px;
    padding-bottom:40px; border-bottom:1px solid #262626;
  }
  footer img{ height:40px; }
  .footer-brand p{ font-size:14px; line-height:1.65; color:#9a938a; margin-top:18px; max-width:34ch; }
  .footer-brand .base{ font-size:13px; color:#736c62; margin-top:14px; }
  .footer-col h5{
    font-family:var(--font-head); font-weight:700; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:#F9B233; margin-bottom:16px;
  }
  footer nav.links{ display:flex; flex-direction:column; gap:11px; }
  footer nav.links a{ font-size:14px; color:#9a938a; }
  footer nav.links a:hover{ color:var(--white); }
  .footer-contact{ display:flex; flex-direction:column; gap:11px; }
  .footer-contact a{ display:flex; align-items:center; gap:11px; font-size:14px; color:#cdc5ba; }
  .footer-contact a:hover{ color:var(--white); }
  .footer-contact svg{ width:16px; height:16px; flex:0 0 16px; color:#F9B233; }
  .btn-vcard{
    display:inline-flex; align-items:center; gap:10px; margin-top:20px;
    font-family:var(--font-head); font-weight:700; font-size:13.5px;
    padding:13px 18px; border-radius:9px; min-height:46px;
    border:1.5px solid #3a352f; color:var(--white);
    transition: border-color .18s ease, background .18s ease;
  }
  .btn-vcard:hover{ border-color:var(--orange); background:rgba(249,178,51,.08); }
  .btn-vcard svg{ width:17px; height:17px; color:var(--orange); }
  .btn-vcard span small{ display:block; font-weight:500; font-size:11.5px; color:#8d857b; letter-spacing:0; }
  .cobertura-pie{
    padding-top:22px; font-size:12.5px; line-height:1.6; color:#5f584f; max-width:100%;
  }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; font-size:12.8px; color:#736c62; }
  @media (max-width: 900px){
    .footer-top{ grid-template-columns:1fr; gap:38px; }
  }

  /* La animacion solo se aplica si el JS esta vivo (html.js lo pone un script
     inline en el head). Sin esto, un JS que falla deja TODO el sitio invisible. */
  html.js .reveal{ opacity:0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
  html.js .reveal.in{ opacity:1; transform:none; }
  /* entrada escalonada: al bajar, las fotos aparecen una tras otra */
  html.js .stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
  html.js .stagger.in > *{ opacity:1; transform:none; }
  html.js .stagger.in > *:nth-child(1){ transition-delay:.00s }
  html.js .stagger.in > *:nth-child(2){ transition-delay:.10s }
  html.js .stagger.in > *:nth-child(3){ transition-delay:.20s }
  html.js .stagger.in > *:nth-child(4){ transition-delay:.30s }
  html.js .stagger.in > *:nth-child(5){ transition-delay:.40s }
  html.js .stagger.in > *:nth-child(6){ transition-delay:.50s }
  @media (prefers-reduced-motion: reduce){
    html.js .stagger > *, html.js .stagger.in > *{ opacity:1; transform:none; transition:none; }
  }
  @media (prefers-reduced-motion: reduce){
    html.js .reveal, html.js .reveal.in{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- PROYECTOS ---------- */
  .projects-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:26px; }
  .project-card{
    border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
    background: var(--white); display:flex; flex-direction:column;
  }
  .project-card .shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--line); }
  .project-card .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
  .project-card:hover .shot img{ transform: scale(1.035); }
  .project-card .kind{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    background: var(--orange); color:#000; padding:7px 12px; border-radius:6px;
  }
  .project-card .body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .project-card h3{ font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--ink); }
  .project-card p{ font-size:14.5px; line-height:1.65; color:var(--muted); }
  .project-card .meta{
    margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; gap:8px 20px;
  }
  .project-card .meta span{ font-size:12.5px; color:var(--muted); font-family:var(--font-head); font-weight:600; }
  .project-card .meta b{ color:var(--ink); font-weight:700; }

  /* ---------- GALERIA DE FAENA ---------- */
  .gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
  .gallery figure{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--line); }
  .gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
  .gallery figure:hover img{ transform: scale(1.05); }
  .gallery figcaption{
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 16px 13px;
    font-family:var(--font-head); font-weight:600; font-size:12.5px; color:#fff;
    background: linear-gradient(to top, rgba(12,11,10,.86), transparent);
  }

  @media (max-width: 900px){
    .projects-grid{ grid-template-columns: 1fr; }
    .gallery{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  }
  @media (max-width: 560px){
    .gallery{ grid-template-columns: 1fr 1fr; }
  }
  /* ---------- AJUSTES MOBILE ---------- */
  @media (max-width: 760px){
    /* 11-12px se lee mal en un celular al sol, en una obra */
    .gallery figcaption{ font-size:12.5px; padding:22px 12px 11px; }
    .project-card .kind{ font-size:12px; padding:8px 13px; }
    .project-card .meta{ gap:6px 0; flex-direction:column; }
    .project-card .meta span{ font-size:13.5px; }
    .photo-frame .tag{ font-size:13px; }
    /* links del footer: 21px de alto no se aciertan con el dedo */
    footer .links{ flex-direction:column; gap:0; width:100%; }
    footer .links a{ display:flex; align-items:center; min-height:48px; border-bottom:1px solid rgba(255,255,255,.07); }
    footer .links a:last-child{ border-bottom:none; }
    header.nav .brand img{ height:40px; }
    footer img{ height:36px; }
    /* los links de contacto directo tambien necesitan area de dedo */
    .footer-contact{ gap:0; }
    .footer-contact a{ min-height:48px; border-bottom:1px solid rgba(255,255,255,.07); }
    .footer-contact a:last-child{ border-bottom:none; }
    .btn-vcard{ width:100%; justify-content:center; }
    .footer-bottom{ font-size:13.5px; }
    /* solo quiebre de emergencia: hyphens:auto partia palabras como
       "in-corporarse" en los titulares, que se ve peor que el desborde */
    h1, h2, h3, .section-title{ overflow-wrap:break-word; hyphens:manual; }
  }
  /* Pantallas angostas (iPhone SE y similares).
     El correo es una cadena sin espacios de ~215px: forzaba el ancho minimo
     del grid de contacto y, con overflow:hidden en el band, cortaba el texto. */
  @media (max-width: 420px){
    .contact-band{ padding:38px 18px; }
    .contact-grid, .contact-cards, .contact-card{ min-width:0; }
    .contact-card{ padding-left:16px; padding-right:16px; }
    .contact-card > div{ min-width:0; }
    .contact-card b{ overflow-wrap:anywhere; word-break:break-word; }
    .contact-ctas .btn{ width:100%; justify-content:center; }
  }
  html{ -webkit-text-size-adjust:100%; }
  a, button{ -webkit-tap-highlight-color: rgba(249,178,51,.25); }

  /* ---------- PAGINA INTERNA (proyectos) ---------- */
  .page-head{
    background: var(--ink); color: var(--text-on-dark);
    padding: 150px 0 64px; position:relative; overflow:hidden;
  }
  .page-head::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 84% 16%, rgba(249,178,51,.14), transparent 44%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1.4'%3E%3Cpath d='M-20 60 C 80 10, 160 110, 260 60 S 440 10, 520 60'/%3E%3Cpath d='M-20 160 C 80 110, 160 210, 260 160 S 440 110, 520 160'/%3E%3Cpath d='M-20 260 C 80 210, 160 310, 260 260 S 440 210, 520 260'/%3E%3Cpath d='M-20 360 C 80 310, 160 410, 260 360 S 440 310, 520 360'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
  }
  .page-head .wrap{ position:relative; z-index:1; }
  .crumbs{
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
    font-family:var(--font-head); font-weight:600; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .crumbs a{ color:var(--text-on-dark-muted); min-height:34px; display:inline-flex; align-items:center; }
  .crumbs a:hover{ color:var(--white); }
  .crumbs span{ color:#5c554d; }
  .crumbs b{ color:var(--orange); font-weight:700; }
  .page-head h1{
    font-size: clamp(34px, 5.4vw, 58px); font-weight:800; color:var(--white);
    text-transform:uppercase; line-height:.96; letter-spacing:-.005em;
  }
  .page-sub{ margin-top:18px; max-width:620px; color:var(--text-on-dark-muted); font-size:16.5px; line-height:1.55; }

  .page-cta{
    margin-top:80px; padding:38px 40px; border-radius:var(--radius);
    background:var(--offwhite); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  }
  .page-cta h2{ font-size:clamp(20px,2.4vw,26px); font-weight:700; color:var(--ink); }
  .page-cta p{ margin-top:8px; color:var(--text-muted); font-size:15.5px; }
  @media (max-width:760px){
    .page-head{ padding:120px 0 48px; }
    .page-cta{ padding:28px 22px; }
    .page-cta .btn{ width:100%; justify-content:center; }
  }

  /* ============================================================
     MOVIMIENTO
     Solo se animan transform y opacity: son las unicas dos
     propiedades que el navegador compone sin repintar, y por eso
     no trepidan en un celular de gama media.
     Todo el bloque se apaga con prefers-reduced-motion al final.
     ============================================================ */

  /* --- entrada del hero al cargar (no depende del scroll) --- */
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    background-image:url("/assets/hero-obra.jpg?v=2");
    background-size:cover; background-position:center 30%;
    transform:scale(1.09); transform-origin:center;
  }
  html.js .hero-bg{ animation: bgSettle 2.8s cubic-bezier(.16,.8,.24,1) calc(var(--intro-delay, 0s) * .6) forwards; }
  @keyframes bgSettle{ to{ transform:scale(1); } }

  html.js .hero-inner > *{ opacity:0; transform:translateY(20px); }
  html.js .hero-inner > *{ animation: riseIn .8s cubic-bezier(.16,.8,.24,1) forwards; }
  html.js .hero-inner > *:nth-child(1){ animation-delay: calc(var(--intro-delay, 0s) + .10s) }
  html.js .hero-inner > *:nth-child(2){ animation-delay: calc(var(--intro-delay, 0s) + .20s) }
  html.js .hero-inner > *:nth-child(3){ animation-delay: calc(var(--intro-delay, 0s) + .30s) }
  html.js .hero-inner > *:nth-child(4){ animation-delay: calc(var(--intro-delay, 0s) + .40s) }
  html.js .capability-strip{ opacity:0; animation: riseIn .8s cubic-bezier(.16,.8,.24,1) calc(var(--intro-delay, 0s) + .55s) forwards; }
  @keyframes riseIn{ to{ opacity:1; transform:none; } }

  /* --- barra de progreso de lectura --- */
  .progress{
    position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
    background:var(--orange); transform:scaleX(0); transform-origin:0 50%;
    will-change:transform; pointer-events:none;
  }

  /* --- las fotos entran con un leve acercamiento --- */
  html.js .project-card .shot img,
  html.js .fleet-card .shot img,
  html.js .gallery img,
  html.js .photo-frame > img{
    transform:scale(1.07); transition:transform 1.1s cubic-bezier(.16,.8,.24,1);
  }
  html.js .in .project-card .shot img,
  html.js .in.project-card .shot img,
  html.js .in .fleet-card .shot img,
  html.js .in .gallery img,
  html.js .gallery.in img,
  html.js .in > .photo-frame > img,
  html.js .photo-frame.in > img{ transform:scale(1); }

  /* --- respuesta al toque: en mobile no hay hover --- */
  .btn:active, .link-more:active, .btn-vcard:active{ transform:scale(.975); }
  .btn, .link-more, .btn-vcard{ transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease, gap .2s ease; }
  .project-card, .fleet-card, .modal-card, .coverage-step{ transition: transform .3s cubic-bezier(.16,.8,.24,1), border-color .3s ease; }
  .project-card:hover, .fleet-card:hover{ transform:translateY(-4px); }

  /* --- los links del menu entran escalonados al abrirlo --- */
  @media (max-width: 900px){
    html.js header.nav nav.links a{ opacity:0; transform:translateX(18px); transition:opacity .35s ease, transform .4s cubic-bezier(.16,.8,.24,1); }
    html.js header.nav nav.links.open a{ opacity:1; transform:none; }
    html.js header.nav nav.links.open a:nth-child(1){ transition-delay:.06s }
    html.js header.nav nav.links.open a:nth-child(2){ transition-delay:.11s }
    html.js header.nav nav.links.open a:nth-child(3){ transition-delay:.16s }
    html.js header.nav nav.links.open a:nth-child(4){ transition-delay:.21s }
    html.js header.nav nav.links.open a:nth-child(5){ transition-delay:.26s }
    html.js header.nav nav.links.open a:nth-child(6){ transition-delay:.31s }
    html.js header.nav nav.links.open a:nth-child(7){ transition-delay:.36s }
  }

  /* --- apagado total: el sistema respeta la preferencia del usuario --- */
  @media (prefers-reduced-motion: reduce){
    html.js .hero-bg{ animation:none; transform:none; }
    html.js .hero-inner > *, html.js .capability-strip{ animation:none; opacity:1; transform:none; }
    html.js .project-card .shot img, html.js .fleet-card .shot img,
    html.js .gallery img, html.js .photo-frame > img{ transform:none; transition:none; }
    html.js header.nav nav.links a{ opacity:1; transform:none; transition:none; }
    .progress{ display:none; }
    .btn:active, .link-more:active, .btn-vcard:active{ transform:none; }
    .project-card:hover, .fleet-card:hover{ transform:none; }
  }

  /* ============================================================
     INTRO DE ENTRADA
     Es 100% CSS a proposito: si la animacion dependiera del JS y el
     JS fallara, la cortina se quedaria puesta y el sitio seria
     inaccesible. Asi se levanta sola pase lo que pase.
     ============================================================ */
  .intro{
    position:fixed; inset:0; z-index:300; background:var(--ink);
    display:grid; place-items:center;
    animation: introOut .75s cubic-bezier(.4,0,.2,1) 1.15s forwards;
  }
  .intro img{
    width:min(300px, 62vw); height:auto;
    opacity:0; transform:translateY(12px) scale(.97);
    animation: introIn .85s cubic-bezier(.16,.8,.24,1) .12s forwards;
  }
  @keyframes introIn{ to{ opacity:1; transform:none; } }
  /* visibility:hidden ademas de opacity: sin eso la capa seguiria
     interceptando los clics aunque no se vea */
  @keyframes introOut{ to{ opacity:0; visibility:hidden; } }

  /* el contenido del hero espera a que la cortina se levante */
  .has-intro{ --intro-delay: 1.15s; }
  html.sin-intro .intro{ display:none; }
  html.sin-intro .has-intro{ --intro-delay: 0s; }

  @media (prefers-reduced-motion: reduce){
    .intro{ display:none; }
    .has-intro{ --intro-delay: 0s; }
  }