@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* =========================================================
   CIBERMEDIDA CONSULTING — Sistema de diseño
   Consultoría de Transformación Digital, Automatización,
   Asistentes Virtuales con IA y Aplicaciones a medida.
   ========================================================= */

:root{
  /* Paleta — navy tecnológico + violeta IA + cian (nexo con cibermedida.es) */
  --bg:            #020617;
  --bg-alt:        #071124;
  --surface:       #0f172a;
  --surface-2:     #17223a;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --text:          #eef1fb;
  --text-muted:    #a4acc6;
  --text-faint:    #6d7695;

  --primary:       #7c3aed;
  --primary-dark:  #6425d0;
  --primary-light: #a78bfa;
  --accent:        #22d3ee;
  --accent-2:      #f5a524;   /* ámbar — CTAs cálidos */
  --danger:        #f2495c;
  --success:       #27c98f;

  --grad-primary: linear-gradient(135deg, var(--primary) 0%, #4f7dfb 50%, var(--accent) 100%);
  --grad-text:    linear-gradient(135deg, #c9befe 0%, #8fe3dd 100%);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow:    0 10px 40px rgba(6,8,20,.45);
  --shadow-lg: 0 25px 70px rgba(6,8,20,.55);

  --container: 1180px;
  --header-h: 76px;

  --ease: cubic-bezier(.16,1,.3,1);

  --font-display: Poppins, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x:clip; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(124,92,252,.18), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(34,211,201,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.08; font-weight:700; letter-spacing:-.035em; font-family: var(--font-display); text-wrap: balance; }
h1{ font-weight:800; }
h2{ font-weight:750; }
h3,h4{ font-weight:700; font-family: var(--font-body); letter-spacing:-.005em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 24px; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--primary); color:#fff;
  padding:10px 18px; border-radius:0 0 8px 0; z-index:9999;
}
.skip-link:focus{ left:0; }

/* ===== Typography helpers ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent); background: rgba(34,211,201,.08); border:1px solid rgba(34,211,201,.25);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.eyebrow.violet{ color: var(--primary-light); background: rgba(124,92,252,.1); border-color: rgba(124,92,252,.3); }
.gradient-text{
  background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head{ max-width: 720px; margin: 0 auto 52px; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-head p{ color: var(--text-muted); font-size: 1.05rem; }
.section{ padding: 96px 0; position:relative; }
.section.tight{ padding: 64px 0; }
.section.alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 15%, rgba(255,255,255,.02) 85%, transparent); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; font-weight:700; font-size:.96rem;
  border:1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s;
  white-space:nowrap;
}
.btn-primary{ background: var(--grad-primary); color:#fff; box-shadow: 0 10px 30px -8px rgba(124,92,252,.6); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(124,92,252,.75); }
.btn-outline{ background: rgba(255,255,255,.03); border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover{ border-color: var(--primary-light); background: rgba(124,92,252,.08); transform: translateY(-2px); }
.btn-ghost{ color: var(--accent); font-weight:700; }
.btn-ghost:hover{ text-decoration: underline; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ===== Top bar (cross-link a cibermedida.es) ===== */
.topbar{
  background: var(--surface-2); border-bottom:1px solid var(--border);
  font-size:.82rem; color: var(--text-muted);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; }
.topbar a.sister-link{ color: var(--accent); font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.topbar a.sister-link:hover{ text-decoration:underline; }
.topbar .topbar-contact{ display:flex; gap:18px; flex-wrap:wrap; }
.topbar .topbar-contact a, .topbar .topbar-contact span{ display:inline-flex; align-items:center; gap:6px; }
.topbar .topbar-contact a:hover{ color: var(--text); }
.topbar svg, .sister-link svg{ flex-shrink:0; opacity:.85; }

/* ===== Header / Nav ===== */
header.site-header{
  position: sticky; top:0; z-index:100; height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(9,12,20,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.18rem; letter-spacing:-.01em; }
.brand .logo-mark{ width:38px; height:38px; flex-shrink:0; }
.brand .brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand .brand-name b{ color:var(--text); }
.brand .brand-name span{ font-size:.66rem; font-weight:700; letter-spacing:.12em; color: var(--accent); text-transform:uppercase; }
header.site-header .brand{ min-width:190px; }
header.site-header .brand::before{ content:""; display:block; width:190px; height:64px; background:url('../img/logo-cibermedida.png') center/contain no-repeat; }
header.site-header .brand .logo-mark{ display:none; }
header.site-header .brand .brand-name{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

nav.primary-nav{ display:flex; align-items:center; gap:2px; }
nav.primary-nav > ul{ display:flex; align-items:center; gap:2px; }
nav.primary-nav a.nav-link{
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:8px; font-size:.94rem; font-weight:600; color: var(--text-muted); white-space:nowrap;
  transition: color .2s, background .2s;
}
nav.primary-nav a.nav-link:hover, nav.primary-nav a.nav-link.active{ color: var(--text); background: rgba(255,255,255,.05); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  width: 340px; background: var(--surface-2); border:1px solid var(--border-strong); border-radius: var(--radius);
  padding:10px; box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.dropdown-open .dropdown{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.dropdown a{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; }
.dropdown a:hover{ background: rgba(124,92,252,.1); }
.dropdown a .ic{ width:34px; height:34px; border-radius:9px; background: rgba(124,92,252,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--primary-light); }
.dropdown a strong{ display:block; font-size:.88rem; color: var(--text); }
.dropdown a small{ display:block; font-size:.78rem; color: var(--text-muted); margin-top:2px; }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius:8px; padding:8px; color:var(--text); }
.nav-toggle svg{ width:22px; height:22px; display:block; }
.mobile-nav{ display:none; }

/* ===== Hero ===== */
.hero{ padding: 76px 0 72px; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(124,92,252,.22), transparent 70%);
  pointer-events:none; z-index:-1;
}
.hero-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:64px; align-items:center; }
.hero h1{ font-size: clamp(2.45rem, 5vw, 4.3rem); line-height:1.02; letter-spacing:-.035em; }
.hero .lead{ font-size:1.15rem; color: var(--text-muted); max-width:560px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-note{ margin:22px 0 0; max-width:510px; color:var(--text-faint); font-size:.86rem; border-left:2px solid var(--accent); padding-left:14px; }
.hero-trust{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-trust .stat b{ display:block; font-size:1.6rem; font-weight:800; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-trust .stat span{ font-size:.8rem; color: var(--text-muted); }

.hero-visual{ position:relative; }
.hero-photo{ margin:0; position:relative; min-height:560px; border-radius:4px 48px 4px 4px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(4,10,16,.72)); pointer-events:none; }
.hero-photo img{ width:100%; height:100%; min-height:560px; object-fit:cover; display:block; }
.hero-photo figcaption{ position:absolute; z-index:1; left:28px; right:28px; bottom:24px; color:rgba(255,255,255,.88); font-size:.9rem; }
.hero-photo figcaption strong{ color:#fff; }
.hero-cinematic{ min-height:720px; padding:0; display:flex; align-items:center; isolation:isolate; }
.hero-cinematic::before{ z-index:0; inset:0; height:100%; background:linear-gradient(90deg,rgba(2,6,23,.99) 0%,rgba(2,6,23,.9) 35%,rgba(2,6,23,.28) 70%,rgba(2,6,23,.25) 100%); }
.hero-cinematic::after{ content:""; position:absolute; inset:auto 0 0; height:180px; background:linear-gradient(transparent,var(--bg)); z-index:0; }
.hero-cinematic-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.hero-cinematic-content{ position:relative; z-index:1; padding-top:92px; padding-bottom:92px; }
.hero-cinematic-content>div{ max-width:720px; }
.hero-cinematic h1{ font-size:clamp(3rem,6vw,5.6rem); max-width:800px; }
.hero-cinematic .lead{ font-size:1.18rem; max-width:680px; }
.hero-pillars{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-pillars span{ padding:8px 13px; border:1px solid rgba(103,232,249,.25); background:rgba(2,6,23,.48); color:#c8f8ff; border-radius:999px; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.hero-card{
  background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-lg); position:relative;
}
.hero-card .hc-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px dashed var(--border); }
.hero-card .hc-row:last-child{ border-bottom:none; }
.hero-card .hc-dot{ width:10px; height:10px; border-radius:50%; background: var(--accent); box-shadow:0 0 0 4px rgba(34,211,201,.15); flex-shrink:0; }
.hero-card .hc-row.done .hc-dot{ background: var(--success); box-shadow:0 0 0 4px rgba(39,201,143,.15); }
.hero-card .hc-title{ font-weight:700; font-size:.92rem; }
.hero-card .hc-sub{ font-size:.78rem; color: var(--text-muted); }
.float-badge{
  position:absolute; background: var(--surface-2); border:1px solid var(--border-strong); border-radius: var(--radius);
  padding:12px 16px; box-shadow: var(--shadow); display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700;
  animation: floatY 5s ease-in-out infinite;
}
.float-badge.b1{ top:-24px; right:-18px; }
.float-badge.b2{ bottom:-20px; left:-24px; animation-delay:1.2s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* ===== Logos strip ===== */
.logos-strip{ padding: 34px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.logos-strip .container{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between; }
.logos-strip p{ margin:0; color: var(--text-faint); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.logos-strip .tags{ display:flex; gap:10px; flex-wrap:wrap; }
.logos-strip .tags span{ padding:8px 14px; border:1px solid var(--border); border-radius:999px; font-size:.8rem; color: var(--text-muted); }

/* ===== Cards / grids ===== */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card .card-ic{
  width:52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: var(--grad-primary); color:#fff; margin-bottom:18px; flex-shrink:0;
}
.card h3{ font-size:1.18rem; }
.card p{ color: var(--text-muted); font-size:.95rem; margin-bottom: 14px;}
.card .card-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.card .card-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.87rem; color: var(--text-muted); }
.card .card-list li svg{ width:16px; height:16px; color: var(--accent); flex-shrink:0; margin-top:3px; }
.card-list{ display:flex; flex-direction:column; gap:9px; }
.card-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-muted); }
.card-list li svg{ width:16px; height:16px; color:var(--accent); flex:0 0 16px; margin-top:4px; }
.card .card-link{ font-weight:700; color: var(--accent); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.card .card-link:hover{ text-decoration:underline; }

/* ===== Problem-led proof section ===== */
.proof-section{ background:linear-gradient(135deg,#67e8f9 0%,#35cbe2 58%,#a78bfa 160%); color:#071124; }
.proof-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:88px; align-items:start; }
.proof-intro{ position:sticky; top:130px; }
.proof-intro h2{ font-size:clamp(2rem,3.6vw,3.2rem); letter-spacing:-.03em; }
.proof-intro p{ color:#17324a; font-size:1.05rem; max-width:520px; }
.proof-section .eyebrow{ color:#071124; background:rgba(255,255,255,.28); border-color:rgba(7,17,36,.2); }
.proof-list{ border-top:1px solid rgba(7,17,36,.22); }
.proof-list article{ display:grid; grid-template-columns:52px 1fr; gap:24px; padding:30px 0; border-bottom:1px solid rgba(7,17,36,.22); }
.proof-list article>span{ font-family:var(--font-display); color:#5b21b6; font-weight:800; }
.proof-list h3{ color:#071124; margin:0 0 8px; font-size:1.2rem; }
.proof-list p{ color:#17324a; margin:0; }

/* ===== Visual solution stories ===== */
.visual-solutions{ overflow:hidden; }
.visual-story{ display:grid; gap:32px; }
.visual-story-card{ display:grid; grid-template-columns:1.15fr .85fr; min-height:500px; background:var(--surface); border:1px solid var(--border-strong); border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); }
.visual-story-card.reverse{ grid-template-columns:.85fr 1.15fr; }
.visual-story-card.reverse img{ order:2; }
.visual-story-card img{ width:100%; height:100%; object-fit:cover; min-height:500px; }
.visual-story-copy{ padding:54px; display:flex; flex-direction:column; justify-content:center; }
.visual-story-copy>span{ color:var(--accent); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; margin-bottom:18px; }
.visual-story-copy h3{ font-size:clamp(1.7rem,3vw,2.5rem); }
.visual-story-copy p{ color:var(--text-muted); }
.visual-story-copy a{ color:var(--accent); font-weight:700; margin-top:10px; }

.icon-badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: rgba(124,92,252,.12); color: var(--primary-light); flex-shrink:0;
}
.icon-badge svg{ width:26px; height:26px; }

/* ===== Process / timeline ===== */
.process-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; counter-reset: step; }
.process-step{ position:relative; padding: 28px 22px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); }
.process-step .step-num{
  width:38px; height:38px; border-radius:10px; background: var(--grad-primary); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:.95rem;
}
.process-step h3{ font-size:1.02rem; }
.process-step p{ font-size:.87rem; color: var(--text-muted); margin:0; }
.process-connector{ display:none; }

/* ===== Stats band ===== */
.stats-band{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
.stats-band .stat b{ display:block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight:800; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stats-band .stat span{ color: var(--text-muted); font-size:.88rem; }

/* ===== Testimonials ===== */
.testi-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:28px; }
.testi-card .stars{ color: var(--accent-2); font-size:.9rem; margin-bottom:14px; letter-spacing:2px; }
.testi-card p.quote{ font-size:.98rem; color: var(--text); }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.9rem; }
.testi-person b{ display:block; font-size:.9rem; }
.testi-person span{ display:block; font-size:.78rem; color: var(--text-muted); }

/* ===== CTA band ===== */
.cta-band{
  background: var(--grad-primary); border-radius: var(--radius-lg); padding: 56px; text-align:center;
  position:relative; overflow:hidden; color:#fff;
}
.cta-band::after{ content:""; position:absolute; inset:0; background: radial-gradient(60% 100% at 80% 0%, rgba(255,255,255,.25), transparent 60%); }
.cta-band h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); position:relative; }
.cta-band p{ color: rgba(255,255,255,.85); max-width:560px; margin:0 auto 26px; position:relative; }
.cta-band .hero-cta{ justify-content:center; position:relative; }
.cta-band .btn-outline{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color:#fff; }
.cta-band .btn-primary{ background:#fff; color: var(--primary-dark); box-shadow:0 10px 30px -8px rgba(0,0,0,.35); }

/* ===== Sister-site banner (cibermedida.es) ===== */
.sister-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background: linear-gradient(120deg, rgba(34,211,201,.1), rgba(124,92,252,.08));
  border:1px solid rgba(34,211,201,.3); border-radius: var(--radius-lg); padding: 30px 34px;
}
.sister-banner .sb-left{ display:flex; align-items:center; gap:18px; }
.sister-banner .sb-ic{ width:56px; height:56px; border-radius:16px; background: rgba(34,211,201,.15); display:flex; align-items:center; justify-content:center; color: var(--accent); flex-shrink:0; }
.sister-banner h3{ font-size:1.15rem; margin-bottom:4px; }
.sister-banner p{ margin:0; color: var(--text-muted); font-size:.92rem; max-width:480px; }

/* ===== Page header (subpages) ===== */
.page-header{ padding: 60px 0 40px; border-bottom:1px solid var(--border); }
.breadcrumbs{ display:flex; gap:8px; align-items:center; font-size:.82rem; color: var(--text-faint); margin-bottom:18px; }
.breadcrumbs a:hover{ color: var(--accent); }
.page-header h1{ font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width:760px; }
.page-header .lead{ color: var(--text-muted); max-width:640px; font-size:1.05rem; }
.page-visual-hero{ min-height:610px; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.page-visual-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,6,23,.98),rgba(2,6,23,.82) 48%,rgba(2,6,23,.25)); z-index:-1; }
.page-visual-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-visual-content{ position:relative; z-index:1; }
.page-visual-hero h1{ font-size:clamp(2.7rem,5.5vw,5rem); max-width:850px; }
.page-visual-hero .lead{ color:#cbd5e1; max-width:760px; }
.method-summary{ background:linear-gradient(90deg,#22d3ee,#67e8f9); color:#071124; }
.method-summary-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.method-summary-grid>div{ padding:22px 16px; display:flex; gap:10px; align-items:center; border-right:1px solid rgba(7,17,36,.18); }
.method-summary-grid strong{ color:#5b21b6; }.method-summary-grid span{ font-weight:700;font-size:.86rem; }
.methodology-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.methodology-aside{ position:sticky; top:120px; }
.methodology-aside h2{ font-size:clamp(2rem,3.5vw,3.2rem); }
.methodology-aside p{ color:var(--text-muted); }
.methodology-aside img{ margin-top:28px; border-radius:24px; border:1px solid var(--border-strong); aspect-ratio:4/3; object-fit:cover; }
.service-visual{ position:relative; min-height:290px; overflow:hidden; border-radius:24px; border:1px solid var(--border-strong); box-shadow:var(--shadow); }
.service-visual img{ width:100%; height:100%; min-height:290px; object-fit:cover; }
.service-visual::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(2,6,23,.92)); }
.service-visual-caption{ position:absolute; z-index:1; left:24px; right:24px; bottom:20px; display:flex; flex-direction:column; }
.service-visual-caption b{ color:var(--accent); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; }
.service-visual-caption span{ color:#fff; font-weight:700; }
.service-detail-card{ padding:24px; grid-column:2; }

/* ===== Pricing ===== */
.pricing-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:32px;
  display:flex; flex-direction:column; position:relative;
}
.pricing-card.featured{ border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); }
.pricing-card .badge-pop{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: var(--grad-primary); color:#fff; font-size:.72rem; font-weight:800; padding:6px 16px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em;}
.pricing-card h3{ font-size:1.1rem; }
.pricing-card .price{ font-size:2rem; font-weight:800; margin: 10px 0 4px; }
.pricing-card .price span{ font-size:.9rem; color: var(--text-muted); font-weight:600; }
.pricing-card .price-note{ font-size:.8rem; color: var(--text-faint); margin-bottom:20px; }
.pricing-card ul{ display:flex; flex-direction:column; gap:10px; margin: 18px 0 24px; flex:1; }
.pricing-card ul li{ display:flex; gap:10px; font-size:.88rem; color: var(--text-muted); }
.pricing-card ul li svg{ width:16px; height:16px; color: var(--accent); flex-shrink:0; margin-top:3px; }

/* ===== FAQ / accordion ===== */
.accordion-item{ border:1px solid var(--border); border-radius: var(--radius); margin-bottom:12px; overflow:hidden; background: var(--surface); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; color: var(--text); padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:.98rem;
}
.accordion-trigger svg{ width:20px; height:20px; flex-shrink:0; transition: transform .3s var(--ease); color: var(--accent); }
.accordion-item.open .accordion-trigger svg{ transform: rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.accordion-panel-inner{ padding: 0 22px 20px; color: var(--text-muted); font-size:.92rem; }

/* ===== Forms ===== */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.85rem; font-weight:700; color: var(--text); }
.field .req{ color: var(--danger); }
.field input, .field select, .field textarea{
  background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:10px; color: var(--text);
  padding:13px 14px; font-size:.94rem; font-family:inherit; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,92,252,.2);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--text-muted); }
.field-check input{ margin-top:3px; accent-color: var(--primary); }
.field-error{ font-size:.78rem; color: var(--danger); display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--danger); }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:.78rem; color: var(--text-faint); }
.form-status{ margin-top:16px; padding:14px 16px; border-radius:10px; font-size:.9rem; display:none; }
.form-status.show{ display:block; }
.form-status.success{ background: rgba(39,201,143,.12); color: var(--success); border:1px solid rgba(39,201,143,.35); }
.form-status.error{ background: rgba(242,73,92,.12); color: var(--danger); border:1px solid rgba(242,73,92,.35); }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; }

/* ===== Pestañas (Recursos) ===== */
.tabs-wrap{ max-width:920px; margin:0 auto; }
.tab-list{
  display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--border);
  margin-bottom:36px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tab-list::-webkit-scrollbar{ display:none; }
.tab-btn{
  padding:14px 20px; background:none; border:none; color: var(--text-muted); font-weight:700;
  font-size:.92rem; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: color .2s, border-color .2s;
}
.tab-btn:hover{ color: var(--text); }
.tab-btn.active{ color: var(--text); border-bottom-color: var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: tabIn .35s var(--ease); }
@keyframes tabIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.tab-panel h3{ font-size:1.15rem; margin-top:28px; }
.tab-panel h3:first-child{ margin-top:0; }
.tab-panel p, .tab-panel li{ color: var(--text-muted); font-size:.96rem; }
.tab-panel ul.checklist{ display:flex; flex-direction:column; gap:10px; margin:14px 0 20px; }
.tab-panel ul.checklist li{ display:flex; gap:10px; align-items:flex-start; }
.tab-panel ul.checklist li svg{ width:17px; height:17px; color: var(--accent); flex-shrink:0; margin-top:3px; }
.service-tabs-wrap,.methodology-tabs{ max-width:none; }
.service-tab-nav{ position:sticky; top:var(--header-h); z-index:30; padding:0; background:rgba(2,6,23,.92); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); }
.visual-tab-list{ justify-content:center; gap:8px; border:0; padding:14px 0; }
.visual-tab-list .tab-btn{ flex:1; max-width:260px; border:1px solid var(--border-strong); border-radius:14px; padding:14px 16px; text-align:center; white-space:nowrap; }
.visual-tab-list .tab-btn.active{ color:#071124; background:linear-gradient(135deg,var(--accent),#67e8f9); border-color:transparent; }
.service-tab-panel{ min-height:720px; }

.methodology-tab-list{ display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:24px; }
.methodology-tab-list .tab-btn{ max-width:none; white-space:normal; }
.method-tab-panel{ position:relative; min-height:480px; padding:42px; border:1px solid var(--border-strong); border-radius:24px; background:var(--surface); overflow:hidden; grid-template-columns:60px 1fr; gap:24px; align-items:start; }
.method-tab-panel.active{ display:grid; }
.method-tab-panel::after{ content:""; grid-column:1/-1; display:block; height:250px; margin-top:10px; border-radius:18px; background-position:center; background-size:cover; border:1px solid var(--border); }
.method-tab-panel[data-tab="diagnostico"]::after,.method-tab-panel[data-tab="hoja-ruta"]::after{ background-image:linear-gradient(rgba(2,6,23,.1),rgba(2,6,23,.2)),url('../img/metodologia-transformacion.jpg'); }
.method-tab-panel[data-tab="implementacion"]::after{ background-image:url('../img/automatizacion-procesos.jpg'); }
.method-tab-panel[data-tab="adopcion"]::after{ background-image:url('../img/ia-para-empresas.jpg'); }
.method-tab-panel[data-tab="medicion"]::after{ background-image:url('../img/hero-transformacion-digital.jpg'); }

.resource-tab-panel{ position:relative; min-height:560px; padding:44px 48% 44px 44px; border:1px solid var(--border-strong); border-radius:24px; background:var(--surface); overflow:hidden; }
.resource-tab-panel::after{ content:""; position:absolute; inset:0 0 0 56%; background-position:center; background-size:cover; }
.resource-tab-panel[data-tab="transformacion-digital"]::after{ background-image:url('../img/metodologia-transformacion.jpg'); }
.resource-tab-panel[data-tab="automatizacion"]::after{ background-image:url('../img/automatizacion-procesos.jpg'); }
.resource-tab-panel[data-tab="asistentes-virtuales"]::after{ background-image:url('../img/ia-para-empresas.jpg'); }
.resource-tab-panel[data-tab="aplicaciones-medida"]::after{ background-image:url('../img/hero-transformacion-digital.jpg'); }

/* ===== Contact info cards ===== */
.contact-info-card{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border); }
.contact-info-card:last-child{ border-bottom:none; }
.contact-info-card h4{ margin:0 0 4px; font-size:.95rem; }
.contact-info-card p{ margin:0; color: var(--text-muted); font-size:.9rem; }
.contact-info-card a:hover{ color: var(--accent); }

/* ===== Map placeholder ===== */
.map-wrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.map-wrap iframe{ width:100%; height:320px; border:0; display:block; filter: grayscale(.3) invert(.92) contrast(.9); }

/* ===== Case studies ===== */
.case-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.case-card .case-top{ padding: 26px 26px 0; }
.case-card .case-tag{ display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--accent); background: rgba(34,211,201,.1); padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.case-card .case-metrics{ display:flex; gap:18px; padding: 18px 26px; border-top:1px solid var(--border); margin-top:20px; }
.case-card .case-metrics div b{ display:block; font-size:1.3rem; font-weight:800; color: var(--accent); }
.case-card .case-metrics div span{ font-size:.76rem; color: var(--text-muted); }
.case-card .case-body{ padding: 0 26px 26px; flex:1; }

/* ===== Team ===== */
.team-card{ text-align:center; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 22px; }
.team-avatar{ width:88px; height:88px; border-radius:50%; margin:0 auto 18px; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; color:#fff; }
.team-card h3{ font-size:1.05rem; margin-bottom:2px; }
.team-card .role{ color: var(--accent); font-size:.82rem; font-weight:700; margin-bottom:12px; }
.team-card p.bio{ font-size:.88rem; color: var(--text-muted); }

/* ===== Values grid ===== */
.value-item{ display:flex; gap:16px; align-items:flex-start; }
.value-item h4{ font-size:1rem; margin-bottom:4px; }
.value-item p{ font-size:.9rem; color: var(--text-muted); margin:0; }

/* ===== Blog / recursos ===== */
.post-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.post-thumb{ height:150px; background: var(--grad-primary); position:relative; display:flex; align-items:center; justify-content:center; }
.post-thumb svg{ width:44px; height:44px; color:rgba(255,255,255,.85); }
.post-card .post-body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.post-meta{ font-size:.76rem; color: var(--text-faint); margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.post-card h3{ font-size:1.05rem; }
.post-card p{ color: var(--text-muted); font-size:.88rem; flex:1; }

/* ===== Legal pages ===== */
.legal-content h2{ font-size:1.3rem; margin-top:38px; }
.legal-content h3{ font-size:1.05rem; margin-top:22px; }
.legal-content p, .legal-content li{ color: var(--text-muted); font-size:.95rem; }
.legal-content ul{ padding-left:20px; list-style:disc; margin-bottom:1em; }
.legal-content table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:.88rem; }
.legal-content th, .legal-content td{ border:1px solid var(--border); padding:10px 12px; text-align:left; color:var(--text-muted); }
.legal-content th{ color: var(--text); background: var(--surface); }
.toc{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:22px 26px; margin-bottom:30px; }
.toc h4{ margin:0 0 12px; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
.toc ol{ list-style:decimal; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.toc a{ font-size:.9rem; color: var(--accent); }
.note-pending{
  display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color: var(--text-faint);
  border-left:2px solid var(--accent-2); padding:10px 0 10px 14px; margin:18px 0;
}
.note-pending b{ color: var(--text-muted); font-weight:700; }
.toc a:hover{ text-decoration:underline; }

/* ===== 404 ===== */
.error-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.error-code{ font-size: clamp(4rem, 12vw, 8rem); font-weight:900; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }

/* ===== Footer ===== */
footer.site-footer{ border-top:1px solid var(--border); padding: 68px 0 28px; background: var(--bg-alt); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.footer-brand p{ color: var(--text-muted); font-size:.9rem; max-width:300px; }
.footer-col h5{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color: var(--text-muted); font-size:.9rem; }
.footer-col a:hover{ color: var(--accent); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.05); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background: rgba(124,92,252,.15); border-color: var(--primary); color: var(--primary-light); }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color: var(--text-faint); }
.footer-bottom .legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom .legal-links a:hover{ color: var(--accent); }
.footer-sister{ font-size:.82rem; color: var(--text-muted); }
.footer-sister a{ color: var(--accent); font-weight:700; }

/* ===== Cookie banner ===== */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:560px; margin:0 auto; z-index:999;
  background: var(--surface-2); border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding:22px 24px; box-shadow: var(--shadow-lg); display:none;
}
#cookie-banner.show{ display:block; animation: slideUp .4s var(--ease); }
@keyframes slideUp{ from{ transform: translateY(30px); opacity:0;} to{ transform: translateY(0); opacity:1;} }
#cookie-banner p{ font-size:.86rem; color: var(--text-muted); margin-bottom:16px; }
#cookie-banner .cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== WhatsApp float button ===== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:998; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(37,211,102,.5);
  transition: transform .25s var(--ease);
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:28px; height:28px; color:#fff; }

/* ===== Reveal animation ===== */
[data-reveal]{ opacity:1; transform:none; transition: transform .5s var(--ease), opacity .5s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ===== Utilities ===== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.flex{ display:flex; }
.gap-12{ gap:12px; }
.w-100{ width:100%; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ min-height:430px; }
  .hero-photo img{ min-height:430px; }
  .proof-grid{ grid-template-columns:1fr; gap:42px; }
  .proof-intro{ position:static; }
  .methodology-layout{ grid-template-columns:1fr; }
  .methodology-aside{ position:static; }
  .hero-cinematic{ min-height:680px; }
  .visual-story-card,.visual-story-card.reverse{ grid-template-columns:1fr; }
  .visual-story-card.reverse img{ order:0; }
  .visual-story-card img{ min-height:360px; max-height:460px; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: repeat(2,1fr); }
  .stats-band{ grid-template-columns: repeat(2,1fr); gap:32px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1300px) and (min-width: 861px){
  nav.primary-nav a.nav-link{ padding:9px 8px; font-size:.86rem; }
  .nav-cta .btn-outline{ display:none; }
  .nav-cta .btn-primary{ padding:10px 13px; }
}
@media (max-width: 860px){
  nav.primary-nav, .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{
    display:block;
    position:fixed; inset: var(--header-h) 0 0 0; background: var(--bg); z-index:99; padding: 24px; overflow-y:auto;
    transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .mobile-nav.open{ transform: translateX(0); }
  .mobile-nav ul{ display:flex; flex-direction:column; gap:4px; }
  .mobile-nav a{ display:block; padding:16px 6px; border-bottom:1px solid var(--border); font-weight:700; font-size:1.05rem; }
  .mobile-nav .sub-links{ padding-left:16px; display:flex; flex-direction:column; }
  .mobile-nav .sub-links a{ font-weight:500; font-size:.92rem; color: var(--text-muted); padding:12px 6px; border-bottom:none; }
  .mobile-nav .btn{ margin-top:20px; }
  header.site-header .brand{ min-width:0; }
  header.site-header .brand::before{ width:62px; height:58px; background-size:170px auto; background-position:left center; }
}
@media (max-width: 720px){
  .hero{ padding-top:52px; }
  .hero h1{ font-size:clamp(2.35rem,12vw,3.15rem); }
  .hero-photo{ min-height:350px; border-radius:4px 30px 4px 4px; }
  .hero-photo img{ min-height:350px; }
  .hero-photo figcaption{ left:20px; right:20px; bottom:18px; }
  .proof-list article{ grid-template-columns:38px 1fr; gap:14px; }
  .hero-cinematic{ min-height:720px; align-items:flex-end; }
  .hero-cinematic::before{ background:linear-gradient(180deg,rgba(2,6,23,.22),rgba(2,6,23,.88) 42%,#020617 90%); }
  .hero-cinematic-bg{ object-position:68% center; }
  .hero-cinematic-content{ padding-top:170px; padding-bottom:70px; }
  .hero-cinematic h1{ font-size:clamp(2.65rem,13vw,4rem); }
  .page-visual-hero{ min-height:620px; align-items:flex-end; }
  .page-visual-hero::after{ background:linear-gradient(180deg,rgba(2,6,23,.18),rgba(2,6,23,.92) 55%,#020617); }
  .page-visual-content{ padding-bottom:50px; }
  .method-summary-grid{ grid-template-columns:1fr 1fr; }
  .method-summary-grid>div:last-child{ grid-column:1/-1; }
  .service-detail-card{ grid-column:auto; }
  .service-tab-nav{ top:var(--header-h); }
  .visual-tab-list{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .visual-tab-list .tab-btn{ flex:0 0 auto; }
  .methodology-tab-list{ display:flex; }
  .method-tab-panel{ padding:28px 22px; grid-template-columns:44px 1fr; min-height:0; }
  .resource-tab-panel{ min-height:0; padding:320px 24px 28px; }
  .resource-tab-panel::after{ inset:0 0 auto; height:290px; }
  .visual-story-copy{ padding:32px 24px; }
  .visual-story-card img{ min-height:280px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr; }
  .stats-band{ grid-template-columns: repeat(2,1fr); }
  .form-grid{ grid-template-columns: 1fr; }
  .cta-band{ padding: 40px 24px; }
  .sister-banner{ padding:26px; }
  .footer-grid{ grid-template-columns: 1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 480px){
  header.site-header .brand .brand-name{ display:none; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-primary{ padding:10px 14px; font-size:.78rem; }
}