/* === Hide Uncategorized label on blog posts === */
.taxonomy-category.wp-block-post-terms {
  display: none !important;
}

/* ============================================================
   sebastiansantisteban.com — Optimización móvil
   Autor: Claude · Abril 2026
   ------------------------------------------------------------
   ⚠️  TODO el código vive dentro de @media (max-width: 782px)
       No afecta a la versión de escritorio.
   ------------------------------------------------------------
   Dónde pegarlo (WordPress.com):
     1) Admin → Apariencia → Personalizar → CSS adicional
     2) Pega TODO el contenido de este archivo
     3) Publica
     4) Abre el sitio en tu móvil y refresca

   Si algo se ve mal, basta con borrar este bloque —
   el tema Poesis vuelve al estado actual automáticamente.
   ============================================================ */

@media (max-width: 782px) {

  /* ──────────────────────────────────────────────────────────
     1) NAVEGACIÓN
     Problemas detectados:
       - Hamburguesa 30×48 px → bajo el mínimo de 44×44 px (WCAG 2.5.5)
       - Logo SCS muy pequeño sobre fondos claros (usa mix-blend: difference)
       - Nav solapa el "CINEASTA" del hero en el scroll
     ─────────────────────────────────────────────────────── */

  /* Área de toque mínima de 44×44 en la hamburguesa */
  .v3-nav-hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    right: 12px !important;
  }

  /* Más aire al nav para que no pise el contenido */
  .v3-nav { padding: 12px 16px !important; }

  /* Asegura que la hamburguesa quede a 16 px del borde */
  .v3-nav-hamburger { top: 12px !important; }

  /* ──────────────────────────────────────────────────────────
     2) HERO
     Problemas detectados:
       - Ciudades a 8 px → ilegibles
       - Gran hueco vertical entre watermark y tagline
       - Tagline "CINE INCONFORME…" podría respirar más
       - Etiqueta "CINEASTA" muy pegada al watermark
     ────────────────────────────────────────────────────────── */

  /* Ciudades de giras: subir de 8 px a 11 px */
  .v3-hero-cities {
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    opacity: 0.75 !important;
  }

  /* Tagline principal: un poco más grande y con más line-height */
  .v3-hero-tagline {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }

  /* Etiqueta CINEASTA: más presencia */
  .v3-hero-label {
    font-size: 12px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 14px !important;
  }

  /* Reducir hueco vertical: empuja el bloque de texto un poco arriba */
  .v3-hero-tagline-wrap {
    bottom: 80px !important;   /* el tema suele dejar ~50-60 — se mantiene dentro del hero */
    padding: 0 20px !important;
  }

  /* Watermark SANTISTEBAN centrado y escalado al ancho */
  .v3-hero-watermark {
    font-size: clamp(44px, 15vw, 66px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Indicador SCROLL en vertical: ocultarlo bajo 600 px; en móvil aporta poco y se solapa con las ciudades */
  @media (max-width: 600px) {
    .v3-hero-scroll,
    [class*="v3-hero-scroll"],
    .v3-hero [class*="scroll"] { display: none !important; }
  }

  /* ──────────────────────────────────────────────────────────
     3) STATEMENT / CITA (manifiesto)
     Problema: cita a 27.3 px con line-height 1.08 — muy apretada.
     ────────────────────────────────────────────────────────── */

  .v3-statement { padding: 48px 20px !important; }

  .v3-statement-quote {
    font-size: 22px !important;      /* baja desde 27.3 — gana respiración y legibilidad */
    line-height: 1.35 !important;    /* sube desde 1.08 */
    font-weight: 700 !important;     /* baja desde 800 → menos denso en móvil */
    max-width: 34ch !important;      /* evita líneas de 1-2 palabras */
    margin: 0 auto !important;
  }

  .v3-statement-cta { margin-top: 28px !important; }

  /* ──────────────────────────────────────────────────────────
     4) RUINAS ARTIFICIALES  ⚠️  CRÍTICO
     Problema detectado: los elementos están en position:absolute y
     se solapan en móvil.  El botón "Ver Proyecto →" (y=343-383)
     pisa la línea "Cuando la película… hacer a ti." (y=361+).
     Solución: convertir el layout a flujo normal sólo en móvil.
     ────────────────────────────────────────────────────────── */

  .scs-ruinas-v4 {
    min-height: auto !important;
    padding: 48px 20px 56px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Apaga posicionamiento absoluto en todos los hijos directos de texto */
  .scs-ruinas-v4 .r4-label,
  .scs-ruinas-v4 .r4-title,
  .scs-ruinas-v4 .r4-tagline,
  .scs-ruinas-v4 .r4-cta,
  .scs-ruinas-v4 .r4-endtag,
  .scs-ruinas-v4 > a {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Orden lógico (flexbox) — overrides si el DOM los sirve en otro orden */
  .scs-ruinas-v4 .r4-label   { order: 1; font-size: 11px !important; letter-spacing: 0.2em !important; text-align: left !important; }
  .scs-ruinas-v4 .r4-title   { order: 2; font-size: clamp(40px, 11vw, 56px) !important; line-height: 0.95 !important; margin: 4px 0 0 !important; }
  .scs-ruinas-v4 .r4-tagline { order: 3; font-size: 19px !important; line-height: 1.35 !important; margin: 0 !important; }
  .scs-ruinas-v4 .r4-cta,
  .scs-ruinas-v4 > a         { order: 4; align-self: flex-start; }
  .scs-ruinas-v4 .r4-endtag  { order: 5; font-size: 12px !important; opacity: 0.7 !important; }

  /* CTA "Ver Proyecto →" → tamaño táctil decente */
  .scs-ruinas-v4 > a,
  .scs-ruinas-v4 a[href*="ruinas"] {
    display: inline-block !important;
    min-height: 44px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    letter-spacing: 0.15em !important;
  }

  /* El vídeo/iframe de fondo sigue absolute cubriendo la sección */
  .scs-ruinas-v4 .r4-video-bg {
    position: absolute !important;
    inset: 0 !important;
  }

  /* Asegura que el texto quede por encima del vídeo */
  .scs-ruinas-v4 > *:not(.r4-video-bg):not(.r4-grain):not(.r4-overlay) {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ──────────────────────────────────────────────────────────
     5) MÁS PELÍCULAS (v8-films)
     Sin bugs graves; sólo pulir ritmo vertical y cartas.
     ────────────────────────────────────────────────────────── */

  .v8-films { padding: 48px 20px 64px !important; }

  .v8-films-title {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.05 !important;
    margin-bottom: 32px !important;
  }

  .v8-fc-title { font-size: 22px !important; line-height: 1.2 !important; }
  .v8-fc-sub   { font-size: 13px !important; letter-spacing: 0.1em !important; opacity: 0.7 !important; }

  /* Botón "VER" sobre la miniatura — más legible y clicable */
  .v8-film-card .v8-fc-view,
  .v8-film-card [class*="view"],
  .v8-film-card .hp-view {
    min-width: 88px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
  }

  /* ────────────────────────────────────────────────────────
     6) ESCRITURA (v8-escritura)
     Problema: padding 120/100 → consume demasiada altura en móvil.
     ────────────────────────────────────────────────────────── */

  .v8-escritura { padding: 64px 20px 72px !important; }

  .v8-escritura-title {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.05 !important;
  }

  .v8-escritura-sub { font-size: 12px !important; margin-bottom: 28px !important; }

  .v8-w-title { font-size: 22px !important; }

  /* ──────────────────────────────────────────────────────────
     7) COLABORA (marquesina horizontal)
     Suele ser tira infinita que causa overflow.  Lo contenemos.
     ─────────────────────────────────────────────────────── */

  .scs-colabora { overflow: hidden !important; padding: 32px 0 !important; }
  .scs-colabora-track { white-space: nowrap !important; }

  /* ────────────────────────────────────────────────────────
     8) ABOUT / BLOG HOME
     Problemas menores de ritmo.
     ────────────────────────────────────────────────────────── */

  .scs-about { padding: 56px 20px !important; }
  .scs-blog-home { padding: 48px 20px 64px !important; }

  /* ──────────────────────────────────────────────────────────
     9) LINKS SOCIALES Y PIE (targets muy pequeños)
     IMDb, Vimeo, Instagram, YouTube, Patreon — altura ≈ 17 px.
     Subimos a 44 px sin alterar la maquetación de escritorio.
     ────────────────────────────────────────────────────────── */

  /* Cualquier enlace corto dentro del footer / social block */
  footer a,
  .wp-block-social-links a,
  .scs-about a[href*="imdb"],
  .scs-about a[href*="vimeo"],
  .scs-about a[href*="instagram"],
  .scs-about a[href*="youtube"],
  .scs-about a[href*="patreon"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 4px !important;
  }

  /* ──────────────────────────────────────────────────────────
     10) HIGIENE GENERAL MÓVIL
     ────────────────────────────────────────────────────────── */

  /* Impide scroll horizontal accidental desde iframes o imgs anchas */
  html, body { overflow-x: hidden !important; }

  /* Imagenes que se salen por anchura (v8-fc-img se veía a 403 px) */
  .v8-fc-img,
  img:not([width]) { max-width: 100% !important; height: auto !important; }

  /* Evita fuentes menores a 11 px en todo el sitio móvil */
  small, .is-style-small, [class*="small-text"] {
    font-size: 11px !important;
  }

  /* Selección táctil: dedo acciona bien sobre texto */
  a, button { touch-action: manipulation; }
}


/* ============================================================
   Micro-breakpoint adicional para móviles muy pequeños (≤ 390 px)
   ============================================================ */
@media (max-width: 390px) {
  .v3-hero-watermark { font-size: clamp(36px, 13vw, 48px) !important; }
  .v3-hero-tagline   { font-size: clamp(22px, 7vw, 28px) !important; }
  .v3-statement-quote { font-size: 20px !important; }
  .scs-ruinas-v4 .r4-title { font-size: clamp(36px, 10vw, 48px) !important; }
}

/* ============================================================
   ADDENDUM movil v3 - especificidad escalada html body .scs-v3-page
   ------------------------------------------------------------
   Motivo: el tema Poesis inyecta reglas con especificidad 0,2,0
   en multiples bloques (inline (style) en (head) y en (body), y
   stylesheets externos con @media (max-width: 768px)). Aunque
   mi selector anterior body .scs-ruinas-v4.scs-ruinas-v4 (0,3,1)
   ganaba en papel, algo en el orden/cascada del tema lo vencia.
   Escalamos a html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4
   (0,4,2) para garantizar la prioridad sin tocar nada fuera.

   Todo vive dentro de @media (max-width: 782px).
   ============================================================ */

@media (max-width: 782px) {

  /* -- RUINAS: contenedor en flex column -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 48px 20px 56px !important;
    gap: 16px !important;
  }

  /* -- TODOS los hijos directos de texto/CTA: flujo normal -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-content,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-ai-tagline,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-endtag,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-credit-text,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a#r4-mobile-cta {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* -- Hijos nested dentro de .r4-content (label, title, tagline interno) -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-label,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-title,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-tagline {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* -- r4-content como flex column -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    order: 1 !important;
  }

  /* -- Orden flex de los hijos directos -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-ai-tagline   { order: 2 !important; }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a#r4-mobile-cta  { order: 3 !important; }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-endtag       { order: 4 !important; }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-credit-text  { order: 5 !important; }

  /* -- Tipografia -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-title {
    font-size: clamp(38px, 10.5vw, 52px) !important;
    line-height: 0.98 !important;
    margin: 4px 0 0 !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-tagline {
    font-size: 19px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-ai-tagline {
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.35 !important;
    opacity: 0.85 !important;
    max-width: 42ch !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
    color: rgba(245, 243, 240, 0.75) !important;
    padding: 0 !important;
    font-style: normal !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-label {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-align: left !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-endtag {
    font-size: 12px !important;
    opacity: 0.7 !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-credit-text {
    font-size: 11px !important;
    opacity: 0.6 !important;
  }

  /* -- Boton CTA (inyectado por JS del tema como (a id=r4-mobile-cta)) -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > a#r4-mobile-cta {
    align-self: flex-start !important;
    display: inline-block !important;
    min-height: 44px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    letter-spacing: 0.15em !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    background: transparent !important;
    text-decoration: none !important;
    margin-top: 4px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* -- Video de fondo sigue absolute cubriendo la seccion -- */
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-video-bg {
    position: absolute !important;
    inset: 0 !important;
  }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-grain,
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  /* -- HERO: ciudades y tagline (venciendo al inline del tema) -- */
  body .v3-hero-cities.v3-hero-cities {
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    opacity: 0.75 !important;
  }
  body .v3-hero-tagline.v3-hero-tagline {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }
  body .v3-hero-label.v3-hero-label {
    font-size: 12px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 14px !important;
  }
  body .v3-hero-watermark.v3-hero-watermark {
    font-size: clamp(44px, 15vw, 66px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* -- STATEMENT / CITA -- */
  body .v3-statement-quote.v3-statement-quote {
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    max-width: 34ch !important;
    margin: 0 auto !important;
  }

  /* -- NAV hamburguesa (area tactil 44x44) -- */
  body .v3-nav-hamburger.v3-nav-hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    right: 12px !important;
    top: 12px !important;
  }

  /* -- Mas peliculas: boton VER -- */
  body .v8-film-card .v8-fc-view.v8-fc-view,
  body .v8-film-card [class*="view"] {
    min-width: 88px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
  }

  /* -- Escritura: padding -- */
  body .v8-escritura.v8-escritura { padding: 64px 20px 72px !important; }

  /* -- Higiene: no scroll horizontal -- */
  html, body { overflow-x: hidden !important; }
}

/* Ultra-movil */
@media (max-width: 390px) {
  body .v3-hero-watermark.v3-hero-watermark { font-size: clamp(36px, 13vw, 48px) !important; }
  body .v3-hero-tagline.v3-hero-tagline     { font-size: clamp(22px, 7vw, 28px) !important; }
  body .v3-statement-quote.v3-statement-quote { font-size: 20px !important; }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 .r4-title { font-size: clamp(34px, 9.5vw, 46px) !important; }
  html body .scs-v3-page .scs-ruinas-v4.scs-ruinas-v4 > .r4-ai-tagline { font-size: 14px !important; }
}

/* === V525j: Cineasta gray+relief GLOBAL (all viewports); SANTISTEBAN full bronze on desktop, subtler on mobile === */

/* 1. Global: kill parent filter/text-shadow so Cineasta does NOT inherit bronze halo */
html body #v3HeroWatermark,
html body #v3HeroWatermark.v3-hero-watermark,
html body div#v3HeroWatermark {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
}

/* 2. Global: wrapper span = SANTISTEBAN only; default = full original bronze glow + 1.8px stroke (desktop look preserved) */
html body #v3HeroWatermark #v3HeroBrand,
html body #v3HeroWatermark .v3-hero-brand,
html body #v3HeroBrand,
html body .v3-hero-brand {
  display: inline-block !important;
  -webkit-text-stroke-width: 1.8px !important;
  -webkit-text-stroke-color: rgba(238, 170, 80, 0.55) !important;
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.5))
    drop-shadow(0 0 5px rgba(238, 155, 44, 0.85))
    drop-shadow(0 0 14px rgba(238, 155, 44, 0.45))
    drop-shadow(0 0 28px rgba(232, 160, 48, 0.2)) !important;
  -webkit-filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.5))
    drop-shadow(0 0 5px rgba(238, 155, 44, 0.85))
    drop-shadow(0 0 14px rgba(238, 155, 44, 0.45))
    drop-shadow(0 0 28px rgba(232, 160, 48, 0.2)) !important;
}

/* 3. Global: Cineasta = darker solid gray, no bronze stroke, subtle dark relief */
html body #v3HeroLabel,
html body #v3HeroWatermark #v3HeroLabel,
html body .v3-hero-label,
html body .v3-hero-label span,
html body .v3-hero-label-repositioned,
html body .v3-hero-label-repositioned span,
html body #v3HeroWatermark .v3-hero-label,
html body #v3HeroWatermark .v3-hero-label span {
  color: rgba(150, 150, 150, 1) !important;
  -webkit-text-fill-color: rgba(150, 150, 150, 1) !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 0 4px rgba(0,0,0,0.35) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* 4. MOBILE-ONLY: wrapper thinner stroke + subtler glow, hamburger shrink */
@media (max-width: 782px) {

  html body #v3HeroWatermark #v3HeroBrand,
  html body #v3HeroWatermark .v3-hero-brand,
  html body #v3HeroBrand,
  html body .v3-hero-brand {
    -webkit-text-stroke-width: 0.9px !important;
    filter:
      drop-shadow(0 0 1px rgba(0,0,0,0.35))
      drop-shadow(0 0 3px rgba(238, 155, 44, 0.45))
      drop-shadow(0 0 8px rgba(238, 155, 44, 0.22))
      drop-shadow(0 0 16px rgba(232, 160, 48, 0.1)) !important;
    -webkit-filter:
      drop-shadow(0 0 1px rgba(0,0,0,0.35))
      drop-shadow(0 0 3px rgba(238, 155, 44, 0.45))
      drop-shadow(0 0 8px rgba(238, 155, 44, 0.22))
      drop-shadow(0 0 16px rgba(232, 160, 48, 0.1)) !important;
  }

  html body .v3-nav-hamburger.v3-nav-hamburger span,
  html body .scs-hamburger.scs-hamburger span,
  html body .v3-nav-hamburger span,
  html body .scs-hamburger span {
    width: 18px !important;
    height: 1.2px !important;
    min-height: 1.2px !important;
    max-height: 1.2px !important;
  }

}


/* === V526: Manifiesto page mobile layout fixes === */
@media (max-width: 782px) {
  html body .scs-manifiesto,
  html body .scs-manifiesto .mf-hero,
  html body .scs-manifiesto .mf-hero-overlay,
  html body .scs-manifiesto .mf-hero-img,
  html body .scs-manifiesto .mf-intro,
  html body .scs-manifiesto .mf-intro-text,
  html body .scs-manifiesto .mf-intro-glow,
  html body .scs-manifiesto .mf-break,
  html body .scs-manifiesto .mf-firma,
  html body .scs-manifiesto .mf-block,
  html body .scs-manifiesto .mf-block-header,
  html body .scs-manifiesto .mf-sentencia,
  html body .scs-manifiesto .mf-maximas-wrap,
  html body .scs-manifiesto .mf-maximas {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .scs-manifiesto .mf-intro { padding-left: 24px !important; padding-right: 24px !important; }
  html body .scs-manifiesto .mf-firma { padding-left: 24px !important; padding-right: 24px !important; }
  html body .scs-manifiesto .mf-sentencia,
  html body .scs-manifiesto .mf-maximas-wrap,
  html body .scs-manifiesto .mf-block-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .scs-manifiesto .mf-block-meta { width: 100% !important; max-width: 100% !important; }
  html body .scs-manifiesto .mf-block-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }
  html body .scs-manifiesto .mf-sentencia {
    grid-template-columns: 48px 1fr !important;
    column-gap: 8px !important;
  }
  html body .scs-manifiesto .mf-sentencia-num { font-size: 54px !important; line-height: 1 !important; }
  html body .scs-manifiesto .mf-sentencia-text { font-size: 18px !important; line-height: 1.45 !important; }
  html body .scs-manifiesto .mf-maximas .mf-maxima-num,
  html body .scs-manifiesto .mf-maximas-wrap .mf-maxima-num { flex: 0 0 32px !important; }
  html body .scs-manifiesto .mf-maximas .mf-maxima-text,
  html body .scs-manifiesto .mf-maximas-wrap .mf-maxima-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
  }
  html body .scs-manifiesto .mf-hero h1 { font-size: 44px !important; }
  html body .scs-manifiesto .mf-firma h2,
  html body .scs-manifiesto .mf-firma .mf-firma-title,
  html body .scs-manifiesto .mf-firma-title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  html body .scs-manifiesto { overflow-x: clip !important; }
}
/* === end V526 === */


/* === V527: mobile nav polish — hamburger visibility on light content === */
/* Context: snippet 1578 was softened (nav tint 0.22->0.06, blur 14->4, scrolled 0.62->0.28). */
/* Bars at #f5f3f0 now get lost on light backgrounds. Fix: add darker outline via box-shadow */
/* so bars stay readable on both dark hero and light content.                                */
@media (max-width: 782px) {
  html body .scs-hamburger span,
  html body .scs-inner-nav-wrap .scs-hamburger span {
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55) !important;
  }
}
/* === end V527 === */

/* === V528: fix Manifiesto hero img half-height + further nav softening === */
/* Issue 1: .mf-hero-img renders at natural 500x333 aspect inside 500x500 container */
/*   → bottom 167px exposes the radial overlay gradient as gray. Fix: force height 100% */
/*   with object-fit:cover so the image fills the full hero area on any viewport.      */
/* Issue 2: nav tint rgba(...,0.06) still slightly visible. Reduce to 0.02 + blur 2px. */
/* Also remove the subtle border-bottom so no line cuts between nav and hero.          */

/* Global nav softening (desktop + mobile) */
html body .scs-inner-nav-wrap {
  background: rgba(10,10,10,0.02) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
  backdrop-filter: blur(2px) saturate(1.02) !important;
  border-bottom: none !important;
}

/* Manifiesto hero — mobile fix for cut image */
@media (max-width: 782px) {
  html body .scs-manifiesto .mf-hero-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
/* === end V528 === */
/* === V529: fix Manifiesto first-maxima big numbers (01/07/14/26/36) on mobile === */
/* Grid col is 48px but fs 54px makes digits wrap vertically (0 / 1). */
/* Widen col1 + reduce fs + nowrap + kill break-word. Mobile only. */
@media (max-width: 782px) {
  html body .scs-manifiesto .mf-sentencia {
    grid-template-columns: 60px 1fr !important;
    column-gap: 12px !important;
  }
  html body .scs-manifiesto .mf-sentencia-num {
    font-size: 44px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}
/* === end V529 === */

/* === V530: fix footer social links on mobile (gray patch + circle clipping text) === */
/* .fp-film-footer .fp-cta-social (spec 0,2,0) sets bg rgba(245,243,240,0.015) + border-radius:50% + fixed 46x58. */
/* We need spec ≥ 0,2,1 to win. Using html body .fp-film-footer .fp-cta-social = (0,2,2). */
@media (max-width: 782px) {
  html body .fp-film-footer .fp-cta-social {
    background: transparent !important;
    padding: 18px 0 14px !important;
    gap: 10px 14px !important;
    max-width: 100% !important;
  }
  html body .fp-film-footer .fp-cta-social > .fp-social-link {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }
  /* Hide the stray bullet separators (•) on mobile */
  html body .fp-film-footer .fp-cta-social > span:not(.fp-cta-label) {
    display: none !important;
  }
}
/* === end V530 === */

/* === V531: reduce footer whitespace between socials and bottom nav (mobile) === */
/* .fp-ff-cta has padding-bottom: 100px !important → too much air. Tighten on mobile. */
@media (max-width: 782px) {
  html body .fp-film-footer .fp-ff-cta {
    padding-bottom: 28px !important;
  }
  html body .fp-film-footer .fp-ff-bottom {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  html body .fp-film-footer .fp-ff-nav {
    padding-top: 10px !important;
  }
}
/* === end V531 === */


/* ========= V533: Home v3-nav match Manifiesto (no containing-block trap) ========= */
html body .v3-nav {
  background: rgba(10,10,10,0.02) !important;
  background-color: rgba(10,10,10,0.02) !important;
  border-bottom: none !important;
  position: fixed !important;
  overflow: visible !important;
}
html body .v3-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
  backdrop-filter: blur(2px) saturate(1.02) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
@media (max-width: 782px) {
  html body .v3-nav .v3-nav-hamburger {
    gap: 0 !important;
  }
  html body .v3-nav .v3-nav-hamburger span {
    margin: 2.5px 0 !important;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55) !important;
  }
  html body .v3-nav-links {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(10,10,10,0.97) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 10001 !important;
  }
  html body .v3-nav-links.v3-menu-open ~ .v3-nav-hamburger span,
  html body .v3-nav-links.v3-menu-open + .v3-nav-hamburger span {
    box-shadow: none !important;
  }
}



/* ========= V535: Ruinas Artificiales (inner) mobile fixes ========= */
/* 1) Fix hamburger menu containing-block trap: move backdrop-filter to ::before pseudo so .scs-inner-links.menu-open can position relative to viewport */
html body .scs-inner-nav-wrap {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  position: fixed !important;
  overflow: visible !important;
}
html body .scs-inner-nav-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
  backdrop-filter: blur(2px) saturate(1.02) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
@media (max-width: 782px) {
  /* Ensure .scs-inner-links.menu-open spans full viewport, vertical stack */
  html body .scs-inner-links.menu-open {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    margin: 0 !important; padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background: rgba(10,10,10,0.97) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 10001 !important;
  }
  /* 2) Fix "Tráiler" label vertical stacking: desktop had padding-right:380px for 2-col layout; reset on mobile */
  html body .ra-trailer-label {
    padding-right: 16px !important;
    padding-left: 16px !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  /* 3) Shrink ficha técnica block + enable inner scroll */
  html body .fp-ficha-slot {
    max-height: 320px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  html body .fp-ficha-slot .fp-credits {
    font-size: 14px !important;
  }
}


/* ========= V537: Aire entre trailer y ficha tecnica (mobile) ========= */
@media (max-width: 782px) {
  html body .fp-ficha-slot {
    margin-top: 28px !important;
    margin-bottom: 24px !important;
  }
  html body .ra-trailer-label {
    margin-bottom: 4px !important;
  }
}

/* ========= V538: La Alegre Levedad mobile layout (also applies to other film pages) ========= */
@media (max-width: 782px) {
  /* 1) Sinopsis -> Trailer: tighten padding of fp-info, fp-trailer-row, and trailer label H2 */
  html body .fp-info {
    padding-bottom: 16px !important;
  }
  html body .fp-trailer-row {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }
  html body .fp-trailer-main > h2 {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  /* 2) Ficha tecnica: match Ruinas sizes (pT=0, pB=12) so content feels less crowded */
  html body .fp-ficha-slot {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }

  /* 3) Nota del director -> Documental completo: reduce gap and shrink H2 */
  html body .fp-text-section {
    padding-bottom: 18px !important;
  }
  html body .fp-video-section > h2 {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  /* 4) Stills -> Festivales: reduce stills section bottom padding and laurels top padding */
  html body #fp-stills-section {
    padding-bottom: 40px !important;
  }
  html body .fp-laurels {
    padding-top: 20px !important;
  }

  /* 5) Laurels cards: border-box so rendered width matches the 194px grid tracks (fixes right-shift) */
  html body .fp-laurel-card {
    box-sizing: border-box !important;
  }
}

/* ========= V539: Subtle golden glow on footer social links ========= */
html body .fp-social-link,
html body .fp-cta-social a,
html body .scs-inner-footer-social a {
  text-shadow: 0 0 8px rgba(238, 170, 80, 0.22), 0 0 14px rgba(238, 170, 80, 0.10) !important;
  transition: text-shadow 0.35s ease, color 0.35s ease !important;
}
html body .fp-social-link:hover,
html body .fp-cta-social a:hover,
html body .scs-inner-footer-social a:hover {
  text-shadow: 0 0 10px rgba(238, 170, 80, 0.55), 0 0 20px rgba(238, 170, 80, 0.28) !important;
  color: rgba(245, 220, 170, 0.95) !important;
}


/* V538e: La Alegre ficha fields spread a bit more on mobile */
@media (max-width: 782px) {
  html body.page-id-965 .fp-credits-grid {
    row-gap: 30px !important;
  }
}


/* V540: Finalizado badge centered from first paint (no flicker) */
@media (max-width: 782px) {
  html body .fp-poster-wrap {
    text-align: center !important;
  }
  html body .fp-info-status {
    display: inline-block !important;
    margin-top: 12px !important;
  }
}

/* V541b: Footer socials stacked vertical — Instagram, Facebook, FilmFreeway, IMDb, Vimeo */
html body .fp-cta-social {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
html body .fp-cta-social > span:not(.fp-cta-label) {
  display: none !important;
}
html body .fp-cta-social > :nth-child(9) { order: 1 !important; } /* FilmFreeway */
html body .fp-cta-social > :nth-child(8) { order: 2 !important; } /* IMDb */
html body .fp-cta-social > :nth-child(6) { order: 3 !important; } /* Vimeo */


/* V542: Barnaverso stills 2 columns on mobile */
@media (max-width: 782px) {
  html body.page-id-484 #eb-stills-section > div {
    column-count: 2 !important;
    column-gap: 8px !important;
    padding: 0 16px !important;
  }
}


/* V543: Barnaverso hero image — shift focus to left edge */
html body.page-id-484 .fp-hero-img {
  object-position: 0% 30% !important;
}


/* ============================= V544 — 2026-04-17 =============================
   Bel (page-id-423): stills 2-col mobile + defensive laurels centering
   ============================================================================= */
@media (max-width: 782px) {
  html body.page-id-423 #bel-stills > div {
    columns: 2 !important;
    column-count: 2 !important;
    column-gap: 12px !important;
    padding: 0 16px !important;
  }
}
html body.page-id-423 .fp-laurels {
  margin-left: auto !important;
  margin-right: auto !important;
}
html body.page-id-423 .fp-laurels-grid {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-items: center !important;
}

/* ============================= V545 — 2026-04-17 =============================
   Imaginarios (page-id-997): Nota del director overflow fix
   ============================================================================= */
html body.page-id-997 .fp-text-section {
  box-sizing: border-box !important;
  margin-right: 0 !important;
}

/* ============================= V546 — 2026-04-17 =============================
   Home — LVEPO dev badge: smaller + right-aligned so it doesn't overlap the year
   ============================================================================= */
.v8-dev-badge {
  font-size: 10px !important;
  padding: 4px 10px !important;
  left: auto !important;
  right: 12px !important;
  top: 12px !important;
  letter-spacing: 0.04em !important;
}

/* ============================= V547 — 2026-04-17 =============================
   Books (El Maluverso + MADLL): center Goodreads review stars
   ============================================================================= */
.fp-book-gr-stars {
  justify-content: center !important;
}


/* ============================= V548 — 2026-04-17 =============================
   Home footer social links: 2-col grid on mobile (tighter layout)
   Was: stacked 6 links @26px font, ~385px total — felt dispersed
   Now: 2-col grid @18px font, ~185px total
   ============================================================================= */
@media (max-width: 782px) {
  .scs-footer-social-links {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 6px 16px !important;
  }
  .scs-footer-social-links a {
    font-size: 18px !important;
    line-height: 1.4 !important;
    padding: 6px 4px !important;
    min-height: 36px !important;
  }
}


/* ============================= V548b — 2026-04-17 =============================
   Footer socials: override stale font-size: 26px / gap: 14px from earlier version
   Higher specificity so it wins against existing @media rules
   ============================================================================= */
@media (max-width: 782px) {
  html body .scs-footer-social-links {
    gap: 6px 16px !important;
  }
  html body .scs-footer-social-links a {
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
    padding: 6px 4px !important;
    min-height: 36px !important;
  }
}


/* ============================= V549 — 2026-04-17 =============================
   Home #sobre-mi section: mobile sizing pass (was 1720px tall, felt dispersed)
   - Label "SOBRE MÍ" 64 → 40px
   - Name 50 → 30px
   - Bio paragraphs 20.8/bold → 16.5/medium, tighter line-height
   - Content padding 40 → 24px, gap 24 → 14px
   - Section padding 56/20 → 32/16
   Result: section ~1344px (-22%)
   ============================================================================= */
@media (max-width: 782px) {
  html body #sobre-mi {
    padding: 32px 16px !important;
  }
  html body #sobre-mi .scs-about-content {
    padding: 24px 20px !important;
    gap: 14px !important;
  }
  html body #sobre-mi .scs-about-label {
    font-size: 40px !important;
    line-height: 1 !important;
    letter-spacing: -1.2px !important;
  }
  html body #sobre-mi .scs-about-name {
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.6px !important;
  }
  html body #sobre-mi .scs-about-bio {
    margin: 16px 0 20px !important;
  }
  html body #sobre-mi .scs-about-bio p {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin: 0 0 12px !important;
  }
  html body #sobre-mi .scs-about-links {
    gap: 12px !important;
  }
  html body #sobre-mi .scs-about-links a {
    padding: 8px 4px !important;
  }
}

/* ============================= V550 — 2026-04-17 =============================
   Home LVEPO .v8-dev-card — fix overflow + feature visual weight on mobile
   BUG: .v8-dev-card had width 497.773px (from aspect-ratio 21/9 + min-height 340)
        which overflowed its 420px parent by ~78px and caused 38px of horizontal
        body overflow on phones. That horizontal scroll made #sobre-mi text and
        other sections appear to shift/overflow right on real devices.
   FIX: width 100%, aspect-ratio unset, explicit height 440px (taller, cinematic).
   BUFF: golden ring/shadow, bigger name (25 → 34), refined gradient + badge,
         gold CTA — signals "featured project" vs the other film cards.
   Padding on .v8-dev-section removed so card spans full 420px width.
   ============================================================================= */
@media (max-width: 782px) {
  html body .v8-dev-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: unset !important;
    min-height: 0 !important;
    height: 440px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35),
                0 18px 48px -12px rgba(212, 175, 55, 0.25),
                0 10px 30px -10px rgba(0, 0, 0, 0.6) !important;
  }
  html body .v8-dev-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 48px !important;
    margin-bottom: 32px !important;
  }
  html body .v8-dev-overlay {
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.15) 80%,
      rgba(0, 0, 0, 0.05) 100%) !important;
  }
  html body .v8-dev-content {
    padding: 24px 20px !important;
  }
  html body .v8-dev-badge {
    padding: 5px 12px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    background: rgba(212, 175, 55, 0.22) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    color: #f5d98a !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  html body .v8-dev-year {
    font-size: 13px !important;
    letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }
  html body .v8-dev-name {
    font-size: 34px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.8px !important;
    margin: 6px 0 10px !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55) !important;
  }
  html body .v8-dev-sub {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 0 14px !important;
  }
  html body .v8-dev-cta {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #f5d98a !important;
  }
}


/* ============================= V551 — 2026-04-17 =============================
   Home Sobre mí (mobile) — photo full-bleed + defensive text-wrap against narrow
   viewports where the bio was spilling right on real devices.
   Footer (mobile) — thin bronze strokes to match Hero SANTISTEBAN (0.9px);
   fade the 2026 copyright line so it sits back as a watermark.
   ============================================================================= */
@media (max-width: 782px) {
  /* Sobre mí photo: extend beyond section's 16px horizontal padding */
  html body #sobre-mi .scs-about-photo {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    box-sizing: border-box !important;
  }
  html body #sobre-mi .scs-about-photo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  /* Defensive: long words/names must never overflow the section on narrow devices */
  html body #sobre-mi .scs-about-bio p,
  html body #sobre-mi .scs-about-name {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

  /* Footer: match Hero SANTISTEBAN stroke width (0.9px) on bronze-outline words */
  html body footer.scs-footer em,
  html body footer.scs-footer .scs-gold {
    -webkit-text-stroke-width: 0.9px !important;
  }
  /* Footer: fade © 2026 line so it reads as watermark, not body copy */
  html body footer.scs-footer .scs-footer-copy {
    opacity: 0.4 !important;
  }
}


/* ============================= V552 — 2026-04-17 =============================
   Home Sobre mí — ROOT CAUSE FIX for bio overflow on real devices.
   .scs-about-content is display:flex with min-width:auto, so its intrinsic min
   width = longest unshrinkable child. The role line "CINEASTA · ESCRITOR ·
   INVESTIGADOR" at letter-spacing 1.92px computes to ~375px wide — on any
   viewport under that, the whole flex container refuses to shrink and spills
   right. Force min-width:0 on the flex container and its children so they can
   actually shrink, and relax the role line's white-space so it wraps.
   ============================================================================= */
@media (max-width: 782px) {
  html body #sobre-mi .scs-about-content {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }
  html body #sobre-mi .scs-about-content > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body #sobre-mi .scs-about-role,
  html body #sobre-mi .scs-about-label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  /* Tighten role letter-spacing so the line is shorter in intrinsic terms */
  html body #sobre-mi .scs-about-role {
    letter-spacing: 1px !important;
  }
  /* Entire subtree cannot force parent wider */
  html body #sobre-mi,
  html body #sobre-mi * {
    min-width: 0 !important;
  }
}


/* ============================= V553 — 2026-04-17 =============================
   Home Sobre mí (mobile) — space out the social links under the bio.
   Root cause: V552's min-width:0 on every #sobre-mi descendant collapsed the
   .scs-about-links a boxes below their text width. Combined with uppercase +
   letter-spacing 2.08px, the last three links (INSTAGRAM/YOUTUBE/PATREON) ran
   into each other visually.
   Fix: restore min-width:max-content + white-space:nowrap on the anchor, allow
   the row to wrap onto two lines with generous gap, trim letter-spacing.
   ============================================================================= */
@media (max-width: 782px) {
  html body #sobre-mi .scs-about-links {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 14px !important;
    column-gap: 18px !important;
    gap: 14px 18px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  html body #sobre-mi .scs-about-links > a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    letter-spacing: 1.6px !important;
    padding: 4px 0 !important;
    overflow: visible !important;
  }
}


/* ============================= V554 — 2026-04-17 =============================
   Footer (home) — dial the bronze outline stroke even thinner (0.9 -> 0.5),
   for a more subtle hollow feel on "postexistentialism." and "cine.".
   ============================================================================= */
@media (max-width: 782px) {
  html body footer.scs-footer em,
  html body footer.scs-footer .scs-gold {
    -webkit-text-stroke-width: 0.5px !important;
  }
}


/* ============================= V556 — 2026-04-17 =============================
   EN Home mobile (page-id 1018) — tagline-wrap was using the default
   top: 42% rule because the existing bottom-anchoring rule for body.home
   does not match the EN home (a separate page). That made
   "NONCONFORMIST CINEMA FOR THE END OF TIMES." overlap FILMMAKER.
   Fix: replicate the ES home bottom-anchor behavior on the EN home.
   ============================================================================= */
@media (max-width: 782px) {
  html body.page-id-1018 .v3-hero-tagline-wrap {
    top: auto !important;
    bottom: 12px !important;
  }
}


/* ============================= V557 — 2026-04-17 =============================
   EN Home mobile (page-id 1018) — fine-tune tagline-wrap position.
   V556 anchored the block too tightly to the bottom, causing the
   tagline H1 to touch the cities P (gap = 0px). V557 raises the whole
   wrap a touch and adds internal breathing room between H1 and P.
   ============================================================================= */
@media (max-width: 782px) {
  html body.page-id-1018 .v3-hero-tagline-wrap {
    bottom: 32px !important;
    row-gap: 14px !important;
    gap: 14px !important;
  }
}


/* ============================= V558 — 2026-04-17 =============================
   Hamburger must sit above the nav overlay so that the morphed X
   (hamburger → X when .menu-is-open) is visible and tappable. The
   theme gives this z-index 10003 on body.home (ES home) but only 102
   elsewhere (EN home / interior pages), so the overlay at z-index
   10001 covers the X. This rule lifts the hamburger above the overlay
   universally on mobile.
   ============================================================================= */
@media (max-width: 782px) {
  html body .v3-nav-hamburger,
  html body.menu-is-open .v3-nav-hamburger {
    z-index: 10003 !important;
  }
}


/* === scs-en-reveal-override: keep v8-reveal sections fully visible on EN ===
   Previous FOUC guard caused a full black-screen regression because
   !important on opacity prevents animations from lifting it (CSS spec:
   keyframes ignore !important). Reverted to just disabling the reveal
   fade-in so the site behaves like before, then we can iterate. */

html[lang^="en"] .v8-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}