/* ═══════════════════════════════════════════════════════════════════════════
   casting-and-acting — ca.css
   Capa de diseño propia del proyecto.
   Carga DESPUÉS de style.css (Bootstrap + theme base).
   
   Estructura:
     1. Design tokens (variables CSS)
     2. Componentes y overrides propios
   
   NO editar style.css — ese archivo es el tema base y no se toca.
   TODO lo nuevo va acá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CASTING AND ACTING — DESIGN TOKENS (fuente de verdad)
   Sprint 32 — Sistema de diseño unificado público + admin
   ═══════════════════════════════════════════════════════════════════════════

   JERARQUÍA DE TOKENS
   ──────────────────
   1. Primitivos   → valores base (colores, tipografías, escalas)
   2. Semánticos   → referencias con significado (--ca-bg, --ca-ink…)
   3. Componentes  → tokens de componentes específicos

   USO
   ───
   Cargar SIEMPRE como primer CSS, antes de style.css y app.css.
   Disponible en público (head.php) y admin (layout.php).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PRIMITIVOS ──────────────────────────────────────────────────────── */
:root {

  /* Paleta de color primitiva */
  --_brown-950: #0d0906;
  --_brown-900: #160d08;
  --_brown-800: #1a0f09;
  --_brown-700: #231410;
  --_brown-600: #2e1a11;
  --_brown-500: #4a2b1a;
  --_brown-400: #6c4027;
  --_brown-300: #9b6040;
  --_brown-200: #c49070;
  --_brown-100: #e8d4c0;
  --_brown-50:  #fef2d8;
  --_brown-25:  #fef9f2;

  --_cream-dark: #f0ede7;
  --_cream-mid:  #e8e0d4;
  --_cream-soft: #d8ccbc;

  --_orange-600: #b84015;
  --_orange-500: #d4531e;
  --_orange-400: #ec6426;
  --_orange-300: #f07840;
  --_orange-200: #f5a070;
  --_orange-100: #fad5c0;

  --_yellow-500: #e09010;
  --_yellow-400: #f8a91f;
  --_yellow-300: #fbbe55;
  --_yellow-100: #fff0c0;

  --_green-500:  #16a34a;
  --_green-400:  #22c55e;
  --_green-200:  #bbf7d0;

  --_red-500:    #dc2626;
  --_red-400:    #ef4444;
  --_red-100:    #fee2e2;

  --_blue-500:   #2563eb;
  --_blue-400:   #3b82f6;
  --_blue-100:   #dbeafe;

  --_white: #ffffff;
  --_white-rgb: 255,255,255;
  --_ink-rgb:   26,15,9;
  --_cream-rgb: 254,242,216;
  --_brown-rgb: 108,64,39;
  --_accent-rgb:236,100,38;
  --_yellow-rgb:248,169,31;
  --_lime-rgb:  184,255,0;
  --_black-rgb: 7,7,7;
  --_black: #000000;

  /* ─── 2. TOKENS SEMÁNTICOS: MODO CLARO (default) ───────────────────────── */

  /* Fondos */
  --ca-bg:       #fef2d8;              /* cream — matches hero & page sections */
  --ca-bg-2:     var(--_brown-50);     /* fondo secundario / section alt */
  --ca-surface:  var(--_white);        /* cards, modals, inputs */
  --ca-surface-2: #f5ede2;            /* card hover / raised */
  --ca-overlay:  rgba(13,9,6,.55);    /* overlay de modals */

  /* Bordes */
  --ca-border:   rgba(108,64,39,.12);
  --ca-border-2: rgba(108,64,39,.20);
  --ca-border-strong: rgba(108,64,39,.35);

  /* Tipografía */
  --ca-ink:      var(--_brown-800);    /* texto principal */
  --ca-ink-2:    var(--_brown-400);    /* texto secundario */
  --ca-ink-3:    rgba(26,15,9,.40);   /* texto muted / placeholders */
  --ca-ink-4:    rgba(26,15,9,.22);   /* texto muy sutil */

  /* Marca */
  --ca-accent:        var(--_orange-400);  /* CTA, active, links */
  --ca-accent-hover:  var(--_orange-500);
  --ca-accent-subtle: rgba(236,100,38,.10);
  --ca-accent-2:      var(--_yellow-400);  /* badges, highlights */
  --ca-accent-2-subtle: rgba(248,169,31,.15);
  --ca-brown:         var(--_brown-400);
  --ca-brown-md:      var(--_brown-300);
  --ca-cream:         var(--_brown-50);

  /* Estados */
  --ca-success:      var(--_green-500);
  --ca-success-bg:   var(--_green-200);
  --ca-error:        var(--_red-500);
  --ca-error-bg:     var(--_red-100);
  --ca-warning:      var(--_yellow-400);
  --ca-warning-bg:   var(--_yellow-100);
  --ca-info:         var(--_blue-500);
  --ca-info-bg:      var(--_blue-100);

  /* Sombras */
  --ca-shadow-sm:  0 1px 3px rgba(26,15,9,.08), 0 1px 2px rgba(26,15,9,.06);
  --ca-shadow-md:  0 4px 12px rgba(26,15,9,.10), 0 2px 6px rgba(26,15,9,.06);
  --ca-shadow-lg:  0 12px 32px rgba(26,15,9,.14), 0 4px 12px rgba(26,15,9,.08);
  --ca-shadow-xl:  0 24px 64px rgba(26,15,9,.18), 0 8px 24px rgba(26,15,9,.10);

  /* Focus ring */
  --ca-focus-ring: 0 0 0 3px rgba(236,100,38,.30);

  /* ─── TIPOGRAFÍA ──────────────────────────────────────────────────────── */

  /* Familias — sistema de 3 */
  --ca-font-display: "Inter", system-ui, sans-serif;      /* heroes, números grandes, títulos impactantes */
  --ca-font-body:    "Inter", system-ui, sans-serif; /* UI, cuerpo, labels */
  --ca-font-serif:   "Inter", system-ui, sans-serif;  /* pullquotes, editorial */
  --ca-font-mono:    ui-monospace, "Fira Code", "Consolas", monospace; /* código */

  /* Variables de transición heredadas (compatibilidad) */
  --font_thunder:              var(--ca-font-display);
  --font_bdogrotesk:           var(--ca-font-body);
  --font_timesnow:             var(--ca-font-serif);
  --font_sequelsansromanbody:  var(--ca-font-body);   /* → remapear a BDOGrotesk */
  --font_sequelsansmediumbody: var(--ca-font-body);
  --font_tartuffo:             var(--ca-font-serif);  /* → remapear a TimesNow */
  --font_tartuffotrial:        var(--ca-font-serif);
  --font_dmsans:               var(--ca-font-body);
  --font_instrumentsans:       var(--ca-font-body);

  /* Escala tipográfica */
  --ca-text-xs:    0.6875rem;  /* 11px */
  --ca-text-sm:    0.8125rem;  /* 13px */
  --ca-text-base:  0.9375rem;  /* 15px — cuerpo */
  --ca-text-md:    1.0625rem;  /* 17px */
  --ca-text-lg:    1.25rem;    /* 20px */
  --ca-text-xl:    1.5rem;     /* 24px */
  --ca-text-2xl:   2rem;       /* 32px */
  --ca-text-3xl:   3rem;       /* 48px */
  --ca-text-4xl:   4.5rem;     /* 72px */
  --ca-text-5xl:   6.25rem;    /* 100px */

  /* Line heights */
  --ca-leading-tight:  1.15;
  --ca-leading-snug:   1.30;
  --ca-leading-normal: 1.55;
  --ca-leading-loose:  1.75;

  /* Letter spacing */
  --ca-tracking-tight:  -0.03em;
  --ca-tracking-normal:  0;
  --ca-tracking-wide:    0.04em;
  --ca-tracking-wider:   0.08em;
  --ca-tracking-widest:  0.14em;

  /* ─── ESPACIADO (base 8px) ────────────────────────────────────────────── */
  --ca-space-1:  0.25rem;   /* 4px  */
  --ca-space-2:  0.5rem;    /* 8px  */
  --ca-space-3:  0.75rem;   /* 12px */
  --ca-space-4:  1rem;      /* 16px */
  --ca-space-5:  1.5rem;    /* 24px */
  --ca-space-6:  2rem;      /* 32px */
  --ca-space-7:  3rem;      /* 48px */
  --ca-space-8:  4rem;      /* 64px */
  --ca-space-9:  6rem;      /* 96px */
  --ca-space-10: 8rem;      /* 128px */

  /* ─── BORDER RADIUS ───────────────────────────────────────────────────── */
  --ca-radius-xs:   4px;
  --ca-radius-sm:   6px;
  --ca-radius-md:   10px;
  --ca-radius-lg:   16px;
  --ca-radius-xl:   24px;
  --ca-radius-2xl:  32px;
  --ca-radius-full: 9999px;

  /* ─── Z-INDEX STACK ───────────────────────────────────────────────────── */
  --ca-z-below:    -1;
  --ca-z-base:      0;
  --ca-z-raise:     1;
  --ca-z-dropdown:  100;
  --ca-z-sticky:    200;
  --ca-z-overlay:   300;
  --ca-z-modal:     400;
  --ca-z-toast:     500;
  --ca-z-tooltip:   600;

  /* ─── TRANSICIONES ───────────────────────────────────────────────────── */
  --ca-transition-fast:   100ms ease;
  --ca-transition-base:   200ms ease;
  --ca-transition-slow:   350ms ease;
  --ca-transition-spring: 400ms cubic-bezier(.34,1.56,.64,1);

  /* ─── LAYOUT ─────────────────────────────────────────────────────────── */
  /* ── RGB channels para uso en rgba() ── */
  --_ink-rgb:    26,15,9;
  --_cream-rgb:  254,242,216;
  --_white-rgb:  255,255,255;
  --_brown-rgb:  108,64,39;
  --_accent-rgb: 236,100,38;
  --_yellow-rgb: 248,169,31;
  --ca-container:     1280px;
  --ca-container-sm:  860px;
  --ca-header-h:      72px;

  /* ─── BACKWARD COMPAT: variables legacy → nuevos tokens ─────────────── */
  --primary:    var(--ca-ink);
  --secondary:  var(--ca-ink-2);
  --border:     var(--ca-border);
  --bg:         var(--ca-bg);
  --theme:      var(--ca-accent);
  --action:     var(--ca-accent);
  --black:      var(--ca-ink);
  --black-2:    var(--ca-ink-2);
  --white:      var(--ca-surface);
  --white-2:    var(--ca-ink-3);
}

/* ─── 2. TOKENS SEMÁNTICOS: MODO OSCURO ─────────────────────────────────── */
html.ca-dark {

  /* Tipografía — override de colores marrones para legibilidad */
  --ca-brown:    #f8a91f;   /* marrón → dorado en dark para legibilidad */
  --ca-brown-md: #e8943a;

  /* Fondos */
  --ca-bg:        var(--_brown-950);
  --ca-bg-2:      var(--_brown-900);
  --ca-surface:   var(--_brown-700);
  --ca-surface-2: var(--_brown-600);
  --ca-overlay:   rgba(0,0,0,.70);

  /* Bordes */
  --ca-border:        rgba(240,220,200,.09);
  --ca-border-2:      rgba(240,220,200,.15);
  --ca-border-strong: rgba(240,220,200,.28);

  /* Tipografía */
  --ca-ink:   var(--_cream-dark);
  --ca-ink-2: rgba(240,220,200,.60);
  --ca-ink-3: rgba(240,220,200,.35);
  --ca-ink-4: rgba(240,220,200,.18);

  /* Sombras (oscuro) */
  --ca-shadow-sm:  0 1px 3px rgba(0,0,0,.30);
  --ca-shadow-md:  0 4px 12px rgba(0,0,0,.40);
  --ca-shadow-lg:  0 12px 32px rgba(0,0,0,.55);
  --ca-shadow-xl:  0 24px 64px rgba(0,0,0,.70);

  /* Focus (oscuro) */
  --ca-focus-ring: 0 0 0 3px rgba(236,100,38,.40);

  /* States (oscuro) */
  --ca-accent-subtle:   rgba(236,100,38,.15);
  --ca-accent-2-subtle: rgba(248,169,31,.18);
  --ca-success-bg:   rgba(34,197,94,.15);
  --ca-error-bg:     rgba(239,68,68,.15);
  --ca-warning-bg:   rgba(248,169,31,.15);
  --ca-info-bg:      rgba(59,130,246,.15);

  /* Backward compat dark */
  --ca-cream:  var(--_brown-900);
  --ca-card-bg: var(--_brown-700);

  color-scheme: dark;
}

/* ─── 3. TOKENS ADMIN — mismo sistema, contexto interno ─────────────────── */
/* El admin es siempre dark. Hereda los tokens dark y agrega los propios. */
.admin-body,
[data-context="admin"] {
  --ca-bg:        #0b0d10;
  --ca-bg-2:      #0f1115;
  --ca-surface:   #161a1f;
  --ca-surface-2: #1d2128;
  --ca-border:        rgba(var(--_white-rgb),.07);
  --ca-border-2:      rgba(var(--_white-rgb),.12);
  --ca-border-strong: rgba(var(--_white-rgb),.22);
  --ca-ink:   #e8edf2;
  --ca-ink-2: rgba(232,237,242,.58);
  --ca-ink-3: rgba(232,237,242,.32);
  --ca-ink-4: rgba(232,237,242,.16);
  --ca-accent:        var(--ca-accent);   /* mismo naranja que el público */
  --ca-accent-hover:  var(--ca-accent-hover);
  --ca-accent-subtle: rgba(var(--_accent-rgb),.14);
  --ca-shadow-sm: 0 1px 3px rgba(0,0,0,.40);
  --ca-shadow-md: 0 4px 12px rgba(0,0,0,.55);
  --ca-shadow-lg: 0 12px 32px rgba(0,0,0,.70);
  color-scheme: dark;
}

/* ─── 4. BASE RESET ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

/* Headings → Thunder */
h1, h2, h3, h4, h5, h6,
.ca-heading {
  font-family: var(--ca-font-display);
  font-weight: 700;
  line-height: var(--ca-leading-tight);
  letter-spacing: var(--ca-tracking-tight);
  color: var(--ca-ink);
}

h1 { font-size: var(--ca-text-3xl); }
h2 { font-size: var(--ca-text-2xl); }
h3 { font-size: var(--ca-text-xl); }
h4 { font-size: var(--ca-text-lg); }
h5 { font-size: var(--ca-text-md); }
h6 { font-size: var(--ca-text-base); }

/* Body copy */
p, li, td, th, label, input, textarea, select, button {
  font-family: var(--ca-font-body);
}

/* Code */
code, pre, kbd, samp {
  font-family: var(--ca-font-mono);
  font-size: 0.875em;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ca-transition-base);
}

/* Focus visible — el ring (box-shadow) sigue el border-radius propio del
   elemento; no forzamos radius para no cuadrar pills (99px) ni toggles redondos. */
:focus-visible {
  outline: none;
  box-shadow: var(--ca-focus-ring);
}

/* Smooth image rendering */
img, video, svg {
  display: block;
  max-width: 100%;
}

/* ─── 5. UTILITY CLASSES (design-system) ─────────────────────────────────── */

/* Tipografía */
.ca-font-display { font-family: var(--ca-font-display); }
.ca-font-body    { font-family: var(--ca-font-body)   ; }
.ca-font-serif   { font-family: var(--ca-font-serif)  ; }
.ca-font-mono    { font-family: var(--ca-font-mono)   ; }

/* Colores semánticos */
.ca-text-accent  { color: var(--ca-accent); }
.ca-text-muted   { color: var(--ca-ink-2); }
.ca-text-subtle  { color: var(--ca-ink-3); }
.ca-text-success { color: var(--ca-success); }
.ca-text-error   { color: var(--ca-error); }
.ca-text-warning { color: var(--ca-warning); }

.ca-bg-surface   { background: var(--ca-surface); }
.ca-bg-surface-2 { background: var(--ca-surface-2); }
.ca-bg-accent    { background: var(--ca-accent); color: var(--_white); }

/* Badges / chips */
.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  padding: 2px var(--ca-space-2);
  border-radius: var(--ca-radius-full);
  font-size: var(--ca-text-xs);
  font-weight: 700;
  letter-spacing: var(--ca-tracking-wide);
  text-transform: uppercase;
  line-height: 1.6;
}
.ca-badge--accent  { background: var(--ca-accent-subtle);   color: var(--ca-accent);  }
.ca-badge--yellow  { background: var(--ca-accent-2-subtle); color: var(--ca-accent-2);}
.ca-badge--success { background: var(--ca-success-bg);      color: var(--ca-success); }
.ca-badge--error   { background: var(--ca-error-bg);        color: var(--ca-error);   }
.ca-badge--muted   { background: var(--ca-border);          color: var(--ca-ink-2);   }

/* Dividers */
.ca-divider {
  border: none;
  border-top: 1px solid var(--ca-border);
  margin: var(--ca-space-5) 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   COMPONENTES
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   Casting and Acting — app.css
   Consolidado: sprint8→33 + design-fixes
   No editar manualmente — regenerar desde los sources
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── sprint8.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Casting and Acting — Sprint 8 Design System
   Mobbin header · Wise footer · Aceternity components (ported to vanilla)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S8 Variables ─────────────────────────────────────────────────────────── */
:root {
  --ca-brown:    #6c4027;
  --ca-brown2:   #4a2b1a;
  --ca-brown-md: #9b6040;
  --ca-cream:    #fef2d8;
  --ca-surface:  #fef9f2;
  --ca-accent:   #ec6426;
  --ca-yellow:   #f8a91f;
  --ca-ink:      #1a0f09;
  --ca-border:   rgba(108,64,39,.15);
  --header-h:    64px;
  --hbg-angle:   0deg;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STICKY BANNER
   ───────────────────────────────────────────────────────────────────────────── */

#ca-sticky-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: 44px;
  background: linear-gradient(90deg, var(--ca-brown2) 0%, var(--ca-brown) 50%, var(--ca-accent) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.23,1,.32,1);
  overflow: hidden;
}
#ca-sticky-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
#ca-sticky-banner.is-visible  { transform: translateY(0); }
#ca-sticky-banner.is-hiding   { transform: translateY(-100%); }

.ca-sticky-banner__text {
  font-size: 13px; font-weight: 600; color: #fff;
  letter-spacing: .3px;
}
.ca-sticky-banner__text a {
  color: var(--ca-yellow); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  margin-left: 8px;
}
.ca-sticky-banner__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(var(--_white-rgb),.7);
  cursor: pointer; padding: 6px; border-radius: 6px; line-height: 1;
  font-size: 14px; transition: color .15s, background .15s;
  z-index: 10001; /* above pill backdrop-filter stacking context */
}
.ca-sticky-banner__close:hover { color: #fff; background: rgba(var(--_white-rgb),.12); }

/* When banner is visible, push body */
body.has-banner { padding-top: 44px; }
body.has-banner .ca-header { top: 44px; }

/* ─────────────────────────────────────────────────────────────────────────────
   MOBBIN HEADER
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   HEADER v3 — Brand-warm dark, inline search pill, toggle switch
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR v4 — Premium floating design
   Cream (#fef2d8) light / warm dark (#160d08)
   Desktop: centered pill that floats above content
   Mobile: side drawer from right
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header shell ──────────────────────────────────────────────────────────── */
.ca-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: var(--ca-header-h, 64px);
  display: flex; align-items: center;
  /* crisp transparent base — content shows through */
  background: transparent;
  transition: transform .35s cubic-bezier(.23,1,.32,1);
  pointer-events: none; /* clicks pass through transparent bar */
}
.ca-header__inner {
  pointer-events: auto; /* re-enable on the actual bar */
  width: calc(100% - 48px); max-width: 1180px; margin: 0 auto;
  padding: 0 10px 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  /* The "floating pill" — crisp warm-white so it lifts off the cream page */
  height: 60px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 18px;
  border: 1px solid rgba(26,15,9,.06);
  box-shadow:
    0 1px 2px rgba(26,15,9,.04),
    0 8px 24px -8px rgba(26,15,9,.12),
    0 1px 0 rgba(255,255,255,.9) inset;
  transition: box-shadow .3s cubic-bezier(.23,1,.32,1), background .3s ease, height .3s ease;
  margin-top: 14px; /* float off top edge */
}
.ca-header.is-scrolled .ca-header__inner {
  height: 54px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 1px 2px rgba(26,15,9,.05),
    0 12px 36px -10px rgba(26,15,9,.2),
    0 1px 0 rgba(255,255,255,.95) inset;
}
.ca-header.is-hidden { transform: translateY(-130%); }

/* Dark mode header */
html.ca-dark .ca-header__inner {
  background: rgba(28,17,11,.72);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,.2),
    0 8px 24px -8px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.05) inset;
}
html.ca-dark .ca-header.is-scrolled .ca-header__inner {
  background: rgba(28,17,11,.9);
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 12px 36px -10px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.ca-header__logo {
  display: flex; align-items: center; text-decoration: none;
  flex-shrink: 0;
}
.ca-header__logo img {
  height: 34px; width: auto; display: block;
  transition: opacity .2s, transform .2s;
}
.ca-header__logo:hover img { opacity: .82; transform: scale(1.02); }
.ca-header__logo-text {
  font-size: 18px; font-weight: 900;
  color: var(--ca-accent); letter-spacing: -.02em;
}

/* ── Desktop Nav ───────────────────────────────────────────────────────────── */
.ca-header__nav {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 4px; padding: 0; margin-left: 18px;
}
@media (max-width: 960px) { .ca-header__nav { display: none; } }

.ca-header__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; height: 38px; border-radius: 11px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ca-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color .18s ease, background .18s ease;
  border: none; background: none; cursor: pointer; font-family: inherit;
}
.ca-header__link:hover { color: var(--ca-ink); background: rgba(26,15,9,.05); }
/* Sección activa: nombre en naranja y negrita (sin recuadro ni underline) */
.ca-header__link.is-active { color: var(--ca-accent); background: transparent; font-weight: 800; }
.ca-header__link.is-active::after { display: none; }
.ca-header__link--primary {
  font-weight: 700; color: var(--ca-accent);
  background: rgba(236,100,38,.09);
}
.ca-header__link--primary:hover { background: rgba(236,100,38,.16); color: var(--ca-accent); }
.ca-header__link--primary.is-active { background: rgba(236,100,38,.16); color: var(--ca-accent); }
.ca-header__link--primary.is-active::after { display: none; }

/* Castings → botón outline con borde naranja (mismo molde que "Iniciar sesión") */
.ca-header__link--cta {
  border: 1.5px solid var(--ca-accent);
  color: var(--ca-accent);
  font-weight: 700;
  padding: 0 14px;
}
.ca-header__link--cta:hover,
.ca-header__link--cta.is-active {
  background: rgba(236,100,38,.08);
  color: var(--ca-accent);
}

/* Dark mode nav links */
html.ca-dark .ca-header__link { color: rgba(240,220,200,.62); }
html.ca-dark .ca-header__link:hover { color: rgba(240,220,200,.95); background: rgba(255,255,255,.06); }
html.ca-dark .ca-header__link.is-active { color: rgba(240,220,200,.95); background: rgba(255,255,255,.07); }
html.ca-dark .ca-header__link--primary { color: var(--ca-accent); background: rgba(236,100,38,.12); }
html.ca-dark .ca-header__link--primary:hover { background: rgba(236,100,38,.2); }

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.ca-header__dropdown { position: relative; }
.ca-header__dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; height: 38px; border-radius: 11px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ca-ink-2);
  background: none; border: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.ca-header__dropdown-trigger:hover { color: var(--ca-ink); background: rgba(26,15,9,.05); }
.ca-header__dropdown-trigger svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1); flex-shrink: 0; opacity: .5; }
.ca-header__dropdown-trigger[aria-expanded="true"] {
  color: var(--ca-ink); background: rgba(26,15,9,.07);
}
.ca-header__dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); opacity: .8; }
html.ca-dark .ca-header__dropdown-trigger { color: rgba(240,220,200,.62); }
html.ca-dark .ca-header__dropdown-trigger:hover { color: rgba(240,220,200,.9); background: rgba(255,255,255,.06); }
html.ca-dark .ca-header__dropdown-trigger[aria-expanded="true"] { color: rgba(240,220,200,.92); background: rgba(255,255,255,.08); }
html.ca-dark .ca-header__dropdown-trigger svg { opacity: .4; }

.ca-header__dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: rgba(255,251,243,.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(26,15,9,.08);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(26,15,9,.14), 0 2px 8px rgba(26,15,9,.06);
  padding: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
}
.ca-header__dropdown-menu.is-open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
html.ca-dark .ca-header__dropdown-menu {
  background: rgba(28,16,9,.97);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}

.ca-header__dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ca-ink);
  transition: background .12s;
}
.ca-header__dropdown-item:hover { background: rgba(26,15,9,.06); }
html.ca-dark .ca-header__dropdown-item { color: rgba(240,220,200,.85); }
html.ca-dark .ca-header__dropdown-item:hover { background: rgba(255,255,255,.07); }

.ca-header__dropdown-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(26,15,9,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
html.ca-dark .ca-header__dropdown-icon { background: rgba(255,255,255,.07); }

.ca-header__dropdown-item strong {
  display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2;
}
.ca-header__dropdown-item small {
  display: block; font-size: 11.5px; color: rgba(26,15,9,.45); margin-top: 2px; line-height: 1.3;
}
html.ca-dark .ca-header__dropdown-item small { color: rgba(240,220,200,.4); }

/* ── Right slot ────────────────────────────────────────────────────────────── */
.ca-header__right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 960px) { .ca-header__right { display: none !important; } }

/* ── Inline search ─────────────────────────────────────────────────────────── */
.ca-header__search-wrap { position: relative; display: flex; align-items: center; }
.ca-header__search-inline {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px;
  background: var(--ca-surface);
  border-radius: 11px;
  border: 1.5px solid var(--ca-border-2);
  transition: border-color .18s, box-shadow .18s;
  width: 152px;
}
.ca-header__search-inline:focus-within {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 3px rgba(236,100,38,.12);
}
html.ca-dark .ca-header__search-inline { background: transparent; border-color: transparent; }
html.ca-dark .ca-header__search-inline:focus-within { border-color: var(--ca-accent); }
.ca-header__search-inline svg { flex-shrink: 0; color: rgba(26,15,9,.35); transition: color .18s; }
html.ca-dark .ca-header__search-inline svg { color: rgba(240,220,200,.35); }
.ca-header__search-inline:focus-within svg { color: rgba(26,15,9,.55); }
html.ca-dark .ca-header__search-inline:focus-within svg { color: rgba(240,220,200,.6); }

.ca-header__search-inline input[type="search"] {
  flex: 1; min-width: 0; border: none; background: none;
  box-shadow: none; height: auto;
  font-size: 13px; font-family: inherit; color: var(--ca-ink);
  outline: none; padding: 0;
}
.ca-header__search-inline input[type="search"]:focus {
  border: none; box-shadow: none;
}
.ca-header__search-inline input::placeholder { color: rgba(26,15,9,.35); }
html.ca-dark .ca-header__search-inline input { color: rgba(240,220,200,.85); }
html.ca-dark .ca-header__search-inline input::placeholder { color: rgba(240,220,200,.3); }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
@media (max-width: 960px) { .ca-header__search-wrap { display: none; } }

/* Search dropdown results */
.ca-header__search-results {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 300px;
  background: rgba(255,251,243,.98); backdrop-filter: blur(20px);
  border: 1px solid rgba(26,15,9,.08); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(26,15,9,.14);
  overflow: hidden; z-index: 200;
}
.ca-header__search-results.has-results { display: block; }
html.ca-dark .ca-header__search-results {
  background: rgba(28,16,9,.97);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.ca-header__search-results .ca-search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: var(--ca-ink);
  border-bottom: 1px solid rgba(26,15,9,.05);
  transition: background .12s;
}
.ca-header__search-results .ca-search-result:last-child { border-bottom: none; }
.ca-header__search-results .ca-search-result:hover { background: rgba(26,15,9,.04); }
html.ca-dark .ca-header__search-results .ca-search-result { color: rgba(240,220,200,.85); border-color: rgba(255,255,255,.05); }
html.ca-dark .ca-header__search-results .ca-search-result:hover { background: rgba(255,255,255,.05); }
.ca-header__search-results .ca-search-result__cat {
  font-size: 10px; font-weight: 700; color: var(--ca-accent);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
}
.ca-header__search-results .ca-search-result__title {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.ca-header__search-results .ca-search-result__excerpt { display: none; }
.ca-header__search-no-results {
  padding: 16px 14px; font-size: 13px; color: rgba(26,15,9,.45);
}
html.ca-dark .ca-header__search-no-results { color: rgba(240,220,200,.4); }

/* ── Dark mode toggle (icon button) ───────────────────────────────────────── */
.ca-dark-toggle {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(26,15,9,.05);
  border: none; padding: 0;
  cursor: pointer; flex-shrink: 0;
  color: var(--ca-ink-2);
  transition: background .18s ease, color .18s ease;
}
.ca-dark-toggle:hover { background: rgba(26,15,9,.1); color: var(--ca-ink); }
html.ca-dark .ca-dark-toggle { background: rgba(255,255,255,.06); color: rgba(240,220,200,.7); }
html.ca-dark .ca-dark-toggle:hover { background: rgba(255,255,255,.12); color: rgba(240,220,200,.95); }

/* Single icon shown at a time, with a rotate/scale crossfade */
.ca-dark-toggle__icon {
  position: absolute; display: block;
  transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Light mode → moon visible (click = ir a oscuro) */
html:not(.ca-dark) .ca-dark-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
html:not(.ca-dark) .ca-dark-toggle__icon--sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
/* Dark mode → sun visible (click = ir a claro) */
html.ca-dark .ca-dark-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html.ca-dark .ca-dark-toggle__icon--sun  { opacity: 1; transform: rotate(0) scale(1); color: var(--ca-accent-2, #f8a91f); }

/* ── Nav live badge ────────────────────────────────────────────────────────── */
.ca-nav-live-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ca-accent); color: white;
  font-size: 10px; font-weight: 800; border-radius: 99px;
  line-height: 1;
}

/* ── XP chip ───────────────────────────────────────────────────────────────── */
.ca-header__xp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px; border-radius: 99px;
  background: rgba(248,169,31,.1); border: 1.5px solid rgba(248,169,31,.2);
  text-decoration: none;
  transition: background .15s;
}
.ca-header__xp-chip:hover { background: rgba(248,169,31,.18); }
.ca-header__xp-icon { font-size: 14px; line-height: 1; }
.ca-header__xp-pts { font-size: 12px; font-weight: 700; color: #b8820a; }
html.ca-dark .ca-header__xp-pts { color: #f8a91f; }

/* ── Auth elements ─────────────────────────────────────────────────────────── */
.ca-header__reader {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 6px; border-radius: 99px;
  background: rgba(26,15,9,.07); border: 1.5px solid rgba(26,15,9,.1);
  text-decoration: none; color: var(--ca-ink);
  font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.ca-header__reader:hover { background: rgba(26,15,9,.12); }
html.ca-dark .ca-header__reader { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); color: rgba(240,220,200,.85); }
html.ca-dark .ca-header__reader:hover { background: rgba(255,255,255,.12); }

.ca-header__reader-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ca-accent); color: white;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ca-reader-name-label { font-size: 12.5px; }

.ca-header__cta {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 18px; border-radius: 11px;
  background: var(--ca-accent); color: white;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
  transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(236,100,38,.28), 0 1px 0 rgba(255,255,255,.25) inset;
}
.ca-header__cta:hover {
  background: var(--ca-accent-hover, #d4531e); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(236,100,38,.38), 0 1px 0 rgba(255,255,255,.25) inset;
}
.ca-header__cta:active { transform: translateY(0); }

/* Botón secundario (outline) — "Iniciar sesión" al lado del CTA "Registrate" */
.ca-header__ghost {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 14px; border-radius: 11px;
  background: transparent; color: var(--ca-ink-2);
  border: 1.5px solid rgba(26,15,9,.16);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.ca-header__ghost:hover {
  color: var(--ca-ink); background: rgba(26,15,9,.05);
  border-color: rgba(26,15,9,.28);
}

/* ── Mobile-only "Castings" quick CTA (oculto en desktop; el nav ya lo tiene) ── */
.ca-header__mobcast {
  display: none; align-items: center; gap: 6px;
  height: 36px; padding: 0 15px; border-radius: 11px;
  background: var(--ca-accent); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(236,100,38,.28), 0 1px 0 rgba(255,255,255,.25) inset;
  transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ca-header__mobcast:active { transform: scale(.96); }

/* ── Mobile hamburger FAB ──────────────────────────────────────────────────── */
.ca-header__toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(26,15,9,.08); border: none;
  cursor: pointer; color: var(--ca-ink); transition: background .15s;
}
.ca-header__toggle:hover { background: rgba(26,15,9,.14); }
@media (max-width: 960px) { .ca-header__toggle { display: flex; } }

/* Desktop: hide FAB, show nav */
@media (min-width: 961px) {
  #ca-fab-toggle { display: none !important; }
  .ca-header__toggle { display: none !important; }
  .ca-header__nav    { display: flex !important; }
  .ca-header__right  { display: flex !important; }
}

/* Mobile: inner grid adjusts */
@media (max-width: 960px) {
  .ca-header__nav    { display: none !important; }
  .ca-header__right  { display: none !important; }
  .ca-header__inner {
    grid-template-columns: 1fr auto;
    width: calc(100% - 24px);
    padding: 0 10px 0 16px;
    margin-top: 10px; /* slightly less on mobile */
    border-radius: 15px;
  }
}

/* Push body content below the floating fixed header.
   El header flota (~74px de footprint); este spacer separa el contenido
   de TODAS las páginas para que no quede pegado debajo del pill. */
.ca-header-spacer { height: clamp(40px, 5vw, 56px); }
@media (max-width: 960px) { .ca-header-spacer { height: clamp(28px, 6vw, 40px); } }

/* ─────────────────────────────────────────────────────────────────────────────
   WISE FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.ca-footer {
  /* Footer siempre oscuro — token propio, independiente de --ca-ink */
  background: var(--ca-footer-bg, #1a0f09);
  color: rgba(254,242,216,.7);
  font-size: 14px;
}

/* Top band: newsletter */
.ca-footer__top {
  border-bottom: 1px solid rgba(var(--_cream-rgb),.1);
  padding: 56px 0;
}
.ca-footer__top-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 768px) { .ca-footer__top-inner { grid-template-columns: 1fr; gap: 28px; } }

.ca-footer__nl-head { }
.ca-footer__nl-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ca-yellow); margin-bottom: 10px;
}
.ca-footer__nl-title {
  font-size: clamp(20px,3vw,30px); font-weight: 900; line-height: 1.25;
  color: var(--ca-cream);
  font-family: var(--ca-font-display), sans-serif;
  margin: 0 0 8px;
}
.ca-footer__nl-sub { font-size: 14px; color: rgba(var(--_cream-rgb),.5); margin: 0; }

.ca-footer__nl-form { display: flex; flex-direction: column; gap: 10px; }
.ca-footer__nl-row {
  display: flex; gap: 8px;
}
.ca-footer__nl-input {
  flex: 1; height: 46px; padding: 0 16px;
  background: rgba(254,242,216,.08);
  border: 1.5px solid rgba(254,242,216,.18);
  border-radius: 12px; color: rgba(254,242,216,.92);
  font-size: 14px; outline: none;
  transition: border-color .2s, background .2s;
}
.ca-footer__nl-input:-webkit-autofill,
.ca-footer__nl-input:-webkit-autofill:hover,
.ca-footer__nl-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a0f09 inset !important;
  -webkit-text-fill-color: rgba(254,242,216,.9) !important;
  caret-color: var(--ca-cream);
}
.ca-footer__nl-input::placeholder { color: rgba(254,242,216,.45) !important; }
.ca-footer__nl-input:focus {
  border-color: rgba(254,242,216,.55) !important;
  background: rgba(255,255,255,.1) !important;
  outline: none;
}
.ca-footer__nl-btn {
  height: 46px; padding: 0 22px;
  background: var(--ca-accent); color: white;
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background .2s, transform .15s;
}
.ca-footer__nl-btn:hover { background: var(--ca-yellow); transform: translateY(-1px); }
.ca-footer__nl-msg { font-size: 12.5px; padding-left: 4px; }
.ca-footer__nl-msg.is-ok  { color: var(--_green-400); }
.ca-footer__nl-msg.is-err { color: #ff7262; }

/* Main grid */
.ca-footer__grid {
  max-width: 1280px; margin: 0 auto; padding: 56px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) { .ca-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ca-footer__grid { grid-template-columns: 1fr; } }

/* Brand col */
.ca-footer__brand {}
.ca-footer__logo {
  display: inline-block; margin-bottom: 16px;
}
.ca-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1) opacity(.85); }
.ca-footer__brand-desc {
  font-size: 14px; line-height: 1.65;
  color: rgba(var(--_cream-rgb),.45); margin: 0 0 20px;
  max-width: 280px;
}
.ca-footer__socials { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(var(--_cream-rgb),.08);
  border: 1px solid rgba(var(--_cream-rgb),.1);
  border-radius: 10px; color: rgba(var(--_cream-rgb),.6);
  text-decoration: none; font-size: 15px;
  transition: background .2s, color .2s, border-color .2s;
}
.ca-footer__social:hover {
  background: rgba(var(--_cream-rgb),.14);
  color: var(--ca-cream);
  border-color: rgba(var(--_cream-rgb),.25);
}

/* Link columns */
.ca-footer__col {}
.ca-footer__col-title {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ca-cream); margin: 0 0 16px;
}
.ca-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ca-footer__col a {
  color: rgba(var(--_cream-rgb),.5); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: color .2s;
}
.ca-footer__col a:hover { color: var(--ca-cream); }

/* Bottom bar */
.ca-footer__bottom {
  border-top: 1px solid rgba(var(--_cream-rgb),.08);
}
.ca-footer__bottom-inner {
  max-width: 1280px; margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.ca-footer__copyright { font-size: 13px; color: rgba(var(--_cream-rgb),.3); }
.ca-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ca-footer__legal a {
  font-size: 13px; color: rgba(var(--_cream-rgb),.3);
  text-decoration: none; transition: color .2s;
}
.ca-footer__legal a:hover { color: rgba(var(--_cream-rgb),.6); }

/* Castina in footer */
.ca-footer__castina {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 0;
}
.ca-footer__castina img { height: 56px; filter: drop-shadow(0 0 12px rgba(var(--_yellow-rgb),.3)); }
.ca-footer__castina-text { font-size: 12px; color: rgba(var(--_cream-rgb),.35); font-style: italic; }

/* ─────────────────────────────────────────────────────────────────────────────
   HOVER BORDER GRADIENT — CTAs
   ───────────────────────────────────────────────────────────────────────────── */

.hbg-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: 99px; cursor: pointer; border: none;
  background: var(--ca-cream); color: var(--ca-ink);
  font-size: 14.5px; font-weight: 800;
  text-decoration: none;
  isolation: isolate;
  transition: color .2s, transform .2s;
}
.hbg-btn::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--hbg-angle, 0deg),
    var(--ca-accent) 0%,
    var(--ca-yellow) 25%,
    var(--ca-brown)  50%,
    var(--ca-accent) 75%,
    var(--ca-yellow) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity .25s;
  animation: hbg-spin 3s linear infinite paused;
}
.hbg-btn:hover::before {
  opacity: 1;
  animation-play-state: running;
}
.hbg-btn::after {
  content: '';
  position: absolute; inset: 2px;
  border-radius: calc(99px - 2px);
  background: var(--ca-cream);
  z-index: -1;
  transition: background .2s;
}
.hbg-btn:hover { transform: translateY(-2px); }
.hbg-btn:hover::after { background: var(--ca-surface); }

@property --hbg-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hbg-spin { to { --hbg-angle: 360deg; } }

/* Dark variant */
.hbg-btn--dark {
  background: var(--ca-ink); color: var(--ca-cream);
}
.hbg-btn--dark::after { background: var(--ca-ink); }
.hbg-btn--dark:hover::after { background: var(--_brown-700); }

/* ─────────────────────────────────────────────────────────────────────────────
   WOBBLE CARD
   ───────────────────────────────────────────────────────────────────────────── */

.wobble-card {
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 20px; overflow: hidden;
  transition: box-shadow .3s ease;
  position: relative;
}
.wobble-card:hover {
  box-shadow: 0 30px 80px rgba(var(--_ink-rgb),.18), 0 0 0 1px var(--ca-border);
}

.wobble-card__body {
  padding: 32px; position: relative; z-index: 1;
}
.wobble-card__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(24px,2.5vw,36px); font-weight: 900; line-height: 1.15;
  color: white; margin: 0 0 12px;
}
.wobble-card__text {
  font-size: 15px; line-height: 1.65;
  color: rgba(var(--_white-rgb),.75); margin: 0;
}
.wobble-card__img {
  position: absolute; right: -20px; bottom: -20px;
  width: 55%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.35));
}

/* Grid layouts for wobble cards */
.wobble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .wobble-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wobble-grid { grid-template-columns: 1fr; } }

.wobble-grid .wobble-card--wide { grid-column: span 2; }
.wobble-grid .wobble-card--full { grid-column: span 3; }
@media (max-width: 900px) { .wobble-grid .wobble-card--wide { grid-column: span 2; } }
@media (max-width: 900px) { .wobble-grid .wobble-card--full { grid-column: span 2; } }
@media (max-width: 560px) {
  .wobble-grid .wobble-card--wide,
  .wobble-grid .wobble-card--full { grid-column: span 1; }
}

.wobble-card--brown  { background: var(--ca-brown2); }
.wobble-card--accent { background: var(--ca-accent); }
.wobble-card--ink    { background: var(--ca-ink); }
.wobble-card--yellow { background: var(--ca-yellow); }
.wobble-card--yellow .wobble-card__title,
.wobble-card--yellow .wobble-card__text { color: var(--ca-ink); }
.wobble-card--yellow .wobble-card__text { color: rgba(var(--_ink-rgb),.7); }

/* ─────────────────────────────────────────────────────────────────────────
   HOME (/) — reemplaza estilos inline del index.php (CSP-safe)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-wobble--h-lg { min-height: 300px; }
.ca-wobble--h-sm { min-height: 180px; }
.wobble-card__cta { margin-top: 20px; display: inline-flex; }
.wobble-card__cta--sm { margin-top: 16px; }
.wobble-card__img--wide { width: 42%; right: -10px; bottom: -16px; opacity: .85; }
.ca-apple-v2__header .s8-section-head { margin-bottom: 0; }
.ca-apple-v2__card-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; font-weight: 900; color: rgba(255,255,255,.1);
}
.ca-apple-v2__card-ph--castings { background: linear-gradient(135deg, var(--ca-accent) 0%, var(--ca-ink) 100%); }
.ca-apple-v2__card-ph--consejos { background: linear-gradient(135deg, var(--ca-yellow) 0%, var(--ca-ink) 100%); }
.ca-apple-v2__card-ph--guias    { background: linear-gradient(135deg, var(--ca-brown-md) 0%, var(--ca-ink) 100%); }
.map-dot-ring--d1 { animation-delay: .7s; }
.map-dot-ring--d2 { animation-delay: 1.4s; }
.map-dot-ring--d3 { animation-delay: 2s; }

/* ─────────────────────────────────────────────────────────────────────────────
   COMET CARD (3D tilt + particle trail)
   ───────────────────────────────────────────────────────────────────────────── */

.comet-card {
  border-radius: 20px; overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer; display: block; text-decoration: none;
  transition: transform .5s cubic-bezier(.23,1,.32,1),
              box-shadow .3s ease;
}
.comet-card:hover {
  box-shadow: 0 24px 60px rgba(108,64,39,.18);
}
.comet-card__inner {
  position: relative; z-index: 2;
  border-radius: inherit; overflow: hidden;
  height: 100%;
}
.comet-card__img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  filter: contrast(0.9) saturate(0.9);
  transition: filter .4s, transform .4s;
}
.comet-card:hover .comet-card__img {
  filter: contrast(1) saturate(1);
  transform: scale(1.04);
}
.comet-card__foot {
  padding: 14px 16px;
  background: #1f2121;
  display: flex; align-items: center; justify-content: space-between;
}
.comet-card__label { font-size: 11px; font-weight: 700; color: rgba(var(--_white-rgb),.7); letter-spacing: .5px; }
.comet-card__id    { font-size: 11px; color: rgba(var(--_white-rgb),.3); font-family: monospace; }

/* CometCard grid */
.comet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   APPLE CARDS CAROUSEL V2 (portrait, offset from left)
   ───────────────────────────────────────────────────────────────────────────── */

.ca-apple-v2 {
  position: relative;
  padding: 8px 0 24px;
}

.ca-apple-v2__header {
  padding: 0 0 28px 10%; /* same left offset as track */
}

.ca-apple-v2__track {
  display: flex;
  gap: 20px;
  padding-left: 10%; /* KEY: doesn't touch left edge */
  padding-right: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.ca-apple-v2__track::-webkit-scrollbar { display: none; }

.ca-apple-v2__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 20px; overflow: hidden;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  text-decoration: none; color: inherit;
  transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
  transform-origin: bottom center;
  will-change: transform, opacity;
}
.ca-apple-v2__card:hover {
  box-shadow: 0 20px 50px rgba(108,64,39,.14);
}

.ca-apple-v2__card-img {
  aspect-ratio: 3/4; overflow: hidden; background: var(--ca-cream);
  position: relative;
}
.ca-apple-v2__card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.ca-apple-v2__card:hover .ca-apple-v2__card-img img { transform: scale(1.06); }

.ca-apple-v2__card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(26,15,9,.7) 100%);
}
.ca-apple-v2__card-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ca-accent);
  color: #fff;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  white-space: nowrap;
  font-family: inherit;
}

.ca-apple-v2__card-body {
  padding: 16px 18px 20px;
}
.ca-apple-v2__card-title {
  font-size: 15px; font-weight: 800; line-height: 1.35;
  color: var(--ca-ink); margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-apple-v2__card-meta {
  font-size: 11.5px; color: var(--ca-ink-3);
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Nav arrows */
.ca-apple-v2__nav {
  display: flex; gap: 8px; padding: 16px 0 0 10%;
}
.ca-apple-v2__prev, .ca-apple-v2__next {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%; border: 1.5px solid var(--ca-border);
  background: var(--ca-surface); cursor: pointer;
  color: var(--ca-ink); transition: all .2s;
}
.ca-apple-v2__prev:hover, .ca-apple-v2__next:hover {
  background: var(--ca-brown); border-color: var(--ca-brown); color: white;
}
.ca-apple-v2__prev svg, .ca-apple-v2__next svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────────────────────────────────────
   WORLD MAP — SVG LATAM
   ───────────────────────────────────────────────────────────────────────────── */

.ca-worldmap {
  padding: 80px 0;
  background: var(--ca-worldmap-bg, #1a0f09);  /* siempre oscuro */
  overflow: hidden; position: relative;
}
.ca-worldmap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(108,64,39,.25) 0%, transparent 70%);
}
.ca-worldmap__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1;
}
.ca-worldmap__head { text-align: center; margin-bottom: 48px; }
.ca-worldmap__eye {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ca-yellow); margin-bottom: 10px; display: block;
}
.ca-worldmap__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px,4.5vw,60px); font-weight: 900; line-height: 1.1;
  color: var(--ca-cream); margin: 0 0 14px;
}
.ca-worldmap__title em { color: var(--ca-accent); font-style: normal; }
.ca-worldmap__sub {
  font-size: 16px; color: rgba(var(--_cream-rgb),.5); max-width: 500px; margin: 0 auto;
}

.ca-worldmap__svg-wrap {
  position: relative; max-width: 800px; margin: 0 auto;
}
#ca-latam-map {
  width: 100%; height: auto;
  overflow: visible;
}
/* Mapa real (geografía proyectada en build) ───────────────────────────── */
.map-country {
  fill: rgba(var(--_cream-rgb),.05);
  stroke: rgba(var(--_cream-rgb),.16);
  stroke-width: .5;
  stroke-linejoin: round;
}
.map-country.map-country--on {
  fill: rgba(236,100,38,.24);
  stroke: rgba(236,100,38,.6);
  stroke-width: .8;
}
.map-country.map-country--on:hover { fill: rgba(236,100,38,.42); }
.map-dot {
  fill: var(--ca-accent);
  filter: drop-shadow(0 0 5px rgba(236,100,38,.6));
  animation: mapPulse 2.4s ease-in-out infinite;
}
.map-dot--hub { fill: var(--ca-yellow); filter: drop-shadow(0 0 8px rgba(var(--_yellow-rgb),.75)); }
@keyframes mapPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.map-dot-ring {
  fill: none; stroke: var(--ca-yellow); stroke-width: 1.2; opacity: 0;
  animation: mapRing 2.6s ease-out infinite;
}
@keyframes mapRing {
  0%   { opacity: .8; r: 5; }
  100% { opacity: 0;  r: 20; }
}

/* Country stats chips below map */
.ca-worldmap__chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 40px;
}
.ca-worldmap__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 99px; border: 1px solid rgba(var(--_cream-rgb),.15);
  background: rgba(var(--_cream-rgb),.06);
  font-size: 12.5px; color: rgba(var(--_cream-rgb),.65);
  font-weight: 600;
}
.ca-worldmap__chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ca-accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIALS MASONRY GRID
   ───────────────────────────────────────────────────────────────────────────── */

.testi-section {
  padding: 80px 0;
  background: var(--ca-surface);
}
.testi-masonry {
  column-count: 3;
  column-gap: 16px;
  break-inside: avoid;
}
@media (max-width: 960px) { .testi-masonry { column-count: 2; } }
@media (max-width: 560px) { .testi-masonry { column-count: 1; } }

.testi-card {
  break-inside: avoid;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 18px; padding: 24px;
  margin-bottom: 16px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .45s ease, transform .45s ease,
              border-color .2s, box-shadow .2s;
}
.testi-card.is-visible { opacity: 1; transform: translateY(0); }
.testi-card:hover {
  border-color: rgba(var(--_brown-rgb),.25);
  box-shadow: 0 8px 28px rgba(var(--_brown-rgb),.08);
}

.testi-card__stars {
  display: flex; gap: 2px; margin-bottom: 12px;
  color: var(--ca-yellow); font-size: 13px;
}
.testi-card__quote {
  font-size: 14.5px; line-height: 1.7; color: rgba(var(--_ink-rgb),.75);
  margin: 0 0 18px; font-style: italic;
}
.testi-card__quote::before { content: '"'; color: var(--ca-accent); font-size: 24px; line-height: .8; vertical-align: -.2em; margin-right: 2px; }
.testi-card__author { display: flex; align-items: center; gap: 10px; }
.testi-card__avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--ca-brown), var(--ca-accent));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: white;
}
.testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-card__name { font-size: 13px; font-weight: 800; color: var(--ca-ink); }
.testi-card__role { font-size: 11.5px; color: rgba(var(--_ink-rgb),.45); margin-top: 1px; }
.testi-card__location {
  margin-left: auto;
  font-size: 10.5px; color: var(--ca-ink-3);
  font-weight: 600; text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHINY TEXT — badge effect for "Nuevo" / "Más Leído"
   ───────────────────────────────────────────────────────────────────────────── */

.shiny-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 99px; font-size: 10px; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  position: relative; overflow: hidden;
  /* Shimmer via pseudo-element */
}
.shiny-badge::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--_white-rgb),.5), transparent);
  animation: shinySwipe 2.5s linear infinite;
}
@keyframes shinySwipe {
  0%   { left: -80%; }
  100% { left: 120%; }
}
.shiny-badge--new {
  background: linear-gradient(90deg, var(--ca-brown), var(--ca-accent));
  color: white;
}
.shiny-badge--hot {
  background: linear-gradient(90deg, var(--ca-yellow), var(--ca-accent));
  color: white;
}
.shiny-badge--rec {
  background: linear-gradient(90deg, var(--ca-ink), var(--ca-brown));
  color: var(--ca-yellow);
}

/* Shiny text (standalone — no badge wrapper) */
.shiny-text {
  background-image: linear-gradient(
    120deg,
    rgba(108,64,39,.6) 0%,
    rgba(108,64,39,.6) 35%,
    #ffffff 50%,
    rgba(108,64,39,.6) 65%,
    rgba(108,64,39,.6) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinyText 2.5s linear infinite;
}
@keyframes shinyText {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
.shiny-text--yellow {
  background-image: linear-gradient(
    120deg,
    rgba(248,169,31,.6) 0%,
    rgba(248,169,31,.6) 35%,
    #ffffff 50%,
    rgba(248,169,31,.6) 65%,
    rgba(248,169,31,.6) 100%
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   MISC / LAYOUT HELPERS
   ───────────────────────────────────────────────────────────────────────────── */

.section-spacing { padding: 80px 0; }
.section-spacing-top { padding-top: 64px; }
.section-spacing-bottom { padding-bottom: 64px; }

.s8-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.s8-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 36px; flex-wrap: wrap;
}
.s8-section-eye {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ca-accent); display: block; margin-bottom: 6px;
}
.s8-section-title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px,4.5vw,60px); font-weight: 900; line-height: 1.1;
  color: var(--ca-ink); margin: 0;
}
.s8-section-title em { color: var(--ca-brown); font-style: normal; }
.s8-section-link {
  font-size: 13.5px; font-weight: 700; color: var(--ca-brown);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap .2s;
}
.s8-section-link:hover { gap: 8px; }

/* ── Castina CTA section (home) ─────────────────────────────────────────── */
.ca-castina-cta {
  background: var(--ca-cream);
  border-top: 1.5px solid var(--ca-border);
  border-bottom: 1.5px solid var(--ca-border);
}
.ca-castina-cta__inner {
  display: flex; align-items: center; gap: 40px;
  padding: 64px 0;
}
@media (max-width: 700px) { .ca-castina-cta__inner { flex-direction: column; text-align: center; } }
.ca-castina-cta__text { flex: 1; }
.ca-castina-cta__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px,4.5vw,60px); font-weight: 900; line-height: 1.1;
  color: var(--ca-ink); margin: 8px 0 12px;
}
.ca-castina-cta__text p { font-size: 16px; color: var(--ca-ink-2); margin: 0; }
.ca-castina-cta__visual { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 8 — PATCH v2: Cards · CTA · Post Hero · Mobile-First
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. CARDS — FIX: sin corte visible, placeholder correcto, overflow limpio
   ─────────────────────────────────────────────────────────────────────────────
   Problema: .ca-post-card__placeholder no tenía CSS → texto libre en esquina.
   El area de imagen tenia mismo fondo cream que el body → invisble boundary.
   ─────────────────────────────────────────────────────────────────────────── */

.ca-post-card {
  overflow: hidden;
  border-radius: 16px;
}
.ca-post-card .comet-card__inner {
  overflow: hidden;
  border-radius: 14px;
  background: transparent;   /* background lives on __body, not here */
}

/* Image wrapper — ahora siempre visible con background definido */
.ca-post-card__img {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ca-brown2) 0%, var(--ca-ink) 100%);
  flex-shrink: 0;
  display: block;
  /* Prevent inner border-radius background from bleeding into image area */
  isolation: isolate;
}
.ca-post-card__img-link {
  display: block;
  line-height: 0;          /* kill inline gap */
  font-size: 0;
}
.ca-post-card__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.ca-post-card:hover .ca-post-card__img img { transform: scale(1.05); }

/* Placeholder para cuando NO hay imagen — iniciales centradas, bg oscuro */
/* ── Placeholder de imagen (sin featured image) ── */
/* Wildcard catches card placeholders (they all live inside position:relative parents) */
.ca-post-card__placeholder,
.ca-cat-hero__card-placeholder,
.ca-blog-hero__placeholder,
.ca-blog-mini__placeholder,
.ca-rel-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Todas las variantes de placeholder heredan el diseño base */
.ca-post-card__placeholder,
.ca-cat-hero__card-placeholder,
.ca-blog-hero__placeholder,
.ca-blog-mini__placeholder,
.ca-rel-card__placeholder,
.ca-sidebar-related__placeholder {
  /* Contained inside 60x56 .ca-sidebar-related__img — no absolute positioning */
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, #2d1509 0%, #0d0805 100%);
  border-radius: 8px;
}

/* Patrón de fondo tipo film grain */
.ca-post-card__placeholder::before,
.ca-cat-hero__card-placeholder::before,
.ca-blog-hero__placeholder::before,
.ca-blog-mini__placeholder::before,
.ca-rel-card__placeholder::before,
.ca-sidebar-related__placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 25% 35%, rgba(236,100,38,.18) 0%, transparent 55%),
                    radial-gradient(circle at 75% 65%, rgba(108,64,39,.25) 0%, transparent 55%);
  pointer-events: none;
}

/* Iniciales grandes — decorativas, muy tenues */
.ca-post-card__placeholder::after,
.ca-cat-hero__card-placeholder::after,
.ca-blog-hero__placeholder::after,
.ca-blog-mini__placeholder::after,
.ca-rel-card__placeholder::after,
.ca-sidebar-related__placeholder::after {
  content: attr(data-initials);
  font-family: var(--ca-font-display), 'CalSans-SemiBold', sans-serif;
  font-size: clamp(56px, 12vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--ca-accent-subtle);
  user-select: none;
  position: relative; z-index: 1;
}

/* Ícono de cámara centrado — visible, premium */
.ca-post-card__placeholder > *,
.ca-cat-hero__card-placeholder > *,
.ca-rel-card__placeholder > * { display: none; }

/* Badge de categoría — sobre la imagen */
.ca-post-card__cat {
  position: absolute;
  bottom: 10px; left: 10px; z-index: 2;
  background: var(--ca-accent);
  color: #fff;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  white-space: nowrap;
  font-family: inherit;
}

/* Body del card — siempre blanco, sin cream */
.ca-post-card__body {
  padding: 16px 18px 18px;
  flex: 1; display: flex; flex-direction: column;
  background: var(--ca-surface);
}
.ca-post-card__excerpt {
  font-size: 13px; line-height: 1.6;
  color: var(--ca-ink-2);
  margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-post-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto; padding-top: 12px;
}
.ca-post-card__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ca-ink-3);
}
.ca-post-card__meta span::before { content: '·'; margin-right: 8px; }
.ca-post-card__meta span:first-child::before { display: none; }
.ca-post-card__link {
  font-size: 12px; font-weight: 800;
  color: var(--ca-brown); text-decoration: none;
  white-space: nowrap; transition: gap .15s;
  display: inline-flex; align-items: center; gap: 3px;
}
.ca-post-card:hover .ca-post-card__link { gap: 6px; }

/* Grid responsive — mobile first */
.ca-posts-grid {
  display: grid;
  grid-template-columns: 1fr;                   /* mobile: 1 col */
  gap: 16px;
}
@media (min-width: 560px) {
  .ca-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .ca-posts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. CASTINA CTA — FIX: sin caja negra, imagen con blend mode
   ─────────────────────────────────────────────────────────────────────────── */

/* Rediseño del CTA section */
.ca-castina-cta {
  background: var(--ca-brown2);
  border-top: none;
  border-bottom: none;
  border-radius: 20px;
  margin: 0 16px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 640px) { .ca-castina-cta { margin: 0 24px; } }
@media (min-width: 1280px) {
  .ca-castina-cta {
    max-width: 1280px;
    margin: 0 auto;
  }
}

/* Grain texture overlay */
.ca-castina-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.ca-castina-cta__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 32px;
  padding: 48px 40px;
}
@media (max-width: 700px) {
  .ca-castina-cta__inner {
    flex-direction: column;
    text-align: left;
    padding: 36px 28px;
    gap: 24px;
  }
}

.ca-castina-cta__text { flex: 1; }
.ca-castina-cta__text .s8-section-eye { color: var(--ca-yellow); }
.ca-castina-cta__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 900; line-height: 1.1; letter-spacing: -1px;
  color: var(--ca-cream); margin: 6px 0 10px;
}
.ca-castina-cta__text p {
  font-size: 15px; color: rgba(var(--_cream-rgb),.5); margin: 0;
}
.ca-castina-cta__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px;
}

/* Castina image — mix-blend-mode:screen elimina el fondo negro */
.ca-castina-cta__visual {
  flex-shrink: 0;
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: flex-end; justify-content: center;
}
.ca-castina-cta__visual img {
  height: 180px; width: auto;
  mix-blend-mode: screen;         /* elimina el negro del PNG */
  filter: brightness(1.1) contrast(0.95);
  display: block;
  /* si aún se ve el cuadrado, lo cortamos con radial-gradient */
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 55%, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 55%, black 60%, transparent 100%);
}
@media (max-width: 700px) {
  .ca-castina-cta__visual { width: 120px; height: 120px; }
  .ca-castina-cta__visual img { height: 130px; }
}

/* CTA Buttons dentro del CTA section */
.ca-castina-cta .hbg-btn--dark {
  background: var(--ca-ink);
  color: var(--ca-cream);
}
.ca-castina-cta .hbg-btn {
  background: rgba(var(--_cream-rgb),.1);
  color: var(--ca-cream);
  border: 1.5px solid rgba(var(--_cream-rgb),.2);
}
.ca-castina-cta .hbg-btn::after {
  background: rgba(var(--_cream-rgb),.1);
}
.ca-castina-cta .hbg-btn:hover { border-color: rgba(var(--_cream-rgb),.4); }

/* ─────────────────────────────────────────────────────────────────────────────
   3. POST HERO — REDISEÑO COMPLETO
      · Sin autor, sin fecha
      · Overlay ultrafuerte en la parte inferior para leer el título
      · Título grande y limpio
      · Solo: breadcrumb + categoría + título + tiempo de lectura
   ─────────────────────────────────────────────────────────────────────────── */

/* Forzamos redefinición completa */
.ca-post-hero--has-img .ca-post-hero__img-wrap {
  height: 520px;
}
@media (max-width: 768px) {
  .ca-post-hero--has-img .ca-post-hero__img-wrap { height: 380px; }
}
@media (max-width: 480px) {
  .ca-post-hero--has-img .ca-post-hero__img-wrap { height: 320px; }
}

/* Overlay: fuerte degradado negro en zona de texto */
.ca-post-hero__img-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(10,5,3,0)     0%,
      rgba(10,5,3,0)    25%,
      rgba(10,5,3,.45)  55%,
      rgba(10,5,3,.82)  75%,
      rgba(10,5,3,.93)  100%
    );
}

/* Texto del hero sobre imagen — posición absoluta al fondo */
.ca-post-hero--has-img .ca-post-hero__content {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  padding: 0 0 36px;
}
@media (max-width: 600px) {
  .ca-post-hero--has-img .ca-post-hero__content { padding: 0 0 24px; }
}

/* Categoría badge — queda bien sobre oscuro */
.ca-post-hero--has-img .ca-post-hero__cat {
  background: var(--ca-accent);
  color: #fff;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  margin-bottom: 16px;
  display: inline-block;
}

/* Título sobre imagen — ultra legible */
.ca-post-hero--has-img .ca-post-hero__title {
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  font-size: clamp(24px, 4.5vw, 56px);
  max-width: 820px;
  margin-bottom: 14px;
}

/* Meta sin imagen */
.ca-post-hero--no-img .ca-post-hero__content {
  padding: 40px 0;
}
.ca-post-hero--no-img .ca-post-hero__title {
  color: var(--ca-ink);
  font-size: clamp(24px, 4.5vw, 52px);
  margin-bottom: 12px;
}

/* Read time chip — único elemento meta visible */
.ca-post-hero__read-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 99px;
  font-size: 12px; font-weight: 700;
  background: rgba(var(--_white-rgb),.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--_white-rgb),.9);
  border: 1px solid rgba(var(--_white-rgb),.2);
}
.ca-post-hero--no-img .ca-post-hero__read-chip {
  background: var(--ca-border);
  color: var(--ca-brown);
  border-color: var(--ca-border);
}

/* Ocultar author, date, meta viejos — los reemplazamos con read-chip */
.ca-post-hero__meta,
.ca-post-hero__author,
.ca-post-hero__date { display: none !important; }

/* Breadcrumbs sobre imagen oscura */
.ca-post-hero--has-img .ca-breadcrumbs,
.ca-post-hero--has-img .ca-breadcrumbs a,
.ca-post-hero--has-img .ca-breadcrumbs span { color: rgba(var(--_white-rgb),.6); }
.ca-post-hero--has-img .ca-breadcrumbs a:hover { color: white; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. MOBILE FIRST — FAB toggle abajo-derecha + menu slide-up
   ─────────────────────────────────────────────────────────────────────────── */

/* DESKTOP: header normal */
@media (min-width: 961px) {
  .ca-header__toggle { display: none !important; }
  .ca-header__nav    { display: flex !important; }
  .ca-header__right  { display: flex !important; }
}

/* MOBILE: FAB is outside header, pill shows logo only */
@media (max-width: 960px) {
  .ca-header__nav   { display: none !important; }
  .ca-header__right { display: none !important; }

  .ca-header__inner {
    grid-template-columns: auto 1fr;
    width: calc(100% - 24px);
    margin-top: 8px;
    border-radius: 14px;
  }
  /* Logo a la izquierda; el CTA de Castings se ancla a la derecha del pill */
  .ca-header__logo {
    justify-content: flex-start;
    display: flex;
  }
  .ca-header__mobcast {
    display: inline-flex;
    justify-self: end;
  }

  /* FAB — fixed bottom-right */
  .ca-header__toggle {
    display: flex !important;
    position: fixed !important;
    bottom: 24px;
    right: 20px;
    z-index: 9200;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--ca-ink);
    color: #fff;
    border: none;
    cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(26,15,9,.35);
    transition: background .2s, transform .15s, box-shadow .2s;
  }
  html.ca-dark .ca-header__toggle {
    background: #fef2d8;
    color: var(--ca-ink);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
  }
  .ca-header__toggle:hover { background: var(--ca-brown, #2e1a11); transform: scale(1.06); }
  html.ca-dark .ca-header__toggle:hover { background: #fff8ed; }
  .ca-header__toggle:active { transform: scale(0.95); }
  .ca-header__toggle svg { width: 20px; height: 20px; }

  /* Drawer panel width on small screens */
  .ca-header__mobile-inner { width: min(300px, 90vw); }
  .ca-header__mobile-nav a {
    font-size: 17px;
    height: 52px;
    padding: 0 14px;
    border-radius: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. MOBILE-FIRST: responsive global
   ─────────────────────────────────────────────────────────────────────────── */

/* Containers */
.s8-container { padding: 0 16px; }
@media (min-width: 640px) { .s8-container { padding: 0 24px; } }

/* Section spacing */
.section-spacing { padding: 48px 0; }
@media (min-width: 768px) { .section-spacing { padding: 80px 0; } }
.section-spacing-top { padding-top: 40px; }
@media (min-width: 768px) { .section-spacing-top { padding-top: 64px; } }

/* Section head — stack on mobile */
.s8-section-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
  .s8-section-head {
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 36px;
  }
}

/* Wobble grid — mobile: 1 col, tablet: 2 col */
.wobble-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .wobble-grid { grid-template-columns: repeat(2, 1fr); }
  .wobble-grid .wobble-card--wide { grid-column: span 2; }
}
@media (min-width: 900px) {
  .wobble-grid { grid-template-columns: repeat(3, 1fr); }
  .wobble-grid .wobble-card--full { grid-column: span 3; }
}
.wobble-card--wide,
.wobble-card--full { grid-column: span 1; }
@media (max-width: 559px) {
  .wobble-card__body { padding: 24px; }
  .wobble-card__title { font-size: 22px; }
}

/* Apple carousel */
.ca-apple-v2__header { padding: 0 0 20px 16px; }
@media (min-width: 640px) { .ca-apple-v2__header { padding: 0 0 28px 10%; } }
.ca-apple-v2__track { padding-left: 16px; }
@media (min-width: 640px) { .ca-apple-v2__track { padding-left: 10%; } }
.ca-apple-v2__card { flex: 0 0 240px; }
@media (min-width: 640px) { .ca-apple-v2__card { flex: 0 0 280px; } }
.ca-apple-v2__nav { padding: 12px 0 0 16px; }
@media (min-width: 640px) { .ca-apple-v2__nav { padding: 16px 0 0 10%; } }

/* Comet card grid */
.comet-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .comet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .comet-grid { grid-template-columns: 1fr; }
}

/* Testimonials masonry */
.testi-masonry { column-count: 1; }
@media (min-width: 600px) { .testi-masonry { column-count: 2; } }
@media (min-width: 960px) { .testi-masonry { column-count: 3; } }

/* World map */
.ca-worldmap { padding: 48px 0; }
@media (min-width: 768px) { .ca-worldmap { padding: 80px 0; } }

/* Footer */
.ca-footer__grid {
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 40px 16px;
}
@media (min-width: 560px) {
  .ca-footer__grid {
    grid-template-columns: 1fr 1fr;
    padding: 48px 24px;
  }
}
@media (min-width: 900px) {
  .ca-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 56px 24px;
  }
}
.ca-footer__top-inner {
  grid-template-columns: 1fr;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .ca-footer__top-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }
}
.ca-footer__top { padding: 40px 0; }
@media (min-width: 768px) { .ca-footer__top { padding: 56px 0; } }

.ca-footer__nl-row { flex-direction: column; gap: 10px; }
@media (min-width: 400px) { .ca-footer__nl-row { flex-direction: row; } }

.ca-footer__bottom-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 16px;
}
@media (min-width: 640px) {
  .ca-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    padding: 20px 24px;
  }
}

/* Post layout — mobile: single column */
.ca-post-body { padding: 32px 0 60px; }
@media (min-width: 768px) { .ca-post-body { padding: 48px 0 80px; } }

.ca-post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 960px) {
  .ca-post-layout {
    grid-template-columns: 1fr 260px;
    gap: 48px;
  }
}

/* Sidebar — oculto en mobile, visible en desktop */
.ca-post-sidebar { display: none; }
@media (min-width: 960px) { .ca-post-sidebar { display: block; } }

/* Hero spacer */
/* ca-header-spacer defined above */

/* Sticky banner text */
#ca-sticky-banner { padding: 0 56px 0 16px; }
.ca-sticky-banner__text { font-size: 12px; text-align: center; }
@media (min-width: 640px) {
  .ca-sticky-banner__text { font-size: 13px; }
  #ca-sticky-banner { padding: 0 40px; }
}

/* Evitar que el FAB tape el contenido del footer en mobile */
@media (max-width: 960px) {
  body { padding-bottom: 90px; }
  body.has-banner { padding-bottom: 90px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 8 — PATCH v3: Arrows right · FAB fix · Map fix
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Apple Carousel: flechas a la DERECHA ─────────────────────────────── */
.ca-apple-v2__nav {
  justify-content: flex-end;
  padding: 14px 16px 0 16px;
}
@media (min-width: 640px) {
  .ca-apple-v2__nav { padding: 16px 40px 0 0; }
}

/* FAB position block removed — hamburger is now inside header pill */

/* ── Map outline (borde exterior continent) ────────────────────────────── */
.map-outline {
  fill: rgba(var(--_cream-rgb),.05);
  stroke: rgba(var(--_cream-rgb),.3);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 8 — PATCH v4: FAB fix · padding edges
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FAB: siempre fixed, nunca afectado por el header ─────────────────── */
/* El botón ahora está FUERA del header en el DOM */
/* FAB — now lives inside the header pill as .ca-header__toggle */

/* ── Post hero: padding lateral en mobile ──────────────────────────────── */
.ca-post-hero__content .container,
.ca-post-hero__content .container.large {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .ca-post-hero__content .container,
  .ca-post-hero__content .container.large {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Breadcrumbs: no tocar el borde */
.ca-post-hero .ca-breadcrumbs {
  padding: 0;
  margin-bottom: 10px;
}

/* Hero title: sin desborde */
.ca-post-hero__title {
  padding-right: 16px;
  word-break: break-word;
  hyphens: auto;
}

/* Post body: padding lateral mobile */
.ca-post-body .container,
.ca-post-body .container.large {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .ca-post-body .container,
  .ca-post-body .container.large {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Global: ningún container toca el borde en mobile */
@media (max-width: 640px) {
  .container,
  .container.large {
    padding-left: 18px;
    padding-right: 18px;
  }
  .s8-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 8 — PATCH v5: edges · logo · footer whitespace · share · cards · map
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Logo centrado en mobile ────────────────────────────────────────── */
@media (max-width: 960px) {
  .ca-header__inner {
    justify-content: center;
  }
  .ca-header__logo {
    justify-content: center;
    flex: none;
  }
}

/* ── 2. FAB no se solapa con share bar ─────────────────────────────────── */
/* El share bar en post tiene z-index implícito — subimos solo el FAB */
/* #ca-fab-toggle z-index removed — now inside pill */

/* En mobile, la share bar va ENCIMA del FAB visualmente */
.ca-post-share {
  position: relative;
  z-index: 1;
  /* Padding bottom para que el FAB no tape los botones */
  margin-bottom: 0;
}
@media (max-width: 960px) {
  .ca-post-share {
    padding-bottom: 80px; /* clearance para el FAB */
  }
}

/* ── 3. Footer — sin whitespace abajo ─────────────────────────────────── */
/* El body tenía padding-bottom:90px en mobile que creaba espacio blanco bajo el footer */
@media (max-width: 960px) {
  body,
  body.has-banner {
    padding-bottom: 0;
  }
  /* El scroll-to-top y FAB viven encima del footer — está bien, no necesitan padding */
}
/* Asegurar footer flush */
.ca-footer {
  margin-bottom: 0;
}
/* Último elemento antes del footer no agrega espacio */
.ca-footer + * { display: none; }

/* ── 4. Cards — overflow visible para que la sombra no se corte ──────── */
/* El problema: el grid/wrapper tenía overflow:hidden o sin padding */
.ca-posts-grid {
  overflow: visible;
  padding: 4px 8px 12px;   /* espacio para la sombra */
}
@media (min-width: 640px) {
  .ca-posts-grid { padding: 4px 12px 16px; }
}

/* El card mismo necesita espacio también */
.ca-post-card {
  overflow: visible;        /* permite sombra */
}
.ca-post-card .comet-card__inner {
  overflow: hidden;         /* SOLO el inner recorta la imagen */
  box-shadow: 0 2px 8px rgba(var(--_brown-rgb),.06);
  transition: box-shadow .3s ease;
}
.ca-post-card:hover .comet-card__inner {
  box-shadow: 0 8px 32px rgba(108,64,39,.16);
}

/* Comet grid también */
.comet-grid {
  overflow: visible;
  padding: 4px 8px 12px;
}
.comet-card {
  overflow: visible;
}
.comet-card__inner {
  overflow: hidden;
}

/* Apple v2 — no cortar las tarjetas */
.ca-apple-v2__track {
  padding-top: 6px;
  padding-bottom: 16px;
}
.ca-apple-v2__card {
  overflow: visible;
  box-shadow: 0 2px 12px rgba(var(--_brown-rgb),.08);
  transition: box-shadow .3s ease;
}
.ca-apple-v2__card:hover {
  box-shadow: 0 8px 32px rgba(108,64,39,.16);
}
/* El inner del card recorta la imagen */
.ca-apple-v2__card-img {
  overflow: hidden;
}

/* Wobble grid overflow */
.wobble-grid {
  overflow: visible;
  padding: 4px 8px 12px;
}

/* ── 5. Global padding — textos sin tocar el borde ─────────────────────── */
/* Sobreescritura definitiva para mobile */
@media (max-width: 767px) {
  .container,
  .container.large,
  .editorial-container,
  .s8-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Post hero específico */
  .ca-post-hero--has-img .ca-post-hero__content .container,
  .ca-post-hero--has-img .ca-post-hero__content .container.large {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* World map */
  .ca-worldmap__inner {
    padding: 0 20px;
  }
  /* Testi section */
  .testi-section .s8-container {
    padding: 0 20px;
  }
}

/* ── 6. "Lo más leído" section ──────────────────────────────────────────── */
.ca-popular {
  padding: 56px 0;
  background: var(--ca-ink);
}
@media (min-width: 768px) { .ca-popular { padding: 80px 0; } }

.ca-popular-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: popular-counter;
}
.ca-popular-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--_cream-rgb),.07);
  text-decoration: none;
  color: inherit;
  transition: background .2s;
  border-radius: 12px;
  padding-left: 4px; padding-right: 4px;
  counter-increment: popular-counter;
  position: relative;
}
.ca-popular-item:hover { background: rgba(var(--_cream-rgb),.04); }
.ca-popular-item:last-child { border-bottom: none; }

.ca-popular-item__num {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 42px; font-weight: 900; line-height: 1;
  color: rgba(var(--_cream-rgb),.08);
  min-width: 52px; text-align: right;
  flex-shrink: 0;
  letter-spacing: -2px;
  user-select: none;
}
/* Highlight top 3 */
.ca-popular-item:nth-child(1) .ca-popular-item__num { color: rgba(var(--_yellow-rgb),.35); }
.ca-popular-item:nth-child(2) .ca-popular-item__num { color: rgba(var(--_accent-rgb),.25); }
.ca-popular-item:nth-child(3) .ca-popular-item__num { color: rgba(var(--_cream-rgb),.15); }

.ca-popular-item__img {
  width: 72px; height: 72px;
  border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ca-brown2), var(--ca-ink));
}
.ca-popular-item__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s;
}
.ca-popular-item:hover .ca-popular-item__img img { transform: scale(1.08); }
.ca-popular-item__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ca-font-display), sans-serif;
  font-size: 22px; font-weight: 900;
  color: rgba(var(--_cream-rgb),.15);
}

.ca-popular-item__body { flex: 1; min-width: 0; }
.ca-popular-item__cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 4px; display: block;
}
.ca-popular-item__title {
  font-size: 15px; font-weight: 800; line-height: 1.35;
  color: var(--ca-cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
@media (max-width: 480px) {
  .ca-popular-item__title { font-size: 13.5px; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}
.ca-popular-item:hover .ca-popular-item__title { color: var(--ca-yellow); }
.ca-popular-item__meta {
  font-size: 11.5px; color: rgba(var(--_cream-rgb),.35);
  margin-top: 4px; display: flex; gap: 8px;
}

.ca-popular-item__views {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: rgba(var(--_cream-rgb),.25); flex-shrink: 0;
}
.ca-popular-item__views svg { opacity: .5; }

/* ── 7. MAPA — Low-poly geométrico realista de Latinoamérica ─────────────
   Usando paths low-poly triangulados con cara más correcta geográficamente.
   ViewBox ajustada para centrar Sudamérica + México + Centroamérica.
   ─────────────────────────────────────────────────────────────────────── */

/* Mapa en dos columnas en desktop */
.ca-worldmap__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .ca-worldmap__layout {
    grid-template-columns: auto 1fr;
    gap: 60px;
  }
}
.ca-worldmap__svg-wrap {
  max-width: 440px;
  margin: 0 auto;
}
.ca-worldmap__info { }
.ca-worldmap__info-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 28px;
}
.ca-worldmap__info-item {
  display: flex; align-items: flex-start; gap: 12px;
}
.ca-worldmap__info-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ca-accent); flex-shrink: 0; margin-top: 5px;
}
.ca-worldmap__info-dot--yellow { background: var(--ca-yellow); }
.ca-worldmap__info-label {
  font-size: 14px; color: rgba(var(--_cream-rgb),.55); line-height: 1.5;
}
.ca-worldmap__info-label strong { color: var(--ca-cream); display: block; font-size: 15px; }

/* Low-poly triangles */
.map-tri {
  fill: rgba(var(--_cream-rgb),.04);
  stroke: rgba(var(--_cream-rgb),.12);
  stroke-width: .5;
  stroke-linejoin: round;
  transition: fill .3s;
}
.map-tri--lit   { fill: rgba(var(--_cream-rgb),.08); stroke: rgba(var(--_cream-rgb),.2); }
.map-tri--dark  { fill: rgba(var(--_cream-rgb),.02); stroke: rgba(var(--_cream-rgb),.08); }
.map-tri--brazil{ fill: rgba(var(--_accent-rgb),.12);  stroke: rgba(var(--_accent-rgb),.25); }
.map-tri--arg   { fill: var(--ca-border-2);    stroke: var(--ca-border-strong); }

/* Border line of each country */
.map-border {
  fill: none;
  stroke: rgba(var(--_cream-rgb),.22);
  stroke-width: 1;
  stroke-linejoin: round;
}
.map-border--highlight {
  stroke: rgba(var(--_yellow-rgb),.5);
  stroke-width: 1.5;
}

/* ── Worldmap layout override for new 2-col design ────────────────────── */
.ca-worldmap { padding: 64px 0; }
@media (min-width: 768px) { .ca-worldmap { padding: 88px 0; } }
/* header now inside layout col — hide the standalone head */
.ca-worldmap .ca-worldmap__head { margin-bottom: 16px; }

/* Map SVG fill */
#ca-latam-map text { pointer-events: none; }
.map-tri { transition: fill .25s ease; }

/* ── Share bar: z-index menor que FAB, pero padding para no solapar ─────── */
.ca-post-share {
  position: relative;
  z-index: 100 !important;   /* FAB es 9500 — no hay conflicto real */
  margin-bottom: 40px;       /* espacio bajo el share bar */
}
/* El FAB ya está fixed fuera del flujo — no se solapa si el share está inline */

/* ── Footer: sin whitespace blanco ──────────────────────────────────────── */
.ca-footer { display: block; }
/* Eliminar body padding-bottom en mobile (causaba el blanco) */
@media (max-width: 960px) {
  body          { padding-bottom: 0; }
  body.has-banner { padding-bottom: 0; }
}
/* El FAB fixed no requiere padding en el body — está fuera del flujo */

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 8 — PATCH v6: Hero padding · Grid padding · Map · progress-wrap
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Post hero content padding — user spec ──────────────────────────── */
.ca-post-hero--has-img .ca-post-hero__content {
  padding: 0 24px 24px;
}

/* ── 2. Cards grid — user spec ─────────────────────────────────────────── */
.ca-posts-grid {
  overflow: visible;
  padding: 50px 50px 70px 50px;
}
/* Mobile override — el padding de 50px se come todo el viewport en mobile */
@media (max-width: 640px) {
  .ca-posts-grid {
    padding: 20px 16px 40px;
  }
}
@media (min-width: 641px) and (max-width: 960px) {
  .ca-posts-grid {
    padding: 30px 24px 50px;
  }
}

/* ── 3. Progress-wrap (scroll to top) ──────────────────────────────────── */
/* Desktop: sube el z-index para que quede siempre visible */
.progress-wrap {
  z-index: 300 !important;
}
/* Mobile: moverlo a la izquierda para no chocar con el FAB (bottom-right) */
@media (max-width: 960px) {
  .progress-wrap {
    right: auto;
    left: 20px;
    bottom: 32px;
    z-index: 200 !important; /* por debajo del FAB (9500) pero encima del contenido */
  }
}

/* ── 4. Map section — centered, sin doble heading ─────────────────────── */
.ca-worldmap__map-wrap {
  max-width: 400px;
  margin: 0 auto;
  padding: 12px 0;
}
#ca-latam-map {
  width: 100%;
  height: auto;
  display: block;
}
/* Chips centrados bajo el mapa */
.ca-worldmap .ca-worldmap__chips {
  justify-content: center;
  margin-top: 28px;
}
/* Remove 2-col layout (el layout ya no existe en el HTML nuevo) */
.ca-worldmap__layout {
  display: block !important;
}

/* ── 6. "Lo más leído" — card section sin dark bg ──────────────────────── */
/* Removemos el .ca-popular que antes era dark-bg numbered list */
.ca-popular {
  background: transparent;
  padding: 0;
}

/* ─── sprint9.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 9-12 — UX · Search · Newsletter · PWA
   casting and acting blog
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 9A — Reading Progress Bar
   ─────────────────────────────────────────────────────────────────────────*/
#ca-read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--ca-accent), var(--ca-yellow));
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(236,100,38,.5);
}
/* Only show on post pages */
body:not(.is-post) #ca-read-progress { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 9B — Next Article Drawer
   Aparece desde abajo cuando el usuario llega al 80% del artículo
   ─────────────────────────────────────────────────────────────────────────*/
#ca-next-article {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200; /* below FAB (300) and progress-wrap */
  pointer-events: none;
}
#ca-next-article.is-visible { pointer-events: auto; }

/* Close button sits ABOVE the drawer */
.ca-next-drawer__close {
  position: absolute;
  top: -18px; /* float above the bar */
  right: 24px;
  transform: none;
  width: 32px; height: 32px;
  background: var(--ca-ink);
  border: 1.5px solid rgba(254,242,216,.18);
  border-radius: 50%;
  color: rgba(var(--_cream-rgb),.7);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  pointer-events: auto;
}
.ca-next-drawer__close:hover { background: rgba(var(--_cream-rgb),.15); color: var(--ca-cream); }
@media (max-width: 640px) { .ca-next-drawer__close { right: 16px; top: -16px; width: 28px; height: 28px; } }

.ca-next-drawer {
  background: var(--ca-ink);
  border-top: 1px solid rgba(var(--_cream-rgb),.1);
  padding: 0;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.23,1,.32,1);
  max-width: 100%;
  position: relative; /* so close btn positions relative to this */
}
#ca-next-article.is-visible .ca-next-drawer {
  transform: translateY(0);
}

.ca-next-drawer__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 56px 14px 24px; /* right padding leaves room for close btn */
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 640px) {
  .ca-next-drawer__inner { padding: 12px 48px 12px 16px; gap: 12px; }
}

.ca-next-drawer__label {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--_cream-rgb),.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.ca-next-drawer__img {
  width: 44px; height: 44px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0;
  background: rgba(var(--_cream-rgb),.1);
}
.ca-next-drawer__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ca-next-drawer__body { flex: 1; min-width: 0; }
.ca-next-drawer__cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 3px; display: block;
}
.ca-next-drawer__title {
  font-size: 13px; font-weight: 800; line-height: 1.3;
  color: var(--ca-cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-next-drawer__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  background: var(--ca-accent);
  color: white; font-size: 12px; font-weight: 800;
  border-radius: 99px; text-decoration: none;
  transition: background .2s, gap .15s;
  white-space: nowrap;
}
.ca-next-drawer__cta:hover { background: var(--ca-brown); gap: 10px; }
@media (max-width: 480px) {
  .ca-next-drawer__label { display: none; }
  .ca-next-drawer__cta { padding: 0 12px; }
  .ca-next-drawer__cta span { display: none; }
}

/* Push page content up when drawer visible so it doesn't overlap FAB/share btns */
body.ca-drawer-open {
  padding-bottom: 70px;
  transition: padding-bottom .45s cubic-bezier(.23,1,.32,1);
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 9C — Related posts horizontal scroll (mobile)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-related-scroll {
  display: none;
}
@media (max-width: 768px) {
  /* On mobile, show horizontal scroll instead of grid */
  .ca-related-full .ca-related-grid { display: none; }
  .ca-related-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 20px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ca-related-scroll::-webkit-scrollbar { display: none; }
  .ca-related-scroll .ca-rel-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 10A — Search Bar
   ─────────────────────────────────────────────────────────────────────────*/
.ca-search-wrap {
  position: relative;
}
.ca-search-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.ca-search-input-wrap svg.ca-search-icon {
  position: absolute; left: 14px;
  color: var(--ca-ink-3);
  pointer-events: none; flex-shrink: 0;
  width: 16px; height: 16px;
}
#ca-search-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1.5px solid var(--ca-border);
  border-radius: 99px;
  background: var(--ca-surface);
  font-size: 14px;
  color: var(--ca-ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
#ca-search-input:focus {
  border-color: var(--ca-brown);
  box-shadow: 0 0 0 3px rgba(var(--_brown-rgb),.08);
}
#ca-search-input::placeholder { color: var(--ca-ink-3); }
/* Hide native browser ✕ on all search inputs — custom clear buttons used instead */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
input[type="search"]::-webkit-search-decoration    { -webkit-appearance: none; display: none; }
input[type="search"]::-ms-clear                    { display: none; width: 0; height: 0; }
.ca-search-clear {
  position: absolute; right: 12px;
  width: 24px; height: 24px;
  background: rgba(var(--_ink-rgb),.08);
  border: none; border-radius: 50%;
  color: var(--ca-ink);
  cursor: pointer; display: none; align-items: center; justify-content: center;
  transition: background .15s;
}
.ca-search-clear.is-visible { display: flex; }
.ca-search-clear:hover { background: rgba(var(--_ink-rgb),.15); }

/* Results dropdown */
#ca-search-results {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(var(--_ink-rgb),.12);
  z-index: 500;
  overflow: hidden;
  display: none;
  max-height: 420px;
  overflow-y: auto;
}
#ca-search-results.is-open { display: block; }
.ca-search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--ca-border);
  transition: background .15s;
}
.ca-search-result:last-child { border-bottom: none; }
.ca-search-result:hover { background: var(--ca-bg); }
.ca-search-result__img {
  width: 48px; height: 48px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ca-brown2), var(--ca-ink));
}
.ca-search-result__img img { width: 100%; height: 100%; object-fit: cover; }
.ca-search-result__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ca-font-display), sans-serif;
  font-size: 16px; font-weight: 900;
  color: rgba(var(--_cream-rgb),.2);
}
.ca-search-result__body { flex: 1; min-width: 0; }
.ca-search-result__cat {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 2px; display: block;
}
.ca-search-result__title {
  font-size: 13.5px; font-weight: 800;
  color: var(--ca-ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-search-result__excerpt {
  font-size: 11.5px; color: rgba(var(--_ink-rgb),.45);
  margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-search-empty {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--ca-ink-3);
}
.ca-search-empty svg { margin-bottom: 8px; opacity: .3; }
.ca-search-spinner {
  padding: 20px; text-align: center;
  font-size: 12px; color: var(--ca-ink-3);
}
.ca-search-footer {
  padding: 10px 16px;
  background: var(--ca-bg);
  border-top: 1px solid var(--ca-border);
  text-align: center;
  font-size: 12px; color: var(--ca-ink-3);
}
.ca-search-footer a { color: var(--ca-brown); text-decoration: none; font-weight: 700; }

/* Blog page search bar */
.ca-blog-search { margin-bottom: 32px; max-width: 520px; }

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 10B — Category Filter Pills (blog.php)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.ca-filter-pills::-webkit-scrollbar { display: none; }
.ca-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: 99px;
  border: 1.5px solid var(--ca-border);
  background: var(--ca-surface);
  font-size: 12.5px; font-weight: 700;
  color: var(--ca-ink-2);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.ca-filter-pill:hover {
  border-color: var(--ca-brown);
  color: var(--ca-brown);
  background: rgba(var(--_brown-rgb),.04);
}
.ca-filter-pill.is-active {
  background: var(--ca-ink);
  border-color: var(--ca-ink);
  color: var(--ca-cream);
}
.ca-filter-pill__count {
  background: rgba(var(--_ink-rgb),.08);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
}
.ca-filter-pill.is-active .ca-filter-pill__count {
  background: rgba(var(--_cream-rgb),.15);
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 10C — Tags
   ─────────────────────────────────────────────────────────────────────────*/
.ca-post-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1.5px solid var(--ca-border);
}
.ca-post-tags__label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-ink-3);
  align-self: center; margin-right: 4px;
}
.ca-tag-pill {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  background: rgba(var(--_brown-rgb),.06);
  border: 1px solid var(--ca-border);
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  color: var(--ca-brown);
  text-decoration: none;
  transition: all .2s;
}
.ca-tag-pill:hover {
  background: var(--ca-ink);
  border-color: var(--ca-ink);
  color: var(--ca-cream);
}
/* Variante chica para el preview de tags en formularios admin */
.ca-tag-pill--sm { height: 22px; padding: 0 10px; font-size: 11.5px; font-weight: 700; margin: 2px; }
/* Highlight de coincidencias en el buscador */
.ca-search-mark { background: rgba(236,100,38,.2); color: inherit; border-radius: 2px; }

/* ───────── Artículo con rails de publicidad (recreación del layout original) ───────── */
.article-right-rail-centered-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-right-rail-centered-layout-body {
  flex: 1 1 760px;
  min-width: 0;
  max-width: 800px;
}
.article-right-rail-centered-layout-body .container { padding: 0; }
/* Rails laterales: sticky para que acompañen el scroll */
.article-right-rail-centered-left-span,
.right-rail {
  flex: 0 0 auto;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.article-right-rail-centered-left-span { width: 200px; }
.right-rail { width: 300px; }
.ad-megalateral img,
.adsense-box img { display: block; width: 100%; height: auto; border-radius: var(--ca-radius-md); }
.container-adsense .adsense-box {
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  padding: 8px;
  background: var(--ca-surface);
}
.adsense-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ca-ink-2); text-align: center; margin-bottom: 6px;
}
/* Responsive: apilar (mobile = responsive del desktop, sin UI custom) */
@media (max-width: 1100px) {
  .article-right-rail-centered-content { flex-direction: column; align-items: center; gap: 40px; padding: 0 16px; }
  .article-right-rail-centered-left-span,
  .right-rail {
    position: static; width: auto; max-width: 100%;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
  }
  .article-right-rail-centered-layout-body { order: -1; max-width: 800px; width: 100%; }
}

/* Tag page header */
.ca-tag-hero {
  padding: 60px 0 40px;
  background: linear-gradient(160deg, var(--ca-brown2) 0%, rgba(254,242,216,.04) 100%);
  margin-bottom: 40px;
}
.ca-tag-hero__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 10px; display: block;
}
.ca-tag-hero__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px, 5vw, 64px); font-weight: 900; line-height: 1.05;
  letter-spacing: -1.5px; color: var(--ca-ink);
  margin: 0 0 8px;
}
.ca-tag-hero__count {
  font-size: 14px; color: var(--ca-ink-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 11A — Newsletter confirmation page
   ─────────────────────────────────────────────────────────────────────────*/
.ca-nl-confirm {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.ca-nl-confirm__box {
  max-width: 520px;
  background: var(--ca-surface);
  border-radius: 24px;
  padding: 52px 40px;
  border: 1.5px solid var(--ca-border);
  box-shadow: 0 20px 60px rgba(26,15,9,.06);
}
@media (max-width: 480px) {
  .ca-nl-confirm__box { padding: 40px 24px; border-radius: 20px; }
}
.ca-nl-confirm__castina {
  height: 120px; width: auto;
  margin-bottom: 20px;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}
.ca-nl-confirm__icon {
  width: 64px; height: 64px;
  background: rgba(var(--_brown-rgb),.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: var(--ca-brown);
}
.ca-nl-confirm__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.1;
  letter-spacing: -1px; color: var(--ca-ink);
  margin: 0 0 12px;
}
.ca-nl-confirm__sub {
  font-size: 15px; color: var(--ca-ink-2); line-height: 1.6;
  margin: 0 0 28px;
}
.ca-nl-confirm__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 11B — /newsletter/ archive page
   ─────────────────────────────────────────────────────────────────────────*/
.ca-nl-archive__list {
  display: flex; flex-direction: column; gap: 0;
}
.ca-nl-archive-item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ca-border);
  text-decoration: none; color: inherit;
  transition: background .15s;
  border-radius: 12px; padding-left: 8px; padding-right: 8px;
}
.ca-nl-archive-item:hover { background: rgba(var(--_brown-rgb),.03); }
.ca-nl-archive-item__num {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 32px; font-weight: 900;
  color: rgba(var(--_ink-rgb),.08); min-width: 40px;
  flex-shrink: 0; line-height: 1; letter-spacing: -1px;
  margin-top: 3px;
}
.ca-nl-archive-item__body { flex: 1; }
.ca-nl-archive-item__date {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-ink-3); margin-bottom: 5px;
}
.ca-nl-archive-item__title {
  font-size: 17px; font-weight: 800; line-height: 1.3;
  color: var(--ca-ink); margin-bottom: 6px;
  transition: color .2s;
}
.ca-nl-archive-item:hover .ca-nl-archive-item__title { color: var(--ca-brown); }
.ca-nl-archive-item__excerpt {
  font-size: 13.5px; line-height: 1.6; color: var(--ca-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-nl-archive-item__arrow {
  flex-shrink: 0; margin-top: 4px;
  color: var(--ca-ink-4);
  transition: transform .2s, color .2s;
}
.ca-nl-archive-item:hover .ca-nl-archive-item__arrow {
  transform: translateX(4px); color: var(--ca-brown);
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 12A — Blur-up lazy loading
   ─────────────────────────────────────────────────────────────────────────*/
.ca-blur-img {
  position: relative; overflow: hidden;
  background: var(--ca-cream);
}
.ca-blur-img img.blur-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(20px) saturate(1.2);
  transform: scale(1.1);
  transition: opacity .4s ease;
  z-index: 1;
}
.ca-blur-img img.blur-full {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
}
.ca-blur-img.is-loaded img.blur-thumb { opacity: 0; }
.ca-blur-img.is-loaded img.blur-full  { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 12B — PWA Install Banner
   ─────────────────────────────────────────────────────────────────────────*/
#ca-pwa-install {
  position: fixed;
  bottom: 90px; /* above FAB */
  right: 20px;
  z-index: 8500;
  background: var(--ca-ink);
  color: var(--ca-cream);
  border-radius: 16px;
  padding: 14px 16px;
  width: 280px;
  box-shadow: 0 8px 32px var(--ca-ink-3);
  border: 1px solid rgba(var(--_cream-rgb),.1);
  transform: translateY(120%) scale(0.95);
  opacity: 0;
  transition: transform .4s cubic-bezier(.23,1,.32,1), opacity .3s;
  pointer-events: none;
}
#ca-pwa-install.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.ca-pwa-install__head {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.ca-pwa-install__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ca-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.ca-pwa-install__icon img { width: 100%; height: 100%; object-fit: cover; }
.ca-pwa-install__info { flex: 1; }
.ca-pwa-install__title {
  font-size: 13.5px; font-weight: 800;
  color: var(--ca-cream); line-height: 1.2; margin-bottom: 2px;
}
.ca-pwa-install__sub {
  font-size: 11px; color: rgba(var(--_cream-rgb),.45); line-height: 1.4;
}
.ca-pwa-install__close {
  background: none; border: none; color: rgba(var(--_cream-rgb),.4);
  cursor: pointer; padding: 2px; border-radius: 4px;
  transition: color .15s;
  line-height: 1;
}
.ca-pwa-install__close:hover { color: var(--ca-cream); }
.ca-pwa-install__actions {
  display: flex; gap: 8px;
}
.ca-pwa-install__btn {
  flex: 1; height: 36px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer; border: none; transition: background .2s;
  font-family: inherit;
}
.ca-pwa-install__btn--primary {
  background: var(--ca-accent); color: white;
}
.ca-pwa-install__btn--primary:hover { background: var(--ca-brown); }
.ca-pwa-install__btn--secondary {
  background: rgba(var(--_cream-rgb),.08); color: rgba(var(--_cream-rgb),.6);
}
.ca-pwa-install__btn--secondary:hover { background: rgba(var(--_cream-rgb),.14); }

@media (max-width: 960px) {
  #ca-pwa-install {
    bottom: auto;
    top: auto;
    right: 16px;
    left: 16px;
    bottom: 90px;
    width: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 12C — Castings Destacados (monetization section)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-featured-castings {
  background: linear-gradient(160deg, rgba(108,64,39,.08) 0%, rgba(254,242,216,.03) 100%);
  border-radius: 24px;
  padding: 40px;
  margin: 0 16px;
  border: 1.5px solid var(--ca-border);
}
@media (min-width: 640px) { .ca-featured-castings { margin: 0 24px; padding: 48px; } }
@media (min-width: 1280px) { .ca-featured-castings { max-width: 1280px; margin: 0 auto; } }

.ca-featured-castings__badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  background: var(--ca-yellow);
  border-radius: 99px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ca-ink); margin-bottom: 16px;
}
.ca-featured-castings__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(24px, 3.5vw, 36px); font-weight: 900; line-height: 1.1;
  letter-spacing: -0.8px; color: var(--ca-ink); margin: 0 0 28px;
}
.ca-castings-list {
  display: flex; flex-direction: column; gap: 12px;
}
.ca-casting-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .25s, transform .2s;
}
.ca-casting-item:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 4px 24px var(--ca-border);
  transform: translateY(-2px);
}
.ca-casting-item__logo {
  width: 44px; height: 44px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  background: var(--ca-cream);
  display: flex; align-items: center; justify-content: center;
}
.ca-casting-item__logo img { width: 100%; height: 100%; object-fit: contain; }
.ca-casting-item__body { flex: 1; min-width: 0; }
.ca-casting-item__title {
  font-size: 14px; font-weight: 800; color: var(--ca-ink);
  margin-bottom: 3px; line-height: 1.2;
}
.ca-casting-item__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: rgba(var(--_ink-rgb),.45);
}
.ca-casting-item__tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(var(--_brown-rgb),.07);
  border-radius: 99px; padding: 2px 9px;
  font-size: 11px; font-weight: 700;
  color: var(--ca-brown);
}
.ca-casting-item__deadline {
  margin-left: auto; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800;
  color: var(--ca-accent);
  white-space: nowrap;
}
.ca-casting-item__deadline--urgent { color: var(--ca-error); animation: ca-pulse 2s infinite; }
@keyframes ca-pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* Castings — helpers que reemplazan estilos inline del PHP (CSP-safe) */
.ca-castings-hero { padding-bottom: 40px; }
.ca-castings-hero__title { margin-bottom: 16px; }
.ca-castings-hero__sub { margin-bottom: 0; }
.ca-castings-hero__sub strong { color: var(--ca-ink); }
.ca-castings-list {
  max-width: 800px;
  display: flex; flex-direction: column; gap: 12px;
}
.ca-casting-item__logo-fallback { font-size: 18px; font-weight: 900; color: var(--ca-brown); }
.ca-casting-item__company { font-weight: 700; color: var(--ca-brown); }
.ca-casting-item__side { flex-shrink: 0; text-align: right; }
.ca-casting-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800;
  color: var(--ca-accent); margin-top: 6px;
}
.ca-casting-badge {
  margin-left: 6px; font-size: 10px; font-weight: 900;
  border-radius: 99px; padding: 1px 8px;
}
.ca-casting-badge--urgent { background: #fee2e2; color: #ef4444; }
.ca-casting-badge--featured { background: rgba(248,169,31,.15); color: var(--ca-yellow,#f8a91f); }
.ca-casting-empty { text-align: center; padding: 60px 0; }
.ca-casting-empty__icon { font-size: 48px; margin-bottom: 16px; }
.ca-casting-empty__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 32px; font-weight: 900; color: var(--ca-ink); margin: 0 0 10px;
}
.ca-casting-empty__text { font-size: 15px; color: rgba(var(--_ink-rgb),.45); margin: 0 0 28px; }
.ca-type-empty { text-align: center; padding: 48px 0; }
.ca-type-empty__icon { font-size: 40px; margin-bottom: 12px; }
.ca-type-empty__text { font-size: 15px; color: rgba(var(--_ink-rgb),.45); margin: 0 0 18px; }
.ca-casting-empty__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
}
.ca-empty-alert-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--ca-accent);
  text-decoration: none; padding: 10px 16px; border-radius: 99px;
  border: 1px solid rgba(236,100,38,.28); transition: background .2s, border-color .2s;
}
.ca-empty-alert-link:hover { background: rgba(236,100,38,.08); border-color: var(--ca-accent); }
html.ca-dark .ca-empty-alert-link { color: #f8a91f; border-color: rgba(248,169,31,.3); }
html.ca-dark .ca-empty-alert-link:hover { background: rgba(248,169,31,.12); border-color: rgba(248,169,31,.55); }
.ca-casting-cta {
  margin-top: 60px; padding: 32px;
  background: rgba(254,242,216,.5);
  border: 1.5px solid var(--ca-border); border-radius: 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.ca-casting-cta__text { flex: 1; min-width: 200px; }
.ca-casting-cta__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ca-accent); margin-bottom: 6px;
}
.ca-casting-cta__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(20px,3vw,28px); font-weight: 900;
  letter-spacing: -0.5px; color: var(--ca-ink); margin: 0 0 6px;
}
.ca-casting-cta__sub { font-size: 13.5px; color: rgba(var(--_ink-rgb),.5); margin: 0; }
.ca-casting-alerts__loggedin {
  font-size: 13px; font-weight: 700; color: var(--ca-brown,#6c4027);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.ca-castings-alertwrap { max-width: 640px; margin: 0 auto 60px; padding: 0 20px; }

/* Auth pages — sección con padding propio (reemplaza inline) */
.ca-auth-section { padding: 48px 0 80px; }

/* Guardados — botón "eliminar todos" (reemplaza onmouseover/onmouseout inline) */
.ca-bookmarks-clear { margin-top: 32px; text-align: right; }
.ca-bookmarks-clear__btn {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700;
  color: var(--ca-ink-3, rgba(26,15,9,.35));
  transition: color .15s;
}
.ca-bookmarks-clear__btn:hover { color: #ef4444; }

/* Mi progreso — helpers que reemplazan estilos inline del PHP (CSP-safe) */
.ca-progress-section { padding: 40px 0 80px; }
.ca-progress-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 768px) {
  .ca-progress-layout { grid-template-columns: 1fr; }
}
.ca-progress-card-gap { margin-bottom: 28px; }
.ca-progress-block { margin-bottom: 32px; }
.ca-progress-streak {
  margin-top: 12px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ca-ink-2, rgba(26,15,9,.6));
}
.ca-progress-streak__icon { font-size: 18px; }
.ca-progress-maxrank {
  font-size: 13px; color: var(--ca-ink-2, rgba(26,15,9,.5));
  text-align: center; padding: 6px 0;
}
.ca-progress-h2 {
  font-size: 16px; font-weight: 900; color: var(--ca-ink, #1a0f09);
  margin-bottom: 16px;
}
.ca-progress-h2__count {
  font-size: 12px; font-weight: 700;
  color: var(--ca-ink-2, rgba(26,15,9,.4)); margin-left: 8px;
}
.ca-progress-empty { text-align: center; padding: 48px 24px; }
.ca-progress-empty__icon { font-size: 40px; margin-bottom: 12px; }
.ca-progress-empty__title { font-size: 16px; font-weight: 800; color: var(--ca-ink, #1a0f09); margin-bottom: 8px; }
.ca-progress-empty__text { font-size: 13px; color: var(--ca-ink-2, rgba(26,15,9,.5)); max-width: 340px; margin: 0 auto 20px; }

/* Estados de carga / error de la página de progreso */
.ca-progress-status {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 64px 24px;
}
.ca-progress-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--ca-border, rgba(108,64,39,.15));
  border-top-color: var(--ca-accent, #ec6426);
  border-radius: 50%;
  animation: ca-spin .7s linear infinite;
}
.ca-progress-status__icon { font-size: 40px; }
.ca-progress-status__title { font-size: 16px; font-weight: 800; color: var(--ca-ink, #1a0f09); }
.ca-progress-status__text { font-size: 13px; color: var(--ca-ink-2, rgba(26,15,9,.55)); max-width: 380px; margin: 0; }
.ca-progress-status__text a { color: var(--ca-accent, #ec6426); font-weight: 600; }
.ca-progress-status--error .ca-btn { margin-top: 4px; }
.ca-earn-panel {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ca-border, rgba(108,64,39,.1));
  border-radius: 20px; padding: 20px;
}
.ca-earn-panel__title {
  font-size: 13px; font-weight: 900; color: var(--ca-ink, #1a0f09);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px;
}
.ca-earn-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--ca-border, rgba(108,64,39,.06));
}
.ca-earn-row:last-child { border-bottom: none; }
.ca-earn-row__icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.ca-earn-row__label { font-size: 12.5px; color: var(--ca-ink, rgba(26,15,9,.7)); flex: 1; }
.ca-earn-row__pts { font-size: 12px; font-weight: 800; color: #ec6426; }
.ca-leaderboard__row.is-me { background: rgba(236,100,38,.05); }
.ca-leaderboard__you { font-size: 10px; color: #ec6426; font-weight: 700; }

/* Sponsor note */
.ca-featured-castings__footer {
  margin-top: 20px;
  font-size: 11px; color: var(--ca-ink-3); text-align: right;
}
.ca-featured-castings__footer a { color: var(--ca-brown); }

/* ─────────────────────────────────────────────────────────────────────────
   Header search — compact variant
   ─────────────────────────────────────────────────────────────────────────*/
.ca-header__search {
  width: 200px;
  transition: width .3s ease;
}
.ca-header__search:focus-within { width: 280px; }
@media (max-width: 1100px) {
  .ca-header__search { width: 160px; }
  .ca-header__search:focus-within { width: 220px; }
}
@media (max-width: 960px) {
  /* Hide in mobile header — available in blog.php only */
  .ca-header__search { display: none; }
}
.ca-header__search #ca-search-input {
  height: 36px;
  font-size: 13px;
  background: rgba(var(--_ink-rgb),.05);
  border-color: transparent;
}
.ca-header__search #ca-search-input:focus {
  background: var(--ca-surface);
  border-color: var(--ca-border);
}
.ca-header__search #ca-search-results {
  top: calc(100% + 6px);
  width: 320px;
  right: 0; left: auto;
}

/* Blog search — full width, larger */
.ca-blog-search #ca-search-input {
  height: 50px;
  font-size: 15px;
  padding-left: 48px;
}
.ca-blog-search .ca-search-icon {
  width: 18px; height: 18px; left: 16px;
}
.ca-blog-search #ca-search-results {
  border-radius: 20px;
}

/* Filter pills wrap */
.ca-blog-filters__pills {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ca-blog-filters__pills::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Pagination
   ─────────────────────────────────────────────────────────────────────────*/
.ca-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; margin-top: 48px;
}
.ca-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 99px;
  border: 1.5px solid var(--ca-border);
  background: var(--ca-surface);
  font-size: 13px; font-weight: 700;
  color: var(--ca-ink-2); text-decoration: none;
  transition: all .2s;
}
.ca-pagination__btn:hover {
  border-color: var(--ca-brown);
  color: var(--ca-brown);
}
.ca-pagination__btn.is-active {
  background: var(--ca-ink);
  border-color: var(--ca-ink);
  color: var(--ca-cream);
}

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 15 — Comments
   ─────────────────────────────────────────────────────────────────────────*/
.ca-comments {
  border-top: 1.5px solid var(--ca-border);
  padding-top: 48px;
}
.container.medium { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.ca-comments__head { margin-bottom: 28px; }
.ca-comments__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900; letter-spacing: -0.5px;
  color: var(--ca-ink); margin: 0;
}
.ca-comments__sub {
  font-size: 16px; font-weight: 800; color: var(--ca-ink);
  margin: 32px 0 16px;
}

.ca-comments__notice {
  padding: 12px 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.ca-comments__notice--ok      { background: var(--ca-success-bg); color: var(--_green-dark,#166534); }
.ca-comments__notice--pending { background: var(--ca-warning-bg); color: var(--_amber-dark,#92400e); }
.ca-comments__notice--err     { background: var(--ca-error-bg); color: var(--_red-dark,#991b1b); }

/* Single comment */
.ca-comment {
  display: flex; gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(26,15,9,.06);
}
.ca-comment:last-child { border-bottom: none; }
.ca-comment--reply { padding: 12px 0 12px 0; }

.ca-comment__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ca-brown), var(--ca-accent));
  color: var(--ca-cream);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; flex-shrink: 0;
}
.ca-comment__avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.ca-comment__body { flex: 1; min-width: 0; }
.ca-comment__meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.ca-comment__author {
  font-size: 14px; font-weight: 800; color: var(--ca-ink);
}
.ca-comment__url { font-size: 12px; color: var(--ca-brown); }
.ca-comment__date {
  font-size: 11.5px; color: var(--ca-ink-3);
}
.ca-comment__reply-btn {
  background: none; border: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--ca-accent);
  padding: 0; transition: color .15s;
}
.ca-comment__reply-btn:hover { color: var(--ca-brown); }
.ca-comment__text {
  font-size: 14px; line-height: 1.7; color: rgba(var(--_ink-rgb),.75);
}
.ca-comment__replies {
  margin-top: 12px; margin-left: 0;
  border-left: 2.5px solid var(--ca-border);
  padding-left: 16px;
}

/* Comment form */
.ca-comment-form-wrap { margin-top: 40px; }
.ca-comment-form { display: flex; flex-direction: column; gap: 14px; }
.ca-comment-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 540px) { .ca-comment-form__row { grid-template-columns: 1fr; } }
.ca-comment-form__field { display: flex; flex-direction: column; gap: 5px; }
.ca-comment-form__label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--ca-ink-2); text-transform: uppercase;
}
.ca-comment-form__input,
.ca-comment-form__textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--ca-border);
  border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--ca-ink);
  background: var(--ca-surface); outline: none;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.ca-comment-form__input:focus,
.ca-comment-form__textarea:focus {
  border-color: var(--ca-brown);
  box-shadow: 0 0 0 3px rgba(var(--_brown-rgb),.08);
}
.ca-comment-form__count {
  font-size: 11px; color: var(--ca-ink-3); text-align: right; margin-top: 2px;
}
.ca-comment-form__submit {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px;
  background: var(--ca-ink); color: var(--ca-cream);
  border: none; border-radius: 99px;
  font-size: 13.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; transition: background .2s;
}
.ca-comment-form__submit:hover { background: var(--ca-brown); }
.ca-comment-form__cancel {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ca-ink-3);
  transition: color .15s;
}
.ca-comment-form__cancel:hover { color: var(--ca-ink); }

/* ─── sprint17.css ───────────────────────────────────────────────────── */
/* ═════════════════════════════════════════════════════════════════════════
   Casting and Acting — Sprint 17 CSS
   Author hero · Static pages · Search results · Print · Dark mode toggle
   ═════════════════════════════════════════════════════════════════════════*/

/* ─────────────────────────────────────────────────────────────────────────
   Author Hero
   ─────────────────────────────────────────────────────────────────────────*/
.ca-author-hero {
  padding: 60px 0 48px;
  border-bottom: 1.5px solid var(--ca-border);
  background: linear-gradient(180deg, rgba(254,242,216,.45) 0%, rgba(254,242,216,0) 100%);
}
.ca-author-hero__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .ca-author-hero__inner { grid-template-columns: 1fr; }
}

.ca-author-hero__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ca-brown), var(--ca-accent));
  display: flex; align-items: center; justify-content: center;
  border: 3px solid white;
  box-shadow: 0 0 0 3px var(--ca-brown), 0 12px 32px var(--ca-border-2);
}
.ca-author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ca-author-hero__avatar-init {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 36px; font-weight: 900;
  color: var(--ca-cream); letter-spacing: -1px;
}

.ca-author-hero__info { min-width: 0; }
.ca-author-hero__eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 900; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 6px;
}
.ca-author-hero__name {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 900; line-height: 1.0; letter-spacing: -1.5px;
  color: var(--ca-ink); margin: 0 0 10px;
}
.ca-author-hero__tagline {
  font-size: 15px; color: var(--ca-ink-2);
  line-height: 1.6; margin: 0 0 16px;
  max-width: 520px;
}
.ca-author-hero__specs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}

.ca-author-hero__stats {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 20px;
}
.ca-author-stat { text-align: left; }
.ca-author-stat__value {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 28px; font-weight: 900;
  line-height: 1; color: var(--ca-ink);
  display: block;
}
.ca-author-stat__label {
  font-size: 11px; color: var(--ca-ink-3);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.ca-author-stat__sep {
  width: 1px; height: 32px;
  background: var(--ca-border);
}

.ca-author-hero__social {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ca-author-social-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ca-ink); font-size: 15px;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.ca-author-social-btn:hover {
  background: var(--ca-ink); border-color: var(--ca-ink);
  color: white; transform: translateY(-2px);
}

.ca-author-hero__bio {
  max-width: 680px;
  padding: 24px;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 16px;
  font-size: 15px; line-height: 1.8; color: rgba(var(--_ink-rgb),.7);
}

/* ─────────────────────────────────────────────────────────────────────────
   Static pages (about, contact, privacy, terms)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-static-hero {
  padding: 72px 0 56px;
  border-bottom: 1.5px solid var(--ca-border);
  background: linear-gradient(160deg, rgba(var(--_cream-rgb),.6) 0%, transparent 70%);
}
.ca-static-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
}
@media (max-width: 768px) {
  .ca-static-hero__inner { grid-template-columns: 1fr; }
  .ca-static-hero__img { display: none; }
}
.ca-static-hero__eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ca-accent);
  margin-bottom: 12px;
}
.ca-static-hero__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 900; line-height: 1.0; letter-spacing: -2px;
  color: var(--ca-ink); margin: 0 0 18px;
}
.ca-static-hero__title em { color: var(--ca-accent); font-style: normal; }
.ca-static-hero__sub {
  font-size: 16px; line-height: 1.8; color: var(--ca-ink-2);
  max-width: 540px; margin: 0 0 28px;
}
.ca-static-hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.ca-static-stats {
  display: flex; align-items: center;
  gap: 0; flex-wrap: wrap;
}
.ca-static-stat {
  flex: 1; min-width: 120px;
  text-align: center; padding: 16px 20px;
}
.ca-static-stat__value {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 36px; font-weight: 900;
  color: var(--ca-cream); display: block; line-height: 1;
}
.ca-static-stat__label {
  font-size: 11px; color: rgba(var(--_cream-rgb),.5);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin-top: 4px; display: block;
}
.ca-static-stat__div {
  width: 1px; height: 40px;
  background: rgba(var(--_cream-rgb),.15);
}
@media (max-width: 480px) {
  .ca-static-stat__div { display: none; }
  .ca-static-stat { min-width: 50%; }
}

.ca-static-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 900px) { .ca-static-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .ca-static-grid { grid-template-columns: 1fr; } }

.ca-static-card {
  padding: 28px;
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 20px;
  transition: box-shadow .25s, transform .2s;
}
.ca-static-card:hover {
  box-shadow: 0 8px 32px var(--ca-border);
  transform: translateY(-3px);
}
.ca-static-card__icon {
  font-size: 32px; margin-bottom: 14px; display: block;
}
.ca-static-card__title {
  font-size: 16px; font-weight: 900;
  color: var(--ca-ink); margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.ca-static-card__text {
  font-size: 13.5px; line-height: 1.7;
  color: var(--ca-ink-2); margin: 0;
}

/* Legal page prose */
.ca-legal-prose {
  max-width: 760px; margin: 0 auto;
  padding: 60px 24px 80px;
}
.ca-legal-prose h1 {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(32px,5vw,52px); font-weight: 900;
  letter-spacing: -1.5px; color: var(--ca-ink);
  margin: 0 0 8px;
}
.ca-legal-prose .ca-legal-meta {
  font-size: 12px; color: var(--ca-ink-3);
  margin-bottom: 36px; display: block;
}
.ca-legal-prose h2 {
  font-size: 18px; font-weight: 900; color: var(--ca-ink);
  margin: 36px 0 10px; letter-spacing: -0.3px;
}
.ca-legal-prose p, .ca-legal-prose li {
  font-size: 14.5px; line-height: 1.85; color: rgba(var(--_ink-rgb),.65);
}
.ca-legal-prose ul { padding-left: 20px; }
.ca-legal-prose a { color: var(--ca-brown); }
.ca-legal-prose a:hover { color: var(--ca-accent); }

/* Contact cards */
.ca-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin: 40px 0;
}
.ca-contact-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 18px; text-decoration: none;
  transition: border-color .2s, box-shadow .25s, transform .2s;
}
.ca-contact-card:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 6px 24px var(--ca-border);
  transform: translateY(-2px);
}
.ca-contact-card__icon { font-size: 28px; }
.ca-contact-card__title {
  font-size: 14px; font-weight: 900; color: var(--ca-ink);
}
.ca-contact-card__desc {
  font-size: 12.5px; color: rgba(var(--_ink-rgb),.45); line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   Static pages — helpers (reemplazan estilos inline del PHP original, CSP-safe)
   ─────────────────────────────────────────────────────────────────────────*/

/* Legal: eyebrow + botón volver */
.ca-legal-eyebrow { display: inline-block; margin-bottom: 12px; }
.ca-legal-back {
  margin-top: 40px; padding-top: 24px;
  border-top: 1.5px solid var(--ca-border);
}

/* About: imagen del hero */
.ca-about-castina { max-height: 300px; mix-blend-mode: multiply; }

/* About: banda de stats sobre fondo oscuro */
.ca-about-statband { background: var(--ca-ink); padding: 40px 0; }

/* About: bloque misión */
.ca-about-mission { background: rgba(254,242,216,.4); padding: 72px 0; }
.ca-about-mission__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.ca-about-mission__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ca-accent);
  display: block; margin-bottom: 16px;
}
.ca-about-mission__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(28px,4vw,48px); font-weight: 900;
  line-height: 1.1; letter-spacing: -1px;
  color: var(--ca-ink); margin: 0 0 20px;
}
.ca-about-mission__text {
  font-size: 16px; line-height: 1.8; color: rgba(var(--_ink-rgb),.6);
}

/* About: CTA newsletter */
.ca-about-nl { text-align: center; }
.ca-about-nl__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(28px,4vw,44px); font-weight: 900;
  letter-spacing: -1px; color: var(--ca-ink); margin: 0 0 12px;
}
.ca-about-nl__sub { font-size: 15px; color: rgba(var(--_ink-rgb),.5); margin: 0 0 28px; }
.ca-about-nl__form {
  display: flex; gap: 10px; max-width: 440px;
  margin: 0 auto; flex-wrap: wrap; justify-content: center;
}
.ca-about-nl__input {
  flex: 1; min-width: 200px; height: 48px; padding: 0 18px;
  border: 1.5px solid var(--ca-border); border-radius: 99px;
  font-size: 14px; font-family: inherit;
  background: var(--ca-surface); color: var(--ca-ink); outline: none;
}
.ca-about-nl__btn { height: 48px; }
.ca-about-nl__msg { margin: 18px 0 0; font-size: 14px; font-weight: 700; color: var(--ca-ink-2); }

/* Contact: layout 2 columnas + form */
.ca-contact-hero { padding-bottom: 40px; }
.ca-contact-hero__title { margin-bottom: 16px; }
.ca-contact-hero__sub { margin: 0; }
.ca-contact-layout {
  display: grid; grid-template-columns: 1fr 420px;
  gap: 48px; align-items: start;
}
@media (max-width: 860px) {
  .ca-contact-layout { grid-template-columns: 1fr; }
}
.ca-contact-h2 {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
  color: var(--ca-ink); margin: 0 0 20px;
}
.ca-contact-form { display: flex; flex-direction: column; gap: 14px; }
.ca-contact-honeypot { display: none; position: absolute; left: -9999px; }
.ca-contact-field { display: flex; flex-direction: column; gap: 5px; }
.ca-contact-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: rgba(var(--_ink-rgb),.45);
}
.ca-contact-input {
  height: 46px; padding: 0 16px;
  border: 1.5px solid var(--ca-border); border-radius: 12px;
  font-size: 14px; font-family: inherit;
  background: var(--ca-surface); color: var(--ca-ink);
  outline: none; transition: border-color .2s;
}
.ca-contact-input:focus { border-color: var(--ca-brown); }
.ca-contact-textarea { height: auto; padding: 14px 16px; resize: vertical; }
.ca-contact-submit { align-self: flex-start; height: 48px; padding: 0 28px; }
.ca-contact-alert {
  padding: 16px 20px; border-radius: 14px;
  font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
.ca-contact-alert--ok { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; }
.ca-contact-alert--err { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }

/* ─────────────────────────────────────────────────────────────────────────
   Comment count pill on post cards
   ─────────────────────────────────────────────────────────────────────────*/
.ca-post-card__meta .ca-comment-count {
  display: inline-flex; align-items: center; gap: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   JobPosting / Castings section (homepage + post sidebar)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-castings-section {
  padding: 60px 0;
  background: linear-gradient(180deg, var(--ca-bg-soft, rgba(var(--_cream-rgb),.3)) 0%, transparent 100%);
}

/* dark-toggle legacy rule removed — canonical definition in header section */

/* dark mode classes applied to <html> */
html.ca-dark body { background: #100a06; color: var(--ca-ink); }
html.ca-dark .ca-post-card,
html.ca-dark .ca-static-card,
html.ca-dark .ca-contact-card { background: rgba(255,255,255,.05); }
html.ca-dark .ca-author-hero { background: rgba(255,255,255,.03); }
html.ca-dark .ca-dark-toggle { background: #1e120c; border-color: rgba(240,237,231,.15); }

/* ─────────────────────────────────────────────────────────────────────────
   Search results page specific
   ─────────────────────────────────────────────────────────────────────────*/
.ca-search-wrap { position: relative; }
.ca-search-input-wrap { position: relative; }

/* ─────────────────────────────────────────────────────────────────────────
   Print CSS — article reader
   ─────────────────────────────────────────────────────────────────────────*/
@media print {
  /* Hide everything not content */
  .ca-header, header, .ca-mobile-menu,
  #ca-read-progress, .ca-fab-toggle,
  .ca-post-share, .ca-related-mobile,
  .ca-comments, .ca-next-article-drawer,
  .ca-sidebar, footer, .ca-castina-cta,
  .ca-dark-toggle, .progress-wrap,
  script, noscript, [aria-hidden="true"],
  .ca-pwa-banner, #ca-search-results,
  nav, .ca-post-card__link, .ca-pagination,
  .hbg-btn, .s8-section-link { display: none !important; }

  body { background: white !important; color: var(--ca-ink) !important; font-size: 12pt; }

  .ca-post-hero { padding: 0 !important; background: none !important; }
  .ca-post-hero__title { font-size: 24pt !important; }
  .ca-post-body { max-width: 100% !important; margin: 0 !important; }
  .ca-post-body img { max-width: 100% !important; page-break-inside: avoid; }
  .ca-post-body a::after { content: " (" attr(href) ")"; font-size: 10pt; color: var(--ca-ink-2); }
  .ca-post-body a[href^="#"]::after { display: none; }
  h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Print header */
  .ca-post-hero::before {
    content: "Casting and Acting — castingandacting.com";
    display: block; font-size: 10pt; color: var(--ca-ink-3);
    border-bottom: 1px solid #ddd; padding-bottom: 8px; margin-bottom: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Focus / reading mode
   ─────────────────────────────────────────────────────────────────────────*/
body.ca-focus-mode .ca-sidebar,
body.ca-focus-mode .ca-related-mobile,
body.ca-focus-mode .ca-next-article-drawer { opacity: 0; pointer-events: none; }
body.ca-focus-mode .ca-post-body .container.large { max-width: 680px; }
body.ca-focus-mode .ca-post-body { font-size: 17px; line-height: 1.95; }

.ca-focus-btn {
  position: fixed; top: 80px; right: 20px; z-index: 300;
  display: none;
  align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 99px; font-size: 11.5px; font-weight: 700;
  color: var(--ca-ink-2); cursor: pointer;
  transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.is-post .ca-focus-btn { display: inline-flex; }
.ca-focus-btn:hover { border-color: var(--ca-brown); color: var(--ca-brown); }
body.ca-focus-mode .ca-focus-btn {
  background: var(--ca-ink); color: var(--ca-cream); border-color: var(--ca-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin: tags input preview pills
   ─────────────────────────────────────────────────────────────────────────*/
.ca-tags-preview { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.ca-tags-preview span {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  background: var(--ca-border); color: var(--ca-brown,var(--ca-brown));
  border-radius: 99px; font-size: 11.5px; font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   Sprint 18 — Filter pill active state
   ─────────────────────────────────────────────────────────────────────────*/
.ca-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 99px; font-size: 12.5px; font-weight: 700;
  color: rgba(var(--_ink-rgb),.65); text-decoration: none;
  transition: border-color .18s, background .18s, color .18s;
  white-space: nowrap;
}
.ca-filter-pill:hover { border-color: var(--ca-brown); color: var(--ca-brown); }
.ca-filter-pill.is-active {
  background: var(--ca-ink); border-color: var(--ca-ink);
  color: var(--ca-cream);
}
.ca-filter-pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: rgba(var(--_ink-rgb),.08); border-radius: 99px;
  font-size: 10px; font-weight: 900;
}
.ca-filter-pill.is-active .ca-filter-pill__count {
  background: rgba(var(--_cream-rgb),.2);
}

/* Botón limpiar filtros */
.ca-filter-clear {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px;
  background: transparent; border: none;
  border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ca-accent);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.ca-filter-clear:hover { background: rgba(236,100,38,.1); color: var(--ca-accent-hover, #d4531e); }
html.ca-dark .ca-filter-clear { color: #f8a91f; }
html.ca-dark .ca-filter-clear:hover { background: rgba(248,169,31,.15); }

/* ─── sprint19.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 19 CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reactions ────────────────────────────────────────────────────────────── */
.ca-reactions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1.5px solid var(--ca-border);
  border-bottom: 1.5px solid var(--ca-border);
  margin: 28px 0;
}
.ca-reactions__label {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ca-ink-3);
  flex-shrink: 0;
}
.ca-reactions__btns {
  display: flex; gap: 8px; align-items: center;
}
.ca-react-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  background: rgba(var(--_cream-rgb),.6);
  border: 1.5px solid var(--ca-border);
  border-radius: 99px; cursor: pointer;
  transition: all .18s; font-size: 13px; font-weight: 700;
  color: var(--ca-ink-2);
}
.ca-react-btn:hover { border-color: var(--ca-brown); color: var(--ca-brown); transform: translateY(-1px); }
.ca-react-btn.is-active {
  background: var(--ca-ink); border-color: var(--ca-ink);
  color: var(--ca-cream);
  animation: pop .25s cubic-bezier(.34,1.56,.64,1);
}
.ca-react-btn__emoji { font-size: 16px; line-height: 1; }
.ca-react-btn__count { font-size: 12px; font-weight: 800; min-width: 14px; }

/* ── Bookmark button ──────────────────────────────────────────────────────── */
.ca-post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 8px;
}
.ca-post-actions .ca-post-share { margin-bottom: 0; }

.ca-bookmark-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px;
  margin-left: auto;
  background: transparent;
  border: 1.5px solid var(--ca-border);
  border-radius: 99px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  color: var(--ca-ink-2);
  transition: all .18s;
}
.ca-bookmark-btn:hover { border-color: var(--ca-brown); color: var(--ca-brown); }
.ca-bookmark-btn.is-saved {
  background: var(--ca-ink); border-color: var(--ca-ink);
  color: var(--ca-cream);
}
.ca-bookmark-btn.is-saved svg { fill: var(--ca-yellow); stroke: var(--ca-yellow); }

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (max-width: 640px) {
  .ca-reactions { gap: 10px; }
  .ca-bookmark-btn { margin-left: 0; }
  .ca-reactions__label { display: none; }
}

/* ── Admin: gallery picker toolbar button ─────────────────────────────────── */
.admin-toolbar__button--gallery {
  margin-left: auto;
  background: var(--ca-accent-2-subtle);
  color: var(--ca-accent-2);
  border-color: rgba(var(--_yellow-rgb),.3);
}
.admin-toolbar__button--gallery:hover {
  background: rgba(var(--_yellow-rgb),.25);
}

/* ── TOC sidebar: active link highlight ───────────────────────────────────── */
.toc-sidebar__link.is-active {
  color: var(--ca-brown);
  font-weight: 800;
}
.toc-sidebar__link.is-active::before {
  opacity: 1;
  background: var(--ca-brown);
}

/* ── Pagination (castings page) ───────────────────────────────────────────── */
.ca-pagination {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.ca-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 10px; font-size: 13px; font-weight: 700;
  color: rgba(var(--_ink-rgb),.65); text-decoration: none;
  transition: all .15s;
}
.ca-pagination__btn:hover { border-color: var(--ca-brown); color: var(--ca-brown); }
.ca-pagination__btn.is-active {
  background: var(--ca-ink); border-color: var(--ca-ink);
  color: var(--ca-cream);
}

/* ── Static hero variants ─────────────────────────────────────────────────── */
.ca-static-hero {
  padding: clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);
}
.ca-static-hero__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--ca-accent);
  display: block; margin-bottom: 12px;
}
.ca-static-hero__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(38px, 6.5vw, 72px);
  font-weight: 900; letter-spacing: -2px; line-height: 0.95;
  color: var(--ca-ink); margin: 0 0 18px;
}
.ca-static-hero__sub {
  font-size: clamp(14.5px, 2vw, 17px); line-height: 1.65;
  color: var(--ca-ink-2); max-width: 540px; margin: 0;
}
.ca-static-hero--dark .ca-static-hero__title { color: var(--ca-cream); }
.ca-static-hero--dark .ca-static-hero__sub { color: rgba(var(--_cream-rgb),.65); }

/* ── SMTP admin test button ───────────────────────────────────────────────── */
.smtp-status-ok   { color: var(--ca-success); font-weight: 700; }
.smtp-status-miss { color: rgba(var(--_white-rgb),.4); }

/* ─── sprint20.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 20 — Mobile UI fix + new features
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE BOTTOM UI — fix completo del stack de elementos flotantes
   
   Pantalla mobile (<860px) tiene:
     TOP:    progress bar (z 10000, no issue)
     BOTTOM: 
       ① Next-article drawer  — bottom 0,     z 200   (full width)
       ② Float share pill     — bottom 84px,  z 900   (left side)
       ③ FAB menu toggle      — bottom 24px,  z 9500  (right, fixed)
       ④ Castina tip          — bottom 150px, z 8500  (right side)

   La barra compartir se oculta vía JS cuando el drawer está visible.
   Sin solapamientos, sin cubrir texto.
   ─────────────────────────────────────────────────────────────────────────*/

/* ── Float share pill: izquierda, altura segura sobre la barra inferior ── */
@media (max-width: 859px) {
  .ca-float-share {
    left: 12px;
    right: auto;
    bottom: 82px;
    transform: translateX(0) translateY(70px);
    opacity: 0;
    max-width: calc(100vw - 88px); /* nunca toca el FAB */
    padding: 6px 12px;
    gap: 4px;
    border-radius: 40px;
  }
  .ca-float-share.is-visible {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  .ca-float-share__label { display: none !important; }
  .ca-float-share__btn {
    width: 32px;
    height: 32px;
  }
  /* When drawer is open, float share must disappear (also handled by JS) */
  body.ca-drawer-open .ca-float-share {
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) translateY(70px);
  }
}

/* FAB fixed bottom positioning removed — hamburger now lives inside the header pill */

/* ── Next article drawer: full width, z below everything else ─────────── */
#ca-next-article {
  z-index: 200 !important;
}
/* When drawer visible — content padding so body text doesn't hide under it */
body.ca-drawer-open {
  padding-bottom: 72px;
  transition: padding-bottom .4s cubic-bezier(.23,1,.32,1);
}

/* ── Castina tip: above float share, below FAB ────────────────────────── */
@media (max-width: 860px) {
  .ca-castina-tip {
    bottom: 148px;
    right: 12px;
    max-width: 195px;
    z-index: 8500 !important;
  }
  .ca-castina-tip__img { width: 38px; }
  body.ca-drawer-open .ca-castina-tip {
    bottom: 222px;
  }
}

/* ── Reading progress: always on top ─────────────────────────────────── */
#ca-read-progress { z-index: 10000 !important; }

/* ── Cookie consent: above everything ─────────────────────────────────── */
#ca-cookie-banner { z-index: 19999 !important; }


/* ─────────────────────────────────────────────────────────────────────────
   CRON / SCHEDULED POSTS — badge in admin nav
   ─────────────────────────────────────────────────────────────────────────*/
.admin-nav__badge-sched {
  margin-left: auto;
  background: var(--ca-accent-2);
  color: var(--ca-ink);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 900;
}

/* ─────────────────────────────────────────────────────────────────────────
   NEWSLETTER BROADCAST
   ─────────────────────────────────────────────────────────────────────────*/
.ca-broadcast-editor {
  width: 100%;
  min-height: 220px;
  background: rgba(var(--_white-rgb),.05);
  border: 1.5px solid rgba(var(--_white-rgb),.12);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  font-family: inherit;
  transition: border-color .18s;
}
.ca-broadcast-editor:focus {
  outline: none;
  border-color: rgba(var(--_lime-rgb,184,255,0),.35);
}
.ca-broadcast-preview {
  background: var(--ca-cream);
  border-radius: 14px;
  padding: 28px;
  max-width: 580px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────────────────────────────────────
   OG IMAGE — placeholder style when no image
   ─────────────────────────────────────────────────────────────────────────*/
.og-preview-placeholder {
  background: var(--ca-ink);
  border-radius: 12px;
  aspect-ratio: 1200/630;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  max-width: 320px;
}

/* ─────────────────────────────────────────────────────────────────────────
   AFFILIATE LINK MANAGER
   ─────────────────────────────────────────────────────────────────────────*/
.ca-affiliate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ca-accent-2-subtle);
  color: var(--ca-accent-2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   COOKIE CONSENT BANNER
   ─────────────────────────────────────────────────────────────────────────*/
#ca-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 19999;
  background: rgba(var(--_ink-rgb),.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1.5px solid rgba(var(--_cream-rgb),.12);
  padding: 16px 24px;
  display: none;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
#ca-cookie-banner.is-visible {
  display: flex;
  transform: translateY(0);
}
.ca-cookie-banner__text {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(var(--_cream-rgb),.75);
}
.ca-cookie-banner__text a { color: var(--ca-yellow, var(--ca-accent-2)); }
.ca-cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ca-cookie-accept {
  height: 36px; padding: 0 18px;
  background: var(--ca-accent, var(--ca-accent));
  color: white; font-size: 12.5px; font-weight: 800;
  border: none; border-radius: 99px; cursor: pointer;
  transition: background .18s;
}
.ca-cookie-accept:hover { background: var(--ca-brown, var(--ca-brown)); }
.ca-cookie-decline {
  height: 36px; padding: 0 14px;
  background: transparent;
  color: rgba(var(--_cream-rgb),.5); font-size: 12px; font-weight: 700;
  border: 1px solid rgba(var(--_cream-rgb),.15); border-radius: 99px; cursor: pointer;
  transition: all .18s;
}
.ca-cookie-decline:hover { color: var(--ca-cream, var(--ca-cream)); border-color: rgba(var(--_cream-rgb),.35); }
@media (max-width: 480px) {
  #ca-cookie-banner { padding: 14px 16px; }
  .ca-cookie-banner__actions { width: 100%; }
  .ca-cookie-accept, .ca-cookie-decline { flex: 1; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   /GUARDADOS/ — Bookmarks page
   ─────────────────────────────────────────────────────────────────────────*/
.ca-bookmarks-empty {
  text-align: center;
  padding: 80px 24px;
}
.ca-bookmarks-empty__icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: .35;
}
.ca-bookmarks-empty__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--ca-ink);
  margin: 0 0 10px;
}
.ca-bookmarks-empty__sub {
  font-size: 14px;
  color: var(--ca-ink-2, rgba(26,15,9,.5));
  margin: 0 0 24px;
}
.ca-bookmarks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.ca-bookmark-card {
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .18s, box-shadow .18s;
}
.ca-bookmark-card:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 4px 16px var(--ca-border);
}
.ca-bookmark-card__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ca-ink);
  line-height: 1.3;
  text-decoration: none;
}
.ca-bookmark-card__title:hover { color: var(--ca-brown); }
.ca-bookmark-card__meta {
  font-size: 11.5px;
  color: var(--ca-ink-3);
}
.ca-bookmark-card__remove {
  margin-top: auto;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--ca-ink-3);
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: color .15s;
}
.ca-bookmark-card__remove:hover { color: var(--ca-error); }

/* ─────────────────────────────────────────────────────────────────────────
   CASTING CLICK TRACKING — admin indicator
   ─────────────────────────────────────────────────────────────────────────*/
.ca-click-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(var(--_white-rgb),.5);
}
.ca-click-pill--hot { color: var(--ca-accent-2); }

/* ─── sprint21.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 21
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   AUTHOR CARD — sidebar widget
   ─────────────────────────────────────────────────────────────────────────*/
.ca-author-card {
  background: var(--ca-cream, var(--ca-cream));
  border: 1.5px solid var(--ca-border);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
}
.ca-author-card__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ca-ink); color: var(--ca-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
  flex-shrink: 0; overflow: hidden;
}
.ca-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ca-author-card__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ca-author-card__name {
  font-size: 14.5px; font-weight: 900; color: var(--ca-ink);
  text-decoration: none; display: block; line-height: 1.2;
}
.ca-author-card__name:hover { color: var(--ca-brown); }
.ca-author-card__meta {
  font-size: 11px; font-weight: 700; color: var(--ca-ink-3);
  text-transform: uppercase; letter-spacing: .8px; margin-top: 2px;
}
.ca-author-card__bio {
  font-size: 13px; line-height: 1.6; color: rgba(var(--_ink-rgb),.65);
  margin: 0 0 14px;
}
.ca-author-card__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: var(--ca-brown);
  text-decoration: none;
  transition: gap .15s;
}
.ca-author-card__link:hover { gap: 8px; }

/* ─────────────────────────────────────────────────────────────────────────
   SERIES / COLECCIONES
   ─────────────────────────────────────────────────────────────────────────*/
.ca-series-banner {
  background: linear-gradient(135deg, var(--ca-ink) 0%, #2a1610 100%);
  border: 1.5px solid rgba(var(--_yellow-rgb),.2);
  border-radius: 20px;
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.ca-series-banner::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(248,169,31,.08) 0%, transparent 70%);
  pointer-events: none;
}
.ca-series-banner__eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ca-yellow, var(--ca-accent-2));
  margin-bottom: 6px;
}
.ca-series-banner__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(18px, 3vw, 24px); font-weight: 900;
  color: var(--ca-cream); margin: 0 0 16px; line-height: 1.15;
}
.ca-series-nav {
  display: flex; flex-direction: column; gap: 6px;
}
.ca-series-nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  color: rgba(var(--_cream-rgb),.6);
  transition: background .15s, color .15s;
}
.ca-series-nav__item:hover { background: rgba(var(--_white-rgb),.06); color: var(--ca-cream); }
.ca-series-nav__item.is-current {
  background: var(--ca-accent-2-subtle);
  color: var(--ca-yellow, var(--ca-accent-2));
}
.ca-series-nav__num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(var(--_white-rgb),.08); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
}
.ca-series-nav__item.is-current .ca-series-nav__num {
  background: var(--ca-yellow, var(--ca-accent-2));
  color: var(--ca-ink);
}

/* Series prev/next navigation */
.ca-series-prevnext {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 40px 0 0;
}
.ca-series-prevnext__btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(var(--_cream-rgb),.5);
  border: 1.5px solid var(--ca-border);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
}
.ca-series-prevnext__btn:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 4px 12px var(--ca-border);
}
.ca-series-prevnext__btn--next { text-align: right; }
.ca-series-prevnext__dir {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-ink-3);
}
.ca-series-prevnext__title {
  font-size: 13.5px; font-weight: 800; color: var(--ca-ink);
  line-height: 1.3;
}
@media (max-width: 480px) {
  .ca-series-prevnext { grid-template-columns: 1fr; }
}

/* Admin series page */
.ca-series-color-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL TO TOP BUTTON
   ─────────────────────────────────────────────────────────────────────────*/
#ca-scroll-top {
  position: fixed;
  bottom: 32px; left: 20px; right: auto;  /* LEFT side — free from FAB zone */
  width: 38px; height: 38px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 9100;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s, transform .25s, border-color .18s, box-shadow .18s;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#ca-scroll-top.is-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
#ca-scroll-top:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 4px 16px var(--ca-border);
}
#ca-scroll-top svg { display: block; }

/* Mobile: stack above FAB (bottom:24px + h:56px + gap:12px = 92px) */
@media (max-width: 860px) {
  #ca-scroll-top {
    bottom: 28px;
    left: 16px; right: auto;
    width: 40px; height: 40px;
    background: rgba(var(--_white-rgb),.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body.ca-drawer-open #ca-scroll-top {
    opacity: 0;
    pointer-events: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FOCUS MODE — complete
   ─────────────────────────────────────────────────────────────────────────*/
body.ca-focus-mode {
  background: var(--ca-surface)ef9;
}
body.ca-focus-mode .ca-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
body.ca-focus-mode .ca-post-sidebar,
body.ca-focus-mode .ca-related-full,
body.ca-focus-mode .ca-related-mobile,
body.ca-focus-mode .ca-float-share,
body.ca-focus-mode .ca-castina-tip,
body.ca-focus-mode #ca-next-article,
body.ca-focus-mode .ca-post-share,
body.ca-focus-mode .ca-reactions,
body.ca-focus-mode .ca-series-prevnext,
body.ca-focus-mode .ad-slot { opacity: 0; pointer-events: none; }
body.ca-focus-mode .ca-post-body .container.large {
  max-width: 680px;
}
body.ca-focus-mode .ca-post-body {
  font-size: 17px;
  line-height: 1.95;
  padding-top: 32px;
}
body.ca-focus-mode #ca-scroll-top { display: none; }
/* Exit hint */
body.ca-focus-mode .ca-focus-btn {
  top: 16px; right: 16px; z-index: 9999;
  background: var(--ca-ink); color: var(--ca-cream); border-color: var(--ca-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   RECURSOS / HERRAMIENTAS — public page
   ─────────────────────────────────────────────────────────────────────────*/
.ca-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* Recursos — categoría + disclaimer (reemplaza estilos inline del PHP) */
.ca-resource-cat { margin-bottom: 52px; }
.ca-resource-cat__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ca-resource-cat__emoji { font-size: 22px; }
.ca-resource-cat__title {
  font-family: var(--ca-font-body), sans-serif;
  font-size: clamp(18px, 3vw, 24px); font-weight: 900;
  color: var(--ca-ink); margin: 0;
}
.ca-resource-disclaimer {
  font-size: 12px; color: rgba(26,15,9,.35); text-align: center;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ca-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   /COMO-CONSEGUIR-CASTINGS/ — grilla de guías (reemplaza tema .blog-area-2)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.ca-cc-card {
  display: flex; flex-direction: column;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--ca-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ca-cc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ca-shadow-lg);
  border-color: var(--ca-accent);
}
.ca-cc-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ca-border);
}
.ca-cc-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.ca-cc-card:hover .ca-cc-card__thumb img { transform: scale(1.05); }
.ca-cc-card__body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.ca-cc-card__title {
  font-family: var(--ca-font-body), sans-serif;
  font-size: clamp(16px, 2.2vw, 19px); font-weight: 900;
  line-height: 1.3; color: var(--ca-ink); margin: 0;
  display: flex; align-items: flex-start; gap: 8px;
}
.ca-cc-card__arrow {
  flex-shrink: 0; width: 16px; margin-top: 4px;
  color: var(--ca-ink);
  transition: transform .2s ease;
}
.ca-cc-card__arrow svg { width: 100%; height: auto; display: block; }
.ca-cc-card:hover .ca-cc-card__arrow {
  transform: translate(3px, -3px);
  color: var(--ca-accent);
}
.ca-cc-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto;
  font-size: 13px; color: var(--ca-ink-2);
}
.ca-cc-card__by span { color: var(--ca-ink); font-weight: 700; }
.ca-cc-card__year {
  position: relative; padding-left: 14px;
}
.ca-cc-card__year::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: currentColor; transform: translateY(-50%);
}
@media (max-width: 600px) {
  .ca-cc-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   /COMO-CONSEGUIR-CASTINGS/NETFLIX/ — Bloques de productoras y portales
   ─────────────────────────────────────────────────────────────────────────*/
.ca-casting-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin: 20px 0 8px;
}
.ca-casting-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--ca-surface);
  border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md);
}
.ca-casting-name { font-weight: 800; color: var(--ca-ink); font-size: 14px; }
.ca-casting-link { color: var(--ca-accent); font-size: 13px; word-break: break-all; text-decoration: none; }
.ca-casting-link:hover { text-decoration: underline; }
.ca-video-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  margin: 28px 0; border-radius: var(--ca-radius-lg);
  overflow: hidden; background: var(--ca-ink);
}
.ca-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   /404 — Página de error con Castina (reemplaza estilos inline)
   ─────────────────────────────────────────────────────────────────────────*/
.error-castina {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 60px 0;
  background: linear-gradient(135deg, #6c4027 0%, #4a2b1a 100%);
}
.error-castina__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .error-castina__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .error-castina__mascot { order: -1; }
}
.error-castina__mascot img {
  width: 100%;
  max-width: 260px;
  animation: castina-idle 3s ease-in-out infinite;
}
@keyframes castina-idle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-12px) rotate(-2deg); }
  66%     { transform: translateY(-6px) rotate(2deg); }
}
.error-castina__code {
  font-size: 80px;
  font-weight: 900;
  color: #ec6426;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--ca-font-display), sans-serif;
  letter-spacing: -2px;
}
.error-castina__title {
  font-size: 28px;
  color: #fef2d8;
  margin-bottom: 16px;
  font-weight: 700;
}
.error-castina__msg {
  color: rgba(254,242,216,.7);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 32px;
}
.error-castina__msg em {
  color: #f8a91f;
  font-style: normal;
  font-weight: 600;
}
.error-castina__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  align-items: center;
}
@media (max-width: 768px) { .error-castina__actions { justify-content: center; } }
.error-castina__actions .showcase-link {
  color: rgba(254,242,216,.7);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}
.error-castina__actions .showcase-link:hover { color: #f8a91f; }
.error-castina__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.error-castina__grid a {
  background: rgba(254,242,216,.06);
  border: 1px solid rgba(254,242,216,.12);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.error-castina__grid a:hover {
  background: rgba(236,100,38,.15);
  border-color: rgba(236,100,38,.4);
  transform: translateY(-2px);
}
.error-castina__grid .icon { font-size: 20px; }
.error-castina__grid strong { color: #fef2d8; font-size: 13.5px; }
.error-castina__grid small  { color: rgba(254,242,216,.72); font-size: 12px; }

/* ─────────────────────────────────────────────────────────────────────────
   /GUIA-CONSEJOS/ — Guía para principiantes (reemplaza estilos inline)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-guia-hero-sub { margin-bottom: 32px; }
.ca-guia-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-guia-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 24px;
  font-weight: 800; font-size: 14px; border-radius: 99px; text-decoration: none;
}
.ca-guia-btn--pdf { background: var(--ca-yellow); color: var(--ca-ink); font-weight: 900; padding: 0 28px; }
.ca-guia-btn--ghost { border: 1.5px solid rgba(254,242,216,.25); color: rgba(254,242,216,.85); }

.ca-guia-stats { background: rgba(254,242,216,.4); border-bottom: 1.5px solid var(--ca-border); }
.ca-guia-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ca-guia-stats__cell { text-align: center; padding: 20px 8px; border-right: 1.5px solid var(--ca-border); }
.ca-guia-stats__value { font-family: var(--ca-font-display), sans-serif; font-size: 28px; font-weight: 900; color: var(--ca-ink); line-height: 1; }
.ca-guia-stats__label { font-size: 10.5px; font-weight: 700; color: rgba(26,15,9,.4); margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }

.ca-guia-container { max-width: 760px; }
.ca-guia-chapter { margin-bottom: 48px; scroll-margin-top: 80px; }
.ca-guia-chapter__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.ca-guia-chapter__ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
}
.ca-guia-chapter__ic--yellow { background: #f8a91f; }
.ca-guia-chapter__ic--orange { background: #ec6426; }
.ca-guia-chapter__ic--brown  { background: #6c4027; }
.ca-guia-chapter__ic--ink    { background: #1a0f09; }
.ca-guia-chapter__ic--red    { background: #ef4444; }
.ca-guia-chapter__kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(26,15,9,.35); }
.ca-guia-chapter__title { font-family: var(--ca-font-display), sans-serif; font-size: clamp(20px,3vw,28px); font-weight: 900; letter-spacing: -.5px; color: var(--ca-ink); margin: 2px 0 0; line-height: 1.1; }
.ca-guia-chapter__intro { font-size: 15px; line-height: 1.72; color: rgba(26,15,9,.72); margin: 0 0 14px; }
.ca-guia-chapter__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ca-guia-chapter__item { padding-left: 20px; position: relative; font-size: 14px; line-height: 1.6; color: rgba(26,15,9,.68); }
.ca-guia-chapter__bullet { position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; }
.ca-guia-chapter__bullet--yellow { background: #f8a91f; }
.ca-guia-chapter__bullet--orange { background: #ec6426; }
.ca-guia-chapter__bullet--brown  { background: #6c4027; }
.ca-guia-chapter__bullet--ink    { background: #1a0f09; }
.ca-guia-chapter__bullet--red    { background: #ef4444; }
.ca-guia-divider { border: none; border-top: 1.5px solid var(--ca-border); margin: 0 0 48px; }

.ca-guia-pdfcta { background: var(--ca-ink); border-radius: 20px; padding: 40px; text-align: center; margin-top: 56px; }
.ca-guia-pdfcta__icon { font-size: 40px; margin-bottom: 14px; }
.ca-guia-pdfcta__title { font-family: var(--ca-font-display), sans-serif; font-size: 28px; font-weight: 900; color: var(--ca-cream); margin: 0 0 10px; }
.ca-guia-pdfcta__text { font-size: 14px; color: rgba(254,242,216,.55); margin: 0 0 24px; }

@media (max-width: 600px) {
  .ca-guia-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.ca-resource-card {
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  text-decoration: none;
  position: relative; overflow: hidden;
}
.ca-resource-card:hover {
  border-color: var(--ca-brown);
  box-shadow: 0 8px 28px var(--ca-border);
  transform: translateY(-2px);
}
.ca-resource-card__badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
  background: var(--ca-accent-subtle); color: var(--ca-accent);
}
.ca-resource-card__icon {
  font-size: 28px; line-height: 1;
}
.ca-resource-card__title {
  font-size: 15.5px; font-weight: 900; color: var(--ca-ink); line-height: 1.3;
}
.ca-resource-card__desc {
  font-size: 13px; line-height: 1.6; color: var(--ca-ink-2); flex: 1;
}
.ca-resource-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--ca-brown);
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   ADMIN CRON STATUS WIDGET
   ─────────────────────────────────────────────────────────────────────────*/
.ca-cron-status {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px;
  background: rgba(var(--_white-rgb),.03);
  border: 1px solid rgba(var(--_white-rgb),.07);
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 13px;
}
.ca-cron-ok   { color: var(--_green-400); font-weight: 700; }
.ca-cron-warn { color: var(--ca-accent-2); font-weight: 700; }
.ca-cron-none { color: rgba(var(--_white-rgb),.3); }

/* ─────────────────────────────────────────────────────────────────────────
   QUICK DRAFT — dashboard widget
   ─────────────────────────────────────────────────────────────────────────*/
.ca-quick-draft {
  display: grid; gap: 10px;
}
.ca-quick-draft__title {
  width: 100%;
  background: rgba(var(--_white-rgb),.06);
  border: 1.5px solid rgba(var(--_white-rgb),.1);
  border-radius: 10px; padding: 10px 14px;
  color: #fff; font-size: 14px; font-weight: 700;
  font-family: inherit;
  transition: border-color .18s;
}
.ca-quick-draft__title:focus {
  outline: none; border-color: rgba(var(--_yellow-rgb),.4);
}
.ca-quick-draft__title::placeholder { font-weight: 400; color: rgba(var(--_white-rgb),.25); }
.ca-quick-draft__body {
  width: 100%;
  background: rgba(var(--_white-rgb),.04);
  border: 1.5px solid rgba(var(--_white-rgb),.08);
  border-radius: 10px; padding: 10px 14px;
  color: rgba(var(--_white-rgb),.8); font-size: 13px;
  font-family: inherit; resize: vertical; min-height: 80px;
  transition: border-color .18s;
}
.ca-quick-draft__body:focus { outline: none; border-color: rgba(var(--_yellow-rgb),.3); }

/* ─────────────────────────────────────────────────────────────────────────
   READING TIME BADGE — blog cards enhancement
   ─────────────────────────────────────────────────────────────────────────*/
.ca-read-time-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--ca-ink-2);
}
.ca-read-time-badge svg { flex-shrink: 0; opacity: .6; }

/* ─── sprint22.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 22
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   AUTOSAVE STATUS INDICATOR — editor
   ─────────────────────────────────────────────────────────────────────────*/
.ca-autosave-bar {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: rgba(var(--_white-rgb),.35);
  padding: 6px 0;
  transition: color .3s;
}
.ca-autosave-bar.is-saving  { color: rgba(var(--_yellow-rgb),.7); }
.ca-autosave-bar.is-saved   { color: rgba(var(--_green-rgb,74,222,128),.7); }
.ca-autosave-bar.is-error   { color: rgba(var(--_red-rgb,248,113,113),.7); }
.ca-autosave-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  transition: transform .2s;
}
.ca-autosave-bar.is-saving .ca-autosave-dot {
  animation: ca-autosave-pulse 1s ease-in-out infinite;
}
@keyframes ca-autosave-pulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.5); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOC COLLAPSIBLE ON MOBILE
   ─────────────────────────────────────────────────────────────────────────*/
.ca-toc-mobile {
  display: none;
  background: rgba(var(--_cream-rgb),.6);
  border: 1.5px solid var(--ca-border);
  border-radius: 14px;
  margin: 0 0 24px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .ca-toc-mobile { display: block; }
}
.ca-toc-mobile__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--ca-ink); text-align: left;
}
.ca-toc-mobile__toggle-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ca-brown); color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px;
  transition: transform .25s;
}
.ca-toc-mobile.is-open .ca-toc-mobile__toggle-icon { transform: rotate(180deg); }
.ca-toc-mobile__body {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  border-top: 1.5px solid transparent;
}
.ca-toc-mobile.is-open .ca-toc-mobile__body {
  max-height: 500px;
  border-top-color: var(--ca-border);
}
.ca-toc-mobile__list {
  list-style: none; margin: 0; padding: 12px 0;
}
.ca-toc-mobile__list li a {
  display: block; padding: 6px 16px;
  font-size: 13px; color: var(--ca-brown);
  text-decoration: none; line-height: 1.4;
  transition: background .15s;
}
.ca-toc-mobile__list li a:hover { background: rgba(var(--_brown-rgb),.06); }
.ca-toc-mobile__list li.toc-h3 a { padding-left: 28px; font-size: 12px; opacity: .75; }
.ca-toc-mobile__list li.toc-h4 a { padding-left: 40px; font-size: 11.5px; opacity: .6; }

/* ─────────────────────────────────────────────────────────────────────────
   RELATED POSTS — score indicator (debug, hidden in prod)
   ─────────────────────────────────────────────────────────────────────────*/
.ca-rel-score-badge {
  display: none; /* only show in debug */
  font-size: 9px; font-weight: 800; padding: 1px 5px;
  background: var(--ca-accent-2-subtle); color: var(--ca-yellow);
  border-radius: 4px; margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   IMAGE UPLOAD PROGRESS — admin
   ─────────────────────────────────────────────────────────────────────────*/
.ca-upload-progress {
  height: 4px; border-radius: 4px; background: rgba(var(--_white-rgb),.08);
  overflow: hidden; margin-top: 6px;
  display: none;
}
.ca-upload-progress.is-active { display: block; }
.ca-upload-progress__bar {
  height: 100%; background: var(--ca-yellow,var(--ca-accent-2));
  width: 0; transition: width .4s ease;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   ADMIN SECURITY — role badge on user list
   ─────────────────────────────────────────────────────────────────────────*/
.ca-role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; padding: 2px 8px; border-radius: 99px;
}
.ca-role-badge--admin  { background: var(--ca-accent-subtle); color: var(--ca-accent,var(--ca-accent)); }
.ca-role-badge--editor { background: var(--ca-accent-2-subtle); color: var(--ca-yellow,var(--ca-accent-2)); }
.ca-role-badge--author { background: rgba(var(--_white-rgb),.08); color: rgba(var(--_white-rgb),.5); }

/* ─────────────────────────────────────────────────────────────────────────
   LAZY COMMENTS — loading state
   ─────────────────────────────────────────────────────────────────────────*/
.ca-comments-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 24px; color: var(--ca-ink-3);
  font-size: 13px; font-weight: 600;
}
.ca-comments-loading svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────────
   READING HISTORY — sidebar widget
   ─────────────────────────────────────────────────────────────────────────*/
.ca-reading-history {
  background: var(--ca-cream, var(--ca-cream));
  border: 1.5px solid var(--ca-border);
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 20px;
  display: none;   /* shown by JS when history exists */
}
.ca-reading-history.has-items { display: block; }
.ca-reading-history__title {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ca-ink-3);
  margin-bottom: 12px;
}
.ca-reading-history__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid rgba(26,15,9,.07);
  text-decoration: none; transition: opacity .15s;
}
.ca-reading-history__item:last-child { border-bottom: none; }
.ca-reading-history__item:hover { opacity: .75; }
.ca-reading-history__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ca-brown); flex-shrink: 0; margin-top: 5px;
}
.ca-reading-history__text {
  font-size: 12.5px; font-weight: 700; color: var(--ca-ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ─── sprint23.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 23 — Admin Editor Redesign + Posts Live Search
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sticky top action bar ─────────────────────────────────────────────── */
.ca-editor-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: rgba(var(--_black-rgb,7,7,7),.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--_white-rgb),.08);
  min-height: 62px;
}

.ca-editor-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--_white-rgb),.4);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.ca-editor-topbar__back:hover { color: #fff; background: rgba(var(--_white-rgb),.07); }

.ca-editor-topbar__title {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background .2s;
  font-family: inherit;
}
.ca-editor-topbar__title:hover  { background: rgba(var(--_white-rgb),.05); }
.ca-editor-topbar__title:focus  { background: rgba(var(--_white-rgb),.07); box-shadow: 0 0 0 2px rgba(184,255,0,.25); }
.ca-editor-topbar__title::placeholder { color: rgba(var(--_white-rgb),.25); }

.ca-editor-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 5px 10px;
  border-radius: 99px;
  flex-shrink: 0;
}
.ca-editor-topbar__status--draft     { background: rgba(var(--_white-rgb),.07); color: rgba(var(--_white-rgb),.45); }
.ca-editor-topbar__status--published { background: rgba(var(--_green-rgb,74,222,128),.12);  color: var(--_green-400); }
.ca-editor-topbar__status--scheduled { background: var(--ca-accent-2-subtle);  color: var(--ca-accent-2); }

.ca-editor-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ca-editor-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .12s;
  white-space: nowrap;
}
.ca-editor-topbar__btn:hover  { opacity: .88; }
.ca-editor-topbar__btn:active { transform: scale(.97); }

.ca-editor-topbar__btn--draft {
  background: rgba(var(--_white-rgb),.08);
  color: rgba(var(--_white-rgb),.7);
  border: 1px solid rgba(var(--_white-rgb),.12);
}
.ca-editor-topbar__btn--publish {
  background: linear-gradient(135deg, var(--ca-lime,#b8ff00), #dfff8c);
  color: #081005;
}
.ca-editor-topbar__btn--update {
  background: linear-gradient(135deg, var(--ca-lime,#b8ff00), #dfff8c);
  color: #081005;
}

/* keyword density pill */
.ca-kw-density {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(var(--_white-rgb),.06);
  color: rgba(var(--_white-rgb),.4);
  transition: all .2s;
  margin-top: 6px;
}
.ca-kw-density.ok   { background: rgba(var(--_green-rgb,74,222,128),.12);  color: var(--_green-400); }
.ca-kw-density.low  { background: var(--ca-accent-2-subtle);  color: var(--ca-accent-2); }
.ca-kw-density.high { background: rgba(var(--_red-rgb,239,68,68),.12);   color: var(--_red-400,#f87171); }

/* ─── Editor layout wrapper ─────────────────────────────────────────────── */
.ca-editor-body {
  padding: 20px 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.ca-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .ca-editor-grid { grid-template-columns: 1fr; }
  .ca-editor-topbar { padding: 8px 14px; }
  .ca-editor-topbar__status { display: none; }
}

/* ─── Section label / separator ─────────────────────────────────────────── */
.ca-editor-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(var(--_white-rgb),.3);
  margin-bottom: 12px;
}
.ca-editor-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(var(--_white-rgb),.07);
}

/* ─── Image upload drop zone ─────────────────────────────────────────────── */
.ca-img-dropzone {
  border: 2px dashed rgba(var(--_white-rgb),.12);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.ca-img-dropzone:hover,
.ca-img-dropzone.is-dragover {
  border-color: rgba(var(--_lime-rgb,184,255,0),.4);
  background: rgba(var(--_lime-rgb,184,255,0),.04);
}
.ca-img-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.ca-img-dropzone__label {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(var(--_white-rgb),.35);
  font-size: 12.5px;
}
.ca-img-dropzone__icon { font-size: 28px; }
.ca-img-dropzone__preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 8px;
}

/* ─── OG image picker button ─────────────────────────────────────────────── */
.ca-og-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.ca-og-picker input {
  flex: 1;
  font-size: 12px;
  padding: 9px 12px;
}
.ca-og-picker__btn {
  flex-shrink: 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(var(--_white-rgb),.07);
  border: 1px solid rgba(var(--_white-rgb),.12);
  color: rgba(var(--_white-rgb),.6);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
  font-weight: 600;
}
.ca-og-picker__btn:hover { background: rgba(var(--_white-rgb),.12); color: #fff; }

/* ─── Jodit editor wrapper ──────────────────────────────────────────────── */
.ca-editor-jodit-wrap {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(var(--_white-rgb),.08);
  background: rgba(var(--_white-rgb),.03);
  margin-bottom: 18px;
}
.ca-editor-jodit-wrap .jodit-container {
  border: none;
  background: transparent;
}
.ca-editor-jodit-wrap .jodit-toolbar__box {
  background: rgba(var(--_white-rgb),.04);
  border-bottom: 1px solid rgba(var(--_white-rgb),.08);
}

/* ─── Posts live search ─────────────────────────────────────────────────── */
.ca-posts-search {
  position: relative;
}
.ca-posts-search__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: rgba(var(--_white-rgb),.05);
  border: 1px solid rgba(var(--_white-rgb),.1);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ca-posts-search__input:focus {
  border-color: rgba(var(--_lime-rgb,184,255,0),.4);
  box-shadow: 0 0 0 3px rgba(var(--_lime-rgb,184,255,0),.1);
}
.ca-posts-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--_white-rgb),.3);
  pointer-events: none;
}
.ca-posts-search__count {
  font-size: 11.5px;
  color: rgba(var(--_white-rgb),.3);
  margin-top: 6px;
  display: none;
}
.ca-posts-search__count.is-visible { display: block; }

/* ─── Affiliate daily chart ─────────────────────────────────────────────── */
.ca-aff-chart-wrap {
  height: 180px;
  position: relative;
}
.ca-aff-period-picker {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.ca-aff-period-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(var(--_white-rgb),.1);
  color: rgba(var(--_white-rgb),.4);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.ca-aff-period-btn.is-active,
.ca-aff-period-btn:hover {
  background: rgba(var(--_lime-rgb,184,255,0),.12);
  border-color: rgba(var(--_lime-rgb,184,255,0),.3);
  color: var(--ca-lime,#b8ff00);
}

/* ─── Admin details/collapsible improved ─────────────────────────────────── */
.ca-editor-details {
  border: 1px solid rgba(var(--_white-rgb),.07);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
}
.ca-editor-details summary {
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(var(--_white-rgb),.45);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  background: rgba(var(--_white-rgb),.02);
  transition: background .15s;
}
.ca-editor-details summary:hover { background: rgba(var(--_white-rgb),.05); color: rgba(var(--_white-rgb),.7); }
.ca-editor-details summary::-webkit-details-marker { display: none; }
.ca-editor-details__body {
  padding: 16px;
  border-top: 1px solid rgba(var(--_white-rgb),.07);
}

/* ─── sprint24.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 24
   • Fix scroll-to-top duplicate (hide progress-wrap)
   • Post templates selector
   • Admin notifications badge (subscribers, pending comments)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FIX: Hide original theme progress-wrap entirely ───────────────────── */
/* Sprint 21 introduced #ca-scroll-top as the replacement.
   progress-wrap still exists in HTML but must never show. */
.progress-wrap,
.progress-wrap.active-progress {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden !important;
}

/* ─── Post template picker (modal inside post-new) ──────────────────────── */
.ca-tpl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--_black-rgb,7,7,7),.88);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ca-tpl-fade-in .18s ease;
}
@keyframes ca-tpl-fade-in { from { opacity:0 } to { opacity:1 } }

.ca-tpl-modal {
  background: var(--ca-ink);
  border: 1px solid rgba(var(--_white-rgb),.1);
  border-radius: 24px;
  padding: 32px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.ca-tpl-modal__title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}
.ca-tpl-modal__sub {
  font-size: 13px;
  color: rgba(var(--_white-rgb),.4);
  margin-bottom: 28px;
}

.ca-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) { .ca-tpl-grid { grid-template-columns: 1fr 1fr; } }

.ca-tpl-card {
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 20px 16px;
  cursor: pointer;
  background: rgba(var(--_white-rgb),.03);
  transition: border-color .15s, background .15s, transform .12s;
  text-align: left;
}
.ca-tpl-card:hover {
  border-color: rgba(var(--_lime-rgb,184,255,0),.4);
  background: rgba(var(--_lime-rgb,184,255,0),.05);
  transform: translateY(-2px);
}
.ca-tpl-card__icon { font-size: 26px; display: block; margin-bottom: 10px; }
.ca-tpl-card__name {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.ca-tpl-card__desc {
  font-size: 11.5px;
  color: rgba(var(--_white-rgb),.4);
  line-height: 1.45;
}

.ca-tpl-blank {
  background: none;
  border: none;
  color: rgba(var(--_white-rgb),.35);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: inherit;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ca-tpl-blank:hover { color: rgba(var(--_white-rgb),.7); background: rgba(var(--_white-rgb),.06); }

/* ─── Admin sidebar notification dots ───────────────────────────────────── */
.ca-nav-badge {
  margin-left: auto;
  background: var(--ca-accent-2);
  color: var(--ca-ink);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}
.ca-nav-badge--red { background: var(--ca-error); color: #fff; }
.ca-nav-badge--green { background: var(--_green-400); color: var(--ca-ink); }

/* ─── Duplicate post button in list ─────────────────────────────────────── */
.btn-admin-clone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(var(--_lime-rgb,184,255,0),.08);
  color: var(--ca-lime,#b8ff00);
  border: 1px solid rgba(var(--_lime-rgb,184,255,0),.15);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.btn-admin-clone:hover {
  background: rgba(var(--_lime-rgb,184,255,0),.15);
  border-color: rgba(var(--_lime-rgb,184,255,0),.3);
}

/* ─── Live preview panel in editor ──────────────────────────────────────── */
.ca-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(var(--_white-rgb),.07);
  border: 1px solid rgba(var(--_white-rgb),.1);
  color: rgba(var(--_white-rgb),.6);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  flex-shrink: 0;
}
.ca-preview-toggle:hover { background: rgba(var(--_white-rgb),.12); color: #fff; }
.ca-preview-toggle.is-active {
  background: rgba(var(--_lime-rgb,184,255,0),.12);
  border-color: rgba(var(--_lime-rgb,184,255,0),.3);
  color: var(--ca-lime,#b8ff00);
}

.ca-preview-pane {
  display: none;
  border: 1px solid rgba(var(--_white-rgb),.08);
  border-radius: 0 0 26px 26px;
  background: var(--ca-surface);
  overflow: hidden;
}
.ca-preview-pane.is-open { display: block; }
.ca-preview-pane__bar {
  padding: 8px 16px;
  background: rgba(var(--_black-rgb,7,7,7),.9);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(var(--_white-rgb),.3);
  border-bottom: 1px solid rgba(var(--_white-rgb),.08);
}
.ca-preview-pane__bar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(var(--_white-rgb),.15);
}
.ca-preview-pane__bar-dot:first-child  { background: var(--ca-error); }
.ca-preview-pane__bar-dot:nth-child(2) { background: var(--ca-warning); }
.ca-preview-pane__bar-dot:nth-child(3) { background: var(--_green-400); }
.ca-preview-pane__iframe {
  width: 100%;
  border: none;
  min-height: 500px;
  display: block;
}

/* ─── Newsletter preferences (confirmation page) ─────────────────────────── */
.ca-nl-prefs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.ca-nl-pref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(108,64,39,.15);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ca-nl-pref-item:hover { background: rgba(var(--_brown-rgb),.04); border-color: rgba(var(--_brown-rgb),.3); }
.ca-nl-pref-item input[type="checkbox"] { accent-color: var(--ca-accent); width: 16px; height: 16px; flex-shrink: 0; }
.ca-nl-pref-item__label { font-weight: 600; font-size: 14px; color: var(--ca-ink); }
.ca-nl-pref-item__desc  { font-size: 12px; color: var(--ca-ink-2); margin-top: 2px; }

/* ─── sprint25.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 25
   • Logs.php — rich activity feed with filters
   • Affiliates — referrer post attribution
   • Sponsored posts badge
   • Casting alerts system
   • DB backup download in dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Activity log feed ─────────────────────────────────────────────────── */
.ca-log-feed { display: flex; flex-direction: column; gap: 2px; }

.ca-log-item {
  display: grid;
  grid-template-columns: 32px 140px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  transition: background .12s;
}
.ca-log-item:hover { background: rgba(var(--_white-rgb),.03); }

.ca-log-item__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ca-log-item__icon--create   { background: rgba(var(--_green-rgb,74,222,128),.12);  color: var(--_green-400); }
.ca-log-item__icon--update   { background: rgba(var(--_blue-rgb,96,165,250),.12);  color: var(--ca-info); }
.ca-log-item__icon--delete   { background: rgba(var(--_red-rgb,248,113,113),.12); color: var(--_red-400,#f87171); }
.ca-log-item__icon--publish  { background: rgba(var(--_lime-rgb,184,255,0),.12);   color: var(--ca-lime,#b8ff00); }
.ca-log-item__icon--login    { background: rgba(var(--_yellow-rgb),.12);  color: var(--ca-warning); }
.ca-log-item__icon--system   { background: rgba(var(--_purple-rgb,167,139,250),.12); color: var(--_purple,#a78bfa); }
.ca-log-item__icon--default  { background: rgba(var(--_white-rgb),.06); color: rgba(var(--_white-rgb),.4); }

.ca-log-item__who {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(var(--_white-rgb),.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-log-item__what {
  font-size: 12.5px;
  color: rgba(var(--_white-rgb),.5);
}
.ca-log-item__what strong { color: rgba(var(--_white-rgb),.85); font-weight: 700; }
.ca-log-item__what .ca-log-tag {
  display: inline-block;
  background: rgba(var(--_white-rgb),.07);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: monospace;
  color: rgba(var(--_white-rgb),.5);
  margin-left: 4px;
}
.ca-log-item__when {
  font-size: 11px;
  color: rgba(var(--_white-rgb),.25);
  white-space: nowrap;
  flex-shrink: 0;
}

.ca-log-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ca-log-filter-btn {
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(var(--_white-rgb),.1);
  background: transparent;
  color: rgba(var(--_white-rgb),.4);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.ca-log-filter-btn.is-active,
.ca-log-filter-btn:hover {
  background: rgba(var(--_lime-rgb,184,255,0),.1);
  border-color: rgba(var(--_lime-rgb,184,255,0),.3);
  color: var(--ca-lime,#b8ff00);
}

/* ─── Affiliates post attribution table ─────────────────────────────────── */
.ca-aff-post-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(var(--_white-rgb),.05); }
.ca-aff-post-row:last-child { border-bottom: none; }
.ca-aff-post-row__title { font-size: 12.5px; color: rgba(var(--_white-rgb),.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-aff-post-row__link  { font-size: 11px; color: rgba(var(--_white-rgb),.3); text-decoration: none; }
.ca-aff-post-row__link:hover { color: var(--ca-lime,#b8ff00); }
.ca-aff-bar-wrap { width: 80px; height: 4px; background: rgba(var(--_white-rgb),.07); border-radius: 2px; overflow: hidden; }
.ca-aff-bar      { height: 100%; background: var(--ca-lime,#b8ff00); border-radius: 2px; transition: width .4s ease; }
.ca-aff-clicks   { font-size: 12px; font-weight: 800; color: rgba(var(--_white-rgb),.6); min-width: 36px; text-align: right; }

/* ─── Sponsored badge (public) ───────────────────────────────────────────── */
.ca-sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ca-ink-2);
  background: var(--ca-border);
  border: 1px solid var(--ca-border-2);
  border-radius: 5px;
  padding: 2px 7px;
}
.ca-sponsored-badge svg { width: 9px; height: 9px; }

/* ─── Casting alerts subscription widget (public) ───────────────────────── */
.ca-casting-alerts {
  background: linear-gradient(135deg, #6c4027 0%, #4a2b1a 100%);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ca-casting-alerts::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: var(--ca-accent-2-subtle);
  border-radius: 50%;
}
.ca-casting-alerts__icon  { font-size: 32px; display: block; margin-bottom: 10px; }
.ca-casting-alerts__title { font-size: 18px; font-weight: 900; color: var(--ca-cream); margin: 0 0 6px; }
.ca-casting-alerts__sub   { font-size: 13px; color: rgba(var(--_cream-rgb),.65); margin: 0 0 20px; line-height: 1.5; }

.ca-casting-alerts__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}
.ca-casting-alerts__input {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(var(--_cream-rgb),.2);
  background: rgba(var(--_cream-rgb),.1);
  color: var(--ca-cream);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.ca-casting-alerts__input::placeholder { color: rgba(var(--_cream-rgb),.4); }
.ca-casting-alerts__input:focus { border-color: rgba(var(--_yellow-rgb),.6); }

.ca-casting-alerts__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ca-casting-alerts__cat {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1.5px solid rgba(var(--_cream-rgb),.2);
  background: transparent;
  color: rgba(var(--_cream-rgb),.6);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.ca-casting-alerts__cat.is-selected,
.ca-casting-alerts__cat:hover {
  background: rgba(var(--_yellow-rgb),.2);
  border-color: var(--ca-accent-2);
  color: var(--ca-accent-2);
}
.ca-casting-alerts__btn {
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ca-accent-2), var(--ca-accent));
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .12s;
}
.ca-casting-alerts__btn:hover  { opacity: .88; }
.ca-casting-alerts__btn:active { transform: scale(.97); }
.ca-casting-alerts__success {
  display: none;
  padding: 14px;
  border-radius: 12px;
  background: rgba(var(--_green-rgb,74,222,128),.15);
  color: var(--_green-400);
  font-size: 13.5px;
  font-weight: 700;
}

/* ─── DB backup button in dashboard ─────────────────────────────────────── */
.ca-backup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(var(--_purple-rgb,167,139,250),.1);
  border: 1px solid rgba(167,139,250,.2);
  color: var(--_purple,#a78bfa);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all .15s;
}
.ca-backup-btn:hover {
  background: rgba(var(--_purple-rgb,167,139,250),.18);
  border-color: rgba(var(--_purple-rgb,167,139,250),.4);
  color: var(--_purple-light,#c4b5fd);
}
.ca-backup-btn.is-loading { opacity: .6; pointer-events: none; }

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
.ca-breadcrumb { margin-bottom: 12px; }
.ca-breadcrumb__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.ca-breadcrumb__item  { display: flex; align-items: center; gap: 4px; }
.ca-breadcrumb__link  { font-size: 12px; color: rgba(var(--_white-rgb),.45); text-decoration: none; transition: color .15s; }
.ca-breadcrumb__link:hover { color: rgba(var(--_white-rgb),.8); }
.ca-breadcrumb__sep   { font-size: 11px; color: rgba(var(--_white-rgb),.2); }
.ca-breadcrumb__current { font-size: 12px; color: rgba(var(--_white-rgb),.65); font-weight: 600; }

/* Light variant (category/blog pages on cream bg) */
.ca-breadcrumb--light .ca-breadcrumb__link    { color: var(--ca-ink-3); }
.ca-breadcrumb--light .ca-breadcrumb__link:hover { color: rgba(var(--_ink-rgb),.75); }
.ca-breadcrumb--light .ca-breadcrumb__sep     { color: var(--ca-ink-4); }
.ca-breadcrumb--light .ca-breadcrumb__current { color: var(--ca-ink-2); }

/* ─── sprint26.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 26
   • Web Push notifications
   • Revisions panel (enhanced)
   • Infinite scroll
   • Comment upvotes
   • Dark mode fix
   • Print stylesheet
   • Bulk scheduler
   • URL importer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Web Push subscribe button ──────────────────────────────────────────── */
.ca-push-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ca-brown, var(--ca-brown));
  color: var(--ca-cream);
  border: none;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s, opacity .15s;
  white-space: nowrap;
}
.ca-push-btn:hover   { background: var(--_brown-300); }
.ca-push-btn:active  { transform: scale(.96); }
.ca-push-btn.is-subscribed {
  background: rgba(var(--_green-rgb,74,222,128),.12);
  color: var(--_green-400);
  border: 1px solid rgba(74,222,128,.25);
  cursor: default;
}
.ca-push-btn.is-subscribed:hover { background: rgba(var(--_green-rgb,74,222,128),.12); }
.ca-push-btn.is-loading { opacity: .6; pointer-events: none; }

/* Floating push prompt banner */
.ca-push-prompt {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 8000;
  max-width: min(380px, calc(100vw - 32px));
  transition: opacity .3s, transform .3s;
}
.ca-push-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ca-push-prompt__icon { font-size: 24px; flex-shrink: 0; }
.ca-push-prompt__text { flex: 1; }
.ca-push-prompt__title { font-size: 13.5px; font-weight: 800; color: var(--ca-ink); margin-bottom: 2px; }
.ca-push-prompt__sub   { font-size: 11.5px; color: var(--ca-ink-2); }
.ca-push-prompt__actions { display: flex; gap: 6px; flex-shrink: 0; }
.ca-push-prompt__yes {
  padding: 7px 14px; border-radius: 10px; background: var(--ca-brown); color: var(--ca-cream);
  border: none; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.ca-push-prompt__no {
  padding: 7px 10px; border-radius: 10px; background: transparent;
  color: var(--ca-ink-3); border: none; font-size: 12px; cursor: pointer; font-family: inherit;
}
.ca-push-prompt__no:hover { color: rgba(var(--_ink-rgb),.7); }

/* Admin push sender */
.ca-push-admin-form { display: grid; gap: 14px; }
.ca-push-preview-card {
  background: rgba(var(--_white-rgb),.05);
  border: 1px solid rgba(var(--_white-rgb),.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ca-push-preview-card__icon { font-size: 22px; flex-shrink: 0; }
.ca-push-preview-card__body { flex: 1; }
.ca-push-preview-card__title { font-size: 13.5px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.ca-push-preview-card__body-text { font-size: 12px; color: rgba(var(--_white-rgb),.5); }

/* ─── Revisions panel (enhanced) ─────────────────────────────────────────── */
.ca-revisions-panel {
  border: 1px solid rgba(var(--_white-rgb),.07);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(var(--_white-rgb),.02);
}
.ca-revisions-panel__header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--_white-rgb),.07);
  cursor: pointer;
}
.ca-revisions-panel__title { font-size: 13px; font-weight: 700; color: rgba(var(--_white-rgb),.6); display: flex; align-items: center; gap: 8px; }
.ca-revisions-panel__count { background: rgba(var(--_white-rgb),.1); border-radius: 99px; padding: 1px 8px; font-size: 10px; font-weight: 900; color: rgba(var(--_white-rgb),.5); }
.ca-revisions-panel__body  { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.ca-revisions-panel.is-open .ca-revisions-panel__body { max-height: 320px; overflow-y: auto; }
.ca-revisions-panel__chevron { font-size: 11px; color: rgba(var(--_white-rgb),.3); transition: transform .2s; }
.ca-revisions-panel.is-open  .ca-revisions-panel__chevron { transform: rotate(180deg); }

.ca-rev-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--_white-rgb),.04);
  transition: background .12s;
}
.ca-rev-item:hover { background: rgba(var(--_white-rgb),.03); }
.ca-rev-item:last-child { border-bottom: none; }
.ca-rev-item__info    { min-width: 0; }
.ca-rev-item__note    { font-size: 11.5px; font-weight: 700; color: rgba(var(--_white-rgb),.6); }
.ca-rev-item__meta    { font-size: 10.5px; color: rgba(var(--_white-rgb),.25); margin-top: 2px; }
.ca-rev-item__preview { font-size: 10.5px; color: rgba(var(--_white-rgb),.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; margin-top: 3px; }
.ca-rev-restore-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(var(--_lime-rgb,184,255,0),.08);
  border: 1px solid rgba(var(--_lime-rgb,184,255,0),.15);
  color: var(--ca-lime,#b8ff00);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
.ca-rev-restore-btn:hover { background: rgba(var(--_lime-rgb,184,255,0),.15); border-color: rgba(var(--_lime-rgb,184,255,0),.3); }

/* ─── Infinite scroll loader ─────────────────────────────────────────────── */
.ca-infinite-sentinel { height: 1px; margin-top: 40px; }
.ca-infinite-loader {
  display: none;
  text-align: center;
  padding: 32px 0;
}
.ca-infinite-loader.is-active { display: block; }
.ca-infinite-loader__dots {
  display: inline-flex;
  gap: 6px;
}
.ca-infinite-loader__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ca-brown, var(--ca-brown));
  animation: ca-dot-pulse 1.2s ease-in-out infinite;
}
.ca-infinite-loader__dot:nth-child(2) { animation-delay: .2s; }
.ca-infinite-loader__dot:nth-child(3) { animation-delay: .4s; }
@keyframes ca-dot-pulse { 0%,80%,100% { opacity:.25; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
.ca-infinite-end {
  text-align: center;
  padding: 24px 0 8px;
  font-size: 13px;
  color: var(--ca-ink-3);
  display: none;
}
.ca-infinite-end.is-visible { display: block; }

/* ─── Comment upvote button ──────────────────────────────────────────────── */
.ca-comment-vote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--ca-border);
  border-radius: 99px;
  padding: 3px 10px 3px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ca-ink-3);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  flex-shrink: 0;
}
.ca-comment-vote:hover { border-color: rgba(var(--_brown-rgb),.3); color: rgba(var(--_ink-rgb),.7); }
.ca-comment-vote.is-voted {
  background: rgba(var(--_accent-rgb),.08);
  border-color: rgba(var(--_accent-rgb),.25);
  color: var(--ca-accent);
}
.ca-comment-vote svg { width: 12px; height: 12px; }

/* ─── Bulk scheduler modal ───────────────────────────────────────────────── */
.ca-scheduler-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--_black-rgb,7,7,7),.88);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ca-scheduler-modal {
  background: var(--ca-ink);
  border: 1px solid rgba(var(--_white-rgb),.1);
  border-radius: 24px;
  padding: 32px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.ca-scheduler-modal h2 { font-size: 18px; font-weight: 900; color: #fff; margin: 0 0 6px; }
.ca-scheduler-modal p  { font-size: 13px; color: rgba(var(--_white-rgb),.4); margin: 0 0 24px; }
.ca-scheduler-post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--_white-rgb),.05);
}
.ca-scheduler-post-row:last-child { border-bottom: none; }
.ca-scheduler-post-row__title { font-size: 12.5px; color: rgba(var(--_white-rgb),.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-scheduler-post-row input[type="datetime-local"] {
  background: rgba(var(--_white-rgb),.06);
  border: 1px solid rgba(var(--_white-rgb),.1);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

/* ─── URL importer modal ─────────────────────────────────────────────────── */
.ca-import-modal {
  background: var(--ca-ink);
  border: 1px solid rgba(var(--_white-rgb),.1);
  border-radius: 24px;
  padding: 32px;
  max-width: 540px;
  width: 100%;
}
.ca-import-modal h2 { font-size: 18px; font-weight: 900; color: #fff; margin: 0 0 6px; }
.ca-import-modal p  { font-size: 13px; color: rgba(var(--_white-rgb),.4); margin: 0 0 20px; }
.ca-import-progress {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(var(--_white-rgb),.04);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(var(--_white-rgb),.5);
}
.ca-import-progress.is-active { display: flex; }
.ca-import-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(var(--_white-rgb),.15);
  border-top-color: var(--ca-lime,#b8ff00);
  border-radius: 50%;
  animation: ca-spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* ─── Print stylesheet ───────────────────────────────────────────────────── */
@media print {
  /* Hide everything except the article */
  header, footer, nav,
  .ca-post-hero__img-overlay, .ca-float-share, #ca-fab-toggle,
  .ca-dark-toggle, .ca-focus-btn, #ca-scroll-top, .progress-wrap,
  .ca-post-sidebar, .ca-reading-history, .toc-sidebar,
  .ca-toc-mobile, .ca-next-article, .ca-comment-form,
  .ca-cookie-banner, .ca-push-prompt,
  [data-noprint], .ca-pagination, .shiny-badge,
  .ca-post-reactions, script, style { display: none !important; }

  body, html { background: #fff !important; color: var(--ca-ink) !important; font-size: 12pt; }

  .ca-post-hero { min-height: 0 !important; padding: 20pt 0 16pt !important; background: #fff !important; }
  .ca-post-hero__title { font-size: 24pt !important; color: var(--ca-ink) !important; line-height: 1.3 !important; }
  .ca-post-hero__cat { display: none !important; }
  .ca-post-hero__content { color: var(--ca-ink) !important; padding: 0 !important; }

  .ca-post-content { max-width: 100% !important; font-size: 12pt !important; line-height: 1.7 !important; color: var(--ca-ink) !important; }
  .ca-post-content h2, .ca-post-content h3 { color: var(--ca-ink) !important; break-after: avoid; }
  .ca-post-content a { color: var(--ca-ink) !important; text-decoration: none !important; }
  .ca-post-content a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--ca-ink-2); }
  .ca-post-content img { max-width: 100% !important; page-break-inside: avoid; }
  .ca-post-content blockquote { border-left: 3pt solid #000 !important; padding-left: 12pt; }

  /* Print URL at bottom */
  .ca-post-content::after {
    content: "Fuente: " attr(data-url);
    display: block;
    margin-top: 24pt;
    padding-top: 12pt;
    border-top: 1pt solid #ccc;
    font-size: 9pt;
    color: var(--ca-ink-2);
  }

  @page { margin: 2cm; }
}

/* ─── sprint27.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 27 — Gamificación + Bug fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Preloader dark mode fix ────────────────────────────────────────────── */
html.ca-dark #preloader {
  background: #1a0f09;
}
html.ca-dark .ca-preloader__dots span {
  background: var(--ca-orange, #ec6426);
}
html.ca-dark .ca-preloader__curtain {
  background: #1a0f09;
}

/* ─── Rank badges in comments ────────────────────────────────────────────── */
.ca-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ca-rank--aspirante  { background: var(--ca-border); color: var(--ca-brown); }
.ca-rank--actor      { background: var(--ca-accent-2-subtle); color: var(--_yellow-dark,#c07a00); }
.ca-rank--protagonista { background: var(--ca-accent-subtle); color: var(--ca-accent-hover); }
.ca-rank--estrella   { background: rgba(var(--_purple-rgb,139,92,246),.15); color: var(--_purple-dark,#7c3aed); }
.ca-rank--icono      { background: rgba(var(--_accent-rgb),.2); color: var(--ca-accent);
                        border: 1px solid rgba(236,100,38,.3); }

.ca-rank-badge .ca-rank-icon { font-size: 11px; }

/* ─── Progress widget (public) ───────────────────────────────────────────── */
.ca-xp-widget {
  background: var(--ca-cream, var(--ca-cream));
  border: 1px solid var(--ca-border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
}
.ca-xp-widget__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ca-xp-widget__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(var(--_brown-rgb),.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ca-xp-widget__info   { flex: 1; min-width: 0; }
.ca-xp-widget__name   { font-size: 13px; font-weight: 800; color: var(--ca-ink); }
.ca-xp-widget__rank   { margin-top: 3px; }
.ca-xp-widget__pts    { font-size: 11.5px; color: var(--ca-ink-3); margin-left: auto; flex-shrink:0; }
.ca-xp-widget__pts strong { color: var(--ca-ink); font-weight: 900; }

.ca-xp-bar-wrap { margin-bottom: 8px; }
.ca-xp-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ca-ink-3);
  margin-bottom: 5px;
}
.ca-xp-bar {
  height: 6px;
  background: var(--ca-border);
  border-radius: 99px;
  overflow: hidden;
}
.ca-xp-bar__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ca-brown), var(--ca-accent));
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
  width: 0;
}

.ca-xp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ca-xp-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(var(--_brown-rgb),.07);
  border: 1px solid var(--ca-border);
  border-radius: 99px;
  font-size: 11px;
  color: var(--ca-ink-2);
}
.ca-xp-badge-pill.is-earned {
  background: var(--ca-accent-subtle);
  border-color: rgba(var(--_accent-rgb),.2);
  color: var(--ca-accent-hover);
}

/* ─── Leaderboard sidebar widget ─────────────────────────────────────────── */
.ca-leaderboard {
  background: var(--ca-cream, var(--ca-cream));
  border: 1px solid var(--ca-border);
  border-radius: 20px;
  overflow: hidden;
}
.ca-leaderboard__header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--_brown-rgb),.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ca-leaderboard__title {
  font-size: 13px;
  font-weight: 900;
  color: var(--ca-ink);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ca-leaderboard__subtitle {
  font-size: 11px;
  color: var(--ca-ink-3);
  margin-left: auto;
}
.ca-leaderboard__row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(var(--_brown-rgb),.05);
  transition: background .1s;
}
.ca-leaderboard__row:last-child { border-bottom: none; }
.ca-leaderboard__row:hover { background: rgba(var(--_brown-rgb),.03); }
.ca-leaderboard__pos {
  font-size: 12px;
  font-weight: 900;
  color: var(--ca-ink-3);
  text-align: center;
}
.ca-leaderboard__row:nth-child(1) .ca-leaderboard__pos { color: var(--ca-warning); }
.ca-leaderboard__row:nth-child(2) .ca-leaderboard__pos { color: var(--ca-ink-2); }
.ca-leaderboard__row:nth-child(3) .ca-leaderboard__pos { color: var(--_bronze,#cd7f32); }
.ca-leaderboard__name { font-size: 12.5px; font-weight: 700; color: var(--ca-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-leaderboard__pts  { font-size: 11.5px; font-weight: 800; color: var(--ca-ink-2); }

/* dark mode adjustments */
html.ca-dark .ca-xp-widget,
html.ca-dark .ca-leaderboard {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-xp-widget__name,
html.ca-dark .ca-leaderboard__name { color: rgba(255,255,255,.85); }
html.ca-dark .ca-rank--aspirante   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); }
html.ca-dark .ca-rank--actor       { background: rgba(248,169,31,.1);  color: #f8a91f; }
html.ca-dark .ca-rank--protagonista{ background: rgba(236,100,38,.1);  color: #f97316; }
html.ca-dark .ca-rank--estrella    { background: rgba(139,92,246,.12); color: #a78bfa; }
html.ca-dark .ca-rank--icono       { background: rgba(236,100,38,.15); color: #fb923c; border-color: rgba(236,100,38,.25); }

/* ─── Achievement toast notification ────────────────────────────────────── */
.ca-achievement-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1);
  max-width: min(360px, calc(100vw - 32px));
  width: 100%;
}
.ca-achievement-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ca-achievement-toast__inner {
  background: var(--ca-ink);
  border: 1px solid rgba(var(--_yellow-rgb),.3);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.ca-achievement-toast__icon { font-size: 26px; flex-shrink: 0; }
.ca-achievement-toast__body { flex: 1; }
.ca-achievement-toast__title { font-size: 12px; font-weight: 900; color: var(--ca-accent-2); text-transform: uppercase; letter-spacing: .04em; }
.ca-achievement-toast__name  { font-size: 14px; font-weight: 800; color: var(--ca-cream); margin-top: 1px; }
.ca-achievement-toast__pts   { font-size: 11.5px; color: rgba(var(--_cream-rgb),.5); margin-top: 2px; }

/* ─── Admin gamification panel ───────────────────────────────────────────── */
.ca-gam-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin-bottom: 20px; }
.ca-gam-rank-row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 80px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--_white-rgb),.04);
}
.ca-gam-rank-row:hover { background: rgba(var(--_white-rgb),.02); }
.ca-gam-rank-pos { font-size: 13px; font-weight: 900; color: rgba(var(--_white-rgb),.25); text-align: center; }
.ca-gam-rank-name { font-size: 13px; font-weight: 700; color: rgba(var(--_white-rgb),.8); }
.ca-gam-rank-pts  { font-size: 12.5px; color: rgba(var(--_white-rgb),.4); }
.ca-gam-rank-badge{ }

/* ─── sprint28.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   sprint28.css — Dark mode COMPLETO + fix toggle z-index
   Auditado contra todos los archivos PHP públicos del proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Variables dark ──────────────────────────────────────────────────── */

/* dark-toggle z-index hack removed */

/* ─── 3. Base / body (body-page-inner tiene #FFF hardcoded en style.css) ─── */
/* El header flota y es transparente: el body se ve en la franja de arriba.
   style.css pinta .body-wrapper con --white (#fef9f2, casi blanco) → deja una
   "línea blanca" sobre el cream de los heroes. Unificamos al cream real. */
.body-wrapper,
.body-page-inner { background-color: var(--ca-bg); }

html.ca-dark body,
html.ca-dark .body-wrapper,
html.ca-dark .body-page-inner { background: #0f0805; color: #f0ede7; }

/* ─── 4. Header ──────────────────────────────────────────────────────────── */
html.ca-dark .ca-header.is-scrolled {
  background: rgba(15,8,5,.94);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 24px rgba(0,0,0,.5);
}
html.ca-dark .ca-header__link                  { color: rgba(240,237,231,.65); }
html.ca-dark .ca-header__link:hover,
html.ca-dark .ca-header__link.is-active        { color: #f8a91f; }
html.ca-dark .ca-header__ghost                 { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: rgba(240,237,231,.8); }
html.ca-dark .ca-header__ghost:hover           { background: rgba(255,255,255,.12); }
html.ca-dark .ca-header__dropdown-menu         { background: #1c100c; border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-header__dropdown-menu a       { color: rgba(240,237,231,.65); }
html.ca-dark .ca-header__dropdown-menu a:hover { background: rgba(255,255,255,.06); color: #f8a91f; }
/* mobile-inner dark bg — now in canonical block */
html.ca-dark .ca-header__mobile-link           { color: rgba(240,237,231,.75); border-bottom-color: rgba(255,255,255,.06); }

/* ─── 5. Hero sections ───────────────────────────────────────────────────── */
html.ca-dark .ca-inner-hero,
html.ca-dark .ca-blog-hero       { background: #160d08; }
html.ca-dark .ca-inner-hero__title,
html.ca-dark .ca-blog-hero__title,
html.ca-dark .ca-inner-hero h1   { color: #f0ede7; }
html.ca-dark .ca-inner-hero__sub,
html.ca-dark .ca-blog-hero__sub  { color: rgba(240,237,231,.5); }

/* Post hero (no-image variant) */
html.ca-dark .ca-post-hero--no-img                        { background: #160d08; }
html.ca-dark .ca-post-hero--no-img .ca-post-hero__title   { color: #f0ede7; }
html.ca-dark .ca-post-hero--no-img .ca-post-hero__excerpt { color: rgba(240,237,231,.6); }
html.ca-dark .ca-post-hero--no-img .ca-post-hero__meta    { color: rgba(240,237,231,.4); }
html.ca-dark .ca-post-hero--no-img .ca-post-hero__cat     { background: rgba(248,169,31,.15); color: #f8a91f; }

/* ─── 6. Breadcrumbs ─────────────────────────────────────────────────────── */
html.ca-dark .ca-breadcrumbs,
html.ca-dark .ca-breadcrumbs a,
html.ca-dark .ca-breadcrumbs span { color: rgba(240,237,231,.38); }
html.ca-dark .ca-breadcrumbs a:hover { color: rgba(240,237,231,.7); }

/* ─── 7. Cards ───────────────────────────────────────────────────────────── */
html.ca-dark .ca-post-card .comet-card__inner,
html.ca-dark .comet-card__inner,
html.ca-dark .ca-post-card             { background: #1c100c; }
html.ca-dark .ca-post-card__title a,
html.ca-dark .ca-post-card__title      { color: #f0ede7; }
html.ca-dark .ca-post-card__excerpt    { color: rgba(240,237,231,.5); }
html.ca-dark .ca-post-card__meta span  { color: rgba(240,237,231,.35); }
html.ca-dark .ca-post-card__link       { color: rgba(240,237,231,.55); }
html.ca-dark .ca-post-card__link:hover { color: #f8a91f; }
html.ca-dark .ca-post-card__placeholder{ background: #2a1610; color: rgba(240,237,231,.15); }
html.ca-dark .ca-static-card,
html.ca-dark .ca-contact-card          { background: #1c100c; }

/* ─── 8. Post article content ────────────────────────────────────────────── */
html.ca-dark .ca-post-content            { color: rgba(240,237,231,.82); }
html.ca-dark .ca-post-content h1,
html.ca-dark .ca-post-content h2,
html.ca-dark .ca-post-content h3,
html.ca-dark .ca-post-content h4,
html.ca-dark .ca-post-content h5,
html.ca-dark .ca-post-content h6        { color: #f0ede7; }
html.ca-dark .ca-post-content a         { color: #f8a91f; }
html.ca-dark .ca-post-content a:hover   { color: #ec6426; }
html.ca-dark .ca-post-content blockquote{ background: rgba(255,255,255,.04); border-left-color: #f8a91f; color: rgba(240,237,231,.7); }
html.ca-dark .ca-post-content code      { background: rgba(255,255,255,.08); color: #f8a91f; border-radius: 4px; padding: 1px 5px; }
html.ca-dark .ca-post-content pre       { background: #1c100c; color: rgba(240,237,231,.8); border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-post-content table     { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-post-content th        { background: rgba(255,255,255,.06); color: #f0ede7; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-post-content td        { color: rgba(240,237,231,.7); border-color: rgba(255,255,255,.06); }
html.ca-dark .ca-post-content hr        { border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-post-content li        { color: rgba(240,237,231,.8); }
html.ca-dark .ca-post-content p         { color: rgba(240,237,231,.82); }

/* ─── 9. TOC sidebar ─────────────────────────────────────────────────────── */
html.ca-dark .toc-sidebar              { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .toc-sidebar__title       { color: rgba(240,237,231,.38); }
html.ca-dark .toc-sidebar a            { color: rgba(240,237,231,.52); }
html.ca-dark .toc-sidebar a:hover,
html.ca-dark .toc-sidebar a.is-active  { color: #f8a91f; }
html.ca-dark .ca-toc-mobile            { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-toc-mobile__toggle    { color: rgba(240,237,231,.6); }
html.ca-dark .ca-toc-mobile__list a    { color: rgba(240,237,231,.52); }

/* ─── 10. Comments ───────────────────────────────────────────────────────── */
html.ca-dark .ca-comment-item,
html.ca-dark .ca-comment__body        { background: #1c100c; border-color: rgba(255,255,255,.06); }
html.ca-dark .ca-comment__author      { color: #f0ede7; }
html.ca-dark .ca-comment__text        { color: rgba(240,237,231,.72); }
html.ca-dark .ca-comment__date,
html.ca-dark .ca-comment__meta        { color: rgba(240,237,231,.32); }
html.ca-dark .ca-comment__reply-btn   { color: rgba(240,237,231,.4); }
html.ca-dark .ca-comment__reply-btn:hover { color: #f8a91f; }
html.ca-dark .ca-comment__avatar      { background: rgba(255,255,255,.08); color: rgba(240,237,231,.45); }
html.ca-dark .ca-comments__title      { color: #f0ede7; }
html.ca-dark .ca-comment-form textarea,
html.ca-dark .ca-comment-form input[type="text"],
html.ca-dark .ca-comment-form input[type="email"] { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f0ede7; }
html.ca-dark .ca-comment-form textarea::placeholder,
html.ca-dark .ca-comment-form input::placeholder  { color: rgba(240,237,231,.3); }
html.ca-dark .ca-comment-form__label  { color: rgba(240,237,231,.6); }

/* ─── 11. Newsletter inline ──────────────────────────────────────────────── */
html.ca-dark .ca-nl-inline,
html.ca-dark .ca-newsletter-section   { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-nl-inline__title,
html.ca-dark .ca-newsletter-section h2{ color: #f0ede7; }
html.ca-dark .ca-nl-inline__sub       { color: rgba(240,237,231,.5); }
html.ca-dark .ca-nl-inline__input     { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f0ede7; }

/* ─── 12. Author ─────────────────────────────────────────────────────────── */
html.ca-dark .ca-author-hero          { background: #160d08; }
html.ca-dark .ca-author-hero__name    { color: #f0ede7; }
html.ca-dark .ca-author-hero__bio     { color: rgba(240,237,231,.55); }
html.ca-dark .ca-author-bio-card      { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .ca-author-bio-card__name{ color: #f0ede7; }
html.ca-dark .ca-author-bio-card__bio { color: rgba(240,237,231,.55); }

/* ─── 13. Tag pills ──────────────────────────────────────────────────────── */
html.ca-dark .ca-tag-pill             { background: rgba(255,255,255,.06); color: rgba(240,237,231,.6); border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-tag-pill:hover       { background: rgba(248,169,31,.15); color: #f8a91f; }

/* Category / country filter pills */
html.ca-dark .ca-filter-pill          { background: rgba(255,255,255,.06); color: rgba(240,237,231,.6); border-color: rgba(255,255,255,.12); }
html.ca-dark .ca-filter-pill.is-active,
html.ca-dark .ca-filter-pill:hover    { background: rgba(248,169,31,.15); color: #f8a91f; border-color: rgba(248,169,31,.3); }

/* ─── 14. Pagination ─────────────────────────────────────────────────────── */
html.ca-dark .ca-pagination__btn,
html.ca-dark .ca-pagination__num      { background: #1c100c; color: rgba(240,237,231,.5); border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-pagination__num.is-active { background: #6c4027; color: #fef2d8; border-color: #6c4027; }
html.ca-dark .ca-pagination__btn:hover,
html.ca-dark .ca-pagination__num:hover{ background: rgba(255,255,255,.08); color: #f0ede7; }

/* ─── 15. Reactions ──────────────────────────────────────────────────────── */
html.ca-dark .ca-post-reactions       { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .ca-react-btn            { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-react-btn:hover      { background: rgba(255,255,255,.09); }
html.ca-dark .ca-react-btn__count     { color: rgba(240,237,231,.45); }

/* ─── 16. Scroll to top ──────────────────────────────────────────────────── */
html.ca-dark #ca-scroll-top           { background: #1c100c; border-color: rgba(255,255,255,.12); }
html.ca-dark #ca-scroll-top svg       { stroke: rgba(240,237,231,.6); }

/* ─── 17. Share bars ─────────────────────────────────────────────────────── */
html.ca-dark .ca-post-share__label    { color: rgba(240,237,231,.4); }
html.ca-dark .ca-post-share__btn      { background: rgba(255,255,255,.06); color: rgba(240,237,231,.6); border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-post-share__btn:hover{ background: rgba(255,255,255,.1); color: #f0ede7; }
html.ca-dark .ca-float-share          { background: rgba(20,12,8,.97); border-color: rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
html.ca-dark .ca-float-share__btn     { background: rgba(255,255,255,.07); color: rgba(240,237,231,.65); }
html.ca-dark .ca-float-share__btn:hover{ background: rgba(255,255,255,.12); color: #f0ede7; }

/* ─── 18. Next article drawer ────────────────────────────────────────────── */
html.ca-dark .ca-next-article         { background: #1c100c; border-top-color: rgba(255,255,255,.08); }
html.ca-dark .ca-next-article__label  { color: rgba(240,237,231,.38); }
html.ca-dark .ca-next-article__title  { color: #f0ede7; }
html.ca-dark .ca-next-article__meta   { color: rgba(240,237,231,.35); }

/* ─── 19. Reading history sidebar ───────────────────────────────────────── */
html.ca-dark .ca-reading-history      { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .ca-reading-history__title{ color: rgba(240,237,231,.38); }
html.ca-dark .ca-reading-history a    { color: rgba(240,237,231,.6); }
html.ca-dark .ca-reading-history a:hover{ color: #f8a91f; }

/* ─── 20. Castina tip ────────────────────────────────────────────────────── */
html.ca-dark .ca-castina-tip__bubble  { background: #1c100c; border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-castina-tip__bubble p{ color: rgba(240,237,231,.75); }

/* ─── 21. Focus button ───────────────────────────────────────────────────── */
html.ca-dark .ca-focus-btn            { background: #1c100c; border-color: rgba(255,255,255,.12); color: rgba(240,237,231,.65); }

/* ─── 22. FAB menu items ─────────────────────────────────────────────────── */
html.ca-dark .ca-fab-menu__item       { background: #1c100c; color: rgba(240,237,231,.7); border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-fab-menu__item:hover { background: rgba(255,255,255,.08); }
html.ca-dark .ca-fab-menu__label      { background: #1c100c; color: rgba(240,237,231,.7); }

/* ─── 23. Push prompt ────────────────────────────────────────────────────── */
html.ca-dark .ca-push-prompt          { background: #1c100c; border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-push-prompt__title   { color: #f0ede7; }
html.ca-dark .ca-push-prompt__sub     { color: rgba(240,237,231,.45); }

/* ─── 24. Preloader ──────────────────────────────────────────────────────── */
html.ca-dark #preloader               { background: #0f0805; }
html.ca-dark .ca-preloader__dots span { background: #ec6426; }
html.ca-dark .ca-preloader__curtain   { background: #0f0805; }

/* ─── 25. Infinite scroll ────────────────────────────────────────────────── */
html.ca-dark .ca-infinite-loader__dot { background: #ec6426; }
html.ca-dark .ca-infinite-end         { color: rgba(240,237,231,.3); }

/* ─── 26. Footer ─────────────────────────────────────────────────────────── */
html.ca-dark .ca-footer__bottom       { border-top-color: rgba(255,255,255,.07); }
html.ca-dark .ca-footer__bottom span,
html.ca-dark .ca-footer__bottom a     { color: rgba(240,237,231,.3); }
html.ca-dark .ca-footer__links a      { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__links a:hover{ color: #f8a91f; }
html.ca-dark .ca-footer__cat a        { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__cat a:hover  { color: #f8a91f; }

/* ─── 27. Gamification widgets ───────────────────────────────────────────── */
html.ca-dark .ca-xp-widget,
html.ca-dark .ca-leaderboard           { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-xp-widget__name,
html.ca-dark .ca-leaderboard__name     { color: #f0ede7; }
html.ca-dark .ca-xp-widget__pts strong { color: #f0ede7; }
html.ca-dark .ca-xp-widget__pts        { color: rgba(240,237,231,.4); }
html.ca-dark .ca-xp-bar               { background: rgba(255,255,255,.08); }
html.ca-dark .ca-leaderboard__pts      { color: rgba(240,237,231,.4); }
html.ca-dark .ca-leaderboard__pos      { color: rgba(240,237,231,.22); }
html.ca-dark .ca-leaderboard__title    { color: rgba(240,237,231,.65); }
html.ca-dark .ca-leaderboard__subtitle { color: rgba(240,237,231,.3); }
html.ca-dark .ca-leaderboard__header   { border-bottom-color: rgba(255,255,255,.07); }
html.ca-dark .ca-leaderboard__row:hover{ background: rgba(255,255,255,.03); }
html.ca-dark .ca-xp-badge-pill         { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: rgba(240,237,231,.5); }
html.ca-dark .ca-xp-badge-pill.is-earned{ background: rgba(236,100,38,.1); border-color: rgba(236,100,38,.2); color: #f97316; }

/* ─── 28. Rank badges (dark) ─────────────────────────────────────────────── */
html.ca-dark .ca-rank--aspirante    { background: rgba(255,255,255,.06); color: rgba(240,237,231,.5); }
html.ca-dark .ca-rank--actor        { background: rgba(248,169,31,.12); color: #f8a91f; }
html.ca-dark .ca-rank--protagonista { background: rgba(236,100,38,.12); color: #fb923c; }
html.ca-dark .ca-rank--estrella     { background: rgba(139,92,246,.12); color: #c4b5fd; }
html.ca-dark .ca-rank--icono        { background: rgba(236,100,38,.15); color: #fb923c; border-color: rgba(236,100,38,.25); }

/* ─── 29. Cookie consent ─────────────────────────────────────────────────── */
html.ca-dark .ca-cookie-consent        { background: #1c100c; border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-cookie-consent p      { color: rgba(240,237,231,.65); }

/* ─── 30. Sticky banner ──────────────────────────────────────────────────── */
html.ca-dark #ca-sticky-banner         { background: #1c100c; border-bottom-color: rgba(255,255,255,.08); color: rgba(240,237,231,.7); }

/* ─── 31. Global inputs (contact, about, newsletter-archivo) ─────────────── */
html.ca-dark input[type="text"],
html.ca-dark input[type="email"],
html.ca-dark input[type="url"],
html.ca-dark textarea,
html.ca-dark select                    { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #f0ede7; }
html.ca-dark input::placeholder,
html.ca-dark textarea::placeholder     { color: rgba(240,237,231,.3); }
html.ca-dark label                     { color: rgba(240,237,231,.65); }

/* ─── 32. serie.php — article list cards (inline bg:white) ──────────────── */


/* ─── 33. castings.php — country filter bar (inline bg:white) ───────────── */
html.ca-dark .ca-castings-filter-bar,
html.ca-dark [style*="background:white"],
html.ca-dark [style*="background: white"]      { background: #160d08; }

/* ─── 34. Inline style overrides (hardcoded rgba(26,15,9,...) and var(--ca-ink)) ── */
/* These are text colors inside inline styles across about, contact, serie,
   guardados, guia-consejos, search-results, newsletter-archivo, etc.      */
html.ca-dark [style*="color:#1a0f09"],
html.ca-dark [style*="color: #1a0f09"]         { color: #f0ede7; }

html.ca-dark [style*="color:rgba(26,15,9,.7"],
html.ca-dark [style*="color:rgba(26,15,9,.6"],
html.ca-dark [style*="color:rgba(26,15,9,.8"]  { color: rgba(240,237,231,.7); }

html.ca-dark [style*="color:rgba(26,15,9,.5"],
html.ca-dark [style*="color:rgba(26,15,9,.4"]  { color: rgba(240,237,231,.45); }

html.ca-dark [style*="color:rgba(26,15,9,.3"],
html.ca-dark [style*="color:rgba(26,15,9,.2"],
html.ca-dark [style*="color:rgba(26,15,9,.1"]  { color: rgba(240,237,231,.28); }

html.ca-dark [style*="background:#fef2d8"],
html.ca-dark [style*="background: #fef2d8"]    { background: #1c100c; }

html.ca-dark [style*="background:rgba(26,15,9"],
html.ca-dark [style*="background: rgba(26,15,9"]{ background: rgba(255,255,255,.04); }

html.ca-dark [style*="border-color:rgba(26,15,9"],
html.ca-dark [style*="border:1px solid rgba(26,15,9"],
html.ca-dark [style*="border:1.5px solid rgba(26,15,9"],
html.ca-dark [style*="border: 1px solid rgba(26,15,9"]{ border-color: rgba(255,255,255,.1); }

/* Exception: don't override colored accent backgrounds */
html.ca-dark [style*="background:#ec6426"],
html.ca-dark [style*="background:#f8a91f"],
html.ca-dark [style*="background:#6c4027"]     { /* keep as-is */ }

/* ─── 35. Headings que heredan colores del tema base (style.css) ─────────── */
html.ca-dark h1:not(.no-dark),
html.ca-dark h2:not(.no-dark),
html.ca-dark h3:not(.no-dark),
html.ca-dark h4:not(.no-dark),
html.ca-dark h5:not(.no-dark),
html.ca-dark h6:not(.no-dark) {
  color: #f0ede7;
}
html.ca-dark p   { color: rgba(240,237,231,.78); }
html.ca-dark li  { color: rgba(240,237,231,.78); }

/* Override para párrafos dentro del footer (ya tienen color correcto por defecto) */
html.ca-dark .ca-footer p { color: rgba(254,242,216,.55); }

/* ─── 36. serie.php inline card links ───────────────────────────────────── */

html.ca-dark a[style*="background:white"] h3,
html.ca-dark a[style*="background: white"] h3 { color: #f0ede7; }

/* ─── 37. offline.php / reset-password.php ───────────────────────────────── */
html.ca-dark .ca-offline-wrap,
html.ca-dark .ca-login-wrap          { background: #0f0805; }

/* ─── 38. Section general / container backgrounds ────────────────────────── */
html.ca-dark .section-spacing,
html.ca-dark .ca-section             { background-color: transparent; }


/* dark-toggle icon swap: ver bloque canónico .ca-dark-toggle (opacity/transform) */

/* PWA icon mix-blend-mode fix — only use screen on dark bg */
html.ca-dark .ca-pwa-install__icon img { mix-blend-mode: screen; }
html:not(.ca-dark) .ca-pwa-install__icon img { mix-blend-mode: normal; }

/* ─── CSS variables for dark mode component theming ─────────────────────── */
html.ca-dark {
  --ca-card-bg: #1c100c;
}
html:not(.ca-dark) {
  --ca-card-bg: #ffffff;
}

/* ─── sprint29.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   sprint29.css — Dark mode definitivo + spacing fixes
   Auditado visualmente contra todas las screenshots.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. FOOTER: la raíz del problema ───────────────────────────────────────
   .ca-footer usa background:var(--ca-ink). En dark mode --ca-ink = #f0ede7 (CLARO).
   Override explícito necesario con para ganar la especificidad.        */


html.ca-dark .ca-footer__grid,
html.ca-dark .ca-footer__bottom-inner { background: transparent; }
html.ca-dark .ca-footer__brand-desc    { color: rgba(240,237,231,.4); }
html.ca-dark .ca-footer__col-title     { color: #f0ede7; }
html.ca-dark .ca-footer__col a         { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__col a:hover   { color: #f8a91f; }
html.ca-dark .ca-footer__social        { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(240,237,231,.55); }
html.ca-dark .ca-footer__social:hover  { background: rgba(255,255,255,.1); color: #f0ede7; }
html.ca-dark .ca-footer__copyright     { color: rgba(240,237,231,.28); }
html.ca-dark .ca-footer__legal a       { color: rgba(240,237,231,.28); }
html.ca-dark .ca-footer__legal a:hover { color: rgba(240,237,231,.6); }
html.ca-dark .ca-footer__bottom        { border-top-color: rgba(255,255,255,.07); background: #1a0f09; }

/* Newsletter section in footer */
html.ca-dark .ca-footer__nl-title     { color: #f0ede7; }
html.ca-dark .ca-footer__nl-sub       { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__nl-eyebrow   { color: #f8a91f; }
html.ca-dark .ca-footer__nl-input     { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #f0ede7; }
html.ca-dark .ca-footer__nl-input::placeholder { color: rgba(240,237,231,.3); }

/* ─── 2. CARDS BLANCAS ────────────────────────────────────────────────────── */

/* ca-post-card__body tiene background:white en sprint8.css */
html.ca-dark .ca-post-card__body      { background: #1c100c; }

/* comet-card inner - doble especificidad */
html.ca-dark .comet-card .comet-card__inner,
html.ca-dark .ca-post-card .comet-card__inner,
html.ca-dark .comet-card__inner       { background: #1c100c; }

/* Apple carousel cards (homepage) */
html.ca-dark .ca-apple-v2__card       { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .ca-apple-v2__card-body  { background: transparent; }
html.ca-dark .ca-apple-v2__card-title { color: #f0ede7; }
html.ca-dark .ca-apple-v2__card-meta  { color: rgba(240,237,231,.35); }
html.ca-dark .ca-apple-v2__prev,
html.ca-dark .ca-apple-v2__next       { background: #1c100c; border-color: rgba(255,255,255,.1); color: rgba(240,237,231,.6); }

/* Testimonial cards (homepage) */
html.ca-dark .testi-card              { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .testi-card__text        { color: rgba(240,237,231,.65); }
html.ca-dark .testi-card__name        { color: #f0ede7; }
html.ca-dark .testi-card__role        { color: rgba(240,237,231,.38); }

/* Related in sidebar */
html.ca-dark .ca-sidebar-related      { background: transparent; }
html.ca-dark .ca-sidebar-related__item:hover { background: rgba(255,255,255,.04); border-radius: 10px; }
html.ca-dark .ca-sidebar-related__heading { color: #f0ede7; }
html.ca-dark .ca-sidebar-related__cat { color: #ec6426; }
html.ca-dark .ca-sidebar-related__title { color: rgba(240,237,231,.35); }
html.ca-dark .ca-sidebar-related__placeholder { background: rgba(255,255,255,.08); color: rgba(240,237,231,.3); }

/* Author card (sidebar) - uses var(--ca-cream) which in dark = #160d08 = already dark,
   but let's be explicit for the avatar background */
html.ca-dark .ca-author-card          { background: #1c100c; border-color: rgba(255,255,255,.07); }
html.ca-dark .ca-author-card__avatar  { background: rgba(255,255,255,.08); color: rgba(240,237,231,.45); }
html.ca-dark .ca-author-card__name    { color: #f0ede7; }
html.ca-dark .ca-author-card__meta    { color: rgba(240,237,231,.38); }
html.ca-dark .ca-author-card__bio     { color: rgba(240,237,231,.55); }
html.ca-dark .ca-author-card__link    { color: rgba(240,237,231,.45); border-top-color: rgba(255,255,255,.07); }
html.ca-dark .ca-author-card__link:hover { color: #f8a91f; }

/* Rel card (post grid below article) */
html.ca-dark .ca-rel-card .comet-card__inner { background: #1c100c; }
html.ca-dark .ca-rel-card__title      { color: #f0ede7; }
html.ca-dark .ca-rel-card__placeholder{ background: rgba(255,255,255,.08); color: rgba(240,237,231,.2); }

/* ─── 3. NEWSLETTER BAND (homepage, about) ───────────────────────────────── */
html.ca-dark .ca-newsletter-band      { background: #1c100c; border-color: rgba(255,255,255,.08); }
html.ca-dark .ca-newsletter-band h2,
html.ca-dark .ca-newsletter-band h3   { color: #f0ede7; }
html.ca-dark .ca-newsletter-band p    { color: rgba(240,237,231,.55); }
html.ca-dark .ca-newsletter-form__input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #f0ede7; }
html.ca-dark .ca-newsletter-form__input::placeholder { color: rgba(240,237,231,.3); }

/* ─── 4. COMMENTS SECTION: spacing + form button ────────────────────────── */
/* Margin between comments section and footer newsletter */
html.ca-dark .ca-comments,
.ca-comments { padding-bottom: 80px; }

/* Comment submit button in dark */
html.ca-dark .ca-comment-form__btn {
  background: var(--ca-brown, #6c4027);
  color: #fef2d8;
}
html.ca-dark .ca-comment-form__btn:hover { background: var(--ca-accent); }

/* "Los comentarios son moderados" notice */
html.ca-dark .ca-comment-form__notice,
html.ca-dark [style*="comentarios son moderados"] { color: rgba(240,237,231,.38); }

/* Form inputs in comments */

html.ca-dark .ca-comment-form__input::placeholder { color: rgba(240,237,231,.3); }
html.ca-dark .ca-comment-form__label { color: rgba(240,237,231,.55); }

/* ─── 5. SIDEBAR SPACING ─────────────────────────────────────────────────── */
/* Widgets: aumentar gap entre ellos */
.ca-post-sidebar {
  gap: 32px;
}

/* TOC sidebar más espacio interno */
.toc-sidebar {
  padding-bottom: 6px;
}

/* Reading history más margen */
.ca-reading-history {
  margin-bottom: 0; /* el gap del flex parent lo maneja */
}

/* Author card sin margin-bottom propio (el gap del flex lo maneja) */
.ca-author-card {
  margin-bottom: 0;
}

/* ─── 6. HOMEPAGE / GENERAL ──────────────────────────────────────────────── */
/* Secciones del index con fondo blanco del tema heredado */
html.ca-dark .tp-blog-area,
html.ca-dark .tp-feature-area,
html.ca-dark .ca-home-section        { background: transparent; }

/* Headings del tema heredado (style.css tiene muchos colores hardcoded) */
html.ca-dark .tp-hero__title,
html.ca-dark .section__title,
html.ca-dark .postbox__title,
html.ca-dark .blog__title,
html.ca-dark .widget__title          { color: #f0ede7; }

/* Dropdown menu en header */
html.ca-dark .ca-header__dropdown-menu { background: #1c100c; border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-header__dropdown-menu a { color: rgba(240,237,231,.65); }
html.ca-dark .ca-header__dropdown-menu a:hover { background: rgba(255,255,255,.06); color: #f8a91f; }

/* Section headers (eyebrow labels) */
html.ca-dark .ca-section-eye         { color: rgba(240,237,231,.35); }
html.ca-dark .ca-section-title       { color: #f0ede7; }

/* ─── 7. XP WIDGET "ver mi progreso" link ────────────────────────────────── */

html.ca-dark .ca-xp-widget a[href*="mi-progreso"]:hover {
  color: #f8a91f;
}

/* ─── 8. HEADER scrolled state (nav links + logo in dark mode) ───────────── */
html.ca-dark .ca-header              { background: transparent; }
/* dark scrolled bg removed — pill handles its own background */

/* ─── 9. INDEX hero gradient (SVG stop) ──────────────────────────────────── */
/* The rgba(26,15,9,0) gradient stop on index.php is fine — transparent is transparent */

/* ─── 10. Global: cualquier fondo blanco que quede ───────────────────────── */
html.ca-dark .bg-white,
html.ca-dark [class*="bg-light"]     { background: #0f0805; }

/* ─── HEADER: logo | nav | búsqueda (filler) | acciones ─────────────────────
   La búsqueda ocupa el espacio sobrante (minmax(0,1fr)) en vez de dejar un hueco
   vacío entre nav y acciones. Acotado a desktop (≥961px): en mobile el inner es
   un grid de 2 col (logo + mobcast), no debe heredar estas 4 columnas. */
@media (min-width: 961px) {
  .ca-header__inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    max-width: 1080px;
  }
  /* La búsqueda ocupa la columna 1fr pero es compacta: se pega a la derecha
     (junto a las acciones) para que el sobrante quede como separación natural
     entre el nav (izq) y las herramientas (der), sin un hueco vacío al medio. */
  .ca-header__search-wrap { justify-self: stretch; justify-content: flex-end; }
  .ca-header__search-inline {
    width: 100%;
    max-width: 200px;
  }
  .ca-header__search-inline:focus-within {
    max-width: 240px;
  }
}

.ca-header__nav {
  gap: 0;
}

.ca-header__link {
  padding: 0 10px;
  font-size: 13.5px;
}

.ca-header__right {
  gap: 6px;
  flex-shrink: 0;
}

/* Search input: smaller when many nav items */
.ca-search-input-wrap {
  width: 140px;
}
.ca-search-input-wrap:focus-within {
  width: 220px;
  transition: width .25s ease;
}

.ca-header__ghost {
  padding: 0 12px;
  font-size: 13px;
}

/* ─── SIDEBAR: fix spacing between widgets ─────────────────────────────── */
.ca-post-sidebar {
  gap: 0;
  display: flex !important;
  flex-direction: column;
}

.ca-post-sidebar > * {
  margin-bottom: 24px;
}

.ca-post-sidebar > *:last-child {
  margin-bottom: 0;
}

/* ─── MI PROGRESO: uniform dark background ──────────────────────────────── */
/* Remove any remaining light strips */
html.ca-dark .ca-inner-hero,
html.ca-dark .ca-section,
html.ca-dark .ca-progress-layout > * { background: transparent; }

html.ca-dark .ca-leaderboard,
html.ca-dark [style*="background:rgba(255,255,255,.04)"] {
  background: rgba(255,255,255,.05);
}

/* Light mode: "Cómo ganar puntos" panel background */
.ca-points-guide {
  background: var(--ca-surface, rgba(var(--_brown-rgb),.05));
  border: 1px solid var(--ca-border);
}
html.ca-dark .ca-points-guide {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

/* ─── ALL CARDS: consistent dark brown ─────────────────────────────────── */
/* Cards that might still be white */


/* Activity box in mi-progreso */




/* Activity row text in dark mode */


/* ─── sprint30.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 30 — Sistema de cuentas de lectores
   Auth pages (registro / login / recuperar), mi-cuenta tabs
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Auth pages layout ─────────────────────────────────────────────────── */
.ca-auth-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
  max-width: 900px;
}

.ca-auth-layout--center {
  grid-template-columns: 440px;
  justify-content: center;
}

/* ─── Auth card ─────────────────────────────────────────────────────────── */
.ca-auth-card {
  background: var(--ca-card-bg, white);
  border: 1.5px solid var(--ca-border, var(--ca-border));
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── Auth fields ───────────────────────────────────────────────────────── */
.ca-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ca-auth-field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ca-ink, var(--ca-ink));
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca-auth-field label small {
  font-weight: 500;
  opacity: .5;
  font-size: 12px;
}

.ca-auth-field input,
.ca-auth-field textarea,
.ca-auth-field select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ca-ink, var(--ca-ink));
  background: var(--ca-surface, rgba(var(--_brown-rgb),.04));
  border: 1.5px solid var(--ca-border, rgba(108,64,39,.15));
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.ca-auth-field textarea { resize: vertical; min-height: 80px; }

/* iOS hace auto-zoom al enfocar un campo con font-size < 16px.
   En mobile subimos los campos reales a 16px (no afecta el diseño desktop). */
@media (max-width: 767px) {
  .ca-auth-field input,
  .ca-auth-field textarea,
  .ca-auth-field select,
  .ca-footer__nl-input,
  .ca-about-nl__input,
  .ca-contact-input,
  .ca-comment-form__input,
  .ca-comment-form__textarea,
  .ca-blog-search #ca-search-input {
    font-size: 16px;
  }
}

.ca-auth-field input:focus,
.ca-auth-field textarea:focus {
  border-color: var(--ca-brown, var(--ca-brown));
  box-shadow: 0 0 0 3px var(--ca-border);
}

.ca-auth-pass-wrap {
  position: relative;
}

.ca-auth-pass-wrap input {
  padding-right: 44px;
}

.ca-auth-eye {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer;
  color: var(--ca-ink-3);
  padding: 4px;
  transition: color .2s;
}

.ca-auth-eye:hover { color: var(--ca-brown, var(--ca-brown)); }

.ca-auth-input-prefix {
  display: flex;
  align-items: center;
  background: var(--ca-surface, rgba(var(--_brown-rgb),.04));
  border: 1.5px solid var(--ca-border, rgba(108,64,39,.15));
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.ca-auth-input-prefix:focus-within {
  border-color: var(--ca-brown, var(--ca-brown));
  box-shadow: 0 0 0 3px var(--ca-border);
}

.ca-auth-input-prefix span {
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ca-ink-3);
  border-right: 1.5px solid var(--ca-border, var(--ca-border));
  white-space: nowrap;
}

.ca-auth-input-prefix input {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ca-auth-input-prefix input:focus {
  border-color: transparent;
  box-shadow: none;
}

/* ─── Alerts ───────────────────────────────────────────────────────────── */
.ca-auth-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ca-auth-alert--ok  { background: rgba(var(--_green-rgb,34,197,94),.1);  color: var(--_green-dark,#15803d); border: 1px solid rgba(34,197,94,.2); }
.ca-auth-alert--err { background: rgba(var(--_red-rgb,239,68,68),.09); color: var(--_red-dark,#b91c1c); border: 1px solid rgba(239,68,68,.2); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.ca-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  border-radius: 99px; border: none;
  cursor: pointer; text-decoration: none;
  transition: opacity .2s, transform .15s;
}

.ca-btn:hover    { opacity: .88; }
.ca-btn:active   { transform: scale(.97); }
.ca-btn:disabled { opacity: .4; cursor: not-allowed; }

.ca-btn--primary { background: var(--ca-accent, var(--ca-accent)); color: #fff; }
.ca-btn--ghost   { background: transparent; color: var(--ca-ink, var(--ca-ink)); border: 1.5px solid var(--ca-border, var(--ca-border-2)); }
.ca-btn--danger  { background: var(--ca-error); color: #fff; }
.ca-btn--full    { width: 100%; }
.ca-btn--sm      { height: 32px; padding: 0 14px; font-size: 12.5px; }

/* ─── Auth misc ─────────────────────────────────────────────────────────── */
.ca-auth-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--ca-ink, var(--ca-ink));
}

.ca-auth-check input { width: 16px; height: 16px; accent-color: var(--ca-brown, var(--ca-brown)); }

.ca-auth-footer-link {
  text-align: center;
  font-size: 13.5px;
  color: var(--ca-ink-2);
  margin: 0;
}

.ca-auth-footer-link a,
.ca-auth-label-link {
  color: var(--ca-brown, var(--ca-brown));
  font-weight: 700;
  text-decoration: none;
}

.ca-auth-label-link { margin-left: auto; font-size: 12px; }

.req { color: var(--ca-accent, var(--ca-accent)); }
.ca-input-hint { font-size: 11.5px; opacity: .45; margin-top: 2px; }

/* ─── Auth aside (benefits) ─────────────────────────────────────────────── */
.ca-auth-aside { padding-top: 8px; }

.ca-auth-aside__title {
  font-size: 16px; font-weight: 900;
  color: var(--ca-ink, var(--ca-ink));
  margin: 0 0 20px;
}

.ca-auth-benefits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}

.ca-auth-benefits li {
  display: flex; gap: 14px; align-items: flex-start;
}

.ca-auth-benefit__icon {
  font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px;
}

.ca-auth-benefits strong {
  display: block; font-size: 14px; font-weight: 800;
  color: var(--ca-ink, var(--ca-ink)); margin-bottom: 2px;
}

.ca-auth-benefits p {
  margin: 0; font-size: 13px;
  color: var(--ca-ink-2); line-height: 1.4;
}

/* ─── Account hero avatar ───────────────────────────────────────────────── */
.ca-account-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ca-brown, var(--ca-brown));
  color: white;
  font-size: 22px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* ─── Tabs nav ──────────────────────────────────────────────────────────── */
.ca-account-tabs-nav {
  border-bottom: 1.5px solid var(--ca-border, var(--ca-border));
  position: sticky; top: 64px; z-index: 50;
  background: var(--ca-cream, var(--ca-cream));
}

.ca-account-tabs-nav .container {
  display: flex; gap: 0; overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}

.ca-account-tabs-nav .container::-webkit-scrollbar { display: none; }

.ca-account-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  font-size: 13.5px; font-weight: 700;
  color: var(--ca-ink-2);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}

.ca-account-tab:hover   { color: var(--ca-ink, var(--ca-ink)); }
.ca-account-tab.is-active {
  color: var(--ca-brown, var(--ca-brown));
  border-bottom-color: var(--ca-brown, var(--ca-brown));
}

.ca-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 800;
  background: var(--ca-accent, var(--ca-accent));
  color: white; border-radius: 99px;
}

/* ─── Account layout ────────────────────────────────────────────────────── */
.ca-account-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

.ca-account-main { min-width: 0; }

/* ─── Account sections ──────────────────────────────────────────────────── */
.ca-account-section {
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border, var(--ca-border));
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.ca-account-section--danger {
  border-color: rgba(var(--_red-rgb,220,38,38),.2);
}

.ca-account-section__title {
  font-size: 15px; font-weight: 900;
  color: var(--ca-ink, var(--ca-ink));
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 8px;
}

.ca-account-section__title--danger { color: var(--ca-error); }

/* ─── Form grid ─────────────────────────────────────────────────────────── */
.ca-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.ca-form-full { grid-column: 1 / -1; }

/* ─── Toggle switches ───────────────────────────────────────────────────── */
.ca-toggle-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ca-border, rgba(var(--_brown-rgb),.08));
}

.ca-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.ca-toggle-row:first-child { padding-top: 0; }

.ca-toggle-info { flex: 1; }

.ca-toggle-title { font-size: 14px; font-weight: 800; color: var(--ca-ink, var(--ca-ink)); margin-bottom: 2px; }
.ca-toggle-desc  { font-size: 12.5px; color: var(--ca-ink-2); }

.ca-toggle-switch { position: relative; flex-shrink: 0; cursor: pointer; }
.ca-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.ca-toggle-track {
  display: block;
  width: 44px; height: 24px;
  background: rgba(var(--_ink-rgb),.15);
  border-radius: 99px;
  transition: background .2s;
  position: relative;
}

.ca-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ca-surface);
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.ca-toggle-switch input:checked + .ca-toggle-track { background: var(--ca-accent, var(--ca-accent)); }
.ca-toggle-switch input:checked + .ca-toggle-track::after { transform: translateX(20px); }

/* ─── Info rows ─────────────────────────────────────────────────────────── */
.ca-info-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-border, rgba(var(--_brown-rgb),.08));
  font-size: 13.5px;
  flex-wrap: wrap;
}

.ca-info-row:last-child { border-bottom: none; }

.ca-info-label { color: var(--ca-ink-2); font-weight: 600; min-width: 120px; }
.ca-info-value { color: var(--ca-ink, var(--ca-ink)); font-weight: 600; }

.ca-info-badge {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
}

.ca-info-badge--ok   { background: rgba(var(--_green-rgb,34,197,94),.12); color: var(--_green-dark,#15803d); }
.ca-info-badge--warn { background: rgba(var(--_yellow-rgb),.12);  color: var(--_amber-dark,#92400e); }

/* ─── Activity list ─────────────────────────────────────────────────────── */
.ca-activity-list {
  border: 1.5px solid var(--ca-border, var(--ca-border));
  border-radius: 12px;
  overflow: hidden;
}

.ca-activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--_brown-rgb),.06);
  font-size: 13px;
}

.ca-activity-row:last-child { border-bottom: none; }

.ca-activity-row__icon { font-size: 15px; flex-shrink: 0; }
.ca-activity-row__text { flex: 1; min-width: 0; color: rgba(var(--_ink-rgb),.7); }
.ca-activity-row__text em { display: block; font-style: normal; font-size: 11px; color: var(--ca-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-activity-row__pts  { font-size: 12px; font-weight: 700; color: var(--ca-accent, var(--ca-accent)); flex-shrink: 0; }
.ca-activity-row__date { font-size: 11px; color: var(--ca-ink-3); flex-shrink: 0; }

/* ─── Badges grid ───────────────────────────────────────────────────────── */
.ca-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.ca-badge-card {
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  border: 1.5px solid;
  transition: transform .2s;
}

.ca-badge-card:hover { transform: translateY(-2px); }

.ca-badge-card.is-earned {
  background: rgba(var(--_accent-rgb),.06);
  border-color: rgba(var(--_accent-rgb),.2);
}

.ca-badge-card.is-locked {
  background: rgba(var(--_ink-rgb),.03);
  border-color: rgba(var(--_ink-rgb),.08);
  opacity: .6;
}

.ca-badge-card__icon  { font-size: 24px; margin-bottom: 6px; }
.ca-badge-card__label { font-size: 12.5px; font-weight: 800; color: var(--ca-ink, var(--ca-ink)); margin-bottom: 2px; }
.ca-badge-card__desc  { font-size: 11px; color: rgba(var(--_ink-rgb),.45); line-height: 1.3; }
.ca-badge-card__date  { font-size: 10.5px; color: var(--ca-accent, var(--ca-accent)); font-weight: 700; margin-top: 6px; }

/* ─── Saves grid ───────────────────────────────────────────────────────── */
.ca-saves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.ca-save-card {
  position: relative;
  border-radius: 12px;
  border: 1.5px solid var(--ca-border, var(--ca-border));
  overflow: hidden;
  background: var(--ca-surface);
  transition: box-shadow .2s, transform .2s, opacity .3s;
}

.ca-save-card:hover { box-shadow: 0 6px 20px rgba(var(--_ink-rgb),.08); transform: translateY(-2px); }

.ca-save-card__img {
  display: block; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; background: rgba(var(--_brown-rgb),.06);
}

.ca-save-card__body   { padding: 14px; }
.ca-save-card__cat    { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ca-accent, var(--ca-accent)); background: rgba(var(--_accent-rgb),.08); border-radius: 4px; padding: 2px 6px; margin-bottom: 6px; }
.ca-save-card__title  { display: block; font-size: 13.5px; font-weight: 800; color: var(--ca-ink, var(--ca-ink)); text-decoration: none; line-height: 1.3; margin-bottom: 6px; }
.ca-save-card__title:hover { color: var(--ca-brown, var(--ca-brown)); }
.ca-save-card__meta   { font-size: 11.5px; color: var(--ca-ink-3); }

.ca-save-card__remove {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: var(--ca-ink-2); color: white;
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}

.ca-save-card:hover .ca-save-card__remove { opacity: 1; }

.ca-saves-loading { padding: 32px; text-align: center; font-size: 14px; opacity: .5; }

/* ─── Sidebar (account) ─────────────────────────────────────────────────── */
.ca-account-sidebar { display: flex; flex-direction: column; gap: 16px; }

.ca-sidebar-card {
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border, var(--ca-border));
  border-radius: 16px;
  padding: 20px;
}

.ca-sidebar-card__title {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ca-ink-3);
  margin-bottom: 14px;
}

.ca-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(var(--_brown-rgb),.06);
}

.ca-stat-row:last-child { border-bottom: none; }
.ca-stat-row span { color: var(--ca-ink-2); }
.ca-stat-row strong { color: var(--ca-ink, var(--ca-ink)); }

.ca-sidebar-link {
  display: block;
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 600;
  color: rgba(var(--_ink-rgb),.7);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
}

.ca-sidebar-link:hover { background: rgba(var(--_brown-rgb),.07); color: var(--ca-ink, var(--ca-ink)); }
.ca-sidebar-link--logout { color: var(--ca-error); }
.ca-sidebar-link--logout:hover { background: rgba(var(--_red-rgb,220,38,38),.07); }

/* ─── Header: logged-in reader indicator ───────────────────────────────── */
.ca-header__reader {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px;
  font-size: 13.5px; font-weight: 700;
  color: var(--ca-ink, var(--ca-ink));
  text-decoration: none;
  border-radius: 99px;
  border: 1.5px solid rgba(108,64,39,.15);
  transition: background .2s;
}

.ca-header__reader:hover { background: rgba(var(--_brown-rgb),.07); }

.ca-header__reader-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ca-brown, var(--ca-brown));
  color: white; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ca-auth-layout { grid-template-columns: 1fr; gap: 32px; }
  .ca-auth-aside  { order: -1; }
  .ca-account-layout { grid-template-columns: 1fr; }
  .ca-account-sidebar { display: none; }
  .ca-form-grid { grid-template-columns: 1fr; }
  .ca-form-full { grid-column: 1; }
  .ca-badges-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 600px) {
  .ca-auth-card { padding: 20px; }
  .ca-account-tab { padding: 12px 12px; font-size: 12.5px; }
  .ca-saves-grid { grid-template-columns: 1fr; }
}

/* ─── Dark mode overrides ───────────────────────────────────────────────── */


html.ca-dark .ca-auth-field input,
html.ca-dark .ca-auth-field textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #f0ede7;
}

html.ca-dark .ca-auth-field input:focus,
html.ca-dark .ca-auth-field textarea:focus {
  border-color: var(--ca-brown, #6c4027);
}

html.ca-dark .ca-auth-input-prefix {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

html.ca-dark .ca-auth-input-prefix input { color: #f0ede7; }
html.ca-dark .ca-auth-input-prefix span { border-color: rgba(255,255,255,.1); }



html.ca-dark .ca-account-tab { color: rgba(240,237,231,.4); }
html.ca-dark .ca-account-tab.is-active { color: var(--ca-yellow, #f8a91f); border-bottom-color: var(--ca-yellow, #f8a91f); }



html.ca-dark .ca-toggle-track { background: rgba(255,255,255,.15); }

html.ca-dark .ca-badge-card.is-locked  { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
html.ca-dark .ca-badge-card.is-earned  { background: rgba(236,100,38,.1); border-color: rgba(236,100,38,.25); }

html.ca-dark .ca-stat-row { border-color: rgba(255,255,255,.05); }
html.ca-dark .ca-toggle-row { border-color: rgba(255,255,255,.06); }
html.ca-dark .ca-info-row   { border-color: rgba(255,255,255,.06); }
html.ca-dark .ca-activity-row { border-color: rgba(255,255,255,.05); }

html.ca-dark .ca-sidebar-link { color: rgba(240,237,231,.6); }
html.ca-dark .ca-sidebar-link:hover { background: rgba(255,255,255,.07); color: #f0ede7; }

html.ca-dark .ca-header__reader { border-color: rgba(255,255,255,.12); color: #f0ede7; }
html.ca-dark .ca-header__reader:hover { background: rgba(255,255,255,.07); }

html.ca-dark .ca-save-card__title { color: #f0ede7; }
html.ca-dark .ca-save-card__remove { background: rgba(0,0,0,.6); }

/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 30 — Fixes: inner hero spacing + dark mode text
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ca-inner-hero base: padding so titles don't hug the header ──────── */
.ca-inner-hero {
  padding: 40px 0 36px;
  background: var(--ca-surface, var(--ca-cream));  /* usa surface que tiene override dark */
  border-bottom: 1px solid var(--ca-border);
}

.ca-inner-hero--sm {
  padding: 28px 0 24px;
}

.ca-inner-hero__title {
  font-family: var(--ca-font-display), 'Thunder', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  color: var(--ca-ink, var(--ca-ink));
  line-height: 1.05;
  margin: 8px 0 0;
  letter-spacing: -0.02em;
}

.ca-inner-hero__sub {
  font-size: 15px;
  color: var(--ca-ink-2);
  margin: 8px 0 0;
  line-height: 1.4;
}

/* Breadcrumbs inside inner hero */
.ca-inner-hero .ca-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ca-ink-3);
}

.ca-inner-hero .ca-breadcrumbs a {
  color: var(--ca-ink-2);
  text-decoration: none;
  font-weight: 600;
}

.ca-inner-hero .ca-breadcrumbs a:hover { color: var(--ca-brown, var(--ca-brown)); }

.ca-inner-hero .ca-breadcrumbs span::before {
  content: '/';
  margin-right: 6px;
  opacity: .4;
}

/* Account hero override (has avatar row, needs less title margin) */
.ca-account-hero-row { display: flex; align-items: center; gap: 20px; margin-top: 12px; }

/* Mi cuenta — helpers que reemplazan estilos inline del PHP (CSP-safe) */
.ca-account-verified-banner {
  background: #22c55e; color: #fff; text-align: center;
  padding: 10px 16px; font-size: 14px; font-weight: 700;
}
.ca-account-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ca-account-hero__name { margin: 0; }
.ca-account-hero__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap;
}
.ca-account-hero__user { font-size: 13px; opacity: .6; }
.ca-account-hero__unverified {
  font-size: 12px; background: rgba(236,100,38,.15); color: #ec6426;
  padding: 2px 8px; border-radius: 99px;
}
.ca-account-hero__ptswrap { margin-left: auto; text-align: right; }
.ca-account-hero__pts { font-size: 24px; font-weight: 900; color: var(--ca-ink); }
.ca-account-hero__ptslabel { font-size: 12px; opacity: .5; }
.ca-account-badges-count { font-size: 13px; font-weight: 600; opacity: .4; margin-left: 8px; }
.ca-account-saves-intro { font-size: 14px; opacity: .6; margin-bottom: 24px; }
.ca-sidebar-nav { display: flex; flex-direction: column; gap: 6px; }
.ca-account-danger-text { font-size: 14px; opacity: .7; margin-bottom: 16px; }
.ca-account-del-field { max-width: 320px; }
.ca-account-del-actions { display: flex; gap: 12px; }
.ca-saves-empty { font-size: 14px; opacity: .5; text-align: center; padding: 32px 0; }
.ca-save-card__img-fallback {
  width: 100%; height: 100%; background: rgba(108,64,39,.1);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}

/* ─── Dark mode: inner hero ───────────────────────────────────────────── */








/* ─── Dark mode: account tabs nav ────────────────────────────────────── */


/* ─── Dark mode: sidebar card text ────────────────────────────────────── */


html.ca-dark .ca-stat-row span   { color: rgba(240,237,231,.55); }
html.ca-dark .ca-stat-row strong { color: #f0ede7; }

/* ─── Dark mode: account section titles & labels ──────────────────────── */
html.ca-dark .ca-account-section__title  { color: #f0ede7; }
html.ca-dark .ca-toggle-title            { color: #f0ede7; }
html.ca-dark .ca-toggle-desc             { color: rgba(240,237,231,.5); }
html.ca-dark .ca-info-label              { color: rgba(240,237,231,.45); }
html.ca-dark .ca-info-value              { color: #f0ede7; }
html.ca-dark .ca-auth-field label        { color: #f0ede7; }
html.ca-dark .ca-auth-field label small  { color: rgba(240,237,231,.4); }
html.ca-dark .ca-auth-footer-link        { color: rgba(240,237,231,.5); }
html.ca-dark .ca-auth-footer-link a,
html.ca-dark .ca-auth-label-link         { color: var(--ca-yellow, #f8a91f); }

/* ─── Dark mode: badge cards ──────────────────────────────────────────── */
html.ca-dark .ca-badge-card__label { color: #f0ede7; }
html.ca-dark .ca-badge-card__desc  { color: rgba(240,237,231,.4); }

/* ─── Dark mode: activity rows ────────────────────────────────────────── */
html.ca-dark .ca-activity-row__text { color: rgba(240,237,231,.7); }
html.ca-dark .ca-activity-row__date { color: rgba(240,237,231,.25); }

/* ─── Dark mode: form inputs in account pages ─────────────────────────── */
html.ca-dark .ca-auth-field input,
html.ca-dark .ca-auth-field textarea {
  color: #f0ede7;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}

html.ca-dark .ca-auth-field input::placeholder,
html.ca-dark .ca-auth-field textarea::placeholder {
  color: rgba(240,237,231,.25);
}

/* ─── Dark mode: save card text ───────────────────────────────────────── */
html.ca-dark .ca-save-card__meta  { color: rgba(240,237,231,.3); }
html.ca-dark .ca-save-card__title { color: #f0ede7; }

/* ─── Dark mode: auth aside benefits text ─────────────────────────────── */
html.ca-dark .ca-auth-aside__title  { color: #f0ede7; }
html.ca-dark .ca-auth-benefits strong { color: #f0ede7; }
html.ca-dark .ca-auth-benefits p    { color: rgba(240,237,231,.5); }

/* ─── Dark mode: header reader pill ──────────────────────────────────── */
html.ca-dark .ca-reader-name-label { color: #f0ede7; }

/* ─── Dark mode: account section danger ──────────────────────────────── */
html.ca-dark .ca-account-section--danger {
  border-color: rgba(220,38,38,.25);
}

html.ca-dark .ca-account-section__title--danger { color: #f87171; }
html.ca-dark .ca-account-section--danger p      { color: rgba(240,237,231,.6); }

/* ─── Casting description expand/collapse ─────────────────────────────── */
.ca-casting-desc {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ca-ink-2);
  line-height: 1.45;
}

.ca-casting-desc__full { display: none; }

.ca-casting-desc__toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ca-brown, var(--ca-brown));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ca-casting-desc__toggle:hover { color: var(--ca-accent, var(--ca-accent)); }

html.ca-dark .ca-casting-desc        { color: rgba(240,237,231,.45); }
html.ca-dark .ca-casting-desc__toggle { color: var(--ca-yellow, #f8a91f); }

/* ─── sprint33.css ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 33 — UX/UI Bug Fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. CARDS: eliminar bordes no deseados ───────────────────────────────── */
/* Las tarjetas usan sombra como elevación — sin borde en light mode */
/* ── Eliminar todos los contornos visibles en cards ── */
.ca-post-card,
.comet-card {
  border: none;
  box-shadow: 0 2px 16px rgba(var(--_brown-rgb),.08), 0 1px 4px rgba(var(--_brown-rgb),.04);
}

/* margin:2px en style.css crea una "separación" que parece borde — anular */
.ca-post-card .comet-card__inner,
.comet-card__inner {
  border: none;
  margin: 0;
  background: transparent;   /* background on __body only */
}

/* Sin borde alrededor del área de imagen */
.ca-post-card__img {
  border: none;
  border-radius: 0;
}

/* Sin separador en el footer del card */
.ca-post-card__footer {
  border-top: none;
  padding-top: 10px;
}

.ca-post-card:hover,
.comet-card:hover {
  box-shadow: 0 8px 32px rgba(108,64,39,.14), 0 2px 8px rgba(var(--_brown-rgb),.08);
}

/* Excepción: footer categories card (tiene fondo oscuro + borde sutil correcto) */
.ca-post-card__body {
  background: var(--ca-surface);
}

/* Dark mode: fondo correcto, borde sutil */
html.ca-dark .ca-post-card,
html.ca-dark .comet-card {
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
html.ca-dark .ca-post-card .comet-card__inner,
html.ca-dark .comet-card__inner {
  background: transparent;
  border: none;
}
html.ca-dark .ca-post-card__body {
  background: var(--ca-surface);  /* #231410 */
}
html.ca-dark .ca-post-card {
  border: none;
  border-radius: 16px;
}
html.ca-dark .ca-post-card:hover .comet-card__inner {
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}

/* ─── 2. NEXT DRAWER: fix botón de cierre que queda visible ──────────────── */
/* El close button está ahora DENTRO de .ca-next-drawer (no fuera como antes).
   Se posiciona absolute relativo al drawer, no flota sobre la página. */

.ca-next-drawer {
  position: relative !important;
}

.ca-next-drawer__close {
  position: absolute !important;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(var(--_white-rgb),.10);
  border: 1px solid rgba(var(--_white-rgb),.15);
  border-radius: 50%;
  color: rgba(var(--_white-rgb),.75);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
  pointer-events: auto;
  z-index: 2 !important;
}
.ca-next-drawer__close:hover {
  background: rgba(var(--_white-rgb),.18);
  color: #fff;
}

/* Espacio en el inner para no solapar con el botón */
.ca-next-drawer__inner {
  padding-right: 56px;
}

/* ─── 3. DARK MODE: fondos blancos que no cambian ────────────────────────── */

/* Todos los background: var(--ca-surface) / #fff en app.css */
html.ca-dark .ca-feature-card,
html.ca-dark .ca-hero-card,
html.ca-dark .ca-hub-card,
html.ca-dark .ca-info-card,
html.ca-dark .ca-static-card,
html.ca-dark .ca-contact-card,
html.ca-dark .ca-cast-card,
html.ca-dark .ca-about-block,
html.ca-dark .ca-resources-card,
html.ca-dark .ca-nl-inline,
html.ca-dark .ca-newsletter-section,
html.ca-dark .ca-about-section,
html.ca-dark .ca-contact-section,
html.ca-dark .ca-series-card,
html.ca-dark .ca-casting-card {
  background: var(--ca-surface);
  color: var(--ca-ink);
  border-color: var(--ca-border);
}

/* Inputs y textareas con fondo blanco */
html.ca-dark input[type="text"],
html.ca-dark input[type="email"],
html.ca-dark input[type="password"],
html.ca-dark input[type="search"],
html.ca-dark input[type="url"],
html.ca-dark input[type="tel"],
html.ca-dark input[type="number"],
html.ca-dark textarea,
html.ca-dark select {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--ca-ink);
}
html.ca-dark input::placeholder,
html.ca-dark textarea::placeholder {
  color: rgba(240,220,200,.30);
}

/* Selectores legacy del tema base */
html.ca-dark .widget__body,
html.ca-dark .sidebar__widget,
html.ca-dark .tp-postbox,
html.ca-dark .postbox__wrapper,
html.ca-dark .blog__wrapper,
html.ca-dark .ca-search-result {
  background: var(--ca-surface);
  color: var(--ca-ink);
}

/* Cualquier fondo explícito blanco */
html.ca-dark [style*="background:#fff"],
html.ca-dark [style*="background: #fff"],
html.ca-dark [style*="background:white"],
html.ca-dark [style*="background: white"],
html.ca-dark [style*="background-color:#fff"],
html.ca-dark [style*="background-color: white"] {
  background: var(--ca-surface);
}

/* Cualquier color texto negro hardcoded */
html.ca-dark [style*="color:#000"],
html.ca-dark [style*="color: #000"],
html.ca-dark [style*="color:#111"],
html.ca-dark [style*="color: #111"],
html.ca-dark [style*="color:#1a0f09"],
html.ca-dark [style*="color:black"] {
  color: var(--ca-ink);
}

/* Comment notices en dark mode */
html.ca-dark .ca-comments__notice--ok {
  background: rgba(22,163,74,.15);
  color: #86efac;
  border-color: rgba(22,163,74,.25);
}
html.ca-dark .ca-comments__notice--pending {
  background: rgba(248,169,31,.12);
  color: #fbbf24;
  border-color: rgba(248,169,31,.25);
}
html.ca-dark .ca-comments__notice--err {
  background: rgba(239,68,68,.12);
  color: #fca5a5;
  border-color: rgba(239,68,68,.25);
}

/* Hub category page cards */
html.ca-dark .ca-hub-intro-card,
html.ca-dark .ca-hub-bullets-card {
  background: var(--ca-surface);
  border-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-hub-intro-card p,
html.ca-dark .ca-hub-bullets-card li {
  color: var(--ca-ink-2);
}

/* Featured card on category hub */
html.ca-dark .ca-hub-featured-card {
  background: var(--ca-surface);
}
html.ca-dark .ca-hub-featured-card h2,
html.ca-dark .ca-hub-featured-card .ca-featured-title {
  color: var(--ca-ink);
}

/* ─── 4. TOC SIDEBAR: diseño completo ────────────────────────────────────── */
.toc-sidebar {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.toc-sidebar__title {
  font-family: var(--ca-font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ca-ink-3);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ca-border);
}

.toc-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-sidebar li a,
.toc-sidebar a {
  display: block;
  font-family: var(--ca-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ca-ink-2);
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.4;
  transition: color 150ms ease, background 150ms ease;
  border-left: 2px solid transparent;
}
.toc-sidebar li a:hover,
.toc-sidebar a:hover {
  color: var(--ca-ink);
  background: var(--ca-accent-subtle);
}
.toc-sidebar .toc-sidebar__link.is-active,
.toc-sidebar a.is-active {
  color: var(--ca-accent);
  border-left-color: var(--ca-accent);
  background: var(--ca-accent-subtle);
  font-weight: 600;
}

/* Indentado para h3/h4 */
.toc-sidebar li.toc-h3 a { padding-left: 20px; font-size: 12px; opacity: .85; }
.toc-sidebar li.toc-h4 a { padding-left: 30px; font-size: 11.5px; opacity: .70; }

/* Dark mode TOC */
html.ca-dark .toc-sidebar {
  background: var(--ca-surface);
  border-color: var(--ca-border);
}
html.ca-dark .toc-sidebar__title {
  color: var(--ca-ink-3);
  border-bottom-color: var(--ca-border);
}
html.ca-dark .toc-sidebar li a,
html.ca-dark .toc-sidebar a {
  color: var(--ca-ink-2);
}
html.ca-dark .toc-sidebar li a:hover,
html.ca-dark .toc-sidebar a:hover {
  color: var(--ca-ink);
  background: rgba(255,255,255,.05);
}
html.ca-dark .toc-sidebar a.is-active,
html.ca-dark .toc-sidebar .toc-sidebar__link.is-active {
  color: var(--ca-accent-2);
  border-left-color: var(--ca-accent-2);
  background: rgba(248,169,31,.10);
}

/* ─── 5. SIDEBAR: más espacio entre widgets ──────────────────────────────── */
.ca-post-sidebar {
  display: flex !important;
  flex-direction: column;
  gap: 24px;
}
.ca-post-sidebar > * {
  margin-bottom: 0;  /* usar gap, no margin */
}

/* XP widget */
.ca-xp-widget {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 16px;
}
html.ca-dark .ca-xp-widget {
  background: var(--ca-surface);
  border-color: var(--ca-border);
}

/* ─── 6. COMMENT NOTICES: diseño visible ──────────────────────────────────── */
.ca-comments__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--ca-radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.ca-comments__notice i {
  flex-shrink: 0;
  margin-top: 2px;
}
.ca-comments__notice--ok {
  background: var(--ca-success-bg);
  color: var(--_green-dark,#166534);
  border-color: var(--ca-success-bg);
}
.ca-comments__notice--pending {
  background: var(--ca-warning-bg);
  color: var(--_amber-dark,#92400e);
  border-color: var(--ca-warning-bg);
}
.ca-comments__notice--err {
  background: var(--ca-error-bg);
  color: var(--_red-dark,#991b1b);
  border-color: var(--ca-error-bg);
}

/* ─── 7. CASTING ALERT WIDGET: feedback inline ───────────────────────────── */
.ca-casting-alerts__success {
  padding: 12px 16px;
  background: var(--ca-success-bg);
  color: var(--_green-dark,#166534);
  border: 1px solid var(--ca-success-bg);
  border-radius: var(--ca-radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 12px;
  text-align: center;
}
.ca-casting-alerts__error {
  padding: 12px 16px;
  background: var(--ca-error-bg);
  color: var(--_red-dark,#991b1b);
  border: 1px solid var(--ca-error-bg);
  border-radius: var(--ca-radius-md);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  text-align: center;
}

html.ca-dark .ca-casting-alerts__success {
  background: rgba(22,163,74,.15);
  color: #86efac;
  border-color: rgba(22,163,74,.25);
}
html.ca-dark .ca-casting-alerts__error {
  background: rgba(239,68,68,.12);
  color: #fca5a5;
  border-color: rgba(239,68,68,.25);
}

/* ─── 8. COMMENT NOTICE: dismiss button ──────────────────────────────────── */
.ca-comments__notice {
  position: relative;
}
.ca-notice-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  opacity: .5;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 150ms ease;
  line-height: 1;
  color: inherit;
}
.ca-notice-dismiss:hover { opacity: 1; }

/* Animation: fade-in on load */
#ca-comment-notice {
  animation: noticeIn .35s ease forwards;
}
@keyframes noticeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW FIX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Body: nunca desbordar en X ──────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ─── 2. Post content: todos los elementos anchos se adaptan ─────────────── */
.ca-post-content,
.ca-post-body,
.text-wrapper {
  max-width: 100%;
  overflow-x: hidden; /* por si el contenido del editor tiene algo muy ancho */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Imágenes dentro del contenido */
.ca-post-content img,
.ca-post-body img,
.text-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tablas: scroll horizontal propio para no romper el layout */
.ca-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
}

/* Bloques de código */
.ca-post-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* iframes embebidos (YouTube, etc.) — responsive wrapper */
.ca-post-content iframe,
.ca-post-content embed,
.ca-post-content video,
.ca-post-content object {
  max-width: 100%;
}

/* YouTube / embeds: preservar aspect-ratio */
.ca-post-content .wp-block-embed,
.ca-post-content .embed-responsive,
.ca-post-content figure.wp-block-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.ca-post-content .embed-responsive iframe,
.ca-post-content figure.wp-block-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* ─── 3. Contenedores globales ────────────────────────────────────────────── */
.container,
.container-fluid,
.ca-post-layout,
.ca-post-body > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── 4. Mobile específico (<480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* Cualquier elemento con width fija mayor al viewport */
  .ca-post-content * {
    max-width: 100%;
  }
  /* Excepción: elementos que deben scroll propio */
  .ca-post-content pre,
  .ca-post-content table {
    max-width: 100%;
    overflow-x: auto;
  }
  /* Breadcrumb: cortar texto largo */
  .ca-breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR v2 — Sprint 33
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base widget shell ────────────────────────────────────────────────────── */
.ca-sidebar-widget {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 20px;
}

.ca-sidebar-widget__label {
  font-family: var(--ca-font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ca-ink-3);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ca-border);
}

.ca-sidebar-widget__link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ca-accent);
  text-decoration: none;
  transition: opacity .15s;
}
.ca-sidebar-widget__link:hover { opacity: .7; }

/* ── YouTube + Newsletter widget ──────────────────────────────────────────── */
.ca-sidebar-yt {
  padding: 20px;
}

.ca-sidebar-yt__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ca-sidebar-yt__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ca-sidebar-yt__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ca-brown2) 0%, var(--ca-accent) 100%);
  font-family: var(--ca-font-display);
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.ca-sidebar-yt__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ca-ink);
  line-height: 1.3;
}

.ca-sidebar-yt__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ff0000;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, transform .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ca-sidebar-yt__btn:hover { background: #cc0000; transform: translateY(-1px); }
.ca-sidebar-yt__btn svg { flex-shrink: 0; }

.ca-sidebar-yt__count {
  background: rgba(var(--_white-rgb),.25);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Layout más prolijo: nombre + suscriptores apilados, pitch y botón full-width */
.ca-sidebar-yt__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ca-sidebar-yt__sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ca-ink-3);
}
.ca-sidebar-yt__pitch {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(var(--_ink-rgb),.7);
  margin: 14px 0 16px;
}
.ca-sidebar-yt__btn--block {
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
  font-size: 13px;
  border-radius: 10px;
}

.ca-sidebar-yt__divider {
  height: 1px;
  background: var(--ca-border);
  margin: 16px 0;
}

/* Newsletter form inside YT widget */
.ca-sidebar-nl__head { margin-bottom: 14px; }

.ca-sidebar-nl__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ca-ink);
  line-height: 1.3;
  margin-bottom: 4px;
}

.ca-sidebar-nl__sub {
  font-size: 12.5px;
  color: var(--ca-ink-2);
  line-height: 1.45;
}

.ca-sidebar-nl__input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  font-size: 13px;
  font-family: var(--ca-font-body);
  color: var(--ca-ink);
  background: var(--ca-bg);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.ca-sidebar-nl__input:focus { border-color: var(--ca-accent); }
.ca-sidebar-nl__input::placeholder { color: var(--ca-ink-3); }

.ca-sidebar-nl__cats-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ca-ink-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.ca-sidebar-nl__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}

.ca-sidebar-nl__cat {
  padding: 3px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--ca-accent);
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ca-accent);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--ca-font-body);
  line-height: 1.5;
}
.ca-sidebar-nl__cat.is-selected {
  background: var(--ca-accent);
  border-color: var(--ca-accent);
  color: #fff;
}
.ca-sidebar-nl__cat:not(.is-selected):hover {
  background: rgba(var(--_accent-rgb),.08);
}

.ca-sidebar-nl__btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--ca-accent);
  color: #fff;
  border: none;
  border-radius: var(--ca-radius-md);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--ca-font-body);
  cursor: pointer;
  transition: background .15s, transform .1s;
  text-align: center;
}
.ca-sidebar-nl__btn:hover { background: var(--ca-brown); transform: translateY(-1px); }
.ca-sidebar-nl__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ca-sidebar-nl__msg {
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 500;
}
.ca-sidebar-nl__msg.is-ok  { background: rgba(var(--_green-rgb,22,163,74),.1);  color: var(--_green-dark,#166534); }
.ca-sidebar-nl__msg.is-err { background: rgba(var(--_red-rgb,239,68,68),.1);  color: var(--_red-dark,#991b1b); }

.ca-sidebar-nl__success {
  text-align: center;
  padding: 8px 0;
}
.ca-sidebar-nl__success-icon  { font-size: 32px; margin-bottom: 8px; }
.ca-sidebar-nl__success-title { font-size: 16px; font-weight: 800; color: var(--ca-ink); margin-bottom: 4px; }
.ca-sidebar-nl__success-sub   { font-size: 13px; color: var(--ca-ink-2); line-height: 1.4; }

/* ── Leaderboard widget ──────────────────────────────────────────────────── */
.ca-leaderboard-widget__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca-leaderboard-widget__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .15s;
}
.ca-leaderboard-widget__row:hover { background: rgba(var(--_brown-rgb),.05); }
.ca-leaderboard-widget__row.is-me {
  background: var(--ca-accent-subtle);
  border: 1.5px solid rgba(var(--_accent-rgb),.2);
  border-radius: 10px;
}

.ca-leaderboard-widget__pos {
  width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ca-ink-2);
  flex-shrink: 0;
}
.ca-leaderboard-widget__icon { font-size: 15px; flex-shrink: 0; }
.ca-leaderboard-widget__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ca-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-leaderboard-widget__pts {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ca-ink-2);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.ca-leaderboard-widget__you {
  background: var(--ca-accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ca-leaderboard-widget__gap {
  text-align: center;
  color: var(--ca-ink-3);
  font-size: 14px;
  padding: 2px 0;
  letter-spacing: .1em;
}

/* ── TOC Inline (inside content, before first H2) ─────────────────────────── */
.ca-toc-inline {
  background: var(--ca-surface);
  border: 1.5px solid var(--ca-border);
  border-left: 3px solid var(--ca-accent);
  border-radius: var(--ca-radius-lg);
  padding: 0 16px;
  margin-bottom: 22px;
  margin-top: 8px;
}

.ca-toc-inline__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ca-ink-3);
  padding: 12px 0;
  cursor: pointer;
  list-style: none;            /* oculta el marcador nativo (Firefox) */
  user-select: none;
}
.ca-toc-inline__title::-webkit-details-marker { display: none; } /* Safari/Chrome */
.ca-toc-inline__icon { color: var(--ca-accent); flex-shrink: 0; width: 12px; height: 12px; }
.ca-toc-inline__chevron {
  margin-left: auto;
  color: var(--ca-ink-3);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.ca-toc-inline[open] .ca-toc-inline__chevron { transform: rotate(180deg); }

.ca-toc-inline__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  /* Vertical: una sola columna */
  columns: 1;
}

.ca-toc-inline__item {
  break-inside: avoid;
}

.ca-toc-inline__item a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ca-ink-2);
  text-decoration: none;
  padding: 1px 0;
  line-height: 1.25;
  transition: color .15s;
}
.ca-toc-inline__item a:hover { color: var(--ca-accent); }

.ca-toc-inline__item--sub a {
  padding-left: 11px;
  font-size: 11.5px;
  opacity: .8;
}

.ca-toc-inline__bullet {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ca-accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.ca-toc-inline__sub-bullet {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ca-border);
  flex-shrink: 0;
  margin-top: 5px;
  margin-left: 3px;
}

/* ── Dark mode overrides for new sidebar ──────────────────────────────────── */
html.ca-dark .ca-sidebar-nl__input {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--ca-ink);
}
html.ca-dark .ca-sidebar-nl__cat:not(.is-selected) {
  border-color: rgba(255,255,255,.15);
  color: var(--ca-ink-2);
}
html.ca-dark .ca-leaderboard-widget__row.is-me {
  background: rgba(248,169,31,.12);
  border-color: rgba(248,169,31,.25);
}
html.ca-dark .ca-leaderboard-widget__row:hover { background: rgba(255,255,255,.05); }
html.ca-dark .ca-toc-inline {
  background: var(--ca-surface);
  border-color: var(--ca-border);
  border-left-color: var(--ca-accent);
}
html.ca-dark .ca-toc-inline__item a { color: var(--ca-ink-2); }
html.ca-dark .ca-toc-inline__item a:hover { color: var(--ca-accent-2); }
html.ca-dark .ca-sidebar-nl__msg.is-ok  { background: rgba(22,163,74,.15);  color: #86efac; }
html.ca-dark .ca-sidebar-nl__msg.is-err { background: rgba(239,68,68,.12);  color: #fca5a5; }


/* TOC mobile toggle: ocultar — reemplazado por ca-toc-inline en el contenido */
.ca-toc-mobile { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   SPRINT 33 — Consistent page layout spacing
   Problema: páginas interiores (mi-progreso, guardados, login, registro, etc.)
   usaban .container sin max-width, generando contenido pegado a los bordes.
   Fix: definir max-width y padding horizontal uniforme para todos los contextos.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Padding horizontal base ── */
.container {
  padding-left:  clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

/* Max-width uniforme para contenido interior (section, div hero, etc.)
   Aplica a .container sin modificador — no pisa .container.large (1650px) */
.ca-section > .container,
.ca-inner-hero > .container,
section > .container,
main > div > .container,
div > .container:not(.large):not(.container-fluid) {
  max-width: 1280px;
  margin-left:  auto;
  margin-right: auto;
}

/* Excepción: .container.large conserva su max-width propio */
.container.large {
  max-width: 1650px;
}

/* Mobile */
@media (max-width: 600px) {
  .container {
    padding-left:  16px;
    padding-right: 16px;
  }
}

/* ─── design-fixes.css ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN FIXES — Correcciones de inconsistencias sobre el CSS existente
   Sprint 32 — Se carga DESPUÉS de app.css para normalizar
   ═══════════════════════════════════════════════════════════════════════════
   
   Este archivo NO reescribe el CSS existente — parchea las inconsistencias
   más graves con selectores de mayor especificidad o uso de
   donde el código legacy lo requiere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TIPOGRAFÍA GLOBAL: eliminar fuentes huérfanas ─────────────────────── */

/* Eliminar Sequel Sans y Tartuffo de cualquier selector que los use,
   reemplazar por el stack del design system */
[class*="sequel"],
[class*="tartuffo"],
.font-heading-instrumentsans-medium h1,
.font-heading-instrumentsans-medium h2,
.font-heading-instrumentsans-medium h3,
.font-heading-instrumentsans-medium h4,
.font-heading-instrumentsans-medium h5,
.font-heading-instrumentsans-medium h6 {
  font-family: var(--ca-font-body);
}

/* Cualquier uso explícito de las fuentes eliminadas */
[style*="Sequel Sans"],
[style*="Tartuffo"],
[style*="DM Sans"],
[style*="Instrument Sans"] {
  font-family: var(--ca-font-body);
}

/* Admin: Inter → BDOGrotesk (mismo family stack del design system) */
.admin-body,
.admin-body * {
  font-family: var(--ca-font-body);
}
.admin-body code,
.admin-body pre,
.admin-body kbd {
  font-family: var(--ca-font-mono);
}
.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4,
.admin-body h5,
.admin-body h6,
.admin-body .admin-kpi__value,
.admin-body .ca-stat-value {
  font-family: var(--ca-font-display);
}

/* ─── BORDER RADIUS: normalizar a escala ─────────────────────────────────── */

/* Botones → radius-md */
button,
.btn,
[class*="ca-btn"],
[class*="ca-cta"],
.ca-header__cta,
.ca-header__ghost,
.wp-block-button__link,
.admin-btn,
[class*="admin-btn"] {
  border-radius: var(--ca-radius-md);
}

/* Pills / tags → radius-full */
[class*="ca-tag"],
[class*="ca-badge"],
[class*="ca-chip"],
[class*="ca-label"],
.ca-nav-badge,
[class*="ca-pill"] {
  border-radius: var(--ca-radius-full);
}

/* Cards → radius-lg */
[class*="ca-card"]:not([class*="__"]),
[class*="admin-card"]:not([class*="__"]),
.ca-post-card,
.ca-auth-card,
.admin-stat,
.admin-kpi {
  border-radius: var(--ca-radius-lg);
}

/* Inputs → radius-md */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.ca-input,
.ca-textarea,
.admin-input,
.admin-select {
  border-radius: var(--ca-radius-md);
}

/* Modal / Sheet → radius-xl */
[class*="ca-modal"],
[class*="ca-sheet"],
[class*="ca-drawer"],
.ca-cookie-banner,
[class*="ca-lightbox"] {
  border-radius: var(--ca-radius-xl);
}

/* ─── Z-INDEX: reemplazar valores absolutos por tokens ───────────────────── */

/* Header */
.ca-header                 { z-index: var(--ca-z-sticky) !important; }
.ca-header__nav-dropdown   { z-index: var(--ca-z-dropdown) !important; }
#ca-search-results         { z-index: var(--ca-z-dropdown) !important; }
.ca-search-wrap            { z-index: var(--ca-z-dropdown) !important; }

/* Overlays / modals */
.ca-overlay,
#ca-mobile-overlay,
[class*="ca-modal-overlay"] { z-index: var(--ca-z-overlay) !important; }

[class*="ca-modal"],
[class*="ca-lightbox"],
[class*="ca-drawer"]        { z-index: var(--ca-z-modal) !important; }

/* Toasts / notificaciones */
[class*="ca-toast"],
[class*="ca-notification"],
#ca-toast-container         { z-index: var(--ca-z-toast) !important; }

/* Tooltips */
[class*="ca-tooltip"]       { z-index: var(--ca-z-tooltip) !important; }

/* Sticky elements */
[class*="ca-sticky"],
.ca-editor-topbar,
#preloader                  { z-index: var(--ca-z-sticky) !important; }

/* Dark toggle — encima del contenido, debajo de modals */
/* ca-dark-toggle z-index removed */

/* Cookie banner */
.ca-cookie-banner           { z-index: var(--ca-z-toast) !important; }

/* ─── COLORES: eliminar hardcodes, usar variables ────────────────────────── */

/* Accent: cualquier botón de acción principal */
.ca-header__cta,
.ca-btn--primary,
.ca-cta-btn,
[class*="ca-submit"],
.ca-newsletter__btn,
.admin-btn--primary {
  background: var(--ca-accent);
  color: var(--_white);
  border-color: var(--ca-accent);
}
.ca-header__cta:hover,
.ca-btn--primary:hover,
.ca-cta-btn:hover,
.admin-btn--primary:hover {
  background: var(--ca-accent-hover);
  border-color: var(--ca-accent-hover);
}

/* Links accent */
.ca-post-content a,
.ca-article-body a {
  color: var(--ca-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ca-post-content a:hover,
.ca-article-body a:hover {
  color: var(--ca-accent-hover);
}

/* Acento en elementos de navegación activos */
.ca-header__link.is-active,
.admin-nav__link.is-active {
  color: var(--ca-accent);
}
.ca-header__link.is-active::after {
  background: var(--ca-accent);
}

/* Tags / categorías → accent-2 (amarillo) */
[class*="ca-tag"],
[class*="ca-category-label"] {
  background: var(--ca-accent-2-subtle);
  color: var(--ca-accent-2);
  border-color: rgba(var(--_yellow-rgb),.25);
}
html.ca-dark [class*="ca-tag"],
html.ca-dark [class*="ca-category-label"],
.admin-body [class*="ca-tag"],
.admin-body [class*="ca-category-label"] {
  background: rgba(248,169,31,.15);
  color: var(--ca-accent-2);
}

/* Muted text unificado */
.ca-muted,
[class*="__muted"],
[class*="__subtitle"],
[class*="__meta"],
[class*="__date"],
.admin-soft,
.admin-table__muted,
.admin-page-subtitle {
  color: var(--ca-ink-2);
}

/* ─── FORMS: unified input style ─────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-base);
  color: var(--ca-ink);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-2);
  transition: border-color var(--ca-transition-base), box-shadow var(--ca-transition-base);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ca-accent);
  box-shadow: var(--ca-focus-ring);
  outline: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--ca-ink-3);
}

/* ─── SCROLLBAR: unificada ───────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ca-border-strong) transparent;
}
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ca-border-strong); border-radius: var(--ca-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ca-ink-3); }

/* ─── SELECTION ──────────────────────────────────────────────────────────── */
::selection {
  background: rgba(var(--_accent-rgb),.20);
  color: var(--ca-ink);
}

/* ─── HEADER FIXES ───────────────────────────────────────────────────────── */
.ca-header {
  font-family: var(--ca-font-body);
  height: var(--ca-header-h);
}
/* Header is always dark — no light/dark mode variation needed */

/* ─── CARDS: unified elevation ───────────────────────────────────────────── */
[class*="ca-card"]:not([class*="__"]),
.ca-post-card {
  background: var(--ca-surface);
  border: none;
  box-shadow: var(--ca-shadow-sm);
  transition: box-shadow var(--ca-transition-base), transform var(--ca-transition-base);
}
[class*="ca-card"]:not([class*="__"]):hover,
.ca-post-card:hover {
  box-shadow: var(--ca-shadow-md);
  transform: translateY(-2px);
}

/* ─── ADMIN: OVERRIDE FIXES ──────────────────────────────────────────────── */

/* Admin nav activo — usar accent brand */
.admin-nav__link:hover,
.admin-nav__link.is-active {
  background: var(--ca-accent-subtle);
  border-color: rgba(var(--_accent-rgb),.28);
  color: var(--ca-ink);
}
.admin-nav__link.is-active {
  color: var(--ca-accent);
}
.admin-nav__link.is-active i {
  color: var(--ca-accent);
}

/* Admin brand mark — usar accent */
.admin-brand__mark {
  background: linear-gradient(135deg, var(--ca-accent), var(--ca-accent-hover));
  color: var(--_white);
}

/* Admin sidebar border */
.admin-sidebar {
  border-right-color: var(--ca-border);
}

/* Admin inputs */
.admin-body input[type="text"],
.admin-body input[type="email"],
.admin-body input[type="password"],
.admin-body input[type="search"],
.admin-body input[type="url"],
.admin-body textarea,
.admin-body select {
  background: var(--ca-surface-2);
  border-color: var(--ca-border-2);
  color: var(--ca-ink);
}
.admin-body input:focus,
.admin-body textarea:focus,
.admin-body select:focus {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 3px rgba(var(--_accent-rgb),.25);
}

/* Admin tables */
.admin-table th {
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-xs);
  font-weight: 700;
  letter-spacing: var(--ca-tracking-wider);
  text-transform: uppercase;
  color: var(--ca-ink-3);
}

/* Admin status badges: usar design system */
.ca-nav-badge {
  background: var(--ca-accent);
  color: var(--_white);
  border-radius: var(--ca-radius-full);
  font-size: var(--ca-text-xs);
  font-weight: 800;
}
.ca-nav-badge--green {
  background: var(--ca-success);
  color: var(--_white);
}
.ca-nav-badge--red {
  background: var(--ca-error);
  color: var(--_white);
}

/* Editor topbar */
.ca-editor-topbar {
  background: var(--ca-bg);
  border-bottom-color: var(--ca-border);
}
.ca-editor-topbar__title:focus {
  box-shadow: 0 0 0 2px var(--ca-accent-subtle);
}

/* ─── DARK MODE: fixes specifics ─────────────────────────────────────────── */
/* Dark mode header — warm dark, consistent with palette */
html.ca-dark .ca-header {
  background: rgba(22,11,6,.9);
  border-bottom-color: rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
html.ca-dark .ca-header.is-scrolled {
  background: rgba(20,10,5,.97);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.4);
}
html.ca-dark .ca-header__link { color: rgba(240,220,200,.55); }
html.ca-dark .ca-header__link:hover { color: rgba(240,220,200,.9); background: rgba(255,255,255,.07); }
html.ca-dark .ca-header__link.is-active { color: rgba(240,220,200,.9); background: rgba(255,255,255,.08); }
html.ca-dark .ca-header__dropdown-trigger { color: rgba(240,220,200,.55); }
html.ca-dark .ca-header__dropdown-trigger:hover { color: rgba(240,220,200,.9); background: rgba(255,255,255,.07); }
html.ca-dark .ca-header__dropdown-menu {
  background: rgba(22,11,6,.98);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
html.ca-dark .ca-header__dropdown-item:hover { background: rgba(255,255,255,.06); }
html.ca-dark .ca-header__dropdown-item strong { color: rgba(240,220,200,.85); }
html.ca-dark .ca-header__dropdown-item small { color: rgba(240,220,200,.35); }
html.ca-dark .ca-header__dropdown-icon { background: rgba(255,255,255,.07); }
html.ca-dark .ca-header__search-inline {
  background: rgba(255,255,255,.07);
  border: none;
}
html.ca-dark .ca-header__search-inline:focus-within { background: rgba(255,255,255,.1); }
html.ca-dark .ca-header__search-inline svg { color: rgba(240,220,200,.35); }
html.ca-dark .ca-header__search-inline input[type="search"] {
  color: rgba(240,220,200,.88);
  background: none !important; border: none !important;
}
html.ca-dark .ca-header__search-inline input::placeholder { color: rgba(240,220,200,.35); }
html.ca-dark .ca-header__search-results {
  background: rgba(22,11,6,.98);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
html.ca-dark .ca-header__search-results .ca-search-result__title { color: rgba(240,220,200,.85); }
html.ca-dark .ca-header__search-results .ca-search-result:hover { background: rgba(255,255,255,.06); }
html.ca-dark .ca-header__search-no-results { color: rgba(240,220,200,.4); }
/* merged into canonical dark mode block */
html.ca-dark .ca-header__toggle { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: rgba(240,220,200,.7); }
html.ca-dark .ca-header__reader { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
html.ca-dark .ca-reader-name-label { color: rgba(240,220,200,.75); }
html.ca-dark [class*="ca-card"]:not([class*="__"]),
html.ca-dark .ca-post-card {
  background: var(--ca-surface);
  border: none;
}
html.ca-dark [class*="ca-card"]:not([class*="__"]):hover,
html.ca-dark .ca-post-card:hover {
  background: var(--ca-surface-2);
}

/* ─── PRINT: reset visible ───────────────────────────────────────────────── */
@media print {
  .ca-header,
  .ca-footer,
  .ca-dark-toggle,
  .ca-cookie-banner,
  #preloader,
  [class*="ca-fab"],
  [class*="ca-pwa"] {
    display: none !important;
  }
  body {
    color: var(--ca-ink);
    background: var(--ca-surface);
    font-size: 12pt;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — Sprint 34
   Todos los estilos nuevos de las mejoras UX/UI
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header: Search panel expandible ──────────────────────────────────────── */
.ca-header__search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--ca-ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.ca-header__search-trigger:hover {
  background: rgba(0,0,0,.06);
}
.ca-header__search-panel { display: none !important; } /* replaced by inline search */
.ca-header__search-inner {
  width: 100%;
  max-width: 600px;
  padding: 0 24px;
}
.ca-header__search-inner .ca-search-input-wrap {
  height: 56px;
  border-radius: 16px;
  border: 2px solid rgba(var(--_brown-rgb),.18);
  background: rgba(255,255,255,.9);
  padding: 0 20px;
  box-shadow: 0 8px 40px rgba(var(--_brown-rgb),.12);
}
.ca-header__search-inner .ca-search-input-wrap:focus-within {
  border-color: var(--ca-accent);
  box-shadow: 0 8px 40px rgba(var(--_brown-rgb),.18), 0 0 0 3px rgba(236,100,38,.1);
}
.ca-header__search-inner #ca-search-input {
  font-size: 17px;
  background: transparent;
  color: var(--ca-ink);
}
.ca-header__search-inner #ca-search-input::placeholder {
  color: rgba(var(--_ink-rgb),.35);
}
.ca-header__search-inner .ca-search-icon {
  color: rgba(var(--_ink-rgb),.4);
  flex-shrink: 0;
}

/* ── Header: Live badge en Castings ───────────────────────────────────────── */
.ca-nav-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ca-accent);
  color: white;
  font-size: 10px;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  padding: 0 5px;
  margin-left: 5px;
  line-height: 1;
  vertical-align: middle;
}

/* ── Header: Link primario (Castings) ─────────────────────────────────────── */
.ca-header__link--primary {
  font-weight: 700;
  color: var(--ca-ink) !important;
}
.ca-header__link--primary:hover,
.ca-header__link--primary.is-active {
  color: var(--ca-accent) !important;
}

/* ── Header: Dropdown Contenido ───────────────────────────────────────────── */
.ca-header__dropdown {
  position: relative;
}
.ca-header__dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
}
.ca-header__dropdown-trigger svg {
  transition: transform .2s;
  flex-shrink: 0;
}
.ca-header__dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.ca-header__dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ca-bg, #fff);
  border: 1.5px solid var(--ca-border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  min-width: 260px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  transform: translateX(-50%) translateY(-8px);
  z-index: 300;
}
.ca-header__dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ca-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ca-ink);
  transition: background .14s;
}
.ca-header__dropdown-item:hover {
  background: rgba(0,0,0,.04);
}
.ca-header__dropdown-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}
.ca-header__dropdown-item small {
  display: block;
  font-size: 11.5px;
  color: rgba(26,15,9,.45);
  margin-top: 1px;
}
.ca-header__dropdown-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Header: XP Chip ──────────────────────────────────────────────────────── */
.ca-header__xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: rgba(248,169,31,.12);
  border: 1px solid rgba(248,169,31,.35);
  border-radius: 99px;
  text-decoration: none;
  color: var(--ca-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, transform .15s;
}
.ca-header__xp-chip:hover {
  background: rgba(248,169,31,.22);
}
.ca-header__xp-icon { font-size: 14px; }
.ca-xp-chip--bump {
  animation: ca-xp-bump .5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ca-xp-bump {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.18); }
  70%      { transform: scale(.95); }
}

/* ── Header: Mobile search ────────────────────────────────────────────────── */
.ca-header__mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0,0,0,.04);
  border-radius: 10px;
  margin-bottom: 16px;
}
.ca-header__mobile-search input {
  border: none; background: transparent; outline: none;
  font-size: 14px; font-family: inherit; width: 100%;
  color: var(--ca-ink);
}
html.ca-dark .ca-header__mobile-search input { color: rgba(240,220,200,.85); }
.ca-header__mobile-search input::placeholder { color: rgba(26,15,9,.35); }
html.ca-dark .ca-header__mobile-search input::placeholder { color: rgba(240,220,200,.3); }
.ca-header__mobile-search svg { color: rgba(26,15,9,.35); flex-shrink: 0; }
html.ca-dark .ca-header__mobile-search svg { color: rgba(240,220,200,.3); }
.ca-header__mobile-search svg {
  flex-shrink: 0;
  opacity: .5;
}
.ca-header__mobile-primary {
  font-weight: 800 !important;
  color: var(--ca-accent) !important;
}
.ca-header__mobile-divider {
  height: 1px;
  background: var(--ca-border);
  margin: 8px 0;
}

/* ── Castings: Filtros de país + tipo ─────────────────────────────────────── */
.ca-castings-filters {
  padding: 0;
}
.ca-castings-filters__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ca-border);
}
.ca-castings-filters__row:last-child {
  border-bottom: none;
}
.ca-castings-filters__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ca-ink-3, rgba(26,15,9,.4));
  white-space: nowrap;
  padding-top: 7px;
  min-width: 36px;
}
.ca-castings-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ca-filter-pill[type="button"] {
  cursor: pointer;
  border: 1.5px solid var(--ca-border, #e5e0d8);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
}

/* ── Gamificación: XP toast ───────────────────────────────────────────────── */
.ca-xp-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ca-ink, #1a0f09);
  color: white;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 13px;
  z-index: 9999;
  transform: translateY(16px);
  opacity: 0;
  transition: opacity .28s, transform .28s;
  pointer-events: none;
  max-width: 300px;
}
.ca-xp-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ca-xp-toast__pts {
  font-size: 15px;
  font-weight: 900;
  color: #f8a91f;
  white-space: nowrap;
}
.ca-xp-toast__label {
  flex: 1;
  font-weight: 600;
  opacity: .85;
}
.ca-xp-toast__link {
  color: #f8a91f;
  text-decoration: none;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
}
.ca-xp-toast__link:hover { text-decoration: underline; }

/* ── Newsletter: Suscripción unificada ────────────────────────────────────── */
.ca-nl-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ca-nl-tab {
  padding: 7px 14px;
  border: 1.5px solid rgba(254,242,216,.2);   /* footer always dark — cream border */
  border-radius: 99px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: rgba(254,242,216,.55);               /* cream text — footer always dark */
  transition: all .18s;
}
.ca-nl-tab.is-active {
  background: rgba(254,242,216,.12);
  border-color: rgba(254,242,216,.35);
  color: rgba(254,242,216,.95);
}
.ca-nl-tab:hover:not(.is-active) {
  border-color: rgba(254,242,216,.35);
  color: rgba(254,242,216,.85);
}
.ca-nl-tab-desc {
  font-size: 13px;
  color: rgba(254,242,216,.45);               /* cream — footer always dark */
  margin-bottom: 16px;
  min-height: 2.4em;
  transition: opacity .2s;
}
.ca-nl-privacy {
  font-size: 11.5px;
  color: rgba(254,242,216,.3);    /* footer always dark */
  margin-top: 10px;
}
.ca-nl-privacy a {
  color: rgba(254,242,216,.45);
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE — Revisión completa Sprint 34
   Todos los fixes y componentes faltantes en un solo bloque autoritativo.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens extra para dark mode ─────────────────────────────────────── */
html.ca-dark {
  --ca-footer-bg:     #0d0906;   /* footer siempre oscuro, más profundo que el body */
  --ca-footer-border: rgba(255,255,255,.06);
  --ca-filter-bar-bg: #160d08;   /* barra de filtros */
}

/* ── 2. Footer — fix raíz + todos los hijos ────────────────────────────── */
html.ca-dark .ca-footer {
  background: var(--ca-footer-bg);
  color: rgba(240,237,231,.65);
  border-color: rgba(255,255,255,.06);
}
html.ca-dark .ca-footer__top {
  background: #110a06;
  border-bottom-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-footer__nl-title     { color: #f0ede7; }
html.ca-dark .ca-footer__nl-sub       { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__nl-eyebrow   { color: #f8a91f; }
html.ca-dark .ca-footer__nl-input {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f0ede7 !important;
}
html.ca-dark .ca-footer__nl-input::placeholder { color: rgba(240,237,231,.3); }
html.ca-dark .ca-footer__nl-input:-webkit-autofill,
html.ca-dark .ca-footer__nl-input:-webkit-autofill:hover,
html.ca-dark .ca-footer__nl-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a0f09 inset !important;
  -webkit-text-fill-color: #f0ede7 !important;
  caret-color: #f0ede7;
}
html.ca-dark .ca-footer__nl-btn {
  background: var(--ca-accent);
  color: white;
}
html.ca-dark .ca-footer__nl-unified { color: #f0ede7; }
html.ca-dark .ca-nl-tab {
  border-color: rgba(255,255,255,.14);
  color: rgba(240,237,231,.55);
}
html.ca-dark .ca-nl-tab.is-active {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #f0ede7;
}
html.ca-dark .ca-nl-tab:hover:not(.is-active) {
  border-color: rgba(255,255,255,.22);
  color: #f0ede7;
}
html.ca-dark .ca-nl-tab-desc      { color: rgba(240,237,231,.45); }
html.ca-dark .ca-nl-privacy       { color: rgba(240,237,231,.3); }
html.ca-dark .ca-nl-privacy a     { color: rgba(240,237,231,.4); }
html.ca-dark .ca-footer__grid     { background: transparent; }
html.ca-dark .ca-footer__brand-desc{ color: rgba(240,237,231,.4); }
html.ca-dark .ca-footer__castina-text { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__col-title { color: #f0ede7; }
html.ca-dark .ca-footer__col a    { color: rgba(240,237,231,.45); }
html.ca-dark .ca-footer__col a:hover { color: #f8a91f; }
html.ca-dark .ca-footer__social {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(240,237,231,.55);
}
html.ca-dark .ca-footer__social:hover { background: rgba(255,255,255,.1); color: #f0ede7; }
html.ca-dark .ca-footer__bottom       { border-top-color: rgba(255,255,255,.07); background: transparent; }
html.ca-dark .ca-footer__bottom span,
html.ca-dark .ca-footer__bottom a     { color: rgba(240,237,231,.3); }
html.ca-dark .ca-footer__copyright    { color: rgba(240,237,231,.25); }
html.ca-dark .ca-footer__legal a      { color: rgba(240,237,231,.28); }
html.ca-dark .ca-footer__legal a:hover{ color: rgba(240,237,231,.6); }
html.ca-dark .ca-footer p             { color: rgba(240,237,231,.5); }

/* ── 3. Casting items — tarjetas con fondo y texto ─────────────────────── */
html.ca-dark .ca-casting-item {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-casting-item:hover {
  border-color: rgba(236,100,38,.4);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
html.ca-dark .ca-casting-item__logo {
  background: rgba(255,255,255,.05);
}
html.ca-dark .ca-casting-item__logo span {
  color: #f8a91f;   /* iniciales empresa — visible sobre fondo oscuro */
}
html.ca-dark .ca-casting-item__title {
  color: #f0ede7;
}
html.ca-dark .ca-casting-item__meta {
  color: rgba(240,237,231,.4);
}
/* company name en la meta — era var(--ca-brown) = marrón sobre marrón */
html.ca-dark .ca-casting-item__meta > span:first-child,
html.ca-dark .ca-casting-item__meta [style*="ca-brown"] {
  color: #f8a91f !important;   /* dorado — legible sobre fondo oscuro */
}
html.ca-dark .ca-casting-item__tag {
  background: rgba(248,169,31,.1);
  color: #f8a91f;
}

/* ── 4. Filtro de castings (barra País + Tipo) ──────────────────────────── */
html.ca-dark .ca-castings-filters {
  background: var(--ca-filter-bar-bg, #160d08);
  border-bottom-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-castings-filters__row {
  border-bottom-color: rgba(255,255,255,.06);
}
html.ca-dark .ca-castings-filters__label {
  color: rgba(240,237,231,.3);
}
html.ca-dark .ca-filter-pill[type="button"] {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-filter-pill[type="button"]:hover,
html.ca-dark .ca-filter-pill[type="button"].is-active {
  background: rgba(248,169,31,.15);
  border-color: rgba(248,169,31,.3);
  color: #f8a91f;
}

/* ── 5. Static hero — hero de páginas interiores ───────────────────────── */
html.ca-dark .ca-static-hero {
  background: linear-gradient(160deg, rgba(22,13,8,.9) 0%, transparent 70%);
  border-bottom-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-static-hero__eyebrow { color: #f8a91f; }
html.ca-dark .ca-static-hero__title   { color: #f0ede7; }
html.ca-dark .ca-static-hero__sub     { color: rgba(240,237,231,.55); }

/* ── 6. Wobble cards — fondo marrón oscuro, texto cream ────────────────── */
html.ca-dark .wobble-card {
  background: var(--ca-surface-2, #2e1a11);
  border-color: rgba(255,255,255,.07);
}
html.ca-dark .wobble-card--brown  { background: #1e1008; }
html.ca-dark .wobble-card--accent { background: rgba(236,100,38,.12); }
html.ca-dark .wobble-card--yellow { background: rgba(248,169,31,.1); }
html.ca-dark .wobble-card__title  { color: #f0ede7; }
html.ca-dark .wobble-card__text   { color: rgba(240,237,231,.55); }

/* ── 7. Inputs globales — formularios inline en PHP ────────────────────── */
/* Cubre los background:white que están como inline styles en PHP */
html.ca-dark input[type="text"],
html.ca-dark input[type="email"],
html.ca-dark input[type="password"],
html.ca-dark input[type="search"],
html.ca-dark input[type="url"],
html.ca-dark input[type="tel"],
html.ca-dark input[type="number"],
html.ca-dark textarea,
html.ca-dark select {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f0ede7 !important;
}
html.ca-dark input::placeholder,
html.ca-dark textarea::placeholder { color: rgba(240,237,231,.3) !important; }

/* ── 8. Botones con fondo blanco implícito ──────────────────────────────── */
html.ca-dark .hbg-btn:not(.hbg-btn--dark):not(.hbg-btn--accent) {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #f0ede7;
}
html.ca-dark .hbg-btn:not(.hbg-btn--dark):not(.hbg-btn--accent):hover {
  background: rgba(255,255,255,.14);
}
/* hbg-btn--dark usa el acento de color — se mantiene */
html.ca-dark .hbg-btn--dark {
  background: var(--ca-accent);
  color: white;
}

/* ── 9. Tarjetas genéricas con background blanco ────────────────────────── */
html.ca-dark .ca-post-card,
html.ca-dark .comet-card,
html.ca-dark .ca-feature-card,
html.ca-dark .ca-hub-card,
html.ca-dark .ca-info-card,
html.ca-dark .ca-static-card,
html.ca-dark .ca-contact-card,
html.ca-dark .ca-cast-card,
html.ca-dark .ca-resources-card,
html.ca-dark .ca-series-card {
  background: var(--ca-surface, #231410);
  border: none;
  color: #f0ede7;
}
html.ca-dark .ca-post-card:hover,
html.ca-dark .comet-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
html.ca-dark .ca-post-card__title,
html.ca-dark .comet-card__title { color: #f0ede7; }
html.ca-dark .ca-post-card__excerpt,
html.ca-dark .comet-card__excerpt { color: rgba(240,237,231,.5); }
html.ca-dark .ca-post-card__meta,
html.ca-dark .comet-card__meta   { color: rgba(240,237,231,.35); }

/* ── 10. Inline header search — dark mode overrides ───────────────────── */
html.ca-dark .ca-header__search-results {
  background: #160d08;
  border-color: rgba(236,100,38,.12);
}
html.ca-dark .ca-header__search-trigger {
  color: rgba(240,237,231,.7);
}
html.ca-dark .ca-header__search-trigger:hover {
  background: rgba(255,255,255,.08);
  color: #f0ede7;
}
html.ca-dark .ca-header__search-inner .ca-search-input-wrap {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
html.ca-dark #ca-search-input  { color: #f0ede7; }
html.ca-dark .ca-search-icon   { color: rgba(240,237,231,.4); }

/* ── 11. Search results dropdown ────────────────────────────────────────── */
html.ca-dark .ca-search-result {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-search-result:hover { background: rgba(255,255,255,.08); }
html.ca-dark .ca-search-result__title { color: #f0ede7; }
html.ca-dark .ca-search-result__excerpt { color: rgba(240,237,231,.45); }
html.ca-dark #ca-search-results {
  background: #160d08;
  border-color: rgba(255,255,255,.09);
}

/* ── 12. Header XP chip ──────────────────────────────────────────────────── */
html.ca-dark .ca-header__xp-chip {
  background: rgba(248,169,31,.1);
  border-color: rgba(248,169,31,.2);
  color: #f8a91f;
}

/* ── 13. Nav live badge ──────────────────────────────────────────────────── */
html.ca-dark .ca-nav-live-badge {
  background: var(--ca-accent);
  color: white;
}

/* ── 14. Mobile menu ─────────────────────────────────────────────────────── */
/* mobile dark overrides deduped */
html.ca-dark .ca-header__mobile-nav a {
  color: rgba(240,237,231,.7);
  border-color: rgba(255,255,255,.06);
}
html.ca-dark .ca-header__mobile-nav a:hover,
html.ca-dark .ca-header__mobile-nav a.is-active {
  color: #f8a91f;
  background: rgba(248,169,31,.08);
}
html.ca-dark .ca-header__mobile-primary { color: #f8a91f !important; }
html.ca-dark .ca-header__mobile-cta {
  background: var(--ca-accent);
  color: white;
}
html.ca-dark .ca-header__mobile-search {
  background: rgba(255,255,255,.05);
}
html.ca-dark .ca-header__mobile-search input {
  color: #f0ede7;
}
html.ca-dark .ca-header__mobile-divider {
  background: rgba(255,255,255,.07);
}

/* ── 15. Dropdown contenido ──────────────────────────────────────────────── */
html.ca-dark .ca-header__dropdown-menu {
  background: #1c100c;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
html.ca-dark .ca-header__dropdown-item {
  color: rgba(240,237,231,.7);
}
html.ca-dark .ca-header__dropdown-item:hover {
  background: rgba(255,255,255,.05);
  color: #f0ede7;
}
html.ca-dark .ca-header__dropdown-item small { color: rgba(240,237,231,.35); }
html.ca-dark .ca-header__dropdown-icon { background: rgba(255,255,255,.06); }

/* ── 16. CTA publicar casting ───────────────────────────────────────────── */
/* El div inline en castings.php tiene background rgba(254,242,216,.5) */
html.ca-dark [style*="rgba(254,242,216"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.ca-dark [style*="rgba(254,242,216"] h3 { color: #f0ede7; }
html.ca-dark [style*="rgba(254,242,216"] p  { color: rgba(240,237,231,.5); }

/* ── 17. Marrón sobre marrón — fix global para texto marrón en dark ─────── */
/* En dark mode --ca-brown = #6c4027 sobre fondo oscuro marrón → ilegible */
html.ca-dark .ca-casting-item__meta span[style*="ca-brown"],
html.ca-dark [style*="color:var(--ca-brown)"],
html.ca-dark [style*="color: var(--ca-brown)"] {
  color: #f8a91f !important;
}
/* s8-section-title em también usa ca-brown */
html.ca-dark .s8-section-title em       { color: #f8a91f; }
html.ca-dark .s8-section-link           { color: rgba(240,237,231,.5); }
html.ca-dark .s8-section-eye            { color: rgba(240,237,231,.35); }
html.ca-dark .s8-section-title          { color: #f0ede7; }

/* ── 18. Contact form inputs inline ─────────────────────────────────────── */
/* contact.php usa style="background:white" — ya cubierto por regla #7 */
/* Pero también necesita el wrapper de las cards */
html.ca-dark .ca-contact-card {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-contact-card__title { color: #f0ede7; }
html.ca-dark .ca-contact-card__desc  { color: rgba(240,237,231,.5); }

/* ── 19. Alertas de casting widget ──────────────────────────────────────── */
html.ca-dark .ca-casting-alerts {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-casting-alerts__title { color: #f0ede7; }
html.ca-dark .ca-casting-alerts__sub   { color: rgba(240,237,231,.5); }
html.ca-dark .ca-casting-alerts__input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #f0ede7;
}
html.ca-dark .ca-casting-alerts__cat:not(.is-selected) {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-casting-alerts__cat.is-selected {
  background: rgba(248,169,31,.15);
  border-color: rgba(248,169,31,.3);
  color: #f8a91f;
}

/* ── 20. Paginación ──────────────────────────────────────────────────────── */
html.ca-dark .ca-pagination__btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-pagination__btn:hover { background: rgba(255,255,255,.1); color: #f0ede7; }
html.ca-dark .ca-pagination__btn.is-active {
  background: var(--ca-accent);
  border-color: var(--ca-accent);
  color: white;
}

/* ── 21. Banner sticky ───────────────────────────────────────────────────── */
html.ca-dark #ca-sticky-banner {
  background: #1c100c;
  border-color: rgba(255,255,255,.08);
}

/* ── 22. Breadcrumbs ─────────────────────────────────────────────────────── */
html.ca-dark .ca-breadcrumbs,
html.ca-dark .breadcrumbs { background: transparent; }
html.ca-dark .ca-breadcrumbs a,
html.ca-dark .breadcrumbs a { color: rgba(240,237,231,.45); }
html.ca-dark .ca-breadcrumbs a:hover,
html.ca-dark .breadcrumbs a:hover { color: #f8a91f; }
html.ca-dark .ca-breadcrumbs span,
html.ca-dark .breadcrumbs span { color: rgba(240,237,231,.25); }

/* ── 23. Progress bars / XP bars ────────────────────────────────────────── */
html.ca-dark .ca-xp-bar {
  background: rgba(255,255,255,.07);
}
html.ca-dark .ca-xp-bar-labels span { color: rgba(240,237,231,.45); }

/* ── 24. Tags / badges en artículos ─────────────────────────────────────── */
html.ca-dark .ca-tag,
html.ca-dark [class*="ca-tag-"],
html.ca-dark .ca-category-label {
  background: rgba(255,255,255,.07);
  color: rgba(240,237,231,.7);
  border-color: rgba(255,255,255,.1);
}

/* ── 25. section-spacing con fondo implícito ────────────────────────────── */
html.ca-dark .section-spacing { background: transparent; }

/* ── 26. Anular background:white en inline styles (cobertura amplia) ──── */
html.ca-dark [style*="background:white"],
html.ca-dark [style*="background: white"],
html.ca-dark [style*="background-color:white"],
html.ca-dark [style*="background-color: white"],
html.ca-dark [style*="background:#fff"],
html.ca-dark [style*="background: #fff"],
html.ca-dark [style*="background-color:#fff"],
html.ca-dark [style*="background-color: #fff"],
html.ca-dark [style*="background:#fafafa"],
html.ca-dark [style*="background: #fafafa"],
html.ca-dark [style*="background:#f7f7f7"],
html.ca-dark [style*="background: #f7f7f7"] {
  background: rgba(255,255,255,.05) !important;
  color: #f0ede7;
}


/* ── Dark mode: secciones que usan background:var(--ca-ink) ────────────── */
/* En dark mode --ca-ink pasa a ser crema (#f0ede7), lo que invierte estas secciones
   a fondos claros con texto oscuro. Para las que son SIEMPRE oscuras, forjamos el color. */

/* Hero homepage — siempre oscuro */
html.ca-dark .ca-hero,
html.ca-dark .ca-hero__bg-grain + * { background-color: transparent; }

/* Dark sections que deben MANTENERSE oscuras en dark mode */
html.ca-dark .hbg-btn--dark {
  background: var(--ca-accent) !important;
  color: white !important;
}
html.ca-dark .hbg-btn--dark::after { background: var(--ca-accent) !important; }

/* Sections con background:var(--ca-ink) que se invierten mal */
html.ca-dark .ca-newsletter-section,
html.ca-dark .ca-castina-cta,
html.ca-dark .ca-cta-block,
html.ca-dark .ca-bottom-cta {
  background: #160d08 !important;
  color: #f0ede7;
}
html.ca-dark .ca-newsletter-section h2,
html.ca-dark .ca-castina-cta h2,
html.ca-dark .ca-cta-block h2,
html.ca-dark .ca-bottom-cta h2 { color: #f0ede7; }
html.ca-dark .ca-newsletter-section p,
html.ca-dark .ca-castina-cta p,
html.ca-dark .ca-bottom-cta p { color: rgba(240,237,231,.55); }

/* CTA band de la homepage (wobble-card--full) — textos ya cubiertos por wobble rules */

/* post-hero dark bg sections */
html.ca-dark .ca-post-hero {
  background: linear-gradient(160deg, #1e1008 0%, #0d0906 100%);
}
html.ca-dark .ca-post-hero__title  { color: #f0ede7; }
html.ca-dark .ca-post-hero__excerpt { color: rgba(240,237,231,.6); }
html.ca-dark .ca-post-hero__meta   { color: rgba(240,237,231,.4); }


/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE — Sprint 34 Patch 2 (fixes por capturas)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens nuevos en dark mode ─────────────────────────────────────── */
html.ca-dark {
  --ca-worldmap-bg: #0d0906;
  --ca-always-dark: #0d0906;
}

/* ── 2. Hub cards (ca-cat-hub__card) ────────────────────────────────────── */
/* background:var(--ca-surface) ya aplica vía token — pero necesita texto */
html.ca-dark .ca-cat-hub__card {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-cat-hub__card p,
html.ca-dark .ca-cat-hub__card h3,
html.ca-dark .ca-cat-hub__card .ca-section-eye {
  color: rgba(240,237,231,.55);
}
html.ca-dark .ca-cat-hub__list li {
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-cat-hub__list li svg {
  color: #f8a91f;  /* check mark — brown → dorado */
}

/* ── 3. FAQ items ─────────────────────────────────────────────────────── */
html.ca-dark .ca-faq-item {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-faq-item:hover {
  border-color: rgba(236,100,38,.3);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
html.ca-dark .ca-faq-item__q {
  color: #f0ede7;
}
html.ca-dark .ca-faq-item__icon {
  color: #f8a91f;
}
html.ca-dark .ca-faq-item__a {
  color: rgba(240,237,231,.5);
}

/* ── 4. hbg-btn base (el botón crema con efecto spinning) ───────────────── */
/* En light mode usa background:var(--ca-cream) = crema claro con texto oscuro */
/* En dark mode --ca-cream = marrón oscuro = fondo oscuro, pero texto sigue siendo --ca-ink = crema */
/* → no hay problema real, pero ::after también es --ca-cream → hay que verificar */
html.ca-dark .hbg-btn {
  background: var(--ca-surface, #231410);
  color: #f0ede7;
}
html.ca-dark .hbg-btn::after {
  background: var(--ca-surface, #231410);
}
html.ca-dark .hbg-btn:hover::after {
  background: var(--ca-surface-2, #2e1a11);
}
/* hbg-btn--dark: en dark mode debe ser el acento, ya corregido en sprint anterior */
html.ca-dark .hbg-btn--dark {
  background: var(--ca-accent) !important;
  color: white !important;
}
html.ca-dark .hbg-btn--dark::after {
  background: var(--ca-accent) !important;
}

/* ── 5. Hamburger FAB button (ca-header__toggle) ────────────────────────── */
/* En mobile usa background:var(--ca-ink) → en dark mode = crema (blanco) */
html.ca-dark .ca-header__toggle {
  background: #231410 !important;
  color: #f0ede7 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
html.ca-dark .ca-header__toggle:hover {
  background: var(--ca-accent) !important;
  color: white !important;
}

/* ── 6. Mobile menu overlay bg ──────────────────────────────────────────── */
/* En media query usa background:var(--ca-ink-2) → puede ser problemático */
/* deduped */

/* ── 7. Worldmap section ─────────────────────────────────────────────────── */
/* Ya usa --ca-worldmap-bg via token, pero textos y chips dentro */
html.ca-dark .ca-worldmap__eye    { color: rgba(240,237,231,.4); }
html.ca-dark .ca-worldmap__title  { color: #f0ede7; }
html.ca-dark .ca-worldmap__title em { color: var(--ca-accent); }
html.ca-dark .ca-worldmap__sub    { color: rgba(240,237,231,.5); }
html.ca-dark .ca-worldmap__chip {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-worldmap__chip strong { color: #f0ede7; }

/* ── 8. Guardados hero — fixed via PHP but need text colors ─────────────── */
html.ca-dark .ca-bookmarks-empty__title { color: #f0ede7; }
html.ca-dark .ca-bookmarks-empty__sub   { color: rgba(240,237,231,.5); }
html.ca-dark #bm-clear-all {
  color: rgba(240,237,231,.35) !important;
}

/* ── 9. Cat hero featured card (img body blanco) ────────────────────────── */
html.ca-dark .ca-cat-hero__card-body {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-cat-hero__card-title { color: #f0ede7; }
html.ca-dark .ca-cat-hero__card-meta  { color: rgba(240,237,231,.4); }
html.ca-dark .ca-cat-hero__card-link  { color: #f8a91f; }

/* ── 10. Mi progreso — labels y secciones ───────────────────────────────── */
html.ca-dark [style*="color:var(--ca-ink,#1a0f09)"],
html.ca-dark [style*="color: var(--ca-ink, #1a0f09)"] {
  /* CSS vars ya resuelven esto — fallback no needed */
}
/* XP widget sections container */
html.ca-dark .ca-xp-widget {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-xp-widget__name,
html.ca-dark .ca-xp-widget__rank-label { color: #f0ede7; }
html.ca-dark .ca-xp-widget__pts        { color: rgba(240,237,231,.45); }
/* Leaderboard */
html.ca-dark .ca-leaderboard {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-leaderboard__title    { color: #f0ede7; }
html.ca-dark .ca-leaderboard__name     { color: rgba(240,237,231,.8); }
html.ca-dark .ca-leaderboard__pts      { color: rgba(240,237,231,.4); }
html.ca-dark .ca-leaderboard__row      { border-color: rgba(255,255,255,.05); }
/* Activity box en mi-progreso */
html.ca-dark .ca-activity-box {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-activity-box__title { color: #f0ede7; }
html.ca-dark .ca-activity-row        { border-color: rgba(255,255,255,.05); }
html.ca-dark .ca-activity-row__label { color: rgba(240,237,231,.6); }
html.ca-dark .ca-activity-row__pts   { color: #f8a91f; }


/* ── Cat hero card (featured post card in category hero) ─────────────────── */
html.ca-dark .ca-cat-hero__card {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-cat-hero__card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  border-color: rgba(236,100,38,.3);
}
html.ca-dark .ca-cat-hero__card-body {
  background: var(--ca-surface, #231410);
}
html.ca-dark .ca-cat-hero__card-title {
  color: #f0ede7;
}
html.ca-dark .ca-cat-hero__card:hover .ca-cat-hero__card-title {
  color: #f8a91f;
}
html.ca-dark .ca-cat-hero__card-meta {
  color: rgba(240,237,231,.35);
}
html.ca-dark .ca-cat-hero__card-link {
  color: #f8a91f;
}

/* ── Blog mini cards, pop cards, pagination — style.css components ───────── */
html.ca-dark .ca-blog-mini {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-blog-mini:hover {
  border-color: rgba(236,100,38,.3);
}
html.ca-dark .ca-blog-mini__title { color: #f0ede7; }
html.ca-dark .ca-blog-mini__meta  { color: rgba(240,237,231,.4); }

html.ca-dark .ca-pop-card {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
}
html.ca-dark .ca-pop-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  border-color: rgba(236,100,38,.3);
}
html.ca-dark .ca-pop-card__rank {
  background: rgba(255,255,255,.1);
  color: #f8a91f;
  box-shadow: none;
}
html.ca-dark .ca-pop-card__title { color: #f0ede7; }
html.ca-dark .ca-pop-card__meta  { color: rgba(240,237,231,.4); }

html.ca-dark .ca-pagination__btn,
html.ca-dark .ca-pagination__num {
  background: var(--ca-surface, #231410);
  border-color: rgba(255,255,255,.08);
  color: rgba(240,237,231,.6);
}
html.ca-dark .ca-pagination__btn:hover,
html.ca-dark .ca-pagination__num:hover {
  background: rgba(255,255,255,.1);
  color: #f0ede7;
}
html.ca-dark .ca-pagination__btn.is-active,
html.ca-dark .ca-pagination__num.is-active {
  background: var(--ca-accent);
  border-color: var(--ca-accent);
  color: white;
}


/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE — Sprint 34 Patch 3 (segundo lote de capturas)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cat-hero section (páginas de categoría) ─────────────────────────────── */
html.ca-dark .ca-cat-hero {
  background: linear-gradient(160deg, #1a0f09 0%, #110a06 100%);
  border-bottom-color: rgba(255,255,255,.07);
}
html.ca-dark .ca-cat-hero__icon {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
html.ca-dark .ca-section-eye,
html.ca-dark .ca-cat-hero__breadcrumbs { color: rgba(240,237,231,.35); }
html.ca-dark .ca-cat-hero__breadcrumbs a { color: rgba(240,237,231,.5); }
html.ca-dark .ca-cat-hero__title        { color: #f0ede7; }
html.ca-dark .ca-cat-hero__desc         { color: rgba(240,237,231,.55); }
html.ca-dark .ca-cat-hero__stats        { color: rgba(240,237,231,.45); }
html.ca-dark .ca-cat-hero__stats i      { color: #f8a91f; }

/* ── --ca-cream override — evitar que se use como bg en dark (se vuelve marrón) ── */
/* El gradiente ca-cat-hero ya está fixeado en style.css con ca-bg-2 */
/* Otros componentes que usen var(--ca-cream) como bg oscuro necesitan override */
html.ca-dark [style*="background:var(--ca-cream)"],
html.ca-dark [style*="background: var(--ca-cream)"] {
  background: rgba(255,255,255,.04) !important;
}
/* --ca-cream usado como COLOR de texto en contexto dark → convertir a crema fijo */
html.ca-dark [style*="color:var(--ca-cream)"] {
  color: #f0ede7 !important;
}

/* ── Mi progreso: achievement badges (locked) ────────────────────────────── */
/* badge desc + earned-at ya usan CSS vars después del fix */
/* Extra: el span de "Logros X/Y" contador */
html.ca-dark .ca-progress-layout [style*="color:var(--ca-ink-2"] { color: rgba(240,237,231,.45); }

/* ── Mi progreso: activity section ──────────────────────────────────────── */
html.ca-dark .ca-activity-title { color: rgba(240,237,231,.35) !important; }

/* ── Mi progreso: "Cómo ganar puntos" ───────────────────────────────────── */
/* El label ya usa var(--ca-ink) después del fix → resuelve bien en dark */
/* El contenedor tiene border con CSS var también */
/* Extra: hover row  */
html.ca-dark [style*="background:rgba(255,255,255,.04)"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   CA-PAGE-HERO — Hero unificado para páginas interiores sin imagen
   Reemplaza los inline-div heroes de recursos, guardados, newsletter-archivo
   Misma familia visual que ca-inner-hero pero con más presencia tipográfica
   ════════════════════════════════════════════════════════════════════════════ */

.ca-page-hero {
  background: var(--ca-ink);          /* dark marrón en light, se overridea en dark */
  padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}

/* Grain sutil de fondo */
.ca-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.ca-page-hero__inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}

.ca-page-hero__eyebrow {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ca-accent);
  margin-bottom: 14px;
}

.ca-page-hero__title {
  font-family: var(--ca-font-display), 'Thunder', sans-serif;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: rgba(254,242,216,.95);   /* crema fija — siempre sobre fondo oscuro */
  margin: 0 0 20px;
}

.ca-page-hero__title em {
  font-style: normal;
  color: var(--ca-yellow, #f8a91f);
}

.ca-page-hero__title span.accent {
  color: var(--ca-accent);
}

.ca-page-hero__sub {
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(254,242,216,.55);
  max-width: 560px;
  line-height: 1.65;
  margin: 0;
}

/* Dark mode — fondo aún más oscuro, más contraste */
html.ca-dark .ca-page-hero {
  background: #0d0906;
  border-bottom-color: rgba(255,255,255,.06);
}

/* Light mode — el --ca-ink es el marrón oscuro correcto */
/* No se necesita override — funciona solo */

@media (max-width: 768px) {
  .ca-page-hero {
    padding: 48px 0 36px;
  }
}


/* ── ca-inner-hero dark mode (login, registro, mi-cuenta, recuperar, mi-progreso) ── */
html.ca-dark .ca-inner-hero {
  background: #110a06;
  border-bottom-color: rgba(255,255,255,.06);
}
html.ca-dark .ca-inner-hero__title { color: #f0ede7; }
html.ca-dark .ca-inner-hero__sub   { color: rgba(240,237,231,.5); }
html.ca-dark .ca-inner-hero .ca-breadcrumbs       { color: rgba(240,237,231,.3); }
html.ca-dark .ca-inner-hero .ca-breadcrumbs a     { color: rgba(240,237,231,.5); }
html.ca-dark .ca-inner-hero .ca-breadcrumbs a:hover { color: #f8a91f; }


/* ════════════════════════════════════════════════════════════════════════════
   CA-COMMENT-GATE — Login wall para comentarios (usuarios no registrados)
   ════════════════════════════════════════════════════════════════════════════ */

/* Header del form cuando está logueado */
.ca-comment-form-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ca-comment-form-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ca-ink-2);
}

.ca-comment-form-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Gate principal */
.ca-comment-gate {
  background: var(--ca-surface, #fef8f4);
  border: 1.5px dashed var(--ca-border);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 48px) clamp(24px, 4vw, 40px);
  text-align: center;
  max-width: 520px;
}

.ca-comment-gate__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 14px;
}

.ca-comment-gate__title {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ca-ink);
  margin: 0 0 10px;
}

.ca-comment-gate__sub {
  font-size: 14.5px;
  color: var(--ca-ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}

.ca-comment-gate__sub strong {
  color: var(--ca-accent);
}

.ca-comment-gate__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ca-comment-gate__btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}

.ca-comment-gate__btn:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.ca-comment-gate__btn--primary {
  background: var(--ca-accent);
  color: #fff;
}

.ca-comment-gate__btn--ghost {
  border: 1.5px solid var(--ca-border);
  color: var(--ca-ink);
}

.ca-comment-gate__perks {
  font-size: 11.5px;
  color: var(--ca-ink-3);
  margin: 0;
  letter-spacing: .02em;
}

/* Dark mode */
html.ca-dark .ca-comment-gate {
  background: #160d08;
  border-color: rgba(255,255,255,.08);
}

html.ca-dark .ca-comment-gate__btn--ghost {
  border-color: rgba(255,255,255,.12);
  color: #f0ede7;
}

html.ca-dark .ca-comment-form-user { color: rgba(240,237,231,.5); }


/* ── Dark mode: search results ─────────────────────────────────────────── */
html.ca-dark #ca-search-results { background: #1a0d08; }

/* ── Search overlay: heading + ESC hint ─────────────────────────────────── */
.ca-search-overlay-hint {
  font-family: var(--ca-font-display), sans-serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  color: var(--ca-ink);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.ca-search-overlay-esc {
  text-align: center;
  font-size: 12px;
  color: rgba(var(--_ink-rgb),.35);
  margin: 14px 0 0;
}
.ca-search-overlay-esc kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(var(--_ink-rgb),.07);
  border: 1px solid rgba(var(--_ink-rgb),.15);
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
}
html.ca-dark .ca-search-overlay-hint { color: rgba(240,237,231,.92); }
html.ca-dark .ca-search-overlay-esc  { color: rgba(240,237,231,.3); }
html.ca-dark .ca-search-overlay-esc kbd {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  color: rgba(240,237,231,.6);
}

/* ── Sidebar related: thumbnail container safety ─────────────────────────── */
.ca-sidebar-related__img {
  position: relative;        /* contain the placeholder */
  width: 60px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.ca-sidebar-related__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-border);
  text-decoration: none;
  align-items: center;
}
.ca-sidebar-related__item:last-child { border-bottom: none; }

/* ── Sidebar related placeholder: keep initials small ───────────────────── */
.ca-sidebar-related__placeholder::after {
  font-size: 20px !important;
  letter-spacing: -1px;
  opacity: .3;
}

/* ── Dark mode: sidebar widget cards more distinct ───────────────────────── */
html.ca-dark .ca-sidebar-widget,
html.ca-dark .ca-sidebar-yt {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

html.ca-dark .ca-sidebar-yt__name { color: rgba(240,237,231,.85); }
html.ca-dark .ca-sidebar-yt__sub { color: rgba(240,237,231,.5); }
html.ca-dark .ca-sidebar-yt__pitch { color: rgba(240,237,231,.6); }
html.ca-dark .ca-sidebar-nl__title { color: rgba(240,237,231,.9); }
html.ca-dark .ca-sidebar-nl__sub { color: rgba(240,237,231,.5); }
html.ca-dark .ca-sidebar-nl__input {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: rgba(240,237,231,.9);
}
html.ca-dark .ca-sidebar-nl__input::placeholder { color: rgba(240,237,231,.3); }
html.ca-dark .ca-sidebar-yt__divider { background: rgba(255,255,255,.08); }
html.ca-dark .ca-sidebar-widget__label { color: rgba(240,237,231,.35); border-bottom-color: rgba(255,255,255,.07); }
html.ca-dark .ca-sidebar-nl__cats-label { color: rgba(240,237,231,.5); }

/* ── Sidebar YT widget: prevent collapse, clear light/dark styling ────────── */
.ca-sidebar-yt {
  min-height: 120px;
}
.ca-sidebar-widget {
  position: relative;
}
/* Make sidebar related items more compact so they don't dominate */
.ca-sidebar-related__item {
  padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════
   UX SPRINT — Progress bar, skeletons, semaphore, share, toasts
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Reading progress bar ─────────────────────────────────── */
.ca-reading-progress {
  position: fixed; top: var(--ca-header-h, 64px); left: 0; right: 0;
  height: 3px; z-index: 8999;
  background: transparent; pointer-events: none;
}
.ca-reading-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ca-accent), var(--ca-accent-2, #f8a91f));
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(236,100,38,.4);
}

/* ── 2. Skeleton loaders ─────────────────────────────────────── */
@keyframes ca-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.ca-skeleton {
  background: linear-gradient(90deg,
    var(--ca-border) 25%,
    var(--ca-border-2, rgba(26,15,9,.12)) 50%,
    var(--ca-border) 75%);
  background-size: 600px 100%;
  animation: ca-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.ca-skeleton-card {
  background: var(--ca-surface);
  border-radius: var(--ca-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
}
.ca-skeleton-card__img  { height: 180px; }
.ca-skeleton-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ca-skeleton-card__title { height: 18px; border-radius: 4px; width: 85%; }
.ca-skeleton-card__title-2 { height: 18px; border-radius: 4px; width: 60%; }
.ca-skeleton-card__meta  { height: 12px; border-radius: 4px; width: 45%; margin-top: 4px; }

/* ── 3. Casting deadline semaphore ───────────────────────────── */
.ca-casting-item__deadline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; border-radius: 99px;
  padding: 3px 10px; white-space: nowrap;
}
.ca-deadline--green {
  background: rgba(34,197,94,.12); color: #16a34a;
}
.ca-deadline--yellow {
  background: rgba(234,179,8,.12); color: #a16207;
}
.ca-deadline--red {
  background: rgba(239,68,68,.12); color: #dc2626;
}
.ca-deadline--none {
  background: rgba(26,15,9,.07); color: rgba(26,15,9,.45);
}
html.ca-dark .ca-deadline--green  { background: rgba(34,197,94,.15); color: #4ade80; }
html.ca-dark .ca-deadline--yellow { background: rgba(234,179,8,.15); color: #fbbf24; }
html.ca-dark .ca-deadline--red    { background: rgba(239,68,68,.15); color: #f87171; }
html.ca-dark .ca-deadline--none   { background: rgba(255,255,255,.07); color: rgba(240,220,200,.4); }

/* ── 4. Share button ─────────────────────────────────────────── */
.ca-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: rgba(26,15,9,.07); border: 1px solid rgba(26,15,9,.1);
  border-radius: 99px; font-size: 12.5px; font-weight: 700;
  color: rgba(26,15,9,.6); cursor: pointer;
  transition: background .18s, color .18s;
  font-family: inherit;
}
.ca-share-btn:hover { background: rgba(26,15,9,.12); color: var(--ca-ink); }
.ca-share-btn svg { opacity: .7; }
html.ca-dark .ca-share-btn {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1);
  color: rgba(240,220,200,.6);
}
html.ca-dark .ca-share-btn:hover { background: rgba(255,255,255,.12); color: rgba(240,220,200,.9); }

/* ── 5. XP onboarding toast ──────────────────────────────────── */
.ca-xp-onboard {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ca-ink, #1a0f09); color: var(--ca-cream, #fef2d8);
  border-radius: 14px; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); z-index: 9990;
  max-width: 340px; width: calc(100% - 40px);
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.ca-xp-onboard.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ca-xp-onboard__icon { font-size: 28px; flex-shrink: 0; }
.ca-xp-onboard__body { flex: 1; min-width: 0; }
.ca-xp-onboard__title { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.ca-xp-onboard__sub   { font-size: 12px; opacity: .6; line-height: 1.4; }
.ca-xp-onboard__close {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .5; font-size: 16px; padding: 4px;
  flex-shrink: 0; line-height: 1;
}
.ca-xp-onboard__close:hover { opacity: .9; }

/* ── 6. Search type filter pills ─────────────────────────────── */
.ca-sr-type-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px;
}
.ca-sr-type-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px;
  background: var(--ca-surface); border: 1.5px solid var(--ca-border);
  border-radius: 99px; font-size: 12px; font-weight: 700;
  color: var(--ca-ink-2); cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.ca-sr-type-pill:hover,
.ca-sr-type-pill.is-active {
  background: var(--ca-accent); border-color: var(--ca-accent);
  color: #fff;
}

/* ── 7. Comment sent toast ───────────────────────────────────── */
.ca-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--ca-ink); color: var(--ca-cream, #fef2d8);
  border-radius: 12px; padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  font-size: 14px; font-weight: 600;
  transform: translateY(16px); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none; max-width: 320px;
}
.ca-toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ca-toast--ok  { border-left: 3px solid #22c55e; }
.ca-toast--err { border-left: 3px solid #ef4444; }
.ca-toast--info { border-left: 3px solid var(--ca-accent); }

/* ── Mobile menu dark toggle row ─────────────────────────── */
html.ca-dark .ca-header__mobile .ca-dark-toggle {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}
html:not(.ca-dark) .ca-header__mobile .ca-dark-toggle {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MENU — Side drawer from right
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop overlay — covers full screen */
.ca-header__mobile {
  position: fixed; inset: 0; z-index: 8999;
  background: rgba(10,6,3,.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.ca-header__mobile.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html:not(.ca-dark) .ca-header__mobile { background: rgba(26,15,9,.35); }

/* Drawer panel — slides in from right */
.ca-header__mobile-inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: #1a0f09;
  display: flex; flex-direction: column;
  padding: 20px 20px 32px;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.23,1,.32,1);
  box-shadow: -8px 0 48px rgba(0,0,0,.35);
  overflow-y: auto;
}
.ca-header__mobile.is-open .ca-header__mobile-inner { transform: translateX(0); }
html:not(.ca-dark) .ca-header__mobile-inner {
  background: #fff8ed;
  box-shadow: -8px 0 40px rgba(26,15,9,.15);
}
.ca-header__mobile-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.ca-mob-menu-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .4;
}

/* Nav links inside drawer */
.ca-header__mobile-nav {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px;
}
.ca-header__mobile-nav a {
  display: flex; align-items: center; height: 48px; padding: 0 14px;
  font-size: 15px; font-weight: 600;
  color: rgba(240,220,200,.65);
  text-decoration: none; border-radius: 10px;
  transition: background .15s, color .15s;
}
.ca-header__mobile-nav a:hover,
.ca-header__mobile-nav a.is-active {
  background: rgba(255,255,255,.08); color: rgba(240,220,200,.95);
}
html:not(.ca-dark) .ca-header__mobile-nav a { color: rgba(26,15,9,.6); }
html:not(.ca-dark) .ca-header__mobile-nav a:hover,
html:not(.ca-dark) .ca-header__mobile-nav a.is-active {
  background: rgba(26,15,9,.07); color: rgba(26,15,9,.9);
}

/* Primary link (Castings) */
.ca-header__mobile-primary {
  font-weight: 800 !important;
  color: var(--ca-accent) !important;
  background: rgba(236,100,38,.08) !important;
}
html.ca-dark .ca-header__mobile-primary { color: var(--ca-accent) !important; }

/* Divider */
.ca-header__mobile-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 8px 0;
}
html:not(.ca-dark) .ca-header__mobile-divider { background: rgba(26,15,9,.07); }

/* Bottom CTA */
.ca-header__mobile-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 12px; margin-top: auto;
  background: var(--ca-accent); color: #fff;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: background .18s;
  flex-shrink: 0;
}
.ca-header__mobile-cta:hover { background: var(--ca-accent-hover, #d4531e); }

/* Search inside drawer */
.ca-header__mobile-search {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.07);
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,.08);
  margin-bottom: 20px;
}
html:not(.ca-dark) .ca-header__mobile-search {
  background: rgba(26,15,9,.07); border-color: rgba(26,15,9,.08);
}
.ca-header__mobile-search input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14px; font-family: inherit;
  color: rgba(240,220,200,.85);
}
html:not(.ca-dark) .ca-header__mobile-search input { color: rgba(26,15,9,.85); }
.ca-header__mobile-search input::placeholder { color: rgba(255,255,255,.25); }
html:not(.ca-dark) .ca-header__mobile-search input::placeholder { color: rgba(26,15,9,.3); }
.ca-header__mobile-search svg { color: rgba(255,255,255,.3); flex-shrink: 0; }
html:not(.ca-dark) .ca-header__mobile-search svg { color: rgba(26,15,9,.3); }

/* Dark toggle inside drawer */
.ca-header__mobile .ca-dark-toggle {
  width: 44px; height: 44px;
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.1) !important;
}
html:not(.ca-dark) .ca-header__mobile .ca-dark-toggle {
  border-color: rgba(26,15,9,.15) !important;
  background: rgba(26,15,9,.08) !important;
}

/* Post hero placeholder (no image) — match page background, no white box */
.ca-post-hero__placeholder { display: none; }
.ca-post-hero__placeholder-bg { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   Toast — feedback efímero global (lo crea window.caToast en app.js)
   ───────────────────────────────────────────────────────────────────────────── */
.ca-toast-region {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}
.ca-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  background: var(--ca-ink);
  color: var(--ca-cream, #fef2d8);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 28px rgba(26,15,9,.28), inset 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .26s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ca-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ca-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }
.ca-toast__icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ca-toast__msg { min-width: 0; }
.ca-toast--success { background: #1f7a4d; color: #fff; }
.ca-toast--error   { background: #b23a2e; color: #fff; }
html.ca-dark .ca-toast { background: #2a1a11; color: #fef2d8; }
html.ca-dark .ca-toast--success { background: #1f7a4d; }
html.ca-dark .ca-toast--error   { background: #c0473a; }
@media (max-width: 960px) {
  /* dejar libre la zona del FAB (bottom-right) */
  .ca-toast-region { bottom: 92px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER (.ed-*) — lenguaje visual estilo referencia tryplayground
   Cards warm-surface, secciones aireadas, columna de lectura, tipo Inter.
   Reusa los tokens semánticos --ca-* → hereda dark mode y acento naranja.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ed-bg:          var(--ca-bg);
  --ed-card:        #fbf7ef;                 /* warm off-white card sobre cream */
  --ed-card-hover:  #fdfbf6;
  --ed-border:      rgba(108,64,39,.14);
  --ed-border-2:    rgba(108,64,39,.22);
  --ed-ink:         var(--ca-ink);
  --ed-muted:       var(--ca-ink-2);
  --ed-faint:       var(--ca-ink-3);
  --ed-accent:      var(--ca-accent);
  --ed-accent-soft: rgba(236,100,38,.10);
  --ed-radius:      12px;
  --ed-radius-lg:   20px;
  --ed-maxw:        1120px;                  /* contenedor ancho */
  --ed-prose:       720px;                   /* columna de lectura */
}
html.ca-dark {
  --ed-card:       var(--_brown-700);
  --ed-card-hover: var(--_brown-600);
  --ed-border:     rgba(240,220,200,.10);
  --ed-border-2:   rgba(240,220,200,.18);
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.ed { font-family: var(--ca-font-body); color: var(--ed-ink); }
.ed-container {
  width: 100%;
  max-width: var(--ed-maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.ed-prose-wrap { max-width: var(--ed-prose); margin-inline: auto; }

/* ── Post: foto de portada ──────────────────────────────────────────────── */
.ed-post__cover { margin: 8px auto 40px; }
.ed-post__cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--ed-radius);
  border: 1px solid var(--ed-border);
}

/* ── Post: layout 2 columnas (lectura + sidebar sticky con ads) ─────────── */
.ed-post-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ed-post-main { min-width: 0; }
.ed-post-aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 980px) {
  .ed-post-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
  }
  .ed-post-aside { position: sticky; top: 92px; }
}

/* ── Espacios de anuncios (placeholder reservado; CSP-safe) ─────────────── */
/* overflow:visible anula el overflow:hidden del tema legacy (style.css): el
   contenedor debe crecer para acomodar el anuncio, nunca recortarlo. El alto
   queda libre (sin height fija) y a lo ancho lo contiene el max-width del <ins>. */
.ad-slot { margin: 32px 0; border-radius: var(--ed-radius); overflow: visible; height: auto; }
.ad-slot__label {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ed-muted); text-align: center; margin-bottom: 6px; opacity: .55;
}
.ad-slot__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 20px; text-align: center; min-height: 90px;
  background: rgba(108,64,39,.04);
  border: 1.5px dashed var(--ed-border);
  border-radius: 10px;
}
.ad-slot__inner strong { font-size: 13px; font-weight: 600; color: var(--ed-muted); }
.ad-slot__inner small  { font-size: 11px; color: var(--ed-muted); opacity: .7; }
/* AdSense exige display:block en el <ins>; lo damos por clase, no por style= inline.
   El contenedor es siempre dinámico: solo tiene min-height (piso, nunca techo) y
   ningún alto fijo, así que crece con el alto del anuncio sin recortarlo. El
   max-width:100% evita que un ad de tamaño fijo desborde a lo ancho de su columna. */
.ad-slot .adsbygoogle { display: block; width: 100%; max-width: 100%; height: auto; }
.ad-slot--rectangle .ad-slot__inner { min-height: 250px; }
.ad-slot--vertical  .ad-slot__inner { min-height: 320px; }
/* Ads del sidebar: pegados al ancho de la columna, más altos */
.ed-post-aside .ad-slot { margin: 0; }
.ed-post-aside .ad-slot--vertical .ad-slot__inner { min-height: 480px; }

/* In-article: rectángulos intercalados, centrados y con aire propio.
   El tope de ancho aplica tanto al placeholder como al <ins> real. */
.ed-post-main .ed-ad--inline { margin-block: 36px; }
.ed-post-main .ed-ad--inline .ad-slot__inner,
.ed-post-main .ed-ad--inline .adsbygoogle { max-width: 336px; margin-inline: auto; }

/* ── Anchor: barra de anuncio fija inferior (estilo Infobae) ────────────── */
.ed-ad-anchor {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--ca-bg, #fff);
  border-top: 1px solid var(--ed-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.ed-ad-anchor[hidden] { display: none; }
.ed-ad-anchor__slot { margin: 0; width: 100%; max-width: 728px; }
.ed-ad-anchor__slot .ad-slot__label { display: none; }
.ed-ad-anchor__slot .ad-slot__inner { min-height: 60px; padding: 8px; }
.ed-ad-anchor__close {
  position: absolute;
  top: -13px; right: 12px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ed-border);
  border-radius: 50%;
  background: var(--ca-bg, #fff);
  color: var(--ed-muted);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ed-ad-anchor__close:hover { color: var(--ed-ink); }

.ed-section { padding-block: clamp(48px, 8vw, 96px); }
.ed-section--tight { padding-block: clamp(32px, 5vw, 56px); }
.ed-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ed-section__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.ed-section__link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ed-accent);
  text-decoration: none;
  white-space: nowrap;
}
.ed-section__link:hover { text-decoration: underline; }

/* ── Hero editorial (centrado) ──────────────────────────────────────────── */
.ed-hero { text-align: center; padding-block: clamp(56px, 9vw, 112px); }
.ed-hero__eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-accent);
  margin-bottom: 16px;
}
.ed-hero__title {
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 auto;
  max-width: 14ch;
}
.ed-hero__subtitle {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: var(--ed-muted);
}

/* ── Chip de categoría / tag ────────────────────────────────────────────── */
.ed-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ed-accent);
  background: var(--ed-accent-soft);
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1.2;
}

/* ── Card de post (sin thumbnail, columna única) ────────────────────────── */
.ed-card {
  display: block;
  background: var(--ed-card);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  padding: clamp(20px, 3vw, 28px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ca-transition-base),
              box-shadow var(--ca-transition-base),
              border-color var(--ca-transition-base),
              background var(--ca-transition-base);
}
.ed-card:hover {
  background: var(--ed-card-hover);
  border-color: var(--ed-border-2);
  box-shadow: var(--ca-shadow-md);
  transform: translateY(-2px);
}
.ed-card__tag { margin-bottom: 14px; }
.ed-card__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--ed-ink);
}
.ed-card:hover .ed-card__title { color: var(--ed-accent); }
.ed-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--ed-muted);
  margin-bottom: 12px;
}
.ed-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ed-faint); display: inline-block; }
.ed-card__author { font-weight: 600; color: var(--ed-ink); }
.ed-card__excerpt {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ed-muted);
  margin: 0;
}

/* ── Lista single-column ────────────────────────────────────────────────── */
.ed-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ed-list__empty {
  text-align: center;
  color: var(--ed-muted);
  padding: 48px 0;
  font-size: .95rem;
}

/* ── Card destacada (featured) ──────────────────────────────────────────── */
.ed-featured {
  display: block;
  background: var(--ed-card);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-lg);
  padding: clamp(28px, 5vw, 48px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ca-transition-base), box-shadow var(--ca-transition-base), border-color var(--ca-transition-base);
}
.ed-featured:hover { border-color: var(--ed-border-2); box-shadow: var(--ca-shadow-lg); transform: translateY(-3px); }
.ed-featured__tag { margin-bottom: 18px; }
.ed-featured__title {
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 16px;
  max-width: 22ch;
}
.ed-featured:hover .ed-featured__title { color: var(--ed-accent); }
.ed-featured__excerpt {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ed-muted);
  max-width: 60ch;
  margin: 0 0 20px;
}

/* ── Filtro de categorías (pills) ───────────────────────────────────────── */
.ed-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.ed-filter__chip {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ed-muted);
  background: transparent;
  border: 1px solid var(--ed-border-2);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ca-transition-fast);
}
.ed-filter__chip:hover { color: var(--ed-ink); border-color: var(--ed-accent); }
.ed-filter__chip.is-active {
  color: var(--_white);
  background: var(--ed-accent);
  border-color: var(--ed-accent);
}

/* ── Grid de relacionados (3 col) ───────────────────────────────────────── */
.ed-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Post: header + body ────────────────────────────────────────────────── */
.ed-post__header { text-align: left; margin-bottom: 16px; padding-bottom: 0; }
.ed-post__tag { margin-bottom: 18px; }
.ed-post__title {
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 24px;
}
.ed-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--ed-muted);
}
.ed-byline__author { font-weight: 600; color: var(--ed-ink); }
.ed-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ed-faint); display: inline-block; }

/* ════════════════════════════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO DEL POST — estandarizado
   ────────────────────────────────────────────────────────────────────────
   Escala modular sobre 18px. Jerarquía clara y ascendente:
     body 18px · h3 22px · h2 30px · h1 (título) 52px
   Interlineado de lectura larga 1.7; encabezados 1.25–1.35.
   Ritmo vertical en `em` → cada nivel respira en proporción a su tamaño.
   El cuerpo arrastra clases legacy (.text/.title/.details-info dentro de
   .section-details, especificidad 0,3,0). Estos overrides scopeados a
   `.section-details` (0,3,1 en encabezados) ganan por especificidad+orden
   e imponen un ritmo coherente sobre el tema viejo.
   ════════════════════════════════════════════════════════════════════════ */
.ed-post__body { font-size: 1.125rem; line-height: 1.7; color: var(--ed-ink); }
.ed-post__body > * + * { margin-top: 1.4em; }

/* — Párrafos — */
.ed-post__body .section-details .text {
  font-size: 1.125rem;            /* 18px */
  line-height: 1.7;               /* interlineado cómodo, invita a leer */
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ed-ink);
}
.ed-post__body .section-details .text:not(:first-child) { margin-top: 1.35em; }

/* — Lead: primer párrafo, un punto más grande para arrancar la lectura — */
.ed-post__body .section-details > .text-wrapper:first-child .text:first-child {
  font-size: 1.25rem;             /* 20px */
  line-height: 1.6;
  color: var(--ed-ink);
}

/* — Encabezado de sección (h2) — */
.ed-post__body .section-details h2.title {
  font-family: var(--ca-font-display);
  font-size: clamp(1.6rem, 2.6vw, 1.875rem);  /* 25.6–30px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 1.9em 0 .5em;           /* aire amplio arriba, ajustado abajo */
}
/* — Encabezado de subsección (h3): un escalón claro por debajo del h2 — */
.ed-post__body .section-details h3.title {
  font-family: var(--ca-font-display);
  font-size: clamp(1.25rem, 2vw, 1.375rem);   /* 20–22px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 1.7em 0 .4em;
}

/* — Contenedores: el ritmo lo mandan los encabezados/párrafos, no los wrappers — */
.ed-post__body .section-details .details-info { margin-top: 0; }
.ed-post__body .section-details .text-wrapper + .details-info { margin-top: 0; }
.ed-post__body .section-details .text-wrapper { margin-top: 1.6em; }
.ed-post__body .section-details > .text-wrapper:first-child { margin-top: 0; }
/* Texto/lista justo debajo de un encabezado: el margin-bottom del título manda;
   anulamos el margin-top del contenedor para que no se duplique el espacio. */
.ed-post__body .section-details .title + .text-wrapper,
.ed-post__body .section-details .title + .feature-list { margin-top: 0; }

/* — Listas — */
.ed-post__body .section-details .feature-list { margin-block: 1.4em; }
.ed-post__body .section-details .feature-list li {
  font-size: 1.125rem;
  line-height: 1.7;
  padding-left: 26px;
}
.ed-post__body .section-details .feature-list li + li { margin-top: .45em; }
.ed-post__body .section-details .feature-list li::before { top: .62em; }

/* — Tags de cierre — */
.ed-post__body .section-details .tags-wrapper { margin-top: 2.8em; }

/* — Enlaces de texto — */
.ed-post__body a:not(.ui-btn):not(.ca-casting-link) { color: var(--ed-accent); text-decoration: underline; text-underline-offset: 2px; }
/* — Botones dentro del cuerpo: bloque propio + contraste propio.
   `display:flex` (block-level) + width:fit-content → el botón ocupa su propia
   línea, alineado a la izquierda. La separación superior NO se hace con
   margin-top del botón (una animación del tema lo neutraliza), sino con el
   margin-bottom del párrafo que lo precede (regla `:has` de abajo). */
.ed-post__body .section-details a.ui-btn {
  display: flex;
  width: fit-content;
  color: var(--_solid-fg);
  -webkit-text-fill-color: var(--_solid-fg);
  text-decoration: none;
}
/* Aire entre el texto y el botón/CTA que le sigue. */
.ed-post__body .section-details .text:has(+ a.ui-btn) { margin-bottom: 1.6em; }
.ed-post__body ul, .ed-post__body ol { padding-left: 1.4em; }
.ed-post__body li + li { margin-top: .5em; }
.ed-post__body blockquote {
  border-left: 3px solid var(--ed-accent);
  padding-left: 20px;
  font-style: italic;
  color: var(--ed-muted);
}
.ed-post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.ed-post__body th, .ed-post__body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ed-border);
}
.ed-post__body th { font-weight: 700; background: var(--ed-card); }

/* ── Callout / CTA inline ───────────────────────────────────────────────── */
.ed-callout {
  background: var(--ed-accent-soft);
  border: 1px solid rgba(236,100,38,.20);
  border-radius: var(--ed-radius);
  padding: clamp(24px, 4vw, 32px);
  margin-block: 2.4em;
}
.ed-callout__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.ed-callout__text { color: var(--ed-muted); margin: 0 0 18px; line-height: 1.6; }

/* ── Bio de autor ───────────────────────────────────────────────────────── */
.ed-author {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--ed-card);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  padding: 24px;
  margin-top: 48px;
}
.ed-author__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ed-accent-soft);
}
.ed-author__name { font-weight: 700; margin: 0 0 4px; }
.ed-author__role { font-size: .85rem; color: var(--ed-accent); margin: 0 0 8px; }
.ed-author__bio { font-size: .9rem; color: var(--ed-muted); line-height: 1.6; margin: 0; }

/* ── Suscripción inline + botón compartir en byline ─────────────────────── */
.ed-inline-sub { margin-block: 2.4em; }
.ed-byline__share {
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--ed-border-2);
  color: var(--ed-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--ca-transition-fast);
}
.ed-byline__share:hover { color: var(--ed-accent); border-color: var(--ed-accent); }

/* ── Responsive: apilar grids (mobile = responsive, no UI custom) ───────── */
@media (max-width: 720px) {
  .ed-related-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENIDO DE WORDPRESS (.ca-wp-content) — mapeo al sistema del post
   ────────────────────────────────────────────────────────────────────────
   El HTML que devuelve WP (Gutenberg) trae sus propias clases de bloque
   (wp-block-paragraph, wp-block-heading, wp-block-list, wp-block-button…),
   NO las clases legacy del tema (.text/.title/.ui-btn/.feature-list) que usa
   la página de referencia. Acá replicamos la misma estética tipográfica y de
   botones sobre los elementos crudos de WP. Scope = `.ca-wp-content` dentro de
   `.ed-post__body .section-details` (0,3,x) → gana al tema viejo por
   especificidad y orden, igual que los overrides de arriba.
   ════════════════════════════════════════════════════════════════════════ */
/* — Ritmo vertical entre bloques (WP entrega contenido plano, sin wrappers) — */
.ed-post__body .section-details .ca-wp-content > * + * { margin-top: 1.35em; }

/* — Párrafos — */
.ed-post__body .section-details .ca-wp-content p {
  font-size: 1.125rem;            /* 18px */
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ed-ink);
  margin: 0;
}
/* Lead: primer párrafo, un punto más grande para arrancar la lectura */
.ed-post__body .section-details .ca-wp-content > p:first-child {
  font-size: 1.25rem;             /* 20px */
  line-height: 1.6;
}
/* Más aire entre párrafos consecutivos (lectura larga respira mejor). */
.ed-post__body .section-details .ca-wp-content p + p { margin-top: 1.7em; }

/* — Encabezados (h2/h3/h4) — misma escala que .title de la referencia — */
.ed-post__body .section-details .ca-wp-content h2 {
  font-family: var(--ca-font-display);
  font-size: clamp(1.6rem, 2.6vw, 1.875rem);  /* 25.6–30px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ed-ink);
  margin: 1.9em 0 .5em;
}
.ed-post__body .section-details .ca-wp-content h3 {
  font-family: var(--ca-font-display);
  font-size: clamp(1.25rem, 2vw, 1.375rem);   /* 20–22px */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
  margin: 1.7em 0 .4em;
}
.ed-post__body .section-details .ca-wp-content h4 {
  font-family: var(--ca-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ed-ink);
  margin: 1.5em 0 .35em;
}
/* Primer encabezado del bloque: sin doble aire arriba */
.ed-post__body .section-details .ca-wp-content > :is(h2, h3, h4):first-child { margin-top: 0; }

/* — Listas — bullet redondo como .feature-list de la referencia — */
.ed-post__body .section-details .ca-wp-content ul,
.ed-post__body .section-details .ca-wp-content ol {
  margin: 1.4em 0;
  padding-left: 0;
  list-style: none;
}
.ed-post__body .section-details .ca-wp-content li {
  position: relative;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ed-ink);
  padding-left: 27px;
}
.ed-post__body .section-details .ca-wp-content li + li { margin-top: .45em; }
.ed-post__body .section-details .ca-wp-content ul > li::before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--ed-accent);
  border-radius: 50%;
  left: 10px;
  top: .62em;
}
.ed-post__body .section-details .ca-wp-content ol { counter-reset: ca-wp-ol; }
.ed-post__body .section-details .ca-wp-content ol > li { counter-increment: ca-wp-ol; }
.ed-post__body .section-details .ca-wp-content ol > li::before {
  position: absolute;
  content: counter(ca-wp-ol) ".";
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--ed-accent);
}

/* — Botones de WP (wp-block-button) — estética .ui-btn--primary — */
.ed-post__body .section-details .ca-wp-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.6em 0;
}
.ed-post__body .section-details .ca-wp-content .wp-block-button { margin: 0; }
.ed-post__body .section-details .ca-wp-content .wp-block-button__link,
.ed-post__body .section-details .ca-wp-content .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  font-family: var(--ca-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--ed-radius);
  background: var(--ca-accent);
  color: #fff;
  -webkit-text-fill-color: #fff;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.ed-post__body .section-details .ca-wp-content .wp-block-button__link:hover,
.ed-post__body .section-details .ca-wp-content .wp-element-button:hover { filter: brightness(.94); }
.ed-post__body .section-details .ca-wp-content .wp-block-button__link:active,
.ed-post__body .section-details .ca-wp-content .wp-element-button:active { transform: scale(.97); }

/* — Enlaces de texto — acento + subrayado (botón ya excluido arriba) — */
.ed-post__body .section-details .ca-wp-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--ed-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* — Imágenes y figuras — */
.ed-post__body .section-details .ca-wp-content figure { margin: 1.8em 0; }
.ed-post__body .section-details .ca-wp-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ed-radius);
  display: block;
}
.ed-post__body .section-details .ca-wp-content figcaption {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--ed-muted);
  text-align: center;
}

/* — Cita — */
.ed-post__body .section-details .ca-wp-content blockquote {
  border-left: 3px solid var(--ed-accent);
  padding-left: 20px;
  margin: 1.8em 0;
  font-style: italic;
  color: var(--ed-muted);
}

/* — Tablas — */
.ed-post__body .section-details .ca-wp-content figure.wp-block-table { margin: 1.8em 0; overflow-x: auto; }
.ed-post__body .section-details .ca-wp-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.ed-post__body .section-details .ca-wp-content th,
.ed-post__body .section-details .ca-wp-content td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ed-border);
}
.ed-post__body .section-details .ca-wp-content th { font-weight: 700; background: var(--ed-card); }