/* ============================================================
   Celulares Alejandro — hoja de estilos
   ============================================================ */

:root{
  --bg: #f3f4f7;
  --surface: #ffffff;
  --ink: #12141a;
  --muted: #656c7a;
  --border: #e6e8ec;

  --header-bg: #0b1220;
  --header-ink: #f5f7fb;

  --tigo: #0057b8;
  --tigo-dark: #003d82;
  --tigo-soft: #e8f1ff;

  --claro: #e30613;
  --claro-dark: #a80410;
  --claro-soft: #fdecec;

  --liberado: #12141a;
  --liberado-dark: #000000;
  --liberado-soft: #eef0f3;

  --success: #14804a;
  --success-soft: #e6f6ee;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(18,20,26,.06);
  --shadow: 0 10px 30px -12px rgba(18,20,26,.18);
  --shadow-lg: 0 24px 60px -20px rgba(18,20,26,.28);

  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
h1, h2, h3, h4{ font-family: var(--font-head); margin: 0; line-height: 1.15; }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-pad{ padding: 72px 0; }
@media (max-width: 720px){ .section-pad{ padding: 48px 0; } }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tigo-dark);
}
.section-head{ max-width: 640px; margin: 0 0 40px; }
.section-head h2{ font-size: clamp(26px, 3.5vw, 36px); margin-top: 10px; }
.section-head p{ color: var(--muted); margin-top: 12px; font-size: 16px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-whatsapp{ background: #25D366; color: #06210f; box-shadow: var(--shadow-sm); }
.btn-whatsapp:hover{ background: #1ebe5a; }
.btn-outline{ background: transparent; border-color: rgba(245,247,251,.35); color: var(--header-ink); }
.btn-outline:hover{ background: rgba(245,247,251,.1); }
.btn-dark{ background: var(--ink); color: #fff; }
.btn-dark:hover{ background: #000; }
.btn-ghost{ background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; }
.btn-block{ width: 100%; }
.btn svg{ width: 18px; height: 18px; flex: none; }

/* ---------------- Topbar ---------------- */
.topbar{
  background: #060a14; color: #c7cedd; font-size: 13px;
}
.topbar .container{ display: flex; align-items: center; justify-content: space-between; height: 38px; }
.topbar-socials{ display: flex; align-items: center; gap: 14px; }
.topbar-socials a{ display: flex; color: #c7cedd; opacity: .85; transition: opacity .15s, color .15s; }
.topbar-socials a:hover{ opacity: 1; color: #fff; }
.topbar-socials svg{ width: 16px; height: 16px; }
.topbar-msg{ display: flex; align-items: center; gap: 8px; }
.topbar-msg svg{ width: 14px; height: 14px; }
@media (max-width: 640px){ .topbar-msg span{ display:none; } }

/* ---------------- Header / Nav ---------------- */
.site-header{ background: var(--header-bg); color: var(--header-ink); position: sticky; top: 0; z-index: 50; }
.navbar{ display: flex; align-items: center; gap: 20px; height: 76px; }
.brand{ display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; margin-right: auto; }
.brand-mark{
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.brand-mark img{ width: 100%; height: 100%; object-fit: cover; }
.brand small{ display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: #9aa4b8; letter-spacing: .03em; }

.nav-links{ display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; color: #cfd5e2; }
.nav-links a{ padding: 8px 0; position: relative; transition: color .15s; }
.nav-links a:hover{ color: #fff; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff; transform: scaleX(0); transition: transform .15s; }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-actions{ display: flex; align-items: center; gap: 10px; }
.nav-toggle{
  display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #fff; align-items: center; justify-content: center;
}
.nav-toggle svg{ width: 20px; height: 20px; }

@media (max-width: 980px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .btn-outline.nav-cta-text{ display:none; }
}

.mobile-menu{ display: none; background: #0e1526; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-menu.open{ display: block; }
.mobile-menu .container{ padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a{ padding: 12px 4px; color: #dfe4ee; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---------------- Hero ---------------- */
.hero{
  position: relative; overflow: hidden;
  background: radial-gradient(1100px 480px at 12% -10%, rgba(0,87,184,.35), transparent 60%),
              radial-gradient(900px 460px at 100% 0%, rgba(227,6,19,.30), transparent 55%),
              var(--header-bg);
  color: #fff;
}
.hero .container{ padding-top: 76px; padding-bottom: 76px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; padding-top: 52px; padding-bottom: 52px; } }

.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #dbe1ee; }
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#25D366; box-shadow: 0 0 0 3px rgba(37,211,102,.25); }
.hero h1{ font-size: clamp(32px, 5vw, 52px); margin: 18px 0 16px; letter-spacing: -.01em; }
.hero h1 em{ font-style: normal; background: linear-gradient(90deg, #4da3ff, #ffffff 45%, #ff6b73); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead{ color: #b9c1d4; font-size: 17px; max-width: 520px; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats{ display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats div strong{ display:block; font-family: var(--font-head); font-size: 26px; }
.hero-stats div span{ font-size: 13px; color: #9aa4b8; }

.hero-art{ position: relative; }
.hero-card{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  padding: 22px; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg);
}
.hero-card-row{ display:flex; align-items:center; gap:14px; padding: 12px 8px; border-radius: 12px; }
.hero-card-row + .hero-card-row{ border-top: 1px solid rgba(255,255,255,.08); }
.hero-chip{ width: 40px; height: 40px; border-radius: 10px; display:flex; align-items:center; justify-content:center; flex:none; }
.hero-chip svg{ width:20px; height:20px; }
.hero-chip.tigo{ background: var(--tigo); color:#fff; }
.hero-chip.claro{ background: var(--claro); color:#fff; }
.hero-chip.liberado{ background:#fff; color:#0b1220; border: 2px solid #0b1220; }
.hero-card-row strong{ display:block; font-size: 15px; }
.hero-card-row span{ font-size: 12.5px; color:#a9b1c4; }
.hero-card-row .count{ margin-left:auto; font-family: var(--font-head); font-weight:700; font-size: 20px; }

/* ---------------- Company cards ---------------- */
.companies-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px){ .companies-grid{ grid-template-columns: 1fr; } }
.company-card{
  border-radius: var(--radius-lg); padding: 30px; position: relative; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left; width: 100%;
}
.company-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.company-card .icn{ width: 54px; height: 54px; border-radius: 14px; display:flex; align-items:center; justify-content:center; margin-bottom: 20px; }
.company-card .icn svg{ width: 26px; height: 26px; }
.company-card .icn img{ width: 100%; height: 100%; object-fit: contain; }
.company-card.tigo .icn, .company-card.claro .icn{ background: #fff; padding: 10px; }
.company-card h3{ font-size: 22px; margin-bottom: 8px; }
.company-card p{ color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.company-card .cta{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size: 14px; }
.company-card .cta svg{ width:16px; height:16px; transition: transform .15s; }
.company-card:hover .cta svg{ transform: translateX(3px); }

.company-card.tigo{ border-top: 4px solid var(--tigo); }
.company-card.tigo .icn{ background: var(--tigo-soft); color: var(--tigo); }
.company-card.tigo .cta{ color: var(--tigo); }
.company-card.claro{ border-top: 4px solid var(--claro); }
.company-card.claro .icn{ background: var(--claro-soft); color: var(--claro); }
.company-card.claro .cta{ color: var(--claro); }
.company-card.liberado{ border-top: 4px solid var(--liberado); }
.company-card.liberado .icn{ background: var(--liberado-soft); color: var(--liberado); border: 1px solid #d7d9de; }
.company-card.liberado .cta{ color: var(--liberado); }
.company-card .badge-count{ position:absolute; top: 22px; right: 22px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 5px 12px; }

/* ---------------- Catalog ---------------- */
.catalog-toolbar{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab-btn{
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px; transition: all .15s;
}
.tab-btn .sw{ width: 9px; height: 9px; border-radius: 50%; }
.tab-btn[data-company="tigo"] .sw{ background: var(--tigo); }
.tab-btn[data-company="claro"] .sw{ background: var(--claro); }
.tab-btn[data-company="liberado"] .sw{ background:#fff; border:1.5px solid var(--liberado); }
.tab-btn[data-company="all"] .sw{ background: linear-gradient(90deg, var(--tigo), var(--claro)); }
.tab-btn.active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.tab-btn.active .sw{ border-color:#fff; }
.tab-btn:hover:not(.active){ border-color: var(--ink); }
.tab-count{ opacity:.65; font-weight: 500; }

.toolbar-row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search-wrap{ position: relative; flex: 1 1 260px; min-width: 220px; }
.search-wrap svg{ position:absolute; left:14px; top:50%; transform: translateY(-50%); width:17px; height:17px; color: var(--muted); }
.search-wrap input{
  width: 100%; padding: 11px 14px 11px 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); font-size: 14.5px; color: var(--ink);
}
.search-wrap input:focus{ outline: 2px solid var(--tigo); outline-offset: 1px; background: #fff; }
select#sortSelect{
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.stock-toggle{ display:flex; align-items:center; gap:8px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 0 4px; }
.stock-toggle input{ width: 17px; height: 17px; accent-color: var(--tigo); }

.brand-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.chip{
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: all .15s;
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.active{ background: var(--tigo-dark); border-color: var(--tigo-dark); color: #fff; }

.results-bar{ display:flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.results-bar .count{ font-size: 14.5px; color: var(--muted); }
.results-bar .count strong{ color: var(--ink); }

.product-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){ .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px){ .product-grid{ grid-template-columns: 1fr 1fr; } }

.product-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card.out{ opacity: .72; }
.card-media{
  position: relative; aspect-ratio: 4 / 3.1; display:flex; align-items:center; justify-content:center;
  background: var(--bg);
}
.card-media svg{ width: 46%; height: 46%; }
.card-media.tigo{ background: linear-gradient(160deg, var(--tigo-soft), #fff); }
.card-media.tigo svg{ color: var(--tigo); }
.card-media.claro{ background: linear-gradient(160deg, var(--claro-soft), #fff); }
.card-media.claro svg{ color: var(--claro); }
.card-media.liberado{ background: linear-gradient(160deg, var(--liberado-soft), #fff); }
.card-media.liberado svg{ color: var(--liberado); }
.card-media.na{ background: linear-gradient(160deg, #eef2f6, #fff); }
.card-media.na svg{ color: #64748b; }

.card-photo{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: #fff; z-index: 1;
}

.pill{
  position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; display:flex; align-items:center; gap:6px;
  z-index: 2;
}
.pill .sw{ width: 7px; height: 7px; border-radius: 50%; }
.pill.tigo{ background: var(--tigo); color: #fff; }
.pill.claro{ background: var(--claro); color: #fff; }
.pill.liberado{ background: #fff; color: var(--liberado); border: 1.4px solid var(--liberado); }
.pill.na{ background: #475569; color: #fff; }

.stock-pill{
  position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 9px; border-radius: 999px; z-index: 2;
}
.stock-pill.in{ background: var(--success-soft); color: var(--success); }
.stock-pill.out{ background: var(--danger-soft); color: var(--danger); }

.card-body{ padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-brand{ font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.card-title{ font-size: 15px; font-weight: 700; line-height: 1.3; min-height: 39px; }
.card-price-row{ display:flex; align-items:baseline; gap: 6px; margin-top: 4px; }
.card-price{ font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.card-price.tbd{ font-size: 14px; color: var(--muted); font-weight: 600; }
.card-price-cur{ font-size: 12px; color: var(--muted); font-weight: 600; }
.card-actions{ margin-top: 10px; }
.card-wa{
  width: 100%; display:flex; align-items:center; justify-content:center; gap: 7px;
  background: #f0fdf6; color: #0f6b34; border: 1px solid #cdeedb; padding: 10px; border-radius: 10px;
  font-weight: 700; font-size: 13px; transition: background .15s, color .15s, border-color .15s;
}
.card-wa svg{ width: 16px; height: 16px; }
.card-wa:hover{ background: #25D366; color: #06210f; border-color: #25D366; }

.load-more-wrap{ display:flex; justify-content:center; margin-top: 32px; }
.empty-state{ text-align:center; padding: 70px 20px; color: var(--muted); }
.empty-state svg{ width:52px; height:52px; margin: 0 auto 14px; color:#c7cdd8; }
.empty-state h3{ color: var(--ink); margin-bottom: 6px; font-size: 18px; }

/* ---------------- Accessories ---------------- */
.mini-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px){ .mini-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .mini-grid{ grid-template-columns: repeat(2, 1fr); } }
.mini-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.mini-card:hover{ transform: translateY(-3px); }
.mini-card .mini-icn{ width: 52px; height: 52px; border-radius: 12px; margin: 0 auto 12px; display:flex; align-items:center; justify-content:center; }
.mini-card .mini-icn svg{ width: 26px; height: 26px; }
.mini-card h4{ font-size: 13.5px; margin-bottom: 4px; }
.mini-card .mini-price{ font-family: var(--font-head); font-weight: 700; font-size: 16px; margin-bottom: 10px; }

/* ---------------- Why us ---------------- */
.location-photo{ width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius); margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.perks-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
@media (max-width: 560px){ .perks-grid{ grid-template-columns: 1fr; } }
.perk{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.perk .icn{ width: 46px; height: 46px; border-radius: 12px; background: var(--tigo-soft); color: var(--tigo-dark); display:flex; align-items:center; justify-content:center; margin-bottom: 16px; }
.perk .icn svg{ width: 22px; height: 22px; }
.perk h4{ font-size: 15.5px; margin-bottom: 6px; }
.perk p{ font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------------- CTA banner ---------------- */
.cta-banner{
  border-radius: var(--radius-lg); padding: 46px; text-align:center;
  background: linear-gradient(120deg, var(--tigo-dark), #101a33 45%, var(--claro-dark));
  color: #fff; position: relative; overflow:hidden;
}
.cta-banner h2{ font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.cta-banner p{ color: #d7dcea; max-width: 520px; margin: 0 auto 26px; }
.cta-banner .hero-cta{ justify-content: center; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--header-bg); color: #b9c1d4; padding: 56px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h5{ color: #fff; font-family: var(--font-head); font-size: 14px; margin-bottom: 16px; letter-spacing: .02em; }
.footer-grid p{ font-size: 13.5px; color: #97a1b6; margin: 0 0 18px; max-width: 280px; }
.footer-grid li{ margin-bottom: 10px; font-size: 13.5px; }
.footer-grid a:hover{ color: #fff; }
.footer-socials{ display:flex; gap: 10px; }
.footer-socials a{
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; transition: background .15s, transform .15s;
}
.footer-socials a:hover{ background: rgba(255,255,255,.1); transform: translateY(-2px); }
.footer-socials svg{ width: 18px; height: 18px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 12.5px; color: #7c869c; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------------- Floating WhatsApp ---------------- */
.float-wa{
  position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(37,211,102,.45);
  z-index: 60; transition: transform .15s;
}
.float-wa:hover{ transform: scale(1.06); }
.float-wa svg{ width: 28px; height: 28px; color: #fff; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }