/* ================================================================
   KOALADIGITAL — HOJA DE ESTILOS
   Organizada por secciones. Mobile-first.
   ----------------------------------------------------------------
   ÍNDICE
   0.  Variables (colores, tipografías, espaciado) — EDITAR AQUÍ
   1.  Reset y base
   2.  Utilidades y contenedores
   3.  Botones
   4.  Navbar
   5.  Hero
   6.  Barra de confianza (contadores)
   7.  Servicios
   8.  Sección Constructoras
   9.  ¿Por qué elegirnos?
   10. Proceso (timeline)
   11. Calculadora de precios
   12. Portafolio
   13. Testimonios
   14. FAQ (acordeón)
   15. Formulario de contacto
   16. Footer
   17. Componentes flotantes (WhatsApp, chat popup, toast social)
   18. Animaciones de scroll
   19. Responsive
   ================================================================ */

/* ====== 0. VARIABLES — PERSONALIZA COLORES Y MARCA AQUÍ ====== */
:root{
  /* Paleta principal */
  --azul:        #1E5FAD;   /* Azul zafiro medio (color de marca) */
  --azul-osc:    #16487f;   /* Azul para hover */
  --azul-claro:  #eaf2fb;   /* Fondo azul muy suave */
  --menta:       #2EC4B6;   /* Acento verde menta */
  --menta-osc:   #25a99d;
  --ambar:       #F5A623;   /* Acento ámbar dorado */
  --wa:          #25D366;   /* Verde WhatsApp */

  /* Neutros */
  --blanco:      #ffffff;
  --perla:       #f6f8fb;   /* Gris perla (fondos de sección) */
  --gris-100:    #eef1f6;
  --gris-200:    #dde3ec;
  --gris-400:    #9aa6b8;
  --tinta:       #1f2a37;   /* Texto principal (gris muy oscuro, no negro puro) */
  --tinta-suave: #54616e;   /* Texto secundario */

  /* Tipografía */
  --font-display: "Plus Jakarta Sans", "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", "DM Sans", system-ui, sans-serif;

  /* Bordes y sombras */
  --radio:       16px;
  --radio-sm:    12px;
  --radio-lg:    26px;
  --sombra:      0 6px 24px rgba(31,42,55,.07);
  --sombra-md:   0 14px 40px rgba(31,42,55,.10);
  --sombra-lg:   0 24px 60px rgba(30,95,173,.16);

  /* Layout */
  --max:         1180px;
  --nav-h:       72px;
}

/* ====== 1. RESET Y BASE ====== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; color:var(--tinta); font-weight:700; }
input,select,textarea,button{ font-family:inherit; font-size:inherit; }

/* ====== 2. UTILIDADES Y CONTENEDORES ====== */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px; }
.section{ padding:84px 0; }
.section--tight{ padding:60px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--azul);
  background:var(--azul-claro); padding:7px 14px; border-radius:999px;
}
.section-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,4vw,2.5rem); margin:16px 0 14px; letter-spacing:-.02em; }
.section-head p{ color:var(--tinta-suave); font-size:1.05rem; }
.text-menta{ color:var(--menta-osc); }
.text-azul{ color:var(--azul); }

/* ====== 3. BOTONES ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--azul); color:#fff; box-shadow:0 8px 22px rgba(30,95,173,.28); }
.btn-primary:hover{ background:var(--azul-osc); transform:translateY(-2px); box-shadow:0 12px 30px rgba(30,95,173,.34); }
.btn-ghost{ background:#fff; color:var(--azul); border-color:var(--gris-200); }
.btn-ghost:hover{ border-color:var(--azul); transform:translateY(-2px); box-shadow:var(--sombra); }
.btn-menta{ background:var(--menta); color:#063b36; box-shadow:0 8px 22px rgba(46,196,182,.3); }
.btn-menta:hover{ background:var(--menta-osc); transform:translateY(-2px); }
.btn-block{ width:100%; }

/* ====== 4. NAVBAR ====== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center; transition:transform .35s ease, background .3s, box-shadow .3s;
  background:rgba(255,255,255,.55); backdrop-filter:blur(6px);
}
.nav.scrolled{ background:#fff; box-shadow:0 4px 20px rgba(31,42,55,.08); }
.nav.hide{ transform:translateY(-110%); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.28rem; letter-spacing:-.02em; }
.logo .koala{ width:38px; height:38px; flex:none; }
.logo b{ color:var(--azul); }
.logo span{ color:var(--tinta); }
.nav-links{ display:none; align-items:center; gap:30px; }
.nav-links a{ position:relative; font-weight:500; color:var(--tinta-suave); font-size:.97rem; padding:6px 0; transition:color .2s; }
.nav-links a:hover{ color:var(--azul); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--azul); border-radius:2px; transition:width .25s; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--azul); }
.nav-right{ display:flex; align-items:center; gap:14px; }

/* Hamburguesa */
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; }
.burger span{ width:24px; height:2.4px; background:var(--tinta); border-radius:2px; transition:transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:999;
  background:#fff; box-shadow:var(--sombra-md);
  display:flex; flex-direction:column; padding:14px 22px 26px;
  transform:translateY(-130%); transition:transform .35s ease; gap:4px;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ padding:13px 6px; font-weight:600; border-bottom:1px solid var(--gris-100); color:var(--tinta); }
.mobile-menu .btn{ margin-top:16px; }

/* ====== 5. HERO ====== */
.hero{
  position:relative; padding:calc(var(--nav-h) + 46px) 0 70px; overflow:hidden;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(46,196,182,.12), transparent 60%),
    radial-gradient(900px 600px at -5% 10%, rgba(30,95,173,.10), transparent 55%),
    var(--blanco);
}
/* Patrón geométrico sutil de puntos */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:radial-gradient(var(--gris-200) 1px, transparent 1px);
  background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%); mask-image:linear-gradient(180deg,#000,transparent 80%);
}
.hero .container{ position:relative; z-index:1; display:grid; gap:44px; align-items:center; }
.hero-badge{ margin-bottom:20px; }
.hero h1{ font-size:clamp(2.1rem,6vw,3.5rem); letter-spacing:-.03em; font-weight:800; }
.hero h1 .hl{ color:var(--azul); position:relative; white-space:nowrap; }
.hero h1 .hl::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:12px; background:rgba(46,196,182,.35); z-index:-1; border-radius:4px; }
.hero p.sub{ margin:22px 0 30px; font-size:1.12rem; color:var(--tinta-suave); max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-trust{ display:flex; align-items:center; gap:10px; margin-top:26px; color:var(--tinta-suave); font-size:.9rem; }
.hero-trust .stars{ color:var(--ambar); letter-spacing:2px; }

/* Mockup laptop */
.hero-art{ position:relative; }
.mockup{ filter:drop-shadow(var(--sombra-lg)); }
.float-card{
  position:absolute; background:#fff; border-radius:14px; box-shadow:var(--sombra-md);
  padding:12px 15px; display:flex; align-items:center; gap:10px; font-size:.84rem; font-weight:600;
}
.float-card .dot{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.fc-1{ top:8%; left:-6px; }
.fc-2{ bottom:12%; right:-4px; }

/* Animación entrada hero */
.fade-up{ opacity:0; transform:translateY(24px); }
.hero .fade-up{ animation:fadeUp .8s ease forwards; }
.hero .d1{ animation-delay:.05s; } .hero .d2{ animation-delay:.2s; }
.hero .d3{ animation-delay:.35s; } .hero .d4{ animation-delay:.5s; }
.hero-art.slide-in{ opacity:0; transform:translateX(40px); animation:slideIn .9s .3s ease forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@keyframes slideIn{ to{ opacity:1; transform:none; } }

/* ====== 6. BARRA DE CONFIANZA ====== */
.trust-bar{ background:var(--azul); color:#fff; }
.trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 18px; text-align:center; }
.trust-item .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,6vw,2.8rem); line-height:1; }
.trust-item .num .plus{ color:var(--menta); }
.trust-item .lbl{ margin-top:8px; font-size:.92rem; color:rgba(255,255,255,.82); }

/* ====== 7. SERVICIOS ====== */
.services-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.svc-card{
  background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio);
  padding:26px 24px; transition:transform .25s, box-shadow .3s, border-color .3s; position:relative; overflow:hidden;
}
.svc-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--azul),var(--menta)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-md); border-color:transparent; }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-ill{ width:66px; height:66px; margin-bottom:16px; }
.svc-card h3{ font-size:1.18rem; margin-bottom:8px; }
.svc-card p{ color:var(--tinta-suave); font-size:.95rem; margin-bottom:14px; }
.svc-link{ font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--azul); display:inline-flex; align-items:center; gap:6px; }
.svc-link svg{ transition:transform .25s; }
.svc-card:hover .svc-link svg{ transform:translateX(4px); }

/* ====== 8. SECCIÓN CONSTRUCTORAS ====== */
.constructoras{ background:linear-gradient(180deg,var(--azul-claro),#fff); }
.const-wrap{ display:grid; gap:40px; align-items:center; }
.const-text h2{ font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.02em; margin:16px 0 18px; }
.const-text > p{ color:var(--tinta-suave); font-size:1.05rem; margin-bottom:24px; }
.const-list{ display:grid; gap:14px; margin-bottom:30px; }
.const-list li{ display:flex; gap:13px; align-items:flex-start; }
.const-list .ck{ flex:none; width:28px; height:28px; border-radius:8px; background:var(--menta); display:grid; place-items:center; margin-top:2px; }
.const-list b{ font-family:var(--font-display); }
.const-list span{ display:block; color:var(--tinta-suave); font-size:.94rem; }
.const-art{ background:#fff; border-radius:var(--radio-lg); box-shadow:var(--sombra-md); padding:22px; }

/* ====== 9. ¿POR QUÉ ELEGIRNOS? ====== */
.why-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.why-card{ background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio); padding:28px 24px; transition:box-shadow .3s, transform .25s; }
.why-card:hover{ box-shadow:var(--sombra-md); transform:translateY(-4px); }
.why-ico{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; background:var(--azul-claro); }
.why-card h3{ font-size:1.12rem; margin-bottom:8px; }
.why-card p{ color:var(--tinta-suave); font-size:.94rem; }

/* ====== 10. PROCESO (TIMELINE) ====== */
.process{ background:var(--perla); }
.timeline{ display:grid; grid-template-columns:1fr; gap:0; position:relative; }
.step{ position:relative; padding:0 0 38px 64px; }
.step:last-child{ padding-bottom:0; }
/* línea vertical (móvil) */
.step::before{ content:""; position:absolute; left:23px; top:48px; bottom:-4px; width:2px; background:var(--gris-200); }
.step:last-child::before{ display:none; }
.step-num{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:14px; background:#fff; border:2px solid var(--azul); color:var(--azul); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; box-shadow:var(--sombra); }
.step-ico{ width:24px; height:24px; }
.step h3{ font-size:1.1rem; margin-bottom:6px; }
.step p{ color:var(--tinta-suave); font-size:.94rem; }

/* ====== 11. CALCULADORA DE PRECIOS ====== */
.calc-wrap{ display:grid; gap:28px; background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio-lg); box-shadow:var(--sombra-md); padding:30px 26px; }
.calc-field{ margin-bottom:22px; }
.calc-field > label{ display:block; font-family:var(--font-display); font-weight:700; font-size:.96rem; margin-bottom:12px; }
.opt-row{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt span{
  display:inline-flex; align-items:center; gap:7px; padding:11px 17px; border-radius:999px;
  border:2px solid var(--gris-200); font-weight:600; font-size:.9rem; color:var(--tinta-suave);
  cursor:pointer; transition:all .2s; user-select:none;
}
.opt input:checked + span{ border-color:var(--azul); background:var(--azul-claro); color:var(--azul); }
.opt input:focus-visible + span{ outline:3px solid rgba(30,95,173,.3); outline-offset:2px; }
.calc-result{
  background:linear-gradient(135deg,var(--azul),var(--azul-osc)); color:#fff;
  border-radius:var(--radio); padding:28px 24px; text-align:center; align-self:start; position:sticky; top:90px;
}
.calc-result .small{ font-size:.85rem; opacity:.8; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-display); font-weight:700; }
.calc-result .price{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,6vw,2.7rem); margin:10px 0 4px; }
.calc-result .price span{ color:var(--menta); }
.calc-result .note{ font-size:.84rem; opacity:.78; margin:10px 0 20px; }
.calc-result .btn{ background:#fff; color:var(--azul); }
.calc-result .btn:hover{ background:var(--menta); color:#063b36; }

/* ====== 12. PORTAFOLIO ====== */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.filter{ padding:9px 18px; border-radius:999px; border:2px solid var(--gris-200); background:#fff; font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--tinta-suave); cursor:pointer; transition:all .2s; }
.filter:hover{ border-color:var(--azul); color:var(--azul); }
.filter.active{ background:var(--azul); border-color:var(--azul); color:#fff; }
.portfolio-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.case{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); background:#fff; position:relative; transition:transform .3s, box-shadow .3s; }
.case.hidden{ display:none; }
.case:hover{ transform:translateY(-5px); box-shadow:var(--sombra-md); }
.case-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.case-thumb svg{ width:100%; height:100%; }
.case-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,72,127,0),rgba(22,72,127,.86));
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff;
  opacity:0; transition:opacity .3s;
}
.case:hover .case-overlay{ opacity:1; }
.case-overlay h4{ color:#fff; font-size:1.1rem; }
.case-overlay .cat{ font-size:.8rem; opacity:.85; margin-bottom:12px; }
.case-overlay .btn{ align-self:flex-start; padding:9px 18px; font-size:.85rem; }
.case-foot{ padding:16px 18px; display:flex; justify-content:space-between; align-items:center; }
.case-foot b{ font-family:var(--font-display); font-size:1rem; }
.case-foot .tag{ font-size:.78rem; color:var(--azul); background:var(--azul-claro); padding:4px 11px; border-radius:999px; font-weight:600; }

/* ====== 13. TESTIMONIOS ====== */
.testi{ background:var(--perla); overflow:hidden; }
.slider{ position:relative; max-width:760px; margin:0 auto; }
.slides{ display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.slide{ min-width:100%; padding:6px; }
.t-card{ background:#fff; border-radius:var(--radio-lg); box-shadow:var(--sombra-md); padding:40px 32px; position:relative; }
.t-card .quote{ position:absolute; top:18px; right:26px; font-family:Georgia,serif; font-size:5rem; line-height:1; color:var(--azul-claro); }
.t-text{ font-size:1.08rem; color:var(--tinta); position:relative; z-index:1; }
.t-author{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.t-author .av{ width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden; }
.t-author b{ font-family:var(--font-display); display:block; }
.t-author span{ font-size:.88rem; color:var(--tinta-suave); }
.t-stars{ color:var(--ambar); letter-spacing:2px; margin-bottom:14px; }
.slider-nav{ display:flex; justify-content:center; align-items:center; gap:18px; margin-top:26px; }
.slider-btn{ width:44px; height:44px; border-radius:50%; border:2px solid var(--gris-200); background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--azul); transition:all .2s; }
.slider-btn:hover{ border-color:var(--azul); background:var(--azul); color:#fff; }
.dots{ display:flex; gap:8px; }
.dot-i{ width:9px; height:9px; border-radius:50%; background:var(--gris-200); border:none; cursor:pointer; transition:all .25s; padding:0; }
.dot-i.active{ background:var(--azul); width:26px; border-radius:999px; }

/* ====== 14. FAQ ====== */
.faq-list{ max-width:780px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ border:1px solid var(--gris-100); border-radius:var(--radio-sm); background:#fff; overflow:hidden; transition:box-shadow .3s; }
.faq-item.open{ box-shadow:var(--sombra); border-color:var(--azul-claro); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--tinta); }
.faq-q .ico{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--azul-claro); color:var(--azul); display:grid; place-items:center; transition:transform .3s, background .3s, color .3s; font-size:1.2rem; }
.faq-item.open .faq-q .ico{ transform:rotate(45deg); background:var(--azul); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 22px 22px; color:var(--tinta-suave); }

/* ====== 15. FORMULARIO DE CONTACTO ====== */
.contact{ background:linear-gradient(180deg,#fff,var(--azul-claro)); }
.contact-wrap{ display:grid; gap:38px; align-items:start; }
.contact-aside h2{ font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.02em; margin:16px 0 16px; }
.contact-aside > p{ color:var(--tinta-suave); font-size:1.05rem; margin-bottom:26px; }
.contact-pts{ display:grid; gap:16px; }
.contact-pts li{ display:flex; gap:13px; align-items:center; }
.contact-pts .ci{ width:44px; height:44px; border-radius:12px; background:#fff; box-shadow:var(--sombra); display:grid; place-items:center; flex:none; }
.contact-pts b{ font-family:var(--font-display); display:block; font-size:.98rem; }
.contact-pts span{ font-size:.88rem; color:var(--tinta-suave); }

.form-card{ background:#fff; border-radius:var(--radio-lg); box-shadow:var(--sombra-md); padding:30px 26px; }
.fg{ margin-bottom:18px; }
.fg label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.9rem; margin-bottom:7px; }
.fg .req{ color:var(--azul); }
.input, textarea, select{
  width:100%; padding:13px 15px; border:2px solid var(--gris-200); border-radius:var(--radio-sm);
  background:var(--perla); color:var(--tinta); transition:border-color .2s, background .2s; font-size:.97rem;
}
.input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--azul); background:#fff; }
textarea{ resize:vertical; min-height:110px; }
.fg-row{ display:grid; gap:18px; }
.check-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.chk{ display:flex; align-items:center; gap:10px; padding:10px 13px; border:2px solid var(--gris-200); border-radius:var(--radio-sm); cursor:pointer; font-size:.9rem; transition:all .2s; }
.chk:hover{ border-color:var(--azul); }
.chk input{ accent-color:var(--azul); width:17px; height:17px; flex:none; }
.chk.has input:checked ~ span, .chk:has(input:checked){ }
.radio-col{ display:grid; gap:8px; }
.radio-col .chk{ }
.privacy{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--tinta-suave); margin:6px 0 18px; }
.privacy input{ margin-top:3px; accent-color:var(--azul); width:17px; height:17px; flex:none; }
/* Honeypot anti-spam (oculto para humanos) */
.hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; }
.form-msg{ display:none; padding:14px 16px; border-radius:var(--radio-sm); margin-bottom:16px; font-size:.92rem; font-weight:600; }
.form-msg.ok{ display:block; background:#e7f8f0; color:#0c7a4d; border:1px solid #b7e8d0; }
.form-msg.err{ display:block; background:#fdecec; color:#c0392b; border:1px solid #f5c6c6; }
.field-error{ border-color:#e74c3c !important; }

/* ====== 16. FOOTER ====== */
.footer{ background:#11243a; color:#cdd7e3; padding:60px 0 26px; }
.footer a{ color:#cdd7e3; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:34px; margin-bottom:40px; }
.footer .logo span{ color:#fff; } .footer .logo b{ color:var(--menta); }
.footer-about p{ font-size:.92rem; color:#9fb0c4; margin-top:16px; max-width:320px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.footer-col ul{ display:grid; gap:10px; font-size:.92rem; }
.footer-contact li{ display:flex; gap:10px; align-items:center; font-size:.92rem; margin-bottom:12px; }
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .25s, transform .25s; }
.socials a:hover{ background:var(--azul); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; font-size:.86rem; color:#9fb0c4; }
.footer-badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.07); padding:7px 14px; border-radius:999px; }

/* ====== 17. COMPONENTES FLOTANTES ====== */
/* Botón WhatsApp */
.wa-float{ position:fixed; right:20px; bottom:22px; z-index:1100; display:flex; align-items:center; }
.wa-float a{ display:flex; align-items:center; gap:0; background:var(--wa); color:#fff; border-radius:999px; padding:14px; box-shadow:0 10px 30px rgba(37,211,102,.45); transition:gap .3s, padding .3s; overflow:hidden; }
.wa-float a .wa-txt{ max-width:0; opacity:0; white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:.95rem; transition:max-width .35s, opacity .3s, margin .3s; }
.wa-float a:hover{ gap:10px; }
.wa-float a:hover .wa-txt{ max-width:200px; opacity:1; margin-right:6px; }
.wa-float .pulse{ position:absolute; right:14px; bottom:14px; width:28px; height:28px; border-radius:50%; background:var(--wa); z-index:-1; animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ transform:scale(2.4); opacity:0; } 100%{ opacity:0; } }

/* Chat popup de bienvenida */
.chat-pop{
  position:fixed; left:20px; bottom:22px; z-index:1090; width:310px; max-width:calc(100vw - 40px);
  background:#fff; border-radius:18px; box-shadow:var(--sombra-lg); padding:18px;
  transform:translateY(140%) scale(.96); opacity:0; pointer-events:none; transition:all .45s cubic-bezier(.34,1.56,.64,1);
}
.chat-pop.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.chat-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.chat-head .av{ width:42px; height:42px; border-radius:50%; flex:none; }
.chat-head b{ font-family:var(--font-display); font-size:.95rem; display:block; }
.chat-head .on{ font-size:.78rem; color:var(--menta-osc); display:flex; align-items:center; gap:5px; }
.chat-head .on::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--menta); display:inline-block; }
.chat-close{ position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; border:none; background:var(--gris-100); cursor:pointer; color:var(--tinta-suave); font-size:1rem; line-height:1; }
.chat-body{ background:var(--perla); border-radius:12px; padding:12px 14px; font-size:.92rem; color:var(--tinta); margin-bottom:14px; }
.chat-pop .btn{ width:100%; background:var(--wa); color:#fff; }
.chat-pop .btn:hover{ background:#1fbb5a; }

/* Toast social proof */
.toast{
  position:fixed; left:20px; bottom:22px; z-index:1080; width:300px; max-width:calc(100vw - 40px);
  background:#fff; border-radius:14px; box-shadow:var(--sombra-md); padding:13px 15px;
  display:flex; gap:12px; align-items:center; border:1px solid var(--gris-100);
  transform:translateX(-130%); opacity:0; transition:transform .5s cubic-bezier(.34,1.4,.64,1), opacity .4s;
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast .ic{ width:42px; height:42px; border-radius:11px; background:var(--azul-claro); display:grid; place-items:center; flex:none; font-size:1.2rem; }
.toast .t-name{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.toast .t-meta{ font-size:.8rem; color:var(--tinta-suave); }

/* ====== 18. ANIMACIONES DE SCROLL ====== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ====== 19. RESPONSIVE ====== */
@media (min-width:600px){
  .check-grid{ grid-template-columns:1fr 1fr; }
  .fg-row{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:repeat(4,1fr); }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .portfolio-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .nav-links{ display:flex; }
  .burger{ display:none; }
  .hero .container{ grid-template-columns:1.05fr .95fr; }
  .services-grid{ grid-template-columns:repeat(4,1fr); }
  .why-grid{ grid-template-columns:repeat(4,1fr); }
  .const-wrap{ grid-template-columns:1.05fr .95fr; }
  .const-list{ grid-template-columns:1fr 1fr; }
  .timeline{ grid-template-columns:repeat(5,1fr); gap:20px; }
  .step{ padding:64px 12px 0; text-align:center; }
  .step::before{ left:50%; right:auto; top:23px; bottom:auto; width:calc(100% ); height:2px; transform:translateX(24px); }
  .step:last-child::before{ display:none; }
  .step-num{ left:50%; transform:translateX(-50%); }
  .calc-wrap{ grid-template-columns:1.3fr .9fr; }
  .portfolio-grid{ grid-template-columns:repeat(3,1fr); }
  .contact-wrap{ grid-template-columns:.9fr 1.1fr; }
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .fade-up,.hero-art.slide-in{ opacity:1; transform:none; }
}

/* ================================================================
   MEJORAS ADICIONALES (bloque nuevo — no altera lo anterior)
   ================================================================ */

/* ---- MEJORA 5: Barra de urgencia ---- */
:root{ --urg-h:36px; }
body.urg-closed{ --urg-h:0px; }
.urgency-bar{
  position:fixed; top:0; left:0; right:0; z-index:1010; height:var(--urg-h);
  background:#2EC4B6; color:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:height .35s ease, transform .35s ease;
}
body.urg-closed .urgency-bar{ transform:translateY(-100%); height:0; }
.urgency-bar .urg-text{
  font-size:13px; font-weight:500; text-align:center; padding:0 44px 0 16px;
  opacity:1; transition:opacity .4s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.urgency-bar .urg-text.fading{ opacity:0; }
.urg-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:none; background:rgba(255,255,255,.18); color:#fff;
  border-radius:50%; cursor:pointer; font-size:14px; line-height:1; display:grid; place-items:center;
}
.urg-close:hover{ background:rgba(255,255,255,.32); }
/* el navbar fijo se ubica debajo de la barra de urgencia */
.nav{ top:var(--urg-h); }
.mobile-menu{ top:calc(var(--nav-h) + var(--urg-h)); }
html{ scroll-padding-top:calc(var(--nav-h) + var(--urg-h)); }

/* ---- MEJORA 2: Tarjetas visuales de servicios en el formulario ---- */
.svc-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:560px){ .svc-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.svc-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:110px; padding:16px 10px; text-align:center;
  background:#fff; border:2px solid #e2e8f0; border-radius:var(--radio-sm);
  cursor:pointer; transition:all .2s ease; color:var(--tinta-suave);
}
.svc-tile svg{ width:24px; height:24px; color:#1E5FAD; transition:color .2s ease; }
.svc-tile span{ font-size:.84rem; font-weight:600; line-height:1.3; }
.svc-tile input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.svc-tile:hover{ box-shadow:0 4px 12px rgba(30,95,173,.12); }
.svc-tile.selected{ border-color:#1E5FAD; background:#EBF4FF; color:#1E5FAD; }
.svc-tile.selected svg{ color:#1E5FAD; }
.svc-tile:focus-within{ outline:3px solid rgba(30,95,173,.3); outline-offset:2px; }

/* ---- MEJORA 1: Nota Plan Emprendedor en la calculadora ---- */
.calc-result .plan-note{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:10px; padding:10px 12px; font-size:.82rem; line-height:1.4; margin:6px 0 12px; font-weight:600;
}

/* ---- MEJORA 6: Sección Para Emprendedores ---- */
.emprendedor{ background:linear-gradient(180deg,#F0F7FF,#FFFFFF); }
.emp-cards{ display:grid; grid-template-columns:1fr; gap:20px; margin:38px 0 34px; }
.emp-card{ background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio); padding:28px 24px; text-align:center; box-shadow:var(--sombra); transition:transform .25s, box-shadow .3s; }
.emp-card:hover{ transform:translateY(-5px); box-shadow:var(--sombra-md); }
.emp-card .emp-ico{ font-size:2.2rem; line-height:1; display:block; margin-bottom:14px; }
.emp-card h3{ font-size:1.12rem; margin-bottom:8px; }
.emp-card p{ color:var(--tinta-suave); font-size:.94rem; }
.emp-foot{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.emp-badge{ display:inline-flex; align-items:center; gap:8px; background:#16487f; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.05rem; padding:12px 24px; border-radius:999px; box-shadow:var(--sombra-md); }
.emp-badge .star{ color:var(--ambar); }

/* ---- MEJORA 9: Micro-copy del formulario ---- */
.form-microcopy{ font-size:13px; color:#6B7280; text-align:center; margin-top:12px; font-style:normal; }

/* ---- MEJORA 7: Botón flotante de llamada (solo móvil) ---- */
.call-float{ position:fixed; right:20px; bottom:90px; z-index:1100; display:none; }
.call-float a{ width:48px; height:48px; border-radius:50%; background:#1E5FAD; color:#fff; display:grid; place-items:center; box-shadow:0 4px 12px rgba(30,95,173,.35); }
.call-float .call-tip{
  position:absolute; right:60px; top:50%; transform:translateY(-50%);
  background:#1a1a2e; color:#fff; font-size:12px; border-radius:8px; padding:6px 10px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.call-float a:hover + .call-tip, .call-float:hover .call-tip{ opacity:1; }

/* ---- MEJORA 8: Indicador "en línea" en botón WhatsApp ---- */
.wa-float .wa-online{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:#4ADE80; z-index:2; box-shadow:0 0 0 2px #fff;
  animation:waOnline 1.8s ease-in-out infinite;
}
@keyframes waOnline{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.4; } }
.wa-float .wa-online-tip{
  position:absolute; bottom:52px; right:0; background:#1a1a2e; color:#fff; font-size:12px;
  border-radius:8px; padding:6px 10px; white-space:nowrap; opacity:0; pointer-events:none;
  transform:translateY(6px); transition:opacity .25s, transform .25s;
}
.wa-float .wa-online-tip::after{ content:""; position:absolute; bottom:-5px; right:18px; border:6px solid transparent; border-top-color:#1a1a2e; border-bottom:0; }
.wa-float:hover .wa-online-tip, .wa-float .wa-online-tip.show{ opacity:1; transform:translateY(0); }

/* ---- MEJORA 6 (reemplaza a la anterior): Animación del logo koala ---- */
@keyframes koalaEntrada{
  0%   { transform: scale(0.8) rotate(-5deg); opacity: 0.5; }
  60%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes koalaGuino{
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-8deg) scale(1.05); }
  40%  { transform: rotate(4deg) scale(1.02); }
  60%  { transform: rotate(-3deg); }
  80%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
.koala-logo-icon{
  animation: koalaEntrada 0.7s ease-out forwards;
  transform-origin: center;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce){
  .koala-logo-icon{ animation: none !important; }
}

/* ---- MEJORA 4: Footer móvil (botones de contacto + acordeones) ---- */
.footer-mobile-contact{ display:none; }
.footer-acc-arrow{ display:none; transition:transform .3s ease; }

@media (max-width:768px){
  /* MEJORA 5: barra de urgencia más pequeña en móvil */
  .urgency-bar .urg-text{ font-size:11px; padding:0 40px 0 12px; }

  /* MEJORA 7: botón de llamada visible solo en móvil */
  .call-float{ display:block; }

  /* MEJORA 4: botones prominentes de contacto */
  .footer-mobile-contact{ display:flex; flex-direction:column; margin-bottom:18px; }
  .footer-mobile-contact a{ width:100%; padding:16px; border-radius:50px; text-align:center; font-weight:600; }
  .footer-mobile-contact .fmc-wa{ background:#25D366; color:#fff; font-size:16px; margin-bottom:12px; }
  .footer-mobile-contact .fmc-mail{ background:transparent; border:2px solid #1E5FAD; color:#1E5FAD; font-size:15px; }

  /* MEJORA 4: acordeones de navegación y servicios */
  .footer-col--acc h4{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
  .footer-acc-arrow{ display:inline-block; }
  .footer-col--acc.open .footer-acc-arrow{ transform:rotate(180deg); }
  .footer-col--acc ul{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .footer-col--acc.open ul{ max-height:420px; }
}

/* ================================================================
   MEJORAS v3 — C1, C2/M5, M3 (tema), M6 (tooltips)
   ================================================================ */

/* ---- C1: ocultar el botón pequeño de WhatsApp duplicado del footer en móvil ---- */
@media (max-width:768px){
  .footer-col .btn-menta{ display:none; }
}

/* ---- C2 + M5: bloque Plan Emprendedor dentro de la calculadora ---- */
.calc-plan{
  background:linear-gradient(135deg,#EBF4FF,#F0FDF9);
  border-left:4px solid #2EC4B6; border-radius:12px;
  text-align:left; color:#374151; margin-top:16px;
  opacity:0; transform:translateY(-8px); max-height:0; padding:0 24px; overflow:hidden;
  transition:opacity .2s ease, transform .3s ease, max-height .3s ease, padding .3s ease, margin .3s ease;
}
.calc-plan.show{ opacity:1; transform:translateY(0); max-height:600px; padding:20px 24px; }
.calc-plan h4{ font-size:13px; font-weight:700; color:#2EC4B6; letter-spacing:.05em; margin:0 0 8px; }
.calc-plan .cp-desc{ font-size:14px; color:#374151; margin:0 0 10px; line-height:1.5; }
.calc-plan ul{ display:grid; gap:0; margin:0 0 4px; }
.calc-plan li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:#1E5FAD; font-weight:500; line-height:1.8; }
.calc-plan li svg{ flex:none; margin-top:6px; }
.calc-plan .cp-btn{ display:block; width:fit-content; background:#1E5FAD; color:#fff; border-radius:50px; padding:10px 24px; font-weight:600; font-size:14px; margin-top:12px; transition:background .2s; }
.calc-plan .cp-btn:hover{ background:#16487f; }

/* ---- M3: variables de tema (modo claro = valores actuales) ---- */
:root{
  --bg-primary:#FFFFFF; --bg-secondary:#F8FAFC; --bg-card:#FFFFFF;
  --text-primary:#1a1a2e; --text-secondary:#6B7280; --text-muted:#9CA3AF;
  --border-color:#E2E8F0; --navbar-bg:rgba(255,255,255,0.95);
  --footer-bg:#11243a; --shadow:0 4px 20px rgba(0,0,0,0.08);
}
/* Modo oscuro: además de las variables de tema, se remapea la paleta neutra
   existente (--blanco, --perla, --tinta...) para que TODO el sitio cambie
   sin tocar las reglas ya escritas. Los colores de marca NO cambian. */
[data-theme="dark"]{
  --bg-primary:#0F172A; --bg-secondary:#1E293B; --bg-card:#1E293B;
  --text-primary:#F1F5F9; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
  --border-color:#334155; --navbar-bg:rgba(15,23,42,0.95);
  --footer-bg:#11243a; --shadow:0 4px 20px rgba(0,0,0,0.3);
  --blanco:#1E293B; --perla:#0F172A; --gris-100:#334155; --gris-200:#334155;
  --gris-400:#94A3B8; --tinta:#F1F5F9; --tinta-suave:#CBD5E1; --azul-claro:#15233b;
}
/* Superficies con #fff hardcodeado → se oscurecen en modo oscuro */
[data-theme="dark"] .nav{ background:rgba(15,23,42,0.55); }
[data-theme="dark"] .nav.scrolled{ background:var(--navbar-bg); }
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .float-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .const-art,
[data-theme="dark"] .why-card,
[data-theme="dark"] .step-num,
[data-theme="dark"] .calc-wrap,
[data-theme="dark"] .filter,
[data-theme="dark"] .case,
[data-theme="dark"] .case-foot,
[data-theme="dark"] .t-card,
[data-theme="dark"] .slider-btn,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .contact-pts .ci,
[data-theme="dark"] .form-card,
[data-theme="dark"] .chat-pop,
[data-theme="dark"] .toast,
[data-theme="dark"] .svc-tile{ background:var(--bg-card); }
[data-theme="dark"] .svc-tile{ border-color:var(--border-color); }
[data-theme="dark"] .input:focus,[data-theme="dark"] textarea:focus,[data-theme="dark"] select:focus{ background:var(--bg-card); }
[data-theme="dark"] .hero{ background:var(--bg-primary); }
[data-theme="dark"] .constructoras{ background:linear-gradient(180deg,#15233b,var(--bg-primary)); }
[data-theme="dark"] .emprendedor{ background:linear-gradient(180deg,#15233b,var(--bg-primary)); }
[data-theme="dark"] .contact{ background:linear-gradient(180deg,var(--bg-primary),#15233b); }
[data-theme="dark"] .case-foot .tag{ background:#15233b; }
[data-theme="dark"] .chat-body{ background:var(--bg-secondary); color:var(--text-primary); }
[data-theme="dark"] .chat-close{ background:#334155; color:#cbd5e1; }
[data-theme="dark"] .toast{ border-color:var(--border-color); }
/* El degradado del fondo del hero también */
[data-theme="dark"] .hero::before{ opacity:.25; }
/* Transición suave entre modos (no pisa transiciones existentes por baja especificidad de *) */
html,body{ transition:background-color .3s ease, color .3s ease; }
*{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---- M3/M4: controles del navbar (tema + idioma) ---- */
.nav-controls{ display:flex; align-items:center; gap:10px; }
.theme-toggle{ width:36px; height:36px; border-radius:50%; background:var(--bg-secondary); border:1px solid var(--border-color); cursor:pointer; display:grid; place-items:center; color:var(--text-secondary); flex:none; padding:0; }
.theme-toggle svg{ width:18px; height:18px; transition:transform .4s ease; }
.theme-toggle:hover{ color:var(--azul); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle svg{ transform:rotate(180deg); }
.lang-switch{ display:inline-flex; gap:4px; }
.lang-btn{ padding:4px 10px; font-size:12px; font-weight:600; border-radius:20px; border:1px solid var(--border-color); background:transparent; color:var(--text-secondary); cursor:pointer; }
.lang-btn.active{ background:#1E5FAD; color:#fff; border-color:#1E5FAD; }

/* ---- M6: tooltips de ayuda en cards de servicios ---- */
.svc-card{ overflow:visible; }                 /* permitir que el tooltip se muestre fuera */
.svc-card::before{ border-radius:var(--radio) var(--radio) 0 0; }
.help-tooltip{ position:absolute; top:14px; right:14px; color:#9CA3AF; cursor:help; z-index:4; line-height:0; }
.help-tooltip:hover{ color:#1E5FAD; }
.help-tooltip svg{ width:14px; height:14px; }
.help-tooltip::after{
  content:attr(data-tip); position:absolute; bottom:24px; right:-4px;
  background:#1a1a2e; color:#fff; font-size:12px; font-weight:400; line-height:1.4; text-align:left;
  width:max-content; max-width:220px; border-radius:8px; padding:8px 12px;
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:30;
}
.help-tooltip::before{
  content:""; position:absolute; bottom:18px; right:4px;
  border:6px solid transparent; border-top-color:#1a1a2e; opacity:0; transition:opacity .15s ease; z-index:30;
}
.help-tooltip:hover::after,.help-tooltip:hover::before,
.help-tooltip.open::after,.help-tooltip.open::before{ opacity:1; }

/* Fade sutil al cambiar de idioma */
body.lang-fade{ opacity:0; transition:opacity .2s ease; }

/* ================================================================
   MEJORAS v4 — Video hero, badges de garantía, antes/después, blog
   ================================================================ */

/* ---- Helpers de encabezado para las secciones nuevas ---- */
.section-eyebrow{ display:block; text-align:center; font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--azul); margin-bottom:14px; }
.antes-despues-section h2, .blog-section h2{ text-align:center; font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.02em; margin:0 0 14px; }
.section-subtitle{ text-align:center; max-width:640px; margin:0 auto; color:var(--tinta-suave); font-size:1.05rem; }

/* ---- MEJORA 1: Video de fondo en el hero ---- */
.hero-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video-bg video{ width:100%; height:100%; object-fit:cover; opacity:0.12; }
.hero-video-overlay{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(240,247,255,0.88) 100%); }
[data-theme="dark"] .hero-video-bg video{ opacity:0.08; }
[data-theme="dark"] .hero-video-overlay{ background:linear-gradient(135deg, rgba(15,23,42,0.93) 0%, rgba(30,42,63,0.90) 100%); }

/* ---- MEJORA 2: Badges de garantía en hero ---- */
.garantia-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; justify-content:center; }
.garantia-badge{ display:flex; align-items:center; gap:6px; background:var(--bg-card,#fff); border:1px solid var(--border-color,#E2E8F0); border-radius:50px; padding:6px 14px 6px 10px; font-size:13px; font-weight:500; color:var(--text-secondary,#6B7280); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
@media (max-width:768px){
  .garantia-badges{ gap:8px; }
  .garantia-badge{ font-size:12px; padding:5px 12px 5px 8px; }
}

/* ---- MEJORA 3: Sello de garantía en la calculadora ---- */
.garantia-sello{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:50px; padding:6px 14px 6px 10px; font-size:12px; font-weight:500; color:rgba(255,255,255,0.9); margin:12px auto; width:fit-content; }

/* ---- MEJORA 4: Sección Antes y Después ---- */
.antes-despues-section{ padding:80px 0; background:var(--bg-secondary,#F8FAFC); }
.ad-slider-wrapper{ margin-top:48px; }
.ad-caso{ display:none; }
.ad-caso.active{ display:block; }
.ad-label-empresa{ text-align:center; font-size:13px; font-weight:600; color:#1E5FAD; letter-spacing:0.05em; margin-bottom:20px; text-transform:uppercase; }
.ad-comparador{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; }
.ad-panel{ background:var(--bg-card,white); border-radius:16px; padding:20px; box-shadow:var(--shadow,0 4px 20px rgba(0,0,0,0.08)); }
.ad-panel-label{ font-size:11px; font-weight:700; letter-spacing:0.1em; color:#EF4444; margin-bottom:12px; }
.ad-panel-label-despues{ color:#2EC4B6; }
.ad-mockup{ border-radius:8px; overflow:hidden; border:2px solid #F3F4F6; margin-bottom:16px; }
.ad-mockup-despues{ border-color:#2EC4B6; border-width:2px; }
.ad-mockup svg{ display:block; width:100%; }
.ad-puntos{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.ad-puntos li{ font-size:13px; color:var(--text-secondary,#6B7280); display:flex; align-items:center; gap:6px; }
.ad-divisor{ display:flex; align-items:center; justify-content:center; padding-top:80px; }
.ad-divisor-icono{ width:36px; height:36px; background:linear-gradient(135deg,#1E5FAD,#2EC4B6); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:16px; font-weight:bold; box-shadow:0 4px 12px rgba(30,95,173,0.3); }
.ad-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:32px; }
.ad-nav-btn{ width:40px; height:40px; border-radius:50%; border:2px solid var(--border-color,#E2E8F0); background:var(--bg-card,white); color:var(--text-primary,#1a1a2e); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; }
.ad-nav-btn:hover{ border-color:#1E5FAD; color:#1E5FAD; }
.ad-dots{ display:flex; gap:8px; }
.ad-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-color,#E2E8F0); cursor:pointer; transition:all 0.2s; }
.ad-dot.active{ background:#1E5FAD; width:24px; border-radius:4px; }
.ad-cta-wrapper{ text-align:center; margin-top:40px; }
.ad-cta-wrapper p{ font-size:18px; font-weight:600; color:var(--text-primary,#1a1a2e); margin-bottom:16px; }
@media (max-width:768px){
  .ad-comparador{ grid-template-columns:1fr; }
  .ad-divisor{ padding-top:0; transform:rotate(90deg); margin:8px auto; }
}

/* ---- MEJORA 5: Sección Blog / Recursos ---- */
.blog-section{ padding:80px 0; background:var(--bg-primary,#fff); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.blog-card{ background:var(--bg-card,white); border-radius:16px; overflow:hidden; border:1px solid var(--border-color,#E2E8F0); transition:transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(30,95,173,0.12); }
.blog-card-categoria{ position:absolute; top:12px; left:12px; background:white; color:#1E5FAD; font-size:10px; font-weight:700; letter-spacing:0.08em; padding:4px 10px; border-radius:20px; border:1px solid #E2E8F0; z-index:2; }
[data-theme="dark"] .blog-card-categoria{ background:var(--bg-secondary); border-color:var(--border-color); }
.blog-card-img{ position:relative; overflow:hidden; }
.blog-card-img svg{ display:block; width:100%; }
.blog-card-content{ padding:20px; }
.blog-card-content h3{ font-size:16px; font-weight:700; color:var(--text-primary,#1a1a2e); margin-bottom:10px; line-height:1.4; }
.blog-card-content p{ font-size:14px; color:var(--text-secondary,#6B7280); line-height:1.6; margin-bottom:16px; }
.blog-card-meta{ display:flex; align-items:center; justify-content:space-between; }
.blog-tiempo{ display:flex; align-items:center; gap:4px; font-size:12px; color:#9CA3AF; }
.blog-cta{ font-size:13px; font-weight:600; color:#1E5FAD; text-decoration:none; transition:color 0.2s; }
.blog-cta:hover{ color:#2EC4B6; }
@media (max-width:1024px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

/* ================================================================
   FIX NAVBAR MÓVIL — BUG 1 (layout) y BUG 2 (no ocultar en scroll)
   ================================================================ */
/* El selector de idioma del menú móvil queda oculto en desktop */
.lang-switch--mobile{ display:none; }

@media (max-width:768px){
  /* Fila única ordenada: [Logo] · · · [🌙] [Cotiza gratis] [☰] */
  .nav .container{ gap:8px; padding-inline:14px; }
  /* El logo puede encogerse como último recurso (nunca corta el CTA) */
  .logo{ flex:0 1 auto; min-width:0; }
  .logo span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Grupo derecho: no se encoge */
  .nav-right{ gap:8px; flex-shrink:0; }
  .nav-controls{ gap:8px; }
  /* ES/EN se mueven al menú desplegable → ocultar en el navbar */
  .nav-controls .lang-switch{ display:none; }
  /* Toggle de tema más compacto */
  .theme-toggle{ width:32px; height:32px; flex-shrink:0; }
  /* Botón "Cotiza gratis" compacto pero 100% visible */
  #navCta{ font-size:13px; padding:8px 14px; white-space:nowrap; flex-shrink:0; }
  /* Hamburguesa siempre visible y sin encoger */
  .burger{ flex-shrink:0; }

  /* Selector de idioma dentro del menú móvil desplegable */
  .mobile-menu .lang-switch--mobile{
    display:flex; gap:8px; margin-top:16px; padding-top:16px;
    border-top:1px solid var(--border-color,#E2E8F0); justify-content:center;
  }
}

/* En pantallas muy estrechas se muestra solo el ícono del koala (sin texto)
   para que el botón "Cotiza gratis" siempre quepa completo. */
@media (max-width:420px){
  .nav .logo span{ display:none; }
}
/* ================================================================
   PÁGINAS INTERIORES (rutas propias /servicios/, /portafolio/, etc.)
   ================================================================ */
/* Separa la primera sección del navbar fijo (+ barra de urgencia) */
.page-interior section:first-of-type{ padding-top:calc(var(--nav-h) + var(--urg-h) + 46px); }
/* Tamaño del H1 (título principal de cada página) — igual que los h2 de sección */
.section-head h1{ font-size:clamp(1.7rem,4vw,2.5rem); margin:16px 0 14px; letter-spacing:-.02em; }
.const-text h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin:16px 0 18px; letter-spacing:-.02em; }