:root{
  --bg:#050505;
  --panel:#0c0c0c;
  --panel2:#101010;
  --text:#ffffff;
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --accent:#ff6300;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 22px;
  --max: 1180px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.bg-glow{
  position:fixed;
  inset:-40% -20% auto -20%;
  height:80vh;
  background:
    radial-gradient(closest-side, rgba(255,99,0,.26), rgba(255,99,0,0) 70%),
    radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 68%);
  filter: blur(25px);
  pointer-events:none;
  z-index:0;
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(5,5,5,.62);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 20px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  letter-spacing:.4px;
}
.brandMark{
  width:8px; height:8px; border-radius:4px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255,99,0,.10);
}
.brandMark.small{ width:6px; height:6px; border-radius:3px; }
.brandName{ font-weight:700; }
.brandNameLogo {
  height: 28px;     /* adjust if needed */
  width: auto;
  display: block;
}
.brandTag{
  font-size:10px;
  color: var(--muted2);
  border:1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
}

.nav{ display:flex; align-items:center; gap:14px; }
.nav a{
  color: var(--muted);
  font-size:14px;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover{ color:#fff; background: rgba(255,255,255,.06); }

html{
  scroll-behavior: smooth;
}

#contacto{
  scroll-margin-top: 90px; /* adjust if needed */
}

.headerCta{
  color: #fff !important;
  font-weight: 700;
}

/* Layout */
main{ position:relative; z-index:1; }
.section, .hero{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section{ padding: 30px 0; }
.sectionHead{ max-width: 720px; }
.sectionHead h2{
  margin:0 0 10px;
  font-size: 28px;
  letter-spacing: -.02em;
}
.sectionHead p{ margin:0; color: var(--muted); line-height:1.6; }

.hero{
  padding: 72px 0 26px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:start;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  margin:0 0 18px;
}
.pillDot{ width:8px; height:8px; border-radius:999px; background: var(--accent); }

.hero h1{
  margin:0 0 14px;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.accent{ color: var(--accent); text-shadow: 0 0 24px rgba(255,99,0,.15); }
.sub{ margin:0 0 22px; color: var(--muted); line-height: 1.7; max-width: 56ch; }

.heroCtas{ display:flex; gap: 12px; align-items:center; margin-bottom: 22px; }
.btn{
  border-radius: 999px;
  border: 1px solid var(--line2);
  padding: 11px 14px;
  background: rgba(255,255,255,.04);
  color:#fff;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.btn.primary{
  background: linear-gradient(180deg, rgba(255,99,0,.95), rgba(255,99,0,.75));
  border-color: rgba(255,99,0,.70);
  box-shadow: 0 18px 40px rgba(255,99,0,.16);
}
.btn.primary:hover{ box-shadow: 0 22px 55px rgba(255,99,0,.22); }
.btn.ghost{
  background: rgba(255,255,255,.03);
}
.btn.full{ width:100%; }

.heroMetrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.metric{
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.metricTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; }
.metricNum{ font-weight:700; letter-spacing:-.02em; }
.metricLabel{ font-size:12px; color: var(--muted2); }
.metricBar{
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  margin-top: 10px;
  overflow:hidden;
}
.metricBar span{
  display:block;
  height: 100%;
  background: rgba(255,99,0,.9);
  border-radius:999px;
}

.heroLeft {
  padding-left: 10px; /* prueba 16px / 24px / 32px */
}

.heroLeft .heroCtas{
  margin-top: 36px;   /* prueba 16px / 24px / 32px */
}

.heroLeft .heroMetrics{
  margin-top: 24px;  /* separa métricas del CTA */
}

/* Hero right card */
.glassCard{
  border-radius: var(--radius2);  
  box-shadow: var(--shadow);
  padding: 14px;
}
.cardHeader{ display:flex; gap:10px; align-items:center; margin-bottom: 10px;}
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,99,0,.18);
  border: 1px solid rgba(255,99,0,.35);
}
.chipOutline{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}
.miniDash{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(5,5,5,.55);
  padding: 14px;
}
.dashTitle{
  display:flex; align-items:center; justify-content:space-between;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.dashPulse{
  display:flex; align-items:center; gap:8px;
  font-size: 12px;
}
.dashPulse span{
  width:8px; height:8px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,99,0,.12);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  55%{ transform:scale(1.25); opacity:.55; }
  100%{ transform:scale(1); opacity:1; }
}
.dashGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.dashStat{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.dashStat.wide{ grid-column: 1 / -1; }
.dashKpi{ font-size: 12px; color: var(--muted2); }
.dashVal{ font-weight: 800; letter-spacing: -.02em; font-size: 20px; margin: 6px 0 4px; }
.dashHint{ font-size: 12px; color: var(--muted); }
.sparkWrap{ margin-top: 10px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
#spark{ width:100%; height:90px; display:block; }
.dashFooter{
  display:flex; justify-content:space-between;
  margin-top: 10px;
}
.tiny{ font-size: 11px; color: var(--muted2); }
.accentText{ color: var(--accent); }



/* Static dashboard image replacement */
.imageDash {
  padding: 0;
  overflow: hidden;
}

/* IMAGE: no box, no background, no border */
.miniDash.imageDash {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  overflow: visible;          /* was hidden -> this was clipping */
  align-items: flex-start;    /* anchor content to top */
}

/* IMAGE SIZE: smaller but no growth limit */
.dashboardImage {
  width: 140%;     /* 👈 controls size */
  height: auto;
  max-width: none; /* 👈 IMPORTANT: removes growth limit */
  border-radius: 0; 
  transform: translate(40px, -50px); /* Push phone upwards */
}

/* Nudge hero chips slightly to the left */
.heroRight .cardHeader {
  margin-left: -40px;   /* 👈 adjust: -6px to -20px */
  margin-top: -16px;
}

.heroRight {
  position: relative;
}

/* Orange glow behind phone */
.phoneGlow--low {
  position: absolute;
  right: 0px;
  bottom: -50px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    closest-side,
    rgba(255, 99, 0, 0.35),
    rgba(255, 99, 0, 0.18),
    rgba(255, 99, 0, 0)
  );
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.phoneGlow--high {
  position: absolute;
  right: -60px;     /* slightly more to the right */
  bottom: 220px;    /* 👈 ABOVE the lower glow */
  width: 300px;
  height: 300px;
  background: radial-gradient(
    closest-side,
    rgba(255, 99, 0, 0.28),
    rgba(255, 99, 0, 0.14),
    rgba(255, 99, 0, 0)
  );
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
}


/* Feature cards */
.cards3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.featureCard{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 18px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.featureCard:hover{
  transform: translateY(-3px);
  border-color: rgba(255,99,0,.35);
  background: rgba(255,99,0,.05);
}
.iconRing{
  width: 36px; height: 36px; border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,99,0,.35);
  background: rgba(255,99,0,.12);
  margin-bottom: 10px;
}
.featureCard h3{ margin: 0 0 8px; letter-spacing:-.02em; }
.featureCard p{ margin: 0; color: var(--muted); line-height:1.6; }

.checkList{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.checkList li{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}

.checkList li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Make image container relative */
.imageDash {
  position: relative;
}

/* Store badges positioned ON the image */
.storeBadges--onImage{
  position:absolute;
  top:14%;
  right:80%;
  display:flex;
  flex-direction: column; 
  gap:16px;
  z-index:3;
  pointer-events:auto;
}

#demoVideo{
  scroll-margin-top: 90px;
}

/* Badge (real-looking) */
.storeBadge{
  display:flex;
  align-items:center;
  gap:10px;

  color:#fff;
  padding:10px 12px;
  border-radius:14px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);

  transition: color .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Logo container */
.storeMark{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.storeMark svg{
  width:100%;
  height:100%;
  display:block;
}

/* Text */
.storeText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.storeSmall{
  font-size:10px;
  opacity:.85;
}
.storeBig{
  font-size:14px;
  font-weight:700;
}

/* Hover */
.storeBadge:hover{
  color:#ff6300;
  border-color: rgba(255,99,0,.6);
  box-shadow: 0 0 0 6px rgba(255,99,0,.15);
  transform: translateY(-2px);
}

.videoCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}

.videoTop{
  display:flex;
  gap:10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Frame: “glass” border + subtle inner shadow */
.videoFrame{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,5,.55);
  overflow: hidden;
  aspect-ratio: 30 / 8;
}

/* Make the video feel like an “asset” inside your UI */
.videoEl{
  width: 100%;
  height: auto;
  display:block;
  outline: none;
}

/* Optional: small hover lift like your cards */
.videoCard:hover{
  border-color: rgba(255,99,0,.28);
  background: rgba(255,99,0,.04);
}

/* Clickable cover */
.videoCover {
  position: relative;
  cursor: pointer;
}

.videoPoster {
  width: 100%;
  display: block;
  border-radius: 18px;
}

/* Play button */
.playBtn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: rgba(255,99,0,.75);  /* 👈 always orange */
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}

.videoCover:hover .playBtn {
  transform: scale(1.15);
}

/* Video modal sizing */
.videoModalPanel {
  width: min(960px, 92vw);
  background: transparent;
  border: none;
  box-shadow: none;
}

.videoModalPanel video {
  width: 100%;
  height: auto;
  border-radius: 18px;
}



/* Split section */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}
.bullet{ list-style:none; padding:0; margin: 18px 0 0; display:grid; gap:10px; }
.bullet li{ color: var(--muted); display:flex; gap:10px; line-height:1.55; }
.bulletMark{ color: var(--accent); }

.note{
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,99,0,.25);
  background: rgba(255,99,0,.08);
  padding: 12px 12px;
  color: rgba(255,255,255,.82);
  display:flex; align-items:flex-start; gap:10px;
}
.noteDot{ width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top: 3px; }

.securityBox{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}
.securityTop{ display:flex; gap:10px; margin-bottom: 12px; flex-wrap:wrap; }
.badge{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,99,0,.35);
  background: rgba(255,99,0,.12);
}
.badgeOutline{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: var(--muted);
}
.securityGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.secItem{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.secItem.wide{ grid-column: 1/-1; }
.secLabel{ font-size:12px; color: var(--muted2); }
.secValue{ margin-top: 6px; font-weight: 650; }

/* Pricing */
#precios{
  scroll-margin-top: 90px; /* same offset as contacto */
}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.priceCard{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.priceCardHot{
  border-color: rgba(255,99,0,.35);
  background: radial-gradient(600px 300px at 20% 0%, rgba(255,99,0,.14), transparent 60%),
              rgba(255,255,255,.02);
}
.hot{
  position:absolute;
  top: 14px; right: 14px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,99,0,.35);
  background: rgba(255,99,0,.12);
}
.priceTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.priceTop h3{ margin:0; letter-spacing:-.02em; }
.price{
  font-weight: 800;
  letter-spacing:-.02em;
  font-size: 26px;
}
.price span{ font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.priceCard ul{ margin: 14px 0 16px; padding-left: 16px; color: var(--muted); display:grid; gap: 8px; }
.priceCard li{ line-height:1.45; }

.coming-soon {
  display: block;                 /* allows centering control */
  width: 70%;                     /* 👈 adjust width here */
  margin: 0 auto;                 /* 👈 centers horizontally */

  text-align: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #ff6300;

  padding: 12px 0;                /* vertical padding only */
  border: 1px dashed rgba(255, 99, 0, 0.45);
  border-radius: 999px;
  background: rgba(255, 99, 0, 0.06);
}

.pricingNote{
  margin-top: 12px;
  text-align: right;
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: .02em;
}

/* Form section (matches site style) */
.formCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}

.formTop{
  display:flex;
  gap:10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

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

.field{
  display:grid;
  gap: 6px;
}

.fieldFull{
  grid-column: 1 / -1;
}

.field span{
  font-size: 12px;
  color: var(--muted2);
}

.field input,
.field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,5,5,.55);
  color: #fff;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field textarea{
  resize: vertical;
  min-height: 110px;
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(255,99,0,.55);
  box-shadow: 0 0 0 6px rgba(255,99,0,.12);
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
}

.check input{
  width: 16px;
  height: 16px;
}

.formActions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.formHint{
  font-size: 12px;
  color: var(--muted2);
}

.formSuccess{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,99,0,.25);
  background: rgba(255,99,0,.08);
  color: rgba(255,255,255,.88);
}

.checkOrange{
  color: var(--accent); /* your orange */
  font-weight: 700;
}

.check input[type="checkbox"] {
  accent-color: var(--accent); /* orange */
}

/* Mobile: stack form fields */
@media (max-width: 820px){
  .formGrid{ grid-template-columns: 1fr; }
}

/* FAQ */
.faq{ margin-top: 20px; margin-bottom: 30px; display:grid; gap: 12px; }
details{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 12px 14px;
}
summary{ cursor:pointer; font-weight: 600; }
details p{ margin: 10px 0 0; color: var(--muted); line-height:1.6; }

/* Legal */
.legal{ padding-top: 26px; }
.legalCard{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.muted{ color: var(--muted); line-height:1.65; }
.h3{ margin: 14px 0 8px; font-size: 15px; letter-spacing:-.01em; }

.kv{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 190px 1fr;
  gap: 10px 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kv.compact{ margin-top: 10px; padding-top: 10px; }
.k{ color: var(--muted2); font-size: 13px; }
.v{ color: #fff; font-size: 13px; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.footerInner{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start; /* 👈 key change */
  gap: 48px;                  /* spacing between logo + links */
}
.brandLine{ display:flex; align-items:center; gap:10px; }
.smallText{ font-size: 12px; }
.footerLinks{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
.footerLinks a, .linkBtn{
  color: var(--muted);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
}
.footerLinks a:hover, .linkBtn:hover{
  color:#fff;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.brandNameLogo_footer {
  height: 18px;     /* adjust if needed */
  width: auto;
  display: block;
}

.footerLinksRows{
  display:flex;
  flex-direction:column;
  gap: 20px;
}

/* ===== Footer: lock layout + typography (final) ===== */

/* Ensure the rows container isn't affected by .footerLinks (center + wrap) */
.footerLinks.footerLinksRows{
  align-items: stretch;
  flex-wrap: nowrap;
}

/* Stable 2-column row: Title | Content */
.footerRow{
  display: grid;
  grid-template-columns: 101px 1fr;  /* try 140–160px */
  gap: 1px;                          /* optional fine tuning */
  align-items: center;              /* vertical alignment title <-> content */
}

/* Title style (restore the "site style") */
.footerTitle{
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted2);
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}

/* Content containers */
.footerRowLinks,
.footerRowText{
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Keep your pill links, but ensure consistent start */
.footerRowLinks a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  line-height: 1.2;
}

/* Contact text aligned like the links (same box model) */
.footerRowText{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--muted);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
}

.footerRowText{
  font-size: 13px;   /* same as .footerLinks a */
  font-weight: 400;  /* match link weight */
}

/* --- Footer dual row: Social + Contact --- */
.footerRowDual{
  grid-template-columns: 110px 1fr;
  align-items: center;
}

.footerRowDualContent{
  display: flex;
  align-items: center;
  gap: 24px; /* space between socials and contact */
  flex-wrap: wrap;
}

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

.footerTitleInline{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted2);
  text-transform: uppercase;
  color: #fff;
}

/* Separators ONLY for "Sobre la empresa" links */
.footerRowLinksSeparated{
  display: flex;
  align-items: center;
}

.footerRowLinksSeparated .linkSep{
  width: 1.5px;
  height: 20px;
  background: var(--line2);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Footer social icons */
.footerSocialIcons{
  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap: wrap;
}

.footerSocialIcons .socialIcon{
  border: 1.5px solid var(--accent) !important;
  border-color: rgba(255,99,0,.85);
}

/* Tight circle hugging the icon */
.footerSocialIcons .socialIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px;                 /* 👈 controls how tight the circle is */
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: transparent;

  width: auto;                  /* 👈 remove fixed box */
  height: auto;
}

.footerSocialIcons .socialIcon svg{
  width: 16px;                  /* keep icon readable */
  height: 16px;
  color: #fff
}

/* Uniformly scale social icons */
.footerSocialIcons{
  transform: scale(0.85);   /* try 0.8 – 0.9 */
  transform-origin: left center;
}

/* === Footer social icons: hover scale + orange icon === */
.footerSocialIcons .socialIcon{
  transition:
    transform .2s var(--ease),
    background .2s var(--ease),
    box-shadow .2s var(--ease),
    color .2s var(--ease);
}

.footerSocialIcons .socialIcon:hover{
  transform: scale(1.15);              /* 👈 grow, don’t move */
  background: rgba(255,99,0,.12);
  box-shadow: 0 0 0 6px rgba(255,99,0,.14);
}

.footerSocialIcons .socialIcon:hover svg{
  color: #ff6300;                      /* 👈 icon turns orange */
}


/* Footer contact items (phone + email) */
.footerContactItem{
  display:inline-flex;
  align-items:center;
  gap: 6px;

  color: var(--muted);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 999px;

  transition: color .2s var(--ease), background .2s var(--ease);
}

.footerContactItem svg{
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.footerContactItem:hover{
  color: #fff;
  background: rgba(255,255,255,.05);
}

/* Make ONLY the email icon a bit bigger */
.footerContactItem svg{
  width: 14px;
  height: 14px;
}

/* Email icon slightly larger */
.footerContactItem[href^="mailto"] svg{
  width: 16px;
  height: 16px;
}

.footer .brandNameLogo {
  height: 24px; /* try 16–20px */
}

/*---------- PUSH ALL THE LINKS AND EVERYTHING TO THE RIGHT ----------- */
.footerLinks.footerLinksRows{
  margin-left: 3%;   /* try 2% / 3% / 4% / 5% */
}

/* Drawer (Cart) */
.drawer{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.drawer[aria-hidden="false"]{ pointer-events:auto; }
.drawerOverlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  opacity:0;
  transition: opacity .22s var(--ease);
}
.drawer[aria-hidden="false"] .drawerOverlay{ opacity:1; }

.drawerPanel{
  position:absolute;
  top:0; right:0; height:100%;
  width: min(420px, calc(100% - 28px));
  background: rgba(10,10,10,.88);
  border-left: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  transform: translateX(102%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.drawer[aria-hidden="false"] .drawerPanel{ transform: translateX(0); }

.drawerHead{
  padding: 18px;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 14px;
}
.drawerTitle{ font-weight: 800; letter-spacing:-.02em; }
.drawerSub{ color: var(--muted); font-size: 13px; margin-top: 4px; }

.iconBtn{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
}
.iconBtn:hover{ background: rgba(255,255,255,.07); }

.drawerBody{ padding: 16px 18px; overflow:auto; }
.empty{ text-align:center; padding: 26px 10px; }
.emptyIcon{ font-size: 30px; margin-bottom: 10px; }
.emptyTitle{ font-weight: 750; letter-spacing:-.02em; }
.emptyText{ margin: 8px 0 14px; color: var(--muted); line-height:1.6; }

.cartList{ display:grid; gap: 10px; }
.cartItem{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.itemName{ font-weight: 650; letter-spacing:-.01em; }
.itemMeta{ color: var(--muted2); font-size: 12px; margin-top: 4px; }
.itemRight{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; }
.itemPrice{ font-weight: 800; }
.itemActions{ display:flex; align-items:center; gap: 8px; }
.qty{
  display:flex; align-items:center; gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 6px 8px;
}
.qty button{
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
}
.qty button:hover{ background: rgba(255,255,255,.08); }
.qty span{ min-width: 18px; text-align:center; font-size: 13px; }
.removeBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.removeBtn:hover{ color:#fff; background: rgba(255,255,255,.06); }

.summary{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.sumRow{ display:flex; justify-content:space-between; align-items:center; padding: 6px 0; }
.sumRow.total{ font-weight: 800; font-size: 16px; }
.smallMuted{ margin: 12px 0 0; color: var(--muted2); font-size: 12px; line-height:1.55; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .cards3{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .heroMetrics{ grid-template-columns: 1fr; }
  .payGrid{ grid-template-columns: 1fr; }
  .kv{ grid-template-columns: 1fr; }
  .nav a{ display:none; }
}

/* --- Header hide on scroll --- */
.header{
  position: fixed; /* override sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform .3s ease;
}

.header.header--hidden{
  transform: translateY(-100%);
}

:root { --header-h: 64px; } /* adjust once */
body { padding-top: var(--header-h); }


/* =========================================================
   RESPONSIVE BREAKPOINTS (Professional)
   ========================================================= */

/* -------- XL screens (>= 1600px): breathe a bit more -------- */
@media (min-width: 1600px){
  :root{
    --max: 1240px;
    --header-h: 72px;
  }
}

/* -------- Large laptops (<= 1200px) -------- */
@media (max-width: 1200px){
  .hero{
    grid-template-columns: 1.08fr .92fr;
  }
  .dashboardImage{
    width: min(150%, 700px);
    transform: translate(28px, -44px);
  }
  .storeBadges--onImage{
    left: -4%;
    top: 16%;
  }
}

/* -------- Tablets / small laptops (<= 980px) -------- */
@media (max-width: 980px){
  :root{ --header-h: 66px; }

  .hero{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .cards3{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .heroMetrics{ grid-template-columns: 1fr; }
  .kv{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }

  /* Keep brand + CTA visible; hide other links (since no burger menu in HTML) */
  .nav a{ display:none; }
  .nav .headerCta{ display:inline-flex; }
  .nav a[href="#login"]{ display:inline-flex; }

  .dashboardImage{
    width: min(108%, 640px);
    transform: translate(0px, -10px);
  }

  .storeBadges--onImage{
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 0;
  }

  .imageDash{
    flex-direction: column;
    align-items: center;
  }

  .cardHeader{
    justify-content: center;
  }

  .phoneGlow--high{ display:none; }
}

/* -------- Small tablets / large phones (<= 768px) -------- */
@media (max-width: 768px){
  .header{
    padding-left: var(--containerPad);
    padding-right: var(--containerPad);
  }

  .brand{ min-width: 0; }
  .brandTag{ display:none; }

  .hero{
    padding-top: calc(var(--s-6) + 6px);
  }

  .btn{ padding: 10px 14px; }

  .storeBadge{
    min-width: 0;
    width: auto;
  }

  .footerInner{
    flex-direction: column;
    gap: 18px;
  }

  .footerRow{
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  .footerRowDual{
    grid-template-columns: 1fr;
  }

  .footerRowDualContent{
    justify-content: flex-start;
  }

  .brandNameLogo{ height: 22px; }
  .brandMark{
    margin-right: -3px;
    margin-left: 15px;
  }

  .btn.primary.headerCta{
    margin-right: 15px;
  }
}

/* -------- Phones (<= 600px) -------- */
@media (max-width: 600px){
  :root{
    --containerPad: 16px;
    --header-h: 64px;
  }

  .pill{ font-size: 12px; }
  .sub{ max-width: 100%; }

  .heroCtas{
    gap: 10px;
  }

  .metric{
    padding: 12px;
  }

  .modalPanel{
    width: calc(100% - 18px);
    border-radius: 20px;
  }

  .steps{
    gap: 8px;
  }

  .step{
    font-size: 12px;
    padding: 7px 9px;
  }

  .storeBadges--onImage{
    flex-direction: column;
    align-items: stretch;
  }

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

/* =========================================================
   ULTRAWIDE (2560px+): FULL-WIDTH 2-column layout
   (Matches header full width)
   ========================================================= */
@media (min-width: 2560px) {
  :root{
    --header-h: 76px;
  }

  main{
    width: 100%;
    max-width: none;
    margin: 0;

    /* ⬅️ Push layout to the left */
    padding-left: clamp(48px, 4vw, 96px);
    padding-right: clamp(120px, 7vw, 220px);

    display: grid;

    /* ⬅️ Hero slightly wider than Producto */
    grid-template-columns: 1.15fr 0.85fr;

    /* ⬅️ More space between columns */
    gap: clamp(48px, 4vw, 80px);

    align-items: start;
  }

  main > section,
  main > footer{
    width: auto !important;
    margin: 0 !important;
  }
}

/* ULTRAWIDE (2560px+): FAQ + Footer FULL WIDTH ONLY*/
@media (min-width: 2560px) {

  /* Force FAQ to occupy the full grid row */
  main > section#faq{
    grid-column: 1 / -1;
  }

  /* Force footer to occupy the full grid row */
  main > footer.footer{
    grid-column: 1 / -1;
  }

  /* Optional: keep FAQ content readable (not too stretched) */
  #faq .faq{
    max-width: 1200px;
  }
}

/* =========================================================
   1024px range: keep content centered, but footer full-bleed
   ========================================================= */
@media (max-width: 1200px) and (min-width: 901px) {

  main{
    width: 100%;
    max-width: none;
    margin: 0;

    /* ⬅️ Keep comfortable left padding */
    padding-left: clamp(24px, 4vw, 48px);

    /* ➡️ MUCH smaller right padding */
    padding-right: clamp(8px, .9vw, 8px);
  }

  /* Let hero use all the space available */
  .hero{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Optional: give the right column more real estate */
  .hero{
    grid-template-columns: 1fr 1.05fr;  /* more room for the phone */
    gap: clamp(26px, 3vw, 52px);
  }

  /* Stop horizontal overflow from affecting layout / header */
  html, body{
    overflow-x: clip; /* better than hidden (doesn't create scrolling quirks) */
  }

  /* DO NOT clip the hero column */
  .heroRight{
    overflow: visible;
  }

  /* Give the phone room so it isn't clipped */
  .miniDash.imageDash{
    overflow: visible;                 /* let it breathe */
    padding-right: clamp(18px, 2vw, 36px);
  }

  /* (Optional) keep nice rounded clipping if needed */
  .miniDash.imageDash{
    border-radius: 18px;
  }

  /* Center all sections (content) */
  main > section{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ✅ Footer: full viewport width (break out of main padding) */
  main > footer.footer{
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Keep footer content aligned with the page padding */
  .footerInner{
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  }
}


/* 1024px (901–1200): Footer = 2 columns (brand left, links right)
   Right column contains 2 rows (like your 2nd screenshot) */
@media (max-width: 1200px) and (min-width: 901px) {

  /* Footer content uses full available width */
  .footerInner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: clamp(24px, 4vw, 48px) !important;
    padding-right: clamp(24px, 4vw, 48px) !important;

    /* ✅ This is the key: 2 columns, not 1 */
    display: grid !important;
    grid-template-columns: minmax(260px, 360px) 1fr !important;
    column-gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }

  /* Left column: brand stays left */
  .footerLeft{
    grid-column: 1;
    grid-row: 1;
  }

  /* Right column: everything else stays to the right (two rows inside) */
  .footerLinks.footerLinksRows{
    grid-column: 2;
    grid-row: 1;
    margin-left: 0 !important; /* cancels your old push-right rule */
  }

  /* Keep Row 1 (social + contact) on one line */
  .footerRowDualContent{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(16px, 2vw, 28px);
  }

  /* If contact row is too tight, allow ONLY the contact to wrap */
  .footerRowContact{
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Row 2 links can wrap naturally if needed */
  .footerRowLinksSeparated{
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {

  /* 1) Make the left column narrower so the right content moves left */
  .footerInner{
    grid-template-columns: minmax(100px, 180px) 1fr !important; /* was 260–360 */
    column-gap: clamp(18px, 2.6vw, 40px) !important;           /* slightly tighter */
  }

  /* 2) Remove any "push to the right" from earlier rules */
  .footerLinks.footerLinksRows{
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-self: start;  /* makes sure it hugs the left of column 2 */
  }

  /* Optional: if you still want it even more left */
  .footerLinks.footerLinksRows{
    transform: translateX(-14px);
  }
}

@media (max-width: 1200px) and (min-width: 901px) {

  .dashboardImage{
    width: 170%;          /* ⬅️ percentage-based scaling */
    max-width: none;      /* allow it to exceed container */
    height: auto;
    transform: translate(20px, -40px);
  }
}

/* ✅ iPad/tablet: evita que el hero "ensanche" la página */
@media (min-width: 769px) and (max-width: 1024px){

  /* 1) El hero no puede crear ancho extra */
  .hero{
    overflow-x: clip;   /* mejor que hidden */
  }

  /* 2) El contenedor del teléfono también */
  .heroRight,
  .miniDash.imageDash{
    overflow-x: clip;
  }

  /* 3) Reduce el "desborde" del teléfono en iPad */
  .dashboardImage{
    width: 120%;
    transform: translate(10px, -30px);
  }

  /* 4) Evita que los glows empujen fuera */
  .phoneGlow--high{
    transform: translateX(-30%);
  }
  .phoneGlow--low{
    transform: translateX(-30%);
  }

  .dashboardImage{
    scale: calc(1);
    transform: translateX(-15%);
  }
}


/* =========================================================
   768px range
   ========================================================= */

/* Tablet (601–768): move heroRight content under the sub text by swapping which one is visible */
.heroRight--tabletSlot{ display:none; }

/* Re-show main nav links specifically at 768px */
@media (max-width: 768px) and (min-width: 601px){
  .nav a{
    display: inline-flex;
    font-size: 0.75rem;   /* slightly smaller */
    line-height: 1.2;
  }

  .pill{
    display: none;
  }

  /* hide the original heroRight (the sibling one) */
  .hero > .heroRight:not(.heroRight--tabletSlot){
    display: none;
  }

  /* show the duplicate that sits after .sub inside heroLeft */
  .heroRight--tabletSlot{
    display: block;
    margin-top: 14px; /* optional spacing */
  }

  /* Anchor for absolute positioning */
  .heroLeft{
    position: relative;
  }

  /* Free placement over title/subtitle */
  .heroRight--tabletSlot{
    position: absolute;
    top: 15%;      /* move up/down */
    left: 45%;       /* horizontal reference */
    transform: translateX(-10%);
    z-index: 3;      /* above text */
    width: 100%;
    max-width: 420px; /* optional, keeps it neat */
    pointer-events: none; /* optional: text remains selectable */
  }

  .storeBadge--apple{
    min-width: 112px;
  }

  .storeBadges.storeBadges--onImage{
    display: flex;
    flex-direction: column;
    gap: 8px; /* space between Google Play & App Store */
    align-items: center; /* optional: center them */
  }

  /* Make the image area a positioning context */
  .miniDash.imageDash{
    position: relative;
  }

  /* Overlay the badges ON TOP of the image */
  .storeBadges.storeBadges--onImage{
    position: absolute;
    top: 0px;          /* adjust vertical position */
    left: 12px;         /* adjust horizontal position */
    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start; /* or center */

    transform: scale(0.75);
    transform-origin: top left;
  }

  /* Make sure the image stays as-is and doesn't get affected by siblings */
  .dashboardImage{
    display: block;
    transform: scale(1.45);
    transform-origin: center;
    margin-top: 25px;
    margin-left: 10px;
  }

  .cardHeader{
    transform: scale(0.72) translateY(20px);
    transform-origin: left top;
    margin-right: 55px;
  }

  .heroMetrics{
    width: 45vw;          /* 50% of the screen */
    max-width: 45vw;
  }

  .header{
    left: 0;
    right: 0;
    width: 100vw;
  }

  /* Footer logo smaller */
  .footer .brandNameLogo,
  .brandNameLogo_footer{
    height: 18px;   /* try 16–18px */
  }

  /* Footer copyright text smaller */
  .footer .smallText{
    font-size: 10px;
    line-height: 1;
  }

  /* 2 columns: left brand (20%) + rest (80%) */
  .footerInner{
    flex-direction: row;                 /* override the <=768 column stack */
    align-items: flex-start;
    display: grid;
    grid-template-columns: 19% 1fr;
    column-gap: 18px;
  }

  /* Left column: stack logo + copyright */
  .footerLeft{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  /* Right column: keep all your existing rows */
  .footerLinks.footerLinksRows{
    width: 100%;
    margin-left: 0;                      /* cancels any earlier push-right */
  }

  /* Force Row 1 content into a single horizontal line */
  .footerRow.footerRowDual{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
  }

  /* Make the right side (icons + contact) a single row */
  .footerRowDualContent{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* 👈 key */
    gap: 24px;
  }

  /* Social icons stay in one line */
  .footerSocialIcons{
    flex-wrap: nowrap;
    gap: 16px;
  }

  /* Contact block stays inline */
  .footerRowContact{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* Prevent phone/email from breaking lines */
  .footerContactItem{
    white-space: nowrap;
  }

  /* Scale the whole right footer content */
  .footerLinks.footerLinksRows{
    transform: scale(0.8);       
    transform-origin: left top;  /* keep it anchored */
  }

  /* Force Row 2 to stay on one line */
  .footerRow{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
  }

  /* Keep the links in a single horizontal line */
  .footerRowLinksSeparated{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* 👈 key */
    white-space: nowrap;
  }

  /* Prevent individual links from wrapping */
  .footerRowLinksSeparated a{
    white-space: nowrap;
  }

  .brandLine{
    margin-left: -15px;
    align-self: left;
  }

  .muted.smallText{
    margin-left: -2px;
    margin-top: 5px;
    font-size: 8px;
  }
}

@media (max-width: 768px){
  .heroTitle{
    font-size: 48px !important;
  }
}


/* =========================================================
   FORCE: Mobile-only header ONLY under 480px
   ========================================================= */

/* Always hide the mobile-only header by default (strong rule) */
header.header.header--mobileOnly{
  display: none !important;
}

/* Always hide any burger that might exist in the desktop header */
header.header:not(.header--mobileOnly) .navToggle{
  display: none !important;
}

/* Show mobile-only header only on small screens */
@media (max-width: 480px){
  /* Hide desktop header */
  header.header:not(.header--mobileOnly){
    display: none !important;
  }

  /* Show mobile header */
  header.header.header--mobileOnly{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  /* Burger visible on mobile header */
  header.header.header--mobileOnly .navToggle{
    display: inline-flex !important;
  }
}

/* =========================================================
   MOBILE DROPDOWN MENU
   ========================================================= */

/* Ensure the mobile header is the positioning context */
.header--mobileOnly{
  position: fixed;
}

/* Dropdown panel */
.header--mobileOnly .mobileMenu{
  position: absolute;
  left: 50%;
  right: auto;
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  top: calc(100% + 10px);  

  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.16);

  /* Darker, more solid glass (final) */
  background: rgba(6,6,6,.96);
  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;

  z-index: 1001;

  /* Hidden state (animated) */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  pointer-events: none;

  transition:
    max-height .35s var(--ease),
    opacity .22s var(--ease),
    transform .22s var(--ease);

  
}

/* Subtle orange glow behind panel */
.header--mobileOnly .mobileMenu::before{
  content:"";
  position:absolute;
  inset:-18px -18px auto -18px;
  height: 110px;
  background: radial-gradient(
    closest-side,
    rgba(255,99,0,.22),
    rgba(255,99,0,0) 70%
  );
  filter: blur(18px);
  pointer-events:none;
  z-index:0;
}

/* Thin orange accent line at the top (brand anchor) */
.header--mobileOnly .mobileMenu::after{
  content:"";
  position:absolute;
  top:0;
  left:14px;
  right:14px;
  height:2px;
  border-radius:999px;

  background: linear-gradient(
    90deg,
    rgba(255,99,0,0),
    rgba(255,99,0,.9),
    rgba(255,99,0,0)
  );

  box-shadow: 0 0 10px rgba(255,99,0,.45);
  pointer-events:none;
  z-index:2;
}

/* Reveal when open */
.header--mobileOnly.header--menuOpen .mobileMenu{
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Links: pill buttons */
.header--mobileOnly .mobileMenu a{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px;
  border-radius: 14px;

  /* White text by default */
  color: #ffffff;
  font-size: 14px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  transition:
    transform .15s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease),
    box-shadow .2s var(--ease);

  justify-content: flex-start;  /* 👈 instead of space-between */
  text-align: left;
  width: 100%;                  /* optional: makes the whole row clickable */
}

/* Optional: tiny orange dot indicator (very subtle) */
.header--mobileOnly .mobileMenu a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,99,0,0);
  margin-right: 8px;
  flex-shrink: 0;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

/* Hover */
.header--mobileOnly .mobileMenu a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,99,0,.35);
  box-shadow: 0 0 0 6px rgba(255,99,0,.10);
  transform: translateY(-1px);
}

.header--mobileOnly .mobileMenu a:hover::before{
  background: rgba(255,99,0,.9);
  box-shadow: 0 0 0 4px rgba(255,99,0,.18);
}

/* Active (tap feedback) */
.header--mobileOnly .mobileMenu a:active{
  transform: translateY(0);
  background: rgba(255,99,0,.14);
  border-color: rgba(255,99,0,.45);
}

/* Accessibility: focus ring */
.header--mobileOnly .mobileMenu a:focus-visible{
  outline: none;
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,99,0,.18);
  border-color: rgba(255,99,0,.45);
}

/* First item: subtle accent cue (eye entry point) */
.header--mobileOnly .mobileMenu a:first-child{
  border-color: rgba(255,99,0,.28);
  background: rgba(255,99,0,.06);
  font-weight: 700;
}

/* First item hover: slightly stronger */
.header--mobileOnly .mobileMenu a:first-child:hover{
  background: rgba(255,99,0,.14);
  box-shadow: 0 0 0 6px rgba(255,99,0,.14);
}

/* Optional divider (future-proof) */
.header--mobileOnly .mobileMenu .divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 6px 6px;
}

/* MOBILE HEADER ALIGNMENT*/
.header--mobileOnly .mobileHeaderRight{
  display: flex;
  align-items: center;   /* vertical centering */
  gap: 10px;
}

/* Make the CTA the same height as .iconBtn (38px) */
.header--mobileOnly a.headerCta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;          /* matches .iconBtn */
  padding: 0 10px;       /* pill width */
  font-size: 13px;
  line-height: 1;        /* avoid baseline weirdness */
  white-space: nowrap;

  /* keep it looking premium but not too heavy */
  box-shadow: 0 10px 24px rgba(255,99,0,.18);
}

.header--mobileOnly .navToggle svg{
  width: 22px;   
  height: 22px;
}

/* Ensure brand content is perfectly centered */
.header--mobileOnly .brand{
  display: flex;
  align-items: center;   /* 👈 key */
  gap: 10px;

  transform: scale(1);        /* subtle, not cartoonish */
  transform-origin: left center;
}

/* Kill baseline alignment on the logo image */
.header--mobileOnly .brandNameLogo{
  display: block;        /* 👈 removes baseline behavior */
  align-self: center;
}

/* Optional: slightly lift the brandTag if needed */
.header--mobileOnly .brandTag{
  align-self: center;
}


/* =========================================================
   FOOTER (425px) — align logo and copyright perfectly
   ========================================================= */

@media (max-width: 480px){

  /* ================= Footer left (brand) ================= */

  .footerLeft{
    display: flex;
    flex-direction: column;
    align-items: center;   /* 👈 center */
    text-align: center;
  }

  .footerLeft .brandLine{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }

  /* Align copyright with logo (ignore dot) */
  .footerLeft .smallText{
    padding-left: 0;
  }

  /* ================= Social + contact block ================= */

  /* Single-column layout */
  .footerRow.footerRowDual{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px;
    justify-items: center;   /* 👈 center grid items */
    text-align: center;
  }

  /* Flatten wrapper */
  .footerRowDualContent{
    display: contents !important;
  }

  /* --- SÍGUENOS --- */
  .footerTitle{
    justify-self: center;
  }

  /* Icons UNDER the title, centered, single row */
  .footerRowLinks.footerSocialIcons{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;

    transform: none !important;
  }

  .footerRowLinks.footerSocialIcons .socialIcon{
    flex: 0 0 auto !important;
  }

  /* --- Contact block UNDER socials --- */
  .footerRowContact{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px;
    text-align: center;
  }

  /* Title on its own line */
  .footerRowContact .footerTitleInline{
    white-space: nowrap;
  }

  /* Phone + email on SAME line */
  .footerRowContact .footerContactItem{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* Wrap phone + email together */
  .footerRowContact{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 14px;
  }

  .footerRowContact .footerTitleInline{
    flex-basis: 100%;
  }

  /* Make footer content stack vertically */
  .footerInner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 22px;
  }

  /* All link/content blocks stay centered at the top */
  .footerLinks.footerLinksRows{
    order: 1;
    justify-self: center;
    text-align: center;
  }

  /* Move brand + copyright to bottom CENTER */
  .footerLeft {
    order: 2;
    justify-self: center;      /* centers within grid cell */
    align-items: center;       /* centers items horizontally */
    text-align: center;        /* centers text */
  }

  /* Brand spacing stays the same */
  .footerLeft .brandMark.small {
    margin-top: 20px;
  }

  .footerLeft .brandNameLogo {
    height: 16px;
    margin-top: 20px;
  }

  /* Brand line centered */
  .footerLeft .brandLine {
    justify-content: center;   /* ⬅️ was flex-end */
  }

  /* Copyright centered */
  .footerLeft .smallText {
    padding-left: 0;
    text-align: center;        /* ⬅️ was right */
    font-size: 8px;
    margin-bottom: 0;
  }


  /* Center the whole legal links row */
  .footerRowLinksSeparated{
    display: flex;
    justify-content: center;   /* 👈 real centering */
    align-items: center;
    text-align: center;
  }

  /* Normalize link box model */
  .footerRowLinksSeparated a{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 6px;          /* symmetric padding */
    line-height: 1.2;
  }

  /* Normalize separators */
  .footerRowLinksSeparated .linkSep{
    display: inline-block;
    align-self: center;
    height: 14px;
    margin: 0 6px;
  }

  .footerRowContact{
    margin-top: 14px;   
  }

  /* Extra space ONLY above "Sobre la empresa" */
  .footerRow:not(.footerRowDual){
    margin-top: 14px; 
  }
}


/*========== REST 480PX =========*/

@media (max-width: 480px){
  .pill{
    display: none !important;
  }

  .bg-glow{
    inset: -32% -20% auto -20%;
  }

  .cardHeader{
    display: flex;
    justify-content: flex-start;   /* 👈 left align chips */
    align-items: center;
    text-align: left;
    margin-right: auto;            /* 👈 push it to the left */

    transform: scale(0.85) translateX(50px) translateY(20px);
    transform-origin: left top;
  }

  .storeBadges.storeBadges--onImage{
    transform: scale(0.9) translateX(-5px) translateY(40px);
    transform-origin: top left;
    gap: 20px;
  }

  .dashboardImage{
    transform: scale(1.35) translateX(30px) translateY(-110px); /* 👈 move up */
    transform-origin: center top;
    margin-top: 0;      /* neutralize earlier margins */
  }

  /* Ensure the burger button centers its icon */
  .header--mobileOnly .navToggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;              /* remove uneven padding */
  }

  /* Normalize the SVG itself */
  .header--mobileOnly .navToggle svg{
    display: block;          /* removes inline SVG baseline shift */
  }

  .header{
    left: 0;
    right: 0;
    width: 100vw;
  }

  .hero {
    padding-top: 10px; /* adjust to taste */
  }

  .sub {
    margin-bottom: -10px; /* try 10–14px */
  }

  .noteDot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;      /* 👈 CLAVE */
    display: inline-block; /* 👈 CLAVE */
    margin-top: 7px;
  }

  .phoneGlow--high{
    display: block !important;
  }

  /* Your mobile positioning */
  .phoneGlow--high {
    right: 50%;
    bottom: -40px;
    width: 280px;
    height: 280px;
    transform: translateX(100%) translateY(-75%);
    filter: blur(36px);
  }

  /* Lower glow – tighter and centered */
  .phoneGlow--low {
    right: 50%;
    bottom: -40px;
    width: 280px;
    height: 280px;
    transform: translateX(75%) translateY(-15%);
    filter: blur(36px);
  }

  #producto.section {
    margin-top: -80px;
  }

  .phoneGlow--high{
    width: 200px;   /* was 280/300 */
    height: 200px;
    filter: blur(28px); /* was 36px */
    opacity: 0.85;  /* optional */
  }

  .dashboardImage{
    transform: scale(1.1) translateX(0px) translateY(-80px);
    /* was ~1.35 and +30px X */
  }
}



/*====== 375 px ====== */

@media (max-width: 380px) and (max-height: 585px) {
  .header--mobileOnly .btn.primary.headerCta {
    font-size: 10px;
    padding: 4px 8px;
  }

  .header--mobileOnly .mobileMenu{
    width: calc(100vw - 20px);
    left: 50%;
    right: auto;

    /* ✅ center horizontally (this was missing) */
    transform: translateX(-50%) translateY(-6px);
  }

  /* keep your open-state animation, but centered */
  .header--mobileOnly.header--menuOpen .mobileMenu{
    transform: translateX(-50%) translateY(0);
  }

  .hero .heroTitle {
    font-size: 35px !important;
  }

  .heroCtas {
    transform: scale(0.9);
    transform-origin: left center;
  }

  .dashboardImage{
    transform: scale(1) translateX(30px) translateY(-110px);
  }

  .cardHeader{
    transform: scale(0.80) translateX(50px) translateY(20px);
  }

  .storeBadges.storeBadges--onImage{
    transform: scale(.85) translateX(-5px) translateY(20px);
  }

  #producto.section {
    margin-top: -110px;
  }

  .footerRowLinks a {
    font-size: 11px;
  }

  .phoneGlow--high{
    width: 100px;   /* was 280/300 */
    height: 100px;
    filter: blur(28px); /* was 36px */
    opacity: 0.85;  /* optional */
  }

  .phoneGlow--low{
    width: 100px;   /* was 280/300 */
    height: 100px;
    filter: blur(28px); /* was 36px */
    opacity: 0.85;  /* optional */
  }
}



/* === Tiny phones (e.g. 320x576) === */
@media (max-width: 340px) {
  .headerCta{
    transform: scale(0.85) translateX(20px);
    transform-origin: center;
  }

  .hero .heroTitle {
    font-size: 28px !important;
  }

  .heroCtas {
    transform-origin: left center;
    white-space: nowrap;
  }

  .cardHeader{
    transform: scale(0.72) translateX(50px) translateY(20px);
  }

  #producto.section {
    margin-top: -120px;
  }

  .footerRowLinks a {
    font-size: 8px;
    margin-top: 5px;
  }
}