@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   COPENA CONSTRUCCIONES — 04 · SECCIONES
   Estilos propios de cada bloque. El orden es el de la página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */

/* --h1-hero es el cuerpo POR DEFECTO: el que se ve si JavaScript no llega a
   ejecutarse. Cuando calce.js entra, cada línea recibe su propio --cuerpo y
   este valor deja de aplicarse.

   Se mide contra el ALTO además de contra el ancho: es lo único que evita que
   en un portátil de 1366×768 las cuatro líneas empujen el contenido por encima
   de la cabecera fija.                                                       */
.hero{
  --h1-hero:clamp(38px,min(9.2vw,13.2vh),116px);
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--cabecera) + clamp(16px,4vh,48px)) 0 clamp(24px,6vh,64px);
  background:var(--carbon);color:var(--blanco);
  overflow:hidden;
  --foco:var(--oro-alto);
}

/* Fondo: muro de hormigón encofrado, hecho con líneas. Ninguna foto: no
   existe material de exterior y una foto de interior aquí mentiría.        */
.hero__fondo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 27px,transparent 27px 29px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 64px,transparent 64px 66px),
    var(--carbon);
}
.hero__fondo::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grano);opacity:.07;
}

/* Trama de plano: la retícula del replanteo, que se dibuja al entrar */
.hero__plano{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.5;
}
.hero__plano line{stroke:var(--oro);stroke-width:1;opacity:.34}

.hero__velo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(21,22,19,.96) 0%,rgba(21,22,19,.86) 40%,rgba(21,22,19,.3) 100%);
}

.hero .wrap{position:relative;z-index:4;width:100%}
.hero__contenido{max-width:min(680px,100%)}

/* El velo tiene que quedar POR DEBAJO de la escena de la grúa, que es un
   elemento de la rejilla; si no, la oscurecería. */
.hero .grua{z-index:3}

/* Cruz técnica: la primera marca que aparece, antes que ningún texto */
.hero__cruz{
  width:22px;height:22px;position:relative;margin-bottom:clamp(12px,2.4vh,24px);
}
.hero__cruz i{position:absolute;background:var(--oro)}
.hero__cruz i:first-child{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.hero__cruz i:last-child{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}

.hero__lockup{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--track-cota);text-transform:uppercase;
  color:var(--oro);margin:0 0 clamp(10px,1.8vh,16px);
}

/* Sin max-width en caracteres: el ancho lo manda la COLUMNA, y el calce ajusta
   el cuerpo de cada línea a ese ancho. Poner un max-width en `ch` aquí haría
   justo lo contrario de lo que se busca. */
/* --calce-alto es el presupuesto: lo que el bloque puede ocupar sin echar
   fuera al párrafo, los botones y la microfrase. Se descuenta la cabecera y
   se deja sitio para el resto del contenido. Es lo que permite que el mismo
   bloque calzado funcione en un 1366×768 y en un 27 pulgadas. */
.hero h1{
  /* Lo reservado son los 380 px que ocupan etiqueta, párrafo, botones,
     microfrase y los espacios entre ellos, más el aire del hero. Medido, no
     estimado: con 350 la microfrase quedaba pegada al borde inferior. */
  --calce-alto:calc(100svh - var(--cabecera) - 380px);
  margin:0 0 clamp(18px,2.8vh,28px);
  font-size:var(--h1-hero);
  line-height:.84;
}
.hero h1 .lin{
  display:block;overflow:hidden;
  padding-top:.16em;margin-top:-.16em;
  font-size:var(--cuerpo,var(--h1-hero));
  /* Interlineado en em: al ser el cuerpo distinto por línea, un valor fijo
     abriría huecos desiguales entre unas líneas y otras. */
  line-height:.84;
}

.hero .bajada{
  max-width:50ch;
  margin-bottom:clamp(16px,3vh,24px);
  color:var(--gris);
}

.hero__micro{
  display:flex;align-items:center;gap:var(--e2);
  margin:clamp(14px,2.6vh,24px) 0 0;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
}
.hero__micro .punto{
  width:8px;height:8px;flex:none;background:#6FA359;   /* 6,1:1 sobre carbón */
}

/* Indicador de scroll */
.hero__baja{
  position:absolute;right:var(--canal);bottom:var(--e5);z-index:4;
  display:none;align-items:center;gap:var(--e3);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);
}
.hero__baja i{
  display:block;width:1px;height:38px;background:rgba(201,162,39,.4);position:relative;
}
.hero__baja i::after{
  content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;background:var(--oro);
}

/* ── Escena de la grúa ─────────────────────────────────────────────────────
   Profundidad SIMULADA. No hay modelo 3D: es una sola imagen plana con
   perspectiva, rotación y paralaje. Para mover una imagen no hace falta un
   motor WebGL, y meterlo costaría 163 KB por nada.

   LAS NUEVE VARIABLES QUE GOBIERNAN EL MOVIMIENTO. Para regular la intensidad
   solo hay que tocar los topes en assets/js/grua.js; aquí se declaran neutras
   para que sin JavaScript la grúa se vea recta y quieta.

   Se reparten en dos grupos que NO se pisan porque van a variables distintas:
     · el puntero escribe  --gr-rot-x --gr-rot-y --gr-x --gr-y
     · el scroll escribe   --gr-scroll-y --gr-scroll-rot --gr-escala
   y las siete se combinan en UNA sola declaración de transform. Repartirlas en
   varios selectores haría que el último ganase y borrase al otro.            */
.grua{
  --gr-rot-x:0deg;  --gr-rot-y:0deg;
  --gr-x:0px;       --gr-y:0px;
  --gr-scroll-y:0px; --gr-scroll-rot:0deg; --gr-escala:1;
  --luz-x:50%;      --luz-y:44%;

  position:relative;
  width:100%;
  justify-self:end;
  display:none;                       /* se enciende por tramos en responsive */
  perspective:1200px;
  transform-style:preserve-3d;
  isolation:isolate;
}

/* Luz cálida detrás de la estructura, no un círculo dorado evidente. Sigue al
   puntero, pero MENOS que la imagen: si fuera a la par se leería como una capa
   pegada encima en vez de como iluminación de fondo. */
.grua__luz{
  position:absolute;z-index:0;pointer-events:none;
  left:var(--luz-x);top:var(--luz-y);
  width:72%;aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(circle,
    rgba(201,162,39,.20) 0%,rgba(63,62,38,.42) 34%,rgba(38,37,22,.18) 56%,transparent 74%);
  filter:blur(58px);
  opacity:.9;
  transition:opacity var(--v-lento) var(--sal);
}
.grua[data-activa] .grua__luz{opacity:1}

/* Sombra de contacto: elíptica, muy abierta y desplazada al revés que la
   imagen, para que el conjunto se apoye en vez de flotar. */
.grua__suelo{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:2%;
  width:62%;height:5%;
  translate:calc(-50% - var(--gr-x) * .4) 0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,transparent 70%);
  filter:blur(12px);
}

.grua__escena{position:relative;z-index:1;transform-style:preserve-3d;pointer-events:none}

.grua__img{
  width:100%;height:auto;
  object-fit:contain;
  user-select:none;-webkit-user-select:none;
  pointer-events:none;               /* los eventos los recibe .grua */

  transform:
    translate3d(var(--gr-x), calc(var(--gr-y) + var(--gr-scroll-y)), 45px)
    rotateX(var(--gr-rot-x))
    rotateY(var(--gr-rot-y))
    rotateZ(var(--gr-scroll-rot))
    scale(var(--gr-escala));

  filter:
    drop-shadow(0 28px 26px rgba(0,0,0,.30))
    drop-shadow(0 0 18px rgba(201,162,39,.10));

  /* SOLO filter y opacity. Poner transform aquí competiría con el
     requestAnimationFrame y daría el arrastre elástico de los efectos
     baratos: el JavaScript ya interpola, la transición sobraría. */
  transition:filter var(--v-lento) var(--sal),opacity var(--v-lento) var(--sal);
}
.grua[data-activa] .grua__img{
  filter:
    drop-shadow(0 34px 32px rgba(0,0,0,.38))
    drop-shadow(0 0 24px rgba(201,162,39,.18));
}

/* Si la imagen no carga, la escena desaparece sin dejar un icono roto y el
   hero recupera su equilibrio a una sola columna. */
.grua[data-fallo]{display:none!important}

/* ═══ SEÑALES DE CONFIANZA ═══════════════════════════════════════════════
   Ficha técnica: filetes horizontales y numeración. No son seis tarjetas y
   no llevan ni una cifra — no hay obras contadas ni años verificados.      */

.confianza{
  background:var(--verde-900);color:var(--blanco);
  --foco:var(--oro-alto);
}
.confianza .cota{color:var(--oro)}
.confianza h2{color:var(--blanco)}
.confianza .bajada{color:var(--gris-claro);margin-bottom:var(--e6)}
.confianza__rejilla{display:grid;gap:var(--e8);margin-top:var(--e6)}

.ficha{list-style:none;border-top:1px solid var(--borde-osc)}
.ficha__fila{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--e4) var(--e5);align-items:baseline;
  padding-block:var(--e4);
  border-bottom:1px solid var(--borde-osc);
}
.ficha__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;color:var(--oro);
  font-variant-numeric:tabular-nums;
}
.ficha__titulo{
  margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.2vw,26px);line-height:1.04;
  letter-spacing:var(--track-display);text-transform:uppercase;
  color:var(--blanco);
}
.ficha__nota{margin:6px 0 0;font-size:var(--t-menor);color:var(--gris-claro)}

/* ═══ LLAMADA INTERMEDIA ═════════════════════════════════════════════════ */

.llamada{
  background:var(--verde);color:var(--blanco);
  border-top:1px solid rgba(201,162,39,.28);
  padding-block:var(--e7);
  --foco:var(--oro-alto);
}
.llamada__caja{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--e5);
}
.llamada__texto{
  margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,3vw,34px);line-height:1.02;
  letter-spacing:var(--track-display);text-transform:uppercase;
  max-width:18ch;
}

/* ═══ 01 · NUESTRA FORMA DE TRABAJAR ═════════════════════════════════════ */

.principio__titular{max-width:19ch;margin-bottom:var(--e6)}

.principio__cuerpo{display:grid;gap:var(--e7);margin-top:var(--e7)}

/* Los cuatro conceptos: una línea editorial, no cuatro tarjetas */
.conceptos{
  list-style:none;
  border-top:2px solid var(--oro-linea);
  margin-top:var(--e8);
}
.concepto{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:var(--e4);
  padding:var(--e5) 0;
  border-bottom:1px solid var(--gris-linea);
}
.concepto__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;color:var(--oro-texto);
  font-variant-numeric:tabular-nums;
}
.concepto__txt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(24px,4.4vw,49px);line-height:1;
  text-transform:uppercase;letter-spacing:var(--track-display);
}

/* Los tres dolores */
.dolor{
  padding:0 0 var(--e4);margin:0 0 var(--e4);
  border-bottom:1px solid var(--gris-linea);
}
.dolor b{
  display:inline-block;position:relative;
  font-family:var(--display);font-size:23px;font-weight:800;
  text-transform:uppercase;letter-spacing:-.004em;margin-bottom:5px;
}
/* El tachado se dibuja con scaleX, no animando width */
.dolor b::after{
  content:"";position:absolute;left:0;top:52%;height:2px;width:100%;
  background:var(--tinta-2);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--v-lento) var(--sal) .28s;
}
.dolor.visible b::after{transform:scaleX(1)}
.dolor span{display:block;font-size:15.5px;color:var(--tinta-2)}

/* La ficha del dato del INE */
.dato{
  border:1px solid var(--gris-linea);
  border-top:3px solid var(--verde);
  background:var(--blanco);
  padding:var(--e6);
}
.dato__n{
  display:block;
  font:900 clamp(52px,9vw,86px)/.86 var(--display);
  color:var(--verde);font-variant-numeric:tabular-nums;
  margin-bottom:var(--e2);
}
.dato__n span{font-size:.5em;color:var(--tinta-2)}
.dato p{font-size:15.5px;color:var(--tinta-2)}
.dato p:last-child{margin:0}

.dato__foto{margin:0 0 var(--e5)}
.dato__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.8) contrast(1.06)}

/* Comparativa de antes y después. El original es muy alto (1536x2752) y el
   hueco es 4/3 apaisado, así que `cover` recorta ARRIBA Y ABAJO y nunca a los
   lados: como el corte de la imagen es vertical, las dos mitades se ven
   íntegras y la comparación se lee entera. Lo único que se decide aquí es qué
   banda vertical entra, y se ancla arriba para no perder los rótulos ANTES y
   DESPUÉS, que son los que hacen legible la comparación.
   Nada más: mismo ancho, mismo 4/3, misma altura de ficha. Con `contain` la
   imagen quedaría reducida a una tira estrecha en mitad del hueco, y con una
   proporción más alta crecería la tarjeta y con ella la sección entera. */
.dato__foto--comparativa img{object-position:50% 0}
.dato__foto figcaption{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);margin-top:var(--e2);
}

/* ═══ 02 · SISTEMA OBRA BLINDADA ═════════════════════════════════════════ */

.sistema{background:var(--carbon);color:var(--blanco);padding:0;--foco:var(--oro-alto)}
.sistema__alto{position:relative}
.sistema__fija{padding-block:var(--e9)}
.sistema__rejilla{display:grid;gap:var(--e7);width:100%}
.sistema__izq h2{margin-bottom:var(--e4)}

.sistema__cuenta{
  display:flex;align-items:baseline;gap:6px;margin:var(--e6) 0 0;
  font:900 clamp(48px,7vw,76px)/1 var(--display);
  color:var(--oro);font-variant-numeric:tabular-nums;
}
.sistema__cuenta small{font-size:.34em;color:var(--gris)}

/* Riel de etapas: cuatro nodos que se van marcando */
.riel{list-style:none;margin-top:var(--e5);display:grid;gap:0}
.riel li{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--e3);
  padding:var(--e2) 0;
}
.riel__nodo{
  width:11px;height:11px;flex:none;position:relative;
  border:1px solid var(--oro);background:transparent;
  transition:background var(--v-medio) var(--sal);
}
.riel__nodo::before{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(var(--e5));
  margin-left:-.5px;background:rgba(201,162,39,.25);
}
.riel li:last-child .riel__nodo::before{display:none}
.riel__nodo::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--e5);
  margin-left:-.5px;background:var(--oro);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--v-lento) var(--sal);
}
.riel li:last-child .riel__nodo::after{display:none}
.riel li.marcado .riel__nodo{background:var(--oro)}
.riel li.marcado .riel__nodo::after{transform:scaleY(1)}
.riel__txt{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
  transition:color var(--v-medio);
}
.riel li.marcado .riel__txt{color:var(--blanco)}

/* Las etapas */
.etapas{position:relative}
.etapa{
  border-left:3px solid var(--oro);
  padding-left:var(--e5);
}
.etapa__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--track-cota);text-transform:uppercase;
  color:var(--oro);display:block;margin-bottom:var(--e3);
}
.etapa h3{margin-bottom:var(--e3);font-size:clamp(23px,3vw,31px)}
.etapa__golpe{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.6vw,31px);line-height:1.02;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--oro);margin:0 0 var(--e4);max-width:22ch;
}
.etapa p{font-size:15.5px;color:var(--gris);max-width:56ch}
.etapa__datos{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4);
}
.etapa__datos li{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--blanco);
  border:1px solid var(--borde-osc);padding:6px var(--e3);
}

/* ═══ 03 · SERVICIOS ═════════════════════════════════════════════════════ */

.servicios__lista{list-style:none;border-top:2px solid var(--oro-linea)}
.servicio{border-bottom:1px solid var(--gris-linea)}

.servicio__tirador{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--e4);
  width:100%;min-height:var(--toque);
  padding:var(--e5) 0;
  background:transparent;border:0;cursor:pointer;text-align:left;
  --foco:var(--tinta);
}
.servicio__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;color:var(--oro-texto);
  font-variant-numeric:tabular-nums;
  transition:transform var(--v-medio) var(--sal);
}
.servicio__titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(23px,4vw,44px);line-height:1;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--tinta);
}
.servicio__mas{
  width:16px;height:16px;flex:none;position:relative;
}
.servicio__mas i{position:absolute;background:var(--oro-texto);transition:transform var(--v-medio) var(--sal),opacity var(--v-rapido)}
.servicio__mas i:first-child{left:0;right:0;top:7px;height:2px}
.servicio__mas i:last-child{top:0;bottom:0;left:7px;width:2px}
.servicio[data-abierto] .servicio__mas i:last-child{transform:rotate(90deg);opacity:0}
.servicio[data-abierto] .servicio__n{transform:translateX(8px)}

/* El panel abre con grid-template-rows: no hay que saber su altura */
.servicio__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--v-lento) var(--sal);
}
.servicio[data-abierto] .servicio__panel{grid-template-rows:1fr}

/* `overflow:hidden` recorta el panel a cero de alto, pero NO lo saca del
   árbol de accesibilidad: un lector de pantalla leía los seis párrafos y las
   seis fotos de los servicios cerrados mientras los seis botones anunciaban
   aria-expanded="false". `visibility:hidden` sí lo retira de verdad, y
   además lo saca del orden de tabulación.

   La transición de visibility va con retardo para que el contenido no
   desaparezca de golpe mientras el panel todavía se está plegando; al abrir,
   el retardo es cero para que aparezca de inmediato.

   La regla cuelga de html.js: quien abre y cierra estos paneles es
   JavaScript, así que si no se ejecuta no habría forma de abrirlos y el
   texto de los seis servicios quedaría oculto para siempre. Sin JavaScript
   se muestran los seis abiertos —abajo—, que es lo que corresponde: la
   información no puede depender de que un script llegue. */
.servicio__interior{overflow:hidden}
.js .servicio__interior{
  visibility:hidden;
  transition:visibility 0s linear var(--v-lento);
}
.js .servicio[data-abierto] .servicio__interior{
  visibility:visible;
  transition-delay:0s;
}
/* Sin JavaScript: los seis paneles desplegados y legibles. */
html:not(.js) .servicio__panel{grid-template-rows:1fr}
.servicio__cuerpo{
  display:grid;gap:var(--e5);
  padding:0 0 var(--e6);
}
.servicio__cuerpo p{font-size:16px;color:var(--tinta-2);max-width:56ch;margin:0}

/* La foto se revela con máscara rectangular, no con fundido */
.servicio__foto{margin:0;position:relative;overflow:hidden}
.servicio__foto img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.84) contrast(1.05);
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--v-muy-lento) var(--sal) .1s;
}
.servicio[data-abierto] .servicio__foto img{clip-path:inset(0 0 0 0)}

/* Ficha de método, para los tres servicios que no tienen fotografía propia.
   Sustituye al hueco rotulado que había antes: en vez de anunciar que falta
   una foto, publica cómo se trabaja ese rubro. Ocupa la misma columna que
   .servicio__foto, así que la retícula de responsive.css no cambia.

   No es un recurso visual nuevo. Es el 1.2 —el índice editorial, en mono con
   tracking— y el 1.3 —el filete—, aplicados a una lista de definición. Misma
   gramática que .obra__ficha, en la escala clara: dt en oro sobre claro
   (--oro-texto, el único oro que pasa AA sobre arena), dd en --tinta-2.

   Las cinco líneas se leen como los ítems de un presupuesto, que es
   exactamente lo que la sección vende. */
.servicio__metodo{margin:0;border-top:1px solid var(--gris-linea)}
.servicio__metodo > div{
  display:grid;gap:2px;
  padding:var(--e3) 0;
  border-bottom:1px solid var(--gris-linea);
}
.servicio__metodo dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-texto);
}
.servicio__metodo dd{margin:0;font-size:var(--t-menor);color:var(--tinta-2)}

/* ═══ 04 · PROYECTOS ═════════════════════════════════════════════════════ */

/* El carril sangra hacia la derecha con un margen negativo calculado sobre
   100vw. Como vw incluye la barra de desplazamiento y el redondeo puede
   jugar una mala pasada, la seccion recorta: asi el sangrado nunca puede
   convertirse en scroll horizontal de la pagina, pase lo que pase. El
   carril conserva su propio overflow-x:auto. */
.proyectos{background:var(--verde);color:var(--blanco);--foco:var(--oro-alto);
  overflow-x:hidden;overflow-x:clip}
.proyectos__cabeza{
  display:flex;flex-wrap:wrap;gap:var(--e5);
  align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--e7);
}
/* El carril sale del .wrap para llegar a sangre por la derecha */
.proyectos .carril{margin-inline:calc(var(--canal) * -1)}

/* ═══ 05 · TRANSFORMACIÓN ════════════════════════════════════════════════ */

.transformacion{background:var(--carbon);color:var(--blanco);--foco:var(--oro-alto)}
.transformacion__par{display:grid;gap:var(--e7);margin-top:var(--e7)}
.transformacion__instruccion{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cota);
  text-transform:uppercase;color:var(--oro);margin:var(--e5) 0 0;
}
.transformacion__cifras{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e5);margin-top:var(--e8);
  border-top:2px solid var(--oro);padding-top:var(--e5);
}
.transformacion__cifras dt{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px;
}
.transformacion__cifras dd{
  margin:0;font:900 clamp(28px,5vw,49px)/.9 var(--display);
  color:var(--oro);font-variant-numeric:tabular-nums;
}

/* ═══ 06 · EXPERIENCIAS ══════════════════════════════════════════════════
   Verde oliva entre el carbón de Transformación y el verde-900 de Socios:
   una progresión legible en vez de dos cortes idénticos seguidos.

   La sección tiene DOS estados y solo uno se ve a la vez:
     · sin testimonios → .compromisos, que es lo que hay hoy
     · con testimonios → .testimonios, el carrusel                          */

.experiencias{background:var(--verde);color:var(--blanco);--foco:var(--oro-alto)}

/* ── Compromisos ────────────────────────────────────────────────────────
   Lista numerada, no tarjetas. Cada punto es una fila con su número en oro
   a la izquierda, igual que las fichas de Confianza: el mismo idioma. */
.compromisos{
  list-style:none;
  margin:var(--e8) 0 0;
  border-top:1px solid var(--borde-osc);
}
.compromisos li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--e3) var(--e5);
  align-items:baseline;
  padding-block:var(--e5);
  border-bottom:1px solid var(--borde-osc);
}
.compromisos b{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;color:var(--oro);
  font-variant-numeric:tabular-nums;
}
.compromisos span{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.9vw,31px);line-height:1.02;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--blanco);
}
.compromisos p{
  grid-column:2;margin:0;
  color:var(--gris-claro);max-width:52ch;
}

/* La advertencia va en mono y sin adornos: es una nota al pie honesta, no
   una disculpa. Sobre verde, --gris-claro da 6,0:1. */
.experiencias__nota{
  margin:var(--e6) 0 0;max-width:64ch;
  font-family:var(--mono);font-size:var(--t-micro);
  line-height:1.7;letter-spacing:.06em;
  color:var(--gris-claro);
  border-left:2px solid var(--oro);
  padding-left:var(--e4);
}

/* ── Carrusel de testimonios ──────────────────────────────────────────── */
.testimonios{margin-top:var(--e8)}
.testimonios .carril{gap:var(--e5)}

.testimonio{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:min(100%,660px);
  display:grid;gap:var(--e5);
  background:var(--verde-900);
  border-top:2px solid var(--oro);
  padding:var(--e6) var(--e5) var(--e5);
}
/* Comilla dorada, discreta y decorativa: se saca del árbol accesible con
   aria-hidden en el HTML generado, así que aquí solo es tipografía. */
.testimonio__comilla{
  font:900 clamp(46px,7vw,84px)/.6 var(--display);
  color:var(--oro);display:block;height:.42em;
}
.testimonio__cita{
  margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.9vw,34px);line-height:1.1;
  letter-spacing:var(--track-display);
  color:var(--blanco);
}
.testimonio__foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.testimonio__quien{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);align-items:baseline;
  border-top:1px solid var(--borde-osc);padding-top:var(--e4);
}
.testimonio__nombre{
  font-family:var(--mono);font-size:var(--t-menor);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blanco);
}
.testimonio__dato{
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--oro);
}
.testimonio__enlace{
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-claro);
}

/* Indicador 01 / 03. Tabular para que no baile al cambiar de número. */
.testimonios__cuenta{
  margin:0;flex:none;color:var(--oro);
  font-variant-numeric:tabular-nums;
}

/* ═══ 07 · SOCIOS ════════════════════════════════════════════════════════ */

.socios{background:var(--verde-900);color:var(--blanco);--foco:var(--oro-alto)}

/* ── Titulares con mayúscula acentuada ───────────────────────────────────
   El interlineado de 0,86 del sitio deja la caja de línea más baja que el
   glifo completo: a cuerpo 84px la caja mide 72px y una Á mide 83px. La
   tilde no llega a recortarse —aquí no hay overflow:hidden— pero se funde
   con el trazo de la línea de encima, y «CUATRO ÁREAS» se lee «CUATRO
   AREAS». Es el mismo síntoma que en su día tuvieron «QUE FIRMÁS» y «QUE
   PAGÁS», por otra causa.

   Da el aire justo y lo devuelve con un margen negativo de medio interlínea,
   para que la primera línea siga apoyando exactamente donde apoyaba. Es una
   clase, no un parche con ID: sirve para cualquier titular acentuado.       */
.titular-tilde{line-height:1.02;margin-top:-.08em}

.socios__intro{max-width:62ch}
.socios__frase{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.6vw,31px);line-height:1.06;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--oro);margin:var(--e5) 0 0;max-width:26ch;
}

.socios__lista{list-style:none;display:grid;gap:var(--e5);margin-top:var(--e8)}

.socio{
  position:relative;overflow:hidden;
  background:var(--carbon);
  border:1px solid var(--borde-osc);
  /* aísla el re-cálculo al expandir: el resto de la página no se re-maqueta */
  contain:layout paint;
}
/* La ficha es focalizable para que el teclado llegue a la misma interacción
   que el ratón. Nada de información depende de ese foco: número, nombre y
   cargo se leen siempre.

   El anillo va DENTRO, porque .socio recorta con overflow:hidden, y como
   pseudo-elemento por encima de todo: un box-shadow inset se pinta debajo
   del contenido, y el retrato lleva position:absolute, así que lo tapaba. */
.socio:focus-visible{outline:none}
.socio:focus-visible::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--oro-alto);
}

.socio__retrato{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--carbon-2);
  display:grid;place-items:center;
}
/* El <picture> es quien se estira, NO el <img>.
   Importa: .socio__retrato es un grid con place-items:center, así que un
   <picture> en flujo cuyo único hijo esté en absolute mide 0 de ancho — y
   Chromium no llega a pedir una imagen lazy que no ocupa nada. Se sacó el
   absolute del <img> y se le puso al <picture>.                            */
.socio__retrato picture{position:absolute;inset:0;display:block}

/* Unificación de los cuatro retratos, que vienen con luz y encuadre
   distintos. Se hace por CSS: los archivos no se retocan.

   Nada de grayscale ni de sepia sobre caras reales. Aquí, hasta 1000px, el
   ajuste es casi imperceptible: iguala las cuatro luces y nada más. Sin
   hover ni franjas que expandir, una foto muy desaturada se quedaría así
   para siempre, y en móvil cada retrato ocupa su propio bloque: es la
   fotografía, no un fondo. El desaturado de verdad vive en responsive.css,
   dentro del modo franja, donde sí hay un estado activo al que volver.     */
.socio__retrato img{
  width:100%;height:100%;
  object-fit:cover;
  /* --pos lo fija cada <li> en su style: cada foto tiene su recorte  */
  object-position:var(--pos,50% 18%);
  filter:saturate(.88) contrast(1.02) brightness(.97);
  transition:filter var(--v-lento) var(--sal);
}
/* Respaldo si una fotografía no carga: quedan las iniciales sobre carbón, y
   el nombre y el cargo siguen ahí. Sin JavaScript y sin silueta de banco de
   imágenes. Va DEBAJO de la imagen, así que solo se ve si no hay imagen.   */
.socio__iniciales{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,7vw,72px);line-height:1;
  letter-spacing:var(--track-display);
  color:var(--borde-osc);
}

/* Numeración de la ficha, sobre el retrato y siempre visible */
.socio__num{
  position:absolute;top:0;left:0;z-index:3;
  margin:0;padding:var(--e2) var(--e4);
  background:var(--carbon);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--track-cota);color:var(--oro);
  font-variant-numeric:tabular-nums;
}

/* Siempre visible, sin interacción: nombre y departamento */
.socio__base{padding:var(--e5);border-top:2px solid var(--oro)}
.socio__nombre{
  font-family:var(--display);font-weight:900;
  font-size:clamp(21px,2.4vw,31px);line-height:1;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--blanco);margin:0 0 var(--e2);
}
.socio__depto{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--oro);
  margin:0;
}

/* ═══ 07 · DOCUMENTACIÓN Y CONTROL ═══════════════════════════════════════ */

.documentos{background:var(--carbon);color:var(--blanco);--foco:var(--oro-alto)}
.documentos__titular{max-width:22ch}
.laminas{position:relative;margin-top:var(--e8);display:grid;gap:var(--e4)}

.lamina{
  background:var(--blanco);color:var(--tinta);
  border-left:5px solid var(--oro);
  padding:var(--e6);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  --foco:var(--tinta);
}
.lamina__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--track-cota);text-transform:uppercase;
  color:var(--oro-texto);display:block;margin-bottom:var(--e2);
}
.lamina h3{margin-bottom:var(--e2)}
.lamina p{font-size:15.5px;color:var(--tinta-2);margin:0}

/* Sello de cierre */
.sello{
  width:132px;height:132px;margin:var(--e6) auto 0;
  border:3px solid var(--oro);border-radius:50%;
  display:grid;place-items:center;text-align:center;padding:var(--e3);
  font:900 14px/1.2 var(--display);letter-spacing:.06em;
  color:var(--oro);text-transform:uppercase;
  transform:rotate(-9deg);
}

/* ═══ 08 · GARANTÍA ══════════════════════════════════════════════════════ */

/* Dos plazos. El de impermeabilizaciones pesa más porque es el diferencial;
   el segundo entra con el filete más fino para que se lea como el término
   general, no como otra promesa del mismo rango. */
.garantias{display:grid;gap:var(--e6);margin-top:var(--e7)}

.garantia__cifra{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:var(--e5);
  border-top:3px solid var(--oro);
  padding-top:var(--e5);
}
.garantia__cifra + .garantia__cifra{border-top-width:1px}
.garantia__cifra + .garantia__cifra .n{font-size:clamp(46px,8vw,86px)}

.garantia__cifra .n{
  font:900 clamp(64px,13vw,132px)/.82 var(--display);
  color:var(--oro);font-variant-numeric:tabular-nums;
}
.garantia__cifra .txt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.4vw,25px);line-height:1.04;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--blanco);
}

/* ═══ 08 · ALIANZAS ══════════════════════════════════════════════════════
   Bloque claro entre cuatro secciones oscuras. Es deliberado: la otra marca
   necesita su propio aire para no leerse como una sección más de Copena, y
   la página necesitaba respirar antes del tramo final.

   SOBRE FONDO CLARO EL ORO CAMBIA DE TONO. --oro da 2,28:1 aquí y es
   ilegible; el texto va en --oro-texto (5,07:1) y los filetes en
   --oro-linea (3,07:1). La regla está explicada en base.css.               */

.alianzas__cuerpo{display:grid;gap:var(--e8)}

.alianzas__frase{
  margin:var(--e6) 0 0;max-width:30ch;
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.3vw,26px);line-height:1.06;
  text-transform:uppercase;letter-spacing:var(--track-display);
  color:var(--oro-texto);
}

/* La ficha de la alianza. Rectángulo con filete superior, como todas las
   fichas del sitio. Nada de tarjeta blanca redondeada con sombra. */
.alianza{
  background:var(--blanco);
  border:1px solid var(--gris-linea);
  border-top:2px solid var(--oro-linea);
  padding:var(--e6) var(--e5) var(--e5);
  display:grid;gap:var(--e4);
  align-content:start;
}
.alianza__orden{color:var(--oro-texto);margin:0}

/* Lotipo temporal. Se compone con la tipografía del sitio y NO imita ningún
   logotipo: es el nombre escrito, no una marca inventada. */
.alianza__lotipo{
  margin:0;font-family:var(--display);text-transform:uppercase;
  line-height:.9;letter-spacing:var(--track-display);
}
.alianza__lotipo span{
  display:block;font-weight:700;
  font-size:clamp(15px,1.9vw,20px);letter-spacing:.16em;
  color:var(--tinta-2);
}
.alianza__lotipo b{
  display:block;font-weight:900;
  font-size:clamp(38px,6vw,68px);color:var(--tinta);
}
/* Cuando llegue el SVG oficial ocupa el mismo sitio, sin tocar la retícula */
.alianza__lotipo img{max-width:min(100%,260px);height:auto}

/* El filete se extiende al entrar. transform, no width. */
.alianza__filete{
  height:2px;border:0;margin:var(--e2) 0 0;
  background:var(--oro-linea);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--v-muy-lento) var(--sal);
}
.alianza.visible .alianza__filete{transform:scaleX(1)}
html:not(.js) .alianza__filete{transform:scaleX(1)}

.alianza__ficha{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);margin:0}
.alianza__ficha dt{
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-texto);margin-bottom:4px;
}
.alianza__ficha dd{
  margin:0;font-family:var(--mono);font-size:var(--t-menor);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);
}

.alianza__desc{margin:0;max-width:48ch;color:var(--tinta-2)}

.alianza__foto{
  background:var(--arena);
  border:1px dashed var(--gris-linea);
  aspect-ratio:4/3;
  display:grid;place-items:center;
}
.alianza__foto img{width:100%;height:100%;object-fit:cover}
/* Con fotografía real el borde punteado —que anuncia un hueco— sobra. La
   clase la pone interfaz.js al insertar la imagen, no un :has(), para no
   depender del soporte del selector. */
.alianza__foto--llena{border-style:solid;border-color:var(--gris-linea)}

/* Este bloque lo ocupa un LOGOTIPO cuadrado, no una fotografía, así que se
   encuadra al revés que una foto: `contain` en vez de `cover`. El hueco es 4/3
   y la imagen 1/1; con `cover` se recortaría la casa y parte del nombre, y
   deformarla no es una opción tratándose de la marca de otra empresa.

   La proporción la conserva object-fit y el centrado lo da object-position, que
   por defecto ya es 50% 50%. El <picture> necesita display:block y medidas
   explícitas porque en línea no le pasaría la altura a la imagen.

   OJO CON EL POSICIONADO: el <picture> va absoluto, no en flujo con height:100%.
   En flujo se forma un ciclo —la altura del bloque sale del aspect-ratio, que
   sale del ancho, pero el min-height:auto de un elemento de rejilla la deja
   crecer con el contenido— y el hueco 4/3 acababa siendo un cuadrado, o sea la
   tarjeta más alta. Fuera de flujo no aporta altura mínima, el 4/3 se respeta
   y el `inset` le da a la imagen una caja de medidas definidas y con aire.

   El borde punteado —que anunciaba un hueco vacío— pasa a continuo, igual que
   en .alianza__foto--llena: aquí ya hay contenido real. */
.alianza__foto--logo{
  position:relative;
  border-style:solid;border-color:var(--gris-linea);
}
.alianza__foto--logo picture{display:block;position:absolute;inset:var(--e4)}
.alianza__foto--logo img{width:100%;height:100%;object-fit:contain}

/* Rótulo de hueco pendiente. Hoy no lo usa nadie —el bloque de fotografía de
   la alianza 01 ya tiene contenido—, pero se conserva para la segunda alianza,
   que sí nacerá sin imagen. */
.alianza__hueco{
  margin:0;padding:var(--e4);text-align:center;line-height:1.9;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);
}
.alianza__hueco b{display:block;color:var(--oro-texto);font-weight:500}

/* La flecha del botón se separa al pasar el cursor: la misma gramática que
   el icono del botón flotante. */
.alianza__cta .flecha{transition:transform var(--v-rapido) var(--sal)}
.alianza__cta:hover .flecha{transform:translate(2px,-2px)}

/* ═══ CIERRE ═════════════════════════════════════════════════════════════ */

.cierre{background:var(--verde-900);color:var(--blanco);--foco:var(--oro-alto)}
.cierre h2{max-width:15ch;margin-bottom:var(--e5)}
.cierre__rejilla{display:grid;gap:var(--e8);margin-top:var(--e7)}

/* El hilo dorado termina dibujando la esquina del botón principal */
.cierre__acento{position:relative;display:inline-block}
.cierre__acento::before,
.cierre__acento::after{
  content:"";position:absolute;background:var(--oro);pointer-events:none;
  transition:transform var(--v-muy-lento) var(--sal);
}
.cierre__acento::before{
  left:-8px;top:-8px;width:2px;height:calc(100% + 16px);
  transform:scaleY(0);transform-origin:top;
}
.cierre__acento::after{
  left:-8px;top:-8px;height:2px;width:min(180px,100%);
  transform:scaleX(0);transform-origin:left;
}
.cierre__acento.trazado::before{transform:scaleY(1)}
.cierre__acento.trazado::after{transform:scaleX(1);transition-delay:.45s}

.cierre__datos{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);
  margin-top:var(--e7);padding-top:var(--e5);
  border-top:1px solid rgba(250,248,243,.2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-claro);
  align-items:center;
}
/* Los dos datos de esta fila que SON enlaces —WhatsApp y correo— tienen que
   poder pulsarse. Como texto en línea medían 15px de alto, por debajo incluso
   del mínimo de 24px de la norma. Se les da el área táctil completa sin
   cambiar el tamaño de la letra ni el ritmo de la fila. */
.cierre__datos a{
  display:inline-flex;align-items:center;
  min-height:var(--toque);
}