/*
 * Atenciones Web · atencionesweb.com — ESTILOS
 * Desarrollado por Autorys · https://autorys.com · sales@autorys.com
 * (c) Autorys. Todos los derechos reservados.
 *
 * [Autorys · Sitio de Atenciones Web 2026-10-03]
 * Índice:  1) Letras y colores   2) Base   3) Botones y piezas   4) Barra de navegación
 *          5) Héroe y escena animada   6) Franja   7) Secciones de la portada
 *          8) Páginas interiores (encabezado, puntos, planes, tablas)   9) Preguntas
 *          10) Llamada final y pie   11) Globo de contacto   12) Aparición al bajar
 *          13) Celular   14) Menos movimiento
 */

/* ---------- 1) Letras (alojadas aquí) y colores ---------- */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "InterTight"; src: url("fonts/intertight.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* [Autorys · 3-oct] Paleta del LOGO de Atenciones Web: azul eléctrico sobre negro */
  --tinta: #02040E;       /* negro azulado: fondo de héroe y pie (como el fondo del logo) */
  --tinta-2: #070D24;
  --tinta-3: #0C1638;
  --azul: #1A47FF;        /* azul del logo: botones y acentos (contraste AA con blanco) */
  --azul-claro: #5B8CFF;  /* azul claro sobre fondo oscuro */
  --azul-hondo: #0A2BB8;  /* fondo de degradados */
  --cian: #0068C9;        /* acento frío para texto sobre claro */
  --cian-claro: #4FD1FF;  /* destello cian sobre oscuro */
  --hielo: #9FD8FF;
  --crema: #F3F6FF;       /* fondo claro de secciones (azulado) */
  --papel: #FFFFFF;
  --texto: #0E1530;
  --texto-2: #4A5370;
  --claro-2: #A9B6DA;     /* texto secundario sobre fondo oscuro */
  --linea: #E1E7F5;
  --radio: 18px;
  --radio-g: 28px;
  --sombra: 0 1px 2px rgba(2,4,14,.06), 0 12px 32px -12px rgba(2,4,14,.18);
  --sombra-g: 0 30px 80px -20px rgba(2,4,14,.55);
  --brillo: 0 0 40px rgba(26,71,255,.55), 0 0 90px rgba(26,71,255,.25);
  --titulos: "Bricolage", "InterTight", system-ui, sans-serif;
  --cuerpo: "InterTight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1200px;
}

/* ---------- 2) Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font: 400 17px/1.65 var(--cuerpo); color: var(--texto); background: var(--papel); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--azul); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 650; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--papel); color: var(--tinta); padding: 10px 16px; border-radius: 10px; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--hielo); outline-offset: 3px; border-radius: 6px; }
.ic { flex: none; }
.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.contenedor--angosto { width: min(820px, 100% - 40px); }
.seccion { padding: clamp(70px, 9vw, 120px) 0; }
.seccion--suave { background: var(--crema); }
.kicker { display: inline-block; font: 700 .78rem/1 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin-bottom: 16px; }
.kicker--claro { color: var(--azul-claro); }
.titular { max-width: 760px; margin-bottom: 48px; }
.titular p { color: var(--texto-2); font-size: 1.1rem; }
.titular--centro { margin-inline: auto; text-align: center; }

/* ---------- 3) Botones y piezas ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 650 1rem/1.1 var(--cuerpo); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--azul); color: #fff; box-shadow: 0 10px 30px -10px rgba(26,71,255,.9), 0 0 24px rgba(26,71,255,.35); }
.btn--primario:hover { background: #0F33D6; box-shadow: 0 16px 40px -12px rgba(26,71,255,.8); }
.btn--claro { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--claro:hover { background: rgba(255,255,255,.16); }
.btn--fantasma { background: transparent; color: var(--tinta); border-color: #B9C5E0; }
.btn--fantasma:hover { border-color: var(--tinta); }
.btn--chico { min-height: 42px; padding: 8px 18px; font-size: .95rem; }
.btn--grande { min-height: 56px; padding: 16px 30px; font-size: 1.05rem; }
.lista-check { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check .ic { color: var(--cian); margin-top: 3px; }
.lista-check--clara { color: #DCE1F2; }
.lista-check--clara b { color: #fff; }
.lista-check--clara .ic { color: var(--cian-claro); }

/* ---------- 4) Barra de navegación ---------- */
.barra { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.barra.con-fondo, .interior .barra.con-fondo { background: rgba(2,4,14,.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.barra__in { width: min(1280px, 100% - 32px); margin-inline: auto; height: 76px; display: flex; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font: 700 1.28rem/1 var(--titulos); letter-spacing: -.03em; }
.marca b { font-weight: 700; color: var(--azul-claro); margin-left: .1em; font-size: .62em; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 0 14px rgba(26,71,255,.9); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 10px 12px; border-radius: 10px; color: #D9DEF0; text-decoration: none; font-weight: 550; font-size: .97rem; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.nav__acc { display: flex; gap: 10px; }
.nav__acc .btn--fantasma { color: #fff; border-color: rgba(255,255,255,.3); }
.barra__menu { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: transparent; cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.barra__menu span:not(.sr) { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }

/* ---------- 5) Héroe y escena animada ---------- */
.heroe, .cabeza { position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: #fff; }
.heroe { padding: 150px 0 110px; min-height: min(100vh, 920px); display: flex; align-items: center; }
.heroe__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aura { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aura--1 { width: 620px; height: 620px; left: -160px; top: -200px; background: radial-gradient(circle, #1A47FF 0%, transparent 65%); animation: flotar 16s ease-in-out infinite alternate; }
.aura--2 { width: 700px; height: 700px; right: -220px; bottom: -280px; background: radial-gradient(circle, #0090FF 0%, transparent 65%); animation: flotar 19s ease-in-out infinite alternate-reverse; }
.rejilla { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
@keyframes flotar { to { transform: translate(80px, 60px) scale(1.12); } }
.heroe__in { width: min(1280px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.insignia { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .9rem; color: #E3E7F5; margin-bottom: 26px; }
.insignia__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--cian-claro); box-shadow: 0 0 0 0 rgba(79,209,255,.7); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(79,209,255,0); } 100% { box-shadow: 0 0 0 0 rgba(79,209,255,0); } }
.brillo { display: block; background: linear-gradient(92deg, var(--azul-claro) 0%, var(--hielo) 45%, var(--cian-claro) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe__lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: #C9D0E8; max-width: 600px; margin-bottom: 34px; }
.heroe__lead b { color: #fff; }
.heroe__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.heroe__datos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--claro-2); font-size: .95rem; }
.heroe__datos li { display: flex; align-items: center; gap: 8px; }
.heroe__datos .ic { color: var(--cian-claro); }

/* Escena: tarjetas que flotan */
.escena { position: relative; height: 600px; perspective: 1400px; }
.escena__logo { position: absolute; left: 62%; top: 30%; width: 135%; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: 1; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); pointer-events: none; }
.marca img { filter: drop-shadow(0 0 10px rgba(26,71,255,.75)); }
.tarjeta { position: absolute; background: rgba(255,255,255,.97); color: var(--texto); border-radius: 22px; box-shadow: var(--sombra-g); }
.tarjeta--wa { width: 300px; left: -20px; top: 40px; padding: 18px; background: #EEF2FA; transform: rotate(-4deg); animation: flota-a 9s ease-in-out infinite; }
.tarjeta__cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #DCE3F2; }
.tarjeta__cab b { display: block; font-size: .95rem; }
.tarjeta__cab small { color: var(--cian); font-size: .78rem; font-weight: 600; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--hielo), var(--azul)); color: #fff; font: 700 .85rem/1 var(--cuerpo); }
.burbuja { max-width: 86%; margin: 0 0 8px; padding: 9px 13px; border-radius: 14px; font-size: .86rem; line-height: 1.4; opacity: 0; transform: translateY(8px); animation: aparece .5s ease forwards; }
.burbuja--in { background: #fff; border-top-left-radius: 4px; }
.burbuja--out { background: #D6E4FF; margin-left: auto; border-top-right-radius: 4px; }
.burbuja:nth-of-type(1) { animation-delay: .4s; } .burbuja:nth-of-type(2) { animation-delay: 1.3s; }
.burbuja:nth-of-type(3) { animation-delay: 2.3s; } .burbuja:nth-of-type(4) { animation-delay: 3.4s; }
@keyframes aparece { to { opacity: 1; transform: none; } }
.escribiendo { display: inline-flex; gap: 4px; padding: 10px 12px; margin: 0; background: #fff; border-radius: 14px; }
.escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: #9AA0B4; animation: puntitos 1.2s infinite; }
.escribiendo span:nth-child(2) { animation-delay: .15s; } .escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes puntitos { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.tarjeta--cfdi { width: 340px; right: 0; top: 215px; padding: 22px; transform: rotate(3deg); animation: flota-b 10s ease-in-out infinite; z-index: 2; }
.cfdi__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cfdi__cab b { display: block; font: 700 1.1rem/1.1 var(--titulos); }
.cfdi__cab small { color: var(--texto-2); font-size: .78rem; }
.cfdi__logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 800 .9rem/1 var(--titulos); }
.cfdi__folio { margin-left: auto; font: 700 .8rem/1 var(--cuerpo); color: var(--azul); background: #E6EDFF; padding: 6px 10px; border-radius: 999px; }
.cfdi__datos { margin: 0 0 14px; display: grid; gap: 7px; font-size: .84rem; }
.cfdi__datos div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #DCE3F2; padding-bottom: 6px; }
.cfdi__datos dt { color: var(--texto-2); } .cfdi__datos dd { margin: 0; font-weight: 600; }
.cfdi__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--crema); margin-bottom: 14px; }
.cfdi__total b { font: 800 1.25rem/1 var(--titulos); }
.cfdi__pie { display: flex; gap: 12px; align-items: center; font-size: .72rem; color: var(--texto-2); }
.cfdi__pie code { font-size: .72rem; color: var(--texto); }
.cfdi__qr { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; padding: 6px; border: 1px solid #D3DBEC; border-radius: 6px; }
.cfdi__qr i { width: 12px; height: 12px; background: var(--tinta); border-radius: 2px; }
.cfdi__qr i:nth-child(2), .cfdi__qr i:nth-child(4), .cfdi__qr i:nth-child(8) { background: transparent; border: 2px solid var(--tinta); }
.sello { position: absolute; right: 16px; bottom: 12px; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--cian); color: var(--cian); display: grid; place-items: center; text-align: center; font: 800 .68rem/1.05 var(--titulos); text-transform: uppercase; letter-spacing: .03em; transform: rotate(-14deg) scale(1.6); opacity: 0; animation: sellar .5s cubic-bezier(.2,1.6,.4,1) 4.3s forwards; background: rgba(255,255,255,.75); }
.sello small { font-size: .62rem; letter-spacing: .2em; }
@keyframes sellar { to { opacity: .95; transform: rotate(-14deg) scale(1); } }

.tarjeta--kpi { width: 220px; left: 20px; bottom: 0; padding: 18px 20px; background: var(--tinta-2); color: #fff; border: 1px solid rgba(255,255,255,.12); animation: flota-a 11s ease-in-out infinite reverse; }
.tarjeta--kpi small { color: var(--claro-2); display: block; font-size: .78rem; }
.tarjeta--kpi b { font: 800 1.6rem/1.2 var(--titulos); }
.kpi__sube { margin-left: 8px; color: var(--cian-claro); font-size: .82rem; font-weight: 700; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 10px; }
.barras i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(var(--azul-claro), var(--azul)); transform-origin: bottom; animation: crecer 1.2s cubic-bezier(.2,.8,.2,1) both; }
.barras i:nth-child(1) { height: 35%; } .barras i:nth-child(2) { height: 48%; animation-delay: .1s; } .barras i:nth-child(3) { height: 42%; animation-delay: .2s; }
.barras i:nth-child(4) { height: 60%; animation-delay: .3s; } .barras i:nth-child(5) { height: 72%; animation-delay: .4s; } .barras i:nth-child(6) { height: 66%; animation-delay: .5s; }
.barras i:nth-child(7) { height: 92%; animation-delay: .6s; background: linear-gradient(var(--cian-claro), var(--cian)); }
@keyframes crecer { from { transform: scaleY(0); } }
@keyframes flota-a { 50% { transform: rotate(-3deg) translateY(-12px); } }
@keyframes flota-b { 50% { transform: rotate(2deg) translateY(-14px); } }

/* ---------- 6) Franja de confianza ---------- */
.franja { background: var(--tinta-2); color: #DCE1F2; border-top: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.franja__lista { list-style: none; margin: 0 auto; padding: 22px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; max-width: 1280px; font-weight: 550; font-size: .95rem; }
.franja__lista li { display: flex; align-items: center; gap: 9px; }
.franja__lista .ic { color: var(--azul-claro); }

/* ---------- 7) Secciones de la portada ---------- */
.antes-despues { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; }
.ad { border-radius: var(--radio-g); padding: 34px; }
.ad ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ad li { display: flex; gap: 10px; align-items: flex-start; }
.ad__t { font: 700 .8rem/1 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.ad--antes { background: var(--crema); color: var(--texto-2); border: 1px dashed #C9D4EA; }
.ad--antes li { text-decoration: line-through; text-decoration-color: rgba(26,71,255,.55); text-decoration-thickness: 2px; }
.ad--antes li::before { content: "✕"; color: var(--azul); font-weight: 700; text-decoration: none; display: inline-block; }
.ad--despues { background: var(--tinta); color: #E6EAF7; box-shadow: var(--sombra-g); }
.ad--despues .ad__t { color: var(--cian-claro); }
.ad--despues .ic { color: var(--cian-claro); margin-top: 3px; }
.ad__flecha { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; box-shadow: 0 10px 30px -10px rgba(26,71,255,.8); }

.estrella { background: var(--tinta); color: #fff; position: relative; overflow: hidden; }
.estrella::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -300px; background: radial-gradient(circle, rgba(26,71,255,.28), transparent 60%); pointer-events: none; }
.estrella__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; position: relative; }
.estrella__lead { color: #C9D0E8; font-size: 1.12rem; }
.pasos-cfdi { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; counter-reset: p; }
.pasos-cfdi li { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .3s ease, background-color .3s ease; }
.pasos-cfdi li:hover { transform: translateX(6px); background: rgba(255,255,255,.1); }
.pasos-cfdi span { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 800 1.1rem/1 var(--titulos); background: linear-gradient(135deg, var(--azul), #0A2BB8); }
.pasos-cfdi li:last-child span { background: linear-gradient(135deg, var(--cian), #0072E0); }
.pasos-cfdi b { display: block; font-size: 1.05rem; }
.pasos-cfdi small { color: var(--claro-2); font-size: .9rem; }
.estrella__nota { display: flex; gap: 10px; align-items: flex-start; color: var(--claro-2); font-size: .9rem; }
.estrella__nota .ic { color: var(--cian-claro); margin-top: 2px; }

.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.servicio { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px; border-radius: var(--radio-g); background: var(--papel); border: 1px solid var(--linea); text-decoration: none; color: var(--texto); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; overflow: hidden; }
.servicio::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(26,71,255,.12), transparent 70%); transition: transform .5s ease; }
.servicio:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: transparent; }
.servicio:hover::after { transform: scale(1.6); }
.servicio__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--azul), #0A2BB8); margin-bottom: 10px; }
.servicio--crm .servicio__ic { background: linear-gradient(135deg, #1A47FF, #00A3FF); }
.servicio--chat .servicio__ic { background: linear-gradient(135deg, #0B5CFF, #0090FF); }
.servicio--web .servicio__ic { background: linear-gradient(135deg, #3F7BFF, #1A47FF); }
.servicio--nube .servicio__ic { background: linear-gradient(135deg, #0072E0, #0A2BB8); }
.servicio--todo { background: var(--crema); }
.servicio--todo .servicio__ic { background: var(--tinta); }
.servicio__k { font: 700 .74rem/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.servicio__t { font: 700 1.45rem/1.15 var(--titulos); letter-spacing: -.02em; }
.servicio__d { color: var(--texto-2); font-size: .97rem; flex: 1; }
.servicio__p { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--azul); margin-top: 8px; }
.servicio:hover .servicio__p .ic { transform: translateX(4px); }
.servicio__p .ic { transition: transform .3s ease; }

.tres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tres li { padding: 34px; border-radius: var(--radio-g); background: var(--papel); box-shadow: var(--sombra); }
.tres__n { display: block; font: 800 3rem/1 var(--titulos); background: linear-gradient(135deg, var(--azul), var(--cian-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.tres p { color: var(--texto-2); margin: 0; }

.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.planes--uno { grid-template-columns: minmax(0, 560px); justify-content: center; }
.planes--dos { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.planes--cuatro { grid-template-columns: repeat(4, 1fr); margin-bottom: 34px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 32px 28px; border-radius: var(--radio-g); background: var(--papel); border: 1px solid var(--linea); }
.plan h3 { margin-bottom: 4px; }
.plan .btn { margin-top: auto; }
.plan--destacado { background: var(--tinta); color: #fff; border-color: transparent; box-shadow: var(--sombra-g); }
.plan--destacado .plan__para, .plan--destacado .plan__anual { color: var(--claro-2); }
.plan__cinta { position: absolute; top: -14px; left: 28px; margin: 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, var(--azul), #0A2BB8); color: #fff; font: 700 .75rem/1 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; }
.plan__para { color: var(--texto-2); font-size: .95rem; margin: 0; }
.plan__precio { margin: 14px 0 0; font-size: 1rem; color: inherit; }
.plan__precio b { font: 800 2.7rem/1 var(--titulos); letter-spacing: -.03em; }
.plan__anual { color: var(--texto-2); font-size: .9rem; margin-bottom: 18px; }
.plan__lista { list-style: none; padding: 0; margin: 4px 0 22px; display: grid; gap: 10px; font-size: .95rem; }
.plan__lista li { display: flex; gap: 10px; align-items: flex-start; }
.plan__lista .ic { color: var(--cian); margin-top: 3px; }
.plan--destacado .plan__lista .ic { color: var(--cian-claro); }
.plan__sub { margin-top: 18px; }
.nota-precios { text-align: center; color: var(--texto-2); font-size: .93rem; max-width: 760px; margin: 28px auto 0; }
.nota-precios--grande { font-size: 1.05rem; margin-bottom: 36px; }

.giros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.giros li { padding: 24px 26px; border-radius: 20px; background: var(--papel); border: 1px solid var(--linea); display: grid; gap: 4px; transition: transform .3s ease, box-shadow .3s ease; }
.giros li:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.giros b { font: 700 1.1rem/1.2 var(--titulos); }
.giros span { color: var(--texto-2); font-size: .95rem; }

/* ---------- 8) Páginas interiores ---------- */
.cabeza { padding: 150px 0 90px; }
.cabeza__in { max-width: 900px; }
.cabeza__ic { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul), #0A2BB8); margin-bottom: 22px; box-shadow: 0 16px 40px -14px rgba(26,71,255,.8); }
.cabeza h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cabeza__lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #C9D0E8; max-width: 720px; margin-bottom: 30px; }
.migas { font-size: .9rem; color: var(--claro-2); margin-bottom: 28px; }
.migas a { color: #E3E7F5; }
.saltos { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.saltos a { display: inline-block; padding: 10px 18px; border-radius: 999px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.saltos a:hover { background: rgba(255,255,255,.14); }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.puntos li { padding: 28px; border-radius: 22px; border: 1px solid var(--linea); background: var(--papel); transition: transform .3s ease, box-shadow .3s ease; }
.puntos li:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.puntos__n { display: block; font: 800 .9rem/1 var(--titulos); color: var(--azul); margin-bottom: 14px; letter-spacing: .06em; }
.puntos h3 { font-size: 1.15rem; }
.puntos p { color: var(--texto-2); margin: 0; font-size: .97rem; }
.pronto { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 860px; }
.pronto li { display: flex; gap: 12px; align-items: center; padding: 18px 22px; border-radius: 16px; background: var(--crema); border: 1px dashed #C9D4EA; font-weight: 550; }
.pronto .ic { color: var(--hielo); fill: rgba(159,216,255,.35); }
.tabla-env { overflow-x: auto; border-radius: 22px; border: 1px solid var(--linea); background: var(--papel); }
.tabla { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabla caption { text-align: left; padding: 20px 24px 6px; font: 700 1.2rem/1.2 var(--titulos); }
.tabla th, .tabla td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { font: 700 .76rem/1 var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); background: var(--crema); }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tbody tr:hover { background: #F7F9FF; }
.tabla tbody th { font-weight: 650; }
.tabla small { display: block; font-weight: 400; color: var(--texto-2); font-size: .85rem; }
.tabla td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.aviso-lanz { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 22px; background: linear-gradient(120deg, #EEF3FF, #F5FAFF); border: 1px solid #CBD8FF; }
.aviso-lanz div { font-size: 1.05rem; }

/* ---------- 9) Preguntas frecuentes ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--linea); border-radius: 18px; background: var(--papel); transition: box-shadow .3s ease; }
.faq details[open] { box-shadow: var(--sombra); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font: 650 1.05rem/1.4 var(--cuerpo); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 24px 22px; margin: 0; color: var(--texto-2); }

/* ---------- 10) Llamada final y pie ---------- */
.final { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #0A1E7A 0%, var(--tinta) 60%); color: #fff; text-align: center; padding: clamp(80px, 10vw, 130px) 20px; }
.final::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(26,71,255,.18), transparent 30%, rgba(0,144,255,.18), transparent 60%); animation: girar 24s linear infinite; will-change: transform; }
@keyframes girar { to { transform: rotate(360deg); } }
.final__in { position: relative; max-width: 820px; margin-inline: auto; }
.final__logo { width: 136px; height: auto; margin: 0 auto 26px; filter: drop-shadow(0 0 18px rgba(26,71,255,.9)) drop-shadow(0 0 50px rgba(26,71,255,.5)); }
.final h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.final p { color: #C9D0E8; font-size: 1.12rem; }
.final__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.pie { background: #010208; color: var(--claro-2); font-size: .95rem; }
.pie__in { width: min(var(--ancho), 100% - 40px); margin-inline: auto; padding: 70px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie a { color: #DCE1F2; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__baja a { text-decoration: underline; }
.pie__t { color: #fff; font: 700 .8rem/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.pie__marca p { margin: 16px 0 0; max-width: 320px; }
.pie__mx { display: flex; align-items: center; gap: 8px; color: var(--cian-claro); }
.pie__canales a { display: inline-flex; align-items: center; gap: 8px; }
.pie__baja { width: min(var(--ancho), 100% - 40px); margin-inline: auto; padding: 24px 0 110px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .86rem; }
.pie__baja p { margin: 0; }

/* ---------- 11) Globo de contacto ---------- */
.globo { position: fixed; right: 20px; bottom: 20px; z-index: 150; }
.globo__btn { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--azul), #0A2BB8); box-shadow: 0 14px 34px -8px rgba(26,71,255,.8); display: grid; place-items: center; transition: transform .3s ease; }
.globo__btn:hover { transform: scale(1.07); }
.globo__pulso { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--azul-claro); animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.globo__panel { position: absolute; right: 0; bottom: 80px; width: min(380px, calc(100vw - 32px)); background: var(--papel); border-radius: 24px; box-shadow: 0 30px 80px -10px rgba(2,4,14,.5); overflow: hidden; transform-origin: bottom right; animation: abrir .3s cubic-bezier(.2,.9,.3,1.2); }
.globo__panel[hidden] { display: none; }
@keyframes abrir { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.globo__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 18px; background: var(--tinta); color: #fff; }
.globo__t { font: 700 1.15rem/1.2 var(--titulos); margin: 0 0 4px; }
.globo__s { margin: 0; font-size: .86rem; color: var(--cian-claro); }
.globo__x { width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.globo__ops { padding: 14px; display: grid; gap: 8px; }
.globo__ops[hidden] { display: none; }
.globo__op { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto); text-decoration: none; text-align: left; cursor: pointer; font: inherit; width: 100%; transition: border-color .2s ease, transform .2s ease; }
.globo__op:hover { border-color: var(--azul); transform: translateX(3px); }
.globo__op b { display: block; font-size: 1rem; }
.globo__op small { color: var(--texto-2); font-size: .84rem; }
.globo__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; }
.globo__ic--chat { background: linear-gradient(135deg, var(--azul), #0A2BB8); }
.globo__ic--wa { background: #128C4A; }
.globo__ic--tg { background: #1F7FC1; }
.globo__chat { height: min(560px, calc(100vh - 220px)); }
.globo__chat[hidden] { display: none; }
.globo__chat iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 12) Aparición al bajar (solo con JavaScript) ---------- */
.js .revela { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.js .revela.vis { opacity: 1; transform: none; }

/* ---------- 13) Celular y tableta ---------- */
@media (max-width: 1080px) {
  .heroe__in, .estrella__in { grid-template-columns: 1fr; }
  .escena { height: 520px; max-width: 560px; width: 100%; margin-inline: auto; }
  .servicios, .planes, .giros { grid-template-columns: repeat(2, 1fr); }
  .planes--cuatro { grid-template-columns: repeat(2, 1fr); }
  .pie__in { grid-template-columns: 1fr 1fr; }
  .barra__menu { display: flex; }
  .nav { position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px 24px; background: rgba(2,4,14,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; max-height: calc(100vh - 76px); overflow-y: auto; }
  .nav ul { flex-direction: column; }
  .nav ul a { padding: 14px 12px; font-size: 1.05rem; }
  .nav__acc { flex-direction: column; }
  .menu-abierto .nav { opacity: 1; visibility: visible; transform: none; }
  .menu-abierto .barra { background: rgba(2,4,14,.97); }
  .menu-abierto .barra__menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-abierto .barra__menu span:nth-child(2) { opacity: 0; }
  .menu-abierto .barra__menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .heroe { padding: 120px 0 70px; min-height: 0; }
  .escena { height: auto; padding: 10px 0 20px; }
  .tarjeta--wa, .tarjeta--kpi { display: none; }
  .escena__logo { left: 50%; top: 50%; width: 150%; }
  .tarjeta--cfdi { position: relative; inset: auto; width: min(340px, 100%); margin-inline: auto; transform: rotate(-2deg); animation: none; }
  .servicios, .planes, .planes--dos, .planes--cuatro, .giros, .tres, .pronto, .dos-col { grid-template-columns: 1fr; }
  .antes-despues { grid-template-columns: 1fr; }
  .ad__flecha { transform: rotate(90deg); margin-inline: auto; }
  .aviso-lanz { flex-direction: column; align-items: flex-start; }
  .pie__in { grid-template-columns: 1fr; gap: 30px; }
  .heroe__btns .btn, .final__btns .btn { width: 100%; }
  .cabeza { padding: 120px 0 70px; }
  .plan__cinta { left: 20px; }
}

/* ---------- 14) Menos movimiento (accesibilidad) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revela { opacity: 1; transform: none; }
}