/* Tokens del sistema de diseño UNEDOG: tipografía, color, espaciado y base. */

/* ---- fuentes (alojadas en el tema: subconjunto latino de Google Fonts; Roboto y Roboto Slab son variables) ---- */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/roboto-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-slab.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- typography.css ---- */
:root{
--font-display:'Roboto Slab',Georgia,serif;
--font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
--fs-display:clamp(44px,5.6vw,72px);--fs-h1:clamp(36px,4.2vw,52px);--fs-h2:clamp(28px,3vw,38px);--fs-h3:24px;--fs-h4:19px;
--fs-lead:20px;--fs-body:17px;--fs-small:15px;--fs-caption:13px;--fs-eyebrow:13px;
--lh-tight:1.08;--lh-heading:1.18;--lh-body:1.6;
--fw-regular:400;--fw-medium:500;--fw-bold:700;--fw-black:800;
--tracking-eyebrow:.14em;--tracking-tight:-.015em;
}

/* ---- colors.css ---- */
:root{
/* Granate — color institucional */
--granate-950:#2E0606;--granate-900:#450A0A;--granate-800:#5A0E0E;--granate-700:#6D1111;--granate-600:#7B0A14;--granate-500:#9B1B22;--granate-300:#D69A9A;--granate-100:#F3E4E2;--granate-50:#FAF4F2;
/* Amarillo — campaña 2026-2027 «Señor, nuestra esperanza está en ti» */
--amarillo-700:#B88200;--amarillo-600:#E0A800;--amarillo-500:#F2BE22;--amarillo-400:#FFC800;--amarillo-200:#FBE29A;--amarillo-100:#FDF3D0;
/* Verde — acento del lema (uso puntual) */
--verde-700:#4E7D1E;--verde-500:#7DBE3A;--verde-100:#E8F4D6;
/* Neutros cálidos */
--negro:#131313;--gris-800:#2B2828;--gris-700:#494949;--gris-500:#7A7472;--gris-300:#D9D4D1;--gris-200:#E9E5E2;--gris-100:#F3F0ED;--crema:#FBF8F4;--blanco:#FFFFFF;
/* Semánticos */
--color-primary:var(--granate-700);--color-primary-hover:var(--granate-800);--color-primary-press:var(--granate-900);--color-primary-soft:var(--granate-100);
--color-accent:var(--amarillo-500);--color-accent-hover:var(--amarillo-600);--color-accent-soft:var(--amarillo-100);
--color-hope:var(--verde-500);
--fg-1:var(--negro);--fg-2:var(--gris-700);--fg-3:var(--gris-500);--fg-on-primary:var(--blanco);--fg-on-accent:var(--granate-900);--fg-link:var(--granate-700);
--surface-page:var(--blanco);--surface-alt:var(--crema);--surface-muted:var(--gris-100);--surface-card:var(--blanco);--surface-inverse:var(--granate-900);--surface-dark:var(--negro);
--border-1:var(--gris-200);--border-2:var(--gris-300);--border-strong:var(--negro);
--focus-ring:var(--amarillo-400);
--success:#2F7D3A;--warning:var(--amarillo-700);--danger:#B3261E;
}

/* ---- spacing.css ---- */
:root{
--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;
--container:1200px;--container-wide:1360px;--gutter:clamp(20px,4vw,48px);
--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-xl:36px;--radius-pill:999px;
--shadow-1:0 1px 2px rgba(46,6,6,.06),0 2px 6px rgba(46,6,6,.06);
--shadow-2:0 6px 20px rgba(46,6,6,.10);
--shadow-3:0 18px 48px rgba(46,6,6,.16);
--frame-stroke:3px;--frame-tilt:-3deg;
--ease-out:cubic-bezier(.2,.7,.2,1);--ease-soft:cubic-bezier(.4,0,.2,1);
--dur-fast:140ms;--dur-base:240ms;--dur-slow:480ms;
}

/* ---- base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-2);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--fg-1);line-height:var(--lh-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--fg-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--granate-900)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}