/* ==========================================================================
   Cristina Lodeiro — hoja de estilos única
   Los valores de este bloque :root son el reflejo de brand/tokens/design-tokens.json.
   Si cambia uno, cambian los dos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografías autoalojadas
   Se sirven desde el propio dominio: nunca desde fonts.googleapis.com.
   Descarga: `npm run fonts`. Si los archivos no están, la pila de reserva
   del sistema mantiene el sitio legible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color

     Ritmo de valor: el sitio alterna claro y oscuro a plena anchura. Sin ese
     salto, una página de un solo valor de blanco se lee plana por muy buena
     que sea la tipografía. Orden de arriba abajo:
       portada hueso → principios azul noche → método hueso → contacto tinta
       cálida → pie azul noche
     Ver brand/README.md § «Ritmo de valor». */
  --ink: #1a1a1a;
  --bone: #f9f8f6;
  /* Escalón intermedio: separa secciones claras sin recurrir a un filete */
  --bone-deep: #f1efea;
  /* Calidez de la portada. Un papel nunca es plano */
  --bone-warm: #fffdf9;
  --navy: #0e1b2a;
  /* Azul un punto más profundo para degradar dentro del bloque oscuro */
  --navy-deep: #0a141f;
  --champagne: #c6a982;
  /* Champán legible sobre azul noche (6.6:1) */
  --champagne-soft: #d8c3a4;
  /* Texto secundario sobre azul noche (9.4:1) */
  --bone-muted: #b9c1cb;
  --ink-60: #5c5c5c;
  --ink-30: #9a9894;
  --rule: #e2dfda;
  --rule-dark: #233246;
  --error: #8c2f2f;
  --success: #3d5c46;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Ogg', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-body:
    'Inter', 'SF Pro Text', 'Helvetica Now Text', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 5.4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --track-eyebrow: 0.32em;

  /* Espacio */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;
  --s-16: 8rem;
  --s-section: clamp(5rem, 12vw, 10rem);
  --gutter: clamp(1.5rem, 6vw, 6rem);

  /* Medidas */
  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 760px;

  /* Movimiento */
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la cabecera adherida al saltar a un ancla */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* Pie pegado al fondo: en una página corta —el 404, sin ir más lejos— el
     contenido no llega abajo y se veía el fondo del body bajo el pie. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Grano de papel.
   Una capa de ruido al 3 % sobre todo el documento. No se ve: se nota. Es lo
   que separa «fondo blanco de navegador» de «papel de algodón», y es la razón
   de que las marcas de lujo impriman en verjurado y no en satinado.
   El ruido va incrustado como data URI: ninguna petición, ningún tercero.

   Es un PNG de 128×128, no un filtro `feTurbulence` en un data URI. El motivo
   es de coste: un mosaico se decodifica una vez y el compositor lo repite,
   mientras que el filtro SVG hay que rasterizarlo, y aplicado con
   `mix-blend-mode` sobre una capa fija a pantalla completa obliga además a
   mezclar con todo lo que tiene detrás en cada repintado. El resultado visual
   es idéntico y este es mucho más barato.

   Se genera con `npm run grain` (semilla fija: el archivo sale idéntico en
   cada ejecución). Si falta, no pasa nada: la página se ve sin textura. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.055;
  background-image: url('/assets/img/grain.png');
  background-size: 128px 128px;
}

@media print {
  body::after {
    display: none;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--s-3);
  max-width: var(--measure);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* Foco visible, discreto y suficiente */
:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 4px;
}

::selection {
  background: var(--champagne);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   4. Utilidades
   -------------------------------------------------------------------------- */
.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-narrow {
  max-width: var(--container-narrow);
}

/* El antetítulo lleva un filete champán delante. Es el único sitio donde el
   acento aparece de forma sistemática, y basta para que el oro esté presente
   en toda la página sin colorear nada. */
.u-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 var(--s-3);
}

.u-eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--champagne);
}

.u-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-60);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-skip {
  position: absolute;
  left: var(--s-2);
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--bone);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  transition: top var(--dur-fast) var(--ease);
}

.u-skip:focus {
  top: var(--s-2);
}

/* Enlace con subrayado que crece desde la izquierda */
.u-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition:
    background-size var(--dur-base) var(--ease),
    color var(--dur-fast) var(--ease);
}

.u-link:hover {
  color: var(--ink-60);
}

/* Revelación al entrar en pantalla */
.u-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.u-reveal.is-visible,
.no-js .u-reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Cabecera
   -------------------------------------------------------------------------- */
/* La cabecera es azul noche, no hueso.
   Dos motivos, y el segundo pesa más que el primero:
   1. Le da a la página un borde superior definido. Sin él, el hueso arranca
      sin principio y todo se lee como un folio suelto.
   2. Permite que la marca aparezca en negativo, que es donde el monograma
      funciona. Con la cabecera en blanco, lo único identificable arriba era
      el nombre compuesto en una serif: eso se lee como texto, no como marca. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  color: var(--bone);
  border-bottom: 1px solid rgb(198 169 130 / 35%);
  transition: box-shadow var(--dur-base) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 24px rgb(14 27 42 / 18%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 5.25rem;
}

/* --- Marca --------------------------------------------------------------
   Monograma · filete champán · nombre. Es el mismo bloque del logotipo
   horizontal, comprimido para una barra de navegación. El monograma va en
   línea y no como <img> para que herede el color del texto. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand__mark {
  height: 38px;
  width: auto;
  flex: none;
  color: var(--bone);
  transition: color var(--dur-base) var(--ease);
}

.brand:hover .brand__mark {
  color: var(--champagne-soft);
}

.brand__rule {
  flex: none;
  width: 1px;
  height: 34px;
  background: rgb(198 169 130 / 55%);
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}

.brand__role {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bone-muted);
  white-space: nowrap;
  margin-left: 0.35rem;
}

@media (max-width: 860px) {
  .brand__role {
    display: none;
  }
}

@media (max-width: 460px) {
  /* En pantallas estrechas manda el monograma: es lo identificable */
  .brand__name {
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
  }

  .brand__mark {
    height: 32px;
  }
}

@media (max-width: 380px) {
  /* Solo el monograma. El nombre lleva nowrap y a partir de aquí desbordaba */
  .brand__name,
  .brand__rule {
    display: none;
  }
}

/* --- Selector de idioma --------------------------------------------------
   Un solo control en reposo. Tres botones sueltos en la cabecera ocupan sitio
   y compiten con la marca; además obligan a leer las tres opciones aunque no
   se quiera cambiar nada. El desplegable muestra los nombres completos, que
   son más claros que los códigos de dos letras. */
.lang {
  position: relative;
  flex: none;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lang__toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid transparent;
  padding: 0.45rem 0.7rem;
  font: inherit;
  letter-spacing: inherit;
  color: var(--bone);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.lang__toggle:hover,
.lang__toggle[aria-expanded='true'] {
  border-color: rgb(198 169 130 / 45%);
}

.lang__chevron {
  flex: none;
  color: var(--champagne);
  transition: transform var(--dur-base) var(--ease);
}

.lang__toggle[aria-expanded='true'] .lang__chevron {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 50;
  min-width: 9.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--navy);
  border: 1px solid rgb(198 169 130 / 35%);
  box-shadow: 0 12px 32px rgb(10 20 31 / 35%);
}

.lang__opt {
  appearance: none;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  padding: 0.7rem 1rem;
  font: inherit;
  letter-spacing: 0.14em;
  text-align: left;
  color: #8d97a4;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.lang__menu li:first-child .lang__opt {
  border-top: 0;
}

.lang__opt:hover {
  color: var(--bone);
  background: rgb(255 255 255 / 4%);
}

.lang__opt[aria-current='true'] {
  color: var(--bone);
  box-shadow: inset 2px 0 0 0 var(--champagne);
}

/* Con JavaScript el menú arranca cerrado ya en el primer pintado: si se
   dejara a que main.js pusiera el atributo, se vería abierto un instante. */
.js .lang__menu {
  display: none;
}

.js .lang__menu:not([hidden]) {
  display: block;
}

/* Sin JavaScript no hay desplegable que valga: se muestran las tres opciones
   en línea y se oculta el control de apertura. Cambiar de idioma tiene que
   seguir funcionando; un selector que solo va con JS deja fuera al gallego y
   al inglés en cuanto algo falle. */
.no-js .lang__toggle {
  display: none;
}

.no-js .lang__menu {
  position: static;
  display: flex;
  min-width: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.no-js .lang__opt {
  border-top: 0;
  padding: 0.45rem 0.6rem;
}

/* --------------------------------------------------------------------------
   6. Portada
   -------------------------------------------------------------------------- */
.hero {
  /* Calidez a plena anchura. La transición es de apenas un 2 % de luminosidad:
     no se percibe como degradado, se percibe como luz entrando por la
     izquierda. Si se nota, está mal calibrada. */
  background:
    radial-gradient(115% 85% at 12% -5%, var(--bone-warm) 0%, transparent 62%), var(--bone);
  padding-block: var(--s-12) var(--s-16);
}

.hero__inner {
  display: grid;
  gap: var(--s-8);
  min-height: min(72svh, 700px);
  align-content: center;
}

@media (min-width: 1000px) {
  .hero__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--s-12);
    align-items: end;
  }
}

.hero__statement {
  font-size: var(--fs-hero);
  max-width: 17ch;
  margin: 0 0 var(--s-6);
}

.hero__lead {
  max-width: 44ch;
  margin-bottom: var(--s-8);
}

/* --- Índice de portada -----------------------------------------------------
   La versión anterior dejaba media pantalla vacía a la derecha del titular.
   El espacio negativo es material de marca, pero un hueco sin función es otra
   cosa. Este índice llena la columna con algo útil: los cuatro principios, que
   son el mensaje, accesibles de un clic desde el primer pantallazo. */
.hero-index {
  border-top: 1px solid var(--rule);
}

@media (min-width: 1000px) {
  .hero-index {
    padding-bottom: 0.5rem;
  }
}

.hero-index__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-30);
  margin: var(--s-2) 0 var(--s-1);
}

.hero-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-index li + li {
  border-top: 1px solid var(--rule);
}

.hero-index a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: 0.7rem;
  transition: color var(--dur-fast) var(--ease);
}

.hero-index a:hover {
  color: var(--ink-60);
}

.hero-index__n {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  color: var(--champagne);
  flex: none;
}

.hero-index__t {
  font-family: var(--font-display);
  font-size: 1.15rem;
  flex: 1;
}

.hero-index__arrow {
  flex: none;
  color: var(--ink-30);
  transition: transform var(--dur-base) var(--ease);
}

.hero-index a:hover .hero-index__arrow {
  transform: translateX(4px);
}

.hero__cta {
  display: inline-flex;
  /* 27 px medidos era poco para un dedo: la WCAG pide 24 y en móvil se nota */
  padding-block: 0.5rem;
  /* La portada es un contenedor flex en columna: sin esto el enlace se
     estiraría a todo el ancho y el filete inferior con él. */
  align-self: flex-start;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--ink);
  transition:
    gap var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.hero__cta:hover {
  gap: var(--s-3);
  border-bottom-color: var(--champagne);
}

.hero__cta svg {
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Secciones
   -------------------------------------------------------------------------- */
/* Las secciones ya no se separan con filetes: se separan con valor. Un cambio
   de fondo hace el trabajo de un borde y además da profundidad a la página. */
.section {
  padding-block: var(--s-section);
}

.section__head {
  margin-bottom: var(--s-8);
}

.section__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

/* --- Sección oscura --------------------------------------------------------
   El ancla visual de la página. Ocupa toda la anchura, lleva el monograma
   como filigrana y es donde el champán por fin tiene contraste suficiente
   para leerse (6,6:1 sobre azul noche, frente a 2,4:1 sobre hueso). */
.section--dark {
  position: relative;
  /* `clip`, no `hidden`.
     `overflow: hidden` recorta, pero además convierte el elemento en
     contenedor desplazable. Al pulsar un enlace del índice, el navegador
     desplaza ese contenedor en lugar de la página: el bloque se movía dentro
     de su propia caja, el titular y los dos primeros principios quedaban
     recortados por arriba y la filigrana acababa en mitad de la sección.
     `overflow: clip` recorta sin crear contenedor desplazable. */
  overflow: clip;
  background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--bone);
}

.section--dark::after {
  content: '';
  position: absolute;
  right: -7%;
  bottom: -22%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  background: url('/assets/brand/cl-monograma-negativo.svg') no-repeat center / contain;
  opacity: 0.055;
  pointer-events: none;
}

.section--dark > .u-container {
  position: relative;
  z-index: 1;
}

.section--dark .u-eyebrow {
  color: var(--champagne-soft);
}

.section--dark .u-eyebrow::before {
  background: var(--champagne);
}

.section--dark .u-lead {
  color: var(--bone-muted);
}

/* Escalón cálido intermedio. Separa dos secciones claras sin oscurecerlas. */
.section--tint {
  position: relative;
  /* `clip`, no `hidden`.
     `overflow: hidden` recorta, pero además convierte el elemento en
     contenedor desplazable. Al pulsar un enlace del índice, el navegador
     desplaza ese contenedor en lugar de la página: el bloque se movía dentro
     de su propia caja, el titular y los dos primeros principios quedaban
     recortados por arriba y la filigrana acababa en mitad de la sección.
     `overflow: clip` recorta sin crear contenedor desplazable. */
  overflow: clip;
  background: var(--bone-deep);
  border-top: 1px solid var(--rule);
}

/* Filigrana en la columna izquierda del contacto, que quedaba vacía bajo el
   correo. Al 4,5 % no compite con nada: solo evita que ese cuarto de pantalla
   sea un hueco. Se oculta en móvil, donde no hay hueco que llenar. */
.section--tint::after {
  content: '';
  position: absolute;
  left: -4%;
  bottom: -16%;
  width: min(34vw, 400px);
  aspect-ratio: 1;
  background: url('/assets/brand/cl-monograma.svg') no-repeat center / contain;
  opacity: 0.045;
  pointer-events: none;
}

@media (max-width: 900px) {
  .section--tint::after {
    display: none;
  }
}

.section--tint > .u-container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   8. Los cuatro principios
   Rejilla en escritorio, acordeón en móvil. El atributo `open` de cada
   <details> lo gestiona main.js según el ancho de ventana; sin JS quedan
   como acordeón funcional en todas las anchuras.
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.pillar {
  border-bottom: 1px solid var(--rule);
}

.pillar__summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

.pillar__summary::-webkit-details-marker {
  display: none;
}

.pillar__summary:hover {
  color: var(--ink-60);
}

.pillar__index {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  color: var(--champagne);
  flex: none;
  transform: translateY(-0.15em);
}

.pillar__title {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  flex: 1;
}

.pillar__mark {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  align-self: center;
}

.pillar__mark::before,
.pillar__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink-30);
  transition: transform var(--dur-base) var(--ease);
}

.pillar__mark::after {
  transform: rotate(90deg);
}

.pillar[open] .pillar__mark::after {
  transform: rotate(0deg);
}

.pillar__body {
  padding: 0 0 var(--s-4) calc(var(--s-3) + 1.6rem);
  color: var(--ink-60);
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-12);
    border-top: 0;
  }

  .pillar {
    border-bottom: 0;
    border-top: 1px solid var(--rule);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }

  .pillar__summary {
    padding-block: 0 var(--s-3);
    cursor: default;
    pointer-events: none;
  }

  .pillar__mark {
    display: none;
  }

  /* En escritorio el contenido está siempre visible, esté o no `open` */
  .pillar > .pillar__body {
    display: block;
    padding: 0;
  }
}

/* Los principios sobre azul noche */
.section--dark .pillars,
.section--dark .pillar {
  border-color: var(--rule-dark);
}

.section--dark .pillar__title {
  color: var(--bone);
}

.section--dark .pillar__body {
  color: var(--bone-muted);
}

.section--dark .pillar__index {
  color: var(--champagne-soft);
}

.section--dark .pillar__summary:hover {
  color: var(--champagne-soft);
}

.section--dark .pillar__mark::before,
.section--dark .pillar__mark::after {
  background: var(--bone-muted);
}

@media (min-width: 900px) {
  /* Filete champán al 30 % encabezando cada principio. Casi no se ve, y es
     exactamente por eso que funciona. */
  .section--dark .pillar {
    border-top-color: rgb(198 169 130 / 30%);
  }
}

/* --------------------------------------------------------------------------
   9. Método
   -------------------------------------------------------------------------- */
.approach__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .approach__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-12);
    align-items: start;
  }
}

.approach__body p + p {
  margin-top: var(--s-3);
}

.approach__body p:first-child {
  font-size: var(--fs-lead);
  color: var(--ink);
}

/* Franja de datos al cierre del método. Tres hechos comprobables, en filete.
   Aporta un tercer nivel de escala tipográfica a una página que solo tenía
   titular grande y cuerpo pequeño. */
/* Flex y no rejilla de columnas fijas: los datos son dos, y una rejilla de
   tres los estiraría a lo ancho dejando una columna muerta. Así cada uno ocupa
   lo que mide y se pueden añadir o quitar sin tocar el CSS. */
.details-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-12);
  margin-top: var(--s-12);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.detail__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-30);
  margin-bottom: var(--s-1);
}

.detail__value {
  /* El navegador sangra los <dd> 40 px por defecto y descuadra la columna */
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. Contacto
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-12);
    align-items: start;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.field__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--s-1);
}

.field__input,
.field__textarea {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s-2) 0;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease);
}

.field__textarea {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.6;
}

.field__input:hover,
.field__textarea:hover {
  border-bottom-color: var(--ink-30);
}

/* Sobre la tinta cálida del contacto, el filete gris claro casi desaparece.
   Un punto más oscuro y el campo vuelve a leerse como campo. */
.section--tint .field__input,
.section--tint .field__textarea {
  border-bottom-color: #d6d1c9;
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
}

.field__input:focus-visible,
.field__textarea:focus-visible {
  outline: none;
}

.field__error {
  font-size: var(--fs-small);
  color: var(--error);
  margin-top: var(--s-1);
  min-height: 1.25rem;
}

.field[data-invalid='true'] .field__input,
.field[data-invalid='true'] .field__textarea {
  border-bottom-color: var(--error);
}

/* Trampa antispam: fuera de pantalla, nunca oculta con display:none
   (algunos robots ignoran los campos ocultos de ese modo) */
.field--trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentimiento */
.consent-field {
  display: flex;
  /* Gana a `flex-direction: column` de .field, que este bloque también lleva */
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s-2);
}

.consent-field input[type='checkbox'] {
  appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25rem;
  border: 1px solid var(--ink-30);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.consent-field input[type='checkbox']:checked {
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.7 9 10 3.4' fill='none' stroke='%23F9F8F6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.consent-field label {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 52ch;
}

.consent-field a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-30);
}

/* El <label> del consentimiento es de línea: sin esto el mensaje de error se
   pegaría al final del texto legal y parecería parte de él. */
.consent-field .field__error {
  display: block;
}

/* Botón */
.btn {
  appearance: none;
  align-self: flex-start;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 1rem 2.5rem;
  font-family: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.btn:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}

.btn:disabled {
  opacity: 0.45;
  cursor: progress;
}

/* Mensaje de estado del formulario */
.form__status {
  font-size: var(--fs-small);
  line-height: 1.6;
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 1px solid var(--ink-30);
  max-width: var(--measure);
}

.form__status:empty {
  display: none;
}

.form__status[data-state='success'] {
  border-left-color: var(--success);
  color: var(--success);
}

.form__status[data-state='error'] {
  border-left-color: var(--error);
  color: var(--error);
}

/* Bloque de contacto directo */
/* En contacto el titular no vive dentro de .section__head, así que lleva su
   propio ritmo vertical. */
.contact__aside .section__title {
  margin-bottom: var(--s-3);
}

.contact__aside .u-lead {
  margin-bottom: var(--s-6);
}

.contact__aside dl {
  margin: 0;
  display: grid;
  gap: var(--s-4);
}

.contact__aside dt {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-30);
  margin-bottom: var(--s-1);
}

.contact__aside dd {
  margin: 0;
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   11. Pie
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  /* Filete champán cerrando la página. Cierra el círculo abierto por los
     antetítulos: el acento entra y sale por el mismo sitio. */
  border-top: 1px solid rgb(198 169 130 / 35%);
  color: var(--bone);
  padding-block: var(--s-12) var(--s-6);
}

.site-footer a {
  color: var(--bone);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-12);
    align-items: start;
  }
}

/* El logotipo completo, no el monograma suelto: es la firma de la página */
.site-footer__mark {
  width: min(300px, 82%);
  height: auto;
  margin-bottom: var(--s-4);
}

.site-footer__legal {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--bone-muted);
  max-width: 46ch;
}

.site-footer__legal strong {
  color: var(--bone);
  font-weight: 500;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
}

.footer-nav a,
.footer-nav button {
  appearance: none;
  background: none;
  border: 0;
  /* Alto táctil en lugar de separación con gap: el hueco entre enlaces pasa a
     formar parte del área pulsable en vez de ser espacio muerto. */
  padding: 0.45rem 0;
  font: inherit;
  color: #b9c1cb;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.footer-nav a:hover,
.footer-nav button:hover {
  color: var(--bone);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-12);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--fs-small);
  color: #8d97a4;
}

/* --------------------------------------------------------------------------
   12. Aviso de cookies
   Solo se inserta en el DOM si hay categorías opcionales activas
   (ver public/assets/js/consent.js).
   -------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--bone);
  border-top: 1px solid var(--rule);
  padding: var(--s-4) 0;
  box-shadow: 0 -1px 40px rgb(26 26 26 / 6%);
}

.cookie-bar__inner {
  display: grid;
  gap: var(--s-3);
  align-items: center;
}

@media (min-width: 900px) {
  .cookie-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

.cookie-bar__text {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 68ch;
  margin: 0;
}

.cookie-bar__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Las tres acciones tienen el mismo peso visual: aceptar no destaca sobre
   rechazar. Es un requisito de la guía de cookies de la AEPD, no un capricho. */
.cookie-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.7rem 1.4rem;
  font-family: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.cookie-btn:hover {
  background: var(--ink);
  color: var(--bone);
}

/* Panel de preferencias */
.cookie-panel {
  border: 0;
  padding: 0;
  width: min(560px, calc(100vw - 2rem));
  background: var(--bone);
  color: var(--ink);
}

.cookie-panel::backdrop {
  background: rgb(14 27 42 / 55%);
}

.cookie-panel__inner {
  padding: var(--s-6);
}

.cookie-panel h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-4);
}

.cookie-cat {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-3);
}

.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-1);
}

.cookie-cat__title {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-cat__body {
  font-size: var(--fs-small);
  color: var(--ink-60);
  margin: 0;
}

.cookie-cat__state {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-30);
}

.cookie-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   12 bis. Página 404

   El monograma es un arco abierto de 250°: una circunferencia a la que le
   falta un tramo. A tamaño enorme y sangrada por el borde, esa figura dice
   «aquí falta algo» sin recurrir a un robot roto ni a un «¡Ups!».

   Lo que se dibuja no es el logotipo, sino su geometría de construcción —arco,
   centro y radio—, que es la del manual. Por eso puede aparecer sola sin
   incumplir la norma que prohíbe deformar el logotipo.
   -------------------------------------------------------------------------- */
main {
  flex: 1 0 auto;
}

.error {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: min(74svh, 660px);
  padding-block: var(--s-12);
  background: linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--bone);
}

.error__inner {
  position: relative;
  z-index: 1;
}

/* La figura sangra por la derecha y por abajo: se ve un fragmento, no un
   icono centrado. Es composición editorial, no decoración. */
.error__figure {
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: min(78vw, 640px);
  aspect-ratio: 1;
  pointer-events: none;
}

@media (min-width: 900px) {
  .error__figure {
    right: 2%;
    bottom: -22%;
    width: min(46vw, 560px);
  }
}

.error__arc {
  fill: none;
  stroke: var(--bone);
  stroke-width: 0.55;
  opacity: 0.22;
}

.error__radius {
  stroke: var(--champagne);
  stroke-width: 0.22;
  opacity: 0.4;
}

.error__centre {
  fill: var(--champagne);
  opacity: 0.55;
}

/* Una sola animación: el arco se traza y se detiene sin cerrar. 1,4 s, sin
   rebote y sin repetición. Termina en estado visible, así que el primer
   fotograma de una captura ya muestra la página completa. */
@media (prefers-reduced-motion: no-preference) {
  .js .error__arc {
    stroke-dasharray: 131;
    stroke-dashoffset: 131;
    animation: error-arc 1400ms var(--ease) 120ms forwards;
  }
}

@keyframes error-arc {
  to {
    stroke-dashoffset: 0;
  }
}

.error__title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  max-width: 15ch;
  margin-bottom: var(--s-3);
  color: var(--bone);
}

.error__lead {
  color: var(--bone-muted);
  max-width: 44ch;
}

/* La dirección pedida, anotada como una cota del diagrama de construcción.
   Sin tercera tipografía: Inter con interletraje, que es lo que hay. */
.error__path {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin-top: var(--s-6);
  padding-left: var(--s-2);
  border-left: 1px solid var(--champagne);
  max-width: 46ch;
}

.error__path-label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--champagne-soft);
}

.error__path-value {
  font-size: var(--fs-small);
  color: var(--bone-muted);
  letter-spacing: 0.02em;
  /* Una URL larga parte por donde haga falta antes que desbordar */
  overflow-wrap: anywhere;
}

.error__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
}

.error__links .hero__cta {
  color: var(--bone);
  border-bottom-color: var(--bone);
}

.error__links .hero__cta:hover {
  border-bottom-color: var(--champagne);
}

.error__links .u-link {
  font-size: var(--fs-small);
  color: var(--bone-muted);
}

.error__links .u-link:hover {
  color: var(--bone);
}

/* En el 404 el pie va pegado al bloque oscuro: solo el filete los separa */
.site-footer--slim {
  padding-block: 0 var(--s-4);
}

.site-footer--slim .site-footer__bottom {
  margin-top: var(--s-4);
  border-top: 0;
}

/* --------------------------------------------------------------------------
   13. Páginas legales
   -------------------------------------------------------------------------- */
.legal {
  padding-block: var(--s-12) var(--s-16);
}

.legal__meta {
  font-size: var(--fs-small);
  color: var(--ink-30);
  margin-bottom: var(--s-8);
}

.legal__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-3);
  max-width: 22ch;
}

.legal__doc h2 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--s-8) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

.legal__doc p,
.legal__doc li {
  color: var(--ink-60);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.legal__doc ul {
  margin: 0 0 var(--s-3);
  padding-left: 1.1rem;
  max-width: var(--measure);
}

.legal__doc li {
  margin-bottom: var(--s-1);
}

.legal__doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin-bottom: var(--s-3);
}

.legal__doc th,
.legal__doc td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-60);
}

.legal__doc th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.legal__table-wrap {
  overflow-x: auto;
  margin-bottom: var(--s-4);
}

.legal__doc a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-30);
}

/* --------------------------------------------------------------------------
   14. Preferencias del sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .u-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-60: #3d3d3d;
    --ink-30: #5c5c5c;
    --rule: #b8b4ae;
  }
}

/* --------------------------------------------------------------------------
   15. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .cookie-bar,
  .cookie-panel,
  .hero__cta,
  .form,
  .u-skip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-footer {
    background: none;
    color: #000;
    border-top: 1px solid #000;
  }

  .site-footer__legal,
  .site-footer__bottom {
    color: #000;
  }

  .section {
    break-inside: avoid;
    padding-block: 1.5rem;
  }

  .pillar > .pillar__body {
    display: block;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
  }
}