*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   font-size: 16px;
   scroll-behavior: smooth
}

html.transition,
html.transition * {
   transition: background-color .35s ease,
      color .25s ease,
      border-color .25s ease,
      fill .25s ease,
      stroke .25s ease !important;
}

body {
   font-family: 'DM Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   transition: background .3s, color .3s
}

a {
   text-decoration: none;
   color: inherit
}

img {
   display: block;
   max-width: 100%
}

ul {
   list-style: none
}

/* ═══════════════════════════════════════
   DARK MODE (default)
════════════════════════════════════════ */
:root {
   --g: #00d4c0;
   --gd: #00b5a3;
   --gdd: #008c7e;
   --gl: rgba(77, 143, 255, .11);
   --gl2: rgba(77, 143, 255, .20);
   --glt: rgba(77, 143, 255, .06);
   --bg0: #04070f;
   --bg1: #080e1c;
   --bg2: #0d1526;
   --bg3: #121d32;
   --bg4: #18253e;
   --brd: rgba(255, 255, 255, .06);
   --brd2: rgba(255, 255, 255, .10);
   --brd3: rgba(255, 255, 255, .17);
   --t1: #edf3ff;
   --t2: #aec0db;
   --t3: #627a98;
   --t4: #3e5470;
   --hero-bg: #020509;
   --nav-solid-bg: rgba(4, 7, 15, .95);
   --mob-bg: #080e1c;
   --sh: 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 24px rgba(0, 0, 0, .48);
   --shg: 0 0 40px rgba(77, 143, 255, .22), 0 0 0 1px rgba(77, 143, 255, .18);
   --shmd: 0 4px 20px rgba(0, 0, 0, .52), 0 1px 4px rgba(0, 0, 0, .32);
   color-scheme: dark;
}

/* ═══════════════════════════════════════
   LIGHT MODE
════════════════════════════════════════ */
body.light {
   --bg0: #f5f8ff;
   --bg1: #ffffff;
   --bg2: #eaf0fc;
   --bg3: #dce5f6;
   --bg4: #cdd9ef;
   --gl: rgba(0, 180, 164, .14);
   --gl2: rgba(0, 180, 164, .26);
   --glt: rgba(0, 180, 164, .08);
   --brd: rgba(0, 0, 0, .08);
   --brd2: rgba(0, 0, 0, .13);
   --brd3: rgba(0, 0, 0, .19);
   --t1: #08112a;
   --t2: #1c2e50;
   --t3: #485f80;
   --t4: #7e96b0;
   --hero-bg: #08112a;
   --nav-solid-bg: rgba(245, 248, 255, .97);
   --mob-bg: #f5f8ff;
   --sh: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .11);
   --shg: 0 0 40px rgba(0, 180, 164, .22), 0 0 0 1px rgba(0, 180, 164, .30);
   --shmd: 0 4px 20px rgba(0, 0, 0, .11), 0 1px 4px rgba(0, 0, 0, .06);
   color-scheme: light;
}

body {
   background: var(--bg0);
   color: var(--t2)
}

/* ═══════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
.W {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 40px
}

.Wsm {
   max-width: 860px;
   margin: 0 auto;
   padding: 0 40px
}

/* ═══════════════════════════════════════
   PRELOADER
════════════════════════════════════════ */
#pre {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: var(--bg0);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 20px;
   transition: opacity .6s, visibility .6s
}

#pre.out {
   opacity: 0;
   visibility: hidden;
   pointer-events: none
}

.pre-logo {
   font-family: 'DM Serif Display', serif;
   font-size: 22px;
   color: var(--t1);
   display: flex;
   align-items: center;
   gap: 10px;
   animation: prelogo .8s ease forwards;
   opacity: 0;
   transform: translateY(12px)
}

@keyframes prelogo {
   to {
      opacity: 1;
      transform: none
   }
}

.pre-logo-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--g);
   box-shadow: 0 0 16px var(--g);
   animation: blinkdot 1.5s ease-in-out infinite
}

@keyframes blinkdot {

   0%,
   100% {
      box-shadow: 0 0 8px var(--g)
   }

   50% {
      box-shadow: 0 0 24px var(--g), 0 0 40px rgba(77, 143, 255, .4)
   }
}

.pre-bar {
   width: 200px;
   height: 2px;
   background: var(--brd);
   border-radius: 99px;
   overflow: hidden
}

.pre-fill {
   height: 100%;
   background: var(--g);
   border-radius: 99px;
   animation: fill .9s .2s ease forwards;
   width: 0
}

@keyframes fill {
   to {
      width: 100%
   }
}

/* ═══════════════════════════════════════
   THEME TOGGLE BUTTON
════════════════════════════════════════ */
#theme-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--brd3);
   background: transparent;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .2s;
   flex-shrink: 0;
}

#theme-btn:hover {
   background: var(--bg3);
   border-color: var(--g)
}

#theme-btn svg {
   width: 18px;
   height: 18px;
   stroke: var(--t3);
   fill: none;
   stroke-width: 1.8;
   stroke-linecap: round;
   transition: stroke .3s
}

#theme-btn:hover svg {
   stroke: var(--g)
}

/* ═══════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
#nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 800;
   transition: all .35s
}

#nav.solid {
   background: var(--nav-solid-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--brd)
}

.nav-inner {
   display: flex;
   align-items: center;
   height: 148px;
   gap: 8px
}

.nav-logo {
   display: flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Serif Display', serif;
   font-size: 18px;
   color: var(--t1);
   transition: opacity .2s;
   flex-shrink: 0
}

.nav-logo:hover {
   opacity: .8
}

body.light #nav:not(.solid) .nav-logo {
   color: #fff
}

.lm {
   width: 34px;
   height: 34px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 0 14px rgba(77, 143, 255, .3);
   overflow: hidden;
   /* clave para imagen */
   padding: 4px;
   /* opcional: aire interno pro */
}

.nav-logo-wrap {
   position: relative;
   width: 440px;
   height: 134px;
   flex-shrink: 0;
}
.nav-logo-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: left center;
   transition: opacity .25s ease;
}
.nav-logo-dark  { opacity: 1; }
.nav-logo-light { opacity: 0; }
body.light .nav-logo-dark  { opacity: 0; }
body.light .nav-logo-light { opacity: 1; }

.lm img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* importante para logos */
   display: block;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto
}

.nl {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--t3);
   padding: 7px 12px;
   border-radius: 8px;
   transition: all .2s;
   white-space: nowrap
}

body.light #nav:not(.solid) .nl {
   color: rgba(255, 255, 255, .65)
}

#nav.solid .nl {
   color: var(--t3)
}

.nl:hover,
.nl.act {
   color: var(--t1);
   background: rgba(255,255,255,.06);
   border: 1px solid rgba(255,255,255,.08);
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

body.light #nav:not(.solid) .nl:hover {
   color: #fff;
   background: rgba(255, 255, 255, .1)
}

.nav-cta {
   font-size: 13.5px;
   font-weight: 600;
   background: var(--g);
   color: #fff;
   padding: 9px 18px;
   border-radius: 99px;
   border: none;
   cursor: pointer;
   transition: all .2s;
   margin-left: 6px;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   box-shadow: 0 0 18px rgba(77, 143, 255, .25);
   flex-shrink: 0;
   white-space: nowrap
}

.nav-cta:hover {
   background: var(--gd);
   box-shadow: 0 0 28px rgba(77, 143, 255, .4);
   transform: translateY(-1px)
}

.nav-cta svg {
   width: 14px;
   height: 14px
}

.menu-btn {
   display: none;
   margin-left: auto;
   /* 🔥 ocupa el lugar del burger */
   z-index: 810;
}

.menu-btn input {
   display: none;
}

.menu-btn label {
   width: 44px;
   height: 44px;
   border-radius: 999px;
   background: var(--gl);
   border: 1px solid var(--gl2);
   display: flex;
   align-items: center;
   justify-content: center;
}

.menu-btn svg {
   width: 38px;
   height: 38px;
}

/* BASE */
.line {
   fill: none;
   stroke: var(--g);
   /* 🔥 VERDE SIEMPRE */
   stroke-width: 3.2;
   stroke-linecap: round;
   stroke-linejoin: round;

   stroke-dasharray: 24 126.64;
   stroke-dashoffset: -38;
   transition: all .6s cubic-bezier(.4, 0, .2, 1);
}

.menu-btn label {
   box-shadow: 0 0 0 1px var(--gl2), 0 4px 14px rgba(0, 0, 0, .25);
   transition: all .25s ease;
}

.menu-btn:hover label {
   background: var(--gl2);
   box-shadow: 0 0 0 1px var(--g), 0 6px 18px rgba(77, 143, 255, .25);
   transform: translateY(-1px);
}

/* INTERACCIÓN (como el badge ) */
.menu-btn:hover label {
   background: var(--gl2);
}

.menu-btn input:checked+label {
   background: var(--gl2);
   border-color: var(--g);
}

/* animación X */
.menu-btn input:checked+label .line--1,
.menu-btn input:checked+label .line--3 {
   stroke-dasharray: 22.63 126.64;
   stroke-dashoffset: -94.11;
}

.menu-btn input:checked+label .line--2 {
   stroke-dasharray: 0 70;
   stroke-dashoffset: -50;
}

/* MOBILE NAV */
.mob-nav {
   display: flex;
   position: fixed;
   inset: 0;
   z-index: 790;
   background: var(--mob-bg);
   padding: 154px 32px 40px;
   flex-direction: column;
   border-bottom: 1px solid var(--brd);
   overflow-y: auto;

   /* animación */
   opacity: 0;
   pointer-events: none;
   transform: translateY(-10px);
   transition: all .3s ease;
}

.mob-nav.open {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

.mob-nav a {
   font-family: 'DM Serif Display', serif;
   font-size: 28px;
    color: var(--brd3);
   padding: 16px 0;
   border-bottom: 1px solid var(--brd);
   transition: color .2s
}

.mob-nav a:hover,
.mob-nav a.mob-act {
   color: var(--t1)
}

.mob-nav .mc {
   background: var(--g);
   color: #fff !important;
   border-radius: 99px;
   text-align: center;
   padding: 16px !important;
   font-size: 16px !important;
   font-family: 'DM Sans', sans-serif !important;
   font-weight: 700 !important;
   margin-top: 24px;
   border: none !important;
   box-shadow: 0 0 20px rgba(77, 143, 255, .3)
}

.mob-theme-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
   border-bottom: 1px solid var(--brd)
}

.mob-theme-label {
   font-size: 14px;
   color: var(--t3);
   font-weight: 500
}



/* ═══════════════════════════════════════
   HERO
════════════════════════════════════════ */
#hero {
   min-height: 100vh;
   background: var(--hero-bg);
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   padding-top: 70px
}

.h-aurora {
   position: absolute;
   width: 900px;
   height: 900px;
   border-radius: 50%;
   background: radial-gradient(circle at 60% 40%, rgba(77, 143, 255, .1) 0%, rgba(77, 143, 255, .04) 35%, transparent 70%);
   top: -200px;
   right: -250px;
   pointer-events: none;
   animation: aurora 12s ease-in-out infinite alternate
}

@keyframes aurora {
   0% {
      transform: translate(0, 0) scale(1)
   }

   100% {
      transform: translate(-40px, 30px) scale(1.08)
   }
}

.h-aurora2 {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(77, 143, 255, .06) 0%, transparent 70%);
   bottom: -100px;
   left: -50px;
   pointer-events: none;
   animation: aurora 18s ease-in-out infinite alternate-reverse
}

.h-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(77, 143, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 143, 255, .03) 1px, transparent 1px);
   background-size: 64px 64px;
   pointer-events: none;
   mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%)
}

.h-inner {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: center;
   padding: 80px 0 100px
}

.h-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--g);
   background: var(--gl);
   border: 1px solid rgba(77, 143, 255, .22);
   padding: 6px 14px;
   border-radius: 99px;
   margin-bottom: 28px
}

.h-badge-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--g);
   animation: blinkdot 2s ease-in-out infinite
}

.h-h1 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(46px, 5.5vw, 78px);
   font-weight: 400;
   line-height: 1.06;
   letter-spacing: -.01em;
   color: #fff;
   margin-bottom: 24px
}

.h-h1 em {
   font-style: italic;
   background: linear-gradient(135deg, var(--g) 0%, #00d4bf 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.h-h1 .dim {
   color: rgba(255, 255, 255, .35);
   -webkit-text-fill-color: rgba(255, 255, 255, .35)
}

.h-p {
   font-size: 17px;
   font-weight: 400;
   line-height: 1.72;
   color: rgba(255, 255, 255, .5);
   max-width: 460px;
   margin-bottom: 42px
}

.h-p strong {
   color: rgba(255, 255, 255, .8);
   font-weight: 600
}

.h-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 56px
}

.btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Sans', sans-serif;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   background: var(--g);
   padding: 13px 26px;
   border-radius: 99px;
   border: none;
   cursor: pointer;
   box-shadow: 0 0 28px rgba(77, 143, 255, .3);
   transition: all .25s
}

.btn-primary:hover {
   background: var(--gd);
   box-shadow: 0 0 44px rgba(77, 143, 255, .45);
   transform: translateY(-2px)
}

.btn-primary svg {
   width: 16px;
   height: 16px;
   transition: transform .2s
}

.btn-primary:hover svg {
   transform: translateX(3px)
}

.btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Sans', sans-serif;
   font-size: 15px;
   font-weight: 500;
   color: rgba(255, 255, 255, .7);
   background: transparent;
   padding: 13px 22px;
   border-radius: 99px;
   border: 1px solid rgba(255, 255, 255, .2);
   cursor: pointer;
   transition: all .2s
}

.btn-ghost:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, .4);
   background: rgba(255, 255, 255, .06)
}

.btn-ghost svg {
   width: 16px;
   height: 16px
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Sans', sans-serif;
   font-size: 15px;
   font-weight: 500;
   color: var(--t2);
   background: transparent;
   padding: 13px 22px;
   border-radius: 99px;
   border: 1px solid var(--brd3);
   cursor: pointer;
   transition: all .2s
}

.btn-outline:hover {
   color: var(--t1);
   border-color: var(--g);
   background: var(--glt)
}

.h-proof {
   display: flex;
   align-items: center;
   gap: 14px
}

.pavs {
   display: flex
}

.pav {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid rgba(7, 11, 18, .8);
   margin-left: -9px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 700;
   color: #fff
}

.pav:first-child {
   margin-left: 0
}

.proof-info {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.proof-stars {
   color: #f59e0b;
   font-size: 12px;
   letter-spacing: 1px
}

.proof-text {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .4)
}

.proof-text strong {
   color: rgba(255, 255, 255, .75);
   font-weight: 600
}

/* APP MOCKUP */
.h-visual {
   position: relative
}

.h-app {
   background: #0d1525;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, .08);
   overflow: hidden;
   box-shadow: 0 0 14px rgba(77, 143, 255, .3);
   animation: floatY 7s ease-in-out infinite;
   position: relative;
}

@keyframes floatY {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

@keyframes floatY-sharp {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

.atb {
   background: #080f1a;
   padding: 11px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.atb-dots {
   display: flex;
   gap: 6px
}

.td {
   width: 11px;
   height: 11px;
   border-radius: 50%
}

.td1 {
   background: #ff5f57
}

.td2 {
   background: #febc2e
}

.td3 {
   background: #28c840
}

.atb-url {
   flex: 1;
   background: rgba(255, 255, 255, .05);
   border-radius: 5px;
   padding: 4px 12px;
   font-size: 11px;
   color: rgba(255, 255, 255, .22);
   text-align: center
}

.abody {
   display: flex;
   height: 390px
}

.asb {
   width: 52px;
   background: #080f1a;
   border-right: 1px solid rgba(255, 255, 255, .04);
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 12px 0;
   gap: 3px
}

.sbl {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: var(--g);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
   box-shadow: 0 0 12px rgba(77, 143, 255, .4)
}

.sbl svg {
   width: 14px;
   height: 14px;
   fill: #fff
}

.si {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all .15s
}

.si:hover {
   background: rgba(255, 255, 255, .06)
}

.si.on {
   background: rgba(77, 143, 255, .15)
}

.si svg {
   width: 16px;
   height: 16px
}

.si.on svg * {
   stroke: var(--g);
   stroke-width: 1.5
}

.si svg * {
   stroke: rgba(255, 255, 255, .25);
   fill: none;
   stroke-width: 1.4;
   stroke-linecap: round;
   stroke-linejoin: round
}

.amain {
   flex: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column
}

.atp {
   padding: 10px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .04);
   flex-shrink: 0
}

.atp-t {
   font-size: 12.5px;
   font-weight: 700;
   color: rgba(255, 255, 255, .8)
}

.anew {
   font-size: 10px;
   font-weight: 700;
   background: var(--g);
   color: #fff;
   padding: 3px 9px;
   border-radius: 99px;
   box-shadow: 0 0 10px rgba(77, 143, 255, .4)
}

.ascroll {
   flex: 1;
   overflow: hidden;
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px
}

.oc {
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 10px;
   padding: 8px 11px;
   display: flex;
   align-items: center;
   gap: 9px
}

.ocn {
   font-size: 10px;
   font-weight: 700;
   color: rgba(255, 255, 255, .2);
   min-width: 28px
}

.oci {
   flex: 1
}

.ocn2 {
   font-size: 11.5px;
   font-weight: 600;
   color: rgba(255, 255, 255, .8)
}

.ocm {
   font-size: 10px;
   color: rgba(255, 255, 255, .28);
   margin-top: 1px
}

.os {
   font-size: 10px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 99px;
   white-space: nowrap
}

.snew {
   background: rgba(55, 138, 221, .2);
   color: #7eb8f7;
   border: 1px solid rgba(55, 138, 221, .3)
}

.scook {
   background: rgba(239, 159, 39, .2);
   color: #fcd06a;
   border: 1px solid rgba(239, 159, 39, .3)
}

.sready {
   background: rgba(29, 158, 117, .2);
   color: #4ed9b5;
   border: 1px solid rgba(29, 158, 117, .3)
}

.astats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
   padding: 0 10px 10px;
   flex-shrink: 0
}

.ast {
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 10px;
   padding: 9px;
   text-align: center
}

.astn {
   font-size: 18px;
   font-weight: 800;
   color: #fff;
   line-height: 1
}

.astn.ac {
   color: var(--g)
}

.astl {
   font-size: 10px;
   color: rgba(255, 255, 255, .28);
   margin-top: 2px
}

.h-img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 14px;
   image-rendering: high-quality;
}
.h-img.ss-dark { display: block }
.h-img.ss-light { display: none }
body.light .h-img.ss-dark { display: none }
body.light .h-img.ss-light { display: block }



/* ═══════════════════════════════════════
   LOGOS STRIP
════════════════════════════════════════ */
#logos {
   border-top: 1px solid var(--brd);
   border-bottom: 1px solid var(--brd);
   padding: 26px 0;
   background: var(--bg1)
}

.logos-row {
   display: flex;
   align-items: center;
   gap: 32px;
   flex-wrap: wrap
}

.ll {
   font-size: 11px;
   font-weight: 700;
   color: var(--t4);
   text-transform: uppercase;
   letter-spacing: .1em;
   white-space: nowrap;
   flex-shrink: 0
}

.lsep {
   width: 1px;
   height: 16px;
   background: var(--brd);
   flex-shrink: 0
}

.ln {
   font-size: 14px;
   font-weight: 700;
   color: var(--t4);
   letter-spacing: -.01em;
   transition: color .2s;
   cursor: default
}

.ln:hover {
   color: var(--t2)
}

/* ═══════════════════════════════════════
   SECTIONS SHARED
════════════════════════════════════════ */
.sec {
   padding: 96px 0
}

.ey {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--g);
   margin-bottom: 16px
}

.ey::before {
   content: '';
   width: 16px;
   height: 1.5px;
   background: var(--g);
   border-radius: 2px
}

.sh2 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(28px, 3.5vw, 48px);
   font-weight: 400;
   line-height: 1.15;
   color: var(--t1);
   margin-bottom: 16px
}

.sh2 em {
   font-style: italic;
   background: linear-gradient(135deg, var(--g), #00d4bf);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.sp {
   font-size: 17px;
   font-weight: 400;
   color: var(--t3);
   line-height: 1.7;
   max-width: 560px
}

.ctr {
   text-align: center
}

.ctr .sp {
   margin: 0 auto
}

/* scroll reveal */
.rv {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1)
}

.rv.in {
   opacity: 1;
   transform: none
}

.rv.d1 {
   transition-delay: .08s
}

.rv.d2 {
   transition-delay: .16s
}

.rv.d3 {
   transition-delay: .24s
}

.rv.d4 {
   transition-delay: .32s
}

.rv.d5 {
   transition-delay: .40s
}

/* ═══════════════════════════════════════
   METRICS BAR
════════════════════════════════════════ */
.metrics-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--brd);
   border-radius: 18px;
   overflow: hidden
}

.metric {
   background: var(--bg1);
   padding: 40px 32px;
   text-align: center
}

.metric-n {
   font-family: 'DM Serif Display', serif;
   font-size: 52px;
   font-weight: 400;
   color: var(--g);
   line-height: 1;
   margin-bottom: 10px
}

.metric-t {
   font-size: 15px;
   font-weight: 600;
   color: var(--t1);
   margin-bottom: 5px
}

.metric-s {
   font-size: 13px;
   color: var(--t4)
}

/* ═══════════════════════════════════════
   BENTO GRID
════════════════════════════════════════ */
.bento {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 14px;
   margin-top: 60px
}

.bento-card {
   background: var(--bg1);
   border: 1px solid var(--brd);
   border-radius: 18px;
   padding: 30px;
   position: relative;
   overflow: hidden;
   transition: border-color .25s, background .25s
}

.bento-card::before {
   content: '';
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .3s;
   background: linear-gradient(135deg, rgba(77, 143, 255, .05) 0%, transparent 60%)
}

.bento-card:hover {
   border-color: var(--brd3)
}

.bento-card:hover::before {
   opacity: 1
}

.b1 {
   grid-column: span 8
}

.b2 {
   grid-column: span 4
}

.b3 {
   grid-column: span 4
}

.b4 {
   grid-column: span 4
}

.b5 {
   grid-column: span 4
}

.b6 {
   grid-column: span 6
}

.b7 {
   grid-column: span 6
}

.bento-num {
   font-family: 'DM Serif Display', serif;
   font-size: 72px;
   font-weight: 400;
   color: var(--gl2);
   line-height: 1;
   position: absolute;
   top: 14px;
   right: 18px;
   pointer-events: none
}

.bento-ic {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: var(--gl);
   border: 1px solid var(--gl2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

.bento-ic svg {
   width: 22px;
   height: 22px;
   stroke: var(--g);
   fill: none;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round
}

.bento-t {
   font-family: 'DM Serif Display', serif;
   font-size: 20px;
   font-weight: 400;
   color: var(--t1);
   margin-bottom: 10px;
   line-height: 1.2
}

.bento-d {
   font-size: 14px;
   color: var(--t3);
   line-height: 1.7
}

.bento-lnk {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   font-weight: 600;
   color: var(--g);
   margin-top: 16px;
   transition: gap .2s
}

.bento-lnk:hover {
   gap: 9px
}

.bento-lnk svg {
   width: 13px;
   height: 13px;
   stroke: var(--g);
   fill: none;
   stroke-width: 2;
   stroke-linecap: round
}

.bento-ss {
   border-radius: 10px;
   overflow: hidden;
   margin-top: 18px;
   border: 1px solid var(--brd);
   position: relative;
   line-height: 0
}

.bento-ss img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 10px
}
.bento-ss img.ss-dark { display: block }
.bento-ss img.ss-light { display: none }
body.light .bento-ss img.ss-dark { display: none }
body.light .bento-ss img.ss-light { display: block }

.bento-ss svg {
   width: 40px;
   height: 40px;
   stroke: var(--t4);
   fill: none;
   stroke-width: .8;
   opacity: .2
}

/* img bento*/

.bento-card:hover .bento-ss img {
   transform: scale(1.03);
   transition: transform .35s ease;
}

/*  bento b2 */
.b2-img {
   margin-top: 14px;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--brd);
   background: var(--bg1);
   height: clamp(200px, 22vw, 250px);
   display: flex;
   align-items: center;
   justify-content: center;
}

.b2-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
}

/* DARK */
.b2-img img {
   content: url("img/cocina/cocina-dark.png");
}

/* LIGHT */
body.light .b2-img img {
   content: url("img/cocina/cocina-ligth.png");
}

/* ═══════════════════════════════════════
   STEPS
════════════════════════════════════════ */
.steps-wrap {
   margin-top: 68px;
   position: relative
}

.steps-line {
   position: absolute;
   top: 36px;
   left: calc(12.5% + 36px);
   right: calc(12.5% + 36px);
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--g), transparent);
   z-index: 0
}

.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   position: relative;
   z-index: 1
}

.step {
   text-align: center;
   padding: 0 16px
}

.step-n {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: var(--bg2);
   border: 1.5px solid var(--brd3);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 22px;
   font-family: 'DM Serif Display', serif;
   font-size: 24px;
   color: var(--t4);
   transition: all .3s;
   position: relative;
   z-index: 2
}

.step:hover .step-n,
.step.active .step-n {
   background: var(--bg2);
   border-color: rgba(77, 143, 255, .50);
   color: var(--g);
   box-shadow: 0 0 0 5px rgba(77, 143, 255, .08), 0 0 24px rgba(77, 143, 255, .28), inset 0 0 20px rgba(77, 143, 255, .10)
}

.step-t {
   font-size: 15px;
   font-weight: 700;
   color: var(--t1);
   margin-bottom: 9px
}

.step-d {
   font-size: 13.5px;
   color: var(--t3);
   line-height: 1.65
}

/* ═══════════════════════════════════════
   FEATURE CARDS (funciones.html)
════════════════════════════════════════ */
.fgrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--brd);
   border-radius: 22px;
   overflow: hidden;
   margin-top: 60px
}

.fcard {
   background: var(--bg1);
   padding: 38px 34px;
   transition: background .25s;
   cursor: default;
   position: relative;
   overflow: hidden
}

.fcard::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(77, 143, 255, .04), transparent 60%);
   opacity: 0;
   transition: opacity .3s
}

.fcard:hover {
   background: var(--bg2)
}

.fcard:hover::before {
   opacity: 1
}

.fcard-ic {
   width: 50px;
   height: 50px;
   border-radius: 15px;
   background: var(--gl);
   border: 1px solid var(--gl2);
   margin-bottom: 22px;
   display: flex;
   align-items: center;
   justify-content: center
}

.fcard-ic svg {
   width: 23px;
   height: 23px;
   stroke: var(--g);
   fill: none;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round
}

.fcard-t {
   font-family: 'DM Serif Display', serif;
   font-size: 20px;
   color: var(--t1);
   margin-bottom: 10px;
   line-height: 1.2
}

.fcard-d {
   font-size: 14px;
   color: var(--t3);
   line-height: 1.7
}

.fcard-lnk {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   font-weight: 600;
   color: var(--g);
   margin-top: 14px;
   transition: gap .2s
}

.fcard-lnk:hover {
   gap: 9px
}

.fcard-lnk svg {
   width: 13px;
   height: 13px;
   stroke: var(--g);
   fill: none;
   stroke-width: 2;
   stroke-linecap: round
}

/* ═══════════════════════════════════════
   CONTENT ROWS (inner pages)
════════════════════════════════════════ */
.cr {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
   padding: 76px 0;
   border-bottom: 1px solid var(--brd)
}

.cr:last-of-type {
   border-bottom: none
}

.cr.flip .cr-img {
   order: -1
}

.cr-bullets {
   margin-top: 28px;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.crb {
   display: flex;
   align-items: flex-start;
   gap: 13px;
   padding: 15px;
   border-radius: 12px;
   border: 1px solid transparent;
   transition: border-color .2s, background .2s;
   cursor: default
}

.crb:hover {
   background: var(--bg2);
   border-color: var(--brd)
}

.crb-ck {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--gl);
   border: 1px solid var(--gl2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px
}

.crb-ck svg {
   width: 10px;
   height: 10px;
   stroke: var(--g);
   fill: none;
   stroke-width: 2.3;
   stroke-linecap: round
}

.crb-title {
   font-size: 14.5px;
   font-weight: 600;
   color: var(--t1);
   margin-bottom: 3px
}

.crb-desc {
   font-size: 13.5px;
   color: var(--t3);
   line-height: 1.55
}

/* ═══════════════════════════════════════
   SCREENSHOT PLACEHOLDER
════════════════════════════════════════ */
.ss {
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid var(--brd2);
   box-shadow: var(--sh);
   position: relative;
   line-height: 0
}

.ss > img {
   width: 100%;
   height: auto;
   display: block
}
.ss > img.ss-dark { display: block }
.ss > img.ss-light { display: none }
body.light .ss > img.ss-dark { display: none }
body.light .ss > img.ss-light { display: block }

.ss-ph {
   background: var(--bg2);
   aspect-ratio: 4/3;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px
}

.ss-ph svg {
   width: 46px;
   height: 46px;
   stroke: var(--t4);
   fill: none;
   stroke-width: 1;
   stroke-linecap: round;
   opacity: .25
}

.ss-ph p {
   font-size: 12px;
   color: var(--t4);
   opacity: .5;
   text-align: center;
   max-width: 180px;
   line-height: 1.5
}

.ss-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: var(--gl);
   border: 1px solid var(--gl2);
   color: var(--g);
   font-size: 11px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 99px
}

/* ═══════════════════════════════════════
   PAGE HERO (inner pages)
════════════════════════════════════════ */
.pg-hero {
   background: var(--hero-bg);
   min-height: 100vh;
   padding: 140px 0 80px;
   position: relative;
   overflow: hidden;
   border-bottom: 1px solid var(--brd)
}

.pg-glow {
   position: absolute;
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(77, 143, 255, .12) 0%, transparent 65%);
   top: -150px;
   right: -150px;
   pointer-events: none
}

.pg-bc {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: rgba(255, 255, 255, .35);
   margin-bottom: 28px
}

.pg-bc a {
   color: rgba(255, 255, 255, .35);
   transition: color .2s
}

.pg-bc a:hover {
   color: var(--g)
}

.pg-bc span {
   color: rgba(255, 255, 255, .2)
}

.pg-h1 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(46px, 5.5vw, 78px);
   font-weight: 400;
   line-height: 1.08;
   color: #fff;
   margin-bottom: 18px
}

.pg-h1 em {
   font-style: italic;
   background: linear-gradient(135deg, var(--g), #00d4bf);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.pg-p {
   font-size: 18px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.7;
   max-width: 520px;
   margin-bottom: 34px
}

.pg-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.pg-stats {
   display: flex;
   gap: 48px;
   flex-wrap: wrap;
   margin-top: 48px;
   padding-top: 40px;
   border-top: 1px solid rgba(255, 255, 255, .08)
}

.pg-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
}

.pstat-n {
   font-family: 'DM Serif Display', serif;
   font-size: 40px;
   color: #fff;
   line-height: 1
}

.pstat-n span {
   color: var(--g)
}

.pstat-l {
   font-size: 13px;
   color: rgba(255, 255, 255, .38);
   margin-top: 5px
}

/* ═══════════════════════════════════════
   PRICING
════════════════════════════════════════ */
.tog-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin: 32px 0 52px;
   flex-wrap: wrap
}

.tog-lbl {
   font-size: 14px;
   font-weight: 500;
   color: var(--t3)
}

.tog-t {
   width: 50px;
   height: 28px;
   border-radius: 99px;
   background: var(--bg3);
   border: 1.5px solid var(--brd3);
   cursor: pointer;
   position: relative;
   transition: background .3s, border-color .3s;
   flex-shrink: 0
}

.tog-t.on {
   background: var(--g);
   border-color: var(--g);
   box-shadow: 0 0 14px rgba(77, 143, 255, .3)
}

.tog-th {
   position: absolute;
   top: 4px;
   left: 4px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
   transition: transform .3s
}

.tog-t.on .tog-th {
   transform: translateX(22px)
}

.tog-save {
   font-size: 11px;
   font-weight: 700;
   color: var(--g);
   background: var(--gl);
   border: 1px solid var(--gl2);
   padding: 3px 11px;
   border-radius: 99px
}

/* ═══════════════════════════════════════
   FREQUENCY TOGGLE (planes.html)
════════════════════════════════════════ */
.freq-toggle {
   display: flex;
   gap: 8px;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   margin: 32px 0 52px
}

.freq-btn {
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   font-weight: 500;
   padding: 9px 22px;
   border-radius: 99px;
   border: 1.5px solid var(--brd3);
   background: transparent;
   color: var(--t3);
   cursor: pointer;
   transition: all .2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   line-height: 1
}

.freq-btn:hover {
   border-color: var(--g);
   color: var(--t1)
}

.freq-btn.active {
   background: var(--g);
   border-color: var(--g);
   color: #fff;
   box-shadow: 0 0 18px rgba(77, 143, 255, .3)
}

.freq-badge {
   font-size: 10px;
   font-weight: 700;
   background: rgba(255, 255, 255, .22);
   padding: 2px 7px;
   border-radius: 99px;
   letter-spacing: .03em
}

.freq-btn:not(.active) .freq-badge {
   background: var(--gl);
   color: var(--g)
}

.plans {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   align-items: end
}

.plan {
   background: var(--bg1);
   border: 1.5px solid var(--brd);
   border-radius: 18px;
   overflow: hidden;
   transition: transform .3s, box-shadow .3s, border-color .3s
}

.plan:hover {
   transform: translateY(-5px);
   border-color: var(--brd3)
}

.plan.ft {
   border-color: rgba(77, 143, 255, .35);
   box-shadow: 0 0 0 1px rgba(77, 143, 255, .15), 0 20px 56px rgba(77, 143, 255, .1);
   transform: translateY(-10px) scale(1.02)
}

.plan.ft:hover {
   transform: translateY(-15px) scale(1.02);
   box-shadow: 0 0 0 1px rgba(77, 143, 255, .25), var(--shg)
}

.ph {
   background: var(--bg2);
   padding: 28px 26px 22px;
   border-bottom: 1px solid var(--brd)
}

.plan.ft .ph {
   background: linear-gradient(135deg, rgba(77, 143, 255, .14) 0%, rgba(77, 143, 255, .05) 100%);
   border-color: rgba(77, 143, 255, .15)
}

.pbadge {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
   background: var(--g);
   color: #fff;
   padding: 3px 10px;
   border-radius: 99px;
   display: inline-block;
   margin-bottom: 10px;
   box-shadow: 0 0 10px rgba(77, 143, 255, .35)
}

.pname {
   font-family: 'DM Serif Display', serif;
   font-size: 22px;
   color: var(--t1);
   margin-bottom: 12px
}

.pprice {
   display: flex;
   align-items: baseline;
   gap: 3px
}

.pcur {
   font-size: 16px;
   font-weight: 500;
   color: var(--t4);
   margin-top: 3px
}

.pamt {
   font-family: 'DM Serif Display', serif;
   font-size: 36px;
   color: var(--t1);
   line-height: 1
}

.plan.ft .pamt {
   color: var(--g)
}

.pper {
   font-size: 12px;
   color: var(--t4);
   margin-top: 4px
}

.pann {
   font-size: 11px;
   color: var(--t4);
   margin-top: 5px
}

.pb {
   padding: 24px 26px
}

.pfeats {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 18px
}

.pf {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 13px;
   color: var(--t2)
}

.pf-ck {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--gl);
   border: 1px solid var(--gl2);
   display: flex;
   align-items: center;
   justify-content: center
}

.pf-ck svg {
   width: 9px;
   height: 9px;
   stroke: var(--g);
   fill: none;
   stroke-width: 2.3;
   stroke-linecap: round
}

.pf strong {
   color: var(--t1);
   font-weight: 700
}

.btnpl {
   display: block;
   width: 100%;
   text-align: center;
   font-family: 'DM Sans', sans-serif;
   font-size: 13.5px;
   font-weight: 600;
   padding: 11px;
   border-radius: 10px;
   cursor: pointer;
   transition: all .2s;
   border: 1.5px solid var(--brd3);
   color: var(--t2);
   background: transparent
}

.btnpl:hover {
   background: var(--bg3);
   border-color: var(--g);
   color: var(--t1)
}

.btnpf {
   display: block;
   width: 100%;
   text-align: center;
   font-family: 'DM Sans', sans-serif;
   font-size: 13.5px;
   font-weight: 700;
   padding: 11px;
   border-radius: 10px;
   cursor: pointer;
   transition: all .2s;
   border: none;
   color: #fff;
   background: var(--g);
   box-shadow: 0 0 18px rgba(77, 143, 255, .3)
}

.btnpf:hover {
   background: var(--gd);
   box-shadow: 0 0 28px rgba(77, 143, 255, .45)
}

.p-note {
   text-align: center;
   margin-top: 26px;
   font-size: 13px;
   color: var(--t4)
}

/* ═══════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.tg {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-top: 52px
}

.tc {
   background: var(--bg1);
   border: 1px solid var(--brd);
   border-radius: 18px;
   padding: 30px;
   transition: border-color .25s, transform .25s;
   position: relative;
   overflow: hidden
}

.tc::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(77, 143, 255, .04), transparent 60%);
   opacity: 0;
   transition: opacity .3s
}

.tc:hover {
   border-color: var(--brd3);
   transform: translateY(-4px)
}

.tc:hover::before {
   opacity: 1
}

.ts {
   color: #f59e0b;
   font-size: 14px;
   margin-bottom: 14px;
   letter-spacing: 2px
}

.tq {
   font-size: 15px;
   color: var(--t2);
   line-height: 1.72;
   margin-bottom: 22px;
   font-style: italic;
   position: relative
}

.tq::before {
   content: '"';
   font-family: 'DM Serif Display', serif;
   font-size: 56px;
   color: var(--g);
   opacity: .2;
   position: absolute;
   top: -8px;
   left: -6px;
   line-height: 1;
   font-style: normal
}

.ta {
   display: flex;
   align-items: center;
   gap: 12px
}

.tav {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   color: #fff;
   border: 2px solid var(--brd2)
}

.tn {
   font-size: 14px;
   font-weight: 700;
   color: var(--t1)
}

.tr {
   font-size: 12px;
   color: var(--t4)
}

/* ═══════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.faq-l {
   display: grid;
   grid-template-columns: 1fr 1.8fr;
   gap: 96px
}

.fsc {
   margin-top: 36px;
   padding: 26px;
   background: var(--bg2);
   border: 1px solid var(--brd);
   border-radius: 16px
}

.fsc p {
   font-size: 14px;
   color: var(--t3);
   line-height: 1.65;
   margin-bottom: 14px
}

.fsc a {
   font-size: 14px;
   font-weight: 600;
   color: var(--g);
   display: inline-flex;
   align-items: center;
   gap: 5px;
   transition: gap .2s
}

.fsc a:hover {
   gap: 9px
}

.facc {
   display: flex;
   flex-direction: column
}

.fi {
   border-bottom: 1px solid var(--brd)
}

.fq {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   cursor: pointer;
   gap: 16px;
   font-size: 15.5px;
   font-weight: 500;
   color: var(--t2);
   transition: color .2s
}

.fq:hover,
.fi.open .fq {
   color: var(--t1)
}

.farr {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--bg3);
   border: 1px solid var(--brd);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .3s
}

.farr svg {
   width: 12px;
   height: 12px;
   stroke: var(--t4);
   fill: none;
   stroke-width: 2;
   stroke-linecap: round
}

.fi.open .farr {
   background: var(--gl);
   border-color: var(--gl2);
   transform: rotate(180deg)
}

.fi.open .farr svg {
   stroke: var(--g)
}

.fa {
   font-size: 15px;
   color: var(--t3);
   line-height: 1.75;
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s ease, padding-bottom .4s ease
}

.fi.open .fa {
   max-height: 250px;
   padding-bottom: 22px
}

/* ═══════════════════════════════════════
   CTA
════════════════════════════════════════ */
.cta-sec {
    background: var(--bg0);
   padding: 116px 0;
   position: relative;
   overflow: hidden;
   border-top: 1px solid var(--brd)
}

.cta-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(77, 143, 255, .08) 0%, transparent 65%);
   pointer-events: none
}

.cta-in {
   position: relative;
   z-index: 1;
   text-align: center;
   max-width: 720px;
   margin: 0 auto
}

.cta-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--g);
   background: var(--gl);
   border: 1px solid var(--gl2);
   padding: 6px 16px;
   border-radius: 99px;
   margin-bottom: 30px
}

.cta-h2 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(38px, 5vw, 68px);
   font-weight: 400;
   color: #fff;
   line-height: 1.1;
   margin-bottom: 20px
}

.cta-h2 em {
   font-style: italic;
   background: linear-gradient(135deg, var(--g), #00d4bf);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.cta-p {
   font-size: 17px;
   color: rgba(255, 255, 255, .45);
   margin-bottom: 48px;
   line-height: 1.65;
   max-width: 520px;
   margin-left: auto;
   margin-right: auto
}

.cta-btns {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 36px
}

.btn-white {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Sans', sans-serif;
   font-size: 15px;
   font-weight: 600;
   color: #0f1923;
   background: #fff;
   padding: 13px 26px;
   border-radius: 99px;
   border: none;
   cursor: pointer;
   transition: all .2s
}

.btn-white:hover {
   background: var(--brand-lt, #e6f9f7)
}

.cta-legal {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   flex-wrap: wrap
}

.cta-legal span {
   display: flex;
   align-items: center;
   gap: 5px
}

.cta-legal svg {
   width: 13px;
   height: 13px;
   stroke: rgba(255, 255, 255, .4);
   fill: none;
   stroke-width: 1.8;
   stroke-linecap: round
}

body.light .cta-sec {
   background: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
   border-top: 1px solid var(--brd);
}

body.light .cta-bg {
   background:
      radial-gradient(
         ellipse 70% 70% at 50% 50%,
         rgba(77, 143, 255,.10) 0%,
         transparent 65%
      );
}

body.light .cta-h2 {
   color: var(--t1);
}

body.light .cta-p {
   color: rgba(15, 25, 35, .62);
}

body.light .cta-legal {
   color: rgba(15, 25, 35, .48);
}

body.light .cta-legal svg {
   stroke: rgba(15, 25, 35, .42);
}

body.light .btn-ghost {
   color: var(--t2);
   border: 1px solid var(--brd2);
   background: var(--bg1);
   backdrop-filter: none;
}

body.light .btn-ghost:hover {
   background: var(--bg2);
   border-color: var(--g);
   color: var(--t1);
}
/* ═══════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer {
   background: var(--hero-bg);
   border-top: 1px solid var(--brd);
   padding-top: 68px
}

.fg {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.6fr;
   gap: 48px;
   padding-bottom: 60px;
   border-bottom: 1px solid var(--brd)
}

.fl {
   display: flex;
   align-items: center;
   gap: 9px;
   font-family: 'DM Serif Display', serif;
   font-size: 18px;
   color: #fff;
   margin-bottom: 16px
}

.fd {
   font-size: 14px;
   color: rgba(255, 255, 255, .3);
   line-height: 1.75;
   max-width: 260px
}

.fct {
   margin-top: 18px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.fct span {
   font-size: 13px;
   color: rgba(255, 255, 255, .25)
}

.fcol h5 {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .09em;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 18px
}

.fcol a {
   display: block;
   font-size: 14px;
   color: rgba(255, 255, 255, .28);
   margin-bottom: 10px;
   transition: color .2s
}

.fcol a:hover {
   color: var(--g)
}

.nl-lbl {
   font-size: 13px;
   color: rgba(255, 255, 255, .28);
   line-height: 1.6;
   margin-bottom: 13px
}

.nl-f {
   display: flex;
   gap: 7px
}

.nl-f input {
   flex: 1;
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .12);
   color: #fff;
   padding: 10px 13px;
   border-radius: 10px;
   outline: none;
   transition: border-color .2s;
   min-width: 0
}

.nl-f input::placeholder {
   color: rgba(255, 255, 255, .2)
}

.nl-f input:focus {
   border-color: var(--g)
}

.nl-f button {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   background: var(--g);
   color: #fff;
   border: none;
   padding: 10px 14px;
   border-radius: 10px;
   cursor: pointer;
   transition: all .2s;
   white-space: nowrap;
   flex-shrink: 0
}

.nl-f button:hover {
   background: var(--gd)
}

.mini-form {
   display: flex;
   flex-direction: column;
   gap: 7px
}

.mini-form input,
.mini-form textarea {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   background: rgba(255,255,255,.05);
   border: 1px solid rgba(255,255,255,.1);
   border-radius: 8px;
   padding: 8px 12px;
   color: var(--t1);
   resize: none;
   outline: none;
   transition: border-color .2s
}

.mini-form input::placeholder,
.mini-form textarea::placeholder {
   color: rgba(255,255,255,.2)
}

.mini-form input:focus,
.mini-form textarea:focus {
   border-color: var(--g)
}

.mini-form button {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   background: var(--g);
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 8px 14px;
   cursor: pointer;
   transition: background .2s;
   text-align: left
}

.mini-form button:hover {
   background: var(--gd)
}

body.light .mini-form input,
body.light .mini-form textarea {
   background: rgba(0,0,0,.06);
   border: 1px solid rgba(0,0,0,.13);
   color: var(--t1)
}

body.light .mini-form input::placeholder,
body.light .mini-form textarea::placeholder {
   color: rgba(0,0,0,.35)
}

.fbot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 0;
   flex-wrap: wrap;
   gap: 12px
}

.fcp {
   font-size: 13px;
   color: rgba(255, 255, 255, .18)
}

.fcp a {
   color: rgba(255, 255, 255, .22);
   transition: color .2s
}

.fcp a:hover {
   color: var(--g)
}

.fsoc {
   display: flex;
   gap: 8px
}

.fs {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 700;
   color: rgba(255, 255, 255, .28);
   transition: all .2s;
   cursor: pointer
}

.fs:hover {
   border-color: var(--g);
   color: var(--g);
   background: var(--gl)
}

body.light footer {
   border-top: 1px solid var(--brd);
   background: var(--bg2);
}

body.light .fg {
   border-bottom: 1px solid rgba(0, 0, 0, .10);
}

body.light .fcol h5 {
   color: rgba(0, 0, 0, .45);
}

body.light .fcol a,
body.light .fd,
body.light .fct span,
body.light .nl-lbl,
body.light .fcp {
   color: rgba(0, 0, 0, .58);
}

body.light .fcol a:hover {
   color: var(--g);
}

body.light .fs {
   border-color: rgba(0, 0, 0, .12);
   color: rgba(0, 0, 0, .45);
}

body.light .fs:hover {
   border-color: var(--g);
   color: var(--g);
   background: var(--gl);
}

body.light .nl-f input {
   background: rgba(0, 0, 0, .06);
   border: 1px solid rgba(0, 0, 0, .13);
   color: var(--t1);
}

body.light .nl-f input::placeholder {
   color: rgba(0, 0, 0, .35);
}

/* ═══════════════════════════════════════
   GRID: EN DETALLE (funciones.html)
════════════════════════════════════════ */
.detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 28px;
   margin-top: 52px;
}

.detail-card {
   display: block;
   background: var(--bg2);
   border: 1px solid var(--brd);
   border-radius: 18px;
   padding: 34px;
   transition: border-color .25s, transform .25s;
   text-decoration: none;
}

.detail-card:hover {
   border-color: rgba(77, 143, 255, .3);
   transform: translateY(-4px);
}

.detail-card-cta {
   background: var(--gl);
   border-color: rgba(77, 143, 255, .2);
}

.detail-card-title {
   font-family: 'DM Serif Display', serif;
   font-size: 22px;
   color: var(--t1);
   margin-bottom: 10px;
   line-height: 1.2;
}

.detail-card-desc {
   font-size: 13.5px;
   color: var(--t3);
   line-height: 1.65;
   margin-bottom: 18px;
}

/* ═══════════════════════════════════════
   BILLING TIMELINE
════════════════════════════════════════ */
.billing-timeline {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin-top: 56px;
   position: relative
}


.bt-step {
   display: flex;
   gap: 28px;
   align-items: flex-start;
   padding: 28px 0;
   position: relative
}

/* separador horizontal que arranca tras el ícono, no lo cruza */
.bt-step:not(:last-child)::before {
   content: '';
   position: absolute;
   left: 84px; /* 56px ícono + 28px gap */
   right: 0;
   bottom: 0;
   height: 1px;
   background: var(--brd)
}

/* conector entre ícono inferior y el ícono del paso siguiente */
.bt-step:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 27px;
   top: 84px;    /* 28px padding + 56px ícono = justo bajo el ícono */
   bottom: -28px; /* cruza el padding inferior + el padding superior del sig. paso */
   width: 2px;
   background: linear-gradient(
      to bottom,
      rgba(77, 143, 255, .45),
      rgba(77, 143, 255, .10)
   );
   border-radius: 99px
}

.bt-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   z-index: 1
}

.bt-body {
   flex: 1;
   padding-top: 4px
}

.bt-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--t4);
   margin-bottom: 6px
}

.bt-title {
   font-family: 'DM Serif Display', serif;
   font-size: 18px;
   color: var(--t1);
   margin-bottom: 8px;
   line-height: 1.25
}

.bt-desc {
   font-size: 14px;
   color: var(--t3);
   line-height: 1.65;
   margin-bottom: 10px
}

.bt-eg {
   font-size: 12.5px;
   color: var(--g);
   background: var(--gl);
   border: 1px solid var(--gl2);
   border-radius: 8px;
   padding: 7px 12px;
   display: inline-block
}

/* ═══════════════════════════════════════
   GRIDS: EL PROBLEMA + SEGURIDAD
════════════════════════════════════════ */
.prob-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-top: 52px;
}

.prob-card {
   background: var(--bg1);
   border: 1px solid var(--brd);
   border-radius: 20px;
   overflow: hidden;
   transition: border-color .25s, box-shadow .25s
}

.prob-card:hover {
   border-color: var(--brd3);
   box-shadow: var(--shmd)
}

.prob-pain,
.prob-sol {
   padding: 22px 26px;
   display: flex;
   align-items: flex-start;
   gap: 14px
}

.prob-pain {
   border-bottom: 1px solid var(--brd)
}

.prob-x,
.prob-v {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 1px;
   font-size: 13px;
   font-weight: 700
}

.prob-x {
   background: rgba(239, 68, 68, .12);
   color: #f87171
}

.prob-v {
   background: var(--gl2);
   color: var(--g)
}

.prob-pain-txt,
.prob-sol-txt {
   font-size: 14px;
   line-height: 1.55
}

.prob-pain-txt {
   color: var(--t3)
}

.prob-sol-txt {
   color: var(--t2)
}

.sec-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--brd);
   border-radius: 22px;
   overflow: hidden;
   margin-top: 52px;
}

.sec-cell {
   background: var(--bg1);
   padding: 38px 34px;
}

/* ═══════════════════════════════════════
   RESPONSIVE MOBILE FIRST
════════════════════════════════════════ */
@media(max-width:1100px) {
   .plans {
      grid-template-columns: repeat(2, 1fr)
   }

   .bento .b1 {
      grid-column: span 12
   }

   .bento .b2,
   .bento .b3,
   .bento .b4,
   .bento .b5 {
      grid-column: span 6
   }

   .fg {
      grid-template-columns: 1fr 1fr;
      gap: 32px
   }
}

@media(max-width:960px) {
   .h-inner {
      grid-template-columns: 1fr;
      gap: 52px;
      padding-top: 110px
   }

   .h-visual {
      max-width: 500px;
      margin: 0 auto
   }

   .cr,
   .cr.flip {
      grid-template-columns: 1fr;
      gap: 44px
   }

   .cr.flip .cr-img {
      order: 0
   }

   .fgrid {
      grid-template-columns: repeat(2, 1fr)
   }

   .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 36px
   }

   .steps-line {
      display: none
   }

   .tg {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto
   }

   .faq-l {
      grid-template-columns: 1fr;
      gap: 44px
   }

   .bento .b1,
   .bento .b2,
   .bento .b3,
   .bento .b4,
   .bento .b5,
   .bento .b6,
   .bento .b7 {
      grid-column: span 12
   }

   .metrics-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .sec-grid {
      grid-template-columns: repeat(2, 1fr);
      border-radius: 18px
   }

   .pg-hero {
      min-height: 100vh;
      display: block;
      padding: 152px 0 0
   }

   .pg-inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }
}

@media(max-width:768px) {

   .W,
   .Wsm {
      padding: 0 20px
   }

   .nav-links,
   .nav-cta {
      display: none
   }

   #theme-btn {
      display: none
   }

   .sec {
      padding: 72px 0
   }

   .cta-sec {
      padding: 80px 0
   }

   .plans {
      grid-template-columns: 1fr 1fr
   }

   .plan.ft {
      transform: none
   }

   .fg {
      grid-template-columns: 1fr
   }

   .fbot {
      flex-direction: column;
      gap: 14px;
      text-align: center
   }

   .fgrid {
      grid-template-columns: 1fr
   }

   .detail-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .detail-card {
      padding: 26px 22px
   }

   .detail-card-title {
      font-size: 19px
   }

   .steps {
      grid-template-columns: 1fr
   }

   .logos-row {
      gap: 16px;
      justify-content: center
   }

   .h-h1 {
      font-size: 42px
   }

   .fc-float {
      display: none
   }

   .pg-hero {
      min-height: 100vh;
      display: block;
      padding: 152px 0 0
   }

   .pg-stats {
      gap: 28px
   }

   .sec-cell {
      padding: 28px 22px
   }
}

@media(max-width:480px) {

   .pg-hero {
      min-height: 100vh;
      padding: 152px 0 0
   }

   .W,
   .Wsm {
      padding: 0 16px
   }

   .h-h1 {
      font-size: 36px
   }

   .h-actions {
      flex-direction: column;
      gap: 10px
   }

   .h-actions .btn-primary,
   .h-actions .btn-ghost {
      width: 100%;
      justify-content: center
   }

   .plans {
      grid-template-columns: 1fr
   }

   .plan.ft {
      transform: none
   }

   .cta-btns {
      flex-direction: column
   }

   .cta-btns .btn-primary,
   .cta-btns .btn-white,
   .cta-btns .btn-ghost {
      width: 100%;
      justify-content: center
   }

   .pg-btns {
      flex-direction: column
   }

   .pg-btns a {
      text-align: center;
      justify-content: center
   }

   .metrics-grid {
      grid-template-columns: 1fr 1fr
   }

   .metric {
      padding: 28px 20px
   }

   .prob-grid,
   .sec-grid {
      margin-top: 36px;
      grid-template-columns: 1fr
   }

   .billing-timeline::before {
      left: 20px
   }

   .bt-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px
   }

   .bt-eg {
      font-size: 12px
   }

   .metric-n {
      font-size: 40px
   }

   .tg {
      max-width: 100%
   }

   .h-app {
      border-radius: 14px
   }

   .nl-f {
      flex-direction: column
   }

   .nl-f input,
   .nl-f button {
      width: 100%
   }
}

/* THEME ICONS */
.icon-sun {
   opacity: 0;
   transform: scale(.6);
   transition: opacity .3s ease, transform .3s ease;
}

.icon-moon {
   opacity: 1;
   transition: opacity .3s ease;
}

body.light .icon-sun {
   opacity: 1;
   transform: scale(1);
}

body.light .icon-moon {
   opacity: 0;
}

/* ═══════════════════════════════════════
   FOOTER LOGO
════════════════════════════════════════ */
.footer-logo-wrap {
   position: relative;
   width: 140px;
   height: 93px;
   margin-bottom: 16px;
}

.footer-logo-wrap .nav-logo-img {
   object-position: left center;
}

/* ═══════════════════════════════════════
   FOCUS VISIBLE — ACCESIBILIDAD
════════════════════════════════════════ */
:focus-visible {
   outline: 2px solid var(--g);
   outline-offset: 3px;
   border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
   outline: none;
}

/* ═══════════════════════════════════════
   SOCIAL LINKS PLACEHOLDER
════════════════════════════════════════ */
.fs[href="#"] {
   opacity: 0.35;
   pointer-events: none;
   cursor: not-allowed;
}

/* ═══════════════════════════════════════
   MENU BTN — cursor
════════════════════════════════════════ */
.menu-btn label {
   cursor: pointer;
}

/* ═══════════════════════════════════════
   PREFERS REDUCED MOTION
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   .rv {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   .h-aurora,
   .h-aurora2 {
      animation: none;
   }

   .h-app {
      animation: none;
   }

   .pre-fill {
      animation: none;
      width: 100%;
   }

   .pre-logo {
      animation: none;
      opacity: 1;
      transform: none;
   }

   .btn-primary,
   .btn-ghost,
   .nav-cta,
   .bento-card,
   .tc,
   .plan {
      transition: none;
   }
}

/* ═══════════════════════════════════════
   RV FALLBACK (JS off o no soportado)
════════════════════════════════════════ */
@supports not (selector(:is(*))) {
   .rv {
      opacity: 1;
      transform: none;
   }
}

@media (max-width: 900px) {

   .nav-links,
   .nav-cta {
      display: none;
   }

   .menu-btn {
      display: block;
   }

   .nav-inner {
      height: 134px;
   }

   .nav-logo-wrap {
      width: 340px;
      height: 110px;
   }
}

@media (max-width: 520px) {
   .menu-btn {
      position: fixed;
      right: 20px;
      top: 38px;
      margin-left: 0;
   }
}