/* ============================================================
   Alprocor Ingeniería — sistema visual oscuro
   Referencia: castelloarquitectura.com
   Negro + rejilla vertical + marcas de agua gigantes +
   titulares en mayúsculas. Rojo teja de marca #833426.
   ============================================================ */

:root{
  /* Fondos */
  --bg:#0A0A0A;          /* fondo general, deja ver la rejilla */
  --bg-alt:#161616;      /* bandas alternas, tapan la rejilla */
  --bg-card:#000000;     /* tarjetas negras superpuestas */
  --grid:#1C1C1C;        /* líneas verticales de rejilla */
  --ghost:#2E3239;       /* letras gigantes de fondo, tono plateado frío */

  /* Texto */
  --ink:#FFFFFF;
  --ink-soft:#B3AFAC;
  --muted:#7C7773;

  /* Marca — el rojo teja de Alprocor */
  --accent:#833426;      /* rellenos sólidos: el color exacto de marca */
  --accent-on-dark:#C25B43; /* mismo tono aclarado, para leerse sobre negro */

  /* Trazo */
  --line:#2B2B2B;
  --line-strong:#3D3D3D;

  --gap:clamp(64px, 8vw, 128px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg);}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
html{overflow-x:clip;}

/* ---------- Rejilla vertical que recorre toda la página ---------- */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0, transparent calc(12.5% - 1px),
    var(--grid) calc(12.5% - 1px), var(--grid) 12.5%
  );
}
header, section, footer{position:relative; z-index:1;}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;}

.wrap{max-width:1300px; margin:0 auto; padding:0 40px;}

.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}

/* ---------- Tipografía ---------- */
h1,h2{
  font-weight:800;
  text-transform:uppercase;
  line-height:1.08;
  letter-spacing:0.005em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(30px, 4.4vw, 56px); max-width:18ch;}
h2{font-size:clamp(24px, 3.2vw, 42px); max-width:20ch;}
h3{
  font-size:18px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; line-height:1.35; color:var(--ink);
}

/* Etiquetas pequeñas en versalitas */
.eyebrow,.section-label,.hero-tag,.foot-head,.proj-type,.rk-label,
.fact-label,.pending,.ficha-k,.nap-k,.step-num,.card-link,.breadcrumb{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.2em; line-height:1.6;
}
.section-label{color:var(--accent-on-dark); margin-bottom:18px;}

/* ---------- Marca de agua, centrada detrás del titular ----------
   Va sobre el propio <h1>/<h2>, no sobre la sección: así queda
   siempre centrada en el titular y el texto se apoya encima.
   El tamaño va en "em", relativo al titular, de modo que escala
   sola en móvil sin necesidad de reglas aparte.                     */
:is(h1,h2)[data-ghost]{position:relative;}
:is(h1,h2)[data-ghost]::before{
  content:attr(data-ghost);
  position:absolute; z-index:-1;
  /* Anclada por la izquierda, donde empieza el texto. Las palabras se han
     elegido cortas (7 caracteres máximo) para que quepan enteras en la
     columna: una palabra entera se integra, un trozo cortado nunca.        */
  left:-0.28em; right:auto; top:50%;
  transform:translateY(-50%);
  font-size:3.6em; font-weight:800;
  /* Altura de línea holgada: el degradado se pinta dentro de la caja de la
     letra, y con una caja apretada la virgulilla de la Ñ quedaba fuera.    */
  line-height:1.24;
  letter-spacing:-0.045em; text-transform:uppercase;
  white-space:nowrap; pointer-events:none;
  color:var(--ghost);
}

/* En las subpáginas el texto solo ocupa media pantalla (la foto va al lado),
   así que el desvanecido se mide en píxeles para terminar SIEMPRE antes de
   la foto, sea cual sea lo larga que resulte la palabra. */

/* Brillo plateado: el degradado se recorta sobre la propia letra.
   Va dentro de @supports para que, si el navegador no puede,
   la letra se quede en el gris plateado de --ghost y nunca invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  :is(h1,h2)[data-ghost]::before{
    background-image:linear-gradient(155deg,
      #464B52 0%, #333840 38%, #23272C 72%, #191C20 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* ---------- Cabecera ---------- */
header.mainnav{
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.mainnav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:20px; padding-bottom:20px;
}
.logo{
  font-size:15px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink); flex-shrink:0;
}
.logo span{color:var(--accent-on-dark);}
/* El logotipo es oscuro sobre fondo claro: se invierte para el fondo negro */
.logo img{height:44px; width:auto;}

nav.primary{display:flex; align-items:center; gap:0;}
nav.primary > ul{display:flex; align-items:center; gap:0;}
nav.primary > ul > li{position:relative;}
nav.primary .top-link{
  display:block; padding:12px 20px;
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--ink-soft); transition:color .18s ease;
}
nav.primary .top-link:hover{color:var(--ink);}
.top-link.active{color:var(--ink);}
.top-link.active::after{
  content:''; position:absolute; left:20px; right:20px; bottom:2px;
  height:1.5px; background:var(--accent-on-dark);
}

.nav-cta{
  background:var(--accent); color:#fff;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  padding:14px 24px; margin-left:16px; white-space:nowrap;
  transition:background .18s ease;
}
.nav-cta:hover{background:#9C3F2E;}

.burger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- Migas ---------- */
.breadcrumb{color:var(--muted); padding:26px 0 0; letter-spacing:0.14em;}
.breadcrumb a{color:var(--muted); transition:color .18s ease;}
.breadcrumb a:hover{color:var(--accent-on-dark);}
.breadcrumb .sep{margin:0 10px; opacity:.5;}
.breadcrumb .current{color:var(--ink-soft);}

/* ---------- Botones ---------- */
.btn{
  position:relative; display:inline-block;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.18em;
  padding:17px 34px; transition:all .18s ease; z-index:1;
}
/* La sombra rayada en diagonal, el detalle más característico de la referencia */
.btn::after{
  content:''; position:absolute; left:7px; top:7px; right:-7px; bottom:-7px;
  z-index:-1; opacity:0; transition:opacity .18s ease;
  background:repeating-linear-gradient(45deg,
    var(--ink) 0 1px, transparent 1px 5px);
}
.btn:hover::after{opacity:.55;}
.btn-solid{background:var(--accent); color:#fff;}
.btn-solid:hover{background:#9C3F2E;}
.btn-solid::after{
  background:repeating-linear-gradient(45deg,
    var(--accent-on-dark) 0 1px, transparent 1px 5px);
  opacity:.5;
}
.btn-solid:hover::after{opacity:1;}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
.btn-outline:hover{border-color:var(--ink);}

/* Enlace "ver más" con línea y círculo, como en la referencia */
.card-link{
  display:inline-flex; align-items:center;
  color:var(--ink); margin-top:22px; transition:color .18s ease;
}
.card-link::before{
  content:''; order:2; width:38px; height:1px; background:var(--line-strong);
  margin-left:16px; transition:all .22s ease;
}
.card-link::after{
  content:''; order:3; width:10px; height:10px; border-radius:50%;
  border:1px solid var(--accent-on-dark); margin-left:-5px;
  transition:background .22s ease;
}
.card-link:hover{color:var(--accent-on-dark);}
.card-link:hover::before{width:52px; background:var(--accent-on-dark);}
.card-link:hover::after{background:var(--accent-on-dark);}

/* ---------- Portada ---------- */
.hero{
  padding-top:0;                       /* el espaciado lo pone .hero-inner, no se suman */
  padding-bottom:clamp(28px, 3.2vw, 48px);
}
.hero-inner{
  padding:clamp(38px, 4.2vw, 64px) 0 clamp(32px, 3.6vw, 48px);
  display:block;
}
.hero-tag{
  display:inline-block; color:var(--accent-on-dark);
  padding-left:16px; margin-bottom:26px;
  border-left:2px solid var(--accent-on-dark);
}
.hero-sub{
  font-size:clamp(15.5px, 1.4vw, 17.5px); line-height:1.85;
  color:var(--ink-soft); margin-top:26px; max-width:56ch;
}
.hero-ctas{display:flex; gap:26px; margin-top:40px; flex-wrap:wrap; align-items:center;}

/* Foto grande con la ficha negra superpuesta encima */
.hero-media{
  position:relative; max-width:1300px; margin:0 auto;
  padding:0 40px;
}
.hero-media img{
  width:100%; aspect-ratio:16/7; object-fit:cover; background:var(--bg-alt);
}

.fact-panel{
  background:var(--bg-card); padding:34px 32px;
  border-left:2px solid var(--accent-on-dark);
}
.fact-panel .fact-label{color:var(--accent-on-dark); margin-bottom:22px;}
.fact-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:13px 0; border-top:1px solid var(--line);
}
.fact-row:first-of-type{border-top:none; padding-top:0;}
.fact-row .fk{font-size:13px; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0;}
.fact-row .fv{
  font-size:13.5px; color:var(--ink); font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:0.02em;
}

/* En pantalla ancha, la ficha se monta sobre la foto */
@media (min-width:1040px){
  .hero-media{margin-top:-40px;}
  .hero-media .fact-panel{
    position:absolute; right:80px; bottom:-32px; width:360px; z-index:2;
  }
}

/* ---------- Portada de página interior ---------- */
.page-hero{padding-bottom:clamp(40px, 5vw, 72px);}
.page-hero h1{max-width:20ch; margin-top:24px;}
.page-hero .hero-sub{max-width:62ch;}
.page-icon{width:56px; height:56px; margin-bottom:26px;}
.page-media{max-width:1300px; margin:clamp(44px, 5vw, 68px) auto 0; padding:0 40px;}
.page-media img{width:100%; aspect-ratio:16/6; object-fit:cover; background:var(--bg-alt);}

/* ---------- Secciones ---------- */
section{padding:var(--gap) 0;}
section.tight{padding:clamp(44px, 5vw, 72px) 0;}
.section-head{max-width:680px; margin-bottom:clamp(40px, 4.5vw, 64px);}
.section-desc{
  color:var(--ink-soft); font-size:16px; line-height:1.85;
  margin-top:20px; max-width:62ch;
}

/* ---------- Texto largo ---------- */
.prose{max-width:70ch; font-size:16px; line-height:1.9; color:var(--ink-soft);}
.prose p{margin-bottom:20px;}
.prose h2{
  margin:56px 0 20px; color:var(--ink); max-width:none;
  font-size:clamp(20px, 2.3vw, 27px);
}
.prose h2:first-child{margin-top:0;}
.prose h3{margin:36px 0 12px; max-width:none; font-size:16px;}
.prose ul{margin:0 0 24px 0; list-style:none; padding-left:0;}
.prose li{margin-bottom:12px; padding-left:28px; position:relative;}
.prose li::before{
  content:''; position:absolute; left:0; top:14px;
  width:14px; height:1px; background:var(--accent-on-dark);
}
.prose strong{color:var(--ink); font-weight:700;}
.prose a{color:var(--accent-on-dark); text-decoration:underline; text-underline-offset:4px;}
.two-col{display:grid; grid-template-columns:1.7fr .85fr; gap:clamp(40px, 5vw, 76px); align-items:start;}

/* ---------- Las cuatro fases ---------- */
.process-alt{background:var(--bg-alt);}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px, 3.4vw, 52px);}
.process-step{position:relative; padding-top:28px; border-top:1px solid var(--line-strong);}
.step-num{color:var(--accent-on-dark); margin-bottom:16px; font-size:12px; letter-spacing:0.1em;}
.step-title{
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  margin-bottom:12px; color:var(--ink);
}
.step-desc{font-size:14.5px; color:var(--ink-soft); line-height:1.8;}
.process-note{
  margin-top:clamp(40px, 4.5vw, 64px); padding-left:26px;
  border-left:2px solid var(--accent-on-dark);
  font-size:clamp(17px, 1.9vw, 21px); font-weight:600; line-height:1.6;
  color:var(--ink); max-width:62ch;
}

/* ---------- Rejilla de servicios ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px, 2.6vw, 40px);}
.svc-card{display:flex; flex-direction:column;}
.svc-card.wide{grid-column:span 2;}
.svc-media{width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); margin-bottom:26px;}
.svc-card.wide .svc-media{aspect-ratio:10/3;}
.svc-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .6s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.svc-card:hover .svc-media img{transform:scale(1.05); filter:grayscale(0) contrast(1);}
.svc-card .card-title{
  font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  line-height:1.3; margin-bottom:14px; color:var(--ink);
}
.svc-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.8; flex-grow:1;}

.subtags{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.subtags a{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-soft); border:1px solid var(--line-strong); padding:9px 16px;
  transition:all .18s ease;
}
.subtags a:hover{border-color:var(--accent-on-dark); color:var(--accent-on-dark);}

/* ---------- Enlaces relacionados ---------- */
.related{background:var(--bg-alt);}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px, 2.6vw, 40px); margin-top:40px;}
.related-card{
  background:var(--bg-card); padding:32px 28px;
  border-left:2px solid transparent; transition:border-color .2s ease;
}
.related-card:hover{border-left-color:var(--accent-on-dark);}
.related-card .rk-label{color:var(--accent-on-dark); margin-bottom:12px;}
.related-card .card-title{
  font-size:15px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; line-height:1.4; color:var(--ink);
}

/* ---------- Banda de ingeniería ---------- */
.ing-band{background:var(--bg-alt);}
.ing-list{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(26px, 3.2vw, 46px); margin-top:clamp(40px, 4.5vw, 60px);}
.ing-item{border-top:1px solid var(--line-strong); padding-top:22px;}
.ing-item .card-title{
  font-size:15px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--ink);
}
.ing-item p{font-size:14px; color:var(--ink-soft); margin-top:12px; line-height:1.8;}

/* ---------- Proyectos ---------- */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px, 3vw, 44px);}
.proj-grid.two{grid-template-columns:repeat(2,1fr);}
.proj-card{position:relative;}
.proj-figure{
  aspect-ratio:4/3; background:var(--bg-alt); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.proj-figure img{width:100%; height:100%; object-fit:cover;}
.proj-figure svg{width:42%; height:42%; opacity:.5;}
.proj-figure .pending{
  position:absolute; top:0; left:0;
  color:var(--muted); background:var(--bg-card); padding:9px 14px;
}
/* Tarjeta negra superpuesta sobre la foto, como en la referencia */
.proj-body{
  background:var(--bg-card); padding:26px 24px;
  margin:-56px 22px 0 0; position:relative; z-index:2;
  border-left:2px solid var(--accent-on-dark);
}
.proj-type{color:var(--accent-on-dark); margin-bottom:12px;}
.proj-body h3{font-size:16px; letter-spacing:0.04em;}
.proj-body p{
  font-size:14px; color:var(--ink-soft); margin-top:12px;
  line-height:1.75; text-transform:none; letter-spacing:0;
}

/* Conmutador Reformas / Ingeniería en /proyectos/ */
.view-toggle{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:clamp(30px, 3.4vw, 44px);}
.view-toggle button{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
  padding:15px 28px; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
}
.view-toggle button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.view-toggle button:hover:not(.active){border-color:var(--accent-on-dark); color:var(--accent-on-dark);}

.filter-bar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(36px, 4vw, 56px);}
.filter-bar button{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  padding:12px 22px; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
}
.filter-bar button.active,
.filter-bar button:hover{border-color:var(--accent-on-dark); color:var(--accent-on-dark);}

/* ---------- Ficha técnica ---------- */
.ficha-table{border-top:1px solid var(--line-strong); margin-top:28px;}
.ficha-row{display:flex; gap:26px; padding:17px 0; border-bottom:1px solid var(--line);}
.ficha-k{width:180px; flex-shrink:0; color:var(--muted);}
.ficha-v{font-size:15px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}

/* ---------- Pasos numerados ---------- */
.steps-list{counter-reset:step; margin-top:8px;}
.steps-item{display:flex; gap:28px; padding:28px 0; border-bottom:1px solid var(--line);}
.steps-item:first-child{border-top:1px solid var(--line-strong);}
.steps-num{
  counter-increment:step; color:var(--accent-on-dark); flex-shrink:0; width:34px;
  font-size:12px; padding-top:4px; letter-spacing:0.1em;
}
.steps-num::before{content:counter(step, decimal-leading-zero);}
.steps-body h3{margin-bottom:10px; font-size:16px;}
.steps-body p{font-size:14.5px; color:var(--ink-soft); line-height:1.8;}

/* ---------- Preguntas frecuentes ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:26px 0;}
.faq-item:first-child{border-top:1px solid var(--line-strong);}
.faq-q{
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink); margin-bottom:12px; line-height:1.5;
}
.faq-a{font-size:14.5px; color:var(--ink-soft); line-height:1.85;}

/* ---------- Contacto ---------- */
.nap{background:var(--bg-alt);}
.nap-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 5vw, 76px); align-items:stretch;}
.nap-list{margin-top:30px; border-top:1px solid var(--line-strong);}
.nap-row{display:flex; gap:26px; padding:17px 0; border-bottom:1px solid var(--line);}
.nap-k{width:130px; flex-shrink:0; color:var(--muted);}
.nap-v{font-size:15px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}
.nap-v a:hover{color:var(--accent-on-dark);}
.map-block{
  border:1px solid var(--line); background:var(--bg-card);
  display:flex; align-items:stretch; padding:0; overflow:hidden;
}
.map-block iframe{
  width:100%; height:100%; min-height:420px !important; border:0; display:block;
}

/* ---------- Banda de llamada a la acción ---------- */
.cta-band{background:var(--bg-alt);}
.cta-band p{color:var(--ink-soft); margin-top:18px; max-width:60ch; font-size:16px; line-height:1.85;}
.cta-band .hero-ctas{margin-top:36px;}

/* ---------- Pie ---------- */
footer{background:var(--bg-card); padding-top:clamp(64px, 7vw, 100px); border-top:1px solid var(--line);}
.foot-grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:clamp(32px, 4vw, 60px); padding-bottom:clamp(44px, 5vw, 72px);
  border-bottom:1px solid var(--line);
}
.foot-head{color:var(--ink); margin-bottom:24px;}
footer .logo{color:var(--ink); font-size:14px;}
footer .logo span{color:var(--accent-on-dark);}
.foot-desc{font-size:14px; margin-top:18px; max-width:34ch; color:var(--ink-soft); line-height:1.85;}
.foot-links li{margin-bottom:13px;}
.foot-links a{font-size:14px; color:var(--ink-soft); transition:color .18s ease;}
.foot-links a:hover{color:var(--accent-on-dark);}
.foot-bottom{
  display:flex; justify-content:space-between; padding:28px 0;
  font-size:11px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--muted); flex-wrap:wrap; gap:14px;
}
.foot-bottom a{color:var(--muted);}
.foot-bottom a:hover{color:var(--ink);}

/* ============================================================
   Pantallas pequeñas
   ============================================================ */
@media (max-width:1100px){
  .ing-list{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr); row-gap:40px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:920px){
  body::before{background-image:repeating-linear-gradient(
    90deg, transparent 0, transparent calc(33.333% - 1px),
    var(--grid) calc(33.333% - 1px), var(--grid) 33.333%);}
  nav.primary{display:none;}
  .burger{display:block;}
  .wrap{padding:0 24px;}
  .hero-media{padding:0 24px;}
  .page-media{padding:0 24px;}
  .hero-media img{aspect-ratio:4/3;}
  .fact-panel{margin-top:28px;}
  .page-media img{aspect-ratio:16/9;}
  .svc-grid{grid-template-columns:1fr;}
  .svc-card.wide{grid-column:span 1;}
  .svc-card.wide .svc-media{aspect-ratio:16/10;}
  .related-grid{grid-template-columns:1fr;}
  .proj-grid, .proj-grid.two{grid-template-columns:1fr;}
  .nap-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .process-grid{grid-template-columns:1fr;}
  .ing-list{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .ficha-row, .nap-row{flex-direction:column; gap:6px;}
  .ficha-k, .nap-k{width:auto;}
  .btn{display:block; text-align:center;}
  .hero-ctas{gap:22px;}
  .foot-bottom{flex-direction:column;}
  .proj-body{margin:-40px 14px 0 0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ============================================================
   FORMATO A — Subpáginas de servicio (body.subpage)
   Cabecera partida, ficha pegajosa y apartados numerados.
   Se distinguen a propósito de las páginas principales.
   ============================================================ */

/* --- Cabecera partida: texto a la izquierda, foto a la derecha --- */
.subpage .page-hero{
  /* Sin el espaciado heredado de <section>: lo pone .subhero y si no se suman
     los dos, que era lo que dejaba casi 200px de vacío bajo las migas. */
  padding-top:0;
  padding-bottom:clamp(40px, 4.6vw, 64px);
}
.subpage .subhero{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px, 4vw, 60px); align-items:center;
  padding-top:clamp(22px, 2.4vw, 36px);
}
.subpage .subhero-copy{min-width:0;}
.subpage .subhero h1{font-size:clamp(28px, 3.3vw, 42px); max-width:20ch; margin-top:20px;}
.subpage .subhero .hero-sub{font-size:16px; max-width:44ch; margin-top:20px;}
.subpage .page-icon{width:46px; height:46px; margin-bottom:20px;}
/* la foto ya no va a todo lo ancho: es la mitad derecha */
.subpage .page-media{max-width:none; margin:0; padding:0;}
.subpage .page-media img{aspect-ratio:4/3; width:100%; object-fit:cover;}
/* la marca de agua, más discreta que en las principales */

/* --- Ficha técnica pegajosa: acompaña mientras se lee --- */
.subpage .two-col{grid-template-columns:1.65fr .9fr;}
.subpage .two-col > .fact-panel{position:sticky; top:104px;}

/* --- Apartados numerados 01, 02, 03 --- */
.subpage .prose{counter-reset:apartado;}
.subpage .prose h2{
  counter-increment:apartado;
  display:flex; align-items:baseline; gap:18px;
  border-top:1px solid var(--line); padding-top:26px; margin:46px 0 18px;
}
.subpage .prose h2:first-child{border-top:none; padding-top:0; margin-top:0;}
.subpage .prose h2::before{
  content:counter(apartado, decimal-leading-zero);
  font-size:12px; font-weight:700; letter-spacing:0.14em;
  color:var(--accent-on-dark); flex-shrink:0;
  position:relative; top:-2px;
}

/* ============================================================
   FORMATO B — Fichas de obra (body.casepage)
   Los datos de la obra mandan: van arriba y en horizontal.
   ============================================================ */

.casepage .page-hero{padding-bottom:clamp(40px, 5vw, 64px);}
.casepage .page-hero h1{max-width:24ch;}

/* --- Datos de la obra en tira horizontal, bajo el título --- */
.case-facts{margin-top:clamp(36px, 4vw, 56px);}
.case-facts .ficha-table{
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:1px solid var(--line-strong); margin-top:0;
}
.case-facts .ficha-row{
  display:block; padding:24px 22px 22px 0;
  border-bottom:none; border-right:1px solid var(--line);
}
.case-facts .ficha-row:last-child{border-right:none; padding-right:0;}
.case-facts .ficha-k{width:auto; color:var(--muted); margin-bottom:10px;}
.case-facts .ficha-v{
  font-size:clamp(17px, 1.7vw, 22px); font-weight:800;
  color:var(--ink); line-height:1.25; letter-spacing:-0.01em;
}

/* --- Galería preparada para las fotos reales --- */
.case-gallery{padding-top:0;}
.gallery-grid{
  display:grid; grid-template-columns:2fr 1fr;
  gap:clamp(14px, 1.4vw, 20px);
}
.gallery-slot{
  position:relative; aspect-ratio:4/3; background:var(--bg-alt);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.gallery-slot.wide{aspect-ratio:auto; grid-row:span 2;}
.gallery-slot svg{width:34%; height:34%; opacity:.45;}
.gallery-slot img{width:100%; height:100%; object-fit:cover;}
.gallery-slot .pending{
  position:absolute; bottom:0; left:0;
  color:var(--muted); background:var(--bg-card); padding:10px 15px;
}

/* En las fichas de obra el texto va a una columna */
.casepage .two-col{display:block;}
.casepage .prose{max-width:72ch;}
.casepage .two-col > div:last-child{margin-top:40px;}
.casepage .two-col .btn{width:auto !important; display:inline-block;}

@media (max-width:920px){
  .subpage .subhero{grid-template-columns:1fr; gap:30px;}
  .subpage .two-col{grid-template-columns:1fr;}
  .subpage .two-col > .fact-panel{position:static;}
  .case-facts .ficha-table{grid-template-columns:repeat(2, 1fr);}
  .case-facts .ficha-row{border-bottom:1px solid var(--line); padding-right:16px;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-slot.wide{grid-column:span 2; grid-row:auto; aspect-ratio:16/9;}
}
@media (max-width:560px){
  .case-facts .ficha-table{grid-template-columns:1fr;}
  .case-facts .ficha-row{border-right:none;}
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-slot.wide{grid-column:span 1;}
  .subpage .prose h2{flex-direction:column; gap:6px;}
}

/* Las preguntas frecuentes también necesitan un ancho de lectura razonable */
.subpage .faq-item{max-width:82ch;}

/* ============================================================
   Submenús desplegables (Reformas e Ingeniería)
   ============================================================ */
nav.primary li.has-sub{position:relative;}

/* La flechita que avisa de que hay desplegable */
.caret{
  display:inline-block; width:5px; height:5px; margin-left:9px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
li.has-sub:hover > .top-link .caret{transform:rotate(225deg) translate(-2px,-2px);}

.submenu{
  position:absolute; top:100%; left:8px; min-width:272px;
  background:var(--bg-card);
  border:1px solid var(--line); border-top:2px solid var(--accent-on-dark);
  padding:10px 0; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
li.has-sub:hover > .submenu,
li.has-sub:focus-within > .submenu{opacity:1; visibility:visible; transform:none;}

.submenu a{
  display:block; padding:11px 24px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.13em;
  color:var(--ink-soft); transition:color .16s ease, background .16s ease;
}
.submenu a:hover{color:var(--ink); background:var(--bg-alt);}
.submenu a.here{color:var(--accent-on-dark);}

/* ---------- Menú en móvil: se despliega bajo la cabecera ---------- */
@media (max-width:920px){
  nav.primary{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-card); border-top:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 26px;
    max-height:calc(100vh - 86px); overflow-y:auto;
  }
  nav.primary.open{display:flex;}
  nav.primary > ul{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  nav.primary .top-link{
    padding:15px 0; font-size:12.5px; border-bottom:1px solid var(--line);
  }
  .top-link.active::after{display:none;}
  .caret{display:none;}
  /* en móvil los submenús van siempre visibles, sin desplegar */
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:transparent;
    border:none; border-left:2px solid var(--accent-on-dark);
    margin:8px 0 14px 2px; padding:0 0 0 16px;
  }
  .submenu a{padding:9px 0;}
  .nav-cta{margin:18px 0 0; text-align:center; padding:15px 24px;}
}

/* "Reformas" es etiqueta de menú, no enlace: un botón sin apariencia de botón */
nav.primary button.top-link{
  background:none; border:none; cursor:pointer;
  font-family:inherit; text-align:left; width:auto;
}
/* Desplegable abierto al pulsar (pantallas táctiles, donde no hay ratón) */
li.has-sub.open > .submenu{opacity:1; visibility:visible; transform:none;}

/* ============================================================
   CONVERSIÓN — contacto siempre a mano
   ============================================================ */

/* --- Teléfono en la cabecera --- */
.nav-tel{
  display:inline-flex; align-items:center; gap:9px;
  margin-left:26px; margin-right:auto;   /* pegado al logotipo */
  font-size:13px; font-weight:700; letter-spacing:0.03em; color:var(--ink);
  white-space:nowrap; transition:color .18s ease;
}
.nav-tel svg{width:16px; height:16px; color:var(--accent-on-dark); flex-shrink:0;}
.nav-tel:hover{color:var(--accent-on-dark);}

/* --- Barra fija de contacto (solo móvil) --- */
.mobile-cta{display:none;}
@media (max-width:920px){
  .mobile-cta{
    display:grid; grid-template-columns:1fr 1fr 1.15fr;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--bg-card); border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .mcta{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:9px 4px; font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.1em;
    color:var(--ink); border:1px solid var(--line-strong);
  }
  .mcta svg{width:17px; height:17px;}
  .mcta-wa{color:#4FCE5D; border-color:#2E6E36;}
  .mcta-main{
    background:var(--accent); border-color:var(--accent); color:#fff;
    flex-direction:row;
  }
  body{padding-bottom:76px;}   /* que la barra no tape el pie */
  .nav-tel{
    margin-left:auto; margin-right:14px; gap:0;
    padding:10px 12px; border:1px solid var(--line-strong);
  }
  .nav-tel span{display:none;}  /* en móvil, solo el icono */
  .nav-tel svg{width:19px; height:19px;}
}
@media (max-width:400px){
  .mcta{font-size:9.5px; letter-spacing:0.06em;}
}

/* --- WhatsApp flotante (solo ordenador) --- */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#0A0A0A;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  transition:transform .2s ease;
}
.wa-float svg{width:30px; height:30px;}
.wa-float:hover{transform:scale(1.08);}
@media (max-width:920px){.wa-float{display:none;}}

/* --- Franja de confianza --- */
/* gana a section.tight (misma especificidad, va después): controla su propio aire */
section.trust-band{background:var(--bg-alt); padding:clamp(30px,3.4vw,44px) 0;}
/* y pega el bloque siguiente ("El diferencial") sin el hueco de section normal */
.trust-band + section{padding-top:clamp(44px,5vw,64px);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px);}
.trust-item{border-left:2px solid var(--accent-on-dark); padding-left:20px;}
.trust-k{
  font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--ink-soft); margin-bottom:11px;
}
.trust-v{font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.4; letter-spacing:-0.01em;}
@media (max-width:920px){.trust-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr;}}

/* ============================================================
   Formulario de presupuesto
   ============================================================ */
.form-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,5vw,76px); align-items:start;}

.trust-list{margin-top:28px;}
.trust-list li{
  position:relative; padding-left:26px; margin-bottom:13px;
  font-size:15px; color:var(--ink-soft); line-height:1.6;
}
.trust-list li::before{
  content:''; position:absolute; left:0; top:9px; width:13px; height:7px;
  border-left:2px solid var(--accent-on-dark); border-bottom:2px solid var(--accent-on-dark);
  transform:rotate(-45deg);
}

.quote-form{background:var(--bg-card); padding:clamp(28px,3.2vw,42px); border-top:3px solid var(--accent);}
.field{margin-bottom:20px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.quote-form label{
  display:block; margin-bottom:9px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted);
}
.quote-form label span{color:var(--accent-on-dark);}
.quote-form input[type=text],
.quote-form input[type=tel],
.quote-form input[type=email],
.quote-form select,
.quote-form textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--line-strong);
  color:var(--ink); font-family:inherit; font-size:15px; padding:14px 16px;
  transition:border-color .18s ease, background .18s ease;
}
.quote-form textarea{resize:vertical; min-height:110px; line-height:1.6;}
.quote-form select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.quote-form :is(input,select,textarea):focus{
  outline:none; border-color:var(--accent-on-dark); background:#101010;
}
.quote-form ::placeholder{color:#5E5A57;}

.check{display:flex !important; align-items:flex-start; gap:12px; margin:6px 0 26px !important;
  text-transform:none !important; letter-spacing:0 !important; font-size:13.5px !important;
  font-weight:400 !important; color:var(--ink-soft) !important; line-height:1.6; cursor:pointer;}
.check input{width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--accent);}
.check a{color:var(--accent-on-dark); text-decoration:underline; text-underline-offset:3px;}
.check .req{color:var(--accent-on-dark);}

.form-submit{width:100%; text-align:center; border:none; cursor:pointer;}
.form-submit[disabled]{opacity:.55; cursor:wait;}
.form-note{
  margin-top:16px; text-align:center; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.1em;
}
.hp{position:absolute !important; left:-9999px; opacity:0;}  /* trampa antispam */

.form-msg{margin-top:20px; padding:16px 18px; font-size:14.5px; line-height:1.6; display:none;}
.form-msg.ok{display:block; background:rgba(79,206,93,.1); border-left:3px solid #4FCE5D; color:#CDEFD2;}
.form-msg.ko{display:block; background:rgba(194,91,67,.12); border-left:3px solid var(--accent-on-dark); color:#EFCFC6;}

@media (max-width:920px){
  .form-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr; gap:0;}
}

/* --- Valoración de Google: 5,0 con 8 opiniones --- */
.rating{
  display:inline-flex; align-items:center; gap:12px; margin-top:24px;
  padding:11px 18px 11px 16px;
  border:1px solid var(--line-strong); background:var(--bg-card);
  transition:border-color .18s ease;
}
.rating:hover{border-color:var(--accent-on-dark);}
.stars{
  color:#F0B429; font-size:15px; letter-spacing:2.5px; line-height:1;
  flex-shrink:0; text-shadow:0 0 12px rgba(240,180,41,.25);
}
.rating-txt{font-size:13px; color:var(--ink-soft); white-space:nowrap; letter-spacing:0.01em;}
.rating-txt strong{color:var(--ink); font-weight:700; font-size:14.5px;}
.cta-band .rating, .hero .rating{background:transparent;}
@media (max-width:560px){
  .rating{gap:10px; padding:10px 14px;}
  .rating-txt{font-size:12px; white-space:normal;}
  .stars{font-size:13px; letter-spacing:1.5px;}
}

/* ============================================================
   Marca de agua: ajuste para pantallas pequeñas
   En móvil la letra baja a la mitad de tamaño y el trazo fino
   se pierde con tan poco contraste. Sube ambas cosas.
   ============================================================ */
@media (max-width:920px){
  /* Sobre las bandas grises hace falta un punto más de claridad */
}
@media (max-width:920px){
  /* que el icono no se solape con las letras del fondo */
  .subpage .subhero{padding-top:62px;}
}

/* Ficha de obra: foto de portada y galería de tres */
.case-media{max-width:1300px; margin:clamp(36px,4vw,56px) auto 0; padding:0 40px;}
.case-media img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg-alt);}
.gallery-grid.trio{grid-template-columns:repeat(3,1fr);}
.gallery-grid.trio .gallery-slot{aspect-ratio:3/4;}
.case-gallery .section-label{margin-bottom:22px;}
@media (max-width:920px){
  .case-media{padding:0 24px;}
  .gallery-grid.trio{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .gallery-grid.trio{grid-template-columns:1fr;} }

/* --- Antes y después: dos parejas enfrentadas --- */
.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,26px);}
.ba-item{margin:0;}
.ba-item .gallery-slot{aspect-ratio:4/3;}
.ba-item figcaption{
  display:flex; align-items:center; gap:12px; margin-top:14px;
  font-size:13px; color:var(--ink-soft); line-height:1.4;
}
.ba-tag{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  padding:5px 10px; flex-shrink:0;
}
.ba-antes{background:var(--bg-alt); color:var(--muted); border:1px solid var(--line-strong);}
.ba-despues{background:var(--accent); color:#fff;}
/* Con 4 datos en vez de 5, que se repartan solos */
.case-facts .ficha-table{grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));}
@media (max-width:560px){
  .ba-grid{grid-template-columns:1fr;}
  .ba-item figcaption{font-size:12.5px;}
}

/* --- Obra relacionada dentro de una página de servicio --- */
.obra-rel{padding-top:0;}
.obra-card{
  display:grid; grid-template-columns:1fr 1.15fr;
  background:var(--bg-card); border-left:2px solid var(--accent-on-dark);
  overflow:hidden; transition:border-color .2s ease;
}
.obra-card:hover{border-left-color:var(--accent);}
.obra-media{aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt);}
.obra-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1);
}
.obra-card:hover .obra-media img{transform:scale(1.04);}
.obra-body{padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:center;}
.obra-body .proj-type{color:var(--accent-on-dark); margin-bottom:12px;}
.obra-body h3{font-size:clamp(17px,1.9vw,22px); letter-spacing:0.02em; line-height:1.3;}
.obra-body p{font-size:14.5px; color:var(--ink-soft); line-height:1.75; margin-top:14px;}
.obra-dato{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.obra-card .card-link{margin-top:18px;}
@media (max-width:760px){
  .obra-card{grid-template-columns:1fr;}
  .obra-media{aspect-ratio:16/9;}
}

/* Tamaño por palabra: cada una se ajusta para caber en la columna
   sin invadir la foto. Las cortas se quedan en el tamaño base. */
.subpage h1[data-ghost="INTEGRALES"]::before{font-size:2.37em;}
.subpage h1[data-ghost="HOSTELERÍA"]::before{font-size:2.34em;}
.subpage h1[data-ghost="OFICINAS"]::before{font-size:3.09em;}
.subpage h1[data-ghost="APERTURAS"]::before{font-size:2.39em;}
.subpage h1[data-ghost="LICENCIA"]::before{font-size:3.17em;}
.subpage h1[data-ghost="PROYECTOS"]::before{font-size:2.43em;}
.subpage h1[data-ghost="LEGALIZAR"]::before{font-size:2.64em;}
.subpage h1[data-ghost="DIRECCIÓN"]::before{font-size:2.64em;}
.subpage h1[data-ghost="LOCALES"]::before{font-size:3.1em;}

/* ============================================================
   Subpáginas: ritmo vertical más compacto
   Las secciones apilaban su espaciado inferior con el superior
   de la siguiente, dejando huecos de casi 200px entre bloques.
   ============================================================ */
.subpage section{
  padding-top:clamp(40px, 4.4vw, 68px);
  padding-bottom:clamp(40px, 4.4vw, 68px);
}
.subpage section.tight{
  padding-top:clamp(32px, 3.4vw, 50px);
  padding-bottom:clamp(32px, 3.4vw, 50px);
}
/* La cabecera no lleva espaciado arriba: lo pone .subhero */
.subpage section.page-hero{padding-top:0;}
/* La obra relacionada va pegada al texto que la justifica */
.subpage section.obra-rel{padding-top:0;}
.subpage h1[data-ghost="INGENIERÍA"]::before{font-size:2.5em;}

/* Antes y después con fotos verticales (portales, baños estrechos…) */
.ba-grid.vertical .gallery-slot{aspect-ratio:3/4;}

/* ============================================================
   Cabeceras a lo ancho (Proyectos, Contacto, Estudio, legales)
   Heredaban 115px de <section> y les sumaban los suyos, dejando
   casi 140px de vacío bajo las migas y otros 144 antes del
   contenido. Las subpáginas y las fichas de obra tienen sus
   propias reglas, más específicas, así que no se ven afectadas.
   ============================================================ */
.page-hero{
  padding-top:clamp(26px, 2.8vw, 44px);
  padding-bottom:clamp(30px, 3.2vw, 48px);
}
.page-hero + section{padding-top:clamp(26px, 2.8vw, 44px);}

/* ============================================================
   Pie de página en el rojo de marca
   Sobre rojo, los grises del tema oscuro no contrastan:
   todos los textos y filetes se recalculan en tonos cálidos.
   ============================================================ */
footer{background:var(--accent); border-top:none;}
.foot-grid{border-bottom:1px solid rgba(255,255,255,.22);}
.foot-head{color:#FFFFFF;}
footer .logo{color:#FFFFFF;}
footer .logo span{color:#F2CFC5;}
.foot-desc{color:#F0D5CD;}
.foot-links a{color:#F5E2DC;}
.foot-links a:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;}
.foot-bottom{color:#EEC9BD; border-top:none;}
.foot-bottom a{color:#EEC9BD;}
.foot-bottom a:hover{color:#FFFFFF;}

/* ============================================================
   Bloque de contacto de la portada
   Tenía el mapa al lado, así que la marca de agua se metía
   debajo, y la sección se estiraba casi 200px de más.
   ============================================================ */
.nap h2[data-ghost]::before{font-size:2.7em;}   /* que quepa antes del mapa */
.nap{
  padding-top:clamp(48px, 5.2vw, 80px);
  padding-bottom:clamp(48px, 5.2vw, 80px);
}
.nap-list{margin-top:22px;}
.nap-row{padding:13px 0;}
.nap .section-desc{margin-top:14px;}
.map-block{min-height:0;}
.map-block iframe{min-height:380px !important;}

/* ============================================================
   Equipo — ficha de /sobre-nosotros/ y tira-resumen de la portada
   ============================================================ */
/* En /sobre-nosotros/ la ficha se pega al texto de arriba y al CTA de abajo
   para no encadenar dos espaciados de sección (ver nota de ritmo vertical). */
.team-block{padding-top:clamp(18px, 2.4vw, 36px); padding-bottom:clamp(34px, 4vw, 54px);}
.team-block + .cta-band{padding-top:clamp(46px, 5.5vw, 70px);}
.team-block .section-head{margin-bottom:clamp(30px, 3.4vw, 44px);}

.team-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px, 1.8vw, 26px); margin-top:clamp(36px, 4vw, 52px);
}
.team-card{
  background:var(--bg-card); border-left:2px solid var(--accent-on-dark);
  transition:border-left-color .2s ease;
}
.team-card:hover{border-left-color:var(--accent);}
.team-photo{aspect-ratio:4/5; overflow:hidden; background:var(--bg-alt);}
.team-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .6s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.team-card:hover .team-photo img{transform:scale(1.04); filter:grayscale(0) contrast(1);}
.team-info{padding:16px 16px 20px;}
.team-name{
  font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  line-height:1.3; color:var(--ink);
}
.team-role{font-size:12px; color:var(--accent-on-dark); line-height:1.5; margin-top:7px;}
@media (max-width:1000px){ .team-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .team-grid{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   Móvil: mismo mecanismo que en escritorio — cada palabra lleva su
   propio tamaño, calculado para llenar el ancho del móvil con un
   sangrado leve y parejo. Las cortas van grandes, las largas se
   achican. El overflow-x:clip impide el scroll lateral.
   Cada regla lista los tres selectores posibles (página ancha,
   subpágina y bloque de contacto) para ganar por orden de fuente.
   ============================================================ */
@media (max-width:700px){
  :is(h1,h2)[data-ghost]::before{ left:-0.18em; }

  :is(h1,h2)[data-ghost="OBRA"]::before,
  .subpage h1[data-ghost="OBRA"]::before        { font-size:3.55em; }

  :is(h1,h2)[data-ghost="BAÑOS"]::before,
  .subpage h1[data-ghost="BAÑOS"]::before,
  :is(h1,h2)[data-ghost="NAVES"]::before,
  .subpage h1[data-ghost="NAVES"]::before       { font-size:3.35em; }

  :is(h1,h2)[data-ghost="EQUIPO"]::before,
  :is(h1,h2)[data-ghost="MÉTODO"]::before       { font-size:3.2em; }

  :is(h1,h2)[data-ghost="LOCALES"]::before,
  .subpage h1[data-ghost="LOCALES"]::before,
  :is(h1,h2)[data-ghost="ESTUDIO"]::before      { font-size:2.55em; }

  :is(h1,h2)[data-ghost="REFORMAS"]::before,
  :is(h1,h2)[data-ghost="OFICINAS"]::before,
  .subpage h1[data-ghost="OFICINAS"]::before,
  :is(h1,h2)[data-ghost="LICENCIA"]::before,
  .subpage h1[data-ghost="LICENCIA"]::before,
  :is(h1,h2)[data-ghost="CONTACTO"]::before     { font-size:2.25em; }

  .nap h2[data-ghost="CONTACTO"]::before        { font-size:2.7em; }

  :is(h1,h2)[data-ghost="APERTURAS"]::before,
  .subpage h1[data-ghost="APERTURAS"]::before,
  :is(h1,h2)[data-ghost="PROYECTOS"]::before,
  .subpage h1[data-ghost="PROYECTOS"]::before,
  :is(h1,h2)[data-ghost="DIRECCIÓN"]::before,
  .subpage h1[data-ghost="DIRECCIÓN"]::before,
  :is(h1,h2)[data-ghost="LEGALIZAR"]::before,
  .subpage h1[data-ghost="LEGALIZAR"]::before   { font-size:2em; }

  :is(h1,h2)[data-ghost="HOSTELERÍA"]::before,
  .subpage h1[data-ghost="HOSTELERÍA"]::before,
  :is(h1,h2)[data-ghost="INGENIERÍA"]::before,
  .subpage h1[data-ghost="INGENIERÍA"]::before,
  :is(h1,h2)[data-ghost="INTEGRALES"]::before,
  .subpage h1[data-ghost="INTEGRALES"]::before  { font-size:1.8em; }

  :is(h1,h2)[data-ghost="PRESUPUESTO"]::before  { font-size:2em; }

  /* Portada: estas tres secciones van sobre <h2>, un punto más grandes
     que en el resto del sitio (donde la misma palabra es un <h1>). */
  h2[data-ghost="REFORMAS"]::before   { font-size:2.7em; }
  h2[data-ghost="INGENIERÍA"]::before { font-size:2.2em; }
  h2[data-ghost="PROYECTOS"]::before  { font-size:2.45em; }
}