@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Naranja — acento principal */
  --nr:#E8571A; --nrl:#F28950; --nrp:#FEF0E8; --nrd:#C04410;

  /* Textos */
  --ng:#1C1C1C; --go:#3D3D3D; --gm:#6B7280; --gc:#9CA3AF;

  /* Superficies */
  --bg:#FAFAF9; --bgc:#FFFFFF; --bga:#F5F3EF;

  /* Bordes */
  --bd:#E5E7EB; --bds:#F3F4F6;

  /* Semánticos */
  --rd:#C0392B; --rdb:#FEECEB;
  --gr:#39B54A; --grb:#E8F7EA;
  --am:#F5A623; --amb:#FFF8EC;
  --az:#29ABE2; --azb:#E8F6FD;

  /* Azul marino — acentos secundarios y títulos */
  --navy:#1A2E4A; --navy-l:#2C4A6E; --navy-p:#EAF0F8;

  /* Glassmorphism */
  --glass:rgba(255,255,255,0.75);
  --glass-border:rgba(255,255,255,0.6);
  --glass-blur:blur(18px);

  /* Sombras */
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 14px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 10px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);
  --shadow-nr:0 4px 16px rgba(232,87,26,.25);

  /* Radios */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:9999px;

  /* Tipografía */
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-serif:'DM Serif Display',Georgia,serif;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ng);line-height:1.6;font-size:14px}

/* ——— ANIMACIONES ——— */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 8px rgba(192,57,43,0)}}
@keyframes slideIn{from{transform:translateX(-8px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes scaleIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

.anim-fadeup{animation:fadeUp .35s ease both}
.anim-fadein{animation:fadeIn .3s ease both}

/* ——— UTILITIES ——— */
.serif{font-family:var(--font-serif)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}