/* ═══════════════════════════════════════════════════════════════════════
   Laura Úbeda — estilos del tema

   Paleta y tipografías tomadas del sitio original: negro, blanco y el
   amarillo #F3C203, con Sequel para los títulos y Garet para el texto. Las
   fuentes viajan DENTRO del tema (assets/fonts/): la web se reinstaló de cero
   el 25/08/2026 y todo lo que el tema necesita tiene que sobrevivir a un
   wp-content vacío.

   Sin framework y sin build: un solo fichero que se lee entero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografías propias ───────────────────────────────────────────────── */
@font-face {
  font-family: "Sequel";
  src: url("../fonts/sequel-100-black-75.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet-Book.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet-Heavy.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --negro: #000000;
  --negro-suave: #121212;
  --gris: #292929;
  --gris-texto: #b8b8b8;
  --blanco: #ffffff;
  --acento: #f3c203;

  --display: "Sequel", "Arial Black", system-ui, sans-serif;
  --texto: "Garet", -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --ancho-texto: 720px;
  --barra: 68px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--barra); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.contenedor--texto { max-width: var(--ancho-texto); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: var(--negro);
  padding: .6rem 1rem; font-weight: 700; z-index: 100;
}
.saltar:focus { left: 8px; top: 8px; }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  height: var(--barra);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.cabecera.esta-abajo {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
/* Tres zonas: menú izquierdo | marca | menú derecho. Las columnas laterales
   miden lo mismo (1fr y 1fr), así que la marca queda en el CENTRO exacto de
   la página aunque «Conciertos» pese más que «Prensa». El nav no pinta caja
   propia (display: contents): sus dos listas se colocan directamente en la
   rejilla, y así en móvil puede volver a ser un panel normal. */
.cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: 100%; }
.cabecera__nav { display: contents; }
.menu--izq { grid-column: 1; grid-row: 1; justify-self: start; }
.menu--der { grid-column: 3; grid-row: 1; justify-self: end; }

.cabecera__marca { grid-column: 2; grid-row: 1; text-decoration: none; transition: opacity .25s ease; }
.cabecera__nombre {
  font-family: var(--display);
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blanco);
}
/* En la portada, la marca del centro sale solo al bajar: arriba del todo ya
   está el logo grande del hero y repetirlo pegado encima quedaba doble. */
body.home .cabecera:not(.esta-abajo) .cabecera__marca { opacity: 0; pointer-events: none; }

.cabecera__nav .menu {
  display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0;
}
.cabecera__nav a {
  color: var(--blanco); text-decoration: none;
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.cabecera__nav a:hover { border-bottom-color: var(--acento); }

/* Menú móvil: una casilla y CSS, para que funcione sin JavaScript. */
.cabecera__hamburguesa { display: none; cursor: pointer; padding: .5rem; }
.cabecera__hamburguesa span {
  display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--blanco);
}

@media (max-width: 860px) {
  .cabecera__hamburguesa { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  /* El nav deja de repartirse por la rejilla y vuelve a ser un panel. */
  .cabecera__nav {
    display: none;
    position: fixed; inset: var(--barra) 0 auto 0;
    background: rgba(0, 0, 0, .97);
    padding: 1.2rem 20px 1.6rem;
  }
  .cabecera__interruptor:checked ~ .cabecera__nav { display: block; }
  .menu--izq, .menu--der { grid-column: auto; grid-row: auto; justify-self: auto; }
  .cabecera__nav .menu { flex-direction: column; gap: .2rem; }
  .cabecera__nav a { display: block; padding: .8rem 0; font-size: 1rem; }
  /* Con el menú abierto la marca sí se ve, también en la portada. */
  body.home .cabecera .cabecera__interruptor:checked ~ .cabecera__marca { opacity: 1; }
}

/* ── Portada ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  margin-top: calc(var(--barra) * -1);
  padding-top: var(--barra);
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 40%;
}
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.92) 100%);
}
.hero__contenido { position: relative; text-align: center; padding: 4rem 20px; }
/* El logo dibujado a mano, en blanco. El fichero es tinta negra sobre fondo
   transparente y NO se retoca (regla de la casa: el original manda): el
   blanco lo pone `invert`, y la sombra despega los trazos de la foto. */
.hero__logo { margin: 0; }
.hero__logo img {
  width: clamp(230px, 42vw, 400px); height: auto;
  filter: invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, .45));
}

/* Para lectores de pantalla y buscadores; en pantalla lo dice el logo. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Cuenta atrás. Nace oculta y solo la enseña el JS cuando queda tiempo de
   verdad: la web vieja tuvo meses un contador parado en ceros. */
.cuenta { display: flex; justify-content: center; gap: 1.6rem; margin: 2.4rem 0 0; }
.cuenta > div { min-width: 62px; }
.cuenta b {
  display: block; font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cuenta span {
  display: block; margin-top: .35rem;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-texto);
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton {
  display: inline-block; margin-top: 2rem;
  padding: .95rem 2.1rem;
  font-family: var(--texto); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--blanco); color: var(--blanco);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton:hover { background: var(--blanco); color: var(--negro); }
.boton--acento { background: var(--acento); border-color: var(--acento); color: var(--negro); }
.boton--acento:hover { background: transparent; color: var(--acento); }
.boton--pequeno { margin: 0; padding: .55rem 1.2rem; font-size: .72rem; }

/* ── Secciones ─────────────────────────────────────────────────────────── */
.seccion { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.seccion--alterna { background: var(--negro-suave); }

.seccion__titulo {
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.05; letter-spacing: .04em; text-transform: uppercase;
  text-align: center; margin: 0 0 2.6rem;
}
.seccion__titulo--izq { text-align: left; }

.vacio { color: var(--gris-texto); text-align: center; }

/* ── Vídeo y Spotify ───────────────────────────────────────────────────── */
.video { max-width: 900px; margin: 0 auto; }
.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Discos ────────────────────────────────────────────────────────────── */

/* ── Bio y merch: dos columnas que se apilan ──────────────────────────── */
/* Rótulo pequeño que abre una sección o una ficha («El disco nuevo»,
   «La artista»): el amarillo trabaja de guía, no de decoración. */
.lema-seccion {
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento); margin: 0 0 .6rem;
}

/* ── El disco nuevo (Castelar-22) ─────────────────────────────────────── */
.disco-nuevo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
  margin: 0 0 4rem;
}
.disco-nuevo__portada { display: block; }
.disco-nuevo__portada img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  transition: transform .3s ease;
}
.disco-nuevo__portada:hover img { transform: translateY(-4px); }
.disco-nuevo__titulo {
  font-family: var(--display);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: .95; letter-spacing: .02em; text-transform: uppercase;
  margin: 0;
}
.disco-nuevo__meta {
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-texto); margin: .7rem 0 1rem;
}
.disco-nuevo__texto { color: var(--gris-texto); max-width: 46ch; margin: 0 0 1.4rem; }
.disco-nuevo__embed {
  width: 100%; height: 152px; border: 0; border-radius: 12px;
  display: block; margin: 0 0 1.4rem;
}

/* ── Discografía: cronología en rejilla, el año encima de cada portada ── */
.discografia__titulo {
  font-family: var(--display);
  font-size: 1rem; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.discografia {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 1.4rem; list-style: none; margin: 0; padding: 0;
}
.discografia a { display: block; text-decoration: none; color: var(--blanco); }
.discografia img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.discografia a:hover img { transform: scale(1.03); }
.discografia__anio {
  display: block; margin-top: .7rem;
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .2em; color: var(--acento);
}
.discografia__nombre { display: block; margin-top: .15rem; font-size: .92rem; }

/* Abajo a la derecha, cerrando la rejilla: el camino a la página completa. */
.discografia__mas { display: flex; justify-content: flex-end; margin: 1.6rem 0 0; }
.discografia__mas a {
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento); text-decoration: none;
  padding-bottom: .25rem; border-bottom: 2px solid var(--acento);
}
.discografia__mas a:hover { color: var(--blanco); border-bottom-color: var(--blanco); }

/* ── Panel lateral de un disco ─────────────────────────────────────────── */
body.sin-scroll { overflow: hidden; }

.panel-disco { position: fixed; inset: 0; z-index: 60; }
.panel-disco__velo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .65);
  border: 0; cursor: pointer; padding: 0;
}
.panel-disco__caja {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--negro-suave);
  border-left: 1px solid var(--gris);
  padding: 1.6rem 1.5rem 2rem;
  overflow-y: auto;
  animation: panel-entra .25s ease;
}
@keyframes panel-entra {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.panel-disco__cerrar {
  position: absolute; top: .9rem; right: 1rem;
  background: none; border: 0; cursor: pointer;
  color: var(--gris-texto); font-size: 1.6rem; line-height: 1; padding: .2rem;
}
.panel-disco__cerrar:hover { color: var(--blanco); }
.panel-disco__portada { width: 132px; height: auto; display: block; margin: 0 0 1.2rem; }
.panel-disco__titulo {
  font-family: var(--display);
  font-size: 1.25rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.panel-disco__pistas { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.panel-disco__pistas li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--gris);
}
.panel-disco__pistas span { font-size: .95rem; }
.panel-disco__play {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--acento); background: none; cursor: pointer;
  color: var(--acento); font-size: .7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.panel-disco__play:hover { background: var(--acento); color: var(--negro); }
.panel-disco__reproductor {
  grid-column: 1 / -1;
  width: 100%; border: 0; border-radius: 10px; margin: .4rem 0 .2rem;
}

/* ── Página /discografia/ ──────────────────────────────────────────────── */
.pagina-discografia { padding-top: calc(var(--barra) + 2rem); }
.lanzamiento { margin: 0 0 3.2rem; max-width: 760px; }
.lanzamiento__cabecera {
  display: grid; grid-template-columns: 108px 1fr; gap: 1.3rem;
  align-items: center; margin: 0 0 1.1rem;
}
.lanzamiento__cabecera img { width: 100%; height: auto; display: block; }
.lanzamiento__cabecera .lema-seccion { margin-bottom: .3rem; }
.lanzamiento__titulo {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 .45rem;
}
.lanzamiento__spotify {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-texto); text-decoration: none;
  border-bottom: 1px solid var(--gris);
}
.lanzamiento__spotify:hover { color: var(--acento); border-bottom-color: var(--acento); }
.lanzamiento__pistas { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lanzamiento__pistas iframe { width: 100%; height: 80px; border: 0; border-radius: 10px; display: block; }

.merch {
  display: grid; gap: clamp(1.8rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
}
.merch { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.merch__foto img { object-fit: cover; }

/* ── La bio, en dos actos ──────────────────────────────────────────────── */
.bio__arriba {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.bio__abajo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  margin-top: clamp(2.4rem, 6vw, 4rem);
}

/* El marco amarillo desplazado: el único adorno de la sección. Es un borde
   detrás de la foto, no un filtro encima: la foto manda. */
.bio__foto { position: relative; margin: 0; }
.bio__foto::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 2px solid var(--acento); z-index: 0;
}
.bio__foto img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

.bio__banda { margin: 0; }
.bio__banda img { width: 100%; height: auto; display: block; }
.bio__banda figcaption {
  margin-top: .6rem;
  font-size: .8rem; letter-spacing: .04em; color: var(--gris-texto);
}

.bio__cita {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.35; letter-spacing: .02em; text-transform: uppercase;
  color: var(--blanco); margin: 1.8rem 0; padding: 0;
}

/* Tres fechas, tres discos: la carrera en una línea. */
.bio__hitos {
  display: flex; gap: 2.2rem; flex-wrap: wrap;
  list-style: none; margin: 2rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--gris);
}
.bio__hitos b {
  display: block; font-family: var(--display);
  font-size: 1.3rem; letter-spacing: .04em; color: var(--acento);
}
.bio__hitos span { font-size: .84rem; color: var(--gris-texto); max-width: 20ch; display: block; }
.bio__texto p, .merch__texto p { color: var(--gris-texto); }
.bio__texto em { color: var(--blanco); font-style: normal; font-weight: 700; }

@media (max-width: 860px) {
  .merch { grid-template-columns: 1fr; }
  .merch__foto { order: -1; }
  .bio__arriba, .bio__abajo { grid-template-columns: 1fr; }
  /* En móvil la banda va ANTES de su texto: la foto presenta, el texto explica. */
  .bio__abajo .bio__banda { order: -1; }
  .disco-nuevo { grid-template-columns: 1fr; }
  .disco-nuevo__portada { max-width: 420px; margin: 0 auto; }
  .discografia { grid-template-columns: repeat(2, 1fr); }
  .lanzamiento__cabecera { grid-template-columns: 84px 1fr; gap: 1rem; }
  /* El marco desplazado se sale de la pantalla en móvil: dentro y más fino. */
  .bio__foto::before { inset: 10px -8px -8px 10px; }
  .bio__hitos { gap: 1.4rem; }
}

/* ── Prensa: cuatro recortes de periódico ──────────────────────────────── */
.prensa {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem 1.4rem; list-style: none; margin: 0; padding: 0;
}
.prensa a { display: block; text-decoration: none; color: var(--blanco); }
.recorte__foto {
  display: block; position: relative;
  background: var(--blanco); padding: 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .25s ease;
}
/* El celo que sujeta el recorte */
.recorte__foto::before {
  content: ""; position: absolute; top: -9px; left: 50%; z-index: 2;
  width: 74px; height: 20px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(243, 194, 3, .5);
}
.recorte__papel {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.recorte__logo {
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: auto;
  transform: translate(-50%, -50%);
  filter: grayscale(1) contrast(1.05) drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
  transition: filter .25s ease;
}
/* Cada recorte, torcido hacia un lado; al pasar el ratón se endereza y la
   foto recupera el color: el periódico cobra vida. */
.recorte:nth-child(4n+1) .recorte__foto { transform: rotate(-2deg); }
.recorte:nth-child(4n+2) .recorte__foto { transform: rotate(1.4deg); }
.recorte:nth-child(4n+3) .recorte__foto { transform: rotate(-1.2deg); }
.recorte:nth-child(4n+4) .recorte__foto { transform: rotate(2deg); }
.recorte a:hover .recorte__foto { transform: rotate(0deg); }
.recorte a:hover .recorte__logo { filter: grayscale(0) contrast(1) drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }

.recorte__medio {
  display: block; margin-top: 1.1rem;
  font-family: var(--display);
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento);
}
.recorte__titular {
  display: block; margin-top: .35rem;
  font-weight: 700; font-size: .98rem; line-height: 1.35;
}
.recorte__frase {
  display: block; margin-top: .5rem;
  font-size: .86rem; font-style: italic; color: var(--gris-texto); line-height: 1.5;
}

/* ── Conciertos ────────────────────────────────────────────────────────── */


/* La cartelera de Conciertos: la foto del directo detrás, la placa encima. */
/* La foto de fondo tiene que ser APAISADA: una vertical con `cover` en una
   franja panorámica acaba siempre en primerísimo plano, se recorte como se
   recorte (aprendido el 25/08/2026 con dos intentos). */
.cartel-bolo {
  position: relative;
  min-height: clamp(460px, 70vh, 700px);
  display: flex; align-items: center; justify-content: center;
  background-image: var(--cartel-foto);
  background-size: cover; background-position: center 30%;
  overflow: hidden;
}
.cartel-bolo__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
}
/* En el TELÉFONO la franja es vertical, así que va la foto vertical (la bata,
   Foto 4); en tablet y ordenador, la apaisada del micro. El corte va en 640px
   y no en 860 a propósito: el iPad en vertical (768) es pantalla ancha aquí. */
@media (max-width: 640px) {
  .cartel-bolo {
    background-image: var(--cartel-foto-movil, var(--cartel-foto));
    background-position: center 22%;
  }
}
.cartel-bolo__contenido {
  position: relative; width: min(1160px, 94%);
  padding: 2.5rem 0; text-align: center;
}
.cartel-bolo__contenido > img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6));
}
.cartel-bolo__boton { margin: 1.1rem 0 0; }
/* El botón sin link todavía: mismo traje, sin manita de enlace. */
.boton--espera { cursor: default; }

/* ── Contacto: datos a la izquierda, contratación a la derecha ─────────── */
.contacto__columnas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  text-align: left; max-width: 1040px; margin: 0 auto;
}
.contacto__lista { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.contacto__etiqueta {
  display: block; font-family: var(--display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .2rem;
}
.contacto__lista a { color: var(--blanco); text-decoration: none; font-size: 1.05rem; }
.contacto__lista a:hover { color: var(--acento); }

.contacto__formulario {
  background: var(--negro-suave);
  border: 1px solid var(--gris);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.contacto__formulario-titulo {
  font-family: var(--display);
  font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.contacto__formulario label {
  display: block; margin: 0 0 1rem;
  font-size: .8rem; letter-spacing: .06em; color: var(--gris-texto);
}
.contacto__formulario input,
.contacto__formulario textarea {
  display: block; width: 100%; margin-top: .35rem;
  background: var(--negro); color: var(--blanco);
  border: 1px solid var(--gris); border-radius: 0;
  padding: .65rem .8rem; font: inherit; font-size: .95rem;
}
.contacto__formulario input:focus,
.contacto__formulario textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento);
}
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* El cepo para robots: fuera de la vista, no del DOM. */
.contacto__web { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contacto__estado { margin: 1rem 0 0; font-size: .95rem; color: var(--blanco); }
.contacto__estado.es-error { color: #ff9d9d; }

@media (max-width: 860px) {
  .contacto__columnas { grid-template-columns: 1fr; }
  .prensa { grid-template-columns: repeat(2, 1fr); }
  .campo-doble { grid-template-columns: 1fr; gap: 0; }
}

/* ── Páginas legales: texto largo, columna de lectura ──────────────────── */
.pagina-legal { padding-top: calc(var(--barra) + 2rem); }
.pagina-legal .contenedor { max-width: var(--ancho-texto); }
.pagina-legal h2 {
  font-family: var(--display);
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 2.2rem 0 .7rem;
}
.pagina-legal p, .pagina-legal li { color: var(--gris-texto); }
.pagina-legal b { color: var(--blanco); font-weight: 700; }
.pagina-legal a { color: var(--acento); }
.pagina-legal ul { padding-left: 1.2rem; }
.pagina-legal li { margin: .35rem 0; }
.legal__fecha { margin-top: 2.5rem; font-size: .85rem; }

/* ── El pie ────────────────────────────────────────────────────────────── */
.pie {
  border-top: 2px solid var(--acento);
  background: var(--negro);
  padding: 3.2rem 0 2rem;
  text-align: center;
}
/* El logo dibujado, en blanco (el fichero es tinta negra: el blanco lo pone
   `invert`, igual que en el hero). */
.pie__logo { display: inline-block; margin-bottom: 1.6rem; }
.pie__logo img {
  width: 88px; height: auto;
  filter: invert(1);
  opacity: .95;
}
.pie__redes {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.8rem;
  margin-bottom: 2.2rem;
}
.pie__redes a {
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blanco); text-decoration: none;
  padding-bottom: .25rem; border-bottom: 2px solid transparent;
}
.pie__redes a:hover { color: var(--acento); border-bottom-color: var(--acento); }

.pie__abajo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 1px solid var(--gris);
  padding-top: 1.4rem;
  font-size: .8rem; color: var(--gris-texto);
}
.pie__abajo p { margin: 0; }
.pie__abajo nav { display: flex; gap: 1.2rem; }
.pie__abajo a { color: var(--gris-texto); text-decoration: none; }
.pie__abajo a:hover { color: var(--blanco); }

@media (max-width: 640px) {
  .pie__abajo { flex-direction: column; gap: .8rem; }
}