/* ══════════════════════════════════════════════════════════
   TOKENS · Paleta alineada al logo
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Paleta corporativa (basada en el logo) */
  --primary:#0066CC;          /* azul corporativo del logo */
  --primary-dark:#0052A3;
  --primary-light:#E6F0FA;
  --accent:#00B4D8;           /* cyan del cuadro superior derecho */
  --accent-deep:#0891B2;
  --navy:#0B2C4D;             /* azul oscuro del cuadro superior izquierdo */
  --navy-deep:#071E36;

  /* Paleta funcional */
  --violet:#7C3AED;
  --pink:#EC4899;
  --cyan:#00B4D8;
  --lime:#84CC16;
  --amber:#F59E0B;
  --emerald:#10B981;

  /* Superficies */
  --bg:#FAFAFB;
  --bg-dark:#0A1628;
  --surface:#FFFFFF;
  --surface-2:#F4F6F9;
  --surface-3:#E9EEF4;

  /* Texto */
  --text:#0B1F33;
  --text-muted:#5B6B7F;
  --text-soft:#8FA0B3;
  --text-inv:#FFFFFF;
  --text-inv-muted:rgba(255,255,255,.68);

  /* Bordes */
  --border:rgba(11,44,77,.08);
  --border-strong:rgba(11,44,77,.14);
  --border-dark:rgba(255,255,255,.08);
  --border-dark-strong:rgba(255,255,255,.16);

  /* Gradientes */
  --grad-primary:linear-gradient(135deg,#0B2C4D 0%,#0066CC 55%,#00B4D8 100%);
  --grad-text:linear-gradient(120deg,#0066CC,#00B4D8 60%,#0B2C4D);
  --grad-emerald:linear-gradient(135deg,#059669,#10B981);
  --grad-button:linear-gradient(135deg,#0052A3 0%,#0066CC 50%,#00B4D8 100%);

  /* Radii */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* Sombras */
  --sh-xs:0 1px 2px rgba(11,44,77,.04);
  --sh-sm:0 1px 2px rgba(11,44,77,.04),0 4px 12px rgba(11,44,77,.04);
  --sh:0 4px 16px rgba(11,44,77,.06),0 12px 32px rgba(11,44,77,.05);
  --sh-lg:0 12px 40px rgba(11,44,77,.10),0 32px 64px rgba(11,44,77,.06);
  --sh-glow:0 12px 40px rgba(0,102,204,.32),0 4px 16px rgba(0,180,216,.18);

  --container:1200px;
  --header-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.55; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

::selection{background:rgba(0,102,204,.2);color:var(--text)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.imagen1 {
    display: block;
    width: clamp(320px, 60vw, 600px);
    height: auto;
    max-width: 90%;
    object-fit: contain;
}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;position:relative;z-index:2}

/* ══════════════════════════════════════════════════════════
   AURORA BG
   ══════════════════════════════════════════════════════════ */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora__blob{position:absolute;border-radius:50%;filter:blur(130px);will-change:transform}
.aurora__blob--1{width:620px;height:620px;background:radial-gradient(circle,#0066CC 0%,transparent 65%);top:-200px;left:-160px;opacity:.42;animation:float1 24s ease-in-out infinite}
.aurora__blob--2{width:700px;height:700px;background:radial-gradient(circle,#00B4D8 0%,transparent 65%);top:8%;right:-260px;opacity:.34;animation:float2 28s ease-in-out infinite}
.aurora__blob--3{width:560px;height:560px;background:radial-gradient(circle,#0B2C4D 0%,transparent 65%);bottom:-200px;left:32%;opacity:.3;animation:float3 32s ease-in-out infinite}
.aurora__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,44,77,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,44,77,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
}
.aurora__noise{
  position:absolute;inset:0;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-110px,90px) scale(1.16)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-70px) scale(1.1)}}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════ 
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-revealed{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
*/

/* ══════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════════════════ */
.gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}

.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-full);
  background:rgba(0,102,204,.08);color:var(--primary);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:14px;border:1px solid rgba(0,102,204,.15);
}
.eyebrow--light{background:rgba(255,255,255,.08);color:var(--text-inv);border-color:rgba(255,255,255,.15)}

/* ══════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:14px 24px;border:none;border-radius:var(--r);
  font-family:'Inter Tight','Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .25s ease,background .25s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
  position:relative;overflow:hidden;
}
.btn:active{transform:scale(.97)}
.btn--block{width:100%}
.btn--sm{min-height:42px;padding:9px 18px;font-size:14px;border-radius:12px}
.btn--lg{min-height:56px;font-size:16px}

.btn--primary{
  background:var(--grad-button);background-size:200% 200%;color:#fff;
  box-shadow:0 8px 24px rgba(0,102,204,.30),0 2px 8px rgba(0,180,216,.15);
  animation:gradShift 8s ease infinite;
}
.btn--primary:hover{box-shadow:0 14px 36px rgba(0,102,204,.40),0 4px 16px rgba(0,180,216,.25);transform:translateY(-2px)}
.btn--primary::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s ease}
.btn--primary:hover::before{transform:translateX(100%)}

.btn--glow{box-shadow:var(--sh-glow),0 0 0 1px rgba(255,255,255,.1) inset}

.btn--ghost{
  background:rgba(255,255,255,.7);color:var(--text);
  border:1.5px solid var(--border-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,102,204,.06);transform:translateY(-1px)}

.btn--dark{background:var(--navy);color:#fff;box-shadow:0 8px 24px rgba(11,44,77,.25)}
.btn--dark:hover{background:var(--navy-deep);transform:translateY(-2px)}

@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.btn__spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.btn.is-loading .btn__label{display:none}
.btn.is-loading .btn__spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.form { font-size: small}
/* ============================================================
   12. FORMULARIO FLOTANTE
   ============================================================ */
.floating-form-container {
    background: #ffffff;
    position: fixed;
    top: 50%;
    left: 30px;
    transform: translateY(-50%) scale(0.95);
    z-index: 50;
    width: 130px;
    height: 170px;
    border-radius: 20px;
    overflow: visible;
    cursor: pointer;
    border: none;
     transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 10px 40px rgba(80, 92, 253, 0.2));
}

.floating-form-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.floating-form-container::before {
    content: '';
    position: absolute;
    border-radius: 22px;
    transition: opacity 0.8s ease;
    animation: rotateBorder 4s linear infinite;
    z-index: -1;
}

@keyframes rotateBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.floating-form-container:hover::before,
.floating-form-container.expanded::before {
    opacity: 1;
}

.floating-form-container:hover,
.floating-form-container.expanded {
    width: min(750px, 92vw);
    height: auto;
    min-height: 540px;
    max-height: 92vh;
    border-radius: 28px;
    cursor: default;
    transform: translateY(-50%) scale(1);
    filter: drop-shadow(0 20px 60px rgba(80, 92, 253, 0.3));
}

.floating-form-container:hover .floating-form-inner,
.floating-form-container.expanded .floating-form-inner {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* Miniaturas */
.form-miniature {
     background:#ffffff;
    position: absolute;
    inset: 0;
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    pointer-events: none;
}

.floating-form-container:hover .form-miniature,
.floating-form-container.expanded .form-miniature {
    opacity: 0;
    transform: scale(0.6) rotate(-15deg) translateY(-30px);
    pointer-events: none;
}

.miniature-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 30px rgba(37, 117, 252, 0.35);
    position: relative;
}

.miniature-icon-wrapper::before,
.miniature-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(37, 117, 252, 0.2);
    animation: ripplePulse 2.5s ease-out infinite;
}

.miniature-icon-wrapper::after {
    animation-delay: 0.8s;
    inset: -14px;
    border-color: rgba(37, 117, 252, 0.1);
}

@keyframes ripplePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.floating-form-container:hover .miniature-icon-wrapper {
    transform: scale(1.15) rotate(180deg);
    box-shadow: 0 12px 40px rgba(37, 117, 252, 0.5);
}

.floating-form-container:hover .miniature-icon-wrapper::before,
.floating-form-container:hover .miniature-icon-wrapper::after {
    animation: ripplePulse 1.8s ease-out infinite;
}

.miniature-icon-wrapper i {
    color: white;
    font-size: 22px;
    font-style: normal;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 300;
}

.floating-form-container:hover .miniature-icon-wrapper i {
    transform: rotate(180deg) scale(1.1);
}

.miniature-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    font-weight: 500;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 4px;
    transition: all 0.6s ease;
    letter-spacing: 0.5px;
}

.miniature-subtitle {
    font-size: 0.6rem;
    color: #888;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
    transition: all 0.6s ease;
}

.floating-form-container:hover .miniature-subtitle {
    opacity: 0;
    transform: translateY(10px);
}

/* Formulario interno */
.floating-form {
    padding: clamp(20px, 3.5vw, 35px);
    color: #333333;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(12px) brightness(0.95);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    background: transparent;
    overflow-y: auto;
    border-radius: 28px;
    pointer-events: none;
}

.floating-form-container:hover .floating-form,
.floating-form-container.expanded .floating-form {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) brightness(1);
    pointer-events: all;
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.form-title {
    font-size: clamp(20px, 2.8vw, 26px);
    margin-bottom: 28px;
    text-align: center;
    color: #1a1a2e;
    font-weight: 700;
    transform: translateY(40px) scale(0.9);
    opacity: 0;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.floating-form-container:hover .form-title,
.floating-form-container.expanded .form-title {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.floating-form .form-group {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-form-container:hover .floating-form .form-group,
.floating-form-container.expanded .floating-form .form-group {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Retrasos escalonados */
.floating-form-container:hover .floating-form .form-group:nth-child(1),
.floating-form-container.expanded .floating-form .form-group:nth-child(1) {
    transition-delay: 0.15s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(2),
.floating-form-container.expanded .floating-form .form-group:nth-child(2) {
    transition-delay: 0.25s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(3),
.floating-form-container.expanded .floating-form .form-group:nth-child(3) {
    transition-delay: 0.35s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(4),
.floating-form-container.expanded .floating-form .form-group:nth-child(4) {
    transition-delay: 0.45s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(5),
.floating-form-container.expanded .floating-form .form-group:nth-child(5) {
    transition-delay: 0.55s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(6),
.floating-form-container.expanded .floating-form .form-group:nth-child(6) {
    transition-delay: 0.65s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(7),
.floating-form-container.expanded .floating-form .form-group:nth-child(7) {
    transition-delay: 0.75s;
}
.floating-form-container:hover .floating-form .form-group:nth-child(8),
.floating-form-container.expanded .floating-form .form-group:nth-child(8) {
    transition-delay: 0.85s;
}

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.centrado {
    display: grid;
    place-items: center; /* Centra en ambas direcciones */
    height: 100vh;
}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,250,251,.72);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.header.is-scrolled{border-bottom-color:var(--border);background:rgba(250,250,251,.9)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:10px;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em}

.logo__icon-wrap{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  padding:4px;
  background:radial-gradient(circle at 50% 50%,rgba(0,102,204,.06),transparent 75%);
  transition:background .3s ease;
}
.logo:hover .logo__icon-wrap{background:radial-gradient(circle at 50% 50%,rgba(0,102,204,.14),transparent 75%)}

.logo__icon{
  width:36px;height:36px;
  object-fit:contain;
  transition:transform .35s var(--ease);
  position:relative;z-index:1;
}
.logo:hover .logo__icon{transform:scale(1.06) rotate(-2deg)}

.logo__fallback{
  display:none;
  position:absolute;
  inset:4px;
  border-radius:10px;
  background:var(--grad-primary);
  color:#fff;
  place-items:center;
  font-family:'Inter Tight',sans-serif;
  font-weight:900;
  font-size:13px;
  letter-spacing:-.02em;
}

.logo__text{font-size:16px;letter-spacing:-.02em}
.logo__dot{color:var(--accent)}

.nav{display:none;gap:4px}
.nav__link{padding:8px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text-muted);transition:color .2s ease,background .2s ease}
.nav__link:hover{color:var(--text);background:rgba(11,44,77,.04)}

.header__cta svg{transition:transform .2s ease}
.header__cta:hover svg{transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero{padding:48px 0 24px;position:relative;overflow:hidden}
.hero__grid{display:grid;gap:40px}

.hero__badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--text-muted);
  margin-bottom:20px;box-shadow:var(--sh-xs);
}
.hero__badge-logo{
  width:18px;height:18px;object-fit:contain;flex-shrink:0;border-radius:4px;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(132,204,22,.18)}50%{box-shadow:0 0 0 8px rgba(132,204,22,.05)}}

.hero__title{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(30px,11vw,68px);
  font-weight:900;line-height:.98;letter-spacing:-.045em;
  margin-bottom:20px;color:var(--text);text-align:center;
}
.hero__subtitle{font-size:16.5px;color:var(--text-muted);max-width:560px;margin:0 auto 28px;line-height:1.55;text-align:center}
.hero__subtitle strong{color:var(--text);font-weight:700}

.hero__actions{display:grid;gap:10px;max-width:420px;margin:0 auto 26px}
.hero__bullets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13px;color:var(--text-muted);font-weight:500}
.hero__bullets li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* DASHBOARD */
.hero__visual{margin-top:12px;perspective:1400px}
.dash{
  position:relative;border-radius:var(--r-lg);
  background:var(--bg-dark);
  border:1px solid var(--border-dark);
  box-shadow:0 40px 100px rgba(11,44,77,.35),0 10px 30px rgba(11,44,77,.2),0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
  transform:rotateX(6deg) rotateY(-4deg);
  transition:transform 1s var(--ease);
  animation:dashFloat 8s ease-in-out infinite;
}
@keyframes dashFloat{0%,100%{transform:rotateX(6deg) rotateY(-4deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-4deg) translateY(-8px)}}
.dash:hover{transform:rotateX(0) rotateY(0);animation-play-state:paused}

.dash__chrome{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border-dark);background:rgba(255,255,255,.02)}
.dash__dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.dash__url{margin-left:10px;font-size:11.5px;font-weight:600;color:var(--text-inv-muted);font-family:'Inter Tight',sans-serif;letter-spacing:.01em}
.dash__badge-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-full);background:rgba(16,185,129,.15);color:#6EE7B7;font-size:9.5px;font-weight:800;letter-spacing:.08em}
.dash__badge-live span{width:5px;height:5px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.25);animation:pulse 1.6s infinite}

.dash__body{padding:16px 14px;display:grid;gap:14px;color:#fff}

.dash__kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.kpi{padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border-dark);display:grid;gap:6px;transition:background .2s ease,border-color .2s ease}
.kpi:hover{background:rgba(255,255,255,.06);border-color:var(--border-dark-strong)}
.kpi--ring{place-items:center;text-align:center}
.kpi__head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.kpi__label{color:var(--text-inv-muted)}
.kpi__trend{font-size:9px;padding:2px 6px;border-radius:var(--r-full);font-weight:800}
.kpi__trend--up{background:rgba(16,185,129,.15);color:#6EE7B7}
.kpi__trend--down{background:rgba(236,72,153,.15);color:#FBCFE8}
.kpi__value{font-family:'Inter Tight',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.kpi__spark{width:100%;height:18px}

.ring{position:relative;width:48px;height:48px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.ring__fg{fill:none;stroke:#00B4D8;stroke-width:3;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset 1.8s var(--ease-out)}
.ring__value{position:absolute;inset:0;display:grid;place-items:center;font-family:'Inter Tight',sans-serif;font-size:11.5px;font-weight:800}

.dash__chart{padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border-dark)}
.chart__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px}
.chart__title{color:var(--text-inv-muted);font-weight:600;letter-spacing:.02em}
.chart__legend{display:flex;gap:10px;color:var(--text-inv-muted);font-size:10px}
.chart__legend span{display:inline-flex;align-items:center;gap:4px}
.chart__legend i{width:8px;height:2px;background:var(--c);border-radius:2px}
.chart__svg{width:100%;height:90px}
.chart__plan-line,.chart__real-line{stroke-dashoffset:600;transition:stroke-dashoffset 2s var(--ease-out)}
.chart__real-line{stroke-dashoffset:500}
.is-revealed .chart__plan-line{stroke-dashoffset:0}
.is-revealed .chart__real-line{stroke-dashoffset:0;transition-delay:.3s}

.dash__rows{display:grid;gap:8px}
.dash__row{display:grid;grid-template-columns:64px 1fr 32px;gap:8px;align-items:center;font-size:10.5px}
.dash__row-label{color:var(--text-inv-muted);font-weight:600}
.dash__row-val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.dash__row-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.dash__row-bar span{display:block;height:100%;width:0;background:var(--c);border-radius:3px;transition:width 1.6s var(--ease-out)}
.is-revealed .dash__row-bar span{width:var(--w);transition-delay:.4s}

.dash__glow{position:absolute;bottom:-40%;left:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(0,102,204,.35) 0%,transparent 65%);filter:blur(40px);pointer-events:none}

/* ══════════════════════════════════════════════════════════
   TRUST BAR
   ══════════════════════════════════════════════════════════ */
.trust{padding:28px 0 8px;text-align:center}
.trust__label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);margin-bottom:14px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:40px;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;gap:40px;align-items:center;flex-shrink:0}
.marquee__item{font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text-muted);opacity:.55;transition:opacity .3s ease;white-space:nowrap}
.marquee__item:hover{opacity:1}
.marquee__sep{color:var(--border-strong)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════════ */

.stats{
  padding:24px 0 48px;
}

.stats__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.stat{
  position:relative;
  overflow:hidden;

  padding:22px 16px;
  text-align:center;

  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:1px solid var(--border);
  border-radius:var(--r-lg);

  box-shadow:var(--sh-sm);

  transition:
    transform .3s var(--ease),
    box-shadow .3s ease,
    border-color .3s ease;

  isolation:isolate;
}


/* ─────────────────────────────────────────────────────────
   EFECTO DE LUZ
   ───────────────────────────────────────────────────────── */

.stat::after{
  content:"";
  position:absolute;

  top:-30%;
  bottom:-30%;

  width:35%;

  left:-45%;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 15%,
    rgba(0,132,255,.12) 40%,
    rgba(0,174,255,.38) 50%,
    rgba(255,255,255,.72) 58%,
    rgba(0,132,255,.12) 70%,
    transparent 100%
  );

  transform:skewX(-18deg);

  filter:blur(7px);

  pointer-events:none;

  z-index:2;

  animation:none;
}


/* ─────────────────────────────────────────────────────────
   ENTRADA DEL MOUSE
   IZQUIERDA → DERECHA
   ───────────────────────────────────────────────────────── */

.stat:hover::after{
  animation:statLightIn .75s cubic-bezier(.22,.61,.36,1) forwards;
}


/* ─────────────────────────────────────────────────────────
   SALIDA DEL MOUSE
   DERECHA → IZQUIERDA
   ───────────────────────────────────────────────────────── */

.stat:not(:hover)::after{
  animation:statLightOut .55s cubic-bezier(.22,.61,.36,1) forwards;
}


/* Luz entrando: izquierda → derecha */
@keyframes statLightIn{

  0%{
    left:-45%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    left:120%;
    opacity:0;
  }

}


/* Luz saliendo: derecha → izquierda */
@keyframes statLightOut{

  0%{
    left:120%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    left:-45%;
    opacity:0;
  }

}


/* ─────────────────────────────────────────────────────────
   HOVER DE LA TARJETA
   ───────────────────────────────────────────────────────── */

.stat:hover{
  transform:translateY(-4px);

  border-color:rgba(0,132,255,.35);

  box-shadow:
    0 14px 35px rgba(0,80,180,.13),
    0 0 0 1px rgba(0,132,255,.06),
    0 0 25px rgba(0,132,255,.08);
}


/* ─────────────────────────────────────────────────────────
   CONTENIDO
   ───────────────────────────────────────────────────────── */

.stat__value{
  position:relative;
  z-index:3;

  display:block;

  font-family:'Inter Tight',sans-serif;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;

  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  font-variant-numeric:tabular-nums;

  margin-bottom:6px;
}

.stat__label{
  position:relative;
  z-index:3;

  display:block;

  font-size:11.5px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}


/* ══════════════════════════════════════════════════════════
   SECCIONES
   ══════════════════════════════════════════════════════════ */
.contenedor1 {display: flex; justify-content: center; /* Centra horizontalmente */}
.section1{position:relative; height: 100vh; min-height: 100vh; display:flex; align-items:center;  /* vertical */  justify-content:center;  /* horizontal */
background:
  radial-gradient(ellipse 60% 50% at 20% 0%,rgba(0,102,204,.32),transparent 90%),
  radial-gradient(ellipse 10% 10% at 100% 10%,rgba(0,180,216,.22),transparent 90%);}


.section{padding:64px 0;position:relative; min-height: 100vh; display:flex; align-items:center;  /* vertical */  justify-content:center;  /* horizontal */}
.section--surface{background:rgba(244,246,249,.5)}
.section--form{background:linear-gradient(180deg,transparent 0%,rgba(0,102,204,.04) 50%,transparent 100%)}

.section--dark{
  background:var(--bg-dark);color:var(--text-inv);
  border-radius:var(--r-xl);margin:0 12px;padding:64px 0;
  position:relative;overflow:hidden;
}
.section--dark::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,rgba(0,102,204,.32),transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%,rgba(0,180,216,.22),transparent 60%);
  pointer-events:none;
}

.section__head{text-align:center;margin-bottom:36px}
.section__title{font-family:'Inter Tight',sans-serif;font-size:clamp(28px,7vw,44px);font-weight:900;line-height:1.05;letter-spacing:-.035em;margin-bottom:10px}
.section__title--light{color:var(--text-inv)}
.section__subtitle{color:var(--text-muted);font-size:15.5px;max-width:520px;margin:0 auto;line-height:1.5}

/* ══════════════════════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════════════════════ */
.steps{display:grid;gap:14px;max-width:680px;margin:0 auto}
.step{
  position:relative;padding:22px 22px 24px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s ease;overflow:hidden;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh)}

.step--featured{background:var(--bg-dark);color:var(--text-inv);border-color:transparent;box-shadow:var(--sh-glow)}
.step--featured::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(0,180,216,.35),transparent 60%);pointer-events:none}
.step--featured .step__title{color:#fff}
.step--featured .step__text{color:var(--text-inv-muted)}
.step--featured .step__num{color:rgba(255,255,255,.55)}

.step__visual{
  height:88px;border-radius:14px;
  background:rgba(0,102,204,.06);
  border:1px solid rgba(0,102,204,.12);
  margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  padding:12px;gap:12px;position:relative;overflow:hidden;
}
.step--featured .step__visual{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

.mock-file{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-radius:12px;border:1px solid var(--border);color:var(--primary);font-family:'Inter Tight',sans-serif;font-size:12.5px;font-weight:700;box-shadow:var(--sh-sm)}
.mock-file span{color:var(--text)}
.step__upload-bar{position:absolute;bottom:12px;left:12px;right:12px;height:4px;background:rgba(0,102,204,.15);border-radius:2px;overflow:hidden}
.step__upload-bar span{display:block;height:100%;width:0;background:var(--grad-button);border-radius:2px;animation:uploadLoop 3s var(--ease-out) infinite}
@keyframes uploadLoop{0%{width:0}70%{width:100%}100%{width:100%}}

.mock-toggle{display:inline-flex;background:rgba(255,255,255,.08);border-radius:var(--r-full);padding:3px;gap:2px}
.mock-toggle__opt{padding:5px 10px;font-size:10.5px;font-weight:700;color:var(--text-inv-muted);border-radius:var(--r-full);transition:all .4s ease}
.mock-toggle__opt.is-on{background:var(--grad-button);color:#fff;box-shadow:0 2px 8px rgba(0,102,204,.35)}

.mock-slider{width:40px;height:20px;border-radius:20px;background:rgba(0,102,204,.3);position:relative}
.mock-slider__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;animation:slideThumb 3s ease-in-out infinite}
@keyframes slideThumb{0%,100%{left:2px}50%{left:22px}}

.mock-check{width:44px;height:44px;border-radius:50%;background:var(--grad-emerald);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(16,185,129,.35);animation:checkPop 3s ease-in-out infinite}
.mock-check svg{width:22px;height:22px}
@keyframes checkPop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.15)}}
.mock-label{font-family:'Inter Tight',sans-serif;font-size:12.5px;font-weight:700;color:var(--text)}

.step__num{display:block;font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.step__title{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.step__text{font-size:14px;color:var(--text-muted);line-height:1.55}

/* ══════════════════════════════════════════════════════════
   COMPARADOR · técnica clip-path (sin zoom)
   ══════════════════════════════════════════════════════════ */
.compare{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.compare__labels{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11.5px;font-weight:700;letter-spacing:.05em}
.compare__label{padding:6px 14px;border-radius:var(--r-full);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.compare__label--before{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.12)}
.compare__label--after{background:var(--grad-button);color:#fff;box-shadow:0 6px 20px rgba(0,102,204,.35)}

.compare__stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:radial-gradient(
    circle at 50% 50%,
    #0F2236 0%,
    #050B14 100%
  );
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.08);

  touch-action:pan-y;
  user-select:none;
  cursor:ew-resize;

  --pos:50%;
}

/* Ambos videos idénticos, superpuestos, SIN hacks raros */
.compare__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* contain = muestra TODO el video, respeta el aspect real */
  object-fit:cover;
  /* Fondo coherente si hay barras */
  background:#050B14;
}

/* El video "after" (arriba) se recorta con clip-path.
   NO cambia su tamaño → cero zoom. */
.compare__video--after{
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  transition:clip-path .05s linear;
}

/* Ya no necesitamos wrapper .compare__clip — pero por compatibilidad
   con el HTML actual lo dejamos "invisible" */
.compare__clip{
  position:absolute;
  inset:0;
  display:contents; /* el wrapper desaparece del layout */
}

.compare__handle{
  position:absolute;
  top:0;
  left:var(--pos);
  width:2px;
  height:100%;
  background:var(--accent);
  transform:translateX(-50%);
  cursor:ew-resize;
  touch-action:none;
  box-shadow:0 0 20px rgba(0,180,216,.9);
  z-index:3;
}

.compare__handle-knob{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--grad-button);
  color:#fff;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 28px rgba(0,102,204,.55),0 0 0 6px rgba(0,180,216,.15);
  animation:knobPulse 2.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes knobPulse{
  0%,100%{box-shadow:0 8px 28px rgba(0,102,204,.55),0 0 0 6px rgba(0,180,216,.15)}
  50%{box-shadow:0 8px 28px rgba(0,102,204,.55),0 0 0 12px rgba(0,180,216,.05)}
}

/* Responsive: en pantallas muy angostas, reducir knob */
@media (max-width:480px){
  .compare__handle-knob{width:44px;height:44px}
  .compare__labels{font-size:10.5px}
  .compare__label{padding:5px 10px}
}

/* ══════════════════════════════════════════════════════════
   BENTO
   ══════════════════════════════════════════════════════════ */
.bento{display:grid;gap:14px;grid-template-columns:1fr;max-width:900px;margin:0 auto}
.bento__card{
  position:relative;padding:26px 22px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.bento__card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(0,102,204,.3)}
.bento__card--big{padding:32px 24px;background:var(--bg-dark);color:#fff;border-color:transparent}
.bento__card--big .bento__title{color:#fff}
.bento__card--big .bento__text{color:var(--text-inv-muted)}
.bento__card--big .bento__text strong{color:#fff}
.bento__card--big .bento__icon{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15)}
.bento__glow{position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,rgba(0,180,216,.5) 0%,transparent 65%);filter:blur(40px);pointer-events:none}

.bento__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(0,102,204,.10);color:var(--primary);margin-bottom:16px;position:relative;z-index:1}
.bento__icon--cyan{background:rgba(0,180,216,.10);color:var(--cyan)}
.bento__icon--pink{background:rgba(236,72,153,.10);color:var(--pink)}
.bento__icon--lime{background:rgba(132,204,22,.10);color:#65A30D}

.bento__title{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;position:relative;z-index:1}
.bento__text{font-size:14px;color:var(--text-muted);line-height:1.55;position:relative;z-index:1}
.bento__text strong{color:var(--text);font-weight:700}

.bento__demo{margin-top:20px;position:relative;z-index:1}
.bento__timer{font-family:'Inter Tight',sans-serif;font-size:36px;font-weight:900;letter-spacing:-.05em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;margin-bottom:10px}
.bento__progress{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:6px}
.bento__progress span{display:block;height:100%;width:0;background:var(--grad-button);border-radius:3px;animation:bentoProgress 4s var(--ease-out) infinite}
@keyframes bentoProgress{0%{width:0}60%{width:100%}100%{width:100%}}
.bento__demo-label{font-size:11px;color:var(--text-inv-muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

.bento__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chip{padding:5px 11px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);transition:all .3s ease}
.chip--on{background:var(--grad-button);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(0,102,204,.28)}

.bento__price{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.bento__price-from{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.bento__price-val{font-family:'Inter Tight',sans-serif;font-size:30px;font-weight:900;letter-spacing:-.04em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.bento__card--wide{display:flex;gap:18px;align-items:flex-start}
.bento__card--wide .bento__icon{margin-bottom:0;flex-shrink:0}
.bento__wide-content{display:grid;gap:10px}
.bento__badges{display:flex;gap:8px;flex-wrap:wrap}
.trust-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-full);background:rgba(16,185,129,.1);color:#047857;font-size:11px;font-weight:700;border:1px solid rgba(16,185,129,.2)}

/* ══════════════════════════════════════════════════════════
   TESTIMONIOS
   ══════════════════════════════════════════════════════════ */
.testimonials{display:grid;gap:14px;max-width:900px;margin:0 auto}
.testi{
  padding:26px 22px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);display:grid;gap:14px;
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.testi__stars{color:var(--amber);font-size:15px;letter-spacing:2px}
.testi__quote{font-size:14.5px;line-height:1.6;color:var(--text);font-weight:500}
.testi__author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.testi__avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  display:grid;place-items:center;color:#fff;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:14px;
  flex-shrink:0;box-shadow:0 4px 12px rgba(0,102,204,.2);
}
.testi__name{font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.01em}
.testi__role{font-size:12.5px;color:var(--text-muted)}

/* ══════════════════════════════════════════════════════════
   CAROUSEL EJEMPLOS
   ══════════════════════════════════════════════════════════ */
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 24px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}

.card-model{
  scroll-snap-align:center;position:relative;padding:26px 22px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.card-model:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(0,102,204,.3)}
.card-model--popular{border-color:rgba(0,102,204,.35)}
.card-model--recommended{background:var(--bg-dark);color:#fff;border-color:transparent}
.card-model--recommended .card-model__title{color:#fff}
.card-model--recommended .card-model__text{color:var(--text-inv-muted)}
.card-model--recommended .card-model__num{color:rgba(255,255,255,.15)}

.card-model__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.card-model__num{font-family:'Inter Tight',sans-serif;font-size:44px;font-weight:900;line-height:1;letter-spacing:-.05em;color:var(--border)}
.card-model__badge{padding:5px 11px;border-radius:var(--r-full);background:var(--grad-button);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,102,204,.35)}
.card-model__badge--alt{background:var(--grad-emerald);box-shadow:0 4px 12px rgba(16,185,129,.35)}
.card-model__title{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.card-model__text{font-size:13.5px;color:var(--text-muted);line-height:1.5;flex:1;margin-bottom:6px}

/* ══════════════════════════════════════════════════════════
   FORMULARIO · COMPACTO / PREMIUM
   ══════════════════════════════════════════════════════════ */

.form-card{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:1px 1px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  gap:15px;
}

.form-card__glow{
  position:absolute;
  top:-100px;
  right:-100px;
  width:320px;
  height:320px;
  background:radial-gradient(
    circle,
    rgba(0,102,204,.16) 0%,
    transparent 65%
  );
  filter:blur(30px);
  pointer-events:none;
}

.form-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(0,102,204,.28),
    transparent 50%,
    rgba(0,180,216,.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}


/* ─────────────────────────────────────────────────────────
   CONTENEDOR
   ───────────────────────────────────────────────────────── */

.form{
  display:grid;
  gap:18px;
  position:relative;
  z-index:1;
}


/* ─────────────────────────────────────────────────────────
   PROGRESO
   ───────────────────────────────────────────────────────── */

.form-progress{
  display:grid;
  gap:5px;
  margin-bottom:1px;
}

.form-progress__bar{
  height:3px;
  background:var(--surface-3);
  border-radius:3px;
  overflow:hidden;
}

.form-progress__bar span{
  display:block;
  height:100%;
  width:0;
  background:var(--grad-button);
  border-radius:3px;
  transition:width .5s var(--ease-out);
}

.form-progress__text{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:right;
}


/* ─────────────────────────────────────────────────────────
   CAMPOS
   ───────────────────────────────────────────────────────── */

.field{
  display:grid;
  gap:7px;
}

.field--conditional{
  margin-top:3px;
  padding:11px 12px;
  background:rgba(0,102,204,.045);
  border-radius:var(--r);
  border:1px solid rgba(0,102,204,.11);
  animation:slideDown .3s var(--ease);
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
}

.field__label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Inter Tight',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}

.field__label--sub{
  font-size:12px;
  color:var(--text-muted);
  font-weight:600;
}

.field__num{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--grad-button);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  flex-shrink:0;
  box-shadow:0 2px 7px rgba(0,102,204,.30);
}

.req{
  color:var(--pink);
  font-weight:800;
}


/* ─────────────────────────────────────────────────────────
   ERRORES
   ───────────────────────────────────────────────────────── */

.field__error{
  font-size:12px;
  color:var(--pink);
  min-height:0;
  display:none;
  font-weight:500;
  padding-left:30px;
}

.field__error.is-visible{
  display:block;
}


/* ─────────────────────────────────────────────────────────
   INPUTS
   ───────────────────────────────────────────────────────── */

.input-wrap{
  position:relative;
}

.input-wrap__icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  pointer-events:none;
  transition:color .2s ease;
}

.input-wrap:focus-within .input-wrap__icon{
  color:var(--primary);
}

.input,
.select{
  width:100%;
  min-height:46px;
  padding:11px 15px;
  padding-left:41px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r);
  background:rgba(255,255,255,.72);
  color:var(--text);
  font-size:12px;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
  -webkit-appearance:none;
  appearance:none;
}

.select{
  padding-left:14px;
  padding-right:40px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230066CC' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}

.input:focus,
.select:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,102,204,.11);
}

.input.is-invalid,
.select.is-invalid{
  border-color:var(--pink);
  background:rgba(236,72,153,.04);
  animation:shake .4s ease;
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

.input::placeholder{
  color:var(--text-muted);
  opacity:.7;
}


/* ─────────────────────────────────────────────────────────
   ARCHIVO
   ───────────────────────────────────────────────────────── */
   .file-drop1{
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     gap:6px;
     min-height:50px;
     padding:10px;
     border:1.5px dashed var(--border-strong);
     border-radius:var(--r-lg);
     background:rgba(255,255,255,.6);
     cursor:pointer;
     text-align:center;
     transition:all .25s var(--ease);
     position:relative;
     overflow:hidden;
   }

.file-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:72px;
  padding:10px;
  border:1.5px dashed var(--border-strong);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.6);
  cursor:pointer;
  text-align:center;
  transition:all .25s var(--ease);
  position:relative;
  overflow:hidden;
}

.file-drop::before, .file-drop1::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at center,
    rgba(0,102,204,.08),
    transparent 70%
  );
  opacity:0;
  transition:opacity .25s ease;
}

.file-drop:hover,
.file-drop1:hover,
.file-drop.is-dragover{
  border-color:var(--primary);
  background:rgba(0,102,204,.04);
  transform:translateY(-1px);
}

.file-drop:hover::before,
.file-drop.is-dragover::before{
  opacity:1;
}

.file-drop__icon{
  width:23px;
  height:23px;
  color:var(--primary);
  position:relative;
  z-index:1;
  transition:transform .3s var(--ease);
}

.file-drop:hover .file-drop__icon{
  transform:translateY(-2px);
}

.file-drop__title{
  font-family:'Inter Tight',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  position:relative;
  z-index:1;
}

.file-drop__hint{
  font-size:11.5px;
  color:var(--text-muted);
  position:relative;
  z-index:1;
}

.file-drop.has-file{
  border-style:solid;
  border-color:var(--lime);
  background:rgba(132,204,22,.06);
}

.file-drop.has-file .file-drop__icon{
  color:#65A30D;
}

.file-drop.has-file .file-drop__title{
  color:#365314;
}


/* ─────────────────────────────────────────────────────────
   OPCIONES
   ───────────────────────────────────────────────────────── */

.options{
  display:grid;
  gap:8px;
}

.options--inline{
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.options--inlinepor2{
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}


/* ─────────────────────────────────────────────────────────
   TARJETAS DE OPCIÓN
   ───────────────────────────────────────────────────────── */

.option{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  transition:all .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}

.option:hover{
  border-color:rgba(0,102,204,.4);
  background:rgba(0,102,204,.03);
  transform:translateY(-1px);
}

.option:has(input:checked){
  border-color:var(--primary);
  background:rgba(0,102,204,.06);
  box-shadow:
    0 0 0 3px rgba(0,102,204,.07),
    0 4px 14px rgba(0,102,204,.08);
}

.option--compact{
  padding:10px 11px;
  justify-content:center;
  text-align:center;
  gap:5px;
  flex-direction:column;
  align-items:center;
  min-height:48px;
}

.option--compact .option__body{
  text-align:center;
}

.option--compact .option__check{
  position:absolute;
  top:6px;
  right:6px;
}

.option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}


/* ─────────────────────────────────────────────────────────
   CHECK
   ───────────────────────────────────────────────────────── */

.option__check{
  display:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--grad-button);
  color:#fff;
  place-items:center;
  flex-shrink:0;
  margin-top:1px;
  box-shadow:0 3px 9px rgba(0,102,204,.30);
  animation:checkIn .3s var(--ease) both;
}

.option__check svg{
  width:11px;
  height:11px;
}

.option:has(input:checked) .option__check{
  display:grid;
}

@keyframes checkIn{
  from{
    transform:scale(0) rotate(-45deg);
  }
  to{
    transform:scale(1) rotate(0);
  }
}


/* ─────────────────────────────────────────────────────────
   TEXTO OPCIONES
   ───────────────────────────────────────────────────────── */

.option__body{
  display:grid;
  gap:2px;
}

.option__title{
  font-family:'Inter Tight',sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.01em;
}

.option__desc{
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.35;
}

.option:focus-within{
  outline:2px solid var(--primary);
  outline-offset:2px;
}


/* ─────────────────────────────────────────────────────────
   LEGAL
   ───────────────────────────────────────────────────────── */

.form__legal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:-2px;
  font-size:11px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.4;
}

.form__legal svg{
  width:11px;
  height:11px;
  flex-shrink:0;
  color:var(--emerald);
}
/* ══════════════════════════════════════════════════════════
   SELECTOR DE PONDERACIÓN
   ══════════════════════════════════════════════════════════ */

.mode-selector{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.mode-selector__item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:8px 10px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r);
  background:rgba(255,255,255,.72);
  cursor:pointer;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.mode-selector__item:hover{
  border-color:rgba(0,102,204,.4);
  background:rgba(0,102,204,.035);
  transform:translateY(-1px);
}

.mode-selector__item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mode-selector__content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.mode-selector__icon{
  width:18px;
  height:18px;
  color:var(--text-muted);
  transition:
    color .2s ease,
    transform .2s ease;
}

.mode-selector__title{
  font-family:'Inter Tight',sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.01em;
}

.mode-selector__check{
  position:absolute;
  top:6px;
  right:6px;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--grad-button);
  color:#fff;
  opacity:0;
  transform:scale(.5);
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.mode-selector__check svg{
  width:9px;
  height:9px;
}

.mode-selector__item:has(input:checked){
  border-color:var(--primary);
  background:rgba(0,102,204,.065);
  box-shadow:
    0 0 0 3px rgba(0,102,204,.06),
    0 4px 14px rgba(0,102,204,.08);
}

.mode-selector__item:has(input:checked) .mode-selector__icon{
  color:var(--primary);
  transform:scale(1.05);
}

.mode-selector__item:has(input:checked) .mode-selector__check{
  opacity:1;
  transform:scale(1);
}

.mode-selector__item:focus-within{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq{max-width:720px;margin:0 auto;display:grid;gap:12px}
.faq__item{
  border:1px solid var(--border);border-radius:var(--r);
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;transition:all .25s var(--ease);
}
.faq__item:hover{border-color:rgba(0,102,204,.3)}
.faq__item[open]{box-shadow:var(--sh);border-color:rgba(0,102,204,.25)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'';width:22px;height:22px;border-radius:50%;
  background:rgba(0,102,204,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%230066CC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
  transition:transform .3s var(--ease),background-color .2s ease;
  flex-shrink:0;
}
.faq__item[open] summary::after{
  transform:rotate(135deg);
  background-color:rgba(0,180,216,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1 5h8' stroke='%2300B4D8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq__item p{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.6}

/* ══════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════ */
.contact-block{max-width:720px;margin:0 auto;display:grid;gap:20px}
.contact-block > *{padding:24px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer{
  padding:48px 0 110px;
  text-align:center;
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgba(11,44,77,.03) 100%);
}
.footer__brand{
  display:grid;gap:18px;justify-items:center;margin-bottom:24px;
}
.footer__logo{
  width:220px;height:auto;max-width:80vw;
  filter:drop-shadow(0 4px 12px rgba(11,44,77,.08));
}
.footer__tagline{
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  max-width:380px;
  line-height:1.6;
  padding:0 20px;
}
.footer__copy{
  font-size:12.5px;
  color:var(--text-soft);
  padding-top:20px;
  border-top:1px solid var(--border);
  max-width:280px;
  margin:0 auto;
  line-height:1.6;
}

/* ══════════════════════════════════════════════════════════
   STICKY CTA
   ══════════════════════════════════════════════════════════ */
.sticky-cta{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:90;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 24px;
  background:var(--grad-button);background-size:200% 200%;color:#fff;
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  border-radius:var(--r);
  box-shadow:0 16px 40px rgba(0,102,204,.45),0 4px 12px rgba(0,180,216,.25);
  opacity:0;transform:translateY(140%);
  transition:opacity .25s ease,transform .4s var(--ease);
  pointer-events:none;
  animation:gradShift 6s ease infinite;
}
.sticky-cta.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.sticky-cta:active{transform:translateY(0) scale(.98)}

/* ══════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════ */
.toast-stack{position:fixed;top:calc(var(--header-h) + 12px);left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;pointer-events:none;width:calc(100% - 32px);max-width:380px}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--bg-dark);color:#fff;border-radius:var(--r);
  box-shadow:0 16px 40px rgba(0,0,0,.3);
  font-size:13.5px;font-weight:600;
  opacity:0;transform:translateY(-12px);
  animation:toastIn .35s var(--ease) forwards;
  pointer-events:auto;
}
.toast--error{background:linear-gradient(135deg,#DC2626,#EC4899)}
.toast--success{background:linear-gradient(135deg,#0052A3,#00B4D8)}
.toast__icon{display:grid;place-items:center;width:20px;height:20px;flex-shrink:0}
@keyframes toastIn{to{opacity:1;transform:translateY(0)}}
.toast.is-out{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px)}}



/* ══════════════════════════════════════════════════════════
   CALIFICACIÓN
   ══════════════════════════════════════════════════════════ */
.stars{
    white-space:nowrap;
    color:#fbbf24;
    font-size:20px;
    letter-spacing: 2px;
    text-align:right;
}

.rating-summary{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:25px;

}
.rating-fil{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:8px;
}

.rating-fil .stars-small{
    width:95px;
    text-align:right;
    color:#f5b301;
    font-size:17px;
    letter-spacing:-2px;
    white-space:nowrap;
}

.rating-fil .rating-percent{
    width:50px;
    text-align:left;
    color:#333;
    font-size:13px;
}
.rating-bars{
    width:320px;
    display:grid;
    gap:10px;
    margin:0 auto;
}

.rating-row{
    display:grid;
    grid-template-columns:90px 1fr 50px;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:13px;
    font-weight:600;
}

.stars-small{
    white-space:nowrap;
    color:#fbbf24;
    font-size:16px;
    letter-spacing:-2px;
    text-align:right;
}

.rating-percent{
    text-align:left;
    color:var(--text-muted);
    font-weight:600;
}

@media(max-width:700px){
.rating-bars{
    width:100%;
    max-width:320px;
}

.rating-row{
    grid-template-columns:90px 1fr 45px;
}

}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (min-width:480px){
  .hero__actions{grid-template-columns:1fr 1fr;max-width:480px}
  .stats__grid{grid-template-columns:repeat(4,1fr)}
  .stat__value{font-size:28px}
}

@media (min-width:640px){
  .container{padding:0 28px}
  .hero{padding:72px 0 48px}
  .section{padding:88px 0}
  .section--dark{margin:0 24px;padding:88px 0}
  .carousel{grid-auto-columns:44%;padding:8px 28px 24px;margin:0 -28px}
  .form-card{padding:36px 32px; gap:20px}
  .compare__stage{aspect-ratio:16/9}
  .bento{grid-template-columns:repeat(2,1fr);gap:16px}
  .bento__card--big{grid-column:span 2;padding:40px 32px}
  .bento__card--wide{grid-column:span 2}
  .steps{max-width:560px}
  .nav{display:flex}
  .testimonials{grid-template-columns:1fr}
}

@media (min-width:992px){
  :root{--header-h:72px}
  .container{padding:0 32px}
  .hero{padding:96px 0 64px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero__title{font-size:52px;text-align:left}
  .hero__subtitle{font-size:18px;max-width:560px;text-align:left;margin-left:0}
  .hero__badge{margin-left:0}
  .hero__actions{justify-content:flex-start;max-width:520px;grid-template-columns:auto auto;margin-left:0}
  .hero__actions .btn{width:auto;padding-left:32px;padding-right:32px}
  .hero__bullets{justify-content:flex-start}
  .hero__visual{margin-top:0}
  .section{padding:112px 0}
  .section--dark{padding:112px 0}
  .section__title{font-size:48px}
  .stats__grid{gap:16px}
  .stat{padding:28px 20px}
  .stat__value{font-size:36px}
  .steps{grid-template-columns:repeat(3,1fr);max-width:980px;gap:20px}
  .step{padding:26px 24px}
  .bento{grid-template-columns:repeat(3,1fr);gap:18px;max-width:1040px}
  .bento__card--big{grid-column:span 2;padding:44px 36px}
  .bento__card--wide{grid-column:span 3}
  .testimonials{grid-template-columns:repeat(3,1fr);max-width:1040px}
  .carousel{
    grid-auto-columns:unset;
    grid-template-columns:repeat(4,1fr);
    grid-auto-flow:row;
    overflow:visible;padding:0;margin:0;scroll-snap-type:none;
  }

  .form-card{padding:48px 44px; gap:10px}
  .sticky-cta{display:none}
  .footer{padding:64px 0 32px}
  .form{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .aurora__blob{animation:none}
  .dash{animation:none;transform:none}
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}

.btn:disabled:hover{
  transform:none;
}
     /* ============================================================
       SECCIÓN PQR - VERSIÓN ESTABLE
       ============================================================ */
    .pqr-section {
        width: 100%;
        margin: 0 auto;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .pqr-header {
        text-align: center;
        margin-bottom: clamp(30px, 4vw, 45px);
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-badge {
        display: inline-block;
        /*background: linear-gradient(135deg, #dbeafe, #bfdbfe);*/
        color: #1e40af;
        font-size: clamp(0.65rem, 0.75vw, 0.8rem);
        font-weight: 700;
        padding: 6px 18px;
        border-radius: 50px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 12px;
        animation: pulseBadge 2s ease-in-out infinite;
    }

    @keyframes pulseBadge {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .pqr-title {
        font-family: 'Michroma', sans-serif;
        font-size: clamp(1.6rem, 2.8vw, 2.6rem);
        font-weight: 300;
        color: #1a1a2e;
        margin-bottom: 12px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-title .highlight {
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .pqr-subtitle {
        font-size: clamp(0.9rem, 1.05vw, 1.1rem);
        color: #6b7280;
        max-width: 550px;
        margin: 0 auto;
        line-height: 1.7;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-subtitle strong {
        color: #1a1a2e;
        font-weight: 600;
    }

    /* Contenido */
    .pqr-content {
        background: #ffffff;
        border-radius: clamp(20px, 2.5vw, 28px);
        padding: clamp(28px, 3.5vw, 45px);
         transition: all 0.6s ease;
        position: relative;
        overflow: hidden;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .pqr-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
       /* background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
        background-size: 200% 100%;*/
        animation: borderShine 4s ease-in-out infinite;
    }

    @keyframes borderShine {
        0%, 100% { background-position: 0% 0%; }
        50% { background-position: 100% 0%; }
    }

    .pqr-contentxx:hover {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
        border-color: #e5e7eb;
    }

    .pqr-text {
        padding-right: clamp(10px, 2vw, 30px);
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-text-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Frase de impacto emocional */
    .pqr-emotional-hook {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border-radius: 16px;
        padding: 16px 20px;
        position: relative;
        margin-bottom: 6px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .quote-icon {
        font-size: 2.4rem;
        color: #2563eb;
        opacity: 0.2;
        position: absolute;
        top: 4px;
        left: 12px;
        font-family: Georgia, serif;
        line-height: 1;
    }

    .hook-text {
        font-size: clamp(1rem, 1.1vw, 1.15rem);
        color: #1a1a2e;
        line-height: 1.6;
        margin: 0;
        padding-left: 28px;
        font-weight: 500;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hook-text strong {
        color: #2563eb;
    }

    .pqr-description {
        font-size: clamp(0.88rem, 0.95vw, 1rem);
        color: #4b5563;
        line-height: 1.9;
        margin: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-description strong {
        color: #1a1a2e;
        font-weight: 600;
    }

    /* Beneficios */
    .pqr-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
        margin: 8px 0 16px 0;
        padding: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CTA con urgencia */
    .pqr-cta-container {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border-radius: 16px;
        padding: 16px 20px;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        border: 1px solid rgba(37, 99, 235, 0.08);
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-cta-text {
        flex: 1;
        min-width: 180px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .cta-highlight {
        font-size: clamp(0.9rem, 0.98vw, 1.02rem);
        font-weight: 700;
        color: #1a1a2e;
    }

    .cta-sub {
        font-size: clamp(0.8rem, 0.86vw, 0.9rem);
        color: #4b5563;
        line-height: 1.6;
    }

    .cta-sub strong {
        color: #2563eb;
    }

    .pqr-urgency-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #dbeafe;
        color: #1e40af;
        font-weight: 600;
        font-size: clamp(0.7rem, 0.76vw, 0.8rem);
        padding: 6px 14px;
        border-radius: 50px;
        white-space: nowrap;
        border: 1px solid #bfdbfe;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pulse-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #2563eb;
        border-radius: 50%;
        animation: pulseDot 1.5s ease-in-out infinite;
    }

    @keyframes pulseDot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* PQR Card */
    .pqr-card {
        background: linear-gradient(145deg, #ffffff, #fafbfc);
        border-radius: clamp(16px, 2vw, 20px);
        padding: clamp(24px, 3vw, 35px) clamp(20px, 2.5vw, 30px);
        border: 1px solid #f0f0f0;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        transition: all 0.6s ease;
        position: relative;
        overflow: hidden;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-cardxxx::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #2563eb, #7c3aed);
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .pqr-cardxxx:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(37, 99, 235, 0.08);
        border-color: #dbeafe;
    }

    .pqr-cardxxx:hover::before {
        opacity: 1;
    }

    /* Trust badge */
    .trust-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ecfdf5;
        color: #065f46;
        font-size: clamp(0.6rem, 0.66vw, 0.7rem);
        font-weight: 600;
        padding: 4px 14px;
        border-radius: 50px;
        margin-bottom: 16px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .trust-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        background: #10b981;
        color: white;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
    }

    .pqr-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        border-radius: 50%;
        margin-bottom: 16px;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-icon {
        width: 32px;
        height: 32px;
        color: white;
    }

    .pqr-card-title {
        font-family: 'Poppins', sans-serif;
        font-size: clamp(1.1rem, 1.3vw, 1.35rem);
        font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 6px 0;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-card-title .highlight {
        color: #2563eb;
        -webkit-text-fill-color: #2563eb;
    }

    .pqr-card-subtitle {
        font-size: clamp(0.8rem, 0.88vw, 0.9rem);
        color: #6b7280;
        margin: 0 0 20px 0;
        line-height: 1.6;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-card-subtitle strong {
        color: #1a1a2e;
    }

    /* Formulario */
    .pqr-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .form-group {
        width: 100%;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .form-select,
    .form-input,
    .form-textarea {
        width: 100%;
        padding: 12px 16px;
        font-size: clamp(0.85rem, 0.9vw, 0.95rem);
        font-family: 'Inter', sans-serif;
        border: 1.5px solid #e5e7eb;
        border-radius: 12px;
        background: #fafbfc;
        transition: all 0.4s ease;
        color: #1a1a2e;
        outline: none;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .form-select:focus,
    .form-input:focus,
    .form-textarea:focus {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

    .form-select:hover,
    .form-input:hover,
    .form-textarea:hover {
        background: #ffffff;
        border-color: #d1d5db;
    }

    .form-textarea {
        resize: vertical;
        min-height: 100px;
        font-family: 'Inter', sans-serif;
    }

    .form-select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 14px;
        cursor: pointer;
    }

    /* Botón de envío */
    .pqr-submit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 28px;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        color: white;
        border: none;
        border-radius: 50px;
        font-weight: 700;
        font-size: clamp(0.85rem, 0.92vw, 0.95rem);
        text-decoration: none;
        transition: all 0.5s ease;
        width: 100%;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pqr-submit-btn::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: rotate(45deg) translateX(-100%);
        transition: transform 0.8s ease;
    }

    .pqr-submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4);
        color: white;
        text-decoration: none;
    }

    .pqr-submit-btn:hover::after {
        transform: rotate(45deg) translateX(100%);
    }

    .pqr-submit-btn:active {
        transform: scale(0.97);
    }

    .pqr-submit-btn svg {
        flex-shrink: 0;
    }

    .btn-arrow {
        transition: transform 0.4s ease;
        display: inline-block;
    }

    .pqr-submit-btn:hover .btn-arrow {
        transform: translateX(4px);
    }

    /* Footer */
    .pqr-footer {
        margin-top: 18px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .trust-signals {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .signal-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: clamp(0.65rem, 0.7vw, 0.75rem);
        color: #6b7280;
        font-weight: 500;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .signal-icon {
        font-size: 0.8rem;
    }

    /* Reutilizar estilos de beneficios */
    .benefit-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 12px;
        transition: all 0.4s ease;
        background: #fafbfc;
        border: 1px solid transparent;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .benefit-item:hover {
        background: #ffffff;
        border-color: #e5e7eb;
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .benefit-icon {
        font-size: clamp(1.2rem, 1.3vw, 1.4rem);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .benefit-item div {
        display: flex;
        flex-direction: column;
    }

    .benefit-title {
        font-size: clamp(0.82rem, 0.88vw, 0.92rem);
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.3;
    }

    .benefit-desc {
        font-size: clamp(0.7rem, 0.76vw, 0.8rem);
        color: #6b7280;
        line-height: 1.4;
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 992px) {
        .pqr-text {
            padding-right: 0;
            margin-bottom: 24px;
        }
    }

    @media (max-width: 768px) {
        .pqr-benefits {
            grid-template-columns: 1fr 1fr;
            gap: 8px 12px;
        }
        
        .pqr-card {
            max-width: 100%;
        }

        .pqr-cta-container {
            flex-direction: column;
            align-items: flex-start;
        }

        .pqr-urgency-badge {
            align-self: flex-start;
        }

        .trust-signals {
            gap: 10px;
        }
    }

    @media (max-width: 480px) {
        .pqr-benefits {
            grid-template-columns: 1fr;
            gap: 6px;
        }
        
        .pqr-content {
            padding: 18px 14px;
        }
        
        .benefit-item {
            padding: 6px 10px;
        }
        
        .pqr-card {
            padding: 20px 16px;
        }
        
        .pqr-submit-btn {
            padding: 12px 18px;
            font-size: 0.82rem;
        }

        .pqr-emotional-hook {
            padding: 12px 16px;
        }

        .hook-text {
            padding-left: 20px;
            font-size: 0.95rem;
        }

        .quote-icon {
            font-size: 1.8rem;
            left: 8px;
        }

        .trust-signals {
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .form-select,
        .form-input,
        .form-textarea {
            font-size: 0.85rem;
            padding: 10px 14px;
        }
    }

    /* ============================================================
       ANIMACIONES ADICIONALES
       ============================================================ */
    @media (max-width: 768px) {
        .wow {
            animation-name: none !important;
            visibility: visible !important;
        }
    }
/* =========================================================
   BOTÓN WHATSAPP · ESTILO MODERNO
   ========================================================= */

.pqr-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Botón principal */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    background: #25D366;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        0 6px 16px rgba(37, 211, 102, 0.25);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

/* Ícono WhatsApp */
.pqr-card > .fa-whatsapp {
    display: none;
}

/* Crear el ícono dentro del botón */
.whatsapp-btn::before {
    content: "";
    font-family: "Font Awesome 6 Brands";
    font-size: 22px;
    line-height: 1;
}

/* Hover */
.whatsapp-btn:hover {
    background: #20bd5a;
    color: #ffffff;
    text-decoration: none;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(37, 211, 102, 0.35);
}

/* Click */
.whatsapp-btn:active {
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(37, 211, 102, 0.25);
}

/* =========================================================
   ANIMACIÓN SUAVE DEL ÍCONO
   ========================================================= */

@keyframes whatsappPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.whatsapp-btn::before {
    animation: whatsappPulse 2.2s ease-in-out infinite;
}

/* =========================================================
   EFECTO BRILLO AL PASAR EL MOUSE
   ========================================================= */

.whatsapp-btn {
    position: relative;
    overflow: hidden;
}

.whatsapp-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.22),
        transparent
    );

    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.whatsapp-btn:hover::after {
    left: 140%;
}
[hidden]{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE PERFORMANCE LAYER · CuadrosdeControl.com
   Mantiene la identidad visual, elimina efectos costosos
   en pantallas táctiles y reduce repaints durante el scroll.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px){

  /* ── 1. Scroll y viewport ─────────────────────────────── */
  html{
    scroll-behavior:auto;
    scroll-padding-top:calc(var(--header-h) + 12px);
  }

  body{
    overflow-x:hidden;
    overscroll-behavior-x:none;
  }

  /* Evita que el navegador tenga que mantener composiciones
     innecesarias durante el desplazamiento. */
  *,*::before,*::after{
    -webkit-tap-highlight-color:transparent;
  }
    
  /* ── 2. Aurora: conservar ambiente, eliminar animación pesada ── */
  .aurora__blob{
    animation:none !important;
    will-change:auto;
    filter:blur(58px);
  }

  .aurora__blob--1{
    width:360px;
    height:360px;
    top:-120px;
    left:-150px;
    opacity:.28;
  }

  .aurora__blob--2,
  .aurora__blob--3{
    display:none;
  }

  .aurora__grid,
  .aurora__noise{
    display:none;
  }

  /* ── 3. Header: mismo aspecto, sin backdrop-filter ───── */
  .header{
    background:rgba(250,250,251,.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .header.is-scrolled{
    background:rgba(250,250,251,.99);
  }

  /* ── 4. Botones: sin gradiente animado ni blur ────────── */
  .btn--primary{
    background-size:100% 100%;
    animation:none;
  }

  .btn--primary::before{
    display:none;
  }

  .btn--ghost{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.96);
  }

  /* En táctil no existe hover real. Evita estados hover
     persistentes y transformaciones innecesarias. */
  .btn:hover,
  .btn--primary:hover,
  .btn--dark:hover{
    transform:none;
  }

  /* ── 5. Hero/dashboard: conserva profundidad, no flotación ── */
  .dash{
    animation:none;
    transform:none;
    box-shadow:0 18px 45px rgba(11,44,77,.22),
               0 4px 14px rgba(11,44,77,.12),
               0 0 0 1px rgba(255,255,255,.03) inset;
  }

  .dash:hover{
    transform:none;
  }

  .dash__badge-live span{
    animation:none;
  }

  .dash__glow{
    display:none;
  }

  /* ── 6. Marquee: texto estático en móvil ─────────────── */
  .marquee__track{
    animation:none;
    width:100%;
    justify-content:center;
  }

  .marquee__group:nth-child(2){
    display:none;
  }

  .marquee__track{
    gap:20px;
    flex-wrap:wrap;
  }

  .marquee__group{
    gap:20px;
  }

  /* ── 7. Tarjetas: sustituir glassmorphism por superficie sólida ── */
  .stat,
  .step,
  .bento__card,
  .form-card,
  .faq__item,
  .contact-block > *,
  .carousel__card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.96);
  }

  .stat:hover,
  .step:hover,
  .bento__card:hover{
    transform:none;
  }

  /* Mantiene la identidad de las tarjetas de estadísticas,
     pero evita animar el haz de luz al pasar el dedo. */
  .stat::after{
    display:none;
  }

  /* ── 8. Steps / mini-demostraciones ───────────────────── */
  .step__upload-bar span,
  .mock-slider__thumb,
  .mock-check{
    animation:none;
  }

  /* Estado visual equivalente al final de la animación. */
  .step__upload-bar span{
    width:100%;
  }

  .mock-slider__thumb{
    left:22px;
  }

  .mock-check{
    transform:scale(1);
  }

  /* ── 9. Comparador ───────────────────────────────────── */
  .compare__label{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .compare__stage{
    box-shadow:0 18px 45px rgba(0,0,0,.30);
  }

  .compare__handle{
    box-shadow:0 0 10px rgba(0,180,216,.65);
  }

  .compare__handle-knob{
    animation:none;
  }

  /* ── 10. Bento/progress ───────────────────────────────── */
  .bento__glow{
    display:none;
  }

  .bento__progress span{
    animation:none;
  }

  /* ── 11. Formulario principal ─────────────────────────── */
  .form-card{
    box-shadow:0 12px 32px rgba(11,44,77,.08);
  }

  .form-card__glow{
    display:none;
  }

  /* ── 12. Formulario flotante ──────────────────────────── */
  .floating-form-container{
    filter:none;
  }

  .floating-form-inner{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .floating-form{
    filter:none;
  }

  .floating-form-container::before,
  .miniature-icon-wrapper::before,
  .miniature-icon-wrapper::after{
    animation:none;
  }

  /* Conserva el aspecto de la miniatura sin pulsación infinita. */
  .miniature-icon-wrapper{
    box-shadow:0 6px 20px rgba(37,117,252,.25);
  }

  /* En móvil el formulario se abre por la clase .expanded;
     hover no debe disparar la versión pesada. */
  .floating-form-container:hover:not(.expanded){
    width:130px;
    height:170px;
    min-height:0;
    max-height:none;
    border-radius:20px;
    transform:translateY(-50%) scale(.95);
    filter:none;
  }

  .floating-form-container:hover:not(.expanded) .floating-form-inner{
    border-radius:20px;
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* ── 13. FAQ / contacto ───────────────────────────────── */
  .faq__item,
  .contact-block > *{
    box-shadow:var(--sh-sm);
  }

  /* ── 14. CTA fijo: elimina gradiente animado ──────────── */
  .sticky-cta{
    box-shadow:0 8px 24px rgba(0,102,204,.20);
  }

  /* Cualquier gradiente animado usado por el CTA queda estático. */
  .sticky-cta,
  .sticky-cta::before,
  .sticky-cta::after{
    animation:none !important;
  }

  /* ── 15. Toasts: animación breve, no continua ────────── */
  .toast{
    will-change:auto;
  }

  /* ── 16. Secciones: menos trabajo de layout vertical ─── */
  .section1,
  .centrado{
    min-height:100svh;
    height:auto;
  }

  .section1{
    padding-top:calc(var(--header-h) + 24px);
    padding-bottom:48px;
  }

  .section{
    min-height:auto;
    padding:56px 0;
  }

  .section--dark{
    padding:56px 0;
  }

  /* ── 17. Evitar transforms/transition de hover en touch ── */
  .stat:hover::after,
  .stat:not(:hover)::after{
    animation:none !important;
  }

}

/* ══════════════════════════════════════════════════════════
   TOUCH DEVICES · evitar hover persistente sin afectar desktop
   ══════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse){
  .stat:hover,
  .step:hover,
  .bento__card:hover,
  .btn:hover,
  .dash:hover{
    transform:none;
  }

  .stat::after{
    animation:none !important;
  }
}
/* ============================================================
   OPTIMIZACIÓN MÓVIL · SIN CAMBIAR APARIENCIA
   ============================================================ */

@media (max-width: 767px) {

    /* Evita cálculos innecesarios durante el scroll */
    html {
        scroll-behavior: auto;
    }

    /* Mantener la imagen estable desde el primer render */
    .section1 {
        contain: layout paint;
    }

    .contenedor1 {
        width: 100%;
        min-height: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imagen1 {
        display: block;
        width: clamp(320px, 60vw, 800px);
        max-width: 90%;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* Reducir trabajo de composición de fondos */
    .aurora {
        contain: paint;
    }

    /* Evitar que elementos invisibles participen en eventos */
    [data-reveal]:not(.is-revealed) {
        pointer-events: none;
    }
}