/* =====================================================
   WW2 AGENCY — PRIVACY STYLES
   Estilos exclusivos para privacy/index.html
   Requiere que el HTML también cargue las fuentes:
   Bebas Neue + Inter via Google Fonts
   ===================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;900&display=swap');

   :root {
     --color-primary:    #FFD000;
     --color-bg-dark:    #0A0A0A;
     --color-card-dark:  #1E1E1E;
     --font-display:     'Inter', sans-serif;
     --font-bebas:       'Bebas Neue', cursive;
     --max-width:        1280px;
     --radius:           0.5rem;
     --radius-lg:        0.75rem;
     --radius-full:      9999px;
   }
   
   /* ── Reset ─────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html  { scroll-behavior: smooth; }
   body  { background-color: var(--color-bg-dark); font-family: var(--font-display); color: #f1f5f9; overflow-x: hidden; }
   ::selection { background-color: var(--color-primary); color: var(--color-bg-dark); }
   
   /* ── Shared: Header ────────────────────────────────── */
   .site-header { position: sticky; top: 0; z-index: 50; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); background-color: rgba(10,10,10,0.95); backdrop-filter: blur(12px); }
   .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
   .logo { display: flex; align-items: center; gap: 0.5rem; color: var(--color-primary); text-decoration: none; flex-shrink: 0; }
   .logo-text { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; font-style: italic; }
   .desktop-nav { display: none; align-items: center; gap: 2.5rem; }
   .desktop-nav a { font-size: 0.875rem; font-weight: 600; color: #cbd5e1; text-decoration: none; transition: color 0.2s; }
   .desktop-nav a:hover { color: var(--color-primary); }
   .btn-header { display: none; background-color: var(--color-primary); color: var(--color-bg-dark); padding: 0.625rem 1.5rem; border-radius: var(--radius-lg); font-weight: 700; font-size: 0.875rem; border: none; cursor: pointer; transition: filter 0.2s; white-space: nowrap; }
   .btn-header:hover { filter: brightness(1.1); }
   .btn-hamburger { display: flex; background: none; border: none; cursor: pointer; color: var(--color-primary); padding: 0; }
   .btn-hamburger .material-symbols-outlined { font-size: 1.875rem; }
   .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; border-top: 1px solid rgba(255,255,255,0.08); background-color: rgba(10,10,10,0.98); }
   .mobile-menu.open { max-height: 420px; }
   .mobile-nav { display: flex; flex-direction: column; padding: 1.5rem; gap: 1.25rem; }
   .mobile-nav a { font-size: 0.875rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: #f1f5f9; text-decoration: none; transition: color 0.2s; }
   .mobile-nav a:hover { color: var(--color-primary); }
   .btn-mobile-cta { width: 100%; background-color: var(--color-primary); color: var(--color-bg-dark); padding: 1rem; border-radius: var(--radius); font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; border: none; cursor: pointer; }
   
   @media (min-width: 768px) {
     .header-inner { height: 5rem; }
     .desktop-nav  { display: flex; }
     .btn-header   { display: block; }
     .btn-hamburger { display: none; }
     .logo-text { font-size: 1.5rem; }
   }
   @media (min-width: 1024px) {
     .header-inner { padding: 0 2.5rem; }
   }
   
   
   /* =====================================================
      PAGE: AVISO DE PRIVACIDAD
      Styles exclusive to privacy/index.html
      ===================================================== */
   
   /* ── Page-level background override ───────────────────
      The legal pages use a warm dark (#23200f) on
      tablet/desktop. Mobile keeps the standard #0A0A0A.  */
   
   body.legal-page { background-color: var(--color-bg-dark); }
   
   /* ── Logo SVG ──────────────────────────────────────── */
   .logo-svg {
     width: 1.75rem;
     height: 1.75rem;
     flex-shrink: 0;
   }
   
   /* ── Legal Hero ────────────────────────────────────── */
   .legal-hero {
     padding: 3rem 1.5rem;
     border-bottom: 1px solid rgba(255,255,255,0.05);
     background-color: var(--color-bg-dark);
   }
   
   .legal-hero-inner {
     max-width: var(--max-width);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 0.75rem;
   }
   
   .legal-badge {
     display: inline-block;
     background: rgba(249,212,6,0.1);
     color: var(--color-primary);
     font-size: 0.625rem;
     font-weight: 900;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 0.25rem 0.75rem;
     border-radius: var(--radius-full);
   }
   
   .legal-hero-title {
     font-family: var(--font-bebas);
     font-size: 2.5rem;
     font-weight: 700;
     letter-spacing: 0.02em;
     line-height: 1;
     text-transform: uppercase;
     color: #fff;
   }
   
   .legal-hero-meta {
     display: flex;
     align-items: center;
     gap: 0.375rem;
     color: #94a3b8;
     font-size: 0.875rem;
   }
   
   /* Subtitle: only visible on mobile */
   .legal-hero-subtitle {
     color: #94a3b8;
     font-size: 0.875rem;
     max-width: 18rem;
     text-align: center;
   }
   
   /* ── Layout container ──────────────────────────────── */
   .legal-layout {
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 2.5rem 1rem;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
   }
   
   /* ── Article card ──────────────────────────────────── */
   .legal-article {
     background-color: var(--color-card-dark);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     box-shadow: 0 25px 50px rgba(0,0,0,0.4);
     border: 1px solid rgba(255,255,255,0.05);
   }
   
   .legal-article-title {
     font-family: var(--font-bebas);
     font-size: 1.5rem;
     letter-spacing: 0.05em;
     color: #fff;
     padding-bottom: 1rem;
     border-bottom: 1px solid rgba(255,255,255,0.08);
     margin-bottom: 2rem;
   }
   
   .legal-sections {
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
   }
   
   /* ── Individual legal section ──────────────────────── */
   .legal-section {
     border-left: 2px solid rgba(249,212,6,0.3);
     padding-left: 1.25rem;
   }
   
   /* First / active section gets full-opacity border */
   .legal-section--active {
     border-left-color: var(--color-primary);
   }
   
   .legal-section-title {
     color: var(--color-primary);
     font-weight: 600;
     font-size: 1rem;
     margin-bottom: 0.75rem;
   }
   
   .legal-body {
     color: #cbd5e1;
     font-size: 0.9375rem;
     line-height: 1.8;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
   }
   
   .legal-list {
     list-style: disc;
     padding-left: 1.25rem;
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
     color: #cbd5e1;
     font-size: 0.9375rem;
     line-height: 1.7;
   }
   
   /* ── Sidebar — hidden on mobile ────────────────────── */
   .legal-sidebar { display: none; }
   
   /* ── Sidebar shared card styles ────────────────────── */
   .legal-sidebar-card {
     background-color: var(--color-card-dark);
     border-radius: var(--radius-lg);
     padding: 2rem;
     border: 1px solid rgba(255,255,255,0.05);
     box-shadow: 0 20px 40px rgba(0,0,0,0.3);
   }
   
   .legal-sidebar-title {
     font-family: var(--font-bebas);
     font-size: 1.25rem;
     letter-spacing: 0.08em;
     color: #fff;
     margin-bottom: 1.5rem;
     text-transform: uppercase;
   }
   
   /* Checklist */
   .legal-checklist {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   
   .legal-checklist-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.875rem;
     color: #cbd5e1;
   }
   
   .legal-check-icon {
     color: var(--color-primary);
     font-size: 1.25rem;
     flex-shrink: 0;
   }
   
   .legal-sidebar-divider {
     margin-top: 2rem;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(255,255,255,0.05);
   }
   
   .legal-sidebar-update-label {
     font-size: 0.5625rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     color: #475569;
     margin-bottom: 0.25rem;
   }
   
   .legal-sidebar-update-date {
     font-size: 0.875rem;
     color: #fff;
     font-weight: 500;
   }
   
   /* Help card */
   .legal-help-card {
     background-color: var(--color-primary);
     border-radius: var(--radius-lg);
     padding: 2rem;
     box-shadow: 0 20px 40px rgba(249,212,6,0.15);
   }
   
   .legal-help-title {
     font-family: var(--font-bebas);
     font-size: 1.375rem;
     color: var(--color-bg-dark);
     letter-spacing: 0.05em;
     text-transform: uppercase;
     margin-bottom: 0.5rem;
   }
   
   .legal-help-desc {
     font-size: 0.875rem;
     color: rgba(10,10,10,0.75);
     font-weight: 500;
     line-height: 1.6;
     margin-bottom: 1.5rem;
   }
   
   .legal-help-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     width: 100%;
     background-color: var(--color-bg-dark);
     color: #fff;
     padding: 0.875rem 1.25rem;
     border-radius: var(--radius);
     font-weight: 700;
     font-size: 0.875rem;
     border: none;
     cursor: pointer;
     transition: background 0.2s;
   }
   
   .legal-help-btn:hover { background: #000; }
   
   .legal-help-btn--yellow {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
   }
   .legal-help-btn--yellow:hover { filter: brightness(1.05); }
   
   /* ── Summary card — tablet only (below article) ─────── */
   .legal-summary-card {
     display: none;          /* hidden on mobile; shown tablet */
     background-color: var(--color-card-dark);
     border-radius: var(--radius-lg);
     padding: 2rem;
     border: 1px solid rgba(255,255,255,0.05);
   }
   
   .legal-summary-left  { flex: 1; }
   .legal-summary-right { flex: 1; }
   
   .legal-summary-divider {
     height: 1px;
     background: rgba(249,212,6,0.2);
     margin: 1rem 0;
   }
   
   /* ── Legal CTA ─────────────────────────────────────── */
   .legal-cta {
     background-color: var(--color-primary);
     padding: 4rem 1.5rem;
     margin-top: 1rem;
     text-align: center;
   }
   
   .legal-cta-inner {
     max-width: var(--max-width);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
   }
   
   .legal-cta-title {
     font-family: var(--font-bebas);
     font-size: 2rem;
     color: var(--color-bg-dark);
     letter-spacing: 0.02em;
     line-height: 1;
     text-transform: uppercase;
   }
   
   .legal-cta-btn {
     width: 100%;
     background-color: var(--color-bg-dark);
     color: #fff;
     padding: 1.125rem 2rem;
     border-radius: var(--radius);
     font-weight: 900;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     border: none;
     cursor: pointer;
     box-shadow: 0 20px 40px rgba(0,0,0,0.4);
     transition: transform 0.2s;
   }
   
   .legal-cta-btn:hover  { transform: scale(1.03); }
   .legal-cta-btn:active { transform: scale(0.97); }
   
   /* ── Legal Footer ──────────────────────────────────── */
   .legal-footer {
     background-color: var(--color-bg-dark);
     border-top: 1px solid rgba(255,255,255,0.05);
     padding: 4rem 1.5rem 2.5rem;
   }
   
   .legal-footer-inner { max-width: var(--max-width); margin: 0 auto; }
   
   /* Mobile: centered stacked */
   .legal-footer-grid {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 2.5rem;
     margin-bottom: 3rem;
   }
   
   .legal-footer-brand {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
   }
   
   .legal-footer-tagline {
     color: #64748b;
     font-size: 0.875rem;
     line-height: 1.6;
     max-width: 18rem;
   }
   
   .legal-footer-social {
     display: flex;
     gap: 0.75rem;
     justify-content: center;
   }
   
   .legal-footer-social-btn {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
     border: 1px solid rgba(255,255,255,0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #64748b;
     text-decoration: none;
     transition: color 0.2s, border-color 0.2s;
   }
   
   .legal-footer-social-btn:hover {
     color: var(--color-primary);
     border-color: var(--color-primary);
   }
   
   .legal-footer-social-btn .material-symbols-outlined { font-size: 1.125rem; }
   
   /* Footer columns — stacked on mobile, shown in grid tablet+ */
   .legal-footer-col { display: block; }
   
   .legal-footer-col-title {
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     color: #fff;
     margin-bottom: 1.25rem;
   }
   
   .legal-footer-links {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.875rem;
   }
   
   .legal-footer-links a {
     font-size: 0.875rem;
     color: #64748b;
     text-decoration: none;
     transition: color 0.2s;
   }
   
   .legal-footer-links a:hover { color: var(--color-primary); }
   
   .legal-footer-link--active {
     color: var(--color-primary) !important;
     font-weight: 600;
   }
   
   /* Mobile: show nav links as vertical list */
   .legal-footer-mobile-nav {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.75rem;
   }
   
   .legal-footer-mobile-nav a {
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     color: #94a3b8;
     text-decoration: none;
     transition: color 0.2s;
     padding: 0.375rem 0;
   }
   
   .legal-footer-mobile-nav a:hover,
   .legal-footer-mobile-nav a.legal-footer-link--active { color: var(--color-primary); }
   
   /* Bottom bar */
   .legal-footer-bottom {
     padding-top: 2rem;
     border-top: 1px solid rgba(255,255,255,0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.6875rem;
     color: #475569;
   }
   
   .legal-footer-bottom-right {
     display: flex;
     align-items: center;
     gap: 0.25rem;
     color: #475569;
     font-size: 0.6875rem;
   }
   
   /* =====================================================
      PRIVACY: TABLET  ≥ 768px
      ===================================================== */
   @media (min-width: 768px) {
   
     /* Warm dark background */
     body.legal-page { background-color: #23200f; }
   
     /* Hero */
     .legal-hero { background-color: #23200f; padding: 4rem 1.5rem; }
     .legal-hero-inner { align-items: center; }
     .legal-hero-title { font-size: 4rem; }
     .legal-hero-subtitle { display: none; }
   
     /* Layout */
     .legal-layout { padding: 3rem 1.5rem; }
   
     /* Article */
     .legal-article { padding: 2.5rem; }
     .legal-article-title { font-size: 1.75rem; }
     .legal-section-title { font-size: 1.0625rem; }
     .legal-sections { gap: 3rem; }
   
     /* Summary card: show in 2-col below article */
     .legal-summary-card {
       display: flex;
       gap: 2.5rem;
       align-items: start;
     }
   
     /* CTA: horizontal */
     .legal-cta { padding: 4rem 1.5rem; text-align: left; }
     .legal-cta-inner { flex-direction: row; justify-content: space-between; align-items: center; }
     .legal-cta-title { font-size: 3rem; }
     .legal-cta-btn  { width: auto; padding: 1.125rem 2.5rem; font-size: 1rem; }
   
     /* Footer: 2-col (brand + links) */
     .legal-footer { padding: 4rem 1.5rem 2.5rem; }
     .legal-footer-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       text-align: left;
       align-items: start;
       gap: 2rem;
     }
     .legal-footer-brand { align-items: flex-start; }
     .legal-footer-social { justify-content: flex-start; }
   
     /* Show 2 cols inside the right half */
     .legal-footer-cols-right {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.5rem;
     }
     .legal-footer-col { display: block; }
   
     .legal-footer-bottom { flex-direction: row; justify-content: space-between; }
   }
   
   /* =====================================================
      PRIVACY: DESKTOP  ≥ 1024px
      ===================================================== */
   @media (min-width: 1024px) {
   
     /* Hero */
     .legal-hero { padding: 5rem 2.5rem; }
     .legal-hero-inner { align-items: flex-start; text-align: left; }
     .legal-hero-title { font-size: 5rem; }
   
     /* Layout: 2-col (article + sidebar) */
     .legal-layout {
       display: grid;
       grid-template-columns: 1fr 360px;
       grid-template-rows: auto auto;
       column-gap: 3rem;
       row-gap: 0;
       padding: 4rem 2.5rem;
       align-items: start;
     }
   
     /* Article spans full first row left col */
     .legal-article {
       grid-column: 1;
       grid-row: 1;
       padding: 2.5rem;
     }
   
     /* Summary card hidden — sidebar replaces it */
     .legal-summary-card { display: none; }
   
     /* Sidebar: visible, sticky */
     .legal-sidebar {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
       grid-column: 2;
       grid-row: 1;
       position: sticky;
       top: 7rem;         /* below sticky header */
     }
   
     .legal-article-title { font-size: 2rem; }
     .legal-section-title { font-size: 1.125rem; }
     .legal-body { font-size: 1rem; }
   
     /* CTA */
     .legal-cta { padding: 5rem 2.5rem; }
     .legal-cta-title { font-size: 3.5rem; }
   
     /* Footer: 4-col grid */
     .legal-footer { padding: 5rem 2.5rem 2.5rem; }
     .legal-footer-grid {
       grid-template-columns: 1.5fr 1fr 1fr 1fr;
       gap: 3rem;
       margin-bottom: 4rem;
     }
   
     .legal-footer-cols-right { display: contents; }
   }