@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-700.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/assets/fonts/roboto-latin-700-italic.woff2") format("woff2");font-weight:600 700;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/nunito-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ───────────────────────────────────────────────────────────────
   Civify Design System — Colors & Type tokens
   Source of truth: Figma color styles (Primary / Secondary / Neutral / Feedback).
   500 is always the principal tone of each scale.

   Primary   = amarillo institucional (la abeja)
   Secondary = coral/naranja (el punto de la cabeza)
   Neutral   = escala tinta cálida
   Feedback  = error (rojo vino) + success (verde pino)
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ═════ 1. OFFICIAL SCALES (Figma) ═══════════════════════════════
     500 is the principal tone. 100 → 700 light → dark. */

  /* Primary · Amarillo */
  --primary-100:  #FCFBF7;
  --primary-200:  #F9F6EE;
  --primary-300:  #FBF2D6;
  --primary-400:  #F7D970;
  --primary-500:  #F9C409;   /* ★ principal */
  --primary-600:  #D3A313;
  --primary-700:  #735A07;

  /* Secondary · Coral / Naranja */
  --secondary-100: #FFF4F0;
  --secondary-200: #FFEBE5;
  --secondary-300: #FFDBCE;
  --secondary-400: #FFC5B2;
  --secondary-500: #F08D6F;  /* ★ principal */
  --secondary-600: #EA4904;
  --secondary-700: #912D02;

  /* Neutral · Tinta cálida */
  --neutral-100: #FBFBFB;
  --neutral-200: #F6F6F4;
  --neutral-300: #EAEAE6;
  --neutral-400: #B2AE9F;
  --neutral-500: #8D8972;    /* ★ principal */
  --neutral-600: #4C4A3E;
  --neutral-700: #191915;

  /* Feedback */
  --feedback-error:   #C90202;
  --feedback-success: #066F5C;

  /* ═════ 2. BRAND ALIASES ═════════════════════════════════════════
     Stable names for use in components. Point into the scales above
     so nothing else needs to change when the scales are retuned. */

  --civify-yellow:       var(--primary-500);   /* principal action */
  --civify-yellow-dark:  var(--primary-600);   /* hover / pressed */
  --civify-yellow-deep:  var(--primary-700);   /* ink on yellow, outline btns */
  --civify-yellow-soft:  var(--primary-300);   /* chips, highlights */
  --civify-yellow-wash:  var(--primary-200);   /* section wash */
  --civify-yellow-paper: var(--primary-100);   /* card wash */
  --civify-yellow-ink:   var(--primary-700);   /* legacy alias — text-on-yellow */

  /* Secondary is the warm coral used for alerts & the bee's head dot */
  --civify-coral:        var(--secondary-500);
  --civify-coral-deep:   var(--secondary-600);
  --civify-coral-ink:    var(--secondary-700);
  --civify-coral-soft:   var(--secondary-300);
  --civify-coral-wash:   var(--secondary-100);

  /* The logo is painted with three steps of the official scales — there is no
     separate "amber" or "orange" family:
       back stroke of the ✕ = --primary-600   #D3A313
       front stroke of the ✕ = --primary-500  #F9C409
       bee's head dot        = --secondary-600 #EA4904 */

  /* Neutral aliases */
  --civify-ink:      var(--neutral-700);   /* primary ink */
  --civify-ink-700:  var(--neutral-600);   /* secondary ink */
  --civify-ink-500:  var(--neutral-500);   /* muted ink */
  --civify-ink-400:  var(--neutral-400);   /* disabled, soft stroke */
  --civify-ink-300:  var(--neutral-300);   /* hairlines, dividers */
  --civify-ink-200:  var(--neutral-200);   /* warm surface */
  --civify-ink-100:  var(--neutral-100);   /* paper-off-white */

  /* Paper / surfaces — warm cream ladder */
  --civify-paper:        #FFFFFF;
  --civify-paper-50:     var(--neutral-100);
  --civify-paper-100:    var(--neutral-200);
  --civify-paper-cream:  var(--primary-200);   /* warm highlight */
  --civify-paper-stone:  var(--primary-100);   /* cream card */

  /* Semantic — Figma define exactamente dos colores de feedback.
     No existen warning ni info: un aviso neutro usa --neutral-200. */
  --civify-error:   var(--feedback-error);
  --civify-success: var(--feedback-success);

  /* ═════ 3. UI SEMANTIC TOKENS ════════════════════════════════════ */
  --fg-1:      var(--civify-ink);
  --fg-2:      var(--civify-ink-700);
  --fg-3:      var(--civify-ink-500);
  --fg-mute:   var(--civify-ink-400);
  --fg-invert: var(--civify-paper);

  --bg-page:        var(--civify-paper);
  --bg-surface:     var(--civify-paper-50);
  --bg-sunken:      var(--civify-paper-100);
  --bg-warm:        var(--civify-paper-cream);
  --bg-ink:         var(--civify-ink);
  --bg-accent:      var(--civify-yellow);
  --bg-accent-soft: var(--primary-300);
  --bg-accent-deep: var(--primary-600);
  --bg-accent-alt:  var(--secondary-600);

  --stroke-1:      var(--civify-ink-300);
  --stroke-2:      var(--civify-ink-200);
  --stroke-strong: var(--civify-ink);

  /* ═════ 4. TYPOGRAPHY ════════════════════════════════════════════ */
  --font-sans:  "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Nunito", "Roboto", ui-sans-serif, system-ui, sans-serif; /* labels, chips, tags — Bold 700 */
  /* iOS chrome (status bar, keyboard) uses the OS-resolved native stack inline:
     -apple-system, "SF Pro", system-ui — no webfont token needed. */

  /* ── Title scale (Figma) ─────────────────────────────
     All titles default to 700 (Bold). Naming matches Figma. */
  --title-xxl-size: 40px; --title-xxl-line: 34px; --title-xxl-weight: 700; --title-xxl-track: -0.02em;
  --title-xl-size:  32px; --title-xl-line:  36px; --title-xl-weight:  700; --title-xl-track: -0.015em;
  --title-lg-size:  24px; --title-lg-line:  32px; --title-lg-weight:  700; --title-lg-track: -0.01em;
  --title-md-size:  20px; --title-md-line:  28px; --title-md-weight:  700;
  --title-sm-size:  18px; --title-sm-line:  26px; --title-sm-weight:  700;

  /* ── Body scale (Figma) ──────────────────────────────
     Every size has Regular (400) and Bold (700) variants. */
  --body-xl-size: 18px; --body-xl-line: 26px;   /* Extra-Large */
  --body-lg-size: 16px; --body-lg-line: 24px;   /* Large */
  --body-md-size: 14px; --body-md-line: 20px;   /* Medium */
  --body-sm-size: 12px; --body-sm-line: 20px;   /* Small · Bold 12 */
  --body-xs-size: 11px; --body-xs-line: 16px;   /* Small · 11 */
  --body-micro-size: 9px; --body-micro-line: 20px; /* Small · Bold 9 */

  /* ── Legacy aliases (compat — do not remove) ───────── */
  --h1-size: var(--title-xxl-size); --h1-line: 48px; --h1-weight: 700; --h1-track: -0.02em;
  --h2-size: var(--title-xl-size);  --h2-line: var(--title-xl-line);  --h2-weight: 700; --h2-track: -0.015em;
  --h3-size: var(--title-lg-size);  --h3-line: var(--title-lg-line);  --h3-weight: 700; --h3-track: -0.01em;
  --h4-size: var(--title-md-size);  --h4-line: var(--title-md-line);  --h4-weight: 700; --h4-track: 0; /* @kind font */
  --h5-size: var(--title-sm-size);  --h5-line: var(--title-sm-line);  --h5-weight: 700;
  --body-size:    var(--body-lg-size); --body-line:    var(--body-lg-line);
  --caption-size: var(--body-sm-size); --caption-line: var(--body-sm-line);

  --label-track: 0.1em;

  /* ═════ 5. RADII, SHADOW, SPACING ════════════════════════════════ */
  /* Radios semánticos — usa estos en componentes, no los primitivos */
  --r-card:    12px;   /* card estándar */
  --r-card-lg: 16px;   /* card destacada, modal */
  --r-chip:    32px;   /* chip, tag, badge */
  --r-button:  56px;   /* botón píldora */

  /* Primitivos */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(49,61,79,0.04);
  --shadow-sm:   0 1px 3px rgba(49,61,79,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 10px rgba(49,61,79,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 24px rgba(49,61,79,0.12), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-modal:0 24px 48px rgba(0,0,0,0.15);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 56px; --s-11: 64px; --s-12: 80px;

  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */
  --ease-in:  cubic-bezier(0.55, 0, 0.45, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med:  200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ═════ 6. BASE ELEMENT STYLES ═══════════════════════════════════ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); color: var(--fg-1); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); color: var(--fg-1); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); color: var(--fg-1); }
h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); color: var(--fg-1); }
h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--h5-weight); color: var(--fg-1); }
p  { font-size: var(--body-size); line-height: var(--body-line); color: var(--fg-2); }
small { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-700);
}

.btn-label {
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Chips, tags y labels — Nunito Bold 700 */
.chip-label {
  font-family: var(--font-label);
  font-weight: 700;
}


/* ── Layout responsive (antes lo calculaba JS) ── */
:root{--cardCols: minmax(0, 0.92fr) minmax(0, 1.08fr);--stepMinH: clamp(380px, 32vw, 440px);--hfCols: minmax(0, 1.1fr) minmax(0, 0.9fr);--asocCols: minmax(0, 1.25fr) minmax(0, 0.75fr);--faqCols: minmax(0, 0.7fr) minmax(0, 1.3fr);--ctaCols: minmax(0, 1.4fr) minmax(0, 0.6fr);--stepCols: repeat(3, minmax(0, 1fr));--threeCols: repeat(3, minmax(0, 1fr));--dlCols: max-content 1fr;--footCols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)}
@media (max-width: 900px){:root{--cardCols: 1fr;--stepMinH: auto;--hfCols: 1fr;--asocCols: 1fr;--faqCols: 1fr;--ctaCols: 1fr;--stepCols: 1fr;--threeCols: 1fr;--dlCols: 1fr;--footCols: repeat(auto-fit, minmax(160px, 1fr))}}
[hidden]{display:none !important}
.only-wide{display:contents}
.only-narrow{display:none}
@media (max-width: 900px){.only-wide{display:none}.only-narrow{display:contents}}
@media (min-width: 901px){.mobile-menu{display:none !important}}
.step-tab{color:var(--neutral-500)}
.step-tab .step-num{color:var(--neutral-400, var(--neutral-500))}
.step-tab[aria-selected="true"]{color:var(--neutral-700)}
.step-tab[aria-selected="true"] .step-num{color:var(--primary-500)}
@media (prefers-reduced-motion: no-preference){
  @keyframes civFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .only-wide > [style*="bottom: clamp(-44px"]{animation:civFadeUp 700ms var(--ease-out) 260ms both}
}
.hv1:hover{background: var(--primary-600) !important}
.hv2:hover{background: var(--neutral-600) !important;color: #FFFFFF !important}
.hv3:hover{background: var(--primary-600) !important;color: var(--neutral-700) !important}
.hv4:hover{color: var(--primary-700) !important}

/* ── Aviso de cookies ── */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:560px;margin:0 auto;background:#FFFFFF;color:var(--neutral-700);border:1px solid var(--neutral-300);border-radius:18px;box-shadow:0 20px 44px rgba(25,25,21,0.16);padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;font-family:var(--font-sans)}
.cookie-text{margin:0;flex:1 1 260px;font-size:15px;line-height:22px;color:var(--neutral-600)}
.cookie-text a{color:var(--neutral-700);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:10px;flex:none}
.cookie-btn{appearance:none;cursor:pointer;font-family:var(--font-label);font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--r-button);border:1px solid var(--neutral-700)}
.cookie-reject{background:#FFFFFF;color:var(--neutral-700)}
.cookie-accept{background:var(--neutral-700);color:#FFFFFF}
.cookie-btn:hover{opacity:.85}
.cookie-btn:focus-visible{outline:2px solid var(--neutral-700);outline-offset:3px}

/* ── Efectos (solo si el usuario no pide reducir movimiento; la clase .fx la pone un script en <head>) ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fxUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes fxZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

  /* Entrada del hero */
  .fx main > :first-child .eyebrow { animation: fxUp .7s var(--ease-out) .05s both; }
  .fx main > :first-child h1 { animation: fxUp .8s var(--ease-out) .12s both; }
  .fx main > :first-child h1 > span:not(.eyebrow) { display: inline-block; animation: fxUp .8s var(--ease-out) .38s both; }
  .fx main > :first-child p:not(.eyebrow):not(.only-wide *) { animation: fxUp .8s var(--ease-out) .5s both; }
  .fx main > :first-child a[class^="hv"], .fx main > :first-child nav { animation: fxUp .8s var(--ease-out) .62s both; }
  .fx img[fetchpriority="high"] { animation: fxZoom 9s cubic-bezier(.2,.6,.2,1) both; }

  /* Aparición al hacer scroll */
  .fx .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .fx .reveal.in { opacity: 1; transform: none; }

  /* Hover (solo con ratón) */
  @media (hover: hover) {
    main a[class^="hv"], .cookie-btn { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out); }
    main a[class^="hv"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(25,25,21,.16); }
    [data-swipe] > div > div, .only-wide > [style*="bottom: clamp(-44px"] { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
    [data-swipe] > div > div:hover, .only-wide > [style*="bottom: clamp(-44px"]:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(25,25,21,.14); }
    main [style*="border-radius"][style*="overflow: hidden"] img { transition: transform .8s var(--ease-out); }
    main [style*="border-radius"][style*="overflow: hidden"]:hover img { transform: scale(1.04); }
  }
}