/* Dirección de diseño: lenguaje de obra (planos, cuaderno de obra, grúa). Ver SPEC §6.1. */
:root {
  /* Paleta (SPEC D-017): dos escalas derivadas del logo. Azul 500 = azul del logo
     (contenido/logo_omega.jpeg), azul 900 = marino; gris 500 = zinc, gris 100 = hormigón. */
  --azul-50: #eef5fa;
  --azul-100: #d5e5f1;
  --azul-200: #a9c8e0;
  --azul-300: #7fb3d9;
  --azul-400: #4c95c2;
  --azul-500: #2577a6;
  --azul-600: #1e6390;
  --azul-700: #1a4f77;
  --azul-800: #173d60;
  --azul-900: #13294b;
  --azul-950: #0c1a31;
  --gris-50: #f5f7f9;
  --gris-100: #eef0f2;
  --gris-200: #dde2e7;
  --gris-300: #c3cbd4;
  --gris-400: #a2adb9;
  --gris-500: #8a949f;
  --gris-600: #6b7683;
  --gris-700: #4d5868;
  --gris-800: #333e4d;
  --gris-900: #1b2638;

  --marino: var(--azul-900);
  --acero: var(--azul-500);
  --zinc: var(--gris-500);
  --hormigon: var(--gris-100);
  --blanco: #fff;
  /* Texto sobre franjas marino (Nosotros, Contacto, rótulos, pie) */
  --sobre-marino: var(--azul-100);
  --sobre-marino-suave: var(--azul-200);
  --icono-sobre-marino: var(--azul-300);
  --linea-sobre-marino: rgb(255 255 255 / .16);
  /* Texturas de fondo de las franjas (D-021): cuaderno cuadriculado y planos de arquitectura */
  --textura-plano: color-mix(in srgb, var(--azul-500) 8%, transparent);
  --textura-planta: color-mix(in srgb, var(--azul-500) 14%, transparent);
  --textura-fachada: color-mix(in srgb, var(--azul-300) 12%, transparent);
  --textura-foto: rgb(255 255 255 / .07);
  /* Obra animada del fondo (D-018) */
  --obra-opacidad: .26;
  --obra-estructura: var(--azul-400);
  --obra-losa: var(--azul-600);
  --obra-diagonal: var(--azul-200);
  --obra-grua: var(--azul-700);
  --obra-contrapeso: var(--gris-500);
  --obra-viga: var(--azul-500);
  --obra-lejos: var(--gris-300);
  --obra-suelo: var(--gris-400);
  --obra-casa: var(--gris-500);
  --obra-techo: var(--azul-500);
  /* Sombras de paneles y tarjetas, en tono marino */
  --sombra-panel: 0 18px 40px color-mix(in srgb, var(--azul-950) 28%, transparent), 0 3px 8px color-mix(in srgb, var(--azul-950) 14%, transparent);
  --sombra-tarjeta: 0 8px 22px color-mix(in srgb, var(--azul-900) 14%, transparent);
  /* Placa casi opaca detrás de textos que van sobre texturas o la obra animada */
  --placa: color-mix(in srgb, var(--fondo) 94%, transparent);
  --wa: #0f8a4b;
  --wa-oscuro: #0b6e3b;
  --error: #ffb4a8;

  /* Tema claro (por defecto). El tema oscuro redefine estas variables más abajo. */
  color-scheme: light dark;
  --fondo: #fff;
  --fondo-alt: var(--gris-100);    /* franja gris (Trabajos) */
  --fondo-azul: var(--azul-50);    /* franja azul pálido (Cobertura) */
  --tinta: var(--gris-900);
  --tinta-suave: var(--gris-700);
  --titulo-c: var(--azul-900);     /* títulos y textos de marca sobre fondo claro */
  --enlace: var(--azul-500);
  --linea: var(--gris-200);
  --placeholder: var(--gris-200);
  --icono-fondo: var(--azul-50);   /* recuadro de los íconos de servicios */
  --icono-fondo-2: var(--gris-100);
  --campo: #fff;
  --campo-texto: var(--gris-900);
  --campo-borde: transparent;
  --form-bg: var(--azul-800);
  --btn-sec: var(--azul-900);
  --btn-sec-hover: var(--azul-700);
  --pie-bg: var(--azul-950);
  /* Portada (D-020): panel del texto, plano de fachada que se dibuja y línea del corte diagonal */
  --portada-fondo: var(--azul-50);
  --portada-plano: var(--azul-100);
  --portada-corte: var(--azul-500);

  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, sans-serif;
  --ancho: 1120px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
}

img, svg { max-width: 100%; }
a { color: var(--enlace); }
p { margin: 0 0 1em; }
ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.02;
  color: var(--titulo-c);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.7rem, 7vw, 4.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
h3 { font-size: 1.55rem; font-weight: 600; line-height: 1.1; }

:focus-visible { outline: 3px solid var(--enlace); outline-offset: 3px; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--marino); color: var(--blanco); padding: 8px 14px;
}
.saltar:focus { top: 0; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }

.marca { display: flex; align-items: center; gap: 10px; color: var(--titulo-c); text-decoration: none; }
.marca picture { display: block; flex: none; }
.marca__simbolo { display: block; width: 62px; height: 54px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__texto strong { font-family: var(--titulo); font-size: 1.45rem; font-weight: 700; }
.marca__texto small { color: var(--tinta-suave); font-size: .78rem; }

.menu-boton {
  display: none; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 4px;
  background: none; color: var(--titulo-c); font: inherit; font-weight: 500; cursor: pointer;
}
.menu { display: flex; align-items: center; gap: 26px; }
.menu a:not(.boton) { color: var(--titulo-c); font-weight: 500; text-decoration: none; }
.menu a:not(.boton):hover { color: var(--enlace); }
.menu a[aria-current="page"] { color: var(--enlace); text-decoration: underline; text-underline-offset: 6px; }

/* Botones */
.boton {
  display: inline-block; padding: 14px 24px; border: 2px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.boton--chico { padding: 8px 16px; }
.boton--wa { background: var(--wa); color: var(--blanco); }
.boton--wa:hover { background: var(--wa-oscuro); }
.boton--borde { border-color: var(--titulo-c); color: var(--titulo-c); background: var(--fondo); }
.boton--borde:hover { background: var(--titulo-c); color: var(--fondo); }
.boton--blanco { background: var(--blanco); color: var(--marino); }
.boton--blanco:hover { background: var(--azul-50); }
.boton--marino { background: var(--btn-sec); color: var(--blanco); }
.boton--marino:hover { background: var(--btn-sec-hover); }

.enlace { font-weight: 600; text-underline-offset: 4px; }

/* Portada: foto de fondo a todo el ancho. El lado izquierdo de la imagen ya viene
   difuminado a crema, así que el texto va en marino sobre esa zona. */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 96px 0 0; color: var(--tinta); background: var(--portada-fondo);
  /* Corte diagonal entre el panel del texto y la foto (como el faldón de un techo).
     En celular el corte es horizontal y se mide desde abajo (--corte-der, --corte-izq). */
  --corte-arriba: 58%; --corte-abajo: 47%;
  --corte-der: 330px; --corte-izq: 250px;
}
/* Registradas para que el navegador pueda animar el corte (D-021) */
@property --corte-arriba { syntax: "<percentage>"; inherits: true; initial-value: 58%; }
@property --corte-abajo { syntax: "<percentage>"; inherits: true; initial-value: 47%; }
@property --corte-der { syntax: "<length>"; inherits: true; initial-value: 330px; }
@property --corte-izq { syntax: "<length>"; inherits: true; initial-value: 250px; }
/* La foto va en su propia capa, a la derecha, para acercarla lentamente sin mover el texto.
   Se agranda y se ancla a la derecha para que no asome el difuminado crema que trae la imagen. */
.portada::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 44%; right: 0; z-index: -3; transform-origin: 70% 60%;
  background: url("/img/fondo-portada.webp") right center / auto 118% no-repeat;
}
/* Panel del texto, cortado en diagonal */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--portada-fondo);
  clip-path: polygon(0 0, var(--corte-arriba) 0, var(--corte-abajo) 100%, 0 100%);
}
.portada__corte {
  position: absolute; inset: 0; z-index: -2; background: var(--portada-corte);
  clip-path: polygon(var(--corte-arriba) 0, calc(var(--corte-arriba) + 6px) 0, calc(var(--corte-abajo) + 6px) 100%, var(--corte-abajo) 100%);
}
/* Plano de fachada detrás del texto (D-020, D-022): se dibuja solo al cargar. Va en una lámina
   recortada con la misma diagonal del panel, así puede llenar el fondo sin pisar la foto. */
.portada__lamina {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: polygon(0 0, var(--corte-arriba) 0, var(--corte-abajo) 100%, 0 100%);
}
.portada__plano {
  position: absolute; left: max(-40px, calc(50% - 760px)); bottom: -6%; height: 112%; width: auto;
  fill: none; stroke: var(--portada-plano); stroke-width: 2; stroke-linejoin: round;
}
.portada__plano .p-ventanas, .portada__plano .p-cotas { stroke-width: 1.5; }
.portada__plano .p-ejes { stroke-width: 1; stroke-dasharray: 18 6 3 6; }
.portada .contenedor { padding-bottom: 120px; }
.portada__texto { max-width: 560px; }
.portada h1 { max-width: 15ch; font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
/* Las palabras del titular aparecen con un fundido suave, casi juntas (animación en "Transiciones") */
.portada h1 .palabra, .portada h1 .palabra > span { display: inline-block; }
.portada__bajada { color: var(--tinta-suave); font-size: 1.15rem; max-width: 44ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Atributos (D-019, D-020): cuatro bloques en la franja marino bajo la portada, con el ícono
   en un círculo azul que se mueve por turnos */
.atributos { position: relative; z-index: 2; background: var(--marino); color: var(--blanco); padding: 40px 0 48px; border-top: 3px solid var(--azul-500); }
.atributos__fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.atributos li {
  display: flex; align-items: center; gap: 14px; padding: 22px 20px;
  background: var(--azul-800); border-top: 3px solid var(--azul-400); border-radius: 8px;
  box-shadow: var(--sombra-panel); transition: transform .25s ease, background-color .25s ease;
}
.atributos li:hover, .animar .atributos li.revelado:hover { transform: translateY(-4px); background: var(--azul-700); }
.atributos svg {
  flex: none; width: 52px; height: 52px; padding: 12px; border-radius: 50%;
  background: var(--azul-500); fill: none; stroke: var(--blanco);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.atributos strong { display: block; font-family: var(--titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.atributos span { display: block; font-size: .92rem; line-height: 1.4; }

/* Secciones: franjas a todo el ancho que alternan blanco, marino, hormigón y foto */
.seccion { padding: 88px 0; border-top: 1px solid var(--linea); }
.seccion--hormigon { background: color-mix(in srgb, var(--fondo-alt) 84%, transparent); }
.seccion--foto { border-top-color: var(--linea-sobre-marino); }
.seccion--marino { background: var(--marino); color: var(--blanco); border-top: 1px solid var(--linea-sobre-marino); }
#cobertura { background: color-mix(in srgb, var(--fondo-azul) 84%, transparent); }
.seccion--marino h2, .seccion--marino h3 { color: var(--blanco); }
.seccion--foto {
  color: var(--blanco);
  background: linear-gradient(rgb(19 41 75 / .92), rgb(26 79 119 / .9)), url("/img/fondo-contacto-800.webp") center / cover;
}
.seccion--foto h2, .seccion--foto h3 { color: var(--blanco); }
.seccion--foto a:not(.boton) { color: var(--blanco); text-underline-offset: 3px; }
.seccion--foto .contacto__datos { text-align: center; }
.contacto__datos > p { color: var(--sobre-marino); margin-bottom: 24px; }
.cabeza-centro { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.cabeza-centro h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0;
  background: linear-gradient(90deg, var(--enlace) 0 64%, transparent 64% 72%, var(--azul-300) 72%); border-radius: 2px;
}
.cabeza-centro p { color: var(--tinta-suave); margin: 0; }

/* Servicios: lista 2×2, sin cajas */
.servicios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.servicio {
  display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start;
  padding: 24px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--placa); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: var(--sombra-tarjeta); transition: border-color .2s ease;
}
.servicio:hover { border-color: var(--azul-300); }
/* Título y bajada de Servicios sobre una placa, para que la cuadrícula y la grúa no los tapen */
.seccion:not(.seccion--marino, .seccion--foto) .cabeza-centro, .cobertura__texto {
  padding: 20px 28px 22px; border: 1px solid var(--linea); border-radius: 8px; max-width: max-content;
  background: var(--placa); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: var(--sombra-tarjeta);
}
.servicio svg {
  width: 60px; height: 60px; padding: 8px; border-radius: 6px; background: var(--icono-fondo);
  fill: none; stroke: var(--enlace);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.servicio p { color: var(--tinta-suave); margin: 0; max-width: 42ch; }
.servicio:nth-child(4n+2) svg, .servicio:nth-child(4n+3) svg { background: var(--icono-fondo-2); stroke: var(--azul-700); }

/* Fotos (espacio reservado mientras no haya imagen) */
.foto, .obra__foto {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--placeholder); color: var(--tinta-suave); font-weight: 500;
}
.foto img, .obra__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Grilla de obras (EXT-01): foto con rótulo marino encima */
.obras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.obras--resumen { grid-template-columns: repeat(3, 1fr); }
.obra[hidden] { display: none; }
.obra a { position: relative; display: block; color: var(--blanco); text-decoration: none; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-tarjeta); }
.obra a::after {
  content: ""; position: absolute; inset: 0; background: var(--marino); opacity: 0;
  transition: opacity .2s; pointer-events: none;
}
.obra a:hover::after, .obra a:focus-visible::after { opacity: .35; }
/* Pase de fotos de la tarjeta (principal.js agrega las imágenes desde data-fotos) */
.obra__foto { position: relative; }
.obra__foto img { transition: transform 1.6s cubic-bezier(.2, .6, .2, 1); }
.obra__foto .obra__pase {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease, transform 1.6s cubic-bezier(.2, .6, .2, 1);
}
.obra__foto .obra__pase.visible { opacity: 1; }
@media (hover: hover) {
  .obra.pasando .obra__foto img { transform: scale(1.06); }
}
.obra__rotulo {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; max-width: max-content;
  padding: 10px 16px; background: var(--azul-800); border-radius: 10px;
}
.obra__rotulo strong { font-family: var(--titulo); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.obra__rotulo small { color: var(--sobre-marino-suave); font-size: .85rem; }
.trabajos__pie { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; }

/* Texturas de fondo: ninguna franja va lisa. Las líneas son máscaras SVG (sitio/img/texturas/)
   pintadas con un color de la paleta, detrás del contenido. */
.seccion { position: relative; isolation: isolate; }
.seccion::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--textura-plano);
  -webkit-mask: url("/img/texturas/plano.svg") 0 0 / 120px 120px repeat;
  mask: url("/img/texturas/plano.svg") 0 0 / 120px 120px repeat;
}
/* Cobertura: una planta arquitectónica grande, como la fachada de Nosotros */
#cobertura::after {
  background: var(--textura-planta);
  -webkit-mask: url("/img/texturas/planta.svg") left -80px bottom -60px / auto 105% no-repeat;
  mask: url("/img/texturas/planta.svg") left -80px bottom -60px / auto 105% no-repeat;
}
.seccion--marino::after {
  background: var(--textura-fachada);
  -webkit-mask: url("/img/texturas/fachada.svg") right -40px bottom -20px / auto 118% no-repeat;
  mask: url("/img/texturas/fachada.svg") right -40px bottom -20px / auto 118% no-repeat;
}
.seccion--foto::after { background: var(--textura-foto); }

/* Sobre nosotros (texto de la carta de presentación) */
.nosotros { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.nosotros__texto p { color: var(--sobre-marino); max-width: 58ch; }
.nosotros__entrada { font-size: 1.2rem; color: var(--blanco) !important; }
.nosotros__lista { display: grid; gap: 10px; margin: 28px 0 32px; }
.nosotros__lista li { display: flex; gap: 10px; align-items: flex-start; }
.nosotros__lista svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--icono-sobre-marino);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.nosotros__foto { margin: 0; }
.nosotros__marco {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px;
  background: var(--azul-800); box-shadow: var(--sombra-panel);
}
.nosotros__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.nosotros__alterna { opacity: 0; }
/* Igual que la portada: zoom lento y constante; además las dos fotos se turnan con fundido */
@keyframes turno-equipo { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.animar .nosotros__marco img { animation: acercar-portada 14s ease-in-out infinite alternate; }
.animar .nosotros__marco .nosotros__alterna { animation: acercar-portada 14s ease-in-out infinite alternate, turno-equipo 14s ease-in-out infinite; }
.nosotros__foto figcaption { color: var(--sobre-marino-suave); font-size: .9rem; margin-top: 10px; }

/* Banner de páginas interiores */
.banner {
  background: linear-gradient(color-mix(in srgb, var(--azul-900) 90%, transparent), color-mix(in srgb, var(--azul-700) 82%, transparent)), var(--fondo, none) center / cover;
  background-color: var(--marino); color: var(--blanco); padding: 56px 0 0;
}
.banner .contenedor { padding-bottom: 56px; }
.banner h1 { color: var(--blanco); font-size: clamp(2.4rem, 6vw, 4rem); max-width: 22ch; margin: 0; }
.banner__bajada { color: var(--sobre-marino); font-size: 1.15rem; margin: 14px 0 0; }
.migas { color: var(--sobre-marino-suave); font-size: .92rem; margin-bottom: 14px; }
.migas a { color: var(--sobre-marino); text-underline-offset: 3px; }

/* Listado de proyectos */
.seccion--obras { padding: 48px 20px 80px; }
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.filtros[hidden] { display: none; }
.filtros button {
  padding: 10px 18px; border: 1px solid var(--linea); border-radius: 4px; background: var(--fondo);
  color: var(--titulo-c); font: inherit; font-weight: 500; cursor: pointer;
}
.filtros button:hover { border-color: var(--titulo-c); }
/* Al filtrar, las obras que quedan vuelven a aparecer con fundido, una tras otra */
.animar .obra.filtrada { animation: aparecer .6s cubic-bezier(.2, .65, .25, 1) both; animation-delay: calc(var(--n, 0) * .05s); }
.filtros button[aria-pressed="true"] { background: var(--azul-600); border-color: var(--azul-600); color: var(--blanco); }

/* Detalle de una obra */
.obra-detalle { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.obra-detalle__fotos { columns: 2; column-gap: 10px; }
.obra-detalle__fotos .foto { break-inside: avoid; margin-bottom: 10px; }
.ficha { position: sticky; top: 96px; }
.ficha dl { display: grid; gap: 12px; padding: 20px; margin-bottom: 28px; background: var(--fondo-alt); border-radius: 12px; box-shadow: var(--sombra-tarjeta); }
.ficha dt { color: var(--tinta-suave); font-size: .9rem; }
.ficha dd { color: var(--titulo-c); font-weight: 600; }
.ficha h2 { font-size: 1.9rem; }
.ficha p { color: var(--tinta-suave); margin-bottom: 24px; }
.ficha .red { margin-left: 10px; vertical-align: middle; }
.obra-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea);
}
.obra-nav a { color: var(--titulo-c); font-weight: 600; text-underline-offset: 4px; }

/* Banda de contacto de páginas interiores */
.banda-contacto { padding: 56px 0; }
.banda-contacto__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.banda-contacto h2 { margin-bottom: .2em; }
.banda-contacto p { color: var(--sobre-marino); margin: 0; }
.banda-contacto__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Cobertura: a la izquierda el nombre de la sección y las comunas, a la derecha el mapa */
.cobertura {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "texto mapa" "comunas mapa"; grid-template-rows: auto 1fr; gap: 24px 56px; align-items: start;
}
.cobertura__texto { grid-area: texto; max-width: max-content; }
.cobertura__texto p { color: var(--tinta-suave); max-width: 44ch; margin: 0; }
.comunas { grid-area: comunas; display: flex; flex-wrap: wrap; gap: 8px; }
.comunas button {
  padding: 8px 14px; border: 1px solid var(--linea); border-radius: 4px; background: var(--fondo);
  color: var(--titulo-c); font: inherit; font-weight: 500; cursor: pointer;
}
.comunas button:hover { border-color: var(--enlace); color: var(--enlace); background: var(--icono-fondo); }
#cobertura .comunas button:not(:hover) { background: var(--fondo); }
.mapa {
  grid-area: mapa; position: relative; z-index: 0; height: 480px;
  border-radius: 6px; overflow: hidden; background: var(--fondo-alt); box-shadow: var(--sombra-tarjeta);
}
.mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.mapa--error { display: grid; place-items: center; padding: 24px; color: var(--tinta-suave); text-align: center; }
/* Sin el recuadro de foco que Chrome dibuja al tocar un polígono o el punto */
.mapa .leaflet-interactive:focus, .mapa path:focus, .mapa svg:focus { outline: none; }
.mapa__toast {
  position: absolute; left: 50%; bottom: 36px; z-index: 1000; transform: translate(-50%, 12px);
  display: grid; gap: 2px; justify-items: center; text-align: center; max-width: calc(100% - 32px);
  padding: 10px 22px; border-radius: 22px; background: var(--azul-800); color: var(--blanco);
  box-shadow: 0 6px 18px rgb(0 0 0 / .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.mapa__toast.visible { opacity: 1; transform: translate(-50%, 0); }
.mapa__toast.con-enlaces { pointer-events: auto; }
.mapa__toast strong { font-family: var(--titulo); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.mapa__toast span { color: var(--sobre-marino-suave); font-size: .85rem; }
.mapa__toast ul { display: grid; gap: 2px; margin-top: 2px; }
.mapa .mapa__toast a { color: var(--blanco); font-weight: 500; text-underline-offset: 3px; }
.mapa .mapa__toast a:hover { color: var(--azul-200); }

/* Redes: solo el logo */
.red {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / .45); color: var(--blanco);
}
.red:hover { background: rgb(255 255 255 / .1); }
.red svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.red .relleno { fill: currentColor; stroke: none; }
.red--claro { border-color: var(--linea); color: var(--titulo-c); }
.red--claro:hover { border-color: var(--enlace); color: var(--enlace); background: none; }
.redes { display: flex; gap: 12px; margin-top: 28px; }

/* Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; gap: 36px; }
.contacto__datos > p { color: var(--sobre-marino); margin-bottom: 24px; }
.contacto__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.datos { display: grid; gap: 16px; margin-top: 32px; }
.datos dt { color: var(--sobre-marino-suave); font-size: .9rem; }
.datos dd { overflow-wrap: anywhere; }
.seccion--marino a:not(.boton) { color: var(--blanco); text-underline-offset: 3px; }

.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px; background: var(--form-bg); border-radius: 6px; box-shadow: var(--sombra-panel); min-width: 0; }
.formulario h3 { margin-bottom: 4px; }
.formulario label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-weight: 500; }
.formulario input:not(.trampa), .formulario textarea {
  width: 100%; padding: 12px; border: 2px solid var(--campo-borde); border-radius: 4px;
  background: var(--campo); color: var(--campo-texto); font: inherit;
  -webkit-appearance: none; appearance: none;
}
/* El mensaje solo se estira hacia abajo y con tope, para que no se salga del panel */
.formulario textarea { resize: vertical; min-height: 120px; max-height: 320px; max-width: 100%; }
.formulario input[aria-invalid="true"], .formulario textarea[aria-invalid="true"] { border-color: var(--error); }
.formulario button[type="submit"] { background: var(--azul-500); color: var(--blanco); }
.formulario button[type="submit"]:hover { background: var(--azul-400); }
.formulario__estado { margin: 0; min-height: 1.5em; font-weight: 500; }
.trampa { position: absolute; left: -9999px; }

/* Al imprimir se ve todo, aunque no se haya hecho scroll */
@media print {
  .animar .revelar { opacity: 1; transform: none; }
}

/* Pie */
.pie { padding: 22px 0; background: var(--pie-bg); color: var(--sobre-marino-suave); font-size: .92rem; border-top: 3px solid var(--azul-700); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.pie .red { width: 38px; height: 38px; border-color: rgb(255 255 255 / .3); }
.pie p { margin: 0; }
.pie__correo { color: var(--sobre-marino); text-underline-offset: 3px; }
.pie__correo:hover { color: var(--blanco); }

/* WhatsApp flotante */
.flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--wa); box-shadow: 0 4px 14px rgb(0 0 0 / .28);
}
.flotante:hover { background: var(--wa-oscuro); }
.flotante svg { width: 32px; height: 32px; fill: var(--blanco); }

/* Obra animada (D-018): SVG al pie de la franja Servicios que arma principal.js, quieto
   en su lugar (no sigue al scroll) y detrás del contenido */
.obra-fondo {
  position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: auto; max-height: 75%;
  pointer-events: none; opacity: var(--obra-opacidad);
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.obra-fondo .o-suelo { stroke: var(--obra-suelo); stroke-width: 2; }
.obra-fondo .o-lejos { stroke: var(--obra-lejos); stroke-width: 1.2; }
.obra-fondo .o-casa { stroke: var(--obra-casa); stroke-width: 1.5; }
.obra-fondo .o-andamio { stroke: var(--obra-lejos); }
.obra-fondo .o-techo { stroke: var(--obra-techo); stroke-width: 3; stroke-dasharray: 1; }
.obra-fondo .o-piso path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--f, 0)); transition: stroke-dashoffset .35s linear; }
.obra-fondo .o-columna { stroke: var(--obra-estructura); stroke-width: 2.5; }
.obra-fondo .o-losa { stroke: var(--obra-losa); stroke-width: 4; }
.obra-fondo .o-diagonal { stroke: var(--obra-diagonal); stroke-width: 1.5; }
.obra-fondo .o-grua, .obra-fondo .o-carro { stroke: var(--obra-grua); stroke-width: 1.5; }
.obra-fondo .o-contrapeso { fill: var(--obra-contrapeso); stroke: none; }
.obra-fondo .o-viga { fill: var(--obra-viga); stroke: none; }
.obra-fondo .o-carga path { fill: var(--obra-grua); }

/* Movimiento propio: el carro recorre la pluma, el gancho sube y baja la viga, el techo
   de la casa se traza una y otra vez */
@keyframes o-carro { from { transform: translateX(0); } to { transform: translateX(300px); } }
@keyframes o-cable { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes o-carga { from { transform: translateY(-144px); } to { transform: translateY(0); } }
@keyframes o-techo { 0%, 10% { stroke-dashoffset: 1; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.obra-fondo .o-cable { transform-box: fill-box; transform-origin: top; }
.animar .obra-fondo .o-carro { animation: o-carro 16s ease-in-out infinite alternate; }
.animar .obra-fondo .o-cable { animation: o-cable 6s ease-in-out infinite alternate; }
.animar .obra-fondo .o-carga { animation: o-carga 6s ease-in-out infinite alternate; }
.animar .obra-fondo .o-techo { animation: o-techo 7s ease-in-out infinite; }

/* Cabecera compacta al bajar */
.cabecera__fila, .marca__simbolo { transition: min-height .25s ease, width .25s ease, height .25s ease; }
.cabecera.compacta .cabecera__fila { min-height: 52px; }
.cabecera.compacta .marca__simbolo { width: 46px; height: 40px; }
.cabecera.compacta { box-shadow: 0 6px 18px color-mix(in srgb, var(--azul-900) 8%, transparent); }

/* Respuesta al cursor: el subrayado del menú crece, botones y tarjetas se levantan */
.menu a:not(.boton) { position: relative; }
.menu a:not(.boton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--azul-300);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.menu a:not(.boton):hover::after { transform: scaleX(1); }
.menu a.activo:not(.boton)::after { transform: scaleX(0); }
.boton { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.boton:hover { transform: translateY(-2px); }
.obra a { transition: transform .25s ease, box-shadow .25s ease; }
.obra a:hover, .obra a:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--azul-900) 22%, transparent); }
.comunas button, .filtros button { transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.comunas button:hover, .filtros button:hover { transform: translateY(-2px); }

/* Transiciones entre secciones (SPEC D-017). Solo con la clase .animar, que pone un
   script en <head> cuando el sistema no pide movimiento reducido. */
.menu { position: relative; }
.menu__indicador {
  position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; border-radius: 1px;
  background: var(--enlace); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.menu a.activo:not(.boton) { color: var(--enlace); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Portada y banner: secuencia de entrada al cargar (CSS puro, no depende de principal.js) */
@keyframes subir-palabra { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.animar .portada h1 .palabra > span {
  animation: subir-palabra 1.1s cubic-bezier(.2, .6, .2, 1) both; animation-delay: calc(var(--i) * .05s + .1s);
}
.animar .portada__plano path[pathLength] { stroke-dasharray: 1; animation: dibujar 2.4s cubic-bezier(.5, 0, .3, 1) both; }
.animar .portada__plano .p-ventanas { animation-delay: 1s; }
.animar .portada__plano .p-cotas { animation-delay: 2s; }
.animar .portada__plano .p-ejes { animation: aparecer 1s ease 3s both; }
/* Al salir la portada de la pantalla, principal.js pone .reiniciar: las animaciones de entrada
   quedan detenidas y al volver a subir se repiten desde el principio */
.animar .portada.reiniciar, .animar .portada.reiniciar h1 .palabra > span,
.animar .portada.reiniciar .portada__texto > *, .animar .portada.reiniciar .portada__plano path { animation: none; }
/* Mientras tanto queda en su punto de partida, para que al volver no se vea un salto */
.animar .portada.reiniciar { --corte-arriba: 100%; --corte-abajo: 100%; --corte-der: 0px; --corte-izq: 0px; }
.animar .portada.reiniciar h1 .palabra > span, .animar .portada.reiniciar .portada__texto > :not(h1),
.animar .portada.reiniciar .portada__plano .p-ejes { opacity: 0; }
.animar .portada.reiniciar .portada__plano path[pathLength] { stroke-dashoffset: 1; }
.animar .portada__texto > :not(h1), .animar .banner .contenedor > * {
  animation: aparecer .8s cubic-bezier(.2, .65, .25, 1) both;
}
.animar .banner .contenedor > :nth-child(2) { animation-delay: .12s; }
.animar .banner .contenedor > :nth-child(3) { animation-delay: .24s; }
.animar .portada__texto > :nth-child(2) { animation-delay: .45s; }
.animar .portada__texto > :nth-child(3) { animation-delay: .6s; }

/* Íconos de los atributos: cada uno con su gesto (hoja de calendario, equipo que asiente,
   ubicación que cae, mensaje que vibra), por turnos cada 8 s; al pasar el cursor se repite */
@keyframes i-hoja { 0%, 16%, 100% { transform: none; } 4% { transform: translateY(-4px) rotate(-10deg); } 9% { transform: translateY(1px) rotate(4deg); } }
@keyframes i-equipo { 0%, 16%, 100% { transform: none; } 5% { transform: scale(1.14); } 10% { transform: scale(.96); } }
@keyframes i-pin { 0%, 16%, 100% { transform: none; } 5% { transform: translateY(-9px); } 10% { transform: translateY(0) scaleY(.9); } 13% { transform: translateY(-2px); } }
@keyframes i-mensaje { 0%, 16%, 100% { transform: none; } 3%, 9% { transform: rotate(-12deg); } 6%, 12% { transform: rotate(12deg); } }
.animar .atributos svg { animation: 8s ease-in-out infinite; }
.animar .atributos li:nth-child(1) svg { animation-name: i-hoja; }
.animar .atributos li:nth-child(2) svg { animation-name: i-equipo; animation-delay: 2s; }
.animar .atributos li:nth-child(3) svg { animation-name: i-pin; animation-delay: 4s; }
.animar .atributos li:nth-child(4) svg { animation-name: i-mensaje; animation-delay: 6s; }
.animar .atributos li:hover svg { animation-duration: 2.4s; animation-delay: 0s; }

/* Franjas: el contenido aparece con fundido al entrar en pantalla (principal.js pone .revelar) */
.animar .revelar {
  opacity: 0; transform: translateY(24px);
  transition: opacity .75s cubic-bezier(.2, .65, .25, 1), transform .75s cubic-bezier(.2, .65, .25, 1);
  transition-delay: var(--retardo, 0s);
}
.animar .revelar.arriba { transform: translateY(-24px); }
.animar .revelar.revelado { opacity: 1; transform: none; }

/* Portada: la diagonal se abre al cargar, como una cortina que descubre la foto, y después
   oscila lento sin parar */
@keyframes corte-entrada { from { --corte-arriba: 100%; --corte-abajo: 100%; } }
@keyframes corte-vaiven { from { --corte-arriba: 58%; --corte-abajo: 47%; } to { --corte-arriba: 54%; --corte-abajo: 50%; } }
@keyframes corte-entrada-celular { from { --corte-der: 0px; --corte-izq: 0px; } }
@keyframes corte-vaiven-celular { from { --corte-der: 330px; --corte-izq: 250px; } to { --corte-der: 280px; --corte-izq: 300px; } }
.animar .portada { animation: corte-entrada 1.4s cubic-bezier(.65, 0, .25, 1) .15s both, corte-vaiven 7s ease-in-out 1.55s infinite alternate; }
@media (max-width: 860px) {
  .animar .portada { animation: corte-entrada-celular 1.4s cubic-bezier(.65, 0, .25, 1) .15s both, corte-vaiven-celular 7s ease-in-out 1.55s infinite alternate; }
}

/* Portada: la foto se acerca y se aleja lentamente, sin parar */
@keyframes acercar-portada {
  from { transform: scale(1); }
  to { transform: scale(1.12) translateX(-1.5%); }
}
.animar .portada::before { animation: acercar-portada 24s ease-in-out infinite alternate; will-change: transform; }

/* La línea de división de cada franja y la raya bajo los títulos se dibujan al aparecer */
.animar .seccion.con-linea { position: relative; border-top-color: transparent; }
.animar .seccion.con-linea::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--linea); transform: scaleX(0); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1);
}
.animar .seccion--marino.con-linea::before, .animar .seccion--foto.con-linea::before { background: var(--linea-sobre-marino); }
.animar .seccion.con-linea.en-vista::before { transform: scaleX(1); }
.animar .cabeza-centro h2::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .7, .2, 1) .35s; }
.animar .cabeza-centro.revelado h2::after { transform: scaleX(1); }

/* Cambio de página (portada ↔ proyectos): fundido cruzado donde el navegador lo soporta */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

/* Tablet y celular */
@media (max-width: 860px) {
  /* En celular la foto queda como franja al pie de la portada, encuadrada en los dos trabajadores,
     y el corte diagonal va arriba de la franja */
  .portada { padding-top: 40px; }
  .portada::before {
    top: auto; left: 0; height: 400px; transform-origin: 80% 100%;
    background: url("/img/fondo-portada-1000.webp") right bottom / auto 100% no-repeat;
  }
  .portada::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-der)), 0 calc(100% - var(--corte-izq))); }
  .portada__corte { clip-path: polygon(0 calc(100% - var(--corte-izq)), 100% calc(100% - var(--corte-der)), 100% calc(100% - var(--corte-der) + 6px), 0 calc(100% - var(--corte-izq) + 6px)); }
  .portada__lamina { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-der)), 0 calc(100% - var(--corte-izq))); }
  .portada__plano { left: -10%; bottom: auto; top: 0; width: 120%; height: auto; opacity: .8; }
  .portada .contenedor { padding-bottom: 290px; }
  .atributos__fila { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .atributos__fila { gap: 12px; }
  .atributos li { padding: 16px 14px; }
  .seccion { padding: 64px 0; }
  .cabeza-centro { margin-bottom: 32px; }
  .servicios { grid-template-columns: 1fr; gap: 14px; }
  .servicio { padding: 18px; grid-template-columns: 52px 1fr; gap: 14px; }
  .servicio svg { width: 52px; height: 52px; }
  .seccion:not(.seccion--marino, .seccion--foto) .cabeza-centro, .cobertura__texto { padding: 16px 18px; }
  .nosotros { grid-template-columns: 1fr; gap: 36px; }
  .obras { grid-template-columns: repeat(2, 1fr); }
  .obras--resumen { grid-template-columns: 1fr; }
  .obra-detalle { grid-template-columns: 1fr; gap: 32px; }
  .ficha { position: static; order: -1; }
  .banner, .banner .contenedor { padding-top: 36px; padding-bottom: 40px; }
  .banner { padding-bottom: 0; }
  .contacto { grid-template-columns: 1fr; gap: 28px; }
  .cobertura { grid-template-columns: 1fr; grid-template-areas: "texto" "mapa" "comunas"; gap: 20px; }
  .mapa { height: 380px; }
  .formulario { padding: 22px; }

  .menu-boton { display: block; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 16px; background: var(--fondo); border-bottom: 1px solid var(--linea);
  }
  .menu.abierto { display: flex; }
  .menu a:not(.boton) { padding: 12px 4px; border-bottom: 1px solid var(--linea); }
  .menu .boton { margin-top: 12px; }
  .menu__indicador { display: none; }
  .menu a:not(.boton)::after { display: none; }
}

@media (max-width: 560px) {
  .atributos__fila { grid-template-columns: 1fr; }

  .obras { grid-template-columns: 1fr; }
  .obra-detalle__fotos { columns: 1; }
}

@media (max-width: 420px) {
  .portada__acciones .boton { flex: 1 1 100%; }
}

/* Pantallas táctiles: zonas de toque de al menos 44 px (guía de Apple) / 48 dp (Android) */
@media (pointer: coarse) {
  .mapa .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
  .pie .red { width: 44px; height: 44px; }
  .pie__correo, .obra-nav a, .mapa .mapa__toast a { display: inline-block; padding: 12px 2px; }
  .migas a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
  .mapa .mapa__toast ul { gap: 0; }
  .comunas button, .filtros button { min-height: 44px; }
  .boton--chico, .menu-boton { min-height: 44px; }
}

/* Tema oscuro: sigue el modo del sistema (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1524;
    --fondo-alt: #111d31;
    --fondo-azul: #0f1f38;
    --tinta: #e3eaf3;
    --tinta-suave: var(--gris-400);
    --titulo-c: #eef3fa;
    --enlace: #7bbbe6;
    --linea: #25364f;
    --placeholder: #1a2a44;
    --icono-fondo: rgb(37 119 166 / .18);
    --icono-fondo-2: rgb(138 148 159 / .16);
    --campo: #0c1524;
    --campo-texto: #e3eaf3;
    --campo-borde: #2c4366;
    --form-bg: var(--azul-800);
    --btn-sec: var(--azul-500);
    --btn-sec-hover: var(--azul-400);
    --pie-bg: #060b14;
    --obra-opacidad: .3;
    --textura-plano: color-mix(in srgb, var(--azul-300) 7%, transparent);
    --textura-planta: color-mix(in srgb, var(--azul-300) 10%, transparent);
    --textura-fachada: color-mix(in srgb, var(--azul-300) 12%, transparent);
    --obra-losa: var(--azul-300);
    --obra-diagonal: var(--azul-700);
    --obra-grua: var(--azul-300);
    --obra-contrapeso: var(--gris-600);
    --obra-viga: var(--azul-200);
    --obra-lejos: var(--gris-700);
    --obra-suelo: var(--gris-600);
    --obra-casa: var(--gris-500);
    --sombra-panel: 0 18px 40px rgb(0 0 0 / .45), 0 3px 8px rgb(0 0 0 / .3);
    --sombra-tarjeta: 0 8px 22px rgb(0 0 0 / .35);
    --placa: color-mix(in srgb, var(--fondo-alt) 94%, transparent);
    --portada-fondo: #0c1524;
    --portada-plano: var(--azul-900);
  }
  /* Mapa: teselas claras de OpenStreetMap invertidas y controles oscuros */
  .mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(.85) contrast(.92); }
  .mapa .leaflet-bar a { background: var(--placeholder); color: var(--tinta); border-bottom-color: var(--campo-borde); }
  .mapa .leaflet-bar a.leaflet-disabled { background: var(--fondo-alt); color: var(--gris-600); }
  .mapa .leaflet-control-attribution { background: rgb(12 21 36 / .78); color: var(--tinta-suave); }
  .mapa .leaflet-control-attribution a { color: var(--enlace); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .obra__foto img, .obra__foto .obra__pase { transition: none; }
  .boton:hover, .obra a:hover, .obra a:focus-visible, .comunas button:hover, .filtros button:hover { transform: none; }
  .menu__indicador { transition: none; }
}