/* Talleres Raúl Sancho · hoja de estilos. Sin preprocesador: esta es la hoja que se sube. */

/* Fuentes autoalojadas (SIL Open Font License): solo los pesos que se usan y los caracteres latinos */
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('../fonts/public-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('../fonts/public-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --hormigon: #eceeea;    /* fondo */
  --blanco: #ffffff;      /* cabecera (el logo trae fondo blanco) y franjas */
  --carbon: #141816;      /* texto */
  --zinc-oscuro: #58605c; /* texto secundario */
  --zinc: #6e7672;        /* solo filetes: no llega al contraste de texto */
  --verde: #107054;       /* el verde del logo: enlaces, botones, foco y números */
  --verde-oscuro: #0c5c45;
  --pie: #12251f;
  --pie-texto: #e8eeeb;
  --pie-enlace: #a9c9bd;
  --titulares: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --ancho: 1100px;
  --margen: clamp(16px, 4vw, 40px);
  --aire: clamp(3.5rem, 8vw, 6.5rem);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--hormigon); color: var(--carbon); font: 400 1.125rem/1.6 var(--texto); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titulares); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 1.85rem + 2.6vw, 3.5rem); letter-spacing: -0.015em; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--verde); text-decoration: none; } /* sin subrayado en toda la web (lo pidió el usuario) */
a:hover { color: var(--verde-oscuro); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
[hidden] { display: none !important; }
.envoltura { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.texto { max-width: 65ch; }
.texto > :last-child { margin-bottom: 0; }
.saltar { position: absolute; left: var(--margen); top: -6rem; z-index: 30; padding: 0.75rem 1rem; background: var(--carbon); color: var(--blanco); }
.saltar:focus { top: 0.75rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pendiente { color: var(--zinc-oscuro); font-style: italic; }

/* Barra superior, solo en escritorio: teléfonos y correo (en el móvil están en el menú y en la barra «Llamar») */
.barra-superior { display: none; background: var(--pie); color: var(--pie-texto); font-size: 1rem; }
.barra-superior__fila { display: flex; flex-wrap: wrap; gap: 0 2.5rem; }
.barra-superior p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.barra-superior__etiqueta, .barra-superior__punto { color: var(--pie-enlace); }
.barra-superior a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); text-decoration: none; }
.barra-superior a:hover { color: var(--pie-enlace); }
.barra-superior :focus-visible { outline-color: var(--pie-enlace); }
@media (min-width: 920px) {
  .barra-superior { display: block; }
}

/* Cabecera: blanca, logo a la izquierda y menú a la derecha. Los teléfonos del menú solo salen en el móvil */
.cabecera { position: relative; z-index: 20; background: var(--blanco); border-bottom: 1px solid var(--zinc); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; min-height: 6rem; }
.cabecera__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 44px; } /* 44 px de zona táctil aunque el logo encoja */
.cabecera__logo img { width: 344px; }
.cabecera__menu { flex: none; display: none; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--zinc); background: var(--blanco); color: var(--carbon); font: 600 1rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.cabecera__nav { display: flex; align-items: center; gap: 2.25rem; }
.cabecera__nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.cabecera__nav ul a { display: block; padding: 0.875rem 0; color: var(--carbon); font: 600 1rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.cabecera__nav ul a:hover, .cabecera__nav ul a[aria-current="page"] { color: var(--verde); } /* la página actual, en verde */
.cabecera__tels { display: none; margin: 0; }
.cabecera__tels a { display: block; padding: 0.75rem 0; font: 700 1.125rem/1 var(--titulares); white-space: nowrap; }

@media (max-width: 919.98px) {
  .cabecera__fila { min-height: 4.75rem; }
  .cabecera__menu { display: inline-flex; }
  .cabecera__nav { display: none; }
  .cabecera--abierta .cabecera__nav { position: absolute; left: 0; right: 0; top: 100%; display: block; padding: 0.5rem var(--margen) 1.5rem; background: var(--blanco); border-bottom: 1px solid var(--zinc); }
  .cabecera__nav ul { flex-direction: column; gap: 0; }
  .cabecera__nav ul a { padding: 1rem 0; border-bottom: 1px solid var(--hormigon); }
  .cabecera__nav ul a[aria-current="page"] { border-bottom-color: var(--hormigon); color: var(--verde); }
  .cabecera__tels { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; padding-top: 0.75rem; }
  .cabecera__tels a { padding: 0.75rem 0; }
}

/* Portada: carrusel a todo el ancho y, debajo, el nombre y el cajetín de plano */
.carrusel { position: relative; background: var(--pie); }
/* Al cambiar, la foto se funde a negro y luego aparece la siguiente (0,7 s cada paso, como FUNDIDO en web.js) */
.carrusel__fotos { position: relative; height: clamp(260px, 48vw, 640px); max-height: 78vh; overflow: hidden; background: #000; }
.carrusel__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease-in-out; }
.carrusel__foto.activa { opacity: 1; }
.carrusel__foto picture, .carrusel__foto img { display: block; width: 100%; height: 100%; }
.carrusel__foto img { object-fit: cover; }
/* Rótulo en blanco sobre la foto, en una caja oscura abajo a la izquierda, como el carrusel de la web vieja */
.carrusel__rotulo { position: absolute; left: max(var(--margen), calc((100% - var(--ancho)) / 2)); right: var(--margen); bottom: clamp(1rem, 4vw, 2.5rem); margin: 0; }
.carrusel__rotulo span { display: inline-block; max-width: 100%; padding: 0.55em 0.85em; background: rgba(18, 37, 31, 0.84); color: var(--blanco); font: 700 clamp(1.125rem, 0.8rem + 1.6vw, 2.25rem)/1.2 var(--titulares); letter-spacing: 0.03em; text-transform: uppercase; }
.portada__datos { display: grid; gap: 2rem; padding-top: clamp(2rem, 4vw, 3rem); }
.portada__linea { margin: 0.75rem 0 0; color: var(--zinc-oscuro); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.35; }
.portada__entrada { max-width: 46ch; margin: 1.25rem 0 0; }
@media (min-width: 920px) {
  .portada__datos { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: start; }
}

/* Cajetín: los datos como en el cajetín de un plano (tabla con filetes) */
.cajetin { margin: 0; border: 1px solid var(--zinc); background: var(--blanco); }
.cajetin > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); }
.cajetin > div + div { border-top: 1px solid var(--zinc); }
.cajetin dt { padding: 0.875rem 1rem; border-right: 1px solid var(--zinc); color: var(--zinc-oscuro); font: 600 1rem/1.4 var(--titulares); letter-spacing: 0.05em; text-transform: uppercase; }
.cajetin dd { margin: 0; padding: 0.375rem 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.cajetin dd > span { display: block; padding: 0.5rem 0; }
.cajetin dd a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 479.98px) {
  .cajetin > div { grid-template-columns: minmax(0, 1fr); }
  .cajetin dt { padding-bottom: 0; border-right: 0; }
}

/* Secciones */
.seccion { padding-block: var(--aire); }
.seccion--dos { display: grid; gap: 1.25rem 3rem; }
.seccion--dos > h2 { padding-top: 0.25rem; }
.seccion--sin-arriba { padding-top: 0; }
@media (min-width: 920px) {
  .seccion--dos { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.franja { background: var(--blanco); }
.mas { margin: 1.5rem 0 0; font-weight: 600; }
.mas a { display: inline-block; padding-block: 0.5rem; }
.tactil { display: inline-block; padding-block: 0.5rem; font-weight: 600; } /* enlaces dentro del texto: 44 px de zona táctil y seminegrita (no llevan subrayado) */
.trabajos-intro { margin-top: 1rem; }

/* Especialidades: lista numerada con filetes */
.especialidades { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: especialidad; border-bottom: 1px solid var(--zinc); }
.especialidades li { counter-increment: especialidad; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: baseline; gap: 0.25rem 1rem; padding: 1.25rem 0; border-top: 1px solid var(--zinc); }
.especialidades li::before { content: counter(especialidad, decimal-leading-zero); grid-row: span 2; color: var(--verde); font: 700 clamp(2rem, 1.7rem + 1.2vw, 2.75rem)/1 var(--titulares); letter-spacing: -0.02em; }
.especialidades h3 a, .especialidades h3 span { display: inline-block; padding-block: 0.55rem; } /* mismo aire con enlace y sin él */
.especialidades h3 a { color: var(--carbon); }
.especialidades h3 a:hover, .especialidades h3 a:focus-visible { color: var(--verde-oscuro); }
.especialidades p { margin: 0; }
@media (min-width: 920px) {
  .especialidades li { grid-template-columns: 5rem minmax(0, 19rem) minmax(0, 1fr); padding: 1.375rem 0; }
  .especialidades li::before { grid-row: auto; }
}

/* Mosaico de fotos: filas de alto parecido, cada foto con su proporción (horizontal, vertical o cuadrada).
   Cada foto crece en proporción a su forma para llenar la fila; el tope evita que una fila corta salga enorme. */
.mosaico { --fila: 140px; display: flex; flex-wrap: wrap; gap: 10px; margin: 2rem 0 0; padding: 0; list-style: none; }
.mosaico li { flex-grow: calc(var(--r) * 100); flex-shrink: 1; flex-basis: calc(var(--r) * var(--fila)); max-width: calc(var(--r) * var(--fila) * 1.4); }
.mosaico .f-h { --r: 1.3333; }
.mosaico .f-v { --r: 0.75; }
.mosaico .f-c { --r: 1; }
.mosaico a { display: block; }
.mosaico img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; background: var(--blanco); }
.mosaico a:hover img { opacity: 0.88; }
@media (min-width: 760px) {
  .mosaico { --fila: 220px; gap: 14px; }
  .mosaico--bajo { --fila: 188px; } /* para que sus fotos se repartan en filas completas a 1100 px (sin una sola al final) */
}

/* Información y presupuestos */
.presupuesto { padding-bottom: var(--aire); }
.presupuesto__caja { display: grid; gap: 1.5rem 3rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--zinc); border-top: 4px solid var(--verde); background: var(--blanco); }
.presupuesto__caja h2 { margin-bottom: 1rem; }
.presupuesto__datos { margin: 0; padding: 0; list-style: none; }
.presupuesto__datos a { display: inline-block; padding-block: 0.6rem; font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.3 var(--titulares); overflow-wrap: anywhere; }
@media (min-width: 920px) {
  .presupuesto__caja { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* Páginas interiores */
.cabecera-pagina { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.cabecera-pagina h1 { margin-bottom: 1rem; }
.cabecera-pagina__linea { max-width: 42ch; color: var(--zinc-oscuro); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.4; }
.cabecera-pagina + .seccion { padding-top: clamp(2rem, 4vw, 3rem); }

/* Texto con una foto al lado (debajo, en el móvil): el bloque «Empresa» del inicio y la página Empresa, donde cada
   bloque de texto lleva la suya en la misma fila */
.con-foto, .empresa { display: grid; gap: 2rem 3.5rem; }
.con-foto h2, .empresa h2 { margin-bottom: 1rem; }
.con-foto__foto, .empresa__foto { margin: 0; }
.con-foto__foto img, .empresa__foto img { width: 100%; }
.empresa { row-gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 920px) {
  .con-foto, .empresa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* Trabajos */
.indice ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 2rem 0 0; padding: 0.75rem 0 0; list-style: none; border-top: 1px solid var(--zinc); }
.indice a { display: inline-block; padding: 0.625rem 0; font-weight: 600; }
.grupo { padding-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 1rem; }
.grupo h2 { padding-top: 1.25rem; border-top: 1px solid var(--zinc); }
.grupo .mosaico { margin-top: 1.5rem; }
.trabajos-fin { padding-top: var(--aire); }

/* Contacto */
.contacto { display: grid; gap: 3rem; }
.contacto h2 { margin-bottom: 1rem; }
.contacto__texto { max-width: 46ch; }
/* Mapa: el plano propio (SVG de OpenStreetMap, sin Google ni cookies) hasta que se pulsa «Ver mapa de Google»;
   entonces el mapa de Google ocupa su sitio */
.mapa { margin: 1.5rem 0 0; }
.mapa__marco { position: relative; aspect-ratio: 1000 / 750; overflow: hidden; border: 1px solid var(--zinc); background: #f7f8f5; }
/* Crédito de OpenStreetMap dentro del mapa, abajo a la derecha (lo pide la licencia de los datos) */
.mapa__credito { position: absolute; right: 0; bottom: 0; padding: 14px 10px; background: rgba(255, 255, 255, 0.85); color: var(--zinc-oscuro); font-size: 1rem; line-height: 1; }
.mapa__credito:hover { color: var(--carbon); }
.mapa__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
.mapa__boton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border: 0; background: var(--verde); color: var(--blanco); font: 700 1rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.mapa__boton:hover { background: var(--verde-oscuro); }
/* En el móvil, el plano se amplía y se encuadra en el taller y su etiqueta, para que los nombres se lean
   (los márgenes los calcula herramientas/mapa.py) */
@media (max-width: 599.98px) {
  .mapa__marco { aspect-ratio: 1; }
  .mapa__marco .plano { width: 170%; max-width: none; margin: -9.1% 0 0 -55.9%; }
  .mapa__credito { right: auto; left: 0; } /* en el móvil, abajo a la izquierda: a la derecha pisaría la avenida */
}
.plano { display: block; width: 100%; height: auto; }
.plano__parque { fill: #e2eae0; }
.plano__agua { fill: #d5e4e9; }
.plano__acequia { fill: none; stroke: #c3dbe3; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.plano__tren { fill: none; stroke: #b9bfbb; stroke-width: 3; stroke-dasharray: 10 6; }
.plano__calle { fill: none; stroke: #d9ddd8; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plano__calle--peatonal { stroke-width: 1.8; stroke-dasharray: 3 5; }
.plano__calle--principal { stroke: #aab2ad; stroke-width: 5; }
.plano text { paint-order: stroke; stroke: #f7f8f5; stroke-width: 5px; stroke-linejoin: round; }
.plano__rotulo { fill: var(--zinc-oscuro); font: 400 22px var(--texto); }
.plano__rotulo--agua { fill: #3d7488; }
.plano__rotulo--carretera { fill: var(--carbon); font-weight: 600; }
.plano__taller circle { fill: var(--verde); stroke: var(--blanco); stroke-width: 3; }
.plano__taller .plano__taller-centro { fill: var(--blanco); stroke: none; }
.plano__guia { fill: none; stroke: var(--carbon); stroke-width: 1.5; }
.plano__etiqueta { fill: var(--blanco); stroke: var(--carbon); stroke-width: 1.5; }
.plano__nombre { fill: var(--carbon); font: 700 34px var(--titulares); }
.plano__dato { fill: var(--zinc-oscuro); font: 400 22px var(--texto); }
.plano__escala path, .plano__norte path { fill: none; stroke: var(--carbon); stroke-width: 1.5; }
.plano__escala text, .plano__norte text { fill: var(--carbon); font: 400 20px var(--texto); }
@media (min-width: 920px) {
  .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Textos legales y 404 */
.legal h2 { margin: 2.75rem 0 0.875rem; font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); }
.legal .texto > h2:first-child { margin-top: 0; }
.fin-404 { padding-bottom: var(--aire); }
.legal .cajetin { margin: 1.25rem 0 0; }
.enlaces { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.enlaces a { display: inline-block; padding-block: 0.625rem; font: 700 1.25rem/1.3 var(--titulares); }

/* Pie */
.pie { padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; background: var(--pie); color: var(--pie-texto); font-size: 1rem; }
.pie a { color: var(--pie-enlace); }
.pie a:hover { color: var(--blanco); }
.pie :focus-visible { outline-color: var(--pie-enlace); }
.pie p { margin: 0 0 0.75rem; }
.pie__rejilla { display: grid; gap: 2rem; }
.pie__nombre { color: var(--blanco); font: 700 1.375rem/1.25 var(--titulares); }
.pie__contacto a { display: inline-block; padding-block: 0.625rem; }
.pie__contacto p { margin: 0; }
.pie__contacto p + p { margin-top: 0.5rem; }
.pie__nav ul { margin: 0; padding: 0; list-style: none; }
.pie__nav a { display: inline-block; min-width: 44px; padding-block: 0.625rem; }
.pie .pie__legal { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(232, 238, 235, 0.25); color: var(--pie-enlace); }
@media (min-width: 760px) {
  .pie__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
}

/* Barra fija del móvil: solo «Llamar» */
.llamar { display: none; }
@media (max-width: 759.98px) {
  body { padding-bottom: 3.5rem; }
  .llamar { position: fixed; inset: auto 0 0; z-index: 25; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding-bottom: env(safe-area-inset-bottom); background: var(--verde); color: var(--blanco); font: 700 1.0625rem/1 var(--titulares); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
  .llamar:hover { color: var(--blanco); background: var(--verde-oscuro); }
  .llamar:focus-visible { outline: 3px solid var(--blanco); outline-offset: -6px; }
}

/* Visor de fotos */
.visor { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--pie); color: var(--pie-texto); }
.visor::backdrop { background: rgba(18, 37, 31, 0.92); }
.visor[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.visor__figura { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; padding: 1rem var(--margen) 0; }
.visor__figura img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.visor__pie { padding-top: 0.75rem; font-size: 1rem; }
.visor__botones { display: flex; justify-content: space-between; gap: 0.75rem; padding: 1rem var(--margen) max(1rem, env(safe-area-inset-bottom)); }
.visor button { min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--pie-enlace); background: transparent; color: var(--blanco); font: 600 1rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.visor button:hover { background: rgba(232, 238, 235, 0.1); }
.visor :focus-visible { outline-color: var(--pie-enlace); }

@media print {
  .cabecera__menu, .cabecera__nav, .llamar, .mapa, .indice { display: none !important; }
  body { background: #fff; padding: 0; }
}