/* OfertaLista — forma visual tomada de linearity.io (oscura, centrada, titulares
   grandes y apretados, botones pastilla, tarjetas de vidrio, precios con luz),
   con los colores del PDF de la consulta (clientes/scripts/consulta.py).
   El movimiento sigue el analisis de linearity: entrada con
   cubic-bezier(0.16, 1, 0.3, 1), revelado al hacer scroll, hover sobrio. */
:root {
  --fondo:  #080c0e;
  --blanco: #ffffff;
  --texto:  #c9d4d7;
  --tenue:  #8b9ca2;
  --menta:  #00e1a4;
  --cian:   #00aed9;
  --error:  #ff8a8a;
  --vidrio: rgba(255, 255, 255, 0.035);
  --vidrio2: rgba(255, 255, 255, 0.06);
  --borde:  rgba(255, 255, 255, 0.09);
  --degradado: linear-gradient(100deg, var(--menta), var(--cian));
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --tarjeta: cubic-bezier(0.22, 1, 0.36, 1);
  --radio: 22px;
  --titulo: "Inter Tight", "Inter", system-ui, sans-serif;
  --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--cuerpo); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
b, strong { color: var(--blanco); font-weight: 600; }
h1, h2, h3 { font-family: var(--titulo); color: var(--blanco); margin: 0; font-weight: 600;
  letter-spacing: -0.035em; overflow-wrap: break-word; }
.grad { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tenue { color: var(--tenue); }
.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------ fondo dinamico */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fondo); }
.fondo .mancha { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  will-change: transform; }
.m1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax;
  background: radial-gradient(circle, rgba(0,225,164,.55), rgba(0,225,164,0) 65%);
  animation: deriva1 22s ease-in-out infinite alternate; }
.m2 { width: 48vmax; height: 48vmax; right: -16vmax; top: 8vmax;
  background: radial-gradient(circle, rgba(0,174,217,.55), rgba(0,174,217,0) 65%);
  animation: deriva2 26s ease-in-out infinite alternate; }
.m3 { width: 40vmax; height: 40vmax; left: 22vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(38,74,160,.6), rgba(38,74,160,0) 65%);
  animation: deriva3 30s ease-in-out infinite alternate; }
.m4 { width: 26vmax; height: 26vmax; left: 45vmax; top: 30vmax; opacity: .35;
  background: radial-gradient(circle, rgba(120,90,220,.5), rgba(120,90,220,0) 65%);
  animation: deriva1 34s ease-in-out infinite alternate-reverse; }
/* la sombra que baja: el fondo se oscurece hacia abajo para que el texto respire */
.fondo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(8,12,14,.55) 55%, rgba(8,12,14,.92) 100%); }
/* grano fino, como el shader de linearity */
.fondo::before { content: ""; position: absolute; inset: -50%; z-index: 1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes deriva1 { to { transform: translate3d(18vmax, 12vmax, 0) scale(1.15); } }
@keyframes deriva2 { to { transform: translate3d(-20vmax, 16vmax, 0) scale(.9); } }
@keyframes deriva3 { to { transform: translate3d(-14vmax, -18vmax, 0) scale(1.2); } }

/* ------------------------------------------------ barra */
.barra { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); background: rgba(8,12,14,.55);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.barra.scroll { border-bottom-color: var(--borde); background: rgba(8,12,14,.75); }
.barra .fila { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.marca { font-family: var(--titulo); font-weight: 700; font-size: 21px; letter-spacing: -0.03em;
  color: var(--blanco); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.marca i { width: 22px; height: 22px; border-radius: 7px; background: var(--degradado); display: inline-block;
  box-shadow: 0 0 18px rgba(0,225,164,.45); }
.menu { display: flex; gap: 30px; }
.menu a { position: relative; text-decoration: none; font-size: 14.5px; color: var(--texto); padding: 4px 0; }
.menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--degradado); transition: width .3s ease-in-out; }
.menu a:hover { color: var(--blanco); }
.menu a:hover::after { width: 100%; }

/* ------------------------------------------------ botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1.2 var(--cuerpo); padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; color: #04110d; background: var(--degradado);
  box-shadow: 0 8px 30px -8px rgba(0,225,164,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s ease-out, box-shadow .25s ease-out, filter .25s; max-width: 100%;
  text-align: center; flex-wrap: wrap; }
.boton:hover { transform: scale(1.03); box-shadow: 0 12px 40px -8px rgba(0,174,217,.65), inset 0 1px 0 rgba(255,255,255,.35); }
.boton:active { transform: scale(.99); }
.boton:disabled { opacity: .45; cursor: default; transform: none; }
.boton.oscuro { background: rgba(255,255,255,.06); color: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); }
.boton.oscuro:hover { background: rgba(255,255,255,.1); }
.boton.chico { padding: 9px 18px; font-size: 14px; }
.boton.grande { padding: 17px 30px; font-size: 16.5px; }
.boton small { font-weight: 500; opacity: .75; }
.enlace { background: none; border: 0; color: var(--menta); font: inherit; font-size: 14.5px; padding: 4px 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ hero */
.hero { min-height: calc(100svh - 68px); display: flex; align-items: center; text-align: center; padding: 60px 0 90px; }
.hero .contenedor { max-width: 980px; }
.pastilla { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto);
  padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--vidrio2); border: 1px solid var(--borde); }
.pastilla b { font-size: 11.5px; letter-spacing: .06em; color: #04110d; background: var(--degradado);
  padding: 3px 9px; border-radius: 999px; }
.hero h1 { font-size: clamp(42px, 7.4vw, 92px); line-height: 1.0; margin: 26px 0 24px; letter-spacing: -0.045em; }
.hero p.bajada { font-size: clamp(17px, 2vw, 21px); color: var(--texto); max-width: 640px; margin: 0 auto 38px; }
.hero .accion { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flecha { margin-top: 70px; font-size: 13px; color: var(--tenue); display: inline-flex; flex-direction: column;
  align-items: center; gap: 8px; text-decoration: none; }
.flecha span { width: 1px; height: 36px; background: linear-gradient(var(--menta), transparent);
  animation: gota 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* entrada del hero al cargar */
.entra { opacity: 0; transform: translateY(40px); animation: entra .9s var(--salida) forwards; }
.entra.d1 { animation-delay: .1s; } .entra.d2 { animation-delay: .3s; }
.entra.d3 { animation-delay: .5s; } .entra.d4 { animation-delay: .8s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ------------------------------------------------ secciones */
.seccion { padding: 130px 0; position: relative; }
.ceja { display: inline-block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--menta); margin-bottom: 20px; }
.grande { font-size: clamp(32px, 5vw, 60px); line-height: 1.05; }
.centro { text-align: center; }
.centro .grande { max-width: 940px; margin-left: auto; margin-right: auto; }

.vision p { font-family: var(--titulo); font-size: clamp(26px, 3.8vw, 46px); line-height: 1.18;
  letter-spacing: -0.03em; color: var(--blanco); font-weight: 500; max-width: 980px; margin: 0 auto; }
.vision p .apagado { color: rgba(255,255,255,.38); }

/* los 4 pasos */
.pasos4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 70px; }
.paso4 { position: relative; padding: 34px; border-radius: var(--radio); background: var(--vidrio);
  border: 1px solid var(--borde); overflow: hidden; transition: transform .3s ease-out, border-color .3s, background .3s; }
.paso4:hover { transform: translateY(-4px); border-color: rgba(0,225,164,.35); background: var(--vidrio2); }
.paso4 .n { font-family: var(--titulo); font-size: 15px; font-weight: 600; color: var(--cian); margin-bottom: 40px;
  display: flex; align-items: center; justify-content: space-between; }
.paso4 h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin-bottom: 14px; }
.paso4 p { margin: 0; color: var(--texto); }
.paso4 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.paso4 li { padding-left: 22px; position: relative; }
.paso4 li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--degradado); }
.sello { font-size: 11.5px; letter-spacing: .08em; color: #04110d; background: var(--degradado);
  padding: 4px 11px; border-radius: 999px; font-family: var(--cuerpo); }
.paso4.ancho { grid-column: span 1; grid-row: span 2; }

.cierre { text-align: center; }
.cierre h2 { font-size: clamp(32px, 5.4vw, 66px); line-height: 1.04; max-width: 900px; margin: 0 auto 22px; }
.cierre p { font-size: clamp(17px, 2vw, 21px); max-width: 620px; margin: 0 auto; }

/* ------------------------------------------------ precios (tipo linearity/pricing) */
.precios { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: 22px; justify-content: center; margin-top: 60px; }
/* El borde vivo (un degradado conico que gira) y el resplandor de atras. Las
   DOS tarjetas brillan igual al pasar encima; la de pago ademas brilla un poco
   en reposo, para que se note cual es. */
.plan { --luz-x: 50%; --luz-y: 0%; --luz: rgba(0,225,164,.22);
  position: relative; border-radius: 26px; padding: 2px; isolation: isolate;
  background: var(--borde); transition: transform .45s var(--tarjeta); }
.plan:hover, .plan:focus-within { transform: translateY(-6px); }
.plan::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--giro, 0deg), var(--menta), var(--cian), #2b4bd6, var(--cian), var(--menta));
  animation: gira 6s linear infinite; opacity: 0; transition: opacity .45s ease-out; }
.plan::after { content: ""; position: absolute; inset: 10%; z-index: -2; border-radius: inherit;
  background: var(--degradado); filter: blur(60px); opacity: 0; transition: opacity .45s ease-out; }
.plan.beta::before { opacity: 1; }
.plan.beta::after { opacity: .28; }
.plan:hover::before, .plan:focus-within::before, .plan:active::before { opacity: 1; }
.plan:hover::after, .plan:focus-within::after, .plan:active::after { opacity: .55; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gira { to { --giro: 360deg; } }
.plan .dentro { height: 100%; border-radius: 24px; padding: 38px 36px 34px; display: flex; flex-direction: column;
  background: radial-gradient(420px circle at var(--luz-x) var(--luz-y), var(--luz), transparent 55%), #0b1114;
  transition: background .2s; }
.plan.beta { --luz: rgba(0,174,217,.28); }
.plan .titulo { font-family: var(--titulo); font-size: 22px; font-weight: 600; color: var(--blanco); letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px; }
.plan .titulo em { font-style: normal; font-size: 11.5px; letter-spacing: .08em; color: #04110d; background: var(--degradado);
  padding: 4px 10px; border-radius: 999px; font-family: var(--cuerpo); font-weight: 700; }
.plan .precio { font-family: var(--titulo); font-size: clamp(46px, 5vw, 62px); font-weight: 600; color: var(--blanco);
  letter-spacing: -0.045em; line-height: 1; margin: 28px 0 8px; }
.plan .precio small { font-size: 18px; letter-spacing: -0.01em; color: var(--tenue); font-weight: 500; }
.plan .per { color: var(--tenue); font-size: 15px; margin: 0 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--borde); }
.plan .copy { margin: 0 0 16px; }
.plan .rubros { font-size: 15px; color: var(--tenue); margin: 0 0 30px; }
.plan .boton { margin-top: auto; width: 100%; }
.plan:not(.beta) .boton { background: rgba(255,255,255,.07); color: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); }
.plan:not(.beta) .boton:hover { background: var(--degradado); color: #04110d; }

/* ------------------------------------------------ contacto y pie */
.contacto { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 46px; }
.contacto a { display: flex; flex-direction: column; gap: 4px; min-width: 260px; padding: 24px 28px; border-radius: var(--radio);
  background: var(--vidrio); border: 1px solid var(--borde); text-decoration: none; transition: transform .3s ease-out, border-color .3s; }
.contacto a:hover { transform: translateY(-4px); border-color: rgba(0,225,164,.35); }
.contacto span { font-size: 13px; color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; }
.contacto strong { font-family: var(--titulo); font-size: 22px; letter-spacing: -0.02em; }
.pie { border-top: 1px solid var(--borde); padding: 34px 0; font-size: 14px; color: var(--tenue); }
.pie .fila { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie a { color: var(--tenue); }
.pie a:hover { color: var(--blanco); }

/* revelado al hacer scroll */
.revela { opacity: 0; transform: translateY(30px); transition: opacity .7s ease-out, transform .7s var(--salida); }
.revela.escala { transform: scale(.95); transition: opacity .5s ease-out, transform .5s var(--tarjeta); }
.revela.visto { opacity: 1; transform: none; }

/* ------------------------------------------------ el formulario (ventana) */
dialog.registro { width: min(760px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 1px solid var(--borde);
  border-radius: 26px; background: #0b1114; color: var(--texto); overflow: hidden;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,225,164,.08); }
dialog.registro[open] { animation: sube .45s var(--salida); display: flex; flex-direction: column; }
dialog.registro::backdrop { background: rgba(4,7,8,.72); backdrop-filter: blur(6px); animation: aparece .4s ease-out; }
@keyframes sube { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes aparece { from { opacity: 0; } }
.reg-cab { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 0; }
.reg-cab h2 { font-size: 22px; letter-spacing: -0.02em; }
.cerrar { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--borde); background: var(--vidrio);
  color: var(--texto); font-size: 20px; cursor: pointer; transition: background .2s; }
.cerrar:hover { background: var(--vidrio2); color: var(--blanco); }
.reg-cuerpo { padding: 18px 28px 26px; overflow-y: auto; }

.pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 26px; }
.pasos li { flex: 1; font-size: 12.5px; color: var(--tenue); padding-top: 10px; position: relative; }
.pasos li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--borde); }
.pasos li.hecho::before { background: var(--cian); }
.pasos li.activo { color: var(--blanco); font-weight: 600; }
.pasos li.activo::before { background: var(--degradado); }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset:not([hidden]) { animation: aparece .35s ease-out; }
legend { font-family: var(--titulo); color: var(--blanco); font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
  margin-bottom: 18px; padding: 0; }
label { display: block; margin: 0 0 16px; font-size: 14.5px; }
.opc { color: var(--tenue); }
.campo { display: block; width: 100%; margin-top: 7px; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--blanco);
  background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 14px; transition: border-color .2s, background .2s; }
.campo:focus { outline: none; border-color: var(--menta); background: rgba(0,225,164,.05); }
.ayuda { font-size: 13.5px; color: var(--tenue); margin: -8px 0 14px; min-height: 1em; }
.ayuda.ok { color: var(--menta); }
.ayuda.mal { color: var(--error); }
.acciones { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.acciones .boton:only-child { margin-left: auto; }
.error { color: var(--error); margin: 14px 0 0; }
.verif { background: rgba(255,255,255,.025); border: 1px solid var(--borde); border-radius: 18px; padding: 20px 20px 6px; margin-bottom: 14px;
  transition: border-color .3s; }
.verif > .boton { margin: -4px 0 16px; }
.verif .codigo { display: flex; gap: 12px; align-items: flex-end; }
.verif .codigo label { flex: 1; }
.verif .codigo .boton { margin-bottom: 16px; }
.verif.hecho { border-color: rgba(0,225,164,.5); }

.sub-t { color: var(--blanco); font-weight: 600; margin: 18px 0 10px; font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--vidrio2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 6px 5px 13px; font-size: 13.5px; animation: aparece .25s ease-out; }
.chip.elegido { border-color: rgba(0,225,164,.45); }
.chip small { color: var(--tenue); }
.chip button { background: rgba(255,255,255,.08); color: var(--texto); border: 0; border-radius: 999px; width: 24px; height: 24px;
  cursor: pointer; font-size: 15px; line-height: 1; transition: background .2s; }
.chip button:hover { background: var(--menta); color: #04110d; }
.resultados { max-height: 300px; overflow-y: auto; margin: -6px 0 12px; }
.resultado { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--borde); font-size: 14.5px; }
.resultado .que { font-size: 11px; color: var(--cian); text-transform: uppercase; letter-spacing: .06em; }
.resultado .camino { display: block; color: var(--tenue); font-size: 12.5px; }
.resultado .boton { flex-shrink: 0; }
details { margin: 8px 0 12px; }
summary { cursor: pointer; color: var(--menta); font-size: 14.5px; }
.arbol { max-height: 380px; overflow-y: auto; margin-top: 10px; }
.arbol details { margin: 4px 0 4px 12px; }
.arbol summary { color: var(--texto); }
.arbol label { margin: 4px 0 4px 20px; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.regiones { display: grid; gap: 10px; margin-top: 10px; }
.region { background: rgba(255,255,255,.025); border: 1px solid var(--borde); border-radius: 16px; padding: 13px 16px; transition: border-color .25s; }
.region.marcada { border-color: rgba(0,225,164,.45); }
.region > label { margin: 0; font-weight: 600; color: var(--blanco); display: flex; gap: 10px; align-items: center; }
.region .modo { display: flex; gap: 18px; margin: 10px 0 0 28px; flex-wrap: wrap; }
.region .modo label { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.region .comunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 4px 12px; margin: 12px 0 4px 28px; }
.region .comunas label { margin: 0; font-size: 13.5px; display: flex; gap: 6px; align-items: center; }
input[type=checkbox], input[type=radio] { accent-color: var(--menta); width: 17px; height: 17px; flex-shrink: 0; }
.si-no { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 22px; }
.opcion { flex: 1; min-width: 200px; display: flex; gap: 10px; align-items: center; margin: 0; cursor: pointer;
  background: rgba(255,255,255,.025); border: 1px solid var(--borde); border-radius: 16px; padding: 15px 16px; transition: border-color .25s, background .25s; }
.opcion:has(input:checked) { border-color: var(--menta); background: rgba(0,225,164,.06); color: var(--blanco); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.check input { margin-top: 3px; }
.check a { color: var(--menta); }
.listo { text-align: center; padding: 30px 10px 20px; }
.listo .ok { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 999px; background: var(--degradado);
  display: grid; place-items: center; color: #04110d; font-size: 30px; font-weight: 700; box-shadow: 0 0 40px rgba(0,225,164,.45); }
.listo h3 { font-size: 30px; margin-bottom: 12px; }

/* ------------------------------------------------ paginas de texto */
.texto-largo { padding: 80px 24px 100px; max-width: 820px; }
.texto-largo h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin-bottom: 30px; }
.texto-largo h2 { font-size: 22px; margin: 38px 0 10px; letter-spacing: -0.02em; }
.texto-largo a { color: var(--menta); }

/* ------------------------------------------------ celular */
@media (max-width: 860px) {
  .menu { display: none; }
  .pasos4, .precios { grid-template-columns: 1fr; }
  .paso4.ancho { grid-row: auto; }
  .seccion { padding: 90px 0; }
  .paso4, .plan .dentro { padding: 28px 24px; }
  .pasos li { font-size: 0; }
  .pasos li.activo { font-size: 12.5px; }
  .verif .codigo { flex-direction: column; align-items: stretch; gap: 0; }
  .region .comunas { margin-left: 0; }
  .reg-cab, .reg-cuerpo { padding-left: 20px; padding-right: 20px; }
  .entra { animation-duration: .55s; }
  .revela { transition-duration: .5s; }
  .fondo .mancha { filter: blur(70px); }
}
@media (hover: none) {
  .boton:hover, .paso4:hover, .plan:hover, .contacto a:hover { transform: none; }
  .boton:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .entra, .revela { opacity: 1; transform: none; }
}

/* el paso 2 es alto (su lista): va a la derecha ocupando dos filas, y el 4 cierra a lo ancho */
@media (min-width: 861px) {
  .pasos4 > :nth-child(4) { grid-column: 1 / -1; }
}

/* ------------------------------------------------ rubros en cascada (como Mercado Publico) */
.cascada { display: grid; gap: 10px; margin: 6px 0 8px; }
.nivel { border: 1px solid var(--borde); border-radius: 18px; background: rgba(255,255,255,.025);
  overflow: hidden; animation: aparece .3s ease-out; transition: border-color .25s; }
.nivel:not(.cerrado) { border-color: rgba(0,225,164,.4); }
.nivel header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 50px; }
.nivel-n { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: #04110d; background: var(--degradado); }
.nivel.cerrado .nivel-n { background: rgba(255,255,255,.1); color: var(--texto); }
.nivel-t { font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.nivel-v { color: var(--blanco); font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; }
.nivel.productos .nivel-v { color: var(--menta); font-weight: 500; font-size: 13.5px; text-align: right; }
.nivel-cambiar { font-size: 13.5px; flex-shrink: 0; }
.nivel.cerrado .nivel-cuerpo { display: none; }
.nivel-cuerpo { padding: 0 16px 16px; }
.nivel .filtro { margin-top: 0; padding: 11px 14px; font-size: 15px; }
.lista { list-style: none; margin: 10px 0 0; padding: 0; max-height: 280px; overflow-y: auto;
  overscroll-behavior: contain; display: grid; gap: 2px; }
.lista .item { width: 100%; text-align: left; font: inherit; font-size: 15px; color: var(--texto); background: none;
  border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between;
  gap: 10px; transition: background .15s, color .15s; }
.lista .item:hover, .lista .item:focus-visible { background: rgba(0,225,164,.09); color: var(--blanco); outline: none; }
.lista .item.ya { color: var(--menta); }
.lista .item small { color: var(--menta); flex-shrink: 0; }
.lista.checks label { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px;
  font-size: 14.5px; cursor: pointer; }
.lista.checks label:hover { background: rgba(255,255,255,.04); }
.lista.checks input { margin-top: 2px; }
.prod-barra { display: flex; gap: 14px; align-items: center; }
.prod-barra .filtro { flex: 1; }
#agregar-rubro { width: 100%; margin-top: 14px; }
.elegidos { display: grid; gap: 8px; margin-bottom: 8px; }
.elegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px;
  border-radius: 14px; border: 1px solid rgba(0,225,164,.35); background: rgba(0,225,164,.05); animation: aparece .25s ease-out; }
.elegido strong { display: block; font-size: 15px; }
.elegido span { display: block; font-size: 12.5px; color: var(--tenue); }
.elegido .cerrar { flex-shrink: 0; width: 32px; height: 32px; font-size: 17px; }
@media (max-width: 860px) {
  .nivel.cerrado .nivel-t { display: none; }
  .lista { max-height: 44svh; }
}

/* ------------------------------------------------ rubros: pestañas y "Busca tu rubro" */
.pestanas { display: flex; gap: 4px; padding: 4px; margin: 14px 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--borde); }
.pestana { flex: 1; font: 600 14px var(--cuerpo); color: var(--tenue); background: none; border: 0; border-radius: 999px;
  padding: 10px 12px; cursor: pointer; transition: background .25s, color .25s; }
.pestana:hover { color: var(--blanco); }
.pestana.activa { background: var(--degradado); color: #04110d; }
.tab:not([hidden]) { animation: aparece .3s ease-out; }
#buscar-rubro { margin-top: 0; }
.resultados-rubro { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px;
  max-height: 46svh; overflow-y: auto; overscroll-behavior: contain; }
.rubro-res { width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer; display: grid; gap: 3px;
  padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--borde);
  transition: border-color .2s, background .2s; }
.rubro-res:hover, .rubro-res:focus-visible { border-color: rgba(0,225,164,.45); background: rgba(0,225,164,.05); outline: none; }
.rubro-res.ya { border-color: rgba(0,225,164,.35); }
.rubro-nombre { color: var(--blanco); font-weight: 600; font-size: 15.5px; display: flex; justify-content: space-between; gap: 10px; }
.rubro-nombre small { color: var(--menta); font-weight: 500; flex-shrink: 0; }
.rubro-camino { font-size: 12.5px; color: var(--tenue); }
.incluidos { margin-top: 8px; font-size: 13.5px; }
.incluidos > span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cian); }
.incluidos ul { margin: 4px 0 0; padding-left: 18px; }
.incluidos li { margin: 2px 0; }
.incluidos li::marker { color: var(--menta); }

/* el panel de productos, compartido por las dos pestañas */
.nivel.productos { border-color: rgba(0,225,164,.45); margin: 12px 0 4px; }
.nivel-rubro { flex: 1; }
.nivel-cuenta { color: var(--menta); font-size: 13px; flex-shrink: 0; }
.nivel.productos .sub-t { margin-top: 0; }
.prod-acciones { display: flex; gap: 10px; margin-top: 14px; }
.prod-acciones .boton { flex: 1; }
#agregar-rubro { width: auto; margin-top: 0; }
.nivel.productos .nivel-rubro { color: var(--blanco); font-weight: 600; font-size: 14.5px; text-align: left; }