:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#4a5a73;

  --blue:#1f4fd8;
  --cyan:#3b82f6;
  --vio:#2563eb;

  --deep:#0f3c88;
  --deep2:#0b2f6f;

  --shadow: 0 18px 60px rgba(11,18,32,.12);
  --shadow2: 0 26px 90px rgba(11,18,32,.14);

  --r:18px;
  --r2:26px;
  --container: 1140px;
  --focus: 0 0 0 4px rgba(51,214,255,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#fff; /* ✅ blanco general */
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--container), calc(100% - 32px)); margin-inline:auto}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:14px;border:1px solid transparent;
  font-weight:900;line-height:1;cursor:pointer;user-select:none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}

.btn--primary{
  color:#fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue), var(--vio));
  box-shadow: 0 16px 46px rgba(31,123,255,.28);
}
.btn--primary:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow: 0 22px 70px rgba(31,123,255,.36);
  filter:saturate(1.08);
}

.btn--ghost{
  color:var(--ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(11,18,32,.10);
}
.btn--ghost:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow: 0 16px 52px rgba(11,18,32,.14);
}

.btn--whatsapp{
  color:#fff;
  background: linear-gradient(135deg, #25D366, #19b85a);
  box-shadow: 0 14px 40px rgba(25,184,90,.22);
}
.btn--whatsapp:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow: 0 18px 56px rgba(25,184,90,.28);
  filter:saturate(1.06);
}

.btn--whiteBlue{
  background:#fff;
  color: var(--blue);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 16px 48px rgba(0,0,0,.10);
}
.btn--whiteBlue:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
}

/* Topbar + Header */
.topbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.topbar__left{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted);font-size:14px;font-weight:800}
.topbar__link{color:var(--ink);opacity:.9}
.dot{opacity:.55}
.chip{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background: rgba(31,123,255,.14);
  color: var(--blue);
  font-weight:900;font-size:12px;
}
.topbar__cta{font-weight:900;color:var(--blue)}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  
}
.header__inner{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);position:relative;align-items:center;justify-content:space-between;gap:14px;padding:14px 0; display: flex; flex-wrap: wrap;}

/* Brand */
.brand{display:flex;align-items:center;gap:12px; flex-wrap:wrap; justify-content: center;}
.brand__logo{
  width:78px;height:78px;object-fit:contain;border-radius:18px;
  background: transparent;
  border:1px none;
  box-shadow: none;
}
.brand__text{display:flex;flex-direction:column;line-height:1.05; text-align:center; width:100%}
.brand_text strong {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 2px;
  color: var(--blue); /* azul del card */
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.brand__text small{color:var(--muted);font-weight:900;font-size:12px}

/* Nav */
.nav{display:flex;align-items:center;gap:18px;color:var(--muted);font-weight:900}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{text-decoration:none;background: rgba(31,123,255,.12);color: var(--ink);}

.header__actions{display:flex;align-items:center;gap:10px}

/* Sections */
.section{padding:76px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section__head h2{margin:0;font-size:34px;letter-spacing:-.3px}
.section__head p{margin:0;max-width:560px;line-height:1.6;font-weight:800;color:var(--muted)}
.section__head--white h2,
.section__head--white p{color:#fff}

/* Hero (blanco) */
.hero{padding:78px 0 60px;background:#fff}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.kicker{margin:0 0 10px;font-weight:1000;letter-spacing:.5px;color:var(--blue)}
.heroTitleCard{
  background: linear-gradient(180deg, rgba(15,60,136,.98), rgba(11,47,111,.98)); /* ✅ azul completo */
  border-radius:22px;
  padding:16px;
  box-shadow: 0 18px 60px rgba(31,123,255,.22);
  border: 1px solid rgba(255,255,255,.16);
}
.heroTitleCard h1{color:#fff}
.hero h1{margin:0;font-size:46px;line-height:1.05;letter-spacing:-.7px}
.sub{margin:14px 0 18px;color:var(--muted);font-size:16px;line-height:1.7;font-weight:800}
.hero__buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.hero__stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{
  background:#fff;border-radius:16px;padding:12px 14px;min-width:150px;
  box-shadow: var(--shadow);
}
.stat strong{display:block;font-size:16px;font-weight:1000}
.stat span{display:block;color:var(--muted);font-weight:900;margin-top:2px;font-size:13px}

/* Panel */
.panelCard{
  height:100%;
  background:#fff;
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding:18px;
}
.panelCard h3{margin:0 0 10px}
.panelCard ul{margin:0;padding-left:18px;color:var(--muted);font-weight:900;line-height:1.9}

/* Services background blue */
.section--servicesBlue{
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(51,214,255,.28), transparent 60%),
    radial-gradient(1200px 520px at 85% 15%, rgba(31,123,255,.26), transparent 60%),
    linear-gradient(180deg, rgba(15,60,136,.96), rgba(11,47,111,.96));
}

/* Grids */
.grid{display:grid;gap:16px}
.grid--services{grid-template-columns:repeat(3,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--gallery{grid-template-columns:repeat(3,1fr)}

/* Service cards white */
.serviceCard{
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background:#fff;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:400px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.serviceCard:hover{transform: translateY(-4px); box-shadow: var(--shadow2)}
.serviceCard__top{padding:18px 18px 12px}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:1000;letter-spacing:.2px;
  color:var(--blue);
  background: rgba(31,123,255,.14);
  padding:6px 10px;border-radius:999px;
}
.serviceCard h3{margin:10px 0 8px;font-size:18px}
.serviceCard p{margin:0;color:var(--muted);line-height:1.55;font-weight:800}

/* Slider */
.slider{margin-top:auto;padding:14px 14px 16px;position:relative}
.slider__frame{
  position:relative;height:185px;border-radius:18px;overflow:hidden;
  background:#eaf3ff;
  box-shadow: 0 12px 40px rgba(11,18,32,.10);
}
.slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  opacity: 1;
  transition: opacity 0.35s ease-in-out;
}


.slider__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.80);
  background: rgba(11,18,32,.42);
  color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
  backdrop-filter: blur(10px);
  z-index:2;
}
.slider__btn:hover{transform:translateY(-50%) scale(1.07); background: rgba(11,18,32,.56)}
.slider__btn[data-dir="-1"]{left:18px}
.slider__btn[data-dir="1"]{right:18px}
.slider__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.slider__dot{width:8px;height:8px;border-radius:999px;background: rgba(11,18,32,.18)}
.slider__dot.is-active{background: linear-gradient(135deg, var(--cyan), var(--blue))}

/* Why cards blue */
.feature{
  padding:18px;
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background:#fff;
}
.feature--blue{
  background: linear-gradient(180deg, rgba(15,60,136,.96), rgba(11,47,111,.96));
  color:#fff;
}
.feature--blue p{color: rgba(255,255,255,.92)}
.feature h3{margin:0 0 8px;font-weight:1000}
.feature p{margin:0;font-weight:800;line-height:1.6}

/* Gallery */
.gimg{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background:#eaf3ff;
}

/* Contact background blue + form blue */
.section--contactBlue{
  background:
    radial-gradient(1200px 520px at 25% 0%, rgba(51,214,255,.22), transparent 60%),
    radial-gradient(1200px 520px at 85% 15%, rgba(31,123,255,.24), transparent 60%),
    linear-gradient(180deg, rgba(15,60,136,.96), rgba(11,47,111,.96));
}

.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start}
.contactCard{
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background:#fff;
  padding:18px;
}
.contactCard--blue{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
}
.contactCard--blue a{color:#fff;text-decoration:underline}
.contactCard--blue .muted{color: rgba(255,255,255,.88)}

.form{
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background:#fff;
  padding:18px;
}
.form--blue{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{font-weight:1000}
input,select,textarea{
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(11,18,32,.16);
  font:inherit;outline:none;background:#fff;color:var(--ink);
}
.form--blue input,
.form--blue select,
.form--blue textarea{
  background: rgba(255,255,255,.96);
}
input:focus,select:focus,textarea:focus{box-shadow: var(--focus); border-color: rgba(51,214,255,.40)}
.form__note{margin:10px 0 0;font-weight:800}
.form__note--white{color: rgba(255,255,255,.92)}

/* Footer white */
.footer{padding:28px 0;background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-weight:900}
.footer__links{display:flex;gap:12px}
.footer__links a{padding:6px 10px;border-radius:12px}
.footer__links a:hover{text-decoration:none;background: rgba(31,123,255,.12);color: var(--ink)}
/* ===== Why Choose Dexneutron (upgrade) ===== */
#why .section__head h2{
  letter-spacing: .2px;
}

#why .section__head p{
  max-width: 720px;
  opacity: .92;
}

#why .feature{
  background: #fff;
  border: 1px solid rgba(11,18,32,.10);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 12px 28px rgba(11,18,32,.10);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#why .feature::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  opacity:.95;
}

#why .feature h3{
  margin: 2px 0 8px;
}

#why .feature p{
  margin: 0;
  line-height: 1.55;
  color: rgba(11,18,32,.78);
}

#why .feature:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(11,18,32,.14);
  border-color: rgba(11,18,32,.16);
}

/* subtle entrance animation */
@media (prefers-reduced-motion: no-preference){
  #why .feature{
    opacity: 0;
    transform: translateY(14px);
    animation: whyIn .6s ease forwards;
  }
  #why .feature:nth-child(1){ animation-delay: .05s; }
  #why .feature:nth-child(2){ animation-delay: .12s; }
  #why .feature:nth-child(3){ animation-delay: .19s; }

  @keyframes whyIn{
    to{ opacity:1; transform: translateY(0); }
  }
}
/* WhatsApp floating */
.whatsappFab{
  position:fixed; right:18px; bottom:18px;
  padding:14px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, #25D366, #19b85a);
  color:#fff;
  font-weight:1000;
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.55);
}

/* Responsive */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr}
  .grid--services{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .grid--gallery{grid-template-columns:repeat(2,1fr)}
  .contactGrid{grid-template-columns:1fr}
  .section__head{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .grid--services{grid-template-columns:1fr}
  .grid--gallery{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .brand__logo{width:72px;height:72px}
  .nav{display:none}
}
/* WhatsApp button inside Service cards */
.waServiceBtn{
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .25);
  transition: transform .15s ease, filter .15s ease;
}

.waServiceBtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.waServiceBtn:active{
  transform: translateY(0);
}

.waIcon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.03 2.01C8.28 2.01 2 8.29 2 16.04c0 2.75.8 5.44 2.33 7.74L3 30l6.38-1.67a13.98 13.98 0 0 0 6.65 1.69h.01c7.75 0 14.03-6.28 14.03-14.03S23.78 2.01 16.03 2.01zm8.17 20.25c-.34.96-1.69 1.77-2.7 1.99-.69.15-1.6.27-4.64-.99-3.89-1.6-6.4-5.53-6.59-5.78-.18-.25-1.58-2.1-1.58-4.01 0-1.91 1-2.85 1.35-3.24.35-.39.77-.48 1.03-.48h.74c.24 0 .56-.09.87.66.34.83 1.16 2.85 1.26 3.06.1.21.16.46.03.74-.13.28-.2.46-.4.7-.2.24-.42.54-.6.72-.2.2-.4.42-.17.83.24.41 1.06 1.75 2.28 2.83 1.57 1.4 2.9 1.83 3.31 2.03.41.2.65.17.89-.1.24-.27 1.02-1.19 1.29-1.6.27-.41.54-.34.91-.2.37.14 2.34 1.1 2.74 1.3.4.2.67.3.77.47.1.17.1.99-.24 1.95z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.03 2.01C8.28 2.01 2 8.29 2 16.04c0 2.75.8 5.44 2.33 7.74L3 30l6.38-1.67a13.98 13.98 0 0 0 6.65 1.69h.01c7.75 0 14.03 6.28 14.03 14.03S23.78 2.01 16.03 2.01zm8.17 20.25c-.34.96-1.69 1.77-2.7 1.99-.69.15-1.6.27-4.64-.99-3.89-1.6-6.4-5.53-6.59-5.78-.18-.25-1.58-2.1-1.58-4.01 0-1.91 1-2.85 1.35-3.24.35-.39.77-.48 1.03-.48h.74c.24 0 .56-.09.87.66.34.83 1.16 2.85 1.26 3.06.1.21.16.46.03.74-.13.28-.2.46-.4.7-.2.24-.42.54-.6.72-.2.2-.4.42-.17.83.24.41 1.06 1.75 2.28 2.83 1.57 1.4 2.9 1.83 3.31 2.03.41.2.65.17.89-.1.24-.27 1.02-1.19 1.29-1.6.27-.41.54-.34.91-.2.37.14 2.34 1.1 2.74 1.3.4.2.67.3.77.47.1.17.1.99-.24 1.95z"/></svg>') center / contain no-repeat;
}
/* Hide WhatsApp service buttons (client request) */
.waServiceBtn{
  display: none !important;
}
/* Header contact icons */
.headerActions {
  display: flex;
  align-items: center;
  gap: 22px; /* separación entre íconos */
}

.iconBtn {
  font-size: 26px; /* tamaño del ícono */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover general */
.iconBtn:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

/* Colores por servicio */
.iconCall {
  color: #1b2032;
}

.iconMail {
  color: #d93025; /* Gmail */
}

.iconWa {
  color: #25D366; /* WhatsApp */
}

.iconFb {
  color: #1877F2; /* Facebook */
}
/* ===== BRAND (LOGO + NAME) - BIG VERSION ===== */
.brand{
  display:flex;
  align-items:center;
  gap:22px;
}

/* LOGO GRANDE */
.brand__logo{
  width:95px;
  height:auto;
}

/* TEXTO CONTENEDOR */
.brand__text{
  line-height:1.05;
}

/* DEXNEUTRON */
.brand__text strong{
  font-size:40px;
  font-weight:900;
  color:#1f4fd8;
}

/* TECHNOLOGIES */
.brand__text small{
  font-size:22px;
  font-weight:700;
  color:#2b6cff;
  letter-spacing:.8px;
}
/* TEMP: Hide WhatsApp floating button */
.whatsapp,
.whatsapp-btn,
.wa-btn,
.floating-whatsapp,
.waServiceBtn {
  display: none !important;
}
.whatsappFab {
  display: none !important;
}
/* What we do (pro) */
.whatwedo { margin-top: 16px; }

.whatwedo__title{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.whatwedo__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.whatwedo__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(14, 28, 52, .12);
  box-shadow: 0 10px 26px rgba(11, 18, 32, .10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.whatwedo__icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(31,123,255,.12);
  border: 1px solid rgba(31,123,255,.22);
  font-size: 18px;
}

.whatwedo__text{
  font-weight: 800;
  color: #0b1220;
  line-height: 1.2;
}

.whatwedo__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(11, 18, 32, .14);
  border-color: rgba(31,123,255,.35);
}

@media (max-width: 520px){
  .whatwedo__grid{ grid-template-columns: 1fr; }
}

/* =========================
   HOW IT WORKS — PRO FIX
========================= */

/* el contenedor del section */
.how-it-works{
  padding: 56px 0;
}

/* header centrado y con mejor jerarquía */
.how-it-works .section__head{
  text-align: center;
  margin-bottom: 22px;
}

.how-it-works .section__head h2{
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin: 0 0 8px;
  letter-spacing: .2px;
}

.how-it-works .section__head p{
  margin: 0 auto;
  max-width: 720px;
  color: rgba(11,18,32,.72);
  line-height: 1.45;
}

/* grid real en vez de “lista triste” */
.how-steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* cada paso como card */
.how-step{
  position: relative;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.12);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 12px 30px rgba(11,18,32,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
  min-height: 170px;
}

.how-step::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(31,123,255,.10), rgba(51,216,255,.08));
  opacity: 0;
  transition: opacity .22s ease;
}

.how-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(11,18,32,.14);
  border-color: rgba(31,123,255,.35);
}

.how-step:hover::before{ opacity: 1; }

/* número estilo badge */
.step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 22px rgba(31,123,255,.22);
  margin-bottom: 10px;
}

/* texto */
.how-step h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.how-step p{
  margin: 0;
  color: rgba(11,18,32,.74);
  line-height: 1.4;
  font-size: .98rem;
}

/* responsive */
@media (max-width: 980px){
  .how-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .how-steps{ grid-template-columns: 1fr; }
  .how-it-works{ padding: 40px 0; }
}
/* ===== How It Works (Pro Cards) ===== */
.howitworks {
  padding: 64px 0;
}

.howitworks .section__head {
  text-align: center;
  margin-bottom: 28px;
}

.howitworks .section__head h2 {
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.howitworks .section__head p {
  color: var(--muted);
  font-size: 18px;
}

/* Grid */
.howitworks .steps-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
}

@media (max-width: 900px) {
  .howitworks .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.howitworks .step-card {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(17, 18, 32, .08);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 40px rgba(17, 18, 32, .08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}

.howitworks .step-card::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(27,123,255,.18), transparent 60%);
  pointer-events: none;
}

.howitworks .step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(17, 18, 32, .12);
  border-color: rgba(27,123,255,.25);
}

.howitworks .step-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(27,123,255,.12);
  border: 1px solid rgba(27,123,255,.18);
}

.howitworks .step-icon i {
  font-size: 26px;
  color: var(--blue);
}

.howitworks .step-card h3 {
  font-size: 20px;
  margin: 6px 0 10px;
}

.howitworks .step-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Stars row */
.howitworks .stars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  color: var(--muted);
}

.howitworks .stars {
  display: inline-flex;
  gap: 6px;
}

.howitworks .stars i {
  color: var(--blue);
  font-size: 16px;
}
/* ===== HOW IT WORKS – PRO VERSION ===== */

.howitworks {
  padding: 80px 0;
}

.how-steps {
  gap: 22px;
}

.how-step {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}

.how-step::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(27,123,255,.18), transparent 60%);
}

.how-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.14);
}

.how-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,123,255,.15);
  border: 1px solid rgba(27,123,255,.25);
}

.how-icon i {
  font-size: 26px;
  color: var(--blue);
}

.how-step h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.how-step p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

/* Stars */
.how-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--muted);
}

.how-stars i {
  color: var(--blue);
}
/* =========================
   HOW IT WORKS (ELITE)
========================= */
.howitworks .section__head {
  text-align: center;
}

.howitworks .section__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  margin: 0;
}

.howitworks .section__head p {
  margin-top: 10px;
  color: var(--muted);
}

.how-cards {
  margin-top: 26px;
  align-items: stretch;
}

.how-card {
  background: linear-gradient(180deg, rgba(235, 244, 255, 0.9), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(11, 81, 160, 0.12);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 50px rgba(11, 81, 160, 0.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}

.how-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at 30% 10%, rgba(51, 173, 255, 0.20), transparent 55%),
              radial-gradient(circle at 70% 20%, rgba(31, 123, 255, 0.18), transparent 60%);
  pointer-events: none;
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(11, 81, 160, 0.14);
  border-color: rgba(11, 81, 160, 0.22);
}

.how-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, rgba(31, 123, 255, .16), rgba(51, 173, 255, .14));
  border: 1px solid rgba(11, 81, 160, 0.14);
  box-shadow: 0 12px 30px rgba(11, 81, 160, 0.12);
}

.how-icon i {
  font-size: 28px;
  color: var(--blue);
}

.how-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
}

.how-num {
  color: var(--blue);
  font-weight: 800;
  margin-right: 6px;
}

.how-card p {
  margin: 10px 0 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

.how-rating {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}

.how-stars {
  display: inline-flex;
  gap: 6px;
}

.how-stars i {
  color: var(--blue);
  filter: drop-shadow(0 6px 14px rgba(245, 180, 1, 0.151));
}

@media (max-width: 920px) {
  .how-rating {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* TEST: si ves el fondo rosa, tu CSS sí está cargando */
body { outline: 6px solid hotpink !important; }
/* HIDE TOP CONTACT BAR (FORCE) */



/* If the phone/email pills are inside header actions */
.header__actions,
.headerActions,
.header-actions,
.header__contact,
.headerContact,
.header-contacts,
.headerContacts,
.header__cta,
.headerCta {
  display: none !important;
}

/* ===============================
   HEADER ICONS – COLOR FIX
================================ */

.headerActions i,
.header-actions i,
.header__actions i,
.social-icons i {
  color: #1f6fff; /* azul pro */
  font-size: 18px;
  opacity: 1;
}

/* Hover elegante */
.headerActions a:hover i,
.header-actions a:hover i,
.header__actions a:hover i,
.social-icons a:hover i {
  color: #00c853; /* verde WhatsApp style */
}

/* === FORCE SHOW HEADER ICONS === */
.headerActions,
.header-actions,
.header__actions,
.headerContact,
.header-contact,
.header_contacts,
.header-contacts {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}


/* === HEADER ICONS: tamaño + colores correctos === */
.headerActions .iconBtn { 
  font-size: 26px !important; 
}

.headerActions .iconCall { color: #1b2032 !important; }
.headerActions .iconMail { color: #1877F2 !important; }
.headerActions .iconWa   { color: #25D366 !important; }
.headerActions .iconFb   { color: #1877F2 !important; }

/* ===========================
   HEADER ICONS — HARD OVERRIDE
   (gana contra cualquier !important anterior)
=========================== */

/* Tamaño y visibilidad */
header.header .headerActions a.iconBtn i,
header.header .header-actions a.iconBtn i,
header.header .header__actions a.iconBtn i,
header.header .headerContact a.iconBtn i,
header.header .header-contact a.iconBtn i {
  font-size: 28px !important;
  opacity: 1 !important;
  display: inline-block !important;
}

/* Colores por icono (Font Awesome) */
header.header .headerActions i.fa-phone,
header.header .header-actions i.fa-phone,
header.header .header__actions i.fa-phone {
  color: #1b2032 !important;
}

header.header .headerActions i.fa-envelope,
header.header .header-actions i.fa-envelope,
header.header .header__actions i.fa-envelope {
  color: #1877f2 !important;
}

header.header .headerActions i.fa-whatsapp,
header.header .header-actions i.fa-whatsapp,
header.header .header__actions i.fa-whatsapp {
  color: #25D366 !important;
}

header.header .headerActions i.fa-facebook,
header.header .header-actions i.fa-facebook,
header.header .header__actions i.fa-facebook {
  color: #1877F2 !important;
}

/* Hover pro */
header.header .headerActions a.iconBtn:hover i,
header.header .header-actions a.iconBtn:hover i,
header.header .header__actions a.iconBtn:hover i {
  transform: scale(1.12);
  transition: transform .2s ease, opacity .2s ease;
}
header.header i.fa-facebook-f { color:#1877F2 !important; font-size:28px !important; }

/* === OCULTAR TOP BAR SUPERIOR (FAST RESPONSE, PHONE, EMAIL, QUOTE) === */
.topbar,
.top-bar,
.headerTop,
.header-top,
.topHeader,
.top-header {
  display: none !important;
}
/* ===== HEADER LAYOUT FIX ===== */
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.headerRight{
  display:flex;
  align-items:center;
  gap:22px;
}

/* menú */
.nav{
  display:flex !important;
  align-items:center;
  gap:18px;
}
.nav a{
  text-decoration:none;
  font-weight:700;
}

/* iconos */
.headerActions{
  display:flex !important;
  align-items:center;
  gap:14px;
}
.headerActions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.headerActions i{
  font-size:22px;
}

/* ===== FOOTER (2 niveles) ===== */
.site-footer{
  background:#fff;
  color:#000;
  margin-top:60px;
}

/* Línea sutil arriba del footer */
.site-footer{
  border-top:1px solid rgba(0,0,0,.12);
  box-shadow: 0 -8px 22px rgba(0,0,0,.06);
}

/* Nivel 1 */
.footer-main{
  max-width:1100px;
  margin:0 auto;
  padding:26px 18px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.footer-brand h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
  color:#000;
}

.footer-brand p{
  margin:0;
  font-size:14px;
  color:rgba(0,0,0,.75);
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-links a{
  color:#000;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  opacity:.85;
}

.footer-links a:hover{
  opacity:1;
  text-decoration:underline;
}

/* Nivel 2 */
.footer-sub{ padding: 14px 18px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
 
}

.footer-sub p{
  margin:0;
  font-size:13px;
  color:rgba(0,0,0,.70);
}

.footer-legal{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.footer-legal a{
  color:rgba(0,0,0,.70);
  text-decoration:none;
  font-weight:600;
}

.footer-legal a:hover{
  color:#000;
  text-decoration:underline;
}

.footer-legal .dot{
  color:rgba(0,0,0,.35);
}

/* Responsive */
@media (max-width:720px){
  .footer-main{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-links{
    justify-content:flex-start;
  }
  .footer-sub{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* Contact card - clean professional style */
.contact-card {
  background: #ffffff;
  color: #111;
}

/* Logo pequeño dentro de la card */
.contact-logo {
  width: 48px;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* Título */
.contact-card h3,
.contact-card h4 {
  color: #000;
}

/* Texto normal */
.contact-card p,
.contact-card span,
.contact-card li {
  color: #222;
}

/* Íconos */
.contact-card i {
  color: #000;
  opacity: 0.8;
}

/* Business hours más discreto */
.contact-card .business-hours {
  font-size: 13px;
  color: #444;
  margin-top: 6px;
}
.contact-logo{
  width: 115px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
/* FIX: Contact card white version */
.contactCard.contactCard--blue {
  background: #ffffff !important;
  color: #000000 !important;
  backdrop-filter: none !important;
}

/* Text inside contact card */
.contactCard.contactCard--blue h3,
.contactCard.contactCard--blue p,
.contactCard.contactCard--blue span,
.contactCard.contactCard--blue a,
.contactCard.contactCard--blue strong {
  color: #000000 !important;
}

/* Muted text */
.contactCard.contactCard--blue .muted {
  color: #444 !important;
}
/* ===== Reviews (Facebook-style) ===== */
.reviewsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.reviewCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.reviewStars{
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.reviewText{
  margin:0 0 12px 0;
  color:#111;
  line-height:1.5;
}

.reviewMeta{
  margin:0;
  font-size:13px;
  color:rgba(0,0,0,.65);
  font-weight:600;
}

/* Responsive */
@media (max-width: 900px){
  .reviewsGrid{ grid-template-columns: 1fr; }
  .reviewCard{ box-shadow: 0 10px 24px rgba(0,0,0,.08); }
}
/* =========================
   Reviews (pro styling)
   ========================= */

.reviewsSummary{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.reviewsSummaryLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

.reviewsAvg{
  font-size: 14px;
  color: rgba(0,0,0,.72);
}

.reviewsLink{
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  color: rgba(0,0,0,.85);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.reviewsLink:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
}

.reviewsGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .reviewsGrid{ grid-template-columns: 1fr; }
}

.reviewCard{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.reviewCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.reviewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.reviewWho{
  flex:1;
  min-width: 0;
}

.reviewName{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(0,0,0,.88);
  line-height: 1.1;
}

.reviewRole{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviewAvatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(6,62,128,.95), rgba(0,129,255,.85));
  color: white;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.reviewStars{
  font-size: 13px;
  letter-spacing: 1px;
  color: #f5b301; /* color original */
  white-space: nowrap;
  opacity: .9;
}

.reviewText{
  color: rgba(0,0,0,.78);
  line-height: 1.45;
  font-size: 14px;
  margin: 0 0 10px;
}

.reviewMeta{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.52);
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.reviewVerified{
  font-weight: 800;
  color: rgba(0,0,0,.65);
}

.reviewDot{
  opacity: .35;
}
.business-hours {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 13.5px;
  line-height: 1.45;
}

.business-hours .hours-title {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.business-hours p {
  margin: 0;
  color: #374151;
}

.business-hours .hours-note {
  margin-top: 2px;
  color: #6b7280;
  font-size: 12.5px;
}



.business-hours {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 13.5px;
  line-height: 1.45;
}

.business-hours .hours-title {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.business-hours p {
  margin: 0;
  color: #374151;
}

.business-hours .hours-note {
  margin-top: 2px;
  color: #6b7280;
  font-size: 12.5px;
}


/* ===== FIX CONTACT CARD ===== */

.contactCard{
  background: #ffffff;
  color: #111;
}

.contactCard h3{
  font-weight: 700;
  margin-bottom: 14px;
}

.contactCard p{
  margin-bottom: 10px;
  line-height: 1.4;
}

.contactCard a{
  color: #0b5ed7;
  font-weight: 600;
  text-decoration: none;
}

.contactCard a:hover{
  text-decoration: underline;
}

/* Business hours */
.contactCard .muted{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.15);
  font-size: 0.9rem;
  opacity: .75;
}
label {
  color: #fff;
}
.form label {
  color: #ffffff !important;
}


@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  section, 
  .container, 
  .wrapper {
    width: 100%;
    padding: 20px;
  }

  h1, h2, h3 {
    font-size: 1.4rem;
  }

  p {
    font-size: 1rem;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}
/* ===== MOBILE FIX HEADER ===== */
@media (max-width: 768px) {

  .header__inner{
    flex-direction: column;
    gap: 10px;
  }

  .nav{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .brand{
    justify-content: center;
  }

  .headerActions{
    justify-content: center;
  }

}



@media (max-width: 768px) {

  .header__inner {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
  }

  .brand {
    justify-content: center;
    width: 100%;
  }

  .brand__logo {
    width: 48px;
    height: 48px;
  }

  .brand_text strong {
    font-size: 16px;
  }

  .brand_text small {
    font-size: 11px;
  }

  .nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
}





@media (max-width: 768px){
  .hide-mobile{ 
    display: none !important; 
  }
}





/* Header compacto en móvil */
@media (max-width: 768px) {
  .header {
    padding: 6px 0;
  }

  .brand_logo {
    width: 42px;
    height: 42px;
  }

  .brand_text strong {
    font-size: 18px;
  }

  .brand_text small {
    display: none; /* quita el subtítulo */
  }

  .nav {
    display: none; /* menú se oculta en móvil */
  }
}




/* FIX: header__inner sin flex (se te estaba apilando) */
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Clase para ocultar secciones solo en móvil */
@media (max-width: 768px){
  .hide-mobile{ display:none !important; }

  /* Quita la barra de arriba en móvil para que no coma media pantalla */
  .topbar{ display:none !important; }

  /* Header más compacto */
  .header__inner{ padding:8px 0 !important; }
  .brand__logo{ width:46px !important; height:46px !important; }
  .brand__text strong{ font-size:20px !important; }
  .brand__text small{ font-size:12px !important; }

  /* Por si el nav se queda atravesado en algunos teléfonos */
  .nav{ display:none !important; }
}




/* SOLO OCULTAR HEADER AL HACER SCROLL EN MOVIL */
@media (max-width: 768px){
  .topbar,
  header.header{
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform .25s ease;
  }

  body.nav-hidden .topbar,
  body.nav-hidden header.header{
    transform: translateY(-120%);
  }
}



html, body {
  max-width: 100%;
  overflow-x: hidden;
}




/* Anti scroll horizontal global */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Fix del grid de reviews */
.reviewsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

/* Mobile: una sola columna */
@media (max-width: 768px) {
  .reviewsGrid {
    grid-template-columns: 1fr;
  }

  .reviewCard {
    width: 100%;
    max-width: 100%;
  }
}




/* RESET ANTI OVERFLOW DEFINITIVO */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

section, div, article {
  max-width: 100%;
}

/* Reviews */
.reviewsGrid {
  width: 100%;
  max-width: 100%;
  padding: 0 12px;
}

.reviewCard {
  width: 100%;
  max-width: 100%;
}

/* Todo lo que esté dentro de reviews */
.reviewsGrid * {
  max-width: 100%;
}





.reviewsGrid,
.reviewCard {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}


/* FIX DEFINITIVO SCROLL LATERAL EN MÓVIL */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Asegurar que ninguna sección se salga */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Por si alguna sección usa 100vw */
.section,
.container,
.hero,
.reviews,
.reviewsGrid,
.reviewCard,
.contact,
.contactSection {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}



/* ===== FIX DESKTOP WIDTH ===== */
@media (min-width: 769px) {
  .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  section,
  .wrapper {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ===== RESTORE DESKTOP LAYOUT (NO TOCA MOBILE) ===== */
@media (min-width: 1024px) {

  body {
    overflow-x: hidden;
  }

  .container,
  .wrapper,
  .header__inner,
  .section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}



/* ===== DESKTOP: VOLVER AL LAYOUT ORIGINAL (SIN TOCAR MÓVIL) ===== */
@media (min-width: 769px){

  /* Regresa el contenedor a como estaba antes (centrado y con ancho limitado) */
  .container{
    width: min(var(--container), calc(100% - 32px)) !important;
    max-width: var(--container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* IMPORTANTÍSIMO: neutraliza el bloque que forzó 100% en desktop */
  .section,
  section,
  .wrapper,
  .hero,
  .reviews,
  .reviewsGrid,
  .reviewCard,
  .contact,
  .contactSection{
    width: auto !important;
    max-width: none !important;
  }

  /* pero los contenidos internos siguen limitados por .container */
}



/* Logo más grande SOLO en móvil */
@media (max-width: 768px) {
  .brand__logo {
    width: 115px !important;
    height: 115px !important;
  }
}



/* ===== HEADER MOBILE: Logo izquierda + texto/iconos derecha (SIN tocar HTML / PC intacta) ===== */
@media (max-width: 768px) {

  /* Layout general del header en móvil */
  .header .header__inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px 14px !important;
  }

  /* OJO: esto permite mover logo y texto por separado aunque estén dentro de .brand */
  .header .brand{
    display: contents !important;
  }

  /* Logo a la izquierda, ocupando dos filas */
  .header .brand__logo{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 78px !important; /* ajusta si quieres + grande */
    height: auto !important;
  }

  /* Texto a la derecha (arriba) */
  .header .brand__text{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    margin: 0 !important;
  }

  .header .brand__text strong{
    display: block !important;
    line-height: 1.05 !important;
  }

  .header .brand__text small{
    display: block !important;
    line-height: 1.05 !important;
  }

  /* Iconos a la derecha (abajo) en fila */
  .header .headerActions{
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  .header .headerActions .iconBtn{
    display: inline-flex !important;
    margin: 0 !important;
  }

  /* Si el menú molesta en móvil, escóndelo (PC no cambia por el media query) */
  .header nav.nav{
    display: none !important;
  }

}

/* MOVER TEXTO + ICONOS HACIA EL CENTRO (solo móvil) */
@media (max-width: 768px) {

  /* mueve el texto Dexneutron Technology */
  .header .brand__text{
    transform: translateX(-75px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* mueve los iconos */
  .header .headerActions{
    transform: translateX(-70px) !important;
  }

}

@media (max-width: 768px) {

  .header .brand__logo{
    transform: translateX(40px);
  }

}


/* Quitar espacio entre header y primera sección SOLO en móvil */
@media (max-width: 768px) {

  section:first-of-type{
    margin-top: -20px !important;
    padding-top: 0 !important;
  }

}











/* =========================
   TABLET ONLY (769px–1024px)
   Mover iconos debajo del NAV, a la derecha
   No afecta móvil ni PC
========================= */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Convertimos el header en grid de 2 filas y 2 columnas */
  .header .header__inner{
    display: grid !important;
    grid-template-columns: auto 1fr;     /* logo | lado derecho */
    grid-template-rows: auto auto;       /* nav arriba | iconos abajo */
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }

  /* Logo queda fijo a la izquierda ocupando las 2 filas */
  .header .brand{
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: start;
  }

  /* Nav arriba a la derecha */
  .header .nav{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  /* Iconos abajo a la derecha (debajo del nav) */
  .header .headerActions{
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;

    display: flex !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Por si algún estilo viejo los “empuja” */
  .header .headerActions .iconBtn{
    margin: 0 !important;
  }
}


/* =========================
   TABLET ONLY (769px–1024px)
   Mover iconos debajo del NAV, a la derecha
   No afecta móvil ni PC
========================= */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Convertimos el header en grid de 2 filas y 2 columnas */
  .header .header__inner{
    display: grid !important;
    grid-template-columns: auto 1fr;     /* logo | lado derecho */
    grid-template-rows: auto auto;       /* nav arriba | iconos abajo */
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }

  /* Logo queda fijo a la izquierda ocupando las 2 filas */
  .header .brand{
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: start;
  }

  /* Nav arriba a la derecha */
  .header .nav{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  /* Iconos abajo a la derecha (debajo del nav) */
  .header .headerActions{
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;

    display: flex !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Por si algún estilo viejo los “empuja” */
  .header .headerActions .iconBtn{
    margin: 0 !important;
  }
}
/* Ajuste fino: mover iconos un poco a la izquierda en TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
  .header .headerActions{
    transform: translateX(200px); /* prueba -10, -20, -30 */
  }
}

/* Mover menú a la izquierda SOLO en TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
  .header .nav{
    transform: translateX(-10px);
  }
}

/* ===== TABLET: intercambiar nav y headerActions ===== */
@media (min-width: 768px) and (max-width: 1024px) {

  .header .header__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  /* Logo queda igual */
  .header .brand{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  /* ICONOS ARRIBA */
  .header .headerActions{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: start;
  }

  /* NAV ABAJO */
  .header .nav{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: start;
  }

}

/* ===== TABLET: mover botón Get a Free Quote a la derecha ===== */
@media (min-width: 768px) and (max-width: 1024px) {

  .hero .btn,
  .hero .cta-btn,
  .hero a.btn {
    margin-left: auto !important;
    display: block;
  }

}