/* ==========================================================
   DDA Color Override — celeste + blanco + amarillo
   Cargado DESPUÉS de los <style> inline de cada HTML via page-dda-raw.php.
   Se puede tunear sin re-importar páginas.
   ========================================================== */

/* Variables globales — cascade sobre :root */
:root, html, body {
  --bg:       #74acdf !important;  /* celeste argentino dominante */
  --cyan:     #74acdf !important;  /* reemplaza cyan por celeste */
  --cyan2:    #a8cce8 !important;  /* celeste claro (highlights) */
  --blue:     #2c5a8a !important;  /* azul más suave */
  --deep:     #1a3a5a !important;  /* profundo pero no negro */
  --gold:     #f5cc3d !important;  /* amarillo más brillante */
  --ar:       #74acdf !important;
  --white:    #ffffff !important;
  --muted:    #6b8ca8 !important;
}

/* Fondo principal — 6m bajo la superficie */
html, body,
.entry-content, .post-content, .page-content,
.site-main, #content, .content-area,
.container, .row, #main, #page,
.site, .site-content, .flatsome-content, .page-wrapper {
  background: #123554 !important;
}

/* Scene — foto underwater POV de la pileta (reemplaza el shader WebGL).
   Empuja la imagen 55px hacia abajo (altura del nav fijo) usando
   content-box + padding-top, así el nav queda con su propio fondo oscuro
   y la pileta arranca visible debajo. */
#scene {
  padding-top: 55px !important;
  background:
    linear-gradient(rgba(8, 22, 40, 0.25), rgba(8, 22, 40, 0.45)),
    url('/wp-content/uploads/2026/06/pool.png')
    center/cover no-repeat #0d1f35 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

/* Navbar — menú izquierda, logo centrado, CTA derecha */
.nav {
  background: rgba(13, 31, 53, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: fixed !important;
  justify-content: space-between !important;
}
.nav-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.nav-links {
  margin: 0 !important;
}
.nav-cta {
  margin: 0 !important;
}
.nav-links a { color: rgba(255, 255, 255, 0.72) !important; }
.nav-links a:hover { color: #f5cc3d !important; }   /* oro en hover */
.nav-cta {
  border-color: rgba(245, 204, 61, 0.55) !important;
  color: #f5cc3d !important;
}
.nav-cta::before {
  background: linear-gradient(90deg, #f5cc3d, #ffd851) !important;
}
.nav-cta:hover { color: #1a3a5a !important; }

/* Cards glass — más blanco, más claras */
.crystal {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 8px 32px rgba(26, 58, 90, 0.25),
    0 2px 8px rgba(245, 204, 61, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(26, 58, 90, 0.12) !important;
}

/* ─────────────────────────────────────────────────────────
   HERO — profundidad SOLO en tarjetas y texto, sin tocar el fondo
   ───────────────────────────────────────────────────────── */

/* Tarjetas dentro del hero: glass más oscuro con sombra profunda
   (el agua animada se sigue viendo libremente alrededor). */
.hero .crystal,
.hero-card,
.hero-card.crystal {
  background: rgba(8, 22, 40, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  box-shadow:
    0 28px 70px rgba(0, 10, 25, 0.55),
    0 6px 18px rgba(0, 8, 18, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30) !important;
}

/* Sombra suave en los textos del hero — no oscurece el fondo,
   solo agrega contraste local detrás de las letras. */
.hero-h1,
.hero-body,
.hero-sub,
.hero-chip,
.hero-eyebrow {
  text-shadow: 0 2px 22px rgba(0, 8, 18, 0.65), 0 1px 2px rgba(0, 8, 18, 0.45);
}

/* Acentos gold más protagonistas */
h1, h2 strong, .hero-title em,
.price-accent, .highlight, .accent-gold {
  color: #f5cc3d !important;
}

/* ─────────────────────────────────────────────────────────
   SECCIONES ALTERNADAS — blanco / celeste para contraste
   ───────────────────────────────────────────────────────── */

/* Las secciones alternas pasan a fondo blanco con texto oscuro */
.sec:not(.sec-alt) {
  background: #ffffff !important;
  color: #1a3a5a !important;
}

/* Dentro de .sec:not(.sec-alt): invertir colores de texto */
.sec:not(.sec-alt),
.sec:not(.sec-alt) p,
.sec:not(.sec-alt) h1, .sec:not(.sec-alt) h2, .sec:not(.sec-alt) h3, .sec:not(.sec-alt) h4,
.sec:not(.sec-alt) li, .sec:not(.sec-alt) span,
.sec:not(.sec-alt) .sec-title, .sec:not(.sec-alt) .sec-sub, .sec:not(.sec-alt) .sec-eyebrow {
  color: #1a3a5a !important;
}

.sec:not(.sec-alt) .muted,
.sec:not(.sec-alt) p.muted,
.sec:not(.sec-alt) .subtle {
  color: #6b8ca8 !important;
}

/* Cards dentro de .sec:not(.sec-alt): fondo blanco con borde sutil celeste en lugar de glass */
.sec:not(.sec-alt) .crystal {
  background: #f8fbff !important;
  border: 1px solid rgba(116, 172, 223, 0.35) !important;
  box-shadow:
    0 4px 20px rgba(26, 58, 90, 0.08),
    0 1px 4px rgba(26, 58, 90, 0.04) !important;
  color: #1a3a5a !important;
}
.sec:not(.sec-alt) .crystal * {
  color: inherit !important;
}

/* Gold accents mantienen el color gold adentro de .sec:not(.sec-alt) */
.sec:not(.sec-alt) [style*="color:var(--gold)"],
.sec:not(.sec-alt) [style*="color: var(--gold)"],
.sec:not(.sec-alt) .gold,
.sec:not(.sec-alt) .accent-gold,
.sec:not(.sec-alt) .price-accent {
  color: #d4a814 !important;   /* gold un poco más oscuro para contraste sobre blanco */
}

/* Links dentro de secciones blancas */
.sec:not(.sec-alt) a {
  color: #2c5a8a !important;
}
.sec:not(.sec-alt) a:hover {
  color: #d4a814 !important;
}

/* ============================================================
   JARVIS OVERRIDES — 2026-06-01 (Santi review)
   Cascades over inline page styles via !important + raised specificity.
   ============================================================ */

/* 1) Tilt-card: en DESKTOP (hover-capable) se mantiene el 3D-tilt + linterna
   (Santi los quiere). El "grow" (scale) se elimina en el JS inline -> scale(1).
   Solo en TOUCH / sin-hover matamos todo: tilt, shine y el hover pegajoso.
   JS sets inline transform; stylesheet !important beats inline non-important. */
@media (hover: none), (pointer: coarse) {
  .tilt-card {
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }
  .tilt-card .card-shine { opacity: 0 !important; }
}

/* 2) Línea de tiempo olímpica: dots celestes por defecto; dorados solo en
   2016, 2021, 2028 (clase .tl-dot-gold, mayor especificidad). Conector dorado. (Santi 2026-06-02) */
.tl-dot {
  border-color: #74acdf !important;
  box-shadow: 0 0 24px rgba(116,172,223,0.55) !important;
}
.tl-dot.tl-dot-gold {
  border-color: #f5cc3d !important;
  box-shadow: 0 0 24px rgba(245,204,61,0.6) !important;
}
.tl-item::before {
  background: linear-gradient(180deg, #f5cc3d, rgba(245,204,61,0.10)) !important;
}

/* 3) Footer v3 garantizado idéntico en TODAS las páginas (navy-black + hairline
   dorado + columnas centradas). Specificity html>body>footer.footer gana. */
html body footer.footer {
  background: linear-gradient(180deg, #0c1018 0%, #04070d 60%, #000000 100%) !important;
  border-top: 1px solid rgba(245,204,61,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 64px 56px 32px !important;
  gap: 32px 64px !important;
  flex-wrap: wrap !important;
}

/* 4) HERO MATCH-HOME (desktop only) — 2026-06-01 (Santi review, rev.2 Vera).
   REV.2: bajar el título de las 4 páginas a la MISMA altura vertical que el hero de la
   HOME ("NADÁ MEJOR"). Antes (rev.1) este bloque las subía a flex-start/190px y quedaban
   más arriba que la home. Ahora replica los valores GANADORES del hero home
   (justify-content:center + padding 210px 56px 40px, del inline RELAYOUT v3). La HOME no
   se toca (su .hero sin guion no matchea [class*="hero-"]); mobile intacto (este bloque
   es desktop-only; mobile sigue en el inline 170px 24px 50px).
   --- comentario original (rev.1) abajo, conservado por contexto ---
   HERO LIFT (desktop only) — 2026-06-01 (Santi review).
   En las 4 hero pages que comparten el mismo template (.hero-spread = El Método,
   Manuales/Pack, Preguntas; .hero-diario = El Diario) el bloque del título estaba
   centrado verticalmente (justify-content:center sobre min-height:100vh). Lo subimos
   al tercio superior: alineamos arriba (flex-start) y damos un padding-top generoso
   para que respire bajo el nav fijo (~73px) sin pegarse a él.

   SOLO DESKTOP/LAPTOP: detrás de @media (min-width: 769px). El breakpoint mobile del
   theme es max-width:768px, así que este complemento exacto deja el layout mobile
   intacto (mobile sigue con justify-content:center + padding 120px/24px/80px).

   ESPECIFICIDAD: cada página inyecta AL FINAL del body un <style> inline
   (`html body section.hero-spread { justify-content:center; padding:210px 56px 40px }`,
   specificity 0,0,4) que gana por orden de cascada a un override de igual specificity.
   Para vencerlo desde esta hoja usamos un selector de atributo `[class*="hero-"]`
   (+0,1,0 -> 0,1,4) que matchea tanto .hero-spread como .hero-diario en las 4 páginas
   sin tocar cada post_content. El padding se redeclara completo (190/56/40) porque el
   inline usa el shorthand `padding`. Lado y base se preservan (56 / 40).

   El inline ganador es `html body section.hero-spread` => specificity (0,1,3). Un
   solo `[class*="hero-"]` da (0,1,3) TAMBIÉN (empata y pierde por orden de cascada).
   Sumamos un segundo selector de atributo `[class]` (inocuo, matchea cualquier elemento
   con class) para llegar a (0,2,3) y ganar de forma determinista sin importar el orden. */
@media (min-width: 769px) {
  html body section[class*="hero-"][class] {
    justify-content: center !important;
    padding: 210px 56px 40px !important;
    /* HERO LIFT-75 — 2026-06-01 (Santi review, rev.6: subir 50px más → -75px total).
       rev.4 usó transform: translateY(-25px) para el lift, pero un transform≠none
       sobre la <section> crea un compositing context que APLANA el shine/brillo del
       título: lava el background-clip:text + gradiente chrome del H1 (Indie lo
       diagnosticó y arregló en local). FIX: el mismo lift de 25px se logra con
       margin-top negativo (NO crea compositing context → el shine queda intacto).
       transform:none quita el translate Y defiende contra cualquier transform
       cacheado. La HOME no matchea este selector → intacta. Mobile intacto (este
       bloque es desktop-only, detrás de @media min-width:769px). Backup del estado
       translateY en _prod-backups/2026-06-01/translateY-to-margintop-fix/
       dda-color-override.PRE-TRANSLATEYFIX.css */
    transform: none !important;
    margin-top: 0px !important;
  }

  /* HERO BG FILL FIX — rev.7 (Santi review 2026-06-01): el lift -75 sobre la <section>
     movía el background y dejaba una franja de la sección siguiente abajo
     (sc#2 Método/Manuales/Preguntas; sc#3 Diario, mayor). FIX desacoplado: la sección
     vuelve a margin-top:0 y LLENA 100vh igual que Sobre mí/Home; el lift de 75px del
     título se hace en el CONTENIDO interno (.hero-spread-stack / .hero-diario .hero-top)
     => no mueve el bg, no rompe el shine (margin-top, no transform). Acerca
     (.hero-spread-about) y Home quedan exentos. */
  html body section.hero-spread:not(.hero-spread-about) .hero-spread-stack,
  html body section.hero-spread:not(.hero-spread-about) .hero-spread-stack-tight,
  html body section.hero-diario .hero-top {
    margin-top: -75px !important;
  }
  /* sc#3: subtítulo de El Diario centrado (la caja era display:block alineada a la izquierda;
     text-align centra el texto, margin:auto centra la caja) */
  html body section.hero-diario .masthead-tagline[class] {
    width: fit-content !important;
    max-width: 580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* ============================================================
   HERO FINAL — 2026-06-02 (Jarvis, Santi review). DESKTOP ONLY.
   Dos cambios pedidos por Santi:
   (1) HOME: agrupar título+subtítulo+CTAs+ticker con distancias PROPORCIONALES
       a la pantalla. Causa raíz del overlap: el ticker (.strip) estaba en
       position:absolute bottom:24px (bloque inline "DDA HERO UNIFIED v1") →
       despegado del grupo centrado → en viewports cortos flotaba (z-index:3)
       SOBRE el título/CTAs. FIX: devolver .strip al flujo como último ítem del
       grupo centrado + pasar el ritmo vertical a clamp()/vh (escala con la
       pantalla). No usa transform sobre la <section> → el shine del H1 intacto.
   (2) MÉTODO/PRECIOS/PREGUNTAS/ACERCA-DE-MI: subir SOLO el título (h1) 100px,
       sin mover subtítulo/CTAs. Se neutraliza el lift previo de -75px de toda
       la pila (vuelve a 0) y el h1 sube con position:relative+top (NO transform
       → no crea compositing context → no aplana el background-clip:text). El
       Diario NO está en el pedido → conserva su -75px intacto.
   Mobile (<769px) intacto en ambos. Backup: _prod-backups/2026-06-02/
   dda-color-override.PRE-HEROGROUP.css
   ============================================================ */
@media (min-width: 769px) {

  /* (1) HOME — grupo proporcional ------------------------------------------ */
  html body section.hero[class] {
    justify-content: center !important;
    gap: 0 !important;
    padding-top: clamp(120px, 15vh, 210px) !important;
    padding-bottom: clamp(24px, 4vh, 40px) !important;
  }
  /* título → subtítulo */
  html body section.hero[class] .hero-h1 {
    margin-bottom: clamp(22px, 4.5vh, 56px) !important;
  }
  /* subtítulo → CTAs */
  html body section.hero[class] .hero-sub {
    margin-bottom: clamp(12px, 2.4vh, 24px) !important;
  }
  /* ticker (carousel) DE VUELTA AL FLUJO como último ítem del grupo, con gap
     proporcional sobre los CTAs. Se anulan los offsets del position:absolute. */
  html body section.hero[class] .strip {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: clamp(28px, 5vh, 64px) auto 0 !important;
  }
  /* matar el +80px del "TICKER LIFT v2" (asumía ticker absoluto pegado al fondo) */
  html body section.hero[class] .ticker {
    margin-bottom: 0 !important;
  }

  /* (2) MÉTODO/PRECIOS/PREGUNTAS/ACERCA — solo el título sube 100px ---------- */
  /* neutralizar el lift de -75px de toda la pila (subtítulo+CTAs vuelven a su
     centro natural). [class] sube la especificidad sobre el :not() previo (0,3,3). */
  html body section.hero-spread[class] .hero-spread-stack[class],
  html body section.hero-spread[class] .hero-spread-stack-tight[class] {
    margin-top: 0 !important;
  }
  /* subir SOLO las palabras del título 100px (incluye .hero-spread-about). */
  html body section.hero-spread .hs-h1[class] {
    position: relative !important;
    top: -100px !important;
  }
}