/* ============================================================
   BBC CORPORATIVO LEGAL — Sistema de diseño 2026
   Paleta derivada del logotipo: carmín #CC365A + tinta + hueso
   ============================================================ */
:root{
  /* --- Marca --- */
  --carmin:#CC365A;
  --carmin-luz:#E85D7C;      /* AA sobre tinta */
  --carmin-hondo:#9E1F3D;
  --vino:#6E1329;
  --carmin-velo:rgba(204,54,90,.14);
  /* --carmin es para RELLENOS (el blanco encima da 4.95:1).
     --acento es para TEXTO: sobre tinta hay que aclararlo o se queda en 3.83:1. */
  --acento:var(--carmin);

  /* --- Neutros --- */
  --tinta:#12100F;           /* negro del logotipo */
  --grafito:#1C1A1B;
  --carbon:#262223;
  --piedra:#4A4448;
  --humo:#6B6469;
  --niebla:#A8A1A5;
  --lino:#E4DFDC;
  --hueso:#F7F4F2;
  --blanco:#FFFFFF;

  /* --- Semánticos (claro) --- */
  --fondo:var(--hueso);
  --fondo-alt:var(--blanco);
  --texto:var(--tinta);
  --texto-suave:var(--piedra);
  --borde:rgba(18,16,15,.12);
  --borde-sutil:rgba(18,16,15,.07);

  /* --- Tipografía --- */
  --display:"Cormorant Garamond",'Times New Roman',Georgia,serif;
  --texto-fuente:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala fluida */
  --t-xs:clamp(.72rem,.70rem + .1vw,.78rem);
  --t-sm:clamp(.82rem,.79rem + .15vw,.90rem);
  --t-base:clamp(.98rem,.94rem + .2vw,1.06rem);
  --t-md:clamp(1.08rem,1.02rem + .3vw,1.22rem);
  --t-lg:clamp(1.3rem,1.15rem + .7vw,1.7rem);
  --t-xl:clamp(1.7rem,1.35rem + 1.6vw,2.6rem);
  --t-2xl:clamp(2.2rem,1.6rem + 2.8vw,4rem);
  --t-3xl:clamp(2.8rem,1.7rem + 4.6vw,6rem);
  --t-4xl:clamp(3.2rem,1.6rem + 6.6vw,8rem);

  /* Ritmo */
  --anchura:1280px;
  --anchura-lectura:68ch;
  --marco:clamp(1.15rem,4vw,3.5rem);
  --hueco:clamp(1.5rem,3vw,2.5rem);
  --seccion:clamp(4.5rem,9vw,9rem);

  /* Radios y sombras */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:30px; --r-full:999px;
  --s-1:0 1px 2px rgba(18,16,15,.05), 0 2px 6px rgba(18,16,15,.04);
  --s-2:0 4px 12px rgba(18,16,15,.07), 0 12px 28px rgba(18,16,15,.06);
  --s-3:0 10px 24px rgba(18,16,15,.09), 0 30px 70px rgba(18,16,15,.10);
  --s-carmin:0 14px 34px rgba(158,31,61,.28);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-suave:cubic-bezier(.4,0,.2,1);
  --ease-resorte:cubic-bezier(.34,1.56,.64,1);
  --v-rapido:.22s; --v-medio:.45s; --v-lento:.8s;
}

/* ---- Superficie oscura reutilizable ---- */
.tono-tinta{
  --fondo:var(--tinta);
  --fondo-alt:var(--grafito);
  --texto:var(--hueso);
  --texto-suave:var(--niebla);
  --borde:rgba(247,244,242,.14);
  --borde-sutil:rgba(247,244,242,.08);
  --acento:var(--carmin-luz);
  background:var(--fondo);
  color:var(--texto);
}