/* =========================================================================
   JASA Estructuras — hoja de las páginas de aterrizaje
   (servicios, aviso de privacidad, gracias y 404)
   Mismos tokens que la home; mobile-first. Molécula Digital.
   ========================================================================= */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

:root{
  --teal:#07768E; --teal-deep:#055B6E; --teal-ink:#08414E; --teal-wash:#E7F2F4;
  --ink:#0E2E37; --body:#41585F; --muted:#5C7178; --white:#fff;
  --paper:#F4F8F9; --paper-2:#E6EEF1; --rule:#D7E1E4; --rule-dim:#E8EFF1;
  --wa:#25D366;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --max:1200px; --gut:clamp(16px,5vw,72px);
  --f-12:12px; --f-14:14px; --f-16:16px;
  --f-18:clamp(16px,1.15vw,18px); --f-21:clamp(18px,1.4vw,21px);
  --f-26:clamp(20px,2vw,26px); --f-42:clamp(28px,3.6vw,42px); --f-56:clamp(31px,5vw,56px);
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sec:clamp(56px,8vw,112px);
  --btn-h:52px; --btn-h-sm:44px;
  --t-fast:150ms;
  --sh-1:0 1px 2px rgba(8,65,78,.06),0 2px 8px rgba(8,65,78,.05);
  --sh-2:0 4px 12px rgba(8,65,78,.08),0 14px 34px rgba(8,65,78,.07);
  --sh-3:0 8px 24px rgba(8,65,78,.10),0 30px 70px rgba(8,65,78,.11);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font-family:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--f-18);line-height:1.62;color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9em;background:var(--paper-2);padding:1px 5px;border-radius:4px}
h1,h2,h3,h4{color:var(--ink);line-height:1.1;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:var(--f-12);
  letter-spacing:.14em;text-transform:uppercase;color:#05566B;display:block;margin-bottom:var(--sp-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-70px;z-index:200;background:var(--teal);color:#fff;
  padding:12px 22px;border-radius:var(--r-pill)}
.skip:focus{top:12px}

/* ---------- botones (idénticos a la home) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--btn-h);padding:12px 24px;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--f-16);line-height:1.2;text-align:center;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             transform var(--t-fast),box-shadow var(--t-fast)}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--sh-1)}
.btn-ghost{border:1.5px solid var(--rule);color:var(--ink);background:var(--white)}
.btn-light{background:#fff;color:var(--teal-ink)}
.btn-line{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-sm{min-height:var(--btn-h-sm);padding:7px 18px;font-size:var(--f-14)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--teal-deep);box-shadow:var(--sh-2);transform:translateY(-2px)}
  .btn-ghost:hover{background:var(--teal-wash);border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px)}
  .btn-light:hover{background:var(--teal-wash);transform:translateY(-2px)}
  .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
}
.ctas{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
@media (min-width:520px){.ctas{display:flex;flex-wrap:wrap}}

/* ---------- barra ---------- */
.bar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);
  box-shadow:0 1px 0 var(--rule-dim),var(--sh-1)}
.bar-in{max-width:var(--max);margin-inline:auto;padding:6px var(--gut);min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.bar-marca{display:flex;align-items:center;min-height:44px;flex:none}
/* el logo es blanco (va sobre foto en la home); aquí se tiñe a teal igual que la barra sólida */
.bar-marca img{height:clamp(26px,2.2vw,32px);width:auto;
  filter:brightness(0) saturate(100%) invert(29%) sepia(83%) saturate(1093%) hue-rotate(163deg) brightness(93%) contrast(101%)}
.bar-nav{display:none}
.bar-cta{display:flex;align-items:center;gap:var(--sp-2)}
.ico-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--rule);color:var(--teal);background:#fff}
.ico-btn svg{width:20px;height:20px}
@media (min-width:900px){
  .bar-nav{display:flex;gap:clamp(16px,2vw,28px);font-size:var(--f-14);font-weight:500;color:var(--ink)}
  .bar-nav a{display:inline-flex;align-items:center;min-height:44px}
  .bar-nav a:hover,.bar-nav a[aria-current]{color:var(--teal)}
}

/* ---------- portada de servicio ---------- */
.hero{padding-block:clamp(20px,4vw,64px) clamp(40px,6vw,88px);overflow:hidden}
.hero-grid{display:grid;gap:var(--sp-6);align-items:center}
.migas{font-size:var(--f-14);color:var(--muted);margin-bottom:var(--sp-4)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.migas li+li::before{content:'/';margin-right:6px;color:var(--rule)}
.migas a{color:var(--teal);font-weight:500}
.hero h1{font-size:var(--f-56);color:var(--teal-ink)}
.hero .lead{font-size:var(--f-21);margin-top:var(--sp-4);color:var(--teal-ink);max-width:52ch}
.fichas{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-5)}
.fichas li{display:flex;align-items:center;gap:11px;background:#fff;
  border:1px solid rgba(7,118,142,.14);border-radius:var(--r-pill);padding:6px 16px 6px 6px;
  font-size:var(--f-14);color:var(--ink);font-weight:500;line-height:1.25;width:fit-content;max-width:100%}
.fichas svg{width:16px;height:16px;color:var(--teal);flex:none;box-sizing:content-box;
  padding:7px;border-radius:50%;background:#E6F3F7}
.hero-grid{grid-template-areas:"txt" "foto" "fichas";row-gap:var(--sp-6)}
.hero-txt{grid-area:txt}.hero-foto{grid-area:foto}.fichas{grid-area:fichas}
.hero .fichas{margin-top:0}
.hero-foto{margin:0;min-width:0}
.marco{position:relative}
.marco::before{content:'';position:absolute;inset:14px -14px -14px 14px;
  border:1.5px solid rgba(7,118,142,.35);border-radius:var(--r-xl);z-index:0}
.marco img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--sh-3);background:var(--paper-2)}
.hero-foto figcaption{font-size:var(--f-14);color:var(--muted);margin-top:calc(var(--sp-3) + 16px);padding-right:14px}
@media (max-width:519px){.marco::before{inset:10px -8px -10px 8px}}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);
    row-gap:var(--sp-5);grid-template-areas:"txt foto" "fichas foto";align-items:start}
  .hero-txt{align-self:end}
  .hero-foto{align-self:center}
  .fichas{grid-template-columns:repeat(2,max-content)}
}

/* ---------- banda de clientes ---------- */
.clientes{background:var(--teal-ink);color:rgba(255,255,255,.8);padding-block:var(--sp-6)}
.clientes .mono{color:rgba(255,255,255,.72);text-align:center}
.logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--sp-5) clamp(24px,4vw,56px)}
.logos img{height:26px;width:auto;opacity:.92}
.logos .txt{font-weight:700;color:#fff;font-size:var(--f-16);letter-spacing:-.01em;opacity:.92}

/* ---------- secciones ---------- */
.sec{padding-block:var(--sec)}
.sec-blanca{background:#fff}
.sec-head{max-width:60ch;margin-bottom:var(--sp-7)}
.sec-head h2{font-size:var(--f-42);color:var(--teal-ink)}
.sec-head p{font-size:var(--f-18);margin-top:var(--sp-3);color:var(--body)}

.beneficios{display:grid;gap:var(--sp-4)}
.ben{background:#fff;border:1px solid var(--rule-dim);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;gap:var(--sp-4);box-shadow:var(--sh-1)}
.sec-blanca .ben{background:var(--paper)}
.paloma{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;flex:none}
.paloma svg{width:20px;height:20px}
.ben h3{font-size:var(--f-18);letter-spacing:-.015em;margin-bottom:6px}
.ben p{font-size:var(--f-16)}
@media (min-width:700px){.beneficios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.beneficios.b3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.obras{display:grid;gap:var(--sp-5)}
.obra{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  display:flex;flex-direction:column}
.obra img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2)}
.obra-txt{padding:var(--sp-5)}
.obra .mono{margin-bottom:6px;color:var(--muted);letter-spacing:.1em}
.obra h3{font-size:var(--f-21);letter-spacing:-.02em;margin-bottom:6px}
.obra p{font-size:var(--f-16)}
@media (min-width:640px){.obras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.obras.o4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .obras.o3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mas{margin-top:var(--sp-6)}
.enlace{color:var(--teal);font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.enlace svg{width:18px;height:18px}
.enlace:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

/* proceso: cuatro etapas */
.etapas{list-style:none;display:grid;gap:var(--sp-3);counter-reset:e}
.etapa{counter-increment:e;background:#fff;border:1px solid var(--rule-dim);border-radius:var(--r-lg);
  padding:var(--sp-5);position:relative}
.etapa::before{content:counter(e,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;
  font-size:var(--f-14);color:var(--teal);font-weight:500;display:block;margin-bottom:var(--sp-2)}
.etapa h3{font-size:var(--f-18);letter-spacing:-.015em;margin-bottom:6px}
.etapa p{font-size:var(--f-16)}
.etapa a{color:var(--teal);font-weight:600}
.etapa a:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:700px){.etapas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.etapas{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* preguntas frecuentes */
.faq{max-width:820px;display:grid;gap:var(--sp-3)}
.faq details{background:#fff;border:1px solid var(--rule-dim);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.sec-blanca .faq details{background:var(--paper)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);min-height:56px;font-weight:600;color:var(--ink);
  font-size:var(--f-16);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:12px;height:12px;flex:none;border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--t-fast)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{padding:0 var(--sp-5) var(--sp-5);font-size:var(--f-16)}

/* cierre */
.cierre{padding-block:0 var(--sec)}
.cierre-card{background:var(--teal-ink);color:#fff;border-radius:var(--r-xl);
  padding:clamp(32px,6vw,80px) clamp(22px,6vw,80px);box-shadow:var(--sh-2);
  display:grid;gap:var(--sp-5);align-items:center}
.cierre-card h2{color:#fff;font-size:var(--f-42);max-width:20ch}
.cierre-card p{color:rgba(255,255,255,.9);font-size:var(--f-18);margin-top:var(--sp-3);max-width:50ch}
.cierre-card .ctas{margin-top:0}
.cierre-card .tel{font-size:var(--f-14);color:rgba(255,255,255,.82);margin-top:var(--sp-3)}
.cierre-card .tel a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (min-width:960px){.cierre-card{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .cierre-card .ctas{flex-direction:column;align-items:stretch}}

/* ---------- texto largo (aviso) ---------- */
.doc{padding-block:clamp(28px,5vw,64px) var(--sec)}
.doc-in{max-width:760px}
.doc h1{font-size:var(--f-42);color:var(--teal-ink)}
.doc .fecha{font-size:var(--f-14);color:var(--muted);margin-top:var(--sp-3)}
.doc h2{font-size:var(--f-21);color:var(--teal-ink);margin-top:var(--sp-7);margin-bottom:var(--sp-3);letter-spacing:-.015em}
.doc h3{font-size:var(--f-18);margin-top:var(--sp-5);margin-bottom:var(--sp-2)}
.doc p,.doc li{font-size:var(--f-16)}
.doc p+p{margin-top:var(--sp-3)}
.doc ul,.doc ol{padding-left:1.3em;margin-top:var(--sp-2);display:grid;gap:6px}
.doc a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.doc .caja{background:#fff;border:1px solid var(--rule-dim);border-radius:var(--r-md);
  padding:var(--sp-5);margin-top:var(--sp-5);box-shadow:var(--sh-1)}
.doc .indice{margin-top:var(--sp-5)}

/* ---------- páginas cortas (gracias, 404) ---------- */
.corta{padding-block:clamp(40px,8vw,112px);text-align:left}
.corta-in{max-width:680px}
.corta h1{font-size:var(--f-56);color:var(--teal-ink)}
.corta .lead{font-size:var(--f-21);color:var(--teal-ink);margin-top:var(--sp-4)}
.corta .ok{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;margin-bottom:var(--sp-5);box-shadow:var(--sh-2)}
.corta .ok svg{width:30px;height:30px}
.links-utiles{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-6)}
.links-utiles a{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  background:#fff;border:1px solid var(--rule-dim);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  min-height:56px;font-weight:600;color:var(--ink);font-size:var(--f-16)}
.links-utiles a::after{content:'→';color:var(--teal)}
.links-utiles a:hover{border-color:var(--teal);color:var(--teal-deep)}
@media (min-width:640px){.links-utiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- pie (idéntico a la home + columna de servicios) ---------- */
footer{background:var(--teal-ink);color:rgba(255,255,255,.74);padding-block:var(--sp-8) var(--sp-6)}
footer h4{color:#fff;font-size:var(--f-14);letter-spacing:.09em;text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;font-weight:500;margin-bottom:var(--sp-3)}
footer address{font-style:normal;line-height:1.9;font-size:var(--f-16)}
footer a:hover{color:#fff}
.pie-grid{display:grid;gap:var(--sp-6) var(--sp-5);grid-template-columns:1fr 1fr}
.pie-grid>.pie-marca,.pie-grid>.pie-dir,.pie-grid>.pie-con{grid-column:1/-1}
.pie-marca img{height:44px;width:auto}
.pie-marca p{margin-top:var(--sp-4);font-size:var(--f-16);max-width:32ch}
.pie-lista{list-style:none;font-size:var(--f-16);line-height:1.5;display:grid;gap:10px}
.pie-lista a{overflow-wrap:anywhere}
.pie-raya{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);justify-content:space-between;align-items:center;font-size:var(--f-14)}
.pie-raya a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:640px){.pie-grid>.pie-dir,.pie-grid>.pie-con{grid-column:auto}}
@media (min-width:1000px){
  .pie-grid{grid-template-columns:1fr 1fr 1.4fr 1fr .9fr}
  .pie-con a{white-space:nowrap}
  .pie-grid>.pie-marca{grid-column:auto}
}

/* ---------- WhatsApp flotante (como la home) ---------- */
.wa{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-2),0 0 0 4px rgba(255,255,255,.9);transition:transform var(--t-fast)}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px}
body:has(#consent:not([hidden])) .wa{bottom:calc(var(--consent-h,120px) + 14px)}

/* ---------- aviso de cookies ---------- */
#consent{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;
  box-shadow:0 -4px 24px rgba(8,65,78,.15);padding:var(--sp-3) var(--gut)}
#consent[hidden]{display:none}
.consent-in{max-width:var(--max);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-5);align-items:center;justify-content:space-between}
#consent p{font-size:var(--f-14);flex:1 1 260px;min-width:0}
#consent a{color:var(--teal);font-weight:600}
.consent-btns{display:flex;gap:var(--sp-2);flex:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important}}
.doc .migas ol{display:flex;padding:0;margin:0;gap:6px}
.doc .migas li{font-size:var(--f-14)}
.doc .migas a{text-decoration:none;font-weight:500}
.doc ul+p,.doc ol+p{margin-top:var(--sp-3)}

/* ---- redes: un solo botón discreto sobre el WhatsApp que despliega
   Facebook e Instagram. Así flotan dos círculos y no tres. ---- */
.redes{position:fixed;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;
  right:calc(clamp(16px,3vw,28px) + 9px);bottom:calc(clamp(16px,3vw,28px) + 70px);
  transition:bottom .2s ease}
.redes-lista{display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.85);transform-origin:50% 100%;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1.2),visibility 0s linear .22s}
.redes.abierto .redes-lista{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.redes-lista a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 5px 14px rgba(10,20,30,.22),0 0 0 3px rgba(255,255,255,.92);transition:transform .15s ease}
.redes-lista a:hover{transform:scale(1.08)}
.redes-lista svg{width:19px;height:19px}
.redes .r-fb{background:#1877F2}
.redes .r-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.redes-btn{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;background:#fff;color:#07768E;
  box-shadow:0 5px 14px rgba(10,20,30,.18),0 0 0 1px rgba(7,118,142,.18);transition:transform .15s ease,background .15s ease,color .15s ease}
.redes-btn:hover{transform:scale(1.06)}
.redes-btn svg{width:20px;height:20px;grid-area:1/1;transition:opacity .15s ease,transform .2s ease}
.redes-btn .ico-x{opacity:0;transform:rotate(-45deg)}
.redes.abierto .redes-btn{background:#07768E;color:#fff}
.redes.abierto .redes-btn .ico-red{opacity:0;transform:rotate(45deg)}
.redes.abierto .redes-btn .ico-x{opacity:1;transform:none}
.redes a:focus-visible,.redes-btn:focus-visible{outline:3px solid #0B5FFF;outline-offset:3px}
body:has(#consent:not([hidden])) .redes{bottom:calc(var(--consent-h,120px) + 14px + 70px)}
@media (max-width:600px){
  .redes{right:20px;bottom:76px}
  .redes-btn,.redes-lista a{width:40px;height:40px}
  body:has(#consent:not([hidden])) .redes{bottom:calc(var(--consent-h,120px) + 76px)}
}
@media (prefers-reduced-motion:reduce){.redes-lista,.redes-btn svg{transition:none}}
@media print{.redes{display:none}}