/* =============================================================
   Selcosi Export S.A.C.
   Dirección: "ficha técnica" — informe corporativo de exportación.

   Blanco dominante, rejilla estricta, filetes de un pixel y mucho aire.
   Azul corporativo como apoyo, dorado para acciones y acentos,
   marfil y carbón para superficies, salvia para sostenibilidad.
   Sin texturas, sin degradados sobre el texto, movimiento contenido.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Azul del logotipo (#0C90CC) y su escala corporativa */
  --azul-50:  #eef6fc;
  --azul-100: #d6eaf7;
  --azul-200: #a9d5ef;
  --azul-400: #2ea3da;
  --azul-500: #0c90cc;   /* color de marca */
  --azul-600: #0a76a8;
  --azul-700: #0a5c84;
  --azul-800: #0b4463;
  --azul-900: #0c3049;
  --azul-950: #08202f;

  /* Oro: acciones, indicadores y detalles editoriales */
  --oro-100: #fbf1d3;
  --oro-400: #e5c878;
  --oro-500: #c8a24b;
  --oro-700: #80601d;

  /* Verde del logotipo (#5AA028) — sólo sostenibilidad y estados correctos */
  --verde-100: #e7f4dc;
  --verde-500: #5aa028;
  --verde-700: #46821e;

  /* Neutros minerales: marfil, piedra y carbón */
  --gris-0:   #ffffff;
  --gris-25:  #faf8f3;
  --gris-50:  #f2eee5;
  --gris-100: #e9e3d7;
  --gris-200: #d8d0c1;
  --gris-400: #8c8476;
  --gris-600: #665f53;
  --gris-800: #38372f;
  --gris-900: #252720;

  --rojo: #c0392b;

  /* Semánticos — claro por defecto */
  --fondo: var(--gris-0);
  --texto: var(--gris-900);
  --apagado: var(--gris-600);
  --linea: var(--gris-200);

  /* Tipografía */
  --titulo: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Ritmo */
  --canal: clamp(1.15rem, 4vw, 4rem);
  --ancho: 1240px;
  --caja: min(100% - (var(--canal) * 2), var(--ancho));

  /* Movimiento — corto y sobrio */
  --suave: cubic-bezier(0.4, 0, 0.2, 1);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);

  --sombra-s: 0 1px 2px rgba(16, 33, 46, 0.05);
  --sombra-m: 0 4px 16px -6px rgba(16, 33, 46, 0.12);
  --sombra-l: 0 18px 44px -22px rgba(16, 33, 46, 0.28);
}

/* Banda tenue */
.papel {
  --fondo: var(--gris-50);
  background: var(--fondo);
}

/* Banda oscura — carbón cálido */
.tinta {
  --fondo: #20241f;
  --texto: #f3f0e8;
  --apagado: #c3beaf;
  --linea: rgba(216, 202, 170, 0.22);
  background: var(--fondo);
  color: var(--texto);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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;
  }
}

body {
  background: var(--gris-0);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: clamp(0.98rem, 0.94rem + 0.18vw, 1.05rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--azul-100); color: var(--azul-900); }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;
  color: var(--texto);
}

.d-xl { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.1rem); line-height: 1.06; letter-spacing: -0.03em; }
.d-l  { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.026em; }
.d-m  { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.35rem); letter-spacing: -0.022em; }
.d-s  { font-size: clamp(1.18rem, 1.08rem + 0.5vw, 1.42rem); line-height: 1.25; letter-spacing: -0.014em; }
.d-xs { font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.32; letter-spacing: -0.008em; }

/* Acento de color sobre una o dos palabras del titular */
.acento { color: var(--azul-500); }
.tinta .acento, .portada .acento, .testera .acento, .sangre .acento { color: var(--azul-200); }

.entrada {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--apagado);
}

/* Antetítulo con marca de color */
.ceja {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-600);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ceja::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--oro-500);
  flex: none;
}
.ceja--centro { justify-content: center; }
.tinta .ceja, .portada .ceja, .testera .ceja, .sangre .ceja { color: var(--azul-200); }

/* ---------- Estructura ---------- */
.caja { width: var(--caja); margin-inline: auto; }
.bloque { padding-block: clamp(3.5rem, 2rem + 5.5vw, 7rem); position: relative; }
.bloque--corto { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }

/* ---------- Barra de progreso ---------- */
.progreso {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 150;
  background: var(--azul-500);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progreso {
    animation: progreso-avance linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progreso-avance { to { transform: scaleX(1); } }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.82rem 1.5rem;
  font-family: var(--cuerpo);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: #211b0d;
  background: var(--oro-500);
  border: 1px solid var(--oro-500);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s var(--suave), border-color 0.2s var(--suave),
              box-shadow 0.2s var(--suave), transform 0.15s var(--suave);
}
.btn:hover { background: var(--oro-400); border-color: var(--oro-400); box-shadow: var(--sombra-m); }
.btn:active { transform: translateY(1px); }

.btn--linea {
  color: var(--azul-700);
  background: transparent;
  border-color: var(--gris-200);
}
.btn--linea:hover { background: var(--azul-50); border-color: var(--azul-200); color: var(--azul-800); box-shadow: none; }
.tinta .btn--linea, .portada .btn--linea, .sangre .btn--linea {
  color: #eaf2f8; border-color: rgba(169, 213, 239, 0.35);
}
.tinta .btn--linea:hover, .portada .btn--linea:hover, .sangre .btn--linea:hover {
  background: rgba(169, 213, 239, 0.12); border-color: var(--azul-200); color: #fff;
}

.flecha { transition: transform 0.2s var(--suave); flex: none; }
.btn:hover .flecha { transform: translateX(3px); }

.sub {
  text-decoration: none;
  border-bottom: 1px solid var(--gris-200);
  transition: border-color 0.2s var(--suave), color 0.2s var(--suave);
}
.sub:hover { border-bottom-color: var(--azul-500); color: var(--azul-700); }
.tinta .sub, .sangre .sub { border-bottom-color: rgba(169, 213, 239, 0.3); }
.tinta .sub:hover, .sangre .sub:hover { color: var(--azul-200); border-bottom-color: var(--azul-200); }

/* ---------- Cabecera ---------- */
.marco {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--suave), border-color 0.25s var(--suave);
}
.marco.fijo { border-bottom-color: var(--gris-200); box-shadow: var(--sombra-s); }
.marco__caja {
  width: var(--caja);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  transition: padding-block 0.3s var(--suave);
}
.marco.fijo .marco__caja { padding-block: 0.55rem; }

/* El logotipo manda en la cabecera: es el activo de marca */
.firma { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; flex: none; }
.firma img {
  width: clamp(58px, 6vw, 78px);
  height: auto;
  transition: width 0.3s var(--suave), transform 0.3s var(--suave);
}
.marco.fijo .firma img { width: clamp(48px, 4.6vw, 58px); }
.firma:hover img { transform: scale(1.04); }
.firma__txt {
  font-family: var(--titulo);
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--azul-900);
}
.firma__txt span {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gris-600);
  margin-top: 0.32rem;
  text-transform: uppercase;
}
@media (max-width: 480px) { .firma__txt { font-size: 1rem; } .firma__txt span { letter-spacing: 0.16em; } }

.menu { display: flex; align-items: center; gap: clamp(0.65rem, 1.5vw, 1.55rem); }
.menu a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gris-800);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color 0.2s var(--suave);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--azul-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--suave);
}
.menu a:hover { color: var(--azul-700); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--azul-700); font-weight: 600; }

.abrir {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--gris-200);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex: none;
}
.abrir span {
  position: absolute;
  left: 11px;
  width: 20px; height: 2px;
  background: var(--azul-900);
  border-radius: 2px;
  transition: transform 0.28s var(--suave), opacity 0.2s var(--suave);
}
.abrir span:nth-child(1) { top: 14px; }
.abrir span:nth-child(2) { top: 20px; }
.abrir span:nth-child(3) { top: 26px; }
.abrir[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.abrir[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abrir[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .abrir { display: block; }
  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 360px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem var(--canal) 2rem;
    background: #fff;
    border-left: 1px solid var(--gris-200);
    box-shadow: var(--sombra-l);
    transform: translateX(101%);
    transition: transform 0.32s var(--suave);
    overflow-y: auto;
  }
  .menu.abierto { transform: translateX(0); }
  .menu a {
    font-size: 1.05rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--gris-100);
  }
  .menu a::after { display: none; }
  body.bloqueado { overflow: hidden; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  background: var(--azul-950);
  color: #eaf2f8;
  overflow: clip;
  padding-block: clamp(7rem, 12vh, 9.5rem) clamp(3rem, 5vw, 4.5rem);
}
.portada__fondo { position: absolute; inset: 0; z-index: 0; }
.portada__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(.8);
}
.portada__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(25, 24, 21, .96) 0%, rgba(25, 24, 21, .86) 44%, rgba(25, 24, 21, .36) 100%);
}
.portada__caja { position: relative; z-index: 1; width: var(--caja); margin-inline: auto; }
.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.78fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 960px) { .portada__rejilla { grid-template-columns: 1fr; } }

.portada h1 { color: #fff; margin-block: 1.1rem 1.3rem; }
.portada .entrada { max-width: 48ch; color: #b7cddd; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Sellos de garantía bajo el titular */
.avales {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(169, 213, 239, 0.2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #93a9ba;
}
.avales span { display: flex; align-items: center; gap: 0.45rem; }
.avales svg { width: 14px; height: 14px; color: var(--oro-400); flex: none; }

/* Entrada sobria: recorridos cortos */
.sube { opacity: 0; animation: sube 0.6s var(--salida) forwards; }
.sube-1 { animation-delay: 0.07s; }
.sube-2 { animation-delay: 0.14s; }
.sube-3 { animation-delay: 0.21s; }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Panel de cotización ---------- */
.cotiza {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: 4px;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  box-shadow: var(--sombra-l);
  color: var(--gris-900);
}
.cotiza__alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-600);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gris-100);
}
.cotiza__alto span { display: flex; align-items: center; gap: 0.45rem; }
.pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde-500);
  box-shadow: 0 0 0 0 rgba(90, 160, 40, 0.55);
  animation: pulso 2.6s infinite;
  flex: none;
}
.pulso.frio { background: var(--gris-400); animation: none; }
@keyframes pulso {
  70% { box-shadow: 0 0 0 8px rgba(90, 160, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 160, 40, 0); }
}

.cotiza__cifra {
  font-family: var(--titulo);
  font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin-top: 0.9rem;
  color: var(--azul-900);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--suave);
}
.cotiza__cifra.sube-flash { color: var(--oro-700); }
.cotiza__unidad { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--gris-600); margin-top: 0.2rem; }

.cotiza__var {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.7rem;
  color: var(--gris-600);
}
.cotiza__var.arriba { color: var(--verde-700); }
.cotiza__var.abajo { color: var(--rojo); }

.chispa { width: 100%; height: 36px; margin-top: 0.85rem; }
.chispa[hidden] { display: none; }

.cotiza__tabla {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gris-100);
  display: grid;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.cotiza__fila { display: flex; justify-content: space-between; gap: 1rem; color: var(--gris-600); }
.cotiza__fila b { color: var(--azul-900); font-weight: 600; }
.cotiza__pie { margin-top: 0.85rem; font-family: var(--mono); font-size: 0.66rem; color: var(--gris-600); }

/* Accesos de contacto: filas abiertas, toda la superficie es enlace. */
.contacto-vias { padding: .3rem 0 0; }
.contacto-vias__titulo {
  color: var(--apagado);
  font: 500 .68rem var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.contacto-via {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem .5rem;
  border-top: 1px solid var(--linea);
  color: var(--texto);
  text-decoration: none;
  transition: background .2s var(--suave);
}
.contacto-via:last-child { border-bottom: 1px solid var(--linea); }
.contacto-via__icono { display: grid; place-items: center; color: var(--oro-700); }
.contacto-via__icono svg { width: 26px; height: 26px; }
.contacto-via__texto { display: grid; gap: .2rem; }
.contacto-via__texto strong { font: 600 clamp(1rem, 1.25vw, 1.2rem)/1.3 var(--titulo); letter-spacing: -.02em; }
.contacto-via__texto > span { font-size: .8rem; color: var(--apagado); line-height: 1.5; }
.contacto-via__flecha { display: grid; place-items: center; color: var(--apagado); transition: transform .2s var(--suave), color .2s var(--suave); }
.contacto-via__flecha svg { width: 19px; height: 19px; }
.contacto-via:hover { background: rgba(170, 143, 77, .055); }
.contacto-via:hover .contacto-via__flecha { transform: translateX(4px); color: var(--texto); }
.contacto-via:focus-visible { outline: 2px solid var(--oro-500); outline-offset: 3px; }
.contacto-via--wa .contacto-via__icono { color: #21844b; }
.contacto-via--wa .contacto-via__flecha { transform: rotate(-35deg); }
.contacto-via--wa:hover .contacto-via__flecha { transform: translate(2px, -2px) rotate(-35deg); }
[data-tema="oscuro"] .contacto-via__icono { color: #d6ba73; }
[data-tema="oscuro"] .contacto-via--wa .contacto-via__icono { color: #70cd91; }
@media (max-width: 480px) {
  .contacto-via { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: .7rem; padding-inline: .2rem; }
}

/* ---------- Cinta de datos ---------- */
.cinta {
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
  overflow: hidden;
  padding-block: 0.72rem;
}
.cinta__via {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: cinta 52s linear infinite;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--gris-600);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cinta:hover .cinta__via { animation-play-state: paused; }
.cinta__via b { color: var(--azul-800); font-weight: 600; }
.cinta__via i { color: var(--gris-400); font-style: normal; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Rejillas ---------- */
.dupla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.dupla__txt { grid-column: 1 / span 5; }
.dupla__img { grid-column: 7 / span 6; }
.dupla--giro .dupla__txt { grid-column: 8 / span 5; order: 2; }
.dupla--giro .dupla__img { grid-column: 1 / span 6; }
.dupla--ancho .dupla__txt { grid-column: 1 / span 5; }
.dupla--ancho .dupla__img { grid-column: 7 / span 6; }
.dupla--equipo .dupla__txt,
.dupla--equipo .dupla__img { grid-row: 1; }
@media (max-width: 900px) {
  .dupla__txt, .dupla__img,
  .dupla--giro .dupla__txt, .dupla--giro .dupla__img,
  .dupla--ancho .dupla__txt, .dupla--ancho .dupla__img { grid-column: 1 / -1; }
  .dupla--giro .dupla__txt { order: 0; }
  .dupla--equipo .dupla__txt,
  .dupla--equipo .dupla__img { grid-row: auto; }
}

/* Imagen: aparición limpia, sin barridos ni zoom largo */
.velo { position: relative; overflow: hidden; border-radius: 4px; background: var(--gris-100); }
.velo img { width: 100%; display: block; }
.js .velo { opacity: 0; transition: opacity 0.5s var(--suave); }
.js .velo.visible { opacity: 1; }

.velo--medio img { aspect-ratio: 4 / 3; object-fit: cover; }
.velo--ancho img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Dos retratos reales del equipo, juntos sin ampliar los originales pequeños. */
.foto-diptico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 4 / 3;
  gap: 1px;
  overflow: hidden;
  background: var(--gris-200);
}
.foto-diptico img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
}

/* Filete: una regla fina, no un marco decorativo */
.filete { border: 1px solid var(--gris-200); }

/* Etiqueta de pie de foto */
.folio {
  position: absolute;
  z-index: 2;
  bottom: 0; left: 0;
  padding: 0.45rem 0.8rem;
  background: rgba(8, 32, 47, 0.88);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  border-radius: 0 3px 0 0;
}

/* ---------- Banda con imagen ---------- */
.sangre {
  position: relative;
  display: grid;
  align-items: center;
  overflow: clip;
  background: var(--azul-950);
  color: #eaf2f8;
}
.sangre__fondo { position: absolute; inset: 0; z-index: 0; }
.sangre__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.26; filter: saturate(0.55); }
.sangre__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(8,32,47,0.94) 0%, rgba(8,32,47,0.72) 100%);
}
.sangre__caja {
  position: relative; z-index: 1;
  width: var(--caja); margin-inline: auto;
  padding-block: clamp(3rem, 5.5vw, 5rem);
}
.sangre h2, .sangre h3 { color: #fff; }
.sangre .entrada { color: #b7cddd; }

/* ---------- Texto corrido ---------- */
.prosa > * + * { margin-top: 1.05em; }
.prosa p { color: var(--apagado); }
.prosa strong { color: var(--texto); font-weight: 600; }

/* ---------- Trazabilidad ---------- */
.fijada__rejilla { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 900px) { .fijada__rejilla { grid-template-columns: 1fr; } }

.fijada__sticky { position: sticky; top: clamp(5.5rem, 13vh, 7.5rem); align-self: start; height: fit-content; }
@media (max-width: 900px) { .fijada__sticky { position: static; } }

.fijada__lienzo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--gris-200);
  background: var(--gris-100);
}
.fijada__lienzo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--suave);
}
.fijada__lienzo img.activa { opacity: 1; }
.fijada__contador {
  position: absolute;
  z-index: 2;
  right: 0.8rem; bottom: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  background: rgba(8, 32, 47, 0.88);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.paso {
  padding: clamp(1.4rem, 3vh, 2.1rem) 0 clamp(1.4rem, 3vh, 2.1rem) 1.5rem;
  border-left: 2px solid var(--gris-200);
  position: relative;
  transition: border-color 0.3s var(--suave);
}
.paso.activo { border-left-color: var(--azul-500); }
.paso__n {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-600);
  display: block;
  margin-bottom: 0.5rem;
}
.paso h3 { margin-bottom: 0.4rem; }
.paso p { color: var(--apagado); max-width: 46ch; }

/* ---------- Tarjetas ---------- */
.fichas { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.fichas--3 { grid-template-columns: repeat(3, 1fr); }
.fichas--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .fichas--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fichas--3, .fichas--2 { grid-template-columns: 1fr; } }

.ficha {
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  background: var(--gris-0);
  transition: border-color 0.2s var(--suave), box-shadow 0.2s var(--suave), transform 0.2s var(--suave);
}
.papel .ficha { background: #fff; }
.tinta .ficha { background: rgba(255, 255, 255, 0.05); }
.ficha:hover { border-color: var(--azul-200); box-shadow: var(--sombra-m); transform: translateY(-2px); }
.tinta .ficha:hover { border-color: rgba(169, 213, 239, 0.4); }
.ficha h3 { margin-bottom: 0.45rem; }
.ficha p { color: var(--apagado); font-size: 0.96rem; }
.ficha__img {
  margin: calc(clamp(1.35rem, 2.2vw, 1.85rem) * -1) calc(clamp(1.35rem, 2.2vw, 1.85rem) * -1) 1.3rem;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.ficha__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Principios y valores ---------- */
.virtudes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
.virtud { background: var(--gris-0); padding: clamp(1.3rem, 2vw, 1.7rem); transition: background 0.2s var(--suave); }
.papel .virtud { background: #fff; }
.virtud:hover { background: var(--azul-50); }
.virtud__k {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--oro-700);
  display: block;
  margin-bottom: 0.6rem;
}
.virtud h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.virtud p { color: var(--apagado); font-size: 0.9rem; line-height: 1.55; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
@media (max-width: 720px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
.cifras > div { background: var(--gris-0); padding: clamp(1.3rem, 2.2vw, 1.9rem); }
.papel .cifras > div { background: #fff; }
.cifra__n {
  font-family: var(--titulo);
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--azul-800);
}
.cifra__t { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--gris-600); margin-top: 0.6rem; }

/* ---------- Socios ---------- */
.sellos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.sellos img {
  height: clamp(24px, 3.2vw, 34px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.2s var(--suave), opacity 0.2s var(--suave);
}
.sellos img:hover { filter: none; opacity: 1; }

/* ---------- Oficinas ---------- */
.oficinas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
.oficina { background: var(--gris-0); padding: clamp(1.4rem, 2.2vw, 1.85rem); transition: background 0.2s var(--suave); }
.papel .oficina { background: #fff; }
.oficina:hover { background: var(--azul-50); }
.oficina__pais {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-600);
}
.oficina h3 { margin-block: 0.45rem 0.3rem; font-size: 1.28rem; }
.oficina__nota { color: var(--apagado); font-size: 0.86rem; margin-bottom: 0.95rem; }
.oficina ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.oficina li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.93rem; }
.oficina li svg { flex: none; width: 14px; height: 14px; color: var(--azul-500); transform: translateY(2px); }
.oficina a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--suave); }
.oficina a:hover { border-bottom-color: var(--azul-500); }

/* ---------- Blog ---------- */
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 940px) { .notas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .notas { grid-template-columns: 1fr; } }

.nota { display: flex; flex-direction: column; text-decoration: none; }
.nota__img { overflow: hidden; border-radius: 4px; margin-bottom: 1rem; border: 1px solid var(--linea); }
.nota__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s var(--suave); }
.nota:hover .nota__img img { transform: scale(1.03); }
.nota__fecha { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--gris-600); }
.nota h3 { margin-block: 0.5rem 0.45rem; transition: color 0.2s var(--suave); }
.nota:hover h3 { color: var(--azul-700); }
.nota p { color: var(--apagado); font-size: 0.93rem; }

.nota--grande { grid-column: span 2; }
@media (max-width: 640px) { .nota--grande { grid-column: span 1; } }
.nota--grande .nota__img img { aspect-ratio: 16 / 9; }
.nota__img--archivo { background: #f1eee7; }
.nota__img--archivo img { object-fit: contain; }
.nota:hover .nota__img--archivo img { transform: none; }

/* ---------- Artículo ---------- */
.articulo { max-width: 38rem; margin-inline: auto; }
.articulo > * + * { margin-top: 1.25em; }
.articulo h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); margin-top: 2em; }
.articulo p { color: var(--apagado); }
.articulo strong { color: var(--texto); font-weight: 600; }
.articulo ul { padding-left: 1.15rem; color: var(--apagado); }
.articulo li + li { margin-top: 0.45rem; }
.articulo li::marker { color: var(--azul-500); }

/* ---------- Formularios ---------- */
.forma { display: grid; gap: 1rem; }
.forma__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .forma__par { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: 0.82rem; font-weight: 500; color: var(--gris-800); }
.campo input, .campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: 3px;
  transition: border-color 0.2s var(--suave), box-shadow 0.2s var(--suave);
}
.campo input:focus, .campo textarea:focus {
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-50);
  outline: none;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input[type="file"] { padding: 0.55rem 0.7rem; font-size: 0.86rem; }
.forma__nota { font-size: 0.82rem; color: var(--apagado); }

/* ---------- Cabecera de página interior ---------- */
.testera {
  position: relative;
  display: grid;
  align-items: center;
  overflow: clip;
  background: var(--azul-950);
  color: #eaf2f8;
  padding-block: clamp(7.5rem, 13vh, 9.5rem) clamp(2.75rem, 4.5vw, 4rem);
}
.testera__fondo { position: absolute; inset: 0; z-index: 0; background: #211f1a; }
.testera__fondo img { position: absolute; right: 0; width: 64%; max-width: 1200px; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
.testera__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #211f1a 5%, rgba(33,31,26,.97) 32%, rgba(33,31,26,.74) 48%, rgba(33,31,26,.12) 75%, rgba(33,31,26,.06));
}
.testera__caja { position: relative; z-index: 1; width: var(--caja); margin-inline: auto; }
.testera h1 { color: #fff; margin-top: 0.9rem; max-width: 20ch; }
.testera .entrada { margin-top: 1rem; max-width: 48ch; color: #e2ded3; text-shadow: 0 1px 12px #211f1a; }
.testera .acento { color: #e8c46b; }
@media (max-width: 700px) {
  .testera__fondo img { width: 100%; }
  .testera__fondo::after { background: linear-gradient(90deg, rgba(25,24,21,.92), rgba(25,24,21,.66)); }
}

.migas { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: #7f9aae; }
.migas a { text-decoration: none; transition: color 0.2s var(--suave); }
.migas a:hover { color: var(--azul-200); }
.migas b { color: #eaf2f8; font-weight: 500; }

/* ---------- Pie ---------- */
.pie { background: var(--azul-950); color: #eaf2f8; padding-block: clamp(3rem, 5vw, 4.5rem) 1.75rem; }
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid rgba(169, 213, 239, 0.18);
}
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-200);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.pie li { color: #a8bfd0; font-size: 0.91rem; }
.pie a { text-decoration: none; color: #a8bfd0; font-size: 0.91rem; transition: color 0.2s var(--suave); }
.pie a:hover { color: #fff; }
.pie__firma img { width: clamp(92px, 9vw, 116px); height: auto; margin-bottom: 1.15rem; }
.pie__firma p { color: #93a9ba; font-size: 0.91rem; max-width: 34ch; }
.social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(169, 213, 239, 0.28);
  border-radius: 3px;
  transition: background 0.2s var(--suave), border-color 0.2s var(--suave), color 0.2s var(--suave);
}
.social a:hover { background: var(--azul-500); border-color: var(--azul-500); color: #fff; }
.social svg { width: 15px; height: 15px; }
.pie__base {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.75rem;
  font-family: var(--mono); font-size: 0.68rem;
  color: #7f9aae;
}

/* ---------- WhatsApp ---------- */
.wa {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.75rem);
  bottom: clamp(0.9rem, 2vw, 1.75rem);
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s var(--suave);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 25px; height: 25px; }

/* ---------- Revelados ---------- */
.js .surge { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--suave), transform 0.5s var(--suave); }
.js .surge.visible { opacity: 1; transform: none; }
.js .surge[data-esp="1"] { transition-delay: 60ms; }
.js .surge[data-esp="2"] { transition-delay: 120ms; }
.js .surge[data-esp="3"] { transition-delay: 180ms; }
.js .surge[data-esp="4"] { transition-delay: 240ms; }
.js .surge[data-esp="5"] { transition-delay: 300ms; }

/* ---------- Utilidades ---------- */
.centro { text-align: center; }
.mt-s { margin-top: clamp(0.75rem, 1.4vw, 1.05rem); }
.mt-m { margin-top: clamp(1.4rem, 2.4vw, 2rem); }
.mt-l { margin-top: clamp(2rem, 3.5vw, 3rem); }
.ancho-60 { max-width: 60ch; }
.ancho-50 { max-width: 50ch; }
.centrado { margin-inline: auto; }
.fila { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fila--centro { justify-content: center; }
.oculto-a11y {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.datos { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.datos li { display: flex; gap: 0.7rem; align-items: baseline; }
.datos svg { flex: none; width: 15px; height: 15px; color: var(--azul-500); transform: translateY(2px); }
.tinta .datos svg, .sangre .datos svg { color: var(--azul-200); }

/* =============================================================
   Componentes de segunda vuelta
   ============================================================= */

/* ---------- Banda de marca ----------
   Un respiro entre secciones donde el logotipo aparece a tamano real. */
.marca {
  background: var(--azul-950);
  color: #eaf2f8;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.marca::before,
.marca::after {
  content: "";
  position: absolute;
  left: 50%; translate: -50% 0;
  width: min(92%, 980px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 48, 0.55), transparent);
}
.marca::before { top: 0; }
.marca::after { bottom: 0; }
.marca__logo {
  width: clamp(112px, 14vw, 168px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
.marca__nombre {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  color: #fff;
  margin-top: 1.4rem;
}
.marca__lema {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: #b7cddd;
  max-width: 54ch;
  margin: 0.85rem auto 0;
}
.marca__paises {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 2.2rem;
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-200);
}
.marca__paises span { position: relative; }
.marca__paises span + span::before {
  content: "";
  position: absolute; left: -1.1rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--oro-500);
  translate: 0 -50%;
}

/* ---------- Galeria horizontal fijada ----------
   La seccion se queda quieta mientras la tira de fotos avanza en
   horizontal con el scroll. Bajo 900px vuelve a ser un carrusel normal
   con scroll-snap, que en tactil se maneja mejor. */
.galeria { position: relative; background: var(--gris-50); }
.galeria__pista {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  /* deja libre la banda de la cabecera fija para que el titulo no quede debajo */
  padding-top: clamp(4rem, 8vh, 5.5rem);
}
.galeria__cabeza {
  width: var(--caja); margin-inline: auto;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.galeria__tira {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
  padding-inline: var(--canal);
  will-change: transform;
}
.galeria__lamina {
  position: relative;
  flex: none;
  width: clamp(240px, 30vw, 420px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gris-100);
  margin: 0;
}
.galeria__lamina img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--suave); }
.galeria__lamina:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .galeria { height: auto !important; }
  .galeria__pista { position: static; height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
  .galeria__tira {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }
  .galeria__lamina { scroll-snap-align: start; width: min(74vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .galeria { height: auto !important; }
  .galeria__pista { position: static; height: auto; padding-block: 3rem; }
  .galeria__tira { transform: none !important; overflow-x: auto; }
}

/* ---------- Mosaico de imagenes ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.mosaico figure { position: relative; overflow: hidden; border-radius: 4px; background: var(--gris-100); margin: 0; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--suave); }
.mosaico figure:hover img { transform: scale(1.05); }
.mosaico .m-alta { grid-row: span 2; aspect-ratio: 3 / 4; }
.mosaico .m-ancha { grid-column: span 2; aspect-ratio: 16 / 9; }
.mosaico figure:not(.m-alta):not(.m-ancha) { aspect-ratio: 1; }
@media (max-width: 860px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico .m-ancha { grid-column: span 2; }
  .mosaico .m-alta { grid-row: span 1; aspect-ratio: 3 / 4; }
}

/* ---------- Parallax interno de las fotos ----------
   La imagen se mueve algo menos que su marco: da profundidad sin
   despegar la foto del bloque de texto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .velo--medio img, .velo--ancho img {
      height: 114%;
      object-fit: cover;
      animation: foto-deriva linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes foto-deriva {
      from { transform: translateY(-7%); }
      to   { transform: translateY(0%); }
    }
  }
}

/* ---------- Titular revelado linea a linea ---------- */
.masc { display: block; overflow: hidden; padding-bottom: 0.06em; }
.masc > span { display: block; transform: translateY(104%); }
.js .portada .masc > span { animation: masc-sube 0.85s var(--salida) forwards; }
.js .portada .masc:nth-of-type(1) > span { animation-delay: 0.08s; }
.js .portada .masc:nth-of-type(2) > span { animation-delay: 0.17s; }
.js .portada .masc:nth-of-type(3) > span { animation-delay: 0.26s; }
html:not(.js) .masc > span { transform: none; }
@keyframes masc-sube { to { transform: translateY(0); } }

/* Fuera de la portada se dispara al entrar en pantalla */
.js .surge .masc > span { transition: transform 0.85s var(--salida); }
.js .surge.visible .masc > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .masc > span { transform: none !important; animation: none !important; }
}

/* ---------- Franja de mercados ---------- */
.mercados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.mercado { background: var(--fondo); padding: clamp(1.1rem, 2vw, 1.6rem); text-align: center; transition: background 0.2s var(--suave); }
.mercado:hover { background: var(--azul-50); }
.tinta .mercado { background: var(--azul-950); }
.tinta .mercado:hover { background: var(--azul-900); }
.mercado__n { font-family: var(--titulo); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; }
.mercado__d { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); margin-top: 0.4rem; }

/* ---------- Cita destacada ---------- */
.cita {
  border-left: 3px solid var(--oro-500);
  padding-left: clamp(1.1rem, 2.5vw, 2rem);
  font-family: var(--titulo);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.cita cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-top: 1rem;
}

/* =============================================================
   Componentes de la reestructuración
   Menú reducido, sub-navegación, diagramas SVG,
   línea de tiempo, etapas y tabla de condiciones.
   ============================================================= */

/* ---------- Botón del menú principal ---------- */
@media (max-width: 1080px) {
}

/* ---------- Sub-navegación pegajosa ---------- */
.subnav {
  position: sticky;
  top: 62px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gris-200);
}
.subnav__caja {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  padding-block: 0.85rem;
  scrollbar-width: none;
}
.subnav__caja::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gris-600);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--suave), border-color 0.2s var(--suave);
}
.subnav a:hover { color: var(--gris-900); }
.subnav a.activo { color: var(--azul-700); border-bottom-color: var(--azul-500); }
section[id] { scroll-margin-top: 8.5rem; }

/* ---------- Cabecera de sección ---------- */
.cabecera-seccion {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
}
.cabecera-seccion .entrada { max-width: 46ch; }
@media (max-width: 860px) { .cabecera-seccion { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Cabecera de página sin foto ----------
   Cuando no hay fotografía con resolución suficiente se usa un lavado de
   color de marca. Es preferible a ampliar una foto pequeña. */
.testera--grafica { background: var(--azul-950); }
.testera__trama {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(12, 144, 204, 0.32) 0%, transparent 62%),
    radial-gradient(60% 80% at 92% 100%, rgba(216, 180, 48, 0.14) 0%, transparent 60%),
    linear-gradient(160deg, #0c3049 0%, #08202f 100%);
}

/* ---------- Diagrama de trazabilidad ---------- */
.dg-caja { max-width: 860px; margin-inline: auto; }
.dg { width: 100%; height: auto; }
.dg__via { stroke: var(--gris-200); stroke-width: 1.5; }
.dg__avance {
  stroke: var(--azul-500);
  stroke-width: 1.5;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
}
.js .visible .dg__avance { animation: dg-traza 1.6s var(--salida) forwards; }
html:not(.js) .dg__avance { stroke-dashoffset: 0; }
@keyframes dg-traza { to { stroke-dashoffset: 0; } }

.dg__nodo circle { fill: #fff; stroke: var(--gris-200); stroke-width: 1.5; }
.dg__nodo { opacity: 0; }
.js .visible .dg__nodo {
  animation: dg-nodo 0.5s var(--salida) forwards;
  animation-delay: calc(0.25s + var(--i) * 0.28s);
}
html:not(.js) .dg__nodo { opacity: 1; }
@keyframes dg-nodo { to { opacity: 1; } }
.dg__n { fill: var(--azul-800); font-size: 17px; font-weight: 600; text-anchor: middle; font-family: var(--titulo); }
.dg__t { fill: var(--gris-600); font-size: 14px; text-anchor: middle; font-family: var(--cuerpo); }

/* ---------- Trazabilidad hasta barra doré ---------- */
.traza-dinamica {
  position: relative;
  overflow: hidden;
  padding: 1rem 0 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--texto);
}
.traza-dinamica::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% 0 auto;
  height: 32%;
  background: linear-gradient(180deg, transparent, rgba(169, 213, 239, 0.055), transparent);
  animation: traza-escaneo 7.5s linear infinite;
  pointer-events: none;
}
.traza-dinamica__alto,
.traza-dinamica__pie { position: relative; z-index: 2; }
.traza-dinamica__alto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(169, 213, 239, 0.16);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #93a9ba;
}
.traza-dinamica__alto span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--apagado); }
.traza-dinamica__alto i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-500);
  box-shadow: 0 0 0 0 rgba(90, 160, 40, 0.5);
  animation: traza-pulso 2s ease-out infinite;
}
.traza-dinamica__lienzo { position: relative; z-index: 1; margin-top: 1.25rem; }
.traza-dinamica__ruta {
  position: absolute;
  z-index: 0;
  top: -0.2rem;
  left: 0;
  width: 100%;
  height: 148px;
  overflow: visible;
}
.traza-dinamica__base,
.traza-dinamica__avance { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.traza-dinamica__base { stroke: #9d8a5a; opacity: .4; }
.traza-dinamica__avance {
  stroke: #b3923a;
  stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  animation: traza-ruta 7.5s linear infinite;
}
.traza-dinamica__viajero {
  fill: var(--oro-400);
  filter: drop-shadow(0 0 7px rgba(252, 228, 92, 0.9));
}
.traza-dinamica__etapas {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.55rem, 1.2vw, 1rem);
  list-style: none;
  padding: 0;
}
.traza-dinamica__etapa {
  min-width: 0;
  padding: 0.55rem clamp(0.55rem, 1vw, 0.9rem) 0.9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  transition: transform 0.3s var(--suave), border-color 0.3s var(--suave), background 0.3s var(--suave);
}
.traza-dinamica__etapa:hover {
  transform: translateY(-5px);
}
.traza-dinamica__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.85rem;
  border: 1px solid rgba(169, 213, 239, 0.35);
  border-radius: 50%;
  background: #082738;
  color: var(--azul-200);
  box-shadow: 0 0 0 6px rgba(6, 28, 42, 0.82);
  animation: traza-nodo 7.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.35s);
}
.traza-dinamica__icono svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.traza-dinamica__icono--dore {
  overflow: hidden;
  color: #fce45c;
  border-color: rgba(252, 228, 92, 0.5);
  background: linear-gradient(145deg, #4f410b, #172a2b);
}
.traza-dinamica__icono--dore::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.52) 50%, transparent 65%);
  transform: translateX(-160%);
  animation: traza-brillo 7.5s ease-in-out infinite 5.6s;
  clip-path: polygon(14% 24%, 34% 4%, 74% 4%, 91% 24%, 80% 85%, 22% 85%);
}
.traza-dinamica__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--apagado);
}
.traza-dinamica__etapa h3 {
  margin-top: 0.35rem;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.18;
}
.traza-dinamica__etapa p {
  margin-top: 0.65rem;
  color: var(--apagado);
  font-size: 0.78rem;
  line-height: 1.52;
}
.traza-dinamica__etapa small {
  display: block;
  margin-top: 0.8rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(169, 213, 239, 0.12);
  color: var(--apagado);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.traza-dinamica__pie {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(169, 213, 239, 0.16);
  color: var(--apagado);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.035em;
}
@keyframes traza-ruta { to { stroke-dashoffset: -1; } }
@keyframes traza-escaneo { to { transform: translateY(520%); } }
@keyframes traza-pulso { 70% { box-shadow: 0 0 0 9px rgba(90, 160, 40, 0); } }
@keyframes traza-nodo {
  0%, 11%, 28%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(6, 28, 42, 0.82); }
  17% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(6, 28, 42, 0.82), 0 0 26px rgba(169, 213, 239, 0.38); }
}
@keyframes traza-brillo { 0%, 12% { transform: translateX(-160%); } 35%, 100% { transform: translateX(160%); } }

@media (max-width: 900px) {
  .traza-dinamica__ruta { display: none; }
  .traza-dinamica__etapas { grid-template-columns: 1fr; gap: 0.65rem; }
  .traza-dinamica__etapas::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(var(--azul-200), rgba(169, 213, 239, 0.16), var(--oro-400));
  }
  .traza-dinamica__etapa {
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 1rem;
    padding: 0.8rem 0;
    text-align: left;
  }
  .traza-dinamica__icono { grid-row: 1 / span 4; margin: 0; }
  .traza-dinamica__n,
  .traza-dinamica__etapa h3,
  .traza-dinamica__etapa p,
  .traza-dinamica__etapa small { grid-column: 2; }
  .traza-dinamica__etapa h3 { margin-top: 0.15rem; }
  .traza-dinamica__etapa p { margin-top: 0.4rem; }
  .traza-dinamica__etapa small { margin-top: 0.5rem; padding-top: 0.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .traza-dinamica::after,
  .traza-dinamica__avance,
  .traza-dinamica__alto i,
  .traza-dinamica__icono,
  .traza-dinamica__icono--dore::after { animation: none !important; }
  .traza-dinamica__viajero { display: none; }
}

.tinta .dg__via { stroke: rgba(169, 213, 239, 0.25); }
.tinta .dg__nodo circle { fill: var(--azul-950); stroke: rgba(169, 213, 239, 0.4); }
.tinta .dg__n { fill: #eaf2f8; }
.tinta .dg__t { fill: #93a9ba; }

@media (prefers-reduced-motion: reduce) {
  .dg__avance { stroke-dashoffset: 0 !important; animation: none !important; }
  .dg__nodo { opacity: 1 !important; animation: none !important; }
}

/* ---------- Mapa de corredores ---------- */
.mp-caja { max-width: 1200px; margin-inline: auto; }
.mp { width: 100%; height: auto; }
.mp-mundo { margin: 0; }
.mp-mundo__ventana { overflow-x: auto; }
.mp-mundo figcaption { margin-top: .8rem; font: .65rem var(--mono); color: var(--apagado, #93a9ba); text-align: center; }
.mp__pais { fill: #d0c7b7; fill-opacity: .16; stroke: #a79d8a; stroke-opacity: .35; stroke-width: .55; stroke-linejoin: round; }
.mp__pais--destino { fill: #c4a966; fill-opacity: .4; stroke: #d2bb80; stroke-opacity: .7; }
.mp__pais--origen { fill: #edc951; fill-opacity: .9; stroke: #ffe999; stroke-opacity: 1; }
.mp__guia { fill: none; stroke: #c4bba7; stroke-width: .7; }
.mp .mp__origen text, .mp .mp__destino text { fill: #eee8d9; paint-order: stroke; stroke: #111c23; stroke-width: 4px; stroke-linejoin: round; }
.mp .mp__halo { fill: none; stroke: #edc951; stroke-width: 1; opacity: .5; }
@media (max-width: 700px) {
  .mp-mundo .mp { min-width: 650px; }
  .mp-mundo figcaption { text-align: left; }
}
.mp__arco {
  fill: none;
  stroke: var(--azul-400);
  stroke-width: 1.2;
  opacity: 0.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .visible .mp__arco {
  animation: mp-traza 1.4s var(--salida) forwards;
  animation-delay: calc(var(--i) * 0.18s);
}
html:not(.js) .mp__arco { stroke-dashoffset: 0; }
@keyframes mp-traza { to { stroke-dashoffset: 0; } }

.mp__origen circle { fill: var(--oro-500); }
.mp__origen text { fill: var(--azul-900); font-size: 15px; font-weight: 600; text-anchor: middle; font-family: var(--titulo); }
.mp__destino circle { fill: var(--azul-600); }
.mp__destino text { fill: var(--gris-600); font-size: 13px; text-anchor: middle; font-family: var(--cuerpo); }
.mp__destino { opacity: 0; }
.js .visible .mp__destino {
  animation: dg-nodo 0.5s var(--salida) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.18s);
}
html:not(.js) .mp__destino { opacity: 1; }

.tinta .mp__origen text { fill: #eaf2f8; }
.tinta .mp__destino text { fill: #93a9ba; }
.tinta .mp__destino circle { fill: var(--azul-200); }

@media (prefers-reduced-motion: reduce) {
  .mp__arco { stroke-dashoffset: 0 !important; animation: none !important; }
  .mp__destino { opacity: 1 !important; animation: none !important; }
}

/* ---------- Línea de tiempo ---------- */
.hitos { list-style: none; padding: 0; display: grid; gap: 0; max-width: 780px; margin-inline: auto; }
.hito {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--linea);
}
.hito__a {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--azul-600);
  font-variant-numeric: tabular-nums;
}
.hito h3 { margin-bottom: 0.3rem; }
.hito p { color: var(--apagado); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 640px) { .hito { grid-template-columns: 1fr; gap: 0.4rem; } }

/* Rejillas de apoyo */
.ficha-rejilla { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (max-width: 900px) {
  .ficha-rejilla { grid-template-columns: 1fr; }
}

/* ---------- Clave numérica de las tarjetas ---------- */
.ficha__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--oro-700);
  margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.tinta .ficha__k { color: var(--oro-400); }

/* ---------- Tabla de condiciones ---------- */
.tabla-caja {
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: 4px;
  overflow: hidden;
}
.tabla { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabla th,
.tabla td {
  text-align: left;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--gris-100);
  vertical-align: top;
}
.tabla tr:first-child th, .tabla tr:first-child td { border-top: 0; }
.tabla th { width: 38%; font-weight: 600; color: var(--gris-900); }
.tabla td { color: var(--apagado); }
@media (max-width: 560px) {
  .tabla th, .tabla td { display: block; width: 100%; padding-block: 0.5rem; }
  .tabla th { border-top: 1px solid var(--gris-100); padding-bottom: 0.1rem; }
  .tabla td { border-top: 0; padding-top: 0.15rem; }
}
/* ---------- Foto de cabecera del artículo ---------- */
.articulo-foto { max-width: 520px; margin: 0 auto clamp(2rem, 4vw, 3rem); }

/* ---------- Mapa embebido ---------- */
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 4px; filter: grayscale(.35) contrast(1.05); }
.mapa--ancho { aspect-ratio: 21 / 9; }

/* =============================================================
   Modo noche, conmutadores e idioma
   ============================================================= */

/* ---------- Conmutadores de la cabecera ---------- */
.marco__util { display: flex; align-items: center; gap: 0.4rem; flex: none; }


@media (max-width: 1040px) {
  .marco__util { order: 2; }
}

/* ---------- Tokens del modo noche: carbón y piedra ---------- */
[data-tema="oscuro"] {
  --gris-0:   #272923;
  --gris-25:  #1d201c;
  --gris-50:  #242720;
  --gris-100: #34372e;
  --gris-200: #474b3e;
  --gris-400: #aaa492;
  --gris-600: #c0bbad;
  --gris-800: #dedacf;
  --gris-900: #f3f0e8;

  --fondo: #191c18;
  --texto: #f3f0e8;
  --apagado: #c0bbad;
  --linea: rgba(214, 199, 164, 0.2);

  --oro-700: #e5c878;
  --rojo: #ff8a75;

  --sombra-s: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-m: 0 4px 16px -6px rgba(0, 0, 0, 0.55);
  --sombra-l: 0 18px 44px -22px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

[data-tema="oscuro"] body { background: var(--fondo); color: var(--texto); }
[data-tema="oscuro"] .papel { background: var(--gris-50); }
[data-tema="oscuro"] .marco { background: rgba(11, 26, 36, 0.92); }
[data-tema="oscuro"] .marco.fijo { border-bottom-color: var(--linea); }
[data-tema="oscuro"] .firma__txt { color: var(--texto); }
[data-tema="oscuro"] .firma__txt span { color: var(--apagado); }
[data-tema="oscuro"] .menu a { color: var(--gris-800); }
[data-tema="oscuro"] .menu a:hover,
[data-tema="oscuro"] .menu a[aria-current="page"] { color: var(--azul-200); }
[data-tema="oscuro"] .abrir span { background: var(--texto); }

@media (max-width: 1040px) {
  [data-tema="oscuro"] .menu { background: var(--gris-0); border-left-color: var(--linea); }
  [data-tema="oscuro"] .menu a { border-bottom-color: var(--linea); }
}

/* Superficies y bordes */
[data-tema="oscuro"] .ficha,
[data-tema="oscuro"] .papel .ficha,
[data-tema="oscuro"] .tabla-caja,
[data-tema="oscuro"] .cotiza { background: var(--gris-0); border-color: var(--linea); }
[data-tema="oscuro"] .virtud,
[data-tema="oscuro"] .papel .virtud,
[data-tema="oscuro"] .oficina,
[data-tema="oscuro"] .papel .oficina,
[data-tema="oscuro"] .cifras > div,
[data-tema="oscuro"] .papel .cifras > div { background: var(--gris-0); }
[data-tema="oscuro"] .virtud:hover,
[data-tema="oscuro"] .oficina:hover { background: var(--gris-100); }
[data-tema="oscuro"] .ficha:hover { border-color: rgba(169, 213, 239, 0.4); }
[data-tema="oscuro"] .campo input,
[data-tema="oscuro"] .campo textarea { background: var(--gris-25); border-color: var(--linea); color: var(--texto); }
[data-tema="oscuro"] .campo input:focus,
[data-tema="oscuro"] .campo textarea:focus { border-color: var(--azul-400); box-shadow: 0 0 0 3px rgba(46, 163, 218, 0.22); }
[data-tema="oscuro"] .campo input::placeholder,
[data-tema="oscuro"] .campo textarea::placeholder { color: var(--gris-400); }

/* El pie y las bandas ya eran oscuros: se igualan al fondo del tema */
[data-tema="oscuro"] .pie,
[data-tema="oscuro"] .tinta,
[data-tema="oscuro"] .marca { background: #071219; }
[data-tema="oscuro"] .cinta { background: #071219; border-color: var(--linea); }
[data-tema="oscuro"] .galeria { background: var(--gris-50); }
[data-tema="oscuro"] .subnav { background: rgba(11, 26, 36, 0.94); border-bottom-color: var(--linea); }
[data-tema="oscuro"] .subnav a { color: var(--apagado); }
[data-tema="oscuro"] .subnav a:hover { color: var(--texto); }
[data-tema="oscuro"] .subnav a.activo { color: var(--azul-200); border-bottom-color: var(--azul-400); }

/* Botones: se mantiene azul-600, que sobre blanco da 5,04:1 */
[data-tema="oscuro"] .btn--linea { color: var(--azul-200); border-color: var(--linea); }
[data-tema="oscuro"] .btn--linea:hover { background: rgba(169, 213, 239, 0.12); border-color: var(--azul-400); color: #fff; }
[data-tema="oscuro"] .ceja { color: var(--azul-200); }
[data-tema="oscuro"] .acento { color: var(--azul-200); }
[data-tema="oscuro"] .sub:hover { color: var(--azul-200); }
[data-tema="oscuro"] .sellos img { filter: grayscale(1) brightness(1.7); opacity: 0.55; }
[data-tema="oscuro"] .sellos img:hover { filter: none; opacity: 1; }
/* Las fotos se atenuan un punto para no deslumbrar sobre fondo oscuro */
[data-tema="oscuro"] .velo img,
[data-tema="oscuro"] .foto-diptico img,
[data-tema="oscuro"] .mosaico img,
[data-tema="oscuro"] .nota__img img,
[data-tema="oscuro"] .galeria__lamina img,
[data-tema="oscuro"] .fijada__lienzo img { filter: brightness(0.88) contrast(1.02); }
[data-tema="oscuro"] .mapa { filter: grayscale(.4) contrast(1.05) invert(0.9) hue-rotate(180deg); }

/* Diagramas */
[data-tema="oscuro"] .dg__via { stroke: var(--gris-200); }
[data-tema="oscuro"] .dg__nodo circle { fill: var(--gris-0); stroke: var(--gris-200); }
[data-tema="oscuro"] .dg__n { fill: var(--texto); }
[data-tema="oscuro"] .dg__t { fill: var(--apagado); }
[data-tema="oscuro"] .mp__origen text { fill: var(--texto); }
[data-tema="oscuro"] .mp__destino text { fill: var(--apagado); }
[data-tema="oscuro"] .mp__destino circle { fill: var(--azul-200); }

/* El conmutador no debe parpadear al cambiar de tema */
@media (prefers-reduced-motion: no-preference) {
  body, .marco, .ficha, .tabla-caja, .cotiza, .campo input, .campo textarea {
    transition: background-color 0.25s var(--suave), border-color 0.25s var(--suave),
                color 0.25s var(--suave);
  }
}

/* =============================================================
   Animaciones añadidas
   ============================================================= */

/* ---------- Punto que recorre el diagrama de trazabilidad ---------- */
.dg__viajero { fill: var(--oro-500); opacity: 0; }
.js .visible .dg__viajero {
  animation: dg-viaja 2.6s var(--suave) 0.3s infinite;
}
@keyframes dg-viaja {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(540px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dg__viajero { display: none; } }

/* Los nodos se “encienden” cuando el punto pasa por ellos */
.dg__nodo circle { transition: fill 0.4s var(--suave), stroke 0.4s var(--suave); }
.js .visible .dg__nodo circle {
  animation: dg-enciende 2.6s var(--suave) infinite;
  animation-delay: calc(0.3s + var(--i) * 0.62s);
}
@keyframes dg-enciende {
  0%, 12%  { stroke: var(--azul-500); }
  40%, 100% { stroke: var(--gris-200); }
}
@media (prefers-reduced-motion: reduce) {
  .js .visible .dg__nodo circle { animation: none; }
}

/* ---------- Pulsos que viajan por los corredores del mapa ---------- */
.mp__pulso { fill: var(--oro-500); opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .mp__pulso { display: none; } }

/* ---------- Revelado por palabras ----------
   Se aplica a los titulares marcados con data-palabras. */
.js .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.5s var(--salida), transform 0.5s var(--salida);
  transition-delay: calc(var(--p) * 45ms);
}
.js .visible .palabra { opacity: 1; transform: none; }
html:not(.js) .palabra { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .palabra { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Barra de avance de la sección fijada ---------- */
.fijada__avance {
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  background: var(--azul-500);
  transition: height 0.25s var(--suave), top 0.25s var(--suave);
}
.fijada__rejilla > div:last-child { position: relative; }
@media (max-width: 900px) { .fijada__avance { display: none; } }

/* ---------- Contadores con subrayado que crece ---------- */
.cifras > div { position: relative; }
.cifras > div::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--oro-500);
  transition: width 0.9s var(--salida);
}
.js .cifras > div.visible::after { width: 38px; }

/* =============================================================
   Ajustes: contraste en modo noche, radios, logotipo y vídeo
   ============================================================= */

/* ---------- 1. Modo noche: textos que quedaban ilegibles ----------
   Estos elementos usaban azules oscuros de la escala (azul-600/800/900),
   pensados para fondo claro. Sobre superficie oscura daban entre 1,17:1 y
   3,37:1. Se pasan a los tonos claros de la misma escala. */
[data-tema="oscuro"] .cotiza__cifra,
[data-tema="oscuro"] .cotiza__fila b { color: var(--texto); }
[data-tema="oscuro"] .cotiza__cifra.sube-flash { color: var(--oro-400); }
[data-tema="oscuro"] .cifra__n { color: var(--azul-200); }
[data-tema="oscuro"] .paso__n,
[data-tema="oscuro"] .virtud__k,
[data-tema="oscuro"] .oficina__pais,
[data-tema="oscuro"] .hito__a { color: var(--azul-200); }
[data-tema="oscuro"] .oficina a,
[data-tema="oscuro"] .nota:hover h3 { color: var(--azul-200); }
[data-tema="oscuro"] .cotiza__var.arriba { color: #6fce52; }
[data-tema="oscuro"] .cinta__via b { color: var(--azul-200); }
[data-tema="oscuro"] .cinta__via { color: var(--apagado); }
[data-tema="oscuro"] .cinta__via i { color: var(--gris-400); }
[data-tema="oscuro"] .paso.activo { border-left-color: var(--azul-400); }
[data-tema="oscuro"] .cita { border-left-color: var(--oro-400); }

/* ---------- 2. Radios ----------
   Un solo sitio donde tocarlos. Las fotos van más redondeadas que las cajas. */
:root {
  --r-foto: 16px;
  --r-caja: 12px;
  --r-boton: 10px;
}

.velo,
.foto-diptico,
.mosaico figure,
.nota__img,
.ficha__img,
.galeria__lamina,
.fijada__lienzo,
.articulo-foto,
.mapa { border-radius: var(--r-foto); overflow: hidden; }

.tabla-caja,
.cotiza,
.campo input,
.campo textarea,

.btn { border-radius: var(--r-boton); }

/* El recorte del pie de foto acompaña al radio del contenedor */
.folio { border-radius: 0 var(--r-caja) 0 0; }
.fijada__contador { border-radius: var(--r-caja); }

/* Las fotos de la galería y el mosaico ya recortan por overflow */
.galeria__lamina img,
.mosaico img,
.velo img { border-radius: inherit; }

/* ---------- 3. El logotipo, con más presencia ---------- */
.marco__caja { padding-block: 0.85rem; }
.marco.fijo .marco__caja { padding-block: 0.6rem; }

.firma { gap: 1rem; }
.firma img {
  width: clamp(74px, 7.5vw, 104px);
  transition: width 0.28s var(--suave);
}
.marco.fijo .firma img { width: clamp(58px, 5.4vw, 76px); }

.firma__txt { font-size: clamp(1.15rem, 1.8vw, 1.55rem); letter-spacing: -0.03em; }
.firma__txt span { font-size: 0.6rem; letter-spacing: 0.24em; margin-top: 0.34rem; }

@media (max-width: 640px) {
  .firma img { width: clamp(60px, 15vw, 72px); }
  .firma__txt { font-size: 1.05rem; }
  .firma__txt span { font-size: 0.54rem; letter-spacing: 0.16em; }
}

/* En el pie y en la banda de marca el logotipo también crece */
.pie__firma img { width: clamp(108px, 11vw, 140px); }
.marca__logo { width: clamp(132px, 15vw, 208px); }

/* ---------- 4. Vídeo de fondo en la portada ----------
   El <video> se apila sobre la foto: si el archivo no existe o el navegador
   no puede reproducirlo, queda la foto, que es el mismo encuadre. */
.portada__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--suave);
  pointer-events: none;
}
.portada__video.listo { opacity: 1; }
.portada__video--youtube { overflow: hidden; }
.portada__video--youtube iframe {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border: 0;
  max-width: none;
}
.video-enlace {
  position: absolute; z-index: 4;
  right: calc(var(--canal) + 3.4rem); bottom: 1.1rem;
  min-height: 36px; display: inline-flex; align-items: center;
  padding: .3rem .7rem; border-radius: 4px;
  background: rgba(20, 22, 21, .72); color: #fff;
  font: .65rem var(--mono); text-decoration: none;
}
.video-enlace:hover { text-decoration: underline; }
@media (max-width: 640px) { .video-enlace { bottom: .7rem; } }
.portada__fondo { z-index: 0; }
.portada__fondo::after { z-index: 2; }
.portada::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(25, 24, 21, 0.9) 0%,
    rgba(25, 24, 21, 0.69) 43%,
    rgba(25, 24, 21, 0.18) 100%);
}
.portada__caja { position: relative; z-index: 3; }

/* Control para detener el vídeo: un fondo en movimiento tiene que poder pararse */
.video-pausa {
  position: absolute;
  z-index: 4;
  right: var(--canal);
  bottom: 1.1rem;
  display: none;            /* sólo aparece si hay vídeo reproduciéndose */
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-boton);
  background: rgba(8, 32, 47, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.video-pausa.visible { display: inline-flex; }
.video-pausa:hover { background: rgba(8, 32, 47, 0.75); }
.video-pausa svg { width: 13px; height: 13px; }
.video-pausa .icono-play { display: none; }
.video-pausa[aria-pressed="true"] .icono-pausa { display: none; }
.video-pausa[aria-pressed="true"] .icono-play { display: block; }
@media (max-width: 640px) { .video-pausa { bottom: 0.7rem; } }

/* =============================================================
   Cabecera: transparente sobre la portada, conmutador ES/EN segmentado
   Referencia: selcosicompany.com (empresa hermana), adaptada a esta paleta.
   ============================================================= */

/* ---------- La cabecera flota sobre la portada ----------
   Todas las páginas abren con una banda oscura (portada o testera), así que
   arriba del todo la barra puede ser transparente. Al hacer scroll recupera
   su fondo sólido, que es cuando pasa por delante de contenido claro. */
.marco {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s var(--suave), border-color 0.3s var(--suave),
              backdrop-filter 0.3s var(--suave);
}
.marco.fijo {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--gris-200);
}
[data-tema="oscuro"] .marco { background: transparent; }
[data-tema="oscuro"] .marco.fijo { background: rgba(11, 26, 36, 0.94); }

/* Mientras flota, todo va en blanco sobre la foto */
.marco:not(.fijo) .firma__txt { color: #fff; }
.marco:not(.fijo) .firma__txt span { color: rgba(255, 255, 255, 0.72); }
.marco:not(.fijo) .abrir span { background: #fff; }

@media (min-width: 1041px) {
  .marco:not(.fijo) .menu a { color: rgba(255, 255, 255, 0.86); }
  .marco:not(.fijo) .menu a:hover,
  .marco:not(.fijo) .menu a[aria-current="page"] { color: #fff; }
  .marco:not(.fijo) .menu a::after { background: var(--oro-500); }
}

/* El separador entre el isotipo y el nombre, como en la referencia */
.firma__barra {
  width: 1px;
  height: clamp(30px, 3.4vw, 44px);
  background: var(--gris-200);
  flex: none;
  transition: background 0.3s var(--suave);
}
.marco:not(.fijo) .firma__barra { background: rgba(255, 255, 255, 0.34); }
[data-tema="oscuro"] .firma__barra { background: var(--linea); }
@media (max-width: 480px) { .firma__barra { display: none; } }

/* ---------- Conmutador de idioma segmentado ----------
   Píldora con borde dorado; el idioma activo va relleno en oro. */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(216, 180, 48, 0.36);
  border-radius: 999px;
  flex: none;
}
.idioma__op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--gris-600);
  transition: background 0.2s var(--suave), color 0.2s var(--suave);
}
.idioma__op:hover { color: var(--gris-900); background: rgba(216, 180, 48, 0.12); }
.idioma__op[aria-current="true"] {
  background: var(--oro-500);
  color: #1a1408;
  font-weight: 700;
}
.marco:not(.fijo) .idioma__op { color: rgba(255, 255, 255, 0.72); }
.marco:not(.fijo) .idioma__op:hover { color: #fff; }
.marco:not(.fijo) .idioma__op[aria-current="true"] { color: #1a1408; }
[data-tema="oscuro"] .idioma__op { color: var(--apagado); }
[data-tema="oscuro"] .idioma__op:hover { color: var(--texto); }
[data-tema="oscuro"] .idioma__op[aria-current="true"] { color: #1a1408; }

@media (max-width: 480px) {
  .idioma__op { min-width: 30px; padding: 4px 9px; font-size: 0.68rem; }
}

/* Mientras la barra flota, el botón de cotizar mantiene su relleno */

/* La portada arranca bajo la barra transparente: se compensa el alto */
/* La barra flota sobre la portada: el titular necesita aire para no
   quedar pegado a ella. */
.portada { padding-top: clamp(11rem, 23vh, 15.5rem); }
.testera { padding-top: clamp(11.5rem, 24vh, 15.5rem); }

/* ---------- Impresión ---------- */
@media print {
  .js .surge, .js .surge.visible, .js .velo { opacity: 1 !important; transform: none !important; }
  .marco, .wa, .cinta, .progreso { display: none !important; }
  .portada, .testera, .sangre, .pie, .tinta { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
  .portada__fondo, .testera__fondo, .sangre__fondo { display: none; }
  h1, h2, h3, h4, .portada h1, .testera h1, .sangre h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}


/* =============================================================
   Cabecera en tres zonas: logotipo · menú centrado · utilidades
   ============================================================= */
/* Rejilla de tres columnas con los laterales iguales: así el menú queda
   centrado respecto a la ventana y no respecto al hueco que le dejan el
   logotipo y las utilidades, que tienen anchos distintos. */
.marco__caja {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
}
.firma { justify-self: start; }
.menu { justify-self: center; gap: clamp(0.8rem, 2vw, 2.2rem); }
.marco__util { justify-self: end; }

@media (max-width: 1040px) {
  /* El menú pasa a cajón lateral: sale del flujo y la barra queda en dos
     columnas, logotipo y utilidades. */
  .marco__caja { grid-template-columns: 1fr auto; }
  .menu { justify-self: stretch; }
}

/* El botón de cotizar ya no vive en la cabecera */


/* =============================================================
   El nombre: SELva · COSta · SIerra
   ============================================================= */
.acronimo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  background: var(--gris-0);
}
@media (max-width: 860px) { .acronimo { grid-template-columns: 1fr; } }

.acronimo__partes {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
@media (max-width: 520px) { .acronimo__partes { grid-template-columns: 1fr; } }

.acronimo__parte { border-top: 2px solid var(--oro-500); padding-top: 0.85rem; }

/* La sílaba que aporta el nombre va en oro; el resto de la palabra, apagado */
.acronimo__silaba {
  font-family: var(--titulo);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  /* gris-400 daba 2,40:1 sobre blanco: insuficiente incluso para texto grande */
  color: var(--gris-600);
}
.acronimo__silaba b { color: var(--oro-700); font-weight: 600; }
[data-tema="oscuro"] .acronimo__silaba b { color: var(--oro-400); }

.acronimo__region {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-600);
  margin-top: 0.6rem;
}
[data-tema="oscuro"] .acronimo__region { color: var(--azul-200); }
.acronimo__nota { font-size: 0.88rem; line-height: 1.45; color: var(--apagado); margin-top: 0.3rem; }

/* Las tres partes entran escalonadas */
.js .acronimo .acronimo__parte {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--salida), transform .5s var(--salida);
  transition-delay: calc(var(--i) * 110ms);
}
.js .acronimo.visible .acronimo__parte { opacity: 1; transform: none; }
html:not(.js) .acronimo__parte { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .acronimo .acronimo__parte { opacity: 1 !important; transform: none !important; }
}


/* =============================================================
   Velo bajo la cabecera flotante
   El texto va en blanco mientras la barra es transparente. Este degradado
   garantiza que se lea sobre cualquier foto, aunque cambie la imagen de
   portada, y desaparece en cuanto la barra recupera su fondo sólido.
   ============================================================= */
.marco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 32, 47, 0.55) 0%, rgba(8, 32, 47, 0) 100%);
  opacity: 1;
  transition: opacity 0.3s var(--suave);
  pointer-events: none;
}
.marco.fijo::before { opacity: 0; }

/* ---------- Equilibrio de color: oro, marfil, carbón y salvia ----------
   El azul se conserva en el logotipo y enlaces de apoyo, no en cada fondo. */
@media screen {
  :focus-visible { outline-color: var(--oro-700); }
  ::selection { background: var(--oro-100); color: #29251c; }
  .progreso { background: var(--oro-500); }
  .acento, .ceja { color: var(--oro-700); }
  .portada .acento, .testera .acento, .sangre .acento, .tinta .acento,
  .portada .ceja, .testera .ceja, .sangre .ceja, .tinta .ceja,
  [data-tema="oscuro"] .acento, [data-tema="oscuro"] .ceja { color: #e5c878; }
  .portada .entrada, .sangre .entrada { color: #e0dccf; }
  .avales { color: #c7c1b2; }

  .btn--linea { color: var(--oro-700); border-color: var(--gris-200); }
  .btn--linea:hover { color: var(--texto); background: var(--oro-100); border-color: var(--oro-500); }
  .portada .btn--linea, .tinta .btn--linea, .sangre .btn--linea,
  [data-tema="oscuro"] .btn--linea { color: #e5c878; border-color: rgba(200,162,75,.5); }
  .portada .btn--linea:hover, .tinta .btn--linea:hover, .sangre .btn--linea:hover,
  [data-tema="oscuro"] .btn--linea:hover { color: #fff3cd; background: rgba(200,162,75,.12); border-color: #e5c878; }

  .cotiza { background: #fffaf0; border-top: 3px solid var(--oro-500); }
  .cotiza__cifra { color: var(--oro-700); }
  .cotiza__fila b { color: var(--texto); }
  [data-tema="oscuro"] .cotiza { background: #2c2a22; border-top-color: var(--oro-500); }
  .cotiza__var.arriba { color: #397128; }
  [data-tema="oscuro"] .cotiza__var.arriba { color: #9ac788; }
  .cinta { background: var(--gris-50); }
  .cinta__via b, .cifra__n, .paso__n { color: var(--oro-700); }
  .paso.activo { border-left-color: var(--oro-500); }
  .fijada__avance { background: var(--oro-500); }

  .tinta { --fondo: #0c3049; --texto: #f2f6f8; --apagado: #c3d1db; background: var(--fondo); }
  .pie { background: #08202f; }
  .marca { background: #c8a24b; color: #2c240f; }
  .marca .marca__nombre { color: #2c240f; }
  .marca .marca__lema, .marca .marca__paises { color: #403417; }
  .marca::before, .marca::after { background: rgba(67,50,11,.25); }
  .marca__paises span + span::before { background: #594519; }
  .marca__logo { filter: drop-shadow(0 8px 18px rgba(65,49,10,.18)); }
  .empleos { padding: 1.5rem; background: #fbf1d3; border-left: 3px solid #c8a24b; }
  .empleos p { color: #665329; }
  [data-tema="oscuro"] .tinta, [data-tema="oscuro"] .marca,
  [data-tema="oscuro"] .pie, [data-tema="oscuro"] .cinta { background: #131711; }
  .tinta .mercado { background: rgba(200,162,75,.07); }
  .tinta .mercado:hover { background: rgba(200,162,75,.14); }
  .mercado__n { color: #e5c878; }
  .pie h4, .marca__paises { color: #d6b567; }
  .pie li, .pie a, .pie__firma p, .pie__base, .marca__lema { color: #c3beaf; }
  .pie a:hover { color: #f2d68b; }
  .sangre { background: #23261f; }
  .sangre__fondo img { opacity: .65; filter: saturate(.85); }
  .sangre__fondo::after { background: linear-gradient(96deg, rgba(27,32,24,.93), rgba(27,32,24,.6)); }

  .mp__arco { stroke: #d0ae5d; opacity: .85; }
  .mp .mp__destino circle, [data-tema="oscuro"] .mp__destino circle { fill: #e5c878; }
  .mp .mp__origen text, .mp .mp__destino text { stroke: #20241f; }
  .traza-dinamica__icono { background: #302e23; color: #e5c878; border-color: #9a824a; box-shadow: 0 0 0 6px var(--fondo); }
  .traza-dinamica__icono--dore { background: #4b3c17; color: #ffe6a0; }
  @keyframes traza-nodo {
    0%, 11%, 28%, 100% { transform: scale(1); box-shadow: 0 0 0 6px var(--fondo); }
    17% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--fondo), 0 0 26px rgba(200,162,75,.35); }
  }
  .traza-dinamica__etapas::before { background: linear-gradient(#b3923a, var(--linea), #c8a24b); }

  .marco.fijo { background: rgba(255,254,250,.96); }
  [data-tema="oscuro"] .marco.fijo { background: rgba(25,28,24,.96); }
  .marco::before { background: linear-gradient(180deg, rgba(25,28,24,.65), transparent); }
  [data-tema="oscuro"] .subnav { background: rgba(29,32,28,.95); }
  .subnav a.activo, [data-tema="oscuro"] .subnav a.activo { color: var(--oro-700); border-bottom-color: var(--oro-500); }
  .datos svg { color: var(--oro-700); }
  .campo input:focus, .campo textarea:focus,
  [data-tema="oscuro"] .campo input:focus, [data-tema="oscuro"] .campo textarea:focus { border-color: var(--oro-500); box-shadow: 0 0 0 3px rgba(200,162,75,.18); }

  [data-pagina="sostenibilidad"] .papel { --fondo: #edf0e6; background: var(--fondo); }
  [data-pagina="sostenibilidad"] .papel .ceja { color: #4a6244; }
  [data-pagina="sostenibilidad"] .papel .ficha { border-top: 3px solid #7b9266; }
  [data-tema="oscuro"] [data-pagina="sostenibilidad"] .papel { --fondo: #242d22; background: var(--fondo); }
  [data-tema="oscuro"] [data-pagina="sostenibilidad"] .papel .ceja { color: #b3ca9f; }
}

/* Hero editorial: fotografía cálida, video en su formato y cotización integrada. */
.portada { padding-block: clamp(9rem, 13vw, 11rem) 3.5rem; }
.portada__rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.portada h1 { font-size: clamp(2.6rem, 4.5vw, 4.3rem); line-height: 1.05; }
.portada .entrada { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 44ch; }
.portada .avales { font-size: .75rem; gap: .7rem 1.3rem; margin-top: 1.6rem; }
.portada__media { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.hero-film { width: 100%; margin: 0; min-width: 0; }
.hero-film__cuadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #181e1f; outline: 1px solid rgba(229,200,120,.55); border-radius: 3px; box-shadow: 0 18px 50px #0005; }
.hero-film__cuadro > img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.hero-film .video-enlace { left: .8rem; right: auto; bottom: .8rem; min-height: 44px; font-size: .72rem; }
.hero-film .video-pausa { right: .8rem; bottom: .8rem; width: 44px; min-height: 44px; justify-content: center; }
.hero-film__iniciar { position: absolute; z-index: 4; inset: 45% auto auto 50%; translate: -50% -50%; white-space: nowrap; border: 1px solid #f0dca9; background: #1c2426e8; color: #fff3ce; padding: .9rem 1.1rem; border-radius: 3px; cursor: pointer; font: 500 .9rem var(--cuerpo); }
.hero-film__iniciar[hidden] { display: none; }
.hero-film figcaption { margin-top: .7rem; font-size: .72rem; line-height: 1.6; color: #e1dac8; }
.hero-film figcaption a { display: block; color: #f0d89b; text-underline-offset: .2em; }
.cotiza--hero { padding: 0 1.25rem; border: 1px solid #e7dac0; border-top: 3px solid var(--oro-500); border-radius: 4px; background: #fffaf0; box-shadow: 0 8px 24px #0002; }
.cotiza__resumen { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1rem; cursor: pointer; list-style: none; padding-block: 1rem .8rem; }
.cotiza__resumen::-webkit-details-marker { display: none; }
.cotiza__resumen .cotiza__alto { grid-column: 1 / -1; padding: 0; border: 0; font-size: .7rem; justify-content: start; gap: .6rem; }
.cotiza__resumen .cotiza__cifra { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 0; white-space: nowrap; }
.cotiza__resumen .cotiza__unidad { margin: 0; max-width: 17ch; text-align: right; font-size: .7rem; }
.cotiza__abrir { grid-column: 1 / -1; margin-top: .1rem; padding-top: .6rem; border-top: 1px solid #e7dac0; color: #685020; font-size: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cotiza__abrir b { font-size: 1.3rem; transition: rotate .2s; }
.cotiza--hero[open] .cotiza__abrir b { rotate: 45deg; }
.cotiza__contenido { padding-bottom: 1.5rem; border-top: 1px solid #e7dac0; }
.cotiza--hero .cotiza__tabla { grid-template-columns: 1fr; gap: .65rem; }
.cotiza--hero .chispa { max-width: 500px; }
.portada .cotiza__contenido .forma__nota { color: var(--gris-600); font-size: .75rem; }
.cotiza__unidad, .cotiza__pie, .cotiza__tabla, .traza-dinamica__etapa small { font-size: .75rem; }
.marca { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 1.8rem; text-align: left; padding: 2rem var(--canal); align-items: center; }
.marca__logo { width: 84px; grid-row: 1 / 4; margin: 0; }
.marca__nombre { margin: 0; font-size: 1.5rem; }
.marca__lema { margin: .35rem 0; max-width: none; font-size: 1rem; }
.marca__paises { justify-content: flex-start; margin-top: .5rem; font-size: .72rem; }
.galeria--compacta .galeria__pista { position: static; height: auto; padding-block: 3.5rem; }
.galeria--compacta .galeria__tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: var(--caja); margin-inline: auto; padding: 0; overflow: visible; transform: none; }
.galeria--compacta .galeria__lamina { width: 100%; aspect-ratio: 4 / 3; }
[data-pagina="inicio"] .bloque { padding-block: clamp(3rem, 5vw, 4.5rem); }
.producto-foto { margin: 0; }
.producto-foto img { width: 100%; border-radius: 3px; }
.faq { border-bottom: 1px solid var(--linea); padding-block: 1.1rem; }
.faq summary { font-weight: 600; color: var(--texto); cursor: pointer; padding-block: .35rem; }
.faq p { color: var(--apagado); margin-top: .75rem; }
.forma__opcional { border-block: 1px solid var(--linea); padding-block: .7rem; }
.forma__opcional summary { padding-block: .3rem; cursor: pointer; color: var(--oro-700); }
.forma__nota a { color: var(--oro-700); }
.articulo__editorial { font-size: .9rem; color: var(--oro-700); font-weight: 600; }
.articulo__archivo { font-size: .85rem; border-left: 2px solid var(--oro-500); padding-left: 1rem; color: var(--apagado); }
@media (max-width: 960px) {
  .portada__rejilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; }
  .portada h1 { font-size: 2.7rem; }
  .cotiza__resumen { gap: .6rem 1.2rem; }
  .cotiza__resumen .cotiza__unidad { display: none; }
}
@media (max-width: 700px) {
  .portada { padding-block: 8rem 2rem; }
  .portada__rejilla { grid-template-columns: 1fr; gap: 1.8rem; }
  .portada h1 { font-size: clamp(2.15rem, 8.9vw, 3.2rem); margin-block: .85rem 1rem; }
  .portada .ceja { font-size: .65rem; letter-spacing: .08em; }
  .portada .entrada { font-size: 1rem; }
  .portada__acciones { margin-top: 1.2rem; gap: .6rem; }
  .portada__acciones .btn { font-size: .8rem; padding-inline: .85rem; }
  .portada .avales { font-size: .7rem; gap: .5rem .9rem; padding-top: 1rem; margin-top: 1.2rem; }
  .portada__media .cotiza { order: -1; }
  .cotiza--hero { padding-inline: 1rem; }
  .cotiza__resumen .cotiza__cifra { font-size: 1.7rem; }
  .cotiza__resumen .cotiza__unidad { display: block; font-size: .65rem; }
  .cotiza__resumen .cotiza__alto { font-size: .65rem; gap: .4rem; }
  .marca { grid-template-columns: 58px minmax(0, 1fr); gap: .25rem 1rem; padding-block: 1.5rem; }
  .marca__logo { width: 58px; }
  .marca__nombre { font-size: 1.15rem; }
  .marca__lema { font-size: .85rem; }
  .marca__paises { grid-column: 1 / -1; gap: .6rem 1.5rem; margin-top: .8rem; font-size: .65rem; }
  .galeria--compacta .galeria__tira { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .galeria--compacta .galeria__lamina { width: 80%; flex: none; scroll-snap-align: start; }
}
@media print {
  .portada__media { display: none; }
}

/* Navegación móvil: cabecera estable, panel legible y controles de 44 px. */
.foto-referencial { margin: 0; }
.foto-referencial img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.sost-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 700px) { .sost-galeria { grid-template-columns: 1fr; gap: 2.5rem; } }
.menu__movil, .menu-velo { display: none; }
@media (max-width: 1080px) {
  .marco, .marco.fijo { background: #fffefb; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #e8e1d4; }
  .marco::before { content: none; }
  .marco .marco__caja { display: flex; height: 76px; padding-block: 0; gap: 1rem; }
  .marco .firma { gap: .7rem; }
  .marco .firma img { width: 56px; }
  .marco .firma__barra { display: none; }
  .marco .firma__txt, .marco:not(.fijo) .firma__txt { color: #153244; font-size: 1.1rem; }
  .marco .firma__txt span, .marco:not(.fijo) .firma__txt span { color: #665f53; font-size: .57rem; }
  .marco .marco__util { margin-left: auto; }
  .marco__util > .idioma { display: none; }
  .marco .abrir { display: block; width: 46px; height: 46px; border-radius: 8px; border-color: #d8c8a5; background: #fbf5e8; }
  .marco .abrir span, .marco:not(.fijo) .abrir span { background: #153244; left: 12px; }
  .marco .menu { position: fixed; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; overflow-y: auto; }
  .menu-velo:not([hidden]) { display: block; position: fixed; inset: 76px 0 0; z-index: 100; width: 100%; height: calc(100dvh - 76px); border: 0; background: #07172380; }
  .marco .menu { z-index: 101; inset: 76px 0 0 auto; height: calc(100dvh - 76px); width: min(90vw, 390px); padding: 1rem 1.5rem max(1.5rem, env(safe-area-inset-bottom)); background: #fffefb; border-color: #e8e1d4; visibility: hidden; transform: translateX(101%); overscroll-behavior: contain; box-shadow: -12px 16px 40px #10202b26; transition: transform .25s ease, visibility .25s; }
  .marco .menu { visibility: visible; transition: transform .25s ease; }
  .marco .menu.abierto { transform: translateX(0); }
  .marco .menu a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .75rem 0; font-size: 1.05rem; color: #223643; border-bottom-color: #e8e1d4; white-space: normal; }
  .marco .menu a[aria-current="page"] { color: #795719; border-left: 3px solid #bd9238; background: #fbf3df; padding-inline: .8rem; }
  .marco .menu a:hover { color: #795719; }
  .menu__movil { display: block; }
  .menu__intro > span { display: block; color: #80601d; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .12em; padding-block: .4rem .75rem; }
  .menu__extra { margin-top: .5rem; }
  .marco .menu .menu__cotizar { justify-content: center; gap: .75rem; padding: .75rem 1rem; margin-top: 1.1rem; background: #c8a24b; color: #241d0d; border: 0; border-radius: 5px; font-size: .95rem; font-weight: 600; }
  .menu__idiomas { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.25rem; border: 1px solid #d8c8a5; border-radius: 6px; overflow: hidden; }
  .marco .menu__idiomas a, .menu__idiomas span { display: flex; min-height: 46px; align-items: center; justify-content: center; font-size: .9rem; padding: .5rem; border: 0; }
  .menu__idiomas span { background: #f3e6c5; color: #634a17; font-weight: 600; }
  .marco .menu .menu__telefono { justify-content: center; font-size: .85rem; margin-top: .6rem; border: 0; }
  body.bloqueado .wa { visibility: hidden; }
  .testera { padding-top: 8rem; }
  .subnav { top: 76px; }
}
@media (max-width: 360px) {
  .marco .firma img { width: 48px; }
  .marco .firma__txt { font-size: 1rem; }
  .marco .menu { padding-inline: 1.1rem; }
  .cotiza__resumen .cotiza__unidad { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marco .menu { transition: none; }
}