/* ============================================================
   PROYECTOS M · Sistema visual
   Navy manda (brand kit 22-ago-2026). Tipografía Garet → Outfit.
   Concepto: plano arquitectónico — retícula hairline, cotas,
   numeración de láminas, anotaciones en mono.
   ============================================================ */
:root{
  --navy:#2b5276;
  --navy-deep:#1d3a55;
  --navy-ink:#132a3e;
  --carbon:#2E2E2E;
  --blue-mid:#5c88b2;
  --warm-gray:#A2A092;
  --light-gray:#D1D0CB;
  --warm-ink:#5F5E54;      /* gris cálido legible sobre papel — 5.3:1 */
  --warm-display:#6E6C60;  /* para display grande — 4.3:1 */
  --blue-ink:#3F6B95;      /* azul de apoyo legible sobre papel — 4.6:1 */
  --paper:#F4F3F0;
  --paper-pure:#FBFAF8;
  --white:#ffffff;

  --line:rgba(255,255,255,.14);
  --line-dark:rgba(43,82,118,.16);

  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,88px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--carbon);
  font-family:var(--sans);font-weight:300;font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65;letter-spacing:.002em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* ⚠️ el atributo height="" del HTML es una pista de presentación y GANA sobre aspect-ratio.
   Sin esto, .proceso-tira medía 1200px de alto en vez de 3/4 del ancho. */
.gal img,.proceso-tira img{height:auto}
a{color:inherit}
::selection{background:var(--navy);color:#fff}

/* ---------- utilidades ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-weight:400;font-size:.688rem;letter-spacing:.16em;text-transform:uppercase}
.rule{height:1px;background:var(--line-dark);border:0;margin:0}

/* etiqueta de lámina: 01 —— TÍTULO */
.plate{display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.plate__num{font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;color:var(--blue-ink)}
.plate__line{flex:1 1 auto;height:1px;background:var(--line-dark);max-width:80px}
.plate__label{font-family:var(--mono);font-size:.688rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-ink)}

h1,h2,h3,h4{font-weight:400;letter-spacing:-.022em;line-height:1.06;margin:0;color:var(--navy)}
h2{font-size:clamp(2rem,4.4vw,3.55rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.25;letter-spacing:-.012em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.06rem,1.35vw,1.25rem);line-height:1.6;color:#4a4a4a;font-weight:300;max-width:62ch}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-weight:500;font-size:.938rem;letter-spacing:.005em;
  padding:16px 26px;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--white);color:var(--navy)}
.btn--primary:hover{background:var(--light-gray);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--white)}
.btn--ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn--outline{border-color:var(--line-dark);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.hdr__logo img{height:26px;width:auto;transition:opacity .3s}
.hdr__logo--navy{display:none}
.hdr__nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.hdr__nav a{
  font-size:.875rem;font-weight:400;text-decoration:none;color:rgba(255,255,255,.82);
  transition:color .25s;position:relative;padding-block:6px;
}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s var(--ease)}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after{width:100%}
.hdr__cta{
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:2px;
  background:rgba(255,255,255,.1);border:1px solid var(--line);color:#fff;
  font-size:.875rem;font-weight:500;text-decoration:none;transition:background .3s,border-color .3s;
}
.hdr__cta:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.hdr__cta svg{width:16px;height:16px}
/* estado: scrolleado */
.hdr.is-stuck{background:rgba(251,250,248,.92);backdrop-filter:blur(14px);border-color:var(--line-dark)}
.hdr.is-stuck .hdr__logo--blanco{display:none}
.hdr.is-stuck .hdr__logo--navy{display:block}
.hdr.is-stuck .hdr__nav a{color:#4a4a4a}
.hdr.is-stuck .hdr__nav a:hover{color:var(--navy)}
.hdr.is-stuck .hdr__cta{background:var(--navy);border-color:var(--navy);color:#fff}
.hdr.is-stuck .hdr__cta:hover{background:var(--navy-deep)}
/* menú móvil */
.hdr__burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;padding:0}
.hdr__burger span{display:block;width:17px;height:1.5px;background:#fff;position:relative;transition:background .2s}
.hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:#fff;transition:transform .3s var(--ease),top .3s var(--ease)}
.hdr__burger span::before{top:-6px}
.hdr__burger span::after{top:6px}
.hdr.is-stuck .hdr__burger{border-color:var(--line-dark)}
.hdr.is-stuck .hdr__burger span,.hdr.is-stuck .hdr__burger span::before,.hdr.is-stuck .hdr__burger span::after{background:var(--navy)}
body.menu-open .hdr__burger span{background:transparent!important}
body.menu-open .hdr__burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .hdr__burger span::after{top:0;transform:rotate(-45deg)}
.mnav{
  position:fixed;inset:76px 0 0;z-index:55;background:var(--navy);
  display:flex;flex-direction:column;gap:0;overflow:hidden;
  padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;transform:translateY(-10px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
/* Con 12 renglones el menú NO cabe en un iPhone chico. Dos reglas lo sostienen:
   1) el sobrante DESLIZA en su propia zona — centrado y sin scroll, lo de arriba
      caía en coordenadas negativas y quedaba inalcanzable;
   2) el botón de WhatsApp vive FUERA de esa zona, no encima: pegado con position
      sticky tapaba el último renglón justo al llegar al final. */
.mnav__scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:12px 0 6px;
}
body.menu-open .mnav{opacity:1;pointer-events:auto;transform:none}
body.menu-open{overflow:hidden}
.mnav a{
  display:block;  /* ya no son hijos flex: dentro de .mnav__scroll serían inline */
  font-size:clamp(1rem,4.3vw,1.15rem);font-weight:400;letter-spacing:-.01em;color:#fff;
  text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);
}
.mnav__scroll a:last-of-type{border-bottom:0}
.mnav a.top{font-size:clamp(1.1rem,4.8vw,1.3rem);font-weight:300;letter-spacing:-.02em}
.mnav__lbl{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:16px 0 7px;flex:none;
}
.mnav a:last-of-type{border-bottom:0}
.mnav a.mnav__wa{  /* .mnav a{display:block} le gana por especificidad y mata el gap */
  flex:0 0 auto;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:var(--navy)!important;font-size:1rem!important;font-weight:500;
  padding:17px 24px!important;border-radius:2px;border-bottom:0!important;letter-spacing:0!important;
}
.mnav__wa svg{width:18px;height:18px}
@media(max-width:900px){
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
  .hdr__cta span.n{display:none}
}
@media(min-width:901px){.mnav{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-top:calc(76px + clamp(56px,9vw,110px));padding-bottom:clamp(20px,3vw,44px);
}
/* retícula de plano */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 12% 8%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 12% 8%,#000 20%,transparent 78%);
}
/* velo de profundidad */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 82% 18%,rgba(92,136,178,.32),transparent 62%),
    linear-gradient(180deg,rgba(19,42,62,.28),transparent 30%,rgba(19,42,62,.5));
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__eyebrow{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72);margin-bottom:clamp(22px,3vw,32px)}
.hero__eyebrow span.bar{width:34px;height:1px;background:rgba(255,255,255,.45)}
.hero h1{
  color:#fff;font-weight:300;
  font-size:clamp(2.6rem,6.2vw,5.1rem);line-height:.99;letter-spacing:-.035em;
  margin-bottom:clamp(22px,3vw,30px);
}
.hero h1 em{font-style:normal;font-weight:600;display:block}
.hero__lead{color:rgba(255,255,255,.76);font-size:clamp(1.05rem,1.35vw,1.22rem);max-width:46ch;font-weight:300;margin-bottom:clamp(30px,4vw,42px)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}

/* dibujo de elevación */
.hero__draw{position:relative}
.hero__draw svg{width:100%;height:auto;overflow:visible}
.hero__draw .ln{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.hero__draw .ln--bold{stroke:rgba(255,255,255,.9);stroke-width:1.6}
.hero__draw .ln--dim{stroke:rgba(255,255,255,.28);stroke-dasharray:4 4}
.hero__draw .fill-soft{fill:rgba(255,255,255,.05);stroke:none}
.hero__draw .tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:rgba(255,255,255,.5)}
@media(prefers-reduced-motion:no-preference){
  .hero__draw .ln{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.4s var(--ease) forwards}
  .hero__draw .ln:nth-child(2n){animation-delay:.18s}
  .hero__draw .ln:nth-child(3n){animation-delay:.34s}
  .hero__draw .tag,.hero__draw .fill-soft{opacity:0;animation:fadeIn .9s var(--ease) 1.5s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* cintillo de datos */
.strip{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:clamp(48px,7vw,88px)}
.strip__in{display:grid;grid-template-columns:repeat(3,1fr)}
.strip__i{display:flex;flex-direction:column;padding:clamp(24px,3vw,34px) 0;padding-right:24px;border-right:1px solid var(--line)}
.strip__i:last-child{border-right:0}
.strip__k{display:block;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:300;letter-spacing:-.03em;color:#fff;line-height:1.12;margin-bottom:12px}
.strip__v{margin-top:auto}
.strip__v{color:rgba(255,255,255,.68);font-size:.813rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__draw{order:-1;max-width:440px}
  .strip__in{grid-template-columns:1fr;}
  .strip__i{border-right:0;border-bottom:1px solid var(--line);padding-block:20px}
  .strip__i:last-child{border-bottom:0}
}

/* ============================================================
   SECCIONES
   ============================================================ */
section{padding-block:clamp(64px,9vw,132px)}
.sec--paper{background:var(--paper)}
.sec--pure{background:var(--paper-pure)}

/* 01 · NOSOTROS */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:start}
.about > div:first-child{position:sticky;top:120px}
/* Sin marca de agua del emblema: Angélica lo pidió fuera (24-ago). Queda sólo la
   línea de pie bajo el título. */
.about__mark{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.about__mark span{color:var(--warm-ink);opacity:.9}
@media(max-width:860px){.about__mark{display:none}}
.about h2{margin-bottom:26px}
.about h2 span{color:var(--warm-display)}
.values{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.value{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.value__n{font-family:var(--mono);font-size:.688rem;color:var(--blue-ink);letter-spacing:.12em;padding-top:5px}
.value h3{margin-bottom:5px}
.value p{margin:0;font-size:.938rem;color:#5a5a5a;line-height:1.55}
@media(max-width:860px){.about{grid-template-columns:1fr}.about > div:first-child{position:static}}

/* 02 · SERVICIOS */
.sec--servicios{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sec--servicios::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 85% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 100% at 85% 0%,#000 10%,transparent 72%);
}
.sec--servicios .wrap{position:relative;z-index:2}
.sec--servicios h2{color:#fff}
.sec--servicios .plate__label,.sec--servicios .plate__num{color:rgba(255,255,255,.64)}
.sec--servicios .plate__line{background:var(--line)}
.sec--servicios .lead{color:rgba(255,255,255,.72)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.svcs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{
  padding:clamp(26px,2.6vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .35s var(--ease);
}
.svc:hover{background:rgba(255,255,255,.055)}
.svc__ico{width:34px;height:34px;margin-bottom:22px;color:var(--blue-mid);transition:color .35s,transform .45s var(--ease)}
.svc:hover .svc__ico{color:#fff;transform:translateY(-3px)}
.svc__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;stroke-linejoin:miter}
.svc__n{position:absolute;top:clamp(26px,2.6vw,34px);right:clamp(26px,2.6vw,34px);font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:rgba(255,255,255,.42)}
.svc h3{color:#fff;margin-bottom:9px;font-weight:500}
.svc p{margin:0;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.68)}
@media(max-width:1080px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svcs{grid-template-columns:1fr}}

/* 03 · PROCESO */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark)}
.step{padding:clamp(26px,2.6vw,36px) clamp(20px,2vw,30px) clamp(30px,3vw,42px) 0;border-right:1px solid var(--line-dark);position:relative}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:3px;background:var(--navy)}
.step__n{font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;color:var(--blue-ink);display:block;margin-bottom:16px}
.step h3{margin-bottom:9px;font-weight:500}
.step p{margin:0;font-size:.906rem;color:#5a5a5a;line-height:1.55}
@media(max-width:900px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line-dark);padding-right:0}
  .step:last-child{border-bottom:0}
}

/* 04 · OBRA — fotos reales de su archivo (OneDrive, ago-2026) */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(128px,13.5vw,196px);gap:clamp(9px,1.1vw,15px)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--light-gray)}
.gal img{width:100%;height:100%!important;object-fit:cover;display:block;transition:transform .8s var(--ease),filter .5s var(--ease)}
.gal figure:hover img{transform:scale(1.045)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(19,42,62,.86));
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;transform:none}
.gal .xl{grid-column:span 2;grid-row:span 2}
.gal .wide{grid-column:span 2}
.gal__nota{margin-top:clamp(22px,2.6vw,32px);font-size:.813rem;color:#5a5a5a;max-width:66ch}
@media(max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(120px,26vw,170px)}
  .gal figcaption{opacity:1;transform:none}
}
@media(max-width:520px){
  .gal{grid-template-columns:1fr;grid-auto-rows:auto}
  .gal .xl,.gal .wide{grid-column:span 1;grid-row:span 1}
  .gal img{height:auto;aspect-ratio:4/3}
}

/* proceso: tira de fotos reales de obra */
.proceso-tira{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(38px,4.5vw,60px)}
.proceso-tira figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--light-gray)}
.proceso-tira img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.proceso-tira figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:24px 13px 11px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(19,42,62,.88));
}
@media(max-width:640px){.proceso-tira{grid-template-columns:1fr 1fr}.proceso-tira figure:last-child{display:none}}

/* 05 · CONTACTO */
.sec--contacto{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sec--contacto::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 60% at 15% 100%,rgba(92,136,178,.28),transparent 60%);
}
.sec--contacto .wrap{position:relative;z-index:2}
.sec--contacto h2{color:#fff}
.sec--contacto .plate__label,.sec--contacto .plate__num{color:rgba(255,255,255,.64)}
.sec--contacto .plate__line{background:var(--line)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,6vw,84px);align-items:start}
.cta-copy h2{margin-bottom:22px}
.cta-copy p{color:rgba(255,255,255,.74);max-width:44ch}
.contact-list{margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.contact-list a,.contact-list div{
  display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:#fff;transition:padding-left .3s var(--ease),color .3s;
}
.contact-list a:hover{padding-left:9px;color:var(--light-gray)}
.contact-list svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.75}
.contact-list b{font-weight:400;font-size:1rem}
.contact-list small{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:2px}

/* formulario */
.form{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:3px;padding:clamp(24px,3vw,38px);backdrop-filter:blur(6px)}
.form__t{font-family:var(--mono);font-size:.688rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.813rem;color:rgba(255,255,255,.68);margin-bottom:7px;font-weight:400}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:.938rem;font-weight:300;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:2px;
  padding:13px 15px;transition:border-color .3s,background .3s;
}
.field textarea{resize:vertical;min-height:92px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:11px;padding-right:38px}
.field select option{background:var(--navy-ink);color:#fff}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form__note{font-size:.75rem;color:rgba(255,255,255,.6);margin:14px 0 0;line-height:1.5}
.form__note.is-ok{color:#bfe6cd}
.form__note.is-err{color:#f2b8b8}
.form__note a{color:inherit;text-decoration:underline}
.field label .opt{color:rgba(255,255,255,.4)}
.form__consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 20px;cursor:pointer}
.form__consent input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:#fff;cursor:pointer}
.form__consent span{font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.62)}
.form__consent a{color:#fff;text-decoration:underline}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{background:var(--navy-ink);color:rgba(255,255,255,.6);padding-block:clamp(40px,5vw,60px);font-size:.813rem}
.ftr__in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.ftr img{height:24px;width:auto;opacity:.85}
.ftr__links{display:flex;gap:22px;flex-wrap:wrap}
.ftr a{text-decoration:none;transition:color .25s}
.ftr a:hover{color:#fff}
.ftr__legal{width:100%;padding-top:24px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.52);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* botón flotante WhatsApp */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:100px;
  background:var(--navy);color:#fff;text-decoration:none;font-size:.875rem;font-weight:500;
  box-shadow:0 10px 30px rgba(19,42,62,.32);
  transition:transform .3s var(--ease),background .3s;
  opacity:0;pointer-events:none;transform:translateY(14px);
}
.wa-float.is-on{opacity:1;pointer-events:auto;transform:none}
.wa-float:hover{background:var(--navy-deep);transform:translateY(-3px)}
.wa-float svg{width:19px;height:19px}
@media(max-width:560px){.wa-float span{display:none}.wa-float{padding:15px;border-radius:50%}}

/* reveal en scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════
   SITIO MULTIPÁGINA — añadido 24-ago-2026
   ══════════════════════════════════════════════════════════════ */

/* ── nav con submenú de servicios ── */
.hdr__nav .has-sub{position:relative}
.hdr__nav .has-sub > a::before{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.subnav{
  position:absolute;top:calc(100% + 16px);left:-18px;min-width:290px;z-index:70;
  background:var(--paper-pure);border:1px solid var(--line-dark);border-radius:3px;
  box-shadow:0 18px 46px rgba(19,42,62,.17);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav a{
  display:block;padding:10px 14px;border-radius:2px;font-size:.875rem;color:#3d3d3d!important;
  white-space:nowrap;transition:background .2s,color .2s;
}
.subnav a::after{display:none}
.subnav a:hover{background:var(--navy);color:#fff!important}
.subnav a[aria-current]{color:var(--navy)!important;font-weight:500}

/* ── rejilla de servicios (portada) ── */
.svc-cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
a.svc{
  display:block;text-decoration:none;padding:clamp(26px,2.6vw,34px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .35s var(--ease);
}
a.svc:hover{background:rgba(255,255,255,.07)}
a.svc .svc__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:color .3s,gap .3s var(--ease);
}
a.svc:hover .svc__go{color:#fff;gap:12px}
a.svc .svc__go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
@media(max-width:1080px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-cards{grid-template-columns:1fr}}

/* ── hero de página interior ── */
.hero--int{padding-top:calc(76px + clamp(42px,6vw,80px));padding-bottom:clamp(38px,5vw,64px)}
.hero--int .hero__in{grid-template-columns:minmax(0,1fr);gap:0}
.hero--int h1{font-size:clamp(2.2rem,5vw,4rem);max-width:17ch}
.miga{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,26px)}
.miga a,.miga span{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none}
.miga a:hover{color:#fff}
.miga i{font-style:normal;color:rgba(255,255,255,.34)}

/* ── qué incluye ── */
.incluye{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line-dark)}
.inc{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 34px 24px 0;border-bottom:1px solid var(--line-dark)}
.inc__n{font-family:var(--mono);font-size:.688rem;color:var(--blue-ink);letter-spacing:.12em;padding-top:5px}
.inc h3{margin-bottom:6px;font-weight:500}
.inc p{margin:0;font-size:.938rem;color:#5a5a5a;line-height:1.55}
@media(max-width:760px){.incluye{grid-template-columns:1fr}.inc{padding-right:0}}

/* ── par/trío de fotos de servicio ── */
.fotos-serv{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.fotos-serv figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--light-gray)}
.fotos-serv img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.fotos-serv figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:24px 13px 11px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(19,42,62,.88));
}

/* ── banda «hemos trabajado para» ── */
.trab{background:var(--paper-pure);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.trab--grande{background:transparent;border:0}
.trab__t{text-align:center;margin-bottom:clamp(22px,2.6vw,32px)}
.trab__t .mono{color:var(--warm-ink);display:block;margin-bottom:10px}
.trab__t p{margin:8px auto 0;font-size:.938rem;color:#5a5a5a;max-width:60ch}
.trab__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(9px,1.1vw,14px)}
.trab__g figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--light-gray)}
.trab__g img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.trab__g figure:hover img{transform:scale(1.05)}
.trab--grande .trab__g img{aspect-ratio:3/2}
@media(max-width:820px){.trab__g{grid-template-columns:repeat(2,1fr)}}

/* ── franja CTA a media página ── */
.cta-band{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding-block:clamp(42px,5.5vw,72px)}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(110% 100% at 88% 0%,#000 8%,transparent 70%);
  -webkit-mask-image:radial-gradient(110% 100% at 88% 0%,#000 8%,transparent 70%);
}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,48px);flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.55rem,2.9vw,2.35rem);max-width:20ch}
.cta-band p{color:rgba(255,255,255,.74);margin:10px 0 0;max-width:44ch;font-size:.938rem}
.cta-band__btns{display:flex;gap:11px;flex-wrap:wrap}

/* ── otros servicios ── */
.otros{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.otros a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);padding:19px 20px;text-decoration:none;color:var(--navy);
  font-size:.906rem;font-weight:400;transition:background .28s,color .28s;
}
.otros a:hover{background:var(--navy);color:#fff}
.otros a svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.5}
@media(max-width:980px){.otros{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.otros{grid-template-columns:1fr}}

/* ── preguntas ── */
.faq{border-top:1px solid var(--line-dark);max-width:860px}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{
  cursor:pointer;list-style:none;padding:21px 40px 21px 0;position:relative;
  font-size:1.06rem;color:var(--navy);font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--blue-ink);border-bottom:1.5px solid var(--blue-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 21px;color:#5a5a5a;font-size:.969rem;max-width:70ch}
.faq a{color:var(--blue-ink)}

/* ── ficha de persona (Nosotros) ──
   Sin marco de foto: un recuadro vacío con el emblema de marca de agua se lee como
   un hueco pendiente, no como diseño. Mientras no haya retrato suyo, el bloque va
   en una columna, encabezado por su nombre. */
.persona{max-width:62ch}
.persona__rol{font-family:var(--mono);font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--warm-ink);margin-bottom:8px}
.persona h3{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:6px}
.persona__lugar{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--warm-ink)}
.persona__regla{width:52px;height:2px;background:var(--navy);margin:22px 0 26px}

/* ── bloque lateral de la columna pegajosa (páginas de servicio) ── */
.lateral{margin-top:clamp(30px,3.5vw,46px);padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--line-dark);max-width:34ch}
.lateral .mono{color:var(--blue-ink);margin-bottom:12px}
.lateral p{font-size:.938rem;color:#5a5a5a;line-height:1.55;margin-bottom:20px}
.lateral .btn{width:100%;justify-content:center}
.lateral__tel{display:block;margin-top:14px;font-size:.875rem;color:var(--warm-ink);text-decoration:none;border-bottom:1px solid var(--line-dark);padding-bottom:2px;width:max-content;transition:color .25s,border-color .25s}
.lateral__tel:hover{color:var(--navy);border-color:var(--navy)}
@media(max-width:860px){.lateral{max-width:none}}

/* ── páginas legales ── */
.legal{max-width:68ch}
.legal__fecha{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-ink);margin-bottom:34px}
.legal h2{font-size:clamp(1.15rem,1.9vw,1.45rem);margin:36px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 14px;line-height:1.72;color:var(--warm-display)}
.legal ul{margin:0 0 14px;padding-left:20px;color:var(--warm-display)}
.legal li{margin-bottom:8px;line-height:1.7}
.legal a{color:var(--navy);text-decoration:underline}
.legal strong{color:var(--navy);font-weight:500}
.legal__cta{margin-top:38px}