@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
:root{--dark:#080e1b;--dark2:#111827;--red:#ff4747;--text:#0b1020;--muted:#667085;--line:#e5e7eb;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:#f7f8fa}a{text-decoration:none;color:inherit}.navbar{position:sticky;top:0;z-index:10;height:76px;background:#151b28;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 10%;box-shadow:0 12px 30px #0002}.brand{display:flex;align-items:center;gap:12px;font-size:20px}.logo{background:var(--red);display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px}.nav-links{display:flex;gap:30px;align-items:center;color:#c8ccd5;font-weight:700}.btn{background:var(--red);color:#151B28;padding:17px 28px;border-radius:13px;font-weight:900;display:inline-block;box-shadow:0 16px 35px rgba(255,71,71,.25)}.btn.small{padding:13px 20px}.btn.ghost{background:transparent;color:white;border:1px solid #334155;box-shadow:none}.menu-btn{display:none}.dark-section{background:radial-gradient(circle at 50% 50%,#10192b,#070d19 70%);color:white}.hero{min-height:780px;display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:80px;padding:80px 10%;position:relative;overflow:hidden}.rings{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 80px,rgba(255,71,71,.08) 81px 82px,transparent 83px 280px,rgba(255,71,71,.06) 281px 282px,transparent 283px);opacity:.7}.hero-content,.phone-card{position:relative}.pill{display:inline-block;background:rgba(255,71,71,.16);border:1px solid rgba(255,71,71,.35);color:var(--red);padding:10px 18px;border-radius:999px;font-weight:800}.pill.soft{background:#ffe9e9;border:0}.hero h1{font-size:72px;line-height:1.05;margin:40px 0 24px;letter-spacing:-3px}.hero h1 span,h2 span{color:var(--red)}.hero p{font-size:23px;line-height:1.5;color:#aab2c0;max-width:680px}.actions{display:flex;gap:18px;margin:38px 0}.badges{display:flex;gap:28px;color:#939baa;font-weight:700}.green{color:#43df8a}.blue{color:#61a8ff}.phone-card{height:480px;border-radius:32px;background:linear-gradient(135deg,#0f172a,#1f2937);box-shadow:0 30px 90px #0009;overflow:hidden}.city{height:100%;background:linear-gradient(160deg,#37bdf8,#151b28 55%,#030712),radial-gradient(circle,#fff 2px,transparent 3px);opacity:.85}.phone{position:absolute;width:110px;height:210px;border-radius:20px;background:#ffd48a;right:38%;top:39%;border:8px solid #050505}.light-section{padding:90px 10%;text-align:center;background:#f7f8fa}.light-section h2,.dark-section h2{font-size:48px;line-height:1.1;letter-spacing:-2px;margin:25px auto 20px;max-width:850px}.section-text{max-width:720px;margin:0 auto 70px;color:#475569;font-size:20px;line-height:1.6}.dark-section .section-text{color:#aab2c0}.grid{display:grid;gap:30px}.cards{grid-template-columns:repeat(3,1fr);text-align:left}.cards article,.stats-grid article,.compare-grid article,.download-card,.mini-stats div{background:white;border:1px solid var(--line);border-radius:18px;padding:38px;box-shadow:0 8px 20px #00000006}.cards article{font-size:28px}.cards h3{font-size:21px}.cards p{color:#475569;line-height:1.6}.stats{padding:90px 10%;text-align:center}.stats-grid{grid-template-columns:repeat(2,1fr);text-align:left;max-width:1100px;margin:auto}.stats-grid article{background:#171e2c;border-color:#2b3446}.stats-grid strong{font-size:52px}.stats-grid h3{color:var(--red)}.stats-grid p{color:#9ca3af}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1150px;margin:auto;text-align:left}.compare-grid article{padding:44px}.compare-grid li{margin:22px 0;color:#475569;font-size:18px}.compare-grid .yes{background:#08101f;color:white;border:1px solid var(--red);box-shadow:0 20px 50px rgba(255,71,71,.12)}.yes b{background:var(--red);padding:10px 20px;border-radius:999px}.yes li{color:#e5e7eb}.mini-stats{display:flex;justify-content:center;gap:22px;margin:35px 0}.mini-stats b{display:block;font-size:24px}.map{height:520px;border-radius:18px;max-width:1100px;margin:auto;background:#111 url('assets/map-grid.svg') center/cover;border:1px solid #222;position:relative;overflow:hidden}.map span{position:absolute;width:26px;height:26px;background:#ff8a00;border:3px solid #ff4747;border-radius:50%;box-shadow:0 0 28px #ff4747}.map span:nth-child(1){left:48%;top:28%}.map span:nth-child(2){left:50%;top:45%}.map span:nth-child(3){left:46%;top:56%}.map span:nth-child(4){left:52%;top:62%}.map span:nth-child(5){left:49%;top:72%}.map span:nth-child(6){left:51%;top:82%}.download{text-align:center;padding:120px 10%}.download p{color:#aab2c0;font-size:22px}.download-card{max-width:460px;margin:55px auto 0;background:#151d2b;border-color:#2d3748;color:white}.logo.big{width:70px;height:70px;font-size:32px}.faqs .accordion{max-width:760px;margin:auto;text-align:left}.faq{background:white;border:1px solid var(--line);border-radius:16px;margin:12px 0;overflow:hidden}.faq button{width:100%;padding:24px;border:0;background:white;text-align:left;font-weight:800;font-size:16px;display:flex;justify-content:space-between}.faq p{display:none;padding:0 24px 24px;color:#475569}.faq.open p{display:block}.footer{background:#080e1b;color:white;padding:80px 10% 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:60px}.footer p,.footer a{color:#8b95a5;display:block;margin:16px 0;font-size:18px;line-height:1.6}.copy{grid-column:1/-1;border-top:1px solid #1f2937;padding-top:30px}.copy span{float:right}@media(max-width:900px){.nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#151b28;padding:20px;flex-direction:column}.nav-links.active{display:flex}.menu-btn{display:block;background:none;color:white;border:0;font-size:28px}.hero{grid-template-columns:1fr;padding:60px 6%;min-height:auto}.hero h1{font-size:50px}.phone-card{height:360px}.cards,.stats-grid,.compare-grid{grid-template-columns:1fr}.mini-stats{flex-direction:column}.footer{grid-template-columns:1fr}.copy span{float:none;display:block}.badges,.actions{flex-direction:column}.navbar{padding:0 6%}}.reveal{animation:rise .8s ease both}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
:root{--red:#ff3b4f}.hero{background:radial-gradient(circle at 80% 20%,rgba(255,71,71,.22),transparent 35%),linear-gradient(135deg,#050914,#0b1224 55%,#090f1e)}.phone-card,.download-card,.stats-grid article{backdrop-filter:blur(18px);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));}.cards article:hover,.compare-grid article:hover{transform:translateY(-8px);box-shadow:0 24px 60px #0001}.cards article,.compare-grid article{transition:.25s ease}.btn{background:linear-gradient(135deg,#ff4d4d,#ff304f)}
.network-section {
  padding: 100px 24px;
  background: #f8fafc;
  text-align: center;
}

.section-header .badge {
  display: inline-block;
  background: #ffe4e6;
  color: #ff4045;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  color: #0b1020;
  margin-bottom: 20px;
}

.section-header h2 span {
  color: #ff4045;
}

.section-header p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 20px;
  color: #475569;
  line-height: 1.6;
}

.network-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 60px 0 40px;
  flex-wrap: wrap;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 28px 48px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.stat-card h3 {
  font-size: 30px;
  color: #020617;
  margin-bottom: 8px;
}

.stat-card p {
  color: #475569;
  font-size: 15px;
}

#socorroMap {
  width: 100%;
  max-width: 1200px;
  height: 620px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  border: 1px solid #1f2937;
}

.leaflet-popup-content-wrapper {
  border-radius: 16px;
}

.map-popup h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 18px;
}

.map-popup p {
  margin: 4px 0;
  color: #475569;
  font-size: 14px;
}

@media (max-width: 768px) {
  #socorroMap {
    height: 480px;
  }

  .stat-card {
    width: 100%;
  }
}
.map-note {
  margin-top: 18px;
  font-size: 14px;
  color: #64748b;
}
.counter {
  font-size: 54px;
  font-weight: 800;
  color: #020617;
  transition: all 0.3s ease;
}
.reveal-section {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-section.show {
  opacity: 1;
  transform: translateY(0);
}
.feature-icon {
  width: 64px;
  height: 64px;

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

  border-radius: 20px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  box-shadow:
    0 0 30px rgba(255, 64, 69, 0.15);

  color: #ff4045;
}

.feature-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.2;
}

/* =========================
   NAV LINKS
========================= */

.nav-links a:not(.download-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;

  padding: 8px 8px;

  border-radius: 22px;

  color: #b8beca;

  font-weight: 700;
  text-decoration: none;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

/* Hover */

.nav-links a:not(.download-btn):hover {
  color: #ff4045;

  background: rgba(255, 64, 69, 0.14);

  transform: translateY(-1px);
}

/* Active */

.nav-links a:not(.download-btn).active {
  color: #ff4045;

  background: rgba(255, 64, 69, 0.14);
}

.icon-badge {

  width: 74px;
  height: 74px;

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

  border-radius: 22px;

  background: rgba(255, 64, 69, 0.12);

  border: 1px solid rgba(255, 64, 69, 0.08);

  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 30px rgba(255,64,69,0.08);

}

/* ICON */

.icon-badge svg {

  width: 34px;
  height: 34px;

  stroke: #ff4045;

  stroke-width: 2.2;

  filter:
    drop-shadow(0 0 8px rgba(255,64,69,0.45));

}

footer a {
  color: #9ca3af;

  text-decoration: none;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* Hover */

footer a:hover {
  color: #ff4045;
}

@keyframes floatAnimation {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }

}

.faq {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.faq:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 64, 69, 0.35);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.faq button {
  width: 100%;
  padding: 24px 28px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;

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

  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.faq button:hover {
  color: #ff4045;
}

.faq p {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 28px;
  color: #475569;
  line-height: 1.7;
  font-size: 16px;
  opacity: 0;

  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    padding 0.35s ease;
}

.faq.open p {
  max-height: 2000px;
  padding: 0 28px 24px;
  opacity: 1;
}

.faq-arrow {
  color: #ff4045;
  font-size: 22px;
  transition: transform 0.3s ease;
}

.faq.open .faq-arrow {
  transform: rotate(180deg);
}

/* =========================
   MOBILE HERO FIX
========================= */

@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden;
  }

  .hero {

    flex-direction: column;

    text-align: center;

    padding-left: 20px;
    padding-right: 20px;

    overflow: hidden;
  }

  .hero-content {

    width: 100%;
    max-width: 100%;
  }

  /* BOTONES */

  .actions {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    width: 100%;
  }

  .actions .btn {

    width: 100%;

    max-width: 320px;

    justify-content: center;
  }

  /* BADGES */

  .badges {

    justify-content: center;

    flex-wrap: wrap;
  }

  /* IMAGEN */

  .hero img {

    width: 100% !important;

    max-width: 320px;

    height: auto;

    margin-top: 40px;
  }

}

.hero-phone {

  width: 100%;

  max-width: 400px;

  border-radius: 15px;

  animation:
    floatAnimation 6s ease-in-out infinite;
}

@media (max-width: 768px) {

  .hero img {
    display: none;
  }

}