@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   COPENA CONSTRUCCIONES — 06 · RESPONSIVE

   Mobile-first. El archivo va ordenado por breakpoint, de menor a mayor, y
   se carga DESPUÉS de secciones.css para ganar a igual especificidad.

   Puntos de corte:
     560   dos columnas donde caben
     700   tablet vertical · socios en 2×2
     900   corredor a velocidad de escritorio · indicador de scroll
    1000   ESCRITORIO: navegación, grúa a la derecha, sticky, socios en franjas
    1200   hilo dorado lateral
    1400   holgura máxima
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════ ≥ 560 px ═══════════════════════════════ */
/* ═════════════════════════ ≥ 420 px · TELÉFONOS GRANDES ═════════════════
   Un escalón solo para el canal. Los tres anchos que hay que atender de
   verdad son 360, 390 y 430, y sin esta regla el de 430 heredaba los 20 px
   del de 390: 70 px más de pantalla y el mismo margen, que es justo donde
   el bloque de texto empieza a leerse pegado al borde.                   */
@media (min-width:420px){
  :root{--canal:24px}
}

@media (min-width:560px){
  :root{--canal:28px}

  .obra{flex-basis:min(360px,62vw)}
  .comparador__mandos .btn{flex:0 1 auto}

  /* La ficha de método pasa a rótulo y valor en la misma línea. Por debajo de
     560 px se apilan: con 320 px de ancho, una columna fija de rótulo dejaría
     el valor en cuatro caracteres por línea. */
  .servicio__metodo > div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:var(--e2) var(--e4)}
}

/* ═══════════════════════════════ ≥ 700 px ═══════════════════════════════ */
@media (min-width:700px){
  :root{--canal:36px}

  :root{--cols:8}

  .principio__cuerpo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--e8);align-items:start}
  .confianza__rejilla{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:var(--e8);align-items:start}
  .ficha__fila{grid-template-columns:auto minmax(0,1fr);padding-block:var(--e5)}
  .listas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e8)}
  .servicio__cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6);align-items:start}
  .transformacion__cifras{grid-template-columns:repeat(4,minmax(0,1fr))}
  .obra{flex-basis:min(340px,46vw)}

  /* Compromisos: el número y el título comparten fila con la explicación,
     igual que .ficha__fila. Es el mismo idioma de lista técnica. */
  .compromisos li{grid-template-columns:auto minmax(0,15ch) minmax(0,1fr)}
  .compromisos p{grid-column:3}

  /* Socios en cuadrícula 2×2: todo visible, sin expansión y sin hover */
  .socios__lista{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e4)}

  .pie__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e7)}
}

/* ═══════════════════════════════ < 700 px ═══════════════════════════════ */
@media (max-width:699.98px){
  /* La grúa va DESPUÉS del bloque de texto, no antes: en un teléfono de 360 px
     ponerla arriba empuja los dos botones fuera de la primera pantalla, y el
     botón de WhatsApp es lo que decide la conversión.

     No hace falta tocar el orden del DOM: en este tramo .hero .wrap no es
     rejilla, así que .grua ya cae detrás de .hero__contenido por flujo normal.
     El orden de lectura para teclado y lector de pantalla se mantiene. */
  .grua{
    display:block;
    width:min(72vw,350px);
    margin:var(--e7) auto 0;
    justify-self:center;
  }
  .grua__luz{filter:blur(42px)}

  /* En teléfono el bloque de texto ocupa MUCHO más que en escritorio: el
     párrafo pasa a cuatro líneas, los dos botones se apilan y la microfrase
     se parte en dos. Los 64 px que antes se descontaban por la barra fija de
     contacto vuelven al titular ahora que esa barra ya no existe. */
  .hero h1{--calce-alto:calc(100svh - var(--cabecera) - 460px)}
}

/* ═══════════════════════════════ ≥ 768 px ═══════════════════════════════ */
@media (min-width:768px){
  .cabecera .btn{display:inline-flex}
}

/* ═══════════════════════════════ ≥ 700 px ═══════════════════════════════ */
@media (min-width:700px) and (max-width:999.98px){
  /* Tablet: la grúa cabe entera debajo del bloque de texto, centrada. No hay
     interacción de puntero porque en estos anchos suele ser táctil. */
  .grua{display:block;width:min(46vw,360px);justify-self:center;margin-top:var(--e7)}
}

/* ═══════════════════════════════ ≥ 900 px ═══════════════════════════════ */
@media (min-width:900px){
  /* --corre NO se declara aquí: animacion.css se carga después y su
     .corredor{--corre:64s} ganaba siempre, porque las media queries no
     aportan especificidad. El valor de escritorio vive ahora junto a la
     animación, en animacion.css, que es su sitio. */
  .hero__baja{display:flex}
  .laminas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e5)}
  .documentos__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e8);align-items:start}
}

/* ═══════════════════════════ ≥ 1000 px · ESCRITORIO ═════════════════════ */
@media (min-width:1000px){
  :root{--canal:48px}

  :root{--cols:12}
  /* El aire de sección crece en escritorio. Un solo sitio donde tocarlo. */
  :root{--section-space:var(--e10)}

  /* ── Navegación ── */
  .nav{display:block}
  .hamburguesa{display:none}
  .menu{display:none}

  /* ── Hero: retícula de 12 columnas ────────────────────────────────────────
     6 de texto · 1 de respiro · 5 de estructura. Antes el contenido era un
     bloque del 56 % y la ilustración un absolute pegado al borde derecho:
     entre los dos quedaban ~146 px muertos y no compartían eje vertical, así
     que la estructura se leía como una pieza aparte. Como elementos de la
     misma rejilla, el conjunto queda centrado y las dos mitades se miran.    */
  .hero .wrap{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:var(--e5);
    align-items:center;
  }
  .hero__contenido{grid-column:1 / span 6;max-width:none}
  /* El ancho se limita a 440 px a propósito: el motivo de la ilustración mide
     601 px de origen, así que por encima de ahí empezaría a verse blando en
     pantallas de doble densidad. */
  /* La escena se centra en su columna en vez de pegarse al borde derecho, y
     baja un poco el eje óptico para que su base dialogue con los botones. */
  .grua{
    display:block;grid-column:9 / span 4;grid-row:1;
    width:clamp(290px,31vw,420px);
    justify-self:center;
    margin-top:clamp(0px,3vh,42px);
  }

  /* ── Sistema Obra Blindada ─────────────────────────────────
     ESTO ERAN 300vh DE SECCIÓN ANCLADA con las cuatro etapas apiladas en
     position:absolute y una sola visible. Cambió el 18/08/2026 y conviene
     saber por qué, porque desde fuera el efecto anterior parecía más «premium»:

       1. Es pinning largo, y el encargo lo prohíbe expresamente. Tres pantallas
          de scroll que no avanzan por la página se sienten como un atasco, no
          como una narración —y quien quiere llegar a Servicios tiene que
          atravesarlas sí o sí.
       2. Arrastraba una clase entera de fallos. Si nadie ponía .activa quedaban
          300vh de columna VACÍA. Le pasó a esta sección: se midió 0 de 4 etapas
          visibles a 1440px sin JavaScript, y hubo que taparlo en 364ef14 con
          un bloque de reglas html:not(.js).
       3. Con las etapas apiladas, tres cuartas partes del contenido no estaban
          en pantalla nunca. Ahora las cuatro se leen seguidas, también para
          quien busca con Ctrl+F o llega desde un lector de pantalla.

     Lo único que se queda quieto es el índice de la izquierda. El avance lo
     marca él —contador y riel—, no la opacidad de las etapas: atenuar el texto
     que no está activo lo dejaría por debajo del contraste mínimo.

     Y ya no hace falta ninguna red html:not(.js): sin JavaScript esto es
     exactamente lo mismo, porque la maquetación base ya es de flujo.        */
  .sistema__rejilla{grid-template-columns:.82fr 1.18fr;gap:var(--e8);align-items:start}

  /* El índice acompaña. El desplazamiento superior descuenta la cabecera fija
     para que el titular no quede por debajo de ella. */
  .sistema__izq{
    position:sticky;
    top:calc(var(--cabecera-fija) + var(--e6));
    align-self:start;
  }

  .etapas{display:grid;gap:var(--e9)}

  /* ── Servicios ── */
  .servicio__cuerpo{grid-template-columns:1.1fr .9fr;gap:var(--e8);padding-bottom:var(--e7)}
  .servicio__tirador{grid-template-columns:auto 1fr auto;gap:var(--e6);padding-block:var(--e6)}
  /* En escritorio, además del clic, basta pasar el cursor o tabular */
  @media (hover:hover){
    .servicio:hover .servicio__panel,
    .servicio:focus-within .servicio__panel{grid-template-rows:1fr}
    /* Si el panel se abre por cursor o por tabulación, su contenido también
       tiene que estar visible de verdad: sin esto quedaría desplegado pero
       con visibility:hidden, es decir, un hueco en blanco. */
    .servicio:hover .servicio__interior,
    .servicio:focus-within .servicio__interior{visibility:visible;transition-delay:0s}
    .servicio:hover .servicio__foto img,
    .servicio:focus-within .servicio__foto img{clip-path:inset(0 0 0 0)}
    .servicio:hover .servicio__n,
    .servicio:focus-within .servicio__n{transform:translateX(8px)}
  }

  /* ── Proyectos ── */
  .obra{flex-basis:360px}
  /* El carril vive DENTRO de la misma retícula que el titular: la primera obra
     alineada con la primera letra del titular y el final con el borde derecho
     del contenedor. Antes se salía a sangre por la derecha, y eso es lo que
     hacía que la sección se sintiera corrida hacia ese lado. */
  .proyectos .carril{
    margin-inline:0;
    padding-inline:0;
    scroll-padding-inline:0;
  }

  /* ── Transformación ── */
  .transformacion__par{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6)}

  /* ── Experiencias ─────────────────────────────────────────────────────
     El carril se alinea con el titular, igual que el de proyectos: fuera el
     relleno lateral, que aquí lo pone el .wrap. */
  .compromisos li{grid-template-columns:auto minmax(0,18ch) minmax(0,1fr);gap:var(--e5) var(--e7)}
  .testimonios .carril{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  /* Un testimonio grande por pantalla, con la foto de la obra al lado.
     El siguiente asoma lo justo para que se vea que hay más. */
  .testimonio{
    width:min(82%,860px);
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    grid-template-areas:"comilla foto" "cita foto" "quien quien";
    align-content:start;
    gap:var(--e4) var(--e7);
    padding:var(--e7) var(--e6) var(--e6);
  }
  .testimonio__comilla{grid-area:comilla}
  .testimonio__cita{grid-area:cita}
  .testimonio__foto{grid-area:foto;align-self:start}
  .testimonio__quien{grid-area:quien}

  /* ── Socios: franjas verticales ───────────────────────────────────────
     Se anima flex-grow. El contenido lleva ANCHO FIJO, así que al abrir la
     franja el texto NO se re-maqueta: la caja crece y aparece más foto.
     .socio tiene contain:layout paint, que confina el recálculo.

     El crecimiento es 2.1, no más: con cuatro franjas de 1, una de 2.6
     dejaba a las otras tres en 250 px y ahí un retrato vertical se
     convierte en una rendija. A 2.1 la activa gana presencia y las vecinas
     siguen siendo caras reconocibles.                                     */
  .socios__lista{
    --socio-ancho:330px;
    display:flex;gap:3px;
    height:min(78vh,700px);
    margin-top:var(--e9);
  }
  .socio{flex:1 1 0;min-width:0;position:relative}
  .socio__retrato{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  /* Aquí sí: en reposo las cuatro bajan de saturación para que la fila lea
     como una sola pieza, y la activa recupera el color entero. Es un estado,
     no un retoque: ninguna cara se vuelve gris ni se oscurece hasta perderse. */
  .socio__retrato img{filter:saturate(.65) contrast(1.05) brightness(.86)}
  .socio__contenido{
    position:absolute;left:0;bottom:0;z-index:3;
    width:var(--socio-ancho);max-width:100%;
    padding-top:var(--e9);
    background:linear-gradient(to top,rgba(21,22,19,.97) 52%,rgba(21,22,19,0));
  }
  /* El filete dorado va ENCIMA del nombre, no debajo: .socio__contenido está
     anclado a bottom:0, así que un filete al pie queda pegado al borde de la
     franja y se pierde. Arriba hace de línea de arranque del bloque de texto
     —el mismo papel que el border-top de .socio__base en móvil— y se extiende
     al activar la ficha. */
  .socio__base{border-top:0;position:relative}
  .socio__base::before{
    content:"";position:absolute;left:var(--e5);top:0;
    width:56px;height:2px;background:var(--oro);
    transition:width var(--v-lento) var(--sal);
  }
  .socio__nombre,.socio__depto{
    transition:transform var(--v-lento) var(--sal);
  }

  .socio:focus-within{flex-grow:2.1}
  .socio:focus-within .socio__retrato img{filter:none}
  .socio:focus-within .socio__base::before{width:calc(var(--socio-ancho) - var(--e5) * 2)}
  .socio:focus-within .socio__nombre,
  .socio:focus-within .socio__depto{transform:translateX(6px)}

  /* El hover solo donde existe un puntero de verdad: en táctil, un :hover
     se queda «pegado» tras el toque y confunde.                            */
  @media (hover:hover){
    .socio:hover{flex-grow:2.1}
    .socio:hover .socio__retrato img{filter:none}
    .socio:hover .socio__base::before{width:calc(var(--socio-ancho) - var(--e5) * 2)}
    .socio:hover .socio__nombre,
    .socio:hover .socio__depto{transform:translateX(6px)}
  }

  /* ── Alianzas ─────────────────────────────────────────────────────────
     División amplia en dos zonas: a la izquierda el discurso, a la derecha
     la otra marca. La ficha se pega arriba para que las dos columnas
     compartan la línea de salida. */
  .alianzas__cuerpo{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:var(--e10);align-items:start;
  }
  .alianza{padding:var(--e7) var(--e6) var(--e6);gap:var(--e5)}

  /* ── Documentos: las láminas se alinean con el scroll ────────────────
     El apilado cuelga de html.gsap, y la clase la pone assets/js/movimiento.js
     DESPUÉS de que GSAP haya cargado y la escena esté montada. Es la condición
     exacta: «hay alguien capaz de separarlas».

     Antes colgaban de nada, y ahí estaba el fallo: sin JavaScript las cinco
     caían en position:absolute con top:0, una encima de otra, y se leía SOLO el
     Documento 05. Medido a 1440px: 10 solapes de 10. Es la peor sección donde
     podía pasar —la 09 es el capítulo que la marca usa como PRUEBA— y no lo
     detectaba ninguna prueba, porque auditar.py mide opacidad y clip-path y
     cinco cajas superpuestas son «visibles» en las dos métricas.

     Se probó primero con html:not(.js) y html.rescate, como .etapa. Cubre menos:
     «hay JavaScript» no implica «GSAP cargó». Con html.gsap quedan cubiertos de
     una vez el 404 de la librería, el movimiento reducido y el móvil.

     Sin la clase manda la rejilla de dos columnas que ya viene de ≥1000px.  */
  html.gsap .laminas{
    display:block;position:relative;
    min-height:520px;
  }
  html.gsap .lamina{
    position:absolute;left:0;right:0;top:0;
    width:min(560px,100%);
  }

  /* ── Estado de etapa ────────────────────────────────────────
     Lo que cambia entre una etapa activa y las demás es el color de su filete,
     que es decorativo y no tiene requisito de contraste. El texto no se toca.  */
  html.gsap .etapa{
    border-left-color:var(--borde-osc);
    transition:border-color var(--m-ui) var(--sal);
  }
  html.gsap .etapa.activa{border-left-color:var(--oro)}

  /* ── Cierre ── */
  .cierre__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e10);align-items:start}

  /* ── Pie ── */
  .pie__rejilla{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}

  /* El titular arranca en el margen, sin sangría. Antes llevaba
     padding-left:calc(86px + var(--e6)) para dejarle sitio a la firma del
     cierre; al retirarla, esos 118 px eran un hueco sin función que además
     le quitaba ancho —y por tanto cuerpo— a las tres líneas. */
  .pie{padding-top:var(--e10)}
}

/* ═══════════════════════════════ ≥ 1200 px ══════════════════════════════ */
@media (min-width:1200px){
  /* El hilo dorado lateral necesita margen para no invadir el texto */
  .hilo{display:block;left:20px}
  .socios__lista{--socio-ancho:360px}
}

/* ═══════════════════════════════ ≥ 1400 px ══════════════════════════════ */
@media (min-width:1400px){
  :root{--canal:56px}
  .hilo{left:28px}
  .obra{flex-basis:390px}
}

/* ═══════════════════════ PANTALLAS BAJAS (móvil apaisado) ═══════════════
   El hero se comprime para que los botones nunca queden fuera de pantalla. */
@media (max-width:767.98px){
  /* Holgura al pie del hero para que el botón flotante no roce la microfrase */
  .hero{padding-bottom:calc(var(--e8) + var(--e5))}
}

/* ── Teléfonos: el titular manda ───────────────────────────────────────────
   Con la fórmula general el titular caía a su suelo de 38 px en una pantalla
   de 390 px y sobraba medio hero vacío. Aquí el techo lo pone el ANCHO, que
   es lo escaso en un teléfono, y el alto solo lo limita si además es corto. */
@media (max-width:767.98px){
  .hero{--h1-hero:clamp(36px,11.6vw,62px)}
}

@media (max-width:767.98px) and (max-height:760px){
  .hero{padding-top:calc(var(--cabecera) + var(--e5));padding-bottom:var(--e5)}
  .grua{width:min(58vw,260px);margin-top:var(--e5)}
  .hero{--h1-hero:clamp(31px,9.6vw,52px)}
  .hero h1{margin-bottom:var(--e4)}
  .hero .bajada{font-size:14.5px;margin-bottom:var(--e4)}
  .hero__lockup{margin-bottom:var(--e3)}
  .hero__cruz{margin-bottom:var(--e3)}
  .hero__micro{margin-top:var(--e3);font-size:11px}
  .btn{min-height:50px;font-size:15px}
}

/* ═══════════════════════════ PANTALLAS BAJAS ════════════════════════════
   En 740 px de alto las nueve entradas del menú más su CTA no caben, y el
   botón de WhatsApp acababa por debajo del borde. Se recorta el aire, nunca
   el área táctil: --toque sigue siendo el suelo de cada enlace.            */
@media (max-height:760px){
  /* Se descuenta --cabecera (88px), NO --cabecera-fija (66px).

     La cabecera solo mide 66px cuando lleva .fijada, y no la lleva si el
     menú se abre con la página arriba del todo. Con 66px de reserva, los
     primeros 6px del primer enlace quedaban DEBAJO de la cabecera, que
     está en z-index 1100 e interceptaba el puntero en esa franja: el
     primer enlace del menú no siempre respondía al primer toque.

     El aire se sigue recortando —de --e5 a --e2, y el padding de cada
     enlace baja—, pero nunca por debajo de la altura real de la cabecera. */
  .menu{padding-top:calc(var(--cabecera) + var(--e2))}
  .menu__enlace{padding-block:var(--e2)}
}

/* ═══════════════════════════ PANTALLAS MUY ESTRECHAS ════════════════════
   360 px y por debajo. Nada puede desbordar ni quedar por debajo de 44px.  */
@media (max-width:380px){
  :root{--canal:18px}
  .cabecera__caja{gap:var(--e2)}
  .marca__txt{font-size:18px}
  .marca__txt small{letter-spacing:.22em}
  .botonera .btn{flex:1 1 100%}
  .comparador__tirador::after{font-size:9px;padding:7px 8px}
  .transformacion__cifras{grid-template-columns:1fr 1fr;gap:var(--e4)}
  .obra{flex-basis:86%}
}

/* ═══════════════════════════════ IMPRESIÓN ══════════════════════════════ */
@media print{
  .cabecera,.menu,.hilo,.trazo,.flota,.hero__baja,
  .grua,.mandos,.progreso{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .oscuro,.carbon,.verde-bg,.proyectos,.sistema,.socios,.documentos,
  .transformacion,.cierre,.pie{background:#fff!important;color:#000!important}
  /* El Sistema ya no se apila ni se ancla: en papel sale como en pantalla.
     Las láminas sí hay que devolverlas al flujo, porque su apilado depende
     de html.gsap y al imprimir la clase puede seguir puesta. */
  .lamina{position:static;width:auto;box-shadow:none;border:1px solid #999}
  .laminas{display:grid;gap:12px}
  .carril{overflow:visible;flex-wrap:wrap;mask-image:none;-webkit-mask-image:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
}