/* =========================================================
   Valor History — valorhistory.blog
   Identidad visual propia. Paleta derivada de las tintas de
   calcografía usadas históricamente en papel moneda
   (violeta de imprenta, verde botella, ocre) sobre papel de
   seguridad gris verdoso. Ninguna referencia a paletas,
   logos o estilizaciones de marcas ajenas.
   ========================================================= */

:root{
  --papel:        #E9EAE2;
  --papel-claro:  #F8F8F3;
  --tinta:        #1C1524;
  --violeta:      #56306B;
  --verde:        #12523F;
  --ocre:         #B5822A;
  --linea:        #C6C7BA;
  --gris:         #5D5C57;

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dato:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --medida: 66ch;
  --borde: 1px solid var(--linea);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}

a{color:var(--violeta);text-decoration:none;border-bottom:1px solid rgba(86,48,107,.35)}
a:hover{border-bottom-color:var(--violeta)}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}

.envoltorio{width:min(1140px,92vw);margin-inline:auto}
.medida{max-width:var(--medida)}

/* ---------- etiquetas de dato (mono) ---------- */
.rotulo{
  font-family:var(--dato);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}

/* =========================================================
   Cabecera y navegación (idénticas en todas las páginas)
   ========================================================= */
.cabecera{
  border-bottom:var(--borde);
  background:var(--papel);
  position:sticky;top:0;z-index:20;
}
.cabecera__fila{
  display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;
  align-items:center;justify-content:space-between;
  padding:.95rem 0;
}
.marca{display:flex;align-items:center;gap:.85rem;text-decoration:none;border:0}
.marca__sello{
  width:38px;height:38px;flex:0 0 38px;
  border:1.5px solid var(--violeta);border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-size:.95rem;font-weight:600;
  color:var(--violeta);letter-spacing:.02em;
}
.marca__nombre{
  font-family:var(--display);
  font-size:1.5rem;font-weight:600;letter-spacing:-.01em;
  color:var(--tinta);line-height:1;
}
.insignia{
  display:inline-block;
  font-family:var(--dato);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);
  border:1px solid rgba(18,82,63,.45);
  border-radius:2px;
  padding:.28rem .5rem;
  white-space:nowrap;
}
.nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.nav a{
  font-family:var(--dato);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta);border-bottom:1px solid transparent;padding-bottom:2px;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ocre);color:var(--violeta)}

/* =========================================================
   Exenciones de responsabilidad
   ========================================================= */
.aviso{
  background:var(--papel-claro);
  border:var(--borde);
  border-left:4px solid var(--ocre);
  padding:1.1rem 1.3rem;
}
.aviso__titulo{
  font-family:var(--dato);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);margin:0 0 .4rem;
}
.aviso p{margin:0;font-size:.95rem;color:var(--tinta)}
.aviso p + p{margin-top:.5rem}

.aviso--superior{margin:1.6rem 0 0}

.aviso--marca{
  border-left-width:3px;
  border-left-color:var(--violeta);
  padding:.85rem 1rem;
  margin:1.5rem 0;
  font-size:.9rem;
}
.aviso--marca p{font-size:.9rem;color:var(--gris)}

/* =========================================================
   INICIO — hero + roseta + libro mayor + grilla asimétrica
   ========================================================= */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;
  align-items:center;
  padding:3.2rem 0 2.6rem;
}
.hero__eyebrow{margin:0 0 1.1rem}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,4.5rem);
  font-weight:600;line-height:.98;letter-spacing:-.02em;
  margin:0 0 1.1rem;
}
.hero h1 em{font-style:italic;color:var(--violeta)}
.hero__bajada{font-size:1.1rem;max-width:46ch;color:var(--gris);margin:0 0 1.6rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem;border-top:var(--borde);padding-top:1rem}
.hero__meta div{min-width:110px}
.hero__meta strong{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600}
.roseta{position:relative;display:grid;place-items:center}
.roseta img{width:min(100%,380px);opacity:.9;animation:girar 140s linear infinite}
.roseta__centro{
  position:absolute;text-align:center;font-family:var(--dato);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
}
@keyframes girar{to{transform:rotate(360deg)}}

/* qué es / qué no es */
.definicion{
  display:grid;grid-template-columns:1fr 1fr;
  border:var(--borde);background:var(--papel-claro);
  margin-bottom:3.4rem;
}
.definicion__col{padding:1.7rem 1.8rem}
.definicion__col + .definicion__col{border-left:var(--borde)}
.definicion h2{
  font-family:var(--dato);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 1rem;
}
.definicion--si h2{color:var(--verde)}
.definicion--no h2{color:var(--violeta)}
.definicion ul{list-style:none;margin:0;padding:0}
.definicion li{
  position:relative;padding-left:1.6rem;margin-bottom:.7rem;font-size:.97rem;
}
.definicion li::before{
  position:absolute;left:0;top:0;font-family:var(--dato);font-size:.85rem;
}
.definicion--si li::before{content:"+";color:var(--verde)}
.definicion--no li::before{content:"×";color:var(--violeta)}

/* grilla de artículos */
.seccion-titulo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-bottom:2px solid var(--tinta);padding-bottom:.6rem;margin-bottom:1.8rem;
}
.seccion-titulo h2{font-family:var(--display);font-size:1.9rem;font-weight:600;margin:0}
.grilla{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea);border:var(--borde);margin-bottom:3.4rem;
}
.pieza{
  background:var(--papel-claro);
  padding:1.5rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;gap:.7rem;
  transition:background .2s ease;
}
.pieza:hover{background:#fff}
.pieza--destacada{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.pieza--destacada h3{font-size:2.1rem}
.pieza--destacada .pieza__resumen{font-size:1.02rem;max-width:44ch}
.ficha{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-family:var(--dato);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris);
}
.ficha span{border-bottom:1px solid var(--linea);padding-bottom:.15rem}
.ficha .ficha__id{color:var(--ocre);border-bottom-color:rgba(181,130,42,.5)}
.pieza h3{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.12;margin:0}
.pieza h3 a{color:var(--tinta);border:0}
.pieza h3 a:hover{color:var(--violeta)}
.pieza__resumen{margin:0;font-size:.93rem;color:var(--gris)}
.pieza__pie{margin-top:auto;font-family:var(--dato);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violeta)}

/* franja de temas */
.franja{
  border-top:var(--borde);border-bottom:var(--borde);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  margin-bottom:3.5rem;
}
.franja div{background:var(--papel);padding:1.3rem 1.2rem}
.franja h3{font-family:var(--display);font-size:1.05rem;margin:.45rem 0 .3rem;font-weight:600}
.franja p{margin:0;font-size:.85rem;color:var(--gris)}

/* =========================================================
   ACERCA — editorial a dos columnas con aside pegajoso
   ========================================================= */
.acerca{padding:2.8rem 0 1rem}
.acerca__encabezado{border-bottom:2px solid var(--tinta);padding-bottom:1.4rem;margin-bottom:2.4rem}
.acerca__encabezado h1{
  font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:600;margin:.6rem 0 0;letter-spacing:-.015em;
}
.acerca__cuerpo{display:grid;grid-template-columns:300px 1fr;gap:3rem;align-items:start}
.acerca__aside{position:sticky;top:96px}
.medallon{
  border:var(--borde);background:var(--papel-claro);padding:1.4rem;text-align:center;
}
.medallon svg{width:100%;height:auto;display:block;margin-bottom:1rem}
.medallon__nombre{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.2;margin:0}
.medallon__rol{margin:.35rem 0 0}
.datos{list-style:none;margin:1.6rem 0 0;padding:0;border-top:var(--borde)}
.datos li{border-bottom:var(--borde);padding:.7rem 0;font-size:.88rem}
.datos li span{display:block}
.acerca__texto > p:first-of-type{font-size:1.15rem;line-height:1.55;color:var(--tinta)}
.acerca__texto h2{
  font-family:var(--display);font-size:1.55rem;font-weight:600;
  margin:2.4rem 0 .8rem;padding-top:1.2rem;border-top:var(--borde);
}
.acerca__texto p{max-width:var(--medida)}
.tabla-metodo{width:100%;border-collapse:collapse;margin:1.2rem 0 0;font-size:.92rem}
.tabla-metodo th,.tabla-metodo td{text-align:left;padding:.85rem .9rem;border-bottom:var(--borde);vertical-align:top}
.tabla-metodo th{
  font-family:var(--dato);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);border-bottom:2px solid var(--tinta);white-space:nowrap;
}
.tabla-metodo td:first-child{font-family:var(--dato);font-size:.8rem;color:var(--violeta);white-space:nowrap}

/* =========================================================
   POLÍTICA EDITORIAL — lista numerada con iconografía propia
   ========================================================= */
.editorial{padding:2.8rem 0 1rem}
.editorial__intro{
  display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:end;
  border-bottom:2px solid var(--tinta);padding-bottom:1.8rem;margin-bottom:.5rem;
}
.editorial__intro h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;margin:.6rem 0 0}
.editorial__intro p{margin:0;color:var(--gris)}
.clausulas{list-style:none;margin:0;padding:0;counter-reset:clausula}
.clausula{
  counter-increment:clausula;
  display:grid;grid-template-columns:96px 56px 1fr;gap:1.6rem;
  align-items:start;padding:2rem 0;border-bottom:var(--borde);
}
.clausula__num{
  font-family:var(--display);font-size:3.2rem;font-weight:600;line-height:.85;
  color:var(--papel);
  -webkit-text-stroke:1px var(--violeta);
  text-align:right;
}
.clausula__num::before{content:counter(clausula,decimal-leading-zero)}
.clausula__icono{border:var(--borde);background:var(--papel-claro);padding:.55rem}
.clausula__icono svg{display:block;width:100%;height:auto}
.clausula h2{font-family:var(--display);font-size:1.4rem;font-weight:600;margin:0 0 .5rem}
.clausula p{margin:0;max-width:60ch;font-size:.98rem}
.clausula p + p{margin-top:.6rem}

/* =========================================================
   DOCUMENTOS LEGALES — documento tipográfico limpio
   ========================================================= */
.doc{padding:2.6rem 0 1rem}
.doc__cabecera{
  border-top:3px double var(--tinta);border-bottom:var(--borde);
  padding:1.2rem 0;margin-bottom:2.4rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;
}
.doc__cabecera h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;margin:0}
.doc__cuerpo{display:grid;grid-template-columns:210px 1fr;gap:3rem;align-items:start}
.doc__indice{position:sticky;top:96px;border-left:2px solid var(--linea);padding-left:1rem}
.doc__indice p{margin:0 0 .7rem}
.doc__indice ol{margin:0;padding-left:1.2rem;font-size:.86rem}
.doc__indice li{margin-bottom:.45rem}
.doc__indice a{color:var(--tinta);border:0}
.doc__indice a:hover{color:var(--violeta)}
.doc__texto{max-width:72ch;counter-reset:seccion}
.doc__texto h2{
  counter-increment:seccion;
  font-family:var(--display);font-size:1.35rem;font-weight:600;
  margin:2.4rem 0 .7rem;
}
.doc__texto h2::before{
  content:counter(seccion) ". ";
  font-family:var(--dato);font-size:.85rem;color:var(--ocre);
}
.doc__texto h3{font-size:1rem;margin:1.5rem 0 .4rem;font-weight:600}
.doc__texto p,.doc__texto li{font-size:.97rem}
.doc__texto ul{padding-left:1.2rem}
.doc__nota{
  border:var(--borde);background:var(--papel-claro);
  padding:1rem 1.2rem;font-size:.9rem;color:var(--gris);margin-top:2.5rem;
}
.tabla-cookies{width:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0}
.tabla-cookies th,.tabla-cookies td{border:var(--borde);padding:.7rem .8rem;text-align:left;vertical-align:top}
.tabla-cookies th{
  font-family:var(--dato);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--papel-claro);color:var(--gris);
}

/* =========================================================
   ARTÍCULO
   ========================================================= */
.articulo{padding:2.6rem 0 1rem}
.articulo__cabecera{border-bottom:2px solid var(--tinta);padding-bottom:1.6rem;margin-bottom:2rem}
.articulo__cabecera h1{
  font-family:var(--display);font-size:clamp(2rem,4.8vw,3.2rem);
  font-weight:600;line-height:1.02;letter-spacing:-.015em;margin:1rem 0 .9rem;max-width:30ch;
}
.articulo__bajada{font-size:1.12rem;color:var(--gris);margin:0;max-width:58ch}
.articulo__cuerpo{display:grid;grid-template-columns:1fr 240px;gap:3rem;align-items:start}
.articulo__texto{max-width:var(--medida)}
.articulo__texto h2{
  font-family:var(--display);font-size:1.5rem;font-weight:600;margin:2.2rem 0 .6rem;
}
.articulo__texto p{margin:0 0 1.05rem}
.articulo__texto blockquote{
  margin:1.8rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--ocre);
  font-family:var(--display);font-size:1.25rem;font-style:italic;line-height:1.35;
}
.articulo__texto figure{margin:2rem 0;border:var(--borde);background:var(--papel-claro);padding:1.2rem}
.articulo__texto figcaption{font-family:var(--dato);font-size:.7rem;letter-spacing:.08em;color:var(--gris);margin-top:.7rem;text-transform:uppercase}
.dato-clave{
  border-top:2px solid var(--tinta);border-bottom:var(--borde);
  padding:1.2rem 0;margin:2rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
.dato-clave strong{display:block;font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1.05}
.articulo__aside{position:sticky;top:96px;font-size:.88rem}
.articulo__aside h2{font-family:var(--dato);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 .8rem;border-bottom:var(--borde);padding-bottom:.5rem}
.articulo__aside ul{list-style:none;margin:0 0 2rem;padding:0}
.articulo__aside li{padding:.55rem 0;border-bottom:var(--borde);color:var(--gris)}
.fuentes{margin-top:3rem;border-top:2px solid var(--tinta);padding-top:1.3rem}
.fuentes h2{font-family:var(--dato);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 .9rem}
.fuentes ol{margin:0;padding-left:1.3rem;font-size:.88rem;color:var(--gris)}
.fuentes li{margin-bottom:.5rem}

/* =========================================================
   Pie de página (idéntico en todas las páginas)
   ========================================================= */
.pie{border-top:2px solid var(--tinta);margin-top:4rem;padding:2.4rem 0 3rem;background:var(--papel-claro)}
.pie__aviso{margin-bottom:2.2rem}
.pie__cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.2rem}
.pie h2{font-family:var(--dato);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 .9rem}
.pie p{margin:0 0 .45rem;font-size:.9rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.5rem;font-size:.9rem}
.pie__firma{
  margin-top:2.2rem;border-top:var(--borde);padding-top:1.1rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
}

/* =========================================================
   Adaptación a pantallas chicas
   ========================================================= */
@media (max-width:960px){
  .hero,.definicion,.acerca__cuerpo,.editorial__intro,.doc__cuerpo,.articulo__cuerpo,.pie__cols{
    grid-template-columns:1fr;
  }
  .hero{gap:1.8rem;padding-top:2.2rem}
  .roseta{order:-1}
  .roseta img{width:min(70%,260px)}
  .definicion__col + .definicion__col{border-left:0;border-top:var(--borde)}
  .grilla{grid-template-columns:1fr}
  .pieza--destacada{grid-column:auto;grid-row:auto}
  .pieza--destacada h3{font-size:1.6rem}
  .franja{grid-template-columns:1fr 1fr}
  .acerca__aside,.doc__indice,.articulo__aside{position:static}
  .doc__indice{border-left:0;border-top:var(--borde);padding:1rem 0 0}
  .clausula{grid-template-columns:64px 1fr;gap:1rem}
  .clausula__icono{grid-row:1;width:56px}
  .clausula__num{font-size:2.4rem;text-align:left}
  .clausula > div:last-child{grid-column:1/-1}
  .dato-clave{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .franja{grid-template-columns:1fr}
  .cabecera{position:static}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .roseta img{animation:none}
  *{transition:none!important}
}

@media print{
  .cabecera,.roseta,.nav{display:none}
  body{background:#fff}
}