/* ===========================================================
   BAI Marketing — patches.css v1.0.12 (2026-05-14)
   ===========================================================
   A) Product cards — reveal-svg hero-style restored
   B) Trabajos slider — grid 2-row, llena altura, drag visible
   C) Theme toggle dark/light — vars override + button styles
   =========================================================== */


/* ===========================================================
   A) PRODUCT CARDS — reveal hero-style
   =========================================================== */

.prod-card .reveal-svg{
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.prod-card-content{
  -webkit-mask: none !important;
          mask: none !important;
  position: relative !important;
  z-index: 3 !important;
  justify-content: flex-end !important;
  padding: 64px 24px 80px !important;
}
.prod-card-content > *,
.prod-card-head,
.prod-card-name,
.prod-card-tag,
.prod-card-arrow{
  -webkit-mask: none !important;
          mask: none !important;
  position: relative;
  z-index: 3 !important;
}

.prod-card::before{
  display: none !important;
  content: none !important;
}

.prod-card-name,
.prod-card-tag,
.prod-card-arrow,
.prod-card-head{
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 0 8px rgba(0,0,0,0.7) !important;
}

.prod-card{
  position: relative !important;
  min-height: 380px !important;
}

/* 6 pastillas → 3 columnas × 2 filas */
.prod-grid{
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
}
@media (max-width: 780px){
  .prod-grid{ grid-template-columns: 1fr !important; }
}
.prod-card-arrow{
  bottom: 28px !important;
  left:   24px !important;
  z-index: 3 !important;
}

.prod-card .prod-card-matrix{
  display: none !important;
}


/* ===========================================================
   SINGLE PRODUCTO — separar H2 del cuerpo de texto
   .single-content es el wrapper en single-producto.php
   =========================================================== */
.single-content h2{
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 64px 0 24px;
}
.single-content h2:first-child{ margin-top: 0; }
.single-content h3{
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--fg);
  margin: 40px 0 16px;
  letter-spacing: -0.01em;
}
.single-content p{ margin: 0 0 1.4em; }
.single-content p + h2,
.single-content ul + h2,
.single-content ol + h2{ margin-top: 72px; }
.single-content p + h3,
.single-content ul + h3,
.single-content ol + h3{ margin-top: 48px; }
.single-content strong{ color: var(--fg); font-weight: 600; }
.single-content a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.single-content ul, .single-content ol{
  margin: 0 0 1.4em 1.2em;
  padding-left: 8px;
}
.single-content li{ margin-bottom: 10px; padding-left: 4px; }
html[data-theme="light"] .single-content h2,
html[data-theme="light"] .single-content h3{
  color: var(--fg);
}


/* ===========================================================
   BLOG INDEX (page-blog.php) — grid editorial 3 columnas
   =========================================================== */
.bai-blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.bai-blog-card{
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: var(--hairline);
  background: var(--code-bg);
  overflow: hidden;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), border-color 280ms;
}
.bai-blog-card:hover{
  transform: translateY(-6px);
  border-color: var(--accent);
}
.bai-blog-card-img{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.94) brightness(0.85);
  transition: filter 600ms ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.bai-blog-card:hover .bai-blog-card-img{
  filter: saturate(1.05) brightness(0.95);
  transform: scale(1.04);
}
.bai-blog-card-body{
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bai-blog-card-meta{
  display: flex;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.bai-blog-card-meta .cat{ color: var(--accent); }
.bai-blog-card-title{
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 4px 0 0;
}
.bai-blog-card-excerpt{
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 6px 0 12px;
}
.bai-blog-card-arrow{
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.bai-blog-pagination{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 64px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bai-blog-pagination .page-numbers{
  padding: 10px 14px;
  border: var(--hairline);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 200ms, color 200ms;
}
.bai-blog-pagination .page-numbers:hover,
.bai-blog-pagination .page-numbers.current{
  border-color: var(--accent);
  color: var(--accent);
}

/* Light mode: card body usa text-shadow no necesario porque body no es imagen */
html[data-theme="light"] .bai-blog-card{
  background: #FFFFFF;
}
html[data-theme="light"] .bai-blog-card-title{ color: #0A0A0A; }
html[data-theme="light"] .bai-blog-card-excerpt{ color: rgba(10,10,10,0.62); }

@media (max-width:980px){
  .bai-blog-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:640px){
  .bai-blog-grid{ grid-template-columns: 1fr; }
}


/* ===========================================================
   B) TRABAJOS SLIDER — GRID 2-ROW (llena toda la altura)
   El JS §14 pack-ea las cards en orden 1×span2 + 2×span1
   → cada columna queda perfectamente llena (cero huecos).
   =========================================================== */

.trabajos-marquee{
  height: 620px !important;
  min-height: 620px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

.bai-inf-track{
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  height: 100% !important;
  gap: 14px !important;
  width: max-content !important;
  cursor: grab !important;
  user-select: none;
  -webkit-user-select: none;
  padding: 0 14px !important;
  align-items: stretch !important;
  align-content: stretch !important;
}
.bai-inf-track.is-dragging{
  cursor: grabbing !important;
}
.bai-inf-track * {
  -webkit-user-drag: none;
          user-drag: none;
}

/* Cada card rellena su celda del grid (altura por span) */
.bai-inf-track .trabajo-card{
  height: 100% !important;
  width: auto !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  position: relative;
}

/* DE PIE — span 2 filas → altura COMPLETA del slider */
.bai-inf-track .trabajo-card.w-tall  { grid-row: span 2 !important; width: 320px !important; }
.bai-inf-track .trabajo-card.w-small { grid-row: span 2 !important; width: 260px !important; }

/* TUMBADAS — span 1 fila → mitad alto, se apilan de 2 en 2 */
.bai-inf-track .trabajo-card.w-wide  { grid-row: span 1 !important; width: 560px !important; }
.bai-inf-track .trabajo-card.w-mega  { grid-row: span 1 !important; width: 700px !important; }
.bai-inf-track .trabajo-card.w-square{ grid-row: span 1 !important; width: 400px !important; }

/* Cards perfectamente alineadas — sin chaos translateY (las clases
   bai-y-up/down/down-sm las añade el JS pero ya no tienen efecto).
   La variedad visual la dan los tamaños mixtos (de pie vs tumbadas). */

/* Hover lift — solo si NO se está arrastrando */
.bai-inf-track:not(.is-dragging) .trabajo-card:hover{
  transform: translateY(-12px) !important;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}

/* Mobile — vuelve a 1 sola fila + tamaños reducidos */
@media (max-width:780px){
  .trabajos-marquee{
    height: 440px !important;
    min-height: 440px !important;
  }
  .bai-inf-track{
    grid-template-rows: 1fr !important;
  }
  .bai-inf-track .trabajo-card{
    grid-row: span 1 !important;
    transform: none !important;
  }
  .bai-inf-track .trabajo-card.w-tall  { width: 240px !important; }
  .bai-inf-track .trabajo-card.w-small { width: 200px !important; }
  .bai-inf-track .trabajo-card.w-wide  { width: 420px !important; }
  .bai-inf-track .trabajo-card.w-mega  { width: 520px !important; }
  .bai-inf-track .trabajo-card.w-square{ width: 300px !important; }
}


/* ===========================================================
   C) THEME DARK/LIGHT — INVERSIÓN LIMPIA bg ⇆ fg
   - Dark = tema original sin tocar (default cuando no hay data-theme)
   - Light = solo flip: lo negro pasa a blanco, lo cream pasa a negro
   - Acento rojo, --cream, imágenes, brand colors → IDÉNTICOS en ambos
   - Product cards (pastilla negra) → siempre negras en ambos modos
   =========================================================== */

/* Transición suave al togglear */
html, body { transition: background-color 240ms ease, color 240ms ease; }

/* LIGHT MODE — solo invertir las vars base, dejar accent/cream tal cual */
html[data-theme="light"]{
  --bg:        #FFFFFF !important;
  --code-bg:   #F5F5F5 !important;
  --fg:        #0A0A0A !important;
  --fg-dim:    rgba(10,10,10,0.62) !important;
  --fg-mute:   rgba(10,10,10,0.32) !important;
  --ink:       #FFFFFF !important;
  --hairline:  1px solid rgba(10,10,10,0.14) !important;
  /* --cream y --accent NO se tocan — mantienen su valor brand */
}

/* HOME — 6 pastillas en LIGHT MODE: bg-image AI + cards unidas + hairline
   El SVG reveal hero-style sigue funcionando: el rect oscuro semi-transparente
   permite ver la imagen y el cursor metaball revela el código por detrás. */

/* Grid sin gap entre cards */
html[data-theme="light"] .prod-grid{
  gap: 0 !important;
}

/* Cada card con bg-image + hairline separador */
html[data-theme="light"] .prod-grid .prod-card{
  background: #0A0A0A !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-right: 1px solid rgba(242,239,233,0.10) !important;
  border-bottom: 1px solid rgba(242,239,233,0.10) !important;
  color: #F2EFE9 !important;
}
/* Quitar borde derecho en la última columna del grid 3 col */
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(3n){
  border-right: none !important;
}
/* Quitar borde inferior en la última fila */
html[data-theme="light"] .prod-grid .prod-card:nth-last-of-type(-n+3){
  border-bottom: none !important;
}

/* Asignar bg-image AI por card (mismo orden que $bai_sistemas) */
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(1){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bd2934f3c2.85653504.png') !important;
}
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(2){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bf626e7b68.35268253.png') !important;
}
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(3){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bf87d7d652.84724712.png') !important;
}
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(4){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bf9e6ac047.81563248.png') !important;
}
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(5){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bfc5afa797.95753700.png') !important;
}
html[data-theme="light"] .prod-grid .prod-card:nth-of-type(6){
  background-image: url('https://baimarketing.es/wp-content/uploads/2026/05/ai_6a05bfecdea3c0.89597259.png') !important;
}

/* SVG rect en light: dim semitransparente para que la imagen se vea */
html[data-theme="light"] .prod-grid .prod-card .reveal-top-rect{
  fill: #0A0A0A !important;
  opacity: 0.62 !important;
}
/* Texto SIN caja — solo text-shadow sobre la imagen */
html[data-theme="light"] .prod-grid .prod-card .prod-card-name,
html[data-theme="light"] .prod-grid .prod-card .prod-card-tag,
html[data-theme="light"] .prod-grid .prod-card .prod-card-arrow,
html[data-theme="light"] .prod-grid .prod-card .prod-card-head,
html[data-theme="light"] .prod-grid .prod-card .prod-card-cat{
  color: #F2EFE9 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.6) !important;
}
html[data-theme="light"] .prod-grid .prod-card .prod-card-num{
  color: var(--accent) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95) !important;
}
/* Código oculto por defecto en light; fade-in solo en hover */
html[data-theme="light"] .prod-grid .prod-card .reveal-back{
  background: transparent !important;
  color: rgba(242,239,233,0.65) !important;
  opacity: 0 !important;
  transition: opacity 320ms ease;
}
html[data-theme="light"] .prod-grid .prod-card:hover .reveal-back{
  opacity: 1 !important;
}

/* Quitar la franja accent (::after) que aparece a altura del CTA */
html[data-theme="light"] .prod-grid .prod-card::after,
html[data-theme="light"] .prod-grid .prod-card:hover::after{
  display: none !important;
  width: 0 !important;
  background: transparent !important;
  border: none !important;
}


/* MENU — siempre oscuro como el .topbar del hero de la home.
   Sin sombra, sin border-bottom, blur sutil. En ambos modos.
   → Garantiza que el texto cream del menú nunca aterriza sobre fondo cream. */
.site-header,
.topbar{
  border-bottom: none !important;
  box-shadow: none !important;
}
.site-header::after,
.site-header::before,
.topbar::after,
.topbar::before{
  display: none !important;
  background: transparent !important;
}

.site-header{
  background: rgba(10,10,10,0.78) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
.site-header .site-logo,
.site-header .site-nav a{
  color: #F2EFE9 !important;
}
.site-header .site-nav a:hover{
  color: var(--accent) !important;
}
.site-header .site-nav a.cta{
  background: var(--accent) !important;
  color: #F2EFE9 !important;
}

/* Light mode: el header sigue dark (consistencia visual + legibilidad
   independientemente del fondo de la página detrás del scroll) */
html[data-theme="light"] .site-header{
  background: rgba(10,10,10,0.82) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .site-header .site-logo,
html[data-theme="light"] .site-header .site-nav a{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .site-header .site-nav a.cta{
  background: var(--accent) !important;
  color: #F2EFE9 !important;
}

/* LOGOS STRIP — fondo crema fijo: cualquier texto dentro va a tinta.
   Defensa total — incluye section-strip, meta, label, title, etc. */
.logos-strip,
.logos-strip *{
  color: #0A0A0A !important;
}
.logos-strip .accent,
.logos-strip .num,
.logos-strip .logos-title b,
.logos-strip b.accent{
  color: var(--accent) !important;
}
.logos-strip .meta,
.logos-strip .label{
  color: rgba(10,10,10,0.55) !important;
}
.logos-strip .logos-title{
  color: #0A0A0A !important;
}
/* Light mode: idéntica franja cream + ink — sin excepciones */
html[data-theme="light"] .logos-strip,
html[data-theme="light"] .logos-strip *{
  color: #0A0A0A !important;
}
html[data-theme="light"] .logos-strip .accent,
html[data-theme="light"] .logos-strip .logos-title b{
  color: var(--accent) !important;
}

/* PAGE-HERO — gradient SUTIL para que la imagen se vea con fuerza.
   La legibilidad la garantiza el text-shadow agresivo en title/sub, no el overlay. */
.page-hero::before{
  background: linear-gradient(180deg,
    rgba(10,10,10,0.22) 0%,
    rgba(10,10,10,0.10) 35%,
    rgba(10,10,10,0.72) 100%) !important;
}
.post-hero::before{
  background: linear-gradient(180deg,
    rgba(10,10,10,0.18) 0%,
    rgba(10,10,10,0.30) 50%,
    rgba(10,10,10,0.78) 100%) !important;
}
/* Algunos templates traen su propio ::after — neutralizar para evitar doble capa */
.page-hero::after{
  background: transparent !important;
}

/* Text-shadow agresivo: el texto se lee aunque la imagen sea clara */
.page-hero-title,
.page-hero-title b,
.page-hero-title .accent,
.page-hero-sub,
.page-hero-sub b,
.page-hero-eyebrow,
.page-hero-meta,
.page-hero-meta b,
.post-hero .page-hero-title,
.post-hero-sub{
  text-shadow:
    0 2px 14px rgba(0,0,0,0.85),
    0 1px 3px rgba(0,0,0,0.95) !important;
}

/* CAT-STRIP (cabeceras de categoría en /productos/) — toda la tipografía
   sobre la foto pasa a CREAM, sin acentos rojos que no contrastan bien.
   Igual tratamiento de text-shadow que el page-hero. */
.cat-strip .cat-title,
.cat-strip .cat-title b,
.cat-strip .cat-num,
.cat-strip .cat-meta,
.cat-strip .cat-meta b,
.cat-strip-inner .cat-title,
.cat-strip-inner .cat-title b,
.cat-strip-inner .cat-num,
.cat-strip-inner .cat-meta,
.cat-strip-inner .cat-meta b{
  color: #F2EFE9 !important;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.85),
    0 1px 3px rgba(0,0,0,0.95) !important;
}
/* Quitar el background dark backdrop de .cat-num/.cat-meta — el text-shadow
   ya garantiza la legibilidad, sin cajitas que distraen */
.cat-strip .cat-num,
.cat-strip .cat-meta,
.cat-strip-inner .cat-num,
.cat-strip-inner .cat-meta{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Light mode: idéntica regla — cream sobre foto dark */
html[data-theme="light"] .cat-strip .cat-title,
html[data-theme="light"] .cat-strip .cat-title b,
html[data-theme="light"] .cat-strip .cat-num,
html[data-theme="light"] .cat-strip .cat-meta,
html[data-theme="light"] .cat-strip .cat-meta b{
  color: #F2EFE9 !important;
}

/* Section cream (.section--cream) — texto ink siempre, sin excepciones */
.section--cream,
.section--cream *{
  color: #0A0A0A !important;
}
.section--cream .accent,
.section--cream .num{
  color: var(--accent) !important;
}
.section--cream .meta,
.section--cream .label{
  color: rgba(10,10,10,0.55) !important;
}

/* BAI logo cream cuando hay imagen detrás (front-page hero + cualquier
   página con .page-hero o body con bg-image) */
html[data-theme="light"] body:has(.page-hero) .topbar,
html[data-theme="light"] body:has(.page-hero) .topbar a,
html[data-theme="light"] body:has(.page-hero) .topbar b,
html[data-theme="light"] body:has(.page-hero) .topbar span,
html[data-theme="light"] body:has(.hero) .topbar,
html[data-theme="light"] body:has(.hero) .topbar a,
html[data-theme="light"] body:has(.hero) .topbar b,
html[data-theme="light"] body:has(.hero) .topbar span{
  color: #F2EFE9 !important;
}
html[data-theme="light"] body:has(.page-hero) .topbar-l span,
html[data-theme="light"] body:has(.page-hero) .topbar .lang,
html[data-theme="light"] body:has(.hero) .topbar-l span,
html[data-theme="light"] body:has(.hero) .topbar .lang{
  color: rgba(242,239,233,0.65) !important;
}

/* /productos/ y otras páginas con .page-hero (bg-image dark) + texto encima */
/* TEXTO BLANCO sobre imagen — page-hero & post-hero en TODAS las subpáginas */
html[data-theme="light"] .page-hero,
html[data-theme="light"] .page-hero *,
html[data-theme="light"] .page-hero-content,
html[data-theme="light"] .page-hero-content *,
html[data-theme="light"] .post-hero,
html[data-theme="light"] .post-hero *,
html[data-theme="light"] .page-hero-title,
html[data-theme="light"] .page-hero-title b,
html[data-theme="light"] .page-hero-title strong,
html[data-theme="light"] .page-hero-sub,
html[data-theme="light"] .page-hero-sub b,
html[data-theme="light"] .page-hero-meta,
html[data-theme="light"] .page-hero-meta b,
html[data-theme="light"] .page-hero-eyebrow b{
  color: #F2EFE9 !important;
}
/* Acentos (.accent y eyebrow) mantienen el rojo BAI */
html[data-theme="light"] .page-hero .accent,
html[data-theme="light"] .page-hero-title .accent,
html[data-theme="light"] .page-hero-title .accent .dot,
html[data-theme="light"] .page-hero-eyebrow,
html[data-theme="light"] .page-hero-eyebrow .accent,
html[data-theme="light"] .post-hero .accent,
html[data-theme="light"] .page-hero-eyebrow::before{
  color: var(--accent) !important;
}
/* Background del eyebrow line ::before también accent */
html[data-theme="light"] .page-hero-eyebrow::before{
  background: var(--accent) !important;
  color: transparent !important;
}

/* /productos/ — TODA card con bg-image dark → texto cream */
html[data-theme="light"] .prod-track .prod-card,
html[data-theme="light"] .prod-track .prod-card *,
html[data-theme="light"] .prod-track .prod-card-name,
html[data-theme="light"] .prod-track .prod-card-cat,
html[data-theme="light"] .prod-track .prod-card-arrow,
html[data-theme="light"] .prod-track .prod-card-desc,
html[data-theme="light"] .prod-track .prod-card-num{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .prod-track .prod-card-name .accent,
html[data-theme="light"] .prod-track .prod-card-num{
  color: var(--accent) !important;
}
html[data-theme="light"] .prod-track .prod-card-desc{
  color: rgba(242,239,233,0.85) !important;
}

/* Cualquier card .prod-card que tenga .prod-card-img dentro = bg foto dark */
html[data-theme="light"] .prod-card:has(.prod-card-img),
html[data-theme="light"] .prod-card:has(.prod-card-img) *{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .prod-card:has(.prod-card-img) .accent,
html[data-theme="light"] .prod-card:has(.prod-card-img) .prod-card-num{
  color: var(--accent) !important;
}
html[data-theme="light"] .prod-card:has(.prod-card-img) .prod-card-desc{
  color: rgba(242,239,233,0.85) !important;
}

/* .caso-card-img (single trabajo / casos): igual que prod cards */
html[data-theme="light"] .caso-card,
html[data-theme="light"] .caso-card *{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .caso-card .accent{
  color: var(--accent) !important;
}


/* ===========================================================
   D) LOGOS MARQUEE — sección 04b en home
   Logos EN COLOR (no monocromo), MISMO TAMAÑO (h:44px).
   Tipografía Big Shoulders Display para el title (como el resto
   de secciones, no Inter como antes).
   =========================================================== */
.logos-strip{
  padding: 80px 0 !important;
  background: #F2EFE9 !important;  /* stripe cream en ambos modos */
}
.logos-strip .section-strip,
.logos-strip .section-strip span,
.logos-strip .section-strip .label,
.logos-strip .logos-title{
  color: #0A0A0A !important;
}
.logos-strip .section-strip .meta{
  color: rgba(10,10,10,0.55) !important;
}
.logos-strip .section-strip{
  border-bottom: 1px solid rgba(10,10,10,0.14) !important;
}
.logos-strip .logos-title b{
  color: #FF3617 !important;
}
.logos-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  margin: 24px 0 48px;
}
.logos-title{
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.logos-title b{
  color: var(--accent);
  font-weight: 800;
}
.logos-marquee{
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logos-track{
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: bai-logos-flow 80s linear infinite;
  padding: 22px 0;
}
@keyframes bai-logos-flow{
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.logos-track img{
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 280ms ease, transform 280ms ease;
}
.logos-track img:hover{
  opacity: 1;
  transform: scale(1.05);
}
/* Logos que naturalmente se ven pequeños — boost de tamaño */
.logos-track img[alt="Red Bull"],
.logos-track img[alt*="Red"],
.logos-track img[alt="Real Madrid"],
.logos-track img[alt*="Real"]{
  height: 64px !important;
  max-width: 200px !important;
}
@media (max-width: 780px){
  .logos-head{ grid-template-columns: 1fr; }
  .logos-track{ gap: 48px; animation-duration: 60s; }
  .logos-track img{ height: 32px; max-width: 120px; }
}


/* ===========================================================
   E) SINGLE POST — template /blog/{slug} con estilo editorial BAI
   =========================================================== */
.post-hero{
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 480px;
}
.post-hero::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}
.post-hero .page-hero-content{ z-index: 2; }
.post-hero .page-hero-eyebrow{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,239,233,0.7);
  margin-bottom: 16px;
}
.post-hero .page-hero-eyebrow .accent{ color: var(--accent); }
.post-hero-sub{
  font-family: "Inter", sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(242,239,233,0.85);
  margin-top: 20px;
  max-width: 680px;
  line-height: 1.5;
}
/* Light mode: el hero del post sigue siendo dark (tiene imagen) */
html[data-theme="light"] .post-hero,
html[data-theme="light"] .post-hero *{ color: #F2EFE9 !important; }
html[data-theme="light"] .post-hero .page-hero-eyebrow .accent{ color: var(--accent) !important; }

.single-post{ padding: 80px 32px 100px; }
.single-post .section-inner{ max-width: 760px; margin: 0 auto; }

.post-body{
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-dim);
  letter-spacing: -0.003em;
}
.post-body h2{
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 56px 0 18px;
}
.post-body h3{
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--fg);
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.post-body p{ margin-bottom: 1.4em; }
.post-body strong{ color: var(--fg); font-weight: 600; }
.post-body a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity 200ms;
}
.post-body a:hover{ opacity: 0.7; }
.post-body blockquote{
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--fg);
  font-size: 1.05em;
}
.post-body ul, .post-body ol{
  margin: 0 0 1.4em 1.2em;
  padding-left: 8px;
}
.post-body li{ margin-bottom: 10px; padding-left: 4px; }
.post-body code{
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 2px 7px;
  border: var(--hairline);
  border-radius: 0;
}
.post-body pre{
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: var(--code-bg);
  padding: 20px 24px;
  overflow-x: auto;
  border: var(--hairline);
  margin: 28px 0;
  line-height: 1.5;
}
.post-body pre code{ background: transparent; border: none; padding: 0; }
.post-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 36px 0;
  border: var(--hairline);
}
.post-body hr{
  border: none;
  border-top: var(--hairline);
  margin: 48px 0;
}

.post-footer{
  margin-top: 72px;
  padding-top: 32px;
  border-top: var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.post-tags{ display: flex; gap: 16px; flex-wrap: wrap; }
.post-tags .tag{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
}
.post-back{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 200ms;
}
.post-back:hover{ color: var(--accent); }

.post-nav{ padding: 60px 32px; border-top: var(--hairline); }
.post-nav-inner{
  display: flex;
  justify-content: space-between;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
}
.post-nav-link{
  flex: 1;
  text-decoration: none;
  color: var(--fg);
  transition: color 200ms;
}
.post-nav-link.next{ text-align: right; }
.post-nav-link:hover{ color: var(--accent); }
.post-nav-link .mono{
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.post-nav-title{
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

@media (max-width: 780px){
  .single-post{ padding: 48px 20px 64px; }
  .post-body{ font-size: 16px; }
  .post-nav-inner{ flex-direction: column; gap: 32px; }
  .post-nav-link.next{ text-align: left; }
}

/* ===== Light mode — texto CREAM donde el fondo es inherentemente oscuro
   (capa SVG dark del hero, gradient dark sobre fotos del slider) ===== */

/* HERO — la capa SVG cubre el body con #0A0A0A 0.94 opacity, así que
   visualmente sigue siendo oscuro aunque body bg sea blanco */
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-content,
html[data-theme="light"] .hero-content *,
html[data-theme="light"] .hero .scroll-hint{
  color: #F2EFE9 !important;
}
/* Topbar dentro del hero (header con BAI MARKETING + menú + lang + CTA) */
html[data-theme="light"] .hero .topbar,
html[data-theme="light"] .hero .topbar a,
html[data-theme="light"] .hero .topbar b,
html[data-theme="light"] .hero .topbar-l,
html[data-theme="light"] .hero .topbar-c,
html[data-theme="light"] .hero .topbar-r,
html[data-theme="light"] .hero .bottombar,
html[data-theme="light"] .hero .bottombar *{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .hero .topbar-l span,
html[data-theme="light"] .hero .topbar .lang,
html[data-theme="light"] .hero .bottombar{
  color: rgba(242,239,233,0.65) !important;
}
html[data-theme="light"] .hero .topbar a:hover{
  color: var(--accent) !important;
}
html[data-theme="light"] .hero .topbar .cta{
  background: var(--accent) !important;
  color: #F2EFE9 !important;
}
html[data-theme="light"] .hero .topbar .cta:hover{
  background: #F2EFE9 !important;
  color: #0A0A0A !important;
}
/* Hairlines del header/footer dentro del hero también claras */
html[data-theme="light"] .hero .topbar{
  border-bottom: 1px solid rgba(242,239,233,0.14) !important;
}
html[data-theme="light"] .hero .bottombar{
  border-top: 1px solid rgba(242,239,233,0.14) !important;
}
/* El toggle dark/light inyectado en .topbar-r dentro del hero */
html[data-theme="light"] .hero .bai-theme-toggle{
  color: rgba(242,239,233,0.65) !important;
  border-color: rgba(242,239,233,0.30) !important;
}
html[data-theme="light"] .hero .bai-theme-toggle:hover{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* TRABAJOS SLIDER — cards con bg-image dark + gradient overlay rgba 0.5/0.78
   → texto siempre cream encima */
html[data-theme="light"] .trabajo-card,
html[data-theme="light"] .trabajo-card .t-name,
html[data-theme="light"] .trabajo-card .t-tag{
  color: #F2EFE9 !important;
}
html[data-theme="light"] .trabajo-card .t-desc{
  color: rgba(242,239,233,0.85) !important;
}
html[data-theme="light"] .trabajo-card .t-arrow{
  color: rgba(242,239,233,0.55) !important;
}
html[data-theme="light"] .trabajo-card:hover .t-arrow{
  color: var(--accent) !important;
  transform: translate(3px,-3px);
}
html[data-theme="light"] .trabajo-card .t-label{
  color: var(--accent) !important;
}

/* Botón toggle — encaja en la topbar minimalista */
.bai-theme-toggle{
  background: transparent;
  border: 1px solid currentColor;
  color: var(--fg-dim);
  padding: 5px 10px 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  line-height: 1;
}
.bai-theme-toggle:hover{
  color: var(--accent);
  border-color: var(--accent);
}
.bai-theme-toggle .ti-sun,
.bai-theme-toggle .ti-moon{ font-size: 12px; line-height: 1; }