/* ===== Mi Chester — hoja de estilos unica ===== */

:root{
  --fondo:#08080c;
  --fondo-2:#101018;
  --tarjeta:#14141d;
  --borde:rgba(255,255,255,.09);
  --texto:#f2f2f5;
  --suave:#a2a2b0;
  --rojo:#e50914;
  --rojo-claro:#ff2d38;
  --verde:#25d366;
  --oro:#ffc247;
  --radio:16px;
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.5rem,4vw,2.3rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:64px 0}
.seccion--apretada{padding:44px 0}
.centrado{text-align:center}
.sobretitulo{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro);margin-bottom:10px;
}
.plomo{color:var(--suave);font-size:1.05rem;max-width:62ch}
.centrado .plomo{margin-left:auto;margin-right:auto}

/* ---- Botones ---- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;font-weight:700;font-size:1rem;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease;
  white-space:nowrap;
}
.boton:hover{transform:translateY(-2px);filter:brightness(1.08)}
.boton:active{transform:translateY(0)}
.boton--wa{background:var(--verde);color:#04240f;box-shadow:0 10px 26px rgba(37,211,102,.28)}
.boton--rojo{background:var(--rojo);color:#fff;box-shadow:0 10px 26px rgba(229,9,20,.3)}
.boton--linea{border-color:var(--borde);background:rgba(255,255,255,.04);color:var(--texto)}
.boton--bloque{width:100%}
.boton svg{width:19px;height:19px;flex:none}

/* ---- Cabecera ---- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(8,8,12,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.cabecera__fila{display:flex;align-items:center;gap:16px;height:66px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
.marca img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.menu{display:none;margin-left:auto;gap:28px;font-size:.95rem;font-weight:600}
.menu a{color:var(--suave);transition:color .15s}
.menu a:hover,.menu a.activo{color:var(--texto)}
.cabecera__cta{display:none}
.hamburguesa{
  margin-left:auto;background:none;border:1px solid var(--borde);color:var(--texto);
  width:42px;height:42px;border-radius:12px;cursor:pointer;display:grid;place-items:center;
}
.menu-movil{display:none;border-bottom:1px solid var(--borde);background:var(--fondo-2)}
.menu-movil.abierto{display:block}
.menu-movil a{display:block;padding:14px 20px;border-bottom:1px solid var(--borde);font-weight:600}
@media(min-width:900px){
  .menu{display:flex}
  .cabecera__cta{display:inline-flex;padding:10px 18px;font-size:.9rem}
  .hamburguesa{display:none}
  .menu-movil{display:none !important}
}

/* ---- Portada ---- */
.portada{position:relative;padding:70px 0 60px;overflow:hidden}
.portada::before{
  content:"";position:absolute;inset:-200px 0 auto -10%;height:640px;
  background:radial-gradient(58% 60% at 25% 30%,rgba(229,9,20,.28),transparent 70%),
             radial-gradient(50% 50% at 80% 10%,rgba(37,211,102,.16),transparent 70%);
  filter:blur(10px);pointer-events:none;
}
.portada__contenido{position:relative}
.resaltado{
  background:linear-gradient(100deg,var(--rojo-claro),var(--oro));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.sellos{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.sellos li{
  display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--suave);
  background:rgba(255,255,255,.04);border:1px solid var(--borde);
  padding:9px 15px;border-radius:999px;
}
.sellos svg{width:16px;height:16px;color:var(--verde);flex:none}

/* ---- Cifras ---- */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:22px 18px;text-align:center;
}
.cifra b{display:block;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-.03em}
.cifra span{font-size:.85rem;color:var(--suave)}

/* ---- Tarjetas de producto ---- */
.rejilla-productos{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
@media(min-width:700px){.rejilla-productos{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px}}
.producto{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease;
}
.producto:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.producto__foto{aspect-ratio:16/10;background:#000;overflow:hidden}
.producto__foto img{width:100%;height:100%;object-fit:contain;padding:14px}
.producto__cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.producto__nombre{font-weight:700;font-size:1rem;line-height:1.25;min-height:2.5em;display:flex;align-items:flex-start}
.producto__detalle{font-size:.8rem;color:var(--suave)}
.producto__precio{margin-top:10px;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.producto__precio small{display:block;font-size:.72rem;font-weight:600;color:var(--suave);letter-spacing:0}
.producto .boton{margin-top:auto;padding:11px 16px;font-size:.88rem}

/* ---- Pasos ---- */
.pasos{display:grid;gap:16px;counter-reset:paso}
@media(min-width:800px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;
}
.paso::before{
  counter-increment:paso;content:counter(paso);
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(140deg,var(--rojo),#7a0009);font-weight:800;margin-bottom:14px;
}
.paso p{margin:0;color:var(--suave);font-size:.95rem}

/* ---- Garantia ---- */
.garantia{
  background:linear-gradient(150deg,rgba(229,9,20,.14),rgba(37,211,102,.08));
  border:1px solid var(--borde);border-radius:24px;padding:32px 24px;
}
@media(min-width:800px){.garantia{padding:48px}}
.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:800px){.lista-check{grid-template-columns:1fr 1fr;gap:16px 32px}}
.lista-check li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.lista-check svg{width:22px;height:22px;color:var(--verde);flex:none;margin-top:2px}
.lista-check b{display:block}
.lista-check span{color:var(--suave);font-size:.9rem}

/* ---- Testimonios / galeria ---- */
.galeria{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
@media(min-width:700px){.galeria{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}}
.galeria button{
  padding:0;border:1px solid var(--borde);background:var(--tarjeta);border-radius:12px;
  overflow:hidden;cursor:zoom-in;transition:transform .18s ease,border-color .18s;
}
.galeria button:hover{transform:scale(1.03);border-color:rgba(255,255,255,.28)}
.galeria img{aspect-ratio:3/4;object-fit:cover;object-position:top center;width:100%;background:#fff}
.mas-capturas{margin-top:22px;text-align:center}

/* ---- Visor ---- */
.visor{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.93);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.visor.abierto{display:flex}
.visor__marco{
  max-width:min(94vw,560px);max-height:86vh;overflow:auto;border-radius:12px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.visor__marco img{max-width:100%;display:block;cursor:zoom-in}
.visor__marco.zoom{max-width:100vw;width:100vw;max-height:92vh}
.visor__marco.zoom img{max-width:none;width:210%;cursor:zoom-out;border-radius:0}
.visor__pie{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
}
.visor__pista{font-size:.75rem;color:rgba(255,255,255,.45)}
.visor__cerrar,.visor__nav{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid var(--borde);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.4rem;
  display:grid;place-items:center;
}
.visor__cerrar{top:16px;right:16px}
.visor__nav--ant{left:12px;top:50%;transform:translateY(-50%)}
.visor__nav--sig{right:12px;top:50%;transform:translateY(-50%)}
.visor__contador{color:var(--suave);font-size:.85rem}

/* ---- Video ---- */
.video-marco{
  border:1px solid var(--borde);border-radius:20px;overflow:hidden;
  background:var(--tarjeta);max-width:420px;margin:0 auto;
}
.video-marco video{width:100%;display:block;background:#000}
.video-vacio{
  aspect-ratio:9/16;display:grid;place-content:center;gap:10px;text-align:center;
  padding:30px;color:var(--suave);border:2px dashed var(--borde);border-radius:20px;
  max-width:420px;margin:0 auto;
}
.video-vacio svg{width:44px;height:44px;margin:0 auto;color:var(--suave)}

/* ---- Tarjetas de resena ---- */
.resenas{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:22px;
}
.resena__estrellas{color:var(--oro);letter-spacing:2px;font-size:.95rem;margin-bottom:8px}
.resena p{font-size:.98rem;margin-bottom:14px}
.resena__autor{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--suave)}
.resena__inicial{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--rojo),#7a0009);color:#fff;font-weight:700;flex:none;
}

/* ---- Preguntas ---- */
.preguntas{max-width:760px;margin:0 auto}
.pregunta{border-bottom:1px solid var(--borde)}
.pregunta summary{
  cursor:pointer;padding:18px 34px 18px 0;font-weight:600;position:relative;list-style:none;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{
  content:"+";position:absolute;right:6px;top:16px;font-size:1.4rem;color:var(--suave);font-weight:400;
}
.pregunta[open] summary::after{content:"\2212"}
.pregunta p{color:var(--suave);margin:0 0 18px;font-size:.96rem}

/* ---- Franja CTA ---- */
.franja{
  background:linear-gradient(120deg,#1a0306,#0d0d14 60%);
  border:1px solid var(--borde);border-radius:24px;padding:38px 24px;text-align:center;
}
@media(min-width:800px){.franja{padding:56px}}

/* ---- Pie ---- */
.pie{border-top:1px solid var(--borde);padding:36px 0;color:var(--suave);font-size:.88rem;margin-top:20px}
.pie__fila{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.pie a:hover{color:var(--texto)}

/* ---- Boton flotante WhatsApp ---- */
.flotante{
  position:fixed;right:16px;bottom:16px;z-index:60;
  background:var(--verde);color:#04240f;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.4);
  transition:transform .18s ease;
}
.flotante:hover{transform:scale(1.07)}
.flotante svg{width:30px;height:30px}
@media(min-width:900px){.flotante{right:24px;bottom:24px}}

/* ---- Selector de periodo ---- */
.periodo{
  display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:var(--tarjeta);border:1px solid var(--borde);margin:0 auto;
}
.periodo button{
  border:0;background:none;color:var(--suave);cursor:pointer;
  padding:10px 20px;border-radius:999px;font-weight:700;font-size:.92rem;
  font-family:inherit;transition:background .15s,color .15s;white-space:nowrap;
}
.periodo button.activo{background:var(--rojo);color:#fff}
.periodo button span{font-size:.75rem;font-weight:600;opacity:.85}

/* ---- Extras de la tarjeta de producto ---- */
/* lista de planes: cada fila alineada, para que todas las tarjetas se vean parejas */
.planes{
  list-style:none;padding:0;margin:12px 0 0;font-size:.78rem;
  min-height:3.6em;   /* alto de dos filas: deja todas las tarjetas parejas */
  padding-bottom:14px;
}
.planes li{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:4px 0;border-top:1px solid rgba(255,255,255,.07);
}
.planes span{color:var(--suave)}
.planes b{font-weight:700;color:var(--texto);white-space:nowrap}
.planes .planes__oferta{color:var(--oro)}
.producto__sinfoto{
  display:grid;place-items:center;height:100%;
  background:linear-gradient(140deg,#1b1b27,#0d0d14);color:rgba(255,255,255,.32);
}
.producto__sinfoto svg{width:46px;height:46px}

/* ---- Combos ---- */
.combos{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.combo{
  position:relative;background:var(--tarjeta);border:1px solid var(--borde);
  border-radius:var(--radio);padding:24px 22px;display:flex;flex-direction:column;
}
.combo--estrella{
  border-color:rgba(229,9,20,.55);
  background:linear-gradient(160deg,rgba(229,9,20,.16),var(--tarjeta) 60%);
}
.combo__cinta{
  position:absolute;top:-11px;left:22px;background:var(--rojo);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;
}
.combo h3{margin-bottom:2px}
.combo .producto__precio{margin-top:0;margin-bottom:14px}
.combo__lista{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px;flex:1}
.combo__lista li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem;color:var(--suave)}
.combo__lista svg{width:17px;height:17px;color:var(--verde);flex:none;margin-top:4px}

/* ---- Formas de pago ---- */
.pagos{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--borde);
}
.pagos b{font-size:.95rem}
.pagos .sellos{margin-top:12px}