/*
  crouton-nav.css — Sistema de navegación compartido
  Crouton Lab · Identidad Visual v3 · 2026
  Incluir en todas las páginas del sitio.
*/

/* ── CURSOR CUSTOM ──────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  body, a, button, [role="button"] { cursor: none; }
}
#crouton-cursor {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(253,85,88,.9);
  transform: translate(-50%,-50%);
  transition: width .25s cubic-bezier(0.16,1,0.3,1),
              height .25s cubic-bezier(0.16,1,0.3,1),
              background .25s;
  mix-blend-mode: difference;
  display: none;
}
#crouton-cursor-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(253,85,88,.45);
  transform: translate(-50%,-50%);
  transition: width .4s cubic-bezier(0.16,1,0.3,1),
              height .4s cubic-bezier(0.16,1,0.3,1),
              border-color .3s;
  display: none;
}
@media (hover:hover) and (pointer:fine) {
  #crouton-cursor, #crouton-cursor-ring { display: block; }
}
body.cn-hover  #crouton-cursor { width: 20px; height: 20px; }
body.cn-hover  #crouton-cursor-ring { width: 56px; height: 56px; border-color: rgba(253,85,88,.7); }
body.cn-cta    #crouton-cursor { width: 48px; height: 48px; background: rgba(253,85,88,.12); }
body.cn-cta    #crouton-cursor-ring { width: 48px; height: 48px; border-width: 2px; border-color: rgba(253,85,88,.9); }

/* ── NAV — base (full-width hero state, JS morphs to pill) ── */
#nav {
  position: fixed;
  top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: flex; align-items: center; gap: 4px;
  padding: 20px 32px;
  width: calc(100vw - 32px);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: none;
  white-space: nowrap;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; justify-content: center;
  width: 47px; height: 47px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,#B42640,#FD5558,#FCD150);
  padding: 4px;
  transition: transform .2s cubic-bezier(0.16,1,0.3,1);
}
.nav-logo:hover { transform: scale(1.08) rotate(-3deg); }
.nav-logo svg { width: 100%; height: 100%; }

/* Right section */
.nav-right {
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; max-width: 700px; margin-left: auto;
}
.nav-links { display: flex; align-items: center; }
.nav-link {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  padding: 8px 18px; border-radius: 8px;
  transition: color .18s, background .18s;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-link.active {
  color: #fff; background: rgba(253,85,88,.12);
}

/* Theme toggle */
.nav-theme-toggle {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); border: none; background: none;
  transition: color .2s, background .2s; cursor: pointer;
}
.nav-theme-toggle:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
.icon-moon { display: block; }
.icon-sun  { display: none; }

/* CTA pill */
.nav-cta {
  background: linear-gradient(135deg,#B42640,#FD5558,#FCD150);
  color: #111111;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 22px; border-radius: 9px;
  position: relative; overflow: hidden;
  transition: opacity .18s, transform .18s;
  display: block; text-decoration: none;
}
.nav-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  background-size: 200% 100%; background-position: -100% 0;
  transition: background-position .5s ease; pointer-events: none;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px); }
.nav-cta:hover::after { background-position: 200% 0; }

/* Mobile */
@media (max-width: 640px) {
  .nav-link { padding: 8px 12px; font-size: 13px; }
  .nav-cta  { padding: 9px 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE GLOBAL — aplica a todas las páginas del sitio
   Estrategia: redefinir --white = #111111 como hace index.html,
   así cualquier color:var(--white) se vuelve oscuro automáticamente.
   Las secciones con gradiente SE EXCLUYEN para conservar su color.
   WCAG AA mínimo 4.5:1 en todos los textos cuerpo.
   ══════════════════════════════════════════════════════════ */

body.light {
  background: #F4F1EC;
  color: #111111;
  --white:  #111111;     /* ← flip global: color:var(--white) → oscuro */
  --border: rgba(0,0,0,.07);
}

/* ── NAV ── */
body.light .nav-link         { color: rgba(17,17,17,.55); }
body.light .nav-link:hover   { color: #111; background: rgba(0,0,0,.06); }
body.light .nav-link.active  { color: #111; background: rgba(180,38,64,.1); }
body.light .nav-theme-toggle { color: rgba(17,17,17,.45); }
body.light .nav-theme-toggle:hover { color: #111; background: rgba(0,0,0,.06); }
body.light .icon-moon { display: none; }
body.light .icon-sun  { display: block; }

/* ── FONDOS de secciones → cream
      EXCLUIR: .page-cta, .final-cta, .svc-ticker, #cta
      para que conserven su gradiente de marca ── */
body.light .page-hero,
body.light .includes-section,
body.light .approach-section,
body.light .esperar-section,
body.light .detalles-section,
body.light .contact-section,
body.light .blog-hero,
body.light .llamada-hero,
body.light #services,
body.light #quote,
body.light #process,
body.light #manifesto,
body.light #clients { background: #F4F1EC; }

body.light .includes-section { background: #EAE7E1; }  /* banda media más contrastada */

/* ── TEXTOS secundarios (todos los rgba(255,255,255,x) → oscuros) ── */
body.light .hero-desc,
body.light .s-title,
body.light .include-title,
body.light .include-desc,
body.light .approach-heading,
body.light .approach-body,
body.light .feat-item,
body.light .faq-title,
body.light .faq-q,
body.light .faq-a,
body.light .step-title,
body.light .step-desc,
body.light .form-title,
body.light .det-left h2,
body.light .info-title,
body.light .info-sub,
body.light .llamada-sub,
body.light .blog-sub,
body.light .quote-text,
body.light .cta-sub,
body.light .cta-note { color: rgba(17,17,17,.72); }

/* Textos muy secundarios (labels, hints, notas) */
body.light .hero-desc,
body.light .include-desc,
body.light .approach-body,
body.light .faq-a,
body.light .step-desc,
body.light .info-sub,
body.light .llamada-sub,
body.light .blog-sub { color: rgba(17,17,17,.58); }

/* ── BOTÓN GHOST ── */
body.light .btn-ghost {
  color: rgba(17,17,17,.62);
  border-color: rgba(17,17,17,.25);
}
body.light .btn-ghost:hover {
  color: #111;
  border-color: rgba(17,17,17,.5);
}

/* ── CARDS → blancas ── */
body.light .include-item {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
  border-left-color: rgba(180,38,64,.4);
}
body.light .approach-card,
body.light .faq-card,
body.light .contact-form-wrap {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
}
body.light .step-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
}
body.light .pill-item {
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.08);
}

/* ── INCLUDE-NUM opacity — más visible en light ── */
body.light .include-num { opacity: .5; }

/* ── STEP-NUM en proceso ── */
body.light .step-num { opacity: .35; }

/* ── INPUTS / FORMULARIO ── */
body.light input,
body.light textarea,
body.light select {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.12);
  color: #111111;
}
body.light input::placeholder,
body.light textarea::placeholder { color: rgba(17,17,17,.32); }
body.light label       { color: rgba(17,17,17,.48); }
body.light .form-sub   { color: rgba(17,17,17,.48); }
body.light .form-note  { color: rgba(17,17,17,.32); }
body.light .success-title { color: #111111; }
body.light .success-sub   { color: rgba(17,17,17,.55); }

/* ── CONTACTO — channels ── */
body.light .channel-item {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
}
body.light .ch-label { color: rgba(17,17,17,.42); }
body.light .ch-value { color: #111111; }
body.light .channel-arrow { color: rgba(17,17,17,.28); }
body.light .channel-item:hover { background: #F9F7F3; border-color: rgba(0,0,0,.12); }

/* ── TICKER (texto negro sobre gradiente — ya correcto) ── */
/* .svc-ticker conserva su fondo de marca */

/* ── MARQUEE de clientes ── */
body.light .client-logo img { filter: brightness(0) opacity(.35); }
body.light .client-logo:hover img { filter: brightness(0) opacity(.7); }
body.light .client-logo img.lg-nacion { filter: brightness(0) opacity(.48); }

/* ── DOTS backgrounds → puntos oscuros sobre crema ── */
body.light .hero-dots-bg {
  background-image: radial-gradient(circle, rgba(0,0,0,.06) 1.5px, transparent 1.5px);
}

/* ── FOOTER ── */
body.light footer {
  background: #EAE7E1;
  border-top-color: rgba(0,0,0,.07);
}
body.light .footer-copy    { color: rgba(17,17,17,.28); }
body.light .footer-links a { color: rgba(17,17,17,.42); }
body.light .footer-links a:hover { color: #111; }

/* ── STATS (index.html) ── */
body.light #stats      { background: #EAE7E1; }
body.light .stat-cell  { border-color: rgba(0,0,0,.07); }
body.light .stat-l     { color: rgba(17,17,17,.38); }

/* ── KARAOKE manifesto (index.html) ── */
body.light .kw     { color: rgba(17,17,17,.12); }
body.light .kw.lit { color: rgba(17,17,17,.88); }

/* ── TAGS de proceso (index.html) ── */
body.light .tag { border-width: 1.5px; }

/* ── LLAMADA — detalles ── */
body.light .step-num  { color: rgba(17,17,17,.55); -webkit-text-fill-color: initial; }
body.light .pill-txt  { color: rgba(17,17,17,.72); }
body.light .btn-outline {
  border-color: rgba(180,38,64,.45);
  color: rgba(17,17,17,.78);
}
body.light .btn-outline:hover {
  background: rgba(180,38,64,.06);
  border-color: #B42640;
  color: #111;
}

/* ── BLOG — chips de tema (mantienen sus colores de acento) ── */
/* Los topic-chips ya tienen color explícito, se mantienen */

/* ── HERO radial glow → versión claro ── */
body.light .page-hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(180,38,64,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(253,85,88,.05) 0%, transparent 55%);
}
body.light .llamada-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 18% 38%, rgba(180,38,64,.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 82% 68%, rgba(253,85,88,.10) 0%, transparent 58%),
    #F4F1EC;
}

/* ── SECCIÓN SERVICIOS (index.html) ── */
body.light #services    { background: #F4F1EC; }
body.light .svc-desc    { color: rgba(17,17,17,.60); }
body.light .svc-features li { color: rgba(17,17,17,.55); }
body.light .svc-divider { background: rgba(0,0,0,.07); }

/* ── PROCESO steps ── */
body.light .step-desc { color: rgba(17,17,17,.58); }

/* ── QUOTE ── */
body.light .quote-text { color: #111111; }

/* ── Elementos específicos que el audit detectó sin cubrir ── */
body.light .include-title  { color: #111111; }
body.light .faq-q          { color: rgba(17,17,17,.80); }
body.light .step-title     { color: #111111; }
body.light .btn-book-note  { color: rgba(17,17,17,.40); }
body.light .channel-arrow  { color: rgba(17,17,17,.28); }
body.light .channel-item:hover .channel-arrow { color: rgba(17,17,17,.55); }
body.light .success-sub    { color: rgba(17,17,17,.58); }

/* ── index.html: el fondo del nav glass lo maneja el JS morph ── */
body.light.index-page #nav {
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 8px 32px rgba(0,0,0,.12),
              inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 -1px 0 rgba(0,0,0,.04);
}