:root {
	--tinta: #0f1f1a;
	--texto: #3b4943;
	--suave: #66756e;
	--fondo: #ffffff;
	--fondo-2: #f3f6f2;
	--linea: #dfe6de;
	--marca: #0f5e4f;
	--marca-osc: #0a4539;
	--marca-clara: #dcede7;
	--menta: #6ee7c4;
	--oro: #f0c88f;
	--acento: #d39a4a;
	--noche: #071f1a;
	--radio: 16px;
	--sombra: 0 12px 34px rgba(15, 31, 26, .10);
	--sombra-alta: 0 30px 80px rgba(3, 20, 16, .45);
	color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
	margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px; line-height: 1.6; color: var(--texto); background: var(--fondo);
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--marca); text-decoration: none; }
h1, h2, h3 { font-family: "Sora", "Inter", sans-serif; color: var(--tinta); letter-spacing: -.025em; line-height: 1.12; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: .8rem; }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0; }

.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.envoltura.estrecha { max-width: 840px; }
.ceja { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-bottom: .8rem; }
.seccion { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
.seccion-suave { background: var(--fondo-2); }
.titular { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.seccion-sub { color: var(--suave); max-width: 620px; margin: 0 auto; font-size: 1.06rem; }

/* --- Botones --- */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	min-height: 50px; padding: .75rem 1.4rem; border-radius: 12px; font-weight: 600; font-size: 1rem;
	background: var(--marca); color: #fff; border: 1.5px solid var(--marca); white-space: nowrap;
	transition: background .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.boton:hover { background: var(--marca-osc); border-color: var(--marca-osc); box-shadow: 0 10px 24px rgba(15, 94, 79, .28); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton-fantasma { background: transparent; color: var(--marca); }
.boton-fantasma:hover { background: var(--marca-clara); color: var(--marca-osc); box-shadow: none; }
.boton-luz { background: #fff; color: var(--marca-osc); border-color: #fff; }
.boton-luz:hover { background: var(--oro); border-color: var(--oro); color: var(--noche); box-shadow: 0 12px 30px rgba(240, 200, 143, .3); }
.boton-contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.boton-contorno:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); box-shadow: none; }
.boton-chico { min-height: 40px; padding: .5rem 1rem; font-size: .9rem; border-radius: 10px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* --- Navegación --- */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.nav.con-sombra { border-bottom-color: var(--linea); box-shadow: 0 6px 20px rgba(15, 31, 26, .06); }
.nav-fila { display: flex; align-items: center; gap: 1.5rem; height: 70px; }
.marca { display: flex; align-items: center; gap: .55rem; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--tinta); }
.marca-sello { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #14806b, var(--marca-osc)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; box-shadow: 0 4px 12px rgba(15, 94, 79, .35); }
.nav-enlaces { display: flex; gap: 1.7rem; margin-left: 1.4rem; }
.nav-enlaces a { color: var(--texto); font-weight: 500; font-size: .95rem; }
.nav-enlaces a:hover { color: var(--marca); }
.nav-acciones { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.enlace-entrar { font-weight: 600; color: var(--tinta); }
@media (max-width: 900px) { .nav-enlaces { display: none; } }

/* --- Portada --- */
.heroe {
	position: relative; overflow: hidden; color: #cfe3dc;
	background: radial-gradient(1200px 700px at 80% -20%, #14584a 0%, transparent 60%), linear-gradient(165deg, #071f1a 0%, #0b3129 55%, #0a2a23 100%);
	padding: clamp(60px, 9vw, 110px) 0 clamp(80px, 10vw, 130px);
}
.heroe::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 48px 48px; mask-image: radial-gradient(ellipse at 65% 35%, #000 10%, transparent 68%);
}
.orbe { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55; }
.orbe-1 { width: 460px; height: 460px; background: #1fa386; top: -140px; right: 8%; animation: deriva 14s ease-in-out infinite alternate; }
.orbe-2 { width: 380px; height: 380px; background: #c98b3b; bottom: -180px; left: -80px; opacity: .35; animation: deriva 18s ease-in-out infinite alternate-reverse; }
@keyframes deriva { to { transform: translate(40px, 30px) scale(1.08); } }
.heroe-rejilla { position: relative; z-index: 1; display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1000px) { .heroe-rejilla { grid-template-columns: 1fr 1.02fr; } }
.insignia {
	display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem; border-radius: 99px;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #d7ece5; font-size: .86rem; font-weight: 500;
	margin-bottom: 1.6rem; transition: background .2s;
}
.insignia:hover { background: rgba(255, 255, 255, .12); }
.insignia span { background: var(--menta); color: var(--noche); font-weight: 700; font-size: .72rem; padding: .18rem .55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.heroe h1 { color: #fff; font-size: clamp(2.5rem, 5.8vw, 4.2rem); letter-spacing: -.035em; line-height: 1.04; }
.resalta { background: linear-gradient(95deg, var(--menta) 0%, #b7f0dc 40%, var(--oro) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe-sub { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 560px; color: #b9d2c9; }
.heroe-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.heroe-puntos { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; color: #9ebdb2; }
.heroe-puntos li::before { content: "✓"; color: var(--menta); font-weight: 800; margin-right: .45rem; }

/* Escena: maqueta + tarjetas flotantes */
.escena { position: relative; padding: 1.5rem 0; }
.maqueta { position: relative; background: #fff; border-radius: 18px; box-shadow: var(--sombra-alta); overflow: hidden; transform: perspective(1600px) rotateY(-9deg) rotateX(4deg); color: var(--texto); border: 1px solid rgba(255,255,255,.4); }
@media (max-width: 999px) { .maqueta { transform: none; } }
.maqueta-barra { display: flex; align-items: center; gap: .35rem; padding: .7rem .9rem; background: var(--fondo-2); border-bottom: 1px solid var(--linea); }
.maqueta-barra i { width: 10px; height: 10px; border-radius: 50%; background: #d6ddd5; }
.maqueta-barra i:nth-child(1) { background: #f1a09a; } .maqueta-barra i:nth-child(2) { background: #f3d08a; } .maqueta-barra i:nth-child(3) { background: #9fd8a6; }
.maqueta-barra span { margin-left: .6rem; font-size: .72rem; color: var(--suave); background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: .1rem .7rem; }
.maqueta-cuerpo { padding: 1.1rem 1.15rem 1.25rem; }
.maqueta-rfc { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; }
.maqueta-rfc strong { font-family: "Sora", sans-serif; color: var(--tinta); font-size: 1.05rem; margin-right: .2rem; }
.maqueta-pestanas { display: flex; gap: .9rem; font-size: .75rem; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--linea); margin: .8rem 0 .9rem; }
.maqueta-pestanas b, .maqueta-pestanas span { padding: .35rem 0; }
.maqueta-pestanas b { color: var(--marca); border-bottom: 2px solid var(--marca); }
.maqueta-rejilla { display: grid; gap: .9rem; grid-template-columns: 1.1fr 1fr; }
.chip { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; padding: .14rem .55rem; border-radius: 99px; background: var(--fondo-2); color: var(--suave); border: 1px solid var(--linea); white-space: nowrap; }
.chip-ok { background: #dcefe2; color: #2b7a4b; border-color: transparent; }
.chip-ambar { background: #f7e7cf; color: #a0621a; border-color: transparent; }
.maqueta-total { background: linear-gradient(150deg, #10705e, var(--marca-osc)); color: #d7ece5; border-radius: 12px; padding: .95rem 1rem; }
.maqueta-total small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .85; }
.maqueta-monto { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.95rem; color: #fff; line-height: 1.2; margin: .15rem 0; }
.maqueta-total ul { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .78rem; }
.maqueta-total li { display: flex; justify-content: space-between; padding: .32rem 0; border-top: 1px solid rgba(255,255,255,.18); }
.maqueta-total b { color: #fff; }
.maqueta-grafica { border: 1px solid var(--linea); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; }
.maqueta-grafica small { font-size: .66rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.barras { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 124px; margin-top: .6rem; }
.par { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.par i { flex: 1; height: var(--h); background: linear-gradient(180deg, #16876f, var(--marca)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: crecer 1.1s cubic-bezier(.2,.8,.2,1) both; }
.par i.gasto { background: linear-gradient(180deg, #e6b574, var(--acento)); }
.par:nth-child(2) i { animation-delay: .06s } .par:nth-child(3) i { animation-delay: .12s } .par:nth-child(4) i { animation-delay: .18s }
.par:nth-child(5) i { animation-delay: .24s } .par:nth-child(6) i { animation-delay: .3s } .par:nth-child(7) i { animation-delay: .36s } .par:nth-child(8) i { animation-delay: .42s }
@keyframes crecer { from { transform: scaleY(0); } }

.flotante {
	position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
	background: rgba(255, 255, 255, .96); color: var(--tinta); border-radius: 14px; box-shadow: 0 18px 44px rgba(3, 20, 16, .35);
	font-size: .82rem; animation: flotar 6s ease-in-out infinite;
}
.flotante b { display: block; font-size: .88rem; }
.flotante small { color: var(--suave); font-size: .74rem; }
.flotante-1 { top: -4px; left: -24px; }
.flotante-2 { bottom: 4px; left: 8%; animation-delay: -2s; }
.flotante-3 { flex-direction: column; align-items: flex-start; gap: .15rem; top: 36%; right: -26px; animation-delay: -4s; }
.flotante-3 b { font-family: "Sora", sans-serif; font-size: 1.35rem; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
.punto-vivo { width: 12px; height: 12px; border-radius: 50%; background: #22b07d; box-shadow: 0 0 0 0 rgba(34, 176, 125, .6); animation: latido 2s infinite; flex: none; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(34, 176, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 176, 125, 0); } }
.icono-doc { width: 36px; height: 40px; border-radius: 7px; background: #fbe4e1; color: #b3412f; font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 999px) {
	.flotante-1 { left: 0; } .flotante-3 { right: 0; } .flotante-2 { left: 4%; }
}
@media (max-width: 560px) {
	.flotante-2, .flotante-3 { display: none; }
	.maqueta-rejilla { grid-template-columns: 1fr; }
	.maqueta-grafica { display: none; }
}

/* --- Hechos --- */
.hechos { background: var(--noche); border-top: 1px solid rgba(255,255,255,.06); }
.hechos-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.hechos-fila div { display: flex; align-items: center; gap: .8rem; color: #9ebdb2; font-size: .9rem; }
.hechos-fila b { font-family: "Sora", sans-serif; color: var(--menta); font-size: 1.15rem; }

/* --- Antes / después --- */
.versus { display: grid; gap: 1.3rem; }
@media (min-width: 860px) { .versus { grid-template-columns: 1fr 1fr; } }
.versus-col { border-radius: 20px; padding: 2rem 1.9rem; }
.versus-col h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.versus-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.versus-col li { display: flex; gap: .75rem; align-items: flex-start; }
.versus-col li::before { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; margin-top: .05rem; }
.versus-sin { background: var(--fondo-2); border: 1px solid var(--linea); }
.versus-sin h3 { color: var(--suave); }
.versus-sin li { color: var(--suave); }
.versus-sin li::before { content: "✕"; background: #f3dcd7; color: #b3412f; }
.versus-con { background: linear-gradient(160deg, #0f5e4f, #0a3f34); color: #d7ece5; box-shadow: var(--sombra); }
.versus-con h3 { color: #fff; }
.versus-con li::before { content: "✓"; background: var(--menta); color: var(--noche); }

/* --- Recorrido del producto --- */
.recorrido-tabs { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.8rem; }
.recorrido-tabs button {
	display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
	padding: .7rem 1.15rem; border-radius: 12px; border: 1px solid var(--linea); background: #fff;
	font: 600 .95rem "Inter", sans-serif; color: var(--texto); transition: all .18s;
}
.recorrido-tabs button span { font-family: "Sora", sans-serif; font-size: .74rem; color: var(--suave); }
.recorrido-tabs button:hover { border-color: var(--marca); color: var(--marca); }
.recorrido-tabs button[aria-selected="true"] { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 10px 24px rgba(15, 94, 79, .25); }
.recorrido-tabs button[aria-selected="true"] span { color: var(--menta); }
.recorrido-panel { display: grid; gap: 2.4rem; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--sombra); }
@media (min-width: 900px) { .recorrido-panel { grid-template-columns: 1fr 1.1fr; } }
html.js .recorrido-panel:not(.activo) { display: none; }
html:not(.js) .recorrido-panel + .recorrido-panel { margin-top: 1.2rem; }
html:not(.js) .recorrido-tabs { display: none; }
.recorrido-panel.activo { animation: aparecer .45s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }
.recorrido-texto h3 { font-size: 1.55rem; margin-bottom: .8rem; }
.recorrido-texto p { color: var(--suave); }
.palomitas { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .6rem; }
.palomitas li { display: flex; gap: .6rem; color: var(--tinta); font-weight: 500; font-size: .95rem; }
.palomitas li::before { content: "✓"; color: var(--marca); font-weight: 800; }
.pantalla { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 18px; padding: 1.3rem; display: grid; gap: 1rem; }
.pantalla-sync { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: .9rem 1rem; flex-wrap: wrap; }
.pantalla-sync small { display: block; font-size: .64rem; letter-spacing: .06em; font-weight: 700; color: var(--suave); }
.pantalla-sync b { font-family: "Sora", sans-serif; font-size: 1.3rem; color: var(--tinta); }
.pantalla-sync .chip { margin-left: auto; }
.sync-ico { width: 44px; height: 44px; border-radius: 12px; background: #dcefe2; color: #2b7a4b; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; }
.pantalla-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); font-size: .84rem; }
.pantalla-tabla td { padding: .7rem .8rem; border-bottom: 1px solid var(--linea); color: var(--texto); }
.pantalla-tabla tr:last-child td { border-bottom: 0; }
.pantalla-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pantalla-chips span { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: .6rem .7rem; font-family: "Sora", sans-serif; font-weight: 800; color: var(--tinta); font-size: 1.02rem; }
.pantalla-chips small { display: block; font-family: "Inter", sans-serif; font-size: .64rem; letter-spacing: .06em; color: var(--suave); font-weight: 700; }
.pantalla-chips .activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.pantalla-chips .activo small { color: #bfe0d5; }
.pantalla-papel { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); font-size: .86rem; }
.pantalla-papel td { padding: .65rem .85rem; border-bottom: 1px solid var(--linea); }
.pantalla-papel td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pantalla-papel tr.res td { background: var(--marca-clara); color: var(--marca-osc); font-weight: 800; border-bottom: 0; }
.pantalla-factura { background: #fff; border-top: 4px solid var(--marca); }
.fact-cab { display: flex; justify-content: space-between; align-items: center; }
.fact-cab b { font-family: "Sora", sans-serif; color: var(--marca); }
.fact-lineas { display: grid; gap: .5rem; }
.fact-lineas i { display: block; height: 10px; border-radius: 6px; background: var(--fondo-2); }
.fact-pie { display: flex; justify-content: space-between; align-items: center; }
.fact-qr { width: 70px; height: 70px; border-radius: 6px; background:
	conic-gradient(from 90deg at 30% 30%, #0f1f1a 25%, transparent 0) 0 0 / 14px 14px, var(--fondo-2); border: 5px solid #fff; outline: 1px solid var(--linea); }
.fact-total { text-align: right; }
.fact-total small { display: block; color: var(--suave); font-size: .72rem; }
.fact-total b { font-family: "Sora", sans-serif; font-size: 1.35rem; color: var(--tinta); }
.fact-botones { display: flex; gap: .5rem; justify-content: flex-end; }
.fact-botones span { font-size: .78rem; font-weight: 700; padding: .45rem .8rem; border-radius: 9px; border: 1px solid var(--linea); color: var(--marca); }
.fact-botones .lleno { background: var(--marca); color: #fff; border-color: var(--marca); }
.pantalla-roles { display: flex; flex-wrap: wrap; gap: .45rem; }
.pantalla-roles span { font-size: .76rem; font-weight: 600; padding: .35rem .7rem; border-radius: 99px; background: #fff; border: 1px solid var(--linea); color: var(--texto); }

/* --- Números --- */
.numeros { background: linear-gradient(120deg, #0f5e4f, #0a3a31); color: #cfe3dc; padding: clamp(48px, 7vw, 76px) 0; }
.numeros-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; }
.numeros b { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.4rem); color: #fff; line-height: 1; letter-spacing: -.03em; margin-bottom: .5rem; }
.numeros span { font-size: .95rem; color: #b2d1c6; }

/* --- Pasos --- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); position: relative; }
.pasos li { background: #fff; border-radius: 20px; padding: 2rem 1.7rem; border: 1px solid var(--linea); position: relative; transition: box-shadow .2s, transform .2s; }
.pasos li:hover { box-shadow: var(--sombra); transform: translateY(-4px); }
.paso-num { display: inline-flex; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #14806b, var(--marca-osc)); color: #fff; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.1rem; align-items: center; justify-content: center; margin-bottom: 1.1rem; box-shadow: 0 8px 18px rgba(15, 94, 79, .3); }
.pasos h3 { margin-bottom: .5rem; font-size: 1.2rem; }
.pasos p { color: var(--suave); font-size: .96rem; }

/* --- Perfiles --- */
.perfiles { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.perfil { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 2rem 1.8rem; transition: box-shadow .2s, transform .2s; }
.perfil:hover { box-shadow: var(--sombra); transform: translateY(-4px); }
.perfil-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--marca-clara); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.1rem; }
.perfil h3 { margin-bottom: .55rem; font-size: 1.2rem; }
.perfil p { color: var(--suave); font-size: .96rem; }

/* --- Seguridad --- */
.seccion-oscura { background: radial-gradient(900px 500px at 10% 0%, #10443a, transparent 60%), var(--noche); color: #b9d2c9; }
.seccion-oscura h2 { color: #fff; }
.seccion-oscura .ceja { color: var(--menta); }
.seguridad-rejilla { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 920px) { .seguridad-rejilla { grid-template-columns: .9fr 1.1fr; } }
.seguridad-sub { font-size: 1.08rem; color: #a7c4ba; margin-top: .4rem; }
.seguridad-items { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.seguridad-items > div { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; padding: 1.4rem 1.3rem; }
.seguridad-items b { display: block; color: #fff; font-size: 1.02rem; margin-bottom: .45rem; font-family: "Sora", sans-serif; }
.seguridad-items p { font-size: .92rem; color: #a7c4ba; }

/* --- Precios --- */
.planes { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 22px; padding: 2rem 1.6rem; background: #fff; transition: box-shadow .2s, transform .2s; }
.plan:hover { box-shadow: var(--sombra); }
.plan h3 { font-size: 1.25rem; }
.plan-rfcs { margin-top: .3rem; font-weight: 700; color: var(--marca); font-size: .95rem; }
.plan-precio { font-family: "Sora", sans-serif; font-weight: 800; font-size: 3.1rem; color: var(--tinta); line-height: 1; margin: 1.2rem 0 .7rem; display: flex; align-items: baseline; gap: .12rem; flex-wrap: wrap; letter-spacing: -.035em; }
.plan-precio .moneda { font-size: 1.5rem; align-self: flex-start; margin-top: .35rem; }
.plan-precio .periodo { font-family: "Inter", sans-serif; font-size: .82rem; font-weight: 500; color: var(--suave); letter-spacing: 0; margin-left: .35rem; }
.plan-precio .a-medida { font-size: 1.75rem; line-height: 1.75; }
.plan-iva { font-size: .82rem; color: var(--suave); margin-bottom: .9rem; }
.plan-iva strong { color: var(--marca); }
.plan-desc { color: var(--suave); font-size: .92rem; flex: 1; margin-bottom: 1.5rem; }
.plan .boton { width: 100%; }
.plan-destacado { border: 2px solid var(--marca); box-shadow: 0 22px 54px rgba(15, 94, 79, .2); background: linear-gradient(180deg, #f3faf7, #fff 40%); }
@media (min-width: 1000px) { .plan-destacado { transform: translateY(-12px); } }
.plan-etiqueta { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #14806b, var(--marca-osc)); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .32rem .9rem; border-radius: 99px; white-space: nowrap; box-shadow: 0 6px 16px rgba(15, 94, 79, .3); }
.plan-personalizado { background: var(--fondo-2); }
.incluye { margin-top: 2.6rem; background: var(--fondo-2); border-radius: 20px; padding: 1.6rem 1.8rem; text-align: center; }
.incluye p { font-weight: 700; color: var(--tinta); margin-bottom: .9rem; }
.incluye ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.7rem; font-size: .93rem; }
.incluye li::before { content: "✓"; color: var(--marca); font-weight: 800; margin-right: .45rem; }

/* --- Preguntas --- */
.preguntas { display: grid; gap: .8rem; }
.preguntas details { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 0 1.4rem; transition: box-shadow .2s; }
.preguntas details[open] { box-shadow: var(--sombra); }
.preguntas summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--tinta); padding: 1.15rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 1.02rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--marca); transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 1.25rem; color: var(--suave); }

/* --- Cotizar --- */
.cotizar-rejilla { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .cotizar-rejilla { grid-template-columns: 1fr 1.3fr; } }
.cotizar-sub { color: var(--suave); font-size: 1.05rem; margin-top: .4rem; }
.whats-enlace { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem; font-weight: 600; color: #128c4a; padding: .6rem 1rem; border-radius: 12px; background: #e3f6ea; }
.whats-enlace:hover { background: #d2f0dd; }
.tarjeta-form { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 2rem; box-shadow: var(--sombra); }
.campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tarjeta-form label { display: block; font-size: .84rem; font-weight: 600; color: var(--tinta); margin-bottom: 1rem; }
.tarjeta-form input, .tarjeta-form textarea {
	width: 100%; margin-top: .35rem; padding: .75rem .85rem; border: 1px solid #c9d3c8; border-radius: 10px;
	font: 15px/1.4 "Inter", sans-serif; color: var(--tinta); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.tarjeta-form input:focus, .tarjeta-form textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-clara); }
.tarjeta-form .boton { width: 100%; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-ok { background: var(--marca-clara); color: var(--marca-osc); border-radius: 14px; padding: 1.3rem 1.4rem; }
.aviso-ok p { margin-top: .3rem; }
.aviso-error { background: #f7e0db; color: #ab3b2f; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 500; }

/* --- Cierre y pie --- */
.cierre { position: relative; overflow: hidden; background: linear-gradient(140deg, #0f5e4f, #071f1a); color: #cfe3dc; text-align: center; padding: clamp(70px, 10vw, 110px) 0; }
.cierre h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); position: relative; }
.cierre p { margin-bottom: 1.8rem; font-size: 1.12rem; position: relative; }
.cierre .boton { position: relative; }
.orbe-3 { width: 520px; height: 520px; background: #1fa386; top: -260px; left: 50%; transform: translateX(-50%); opacity: .35; }
.pie { background: var(--noche); color: #93b1a7; padding: 3.4rem 0 1.6rem; font-size: .9rem; }
.pie .marca { color: #fff; }
.pie-rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie-rejilla > div { display: flex; flex-direction: column; gap: .45rem; }
.pie-rejilla b { color: #fff; font-family: "Sora", sans-serif; margin-bottom: .3rem; }
.pie-rejilla a { color: #b2d1c6; }
.pie-rejilla a:hover { color: #fff; }
.pie-desc { max-width: 300px; margin-top: .6rem; }
.pie-legal { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.4rem; padding-top: 1.3rem; font-size: .82rem; color: #6f8e84; }

.whats-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(37, 211, 102, .4); transition: transform .2s; }
.whats-flotante:hover { transform: scale(1.08); }
.whats-flotante svg { width: 30px; height: 30px; }

/* --- Aparición al hacer scroll (solo con JS) --- */
html.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .revelar.visible { opacity: 1; transform: none; }

@media (max-width: 560px) {
	.nav-acciones { gap: .7rem; }
	.nav-acciones .boton-chico { padding: .45rem .8rem; font-size: .85rem; }
	.marca { font-size: 1.02rem; }
	.heroe-cta .boton { width: 100%; }
	.pantalla-chips span { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html.js .revelar { opacity: 1; transform: none; }
	.maqueta { transform: none; }
}