/* ============================================
   PrestamosCloud Landing - Exact Figma Design
   ============================================ */

/* === CSS VARIABLES === */
:root {
    --blue-primary: #0071d8;
    --cyan-accent: #00d0ff;
    --bg-header: #edecea;
    --bg-steps: radial-gradient(circle, rgba(14,52,86,1) 33.654%, rgba(6,40,70,1) 100%);
    --text-black: #000;
    --text-gray: #808080;
    /* #bfbfbf daba 1.75:1 sobre el fondo de la seccion de precios (#faf9f7):
       la nota que explica la tasa de cambio era practicamente invisible.
       Sus tres usos son texto pequeno sobre fondo claro, asi que sube el token. */
    --text-gray-light: #6e6e6e;  /* 4.85:1 sobre #faf9f7 */
    --border-card: rgba(238,238,238,0.5);
    --footer-bg: linear-gradient(31deg,rgba(0, 113, 216, 1) 49%, rgba(0, 208, 255, 1) 100%);

    --gold-accent: #d97706;
    --gold-light: #fef3c7;
    --green-success: #059669;
    --warm-neutral: #f9f8f6;
    --warm-border: rgba(217, 119, 6, 0.15);
    --text-warm-gray: #57534e;

    /* El extremo cian original (#00d0ff) da 1.83:1 sobre blanco: no llega ni al
       3:1 que WCAG pide para texto grande, y el ultimo tercio de cada rotulo
       quedaba desvanecido. Se oscurece manteniendo el tono (hue 191).
       Por defecto se usa la variante que cumple 4.5:1, valida para cualquier
       tamano; los dos titulares grandes se quedan con la mas clara, que es lo
       que la norma permite a partir de 18.66px en negrita o 24px normales. */
    --gradient-text: linear-gradient(90deg, #0071d8 18.269%, #00d0ff 68.269%);
    --gradient-text-display: linear-gradient(90deg, #0071d8 18.269%, #00d0ff 68.269%);
    /* Barra de acento de la primera tarjeta de testimonio. Se alinea con la
       paleta ya corregida de los avatares: misma familia de color, tono que
       pasa de 1.83:1 a 4.71:1 contra el blanco de la tarjeta. Como objeto
       grafico le bastaria 3:1, pero asi el bloque entero queda homogeneo. */
    --gradient-border: linear-gradient(180deg,rgba(0, 113, 216, 1) 39%, rgba(0, 208, 255, 1) 100%);
    /* Degradados de boton: llevan texto BLANCO encima. El mismo #00d0ff que se
       corrigio en --gradient-text daba aqui 1.83:1 contra el blanco, y como el
       contraste es simetrico da igual que el cian sea la letra o el fondo.
       Los nueve elementos que los usan son texto de 10 a 16px con peso 500-600:
       ninguno llega al tamano que permitiria bajar a 3:1, asi que todos van al
       tono estricto. Las paradas y los angulos no se tocan. */
    --gradient-login: linear-gradient(108.307deg, #0071d8 23.927%, #00d0ff 105.89%);
    --gradient-cta-hero: linear-gradient(-90deg, #00d0ff 14.63%, #0071d8 57.846%);
    --gradient-cta-feature: linear-gradient(101.31deg, #0071d8 14.904%, #00d0ff 100%);


    --shadow-card: 0px 5px 20px -12px rgba(0,0,0,0.25);
    --shadow-badge: 0px 5px 20px -10px rgba(0,0,0,0.25);
    --shadow-testimonial: 0px 5px 30px -15px rgba(0,0,0,0.25);
    --shadow-hero-img: 0px 10px 10px -9px rgba(0,0,0,0.25);
    --shadow-steps: 0px 10px 50px -30px rgba(0,0,0,0.25);
    --shadow-faq-icon: 0px 3px 10px -4px rgba(0,0,0,0.25);
    --shadow-product-white: 0px 4px 30px 7px rgba(255,255,255,0.25);

    --radius-pill: 50px;
    --radius-card: 10px;
    --radius-img: 8px;
    --radius-faq: 5px;

    --font-main: 'Montserrat', sans-serif;
    --font-alt: 'Inter', sans-serif;
}

/* === AJUSTES TIPOGRÁFICOS POR IDIOMA ===
   El atributo lang lo escribe PHP segun el idioma activo. Inglés y portugués son
   más largos que el español y algunos titulares display no caben a su tamaño. */
html[lang="en"] { --h2-escala: 0.84; }
html[lang="pt"] { --h2-escala: 0.96; }

/* Entre 769 y 1280 el hero se estrecha a 520px y el titular vuelve a quedar
   al filo: 0.84 lo dejaba justo en 520/520, sin un pixel de holgura. */
@media (max-width: 1280px) {
    html[lang="en"] { --h2-escala: 0.80; }
    html[lang="pt"] { --h2-escala: 0.92; }
}

/* Por debajo de 768px el titular ya es lo bastante pequeño y cabe en los tres
   idiomas: se recupera el tamaño completo para no encogerlo sin necesidad. */
@media (max-width: 768px) {
    html[lang="en"],
    html[lang="pt"] { --h2-escala: 1; }
}

/* === SCROLL REVEAL === */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* === PAGE LOADER === */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.loader-logo {
    width: 260px;
    animation: loaderPulse 1.8s ease-in-out infinite;
}

.loader-spinner {
    width: 36px;
    height: 36px;
    border: 3.5px solid #e9e9e9;
    border-top-color: #0071d8;
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes loaderPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 70px; }

body {
    font-family: var(--font-main);
    color: var(--text-black);
    background: #fff;
    overflow-x: hidden;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* === UTILITY CLASSES === */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto grande segun WCAG (>=24px, o >=18.66px en negrita): le basta 3:1.
   .hero-h2 es 36px/900. El titulo del carrusel (.feature-title, 21.6px/700)
   tambien es grande, pero lo pinta una regla propia mas especifica, asi que
   se corrige alli y no aqui. */
.hero-h2.gradient-text {
    background: var(--gradient-text-display);
    -webkit-background-clip: text;
    background-clip: text;
}

.section-label {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: inline-block;
}

.section-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: var(--text-black);
    line-height: 1.3;
    margin-bottom: 8px;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-black);
    text-align: center;
    margin-bottom: 30px;
}

.page-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

/* === HEADER === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--bg-header);
    z-index: 1000;
    transition: box-shadow 0.3s;
}

.header.scrolled {
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    background-color: #ffffff;
}

.header-inner {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 30px; width: 174px; object-fit: contain; }

.navbar {
    display: flex;
    gap: 30px;
    margin: 0 auto;
}

.nav-link {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-black);
    white-space: nowrap;
    transition: color 0.3s;
}

.nav-link:hover { color: var(--blue-primary); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-actions-mobile{
    display: none;
}

.btn-register-header {
    width: 120px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--blue-primary);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.btn-register-header::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1.5px solid var(--blue-primary);
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.btn-register-header:hover::after {
    opacity: 1;
}

.btn-login-header {
    width: 131px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--gradient-login);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-login-header:hover { opacity: 0.9; }
.btn-login-header .arrow-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); }

.nav-actions { display: none; }

/* === SELECTORES DEL HEADER (pais e idioma) ===
   Los dos comparten anatomia: trigger en pastilla + panel flotante. Cada
   selector cubre .country-select y .lang-select para no duplicar el bloque. */
.country-select,
.lang-select{ position: relative; }

.country-select-trigger,
.lang-select-trigger{
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-pill);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.country-select-trigger:hover,
.lang-select-trigger:hover{ border-color: var(--blue-primary); }

.country-select-flag,
.lang-select-flag{ font-size: 14px; line-height: 1; }

.country-select-name,
.lang-select-name{
    font-size: 11px;
    font-weight: 500;
    color: var(--text-black);
    white-space: nowrap;
}

.country-select-trigger i,
.lang-select-trigger i{
    font-size: 13px;
    color: var(--text-gray);
    transition: transform 0.2s;
}

.country-select.is-open .country-select-trigger,
.lang-select.is-open .lang-select-trigger{
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 3px rgba(0,113,216,0.08);
}

.country-select.is-open .country-select-trigger i,
.lang-select.is-open .lang-select-trigger i{ transform: rotate(180deg); }

.country-select-panel,
.lang-select-panel{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.16);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1001;
}

.country-select.is-open .country-select-panel,
.lang-select.is-open .lang-select-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.country-select-title,
.lang-select-title{
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-gray-light);
    padding: 4px 16px 8px;
}

.country-select-list,
.lang-select-list{ list-style: none; }

/* --- Especificos del selector de idioma --- */

/* Siglas ES / EN / PT: no se usan banderas porque un idioma no es un pais
   (portugues no es Portugal ni Brasil) y el selector de pais que va al lado
   ya usa banderas. */
.lang-select-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-black);
    line-height: 1;
}

/* 3 idiomas no necesitan los 240px ni el scroll del panel de paises */
.lang-select-panel {
    width: 190px;
    max-height: none;
    overflow: visible;
}

.lang-select-item-code {
    flex-shrink: 0;
    width: 26px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-gray);
}

.lang-select-item.is-selected .lang-select-item-code { color: var(--blue-primary); }

.country-select-item,
.lang-select-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-black);
    cursor: pointer;
    transition: background 0.15s;
}

.country-select-item:hover,
.lang-select-item:hover{ background: #f4f7fb; }

.country-select-item.is-selected,
.lang-select-item.is-selected{
    background: #eaf4ff;
    color: var(--blue-primary);
    font-weight: 600;
}

.country-select-item-flag,
.lang-select-item-flag{ font-size: 16px; line-height: 1; flex-shrink: 0; }
.country-select-item-name,
.lang-select-item-name{ flex: 1; }

.country-select-item-check,
.lang-select-item-check{
    font-size: 15px;
    color: var(--blue-primary);
    visibility: hidden;
}

.country-select-item.is-selected .country-select-item-check,
.lang-select-item.is-selected .lang-select-item-check{ visibility: visible; }

/* En el menu movil (dentro de .nav-actions) el trigger va a lo ancho, con nombre visible */
.nav-actions .country-select,
.nav-actions .lang-select{ width: 100%; }
.nav-actions .country-select-trigger,
.nav-actions .lang-select-trigger{ width: 100%; justify-content: center; height: 36px; }
.nav-actions .country-select-panel,
.nav-actions .lang-select-panel{ left: 0; right: 0; width: 100%; }

/* === MEGA MENU === */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link--dropdown {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.nav-chevron {
    font-size: 14px;
    transition: transform 0.25s ease;
    line-height: 1;
}

.nav-dropdown.active .nav-chevron {
    transform: rotate(180deg);
}

.mega-menu {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100vw;
    background: #fff;
    border-top: 2px solid #0071d8;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 20px 40px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 998;
}

.nav-dropdown.active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.mega-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background 0.2s ease;
    text-decoration: none;
}

.mega-item:hover {
    background: #f0f7ff;
}

.mega-item i {
    font-size: 18px;
    color: #0071d8;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.mega-item span {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
    white-space: nowrap;
}

.mega-item:hover span {
    color: #0071d8;
}

.mega-menu-separator {
    max-width: 900px;
    margin: 8px auto 0;
    border-top: 1px solid #e8edf3;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.mega-menu-separator .mega-item {
    opacity: 0.75;
}
.mega-menu-separator .mega-item:hover {
    opacity: 1;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.menu-toggle i {
    font-size: 28px;
    color: var(--text-black);
}

.menu-overlay {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100vh - 50px);
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* === HERO === */
.hero {
    padding-top: 50px;
    background: var(--bg-header);
    position: relative;
    overflow: hidden;
}

.shape{
    position: absolute;
    width: 90px;
}

.shape.triangle-shape{
    bottom: 80px;
    left: 130px;
}

.shape.circle-shape{
    top: 100px;
    right: 630px;
}

.shape.rectangle-shape{
    bottom: -20px;
    right: 0;
    width: 350px;
}

.hero-bg {
    width: 100%;
    min-height: 800px;
    position: relative;
}

.hero-content {
    width: 100%;
    margin: 0 auto;
    padding: 64px 100px 0 150px;
    display: flex;
    align-items: flex-start;
    position: relative;
    min-height: 674px;
}

.hero-left {
    flex: 0 0 700px;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 4px 15px;
    box-shadow: var(--shadow-badge);
    margin-bottom: 20px;
}

.hero-badge img { width: 12px; height: 12px; }
.hero-badge span { font-size: 9px; font-weight: 500; color: var(--text-black); }

.hero-h1 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--text-black);
    line-height: 1.15;
    margin-bottom: 0;
}

/* --h2-escala ajusta el titular por idioma: en inglés "YOUR PORTFOLIO," mide
   794px a 80px y solo hay 700 disponibles, asi que pasaba de 2 lineas a 4.
   Se aplica como factor para que sobreviva a los cuatro tamanos del breakpoint. */
.hero-h2 {
    font-size: calc(5em * var(--h2-escala, 1));
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 20px;
}

.hero-description {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-black);
    line-height: 1.7;
    max-width: 538px;
}

.hero-description b{
    font-weight: 600;
}

.hero-description span { font-weight: 300; }

/* Aviso de transparencia: PrestamosCloud vende software, no otorga prestamos.
   Requerido para la politica de "Afirmaciones no fiables" de Google Ads. */
.hero-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 538px;
    margin-bottom: 6px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 113, 216, 0.2);
    border-radius: var(--radius-card);
    background: rgba(0, 113, 216, 0.05);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-black);
}

.hero-disclaimer i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 14px;
    color: var(--blue-primary);
}

.hero-disclaimer b { font-weight: 600; }

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--gradient-cta-hero);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 30px;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,113,216,0.3);
}

.hero-cta .arrow-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); }

.hero-social-proof {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.hero-proof{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.hero-avatars {
    display: flex;
    align-items: center;
}

.hero-avatars .avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: -5px;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-avatars .avatar:nth-child(1) {
    background-color: var(--blue-primary);
}

.hero-avatars .avatar:nth-child(2) {
    background-color: #D8A200;
}

.hero-avatars .avatar:nth-child(3) {
    background-color: #D84F00;
}

.hero-avatars .avatar:nth-child(4) {
    background-color: #00B8D8;
}

.hero-avatars .avatar:nth-child(5) {
    background-color: #9E00D8;
}

.hero-avatars .avatar span{
    font-size: 0.6em;
    font-weight: 500;
    color: #fff;
}

.hero-avatars .avatar-count {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--blue-primary);
    color: #fff;
    font-family: var(--font-alt);
    font-size: 9px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -8px;
    border: 2px solid #fff;
}

.hero-social-proof .stars{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

.hero-social-proof .stars .star{
    width: 14px;
}

.hero-proof-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.hero-proof-text span {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-alt);
}

.hero-proof-text span.gray { font-weight: 300; color: var(--text-gray); }
.hero-proof-text span.blue { color: var(--blue-primary); }

.hero-right {
    flex: 1;
    position: relative;
    min-height: 600px;
}

.hero-right img{
    object-fit: fill;
    max-width: 700px;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: -120px;
}

.hero-gradient-bar {
    position: absolute;
    bottom: -95px;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, transparent 0%, #fff 100%);
    z-index: 1;
}

.hero-gradient-bar .wave{
    width: 100%;
    object-fit: cover;
}

/* === HOW IT WORKS === */
.how-works {
    padding: 60px 0;
    text-align: center;
    background: #fff;
}

.how-works-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.steps-container {
    display: flex;
    background: var(--bg-steps);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-steps);
    overflow: hidden;
    margin-top: 25px;
    position: relative;
}

.step {
    flex: 1;
    padding: 25px 20px;
    text-align: left;
    position: relative;
}

.curved-lines{
    position: absolute;
    width: 100%;
    height: 100%;
}

.step-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 12px;
}

.step-icon img { width: 100%; height: 100%; filter: brightness(0) invert(1); }

.step h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.step p {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    opacity: 0.85;
}

/* === FINTECH AI STATEMENT === */
.fintech-ai-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(160deg, #f0f7ff 0%, #e8f4fd 30%, #fff 50%, #eef6ff 70%, #f5faff 100%);
}

/* Floating gradient orbs */
.fintech-ai-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

.fintech-ai-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #0071d8, transparent 70%);
    top: -10%;
    right: -8%;
    animation: fintechOrbFloat1 20s ease-in-out infinite;
}

.fintech-ai-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #00d0ff, transparent 70%);
    bottom: -5%;
    left: -5%;
    animation: fintechOrbFloat2 18s ease-in-out infinite;
}

.fintech-ai-orb--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #0056b3, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fintechOrbFloat3 22s ease-in-out infinite;
}

@keyframes fintechOrbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-40px, 30px); }
    66% { transform: translate(20px, -20px); }
}

@keyframes fintechOrbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -25px); }
    66% { transform: translate(-20px, 15px); }
}

@keyframes fintechOrbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}

/* Decorative shapes */
.fintech-ai-shape {
    position: absolute;
    pointer-events: none;
    opacity: 0.07;
    z-index: 0;
}

.fintech-ai-shape--circles {
    width: 220px;
    top: 8%;
    left: 5%;
    animation: fintechShapeRotate 30s linear infinite;
}

.fintech-ai-shape--triangle {
    width: 180px;
    bottom: 10%;
    right: 6%;
    animation: fintechShapeRotate 25s linear infinite reverse;
}

.fintech-ai-shape--midcircle-1 {
    width: 120px;
    top: 15%;
    right: 12%;
    opacity: 0.12;
    animation: fintechShapeBob 8s ease-in-out infinite;
}

.fintech-ai-shape--midcircle-2 {
    width: 100px;
    bottom: 18%;
    left: 10%;
    opacity: 0.12;
    animation: fintechShapeBob 10s ease-in-out infinite 2s;
}

@keyframes fintechShapeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fintechShapeBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.fintech-ai-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 20px;
}

.fintech-ai-text {
    font-family: var(--font-main);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0071d8 0%, #00d0ff 30%, #0056b3 50%, #00d0ff 70%, #0071d8 100%);
    background-size: 200% 200%;
    animation: fintechTextGradient 15s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    max-width: 900px;
    margin: 0 auto;
}

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

/* === MIGRACION === */

.migracion-section {
    /* Era la unica seccion de la portada con 80px arriba. Al convertirse en
       isla ya no necesita ese aire extra: vuelve al ritmo de las demas. */
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Ornamentos de fondo: mismo vocabulario que .ahorro-orb y .fs-*, pero a menor
   densidad porque la ilustracion ya trae su propio halo. */
.mg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.mg-orb--1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #0071d8, transparent 70%);
    opacity: 0.32;
    top: -12%;
    right: -4%;
    animation: mgOrbFloat1 24s ease-in-out infinite;
}

.mg-orb--2 {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, #00d0ff, transparent 70%);
    opacity: 0.34;
    bottom: 5%;
    left: -6%;
    animation: mgOrbFloat2 19s ease-in-out infinite;
}

@keyframes mgOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-26px, 22px) scale(1.06); }
}

@keyframes mgOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(22px, -18px) scale(1.05); }
}

.mg-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* a media altura: en la esquina superior lo tapaba el header fijo */
.mg-midcircle-yellow {
    top: 34%;
    left: min(-150px, calc(50% - 860px));
    width: 300px;
    transform: rotate(96deg);
}

/* mas sangrado y algo velado: a tamano completo competia con la ilustracion */
.mg-midcircle-blue {
    bottom: -10px;
    right: min(-145px, calc(50% - 860px));
    width: 300px;
    transform: rotate(-90deg);
}

.mg-circles {
    top: 11%;
    right: calc(50% + 570px);
    width: 112px;
    opacity: 0.75;
    animation: mgShapeDrift 28s ease-in-out infinite;
}

.mg-triangles {
    bottom: 13%;
    left: calc(50% + 570px);
    width: 88px;
    opacity: 0.65;
}

/* puntos y triangulos solo caben cuando hay margen fuera del contenedor */
@media (max-width: 1360px) {
    .mg-circles,
    .mg-triangles { display: none; }
    .mg-orb--1 { width: 520px; height: 520px; opacity: 0.34; }
    .mg-orb--2 { width: 440px; height: 440px; opacity: 0.36; }
}

@keyframes mgShapeDrift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0, -14px); }
}

/* --- LA ISLA ---
   Migracion es una funcionalidad nueva y pasaba desapercibida: era la unica
   seccion sin fondo propio, la mas baja de la pagina, y justo debajo va
   Traslados contando algo parecido con la misma maqueta. Aqui deja de ser un
   contenedor transparente y pasa a ser una isla oscura sobre el blanco, que es
   el mismo recurso que ya usan .how-works y .cta-section.

   width con calc en vez de solo max-width: sin el, por debajo de 1100px la
   isla tocaria los bordes de la pantalla. */
.migracion-inner {
    max-width: 1100px;
    width: calc(100% - 48px);
    margin: 0 auto;
    background: var(--bg-steps);
    border-radius: 30px;
    box-shadow: var(--shadow-steps);
    padding: 52px 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: left !important;
}

/* --- Color sobre el oscuro ---
   El fondo va de #0e3456 a #062846, asi que el blanco da 12.8:1. Y aqui vuelve
   a poder usarse el cian de marca: #00d0ff solo fallaba contra blanco; contra
   azul noche da 7:1. */

.mg-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mg-label-row .section-label {
    margin-bottom: 0;
    color: rgba(255,255,255,0.72);
}

/* Misma receta que la pildora de descuento de los precios, que es el unico
   badge del sitio pensado para llamar la atencion. Cambia solo el color: el
   verde #00c853 de aquella no funciona sobre azul noche. */
.mg-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--cyan-accent);
    color: #04121f;
    white-space: nowrap;
    animation: pulseBadge 2s ease-in-out infinite;
}

/* --- Entrada escalonada ---
   Sin JavaScript nuevo: el IntersectionObserver que ya existe anade .revealed a
   la <section>, y de ahi cuelgan estos retardos. Es lo unico de la portada que
   se despliega por partes en vez de entrar de una pieza. */
.mg-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.migracion-section.revealed .mg-step {
    opacity: 1;
    transform: none;
}

.migracion-section.revealed .mg-label-row      { transition-delay: 0.05s; }
.migracion-section.revealed .section-title     { transition-delay: 0.14s; }
.migracion-section.revealed .section-subtitle  { transition-delay: 0.23s; }
.migracion-section.revealed .migracion-visual  { transition-delay: 0.32s; }

.migracion-section.revealed .migracion-copy li:nth-child(1) { transition-delay: 0.45s; }
.migracion-section.revealed .migracion-copy li:nth-child(2) { transition-delay: 0.52s; }
.migracion-section.revealed .migracion-copy li:nth-child(3) { transition-delay: 0.59s; }
.migracion-section.revealed .migracion-copy li:nth-child(4) { transition-delay: 0.66s; }
.migracion-section.revealed .migracion-copy li:nth-child(5) { transition-delay: 0.73s; }

/* El boton primario del sitio es azul con letra blanca; sobre la isla oscura se
   invierte, que es lo que lo mantiene como accion principal. Blanco sobre
   #0e3456 da 12.8:1. Entra el ultimo, detras de los cinco vistos. */
.mg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin-top: 24px;
    padding: 0 24px;
    border-radius: 10px;
    background: #fff;
    color: #062846;
    font-size: 14px;
    font-weight: 700;
    transition: opacity 0.55s ease, transform 0.55s ease, gap 0.25s, box-shadow 0.25s;
}

/* Calificado con .migracion-section.revealed (0,4,0) porque el .mg-cta:hover
   pelado (0,2,0) pierde contra .migracion-section.revealed .mg-step, que fija
   transform:none con (0,3,0): el levantamiento no llegaba a aplicarse nunca.
   El transition-delay:0s anula los 0.82s de la entrada escalonada, que si no
   retrasarian tambien la reaccion al raton. */
.migracion-section.revealed .mg-cta:hover {
    gap: 12px;
    color: #062846;
    box-shadow: 0 14px 30px -16px rgba(0,0,0,0.6);
    transform: translateY(-2px);
    transition-delay: 0s;
}

.migracion-section.revealed .mg-cta { transition-delay: 0.82s; }

.migracion-copy {
    flex: 0 1 44%;
}

.migracion-visual {
    flex: 1 1 56%;
}

.migracion-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.migracion-inner .section-title{
    text-align: left !important;
    color: #fff;
}

.migracion-inner .section-subtitle{
    text-align: left !important;
    line-height: 1.6;
    margin-bottom: 22px;
    color: rgba(255,255,255,0.82);
}

.migracion-copy ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.migracion-copy li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;   /* sobre la isla oscura: 12.8:1 */
}

.migracion-copy li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%2300d0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* === TRASLADOS === */

.traslados-section {
    padding: 60px 0 80px;
    text-align: center;
    min-height: 850px;
    position: relative;
    overflow: hidden;
}

.traslados-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

.traslados-inner .section-title {
    text-align: left !important;
}

.traslados-inner .section-subtitle {
    text-align: left !important;
}

.step-img{
    position: absolute;
    right: 50%;
    top: 100px;
    transform: translateX(50%);
    width: 100%;
    max-width: 1250px;
}

.step-img-mobile{
    display: none;
    width: 90%;
}


/* === CUENTAS DE AHORRO === */

.ahorro-section {
    padding: 60px 0 80px;
    text-align: center;
    min-height: 850px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #f0f7ff 0%, #fafafa 25%, #fff 50%, #f5faff 75%, #fafafa 100%);
}

/* Gradient orbs */
.ahorro-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.ahorro-orb--1 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #0071d8, transparent 70%);
    top: -8%;
    right: -5%;
    animation: ahorroOrbFloat1 22s ease-in-out infinite;
}

.ahorro-orb--2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #00d0ff, transparent 70%);
    bottom: -5%;
    left: -6%;
    animation: ahorroOrbFloat2 18s ease-in-out infinite;
}

.ahorro-orb--3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #0071d8, transparent 70%);
    top: 45%;
    left: 15%;
    opacity: 0.22;
    animation: ahorroOrbFloat3 25s ease-in-out infinite;
}

.ahorro-orb--4 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #00d0ff, transparent 70%);
    top: 20%;
    right: 10%;
    opacity: 0.20;
    animation: ahorroOrbFloat4 20s ease-in-out infinite;
}

@keyframes ahorroOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 25px) scale(1.05); }
    66% { transform: translate(15px, -15px) scale(0.95); }
}

@keyframes ahorroOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -20px) scale(1.08); }
    66% { transform: translate(-15px, 12px) scale(0.96); }
}

@keyframes ahorroOrbFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -25px); }
}

@keyframes ahorroOrbFloat4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, 20px); }
}

/* Decorative shapes */
.ahorro-shape {
    position: absolute;
    pointer-events: none;
    opacity: 0.08;
    z-index: 0;
}

.ahorro-shape--circles {
    width: 180px;
    top: 5%;
    left: 3%;
    animation: ahorroShapeRotate 35s linear infinite;
}

.ahorro-shape--triangle {
    width: 150px;
    bottom: 8%;
    right: 4%;
    animation: ahorroShapeRotate 28s linear infinite reverse;
}

.ahorro-shape--midcircle-1 {
    width: 130px;
    bottom: 12%;
    left: -30px;
    opacity: 0.1;
    animation: ahorroShapeBob 9s ease-in-out infinite;
}

.ahorro-shape--midcircle-2 {
    width: 110px;
    top: 10%;
    right: -20px;
    opacity: 0.1;
    animation: ahorroShapeBob 11s ease-in-out infinite 2s;
}

@keyframes ahorroShapeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ahorroShapeBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

.ahorro-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.container-stepper{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container-stepper .stepper{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
}

.stepper-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
}

.stepper-item .stepper-img{
    width: 90%;
}

.stepper-item .stepper-img img{
    width: 100%;
}

.stepper-item .stepper-content{
    text-align: left !important;
    padding: 0 0 0 15px;
}

.stepper-item .stepper-content p{
    margin: 5px 0 0 0;
}

.stepper-item .stepper-content ul{
    list-style: none;
    margin: 10px 0 0 0;
}

.stepper-item .stepper-content ul li{
    margin: 5px 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* mismo marcador que .feature-list: sin el, los tipos de ahorro se leian
   como lineas de texto sueltas */
.stepper-item .stepper-content ul li::before{
    content: '◦';
    flex-shrink: 0;
    color: var(--blue-primary);
    font-size: 1.2em;
    line-height: 1.4;
}

/* === DATACREDITO === */

.datacredit {
    padding: 60px 0 80px;
    text-align: center;
    background: var(--footer-bg);
    min-height: 850px;
    position: relative;
    overflow: hidden;
}

.datacredit-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    color: #fff !important;
}

.datacredit-inner .section-label,
.datacredit-inner .section-title,
.datacredit-inner .section-subtitle{
    color: #fff !important;
}

.datacredit-info__container{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.datacredit-img{
    position: absolute;
    right: -5px;
    bottom: -125px;
    width: 100%;
    max-width: 1550px;
}

.datacredit-img-mobile{
    width: 100%;
    display: none;
}


.dt-midcircle-yellow{
    position: absolute;
    transform: rotate(125deg);
    top: -40px;
    left: -70px;
    width: 300px;
}

.dt-circles{
    position: absolute;
    right: 65px;
    top: 50px;
}

.btn-free-try.datacredit-btn-try{
    background: #fff !important;
}

.btn-free-try.datacredit-btn-try .gradient-text{
    background: var(--gradient-text);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.btn-free-try{
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: none;
    height: 40px;
    padding: 0 20px;
    border-radius: 50px;
    white-space: nowrap;
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    background: var(--gradient-cta-feature);
    width: min-content;
}

.btn-free-try .gradient-text{
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.btn-free-try:hover{
    transform: scale(1.05);
    filter: saturate(1.2);
}

/* === SERVICES === */
.services {
    padding: 60px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--warm-neutral) 100%);
}

.services-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 10px;
}

.service-card {
    background: #fff;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 15px;
    text-align: left;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    min-height: 185px;
    /* En columna para poder empujar el enlace al fondo: las descripciones
       tienen largos muy distintos y si no, cada "Quiero saber mas" quedaria
       a una altura diferente dentro de la misma fila. */
    display: flex;
    flex-direction: column;
    /* La tarjeta entera se comporta como el enlace: el cursor de mano lo
       promete y el ::after del CTA lo cumple (ver .service-card-cta::after).
       Un cursor pointer sobre algo que no se puede pulsar enganaria. */
    cursor: pointer;
    position: relative;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px -8px rgba(0,113,216,0.15);
}

.service-card:last-child {
    grid-column: auto;
}

.service-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

/* El recuadro del icono toma el color del PROPIO icono, para que no vayan
   descompasados: cada card declara --icono con el color real de su SVG y el
   fondo se deriva de ahi con una sola opacidad. Antes eran 12 reglas sueltas
   con 4 opacidades distintas y las cards 15-17 se quedaban sin fondo. */
.service-card:nth-child(1)  { --icono: #0D72A3; }   /* money-bag */
.service-card:nth-child(2)  { --icono: #1B7956; }   /* electronic-invoice */
.service-card:nth-child(3)  { --icono: #B3435D; }   /* legal-document */
.service-card:nth-child(4)  { --icono: #AB5035; }   /* map-pin */
.service-card:nth-child(5)  { --icono: #0D7B36; }   /* message */
.service-card:nth-child(6)  { --icono: #287866; }   /* shopping-cart */
.service-card:nth-child(7)  { --icono: #CC0B57; }   /* pastel-chart */
.service-card:nth-child(8)  { --icono: #6163B8; }   /* digital-document */
.service-card:nth-child(9)  { --icono: #A25700; }   /* currency */
.service-card:nth-child(10)  { --icono: #686F22; }   /* hand-bank */
.service-card:nth-child(11)  { --icono: #A75500; }   /* offline */
.service-card:nth-child(12)  { --icono: #B3435D; }   /* legal-document */
.service-card:nth-child(13)  { --icono: #AB5035; }   /* map-pin recoloreado a azul */
.service-card:nth-child(14)  { --icono: #027A53; }   /* calification */
.service-card:nth-child(15)  { --icono: #037B41; }   /* check-circle */
.service-card:nth-child(16)  { --icono: #AB5035; }   /* map-pin */
.service-card:nth-child(17)  { --icono: #0D72A3; }   /* equipos-financiados */

.service-card-icon {
    /* Respaldo primero: si el navegador no entiende color-mix descarta esa
       linea y se queda con el gris, no con el fondo transparente. */
    background-color: rgba(100, 116, 139, 0.1);
    background-color: color-mix(in srgb, var(--icono, #0071D8) 12%, transparent);
}

.service-card-icon .icon-service{
    width: 20px;
    height: 20px;
}

/* Enlace al pie de cada card. Sustituye los estilos inline que llevaban
   sueltas las cards de GPS y Equipos Financiados.

   Aparece al pasar el raton por la tarjeta. Se oculta con opacity, NO con
   display:none, por tres motivos: el hueco queda reservado y la tarjeta no
   pega un salto al revelarlo, el enlace sigue en el arbol de accesibilidad
   para los lectores de pantalla, y puede animarse. */
.service-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;      /* lo pega al fondo, alineado en toda la fila */
    padding-top: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue-primary);
    align-self: flex-start;
    /* Visible por defecto: el enlace SOLO se esconde donde consta que hay un
       raton fino. Al reves seria peligroso — un portatil hibrido con trackpad
       y pantalla tactil declara hover:hover por el trackpad, asi que si el
       usuario toca con el dedo se quedaria sin ver el enlace. Ante la duda,
       se muestra.

       Solo se anima la opacidad, a proposito: un transform en este enlace
       crearia bloque contenedor y su ::after se anclaria a el en vez de a la
       tarjeta, dejando de estirar el area pulsable. */
    opacity: 1;
    transition: opacity 0.25s ease, gap 0.2s;
}

/* pointer:fine ademas de hover:hover: un lapiz declara pointer:fine pero
   hover:none, y algun Android emula hover. Hacen falta las dos. */
@media (hover: hover) and (pointer: fine) {
    .service-card-cta { opacity: 0; }

    .service-card:hover .service-card-cta,
    .service-card:focus-within .service-card-cta { opacity: 1; }
}

.service-card-cta:hover { gap: 10px; }

/* El ::after estira el area pulsable a toda la tarjeta, para que el cursor
   de mano no mienta. Va sobre el contenido, que no esta posicionado. */
.service-card-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Foco visible para quien navega con teclado: sin esto el enlace se revela
   pero no se sabe cual de las 17 tarjetas lo tiene. */
.service-card:focus-within {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}

.service-card-cta:focus-visible { outline: none; }

/* En pantallas tactiles no hay hover: el enlace tiene que verse siempre o
   quedaria inalcanzable. Igual si el usuario pide menos movimiento. */
/* Si el usuario pide menos movimiento, el enlace no se desvanece nunca. */
@media (prefers-reduced-motion: reduce) {
    .service-card-cta { opacity: 1; transition: gap 0.2s; }
}

.service-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 6px;
}

.service-card p {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-black);
    line-height: 1.6;
}

/* === FEATURE SHOWCASE === */
.feature-showcase {
    padding: 60px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.fs-triangles {
    position: absolute;
    bottom: 15%;
    left: 5%;
    width: 120px;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.fs-circles {
    position: absolute;
    top: 8%;
    right: 5%;
    width: 150px;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.fs-midcircle-yellow {
    position: absolute;
    top: 12%;
    left: -158px;
    width: 400px;
    pointer-events: none;
    z-index: 0;
    transform: rotate(90deg);
}

.fs-midcircle-blue {
    position: absolute;
    bottom: 10%;
    right: -168px;
    width: 350px;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-90deg);
}

.feature-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.feature-content {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    text-align: left;
}

.swiper {
    width: 100%;
    height: auto;
    min-height: 500px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background: #fff !important;
    border: 1.5px solid #dbeeff;
    box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.swiper-button-next { right: 12px; }
.swiper-button-prev { left: 12px; }

.swiper-button-next:hover,
.swiper-button-prev:hover {
    border-color: var(--blue-primary);
    box-shadow: 0 8px 22px -10px rgba(0, 113, 216, 0.55);
}

/* Swiper 12 inyecta <svg class="swiper-navigation-icon"> dentro del boton.
   Anulamos su ::after para no pintar dos flechas superpuestas. */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-button-next .swiper-navigation-icon,
.swiper-button-prev .swiper-navigation-icon {
    width: 9px;
    height: 16px;
    fill: var(--blue-primary);
}

.feature-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

/* !important: swiper-bundle.min.css se carga despues que este archivo y su
   .swiper-pagination-horizontal { width: 100% } empata en especificidad. */
.feature-nav .swiper-pagination {
    position: static;
    width: auto !important;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.feature-nav .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: #d6e6f5;
    opacity: 1;
    transition: width 0.25s ease, background 0.25s ease;
}

.feature-nav .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 4px;
    background: var(--gradient-cta-feature);
}

.feature-counter {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gray);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ffffff;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 10px;
    padding: 25px 72px;
}

.swiper-slide:not(.swiper-slide-active) {
    visibility: hidden;
}

.swiper-inner__content{
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-gap: 34px;
    align-items: center;
}

.swiper-inner__content .swiper-left{
    width: 100%;
    height: 450px;
    position: relative;
    overflow: visible;
}

.swiper-inner__content .swiper-left img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.fs-glow-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 113, 216, 0.30) 0%,
        rgba(0, 156, 234, 0.18) 34%,
        rgba(0, 208, 255, 0.07) 52%,
        rgba(0, 208, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

.swiper-inner__content .swiper-right{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.swiper-inner__content .swiper-right .feature-title{
    font-size: 1.5em;
    font-weight: 700;
    width: 100%;
    text-align: left;
    line-height: 1.5;
    background: linear-gradient(90deg, #0071d8 25%, #00d0ff 62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-primary);
}

.feature-more-link::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-left: 1px;
}

.feature-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
}

.feature-stores {
    display: flex;
    gap: 10px;
    align-items: center;
}

.feature-stores a {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.feature-stores a:hover { transform: scale(1.05); }

.feature-stores img {
    height: 34px;
    width: auto;
    display: block;
}

.feature-desc {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-black);
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-list {
    margin-bottom: 25px;
    list-style: none;
    padding-left: 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    text-align: left !important;
    justify-content: flex-start;
    gap: 8px;
    font-size: 0.8em;
    font-weight: 300;
    color: var(--text-black);
    line-height: 1.6;
    margin-bottom: 4px;
}

.feature-list li::before {
    content: '◦';
    flex-shrink: 0;
    color: var(--blue-primary);
    font-size: 1.2em;
    line-height: 1.4;
}

.btn-feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: auto;
    padding: 0 30px;
    gap: 10px;
    border-radius: var(--radius-pill);
    background: var(--gradient-cta-feature);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px -8px rgba(0, 113, 216, 0.7);
}

.btn-feature img{
    width: 15px !important;
}


/* === AVAILABILITY === */
.availability {
    padding: 60px 0;
    background: #fff;
    text-align: center;
    /* max-height: 900px; */
    height: 100vh;
    background-image: url('../imgs/countries.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.availability-mobile {
    padding: 60px 0;
    background: #fff;
    text-align: center;
    max-height: 900px;
    display: none;
}

.availability-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.availability-inner__mobile {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.countries-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.country{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.country .country-img__container{
    width: 40px;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    
}

.country .country-img__container img{
    width: 100%;
    object-fit: contain;
}

.country .c-title{
    font-size: 0.9em;
    white-space: nowrap;
}

/* === PRODUCTS === */
.products {
    padding: 60px 0;
    background: #fff;
    text-align: center;
}

.products-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.products-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

.product-img {
    flex: 1;
    max-width: 340px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s;
}

.product-img:hover { transform: translateY(-3px); }

.slides-nav {
    margin-top: 20px;
}

.slides-nav img { margin: 0 auto; height: 10px; }

/* === TESTIMONIALS === */
.testimonials {
    padding: 60px 0;
    background: linear-gradient(180deg, #fff 0%, #faf9f7 40%, #faf9f7 60%, #fff 100%);
    text-align: center;
}

.testimonials-inner {
    margin: 0 auto;
    padding: 0 100px;
}

.testimonials-inner-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 70px;
    margin-top: 25px;
}

.testimonial-left{
    min-width: 600px;
    position: relative;
    display: flex;
    justify-content: center;
}

.testimonial-left .resume{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px;
    bottom: 30px;
}

.testimonial-left .resume .resume-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
}

.testimonial-left .resume .resume-item .icon{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #ffffff20;
}

.testimonial-left .resume .resume-item .icon img{
    width: 26px;
}

.testimonial-left .resume .resume-item .item-title{
    font-size: 1.5em;
    color: #fff;
    font-weight: 600;
}

.testimonial-left .resume .resume-item .item-subtitle{
    font-size: 0.8em;
    color: #ffffff;
    font-weight: 400;
}

.testimonial-left img{
    width: 100%;
}

.testimonial-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
}

.testimonial-card {
    background: #fff;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    box-shadow: var(--shadow-testimonial);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform 0.3s;
    max-width: 485px;
    position: relative;
}

.testimonial-card::before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-border);
    border-radius: 4px 0 0 4px;
}

.testimonial-card:nth-child(2)::before {
    background: linear-gradient(180deg, #92400e, #b45309);
}

.testimonial-card:nth-child(3)::before {
    background: linear-gradient(180deg, #065f46, #047857);
}

.testimonial-card:nth-child(4)::before {
    background: linear-gradient(180deg, #6d28d9, #7c3aed);
}

.testimonial-card:nth-child(5)::before {
    background: linear-gradient(180deg, #b91c1c, #dc2626);
}

.testimonial-card:nth-child(6)::before {
    background: linear-gradient(180deg, #155e75, #0e7490);
}

.testimonial-card:nth-child(2),
.testimonial-card:nth-child(4),
.testimonial-card:nth-child(6) {
    margin: 0 0 0 -50px;
}

.testimonial-card:hover { transform: translateY(-2px); }

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.testimonial-avatar-letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.testimonial-info { flex: 1; }

.testimonial-top {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 6px;
    gap: 10px;
}

.testimonial-info-user {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.testimonial-top .stars{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 4px 0 0 0;
    gap: 2px;
}

.testimonial-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-black);
}

.testimonial-role {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-gray);
    display: block;
    text-align: left;
}

.testimonial-stars { height: 12px; width: auto; }

.testimonial-quote {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-black);
    line-height: 1.6;
    text-align: left;
}

/* === CTA SECTION === */
.cta-section {
    padding: 60px 0;
    background: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 60px;
    position: relative;
    z-index: 1;
    border-radius: 30px;
    background: var(--bg-steps);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-lines{
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    z-index: -1;
}

.cta-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-subheading{
    text-align: left;
    font-size: 0.8em !important;
}

.cta-subtitle{
    text-align: left;
    color: #fff;
}

.cta-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: #fff;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 28px;
    border-radius: 10px;
    background: var(--gradient-cta-hero);
    box-shadow: #ffffff33 0px 8px 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn-cta-primary:hover { 
    filter: saturate(1.5);
    transform: scale(1.05); 
}

/* === PRICING === */
.pricing {
    padding: 60px 0 80px;
    background: linear-gradient(180deg, #f8f9fa 0%, #faf9f7 100%);
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.pricing .circles-shape{
    position: absolute;
    top: 30px;
    right: 90px;
}

.pricing .triangles-shape{
    position: absolute;
    bottom: 30px;
    left: 90px;
}

.pricing .shape-midcircle{
    position: absolute;
    width: 450px;
}

.pricing .shape-midcircle.shape-midcircle-1{
    position: absolute;
    left: 75%;
    bottom: 250px;
    transform: translate(-50%, -50%) rotate(120deg);
}

.pricing .shape-midcircle.shape-midcircle-2{
    position: absolute;
    right: 45%;
    bottom: 130px;
    transform: translate(-50%, -50%) rotate(-120deg);
}

.pricing-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.pricing-tabs {
    display: inline-flex;
    background: #e9e9e9;
    border-radius: 50px;
    padding: 4px;
    margin-top: 25px;
    gap: 4px;
}

.pricing-tab {
    padding: 10px 28px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-gray);
    transition: all 0.3s ease;
}

.pricing-tab.active {
    background: var(--gradient-login);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 113, 216, 0.25);
}

.pricing-tab:hover:not(.active) {
    color: var(--text-black);
}

.pricing-scroll-wrapper {
    margin-top: 30px;
    position: relative;
}

.pricing-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 15px 5px 25px;
    scrollbar-width: thin;
    scrollbar-color: var(--blue-primary) #e0e0e0;
}

.pricing-scroll::-webkit-scrollbar {
    height: 6px;
}

.pricing-scroll::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.pricing-scroll::-webkit-scrollbar-thumb {
    background: var(--blue-primary);
    border-radius: 10px;
}

.pricing-scroll > .pricing-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 240px;
    scroll-snap-align: start;
}

.pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 24px;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    position: relative;
    transition: transform 0.3s;
    /* overflow: hidden; */
    z-index: 2;
}

.pricing-card:hover { transform: translateY(-4px); }

.pricing-card.featured {
    border: 2px solid var(--blue-primary);
    box-shadow: 0 10px 40px rgba(0,113,216,0.15);
}

.pricing-card.featured:hover { transform: translateY(-4px); }

.btn-pricing-cta {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px 20px;
    background: var(--gradient-login);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
}

.btn-pricing-cta:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.pricing-card-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    opacity: 0.3;
}

.popular-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-login);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 16px;
    /* width: 100%; */
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    z-index: 1;
}

.pricing-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-primary);
    margin-bottom: 2px;
    letter-spacing: 1px;
    text-align: left;
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 6px;
}

.currency { font-size: 20px; font-weight: 600; }
.amount { font-size: 48px; font-weight: 900; line-height: 1; }
.period { font-size: 14px; color: var(--text-gray); font-family: var(--font-alt); }
.price-usd-tag {
    align-self: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #7c8896;
    background: #f1f4f8;
    border: 1px solid #e3e8ef;
    border-radius: 4px;
    padding: 2px 5px;
    margin-left: 5px;
    line-height: 1;
    white-space: nowrap;
}

.price-rd {
    text-align: center;
    font-size: 11px;
    color: var(--text-gray);
    margin-bottom: 10px;
}

.price-rd .price-rd-amount { color: #334155; font-weight: 700; }
.price-rd .price-rd-label { color: var(--text-gray-light); margin-left: 2px; }

.price-rd-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-gray-light);
    margin-top: 18px;
    /* Los triangulos decorativos de la seccion son absolutos y se pintaban
       encima de esta nota, que en movil quedaba ilegible. Posicionarla la
       sube por delante de la decoracion. */
    position: relative;
    z-index: 1;
}

.plan-desc {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 20px;
    font-weight: 300;
    text-align: left;
}

.plan-features { text-align: left; margin-bottom: 25px; }

.plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-black);
    font-weight: 400;
}

.plan-features li i.bx-check { color: var(--green-success); font-size: 18px; }
.plan-features li i.bx-x { color: #dc2626; font-size: 18px; opacity: 0.5; }

.btn-plan {
    display: block;
    width: 100%;
    height: 38px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 38px;
    border: 1.5px solid var(--blue-primary);
    color: var(--blue-primary);
    transition: all 0.3s;
}

.btn-plan:hover { background: var(--blue-primary); color: #fff; }

.btn-plan.featured {
    background: var(--gradient-login);
    color: #fff;
    border: none;
}

.btn-plan.featured:hover { opacity: 0.9; }

/* === FAQ === */
.faq {
    padding: 60px 0 80px;
    background: #fff;
    position: relative;
}

/* Las dos curvas decorativas van DETRAS del contenido. Con z-index 1 se
   pintaban encima del titulo y del subtitulo, porque .faq-inner no esta
   posicionado y el contenido en flujo normal siempre queda por debajo de un
   elemento posicionado con z-index positivo. */
.faq .faq-lines{
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 100%;
    z-index: 0;
    transform: scale(1.1);
}

.faq .faq-lines-2{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    transform: scale(1.1) rotate(180deg);
}

.faq .question-icon{
    position: absolute;
    bottom: 150px;
    right: -10px;
    width: 150px;
}

.faq .question-icon-2{
    position: absolute;
    top: 190px;
    left: 80px;
    width: 60px;
}

.faq-inner {
    max-width: 700px;
    min-height: 650px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    /* Posicionado para que todo el contenido de la seccion quede por encima
       de las curvas decorativas, no solo el acordeon. */
    position: relative;
    z-index: 1;
}

.faq-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-top: 25px;
    text-align: left;
}

.faq-questions { 
    flex: 1; 
    z-index: 2;
}

/* --- bloque fijo: las impresoras no se pliegan --- */
.faq-fija {
    border: 1px solid rgba(0,113,216,0.22);
    border-radius: 14px;
    /* El degradado se apoya sobre blanco solido: sin la segunda capa las
       curvas decorativas del fondo se transparentaban por debajo del
       texto a partir de los 120px. */
    background: linear-gradient(180deg, rgba(0,113,216,0.045), rgba(0,113,216,0) 120px), #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.faq-fija-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.faq-fija-titulo {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-black);
}

.faq-fija-cuerpo { padding: 0 18px 18px; }

.faq-fija-cuerpo p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    color: #414a56;
}

/* --- acordeon --- */
.faq-item {
    border: 1px solid var(--border-card);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: box-shadow 0.3s, border-color 0.3s;
    /* Fondo propio: sin el, las curvas del fondo se transparentaban a traves
       de las tarjetas cerradas. */
    background: #fff;
}

.faq-item:hover { border-color: rgba(0,113,216,0.3); }

.faq-item.active {
    border-color: rgba(0,113,216,0.28);
    box-shadow: 0 12px 30px -22px rgba(0,113,216,0.55);
}

/* Es un boton de verdad, no un div: se alcanza con el tabulador y anuncia
   si esta abierto o cerrado. */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: none;
    border: 0;
    border-radius: 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.3s;
}

.faq-question:hover { background: rgba(0,113,216,0.03); }

.faq-question:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}

.faq-icon-box {
    width: 35px;
    height: 35px;
    border-radius: var(--radius-faq);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-faq-icon);
    background: #fff;
}

/* Dos de estos SVG (currency y digital-document) los comparte la rejilla de
   servicios, donde cada icono va coloreado a juego con su tarjeta: currency
   es #A25700 y digital-document #6163B8. Aqui, sobre recuadro blanco, el
   resto son negros y esos dos desentonaban. Un fichero no puede tener dos
   colores, asi que se normalizan al pintarlos: brightness(0) lleva cualquier
   color a negro puro y deja intacto lo transparente, asi que los que ya eran
   negros no cambian. */
.faq-icon-box img {
    width: 20px;
    height: 20px;
    filter: brightness(0);
}

.faq-q-texto {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-black);
}

.faq-question .chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--text-gray);
    transition: transform 0.3s, color 0.25s;
}

.faq-item.active .faq-question .chevron {
    transform: rotate(180deg);
    color: var(--blue-primary);
}

/* Se despliega con grid en vez de max-height: la altura la marca el propio
   contenido, asi que ninguna respuesta puede quedar cortada por abajo. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
}

.faq-item.active .faq-answer { grid-template-rows: 1fr; }

.faq-answer-in { overflow: hidden; }

.faq-answer p {
    margin: 0;
    padding: 0 18px 18px 65px;
    font-size: 13.5px;
    font-weight: 400;
    color: #414a56;
    line-height: 1.75;
}

/* Rejilla, no fila: con flex-wrap:nowrap las cuatro tarjetas se aplastaban
   en pantallas medianas. auto-fit reparte lo que quepa y baja de fila solo
   cuando hace falta. */
.prints-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.prints-list .print {
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.prints-list .print:hover {
    transform: translateY(-3px);
    border-color: rgba(0,113,216,0.28);
    box-shadow: 0 14px 26px -18px rgba(16,30,54,0.4);
}

.prints-list .img-print__container {
    border-radius: 9px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f6f8;
    /* La foto de la PDA es vertical y se salia del recuadro por arriba y por
       abajo: aqui se recorta el desbordamiento. */
    overflow: hidden;
    padding: 8px;
}

.prints-list .img-print__container img {
    width: 88px;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.prints-list .print-datos {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 4px 2px;
}

.prints-list .print-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-black);
}

.prints-list .print-model {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7480;
}

/* === FOOTER === */
.footer {
    background: var(--footer-bg);
    color: #fff;
    padding: 50px 0 0;
    position: relative;
    z-index: 2;
    border-radius: 20px 20px 0 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 35px;
}

.footer-logo {
    height: 30px;
    width: auto;
    margin-bottom: 14px;
    filter: brightness(0) invert(1);
}

.footer-brand p {
    font-size: 12px;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 18px;
}

.social-links { display: flex; gap: 10px; }

.social-links a {
    background-color: #ffffff15;
    padding: 10px;
    border: 1px solid #ffffff25;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.social-links a img {
    width: 20px;
    height: 20px;
}

.social-links a:hover { 
    background-color: #ffffff30; 
    transform: scale(1.05);
}

.footer-links h4,
.footer-contact h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-links a {
    display: block;
    font-size: 12px;
    color: #ffffff;
    padding: 3px 0;
    font-weight: 300;
    transition: all 0.3s ease-in-out;
}

.footer-links a:hover { 
    transform: scale(1.05); 
    font-weight: 500;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 300;
}

.contact-item img { width: 16px; height: 16px; }

.app-downloads { display: flex; gap: 8px; margin-top: 18px; }

.app-badge img {
    height: 32px;
    width: auto;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.app-badge:hover img { transform: scale(1.05); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 16px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: 11px;
    color: #fff;
    font-weight: 300;
}

/* Aviso legal de transparencia en el footer (misma politica de Google Ads). */
.footer-bottom .footer-disclaimer {
    max-width: 820px;
    margin: 0 auto 8px;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

/* === CLIENTES CAROUSEL === */
.clientes-section {
    padding: 60px 0;
    background: #fff;
    text-align: center;
    overflow: hidden;
}

.clientes-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.clientes-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.clientes-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: scrollLogos 150s linear infinite;
}

.cliente-logo {
    flex-shrink: 0;
    width: 120px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
}

.cliente-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.cliente-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === FACTURACION ELECTRONICA === */
.facturacion-section {
    padding: 120px 0;
    background: url('../imgs/fondo-facturacion.webp') center center / cover no-repeat;
    position: relative;
    /* overflow-x: hidden; */
    overflow-y: visible;
    z-index: 2;
    display: none;
}

.facturacion-section.visible {
    display: block;
}

.facturacion-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.fe-cards-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.fe-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 35px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    flex: 1;
    max-width: 480px;
    min-height: 570px;
    overflow: visible;
    /* En columna para que el contenido pueda repartirse por toda la altura.
       El min-height es mayor que el contenido de la tarjeta izquierda, y sin
       esto el sobrante se acumulaba entero debajo del boton. */
    display: flex;
    flex-direction: column;
}

.fe-card-left {
    transform: translateY(-30px);
    padding-top: 70px;
}

.fe-card-right {
    /* Baja con margin, NO con transform: un transform no ocupa sitio en el
       flujo, asi que la seccion no crecia y los ultimos 30px de la tarjeta
       quedaban fuera del fondo azul. La seccion de precios, que va despues
       con el mismo z-index y con overflow:hidden, los tapaba. */
    margin-top: 150px;
}

.fe-card-content {
    position: static;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Sello DGII */
.fe-stamp-wrapper {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.fe-stamp-img {
    width: 170px;
    height: auto;
}

.fe-stamp-right {
    top: -100px;
    left: auto;
    right: -100px;
    transform: none;
}

.fe-stamp-right .fe-stamp-img {
    width: 200px;
}

/* Titulo tarjeta izquierda */
.fe-title {
    font-family: var(--font-main);
    font-size: 38px;
    font-weight: 900;
    color: #0a1e3d;
    text-align: center;
    line-height: 1.1;
    margin-top: 5px;
}

.fe-title-underline {
    width: 80%;
    height: 6px;
    background: #f1c40f;
    margin: 12px auto 25px;
    border-radius: 3px;
}

/* Costos */
.fe-costs {
    margin-bottom: 25px;
    text-align: center;
}

.fe-cost-item {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

.fe-price-highlight {
    color: var(--blue-primary);
    font-weight: 700;
    font-size: 16px;
}

.fe-gratis {
    color: var(--blue-primary);
    font-weight: 700;
    text-decoration: underline;
    font-size: 16px;
}

/* Paquetes titulo */
.fe-packages-title {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 800;
    color: #0a1e3d;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Barras de paquetes */
.fe-packages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.fe-package-row {
    display: flex;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fe-package-bar {
    flex: 1;
    background: linear-gradient(90deg, var(--blue-primary) 0%, #3a9bd5 100%);
    padding: 10px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    z-index: 2;
}

.fe-package-qty {
    font-weight: 800;
    font-size: 16px;
    color: #f1c40f;
}

.fe-package-price {
    background: #f1c40f;
    color: #0a1e3d;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 14px 10px 25px;
    min-width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin:  0 0 0 -17px;
    z-index: 1;
}

.fe-package-price span {
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
}

/* Tagline */
.fe-tagline {
    font-size: 16px;
    color: #0a1e3d;
    text-align: center;
    margin-bottom: 20px;
}

/* Logos */
.fe-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding-top: 15px;
}

.fe-logo {
    height: 28px;
    width: auto;
}

/* VentasCloud logo CSS */
.fe-ventascloud-logo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fe-vc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #4CAF50;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    border-radius: 4px;
}

.fe-vc-text {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.3px;
}

.fe-vc-text sup {
    font-size: 8px;
}

/* ===== TARJETA DERECHA ===== */
.fe-card-right .fe-card-content {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 520px;
}

.fe-promo-text {
    flex: 1;
    padding-right: 40%;
}

.fe-promo-line1 {
    font-size: 22px;
    color: #0a1e3d;
    line-height: 1.3;
    margin-bottom: 8px;
}

.fe-promo-title {
    font-family: var(--font-main);
    font-size: 36px;
    font-weight: 900;
    color: var(--blue-primary);
    line-height: 1.1;
    margin-bottom: 8px;
}

.fe-promo-underline {
    width: 220px;
    height: 6px;
    background: linear-gradient(90deg, var(--blue-primary) 60%, var(--cyan-accent) 100%);
    border-radius: 3px;
    margin-bottom: 20px;
}

.fe-promo-tagline {
    font-size: 26px;
    color: #0a1e3d;
    line-height: 1.2;
    margin-bottom: 15px;
}

.fe-contact-box {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 5px;
}

/* Ilustracion laptop */
.fe-illustration {
    position: absolute;
    bottom: 70px;
    right: -25px;
    width: 58%;
    pointer-events: none;
}

.fe-laptop-img {
    width: 100%;
    height: auto;
}

/* Logos tarjeta derecha */
.fe-logos-right {
    position: absolute;
    bottom: 30px;
    left: 35px;
    right: 35px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px 0;
    padding-top: 0;
}

.fe-logo-cs {
    height: 60px;
    margin: 0 0 10px 0;
}

.fe-logos-sub {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-free-try__facturation{
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 50px;
    background: var(--gradient-cta-feature);
    /* auto arriba: el boton se va al fondo de la tarjeta y el espacio sobrante
       queda por encima, no debajo. */
    margin: auto 0 0 0;
    flex-shrink: 0;
    white-space: nowrap;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.btn-free-try__facturation:hover{
    filter: saturate(1.2);
    transform: scale(1.03);
}

/* === RESPONSIVE === */

@media (min-width: 1500px) {
    .hero-gradient-bar {
        bottom: -35px !important;
    }
}

@media (min-width: 1281px){
    .hero-gradient-bar {
        bottom: -60px;
        height: 130px;
    }
}

@media (min-width: 1120px){
    .lines-dashed {
        left: 320px;
    }
}

@media (max-width: 1280px) {
    .hero-content { padding: 50px 40px 0 60px; }
    .hero-left { flex: 0 0 520px; }
    .hero-h1 { font-size: 2em; }
    .hero-h2 { font-size: calc(3.8em * var(--h2-escala, 1)); }
    .hero-description { font-size: 13px; max-width: 460px; }
    .hero-disclaimer { max-width: 460px; }
    .hero-right { min-height: 500px; }
    .hero-right img { max-width: 550px; bottom: -125px; }
    .hero-bg { min-height: 680px; }
    .hero-content { min-height: 580px; }
    .shape.rectangle-shape { width: 250px; bottom: -20px; }
    .hero-gradient-bar { bottom: -77px; height: 140px; }

}

@media (max-width: 1120px){
    .testimonial-left {
        min-width: 485px;
    }
}

@media (max-width: 1024px) {
    .hero-content { flex-direction: column; padding: 40px 40px 0; }
    .hero-left { flex: none; width: 100%; text-align: center; }
    .hero-description { margin: 0 auto 25px; max-width: 538px; }
    .hero-disclaimer { margin: 0 auto 22px; max-width: 538px; text-align: left; }
    .hero-cta { margin: 0 auto 30px; }
    .hero-social-proof { justify-content: center; }
    .hero-right { display: none; }
    .hero-bg { min-height: 600px; }
    .hero-content { min-height: auto; }
    .shape.rectangle-shape { width: 220px; bottom: -85px; }
    .hero-gradient-bar { bottom: -60px; height: 105px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card:last-child { grid-column: auto; }
    .mega-menu-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-content { flex-direction: column; }
    .migracion-inner { flex-direction: column; gap: 28px; }
    .migracion-copy, .migracion-visual { flex: none; width: 100%; }
    .migracion-visual { max-width: 560px; margin: 0 auto; }

    /* Apilada, la ilustracion queda DEBAJO de la lista. Con su retardo de
       escritorio (0.32s) aparecia antes que los cinco elementos que tiene
       encima, que es justo al reves de como se lee. Pasa al final. */
    .migracion-section.revealed .migracion-visual { transition-delay: 0.80s; }
    .feature-image { flex: none; width: 100%; max-width: 534px; margin: 0 auto; }
    .swiper-inner__content { grid-template-columns: 350px 1fr; }
    .swiper-inner__content .swiper-left { height: 400px; }
    .pricing-scroll > .pricing-card { flex: 0 0 calc((100% - 40px) / 3); }
    .faq-container { flex-direction: column; }
    .faq-illustration { display: none; }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 550px; margin: 25px auto 0; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .fe-cards-container { gap: 25px; }
    .fe-card { padding: 30px 25px; }
    .fe-card-left { transform: translateY(-10px); }
    .fe-card-right { margin-top: 25px; }
    .fe-title { font-size: 30px; }
    .fe-promo-title { font-size: 28px; }
    .fe-promo-tagline { font-size: 18px; }

}

/* === MENU MOVIL: adelantado a 1320px ===
   El header de escritorio necesita ~1190px (logo 166 + nav de 7 enlaces 619 +
   acciones y los dos selectores, pais e idioma). Medido: 1287px. Por debajo de
   eso el logo se monta sobre "Inicio" y el nav parte en dos lineas. Estas son las mismas reglas
   del bloque de 821px, que se mantiene intacto para el resto de la pagina. */
@media (max-width: 1320px) {
    .menu-toggle { display: flex; }
    .header-actions { display: none; }

    .header-inner{
        justify-content: space-between;
    }

    .header-actions-mobile{
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .navbar {
        position: fixed;
        top: 50px;
        right: 0;
        width: 280px;
        height: calc(100vh - 50px);
        background: #ffffff;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 20px 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .navbar.open { transform: translateX(0); }

    .nav-link {
        font-size: 15px;
        padding: 14px 30px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link:hover {
        background: #f5f9ff;
    }

    /* Mega menu mobile */
    .nav-dropdown {
        flex-direction: column;
        width: 100%;
    }

    .nav-link--dropdown {
        width: 100%;
        justify-content: space-between;
        padding-right: 30px;
    }

    .mega-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: none;
        padding: 0 16px 12px;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    .nav-dropdown.active .mega-menu {
        max-height: 80vh;
        padding: 8px 16px 16px;
        overflow-y: auto;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mega-item {
        padding: 10px 12px;
    }

    .mega-item span {
        font-size: 14px;
    }

    .mega-menu-separator {
        margin: 4px 0 0;
        padding-top: 4px;
    }

    .nav-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px 30px;
        margin-top: auto;
    }

    .nav-actions .btn-register-header {
        width: 100%;
        height: 40px;
        font-size: 14px;
    }

    .nav-actions .btn-register-header::after { opacity: 1; }

    .nav-actions .btn-login-header {
        width: 100%;
        height: 40px;
        font-size: 14px;
    }

}

@media (max-width: 821px) {
    .migracion-section { padding: 60px 0; min-height: 0; }
    .mg-circles, .mg-triangles, .mg-midcircle-yellow { display: none; }
    .mg-midcircle-blue { width: 170px; bottom: -60px; right: -110px; }
    .mg-orb--1 { width: 280px; height: 280px; }
    .mg-orb--2 { width: 240px; height: 240px; }
    .menu-toggle { display: flex; }
    .header-actions { display: none; }

    .header-inner{
        justify-content: space-between;
    }

    .header-actions-mobile{
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .navbar {
        position: fixed;
        top: 50px;
        right: 0;
        width: 280px;
        height: calc(100vh - 50px);
        background: #ffffff;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 20px 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .navbar.open { transform: translateX(0); }

    .nav-link {
        font-size: 15px;
        padding: 14px 30px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link:hover {
        background: #f5f9ff;
    }

    /* Mega menu mobile */
    .nav-dropdown {
        flex-direction: column;
        width: 100%;
    }

    .nav-link--dropdown {
        width: 100%;
        justify-content: space-between;
        padding-right: 30px;
    }

    .mega-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: none;
        padding: 0 16px 12px;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    .nav-dropdown.active .mega-menu {
        max-height: 80vh;
        padding: 8px 16px 16px;
        overflow-y: auto;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mega-item {
        padding: 10px 12px;
    }

    .mega-item span {
        font-size: 14px;
    }

    .mega-menu-separator {
        margin: 4px 0 0;
        padding-top: 4px;
    }

    .nav-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px 30px;
        margin-top: auto;
    }

    .nav-actions .btn-register-header {
        width: 100%;
        height: 40px;
        font-size: 14px;
    }

    .nav-actions .btn-register-header::after { opacity: 1; }

    .nav-actions .btn-login-header {
        width: 100%;
        height: 40px;
        font-size: 14px;
    }

    .hero-social-proof{
        align-items: center;
    }

    .hero-gradient-bar { 
        bottom: -75px; 
    }

    .availability {
        display: none;
    }

    .availability-mobile {
        display: block;
    }

    .swiper {
        height: auto;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px;
    }

    .swiper-slide {
        padding: 20px;
    }

    .swiper-inner__content {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .swiper-inner__content .swiper-left {
        height: 300px;
        max-width: 400px;
        margin: 0 auto;
    }

    .swiper-inner__content .swiper-right .feature-title {
        text-align: center;
    }

    .swiper-inner__content .swiper-right {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-desc {
        text-align: center;
        font-size: 0.85em;
    }

    /* Bloque centrado pero con el texto alineado a la izquierda: centrar cada
       <li> descoloca los de dos lineas respecto a los de una. */
    .feature-list {
        text-align: left;
        max-width: 470px;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-list li {
        justify-content: flex-start;
    }

    /* En una columna las flechas caen encima del texto: en pantallas
       estrechas se navega con swipe y con los puntos.
       !important porque swiper-bundle.min.css se carga despues y empata. */
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .feature-actions { align-items: center; }
    .feature-more-link { align-self: center; }
    .feature-stores img { height: 30px; }
    .feature-nav { margin-top: 18px; }

    .testimonials-inner{
        padding: 0 30px;
    }

    .testimonials-inner-content{
        flex-direction: column;
    }

    .testimonial-card:nth-child(2),
    .testimonial-card:nth-child(4),
    .testimonial-card:nth-child(6){
        margin: 0 !important;
    }

    .testimonial-left{
        min-width: 400px;
        width: 100%;
    }

    .fe-stamp-img {
        width: 135px;
        height: auto;
    }

    .datacredit-img{
        display: none;
    }

    .datacredit-img-mobile{
        display: block;
    }

    /* Pricing - 1 card visible, centrada */
    .pricing-scroll-wrapper { margin-top: 20px; }
    .pricing-scroll > .pricing-card { flex: 0 0 min(450px, 80%); min-width: unset; }
    .pricing-scroll { scroll-padding: 0 10%; }
    .pricing-scroll > .pricing-card { scroll-snap-align: center; }

    .step-img {
        top: 200px;
    }

    .stepper-item .stepper-content h3{
        font-size: 0.9em;
    }
    .stepper-item .stepper-content p{
        font-size: 0.8em;
    }

    .stepper-item .stepper-img{
        width: 75%;
    }

}

@media (max-width: 768px) {
    .hero-h1 { font-size: 28px; }
    .hero-h2 { font-size: calc(45px * var(--h2-escala, 1)); }
    .section-title { font-size: 24px; }
    .steps-container { flex-direction: column; }
    .step:not(:last-child)::after { display: none; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .products-row { flex-direction: column; align-items: center; }
    .product-img { max-width: 300px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    /* Apiladas, el sello de la segunda tarjeta sube por encima de su borde y
       caeria sobre el boton de la primera. El hueco le deja sitio. */
    .fe-cards-container { flex-direction: column; align-items: center; gap: 120px; }
    .fe-card { max-width: 450px; width: 100%; min-height: auto; }
    .fe-card-left { transform: none; padding-top: 70px; }
    .fe-card-right { margin-top: 0; }
    .facturacion-section { padding: 80px 0 60px; }
    .fe-promo-text { padding-right: 0; }

    /* En escritorio el texto reserva un 40% a la derecha para que quepa la
       ilustracion absoluta. Aqui ese hueco desaparece (linea de arriba), asi
       que la ilustracion tiene que entrar en el flujo y colocarse DEBAJO del
       texto; si sigue absoluta se le echa encima y lo tapa. */
    .fe-illustration {
        position: relative;
        bottom: auto;
        right: auto;
        width: 78%;
        margin: 18px auto 0;
    }

    /* El sello se encoge y sube en cuanto las tarjetas se apilan: con la
       tarjeta a ancho completo, en su tamano de escritorio caia sobre la
       primera linea del titulo y se comia el final. */
    .fe-stamp-right {
        top: -112px;
        right: -10px;
    }

    .fe-stamp-right .fe-stamp-img {
        width: 104px;
    }

    .fe-card-right .fe-card-content { min-height: auto; }
    .fe-logos-right { position: relative; margin-top: 35px; }
    .dt-circles{display: none;}
    .dt-midcircle-yellow{display: none;}

}

@media (max-width: 575px){

    .traslados-inner {
        text-align: center !important;
        align-items: center;
    }

    .traslados-inner .section-title {
        text-align: center !important;
    }

    .traslados-inner .section-subtitle {
        text-align: center !important;
    }

    .stepper{
        display: none;
    }

    .stepper-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 0 25px 0;
        background-color: #fff;
        padding: 20px 10px;
        border: 1px solid #fafafa;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    }

    .stepper-item:nth-child(3){
        flex-direction: column-reverse;
    }

    .stepper-item .stepper-content{
        text-align: center !important;
        padding: 0;
    }


    .step-img{
        display: none;
    }

    .step-img-mobile{
        display: block;
    }


    .shape.rectangle-shape{
        bottom: -80px;
        right: 0;
        width: 200px;
    }

    .shape.triangle-shape{
        left: 70px;
    }

    .hero-gradient-bar {
        bottom: -60px;
    }

    .hero-gradient-bar .wave{
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .hero-bg{
        min-height: 550px;
    }

    .curved-lines{
        display: none;
    }

    .step{
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .service-card{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Aqui la tarjeta centra su contenido, asi que el enlace tambien: con
       align-self:flex-start se quedaba pegado a la izquierda mientras el
       icono, el titulo y el texto iban centrados. */
    .service-card-cta{
        align-self: center;
    }

    .fs-circles{
        width: 75px;
        top: 3%;
    }

    /* El semicirculo es opaco y va absoluto con z-index 0, asi que se pintaba
       ENCIMA del titular y del subtitulo, que van en flujo y sin posicionar.
       Con left:-80px su borde derecho caia en x=77 y el texto arranca en x=40:
       37px de letras tapadas. Va rotado 90deg, asi que su ancho pintado es la
       ALTURA del original (200 * 302/532 = 113.5), no los 200px declarados:
       el borde derecho sale en left + 100 + 56.8. Con -130px queda en x=27,
       trece pixeles antes de donde empieza el texto. */
    .fs-midcircle-yellow{
        width: 200px;
        left: -130px;
    }

    .fs-midcircle-blue{
        width: 200px;
        right: -100px;
    }

    .swiper-inner__content{
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .swiper-slide {
        padding: 15px;
    }

    .swiper-inner__content .swiper-left {
        height: 250px;
        max-width: 320px;
        margin: 0 auto;
    }

    .feature-desc {
        -webkit-line-clamp: 3;
        font-size: 0.85em;
    }

    .feature-list {
        display: none;
    }

    .swiper {
        min-height: 0;
    }

    .swiper-inner__content .swiper-right .feature-title{
        text-align: center;
        font-size: 1.2em;
    }

    .swiper-inner__content .swiper-right{
        align-items: center;
    }

    .feature-stores img {
        height: 32px;
    }

    .cta-section{
        padding: 60px 20px;
    }

    .cta-inner{
        padding: 30px;
        flex-direction: column;
    }

    .cta-info{
        align-items: center;
    }

    .cta-title{
        text-align: center;
        font-size: 1.2em;
        margin: 0 0 10px 0;
    }

    .cta-subtitle {
        text-align: center;
        font-size: 0.8em;
    }

    .btn-lines{
        display: none;
    }

    .pricing .circles-shape{
        width: 70px;
        top: 20px;
    }

    /* --- MIGRACION EN MOVIL ---
       En escritorio esta seccion es de dos columnas y el texto va a la
       izquierda, alineado con la ilustracion de al lado. Al apilarse en
       movil esa ilustracion desaparece de su costado y el texto a la
       izquierda queda descolgado respecto al resto de secciones, que van
       centradas. Los tres text-align de base llevan !important, asi que
       aqui hace falta !important para ganarles (misma especificidad,
       gana el que va despues en el fichero). */
    .migracion-inner,
    .migracion-inner .section-title,
    .migracion-inner .section-subtitle{
        text-align: center !important;
    }

    .migracion-inner{
        width: calc(100% - 32px);
        padding: 28px 20px;
        border-radius: 20px;
    }

    /* Con la isla ocupando el centro, este arco se asomaba por detras de su
       esquina y quedaba como un borron suelto. */
    .mg-midcircle-blue{
        display: none;
    }

    /* La lista se centra COMO BLOQUE, no linea a linea: con width:fit-content
       el <ul> mide lo que su fila mas ancha y margin-inline:auto lo coloca en
       el medio, pero dentro cada fila sigue empezando a la izquierda. Asi los
       cinco iconos de visto quedan en columna. Centrar cada <li> por separado
       los dejaria en zigzag. */
    .migracion-copy ul{
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
    }

    /* --- LISTA DE TIPOS DE AHORRO ---
       .stepper-content pasa a text-align:center en movil y los <li>, que son
       cajas flex, lo heredaban: el texto corto se quedaba pegado a su marcador
       y el largo se centraba dentro del hueco sobrante, dejando el marcador
       descolgado a un lado. Mismo tratamiento que arriba. */
    .stepper-item .stepper-content ul{
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding: 0;
    }

    .stepper-item .stepper-content ul li{
        text-align: left;
    }

    /* Al estrecharse la columna, estos triangulos caen justo encima de la
       nota de la tasa de cambio y la vuelven ilegible: el texto es gris
       claro y pequeño, asi que ponerlo delante no basta. Como decoracion,
       aqui no aportan nada. Mismo criterio que con mg-triangles y dt-circles. */
    .pricing .triangles-shape{
        display: none;
    }

    .faq .question-icon,
    .faq .question-icon-2,
    .faq .faq-lines,
    .faq .faq-lines-2{
        display: none;
    }

    /* La sangria de 65px que alinea la respuesta con el texto de la
       pregunta no cabe en movil: aqui se pega al borde. */
    .faq-answer p{
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-fija-cab,
    .faq-question{
        padding: 14px;
        gap: 10px;
    }

    .faq-fija-cuerpo{
        padding: 0 14px 14px;
    }

    .prints-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .prints-list .img-print__container{
        height: 100px;
    }

    .faq-fija-titulo,
    .faq-q-texto{
        font-size: 14px;
    }

    .testimonial-left .resume{
        gap: 20px;
    }

    .testimonial-left .resume .resume-item .icon{
        width: 35px;
        height: 35px;
    }

    .testimonial-left .resume .resume-item .icon img{
        width: 18px;
    }

    .testimonial-left .resume .resume-item .item-title{
        font-size: 1em;
    }

    .testimonial-left .resume .resume-item .item-subtitle{
        font-size: 0.6em;
    }

    .shape.circle-shape {
        top: 80px;
        right: 30px;
    }

    .country{
        padding: 3px 10px;
    }

    .country .country-img__container{
        width: 25px;
        
    }

    .pricing-tabs {
        margin-bottom: 10px;
    }



}

@media (max-width: 480px) {
    .header-inner { padding: 0 10px; }
    .btn-register-header { width: 95px; font-size: 10px; }
    .btn-login-header { width: 110px; font-size: 10px; }
    .hero-content { padding: 30px 20px 0; }
    .hero-h1 { font-size: 22px; }
    .hero-h2 { font-size: calc(36px * var(--h2-escala, 1)); }
    .section-title { font-size: 22px; }
    .services-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .country-flags { gap: 8px; }
    .country-flag img { width: 28px; height: 28px; }
    .fe-card { padding: 25px 18px; }
    .fe-title { font-size: 26px; }
    .fe-promo-title { font-size: 24px; }
    .fe-promo-line1 { font-size: 16px; }
    .fe-promo-tagline { font-size: 16px; }
    .fe-package-bar { font-size: 12px; padding: 8px 12px; }
    .fe-package-price { font-size: 13px; padding: 8px 10px; min-width: 60px; }
    .fe-stamp-img { width: 130px; }
    /* .fe-stamp-right .fe-stamp-img { width: 75px; } */
    .facturacion-inner { padding: 0 20px; }
    .shape.triangle-shape {
        left: 20px;
    }


}

@media (max-width: 430px){
    .shape.triangle-shape{
        display: none;
    }

    .cta-title{
        text-align: center;
        font-size: 0.9em;
    }
}

@media (max-width: 395px){
    .shape.circle-shape {
        display: none;
    }
}

/* === ANNUAL DISCOUNT STYLING === */
.tab-discount-badge {
    display: inline-block;
    background: #00c853;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    animation: pulseBadge 2s ease-in-out infinite;
}

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

.price-original {
    font-size: 16px;
    color: #999;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2px;
}

.price-original s {
    color: #cc0000;
    font-weight: 500;
}

.pricing-card.yearly-active {
    border-color: #00c853;
}

.pricing-card.yearly-active::after {
    content: '15% OFF';
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #00c853, #00e676);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 3;
    animation: pulseBadge 2s ease-in-out infinite;
}

.pricing-card.featured.yearly-active {
    border-color: #00c853;
}

/* === CONTACT PHONE BUTTONS === */
.contact-phones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.contact-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.contact-phone-btn:hover {
    background: rgba(37, 211, 102, 0.25);
    border-color: #25d366;
    transform: translateX(4px);
}

.contact-phone-btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .clientes-track {
        animation: none;
    }

    .page-loader {
        transition: none;
    }

    /* El selector universal de arriba anula la DURACION de las transiciones
       pero no el RETARDO. Sin esto, la entrada escalonada de migracion seguiria
       apareciendo a saltos durante medio segundo. */
    .migracion-section.revealed .mg-label-row,
    .migracion-section.revealed .section-title,
    .migracion-section.revealed .section-subtitle,
    .migracion-section.revealed .migracion-visual,
    .migracion-section.revealed .migracion-copy li,
    .migracion-section.revealed .mg-cta { transition-delay: 0s !important; }
}