/* Alu3 · Taller de aluminio (Sueca). Vista previa.

   Colores: los del logo que mandó Alfred (herramientas/limpiar-logo.py mide la mediana de sus píxeles): azul #013c74 (las letras ALU)
   y rojo #ca030d (el «3»), más blanco y neutros fríos. Contrastes calculados (WCAG): blanco sobre azul 11,8:1; azul sobre blanco 11,8:1;
   blanco sobre rojo 5,9:1 y rojo sobre blanco 5,9:1; texto #212934 sobre blanco 14:1; gris #556070 sobre blanco 6,4:1 y sobre #f2f5f8 5,8:1;
   #c9d8ea (azul claro de apoyo) sobre el azul 8,1:1. El rojo solo va en acentos pequeños y en el estado de «página actual».
   Tipografías: Bitter (titulares, caja normal) y Source Sans 3 (texto), autoalojadas (WOFF2, licencia SIL OFL 1.1).
   Enlaces: nunca subrayados, en ningún estado; se reconocen por el color y el peso 600. El foco de teclado lleva contorno. */

@font-face { font-family: "Bitter"; src: url("../fonts/bitter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("../fonts/bitter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Bitter 900 solo con las cifras (2 KB): los números 01 y 02 grandes de la portada. Solo la página de inicio la pide */
@font-face { font-family: "Bitter"; src: url("../fonts/bitter-900-cifras.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0020, U+002C, U+002E, U+0030-0039; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --azul: #013c74;
  --azul-claro: #c9d8ea;
  --rojo: #ca030d;
  --blanco: #ffffff;
  --oscuro: #212934;
  --gris: #556070;
  --linea: #d5dbe3;
  --suave: #f2f5f8;
  --ancho: 70rem;
  --margen: 1.25rem;
  --titulares: "Bitter", Georgia, "Times New Roman", serif;
  --texto: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--blanco); color: var(--oscuro); font: 400 1.0625rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* Enlaces: ni subrayado ni borde inferior en ningún estado */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none; }
a { color: var(--azul); font-weight: 600; }
a:hover { color: var(--oscuro); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--oscuro); outline-offset: 3px; }

h1, h2, h3 { color: var(--oscuro); font-family: var(--titulares); line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.375rem, 1.18rem + 0.9vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
p + p { margin-top: 1em; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono--relleno { fill: currentColor; stroke: none; }

.salto { position: absolute; left: var(--margen); top: -5rem; z-index: 20; padding: 0.75rem 1rem; border: 2px solid var(--azul); background: var(--blanco); color: var(--azul); }
.salto:focus { top: 0.5rem; }

/* ---------- Cabecera: la fila del logo, toda blanca; debajo, la banda azul con el menú ---------- */
/* Alfred (2026-11-08): «la línea del logo, fondo blanco completo». Antes el blanco era solo un bloque detrás del logo y el resto de la fila era azul. */
.cab { background: var(--blanco); overflow-x: clip; }
.cab__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--ancho); margin-inline: auto; padding: 0.75rem var(--margen); }
.cab__marca { display: flex; align-items: center; }
.cab__logo { display: block; }
.cab__logo img { width: 10.25rem; height: auto; }
.cab__contactos { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.cab__contactos li { display: flex; flex-direction: column; line-height: 1.25; }
.cab__contactos li:not(:first-child) { display: none; }
.cab__rotulo { display: none; color: var(--gris); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.cab__contactos a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 1.0625rem; white-space: nowrap; }
.cab__menu { background: var(--azul); color: var(--blanco); }
.cab__menu a { color: var(--blanco); }
.cab__menu a:hover { color: var(--azul-claro); }
.cab__menu a:focus-visible { outline-color: var(--blanco); }
/* El botón del menú (Alfred, 2026-11-08): en el móvil sube a la fila del logo, al lado del teléfono, y ya no hay barra azul debajo; el menú se abre al pulsarlo.
   Es un botón de 44 px con solo el icono (el nombre «Menú» / «Cerrar menú» lo leen los lectores de pantalla). El brief pedía una fila de ancho completo; manda la orden de Alfred. */
.cab__control { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: 0.6rem; padding: 0; border: 2px solid var(--azul); background: var(--blanco); color: var(--azul); cursor: pointer; }
.cab__control:hover { background: var(--azul); color: var(--blanco); }
.cab__control-texto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cab__control .icono { width: 1.5rem; height: 1.5rem; }
.cab__control .i-cerrar, .cab__control[aria-expanded="true"] .i-abrir { display: none; }
.cab__control[aria-expanded="true"] .i-cerrar { display: block; }
.cab__nav { display: none; }
.cab__nav.abierto { display: block; }
.cab__nav ul:first-child { border-top: 1px solid rgb(255 255 255 / 0.22); }
.cab__nav li + li { border-top: 1px solid rgb(255 255 255 / 0.22); }
.cab__nav ul:first-child a { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 var(--margen); font-size: 1.125rem; }
.cab__nav ul:first-child a:hover { background: rgb(255 255 255 / 0.1); color: var(--blanco); }
.cab__nav a[aria-current="page"] { background: var(--blanco); color: var(--azul); box-shadow: inset 0 3px 0 var(--rojo); }
.cab__nav a[aria-current="page"]:hover { background: var(--blanco); color: var(--azul); }
/* Los iconos de contacto y ubicación, solo con el menú abierto en el móvil */
.cab__iconos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; padding: 1.1rem var(--margen) 1.4rem; border-top: 1px solid rgb(255 255 255 / 0.22); }
.cab__iconos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 4rem; padding: 0.4rem 0.1rem; border: 2px solid rgb(255 255 255 / 0.5); font-size: 0.6875rem; line-height: 1.1; text-align: center; }
.cab__iconos a:hover { border-color: var(--blanco); background: rgb(255 255 255 / 0.1); color: var(--blanco); }
@media (scripting: none) {
  .cab__control { display: none; }
  .cab__nav { display: block; }
}
@media (max-width: 26.25rem) { .cab__logo img { width: 9.25rem; } }
@media (max-width: 23.75rem) {
  .cab__logo img { width: 8.75rem; }
  .cab__contactos a span { display: none; }
  .cab__contactos a { justify-content: center; min-width: 2.75rem; }
}
@media (min-width: 56.25rem) {
  .cab__fila { padding-block: 0.9rem; }
  .cab__logo img { width: 13.75rem; }
  .cab__contactos { gap: 2.25rem; }
  .cab__contactos li, .cab__contactos li:not(:first-child) { display: flex; }
  .cab__rotulo { display: block; }
  .cab__contactos a .icono { display: none; }
  .cab__contactos a { min-height: 0; }
  .cab__control, .cab__iconos { display: none; }
  .cab__nav, .cab__nav.abierto { display: block; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
  .cab__nav ul:first-child { display: flex; border-top: 0; }
  .cab__nav li + li { border-top: 0; }
  .cab__nav ul:first-child a { justify-content: flex-start; min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.0625rem; }
  /* En la banda azul, la página actual va con un fondo más claro y la raya roja arriba (si fuera blanca se juntaría con la fila blanca de encima) */
  .cab__nav a[aria-current="page"], .cab__nav a[aria-current="page"]:hover { background: rgb(255 255 255 / 0.16); color: var(--blanco); }
}

/* ---------- Botones: rectos, a todo el ancho en el móvil ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }
a.boton, button.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.7rem 1.6rem; border: 2px solid var(--azul); border-radius: 0; background: var(--azul); color: var(--blanco); font: 600 1.0625rem/1.2 var(--texto); text-align: center; }
button.boton { cursor: pointer; }
a.boton:hover, button.boton:hover { background: var(--blanco); color: var(--azul); }
a.boton--claro { background: var(--blanco); color: var(--azul); }
a.boton--claro:hover { background: var(--azul); color: var(--blanco); }
@media (max-width: 37.4375rem) {
  .acciones { flex-direction: column; }
  a.boton, button.boton { width: 100%; }
}

/* ---------- Piezas comunes ---------- */
.sobre { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; color: var(--gris); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; }
.sobre::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--rojo); }
.encabezado { padding-block: clamp(2.25rem, 5vw, 4rem) 1.75rem; }
.encabezado p:not(.sobre) { max-width: 42rem; margin-top: 1.1rem; font-size: 1.25rem; line-height: 1.5; }
.seccion { padding-block: clamp(2rem, 4vw, 3.5rem); }
.cierre { padding-block: 1.5rem clamp(3rem, 6vw, 5rem); }
.cierre__texto { margin-bottom: 1.25rem; font-size: 1.125rem; }
.flecha { white-space: nowrap; }
.foto { width: 100%; background: var(--suave); }
.pie-foto { margin-top: 0.75rem; color: var(--gris); font-size: 0.9375rem; line-height: 1.45; }

/* ---------- Portada: vídeo de fondo a todo el ancho ---------- */
/* Alfred (2026-11-08): la portada llevaba un pase de fotos con una capa de rejilla encima (como la de Terracota) y el texto de impacto; a las 17:3x pasó a llevar un VÍDEO de fondo en lugar de las fotos.
   El brief de Groky pedía el título fuera de la foto, sin capa y sin vídeos automáticos; la orden de Alfred manda. Se para con el botón, al salir de la pestaña y si el sistema pide menos movimiento. */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(31rem, 80svh, 46rem); overflow: hidden; background: var(--azul); color: var(--blanco); }
.hero__fondo { position: absolute; inset: 0; }
/* En escritorio solo se recorta por arriba y por abajo; en el móvil se queda con el operario de la izquierda (el del logo), que está en ese lado todo el bucle */
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 10% 45%; }
/* La capa: retícula fina de 28 px y, debajo, un degradado azul oscuro que se cierra hacia abajo, donde va el texto (la misma en la banda de más abajo) */
.hero__fondo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(180deg, rgb(1 36 76 / 0.64) 0%, rgb(1 36 76 / 0.6) 40%, rgb(1 26 56 / 0.9) 100%); }
.hero__texto { position: relative; padding-block: clamp(5rem, 12vw, 8.5rem) clamp(3rem, 5vw, 4.5rem); }
/* La etiqueta de la portada va en blanco: en azul claro no llegaba a 4,5:1 sobre la foto de la plataforma (4,5:1 en el 5 % más claro en escritorio y 3,9:1 en el móvil) */
.hero .sobre { color: var(--blanco); }
.hero h1 { max-width: 12em; color: var(--blanco); font-size: clamp(2.5rem, 1.1rem + 5.6vw, 5.25rem); line-height: 1.03; text-shadow: 0 2px 22px rgb(0 0 0 / 0.4); }
.hero__lema { margin-top: 1.25rem; color: var(--blanco); font: 700 clamp(1.25rem, 0.9rem + 1.6vw, 2.125rem) / 1.2 var(--titulares); text-shadow: 0 2px 16px rgb(0 0 0 / 0.4); }
.hero__entrada { max-width: 34rem; margin: 0.7rem 0 1.75rem; font-size: 1.25rem; line-height: 1.5; }
.hero a.boton { border-color: var(--blanco); background: var(--blanco); color: var(--azul); }
.hero a.boton:hover { background: transparent; color: var(--blanco); }
.hero a.boton--claro { background: transparent; color: var(--blanco); }
.hero a.boton--claro:hover { background: var(--blanco); color: var(--azul); }
.hero a:focus-visible, .hero button:focus-visible { outline-color: var(--blanco); }
/* El botón de pausa no se ve (lo pidió Alfred): queda en la página, fuera de la vista, y aparece al llegar a él con el teclado; con el foco dentro de la portada el pase se detiene (web.js) */
.hero__control { position: absolute; right: 0; bottom: 1rem; left: 0; display: flex; justify-content: flex-end; margin-inline: auto; pointer-events: none; }
.hero__pausa { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero__pausa:focus-visible { position: static; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; overflow: visible; clip-path: none; border: 2px solid var(--blanco); background: rgb(1 26 56 / 0.7); color: var(--blanco); cursor: pointer; pointer-events: auto; }
.hero__pausa .i-seguir, .hero__pausa[aria-pressed="true"] .i-pausa { display: none; }
.hero__pausa[aria-pressed="true"] .i-seguir { display: block; }
@media (max-width: 37.4375rem) {
  .hero { min-height: min(90svh, 46rem); }
  .hero__texto { padding-block: 4rem 3rem; }
  .hero h1 { font-size: 2.4rem; line-height: 1.07; }
}
.entradilla { max-width: 32rem; font-size: 1.25rem; line-height: 1.5; }
/* ---------- Banda con vídeo de fondo (Alfred, 2026-11-08): la rejilla del hero encima y un texto grande ---------- */
/* El vídeo (sin sonido) lo descarga web.js cuando la banda se acerca a la pantalla; con «menos movimiento» o con ahorro de datos se queda el póster. */
.banda { position: relative; display: flex; align-items: center; min-height: clamp(24rem, 62svh, 38rem); overflow: hidden; background: var(--azul); color: var(--blanco); }
.banda__fondo { position: absolute; inset: 0; }
.banda__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.banda__fondo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(180deg, rgb(1 36 76 / 0.62) 0%, rgb(1 36 76 / 0.66) 55%, rgb(1 26 56 / 0.86) 100%); }
.banda__texto { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem); }
.banda__lema { color: var(--blanco); font: 700 clamp(2.75rem, 1rem + 8.4vw, 7.25rem) / 0.98 var(--titulares); letter-spacing: -0.005em; text-transform: uppercase; text-shadow: 0 2px 26px rgb(0 0 0 / 0.45); }
.banda__lema span { display: block; }
.banda button:focus-visible { outline-color: var(--blanco); }
/* El botón de pausa no se ve (como el del pase de fotos): aparece al llegar a él con el teclado, y con el foco dentro de la banda el vídeo se detiene (web.js) */
.banda__control { position: absolute; right: 0; bottom: 1rem; left: 0; display: flex; justify-content: flex-end; margin-inline: auto; pointer-events: none; }
.banda__pausa { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.banda__pausa:focus-visible { position: static; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; overflow: visible; clip-path: none; border: 2px solid var(--blanco); background: rgb(1 26 56 / 0.7); color: var(--blanco); cursor: pointer; pointer-events: auto; }
.banda__pausa .i-seguir, .banda__pausa[aria-pressed="true"] .i-pausa { display: none; }
.banda__pausa[aria-pressed="true"] .i-seguir { display: block; }
.accesos { border-block: 1px solid var(--linea); background: var(--suave); }
.accesos__fila { display: grid; gap: 2.25rem; padding-block: 2.75rem; }
.accesos h2 { margin-bottom: 0.6rem; }
.accesos p { max-width: 30rem; margin-bottom: 0.9rem; }
@media (min-width: 64rem) { .accesos__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } }
/* Un 01 y un 02 grandes delante de «Soluciones» y «Trabajos» (Alfred, 2026-11-08): la cifra en Bitter 900, una barra vertical roja y después el contenido. Son decorativos (aria-hidden).
   Las cifras son tabulares (01 y 02 miden lo mismo y las dos barras quedan alineadas). Los dos accesos van uno encima de otro hasta 64 rem (en dos columnas más estrechas el texto se quedaba muy estrecho) y desde ahí, uno al lado del otro */
.acceso { display: flex; align-items: flex-start; gap: 1.25rem; }
.acceso__n { flex: none; color: var(--azul); font: 900 clamp(3.25rem, 1.6rem + 6vw, 6.5rem) / 0.82 var(--titulares); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.acceso__cuerpo { min-width: 0; padding-left: 1.25rem; border-left: 3px solid var(--rojo); }
.lugar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.5rem; padding-block: 2rem 2.5rem; }
.lugar p { margin: 0; }

/* ---------- Soluciones ---------- */
.grupos { display: grid; gap: 2.25rem 3.5rem; padding-block: 1rem 2.5rem; }
.grupo { padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.grupo h2 { margin-bottom: 0.9rem; color: var(--azul); }
.lista li { position: relative; padding-left: 1.35rem; }
.lista li + li { margin-top: 0.4rem; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; background: var(--rojo); }
@media (min-width: 43.75rem) { .grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* El primer grupo, a todo el ancho y con los dibujos de producto (Alfred pidió reutilizar los de ALSU el 2026-11-08; solo ventanas y persianas) */
.grupo--ancho { margin-bottom: 2.25rem; }
.lista--fila { display: grid; gap: 0.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.lista--fila li + li { margin-top: 0; }
.ilustraciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.75rem; }
.ilustracion { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.95; padding: 0.9rem; background: var(--suave); }
.ilustracion img { width: 100%; height: 100%; object-fit: scale-down; }
@media (min-width: 43.75rem) { .ilustraciones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
/* Los otros tres grupos: los dibujos que Alfred hizo para Alu3, en placas cuadradas, con el nombre de la solución debajo. Tres en una fila (el último grupo, dos) y, en el móvil, dos y el tercero a todo el ancho */
.fichas-dibujo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.9rem; margin-top: 1.1rem; }
.fichas-dibujo li:nth-child(3):last-child { grid-column: 1 / -1; }
.fichas-dibujo figure { margin: 0; }
.ficha-dibujo__placa { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 0.9rem; background: var(--suave); }
.ficha-dibujo__placa img { width: 100%; height: 100%; object-fit: scale-down; }
.ficha-dibujo figcaption { margin-top: 0.65rem; color: var(--oscuro); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 43.75rem) {
  .fichas-dibujo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.25rem; }
  .fichas-dibujo li:nth-child(3):last-child { grid-column: auto; }
}

/* ---------- Trabajos ---------- */
.obras { display: grid; gap: 2.5rem; padding-block: 1rem 2.5rem; }
.obra img { width: 100%; }
.obra .pie-foto { max-width: 36rem; }
@media (min-width: 56.25rem) { .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; } }

/* ---------- Contacto: en escritorio, dos columnas y dos filas (Alfred, 2026-11-08): datos | mapa y foto | formulario; en el móvil, una columna en ese orden ---------- */
.contacto { display: grid; gap: 3rem; padding-block: 1rem 4rem; }
.contacto h2 { margin-bottom: 1.1rem; }
.ficha { margin-bottom: 1.75rem; }
.ficha > div { padding-block: 0.95rem; border-top: 1px solid var(--linea); }
.ficha > div:last-child { border-bottom: 1px solid var(--linea); }
.ficha dt { margin-bottom: 0.2rem; color: var(--gris); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.ficha dd { font-size: 1.125rem; line-height: 1.45; }
.fachada { display: flex; flex-direction: column; }
.fachada img { width: 100%; }
/* La foto de la fachada llena la altura de su fila (la del formulario) sin pasar de 44 rem; se recorta por los lados y se queda con el rótulo y la puerta */
@media (min-width: 56.25rem) {
  .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: start; }
  .fachada { align-self: stretch; }
  .fachada img { flex: 1 1 auto; min-height: 20rem; max-height: 44rem; object-fit: cover; object-position: 40% 50%; }
}
/* ---------- Formulario de contacto (pedido por Alfred, 2026-11-08; el brief decía «sin formulario»): abajo a la derecha, con su título dentro del panel ---------- */
.formulario h2 { margin-bottom: 0.5rem; }
.formulario__intro { max-width: 26rem; margin-bottom: 1.5rem; font-size: 1.125rem; line-height: 1.5; }
.formulario { padding: clamp(1.25rem, 3vw, 2rem); border-top: 4px solid var(--azul); background: var(--suave); }
.campo { margin-bottom: 1.15rem; }
.campo label { display: block; margin-bottom: 0.4rem; font-weight: 600; line-height: 1.3; }
.campo__ayuda { color: var(--gris); font-weight: 400; }
.campo input, .campo select, .campo textarea { display: block; width: 100%; min-height: 3.25rem; padding: 0.65rem 0.8rem; border: 2px solid var(--gris); border-radius: 0; background: var(--blanco); color: var(--oscuro); font: inherit; }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--azul); outline: 3px solid var(--oscuro); outline-offset: 2px; }
.campos-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.1rem; }
.campo__nota { margin: -0.35rem 0 1.15rem; color: var(--gris); font-size: 0.9375rem; line-height: 1.45; }
.campo--trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.campo--casilla { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; margin-bottom: 1.5rem; }
.campo--casilla input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0.1rem 0 0; accent-color: var(--azul); }
.campo--casilla label { margin: 0; font-weight: 400; }
.plano { position: relative; max-width: 52rem; border: 1px solid var(--linea); background: var(--suave); }
.mapa { width: 100%; height: auto; }
.plano__rotulo { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--blanco); color: var(--oscuro); font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.plano__rotulo::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--rojo); }
.plano__credito { position: absolute; right: 0; bottom: 0; padding: 0.25rem 0.55rem; background: rgb(255 255 255 / 0.94); color: var(--oscuro); font-size: 0.8125rem; line-height: 1.3; }
.plano__credito a { font-weight: 600; }
.llegar .acciones { max-width: 52rem; margin-top: 1.25rem; }
/* Dibujo del plano (mapa.py): la calle del taller en rojo; el resto, neutros */
.mapa-fondo { fill: #eef1f5; }
.mapa-parque { fill: #dde4eb; }
.mapa-agua { fill: #c9d8ea; }
.mapa-acequia { fill: none; stroke: #b4c8de; stroke-width: 3; }
.mapa-via { fill: none; stroke: #8892a0; stroke-width: 3; stroke-dasharray: 9 6; }
.mapa-borde, .mapa-calle, .mapa-destino-borde, .mapa-destino { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mapa-borde { stroke: #bcc5cf; stroke-width: 7; }
.mapa-borde--camino { stroke-width: 4; }
.mapa-borde--colectora { stroke-width: 11; }
.mapa-borde--carretera { stroke-width: 14; }
.mapa-calle { stroke: var(--blanco); stroke-width: 5; }
.mapa-calle--camino { stroke: #f7f8fa; stroke-width: 2.5; }
.mapa-calle--colectora { stroke-width: 8.5; }
.mapa-calle--carretera { stroke-width: 11.5; }
.mapa-destino-borde { stroke: var(--blanco); stroke-width: 15; }
.mapa-destino { stroke: var(--rojo); stroke-width: 8; }
.mapa-rotulo { fill: #3d4756; font: 600 21px var(--texto); paint-order: stroke; stroke: #ffffff; stroke-width: 5px; stroke-linejoin: round; }
.mapa-rotulo--destino { fill: var(--rojo); font-weight: 700; font-size: 23px; }
.mapa-escala path, .mapa-norte path { fill: none; stroke: #3d4756; stroke-width: 2.2; }
.mapa-escala text, .mapa-norte text { fill: #3d4756; font: 600 17px var(--texto); paint-order: stroke; stroke: #eef1f5; stroke-width: 4px; }

/* ---------- Pie: franja blanca con el logo, como la cabecera, y debajo el azul con todo centrado (Alfred, 2026-11-08; sin foto de fondo) ---------- */
.pie { margin-top: auto; background: var(--azul); color: var(--blanco); font-size: 1rem; line-height: 1.55; text-align: center; }
.pie a { color: var(--blanco); }
.pie a:hover { color: var(--azul-claro); }
.pie a:focus-visible { outline-color: var(--blanco); }
.pie__marca { padding: 1.5rem var(--margen); border-top: 1px solid var(--linea); background: var(--blanco); }
.pie__logo { display: inline-block; }
.pie__marca a:focus-visible { outline-color: var(--oscuro); }
.pie__logo img { width: 13.75rem; height: auto; }
.pie__contenido { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-block: 2.25rem 2rem; }
.pie__contenido p { margin: 0; }
/* Contactos del pie (Alfred, 2026-11-08): un icono (teléfono, WhatsApp, correo) y el dato; las palabras «Taller», «WhatsApp» y «Correo» solo las lee el lector de pantalla */
.pie__contactos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 2.25rem; }
.pie__contactos a { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; }
.pie__contactos .icono { width: 1.375rem; height: 1.375rem; }
.pie a.pie__facebook { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--blanco); background: var(--blanco); color: var(--azul); }
.pie a.pie__facebook:hover { background: transparent; color: var(--blanco); }
.pie__facebook .icono { width: 1.5rem; height: 1.5rem; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem; }
.pie__nota { max-width: 40rem; color: var(--azul-claro); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 26.25rem) { .pie__logo img { width: 11.5rem; } }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ---------- Páginas legales (borrador) ---------- */
.borrador { margin-bottom: 2rem; padding: 0.9rem 1.1rem; border: 2px solid var(--rojo); border-left-width: 0.5rem; color: var(--oscuro); font-weight: 600; }
.legal { max-width: 46rem; padding-bottom: 4rem; }
.legal h2 { margin-top: 2.25rem; margin-bottom: 0.7rem; font-size: 1.375rem; }
.legal ul { margin: 0.7rem 0 0; padding-left: 1.25rem; list-style: square; }
.legal li + li { margin-top: 0.3rem; }
.legal li::marker { color: var(--rojo); }
.pendiente { color: var(--gris); }

/* ---------- 404 ---------- */
.perdido { padding-block: clamp(3rem, 8vw, 6rem) 4rem; }
.perdido .acciones { margin-top: 1.75rem; }
.gracias__urgente { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }