/* =========================================================
   IDENTIDAD · ARIEL DELGADO
   ---------------------------------------------------------
   Sistema de marca: color, tipografía y primitivas.
   Todo lo demás (secciones, layout) vive en sitio.css y
   consume únicamente los tokens definidos aquí.

   La marca es oscura por naturaleza: negro carbón como
   terreno, dorado champán como único acento. El dorado se
   usa poco y siempre con intención — si está en todas
   partes deja de significar algo.
   ========================================================= */

:root{
  /* --- Terrenos oscuros --- */
  --noir:        #0b0b0c;   /* el más profundo: pie de página, velos */
  --carbon:      #1d1e20;   /* carbón de marca: superficie principal */
  --carbon-2:    #26272b;   /* superficie elevada: tarjetas sobre oscuro */
  --carbon-3:    #313338;   /* bordes y separadores sobre oscuro */

  /* --- Terrenos claros --- */
  --bone:        #f7f4ee;   /* hueso cálido: secciones claras */
  --bone-2:      #efeae0;   /* hueso hundido: tarjetas sobre claro */
  --white:       #ffffff;

  /* --- Dorado --- */
  --gold:        #f8e67f;   /* champán de marca: acento sobre oscuro */
  --gold-2:      #e2c65c;   /* dorado medio: degradados y bordes */
  --gold-3:      #c9a227;   /* dorado profundo: degradados */
  --gold-ink:    #8a6b12;   /* dorado legible como texto sobre claro */
  --gold-veil:   rgba(248,230,127,.12);
  --gold-line:   rgba(248,230,127,.24);
  --degradado-oro: linear-gradient(135deg,#f8e67f 0%,#e2c65c 45%,#c9a227 100%);

  /* --- Texto --- */
  --tinta:       #14151a;   /* texto sobre claro */
  --tinta-2:     #4c4a45;
  --tinta-3:     #6f6a60;
  --claro:       #f4f1ea;   /* texto sobre oscuro */
  --claro-2:     #b6b1a7;
  --claro-3:     #8a857c;

  /* --- Formas --- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 18px;
  --r-full: 999px;

  /* --- Sombras --- */
  --sombra:     0 18px 44px -22px rgba(0,0,0,.75);
  --sombra-oro: 0 14px 40px -14px rgba(200,162,39,.5);

  /* --- Ritmo --- */
  --nav-h: 78px;
  --curva: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--carbon);
  color:var(--claro);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

::selection{background:var(--gold);color:var(--carbon)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-xs)}

/* =========================================================
   TIPOGRAFÍA
   Display en serif (DM Serif Display) para las afirmaciones;
   sans (DM Sans) para todo lo que se lee de corrido.
   ========================================================= */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.12;text-wrap:balance}

h1,h2{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;letter-spacing:-.015em}
/* Escala medida contra los dos idiomas. El español es un 25% más
   largo: a 4rem/5vw el titular caía en cuatro líneas y dejaba una
   palabra huérfana. Con 4.4vw y tope de 3.6rem el español entra
   siempre en tres líneas y el inglés en dos, de 1024 a 1440. */
h1{font-size:clamp(2.3rem,4.4vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-family:"DM Sans",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.012em}
h4{font-family:"DM Sans",sans-serif;font-weight:700;font-size:.98rem}

em{font-style:italic}
.oro{color:var(--gold)}
.serif{font-family:"DM Serif Display",serif;font-weight:400}

/* Etiqueta superior de sección */
.etiqueta{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
.claro .etiqueta{color:var(--gold-ink)}

.entrada{font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--claro-2);max-width:58ch}
.claro .entrada{color:var(--tinta-2)}

/* Cifras y datos: siempre alineados */
.cifra{font-variant-numeric:tabular-nums}

/* =========================================================
   LOGO
   El arte tiene degradado dorado propio: nunca se recolorea,
   se usa tal cual sobre fondos oscuros o claros.
   ========================================================= */
.logo{display:inline-flex;align-items:center;gap:.7rem}
.logo img{height:46px;width:auto}
.logo--sm img{height:36px}
.logo--lg img{height:66px}

/* Solo el monograma con el león, para usos compactos */
.isotipo{height:40px;width:auto}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.85rem;border:1px solid transparent;border-radius:var(--r-full);
  font-weight:700;font-size:.97rem;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:transform .2s var(--curva),box-shadow .2s var(--curva),
             background .2s var(--curva),color .2s var(--curva),border-color .2s var(--curva);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

/* Principal: el degradado dorado sobre carbón */
.btn--oro{background:var(--degradado-oro);color:var(--carbon);box-shadow:var(--sombra-oro)}
.btn--oro:hover{filter:brightness(1.06)}

/* Secundario sobre oscuro */
.btn--linea{background:transparent;color:var(--claro);border-color:rgba(248,230,127,.4)}
.btn--linea:hover{border-color:var(--gold);background:var(--gold-veil)}

/* Sobre fondos claros */
.btn--carbon{background:var(--carbon);color:var(--claro)}
.btn--carbon:hover{background:var(--noir)}
.btn--linea-oscura{background:transparent;color:var(--tinta);border-color:rgba(20,21,26,.22)}
.btn--linea-oscura:hover{border-color:var(--tinta);background:rgba(20,21,26,.04)}

.btn--sm{padding:.6rem 1.15rem;font-size:.87rem}
.btn--lg{padding:1.15rem 2.2rem;font-size:1.03rem}
.btn--bloque{width:100%}

/* =========================================================
   PRIMITIVAS
   ========================================================= */

/* Sello: pequeña etiqueta con punto */
.sello{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .9rem;border-radius:var(--r-full);
  background:var(--gold-veil);border:1px solid var(--gold-line);
  font-size:.78rem;font-weight:600;color:var(--gold);
}
.sello i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.claro .sello{background:rgba(200,162,39,.1);border-color:rgba(200,162,39,.3);color:var(--gold-ink)}

/* Filete: regla dorada corta que abre secciones */
.filete{width:52px;height:2px;background:var(--degradado-oro);border-radius:2px}

/* Tarjeta sobre oscuro */
.tarjeta{
  background:var(--carbon-2);
  border:1px solid var(--carbon-3);
  border-radius:var(--r);
  padding:1.9rem 1.7rem;
  transition:transform .28s var(--curva),border-color .28s var(--curva),box-shadow .28s var(--curva);
}
.tarjeta:hover{transform:translateY(-4px);border-color:var(--gold-line);box-shadow:var(--sombra)}

/* Tarjeta sobre claro */
.tarjeta--clara{background:var(--white);border-color:#e4ded1}
.tarjeta--clara:hover{border-color:rgba(200,162,39,.45)}

/* Marca de agua con el isotipo */
.marca-agua{
  position:absolute;pointer-events:none;z-index:0;opacity:.05;
  width:340px;height:auto;
}

/* Accesibilidad */
.salto{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--carbon);padding:.85rem 1.3rem;
  border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.salto:focus{left:0}

.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Animación de entrada */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .75s var(--curva),transform .75s var(--curva)}
.aparece.visible{opacity:1;transform:none}

/* En pantallas angostas el botón deja de ser intocable:
   con nowrap, una etiqueta larga fija un ancho mínimo que
   desborda su contenedor. */
@media (max-width:640px){
  .btn{white-space:normal;padding-inline:1.35rem;line-height:1.3}
  .btn--lg{padding:.95rem 1.35rem;font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece{opacity:1;transform:none;transition:none}
  .btn:hover,.tarjeta:hover{transform:none}
}