/* Tokens del design system Renova (Claude Design) — no editar a mano: copiar de tokens/*.css */
:root{
/* ── Base palette — Renova: azul, gris claro, blanco ── */
--white:#FFFFFF;          /* Blanco */
--blue-950:#0A1A33;
--blue-900:#0F2747;       /* Azul noche — superficies oscuras, texto */
--blue-800:#14366A;
--blue-700:#1B4A8C;       /* Azul Renova — titulares y botones */
--blue-500:#3A74C9;       /* Azul cielo — acento, plomada, foco */
--blue-300:#8FB0E0;
--blue-200:#C7D7EE;
--blue-100:#E4ECF7;

/* Gray neutral scale (cool) */
--gray-50:#F7F8FA;--gray-100:#EEF1F4;--gray-200:#E1E5EA;--gray-300:#CBD1D9;--gray-400:#AEB6C1;
--gray-500:#8790A0;--gray-600:#646D7C;--gray-700:#485160;--gray-800:#2F3744;--gray-900:#1D232D;

/* Legacy aliases (kept so existing components re-theme automatically) */
--ivory:var(--white);--graphite:var(--blue-900);--concrete:var(--gray-300);--olive:var(--blue-800);
--oxide:var(--blue-500);--oxide-400:var(--blue-500);--oxide-200:var(--blue-200);--olive-200:var(--blue-100);--lime-plaster:var(--gray-100);
--stone-50:var(--gray-50);--stone-100:var(--gray-100);--stone-200:var(--gray-200);--stone-300:var(--gray-300);--stone-400:var(--gray-400);
--stone-500:var(--gray-500);--stone-600:var(--gray-600);--stone-700:var(--gray-700);--stone-800:var(--blue-800);--stone-900:var(--blue-900);--stone-950:var(--blue-950);

/* Functional */
--success:#2F6B4A;--success-bg:#DDEBE2;
--warning:#8F6410;--warning-bg:#F3E8CC;
--error:#A12C2C;--error-bg:#F5DCDC;
--info:var(--blue-700);--info-bg:var(--blue-100);

/* ── Semantic aliases ─────────────────────────── */
--color-brand-primary:var(--blue-700);
--color-brand-secondary:var(--gray-100);
--color-brand-accent:var(--blue-500);
--color-brand-base:var(--white);

--color-surface-default:var(--white);
--color-surface-raised:var(--white);
--color-surface-sunken:var(--gray-100);
--color-surface-muted:var(--gray-100);
--color-surface-inverse:var(--blue-900);
--color-surface-inverse-raised:var(--blue-800);
--color-surface-brand:var(--blue-700);
--color-surface-accent:var(--blue-500);

--color-text-primary:var(--blue-900);
--color-text-heading:var(--blue-700);
--color-text-secondary:var(--gray-700);
--color-text-muted:var(--gray-600);
--color-text-inverse:var(--white);
--color-text-inverse-muted:var(--blue-200);
--color-text-accent:var(--blue-700);
--color-text-on-brand:var(--white);

--color-action-primary:var(--blue-700);
--color-action-primary-hover:var(--blue-800);

--color-border-strong:var(--blue-900);
--color-border-default:var(--gray-300);
--color-border-subtle:var(--gray-200);
--color-border-inverse:var(--blue-800);
--color-focus-ring:var(--blue-500);

--color-overlay-photo:rgba(10,26,51,.46);
--color-overlay-photo-strong:rgba(10,26,51,.68);
}
:root{
--font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
--font-text:"Manrope","Helvetica Neue",Arial,sans-serif;
--font-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

/* Display — fluid between mobile (360) and desktop (1440) */
--type-display-xl:clamp(4.5rem,1.9rem + 11.6vw,11rem);/* @kind other */   /* 72 → 176 */
--type-display-l:clamp(3.5rem,1.7rem + 8vw,8rem);/* @kind other */        /* 56 → 128 */
--type-display-m:clamp(2.75rem,1.6rem + 4.9vw,5.5rem);/* @kind other */   /* 44 → 88 */
--type-h1:clamp(2.5rem,1.9rem + 2.7vw,4rem);/* @kind other */             /* 40 → 64 */
--type-h2:clamp(2rem,1.6rem + 1.8vw,3rem);/* @kind other */               /* 32 → 48 */
--type-h3:clamp(1.625rem,1.4rem + 1vw,2.25rem);/* @kind other */          /* 26 → 36 */
--type-h4:clamp(1.375rem,1.25rem + .55vw,1.75rem);/* @kind other */       /* 22 → 28 */
--type-h5:clamp(1.1875rem,1.13rem + .28vw,1.375rem);/* @kind other */     /* 19 → 22 */
--type-h6:1.125rem;                                       /* 18 */
--type-body-l:1.25rem;    /* 20 */
--type-body:1.0625rem;    /* 17 */
--type-body-s:.9375rem;   /* 15 */
--type-caption:.8125rem;  /* 13 */
--type-label:.75rem;      /* 12 — mono caps */
--type-micro:.6875rem;    /* 11 — annotations on print/image only */

--leading-display:.9;--leading-heading:1.05;--leading-snug:1.25;--leading-body:1.6;--leading-label:1.3;
--tracking-display:-.045em;--tracking-heading:-.025em;--tracking-body:0;--tracking-label:.12em;--tracking-nav:.02em;

--measure-text:64ch;--measure-lead:44ch;--measure-heading:16ch;
}
:root{
/* Spacing scale (px) */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:192px;

--spacing-section-desktop:160px;/* @kind other */--spacing-section-tablet:120px;/* @kind other */--spacing-section-mobile:88px;/* @kind other */
--spacing-section:clamp(88px,5rem + 5.5vw,160px);/* @kind other */

/* Layout */
--layout-content-max:1440px;/* @kind other */--layout-text-max:720px;/* @kind other */--layout-wide-max:1680px;/* @kind other */
--grid-columns-desktop:12;/* @kind other */--grid-columns-tablet:8;/* @kind other */--grid-columns-mobile:4;/* @kind other */
--grid-gutter-desktop:24px;/* @kind other */--grid-gutter-tablet:20px;/* @kind other */--grid-gutter-mobile:16px;/* @kind other */
--grid-margin-desktop:64px;/* @kind other */--grid-margin-tablet:40px;/* @kind other */--grid-margin-mobile:20px;/* @kind other */
--grid-margin:clamp(20px,.6rem + 3.9vw,64px);/* @kind other */
--grid-gutter:clamp(16px,.85rem + .7vw,24px);/* @kind other */

/* Breakpoints (reference — use in media queries as literals) */
--bp-mobile:0px;/* @kind other */--bp-tablet:768px;/* @kind other */--bp-desktop:1200px;/* @kind other */--bp-wide:1600px;/* @kind other */

/* Borders & radii — architecture is square */
--border-hairline:1px;--border-rule:2px;--border-heavy:4px;
--radius-none:0;--radius-xs:2px;--radius-pill:999px;

/* Elevation — used only for floating layers */
--shadow-none:none;
--shadow-float:0 12px 32px -8px rgba(24,25,23,.22);
--shadow-overlay:0 24px 64px -12px rgba(24,25,23,.32);

/* Image ratios */
--ratio-hero:16/9;/* @kind other */--ratio-landscape:3/2;/* @kind other */--ratio-portrait:4/5;/* @kind other */--ratio-tall:2/3;/* @kind other */--ratio-facade:9/16;/* @kind other */--ratio-square:1/1;/* @kind other */--ratio-panorama:21/9;/* @kind other */

/* Touch targets */
--target-min:44px;/* @kind other */--control-height:52px;/* @kind other */--control-height-s:40px;/* @kind other */
}
:root{
--motion-duration-instant:100ms;/* @kind other */
--motion-duration-quick:180ms;/* @kind other */
--motion-duration-standard:320ms;/* @kind other */
--motion-duration-reveal:640ms;/* @kind other */
--motion-duration-cinematic:1100ms;/* @kind other */
--motion-ease-standard:cubic-bezier(.2,0,0,1);/* @kind other */
--motion-ease-reveal:cubic-bezier(.76,0,.24,1);/* @kind other */
--motion-ease-exit:cubic-bezier(.4,0,1,1);/* @kind other */
--motion-ease-linear:linear;/* @kind other */
--motion-stagger:60ms;/* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--motion-duration-quick:0ms;/* @kind other */--motion-duration-standard:0ms;/* @kind other */--motion-duration-reveal:0ms;/* @kind other */--motion-duration-cinematic:0ms;/* @kind other */--motion-stagger:0ms;/* @kind other */}}