/* Estilos del sitio. Las variables están en tokens.css.

   La rejilla es la misma en todas las páginas: un rótulo pequeño en versalita
   a la izquierda y el texto grande a la derecha. Nada de tarjetas, nada de
   sombras, nada de esquinas redondeadas: lo que separa dos bloques es un
   filete de un píxel o el aire que hay entre ellos. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--papel)}
html,body{background:var(--papel) !important}
@media (prefers-color-scheme:dark){html,body{background:var(--papel) !important;color:var(--tinta-cuerpo) !important}}
body{font-family:var(--f-texto);color:var(--tinta-cuerpo);line-height:1.66;font-size:15px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:783px){body{font-size:18px}}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--tinta);line-height:1.3}

/* La caja de la web: 700px hasta la tableta y 1000px a partir de ahí, que es
   el ancho de la original. Todo lo que no es una foto a sangre vive aquí. */
.wrap{max-width:700px;margin:0 auto;padding-left:2em;padding-right:2em}
@media (min-width:783px){.wrap{max-width:var(--ancho)}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--acento);color:var(--tinta);
  padding:12px 20px;z-index:100;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.09em}
.saltar:focus{left:0}
:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}

/* ── Rótulo ──────────────────────────────────────────────────
   La pieza tipográfica que sostiene toda la web: catorce píxeles, negra,
   en mayúsculas y muy espaciada. Es el título de cada bloque y va sola en
   la columna de la izquierda. */
.rotulo{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);line-height:1.5;margin:0}
@media (min-width:783px){.rotulo{font-size:14px}}
.rotulo--suave{color:var(--tinta-suave)}
/* La fecha de revisión va en el mismo carril que el rótulo, pero no es un
   rótulo: tres versalitas seguidas convertían la columna en un cartel. */
.dato-fecha{font-size:13px;font-weight:300;color:var(--tinta-suave);margin-top:1em}

/* ── Rejilla de dos columnas ─────────────────────────────────
   36% para el rótulo y 58% para el texto, como en la web original. Por debajo
   de la tableta se apilan y el rótulo hace de antetítulo. */
.dos-col{display:grid;gap:var(--space-4)}
@media (min-width:783px){.dos-col{grid-template-columns:36% 58%;gap:6%;align-items:start}}
.dos-col__cuerpo>*+*{margin-top:1.2em}

/* ── Tipografía del contenido ───────────────────────────────── */
.titular{font-size:24px;font-weight:700;color:var(--tinta);line-height:1.35;letter-spacing:-.01em}
@media (min-width:783px){.titular{font-size:32px}}
.lead{font-size:21px;font-weight:300;color:var(--tinta-cuerpo);line-height:1.45}
@media (min-width:783px){.lead{font-size:26px}}
.dos-col__cuerpo p{font-size:inherit}
.dos-col__cuerpo a{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dos-col__cuerpo a:hover{color:var(--acento-fuerte)}

/* ── Bloques ─────────────────────────────────────────────────
   El aire por arriba y por abajo, y un filete cuando dos bloques seguidos
   necesitan que se note dónde acaba uno. */
.bloque{padding:var(--space-7) 0}
@media (min-width:783px){.bloque{padding:5em 0 4em}}
.bloque+.bloque{border-top:1px solid var(--borde)}
.bloque--sin-filete+.bloque,.bloque+.bloque--sin-filete{border-top:0}

/* ── Botones ─────────────────────────────────────────────────
   Rectangulares, en versalita y pequeños. El primario es el único sitio de la
   web, fuera del héroe y de la fotografía, donde aparece el naranja en grande:
   sobre él el texto va en tinta, que es lo que cumple contraste. */
.btn{display:inline-block;font-family:var(--f-texto);font-weight:800;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;line-height:1;border:0;cursor:pointer;
  border-radius:var(--radio-boton);padding:1.1em 2em;text-decoration:none;text-align:center;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.btn-primario{background:var(--acento);color:var(--tinta)}
.btn-primario:hover{background:var(--tinta);color:var(--papel)}
.btn-secundario{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}
.btn-secundario:hover{background:var(--tinta);color:var(--papel)}

/* ── Cabecera ────────────────────────────────────────────────
   Dos piezas apiladas, como en la original: la banda de identidad —la foto de
   la naranja en las interiores, el héroe en la portada— y debajo la barra de
   navegación, entre dos filetes. */
.cabecera{background:var(--papel)}

.marca-foto{position:relative;background:var(--tinta);overflow:hidden}
.marca-foto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* Un velo mínimo: la naranja es clarísima en la zona blanca del centro y el
   rótulo blanco se perdía justo ahí. */
.marca-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.50) 100%)}
.marca-foto .wrap{position:relative;z-index:2;display:flex;align-items:flex-end;
  min-height:200px;padding-top:var(--space-6);padding-bottom:var(--space-6)}
@media (min-width:783px){.marca-foto .wrap{min-height:300px}}

.marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinta)}
.marca__logo{width:52px;height:52px;flex-shrink:0}
@media (min-width:783px){.marca__logo{width:62px;height:62px}}
.marca__nombre{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.15}
@media (min-width:783px){.marca__nombre{font-size:28px}}
.marca__lema{display:block;font-size:13px;font-weight:300;color:var(--tinta-suave);margin-top:2px}
.marca--clara{color:var(--papel)}
.marca--clara .marca__lema{color:rgba(255,255,255,.82)}
.marca:hover{opacity:.75}

/* Barra de navegación: filete arriba, filete abajo y nada más. */
.barra-nav{background:var(--papel);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  position:relative;z-index:30}
.barra-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
/* El menú va escrito después de los idiomas para que en el móvil el botón y
   las siglas compartan la primera fila; en pantalla ancha el orden se invierte
   y el menú vuelve a la izquierda, que es su sitio. */
.barra-nav nav{order:-1;display:flex;align-items:center;flex-wrap:wrap;gap:0 1.8em}
.barra-nav nav a{color:var(--tinta);font-weight:600;font-size:15px;text-decoration:none;
  display:block;padding:1.05em 0;white-space:nowrap;transition:color .2s ease}
.barra-nav nav a:hover{color:var(--tinta-suave)}
.barra-nav nav a[aria-current]{color:var(--acento-fuerte)}

/* Idiomas: tres siglas sueltas separadas por un filete vertical. La puesta va
   en naranja, que es lo único que las distingue: una pastilla habría vuelto a
   meter un botón redondeado donde no hay ninguno. */
.idiomas{display:flex;align-items:center;gap:.65em;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.idiomas a{text-decoration:none;color:var(--tinta-suave);transition:color .2s ease}
.idiomas a:hover{color:var(--tinta)}
.idiomas a[aria-current]{color:var(--acento-fuerte)}
.idiomas a+a{border-left:1px solid var(--borde-fuerte);padding-left:.65em}

/* Menú plegado. Sin JavaScript no se pierde ningún enlace: el menú nace
   visible y solo se pliega cuando hay script para volver a abrirlo. */
.nav-abrir{display:none;background:none;border:0;cursor:pointer;color:var(--tinta);
  font-weight:800;font-size:14px;letter-spacing:.09em;text-transform:uppercase;padding:1.1em 0;
  align-items:center;gap:.6em}
@media (max-width:900px){
  .nav-abrir{display:flex}
  .barra-nav .wrap{flex-wrap:wrap}
  .barra-nav nav{order:1;flex-direction:column;align-items:flex-start;gap:0;width:100%;
    border-top:1px solid var(--borde);padding-bottom:var(--space-4)}
  .barra-nav nav[hidden]{display:none}
  .barra-nav nav a{padding:.85em 0;font-size:16px;width:100%;border-bottom:1px solid var(--borde)}
}

/* ── Héroe: la cinta ─────────────────────────────────────────
   La única pieza oscura de una web blanca, y con paleta propia. Dentro hay una
   sola curva pintada tres veces y desplazada en diagonal: en los tramos
   horizontales la separación se lee arriba y abajo, y en la caída del centro la
   componente lateral adelanta unas bandas a otras y el orden se invierte solo.

   Todo —bandas, ecos de la palabra y grano— se mueve con el mismo vector, que
   marca el ratón o el giroscopio. Los valores de reposo van en em y no en
   píxeles: sin JavaScript la composición sigue estando separada y en su sitio,
   proporcional al tamaño al que se esté viendo. */
.hablamos{position:relative;overflow:hidden;background:var(--cinta-fondo);
  /* La altura sigue al ancho y no a la ventana: el lienzo de la cinta mide
     1440×700, y con una altura proporcional apenas hay que recortarlo. */
  display:flex;flex-direction:column;min-height:clamp(460px,52vw,700px);
  --sx:.052em; --sy:.058em; --giro-x:0deg; --giro-y:0deg; --desp:0px}
.hablamos .wrap{position:relative;z-index:3}
.hablamos__marca{padding-top:var(--space-7)}
.hablamos__lienzo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* La cinta se dibuja sobre un lienzo fijo de 1440×600 y se recorta al hueco,
   no se estira: estirarla habría deformado el grosor de las bandas. */
.cinta{position:absolute;inset:0;width:100%;height:100%}
.cinta__capa{will-change:transform}
/* Cada banda lleva dos cosas sumadas: un apilado fijo —-25, 21, 67 y 117
   unidades del lienzo, que son los cantos de las cuatro superficies— y un
   deslizamiento que es el del ratón. En reposo salen las tres bandas de 46, 46
   y 50 que forman la cinta; al mover la mano se deslizan a lo largo de la
   curva, unas se ensanchan y otras se estrechan, y en la caída del centro se
   adelantan unas a otras y el orden se invierte.

   El deslizamiento es sobre todo lateral a propósito: en los tramos casi
   horizontales no se nota, y en la ese es donde tiene que verse.

   Lo que se ve de cada banda es la distancia hasta la de abajo, así que separar
   dos bandas las ensancha en vez de abrir un hueco. La cuarta lleva el color
   del fondo y copia el desplazamiento de la tercera: es el canto inferior de la
   cinta, y por eso la banda oscura conserva sus 50 pase lo que pase. */
.cinta__capa--1{color:var(--cinta-claro);
  transform:translate(calc(var(--sx) * 1.2),calc(-25px + var(--sy) * 1.2 + var(--desp) * .10))}
.cinta__capa--2{color:var(--cinta-medio);
  transform:translate(calc(var(--sx) * 3.6),calc(21px + var(--sy) * 2.4 + var(--desp) * .20))}
.cinta__capa--3{color:var(--cinta-oscuro);
  transform:translate(calc(var(--sx) * 6),calc(67px + var(--sy) * 3.6 + var(--desp) * .30))}
.cinta__capa--4{color:var(--cinta-fondo);
  transform:translate(calc(var(--sx) * 6),calc(117px + var(--sy) * 3.6 + var(--desp) * .30))}

/* Grano. Es un mosaico diminuto que el navegador rasteriza una vez y repite:
   un filtro de turbulencia a pantalla completa costaba lo mismo cada fotograma
   y aquí no aporta nada que no dé una textura repetida. */
.hablamos__grano{position:absolute;inset:0;opacity:.17;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E")}

/* La palabra vive en la mitad de arriba y la cinta cruza por debajo: pisadas
   una encima de otra, la banda crema y el frente del rótulo se fundían. */
.hablamos__caja{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:var(--space-6) 0 0;perspective:900px}

.hablamos__palabra{position:relative;display:inline-block;text-decoration:none;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:.92;
  /* El tope de 148px es el que deja la palabra entera dentro de la caja de
     1000px contando los ecos; por encima, el «?» se comía el margen. */
  font-size:clamp(40px,11.5vw,148px);
  transform:rotateX(var(--giro-x)) rotateY(var(--giro-y));
  transform-style:preserve-3d;will-change:transform}
.hablamos__palabra .eco{position:absolute;left:0;top:0;width:100%;
  pointer-events:none;user-select:none;will-change:transform}
/* Los mismos tres colores de la cinta, en el mismo orden y con el mismo vector:
   la palabra es una banda más de la composición. */
.eco--2{color:var(--cinta-oscuro);transform:translate3d(calc(var(--sx) * 2.4),calc(var(--sy) * 2.4),0)}
.eco--1{color:var(--cinta-medio);transform:translate3d(calc(var(--sx) * 1.2),calc(var(--sy) * 1.2),0)}
.hablamos__palabra .frente{position:relative;display:block;color:var(--cinta-claro)}

.hablamos__pie{margin-top:var(--space-5);font-size:13px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,220,192,.62)}
.hablamos__pie a{color:var(--cinta-claro);text-decoration:none;
  border-bottom:2px solid var(--cinta-medio)}
.hablamos__pie a:hover{color:var(--cinta-medio)}
/* El botón del giroscopio nace oculto y solo lo enseña el script en un aparato
   táctil que además pida permiso —iOS—. En escritorio no aparece nunca: ahí la
   sombra ya la mueve el ratón. */
.hablamos__giro{margin-top:var(--space-4);background:none;
  border:1px solid rgba(243,220,192,.34);color:rgba(243,220,192,.72);
  font:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:.7em 1.2em;cursor:pointer}
.hablamos__giro[hidden]{display:none}
.hablamos__giro:hover{color:var(--cinta-claro);border-color:var(--cinta-claro)}

@media (prefers-reduced-motion:reduce){
  .hablamos{--sx:.05em;--sy:.055em;--giro-x:0deg;--giro-y:0deg;--desp:0px}
}

/* ── Listas de contenido ─────────────────────────────────────
   Todo lo que antes era una tarjeta es ahora una lista con filetes: un rótulo
   pequeño, un título y una línea de texto. */
.lista{list-style:none;margin:0;padding:0}
.lista li{border-top:1px solid var(--borde);padding:1.1em 0}
.lista li:last-child{border-bottom:1px solid var(--borde)}
.lista__titulo{display:block;font-size:19px;font-weight:600;color:var(--tinta);line-height:1.3}
@media (min-width:783px){.lista__titulo{font-size:22px}}
.lista__texto{display:block;font-size:15px;font-weight:300;color:var(--tinta-cuerpo);margin-top:.3em}
.lista a{text-decoration:none;display:block;color:inherit}
.lista a:hover .lista__titulo{color:var(--acento-fuerte)}
.lista a .lista__titulo::after{content:" →";color:var(--tinta-suave);font-weight:300}
/* Cuando la entrada tiene marca propia, el logotipo va a la izquierda y el
   nombre a su derecha. Apilado encima —que es como estaba— cada logotipo caía
   a una altura distinta según su proporción y la lista no tenía eje. */
/* El selector lleva el «a» delante a propósito: sin él, el display:block de
   .lista a ganaba por especificidad y la rejilla no llegaba a aplicarse. */
.lista a.lista__enlace--marca{display:grid;grid-template-columns:56px 1fr;
  gap:var(--space-4);align-items:center}
@media (min-width:783px){.lista a.lista__enlace--marca{grid-template-columns:68px 1fr}}
.lista__logo{display:block;width:100%;height:56px;object-fit:contain;object-position:left center}
@media (min-width:783px){.lista__logo{height:68px}}


/* Pares dato/valor: la ficha técnica de una sección. */
.datos{list-style:none;margin:0;padding:0}
.datos li{border-top:1px solid var(--borde);padding:.9em 0}
.datos li:last-child{border-bottom:1px solid var(--borde)}
.datos dt,.datos__clave{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);display:block;margin-bottom:.25em}
.datos dd,.datos__valor{font-size:16px;font-weight:300;color:var(--tinta-cuerpo);margin:0}

/* ── Cita ────────────────────────────────────────────────────
   La que preside la web desde su primera versión. */
.cita{margin:0;max-width:var(--medida)}
.cita blockquote{margin:0}
.cita p{font-size:21px;font-weight:300;font-style:italic;color:var(--tinta-cuerpo);line-height:1.5}
@media (min-width:783px){.cita p{font-size:24px}}
.cita p::before{content:"“"}
.cita p::after{content:"”"}
.cita figcaption{margin-top:var(--space-4);font-size:13px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave)}

/* ── Cierre ──────────────────────────────────────────────────
   La llamada del final de cada página. Sigue siendo blanca; lo que la separa
   del resto es un filete y el botón. */
.cierre{border-top:1px solid var(--borde);padding:var(--space-7) 0}
@media (min-width:783px){.cierre{padding:4.5em 0}}
.cierre .titular{margin-bottom:.4em}
.cierre p{font-size:19px;font-weight:300;margin-bottom:var(--space-5);max-width:var(--medida)}

/* ── Fotografía a sangre ─────────────────────────────────────
   Una franja de fotografía del ancho de la ventana. En la portada es la
   naranja: el héroe se lleva la primera pantalla, pero el color de la casa
   tenía que salir en algún sitio. */
.foto-sangre{margin:0}
.foto-sangre img{display:block;width:100%;height:clamp(200px,30vw,360px);
  object-fit:cover;object-position:center 62%}

/* ── Galería: mosaico y visor ────────────────────────────────
   El mosaico va en columnas de CSS: cada foto conserva su proporción y las
   piezas se reparten solas, sin recortar nada ni pedir una sola línea de
   JavaScript. Recortarlas todas a una caja común arruinaría los panorámicos.

   Al pulsar una se abre el visor, que enseña una foto cada vez a pantalla
   completa. Sin script el enlace lleva a la imagen original, así que no hay
   ninguna foto a la que no se pueda llegar. */
.galeria{columns:250px 3;column-gap:var(--space-4);margin-top:var(--space-6)}
.galeria__pieza{break-inside:avoid;margin:0 0 var(--space-4)}
.galeria__enlace{display:block;text-decoration:none}
.galeria__enlace img{display:block;width:100%;height:auto;background:var(--bruma);
  transition:opacity .2s ease}
.galeria__enlace:hover img{opacity:.78}
.galeria__enlace:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:3px}
@media (max-width:640px){
  .galeria{columns:150px 2;column-gap:var(--space-3)}
  .galeria__pieza{margin-bottom:var(--space-3)}
}

/* El visor ocupa la ventana entera y es blanco, como el resto del sitio: un
   fondo negro habría metido aquí el único bloque oscuro de la web. */
.visor{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;
  border:0;background:var(--papel);color:var(--tinta);overflow:hidden}
.visor[open]{display:flex;flex-direction:column}
.visor::backdrop{background:rgba(255,255,255,.94)}
.visor__cerrar{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:var(--papel);border:1px solid var(--borde-fuerte);color:var(--tinta);
  cursor:pointer;transition:border-color .2s ease}
.visor__cerrar:hover{border-color:var(--tinta)}

/* ── La tira del visor ───────────────────────────────────────
   Una foto por pantalla y ninguna asomando por el borde: un visor que enseña
   media foto siguiente no es un visor, es una tira de contactos. Cada lámina
   mide el ancho entero, así que el enganche del scroll y las flechas llevan
   siempre de una foto a la de al lado, y en el móvil se pasa con el dedo sin
   que haga falta ningún script. */
.pases{flex:1;display:flex;flex-direction:column;min-height:0}
.pases__pista{flex:1;display:flex;min-height:0;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.pases__pista::-webkit-scrollbar{display:none}
.pases__pista:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:-4px}
.pase{flex:0 0 100%;scroll-snap-align:center;margin:0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-4);padding:var(--space-8) 2em var(--space-4)}
/* La altura se acota contra la ventana y no contra la lámina: así la foto nunca
   empuja al pie de mandos fuera de la pantalla. Los 210px son lo que ocupan el
   aire de arriba, el pie de foto y la fila de botones. */
.pase img{max-width:100%;max-height:calc(100vh - 210px);width:auto;height:auto}
.pase figcaption{font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave);text-align:center}

.pases__mando{display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-4) 2em;border-top:1px solid var(--borde)}
.pases__mando[hidden]{display:none}
.pases__flecha{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:1px solid var(--borde-fuerte);color:var(--tinta);cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.pases__flecha:hover{border-color:var(--tinta)}
.pases__flecha[disabled]{opacity:.25;cursor:default;border-color:var(--borde)}
.pases__cuenta{min-width:5em;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:.14em;color:var(--tinta-suave)}

@media (max-width:640px){
  .pase{padding:var(--space-6) 1.2em var(--space-3)}
  .pase img{max-height:calc(100vh - 180px)}
  .pases__mando{padding:var(--space-3) 1.2em}
}
@media (prefers-reduced-motion:reduce){.pases__pista{scroll-behavior:auto}}

/* ── Prosa: páginas legales y personales ─────────────────── */
.prosa{max-width:var(--medida)}
.prosa>*+*{margin-top:1.1em}
.prosa h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);margin-top:2.4em}
.prosa h3{font-size:18px;font-weight:600;color:var(--tinta);margin-top:1.8em}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li+li{margin-top:.4em}
.prosa a{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prosa a:hover{color:var(--acento-fuerte)}
.prosa table{width:100%;border-collapse:collapse;font-size:15px;font-weight:300}
.prosa th,.prosa td{text-align:left;padding:.7em 1em .7em 0;border-bottom:1px solid var(--borde);vertical-align:top}
.prosa th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.prosa .aviso{border-left:3px solid var(--acento);padding-left:var(--space-4);font-size:15px}


/* ── Formulario de contacto ──────────────────────────────────
   Campos con filete abajo y nada más: un recuadro completo alrededor de cada
   caja devolvía el aire de formulario de aplicación que aquí sobra. */
.form-grid{display:flex;flex-direction:column;gap:var(--space-5);max-width:34em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.5em}
.field input,.field textarea,.field select{width:100%;font-family:var(--f-texto);font-size:17px;
  font-weight:300;color:var(--tinta);background:var(--papel);border:0;border-bottom:1px solid var(--borde-fuerte);
  border-radius:0;padding:.5em 0}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--acento)}
.field textarea{resize:vertical;min-height:6em}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2em;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:16px}
.check{display:flex;gap:.7em;align-items:flex-start;font-size:14px;font-weight:300;color:var(--tinta-cuerpo)}
.check input{margin-top:.35em;accent-color:var(--acento-fuerte);width:16px;height:16px;flex-shrink:0}
.check a{color:var(--tinta)}
.form-status{display:block;padding:var(--space-4) 0}
.form-status--ok{border-top:2px solid #1E7B45;border-bottom:1px solid var(--borde);color:#14532D}
.form-status--ok strong{display:block;margin-bottom:.2em}
.form-status--error{border-top:2px solid #B3261E;border-bottom:1px solid var(--borde);color:#7F1D1D}
.form-status--error span{display:block}
/* Aviso de configuración pendiente. Solo se pinta en local (ver
   inc/parts/contacto.php): es para quien monta el sitio, no para quien lo lee. */
.form-status--aviso{border-top:2px solid #B58900;border-bottom:1px solid var(--borde);color:#7A5B00}
.form-status--aviso strong{display:block;margin-bottom:.2em}
.form-status--aviso span{display:block}

/* ── Pie ─────────────────────────────────────────────────────
   Columnas de enlaces separados por filetes, con el rótulo pequeño arriba.
   Es la misma pieza que la lista del contenido, en menor tamaño. */
.pie{border-top:1px solid var(--borde);padding:var(--space-8) 0 var(--space-6);
  font-size:15px;font-weight:300;color:var(--tinta-cuerpo)}
/* La marca y los perfiles comparten la primera línea del pie, y las columnas
   de enlaces vienen debajo. Cinco columnas en una sola fila no caben en 1000px
   sin dejar los enlaces partidos por la mitad. */
.pie-marca{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
  flex-wrap:wrap;padding-bottom:var(--space-6);margin-bottom:var(--space-7);
  border-bottom:1px solid var(--borde)}
.pie-marca .marca__nombre{font-size:20px}
/* Las columnas se reparten solas: al añadir la de proyectos, cuatro huecos
   fijos partían los enlaces largos por la mitad. */
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--space-7) var(--space-5)}
@media (max-width:420px){.pie-rejilla{grid-template-columns:1fr}}
.pie h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);margin-bottom:var(--space-3)}
.pie-rejilla ul{list-style:none}
.pie-rejilla li{border-bottom:1px solid var(--borde)}
.pie-rejilla li:first-child{border-top:1px solid var(--borde)}
.pie-rejilla a{text-decoration:none;display:block;padding:.55em 0;font-size:15px;transition:color .2s ease}
.pie-rejilla a:hover{color:var(--acento-fuerte)}
.pie-lema{font-size:15px;font-weight:300;max-width:32ch;margin-top:var(--space-4)}

/* Los tres perfiles públicos, en el mismo círculo gris de la web original. */
/* Los filetes son cosa de las columnas de enlaces: aquí colgaban una línea
   suelta encima del primer perfil. */
.redes{display:flex;gap:.8em;list-style:none;margin:0;padding:0}
.redes a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--tinta-suave);color:var(--papel);padding:0;
  transition:background .2s ease}
.redes a:hover{background:var(--tinta);color:var(--papel)}

.pie-legal{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  align-items:center;padding-top:var(--space-6);margin-top:var(--space-7);
  border-top:1px solid var(--borde);font-size:13px;color:var(--tinta-suave)}

/* ── Migas ───────────────────────────────────────────────── */
.breadcrumb{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:var(--space-4)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--tinta)}
.breadcrumb span[aria-hidden]{margin:0 .5em;opacity:.6}

/* ── Banner de cookies ───────────────────────────────────────
   Una franja al pie de la ventana, del ancho de la página y con filete
   arriba. Ni tarjeta flotante ni sombra. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--papel);
  border-top:2px solid var(--tinta);padding:var(--space-5) 0}
.consent[hidden]{display:none}
.consent>.wrap{display:grid;gap:var(--space-4);align-items:center}
@media (min-width:783px){.consent>.wrap{grid-template-columns:1fr auto}}
.consent h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4em}
.consent p{font-size:14px;font-weight:300;color:var(--tinta-cuerpo);max-width:60ch}
.consent a{color:var(--tinta)}
.consent__acciones{display:flex;gap:.7em;flex-wrap:wrap}
.consent__acciones .btn{padding:.9em 1.4em;font-size:12px}

/* ── Buscador ────────────────────────────────────────────── */
.buscador{display:flex;gap:var(--space-4);align-items:flex-end;max-width:34em}
.buscador .field{flex:1}
.resultados{list-style:none;margin:0;padding:0}
.resultados li{border-top:1px solid var(--borde);padding:1.2em 0}
.resultados li:last-child{border-bottom:1px solid var(--borde)}
.resultados h2{font-size:19px;font-weight:600;margin-bottom:.2em}
.resultados a{text-decoration:none}
.resultados a:hover{color:var(--acento-fuerte)}
.resultados p{font-size:15px;font-weight:300}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}