:root{
  --rojo: #da291c;
  --rojo-osc: #a31810;
  --negro: #1a1a1a;
  --verde: #2da44e;
  --bg: #f7f5f4;
  --texto: #1a1a1a;
  --gris: #6e6e6e;
  --borde: #e8e2e1;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  color:var(--texto);
  background:var(--bg) url('images/fondo-pagina-hd.png') no-repeat top center;
  background-size:cover;
  background-attachment:fixed;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ===== HEADER ===== */
header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:3px solid var(--rojo);
  box-shadow:0 1px 6px rgba(20,20,20,.06);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:6px 20px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:80px;width:auto;}
.brand-text{font-size:11px;color:var(--gris);}
nav ul{display:flex;gap:22px;align-items:center;}
nav a{font-size:14px;font-weight:600;color:var(--negro);padding:6px 2px;border-bottom:2px solid transparent;transition:.15s;}
nav a:hover{border-bottom-color:var(--rojo);color:var(--rojo);}
.nav-social{display:flex;gap:10px;align-items:center;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--rojo);color:#fff;font-size:16px;font-weight:800;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.icon-btn:hover{transform:translateY(-3px) scale(1.12);box-shadow:0 8px 16px rgba(0,0,0,.28);}
.icon-fb{background:linear-gradient(135deg,var(--rojo),var(--rojo-osc));}
.icon-ig{background:linear-gradient(135deg,#f5a623,#e1306c 55%,#8b3ab8);}
.icon-tiktok{background:linear-gradient(135deg,#1a1a1a,#000);font-size:18px;}
.icon-wa{background:#25D366;}
.icon-wa:hover{background:#1ebc59;}
.menu-toggle{display:none;font-size:22px;background:none;border:none;cursor:pointer;color:var(--rojo);}

/* ===== HERO ===== */
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--rojo) 0%, var(--rojo-osc) 55%, #6e0e08 100%);
  color:#fff;padding:64px 20px 80px;text-align:center;
}
.hero-phones{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:46px;z-index:1;}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
@media (max-width:700px){
  .hero-phones{display:none;}
}
.hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin:16px 0 10px;}
.hero p{font-size:15.5px;color:#fde3e0;margin-bottom:10px;}
.hero-sucursales{font-size:12.5px;color:#ffd2cd;margin-bottom:24px;letter-spacing:.2px;}
.hero-rtn{font-size:11.5px;color:#ffc6c0;margin-top:18px;}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:30px;font-size:12.5px;font-weight:800;
}
.badge.claro{background:#fff;color:var(--rojo);}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:8px;font-size:14.5px;font-weight:700;
  border:none;cursor:pointer;transition:.15s;
}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1ebc59;}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);}
.btn-outline-light:hover{background:rgba(255,255,255,.14);}
.btn-outline-red{background:transparent;color:var(--rojo);border:1.5px solid var(--rojo);}
.btn-outline-red:hover{background:#fdeceb;}

/* ===== SECTIONS ===== */
section{padding:54px 0;}
.section-title{text-align:center;margin-bottom:8px;font-size:26px;font-weight:800;color:var(--rojo);}
.section-sub{text-align:center;color:var(--gris);font-size:14.5px;margin-bottom:34px;max-width:620px;margin-left:auto;margin-right:auto;}
.alt-bg{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);}

/* ===== PRODUCT GRID ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.card{
  background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;
}
.card:hover{box-shadow:0 8px 24px rgba(20,20,20,.12);transform:translateY(-2px);}
.card-img{width:100%;aspect-ratio:5/6;object-fit:contain;object-position:center;background:#f0eded;padding:10px;}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-body h3{font-size:15.5px;font-weight:700;color:var(--negro);}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;}
.tag-credito{background:#e9f7ee;color:var(--verde);}
.tag-contado{background:#f0f0f0;color:#3a3a3a;}
.tag-claro{background:#fdeceb;color:var(--rojo);}
.price{font-size:20px;font-weight:800;color:var(--texto);margin-top:2px;}
.price small{font-size:12px;font-weight:600;color:var(--gris);}
.card-actions{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:6px;}
.btn-card{
  width:100%;justify-content:center;padding:9px 10px;font-size:13px;border-radius:7px;
}
.btn-card.secondary{background:#fdeceb;color:var(--rojo-osc);}
.btn-card.secondary:hover{background:#fbd9d6;}

/* ===== SERVICE CARDS (SIM / Internet) ===== */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.service-card{
  background:#fff;border:1px solid var(--borde);border-radius:14px;padding:26px;
  display:flex;flex-direction:column;gap:12px;
}
.service-card .emoji{font-size:30px;}
.service-card h3{font-size:18px;font-weight:800;color:var(--rojo);}
.service-card p{color:var(--gris);font-size:14px;}
.service-price{font-size:18px;font-weight:800;}

/* ===== PLANES INTERNET (TRIPLE PLAY GPON) ===== */
.internet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:10px;}
.internet-card{
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 4px 14px rgba(20,20,20,.08);
  display:flex;flex-direction:column;text-align:center;
  transition:.15s;
}
.internet-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,20,20,.14);}
.internet-card-top{
  background:var(--negro);color:#fff;font-weight:800;font-size:15px;
  padding:12px 8px;letter-spacing:.4px;
}
.internet-card-price{
  background:linear-gradient(135deg,var(--rojo),var(--rojo-osc));
  color:#fff;padding:18px 10px 14px;flex:1;
  font-size:24px;font-weight:800;
}
.internet-card-price span{display:block;font-size:12.5px;font-weight:700;margin-top:4px;text-decoration:underline;text-underline-offset:3px;}
.internet-incluye{
  max-width:640px;margin:30px auto 0;background:#fff;border:1px solid var(--borde);
  border-radius:12px;padding:20px 24px;text-align:center;
}
.internet-incluye strong{color:var(--rojo);font-size:14.5px;}
.internet-incluye ul{margin:10px 0 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;}
.internet-incluye li{font-size:13px;color:var(--texto);position:relative;padding-left:16px;}
.internet-incluye li::before{content:"✔";color:var(--verde);position:absolute;left:0;font-size:11px;top:1px;}
.internet-promo{font-size:12px;color:var(--gris);margin-top:8px;font-style:italic;}

/* ===== ASESORES / SUCURSALES ===== */
.asesores-wrap{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:24px;}
.asesores-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px;}
.asesor-chip{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--borde);border-radius:10px;font-size:13px;
}
.asesor-avatar{width:34px;height:34px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.asesor-info strong{display:block;font-size:13px;}
.asesor-info span{font-size:11.5px;color:var(--gris);}

/* ===== CTA STRIP ===== */
.cta-strip{
  background:linear-gradient(120deg,var(--rojo),var(--rojo-osc));
  color:#fff;text-align:center;padding:46px 20px;
}
.cta-strip h2{font-size:24px;font-weight:800;margin-bottom:10px;}
.cta-strip p{margin-bottom:22px;color:#fde3e0;}

/* ===== FOOTER ===== */
footer{background:#1a1414;color:#d8cccb;padding:40px 20px 22px;border-top:3px solid var(--rojo);}
.footer-logo-box{background:#fff;display:inline-block;padding:10px 14px;border-radius:8px;margin-bottom:10px;}
.footer-logo-box img{height:68px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:1180px;margin:0 auto;}
.footer-grid h4{color:#fff;font-size:14px;margin-bottom:10px;}
.footer-grid p, .footer-grid a{font-size:13px;color:#bba9a8;}
.footer-social{display:flex;gap:10px;margin-top:10px;}
.footer-bottom{text-align:center;font-size:12px;color:#8a7574;margin-top:30px;border-top:1px solid #322424;padding-top:16px;}

/* ===== CARRITO ===== */
.cart-toggle{
  position:relative;border:2.5px solid var(--rojo);
  background:#fff !important;color:var(--rojo) !important;font-size:18px;
}
.cart-toggle:hover{background:var(--rojo) !important;color:#fff !important;}
.cart-badge{
  position:absolute;top:-4px;right:-4px;background:var(--negro);color:#fff;
  font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:9px;
  align-items:center;justify-content:center;padding:0 3px;display:none;
}
.cart-add{background:var(--rojo);color:#fff;}
.cart-add:hover{background:var(--rojo-osc);}

.cart-overlay{
  position:fixed;inset:0;z-index:300;display:none;
}
.cart-overlay.open{display:block;}
.cart-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.cart-panel{
  position:absolute;top:0;right:0;height:100%;width:360px;max-width:92vw;
  background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  animation:slideIn .2s ease-out;
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--borde);}
.cart-header h3{font-size:16px;color:var(--rojo);}
.cart-close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--gris);}
.cart-body{flex:1;overflow-y:auto;padding:14px 18px;}
.cart-vacio{color:var(--gris);font-size:13.5px;text-align:center;margin-top:30px;}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--borde);}
.cart-item-info{flex:1;display:flex;flex-direction:column;}
.cart-item-info strong{font-size:13.5px;}
.cart-item-info span{font-size:12px;color:var(--gris);}
.cart-item-qty{display:flex;align-items:center;gap:6px;}
.cart-item-qty button{
  width:24px;height:24px;border-radius:5px;border:1px solid var(--borde);background:#fff;
  cursor:pointer;font-size:14px;line-height:1;
}
.cart-item-qty span{min-width:16px;text-align:center;font-size:13px;font-weight:700;}
.cart-item-remove{background:none;border:none;cursor:pointer;font-size:14px;}
.cart-footer{padding:16px 18px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:10px;}
.cart-total-row{display:flex;justify-content:space-between;font-size:14px;}
.cart-clear{background:none;border:none;color:var(--gris);font-size:12.5px;text-decoration:underline;cursor:pointer;}

/* ===== FLOATING WHATSAPP ===== */
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:200;
  background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ===== PESTAÑA LATERAL "CONTÁCTANOS" ===== */
.side-tab{
  position:fixed;left:0;top:62%;transform:translateY(-50%);
  background:var(--rojo);color:#fff;
  padding:13px 18px 13px 12px;border-radius:0 30px 30px 0;
  font-size:13.5px;font-weight:800;letter-spacing:.2px;
  display:flex;align-items:center;gap:6px;
  box-shadow:3px 4px 14px rgba(0,0,0,.22);
  z-index:150;transition:.15s;
  animation:pulseSide 2.6s infinite;
}
.side-tab:hover{background:var(--rojo-osc);padding-right:24px;}
@keyframes pulseSide{0%{box-shadow:3px 4px 14px rgba(0,0,0,.22),0 0 0 0 rgba(218,41,28,.55);}70%{box-shadow:3px 4px 14px rgba(0,0,0,.22),0 0 0 12px rgba(218,41,28,0);}100%{box-shadow:3px 4px 14px rgba(0,0,0,.22),0 0 0 0 rgba(218,41,28,0);}}
@media (max-width:480px){
  .side-tab{font-size:12px;padding:10px 14px 10px 10px;top:66%;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
  nav{position:fixed;top:62px;left:0;right:0;background:#fff;border-bottom:1px solid var(--borde);
      flex-direction:column;padding:10px 20px;display:none;}
  nav.open{display:flex;}
  nav ul{flex-direction:column;align-items:flex-start;gap:4px;width:100%;}
  nav ul li{width:100%;}
  nav a{display:block;padding:10px 0;}
  .menu-toggle{display:block;}
  .nav-social .social-only{display:none;}
}
@media (max-width:480px){
  .hero{padding:46px 16px 64px;}
  section{padding:40px 0;}
}