/* ============================================================
   DYRECO · Dirección C — NAVE
   p-contacto.css — lo que es SOLO de Contacto (contacto.html)
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. El vocabulario (botones, filetes,
   kicker, .media, .campo, .faq__item, .cont, retícula de 12) es el
   compartido; aquí solo vive la COMPOSICIÓN de esta página y las dos
   piezas que son suyas: la COMPUERTA de sección y el esquema de mapa.

   La página es la MÁS BAJA del sitio a propósito: tres bloques y pie.
   Por eso ninguna sección usa --sec-y (96-176 px) entero: se declara
   un ritmo propio, más corto, y se declara aquí para que se lea como
   decisión y no como descuido.
   ============================================================ */

:root {
  /* H1 de esta página. El de la Home llega a 7rem porque es un cartel a
     100dvh; aquí el titular comparte pantalla con un formulario y tiene que
     dejarle sitio: queda entre el H1 del hero y el H2 de sección. */
  --fs-h1-cnt: clamp(2.05rem, 3.6vw, 3.5rem);
  /* Teléfono de las vías directas: es la conversión de esta página, así que
     tiene cuerpo propio y no toma prestado el del pie. */
  --fs-tel-via: clamp(2rem, 3.3vw, 3rem);
  /* Ritmo vertical propio: más corto que --sec-y en todas las secciones. */
  --cnt-sec: clamp(56px, 6.4vw, 104px);
}


/* La zona de toque del pie del menú móvil (.panel__tel / .panel__mail) ya NO
   se parchea aquí: vive donde le toca, en el componente compartido
   (estilos.css § 05 · .panel__pie). */


/* ============================================================
   1 · TABLERO DIRECTO — la pantalla útil
   ------------------------------------------------------------
   Dos bandas fijas: vías directas a la izquierda, formulario a la
   derecha, foto de la tienda al fondo con scrim rasante. Sin hero,
   sin carrusel y sin pin: la página se lee de una pantalla.

   Nota sobre la cabecera: main.js la vuelve sólida cuando no encuentra
   `.hero` en el documento, y aquí no lo hay a propósito. Es lo correcto
   en una página de trabajo — el menú se lee siempre —, y por eso el
   panel reserva el alto de la cabecera en su padding superior.
   ============================================================ */

.pnl {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--alto-cab) + clamp(26px, 3.4vw, 56px)) clamp(36px, 4.4vw, 72px);
}

.pnl__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pnl__media { position: absolute; inset: 0; border-radius: 0; }
.pnl__media img { object-position: 50% 44%; }
/* Scrim rasante, no velo plano: fuerte donde se apoya el texto (izquierda y
   bordes) y flojo en la franja central-derecha, que es donde se reconoce la
   fachada y el rótulo amarillo. */
.pnl__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,14,16,.94) 0%, rgba(14,14,16,.86) 32%, rgba(14,14,16,.52) 62%, rgba(14,14,16,.44) 100%),
    linear-gradient(180deg, rgba(14,14,16,.78) 0%, rgba(14,14,16,.18) 32%, rgba(14,14,16,.30) 66%, rgba(14,14,16,.88) 100%);
}

.pnl__rej {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(28px, 3.6vw, 72px);
  align-items: center;
}
.pnl__izq  { grid-column: 1 / span 5; }
.pnl__form { grid-column: 7 / span 6; }

.pnl__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h1-cnt);
  line-height: .94;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  /* LA MEDIDA, no el texto: a 17ch el titular caía en 3 líneas y la tercera se
     quedaba con UNA palabra (viuda) en las 14 ventanas de escritorio de la
     matriz — reconstruidas línea a línea con Range.getBoundingClientRect().
     `text-wrap: balance` ya estaba puesto y era parte del problema: balance
     minimiza la línea MÁS LARGA, y con esta medida el reparto que menos ancho
     máximo gasta es justo 2/3/1. Probadas siete variantes sobre las 30 ventanas
     de la matriz: `text-wrap: pretty` empeora (viuda en las 30, reparte 3/2/1),
     13ch también, y 20ch deja 3/3 —dos líneas, tres palabras cada una— en 29 y
     2/2/2 a 320×568, sin desbordar la columna en ninguna. Cero palabras solas en
     las 30. 22ch daba lo mismo; se queda el menor de los dos, que es el que
     menos se aleja de la medida original.
     ⚠️ El copy es Lorem: al entrar el texto real hay que volver a pasar la sonda
     de viudas. Lo que queda validado es la medida, no la palabra. */
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: var(--sombra-texto);
  margin-bottom: var(--pieza);
}
.pnl__entrada {
  color: rgba(242,242,240,.88);
  max-width: 44ch;
  text-shadow: 0 2px 26px rgba(0,0,0,.85);
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

/* --- 1.1 · Vías directas --------------------------------------
   Teléfono a cuerpo de rótulo y en amarillo; el correo, un escalón por
   debajo. Los dos con tel:/mailto: reales — es lo que viene a buscar
   quien abre esta página con prisa. */

.vias {
  display: grid;
  justify-items: start;
  border-top: 1px solid rgba(255,255,255,.20);
  padding-top: clamp(14px, 1.6vw, 22px);
}
/* Correo por división (11-sep-2026): cuatro buzones en vez de info@. Cada
   enlace conserva la diana de 44 px; la etiqueta de quién atiende va al lado
   y baja de línea si no cabe. */
.vias__correos { display: grid; justify-items: start; }
.vias__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vias__item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.vias__lista .vias__mail { margin-top: 0; padding-block: 0; }
.vias__quien {
  font-size: var(--fs-sm);
  color: var(--apagado);
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.vias__et {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 6px;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.vias__tel {
  display: inline-block;
  padding-block: 4px 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-tel-via);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--amarillo);
  text-shadow: 0 2px 28px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.8);
  transition: color var(--dur-ui) var(--ease);
}
.vias__tel:hover { color: #fff; }
.vias__mail {
  display: inline-block;
  margin-top: 10px;
  padding-block: 10px 4px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  letter-spacing: .03em;
  color: var(--texto);
  text-shadow: 0 1px 16px rgba(0,0,0,.9);
}

.pnl__nota {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(242,242,240,.82);
  max-width: 42ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
}
/* Enlace inline dentro de un párrafo: se le da alto de toque con padding
   vertical y se compensa con margen negativo para no abrir la línea. El
   subrayado que se dibuja sigue pegado al texto porque el fondo se origina
   en la caja de CONTENIDO, no en la de relleno.

   A 390 px este enlace medía 119×43: fallaba la zona de toque de 44 por UN
   píxel (micro a 1,6 de interlínea son 19,2 px + 2×12 de relleno = 43,2). Sube
   a 13 px de relleno —y 13 de margen negativo, para que la línea legal no se
   abra— y queda en 45,2. */
.pnl__nota a,
.form__legal a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
  background-origin: content-box;
}
/* El subrayado en reposo («un enlace que solo se ve al pasar por encima no
   existe para quien no pasa por encima») ya no se parchea aquí: lo trae
   `.enlace-sub` de serie desde `estilos.css` §26, con sus dos capas. Este
   bloque solo pone el área táctil. */

.atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(18px, 2vw, 26px);
}
.atajos a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(14,14,16,.52);
  font-family: var(--display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242,242,240,.90);
  transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.atajos a:hover { border-color: var(--amarillo); color: var(--amarillo); background: rgba(14,14,16,.78); }
.atajos__n { font-size: .625rem; letter-spacing: .18em; color: var(--amarillo); }


/* --- 1.2 · Formulario corto -----------------------------------
   Tarjeta sólida sobre la foto (nada de vidrio: aquí se escribe, y un
   campo sobre una fachada no se lee). Los campos usan el vocabulario
   compartido .campo/.campo__i/.campo__l de estilos.css §26, con el
   fondo un escalón más oscuro que la tarjeta para que se distingan. */

.form {
  background: var(--sup);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--amarillo);
  border-radius: var(--radio);
  padding: clamp(22px, 2.4vw, 38px);
  box-shadow: 0 30px 84px rgba(0,0,0,.58);
}
.form__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form__p {
  font-size: var(--fs-sm);
  line-height: 1.56;
  color: var(--apagado);
  margin-bottom: clamp(18px, 1.9vw, 26px);
}

.form__rej {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.campo--ancho, .campo--sel { grid-column: 1 / -1; }

.form .campo__i { background: var(--fondo); }
.form .campo__i:focus { background: var(--sup-2); }
.form .campo__area { min-height: 112px; }

/* Select: el estado flotante de la etiqueta es permanente (un <select>
   siempre tiene valor, así que :placeholder-shown no sirve) y la flecha se
   dibuja con un pseudo para no pelearse con el `background` del campo.
   ⚠️ PENDIENTE (no es de esta hoja, no se puede cerrar desde aquí): `campo--sel`
   está escrito también en p-presupuesto.css con el MISMO significado y casi la
   misma implementación — o sea duplicación, no colisión, y por eso no se
   renombra: hay que UNIFICARLO en estilos.css §26 con el resto de `.campo*`. Ya
   ha derivado: aquí el chevron va a `translateY(-72%)` y allí a `-70%`, y el
   `:focus-within` en amarillo de abajo solo existe aquí. Al subirlo, quedarse
   con un solo valor de translateY y con este `:focus-within`. */
.campo__sel {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
}
.campo--sel .campo__l {
  transform: translateY(-13px) scale(.8);
  color: var(--apagado);
}
.campo--sel:focus-within .campo__l { color: var(--amarillo); }
.campo--sel::before {
  content: "";
  position: absolute; right: 20px; top: 50%; z-index: 1;
  width: 9px; height: 9px;
  border-right: 2px solid var(--amarillo);
  border-bottom: 2px solid var(--amarillo);
  transform: translateY(-72%) rotate(45deg);
  pointer-events: none;
}

.form__legal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 10px;
  margin-top: clamp(16px, 1.8vw, 24px);
}
/* Casilla: el <input> real mide 44×44 (zona de toque) y la caja visible de
   22 px la dibuja el pseudo. Los márgenes negativos devuelven el hueco. */
.form__check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px; height: 44px;
  margin: -11px 0 -11px -11px;
  background: none;
  border: 0;
  cursor: pointer;
}
.form__check::before {
  content: "";
  position: absolute; left: 11px; top: 11px;
  width: 22px; height: 22px;
  border: 1px solid var(--linea-alta);
  border-radius: 2px;
  background: var(--fondo);
  transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.form__check:hover::before { border-color: var(--amarillo); }
.form__check:checked::before { background: var(--amarillo); border-color: var(--amarillo); }
.form__check:checked::after {
  content: "";
  position: absolute; left: 19px; top: 15px;
  width: 6px; height: 12px;
  border-right: 2px solid var(--sobre-amarillo);
  border-bottom: 2px solid var(--sobre-amarillo);
  transform: rotate(45deg);
}
.form__legal label {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--apagado);
  padding-top: 2px;
  /* Sin tope se comía los 540 px de la columna del formulario y daba 75
     caracteres por línea a 12 px: la letra legal era el texto MÁS ANCHO de
     la página, justo el que menos se lee. Peldaño de 12-13 px. */
  max-width: var(--medida-xs);
}
.form__legal .campo__error { grid-column: 2; }
.form__legal.campo--error label { color: #FF6B6B; }
.form__legal.campo--error .form__check::before { border-color: #FF6B6B; }
/* `.campo__error` se declara `display:block` en estilos.css §26, y eso GANA al
   estilo de agente de usuario del atributo `hidden`: sin esta línea los
   mensajes de error nacen visibles y vacíos, abriendo hueco bajo cada campo.
   ⚠️ PENDIENTE, y no se puede cerrar desde aquí: esta guarda es del COMPONENTE
   (estilos.css §26), no de esta página — la prueba es que p-presupuesto.css la
   escribe otra vez, palabra por palabra, y cualquier página nueva con
   formulario tendrá que escribirla una tercera vez. Su sitio es §26, junto a
   `.campo__error`. Mientras no se suba, esta línea SE QUEDA: borrarla aquí sin
   ponerla allí deja los errores vacíos visibles al cargar. */
.campo__error[hidden] { display: none; }

.form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(18px, 2vw, 26px);
}
.form__aviso {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.form__aviso.es-error { color: #FF6B6B; }
.form.es-enviado .form__rej,
.form.es-enviado .form__legal { opacity: .34; pointer-events: none; }
.form.es-enviado .btn { opacity: .34; pointer-events: none; }


/* ⚠️ LA COMPUERTA SE RETIRA (8-sep-2026). Aquí vivían `.sec--compuerta-contacto`
   y `.compuerta-contacto` con sus dos capas —`__luz` amarilla y `__fondo`
   oscura, las dos con el mismo corte diagonal y desfasadas 3 px— y sus estados
   de entrada. El cliente devolvió las dos cosas que producía: el destello
   amarillo al pasar el hero (la capa de luz asomando esos 3 px mientras la
   persiana sube) y la diagonal del final de la página, que era su canto en
   reposo. La sección usa ahora `sec-cota`, la transición compartida. */


/* ============================================================
   3 · MOSTRADOR — 3 tiendas + esquema + dudas
   ------------------------------------------------------------
   Una FILA por tienda, no tres tarjetas: el tablero de un mostrador.
   A la izquierda el esquema de situación (SVG propio, cero peticiones)
   y una foto; a la derecha las tres filas, cada una con su dirección,
   sus dos horarios, su teléfono y el estado de apertura.

   ⚠️ SE LLAMABA `most` / `most__*`, y ese nombre está COGIDO también por
   p-ferreteria.css (estilos.css §29-I lo tiene fichado) con otro juego de
   hijos entero — `__cont/__texto/__tel/__items` allí, `__mapa/__lista/__rej`
   aquí — y, lo que de verdad quema, con el MISMO hijo `most__foto` y valores
   distintos: `aspect-ratio:21/9` aquí, `grid-column:1/span 7; aspect-ratio:16/10`
   allí. Hoy no chocan porque cada una vive en su hoja; el día que una de las
   dos se comparta, la que cargue después gana y la otra se desmaqueta en
   silencio. Se renombra según la regla de §29 — la página va dentro del nombre —
   y ya no lo puede reclamar nadie: `most-contacto`. Renombrado a la vez en
   p-contacto.css y en contacto.html; p-contacto.js no lo tocaba.
   Ojo: la lista de nombres cogidos de estilos.css §29-I sigue diciendo
   «most, most__foto  contacto · ferretería» — es un fichero compartido y no se
   toca desde aquí; que lo actualice quien pase por §29.
   `tda` NO se renombra: lo cita la hoja de impresión compartida (§28,
   `break-inside: avoid`) y renombrarlo partiría las tres tiendas entre dos A4.
   ============================================================ */

/* Sin compuerta ya no hay diagonal que reservar por abajo: el relleno vuelve
   a ser simétrico, que es el ritmo del resto del sitio. */
.most-contacto { padding-block: var(--cnt-sec); }
.most-contacto .cabecera-sec { margin-bottom: clamp(28px, 3vw, 44px); }

/* Los rótulos de sección de ESTA página bajan un punto de cuerpo. No es un
   descuido: aquí el H2 no es un cartel, es el encabezado de un tablero de
   trabajo, y a 4,15rem se comía él solo 190 px de una página cuya gracia es
   caber. Sigue siendo la misma condensada, el mismo peso y el mismo borde. */
.most-contacto .h2,
.franja .h2 { font-size: clamp(1.85rem, 3.2vw, 3.35rem); max-width: 22ch; }

.most-contacto__rej {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(30px, 3.2vw, 44px) var(--gap);
  align-items: start;
}
.most-contacto__mapa  { grid-column: 1 / span 5; display: grid; gap: var(--gap-s); }
.most-contacto__lista { grid-column: 7 / span 6; }

/* --- 3.1 · Esquema de situación (marcador de posición) --------
   NO es un mapa incrustado: es un plano abstracto dibujado en SVG en
   línea. Cero peticiones de red, y en producción se sustituye por el
   mapa real sin tocar nada más que este bloque. */

.mapa {
  position: relative;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio);
  overflow: hidden;
}
.mapa__svg { display: block; width: 100%; height: auto; }
.mapa__trama path { fill: none; stroke: var(--linea); stroke-width: 1; }
.mapa__vias  path { fill: none; stroke: var(--linea-alta); stroke-width: 7; stroke-linecap: square; }
.mapa__diagonal { fill: var(--am-04); }
.mapa__halo {
  fill: rgba(255,237,0,.10);
  stroke: rgba(255,237,0,.30);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 520ms var(--ease-suave), fill 520ms var(--ease);
}
.mapa__punto { fill: var(--amarillo); }
.mapa__num {
  font-family: var(--display); font-weight: 700;
  font-size: 23px; letter-spacing: .12em;
  fill: var(--texto);
}
.mapa__zona {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: .2em;
  fill: var(--apagado);
}
.mapa__pin.is-luz .mapa__halo { transform: scale(1.28); fill: rgba(255,237,0,.22); }
.mapa__nota {
  padding: 10px 14px;
  border-top: 1px solid var(--linea);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--apagado);
}
.most-contacto__foto { aspect-ratio: 21 / 9; }

/* --- 3.2 · Las filas de tienda -------------------------------- */

.tda {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(12px, 1.6vw, 28px);
  padding-block: clamp(18px, 1.9vw, 26px);
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cab) + 28px);
  transition: border-color 620ms var(--ease);
}
.tda:last-child { border-bottom: 1px solid var(--linea); }
/* El filete amarillo arranca corto y se completa al pasar por encima o al
   iluminar la fila desde su chincheta del mapa. */
.tda::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 56px; height: 2px;
  background: var(--amarillo);
  transform: skewX(-30deg);
  transform-origin: left;
  transition: width 620ms var(--ease-suave);
}
.tda:hover::before,
.tda.is-luz::before { width: 100%; }

.tda__n {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
  margin-bottom: 10px;
}
.tda__t {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* Las divisiones de cada tienda son ENLACES a su página: el argumento de
   "todo desde un mismo proveedor" se sostiene con enlazado. */
.tda__div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: .14em;
  text-transform: uppercase;
}
.tda__div a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--amarillo);
  box-shadow: inset 0 -1px 0 rgba(255,237,0,0);
  transition: box-shadow var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.tda__div a:hover { box-shadow: inset 0 -1px 0 var(--amarillo); }
.tda__div span { color: var(--linea-alta); }

.tda__dir {
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--apagado);
  margin-bottom: 12px;
}
.tda__h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.tda__h dt {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding-top: 4px;
}
.tda__h dd { margin: 0; color: var(--texto); }
.tda__h dd + dt + dd { color: var(--apagado); }

.tda__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
}
.tda__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display); font-weight: 700;
  font-size: 1.25rem; letter-spacing: .04em;
  transition: color var(--dur-ui) var(--ease);
}
.tda__tel:hover { color: var(--amarillo); }

/* Estado de apertura: lo calcula p-contacto.js con el horario REAL de cada
   tienda (y con el de verano entre el 1 de julio y el 31 de agosto). Nace
   `hidden`: sin JS no se enseña una etiqueta que nadie ha comprobado. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}
.estado::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--apagado);
  flex: none;
}
/* …y `hidden` tiene que GANAR. `display:inline-flex` es más específico que el
   `[hidden]{display:none}` de la hoja del navegador, así que sin esta línea la
   cápsula nacía visible: sin JS quedaban tres manchas grises vacías con un
   punto dentro (el `::before`), una al lado de cada teléfono. Es el mismo caso
   que ya estaba resuelto arriba para `.campo__error`. */
.estado[hidden] { display: none; }

.estado--abierto { color: var(--texto); border-color: rgba(255,237,0,.30); }
.estado--abierto::before { background: var(--amarillo); box-shadow: 0 0 0 4px var(--am-10); }

/* --- 3.3 · Tres dudas de mostrador ---------------------------- */

.cfaq {
  margin-top: clamp(28px, 2.8vw, 44px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px) var(--gap);
  align-items: start;
}
.cfaq__cab { grid-column: 1 / span 5; }
.cfaq__t {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.14;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}
.cfaq__lista { grid-column: 7 / span 6; }
.cfaq .faq__p {
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
  padding: 16px 46px 16px 0;
}
.cfaq .faq__r { padding: 0 46px 18px 0; }
.cfaq .faq__r p { font-size: var(--fs-sm); line-height: 1.62; }


/* ============================================================
   4 · FRANJA — un solo proveedor, con parallax de dos capas
   ------------------------------------------------------------
   El fondo va lento y hacia un lado (data-parallax="0.12") y el
   contenido rápido y hacia el otro (data-parallax="-0.05").
   ============================================================ */

.franja {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 44dvh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--cnt-sec) * .82);
  border-top: 1px solid var(--linea);
}
.franja__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* La furgoneta ya es una foto oscura: el scrim se queda en lo justo para que
   el rótulo pase AA y la nave siga reconociéndose por detrás. */
.franja__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,14,16,.92) 0%, rgba(14,14,16,.80) 42%, rgba(14,14,16,.54) 100%),
    linear-gradient(180deg, rgba(14,14,16,.62) 0%, rgba(14,14,16,.20) 40%, rgba(14,14,16,.80) 100%);
}
.franja__cont {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) var(--gap);
  align-items: end;
}
.franja__txt { grid-column: 1 / span 5; }
.franja__p {
  color: rgba(242,242,240,.90);
  max-width: 42ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.9);
  margin-top: var(--pieza);
}
.franja .h2 { text-shadow: 0 2px 34px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.5); }

.franja__divs {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 40px);
}
.franja__divs a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 58px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.20);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 18px rgba(0,0,0,.85);
  transition: color var(--dur-ui) var(--ease), padding-left 420ms var(--ease);
}
.franja__divs a:hover { color: var(--amarillo); padding-left: 6px; }
.franja__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.franja__f {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; background: var(--amarillo);
  transform: scaleX(0) skewX(-30deg);
  transform-origin: left;
  transition: transform 620ms var(--ease-suave);
}
.franja__divs a:hover .franja__f { transform: scaleX(1) skewX(-30deg); }

.franja__cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ============================================================
   5 · ANCHOS
   ============================================================ */

/* El formulario pierde su segunda columna antes que el panel su segunda
   banda: dos campos de 180 px no son un formulario. */
@media (max-width: 1180px) {
  .form__rej { grid-template-columns: 1fr; }
  .pnl__izq  { grid-column: 1 / span 5; }
  .pnl__form { grid-column: 6 / span 7; }
}

@media (max-width: 1080px) {
  /* El panel se apila. La foto deja de ser el fondo de toda la sección y
     pasa a ser una BANDA superior: si no, en una columna de 1.400 px de alto
     la fachada se recorta hasta no reconocerse y se paga en peso. */
  .pnl {
    min-height: 0;
    align-items: start;
    padding-block: calc(var(--alto-cab) + clamp(24px, 4vw, 44px)) var(--cnt-sec);
  }
  .pnl__fondo { inset: 0 0 auto 0; height: min(58dvh, 520px); }
  .pnl__scrim {
    background: linear-gradient(180deg,
      rgba(14,14,16,.82) 0%, rgba(14,14,16,.44) 38%, rgba(14,14,16,.86) 78%, rgba(14,14,16,1) 100%);
  }
  /* Apilado ya no hace falta la retícula de 12 — las dos bandas van a `1 / -1` —
     y MANTENERLA cuesta un desborde real: `.pnl__rej` es un ítem de grid de
     `.pnl` (que es `display:grid`), así que su `min-width:auto` no le deja
     encoger por debajo de su mínimo, y el mínimo de 12 columnas son los ONCE
     huecos de columna. A 320 px eso son 11 × 28 = 308 px de hueco + 48 de
     relleno = 356 px de ancho mínimo en una ventana de 320: el `overflow:clip`
     del panel se comía los 12 px de la derecha del H1, del teléfono, de los
     atajos y del formulario entero (medido a 320×568, la ventana mínima que hay
     que soportar; a 360 y por encima el hueco ya cabe y no pasaba nada).
     Con una sola columna el hueco de columna deja de existir y el de fila,
     que es el que se ve, se queda igual. */
  .pnl__rej { grid-template-columns: minmax(0, 1fr); }
  .pnl__izq, .pnl__form { grid-column: 1 / -1; }
  .form__rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .most-contacto__mapa, .most-contacto__lista { grid-column: 1 / -1; }
  .most-contacto__lista { margin-top: clamp(8px, 1.4vw, 18px); }

  .cfaq__cab, .cfaq__lista { grid-column: 1 / -1; }
  .cfaq__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }

  .franja { min-height: 0; }
  .franja__txt, .franja__divs, .franja__cta { grid-column: 1 / -1; }
}

/* Apilado pero con ancho de tablet: el esquema y la foto se ponen uno al lado
   del otro. A ancho completo el plano pedía 560 px de alto para ser un
   marcador de posición, que es justo lo que esta página no puede gastar. */
@media (max-width: 1080px) and (min-width: 721px) {
  .most-contacto__mapa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    align-items: stretch;
  }
  .most-contacto__foto { aspect-ratio: auto; }
}

@media (max-width: 720px) {
  .form__rej { grid-template-columns: 1fr; }
  .tda { grid-template-columns: 1fr; gap: 14px; }
  .franja__divs { grid-template-columns: 1fr; }
  .most-contacto__foto { aspect-ratio: 3 / 2; }
}

@media (max-width: 480px) {
  /* Los atajos NO se estiran a una línea cada uno: dos por fila caben de sobra
     a 390 px y esta página se juega el alto. (Y el ítem flex es el <li>, no el
     <a>: estirar el enlace no habría hecho nada.) */
  .atajos { gap: 8px 6px; }
  .form__pie .btn { flex: 1 1 100%; }
  .franja__cta .btn { flex: 1 1 100%; }
  .tda__pie { gap: 6px 14px; }
}

/* Ventana baja (portátil recortado, móvil apaisado): el panel no puede
   pedir 100dvh y además reservar cabecera — se queda sin sitio para el
   formulario y lo empuja fuera de cuadro. Aquí manda el contenido. */
@media (max-height: 760px) and (min-width: 1081px) {
  .pnl { min-height: 0; padding-block: calc(var(--alto-cab) + 28px) clamp(32px, 3.4vw, 48px); }
}


/* ============================================================
   6 · SIN JS · PREFERS-REDUCED-MOTION
   ============================================================ */

/* Sin JS no hay estado de apertura (nace hidden) y el formulario hace un GET
   normal:
   la página se ve y se usa entera. Solo se retiran los adornos que mienten. */
html:not(.js) .form__aviso { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mapa__halo { transform: none !important; }
  .media--banda { transform: none !important; }
  .franja__cont { transform: none !important; }
}


/* ============================================================
   REMAQUETADO 7-sep-2026 — este tramo va AL FINAL a propósito:
   sustituye por cascada lo que quedaba arriba de la portada, del
   portón y de la medida de lectura, y trae entero lo nuevo.
   ============================================================ */
/* ============================================================
   PROTOTIPO · contacto2 — DELTA sobre css/p-contacto.css
   ------------------------------------------------------------
   Todo lo de aquí abajo es lo QUE CAMBIA. Se carga después de
   css/p-contacto.css, así que a igualdad de especificidad gana.
   Al trasplantar, este bloque entra en css/p-contacto.css en el
   sitio de cada apartado y se BORRA lo que sustituye (la lista
   exacta de líneas a borrar va en la entrega).

   Nombres nuevos, todos dentro de familias que ya son de esta
   página (§29: una familia reserva sus __elemento y --modificador):
     most-contacto__cierre
     mapa__leyenda · mapa__clave · mapa__lienzo · mapa__cuadro
     mapa__isla · mapa__foco · mapa__detalle
     mapa__det-t · mapa__det-p · mapa__escala · mapa__mini
     mapa__calle · mapa__pie · mapa__fuente · mapa__pin--izq
   ⚠️ PENDIENTE de §29, y no se puede cerrar desde aquí: la familia
   se llama `mapa`, que es corto y genérico en una hoja de PÁGINA —
   justo lo que §29 prohíbe. No se renombra a `mapa-contacto` porque
   `js/p-contacto.js` busca `.mapa__pin` y el renombrado hay que
   hacerlo en los tres ficheros a la vez.
   ============================================================ */

:root{
  /* ANCHO de la caja de la isla. Es el único número que gobierna el tamaño
     del mapa, y va en ANCHO —no en alto— a propósito.
     ⚠️ AQUÍ HABÍA UN FALLO REAL, medido: la caja se dimensionaba por ALTO
     (`height:100%; width:auto; max-width:100%`) y, en cuanto el `max-width`
     entraba en juego, el navegador recorta el ancho pero NO recalcula el
     alto: la caja se quedaba en 915×860 (razón 1,064) cuando el viewBox es
     1,2195. El SVG se encaja dentro con `meet` y se centra, pero los pines y
     los rótulos —que van en % de la CAJA— no se enteran del apaisado: a 1024
     la chincheta 03 caía 11,6 px por debajo de su sitio.
     Con el ancho como dimensión definida y `aspect-ratio` derivando el alto,
     la caja mide SIEMPRE 1,2195 y el % es exacto a cualquier ancho.
     El tope de 600 px es el que deja la isla a 90 % del ancho de la tarjeta a
     1920 sin que las filas de tienda pasen de aireadas a vacías. */
  --mapa-ancho: 600px;
  /* Cuadrícula de carta náutica del lienzo. Va en px y a sangre de la
     tarjeta (no dentro del SVG) por dos razones: no escala con la isla —así
     no se convierte en una trama de 2 px en móvil— y llena la tarjeta, que
     es lo que hace que el mar se lea como mar y no como una caja vacía
     alrededor de un dibujo pequeño. */
  --mapa-celda: clamp(30px, 3.2vw, 50px);
}

/* ============================================================
   B · MOSTRADOR — rejilla recompuesta
   ------------------------------------------------------------
   Dos cambios y por qué:
   1) Las dos columnas pasan a ser ADYACENTES (5 + 7). Antes eran
      1/span 5 y 7/span 6: la columna 6 quedaba vacía y a 1920 eso
      son 171 px de calle muerta entre las dos bandas.
   2) `align-items: stretch` + mapa elástico. Medido en la página de
      hoy a 1920: columna izquierda 787,8 px y lista 579,1 → 208,7 px
      de columna muerta DEBAJO de la lista. Ahora la tarjeta del mapa
      vale exactamente lo que mida la lista y la isla se encaja dentro
      (`aspect-ratio` en la caja interior, no en la tarjeta), así que
      el desnivel es cero por construcción, no por ajuste.
   3) La foto de mostrador SALE de la columna izquierda: era ella la
      que hacía la columna 208 px más alta. Cierra la sección a lo
      ancho, que es lo que pide una foto en esta casa.
   ============================================================ */

.most-contacto__rej{ align-items: stretch; }
.most-contacto__mapa { grid-column: 1 / span 5; display: block; }
/* Las tres filas se REPARTEN la altura de la columna en partes iguales. Es
   lo que hace que el desnivel entre las dos bandas sea CERO por construcción
   y no por ajuste: la última línea de la tercera tienda cae exactamente en el
   borde inferior de la tarjeta del mapa, mida lo que mida la ventana. Y de
   paso las tres filas quedan parejas de verdad, no «parecidas». */
.most-contacto__lista{
  grid-column: 6 / span 7;
  display: grid;
  grid-auto-rows: minmax(min-content, 1fr);
}

/* La foto de mostrador, ahora banda de cierre a todo el ancho. */
.most-contacto__cierre{ margin-top: clamp(28px, 3vw, 48px); }
.most-contacto__foto{ aspect-ratio: 3 / 1; }


/* ============================================================
   C · EL MAPA — Mallorca dibujada
   ------------------------------------------------------------
   Silueta real: OpenStreetMap, relación 6803636 (ODbL), 54 nodos,
   viewBox 0 0 1000 820. Los tres portales van geocodificados por
   Cartociudad (IGN) y convertidos con la transformación lineal del
   dosier (_material/mallorca-cartografia.md §2).

   PALETA (la del dosier, y es la que pide el contrato): MAR = carbón
   --fondo, ISLA = --sup-2, filete de 1 px --linea-alta con
   `vector-effect: non-scaling-stroke` para que sea 1 px de verdad a
   cualquier escala. El amarillo, SOLO en los puntos y sus halos.

   EL PUNTO DOBLE — salida elegida: C, punto exacto + detalle a otra
   escala. Las dos tiendas de Palma están a 38,0 m: 0,197 px a 560 px
   de ancho. En la isla van como UN punto exacto (el centroide de los
   dos, a 19 m de cada portal) rotulado «01·02»; los dos portales
   viven en la tira de detalle de abajo, a escala de calle, donde
   1 px = 1 m de verdad y la separación de 38 px es la real.
   Se descarta separarlos a ojo: cualquier separación visible miente
   entre 200 m y 2 km.

   ⚠️ ORDEN DEL DOM. `js/p-contacto.js` (líneas 116-119) empareja
   `pins[k]` con `filas[k]` POR POSICIÓN. Los pines 01 y 02 viven en
   la tira de detalle y el 03 en la isla, así que la tira va ANTES que
   el lienzo en el DOM —y se recoloca con `order`— para que
   `querySelectorAll('.mapa__pin')` siga devolviendo 01·02·03. Cero
   cambios en el JS. Coste: ninguno de foco ni de lectura — nada del
   mapa es enfocable y el minimapa va `aria-hidden`.
   ============================================================ */

.mapa{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--fondo);              /* MAR */
  border: 1px solid var(--linea);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio);
  overflow: hidden;
}

/* --- C.1 · Clave del mapa ------------------------------------
   Los rótulos de zona salen del SVG y suben aquí. En el SVG el cuerpo
   se escalaba con el dibujo y a 390 px caía a 7,2 px: ilegible. Aquí
   son texto HTML con cuerpo en px, así que miden lo mismo a 1920 que
   a 390. */
.mapa__leyenda{
  order: 1;
  display: flex; flex-wrap: wrap;
  gap: 6px clamp(14px, 1.8vw, 28px);
  padding: 11px clamp(12px, 1.3vw, 18px);
  border-bottom: 1px solid var(--linea);
}
.mapa__clave{
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.6875rem, .8vw, .8125rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--apagado);
}
.mapa__clave i{
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amarillo); box-shadow: 0 0 0 4px var(--am-10);
}
.mapa__clave b{ font-weight: 700; letter-spacing: .1em; color: var(--amarillo); }

/* --- C.2 · El lienzo y la caja de la isla --------------------
   `.mapa__lienzo` es elástico; `.mapa__cuadro` es la caja EXACTA del
   viewBox (aspect-ratio 1000/820) encajada dentro. Que el cuadro y el
   viewBox midan lo mismo es lo que permite colocar los pines y los
   rótulos en % y que caigan al píxel donde tocan, sin depender del
   `preserveAspectRatio`. */
.mapa__lienzo{
  order: 2;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.2vw, 18px);
  background-image:
    repeating-linear-gradient(to right,  var(--linea) 0 1px, transparent 1px var(--mapa-celda)),
    repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px var(--mapa-celda));
  background-position: center center;
}
.mapa__cuadro{
  position: relative;
  aspect-ratio: 1000 / 820;
  width: min(100%, var(--mapa-ancho));
  height: auto;
}
.mapa__svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mapa__isla{
  fill: var(--sup-2);
  stroke: var(--linea-alta); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* --- C.3 · Puntos ---------------------------------------------
   Un solo vocabulario para el punto de la isla (`__foco`), los dos del
   detalle y el de Calvià. `__foco` NO es `.mapa__pin` a propósito: si
   lo fuera, el JS lo emparejaría con una fila y habría cuatro pines
   para tres tiendas. */
.mapa__pin,
.mapa__foco{
  position: absolute;
  left: var(--x); top: var(--y);
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
}
.mapa__halo{
  position: absolute; inset: 0; border-radius: 50%;
  background: rgb(var(--am-rgb) / .10);
  border: 1px solid rgb(var(--am-rgb) / .30);
  transition: transform 520ms var(--ease-suave), background 520ms var(--ease);
}
.mapa__punto{
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--amarillo);
}
.mapa__num{
  position: absolute; left: 39px; top: 9px;
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; letter-spacing: .14em;
  color: var(--texto); white-space: nowrap;
  text-shadow: 0 1px 6px rgb(var(--fondo-rgb) / .95), 0 0 12px rgb(var(--fondo-rgb) / .9);
}
.mapa__pin--izq .mapa__num{ left: auto; right: 39px; }
.mapa__pin.is-luz .mapa__halo{ transform: scale(1.34); background: rgb(var(--am-rgb) / .22); }
/* Al iluminar 01 o 02 desde su fila, se enciende también el punto de la
   isla: es el mismo sitio contado a dos escalas. `:has` degrada solo. */
.mapa:has(.mapa__detalle .mapa__pin.is-luz) .mapa__foco .mapa__halo{
  transform: scale(1.34); background: rgb(var(--am-rgb) / .22);
}

/* --- C.4 · La tira de detalle (escala de calle) ---------------
   El suelo del minimapa mide 176 × 104 px FIJOS: por eso 1 px = 1 m exacto a
   cualquier ancho de ventana, la separación de los dos portales son 38,1 px
   de verdad y la barra de escala dice la verdad. Si la caja se hiciera
   elástica, la distancia de 38 m se deformaría con la ventana — que es justo
   lo único que este bloque no se puede permitir. */
.mapa__detalle{
  order: 3;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding: clamp(12px, 1.3vw, 15px) clamp(12px, 1.3vw, 18px);
  border-top: 1px solid var(--linea);
}
/* Filete de marca: el mismo sesgo de -30° de `.tda::before`. La banda
   diagonal del esquema anterior iba a 22,75° y se retira con él. */
.mapa__detalle::before{
  content: ""; position: absolute; left: 0; top: -1px;
  width: 56px; height: 2px; background: var(--amarillo);
  transform: skewX(-30deg); transform-origin: left;
}
.mapa__det-t{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.6875rem, .8vw, .8125rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto);
}
.mapa__det-p{
  margin-top: 6px;
  font-size: var(--fs-micro); line-height: 1.55;
  color: var(--apagado);
  max-width: 46ch;
}
.mapa__escala{
  display: flex; align-items: flex-end; gap: 9px;
  margin-top: 12px;
  font-family: var(--display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--apagado);
}
/* Barra de escala. 51 px de ancho porque los dos «dientes» son los bordes de
   1 px y lo que tiene que medir 50 px es la distancia entre sus EJES, no entre
   sus caras exteriores: con 50 px la barra decía 49 m. Con `box-sizing:
   border-box` (§00) el ancho declarado es el exterior, así que 51 = 0,5 + 50 +
   0,5. No es decorativo: es la escala del minimapa. */
.mapa__escala i{
  display: block; width: 51px; height: 7px;
  border: 1px solid var(--linea-alta); border-top: 0;
}
.mapa__mini{
  position: relative; flex: none;
  /* 178 × 106 con `box-sizing: border-box` y 1 px de filete = 176 × 104 px de
     SUELO. Ese suelo es el que hace que 1 px = 1 m: si se declaran 176 × 104,
     el marco se los come y la separación de los dos portales baja a 37,5 px. */
  width: 178px; height: 106px;
  background: var(--sup-2);
  border: 1px solid var(--linea-alta);
  border-radius: var(--radio);
  overflow: hidden;
}
.mapa__mini-svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 20 px de trazo = 20 m de calzada, a la misma escala que todo lo demás; los
   dos portales caen sobre su BORDE, que es donde está la puerta, no en el eje. */
.mapa__calle{ fill: none; stroke: var(--linea-alta); stroke-width: 20; }

/* --- C.5 · Pie de la tarjeta ---------------------------------
   La nota y la atribución comparten fila y un solo filete a todo el ancho:
   el `border-top` colgaba de la nota, que lleva medida de lectura, y la
   línea se cortaba a 455 px en una tarjeta de 544. */
.mapa__pie{
  order: 4;
  padding: 10px clamp(12px, 1.3vw, 18px) 11px;
  border-top: 1px solid var(--linea);
}
.mapa__nota{
  /* ⚠️ El `border-top` y el `padding` los traía la regla ANTERIOR de
     `.mapa__nota` en p-contacto.css. Con `max-width: 62ch` encima, ese filete
     medía 455 px en una tarjeta de 544 y se cortaba a media caja; y el padding
     lateral la sangraba respecto a la atribución. Al trasplantar, la regla
     vieja desaparece y estas dos líneas sobran. */
  border-top: 0; padding: 0;
  font-size: var(--fs-micro); line-height: 1.5; letter-spacing: .04em;
  color: var(--apagado);
  max-width: 62ch;
}
/* .mapa__fuente retirada el 9-sep-2026: la atribución de OpenStreetMap se
   trasladó al aviso legal §05. */


/* ============================================================
   E · PULIDO DEL FORMULARIO
   ============================================================ */

/* E.1 · El anillo de foco de la casilla se dibujaba a 50×50 alrededor
   de una caja visible de 22×22, porque el <input> real mide 44×44
   (zona de toque). Se apaga en el input y se dibuja en el pseudo que
   SÍ se ve: 22 + 3 de separación. */
.form__check:focus-visible{ outline: none; }
.form__check:focus-visible::before{
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
}

/* E.2 · CSS MUERTO de `campo--sel` — no hay nada que escribir aquí, solo que
   borrar allí. En css/p-contacto.css sobran dos cosas del bloque:
     · `color: var(--apagado)` dentro de `.campo--sel .campo__l` — repite el
       color por defecto de `.campo__l` (estilos.css §26).
     · la regla entera `.campo--sel:focus-within .campo__l { color: var(--amarillo); }`
       — con el select enfocado ya gana `.campo__i:focus + .campo__l` del
       componente compartido, que pone ese mismo amarillo con MÁS
       especificidad (0,3,0 frente a 0,2,0). Comprobado quitándola: no cambia
       un píxel, ni en reposo ni con foco.
   De las cuatro declaraciones del bloque solo hace falta el `transform`: un
   <select> nunca casa `:placeholder-shown`, así que su etiqueta tiene que
   nacer flotada. Ese `transform` SE QUEDA. */

/* ============================================================
   F · ANCHOS
   ============================================================ */

@media (max-width: 1080px){
  /* Apilado: las dos bandas van a `1 / -1` y la tarjeta del mapa deja de
     estirar. La regla de 721-1080 que ponía el esquema y la foto uno al lado
     del otro queda sin efecto: la foto ya no vive en esta columna. */
  .most-contacto__mapa{ grid-column: 1 / -1; display: block; }
  .most-contacto__lista{ grid-column: 1 / -1; grid-auto-rows: auto; }
  .mapa{ height: auto; }
  /* Apilado, la isla llena el ancho de la columna; el tope en `vh` es para la
     ventana baja (móvil apaisado, portátil recortado), donde un mapa de 770 px
     se comería la pantalla entera. Sigue siendo un ANCHO, así que la razón se
     conserva: 70vh × 1,2195 es el ancho que corresponde a 70vh de alto. */
  :root{ --mapa-ancho: calc(70vh * 1.2195); }
}

@media (max-width: 720px){
  .most-contacto__foto{ aspect-ratio: 16 / 9; }
}

@media (max-width: 520px){
  /* Por debajo de aquí no caben el rótulo y el minimapa en la misma línea:
     a 390 la tarjeta mide 342 y 342 − 178 − 20 dejan 144 px para un rótulo
     que mide 175. */
  .mapa__detalle{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .most-contacto__foto{ aspect-ratio: 3 / 2; }
}

@media (max-width: 480px){
  .mapa__leyenda{ gap: 7px 14px; }
}

/* ============================================================
   G · MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .mapa__halo{ transition: none; }
  .mapa .mapa__halo{ transform: none !important; }
}