/* NARAO Match - Main Styles */

:root {
    --primary-color: #1a56db;
    --primary-dark: #174ea6;
    --secondary-color: #14213d;
    --accent-color: #00d2ff;
    --text-color: #14213d;
    --text-muted: #536078;
    --bg-light: #f6f8fc;
    --bg-white: #ffffff;
    --border-color: #e3e8f0;
    --success-color: #10b981;
    --white: #ffffff;
    --dark: #0f172a;

    --container-width: 1200px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* Vertical rhythm scale (desktop) — redefined per breakpoint below.
       Reduced ~15% from the original 40/60/100 baseline. */
    --space-sm: 34px;
    --space-md: 51px;
    --space-xl: 85px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-white);
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section-padding {
    padding: var(--space-xl) 0;
}

.product-link {
    padding: 16px 0;
    /* Raises the button ~1cm (38px at 96dpi) closer to the steps above,
       absorbed into that section's own bottom padding, so it never
       overlaps the step cards. */
    margin-top: -38px;
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-dark {
    background-color: var(--dark);
}

.text-white {
    color: var(--white);
}

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--secondary-color);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 24px;
}

.hero-content h1 {
    font-size: clamp(1.6rem, 3.1vw, 2.5rem);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1.section-title {
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 20px;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.section-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto var(--space-md);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-secondary:hover {
    color: var(--primary-dark);
}

.btn-outline {
    border-color: var(--border-color);
    background-color: transparent;
    color: var(--text-color);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-block {
    display: flex;
    width: 100%;
}

.mobile-only {
    display: none;
}

/* Header */
.main-header {
    height: 80px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.main-header.sticky {
    position: sticky;
    top: 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.logo-image {
    display: block;
    height: 60px;
    width: auto;
}

.brand-name .accent {
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: 16px;
}

.nav-links a {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.header-ctas .btn-login {
    padding: 10px 16px;
    font-size: 0.9rem;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.header-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Language selector — a compact "ES ▾" toggle that opens a small menu
   with the three language names. Deliberately secondary (small type,
   muted color, transparent background) so it never competes visually
   with "Iniciar sesión" or the main navigation. */
.lang-select {
    position: relative;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
}

.lang-toggle-caret {
    font-size: 0.65rem;
}

.lang-toggle:hover {
    color: var(--primary-color);
    background: rgba(36, 107, 253, 0.06);
}

.lang-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.lang-toggle[aria-expanded="true"] {
    color: var(--primary-color);
    background: rgba(36, 107, 253, 0.06);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    z-index: 1001;
}

.header-ctas .lang-menu {
    right: 0;
}

.lang-option {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
}

.lang-option:hover {
    background: var(--bg-light);
}

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

.lang-option[aria-checked="true"] {
    color: var(--primary-color);
    font-weight: 800;
}

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

.mobile-menu-actions .lang-menu {
    left: 50%;
    transform: translateX(-50%);
}

.mobile-menu-actions .lang-toggle {
    font-size: 1rem;
    padding: 8px 12px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--secondary-color);
    position: relative;
    transition: var(--transition);
}

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--secondary-color);
    left: 0;
    transition: var(--transition);
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.mobile-menu-toggle.active .hamburger {
    background: transparent;
}

.mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Hero */
.hero {
    padding: var(--space-md) 0 var(--space-xl);
    background: radial-gradient(circle at 90% 10%, rgba(36, 107, 253, 0.05) 0%, transparent 40%);
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    max-width: 600px;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

.hero-visual {
    position: relative;
    /* Desktop-only nudge: .hero-container centers this column vertically
       against .hero-content via align-items: center, so shifting it here
       (rather than re-anchoring alignment) keeps that same auto-centering
       behavior across ES/CA/EN title lengths, just offset by a fixed amount.
       Reset to none at <=1024px, where the grid already stacks the visual
       below the text and this offset does not apply. */
    transform: translateY(-56px);
}

.visual-placeholder {
    background-color: var(--bg-light);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Highlights */
/* Key Features (compact) */
.key-features {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.key-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
    align-items: start;
}

/* Between the 1024px tablet breakpoint and ~1180px, 4 narrow columns (~226px)
   made 2-3 word titles wrap to two lines far more often than at wider desktop
   widths; widening the 2-column window here keeps each card's title on one
   line in that range instead of relying on wrap alone. */
@media (max-width: 1180px) {
    .key-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.key-feature-item {
    text-align: left;
}

.key-feature-item .icon-wrap {
    margin-bottom: 14px;
}

.key-feature-item h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 10px;
}

.key-feature-item p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

.icon-wrap {
    width: 40px;
    height: 40px;
    background-color: rgba(36, 107, 253, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.step-card {
    padding: 40px;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-bottom: 24px;
}

/* Product Showcase */
.showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.showcase-item.inverse {
    direction: rtl;
}

.showcase-item.inverse .showcase-info {
    direction: ltr;
}

.showcase-visual {
    background: var(--bg-light);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Benefits */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.benefit-card h3 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.benefit-card p {
    color: rgba(255, 255, 255, 0.7);
}

/* Founder */
.founder-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

.founder-eyebrow {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 32px;
}

.founder-text p {
    margin-bottom: 20px;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.7;
}

.founder-text p strong {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.pricing-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
    z-index: 1;
}

.pricing-card.featured:hover {
    box-shadow: var(--shadow-lg);
}

.featured-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
}

.pricing-header {
    margin-bottom: 32px;
    text-align: center;
}

.pricing-header h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.price {
    margin-bottom: 12px;
}

.amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--secondary-color);
}

.period {
    color: var(--text-muted);
    font-size: 1.125rem;
}

.price-desc {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.pricing-features {
    margin-bottom: 40px;
    flex-grow: 1;
}

.pricing-features li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--text-color);
}

.check {
    color: var(--success-color);
    font-weight: 800;
}

.pricing-note {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 40px;
}

/* FAQ */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    padding: 32px 40px;
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.faq-item h3 {
    margin-bottom: 8px;
    font-size: 1.15rem;
}

.faq-item p {
    color: var(--text-muted);
    line-height: 1.7;
}

.faq-item p a {
    color: var(--primary-color);
    font-weight: 600;
}

.faq-contact-note {
    margin-top: 40px;
    color: var(--text-muted);
}

.faq-contact-note a {
    color: var(--primary-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .faq-item {
        padding: 24px;
    }
}

@media (max-width: 1024px) {
    .pricing-card.featured {
        transform: scale(1);
    }

    .pricing-grid {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
        gap: 40px;
    }
}


.founder-image-container {
    position: relative;
    max-width: 258px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.founder-text .btn-linkedin {
    margin-top: var(--space-sm);
}

.btn-linkedin:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.founder-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.founder-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.founder-name {
    display: block;
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 0.85rem;
    line-height: 1.2;
}

.founder-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}


/* Footer */
.main-footer {
    padding: var(--space-xl) 0 var(--space-sm);
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-brand .brand-name {
    display: block;
    margin-bottom: 16px;
}

.footer-brand {
    text-align: center;
}

.footer-brand .logo-image {
    height: 84px;
    margin: 0 auto 20px;
}

.footer-nav h4 {
    margin-bottom: 24px;
    font-size: 1rem;
}

.footer-nav ul li {
    margin-bottom: 12px;
}

.footer-nav ul a {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.footer-nav ul a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer-info {
    display: flex;
    gap: 24px;
}

.footer-legal-mini-links {
    display: flex;
    gap: 24px;
}

.footer-legal-mini-links a {
    color: var(--text-muted);
}

.footer-legal-mini-links a:hover {
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .hero-visual {
        /* The desktop-only upward nudge does not apply once the grid
           stacks the visual below the text; keep its natural position. */
        transform: none;
    }

    .hero-subtitle {
        margin: 0 auto var(--space-sm);
    }

    .hero-actions {
        justify-content: center;
    }

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

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

    .founder-eyebrow {
        font-size: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    /* Mobile Menu Overlay */
    .main-nav {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background-color: var(--bg-white);
        z-index: 999;
        display: block;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 40px 24px;
        overflow-y: auto;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .nav-links {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .nav-links a {
        font-size: 1.25rem;
        color: var(--secondary-color);
    }

    .mobile-only {
        display: block;
        width: 100%;
        text-align: center;
    }

    .mobile-only .btn {
        width: 100%;
        margin-top: 10px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .header-ctas .btn-primary {
        display: none; /* Hide in header to save space, will be in menu if we added it, but for now let's just show it in Hero */
    }

    /* If we want to keep one CTA, maybe a smaller one or just the hamburger */
    .header-ctas {
        gap: 8px;
    }

    .btn-login {
        display: none;
    }

    .header-ctas .lang-select {
        display: none;
    }

    /* Legal pages have no hamburger menu / duplicate lang selector, so the
       header copy must stay visible instead of being hidden like on the
       marketing pages. */
    .header-ctas.legal-header-ctas .lang-select {
        display: block;
    }

    /* Vertical rhythm scale (tablet/mobile): collapses the "large" tier
       into "medium" so every section boundary shares the same rhythm
       (--space-sm stays fixed: it governs the founder CTA gap, which
       must keep matching the hero CTA gap at every breakpoint). */
    :root {
        --space-xl: 51px;
    }

    h1 {
        font-size: 2.25rem;
    }

    h1.section-title {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .section-description {
        font-size: 1.125rem;
        margin-bottom: var(--space-sm);
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-visual {
        margin-top: 40px;
    }

    .visual-placeholder {
        min-height: auto;
        aspect-ratio: 16/10;
    }

    .showcase-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .showcase-item.inverse {
        direction: ltr;
    }

    .founder-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .founder-text {
        order: 1;
    }

    .founder-visual {
        order: 2;
    }

    .founder-image-container {
        max-width: 228px;
        margin: 0 auto;
    }

    .founder-eyebrow {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-info {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }

    /* Legal pages pack logo + language selector + back button into a
       single header row with no hamburger fallback; wrap to a second row
       instead of overflowing on narrow phones. */
    .legal-header {
        height: auto;
        padding: 14px 0;
    }

    .legal-header .header-container {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .legal-header .header-ctas.legal-header-ctas {
        width: 100%;
        justify-content: space-between;
    }

    h1 {
        font-size: 1.85rem;
    }

    h1.section-title {
        font-size: 1.65rem;
    }

    .key-features-grid,
    .steps-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .step-card {
        padding: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        margin-bottom: 20px;
    }

    .founder-eyebrow {
        font-size: 28px;
    }
}

/* Extra small screens fix */
@media (max-width: 360px) {
    h1 {
        font-size: 1.65rem;
    }

    h1.section-title {
        font-size: 1.45rem;
    }

    .brand-name {
        font-size: 1.25rem;
    }
}

/* Distribución estable del header en escritorio */
@media (min-width: 1025px) {
    .header-container {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: 18px;
    }

    .logo {
        justify-self: start;
    }

    .main-nav {
        position: static;
        transform: none;
        justify-self: center;
        min-width: 0;
    }

    .nav-links {
        /* Kept tighter than the 16px base gap: at this tier the nav shares
           a fixed 1152px-wide row with the logo and header-ctas, and
           Spanish/Catalan labels leave only a thin margin at that width. */
        gap: 10px;
        flex-wrap: nowrap;
    }

    .header-ctas {
        justify-self: end;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .header-ctas .btn,
    .nav-links a {
        white-space: nowrap;
    }
}


/* Corrección de desbordamiento del menú móvil */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .header-container {
        width: 100%;
        min-width: 0;
    }

    .main-nav {
        position: fixed;
        top: 80px;
        right: 0;
        left: auto;
        width: 100vw;
        max-width: 100vw;
        height: calc(100dvh - 80px);
        padding: 32px 20px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .nav-links {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .nav-links li,
    .nav-links a,
    .mobile-only,
    .mobile-only .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero,
    .hero-container,
    .hero-content,
    .hero-visual {
        min-width: 0;
        max-width: 100%;
    }
}


/* Acciones profesionales del menú móvil */
.mobile-menu-actions {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 420px;
        margin: 36px auto 0;
        padding-top: 28px;
        border-top: 1px solid var(--border-color);
    }

    .mobile-menu-actions .btn {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        box-sizing: border-box;
    }

    .mobile-menu-actions .btn-primary,
    .mobile-menu-actions .btn-primary:hover {
        color: var(--white);
    }

    .mobile-menu-actions .btn-outline {
        background-color: var(--bg-white);
        color: var(--secondary-color);
    }
}


/* === Dashboard real: ajuste de proporciones === */

.showcase-grid {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* === Vídeo del hero: marco proporcional 16:9 === */
.hero-video-placeholder {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #ffffff;
}

.hero-video-placeholder .hero-product-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

@media (max-width: 1024px) {
    .hero-video-placeholder {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hero-video-placeholder .hero-product-video {
        width: 100%;
        height: 100%;
    }
}

/* === Corrección del vídeo del hero en móvil === */
@media (max-width: 768px) {
    .hero-visual {
        width: 100%;
        margin-top: 28px;
    }

    .hero-video-placeholder {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 0;
        overflow: hidden;
    }

    .hero-video-placeholder .hero-product-video {
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: contain !important;
        object-position: center;
    }
}





/* Orders screenshot final fit */
.showcase-grid .showcase-item .showcase-visual.orders-screenshot-visual {
    aspect-ratio: 1730 / 909 !important;
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
}

.showcase-grid .showcase-item .showcase-visual.orders-screenshot-visual > img.orders-screenshot-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}
/* Orders screenshot final fit */
.showcase-grid .showcase-item .showcase-visual.orders-screenshot-visual {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
}

.showcase-grid .showcase-item .showcase-visual.orders-screenshot-visual > img.orders-screenshot-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

/* Gestión documental: stacked layout, real screenshot at natural ratio, no frame */
.showcase-item.showcase-item-orders {
    grid-template-columns: 1fr;
    gap: 32px;
}

.showcase-item.showcase-item-orders .showcase-info {
    order: 1;
}

.showcase-item.showcase-item-orders .showcase-visual {
    order: 2;
    display: block;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.showcase-item.showcase-item-orders .showcase-visual .showcase-fullsize-link {
    display: block;
    line-height: 0;
}

.showcase-item.showcase-item-orders .showcase-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dashboard y KPIs: mismo tratamiento aprobado para Gestión documental */
.showcase-item.showcase-item-dashboard {
    grid-template-columns: 1fr;
    gap: 32px;
}

.showcase-item.showcase-item-dashboard .showcase-info {
    order: 1;
}

.showcase-item.showcase-item-dashboard .showcase-visual {
    order: 2;
    display: block;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.showcase-item.showcase-item-dashboard .showcase-visual .showcase-fullsize-link {
    display: block;
    line-height: 0;
}

.showcase-item.showcase-item-dashboard .showcase-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Conciliación línea a línea: mismo tratamiento aprobado para Gestión documental */
.showcase-item.showcase-item-detalle {
    grid-template-columns: 1fr;
    gap: 32px;
}

.showcase-item.showcase-item-detalle .showcase-info {
    order: 1;
}

.showcase-item.showcase-item-detalle .showcase-visual {
    order: 2;
    display: block;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.showcase-item.showcase-item-detalle .showcase-visual .showcase-fullsize-link {
    display: block;
    line-height: 0;
}

.showcase-item.showcase-item-detalle .showcase-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Historial de auditoría: mismo tratamiento aprobado para Gestión documental */
.showcase-item.showcase-item-audit {
    grid-template-columns: 1fr;
    gap: 32px;
}

.showcase-item.showcase-item-audit .showcase-info {
    order: 1;
}

.showcase-item.showcase-item-audit .showcase-visual {
    order: 2;
    display: block;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.showcase-item.showcase-item-audit .showcase-visual .showcase-fullsize-link {
    display: block;
    line-height: 0;
}

.showcase-item.showcase-item-audit .showcase-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.contact-email-note {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Contact section layout refinement */
#contacto .container {
    max-width: 920px;
}

#contacto .section-header {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

#contacto .section-description {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#contacto .contact-actions {
    justify-content: center;
    margin-top: 2rem;
}

#contacto .contact-email-note {
    text-align: center;
    margin-top: 1rem;
}

/* Demo (Google Calendar booking CTA) */
.demo-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}

/* The generic h2 clamp tops out at 2.75rem, which makes the Spanish title
   here (the longest of the three languages) wrap inside this 720px column
   at wide desktop widths. Capped lower, scoped to just this title, so
   every other h2 on the site keeps its normal size. */
.demo-cta-inner .section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
}

.demo-meta {
    margin-top: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.demo-alt {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-muted);
}

.demo-alt a {
    color: var(--primary-color);
    font-weight: 600;
    word-break: break-word;
}

@media (max-width: 768px) {
    .demo-meta {
        font-size: 0.85rem;
    }

    .demo-alt {
        margin-top: 24px;
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .demo-cta-inner .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* Skip to content (accessibility) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.9375rem;
    z-index: 9999;
    border-radius: 0 0 8px 0;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--primary-dark);
    outline-offset: 2px;
}

/* Global focus-visible styles */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Chat Widget (visual prototype only) */
.chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.chat-toggle:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.chat-widget.is-open .chat-toggle {
    display: none;
}

.chat-window[hidden] {
    display: none;
}

.chat-window {
    width: 340px;
    max-width: calc(100vw - 48px);
    max-height: 70vh;
    background: var(--bg-white);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--secondary-color);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.chat-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-window-body {
    padding: 20px;
    overflow-y: auto;
}

.chat-message {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.chat-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-quick-btn {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-color);
    text-align: left;
    transition: var(--transition);
}

.chat-quick-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(36, 107, 253, 0.05);
}

@media (max-width: 480px) {
    .chat-widget {
        left: 16px;
        right: 16px;
        bottom: 16px;
        align-items: stretch;
    }

    .chat-toggle {
        align-self: flex-end;
        padding: 0;
        width: 56px;
        height: 56px;
        justify-content: center;
    }

    .chat-toggle-text {
        display: none;
    }

    .chat-window {
        width: 100%;
        max-width: 100%;
        max-height: 65vh;
    }
}

/* ============================================
   Pricing v2 — Essential / Professional / Business
   (precios.html)
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pricing-summary {
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.price-vat {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-includes {
    margin-bottom: 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-doc-note {
    max-width: 700px;
    margin: 8px auto 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Microsoft Enterprise section */
.enterprise-ms {
    background: var(--dark);
}

.enterprise-ms-card {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.enterprise-ms-badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.enterprise-ms .section-title {
    margin-bottom: 16px;
    color: var(--white);
}

.enterprise-ms-lead {
    max-width: 640px;
    margin: 0 auto 32px;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
}

.enterprise-ms-price {
    margin-bottom: 28px;
}

.enterprise-ms-price .amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white);
}

.enterprise-ms-price .period {
    margin-left: 8px;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
}

.enterprise-ms-price-tag {
    display: block;
    margin-top: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.enterprise-ms-desc {
    max-width: 680px;
    margin: 0 auto 32px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.enterprise-ms-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
    max-width: 620px;
    margin: 0 auto 40px;
    text-align: left;
}

.enterprise-ms-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.enterprise-ms-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 700;
}

.enterprise-ms-note {
    max-width: 640px;
    margin: 28px auto 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
    .enterprise-ms-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Try / demo secondary CTA */
.pricing-trial-inner {
    max-width: 560px;
    margin: 0 auto;
}

.pricing-trial-title {
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.pricing-trial-text {
    margin-bottom: 24px;
    color: var(--text-muted);
}

/* ==========================================================================
   Consentimiento de cookies (banner + panel de preferencias)
   ========================================================================== */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
    padding: 20px 24px;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-banner-text {
    flex: 1 1 480px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.cookie-banner-text a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* "Aceptar todas" y "Rechazar todas" comparten exactamente el mismo estilo:
   mismo tamaño, contraste y visibilidad, sin jerarquía visual entre ambas. */
.cookie-btn {
    padding: 12px 22px;
    border-radius: 10px;
    border: 1.5px solid var(--secondary-color);
    background: var(--bg-white);
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.cookie-btn:hover {
    background: var(--secondary-color);
    color: var(--white);
}

.cookie-btn-link {
    background: none;
    border: none;
    padding: 8px 4px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* Desplaza el asistente hacia arriba mientras el banner está visible,
   para que nunca queden superpuestos de forma ilegible. */
body.has-cookie-banner .chat-widget {
    bottom: var(--cookie-banner-offset, 24px);
    transition: bottom 0.2s ease;
}

/* Panel de preferencias */
.cookie-panel {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cookie-panel[hidden] {
    display: none;
}

.cookie-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}

.cookie-panel-content {
    position: relative;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
}

.cookie-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-light);
    color: var(--secondary-color);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.cookie-panel-title {
    margin: 0 0 24px;
    font-size: 1.3rem;
    padding-right: 32px;
}

.cookie-panel-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.cookie-panel-row-info strong {
    display: block;
    margin-bottom: 4px;
    color: var(--secondary-color);
}

.cookie-panel-row-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cookie-panel-toggle-fixed {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-light);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.cookie-panel-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex: 0 0 auto;
}

.cookie-panel-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-panel-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}

.cookie-panel-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--bg-white);
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cookie-panel-switch input:checked + .cookie-panel-slider {
    background: var(--primary-color);
}

.cookie-panel-switch input:checked + .cookie-panel-slider::before {
    transform: translateX(20px);
}

.cookie-panel-switch input:focus-visible + .cookie-panel-slider {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.cookie-panel-link {
    margin: 20px 0 0;
    font-size: 0.85rem;
}

.cookie-panel-link a {
    color: var(--primary-color);
    font-weight: 600;
}

.cookie-panel-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .cookie-banner {
        padding: 16px;
    }

    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-banner-actions .cookie-btn,
    .cookie-banner-actions .cookie-btn-link {
        flex: 1 1 0;
        text-align: center;
    }

    .cookie-panel-content {
        padding: 24px 20px;
    }
}

/* Legal pages (privacidad.html, terminos.html, politica-cookies.html) —
   moved here from per-page <style> blocks so no page needs 'unsafe-inline'
   in style-src under the Content-Security-Policy. */
.legal-content {
    padding: 80px 0;
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 32px;
}

.legal-content p {
    margin-bottom: 16px;
    color: var(--text-muted);
    text-align: justify;
}

.legal-content ul,
.legal-content ol {
    padding-left: 24px;
    margin-bottom: 16px;
    color: var(--text-muted);
}

.legal-content ul {
    list-style: disc;
}

.legal-content li {
    margin-bottom: 8px;
}

.back-link {
    margin-bottom: 24px;
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color);
}

.cookie-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cookie-table th,
.cookie-table td {
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.cookie-table th {
    background: var(--bg-light);
    color: var(--secondary-color);
}

.cookie-table td {
    color: var(--text-muted);
}


/* 404 Error Page */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) 24px;
}

.error-card {
    max-width: 580px;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 48px 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.error-code {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 16px;
}

.error-title {
    font-size: 1.75rem;
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.error-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 32px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}



/* ==== NARAO-MODERN-UI:START ==== */
/* Refresh visual. Solo estilos: no altera estructura, posiciones,
   display, opacity ni transform base de ningún elemento. */

/* Inter (variable, autoalojada; licencia SIL OFL 1.1) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ink: #0b1220;
    --primary-color: #1d4ed8;
    --primary-dark: #1e40af;
    --primary-tint: #eef3ff;
    --secondary-color: #0b1220;
    --text-color: #1f2937;
    --text-muted: #5b6577;
    --bg-light: #f8fafc;
    --border-color: #e5e8ee;
    --border-strong: #cfd5df;
    --dark: #0b1220;
    --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 3px rgba(11, 18, 32, 0.04);
    --shadow-md: 0 1px 2px rgba(11, 18, 32, 0.04), 0 6px 16px -6px rgba(11, 18, 32, 0.10);
    --shadow-lg: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -20px rgba(11, 18, 32, 0.22);
    --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.20);
}

body,
.hero-content h1,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "cv11" 1;
}
.nav-links a {
    letter-spacing: -0.01em;
}
/* Menú principal: con el desplegable "Producto" caben los 6 enlaces en
   escritorio (>= 1025px) en ES/CA/EN; el botón del desplegable usa la
   misma letra que los enlaces. */
.nav-dropdown-toggle {
    font-size: 0.8125rem;
}
::selection {
    background: rgba(29, 78, 216, 0.14);
    color: var(--ink);
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.025em;
}
h1, h2 {
    letter-spacing: -0.035em;
}
.hero-content h1 {
    line-height: 1.12;
}
.hero-subtitle,
.section-description {
    color: var(--text-muted);
}
.step-number,
.amount {
    font-variant-numeric: tabular-nums;
}

/* ---------- Navbar ---------- */
.main-header {
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(229, 232, 238, 0.9);
}
.nav-links a {
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.nav-links a:hover {
    color: var(--ink);
}

/* ---------- Botones ---------- */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover,
.btn:active {
    transform: none;
}
.btn-primary {
    background-color: var(--primary-color);
    background-image: none;
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-outline {
    background-color: #ffffff;
    border-color: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-xs);
}
.btn-outline:hover {
    background-color: var(--bg-light);
    border-color: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px #9aa4b5, var(--shadow-xs);
}
.btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--bg-light);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn-outline:focus-visible,
.btn-secondary:focus-visible {
    box-shadow: inset 0 0 0 1px var(--border-strong), var(--focus-ring);
}

/* ---------- Hero: retícula sutil que se desvanece ---------- */
.hero {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 85% 75% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, #ffffff 88%),
        radial-gradient(ellipse 45% 40% at 85% 10%, rgba(29, 78, 216, 0.08) 0%, rgba(29, 78, 216, 0) 70%),
        linear-gradient(to right, rgba(11, 18, 32, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 18, 32, 0.06) 1px, transparent 1px);
    background-size: auto, auto, 56px 56px, 56px 56px;
    background-position: center top;
}
.visual-placeholder,
.hero-video-placeholder {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* ---------- Funcionalidades ---------- */
.key-features {
    border-color: var(--border-color);
}
.icon-wrap {
    border-radius: 10px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.10);
}
.key-feature-item h3 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ---------- Cómo funciona ---------- */
.how-it-works,
.product-link {
    background-color: var(--bg-light);
}
/* El botón "Ver el producto" sube sobre el final de "Cómo funciona":
   ambos comparten fondo para que no quede partido entre gris y blanco. */
.product-link {
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-color);
}
.step-card {
    background-color: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.step-card:hover {
    transform: none;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.step-number {
    background-color: var(--primary-tint);
    color: var(--primary-color);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
}

/* ---------- Sección oscura (beneficios) ---------- */
.bg-dark {
    background-color: var(--dark);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%),
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    background-position: center top;
}
.bg-dark h2,
.bg-dark h3 {
    color: #ffffff;
}
.bg-dark .section-description,
.benefit-card p {
    color: rgba(226, 232, 240, 0.72);
}
.benefit-card h3 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ---------- Fundador ---------- */
.founder-image-container {
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    outline: 1px solid rgba(11, 18, 32, 0.06);
    outline-offset: -1px;
}
.founder-label {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px -4px rgba(11, 18, 32, 0.18);
}

/* ---------- Demo / contacto ---------- */
.demo-contact {
    background-image: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%);
    border-top: 1px solid var(--border-color);
}
.demo-meta {
    font-weight: 500;
}
.demo-alt a,
.faq-item p a,
.faq-contact-note a {
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.3);
    text-underline-offset: 3px;
}
.demo-alt a:hover,
.faq-item p a:hover,
.faq-contact-note a:hover {
    text-decoration-color: currentColor;
}

/* ---------- Footer ---------- */
.main-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
}
.footer-nav h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}
.footer-nav ul a,
.footer-legal-mini-links a {
    transition: color 0.15s ease;
}
.footer-nav ul a:hover,
.footer-legal-mini-links a:hover {
    color: var(--ink);
}

/* ---------- Producto, precios, FAQ ---------- */
.showcase-visual {
    border-radius: 14px;
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}
.pricing-card {
    border-radius: 16px;
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}
.pricing-card:hover {
    box-shadow: var(--shadow-lg);
}
.pricing-card.featured {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color), var(--shadow-md);
}
.featured-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.faq-item {
    border-radius: 12px;
    border-color: var(--border-color);
    transition: border-color 0.2s ease;
}
.faq-item:hover {
    border-color: var(--border-strong);
}
.enterprise-ms-card,
.error-card {
    border-radius: 16px;
}

/* ---------- Chat y cookies ---------- */
.chat-toggle {
    font-weight: 600;
    box-shadow: 0 8px 24px -8px rgba(29, 78, 216, 0.45);
}
.chat-toggle:hover {
    transform: none;
}
.chat-window {
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}
.chat-window-header {
    background: var(--ink);
}
.chat-quick-btn {
    border-radius: 8px;
}
.chat-quick-btn:hover {
    background: var(--primary-tint);
}
.cookie-banner-inner,
.cookie-panel-content {
    border-radius: 14px;
}
/* ==== NARAO-MODERN-UI:END ==== */

/* ==== NARAO-ROI:START ==== */
/* Calculadora de ahorro (sección #calculadora-roi, lógica en roi.js) */
.roi {
    background-color: #ffffff;
}
.roi-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
}

.roi-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    max-width: 1080px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ---------- Entradas ---------- */
.roi-inputs {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
}
.roi-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.roi-label {
    color: var(--ink);
    font-size: 0.975rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.roi-number {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: flex-end;
    width: 136px;
    height: 44px;
    padding: 0 12px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-xs);
    transition: box-shadow 0.15s ease;
}
.roi-number:focus-within {
    box-shadow: inset 0 0 0 1px var(--primary-color), var(--focus-ring);
}
.roi-number input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}
.roi-number input::-webkit-outer-spin-button,
.roi-number input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.roi-number input:focus-visible {
    outline: none;
}
.roi-number-unit {
    margin-left: 6px;
    color: var(--text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}
.roi-number-sm {
    width: 100%;
    height: 40px;
}
.roi-number-sm input {
    width: 100%;
    font-size: 0.975rem;
}

.roi-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 18px 0 10px;
    border-radius: 999px;
    background:
        linear-gradient(var(--primary-color), var(--primary-color)) 0 0 / var(--fill, 50%) 100% no-repeat,
        var(--border-color);
    cursor: pointer;
}
.roi-range:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.roi-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.18), 0 0 0 4px rgba(29, 78, 216, 0.10);
    transition: box-shadow 0.15s ease;
}
.roi-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.18), 0 0 0 4px rgba(29, 78, 216, 0.10);
}
.roi-range:hover::-webkit-slider-thumb {
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.18), 0 0 0 6px rgba(29, 78, 216, 0.14);
}
.roi-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.roi-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.roi-preset {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-color);
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.roi-preset:hover {
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.roi-preset[aria-pressed="true"] {
    background-color: var(--primary-tint);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.35);
    color: var(--primary-color);
}

.roi-assumptions {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.roi-assumptions summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.roi-assumptions summary::-webkit-details-marker {
    display: none;
}
.roi-assumptions summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
}
.roi-assumptions[open] summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}
.roi-assumptions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.roi-mini-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ---------- Resultados ---------- */
.roi-results {
    display: flex;
    flex-direction: column;
    padding: 40px;
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 70%),
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
    color: #ffffff;
}
.roi-results-label {
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.roi-big {
    margin: 10px 0 12px;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.roi-insight {
    margin-bottom: 28px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}
.roi-insight strong {
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.roi-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0 0 28px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.roi-stat {
    padding: 14px 16px;
    background-color: rgba(15, 26, 46, 0.96);
}
.roi-stat dt {
    color: rgba(203, 213, 225, 0.75);
    font-size: 0.75rem;
    font-weight: 500;
}
.roi-stat dd {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.roi-stat dd small {
    display: block;
    margin-top: 2px;
    color: rgba(203, 213, 225, 0.75);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
}

.roi-compare {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}
.roi-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.roi-bar {
    height: 8px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.roi-bar-fill {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.roi-bar-manual {
    background-color: #64748b;
}
.roi-bar-auto {
    background-image: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.btn.roi-cta {
    align-self: flex-start;
    margin-top: auto;
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn.roi-cta:hover {
    background-color: #e2e8f0;
    border-color: #e2e8f0;
    color: var(--ink);
}

/* ---------- Explicación ---------- */
.roi-method {
    max-width: 1080px;
    margin: 48px auto 0;
}
.roi-method-title {
    margin-bottom: 20px;
    font-size: 1.125rem;
    font-weight: 600;
}
.roi-method-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    list-style: none;
}
.roi-method-steps li {
    display: flex;
    gap: 14px;
}
.roi-method-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
}
.roi-method-steps h4 {
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.roi-method-steps p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.roi-disclaimer {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .roi-card {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .roi-inputs,
    .roi-results {
        padding: 28px 20px;
    }
    .roi-method-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .btn.roi-cta {
        align-self: stretch;
    }
}
@media (max-width: 480px) {
    .roi-field-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .roi-field-head .roi-number {
        width: 100%;
    }
    .roi-stat {
        padding: 12px;
    }
    .roi-stat dd {
        font-size: 1.1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .roi-bar-fill {
        transition: none;
    }
}

/* Selector de moneda */
.roi-select {
    position: relative;
    flex-shrink: 0;
    width: 264px;
    max-width: 100%;
}
.roi-select select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    padding: 0 36px 0 12px;
    border: 0;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-xs);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.roi-select select:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary-color), var(--focus-ring);
}
.roi-select select:disabled {
    cursor: progress;
    opacity: 0.7;
}
.roi-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.roi-fx {
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.roi-fx:empty {
    display: none;
}
.roi-fx a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.3);
    text-underline-offset: 2px;
}
.roi-assumptions-hint {
    margin-top: 12px;
}

@media (max-width: 480px) {
    .roi-select {
        width: 100%;
    }
}

/* Gasto mensual y tasa de error */
.roi-number-wide {
    width: 184px;
}
.roi-mini-field-full {
    grid-column: 1 / -1;
}

/* Desglose del ahorro */
.roi-breakdown {
    margin: 0 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.roi-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.roi-breakdown-row dt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.9rem;
}
.roi-breakdown-row dd {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.roi-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.roi-dot-time {
    background-color: #60a5fa;
}
.roi-dot-error {
    background-color: #34d399;
}

/* Fuente del estudio */
.roi-source {
    display: block;
    margin-top: 8px;
}
.roi-source a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.3);
    text-underline-offset: 2px;
}
.roi-source a:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 960px) {
    .roi-method-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .roi-method-steps {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .roi-number-wide {
        width: 100%;
    }
}
/* ==== NARAO-ROI:END ==== */

/* ==== NARAO-NAV-DROPDOWN:START ==== */
/* Menú "Producto": agrupa Cómo funciona, Funcionalidades y el recorrido
   por el producto. Escritorio: panel desplegable (lo abre script.js con la
   clase .open). Menú móvil: grupo siempre visible con su título. */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}
.nav-dropdown-toggle::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
    color: var(--ink);
}
.nav-dropdown.open .nav-dropdown-toggle::after {
    margin-top: 2px;
    transform: rotate(-135deg);
}
.nav-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.10);
}
.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-dropdown-title {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.nav-dropdown-desc {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

@media (min-width: 1025px) {
    .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 30px);
        left: 50%;
        z-index: 1001;
        width: 340px;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background-color: #ffffff;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 6px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    }
    /* Puente invisible para que el panel no se cierre al bajar el ratón */
    .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -32px;
        left: 0;
        right: 0;
        height: 32px;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    .nav-links .nav-dropdown-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: inherit;
        letter-spacing: normal;
        white-space: normal;
        transition: background-color 0.15s ease;
    }
    .nav-links .nav-dropdown-item:hover,
    .nav-links .nav-dropdown-item:focus-visible {
        background-color: var(--bg-light);
        outline: none;
    }
    .nav-links .nav-dropdown-item:hover .nav-dropdown-title {
        color: var(--primary-color);
    }
}

@media (max-width: 1024px) {
    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-dropdown-toggle {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        pointer-events: none;
    }
    .nav-dropdown-toggle::after,
    .nav-dropdown-icon,
    .nav-dropdown-desc {
        display: none;
    }
    .nav-dropdown-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
    }
    .nav-links .nav-dropdown-item {
        display: block;
        text-align: center;
    }
    .nav-dropdown-title {
        color: inherit;
        font-size: 1.25rem;
        font-weight: 500;
    }
}
/* En móvil los enlaces del menú van alineados a la izquierda */
@media (max-width: 768px) {
    .nav-dropdown,
    .nav-dropdown-menu {
        align-items: flex-start;
    }
    .nav-links .nav-dropdown-item {
        text-align: left;
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav-dropdown-menu,
    .nav-dropdown-toggle::after {
        transition: none;
    }
}
/* ==== NARAO-NAV-DROPDOWN:END ==== */

/* ==== NARAO-FEATURES:START ==== */
/* Funcionalidades clave: tarjeta al pasar el ratón, brillo que sigue al
   cursor (--mx/--my, los fija script.js) y aparición escalonada.
   La tarjeta crece hacia fuera (margen negativo = relleno), así que el
   texto no cambia de posición. La aparición solo oculta los elementos si
   script.js añade .kf-reveal (navegador compatible y sin "reducir
   movimiento"); sin JS todo es visible desde el principio. */
.key-feature-item {
    position: relative;
    isolation: isolate;
    margin: -18px;
    padding: 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.key-feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(29, 78, 216, 0.09), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.key-feature-item .icon-wrap {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.key-feature-item:hover {
    background-color: #ffffff;
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}
.key-feature-item:hover::before {
    opacity: 1;
}
.key-feature-item:hover .icon-wrap {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.6);
    transform: scale(1.06);
}

@keyframes kf-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.kf-reveal .key-feature-item {
    opacity: 0;
}
.kf-reveal.is-visible .key-feature-item {
    animation: kf-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--kf-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
    .key-feature-item,
    .key-feature-item::before,
    .key-feature-item .icon-wrap {
        transition: none;
    }
    .key-feature-item:hover .icon-wrap {
        transform: none;
    }
    .kf-reveal .key-feature-item,
    .kf-reveal.is-visible .key-feature-item {
        opacity: 1;
        animation: none;
    }
}
@media print {
    .kf-reveal .key-feature-item {
        opacity: 1;
        animation: none;
    }
}
/* ==== NARAO-FEATURES:END ==== */

/* ==== NARAO-HOW-BADGE:START ==== */
/* Etiqueta "Una sola vez" del paso 1 de "Cómo funciona", alineada con el
   número del paso (mismo margen interior que la tarjeta). */
.step-card {
    position: relative;
}
.step-badge {
    position: absolute;
    top: 49px;
    right: 40px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--bg-light);
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}
@media (max-width: 480px) {
    .step-badge {
        top: 33px;
        right: 24px;
    }
}
/* ==== NARAO-HOW-BADGE:END ==== */

/* ==== NARAO-STEPS:START ==== */
/* "Cómo funciona": al pasar el ratón el número se rellena, se dibuja una
   línea de progreso en el borde superior y un brillo sigue al cursor
   (--mx/--my, los fija script.js). Aparición escalonada con la misma
   protección que Funcionalidades (.kf-reveal solo la añade script.js). */
.step-card {
    isolation: isolate;
    overflow: hidden;
}
.step-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(29, 78, 216, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.step-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, var(--primary-color), #60a5fa);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.step-card .step-number {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.step-card:hover {
    border-color: rgba(29, 78, 216, 0.28);
    box-shadow: var(--shadow-lg);
}
.step-card:hover::before {
    opacity: 1;
}
.step-card:hover::after {
    transform: scaleX(1);
}
.step-card:hover .step-number {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.6);
    transform: scale(1.06);
}

.kf-reveal .step-card {
    opacity: 0;
}
.kf-reveal.is-visible .step-card {
    animation: kf-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--kf-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
    .step-card::before,
    .step-card::after,
    .step-card .step-number {
        transition: none;
    }
    .step-card:hover .step-number {
        transform: none;
    }
    .kf-reveal .step-card,
    .kf-reveal.is-visible .step-card {
        opacity: 1;
        animation: none;
    }
}
@media print {
    .kf-reveal .step-card {
        opacity: 1;
        animation: none;
    }
}
/* ==== NARAO-STEPS:END ==== */

/* ==== NARAO-HERO-MOCK:START ==== */
/* Portada: ejemplo de conciliación en HTML/CSS (sustituye al vídeo).
   Animación solo CSS al cargar; con "reducir movimiento" se muestra
   directamente el estado final. */
.hero-mock {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 18px 0 46px;
    text-align: left;
}
/* El desplazamiento vertical original (-56px) estaba pensado para el vídeo */
@media (min-width: 1025px) {
    .hero-visual {
        transform: translateY(-12px);
    }
}
.hero-mock-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    color: var(--text-color);
}

/* Cabecera */
.hero-mock-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
}
.hero-mock-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hero-mock-eyebrow {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hero-mock-id {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.hero-mock-supplier {
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-mock-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--primary-tint);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.15);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
}
.hero-mock-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 0 20px 14px;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.hero-mock-refs b {
    color: var(--ink);
    font-weight: 600;
}

/* Tabla */
.hero-mock-table {
    position: relative;
    border-top: 1px solid var(--border-color);
}
.hero-mock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 64px 104px;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-bottom: 1px solid #eef1f5;
    font-variant-numeric: tabular-nums;
}
.hero-mock-row > span:nth-child(2),
.hero-mock-row > span:nth-child(3) {
    text-align: right;
}
.hero-mock-row > span:first-child {
    overflow: hidden;
    color: var(--ink);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-mock-th {
    padding-top: 9px;
    padding-bottom: 9px;
    background-color: var(--bg-light);
}
.hero-mock-th > span,
.hero-mock-th > span:first-child {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hero-mock-r2,
.hero-mock-r3 {
    background-color: #fffcf5;
}
.hero-mock-status {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.hero-mock-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}
.hero-mock-status.is-ok {
    background-color: #ecfdf5;
    color: #047857;
}
.hero-mock-status.is-warn {
    background-color: #fffbeb;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
    color: #b45309;
}

/* Barrido de lectura de la IA */
.hero-mock-table::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    background-image: linear-gradient(180deg, rgba(29, 78, 216, 0), rgba(29, 78, 216, 0.08), rgba(29, 78, 216, 0));
    opacity: 0;
    pointer-events: none;
}

/* Pie */
.hero-mock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 14px;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.hero-mock-validate {
    color: var(--ink);
    font-weight: 600;
}

/* Etiquetas flotantes */
.hero-mock-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: var(--shadow-lg);
    font-size: 0.75rem;
}
.hero-mock-chip-link {
    top: 0;
    right: 18px;
    padding: 7px 12px;
    color: #047857;
    font-weight: 600;
}
.hero-mock-chip-alert {
    bottom: 0;
    left: -22px;
    padding: 10px 14px 10px 10px;
}
.hero-mock-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: #fffbeb;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
    color: #b45309;
}
.hero-mock-chip-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hero-mock-chip-text strong {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
}
.hero-mock-chip-text span {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Enlace a la calculadora bajo los botones */
.hero-roi-link {
    margin-top: 18px;
    font-size: 0.9375rem;
}
.hero-roi-link a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.3);
    text-underline-offset: 3px;
}
.hero-roi-link a:hover {
    text-decoration-color: currentColor;
}

/* Animación de entrada (solo CSS) */
@keyframes hm-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes hm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes hm-pop {
    0% { opacity: 0; transform: scale(0.85); }
    60% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: none; }
}
@keyframes hm-scan {
    0% { opacity: 0; transform: translateY(30px); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(200px); }
}
@keyframes hm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
    .hero-mock-card {
        animation: hm-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }
    .hero-mock-row:not(.hero-mock-th) {
        animation: hm-fade 0.4s ease both;
    }
    .hero-mock-r1 { animation-delay: 0.45s; }
    .hero-mock-r2 { animation-delay: 0.6s; }
    .hero-mock-r3 { animation-delay: 0.75s; }
    .hero-mock-r4 { animation-delay: 0.9s; }
    .hero-mock-table::after {
        animation: hm-scan 1.4s ease-in-out 1s both;
    }
    .hero-mock-status {
        animation: hm-pop 0.45s ease both;
    }
    .hero-mock-r1 .hero-mock-status { animation-delay: 1.25s; }
    .hero-mock-r2 .hero-mock-status { animation-delay: 1.55s; }
    .hero-mock-r3 .hero-mock-status { animation-delay: 1.85s; }
    .hero-mock-r4 .hero-mock-status { animation-delay: 2.15s; }
    .hero-mock-foot {
        animation: hm-fade 0.4s ease 2.4s both;
    }
    .hero-mock-chip-link {
        animation: hm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
    }
    .hero-mock-chip-alert {
        animation:
            hm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.5s both,
            hm-float 6s ease-in-out 3.2s infinite;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-mock-chip-alert {
        left: 12px;
    }
}
@media (max-width: 480px) {
    .hero-mock-card {
        font-size: 0.75rem;
    }
    .hero-mock-head,
    .hero-mock-refs,
    .hero-mock-row,
    .hero-mock-foot {
        padding-left: 14px;
        padding-right: 14px;
    }
    .hero-mock-row {
        grid-template-columns: minmax(0, 1fr) 40px 52px 86px;
        gap: 6px;
    }
    .hero-mock-row > span:first-child {
        white-space: normal;
        line-height: 1.35;
    }
    .hero-mock-status {
        padding: 3px 7px;
        font-size: 0.6875rem;
    }
    .hero-mock-chip-link {
        right: 10px;
    }
    .hero-mock-chip-alert {
        left: 8px;
    }
}
/* Valor esperado bajo el producto y cifra que no cuadra resaltada */
.hero-mock-row > span.hero-mock-product {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hero-mock-product > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-mock-expected {
    color: #b45309;
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hero-mock-diff {
    color: #b45309;
    font-weight: 600;
}
.hero-mock-row {
    grid-template-columns: minmax(0, 1fr) 52px 64px 116px;
}
@media (max-width: 480px) {
    .hero-mock-row {
        grid-template-columns: minmax(0, 1fr) 38px 50px 98px;
    }
    .hero-mock-product > span {
        white-space: normal;
    }
}
/* ==== NARAO-HERO-MOCK:END ==== */

/* ==== NARAO-FOUNDER:START ==== */
/* Sección "Sobre el fundador": etiqueta, titulaciones, cierre destacado,
   cifras clave y botón de LinkedIn con icono. */
.founder-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: var(--primary-tint);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.founder-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 24px;
    padding: 0;
    list-style: none;
}
.founder-creds li {
    padding: 5px 12px;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-color);
    font-size: 0.8125rem;
    font-weight: 500;
}
.founder-text p.founder-closing {
    padding-left: 16px;
    border-left: 3px solid var(--primary-color);
    color: var(--ink);
    font-weight: 600;
}
.founder-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}
.founder-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.founder-stat strong {
    color: var(--ink);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.founder-stat span {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.btn-linkedin {
    gap: 10px;
}
.btn-linkedin svg {
    flex-shrink: 0;
    color: #0a66c2;
}
@media (max-width: 600px) {
    .founder-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Ficha de perfil: trayectoria (empresas en tipografía, sin logotipos) y formación */
.founder-profile {
    margin: 4px 0 26px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-light);
}
.founder-profile-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px 18px;
}
.founder-profile-row + .founder-profile-row {
    border-top: 1px solid var(--border-color);
}
.founder-profile-label {
    padding-top: 5px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Separadores entre empresas: cada una lleva borde izquierdo y la lista se
   desplaza 14px a la izquierda con overflow oculto, así el separador del
   primer elemento de cada línea queda recortado y nunca encabeza una línea. */
.founder-companies {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 0;
    margin: 0 0 0 -14px;
    padding: 0;
    overflow: hidden;
    list-style: none;
}
.founder-companies li {
    margin-left: -1px;
    padding: 0 14px;
    border-left: 1px solid var(--border-strong);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.6;
}
.founder-companies small {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
}
.founder-profile .founder-creds {
    margin: 0;
}
@media (max-width: 600px) {
    .founder-profile-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .founder-profile-label {
        padding-top: 0;
    }
}
/* ==== NARAO-FOUNDER:END ==== */

/* ==== NARAO-BENEFITS:START ==== */
/* Beneficios (fondo oscuro): icono, tarjeta al pasar el ratón con brillo
   que sigue al cursor, aparición escalonada (misma protección .kf-reveal)
   y llamada a la acción. La tarjeta crece hacia fuera: el texto no se mueve. */
.benefit-card {
    position: relative;
    isolation: isolate;
    margin: -20px;
    padding: 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.benefit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(96, 165, 250, 0.14), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 10px;
    background-color: rgba(96, 165, 250, 0.12);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.benefit-card:hover {
    background-color: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.10);
}
.benefit-card:hover::before {
    opacity: 1;
}
.benefit-card:hover .benefit-icon {
    background-color: #3b82f6;
    box-shadow: 0 8px 18px -8px rgba(59, 130, 246, 0.8);
    color: #ffffff;
    transform: scale(1.06);
}
.benefits-cta {
    margin-top: 48px;
    text-align: center;
}
.benefits-cta a {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.5);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.15s ease;
}
.benefits-cta a:hover {
    text-decoration-color: #93c5fd;
}

.kf-reveal .benefit-card {
    opacity: 0;
}
.kf-reveal.is-visible .benefit-card {
    animation: kf-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--kf-delay, 0ms) both;
}
@media (prefers-reduced-motion: reduce) {
    .benefit-card,
    .benefit-card::before,
    .benefit-icon {
        transition: none;
    }
    .benefit-card:hover .benefit-icon {
        transform: none;
    }
    .kf-reveal .benefit-card,
    .kf-reveal.is-visible .benefit-card {
        opacity: 1;
        animation: none;
    }
}
@media print {
    .kf-reveal .benefit-card {
        opacity: 1;
        animation: none;
    }
}
/* ==== NARAO-BENEFITS:END ==== */

/* ==== NARAO-CHAT:START ==== */
/* Ventana "Ayuda y contacto": opciones con icono y flecha; la demo es la
   acción principal (azul). */
.chat-quick-actions {
    gap: 8px;
}
.chat-quick-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: #ffffff;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chat-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
}
.chat-quick-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.chat-quick-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}
.chat-quick-btn:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-light);
    color: var(--ink);
}
.chat-quick-btn:hover .chat-quick-arrow {
    color: var(--primary-color);
    transform: translateX(3px);
}

.chat-quick-btn.chat-quick-primary {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
}
.chat-quick-primary .chat-quick-icon {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.chat-quick-primary .chat-quick-arrow {
    color: rgba(255, 255, 255, 0.8);
}
.chat-quick-btn.chat-quick-primary:hover {
    border-color: var(--primary-dark);
    background-color: var(--primary-dark);
    color: #ffffff;
}
.chat-quick-btn.chat-quick-primary:hover .chat-quick-arrow {
    color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
    .chat-quick-btn:hover .chat-quick-arrow {
        transform: none;
    }
}
/* Cabecera clara: el único bloque de color de la ventana es la demo */
.chat-window-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.chat-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-close:hover {
    background-color: var(--bg-light);
    color: var(--ink);
}
/* Cabecera con identidad: degradado azul suave, retícula y avatar de marca */
.chat-window-header {
    position: relative;
    padding: 16px 16px 16px 18px;
    border-bottom: 1px solid rgba(29, 78, 216, 0.12);
    background-color: #f3f7ff;
    background-image:
        radial-gradient(ellipse 80% 120% at 0% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%),
        linear-gradient(to right, rgba(29, 78, 216, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29, 78, 216, 0.06) 1px, transparent 1px);
    background-size: auto, 20px 20px, 20px 20px;
}
.chat-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.12), 0 4px 12px -4px rgba(29, 78, 216, 0.35);
}
.chat-avatar img {
    width: 26px;
    height: 26px;
}
.chat-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.chat-header-sub {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
}
.chat-close:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
/* ==== NARAO-CHAT:END ==== */

/* ==== NARAO-GRID:START ==== */
/* Retícula y paleta unificadas.
   - Una sola retícula de 56px, anclada al centro de la página: las líneas
     verticales coinciden entre secciones al hacer scroll.
   - Solo en secciones "ancla" (portada, cómo funciona, calculadora,
     beneficios, demo y cabeceras de páginas internas); las secciones de
     lectura (funcionalidades, fundador) y el pie quedan limpios.
   - Siempre se desvanece hacia los bordes con el color de fondo de la
     propia sección.
   - Paleta: un único azul de marca y tres tonos de apoyo. */
:root {
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --accent-color: var(--blue-300);
    --grid-size: 56px;
    --grid-line: rgba(11, 18, 32, 0.055);
    --grid-line-dark: rgba(255, 255, 255, 0.035);
    --grid-lines:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    --grid-lines-dark:
        linear-gradient(to right, var(--grid-line-dark) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line-dark) 1px, transparent 1px);
}

/* Portada: misma retícula que el resto (antes tenía sus propios valores) */
.hero {
    background-image:
        radial-gradient(ellipse 85% 75% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, #ffffff 88%),
        radial-gradient(ellipse 45% 40% at 85% 10%, rgba(29, 78, 216, 0.08) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}

/* Fondo blanco, se desvanece desde arriba (cabeceras de páginas internas) */
.faq-hero,
.pricing-hero,
.product-showcase {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 55%, #ffffff 85%),
        radial-gradient(ellipse 45% 35% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}

/* Fondo blanco, se desvanece desde el centro (calculadora) */
.roi {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 70% 65% at 50% 55%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, #ffffff 82%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}

/* Fondo gris claro, se desvanece desde arriba (cómo funciona) */
.how-it-works {
    background-image:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.7) 55%, #f8fafc 88%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}

/* Fondo gris claro, se desvanece desde el centro (demo / contacto) */
.demo-contact {
    background-image:
        radial-gradient(ellipse 60% 70% at 50% 45%, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.65) 50%, #f8fafc 85%),
        radial-gradient(ellipse 50% 60% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}

/* Secciones oscuras: misma retícula y mismo brillo superior */
.bg-dark,
.enterprise-ms {
    background-color: var(--dark);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%),
        var(--grid-lines-dark);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}
.roi-results {
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* ---------- Paleta: acentos unificados ---------- */
.step-card::after,
.roi-bar-auto {
    background-image: linear-gradient(90deg, var(--primary-color), var(--blue-400));
}
.benefit-icon {
    color: var(--blue-300);
}
.benefit-card:hover .benefit-icon {
    background-color: var(--blue-500);
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"],
.lang-option:hover {
    background-color: var(--primary-tint);
}
.enterprise-ms-badge {
    background-color: rgba(147, 197, 253, 0.12);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.25);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ---------- Banner de cookies: estilo de botón de la web ----------
   "Aceptar todas" y "Rechazar todas" mantienen exactamente el mismo
   estilo entre sí (sin jerarquía visual), como exige la normativa. */
.cookie-btn {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cookie-btn:hover {
    border-color: #9aa4b5;
    background: var(--bg-light);
    color: var(--ink);
}
.cookie-btn-link {
    color: var(--ink);
}
/* ==== NARAO-GRID:END ==== */

/* ==== NARAO-FOOTER:START ==== */
/* Pie: marca alineada a la izquierda con las columnas, logo más contenido,
   llamada a la demo, correo e icono de LinkedIn. */
.footer-brand {
    text-align: left;
}
.footer-brand .logo-image {
    height: 52px;
    margin: 0 0 16px;
}
.footer-brand p {
    max-width: 340px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.footer-actions {
    margin-top: 20px;
}
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 18px;
}
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
.footer-contact-link svg {
    color: var(--primary-color);
}
.footer-contact-link:hover {
    color: var(--primary-color);
}
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-muted);
    transition: color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.footer-social:hover {
    background-color: #0a66c2;
    box-shadow: none;
    color: #ffffff;
}
.footer-bottom {
    padding-top: 28px;
    font-size: 0.8125rem;
}
@media (max-width: 480px) {
    .footer-brand {
        text-align: center;
    }
    .footer-brand .logo-image {
        margin: 0 auto 16px;
    }
    .footer-brand p {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-contact {
        justify-content: center;
    }
}
/* Línea de marca superior y enlaces con movimiento sutil */
.main-footer {
    position: relative;
    border-top-color: transparent;
}
.main-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(29, 78, 216, 0) 0%, var(--primary-color) 30%, var(--blue-400) 70%, rgba(96, 165, 250, 0) 100%);
    opacity: 0.55;
}
.footer-nav ul a {
    display: inline-block;
    transition: color 0.15s ease, transform 0.15s ease;
}
.footer-nav ul a:hover {
    color: var(--primary-color);
    transform: translateX(3px);
}
.footer-contact {
    margin-top: 22px;
}
@media (prefers-reduced-motion: reduce) {
    .footer-nav ul a:hover {
        transform: none;
    }
}
/* ==== NARAO-FOOTER:END ==== */

/* ==== NARAO-NAV-STATE:START ==== */
/* Cabecera: sombra fina al hacer scroll y enlace de la sección/página actual */
.main-header {
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.main-header.is-scrolled {
    box-shadow: 0 1px 0 rgba(11, 18, 32, 0.04), 0 10px 30px -18px rgba(11, 18, 32, 0.28);
}
.nav-links > li > a.is-current,
.nav-links > li > a.active,
.nav-dropdown-toggle.is-current,
.nav-dropdown-toggle.active {
    color: var(--primary-color);
}
@media (min-width: 1025px) {
    .nav-links > li > a,
    .nav-dropdown-toggle {
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 2px;
        text-underline-offset: 10px;
        transition: color 0.15s ease, text-decoration-color 0.2s ease;
    }
    .nav-links > li > a.is-current,
    .nav-links > li > a.active,
    .nav-dropdown-toggle.is-current,
    .nav-dropdown-toggle.active {
        text-decoration-color: var(--primary-color);
    }
}
/* ==== NARAO-NAV-STATE:END ==== */

/* ==== NARAO-BUTTONS:START ==== */
/* Sistema de botones:
   - .btn-primary  (Agendar una demo, Ver el producto…): azul con brillo
     superior sutil, borde definido y sombra azulada; flecha → animada en
     los botones grandes.
   - .btn-outline  (Crear cuenta) y .btn-secondary (Iniciar sesión): blanco
     con borde fino; mismo estilo para que la cabecera y los heros casen.
   - Alturas fijas por tamaño, estado al pulsar y foco accesible. */
.btn {
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-width: 1px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}
.btn-large {
    min-height: 50px;
    padding: 0 24px;
    font-size: 1rem;
}

/* Principal */
.btn-primary {
    border-color: #1a45c4;
    background-color: var(--primary-color);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 1px 2px rgba(11, 18, 32, 0.16),
        0 6px 16px -8px rgba(29, 78, 216, 0.55);
}
.btn-primary:hover {
    border-color: #1a3fae;
    background-color: #1c48cf;
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 1px 2px rgba(11, 18, 32, 0.16),
        0 12px 24px -10px rgba(29, 78, 216, 0.65);
}
.btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(11, 18, 32, 0.20),
        0 1px 2px rgba(11, 18, 32, 0.12);
}
.btn-large.btn-primary::after {
    content: "→";
    content: "→" / "";
    display: inline-block;
    font-weight: 500;
    transition: transform 0.18s ease;
}
.btn-large.btn-primary:hover::after {
    transform: translateX(3px);
}

/* Secundarios: Crear cuenta / Iniciar sesión */
.btn-outline,
.btn-secondary {
    border-color: var(--border-strong);
    background-color: #ffffff;
    background-image: none;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05);
}
.btn-outline:hover,
.btn-secondary:hover {
    border-color: #9aa4b5;
    background-color: var(--bg-light);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05), 0 4px 10px -6px rgba(11, 18, 32, 0.18);
}
.btn-outline:active,
.btn-secondary:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(11, 18, 32, 0.08);
}
.header-ctas .btn-login {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
}

/* Foco accesible común */
.btn:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(29, 78, 216, 0.55);
}

/* Botón blanco sobre el panel oscuro de la calculadora: mantiene su estilo */
.btn.roi-cta,
.btn.roi-cta:hover {
    background-image: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Menú móvil: mismas alturas cómodas para el dedo */
.mobile-menu-actions .btn {
    min-height: 52px;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-large.btn-primary::after {
        transition: none;
    }
    .btn:active,
    .btn-large.btn-primary:hover::after {
        transform: none;
    }
}
/* ==== NARAO-BUTTONS:END ==== */

/* ==== NARAO-HEADER-UPGRADE:START ==== */
/* Barra de anuncio, menú con píldoras, selector de idioma con globo y
   botón "Agendar una demo" en la cabecera. */

/* ---------- Barra de anuncio ---------- */
.announce-bar {
    position: relative;
    z-index: 1001;
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 40% 140% at 50% 0%, rgba(59, 130, 246, 0.35) 0%, rgba(59, 130, 246, 0) 70%),
        var(--grid-lines-dark);
    background-size: auto, 28px 28px, 28px 28px;
    background-position: center top;
    color: #ffffff;
}
.announce-dismissed .announce-bar {
    display: none;
}
.announce-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.announce-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 500;
}
.announce-link:hover {
    color: #ffffff;
}
.announce-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--blue-500);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.announce-arrow {
    color: var(--blue-300);
    transition: transform 0.18s ease;
}
.announce-link:hover .announce-arrow {
    transform: translateX(3px);
}
.announce-close {
    position: absolute;
    right: 24px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}
.announce-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
/* En tablet y móvil se oculta: el menú desplegable se posiciona respecto a la
   cabecera y la portada ya enlaza a la calculadora bajo los botones. */
@media (max-width: 1024px) {
    .announce-bar {
        display: none;
    }
}

/* ---------- Menú con píldora al pasar el ratón ---------- */
@media (min-width: 1025px) {
    .nav-links {
        gap: 2px;
    }
    .nav-links > li > a,
    .nav-dropdown-toggle {
        padding: 7px 10px;
        border-radius: 8px;
        text-underline-offset: 6px;
        transition: color 0.15s ease, background-color 0.15s ease, text-decoration-color 0.2s ease;
    }
    .nav-links > li > a:hover,
    .nav-dropdown-toggle:hover,
    .nav-dropdown.open .nav-dropdown-toggle {
        background-color: rgba(11, 18, 32, 0.045);
        color: var(--ink);
    }
    .nav-dropdown-menu {
        top: calc(100% + 24px);
    }
    .nav-dropdown-menu::before {
        top: -26px;
        height: 26px;
    }
}

/* ---------- Selector de idioma en píldora con globo ---------- */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: #ffffff;
    color: var(--text-color);
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
    border-color: var(--border-strong);
    background-color: var(--bg-light);
}
.lang-toggle-icon {
    color: var(--text-muted);
}

/* ---------- Cabecera: "Iniciar sesión" ligero + "Agendar una demo" ---------- */
@media (min-width: 1025px) {
    .header-ctas {
        gap: 8px;
    }
    .header-ctas .btn-login {
        border-color: transparent;
        background-color: transparent;
        box-shadow: none;
        padding: 0 12px;
    }
    .header-ctas .btn-login:hover {
        border-color: transparent;
        background-color: rgba(11, 18, 32, 0.045);
        box-shadow: none;
    }
    .header-ctas .btn-header-demo {
        min-height: 40px;
        padding: 0 16px;
        font-size: 0.875rem;
    }
}
/* Ajuste de espacio: logo de cabecera algo menor y píldoras más compactas */
@media (min-width: 1025px) {
    .header-container .logo-image {
        height: 46px;
    }
    .nav-links > li > a,
    .nav-dropdown-toggle {
        padding: 7px 8px;
    }
    .lang-toggle {
        padding: 0 10px;
    }
}
/* 1025–1199px: no caben logo, 6 enlaces y 3 controles; se usa el menú
   desplegable (hamburguesa) como en tablet. Replica las reglas de
   @media (max-width: 1024px) y anula las de escritorio. script.js usa el
   mismo umbral (1200px) para el desplegable "Producto" y el cierre. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .announce-bar {
        display: none;
    }
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .main-nav {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        min-width: 0;
        height: calc(100vh - 80px);
        padding: 40px 24px;
        background-color: var(--bg-white);
        z-index: 999;
        display: block;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .main-nav.active {
        transform: translateX(0);
    }
    .nav-links {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
        align-items: center;
    }
    .nav-links > li > a,
    .nav-dropdown-toggle {
        padding: 0;
        font-size: 1.25rem;
        white-space: normal;
        background: none;
        text-decoration: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .header-ctas {
        gap: 8px;
    }
    .header-ctas .btn-primary,
    .btn-login,
    .header-ctas .lang-select {
        display: none;
    }
    .header-ctas.legal-header-ctas .lang-select {
        display: block;
    }
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 420px;
        margin: 36px auto 0;
        padding-top: 28px;
        border-top: 1px solid var(--border-color);
    }
    .mobile-menu-actions .btn {
        width: 100%;
        min-height: 52px;
        justify-content: center;
    }
    /* Desplegable "Producto" como grupo abierto */
    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-dropdown-toggle {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        pointer-events: none;
    }
    .nav-dropdown-toggle::after,
    .nav-dropdown-icon,
    .nav-dropdown-desc {
        display: none;
    }
    .nav-dropdown-menu {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .nav-dropdown-menu::before {
        display: none;
    }
    .nav-links .nav-dropdown-item {
        display: block;
        padding: 0;
        text-align: center;
        background: none;
    }
    .nav-dropdown-title {
        color: inherit;
        font-size: 1.25rem;
        font-weight: 500;
    }
}
/* Alineación vertical del menú: el botón "Producto" y los enlaces comparten
   la misma caja y línea base. */
@media (min-width: 1200px) {
    .nav-links {
        align-items: center;
    }
    .nav-links > li {
        display: flex;
        align-items: center;
    }
    .nav-links > li > a,
    .nav-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        line-height: 1.25;
    }
}
/* ==== NARAO-HEADER-UPGRADE:END ==== */

/* ==== NARAO-RESPONSIVE:START ==== */
/* Ajustes de móvil y tablet tras la auditoría:
   1. Sin desplazamiento horizontal con el menú desplegable oculto (769–1199px).
   2. Zonas táctiles de al menos 40–44px.
   3. Tamaños de título coherentes entre secciones.
   4. Secciones más compactas en móvil (funcionalidades, cómo funciona, pie).
   5. Fundador: la foto antes que el texto en móvil y tablet.
   6. Botones de la portada en fila en tablet.
   7. Textos legales alineados a la izquierda en móvil. */

/* 1. El menú oculto (translateX 100%) no debe ensanchar la página */
@media (max-width: 1199px) {
    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }
}

/* 2. Zonas táctiles */
@media (max-width: 1199px) {
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-right: -10px;
    }
}
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: inline-flex;
    }
}
.roi-number input {
    align-self: stretch;
    height: 100%;
}
@media (max-width: 768px) {
    .roi-preset {
        min-height: 36px;
        padding: 6px 14px;
    }
    .footer-contact-link {
        min-height: 40px;
    }
    .footer-social {
        width: 40px;
        height: 40px;
    }
    .cookie-btn-link {
        min-height: 40px;
    }
}

/* 3. Títulos coherentes en móvil */
@media (max-width: 768px) {
    .key-feature-item h3,
    .step-card h3,
    .benefit-card h3 {
        font-size: 1.125rem;
        line-height: 1.3;
    }
    .demo-cta-inner .section-title {
        font-size: 1.75rem;
    }
}

/* 4. Secciones más compactas en móvil */
@media (max-width: 600px) {
    /* Funcionalidades: icono a la izquierda y texto a la derecha */
    .key-features-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .key-feature-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }
    .key-feature-item .icon-wrap {
        grid-row: span 2;
        margin-bottom: 0;
    }
    .key-feature-item h3 {
        margin-bottom: 4px;
    }
    /* Cómo funciona: tarjetas más juntas */
    .steps-grid {
        gap: 16px;
    }
    .step-card .step-number {
        margin-bottom: 16px;
    }
    /* Beneficios: misma separación compacta */
    .benefits-grid {
        gap: 28px;
    }
    .benefit-icon {
        margin-bottom: 12px;
    }
}
@media (max-width: 480px) {
    .step-card {
        padding: 22px;
    }
    .step-badge {
        top: 31px;
        right: 22px;
    }
    /* Pie: columnas Producto y Empresa en dos columnas, Legal debajo, todo a la izquierda */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
        text-align: left;
    }
    .footer-brand,
    .footer-grid > .footer-nav:last-child {
        grid-column: 1 / -1;
    }
    .footer-brand {
        text-align: left;
    }
    .footer-brand .logo-image {
        margin: 0 0 16px;
    }
    .footer-brand p {
        margin-left: 0;
        margin-right: 0;
    }
    .footer-contact {
        justify-content: flex-start;
    }
    .footer-nav h4 {
        margin-bottom: 14px;
    }
}

/* 5. Fundador: la foto primero en móvil y tablet */
@media (max-width: 1024px) {
    .founder-visual {
        order: -1;
    }
    .founder-image-container {
        max-width: 200px;
        margin: 0 0 8px;
    }
}

/* 6. Portada en tablet: botones en fila */
@media (min-width: 560px) and (max-width: 1199px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        max-width: none;
    }
    .hero-actions .btn {
        width: auto;
    }
}

/* 7. Textos legales: alineación a la izquierda en móvil (el justificado crea huecos) */
@media (max-width: 768px) {
    .legal-content p {
        text-align: left;
    }
    .legal-content h1 {
        font-size: 1.875rem;
    }
}
/* 8. Menú móvil: ocupa el ancho de la cabecera (no el de la ventana con la
      barra de desplazamiento), para que los enlaces no queden pegados al borde. */
@media (max-width: 768px) {
    .main-nav {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }
}
/* 9. Pie en tablet (481–1024px): marca en una fila completa, las tres
      columnas debajo en fila, y la barra inferior alineada como en escritorio. */
@media (min-width: 481px) and (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px 24px;
        text-align: left;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}
.footer-bottom p {
    margin: 0;
}
/* ==== NARAO-RESPONSIVE:END ==== */

/* ==== NARAO-FAQ:START ==== */
/* Preguntas frecuentes en acordeón (<details>/<summary> nativos) */
.faq-item {
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(29, 78, 216, 0.45);
    border-radius: inherit;
}
.faq-item summary h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.4;
}
.faq-item summary:hover h3 {
    color: var(--primary-color);
}
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--primary-tint);
    transition: background-color 0.2s ease;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background-color: var(--primary-color);
    transition: transform 0.25s ease, background-color 0.2s ease;
}
.faq-icon::after {
    transform: rotate(90deg);
}
.faq-item[open] .faq-icon {
    background-color: var(--primary-color);
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
    background-color: #ffffff;
}
.faq-item[open] .faq-icon::after {
    transform: rotate(0deg);
}
.faq-answer {
    padding: 0 28px 24px;
}
.faq-answer p + p {
    margin-top: 12px;
}
@media (max-width: 768px) {
    .faq-item {
        padding: 0;
    }
    .faq-item summary {
        padding: 18px 18px;
    }
    .faq-item summary h3 {
        font-size: 1rem;
    }
    .faq-answer {
        padding: 0 18px 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .faq-icon::before,
    .faq-icon::after {
        transition: none;
    }
}
/* ==== NARAO-FAQ:END ==== */

/* ==== NARAO-COOKIE:START ==== */
/* Aviso de cookies alineado con el contenido de la web en todos los anchos. */
.cookie-banner-inner {
    max-width: calc(var(--container-width) - 48px);
    gap: 16px 32px;
}
.cookie-banner-text {
    font-size: 0.9375rem;
    line-height: 1.55;
}
/* Los tres controles con la misma altura y centrados entre sí. */
.cookie-banner-actions .cookie-btn,
.cookie-banner-actions .cookie-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
/* Tablet: texto en una fila y acciones alineadas a la derecha debajo. */
@media (min-width: 641px) and (max-width: 1024px) {
    .cookie-banner-text {
        flex: 1 1 100%;
    }
    .cookie-banner-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
}
/* Móvil: el texto ocupa solo lo que necesita; "Aceptar" y "Rechazar" lado a
   lado con el mismo peso visual y "Configurar" debajo, centrado. */
@media (max-width: 640px) {
    .cookie-banner-text {
        flex: 0 0 auto;
        font-size: 0.875rem;
    }
    .cookie-banner-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cookie-banner-actions .cookie-btn {
        padding: 10px 12px;
    }
    .cookie-banner-actions .cookie-btn-link {
        grid-column: 1 / -1;
        order: 1;
        min-height: 36px;
        padding: 4px;
    }
}
/* ==== NARAO-COOKIE:END ==== */

/* ==== NARAO-FOOTER-SAAS:START ==== */
/* Pie estilo SaaS: marca a la izquierda, columnas a la derecha, todo alineado
   a la izquierda y arriba; franja final con copyright y ubicación en los extremos. */
.footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
    text-align: left;
}
.footer-brand {
    grid-column: auto;
    margin-bottom: 0;
    text-align: left;
}
.footer-brand .logo-image {
    margin: 0 0 16px;
}
.footer-brand p {
    max-width: 320px;
    margin-left: 0;
    margin-right: 0;
}
.footer-contact {
    justify-content: flex-start;
}
.footer-nav h4 {
    margin-bottom: 16px;
}
.footer-nav ul li {
    margin-bottom: 10px;
}
.footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    text-align: left;
}
.footer-copyright {
    order: -1;
}
/* Tablet: marca en una fila completa y las tres columnas debajo */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}
/* Móvil: Producto y Empresa lado a lado, Legal debajo; franja final apilada */
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
    .footer-grid > .footer-nav:last-child {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* Ordenador: marca y columnas en una sola fila, todo alineado arriba; el
   logo arranca a la altura de los títulos Producto / Empresa / Legal. */
@media (min-width: 1025px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: 48px;
        align-items: start;
    }
    .footer-brand .logo-image {
        display: block;
        height: 40px;
        width: auto;
        margin: -4px 0 16px;
    }
    .footer-nav h4 {
        line-height: 1.4;
    }
}
/* ==== NARAO-FOOTER-SAAS:END ==== */

/* ==== NARAO-FOUNDER-STACK:START ==== */
/* Franja secundaria del fundador: tecnología utilizada e integraciones.
   Reutiliza la ficha de perfil (borde, fondo y etiquetas); logos monocromos. */
.founder-stack {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    margin-top: 48px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-light);
}
.founder-stack-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
}
.founder-stack-block + .founder-stack-block {
    border-left: 1px solid var(--border-color);
}
.founder-stack .founder-profile-label {
    padding-top: 0;
}
.founder-stack-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.founder-stack-logos li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}
.founder-stack-logos svg {
    flex: none;
    width: 18px;
    height: 18px;
}
.founder-stack-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}
@media (max-width: 768px) {
    .founder-stack {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }
    .founder-stack-block {
        padding: 18px;
    }
    .founder-stack-block + .founder-stack-block {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}
/* Tablet vertical: los dos bloques apilados a todo el ancho (logos en una línea) */
@media (max-width: 1000px) {
    .founder-stack {
        grid-template-columns: 1fr;
    }
    .founder-stack-block + .founder-stack-block {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}
/* Móvil: logos en cuadrícula alineada; integraciones una por fila */
@media (max-width: 480px) {
    .founder-stack-logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .founder-stack-block {
        padding: 16px;
    }
    .founder-stack-logos li {
        font-size: 0.8125rem;
    }
    .founder-stack-block + .founder-stack-block .founder-stack-logos {
        grid-template-columns: 1fr;
    }
}
/* ==== NARAO-FOUNDER-STACK:END ==== */

/* ==== NARAO-PRODUCT-HOW:START ==== */
/* "Cómo funciona" vive ahora en Producto: introducción compacta encima,
   capturas del producto debajo. */
.product-intro {
    padding-bottom: 56px;
}
.product-intro .section-header {
    margin-bottom: 0;
}
.product-screens {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
}
/* Landing: "Ver el producto" queda justo después de Características */
.key-features + .product-link {
    margin-top: -12px;
    padding-top: 0;
    background-color: transparent;
}
.key-features:has(+ .product-link) {
    border-bottom: 0;
}
/* ==== NARAO-PRODUCT-HOW:END ==== */

/* ==== NARAO-FOUNDER-PHOTO:START ==== */
/* Foto del fundador completa (sin recorte), a la altura del texto:
   ocupa todo el ancho de su columna, se alinea arriba con el texto y
   acompaña la lectura (sticky). Tablet: dos columnas; móvil: a todo el ancho. */
.founder-grid {
    align-items: start;
}
.founder-visual {
    position: sticky;
    top: 112px;
}
.founder-image-container {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 825 / 1024;
    margin: 0 0 0 auto;
}
.founder-image-container img {
    object-position: center;
}
.founder-label {
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 10px 14px;
}
.founder-name {
    font-size: 0.95rem;
}
.founder-role {
    font-size: 0.8125rem;
}
@media (min-width: 861px) and (max-width: 1024px) {
    .founder-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
        gap: 40px;
    }
    .founder-text {
        order: 1;
    }
    .founder-visual {
        order: 2;
        top: 96px;
    }
    .founder-image-container {
        max-width: none;
        margin: 0;
    }
}
/* Móvil: "Sobre el fundador" y el título primero, luego la foto y el resto
   del texto (el bloque de texto se "abre" con display: contents). */
@media (max-width: 860px) {
    .founder-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .founder-text {
        display: contents;
    }
    .founder-text > * {
        order: 4;
    }
    .founder-text > .founder-tag {
        order: 1;
        align-self: flex-start;
    }
    .founder-text > .section-title {
        order: 2;
    }
    .founder-visual {
        position: static;
        order: 3;
        align-self: stretch;
        width: 100%;
        margin: 4px 0 28px;
    }
    .founder-text > .btn-linkedin {
        align-self: flex-start;
    }
    .founder-image-container {
        max-width: 420px;
        margin: 0 auto;
    }
}
/* ==== NARAO-FOUNDER-PHOTO:END ==== */

/* ==== NARAO-FOUNDER-LAYOUT:START ==== */
/* Ordenador y tablet: arriba, etiqueta + título + ficha a la izquierda y la
   foto a su altura; debajo, el párrafo, el cierre, las cifras y LinkedIn a
   todo el ancho (sin hueco blanco bajo la foto). El bloque de texto se
   "abre" con display: contents para colocar cada pieza en la rejilla. */
@media (min-width: 861px) {
    .founder-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 64px;
        row-gap: 0;
        align-items: start;
    }
    .founder-text {
        display: contents;
    }
    .founder-text > .founder-tag {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .founder-text > .section-title {
        grid-column: 1;
        grid-row: 2;
    }
    .founder-text > .founder-profile {
        grid-column: 1;
        grid-row: 3;
    }
    .founder-visual {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 3;
        order: 0;
    }
    .founder-image-container {
        max-width: none;
        margin: 0;
    }
    .founder-text > [data-i18n="founder.p1"],
    .founder-text > .founder-closing,
    .founder-text > .founder-stats,
    .founder-text > .btn-linkedin {
        grid-column: 1 / -1;
    }
    .founder-text > [data-i18n="founder.p1"] {
        margin-top: 8px;
    }
    .founder-text > .btn-linkedin {
        justify-self: start;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    .founder-grid {
        grid-template-columns: minmax(0, 1fr) 240px;
        column-gap: 32px;
    }
}
/* La foto se ajusta a la altura exacta de etiqueta + título + ficha (su
   borde inferior coincide con el de la ficha). Si el bloque es más alto que
   la foto, se recortan solo los laterales del fondo; la persona queda entera. */
@media (min-width: 861px) {
    .founder-grid {
        grid-template-columns: minmax(0, 1fr) 316px;
    }
    .founder-visual {
        align-self: stretch;
        margin-bottom: 26px;
    }
    .founder-image-container {
        height: 100%;
        aspect-ratio: auto;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    .founder-grid {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}
/* ==== NARAO-FOUNDER-LAYOUT:END ==== */

/* ==== NARAO-ROI-NET:START ==== */
/* Calculadora: ahorro neto como cifra principal, coste del plan y ROI */
.roi-plan {
    margin: -4px 0 14px;
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.roi-verdict {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: 10px;
    background-color: rgba(34, 197, 94, 0.12);
    color: #bbf7d0;
    font-size: 0.85rem;
    line-height: 1.45;
}
.roi-verdict[hidden] {
    display: none;
}
.roi-dot-cost {
    background-color: rgba(203, 213, 225, 0.55);
}
.roi-breakdown-row.is-total {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.roi-breakdown-row.is-total dt,
.roi-breakdown-row.is-total dd {
    color: #ffffff;
    font-weight: 700;
}
.roi-note {
    margin: 0 0 22px;
    padding-left: 10px;
    border-left: 2px solid rgba(96, 165, 250, 0.6);
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.8125rem;
    line-height: 1.5;
}
@media (min-width: 1101px) {
    .roi-method-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 24px;
    }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .roi-method-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Desglose por componentes y grupos de supuestos */
.roi-breakdown-row.is-sub {
    padding: 6px 0 6px 18px;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.roi-breakdown-row.is-sub dt {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.8125rem;
}
.roi-breakdown-row.is-sub dd {
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.875rem;
    font-weight: 500;
}
.roi-assumptions-group {
    margin: 6px 0 -4px;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Cada casilla alineada abajo con su pareja aunque la etiqueta ocupe más
   líneas; en móvil, una columna para que el número no quede cortado. */
.roi-mini-field {
    display: flex;
    flex-direction: column;
}
.roi-mini-field .roi-number {
    margin-top: auto;
}
@media (max-width: 480px) {
    .roi-assumptions-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
/* iPhone: 16 px mínimo en campos y selectores para evitar el zoom al tocarlos */
@media (max-width: 768px) {
    .roi-card input[type="number"],
    .roi-card select {
        font-size: 16px;
    }
}
/* ==== NARAO-ROI-NET:END ==== */


/* ==== NARAO-HERO-COPY:START ==== */
/* Portada: titular corto en dos líneas (propuesta + "sin sustituir tu ERP"),
   subtítulo con lo que hace el producto y una línea de público objetivo más
   discreta antes de los botones. */
.hero-content h1 {
    font-size: clamp(1.9rem, 2.9vw, 2.5rem);
}
.hero-content h1 {
    text-wrap: balance;
}
.hero-content h1 .hero-title-sub {
    display: block;
}
.hero-content .hero-subtitle {
    margin-bottom: 14px;
}
.hero-audience {
    max-width: 600px;
    margin-bottom: var(--space-sm);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0.9;
}
@media (max-width: 1024px) {
    .hero-audience {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .hero-audience {
        font-size: 0.9375rem;
    }
}
/* Tres productos NARAO bajo la introducción: lista compacta, nombre enlazado
   a su tarjeta (#modulos) y descripción en una o dos líneas. */
.hero-products {
    display: grid;
    gap: 10px;
    max-width: 600px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    text-align: left;
}
.hero-products li {
    padding-left: 14px;
    border-left: 2px solid rgba(29, 78, 216, 0.28);
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.hero-products a {
    color: var(--text-color);
    font-weight: 700;
    text-decoration: none;
}
.hero-products a:hover,
.hero-products a:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hero-products .modules-badge {
    margin-left: 2px;
    vertical-align: 1px;
}
.hero-products span[data-i18n^="hero."] {
    display: block;
}
@media (max-width: 1024px) {
    .hero-products {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .hero-products li {
        font-size: 0.875rem;
    }
}
/* ==== NARAO-HERO-COPY:END ==== */

/* ==== NARAO-PRODUCT-TOUR:START ==== */
/* Producto: recorrido por pantallas reales. Cada bloque alterna texto y
   captura (en marco de ventana); la captura se amplía en un visor a pantalla
   completa (product-tour.js). Índice de secciones arriba. */
.product-tour {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
}
.product-tour .section-header {
    margin-bottom: 28px;
}
.tour-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(29, 78, 216, 0.08);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Índice */
.tour-nav ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 24px;
    padding: 0;
    list-style: none;
}
.tour-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tour-nav a:hover,
.tour-nav a:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.tour-nav-num,
.tour-step-num {
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
    font-weight: 600;
}

/* Bloques */
.tour-block {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
    padding: 64px 0;
    border-top: 1px solid var(--border-color);
    scroll-margin-top: 96px;
}
.tour-nav + .tour-block {
    border-top: 0;
}
.tour-block-reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.tour-block-reverse .tour-text {
    order: 2;
}
.tour-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tour-step-num {
    padding: 2px 7px;
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 6px;
    letter-spacing: 0;
}
.tour-text h3 {
    margin-bottom: 12px;
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.25;
}
.tour-text p {
    margin-bottom: 22px;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
}
.tour-points {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tour-points li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 30px;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.tour-points li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(29, 78, 216, 0.1);
}
.tour-points li::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 7px;
    width: 5px;
    height: 9px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Bloque ancho (cuadro de mando): texto en dos columnas sobre la captura */
.tour-block-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}
.tour-block-wide .tour-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "step points" "title points" "desc points";
    column-gap: 56px;
    align-items: start;
}
.tour-block-wide .tour-step { grid-area: step; justify-self: start; }
.tour-block-wide h3 { grid-area: title; }
.tour-block-wide p { grid-area: desc; margin-bottom: 0; }
.tour-block-wide .tour-points { grid-area: points; align-self: center; }

/* Captura en marco de ventana */
.tour-frame {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--shadow-lg);
}
.tour-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-color);
    background: #f6f7f9;
}
.tour-frame-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9dde4;
}
.tour-shot {
    position: relative;
    display: block;
    cursor: zoom-in;
}
.tour-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.tour-shot:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}
.tour-zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.8);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.tour-shot:hover .tour-zoom-hint,
.tour-shot:focus-visible .tour-zoom-hint {
    opacity: 1;
    transform: none;
}
@media (hover: none) {
    .tour-zoom-hint {
        opacity: 1;
        transform: none;
    }
}

/* Vista de detalle (segunda captura) */
.tour-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tour-detail:hover {
    border-color: rgba(29, 78, 216, 0.45);
    box-shadow: var(--shadow-md);
}
.tour-detail-thumb {
    flex-shrink: 0;
    width: 128px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.tour-detail .tour-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
.tour-detail-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tour-detail-kicker {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tour-detail-text strong {
    color: var(--ink);
    font-size: 0.9375rem;
}
.tour-detail-icon {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.tour-detail:hover .tour-detail-icon {
    color: var(--primary-color);
}

/* Cierre con llamada a la acción */
.tour-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 32px 36px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-light);
}
.tour-cta h3 {
    margin-bottom: 6px;
    font-size: 1.25rem;
}
.tour-cta p {
    color: var(--text-muted);
}
.tour-cta .btn {
    flex-shrink: 0;
}

/* Visor a pantalla completa */
html.tour-lb-open {
    overflow: hidden;
}
.tour-lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(8, 12, 22, 0.97);
    color: #ffffff;
}
.tour-lightbox[open] {
    display: flex;
    flex-direction: column;
    animation: tour-lb-in 0.18s ease-out;
}
.tour-lightbox::backdrop {
    background: rgba(8, 12, 22, 0.6);
}
@keyframes tour-lb-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tour-lb-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
}
.tour-lb-caption {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}
.tour-lb-count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
.tour-lb-stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    padding: 0 20px 28px;
}
.tour-lb-img {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    max-width: min(100%, 1400px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.tour-lb-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.tour-lb-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}
.tour-lb-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .tour-block,
    .tour-block-wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 48px 0;
    }
    .tour-block-reverse .tour-text {
        order: 0;
    }
    .tour-block-wide .tour-text {
        display: block;
    }
    .tour-block-wide p {
        margin-bottom: 22px;
    }
}
@media (max-width: 768px) {
    .tour-nav ol {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 -16px 8px;
        padding: 0 16px 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tour-nav ol::-webkit-scrollbar {
        display: none;
    }
    .tour-block,
    .tour-block-wide {
        gap: 22px;
        padding: 40px 0;
    }
    .tour-text p {
        font-size: 1rem;
    }
    .tour-frame-bar {
        height: 22px;
    }
    .tour-frame-bar span {
        width: 7px;
        height: 7px;
    }
    .tour-detail-thumb {
        width: 96px;
        height: 54px;
    }
    .tour-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .tour-cta .btn {
        width: 100%;
        text-align: center;
    }
    .tour-lb-top {
        padding: 12px 14px;
    }
    .tour-lb-caption {
        font-size: 0.875rem;
    }
    .tour-lb-stage {
        padding: 0 8px 20px;
    }
    .tour-lb-prev,
    .tour-lb-next {
        position: absolute;
        top: 50%;
        z-index: 1;
        width: 40px;
        height: 40px;
        background: rgba(8, 12, 22, 0.7);
        transform: translateY(-50%);
    }
    .tour-lb-prev { left: 12px; }
    .tour-lb-next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-zoom-hint,
    .tour-nav a,
    .tour-detail,
    .tour-detail-icon,
    .tour-lb-btn {
        transition: none;
    }
    .tour-lightbox[open] {
        animation: none;
    }
}
/* ==== NARAO-PRODUCT-TOUR:END ==== */

/* ==== NARAO-PTABS:START ==== */
/* Portada: recorrido por el producto en un visor con pestañas. Lista de
   módulos a la izquierda y captura mediana a la derecha, con altura fija
   para que nada salte al cambiar de pestaña. Móvil: pestañas en fila
   deslizable sobre la captura. */
.ptour {
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.ptour .section-header {
    margin-bottom: 40px;
}
.ptabs {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}
.ptabs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ptab {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ptab:hover {
    background: rgba(255, 255, 255, 0.7);
}
.ptab:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.ptab[aria-selected="true"] {
    border-color: var(--border-color);
    background: #ffffff;
    box-shadow: var(--shadow-md);
}
.ptab-num {
    flex-shrink: 0;
    min-width: 30px;
    padding: 2px 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.ptab[aria-selected="true"] .ptab-num {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #ffffff;
}
.ptab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptab-name {
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}
.ptab-title {
    font-size: 0.8125rem;
    line-height: 1.45;
}
.ptab[aria-selected="true"] .ptab-name {
    color: var(--primary-color);
}
/* Solo la pestaña activa muestra su subtítulo: lista compacta, a la altura de la captura */
.ptabs.is-ready .ptab[aria-selected="false"] .ptab-title {
    display: none;
}
.ptabs.is-ready .ptab[aria-selected="false"] {
    align-items: center;
}

/* Panel: captura con altura fija (proporción 16:9) y texto breve debajo */
.ptabs.is-ready .ppanel[hidden] {
    display: none;
}
.ppanel {
    animation: ptab-in 0.25s ease-out;
}
.ppanel:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 12px;
}
.ptabs:not(.is-ready) .ppanel + .ppanel {
    margin-top: 32px;
}
@keyframes ptab-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.ppanel .tour-frame-bar {
    gap: 6px;
}
.tour-frame-title {
    width: auto !important;
    height: auto !important;
    margin-left: 8px;
    border-radius: 0 !important;
    background: none !important;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}
.ppanel-shot {
    aspect-ratio: 16 / 9;
    background: #ffffff;
}
.ppanel-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}
.ppanel-foot {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
}
.ppanel-foot p {
    flex: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ppanel-foot .tour-detail {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .ptabs {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .ptabs-list {
        flex-direction: row;
        gap: 8px;
        margin: 0 -16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ptabs-list::-webkit-scrollbar {
        display: none;
    }
    .ptab {
        flex-shrink: 0;
        width: auto;
        align-items: center;
        padding: 8px 14px 8px 8px;
        border-color: var(--border-color);
        border-radius: 999px;
        background: #ffffff;
    }
    .ptab[aria-selected="true"] {
        border-color: var(--primary-color);
        box-shadow: none;
    }
    .ptab-num {
        min-width: 26px;
        border-radius: 999px;
    }
    .ptab-title {
        display: none;
    }
    .ptab-name {
        font-size: 0.875rem;
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .ptour .section-header {
        margin-bottom: 28px;
    }
    .ppanel-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ppanel {
        animation: none;
    }
    .ptab,
    .ptab-num {
        transition: none;
    }
}
/* ==== NARAO-PTABS:END ==== */

/* ==== NARAO-SECTION-HEADS:START ==== */
/* Encabezados de sección coherentes: Características, Recorrido y Fundador
   comparten etiqueta superior (misma píldora) y el mismo aire vertical. */
.tour-eyebrow {
    background-color: var(--primary-tint);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
}
.key-features {
    padding: var(--space-xl) 0;
}
/* ==== NARAO-SECTION-HEADS:END ==== */

/* ==== NARAO-ANNOUNCE-TRUST:START ==== */
/* Barra superior: garantía de 30 días + acuerdo de confidencialidad,
   separados por una línea fina; el NDA lleva un escudo como icono. */
.announce-sep {
    width: 1px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.28);
}
.announce-nda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.announce-icon {
    flex-shrink: 0;
    color: var(--blue-300);
}
/* ==== NARAO-ANNOUNCE-TRUST:END ==== */

/* ==== NARAO-ANNOUNCE-ALL:START ==== */
/* La barra de garantía + NDA se ve en todos los tamaños. Escritorio: texto
   completo. Tablet y móvil: versión corta (en móvil, en dos líneas). El menú
   móvil ajusta su altura con --nav-top (script.js). */
.announce-short,
.announce-nda-short {
    display: none;
}
.announce-short {
    align-items: center;
    gap: 6px;
}
@media (max-width: 1199px) {
    .announce-bar {
        display: block;
    }
    .announce-tag,
    .announce-text,
    .announce-long {
        display: none;
    }
    .announce-short {
        display: inline-flex;
    }
    .announce-nda-short {
        display: inline;
    }
    .announce-inner {
        padding-right: 40px;
        padding-left: 40px;
    }
    .announce-close {
        right: 8px;
    }
    /* El menú es fixed dentro de la cabecera (backdrop-filter la convierte en
       su contenedor): top: 80px ya lo deja bajo ella. Solo se ajusta la altura
       para que no se salga de la pantalla cuando la barra está visible. */
    .main-nav {
        height: calc(100vh - var(--nav-top, 80px));
        height: calc(100dvh - var(--nav-top, 80px));
    }
}
@media (max-width: 600px) {
    .announce-inner {
        min-height: 48px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .announce-link {
        flex-direction: column;
        gap: 2px;
        font-size: 0.75rem;
        line-height: 1.4;
        text-align: center;
    }
    .announce-sep {
        display: none;
    }
}
/* ==== NARAO-ANNOUNCE-ALL:END ==== */

/* ==== NARAO-PTABS-NAV:START ==== */
/* Flechas anterior/siguiente para la fila de módulos en tablet y móvil. */
.ptabs-arrow {
    display: none;
}
@media (max-width: 1024px) {
    .ptabs-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .ptabs-nav .ptabs-list {
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 2px 2px 8px;
        scroll-snap-type: x proximity;
    }
    .ptabs-nav .ptab {
        scroll-snap-align: center;
    }
    .ptabs-arrow {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        background: #ffffff;
        color: var(--ink);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }
    .ptabs-arrow:hover:not(:disabled) {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    .ptabs-arrow:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    .ptabs-arrow:disabled {
        opacity: 0.35;
        cursor: default;
        box-shadow: none;
    }
}
@media (max-width: 480px) {
    .ptabs-arrow {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ptabs-arrow {
        transition: none;
    }
}
/* ==== NARAO-PTABS-NAV:END ==== */

/* ==== NARAO-PTOUR-STACK:START ==== */
/* Integraciones disponibles, bajo el recorrido por el producto: misma franja
   que tenía "Sobre el fundador" (NARAO-FOUNDER-STACK), en tarjeta blanca. */
.ptour-stack {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1080px;
    margin: 48px auto 0;
    background-color: #ffffff;
}
@media (max-width: 768px) {
    .ptour-stack {
        margin-top: 36px;
    }
}
/* ==== NARAO-PTOUR-STACK:END ==== */

/* ==== NARAO-HERO-MOCK-PO:START ==== */
/* Tarjeta de la portada centrada en la orden de compra (documento de
   referencia): lote y vencimiento bajo cada producto y, en naranja, lo que
   dicen la factura o el albarán cuando no coincide con la orden. */
.hero-mock-reftag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--primary-tint);
    color: var(--primary-color);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}
.hero-mock-lot {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hero-mock-product > span {
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
}
@media (max-width: 480px) {
    .hero-mock-lot,
    .hero-mock-expected {
        white-space: normal;
        line-height: 1.35;
    }
}
/* ==== NARAO-HERO-MOCK-PO:END ==== */

/* ==== NARAO-CHAT-COMPACT:START ==== */
/* En móvil el menú del chat se compacta para que todas las
   opciones quepan sin desplazarse dentro de la ventana. */
@media (max-width: 768px) {
    .chat-window-body {
        padding: 16px;
    }
    .chat-message {
        margin-bottom: 14px;
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    .chat-quick-actions {
        gap: 6px;
    }
    .chat-quick-btn {
        padding: 8px 12px;
    }
    .chat-quick-icon {
        width: 28px;
        height: 28px;
    }
}
/* ==== NARAO-CHAT-COMPACT:END ==== */

/* ==== NARAO-PRICING-BILLING:START ==== */
/* Planes: selector mensual / anual (−10 %) y países donde trabajamos.
   Sin JavaScript el selector queda oculto y cada plan muestra su
   alternativa anual bajo el precio mensual. */
.billing-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: -8px 0 36px;
}
.billing-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}
.billing-toggle[hidden] {
    display: none;
}
.billing-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.billing-toggle button[aria-pressed="true"] {
    background: var(--ink);
    color: #ffffff;
}
.billing-toggle button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.billing-save {
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 700;
}
.price-annual,
.price-billing-annual {
    display: none;
}
.pricing-grid.is-annual .price-monthly,
.pricing-grid.is-annual .price-billing-monthly {
    display: none;
}
.pricing-grid.is-annual .price-annual {
    display: inline;
}
.pricing-grid.is-annual .price-billing-annual {
    display: block;
}
.price-billing {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.price-billing-annual {
    color: #166534;
    font-weight: 600;
}

.pricing-countries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 28px;
}
.pricing-countries-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pricing-countries ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pricing-countries li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.pricing-countries li.is-soon {
    border-style: dashed;
    color: var(--text-muted);
}
.pricing-soon {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--primary-tint);
    color: var(--primary-color);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
    .billing-toggle button {
        transition: none;
    }
}
/* ==== NARAO-PRICING-BILLING:END ==== */

/* ==== NARAO-PRICING-2PLANS:START ==== */
/* Dos planes (Professional y Business) centrados y algo más anchos; cada
   tarjeta lista todas sus funcionalidades y la ventaja exclusiva de Business
   aparece resaltada. */
.pricing-grid.pricing-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.pricing-features li.is-plus {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--primary-tint);
    color: var(--primary-color);
    font-weight: 600;
}
@media (max-width: 768px) {
    .pricing-grid.pricing-grid-2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 450px;
    }
}
/* ==== NARAO-PRICING-2PLANS:END ==== */

/* ==== NARAO-HERO-COUNTRIES:START ==== */
/* Portada: "Dónde trabajamos" bajo las llamadas a la acción, como señal de
   confianza para visitantes de España y Latinoamérica (mismo estilo que en
   Planes, en versión compacta). */
.pricing-countries.hero-countries {
    justify-content: flex-start;
    gap: 8px 12px;
    margin-top: 22px;
}
.hero-countries ul {
    justify-content: flex-start;
    gap: 6px;
}
.hero-countries li {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
}
.hero-countries .pricing-soon {
    font-size: 0.625rem;
}
@media (max-width: 1024px) {
    .pricing-countries.hero-countries,
    .hero-countries ul {
        justify-content: center;
    }
}
/* ==== NARAO-HERO-COUNTRIES:END ==== */

/* ==== NARAO-ONEPAGE:START ==== */
/* Portada de una sola página: las anclas dejan el título visible bajo la
   cabecera fija; Planes y Preguntas frecuentes se integran con fondo liso. */
.anchor-alias {
    display: block;
    height: 0;
    overflow: hidden;
}
main section[id],
.anchor-alias {
    scroll-margin-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
body[data-i18n-page="home"] .pricing-hero,
body[data-i18n-page="home"] .faq-landing {
    background-color: #ffffff;
    background-image: none;
    border-top: 1px solid var(--border-color);
}
body[data-i18n-page="home"] .pricing-hero .section-header,
body[data-i18n-page="home"] .faq-landing .section-header {
    margin-bottom: 32px;
}
/* ==== NARAO-ONEPAGE:END ==== */


/* ==== NARAO-SCROLL-FIX:START ==== */
/* Desplazamiento y adaptación.
   Causa principal: el menú móvil cerrado se escondía desplazado a la derecha
   (translateX(100%)) dentro de la cabecera, que es su contenedor por el
   backdrop-filter; eso ensanchaba la página al doble y se tapaba con
   overflow-x: hidden en html y body. Con ambos en hidden, el body pasa a ser
   un contenedor con su propio desplazamiento (barra anidada, saltos, la
   cabecera sticky y las anclas fallan en navegadores sin overflow: clip).
   Ahora el menú cerrado no ocupa espacio fuera de la pantalla y la página
   vuelve a usar el desplazamiento nativo del documento. */
body {
    overflow-x: visible;
}
@media (max-width: 1199px) {
    html,
    body {
        width: auto;
        max-width: none;
        overflow-x: visible;
    }
    .main-nav {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        overscroll-behavior: contain;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    }
}

/* Alturas que respetan las barras del navegador móvil y el teclado virtual
   (dvh), con vh como respaldo en navegadores antiguos. */
.chat-window {
    max-height: 70vh;
    max-height: 70dvh;
}
.cookie-panel-content {
    max-height: 85vh;
    max-height: 85dvh;
}
@media (max-width: 768px) {
    .chat-window {
        max-height: 65vh;
        max-height: 65dvh;
    }
}
@media (max-height: 520px) {
    /* Móvil en horizontal: la ventana del chat no tapa toda la pantalla */
    .chat-window {
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
    }
}

/* Zonas con desplazamiento propio: no arrastran la página al llegar al final */
.chat-window-body,
.cookie-panel-content,
.tour-lightbox {
    overscroll-behavior: contain;
}

/* Filas deslizables (módulos del recorrido): barra visible pero discreta */
.ptabs-list,
.tour-nav ol {
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 18, 32, 0.28) transparent;
}
.ptabs-list::-webkit-scrollbar,
.tour-nav ol::-webkit-scrollbar {
    display: block;
    height: 6px;
}
.ptabs-list::-webkit-scrollbar-thumb,
.tour-nav ol::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.28);
}
.ptabs-list::-webkit-scrollbar-track,
.tour-nav ol::-webkit-scrollbar-track {
    background: transparent;
}

/* El botón flotante del chat no tapa el final de la página en móvil */
@media (max-width: 768px) {
    .main-footer {
        padding-bottom: calc(var(--space-sm) + 76px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav,
    .main-nav.active {
        transition: none;
    }
}
/* Reserva el hueco de la barra de desplazamiento: al bloquear el
   desplazamiento (menú móvil, visor de imágenes) la barra desaparece y el
   contenido ya no salta de lado. */
html {
    scrollbar-gutter: stable;
}
/* ==== NARAO-SCROLL-FIX:END ==== */

/* ==== NARAO-BACKTOP-FAQ:START ==== */
/* Botón fijo para volver arriba: discreto, abajo a la izquierda (el chat
   ocupa la derecha); aparece al bajar y sube por encima del aviso de cookies. */
.back-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, color 0.15s ease, border-color 0.15s ease;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s, color 0.15s ease, border-color 0.15s ease;
}
.back-to-top:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}
body.has-cookie-banner .back-to-top {
    bottom: var(--cookie-banner-offset, 24px);
}
@media (max-width: 768px) {
    .back-to-top {
        left: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}
@media print {
    .back-to-top {
        display: none;
    }
}

/* Preguntas frecuentes compactas en la portada: dos columnas en escritorio,
   todas cerradas al cargar y menos relleno. */
.faq-landing .faq-list-compact {
    max-width: 1080px;
    gap: 10px;
}
.faq-landing .faq-list-compact .faq-item summary {
    padding: 16px 20px;
}
.faq-landing .faq-list-compact .faq-item summary h3 {
    font-size: 0.9875rem;
}
.faq-landing .faq-list-compact .faq-icon {
    width: 24px;
    height: 24px;
}
.faq-landing .faq-list-compact .faq-answer {
    padding: 0 20px 18px;
    font-size: 0.9375rem;
}
@media (min-width: 900px) {
    .faq-landing .faq-list-compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 10px 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top.is-visible {
        transition: none;
    }
}
@media (max-width: 768px) {
    .faq-landing .faq-list-compact {
        gap: 8px;
    }
    .faq-landing .faq-list-compact .faq-item summary {
        gap: 12px;
        padding: 12px 16px;
    }
    .faq-landing .faq-list-compact .faq-item summary h3 {
        font-size: 0.9375rem;
        line-height: 1.35;
    }
    .faq-landing .faq-list-compact .faq-answer {
        padding: 0 16px 14px;
    }
}
/* ==== NARAO-BACKTOP-FAQ:END ==== */

/* ==== NARAO-HERO-REFTAG:START ==== */
/* Tarjeta de ejemplo: la etiqueta explicativa ocupa su propia línea. */
.hero-mock-reftag {
    display: block;
    width: fit-content;
    margin: 6px 0 2px;
    letter-spacing: 0.04em;
    white-space: normal;
}
/* ==== NARAO-HERO-REFTAG:END ==== */

/* ==== NARAO-ROI-COMPACT:START ==== */
/* Pie de la ilustración de la portada (fuera de la tarjeta) */
.hero-mock-caption {
    margin: 30px 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
}
/* Metodología de la calculadora plegada: <details> nativo (teclado y lector
   de pantalla anuncian si está abierto o cerrado). */
details.roi-method {
    padding-top: 0;
    padding-bottom: 0;
}
.roi-method-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}
.roi-method-summary::-webkit-details-marker {
    display: none;
}
.roi-method-summary .roi-method-title {
    margin: 0;
}
.roi-method-summary:hover .roi-method-title {
    color: var(--primary-color);
}
.roi-method-summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 6px;
}
.roi-method-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
details.roi-method[open] .roi-method-chevron {
    transform: rotate(180deg);
}
.roi-method-body {
    padding-bottom: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .roi-method-chevron {
        transition: none;
    }
}
/* ==== NARAO-ROI-COMPACT:END ==== */

/* ==== NARAO-ROI-EXTRA:START ==== */
/* Valor adicional no cuantificado, bajo el resultado (tarjeta oscura). */
.roi-extra {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.roi-extra-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
}
.roi-extra-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.roi-extra-list li {
    position: relative;
    padding-left: 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.roi-extra-list li::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 3px;
    width: 4px;
    height: 8px;
    border: solid #93c5fd;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@media (min-width: 1025px) {
    .roi-extra-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }
}
/* ==== NARAO-ROI-EXTRA:END ==== */

/* ==== NARAO-PTABS-AUTOPLAY:START ==== */
/* Avance automático del recorrido: barra de progreso en el módulo activo y
   botón de pausa/reanudar (WCAG 2.2.2). */
.ptab {
    position: relative;
    overflow: hidden;
}
.ptabs.is-playing .ptab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left center;
    animation: ptab-progress 6s linear forwards;
}
@keyframes ptab-progress {
    to { transform: scaleX(1); }
}
.ptabs-autoplay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.ptabs-autoplay:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.ptabs-autoplay:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.ptabs-autoplay .ptabs-icon-play,
.ptabs-autoplay.is-paused .ptabs-icon-pause {
    display: none;
}
.ptabs-autoplay.is-paused .ptabs-icon-play {
    display: inline;
}
@media (max-width: 1024px) {
    .ptabs-nav {
        flex-wrap: wrap;
    }
    .ptabs-autoplay {
        order: 4;
        margin: 2px auto 0;
    }
    .ptabs.is-playing .ptab[aria-selected="true"]::after {
        left: 12px;
        right: 12px;
        bottom: 1px;
        height: 2px;
        border-radius: 2px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ptabs.is-playing .ptab[aria-selected="true"]::after {
        animation: none;
    }
}
/* ==== NARAO-PTABS-AUTOPLAY:END ==== */

/* ==== NARAO-LEGAL-H3:START ==== */
/* Subapartados dentro de una cláusula legal (p. ej. piloto gratuito). */
.legal-content h3 {
    font-size: 1.125rem;
    margin-top: 24px;
    margin-bottom: 8px;
}
/* ==== NARAO-LEGAL-H3:END ==== */

/* ==== NARAO-TRIAL-DARK:START ==== */
/* Piloto gratis sobre fondo oscuro (mismo tratamiento que «Beneficios»). */
.pricing-trial.bg-dark .pricing-trial-text {
    color: rgba(226, 232, 240, 0.78);
}
.pricing-trial.bg-dark .btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}
.pricing-trial.bg-dark .btn-outline:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--dark);
}
.pricing-trial.bg-dark .btn-outline:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
/* ==== NARAO-TRIAL-DARK:END ==== */

/* ==== NARAO-KF-DARK:START ==== */
/* Características sobre fondo oscuro (mismo tratamiento que «Beneficios»). */
.key-features.bg-dark .tour-eyebrow {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
}
.key-features.bg-dark .section-description,
.key-features.bg-dark .key-feature-item p {
    color: rgba(226, 232, 240, 0.72);
}
.key-features.bg-dark .icon-wrap {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
}
/* Al pasar el ratón: panel azul translúcido (no blanco), borde y brillo azules;
   el texto sigue claro y legible. kf-dark-hover */
.key-features.bg-dark .key-feature-item:hover {
    background-color: rgba(96, 165, 250, 0.07);
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.key-features.bg-dark .key-feature-item::before {
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(59, 130, 246, 0.18), transparent 70%);
}
.key-features.bg-dark .key-feature-item:hover .icon-wrap {
    background-color: var(--blue-500);
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.75);
}
.key-features.bg-dark .key-feature-item:hover p {
    color: rgba(226, 232, 240, 0.88);
}
/* ==== NARAO-KF-DARK:END ==== */

/* ==== NARAO-GRID-ALL:START ==== */
/* Retícula en todas las secciones de la portada. Mismo tamaño y tono que la
   portada y la calculadora; cada sección la desvanece hacia su color de fondo
   para que las uniones entre secciones no se noten. */
#recorrido {
    background-color: #f8fafc;
    background-image:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.7) 55%, #f8fafc 88%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}
#planes,
#preguntas-frecuentes {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 55%, #ffffff 85%),
        radial-gradient(ellipse 45% 35% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}
#sobre-el-fundador {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, #ffffff 82%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
}
/* ==== NARAO-GRID-ALL:END ==== */

/* ==== NARAO-PTABS-DARK:START ==== */
/* Recorrido: el visor completo (módulos + captura + descripción) va en un
   panel oscuro con el azul, la retícula y el brillo de las secciones oscuras.
   La captura conserva su marco claro y destaca como la pantalla del panel. */
.ptabs {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    background-color: var(--dark);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%),
        var(--grid-lines-dark);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    background-position: center top;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.08), 0 28px 56px -24px rgba(11, 18, 32, 0.45);
    color: rgba(226, 232, 240, 0.72);
}
/* Módulos */
.ptabs .ptab {
    color: rgba(226, 232, 240, 0.6);
}
.ptabs .ptab:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ptabs .ptab[aria-selected="true"] {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.1);
    box-shadow: none;
}
.ptabs .ptab-name {
    color: rgba(255, 255, 255, 0.86);
}
.ptabs .ptab[aria-selected="true"] .ptab-name {
    color: #ffffff;
}
.ptabs .ptab-title {
    color: rgba(226, 232, 240, 0.72);
}
.ptabs .ptab-num {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(226, 232, 240, 0.7);
}
.ptabs .ptab[aria-selected="true"] .ptab-num {
    border-color: var(--blue-500);
    background: var(--blue-500);
    color: #ffffff;
}
.ptabs .ptab:focus-visible,
.ptabs .ppanel:focus-visible,
.ptabs .ptabs-arrow:focus-visible,
.ptabs .ptabs-autoplay:focus-visible {
    outline-color: var(--blue-300);
}
.ptabs.is-playing .ptab[aria-selected="true"]::after {
    background: var(--blue-400);
}
/* Botón pausar / reproducir */
.ptabs .ptabs-autoplay {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.78);
}
.ptabs .ptabs-autoplay:hover {
    border-color: var(--blue-300);
    color: #ffffff;
}
/* Descripción bajo la captura */
.ptabs .ppanel-foot p {
    color: rgba(226, 232, 240, 0.78);
}
/* Marco de la captura: igual que antes, con un contorno que lo separa del fondo */
.ptabs .tour-frame {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
}
@media (max-width: 1024px) {
    .ptabs {
        padding: 20px;
    }
    .ptabs .ptab {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
    }
    .ptabs .ptab[aria-selected="true"] {
        border-color: var(--blue-400);
        background: rgba(96, 165, 250, 0.14);
    }
    .ptabs .ptabs-arrow {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        box-shadow: none;
    }
    .ptabs .ptabs-arrow:hover:not(:disabled) {
        border-color: var(--blue-300);
        color: var(--blue-300);
    }
    /* Flechas + módulos ocupan toda la fila; «Pausar» baja a la siguiente */
    .ptabs .ptabs-nav .ptabs-list {
        flex-basis: calc(100% - 100px);
    }
}
@media (max-width: 600px) {
    .ptabs {
        margin-right: -4px;
        margin-left: -4px;
        padding: 14px;
        border-radius: 16px;
    }
}
/* ==== NARAO-PTABS-DARK:END ==== */

/* ==== NARAO-FAQ-COMPACT:START ==== */
/* Preguntas frecuentes compactas. Escritorio: dos columnas de filas bajas.
   Tablet y móvil: una sola tarjeta con separadores finos en lugar de 14
   tarjetas sueltas, que ocupa mucha menos altura. */
#preguntas-frecuentes .section-header {
    margin-bottom: 24px;
}
#preguntas-frecuentes .section-description {
    margin-bottom: 0;
}
#preguntas-frecuentes .faq-list-compact {
    gap: 8px 14px;
}
#preguntas-frecuentes .faq-item summary {
    gap: 12px;
    padding: 11px 16px;
}
#preguntas-frecuentes .faq-item summary h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}
#preguntas-frecuentes .faq-item .faq-icon {
    width: 22px;
    height: 22px;
}
#preguntas-frecuentes .faq-answer {
    padding: 0 16px 14px;
    font-size: 0.9375rem;
}
#preguntas-frecuentes .faq-contact-note {
    margin-top: 24px;
    font-size: 0.9375rem;
}
@media (max-width: 768px) {
    #preguntas-frecuentes .faq-list-compact {
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: #ffffff;
    }
    #preguntas-frecuentes .faq-list-compact .faq-item {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    #preguntas-frecuentes .faq-list-compact .faq-item + .faq-item {
        border-top: 1px solid var(--border-color);
    }
    #preguntas-frecuentes .faq-item summary {
        padding: 10px 14px;
    }
    #preguntas-frecuentes .faq-item summary h3 {
        font-size: 0.875rem;
    }
    #preguntas-frecuentes .faq-answer {
        padding: 0 14px 12px;
        font-size: 0.875rem;
    }
    #preguntas-frecuentes .faq-contact-note {
        margin-top: 18px;
        font-size: 0.875rem;
    }
}
/* ==== NARAO-FAQ-COMPACT:END ==== */

/* ==== NARAO-FAQ-MORE:START ==== */
/* Móvil: lista recortada a seis preguntas con botón para ver el resto. */
.faq-more {
    display: none;
}
@media (max-width: 768px) {
    #preguntas-frecuentes .faq-list-compact.is-collapsed .faq-item:nth-child(n+7) {
        display: none;
    }
    #preguntas-frecuentes .faq-list-compact.is-collapsed + .faq-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 14px auto 0;
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: #ffffff;
        color: var(--primary-color);
        font: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }
    #preguntas-frecuentes .faq-more::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-top: -3px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }
    #preguntas-frecuentes .faq-more:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
}
/* ==== NARAO-FAQ-MORE:END ==== */

/* ==== NARAO-TRIAL-TITLE-MOBILE:START ==== */
/* Móvil: el título del piloto cabe en una línea. El tamaño sigue al ancho de
   pantalla (la versión más larga, en inglés, ocupa ~18,8 veces el tamaño de
   letra) y nunca supera el tamaño de escritorio. */
@media (max-width: 600px) {
    .pricing-trial-title {
        font-size: min(1.5rem, calc(5.1vw - 2px));
        letter-spacing: -0.01em;
    }
}
/* ==== NARAO-TRIAL-TITLE-MOBILE:END ==== */

/* ==== NARAO-GRID-VISIBLE:START ==== */
/* Retícula más presente pero discreta: líneas un poco más marcadas (claro
   0,075 / oscuro 0,055) y fundidos que ya no la tapan del todo, de modo que
   los cuadros se leen en toda la sección y no solo arriba. */
:root {
    --grid-line: rgba(11, 18, 32, 0.075);
    --grid-line-dark: rgba(255, 255, 255, 0.055);
}
.hero {
    background-image:
        radial-gradient(ellipse 95% 90% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(ellipse 45% 40% at 85% 10%, rgba(29, 78, 216, 0.08) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
#recorrido {
    background-image:
        radial-gradient(ellipse 95% 90% at 50% 0%, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.35) 60%, rgba(248, 250, 252, 0.85) 100%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
.roi {
    background-image:
        radial-gradient(ellipse 85% 80% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
#planes,
#preguntas-frecuentes {
    background-image:
        radial-gradient(ellipse 95% 90% at 50% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(ellipse 45% 35% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
#sobre-el-fundador {
    background-image:
        radial-gradient(ellipse 85% 80% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
.demo-contact {
    background-image:
        radial-gradient(ellipse 85% 85% at 50% 45%, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.35) 60%, rgba(248, 250, 252, 0.85) 100%),
        radial-gradient(ellipse 50% 60% at 50% 0%, rgba(29, 78, 216, 0.06) 0%, rgba(29, 78, 216, 0) 70%),
        var(--grid-lines);
    background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
/* ==== NARAO-GRID-VISIBLE:END ==== */

/* ==== NARAO-HELP-WIDGET:START ==== */
/* Ayuda y contacto: botón flotante compacto en azul corporativo con icono de
   conversación. Escritorio: icono + «¿Necesitas ayuda?». Móvil: solo icono
   (el nombre accesible es «Ayuda y contacto»). */
.chat-toggle {
    gap: 10px;
    height: 46px;
    padding: 0 18px 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 10px 24px -10px rgba(29, 78, 216, 0.55), 0 2px 6px rgba(11, 18, 32, 0.12);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-toggle:hover {
    background: var(--primary-dark);
    box-shadow: 0 12px 28px -10px rgba(29, 78, 216, 0.65), 0 2px 6px rgba(11, 18, 32, 0.14);
}
.chat-toggle:focus-visible {
    outline: 3px solid var(--blue-300);
    outline-offset: 3px;
}
.chat-toggle-icon {
    display: block;
    flex-shrink: 0;
}
/* Cabecera del panel: el mismo icono en una pastilla azul */
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.6);
}
.chat-avatar-icon {
    display: block;
}
.chat-close:focus-visible,
.chat-quick-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .chat-toggle {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .chat-toggle-text {
        display: none;
    }
    .chat-toggle-icon {
        width: 22px;
        height: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .chat-toggle {
        transition: none;
    }
}
/* ==== NARAO-HELP-WIDGET:END ==== */

/* ==== NARAO-PILOT-PAGE:START ==== */
/* Solicitud de piloto guiado, dentro de la sección «Piloto» de la portada
   (franja oscura). Reutiliza los tokens de la portada: tarjeta de la
   calculadora (borde, radio 20, sombra), campos con el mismo anillo que sus
   entradas y píldoras para las opciones. */
.pl-head {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}
.pricing-trial.bg-dark .tour-eyebrow {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
}
.pl-title {
    margin: 16px 0 12px;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.pl-lead {
    margin: 0 auto;
    color: rgba(226, 232, 240, 0.78);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Tarjeta del formulario (blanca sobre la franja oscura) */
.pl-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 28px 56px -24px rgba(0, 0, 0, 0.55);
    color: var(--text-color);
    text-align: left;
}
.bg-dark .pl-card h3 {
    color: var(--ink);
}
.pl-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pl-required-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.pl-req {
    color: #b42318;
    font-weight: 700;
}
.pl-opt {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.pl-group-title {
    margin: 4px 0 -8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pl-form > .pl-required-note + .pl-group-title {
    padding-top: 0;
    border-top: 0;
}
.pl-group-help {
    margin-top: -10px !important;
}
.pl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

/* Campos */
.pl-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.pl-field > label,
.pl-subfield > label,
.pl-fieldset legend {
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.pl-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
.pl-fieldset legend {
    margin-bottom: 8px;
    padding: 0;
}
.pl-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.pl-fieldset .pl-help {
    margin: -4px 0 4px;
}
.pl-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-xs);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.pl-input::placeholder {
    color: #8a93a3;
}
.pl-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary-color), var(--focus-ring);
}
.pl-input:disabled {
    background-color: var(--bg-light);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.pl-input:disabled::placeholder {
    color: #b3bac6;
}
.pl-textarea {
    height: auto;
    min-height: 76px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
.pl-field.is-invalid .pl-input {
    box-shadow: inset 0 0 0 1px #d92d20, 0 0 0 3px rgba(217, 45, 32, 0.12);
}
.pl-error {
    margin: 0;
    color: #b42318;
    font-size: 0.8125rem;
    font-weight: 500;
}
.pl-fieldset.is-invalid .pl-chip span {
    box-shadow: inset 0 0 0 1px #f0a39b;
}
.pl-subfield {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-width: 420px;
}
.pl-subfield[hidden] {
    display: none;
}

/* Opciones en píldora (radio y casillas) */
.pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pl-chips-inline {
    margin-top: 2px;
}
.pl-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.pl-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pl-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.pl-chip:hover span {
    box-shadow: inset 0 0 0 1px var(--primary-color);
}
.pl-chip input:checked + span {
    background-color: var(--primary-tint);
    box-shadow: inset 0 0 0 1.5px var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}
.pl-chip input[type="checkbox"]:checked + span::before,
.pl-chip input[type="radio"]:checked + span::before {
    content: "";
    width: 9px;
    height: 5px;
    margin: -3px 2px 0 0;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
.pl-chip input:focus-visible + span {
    box-shadow: inset 0 0 0 1.5px var(--primary-color), var(--focus-ring);
}

/* Aclaraciones previas al envío */
.pl-assure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 6px 0 0;
    padding: 16px 18px;
    list-style: none;
    border-radius: 14px;
    background-color: var(--bg-light);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.pl-assure li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-color);
    font-size: 0.875rem;
    line-height: 1.5;
}
.pl-assure svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary-color);
}
.pl-assure .pl-assure-warn svg {
    color: #b54708;
}
.pl-privacy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}
.pl-privacy a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Estado del envío (error o formulario aún no activo) */
.pl-status {
    padding: 12px 14px;
    border-radius: 10px;
    background-color: #fffaeb;
    box-shadow: inset 0 0 0 1px #fedf89;
    color: #7a2e0e;
    font-size: 0.875rem;
    line-height: 1.5;
}
.pl-status[hidden] {
    display: none;
}
.pl-submit {
    align-self: center;
}
.pl-submit:disabled {
    cursor: progress;
    opacity: 0.75;
}

/* Campo trampa para robots: fuera de la vista y del orden de tabulación */
.pl-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Confirmación (solo tras una respuesta correcta del receptor) */
.pl-success {
    padding: 16px 8px;
    text-align: center;
}
.pl-success[hidden] {
    display: none;
}
.pl-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: var(--primary-tint);
    color: var(--primary-color);
}
.pl-success h3 {
    margin-bottom: 8px;
    font-size: 1.375rem;
}
.pl-success h3:focus {
    outline: none;
}
.pl-success p {
    max-width: 480px;
    margin: 0 auto;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .pl-head {
        margin-bottom: 24px;
    }
    .pl-title {
        font-size: 1.625rem;
    }
    .pl-lead {
        font-size: 1rem;
    }
    .pl-card {
        padding: 20px 16px;
        border-radius: 16px;
    }
    .pl-grid,
    .pl-assure {
        grid-template-columns: minmax(0, 1fr);
    }
    .pl-submit {
        align-self: stretch;
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pl-input,
    .pl-chip span {
        transition: none;
    }
}
/* Desplegables de país y región con la misma flecha que la calculadora */
.pl-select {
    position: relative;
    display: block;
}
.pl-select[hidden] {
    display: none;
}
.pl-select select.pl-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
}
.pl-select select.pl-input:disabled {
    cursor: not-allowed;
}
.pl-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.pl-field.is-invalid select.pl-input {
    box-shadow: inset 0 0 0 1px #d92d20, 0 0 0 3px rgba(217, 45, 32, 0.12);
}
/* Teléfono: prefijo internacional + número en la misma fila */
.pl-phone-row {
    display: flex;
    gap: 8px;
}
.pl-select-prefix {
    flex: 0 0 112px;
}
.pl-phone-row .pl-input[type="tel"] {
    flex: 1;
    min-width: 0;
}
/* ==== NARAO-PILOT-PAGE:END ==== */

/* ==== NARAO-MOBILE-MENU-CENTER:START ==== */
/* Menú móvil y de tablet: todos los enlaces centrados (sustituye la
   alineación a la izquierda que tenía en móvil). */
@media (max-width: 1024px) {
    .main-nav .nav-links {
        align-items: center;
        text-align: center;
    }
    .main-nav .nav-links > li {
        justify-content: center;
        width: 100%;
        text-align: center;
    }
    .main-nav .nav-links > li > a {
        text-align: center;
    }
    .main-nav .nav-dropdown,
    .main-nav .nav-dropdown-menu {
        align-items: center;
    }
    .main-nav .nav-links .nav-dropdown-item {
        text-align: center;
    }
}
/* ==== NARAO-MOBILE-MENU-CENTER:END ==== */

/* ==== NARAO-FOUNDER-VIDEO:START ==== */
/* Vídeo del fundador antes del recorrido: fondo blanco con la retícula de la
   portada y el vídeo en una tarjeta 16:9 con el radio y la sombra de la
   calculadora. No se reproduce solo; subtítulos según el idioma. */
.fv-frame {
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--dark);
    box-shadow: var(--shadow-lg);
}
.fv-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--dark);
}
.fv-frame {
    position: relative;
}
/* Tamaño ligado al ancho del vídeo (unidades de contenedor): ~2 % del ancho
   para la línea principal; el texto fluye en líneas largas (sin los saltos del
   SRT) para que cada idioma ocupe normalmente una sola línea. */
.fv-frame {
    container-type: inline-size;
}
.fv-cue {
    position: absolute;
    bottom: 11%;
    left: 50%;
    width: max-content;
    max-width: 86%;
    padding: 0.3em 0.7em;
    border-radius: 6px;
    background-color: rgba(11, 18, 32, 0.72);
    color: #ffffff;
    font-size: 13px;
    font-size: clamp(12px, 2.35cqw, 17px);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    transform: translateX(-50%);
    pointer-events: none;
}
.fv-cue.is-empty,
.fv-cue:empty {
    display: none;
}
.fv-cue-main,
.fv-cue-sub {
    display: block;
}
.fv-cue-sub {
    margin-top: 1px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.8em;
    font-style: italic;
    font-weight: 400;
}
.fv-cue-sub:empty {
    display: none;
}
@media (max-width: 768px) {
    .fv-frame {
        border-radius: 14px;
    }
}
/* Móvil: subtítulos sobre la imagen, compactos y abajo (sin franja que reste
   espacio al vídeo). Solo el idioma de la página, para no tapar media imagen;
   en pausa se ocultan para no chocar con los controles nativos. */
@media (max-width: 600px) {
    .fv-cue {
        bottom: 7%;
        max-width: 92%;
        padding: 0.25em 0.6em;
        border-radius: 5px;
        font-size: 12px;
        line-height: 1.3;
        overflow-wrap: anywhere;
        transition: bottom 0.2s ease;
    }
    .fv-cue.is-ui {
        bottom: 34%;
    }
    .fv-cue-sub,
    .fv-cue.is-paused {
        display: none;
    }
}
/* Tapa: foto realzada, degradado inferior, botón de reproducir y nombre */
.fv-cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: var(--dark);
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}
.fv-cover[hidden] {
    display: none;
}
.fv-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.fv-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(11, 18, 32, 0.72) 0%, rgba(11, 18, 32, 0.15) 42%, rgba(11, 18, 32, 0) 60%),
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.18) 100%);
    pointer-events: none;
}
.fv-cover-bar {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.fv-cover-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding-left: 3px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--primary-color);
    box-shadow: 0 10px 24px -8px rgba(11, 18, 32, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.16);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.fv-cover-icon svg {
    width: 24px;
    height: 24px;
}
.fv-cover-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fv-cover-name strong {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fv-cover-name span {
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.8125rem;
    font-weight: 500;
}
.fv-cover-label {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: rgba(11, 18, 32, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.fv-cover:hover .fv-cover-icon {
    background-color: #ffffff;
    transform: scale(1.06);
}
.fv-cover:hover .fv-cover-img {
    transform: scale(1.02);
}
.fv-cover:focus-visible {
    outline: 3px solid var(--blue-300);
    outline-offset: -3px;
}
@media (max-width: 600px) {
    .fv-cover-bar {
        right: 12px;
        bottom: 12px;
        left: 12px;
        gap: 10px;
    }
    .fv-cover-icon {
        width: 46px;
        height: 46px;
    }
    .fv-cover-icon svg {
        width: 20px;
        height: 20px;
    }
    .fv-cover-name strong {
        font-size: 0.9375rem;
    }
    .fv-cover-name span {
        font-size: 0.75rem;
    }
    .fv-cover-label {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fv-cover-img,
    .fv-cover-icon {
        transition: none;
    }
}
/* Integrado en «Sobre el fundador»: introducción en dos columnas (texto y
   vídeo) sobre la trayectoria, separada por una línea fina. */
.founder-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--border-color);
}
.founder-intro .fv-frame {
    max-width: none;
    margin: 0;
}
.founder-intro-title {
    margin: 14px 0 12px;
    color: var(--ink);
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.founder-intro-text p {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.founder-intro-text .founder-closing {
    margin-bottom: 0;
    padding-left: 14px;
    border-left: 3px solid var(--primary-color);
    color: var(--ink);
    font-weight: 600;
}
@media (max-width: 900px) {
    .founder-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-bottom: 40px;
        padding-bottom: 40px;
    }
    .founder-intro-title {
        font-size: 1.5rem;
    }
}
/* Rótulo con nombre y cargo (arriba a la izquierda, para no coincidir con los
   subtítulos); entra y sale con un fundido suave. Tamaño ligado al vídeo. */
.fv-lower {
    position: absolute;
    top: 6%;
    left: 4%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    max-width: 70%;
    padding: 0.55em 0.9em 0.55em 0.8em;
    border-left: 3px solid var(--blue-400);
    border-radius: 6px;
    background-color: rgba(11, 18, 32, 0.72);
    color: #ffffff;
    font-size: 13px;
    font-size: clamp(11px, 2.1cqw, 16px);
    line-height: 1.25;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.fv-lower.is-visible {
    opacity: 1;
    transform: none;
}
.fv-lower strong {
    font-weight: 700;
    letter-spacing: -0.005em;
}
.fv-lower span {
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.82em;
    font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
    .fv-lower {
        transform: none;
        transition: none;
    }
}
/* ==== NARAO-FOUNDER-VIDEO:END ==== */

/* ==== NARAO-SECTORS:START ==== */
/* «Para quién es»: tres tarjetas claras sobre la retícula de la portada, con el
   mismo azul, radios y sombras que el resto de secciones claras. */
.sectors {
    border-top: 1px solid var(--border-color);
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 85% 80% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
.sectors .section-header {
    margin-bottom: 32px;
}
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.sectors-card {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: var(--shadow-sm);
}
.sectors-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(29, 78, 216, 0.08);
    color: var(--primary-color);
}
.sectors-card h3 {
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}
.sectors-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.sectors-cta {
    margin: 28px 0 0;
    text-align: center;
}
.sectors-cta a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 900px) {
    .sectors-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin: 0 auto;
    }
}
/* ==== NARAO-SECTORS:END ==== */

/* ==== NARAO-MODULES:START ==== */
/* Menú «Producto» en dos grupos (Productos NARAO | Dentro de NARAO Match) y
   bloque con los tres productos: Match (con Scan), Strategy (con Prospect) y
   Source. Mismo lenguaje visual: blanco, retícula, azul de Match, radios y
   sombras existentes. */
.nav-dropdown-title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.nav-badge,
.modules-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(11, 18, 32, 0.06);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}
.nav-dropdown-group-title {
    display: block;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Escritorio (≥1200 px, mismo umbral que script.js): panel de dos columnas */
@media (min-width: 1200px) {
    .nav-dropdown-menu--grouped {
        left: -12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        width: 640px;
        padding: 12px;
        transform: translate(0, 6px);
    }
    .nav-dropdown.open .nav-dropdown-menu--grouped {
        transform: translate(0, 0);
    }
    .nav-dropdown-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .nav-dropdown-group + .nav-dropdown-group {
        padding-left: 8px;
        border-left: 1px solid var(--border-color);
    }
    .nav-dropdown-group-title {
        padding: 6px 12px 6px;
    }
    .nav-links .nav-dropdown-item:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
    }
}
/* Menú hamburguesa (<1200 px): grupo abierto, más compacto, con subtítulos */
@media (max-width: 1199px) {
    .nav-dropdown-menu--grouped {
        gap: 22px;
    }
    .nav-dropdown-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
    }
    .nav-dropdown-group + .nav-dropdown-group {
        padding-top: 22px;
        border-top: 1px solid var(--border-color);
    }
    .nav-dropdown-menu--grouped .nav-dropdown-title {
        font-size: 1.0625rem;
    }
    .nav-dropdown-menu--grouped .nav-dropdown-title-row {
        justify-content: center;
    }
}
/* Etiqueta de NARAO Scan en la tarjeta «Captura móvil de albaranes» (fondo oscuro) */
.kf-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.75rem;
    font-weight: 600;
}
#scan,
.modules-card {
    scroll-margin-top: 104px;
}
/* Bloque de módulos */
.modules {
    border-top: 1px solid var(--border-color);
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 85% 80% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.85) 100%),
        var(--grid-lines);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
.modules .section-header {
    margin-bottom: 32px;
}
.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.modules-card {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: var(--shadow-sm);
}
.modules-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.modules-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(29, 78, 216, 0.08);
    color: var(--primary-color);
}
.modules-card h3 {
    margin-bottom: 6px;
    color: var(--text-color);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}
.modules-card .modules-lead {
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}
.modules-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
/* Tarjetas de los tres productos: recorrido de Strategy, notas y enlace al pie */
.modules-card {
    display: flex;
    flex-direction: column;
}
.modules-card .modules-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.modules-steps {
    margin: 10px 0 0;
    padding-left: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.modules-steps li + li {
    margin-top: 4px;
}
.modules-steps .modules-badge {
    margin-left: 4px;
    vertical-align: 1px;
}
.modules-link {
    margin-top: auto;
    padding-top: 14px;
    color: var(--primary-color);
    font-size: 0.9375rem;
    font-weight: 600;
}
.modules-link:hover,
.modules-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
#prospect {
    scroll-margin-top: 104px;
}
.modules-cta {
    margin: 28px 0 0;
    text-align: center;
}
.modules-cta a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 900px) {
    .modules-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin: 0 auto;
    }
}
/* ==== NARAO-MODULES:END ==== */