/* ==========================================================
   LEXCOACTIVA · Hoja de estilos
   Concepto: grabado de seguridad (guilloché), papel de valor.
   ========================================================== */

/* ---------- Tipografías autoalojadas (licencia OFL) ----------
   Bodoni Moda: solo el h1 de la portada, los numerales romanos y el §.
   Newsreader: marca, títulos de sección, títulos de cada línea, lema y páginas legales.
   Libre Franklin: texto corrido. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fuentes/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fuentes/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fuentes/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fuentes/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fuentes/libre-franklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Respaldos locales con métricas ajustadas (medidas sobre las fuentes reales)
   para que el cambio de fuente no mueva el texto */
@font-face {
  font-family: "Bodoni respaldo";
  src: local("Georgia"), local("Times New Roman");
  font-style: normal;
  size-adjust: 101%;
  ascent-override: 111%;
  descent-override: 40%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni respaldo";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  font-style: italic;
  size-adjust: 93%;
  ascent-override: 121%;
  descent-override: 43%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader respaldo";
  src: local("Georgia"), local("Times New Roman");
  font-style: normal;
  size-adjust: 96%;
  ascent-override: 76.5%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader respaldo";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  font-style: italic;
  size-adjust: 88%;
  ascent-override: 83.5%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Franklin respaldo";
  src: local("Arial"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- Variables ---------- */
:root {
  --noche: #0b1736;
  --noche-2: #13234b;
  --noche-3: #1c2f5e;
  --oro: #c9a227;
  --oro-claro: #e6c968;
  --oro-suave: #f7efd4;
  --oro-tinta: #8a6a12;
  /* Oro de los numerales y del § sobre marfil: 3,37:1, por encima del 3:1 de texto grande */
  --oro-numeral: #a5831b;
  --marfil: #fbf8ef;
  --tinta: #121c36;
  --tinta-2: #3a4562;

  --marfil-80: rgb(251 248 239 / .8);
  --marfil-66: rgb(251 248 239 / .66);
  --filete-oro: rgb(201 162 39 / .45);
  --filete-tinta: rgb(28 47 94 / .18);
  --tinta-tenue: rgb(28 47 94 / .13);

  --serif: "Newsreader", "Newsreader respaldo", Georgia, "Times New Roman", serif;
  --bodoni: "Bodoni Moda", "Bodoni respaldo", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Franklin respaldo", Arial, sans-serif;

  --curva: cubic-bezier(.2, .7, .2, 1);
  --margen: clamp(1.125rem, 5vw, 4.5rem);
  --hueco: clamp(1rem, 2.4vw, 2rem);
  --ancho: 80rem;
  --alto-cabecera: 5.5rem;
  /* En escritorios bajos el sello se achica para que la roseta no suba tras la navegación */
  /* La roseta mide 3,1 sellos: con este tamaño ronda los 470 px en 1440 px de ancho */
  --sello: clamp(100px, min(10.5vw, 22vh - 36px), 160px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--noche);
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--marfil);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; hanging-punctuation: first; }
a { color: inherit; }
em { font-style: italic; }

::selection { background: var(--oro-claro); color: var(--noche); }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}
.claro :focus-visible { outline-color: var(--oro-tinta); }
main:focus { outline: none; }

.envoltura {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

/* Enlace para saltar la navegación */
.saltar {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .75rem 1.1rem;
  background: var(--oro);
  color: var(--noche);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* ---------- Marca escrita: LEXCO + ACTIVA en dorado ---------- */
.marca__texto {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--marfil);
  white-space: nowrap;
}
.marca__activa { color: var(--oro); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  inset: 0 0 auto 0;
  z-index: 20;
  color: var(--marfil);
}
/* Páginas de lectura: la cabecera ocupa su propia franja */
.cabecera--plana {
  position: relative;
  background: var(--noche);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  min-height: var(--alto-cabecera);
  padding-block: .75rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  text-decoration: none;
}
.marca__emblema { width: auto; height: 2.85rem; }
/* Nombre con el lema «Gestión pública» debajo, igual que en el pie */
.marca__nombre { display: grid; gap: .38rem; }
.marca__lema {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro-claro);
  white-space: nowrap;
}

.navegacion__lista {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.4rem);
}
.navegacion__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--marfil-80);
  text-decoration: none;
  transition: color .3s ease;
}
.navegacion__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .6rem;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--curva);
}

/* Botón de menú (solo móvil y con JavaScript) */
.menu-boton {
  display: none;
  align-items: center;
  gap: .7rem;
  min-width: 44px;
  min-height: 44px;
  margin-right: -.25rem;
  padding: 0 .25rem 0 .75rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--marfil);
  font: 500 .95rem/1 var(--sans);
  letter-spacing: .01em;
  cursor: pointer;
}
.menu-boton__lineas {
  position: relative;
  width: 1.5rem;
  height: .5rem;
}
.menu-boton__lineas::before,
.menu-boton__lineas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oro);
  transition: transform .45s var(--curva);
}
.menu-boton__lineas::before { top: 0; }
.menu-boton__lineas::after { bottom: 0; }
.menu-boton[aria-expanded="true"] .menu-boton__lineas::before { transform: translateY(calc(.25rem - .5px)) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__lineas::after { transform: translateY(calc(-.25rem + .5px)) rotate(-45deg); }

/* ---------- Botones y enlaces de acción ---------- */
.boton-marco {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 1px solid rgb(201 162 39 / .75);
  border-radius: 0;
  color: var(--oro-claro);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  overflow: hidden;
  transition: color .4s ease;
}
.boton-marco::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: -1;
  background: var(--oro);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform .5s var(--curva);
}

.enlace-filete {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding-block: .55rem;
  color: var(--marfil);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}
.enlace-filete::before,
.enlace-filete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform-origin: left center;
}
.enlace-filete::before { background: rgb(201 162 39 / .6); }
.enlace-filete::after {
  background: var(--oro-claro);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .7s var(--curva);
}
.flecha {
  width: 2.25rem;
  height: .7rem;
  fill: none;
  stroke: var(--oro-claro);
  stroke-width: 1.1;
  transition: transform .6s var(--curva);
}

.boton-sello {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  margin-top: 2.25rem;
  padding: .95rem 1.9rem;
  border-radius: 0;
  background: var(--noche);
  color: var(--marfil);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-decoration: none;
  transition: background-color .4s ease;
}
.boton-sello::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  inset: 4px;
  border: 1px solid rgb(201 162 39 / .8);
  pointer-events: none;
  transition: transform .6s var(--curva);
}

/* Estados de puntero: solo en dispositivos que de verdad tienen hover */
@media (hover: hover) {
  .navegacion__enlace:hover { color: var(--marfil); }
  .navegacion__enlace:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .boton-marco:hover { color: var(--noche); }
  .boton-marco:hover::before { transform: scaleY(1); }
  .enlace-filete:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .enlace-filete:hover .flecha { transform: translateX(.35rem); }
  .boton-sello:hover { background: var(--noche-3); }
  .boton-sello:hover::after { transform: scale(.97, .86); }
  .pie a:hover { color: var(--oro-claro); text-decoration-color: var(--oro-claro); }
  .legal a:hover,
  .certificado__nota a:hover { text-decoration-color: var(--tinta); }
  .legal__indice a:hover { color: var(--tinta); }
}

/* ---------- Títulos de sección (Newsreader) ---------- */
.titulo-seccion {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--tinta);
  text-wrap: balance;
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--alto-cabecera);
  background: var(--noche);
  color: var(--marfil);
}
.portada__fondo {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.portada__roseta {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.portada__envoltura {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
  align-items: center;
  min-height: clamp(34rem, calc(100vh - var(--alto-cabecera)), 52rem);
  min-height: clamp(34rem, calc(100svh - var(--alto-cabecera)), 52rem);
  padding-block: 1.5rem clamp(4rem, 8vw, 7rem);
}
.portada__texto {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 7;
}
.portada__titulo {
  max-width: 15.5em;
  font-family: var(--bodoni);
  font-weight: 500;
  font-size: clamp(2.35rem, 1rem + 3.9vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--marfil);
  text-wrap: balance;
}
.portada__titulo em {
  font-weight: 400;
  color: var(--oro-claro);
}
.portada__bajada {
  max-width: 31em;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem);
  line-height: 1.62;
  color: var(--marfil-80);
}
.portada__accion { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

.portada__grabado {
  position: relative;
  z-index: 1;
  grid-column: 9 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sello central: anillos en SVG + emblema */
.sello {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sello);
  height: var(--sello);
  flex: none;
}
.sello__anillos {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sello__anillos circle { fill: none; stroke: var(--oro); }
.sello__anillo--a { stroke-width: .9; --l: 625; }
.sello__anillo--b { stroke-width: .6; --l: 558; }
.sello__anillo--c { stroke-width: .6; --l: 543; }
.sello__dientes {
  stroke-width: 5.5;
  stroke-dasharray: .7 2.2594;
  stroke-opacity: .85;
}
.sello__emblema {
  position: relative;
  width: auto;
  height: calc(var(--sello) * .64);
}

/* ---------- Separadores ---------- */
/* Banda de guilloché (solo bajo la portada y, fina, en el pie) */
.banda {
  position: relative;
  height: clamp(40px, 4.4vw, 60px);
}
.banda--fina { height: 30px; }
.banda__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.banda__svg path {
  fill: none;
  stroke-width: .75;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.banda--tinta .banda__onda--a { stroke: var(--noche-3); stroke-opacity: .55; }
.banda--tinta .banda__onda--b { stroke: var(--oro); stroke-opacity: .95; }
.banda--tinta .banda__eje { stroke: var(--noche-3); stroke-opacity: .3; }
.banda--oro .banda__onda--a { stroke: var(--oro-claro); stroke-opacity: .5; }
.banda--oro .banda__onda--b { stroke: var(--oro); stroke-opacity: .9; }
.banda--oro .banda__eje { stroke: var(--oro); stroke-opacity: .35; }
/* Mientras la banda siga vacía (sin JavaScript o si sitio.js falla): doble filete sencillo */
.banda:empty::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-block: 1px solid var(--oro);
  opacity: .7;
}
/* Filete doble sencillo */
.filete-doble {
  height: 5px;
  border-top: 1px solid rgb(201 162 39 / .6);
  border-bottom: 1px solid rgb(201 162 39 / .6);
}

/* ---------- Qué hacemos: líneas I, II, III ---------- */
.servicios {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem);
  background: var(--marfil);
}
.servicios .banda { margin-bottom: clamp(3.5rem, 8vw, 7rem); }
.servicios__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
  row-gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.servicios__cabeza { grid-column: 1 / span 4; }
.signo {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--bodoni);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 3vw, 5.25rem);
  line-height: .9;
  color: var(--oro-numeral);
}
.servicios__intro {
  max-width: 22em;
  margin-top: 1.4rem;
}

.articulos { grid-column: 6 / -1; }
.articulo {
  --col-numeral: clamp(4.25rem, 1.5rem + 7vw, 9.5rem);
  position: relative;
  display: grid;
  grid-template-columns: var(--col-numeral) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-block: clamp(1.6rem, 3vw, 2.5rem) clamp(2.2rem, 4vw, 3.5rem);
}
.articulo__filete {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--oro);
  transform-origin: left center;
}
.articulo:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--filete-tinta);
}
/* Numeral romano: en oro por defecto (sin JS o con movimiento reducido) */
.articulo__numeral {
  position: relative;
  display: block;
  margin-top: -.04em;
  padding: .06em .1em .08em 0;
  font-family: var(--bodoni);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 1.6rem + 6.4vw, 8.75rem);
  line-height: .82;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--oro-numeral);
}
.articulo__titulo {
  padding-top: .35em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--tinta);
  text-wrap: balance;
}
.articulo__texto p {
  max-width: 28em;
  margin-top: .7rem;
}

/* ---------- Para quién ---------- */
.entidades {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 8.5rem);
  background: var(--noche-2);
  color: var(--marfil-80);
}
.entidades .filete-doble { margin-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.entidades__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
  row-gap: clamp(2.75rem, 6vw, 5rem);
}
.entidades__intro { grid-column: 1 / span 5; }
.entidades .titulo-seccion { color: var(--marfil); }
.capitular {
  max-width: 27em;
  margin-top: 1.75rem;
  font-size: 1.125rem;
}
/* Capitular de tres líneas: flotante por defecto, initial-letter donde exista */
/* Newsreader tiene versales de 0,67 em: 5,9 em cubren tres líneas de 1,65 */
.capitular::first-letter {
  float: left;
  margin: .07em .08em 0 -.02em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 5.9em;
  line-height: .72;
  color: var(--oro-claro);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .capitular::first-letter {
    float: none;
    margin: 0 .12em 0 0;
    font-size: 1em;
    line-height: 1;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

.entidades__lista {
  grid-column: 7 / -1;
  align-self: end;
}
.entidades__lista li {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 1.05rem 1.15rem;
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.2;
  color: var(--marfil);
}
.entidades__lista li::before,
.entidades__lista li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filete-oro);
  transform-origin: left center;
}
.entidades__lista li::before { top: 0; }
.entidades__lista li:last-child::after { bottom: 0; }
.literal {
  font-style: italic;
  font-size: .72em;
  color: var(--oro);
}

.lema {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, .95rem + 2.7vw, 3.6rem);
  line-height: 1.1;
  color: var(--oro-claro);
}
.lema::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filete-oro);
  transform-origin: left center;
}
.lema__palabra { display: inline-block; }
.rombo {
  flex: none;
  width: .34em;
  height: .34em;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1;
}

/* ---------- Contáctenos: certificado ---------- */
.contacto {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background: var(--marfil);
}
.certificado {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 6.25rem) clamp(2.6rem, 8vw, 6.5rem);
  background: var(--oro-suave);
  color: var(--tinta-2);
  text-align: center;
}
.certificado__marco {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Mientras el marco siga vacío (sin JavaScript o si sitio.js falla): filete doble sencillo */
.certificado__marco:empty {
  border: 1px solid var(--noche-3);
  outline: 1px solid var(--oro);
  outline-offset: -12px;
}
.certificado__marco path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cert-filete { stroke: var(--noche-3); stroke-width: .9; stroke-opacity: .7; stroke-linecap: butt; }
.cert-cordon--a { stroke: var(--oro); stroke-width: .85; }
.cert-cordon--b { stroke: var(--noche-3); stroke-width: .7; stroke-opacity: .42; }
.cert-medallon { stroke: var(--oro); stroke-width: .8; }
.cert-medallon--tinta { stroke: var(--noche-3); stroke-opacity: .6; }
.cert-agua { stroke: var(--oro); stroke-width: .7; stroke-opacity: .26; }

.certificado__cuerpo { position: relative; }
.certificado .titulo-seccion {
  max-width: 14em;
  margin-inline: auto;
}
.certificado__cuerpo > p {
  max-width: 30em;
  margin: 1.15rem auto 0;
}
.certificado__cuerpo > .certificado__correo {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .005em;
  color: var(--tinta);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.certificado__cuerpo > .certificado__nota {
  max-width: 32em;
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.6;
}
.certificado__nota a {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-color: var(--oro-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .3s ease;
}

/* ---------- Pie: marca y tres columnas, franja de derechos abajo ---------- */
.pie {
  background: #070f26;
  border-top: 1px solid var(--filete-oro);
  color: var(--marfil-80);
  font-size: .95rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem var(--hueco);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.pie__logo {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.pie__emblema { width: auto; height: 3.25rem; }
.pie__nombre { display: grid; gap: .4rem; }
.pie__nombre .marca__texto { font-size: 1.32rem; line-height: 1; }
/* Rótulos en versales espaciadas, en oro: el lema, el lugar y los títulos de columna */
.pie__lema,
.pie__lugar,
.pie__titulo {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.pie__resumen {
  max-width: 22rem;
  margin-top: 1.5rem;
  line-height: 1.65;
}
.pie__lugar { margin-top: 1.5rem; }
.pie__titulo { margin-bottom: .6rem; }
.pie__columna ul { display: grid; }
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--marfil);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: text-decoration-color .3s ease, color .3s ease;
}
.pie a[aria-current="page"] { color: var(--oro-claro); }
.pie__base { border-top: 1px solid rgb(251 248 239 / .08); }
.pie__base-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 2rem;
  padding-block: 1.25rem;
  font-size: .85rem;
  color: var(--marfil-66);
}

/* ---------- Página 404 ---------- */
.portada--error .portada__envoltura {
  min-height: calc(100vh - var(--alto-cabecera) - 6rem);
  min-height: calc(100svh - var(--alto-cabecera) - 6rem);
}
.portada--error .portada__titulo {
  max-width: 11em;
  font-family: var(--serif);
}
.portada--error .portada__bajada { max-width: 26em; }

/* ---------- Páginas legales (lectura) ---------- */
.legal-cabeza {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.75rem);
  background: var(--noche);
  color: var(--marfil);
}
.legal__columna {
  max-width: 37rem;
  margin-inline: auto;
}
.legal-cabeza__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 1.45rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--marfil);
  text-wrap: balance;
}
.legal-cabeza__fecha {
  margin-top: 1.1rem;
  font-size: .95rem;
  color: var(--marfil-80);
}
.legal-cabeza .filete-doble {
  width: 4.5rem;
  margin-bottom: 1.6rem;
}

.legal {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem);
  background: var(--marfil);
  color: var(--tinta-2);
}
.legal p,
.legal li,
.legal dd { line-height: 1.7; }
.legal__intro {
  font-size: 1.125rem;
  color: var(--tinta);
}
.legal a {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-color: var(--oro-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .3s ease;
}

.legal__indice {
  margin-top: 2.25rem;
  padding-block: 1.25rem .9rem;
  border-top: 1px solid var(--filete-tinta);
  border-bottom: 1px solid var(--filete-tinta);
}
.legal__indice-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--tinta);
}
.legal__indice ol {
  margin-top: .4rem;
  counter-reset: indice;
}
.legal__indice li { counter-increment: indice; }
.legal__indice a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  padding-block: .35rem;
  color: var(--tinta-2);
  text-decoration: none;
  line-height: 1.35;
  transition: color .3s ease;
}
.legal__indice a::before {
  content: counter(indice) ".";
  flex: none;
  min-width: 1.6rem;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--oro-tinta);
}
@media (min-width: 640px) {
  .legal__indice ol {
    columns: 2;
    column-gap: 2rem;
  }
  .legal__indice li { break-inside: avoid; }
}

.legal__seccion {
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  scroll-margin-top: 1.5rem;
}
.legal__seccion h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.25rem + .7vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--tinta);
  text-wrap: balance;
}
.legal__num {
  margin-right: .1em;
  color: var(--oro-tinta);
}
.legal__seccion > * + * { margin-top: 1rem; }
.legal__seccion > h2 + * { margin-top: 1.1rem; }
.legal__seccion h3 {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--tinta);
}
.legal__lista li {
  position: relative;
  padding-left: 1.5rem;
}
.legal__lista li + li { margin-top: .5rem; }
.legal__lista li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .78em;
  width: .55rem;
  height: 1px;
  background: var(--oro-tinta);
}
.legal__datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--filete-tinta);
}
.legal__datos > div {
  padding-block: .7rem;
  border-bottom: 1px solid var(--filete-tinta);
}
.legal__datos dt {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta);
}
@media (min-width: 560px) {
  .legal__datos > div {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: baseline;
  }
}
.legal__volver {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete-tinta);
}
.legal .legal__volver a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==========================================================
   Adaptación a pantallas
   ========================================================== */
@media (max-width: 1099px) {
  .portada__texto { grid-column: 1 / span 7; }
  /* Con la roseta más pequeña cabe completa en su columna, sin pisar el texto */
  .portada__grabado { grid-column: 8 / -1; justify-content: center; }
  .articulos { grid-column: 5 / -1; }
}

@media (max-width: 859px) {
  :root {
    --alto-cabecera: 4.5rem;
    --sello: clamp(96px, 24vw, 150px);
  }
  .portada__envoltura {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: 0 4.5rem;
  }
  /* En pantallas compactas la roseta mide 2,4 sellos: queda bajo la cabecera y sobre el título */
  .portada__grabado {
    grid-column: 1;
    order: -1;
    justify-content: flex-end;
    align-items: flex-start;
    height: calc(var(--sello) * 2.5);
    padding-top: calc(var(--sello) * .75);
    padding-right: 11%;
  }
  .portada__texto { grid-column: 1; }
  /* La 404 no tiene roseta: el sello no necesita reservar su espacio */
  .portada--error .portada__grabado {
    height: auto;
    padding-block: 1.5rem 2.5rem;
  }

  .servicios__cabeza,
  .articulos,
  .entidades__intro,
  .entidades__lista { grid-column: 1 / -1; }
  .servicios__intro { max-width: 30em; }

  /* Pie: la marca arriba a todo el ancho y las tres columnas debajo */
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}

/* Teléfono en horizontal: texto y sello lado a lado, sin roseta, para que el título se vea de entrada */
@media (max-width: 859px) and (max-height: 520px) and (orientation: landscape) {
  :root { --sello: 112px; }
  .portada__envoltura {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-top: 1rem;
  }
  .portada__texto { grid-column: 1; grid-row: 1; }
  .portada__grabado {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    height: auto;
    padding: 0;
  }
  .portada__roseta { visibility: hidden; }
}

@media (min-width: 860px) {
  .servicios__cabeza {
    position: sticky;
    top: 3rem;
  }
}

@media (min-width: 600px) {
  .articulo:nth-child(2) { margin-left: 9%; }
  .articulo:nth-child(3) { margin-left: 18%; }
}

@media (max-width: 699px) {
  .lema {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  .rombo { display: none; }
}

@media (max-width: 599px) {
  .entidades__lista li { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .marca__texto { font-size: 1rem; }
  .marca__emblema { height: 2.5rem; }
  .pie__nombre .marca__texto { font-size: 1.2rem; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pie__base-fila { flex-direction: column; }
}

/* Menú desplegable en móvil (solo con JavaScript) */
@media (max-width: 759px) {
  .js .menu-boton { display: inline-flex; }
  .js .navegacion {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: .25rem var(--margen) 1.5rem;
    border-block: 1px solid var(--filete-oro);
    background: var(--noche);
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  .js .cabecera.abierta .navegacion {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0);
  }
  .js .navegacion__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .navegacion__lista li + li { border-top: 1px solid rgb(201 162 39 / .22); }
  .js .navegacion__enlace {
    width: 100%;
    min-height: 60px;
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--marfil);
  }
  .js .navegacion__enlace::after { bottom: .9rem; right: auto; width: 3rem; }
  .js .navegacion .boton-marco {
    width: 100%;
    min-height: 52px;
    margin-top: 1.25rem;
  }
  /* Sin JavaScript la navegación queda visible y se acomoda */
  html:not(.js) .cabecera__fila { flex-wrap: wrap; }
  html:not(.js) .navegacion__lista { flex-wrap: wrap; gap: .25rem 1.25rem; }
}

/* ==========================================================
   Animaciones (solo en pantalla y si la persona no pidió reducir movimiento;
   al imprimir todo sale visible). Todo lo que anima es transform, opacity, clip-path o trazos de SVG.
   ========================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
  @keyframes subir {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes palabra {
    from { transform: translate3d(0, 112%, 0); }
    to { transform: none; }
  }
  @keyframes trazar { to { stroke-dashoffset: 0; } }
  @keyframes dial {
    from { opacity: 0; transform: rotate(-32deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes sellar {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: none; }
  }
  @keyframes filete {
    from { transform: scaleX(0); }
    to { transform: none; }
  }

  /* Menú móvil */
  .js .navegacion {
    transition: clip-path .55s var(--curva), opacity .35s ease, visibility 0s linear .55s;
  }
  .js .cabecera.abierta .navegacion {
    transition: clip-path .55s var(--curva), opacity .35s ease, visibility 0s linear 0s;
  }

  /* Título de portada: palabra por palabra, con CSS puro (las palabras ya vienen partidas en el HTML).
     La última termina antes de 1 s; la cabecera no espera a nada. */
  .portada__titulo .palabra {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .04em .12em .2em .02em;
    margin: -.04em -.12em -.2em -.02em;
  }
  .portada__titulo .palabra > span {
    display: inline-block;
    animation: palabra .5s var(--curva) both;
    /* 5 palabras: .06 s + 4 × 70 ms + .5 s = 0,84 s */
    animation-delay: calc(.06s + var(--i, 0) * 70ms);
  }
  .portada__titulo > .palabra:nth-child(2) { --i: 1; }
  .portada__titulo > .palabra:nth-child(3) { --i: 2; }
  .portada__titulo em > .palabra:nth-child(1) { --i: 3; }
  .portada__titulo em > .palabra:nth-child(2) { --i: 4; }

  .portada__bajada { animation: subir .8s var(--curva) .35s both; }
  .portada__accion { animation: subir .8s var(--curva) .5s both; }
  .portada__accion .enlace-filete::before { animation: filete .9s var(--curva) .6s both; }
  .portada__accion .flecha { animation: aparecer .6s ease .85s both; }

  .js .sello__anillo {
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    animation: trazar 1.6s var(--curva) .15s forwards;
  }
  .js .sello__anillo--b { animation-delay: .3s; }
  .js .sello__anillo--c { animation-delay: .42s; }
  .js .sello__dientes {
    transform-box: fill-box;
    transform-origin: center;
    animation: dial 1.6s var(--curva) .3s both;
  }
  .js .sello__emblema { animation: sellar 1.2s var(--curva) .4s both; }
  .js .portada__fondo {
    opacity: 0;
    transition: opacity 1.6s ease .5s;
  }
  .js .portada__fondo.listo { opacity: 1; }

  /* Bandas: las ondas se trazan al aparecer (todo termina antes de 1,6 s) */
  .js .banda__onda {
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    transition: stroke-dashoffset 1.1s var(--curva);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .js .banda__eje {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 1.2s var(--curva);
  }
  .js .banda.visto .banda__onda { stroke-dashoffset: 0; }
  .js .banda.visto .banda__eje { transform: none; }

  /* Revelado al hacer scroll (la clase .observando la pone sitio.js) */
  .js.observando .servicios__cabeza .signo {
    clip-path: inset(-.1em -.2em 100% -.1em);
    transition: clip-path 1.2s var(--curva);
  }
  .js.observando .servicios__cabeza.visto .signo { clip-path: inset(-.1em -.2em -.1em -.1em); }

  .js.observando [data-revelar] .titulo-seccion,
  .js.observando [data-revelar] .servicios__intro,
  .js.observando [data-revelar] .capitular,
  .js.observando .articulo__titulo,
  .js.observando .articulo__texto p,
  .js.observando .entidades__lista li > span,
  .js.observando .lema__palabra,
  .js.observando .certificado__cuerpo > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .9s var(--curva), transform 1.1s var(--curva);
  }
  .js.observando [data-revelar].visto .titulo-seccion,
  .js.observando [data-revelar].visto .servicios__intro,
  .js.observando [data-revelar].visto .capitular,
  .js.observando .articulo.visto .articulo__titulo,
  .js.observando .articulo.visto .articulo__texto p,
  .js.observando .entidades__lista.visto li > span,
  .js.observando .lema.visto .lema__palabra,
  .js.observando .certificado.visto .certificado__cuerpo > * {
    opacity: 1;
    transform: none;
  }
  .js.observando .servicios__cabeza .titulo-seccion { transition-delay: .12s; }
  .js.observando .servicios__cabeza .servicios__intro { transition-delay: .26s; }
  .js.observando .entidades__intro .capitular { transition-delay: .16s; }

  /* Líneas I, II, III: filete, numeral que se llena de oro, título y frase */
  .articulo:nth-child(2) { --base: .14s; }
  .articulo:nth-child(3) { --base: .28s; }
  .js.observando .articulo__filete {
    transform: scaleX(0);
    transition: transform 1.3s var(--curva);
    transition-delay: var(--base, 0s);
  }
  .js.observando .articulo.visto .articulo__filete { transform: none; }
  /* El numeral espera en tinta tenue; su copia en oro sube de abajo hacia arriba (0,9 s) */
  .js.observando .articulo__numeral { color: var(--tinta-tenue); }
  .js.observando .articulo__numeral::after {
    content: attr(data-n);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    padding: inherit;
    color: var(--oro-numeral);
    clip-path: inset(100% -.3em -.2em -.2em);
    transition: clip-path .9s var(--curva);
    transition-delay: calc(var(--base, 0s) + .12s);
  }
  .js.observando .articulo.visto .articulo__numeral::after { clip-path: inset(-.2em -.3em -.2em -.2em); }
  .js.observando .articulo__titulo { transition-delay: calc(var(--base, 0s) + .3s); }
  .js.observando .articulo__texto p { transition-delay: calc(var(--base, 0s) + .42s); }

  /* Lista de entidades: filetes que se trazan uno tras otro */
  .entidades__lista li:nth-child(2) { --base: .1s; }
  .entidades__lista li:nth-child(3) { --base: .2s; }
  .entidades__lista li:nth-child(4) { --base: .3s; }
  .js.observando .entidades__lista li::before,
  .js.observando .entidades__lista li:last-child::after {
    transform: scaleX(0);
    transition: transform 1.2s var(--curva);
    transition-delay: var(--base, 0s);
  }
  .js.observando .entidades__lista li:last-child::after { transition-delay: .4s; }
  .js.observando .entidades__lista.visto li::before,
  .js.observando .entidades__lista.visto li:last-child::after { transform: none; }
  .js.observando .entidades__lista li > span { transition-delay: calc(var(--base, 0s) + .18s); }

  /* Lema */
  .js.observando .lema::before {
    transform: scaleX(0);
    transition: transform 1.4s var(--curva);
  }
  .js.observando .lema.visto::before { transform: none; }
  .js.observando .lema__palabra:nth-of-type(1) { transition-delay: .2s; }
  .js.observando .lema__palabra:nth-of-type(2) { transition-delay: .34s; }
  .js.observando .lema__palabra:nth-of-type(3) { transition-delay: .48s; }
  .js.observando .rombo {
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
    transition: opacity .7s ease, transform 1.1s var(--curva);
    transition-delay: .4s;
  }
  .js.observando .lema.visto .rombo { opacity: 1; transform: none; }

  /* Certificado: marco trazado (los tiempos de cada trazo los fija sitio.js; todo termina antes de 1,6 s) */
  .js .certificado__marco .trazo {
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    transition: stroke-dashoffset var(--t, 1.2s) var(--curva) var(--d, 0s);
  }
  .js .certificado.visto .certificado__marco .trazo { stroke-dashoffset: 0; }
  .js .certificado__marco .medallon {
    opacity: 0;
    transform: rotate(-120deg) scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .6s ease var(--d, 0s), transform 1s var(--curva) var(--d, 0s);
  }
  .js .certificado.visto .certificado__marco .medallon { opacity: 1; transform: none; }
  .js .certificado__marco .agua {
    opacity: 0;
    transition: opacity 1s ease .4s;
  }
  .js .certificado.visto .certificado__marco .agua { opacity: 1; }
  .js.observando .certificado__cuerpo > :nth-child(1) { transition-delay: .2s; }
  .js.observando .certificado__cuerpo > :nth-child(2) { transition-delay: .3s; }
  .js.observando .certificado__cuerpo > :nth-child(3) { transition-delay: .4s; }
  .js.observando .certificado__cuerpo > :nth-child(4) { transition-delay: .48s; }
  .js.observando .certificado__cuerpo > :nth-child(5) { transition-delay: .56s; }
}

/* Red de seguridad: sin movimiento si se pidió reducirlo */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Impresión (útil para las páginas legales) ---------- */
@media print {
  html,
  body,
  .legal,
  .legal-cabeza,
  .pie { background: #fff; color: #000; }
  .saltar,
  .cabecera .navegacion,
  .menu-boton,
  .banda,
  .filete-doble,
  .legal__indice,
  .legal__volver { display: none; }
  .cabecera--plana { background: #fff; }
  .marca__texto,
  .legal-cabeza__titulo,
  .legal-cabeza__fecha,
  .pie a { color: #000; }
  .marca__emblema,
  .pie__emblema { display: none; }
}