/* Arion Corporativo — Landing
   Paleta y tipografía oficiales (Manual de Identidad ARION Corporativo):
   Cerulean #007295, Prussian Blue #003347, Indigo Dye #20486B,
   Timberwolf #CCCDC5, Raisin Black #272727. Syne (títulos) + Inter (texto). */

:root {
    --arion-cerulean: #007295;
    --arion-prussian: #003347;
    --arion-indigo: #20486B;
    --arion-timberwolf: #CCCDC5;
    --arion-black: #272727;
    --arion-bg: #F7F8F7;
    --arion-white: #FFFFFF;
    --arion-radius: 8px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--arion-black);
    background: var(--arion-white);
    margin: 0;
    line-height: 1.65;
}

/* El header es position:fixed (76px) — sin esto, saltar a un ancla
   (clic en el menú, o entrar directo con #hash en la URL) deja el
   título de la sección tapado detrás del header. */
#home, #necesidades, #modelo, #modulos, #conexiones, #construye, #implementacion,
#personalizacion, #precios, #demo, #faq, #contacto {
    scroll-margin-top: 92px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
    color: var(--arion-prussian);
    font-weight: 700;
    margin: 0 0 16px;
}

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

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Esta página no carga Bootstrap (solo resources/css/app.css, que no lo incluye) —
   utilidades responsive equivalentes para las clases d-* usadas en el markup. */
.d-none {
    display: none !important;
}

@media (min-width: 768px) {
    .d-md-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 992px) {
    .d-lg-block {
        display: block !important;
    }
}

/* ── Botones ─────────────────────────────────────────── */
.arion-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--arion-radius);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

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

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

.arion-btn-outline {
    border-color: var(--arion-white);
    color: var(--arion-white);
}

.arion-btn-outline:hover {
    background: var(--arion-white);
    color: var(--arion-prussian);
}

/* ── Header ──────────────────────────────────────────── */
.arion-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 51, 71, 0.96);
    backdrop-filter: blur(6px);
}

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

.arion-header img {
    height: 36px;
}

.arion-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.arion-nav a {
    color: var(--arion-timberwolf);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.arion-nav a:hover {
    color: var(--arion-white);
}

.has-mega {
    position: relative;
}

.arion-mega {
    display: none;
    position: absolute;
    top: 36px;
    left: -20px;
    background: var(--arion-white);
    border-radius: 10px;
    box-shadow: 0 20px 44px rgba(0, 20, 30, 0.22);
    padding: 12px;
    width: 460px;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.has-mega:hover .arion-mega {
    display: grid;
}

.arion-mega-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--arion-black) !important;
    font-size: 0.88rem;
    font-weight: 500;
}

.arion-mega-item:hover {
    background: var(--arion-bg);
}

.arion-mega-item i {
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

.arion-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--arion-white);
    font-size: 1.5rem;
}

/* ── Hero ────────────────────────────────────────────── */
/* El inicio va sobre la misma foto del sistema que el modelo modular
   (usuario, 2026-09-22). Los degradados de marca se quedan ENCIMA de la
   foto: son los que sostienen el contraste del título y del tablero. La
   ruta llega como variable desde el HTML, para que la arme asset(). */
.arion-hero {
    background: linear-gradient(160deg, var(--arion-prussian) 0%, var(--arion-indigo) 100%);
    padding: 190px 0 130px;
    color: var(--arion-white);
    position: relative;
    overflow: hidden;
}

/* Patrón de puntos elegante, sutil */
.arion-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
    pointer-events: none;
}

.arion-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    will-change: transform;
}

.arion-hero-blob.blob-1 {
    width: 480px;
    height: 480px;
    background: var(--arion-cerulean);
    opacity: 0.35;
    top: -180px;
    right: -120px;
}

.arion-hero-blob.blob-2 {
    width: 320px;
    height: 320px;
    background: var(--arion-timberwolf);
    opacity: 0.12;
    bottom: -140px;
    left: -80px;
}

/* Partículas flotantes */
.arion-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: arionFloat 7s ease-in-out infinite;
}

@keyframes arionFloat {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.35; }
    50% { transform: translateY(-24px) translateX(8px); opacity: 0.8; }
}

.arion-hero .container {
    position: relative;
    z-index: 1;
}

.arion-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.arion-eyebrow {
    display: inline-block;
    color: var(--arion-timberwolf);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Badge/pill llamativo arriba del titular */
.arion-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--arion-white);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 24px;
}

.arion-badge-light {
    background: rgba(0, 114, 149, 0.08);
    border: 1px solid rgba(0, 114, 149, 0.2);
    color: var(--arion-cerulean);
}

.arion-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
}

.arion-hero h1 {
    color: var(--arion-white);
    font-size: 3.6rem;
    line-height: 1.08;
    margin-bottom: 22px;
    letter-spacing: -0.02em;
}

.arion-hero h1 .accent {
    color: #5FC3E4;
}

.arion-hero p {
    color: #D7DEE2;
    font-size: 1.18rem;
    max-width: 480px;
    margin-bottom: 36px;
}

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

.arion-btn-lg {
    padding: 17px 38px;
    font-size: 1.02rem;
}

/* Insignia flotante sobre el mockup */
.arion-float-badge {
    position: absolute;
    background: var(--arion-white);
    color: var(--arion-prussian);
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.arion-float-badge i {
    color: #22C55E;
    font-size: 1.1rem;
}

.arion-float-badge.is-top {
    top: -18px;
    right: 24px;
}

.arion-float-badge.is-bottom {
    bottom: -18px;
    left: 24px;
}

.arion-hero-visual-wrap {
    position: relative;
    perspective: 1000px;
}

/* ── Mockup tipo navegador (placeholder para capturas reales) ── */
.arion-mockup {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
}

.arion-mockup-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}

.arion-mockup-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.arion-mockup-screen {
    background: var(--arion-white);
    border-radius: 8px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    overflow: hidden;
}

.arion-mockup-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ── Barra de datos reales ────────────────────────────── */
.arion-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

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

.arion-stat i {
    font-size: 1.4rem;
    color: var(--arion-cerulean-light, #5FC3E4);
    margin-bottom: 8px;
    display: block;
}

.arion-stat strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    color: var(--arion-white);
}

.arion-stat span {
    font-size: 0.82rem;
    color: #B9C6CC;
}

/* ── Panel con ícono (por qué elegir Arion) ───────────── */
.arion-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(0, 114, 149, 0.1);
    color: var(--arion-cerulean);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.arion-benefit-mockup {
    background: var(--arion-white);
    border: 1px solid #E4E7E6;
    border-radius: 14px;
    padding: 10px;
    margin-top: 24px;
    box-shadow: 0 16px 40px rgba(0, 51, 71, 0.08);
}

.arion-benefit-mockup .arion-mockup-bar span {
    background: #E4E7E6;
}

.arion-benefit-mockup .arion-mockup-screen {
    background: var(--arion-bg);
}

/* ── Secciones genéricas ─────────────────────────────── */
.arion-section {
    padding: 100px 0;
}

.arion-section-alt {
    background:
        radial-gradient(circle at 8% 15%, rgba(0, 114, 149, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 90% 10%, rgba(194, 112, 61, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 92% 88%, rgba(32, 72, 107, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 15% 90%, rgba(42, 157, 143, 0.08) 0%, transparent 40%),
        radial-gradient(rgba(0, 51, 71, 0.06) 1px, transparent 1px) 0 0/28px 28px,
        var(--arion-bg);
    position: relative;
}

.arion-section-head {
    max-width: 620px;
    margin: 0 auto 56px;
    text-align: center;
}

.arion-section-head .arion-eyebrow {
    color: var(--arion-cerulean);
}

.arion-section-head h2 {
    font-size: 2rem;
}

.arion-section-head p {
    color: #5A5A5A;
    font-size: 1rem;
}

.arion-modulos-section {
    background:
        radial-gradient(circle at 90% 8%, rgba(0, 114, 149, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 5% 95%, rgba(107, 91, 149, 0.06) 0%, transparent 40%),
        var(--arion-white);
    padding-top: 120px;
    padding-bottom: 120px;
}

/* ── Tarjeta "showcase" reutilizable (mismo tratamiento premium en toda la página) ── */
.arion-showcase-card {
    background: var(--arion-white);
    border: 1px solid #E9EBEA;
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 24px 60px rgba(0, 20, 30, 0.08);
}

/* ── Showcase de módulos (pestañas + panel, como Zoho One / monday.com) ── */
.arion-modulos-showcase {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 32px;
    align-items: start;
    background: var(--arion-white);
    border: 1px solid #E9EBEA;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 24px 60px rgba(0, 20, 30, 0.08);
}

.arion-modulos-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 560px;
    overflow-y: auto;
}

.arion-modulo-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.arion-modulo-tab:hover {
    background: var(--arion-bg);
}

.arion-modulo-tab.is-active {
    border-width: 1px;
    border-style: solid;
}

.arion-modulo-tab-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Los glifos de Font Awesome 6 no quedan centrados dentro de su propio
   em-box (más tinta hacia abajo/derecha) — el layout ya centra la caja
   correctamente, así que se corrige con un ajuste óptico del glifo. */
.arion-modulo-tab-icon i,
.arion-modulo-panel-icon i {
    transform: translate(-1px, -2px);
}

.arion-modulo-tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.arion-modulo-tab-text strong {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    color: var(--arion-prussian);
}

.arion-modulo-tab-text small {
    font-size: 0.78rem;
    color: #8A8A8A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arion-modulo-tab-arrow {
    font-size: 0.75rem;
    color: #C7CDCF;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.arion-modulo-tab.is-active .arion-modulo-tab-arrow {
    opacity: 1;
}

@keyframes arionPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.arion-modulo-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    background: var(--arion-bg);
    border-radius: 16px;
    padding: 40px;
    min-height: 480px;
    animation: arionPanelIn 0.35s ease both;
}

.arion-modulo-panel-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.arion-modulo-panel-text h3 {
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.arion-modulo-panel-text p {
    color: #5A5A5A;
    margin-bottom: 22px;
}

.arion-modulo-panel-visual .arion-mockup {
    background: var(--arion-white);
    border: 1px solid #E4E7E6;
    box-shadow: 0 20px 44px rgba(0, 20, 30, 0.1);
}

.arion-modulo-panel-visual .arion-mockup-bar span { background: #E4E7E6; }
.arion-modulo-panel-visual .arion-mockup-screen { background: var(--arion-bg); aspect-ratio: 4/3; }

/* ── Valores / propuesta (tipo Odoo) ─────────────────── */
.arion-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.arion-value-card {
    text-align: left;
}

.arion-value-card .arion-benefit-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.arion-value-card h4 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.arion-value-card p {
    color: #5A5A5A;
    font-size: 0.92rem;
    margin: 0;
}

/* ── Comparación (antes / con Arion) ─────────────────── */
.arion-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.arion-compare-col {
    border-radius: 14px;
    padding: 32px;
}

.arion-compare-illustration {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

.arion-compare-col.is-before {
    background: #FBF3F2;
    border: 1px solid #F0DEDC;
}

.arion-compare-col.is-after {
    background: rgba(0, 114, 149, 0.06);
    border: 1px solid rgba(0, 114, 149, 0.18);
}

.arion-compare-col h4 {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.arion-compare-col ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.arion-compare-col li {
    padding: 10px 0;
    font-size: 0.94rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.arion-compare-col li:first-of-type {
    border-top: none;
}

.arion-compare-col.is-before li i { color: #C24A3F; margin-top: 3px; }
.arion-compare-col.is-after li i { color: var(--arion-cerulean); margin-top: 3px; }
.arion-compare-col.is-before h4 i { color: #C24A3F; }
.arion-compare-col.is-after h4 i { color: var(--arion-cerulean); }

/* ── Modal de módulo ─────────────────────────────────── */
@keyframes arionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes arionScaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.arion-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 25, 33, 0.65);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: arionFadeIn 0.2s ease;
}

.arion-modal-box {
    background: var(--arion-white);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    padding: 40px;
    position: relative;
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    animation: arionScaleIn 0.25s ease;
}

.arion-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.arion-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(0, 114, 149, 0.1);
    color: var(--arion-cerulean);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
}

.arion-modal-box h3 {
    font-size: 1.3rem;
}

.arion-modal-desc {
    color: #5A5A5A;
}

.arion-modal-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.arion-modal-list li {
    margin-bottom: 12px;
    color: var(--arion-black);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
}

.arion-modal-list li i {
    color: var(--arion-cerulean);
    margin-top: 3px;
}

/* ── Precios ─────────────────────────────────────────── */
.arion-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ── Ícono de módulo/plan (planes y "solo necesitas un módulo") ── */
.arion-modulo-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(0, 114, 149, 0.1);
    color: var(--arion-cerulean);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.arion-modulo-icon i {
    transform: translate(-1px, -2px);
}

.arion-pricing-card {
    background: var(--arion-white);
    border: 1px solid #E4E7E6;
    border-radius: 12px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.arion-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 51, 71, 0.1);
}

.arion-pricing-card.is-popular {
    border-color: var(--arion-cerulean);
    box-shadow: 0 12px 32px rgba(0, 114, 149, 0.14);
    position: relative;
}

.arion-pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--arion-cerulean);
    color: var(--arion-white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
}

.arion-pricing-card h3 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.arion-price {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--arion-prussian);
    margin: 12px 0 4px;
}

.arion-price span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #8A8A8A;
}

.arion-pricing-list {
    list-style: none;
    padding: 0;
    margin: 28px 0;
    flex-grow: 1;
}

.arion-pricing-list li {
    padding: 9px 0;
    border-top: 1px solid #EEF0EF;
    font-size: 0.92rem;
    color: #4A4A4A;
    display: flex;
    align-items: center;
    gap: 10px;
}

.arion-pricing-list li i {
    color: var(--arion-cerulean);
}

.arion-pricing-modulo {
    flex-grow: 1;
}

/* Lite y Pro: lo único que distingue a Profesional de Enterprise, que llevan
   los mismos once módulos. */
.arion-nivel {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}

.arion-nivel-lite {
    background: #EEF0EF;
    color: #6B7578;
}

.arion-nivel-pro {
    background: rgba(0, 114, 149, 0.12);
    color: var(--arion-cerulean);
}

.arion-pricing-card .arion-btn {
    text-align: center;
    width: 100%;
}

.arion-pricing-card:not(.is-popular) .arion-btn-primary {
    background: var(--arion-prussian);
}

/* ── Módulos por separado ─────────────────────────────── */
.arion-alacarte {
    margin-top: 56px;
    padding: 40px;
    background: var(--arion-bg);
    border-radius: 16px;
}

.arion-alacarte-head {
    text-align: center;
    max-width: 480px;
    margin: 0 auto 28px;
}

.arion-alacarte-head h4 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.arion-alacarte-head p {
    color: #5A5A5A;
    font-size: 0.92rem;
    margin: 0;
}

.arion-alacarte-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.arion-alacarte-item {
    background: var(--arion-white);
    border: 1px solid #E4E7E6;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.2s ease;
}

.arion-alacarte-item:hover {
    border-color: var(--arion-cerulean);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 51, 71, 0.08);
}

.arion-alacarte-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--arion-prussian);
}

.arion-alacarte-item strong {
    font-size: 1.05rem;
    color: var(--arion-cerulean);
}

.arion-alacarte-item strong small {
    font-size: 0.7rem;
    font-weight: 500;
    color: #8A8A8A;
}

/* ── FAQ ──────────────────────────────────────────────── */
.arion-faq {
    max-width: 760px;
    margin: 0 auto;
}

.arion-faq-item {
    border-bottom: 1px solid #E4E7E6;
}

.arion-faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 4px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--arion-prussian);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arion-faq-answer {
    padding: 0 4px 22px;
    color: #5A5A5A;
    font-size: 0.94rem;
}

/* ── CTA final ───────────────────────────────────────── */
.arion-cta {
    background: linear-gradient(160deg, var(--arion-prussian) 0%, var(--arion-cerulean) 100%);
    color: var(--arion-white);
    text-align: center;
    padding: 90px 0;
}

.arion-cta h2 {
    color: var(--arion-white);
}

.arion-cta p {
    color: #D7DEE2;
    max-width: 500px;
    margin: 0 auto 32px;
}

/* ── Footer ──────────────────────────────────────────── */
.arion-footer {
    background: var(--arion-black);
    color: #B8B8B8;
    padding: 64px 0 28px;
}

.arion-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.arion-footer h5 {
    color: var(--arion-white);
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.arion-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arion-footer li {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.arion-footer a:hover {
    color: var(--arion-white);
}

.arion-footer-bottom {
    border-top: 1px solid #3A3A3A;
    padding-top: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: #7A7A7A;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 992px) {
    .arion-hero-inner { grid-template-columns: 1fr; }
    .arion-hero-visual-wrap { display: none !important; }
    .arion-pricing-grid { grid-template-columns: 1fr; }
    .arion-footer-grid { grid-template-columns: 1fr 1fr; }
    .arion-value-grid { grid-template-columns: repeat(2, 1fr); }
    .arion-compare { grid-template-columns: 1fr; }
    .arion-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .arion-alacarte-grid { grid-template-columns: repeat(2, 1fr); }
    .arion-modulos-showcase { grid-template-columns: 1fr; }
    .arion-modulos-tabs {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        padding-bottom: 8px;
        /* Sin esto, el grid item se niega a encogerse por debajo del ancho
           intrínseco de sus botones (min-width:auto por default en items de
           grid), así que su propio overflow-x:auto nunca se activa y el
           overflow se filtra hacia .container/main, causando scroll
           horizontal en TODA la página en vez de solo en este carrusel. */
        min-width: 0;
    }
    .arion-modulo-tab { min-width: 220px; }
    .arion-modulo-tab-text small { white-space: normal; }
    .arion-modulo-panel { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .arion-nav {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: var(--arion-prussian);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 24px;
        gap: 18px;
    }
    .arion-nav.is-open { display: flex; }
    .arion-nav-toggle { display: block; }
}

@media (max-width: 600px) {
    .arion-modulos-grid { grid-template-columns: 1fr; }
    .arion-hero { padding: 150px 0 70px; }
    .arion-hero h1 { font-size: 1.9rem; }
    .arion-footer-grid { grid-template-columns: 1fr; }
    /* Estas cuatro se quedaban en 2 columnas (heredado del breakpoint de
       992px) incluso en pantallas de celular angostas — el contenido de
       cada columna no cabía en la mitad del ancho disponible y se salía
       (grid-template-columns: repeat(2,1fr) con min-width:auto por default
       no deja que la columna se encoja más que el contenido). */
    .arion-value-grid,
    .arion-stats-bar,
    .arion-alacarte-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══ Landing comercial 2026-09-15 (bloques del documento de Lineamientos §15) ═══ */

.d-md-none { display: block; }
@media (min-width: 768px) { .d-md-none { display: none !important; } }

.arion-header-actions { display: flex; align-items: center; gap: 18px; }
.arion-header-link { color: var(--arion-timberwolf); font-size: 0.92rem; font-weight: 500; }
.arion-header-link:hover { color: var(--arion-white); }
.arion-btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.arion-btn-block { display: block; width: 100%; text-align: center; }
.arion-btn:focus-visible,
.arion-need-card:focus-visible,
.arion-modulo-tab:focus-visible { outline: 3px solid #5FC3E4; outline-offset: 2px; }
button.arion-btn { cursor: pointer; font-family: inherit; }
.arion-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Hero con el tablero: cada módulo es una pieza */
.arion-hero { padding: 160px 0 100px; }
.arion-hero p.arion-hero-note { font-size: 0.92rem; margin: 22px 0 0; color: #B9C6CC; }
.arion-hero-note a { color: #5FC3E4; text-decoration: underline; text-underline-offset: 3px; }

.arion-board-wrap { position: relative; }
.arion-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 1;
    max-width: 480px;
    margin-left: auto;
    border-radius: 18px;
    overflow: hidden;
    user-select: none;
    /* Sin marco claro ni casillas blancas: sobre el azul se leían como bordes blancos. */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    /* Cada mosaico del degradado cubre 2×2 casillas: en 6×6 mide un tercio. */
    background: repeating-conic-gradient(rgba(95, 195, 228, 0.13) 0 25%, rgba(0, 16, 26, 0.42) 0 50%) 0 0 / calc(100% / 3) calc(100% / 3);
}
.arion-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--arion-white);
    /* backwards y no both: con both la animación terminada seguiría fijando
       transform y le ganaría al arrastre, que mueve la pieza con style.transform.
       El retraso escalonado lo pone la vista en cada pieza. */
    animation: arionPieceIn 0.6s ease backwards;
}
.arion-piece i { font-size: 1.65rem; color: #5FC3E4; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.arion-piece span { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #D7DEE2; }
.arion-board-caption { text-align: right; font-size: 0.85rem !important; color: #B9C6CC !important; margin: 14px 0 0 auto !important; max-width: 480px !important; }
@keyframes arionPieceIn {
    from { opacity: 0.2; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tablero jugable (script al final de landing/index): el visitante toca o arrastra
   una pieza; sus casillas válidas muestran un punto y las dos marcas iluminan la
   salida y la llegada de la última jugada, como en un tablero de ajedrez en línea. */
.arion-casilla { position: relative; z-index: 1; }
.arion-casilla.es-destino { cursor: pointer; }
.arion-casilla.es-destino::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24%;
    height: 24%;
    border-radius: 50%;
    background: rgba(95, 195, 228, 0.6);
    box-shadow: 0 0 0 5px rgba(95, 195, 228, 0.16);
}
.arion-casilla.es-encima { background: rgba(95, 195, 228, 0.24); }
.arion-piece { position: relative; z-index: 2; cursor: grab; touch-action: none; }
.arion-piece.is-arrastrando { z-index: 3; cursor: grabbing; }
.arion-piece.is-arrastrando i { transform: scale(1.18); }
.arion-piece.is-seleccionada::before {
    content: '';
    position: absolute;
    inset: 7%;
    z-index: -1;
    border-radius: 10px;
    background: rgba(95, 195, 228, 0.14);
    box-shadow: inset 0 0 0 2px #5FC3E4;
}
.arion-piece.es-pronto { opacity: 0.55; }
.arion-piece i { transition: color 0.2s ease, transform 0.2s ease; }
.arion-piece:hover i { color: var(--arion-white); transform: translateY(-3px); }
.arion-piece.se-movio i { animation: arionPiezaBrillo 1.1s ease; }
.arion-board-pie { display: flex; justify-content: flex-end; align-items: center; gap: 14px; max-width: 480px; margin: 14px 0 0 auto; }
.arion-board-pie .arion-board-caption { margin: 0 !important; max-width: none !important; }
.arion-board-reiniciar {
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-family: inherit;
    color: #D7DEE2;
    background: transparent;
    border: 1px solid rgba(185, 198, 204, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.arion-board-reiniciar:hover { color: var(--arion-white); border-color: #5FC3E4; }
@keyframes arionPiezaBrillo {
    0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
    40% { color: var(--arion-white); filter: drop-shadow(0 0 14px rgba(95, 195, 228, 0.9)); }
}
.arion-board-marca {
    grid-area: 1 / 1;
    background: rgba(95, 195, 228, 0.16);
    box-shadow: inset 0 0 0 2px rgba(95, 195, 228, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.arion-board.hay-jugada .arion-board-marca { opacity: 1; }

/* Necesidades */
.arion-needs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.arion-need-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    background: var(--arion-white);
    border: 1px solid #E4E7E6;
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.arion-need-card:hover { border-color: var(--arion-cerulean); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 51, 71, 0.09); }
.arion-need-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 114, 149, 0.1); color: var(--arion-cerulean); font-size: 1.25rem; margin-bottom: 6px;
}
.arion-need-card strong { font-family: 'Syne', sans-serif; font-size: 1.08rem; color: var(--arion-prussian); line-height: 1.3; }
.arion-need-card small { color: #5A5A5A; font-size: 0.9rem; flex-grow: 1; }
.arion-need-link { font-size: 0.86rem; font-weight: 600; color: var(--arion-cerulean); margin-top: 8px; }
.arion-need-link i { font-size: 0.75rem; margin-left: 4px; transition: transform 0.2s ease; }
.arion-need-card:hover .arion-need-link i { transform: translateX(4px); }

/* Modelo modular: el crecimiento en tres momentos */
.arion-growth { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.arion-growth li { background: var(--arion-white); border: 1px solid #E4E7E6; border-radius: 14px; padding: 28px; position: relative; }
.arion-growth li:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--arion-cerulean); color: var(--arion-white); font-size: 0.7rem; z-index: 1;
}
.arion-growth-step { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--arion-cerulean); margin-bottom: 10px; }
.arion-growth h4 { font-size: 1.1rem; margin-bottom: 8px; }
.arion-growth p { color: #5A5A5A; font-size: 0.93rem; margin: 0; }
.arion-growth strong { color: var(--arion-prussian); }

/* Ficha de módulo */
.arion-chip {
    display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
    background: rgba(0, 114, 149, 0.1); color: var(--arion-cerulean); white-space: nowrap;
}
.arion-chip-soft { background: var(--arion-white); color: var(--arion-indigo); border: 1px solid #DDE2E1; }
.arion-chip-warn { background: #FBF0DF; color: #8A5A0B; }
/* Una sola columna: con texto e imagen lado a lado, la ficha larga dejaba la
   captura del módulo en una columna de ~90px, ilegible. */
.arion-modulo-ficha { grid-template-columns: 1fr; align-items: start; min-height: 0; gap: 28px; }
.arion-modulo-ficha .arion-mockup-screen { padding: 0; aspect-ratio: 16 / 10; }
.arion-modulo-ficha .arion-mockup-screen img { object-position: top left; border-radius: 6px; }
.arion-ficha-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.arion-ficha-head .arion-modulo-panel-icon { margin-bottom: 0; min-width: 56px; }
.arion-ficha-head h3 { margin-bottom: 4px !important; }
.arion-modulo-panel-text p.arion-ficha-resuelve { color: var(--arion-black); margin-bottom: 8px; }
.arion-ficha-label { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7A8487; margin: 22px 0 10px; }
.arion-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arion-modulo-panel-text p.arion-ficha-extra { font-size: 0.9rem; margin: 0; }
.arion-modulo-ficha .arion-modal-list { margin-top: 0; }
.arion-modulo-ficha .arion-modal-list li { margin-bottom: 8px; font-size: 0.92rem; }

/* Conexiones */
.arion-flows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.arion-flow { background: var(--arion-white); border: 1px solid #E4E7E6; border-radius: 14px; padding: 24px 28px; }
.arion-flow h4 { font-size: 1rem; margin-bottom: 16px; }
.arion-flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.arion-flow-step {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
    background: var(--arion-bg); font-size: 0.86rem; font-weight: 600; color: var(--arion-prussian);
}
.arion-flow-step i { color: var(--arion-cerulean); }
.arion-flow-arrow { color: #A9B3B5; font-size: 0.75rem; }

/* Construye tu sistema */
.arion-builder { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; }
.arion-builder-steps { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.arion-builder-card { background: var(--arion-white); border: 1px solid #E4E7E6; border-radius: 16px; padding: 28px; min-width: 0; }
.arion-builder-form { box-shadow: 0 24px 60px rgba(0, 20, 30, 0.08); position: sticky; top: 96px; }
.arion-builder-card h4 { font-size: 1.08rem; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.arion-builder-num {
    width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: var(--arion-prussian); color: var(--arion-white);
    display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 0.82rem;
}
.arion-builder-needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.arion-check {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #E4E7E6; border-radius: 10px;
    cursor: pointer; font-size: 0.92rem; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease;
}
.arion-check:hover { border-color: #9FC7D4; }
.arion-check.is-on { border-color: var(--arion-cerulean); background: rgba(0, 114, 149, 0.06); }
.arion-check input { accent-color: var(--arion-cerulean); width: 16px; height: 16px; margin: 0; }
.arion-check i { color: var(--arion-cerulean); width: 18px; text-align: center; }
.arion-builder-empty { color: #7A8487; font-size: 0.92rem; margin: 0; }
.arion-builder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.arion-builder-mod { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.arion-builder-mod strong { color: var(--arion-prussian); font-size: 0.94rem; }
.arion-builder-mod small { color: #7A8487; font-size: 0.78rem; }
.arion-builder-total { margin: 16px 0 0; font-size: 0.88rem; color: #5A5A5A; }
.arion-builder-total strong { color: var(--arion-prussian); font-variant-numeric: tabular-nums; }

.arion-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--arion-bg); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.arion-segmented label {
    text-align: center; font-size: 0.8rem; font-weight: 600; padding: 9px 6px; border-radius: 8px; cursor: pointer; color: #5A5A5A; line-height: 1.25;
}
.arion-segmented label.is-on { background: var(--arion-white); color: var(--arion-prussian); box-shadow: 0 2px 8px rgba(0, 20, 30, 0.1); }
.arion-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.arion-segmented label:focus-within { outline: 2px solid #5FC3E4; }

.arion-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; }
.arion-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.arion-field-full { grid-column: 1 / -1; }
.arion-field label { font-size: 0.8rem; font-weight: 600; color: var(--arion-prussian); }
.arion-field input,
.arion-field select,
.arion-field textarea {
    font: inherit; font-size: 0.92rem; color: var(--arion-black); background: var(--arion-white);
    border: 1px solid #D5DADA; border-radius: 8px; padding: 10px 12px; width: 100%;
}
.arion-field textarea { resize: vertical; }
.arion-field input:focus,
.arion-field select:focus,
.arion-field textarea:focus { outline: none; border-color: var(--arion-cerulean); box-shadow: 0 0 0 3px rgba(0, 114, 149, 0.15); }
.arion-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.arion-form-error { color: #B3261E; font-size: 0.88rem; margin: 0 0 12px; }
.arion-form-legal { font-size: 0.78rem; color: #7A8487; text-align: center; margin: 10px 0 0; }
.arion-builder-ok { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 12px; background: #EAF6EF; color: #1D5B36; }
.arion-builder-ok i { font-size: 1.5rem; color: #22A05A; }
.arion-builder-ok p { margin: 4px 0 0; font-size: 0.92rem; }

/* Implementación */
.arion-impl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.arion-impl-card { background: var(--arion-white); border: 1px solid #E4E7E6; border-radius: 14px; padding: 26px; position: relative; }
.arion-impl-num { position: absolute; top: 18px; right: 22px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.6rem; color: #E4E9EA; }
.arion-impl-card > i { font-size: 1.35rem; color: var(--arion-cerulean); margin-bottom: 14px; display: block; }
.arion-impl-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.arion-impl-card p { color: #5A5A5A; font-size: 0.9rem; margin: 0; }

/* Personalización */
.arion-custom {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    padding: 44px 48px; border-radius: 20px; background: linear-gradient(160deg, #EEF5F7 0%, #F7F8F7 100%); border: 1px solid #DDE8EB;
}
.arion-custom > div { max-width: 620px; }
.arion-custom .arion-eyebrow { color: var(--arion-cerulean); margin-bottom: 10px; }
.arion-custom h2 { font-size: 1.7rem; margin-bottom: 10px; }
.arion-custom p { color: #5A5A5A; margin: 0; }

/* Precios "desde" */
.arion-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.arion-price small { font-size: 0.85rem; font-weight: 500; color: #8A8A8A; font-family: 'Inter', sans-serif; }
.arion-price { font-variant-numeric: tabular-nums; }
.arion-pricing-note { text-align: center; color: #7A8487; font-size: 0.85rem; max-width: 640px; margin: 32px auto 0; }

/* Demo */
.arion-demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.arion-demo-card { display: flex; gap: 18px; padding: 26px; border: 1px solid #E4E7E6; border-radius: 14px; background: var(--arion-white); }
.arion-demo-card > i { font-size: 1.6rem; color: var(--arion-cerulean); min-width: 32px; text-align: center; margin-top: 2px; }
.arion-demo-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.arion-demo-card p { color: #5A5A5A; font-size: 0.9rem; margin: 0; }

/* FAQ con <details> */
.arion-faq-item summary { list-style: none; }
.arion-faq-item summary::-webkit-details-marker { display: none; }
.arion-faq-item summary i { transition: transform 0.2s ease; color: var(--arion-cerulean); font-size: 0.85rem; }
.arion-faq-item[open] summary i { transform: rotate(180deg); }
.arion-faq-answer a { color: var(--arion-cerulean); text-decoration: underline; }

/* Pie con columna de contacto y enlace al aviso */
.arion-footer-grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.3fr; }
.arion-footer li i { width: 16px; color: #7FA9B8; margin-right: 4px; }
.arion-footer-bottom a { color: #B8B8B8; text-decoration: underline; text-underline-offset: 3px; }
.arion-form-legal a { color: var(--arion-cerulean); text-decoration: underline; }

/* Aviso de Privacidad */
.arion-legal { padding: 140px 0 80px; }
.arion-legal .container { max-width: 780px; }
.arion-legal h1 { font-size: 2.2rem; margin-bottom: 8px; }
.arion-legal-fecha { color: #7A8487; font-size: 0.9rem; margin: 0 0 36px; }
.arion-legal h2 { font-size: 1.2rem; margin: 36px 0 10px; }
.arion-legal p, .arion-legal li { color: #3F4A4E; font-size: 0.97rem; }
.arion-legal ul { padding-left: 20px; }
.arion-legal li { margin-bottom: 6px; }
.arion-legal a { color: var(--arion-cerulean); text-decoration: underline; }
.arion-legal-caja { background: var(--arion-bg); border: 1px solid #E4E7E6; border-radius: 12px; padding: 20px 24px; }
.arion-legal-caja p { margin: 4px 0; }

/* CTA con los tres caminos */
.arion-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

@media (max-width: 992px) {
    .arion-hero { padding: 130px 0 80px; }
    .arion-needs-grid,
    .arion-impl-grid { grid-template-columns: repeat(2, 1fr); }
    .arion-growth,
    .arion-flows,
    .arion-demo-grid,
    .arion-builder { grid-template-columns: 1fr; }
    .arion-growth li:not(:last-child)::after { right: 50%; top: auto; bottom: -16px; transform: translateX(50%) rotate(90deg); }
    .arion-builder-form { position: static; }
    .arion-header-actions .arion-btn-sm { display: none !important; }
    .arion-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .arion-section { padding: 64px 0; }
    .arion-section-head h2 { font-size: 1.5rem; }
    .arion-needs-grid,
    .arion-impl-grid,
    .arion-builder-needs,
    .arion-form-grid { grid-template-columns: 1fr; }
    .arion-segmented { grid-template-columns: 1fr; }
    .arion-footer-grid { grid-template-columns: 1fr; }
    .arion-custom { padding: 28px 24px; }
    .arion-builder-card { padding: 20px; }
    .arion-hero-actions .arion-btn,
    .arion-cta-actions .arion-btn { width: 100%; text-align: center; }
    .container { padding: 0 16px; }
}

/* ═══ Cada sección con su propio diseño (2026-09-15, tarde) ═══
   Necesidades, modelo modular, conexiones, implementación y demo eran la misma
   rejilla de tarjetas blancas. Ahora cada una tiene su forma. */

/* Modelo modular: el tablero se va llenando */
.arion-escalera { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.arion-escalera li { display: flex; flex-direction: column; }
.arion-escalera-tablero {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; margin-bottom: 24px;
    background: repeating-conic-gradient(#E3EAEC 0 25%, #F3F6F6 0 50%) 0 0 / 66.6667% 100%;
}
.arion-escalera-celda { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: var(--arion-cerulean); }
.arion-escalera li:last-child .arion-escalera-tablero {
    background: repeating-conic-gradient(rgba(95, 195, 228, 0.16) 0 25%, transparent 0 50%) 0 0 / 66.6667% 100%, var(--arion-prussian);
}
.arion-escalera li:last-child .arion-escalera-celda { color: #5FC3E4; }
.arion-escalera h4 { font-size: 1.15rem; margin-bottom: 8px; }
.arion-escalera p { color: #5A5A5A; font-size: 0.94rem; margin: 0; }
.arion-escalera strong { color: var(--arion-prussian); }

/* Conexiones: banda oscura, un flujo a la vez */
.arion-section-dark {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 114, 149, 0.45) 0%, transparent 45%),
        linear-gradient(160deg, var(--arion-prussian) 0%, #0F2E44 100%);
    color: var(--arion-white);
}
.arion-section-dark .arion-section-head .arion-eyebrow { color: #5FC3E4; }
.arion-section-dark .arion-section-head h2 { color: var(--arion-white); }
.arion-section-dark .arion-section-head p { color: #B9C6CC; }
.arion-conexiones-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 52px; }
.arion-conexiones-tab {
    font: inherit; font-size: 0.9rem; font-weight: 600; color: #D7DEE2; background: rgba(255, 255, 255, 0.07);
    border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.arion-conexiones-tab:hover { background: rgba(255, 255, 255, 0.14); color: var(--arion-white); }
.arion-conexiones-tab.is-active { background: #5FC3E4; color: var(--arion-prussian); }
.arion-conexiones-tab:focus-visible { outline: 3px solid #5FC3E4; outline-offset: 3px; }
.arion-conexiones-track { position: relative; max-width: 920px; margin: 0 auto; }
.arion-conexiones-linea { position: absolute; left: 16.66%; right: 16.66%; top: 40px; height: 2px; background: rgba(255, 255, 255, 0.12); }
.arion-conexiones-linea span { display: block; width: 100%; height: 100%; background: #5FC3E4; transform-origin: left center; animation: arionLinea 1.1s ease 0.25s both; }
@keyframes arionLinea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.arion-conexiones-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.arion-conexiones-pasos li { display: flex; flex-direction: column; align-items: center; text-align: center; animation: arionPasoIn 0.5s ease both; }
@keyframes arionPasoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.arion-conexiones-pieza {
    width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--arion-prussian); color: #5FC3E4; font-size: 1.8rem; margin-bottom: 18px;
    box-shadow: 0 0 0 2px #5FC3E4, 0 14px 30px rgba(0, 0, 0, 0.35);
}
.arion-conexiones-pasos strong { font-family: 'Syne', sans-serif; font-size: 1.05rem; color: var(--arion-white); margin-bottom: 6px; }
.arion-conexiones-pasos small { color: #B9C6CC; font-size: 0.9rem; line-height: 1.5; max-width: 240px; }
.arion-conexiones-nota { text-align: center; color: #8FA3AB; font-size: 0.85rem; margin: 40px 0 0; }

/* Implementación: pasos en una línea, porque sí es un orden */
.arion-impl-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.arion-impl-pasos::before {
    content: ''; position: absolute; top: 21px; left: 22px; right: 22px; height: 2px;
    background: linear-gradient(90deg, var(--arion-cerulean), var(--arion-indigo)); opacity: 0.3;
}
.arion-impl-pasos li { position: relative; }
.arion-impl-paso-num {
    position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--arion-cerulean); color: var(--arion-white);
    font-family: 'Syne', sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    box-shadow: 0 0 0 6px var(--arion-bg);
}
.arion-impl-pasos h4 { font-size: 1.05rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.arion-impl-pasos h4 i { color: var(--arion-cerulean); font-size: 0.95rem; }
.arion-impl-pasos p { color: #5A5A5A; font-size: 0.92rem; margin: 0; }

/* Demo: el encabezado fijo a un lado y las pruebas como lista */
.arion-demo-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.arion-demo-intro { position: sticky; top: 110px; }
.arion-demo-intro .arion-eyebrow { color: var(--arion-cerulean); }
.arion-demo-intro h2 { font-size: 2rem; }
.arion-demo-intro p { color: #5A5A5A; }
.arion-demo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
.arion-demo-trial { color: var(--arion-cerulean); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.arion-demo-lista { list-style: none; padding: 0; margin: 0; }
.arion-demo-lista li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid #E4E7E6; }
.arion-demo-lista li:first-child { border-top: 0; padding-top: 4px; }
.arion-demo-lista i { font-size: 1.5rem; color: var(--arion-cerulean); margin-top: 4px; }
.arion-demo-lista h4 { font-size: 1.08rem; margin-bottom: 6px; }
.arion-demo-lista p { color: #5A5A5A; font-size: 0.93rem; margin: 0; }
.arion-demo-lista p b { color: var(--arion-prussian); font-weight: 600; }

/* Precios tapados: el monto nunca llega a la página, solo su silueta */
.arion-precio-individual {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
    background: var(--arion-white); border: 1px solid #E4E7E6; border-radius: 14px; padding: 28px 32px; margin-bottom: 24px;
}
.arion-precio-individual .arion-modulo-icon { margin: 0; }
.arion-precio-individual h3 { font-size: 1.15rem; margin-bottom: 4px; }
.arion-precio-individual p { color: #5A5A5A; font-size: 0.93rem; margin: 0; }
.arion-pricing-planes { grid-template-columns: repeat(3, 1fr); }
.arion-precio-tapado { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; }
.arion-precio-blur {
    font-size: 2.2rem; font-weight: 700; line-height: 1.15; color: var(--arion-prussian);
    filter: blur(8px); user-select: none; font-variant-numeric: tabular-nums;
}
.arion-precio-blur span { font-size: 0.95rem; font-weight: 500; color: #8A8A8A; }
.arion-precio-tapado small { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--arion-cerulean); }
.arion-precio-individual .arion-precio-tapado { margin: 0; align-items: flex-end; }

/* Redes sociales en el pie */
.arion-footer-redes { display: flex; gap: 10px; margin-top: 18px; }
.arion-footer-redes a {
    width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08); color: #D7DEE2; font-size: 1rem; transition: background 0.2s ease, color 0.2s ease;
}
.arion-footer-redes a:hover { background: var(--arion-cerulean); color: var(--arion-white); }
.arion-footer-redes a:focus-visible { outline: 3px solid #5FC3E4; outline-offset: 2px; }

/* Formulario en pausa: contacto directo */
.arion-builder-pausa { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--arion-bg); }
.arion-builder-pausa p { margin: 0 0 10px; font-size: 0.86rem; color: #5A5A5A; }
.arion-builder-contacto { display: flex; flex-wrap: wrap; gap: 8px; }
.arion-builder-contacto a {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--arion-prussian);
    background: var(--arion-white); border: 1px solid #DDE2E1; border-radius: 999px; padding: 8px 14px;
}
.arion-builder-contacto a:hover { border-color: var(--arion-cerulean); color: var(--arion-cerulean); }
.arion-builder-contacto .fa-whatsapp { color: #1FA855; }
.arion-builder-contacto a:focus-visible { outline: 3px solid #5FC3E4; outline-offset: 2px; }

@media (max-width: 992px) {
    .arion-escalera { grid-template-columns: 1fr; gap: 36px; max-width: 420px; margin: 0 auto; }
    .arion-impl-pasos { grid-template-columns: 1fr; gap: 28px; }
    .arion-impl-pasos::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--arion-cerulean), var(--arion-indigo)); }
    .arion-impl-pasos li { padding-left: 64px; }
    .arion-impl-paso-num { position: absolute; left: 0; top: 0; margin: 0; }
    .arion-demo-split { grid-template-columns: 1fr; gap: 32px; }
    .arion-demo-intro { position: static; }
    .arion-precio-individual { grid-template-columns: auto 1fr; }
    .arion-precio-individual .arion-precio-tapado { align-items: flex-start; }
    .arion-precio-individual .arion-btn { grid-column: 1 / -1; text-align: center; }
    .arion-pricing-planes { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .arion-conexiones-linea { display: none; }
    .arion-conexiones-pasos { grid-template-columns: 1fr; gap: 32px; }
    /* Centrados también en pantalla angosta (usuario, 2026-09-22): alineados
       a la izquierda se veían descuadrados respecto del resto de la sección. */
    .arion-conexiones-tabs { justify-content: center; }
}


/* ── Imágenes del diseñador (docs/landing/) ──────────────────────────────
   Cuatro secciones dejaron de ser solo texto: el modelo modular y la
   personalización van sobre una foto, y «Arma tu combinación» y el demo
   llevan el sistema en pantalla. Las fotos van como variable en el HTML
   (--arion-modular-bg / --arion-foto-bg) para que la ruta la arme asset(). */


/* El inicio va sobre el video del login (usuario, 2026-09-22). El video queda
   al fondo y encima un velo con los degradados de marca: son los que sostienen
   el contraste del título y del tablero. Mientras el video carga —o si el
   navegador no lo reproduce— el poster deja la foto del banner en su lugar. */
.arion-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; pointer-events: none; z-index: 0;
}
.arion-hero-velo {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 114, 149, 0.5) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(32, 72, 107, 0.55) 0%, transparent 50%),
        radial-gradient(circle at 75% 85%, rgba(0, 114, 149, 0.32) 0%, transparent 45%),
        radial-gradient(circle at 20% 90%, rgba(204, 205, 197, 0.16) 0%, transparent 40%),
        linear-gradient(160deg, rgba(8, 41, 62, 0.78) 0%, rgba(13, 30, 58, 0.84) 100%);
}
.arion-hero::before { z-index: 1; }
.arion-hero-inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    /* Se queda la foto del poster, sin movimiento. */
    .arion-hero-video { display: none; }
    .arion-hero { background: var(--arion-hero-bg) center / cover no-repeat, linear-gradient(160deg, var(--arion-prussian) 0%, var(--arion-indigo) 100%); }
}


/* El carrusel de módulos ya trae su propio scroll horizontal, pero sin
   min-width:0 el track del grid crecía hasta el ancho de TODOS los botones y
   sacaba ~16 px de página en móvil: la barra superior se iba a la derecha y
   toda la landing se podía deslizar de lado (usuario, 2026-09-22). */
.arion-modulos-showcase,
.arion-modulos-showcase > * {
    min-width: 0;
}

/* Modelo modular: el tablero se llena sobre la foto oscura */
.arion-section-modular {
    position: relative;
    background: #0B2637;
    color: var(--arion-white);
}
.arion-section-modular::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--arion-modular-bg) center / cover no-repeat;
}
/* Oscurece la foto lo suficiente para que el texto blanco pase AA sin
   apagarla del todo. */
.arion-section-modular::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(8, 28, 41, 0.74) 0%, rgba(8, 28, 41, 0.62) 55%, rgba(8, 28, 41, 0.8) 100%);
}
.arion-section-modular > .container { position: relative; z-index: 1; }
.arion-section-modular .arion-section-head .arion-eyebrow { color: #5FC3E4; }
.arion-section-modular .arion-section-head h2 { color: var(--arion-white); }
.arion-section-modular .arion-escalera li { text-align: center; }
.arion-section-modular .arion-escalera h4 { color: var(--arion-white); }
.arion-section-modular .arion-escalera p { color: #C6D2D8; }
.arion-section-modular .arion-escalera strong { color: #5FC3E4; }
.arion-section-modular .arion-growth-step { color: #8FB4C6; }
.arion-section-modular .arion-escalera-tablero { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }

/* Arma tu combinación: el sistema en tablet, laptop y teléfono */
.arion-construye-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px;
}
.arion-construye-intro picture { display: block; }
.arion-construye-intro img { width: 100%; height: auto; display: block; }
.arion-construye-intro .arion-section-head { margin-bottom: 0; }

/* Personalización: la tarjeta flota sobre la foto */
.arion-section-foto {
    position: relative;
    background: var(--arion-foto-bg) center / cover no-repeat;
}
.arion-section-foto::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 34, 47, 0.35) 0%, rgba(12, 34, 47, 0.45) 100%);
}
.arion-section-foto > .container { position: relative; z-index: 1; }
.arion-section-foto .arion-custom {
    background: rgba(247, 249, 249, 0.97);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 60px rgba(6, 26, 38, 0.28);
}

/* Demo: el teléfono entre el texto y la lista de pruebas */
.arion-demo-split { grid-template-columns: 0.85fr 0.7fr 1.1fr; gap: 40px; align-items: center; }
.arion-demo-phone { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.arion-demo-phone img { width: 100%; height: auto; display: block; }

/* En un teléfono la foto se amplía tanto que solo se ve la pantalla negra
   de la laptop: ahí vale más el degradado limpio que la foto. */
@media (max-width: 700px) {
    .arion-section-modular::before { display: none; }
    .arion-section-modular::after {
        background: radial-gradient(circle at 20% 0%, rgba(0, 114, 149, 0.4) 0%, transparent 55%),
                    linear-gradient(160deg, var(--arion-prussian) 0%, #0F2E44 100%);
    }
}

@media (max-width: 992px) {
    .arion-construye-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 44px; }
    .arion-construye-intro picture { max-width: 560px; margin: 0 auto; }
    .arion-demo-split { grid-template-columns: 1fr; gap: 32px; }
    .arion-demo-phone { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
    .arion-piece,
    .arion-modulo-panel,
    .arion-conexiones-linea span,
    .arion-conexiones-pasos li { animation: none; }
    .arion-need-card,
    .arion-pricing-card,
    .arion-conexiones-tab { transition: none; }
    /* Con esta preferencia el visitante sigue moviendo piezas, pero sin animación
       y sin jugadas de ejemplo (eso lo decide el script). */
    .arion-piece i,
    .arion-board-reiniciar { transition: none; }
    .arion-piece.se-movio i { animation: none; }
}

/* Las tres fotos de fondo también existen en WebP, que pesa la mitad o menos
   (banner-modular: 332 KB -> 176 KB; bg-personalizacion: 242 KB -> 78 KB). No
   se pueden servir con <picture> porque son fondos, así que cada sección
   declara las dos rutas en su style y aquí se prefiere la WebP donde el
   navegador la entiende. Uno que no —Safari anterior al 14— no entra a esta
   regla y se queda con la JPG, que sigue ahí. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .arion-section-modular::before { background-image: var(--arion-modular-bg-webp, var(--arion-modular-bg)); }
    .arion-section-foto { background-image: var(--arion-foto-bg-webp, var(--arion-foto-bg)); }

    /* El fondo del inicio solo se pinta para quien pide menos movimiento: los
       demás ven el video. Por eso va dentro del mismo media query, y conserva
       el degradado de respaldo que traía el atajo original. */
    @media (prefers-reduced-motion: reduce) {
        .arion-hero {
            background-image: var(--arion-hero-bg-webp, var(--arion-hero-bg)),
                linear-gradient(160deg, var(--arion-prussian) 0%, var(--arion-indigo) 100%);
        }
    }
}