/* =====================================================================
   Centro Educativo Marie Curie — Tokens, reset, fondo y utilidades base
   Diseño original. NO editar colores aquí: usa las variables en 01-tokens.css
   ===================================================================== */

:root{
    --navy: #0F2A4D;
    --navy-2: #1A3A66;
    --navy-deep: #081A33;
    --lime: #A8D139;
    --lime-2: #BFE158;
    --cream: #EFEAE0;
    --cream-2: #E6EEF0;
    --bg-pattern-color: rgba(15, 42, 77, 0.07);
    --paper: #FFFFFF;
    --ink: #0E1A2C;
    --ink-soft: #3A4A60;
    --muted: #6B7A8F;
    --line: rgba(15, 42, 77, 0.12);
    --line-strong: rgba(15, 42, 77, 0.22);

    --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --f-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, monospace;

    --pad-x: clamp(20px, 4vw, 64px);
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-pill: 999px;
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html,body{color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  body{
    overflow-x:hidden;
    background-color: var(--cream-2);
    background-image:
      radial-gradient(circle at 12% 8%, rgba(168, 209, 57, 0.10) 0%, transparent 32%),
      radial-gradient(circle at 92% 18%, rgba(15, 42, 77, 0.06) 0%, transparent 35%),
      radial-gradient(circle at 78% 88%, rgba(168, 209, 57, 0.08) 0%, transparent 30%),
      linear-gradient(var(--bg-pattern-color) 1px, transparent 1px),
      linear-gradient(90deg, var(--bg-pattern-color) 1px, transparent 1px);
    background-size: auto, auto, auto, 64px 64px, 64px 64px;
    background-position: 0 0, 0 0, 0 0, -1px -1px, -1px -1px;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
  }
  a{color:inherit; text-decoration:none}
  button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
  img,svg{display:block; max-width:100%}
  ::selection{background:var(--lime); color:var(--navy-deep)}

  .container{max-width:1320px; margin:0 auto; padding:0 var(--pad-x)}