/* ================================
   ZENTRANET — TELECO (mismo estilo)
   ================================ */

/* Variables locales (mismas del theme de Informática) */
:root{
  --tel-surface:#0f172a;
  --tel-card:#15223b;
  --tel-border:rgba(148,163,184,.16);
  --tel-primary:#1d4ed8;
  --tel-primary-2:#2563eb;
  --tel-text:#e5e7eb;
  --tel-dim:#cbd5e1;
}

/* Wrapper general */
.tel-wrap{ padding:2.5rem 1rem 3.5rem; max-width:1100px; margin:0 auto; }

/* ===== HERO ===== */
.tel-hero{
  background: linear-gradient(180deg, rgba(29,78,216,.08), rgba(29,78,216,0));
  border:1px solid var(--tel-border);
  border-radius:18px;
  padding:2rem 1.25rem;
  text-align:center;
  margin:1rem 0 2rem;
}
.tel-brand{ display:flex; justify-content:center; margin-bottom:.8rem; }
.tel-brand__link{ display:inline-flex; border-radius:8px; }
.tel-brand__link:hover{ filter: drop-shadow(0 4px 12px rgba(37,99,235,.35)); }
.tel-logo{
  width: clamp(140px, 14vw, 240px);
  height:auto; display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  opacity:.98;
}
.tel-hero h1{
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem);
  margin:.25rem 0 .65rem;
}
.tel-hero p{
  margin:0 auto 1.1rem; max-width:70ch; line-height:1.7; opacity:.95;
}
.tel-cta{
  display:flex; gap:.65rem; align-items:center; justify-content:center; flex-wrap:wrap;
}
.tel-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:10px; border:1px solid transparent;
  background:var(--tel-primary); color:#fff; font-weight:700; letter-spacing:.2px;
  text-decoration:none; box-shadow:0 8px 18px rgba(29,78,216,.25);
  transition:.18s;
}
.tel-btn:hover{ background:var(--tel-primary-2); transform: translateY(-1px); }
.tel-btn--ghost{ background:transparent; color:var(--tel-primary); border-color:rgba(29,78,216,.45); box-shadow:none; }
.tel-btn--ghost:hover{ background:rgba(29,78,216,.08); }

/* ===== Breadcrumb ===== */
.tel-breadcrumb{ max-width:1100px; margin:-.5rem auto 1rem; padding:0 .25rem; color:var(--tel-dim); font-size:.95rem; }
.tel-breadcrumb__list{ list-style:none; display:flex; gap:.5rem; align-items:center; margin:0; padding:0 .25rem; flex-wrap:wrap; }
.tel-breadcrumb__sep{ opacity:.6; }
.tel-breadcrumb__link{ color:var(--tel-text); text-decoration:none; border-bottom:1px dashed rgba(148,163,184,.25); }
.tel-breadcrumb__link:hover{ color:var(--tel-primary-2); border-bottom-color:transparent; }
.tel-breadcrumb__text{ opacity:.9; }
.tel-breadcrumb__item--current .tel-breadcrumb__text{ color:#fff; font-weight:700; opacity:1; }

/* ===== GRID SERVICIOS ===== */
.tel-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2rem 0 1.5rem; }
.tel-card{
  background:var(--tel-card); border:1px solid var(--tel-border); border-radius:16px;
  padding:1.2rem 1rem; text-align:left; box-shadow:0 10px 25px rgba(0,0,0,.22);
}
.tel-card h3{ margin:.2rem 0 .35rem; font-size:1.05rem; }
.tel-card p{ margin:0; opacity:.92; line-height:1.65; }
.tel-list{ list-style:none; margin:.65rem 0 0; padding:0; }
.tel-list li{ position:relative; padding-left:1.2rem; margin:.38rem 0; }
.tel-list li::before{
  content:""; position:absolute; left:0; top:.5rem; width:.65rem; height:.65rem; border-radius:50%;
  background: currentColor; opacity:.28; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

/* ===== PACKS / PRECIOS ===== */
.tel-pricing{ margin:2.25rem 0 1rem; }
.tel-pricing h2{ text-align:center; margin:0 0 1rem; font-size:1.35rem; }
.tel-pricing-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tel-price{
  position:relative; background:var(--tel-card); border:1px solid var(--tel-border); border-radius:16px;
  padding:1rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:0 10px 25px rgba(0,0,0,.22);
}
.tel-price h3{ margin:.2rem 0; font-size:1.05rem; }
.tel-badge{
  position:absolute; top:10px; right:10px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.3px;
  padding:.25rem .5rem; border-radius:8px; box-shadow:0 6px 16px rgba(22,163,74,.3);
}
.tel-amount{ display:flex; gap:.5rem; align-items:baseline; font-weight:800; font-size:1.1rem; }
.tel-old{ text-decoration:line-through; opacity:.6; font-weight:600; }
.tel-price ul{ margin:.25rem 0 0; padding:0; list-style:none; }
.tel-price ul li{ margin:.35rem 0; opacity:.92; }
.tel-price .tel-btn{ margin-top:.3rem; }
.tel-note{ display:block; text-align:center; margin-top:.5rem; opacity:.8; }

/* ===== ENTREGABLES (tags) ===== */
.tel-box{
  background:var(--tel-card); border:1px solid var(--tel-border); border-radius:16px;
  padding:1.25rem; margin:2rem 0 1.5rem;
}
.tel-box h2{ margin:0 0 .6rem; font-size:1.25rem; }
.tel-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.tel-tag{ font-size:.85rem; border:1px solid var(--tel-border); border-radius:999px; padding:.25rem .6rem; opacity:.9; background:rgba(255,255,255,.03); }

/* ===== PROCESO ===== */
.tel-process-title{ text-align:center; margin:1.25rem 0 .8rem; font-size:1.35rem; }
.tel-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; margin:1.25rem 0 0; }
.tel-step{
  text-align:center; background:var(--tel-card); border:1px solid var(--tel-border); border-radius:12px; padding:.8rem;
}
.tel-step h4{ margin:.1rem 0 .25rem; font-size:1rem; }
.tel-step p{ margin:0; font-size:.92rem; opacity:.9; }

/* ===== FAQS ===== */
.tel-faqs{ margin:2rem 0 1rem; }
.tel-faqs h2{ text-align:center; margin:0 0 1rem; font-size:1.35rem; }
.tel-faq{
  background:var(--tel-card); border:1px solid var(--tel-border); border-radius:12px; padding:.9rem 1rem; margin:.6rem 0;
}
.tel-faq summary{ font-weight:700; cursor:pointer; }
.tel-faq p{ margin:.5rem 0 0; opacity:.92; }

/* ===== CTA FINAL ===== */
.tel-final{
  text-align:center; margin:2.25rem 0 0;
  background: linear-gradient(0deg, rgba(29,78,216,.08), rgba(29,78,216,0));
  border:1px solid var(--tel-border); border-radius:16px; padding:1.5rem 1rem;
}
.tel-final h2{ margin:.2rem 0 .5rem; }

/* ===== Responsive ===== */
@media (max-width:1100px){
  .tel-pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tel-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .tel-pricing-grid{ grid-template-columns:1fr; }
  .tel-steps{ grid-template-columns:1fr 1fr; }
  .tel-grid{ grid-template-columns:1fr; }
  .tel-logo{ width: clamp(128px, 36vw, 200px); filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
}