@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   COPENA CONSTRUCCIONES — 03 · COMPONENTES
   Botones, acordeón, comparador, formulario, fichas y franjas reutilizables.
   Ningún botón es una píldora y ninguna tarjeta flota: esquinas de 2px como
   mucho, y la profundidad viene del contraste, no de la sombra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ BOTONES ════════════════════════════════════════════════════════════ */

/* El relleno AVANZA de izquierda a derecha con un pseudoelemento en scaleX.
   Se hace así, y no cambiando background-color, por dos motivos: scaleX corre
   en el compositor, y sobre todo el botón NO cambia de tamaño ni un píxel, de
   modo que el texto nunca salta. Es lo que pide el §17.                     */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:56px;padding:0 var(--e5);
  border:0;border-radius:2px;cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--oro);color:var(--carbon);
  box-shadow:0 3px 0 var(--oro-linea);
  transition:box-shadow var(--v-medio),color var(--v-medio);
  /* NO se redefine --foco aquí.

     Estaba en `carbón`, y como el anillo se dibuja con outline-offset:3px
     —es decir, POR FUERA del botón— no se pintaba sobre el dorado sino
     sobre el fondo de la sección. Sobre carbón daba 1,02:1 y sobre verde 900
     1,18:1: invisible en los dos CTA principales, el del hero y el del
     cierre. Al no declararlo, hereda el del bloque (base.css), que ya está
     calculado para cada fondo: oro alto en oscuro, tinta en claro.        */
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--oro-alto);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--v-medio) var(--sal);
}
.btn:hover::before,
.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover{box-shadow:0 4px 0 var(--oro-linea)}
.btn:active{box-shadow:0 1px 0 var(--oro-linea)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}

/* Secundario sobre fondo oscuro */
.btn--linea{
  background:transparent;color:var(--blanco);
  border:1.5px solid rgba(250,248,243,.45);box-shadow:none;
  --foco:var(--oro-alto);
}
.btn--linea::before{background:var(--blanco)}
.btn--linea:hover,
.btn--linea:focus-visible{color:var(--carbon);border-color:var(--blanco);box-shadow:none}

/* Secundario sobre fondo claro */
.btn--linea-osc{
  background:transparent;color:var(--tinta);
  border:1.5px solid var(--tinta);box-shadow:none;
  --foco:var(--tinta);
}
.btn--linea-osc::before{background:var(--tinta)}
.btn--linea-osc:hover,
.btn--linea-osc:focus-visible{color:var(--blanco);box-shadow:none}

.btn--pequeno{min-height:var(--toque);font-size:13px;padding-inline:var(--e4)}

.botonera{display:flex;flex-wrap:wrap;gap:var(--e3)}
.botonera .btn{flex:1 1 260px}

/* ═══ CORREDOR DE CONFIANZA ═══════════════════════════════════════════════
   Cinta continua, no <marquee>. El bucle es perfecto porque hay dos pistas
   idénticas y el desplazamiento es exactamente el ancho de una: al llegar
   a -50 % la imagen es idéntica al punto de partida y el salto no existe.

   La animación mueve transform, así que corre en el compositor y no toca el
   hilo principal. Se detiene en cuatro situaciones (ver animacion.css): con
   el cursor encima, con la pestaña oculta, con movimiento reducido y —la
   única que sirve con teclado o en táctil— con el control de pausa de aquí
   abajo, que es el que cumple WCAG 2.2.2.                                  */

.corredor{
  background:var(--carbon);
  border-block:1px solid var(--borde-osc);
  padding:0;
  overflow:hidden;
  /* No se toca touch-action: el dedo tiene que poder desplazar la página
     verticalmente aunque empiece el gesto encima de la cinta. */
}
.corredor__marco{
  display:flex;width:max-content;
  will-change:transform;
}
.corredor__pista{
  display:flex;align-items:center;
  list-style:none;margin:0;padding:0;
  flex:none;
}
.corredor__dato{
  display:flex;align-items:center;gap:var(--e3);
  padding-block:var(--e4);
  font-family:var(--mono);
  font-size:12.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--blanco);
  white-space:nowrap;
}
.corredor__dato--oro{color:var(--oro)}          /* 7,5:1 sobre carbón */

/* ── Control de pausa de la cinta · WCAG 2.2.2 ─────────────────────────────
   Deliberadamente pequeño y en la esquina: es un control de accesibilidad,
   no un elemento de la composición. Usa la misma tipografía técnica que las
   cotas, así que no añade un sexto recurso al sistema visual.

   El checkbox va oculto con .oculto-visual —que conserva el foco, no usa
   display:none— y el anillo de foco se pinta sobre la etiqueta, que es lo
   único visible. Sin esto, tabular hasta el control no se vería.            */
.corredor{position:relative}
.corredor__pausa{
  position:absolute;top:var(--e2);right:var(--e3);z-index:2;
  display:inline-flex;align-items:center;
  min-height:var(--toque);padding:0 var(--e3);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);cursor:pointer;
  /* Fondo OPACO, no translúcido. Con rgba(...,.72) el texto de la cinta se
     leía por debajo del control y los dos se volvían ilegibles justo cuando
     el control estaba en uso. Medido en captura: «PAUSAR EL MOVIMIENTO»
     encima de «CONTENIDO FIRMADO Y FAC…». Es el mismo carbón de la sección,
     así que el borde es lo que lo separa, no el color. */
  background:var(--carbon);
  border:1px solid var(--borde-osc);
}
.corredor__pausa:hover{color:var(--blanco);border-color:var(--oro)}
.corredor__interruptor:focus-visible + .corredor__pausa{
  outline:3px solid var(--oro-alto);outline-offset:2px;color:var(--blanco);
}
.corredor__interruptor:checked + .corredor__pausa{color:var(--oro);border-color:var(--oro)}
/* Espacio duro y no uno normal: el espacio inicial de una cadena de content
   se colapsa al pintar y el separador quedaba pegado a la palabra anterior
   («MOVIMIENTO· EN PAUSA»). */
.corredor__interruptor:checked + .corredor__pausa::after{content:" · en pausa"}

/* Con movimiento reducido no hay animación que pausar: el control sobra y
   ofrecerlo sería mentir sobre lo que hace. */
@media (prefers-reduced-motion:reduce){
  .corredor__pausa,.corredor__interruptor{display:none}
}
.corredor__dato svg{
  flex:none;width:17px;height:17px;
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.8;
}
/* Separador único: un más, en oro, en la misma familia monoespaciada.
   Una sola familia de símbolos en toda la cinta, como pide el encargo. */
.corredor__dato b{
  color:var(--oro-linea);font-weight:400;
  margin-inline:var(--e5) 0;
  padding-left:var(--e5);
}

/* ═══ ACORDEÓN ═══════════════════════════════════════════════════════════
   <details> nativo: funciona sin JavaScript. El indicador es una cruz hecha
   con dos filetes, no un icono.                                            */

.acordeon{border-top:1px solid var(--gris-linea)}
.acordeon details{border-bottom:1px solid var(--gris-linea)}
.acordeon summary{
  cursor:pointer;list-style:none;
  padding:var(--e5) var(--e7) var(--e5) 0;
  position:relative;min-height:var(--toque);
  font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.4vw,25px);line-height:1.06;
  letter-spacing:-.004em;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after,
.acordeon summary::before{
  content:"";position:absolute;right:6px;top:50%;
  background:var(--oro-texto);
  transition:transform var(--v-medio) var(--sal),opacity var(--v-rapido);
}
.acordeon summary::before{width:16px;height:2px;margin-top:-1px}
.acordeon summary::after{width:2px;height:16px;margin-top:-8px;right:13px}
/* El signo GIRA hasta ser un menos, no se desvanece: el §17 pide un signo
   técnico que rote, y ver girar la barra explica el gesto mejor que verla
   desaparecer. La cruz queda como un solo filete horizontal. */
.acordeon details[open] summary::after{transform:rotate(90deg)}
/* Filete lateral que marca la pregunta abierta */
.acordeon details{position:relative}
.acordeon details::before{
  content:"";position:absolute;left:calc(var(--e4) * -1);top:0;bottom:0;
  width:2px;background:var(--oro-linea);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--v-medio) var(--sal);
}
.acordeon details[open]::before{transform:scaleY(1)}
.acordeon .respuesta{padding:0 var(--e7) var(--e5) 0;font-size:16px;color:var(--tinta-2);max-width:72ch}
.acordeon .respuesta p:last-child{margin:0}

/* ═══ COMPARADOR ANTES / DESPUÉS ═════════════════════════════════════════
   El control es un <input type=range> transparente encima: da arrastre,
   toque y flechas de teclado sin escribir nada de eso.
   touch-action:pan-y — con "none", un dedo que empieza sobre el comparador
   no podría hacer scroll vertical de la página. Es una trampa táctil.      */

.comparador{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:var(--verde-900);
  border:1px solid var(--borde-osc);
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.comparador__capa{position:absolute;inset:0}
.comparador__capa img{width:100%;height:100%;object-fit:cover}
/* La cortina arrastrable es el ANTES: se recorta desde la derecha, de modo
   que a la izquierda del tirador siempre esta lo que dice la etiqueta
   izquierda y a la derecha lo que dice la derecha. */
.comparador__cortina{clip-path:inset(0 50% 0 0)}

/* Aviso permanente. NO es un adorno: identifica una imagen que no es una
   fotografía de obra. Va FUERA del comparador, como pie: dentro quedaba al
   fondo de una imagen de 700px de alto y no se leía. Nunca ocultarlo, nunca
   dejarlo solo en hover.                                                    */
.comparador__aviso{
  margin:var(--e3) 0 0;
  border-left:3px solid var(--ladrillo);
  padding:var(--e2) 0 var(--e2) var(--e3);
  font-size:13.5px;line-height:1.45;
  color:var(--gris-claro);
  max-width:56ch;
}
.comparador__aviso b{color:#E8927E;font-weight:600}

.comparador__etiqueta{
  position:absolute;top:var(--e3);z-index:3;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;
}
.comparador__etiqueta--a{left:var(--e3);background:rgba(21,22,19,.82);color:var(--blanco)}
.comparador__etiqueta--d{right:var(--e3);background:var(--oro);color:var(--carbon)}

/* Tirador: línea vertical dorada con una pieza rectangular. Sin círculos. */
.comparador__tirador{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:4;
  background:var(--oro);transform:translateX(-1px);
  box-shadow:0 0 14px rgba(201,162,39,.55);
}
.comparador__tirador::after{
  content:"ANTES ←  → DESPUÉS";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--oro);color:var(--carbon);
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.08em;white-space:nowrap;
  padding:8px 10px;
  box-shadow:0 3px 12px rgba(0,0,0,.45);
}
.comparador input[type=range]{
  position:absolute;inset:auto 0 0 0;z-index:5;
  width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;
  touch-action:pan-y;
}
/* Indicador de foco de teclado.
   ⚠️ NO se puede usar el combinador de hermanos aquí. La versión anterior era
      «input:focus-visible ~ .comparador__tirador::after», y «~» solo alcanza a
      los hermanos que van DESPUÉS. En el HTML el tirador va ANTES del <input>
      (index.html: el span, y luego el input), así que la regla no se aplicaba
      NUNCA: el comparador se tabulaba sin ningún indicador y la cortina se
      movía a ciegas. Medido: outline-style resolvía a «none».

   :has() mira hacia arriba, al contenedor, y por eso no depende del orden.
   Si se reordena el marcado, esto sigue funcionando.

   El indicador va sobre ::after —la placa «ANTES ← → DESPUÉS»— y no sobre el
   propio input, porque el input es opacity:0 y ocupa la caja entera: un
   outline ahí sería un rectángulo enorme alrededor de la fotografía. */
.comparador:has(input:focus-visible) .comparador__tirador::after{
  outline:3px solid var(--blanco);outline-offset:3px;
}

.comparador__mandos{display:flex;gap:var(--e2);margin-top:var(--e3)}
.comparador__mandos .btn{flex:1 1 auto}

.comparador__ficha{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);
  padding:var(--e3) 0;
  border-bottom:1px solid var(--borde-osc);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
}
.comparador__ficha b{color:var(--blanco);font-weight:500}

/* ═══ FICHA DE OBRA (galería de proyectos) ═══════════════════════════════ */

.obra{
  flex:0 0 84%;
  /* start, no center. Con `center` la primera obra NUNCA puede quedar
     alineada con el titular —el navegador la lleva al medio del carril— y al
     pulsar la flecha vuelve a anclar al centro más próximo: de ahí el salto y
     la sensación de que no desliza como debería. */
  scroll-snap-align:start;
  background:var(--verde-900);
  border:1px solid var(--borde-osc);
  display:flex;flex-direction:column;
  --foco:var(--oro-alto);
}
/* 4:5 y no 3:4. Con 3:4 la ficha entera medía 861 px de alto —más que una
   ventana de portátil—, así que la galería tapaba su propio titular y solo
   cabían dos obras y media. */
.obra__foto{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--carbon-2);
}
/* Zoom leve al entrar en pantalla, y un punto más al pasar el cursor. Se
   escala la IMAGEN dentro de un marco con overflow oculto, así que la ficha
   no cambia de tamaño ni desplaza a sus vecinas. */
.obra__foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(1.04);
  transform:scale(1.06);
  transition:transform 1.4s var(--sal),filter var(--v-lento);
}
.carril.visible .obra__foto img{transform:scale(1)}
/* El hover se acota a puntero fino: en táctil un :hover se queda pegado
   después del toque y la foto se queda ampliada sin que nadie la señale.

   1,02 y no 1,04: por encima de ahí el encuadre se nota recortado y la
   fotografía deja de ser evidencia para parecer un banner. Y 600 ms propios,
   porque los 1,4 s de la regla de arriba son para la ENTRADA —un zoom lento
   que acompaña al revelado— y aplicados a un hover se sienten como retardo.

   :focus-within se queda fuera del media query: quien llega con el teclado
   tiene que ver la misma respuesta, tenga el puntero que tenga.           */
.obra:focus-within .obra__foto img{transform:scale(1.02);filter:saturate(1) contrast(1.04)}
@media (hover:hover) and (pointer:fine){
  .obra:hover .obra__foto img{
    transform:scale(1.02);filter:saturate(1) contrast(1.04);
    transition:transform var(--m-img) var(--sal),filter var(--m-ui);
  }
}
/* Escuadras de encuadre, como en una lámina técnica */
.obra__foto::before,.obra__foto::after{
  content:"";position:absolute;width:20px;height:20px;
  border:1.5px solid var(--oro);opacity:.55;pointer-events:none;
}
.obra__foto::before{top:10px;left:10px;border-right:0;border-bottom:0}
.obra__foto::after{bottom:10px;right:10px;border-left:0;border-top:0}

.obra__cuerpo{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3);flex:1}
.obra__n{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--track-cota);text-transform:uppercase;color:var(--oro);
}
.obra__ficha{
  list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e2) var(--e4);
  margin-top:auto;padding-top:var(--e3);border-top:1px solid var(--borde-osc);
}
.obra__ficha div{display:flex;flex-direction:column;gap:2px}
.obra__ficha dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.obra__ficha dd{
  margin:0;font-family:var(--mono);font-size:var(--t-menor);
  letter-spacing:.06em;color:var(--blanco);
}
.obra p{font-size:var(--t-menor);color:var(--gris-claro);margin:0}

/* ═══ CARRUSEL: mandos y progreso ════════════════════════════════════════ */

.carril{
  display:flex;gap:var(--e4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--canal);
  padding-inline:var(--canal);
  padding-block:var(--e1) var(--e5);
  scrollbar-width:none;
  /* Sin máscara en el borde derecho: difuminaba la última ficha y la hacía
     parecer cortada. Que hay más se ve porque la siguiente asoma, y dónde se
     está se lee en la barra de progreso. */
}
.carril::-webkit-scrollbar{display:none}
.carril:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}

/* La última obra ancla por el FINAL. Con anclaje obligatorio y todas las
   fichas ancladas al inicio, la última posición posible es el inicio de la
   última ficha, que no es el final del recorrido: el carril nunca llegaba a
   la derecha del todo y la flecha «adelante» no se apagaba jamás. */
.carril > *:last-child{scroll-snap-align:end}

/* LAS IMÁGENES NO SE ARRASTRAN. Al agarrar una fotografía, el navegador inicia
   su propio arrastre de imagen y DEJA DE EMITIR eventos de puntero: la galería
   se quedaba clavada en cuanto el gesto empezaba encima de una foto, que es
   casi siempre. Esta es la causa de que «no deslizara como debería». */
.carril img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* Arrastre con el ratón. Mientras se arrastra se desactiva el anclaje: si no,
   el carril tira hacia la posición de anclaje a la vez que el dedo tira en la
   otra dirección y el movimiento se siente pegajoso. */
.carril[data-arrastrando]{
  scroll-snap-type:none;
  cursor:grabbing;
  user-select:none;
}
@media (hover:hover){ .carril{cursor:grab} }

.mandos{display:flex;align-items:center;gap:var(--e2)}
.mando{
  width:var(--toque);height:var(--toque);flex:none;
  display:grid;place-items:center;
  background:transparent;border:1px solid var(--borde-control); /* 1.4.11 */
  color:var(--blanco);cursor:pointer;border-radius:2px;
  transition:background var(--v-rapido),border-color var(--v-rapido);
  --foco:var(--oro-alto);
}
.mando:hover:not(:disabled){background:var(--oro);border-color:var(--oro);color:var(--carbon)}
.mando:disabled{opacity:.32;cursor:default}
.mando svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* Fila de control: la barra ocupa lo que sobra y las flechas quedan a su
   derecha, alineadas con el borde del contenedor. */
.gal-control{
  display:flex;align-items:center;gap:var(--e5);
  margin-top:var(--e4);
}
.gal-control .progreso{flex:1;margin-top:0}
.gal-control .mandos{flex:none}

/* Área táctil con el filete de 2 px centrado dentro: como control tiene que
   poder pulsarse, y 2 px de alto no se aciertan con el dedo.

   La CAJA sigue midiendo 24 px para no alterar la altura de la fila de
   control ni el ritmo de la sección, pero el área que responde al dedo se
   extiende 10 px arriba y abajo con un pseudoelemento, hasta los 44 px que
   pide la política de --toque. Cumplir el mínimo sin mover el diseño.    */
.progreso{
  position:relative;
  height:24px;margin-top:var(--e3);
  display:flex;align-items:center;
  cursor:pointer;
}
.progreso::after{
  content:"";position:absolute;
  left:0;right:0;top:-10px;bottom:-10px;   /* 24 + 10 + 10 = 44 */
}
.progreso::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;
  background:rgba(250,248,243,.18);
}
.progreso i{
  position:relative;
  display:block;width:100%;height:2px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;
}

/* ═══ FORMULARIO ═════════════════════════════════════════════════════════ */

.form{display:grid;gap:var(--e4);max-width:640px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oro);
}
.campo label .req{color:var(--gris);text-transform:none;letter-spacing:0}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:16px;   /* 16px evita el zoom de iOS */
  color:var(--blanco);
  background:rgba(250,248,243,.06);
  border:1px solid var(--borde-control);   /* 1.4.11 · ver base.css */
  border-radius:2px;
  padding:var(--e3) var(--e4);
  min-height:var(--toque);
  width:100%;
  --foco:var(--oro-alto);
}
.campo textarea{min-height:112px;resize:vertical}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),
                   linear-gradient(135deg,var(--oro) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:var(--e7);
}
/* El texto de ejemplo también es texto: rgba(…,.75) sobre el relleno del
   campo daba 3,69:1 y no llega al 4,5:1 de la norma. Sin la transparencia,
   el gris claro da 7,4:1 sobre el mismo fondo y se sigue distinguiendo del
   valor escrito, que va en blanco. */
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-claro);opacity:1}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{border-color:var(--ladrillo);border-width:2px}
.campo .error{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  color:#E8927E;   /* ladrillo aclarado: 6,1:1 sobre carbón */
  min-height:0;
}
.campo .error:empty{display:none}

.form__resumen{
  border-left:3px solid var(--ladrillo);
  background:rgba(169,70,50,.16);
  padding:var(--e3) var(--e4);
  font-size:var(--t-menor);color:var(--blanco);
  --foco:var(--oro-alto);
}
.form__resumen:not([hidden]){display:block}
.form__resumen ul{margin:var(--e2) 0 0;padding-left:var(--e5);list-style:disc}
.form__resumen a{color:var(--oro-alto)}

.form__nota{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  color:var(--gris);line-height:1.6;
}

/* Botón de envío inhabilitado. Nace así en el HTML y lo habilita interfaz.js;
   mismo tratamiento que .mando:disabled, para no inventar un estado nuevo. */
.btn:disabled{opacity:.32;cursor:default}

/* ── Aviso de «hace falta JavaScript» ──────────────────────────────────────
   Se muestra SIEMPRE que el botón de envío siga inhabilitado, y se retira sola
   en cuanto interfaz.js le quita el disabled.

   ⚠️ NO se usa <noscript>, y es deliberado: <noscript> solo aparece cuando el
      JavaScript está desactivado por completo. Si el navegador SÍ ejecuta JS
      pero interfaz.js no carga —un 404, un bloqueador, un FTP a medias—, el
      <noscript> no se muestra y el visitante se queda delante de un botón
      muerto sin ninguna explicación. Esta regla cubre los dos casos porque
      mira el estado real del botón, no la disponibilidad del intérprete.

   :has() y no un combinador de hermanos: que el aviso vaya después del botón
   es una casualidad del orden actual del marcado, y ya nos costó un fallo
   (ver el indicador de foco del comparador, más arriba en este archivo). */
.form__sinjs{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  line-height:1.6;color:var(--blanco);
  border-left:2px solid var(--oro);
  padding:var(--e3) 0 var(--e3) var(--e4);
}
.form:has(button[type="submit"]:not(:disabled)) .form__sinjs{display:none}

/* Y al revés: mientras el botón esté inhabilitado, la nota «al enviar se abre
   WhatsApp…» describe algo que NO puede pasar. Se retira, o el bloque se
   contradice a sí mismo delante del visitante. */
.form:has(button[type="submit"]:disabled) .form__nota{display:none}

/* ── Salida permanente de contacto ─────────────────────────────────────────
   Siempre visible, funcione o no el JavaScript. Es lo único de este bloque
   que no puede fallar: los dos href van escritos, no inyectados. */
.form__alterna{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);align-items:baseline;
  margin-top:var(--e3);padding-top:var(--e4);
  border-top:1px solid var(--borde-osc);
  font-size:var(--t-menor);line-height:1.6;
}
.form__alterna b{
  flex:1 0 100%;
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.form__alterna a{
  color:var(--oro-alto);
  border-bottom:1px solid var(--borde-osc);
  padding-bottom:2px;
  min-height:var(--toque);display:inline-flex;align-items:center;
}
.form__alterna a:hover{color:var(--blanco);border-bottom-color:var(--oro)}

/* ═══ LISTAS DE INCLUSIÓN Y EXCLUSIÓN ════════════════════════════════════ */

.listas{display:grid;gap:var(--e6);margin-top:var(--e7)}
.listas ul{list-style:none}
.listas li{
  padding:var(--e3) 0 var(--e3) var(--e6);
  position:relative;font-size:15.5px;
  border-bottom:1px solid var(--borde-osc);
}
.listas .si li::before{content:"✓";position:absolute;left:0;color:var(--oro);font-weight:700}
.listas .no li{color:var(--gris)}
.listas .no li::before{content:"✕";position:absolute;left:0;color:var(--gris);font-weight:700}
.listas h3{
  margin-bottom:var(--e3);font-size:var(--t-base);
  letter-spacing:.1em;font-family:var(--mono);font-weight:500;text-transform:uppercase;
}

.aviso{
  border-left:3px solid var(--oro);
  padding:var(--e3) 0 var(--e3) var(--e4);
  font-size:15.5px;max-width:66ch;color:var(--gris-claro);
  margin-block:var(--e6) 0;
}
.claro .aviso,.arena-bg .aviso{border-left-color:var(--oro-linea);color:var(--tinta-2)}

/* ═══ ETIQUETAS DE ZONA ══════════════════════════════════════════════════ */

.barrios{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e5);list-style:none}
.barrio{
  border:1px solid var(--gris-linea);background:var(--blanco);
  padding:10px var(--e4);font-size:var(--t-menor);
  min-height:var(--toque);display:inline-flex;align-items:center;
}
.barrio--foco{border-color:var(--oro-linea);background:#F7EFD8;font-weight:600}