/* ==========================================================================
   STPT · Soluciones Tecnológicas Para Todos
   Diseño limpio y profesional: tecnología + educación.
   Paleta basada en el logotipo. Para cambiar colores edita SOLO :root.
   ========================================================================== */
:root {
  /* Marca */
  --blue: #0a6fb8;          /* azul principal (botones, enlaces) */
  --blue-dark: #085a96;
  --cyan: #1cb4e8;          /* cian del logotipo (acentos) */
  --orange: #f48543;        /* naranja del logotipo (llamadas a la acción) */
  --orange-ink: #b04e0e;    /* naranja para texto sobre blanco */
  --steel: #4c6f80;         /* gris azulado del logotipo */

  /* Neutros */
  --navy: #0f2440;          /* texto principal y secciones oscuras */
  --navy-2: #163256;
  --text: #0f2440;
  --text-soft: #55657a;
  --line: #e2eaf1;
  --bg: #ffffff;
  --bg-soft: #f4f8fb;
  --tint-blue: #e8f4fc;
  --tint-orange: #fef1e8;
  --tint-steel: #ebf1f4;
  --wa: #25d366;

  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(2.75rem, 2.1rem + 2.8vw, 4.25rem);
  --header-h: 74px;
  --radius: 18px;
  --shadow-sm: 0 1px 3px rgba(15, 36, 64, .06), 0 4px 12px -6px rgba(15, 36, 64, .08);
  --shadow: 0 18px 40px -20px rgba(15, 36, 64, .28);
  --shadow-lg: 0 34px 70px -30px rgba(15, 36, 64, .4);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; color: inherit; }
p { margin: 0 0 1em; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
[hidden] { display: none !important; }
.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 400; padding: .7rem 1rem; background: var(--navy); color: #fff; font-weight: 700; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.led { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* ---------- Pantalla de carga ---------- */
.loader { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 1.2rem; background: #fff; transition: opacity .5s ease, visibility 0s .5s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.no-js .loader, html:not(.js) .loader { display: none; }
.loader-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.loader-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -30deg, var(--cyan) 0 60deg, transparent 60deg 120deg, var(--steel) 120deg 180deg, transparent 180deg 240deg, var(--orange) 240deg 300deg, transparent 300deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); animation: spin 1.2s linear infinite; }
.loader-text { margin: 0; font-weight: 800; font-style: italic; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); }
@keyframes loaderPulse { 50% { transform: scale(.88); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tipografía ---------- */
.h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.hl { color: var(--blue); }
.hl-o { background: linear-gradient(90deg, #f48543 0%, #f48543 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h1 .hl { display: block; background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .hl { color: var(--cyan); }
.dark .hl-o { background: linear-gradient(90deg, #ffb27a, #f48543); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; margin-bottom: 1rem; border-radius: 999px; background: var(--tint-blue); color: var(--blue-dark); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.dark .pill { background: rgba(28, 180, 232, .14); color: #8fdcf7; }
.sub { font-size: clamp(1rem, .96rem + .25vw, 1.12rem); color: var(--text-soft); max-width: 40em; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); color: #b8c7d6; max-width: 36em; }
.head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.head .h2 { margin-bottom: .35em; }
.head-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem 3rem; align-items: end; }
.head-row .sub { margin: 0; }
.head-center { text-align: center; }
.head-center .sub, .head-center .lead { margin-inline: auto; }
@media (max-width: 860px) { .head-row { grid-template-columns: 1fr; } }

/* ---------- Icono con arco (detalle del logotipo) ---------- */
.ricon { --g: linear-gradient(135deg, #3cc8f5 0%, #1592d6 50%, #0a6fb8 100%); --sh: rgba(10, 111, 184, .55); position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; color: #fff; background: var(--g); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 8px rgba(0, 0, 0, .12), 0 10px 20px -8px var(--sh); }
.ricon::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from -30deg, var(--cyan) 0 60deg, transparent 60deg 120deg, var(--steel) 120deg 180deg, transparent 180deg 240deg, var(--orange) 240deg 300deg, transparent 300deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); opacity: .9; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ricon .icon { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.ri-blue { --g: linear-gradient(135deg, #3cc8f5 0%, #1592d6 50%, #0a6fb8 100%); --sh: rgba(10, 111, 184, .55); }
.ri-orange { --g: linear-gradient(135deg, #ffad6b 0%, #f47b2a 50%, #f07a36 100%); --sh: rgba(244, 123, 42, .55); }
.ri-steel { --g: linear-gradient(135deg, #8bb3c6 0%, #4c6f80 55%, #2f4b58 100%); --sh: rgba(76, 111, 128, .55); }
.ricon-lg { width: 66px; height: 66px; } .ricon-lg .icon { width: 30px; height: 30px; }
a:hover .ricon::before, .card:hover .ricon::before, .profile:hover .ricon::before { transform: rotate(120deg); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .7rem 1.35rem; border: 1.5px solid transparent; border-radius: 12px; font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn-lg { min-height: 54px; padding: .85rem 1.6rem; font-size: 1.02rem; }
.btn-sm { min-height: 42px; padding: .5rem 1rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn .icon { transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(10, 111, 184, .9); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-orange { background: linear-gradient(135deg, #f8955a 0%, #f48543 55%, #f07a36 100%); color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(150, 60, 10, .45); box-shadow: 0 12px 24px -12px rgba(244, 133, 67, .9); }
.btn-orange:hover { background: linear-gradient(135deg, #f48543 0%, #ee7430 100%); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); }
.btn-white .i-wa { color: #16a34a; }
.btn-outline { background: #fff; color: var(--navy); border-color: #cdd9e4; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-outline .i-wa { color: #16a34a; }
.btn-ghost { background: transparent; color: var(--navy); border-color: #cdd9e4; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-wa { background: linear-gradient(135deg, #179c4c 0%, #12803d 100%); color: #fff; box-shadow: 0 12px 24px -12px rgba(18, 128, 61, .8); }
.btn-wa:hover { background: linear-gradient(135deg, #12803d 0%, #0e6b33 100%); transform: translateY(-2px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Barra superior ---------- */
.topbar { background: var(--navy); color: #b8c7d6; font-size: .83rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.tb-status { display: flex; align-items: center; gap: .55rem; margin: 0; }
.tb-contact { display: flex; align-items: center; gap: 1.25rem; }
.tb-contact a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font-weight: 600; }
.tb-contact a:hover { color: var(--cyan); }
.tb-contact .icon { width: 15px; height: 15px; color: var(--cyan); }
.tb-wa { padding: .2rem .7rem; border-radius: 8px; background: var(--wa); color: #053b1c !important; }
.tb-wa .icon { color: #053b1c !important; }
@media (max-width: 860px) { .tb-status { display: none; } .topbar-inner { justify-content: center; } }
@media (max-width: 520px) { .tb-contact li[data-requires="correo"] { display: none !important; } }

/* ---------- Encabezado ---------- */
.site-header { position: sticky; top: 0; z-index: 80; height: var(--header-h); background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--scroll, 0%); background: linear-gradient(90deg, var(--cyan), var(--steel), var(--orange)); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-iso { height: 50px; width: auto; }
.brand-txt { height: 38px; width: auto; }
.nav-panel { display: flex; align-items: center; gap: 1.1rem; }
.nav-list { display: flex; gap: .1rem; }
.nav-list a { position: relative; display: block; padding: .5rem .7rem; font-weight: 600; font-size: .93rem; color: var(--text); text-decoration: none; border-radius: 8px; }
.nav-list a:hover { color: var(--blue); background: var(--bg-soft); }
.nav-list a[aria-current="true"] { color: var(--blue); }
.nav-list a[aria-current="true"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--orange); }
.nav-toggle { display: none; }
@media (max-width: 1120px) { .nav-panel .social { display: none !important; } }
@media (max-width: 1120px) {
  .nav-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); cursor: pointer; }
  .nav-toggle .icon { width: 24px; height: 24px; }
  .nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
  .nav-panel { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 1.1rem; padding: 1rem var(--gutter) 1.5rem; background: #fff; box-shadow: 0 30px 50px -20px rgba(15, 36, 64, .35); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .nav-panel.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .nav-panel .social { display: flex !important; justify-content: center; }
  .nav-list { flex-direction: column; }
  .nav-list a { padding: .95rem .25rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-list a[aria-current="true"]::after { display: none; }
}
@media (max-width: 400px) { .brand-iso { height: 42px; } .brand-txt { height: 31px; } }

/* Redes sociales */
.social { display: flex; flex-wrap: wrap; gap: .45rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; text-decoration: none; transition: transform .2s, background-color .2s, color .2s; }
.social .icon { width: 18px; height: 18px; }
.social a:hover { transform: translateY(-2px); }
.social-brand a { width: 44px; height: 44px; border-radius: 12px; color: #fff; background: var(--b); }
.social-brand .icon { width: 21px; height: 21px; }
.s-whatsapp { --b: var(--wa); } .s-facebook { --b: #1877f2; } .s-instagram { --b: #e1306c; } .s-tiktok { --b: #000; } .s-youtube { --b: #ff0000; } .s-linkedin { --b: #0a66c2; }
.social-brand a { border-radius: 50%; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.social-brand a:hover { filter: brightness(1.08); }
.social-brand .s-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ---------- Portada ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f6fafd 0%, #fff 100%); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(10, 111, 184, .12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 75% 40%, #000 15%, transparent 65%); mask-image: radial-gradient(ellipse at 75% 40%, #000 15%, transparent 65%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; }
.b1 { width: 420px; height: 420px; right: 4%; top: -60px; background: #bfe8fa; }
.b2 { width: 300px; height: 300px; right: 26%; bottom: 40px; background: #fdd9bf; }
.b3 { width: 260px; height: 260px; left: -80px; top: 30%; background: #dbe7ee; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding: clamp(2.75rem, 2rem + 4vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.hero-copy .pill { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--navy); }
.hero .h1 { margin-bottom: .5em; color: var(--navy); }
.hero-lead strong { color: var(--text); }
.hero-lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--text-soft); max-width: 34em; margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.6rem; }

/* Isotipo en 3D */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 460px; perspective: 1000px; }
.orbit-stage { --size: min(420px, 82vw); position: relative; width: var(--size); height: var(--size); display: grid; place-items: center; }
.orbit { position: absolute; border-radius: 50%; border: 1.5px dashed #c4d6e3; }
.o1 { inset: 0; }
.o2 { inset: 20%; border-style: solid; border-color: #dbe7ef; }
.iso-3d { position: relative; width: 44%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.iso-inner { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #f3f8fc 60%, #e4eef6 100%); box-shadow: 0 30px 60px -20px rgba(15, 36, 64, .35), inset 0 -10px 24px rgba(15, 36, 64, .06), inset 0 8px 16px #fff; animation: isoFloat 6s ease-in-out infinite; transform-style: preserve-3d; overflow: hidden; }
.iso-shine { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%); background-size: 250% 100%; animation: shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes isoFloat { 50% { transform: translateY(-12px); } }
@keyframes isoTurn { 0%, 100% { transform: translateZ(40px) rotateY(-14deg); } 50% { transform: translateZ(40px) rotateY(14deg); } }
@keyframes shine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.sat-ring { position: absolute; inset: 0; animation: spin 40s linear infinite; }
.sat-ring.r-in { inset: 20%; animation-duration: 28s; animation-direction: reverse; }
.sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--size) / -2)); }
.r-in .sat { transform: rotate(var(--a)) translateY(calc(var(--size) * -.3)); }
.sat-in { position: absolute; left: -26px; top: -26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); animation: spin 40s linear infinite reverse; }
.r-in .sat-in { animation-duration: 28s; animation-direction: normal; }
.sat-in .icon { width: 24px; height: 24px; transform: rotate(calc(var(--a) * -1)); }
.sat-in.sm { left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 13px; }
.sat-in.sm .icon { width: 20px; height: 20px; }
.sat-in.c-blue { background: linear-gradient(135deg, #3cc8f5, #0a6fb8); } .sat-in.c-orange { background: linear-gradient(135deg, #ffad6b, #f07a36); } .sat-in.c-steel { background: linear-gradient(135deg, #8bb3c6, #2f4b58); }
.sat-in { color: #fff !important; border: 2px solid #fff !important; }
.float-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem .7rem .7rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.25; animation: isoFloat 7s ease-in-out infinite; }
.float-badge b { display: block; }
.float-badge small { color: var(--text-soft); font-size: .78rem; }
.float-badge .ricon { width: 40px; height: 40px; } .float-badge .ricon .icon { width: 20px; height: 20px; }
.fb1 { left: 0; top: 12%; }
.fb2 { right: 0; bottom: 10%; animation-delay: -3s; }

/* Módulos */
.modules { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.modules a { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.modules a:hover { border-color: rgba(10, 111, 184, .45); transform: translateY(-3px); box-shadow: var(--shadow); }
.modules b { display: block; font-size: .97rem; }
.modules small { display: block; color: var(--text-soft); font-size: .8rem; }
.modules .go { margin-left: auto; width: 18px; height: 18px; color: var(--blue); transition: transform .2s; }
.modules a:hover .go { transform: translateX(3px); }
.modules .ricon { width: 46px; height: 46px; } .modules .ricon .icon { width: 22px; height: 22px; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; padding: 1.5rem 0; }
  .modules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; white-space: normal; }
  .modules { grid-template-columns: 1fr; }
  .float-badge { font-size: .8rem; padding: .5rem .7rem .5rem .5rem; }
  .float-badge small { display: none; }
  .fb1 { top: 2%; } .fb2 { bottom: 2%; }
  .sat-in { left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 13px; }
  .sat-in .icon { width: 20px; height: 20px; }
}

/* ---------- Secciones ---------- */
.section { position: relative; padding: var(--section-y) 0; }
.blueprint { background: var(--bg-soft); }
.dark { color: #fff; background: radial-gradient(700px 420px at 100% 0%, rgba(28, 180, 232, .2), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(244, 123, 42, .12), transparent 60%), var(--navy); overflow: hidden; }

/* ---------- Diagnóstico ---------- */
.diag { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.25rem; align-items: start; }
.diag-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 20px; color: #fff; background: radial-gradient(500px 260px at 100% 0%, rgba(28, 180, 232, .25), transparent 60%), var(--navy); box-shadow: var(--shadow-lg); overflow: hidden; }
.diag-scan { position: absolute; inset: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(28, 180, 232, .16), transparent); transform: translateY(-100%); pointer-events: none; }
.diag-panel.is-scanning .diag-scan { animation: scan .7s ease-out; }
@keyframes scan { to { transform: translateY(260%); } }
.diag-label { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: #b8c7d6; margin-bottom: 1rem; }
.diag-title { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); font-weight: 800; color: #fff; }
.diag-text { color: #cdd8e3; }
.diag-steps { display: grid; gap: .55rem; margin: 1.25rem 0 1.75rem; counter-reset: d; }
.diag-steps li { counter-increment: d; display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: .95rem; }
.diag-steps li::before { content: counter(d); display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #f48543; color: #fff; font-weight: 800; font-size: .78rem; }
.diag-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.diag-panel .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.diag-panel .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
@media (max-width: 900px) { .diag { grid-template-columns: 1fr; } .diag-panel { position: relative; top: 0; } }

/* ---------- Servicios ---------- */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .4rem; margin-bottom: 1.5rem; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); }
.tabs [role="tab"] { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .6rem .9rem; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.tabs [role="tab"] .icon { width: 19px; height: 19px; color: var(--steel); }
.tabs [role="tab"] .led { display: none; }
.tabs [role="tab"]:hover { color: var(--blue); }
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.tabs [role="tab"][aria-selected="true"] .icon { color: var(--blue); }
@media (max-width: 900px) { .tabs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .tabs [role="tab"] { font-size: .86rem; padding: .5rem; } }
.js .tab-panel[hidden] { display: none; }
.tab-panel { outline: none; }
.tab-panel + .tab-panel { margin-top: 1.5rem; }
.js .tab-panel + .tab-panel { margin-top: 0; }
.tab-panel.is-entering .card { animation: cardIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.tab-panel.is-entering .card:nth-child(2) { animation-delay: .05s; } .tab-panel.is-entering .card:nth-child(3) { animation-delay: .1s; }
.tab-panel.is-entering .card:nth-child(4) { animation-delay: .15s; } .tab-panel.is-entering .card:nth-child(5) { animation-delay: .2s; } .tab-panel.is-entering .card:nth-child(6) { animation-delay: .25s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(28, 180, 232, .1), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(10, 111, 184, .35); }
.card-top { margin-bottom: 1.1rem; }
.card h4 { font-size: 1.15rem; font-weight: 800; margin-bottom: .3rem; }
.card > p { color: var(--text-soft); font-size: .95rem; }
.checks { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.checks li { position: relative; padding-left: 1.55rem; font-size: .93rem; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--tint-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230a6fb8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.card-link { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.card-link .icon { width: 1em; height: 1em; transition: transform .2s; }
.card-link:hover .icon { transform: translateX(4px); }
.card-cta { justify-content: center; color: #fff; background: radial-gradient(360px 220px at 100% 0%, rgba(28, 180, 232, .35), transparent 60%), var(--navy); border: 0; }
.card-cta > * { position: relative; z-index: 1; }
.card-cta .cta-k { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fdcf7; margin-bottom: .5rem; }
.card-cta .cta-t { color: #fff; font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin-bottom: .6rem; }
.card-cta p:not(.cta-t):not(.cta-k) { color: #cdd8e3; font-size: .95rem; }
.card-cta .btn { align-self: flex-start; }
.card-wide { grid-column: span 2; }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } .card-wide { grid-column: auto; } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Educación ---------- */
.edu-arcs { position: absolute; right: -240px; top: 50%; width: 600px; aspect-ratio: 1; transform: translateY(-50%); opacity: .14; pointer-events: none; }
.edu-arcs i { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 40px)); mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 40px)); animation: spin 80s linear infinite; }
.edu-arcs i:nth-child(1) { background: conic-gradient(from -30deg, var(--cyan) 0 60deg, transparent 60deg); }
.edu-arcs i:nth-child(2) { background: conic-gradient(from 90deg, #a9c3d0 0 60deg, transparent 60deg); }
.edu-arcs i:nth-child(3) { background: conic-gradient(from 210deg, var(--orange) 0 60deg, transparent 60deg); }
.edu-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.edu-grid .lead { margin-bottom: 1.75rem; }
.edu-stack { display: grid; gap: .8rem; }
.edu-item { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .25s, background-color .25s; }
.edu-item:hover { border-color: rgba(28, 180, 232, .55); background: rgba(255, 255, 255, .09); }
.edu-item h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: .2rem; }
.edu-item p { margin: 0; color: #b8c7d6; font-size: .94rem; }
.edu-n { position: absolute; top: 1rem; right: 1.1rem; font-size: .8rem; font-weight: 800; color: #f9a066; }
@media (max-width: 900px) { .edu-grid { grid-template-columns: 1fr; } }

/* ---------- Perfiles ---------- */
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.profile { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem 1.75rem 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.profile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(10, 111, 184, .35); }
.profile .ricon { margin-bottom: 1.2rem; }
.profile h3 { font-size: 1.35rem; font-weight: 800; }
.profile p { color: var(--text-soft); flex: 1; }
.profile-go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--blue); }
.profile-go .icon { width: 1em; height: 1em; transition: transform .2s; }
.profile:hover .profile-go .icon { transform: translateX(4px); }
@media (max-width: 900px) { .profiles { grid-template-columns: 1fr; } }

/* ---------- Por qué STPT ---------- */
.why-sec { background: var(--bg-soft); }
.why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.why-brand { padding: clamp(1.75rem, 4vw, 3rem); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.why-brand img { width: 100%; height: auto; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.why-list li { display: flex; gap: .9rem; align-items: flex-start; }
.why-list .ricon { width: 46px; height: 46px; } .why-list .ricon .icon { width: 22px; height: 22px; }
.why-list strong { display: block; margin-bottom: .15rem; }
.why-list p { margin: 0; color: var(--text-soft); font-size: .94rem; line-height: 1.5; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } .why-brand { max-width: 460px; } }
@media (max-width: 560px) { .why-list { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
#preguntas { background: #fff; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-grid .head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq-list { display: grid; gap: .6rem; }
.faq-list details { border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.faq-list details[open] { border-color: rgba(10, 111, 184, .4); box-shadow: var(--shadow); }
.faq-list summary { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-q { display: none; }
.faq-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; margin-left: auto; border-radius: 50%; background: var(--tint-blue); color: var(--blue); transition: transform .25s, background-color .25s, color .25s; }
.faq-ic .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.faq-list details[open] .faq-ic { transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq-body { padding: 0 1.2rem 1.2rem; color: var(--text-soft); }
.faq-body p { margin: 0; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .head { position: static; } }

/* ---------- Cotizador ---------- */
.quote { background: linear-gradient(180deg, var(--bg-soft), #eaf4fb); }
.quote-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.25rem; align-items: start; }
.quote-steps { display: grid; gap: 1rem; }
.qstep { padding: 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.qstep legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; font-weight: 800; font-size: 1.08rem; }
.qstep legend small { font-weight: 500; font-size: .85rem; color: var(--text-soft); }
.qstep legend + * { clear: both; }
.qn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .85rem; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-soft); color: var(--text); font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.chip span .icon { width: 19px; height: 19px; color: var(--steel); }
.chip:hover span { border-color: var(--blue); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip input:checked + span .icon { color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.field { margin-bottom: .9rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .9rem; }
.req { color: var(--orange-ink); }
.opt { font-weight: 500; color: var(--text-soft); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: .75rem .9rem; font-size: 1rem; color: var(--text); background: var(--bg-soft); border: 1.5px solid #d3dfe9; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 111, 184, .15); }
.field ::placeholder { color: #8a97a8; }
.field [aria-invalid="true"] { border-color: #dc2626; background: #fff6f6; }
.field-error { margin: .35rem 0 0; font-size: .88rem; font-weight: 600; color: #b91c1c; }
.field-error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qp-actions { display: grid; gap: .6rem; }
.form-status { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; font-size: .93rem; line-height: 1.5; }
.form-status p { margin: 0; }
.form-status.is-success { background: #e8f9ee; color: #14532d; border: 1px solid #a7e3bd; }
.form-status.is-error { background: #fdecec; color: #8a1c14; border: 1px solid #f5b5b5; }
.form-status.is-info { background: var(--tint-blue); color: #08466f; border: 1px solid #b9dcf3; }
.quote-channels { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.quote-channels > li > a { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-weight: 700; }
.quote-channels > li > a:hover { color: var(--blue); }
.quote-channels > li > a .icon { width: 20px; height: 20px; color: var(--blue); }
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr; } .quote-preview { position: relative; top: 0; } }

/* ---------- Pie ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--navy); color: #b8c7d6; padding: clamp(3rem, 5vw, 4rem) 0 1.5rem; font-size: .93rem; }
.footer-arc { position: absolute; left: -160px; bottom: -260px; width: 520px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from -30deg, var(--cyan) 0 60deg, transparent 60deg 120deg, #a9c3d0 120deg 180deg, transparent 180deg 240deg, var(--orange) 240deg 300deg, transparent 300deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 36px), #000 calc(100% - 36px)); mask: radial-gradient(farthest-side, transparent calc(100% - 36px), #000 calc(100% - 36px)); opacity: .12; pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-logo { display: inline-block; padding: 12px 16px; border-radius: 14px; background: #fff; margin-bottom: 1rem; }
.footer-logo img { width: 180px; height: auto; }
.f-title { margin-bottom: .9rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.site-footer ul:not(.social) { display: grid; gap: .5rem; }
.site-footer nav a, .footer-contact a, .footer-bottom a, .footer-bottom .link-btn { display: inline-flex; align-items: center; gap: .5rem; color: #dbe5ee; text-decoration: none; }
.site-footer nav a:hover, .footer-contact a:hover, .footer-bottom a:hover, .footer-bottom .link-btn:hover { color: #f9a066; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--cyan); }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; font-size: .86rem; }
.footer-bottom p { margin: 0; }
.fb-links { display: inline-flex; flex-wrap: wrap; gap: 1.25rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Cookies ---------- */
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; display: flex; align-items: center; gap: 1.25rem; max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: up .4s ease-out; }
.cookie-text p { margin: 0; font-size: .9rem; color: var(--text-soft); }
.cookie-text .cookie-title { margin-bottom: .2rem; font-weight: 800; color: var(--text); font-size: 1rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; flex: none; }
@keyframes up { from { transform: translateY(20px); opacity: 0; } }
@media (max-width: 860px) { .cookie-bar { flex-direction: column; align-items: stretch; } .cookie-actions { margin: 0; } .cookie-actions .btn { flex: 1; } }
.cookie-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(15, 36, 64, .55); backdrop-filter: blur(4px); }
.cookie-box { width: min(540px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.75rem; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); }
.ck-title { font-size: 1.35rem; font-weight: 800; }
.ck-intro { color: var(--text-soft); font-size: .93rem; }
.ck-opt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.ck-opt p { margin: .15rem 0 0; color: var(--text-soft); font-size: .88rem; }
.ck-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.switch { position: relative; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span:first-of-type { display: block; width: 46px; height: 26px; border-radius: 26px; background: #cbd6e0; transition: background-color .2s; }
.switch span:first-of-type::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .6; cursor: not-allowed; }
.switch input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

/* WhatsApp flotante */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .35); transition: transform .2s, bottom .3s; }
.wa-float::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--wa); opacity: 0; animation: ping 2.4s infinite; }
@keyframes ping { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.wa-float .icon { width: 30px; height: 30px; }
.wa-float:hover { transform: translateY(-3px); }
.has-cookie-bar .wa-float { bottom: 150px; }
@media (max-width: 860px) { .has-cookie-bar .wa-float { bottom: 260px; } }

/* Aparición */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Redes: tamaños ---------- */
.social-xs a { width: 28px; height: 28px; } .social-xs .icon { width: 15px; height: 15px; }
.social-sm a { width: 36px; height: 36px; } .social-sm .icon { width: 18px; height: 18px; }
.topbar .social { gap: .4rem; }
@media (max-width: 860px) { .topbar-inner { justify-content: space-between; } }

/* ---------- Botones flotantes ---------- */
.float-stack { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .6rem; transition: bottom .3s; }
.float-stack .wa-float { position: relative; right: auto; bottom: auto; }
.social-float { flex-direction: column; gap: .55rem; }
.social-float .s-whatsapp { display: none; }
.social-float a { width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--b); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .4); }
.social-float .s-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-float .icon { width: 21px; height: 21px; }
.has-cookie-bar .float-stack { bottom: 150px; }
@media (max-width: 860px) { .has-cookie-bar .float-stack { bottom: 260px; } .social-float a { width: 42px; height: 42px; } }
.has-cookie-bar .wa-float { bottom: auto; }
.to-top { position: fixed; left: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; border: 2px solid #fff; box-shadow: 0 12px 24px -10px rgba(15, 36, 64, .6); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s, background-color .2s; }
.to-top.is-on { opacity: 1; transform: none; }
.to-top:hover { background: var(--blue-dark); }
.to-top .icon { width: 22px; height: 22px; }
.has-cookie-bar .to-top { display: none; }

/* ---------- Banner CTA ---------- */
.cta-wrap { padding: 0 0 var(--section-y); background: #fff; }
.cta-banner { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2.25rem; align-items: center; padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem); border-radius: 28px; color: #fff; overflow: hidden; background: radial-gradient(500px 260px at 100% 0%, rgba(60, 200, 245, .55), transparent 60%), linear-gradient(120deg, #0a3f73 0%, #0a6fb8 55%, #1592d6 100%); box-shadow: 0 40px 70px -35px rgba(10, 111, 184, .8); }
.cta-arcs { position: absolute; right: -120px; bottom: -180px; width: 420px; aspect-ratio: 1; opacity: .25; pointer-events: none; }
.cta-arcs i { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 34px)); mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 34px)); animation: spin 50s linear infinite; }
.cta-arcs i:nth-child(1) { background: conic-gradient(from -30deg, #fff 0 60deg, transparent 60deg); }
.cta-arcs i:nth-child(2) { background: conic-gradient(from 90deg, #a9c3d0 0 60deg, transparent 60deg); }
.cta-arcs i:nth-child(3) { background: conic-gradient(from 210deg, var(--orange) 0 60deg, transparent 60deg); }
.cta-copy { position: relative; }
.cta-copy .h2 { color: #fff; margin-bottom: .3em; }
.cta-copy p { margin: 0; color: #e3f1fb; font-size: 1.08rem; }
.cta-actions { position: relative; display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 960px) { .cta-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .cta-actions { justify-content: center; } }
@media (max-width: 520px) { .cta-actions, .cta-actions .btn { width: 100%; } }

/* ---------- Más color en tarjetas ---------- */
.card { border-top: 4px solid var(--accent, var(--blue)); }
.card:has(.ri-orange) { --accent: var(--orange); }
.card:has(.ri-steel) { --accent: var(--steel); }
.card-cta { border-top: 0; }
.profile { border-top: 4px solid var(--blue); }
.profile:has(.ri-orange) { border-top-color: var(--orange); }
.profile:has(.ri-steel) { border-top-color: var(--steel); }
.b1 { opacity: .75; background: #9fdcf7; } .b2 { opacity: .6; background: #fcc39b; }

/* ====================== v9 ====================== */
/* Isotipo vectorial */
.brand-iso { height: 50px; width: auto; aspect-ratio: 632 / 676; }
.loader-iso { width: 66px; height: 66px; animation: loaderPulse 1.4s ease-in-out infinite; }
.iso-svg { width: 66%; height: 66%; transform: translateZ(40px); filter: drop-shadow(0 12px 14px rgba(15, 36, 64, .22)); animation: isoTurn 10s ease-in-out infinite; }
.iso-glow { position: absolute; inset: -18%; border-radius: 50%; background: conic-gradient(from -30deg, rgba(28, 180, 232, .45) 0 60deg, transparent 60deg 120deg, rgba(76, 111, 128, .4) 120deg 180deg, transparent 180deg 240deg, rgba(244, 133, 67, .45) 240deg 300deg, transparent 300deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px)); mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px)); animation: spin 18s linear infinite; }

/* Mosaicos pequeños de color */
.mini-tile { --g: linear-gradient(135deg, #3cc8f5, #0a6fb8); display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; color: #fff; background: var(--g); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px rgba(15, 36, 64, .45); }
.mini-tile .icon { width: 21px; height: 21px; }
.mt-blue { --g: linear-gradient(135deg, #3cc8f5, #0a6fb8); }
.mt-orange { --g: linear-gradient(135deg, #ffad6b, #f07a36); }
.mt-steel { --g: linear-gradient(135deg, #8bb3c6, #2f4b58); }
.mt-ai { --g: linear-gradient(135deg, #c084fc 0%, #7c3aed 55%, #5b21b6 100%); }
.ri-ai { --g: linear-gradient(135deg, #c084fc 0%, #7c3aed 55%, #5b21b6 100%); --sh: rgba(124, 58, 237, .55); }
.sat-in.c-ai { background: linear-gradient(135deg, #c084fc, #6d28d9); }
.card:has(.ri-ai) { --accent: #7c3aed; }
.profile:has(.ri-ai) { border-top-color: #7c3aed; }

/* Portada */
.hero-trust { display: flex; flex-wrap: wrap; justify-content: start; gap: .75rem 1.5rem; margin-bottom: 1.4rem; }
.hero-trust li { display: flex; align-items: center; gap: .65rem; font-size: .85rem; color: var(--text-soft); line-height: 1.3; }
.hero-trust b { display: block; color: var(--text); font-size: .92rem; }
.hero-trust .mini-tile { width: 38px; height: 38px; border-radius: 11px; } .hero-trust .mini-tile .icon { width: 19px; height: 19px; }
.plat-link { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem .9rem .5rem .5rem; border-radius: 14px; background: #fff; border: 1px solid #e4dafb; color: var(--text); text-decoration: none; font-size: .92rem; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s; }
.plat-link b { color: #6d28d9; }
.plat-link .mini-tile { width: 34px; height: 34px; border-radius: 10px; } .plat-link .mini-tile .icon { width: 18px; height: 18px; }
.plat-link .go { width: 18px; height: 18px; color: #6d28d9; transition: transform .2s; }
.plat-link:hover { border-color: #7c3aed; transform: translateY(-2px); }
.plat-link:hover .go { transform: translateX(3px); }
@media (max-width: 760px) { .hero-trust { grid-template-columns: 1fr; } }
.btn-plat { background: #fff; color: #5b21b6; border-color: #d9c8fb; }
.btn-plat .icon { color: #7c3aed; }
.btn-plat:hover { border-color: #7c3aed; background: #f6f1ff; transform: translateY(-2px); }
.btn-plat:hover .icon { transform: none; }
.nav-panel .social { display: none !important; }
@media (max-width: 1120px) { .nav-plat { order: 3; } .nav-panel .social { display: flex !important; } }

/* Diagnóstico */
.diag { grid-template-columns: 1.1fr .9fr; }
.diag-list { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.diag-opt { position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem .9rem; text-align: left; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; color: var(--text); font-weight: 600; font-size: .93rem; line-height: 1.35; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s, box-shadow .2s, background-color .2s; }
.diag-opt:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.diag-opt .do-txt { flex: 1; }
.diag-opt .do-txt small { display: block; margin-bottom: .1rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.diag-opt .do-arrow { width: 18px; height: 18px; color: #b5c3d1; transition: transform .2s, color .2s; }
.diag-opt[aria-pressed="true"] { border-color: var(--blue); background: linear-gradient(135deg, #eef7fd, #fff); box-shadow: 0 0 0 3px rgba(10, 111, 184, .14), var(--shadow); }
.diag-opt[aria-pressed="true"] .do-arrow { color: var(--blue); transform: translateX(3px); }
.diag-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.diag-head .diag-label { margin: 0; }
.diag-ic { width: 50px; height: 50px; border-radius: 14px; } .diag-ic .icon { width: 25px; height: 25px; }
@media (max-width: 1100px) { .diag { grid-template-columns: 1fr; } .diag-panel { position: relative; top: 0; } }
@media (max-width: 620px) { .diag-list { grid-template-columns: 1fr; } }

/* Proceso */
.pipeline { --p: 0; position: relative; padding-top: 40px; }
.pipe-track { position: absolute; left: 12.5%; right: 12.5%; top: 12px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #d6e2ec 0 10px, transparent 10px 18px); }
.pipe-fill { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--orange), #7c3aed); box-shadow: 0 0 12px rgba(28, 180, 232, .6); transition: width .2s linear; }
.pipe-dot { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 0 0 6px rgba(244, 133, 67, .22); transition: left .2s linear; }
.pipe-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pipe-card { position: relative; height: 100%; padding: 1.4rem 1.3rem 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-align: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.pipe-step.is-on .pipe-card { border-color: rgba(10, 111, 184, .3); box-shadow: var(--shadow); }
.pipe-card:hover { transform: translateY(-6px); }
.pipe-num { position: absolute; top: .9rem; right: 1rem; font-size: 2rem; font-weight: 800; line-height: 1; color: #eef3f7; }
.pipe-ic { width: 64px; height: 64px; margin: 0 auto 1rem; transform: scale(.85); transition: transform .4s cubic-bezier(.2, .8, .2, 1.4); }
.pipe-ic .icon { width: 28px; height: 28px; }
.pipe-step.is-on .pipe-ic { transform: scale(1); }
.pipe-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .35rem; }
.pipe-card p { color: var(--text-soft); font-size: .93rem; margin: 0 0 1rem; }
.pipe-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--bg-soft); color: var(--text); font-size: .78rem; font-weight: 700; }
.pipe-tag .icon { width: 14px; height: 14px; color: var(--blue); }
@media (max-width: 960px) {
  .pipe-track { left: 31px; right: auto; top: 30px; bottom: 30px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, #d6e2ec 0 10px, transparent 10px 18px); }
  .pipe-fill { width: 100%; height: calc(var(--p) * 100%); background: linear-gradient(180deg, var(--cyan), var(--blue), var(--orange), #7c3aed); }
  .pipe-dot { left: 50%; top: calc(var(--p) * 100%); }
  .pipe-steps { grid-template-columns: 1fr; gap: 1rem; }
  .pipe-card { display: grid; grid-template-columns: 64px 1fr; gap: 0 1rem; text-align: left; align-items: start; }
  .pipe-ic { grid-row: span 3; margin: 0; }
  .pipe-tag { justify-self: start; }
}

/* Banner CTA: isotipo centrado */
.cta-iso { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 255, 255, .15); animation: isoFloat 6s ease-in-out infinite; }
.cta-iso svg { width: 70%; height: 70%; }

/* Vista previa: celular con WhatsApp */
.quote-preview { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; justify-items: center; gap: 1rem; }
.qp-title { margin: 0; font-weight: 800; font-size: 1rem; color: var(--text); }
.phone-wa { position: relative; width: min(330px, 100%); padding: 12px; border-radius: 44px; background: linear-gradient(145deg, #1b2a3d, #0b1522); box-shadow: 0 40px 70px -30px rgba(15, 36, 64, .6), inset 0 0 0 2px #2c3d55; }
.pw-notch { position: absolute; top: 18px; left: 50%; z-index: 2; width: 90px; height: 24px; margin-left: -45px; border-radius: 14px; background: #000; }
.pw-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 6px; border-radius: 32px 32px 0 0; background: #075e54; color: #fff; font-size: .72rem; font-weight: 700; }
.pw-sig { display: flex; align-items: flex-end; gap: 2px; }
.pw-sig i { width: 3px; border-radius: 1px; background: #fff; }
.pw-sig i:nth-child(1) { height: 4px; } .pw-sig i:nth-child(2) { height: 6px; } .pw-sig i:nth-child(3) { height: 8px; } .pw-sig i:nth-child(4) { height: 10px; }
.pw-head { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem .6rem; background: #075e54; color: #fff; }
.pw-head .icon { width: 18px; height: 18px; }
.pw-back { margin-right: -.3rem; }
.pw-av { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; }
.pw-av svg { width: 72%; height: 72%; }
.pw-name { flex: 1; min-width: 0; line-height: 1.15; }
.pw-name b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-name small { font-size: .7rem; opacity: .85; }
.pw-chat { display: flex; flex-direction: column; gap: .45rem; height: 360px; overflow-y: auto; padding: .7rem .6rem; background-color: #ece5dd; background-image: radial-gradient(rgba(7, 94, 84, .07) 1.2px, transparent 1.2px); background-size: 14px 14px; scrollbar-width: thin; }
.pw-date { align-self: center; margin: 0 0 .2rem; padding: .15rem .6rem; border-radius: 8px; background: #e1f2fb; color: #4a5a6a; font-size: .66rem; font-weight: 700; }
.pw-bubble { position: relative; max-width: 86%; padding: .45rem .6rem 1.05rem; border-radius: 10px; font-size: .82rem; line-height: 1.45; color: #111b21; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); word-break: break-word; }
.pw-in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.pw-out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; animation: bubbleIn .35s ease-out; }
@keyframes bubbleIn { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.pw-out .qp-msg { display: block; white-space: pre-wrap; }
.pw-time { position: absolute; right: .5rem; bottom: .2rem; display: inline-flex; align-items: center; gap: 2px; font-size: .62rem; color: #667781; }
.pw-ticks { width: 15px; height: 15px; color: #53bdeb; }
.pw-input { display: flex; align-items: center; gap: .45rem; padding: .5rem .5rem .7rem; border-radius: 0 0 32px 32px; background: #ece5dd; }
.pw-field { flex: 1; padding: .55rem .9rem; border-radius: 999px; background: #fff; color: #8696a0; font-size: .8rem; }
.pw-mic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #00a884; color: #fff; }
.pw-mic .icon { width: 18px; height: 18px; }
.qp-actions { width: min(330px, 100%); }
@media (max-width: 960px) { .quote-preview { position: relative; top: 0; } }
.pipe-step { position: relative; }
.pipe-step::before { content: ""; position: absolute; top: -34px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 3px solid #d6e2ec; transition: border-color .3s, background-color .3s; }
.pipe-step.is-on::before { border-color: var(--blue); background: var(--blue); }
@media (max-width: 960px) {
  .pipeline { padding-top: 0; padding-left: 40px; }
  .pipe-track { left: 12px; top: 20px; bottom: 20px; right: auto; }
  .pipe-step::before { top: 34px; left: -34px; margin: 0; }
}

/* ====================== v10 ====================== */
/* WhatsApp: verde original */
.btn-wa { background: #25d366; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .9); }
.btn-wa:hover { background: #1ebe5a; }

/* Redes: mismo tamaño en todo el sitio */
.social a, .social-xs a, .social-sm a, .social-brand a { width: 38px; height: 38px; border-radius: 50%; }
.social .icon, .social-xs .icon, .social-sm .icon, .social-brand .icon { width: 18px; height: 18px; }
.topbar-inner { min-height: 48px; }
.social-float a, .float-stack .wa-float { width: 52px; height: 52px; }
.social-float .icon, .float-stack .wa-float .icon { width: 24px; height: 24px; }
@media (max-width: 860px) { .social-float a, .float-stack .wa-float { width: 48px; height: 48px; } }

/* Pantalla de carga animada */
.loader-iso { width: 70px; height: 70px; animation: none; }
.lp { transform-origin: 0 0; opacity: 0; animation: lpIn 1.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.lp2 { animation-delay: .1s; } .lp3 { animation-delay: .2s; } .lp4 { animation-delay: .3s; } .lp5 { animation-delay: .4s; } .lp6 { animation-delay: .5s; }
@keyframes lpIn { 0% { opacity: 0; transform: scale(.6); } 30%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
.loader-bar { width: 160px; height: 4px; border-radius: 4px; background: #e6eef5; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--orange)); animation: bar 1.1s ease-in-out infinite; }
@keyframes bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* Proceso: alineación */
.pipe-track { left: calc((100% - 3.3rem) / 8); right: calc((100% - 3.3rem) / 8); }
@media (max-width: 960px) {
  .pipeline { padding: 0; }
  .pipe-track { display: none; }
  .pipe-steps { gap: 1rem; }
  .pipe-step { padding-left: 46px; }
  .pipe-step::before { top: 46px; left: 6px; width: 22px; height: 22px; margin: 0; border-width: 4px; z-index: 1; }
  .pipe-step::after { content: ""; position: absolute; left: 15px; top: 70px; bottom: calc(-1rem - 46px); width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, #d6e2ec 0 8px, transparent 8px 14px); }
  .pipe-step:last-child::after { display: none; }
  .pipe-step.is-on::after { background: linear-gradient(180deg, var(--blue), var(--cyan)); }
  .pipe-step.is-on::before { box-shadow: 0 0 0 5px rgba(10, 111, 184, .18); }
  .pipe-card { grid-template-columns: 56px 1fr; padding: 1.2rem 1.1rem; }
  .pipe-ic { width: 56px; height: 56px; }
  .pipe-ic .icon { width: 24px; height: 24px; }
  .pipe-num { font-size: 1.6rem; }
}

/* iPhone con WhatsApp */
.quote-preview { gap: .9rem; }
.iphone { position: relative; width: min(318px, 100%); aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 54px; background: linear-gradient(145deg, #8e8f93 0%, #3b3c40 18%, #2a2b2f 50%, #4a4b50 82%, #9a9ba0 100%); box-shadow: 0 0 0 1.5px #1c1d20, 0 50px 80px -40px rgba(15, 36, 64, .65), inset 0 0 2px rgba(255, 255, 255, .5); }
.iphone::before { content: ""; position: absolute; inset: 4px; border-radius: 50px; background: #000; }
.ip-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2b2f, #6a6b70); }
.ip-action { left: -3px; top: 17%; height: 4.5%; }
.ip-vol1 { left: -3px; top: 25%; height: 9%; }
.ip-vol2 { left: -3px; top: 36%; height: 9%; }
.ip-power { right: -3px; top: 29%; height: 13%; background: linear-gradient(270deg, #2a2b2f, #6a6b70); }
.ip-screen { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; border-radius: 44px; overflow: hidden; background: #efeae2; }
.ip-island { position: absolute; top: 11px; left: 50%; z-index: 3; width: 32%; height: 28px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.ip-status { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 14px 26px 0 30px; background: #f6f6f6; font-size: .8rem; font-weight: 700; color: #000; }
.ip-icons { display: flex; align-items: center; gap: 5px; }
.ip-icons .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.ip-sig { display: flex; align-items: flex-end; gap: 1.5px; }
.ip-sig i { width: 3px; border-radius: 1px; background: #000; }
.ip-sig i:nth-child(1) { height: 4px; } .ip-sig i:nth-child(2) { height: 6px; } .ip-sig i:nth-child(3) { height: 8px; } .ip-sig i:nth-child(4) { height: 10px; }
.ip-bat { position: relative; width: 23px; height: 11px; padding: 1.5px; border: 1.3px solid rgba(0, 0, 0, .45); border-radius: 3.5px; }
.ip-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0, 0, 0, .45); }
.ip-bat i { display: block; width: 80%; height: 100%; border-radius: 1.5px; background: #000; }
.wa-head { display: flex; align-items: center; gap: .5rem; padding: .3rem .75rem .55rem .5rem; background: #f6f6f6; border-bottom: 1px solid #e2e2e2; color: #007aff; }
.wa-head .icon { width: 20px; height: 20px; color: #007aff; }
.wa-av { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e5e5e5; }
.wa-av svg { width: 72%; height: 72%; }
.wa-name { flex: 1; min-width: 0; line-height: 1.15; color: #000; }
.wa-name b { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-name small { font-size: .68rem; color: #8a8a8e; }
.wa-chat { flex: 1; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .55rem; overflow-y: auto; background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, .045) 1.1px, transparent 1.1px), radial-gradient(rgba(0, 0, 0, .03) 1.1px, transparent 1.1px); background-size: 16px 16px, 16px 16px; background-position: 0 0, 8px 8px; scrollbar-width: none; }
.wa-day { align-self: center; margin: 0; padding: .15rem .6rem; border-radius: 8px; background: #fff; color: #54656f; font-size: .66rem; font-weight: 600; box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
.wa-sec { align-self: center; max-width: 90%; margin: 0; padding: .3rem .6rem; border-radius: 8px; background: #fff5c4; color: #54656f; font-size: .62rem; text-align: center; }
.wa-bubble { position: relative; max-width: 86%; padding: .4rem .55rem 1rem; border-radius: 8px; font-size: .8rem; line-height: 1.42; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); word-break: break-word; }
.wa-in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa-out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; animation: bubbleIn .35s ease-out; }
.wa-in::before, .wa-out::before { content: ""; position: absolute; top: 0; width: 8px; height: 10px; }
.wa-in::before { left: -7px; background: linear-gradient(225deg, #fff 50%, transparent 50%); }
.wa-out::before { right: -7px; background: linear-gradient(135deg, #d9fdd3 50%, transparent 50%); }
.wa-out .qp-msg { display: block; white-space: pre-wrap; }
.wa-time { position: absolute; right: .45rem; bottom: .18rem; display: inline-flex; align-items: center; gap: 2px; font-size: .6rem; color: #667781; }
.wa-ticks { width: 14px; height: 14px; color: #53bdeb; stroke-width: 2.4; }
.wa-input { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem .35rem; background: #f6f6f6; border-top: 1px solid #e2e2e2; color: #007aff; }
.wa-input .icon { width: 20px; height: 20px; }
.wa-field { flex: 1; padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 1px solid #e2e2e2; color: #8a8a8e; font-size: .76rem; }
.wa-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #25d366; color: #fff; }
.wa-send .icon { width: 15px; height: 15px; }
.ip-home { height: 22px; background: #f6f6f6; position: relative; }
.ip-home::after { content: ""; position: absolute; left: 50%; top: 8px; width: 36%; height: 5px; transform: translateX(-50%); border-radius: 3px; background: #000; }

/* Pie de página */
.site-footer { padding: clamp(2rem, 4vw, 3rem) 0 1.25rem; }
.footer-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.fc-text { display: flex; align-items: center; gap: 1rem; }
.fc-text p { margin: 0; color: #b8c7d6; font-size: .92rem; }
.fc-text .fc-title { color: #fff; font-weight: 800; font-size: 1.15rem; }
.fc-iso { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: #fff; }
.fc-iso svg { width: 72%; height: 72%; }
.fc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2rem; }
.footer-brand p { max-width: 30ch; margin-bottom: 1rem; }
.footer-contact a { gap: .65rem; word-break: break-word; }
.fci { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.fci .icon { width: 16px; height: 16px; color: var(--cyan); }
.footer-bottom { justify-content: space-between; align-items: center; }
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .f-contact { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-cta { flex-direction: column; text-align: center; }
  .fc-text { flex-direction: column; }
  .fc-actions { width: 100%; } .fc-actions .btn { flex: 1; }
  .footer-brand { text-align: center; } .footer-brand p { margin-inline: auto; } .footer-brand .social { justify-content: center; }
  .footer-logo { margin-inline: auto; }
  .footer-grid { gap: 1.75rem 1rem; }
  .footer-bottom { flex-direction: column; text-align: center; padding-bottom: 4.5rem; }
}

/* Aviso de cookies (tarjeta compacta) */
.cookie-bar { left: 1rem; right: auto; bottom: 1rem; display: grid; gap: .9rem; width: min(400px, calc(100% - 2rem)); max-width: none; margin: 0; padding: 1.2rem; border-radius: 20px; flex-direction: column; align-items: stretch; }
.ck-top { display: flex; gap: .85rem; align-items: flex-start; }
.ck-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #ffad6b, #f07a36); color: #fff; }
.ck-ic .icon { width: 22px; height: 22px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
.ck-config { justify-self: center; font-size: .85rem; color: var(--blue); font-weight: 700; }
.has-cookie-bar .float-stack { bottom: 18px; }
@media (max-width: 600px) { .cookie-bar { left: .75rem; right: .75rem; width: auto; bottom: .75rem; } .has-cookie-bar .float-stack { bottom: 270px; } }

/* Modales */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(15, 36, 64, .55); backdrop-filter: blur(5px); animation: fadeIn .25s ease-out; }
.modal-box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.75rem; border-radius: 24px; background: #fff; box-shadow: var(--shadow-lg); animation: popIn .35s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--text); cursor: pointer; }
.modal-x:hover { background: var(--line); }
.modal-x .icon { width: 18px; height: 18px; }
.mw-top { text-align: center; margin-bottom: 1.25rem; }
.mw-iso { display: inline-grid; place-items: center; width: 74px; height: 74px; margin-bottom: .75rem; border-radius: 50%; background: #fff; box-shadow: 0 12px 26px -12px rgba(15, 36, 64, .45), 0 0 0 6px var(--bg-soft); }
.mw-iso svg { width: 72%; height: 72%; }
.mw-kicker { margin: 0 0 .25rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
.mw-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .3rem; }
.mw-sub { margin: 0; color: var(--text-soft); }
.mw-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.25rem; }
.mw-options a { display: flex; align-items: center; gap: .65rem; padding: .7rem; border-radius: 14px; border: 1.5px solid var(--line); color: var(--text); text-decoration: none; font-size: .88rem; line-height: 1.25; transition: border-color .2s, transform .2s, box-shadow .2s; }
.mw-options a:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mw-options b { display: block; }
.mw-options small { color: var(--text-soft); font-size: .76rem; }
.mw-actions { display: grid; gap: .6rem; justify-items: center; }
.mw-later { font-size: .88rem; color: var(--text-soft); }
@media (max-width: 460px) { .mw-options { grid-template-columns: 1fr; } .modal-box { padding: 1.4rem; } }
.ms-box { text-align: center; width: min(420px, 100%); }
.ms-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: .9rem; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 0 0 8px rgba(37, 211, 102, .18); }
.ms-ic .icon { width: 32px; height: 32px; stroke-width: 3; }
.ms-text { color: var(--text-soft); margin-bottom: 1.25rem; }

/* ====================== v11: móviles ====================== */
/* iPhone de la vista previa: se ajusta al ancho y alto de cada pantalla */
.iphone { width: min(300px, 72vw, calc(72vh * 9 / 19.5)); padding: 9px; border-radius: 46px; }
.iphone::before { border-radius: 42px; }
.ip-screen { border-radius: 37px; }
.qp-actions { width: min(330px, 100%); }
@media (max-width: 600px) {
  .iphone { width: min(250px, 66vw, calc(64vh * 9 / 19.5)); padding: 7px; border-radius: 38px; }
  .iphone::before { inset: 3px; border-radius: 35px; }
  .ip-screen { border-radius: 31px; }
  .ip-island { height: 22px; top: 8px; }
  .ip-status { height: 40px; padding: 11px 18px 0 22px; font-size: .7rem; }
  .wa-head { padding: .2rem .55rem .45rem .4rem; }
  .wa-av { width: 28px; height: 28px; }
  .wa-name b { font-size: .78rem; }
  .wa-bubble { font-size: .72rem; }
  .wa-sec { display: none; }
  .wa-input .icon { width: 17px; height: 17px; }
  .ip-btn { width: 3px; }
}

/* Centrado en celular y tableta: encabezados, textos de introducción, botones e iconos.
   Las listas largas, el formulario y las preguntas se mantienen alineados a la izquierda
   para que se lean con facilidad. */
@media (max-width: 768px) {
  .head, .head-row { text-align: center; justify-items: center; }
  .head .sub, .head .lead, .head-row .sub { margin-inline: auto; }
  .pill { margin-inline: auto; }
  .head-row > div { display: grid; justify-items: center; }

  /* Portada */
  .hero-copy { text-align: center; display: grid; justify-items: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; width: 100%; }
  .hero-trust { justify-content: center; text-align: left; }
  .plat-link { margin-inline: auto; }

  /* Tarjetas de servicios y perfiles */
  .card, .profile { align-items: center; text-align: center; }
  .card-top { display: flex; justify-content: center; }
  .card .checks, .profile .checks { text-align: left; justify-self: center; width: fit-content; max-width: 100%; margin-inline: auto; }
  .card-link, .profile-go { align-self: center; }
  .card-cta { align-items: center; text-align: center; }
  .card-cta .btn { align-self: center; }

  /* Educación y por qué STPT */
  .edu-grid > div:first-child { text-align: center; display: grid; justify-items: center; }
  .edu-grid .lead { margin-inline: auto; }
  .why-grid > div:last-child { text-align: center; }
  .why-brand { margin-inline: auto; }
  .why-list li { flex-direction: column; align-items: center; text-align: center; }

  /* Diagnóstico */
  .diag-panel { text-align: center; }
  .diag-head { justify-content: center; }
  .diag-steps li { text-align: left; }
  .diag-actions { justify-content: center; }

  /* Proceso (tarjetas centradas en una columna con su línea) */
  .pipe-card h3 { text-align: left; }

  /* Preguntas, cotizador y CTA */
  .faq-grid .head { display: grid; justify-items: center; }
  .qstep legend { justify-content: center; text-align: center; }
  .chips { justify-content: center; }
  .quote-grid { justify-items: stretch; }
  .cta-copy, .cta-banner { text-align: center; }

  /* Módulos de la portada */
  .modules a { justify-content: center; }
}
@media (max-width: 768px) {
  .hero-trust { display: grid; grid-template-columns: 1fr; width: fit-content; margin-inline: auto; justify-content: start; }
}
@media (max-width: 600px) { .ip-island { width: 28%; } .ip-status { padding: 11px 16px 0 20px; } }

/* ====================== v12: portada equilibrada ====================== */
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(2rem, 1.2rem + 3vh, 3.5rem) 0 clamp(1.5rem, 3vh, 2.5rem); min-height: min(640px, calc(100svh - 122px)); }
.hero .h1 { font-size: clamp(2.2rem, 1.1rem + 3vw, 3.6rem); line-height: 1.06; margin-bottom: .45em; }
.h1 .nw { white-space: nowrap; }
.hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin-bottom: 1.5rem; max-width: 36em; }
.hero-actions { margin-bottom: 1.4rem; }
.hero-copy .pill { margin-bottom: .9rem; }
.hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; width: 100%; max-width: 640px; margin: 0 0 1rem; }
.hero-trust li { align-items: center; }
.plat-link { width: 100%; max-width: 640px; }
.plat-link span:nth-child(2) { flex: 1; }
.hero-visual { min-height: 0; }
.orbit-stage { --size: min(400px, 34vw, 58vh); }
.modules { padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1000px) {
  .hero-grid { min-height: 0; grid-template-columns: 1fr; }
  .orbit-stage { --size: min(380px, 78vw); }
  .hero-visual { padding: .5rem 0 1rem; }
}
@media (max-width: 768px) {
  .hero-trust { grid-template-columns: 1fr; width: fit-content; max-width: 100%; margin-inline: auto; }
  .plat-link { width: auto; }
  .h1 .nw { white-space: normal; }
}
@media (max-width: 1000px) and (min-width: 769px) {
  .hero-copy { text-align: center; display: grid; justify-items: center; }
  .hero-actions { justify-content: center; }
  .hero-trust, .plat-link { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
}

.brand { flex: none; }
.hero-trust li { gap: .55rem; font-size: .8rem; }
.hero-trust b { font-size: .9rem; white-space: nowrap; }
.hero-trust .mini-tile { width: 36px; height: 36px; }
@media (max-width: 1120px) and (min-width: 1001px) { .hero-actions .btn-lg { padding: .8rem 1.1rem; font-size: .96rem; } }
@media (max-width: 768px) and (min-width: 561px) {
  .hero-trust { grid-template-columns: repeat(3, auto); width: auto; gap: .9rem 1.4rem; justify-content: center; }
}
@media (max-width: 1000px) { .hero-visual { margin-top: -.5rem; } }
.modules small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modules a > span:nth-child(2) { min-width: 0; flex: 1; }
/* Encabezados de sección centrados en todos los tamaños (simetría) */
.head:not(.head-row):not(.faq-grid .head) { text-align: center; display: grid; justify-items: center; }
.head:not(.head-row):not(.faq-grid .head) .sub { margin-inline: auto; }
.why-grid .head, .edu-grid .head { text-align: inherit; }
/* Celular: solo WhatsApp flotante para no tapar contenido */
@media (max-width: 768px) {
  .social-float { display: none !important; }
  .plat-link { text-align: left; }
  .float-stack .wa-float { width: 54px; height: 54px; }
}

/* ====================== v13: rendimiento y movimiento ====================== */
/* Rendimiento: sin desenfoques costosos en elementos fijos ni sombras animadas */
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.blob { filter: none; opacity: .55; }
.b1 { background: radial-gradient(circle, rgba(159, 220, 247, .9), rgba(159, 220, 247, 0) 70%); }
.b2 { background: radial-gradient(circle, rgba(252, 195, 155, .8), rgba(252, 195, 155, 0) 70%); }
.b3 { background: radial-gradient(circle, rgba(219, 231, 238, .9), rgba(219, 231, 238, 0) 70%); }
.wa-float { animation: none; }
.sat-ring, .sat-in, .iso-glow, .edu-arcs i, .cta-arcs i, .iso-inner, .phone, .cta-iso { will-change: transform; }
.anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
.card::before { will-change: opacity; }

/* Movimiento al desplazarse */
.js .reveal { opacity: 0; transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.js .reveal[data-anim="up"], .js .reveal:not([data-anim]) { transform: translateY(32px); }
.js .reveal[data-anim="left"] { transform: translateX(-40px); }
.js .reveal[data-anim="right"] { transform: translateX(40px); }
.js .reveal[data-anim="zoom"] { transform: scale(.92); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Microinteracciones */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.btn:hover::after { left: 130%; }
.modules a:hover .ricon, .profile:hover .ricon, .card:hover .ricon { transform: translateY(-3px) scale(1.06); }
.ricon { transition: transform .35s cubic-bezier(.2, .8, .2, 1.4); }
.diag-opt:hover .mini-tile { transform: rotate(-6deg) scale(1.08); }
.mini-tile { transition: transform .3s cubic-bezier(.2, .8, .2, 1.4); }
.hl, .hl-o { background-size: 200% 100%; }
.hero .h1 .hl { background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 6s ease-in-out infinite; }
@keyframes shimmer { 50% { background-position: 100% 0; } }
.pill .led { animation: blinkLed 2s ease-in-out infinite; }
@keyframes blinkLed { 50% { opacity: .35; } }
.hero-copy > .reveal:nth-child(1) { transition-delay: .05s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ====================== v14: desplazamiento fluido ====================== */
/* Barra de progreso con transform (sin recalcular el diseño en cada scroll) */
.site-header::after { width: 100%; transform: scaleX(var(--sp, 0)); transform-origin: left; will-change: transform; }
/* Menos capas y repintados continuos */
.js .reveal { will-change: auto; transition: opacity .55s ease-out, transform .6s cubic-bezier(.22, 1, .36, 1); }
.js .reveal[data-anim], .js .reveal:not([data-anim]) { transform: translate3d(0, 14px, 0); }
.js .reveal.is-visible { transform: none; }
.sat-in, .iso-inner, .phone, .cta-iso, .card::before { will-change: auto; }
.hero .h1 .hl { animation: none; background-size: 100% 100%; }
.pill .led, .led { animation: none; }
.edu-arcs i, .cta-arcs i { animation: none; }
.iso-shine { animation-duration: 8s; }
.card, .profile, .modules a, .diag-opt, .pipe-card, .faq-list details { backface-visibility: hidden; }
/* La portada aparece sin animación de entrada (evita parpadeo al cargar) */
.js .hero .reveal { opacity: 1; transform: none; transition: none; }

/* ====================== v15: servicios, diagnóstico, perfiles y cotizador ====================== */
/* Diagnóstico: cuadrícula que abre modal */
.diag { display: block; }
.diag-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width: 1100px; margin-inline: auto; }
.diag-opt[aria-haspopup] .do-arrow { color: var(--blue); }
.diag-opt:hover .do-arrow { transform: translateX(4px); }
.md-box { width: min(500px, 100%); }
.md-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; padding-right: 2.5rem; }
.md-ic { width: 52px; height: 52px; border-radius: 15px; } .md-ic .icon { width: 26px; height: 26px; }
.md-k { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.md-title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); }
.md-text { color: var(--text-soft); margin-bottom: 1rem; }
.md-steps { display: grid; gap: .5rem; margin: 0 0 1.4rem; counter-reset: m; }
.md-steps li { counter-increment: m; display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; border-radius: 12px; background: var(--bg-soft); font-weight: 600; font-size: .94rem; }
.md-steps li::before { content: counter(m); display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: .8rem; }
.md-actions { display: grid; gap: .6rem; }
.mv-ic .ricon { width: 52px; height: 52px; }
.mv-inc { margin: 0 0 .5rem; font-weight: 800; font-size: .9rem; }
.mv-list .checks { margin-bottom: 1.4rem; text-align: left; }
.mv-list .checks li { padding: .55rem .7rem .55rem 2.1rem; border-radius: 10px; background: var(--bg-soft); }
.mv-list .checks li::before { left: .6rem; top: .7rem; }

/* Servicios: filtro + lista */
.svc-wrap { max-width: 1120px; margin-inline: auto; }
.svc-filter { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.svc-f { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-weight: 700; font-size: .92rem; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.svc-f .icon { width: 17px; height: 17px; color: var(--steel); }
.svc-f:hover { border-color: var(--blue); }
.svc-f[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.svc-f[aria-pressed="true"] .icon { color: var(--cyan); }
.svc-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: var(--bg-soft); color: var(--text-soft); font-size: .72rem; }
.svc-f[aria-pressed="true"] .svc-n { background: rgba(255, 255, 255, .15); color: #fff; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.svc { --acc: var(--blue); }
.c-seg { --acc: #1592d6; } .c-red { --acc: var(--steel); } .c-web { --acc: var(--orange); } .c-edu { --acc: #7c3aed; }
.svc-btn { display: flex; align-items: center; gap: .9rem; width: 100%; height: 100%; padding: 1rem 1rem 1rem 1.1rem; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 16px; background: #fff; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.svc-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-btn .ricon { width: 48px; height: 48px; } .svc-btn .ricon .icon { width: 22px; height: 22px; }
.svc-txt { flex: 1; min-width: 0; line-height: 1.3; }
.svc-cat { display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.c-web .svc-cat { color: var(--orange-ink); }
.svc-t { display: block; font-size: 1rem; }
.svc-d { display: block; margin-top: .2rem; color: var(--text-soft); font-size: .84rem; line-height: 1.4; }
.svc-plus { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bg-soft); color: var(--blue); transition: background-color .2s, color .2s; }
.svc-plus .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.svc-btn:hover .svc-plus { background: var(--blue); color: #fff; }
.svc-in { animation: svcIn .35s ease-out both; }
@keyframes svcIn { from { opacity: 0; transform: translateY(8px); } }
.svc-note { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 16px; background: var(--bg-soft); border: 1px dashed #cbd8e4; }
.svc-note p { flex: 1; margin: 0; color: var(--text-soft); font-size: .93rem; }
.svc-note b { color: var(--text); }
@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .svc-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .3rem; scrollbar-width: none; }
  .svc-filter::-webkit-scrollbar { display: none; }
  .svc-grid { grid-template-columns: 1fr; gap: .6rem; }
  .svc-btn { padding: .8rem .8rem .8rem .9rem; gap: .75rem; }
  .svc-btn .ricon { width: 42px; height: 42px; }
  .svc-d { display: none; }
  .svc-note { flex-direction: column; text-align: center; }
}

/* Perfiles */
.pfs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.pf { --acc: var(--blue); --tint: var(--tint-blue); display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.pf:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pf-orange { --acc: var(--orange); --tint: var(--tint-orange); }
.pf-violet { --acc: #7c3aed; --tint: #f3edff; }
.pf-top { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.4rem 1.2rem; background: linear-gradient(135deg, var(--tint), #fff); border-bottom: 1px solid var(--line); }
.pf-top h3 { margin: 0 0 .15rem; font-size: 1.35rem; font-weight: 800; }
.pf-top p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.4; }
.pf-k { margin: 1.1rem 1.4rem .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.pf-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 1.4rem 1.3rem; flex: 1; align-content: flex-start; }
.pf-tags li { padding: .35rem .7rem; border-radius: 999px; background: var(--tint); color: var(--text); font-size: .82rem; font-weight: 700; }
.pf-cta { width: auto; margin: 0 1.4rem 1.4rem; background: var(--acc); color: #fff; }
.pf-cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.pf-orange .pf-cta { text-shadow: 0 1px 2px rgba(150, 60, 10, .45); }
@media (max-width: 960px) { .pfs { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (max-width: 768px) { .pf { text-align: left; } .pf-tags { justify-content: flex-start; } }

/* Cotizador compacto en celular */
@media (max-width: 768px) {
  .quote-preview .qp-title, .quote-preview .iphone { display: none; }
  .quote-steps { gap: 0; padding: .4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .qstep { padding: 1rem .9rem; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
  .qstep + .qstep { border-top: 1px solid var(--line); }
  .qstep legend { justify-content: flex-start; text-align: left; font-size: 1rem; margin-bottom: .7rem; }
  .qn { width: 26px; height: 26px; font-size: .75rem; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; justify-content: stretch; }
  .chip span { width: 100%; justify-content: center; padding: .6rem .5rem; font-size: .88rem; }
  .qstep:first-child .chips { grid-template-columns: repeat(3, 1fr); }
  .qstep:first-child .chip span { flex-direction: column; gap: .25rem; font-size: .8rem; }
  .quote-preview { margin-top: .9rem; }
}

/* ====================== v16: fluidez al desplazarse ====================== */
/* Sin animaciones continuas costosas: solo la órbita (transform puro en su propia capa) */
.iso-inner, .iso-svg, .iso-shine, .iso-glow, .cta-iso, .phone, .float-badge, .wa-float::before { animation: none !important; }
.iso-shine { display: none; }
.iso-svg { filter: none; transform: none; }
.iso-inner { box-shadow: 0 24px 48px -24px rgba(15, 36, 64, .35), inset 0 -8px 18px rgba(15, 36, 64, .05); }
.sat-ring { will-change: transform; contain: layout style; }
.sat-in { box-shadow: 0 6px 14px -8px rgba(15, 36, 64, .35); }
/* Quitar capas extra creadas antes */
.card, .profile, .modules a, .diag-opt, .pipe-card, .faq-list details { backface-visibility: visible; }
/* Entrada de secciones: solo opacidad y movimiento corto, sin retrasos encadenados */
.js .reveal { transition: opacity .45s ease-out, transform .45s ease-out; }
.js .reveal[data-anim], .js .reveal:not([data-anim]) { transform: translateY(10px); }
.js .reveal.is-visible { transform: none; }
/* Sombras más ligeras en elementos repetidos */
.svc-btn, .diag-opt, .modules a, .pf { box-shadow: 0 1px 2px rgba(15, 36, 64, .06); }
.svc-btn:hover, .diag-opt:hover, .modules a:hover, .pf:hover { box-shadow: 0 10px 22px -14px rgba(15, 36, 64, .35); }
/* Política de privacidad */
.mp-box { width: min(600px, 100%); }
.mp-h { margin: 1rem 0 .3rem; font-size: 1rem; font-weight: 800; }
.mp-box .md-text { margin-bottom: .4rem; font-size: .93rem; }
.mp-box .md-actions { margin-top: 1.2rem; }
.ck-links { margin: 0; text-align: center; font-size: .85rem; }
.fb-links { gap: 1.25rem; }