:root{
    --bg:#FFFFFF; --surface:#F7F6F4; --surface-2:#F0EFEC;
    --border:rgba(20,24,31,.09); --border-strong:rgba(20,24,31,.16);
    --text-1:#14181F; --text-2:#5B6472; --accent:#E4271C; --accent-2:#B81E15; --success:#16A34A;
    --font:'Jost',system-ui,-apple-system,"Segoe UI",sans-serif;
--font-display:var(--font);
    --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:999px;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow:0 20px 40px -20px rgba(20,24,31,.14);
    --s-1:4px;--s-2:6px;--s-3:10px;--s-4:14px;--s-6:20px;--s-8:28px;--s-12:40px;--s-16:52px;--s-24:72px;
    color-scheme: light;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html{scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--bg); color:var(--text-1);
    font-family:var(--font);
    font-size:clamp(.9375rem,.35vw + .86rem,1rem);
    line-height:1.6; overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--font); font-weight:300; line-height:1.08; letter-spacing:-.02em; margin:0}
  h2{font-size:clamp(1.625rem,2.4vw + .9rem,2.25rem)}
  h3{font-size:clamp(1rem,.8vw + .75rem,1.1875rem); letter-spacing:-.01em; font-weight:700}
  p{margin:0}
  a{color:inherit}
  img,svg{max-width:100%; display:block}
  .container{max-width:1160px; margin-inline:auto; padding-inline:var(--s-4)}
  section{padding-block:var(--s-24)}
  @media (max-width:640px){ section{padding-block:var(--s-16)} }

  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:var(--s-2);
    color:var(--accent); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
    margin-bottom:var(--s-3);
  }
  .eyebrow::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--accent)}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
    padding:12px 22px; border-radius:var(--r-full); font-weight:600; font-size:.875rem;
    text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .btn:active{transform:scale(.97)}
  .btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 24px -10px rgba(228,39,28,.45)}
  .btn-primary:hover{background:var(--accent-2)}
  .btn-ghost{background:rgba(20,24,31,.04); border-color:var(--border-strong); color:var(--text-1)}
  .btn-ghost:hover{border-color:var(--text-1); background:rgba(20,24,31,.07)}
  .btn-block{width:100%}
  .btn-arrow{transition:transform .25s var(--ease)}
  .btn:hover .btn-arrow{transform:translate(2px,-2px)}

  /* Header */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding-top:env(safe-area-inset-top,0px);
    background:transparent; backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  }
  header.is-scrolled{
    background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
    border-bottom-color:var(--border);
  }
  body{padding-top:0}
  .nav{position:relative; display:flex; align-items:center; justify-content:space-between; height:76px}
  .logo{display:flex; align-items:center; gap:var(--s-2); font-family:var(--font); font-weight:700; font-size:1.0625rem; text-decoration:none}
  .logo-mark{display:none}
.hero-logo{
    position:absolute; z-index:1;
    top:calc(var(--s-6) + env(safe-area-inset-top,0px)); left:var(--s-8);
    width:150px; height:150px; object-fit:contain;
  }
  @media (max-width:640px){ .hero-logo{left:var(--s-4); width:80px; height:80px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))} }
  .nav-primary{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
   .nav-actions{display:flex; align-items:center; gap:var(--s-4)}
  .nav-tel{display:none}

  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:none; padding:8px; color:#fff;
    cursor:pointer; transition:color .3s var(--ease);
  }
  header.is-scrolled .menu-btn{color:var(--text-1)}

   /* Fondo atenuado detrás del panel */
  .menu-backdrop{
    position:fixed; inset:0; z-index:99; background:rgba(10,12,16,.6);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .menu-backdrop.is-open{opacity:1; pointer-events:auto}

  /* Panel de menú — desliza desde la derecha, ocupa la mitad en desktop */
  .mobile-menu{
    position:fixed; top:0; right:0; bottom:0; z-index:100; width:100%;
    background:var(--text-1); color:#fff;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:calc(var(--s-6) + env(safe-area-inset-top,0px)) var(--s-6) calc(var(--s-8) + env(safe-area-inset-bottom,0px));
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .mobile-menu.is-open{transform:translateX(0)}
       @media (min-width:640px){
    .mobile-menu{ width:40vw; padding-inline:var(--s-12) }
  }
  .mobile-menu-top{display:flex; justify-content:flex-end}
  .mobile-menu-close{
    display:flex; align-items:center; gap:var(--s-2); background:none; border:none; color:rgba(255,255,255,.75);
    font:inherit; font-size:.8125rem; cursor:pointer; padding:var(--s-2);
  }
  .mobile-menu-close span{text-decoration:underline; text-underline-offset:3px}
  .mobile-menu-links{display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.16); padding-top:var(--s-6)}
  .mobile-menu-links a{
    text-decoration:none; color:#fff; font-family:var(--font-display); font-weight:300; line-height:1.4;
    font-size:clamp(1.75rem,4.2vw,2.5rem); letter-spacing:-.01em;
    transition:color .25s var(--ease);
  }
  .mobile-menu-links a:hover{color:#F2B4AF}
  .mobile-menu-contact{border-top:1px solid rgba(255,255,255,.16); padding-top:var(--s-5); display:grid; gap:var(--s-2)}
  .mobile-menu-contact-link{
    display:inline-flex; align-items:center; gap:var(--s-2); text-decoration:none; color:#fff;
    font-size:1rem; font-weight:600;
  }
  .mobile-menu-contact a:not(.mobile-menu-contact-link){color:rgba(255,255,255,.55); text-decoration:none; font-size:.8125rem}
  .mobile-menu-contact a:hover{color:#fff}
  body.menu-open{overflow:hidden}
  body.menu-open .fab-group{display:none}
  /* Hero — full-viewport photo, nav floats on top, heading up top / CTAs at the bottom */
      .hero{
    position:relative; height:100svh; min-height:480px;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
    text-align:left; overflow:hidden;
    padding:calc(96px + env(safe-area-inset-top,0px)) var(--s-6) calc(var(--s-16) + env(safe-area-inset-bottom,0px));
    gap:var(--s-6);
  }
  @media (max-width:640px){
    .hero{
      padding-inline:var(--s-4);
      padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
    }
  }
  .hero-media{position:absolute; inset:0; z-index:-2}
   .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center center}
   @media (max-width:640px){ .hero-media img{object-position:50% 30%} }
    .hero-media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(0deg, rgba(15,23,42,.75) 0%, rgba(15,23,42,.08) 30%, rgba(15,23,42,.08) 70%, rgba(15,23,42,.65) 100%);
  }
@media (max-width:640px){
    .hero-media::after{
      background: transparent;
    }
  }
  
      .hero-heading{max-width:760px; margin-left:var(--s-8); display:grid; gap:0}
  .hero-heading h1{font-size:clamp(2.75rem,6vw + 1rem,5.25rem); font-weight:300; letter-spacing:-.02em; color:#fff}
  .hero-subtitle{margin:0; color:#fff; font-family:var(--font); font-size:clamp(1.5rem,3.2vw + .5rem,2.75rem); font-weight:300; letter-spacing:-.01em; line-height:1.15; max-width:26ch}
      .hero-link{
    display:inline-block; justify-self:start; width:fit-content; margin-top:var(--s-4); margin-left:var(--s-8); color:#fff; font-size:.9375rem; font-weight:400;
    text-decoration:none; letter-spacing:.01em; opacity:.85;
    border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:4px;
    transition:opacity .25s var(--ease), border-color .25s var(--ease);
  }
  .hero-link:hover{opacity:1; border-color:#fff}
  @media (max-width:640px){
    .hero-heading{margin-left:0; max-width:100%}
    .hero-heading h1{font-size:clamp(2.25rem,10vw,3rem)}
    .hero-subtitle{font-size:clamp(1.0625rem,5vw,1.375rem); max-width:22ch}
    .hero-link{margin-left:0; margin-top:var(--s-3)}
  }
  .hero-cta-row{display:flex; gap:var(--s-3); flex-wrap:wrap; justify-content:flex-start}
  .hero-cta-row .btn{
    min-width:200px; padding:10px 22px; border-radius:3px;
    font-size:.8125rem; letter-spacing:.02em;
  }
  .hero-cta-row .btn:hover{transform:translateY(-3px)}
  .hero-cta-row .btn:active{transform:translateY(-1px) scale(.98)}
    .btn-hero-light{background:#fff; color:#14181F}
  .btn-hero-light:hover{background:#EDEDEC; box-shadow:0 10px 24px -10px rgba(0,0,0,.3)}
  .btn-hero-dark{background:rgba(15,23,42,.55); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px)}
  .btn-hero-dark:hover{background:rgba(15,23,42,.8); border-color:#fff}

  /* Section heads */
  .section-head{max-width:600px; margin-bottom:var(--s-12)}
  .section-head p{color:var(--text-2); margin-top:var(--s-3); font-size:.9375rem}
  .section-head .caption{display:block; color:var(--text-2); font-size:.75rem; margin-top:var(--s-2); font-style:italic}

  /* Reveal on scroll — subtle fade + rise, applied via IntersectionObserver */
  .reveal{opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
  .reveal.is-visible{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

  /* Servicios — grid simple y ordenado, sin bento */
   /* Banner de foto entre secciones */
  .photo-banner{padding-block:var(--s-8)}
    .photo-banner-img{
    width:100%; max-width:420px; margin-inline:auto; height:auto;
    aspect-ratio:3/2; object-fit:cover;
    border-radius:var(--r-lg); border:1px solid var(--border); display:block;
  }
  @media (max-width:640px){ .photo-banner-img{max-width:300px; aspect-ratio:4/3} }
  /* Servicios — grid simple y ordenado, sin bento */
  .services-grid{
    display:grid; gap:var(--s-5);
    grid-template-columns:repeat(4,1fr);
  }
  @media (max-width:980px){ .services-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr} }
  .service-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
    padding:var(--s-6); transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  }
  .service-card:hover{transform:translateY(-4px); border-color:rgba(228,39,28,.35); background:#fff; box-shadow:var(--shadow)}
    .service-card-tall{grid-row:span 2; display:flex; flex-direction:column; justify-content:center}
  .service-icon{
    width:36px; height:36px; border-radius:10px; background:rgba(228,39,28,.1); color:var(--accent);
    display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-4);
  }
  .service-icon svg{width:18px; height:18px}
  .service-card h3{margin-bottom:var(--s-2); font-size:1.0625rem}
  .service-card p{color:var(--text-2); font-size:.875rem}

  /* Nosotros */
  .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s-16); align-items:center}
  @media (max-width:900px){ .about-grid{grid-template-columns:1fr} }
  .about-grid h2{font-size:clamp(1.375rem,1.9vw + .85rem,1.875rem)}
  .about-grid > div > p{font-size:.875rem}
  .about-bullets li span{font-size:.875rem}
  .about-left{display:grid; gap:var(--s-6)}
 .about-photo{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center bottom; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface-2)}
  .about-bullets{list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; gap:var(--s-4)}
  .about-bullets li{display:flex; gap:var(--s-3); align-items:flex-start}
  .about-bullets svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px}

  /* Proceso / línea de tiempo real: una sola línea conecta los 5 pasos,
     sin repetir el patrón de "tarjeta gris idéntica" del resto de la página */
  .steps{
    display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-6);
    counter-reset:step; position:relative; padding-top:2px;
  }
  .steps::before{
    content:""; position:absolute; top:19px; left:18px; right:18px; height:1px; background:var(--border-strong);
  }
  .step{position:relative; display:grid; gap:var(--s-3)}
  .step-num{
    counter-increment:step; font-weight:700; color:#fff; background:var(--accent);
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1; font-size:.875rem;
  }
  .step-num::before{content:counter(step)}
  .step h3{margin-bottom:var(--s-1); font-size:1rem}
  .step p{color:var(--text-2); font-size:.8125rem}
  @media (max-width:980px){
    .steps{grid-template-columns:1fr; gap:var(--s-8); padding-left:var(--s-2)}
    .steps::before{top:0; bottom:0; left:18px; right:auto; width:1px; height:auto}
    .step{grid-template-columns:38px 1fr; align-items:start; gap:var(--s-4)}
  }

  /* Zonas — panel editorial a la izquierda + lista con animación intacta a la derecha */
  .zones-section{background:var(--text-1); overflow:hidden; position:relative}
  .zones-section::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 55% at 100% 0%, rgba(228,39,28,.16), transparent 70%); pointer-events:none}
  .zones-section .container{position:relative}
  .zones-section .container{padding-block:var(--s-16)}
    .zones-wrap{display:flex; justify-content:center; position:relative}
  .zones-left{max-width:520px; text-align:center; display:flex; flex-direction:column; align-items:center}
  .zones-left h2{color:#fff}
  .zones-left .eyebrow{color:#F2B4AF}
  .zones-left .eyebrow::before{background:#F2B4AF}
  .zones-left > p{color:rgba(255,255,255,.62); margin-top:var(--s-4); font-size:.9375rem; max-width:36ch}
  .zones-stat{display:flex; gap:var(--s-8); margin-top:var(--s-8); justify-content:center}
  .zones-stat div strong{display:block; font-size:1.5rem; color:#fff; font-weight:700; line-height:1}
  .zones-stat div span{display:block; color:rgba(255,255,255,.55); font-size:.75rem; margin-top:var(--s-2); text-transform:uppercase; letter-spacing:.06em}
  .zones-left > p.zones-promo, #cobertura .zones-left > p.zones-promo{margin:var(--s-8) auto 0; max-width:100%; color:#fff; font-family:var(--font); font-size:clamp(1.625rem,2.4vw + .9rem,2.25rem); font-weight:700; line-height:1.08; letter-spacing:-.01em; text-align:center}
  .zones-left .btn-ghost{margin-top:var(--s-8); color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06)}
  .zones-left .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12)}
  .zones-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
  @media (max-width:520px){ .zones-grid{grid-template-columns:1fr} }
  .zone-card{
    display:flex; align-items:center; gap:var(--s-4); padding:var(--s-5);
    border-radius:var(--r-md); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  }
  .zone-card:hover{transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(242,180,175,.4)}
  .zone-card-icon{
    flex:none; width:40px; height:40px; border-radius:10px; background:rgba(228,39,28,.16); color:#F2B4AF;
    display:flex; align-items:center; justify-content:center;
  }
  .zone-card-icon svg{width:20px; height:20px}
  .zone-card-body{display:grid; gap:2px}
  .zone-card-num{font-size:.6875rem; font-weight:700; color:rgba(255,255,255,.4); letter-spacing:.04em}
  .zone-card-name{font-weight:600; font-size:.9375rem; color:#fff}
  /* Testimonios — cards más grandes */
  .testi-scroller{position:relative}
  .testi-scroller::after{
    content:""; position:absolute; top:0; right:0; bottom:var(--s-2); width:56px;
    background:linear-gradient(90deg, transparent, var(--bg)); pointer-events:none;
  }
  .testi-track{
    display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:var(--s-2); -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .testi-track::-webkit-scrollbar{display:none}
  .testi-card{
    scroll-snap-align:start; flex:0 0 min(460px,88vw);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-8);
  }
  .testi-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5)}
  .testi-name{font-weight:600; font-size:1rem}
  .stars{color:var(--accent); font-size:.8125rem; letter-spacing:2px; white-space:nowrap}
  .testi-card p{font-size:1.125rem; line-height:1.5; font-family:var(--font-display); font-weight:400; letter-spacing:-.005em}

  /* FAQ */
  .faq{max-width:720px}
  .faq-item{border-bottom:1px solid var(--border)}
  .faq-item summary{
    list-style:none; cursor:pointer; padding:var(--s-4) 0; display:flex; justify-content:space-between; gap:var(--s-4);
    font-weight:600; font-size:1rem;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-icon{color:var(--accent); flex:none; transition:transform .3s var(--ease)}
  .faq-item[open] .faq-icon{transform:rotate(45deg)}
  .faq-item p{color:var(--text-2); font-size:.875rem; padding-bottom:var(--s-5); max-width:65ch}

  /* Contacto */
  .contact-top{
    display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s-12);
    margin-bottom:var(--s-12); flex-wrap:wrap;
  }
  .contact-top h2{margin:0; max-width:16ch}
  .contact-top p{color:var(--text-2); font-size:.9375rem; max-width:34ch; margin:0}
  .contact-grid{display:grid; grid-template-columns:1fr; align-items:start}

  .contact-panel{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6);
    display:grid; gap:var(--s-5);
  }
  .contact-panel h3{font-size:1.0625rem}
  .contact-panel-sub{color:var(--text-2); font-size:.875rem; margin-top:var(--s-1)}

  .btn-wa{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
    width:100%; background:var(--text-1); border:1px solid var(--text-1); color:#fff;
    padding:14px var(--s-5); border-radius:8px; text-decoration:none; cursor:pointer;
    font-weight:700; font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
    font-family:inherit; transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  }
  .btn-wa:hover{background:var(--accent); border-color:var(--accent)}
  .btn-wa:active{transform:scale(.98)}
  .btn-wa svg{color:#22C55E; flex:none}

  .contact-checklist{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3)}
  .contact-checklist li{display:flex; gap:var(--s-3); align-items:center}
  .contact-checklist strong{font-size:.875rem; font-weight:600}
  .check-badge{
    flex:none; width:22px; height:22px; border-radius:6px; background:rgba(228,39,28,.1); color:var(--accent);
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .check-badge svg{width:13px; height:13px}

  .contact-info-compact{display:grid; gap:var(--s-3); padding-top:var(--s-4); border-top:1px solid var(--border)}
  .contact-info-compact > div{display:flex; align-items:flex-start; gap:var(--s-3); font-size:.8125rem; color:var(--text-2)}
  .contact-info-compact svg{width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px}
  .contact-info-compact a{color:var(--text-2); text-decoration:none}
  .contact-info-compact a:hover{color:var(--accent)}

   /* Formulario — panel con el mismo peso visual que el panel de WhatsApp */
  .contact-form{
    display:grid; gap:var(--s-5); background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-md); padding:var(--s-6);
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
  @media (max-width:520px){ .form-row{grid-template-columns:1fr} }
  .form-field{display:grid; gap:6px}
  .form-footer{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); padding-top:var(--s-1);
  }
  .form-note{color:var(--text-2); font-size:.8125rem; margin:0; flex:1 1 160px}
  .btn-wa-submit{
    flex:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
    background:var(--text-1); border:1px solid var(--text-1); color:#fff;
    padding:14px var(--s-6); border-radius:8px; cursor:pointer; font-family:inherit;
    font-weight:700; font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
    width:100%;
    transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  }
  .btn-wa-submit:hover{background:var(--accent); border-color:var(--accent)}
  .btn-wa-submit:active{transform:scale(.98)}
  .btn-wa-submit svg{color:#fff}

  label{display:block; font-size:.75rem; font-weight:600; margin-bottom:0; color:var(--text-1)}
  input, textarea{
    width:100%; background:#fff; border:1px solid var(--border-strong);
    padding:11px 14px; color:var(--text-1); font:inherit; font-size:.9375rem; resize:vertical; border-radius:8px;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  input:focus, textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(228,39,28,.12)}
  input::placeholder, textarea::placeholder{color:#A9AFB8}
  .form-status{font-size:.8125rem; min-height:1.2em; margin:0}
  .form-status.ok{color:var(--success)}
  .form-status.err{color:var(--accent)}
  /* Footer CTA */
  .footer-cta{
    background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px solid var(--border); border-radius:24px;
    padding:var(--s-16) var(--s-8); text-align:center; margin-inline:var(--s-4); position:relative; overflow:hidden;
  }
  .footer-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(228,39,28,.1), transparent 70%)}
  .footer-cta *{position:relative}
  .footer-cta h2{margin-bottom:var(--s-3); font-size:clamp(1.75rem,3.2vw,2.75rem)}
  .footer-cta p{color:var(--text-2); font-size:.9375rem; max-width:48ch; margin-inline:auto; margin-bottom:var(--s-8)}
  .hero-ctas{display:flex; gap:var(--s-3); flex-wrap:wrap; justify-content:center}

  footer{padding-block:var(--s-16) var(--s-8); color:var(--text-2); font-size:.8125rem}
  .footer-top{
    display:grid; grid-template-columns:1.2fr 2fr; gap:var(--s-12);
    padding-bottom:var(--s-8); border-bottom:1px solid var(--border); margin-bottom:var(--s-8);
  }
  @media (max-width:760px){ .footer-top{grid-template-columns:1fr} }
  .footer-brand{display:grid; gap:var(--s-4); align-content:start}
  .footer-logo{width:64px; height:64px; object-fit:contain}
  .footer-brand p{color:var(--text-2); font-size:.875rem; max-width:32ch}
  .footer-social{display:flex; gap:var(--s-3)}
  .footer-social a{
    width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text-1);
    transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .footer-social a:hover{background:var(--accent); border-color:var(--accent); color:#fff}
  .footer-social svg{width:16px; height:16px}
  .footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8)}
  @media (max-width:640px){ .footer-cols{grid-template-columns:1fr 1fr} }
  .footer-cols h4{color:var(--text-1); font-size:.8125rem; margin-bottom:var(--s-3); font-weight:600}
  .footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2)}
  .footer-cols a{text-decoration:none; color:var(--text-2)}
  .footer-cols a:hover{color:var(--text-1)}
  .footer-bottom{border-top:1px solid var(--border); padding-top:var(--s-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3)}

.fab-group{
    position:fixed; bottom:calc(var(--s-6) + env(safe-area-inset-bottom,0px)); right:var(--s-6); z-index:60;
    display:flex; flex-direction:column; gap:20px; align-items:flex-end;
  }
  .fab-btn{
    width:68px; height:68px; border-radius:50%; color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(20,24,31,.25);
    text-decoration:none; position:relative;
  }
  .fab-btn svg{position:relative; width:32px; height:32px}
 .fab-wa{ background:#22C55E; }
.fab-call{ background:var(--accent); }
  .fab-wa::before, .fab-call::before{
    content:""; position:absolute; inset:0; border-radius:50%; opacity:.5;
    animation:fab-pulse 2.4s var(--ease) infinite;
  }
  .fab-wa::before{ background:#22C55E; }
  .fab-call::before{ background:var(--accent); }
  @keyframes fab-pulse{ 0%{transform:scale(1); opacity:.5} 100%{transform:scale(1.6); opacity:0} }
  @media (prefers-reduced-motion:reduce){ .fab-wa::before, .fab-call::before{animation:none} }

 @media (max-width:640px){
    .fab-group{
      bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px)); right:var(--s-4);
      gap:var(--s-4);
    }
    .fab-btn{ width:64px; height:64px; margin:0; }
    .fab-btn svg{ width:30px; height:30px; }
  }

  /* One deliberate entrance for the hero only — not scattered per-card */
  .hero > *:not(.hero-media){opacity:0; transform:translateY(14px); animation:hero-in .7s var(--ease) forwards}
  .hero-heading{animation-delay:.1s}
  .hero-cta-row{animation-delay:.3s}
  @keyframes hero-in{ to{opacity:1; transform:none} }
    @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero > *{opacity:1; transform:none; animation:none}
    .fab-wa::before, .fab-call::before{animation:none}
  }

  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .skip-link{
    position:absolute; left:var(--s-4); top:-100px; background:var(--accent); color:#fff;
    padding:10px 16px; border-radius:8px; z-index:100; transition:top .2s var(--ease);
  }
  .skip-link:focus{top:var(--s-4)}