@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   COPENA CONSTRUCCIONES — 01 · BASE
   Fichas: variables, reinicio, tipografía, retícula, utilidades.

   REGLA DE COLOR QUE GOBIERNA TODO EL SITIO
   El oro cambia de tono según el FONDO, no según el elemento:
     · sobre fondo oscuro  → --oro        #C9A227   (7,51:1 sobre carbón)
     · sobre fondo claro   → --oro-texto  #7E6013   (5,07:1 sobre arena)
     · filete decorativo sobre claro → --oro-linea  #A9821C  (3,07:1 sobre arena)
   Poner --oro sobre fondo claro da 2,28:1 y es ilegible. No hacerlo nunca.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Color · fondos oscuros ─────────────────────────────────────────── */
  --carbon:#151613;          /* fondo más profundo                          */
  --carbon-2:#1D1E19;        /* franjas dentro de bloques carbón            */
  --verde-900:#262516;       /* verde oliva casi negro                      */
  --verde:#3F3E26;           /* verde oliva profundo — color primario       */

  /* ── Color · fondos claros ──────────────────────────────────────────── */
  --blanco:#FAF8F3;          /* blanco cálido                               */
  --arena:#F2EEE3;           /* claro alterno; medido para que el filete
                                dorado siga pasando el 3:1                   */

  /* ── Color · oro ────────────────────────────────────────────────────── */
  --oro:#C9A227;             /* sobre oscuro                                */
  --oro-alto:#E0BE43;        /* acentos pequeños, hover                     */
  --oro-linea:#A9821C;       /* filetes sobre claro                         */
  --oro-texto:#7E6013;       /* texto y etiquetas sobre claro               */

  /* ── Color · texto ──────────────────────────────────────────────────── */
  --tinta:#14140D;           /* texto principal sobre claro     17,4:1      */
  --tinta-2:#4C4B3E;         /* texto secundario sobre claro     7,6:1      */
  --gris:#AAA69A;            /* texto secundario sobre carbón    7,5:1      */
  --gris-claro:#C3C1B7;      /* texto secundario sobre verde     6,0:1      */
  --gris-linea:#D8D2C4;      /* filetes sobre claro                         */
  --borde-osc:#6B6A4E;       /* filetes DECORATIVOS sobre oscuro            */

  /* Borde de CONTROL sobre oscuro. WCAG 1.4.11 pide 3:1 para el contorno de
     un elemento con el que se interactúa, y --borde-osc no llega: 2,34:1
     contra el relleno de los campos y 1,97:1 contra el verde oliva de los
     mandos de galería. Este da 3,5:1 en el peor de los cuatro fondos y
     5,8:1 sobre carbón. Se usa SOLO en controles —campos, selects, flechas
     de carrusel—; los filetes decorativos siguen con --borde-osc, que no
     tiene requisito de contraste porque no se pulsa.                      */
  --borde-control:#94937F;

  /* ── Correo oficial ────────────────────────────────────────────────────
     Se escribe «copenacontrucciones@gmail.com», SIN la segunda «s».
     NO es una errata. Aparece en el pie, en contacto, en el menú móvil y en
     los datos estructurados. Ver la regla .pie__correo más abajo.        */

  /* ── Color · alerta. Único uso del ladrillo en toda la página ───────── */
  --ladrillo:#A94632;

  /* ── Anillo de foco. Se redefine por contexto más abajo ─────────────── */
  --foco:var(--oro);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --display:"Big Shoulders Display","Archivo Narrow","Arial Narrow",system-ui,sans-serif;
  --texto:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;

  /* Escala del brandbook, razón 1,25: 12·14·16·20·25·31·39·49·61·76·95·119 */
  --t-micro:12px;  --t-menor:14px;  --t-base:16px;  --t-medio:20px;
  --t-mayor:25px;  --t-h3:clamp(21px,2.6vw,31px);
  --t-h2:clamp(33px,6.2vw,84px);
  --t-h1:clamp(42px,10.4vw,124px);

  --track-display:-.012em;   /* condensada grande: tracking casi nulo        */
  --track-cota:.22em;        /* versalitas técnicas: muy abierto             */

  /* ── Espaciado, escala de 4 ─────────────────────────────────────────── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;

  /* ── Espaciado · nombres semánticos ──────────────────────────────────
     Son ALIAS de la escala de arriba, no una segunda escala: --space-md y
     --e5 son literalmente el mismo valor. Existen para que un ajuste se lea
     por lo que significa («el aire entre secciones») y no por su posición
     en una lista numerada.

     NO se sustituyeron los --e* uno por uno en los 2.800 renglones de CSS:
     el ritmo actual está calibrado y una sustitución masiva lo rompería sin
     ganar nada. Se usan en lo estructural —el aire de sección— y en lo que
     se escriba de aquí en adelante.                                      */
  --space-xs:var(--e2);      /*  8px · entre un icono y su texto            */
  --space-sm:var(--e3);      /* 12px · entre líneas de una misma lista      */
  --space-md:var(--e5);      /* 24px · entre título y texto                 */
  --space-lg:var(--e7);      /* 48px · entre texto y CTA, entre bloques     */
  --space-xl:var(--e8);      /* 64px · entre columnas del pie               */
  --space-2xl:var(--e9);     /* 96px · aire mayor dentro de una sección     */
  --section-space:var(--e9); /* 96px · aire vertical de sección en móvil    */

  /* ── Retícula ────────────────────────────────────────────────────
     4 columnas en móvil, 8 en tablet, 12 en escritorio. El repeat() estaba
     escrito tres veces, una por breakpoint. Ahora el número de columnas es un
     token: el salto se declara cambiando --cols y cualquier rejilla nueva lo
     hereda sin repetir la media query.                                      */
  --cols:4;
  --gutter:var(--e5);

  /* ── Medidas ────────────────────────────────────────────────────
     El margen lateral sube por escalones y la escala completa vive en
     responsive.css:  ≤380 → 18 · 381-419 → 20 · 420-559 → 24 · 560 → 28 ·
     700 → 36 · 1000 → 48 · 1400 → 56. Los tres primeros escalones son los
     tres teléfonos que hay que atender de verdad: 360, 390 y 430 px.       */
  --max:1320px;              /* ancho útil                                  */
  --canal:20px;              /* margen lateral · ver la escala de arriba    */
  --cabecera:88px;           /* alto de la cabecera en reposo               */
  --cabecera-fija:66px;      /* alto de la cabecera tras hacer scroll       */
  --toque:44px;              /* área táctil mínima                          */

  /* ── Movimiento ─────────────────────────────────────────────────────── */
  --sal:cubic-bezier(.16,1,.3,1);      /* salida suave, la curva del sitio  */
  --dentro:cubic-bezier(.4,0,.2,1);
  --v-rapido:160ms; --v-medio:340ms; --v-lento:620ms; --v-muy-lento:900ms;

  /* Escala de duraciones POR PAPEL, no por velocidad. Los --v-* de arriba se
     quedan porque los usan transiciones ya calibradas; estos son los que usa
     lo nuevo, y sobre todo son la ÚNICA fuente de verdad de las duraciones de
     GSAP: assets/js/movimiento.js las LEE de aquí con getComputedStyle en vez
     de llevar su propia copia en segundos. Tocar un número aquí cambia el CSS
     y el JavaScript a la vez.

     Ninguna llega al segundo: una animación de dos segundos en una web
     comercial no se lee como cuidado, se lee como espera.                   */
  --m-micro:180ms;      /* hover, foco, la flecha de un CTA                  */
  --m-ui:300ms;         /* abrir, cerrar, cambiar de estado                  */
  --m-reveal:560ms;     /* entrada de texto y de bloques                     */
  --m-img:700ms;        /* máscara de fotografía                             */
  --m-editorial:820ms;  /* el titular del hero, y poco más                   */

  /* Distancia de la entrada de .ap. Eran 20px; la referencia editorial pide
     entre 4 y 14, porque por encima de ahí el bloque no aparece: viaja. Y un
     viaje repetido setenta veces es lo único que se acaba viendo.           */
  --ap-dist:12px;
}

/* ── Textura de papel técnico ──────────────────────────────────────────────
   Grano de una sola pasada, sin archivo externo. Se aplica muy por debajo
   del umbral que afectaría a la legibilidad.                               */
:root{
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══ REINICIO ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  /* Con cabecera fija, los anclajes tienen que aterrizar por debajo de ella */
  scroll-padding-top:calc(var(--cabecera-fija) + var(--e4));
}

body{
  margin:0;
  background:var(--arena);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip no crea contexto de scroll; hidden sí. Con clip, position:sticky
     sigue funcionando dentro. Se deja hidden de reserva para navegadores
     que no conozcan clip.                                                  */
  overflow-x:hidden;
  overflow-x:clip;
  /* Sin padding inferior: la barra fija de contacto de 64 px que lo
     justificaba se retiró en favor del botón flotante, que no ocupa banda. */
}

/* Sin los atributos width/height un <img> se estira; con ellos, ganan a
   aspect-ratio. Esta línea es la que evita las dos cosas a la vez.         */
img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}

a{color:inherit}
p{margin:0 0 1em}
/* El atributo hidden tiene que ganar a cualquier display de autor. Sin esto,
   una regla como `.menu{display:flex}` deja el elemento a la vista aunque
   JavaScript le haya puesto hidden. */
[hidden]{display:none!important}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:target{scroll-margin-top:calc(var(--cabecera-fija) + var(--e5))}

/* ═══ FOCO ═══════════════════════════════════════════════════════════════
   El anillo dorado sobre fondo claro da 2,28:1 y falla WCAG 1.4.11. Por eso
   --foco se redefine en cada contexto en vez de ser un color fijo.         */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--foco);
  outline-offset:3px;
  border-radius:1px;
}
.claro,.arena-bg{--foco:var(--tinta)}
.oscuro,.carbon,.verde-bg{--foco:var(--oro-alto)}
/* Mismo agujero que tenían las cotas: estas secciones son oscuras pero no
   llevan .oscuro ni .carbon, así que heredaban el anillo de foco de fondo
   claro. Se declara aquí, y cada bloque puede seguir afinándolo. */
.sistema,.proyectos,.transformacion,.experiencias,.socios,.documentos,
.confianza,.cierre,.llamada,.corredor,.hero,.pie{--foco:var(--oro-alto)}

::selection{background:var(--oro);color:var(--carbon)}

/* ═══ TIPOGRAFÍA ═════════════════════════════════════════════════════════ */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  line-height:.86;
  letter-spacing:var(--track-display);
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:800;line-height:.98;letter-spacing:-.004em}
h4{font-size:var(--t-medio);font-weight:800}

strong,b{font-weight:700}

/* Etiqueta técnica de sección: «01 — NUESTRA FORMA DE TRABAJAR» */
.cota{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:var(--track-cota);
  text-transform:uppercase;
  color:var(--cota-color,var(--oro-texto));
  display:flex;
  align-items:center;
  gap:var(--e3);
  margin:0 0 var(--e5);
  font-variant-numeric:tabular-nums;
}
/* Marca de acotación: dos topes y una línea, como en un plano */
.cota::before{
  content:"";
  width:34px;height:9px;flex:none;
  border-left:1px solid currentColor;
  border-right:1px solid currentColor;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;
}
/* ── Contexto de color ─────────────────────────────────────────────────────
   Los tokens de texto se heredan del BLOQUE, no del elemento. Es el mismo
   mecanismo que ya usa --foco, y resuelve un fallo que arrastraba la página:
   secciones oscuras con clase propia (.sistema, .proyectos, .socios,
   .documentos, .transformacion, .confianza, .cierre) no llevaban .oscuro ni
   .carbon, así que sus cotas y sus bajadas caían en los tokens de fondo
   CLARO y daban 1,75:1 sobre carbón. Ilegible.

   Ahora cada bloque oscuro declara el contexto una vez y todo lo de dentro
   lo hereda, tenga la clase que tenga.                                     */
.oscuro,.carbon,.verde-bg,
.sistema,.proyectos,.transformacion,.experiencias,.socios,
.documentos,.confianza,.cierre,.llamada,.corredor,.hero,.pie{
  --cota-color:var(--oro);
  --bajada-color:var(--gris);
}
.verde-bg,.proyectos,.experiencias,.llamada,.pie{--bajada-color:var(--gris-claro)}
.claro,.arena-bg{
  --cota-color:var(--oro-texto);
  --bajada-color:var(--tinta-2);
}

/* Dato monoespaciado suelto */
.tec{
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.bajada{
  font-size:clamp(16px,1.55vw,20px);
  max-width:58ch;
  color:var(--bajada-color,var(--tinta-2));
}

.oro{color:var(--oro)}
.claro .oro,.arena-bg .oro{color:var(--oro-texto)}

/* ═══ PLACAS DE COLOR ════════════════════════════════════════════════════
   UN SOLO PAPEL CLARO. Antes .claro era #FAF8F3 y .arena-bg #F2EEE3: dos
   tonos separados por un 3 %, tan cerca que no se leían como una decisión
   sino como un descuido, y encima uno de ellos rompía la identidad oscura.
   Ahora las dos clases dan el mismo papel; se conservan los dos nombres
   porque están repartidos por el HTML y renombrarlos no aporta nada.
   El blanco cálido puro queda para tarjetas y fondos de foto.              */
.oscuro   {background:var(--verde-900);color:var(--blanco)}
.verde-bg {background:var(--verde);color:var(--blanco)}
.carbon   {background:var(--carbon);color:var(--blanco)}
.claro,
.arena-bg {background:var(--arena);color:var(--tinta)}

.oscuro h1,.oscuro h2,.oscuro h3,
.carbon h1,.carbon h2,.carbon h3,
.verde-bg h1,.verde-bg h2,.verde-bg h3{color:var(--blanco)}

/* Grano de papel técnico sobre los bloques claros */
.arena-bg,.claro{position:relative}
.arena-bg::after,.claro::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grano);
  opacity:.035;
  mix-blend-mode:multiply;
}
.arena-bg>*,.claro>*{position:relative;z-index:1}

/* ═══ PLACA DE TRANSICIÓN ════════════════════════════════════════════════
   Entre un bloque oscuro y uno claro había un corte seco. Esto no es un
   degradado —el encargo los prohíbe— sino una PLACA que se retira: una banda
   del color de la sección QUE SE VA, apoyada sobre el borde superior de la
   que llega, que se recoge hacia arriba al entrar en pantalla y deja un
   filete dorado detrás. Se lee como una lámina que se levanta.

   Va DENTRO de la sección que llega, nunca colgando sobre la anterior: si
   colgase, taparía lo que hubiera encima (el corredor, por ejemplo).

   Cuesta un IntersectionObserver por frontera y una sola transición de
   clip-path. Nada se repinta durante el scroll.                            */
/* Clase repetida a propósito (0,2,0). Más abajo, `.replanteo>*` y
   `.arena-bg>*` ponen position:relative a todos los hijos directos para
   levantarlos sobre la trama de fondo; con una sola clase esas reglas ganaban
   por orden y la placa dejaba de ser absoluta, se metía en el flujo y empujaba
   la sección entera 78 px hacia abajo. */
.placa,.placa.placa{
  position:absolute;top:0;left:0;right:0;z-index:2;
  height:clamp(40px,5.6vw,78px);
  pointer-events:none;
  overflow:hidden;
}
.placa__hoja{
  position:absolute;inset:0;
  background:var(--placa,var(--carbon));
  transform:translateY(0);
  transition:transform var(--v-muy-lento) var(--sal);
}
.placa__filete{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--oro-linea);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--v-lento) var(--sal) 260ms;
}
/* Sobre fondo oscuro el filete tiene que ser el oro claro */
.oscuro>.placa .placa__filete,
.carbon>.placa .placa__filete,
.verde-bg>.placa .placa__filete,
.sistema>.placa .placa__filete,
.proyectos>.placa .placa__filete,
.socios>.placa .placa__filete,
.cierre>.placa .placa__filete{background:var(--oro)}

.placa.trazada .placa__hoja{transform:translateY(-100%)}
.placa.trazada .placa__filete{transform:scaleX(1)}

/* Sin JavaScript la placa ya está retirada: nunca tapa nada. */
html:not(.js) .placa__hoja{transform:translateY(-100%)}
html:not(.js) .placa__filete{transform:scaleX(1)}

/* ═══ RETÍCULA ═══════════════════════════════════════════════════════════ */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--canal);
}

/* El número de columnas lo pone --cols, que cambia por breakpoint.
   minmax(0,1fr) y no 1fr: 1fr equivale a minmax(auto,1fr), y auto no baja de
   min-content, así que una palabra larga empuja la rejilla fuera del contenedor
   y aparece scroll horizontal. Es la trampa nº2 de DIRECCION-DE-ARTE §7. */
.rejilla{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--gutter) var(--e4);
}

section{padding-block:var(--section-space);position:relative}

/* Replanteo visible: las líneas de la retícula, muy tenues */
.replanteo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    currentColor 0 1px, transparent 1px calc(100%/12));
  background-size:calc(min(100% ,var(--max)) - var(--canal)*2) 100%;
  background-position:center;
  opacity:.055;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
}
.replanteo>*{position:relative;z-index:1}

/* ═══ UTILIDADES ═════════════════════════════════════════════════════════ */

/* Visible solo para lectores de pantalla */
.oculto-visual{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── ESCALA DE CAPAS DE TODO EL SITIO ──────────────────────────────────────
   Una sola escala, declarada en un sitio, para que se pueda razonar sobre
   ella. El orden importa y cada salto tiene un motivo:

     1200  .salto            enlace de salto: por encima de todo, siempre
     1100  .cabecera         por encima del menú A PROPÓSITO: el menú lleva
                             padding-top y así la X sigue siendo clicable
     1090  .menu             menú móvil a pantalla completa
     1000  .flota            botón flotante de WhatsApp
       40  .hilo             riel dorado lateral

   Lo que había antes era 300 / 82 / 81 / 80 / 79 / 40, y con esos números el
   flotante (82) y la barra de contacto (81) se pintaban POR ENCIMA del menú
   móvil abierto (79) en la franja de 768 a 1000 px.                        */

/* Enlace de salto */
.salto{
  position:absolute;left:-9999px;top:0;z-index:1200;
}
.salto:focus{
  left:var(--e3);top:var(--e3);
  display:inline-flex;align-items:center;min-height:var(--toque);
  background:var(--oro);color:var(--carbon);
  padding:var(--e3) var(--e5);
  font-family:var(--display);font-weight:800;font-size:var(--t-menor);
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  outline:3px solid var(--carbon);outline-offset:2px;
}

/* Filete: el único elemento decorativo. Tres usos y solo tres. */
.filete{height:2px;background:var(--oro-linea);border:0;margin:0}
.oscuro .filete,.carbon .filete,.verde-bg .filete{background:var(--oro)}

/* Marcador de contenido que todavía no existe. Se ve, a propósito.

   La clase va DUPLICADA en el selector a propósito. Un marcador puede caer
   dentro de un <dd> o un <dt> que ya tiene tipografía propia —por ejemplo
   `.transformacion__cifras dd`, que es (0,1,1)— y con un solo `.pendiente`
   (0,1,0) perdería: la palabra «Pendiente» se pintaría a 49px y reventaría la
   retícula. Con `.pendiente.pendiente` (0,2,0) gana siempre, sin recurrir a
   !important.                                                              */
.pendiente,
.pendiente.pendiente{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-2);
  border:1px dashed var(--gris-linea);
  padding:3px var(--e2);
  display:inline-block;
  background:transparent;
}
.oscuro .pendiente.pendiente,
.carbon .pendiente.pendiente,
.verde-bg .pendiente.pendiente,
.sistema .pendiente.pendiente,
.proyectos .pendiente.pendiente,
.transformacion .pendiente.pendiente,
.experiencias .pendiente.pendiente,
.socios .pendiente.pendiente,
.documentos .pendiente.pendiente,
.cierre .pendiente.pendiente,
.pie .pendiente.pendiente{
  color:var(--gris-claro);
  border-color:rgba(250,248,243,.34);
}