/* ===========================================================
   KeyvanTI — Tema WordPress · CSS Principal
   Basado en el Brandbook v1.1 · Mobile First · Responsive
=========================================================== */

:root {
  --ink: #0b0d12;
  --ink-2: #11141c;
  --surface: #161a24;
  --surface-2: #1e2330;
  --line: #2a3040;
  --fog: #8a93a6;
  --mist: #c2c9d6;
  --snow: #f4f6fa;
  --accent: #5468ff;
  --accent-2: #38e1d6;
  --accent-soft: #7c8bff;
  --grad: linear-gradient(135deg, #5468ff 0%, #38e1d6 100%);
  --grad-soft: linear-gradient(135deg, rgba(84,104,255,.16), rgba(56,225,214,.10));
  --radius: 18px;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--ink);
  color: var(--snow);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, .display {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 800;
}
.mono { font-family: "JetBrains Mono", monospace; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; width: 100%; }

/* ATMOSFERA */
.glow { position: fixed; border-radius: 50%; filter: blur(140px); opacity: .5; z-index: 0; pointer-events: none; }
.g1 { width: 600px; height: 600px; background: #5468ff; top: -200px; right: -150px; opacity: .18; }
.g2 { width: 500px; height: 500px; background: #38e1d6; bottom: 10%; left: -200px; opacity: .10; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer, section { position: relative; z-index: 2; }

/* NAVEGACION */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(11,13,18,.85);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease, padding .35s ease;
  padding: 12px 0;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(11,13,18,1);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; transition: padding .35s ease; }
.brand { display: flex; align-items: center; gap: 12px; transition: gap .35s ease; max-height: 72px; overflow: hidden; }
.brand img,
.brand .brand-logo { max-height: 72px !important; max-width: 120px !important; width: auto !important; height: 72px !important; transition: max-height .35s ease, transform .35s ease, height .35s ease; object-fit: contain; object-position: left center; display: block; }
.nav.scrolled .brand img,
.nav.scrolled .brand .brand-logo { max-height: 35px !important; height: 35px !important; transform: scale(0.95); }
.nav.scrolled .brand { max-height: 35px; }
.brand-mark { transition: transform .35s ease; }
.nav.scrolled .brand-mark { transform: scale(0.85); }
.brand-mark { width: 34px; height: 34px; background: var(--grad); border-radius: 9px; position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 6px; background: var(--ink); border-radius: 4px; }
.brand-mark::before { content: ""; position: absolute; width: 6px; height: 14px; background: var(--accent-2); left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; border-radius: 1px; }
.wordmark { font-family: "Schibsted Grotesk"; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.wordmark .ti { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--mist); font-weight: 500; transition: color .2s; position: relative; padding: 6px 10px; }
.nav-links a:hover { color: var(--snow); }

/* CSS-only active state: body class triggers the matching nav link
   Slugs match the actual WP page slugs: inicio, soluciones, como-trabajamos,
   casos, recursos, nosotros, contacto, diagnostico-gratuito */
body.page-slug-inicio .nav-links a[data-nav="home"],
body.page-slug-soluciones .nav-links a[data-nav="soluciones"],
body.page-slug-como-trabajamos .nav-links a[data-nav="como-trabajamos"],
body.page-slug-casos .nav-links a[data-nav="casos"],
body.page-slug-recursos .nav-links a[data-nav="recursos"],
body.page-slug-preguntas-frecuentes .nav-links a[data-nav="preguntas-frecuentes"],
body.page-slug-nosotros .nav-links a[data-nav="nosotros"],
body.page-slug-contacto .nav-links a[data-nav="contacto"] {
    color: var(--accent-2) !important;
    font-weight: 700 !important;
}
body.page-slug-inicio .nav-links a[data-nav="home"]::after,
body.page-slug-soluciones .nav-links a[data-nav="soluciones"]::after,
body.page-slug-como-trabajamos .nav-links a[data-nav="como-trabajamos"]::after,
body.page-slug-casos .nav-links a[data-nav="casos"]::after,
body.page-slug-recursos .nav-links a[data-nav="recursos"]::after,
body.page-slug-preguntas-frecuentes .nav-links a[data-nav="preguntas-frecuentes"]::after,
body.page-slug-nosotros .nav-links a[data-nav="nosotros"]::after,
body.page-slug-contacto .nav-links a[data-nav="contacto"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -4px;
    height: 2px;
    background: var(--accent-2);
    border-radius: 2px;
}

/* Diagnostico CTA when active: keep its solid color, no underline, no background */
body.page-slug-diagnostico-gratuito .nav-links a.nav-cta {
    background: var(--accent-2) !important;
    color: var(--ink) !important;
    box-shadow: 0 4px 16px rgba(56, 225, 214, 0.4);
    font-weight: 700 !important;
}
body.page-slug-diagnostico-gratuito .nav-links a.nav-cta::after { display: none; }
.nav-cta { background: var(--grad); color: var(--ink) !important; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px; transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease, background .35s ease, padding .25s ease; }
.nav-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(84, 104, 255, 0.5); }
.nav-cta:active { transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 10px; color: var(--snow); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.nav-toggle svg { width: 18px; height: 18px; }

/* BOTONES */
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: var(--ink);
  font-weight: 700; padding: 14px 26px; border-radius: 999px;
  font-size: 15px; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 10px 30px -10px rgba(84,104,255,.55); border: none; cursor: pointer;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(84,104,255,.7); }
.cta.ghost { background: transparent; border: 1px solid var(--line); color: var(--snow); box-shadow: none; }
.cta.ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Variante del ghost para fondos claros (ej: hero del home con #fdfefe).
   Texto oscuro + borde gris medio para que sea legible sin perder la
   consistencia con el resto de la paleta. */
.cta.cta-ghost-dark {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 25%, var(--line));
  background: color-mix(in srgb, var(--snow) 50%, transparent);
}
.cta.cta-ghost-dark:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--snow) 80%, transparent);
  transform: translateY(-2px);
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cta-row.center { justify-content: center; }

/* SECTION SHELL */
.sec { padding: 120px 0; border-top: 1px solid var(--line); }
.sec.no-border { border-top: none; }
.sec.alt { background: var(--ink-2); }
.sec.alt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.sec.alt { background: var(--ink-2); }
.eyebrow { font-family: "JetBrains Mono"; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 22px; display: inline-block; }
.sec-lead { color: var(--mist); font-size: 17px; font-weight: 300; max-width: 680px; margin-bottom: 40px; }
.sec-title { font-size: clamp(34px,5vw,58px); font-weight: 800; margin-bottom: 18px; max-width: 820px; }

/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 80px; }
.hero.short { padding: 160px 0 60px; min-height: auto; }
.hero h1 { font-size: clamp(36px,8vw,104px); font-weight: 800; max-width: 18ch; }
.hero h1 .ti { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-tag { font-size: clamp(16px,1.7vw,21px); color: var(--mist); font-weight: 300; margin-top: 28px; max-width: 640px; }

/* HERO BANNER (banner como contenido principal del hero) */
/* Reemplaza el hero tradicional con una imagen de banner.
   El eyebrow y H1 quedan como sr-only para SEO/accesibilidad. */
.hero--banner {
  min-height: 0;        /* que el alto lo dicte la imagen */
  padding: 100px 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--banner.hero--light { background-color: #fdfefe; } /* fondo claro opcional */
.hero--banner .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-banner {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  border-radius: 16px;
  margin: 0 auto;
}
.hero--banner .cta-row {
  justify-content: center;
  margin-top: 36px;
}

/* Visually hidden (para SEO/accesibilidad) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-meta { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; flex-wrap: wrap; }
.hero-meta div { border-left: 2px solid var(--accent); padding-left: 16px; }
.hero-meta .k { font-family: "JetBrains Mono"; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }
.hero-meta .v { font-family: "Schibsted Grotesk"; font-size: 17px; font-weight: 600; margin-top: 4px; }

/* GRIDS */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* CARDS */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .35s, border-color .35s; }
.card:hover { border-color: var(--accent); transform: translateY(-4px); }
.card .label { font-family: "JetBrains Mono"; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px; }
.card h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.card p { color: var(--mist); font-size: 15.5px; font-weight: 300; }
.card .icon { width: 42px; height: 42px; border-radius: 10px; background: var(--grad-soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 20px; }
.full { grid-column: 1 / -1; }

/* PULL QUOTE */
.pull-quote { background: var(--grad-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 40px; font-family: "Schibsted Grotesk"; font-size: clamp(22px,2.4vw,30px); font-weight: 600; line-height: 1.3; color: var(--snow); margin: 40px 0; display: block; }
.pull-quote::before { content: "\201C"; font-size: 60px; line-height: 0; display: block; color: var(--accent-2); margin-bottom: 24px; }

/* ECOSISTEMA GRID */
.eco-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.eco-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.eco-card .num { font-family: "JetBrains Mono"; font-size: 12px; color: var(--accent-2); letter-spacing: .2em; display: block; margin-bottom: 8px; }
.eco-card h4 { font-size: 22px; margin: 10px 0; font-weight: 800; }
.eco-card p { color: var(--mist); font-weight: 300; font-size: 14.5px; }

/* eco-step variant with arrow (matching lovable) */
.eco-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.eco-step .num { font-family: "JetBrains Mono"; font-size: 12px; color: var(--accent-2); letter-spacing: .2em; display: block; margin-bottom: 8px; }
.eco-step h4 { font-size: 22px; margin: 10px 0; font-weight: 800; }
.eco-step p { color: var(--mist); font-weight: 300; font-size: 14.5px; }
.eco-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 22px; z-index: 3; }

/* SERVICIOS GRID */
.serv-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
.serv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .2s, transform .2s; }
.serv:hover { border-color: var(--accent); transform: translateY(-4px); }
.serv h3 { font-size: 19px; margin-bottom: 10px; }
.serv p { color: var(--mist); font-weight: 300; font-size: 14.5px; }

/* WHY GRID */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
.why-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .2s, transform .2s; }
.why-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.why-card .ico { font-size: 28px; display: block; margin-bottom: 12px; }
.why-card h4 { font-size: 18px; margin-bottom: 8px; }
.why-card p { color: var(--mist); font-weight: 300; font-size: 14.5px; }

/* PROCESS */
.process { display: grid; gap: 20px; }
.process-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); align-items: start; }
.process-row .step-n { font-family: "Schibsted Grotesk"; font-weight: 800; font-size: 36px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.process-row h3 { font-size: 20px; margin-bottom: 10px; }
.process-row p { color: var(--mist); font-weight: 300; font-size: 15px; }
.process-row ul { list-style: none; padding: 0; grid-column: 1 / -1; }
.process-row ul li { padding: 8px 0 8px 22px; position: relative; font-size: 14.5px; color: var(--mist); font-weight: 300; border-bottom: 1px solid var(--line); }
.process-row ul li:last-child { border-bottom: none; }
.process-row ul li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.process-row ul li b { color: var(--snow); font-weight: 600; }

/* CASE GRID */
.case-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
.case-grid > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.case-grid h4 { color: var(--accent-2); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.case-grid p { color: var(--mist); font-weight: 300; font-size: 15px; }

/* TEAM */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
.team { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; transition: border-color .3s, transform .3s; }
.team:hover { border-color: var(--accent); transform: translateY(-4px); }
.team .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--grad); margin-bottom: 18px; box-shadow: 0 8px 24px rgba(84,104,255,.35); }
.team h3 { font-size: 22px; margin-bottom: 4px; }
.team .role { color: var(--accent-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.team p { color: var(--mist); font-weight: 300; font-size: 14.5px; }

/* POST GRID */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s; }
.post:hover { border-color: var(--accent); transform: translateY(-4px); }
.post h3 { font-size: 18px; line-height: 1.25; }
.post p { color: var(--mist); font-weight: 300; font-size: 14.5px; flex: 1; }
.post .link, a.link { color: var(--accent-2); font-weight: 600; font-size: 14px; border-bottom: 1px solid transparent; align-self: flex-start; }
.post .link:hover { border-color: var(--accent-2); }

/* FAQ */
.faqs { display: grid; gap: 12px; max-width: 880px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; transition: border-color .25s; }
.faq details[open] { border-color: var(--accent); }
.faq summary { cursor: pointer; font-family: "Schibsted Grotesk"; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; align-items: center; list-style: none; user-select: none; -webkit-user-select: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--accent-2); transition: transform .25s; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary * { pointer-events: none; }
.faq details p { color: var(--mist); font-weight: 300; font-size: 15px; margin-top: 14px; line-height: 1.65; }

/* FORM */
.form-section { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 36px 24px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mist); letter-spacing: .03em; }
.form input, .form textarea, .form select { background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--snow); font-family: inherit; font-size: 15px; transition: border-color .2s; width: 100%; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: 120px; resize: vertical; }
.form .checks { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-wrap: wrap; gap: 14px; }
.form .checks legend { padding: 0 6px; font-size: 13px; color: var(--mist); }
.form .chk { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--snow); font-size: 14px; }
.form .chk input { accent-color: var(--accent); width: 16px; height: 16px; min-width: 16px; }
.form button.cta { align-self: flex-start; margin-top: 6px; }
.form-status { font-size: 14px; color: var(--accent-2); min-height: 1.2em; }

/* CONTACT LIST */
.contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; color: var(--mist); }
.contact-list a { color: var(--accent-2); }

/* STEPS */
.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.steps li { position: relative; padding: 16px 18px 16px 60px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; counter-increment: step; display: flex; flex-direction: column; gap: 4px; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font-family: "JetBrains Mono"; color: var(--accent-2); font-size: 14px; letter-spacing: .1em; }
.steps li strong { font-weight: 700; color: var(--snow); font-size: 16px; }
.steps li span { color: var(--mist); font-weight: 300; font-size: 14.5px; }

/* LIST */
.list { list-style: none; padding: 0; }
.list li { color: var(--mist); padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 300; }
.list li::before { content: "\2192"; position: absolute; left: 0; top: 8px; color: var(--accent-2); font-weight: 700; }
.list.muted li::before { content: "\00D7"; color: var(--fog); }
.list.muted li { color: var(--fog); }

/* FOOTER */
.foot { padding: 80px 0 50px; border-top: 1px solid var(--line); color: var(--fog); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
.foot h5 { font-family: "JetBrains Mono"; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--snow); margin-bottom: 18px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot ul a { color: var(--fog); font-size: 14px; transition: color .2s; }
.foot ul a:hover { color: var(--accent-2); }
.foot .brand-block p { margin-top: 14px; font-size: 14px; font-weight: 300; max-width: 280px; color: var(--fog); }

/* Logo master del footer: mas grande que el del header */
.foot .brand--master { max-height: 140px; }
.foot .brand-logo--master {
  max-height: 140px !important;
  max-width: 280px !important;
  width: auto !important;
  height: 140px !important;
  object-fit: contain;
  object-position: left top;
  display: block;
}

/* Social icons en el footer */
.foot-social {
  list-style: none;
  display: flex;
  flex-direction: row !important;  /* override del .foot ul */
  gap: 12px !important;
  margin-top: 18px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fog);
  transition: color .2s, border-color .2s, transform .2s, background .2s;
}
.foot-social a:hover {
  color: var(--snow);
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, var(--surface));
  transform: translateY(-2px);
}
.foot-social svg { width: 18px; height: 18px; }
.foot-bot { padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-size: 13px; gap: 14px; }

/* CTA FINAL */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(28px,5vw,52px); margin-bottom: 18px; }
.cta-final p { color: var(--mist); font-weight: 300; font-size: 18px; max-width: 620px; margin: 0 auto 32px; }

/* REVEAL ANIMATION */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — Mobile First (matching lovable breakpoints)
============================================================ */

/* Mobile up: hero-meta row */
@media (min-width: 480px) {
  .hero-meta { flex-direction: row; gap: 40px; }
}

/* Tablet up */
@media (min-width: 768px) {
  .wrap { padding: 0 32px; }
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .eco-grid { grid-template-columns: repeat(2,1fr); }
  .serv-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: repeat(2,1fr); }
  .case-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(3,1fr); }
  .post-grid { grid-template-columns: repeat(2,1fr); }
  .foot-grid { grid-template-columns: repeat(2,1fr); }
  .foot-bot { flex-direction: row; align-items: center; }
}

/* Desktop up */
@media (min-width: 1024px) {
  .nav-links { gap: 28px; }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
  .eco-grid { grid-template-columns: repeat(4,1fr); }
  .serv-grid { grid-template-columns: repeat(3,1fr); }
  .post-grid { grid-template-columns: repeat(3,1fr); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .form-section { padding: 48px; }
}

/* Tablet down — section padding (matching lovable max-width: 980px) */
@media (max-width: 980px) {
  .sec { padding: 90px 0; }
  .hero-meta { gap: 22px; }
  /* eco-step arrows hide on mobile */
  .eco-step:not(:last-child)::after { display: none; }
  .process-row { grid-template-columns: 60px 1fr; }
  .process-row ul { grid-column: 1 / -1; }
  /* grid-reset for inner blocks */
  .serv-grid, .post-grid, .case-grid { grid-template-columns: 1fr; }
}

/* Mobile nav */
@media (max-width: 880px) {
  .nav-links { position: absolute; top: 72px; left: 16px; right: 16px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; flex-direction: column; align-items: stretch; gap: 4px; display: none; z-index: 100; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 14px; border-radius: 8px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-links .nav-cta { display: inline-flex; background: var(--grad); color: var(--ink) !important; text-align: center; justify-content: center; margin-top: 8px; }
}

/* Small mobile */
@media (max-width: 600px) {
  .hero { padding: 120px 0 60px; }
  .hero.short h1 { font-size: clamp(36px,5vw,56px); }
  .sec { padding: 80px 0; }
  .eco-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG CARDS (used in /recursos/ blog section + related posts)
   ============================================================ */

.blog-card { display: flex; flex-direction: column; gap: 12px; }
.blog-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.05); }
.blog-card__thumb--empty {
  /* Placeholder for posts without featured image.
     Uses brandbook colors: surface-2 + line gradient with a subtle accent glow. */
  background:
    radial-gradient(circle at 20% 20%, rgba(84, 104, 255, 0.10), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(56, 225, 214, 0.08), transparent 60%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--surface-2) 50%, var(--line) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--fog);
  border: 1px solid var(--line);
}
.blog-card__placeholder-icon {
  width: 36px;
  height: 36px;
  opacity: 0.55;
}
.blog-card__placeholder-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.blog-card--coming-soon .blog-card__thumb--empty {
  /* Slightly darker placeholder for "PRÓXIMAMENTE" posts to convey
     "this is intentionally a draft" without being too prominent. */
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 225, 214, 0.06), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 50%, var(--line) 100%);
}
.blog-card__category {
  display: inline-block;
  align-self: flex-start;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 4px;
}
.blog-card__title {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 0;
  color: var(--snow);
}
.blog-card__title a { color: inherit; transition: color .2s; }
.blog-card:hover .blog-card__title a { color: var(--accent-2); }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.blog-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: #5468FF;
  border: 1px solid #5468FF;
  border-radius: 999px;
  padding: 2px 10px;
  background: transparent;
  transition: background .2s, color .2s;
  cursor: default;
}
.blog-card:hover .blog-tag,
.blog-card:focus-within .blog-tag { background: rgba(84, 104, 255, 0.12); }
.blog-card__excerpt {
  font-size: 14.5px;
  color: var(--mist);
  line-height: 1.6;
  font-weight: 300;
  margin: 4px 0 0;
  flex: 1;
}
.blog-card__soon-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 4px;
  background: var(--ink-2);
}
.blog-card--coming-soon .blog-card__thumb { cursor: default; }

/* Blog search */
.blog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 32px;
  max-width: 560px;
  color: var(--fog);
  transition: border-color .2s;
}
.blog-search:focus-within { border-color: var(--accent); color: var(--snow); }
.blog-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--snow);
  font: inherit;
  font-size: 15px;
  padding: 6px 0;
}
.blog-search input::placeholder { color: var(--fog); }
.blog-search-status { font-size: 12px; color: var(--fog); white-space: nowrap; }
.blog-empty { grid-column: 1 / -1; color: var(--fog); padding: 40px 0; text-align: center; }

/* Blog pagination */
.blog-pagination { margin-top: 48px; display: flex; justify-content: center; }
.blog-pagination__list { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mist);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.blog-pagination a:hover { color: var(--snow); border-color: var(--accent); }
.blog-pagination .is-active,
.blog-pagination .current {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.blog-pagination .dots { background: transparent; border-color: transparent; }

/* ============================================================
   SINGLE POST TEMPLATE
   ============================================================ */

.single-hero { padding: 140px 0 60px; }
.single-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fog);
  margin-bottom: 24px;
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.single-back-link:hover { color: var(--accent-2); gap: 9px; }
.single-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--fog);
  margin-top: 24px;
}
.single-meta__author { display: flex; align-items: center; gap: 10px; color: var(--mist); }
.single-meta__author img { width: 32px; height: 32px; border-radius: 50%; }
.single-meta__sep { color: var(--line); }

.single-thumb-wrap { padding: 0 0 60px; }
.single-thumb { margin: 0; }
.single-thumb img { width: 100%; height: auto; border-radius: 16px; display: block; }

.sec--tight { padding: 80px 0 100px; }
.single-content-wrap__inner { max-width: 780px; margin: 0 auto; }
.single-content { font-size: 18px; line-height: 1.75; color: var(--mist); font-weight: 300; }
.single-content > * { margin-bottom: 1.4em; }
.single-content > h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--snow);
  margin-top: 1.6em;
  letter-spacing: -0.02em;
}
.single-content > h3 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--snow);
  margin-top: 1.4em;
}
.single-content > h4 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--snow);
  margin-top: 1.2em;
}
.single-content > p { color: var(--mist); }
.single-content > p > strong { color: var(--snow); font-weight: 700; }
.single-content > p > a,
.single-content a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(56, 225, 214, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.single-content a:hover { text-decoration-color: var(--accent-2); }
.single-content > blockquote {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 24px;
  margin: 1.6em 0;
  font-style: italic;
  color: var(--snow);
}
.single-content > ul, .single-content > ol { padding-left: 24px; margin: 1em 0; }
.single-content > ul li, .single-content > ol li { margin: 6px 0; }
.single-content > ul li::marker { color: var(--accent-2); }
.single-content > img { width: 100%; height: auto; border-radius: 12px; margin: 1.6em 0; }
.single-content figure { margin: 1.6em 0; }
.single-content figcaption { font-size: 13px; color: var(--fog); text-align: center; margin-top: 8px; font-style: italic; }
.single-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-2);
}
.single-content pre {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
}
.single-content pre code { background: transparent; border: 0; padding: 0; color: var(--snow); }

/* Single tags + share */
.single-tags {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.single-tags__label { font-size: 13px; color: var(--fog); margin-right: 4px; }

.single-share {
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.single-share__label { font-size: 13px; color: var(--fog); margin-right: 4px; }
.single-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s, border-color .2s, background .2s;
}
.single-share__btn:hover { color: var(--snow); border-color: var(--accent); background: var(--ink-2); }
.single-share__btn--copy.is-copied { color: var(--accent-2); border-color: var(--accent-2); }

@media (max-width: 600px) {
  .single-meta { font-size: 13px; gap: 8px; }
  .single-content { font-size: 16px; }
  .single-share { gap: 8px; }
}

/* ============================================================
   ANIMATION ENHANCEMENTS (driven by js/animations.js)
   ============================================================ */

/* Animated focus state on form labels: the border color animates
   smoothly when an input is focused. The label gets .is-focused
   from animations.js. */
.form label { position: relative; transition: transform .2s; }
.form label.is-focused { transform: translateY(-1px); }
.form input, .form textarea, .form select {
  transition: border-color .25s ease, box-shadow .25s ease, background .2s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  box-shadow: 0 0 0 3px rgba(84, 104, 255, 0.18);
}

/* Card hover lift — CSS-only, no JS dependency.
   Applies to .why-card, .testi-card, .serv (cards that already
   had a small hover). We override their previous .2s transitions
   with a single, fast .18s transition. */
.why-card, .testi-card, .serv {
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out !important;
}
.why-card:hover, .testi-card:hover, .serv:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px -8px rgba(84, 104, 255, 0.30), 0 4px 10px rgba(56, 225, 214, 0.10);
}

/* Stagger delay helper: the JS sets transition-delay inline; this is
   a fallback that ensures children stay hidden until the parent
   triggers them. */
.stagger-ready > * { opacity: 0; transform: translateY(20px); }
.stagger-ready.in > * { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* Reduce motion: respect user accessibility preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .why-card:hover, .testi-card:hover, .serv:hover { transform: none !important; }
}
.form input:focus, .form textarea:focus, .form select:focus {
  box-shadow: 0 0 0 3px rgba(84, 104, 255, 0.18);
}

/* Card hover lift — applied to .why-card, .testi-card, .serv
   (cards that didn't have a hover effect before). The blog .post
   cards already have their own scale-on-thumb hover so we skip them. */
.hover-lift {
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease, border-color .3s;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -8px rgba(84, 104, 255, 0.25), 0 4px 12px rgba(56, 225, 214, 0.12);
  border-color: var(--accent);
}

/* Stagger delay helper: the JS sets transition-delay inline; this is
   a fallback that ensures children stay hidden until the parent
   triggers them. */
.stagger-ready > * { opacity: 0; transform: translateY(20px); }
.stagger-ready.in > * { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* Reduce motion: respect user accessibility preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hover-lift:hover { transform: none !important; }
}

/* ===========================================================
   SOCIAL DOCK — Dock fijo bottom-right
   Instagram + Facebook (arriba) + WhatsApp (abajo)
   Botones circulares con colores oficiales de cada red.
   El WhatsApp mantiene el pulse animado.
=========================================================== */
.social-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.sd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3);
  transition: transform .2s ease, box-shadow .25s ease;
  overflow: visible;
}
.sd-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6), 0 4px 10px -2px rgba(0,0,0,0.4);
}
.sd-btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
.sd-btn svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 2;
}

/* Colores oficiales de cada red */
.sd-btn--ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.sd-btn--fb { background: #1877f2; }
.sd-btn--fb svg { fill: #fff; stroke: #fff; }
.sd-btn--wa { background: #25D366; color: #fff; } /* verde oficial de WhatsApp */
.sd-btn--wa svg { color: #fff; }

/* Pulse animado en los 3 botones (cada uno con su color) */
.sd-btn__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.55;
  z-index: 1;
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.sd-btn--ig .sd-btn__pulse {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.sd-btn--fb .sd-btn__pulse {
  background: #1877f2;
}
.sd-btn--wa .sd-btn__pulse {
  background: #25D366;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* En movil: un poco mas chico */
@media (max-width: 720px) {
  .social-dock { right: 14px; bottom: 14px; gap: 8px; }
  .sd-btn { width: 46px; height: 46px; }
  .sd-btn svg { width: 20px; height: 20px; }
}

/* Respetar reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sd-btn__pulse { animation: none; }
  .sd-btn { transition: none; }
}

/* ===========================================================
   FAQ CTA BLOCK — Bloque card para llevar al usuario al FAQ
   desde otras páginas. Se inserta justo antes del CTA final.
   VIVE EN main.css (no en faq.css) porque se usa en múltiples
   páginas, no solo en /preguntas-frecuentes/.
=========================================================== */
.faq-cta-block { padding: 60px 0; }

.faq-cta-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent-2) 10%, var(--surface-2)) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.faq-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%,
    color-mix(in srgb, var(--accent-2) 12%, transparent) 0%,
    transparent 50%);
  pointer-events: none;
  opacity: .7;
}
.faq-cta-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-2);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 60%, transparent);
}
.faq-cta-card:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.faq-cta-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--line));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  flex-shrink: 0;
}
.faq-cta-card__icon svg { width: 26px; height: 26px; }

.faq-cta-card__body h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--snow);
  line-height: 1.3;
}
.faq-cta-card__body p {
  margin: 0;
  color: var(--mist);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60ch;
}

.faq-cta-card__action {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  position: relative;
  z-index: 1;
}
.faq-cta-card__label {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-2);
  letter-spacing: 0.01em;
}
.faq-cta-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
  transition: transform .25s ease;
}
.faq-cta-card:hover .faq-cta-card__arrow {
  transform: translateX(4px);
}

@media (min-width: 720px) {
  .faq-cta-card {
    grid-template-columns: auto 1fr auto;
    padding: 32px 36px;
  }
  .faq-cta-card__action {
    grid-column: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}

@media (max-width: 540px) {
  .faq-cta-block { padding: 40px 0; }
  .faq-cta-card { padding: 22px; }
  .faq-cta-card__icon { width: 44px; height: 44px; }
  .faq-cta-card__icon svg { width: 22px; height: 22px; }
}