:root {
  --fondo: #08090c;
  --fondo-2: #0d0f14;
  --panel: #111319;
  --panel-2: #171a22;
  --borde: #23262f;
  --borde-2: #2e323d;
  --texto: #f2f1ee;
  --suave: #a3a3a8;
  --tenue: #6e6f76;
  --oro: #e2b857;
  --oro-claro: #f3d27a;
  --oro-osc: #9c7a2c;
  --oro-velo: rgba(226, 184, 87, .10);
  --verde: #4ade80;
  --rojo: #f87171;
  --radio: 16px;
  --sombra: 0 24px 70px rgba(0, 0, 0, .5);
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1100px 600px at 85% -15%, rgba(226, 184, 87, .07), transparent 60%), var(--fondo);
  background-attachment: fixed;
  color: var(--texto);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--oro); }
.oculto { display: none !important; }
#lienzo-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1000; }
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Barra superior */
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--borde); background: rgba(8, 9, 12, .85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
.marca { display: flex; align-items: center; gap: 11px; font-weight: 700; white-space: nowrap; }
.marca-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: .5px; color: #151107; background: linear-gradient(135deg, var(--oro-claro), var(--oro-osc)); }
.marca small { display: block; color: var(--tenue); font-weight: 500; font-size: 12px; }
.nav { display: flex; gap: 2px; margin-left: 18px; flex-wrap: wrap; }
.nav button { background: none; border: 0; padding: 8px 13px; border-radius: 9px; color: var(--suave); font-weight: 500; font-size: 15px; }
.nav button.activo, .nav button:hover { background: var(--panel-2); color: var(--texto); }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.quien { color: var(--tenue); font-size: 13px; text-align: right; }
.quien b { color: var(--texto); display: block; font-weight: 600; font-size: 14px; }
.icono-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); display: grid; place-items: center; color: var(--suave); }
.icono-btn:hover { color: var(--texto); }
.icono-btn .ico { width: 18px; height: 18px; }

/* ── Botones y campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--borde-2); background: var(--panel-2); padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s, transform .15s, box-shadow .3s; text-decoration: none; color: var(--texto); }
.btn:hover { background: #1e222c; border-color: #3a3f4c; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn .ico { width: 18px; height: 18px; }
.btn-oro { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #17130a; border-color: transparent; box-shadow: 0 10px 30px rgba(226, 184, 87, .18), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-oro:hover { background: linear-gradient(180deg, #f8dd94, #e9c266); border-color: transparent; box-shadow: 0 12px 36px rgba(226, 184, 87, .3), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-borde { background: transparent; border-color: rgba(226, 184, 87, .45); color: var(--oro-claro); }
.btn-borde:hover { background: var(--oro-velo); border-color: var(--oro); }
.btn-grande { padding: 15px 26px; font-size: 17px; border-radius: 13px; }
.btn-peligro { color: #fca5a5; border-color: #4a2328; }
.btn-chico { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; color: var(--suave); font-weight: 500; }
.campo input, .campo select, .campo textarea { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 10px; padding: 11px 13px; outline: none; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(226, 184, 87, .12); }
.error { color: #fca5a5; font-size: 14px; min-height: 20px; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 30px 22px 80px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 26px; }
h3 { font-size: 17px; }
.titulo-grande { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.035em; }
.sub { color: var(--suave); font-size: clamp(16px, 1.5vw, 19px); margin: 0 0 30px; }
.dorado { background: linear-gradient(100deg, #fbe7b0 0%, var(--oro) 45%, #fbe7b0 60%, var(--oro) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo-texto 6s linear infinite; }
@keyframes brillo-texto { to { background-position: 220% center; } }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.etiqueta::before, .etiqueta::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.ancla { color: var(--suave); font-size: 14px; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--borde-2); background: var(--fondo-2); color: var(--suave); white-space: nowrap; }
.chip.oro { color: var(--oro-claro); border-color: #4d3f1c; }
.chip.verde { color: #86efac; border-color: #1f4a30; }
.chip.rojo { color: #fca5a5; border-color: #4a2328; }
.detalle-interno { color: var(--tenue); font-size: 12px; margin-top: 3px; }

/* ── Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .tarjeta { width: min(410px, 100%); box-shadow: var(--sombra); padding: 30px; }
.login .marca { margin-bottom: 26px; }

/* ── Inicio */
.hero-inicio { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 22px; }
.hero-inicio .tarjeta:first-child { background: linear-gradient(150deg, rgba(226, 184, 87, .09), var(--panel) 55%); border-color: #3a321d; }
.stat { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; }
.stats small { color: var(--tenue); font-size: 13px; }

/* ── Tablas */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--tenue); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ════ Presentación ════ */
body.presentando .barra { display: none; }
.barra-asesor { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; gap: 2px; padding: 5px; border-radius: 12px; background: rgba(13, 15, 20, .9); border: 1px solid var(--borde); backdrop-filter: blur(10px); opacity: .45; transition: opacity .25s; }
.barra-asesor:hover { opacity: 1; }
.barra-asesor button { background: none; border: 0; padding: 7px 11px; border-radius: 8px; color: var(--suave); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.barra-asesor button:hover { background: var(--panel-2); color: var(--texto); }
.barra-asesor .ico { width: 16px; height: 16px; }
.escena { min-height: 100vh; padding: 44px 22px 96px; max-width: 1240px; margin: 0 auto; animation: entra .6s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.pasos { display: flex; gap: 6px; justify-content: center; margin-bottom: 34px; }
.pasos span { width: 30px; height: 3px; border-radius: 9px; background: var(--borde-2); transition: background .4s; }
.pasos span.hecho { background: var(--oro); }
.centro { text-align: center; }

/* Paso de horas */
.horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; }
.hora { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 30px 18px 26px; text-align: center; transition: transform .35s var(--curva), border-color .3s, box-shadow .4s, background .3s; }
.hora:hover { transform: translateY(-4px); border-color: var(--borde-2); }
.hora.elegida { border-color: var(--oro); background: linear-gradient(180deg, rgba(226, 184, 87, .08), var(--panel)); box-shadow: 0 0 0 1px rgba(226, 184, 87, .3), 0 24px 60px rgba(226, 184, 87, .12); }
.hora svg.reloj-arco { width: 64px; height: 64px; margin-bottom: 14px; }
.reloj-arco .pista { stroke: var(--borde-2); }
.reloj-arco .lleno { stroke: var(--oro); transition: stroke-dashoffset .8s var(--curva); }
.hora b { display: block; font-size: 22px; letter-spacing: -.02em; }
.hora small { color: var(--suave); font-size: 14px; }

/* Carretilla */
.tienda { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.servicio { position: relative; text-align: left; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 22px 20px 20px; transition: transform .35s var(--curva), border-color .3s, box-shadow .4s, background .3s; overflow: hidden; min-height: 206px; display: flex; flex-direction: column; isolation: isolate; }
.servicio:hover { transform: translateY(-3px); border-color: var(--borde-2); }
.icono-servicio { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--borde-2); color: var(--oro); flex: none; transition: background .3s, color .3s, border-color .3s; }
.servicio .icono-servicio { margin-bottom: 16px; }
.servicio .icono-servicio .ico { width: 24px; height: 24px; }
.servicio h3 { font-size: 20px; font-weight: 700; }
.servicio p { color: var(--suave); margin: 0 0 14px; font-size: 14.5px; flex: 1; }
.servicio .estado { font-size: 13.5px; font-weight: 600; color: var(--oro); }
.servicio.en-carrito { border-color: rgba(226, 184, 87, .7); background: linear-gradient(170deg, rgba(226, 184, 87, .09), var(--panel) 60%); box-shadow: 0 0 0 1px rgba(226, 184, 87, .25), 0 20px 50px rgba(226, 184, 87, .08); }
.servicio.en-carrito .icono-servicio { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #17130a; border-color: transparent; }
.servicio .ideal { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); opacity: .85; }
.servicio .marca-ok { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #17130a; }
.servicio .marca-ok .ico { width: 15px; height: 15px; stroke-width: 2.4; }
.trazo { stroke-dasharray: 24; stroke-dashoffset: 24; animation: trazo .5s .1s var(--curva) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

.carrito { position: sticky; top: 24px; background: var(--panel); border: 1px solid var(--borde); border-radius: 20px; padding: 22px; box-shadow: var(--sombra); }
.carrito-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.carrito-cab > .ico { color: var(--oro); }
.carrito-cab h3 { margin: 0; font-size: 17px; }
.contador { margin-left: auto; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(226, 184, 87, .5); color: var(--oro-claro); font-weight: 700; font-size: 14px; }
.pulso { animation: pulso .7s var(--curva); }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(226, 184, 87, .55); transform: scale(1.12); } 100% { box-shadow: 0 0 0 16px rgba(226, 184, 87, 0); transform: scale(1); } }
.items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.items li { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--borde); border-left: 2px solid var(--oro); }
.items li.nuevo { animation: entra-item .5s var(--curva) both; }
.items li.regalo { border-left-color: var(--borde-2); color: var(--suave); }
@keyframes entra-item { from { opacity: 0; transform: translateX(18px); } }
.items li .ico { width: 17px; height: 17px; color: var(--oro); }
.items li b { font-weight: 500; font-size: 14.5px; flex: 1; }
.items li small { color: var(--oro); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.items li button { background: none; border: 0; color: var(--tenue); padding: 2px; display: grid; }
.items li button:hover { color: var(--rojo); }
.items li button .ico { width: 15px; height: 15px; color: inherit; }
.vacio { color: var(--tenue); text-align: center; padding: 22px 10px; border: 1px dashed var(--borde-2); border-radius: 12px; margin-bottom: 10px; font-size: 14px; }
.progreso-combo { margin-bottom: 16px; padding: 14px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--borde); }
.progreso-combo.logrado { border-color: rgba(226, 184, 87, .55); background: linear-gradient(170deg, rgba(226, 184, 87, .1), var(--fondo-2)); }
.progreso-combo .fila-pc { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--suave); margin-bottom: 9px; }
.progreso-combo b { color: var(--oro-claro); font-size: 14px; }
.barra-pc { height: 4px; border-radius: 9px; background: var(--borde-2); overflow: hidden; }
.barra-pc i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-osc), var(--oro-claro)); border-radius: 9px; transition: width .9s var(--curva); box-shadow: 0 0 12px rgba(226, 184, 87, .6); }

/* Hoja de opciones */
.velo { position: fixed; inset: 0; background: rgba(4, 5, 7, .7); backdrop-filter: blur(8px); z-index: 80; display: grid; place-items: center; padding: 16px; animation: aparece .25s ease both; }
@keyframes aparece { from { opacity: 0; } }
.hoja { width: min(600px, 100%); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--borde-2); border-radius: 22px; padding: 30px; box-shadow: var(--sombra); animation: sube .45s var(--curva) both; }
@keyframes sube { from { transform: translateY(24px); opacity: 0; } }
.hoja .icono-servicio { width: 52px; height: 52px; border-radius: 14px; background: var(--oro-velo); border-color: rgba(226, 184, 87, .3); margin-bottom: 14px; }
.hoja h2 { font-size: 28px; }
.hoja p.gancho { color: var(--suave); font-size: 16px; margin: 0 0 22px; }
.hoja h4 { margin: 0 0 12px; font-size: 15px; color: var(--suave); font-weight: 600; }
.opciones { display: grid; gap: 8px; margin-bottom: 24px; }
.opcion { display: flex; gap: 14px; align-items: center; text-align: left; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 13px; padding: 14px 16px; transition: border-color .2s, background .2s; }
.opcion:hover { border-color: var(--borde-2); }
.opcion .caja { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--borde-2); display: grid; place-items: center; flex: none; color: #17130a; transition: background .2s, border-color .2s; }
.opcion .caja .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.opcion.redonda .caja { border-radius: 50%; }
.opcion.activa { border-color: rgba(226, 184, 87, .7); background: rgba(226, 184, 87, .06); }
.opcion.activa .caja { background: var(--oro); border-color: var(--oro); }
.opcion b { display: block; font-size: 16px; font-weight: 600; }
.opcion small { color: var(--suave); font-size: 13.5px; }
.nota-regalo { display: flex; gap: 10px; align-items: center; color: var(--suave); font-size: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(226, 184, 87, .4); margin: -10px 0 22px; }
.nota-regalo .ico { color: var(--oro); width: 18px; height: 18px; }
.hoja-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Anuncio de logro */
.anuncio { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 1001; text-align: center; pointer-events: none; padding: 18px 44px; animation: anuncio-entra .7s var(--curva) both; }
.anuncio::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: rgba(12, 13, 17, .97); backdrop-filter: blur(14px); border: 1px solid rgba(226, 184, 87, .35); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(226, 184, 87, .12); z-index: -1; }
.anuncio-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.anuncio-titulo { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; margin-top: 4px; background: linear-gradient(100deg, #fbe7b0, var(--oro), #fbe7b0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anuncio-linea { display: block; height: 1px; width: 0; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--oro), transparent); animation: linea .9s .2s var(--curva) forwards; }
.anuncio-linea:first-child { margin-bottom: 10px; }
.anuncio-linea:last-child { margin-top: 10px; }
@keyframes linea { to { width: 100%; } }
@keyframes anuncio-entra { from { opacity: 0; transform: translate(-50%, -14px); } }
.anuncio.sale { animation: anuncio-sale .6s ease forwards; }
@keyframes anuncio-sale { to { opacity: 0; transform: translate(-50%, -10px); } }
.barrido { position: relative; overflow: hidden; }
.barrido::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 244, 214, .16), transparent); animation: barre 1.1s var(--curva) forwards; pointer-events: none; }
@keyframes barre { to { left: 120%; } }

/* Revelación */
.revelar { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #14110a, #050506 65%); animation: aparece .5s ease both; padding: 20px; }
.revelar-centro { text-align: center; }
.anillo { width: 168px; height: 168px; display: block; margin: 0 auto 26px; overflow: visible; }
.anillo .pista { stroke: #1f1d17; }
.anillo .trazo-anillo { stroke-dasharray: 440; stroke-dashoffset: 440; filter: drop-shadow(0 0 8px rgba(226, 184, 87, .6)); }
.anillo.cargando .trazo-anillo { animation: carga 2.4s var(--curva) forwards; }
@keyframes carga { to { stroke-dashoffset: 0; } }
.anillo .nucleo { fill: var(--oro); opacity: 0; transform-origin: center; transform-box: fill-box; }
.anillo.listo .nucleo { animation: nucleo .8s var(--curva) forwards; }
@keyframes nucleo { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(3.2); } }
.revelar .titulo-rev { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.revelar .lista-rev { list-style: none; padding: 0; margin: 16px 0 0; color: var(--suave); font-size: 14.5px; min-height: 120px; }
.revelar .lista-rev li { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 5px 0; animation: entra .5s var(--curva) both; }
.revelar .lista-rev .ico { width: 15px; height: 15px; color: var(--oro); stroke-width: 2.2; }
.revelar.sale { animation: desvanece .6s ease forwards; }
@keyframes desvanece { to { opacity: 0; } }

/* Oferta */
.oferta { max-width: 1080px; margin: 0 auto; }
.oferta-cab { text-align: center; margin-bottom: 30px; }
.oferta-cab h1 { margin-top: 14px; }
.frase-horas { color: var(--suave); font-size: 17px; margin: 10px 0 0; }
.oferta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.col { display: grid; gap: 16px; min-width: 0; }
.plan-tarjeta { position: relative; border-radius: 22px; padding: 28px; background: linear-gradient(165deg, #17140d, var(--panel) 50%); border: 1px solid #3d3420; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.plan-tarjeta::after { content: ''; position: absolute; top: -60%; left: -70%; width: 35%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .07), transparent); transform: rotate(18deg); animation: brillo-tarjeta 7s ease-in-out infinite; pointer-events: none; }
@keyframes brillo-tarjeta { 0%, 70% { left: -70%; } 100% { left: 140%; } }
.plan-nombre { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -.04em; margin: 10px 0 2px; line-height: 1.05; }
.plan-dur { color: var(--suave); margin-bottom: 22px; font-size: 15px; }
.incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.incluye li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.incluye.animar li { opacity: 0; animation: aparece-li .55s var(--curva) forwards; }
@keyframes aparece-li { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.incluye .marca-li { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(226, 184, 87, .55); color: var(--oro); }
.incluye .marca-li .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.incluye li.regalo { color: var(--suave); }
.incluye li.regalo small { color: var(--oro); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-left: 4px; }
.periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.periodo { position: relative; text-align: left; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--borde-2); background: rgba(8, 9, 12, .5); transition: border-color .25s, background .25s; }
.periodo:hover { border-color: #4a4128; }
.periodo.activo { border-color: var(--oro); background: rgba(226, 184, 87, .08); box-shadow: 0 0 0 1px rgba(226, 184, 87, .25); }
.periodo b { display: block; font-size: 14px; }
.periodo .p-precio { font-size: 21px; font-weight: 800; letter-spacing: -.02em; display: block; }
.periodo small { color: var(--tenue); font-size: 12.5px; }
.periodo .ahorro { position: absolute; top: -9px; right: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--oro); color: #17130a; }
.titulo-seccion { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin: 26px 0 0; }
.sugerencia { border-radius: 18px; padding: 20px 22px; border: 1px solid rgba(226, 184, 87, .35); background: linear-gradient(160deg, rgba(226, 184, 87, .08), var(--panel) 70%); }
.sugerencia h4 { font-size: 19px; margin: 8px 0 6px; }
.sugerencia p { color: var(--suave); margin: 0 0 14px; font-size: 14.5px; }
.sugerencia .fila-sug { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sugerencia .dif { font-size: 15px; font-weight: 700; color: var(--oro-claro); }
.precio-card { border-radius: 22px; padding: 26px; background: var(--panel); border: 1px solid var(--borde); }
.total-lbl { color: var(--tenue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.total { font-size: clamp(54px, 7vw, 80px); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.equivale { color: var(--suave); font-size: 15px; margin-bottom: 16px; }
.lineas { font-size: 14.5px; color: var(--suave); display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--borde); }
.lineas div { display: flex; justify-content: space-between; gap: 10px; }
.lineas span:last-child { color: var(--texto); font-weight: 600; white-space: nowrap; }
.cuotas { color: var(--suave); font-size: 13.5px; margin-top: 12px; }
.norte-card { border-radius: 18px; padding: 20px; background: var(--panel); border: 1px solid var(--borde); transition: border-color .3s, background .3s; }
.norte-card.activo { border-color: rgba(226, 184, 87, .6); background: linear-gradient(165deg, rgba(226, 184, 87, .07), var(--panel) 60%); }
.norte-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.norte-cab .icono-servicio { width: 42px; height: 42px; border-radius: 11px; }
.norte-cab b { display: block; font-size: 16px; }
.norte-cab small { color: var(--suave); font-size: 13.5px; }
.segmento { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--fondo-2); border: 1px solid var(--borde); margin-bottom: 8px; }
.segmento button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 8px; color: var(--suave); font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.segmento button small { display: block; font-weight: 500; color: var(--tenue); font-size: 12px; }
.segmento button.activo { background: var(--panel-2); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(226, 184, 87, .45); }
.segmento button.activo small { color: var(--oro-claro); }
.bono { display: flex; gap: 14px; align-items: center; border-radius: 16px; padding: 16px 18px; border: 1px solid rgba(226, 184, 87, .4); background: rgba(226, 184, 87, .05); }
.bono .icono-servicio { width: 40px; height: 40px; border-radius: 50%; border-color: rgba(226, 184, 87, .5); background: none; }
.bono b { display: block; color: var(--oro); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.bono span { font-size: 16px; font-weight: 600; }
.reloj { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 16px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--borde); }
.reloj small { color: var(--suave); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.reloj small .ico { width: 17px; height: 17px; color: var(--oro); }
.reloj .digitos { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.reloj.vencida .digitos { color: var(--tenue); font-size: 17px; }
.enviar { width: 100%; }
.enviar-nota { text-align: center; color: var(--tenue); font-size: 13.5px; }
.panel-asesor { margin-top: 22px; border: 1px dashed var(--borde-2); border-radius: 14px; padding: 12px 16px; opacity: .6; transition: opacity .2s; }
.panel-asesor:hover, .panel-asesor[open] { opacity: 1; }
.panel-asesor summary { cursor: pointer; color: var(--suave); font-size: 13.5px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.fila .campo { margin: 0; min-width: 170px; flex: 1; }
.descargo { color: var(--tenue); font-size: 12px; text-align: center; margin-top: 28px; line-height: 1.6; }

/* Admin */
.pestanas { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.pestanas button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 10px 14px; color: var(--suave); font-weight: 600; margin-bottom: -1px; }
.pestanas button.activo { color: var(--texto); border-bottom-color: var(--oro); }
.aviso { padding: 12px 14px; border-radius: 11px; background: rgba(226, 184, 87, .05); border: 1px solid #3a321d; color: #e9d9ae; font-size: 14px; margin-bottom: 16px; line-height: 1.55; }
.tabla-precios input { width: 100%; min-width: 80px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; outline: none; }
.tabla-precios input:focus { border-color: var(--oro); }
.tabla-precios td:first-child { min-width: 200px; }
.grupo-fila td { color: var(--oro); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 18px; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.combo-editor { border: 1px solid var(--borde); border-radius: 14px; padding: 18px; margin-bottom: 14px; background: var(--fondo-2); }
.combo-editor.inactivo { opacity: .55; }
.combo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; margin: 10px 0 14px; }
.combo-items label, .check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--suave); cursor: pointer; }
.combo-items label:has(input:checked) { color: var(--texto); }
.combo-items h5 { grid-column: 1 / -1; margin: 8px 0 2px; color: var(--oro); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
input[type=checkbox] { accent-color: var(--oro); width: 16px; height: 16px; }
.precios-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.precios-fila .campo { flex: 1; min-width: 110px; margin: 0; }
.simulador-res { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.simulador-res div { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo-2); font-size: 13px; color: var(--suave); }
.simulador-res b { display: block; font-size: 18px; color: var(--texto); }
.guardar-fijo { position: sticky; bottom: 0; padding: 16px 0; background: linear-gradient(transparent, var(--fondo) 35%); display: flex; gap: 12px; align-items: center; margin-top: 10px; z-index: 5; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 1100; padding: 12px 16px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--borde-2); box-shadow: var(--sombra); animation: sube .3s ease both; max-width: 380px; font-size: 14px; }
.toast.mal { border-color: #4a2328; color: #fecaca; }

@media (max-width: 1020px) {
  .tienda, .oferta-grid, .hero-inicio, .rejilla-2 { grid-template-columns: 1fr; }
  .carrito { position: static; }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .horas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .servicios, .horas { grid-template-columns: 1fr; }
  .contenedor, .escena { padding-left: 16px; padding-right: 16px; }
  .barra { flex-wrap: wrap; padding: 10px 16px; }
  .nav { margin-left: 0; order: 3; width: 100%; }
  .quien { display: none; }
  .stats { grid-template-columns: 1fr; }
  .plan-tarjeta, .precio-card { padding: 20px; }
  .anuncio { width: 92vw; padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ════ Propuesta en una sola pantalla ════ */
.oferta-pantalla { max-width: 1520px; padding: 22px 26px 64px; }
.oferta-pantalla .oferta-cab { margin-bottom: 18px; }
.titulo-oferta { font-size: clamp(26px, 3.4vh + 1vw, 44px); font-weight: 800; letter-spacing: -.035em; margin: 10px 0 0; }
.oferta-pantalla .frase-horas { font-size: 15px; margin-top: 6px; }
.oferta-pantalla .oferta-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.oferta-pantalla .col { gap: 12px; align-content: start; }
.oferta-pantalla .plan-tarjeta { padding: 22px 24px; }
.plan-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.oferta-pantalla .plan-nombre { font-size: clamp(28px, 3.6vh + .6vw, 42px); margin: 6px 0 0; }
.oferta-pantalla .plan-dur { margin: 0 0 4px; font-size: 13.5px; color: var(--oro-claro); }
.grupo-lista + .grupo-lista { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.grupo-titulo { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-bottom: 8px; }
.grupo-titulo.oro { color: var(--oro); }
.oferta-pantalla .incluye { gap: 6px; }
.oferta-pantalla .incluye li { font-size: 14.5px; gap: 10px; }
.oferta-pantalla .incluye .marca-li { width: 20px; height: 20px; }
.oferta-pantalla .incluye .marca-li .ico { width: 11px; height: 11px; }
.incluye .li-txt { flex: 1; min-width: 0; }
.incluye .dur { flex: none; font-size: 12px; font-weight: 600; color: var(--suave); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde-2); white-space: nowrap; }
.incluye li.regalo .dur { color: var(--oro-claro); border-color: #4d3f1c; }
.oferta-pantalla .precio-card { padding: 20px 22px; }
.oferta-pantalla .total { font-size: clamp(44px, 6.4vh + 1vw, 76px); margin: 6px 0 4px; }
.oferta-pantalla .equivale { font-size: 14px; margin-bottom: 12px; }
.oferta-pantalla .lineas { font-size: 13.5px; padding-top: 10px; }
.oferta-pantalla .cuotas { font-size: 12.5px; margin-top: 8px; }
.bloque-periodos .titulo-seccion { margin: 0 0 8px; }
.oferta-pantalla .periodos { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.oferta-pantalla .periodo { padding: 10px 11px; }
.oferta-pantalla .periodo .p-precio { font-size: 18px; }
.oferta-pantalla .sugerencia { padding: 14px 16px; }
.oferta-pantalla .sugerencia h4 { font-size: 16px; margin: 6px 0 4px; }
.oferta-pantalla .sugerencia p { font-size: 13px; margin-bottom: 10px; }
.oferta-pantalla .sugerencia .dif { font-size: 14px; }
.oferta-pantalla .norte-card { padding: 16px; }
.oferta-pantalla .norte-cab { margin-bottom: 10px; }
.oferta-pantalla .norte-cab small { font-size: 12.5px; line-height: 1.4; display: block; }
.oferta-pantalla .segmento { margin-bottom: 6px; }
.oferta-pantalla .segmento button { padding: 6px 4px; font-size: 12.5px; }
.oferta-pantalla .bono { padding: 12px 14px; }
.oferta-pantalla .bono span { font-size: 14.5px; }
.oferta-pantalla .reloj { padding: 10px 16px; }
.oferta-pantalla .reloj .digitos { font-size: 24px; }
.oferta-pantalla .btn-grande { padding: 13px 20px; font-size: 16px; }
.pie-oferta { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; }
.pie-oferta .panel-asesor { margin: 0; padding: 6px 12px; }
.pie-oferta .descargo { margin: 0; flex: 1; min-width: 260px; text-align: right; font-size: 11px; }

/* Escritorio: todo cabe en la ventana; si algo sobra, la columna hace scroll por dentro. */
@media (min-width: 1100px) and (min-height: 620px) {
  body.presentando .oferta-pantalla { height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .oferta-pantalla .oferta-grid { flex: 1; min-height: 0; }
  .oferta-pantalla .col { max-height: 100%; overflow-y: auto; scrollbar-width: none; }
  .oferta-pantalla .col::-webkit-scrollbar { display: none; }
}
@media (max-width: 1099px) {
  .oferta-pantalla .oferta-grid { grid-template-columns: 1fr 1fr; }
  .oferta-pantalla .col:first-child { grid-column: 1 / -1; }
  .pie-oferta .descargo { text-align: center; }
}
@media (max-width: 700px) {
  .oferta-pantalla .oferta-grid { grid-template-columns: 1fr; }
}
.combo-item { display: flex; flex-direction: column; gap: 4px; padding: 3px 0; }
.combo-item-extra { display: flex; gap: 8px; align-items: center; padding-left: 24px; }
.combo-item-extra input:not([type=checkbox]) { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; outline: none; }
.combo-item-extra input:focus { border-color: var(--oro); }
.combo-item-extra .check { font-size: 12.5px; }
@media (min-width: 701px) { .grupo-lista.dos .incluye { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
@media (min-width: 1100px) and (max-height: 860px) {
  .oferta-pantalla { padding-top: 14px; padding-bottom: 56px; }
  .oferta-pantalla .oferta-cab { margin-bottom: 12px; }
  .oferta-pantalla .frase-horas { display: none; }
  .titulo-oferta { font-size: clamp(24px, 2.6vw, 34px); margin-top: 6px; }
  .oferta-pantalla .plan-tarjeta { padding: 16px 20px; }
  .oferta-pantalla .plan-nombre { font-size: 30px; }
  .plan-cab { margin-bottom: 10px; }
  .oferta-pantalla .incluye { gap: 4px; }
  .oferta-pantalla .incluye li { font-size: 13.5px; gap: 8px; }
  .oferta-pantalla .incluye .marca-li { width: 18px; height: 18px; }
  .incluye .dur { font-size: 11px; padding: 1px 7px; }
  .grupo-lista + .grupo-lista { margin-top: 8px; padding-top: 8px; }
  .grupo-titulo { margin-bottom: 6px; }
  .oferta-pantalla .total { font-size: 52px; }
  .oferta-pantalla .precio-card, .oferta-pantalla .norte-card { padding: 14px 16px; }
  .oferta-pantalla .col { gap: 10px; }
  .pie-oferta { margin-top: 8px; }
}
.pregunta-dia .al-dia { color: var(--oro-claro); font-weight: 700; border-bottom: 2px solid rgba(226, 184, 87, .55); padding-bottom: 1px; }
.hora .por-dia { display: block; margin: 2px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.hora .reloj-arco .lleno { stroke: #6b5a2e; transition: stroke .4s; }
.hora:hover .reloj-arco .lleno, .hora.elegida .reloj-arco .lleno { stroke: var(--oro); filter: drop-shadow(0 0 6px rgba(226, 184, 87, .5)); }
.hora { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.incluye li.tachado .li-txt { text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .7); color: var(--tenue); }
.incluye li.tachado .marca-li { border-color: var(--borde-2); color: var(--tenue); }
.incluye li.tachado .dur { color: #fca5a5; border-color: #4a2328; }
.entrada-chica { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 8px; padding: 7px 8px; min-width: 120px; }
.nota-detectado { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--suave); padding: 9px 12px; margin: -4px 0 12px; border-radius: 10px; background: rgba(226, 184, 87, .06); border: 1px solid rgba(226, 184, 87, .25); }
.nota-detectado .ico { width: 16px; height: 16px; color: var(--oro); }
.nota-detectado b { color: var(--oro-claro); }

/* ════ Carretilla de un toque ════ */
.servicios { grid-template-columns: repeat(12, 1fr); gap: 12px; }
.bloque-servicio { grid-column: span 12; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px 16px; transition: border-color .3s, background .3s; min-width: 0; }
.bloque-servicio.con-algo { border-color: rgba(226, 184, 87, .45); background: linear-gradient(170deg, rgba(226, 184, 87, .05), var(--panel) 60%); }
.bloque-journal { grid-column: span 6; }
.bloque-formacion, .bloque-hibrido { grid-column: span 3; }
.bloque-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.bloque-cab .icono-servicio { width: 36px; height: 36px; border-radius: 10px; }
.bloque-cab .icono-servicio .ico { width: 19px; height: 19px; }
.bloque-servicio.con-algo .bloque-cab .icono-servicio { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #17130a; border-color: transparent; }
.bloque-cab h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bloque-cab p { margin: 2px 0 0; color: var(--suave); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bloque-cab .ideal { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bloque-ideas .fichas { grid-template-columns: repeat(5, 1fr); }
.bloque-indicadores .fichas { grid-template-columns: repeat(4, 1fr); }
.bloque-journal .fichas { grid-template-columns: repeat(3, 1fr); }
.bloque-formacion .fichas, .bloque-hibrido .fichas { grid-template-columns: 1fr; }
.ficha { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--fondo-2); min-width: 0; transition: border-color .2s, background .25s, transform .15s; }
.ficha:hover { border-color: #4a4128; }
.ficha:active { transform: scale(.98); }
.ficha .caja { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--borde-2); display: grid; place-items: center; flex: none; margin-top: 1px; color: #17130a; transition: background .2s, border-color .2s; }
.ficha .caja .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.ficha.activa { border-color: rgba(226, 184, 87, .75); background: rgba(226, 184, 87, .08); box-shadow: 0 0 0 1px rgba(226, 184, 87, .2); }
.ficha.activa .caja { background: var(--oro); border-color: var(--oro); }
.ficha-txt { min-width: 0; }
.ficha b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.ficha small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tenue); font-size: 12px; line-height: 1.35; margin-top: 3px; }
.ficha.activa small { color: var(--suave); }
@media (min-width: 1100px) and (max-height: 860px) {
  .escena:has(.servicios) { padding-top: 22px; }
  .escena:has(.servicios) .pasos { margin-bottom: 14px; }
  .escena:has(.servicios) .titulo-grande { font-size: 34px; margin-top: 6px !important; }
  .escena:has(.servicios) .sub { margin-bottom: 16px; font-size: 15px; }
  .escena:has(.servicios) .etiqueta { display: none; }
}
@media (max-width: 1020px) {
  .bloque-journal, .bloque-formacion, .bloque-hibrido { grid-column: span 12; }
  .bloque-ideas .fichas, .bloque-indicadores .fichas, .bloque-journal .fichas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 560px) {
  .bloque-ideas .fichas, .bloque-indicadores .fichas, .bloque-journal .fichas { grid-template-columns: 1fr 1fr; }
}
.bloque-ideas { order: 1; }
.bloque-indicadores { order: 2; }
.bloque-journal { order: 3; }
.bloque-formacion { order: 4; }
.bloque-hibrido { order: 5; }
@media (min-width: 1100px) and (max-height: 900px) {
  .bloque-servicio { padding: 10px 12px 12px; }
  .bloque-cab { margin-bottom: 8px; }
  .bloque-cab .icono-servicio { width: 30px; height: 30px; border-radius: 8px; }
  .bloque-cab .icono-servicio .ico { width: 16px; height: 16px; }
  .bloque-cab h3 { font-size: 15px; }
  .bloque-cab p { font-size: 12px; }
  .ficha { padding: 8px 10px; gap: 8px; }
  .ficha b { font-size: 13px; }
  .ficha small { -webkit-line-clamp: 1; font-size: 11.5px; margin-top: 1px; }
  .ficha .caja { width: 18px; height: 18px; }
  .servicios { gap: 10px; }
  .escena:has(.servicios) .tienda { gap: 16px; }
}
.separado { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--suave); font-size: 13.5px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--borde-2); }
.separado s { font-size: 20px; font-weight: 700; color: var(--tenue); text-decoration-color: rgba(248, 113, 113, .8); text-decoration-thickness: 2px; }
.ahorras { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #052e16; background: linear-gradient(180deg, #86efac, #4ade80); }