@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
COPENA CONSTRUCCIONES — 02 · ESTRUCTURA
Cabecera, navegación, menú móvil, hilo dorado, pie y contacto fijo.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ CABECERA ═══════════════════════════════════════════════════════════
Transparente sobre el hero; al hacer scroll pasa a carbón sólido, se
encoge y aparece el filete dorado. El cambio lo dispara un centinela con
IntersectionObserver, no un listener de scroll. */
.cabecera{
position:fixed;inset:0 0 auto 0;z-index:1100; /* escala en base.css */
background:transparent;
border-bottom:1px solid transparent;
transition:background var(--v-medio) var(--dentro),
border-color var(--v-medio) var(--dentro),
backdrop-filter var(--v-medio);
}
.cabecera__caja{
display:flex;align-items:center;justify-content:space-between;
gap:var(--e4);
height:var(--cabecera);
transition:height var(--v-medio) var(--dentro);
}
.cabecera.fijada{
background:var(--carbon);
border-bottom-color:var(--oro);
}
.cabecera.fijada .cabecera__caja{height:var(--cabecera-fija)}
@supports (backdrop-filter:blur(8px)){
.cabecera.fijada{background:rgba(21,22,19,.92);backdrop-filter:blur(10px)}
}
/* Centinela de 1px: mientras es visible, la cabecera está en reposo */
.centinela{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
/* ── Marca ── */
.marca{
display:flex;align-items:center;gap:var(--e3);
text-decoration:none;color:var(--blanco);flex:none;
min-height:var(--toque);
}
/* Logotipo oficial. Los atributos width/height del evitan el salto de
la cabecera mientras carga; height:auto (en base.css) conserva la
proporción aunque los números no cuadren, así que el logo NO se deforma. */
/* La cabecera mide 88 px en reposo y 66 al fijarse; el logotipo se queda unos
15 px por debajo para no tocar los bordes. Antes iba a 46 px sobre 72 y se
leía como una miniatura. */
.marca__logo{
height:clamp(38px,4.4vw,58px);width:auto;
display:block;
}
.cabecera.fijada .marca__logo{height:clamp(32px,3.5vw,44px)}
/* El isotipo NO se usa en la cabecera. Se comprobó que el logotipo horizontal
cabe hasta en 360 px: ocupa 126 px de los 248 disponibles junto al botón de
menú. Quitar el nombre de la empresa de la cabecera en móvil, que es donde
está la mayoría de las visitas, no compensaba ganar 60 px de hueco.
El archivo del isotipo se sigue usando como favicon. */
.marca__iso-img{display:none}
/* ── Navegación de escritorio ── */
.nav{display:none}
.nav__lista{display:flex;align-items:center;gap:var(--e6);list-style:none}
.nav__enlace{
font-family:var(--mono);
font-size:var(--t-micro);
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
text-decoration:none;
color:var(--blanco);
display:inline-flex;align-items:center;
min-height:var(--toque);
position:relative;
white-space:nowrap;
}
.nav__enlace::after{
content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
background:var(--oro);
transform:scaleX(0);transform-origin:left;
transition:transform var(--v-medio) var(--sal);
}
.nav__enlace:hover::after,
.nav__enlace[aria-current="true"]::after{transform:scaleX(1)}
.cabecera .btn{display:none;min-height:48px;padding-inline:var(--e5);font-size:14px}
/* ── Botón hamburguesa ── */
.hamburguesa{
width:var(--toque);height:var(--toque);flex:none;
display:grid;place-items:center;
background:transparent;border:1px solid var(--borde-osc);
cursor:pointer;padding:0;border-radius:2px;
}
.hamburguesa__barras{display:block;width:20px;height:12px;position:relative}
.hamburguesa__barras i{
position:absolute;left:0;right:0;height:2px;background:var(--oro);
transition:transform var(--v-medio) var(--sal),opacity var(--v-rapido);
}
.hamburguesa__barras i:nth-child(1){top:0}
.hamburguesa__barras i:nth-child(2){top:5px}
.hamburguesa__barras i:nth-child(3){top:10px}
.hamburguesa[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* ═══ MENÚ MÓVIL A PANTALLA COMPLETA ═════════════════════════════════════ */
.menu{
position:fixed;inset:0;z-index:1090; /* escala en base.css */
background:var(--carbon);
display:flex;flex-direction:column;
/* Abajo, sitio para el flotante y para el área segura del dispositivo */
padding:calc(var(--cabecera) + var(--e5)) var(--canal)
calc(var(--e8) + env(safe-area-inset-bottom));
overflow-y:auto;
overscroll-behavior:contain;
visibility:hidden;opacity:0;
transition:opacity var(--v-medio) var(--dentro),visibility 0s var(--v-medio);
}
.menu[data-abierto]{visibility:visible;opacity:1;transition-delay:0s}
.menu__lista{list-style:none;border-top:1px solid var(--borde-osc)}
.menu__lista li{border-bottom:1px solid var(--borde-osc)}
/* El cuerpo y el relleno bajaron al pasar de cinco entradas a nueve: con los
anteriores (44px y 24px de aire) la lista medía 1126 px en una pantalla de
844 y el botón de WhatsApp del pie quedaba por debajo del borde, que es el
sitio exacto donde no puede estar. Sigue siendo tipografía grande, y el
área táctil nunca baja de --toque. */
.menu__enlace{
display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
min-height:var(--toque);
padding:var(--e3) 0;
text-decoration:none;color:var(--blanco);
font-family:var(--display);font-weight:800;
font-size:clamp(21px,5.6vw,32px);line-height:1;
text-transform:uppercase;letter-spacing:var(--track-display);
}
.menu__enlace span{
font-family:var(--mono);font-size:var(--t-micro);font-weight:400;
letter-spacing:.16em;color:var(--oro);
}
.menu__pie{margin-top:auto;padding-top:var(--e6);display:grid;gap:var(--e3)}
.menu__pie .btn{width:100%}
.menu__dato{
margin:var(--e5) 0 0;
font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
text-transform:uppercase;color:var(--gris);
}
/* Bloqueo del fondo mientras el menú está abierto. La posición se conserva
desde JS; aquí solo se congela el documento. */
html.menu-abierto,html.menu-abierto body{overflow:hidden}
html.menu-abierto body{position:fixed;inset:0;width:100%}
/* ═══ HILO DORADO ════════════════════════════════════════════════════════
Cinco piezas alineadas que comparten la misma x y el mismo oro. La
continuidad es geométrica, no un único elemento. */
/* 1 · Riel maestro. Solo transform: ni height ni top, que disparan layout. */
.hilo{
position:fixed;left:16px;top:0;bottom:0;width:2px;z-index:40;
display:none;pointer-events:none;
}
.hilo__base{position:absolute;inset:0;background:rgba(201,162,39,.16)}
.hilo__viva{
position:absolute;inset:0;background:var(--oro);
transform:scaleY(0);transform-origin:top;
box-shadow:0 0 10px rgba(201,162,39,.5);
}
.hilo__punto{
position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4.5px;
background:var(--oro);
}
/* 3 · Tramo vertical dentro de una sección */
.tramo{
position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--oro-linea);
transform:scaleY(0);transform-origin:top;
transition:transform var(--v-muy-lento) var(--sal);
pointer-events:none;
}
.oscuro .tramo,.carbon .tramo,.verde-bg .tramo{background:var(--oro)}
.tramo.trazado{transform:scaleY(1)}
/* 2 y 5 · Tramos con quiebro, en SVG. El atributo d se recalcula solo al
redimensionar; el revelado es una transición de un disparo. */
/* El tramo con quiebro solo existe donde hay canal lateral para alojarlo.
Por debajo de 1200px cruzaria el contenido, asi que no se dibuja: se
conserva el significado y se tira el tejido conectivo que no cabe. */
/* La caja se declara AQUÍ, no desde JavaScript.
Un