/* ─────────────────────────────────────────────
   VORALUZ · Sistema visual "Haz de luz" (v2, 2026)
   ───────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --noche: #0A0B16; --noche-2: #12142B; --noche-3: #1A1D3A;
  --tinta: #F4F1EA; --tinta-2: #B8B5C8; --linea-oscura: rgba(255,255,255,.10);
  --papel: #F7F4EE; --papel-2: #EFEAE1; --carbon: #14141F; --carbon-2: #55566A; --linea-clara: rgba(20,20,31,.12);
  --sol: #FFB547; --brasa: #FF6A3D; --violeta: #B44BFF; --anil: #5B6CFF;
  --luz: linear-gradient(100deg, var(--sol) 0%, var(--brasa) 35%, var(--violeta) 70%, var(--anil) 100%);
  --cta: #FF6A3D; --cta-ink: #170904;
  --radio: 22px; --radio-s: 14px; --max: 1180px;
  --f-titulo: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-acento: "Instrument Serif", Georgia, serif;
  --sombra: 0 30px 80px -30px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--noche); color: var(--tinta); font: 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.04; letter-spacing: -0.025em; margin: 0; font-weight: 750; }
h2 { font-size: clamp(34px, 5.4vw, 64px); }
h3 { font-size: 22px; letter-spacing: -0.01em; }
p { margin: 0; }
em.acento { font-family: var(--f-acento); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--noche); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 6px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.35 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--luz); }
.claro .eyebrow { color: var(--carbon-2); }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--tinta-2); max-width: 58ch; margin-top: 18px; }
.claro .lead { color: var(--carbon-2); }
.texto-luz { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 700 17px/1 var(--f-texto); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: scale(.98); }
.btn-cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 14px 40px -12px rgba(255,106,61,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-cta:hover { box-shadow: 0 18px 50px -10px rgba(255,106,61,.9), inset 0 1px 0 rgba(255,255,255,.35); transform: translateY(-1px); }
.btn-vidrio { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--tinta); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-vidrio:hover { background: rgba(255,255,255,.11); }
.claro .btn-vidrio { background: #fff; border-color: var(--linea-clara); color: var(--carbon); }
.btn-oscuro { background: var(--carbon); color: var(--papel); }

/* Barra superior */
.top { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.top.solida { background: rgba(10,11,22,.78); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-color: var(--linea-oscura); }
.top .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 750 22px/1 var(--f-titulo); letter-spacing: -0.03em; }
.marca img { width: 30px; height: 30px; }
.nav { display: none; gap: 28px; font-size: 15px; color: var(--tinta-2); }
.nav a { text-decoration: none; padding: 8px 0; }
.nav a:hover { color: var(--tinta); }
.top .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.top-tel { display: none; }
.top .btn { white-space: nowrap; }
@media (max-width: 400px) { .top .wrap { gap: 10px; } .top .btn-cta { padding-left: 14px; padding-right: 14px; } .idiomas a { min-width: 32px; padding: 0 6px; } .marca { font-size: 20px; } }
.idiomas { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--linea-oscura); }
.idiomas a { min-width: 38px; min-height: 36px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; font: 700 13px/1 var(--f-texto); letter-spacing: .04em; color: var(--tinta-2); text-decoration: none; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--noche); }
.idiomas a:not([aria-current]):hover { color: var(--tinta); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 110px 0 70px; isolation: isolate; }
.luz-fallback, .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.luz-fallback { background:
  radial-gradient(60% 45% at 78% 34%, rgba(255,106,61,.35), transparent 70%),
  radial-gradient(50% 40% at 92% 70%, rgba(91,108,255,.35), transparent 70%),
  radial-gradient(40% 30% at 60% 18%, rgba(255,181,71,.25), transparent 70%),
  linear-gradient(162deg, transparent 42%, rgba(180,75,255,.18) 58%, transparent 70%); }
.hero canvas { opacity: 0; transition: opacity 1.4s ease; }
.hero canvas.is-live { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,11,22,.92) 0%, rgba(10,11,22,.55) 48%, rgba(10,11,22,.1) 100%), linear-gradient(0deg, var(--noche) 0%, transparent 25%); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 9.4vw, 84px); font-weight: 800; letter-spacing: -0.032em; line-height: 1.02; }
.hero h1 .linea { display: block; }
.hero h1 .linea:nth-child(3) { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero .lead { color: #D6D3E2; }
.hero .lead strong { color: var(--tinta); font-weight: 650; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.confianza { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--tinta-2); }
.confianza li { display: inline-flex; align-items: center; gap: 8px; }
.confianza svg { width: 18px; height: 18px; color: var(--sol); }

/* Teléfono de vidrio (3D) */
.escena { perspective: 1400px; display: grid; place-items: center; position: relative; }
.telefono { --rx: 6deg; --ry: -16deg; width: min(310px, 76vw); aspect-ratio: 390 / 820; border-radius: 46px; padding: 11px; position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 40%, rgba(255,255,255,.12));
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 50px 120px -30px rgba(91,108,255,.55), 0 30px 60px -20px rgba(0,0,0,.7);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.telefono::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--luz); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .65; pointer-events: none; }
.telefono::after { content: ""; position: absolute; inset: 11px; border-radius: 36px; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 28%); pointer-events: none; }
.pantalla { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #0B0C0E; position: relative; }
.pantalla iframe { width: 390px; max-width: none; height: 844px; border: 0; transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.flota { animation: flota 7s ease-in-out infinite; }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.etiqueta-ejemplo { position: absolute; z-index: 2; bottom: -14px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(10,11,22,.85); border: 1px solid var(--linea-oscura); color: var(--tinta-2); }
.tarjeta-flotante { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--tinta);
  background: rgba(18,20,43,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sombra); }
.tarjeta-flotante b { display: block; font-size: 15px; }
.tarjeta-flotante small { color: var(--tinta-2); font-weight: 500; }
.tarjeta-flotante .punto { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--luz); color: var(--noche); flex-shrink: 0; }
.tarjeta-flotante .punto svg { width: 18px; height: 18px; }
.tf-1 { top: 10%; left: -16%; }
.tf-2 { bottom: 6%; right: -14%; }

/* Franja de oficios */
.oficios { border-block: 1px solid var(--linea-oscura); padding: 22px 0; overflow: hidden; }
.oficios ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.oficios li { font-size: 15px; color: var(--tinta-2); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea-oscura); background: rgba(255,255,255,.03); }

/* Secciones */
section { position: relative; }
.seccion { padding: clamp(80px, 11vw, 140px) 0; }
.claro { background: var(--papel); color: var(--carbon); }
.claro h2, .claro h3 { color: var(--carbon); }
.cabeza { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }

/* Problema */
.problemas { display: grid; gap: 16px; }
.problema { background: #fff; border: 1px solid var(--linea-clara); border-radius: var(--radio); padding: 28px; position: relative; overflow: hidden; }
.problema .num { font: 700 14px/1 var(--f-texto); color: var(--brasa); letter-spacing: .08em; }
.problema h3 { margin: 14px 0 10px; font-size: 24px; }
.problema p { color: var(--carbon-2); }

/* Antes / después */
.comparador { margin-top: 56px; display: grid; gap: 28px; align-items: center; }
.ad { position: relative; border-radius: var(--radio); overflow: hidden; background: #fff; border: 1px solid var(--linea-clara); box-shadow: 0 30px 70px -40px rgba(20,20,31,.35); user-select: none; height: 410px; }
@media (max-width: 719px) { .ad { height: 430px; } .ad-capa { padding: 16px; } .ficha .botones span { padding: 6px 10px; font-size: 12.5px; } }
.ad-capa { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ad-despues { clip-path: inset(0 0 0 var(--corte, 50%)); background: linear-gradient(160deg, #fff 0%, #FFF6EE 100%); }
.ad-antes { background: #F2F1EE; }
.ad .busqueda { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linea-clara); border-radius: 999px; padding: 10px 16px; font-size: 14px; color: var(--carbon-2); }
.ad .busqueda svg { width: 16px; height: 16px; }
.ficha { background: #fff; border: 1px solid var(--linea-clara); border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.ficha h4 { margin: 0; font: 700 18px/1.2 var(--f-texto); color: var(--carbon); }
.ficha .estrellas { color: #E8A21A; font-size: 14px; }
.ficha .estrellas.gris { color: #B9B7B0; }
.ficha .meta { font-size: 13px; color: var(--carbon-2); }
.ficha .botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ficha .botones span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea-clara); color: #1A56DB; }
.ficha .botones span.no { color: #9A9AA8; text-decoration: line-through; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fotos i { height: clamp(56px, 9vw, 84px); border-radius: 8px; background: linear-gradient(135deg, #FFB547, #FF6A3D 55%, #B44BFF); opacity: .85; }
.fotos i:nth-child(2) { background: linear-gradient(135deg, #5B6CFF, #B44BFF); }
.fotos i:nth-child(3) { background: linear-gradient(135deg, #FF6A3D, #FFB547); }
.ad-antes .fotos i { background: #D9D7D2; opacity: 1; }
.sello { position: absolute; top: 16px; font: 700 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 8px; }
.ad-antes .sello { left: 16px; background: #E4E2DD; color: var(--carbon-2); }
.ad-despues .sello { right: 16px; background: var(--carbon); color: var(--papel); }
.ad-linea { position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 3px; translate: -50% 0; background: var(--luz); pointer-events: none; }
.ad-linea::after { content: "⟷"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); color: #fff; font-size: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.ad input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ad input[type=range]:focus-visible + .ad-linea::after { outline: 3px solid var(--brasa); outline-offset: 3px; }
.nota { font-size: 13px; color: var(--carbon-2); margin-top: 12px; }


/* Comparador: "Sin Voraluz" apagado, "Con Voraluz" encendido */
.ad-antes .ficha { filter: grayscale(1); opacity: .78; }
.ad-antes .busqueda { opacity: .8; }
.ficha .estrellas { display: inline-flex; align-items: center; gap: 1px; font-size: 17px; line-height: 1; }
.ficha .estrellas .meta { margin-left: 6px; }
.ficha .estrellas.gris .e { color: #9E9C96; }
.ficha .estrellas.gris .e.vacia { color: #DAD8D2; }
.ficha .estrellas.brillo .e { color: #D9D6CF; transform: scale(.8); transition: color .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1), text-shadow .35s ease; transition-delay: calc(var(--i) * 110ms); }
.ad.encendido .ficha .estrellas.brillo .e { color: #FFB400; transform: scale(1.12); text-shadow: 0 0 10px rgba(255,180,0,.55); }
.ad-despues .ficha { border-color: transparent; box-shadow: 0 0 0 2px var(--brasa), 0 18px 40px -18px rgba(255,106,61,.55); }
.ficha .botones span.si { color: #fff; background: #1A56DB; border-color: #1A56DB; }
.ficha .botones span.si:first-child { background: #0F9D58; border-color: #0F9D58; }
.ad .sello { font-size: 13px; padding: 9px 13px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; z-index: 2; }
.ad-antes .sello { background: #DCDAD4; color: #5D5C66; }
.ad-despues .sello { background: var(--cta); color: var(--cta-ink); box-shadow: 0 8px 22px -6px rgba(255,106,61,.7); }
.ad-pista { position: absolute; z-index: 3; left: var(--corte, 50%); bottom: 18px; translate: -50% 0; white-space: nowrap; font: 600 13.5px/1 var(--f-texto); color: #fff; background: rgba(20,20,31,.88); padding: 10px 14px; border-radius: 999px; pointer-events: none; transition: opacity .4s ease; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.ad-pista .mano { display: inline-block; animation: empuja 1.6s ease-in-out infinite; }
@keyframes empuja { 0%, 100% { transform: translateX(0) rotate(-10deg); } 50% { transform: translateX(-7px) rotate(-10deg); } }
.ad.tocado .ad-pista { opacity: 0; }
.ad-linea::after { content: "‹ ›"; letter-spacing: 2px; font-weight: 700; width: 52px; height: 52px; font-size: 20px; background: var(--cta); color: var(--cta-ink); }
.ad-linea::before { content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--cta); animation: anillo 1.8s ease-out infinite; }
@keyframes anillo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.ad.tocado .ad-linea::before { animation: none; opacity: 0; }

.pantalla .rueda { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; animation: rueda 26s cubic-bezier(.45,0,.25,1) infinite; animation-delay: 1.2s; }
@keyframes rueda { 0%, 10% { transform: translateY(0); } 30%, 40% { transform: translateY(calc(var(--d, 1800px) * -.32)); } 62%, 72% { transform: translateY(calc(var(--d, 1800px) * -.7)); } 90%, 100% { transform: translateY(0); } }
.mini-dock { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 4px; padding: 5px; border-radius: 14px; background: rgba(11,12,14,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mini-dock span { font: 700 10px/1 var(--f-texto); color: #F4F1EA; background: rgba(255,255,255,.08); border-radius: 9px; padding: 9px 4px; text-align: center; }
.mini-dock span.c { background: #FF7A3D; color: #170904; }

/* Servicios: tres puertas de entrada */
.servicios { padding-bottom: clamp(60px, 8vw, 100px); }
.servicios-grid { display: grid; gap: 16px; }
.servicio { position: relative; display: grid; gap: 12px; align-content: start; padding: 30px 26px 26px; border-radius: var(--radio); text-decoration: none; color: var(--tinta);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--linea-oscura); overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.servicio::before { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 80%; background: radial-gradient(closest-side, var(--acento), transparent); opacity: .18; z-index: -1; transition: opacity .35s ease; }
.servicio:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.servicio:hover::before { opacity: .32; }
.servicio .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent); }
.servicio .ico svg { width: 26px; height: 26px; }
.si-usted { font: italic 400 20px/1.25 var(--f-acento); color: var(--tinta-2); }
.servicio h3 { font-size: 26px; }
.servicio p { color: var(--tinta-2); font-size: 16px; }
.servicio .desde { font-size: 15px; color: var(--tinta-2); margin-top: 4px; }
.servicio .desde b { font: 800 26px/1 var(--f-titulo); color: var(--tinta); }
.servicio .ir { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--acento); }
.servicio .ir svg { width: 18px; height: 18px; transition: translate .3s ease; }
.servicio:hover .ir svg { translate: 4px 0; }
.revision { margin: 28px 0 0; text-align: center; color: var(--tinta-2); font-size: 16px; }
.revision a { color: var(--tinta); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sol) 60%, transparent); text-underline-offset: 5px; }
.revision svg { vertical-align: -3px; margin-left: 4px; }
.revision a strong { color: var(--sol); }
.revision svg { width: 16px; height: 16px; color: var(--sol); }
.crecimiento .plan:not(.destacado), .crecimiento .plan:not(.destacado) h3 { color: var(--carbon); }
.crecimiento .plan:not(.destacado) .btn-vidrio { background: #fff; border-color: var(--linea-clara); color: var(--carbon); }
.crecimiento .plan.destacado { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -30px rgba(180,75,255,.65); background: linear-gradient(180deg, #171A36, #0E1024); }

/* Teléfonos en vivo (redes y marketing). Tamaños en em, relativos al ancho del teléfono */
.trio .telefono { container-type: inline-size; }
.viva { font: 400 3.9cqw/1.3 var(--f-texto); color: #121318; text-align: left; display: flex; flex-direction: column; gap: .8em; padding: 1.3em .9em 1em; }
.viva b { font-weight: 700; }
.viva .v-status { display: flex; justify-content: space-between; align-items: center; font-size: .72em; margin: -.5em .4em -.2em; letter-spacing: .02em; }
.viva .v-status span { font-size: .85em; letter-spacing: .1em; }
.viva .avatar-g { width: 3.6em; height: 3.6em; border-radius: 50%; padding: .16em; background: conic-gradient(#FFB547, #FF6A3D, #E0559B, #B44BFF, #FFB547); flex-shrink: 0; }
.viva .avatar-g i { display: block; width: 100%; height: 100%; border-radius: 50%; border: .14em solid #fff; background-size: cover; background-position: center; }
.viva .avatar-g.mini { width: 2.4em; height: 2.4em; padding: .12em; }
.viva .aviso { position: absolute; z-index: 3; top: .7em; left: .6em; right: .6em; padding: .75em .9em; border-radius: 1em; font-size: .8em; line-height: 1.3; color: #fff; background: rgba(18,19,32,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 .8em 2em -.6em rgba(0,0,0,.6); opacity: 0; transform: translateY(-130%); animation: aviso 12s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--n) * 4s + 2.5s); }
@keyframes aviso { 0% { opacity: 0; transform: translateY(-130%); } 5%, 27% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-130%); } }
.btn-app { font-size: .78em; font-weight: 700; color: #fff; background: #2F7BF6; border-radius: .6em; padding: .5em 1.1em; }
.btn-app.rojo { background: #FE2C55; }

/* Redes: Instagram → TikTok → Facebook */
.redes { background: #fff; gap: .6em; }
.apps-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; background: #F0F1F5; border-radius: .8em; padding: .25em; font-size: .72em; font-weight: 700; text-align: center; z-index: 2; }
.apps-tabs span { padding: .5em 0; border-radius: .6em; color: #6b6d78; transition: background .4s ease, color .4s ease; }
.apps-tabs span.on { background: #fff; color: #121318; box-shadow: 0 .2em .6em -.2em rgba(0,0,0,.25); }
.redes .app { position: absolute; inset: 5.4em 0 0; padding: 0 .9em; display: flex; flex-direction: column; gap: .7em; opacity: 0; transform: translateX(6%); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.redes .app.on { opacity: 1; transform: none; }
.ig-top, .fb-barra { display: flex; justify-content: space-between; align-items: center; }
.ig-logo { font: italic 400 1.6em/1 var(--f-acento); }
.ig-perfil { display: flex; align-items: center; gap: .6em; }
.ig-perfil > div { flex: 1; display: grid; font-size: .85em; }
.ig-perfil small { color: #5b5d68; }
.ig-perfil small b { color: #121318; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: .8em; color: #8a8c96; border-bottom: 1px solid #ececf1; }
.ig-tabs span { padding: .45em 0; }
.ig-tabs .on { color: #121318; font-weight: 700; box-shadow: inset 0 -2px 0 #121318; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -.9em; }
.reels i { position: relative; aspect-ratio: 9 / 14; background-size: cover; }
.reels i::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.reels .vistas { position: absolute; z-index: 1; left: .4em; bottom: .35em; color: #fff; font-size: .75em; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.redes .tt { background: #fff; }
.tt-perfil { display: grid; justify-items: center; gap: .35em; font-size: .9em; }
.tt-perfil .avatar-g { width: 4.2em; height: 4.2em; background: #121318; }
.tt-nums { display: flex; gap: 1.1em; font-size: .78em; color: #6b6d78; }
.tt-nums span { display: grid; justify-items: center; }
.tt-nums b { color: #121318; font-size: 1.25em; }
.tt-grid i { aspect-ratio: 3 / 4; }
.redes .fb { background: #F0F2F5; margin: 0; padding: 0 .9em; }
.fb-logo { font: 800 1.45em/1 var(--f-texto); color: #1877F2; letter-spacing: -.03em; }
.fb-post { background: #fff; border-radius: .8em; margin: 0 -.5em; overflow: hidden; }
.fb-post .fb-top { display: flex; align-items: center; gap: .5em; padding: .6em .7em; font-size: .82em; }
.fb-post .fb-top small { display: block; color: #6b6d78; }
.fb-post p { margin: 0 0 .5em; padding: 0 .7em; font-size: .8em; }
.fb-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.fb-video.corto { aspect-ratio: 16 / 6; }
.fb-video span { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .9em; }
.fb-video small { position: absolute; right: .5em; bottom: .4em; color: #fff; font-size: .7em; background: rgba(0,0,0,.6); padding: .1em .4em; border-radius: .3em; }
.fb-nums { display: flex; justify-content: space-between; gap: .5em; padding: .55em .7em; font-size: .7em; color: #5b5d68; }
.fb-nums b { color: #121318; }
.fb-acc { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ececf1; font-size: .72em; font-weight: 700; color: #5b5d68; text-align: center; }
.fb-acc span { padding: .6em 0; }

/* Marketing: todo empieza abajo y va creciendo */
.mkt { background: linear-gradient(180deg, #141633, #0B0C1C); color: #F4F1EA; gap: .75em; }
.mkt .v-status { color: #F4F1EA; }
.mkt-top { display: grid; }
.mkt-top small { font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: #B8B5C8; }
.mkt-top b { font: 700 1.15em/1.2 var(--f-titulo); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.kpis div { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: .8em; padding: .6em .7em; display: grid; }
.kpis small { font-size: .66em; color: #B8B5C8; }
.kpis b { font: 800 1.7em/1.1 var(--f-titulo); }
.kpis em { position: absolute; top: .55em; right: .6em; font-style: normal; font-size: .7em; color: #3ED68A; animation: late 1.6s ease-in-out infinite; }
@keyframes late { 50% { transform: translateY(-.25em); opacity: .5; } }
.grafica { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: .8em; padding: .6em .7em .5em; }
.grafica small, .canales > small { font-size: .66em; color: #B8B5C8; }
.grafica svg { display: block; width: 100%; height: 6.4em; margin-top: .3em; overflow: visible; }
.grafica .linea { stroke-dasharray: 100; stroke-dashoffset: 100; }
.grafica .area { transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.mkt.corre .linea { animation: dibuja 9s cubic-bezier(.4,0,.2,1) forwards; }
.mkt.corre .area { animation: revela 9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes revela { to { transform: scaleX(1); } }
.meses { display: flex; justify-content: space-between; font-size: .6em; color: #8a8aa0; margin-top: .3em; }
.canales { display: grid; gap: .4em; }
.canales div { display: grid; grid-template-columns: 5.4em 1fr; align-items: center; gap: .5em; font-size: .72em; color: #B8B5C8; }
.canales i { height: .55em; border-radius: 1em; background: var(--luz); width: 4%; }
.mkt.corre .canales i { animation: llena 8s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--n) * .3s); }
@keyframes llena { to { width: var(--w); } }
.ultimos { display: grid; gap: .35em; }
.ultimos > small { font-size: .66em; color: #B8B5C8; }
.ultimos div { display: grid; grid-template-columns: 1.6em 1fr auto; grid-template-rows: auto auto; column-gap: .4em; align-items: center; background: rgba(255,255,255,.06); border-radius: .7em; padding: .45em .6em; font-size: .74em; opacity: 0; transform: translateY(.6em); }
.ultimos div span { grid-row: span 2; font-size: 1.2em; }
.ultimos div em { grid-column: 2; font-style: normal; color: #B8B5C8; font-size: .9em; }
.ultimos div small { grid-row: 1 / span 2; grid-column: 3; color: #8a8aa0; font-size: .85em; }
.mkt.corre .ultimos div { animation: entra .6s ease forwards; animation-delay: calc(3s + var(--n) * 1.8s); }
@keyframes entra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ultimos div { opacity: 1; transform: none; }
  .viva .aviso:first-child { opacity: 1; transform: none; }
  .grafica .linea { stroke-dashoffset: 0; } .grafica .area { transform: none; } .canales i { width: var(--w); }
}

/* Proceso */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: paso; position: relative; }
.paso { position: relative; padding: 28px; border-radius: var(--radio); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--linea-oscura); }
.paso .n { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 800 18px/1 var(--f-titulo); color: var(--noche); background: var(--luz); box-shadow: 0 10px 30px -8px rgba(255,106,61,.6); }
.paso h3 { margin: 18px 0 8px; }
.paso p { color: var(--tinta-2); }
.paso .cuando { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--sol); }

/* Muestra interactiva */
.muestra { overflow: hidden; }
.muestra-grid { display: grid; gap: 56px; align-items: center; }
.lista-check { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--tinta-2); }
.lista-check li strong { color: var(--tinta); font-weight: 650; }
.lista-check svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--sol); margin-top: 2px; }
.claro .lista-check li { color: var(--carbon-2); }
.claro .lista-check li strong { color: var(--carbon); }
.claro .lista-check svg { color: var(--brasa); }
.muestra-cabeza { text-align: center; max-width: 720px; margin: 0 auto; }
.muestra-cabeza .lead { margin-left: auto; margin-right: auto; }

/* Tres teléfonos: carrusel en celular, abanico en computadora */
.trio { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 44px calc(50vw - min(150px, 38vw)) 30px; perspective: 1600px; outline: none; }
.trio::-webkit-scrollbar { display: none; }
.trio:focus-visible { box-shadow: inset 0 0 0 2px var(--sol); border-radius: 24px; }
.tel-item { margin: 0; flex: 0 0 auto; scroll-snap-align: center; display: grid; justify-items: center; gap: 18px; transition: opacity .5s ease, scale .5s ease; position: relative; }
.tel-item::before { content: ""; position: absolute; inset: 8% -10% 20%; background: radial-gradient(closest-side, var(--acento), transparent); opacity: .28; filter: blur(30px); z-index: -1; pointer-events: none; }
.trio .telefono { --rx: 0deg; --ry: 0deg; width: min(300px, 76vw); }
.trio .telefono { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 50px 110px -34px color-mix(in srgb, var(--acento) 70%, transparent), 0 30px 60px -20px rgba(0,0,0,.75); }
.trio .mini-dock span.c { background: var(--acento); }
.tel-item.lado .rueda { animation-delay: var(--retraso, 1.2s); }
.trio.listo .tel-item:not(.activo) { opacity: .55; scale: .92; }
.tel-item figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.tel-datos b { color: var(--tinta); }
.tel-nombre { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 16px/1 var(--f-texto); color: var(--tinta); text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid var(--linea-oscura); transition: background .25s ease, border-color .25s ease; }
.tel-nombre:hover { background: rgba(255,255,255,.12); border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.tel-nombre svg { width: 16px; height: 16px; color: var(--tinta-2); }
.punto-color { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 25%, transparent), 0 0 14px var(--acento); }
.tel-datos { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.tel-datos b { color: var(--tinta); font-weight: 700; }
.oro { background: linear-gradient(180deg, #FFF3B8 0%, #FFD45C 38%, #FFB547 62%, #E58A0C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 1px; filter: drop-shadow(0 0 6px rgba(255,181,71,.55)); }
.oro.grande { font-size: 22px; line-height: 1; }
.pin-rojo { width: 16px; height: 16px; color: #FF4D4D; filter: drop-shadow(0 2px 4px rgba(255,77,77,.5)); }
.tarjeta-flotante.tf-oro, .tarjeta-flotante.tf-pin { display: none; }
.punto.rojo { background: linear-gradient(160deg, #FF7B6B, #E5282E); color: #fff; }
.puntos { display: flex; justify-content: center; gap: 8px; }
.puntos span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); transition: width .3s ease, background .3s ease; }
.puntos span.activo { width: 26px; background: var(--sol); }
.etiqueta-trio { text-align: center; font-size: 13px; color: var(--tinta-2); margin: 18px 0 0; }
.lista-check.en-fila { max-width: 980px; margin: 34px auto 0; }

/* Qué incluye */
.incluye { display: grid; gap: 14px; }
.pieza { background: #fff; border: 1px solid var(--linea-clara); border-radius: var(--radio); padding: 26px; display: grid; gap: 10px; align-content: start; transition: transform .3s ease, box-shadow .3s ease; }
.pieza:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(20,20,31,.35); }
.pieza .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--carbon); color: var(--sol); }
.pieza .ico svg { width: 24px; height: 24px; }
.pieza p { color: var(--carbon-2); font-size: 16px; }

/* Planes */
.planes { display: grid; gap: 16px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--linea-clara); border-radius: var(--radio); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan .precio { font: 800 44px/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--carbon); }
.plan .precio small { font: 600 16px/1 var(--f-texto); color: var(--carbon-2); letter-spacing: 0; }
.plan .antes { font-size: 14px; color: var(--carbon-2); }
.plan .antes s { opacity: .7; }
.plan .para { color: var(--carbon-2); font-size: 15.5px; }
.plan ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; font-size: 15.5px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brasa); margin-top: 9px; flex-shrink: 0; }
.plan .limite { font-size: 13.5px; color: var(--carbon-2); border-top: 1px dashed var(--linea-clara); padding-top: 12px; margin-top: auto; }
.plan .btn { margin-top: 6px; }
.plan.destacado { background: var(--noche); color: var(--tinta); border-color: transparent; box-shadow: 0 40px 90px -40px rgba(91,108,255,.7); }
.plan.destacado::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--luz); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan.destacado h3, .plan.destacado .precio { color: var(--tinta); }
.plan.destacado .para, .plan.destacado .antes, .plan.destacado .limite, .plan.destacado .precio small { color: var(--tinta-2); }
.plan.destacado .limite { border-color: var(--linea-oscura); }
.insignia { position: absolute; top: -13px; left: 26px; font: 700 12px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--luz); color: var(--noche); }
.cuidado { margin-top: 16px; display: grid; gap: 18px; align-items: center; padding: 28px; border-radius: var(--radio); background: var(--papel-2); border: 1px solid var(--linea-clara); }
.cuidado .precio { font: 800 34px/1 var(--f-titulo); }
.crece-titulo { margin: 56px 0 4px; text-align: center; font: 700 clamp(24px, 3vw, 32px)/1.15 var(--f-titulo); }
.pago { margin-top: 22px; font-size: 15px; color: var(--carbon-2); text-align: center; }

/* Promesas */
.promesas { display: grid; gap: 16px; }
.promesa { border-radius: var(--radio); padding: 30px; border: 1px solid var(--linea-oscura); background: rgba(255,255,255,.03); }
.promesa h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.promesa h3 span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.promesa.si h3 span { background: rgba(255,181,71,.16); color: var(--sol); }
.promesa.no h3 span { background: rgba(255,255,255,.08); color: var(--tinta-2); }
.promesa ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--tinta-2); }
.promesa li { padding-left: 20px; position: relative; }
.promesa li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: currentColor; opacity: .6; }
.promesa.si li strong { color: var(--tinta); }

/* Trabajos */
.trabajos { display: grid; gap: 16px; }
.trabajo { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea-oscura); background: var(--noche-2); display: grid; text-decoration: none; transition: transform .3s ease; }
.trabajo:hover { transform: translateY(-4px); }
.trabajo .img { aspect-ratio: 16 / 10; background: var(--noche-3) center top / cover no-repeat; position: relative; overflow: hidden; }
.trabajo .img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.trabajo .img::after { content: attr(data-nombre); position: absolute; inset: 0; display: grid; place-items: center; font: 750 26px/1.1 var(--f-titulo); color: rgba(255,255,255,.18); z-index: 0; }
.trabajo .img img { position: relative; z-index: 1; }
.trabajo .txt { padding: 22px; display: grid; gap: 6px; }
.trabajo .tipo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sol); }
.trabajo p { color: var(--tinta-2); font-size: 15.5px; }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea-clara); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 650 19px/1.35 var(--f-texto); color: var(--carbon); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-right: 2px solid var(--brasa); border-bottom: 2px solid var(--brasa); rotate: 45deg; translate: 0 -4px; transition: rotate .25s ease; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq details p { color: var(--carbon-2); padding: 0 0 22px; max-width: 70ch; }

/* Formulario */
.contacto { overflow: hidden; isolation: isolate; }
.contacto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 85% 20%, rgba(255,106,61,.22), transparent 70%), radial-gradient(45% 55% at 10% 90%, rgba(91,108,255,.25), transparent 70%); }
.contacto-grid { display: grid; gap: 48px; }
.vidrio { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 28px; padding: clamp(22px, 4vw, 38px); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sombra); }
form { display: grid; gap: 16px; }
.campos { display: grid; gap: 16px; }
label { display: grid; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--tinta); }
label .opc { color: var(--tinta-2); font-weight: 500; }
input, select, textarea { font: 16px/1.4 var(--f-texto); color: var(--tinta); background: rgba(10,11,22,.55); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radio-s); padding: 14px 15px; min-height: 52px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select option { background: var(--noche-2); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sol); box-shadow: 0 0 0 4px rgba(255,181,71,.18); }
[aria-invalid="true"] { border-color: #FF8A8A; box-shadow: 0 0 0 4px rgba(255,138,138,.15); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--tinta-2); font-size: 14px; }
.consent input { width: 24px; height: 24px; min-height: 0; padding: 0; margin-top: 2px; accent-color: var(--brasa); flex-shrink: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { min-height: 24px; font-size: 15px; font-weight: 600; border-radius: 12px; }
.estado[data-tipo="error"] { color: #FFB4B4; }
.estado[data-tipo="ok"], .estado[data-tipo="aviso"] { padding: 14px 16px; background: rgba(255,181,71,.12); border: 1px solid rgba(255,181,71,.35); color: var(--tinta); }
.otra-via { margin-top: 26px; display: grid; gap: 12px; }
.otra-via a { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--linea-oscura); background: rgba(255,255,255,.03); }
.otra-via a:hover { background: rgba(255,255,255,.07); }
.otra-via svg { width: 22px; height: 22px; color: var(--sol); }
.otra-via small { display: block; color: var(--tinta-2); font-size: 13.5px; }

/* Pie */
.pie { border-top: 1px solid var(--linea-oscura); padding: 48px 0 120px; color: var(--tinta-2); font-size: 15px; }
.pie-grid { display: grid; gap: 28px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.pie .legal { font-size: 13px; opacity: .8; }

/* Barra fija en celular */
.barra { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(18,20,43,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); transition: translate .35s ease, opacity .35s ease; }
.barra.oculta { translate: 0 140%; opacity: 0; }
.barra .btn { min-height: 52px; font-size: 16px; padding: 0 18px; }
.barra .tel { width: 52px; padding: 0; }

/* Aparición al desplazarse */
/* El contenido siempre es visible; solo se desliza un poco al entrar en pantalla. */
.js .revela:not(.visto) { translate: 0 18px; }
.revela { transition: translate .9s cubic-bezier(.2,.7,.2,1); }

/* Escritorio */
@media (min-width: 720px) {
  .problemas, .incluye { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .promesas { grid-template-columns: 1fr 1fr; }
  .trabajos { grid-template-columns: repeat(2, 1fr); }
  .campos.dos { grid-template-columns: 1fr 1fr; }
  .cuidado { grid-template-columns: 1fr auto auto; }
}
@media (min-width: 980px) {
  .hero h1 .linea { white-space: nowrap; }
  .nav { display: flex; }
  .top-tel { display: inline-flex; }
  .hero-grid { grid-template-columns: 1.2fr .8fr; }
  .comparador { grid-template-columns: .9fr 1.1fr; }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .pasos::before { content: ""; position: absolute; top: 51px; left: 60px; right: 60px; height: 2px; background: var(--luz); opacity: .35; z-index: 0; }
  .paso { z-index: 1; background: linear-gradient(180deg, rgba(18,20,43,.95), rgba(10,11,22,.95)); }
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }
  .trio { overflow: visible; justify-content: center; align-items: flex-end; gap: 0; padding: 70px 20px 20px; }
  .trio .tel-item { scale: 1; opacity: 1; }
  .trio .tel-item.lado { z-index: 1; }
  .trio .tel-item.lado .telefono { width: 284px; }
  .trio .tel-item.centro { z-index: 2; margin: 0 -26px; }
  .trio .tel-item.centro .telefono { width: 320px; }
  .trio .tel-item:first-child .telefono { --ry: 22deg; --rx: 4deg; }
  .trio .tel-item:nth-child(3) .telefono { --ry: -22deg; --rx: 4deg; }
  .trio .tel-item.centro .telefono { --rx: 3deg; translate: 0 -26px; }
  .trio .tel-item:hover .telefono { --ry: 0deg; --rx: 0deg; }
  .trio .tel-item.lado:hover { z-index: 3; }
  .trio .tel-item.centro figcaption { translate: 0 -26px; }
  .puntos { display: none; }
  .lista-check.en-fila { grid-template-columns: repeat(3, 1fr); }
  .planes { grid-template-columns: repeat(3, 1fr); }
  .plan.destacado { transform: translateY(-12px); }
  .contacto-grid { grid-template-columns: .85fr 1.15fr; align-items: start; }
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .pie { padding-bottom: 48px; }
  .barra { display: none; }
}
/* Tableta horizontal y laptops pequeñas (980–1199 px): todo cabe sin encimarse */
@media (min-width: 980px) and (max-width: 1199px) {
  .top-tel { display: none; }
  .nav { gap: 18px; font-size: 14px; }
  .hero h1 { font-size: clamp(48px, 5.6vw, 66px); }
  .hero-grid { grid-template-columns: 1.3fr .7fr; gap: 32px; }
  .hero .telefono { width: 250px; }
  .hero .tarjeta-flotante { display: none; }
}
@media (min-width: 1280px) {
  .tarjeta-flotante.tf-oro, .tarjeta-flotante.tf-pin { display: flex; }
  .tf-oro { top: 600px; left: calc(50% - 650px); animation: flota 7s ease-in-out infinite; }
  .tf-pin { top: 650px; left: calc(50% + 390px); animation: flota 8s ease-in-out infinite reverse; }
}
@media (max-width: 979px) {
  .hero .escena { display: none; }
  .hero { min-height: auto; padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revela:not(.visto) { translate: none; }
}

/* Extras (Dominio Local, Cotizador, Próximamente) */
.extras { margin-top: 16px; display: grid; gap: 16px; }
.extra { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea-clara); }
.extra .tag { font: 600 12px/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: #C2410C; }
.extra h3 { font: 800 22px/1.15 var(--f-titulo); }
.extra .precio { font: 800 30px/1 var(--f-titulo); }
.extra p { color: var(--carbon-2); font-size: 15px; line-height: 1.5; }
.extra .mas { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--carbon); text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 760px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.extra .precio small { font: 600 15px var(--f-texto); color: var(--carbon-2); }
.interes { margin-top: 18px; padding: 16px 20px; border-radius: var(--radio-s); border: 1px dashed var(--linea-clara); color: var(--carbon-2); font-size: 15px; line-height: 1.5; text-align: center; }
.interes a { color: var(--carbon); font-weight: 600; text-decoration: underline; text-decoration-color: #7A3FD0; text-underline-offset: 4px; white-space: nowrap; }

/* Tres teléfonos: aviso de deslizar en celular y espacio entre teléfonos en computadora */
.deslice { display: none; margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--tinta-2); transition: opacity .5s ease; }
.deslice.activo { display: block; }
.deslice.oculto { opacity: 0; }
.deslice .mano { display: inline-block; animation: vaiven 1.6s ease-in-out infinite; }
@keyframes vaiven { 0%, 100% { translate: -6px 0; } 50% { translate: 6px 0; } }
@media (min-width: 980px) {
  .deslice, .deslice.activo { display: none; }
  .trio .tel-item.centro { margin: 0 34px; }
}

/* WhatsApp */
.btn-wa { background: #1FA855; color: #fff; }
.barra { grid-template-columns: 1fr auto auto; }
.barra .btn-wa { width: 52px; padding: 0; }
.barra .btn-wa svg { color: #fff; }
.otra-via .via-wa svg { color: #25D366; }

/* Ejemplos de páginas (reemplaza "Páginas publicadas") */
.muestras-web { display: grid; gap: 22px; }
.muestra-web { display: grid; gap: 0; text-decoration: none; border-radius: var(--radio); border: 1px solid var(--linea-oscura); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.muestra-web:hover { transform: translateY(-4px); border-color: rgba(255,181,71,.35); }
.escena-ej { perspective: 1400px; display: grid; place-items: center; padding: 40px 20px 26px; background: radial-gradient(60% 70% at 50% 40%, rgba(180,75,255,.22), transparent 70%); }
.muestra-web.der .escena-ej { background: radial-gradient(60% 70% at 50% 40%, rgba(255,106,61,.22), transparent 70%); }
.escena-ej .telefono { width: min(250px, 66vw); --rx: 4deg; --ry: 14deg; }
.muestra-web.der .escena-ej .telefono { --ry: -14deg; }
.muestra-web:hover .escena-ej .telefono { --rx: 0deg; --ry: 0deg; }
.muestra-web .txt { padding: 4px 24px 26px; display: grid; gap: 6px; }
.muestra-web .tipo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sol); }
.muestra-web p { color: var(--tinta-2); font-size: 15.5px; margin: 0; }
.muestra-web p strong { color: var(--tinta); }
.muestra-web .abrir { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.muestra-web .abrir svg { width: 16px; height: 16px; color: var(--sol); transition: translate .3s ease; }
.muestra-web:hover .abrir svg { translate: 4px 0; }
.nota-ej { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--tinta-2); }
@media (min-width: 760px) { .muestras-web { grid-template-columns: 1fr 1fr; } }

/* Teléfonos en 3D: marco de metal, grosor, borde de cristal y botones */
.telefono { background: linear-gradient(140deg, #6a6e80 0%, #2a2c37 14%, #4d5162 34%, #181920 55%, #43475a 78%, #1e1f28 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 4px #0b0c11,
    1px 1px 0 #34363f, 2px 2px 0 #2b2d36, 3px 3px 0 #23252d, 4px 4px 0 #1c1d25, 5px 5px 0 #15161c,
    0 50px 120px -30px rgba(91,108,255,.55), 0 34px 60px -20px rgba(0,0,0,.75); }
.trio .telefono { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 4px #0b0c11,
    1px 1px 0 #34363f, 2px 2px 0 #2b2d36, 3px 3px 0 #23252d, 4px 4px 0 #1c1d25, 5px 5px 0 #15161c,
    0 50px 110px -34px color-mix(in srgb, var(--acento) 70%, transparent), 0 30px 60px -20px rgba(0,0,0,.75); }
.telefono::before { opacity: .45; }
.telefono .pantalla { box-shadow: 0 0 0 2px #050507, inset 0 0 0 1px rgba(255,255,255,.06); }
.telefono::after { background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 22%, transparent 34%, transparent 70%, rgba(255,255,255,.05) 100%); z-index: 2; }
.telefono .botones { position: absolute; inset: 0; pointer-events: none; }
.telefono .botones::before { content: ""; position: absolute; right: -3px; top: 25%; width: 3px; height: 11%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #2b2d36, #707486 60%, #3a3d4a); box-shadow: 1px 0 0 rgba(0,0,0,.4); }
.telefono .botones::after { content: ""; position: absolute; left: -3px; top: 19%; width: 3px; height: 17%; border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #707486 0 8%, #3a3d4a 8% 42%, transparent 42% 52%, #3a3d4a 52% 92%, #707486 92%); }

/* "Encienda su negocio": el visitante ve su propio negocio en el teléfono */
.encender { margin-top: 24px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); max-width: 600px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.encender label { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: 10px; }
.encender label em { font-style: normal; color: var(--sol); }
.encender .chispa { color: var(--sol); }
.enc-fila { display: grid; gap: 10px; }
.encender input, .encender select { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,11,22,.72); color: var(--tinta); font: 500 16px var(--f-texto); padding: 0 14px; }
.encender input::placeholder { color: #8E8BA3; }
.encender input:focus-visible, .encender select:focus-visible { outline: 2px solid var(--sol); outline-offset: 1px; }
.btn-luz { background: linear-gradient(100deg, var(--sol), var(--brasa)); color: var(--cta-ink); font-weight: 700; box-shadow: 0 12px 34px -12px rgba(255,106,61,.8); }
.hero .confianza { margin-top: 22px; }
@media (min-width: 560px) { .enc-fila { grid-template-columns: 1.4fr 1fr auto; } }
.enc-capa { position: absolute; inset: 0; overflow: hidden; z-index: 3; background: #0D0F1E; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s ease .35s, visibility 0s linear .85s; }
.hero.encendido .enc-capa { opacity: 1; visibility: visible; transition: opacity .5s ease .35s; }
.enc-etq { position: absolute; top: 7px; left: 50%; translate: -50% 0; z-index: 8; white-space: nowrap; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(10,11,22,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 3px 9px; }
.enc-tabs { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; position: relative; z-index: 6; }
.enc-tabs[hidden] { display: none; }
.enc-tabs button { font: 700 12.5px/1.15 var(--f-texto); display: flex; flex-direction: column; align-items: center; min-height: 44px; justify-content: center; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--tinta); cursor: pointer; white-space: nowrap; }
.enc-tabs button[aria-pressed="true"] { background: linear-gradient(100deg, var(--sol), var(--brasa)); color: var(--cta-ink); border-color: transparent; }
.enc-tabs small { font-size: 10px; font-weight: 600; opacity: .75; }
@media (min-width: 980px) { .escena .enc-tabs { position: absolute; top: -64px; left: 50%; translate: -50% 0; width: max-content; margin: 0; } }
@media (max-width: 560px) { .enc-tabs { gap: 4px; } .enc-tabs button { padding: 0 8px; font-size: 11.5px; } .enc-tabs small { font-size: 9px; } }
.encender #enc-otro { margin-top: 10px; }
.hero .telefono { container-type: inline-size; }
/* Cada vista del teléfono (misma escuela que los teléfonos de "Ejemplos") */
.enc-capa { --ac: #FF7A3D; }
.enc-capa .enc-v { display: none; position: absolute; inset: 0; overflow: hidden; }
.enc-capa[data-vista="web"] .enc-v[data-v="web"], .enc-capa[data-vista="google"] .enc-v[data-v="google"], .enc-capa[data-vista="redes"] .enc-v[data-v="redes"], .enc-capa[data-vista="ads"] .enc-v[data-v="ads"] { display: flex; }
.enc-v.redes .v-status, .enc-v.eg .v-status { color: #121318; }
.enc-v .oro { color: #FFB400; letter-spacing: .06em; }
.enc-v :where(svg) { width: 1.1em; height: 1.1em; flex: none; }
/* gráfico de oficio (cuando no hay foto HD) */
.ef { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--ac) 70%, #0D0F1E) 0%, #151a38 55%, #0B0C1C 100%); }
.ef::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px); }
.ef .ef-ic { position: relative; width: 34%; height: auto; max-height: 70%; color: rgba(255,255,255,.92); stroke-width: 1.3; filter: drop-shadow(0 .6em 1.2em rgba(0,0,0,.45)); }
/* WEB */
.ew { background: #0D0F14; color: #F4F1EA; display: block; padding: 0; }
.ew-pag { position: absolute; top: 0; left: 0; right: 0; padding: 4.9em 0 5em; animation: enc-rueda 21s cubic-bezier(.45,0,.25,1) infinite 1.6s; }
@keyframes enc-rueda { 0%, 8% { transform: translateY(0); } 30%, 38% { transform: translateY(calc(var(--d, 600px) * -.34)); } 58%, 66% { transform: translateY(calc(var(--d, 600px) * -.68)); } 86%, 94% { transform: translateY(calc(var(--d, 600px) * -1)); } 100% { transform: translateY(0); } }
.ew-top { display: flex; align-items: center; gap: .6em; padding: 2.4em .9em .7em; background: rgba(10,11,16,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: absolute; top: 0; left: 0; right: 0; z-index: 5; border-bottom: 1px solid rgba(255,255,255,.08); }
.ew-ini { width: 1.9em; height: 1.9em; border-radius: .55em; background: var(--ac); color: var(--ink, #14110d); font: 800 1em/1.9em var(--f-titulo); text-align: center; flex: none; }
.ew-top > b { flex: 1; font: 700 1.05em var(--f-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-lang { display: flex; font-size: .72em; font-weight: 700; background: #1b1d27; border-radius: 99px; padding: .2em; }
.ew-lang i { font-style: normal; padding: .3em .7em; border-radius: 99px; color: #9a9cab; } .ew-lang .on { background: #fff; color: #111; }
.ew-hero { position: relative; min-height: 31em; display: flex; align-items: flex-end; }
.ew-foto { position: absolute; inset: 0; background: #1A1D3A center / cover no-repeat; }
.ew-hero:has(.ew-foto.ef) { min-height: 37em; }
.ew-foto.ef { display: grid; place-items: start center; padding-top: 5.6em; }
.ew-foto.ef .ef-ic { width: 26%; padding: 1.4em; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 .9em rgba(255,255,255,.04), 0 0 4em color-mix(in srgb, var(--ac) 55%, transparent); box-sizing: content-box; }
.ew-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,15,20,.15) 0%, rgba(13,15,20,.55) 38%, #0D0F14 96%); }
.ew-cont { position: relative; z-index: 1; padding: 0 .9em 1.2em; display: flex; flex-direction: column; gap: .7em; align-items: flex-start; }
.ew-rate { display: flex; align-items: center; gap: .5em; padding: .45em .7em; border-radius: .9em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ew-rate > b { font: 800 1.9em/1 var(--f-titulo); color: #FFB547; } .ew-rate small { font-size: .72em; color: #E7E4EE; line-height: 1.15; max-width: 7em; }
.ew-chips { display: flex; flex-wrap: wrap; gap: .4em; } .ew-chips span { display: inline-flex; align-items: center; gap: .3em; font-size: .72em; padding: .35em .7em; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.ew-chips svg { color: #FF5A4D; width: 1em; height: 1em; }
.ew h3 { margin: 0; font: 800 2.15em/1.04 var(--f-titulo); letter-spacing: -.02em; } .ew h3 em { font-style: normal; color: var(--ac); }
.ew-cont > p { margin: 0; font-size: .82em; line-height: 1.4; color: #D9D6E3; }
.ew-bts { display: grid; gap: .5em; width: 100%; } .ew-bts span, .ew-banda .p { display: flex; align-items: center; justify-content: center; gap: .5em; font-weight: 700; font-size: .9em; padding: .75em 1em; border-radius: 99px; }
.ew-bts .p, .ew-banda .p, .ew-dock .p { background: var(--ac); color: var(--ink, #15110c); box-shadow: 0 .7em 1.8em -.7em var(--ac); }
.ew-bts .s { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.ew-trust { display: flex; flex-wrap: wrap; gap: .4em; } .ew-trust span { display: inline-flex; align-items: center; gap: .35em; font-size: .7em; padding: .4em .7em; border-radius: .7em; border: 1px solid rgba(255,255,255,.16); background: rgba(10,11,16,.55); } .ew-trust svg { color: var(--ac); }
.ew-sec { padding: 1.6em .9em 0; } .ew-sec > small { font-size: .68em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.ew-sec h4 { margin: .3em 0 .8em; font: 800 1.45em/1.1 var(--f-titulo); }
.ew-gal { display: grid; gap: .5em; } .ew-gal figure { margin: 0; position: relative; border-radius: .9em; overflow: hidden; aspect-ratio: 16 / 10; } .ew-gal i { display: block; width: 100%; height: 100%; background: center / cover no-repeat #1A1D3A; }
.ew-gal figcaption { position: absolute; left: .6em; bottom: .6em; font-size: .72em; font-weight: 700; background: rgba(10,11,16,.7); backdrop-filter: blur(6px); padding: .35em .75em; border-radius: 99px; }
.ew-card { display: flex; gap: .8em; align-items: center; padding: .85em; margin-bottom: .55em; border-radius: 1em; background: #15171F; border: 1px solid rgba(255,255,255,.08); }
.ew-ico { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .8em; background: color-mix(in srgb, var(--ac) 18%, #15171F); color: var(--ac); flex: none; } .ew-ico svg { width: 1.3em; height: 1.3em; }
.ew-card b { display: block; font-size: .95em; } .ew-card small { font-size: .72em; color: #AEB0BD; }
.ew-banda { margin: 1.4em .9em 0; padding: 1.2em 1em; border-radius: 1.1em; background: linear-gradient(130deg, color-mix(in srgb, var(--ac) 38%, #151833), #1b1536); display: grid; gap: .8em; justify-items: center; text-align: center; } .ew-banda b { font: 800 1.25em/1.15 var(--f-titulo); }
.ew-pie { text-align: center; font-size: .7em; color: #8B8D9C; padding: 1.4em .9em 0; }
.ew-dock { position: absolute; left: .7em; right: .7em; bottom: .8em; z-index: 4; display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: .4em; padding: .4em; border-radius: 1.2em; background: rgba(18,19,28,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 .8em 2em -.6em rgba(0,0,0,.7); }
.ew-dock span { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: .78em; font-weight: 700; padding: .65em .3em; border-radius: .9em; } .ew-dock svg { width: 1.05em; height: 1.05em; }
/* GOOGLE */
.eg { background: #fff; gap: .55em; padding: 1.3em .8em .9em; color: #202124; }
.eg-top { display: flex; justify-content: space-between; align-items: center; margin-top: .6em; } .glogo { font: 500 1.8em/1 "Product Sans", "Poppins", var(--f-texto); letter-spacing: -.02em; } .glogo b { font-weight: 600; }
.eg-av { width: 1.9em; height: 1.9em; border-radius: 50%; background: #4285F4; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85em; }
.eg-bar { display: flex; align-items: center; gap: .6em; padding: .65em .9em; border-radius: 99px; background: #fff; box-shadow: 0 .1em .6em rgba(60,64,67,.28); font-size: .85em; } .eg-bar span { flex: 1; } .eg-bar svg { color: #5f6368; } .eg-bar em { font-style: normal; font-size: .9em; }
.eg-tabs { display: flex; gap: 1.1em; font-size: .72em; color: #5f6368; border-bottom: 1px solid #e3e5e8; padding: 0 .3em; } .eg-tabs span { padding: .5em 0; } .eg-tabs .on { color: #1a73e8; font-weight: 700; box-shadow: inset 0 -2px 0 #1a73e8; }
.eg-map { position: relative; height: 6.6em; border-radius: .9em; overflow: hidden; flex: none; } .eg-map svg { width: 100%; height: 100%; }
.eg-pin { position: absolute; left: 48%; top: 18%; color: #EA4335; filter: drop-shadow(0 .2em .3em rgba(0,0,0,.35)); animation: late 1.8s ease-in-out infinite; } .eg-pin svg { width: 2.3em; height: 2.3em; }
.eg-n1 { position: absolute; left: .6em; bottom: .5em; font-size: .68em; font-weight: 800; color: #fff; background: #1a73e8; border-radius: 99px; padding: .25em .7em; } .eg-n1::before { content: "#"; }
.eg-card { display: flex; flex-direction: column; gap: .3em; padding-bottom: .4em; font-size: .9em; }
.eg-fotos { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: .25em; height: 7em; border-radius: .8em; overflow: hidden; }
.eg-fotos > :first-child { grid-row: 1 / 3; } .eg-fotos > * { display: grid; min-height: 0; } .eg-fotos > :not(.ef) { background: center / cover no-repeat #dfe3ea; } .eg-fotos .ef .ef-ic { width: 38%; }
.eg-nm { font: 700 1.25em/1.15 var(--f-texto); margin-top: .3em; }
.eg-r { display: flex; align-items: center; gap: .4em; font-size: .85em; } .eg-r > b { font-weight: 700; } .eg-r small { color: #5f6368; font-size: 1em; }
.eg-card > small { font-size: .78em; color: #5f6368; } .eg-ab b { color: #188038; }
.eg-acc { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; margin: .4em 0 .2em; }
.eg-acc span { display: grid; justify-items: center; gap: .25em; padding: .5em 0; border-radius: .8em; border: 1px solid #dadce0; color: #1a73e8; } .eg-acc .p { background: #1a73e8; color: #fff; border-color: #1a73e8; } .eg-acc small { font-size: .62em; font-weight: 700; } .eg-acc svg { width: 1.25em; height: 1.25em; }
.eg-fila { display: flex; gap: .6em; align-items: center; font-size: .78em; padding: .45em 0; border-top: 1px solid #eceef1; color: #3c4043; } .eg-fila svg { color: #1a73e8; }
/* REDES (se reutiliza el estilo de los teléfonos de abajo) */
.ig-logo { display: inline-flex; align-items: center; gap: .35em; } .ig-glifo { width: 1.25em; height: 1.25em; }
.redes .avatar-g i.ini, .avatar-g i.ini { display: grid; place-items: center; background: linear-gradient(135deg, #FFB547, #E0559B 60%, #7B3FE4); color: #fff; font: 800 1.3em var(--f-titulo); }
.reels i.ef-t { display: grid; place-items: center; background: radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--ac) 72%, #0D0F1E), #151a38 80%); } .reels i.ef-t.t1 { filter: hue-rotate(40deg); } .reels i.ef-t.t2 { filter: hue-rotate(-30deg); } .reels i.ef-t.t3 { filter: saturate(.7) brightness(.9); }
.ef-t .ef-ic { width: 38%; height: auto; color: rgba(255,255,255,.9); stroke-width: 1.4; } .fb-video.ef-v { background: radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--ac) 72%, #0D0F1E), #151a38 80%); } .fb-video .ef-ic { position: absolute; width: 22%; height: auto; opacity: .5; color: #fff; }
/* ANUNCIOS (panel + anuncio activo) */
.mkt.enc-v { gap: .55em; padding: 1.3em .8em .8em; }
.ea-ad { display: grid; grid-template-columns: 5.2em 1fr; grid-template-rows: auto auto; gap: .2em .7em; align-items: center; padding: .55em; border-radius: .9em; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ea-img { grid-row: 1 / 3; position: relative; height: 4.6em; border-radius: .6em; overflow: hidden; } .ea-img i { display: block; width: 100%; height: 100%; background: center / cover no-repeat; } .ea-img .ef { height: 100%; } .ea-img .ef .ef-ic { width: 48%; }
.ea-sp { position: absolute; left: .25em; top: .25em; font-size: .56em; font-weight: 700; background: rgba(0,0,0,.6); padding: .15em .5em; border-radius: .4em; }
.ea-t b { display: block; font-size: .8em; } .ea-t small { font-size: .62em; color: #B8B5C8; line-height: 1.2; display: block; }
.ea-b { justify-self: start; font-size: .68em; font-weight: 700; padding: .4em 1em; border-radius: 99px; background: var(--ac); color: var(--ink, #14110d); }
.mkt.enc-v .kpis b { font-size: 1.45em; } .mkt.enc-v .grafica svg { height: 4.6em; } .mkt.enc-v .meses { display: flex; justify-content: space-between; font-size: .6em; color: #8a8aa0; margin-top: .2em; }
.enc-rayo { position: absolute; inset: -40% -60%; z-index: 4; pointer-events: none; opacity: 0; translate: -70% 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 42%, rgba(255,181,71,.85) 47%, rgba(255,106,61,.85) 50%, rgba(180,75,255,.85) 53%, transparent 58%); }
.hero.encendiendo .enc-rayo { animation: rayo-luz 1s cubic-bezier(.3,.7,.2,1); }
@keyframes rayo-luz { 0% { translate: -70% 0; opacity: 1; } 100% { translate: 70% 0; opacity: 0; } }
.hero .tf-enc { opacity: 0; translate: 0 12px; transition: opacity .5s ease, translate .5s ease; pointer-events: none; }
.hero .tf-enc.ver { opacity: 1; translate: 0 0; }
.hero .tf-enc.fuera { opacity: 0; translate: 0 -8px; transition: opacity .6s ease, translate .6s ease; }
.hero.encendido .tf-1, .hero.encendido .tf-2 { opacity: 0; transition: opacity .3s ease; }
.tf-g { top: 30%; left: -18%; }
.tf-r { top: 71%; right: -20%; }
.tf-ll { bottom: 4%; left: -16%; }
.tarjeta-flotante .punto.num { background: #fff; color: var(--noche); font: 800 16px var(--f-titulo); }
.tarjeta-flotante .punto.verde { background: #25D366; color: #fff; }
.tf-ll.ver { animation: vibra-tel .45s ease .3s 3; }
@keyframes vibra-tel { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 75% { rotate: 3deg; } }
@media (max-width: 979px) {
  .hero.encendido .escena { display: grid; margin-top: 8px; }
  .hero.encendido .escena .tarjeta-flotante.tf-enc { display: flex; }
  .tf-g { left: -2%; top: 28%; } .tf-r { right: -2%; top: 70%; } .tf-ll { left: -2%; bottom: 1%; }
}
@media (min-width: 980px) and (max-width: 1199px) { .hero .tarjeta-flotante.tf-enc { display: none; } }

/* Efectos finales: la rayita de luz de cada título se dibuja al llegar, y un destello en el botón principal */
.eyebrow::before { transform-origin: left center; transition: transform .9s cubic-bezier(.2,.7,.2,1) .15s; }
.js .revela:not(.visto) .eyebrow::before { transform: scaleX(0); }
.hero .ctas .btn-cta, .barra .btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.hero .ctas .btn-cta::after, .barra .btn-cta::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: destello 5.5s ease-in-out 2.5s infinite; }
@keyframes destello { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.enc-v .aviso { top: 2.9em; }
.enc-pista { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); } .enc-pista a { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sol); text-underline-offset: 3px; }

/* Detalles finos: pulso del botón de llamar, punto de "abierto", insignia verificada, WhatsApp, pasos y horas populares */
.ew-bts .p { position: relative; } .ew-bts .p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--ac); animation: pulso-ac 2.4s ease-out infinite; pointer-events: none; }
@keyframes pulso-ac { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 .9em transparent; } }
.ew-bts .p::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); animation: brillo-ac 4.5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes brillo-ac { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ew-pasos { list-style: none; margin: .8em 0 0; padding: 0; display: grid; gap: .6em; position: relative; }
.ew-pasos li { display: flex; gap: .8em; align-items: flex-start; } .ew-pasos li > span { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 800 .85em var(--f-titulo); background: var(--ac); color: var(--ink, #15110c); }
.ew-pasos b { display: block; font-size: .92em; } .ew-pasos small { font-size: .72em; color: #AEB0BD; }
.ew-wa { position: absolute; right: .9em; bottom: 5.2em; z-index: 4; width: 2.9em; height: 2.9em; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 .6em 1.4em -.4em rgba(37,211,102,.7); animation: rebota 3.2s ease-in-out infinite; }
.ew-wa svg { width: 1.6em; height: 1.6em; } .ew-wa i { position: absolute; top: -.2em; right: -.2em; min-width: 1.4em; height: 1.4em; border-radius: 99px; background: #FF3B30; color: #fff; font: 700 .7em/1.4em var(--f-texto); text-align: center; font-style: normal; }
@keyframes rebota { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-.5em); } 86% { transform: translateY(0); } 92% { transform: translateY(-.25em); } }
.eg-ab .dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #34A853; margin-right: .4em; animation: late-dot 1.6s ease-in-out infinite; }
@keyframes late-dot { 50% { transform: scale(1.5); opacity: .5; } }
.eg-pop { padding-top: .5em; border-top: 1px solid #eceef1; } .eg-pop small { font-size: .7em !important; color: #5f6368; }
.eg-pop div { display: flex; align-items: flex-end; gap: .35em; height: 3em; margin-top: .3em; } .eg-pop i { flex: 1; height: 4%; border-radius: .25em .25em 0 0; background: #c6dafc; }
.eg-pop i:nth-child(5) { background: #1a73e8; } .enc-capa[data-vista="google"] .eg-pop i { animation: sube-barra 1.2s cubic-bezier(.3,.8,.2,1) forwards; animation-delay: calc(var(--n) * .12s + .4s); }
@keyframes sube-barra { to { height: var(--h); } }
.ig-bio { margin: -.1em 0 0; font-size: .78em; line-height: 1.35; color: #3a3c46; } .vf { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-left: .3em; border-radius: 50%; background: #3897F0; color: #fff; font-style: normal; font-size: .62em; vertical-align: .1em; }
.tt-bio { font-size: .72em; color: #6b6d78; text-align: center; max-width: 18em; line-height: 1.3; }
.enc-capa[data-vista="web"] .ew-dock { animation: sube-dock .7s cubic-bezier(.2,.8,.2,1) both; } @keyframes sube-dock { from { transform: translateY(140%); } }

/* Ajuste y compra */
.enc-aj { margin-top: 18px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; gap: 12px; max-width: 340px; margin-inline: auto; position: relative; z-index: 6; }
.enc-aj[hidden] { display: none; } .aj-t { font: 800 16px var(--f-titulo); } .enc-aj > small { margin-top: -8px; color: var(--tinta-2); font-size: 12.5px; }
.aj-f { display: grid; gap: 7px; } .aj-f > span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.aj-sw { display: flex; gap: 9px; } .aj-sw button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--c); cursor: pointer; } .aj-sw button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent); }
.aj-ch { display: flex; flex-wrap: wrap; gap: 6px; } .aj-ch button { font: 600 13px var(--f-texto); min-height: 38px; padding: 0 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--tinta); cursor: pointer; text-align: left; }
.aj-ch button[aria-pressed="true"] { background: rgba(255,181,71,.18); border-color: var(--sol); color: #fff; }
.aj-go { justify-content: center; margin-top: 2px; } .ew-card[hidden] { display: none; }
.btn-wa-solid { background: #25D366; color: #06240f; font-weight: 700; } .btn-wa-solid svg { width: 20px; height: 20px; }
.enc-compra { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: #121428; color: var(--tinta); box-shadow: 0 40px 120px -20px rgba(0,0,0,.8); }
.enc-compra::backdrop { background: rgba(5,6,16,.72); backdrop-filter: blur(4px); }
.enc-compra > * { margin-inline: 18px; } .ec-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin: 0; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; background: #121428; z-index: 1; }
.ec-cab b { font: 800 20px var(--f-titulo); display: block; } .ec-cab small { color: var(--tinta-2); font-size: 13.5px; } .ec-x { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; text-align: center; font-size: 26px; line-height: 36px; background: rgba(255,255,255,.08); flex: none; }
.enc-compra fieldset { border: 0; padding: 0; margin-top: 16px; display: grid; gap: 8px; } .enc-compra legend { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sol); margin-bottom: 8px; padding: 0; }
.ec-op { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor: pointer; } .ec-op:has(input:checked) { border-color: var(--sol); background: rgba(255,181,71,.1); }
.ec-op input { margin-top: 4px; accent-color: #FF7A3D; width: 18px; height: 18px; flex: none; } .ec-op b { display: block; font-size: 15px; } .ec-op small { color: var(--tinta-2); font-size: 12.5px; line-height: 1.4; }
.ec-res { margin-top: 18px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .ec-res ul { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.ec-res li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; } .ec-res li span { color: var(--tinta-2); } .ec-res li b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.ec-tot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; } .ec-tot b { font: 800 20px var(--f-titulo); } .ec-res small { display: block; margin-top: 8px; color: var(--tinta-2); font-size: 12.5px; }
.ec-nota { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); margin-top: 14px; } .ec-bts { display: grid; gap: 10px; margin-top: 14px; } .ec-ll { display: block; text-align: center; margin: 14px 18px 20px; color: var(--tinta-2); font-size: 14px; text-decoration: underline; }
.ec-op input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4); border-radius: 6px; background: transparent; display: grid; place-items: center; margin-top: 2px; } .ec-op input[type="radio"] { border-radius: 50%; }
.ec-op input:checked { border-color: #FF7A3D; background: #FF7A3D; } .ec-op input:checked::after { content: ""; width: 6px; height: 10px; border: solid #170904; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) translate(-1px, -1px); } .ec-op input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #170904; transform: none; }
.ec-op input { min-height: 0 !important; height: 20px; flex: none; align-self: flex-start; padding: 0; }
.hero .escena .etiqueta-ejemplo.mov { position: static; display: block; width: max-content; max-width: 100%; margin: 14px auto 0; translate: none; left: auto; right: auto; bottom: auto; }

.ec-gift { display: flex; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 16px; background: linear-gradient(130deg, rgba(255,181,71,.16), rgba(180,75,255,.14)); border: 1px solid rgba(255,181,71,.5); }
.ec-gi { font-size: 30px; line-height: 1; } .ec-gift small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sol); display: block; } .ec-gift b { font: 800 17px/1.2 var(--f-titulo); display: block; margin: 2px 0 4px; }
.ec-gift p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); } .ec-gift em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.ec-start b { color: var(--sol); font-size: 24px; }

.ec-own { margin-top: 16px; padding: 14px; border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, rgba(86,209,139,.16), rgba(18,20,40,0) 60%), #141830; border: 1px solid rgba(86,209,139,.45); }
.ec-url { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 99px; background: #fff; color: #1b1d27; font: 600 14px var(--f-texto); box-shadow: 0 10px 26px -14px rgba(0,0,0,.7); } .ec-url svg { width: 16px; height: 16px; color: #188038; flex: none; } .ec-url span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-url i { font-style: normal; font-size: 11px; font-weight: 800; color: #0d6b2d; background: #d6f5e0; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.ec-ownh { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; } .ec-key { font-size: 26px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(255,181,71,.4)); } .ec-ownh b { font: 800 18px var(--f-titulo); }
.ec-own ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 7px; } .ec-own li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.4; }
.ec-own li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #56D18B; color: #06240f; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.ec-own small { color: var(--tinta-2); font-size: 12px; }

.enc-inph { position: absolute; z-index: 9; left: 50%; bottom: 4.6em; translate: -50% 0; display: flex; align-items: center; gap: .5em; padding: .55em 1em .55em .7em; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: linear-gradient(100deg, #FFB547, #FF6A3D); color: #170904; font: 700 3.5cqw/1.1 var(--f-texto); cursor: pointer; box-shadow: 0 .8em 1.8em -.5em rgba(255,106,61,.8); animation: inph-late 2.6s ease-in-out infinite; white-space: nowrap; }
.enc-inph[hidden] { display: none; } .enc-inph b { font-weight: 800; } .enc-inph small { font-size: .85em; font-weight: 700; background: rgba(23,9,4,.16); padding: .2em .6em; border-radius: 99px; }
@keyframes inph-late { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.28em); } }
.enc-capa:not([data-vista="web"]) ~ .enc-inph { bottom: 1.2em; }
.ec-tl { list-style: none; margin: 18px 18px 0; padding: 0; display: grid; gap: 0; } .ec-tl li { display: flex; gap: 14px; position: relative; padding-bottom: 16px; } .ec-tl li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: rgba(255,255,255,.15); }
.ec-tl li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--f-titulo); background: rgba(255,255,255,.1); } .ec-tl li.hecho > span { background: #56D18B; color: #06240f; }
.ec-tl b { display: block; font-size: 15px; } .ec-tl small { color: var(--tinta-2); font-size: 13px; line-height: 1.4; }
.ec-lista { margin: 6px 18px 0; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .ec-lista b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sol); } .ec-lista ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }

@media (min-width: 980px) {
  .enc-aj { max-width: 600px; margin: 16px 0 0; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .enc-aj .aj-t, .enc-aj > small, .enc-aj .aj-go, .enc-aj .aj-f:nth-of-type(4) { grid-column: 1 / -1; }
}

.aj-link input { min-height: 46px; border-radius: 12px; border: 1px dashed rgba(255,181,71,.6); background: rgba(10,11,22,.7); color: var(--tinta); font: 500 14px var(--f-texto); padding: 0 12px; width: 100%; } .aj-link input:focus-visible { outline: 2px solid var(--sol); } .aj-link input[aria-invalid] { border-color: #FF5A4D; }
.aj-link > span { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--tinta); } .aj-link small { color: var(--tinta-2); font-size: 12px; }
@media (min-width: 980px) { .enc-aj .aj-link { grid-column: 1 / -1; } }

/* Tiempo récord: cronómetro, pie fijo con el botón de enviar y material por WhatsApp */
.ec-cab { align-items: center; } .ec-cab > div { flex: 1; } .ec-crono { flex: none; padding: 6px 11px; border-radius: 99px; background: rgba(255,181,71,.16); border: 1px solid rgba(255,181,71,.5); font: 700 13px var(--f-texto); color: var(--sol); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ec-pie { position: sticky; bottom: 0; margin: 14px 0 0 !important; padding: 12px 18px 14px; background: linear-gradient(180deg, rgba(18,20,40,0), #121428 22%); border-top: 1px solid rgba(255,255,255,.1); z-index: 2; }
.ec-pie-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; } .ec-pie-t b { font: 800 22px var(--f-titulo); color: var(--sol); } .ec-pie .ec-bts { margin-top: 0; grid-template-columns: 1.4fr 1fr; } .ec-pie .btn { min-height: 48px; justify-content: center; padding: 0 12px; font-size: 14px; }
@media (max-width: 460px) { .ec-pie .ec-bts { grid-template-columns: 1fr; } }
.ec-rec { display: flex; align-items: center; gap: 12px; margin: 16px 18px 0 !important; padding: 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(86,209,139,.18), rgba(255,181,71,.14)); border: 1px solid rgba(86,209,139,.5); } .ec-rec span { font-size: 28px; } .ec-rec b { font: 800 19px/1.2 var(--f-titulo); }
.ec-mats { margin: 14px 18px 0 !important; display: grid; gap: 8px; } .ec-mats > b { font-size: 14px; line-height: 1.4; } .ec-mats small { color: var(--tinta-2); font-size: 12.5px; text-align: center; } .ec-mats .btn { justify-content: center; }
.aj-ok { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--tinta-2); text-transform: none; letter-spacing: 0; font-weight: 500; } .aj-ok[hidden] { display: none; } .aj-ok input { margin-top: 2px; width: 18px; height: 18px; accent-color: #FF7A3D; flex: none; }

.ec-mail { display: grid; gap: 6px; margin: 14px 18px 0; font-size: 13.5px; font-weight: 600; } .ec-mail input { min-height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,11,22,.7); color: var(--tinta); font: 500 15px var(--f-texto); padding: 0 12px; width: 100%; } .ec-mail input:focus-visible { outline: 2px solid var(--sol); } .ec-mail small { color: var(--tinta-2); font-weight: 400; font-size: 12px; }
.ec-pay { justify-content: center; width: 100%; margin-bottom: 6px; min-height: 52px; } .ec-pay[hidden], .ec-payt[hidden] { display: none; } .ec-payt { display: block; text-align: center; color: var(--tinta-2); font-size: 12px; margin-bottom: 8px; }

/* Regalos que se ven como regalos */
.ec-gift { display: grid; gap: 10px; flex-direction: initial; position: relative; padding: 14px; border: 1.5px solid #FFB547; background: linear-gradient(135deg, rgba(255,181,71,.2), rgba(180,75,255,.16)); overflow: hidden; }
.ec-gift::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); animation: brillo-ac 5s ease-in-out 1s infinite; pointer-events: none; }
.ec-gh { display: flex; align-items: center; gap: 8px; } .ec-gh b { font: 800 13px var(--f-texto); letter-spacing: .09em; text-transform: uppercase; color: var(--sol); } .ec-lazo { font-size: 22px; animation: rebota 3.2s ease-in-out infinite; }
.ec-gi2 { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(10,11,22,.55); border: 1px dashed rgba(255,181,71,.55); } .ec-gi2 > div { flex: 1; padding-right: 4px; }
.ec-gi2 b { display: block; font: 800 15.5px/1.2 var(--f-titulo); color: #fff; } .ec-gi2 p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); } .ec-gi2 em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.ec-tag { position: absolute; top: -9px; right: 10px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: linear-gradient(100deg, #FFB547, #FF6A3D); color: #170904; box-shadow: 0 4px 12px -4px rgba(255,106,61,.8); } .ec-val { background: linear-gradient(100deg, #56D18B, #2DD4BF); box-shadow: 0 4px 12px -4px rgba(45,212,191,.8); }
.ec-pie { background: #121428 !important; box-shadow: 0 -16px 16px -6px rgba(18,20,40,.96); }

.ec-ref { display: flex; gap: 12px; align-items: flex-start; margin: 14px 18px 0 !important; padding: 14px; border-radius: 16px; background: rgba(180,75,255,.12); border: 1px solid rgba(180,75,255,.5); } .ec-ref > span { font-size: 28px; } .ec-ref b { display: block; font: 800 16px var(--f-titulo); } .ec-ref p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }

/* Paletas de lujo: degradado y toque champán */
.aj-sw { flex-wrap: wrap; gap: 8px; } .aj-sw button { width: 32px; height: 32px; background: linear-gradient(135deg, var(--c), var(--c2)); } .aj-pn { font-style: normal; font-size: 12.5px; color: var(--sol); font-weight: 700; }
.ew-bts .p, .ew-banda .p, .ew-dock .p, .ea-b { background: linear-gradient(135deg, var(--ac), var(--ac2, var(--ac))) !important; }
.ew-ini, .ew-pasos li > span { background: linear-gradient(135deg, var(--ac), var(--ac2, var(--ac))); }
.ew h3 em { background: linear-gradient(100deg, var(--ac), var(--ac2, var(--ac))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ew-sec > small, .ew-rate > b { color: var(--tq, var(--ac)); } .ew-rate { border-color: color-mix(in srgb, var(--tq, #fff) 55%, transparent); }
.ew-hero::before { content: ""; position: absolute; left: .9em; top: 0; width: 3.2em; height: 3px; background: linear-gradient(90deg, var(--tq, var(--ac)), transparent); z-index: 2; }
.ew-card { border-color: color-mix(in srgb, var(--tq, #fff) 22%, transparent); } .ew-ico { background: color-mix(in srgb, var(--ac) 22%, #15171F); }
.ew-banda { background: linear-gradient(130deg, color-mix(in srgb, var(--ac) 42%, #10122a), color-mix(in srgb, var(--ac2, var(--ac)) 22%, #1b1536)); border: 1px solid color-mix(in srgb, var(--tq, #fff) 40%, transparent); }

/* Color de acción: el botón principal contrasta con la marca (aislamiento visual) */
.ew-bts .p, .ew-banda .p, .ew-dock .p, .ea-b { background: linear-gradient(135deg, var(--ax, var(--ac)), var(--ax2, var(--ac2, var(--ac)))) !important; color: var(--inkx, var(--ink, #15110c)) !important; box-shadow: 0 .7em 1.8em -.7em var(--ax, var(--ac)); }
.ew-bts .p::after { box-shadow: 0 0 0 0 var(--ax, var(--ac)); }
@keyframes pulso-ac { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ax, var(--ac)) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 .9em transparent; } }

/* Vistas previas de los regalos (colores del cliente) */
.ec-pv { flex: none; width: 62px; } .ec-pv i { display: block; font-style: normal; }
.pv-card { position: relative; width: 62px; padding: 6px; border-radius: 8px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--ac, #8B5CF6), var(--ac2, #C4A6FF)); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.pv-card b { display: block; font: 800 7px/1.15 var(--f-titulo, inherit); margin-bottom: 4px; overflow: hidden; max-height: 16px; }
.pv-qr { display: block; width: 34px; height: 34px; margin: 0 auto 3px; padding: 2px; background: #fff; border-radius: 4px; border: 1.5px solid var(--tq, #E8C987); } .pv-qr svg { width: 100%; height: 100%; display: block; fill: #10121f; }
.pv-card small { display: block; font-size: 5.5px; font-weight: 800; color: var(--inkx, #10121f); background: var(--ax, var(--tq, #E8C987)); border-radius: 99px; padding: 1.5px 0; }
.pv-post { width: 62px; aspect-ratio: 4/5; padding: 7px 5px; border-radius: 8px; display: flex !important; flex-direction: column; justify-content: center; gap: 3px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--ac, #8B5CF6), var(--ac2, #C4A6FF)); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.pv-post small { font-size: 6px; font-weight: 800; color: var(--tq, #E8C987); } .pv-post b { font: 800 9px/1.1 var(--f-titulo, inherit); overflow: hidden; max-height: 30px; } .pv-post em { font-size: 5.5px; font-weight: 800; align-self: center; padding: 1.5px 6px; border-radius: 99px; color: var(--inkx, #10121f); background: var(--ax, var(--tq, #E8C987)); }
.pv-post u { display: none; }
.hero .reels .pv-ig { position: relative; width: auto; aspect-ratio: auto; grid-column: span 3; min-height: 74px; padding: 8px; border-radius: 6px; box-shadow: none; text-decoration: none; }
.hero .reels .pv-ig small { font-size: 1.9cqw; } .hero .reels .pv-ig b { font-size: 4.2cqw; max-height: none; } .hero .reels .pv-ig em { font-size: 1.9cqw; padding: .4cqw 2cqw; }
.hero .reels .pv-ig u { display: block; font-size: 1.8cqw; font-weight: 700; text-decoration: none; opacity: .92; }

/* Trabajos: mosaico, antes y después, tira de detalles */
.ew-gal { grid-template-columns: 1fr 1fr; } .ew-gal figure.gr { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .ew-gal figure { aspect-ratio: 1 / 1; }
.ew-ad { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; } .ew-ad figure { margin: 0; position: relative; border-radius: .9em; overflow: hidden; aspect-ratio: 4 / 5; } .ew-ad i { display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; }
.ew-ad figcaption { position: absolute; left: .6em; top: .6em; font-size: .68em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(10,11,16,.75); padding: .35em .8em; border-radius: 99px; } .ew-ad figcaption.d { background: var(--ax, var(--ac)); color: var(--inkx, #10121f); }
.ew-tira { display: flex; gap: .5em; overflow-x: auto; scrollbar-width: none; margin: 0 -.9em; padding: 0 .9em; } .ew-tira::-webkit-scrollbar { display: none; }
.ew-tira figure { flex: none; width: 62%; margin: 0; position: relative; border-radius: .9em; overflow: hidden; aspect-ratio: 4 / 5; } .ew-tira i { display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; }
.ew-tira figcaption { position: absolute; left: .6em; bottom: .6em; font-size: .72em; font-weight: 700; background: rgba(10,11,16,.7); backdrop-filter: blur(6px); padding: .35em .75em; border-radius: 99px; }

.eg-tira { display: flex; gap: .25em; margin-top: .25em; overflow: hidden; border-radius: .8em; } .eg-tira i { flex: 1; aspect-ratio: 1; background: center / cover no-repeat #dfe3ea; } .eg-tira span { display: none; }

/* Portada: red de las Américas (puntos que se conectan con luz suave). El fondo de luz anterior queda guardado en assets/luz.js */
.luz-fallback { background: radial-gradient(55% 55% at 80% 42%, rgba(91,108,255,.20), transparent 70%), radial-gradient(40% 35% at 72% 85%, rgba(255,106,61,.14), transparent 70%), radial-gradient(35% 30% at 62% 12%, rgba(180,75,255,.14), transparent 70%); }
.hero canvas[data-red] { transition: opacity 1.8s ease; }
.hero::after { background: linear-gradient(90deg, rgba(10,11,22,.90) 0%, rgba(10,11,22,.45) 46%, rgba(10,11,22,0) 74%), linear-gradient(0deg, var(--noche) 0%, transparent 22%); }
/* Celular: el texto deja libre la columna derecha para el mapa de puntos (como el diseño aprobado) */
@media (max-width: 560px) { .hero .lead { max-width: 76%; } .hero .eyebrow { max-width: 74%; } }

.enc-aj .aj-open { width: 100%; margin-top: 10px; } .enc-aj .aj-oh { display: block; margin: 6px 2px 10px; font-size: 12px; color: var(--tinta-2, #b8b5c8); text-align: center; }
.enc-aj a.aj-open.btn { display: flex; width: 100%; white-space: nowrap; justify-content: center; }

/* Botón "Abrir página completa" dentro del teléfono, encima de "Reservar" */
.enc-inph2 { position: absolute; z-index: 9; left: 50%; bottom: 8.6em; translate: -50% 0; display: flex; align-items: center; gap: .45em; padding: .5em 1em; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: rgba(14,15,30,.78); backdrop-filter: blur(8px); color: #fff; font-size: .74em; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 .5em 1.4em -.4em rgba(0,0,0,.6); }
.enc-inph2[hidden] { display: none; } .enc-capa:not([data-vista="web"]) ~ .enc-inph2 { bottom: 4.9em; }