/* Tu Casino — Festivent skin (generated). Self-hosted fonts + original layout + skin overrides. */

/* ===== FONTS ===== */
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oTd4g.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oTd4g.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oTd4g.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/92zatBhPNqw73oTd4g.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.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;
}

/* ===== ORIGINAL LAYOUT (repainted via tokens) ===== */


/* ===================== src/styles/theme.css ===================== */

/* ==========================================================================
   Tu Casino — Design System
   Domain: tu-tienda.com | GEO: Spain (ES)
   Light/Warm Mediterranean editorial theme
   ========================================================================== */

/* --- Fonts --- */
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Lato';
  src: url('/fonts/Lato-Bold-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Design Tokens --- */
:root {
  /* Colors */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-border: #F0F0F0;
  --color-surface-hover: #F8F5F2;

  --color-primary: #C0392B;
  --color-primary-dark: #A93226;
  --color-primary-light: #E74C3C;
  --color-secondary: #2980B9;
  --color-secondary-dark: #21618C;
  --color-gold: #D4A017;
  --color-gold-light: #F0D060;

  --color-text: #2C2C2C;
  --color-text-light: #4A4A4A;
  --color-muted: #7F8C8D;
  --color-border: #E0E0E0;
  --color-border-light: #F0F0F0;

  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-danger: #E74C3C;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'Lato', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --max-width: 1140px;
  --max-width-narrow: 800px;
  --max-width-wide: 1280px;
  --content-padding: var(--space-6);

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows — warm tones */
  --shadow-sm: 0 1px 3px rgba(44, 44, 44, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 44, 44, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 44, 44, 0.1);
  --shadow-card: 0 2px 8px rgba(44, 44, 44, 0.06);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-xl); margin-bottom: var(--space-3); }

p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

strong { font-weight: 700; }

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.container--narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.container--wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.section {
  padding: var(--space-16) 0;
}

.section--sm {
  padding: var(--space-8) 0;
}

.section--lg {
  padding: var(--space-24) 0;
}

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-secondary);
  color: #FFFFFF;
}

.btn--secondary:hover {
  background: var(--color-secondary-dark);
  color: #FFFFFF;
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  text-decoration: none;
}

.btn--lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--speed {
  background: #E8F8F0;
  color: var(--color-success);
}

.badge--crypto {
  background: #FFF8E1;
  color: #B7791F;
}

.badge--gold {
  background: #FFF8E1;
  color: var(--color-gold);
}

.badge--red {
  background: #FDEDEC;
  color: var(--color-primary);
}

.badge--blue {
  background: #EBF5FB;
  color: var(--color-secondary);
}

/* --- Rating Stars --- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-gold);
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* --- Tables --- */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-surface);
}

thead {
  background: var(--color-primary);
  color: #FFFFFF;
}

th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

tbody tr:hover {
  background: var(--color-surface-hover);
}

/* --- Prose (long-form content) --- */
.prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-light);
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose p {
  margin-bottom: var(--space-5);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-light);
}

.prose strong {
  color: var(--color-text);
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.3);
  text-underline-offset: 2px;
}

.prose a:hover {
  text-decoration-color: var(--color-primary);
}

/* --- Info Box --- */
.info-box {
  background: #EBF5FB;
  border: 1px solid #AED6F1;
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}

.info-box--warning {
  background: #FFF8E1;
  border-color: #F9E79F;
  border-left-color: var(--color-warning);
}

.info-box--danger {
  background: #FDEDEC;
  border-color: #F5B7B1;
  border-left-color: var(--color-danger);
}

.info-box p:last-child {
  margin-bottom: 0;
}

/* --- TOC --- */
.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.toc__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.toc ol {
  list-style: decimal;
  padding-left: var(--space-5);
}

.toc li {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.toc a {
  color: var(--color-secondary);
  text-decoration: none;
}

.toc a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- Author Byline --- */
.author-byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  margin: var(--space-6) 0;
}

.author-byline__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.author-byline__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-byline__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.author-byline__name a {
  color: var(--color-text);
}

.author-byline__name a:hover {
  color: var(--color-primary);
}

.author-byline__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* --- Utilities --- */
.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-gold { color: var(--color-gold); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --content-padding: var(--space-4);
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .section { padding: var(--space-10) 0; }
  .section--lg { padding: var(--space-16) 0; }

  .prose { font-size: var(--text-base); }

  .btn--lg {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
  }

  .btn--full-mobile {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }

  .card { padding: var(--space-4); }
}



/* ===================== src/components/CasinoCard.astro (scoped) ===================== */

.casino-card {
    display: flex;
    gap: 0;
    overflow: hidden;
    padding: 0;
    margin-bottom: var(--space-6);
  }

  .casino-card__accent {
    width: 5px;
    background: var(--color-primary);
    flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .casino-card__content {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .casino-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .casino-card__rank-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .casino-card__rank {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
  }

  .casino-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }

  .casino-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .casino-card__stars {
    color: var(--color-gold);
    font-size: var(--text-sm);
    letter-spacing: 1px;
  }

  .casino-card__score {
    font-family: var(--font-data);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-gold);
  }

  .casino-card__speed-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 2px solid;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .casino-card__speed-time {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .casino-card__speed-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .casino-card__bonus {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }

  .casino-card__bonus-title {
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }

  .casino-card__bonus-details {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 0;
  }

  .casino-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .casino-card__pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .casino-card__pro-item,
  .casino-card__con-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }

  .casino-card__pro-item svg,
  .casino-card__con-item svg {
    flex-shrink: 0;
    margin-top: 3px;
  }

  .casino-card__cta {
    align-self: flex-start;
  }

  @media (max-width: 768px) {
    .casino-card__header {
      flex-direction: column;
    }

    .casino-card__pros-cons {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .casino-card__cta {
      width: 100%;
      text-align: center;
      justify-content: center;
    }

    .casino-card__content {
      padding: var(--space-4);
    }
  }


/* ===================== src/components/ComparisonTable.astro (scoped) ===================== */

.comparison-table {
    margin: var(--space-8) 0;
  }

  .comparison-table__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }

  .comparison-table__name {
    font-weight: 700;
    white-space: nowrap;
  }


/* ===================== src/components/DGOJContextBlock.astro (scoped) ===================== */

.dgoj-block {
    display: flex;
    gap: var(--space-4);
    background: linear-gradient(135deg, #EBF5FB 0%, #FAFAFA 100%);
    border: 1px solid #AED6F1;
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-8) 0;
  }

  .dgoj-block__icon {
    flex-shrink: 0;
    color: var(--color-secondary);
    margin-top: 2px;
  }

  .dgoj-block__content {
    flex: 1;
  }

  .dgoj-block__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-3);
  }

  .dgoj-block__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-light);
    margin-bottom: 0;
  }

  @media (max-width: 480px) {
    .dgoj-block {
      flex-direction: column;
      gap: var(--space-2);
    }
  }


/* ===================== src/components/FAQItem.astro (scoped) ===================== */

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
  }

  .faq-item[open] {
    border-color: var(--color-border);
  }

  .faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-text);
    list-style: none;
    user-select: none;
  }

  .faq-item__question::-webkit-details-marker {
    display: none;
  }

  .faq-item__question:hover {
    background: var(--color-surface-hover);
  }

  .faq-item__chevron {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
    color: var(--color-muted);
  }

  .faq-item[open] .faq-item__chevron {
    transform: rotate(180deg);
  }

  .faq-item__answer {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-light);
  }

  .faq-item__answer :global(p) {
    margin-bottom: var(--space-3);
  }

  .faq-item__answer :global(p:last-child) {
    margin-bottom: 0;
  }


/* ===================== src/components/Footer.astro (scoped) ===================== */

.footer {
    background: var(--color-text);
    color: #D0D0D0;
    padding: var(--space-16) 0 var(--space-8);
    margin-top: var(--space-16);
  }

  .footer a {
    color: #D0D0D0;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-10);
  }

  .footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .footer__logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
  }

  .footer__logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    color: #FFFFFF;
  }

  .footer__tagline {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #A0A0A0;
    max-width: 300px;
  }

  .footer__col-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: var(--space-4);
  }

  .footer__col-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer__col-links li {
    margin-bottom: var(--space-2);
  }

  .footer__col-links a {
    font-size: var(--text-sm);
  }

  .footer__responsible,
  .footer__disclosure {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .footer__responsible-title,
  .footer__disclosure-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: var(--space-3);
  }

  .footer__responsible p,
  .footer__disclosure p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #A0A0A0;
    margin-bottom: 0;
  }

  .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: #808080;
  }

  .footer__bottom p {
    margin-bottom: 0;
  }

  .footer__18 {
    font-weight: 700;
    color: var(--color-warning);
  }

  @media (max-width: 768px) {
    .footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }

    .footer__brand {
      grid-column: 1 / -1;
    }

    .footer__bottom {
      flex-direction: column;
      gap: var(--space-2);
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    .footer__grid {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/components/Hero.astro (scoped) ===================== */

.hero {
    padding: var(--space-5) 0 var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  }

  .hero__badge {
    margin-bottom: var(--space-2);
  }

  .hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    max-width: 800px;
  }

  .hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    line-height: var(--leading-normal);
    max-width: 640px;
    margin-bottom: var(--space-2);
  }

  .hero__date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .hero {
      padding: var(--space-4) 0 var(--space-2);
    }

    .hero__title {
      font-size: var(--text-2xl);
    }

    .hero__subtitle {
      font-size: var(--text-base);
    }
  }


/* ===================== src/components/MercadoDivider.astro (scoped) ===================== */

.mercado-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    color: var(--color-primary);
  }

  .mercado-divider--subtle {
    padding: var(--space-4) 0;
    color: var(--color-border);
  }

  .mercado-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-border-light) 20%,
      var(--color-border-light) 80%,
      transparent 100%
    );
  }

  .mercado-divider__ornament {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }


/* ===================== src/components/Navigation.astro (scoped) ===================== */

.nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
  }

  .nav__brand:hover {
    text-decoration: none;
  }

  .nav__brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: -0.02em;
  }

  .nav__brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-text);
  }

  .nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .nav__link:hover {
    color: var(--color-primary);
    background: rgba(192, 57, 43, 0.05);
    text-decoration: none;
  }

  .nav__link--active {
    color: var(--color-primary);
    font-weight: 700;
  }

  .nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
  }

  .nav__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  @media (max-width: 768px) {
    .nav__toggle {
      display: flex;
    }

    .nav__menu {
      display: none;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border-light);
      flex-direction: column;
      padding: var(--space-4) var(--space-6);
      box-shadow: var(--shadow-md);
    }

    .nav__menu.is-open {
      display: flex;
    }

    .nav__link {
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-base);
    }
  }


/* ===================== src/components/ProsCons.astro (scoped) ===================== */

.pros-cons {
    margin: var(--space-8) 0;
  }

  .pros-cons__title {
    margin-bottom: var(--space-4);
  }

  .pros-cons__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .pros-cons__col {
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }

  .pros-cons__col--pros {
    background: #F0FAF4;
    border: 1px solid #A3D9B1;
  }

  .pros-cons__col--cons {
    background: #FDF2F2;
    border: 1px solid #F5B7B1;
  }

  .pros-cons__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-3);
  }

  .pros-cons__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pros-cons__col li {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    line-height: var(--leading-normal);
  }

  .pros-cons__col li:last-child {
    border-bottom: none;
  }

  @media (max-width: 640px) {
    .pros-cons__grid {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/components/SeleccionDestacada.astro (scoped) ===================== */

.selección {
    padding: var(--space-3) 0 var(--space-2);
  }

  .selección__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .selección__badge {
    display: inline-block;
    background: #C0392B;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .selección__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
  }

  .selección__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .selección__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: #FFF8F0;
    border: 1px solid #f0e6d9;
    border-top: 3px solid #C0392B;
    border-radius: 8px;
    padding: var(--space-3) var(--space-3);
    transition: box-shadow 0.2s ease;
  }

  .selección__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .selección__rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #C0392B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
  }

  .selección__info {
    flex: 1;
    min-width: 0;
  }

  .selección__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 2px 0;
    color: var(--color-text);
  }

  .selección__bonus {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
  }

  .selección__speed {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .selección__speed-label {
    font-size: 10px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }

  .selección__speed-track {
    width: 60px;
    height: 5px;
    background: #ede4da;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .selección__speed-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #D4A017, #27AE60);
  }

  .selección__speed-value {
    font-size: var(--text-xs);
    font-weight: 700;
    color: #27AE60;
    flex-shrink: 0;
  }

  .selección__cta {
    display: block;
    background: #C0392B;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
  }

  .selección__cta:hover {
    background: #a33025;
    color: #fff;
    text-decoration: none;
  }

  @media (max-width: 768px) {
    .selección__grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .selección__card {
      flex-direction: row;
      align-items: center;
      padding: var(--space-2) var(--space-3);
      border-top: none;
      border-left: 3px solid #C0392B;
    }

    .selección__cta {
      flex-shrink: 0;
      padding: 8px 14px;
      font-size: var(--text-xs);
    }

    .selección__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }
  }


/* ===================== src/components/TrustBar.astro (scoped) ===================== */

.trust-bar {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) 0;
  }

  .trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    text-align: center;
  }

  .trust-bar__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .trust-bar__value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
  }

  .trust-bar__label {
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-weight: 500;
  }

  @media (max-width: 640px) {
    .trust-bar__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
    }

    .trust-bar__value {
      font-size: var(--text-xl);
    }
  }


/* ===================== src/pages/404.astro (scoped) ===================== */

.error-page {
    padding: var(--space-20) 0;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
  }

  .error-page__code {
    font-family: var(--font-heading);
    font-size: 10rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.15;
    line-height: 1;
    display: block;
    margin-bottom: var(--space-4);
  }

  .error-page__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
  }

  .error-page__text {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    max-width: 500px;
    margin: 0 auto var(--space-8);
  }

  .error-page__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
  }

  .error-page__links {
    text-align: center;
  }

  .error-page__links p {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-3);
  }

  .error-page__links ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .error-page__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
  }

  .error-link-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }

  .error-link-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .error-link-card strong {
    font-size: var(--text-sm);
    color: var(--color-text);
  }

  .error-link-card span {
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  @media (max-width: 480px) {
    .error-page__code {
      font-size: 6rem;
    }

    .error-page__cards {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/pages/autores/index.astro (scoped) ===================== */

.hero {
    padding: var(--space-12) 0 var(--space-10);
    border-bottom: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  }

  .hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
    max-width: 800px;
  }

  .hero__subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
    max-width: 640px;
    margin-bottom: 0;
  }

  .authors-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .author-card {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-8);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }

  .author-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .author-card__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-xl);
    font-family: var(--font-heading);
  }

  .author-card__info {
    flex: 1;
  }

  .author-card__name {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
    border: none;
    padding: 0;
  }

  .author-card__role {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-3);
  }

  .author-card__bio {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
  }

  .author-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .author-card__badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .author-card__link {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
  }

  @media (max-width: 768px) {
    .hero {
      padding: var(--space-8) 0 var(--space-6);
    }

    .hero__title {
      font-size: var(--text-3xl);
    }

    .hero__subtitle {
      font-size: var(--text-lg);
    }
  }

  @media (max-width: 480px) {
    .author-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .author-card__avatar {
      width: 80px;
      height: 80px;
    }

    .author-card__badges {
      justify-content: center;
    }
  }


/* ===================== src/pages/autores/lucia-fernandez/index.astro (scoped) ===================== */

.author-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
  }

  .author-header__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
  }

  .author-header__name {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
  }

  .author-header__role {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
  }

  .author-header__location {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 0;
  }

  /* Author Stats Dashboard */
  .author-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .author-stat {
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
  }

  .author-stat__number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--color-primary);
    line-height: 1.2;
  }

  .author-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Author Badges */
  .author-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .author-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Review Summary Cards */
  .review-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .review-summary__card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }

  .review-summary__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .review-summary__title {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }

  .review-summary__count {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 700;
  }

  @media (max-width: 768px) {
    .author-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .author-header {
      flex-direction: column;
      text-align: center;
    }

    .author-header__avatar {
      width: 88px;
      height: 88px;
    }

    .author-stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .author-badges {
      justify-content: center;
    }

    .review-summary {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/pages/autores/rodrigo-casals/index.astro (scoped) ===================== */

.author-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
  }

  .author-header__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
  }

  .author-header__name {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
  }

  .author-header__role {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
  }

  .author-header__location {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 0;
  }

  /* Author Stats Dashboard */
  .author-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .author-stat {
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
  }

  .author-stat__number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--color-primary);
    line-height: 1.2;
  }

  .author-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Author Badges */
  .author-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .author-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Review Summary Cards */
  .review-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .review-summary__card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }

  .review-summary__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .review-summary__title {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }

  .review-summary__count {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 700;
  }

  @media (max-width: 768px) {
    .author-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .author-header {
      flex-direction: column;
      text-align: center;
    }

    .author-header__avatar {
      width: 88px;
      height: 88px;
    }

    .author-stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .author-badges {
      justify-content: center;
    }

    .review-summary {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/pages/index.astro (scoped) ===================== */

/* Guide Grid */
  .guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .guide-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    padding: var(--space-6);
  }

  .guide-card:hover {
    text-decoration: none;
  }

  .guide-card__badge {
    align-self: flex-start;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .guide-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: 0;
  }

  .guide-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
    flex: 1;
  }

  .guide-card__cta {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
  }

  /* Author Cards */
  .author-card {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-8);
  }

  .author-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .author-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    font-family: var(--font-heading);
  }

  .author-card__name {
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
  }

  .author-card__name a {
    color: var(--color-text);
    text-decoration: none;
  }

  .author-card__name a:hover {
    color: var(--color-primary);
  }

  .author-card__role {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-3);
  }

  .author-card__bio {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
  }

  .author-card__link {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* Speed Chart */
  .speed-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .speed-chart__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .speed-chart__label {
    width: 130px;
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
  }

  .speed-chart__track {
    flex: 1;
    height: 28px;
    background: #f0ebe4;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .speed-chart__bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #27AE60, #D4A017);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-2);
    min-width: 60px;
    transition: width 0.5s ease;
  }

  .speed-chart__value {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  /* DGOJ vs Offshore Compare */
  .dgoj-compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .dgoj-compare__card {
    background: #fff;
    border: 1px solid #ede4da;
    border-radius: 10px;
    padding: var(--space-6);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .dgoj-compare__icon {
    margin-bottom: var(--space-3);
  }

  .dgoj-compare__heading {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text);
  }

  .dgoj-compare__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .dgoj-compare__dgoj,
  .dgoj-compare__offshore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .dgoj-compare__tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 100px;
  }

  .dgoj-compare__tag--dgoj {
    background: #fde8e8;
    color: #C0392B;
  }

  .dgoj-compare__tag--offshore {
    background: #e8f8ee;
    color: #27AE60;
  }

  .dgoj-compare__num {
    font-family: var(--font-heading);
    font-weight: 700;
  }

  .dgoj-compare__num--dgoj {
    font-size: var(--text-sm);
    color: #C0392B;
  }

  .dgoj-compare__num--offshore {
    font-size: var(--text-lg);
    color: #27AE60;
  }

  .dgoj-compare__vs {
    font-size: var(--text-xs);
    color: var(--color-muted);
    font-weight: 600;
  }

  /* Comparison Table */
  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
  }

  .comparison-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .comparison-table thead {
    background: #FFF8F0;
    border-bottom: 2px solid var(--color-border);
  }

  .comparison-table th {
    padding: var(--space-4) var(--space-4);
    text-align: left;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
    white-space: nowrap;
  }

  .comparison-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
  }

  .comparison-table tbody tr:hover {
    background: var(--color-surface-hover, #F8F5F2);
  }

  .comparison-table__name {
    white-space: nowrap;
  }

  .comparison-table__name strong {
    display: block;
    font-size: var(--text-base);
  }

  .comparison-table__rating {
    font-size: var(--text-xs);
    color: var(--color-gold);
    font-weight: 700;
  }

  .comparison-table__feature {
    max-width: 200px;
    font-size: var(--text-xs);
    color: var(--color-text-light);
  }

  .speed-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-weight: 700;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .verif-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-weight: 700;
    font-size: var(--text-xs);
    white-space: nowrap;
    background: #e8f8ee;
    color: #27AE60;
  }

  /* Methodology */
  .metodologia-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .metodologia-card {
    background: #FFF8F0;
    border: 1px solid #f0e6d9;
    border-radius: 10px;
    padding: var(--space-5) var(--space-6);
  }

  .metodologia-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
  }

  .metodologia-card__nombre {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
  }

  .metodologia-card__score {
    font-family: var(--font-data);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
  }

  .metodologia-card__bar-track {
    width: 100%;
    height: 8px;
    background: #ede4da;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-3);
  }

  .metodologia-card__bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #C0392B, #D4A017);
    transition: width 0.5s ease;
  }

  .metodologia-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  /* Payment Methods */
  .payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .payment-card {
    background: #FFF8F0;
    border: 1px solid #f0e6d9;
    border-radius: 10px;
    padding: var(--space-5);
    text-align: center;
  }

  .payment-card__icon {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: center;
  }

  .payment-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }

  .payment-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
    margin: 0;
  }

  /* Sign-up Steps */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }

  .step-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: var(--space-6) var(--space-5);
    text-align: center;
    position: relative;
  }

  .step-card__number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    margin: 0 auto var(--space-4);
  }

  .step-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-3);
  }

  .step-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
    margin: 0;
  }

  /* Mini Reviews */
  .mini-review {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-gold);
    border-radius: 0 8px 8px 0;
    padding: var(--space-5) var(--space-6);
    margin-top: calc(var(--space-4) * -1);
    margin-bottom: var(--space-6);
  }

  .mini-review__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-3);
  }

  .mini-review__text {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
  }

  .mini-review__pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }

  .mini-review__pros ul,
  .mini-review__cons ul {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0 0;
  }

  .mini-review__pros li::before {
    content: '+ ';
    color: #27AE60;
    font-weight: 700;
  }

  .mini-review__cons li::before {
    content: '- ';
    color: #E74C3C;
    font-weight: 700;
  }

  .mini-review__pros li,
  .mini-review__cons li {
    margin-bottom: var(--space-1);
    line-height: 1.4;
  }

  /* Sticky Mobile CTA */
  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-surface);
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: none;
  }

  .sticky-cta--visible {
    transform: translateY(0);
  }

  .sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    max-width: 1200px;
    margin: 0 auto;
  }

  .sticky-cta__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .sticky-cta__rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
  }

  .sticky-cta__name {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.2;
  }

  .sticky-cta__bonus {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gold);
    font-weight: 700;
  }

  .sticky-cta__btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease;
  }

  .sticky-cta__btn:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
  }

  /* Progressive Disclosure toggle */
  .btn--outline {
    display: inline-block;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .btn--outline:hover {
    background: var(--color-primary);
    color: #fff;
  }

  /* Show sticky CTA only on mobile */
  @media (max-width: 768px) {
    .sticky-cta {
      display: block;
    }

    .guide-grid {
      grid-template-columns: 1fr;
    }

    .author-grid {
      grid-template-columns: 1fr;
    }

    .author-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .speed-chart__label {
      width: 90px;
      font-size: var(--text-xs);
    }

    .dgoj-compare {
      grid-template-columns: 1fr;
    }

    .dgoj-compare__row {
      gap: var(--space-2);
    }

    .payment-grid {
      grid-template-columns: 1fr 1fr;
    }

    .steps-grid {
      grid-template-columns: 1fr 1fr;
    }

    .mini-review__pros-cons {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .payment-grid {
      grid-template-columns: 1fr;
    }

    .steps-grid {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/pages/juego-responsable/index.astro (scoped) ===================== */

/* Emergency Banner */
  .emergency-banner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }

  .emergency-banner__icon {
    flex-shrink: 0;
  }

  .emergency-banner__title {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
  }

  .emergency-banner__phone {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-3xl);
    color: var(--color-secondary);
    margin-bottom: var(--space-1);
    line-height: 1.2;
  }

  .emergency-banner__sub {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
  }

  /* Warning Cards */
  .warning-heading {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .warning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .warning-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .warning-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FDEDEC;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }

  .warning-card__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .warning-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-normal);
  }

  /* Tools Grid */
  .tools-heading {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .tool-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-card);
  }

  .tool-card__icon {
    margin-bottom: var(--space-3);
  }

  .tool-card__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .tool-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-normal);
  }

  /* Resource Cards */
  .resources-heading {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .resource-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .resource-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    transition: box-shadow var(--transition-base);
  }

  .resource-card:hover {
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }

  .resource-card__name {
    font-size: var(--text-lg);
    color: var(--color-text);
  }

  .resource-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
  }

  .resource-card__link {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    font-weight: 700;
  }

  .resource-card--phone {
    background: #FFF8F0;
    border-left: 4px solid var(--color-secondary);
  }

  @media (max-width: 768px) {
    .warning-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .tools-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .resource-cards {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .warning-grid {
      grid-template-columns: 1fr;
    }

    .tools-grid {
      grid-template-columns: 1fr;
    }

    .emergency-banner {
      flex-direction: column;
      text-align: center;
    }
  }


/* ===================== src/pages/metodologia/index.astro (scoped) ===================== */

/* Testing Pipeline */
  .pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: var(--space-8) 0;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }

  .pipeline__step {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: var(--space-4) var(--space-3);
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
  }

  .pipeline__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    margin: 0 auto var(--space-2);
  }

  .pipeline__title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-1);
  }

  .pipeline__desc {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
  }

  .pipeline__connector {
    width: 24px;
    min-width: 24px;
    height: 2px;
    background: var(--color-primary);
    align-self: center;
    margin-top: -20px;
    position: relative;
  }

  .pipeline__connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-primary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  /* Weight Bars */
  .weight-bars {
    margin: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .weight-bar__label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
  }

  .weight-bar__name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
  }

  .weight-bar__pct {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-muted);
  }

  .weight-bar__track {
    height: 12px;
    background: var(--color-border-light);
    border-radius: 6px;
    overflow: hidden;
  }

  .weight-bar__fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
  }

  .weight-bar__fill--green { background: var(--color-success); }
  .weight-bar__fill--blue { background: var(--color-secondary); }
  .weight-bar__fill--gold { background: var(--color-gold); }
  .weight-bar__fill--amber { background: var(--color-warning); }
  .weight-bar__fill--muted { background: var(--color-muted); }

  /* Scoring Scale */
  .scoring-scale {
    margin: var(--space-6) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .scoring-scale__row {
    display: flex;
    gap: var(--space-4);
    align-items: center;
  }

  .scoring-scale__label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    min-width: 140px;
    flex-shrink: 0;
  }

  .scoring-scale__bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .scoring-scale__bar-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .scoring-scale__tag {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    min-width: 56px;
    text-align: right;
  }

  .scoring-scale__tag--offshore {
    color: var(--color-secondary);
  }

  .scoring-scale__track {
    flex: 1;
    height: 8px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
  }

  .scoring-scale__fill {
    height: 100%;
    border-radius: 4px;
  }

  .scoring-scale__fill--dgoj {
    background: var(--color-primary);
  }

  .scoring-scale__fill--offshore {
    background: var(--color-secondary);
  }

  @media (max-width: 768px) {
    .pipeline {
      flex-direction: column;
      align-items: stretch;
    }

    .pipeline__connector {
      width: 2px;
      height: 16px;
      min-width: unset;
      align-self: center;
      margin-top: 0;
    }

    .pipeline__connector::after {
      right: -3px;
      top: auto;
      bottom: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 6px solid var(--color-primary);
      border-bottom: none;
    }

    .scoring-scale__row {
      flex-direction: column;
      align-items: stretch;
    }

    .scoring-scale__label {
      min-width: unset;
    }

    .scoring-scale__tag {
      text-align: left;
    }
  }


/* ===================== src/pages/regulacion-espana/index.astro (scoped) ===================== */

/* DGOJ Dashboard */
  .dgoj-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .dgoj-card {
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
  }

  .dgoj-card__title {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: var(--space-2);
  }

  .dgoj-card__amount {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-4xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    line-height: 1.1;
  }

  .dgoj-card__amount--status {
    font-size: var(--text-2xl);
  }

  .dgoj-card__period {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-weight: 400;
  }

  .dgoj-card__bar-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-1);
  }

  .dgoj-card__bar {
    height: 8px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-3);
  }

  .dgoj-card__bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
  }

  .dgoj-card__shield {
    margin: var(--space-2) auto var(--space-3);
  }

  .dgoj-card__note {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin: 0;
  }

  /* Timeline */
  .timeline-heading {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-8);
  }

  .timeline {
    position: relative;
    padding: var(--space-4) 0;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
    transform: translateX(-50%);
  }

  .timeline__item {
    display: flex;
    margin-bottom: var(--space-8);
    position: relative;
  }

  .timeline__item--left {
    justify-content: flex-start;
    padding-right: calc(50% + var(--space-8));
  }

  .timeline__item--right {
    justify-content: flex-end;
    padding-left: calc(50% + var(--space-8));
  }

  .timeline__date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    white-space: nowrap;
    z-index: 1;
  }

  .timeline__content {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
  }

  .timeline__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .timeline__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-normal);
  }

  /* Scenario Cards */
  .scenario-heading {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .scenario-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .scenario-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
  }

  .scenario-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    text-align: center;
  }

  .scenario-card__compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .scenario-card__side {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .scenario-card__side--dgoj {
    background: #FDEDEC;
  }

  .scenario-card__side--offshore {
    background: #EBF5FB;
  }

  .scenario-card__side p {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-normal);
  }

  .scenario-card__badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    background: var(--color-primary);
    color: #FFFFFF;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .scenario-card__badge--offshore {
    background: var(--color-secondary);
  }

  @media (max-width: 768px) {
    .dgoj-dashboard__cards {
      grid-template-columns: 1fr;
    }

    .timeline::before {
      left: 20px;
    }

    .timeline__item--left,
    .timeline__item--right {
      padding-left: 56px;
      padding-right: 0;
      justify-content: flex-start;
    }

    .timeline__date {
      left: 20px;
    }

    .scenario-card__compare {
      grid-template-columns: 1fr;
    }
  }


/* ===================== src/pages/sobre-nosotros/index.astro (scoped) ===================== */

.author-dashboard {
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
  }

  .author-dashboard__profile {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }

  .author-dashboard__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    flex-shrink: 0;
  }

  .author-dashboard__name {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
    border: none;
    padding: 0;
  }

  .author-dashboard__title {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin: 0;
  }

  .author-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
  }

  .stat-card__number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--color-primary);
    line-height: 1.2;
  }

  .stat-card__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .credential-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .credential-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .funding-flow {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-6) 0;
  }

  .funding-flow__step {
    flex: 1;
    background: #FFF8F0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
  }

  .funding-flow__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    margin: 0 auto var(--space-3);
  }

  .funding-flow__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .funding-flow__desc {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: var(--leading-normal);
  }

  .funding-flow__arrow {
    color: var(--color-primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    padding-top: var(--space-8);
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .author-dashboard__stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .funding-flow {
      flex-direction: column;
      align-items: stretch;
    }

    .funding-flow__arrow {
      text-align: center;
      padding: 0;
      transform: rotate(90deg);
      font-size: var(--text-xl);
    }
  }

  @media (max-width: 480px) {
    .author-dashboard__profile {
      flex-direction: column;
      text-align: center;
    }

    .author-dashboard__stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .credential-badges {
      justify-content: center;
    }
  }
/* ==========================================================================
   FESTIVENT SKIN — design tokens + signature surfaces
   Re-skins "Tu Casino" in the Festivent visual language
   (coral + navy + sky + cream, condensed display type, pill glow buttons,
   colour bands, scrolling promo marquee). Light theme.
   This block is appended AFTER the original layout CSS, so it wins the cascade.
   ========================================================================== */

/* --- Festivent design tokens (override the original :root) --- */
:root {
  /* Festivent palette */
  --fv-coral: #f15c56;
  --fv-coral-dark: #b93f3a;
  --fv-orange: #f89e5d;
  --fv-navy: #154e85;
  --fv-navy-dark: #0f3356;
  --fv-sky: #c7eafb;
  --fv-sky-tint: #eaf6fd;
  --fv-cream: #fef7de;

  /* Remapped semantic tokens (everything token-driven inherits this) */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-border: #e7eef5;
  --color-surface-hover: #f4f9fe;

  --color-primary: #f15c56;
  --color-primary-dark: #b93f3a;
  --color-primary-light: #f89e5d;
  --color-secondary: #154e85;
  --color-secondary-dark: #0f3356;
  --color-gold: #e08a2b;
  --color-gold-light: #f89e5d;

  --color-text: #16243c;
  --color-text-light: #3d4d65;
  --color-muted: #7c8aa0;
  --color-border: #dbe3ee;
  --color-border-light: #eef2f8;

  --color-success: #1f9d57;
  --color-warning: #e08a2b;
  --color-danger: #f15c56;

  /* Typography — Oswald (condensed display) + Jost (geometric body) */
  --font-heading: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'Jost', -apple-system, sans-serif;

  /* Rounder, softer */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Navy-tinted soft shadows */
  --shadow-sm: 0 1px 3px rgba(21, 78, 133, 0.06);
  --shadow-md: 0 6px 18px rgba(21, 78, 133, 0.10);
  --shadow-lg: 0 14px 36px rgba(21, 78, 133, 0.14);
  --shadow-card: 0 4px 18px rgba(21, 78, 133, 0.08);
}

/* --- Base typography in the Festivent register --- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
}

/* Big display headings: uppercase condensed, tight leading (the Festivent look) */
h1, h2 {
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.04;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

::selection { background: var(--fv-coral); color: #fff; }

/* --- Promo marquee (signature Festivent banner, scrolls above the nav) --- */
.promo-marquee {
  background: var(--fv-navy);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid var(--fv-navy-dark);
  border-bottom: 2px solid var(--fv-navy-dark);
}
.promo-marquee__track {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 0;
  animation: fv-marquee 32s linear infinite;
  will-change: transform;
}
.promo-marquee__track span {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  padding: 0 1.1rem;
}
.promo-marquee__track span::before { content: "★"; margin-right: 1.1rem; opacity: 0.7; }
@keyframes fv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .promo-marquee__track { animation: none; padding-left: 1rem; }
}

/* --- Navigation --- */
.nav {
  background: #ffffff;
  border-bottom: none;
  box-shadow: 0 2px 16px rgba(21, 78, 133, 0.07);
}
.nav__brand-icon {
  background: var(--fv-coral);
  border-radius: 10px;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}
.nav__brand-text {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nav__link {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.8rem;
}
.nav__link:hover { color: var(--fv-coral); background: rgba(241, 92, 86, 0.09); }
.nav__link--active { color: var(--fv-coral); }

/* --- Buttons: pill-shaped, uppercase, coral, glow on hover --- */
.btn {
  border-radius: 999px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.btn--primary { background: var(--fv-coral); color: #fff; }
.btn--primary:hover {
  background: var(--fv-coral-dark);
  color: #fff;
  box-shadow: 0 8px 24px rgba(241, 92, 86, 0.38);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.30);
  transform: translateY(-2px);
}
.btn--secondary { background: var(--fv-navy); color: #fff; }
.btn--secondary:hover { background: var(--fv-navy-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn--outline { border: 2px solid var(--fv-coral); color: var(--fv-coral); background: transparent; }
.btn--outline:hover { background: var(--fv-coral); color: #fff; }

/* --- Hero: light cream→sky wash with a soft colour blob, big condensed H1 --- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: none;
  padding: var(--space-12) 0 var(--space-10);
  background: linear-gradient(155deg, var(--fv-cream) 0%, #ffffff 46%, var(--fv-sky-tint) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(241, 92, 86, 0.20) 0%, rgba(241, 92, 86, 0) 68%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.02;
  color: var(--fv-navy-dark);
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  max-width: 16ch;
}
.hero__subtitle { color: var(--color-text-light); max-width: 640px; }
.hero__badge .badge { background: var(--fv-sky); color: var(--fv-navy); }

/* --- Trust bar: navy band (Festivent colour-band rhythm) --- */
.trust-bar {
  background: var(--fv-navy);
  border-top: none;
  border-bottom: none;
}
.trust-bar__value { color: #ffffff; font-family: var(--font-heading); }
.trust-bar__label { color: #a9cdec; }

/* --- Editor's selection --- */
.selección__badge,
.selección__title { font-family: var(--font-heading); }
.selección__badge {
  background: var(--fv-sky);
  color: var(--fv-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.selección__title { text-transform: uppercase; letter-spacing: 0; }
.selección__card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--fv-coral);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.selección__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.selección__rank { background: var(--fv-coral); font-family: var(--font-heading); }
.selección__speed-fill { background: linear-gradient(90deg, var(--fv-orange), var(--color-success)); }
.selección__speed-value { color: var(--color-success); }
.selección__cta {
  background: var(--fv-coral);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.selección__cta:hover { background: var(--fv-coral-dark); box-shadow: 0 6px 18px rgba(241, 92, 86, 0.35); }
@media (max-width: 768px) {
  .selección__card { border-top: none; border-left: 4px solid var(--fv-coral); }
}

/* --- Casino cards --- */
.casino-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.casino-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.casino-card__accent { background: var(--fv-coral); border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.casino-card__name { font-family: var(--font-heading); }
.casino-card__cta {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* --- Cards & generic surfaces: rounder --- */
.card,
.guide-card, .payment-card, .tool-card, .resource-card, .stat-card,
.scenario-card, .dgoj-card, .metodologia-card, .warning-card, .step-card,
.author-card, .review-summary__card, .error-link-card {
  border-radius: var(--radius-lg);
}
.guide-card__cta { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-card__badge { background: var(--fv-sky); color: var(--fv-navy); }

/* --- Comparison table --- */
.comparison-table-wrap, .table-wrap { border-radius: var(--radius-lg); }
.comparison-table__title { font-family: var(--font-heading); text-transform: uppercase; }
thead { background: var(--fv-coral); }

/* --- Pills / badges in Festivent colours --- */
.badge { border-radius: 999px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
.badge--crypto, .badge--gold { background: #fbe7c6; color: #a85f14; }
.badge--red { background: #fde3e1; color: var(--fv-coral-dark); }
.badge--blue { background: var(--fv-sky-tint); color: var(--fv-navy); }
.badge--speed { background: #e2f6ec; color: var(--color-success); }
.speed-pill { background: #e2f6ec; color: var(--color-success); border-radius: 999px; }
.verif-pill { background: var(--fv-sky-tint); color: var(--fv-navy); border-radius: 999px; }

/* --- FAQ --- */
.faq-item { border: 1px solid var(--color-border); border-radius: 14px; }
.faq-item[open] { border-color: var(--fv-coral); }
.faq-item__question:hover { background: var(--fv-sky-tint); }
.faq-item[open] .faq-item__chevron { color: var(--fv-coral); }

/* --- Prose --- */
.prose h2 { border-bottom: 2px solid var(--fv-sky); }
.prose a { text-decoration-color: rgba(241, 92, 86, 0.4); }
.prose a:hover { text-decoration-color: var(--fv-coral); }
.prose blockquote { border-left: 4px solid var(--fv-coral); background: var(--fv-sky-tint); }

/* --- Sticky mobile CTA --- */
.sticky-cta { border-top: 3px solid var(--fv-coral); box-shadow: 0 -6px 22px rgba(21, 78, 133, 0.14); }
.sticky-cta__rank { background: var(--fv-navy); color: #fff; width: 26px; height: 26px; font-size: 12px; }
.sticky-cta__inner { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.sticky-cta__info { gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.sticky-cta__text { flex: 1 1 auto; min-width: 0; }
.sticky-cta__name { white-space: nowrap; }
.sticky-cta__btn { flex: 0 0 auto; padding: 9px 16px; font-size: var(--text-sm); }
.sticky-cta__logo { width: 46px; height: 34px; object-fit: contain; background: #fff; border: 1px solid var(--color-border-light); border-radius: 8px; padding: 3px; flex-shrink: 0; }
.sticky-cta__text { min-width: 0; }
.sticky-cta__name { display: flex; align-items: baseline; gap: 6px; font-weight: 800; color: var(--fv-navy); white-space: nowrap; }
.sticky-cta__score { font-size: var(--text-xs); font-weight: 800; color: var(--fv-coral); }
.sticky-cta__bonus { color: var(--fv-navy); opacity: 0.72; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 42vw; }
.sticky-cta__btn { background: var(--fv-coral); border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 4px 14px rgba(241, 92, 86, 0.45); animation: stickyPulse 2.4s ease-in-out infinite; }
.sticky-cta__btn:hover { background: var(--fv-coral-dark); animation: none; }
@keyframes stickyPulse { 0%,100% { box-shadow: 0 4px 14px rgba(241,92,86,0.45); } 50% { box-shadow: 0 4px 22px rgba(241,92,86,0.75); } }
@media (prefers-reduced-motion: reduce) { .sticky-cta__btn { animation: none; } }
/* always visible on mobile, from first paint (no scroll gate) */
@media (max-width: 768px) { .sticky-cta { display: block; transform: translateY(0) !important; } }
/* --- Hero featured #1 pick (desktop) --- */
.hero__grid{display:block}
.hero--split .hero__copy{min-width:0}
@media (min-width:861px){
  .hero--split .hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:var(--space-10);align-items:center}
}
.hero-pick{background:#fff;border:1px solid var(--color-border-light);border-top:4px solid var(--fv-coral);border-radius:16px;padding:var(--space-5);box-shadow:0 16px 40px rgba(21,78,133,0.14);display:flex;flex-direction:column;gap:var(--space-3)}
.hero-pick__label{display:inline-block;align-self:flex-start;background:var(--fv-navy);color:#fff;text-transform:uppercase;letter-spacing:0.05em;font-size:var(--text-xs);font-weight:800;padding:4px 12px;border-radius:999px}
.hero-pick__head{display:flex;align-items:center;gap:var(--space-3)}
.hero-pick__logo{width:64px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--color-border-light);border-radius:10px;padding:4px;flex-shrink:0}
.hero-pick__name{display:block;font-family:var(--font-display,inherit);font-weight:800;font-size:var(--text-lg);color:var(--fv-navy);line-height:1.1}
.hero-pick__rating{display:flex;align-items:center;gap:6px;font-size:var(--text-sm)}
.hero-pick__stars{color:var(--fv-orange,#f89e5d);letter-spacing:1px}
.hero-pick__rating strong{color:var(--fv-coral)}
.hero-pick__highlight{margin:0;color:var(--fv-navy);opacity:0.85;font-size:var(--text-sm);line-height:1.5}
.hero-pick__facts{display:flex;flex-direction:column;gap:5px}
.hero-pick__facts span{font-size:var(--text-sm);font-weight:700;color:var(--fv-navy);padding-left:22px;position:relative}
.hero-pick__facts span::before{content:"✓";position:absolute;left:0;color:#27AE60;font-weight:800}
.hero-pick__cta{width:100%;text-align:center;box-shadow:0 4px 14px rgba(241,92,86,0.45)}
.hero-pick__note{font-size:11px;color:var(--color-text-muted,#6b7785);text-align:center}
@media (max-width:860px){.hero-pick{display:none}}

/* --- Footer: navy band --- */
.footer { background: var(--fv-navy-dark); color: #c2d4e8; }
.footer a { color: #c2d4e8; }
.footer a:hover { color: #ffffff; }
.footer__logo-icon { background: var(--fv-coral); }
.footer__logo-text { font-family: var(--font-heading); text-transform: uppercase; }
.footer__18 { color: var(--fv-orange); }

/* --- Emergency / responsible-gaming banner --- */
.emergency-banner { background: var(--fv-sky-tint); border-left: 4px solid var(--fv-navy); border-radius: var(--radius-lg); }
.emergency-banner__title { font-family: var(--font-heading); color: var(--fv-navy-dark); }
.emergency-banner__phone { color: var(--fv-coral); }

/* --- Section heading rhythm: a coral kicker under big section titles is implied
   by the uppercase condensed type; keep author byline avatar coral via tokens. --- */
.author-byline__name a:hover { color: var(--fv-coral); }

/* --- Image logo (nav + footer) --- */
.nav__logo{height:34px;width:auto;display:block}
.footer__logo-img{height:32px;width:auto;display:block}
@media (max-width:768px){.nav__logo{height:30px}}

/* --- Categorised nav dropdowns --- */
.nav__menu{gap:.15rem}
.nav__item--dropdown{position:relative}
.nav__dropdown-toggle{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;cursor:pointer;font:inherit}
.nav__chevron{transition:transform .2s ease}
.nav__submenu{list-style:none;margin:0;padding:.4rem}
.nav__submenu a{display:block;padding:.5rem .8rem;border-radius:8px;font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-light);white-space:nowrap;text-decoration:none}
.nav__submenu a:hover{background:rgba(241,92,86,.09);color:var(--fv-coral)}
@media (min-width:769px){
  .nav__submenu{position:absolute;top:calc(100% + .35rem);left:0;min-width:240px;background:#fff;border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:200}
  .nav__item--dropdown:hover .nav__submenu,.nav__item--dropdown:focus-within .nav__submenu{opacity:1;visibility:visible;transform:none}
  .nav__item--dropdown:hover .nav__chevron,.nav__item--dropdown:focus-within .nav__chevron{transform:rotate(180deg)}
}
@media (max-width:768px){
  .nav__item--dropdown{width:100%}
  .nav__dropdown-toggle{width:100%;justify-content:space-between;padding:var(--space-3) var(--space-4);font-size:var(--text-base)}
  .nav__submenu{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 0 0 var(--space-4)}
  .nav__item--dropdown.is-open .nav__submenu{max-height:520px}
  .nav__item--dropdown.is-open .nav__chevron{transform:rotate(180deg)}
  .nav__submenu a{font-size:.85rem;padding:.55rem .4rem}
}

/* --- Mobile nav: uniform font + left alignment (Inicio, toggles, submenu) --- */
@media (max-width:768px){
  .nav__menu{align-items:stretch;text-align:left}
  .nav__menu>.nav__item>.nav__link,.nav__menu .nav__dropdown-toggle{display:flex;width:100%;justify-content:flex-start;align-items:center;text-align:left;font-family:var(--font-body);font-size:var(--text-base);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:var(--space-3) var(--space-4)}
  .nav__dropdown-toggle{justify-content:space-between}
  .nav__submenu{padding:0 0 .3rem var(--space-6)}
  .nav__submenu a{font-family:var(--font-body);font-size:var(--text-base);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:var(--space-3) var(--space-4)}
}

/* --- Consistent section widths: narrow containers match the standard container --- */
.container--narrow{max-width:var(--max-width)}
/* prose NESTED inside a container fills it... */
.container .prose,.container--narrow .prose,.container--wide .prose{max-width:none}
/* ...but when .prose is itself the container element (prose() helper), keep the standard width + centre it */
.container--narrow.prose,.container.prose,.container--wide.prose{max-width:var(--max-width);margin-left:auto;margin-right:auto}

/* --- Brand logos (toplist + review) + operator screenshots (LineupHQ) --- */
.casino-card__rank-info{display:flex;align-items:center;gap:var(--space-3)}
.casino-card__logo{flex-shrink:0;width:96px;height:54px;display:flex;align-items:center;justify-content:center}
.casino-card__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.review-logo{height:50px;margin-bottom:var(--space-3)}
.review-logo img{height:100%;width:auto;max-width:210px;object-fit:contain}
.op-shot{margin:var(--space-4) 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.op-shot img{display:block;width:100%;height:auto;max-height:400px;object-fit:cover;object-position:top}
.op-shot figcaption{font-size:var(--text-xs);color:var(--color-muted);padding:var(--space-2) var(--space-3);background:var(--fv-sky-tint)}
@media (max-width:768px){.casino-card__logo{width:74px;height:44px}}

/* --- Author portraits (generated) --- */
img.author-header__avatar,img.author-dashboard__avatar,img.author-card__avatar,.author-byline__avatar{object-fit:cover}
.author-header__avatar,.author-dashboard__avatar,.author-card__avatar{overflow:hidden;padding:0}
.author-card{display:flex;align-items:center;gap:var(--space-4)}
.author-card__avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0}
.author-card__info{display:flex;flex-direction:column;gap:2px}

/* --- Condensed hero (tighter vertical rhythm) --- */
.hero{padding:var(--space-5) 0 var(--space-3)!important}
.hero__title{margin-bottom:var(--space-3)}
.hero__subtitle{margin-bottom:0}
.hero::before{top:-45%}
.promo-marquee+section{padding-top:var(--space-6)}
/* pull the author byline up tight under the hero */
.hero+.container--narrow{padding-top:0!important}
.hero+.container--narrow .author-byline{margin-top:0}
@media (max-width:768px){.hero{padding:var(--space-4) 0 var(--space-3)!important}}

/* --- Mobile-optimal comparison tables: stack each row into a labelled card (<=600px) --- */
@media (max-width: 600px) {
  .table-wrap:has(table.is-stack), .comparison-table-wrap:has(table.is-stack) {
    overflow: visible; border: none; background: none; -webkit-overflow-scrolling: auto;
  }
  table.comparison-table.is-stack { min-width: 0; width: 100%; font-size: var(--text-sm); }
  table.comparison-table.is-stack thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.comparison-table.is-stack tbody tr {
    display: block; margin-bottom: var(--space-4); background: #fff;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg, 10px);
    overflow: hidden; box-shadow: 0 4px 14px rgba(21, 78, 133, 0.08);
  }
  table.comparison-table.is-stack tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--color-border-light);
    white-space: normal; max-width: none;
  }
  table.comparison-table.is-stack tbody td:last-child { border-bottom: none; }
  table.comparison-table.is-stack tbody td::before {
    content: attr(data-label); flex: 0 0 40%; text-align: left;
    font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    font-size: var(--text-xs); color: var(--fv-navy); opacity: .85;
  }
  table.comparison-table.is-stack tbody td:first-child {
    background: var(--fv-cream, #fef7de); font-weight: 700;
  }
  table.comparison-table.is-stack tbody td:first-child::before { color: var(--fv-coral); opacity: 1; }
}