:root{
    --grafito: #0A2036;
    --grafito-2: #123152;
    --grafito-3: #1B3E63;
    --niebla: #EEF2EE;
    --niebla-2: #E2E9E1;
    --azul: #0665BD;
    --azul-2: #2E86D6;
    --cobre: #FDBF0E;
    --cobre-2: #FFD35C;
    --musgo: #6DA02A;
    --musgo-2: #94C858;
    --texto-claro: #F5F7F5;
    --texto-claro-suave: rgba(245,247,245,0.68);
    --texto-oscuro: #142018;
    --texto-oscuro-suave: rgba(20,32,24,0.62);
    --linea-clara: rgba(245,247,245,0.14);
    --linea-oscura: rgba(20,32,24,0.14);
    --acc-tag: var(--cobre-2);
    --acc-check: var(--musgo-2);
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Public Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --max: 1180px;
  }

  /* secciones "claras" dentro de bloques que por defecto son oscuros (mismos componentes, tema invertido) */
  section[data-tone="claro"]{
    --grafito: var(--niebla);
    --grafito-2: #ffffff;
    --grafito-3: #ffffff;
    --texto-claro: var(--texto-oscuro);
    --texto-claro-suave: var(--texto-oscuro-suave);
    --linea-clara: var(--linea-oscura);
    --acc-tag: var(--musgo);
    --acc-check: var(--musgo);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:110px; }
  body{
    margin:0;
    font-family:var(--font-body);
    background:var(--niebla);
    color:var(--texto-oscuro);
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  ol{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; cursor:pointer; }
  h1,h2,h3{ font-family:var(--font-display); margin:0; line-height:1.05; }
  p{ margin:0; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
  .mono{ font-family:var(--font-mono); }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--musgo-2);
  }
  section[data-dark] .eyebrow{ color:var(--cobre-2); }
  :focus-visible{ outline:2px solid var(--cobre); outline-offset:3px; }

  /* ---------- reveal ---------- */
  /* Visible por defecto: el contenido no depende de JavaScript para poder verse. Si el script
     no llega a ejecutarse (bloqueado, con errores, deshabilitado), estos bloques quedan
     visibles igual. La animación de aparición es una mejora progresiva: main.js agrega la
     clase "js-anim" en tiempo de ejecución antes de observar cada elemento. */
  .reveal{ opacity:1; transform:none; }
  .reveal.js-anim{ opacity:1; transform:none; }
  .reveal.js-anim.in{ animation:bmb-reveal .7s ease; }
  @keyframes bmb-reveal{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    .reveal.js-anim{ opacity:1; transform:none; transition:none; animation:none; }
    *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
  }

  /* ---------- header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:18px 0;
    transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
  }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  header.scrolled{
    background:rgba(16,22,29,0.92);
    backdrop-filter:blur(10px);
    padding:12px 0;
    box-shadow:0 1px 0 var(--linea-clara);
  }
  .logo{
    display:flex; align-items:center;
  }
  .logo-img{
    height:34px; width:auto; display:block;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  }
  footer .logo-img{ height:30px; }
  nav.main-nav ul{ display:flex; gap:4px; }
  .nav-close{ display:none; }
  .nav-cta{ display:none; }
  nav.main-nav a{
    font-size:14.5px; color:var(--texto-claro-suave); font-weight:500;
    padding:8px 14px; border-radius:20px; display:inline-block;
    transition:color .2s ease, background-color .2s ease;
  }
  nav.main-nav a:hover{ color:var(--cobre-2); }
  nav.main-nav a.active{ color:var(--texto-claro); background:var(--linea-clara); }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:3px; font-size:14px; font-weight:600;
    border:1px solid transparent; transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--cobre); color:var(--grafito); }
  .btn-primary:hover{ background:var(--cobre-2); }
  nav.main-nav .nav-cta .btn-primary:hover{ color:var(--grafito); }
  .btn-ghost-dark{ border-color:var(--linea-clara); color:var(--texto-claro); }
  .btn-ghost-dark:hover{ border-color:var(--cobre); color:var(--cobre-2); }
  .btn-ghost-light{ border-color:var(--linea-oscura); color:var(--texto-oscuro); }
  .btn-ghost-light:hover{ border-color:var(--musgo); color:var(--musgo); }

  .nav-toggle{
    display:none; background:none; border:none; padding:8px; width:42px; height:42px;
    flex-direction:column; justify-content:center; align-items:center; gap:6px;
    margin:-8px;
  }
  .nav-toggle span{ height:2px; width:22px; background:var(--texto-claro); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* ---------- hero ---------- */
  .hero{
    background:var(--grafito);
    color:var(--texto-claro);
    padding:150px 0 70px;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center;
  }
  .hero h1{
    font-size:clamp(34px, 4.6vw, 56px);
    font-weight:700;
    margin:16px 0 22px;
    letter-spacing:-0.01em;
  }
  .hero .lede{
    font-size:17px; line-height:1.6; color:var(--texto-claro-suave);
    max-width:46ch; margin-bottom:32px;
  }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .arc-wrap{ position:relative; }
  .arc-caption{
    display:flex; justify-content:space-between; margin-top:6px;
    font-family:var(--font-mono); font-size:11.5px; color:var(--texto-claro-suave);
  }

  .stats{ background:var(--grafito-2); border-top:1px solid var(--linea-clara); }
  .beneficios-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:34px; }
  .beneficio-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
  .beneficio-item .icon-circle{
    width:58px; height:58px; border-radius:50%; flex:none;
    border:1.5px solid var(--musgo); color:var(--musgo);
    display:flex; align-items:center; justify-content:center;
  }
  .beneficio-item .icon-circle svg{ width:25px; height:25px; }
  .beneficio-item .label{
    font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; font-weight:600; color:var(--texto-claro); line-height:1.5;
  }
  @media (max-width:880px){ .beneficios-grid{ grid-template-columns:repeat(3,1fr); row-gap:30px; } }
  @media (max-width:520px){ .beneficios-grid{ grid-template-columns:repeat(2,1fr); } }

  .stats .wrap{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    padding:34px 24px;
  }
  .stat{ text-align:left; }
  .stat .num{
    font-family:var(--font-mono); font-size:clamp(24px,3vw,34px); color:var(--cobre-2); font-weight:500;
  }
  .stat .label{ font-size:13px; color:var(--texto-claro-suave); margin-top:4px; }
  .stats .stat + .stat{ border-left:1px solid var(--linea-clara); padding-left:20px; }

  /* ---------- section shells ---------- */
  section{ padding:96px 0; }
  /* Proyectos y Cómo trabajamos comparten el mismo fondo claro: se achica el padding
     entre ambas para que no se vea como un espacio vacío sin cortes. */
  #galeria{ padding-bottom:48px; }
  #como-trabajamos{ padding-top:48px; }
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head h2{ font-size:clamp(26px,3.4vw,38px); margin-top:12px; }

  /* ---------- nosotros / flow ---------- */
  .nosotros{ background:var(--niebla); }
  .nosotros-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
  .nosotros p.body-copy{ font-size:15.5px; line-height:1.75; color:var(--texto-oscuro-suave); margin-bottom:16px; }

  .flow{ display:flex; align-items:stretch; gap:0; }
  .flow-node{
    flex:1; background:#fff; border:1px solid var(--linea-oscura); border-radius:4px;
    padding:18px 16px; text-align:left; position:relative;
  }
  .flow-node .icon{ width:26px; height:26px; margin-bottom:14px; color:var(--musgo); }
  .flow-node h3{ font-size:14.5px; font-weight:600; margin-bottom:6px; }
  .flow-node p{ font-size:12.8px; line-height:1.5; color:var(--texto-oscuro-suave); }
  .flow-arrow{ width:28px; flex:none; align-self:center; color:var(--cobre); }
  @media (max-width:880px){
    .flow{ flex-direction:column; gap:14px; }
    .flow-arrow{ width:100%; height:20px; transform:rotate(90deg); align-self:flex-start; margin-left:10px; }
  }

  /* ---------- servicios ---------- */
  .servicios{ background:var(--grafito); color:var(--texto-claro); }
  .servicios .section-head p{ color:var(--texto-claro-suave); font-size:15.5px; line-height:1.6; }
  .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea-clara); border:1px solid var(--linea-clara); }
  .card{
    background:var(--grafito); padding:30px 24px; transition:background .25s ease;
  }
  .card:hover{ background:var(--grafito-2); }
  .card .icon{ width:30px; height:30px; color:var(--cobre); margin-bottom:22px; }
  .card h3{ font-size:16.5px; font-weight:600; margin-bottom:10px; }
  .card p{ font-size:13.8px; line-height:1.55; color:var(--texto-claro-suave); }

  /* ---------- galería ---------- */
  .galeria{ background:var(--niebla); }
  .gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .gal-item{ border-radius:4px; overflow:hidden; border:1px solid var(--linea-oscura); background:#fff; }
  .gal-swatch{ aspect-ratio:4/3; position:relative; }
  .gal-cap{ padding:14px 16px; }
  .gal-cap .place{ font-size:13.5px; font-weight:600; }
  .gal-cap .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--texto-oscuro-suave); margin-top:3px; }

  /* ---------- proyectos: carrusel por tarjeta ---------- */
  .proy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .proy-card{ border-radius:4px; overflow:hidden; border:1px solid var(--linea-oscura); background:#fff; }
  .proy-slider{ position:relative; aspect-ratio:4/3; overflow:hidden; }
  .proy-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity .35s ease;
  }
  .proy-slide.is-active{ opacity:1; visibility:visible; }
  .proy-slide .panels{ width:100%; height:100%; }
  .proy-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .proy-slide video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
  .proy-slide .panels-num{
    position:absolute; bottom:10px; right:12px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
    color:rgba(20,32,24,.5); background:rgba(255,255,255,.75); padding:3px 8px; border-radius:20px;
  }
  .proy-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%; border:none;
    background:rgba(255,255,255,.85); color:var(--texto-oscuro);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:2;
  }
  .proy-arrow svg{ width:16px; height:16px; }
  .proy-arrow.prev{ left:10px; }
  .proy-arrow.next{ right:10px; }
  .proy-arrow:hover{ background:#fff; }
  .proy-dots{ position:absolute; bottom:10px; left:12px; display:flex; gap:6px; z-index:2; }
  .proy-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); border:none; padding:0; cursor:pointer; }
  .proy-dot.is-active{ background:#fff; }
  .proy-cap{ padding:14px 16px; }
  .proy-cap .place{ font-size:13.5px; font-weight:600; }
  .proy-cap .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--texto-oscuro-suave); margin-top:3px; }
  .proy-specs{ display:flex; flex-direction:column; gap:4px; margin-top:10px; padding-top:10px; border-top:1px solid var(--linea-oscura); }
  .proy-specs li{ font-size:12px; line-height:1.4; color:var(--texto-oscuro-suave); }
  @media (max-width:960px){ .proy-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:720px){ .proy-grid{ grid-template-columns:1fr; } }

  /* panel pattern variants */
  .panels{
    width:100%; height:100%;
    background-image:
      linear-gradient(var(--p-line,rgba(16,22,29,.55)) 1px, transparent 1px),
      linear-gradient(90deg, var(--p-line,rgba(16,22,29,.55)) 1px, transparent 1px);
    background-size:var(--p-size,22px) var(--p-size,22px);
    background-color:var(--p-bg,#dfe6e3);
    position:relative;
  }
  .panels::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(160deg, var(--p-tint,rgba(253,191,14,.18)), transparent 60%);
  }

  /* ---------- contacto ---------- */
  .contacto{ background:var(--grafito-2); color:var(--texto-claro); }
  .contacto .section-head p{ color:var(--texto-claro-suave); font-size:15.5px; }
  .contacto-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; }
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:12.5px; margin-bottom:7px; color:var(--texto-claro-suave); font-family:var(--font-mono); letter-spacing:.03em; }
  .field input, .field select, .field textarea{
    width:100%; background:var(--grafito); border:1px solid var(--linea-clara); border-radius:3px;
    padding:12px 13px; color:var(--texto-claro); font-family:var(--font-body); font-size:14.5px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--cobre); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  .file-drop{
    position:relative; border:1px dashed var(--linea-clara); border-radius:3px;
    padding:20px 16px; text-align:center; transition:border-color .2s ease, background .2s ease;
  }
  .file-drop:hover{ border-color:var(--cobre); }
  .file-drop input[type="file"]{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:none;
  }
  .file-drop-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
  .file-drop-inner .icon{ width:22px; height:22px; color:var(--texto-claro-suave); margin-bottom:2px; }
  .file-drop-text{ font-size:13.5px; color:var(--texto-claro); }
  .file-drop-hint{ font-size:11.5px; color:var(--texto-claro-suave); }
  .file-drop-name{ font-family:var(--font-mono); font-size:12px; color:var(--cobre-2); margin-top:8px; display:none; }
  .file-drop.has-file{ border-style:solid; border-color:var(--musgo-2); }
  .file-drop.has-file .file-drop-name{ display:block; }

  .form-note{ font-size:12.5px; color:var(--texto-claro-suave); margin-top:14px; }
  .form-success{
    display:none; margin-top:16px; padding:13px 15px; border:1px solid var(--musgo-2);
    border-radius:3px; font-size:13.5px; color:var(--musgo-2);
  }
  .form-success.show{ display:block; }
  .form-error{
    display:none; margin-top:16px; padding:13px 15px; border:1px solid #E0715C;
    border-radius:3px; font-size:13.5px; color:#E0715C;
  }
  .form-error.show{ display:block; }

  .info-block{ border-top:1px solid var(--linea-clara); padding-top:24px; margin-top:6px; }
  .info-row{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
  a.info-row{ cursor:pointer; transition:opacity .15s ease; }
  a.info-row:hover{ opacity:.75; }
  .info-row .icon{ width:19px; height:19px; color:var(--cobre); flex:none; margin-top:2px; }
  .info-row .t{ font-size:14px; }
  .info-row .s{ font-size:12.5px; color:var(--texto-claro-suave); margin-top:2px; }
  .map-card{
    margin-top:26px; border:1px solid var(--linea-clara); border-radius:4px; overflow:hidden; background:var(--grafito);
  }
  .map-visual{ position:relative; aspect-ratio:16/9; }
  .map-cta{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-top:1px solid var(--linea-clara); }
  .map-cta .addr{ font-size:12.8px; color:var(--texto-claro-suave); }

  /* ---------- whatsapp flotante ---------- */
  .wa-float{
    position:fixed; right:22px; bottom:22px; z-index:40;
    width:54px; height:54px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.28);
    transition:transform .2s ease, opacity .2s ease;
  }
  body.nav-open .wa-float{ opacity:0; pointer-events:none; }
  .wa-float:hover{ transform:scale(1.06); }
  .wa-float svg{ width:28px; height:28px; }
  @media (max-width:720px){
    .wa-float{ right:16px; bottom:16px; width:50px; height:50px; }
  }

  /* ---------- social icons ---------- */
  .social-row{ display:flex; gap:12px; }
  .social-icon{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--linea-clara);
    display:flex; align-items:center; justify-content:center; color:var(--texto-claro-suave);
    transition:border-color .2s ease, color .2s ease;
  }
  .social-icon:hover{ border-color:var(--cobre); color:var(--cobre-2); }
  .social-icon svg{ width:17px; height:17px; }

  /* ---------- marcas (carrusel) ---------- */
  .marcas{ background:var(--niebla); padding-bottom:70px; }
  .marcas .section-head p{ margin-top:14px; }
  .marquee{
    overflow:hidden; margin-top:44px;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-track{
    display:flex; align-items:center; gap:44px; width:max-content;
    animation:marquee-scroll 32s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .logo-chip{
    flex:none; display:flex; align-items:center; justify-content:center;
    height:72px; padding:12px 26px; min-width:130px;
    background:#fff; border:1px solid var(--linea-oscura); border-radius:4px;
  }
  .logo-chip img{ max-height:100%; max-width:150px; width:auto; height:auto; object-fit:contain; }
  @media (max-width:720px){
    .logo-chip{ height:58px; padding:10px 18px; min-width:100px; }
    .logo-chip img{ max-width:110px; }
    .marquee-track{ gap:30px; }
  }

  /* ---------- videos ---------- */
  .videos{ background:var(--grafito); color:var(--texto-claro); }
  .videos .section-head p{ color:var(--texto-claro-suave); font-size:15.5px; }
  .video-slot{
    border-radius:4px; overflow:hidden; border:1.5px dashed var(--linea-clara);
    background:var(--grafito-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center; padding:20px;
  }
  .video-slot .play{
    width:46px; height:46px; border-radius:50%; border:1.5px solid var(--cobre);
    display:flex; align-items:center; justify-content:center; color:var(--cobre);
  }
  .video-slot .play svg{ width:16px; height:16px; margin-left:2px; }
  .video-slot .t{ font-size:13.5px; font-weight:600; }
  .video-slot .s{ font-size:12px; color:var(--texto-claro-suave); }
  .video-featured.video-slot{ aspect-ratio:16/9; margin-bottom:22px; }
  .video-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .video-row .video-slot{ aspect-ratio:9/16; }
  @media (max-width:880px){
    .video-row{ grid-template-columns:1fr; max-width:360px; margin:0 auto; }
  }

  .quienes-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
  .quiene-card{
    background:#fff; border:1px solid var(--linea-oscura); border-top:3px solid var(--musgo);
    border-radius:4px; padding:26px 26px 28px;
  }
  .quiene-card.azul{ border-top-color:var(--azul); }
  .quiene-card .tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--musgo); font-weight:500; }
  .quiene-card.azul .tag{ color:var(--azul); }
  .quiene-card h3{ font-size:19px; margin:8px 0 12px; }
  .quiene-card p{ font-size:14px; line-height:1.6; color:var(--texto-oscuro-suave); margin-bottom:16px; }
  .quiene-card ul{ display:flex; flex-direction:column; gap:9px; }
  .quiene-card li{ display:flex; gap:9px; align-items:flex-start; font-size:13.8px; }
  .quiene-card li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--musgo); }
  .quiene-card.azul li svg{ color:var(--azul-2); }
  @media (max-width:880px){ .quienes-cards{ grid-template-columns:1fr; } }

  /* ---------- por que elegirnos ---------- */
  .porque{ background:var(--grafito); color:var(--texto-claro); }
  .porque .section-head p{ color:var(--texto-claro-suave); font-size:15.5px; }
  .porque-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
  .porque-list{ display:flex; flex-direction:column; gap:26px; }
  .porque-item{ display:flex; gap:16px; }
  .porque-item .badge{
    width:38px; height:38px; border-radius:8px; flex:none;
    background:var(--grafito-2); border:1px solid var(--linea-clara);
    display:flex; align-items:center; justify-content:center; color:var(--cobre);
  }
  .porque-item .badge svg{ width:18px; height:18px; }
  .porque-item p{ font-size:14.5px; line-height:1.6; color:var(--texto-claro-suave); }
  .porque-item p b{ color:var(--texto-claro); font-weight:600; }
  .porque-visual{ border-radius:4px; overflow:hidden; border:1px solid var(--linea-clara); }
  .nosotros-video{ display:block; width:100%; height:100%; object-fit:cover; background:#0A2036; }
  @media (max-width:880px){
    .porque-grid{ grid-template-columns:1fr; }
    .nosotros-video{ height:auto; aspect-ratio:500/420; }
  }

  /* ---------- servicios: bloques de contenido ---------- */
  .serv-intro-copy{ max-width:760px; font-size:15.5px; line-height:1.7; color:var(--texto-claro-suave); margin-top:14px; }
  .serv-block{ margin-top:64px; padding-top:48px; border-top:1px solid var(--linea-clara); }
  .serv-block:first-of-type{ margin-top:52px; }
  .serv-block .tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc-tag); }
  .serv-block h3{ font-family:var(--font-display); font-size:clamp(21px,2.4vw,26px); margin:8px 0 14px; color:var(--texto-claro); }
  .serv-block > p{ font-size:14.5px; line-height:1.7; color:var(--texto-claro-suave); max-width:720px; margin-bottom:6px; }
  .serv-block > p + p{ margin-top:12px; }

  .label-mini{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-claro-suave); margin:20px 0 10px; }

  .chip-row{ display:flex; flex-wrap:wrap; row-gap:8px; column-gap:18px; }
  .chip{
    font-size:12.5px; padding:0; border:none; border-radius:0; background:none;
    color:var(--texto-claro-suave); font-family:var(--font-mono); white-space:nowrap;
    display:inline-flex; align-items:center; gap:7px;
  }
  .chip::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--acc-tag); flex:none; }

  .check-list{ display:flex; flex-direction:column; gap:9px; }
  .check-list li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--texto-claro-suave); }
  .check-list li b{ color:var(--texto-claro); }
  .check-list li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--acc-check); }

  .acc-group{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
  .acc-item{ border:1px solid var(--linea-clara); border-radius:4px; background:var(--grafito-2); overflow:hidden; }
  .acc-item summary{
    list-style:none; cursor:pointer; padding:18px 20px;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .acc-item summary::-webkit-details-marker{ display:none; }
  .acc-item summary .acc-title{ font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--texto-claro); }
  .acc-item summary .acc-sub{ font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--texto-claro-suave); margin-top:3px; }
  .acc-item summary .plus{ width:22px; height:22px; flex:none; color:var(--cobre); transition:transform .25s ease; }
  .acc-item[open] summary .plus{ transform:rotate(135deg); }
  .acc-item .acc-body{ padding:0 20px 24px; }
  .acc-item .acc-body p{ font-size:14px; line-height:1.65; color:var(--texto-claro-suave); margin-bottom:16px; }

  /* ---------- diagrama de flujo (tipos de sistema) ---------- */
  .sys-flow{ display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; row-gap:22px; margin:4px 0 24px; padding:20px 18px; background:var(--grafito); border:1px solid var(--linea-clara); border-radius:4px; }
  .sys-node{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; width:84px; flex:none; }
  .sys-node .icon{ width:30px; height:30px; color:var(--cobre); flex:none; }
  .sys-node span{ font-family:var(--font-mono); font-size:10.5px; line-height:1.35; letter-spacing:.01em; color:var(--texto-claro-suave); }
  .sys-node-pair{ display:flex; flex-direction:column; gap:14px; flex:none; }
  .sys-node-pair .sys-node{ width:84px; }
  .sys-arrow-wrap{ display:flex; align-items:center; flex:none; align-self:center; padding:0 2px; }
  .sys-arrow{ width:24px; height:16px; color:var(--cobre); flex:none; }
  @media (max-width:560px){
    .sys-flow{ padding:18px 14px; }
    .sys-node{ width:72px; }
    .sys-node span{ font-size:10px; }
    .sys-arrow{ width:18px; }
  }
  .sys-infografia{ display:block; width:100%; height:auto; border-radius:4px; border:1px solid var(--linea-clara); margin:4px 0 24px; }

  .mini-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
  .mini-card{ background:var(--grafito-2); border:1px solid var(--linea-clara); border-radius:4px; padding:16px 18px; }
  .mini-card h4{ font-family:var(--font-display); font-size:14.5px; color:var(--texto-claro); margin-bottom:8px; }
  .mini-card .chip-row{ row-gap:6px; column-gap:14px; }
  .mini-card .chip{ font-size:11.5px; }
  @media (max-width:640px){ .mini-cards{ grid-template-columns:1fr; } }

  .callout-card{
    background:var(--grafito-2); border:1px solid var(--linea-clara); border-left:3px solid var(--cobre);
    border-radius:4px; padding:22px 24px; margin-top:26px;
  }
  .callout-card h4{ font-family:var(--font-display); font-size:16px; color:var(--texto-claro); margin-bottom:8px; }
  .callout-card p{ font-size:14px; line-height:1.6; color:var(--texto-claro-suave); margin-bottom:14px; }

  .cards-5{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--linea-clara); border:1px solid var(--linea-clara); margin-top:26px; }
  .cards-5 .card{ background:var(--grafito); }
  .cards-5 .card h3{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0 0 10px; color:var(--texto-claro); }
  .cards-5 .card p{ font-size:13.8px; line-height:1.55; color:var(--texto-claro-suave); max-width:none; }
  @media (max-width:980px){
    .cards-5{ grid-template-columns:repeat(2, 1fr); }
    .cards-5 .card:last-child{ grid-column:1 / -1; }
  }
  @media (max-width:720px){
    .cards-5{ grid-template-columns:1fr; }
    .cards-5 .card:last-child{ grid-column:auto; }
  }

  /* ---------- pasos del proceso ---------- */
  .steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--linea-oscura); border:1px solid var(--linea-oscura); margin-top:44px; }
  .step{ background:#fff; padding:28px 24px; }
  .step .step-num{ font-family:var(--font-mono); font-size:13px; color:var(--musgo); margin-bottom:14px; }
  .step h3{ font-size:16px; font-weight:600; margin-bottom:10px; line-height:1.3; }
  .step p{ font-size:13.5px; line-height:1.6; color:var(--texto-oscuro-suave); }
  @media (max-width:880px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .steps{ grid-template-columns:1fr; } }

  .clientes-recibe{ margin-top:36px; }
  .clientes-recibe .check-list-light{ display:flex; flex-direction:column; gap:9px; max-width:640px; }
  .clientes-recibe .check-list-light li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--texto-oscuro-suave); }
  .clientes-recibe .check-list-light li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--musgo); }

  .prosumidores-box{
    margin-top:40px; padding:28px 30px; background:#fff; border:1px solid var(--linea-oscura);
    border-left:3px solid var(--azul);
  }
  .prosumidores-box h3{ font-size:18px; font-weight:600; margin-bottom:12px; }
  .prosumidores-box p{ font-size:14px; line-height:1.65; color:var(--texto-oscuro-suave); margin-bottom:14px; max-width:760px; }
  .prosumidores-box ul{ display:flex; flex-direction:column; gap:10px; }
  .prosumidores-box li{ font-size:13.8px; line-height:1.55; color:var(--texto-oscuro-suave); }
  .prosumidores-box li b{ color:var(--texto-oscuro); }

  /* ---------- tarjetas resumen de soluciones (bombeo / red / baterías) ---------- */
  .resumen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:8px 0 50px; }
  .resumen-card{ background:var(--grafito-2); border:1px solid var(--linea-clara); border-radius:4px; padding:28px 26px; }
  .resumen-card .icon-circle{
    width:54px; height:54px; border-radius:50%; border:1.5px solid var(--accent,var(--cobre)); color:var(--accent,var(--cobre));
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .resumen-card .icon-circle svg{ width:24px; height:24px; }
  .resumen-card h4{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--texto-claro); margin-bottom:8px; }
  .resumen-card p{ font-size:13.6px; line-height:1.55; color:var(--texto-claro-suave); margin-bottom:16px; }
  .resumen-card ul{ display:flex; flex-direction:column; gap:8px; }
  .resumen-card li{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--texto-claro-suave); }
  .resumen-card li svg{ width:14px; height:14px; flex:none; margin-top:2px; color:var(--accent,var(--cobre)); }
  @media (max-width:880px){ .resumen-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .resumen-grid{ grid-template-columns:1fr; } }

  /* ---------- checklist numerado (alcance del servicio) ---------- */
  .scope-list{ display:flex; flex-direction:column; gap:20px; margin-top:30px; max-width:760px; }
  .scope-item{ display:flex; gap:15px; align-items:flex-start; }
  .scope-item .num-badge{
    width:28px; height:28px; border-radius:50%; flex:none;
    background:var(--musgo); color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  }
  .scope-item .txt{ font-size:14.5px; line-height:1.6; color:var(--texto-oscuro-suave); padding-top:2px; }
  .scope-item .txt b{ color:var(--texto-oscuro); }

  /* ---------- footer ---------- */
  footer{ background:var(--grafito); color:var(--texto-claro-suave); padding:44px 0 30px; border-top:1px solid var(--linea-clara); }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; margin-bottom:28px; }
  footer nav ul{ display:flex; gap:22px; flex-wrap:wrap; }
  footer nav a{ font-size:13.5px; }
  footer nav a:hover{ color:var(--cobre-2); }
  .footer-bottom{ display:flex; justify-content:space-between; font-size:12.5px; padding-top:20px; border-top:1px solid var(--linea-clara); flex-wrap:wrap; gap:10px; }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero .wrap{ grid-template-columns:1fr; }
    .arc-wrap{ order:-1; }
    .nosotros-grid{ grid-template-columns:1fr; gap:36px; }
    .cards{ grid-template-columns:repeat(2,1fr); }
    .gal-grid{ grid-template-columns:repeat(2,1fr); }
    .contacto-grid{ grid-template-columns:1fr; }
    .stats .wrap{ grid-template-columns:1fr; }
    .stats .stat + .stat{ border-left:none; border-top:1px solid var(--linea-clara); padding-left:0; padding-top:16px; }
  }
  @media (max-width:880px){
    nav.main-nav{
      position:fixed; top:0; left:0; right:0;
      width:100%; height:100vh;
      background:var(--grafito);
      padding:26px 28px 40px;
      transform:translateY(-100%);
      transition:transform .3s ease;
      z-index:80;
      display:flex; flex-direction:column;
      overflow-y:auto;
    }
    nav.main-nav.open{ transform:translateY(0); }
    .nav-close{
      display:flex; align-items:center; justify-content:flex-end;
      margin-bottom:28px; flex:none;
    }
    .nav-close button{
      width:36px; height:36px; border-radius:50%; border:1px solid var(--linea-clara);
      background:none; display:flex; align-items:center; justify-content:center; color:var(--texto-claro);
    }
    .nav-close button svg{ width:16px; height:16px; }
    nav.main-nav ul{ flex-direction:column; gap:0; flex:none; }
    nav.main-nav li{ border-bottom:1px solid var(--linea-clara); }
    nav.main-nav a{ display:block; padding:16px 2px; font-size:17px; border-radius:8px; }
    nav.main-nav a.active{ background:var(--linea-clara); padding-left:14px; padding-right:14px; }
    .nav-cta{ display:block; margin-top:32px; flex:none; }
    .nav-cta .btn{
      width:100%; justify-content:center;
      padding:15px 20px; border-radius:8px; font-size:14.5px; letter-spacing:.01em;
      box-shadow:0 6px 18px rgba(0,0,0,.28);
    }
    .nav-toggle{ display:flex; }
    .nav-right .btn-primary{ display:none; }
    .nav-right .btn-ghost-dark{ display:none; }
    section{ padding:64px 0; }
    #galeria{ padding-bottom:32px; }
    #como-trabajamos{ padding-top:32px; }
    .cards{ grid-template-columns:1fr; }
    .gal-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; }
  }
  @media (max-width:400px){
    header .wrap{ gap:8px; }
  }

  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
  .testi-card{ background:var(--grafito-2); border:1px solid var(--linea-clara); border-radius:4px; padding:26px; display:flex; flex-direction:column; gap:14px; }
  .testi-stars{ color:var(--cobre-2); font-family:var(--font-mono); font-size:14px; letter-spacing:.1em; }
  .testi-quote{ font-size:14.5px; line-height:1.6; color:var(--texto-claro-suave); font-style:italic; }
  .testi-author{ font-family:var(--font-mono); font-size:12.5px; color:var(--texto-claro-suave); border-top:1px solid var(--linea-clara); padding-top:12px; }
  @media (max-width:880px){ .testi-grid{ grid-template-columns:1fr; } }

  /* Secciones ocultas temporalmente. El contenido se conserva en el HTML. */
  .oculto-temporal{ display:none !important; }

  /* Menú y títulos visibles; detalles ocultos temporalmente. */
  .contenido-oculto{ scroll-margin-top:88px; }
  .contenido-oculto .section-head{ margin-bottom:0; }
  .contenido-oculto .section-head > p:not(.eyebrow),
  .contenido-oculto .serv-block,
  .contenido-oculto .marquee,
  .contenido-oculto .gal-grid{ display:none !important; }



  /* Footer móvil: menú completo en una sola línea */
  @media (max-width:720px){
    footer .wrap{
      padding-left:16px;
      padding-right:16px;
    }
    .footer-top{
      flex-direction:column;
      align-items:flex-start;
      gap:24px;
    }
    footer nav{
      width:100%;
      max-width:100%;
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    footer nav::-webkit-scrollbar{
      display:none;
    }
    footer nav ul{
      width:100%;
      display:flex;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:space-between;
      gap:clamp(8px,2.5vw,14px);
    }
    footer nav li{
      flex:0 0 auto;
    }
    footer nav a{
      display:block;
      white-space:nowrap;
      font-size:clamp(10px,3vw,12px);
      line-height:1.2;
    }
  }

/* Inicio: composición aprobada, conservando la paleta y estructura general */
  header{
    background:rgba(5,20,35,.98);
    padding:18px 0;
    min-height:96px;
    display:flex;
    align-items:center;
    box-shadow:0 1px 0 rgba(245,247,245,.04);
  }
  header .wrap{max-width:1280px;width:100%;padding:0 28px;}
  header.scrolled{
    background:rgba(5,20,35,.96);
    padding:12px 0;
    min-height:72px;
  }
  .logo-img{height:52px;}
  nav.main-nav ul{gap:8px;}
  nav.main-nav a{font-size:16px;padding:12px 16px;border-radius:10px;font-weight:600;}
  nav.main-nav a.active{background:#092845;color:#fff;}
  .nav-right .btn-primary{padding:15px 27px;font-size:16px;border-radius:6px;}

  .hero{
    --hero-navy:#0A2036;
    background:var(--hero-navy);
    color:var(--texto-claro);
    min-height:778px;
    padding:0;
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        var(--hero-navy) 0%,
        rgba(10,32,54,.98) 28%,
        rgba(10,32,54,.78) 39%,
        rgba(10,32,54,.25) 51%,
        transparent 64%);
  }
  .hero-visual{
    position:absolute;
    z-index:0;
    top:96px;
    right:0;
    bottom:0;
    width:68%;
    overflow:hidden;
  }
  .hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center right;
    display:block;
  }
  .hero-layout{
    position:relative;
    z-index:2;
    min-height:778px;
    max-width:1280px;
    padding:96px 28px 0;
    display:flex;
    align-items:center;
  }
  .hero-copy{
    width:min(455px, 39vw);
    padding-bottom:8px;
  }
  .hero-kicker{
    font-family:var(--font-display);
    font-size:clamp(34px,3.25vw,48px);
    line-height:1.05;
    font-weight:500;
    letter-spacing:-.025em;
    margin:0 0 17px;
    color:#F5F7F5;
  }
  .hero h1{
    font-size:clamp(48px,4.65vw,68px);
    line-height:.99;
    letter-spacing:-.035em;
    margin:0 0 29px;
    font-weight:700;
    color:#F5F7F5;
  }
  .hero h1 span{color:#9DD500;}
  .hero .lede{
    font-size:17px;
    line-height:1.65;
    max-width:43ch;
    margin:0 0 39px;
    color:rgba(245,247,245,.78);
  }
  .hero-ctas{gap:18px;}
  .hero-ctas .btn{
    min-height:52px;
    padding:14px 27px;
    justify-content:center;
    border-radius:5px;
    font-size:16px;
  }
  .hero-ctas .btn-primary{min-width:203px;}
  .hero-ctas .btn-ghost-dark{min-width:174px;background:rgba(10,32,54,.34);}

  @media (max-width:1100px){
    header .wrap,.hero-layout{padding-left:24px;padding-right:24px;}
    .hero-visual{width:70%;}
    .hero-copy{width:42vw;}
    .hero::after{background:linear-gradient(90deg,var(--hero-navy) 0%,rgba(10,32,54,.98) 34%,rgba(10,32,54,.65) 51%,transparent 70%);}
  }
  @media (max-width:900px){
    header{min-height:76px;padding:12px 0;}
    html{scroll-padding-top:92px;}
    .logo-img{height:42px;}
    .hero{min-height:auto;padding-top:76px;}
    .hero-layout{min-height:auto;padding:58px 24px 46px;display:block;}
    .hero-copy{width:100%;max-width:600px;}
    .hero-visual{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:min(74vw,620px);min-height:430px;order:2;}
    .hero::after{display:none;}
    .hero h1{font-size:clamp(44px,9vw,64px);}
    .hero-kicker{font-size:clamp(30px,6.8vw,43px);}
    .hero .lede{max-width:50ch;}
  }
  @media (max-width:720px){
    header .wrap{padding:0 20px;}
    .hero-layout{padding:44px 20px 36px;}
    .hero-visual{height:78vw;min-height:360px;}
    .hero-visual img{object-position:58% center;}
    .hero-ctas{flex-direction:column;align-items:stretch;max-width:340px;}
    .hero-ctas .btn{width:100%;}
  }
  @media (max-width:480px){
    .hero h1{font-size:43px;}
    .hero-kicker{font-size:31px;}
    .hero .lede{font-size:15.5px;}
    .hero-visual{min-height:330px;height:86vw;}
  }


  /* Ajuste de copy principal solicitado */
  .hero-copy{
    width:min(650px,46vw);
  }
  .hero-kicker{
    font-family:var(--font-mono);
    font-size:clamp(12px,1.05vw,15px);
    line-height:1.35;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#9DD500;
    margin:0 0 24px;
  }
  .hero h1{
    font-size:clamp(48px,4.25vw,66px);
    line-height:1.08;
    letter-spacing:-.03em;
    margin-bottom:28px;
  }
  @media (max-width:1100px){
    .hero-copy{width:47vw;}
  }
  @media (max-width:900px){
    .hero-copy{width:100%;max-width:650px;}
    .hero-kicker{font-size:13px;}
    .hero h1{font-size:clamp(43px,8.5vw,62px);}
  }
  @media (max-width:480px){
    .hero-kicker{font-size:11px;letter-spacing:.12em;}
    .hero h1{font-size:40px;}
  }

  /* Logo más chico en celulares pequeños, para que no apriete el header */
  @media (max-width:400px){
    header{ min-height:64px; padding:10px 0; }
    html{scroll-padding-top:80px;}
    .logo-img{ height:30px; }
  }

  /* Lightbox para ampliar infografías con un click/tap */
  .infografia-lightbox{
    display:none;
    position:fixed; inset:0; z-index:9999;
    background:rgba(10,16,20,.92);
    align-items:center; justify-content:center;
    padding:24px;
    animation:infografiaFadeIn .18s ease;
  }
  .infografia-lightbox.show{ display:flex; }
  .infografia-lightbox img{
    max-width:100%; max-height:100%;
    border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .infografia-lightbox-close{
    position:absolute; top:16px; right:20px;
    width:44px; height:44px;
    border:none; border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff; font-size:28px; line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .infografia-lightbox-close:hover{ background:rgba(255,255,255,.22); }
  @keyframes infografiaFadeIn{ from{opacity:0;} to{opacity:1;} }

/* ===== BMB v12 — refinamiento visual + responsive ===== */
:root{ --header-h:88px; }
body{ overflow-x:hidden; }
header{
  background:rgba(250,251,249,.97); color:var(--grafito); padding:12px 0;
  min-height:var(--header-h); border-bottom:1px solid rgba(10,32,54,.09);
  box-shadow:0 6px 24px rgba(10,32,54,.06); backdrop-filter:blur(12px);
}
header.scrolled{ background:rgba(250,251,249,.97); padding:10px 0; box-shadow:0 8px 30px rgba(10,32,54,.10); }
header .wrap{ gap:24px; }
.logo{ flex:0 0 auto; min-width:0; }
.logo-img{ height:62px; width:auto; max-width:205px; object-fit:contain; filter:none; }
nav.main-nav{ margin-left:auto; }
nav.main-nav a{ color:rgba(10,32,54,.72); font-weight:600; }
nav.main-nav a:hover{ color:var(--azul); }
nav.main-nav a.active{ color:var(--grafito); background:rgba(6,101,189,.08); box-shadow:inset 0 -2px 0 var(--cobre); }
.nav-toggle span{ background:var(--grafito); }
.hero{ padding-top:calc(var(--header-h) + 54px); }
.hero .lede,.body-copy,.quiene-card p,.step p,.serv-intro-copy,.acc-body p,.acc-body li,#financiacion .body-copy{ text-align:justify; text-justify:inter-word; hyphens:auto; }
#nosotros .section-head{ margin-bottom:34px; }
#nosotros .porque-grid{ gap:46px; }
.quienes-cards{ grid-template-columns:1fr 1fr; gap:18px; }
.quiene-card{ padding:28px; }
#servicios .section-head{ max-width:none; text-align:center; margin-left:auto; margin-right:auto; }
#servicios .section-head h2{ white-space:nowrap; }
.resumen-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; background:transparent; border:0; }
.resumen-card{ border:1px solid var(--linea-clara); border-radius:8px; min-height:100%; }
.resumen-card .icon-circle{ font-size:20px; }
#como-trabajamos > .wrap > .reveal:first-child{ text-align:center; max-width:900px; margin:0 auto 34px; }
#como-trabajamos > .wrap > .reveal:first-child .body-copy{ max-width:none !important; text-align:center; }
.steps{ gap:14px; }
.step{ border-radius:8px; box-shadow:0 8px 24px rgba(10,32,54,.05); }
#financiacion .section-head{ max-width:100%; text-align:center; }
#financiacion .section-head h2{ white-space:nowrap; }
#financiacion .serv-intro-copy{ max-width:1050px; margin:18px auto 0; }
footer .logo-img{ height:50px; max-width:175px; filter:none; }
@media (max-width:1100px){
  :root{--header-h:76px}.logo-img{height:52px;max-width:175px}.nav-right>.btn{display:none} nav.main-nav a{padding:8px 9px;font-size:13px}
  #servicios .section-head h2,#financiacion .section-head h2{white-space:normal}
}
@media (max-width:900px){
  header{min-height:var(--header-h);padding:10px 0}.logo-img{height:50px;max-width:170px}
  nav.main-nav{background:#fff;color:var(--grafito)} nav.main-nav a{color:var(--grafito)}
  /* El fondo del menú móvil pasó a blanco arriba; el botón de cerrar usaba colores pensados
     para fondo oscuro (--texto-claro/--linea-clara) y quedaba casi invisible. */
  .nav-close button{border-color:rgba(10,32,54,.16);color:var(--grafito)}
  .resumen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quienes-cards{grid-template-columns:1fr}
  section{padding:72px 0}.section-head{margin-bottom:36px}
}
@media (max-width:720px){
  :root{--header-h:68px}.wrap{padding-left:18px;padding-right:18px}.logo-img{height:44px;max-width:150px}
  .hero{padding-top:var(--header-h)}
  .hero .lede,.body-copy,.quiene-card p,.step p,.serv-intro-copy,.acc-body p,.acc-body li,#financiacion .body-copy{text-align:left;hyphens:none}
  .resumen-grid{grid-template-columns:1fr}.resumen-card{padding:24px 20px}
  #servicios .section-head{text-align:left}
  #como-trabajamos > .wrap > .reveal:first-child{text-align:left;margin-bottom:28px}
  #como-trabajamos > .wrap > .reveal:first-child .body-copy{text-align:left}
  #financiacion .section-head{text-align:left}
  .chip-row{gap:8px}.chip{font-size:12px}
}
@media (max-width:420px){
  .logo-img{height:40px;max-width:138px}.hero h1{font-size:36px}.section-head h2{font-size:29px}
  .btn{min-height:46px}.quiene-card{padding:22px}.step{padding:22px 18px}
}
/* V13 — checklists legibles: título y descripción apilados, nunca en columnas */
.check-list li { display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:11px; align-items:start; }
.check-list li > svg { grid-column:1; margin-top:4px; }
.check-list .check-content { grid-column:2; min-width:0; display:block; }
.check-list .check-title { display:block; margin:0 0 3px; color:var(--texto-claro); font-weight:700; line-height:1.35; }
.check-list .check-desc { display:block; width:100%; color:var(--texto-claro-suave); line-height:1.6; text-align:justify; text-justify:inter-word; hyphens:auto; }
@media (max-width:720px){
  .check-list li { grid-template-columns:17px minmax(0,1fr); column-gap:9px; font-size:14px; }
  .check-list .check-title { margin-bottom:4px; }
  .check-list .check-desc { text-align:left; hyphens:none; line-height:1.55; }
}

/* V14 — legibilidad editorial y responsive */
/* Quiénes somos y Prosumidores: alineación natural, sin justificación */
#nosotros .body-copy,
#nosotros .quiene-card p,
.prosumidores-box p,
.prosumidores-box li {
  text-align:left !important;
  text-justify:auto !important;
  hyphens:none !important;
  overflow-wrap:normal;
  word-break:normal;
}

/* Financiación: una sola introducción, lectura fluida y sin cortes de palabras */
#financiacion .section-head { max-width:1180px; margin-left:auto; margin-right:auto; }
#financiacion .section-head h2 { max-width:1180px; margin-left:auto; margin-right:auto; }
#financiacion .serv-intro-copy {
  max-width:1180px;
  margin:18px auto 0;
  text-align:left !important;
  text-justify:auto !important;
  hyphens:none !important;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.72;
}
#financiacion .financing-options {
  max-width:1180px;
  margin:30px auto 34px;
  text-align:left;
}
#financiacion .financing-options .label-mini { margin-top:0; }
#financiacion .financing-options .body-copy,
#financiacion .financing-options p { text-align:left !important; hyphens:none !important; }
#financiacion .callout-card { margin-top:0; }

/* Bombeo forma parte del mismo acordeón de sistemas */
#servicios .acc-group .acc-item .acc-body > p,
#servicios .acc-group .acc-item .callout-card p { overflow-wrap:normal; word-break:normal; }

/* Tablet y celular: ningún texto justificado, sin excepciones */
@media (max-width:900px){
  body, body p, body li, body dd, body blockquote,
  .hero .lede, .body-copy, .quiene-card p, .step p, .serv-intro-copy,
  .acc-body p, .acc-body li, .check-list .check-desc,
  #financiacion .body-copy, #financiacion .serv-intro-copy,
  .prosumidores-box p, .prosumidores-box li {
    text-align:left !important;
    text-justify:auto !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    overflow-wrap:normal;
    word-break:normal;
  }
  #financiacion .section-head { text-align:left; }
  #financiacion .financing-options { margin-top:24px; margin-bottom:28px; }
}

/* V15 — criterio cliente: párrafos justificados en todos los dispositivos */
p,
.body-copy,
.hero .lede,
.quiene-card p,
.step p,
.serv-intro-copy,
.acc-body p,
.acc-body li,
.check-list .check-desc,
#financiacion .body-copy,
#financiacion .financing-options p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal;
  word-break: normal;
}

/* Los encabezados, etiquetas, botones y textos breves conservan su alineación de componente. */
@media (max-width: 900px) {
  p,
  .body-copy,
  .hero .lede,
  .quiene-card p,
  .step p,
  .serv-intro-copy,
  .acc-body p,
  .acc-body li,
  .check-list .check-desc,
  #financiacion .body-copy,
  #financiacion .financing-options p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* V16 — tipografía responsive para conservar justificado sin ríos de espacio */
/* Desktop conserva la escala de V15. En pantallas angostas se gana ancho útil y se compacta
   ligeramente el cuerpo; la justificación se mantiene por requisito del cliente. */
@media (max-width: 900px) {
  .wrap { padding-left:18px; padding-right:18px; }

  p,
  .body-copy,
  .hero .lede,
  .quiene-card p,
  .step p,
  .serv-intro-copy,
  .acc-body p,
  .acc-body li,
  .check-list .check-desc,
  #financiacion .body-copy,
  #financiacion .financing-options p {
    font-size:15px;
    line-height:1.62;
    letter-spacing:-0.012em;
    word-spacing:-0.035em;
    text-align:justify !important;
    text-align-last:left;
    text-justify:inter-word;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }

  /* En tablet los bloques de lectura evitan columnas internas demasiado angostas. */
  .check-list .check-content,
  .acc-body,
  .quiene-card,
  #financiacion .serv-intro-copy,
  #financiacion .financing-options { min-width:0; width:100%; }
}

@media (max-width: 640px) {
  .wrap { padding-left:15px; padding-right:15px; }

  p,
  .body-copy,
  .hero .lede,
  .quiene-card p,
  .step p,
  .serv-intro-copy,
  .acc-body p,
  .acc-body li,
  .check-list .check-desc,
  #financiacion .body-copy,
  #financiacion .financing-options p {
    font-size:14.5px;
    line-height:1.58;
    letter-spacing:-0.018em;
    word-spacing:-0.055em;
  }

  .check-list li { grid-template-columns:16px minmax(0,1fr); column-gap:8px; }
  .check-list .check-title { font-size:14.5px; line-height:1.35; }
}

@media (max-width: 390px) {
  .wrap { padding-left:13px; padding-right:13px; }
  p,
  .body-copy,
  .hero .lede,
  .quiene-card p,
  .step p,
  .serv-intro-copy,
  .acc-body p,
  .acc-body li,
  .check-list .check-desc,
  #financiacion .body-copy,
  #financiacion .financing-options p {
    font-size:14px;
    line-height:1.56;
    letter-spacing:-0.02em;
    word-spacing:-0.065em;
  }
}

/* V17 — correcciones de legibilidad y justificación solicitadas */
/* Quiénes somos: título contenido y párrafos justificados en todos los breakpoints */
#nosotros .section-head h2{
  font-size:clamp(28px, 3.2vw, 46px) !important;
  line-height:1.08 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
#nosotros .body-copy,
#nosotros .quiene-card p{
  text-align:justify !important;
  text-align-last:left !important;
  text-justify:inter-word !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

/* Cómo trabajamos: encabezado ordenado y todos los textos de contenido justificados */
#como-trabajamos > .wrap > .reveal:first-child{
  text-align:center !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#como-trabajamos > .wrap > .reveal:first-child .eyebrow,
#como-trabajamos > .wrap > .reveal:first-child h3{
  text-align:center !important;
}
#como-trabajamos > .wrap > .reveal:first-child .body-copy{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:justify !important;
  text-align-last:left !important;
}
#como-trabajamos .step p,
#como-trabajamos .prosumidores-box p,
#como-trabajamos .prosumidores-box li{
  text-align:justify !important;
  text-align-last:left !important;
  text-justify:inter-word !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}
#como-trabajamos .prosumidores-box p{ max-width:none !important; }

/* Regla final: ningún breakpoint puede revertir los párrafos a alineación izquierda */
p,
.body-copy,
.hero .lede,
.quiene-card p,
.step p,
.serv-intro-copy,
.acc-body p,
.check-list .check-desc,
.prosumidores-box p{
  text-align:justify !important;
  text-align-last:left !important;
  text-justify:inter-word !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
  word-break:normal !important;
}

@media (max-width:900px){
  #nosotros .section-head h2{font-size:clamp(26px,5vw,36px) !important;}
  #como-trabajamos > .wrap > .reveal:first-child{max-width:100% !important;}
}
@media (max-width:640px){
  #nosotros .section-head h2{font-size:clamp(24px,7.2vw,31px) !important; line-height:1.12 !important;}
  #como-trabajamos > .wrap > .reveal:first-child .body-copy{max-width:100% !important;}
}


/* V18 — encabezado Cómo trabajamos unificado */
#como-trabajamos .process-heading{
  width:100%;
  max-width:920px;
  margin:0 auto 38px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center !important;
}
#como-trabajamos .process-heading .eyebrow{
  width:100%;
  margin:0 0 10px !important;
  text-align:center !important;
}
#como-trabajamos .process-heading h2{
  width:100%;
  margin:0 !important;
  font-family:var(--font-display);
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.12;
  text-align:center !important;
}
#como-trabajamos .process-heading .process-subtitle{
  width:100%;
  max-width:760px;
  margin:16px auto 0 !important;
  text-align:center !important;
  text-align-last:center !important;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.55;
  hyphens:none !important;
}
@media (max-width:900px){
  #como-trabajamos .process-heading{margin-bottom:30px;padding:0 14px;}
  #como-trabajamos .process-heading h2{font-size:clamp(28px,5vw,36px);}
}
@media (max-width:640px){
  #como-trabajamos .process-heading{margin-bottom:24px;padding:0 4px;}
  #como-trabajamos .process-heading h2{font-size:clamp(26px,7.4vw,32px);}
  #como-trabajamos .process-heading .process-subtitle{font-size:14.5px;line-height:1.5;}
}

/* V19 — alineaciones finales solicitadas */
/* Cómo trabajamos: los tres elementos pertenecen a un único encabezado centrado. */
#como-trabajamos .process-heading{
  max-width:1000px !important;
  margin:0 auto 34px !important;
  padding:0 20px !important;
  display:block !important;
  text-align:center !important;
}
#como-trabajamos .process-heading > .eyebrow,
#como-trabajamos .process-heading > h2,
#como-trabajamos .process-heading > .process-subtitle{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  text-align-last:center !important;
  align-self:center !important;
}
#como-trabajamos .process-heading > .eyebrow{ margin-bottom:12px !important; }
#como-trabajamos .process-heading > h2{ margin-bottom:16px !important; }
#como-trabajamos .process-heading > .process-subtitle{
  max-width:820px !important;
  margin-top:0 !important;
}

/* Nosotros: en escritorio el video baja para comenzar a la altura del bloque Visión. */
@media (min-width:881px){
  #nosotros .porque-grid{ align-items:start !important; }
  #nosotros .porque-visual{
    margin-top:205px !important;
    height:360px !important;
  }
  #nosotros .nosotros-video{ height:100% !important; object-fit:cover !important; }
}
@media (max-width:880px){
  #nosotros .porque-visual{ margin-top:18px !important; height:auto !important; }
}

@media (max-width:640px){
  #como-trabajamos .process-heading{padding:0 6px !important;margin-bottom:24px !important;}
  #como-trabajamos .process-heading > .eyebrow{margin-bottom:10px !important;}
  #como-trabajamos .process-heading > h2{margin-bottom:12px !important;}
}

/* V20 — corrección de composición Nosotros + alineación de Cómo trabajamos */
/* Nosotros: recuperar una grilla equilibrada; el video acompaña al texto, sin hueco artificial. */
@media (min-width:881px){
  #nosotros .porque-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr) !important;
    gap:52px !important;
    align-items:start !important;
  }
  #nosotros .porque-visual{
    margin-top:0 !important;
    height:360px !important;
    align-self:start !important;
  }
  #nosotros .nosotros-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  #nosotros .quienes-cards{margin-top:34px !important;}
}
@media (max-width:880px){
  #nosotros .porque-grid{grid-template-columns:1fr !important;gap:24px !important;}
  #nosotros .porque-visual{margin-top:0 !important;height:auto !important;}
  #nosotros .nosotros-video{width:100% !important;height:auto !important;aspect-ratio:16/9 !important;object-fit:cover !important;}
}

/* Cómo trabajamos: misma alineación izquierda y ancho de contenedor que Proyectos/section-head. */
#como-trabajamos .process-heading{
  width:100% !important;
  max-width:640px !important;
  margin:0 0 42px 0 !important;
  padding:0 !important;
  display:block !important;
  text-align:left !important;
}
#como-trabajamos .process-heading > .eyebrow,
#como-trabajamos .process-heading > h2,
#como-trabajamos .process-heading > .process-subtitle{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
  text-align-last:left !important;
  align-self:auto !important;
}
#como-trabajamos .process-heading > .eyebrow{margin:0 0 12px !important;}
#como-trabajamos .process-heading > h2{
  margin:0 0 16px !important;
  font-size:clamp(26px,3.4vw,38px) !important;
  line-height:1.15 !important;
}
#como-trabajamos .process-heading > .process-subtitle{
  margin:0 !important;
  font-size:15.5px !important;
  line-height:1.7 !important;
  hyphens:none !important;
}
@media (max-width:900px){
  #como-trabajamos .process-heading{max-width:100% !important;margin-bottom:32px !important;}
  #como-trabajamos .process-heading > h2{font-size:clamp(26px,5vw,34px) !important;}
  #como-trabajamos .process-heading > .process-subtitle{font-size:15px !important;}
}
@media (max-width:640px){
  #como-trabajamos .process-heading{padding:0 !important;margin-bottom:26px !important;}
  #como-trabajamos .process-heading > h2{font-size:clamp(24px,7vw,30px) !important;}
  #como-trabajamos .process-heading > .process-subtitle{font-size:14.5px !important;line-height:1.6 !important;}
}

/* V21 — ajustes de escritorio solicitados sobre V20 */
@media (min-width: 1100px){
  /* Cómo trabajamos: conservar cuatro pasos, pero dar más ancho útil al texto. */
  #como-trabajamos .steps{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #como-trabajamos .step{
    padding:26px 18px !important;
  }
  #como-trabajamos .step h3{
    font-size:15px !important;
    line-height:1.28 !important;
  }
  #como-trabajamos .step p{
    font-size:12.4px !important;
    line-height:1.58 !important;
    letter-spacing:-0.012em !important;
    word-spacing:-0.045em !important;
    text-align:justify !important;
    text-align-last:left !important;
    text-justify:auto !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /* Nosotros: más presencia horizontal para el video sin crear huecos verticales. */
  #nosotros .porque-grid{
    grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr) !important;
    gap:44px !important;
  }
  #nosotros .porque-visual{
    width:100% !important;
    height:390px !important;
    margin:0 !important;
  }
  #nosotros .nosotros-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* V22 — ajustes puntuales desktop sobre V21: título en una línea y video alineado con Visión */
@media (min-width:1100px){
  /* El encabezado conserva su posición, pero deja de estar limitado a 640px. */
  #nosotros .section-head{
    max-width:100% !important;
    width:100% !important;
  }
  #nosotros .section-head h2{
    width:100% !important;
    max-width:none !important;
    white-space:nowrap !important;
    font-size:clamp(32px,3vw,44px) !important;
    line-height:1.08 !important;
  }

  /* Mismo eje y mismo ancho de columnas que Misión / Visión. */
  #nosotros .porque-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:20px !important;
    align-items:start !important;
  }
  #nosotros .porque-visual{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    height:390px !important;
  }
  #nosotros .nosotros-video{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* V23 — refinamiento final de textos justificados en tarjetas de Cómo trabajamos (desktop) */
@media (min-width:1100px){
  #como-trabajamos .steps{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #como-trabajamos .step{
    padding:26px 14px 28px !important;
  }
  #como-trabajamos .step h3{
    font-size:15px !important;
    line-height:1.28 !important;
    margin-bottom:12px !important;
  }
  #como-trabajamos .step p{
    /* Arial resulta algo más compacta que Public Sans en columnas estrechas. */
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:12.5px !important;
    line-height:1.58 !important;
    font-weight:400 !important;
    letter-spacing:-0.012em !important;
    word-spacing:-0.075em !important;
    text-align:justify !important;
    text-align-last:left !important;
    text-justify:inter-word !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

/* V24 — alinear el encabezado de Cómo trabajamos con el borde izquierdo de las tarjetas */
#como-trabajamos > .wrap > .reveal.process-heading:first-child{
  width:100% !important;
  max-width:none !important;
  margin:0 0 34px 0 !important;
  padding:0 !important;
  text-align:left !important;
}
#como-trabajamos > .wrap > .reveal.process-heading:first-child > .eyebrow,
#como-trabajamos > .wrap > .reveal.process-heading:first-child > h2,
#como-trabajamos > .wrap > .reveal.process-heading:first-child > .process-subtitle{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
  text-align-last:left !important;
}
@media (max-width:900px){
  #como-trabajamos > .wrap > .reveal.process-heading:first-child{margin-bottom:30px !important;}
}
@media (max-width:640px){
  #como-trabajamos > .wrap > .reveal.process-heading:first-child{margin-bottom:26px !important;}
}

/* ===== V25 · Header branding + CTA ===== */
@media (min-width:901px){
  header{padding:10px 0;}
  header .wrap{max-width:1500px;gap:26px;}
  .logo{display:flex;align-items:center;flex:0 0 auto;overflow:visible;}
  .logo-img{
    width:236px;height:68px;max-width:none;
    object-fit:contain;object-position:left center;
    image-rendering:auto;
  }
  nav.main-nav{margin-left:auto;}
  .nav-right{margin-left:14px;}
  .nav-right .budget-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:11px;
    min-height:58px;padding:0 22px;border-radius:12px;
    font-size:16px;font-weight:700;white-space:nowrap;
    box-shadow:0 8px 20px rgba(245,180,0,.18);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }
  .nav-right .budget-cta:hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(245,180,0,.25);filter:saturate(1.04);}
  .budget-icon{width:22px;height:22px;flex:none;}
  .budget-arrow{width:18px;height:18px;flex:none;transition:transform .18s ease;}
  .budget-cta:hover .budget-arrow{transform:translateX(3px);}
}
@media (max-width:1100px) and (min-width:901px){
  .logo-img{width:190px;height:58px;}
  header .wrap{gap:14px;padding-left:22px;padding-right:22px;}
  .nav-right{margin-left:4px;}
  .nav-right .budget-cta{min-height:52px;padding:0 16px;font-size:14px;gap:8px;}
  .budget-icon{width:19px;height:19px}.budget-arrow{width:16px;height:16px}
}
@media (max-width:900px){
  .logo-img{width:184px;height:54px;max-width:none;object-fit:contain;object-position:left center;}
  .budget-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
  .budget-icon{width:20px;height:20px}.budget-arrow{width:17px;height:17px}
}
@media (max-width:420px){
  .logo-img{width:158px;height:46px;max-width:none;}
}


/* ===== V26 · CTA de contacto ===== */
#contacto .contact-submit{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 20px !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px !important;
  box-shadow:0 8px 20px rgba(245,180,0,.18);
  font-weight:700;
  letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
#contacto .contact-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 11px 25px rgba(245,180,0,.26);
  filter:saturate(1.04);
}
#contacto .contact-submit-icon{width:20px;height:20px;flex:none;}
#contacto .contact-submit-arrow{width:17px;height:17px;flex:none;transition:transform .18s ease;}
#contacto .contact-submit:hover .contact-submit-arrow{transform:translateX(3px);}
#contacto .form-response-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  opacity:.9;
  text-align:left !important;
  text-align-last:left !important;
}
#contacto .form-response-note svg{width:17px;height:17px;flex:none;color:var(--yellow,#ffbd00);}
#contacto .form-response-note span{text-align:left !important;}
@media (max-width:640px){
  #contacto .contact-submit{width:100%;min-height:52px;padding:0 18px !important;}
  #contacto .form-response-note{justify-content:flex-start;font-size:13px;line-height:1.4;}
}

/* =========================================================
   V27 — Navegación desktop más limpia + transición rápida
   ========================================================= */
@media (min-width: 901px){
  nav.main-nav ul{ gap:18px; }
  nav.main-nav a{
    position:relative;
    padding:12px 4px 11px;
    border-radius:0;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(10,32,54,.72);
    transition:color .13s ease;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--cobre);
    transform:translateX(-50%);
    transition:width .13s ease;
  }
  nav.main-nav a:hover,
  nav.main-nav a.active{ color:var(--azul); }
  nav.main-nav a:hover::after{ width:24px; }
  nav.main-nav a.active::after{ width:32px; }
}

/* =========================================================
   V28 — Header moderno / floating glass navigation
   ========================================================= */
@media (min-width:901px){
  :root{ --header-h:108px; }
  header#siteHeader{
    top:14px;
    left:18px;
    right:18px;
    width:auto;
    min-height:0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    transition:top .12s ease, left .12s ease, right .12s ease;
  }
  header#siteHeader.scrolled{top:10px;padding:0;background:transparent;box-shadow:none;}
  header#siteHeader > .wrap{
    max-width:1540px;
    min-height:78px;
    padding:8px 12px 8px 18px;
    gap:18px;
    border:1px solid rgba(10,32,54,.09);
    border-radius:22px;
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
    box-shadow:0 12px 34px rgba(10,32,54,.10),0 1px 0 rgba(255,255,255,.9) inset;
  }
  .logo-img{width:220px;height:60px;max-width:none;object-fit:contain;object-position:left center;}
  nav.main-nav{margin-left:auto;}
  nav.main-nav ul{gap:5px;align-items:center;}
  nav.main-nav a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 12px;
    border-radius:12px;
    color:rgba(10,32,54,.68);
    font-size:14px;
    font-weight:650;
    letter-spacing:-.012em;
    background:transparent !important;
    box-shadow:none !important;
    transition:color .11s ease,background-color .11s ease,transform .11s ease;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:50%;bottom:5px;
    width:5px;height:5px;
    border-radius:50%;
    background:var(--cobre);
    opacity:0;
    transform:translate(-50%,4px) scale(.6);
    transition:opacity .11s ease,transform .11s ease;
  }
  nav.main-nav a:hover{
    color:var(--azul);
    background:rgba(6,101,189,.055) !important;
    transform:translateY(-1px);
  }
  nav.main-nav a:hover::after{opacity:.65;transform:translate(-50%,0) scale(.8);}
  nav.main-nav a.active{color:var(--azul);background:rgba(6,101,189,.075) !important;}
  nav.main-nav a.active::after{opacity:1;transform:translate(-50%,0) scale(1);}
  .nav-right{margin-left:4px;gap:10px;}
  .nav-right .budget-cta{
    min-height:54px;
    padding:0 19px;
    gap:9px;
    border:1px solid rgba(225,155,0,.24);
    border-radius:15px;
    background:linear-gradient(135deg,#ffc928 0%,#ffb900 100%);
    color:#10202f;
    font-size:14.5px;
    font-weight:750;
    box-shadow:0 9px 20px rgba(245,180,0,.22),inset 0 1px 0 rgba(255,255,255,.45);
    transition:transform .11s ease,box-shadow .11s ease,filter .11s ease;
  }
  .nav-right .budget-cta:hover{transform:translateY(-2px);box-shadow:0 13px 25px rgba(245,180,0,.28);filter:saturate(1.04) brightness(1.015);}
  .nav-right .budget-icon{width:20px;height:20px;}
  .nav-right .budget-arrow{width:17px;height:17px;transition:transform .11s ease;}
  .nav-right .budget-cta:hover .budget-arrow{transform:translateX(4px);}
  .hero{padding-top:calc(var(--header-h) + 44px);}
}
@media (min-width:901px) and (max-width:1240px){
  header#siteHeader{left:10px;right:10px;top:10px;}
  header#siteHeader > .wrap{padding-left:14px;gap:10px;border-radius:18px;}
  .logo-img{width:174px;height:52px;}
  nav.main-nav ul{gap:1px;}
  nav.main-nav a{padding:0 8px;font-size:12.5px;}
  .nav-right .budget-cta{padding:0 14px;min-height:50px;font-size:13px;}
  .nav-right .budget-icon{width:18px;height:18px;}
}
@media (max-width:900px){
  header#siteHeader{
    top:8px;left:8px;right:8px;width:auto;padding:0;background:transparent;border:0;box-shadow:none;min-height:0;
  }
  header#siteHeader.scrolled{padding:0;background:transparent;box-shadow:none;}
  header#siteHeader > .wrap{
    min-height:66px;padding:7px 10px 7px 13px;border-radius:18px;
    border:1px solid rgba(10,32,54,.09);background:rgba(255,255,255,.93);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:0 10px 28px rgba(10,32,54,.10);
  }
  .logo-img{width:166px;height:48px;}
  .nav-toggle{width:44px;height:44px;border-radius:13px;background:rgba(6,101,189,.07);border:1px solid rgba(6,101,189,.08);}
  .nav-toggle span{width:20px;}
  .hero{padding-top:94px;}
}
@media (max-width:420px){
  header#siteHeader{left:6px;right:6px;top:6px;}
  header#siteHeader > .wrap{min-height:60px;padding:6px 8px 6px 10px;border-radius:16px;}
  .logo-img{width:142px;height:43px;}
}

/* =========================================================
   V29 — Ajustes finos solicitados sobre V28
   ========================================================= */
/* Desktop: acercar la navegación al logo / margen izquierdo,
   dejando que el CTA absorba el espacio restante. */
@media (min-width:901px){
  header#siteHeader > .wrap{justify-content:flex-start;}
  header#siteHeader nav.main-nav{
    margin-left:2px !important;
    margin-right:0 !important;
  }
  header#siteHeader .nav-right{
    margin-left:auto !important;
  }

  /* Financiación: eyebrow, título e introducción comparten el mismo eje izquierdo. */
  #financiacion .section-head{
    width:100% !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:left !important;
  }
  #financiacion .section-head > .eyebrow,
  #financiacion .section-head > h2,
  #financiacion .section-head > .serv-intro-copy{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #financiacion .section-head > .eyebrow,
  #financiacion .section-head > h2{
    text-align:left !important;
    text-align-last:left !important;
  }
}

/* =========================================================
   V30 — Header al borde superior + navegación centrada
   ========================================================= */
@media (min-width:901px){
  :root{ --header-h:92px; }
  header#siteHeader,
  header#siteHeader.scrolled{
    top:0;
    left:0;
    right:0;
    width:100%;
    padding:0;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
    border-bottom:1px solid rgba(10,32,54,.08);
    box-shadow:0 8px 26px rgba(10,32,54,.08);
  }
  header#siteHeader > .wrap{
    position:relative;
    width:100%;
    max-width:none;
    min-height:88px;
    padding:8px 30px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .logo{position:relative;z-index:2;flex:0 0 auto;}
  .nav-right{position:relative;z-index:2;margin-left:auto;}
  .hero{padding-top:calc(var(--header-h) + 34px);}
}

/* Centro geométrico real del menú en pantallas amplias */
@media (min-width:1201px){
  header#siteHeader > .wrap{display:flex;align-items:center;}
  nav.main-nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0;
  }
}

/* En anchos intermedios conserva espacio y evita solapamientos */
@media (min-width:901px) and (max-width:1200px){
  header#siteHeader > .wrap{padding-left:18px;padding-right:18px;gap:10px;}
  nav.main-nav{margin-left:auto;}
}

/* =========================================================
   V31 — Servicios: título alineado al eje izquierdo
   ========================================================= */
@media (min-width:901px){
  #servicios > .wrap > .section-head{
    width:100% !important;
    max-width:1180px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }
  #servicios > .wrap > .section-head > .eyebrow,
  #servicios > .wrap > .section-head > h2{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
    text-align-last:left !important;
  }
}

/* =========================================================
   V32 — H2 responsivos en tablet y mobile
   Prioriza una sola línea sin alterar desktop.
   ========================================================= */
@media (max-width:900px){
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    width:100% !important;
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:clamp(20px, 4.15vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.035em !important;
  }
}

@media (max-width:640px){
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    font-size:clamp(15px, 4.55vw, 29px) !important;
    letter-spacing:-0.045em !important;
  }
}

@media (max-width:390px){
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    font-size:clamp(14px, 4.35vw, 18px) !important;
    letter-spacing:-0.05em !important;
  }
}

/* =========================================================
   V33 — H2 seguros en tablet/mobile: una línea sólo si entra
   Nunca desbordan el contenedor ni generan scroll horizontal.
   ========================================================= */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden;}
  .section-head,
  #como-trabajamos .process-heading{min-width:0;max-width:100%;}
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    font-size:clamp(22px,4.6vw,34px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.035em !important;
  }
  /* Los dos títulos más largos necesitan una escala específica. */
  #nosotros .section-head > h2,
  #financiacion .section-head > h2{
    font-size:clamp(19px,3.75vw,31px) !important;
  }
}
@media (max-width:640px){
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    font-size:clamp(21px,6.2vw,29px) !important;
    letter-spacing:-0.04em !important;
  }
  #nosotros .section-head > h2,
  #financiacion .section-head > h2{
    font-size:clamp(20px,5.25vw,26px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.045em !important;
  }
}
@media (max-width:390px){
  .section-head > h2,
  #como-trabajamos .process-heading > h2{
    font-size:clamp(20px,6.4vw,25px) !important;
  }
  #nosotros .section-head > h2,
  #financiacion .section-head > h2{
    font-size:clamp(19px,5.7vw,22px) !important;
  }
}

/* =========================================================
   V34 — Menú desktop: tipografía apenas más grande
   ========================================================= */
@media (min-width:901px){
  nav.main-nav a{
    font-size:15px !important;
  }
}

/* V35 — Nosotros: texto arriba + video abajo, ambos al ancho completo del contenedor */
#nosotros .porque-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:28px !important;
  width:100% !important;
  margin-top:18px !important;
  align-items:start !important;
}
#nosotros .porque-grid > div:first-child{
  width:100% !important;
  max-width:none !important;
}
#nosotros .porque-grid .body-copy{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  text-align:justify !important;
  text-align-last:left !important;
  text-justify:inter-word !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}
#nosotros .porque-visual{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
}
#nosotros .nosotros-video{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  aspect-ratio:16/7 !important;
  object-fit:cover !important;
  border-radius:12px !important;
}
@media (max-width:880px){
  #nosotros .porque-grid{gap:22px !important;margin-top:14px !important;}
  #nosotros .nosotros-video{aspect-ratio:16/9 !important;}
}

/* =========================================================
   V37 — Header al borde también en tablet/mobile + justificado global limpio
   ========================================================= */
/* Mantener el justificado solicitado sin forzar separación artificial. */
p,
.body-copy,
.lede,
.serv-intro-copy,
.acc-body p,
.acc-body li,
.check-list .check-desc,
.quiene-card p,
.step p,
#nosotros .porque-grid .body-copy,
#financiacion .body-copy{
  text-align:justify !important;
  text-align-last:left !important;
  text-justify:auto !important;
  word-spacing:0 !important;
  letter-spacing:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* En pantallas angostas evitamos reglas previas que comprimían palabras. */
@media (max-width:900px){
  p,
  .body-copy,
  .lede,
  .serv-intro-copy,
  .acc-body p,
  .acc-body li,
  .check-list .check-desc,
  .quiene-card p,
  .step p,
  #nosotros .porque-grid .body-copy,
  #financiacion .body-copy{
    word-spacing:0 !important;
    letter-spacing:normal !important;
    text-justify:auto !important;
  }

  /* Igual que desktop: el header nace exactamente en el borde superior. */
  header#siteHeader,
  header#siteHeader.scrolled{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:rgba(255,255,255,.94) !important;
    border:0 !important;
    border-bottom:1px solid rgba(10,32,54,.08) !important;
    box-shadow:0 8px 26px rgba(10,32,54,.08) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }
  header#siteHeader > .wrap{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .hero{padding-top:88px !important;}
}

@media (max-width:420px){
  header#siteHeader,
  header#siteHeader.scrolled{top:0 !important;left:0 !important;right:0 !important;}
  header#siteHeader > .wrap{padding-left:14px !important;padding-right:12px !important;}
  .hero{padding-top:80px !important;}
}
/* V43 — MOBILE FIRST: legibilidad y tarjetas optimizadas en celular/tablet.
   En <=900px se prioriza lectura natural: texto corrido a la izquierda, sin justificación,
   sin compresión artificial de palabras y sin guionado. Desktop conserva el diseño existente. */
@media (max-width:900px){
  /* Regla editorial final para tablet/mobile. */
  body p:not(.eyebrow):not(.kicker):not(.tag):not(.step-num),
  body .body-copy,
  body .hero .lede,
  body .serv-intro-copy,
  body .quiene-card p,
  body #servicios .acc-body p,
  body #servicios .acc-body li,
  body #servicios .check-list .check-desc,
  body #como-trabajamos .process-subtitle,
  body #como-trabajamos .step p,
  body #como-trabajamos .prosumidores-box p,
  body #como-trabajamos .prosumidores-box li,
  body #financiacion .serv-intro-copy,
  body #financiacion .financing-options p,
  body #financiacion .callout-card p,
  body #marcas .section-head > p:not(.eyebrow){
    text-align:left !important;
    text-align-last:auto !important;
    text-justify:auto !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    word-spacing:normal !important;
    letter-spacing:normal !important;
    white-space:normal !important;
  }

  /* Tablet: dos tarjetas amplias; nunca cuatro columnas comprimidas. */
  #como-trabajamos .steps{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:stretch !important;
  }
  #como-trabajamos .step{
    padding:24px 22px !important;
    border-radius:12px !important;
    min-height:0 !important;
    height:auto !important;
  }
  #como-trabajamos .step h3{font-size:18px !important;line-height:1.28 !important;margin-bottom:12px !important;}
  #como-trabajamos .step p{font-size:15px !important;line-height:1.62 !important;margin:0 !important;}

  #como-trabajamos .prosumidores-box{
    margin-top:22px !important;
    padding:24px 22px !important;
    border-radius:12px !important;
  }
  #como-trabajamos .prosumidores-box h3{font-size:20px !important;line-height:1.25 !important;}
  #como-trabajamos .prosumidores-box p,
  #como-trabajamos .prosumidores-box li{font-size:15px !important;line-height:1.62 !important;}

  /* Acordeón: más ancho útil y listas cómodas de leer. */
  #servicios .acc-item summary{padding-left:18px !important;padding-right:18px !important;}
  #servicios .acc-item .acc-body{padding:0 18px 22px !important;max-width:none !important;width:100% !important;}
  #servicios .acc-body p,
  #servicios .acc-body li,
  #servicios .check-list .check-desc{font-size:15px !important;line-height:1.62 !important;}
  #servicios .check-list li{grid-template-columns:17px minmax(0,1fr) !important;column-gap:10px !important;}
  #servicios .check-list .check-title{font-size:15px !important;line-height:1.35 !important;}

  /* Financiación y marcas: bloques de lectura a ancho completo. */
  #financiacion .section-head,
  #marcas .section-head{max-width:none !important;width:100% !important;text-align:left !important;}
  #financiacion .serv-intro-copy,
  #marcas .section-head > p:not(.eyebrow){max-width:none !important;font-size:15px !important;line-height:1.62 !important;}
  #financiacion .financing-options,
  #financiacion .callout-card{max-width:none !important;width:100% !important;border-radius:12px !important;}
  #financiacion .financing-options{padding:22px !important;}
  #financiacion .callout-card{padding:22px !important;}
  #financiacion .callout-card p{font-size:15px !important;line-height:1.62 !important;}
}

@media (max-width:600px){
  /* Celular: una tarjeta por fila y máximo ancho de lectura. */
  .wrap{padding-left:16px !important;padding-right:16px !important;margin-left:auto !important;margin-right:auto !important;}
  section{padding-top:58px !important;padding-bottom:58px !important;}

  #como-trabajamos .process-heading{margin-bottom:24px !important;}
  #como-trabajamos .process-heading > .process-subtitle{font-size:15px !important;line-height:1.55 !important;}
  #como-trabajamos .steps{grid-template-columns:1fr !important;gap:14px !important;}
  #como-trabajamos .step{padding:22px 20px !important;border-radius:12px !important;}
  #como-trabajamos .step .step-num{margin-bottom:16px !important;}
  #como-trabajamos .step h3{font-size:19px !important;line-height:1.25 !important;margin-bottom:12px !important;}
  #como-trabajamos .step p{font-size:15px !important;line-height:1.58 !important;}
  #como-trabajamos .prosumidores-box{padding:22px 20px !important;margin-top:18px !important;}
  #como-trabajamos .prosumidores-box h3{font-size:19px !important;}
  #como-trabajamos .prosumidores-box p,
  #como-trabajamos .prosumidores-box li{font-size:15px !important;line-height:1.58 !important;}
  #como-trabajamos .prosumidores-box ul{gap:12px !important;padding-left:18px !important;}

  #servicios .acc-item summary{padding:17px 15px !important;}
  #servicios .acc-item .acc-body{padding:0 15px 20px !important;}
  #servicios .acc-body p,
  #servicios .acc-body li,
  #servicios .check-list .check-desc{font-size:14.5px !important;line-height:1.58 !important;}
  #servicios .check-list .check-title{font-size:14.5px !important;}
  #servicios .prosumidores-inline{padding:13px 14px !important;margin-top:22px !important;font-size:14px !important;line-height:1.4 !important;}

  #financiacion .financing-options,
  #financiacion .callout-card{padding:20px 18px !important;}
  #financiacion .serv-intro-copy,
  #financiacion .callout-card p,
  #marcas .section-head > p:not(.eyebrow){font-size:15px !important;line-height:1.58 !important;}
  #financiacion .chip-row{gap:8px !important;}
  #financiacion .chip{font-size:12.5px !important;line-height:1.3 !important;}
}


/* =========================================================
   V44 — MOBILE FIRST GLOBAL
   Regla final única para TODO el sitio en tablet/celular.
   Prioridad: lectura natural, tarjetas amplias y cero compresión tipográfica.
   ========================================================= */
@media (max-width:900px){
  /* Texto corrido: aplica a todo el sitio, incluso clases no contempladas antes. */
  body p,
  body li,
  body blockquote,
  body .body-copy,
  body .lede,
  body .serv-intro-copy,
  body .process-subtitle,
  body .testi-quote,
  body .check-desc,
  body .proy-cap{
    text-align:left !important;
    text-align-last:auto !important;
    text-justify:auto !important;
    word-spacing:normal !important;
    letter-spacing:normal !important;
    white-space:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
  /* Etiquetas y microcopy conservan su composición visual. */
  body .eyebrow, body .hero-kicker, body .tag, body .label-mini,
  body .step-num, body .badge, body .chip, body .meta, body .testi-stars,
  body .sys-node span, body .flow-node span{
    text-align:inherit !important;
    letter-spacing:revert !important;
  }

  /* Geometría general mobile/tablet. */
  .wrap{width:100% !important;max-width:100% !important;padding-left:22px !important;padding-right:22px !important;}
  .section-head{max-width:none !important;width:100% !important;}
  .body-copy,.serv-intro-copy{max-width:none !important;width:100% !important;}

  /* Tarjetas de TODO el sitio: altura por contenido y lectura cómoda. */
  .quienes-cards,.resumen-grid,.testi-grid,.mini-cards,.porque-list,.steps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:stretch !important;
  }
  .quiene-card,.resumen-card,.testi-card,.mini-card,.porque-item,.step,
  .financing-options,.callout-card,.prosumidores-box,.serv-block{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
  }
  .quiene-card,.resumen-card,.testi-card,.mini-card,.porque-item,.step{
    padding:22px !important;
  }

  /* Acordeón completo */
  #servicios .acc-body{max-width:none !important;width:100% !important;padding-left:18px !important;padding-right:18px !important;}
  #servicios .acc-body p,#servicios .acc-body li,#servicios .check-desc{font-size:15px !important;line-height:1.6 !important;}

  /* Nuestro proceso + Prosumidores */
  #como-trabajamos .step p,#como-trabajamos .prosumidores-box p,#como-trabajamos .prosumidores-box li{font-size:15px !important;line-height:1.6 !important;}

  /* Financiación, marcas, FAQ, contacto, testimonios y resto */
  #financiacion p,#marcas p,#faq p,#contacto p,#testimonios p,#porque-elegirnos p,#como-funciona p,#nosotros p,#galeria p{
    font-size:15px !important;line-height:1.6 !important;
  }
}

@media (max-width:600px){
  .wrap{padding-left:16px !important;padding-right:16px !important;}
  section{padding-top:54px !important;padding-bottom:54px !important;}

  /* En celular todas las colecciones de tarjetas pasan a una sola columna. */
  .quienes-cards,.resumen-grid,.testi-grid,.mini-cards,.porque-list,.steps{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  .quiene-card,.resumen-card,.testi-card,.mini-card,.porque-item,.step{
    padding:20px 18px !important;
  }

  body p,body li,body blockquote,
  body .body-copy,body .lede,body .serv-intro-copy,body .process-subtitle,
  body .testi-quote,body .check-desc,body .proy-cap{
    font-size:14.5px !important;
    line-height:1.58 !important;
  }

  #servicios .acc-item summary{padding:16px 15px !important;}
  #servicios .acc-body{padding:0 15px 19px !important;}
  #servicios .acc-body p,#servicios .acc-body li,#servicios .check-desc,
  #como-trabajamos .step p,#como-trabajamos .prosumidores-box p,#como-trabajamos .prosumidores-box li,
  #financiacion p,#marcas p,#faq p,#contacto p,#testimonios p,#porque-elegirnos p,#como-funciona p,#nosotros p,#galeria p{
    font-size:14.5px !important;
    line-height:1.58 !important;
  }
}

/* =========================================================
   V45 — MOBILE/TABLET AUTHORITATIVE OVERRIDE
   IMPORTANT: this is intentionally the last stylesheet block.
   On narrow screens all reading copy is ragged-right; no justification.
   ========================================================= */
#servicios .acc-body .system-user-line{font-weight:500;max-width:none;margin:18px 0 24px;}
#servicios .prosumidores-inline{margin:28px auto 4px;padding:14px 20px;max-width:720px;text-align:center;font-weight:700;color:var(--azul-2);background:rgba(117,184,52,.10);border:1px solid rgba(117,184,52,.28);border-radius:14px;}

@media (max-width: 900px){
  /* Global reading text: includes p, list copy and nested accordion/card descriptions. */
  body p,
  body li,
  body blockquote,
  body .body-copy,
  body .lede,
  body .serv-intro-copy,
  body .process-subtitle,
  body .testi-quote,
  body .check-desc,
  body .check-list .check-desc,
  body .proy-cap,
  body .system-user-line,
  #servicios .acc-body p,
  #servicios .acc-body li,
  #como-trabajamos .step p,
  #como-trabajamos .prosumidores-box p,
  #como-trabajamos .prosumidores-box li,
  #financiacion p,
  #marcas p,
  #nosotros p,
  #galeria p {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Keep labels/titles/buttons as designed. */
  body .eyebrow, body .hero-kicker, body .tag, body .label-mini,
  body .step-num, body .badge, body .chip, body .meta,
  body h1, body h2, body h3, body h4, body button, body summary,
  #servicios .prosumidores-inline { text-align: initial !important; }

  .wrap{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important;padding-left:22px !important;padding-right:22px !important;}
  .section-head,.body-copy,.serv-intro-copy{max-width:none !important;width:100% !important;}
  .quienes-cards,.resumen-grid,.testi-grid,.mini-cards,.porque-list,#como-trabajamos .steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;align-items:stretch !important;}
  .quiene-card,.resumen-card,.testi-card,.mini-card,.porque-item,#como-trabajamos .step{min-width:0 !important;min-height:0 !important;height:auto !important;padding:22px !important;}
  #servicios .acc-body{max-width:none !important;width:100% !important;padding-left:18px !important;padding-right:18px !important;}
}

@media (max-width: 600px){
  .wrap{padding-left:16px !important;padding-right:16px !important;}
  .quienes-cards,.resumen-grid,.testi-grid,.mini-cards,.porque-list,#como-trabajamos .steps{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;}
  .quiene-card,.resumen-card,.testi-card,.mini-card,.porque-item,#como-trabajamos .step{padding:20px 18px !important;}
  body p,body li,body blockquote,body .body-copy,body .lede,body .serv-intro-copy,body .process-subtitle,body .testi-quote,body .check-desc,body .proy-cap{font-size:14.5px !important;line-height:1.58 !important;}
  #servicios .acc-item summary{padding:16px 15px !important;}
  #servicios .acc-body{padding:0 15px 19px !important;}
}

/* =========================================================
   Corrección de alineación — celular y tablet (auditoría 2026-09-26)
   Estos tres selectores tienen alta especificidad (id + clases) y quedaban
   en "justify" en celular/tablet pese a las reglas mobile-first de más
   arriba (líneas ~2013 y ~1191), por empate/perder en especificidad.
   Se iguala la especificidad y se ubica al final para que gane acá,
   sin tocar el resto del archivo ni la alineación en computadora (>900px).
   ========================================================= */
@media (max-width:900px){
  #nosotros .porque-grid .body-copy,
  #nosotros .body-copy,
  #nosotros .quiene-card p{
    text-align:left !important;
    text-align-last:left !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }
}

/* V15: lectura natural en tarjetas estrechas, incluso en computadora. */
body .hero .lede,
body #servicios .resumen-card p,
body #como-trabajamos .step p {
  text-align:left !important;
  text-align-last:left !important;
  word-spacing:normal !important;
  letter-spacing:normal !important;
}

/* Incluye tablets de 1024 px sin modificar sus grillas. */
@media (min-width:901px) and (max-width:1024px){
  body p, body .check-desc, body .acc-body li,
  body #servicios .acc-body p,
  body #servicios .acc-body li,
  body #servicios .check-list .check-desc,
  body #nosotros .porque-grid .body-copy,
  body #nosotros .quiene-card p,
  body #como-trabajamos .prosumidores-box p,
  body #como-trabajamos .prosumidores-box li,
  body #financiacion p {
    text-align:left !important;
    text-align-last:left !important;
    text-justify:auto !important;
    word-spacing:normal !important;
    letter-spacing:normal !important;
    hyphens:none !important;
  }
}

@media (max-width:880px){
  html.nav-ready nav.main-nav:not(.open){visibility:hidden;}
  nav.main-nav{height:100dvh;}
  .nav-close button{min-width:44px;min-height:44px;}
  nav.main-nav .nav-cta a.btn{display:flex;align-items:center;justify-content:center;}
  /* Sin JS, los enlaces siguen disponibles y no queda un botón inerte. */
  html:not(.nav-ready) header#siteHeader{position:relative !important;}
  html:not(.nav-ready) header#siteHeader > .wrap{flex-wrap:wrap;}
  html:not(.nav-ready) nav.main-nav{
    position:static;transform:none;height:auto;width:100%;order:3;
    padding:12px 0;transition:none;flex-basis:100%;
  }
  html:not(.nav-ready) .nav-toggle,
  html:not(.nav-ready) .nav-close{display:none;}
}