/*
Theme Name: Growth Integral
Theme URI: https://example.com
Author: Growth Integral
Author URI: https://example.com
Description: Tema a medida para un freelance de growth integral (CRO, analitica y paid media en Google Ads y Meta Ads). Incluye inicio, servicios, metodologia y una landing propia por cada servicio.
Version: 1.1.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: growth-integral
*/

/* --- Fuentes autoalojadas (Space Grotesk + DM Sans, variables, licencia OFL). Sin llamadas a Google. --- */
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url('assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  color-scheme: dark;

  /* --- Brand surfaces --- */
  --bg: #020617;
  --bg-soft: #05070f;
  --surface: #0e1223;
  --surface-2: #131829;
  --surface-3: #1a2036;
  --border: #232a3d;
  --border-soft: #1a2035;

  /* --- Text --- */
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* --- Brand accent (global) --- */
  --brand: #22c55e;
  --brand-strong: #16a34a;
  --brand-on: #052e12;
  --brand-soft: rgba(34,197,94,.12);

  /* --- Service accents --- */
  --acc-cro: #22c55e;
  --acc-cro-soft: rgba(34,197,94,.12);
  --acc-cro-on: #052e12;

  --acc-analytics: #38bdf8;
  --acc-analytics-soft: rgba(56,189,248,.12);
  --acc-analytics-on: #04202e;

  --acc-paid: #f59e0b;
  --acc-paid-soft: rgba(245,158,11,.14);
  --acc-paid-on: #2c1a02;

  /* current-page accent, overridden per template */
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --accent-on: var(--brand-on);

  /* --- Type scale --- */
  --font-head: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* --- Spacing / radius / shadow --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 30px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px -20px rgba(0,0,0,.6);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;

  --container: 1180px;
}

/* Light-mode fallback kept dark-first intentionally: this brand commits to a single dark look */
:root[data-theme="light"]{ color-scheme: dark; }

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,svg{ display:block; max-width:100%; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); font-weight: 700; }
h2{ font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
h3{ font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
p{ margin: 0 0 1em; color: var(--text-muted); }
.lede{ font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--text-muted); }

ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout --- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px){ .container{ padding-inline: 32px; } }

.section{ padding: clamp(56px, 6vw, 108px) 0; }
.section-head{ max-width: 640px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head.center{ margin-inline: auto; text-align: center; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.eyebrow svg{ width:14px; height:14px; }

/* --- Buttons --- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head);
  font-weight: 600; font-size: .95rem;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  min-height: 48px;
}
.btn:active{ transform: scale(.97); }
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary{ background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: color-mix(in srgb, var(--accent) 85%, white); box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); }

.btn-outline{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }

.btn-ghost{ background: transparent; color: var(--text-muted); padding-inline: 10px; }
.btn-ghost:hover{ color: var(--text); }

.btn-block{ width: 100%; }
.btn-lg{ padding: 16px 32px; font-size: 1.02rem; }

/* --- Header / Nav --- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 16px;
  gap: 24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head); font-weight:700; font-size:1.05rem; color: var(--text);
}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--acc-cro), var(--acc-analytics));
  display:flex; align-items:center; justify-content:center;
  color:#02150c; flex-shrink:0;
}
.brand-mark svg{ width:19px; height:19px; }

.nav-links{
  display:none;
  align-items:center; gap: 4px;
}
.nav-links a{
  padding: 10px 16px; border-radius: var(--radius-full);
  color: var(--text-muted); font-weight:500; font-size:.95rem;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-links a:hover{ color: var(--text); background: var(--surface-2); }
.nav-links a.is-active{ color: var(--text); background: var(--surface-2); }

.nav-cta{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:12px; }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: var(--radius-sm);
  background: var(--surface-2); border:1px solid var(--border);
  color: var(--text); cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

@media (min-width: 960px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

.mobile-menu{
  display:none;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.mobile-menu.is-open{ display:block; }
.mobile-menu .container{ padding-block: 12px; }
.mobile-menu a{
  display:block; padding: 14px 4px; font-size:1.05rem; font-weight:500;
  border-bottom: 1px solid var(--border-soft); color: var(--text);
}
.mobile-menu a:last-child{ border-bottom:none; }
.mobile-menu .btn{ margin-top:16px; }

@media (min-width:960px){ .mobile-menu{ display:none !important; } }

/* --- Dropdown (services) --- */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top: calc(100% + 10px); left:0;
  min-width: 280px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 8px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:12px;
  padding: 12px; border-radius: var(--radius-sm);
  font-size:.92rem; color: var(--text);
}
.dropdown a:hover{ background: var(--surface-2); }
.dropdown .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* --- Hero --- */
.hero{
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(56px, 6vw, 96px);
  position: relative;
  overflow: clip;
}
.hero::before{
  content:"";
  position:absolute; inset: -20% -10% auto -10%; height: 560px;
  background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
              radial-gradient(45% 45% at 80% 10%, color-mix(in srgb, var(--acc-analytics) 14%, transparent), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero > .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; gap: 40px; align-items:center; }
@media (min-width: 960px){ .hero-grid.two-col{ grid-template-columns: 1.1fr .9fr; gap: 64px; } }

.hero h1{ margin-bottom: .4em; }
.hero .lede{ max-width: 54ch; margin-bottom: 32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 36px; }

.hero-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 480px; }
.hero-stats .stat-num{ font-family: var(--font-head); font-size: clamp(1.4rem,1.2rem + 1vw,1.9rem); font-weight:700; color: var(--text); }
.hero-stats .stat-label{ font-size:.82rem; color: var(--text-dim); }

/* --- Cards --- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-glow); }

.icon-tile{
  width:52px; height:52px; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: 20px; flex-shrink:0;
}
.icon-tile svg{ width:26px; height:26px; }

.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px){ .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px){ .grid-4{ grid-template-columns: repeat(4,1fr); } }

/* --- Service cards --- */
.service-card{
  display:flex; flex-direction:column; height:100%;
}
.service-card .tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color: var(--sc-color); margin-bottom:14px;
}
.service-card .tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--sc-color); }
.service-card ul{ margin: 16px 0 24px; display:flex; flex-direction:column; gap:10px; }
.service-card ul li{ display:flex; gap:10px; font-size:.92rem; color: var(--text-muted); }
.service-card ul li svg{ width:16px; height:16px; color: var(--sc-color); flex-shrink:0; margin-top:3px; }
.service-card .icon-tile{ background: var(--sc-soft); color: var(--sc-color); }
.service-card{ margin-top:auto; }
.service-card .card-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color: var(--sc-color); font-size:.92rem;
}
.service-card .card-link svg{ width:16px; height:16px; transition: transform var(--dur) var(--ease); }
.service-card:hover .card-link svg{ transform: translateX(4px); }

/* --- Badges --- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size:.78rem; font-weight:600;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-muted);
}

/* --- Logos strip --- */
.logo-strip{ display:flex; flex-wrap:wrap; gap: 28px 40px; align-items:center; opacity:.7; }
.logo-strip span{ font-family: var(--font-head); font-weight:600; color: var(--text-dim); font-size:1.05rem; }

/* --- Process / timeline --- */
.process{ position:relative; }
.process-list{ display:flex; flex-direction:column; gap:0; }
.process-item{
  display:grid; grid-template-columns: 44px 1fr; gap:20px;
  padding-bottom: 40px; position:relative;
}
.process-item:last-child{ padding-bottom:0; }
.process-item .num{
  width:44px; height:44px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; color: var(--accent);
  position:relative; z-index:1; flex-shrink:0;
}
.process-item:not(:last-child)::before{
  content:""; position:absolute; left:22px; top:44px; bottom:0;
  width:1px; background: var(--border);
}
.process-item h3{ margin-bottom:6px; }
.process-item .meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* --- FAQ / Accordion --- */
.faq-item{
  border-bottom: 1px solid var(--border-soft);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding: 22px 4px; color: var(--text); font-family: var(--font-head); font-weight:600; font-size:1.02rem;
}
.faq-q svg{ width:20px; height:20px; color: var(--text-dim); transition: transform var(--dur) var(--ease); flex-shrink:0; }
.faq-item[data-open="true"] .faq-q svg{ transform: rotate(45deg); color: var(--accent); }
.faq-a{
  overflow:hidden; max-height:0; transition: max-height var(--dur-slow) var(--ease);
}
.faq-a p{ padding: 0 4px 22px; margin:0; }

/* --- CTA band --- */
.cta-band{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(32px,5vw,56px);
  text-align:center;
  position:relative; overflow:clip;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-soft), transparent 70%);
  pointer-events:none;
}
.cta-band > *{ position:relative; }
.cta-band h2{ max-width: 40ch; margin-inline:auto; }
.cta-band .lede{ max-width: 48ch; margin-inline:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }

/* --- Footer --- */
.site-footer{ border-top:1px solid var(--border-soft); padding-block: 48px 32px; background: var(--bg-soft); }
.footer-grid{ display:grid; gap:32px; margin-bottom:40px; }
@media (min-width:768px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color: var(--text-muted); font-size:.92rem; }
.footer-col a:hover{ color: var(--text); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border-soft); padding-top:24px;
  font-size:.85rem; color: var(--text-dim);
}
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color: var(--text-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.social-row a:hover{ color: var(--accent); border-color: var(--accent); }
.social-row svg{ width:17px; height:17px; }

/* --- Breadcrumb --- */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color: var(--text-dim); margin-bottom:20px; flex-wrap:wrap; }
.breadcrumb a:hover{ color: var(--text); }
.breadcrumb svg{ width:14px; height:14px; }

/* --- Comparison table --- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-md); }
table{ width:100%; border-collapse:collapse; min-width: 560px; }
th,td{ padding:16px 20px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--border-soft); }
th{ font-family: var(--font-head); color: var(--text-dim); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; background: var(--surface); }
tbody tr:last-child td{ border-bottom:none; }
td{ color: var(--text-muted); }
tbody tr:hover{ background: var(--surface-2); }

/* --- Enlaces legales del pie --- */
.footer-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; font-size:.85rem; }
.footer-legal a{ color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .footer-legal a:focus-visible{ color: var(--text); }
/* El panel de gestión de la política de cookies no debe quedar bajo la cabecera fija al saltar a él */
#cmplz-manage-consent-container{ scroll-margin-top: 110px; }

/* --- Blog / generic content fallback (index.php, page.php, single.php) --- */
.entry-content{ max-width: 720px; }
.entry-content h1, .entry-content h2, .entry-content h3{ margin-top: 1.2em; }
.entry-content p, .entry-content li{ color: var(--text-muted); }
.entry-content a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol{ margin: 0 0 1em 1.4em; list-style: revert; }
.entry-content img{ border-radius: var(--radius-md); margin: 1.5em 0; }
.post-card{ padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--border-soft); }
.post-card:last-child{ border-bottom: none; }
.post-meta{ font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; }
.pagination{ display:flex; gap:12px; margin-top: 32px; }

/* --- Utility --- */
.text-accent{ color: var(--accent); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.center-col{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.divider{ height:1px; background: var(--border-soft); border:none; margin: 0; }
.reveal{ opacity:0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* Accent scoping per page (set on <body>) */
body[data-accent="cro"]{ --accent: var(--acc-cro); --accent-soft: var(--acc-cro-soft); --accent-on: var(--acc-cro-on); }
body[data-accent="analytics"]{ --accent: var(--acc-analytics); --accent-soft: var(--acc-analytics-soft); --accent-on: var(--acc-analytics-on); }
body[data-accent="paid"]{ --accent: var(--acc-paid); --accent-soft: var(--acc-paid-soft); --accent-on: var(--acc-paid-on); }