/* =========================================================
   DREAM MARKETING DIGITAL — Stylesheet
   Paleta Pantone oficial
   Bright White · Marshmallow · Coconut Milk · Black Beauty
   ========================================================= */

:root{
  --bright-white:#F4F5F0;
  --marshmallow:#EFEAE0;
  --coconut:#EDE4D3;
  --black-beauty:#27262D;
  --text:#27262D;
  --text-soft:#5C5A63;
  --line:#D9D3C4;
}

/* ---------- Modo oscuro ---------- */
:root[data-theme="dark"]{
  --bright-white:#151419;
  --marshmallow:#1B1A21;
  --coconut:#201E27;
  --black-beauty:#F1F0EB;
  --text:#EDECE7;
  --text-soft:#A29FA9;
  --line:#34323D;
}
/* Bloques que ya eran oscuros: se mantienen oscuros */
:root[data-theme="dark"] .services-cta{ background:#100F14; color:#F1F0EB; }
:root[data-theme="dark"] .services-cta h3{ color:#F4F5F0; }
:root[data-theme="dark"] .contact{ background:#100F14; color:#F1F0EB; }
:root[data-theme="dark"] footer{ background:#100F14; }
:root[data-theme="dark"] .btn-light{ background:#F4F5F0; color:#27262D; }
:root[data-theme="dark"] .btn-light:hover{ background:#EDE4D3; }
/* Hero: mantiene sus elementos claros */
:root[data-theme="dark"] .hero h1 .ink{ color:#F4F5F0; }
:root[data-theme="dark"] .hero .btn-primary{ background:#F4F5F0; color:#27262D; }
:root[data-theme="dark"] .hero .btn-primary:hover{ background:#EDE4D3; }
:root[data-theme="dark"] .hero .btn-outline{ color:#F4F5F0; }
:root[data-theme="dark"] .hero .btn-outline:hover{ background:#F4F5F0; color:#27262D; }
/* Acentos marrón -> tono claro legible en oscuro */
:root[data-theme="dark"] .pillar-label,
:root[data-theme="dark"] .why-item .why-icon,
:root[data-theme="dark"] .stat .num,
:root[data-theme="dark"] .brand-accent{ color:#D8BB98; }
.brand-accent{ color:#4A3728; }
/* Navbar sólido en oscuro */
:root[data-theme="dark"] .navbar.scrolled{ background:rgba(21,20,25,.9); }
:root[data-theme="dark"] .navbar.scrolled .logo img{ filter:brightness(0) invert(1); }

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--bright-white);
  color:var(--text);
  font-weight:400;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:'Inter', sans-serif; letter-spacing:-.02em; font-weight:600; color:var(--black-beauty); }
.italic{ font-family:'Playfair Display', serif; font-style:italic; font-weight:500; }

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

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

.container{ max-width:1240px; margin:0 auto; padding:0 40px; }

/* ---------- Utilidades ---------- */
.mt-24{ margin-top:24px; }
.mt-20{ margin-top:20px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  padding:14px 28px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:0;
  transition:.25s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{ background:var(--black-beauty); color:var(--bright-white); }
.btn-primary:hover{ background:#3a3842; }
.btn-outline{ border:1px solid var(--black-beauty); color:var(--black-beauty); background:transparent; }
.btn-outline:hover{ background:var(--black-beauty); color:var(--bright-white); }
.btn-light{ background:var(--bright-white); color:var(--black-beauty); }
.btn-light:hover{ background:var(--coconut); }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(22,19,16,.55) 0%, rgba(22,19,16,0) 100%);
  z-index:1000;
  transition:background .3s ease, backdrop-filter .3s ease;
}
.navbar.scrolled{
  background:rgba(244,245,240,.92);
  backdrop-filter:blur(10px);
}
/* Estado transparente sobre el hero: logo y textos en claro */
.navbar:not(.scrolled) .logo img{ filter:brightness(0) invert(1); }
.navbar:not(.scrolled) .nav-menu a{ color:rgba(244,245,240,.82); }
.navbar:not(.scrolled) .nav-menu a:hover,
.navbar:not(.scrolled) .nav-menu a.active{ color:#fff; }
.navbar:not(.scrolled) .nav-menu a.active::after{ background:#fff; }
.navbar:not(.scrolled) .lang-switch button{ color:rgba(244,245,240,.7); }
.navbar:not(.scrolled) .lang-switch button.active{ color:#fff; }
.navbar:not(.scrolled) .nav-cta{ background:var(--bright-white); color:var(--black-beauty); }
.nav-inner{
  max-width:1240px; margin:0 auto;
  padding:6px 40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:30px;
}
.logo{
  font-size:20px; font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px;
}
.logo img{ height:90px; width:auto; display:block; transition:filter .3s ease; }
.logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--black-beauty);
  display:inline-block;
}
.nav-menu{ display:flex; gap:32px; }
.nav-menu a{
  font-size:15px; font-weight:300; letter-spacing:.02em;
  color:var(--text-soft);
  position:relative;
  transition:.25s ease;
}
.nav-menu a:hover, .nav-menu a.active{ color:var(--black-beauty); }
.nav-menu a.active::after{
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:1px; background:var(--black-beauty);
}
.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500;
  color:var(--text-soft);
}
.lang-switch button{
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:500;
  color:var(--text-soft);
  font-family:inherit;
  padding:4px 2px;
  transition:.25s ease;
}
.lang-switch button.active{ color:var(--black-beauty); font-weight:600; }
.lang-switch .divider{ opacity:.4; }
.nav-cta{ padding:10px 20px; font-size:12px; }
.theme-switch{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--text-soft);
}
.theme-switch button{
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--text-soft);
  font-family:inherit; padding:4px 2px; transition:.25s ease;
}
.theme-switch button{ display:inline-flex; align-items:center; }
.theme-switch button svg{ width:17px; height:17px; display:block; }
.theme-switch button{ color:var(--text-soft); opacity:.55; }
.theme-switch button.active{ color:var(--black-beauty); opacity:1; }
.theme-switch .divider{ opacity:.4; }
.navbar:not(.scrolled) .theme-switch button{ color:rgba(244,245,240,.7); }
.navbar:not(.scrolled) .theme-switch button.active{ color:#fff; }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center;
  padding:140px 0 120px;
  position:relative;
  overflow:hidden;
  background:#161310;
}
.hero-bg{
  position:absolute; top:-20%; left:0; right:0; height:140%; z-index:0;
  background:#161310 url('assets/hero.jpg') center/cover no-repeat;
  will-change:transform;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(22,19,16,.9) 0%, rgba(22,19,16,.78) 45%, rgba(22,19,16,.5) 100%);
}
.hero-grid{
  width:100%; max-width:1240px; margin:0 auto; padding:0 40px;
  position:relative; z-index:2;
}
.hero-grid > div{ max-width:640px; }
.hero-tag{
  display:inline-block;
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,245,240,.75);
  padding-bottom:12px; margin-bottom:30px;
  border-bottom:1px solid rgba(244,245,240,.25);
}
.hero h1{
  font-size:clamp(44px,6.2vw,84px);
  line-height:1;
  font-weight:500;
  color:#D8BB98;
  margin-bottom:36px;
}
.hero p{
  font-size:17px; color:rgba(244,245,240,.85);
  max-width:540px; margin-bottom:44px;
  line-height:1.7;
}
.hero p.hero-lead{ color:rgba(244,245,240,.9); }
.hero h1 .ink{ color:var(--bright-white); }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-primary{ background:var(--bright-white); color:var(--black-beauty); }
.hero .btn-primary:hover{ background:var(--coconut); }
.hero .btn-outline{ border-color:rgba(244,245,240,.5); color:var(--bright-white); background:transparent; }
.hero .btn-outline:hover{ background:var(--bright-white); color:var(--black-beauty); }
.scroll-indicator{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,245,240,.7);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-indicator span:last-child{ animation:bounce 1.8s infinite; }
@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

/* ---------- Section heading ---------- */
.section-label{
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:18px;
  padding-left:34px; position:relative;
}
.section-label::before{
  content:''; position:absolute; left:0; top:50%;
  width:24px; height:1px; background:var(--black-beauty);
}
.section-heading h2{
  font-size:clamp(36px,4.6vw,62px);
  line-height:1.05;
  font-weight:500;
}
.section-heading p{
  color:var(--text-soft); max-width:640px;
  margin-top:22px; font-size:16px;
}
.section-heading.center{ text-align:center; }
.section-heading.center p{ margin-left:auto; margin-right:auto; }
#process .section-heading p{ font-size:21px; color:var(--text); font-weight:500; }
.section-heading.center .section-label{ padding-left:0; padding:0 34px; }
.section-heading.center .section-label::before{ display:none; }

/* ---------- Sobre nosotros ---------- */
.about{ padding:140px 0; background:var(--marshmallow); }
.about-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:80px; align-items:center;
}
.about-img-frame{ position:relative; }
.about-img{
  height:620px;
  background-image:url('assets/about.jpg');
  background-size:cover; background-position:center top;
  filter:grayscale(10%);
}
.about-img-frame::after{
  content:''; position:absolute;
  inset:20px -20px -20px 20px;
  border:1px solid var(--black-beauty);
  z-index:-1;
}
.about h2{ font-size:clamp(40px,4.8vw,62px); line-height:1.05; font-weight:500; }
.about p{ font-size:17px; color:var(--text-soft); line-height:1.75; margin-bottom:18px; }
.about p:last-child{ margin-bottom:0; }
.about p.about-lead{ font-size:21px; color:var(--text); font-weight:500; }
.pillars{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.pillar{ border-top:1px solid var(--line); padding-top:20px; }
.pillar-label{
  font-size:22px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#4A3728; display:block; margin-bottom:12px;
}
.pillar p{ font-size:14px; color:var(--text-soft); line-height:1.6; }

/* ---------- Servicios ---------- */
.services{ padding:140px 0; background:var(--bright-white); }
.services-grid{
  margin-top:80px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.service-card{
  padding:28px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bright-white);
  transition:.3s ease;
  cursor:pointer;
  position:relative;
  display:flex; flex-direction:column;
}
.service-card:hover{ background:var(--marshmallow); }
.service-num{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--text-soft);
  margin-bottom:50px;
}
.service-card h3{ font-size:18px; font-weight:500; margin-bottom:16px; }
.service-card p{ font-size:14px; color:var(--text-soft); line-height:1.7; margin-bottom:30px; }
.service-card .arrow{
  margin-top:auto;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--black-beauty); font-weight:500;
}
.services-cta{
  margin-top:80px;
  padding:48px;
  background:var(--black-beauty);
  color:var(--bright-white);
  display:flex; justify-content:space-between; align-items:center;
  gap:30px; flex-wrap:wrap;
}
.services-cta h3{ color:var(--bright-white); font-size:26px; font-weight:500; }
.services-cta p{ color:rgba(244,245,240,.7); margin-top:6px; font-size:14px; }

/* ---------- Proceso ---------- */
.process{ padding:140px 0; background:var(--coconut); }
.process-grid{
  margin-top:80px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:40px;
}
.process-step{ position:relative; padding-top:40px; border-top:1px solid var(--black-beauty); }
.process-num{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:56px;
  font-weight:400;
  color:var(--black-beauty);
  margin-bottom:24px;
  line-height:1;
}
.process-step h3{ font-size:18px; font-weight:600; margin-bottom:12px; }
.process-step p{ font-size:14px; color:var(--text-soft); line-height:1.7; }

/* ---------- Por qué nosotros ---------- */
.why{ padding:90px 0; background:var(--bright-white); }
.why-grid{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:32px 60px;
}
.why-item{ border-top:1px solid var(--line); padding-top:22px; }
.why-item .why-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.why-item .why-icon{ color:#4A3728; display:inline-flex; flex-shrink:0; }
.why-item .why-icon svg{ width:26px; height:26px; display:block; }
.why-item h3{ font-size:22px; font-weight:500; margin-bottom:0; }
.why-item p{ color:var(--text-soft); font-size:15px; line-height:1.7; }
.stats{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  padding:32px 20px;
  text-align:center;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .num{
  font-family:'Playfair Display', serif;
  font-size:54px;
  font-weight:500;
  color:#4A3728;
  line-height:1;
  margin-bottom:10px;
}
.stat .label{
  font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-soft);
}

/* ---------- Casos ---------- */
.cases{ padding:140px 0; background:var(--marshmallow); }
.logos-carousel{ margin-top:60px; margin-bottom:50px; position:relative; padding:0 60px; }
.logos-viewport{
  overflow:hidden; padding:34px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.logos-track{ display:flex; gap:24px; align-items:center; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.logos-track .logo-slide{
  flex:0 0 calc((100% - 96px)/5);
  display:flex; align-items:center; justify-content:center;
}
.logos-track .logo-slide img{
  width:100%; max-width:170px; height:auto; display:block;
  border-radius:8px;
}
.logos-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--bright-white);
  color:var(--black-beauty); cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; padding-bottom:3px;
  transition:.25s ease;
}
.logos-arrow:hover{ background:var(--black-beauty); color:var(--bright-white); }
.logos-arrow.prev{ left:8px; }
.logos-arrow.next{ right:8px; }
.logos-arrow:disabled{ opacity:.3; cursor:default; }
.logos-arrow:disabled:hover{ background:var(--bright-white); color:var(--black-beauty); }
.logos-dots{ position:absolute; left:0; right:0; bottom:-40px; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.logos-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:var(--line); cursor:pointer; transition:.25s ease;
}
.logos-dots button.active{ background:var(--black-beauty); width:20px; border-radius:4px; }
.cases-grid{
  margin-top:80px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.case{ background:var(--bright-white); transition:.3s ease; display:flex; flex-direction:column; }
.case:hover{ transform:translateY(-4px); }
.case-img{
  height:320px;
  background-size:cover; background-position:center;
  filter:grayscale(30%);
}
.case-tag{
  display:inline-block;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-soft);
  margin:30px 30px 12px;
}
.case h3{ margin:0 30px 12px; font-size:22px; font-weight:500; }
.case p{ margin:0 30px 20px; font-size:14px; color:var(--text-soft); line-height:1.7; }
.case-result{
  margin:0 30px 30px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--black-beauty);
  min-height:66px;
}

/* ---------- Testimonios ---------- */
.testimonials{ padding:140px 0; background:var(--bright-white); }
.test-carousel{ margin-top:60px; position:relative; padding:0 60px; }
.test-viewport{ overflow:hidden; }
.test-track{ display:flex; gap:30px; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.test-track .test{ flex:0 0 calc((100% - 60px)/3); }
.test-arrow{
  position:absolute; top:calc(50% - 26px); transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--bright-white);
  color:var(--black-beauty); cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; padding-bottom:3px;
  transition:.25s ease;
}
.test-arrow:hover{ background:var(--black-beauty); color:var(--bright-white); }
.test-arrow.prev{ left:0; }
.test-arrow.next{ right:0; }
.test-arrow:disabled{ opacity:.3; cursor:default; }
.test-arrow:disabled:hover{ background:var(--bright-white); color:var(--black-beauty); }
.test-dots{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.test-dots button{
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:var(--line); cursor:pointer; transition:.25s ease;
}
.test-dots button.active{ background:var(--black-beauty); width:24px; border-radius:4px; }
.test{
  padding:40px 36px;
  background:var(--marshmallow);
  position:relative;
  display:flex; flex-direction:column;
  border-radius:10px;
}
.test .stars{
  color:var(--black-beauty);
  margin-bottom:20px;
  letter-spacing:2px;
}
.test-quote{
  font-size:16px; line-height:1.7;
  color:var(--text);
  margin-bottom:30px;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:400;
}
.test-author{ margin-top:auto; display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:20px; }
.test-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--black-beauty);
  color:var(--bright-white);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px;
}
.test-name{ font-weight:600; font-size:14px; }
.test-role{ font-size:12px; color:var(--text-soft); }

/* ---------- FAQ ---------- */
.faq{ padding:140px 0; background:var(--coconut); }
.faq-grid{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:80px;
}
.faq h2{ font-size:clamp(36px,4.2vw,56px); line-height:1.05; font-weight:500; }
.faq-list{ border-top:1px solid var(--black-beauty); }
.faq-item{
  border-bottom:1px solid var(--line);
  padding:28px 0;
  cursor:pointer;
}
.faq-q{
  font-size:18px; font-weight:500;
  color:var(--black-beauty);
  display:flex; justify-content:space-between; align-items:center;
  list-style:none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:'+';
  font-size:22px; font-weight:300;
  transition:.25s ease;
}
.faq-item[open] .faq-q::after{ transform:rotate(45deg); }
.faq-a{
  margin-top:16px;
  color:var(--text-soft);
  font-size:15px; line-height:1.75;
}
.faq-a p + p{ margin-top:12px; }

/* ---------- Contacto ---------- */
.contact{ padding:140px 0; background:var(--black-beauty); color:var(--bright-white); }
.contact h2{ color:var(--bright-white); font-size:clamp(40px,4.8vw,62px); line-height:1.05; font-weight:500; }
.contact .section-label{ color:rgba(244,245,240,.6); }
.contact .section-label::before{ background:var(--bright-white); }
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px;
}
.contact-info p{ color:rgba(244,245,240,.7); margin-bottom:40px; font-size:16px; line-height:1.7; }
.contact-channels{ margin-top:40px; }
.channel{
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0; border-top:1px solid rgba(244,245,240,.12);
}
.channel:last-child{ border-bottom:1px solid rgba(244,245,240,.12); }
.channel-num{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:40px;
  color:rgba(244,245,240,.5);
  min-width:52px;
}
.channel strong{ display:block; font-size:15px; font-weight:500; margin-bottom:2px; color:var(--bright-white); }
.channel span{ font-size:14px; color:rgba(244,245,240,.6); }

.form{ background:var(--bright-white); color:var(--text); padding:48px; }
.form label{
  display:block;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:8px;
}
.form input, .form select, .form textarea{
  width:100%;
  padding:14px 0;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  outline:none;
  transition:.25s ease;
  border-radius:0;
}
.form input:focus, .form select:focus, .form textarea:focus{ border-bottom-color:var(--black-beauty); }
.form textarea{ min-height:100px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.form > div{ margin-bottom:24px; }
.form-check{
  display:flex; gap:12px; align-items:flex-start;
  font-size:12px; color:var(--text-soft); line-height:1.6;
  margin-bottom:30px;
}
.form-check input[type=checkbox]{
  width:auto; margin-top:3px;
}
.form button{ width:100%; padding:18px; }

/* ---------- Footer ---------- */
footer{
  background:var(--black-beauty);
  color:rgba(244,245,240,.6);
  padding:80px 0 30px;
  border-top:1px solid rgba(244,245,240,.08);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:60px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(244,245,240,.08);
}
.footer-brand .logo{ color:var(--bright-white); margin-bottom:20px; }
.footer-brand .logo .dot{ background:var(--bright-white); }
.footer-brand .logo img{ height:70px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:14px; line-height:1.7; margin-bottom:24px; }
.footer-grid h4{
  color:var(--bright-white);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:20px;
}
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:12px; }
.footer-grid a{ font-size:14px; transition:.25s ease; color:rgba(244,245,240,.6); }
.footer-grid a:hover{ color:var(--bright-white); }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:38px; height:38px;
  border:1px solid rgba(244,245,240,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.1em; font-weight:600;
  transition:.25s ease;
  color:var(--bright-white);
}
.social-row a:hover{ background:var(--bright-white); color:var(--black-beauty); }
.footer-bottom{
  padding-top:30px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:rgba(244,245,240,.4);
  flex-wrap:wrap; gap:12px;
}
.footer-bottom a{ color:rgba(244,245,240,.4); transition:.25s ease; }
.footer-bottom a:hover{ color:var(--bright-white); }

/* ---------- WhatsApp flotante ---------- */
.wapp{
  position:fixed; bottom:30px; right:30px; z-index:1100;
  width:60px; height:60px; border-radius:50%;
  background:var(--black-beauty);
  color:var(--bright-white);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:300;
  box-shadow:0 10px 30px rgba(39,38,45,.25);
  transition:.3s ease;
}
.wapp svg{ width:30px; height:30px; display:block; }
.wapp:hover{ transform:translateY(-4px); background:#3a3842; }
.to-top{
  position:fixed; bottom:30px; left:30px; z-index:1100;
  width:60px; height:60px; border-radius:50%;
  background:var(--black-beauty);
  color:var(--bright-white);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(39,38,45,.25);
  transition:.3s ease;
  opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none;
}
.to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.to-top.visible:hover{ transform:translateY(-4px); background:#3a3842; }
.to-top svg{ width:26px; height:26px; display:block; }
.wapp::before{
  content:''; position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid var(--black-beauty);
  opacity:.4;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.4); opacity:0; }
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:.8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
/* ---------- Menú móvil (base) ---------- */
.nav-toggle{ display:none; }
.mobile-nav{ display:none; }
body.menu-open{ overflow:hidden; }
body.menu-open .wapp, body.menu-open .to-top{ opacity:0; visibility:hidden; pointer-events:none; }

@media (max-width:960px){
  .container{ padding:0 24px; }
  .nav-inner{ padding:6px 24px; gap:14px; }
  .nav-menu{ display:none; }
  .nav-right{ display:none; }
  .logo img{ height:50px; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    position:relative; z-index:1060; margin-left:auto;
    width:42px; height:42px; padding:9px;
    background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{ display:block; height:2px; width:100%; background:var(--black-beauty); border-radius:2px; transition:.3s ease; }
  .navbar:not(.scrolled) .nav-toggle span{ background:#fff; }
  .nav-toggle.open span{ background:#fff; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-nav{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    position:fixed; inset:0; z-index:1055;
    background:#161310;
    opacity:0; visibility:hidden; transition:.32s ease;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; }
  .mobile-nav a{ color:#F4F5F0; font-size:23px; font-weight:400; letter-spacing:.01em; padding:11px 24px; }
  .mobile-nav .mobile-cta{
    margin-top:20px; background:#F4F5F0; color:#27262D;
    padding:14px 32px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  }
  .mobile-nav-controls{ margin-top:30px; display:flex; gap:30px; align-items:center; }
  .mobile-nav-controls .lang-switch button,
  .mobile-nav-controls .theme-switch button{ color:rgba(244,245,240,.65); }
  .mobile-nav-controls .lang-switch button.active,
  .mobile-nav-controls .theme-switch button.active{ color:#fff; }
  .mobile-nav-controls .theme-switch button svg{ width:19px; height:19px; }
  .mobile-nav-controls .divider{ color:rgba(244,245,240,.4); }
  .hero{ padding:130px 0 70px; }
  .hero-grid{ grid-template-columns:1fr; gap:50px; padding:0 24px; }
  .hero-img{ height:360px; }
  .about, .services, .process, .why, .cases, .testimonials, .faq, .contact{ padding:90px 0; }
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .about-img{ height:360px; }
  .pillars{ grid-template-columns:1fr; gap:24px; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .why-grid{ grid-template-columns:1fr; gap:40px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .logos-track .logo-slide{ flex:0 0 calc((100% - 48px)/3); }
  .cases-grid{ grid-template-columns:1fr; }
  .case-img{ height:240px; }
  .test-track .test{ flex:0 0 calc((100% - 30px)/2); }
  .faq-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .form{ padding:32px 24px; }
  .form-row{ grid-template-columns:1fr; gap:0; margin-bottom:0; }
  .form-row > div{ margin-bottom:24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .services-cta{ padding:32px; }
  .services-cta h3{ font-size:22px; }
}

@media (max-width:560px){
  .services-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .logos-track .logo-slide{ flex:0 0 calc((100% - 24px)/2); }
  .logos-carousel{ padding:0 46px; }
  .logos-viewport{ padding:24px 0; }
  .test-track .test{ flex:0 0 100%; }
  .test-carousel{ padding:0 46px; }
  .test{ padding:32px 26px; }
}