/* ═══════════════════════════════════════════════════════════════════════
   KINGDOM JEWELRY · hoja de estilos del sitio
   ───────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA OFICIAL
   Titulares:  Perpetua Titling MT (mayúsculas)
   Serif:      Perpetua (normal, itálica, itálica negrita)
   Texto:      Raleway (Media 500 y Seminegrita 600)

   Perpetua y Perpetua Titling MT son de Monotype y la licencia de Office
   es SOLO de escritorio: no cubre el uso incrustado en web. Por eso van
   declaradas como fuentes locales — se ven perfectas en los equipos que
   las tienen instaladas — con una cadena de respaldo para el resto.
   Para garantizarlas a todo visitante hay que comprar la licencia web a
   Monotype y descomentar el bloque @font-face de más abajo.
   Raleway sí se sirve libremente (licencia SIL Open Font).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fuentes propias, servidas desde el mismo dominio ──────────────────
   Perpetua: archivo aportado por Kingdom, convertido a WOFF2 (fsType 0).
   Raleway : paquete oficial con licencia SIL Open Font (ver raleway-LICENSE.txt).
   Faltan por cargar: Perpetua Italic, Perpetua Bold Italic y las dos
   Perpetua Titling MT. Hasta que lleguen, los rótulos en mayúsculas caen
   al serif del sistema y la itálica la sintetiza el navegador.          */
@font-face{font-family:'Perpetua';src:url('/fuentes/perpetua-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/fuentes/raleway-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/fuentes/raleway-500-italic.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url('/fuentes/raleway-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* ═══ 1. VARIABLES ═══════════════════════════════════════════════════ */
:root{
  /* Paleta oficial */
  --vino:#73162F;  --noche:#042B28;  --petroleo:#305D62;
  --jade:#48887B;  --arena:#CBB490;  --menta:#E1F2ED;
  /* Derivados de trabajo */
  --noche-2:#063632; --noche-3:#021D1B; --arena-2:#E3D1B2;
  --tinta:#10201D;  --tinta-2:#4B5C59; --tinta-3:#8095921a;
  --papel:#FBFBF9;
  --linea:rgba(4,43,40,.11);
  --oro-linea:rgba(203,180,144,.32);
  --oro-suave:rgba(203,180,144,.1);

  --titulo:'Perpetua Titling MT','Perpetua',serif;
  --display:'Perpetua',serif;
  --texto:'Raleway',sans-serif;

  --ancho:1200px;
  --r:3px;
  --curva:cubic-bezier(.22,.61,.36,1);
  --sombra:0 1px 2px rgba(4,43,40,.04),0 14px 38px -16px rgba(4,43,40,.2);
  --sombra-alta:0 2px 5px rgba(4,43,40,.06),0 34px 70px -24px rgba(4,43,40,.34);
}

/* ═══ 2. BASE ════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:17px;font-weight:500;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
::selection{background:var(--arena);color:var(--noche)}
:focus-visible{outline:2px solid var(--arena);outline-offset:3px}

h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.12;letter-spacing:-.008em}
h1,h2{font-family:var(--display)}
h3,h4{font-family:var(--display)}
.mayus{font-family:var(--titulo);text-transform:uppercase;letter-spacing:.06em}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(22px,5vw,52px)}
.estrecho{max-width:760px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:16px;top:16px;z-index:300;background:var(--papel);padding:12px 18px;
  border-radius:var(--r);box-shadow:var(--sombra-alta)}

/* ═══ 3. PIEZAS COMUNES ══════════════════════════════════════════════ */
.rotulo{display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-family:var(--texto);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--petroleo)}
.rotulo::before{content:'';width:36px;height:1px;background:var(--arena);flex:0 0 auto}
.rotulo .num{color:var(--arena);font-variant-numeric:tabular-nums}
.oscuro .rotulo{color:var(--arena-2)}
.oscuro .rotulo::before{background:var(--oro-linea)}

.ornamento{display:flex;align-items:center;justify-content:center;gap:22px;
  padding-block:clamp(44px,6vw,76px)}
.ornamento::before,.ornamento::after{content:'';height:1px;width:min(160px,22vw);
  background:linear-gradient(90deg,transparent,var(--oro-linea))}
.ornamento::after{transform:scaleX(-1)}
.ornamento img{width:16px;opacity:.8}

/* Medallón de icono */
/* Los iconos de marca combinan jade, arena y menta: sobre blanco la menta
   desaparece. Por eso el medallón lleva fondo verde noche siempre — así los
   tres colores leen igual en secciones claras y oscuras. */
.medallon{width:66px;height:66px;border-radius:50%;border:1px solid var(--oro-linea);
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  background:radial-gradient(circle at 50% 22%,var(--noche-2),var(--noche) 78%);
  box-shadow:inset 0 0 0 1px rgba(203,180,144,.08);
  transition:border-color .5s var(--curva),transform .5s var(--curva),
             box-shadow .5s var(--curva)}
.medallon img{width:26px;height:26px;object-fit:contain;
  filter:brightness(0) saturate(100%) invert(84%) sepia(14%) saturate(560%)
         hue-rotate(348deg) brightness(94%) contrast(87%)}

/* Ilustración de marca al fondo de cada tarjeta: grande, tenue y recortada. */
.fondo-tarjeta{position:absolute;right:-34px;bottom:-30px;width:168px;height:auto;
  opacity:.13;pointer-events:none;z-index:0}
.pilar > *:not(.fondo-tarjeta),.nota > *:not(.fondo-tarjeta){position:relative;z-index:1}
.nota{position:relative;overflow:hidden}
.nota .fondo-tarjeta{width:140px;right:-28px;bottom:-24px}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:11px;padding:17px 34px;border-radius:999px;border:1px solid transparent;
  font-family:var(--texto);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:transform .45s var(--curva),box-shadow .45s var(--curva),
             background-color .45s var(--curva),color .45s var(--curva),
             border-color .45s var(--curva)}
.btn svg,.btn img{width:16px;height:16px;flex:0 0 auto}
.btn-oro{background:linear-gradient(135deg,var(--arena-2),var(--arena));color:#2B1F12;
  box-shadow:0 12px 30px -14px rgba(203,180,144,.9)}
.btn-oro:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(203,180,144,1)}
.btn-linea{border-color:var(--oro-linea);color:var(--menta)}
.btn-linea:hover{border-color:var(--arena);background:rgba(203,180,144,.1);transform:translateY(-2px)}
.btn-tinta{border-color:rgba(4,43,40,.24);color:var(--noche)}
.btn-tinta:hover{background:var(--noche);border-color:var(--noche);color:var(--menta);transform:translateY(-2px)}
.acciones{display:flex;flex-wrap:wrap;gap:14px}

/* ═══ 4. CABECERA ════════════════════════════════════════════════════ */
.cabecera{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background-color .5s var(--curva),box-shadow .5s var(--curva),
             border-color .5s var(--curva)}
.cabecera .fila{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-block:20px;transition:padding .5s var(--curva)}
.cabecera .marca{width:183px;transition:width .5s var(--curva)}
.cabecera .marca .verde{display:none}
.cabecera nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.cabecera .enlaces{display:none;gap:clamp(16px,2.6vw,34px)}
.cabecera .enlaces a{position:relative;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(225,242,237,.76);padding-block:4px;white-space:nowrap;
  transition:color .35s var(--curva)}
.cabecera .enlaces a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--arena);transition:right .45s var(--curva)}
.cabecera .enlaces a:hover{color:var(--menta)}
.cabecera .enlaces a:hover::after{right:0}
.cabecera .cita{display:none}
.idioma{border:1px solid rgba(225,242,237,.28);border-radius:999px;padding:7px 16px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--menta);transition:border-color .35s var(--curva),background-color .35s var(--curva),color .35s var(--curva)}
.idioma:hover{border-color:var(--arena);background:rgba(203,180,144,.14)}
.cabecera.fija{background:rgba(251,251,249,.94);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--linea);box-shadow:0 1px 26px -12px rgba(4,43,40,.26)}
.cabecera.fija .fila{padding-block:12px}
.cabecera.fija .marca{width:160px}
.cabecera.fija .marca .claro{display:none}
.cabecera.fija .marca .verde{display:block}
.cabecera.fija .enlaces a{color:var(--tinta-2)}
.cabecera.fija .enlaces a:hover{color:var(--noche)}
.cabecera.fija .idioma{border-color:rgba(4,43,40,.22);color:var(--noche)}
.cabecera.interna{background:rgba(251,251,249,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--linea)}
.cabecera.interna .marca .claro{display:none}
.cabecera.interna .marca .verde{display:block}
.cabecera.interna .enlaces a{color:var(--tinta-2)}
.cabecera.interna .idioma{border-color:rgba(4,43,40,.22);color:var(--noche)}
@media(min-width:1000px){.cabecera .enlaces{display:flex}.cabecera .cita{display:inline-flex}}

/* ═══ 5. PORTADA ═════════════════════════════════════════════════════ */
.portada{position:relative;background:var(--noche);color:var(--menta);
  overflow:hidden;isolation:isolate;min-height:clamp(620px,94svh,940px);display:flex;align-items:center}
.portada::before{content:'';position:absolute;z-index:-3;inset:0;
  background:radial-gradient(1100px 760px at 78% 46%,rgba(72,136,123,.44),transparent 66%)}
.portada::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--noche) 24%,rgba(4,43,40,.86) 50%,rgba(4,43,40,.24) 100%)}
.portada .gema-fondo{position:absolute;z-index:-2;right:min(2vw,40px);top:50%;
  transform:translateY(-50%);width:clamp(320px,46vw,680px);opacity:.26;pointer-events:none}
.portada .mosaico{position:absolute;z-index:-2;left:-60px;bottom:-40px;width:clamp(200px,24vw,340px);
  opacity:.09;pointer-events:none}
.portada .contenedor{position:relative;padding-block:clamp(124px,16vh,168px) clamp(72px,10vh,110px);width:100%}
.portada .marca-grande{width:clamp(223px,27.6vw,319px);margin-bottom:clamp(34px,5vw,50px)}
.eslogan{font-family:var(--titulo);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--arena);margin:0 0 24px}
.portada h1{font-size:clamp(37px,5.6vw,64px);max-width:16ch;letter-spacing:-.018em}
.portada h1 em{font-style:italic;color:var(--arena-2)}
.entrada{font-size:clamp(16.5px,1.55vw,19px);line-height:1.74;color:rgba(225,242,237,.82);
  max-width:56ch;margin:26px 0 38px}
.bajo-portada{display:flex;align-items:center;gap:14px;margin-top:34px;
  font-size:13px;letter-spacing:.05em;color:rgba(225,242,237,.62)}
.bajo-portada .medallon{width:44px;height:44px}
.bajo-portada .medallon img{width:21px;height:21px}

/* ═══ 6. CINTA DE CREDENCIALES (monocroma, en movimiento) ════════════ */
.cinta{position:relative;background:var(--noche-2);color:var(--menta);
  border-block:1px solid var(--oro-linea);overflow:hidden;padding-block:20px}
.cinta::before,.cinta::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--noche-2),transparent)}
.cinta::after{right:0;background:linear-gradient(270deg,var(--noche-2),transparent)}
.cinta .riel{display:flex;width:max-content;animation:desfile 42s linear infinite}
.cinta:hover .riel{animation-play-state:paused}
.cinta .grupo{display:flex;align-items:center;gap:clamp(30px,5vw,62px);padding-right:clamp(30px,5vw,62px)}
.credencial{display:flex;align-items:center;gap:13px;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(225,242,237,.72)}
.credencial img{width:22px;height:22px;object-fit:contain;opacity:.72;
  filter:grayscale(1) brightness(0) invert(88%) sepia(12%) saturate(220%) hue-rotate(110deg)}
.credencial b{font-family:var(--titulo);font-size:14px;letter-spacing:.1em;color:var(--arena-2);font-weight:400}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ 7. SECCIONES ═══════════════════════════════════════════════════ */
.seccion{padding-block:clamp(70px,9.5vw,118px)}
.seccion.oscuro{background:var(--noche);color:var(--menta)}
.seccion.claro{background:var(--menta)}
.seccion.papel{background:var(--papel)}
h2{font-size:clamp(29px,4.3vw,50px);max-width:19ch}
.oscuro h2{color:var(--menta)}
.bajada{color:var(--tinta-2);max-width:62ch;margin-top:20px;font-size:17px}
.oscuro .bajada{color:rgba(225,242,237,.76)}

/* Pilares con iconografía */
.pilares{display:grid;gap:clamp(14px,1.8vw,22px);margin-top:clamp(42px,5.5vw,60px);
  grid-template-columns:1fr}
@media(min-width:660px){.pilares{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.pilares{grid-template-columns:repeat(4,1fr)}}
.pilar{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(26px,2.8vw,34px) clamp(22px,2.4vw,28px);overflow:hidden;
  transition:transform .5s var(--curva),box-shadow .5s var(--curva),border-color .5s var(--curva)}
.pilar::before{content:'';position:absolute;inset:0 0 auto;height:2px;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--arena),var(--jade));
  transition:transform .6s var(--curva)}
.pilar:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:var(--oro-linea)}
.pilar:hover::before{transform:scaleX(1)}
.pilar:hover .medallon{transform:scale(1.06);border-color:var(--arena)}
.pilar .medallon{margin-bottom:22px}
.pilar h3{font-size:21px;margin-bottom:10px}
.pilar p{font-size:15px;line-height:1.66;color:var(--tinta-2)}

/* Bloque a dos columnas */
.doble{display:grid;gap:clamp(38px,5.5vw,72px);align-items:center;grid-template-columns:1fr}
@media(min-width:920px){.doble{grid-template-columns:1.04fr 1fr}.doble.invertida .lamina{order:-1}}
.lamina{position:relative}
.lamina::before,.lamina::after{content:'';position:absolute;width:46px;height:46px;
  border:1px solid var(--arena);opacity:.6;pointer-events:none}
.lamina::before{top:-12px;left:-12px;border-right:0;border-bottom:0}
.lamina::after{bottom:-12px;right:-12px;border-left:0;border-top:0}
.marco{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);
  background:linear-gradient(150deg,var(--menta),#F5FAF8);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:28px}
.marco span{font-size:12.5px;line-height:1.6;color:var(--petroleo);max-width:32ch;letter-spacing:.04em}
.marco img.foto{width:100%;height:100%;object-fit:cover}

.puntos{list-style:none;padding:0;margin:32px 0 0}
.puntos li{display:flex;gap:15px;align-items:flex-start;padding-block:15px;
  border-top:1px solid var(--linea);font-size:15.5px;line-height:1.62}
.puntos li:last-child{border-bottom:1px solid var(--linea)}
.oscuro .puntos li,.claro .puntos li{border-color:rgba(48,93,98,.18)}
.puntos img{width:13px;margin-top:6px;flex:0 0 auto;opacity:.85}

/* Servicios */
.servicios{display:grid;gap:clamp(26px,3.6vw,48px);margin-top:clamp(38px,5vw,56px);grid-template-columns:1fr}
@media(min-width:760px){.servicios{grid-template-columns:1fr 1fr}}
.servicio{padding-top:26px;border-top:1px solid var(--oro-linea)}
.servicio .cifra{font-family:var(--display);font-size:46px;line-height:1;color:var(--arena);
  display:block;margin-bottom:12px}
.servicio h3{font-size:24px;margin-bottom:11px}
.servicio p{font-size:15.5px;color:var(--tinta-2)}
.oscuro .servicio p{color:rgba(225,242,237,.75)}

/* ═══ 8. DÓNDE ESTAMOS ═══════════════════════════════════════════════ */
.mapa-bloque{display:grid;gap:clamp(30px,4vw,54px);margin-top:clamp(38px,5vw,56px);
  grid-template-columns:1fr;align-items:stretch}
@media(min-width:940px){.mapa-bloque{grid-template-columns:1fr 1.15fr}}
.mapa{position:relative;border:1px solid var(--oro-linea);border-radius:var(--r);
  overflow:hidden;min-height:340px;background:var(--menta)}
.mapa iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:saturate(.86)}
.ficha{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;grid-template-columns:1fr;align-content:start}
@media(min-width:520px){.ficha{grid-template-columns:1fr 1fr}}
.ficha > div{background:var(--papel);padding:26px clamp(20px,2.2vw,26px)}
.ficha h3{font-family:var(--texto);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--petroleo);margin-bottom:11px}
.ficha p{font-size:15px;line-height:1.6}
.ficha a{color:var(--petroleo);border-bottom:1px solid var(--oro-linea);
  transition:color .3s var(--curva),border-color .3s var(--curva)}
.ficha a:hover{color:var(--noche);border-color:var(--noche)}

/* ═══ 9. RESEÑAS ═════════════════════════════════════════════════════ */
.resenas{display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(38px,5vw,54px);grid-template-columns:1fr}
@media(min-width:700px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(24px,2.6vw,30px);display:flex;flex-direction:column;gap:14px}
.estrellas{display:flex;gap:3px;color:var(--arena);font-size:14px;letter-spacing:.14em}
.resena blockquote{margin:0;font-family:var(--display);font-size:18px;line-height:1.52;color:var(--tinta)}
.resena cite{font-style:normal;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);margin-top:auto}
.resena-pie{display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  margin-top:clamp(30px,4vw,40px);padding-top:26px;border-top:1px solid var(--linea)}
.resena-pie img{width:104px;border:1px solid var(--linea);border-radius:var(--r);padding:7px;background:#fff}
.resena-pie p{font-size:14.5px;color:var(--tinta-2);max-width:44ch}

/* ═══ 10. CIERRE Y PIE ═══════════════════════════════════════════════ */
.cierre{position:relative;background:var(--noche);color:var(--menta);text-align:center;
  overflow:hidden;isolation:isolate}
.cierre::before{content:'';position:absolute;z-index:-1;inset:0;
  background:radial-gradient(ellipse at 50% 118%,rgba(72,136,123,.44),transparent 62%)}
.cierre .contenedor{padding-block:clamp(80px,11vw,130px)}
.cierre .slogan-img{width:min(310px,72vw);margin:0 auto 34px;opacity:.9}
.cierre h2{margin-inline:auto;max-width:21ch}
.cierre p{color:rgba(225,242,237,.8);max-width:50ch;margin:22px auto 38px;font-size:17px}
.cierre .acciones{justify-content:center}

.pie{background:var(--noche-3);color:rgba(225,242,237,.6);font-size:14.5px}
.pie .contenedor{padding-block:clamp(50px,6.5vw,72px)}
.pie .rejilla{display:grid;gap:clamp(28px,4vw,44px);grid-template-columns:1fr}
@media(min-width:800px){.pie .rejilla{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pie .marca{width:191px;margin-bottom:18px}
.pie h4{font-family:var(--texto);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--arena);margin:0 0 13px}
.pie p{margin-bottom:6px;line-height:1.6}
.pie a{color:rgba(225,242,237,.86);transition:color .3s var(--curva)}
.pie a:hover{color:var(--arena-2)}
.pie .legal{margin-top:clamp(34px,4.5vw,50px);padding-top:22px;
  border-top:1px solid rgba(225,242,237,.1);font-size:12.5px;color:rgba(225,242,237,.42);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}

/* ═══ 11. BLOG ═══════════════════════════════════════════════════════ */
.cabecera-interna{padding-block:clamp(120px,15vh,168px) clamp(40px,6vw,64px);
  background:var(--menta);border-bottom:1px solid var(--linea)}
.miga{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo);
  margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap}
.miga a{border-bottom:1px solid var(--oro-linea)}
.miga span{opacity:.6}
.cabecera-interna h1{font-family:var(--display);font-size:clamp(32px,5vw,54px);max-width:22ch}
.meta-nota{margin-top:18px;font-size:13.5px;letter-spacing:.06em;color:var(--tinta-2)}

.articulo{padding-block:clamp(48px,7vw,80px)}
.articulo .contenedor{max-width:760px}
.articulo p{margin-bottom:22px;font-size:17.5px;line-height:1.8}
.articulo h2{font-size:clamp(25px,3.4vw,34px);margin:44px 0 16px;max-width:26ch}
.articulo h3{font-size:21px;margin:32px 0 12px}
.articulo ul,.articulo ol{margin:0 0 24px;padding-left:22px}
.articulo li{margin-bottom:10px;line-height:1.72}
.articulo strong{font-weight:600;color:var(--noche)}
.articulo a{color:var(--petroleo);border-bottom:1px solid var(--oro-linea)}
.articulo a:hover{color:var(--noche);border-color:var(--noche)}
.destacado{border-left:2px solid var(--arena);padding:6px 0 6px 24px;margin:32px 0;
  font-family:var(--display);font-size:20px;line-height:1.55;color:var(--noche)}
.cta-nota{margin-top:44px;padding:clamp(26px,3.4vw,36px);border:1px solid var(--oro-linea);
  border-radius:var(--r);background:var(--menta);display:flex;flex-wrap:wrap;
  align-items:center;gap:20px;justify-content:space-between}
.cta-nota p{margin:0;font-size:16px;max-width:42ch}

.notas{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(36px,5vw,52px);grid-template-columns:1fr}
@media(min-width:720px){.notas{grid-template-columns:repeat(3,1fr)}}
.nota{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:clamp(24px,2.6vw,30px);
  display:flex;flex-direction:column;gap:13px;
  transition:transform .5s var(--curva),box-shadow .5s var(--curva),border-color .5s var(--curva)}
.nota:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:var(--oro-linea)}
.nota .medallon{width:54px;height:54px;margin-bottom:4px}
.nota .medallon img{width:28px;height:28px}
.nota h3{font-size:20px;line-height:1.24}
.nota p{font-size:14.5px;color:var(--tinta-2);line-height:1.62}
.nota .leer{margin-top:auto;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--petroleo)}

/* ═══ 12. APARICIÓN AL DESPLAZAR ═════════════════════════════════════ */
.revela{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--curva),transform .9s var(--curva)}
.revela.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revela{opacity:1;transform:none;transition:none}
  .cinta .riel{animation:none}
  .btn,.pilar,.nota,.medallon{transition:none}
}

/* ═══ 13. MENÚ ═══════════════════════════════════════════════════════
   Pulcro y mínimo: en escritorio solo texto y un botón; en móvil, una
   lámina a pantalla completa con los enlaces en serif y nada más.      */
.hamburguesa{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0 9px;background:none;border:0;cursor:pointer}
.hamburguesa span{display:block;height:1px;background:var(--menta);
  transition:background-color .4s var(--curva),transform .4s var(--curva)}
.hamburguesa span:last-child{width:62%;margin-left:auto}
.cabecera.fija .hamburguesa span,.cabecera.interna .hamburguesa span{background:var(--noche)}
@media(min-width:1000px){.hamburguesa{display:none}}

.menu-movil{position:fixed;inset:0;z-index:200;background:var(--noche);color:var(--menta);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,8vw,64px);animation:lamina .45s var(--curva)}
.menu-movil[hidden]{display:none}
@keyframes lamina{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-movil .cerrar{position:absolute;top:18px;right:20px;width:46px;height:46px;
  background:none;border:1px solid var(--oro-linea);border-radius:50%;color:var(--arena);
  font-size:24px;line-height:1;cursor:pointer;transition:border-color .35s var(--curva)}
.menu-movil .cerrar:hover{border-color:var(--arena)}
.menu-movil nav{display:flex;flex-direction:column;gap:6px}
.menu-movil nav a{font-family:var(--display);font-size:clamp(28px,8vw,40px);line-height:1.3;
  color:var(--menta);padding-block:7px;border-bottom:1px solid rgba(203,180,144,.16);
  transition:color .35s var(--curva),padding-left .35s var(--curva)}
.menu-movil nav a:hover{color:var(--arena-2);padding-left:8px}
.menu-pie{margin-top:clamp(30px,6vw,46px);display:flex;flex-wrap:wrap;align-items:center;gap:16px}


/* ═══ 14. ORIGEN ═════════════════════════════════════════════════════
   Los mapas de Colombia y Boyacá usados a tamaño real, que es donde su
   trazo se lee. Aquí la ilustración es contenido, no decoración.        */
.origen{position:relative;background:var(--noche);color:var(--menta);overflow:hidden;isolation:isolate}
.origen::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 620px at 22% 40%,rgba(72,136,123,.34),transparent 68%)}
.origen .par{display:grid;gap:clamp(40px,6vw,76px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.origen .par{grid-template-columns:1fr 1fr}}
.mapas{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;
  gap:clamp(18px,3vw,34px);min-height:300px}
.mapas figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.mapas img{width:100%;max-width:260px;height:auto}
.mapas .pais img{opacity:.42}
.mapas .depto img{filter:drop-shadow(0 0 26px rgba(203,180,144,.42))}
.mapas figcaption{font-family:var(--titulo);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--arena);text-align:center;
  padding-top:14px;border-top:1px solid var(--oro-linea);width:100%}
.mapas .pais figcaption{color:rgba(203,180,144,.55)}

/* ═══ 15. PROCESO ════════════════════════════════════════════════════ */
.proceso{counter-reset:paso;display:grid;gap:0;margin-top:clamp(40px,5vw,58px);grid-template-columns:1fr}
@media(min-width:760px){.proceso{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.proceso{grid-template-columns:repeat(4,1fr)}}
.paso{counter-increment:paso;position:relative;padding:clamp(28px,3vw,36px) clamp(22px,2.4vw,30px);
  border-top:1px solid var(--oro-linea)}
@media(min-width:760px){.paso{border-left:1px solid var(--oro-linea)}
  .paso:first-child{border-left:0}}
.paso::before{content:counter(paso,decimal-leading-zero);display:block;
  font-family:var(--display);font-size:clamp(44px,5vw,60px);line-height:1;
  color:var(--arena);opacity:.34;margin-bottom:16px}
.paso h3{font-size:20px;margin-bottom:10px}
.paso p{font-size:15px;color:var(--tinta-2);line-height:1.64}
.oscuro .paso p{color:rgba(225,242,237,.74)}

/* ═══ 16. GALERÍA ════════════════════════════════════════════════════ */
.galeria{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(38px,5vw,54px);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.galeria{grid-template-columns:repeat(4,1fr)}}
.galeria .hueco{aspect-ratio:3/4;border:1px dashed rgba(4,43,40,.26);border-radius:var(--r);
  background:linear-gradient(160deg,var(--menta),#F6FBF9);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:18px;overflow:hidden}
.galeria .hueco span{font-size:11.5px;line-height:1.55;color:var(--petroleo);letter-spacing:.05em}
.galeria img.foto{width:100%;height:100%;object-fit:cover}
.galeria .hueco.r45{aspect-ratio:4/5}

/* ═══ 17. PREGUNTAS ══════════════════════════════════════════════════ */
.faq{margin-top:clamp(38px,5vw,54px);max-width:860px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(18px,2vw,22px);line-height:1.34;
  transition:color .35s var(--curva)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--arena);border-bottom:1px solid var(--arena);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--curva)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq summary:hover{color:var(--petroleo)}
.faq .cuerpo{padding:0 44px 26px 0;color:var(--tinta-2);font-size:16px;line-height:1.72}
.oscuro .faq details{border-color:rgba(203,180,144,.2)}
.oscuro .faq .cuerpo{color:rgba(225,242,237,.76)}

/* ═══ 18. DETALLES DE PORTADA ════════════════════════════════════════ */
.filete-oro{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--oro-linea) 20%,var(--arena) 50%,var(--oro-linea) 80%,transparent)}
.pista{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--titulo);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(203,180,144,.68);z-index:2}
.pista i{display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--arena),transparent);animation:caer 2.6s var(--curva) infinite}
@keyframes caer{0%{opacity:0;transform:scaleY(.2);transform-origin:top}
  40%{opacity:1;transform:scaleY(1);transform-origin:top}
  100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.pista i{animation:none}}
@media(max-width:700px){.pista{display:none}}

/* ── 20 · Galería: celdas con foto ────────────────────────────────────────── */
.galeria .hueco.llena{border:0;padding:0;margin:0;background:var(--papel);
  box-shadow:0 1px 2px rgba(4,43,40,.06),0 14px 34px -22px rgba(4,43,40,.34)}
.galeria .hueco.llena picture{display:block;width:100%;height:100%}
.galeria .hueco.llena img.foto{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.galeria .hueco.llena:hover img.foto{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.galeria .hueco.llena img.foto{transition:none}
  .galeria .hueco.llena:hover img.foto{transform:none}}

/* ── 21 · Secciones sin fotografía todavía ────────────────────────────────── */
/* Mientras falten las fotos reales, la rejilla de dos columnas colapsa a una
   sola y el texto se limita a un ancho de lectura, en vez de dejar un vacío. */
@media(min-width:920px){
  /* Una sola columna centrada lee como decision editorial, no como hueco. */
  .doble.sola{grid-template-columns:1fr;justify-items:center}
  .doble.sola>div{max-width:74ch;width:100%}
  .doble.sola h2{max-width:20ch}
  .doble.sola .bajada,.doble.sola>div>p{max-width:66ch}
}

/* ── 22 · Galería: la rejilla se ajusta al número de fotos entregadas ─────── */
/* La rejilla base es de cuatro columnas. Con menos fotos, cuatro columnas
   dejan la fila descuadrada contra el margen izquierdo: se reduce y se centra. */
@media(min-width:900px){
  .galeria.n1{grid-template-columns:minmax(0,340px);justify-content:center}
  .galeria.n2{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center}
  .galeria.n3{grid-template-columns:repeat(3,minmax(0,340px));justify-content:center}
}

/* ── 19 · Linaje de marca: tres emblemas y la transición ──────────────────── */
/* Los tres logos son de épocas distintas y tienen proporciones distintas.
   Cada uno se centra dentro de una placa de la misma altura: así conservan su
   forma propia y aun así pesan igual en la fila. */
.linaje{display:grid;gap:clamp(14px,2vw,26px);align-items:start;margin-top:clamp(34px,4.5vw,52px)}
/* minmax(0,1fr) y no 1fr: por defecto una pista 1fr no baja del ancho minimo de
   su contenido, y los pies en versalitas con interletrado empujaban la rejilla
   unos 130 px fuera del contenedor. */
@media(min-width:900px){
  .linaje{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column}
  .linaje{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
}
.linaje > *{min-width:0}

.linaje .era{margin:0;min-width:0;display:flex;flex-direction:column;gap:18px}

/* La etiqueta de epoca es el eje de tiempo. Las dos anteriores van en texto
   suelto y solo la vigente lleva la pildora dorada: asi se lee de un golpe
   cual es el emblema de hoy. El alto fijo alinea los tres logos entre si. */
.linaje .epoca{margin:0;min-height:26px;display:flex;align-items:center;justify-content:center}
.linaje .epoca span{display:inline-block;padding:4px 13px;border:1px solid transparent;
  border-radius:999px;
  font-family:var(--texto);font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#8E9A93;white-space:nowrap}
.linaje .era.hoy .epoca span{border-color:var(--oro-linea);
  background:rgba(203,180,144,.09);color:#A8814A}
/* Sin tarjeta: los emblemas van sueltos sobre el fondo de la seccion.
   Se conserva el alto fijo porque es lo que alinea los tres entre si. */
.linaje .placa{height:clamp(150px,17vw,196px);padding:clamp(8px,1vw,14px);
  /* Flex y no grid: con place-items:center el area de la rejilla queda de alto
     automatico y el height:100% de la imagen no tiene contra que resolverse,
     asi que un SVG vertical se desborda y queda recortado por la mitad. */
  display:flex;align-items:center;justify-content:center;overflow:visible}
.linaje .placa picture{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0;min-height:0}
/* width+height al 100% con object-fit:contain es lo unico que contiene de forma
   fiable un SVG con dimensiones intrinsecas dentro de una caja de alto fijo. */
.linaje .placa img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;
  /* Los tres emblemas son de epocas distintas y tienen paletas que no conversan
     (negro y verde, corona dorada, verde noche). En monocroma se leen como una
     sola familia; el color aparece solo cuando el visitante se detiene en uno. */
  filter:grayscale(1) contrast(1.06) opacity(.72);
  transform:scale(1);
  transition:filter .75s var(--curva),transform .75s var(--curva)}
.linaje .era:hover .placa img,
.linaje .era:focus-within .placa img{filter:grayscale(0) contrast(1) opacity(1);transform:scale(1.10)}

/* Sin cursor no hay hover: en tactil los emblemas van a color desde el principio. */
@media(hover:none){
  .linaje .placa img{filter:none;transform:none}
}



.linaje figcaption{display:flex;flex-direction:column;gap:7px;text-align:center;
  padding-top:16px;border-top:1px solid var(--oro-linea)}
.linaje figcaption b{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.6vw,19px);
  color:var(--noche);letter-spacing:-.005em}
.linaje figcaption span{font-family:var(--texto);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-wrap:balance;text-transform:uppercase;color:var(--petroleo)}

/* Un rombo tallado entre cada emblema. No es una flecha a proposito: la flecha
   dirige ("esto paso a ser aquello") y la seccion cuenta lo contrario, que es el
   mismo taller con tres nombres. El rombo separa y marca ritmo, sin dirigir. */
.linaje .salto{display:flex;align-items:center;justify-content:center;color:#B99E74;
  height:clamp(150px,17vw,196px);width:clamp(52px,5.5vw,78px)}
.linaje .salto svg{width:clamp(26px,2.6vw,36px);height:auto}
.linaje .salto svg *{transform-origin:center;transform-box:fill-box}
.linaje .salto .canto{opacity:0;transform:scale(.55) rotate(-35deg)}
.linaje .salto .mesa{opacity:0;transform:scale(.6) rotate(-20deg)}
.linaje .salto .nucleo{opacity:0;transform:scale(.4)}
.linaje .salto.visible .canto{opacity:.72;transform:none;
  transition:opacity .6s ease,transform .8s var(--curva)}
.linaje .salto.visible .mesa{opacity:.9;transform:none;
  transition:opacity .6s ease .12s,transform .8s var(--curva) .12s}
.linaje .salto.visible .nucleo{opacity:1;transform:none;
  transition:opacity .5s ease .28s,transform .7s var(--curva) .28s}

/* En vertical el rombo solo necesita menos aire; no hay nada que rotar. */
/* Al rotar 90 grados, el ANCHO del svg pasa a ser su alto: la caja tiene que
   medir lo mismo o la flecha se monta sobre el pie de foto de arriba. */
@media(max-width:899px){
  .linaje{gap:4px}
  .linaje .salto{width:100%;height:56px}
}
@media(prefers-reduced-motion:reduce){
  .linaje > *,.linaje > *.visible{opacity:1;transform:none;transition:none}
  /* El color sigue apareciendo al pasar el cursor; lo que se retira es el zoom. */
  .linaje .placa img{transition:filter .4s linear}
  .linaje .era:hover .placa img{transform:none}
  .linaje .salto svg *{opacity:1;transform:none}
}

/* ── 23 · Imágenes: fricción contra la descarga fácil ─────────────────────── */
/* Aviso honesto: esto NO impide copiar una imagen. Lo que el navegador muestra,
   el visitante ya lo tiene descargado. Lo que se evita aquí es el gesto casual:
   arrastrar la foto al escritorio, el menú del clic derecho y el menú de
   mantener pulsado en iOS. Quien sepa abrir las herramientas del navegador la
   saca igual. La proteccion real es la marca de agua y subir solo resolucion web. */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}