/* ALSU — Aluminios Sueca S.L. (Sueca) · brief v1 de Groky, 2026-11-08
   Paleta de su marca (regla fija de Alfred). El ROJO es el del logo plano que mandó Alfred el 2026-11-08: #B80101 (mediana de unos 126.000
   píxeles). El logo metalizado de su web actual y su CSS usan #9D292B: si la empresa prefiere ese, se cambia --rojo y nada más. Gris
   #686866 y oscuro #292B36 (texto y estructura), del logo y del CSS de su web; blanco, y #F3F3F3 como superficie. Los neutros de las
   líneas finas (#D4D4D4) y del plano son grises sin matiz. No hay otro color de marca ni degradados.
   Contraste (calculado): blanco sobre rojo 6,9:1; rojo sobre blanco 6,9:1 y sobre #F3F3F3 6,2:1; oscuro sobre blanco 14,1:1 y sobre #F3F3F3 12,7:1; gris sobre blanco 5,6:1 y sobre #F3F3F3 5,0:1. Todo pasa AA para texto normal.
   Letras: Saira Semi Condensed (titulares) y Hind (texto), autoalojadas (OFL, contenido/fuentes).
   Reglas de Alfred: enlaces sin subrayado en ningún estado; en el móvil, botones y fotos sueltas a todo el ancho.
   Recurso gráfico: los «perfiles», líneas horizontales de aluminio (gris con una ranura clara y un arranque rojo). */

@font-face {
  font-family: "Hind";
  src: url("../fonts/hind-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hind";
  src: url("../fonts/hind-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira Semi Condensed";
  src: url("../fonts/saira-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira Semi Condensed";
  src: url("../fonts/saira-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saira Semi Condensed";
  src: url("../fonts/saira-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --rojo: #b80101;
  --gris: #686866;
  --oscuro: #292b36;
  --superficie: #f3f3f3;
  --blanco: #ffffff;
  --linea: #d4d4d4;
  --titulares: "Saira Semi Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --letra: "Hind", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho: 1240px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --seccion: clamp(3.5rem, 8vw, 7rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--oscuro);
  font: 400 1.0625rem/1.65 var(--letra);
}

img,
svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--titulares);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.1rem, 4.8vw, 3.75rem);
  letter-spacing: 0.005em;
}

p {
  margin: 0;
}

/* Enlaces: nunca subrayados (regla de Alfred), en ningún estado. Se distinguen por el color rojo y el peso; en la cabecera, el pie y
   los botones, por su sitio y su forma. El foco, con un contorno oscuro */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

a,
a:link,
a:visited {
  color: var(--rojo);
  font-weight: 600;
}

a:hover {
  color: var(--oscuro);
}

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--blanco);
  border: 2px solid var(--oscuro);
}

.saltar:focus {
  top: 1rem;
}

section[id] {
  scroll-margin-top: 1rem;
}

/* Los teléfonos no se parten entre líneas */
a[href^="tel:"] {
  white-space: nowrap;
}

/* ---------- El perfil: línea horizontal de aluminio (gris, con una ranura clara y un arranque rojo) ---------- */
.perfil {
  position: relative;
  height: 12px;
  background: var(--gris);
}

.perfil::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(3.5rem, 11vw, 9rem);
  background: var(--rojo);
}

.perfil::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--blanco);
}

.perfil--fino {
  height: 6px;
}

.perfil--fino::after {
  top: 2px;
  height: 1px;
}

.perfil--grueso {
  height: 20px;
}

.perfil--grueso::after {
  top: 9px;
  height: 2px;
}

.perfil--cabecera {
  height: 8px;
}

.perfil--cabecera::after {
  top: 3px;
  height: 2px;
}

/* ---------- Botones: rojo con texto blanco, o blanco con borde oscuro; esquinas rectas ---------- */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.boton,
.boton:link,
.boton:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.75rem 1.6rem;
  border: 2px solid var(--rojo);
  background: var(--rojo);
  color: var(--blanco);
  font: 700 1.1rem/1.2 var(--titulares);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.boton:hover {
  border-color: var(--oscuro);
  background: var(--oscuro);
  color: var(--blanco);
}

.boton--linea,
.boton--linea:link,
.boton--linea:visited {
  border-color: var(--oscuro);
  background: var(--blanco);
  color: var(--oscuro);
}

.boton--linea:hover {
  border-color: var(--oscuro);
  background: var(--oscuro);
  color: var(--blanco);
}

@media (max-width: 599.98px) {
  .botones {
    flex-direction: column;
  }

  .boton,
  .boton:link,
  .boton:visited {
    display: flex;
    width: 100%;
  }
}

/* ---------- Cabecera clara con el logo (sobre su fondo blanco) y un perfil debajo ---------- */
.cabecera {
  background: var(--blanco);
}

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.6rem var(--margen);
}

.marca,
.marca:hover {
  display: block;
  margin-right: auto;
  background: transparent;
}

.marca img {
  width: 168px;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a,
.menu a:link,
.menu a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 0.25rem;
  color: var(--oscuro);
  font: 700 1.05rem var(--titulares);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--rojo);
}

.cabecera__tel,
.cabecera__tel:link,
.cabecera__tel:visited {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.2rem;
  background: var(--rojo);
  color: var(--blanco);
  font: 700 1.15rem var(--titulares);
  letter-spacing: 0.05em;
}

.cabecera__tel:hover {
  background: var(--oscuro);
  color: var(--blanco);
}

/* Iconos de teléfono, correo, ubicación y Facebook: solo en el menú abierto del móvil, centrados bajo los enlaces (como en las demás
   webs, petición de Alfred). En escritorio y con el menú cerrado no se ven */
.cabecera__iconos {
  display: none;
}

.cabecera__icono,
.cabecera__icono:link,
.cabecera__icono:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--oscuro);
  background: var(--blanco);
  color: var(--oscuro);
}

.cabecera__icono:hover {
  border-color: var(--rojo);
  background: var(--rojo);
  color: var(--blanco);
}

.cabecera__icono .icono {
  width: 26px;
  height: 26px;
}

/* Botón «Menú» del móvil: hamburguesa (pedida por Alfred para Farmacia Ferrandis y puesta en todas las webs; el brief pedía una fila a todo
   el ancho: se avisa) */
.menu-boton {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oscuro);
  cursor: pointer;
}

.menu-boton__raya,
.menu-boton__raya::before,
.menu-boton__raya::after {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 3px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-boton__raya {
  top: 22px;
}

.menu-boton__raya::before,
.menu-boton__raya::after {
  content: "";
  left: 0;
}

.menu-boton__raya::before {
  top: -7px;
}

.menu-boton__raya::after {
  top: 7px;
}

.menu-boton[aria-expanded="true"] .menu-boton__raya {
  background: transparent;
}

.menu-boton[aria-expanded="true"] .menu-boton__raya::before {
  transform: translateY(7px) rotate(45deg);
}

.menu-boton[aria-expanded="true"] .menu-boton__raya::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-boton__raya,
  .menu-boton__raya::before,
  .menu-boton__raya::after {
    transition: none;
  }
}

@media (min-width: 900px) {
  .marca img {
    width: 210px;
  }

  .menu-boton {
    display: none !important;
  }

  .cabecera__interior {
    flex-wrap: nowrap;
  }
}

@media (max-width: 899.98px) {
  .cabecera__tel,
  .cabecera__tel:link,
  .cabecera__tel:visited {
    display: none;
  }

  /* El menú nace plegado en el móvil, sin esperar al JavaScript: si no, se vería abierto un instante y al plegarse movería toda la
     página (salto de diseño de ~100 px). Sin scripts (más abajo) se queda a la vista */
  .menu {
    display: none;
    flex-basis: 100%;
  }

  .menu.abierto {
    display: block;
  }

  .menu ul {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .menu li + li {
    border-top: 1px solid var(--linea);
  }

  .menu a {
    justify-content: center;
    width: 100%;
  }

  /* Menú abierto: enlaces centrados y, debajo, la fila de iconos */
  .menu.abierto + .cabecera__iconos {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    gap: 0.9rem;
    padding: 0.9rem 0 1.1rem;
    border-top: 1px solid var(--linea);
  }
}

@media (max-width: 899.98px) and (scripting: none) {
  .menu {
    display: block;
  }
}

/* Entre 900 y 1079 px no caben los cuatro enlaces y el teléfono en una línea: el teléfono (que está en la portada, el contacto y el pie) se quita de la cabecera */
@media (min-width: 900px) and (max-width: 1079.98px) {
  .cabecera__tel,
  .cabecera__tel:link,
  .cabecera__tel:visited {
    display: none;
  }
}

/* ---------- Etiquetas de sección (01 Empresa…) con un perfil pequeño encima, y la retícula asimétrica ---------- */
.etiqueta {
  position: relative;
  padding-top: 1rem;
  color: var(--gris);
  font: 700 0.95rem var(--titulares);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.etiqueta::before,
.etiqueta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
}

.etiqueta::before {
  right: 0;
  background: var(--gris);
}

.etiqueta::after {
  width: 3rem;
  background: var(--rojo);
}

.etiqueta__n {
  margin-right: 0.5rem;
  color: var(--rojo);
}

.rejilla {
  display: grid;
  gap: 1.25rem 3rem;
}

.rejilla__cuerpo > * + * {
  margin-top: 1rem;
}

@media (min-width: 900px) {
  .rejilla {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }
}

/* ---------- Portada: el rótulo grande a la izquierda, el texto y los botones a la derecha, y la fachada debajo ---------- */
.portada {
  padding-top: clamp(2rem, 5vw, 4rem);
  overflow-x: clip;
}

.portada__rejilla {
  display: grid;
  gap: 1.75rem 4rem;
  align-items: end;
}

.antetitulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gris);
  font: 700 0.95rem var(--titulares);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.antetitulo::before {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 6px;
  background: var(--rojo);
}

.portada h1 {
  margin-top: 1.1rem;
  font-size: clamp(3rem, 8.6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.h1__marca {
  display: block;
  color: var(--rojo);
}

.portada__entrada {
  max-width: 26em;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.5;
}

.portada__lateral .botones {
  margin-top: 1.75rem;
}

.portada .perfil--largo {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.portada__foto {
  margin: 0;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.portada__foto img {
  width: 100%;
  aspect-ratio: 2000 / 679;
  object-fit: cover;
}

.portada__foto figcaption {
  margin-top: 0.6rem;
  color: var(--gris);
  font-size: 0.9rem;
}

@media (max-width: 699.98px) {
  .portada__foto img {
    aspect-ratio: 905 / 679;
  }
}

@media (min-width: 900px) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---------- Secciones ---------- */
.empresa,
.productos,
.trabajos,
.ubicacion,
.contacto {
  padding-block: var(--seccion);
}

.empresa__texto {
  max-width: 24em;
  font: 600 clamp(1.35rem, 2.5vw, 1.85rem)/1.3 var(--titulares);
}

/* La foto de «Empresa» (Alfred, 2026-11-08): al ancho de la ficha de debajo, sin recortar (3:2) y a todo el ancho en el móvil */
.empresa__foto {
  max-width: 46rem;
  margin: 2rem 0 0;
}

.empresa__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.empresa__foto figcaption {
  margin-top: 0.6rem;
  color: var(--gris);
  font-size: 0.9rem;
}

.ficha {
  max-width: 46rem;
  margin: 2rem 0 0;
  border-top: 2px solid var(--oscuro);
}

.ficha div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linea);
}

.ficha dt,
.datos dt {
  color: var(--gris);
  font: 700 0.9rem var(--titulares);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ficha dd,
.datos dd {
  margin: 0;
}

@media (min-width: 700px) {
  .ficha div {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

/* ---------- Productos: cuatro franjas con un perfil de distinto grosor, no cuatro tarjetas iguales ---------- */
.productos {
  padding-bottom: calc(var(--seccion) * 0.8);
}

.franjas {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.franja--2,
.franja--4 {
  background: var(--superficie);
}

.franja__rejilla {
  display: grid;
  gap: 0.6rem 3rem;
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.franja__n {
  color: var(--gris);
  font: 800 clamp(2.4rem, 5vw, 4.25rem)/0.9 var(--titulares);
}

.franja h3 {
  font-size: clamp(1.9rem, 3.7vw, 3rem);
}

.franja__cuerpo p {
  max-width: 30em;
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
}

.datos {
  max-width: 34rem;
  margin: 1.1rem 0 0;
}

.datos div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--linea);
}

.franja--2 .datos div,
.franja--4 .datos div {
  border-top-color: #c4c4c4;
}

@media (min-width: 700px) {
  .datos div {
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .franja__rejilla {
    grid-template-columns: 5.5rem minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  .franja--2 .franja__rejilla {
    grid-template-columns: 5.5rem minmax(0, 6fr) minmax(0, 5fr);
  }

  .franja--3 .franja__rejilla {
    grid-template-columns: 5.5rem minmax(0, 4fr) minmax(0, 7fr);
  }
}

/* Los dibujos de producto de cada franja (pedidos por Alfred, 2026-11-08): en una placa clara, con su leyenda debajo. En las franjas
   blancas la placa es gris claro y en las grises, blanca; así el dibujo blanco se separa siempre del fondo */
.dibujos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.franja__rejilla > .dibujos {
  grid-column: 1 / -1;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.dibujo figure {
  margin: 0;
}

.dibujo__marco {
  aspect-ratio: 1 / 0.9;
  padding: 0.75rem;
  background: var(--superficie);
}

.franja--2 .dibujo__marco,
.franja--4 .dibujo__marco {
  background: var(--blanco);
}

/* La imagen ocupa el hueco de la placa (así su tamaño no depende de la carga) y «scale-down» no la amplía más allá de su tamaño */
.dibujo img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.dibujo figcaption {
  margin-top: 0.55rem;
  color: var(--oscuro);
  font: 700 0.85rem/1.25 var(--titulares);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .dibujos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }

  .dibujos--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dibujos--pareja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
  }
}

.productos__pie {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  padding-top: clamp(2rem, 4.5vw, 3rem);
}

.productos__otras {
  max-width: 40em;
  color: var(--gris);
  font-size: 0.98rem;
}

.productos__cierre {
  max-width: 24em;
  font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--titulares);
  text-wrap: balance;
}

/* ---------- Trabajos: una foto grande y dos más pequeñas; los pies, como rótulos blancos sobre la foto ---------- */
.mosaico {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.mosaico figure {
  position: relative;
  margin: 0;
}

.mosaico img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.mosaico figcaption {
  margin-top: 0.5rem;
  font-size: 1rem;
}

.mosaico__n {
  margin-right: 0.45rem;
  color: var(--rojo);
  font: 800 0.95rem var(--titulares);
  letter-spacing: 0.1em;
}

.trabajos__nota {
  margin-top: 1.1rem;
  color: var(--gris);
  font-size: 0.95rem;
}

@media (min-width: 900px) {
  .mosaico {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-rows: 1fr 1fr;
  }

  .mosaico__a {
    grid-row: 1 / span 2;
  }

  .mosaico__b,
  .mosaico__c {
    min-height: 0;
  }

  .mosaico__b img,
  .mosaico__c img {
    height: 100%;
    aspect-ratio: auto;
  }

  .mosaico figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: calc(100% - 1rem);
    margin: 0;
    padding: 0.5rem 0.9rem;
    background: var(--blanco);
    font-size: 0.95rem;
    line-height: 1.3;
  }
}

/* ---------- Dónde estamos: plano propio (OpenStreetMap) con un solo botón debajo ---------- */
.ubicacion__rejilla {
  display: grid;
  gap: 1.75rem 4rem;
}

.ubicacion__texto > * + * {
  margin-top: 1.1rem;
}

.ubicacion__direccion {
  font-size: clamp(1.15rem, 1.9vw, 1.3rem);
  font-weight: 600;
}

.ubicacion__direccion span {
  white-space: nowrap;
}

@media (min-width: 900px) {
  .ubicacion__rejilla {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

.mapa__marco {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--oscuro);
  background: var(--blanco);
}

.mapa__credito,
.mapa__credito:link,
.mapa__credito:visited {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--oscuro);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1;
}

.mapa__acciones {
  margin: 1rem 0 0;
}

@media (max-width: 599.98px) {
  .mapa__marco {
    aspect-ratio: 1;
  }

  .mapa__marco .plano {
    width: 170%;
    max-width: none;
    margin: -6.3% 0 0 -50.6%; /* lo calcula herramientas/mapa.py */
  }

  .mapa__credito,
  .mapa__credito:link,
  .mapa__credito:visited {
    right: auto;
    left: 0;
  }

  .plano__solo-escritorio {
    display: none;
  }
}

.plano {
  display: block;
  width: 100%;
  height: auto;
}

.plano__parque,
.plano__plaza {
  fill: #eeeeee;
}

.plano__agua {
  fill: #e4e4e4;
}

.plano__calle {
  fill: none;
  stroke: #dedede;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano__calle--peatonal {
  stroke: #e8e8e8;
  stroke-width: 4;
}

.plano__calle--principal {
  stroke: var(--gris);
  stroke-width: 10;
}

.plano text {
  paint-order: stroke;
  stroke: var(--blanco);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.plano__rotulo {
  fill: var(--oscuro);
  font: 600 21px var(--letra);
}

.plano__sede circle {
  fill: var(--oscuro);
  stroke: var(--blanco);
  stroke-width: 3;
}

.plano__sede .plano__sede-centro {
  fill: var(--rojo);
  stroke: none;
}

.plano__guia {
  fill: none;
  stroke: var(--oscuro);
  stroke-width: 1.5;
}

.plano__etiqueta {
  fill: var(--oscuro);
}

.plano .plano__nombre {
  fill: var(--blanco);
  stroke: none;
  font: 800 34px var(--titulares);
  letter-spacing: 0.04em;
}

.plano .plano__dato {
  fill: var(--blanco);
  stroke: none;
  font: 600 21px var(--letra);
}

.plano__escala path,
.plano__norte path {
  fill: none;
  stroke: var(--oscuro);
  stroke-width: 2;
}

.plano__escala text,
.plano__norte text {
  fill: var(--oscuro);
  font: 600 18px var(--letra);
}

/* ---------- Contacto: superficie gris claro, teléfono y correo en grande ---------- */
.contacto {
  background: var(--superficie);
}

.contacto__vias {
  display: grid;
  gap: 2rem 3rem;
  margin-top: 2rem;
}

.via {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 1.1rem;
  border-top: 4px solid var(--oscuro);
}

.via__tipo {
  color: var(--gris);
  font: 700 0.95rem var(--titulares);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.via__dato {
  margin-top: 0.3rem;
  font: 800 clamp(2.3rem, 5.2vw, 3.7rem)/1 var(--titulares);
}

.via__dato a,
.via__dato a:link,
.via__dato a:visited {
  color: var(--oscuro);
  font-weight: 800;
}

.via__dato a:hover {
  color: var(--rojo);
}

.via__dato--correo {
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  overflow-wrap: anywhere;
}

.via .boton {
  margin-top: 1.5rem;
}
@media (min-width: 700px) {
  .contacto__vias {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Horario y formulario de contacto (pedidos por Alfred, 2026-11-08) ---------- */
.contacto__cols {
  display: grid;
  gap: 2.25rem 3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.horario__titulo {
  font-size: 1.5rem;
}

.horario {
  max-width: 24rem;
  margin: 0.9rem 0 0;
  border-top: 4px solid var(--oscuro);
}

.horario div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #c4c4c4;
}

.horario dt {
  font-weight: 600;
}

.horario dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.horario__nota {
  margin-top: 0.75rem;
  color: var(--gris);
  font-size: 0.95rem;
}

.formulario {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--linea);
  background: var(--blanco);
}

/* El perfil pequeño de las etiquetas, encima del formulario */
.formulario::before,
.formulario::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  height: 6px;
}

.formulario::before {
  right: -1px;
  background: var(--gris);
}

.formulario::after {
  width: 3rem;
  background: var(--rojo);
}

.formulario h3 {
  margin-bottom: 1.1rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.campo {
  margin-bottom: 1.1rem;
}

.campo label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--oscuro);
  font: 700 0.9rem var(--titulares);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.campo__opcional {
  color: var(--gris);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 50px;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--oscuro);
  border-radius: 0;
  background: var(--blanco);
  color: var(--oscuro);
  font: inherit;
}

.campo textarea {
  min-height: 9rem;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--rojo);
}

.campos-dos {
  display: grid;
  gap: 0 1.1rem;
}

.campo__nota {
  margin: -0.3rem 0 1.1rem;
  color: var(--gris);
  font-size: 0.95rem;
}

.campo--trampa {
  position: absolute;
  left: -9999px;
}

.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1.4rem;
}

.campo--casilla input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0.15rem 0 0;
  accent-color: var(--rojo);
}

.campo--casilla label {
  margin: 0;
  font: 400 1rem/1.5 var(--letra);
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 600px) {
  .campos-dos {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .contacto__cols {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

/* ---------- Página de trabajos, por categorías (pedido por Alfred, 2026-11-08) ---------- */
.trabajos__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.trabajos__pie .trabajos__nota {
  margin: 0;
}

.trabajos-cab {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.trabajos-cab h1 {
  margin-top: 1.1rem;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
}

.trabajos-cab__entrada {
  max-width: 34em;
  margin-top: 1.25rem;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.5;
}

.indice ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.indice a,
.indice a:link,
.indice a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--oscuro);
  font: 700 1rem var(--titulares);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.indice a:hover {
  color: var(--rojo);
}

.grupo {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.grupo__rejilla {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.grupo__titulo {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria li {
  min-width: 0;
}

.galeria li:first-child {
  grid-column: 1 / -1;
}

.galeria a,
.galeria a:link,
.galeria a:visited {
  display: block;
  background: var(--superficie);
}

.galeria a:hover img {
  opacity: 0.88;
}

.galeria img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.trabajos-pie {
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--seccion);
}

.trabajos-pie__interior {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

@media (min-width: 700px) {
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .galeria li:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .galeria li:first-child a,
  .galeria li:first-child img {
    height: 100%;
  }

  .galeria li:first-child img {
    aspect-ratio: auto;
  }
}

@media (min-width: 900px) {
  .grupo__titulo {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}

/* ---------- Pie: claro, con el logo sobre su fondo blanco y un perfil encima ---------- */
.pie {
  background: var(--blanco);
}

.pie__interior {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 2.25rem 1.5rem;
}

.pie__logo,
.pie__logo:hover {
  display: inline-block;
  background: transparent;
}

.pie__logo img {
  width: 200px;
}

.pie__datos p + p {
  margin-top: 0.3rem;
}

.pie__razon {
  font: 800 1.3rem var(--titulares);
  text-transform: uppercase;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__enlaces a,
.pie__enlaces a:link,
.pie__enlaces a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--oscuro);
}

.pie__enlaces a:hover {
  color: var(--rojo);
}

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  padding-block: 1rem 1.75rem;
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: 0.9rem;
}

@media (min-width: 900px) {
  .pie__interior {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }

  .pie__enlaces {
    flex-direction: column;
    gap: 0;
  }
}

/* ---------- Páginas legales y 404 ---------- */
.legal {
  max-width: 820px;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.legal h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.legal h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.legal p + p,
.legal > p:not(.legal__borrador) {
  margin-top: 0.75rem;
}

.legal__borrador {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 6px solid var(--rojo);
  background: var(--superficie);
  font-weight: 600;
}

.ficha-legal {
  margin: 0.75rem 0 0;
}

.ficha-legal div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}

.ficha-legal dt {
  color: var(--gris);
  font: 700 0.95rem var(--titulares);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ficha-legal dd {
  margin: 0;
}

@media (min-width: 700px) {
  .ficha-legal div {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}