/* Fontanería Grau Font (Gandía) — propuesta de web nueva. Hoja de estilos propia, sin librerías.
   Idea: la web sale de la placa del logo (borde negro, aro blanco, línea negra y dentro una mitad blanca y otra azul) y de las señales azules de carretera.
   Colores medidos en el logo grande que pegó Alfred: azul #0188cf, gris oscuro #373635, blanco y negro.
   Tipografías autoalojadas: Oswald (títulos) y Golos Text (texto), las dos con licencia SIL OFL 1.1. Sin subrayados en ningún enlace, ni en el menú ni al pasar el ratón. */

@font-face { font-family: "Oswald"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/oswald-500.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/oswald-600.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/oswald-700.woff2) format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/golostext-400.woff2) format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/golostext-500.woff2) format("woff2"); }
@font-face { font-family: "Golos Text"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/golostext-600.woff2) format("woff2"); }

:root {
  --azul: #0188cf;          /* el azul del logo: placas y rótulos grandes (con texto blanco solo si es grande y en negrita) */
  --azul-texto: #0072b1;    /* el mismo azul, más oscuro: texto pequeño y botones (5,2 : 1 con blanco) */
  --azul-hover: #005c91;
  --azul-claro: #7fcdf5;    /* sobre fondos oscuros */
  --azul-suave: #e7f3fb;
  --carbon: #373635;        /* el gris oscuro del logo */
  --carbon-fuerte: #262524;
  --gris: #5b5a58;
  --linea: #d6dde2;
  --suave: #f1f5f8;
  --titulos: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --texto: "Golos Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ancho: 1240px;
  --gutter: 1rem;
  --alto-cabecera: 4.4rem;
}
@media (min-width: 760px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1180px) { :root { --gutter: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--texto); color: var(--carbon); background: #fff; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; color: var(--carbon); hyphens: manual; overflow-wrap: break-word; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--azul-texto); font-weight: 600; text-decoration: none; }
a:hover, a:focus { color: var(--azul-hover); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
::selection { background: var(--azul); color: #fff; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: #000; color: #fff; font-weight: 600; }
.saltar:focus { top: 1rem; color: #fff; }
.sr-solo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: clamp(3rem, 6.5vw, 6rem); }
.seccion--suave { background: var(--suave); }
.seccion--poco { padding-block: clamp(2rem, 4vw, 3.5rem); }
[id] { scroll-margin-top: 5.5rem; }

/* ---------- La placa del logo: borde negro, aro blanco, línea negra y el interior ---------- */
.placa { background: #fff; border: 3px solid #000; border-radius: 18px; padding: 7px; }
.placa__interior { border: 2px solid #000; border-radius: 10px; overflow: hidden; background: #fff; }
.placa--azul .placa__interior { background: var(--azul); }

/* Rótulo pequeño sobre los títulos: una señal en miniatura */
.rotulo { display: block; width: fit-content; margin: 0 0 1rem; padding: .32rem .75rem .26rem; background: var(--azul-texto); color: #fff; border-radius: 4px; font: 600 .9rem/1.1 var(--titulos); letter-spacing: .12em; text-transform: uppercase; }
.rotulo--oscuro { background: var(--carbon); }

/* ---------- Botones: rectangulares, a todo el ancho en el móvil ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.4rem; padding: .7rem 1.5rem .6rem; border: 2px solid transparent; border-radius: 6px; font: 700 1.1rem/1.1 var(--titulos); letter-spacing: .07em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.boton svg { width: 1.3em; height: 1.3em; flex: none; fill: currentColor; }
.boton--azul { background: var(--azul-texto); color: #fff; }
.boton--azul:hover { background: var(--azul-hover); color: #fff; }
.boton--linea { background: #fff; color: var(--carbon); border-color: var(--carbon); }
.boton--linea:hover { background: var(--carbon); color: #fff; }
.boton--blanco { background: #fff; color: var(--carbon); }
.boton--blanco:hover { background: var(--azul-suave); color: var(--carbon); }
.boton--contorno-claro { background: transparent; color: #fff; border-color: #fff; }
.boton--contorno-claro:hover { background: #fff; color: var(--carbon); }
.botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
@media (max-width: 759px) { .botones .boton, .boton--completo { width: 100%; } .botones { flex-direction: column; } }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 3px solid #000; }
.cabecera__interior { position: relative; display: flex; align-items: center; gap: 1rem; min-height: var(--alto-cabecera); }
.marca { flex: none; display: block; line-height: 0; }
.marca img { display: block; width: 9.2rem; height: auto; aspect-ratio: 720 / 230; }
.menu { margin-left: auto; }
.menu ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; }
.menu a { display: block; padding: .85rem .8rem .7rem; font: 500 .98rem/1 var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon); box-shadow: inset 0 3px 0 transparent; }
.menu a:hover { color: var(--azul-texto); box-shadow: inset 0 3px 0 #b9defa; }
.menu a[aria-current="page"] { font-weight: 700; color: var(--carbon); box-shadow: inset 0 3px 0 var(--azul); }
.cabecera__urgencias { display: none; flex: none; align-items: stretch; border: 2px solid #000; border-radius: 7px; overflow: hidden; color: var(--carbon); }
.cabecera__urgencias small { display: flex; align-items: center; padding: 0 .7rem; background: #fff; font: 600 .82rem/1 var(--titulos); letter-spacing: .12em; text-transform: uppercase; }
.cabecera__urgencias b { display: flex; align-items: center; gap: .45rem; padding: .55rem .9rem .45rem; background: var(--azul); color: #fff; font: 700 1.3rem/1 var(--titulos); letter-spacing: .04em; }
.cabecera__urgencias b svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.cabecera__urgencias:hover small { background: var(--azul-suave); }
.cabecera__urgencias:hover b { background: #0172b0; color: #fff; }
.menu-boton { display: none; flex: none; width: 3rem; height: 3rem; margin-left: auto; padding: 0; border: 2px solid #000; border-radius: 6px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-boton__raya, .menu-boton__raya::before, .menu-boton__raya::after { display: block; width: 1.35rem; height: 3px; background: var(--carbon); content: ""; }
.menu-boton__raya { position: relative; transition: background-color .15s; }
.menu-boton__raya::before { position: absolute; top: -7px; }
.menu-boton__raya::after { position: absolute; top: 7px; }
.cabecera--abierta .menu-boton__raya { background: transparent; }
.cabecera--abierta .menu-boton__raya::before { top: 0; transform: rotate(45deg); }
.cabecera--abierta .menu-boton__raya::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 760px) { .cabecera__urgencias { display: flex; } .menu { margin-left: auto; } }
/* Sin JavaScript el menú se queda a la vista, en una segunda fila; con él, en el móvil y la tableta se esconde tras el botón */
@media (max-width: 1179px) {
  .cabecera__interior { flex-wrap: wrap; padding-block: .5rem; }
  .menu { order: 3; flex: 1 0 100%; margin-left: 0; }
  .menu ul { gap: 0 .2rem; }
  .menu a { padding: .55rem .7rem .5rem; font-size: .92rem; }
  .cabecera__urgencias { margin-left: auto; }
}
@media (max-width: 1179px) and (scripting: enabled) {
  .cabecera__interior { flex-wrap: nowrap; }
  .menu-boton { display: inline-flex; }
  .menu { display: none; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; z-index: 5; margin: 0; background: #fff; border-bottom: 3px solid #000; padding: .4rem var(--gutter) 1rem; box-shadow: 0 18px 30px rgba(0, 0, 0, .18); }
  .cabecera--abierta .menu { display: block; }
  .menu ul { flex-direction: column; }
  .menu a { padding: .95rem .2rem; font-size: 1.2rem; border-bottom: 1px solid var(--linea); box-shadow: none; }
  .menu a:hover, .menu a[aria-current="page"] { box-shadow: none; color: var(--azul-texto); }
  .menu a[aria-current="page"]::before { content: "▸ "; color: var(--azul); }
  .cabecera__urgencias { margin-left: auto; }
}
@media (max-width: 1179px) and (min-width: 760px) and (scripting: enabled) { .cabecera__urgencias + .menu-boton { margin-left: 0; } }
@media (min-width: 1180px) { .menu-boton { display: none !important; } .menu ul { flex-wrap: nowrap; } .menu a { white-space: nowrap; } }
@media (min-width: 1180px) and (max-width: 1279px) { .menu a { padding-left: .55rem; padding-right: .55rem; letter-spacing: .055em; font-size: .93rem; } .cabecera__interior { gap: .8rem; } }

/* ---------- Barra de llamadas fija (móvil): la placa partida en dos, siempre a mano ---------- */
.barra-llamar { display: none; }
@media (max-width: 759px) {
  .barra-llamar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid #000; background: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .16); }
  .barra-llamar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 4.6rem; padding: .45rem .4rem .35rem; color: var(--carbon); text-align: center; }
  .barra-llamar a + a { background: var(--azul); color: #fff; border-left: 3px solid #000; }
  .barra-llamar small { font: 700 1.2rem/1 var(--titulos); letter-spacing: .1em; text-transform: uppercase; }
  .barra-llamar b { font: 700 1.5rem/1.1 var(--titulos); letter-spacing: .03em; }
  .pie { padding-bottom: 4.7rem; }
}

/* ---------- Portada ---------- */
.hero { padding: clamp(1.75rem, 3.5vw, 3.25rem) 0 0; }
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hero__texto { padding-bottom: 0; }
.hero h1 { margin: 0 0 1.4rem; font-size: clamp(2.5rem, 1.2rem + 4.5vw, 4.6rem); line-height: 1.18; letter-spacing: .004em; }
.h1-azul { color: var(--azul); }
.hero__entrada { max-width: 34rem; font-size: 1.28rem; font-weight: 600; line-height: 1.5; }
.hero__foto { position: relative; }
.hero__foto .placa__interior { position: relative; aspect-ratio: 3 / 2; }
.hero__foto .ilustrativa { top: 0; bottom: auto; }
.hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .hero__rejilla { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
  .hero__texto { padding-bottom: clamp(3.6rem, 6vw, 5.2rem); }
  .hero__foto, .hero__foto .placa { height: 100%; }
  .hero__foto .placa__interior { height: 100%; min-height: 28rem; aspect-ratio: auto; }
  .hero__foto img { object-position: 58% 50%; }
}
.ilustrativa { position: absolute; left: 0; bottom: 0; z-index: 2; padding: .3rem .7rem; background: rgba(0, 0, 0, .74); color: #fff; font: 500 .78rem/1.25 var(--texto); }

/* Placa de llamadas: la placa del logo con el teléfono y el de urgencias */
.llamada { position: relative; z-index: 3; margin-top: calc(-1 * clamp(2.6rem, 5vw, 4.2rem)); }
.llamada .placa { border-radius: 22px; padding: 9px; background: #fff; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .35); }
.llamada__interior { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 13px; }
.llamada__mitad { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(1.25rem, 3vw, 2.6rem); }
.llamada__mitad--blanca { background: #fff; color: var(--carbon); }
.llamada__mitad--azul { background: var(--azul); color: #fff; }
.llamada__mitad:hover { color: inherit; }
.llamada__mitad--blanca:hover { background: var(--azul-suave); }
.llamada__mitad--azul:hover { background: #0172b0; }
.llamada__rotulo { font: 700 1.2rem/1.1 var(--titulos); letter-spacing: .12em; text-transform: uppercase; }
.llamada__mitad--blanca .llamada__rotulo { color: var(--azul-texto); }
.llamada__numero { display: flex; align-items: center; gap: .6rem; font: 700 clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem)/1.05 var(--titulos); letter-spacing: .03em; }
.llamada__numero svg { width: .62em; height: .62em; flex: none; fill: currentColor; }
.llamada__mitad--azul { border-top: 2px solid #000; }
@media (min-width: 760px) {
  .llamada__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .llamada__mitad--azul { border-top: 0; border-left: 2px solid #000; }
}

/* Encabezados de sección */
.encabezado { max-width: 46rem; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.encabezado h2, .titulo-seccion { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.5rem); line-height: 1.08; }
.encabezado p { margin-top: 1.1rem; font-size: 1.12rem; }
.destacado { font-weight: 600; font-size: 1.15rem; }
.destacado--sep, .texto-sep { margin-top: 1.1rem; }
.destacado--grande { font-size: 1.28rem; line-height: 1.55; max-width: 40rem; }
.datos--sep { margin-top: 1.4rem; }
.titulo-seccion--sep { margin-bottom: 1.4rem; }
.seccion--sin-arriba { padding-top: 0; }

/* Cartel de servicios: una señal informativa con una flecha por destino */
.servicios-portada { display: grid; gap: 2.2rem; }
@media (min-width: 960px) { .servicios-portada { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } }
.cartel__lista { list-style: none; }
.cartel__lista li + li { border-top: 2px solid rgba(255, 255, 255, .6); }
.cartel__lista a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.25rem .85rem; color: #fff; font: 700 clamp(1.3rem, 1rem + 1.45vw, 2.05rem)/1.12 var(--titulos); letter-spacing: .025em; text-transform: uppercase; }
.cartel__lista a:hover, .cartel__lista a:focus-visible { background: #0172b0; color: #fff; }
.cartel__flecha { flex: none; width: 1.45em; height: 1.45em; transition: transform .15s; }
.cartel__lista a:hover .cartel__flecha { transform: translateX(.3rem); }
.cartel__pie { margin: 0; padding: .8rem 1.25rem; border-top: 2px solid rgba(255, 255, 255, .6); background: #0172b0; color: #fff; font: 700 1.2rem/1.2 var(--titulos); letter-spacing: .06em; text-transform: uppercase; }
.cartel__pie a { color: #fff; }

/* Banda oscura con la frase de la familia */
.banda { background: var(--carbon); color: #fff; padding-block: clamp(2.6rem, 6vw, 5rem); }
.banda .contenedor { display: grid; gap: 1.2rem; }
.banda__texto { margin: 0; max-width: 32ch; font: 600 clamp(1.7rem, 1.1rem + 2.5vw, 3.1rem)/1.2 var(--titulos); letter-spacing: .01em; text-transform: uppercase; }
.banda__texto em { font-style: normal; color: var(--azul-claro); }

/* Compromiso de calidad */
.compromiso-portada { display: grid; gap: 2rem; }
@media (min-width: 960px) { .compromiso-portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } }
.foto { position: relative; margin: 0; overflow: hidden; border-radius: 10px; background: #dbe3e8; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto--3-2 { aspect-ratio: 3 / 2; }
.foto--4-3 { aspect-ratio: 4 / 3; }
.foto--5-4 { aspect-ratio: 5 / 4; }
.foto--1-1 { aspect-ratio: 1 / 1; }
.garantia { margin-block: 1.4rem 1.6rem; }
.garantia .placa__interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.garantia__mitad { margin: 0; padding: 1rem 1.1rem 1.05rem; }
.garantia__mitad--azul { background: var(--azul); color: #fff; border-left: 2px solid #000; }
.garantia__cifra { display: block; font: 700 clamp(2.2rem, 1.2rem + 2.9vw, 3.4rem)/1 var(--titulos); letter-spacing: .02em; text-transform: uppercase; }
.garantia__mitad--blanca .garantia__cifra { color: var(--carbon); }
.garantia__texto { display: block; margin-top: .45rem; font: 700 clamp(1.17rem, 1rem + .5vw, 1.3rem)/1.25 var(--titulos); letter-spacing: .05em; text-transform: uppercase; }
.garantia__mitad--blanca .garantia__texto { color: var(--azul-texto); }
@media (max-width: 479px) { .garantia .placa__interior { grid-template-columns: minmax(0, 1fr); } .garantia__mitad--azul { border-left: 0; border-top: 2px solid #000; } }

/* ---------- Páginas interiores ---------- */
.titulo-pagina { background: var(--azul); border-bottom: 3px solid #000; padding: clamp(1rem, 2.5vw, 1.6rem) 0; }
.titulo-pagina__marco { border: 3px solid #fff; border-radius: 14px; padding: clamp(1.4rem, 3.5vw, 2.6rem) clamp(1.1rem, 3vw, 2.4rem); }
.titulo-pagina h1 { color: #fff; font-size: clamp(2.2rem, 1.1rem + 4.6vw, 4.6rem); line-height: 1.08; letter-spacing: .008em; }
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: 0 0 .9rem; padding: 0; list-style: none; font: 700 1.2rem/1.3 var(--titulos); letter-spacing: .08em; text-transform: uppercase; }
.miga li + li::before { content: "/"; margin-right: .55rem; color: #fff; }
.miga a { color: #fff; font-weight: 700; }
.miga a:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.miga [aria-current] { padding: .08rem .6rem 0; background: #fff; color: var(--azul-texto); border-radius: 3px; }
.entrada { padding-block: clamp(1.8rem, 4vw, 3rem) 0; }
.entrada p { max-width: 52rem; margin: 0; font-size: 1.22rem; font-weight: 600; line-height: 1.55; }

/* Servicios: una fila por servicio, con su foto, separadas por una raya negra */
.servicio { display: grid; gap: 1.4rem; padding-block: clamp(2rem, 4.5vw, 3.6rem); border-top: 2px solid var(--carbon); }
.servicio:first-child { border-top: 0; }
.servicio__foto { margin: 0; }
.servicio__n { margin: 0 0 .5rem; font: 700 clamp(2.8rem, 2rem + 3vw, 4.4rem)/1 var(--titulos); color: var(--azul); }
.servicio h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.1; margin-bottom: 1rem; }
.servicio p { max-width: 38rem; }
@media (min-width: 900px) {
  .servicio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .servicio:nth-child(even) .servicio__foto { order: 2; }
}

/* Compromiso: cuatro compromisos numerados */
.compromisos { display: grid; gap: 1rem; list-style: none; counter-reset: compromiso; }
.compromisos li { counter-increment: compromiso; padding: 1.5rem 1.4rem 1.2rem; background: #fff; border: 2px solid var(--carbon); border-radius: 12px; }
.compromisos li::before { content: "0" counter(compromiso); display: block; margin-bottom: .5rem; font: 700 3.4rem/1 var(--titulos); color: var(--azul); }
.compromisos h2, .compromisos h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: .7rem; }
.compromisos p { margin: 0; }
@media (min-width: 760px) { .compromisos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }

/* Marcas */
.marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; }
.marcas li { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: .5rem; background: #fff; border: 2px solid var(--linea); border-radius: 10px; }
.marcas img { display: block; max-width: 100%; height: auto; aspect-ratio: 150 / 113; }
.marcas__nota { aspect-ratio: auto !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 1rem !important; background: var(--suave) !important; border-style: dashed !important; color: var(--gris); font-size: .92rem; line-height: 1.5; }
@media (min-width: 640px) { .marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .marcas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.marcas--portada { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 640px) { .marcas--portada { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .marcas--portada { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Localización y contacto */
.contacto { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contacto { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } }
.datos { display: grid; gap: 1.1rem; }
.dato { padding: 1rem 1.15rem; background: #fff; border: 2px solid var(--carbon); border-radius: 10px; }
.dato__titulo { margin: 0 0 .25rem; font: 600 .95rem/1.2 var(--titulos); letter-spacing: .12em; text-transform: uppercase; color: var(--azul-texto); }
.dato__valor { margin: 0; font-size: 1.08rem; }
.dato__tel { margin: 0; font: 700 2.1rem/1.1 var(--titulos); letter-spacing: .03em; }
.dato__tel a { color: var(--carbon); font-weight: 700; }
.dato__tel a:hover { color: var(--azul-texto); }
.dato--urgencias { background: var(--azul); border-color: #000; }
.dato--urgencias .dato__titulo { color: #fff; font-size: 1.2rem; font-weight: 700; }
.dato--urgencias .dato__tel a { color: #fff; }
.dato--urgencias .dato__tel a:hover { color: #fff; }
.mapa { margin: 0; }
.mapa__marco { position: relative; overflow: hidden; border: 3px solid #000; border-radius: 10px; background: #f1f5f8; }
.mapa__enlace { position: absolute; inset: 0; z-index: 2; }
.mapa__credito { position: absolute; z-index: 3; right: 0; bottom: 0; padding: .5rem .7rem; background: rgba(255, 255, 255, .9); color: var(--gris); font: 400 .72rem/1.3 var(--texto); }
.mapa__credito:hover { color: var(--azul-texto); }
.mapa__acciones { margin: 1rem 0 0; }
.plano { display: block; width: 100%; height: auto; }
.plano__parque, .plano__plaza { fill: #e2ebf0; }
.plano__agua { fill: #b5dcf2; }
.plano__rio { fill: none; stroke: #b5dcf2; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.plano__acequia { fill: none; stroke: #b5dcf2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.plano__calle { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.plano__calle--peatonal { stroke: #f8fafb; stroke-width: 4; }
.plano__calle--principal { stroke: #fff; stroke-width: 12; }
.plano text { paint-order: stroke; stroke: #f1f5f8; stroke-width: 5px; stroke-linejoin: round; }
.plano__rotulo { fill: #6a6967; font: 600 21px var(--texto); }
.plano__pin-borde { fill: #000; }
.plano__pin-blanco { fill: #fff; }
.plano__pin-azul { fill: #0188cf; }
.plano .plano__pin-g { fill: #373635; stroke: none; font: 700 24px var(--titulos); }
.plano .plano__pin-f { fill: #fff; stroke: none; font: 700 24px var(--titulos); }
.plano__guia { fill: none; stroke: #000; stroke-width: 2; }
.plano__etiqueta { fill: #fff; stroke: #000; stroke-width: 3; }
.plano .plano__nombre { fill: #373635; stroke: none; font: 700 30px var(--titulos); text-transform: uppercase; letter-spacing: .02em; }
.plano .plano__dato { fill: #0072b1; stroke: none; font: 600 24px var(--texto); }
.plano__escala path, .plano__norte path { fill: none; stroke: #373635; stroke-width: 2; }
.plano__escala text, .plano__norte text { fill: #373635; font: 600 18px var(--texto); }
/* Teléfono: el plano se ve ampliado y recortado en un cuadrado centrado en el marcador y su etiqueta; los rótulos de las calles se esconden */
@media (max-width: 759px) {
  .mapa__marco { aspect-ratio: 1 / 1; }
  .mapa__marco .plano { width: 205%; max-width: none; margin: -47% 0 0 -82%; }
  .mapa__acciones .boton { width: 100%; }
  .plano__solo-escritorio { display: none; }
}

/* Formulario */
.formulario { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 3px solid #000; border-radius: 14px; }
.formulario h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.1; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo label, .campo legend { font: 600 .95rem/1.3 var(--texto); padding: 0; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 3.2rem; padding: .7rem .85rem; font: 400 1.05rem/1.4 var(--texto); color: var(--carbon); background: #fff; border: 2px solid var(--carbon); border-radius: 6px; }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--azul); outline-offset: 1px; }
.campos-dos { display: grid; gap: 1rem; }
@media (min-width: 640px) { .campos-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacidad-check { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; line-height: 1.45; }
.privacidad-check input { flex: none; width: 1.35rem; height: 1.35rem; margin: .12rem 0 0; accent-color: var(--azul-texto); }
.info-datos { font-size: .82rem; line-height: 1.5; color: var(--gris); }
.info-datos p { margin: 0; }
.formulario .boton { justify-self: start; }
@media (max-width: 759px) { .formulario .boton { justify-self: stretch; } }

/* Llamada final (banda oscura) */
.franja { background: var(--carbon); color: #fff; padding-block: clamp(3rem, 6vw, 5rem); }
.franja__rejilla { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .franja__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } }
.franja h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.1; }
.franja p { margin: 0; font-size: 1.12rem; color: #fff; }
.franja .botones { margin-top: 1.5rem; }

/* ---------- Pie ---------- */
.pie { background: var(--carbon-fuerte); color: #fff; }
.pie a { color: #fff; font-weight: 500; }
.pie a:hover { color: var(--azul-claro); }
.pie__interior { display: grid; gap: 2.2rem; padding-block: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 760px) { .pie__interior { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pie__interior { grid-template-columns: 1.15fr .8fr 1fr 1.1fr; gap: 2.5rem; } }
.pie__logo { display: block; width: 11.5rem; line-height: 0; }
.pie__logo img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 230; }
.pie h2 { margin: 0 0 .9rem; font: 600 1.05rem/1.2 var(--titulos); letter-spacing: .14em; color: var(--azul-claro); }
.pie ul { list-style: none; }
.pie li { margin: 0 0 .45rem; }
.pie p { margin: 0 0 .8rem; color: #e8e8e6; font-size: .98rem; }
.pie em { font-style: normal; font-weight: 600; color: var(--azul-claro); }
.pie__marca p:first-of-type { margin-top: 1rem; }
.pie__tel { font: 700 1.5rem/1.2 var(--titulos); letter-spacing: .04em; }
.pie__base { border-top: 1px solid rgba(255, 255, 255, .22); }
.pie__base-interior { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.2rem; font-size: .88rem; color: #d4d4d1; }
.pie__base p { margin: 0; color: #d4d4d1; font-size: .88rem; }

/* ---------- Páginas legales, gracias y 404 ---------- */
.legal { max-width: 52rem; padding-block: clamp(2.2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.legal h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height: 1.1; margin-bottom: 1.5rem; }
.legal h2 { margin: 2.2rem 0 .8rem; font-size: 1.55rem; line-height: 1.15; }
.legal ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.legal li { margin-bottom: .5rem; }
.legal__borrador { margin: 0 0 1.8rem; padding: .9rem 1.1rem; background: var(--azul-suave); border: 2px solid var(--carbon); border-radius: 8px; font-weight: 600; }
.ficha-legal { display: grid; gap: .1rem; margin: 0 0 1.2rem; border: 2px solid var(--linea); border-radius: 10px; overflow: hidden; }
.ficha-legal div { display: grid; gap: .1rem .8rem; padding: .7rem 1rem; }
.ficha-legal div:nth-child(odd) { background: var(--suave); }
.ficha-legal dt { font-weight: 600; }
.ficha-legal dd { margin: 0; }
@media (min-width: 640px) { .ficha-legal div { grid-template-columns: 12rem minmax(0, 1fr); } }