/* SMOKE TEST — quitar luego */
html, body { outline: 3px solid lime !important; }

:root{
  --red:#E60012; --ink:#0F0F0F; --bg:#F7F7F8; --card:#FFFFFF;
  --muted:#6B7280; --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px; --max:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #eee}
.nav__wrap{max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem}
.nav__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.nav__brand img{height:40px;width:auto}

/* Buttons + badges */
.btn{appearance:none;border:0;background:var(--red);color:#fff;font-weight:700;padding:.75rem 1rem;border-radius:12px;cursor:pointer;transition:transform .1s;box-shadow:0 8px 16px rgba(230,0,18,.18)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#111;box-shadow:0 8px 16px rgba(0,0,0,.12)}
.btn.link{background:transparent;color:var(--ink);box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.badge{background:#111;color:#fff;border-radius:999px;padding:.4rem .8rem;font-weight:600;font-size:.85rem;margin-right:.5rem}
.badge.alt{background:var(--red)}
.cta-row{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* Hero */
.hero{background:#fff}
.hero__wrap{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;padding:3rem 1rem}
.hero__title{font-size:clamp(1.8rem,2.5vw + 1rem,3.2rem);line-height:1.05;margin:0 0 .75rem;font-weight:800;letter-spacing:-.02em}
.hero__lead{color:var(--muted);font-size:clamp(1rem,.7vw + .8rem,1.125rem);margin:0 0 1.25rem}
.hero__art{align-self:center;border-radius:var(--radius);background:linear-gradient(135deg,#fff,#f8f8f8);box-shadow:var(--shadow);padding:1rem;display:flex;align-items:center;justify-content:center}
.hero__art img{width:100%;height:auto;border-radius:12px}

/* Highlight */
.highlight{background:#111;color:#fff}
.highlight__wrap{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.25rem 1rem;align-items:center}
.h3{margin:.2rem 0 .3rem}
.muted{margin:.2rem 0;color:#d1d5db}

/* Sections */
.section{padding:2.5rem 1rem}
.section__head{max-width:var(--max);margin:auto;display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.section__title{font-size:1.6rem;margin:0}
.hint{color:var(--muted)}
.grid{max-width:var(--max);margin:auto;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative}
.flag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-weight:800;font-size:.78rem;padding:.35rem .6rem;border-radius:8px}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card__body{padding:1rem}
.meta{color:var(--muted);font-size:.9rem;margin:.2rem 0 .6rem}
.price{font-weight:800;font-size:1.1rem;margin:.2rem 0}
.bullets{margin:.6rem 0 .8rem;padding-left:1rem}

/* Benefits */
.benefits{background:var(--bg)}
.benefits__wrap{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.5rem 1rem}
.benefit{background:#fff;border-radius:14px;padding:1rem;box-shadow:var(--shadow);display:flex;gap:.85rem;align-items:flex-start}
.benefit img{width:42px;height:42px}

/* FAQ */
.faq{max-width:var(--max);margin:0 auto 2rem;padding:0 1rem}
.faq details{background:#fff;border-radius:12px;padding:1rem;box-shadow:var(--shadow);margin:.75rem 0}
.faq summary{cursor:pointer;font-weight:700}

/* Footer */
.footer{background:#161616;color:#fff}
.footer__wrap{max-width:var(--max);margin:auto;padding:2rem 1rem;display:grid;grid-template-columns:1fr 2fr;gap:1rem;align-items:center}
.footer__wrap img{max-width:180px}
.footer__lead{margin:.2rem 0 .6rem}
.footer__copy{color:#9ca3af}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:70;padding:1rem}
.modal.open{display:flex}
.sheet{width:min(440px,96vw);background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:1.25rem;position:relative}
.f{display:grid;gap:.7rem}
.inp,.sel{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:.8rem .9rem;font:inherit}
.row{display:flex;gap:.6rem}.row>*{flex:1}
.actions{display:flex;gap:.6rem;margin-top:.75rem}
.ghost{background:#f1f1f1;color:#111}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Responsive */
@media (max-width:960px){
  .hero__wrap{grid-template-columns:1fr;padding:2rem 1rem}
  .highlight__wrap{grid-template-columns:1fr;text-align:center}
  .benefits__wrap{grid-template-columns:1fr}
  .footer__wrap{grid-template-columns:1fr}
}
.highlight__wrap > div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
}
.highlight__wrap img {
  border-radius: 12px;
  box-shadow: var(--shadow);
}
/* ====== Contenedor centrado para la sección de planes ====== */
:root{
  --container-max: 1200px;     /* ancho máximo deseado */
  --page-gutter: 16px;         /* margen lateral mínimo */
}

@media (min-width: 1024px){
  :root{ --page-gutter: 28px; } /* un poco más de aire en desktop */
}

/* centra el título y la grilla, y agrega márgenes laterales */
#planes > h2,
#planes .plans-grid{
  width: min(var(--container-max), 100% - var(--page-gutter)*2);
  margin-inline: auto;  /* centra horizontalmente */
}

/* un pelín más de aire entre cards en pantallas grandes */
@media (min-width: 1024px){
  #planes .plans-grid{ gap: 24px; }
}
/* Quick select (fuera de la lista) */
.quick-select{position:sticky;top:64px;z-index:40;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.quick-select__wrap{max-width:var(--max);margin:auto;display:flex;gap:.5rem;align-items:center;justify-content:flex-start;padding:.75rem 1rem}
.quick-select__label{font-weight:700}
.pill{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:.5rem .9rem;font-weight:700;cursor:pointer}
.pill.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.12)}

/* Plans grid mejoras */
.plans-grid{max-width:var(--max);margin:auto;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.model-chip{display:flex;gap:.8rem;align-items:center;background:#f9fafb;border:1px solid #eef0f2;border-radius:12px;padding:.6rem .7rem;margin:.5rem 0}
.model-chip img{width:64px;height:40px;object-fit:cover;border-radius:8px}
@media (max-width:960px){
  .quick-select{top:56px}
}
/* Evita “salto” cuando carga la imagen */
.plan-card > img{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:linear-gradient(180deg,#f8f8f8,#eee); /* placeholder suave */
  border-bottom:1px solid #f0f0f0;
}
.model-chip img{
  width:64px; height:40px; object-fit:cover; border-radius:8px;
}
/* Quitar “cajas” y gris de las imágenes */
.plan-card > img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:transparent;   /* sin gris */
  border:0;
  padding:0;
}

/* Modelos sin cajas */
.models .model-chip{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}
.models .model-chip + .model-chip{ margin-top:.6rem; }

.models .model-chip img{
  width:80px; height:auto; object-fit:contain; border-radius:0; /* imagen “limpia” */
}

/* Opcional: achicar el gap superior si no hay imagen */
.plan-card .card__body{ padding-top:1rem; }
.hero{background:#fff;padding-bottom:2rem;}
.hero__wrap{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  padding:3rem 1rem;
  align-items:center;
}
.hero__art{
  position:relative;
  background:transparent; /* sin caja blanca */
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.hero__art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1s ease, transform 4s ease;
}
.hero__art img.active{
  opacity:1;
  transform:scale(1);
  position:absolute;
}
@media(max-width:960px){
  .hero__wrap{grid-template-columns:1fr;padding:2rem 1rem;text-align:center}
  .hero__art{min-height:260px}
}
/* Banda suave sin cortes arriba/abajo */
.benefits{ background:#F6F7F9; padding:36px 0 44px; }

/* Contenedor responsive 3→2→1 */
.benefits__wrap{
  max-width:var(--max);
  margin:auto;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,1fr);
  padding:0 16px;
}
@media (max-width:1024px){ .benefits__wrap{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .benefits__wrap{ grid-template-columns:1fr; } }

/* Tarjetas livianas, sin “bloque” pesado */
.benefit{
  display:flex; align-items:flex-start; gap:14px;
  background:#fff;
  border:1px solid #EAECEF;
  border-radius:16px;
  padding:16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height:92px;
}
.benefit:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color:#E2E5EA;
}

/* Ícono consistente */
.benefit__icon{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
}
.benefit__icon img{ width:100%; height:100%; object-fit:contain; }

/* Textos con mejor contraste */
.benefit__title{
  margin:2px 0 4px;
  font-weight:700;
  color:var(--ink);
}
.benefit__desc{
  margin:0;
  color:#5A616B;               /* más oscuro que #cbd5e1 */
  letter-spacing:.1px;
}

/* Fina línea de división superior antes de la sección de FAQ (opcional) */
.section + .benefits{ border-top:1px solid #EEE; }
.benefits + .faq{ padding-top:24px; }