/* ==========================================================================
   Sismat Landing V2 — rediseño 2026 (manual de marca)
   Mismos tokens y medidas fluidas (base 1920px) que Home V2 / Pricing V2
   de sismat-frontend-app.
   ========================================================================== */
:root {
    --blue: #3759E1;
    --blue-dark: #2a47b8;
    --navy: #10226B;
    --black: #020819;
    --celeste: #C5CFEA;
    --white-soft: #EFF2F4;
    --gray: #6A6C72;
    --gray-light: #D3DADD;
    --green: #48C78E;
    --green-dark: #1F8A5B;
    --orange: #F29040;
    --bg: #F5F5F5;
    --tint: #E9EFFB;
    --max: 1500px;
    --gutter: clamp(20px, 5vw, 96px);
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
    --shadow-card: 0 2px 14px rgba(2, 8, 25, .07);
    --transition: all .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Archivo', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--bg);
    overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.15; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Bloques con el contenido alineado a un contenedor de 1500px pero con fondos a sangre */
.edge { padding-left: var(--edge); padding-right: var(--edge); }
.section-pad { padding-top: clamp(48px, 6vw, 112px); padding-bottom: clamp(48px, 6vw, 112px); }
.expanded { font-stretch: 125%; font-variation-settings: 'wdth' 125; }

.eyebrow {
    font-size: clamp(.7rem, .78vw, .95rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

/* ==================== PROMO TOP BAR (inyectada por JS) ==================== */
#promo-topbar { position: relative; z-index: 60; }
.promo-topbar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    max-width: 1200px; margin: 0 auto; padding: .75rem 20px;
}
.promo-topbar-desc, .promo-topbar-discount, .promo-topbar-timer { color: #fff; font-size: 1rem; flex: 1; }
.promo-topbar-desc { font-size: 1.25rem; flex: 2; }
.promo-topbar-discount { font-weight: 700; font-size: 1.5rem; text-align: center; }
.promo-topbar-timer { text-align: center; flex: 2; }
.promo-topbar-btn {
    display: inline-block; background: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: .05em;
    padding: .45rem 1.25rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; transition: opacity .2s;
}
.promo-topbar-btn:hover { opacity: .85; }

/* ==================== NAVBAR ==================== */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background-color: transparent; color: #fff;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.nav--solid { background-color: #fff; box-shadow: 0 2px 14px rgba(2, 8, 25, .12); }
.nav__bar {
    padding-left: var(--edge); padding-right: var(--edge);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: clamp(64px, 5.2vw, 100px);
}
.nav__brand img { height: clamp(28px, 2.2vw, 42px); width: auto; }
.nav__logo-dark { display: none; }
.nav--solid .nav__logo-light { display: none; }
.nav--solid .nav__logo-dark { display: block; }
/* Sobre la foto del hero (cielo claro) el botón queda siempre en azul oscuro para que se lea */
.nav__login {
    padding: .5em 1em; border: 2px solid var(--navy); background: rgba(255, 255, 255, .0);
    color: var(--navy); font-size: clamp(.8rem, .9vw, 1.05rem); font-weight: 600; white-space: nowrap;
    transition: var(--transition);
}
.nav__login:hover { background-color: var(--navy); color: #fff; }

/* ==================== HERO ==================== */
.hero {
    position: relative; display: flex; align-items: center;
    min-height: clamp(620px, 52.8vw, 1080px);
    padding-top: clamp(72px, 6vw, 110px); padding-bottom: clamp(48px, 4vw, 80px);
    background-color: var(--blue); color: #fff; overflow: hidden;
    box-shadow: inset 0 -8px 0 var(--navy);
}
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.hero__panel { position: absolute; inset: 0; background-color: var(--blue); clip-path: polygon(0 0, 67% 0, 49% 100%, 0 100%); }
.hero__content { position: relative; z-index: 2; width: 100%; padding-left: var(--edge); padding-right: var(--edge); }
.hero__title {
    font-size: clamp(2.4rem, 4.69vw, 5.625rem); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; color: #fff;
}
.hero__strip { position: relative; display: inline-block; margin-top: .06em; padding-right: 2.4em; font-style: italic; isolation: isolate; }
.hero__strip::before {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw; background-color: var(--celeste);
}
.hero__strip { color: var(--navy); }
.hero__subtitle { max-width: 34em; margin-top: clamp(24px, 2.4vw, 48px); font-size: clamp(1rem, 1.25vw, 1.5rem); font-weight: 600; line-height: 1.5; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2vw, 40px); margin-top: clamp(24px, 2.6vw, 52px); }
.hero__button {
    display: inline-block; padding: .55em 1.5em; border-radius: 999px; background-color: var(--green); color: #fff;
    font-size: clamp(1rem, 1.25vw, 1.5rem); font-weight: 600; transition: filter .2s ease;
}
.hero__button:hover { filter: brightness(.94); }
.hero__link { color: #fff; font-size: clamp(1rem, 1.25vw, 1.5rem); font-weight: 600; }
.hero__link:hover { text-decoration: underline; }
.hero__blueprint { position: absolute; z-index: 1; pointer-events: none; opacity: .7; }
.hero__blueprint--top-h { left: 40.6%; top: 18%; width: 15.6%; border-top: 2px dashed #fff; }
.hero__blueprint--top-v { left: 55.4%; top: 14%; height: 12%; border-left: 2px solid #fff; }
.hero__blueprint--bottom-v { left: 3.4%; top: 83.7%; height: 12%; border-left: 2px solid #fff; }
.hero__blueprint--bottom-h { left: 2.6%; top: 93%; width: 15.6%; border-top: 2px dashed #fff; }

/* ==================== CONFIAN EN NOSOTROS ==================== */
.trust {
    padding: clamp(28px, 3vw, 56px) var(--edge);
    display: flex; align-items: center; justify-content: center; gap: clamp(24px, 6vw, 120px); background-color: var(--bg);
}
.trust__title { font-size: clamp(1rem, 1.35vw, 1.6rem); font-weight: 300; color: var(--gray); }
.trust__logos { display: flex; align-items: center; gap: clamp(24px, 5vw, 100px); }
.trust__logo { max-height: clamp(40px, 4vw, 76px); width: auto; }

/* ==================== BENEFICIOS ==================== */
.benefits { position: relative; background-color: var(--bg); }
.benefits__top { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: clamp(280px, 24vw, 460px); }
.benefits__text { padding: clamp(40px, 4vw, 80px) 0 clamp(40px, 4vw, 80px) var(--edge); padding-right: 2vw; position: relative; z-index: 1; }
.benefits__title { margin-top: clamp(8px, .8vw, 16px); font-size: clamp(1.6rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--navy); }
.benefits__lead { margin-top: clamp(10px, 1vw, 20px); max-width: 30em; font-size: clamp(.85rem, .95vw, 1.15rem); line-height: 1.5; color: var(--gray); }
.benefits__media { position: relative; align-self: stretch; min-height: 220px; }
.benefits__cards { position: relative; margin-top: clamp(-40px, -2vw, -20px); padding: 0 var(--edge) clamp(40px, 4vw, 80px); }
.benefits-carousel { position: relative; }
.benefits-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 28px); }
.benefit-card { padding: clamp(18px, 1.8vw, 36px); text-align: center; background-color: #EDF0FC; border-radius: 8px; }
.benefit-icon { width: clamp(52px, 4.4vw, 84px); height: clamp(52px, 4.4vw, 84px); margin: 0 auto clamp(12px, 1.2vw, 24px); }
.benefit-icon img { width: 100%; height: 100%; object-fit: contain; }
.benefit-card h3 { font-size: clamp(.95rem, 1.05vw, 1.3rem); font-weight: 700; color: var(--navy); margin-bottom: .5em; }
.benefit-card p { font-size: clamp(.8rem, .85vw, 1.02rem); line-height: 1.5; color: var(--gray); }
.benefits-nav { display: none; }

/* ==================== CÓMO FUNCIONA ==================== */
.how { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 5vw, 96px); }
.how__bg { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; background-color: var(--blue); clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); }
.how__text, .how__media { position: relative; }
.how__title { font-size: clamp(2.2rem, 4.69vw, 5.625rem); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; color: var(--black); }
.how__title em { color: var(--blue); font-style: italic; }
.how__lead { margin: clamp(12px, 1.2vw, 24px) 0 clamp(20px, 2vw, 40px); max-width: 26em; font-size: clamp(.95rem, 1.05vw, 1.25rem); line-height: 1.5; color: var(--gray); }
.how__steps { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 28px); padding: clamp(18px, 1.8vw, 36px); background-color: var(--white-soft); border-radius: 12px; }
.how__step { display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 24px); }
.how__step-icon {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: clamp(36px, 2.8vw, 54px); height: clamp(36px, 2.8vw, 54px); border: 1.5px solid var(--blue); border-radius: 8px; color: var(--blue);
}
.how__step-icon svg { width: 50%; height: 50%; }
.how__step-title { font-size: clamp(.9rem, 1vw, 1.2rem); font-weight: 700; color: var(--black); }
.how__step-text { margin-top: 2px; font-size: clamp(.8rem, .85vw, 1rem); line-height: 1.4; color: var(--gray); }
.how__video {
    position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden;
    border: clamp(6px, .7vw, 14px) solid var(--black); border-radius: 16px; background-color: var(--black); box-shadow: 0 24px 60px rgba(2, 8, 25, .35);
}
.how__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==================== TESTIMONIOS ==================== */
.testimonials { position: relative; }
.testimonials__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(20px, 3vw, 60px); margin-bottom: clamp(24px, 2.6vw, 52px); }
.testimonials__title { margin-top: clamp(6px, .6vw, 12px); font-size: clamp(1.6rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--navy); max-width: 14em; }
.testimonials__lead { font-size: clamp(.8rem, .9vw, 1.1rem); line-height: 1.5; color: var(--gray); max-width: 34em; }
.testimonials-carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.swipe { overflow: hidden; position: relative; }
.carousel-track { --gap: 40px; display: flex; gap: var(--gap); transition: transform .4s ease; }
.testimonial-card {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3); padding: clamp(18px, 1.8vw, 34px);
    background-color: #fff; border-radius: 8px; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.testimonial-head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(10px, 1vw, 18px); }
.testimonial-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background-color: var(--tint); color: var(--blue); }
.testimonial-icon svg { width: 22px; height: 22px; }
.testimonial-title { font-size: clamp(.95rem, 1.05vw, 1.3rem); font-weight: 700; color: var(--navy); }
.testimonial-text { flex: 1; font-size: clamp(.82rem, .88vw, 1.05rem); line-height: 1.55; color: var(--gray); margin-bottom: clamp(14px, 1.4vw, 24px); }
.testimonial-text strong { font-weight: 700; color: var(--blue); }
.testimonial-footer { display: flex; align-items: center; gap: 12px; padding-top: clamp(10px, 1vw, 18px); border-top: 1px solid var(--gray-light); }
.testimonial-avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--blue); color: #fff; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.testimonial-author { display: block; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--black); line-height: 1.2; }
.testimonial-role { display: block; font-size: .75rem; color: var(--gray); }
.testimonial-stars { margin-left: auto; color: #F2A516; font-size: .8rem; letter-spacing: 2px; white-space: nowrap; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(20px, 2vw, 36px); }
.carousel-btn {
    position: absolute; top: calc(50% - 30px); z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 50%; background-color: #fff; color: var(--blue);
    box-shadow: 0 4px 14px rgba(2, 8, 25, .18); cursor: pointer; transition: var(--transition);
}
.carousel-btn:hover { background-color: var(--blue); color: #fff; }
.carousel-prev { left: calc(var(--gutter) / -1.6); }
.carousel-next { right: calc(var(--gutter) / -1.6); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background-color: var(--gray-light); cursor: pointer; transition: var(--transition); }
.carousel-dot.active { background-color: var(--blue); width: 22px; border-radius: 6px; }
.swipe-enabled { overflow: hidden; position: relative; visibility: visible; }
.swipe-enabled .swipe-wrap { position: relative; display: block; overflow: hidden; }
.swipe-enabled .swipe-wrap > * { float: left; width: 100%; position: relative; flex: 0 0 100%; }
.swipe-enabled .swipe-wrap::after { content: ''; display: block; clear: both; }

/* ==================== BANDA CTA ==================== */
.band { background-color: var(--blue); color: #fff; padding-top: clamp(20px, 2vw, 36px); padding-bottom: clamp(20px, 2vw, 36px); clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%); }
.band__inner { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 30px); padding-top: clamp(14px, 1.4vw, 28px); }
.band__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: clamp(48px, 4vw, 76px); height: clamp(48px, 4vw, 76px); border-radius: 50%; background-color: rgba(255, 255, 255, .15); }
.band__icon svg { width: 52%; height: 52%; }
.band__text { flex: 1; }
.band__title { font-size: clamp(1.05rem, 1.4vw, 1.7rem); font-weight: 700; line-height: 1.2; }
.band__sub { margin-top: 2px; font-size: clamp(.8rem, .9vw, 1.05rem); opacity: .9; }
.band__button {
    display: inline-flex; align-items: center; gap: 8px; padding: .8em 1.6em; border-radius: 999px; background-color: var(--green); color: #fff;
    font-size: clamp(.8rem, .9vw, 1.05rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; transition: filter .2s ease;
}
.band__button:hover { filter: brightness(.94); }

/* ==================== PLANES ==================== */
.pricing { position: relative; }
.pricing__head { text-align: center; }
.pricing__title { margin-top: clamp(6px, .6vw, 12px); font-size: clamp(1.8rem, 3.1vw, 3.75rem); font-weight: 800; color: var(--navy); }
.pricing__lead { margin-top: clamp(8px, .8vw, 16px); font-size: clamp(.85rem, .95vw, 1.15rem); color: var(--gray); }
#promo-banner { text-align: center; margin-bottom: 1.5rem; }
.promo-banner-title { margin-bottom: .75rem; font-size: clamp(1.4rem, 2.4vw, 2.6rem); font-weight: 800; color: var(--navy); }
.promo-banner-code { display: inline; color: #fff; font-size: inherit; font-weight: 700; letter-spacing: .03em; padding: .2em .75em; border-radius: 4px; }

.pricing-tabs { display: none; }
.pricing-carousel { max-width: 1080px; margin: clamp(32px, 3.6vw, 64px) auto 0; }
.pricing-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(14px, 1.6vw, 28px); }
.plan-wrap { position: relative; padding-top: 18px; }
.plan__saving {
    position: absolute; top: 0; left: 50%; z-index: 3; transform: translateX(-50%); padding: 6px clamp(18px, 2vw, 36px);
    border-radius: 999px; background-color: #CDEFC3; color: #14501F; font-size: clamp(.95rem, 1.1vw, 1.3rem); font-weight: 800; white-space: nowrap;
}
.pricing-card {
    position: relative; display: flex; flex-direction: column; padding: clamp(18px, 1.7vw, 30px);
    border: 3px solid transparent; border-radius: 10px; background-color: #fff; box-shadow: 0 10px 34px rgba(2, 8, 25, .14); color: var(--navy);
}
.pricing-card.featured { border-color: var(--green); }
.plan__legend { margin-bottom: clamp(14px, 1.3vw, 22px); padding-bottom: clamp(12px, 1.1vw, 18px); border-bottom: 1px solid var(--gray-light); font-size: clamp(.82rem, .9vw, 1.05rem); }
.pricing-name { font-size: clamp(1.7rem, 2.1vw, 2.5rem); font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--blue); }
.plan__info { margin-top: 6px; font-size: clamp(.9rem, 1vw, 1.15rem); }
.pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.pricing-amount { font-size: clamp(2.5rem, 3.4vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--black); }
.pricing-per { font-size: clamp(.95rem, 1.05vw, 1.25rem); }
.plan__iva { font-size: clamp(.9rem, 1vw, 1.15rem); }
.promo-original { text-decoration: line-through; opacity: .45; font-size: .5em; font-weight: 600; margin-right: .3em; }
.plan__features { margin: clamp(14px, 1.3vw, 22px) 0; padding-top: clamp(12px, 1.1vw, 18px); border-top: 1px solid var(--gray-light); }
.plan__features li { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: clamp(.82rem, .9vw, 1.02rem); }
.plan__features svg { flex: 0 0 auto; width: 22px; height: 22px; }
.pricing-total { padding: 12px 16px; border-radius: 8px; background-color: #F0F3F8; }
.pricing-total__main { font-size: clamp(.95rem, 1.05vw, 1.25rem); }
.pricing-total__main strong { font-weight: 800; color: var(--black); }
.pricing-total__net { margin-top: 2px; font-size: clamp(.78rem, .85vw, .98rem); color: var(--gray); }
.pricing-card .btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: clamp(12px, 1.1vw, 18px);
    padding: 14px 16px; border-radius: 8px; background-color: var(--blue); color: #fff; font-size: clamp(.95rem, 1.05vw, 1.2rem); font-weight: 700; transition: filter .2s ease;
}
.pricing-card .btn:hover { filter: brightness(.92); }
.pricing-card.featured .btn { background-color: var(--green); }
.promo-badge { font-size: .875rem; font-weight: 700; margin-bottom: .6rem; }
.pricing__secure { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(24px, 2.4vw, 44px); font-size: clamp(.8rem, .9vw, 1.05rem); color: var(--navy); text-align: center; }
.pricing__secure svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--blue); }

/* ==================== QUÉ TE OFRECEMOS ==================== */
.offer { position: relative; }
.offer::after { content: ''; position: absolute; left: 0; bottom: 0; width: 5.9vw; height: 7.1vw; background-color: var(--blue); clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%); pointer-events: none; }
.deco-blueprint {
    position: absolute; top: clamp(24px, 3vw, 60px); left: 1.6%; width: 10%; height: 5vw; pointer-events: none;
    border-left: 1.5px dashed rgba(55, 89, 225, .55); background: linear-gradient(rgba(55, 89, 225, .55), rgba(55, 89, 225, .55)) 0 60% / 100% 1.5px no-repeat;
}
.offer__hex { position: absolute; top: clamp(16px, 2vw, 40px); right: 3%; width: clamp(80px, 7vw, 140px); pointer-events: none; }
.offer__header { text-align: center; }
.offer__title { margin-top: clamp(8px, .8vw, 16px); font-size: clamp(1.6rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--navy); }
.offer__lead { margin-top: clamp(10px, 1vw, 20px); font-size: clamp(.8rem, .9vw, 1.1rem); line-height: 1.5; color: var(--gray); }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 24px); margin-top: clamp(28px, 3.4vw, 64px); }
.feature-card { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 24px); padding: clamp(14px, 1.3vw, 26px); background-color: #fff; border-radius: 6px; box-shadow: var(--shadow-card); }
.feature-icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: clamp(56px, 5vw, 96px); height: clamp(56px, 5vw, 96px); border-radius: 50%; background-color: var(--tint); }
.feature-icon img { width: 58%; height: 58%; object-fit: contain; }
.feature-content { flex: 1; min-width: 0; }
.feature-content h3 { font-size: clamp(.85rem, .95vw, 1.15rem); font-weight: 700; line-height: 1.25; color: var(--navy); }
.feature-content h3::after { content: ''; display: block; width: 22px; height: 2px; margin: clamp(6px, .6vw, 12px) 0; background-color: var(--blue); }
.feature-content p { font-size: clamp(.72rem, .78vw, .95rem); line-height: 1.5; color: var(--gray); }

/* ==================== FAQ ==================== */
.faq { position: relative; }
.faq::after { content: ''; position: absolute; left: 0; bottom: 0; width: 8.6vw; height: 11.9vw; background-color: var(--blue); clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%); pointer-events: none; }
.faq__header { text-align: center; }
.faq__title { margin-top: clamp(6px, .6vw, 12px); font-size: clamp(1.8rem, 3.1vw, 3.75rem); font-weight: 800; color: var(--navy); }
.faq__lead { margin-top: clamp(8px, .8vw, 16px); font-size: clamp(.85rem, .95vw, 1.15rem); color: var(--gray); }
.faq-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); max-width: 1000px; margin: clamp(24px, 3vw, 56px) auto 0; }
.faq-item { background-color: #fff; border-radius: 6px; box-shadow: var(--shadow-card); }
.faq-question {
    display: flex; align-items: center; gap: clamp(12px, 1.2vw, 22px); width: 100%; padding: clamp(12px, 1.1vw, 20px) clamp(14px, 1.4vw, 28px);
    border: 0; background: transparent; text-align: left; cursor: pointer;
}
.faq-question span { flex: 1; font-size: clamp(.85rem, 1vw, 1.2rem); font-weight: 600; color: var(--navy); }
.faq-question svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--blue); transition: transform .2s ease; }
.faq-item.active .faq-question svg { transform: rotate(45deg); }
.faq-answer { display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-answer-content { padding: 0 clamp(14px, 1.4vw, 28px) clamp(14px, 1.2vw, 22px); }
.faq-answer-content p { font-size: clamp(.8rem, .9vw, 1.05rem); line-height: 1.6; color: var(--gray); }

/* ==================== CTA FINAL ==================== */
.cta { padding-bottom: clamp(48px, 6vw, 110px); }
.cta__box {
    position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 48px); max-width: 1000px; margin: 0 auto;
    padding: clamp(16px, 1.8vw, 36px) clamp(18px, 2.4vw, 48px); background-color: var(--tint); border-radius: 8px;
}
.cta__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(64px, 6vw, 112px); height: clamp(64px, 6vw, 112px); border-radius: 50%; background-color: #D7E1F7; color: var(--blue); }
.cta__icon svg { width: 44%; height: 44%; }
.cta__text { flex: 1; padding-left: clamp(16px, 2.4vw, 48px); border-left: 1px solid rgba(16, 34, 107, .15); font-size: clamp(.9rem, 1.15vw, 1.4rem); font-weight: 700; line-height: 1.35; color: var(--navy); }
.cta__text em { font-style: normal; color: var(--blue); }
.cta__button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 2px; background-color: var(--blue); color: #fff;
    font-size: clamp(.7rem, .8vw, .95rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: filter .2s ease;
}
.cta__button:hover { filter: brightness(.92); }

/* ==================== FOOTER ==================== */
.footer { background-color: var(--navy); color: #fff; padding: 28px var(--edge); }
.footer .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-copyright { font-size: .9rem; opacity: .85; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: .9rem; opacity: .85; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }

/* ==================== TABLET / MOBILE ==================== */
@media (max-width: 1023px) {
    .hero { align-items: flex-end; }
    .hero__photo { object-position: 60% center; }
    .hero__panel { clip-path: none; background-color: rgba(55, 89, 225, .92); }
    .hero__blueprint, .hero__br { display: none; }

    .benefits__top { grid-template-columns: minmax(0, 1fr); }
    .benefits__text { padding-right: var(--edge); }
    .benefits__media { display: none; }
    .benefits__cards { margin-top: 0; }

    .how { grid-template-columns: minmax(0, 1fr); }
    .how__bg { top: auto; height: 55%; width: 100%; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }

    .testimonials__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .carousel-btn { display: none; }

    .features-grid { grid-template-columns: minmax(0, 1fr); }
    .offer::after, .faq::after, .deco-blueprint { display: none; }
    .offer__br { display: none; }

    /* Selector de plan (mobile): un solo plan visible a la vez */
    .pricing-tabs { display: flex; max-width: 460px; margin: 38px auto 0; padding: 4px; border-radius: 10px; background-color: rgba(55, 89, 225, .1); }
    .pricing-tab {
        position: relative; flex: 1 1 0; min-width: 0; padding: 10px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--navy);
        font-size: clamp(.68rem, 3.2vw, .85rem); font-weight: 700; white-space: nowrap; cursor: pointer;
    }
    .pricing-tab.is-active { background-color: var(--blue); color: #fff; }
    .pricing-tab-off { position: absolute; top: -9px; right: 2px; padding: 1px 6px; border-radius: 999px; background-color: var(--green); color: #fff; font-size: .58rem; font-weight: 800; line-height: 1.4; }
    .pricing-carousel { margin-top: 16px; max-width: 460px; }
    .pricing-track { display: block; }
    .plan-wrap:not(.is-active) { display: none; }
}

@media (max-width: 768px) {
    .trust { flex-direction: column; gap: 16px; }
    .trust__logos { flex-direction: column; }
    .benefits-track { display: block; }
    .benefits-nav { display: flex; }
    .carousel-track { --gap: 20px; }
    .testimonial-card { flex-basis: 100%; }
    .band { clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%); }
    .band__inner { flex-direction: column; text-align: center; }
    .cta__box { flex-direction: column; text-align: center; }
    .cta__text { padding-left: 0; border-left: 0; }
    .cta__button { white-space: normal; }
    .footer .container { flex-direction: column; text-align: center; }
    .promo-topbar-inner { flex-direction: column; gap: .4rem; text-align: center; padding: .6rem 16px; }
    .promo-topbar-desc { font-size: 1rem; white-space: normal; }
    .promo-topbar-discount { font-size: 1.2rem; }
}