/* Oficina Virtual ENAtacama: diseño interactivo */
:root {
  --fondo: #071233; --fondo2: #0b1a45; --vidrio: rgba(255, 255, 255, .06); --linea: rgba(255, 255, 255, .13);
  --texto: #eef2ff; --suave: #b9c6ea; --tenue: #8fa0cc;
  --verde: #3ddc84; --verde-osc: #12a35a; --azul: #6f8fff; --ambar: #f5a524;
  --radio: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--texto); background: var(--fondo);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Fondo: libro contable (columnas Debe / Haber) + luces */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 45% at 10% 0%, rgba(111, 143, 255, .35), transparent 70%),
    radial-gradient(45% 40% at 100% 35%, rgba(61, 220, 132, .20), transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(159, 180, 255, .07) 31px 32px),
    var(--fondo);
}
#signos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a { color: #9fb4ff; }
img { max-width: 100%; height: auto; }
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

/* Barra */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 48px); background: rgba(7, 18, 51, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); transition: padding .3s; }
.barra.chica { padding-top: 7px; padding-bottom: 7px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { background: #fff; border-radius: 10px; padding: 5px 9px; display: flex; }
.logo img { width: 128px; display: block; }
.marca-txt { color: var(--verde); font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
nav a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; }
nav a:not(.nav-wa)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--verde); transition: right .25s; }
nav a:not(.nav-wa):hover::after { right: 0; }
.nav-wa { background: var(--verde-osc); padding: 8px 16px; border-radius: 999px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); }
.btn-wa { background: var(--verde-osc); color: #fff; box-shadow: 0 10px 30px -10px rgba(61, 220, 132, .8); }
.btn-wa::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: destello 3.5s infinite; }
@keyframes destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn-borde { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-borde:hover { background: rgba(255, 255, 255, .08); }
.ancho { width: 100%; }

/* Portada */
.hero { min-height: min(calc(100vh - 70px), 820px); display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 4vw, 60px); padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 64px); max-width: 1280px; margin: 0 auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border: 1px solid rgba(61, 220, 132, .4); border-radius: 999px; color: var(--verde); font-weight: 700; font-size: .85rem; background: rgba(61, 220, 132, .08); }
.pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); animation: pulso 1.8s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); } 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; margin: 0 0 14px; letter-spacing: -.03em; }
.brillo { background: linear-gradient(90deg, var(--verde), var(--azul), var(--verde)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 6s linear infinite; }
@keyframes brillo { to { background-position: 200% center; } }
.lead { font-size: 1.25rem; color: var(--suave); margin: 0 0 22px; }
.hero-planes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; max-width: 560px; }
.mini-plan { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--vidrio); border: 1px solid var(--linea); text-decoration: none; color: var(--texto); transition: transform .2s, border-color .2s; }
.mini-plan:hover { transform: translateY(-3px); border-color: var(--azul); }
.mini-plan b { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--azul); color: #fff; font-size: 1.1rem; }
.mini-plan.verde b { background: var(--verde-osc); }
.mini-plan.verde:hover { border-color: var(--verde); }
.mini-plan span { font-size: .85rem; color: var(--suave); }
.mini-plan strong { font-size: 1.15rem; }
.mini-plan small { font-size: .75rem; color: var(--suave); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Carrusel de escenas */
.escenas { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; background: linear-gradient(160deg, rgba(29, 43, 99, .9), rgba(7, 18, 51, .9)); border: 1px solid var(--linea); box-shadow: 0 30px 80px -30px rgba(111, 143, 255, .6); overflow: hidden; transform-style: preserve-3d; transition: transform .2s; }
.escena { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s, transform 1.2s; display: grid; place-items: center; }
.escena.activa { opacity: 1; transform: none; }
.escena svg { width: 88%; height: auto; }
.escena figcaption { position: absolute; left: 20px; top: 18px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); background: rgba(7, 18, 51, .7); padding: 5px 10px; border-radius: 8px; }
.puntos { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.puntos button { width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .3s, background .3s; }
.puntos button.on { width: 30px; background: var(--verde); }
/* Animaciones dentro de las escenas */
.nodo { animation: latido 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nodo:nth-child(2n) { animation-delay: .6s; } .nodo:nth-child(3n) { animation-delay: 1.2s; }
@keyframes latido { 50% { transform: scale(1.5); } }
.red path { stroke-dasharray: 8 8; animation: flujo 1.4s linear infinite; }
@keyframes flujo { to { stroke-dashoffset: -32; } }
.barras rect { transform-box: fill-box; transform-origin: bottom; animation: crecer 3s ease-in-out infinite; }
.barras rect:nth-child(2) { animation-delay: .2s; } .barras rect:nth-child(3) { animation-delay: .4s; } .barras rect:nth-child(4) { animation-delay: .6s; }
@keyframes crecer { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.tendencia { stroke-dasharray: 400; animation: trazo 3s ease-in-out infinite; }
@keyframes trazo { 0% { stroke-dashoffset: 400; } 60%, 100% { stroke-dashoffset: 0; } }
.cohete { animation: flotar 2.2s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-14px); } }
.fuego { transform-box: fill-box; transform-origin: top; animation: llama .25s ease-in-out infinite alternate; }
@keyframes llama { to { transform: scaleY(1.25); } }
.estrellas circle { animation: titila 1.6s infinite alternate; } .estrellas circle:nth-child(2n) { animation-delay: .8s; }
@keyframes titila { to { opacity: .2; } }
.ventanas rect { animation: luz 3s steps(1) infinite; } .ventanas rect:nth-child(3n) { animation-delay: 1s; } .ventanas rect:nth-child(4n) { animation-delay: 2s; }
@keyframes luz { 50% { fill: #2a3a7a; } }
.pin { animation: rebote 1.6s ease-in-out infinite; }
@keyframes rebote { 50% { transform: translateY(-10px); } }

/* Secciones */
.seccion { padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 64px); max-width: 1180px; margin: 0 auto; scroll-margin-top: 70px; }
.banda { max-width: none; background: rgba(4, 10, 32, .55); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.banda > * { max-width: 1050px; margin-left: auto; margin-right: auto; }
.tit { text-align: center; font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0 0 8px; letter-spacing: -.02em; }
.sub { text-align: center; color: var(--suave); margin: 0 0 32px; }
.tit + .planes, .tit + .contactos { margin-top: 32px; }

/* Planes */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 470px)); justify-content: center; gap: 24px; }
.plan { --c: var(--azul); position: relative; padding: 30px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid var(--linea); border-top: 4px solid var(--c); display: flex; flex-direction: column; gap: 14px; transform-style: preserve-3d; transition: transform .15s ease-out, box-shadow .3s; }
.plan:hover { box-shadow: 0 24px 60px -20px var(--c); }
.plan.verde { --c: var(--verde); }
.letra { position: absolute; top: 18px; right: 22px; font-size: 4.5rem; font-weight: 900; line-height: 1; color: var(--c); opacity: .18; }
.plan-tipo { margin: 0; font-weight: 800; font-size: 1.35rem; color: var(--c); }
.precio { margin: 0; font-size: clamp(2.4rem, 5vw, 3.1rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.precio small { font-size: 1rem; font-weight: 700; color: var(--suave); letter-spacing: 0; }
.periodo { margin: -6px 0 0; color: var(--tenue); font-size: .92rem; }
.dir { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px dashed var(--linea); }
.dir-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #071233; font-size: 1.4rem; font-weight: 900; }
.dir small { display: block; color: var(--tenue); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.dir strong { display: block; font-size: 1.12rem; }
.dir span { color: var(--suave); font-size: .92rem; }
.incluye { list-style: none; margin: 0; padding: 0; flex: 1; }
.incluye li { position: relative; padding: 5px 0 5px 28px; color: var(--suave); }
.incluye li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 900; background: var(--c); color: #071233; }
.nota { text-align: center; color: var(--tenue); margin: 26px auto 0; max-width: 680px; font-size: .95rem; }

/* Paso a paso */
.flujo { position: relative; padding: 8px 0 0; }
.linea { position: absolute; left: 8%; right: 8%; top: 34px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.linea i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde), var(--azul)); transition: width .6s ease; box-shadow: 0 0 12px var(--verde); }
.pasos { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.paso { background: none; border: 0; color: var(--suave); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font: inherit; padding: 0 4px; }
.paso b { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: var(--fondo2); border: 2px solid var(--linea); color: #fff; transition: transform .3s, background .3s, box-shadow .3s, border-color .3s; }
.paso span { font-weight: 700; font-size: .92rem; text-align: center; line-height: 1.25; }
.paso:hover b { transform: scale(1.08); border-color: var(--azul); }
.paso.hecho b { background: rgba(61, 220, 132, .2); border-color: var(--verde); }
.paso.on b { background: var(--verde-osc); border-color: var(--verde); transform: scale(1.15); box-shadow: 0 0 0 8px rgba(61, 220, 132, .15), 0 0 30px rgba(61, 220, 132, .6); }
.paso.on span { color: #fff; }
.detalle { margin: 28px auto 0; max-width: 720px; text-align: center; font-size: 1.12rem; padding: 18px 22px; border-radius: 16px; background: var(--vidrio); border: 1px solid var(--linea); min-height: 92px; transition: opacity .25s; }
.detalle.cambia { opacity: 0; }
.fuente { text-align: center; color: var(--tenue); font-size: .85rem; margin-top: 18px; }

/* Estudios contables */
.estudios { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; gap: 24px; }
.estudio { position: relative; padding: 28px; border-radius: 24px; background: linear-gradient(160deg, rgba(245, 165, 36, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(245, 165, 36, .35); transform-style: preserve-3d; transition: transform .15s ease-out, box-shadow .3s; display: flex; flex-direction: column; gap: 6px; }
.estudio:hover { box-shadow: 0 24px 60px -24px var(--ambar); }
.estudio .num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ambar); color: #071233; font-weight: 900; font-size: 1.2rem; margin-bottom: 6px; }
.estudio h3 { margin: 0; font-size: 1.45rem; }
.lugar { margin: 0 0 14px; color: var(--suave); flex: 1; }

/* Contacto */
.contactos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.canal { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 18px; background: var(--vidrio); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: transform .2s, border-color .2s; overflow-wrap: anywhere; }
a.canal:hover { transform: translateY(-3px); border-color: var(--verde); }
.canal.wa { background: rgba(18, 163, 90, .25); border-color: rgba(61, 220, 132, .5); }
.canal small { color: var(--tenue); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
.aviso { color: var(--tenue); font-size: .85rem; text-align: center; margin-top: 28px; }
footer { text-align: center; padding: 28px 16px 40px; color: var(--tenue); font-size: .88rem; }
footer p { margin: 4px 0; }

/* Aparición */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.js .revelar.visible { opacity: 1; transform: none; }

/* Responsivo */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .escenas { max-width: 560px; width: 100%; margin: 0 auto; }
  .contactos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  nav a:not(.nav-wa) { display: none; }
  .barra { position: sticky; }
  .planes, .estudios { grid-template-columns: 1fr; }
  .hero-planes { grid-template-columns: 1fr; }
  .linea { left: 27px; right: auto; top: 28px; bottom: 28px; width: 4px; height: auto; }
  .linea i { width: 100% !important; height: var(--alto, 0%); transition: height .6s ease; }
  .pasos { grid-template-columns: 1fr; gap: 14px; }
  .paso { flex-direction: row; gap: 14px; }
  .paso span { text-align: left; font-size: 1rem; }
  .paso.on b { transform: scale(1.06); }
  .detalle { text-align: left; }
}
@media (max-width: 460px) {
  .contactos { grid-template-columns: 1fr; }
  .logo img { width: 104px; }
  .marca-txt { display: none; }
}
/* Con los efectos de animación de Windows apagados: se mantienen los efectos suaves y se quitan los bruscos */
/* Efectos siempre activos, a pedido del sitio */
html { scroll-behavior: smooth; }
}

/* Agente Ricardo */
.ricardo { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: calc(100vw - 36px); }
.r-boton { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; border: 1px solid rgba(61, 220, 132, .5); background: rgba(7, 18, 51, .92); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 12px 34px -8px rgba(61, 220, 132, .6); }
.r-cara { display: block; border-radius: 50%; animation: pulso 2.2s infinite; }
.r-cara { position: relative; width: 56px; height: 56px; border: 3px solid var(--verde); }
.r-cara img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.ricardo.habla .r-cara { animation: hablando .9s ease-in-out infinite; }
@keyframes hablando { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); transform: scale(1); } 50% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); transform: scale(1.06); } }
.r-mini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--verde); align-self: center; }
.r-ondas { opacity: 0; }
.ricardo.habla .r-ondas { opacity: 1; animation: ondas .6s ease-in-out infinite alternate; }
@keyframes ondas { to { opacity: .3; } }
.r-nombre b { color: var(--verde); }
.ricardo.saluda:not(.abierto) .r-boton { animation: saludo .6s ease 3; }
@keyframes saludo { 50% { transform: translateY(-8px) rotate(-2deg); } }
.r-globo { width: min(380px, calc(100vw - 36px)); padding: 16px 18px 14px; border-radius: 20px 20px 6px 20px; background: rgba(11, 26, 69, .97); border: 1px solid rgba(111, 143, 255, .45); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); backdrop-filter: blur(10px); animation: aparece .3s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.r-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.r-cab strong { font-size: 1.1rem; }
.r-cab span { color: var(--tenue); font-size: .82rem; flex: 1; }
.r-cab button { background: none; border: 0; color: var(--suave); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
#ricardo-texto { margin: 0 0 12px; color: var(--texto); font-size: .98rem; }
.r-sub { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #000; color: #fff; font-size: .95rem; line-height: 1.45; border-left: 3px solid var(--verde); }
.r-sub mark { background: var(--verde); color: #04210f; border-radius: 4px; padding: 0 3px; }
.r-acc { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.r-acc .btn { padding: 12px 18px; }
.r-wa { text-align: center; font-size: .9rem; color: #9fb4ff; }
.r-voz { margin-top: 10px; background: rgba(255, 255, 255, .08); border: 1px solid var(--linea); color: var(--suave); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; cursor: pointer; }
.plan, .estudio, .mini-plan { cursor: pointer; }
@media (max-width: 460px) { .r-nombre { display: none; } .r-boton { padding: 5px; } }

/* ===== Portada con ambos planes y efectos más visibles ===== */
.foco { position: fixed; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(61, 220, 132, .16), rgba(111, 143, 255, .10) 35%, transparent 65%); }
.rota { display: block; font-size: .55em; color: var(--suave); font-weight: 700; margin-top: 8px; transition: opacity .45s, transform .45s, filter .45s; }
.rota.sale { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.hero-planes { grid-template-columns: 1fr 1fr; max-width: 640px; gap: 16px; }
.mini-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 16px; position: relative; isolation: isolate; border: 0; background: rgba(11, 26, 69, .85); }
.mini-plan b { width: 42px; height: 42px; margin-bottom: 6px; }
.mp-nom { font-weight: 800; font-size: 1.05rem; color: #fff !important; }
.mp-precio { font-size: 1.6rem !important; font-weight: 900; line-height: 1.1; }
.mp-dir { font-size: .9rem !important; color: var(--suave); line-height: 1.35; margin-top: 4px; }
.mp-cta { margin-top: 8px; font-weight: 800; font-size: .9rem !important; color: var(--azul) !important; transition: transform .25s; }
.mini-plan.verde .mp-cta { color: var(--verde) !important; }
.mini-plan:hover .mp-cta { transform: translateX(6px); }
.mini-plan:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px -18px var(--azul); }
.mini-plan.verde:hover { box-shadow: 0 20px 50px -18px var(--verde); }
.incluye-corto { color: var(--suave); font-size: .92rem; margin: 16px 0 0; }
/* Borde de luz que gira alrededor de las tarjetas */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.borde-vivo::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--giro), transparent 0 55%, var(--c, var(--azul)) 70%, #fff 75%, var(--c, var(--azul)) 80%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girar 4s linear infinite; }
.mini-plan.borde-vivo { --c: var(--azul); } .mini-plan.verde.borde-vivo { --c: var(--verde); }
.plan.borde-vivo::before { animation-duration: 6s; }
@keyframes girar { to { --giro: 360deg; } }
/* Aparición más marcada */
.js .revelar { transform: translateY(40px) scale(.97); filter: blur(4px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s; }
.js .revelar.visible { filter: none; }
@media (max-width: 760px) { .hero-planes { grid-template-columns: 1fr; } .foco { display: none; } }