/* Energy Woman — landing pública (energywoman.cl)
   ------------------------------------------------------------------------------------------
   La marca la manda el logo y el portal de descuentos: dorado sobre negro. Está copiada a
   propósito y no compartida con el repo de la app — un archivo común obligaría a desplegar los
   dos proyectos para cambiar un color. Si la marca cambia, se cambian los dos.

   Estructura tomada de las convenciones de un sitio de bencinera grande (carrusel de hero,
   combustibles, localizador de estaciones, bloque de programa de socios, pie denso). Las
   convenciones no son de nadie; la identidad visual sí, así que la paleta y la tipografía son
   de Energy Woman y no de ninguna cadena.

   TIPOGRAFÍA SERVIDA DESDE ACÁ, no desde Google Fonts. Dos razones, y la segunda es la que
   pesa: una hoja de estilos remota bloquea el primer render de la página que más gente va a
   abrir; y esta página publica un aviso de tratamiento de datos personales, así que pedirle la
   IP del visitante a un tercero para dibujar una letra se contradice con lo que dice el texto.
   Los woff2 están en sitio/fonts/, subset latino (cubre tildes y ñ), 112 KB en total.

   Barlow no es una elección neutra: nació con aire de señalética vial, que es el mundo de una
   estación de servicio. La condensada hace de letrero; la normal, de texto. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
}

:root {
  /* El negro tiene sesgo cálido hacia el dorado (#14110b, no #1a1a1a neutro): al lado del oro,
     un negro frío lo apaga y lo hace ver verdoso. Igual los grises de texto. */
  --tinta: #14110b;
  --tinta-2: #241e13;
  --dorado: #a8791a;
  --dorado-claro: #d8b34a;
  --papel: #ffffff;
  --papel-2: #f6f3ec;
  --texto: #332e25;
  --texto-tenue: #6d6657;
  --borde: #e2dccd;
  --borde-oscuro: rgba(216, 179, 74, .28);
  --alerta: #a8321f;
  --alerta-fondo: #fdeee9;
  /* El --alerta es para los marcadores sobre papel. Sobre el negro de la banda del formulario
     se hunde y no se lee, así que los errores del formulario usan este otro. */
  --rojo-claro: #f08a7a;

  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --cuerpo: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --medida: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.contenedor {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 24px;
}

/* Una sola escala tipográfica para todo el sitio. Los títulos van en la condensada, que a
   tamaños grandes gana presencia sin comerse el ancho. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }

p { margin: 0; }

/* Etiqueta de sección: versalitas espaciadas en dorado. Es el recurso de señalética del sitio y
   se repite sin variantes, para que el ojo la reconozca como "acá empieza algo". */
.etiqueta {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .84rem;
  color: var(--dorado);
  margin-bottom: 10px;
}
.banda-oscura .etiqueta { color: var(--dorado-claro); }

a { color: var(--dorado); }

/* ---------- Encabezado ---------- */

header.top {
  background: var(--tinta);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--borde-oscuro);
}
header.top .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca img { height: 42px; width: 42px; border-radius: 50%; }
.marca-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .07em;
  color: var(--dorado-claro);
  display: block;
  line-height: 1.1;
}
.marca-sub {
  display: block;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

nav.menu { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
nav.menu a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .98rem;
  font-weight: 600;
}
nav.menu a:hover { color: #fff; }

/* El acceso al portal es el único enlace que sale del sitio y el que más gente busca: quien
   tenía guardada la dirección vieja llegaba directo a la app y ahora aterriza acá. Va sólido
   para que no se lea como una opción más del menú. */
nav.menu a.portal {
  background: var(--dorado);
  color: #fff;
  padding: 9px 18px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
nav.menu a.portal:hover { background: var(--dorado-claro); color: var(--tinta); }

/* ---------- Carrusel del hero ----------
   La base no lleva JavaScript: es un carril con scroll-snap y los puntos son anclas de verdad,
   así que se desliza con el dedo, se arrastra o se rueda, y navega igual con el JavaScript
   desactivado. Encima de eso, js/carrusel.js agrega el avance automático, la marca del punto
   activo y el botón de pausa. El orden importa: primero algo que funciona solo, después la
   mejora — no un carrusel que sin scripts queda en una foto fija.

   ►► PARA CAMBIAR UNA IMAGEN: deje el archivo y nada más ◄◄

       cp mi-foto.jpg sitio/img/carrusel/01.jpg

   Sin editar HTML ni CSS. Funciona porque cada slide apila DOS capas de imagen: arriba la foto
   real (--img, que apunta a 01.jpg … 03.jpg) y debajo el dibujo de muestra (--muestra, los .svg).
   Una capa de fondo cuyo archivo no existe no se pinta y deja ver la de abajo, así que mientras
   no haya foto se ve el dibujo, y en cuanto el .jpg aparece lo tapa.

   El precio de esa comodidad: mientras no existan las fotos, el navegador pide tres archivos
   que dan 404. Son inofensivos —la página se ve igual— y desaparecen al poner las fotos. Cuando
   estén las tres, se puede borrar la línea --muestra de cada slide y los .svg de la carpeta.

   Las muestras son dibujos hechos para este sitio, sin licencia de nadie, rotulados "IMAGEN DE
   MUESTRA" para que nadie los confunda con una foto de la estación.

   La foto real: 1600×900 o más ancha, unos 200-300 KB (una foto de celular son 4-6 MB, y en
   señal rural eso es una pantalla negra), y con el motivo interesante hacia la DERECHA, porque
   el degradado oscurece la izquierda para que se lea el titular. */

.carrusel { background: var(--tinta); }

.pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* La barra de scroll se oculta porque los puntos y el borde del slide siguiente ya dicen que
     esto se desplaza; una barra horizontal cruzando una foto se ve como un defecto. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pista::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: clamp(430px, 54vw, 580px);
  display: grid;
  align-items: center;
  /* Tres capas, de arriba hacia abajo: el degradado, la foto real y el dibujo de muestra.
     El degradado va DELANTE y cae hacia la derecha, para que el titular se lea sobre cualquier
     foto que pongan después y no solo sobre estos dibujos. La muestra va al fondo y solo se ve
     mientras --img no tenga archivo: ver el encabezado de esta sección. */
  background-image:
    linear-gradient(98deg, rgba(20, 17, 11, .95) 0%, rgba(20, 17, 11, .86) 40%, rgba(20, 17, 11, .38) 100%),
    var(--img, none),
    var(--muestra, none);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.slide-texto { max-width: 40ch; padding: clamp(40px, 6vw, 76px) 0; }
.slide h1, .slide h2 {
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
}
.slide h1 em, .slide h2 em { font-style: normal; color: var(--dorado-claro); }
.slide p.entrada {
  color: rgba(255, 255, 255, .8);
  margin-top: 16px;
  font-size: 1.06rem;
}

/* Los puntos son barras: un punto de 8 px es un blanco difícil de achuntar en un teléfono, y la
   barra además insinúa el avance. El área pinchable mide 22 px de alto aunque se vean 4, por el
   background-clip sobre el padding. */
/* Los controles van en una fila centrada, con el botón de pausa a la derecha de los puntos. El
   botón nace con el atributo hidden y lo muestra js/carrusel.js: un botón de pausa sin el script
   detrás no pausaría nada, y un control muerto es peor que ningún control. */
.controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px 26px;
  background: var(--tinta);
}

/* Los puntos son barras: un punto de 8 px es un blanco difícil de achuntar con el pulgar, y la
   barra además insinúa el avance. El área pinchable mide 22 px de alto aunque se vean 4, porque
   el background-clip deja el relleno transparente. */
.puntos { display: flex; gap: 10px; }
.puntos a {
  width: 52px;
  height: 22px;
  padding: 9px 0;
  background: rgba(255, 255, 255, .26);
  background-clip: content-box;
  border-radius: 2px;
  transition: background .15s ease;
}
.puntos a:hover { background: var(--dorado-claro); }
/* La clase la pone el script mirando qué slide se ve de verdad, no qué slide ordenó mostrar. */
.puntos a.activo { background: var(--dorado); }

.pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pausa:hover { border-color: var(--dorado-claro); color: var(--dorado-claro); }
.pausa svg { width: 11px; height: 13px; fill: currentColor; display: block; }
/* Un solo icono a la vista, según el estado que el script escribe en aria-pressed: así el
   atributo que leen los lectores de pantalla y el dibujo que ve el resto no pueden discrepar. */
.pausa .ic-play { display: none; }
.pausa[aria-pressed="true"] .ic-pausa { display: none; }
.pausa[aria-pressed="true"] .ic-play { display: block; }

/* ---------- Botones ----------
   Viven fuera del carrusel porque los usa también la banda del portal. En versalitas
   condensadas: un botón de bencinera es un letrero, no una frase. */

.acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.boton {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.boton.primario { background: var(--dorado); color: #fff; }
.boton.primario:hover { background: var(--dorado-claro); color: var(--tinta); }
.boton.secundario { color: #fff; border: 1px solid rgba(255, 255, 255, .38); }
.boton.secundario:hover { border-color: var(--dorado-claro); color: var(--dorado-claro); }

/* ---------- Secciones ---------- */

section { padding: clamp(56px, 7vw, 92px) 0; }
section.papel-2 { background: var(--papel-2); }
section.banda-oscura { background: var(--tinta); color: rgba(255, 255, 255, .8); }
section.banda-oscura h2 { color: #fff; }

.intro { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 48px); }
.intro p { color: var(--texto-tenue); margin-top: 14px; font-size: 1.05rem; }
.banda-oscura .intro p { color: rgba(255, 255, 255, .72); }

/* ---------- Pasos del descuento ----------
   Van numerados porque son de verdad una secuencia en el surtidor: el orden es información,
   no adorno. */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 2px solid var(--dorado);
}
.paso {
  padding: 28px 26px 30px 0;
  border-right: 1px solid var(--borde);
}
.paso:last-child { border-right: 0; padding-right: 0; }
.paso:not(:first-child) { padding-left: 26px; }
.paso .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--dorado);
  display: block;
  margin-bottom: 10px;
}
.paso h3 { margin-bottom: 8px; }
.paso p { color: var(--texto-tenue); font-size: .98rem; }

/* ---------- Combustibles ---------- */

.combustibles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.combustible {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--dorado);
  padding: 22px;
}
.combustible .grado {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--tinta);
  display: block;
}
.combustible .tipo {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  color: var(--dorado);
  font-weight: 600;
  display: block;
  margin: 8px 0 10px;
}
.combustible p { color: var(--texto-tenue); font-size: .95rem; }

/* ---------- Estaciones ---------- */

.estaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.estacion {
  background: var(--papel);
  border: 1px solid var(--borde);
  padding: 26px;
}
.estacion h3 {
  font-size: 2rem;
  color: var(--tinta);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--dorado);
  margin-bottom: 18px;
}
.estacion .comuna {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  font-weight: 600;
  color: var(--dorado);
  display: block;
  margin-bottom: 6px;
}
.dato {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: .98rem;
}
.dato:last-child { border-bottom: 0; }
.dato dt {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--texto-tenue);
  padding-top: 3px;
}
.dato dd { margin: 0; }

/* ---------- Marcador de dato pendiente ----------
   Marca lo que todavía no tiene valor real: direcciones, horarios, teléfonos, razón social y el
   correo del canal ARCO. Están hechos para MOLESTAR — si alguien publica sin reemplazarlos tiene
   que ser una decisión y no un descuido. Son 8; la novena aparición de la frase "POR DEFINIR" en
   el HTML es el comentario que manda a buscarlos. Al borrar el último, esta regla queda sin uso
   y se borra también. */
.pendiente {
  display: inline-block;
  background: var(--alerta-fondo);
  border: 1px dashed var(--alerta);
  color: var(--alerta);
  border-radius: 2px;
  padding: 1px 8px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---------- Banda del portal ---------- */

.portal-banda .contenedor {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.portal-banda .acciones { margin-top: 0; justify-content: flex-end; }

/* ---------- Formulario de inscripción ----------
   Va sobre la banda oscura, así que los campos tienen fondo propio un poco más claro que el
   fondo: un input transparente sobre negro no se lee como un campo donde se escribe. El foco es
   dorado y grueso — en un formulario de seis campos, saber dónde está el cursor importa más que
   en cualquier otra parte del sitio.

   Los campos opcionales se marcan con la palabra "opcional" en un chip, igual que en el panel de
   la app: si no se dice, la gente asume que todo es obligatorio y abandona. */

.inscripcion .intro { max-width: 52ch; }

.formulario { max-width: 760px; }

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.campo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.campo.ancho { grid-column: 1 / -1; }

.campo label,
.consentimiento label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
}
.opcional {
  font-family: var(--cuerpo);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 0 8px;
  margin-left: 6px;
}

.formulario input[type="text"],
.formulario input[type="tel"],
.formulario input[type="email"] {
  width: 100%;
  font-family: var(--cuerpo);
  font-size: 1rem;
  padding: 12px 14px;
  color: #fff;
  background: var(--tinta-2);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.formulario input::placeholder { color: rgba(255, 255, 255, .32); }
.formulario input:focus {
  outline: none;
  border-color: var(--dorado-claro);
  box-shadow: 0 0 0 3px rgba(216, 179, 74, .24);
}
/* El campo con error se marca por el atributo que el script ya tiene que poner para los lectores
   de pantalla, en vez de por una clase aparte: así no pueden discrepar. */
.formulario input[aria-invalid="true"] { border-color: var(--rojo-claro); }

.error {
  font-size: .88rem;
  color: var(--rojo-claro);
}

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 24px 0 0;
}
.consentimiento input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--dorado);
  flex-shrink: 0;
}
/* Este label sí es texto corrido y no una etiqueta de campo: se lee, no se escanea. */
.consentimiento label {
  font-family: var(--cuerpo);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
.consentimiento a { color: var(--dorado-claro); }

.aviso {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 3px;
  border-left: 3px solid var(--dorado);
  background: rgba(216, 179, 74, .1);
  color: rgba(255, 255, 255, .88);
  font-size: .98rem;
  max-width: 62ch;
}
.aviso.error-aviso {
  border-left-color: var(--rojo-claro);
  background: rgba(192, 57, 43, .14);
}
/* <noscript> no puede usar el atributo hidden del script, así que su aviso se muestra solo. */
.aviso.visible { display: block; }

.formulario button[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
}

/* ---------- Datos personales ----------
   Medida corta y un fondo propio: es el texto más largo del sitio y el que alguien puede llegar
   a leer entero. Las subsecciones se separan con aire, no con cajas: una caja por párrafo
   convertiría un aviso legal en un tablero. */
.legal .bloque + .bloque { margin-top: 34px; }
.legal h3 {
  font-size: 1.45rem;
  color: var(--tinta);
  margin-bottom: 10px;
}
.legal p, .legal li { max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-bottom: 10px; color: var(--texto-tenue); }
.legal li strong { color: var(--texto); }
.legal .destacado {
  border-left: 3px solid var(--dorado);
  padding: 4px 0 4px 18px;
  margin-top: 16px;
}

/* ---------- Desplegable del texto legal ----------
   `<details>` nativo: sin JavaScript, abre y cierra con teclado solo, y el texto vive en el DOM
   —los buscadores lo indexan igual que si estuviera abierto—. No hay forma de abrirlo con CSS
   desde un `:target`, así que quien llegue por el enlace #datos del pie ve el título y el resumen,
   y despliega si quiere leer. Es el intercambio aceptado por no meter un script para esto. */

.plegable {
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.plegable summary {
  /* El triángulo nativo se saca en los dos dialectos: `list-style` para los navegadores al día y
     el pseudo-elemento de WebKit para Safari, que todavía lo dibuja por su cuenta. */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .02em;
  color: var(--tinta);
  transition: color .15s ease;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary:hover { color: var(--dorado); }

/* La flecha, dibujada con dos bordes y girada 45°: no necesita ni un archivo ni un icono. */
.plegable summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  margin-right: 6px;
  border-right: 2px solid var(--dorado);
  border-bottom: 2px solid var(--dorado);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease;
}
.plegable[open] summary::after { transform: rotate(-135deg); }

/* El foco tiene que verse: un desplegable que no se ve enfocado es inoperable con teclado. */
.plegable summary:focus-visible {
  outline: 2px solid var(--dorado-claro);
  outline-offset: 2px;
}

.plegable-cuerpo { padding: 4px 0 28px; }

/* ---------- Pie ---------- */

footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, .62);
  padding: 56px 0 28px;
  font-size: .95rem;
}
footer .cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(140px, .86fr));
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--borde-oscuro);
}
footer h4 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .82rem;
  color: var(--dorado-claro);
  margin: 0 0 14px;
  font-weight: 600;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 8px; }
footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
footer a:hover { color: var(--dorado-claro); text-decoration: underline; }
footer .pie-marca { display: flex; gap: 12px; align-items: flex-start; }
footer .pie-marca img { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }
footer .creditos {
  padding-top: 22px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .45);
}

/* El foco tiene que verse sobre los dos fondos, el negro de las bandas y el papel de las
   secciones. El dorado claro cumple en ambos; el dorado base se pierde contra el negro. */
a:focus-visible, .boton:focus-visible, .pausa:focus-visible {
  outline: 2px solid var(--dorado-claro);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .portal-banda .contenedor { grid-template-columns: 1fr; }
  .portal-banda .acciones { justify-content: flex-start; }
  footer .cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  header.top .contenedor { justify-content: center; }
  nav.menu { gap: 18px; justify-content: center; }
  /* Los pasos dejan de ser columnas y pasan a ser filas: el separador tiene que cambiar de
     lado, o queda una raya vertical suelta al final de cada uno. */
  .paso,
  .paso:not(:first-child) { padding: 22px 0; padding-left: 0; border-right: 0; border-bottom: 1px solid var(--borde); }
  .paso:last-child { border-bottom: 0; padding-bottom: 0; }
  .acciones .boton { flex: 1 1 auto; text-align: center; }
  footer .cols { grid-template-columns: 1fr; }
}