/* ==========================================================================
   site.css — Sitio público de Zeus (layouts/site.blade.php).
   Misma paleta que el login y la app: azul marino del logo + azul de acción.
   Variables prefijadas --s- para no chocar con otras hojas.
   ========================================================================== */

:root{
    --s-navy: #13213F;
    --s-navy-deep: #0A1424;
    --s-navy-soft: #1B2E52;
    --s-blue: #3157D5;
    --s-blue-hover: #2647B8;
    --s-blue-tint: #E9EEFC;
    --s-sky: #A5BBE9;
    --s-sky-tint: #EEF3FC;
    --s-gold: #C9973F;
    --s-gold-tint: #FBF3E1;
    --s-green: #2E8B57;
    --s-green-tint: #E7F4EC;
    --s-amber: #B8860B;
    --s-red: #C0392B;
    --s-ink: #1A2433;
    --s-ink-soft: #5B6B7C;
    --s-ink-faint: #93A0AE;
    --s-line: #E3E8EF;
    --s-bg: #FFFFFF;
    --s-bg-alt: #F5F8FB;
    --s-radius: 16px;
    --s-radius-sm: 10px;
    --s-shadow: 0 1px 2px rgba(19,33,63,.05), 0 12px 32px -16px rgba(19,33,63,.22);
    --s-shadow-lg: 0 2px 4px rgba(19,33,63,.05), 0 30px 60px -24px rgba(19,33,63,.35);
    --s-max: 1180px;
    --s-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body{ margin: 0; }
body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--s-ink);
    background: var(--s-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
h1, h2, h3, h4{ font-family: var(--s-head); color: var(--s-navy); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p{ margin: 0; }
[x-cloak]{ display: none !important; }

.s-container{ width: 100%; max-width: var(--s-max); margin: 0 auto; padding: 0 20px; }
.s-section{ padding: 96px 0; }
.s-section--alt{ background: var(--s-bg-alt); }
/* El cierre es un bloque con bordes propios: después de una sección blanca
   alcanza con el margen de esa sección (si no, quedaban ~190 px de aire).
   Después de una gris o azul conserva el suyo, para no quedar pegado. */
.s-section:not(.s-section--alt):not(.s-section--navy) + .s-section--cta{ padding-top: 0; }
.s-section--navy{ background: linear-gradient(180deg, var(--s-navy) 0%, var(--s-navy-deep) 100%); color: #fff; }
.s-section--navy h2, .s-section--navy h3{ color: #fff; }
.s-section--tight{ padding: 64px 0; }

.s-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--s-blue);
}
.s-section--navy .s-eyebrow{ color: var(--s-sky); }
.s-heading{ text-align: center; max-width: 760px; margin: 0 auto 56px; }
.s-heading h2{ font-size: clamp(30px, 4vw, 44px); font-weight: 800; margin-top: 12px; }
.s-heading p{ margin-top: 16px; font-size: 18px; color: var(--s-ink-soft); }
.s-section--navy .s-heading p{ color: rgba(255,255,255,.72); }

/* ---------- Botones ---------- */
.s-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
    font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.s-btn:hover{ transform: translateY(-1px); }
.s-btn--primary{ background: var(--s-blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(49, 87, 213,.65); }
.s-btn--primary:hover{ background: var(--s-blue-hover); }
.s-btn--ghost{ background: transparent; color: var(--s-navy); border-color: var(--s-line); }
.s-btn--ghost:hover{ border-color: var(--s-navy); }
.s-btn--light{ background: #fff; color: var(--s-navy); }
.s-btn--light:hover{ background: var(--s-sky-tint); }
.s-btn--outline-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.s-btn--outline-light:hover{ border-color: #fff; }
.s-btn--sm{ padding: 10px 18px; font-size: 14px; }
.s-btn--block{ width: 100%; }
.s-link{ color: var(--s-blue); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.s-link:hover{ gap: 12px; }
.s-link i{ font-size: 13px; transition: transform .18s; }

/* ---------- Header ---------- */
.s-header{
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.s-header.is-scrolled{ border-color: var(--s-line); box-shadow: 0 6px 20px -16px rgba(19,33,63,.4); }
.s-header-inner{ display: flex; align-items: center; gap: 28px; height: 72px; }
.s-logo img{ width: 112px; height: auto; }
.s-nav{ display: flex; align-items: center; gap: 4px; flex: 1; }
.s-nav-item{ position: relative; }
.s-nav-link{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px; border: 0; background: none;
    font-size: 15px; font-weight: 600; color: var(--s-ink);
}
.s-nav-link:hover, .s-nav-item.is-open > .s-nav-link{ background: var(--s-bg-alt); color: var(--s-navy); }
.s-nav-link.is-active{ color: var(--s-blue); }
.s-nav-link i{ font-size: 11px; transition: transform .2s; }
.s-nav-item.is-open > .s-nav-link i{ transform: rotate(180deg); }
.s-dropdown{
    position: absolute; top: calc(100% + 8px); left: -8px;
    min-width: 320px; padding: 10px;
    background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.s-nav-item.is-open .s-dropdown{ opacity: 1; visibility: visible; transform: none; }
.s-drop-link{ display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 12px; }
.s-drop-link:hover{ background: var(--s-blue-tint); }
.s-drop-link:hover .s-drop-icon{ background: var(--s-blue); color: #fff; }

/* Menú con tarjeta destacada (Soluciones, Recursos): la lista sigue en
   blanco para leerse rápido; el color lo pone la tarjeta de la derecha. */
.s-dropdown--mega, .s-dropdown--feature{ display: flex; gap: 10px; align-items: stretch; }
.s-dropdown--mega{ min-width: 860px; }
.s-dropdown--feature{ min-width: 600px; }
.s-drop-links{ flex: 1; min-width: 0; }
.s-drop-links--grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
.s-drop-feature{ position: relative; isolation: isolate; flex: 0 0 240px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 18px; border-radius: 14px; overflow: hidden; background: var(--s-navy); color: #fff; }
.s-drop-feature-photo{ bottom: auto; height: 70%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); opacity: .85; transition: transform .4s; }
.s-drop-feature:hover .s-drop-feature-photo{ transform: scale(1.04); }
.s-drop-feature-body{ position: relative; z-index: 1; display: grid; gap: 4px; }
.s-drop-feature-eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-sky); }
.s-drop-feature strong{ font-family: var(--s-head); font-size: 18px; color: #fff; }
.s-drop-feature-body > span:not([class]){ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.75); }
.s-drop-feature-cta{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--s-sky); }
.s-drop-feature-cta i{ transition: transform .2s; }
.s-drop-feature:hover .s-drop-feature-cta .fa-arrow-right{ transform: translateX(3px); }
.s-drop-icon{
    flex: 0 0 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--s-blue-tint); color: var(--s-blue); font-size: 16px;
}
.s-drop-link strong{ display: block; font-size: 15px; color: var(--s-navy); }
/* Solo el texto: el ícono también es un <span> y debe seguir centrado. */
.s-drop-text > span{ display: block; font-size: 13px; color: var(--s-ink-soft); line-height: 1.4; margin-top: 2px; }
.s-header-actions{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.s-login{ font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 10px; }
.s-login:hover{ background: var(--s-bg-alt); }
.s-burger{
    display: none; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--s-line); background: #fff; color: var(--s-navy); font-size: 18px;
}

/* Menú móvil */
.s-mobile{
    position: fixed; inset: 72px 0 0 0; z-index: 49;
    background: #fff; overflow-y: auto;
    padding: 16px 20px 32px;
    transform: translateX(100%); transition: transform .25s ease;
}
.s-mobile.is-open{ transform: none; }
.s-mobile-group{ border-bottom: 1px solid var(--s-line); padding: 10px 0; }
.s-mobile-title{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-faint); padding: 8px 0; }
.s-mobile a.s-mobile-link{ display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 600; color: var(--s-navy); }
.s-mobile a.s-mobile-link i{ width: 20px; color: var(--s-blue); text-align: center; }
.s-mobile-actions{ display: grid; gap: 10px; margin-top: 24px; }
body.s-menu-open{ overflow: hidden; }

/* ---------- Hero ---------- */
.s-hero{
    position: relative; overflow: hidden;
    padding: 72px 0 96px;
    background:
        radial-gradient(900px 500px at 85% 10%, rgba(165,187,233,.35), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(49, 87, 213,.10), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--s-bg-alt) 100%);
}
.s-hero-grid{ display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.s-badge{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    background: #fff; border: 1px solid var(--s-line);
    font-size: 13px; font-weight: 600; color: var(--s-ink-soft);
    box-shadow: 0 2px 8px -4px rgba(19,33,63,.2);
}
.s-badge b{ background: var(--s-navy); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.s-hero h1{ font-size: clamp(38px, 5.4vw, 62px); font-weight: 800; margin-top: 22px; }
.s-hero h1 em{ font-style: normal; color: var(--s-blue); }
.s-hero-lead{ font-size: 19px; color: var(--s-ink-soft); margin-top: 22px; max-width: 560px; }
.s-hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.s-hero-perks{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--s-ink-soft); font-weight: 500; }
.s-hero-perks li{ display: inline-flex; align-items: center; gap: 8px; }
.s-hero-perks i{ color: var(--s-green); }

/* ---------- Mockups (pantallas dibujadas en HTML/CSS) ---------- */
.s-visual{ position: relative; }
.mock-window{
    position: relative; background: #fff; border-radius: 18px;
    border: 1px solid var(--s-line); box-shadow: var(--s-shadow-lg); overflow: hidden;
}
.mock-bar{ display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--s-bg-alt); border-bottom: 1px solid var(--s-line); }
.mock-bar span{ width: 10px; height: 10px; border-radius: 50%; background: #D7DEE7; }
.mock-bar em{ margin-left: 12px; font-style: normal; font-size: 12px; color: var(--s-ink-faint); background: #fff; border: 1px solid var(--s-line); border-radius: 999px; padding: 3px 14px; }
.mock-body{ padding: 16px; }
.mock-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mock-head strong{ font-family: var(--s-head); font-size: 15px; color: var(--s-navy); }
.mock-head small{ font-size: 12px; color: var(--s-ink-faint); }
.mock-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-col{ background: var(--s-bg-alt); border-radius: 12px; padding: 10px; min-height: 230px; }
.mock-col-title{ display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--s-ink-soft); margin-bottom: 10px; }
.mock-col-title b{ background: #fff; border-radius: 999px; padding: 1px 8px; color: var(--s-navy); }
.mock-card{ background: #fff; border-radius: 10px; padding: 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(19,33,63,.06); border-left: 3px solid var(--s-sky); font-size: 12px; }
.mock-card--new{ border-left-color: var(--s-blue); }
.mock-card--cook{ border-left-color: var(--s-amber); }
.mock-card--ready{ border-left-color: var(--s-green); }
.mock-card-top{ display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--s-navy); font-size: 13px; }
.mock-card ul{ margin: 6px 0 0; padding: 0; list-style: none; color: var(--s-ink-soft); line-height: 1.5; }
.mock-chip{ display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--s-blue-tint); color: var(--s-blue); }
.mock-chip--amber{ background: var(--s-gold-tint); color: var(--s-amber); }
.mock-chip--green{ background: var(--s-green-tint); color: var(--s-green); }
.mock-chip--red{ background: #FBEAE8; color: var(--s-red); }
.mock-line{ height: 8px; border-radius: 6px; background: #E9EEF4; margin-top: 6px; }
.mock-line--60{ width: 60%; } .mock-line--40{ width: 40%; } .mock-line--80{ width: 80%; }

.mock-phone{
    position: absolute; right: -18px; bottom: -40px; width: 210px;
    background: var(--s-navy-deep); border-radius: 34px; padding: 9px;
    box-shadow: 0 30px 60px -20px rgba(10,20,36,.55);
}
.mock-phone--static{ position: relative; right: auto; bottom: auto; margin: 0 auto; width: 260px; }
.mock-screen{ background: #F2F3F5; border-radius: 26px; overflow: hidden; min-height: 380px; position: relative; }
.mock-notch{ width: 70px; height: 18px; background: var(--s-navy-deep); border-radius: 0 0 12px 12px; margin: 0 auto; }
.mock-phone-head{ padding: 10px 14px 12px; background: #fff; }
.mock-phone-head strong{ display: block; font-size: 13px; color: #15181C; font-family: var(--s-head); }
.mock-phone-head small{ font-size: 11px; color: #68707A; }
.mock-tabs{ display: flex; gap: 6px; padding: 10px 12px 4px; overflow: hidden; }
.mock-tabs span{ font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: #68707A; white-space: nowrap; }
.mock-tabs span.is-on{ background: #2E6F4E; color: #fff; }
.mock-product{ display: flex; gap: 10px; align-items: center; background: #fff; margin: 8px 12px 0; padding: 8px; border-radius: 12px; font-size: 11.5px; }
.mock-thumb{ flex: 0 0 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 17px; }
.mock-thumb--1{ background: linear-gradient(135deg, #E8A33D, #C9673F); }
.mock-thumb--2{ background: linear-gradient(135deg, #6BAE75, #2E6F4E); }
.mock-thumb--3{ background: linear-gradient(135deg, #8DA6D9, #3D5A99); }
.mock-product b{ display: block; color: #15181C; font-size: 12px; }
.mock-product span{ color: #68707A; }
.mock-product em{ margin-left: auto; font-style: normal; font-weight: 700; color: #15181C; }
.mock-phone-cta{ position: absolute; left: 12px; right: 12px; bottom: 14px; background: #2E6F4E; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; }
.mock-phone-cta--mp{ background: #009EE3; }

.mock-toast{
    position: absolute; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 14px; padding: 10px 14px;
    box-shadow: var(--s-shadow-lg); font-size: 13px; white-space: nowrap;
    animation: s-float 6s ease-in-out infinite;
}
.mock-toast i{ width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; }
.mock-toast b{ display: block; color: var(--s-navy); font-size: 13px; }
.mock-toast small{ color: var(--s-ink-soft); font-size: 12px; }
.mock-toast--a{ top: -22px; left: -26px; }
.mock-toast--a i{ background: var(--s-gold-tint); color: var(--s-amber); }
.mock-toast--b{ bottom: 22px; left: -38px; animation-delay: -3s; }
.mock-toast--b i{ background: var(--s-green-tint); color: var(--s-green); }
/* Precios: foto con tarjetas flotantes */
.mock-photo picture, .mock-photo img{ display: block; width: 100%; }
.mock-photo img{ aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--s-shadow-lg); }
.mock-toast--c{ top: 42%; right: -30px; animation-delay: -1.5s; }
.mock-toast--c i{ background: var(--s-blue-tint); color: var(--s-blue); }
.mock-photo .mock-toast--b i{ background: var(--s-green-tint); color: var(--s-green); }
.s-pm-title.s-hero-country{ margin: 22px 0 0; justify-content: flex-start; }

/* Preguntas frecuentes: charla con soporte */
.mock-chat{ max-width: 460px; margin-left: auto; }
.mock-chat-head{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--s-navy); color: #fff; }
.mock-chat-avatar{ flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--s-blue); display: grid; place-items: center; overflow: hidden; }
.mock-chat-avatar img{ width: 30px; height: auto; }
.mock-chat-head b{ display: block; font-size: 14px; }
.mock-chat-head small{ font-size: 12px; opacity: .8; }
.mock-chat-head small i{ color: #4ADE80; font-size: 7px; vertical-align: middle; margin-right: 4px; }
.mock-chat-body{ display: grid; gap: 10px; padding: 18px 16px 48px; background: var(--s-bg-alt); }
.mock-bubble{ max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 2px rgba(19,33,63,.06); }
.mock-bubble--in{ justify-self: end; background: var(--s-blue); color: #fff; border-bottom-right-radius: 4px; }
.mock-bubble--out{ justify-self: start; background: #fff; color: var(--s-ink); border-bottom-left-radius: 4px; }
.mock-typing{ justify-self: start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 16px; border-bottom-left-radius: 4px; }
.mock-typing span{ width: 7px; height: 7px; border-radius: 50%; background: var(--s-ink-faint); animation: s-typing 1.2s infinite ease-in-out; }
.mock-typing span:nth-child(2){ animation-delay: .15s; }
.mock-typing span:nth-child(3){ animation-delay: .3s; }
.mock-chat + .mock-toast--a{ top: auto; bottom: -24px; left: -20px; }
.mock-chat + .mock-toast--a i{ background: #E7F8EE; color: #1FA855; }
@keyframes s-typing{ 0%,80%,100%{ transform: translateY(0); opacity: .5; } 40%{ transform: translateY(-4px); opacity: 1; } }

@keyframes s-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* Mini pantallas genéricas (pasos, soluciones) */
.mock-rows{ display: grid; gap: 8px; }
.mock-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--s-bg-alt); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.mock-row b{ color: var(--s-navy); }
.mock-row span{ color: var(--s-ink-soft); }
.mock-total{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px 4px; border-top: 1px dashed var(--s-line); margin-top: 10px; }
.mock-total span{ color: var(--s-ink-soft); font-size: 13px; }
.mock-total b{ font-family: var(--s-head); font-size: 24px; color: var(--s-navy); }
.mock-pay{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.mock-pay span{ display: flex; align-items: center; gap: 8px; justify-content: center; padding: 10px; border-radius: 10px; border: 1.5px solid var(--s-line); font-size: 12.5px; font-weight: 600; color: var(--s-navy); }
.mock-pay span.is-on{ border-color: var(--s-blue); background: var(--s-blue-tint); color: var(--s-blue); }
.mock-kpis{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mock-kpi{ background: var(--s-bg-alt); border-radius: 12px; padding: 12px; }
.mock-kpi small{ font-size: 11px; color: var(--s-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mock-kpi b{ display: block; font-family: var(--s-head); font-size: 22px; color: var(--s-navy); margin-top: 2px; }
.mock-kpi em{ font-style: normal; font-size: 11.5px; color: var(--s-green); font-weight: 700; }
.mock-bars{ display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 12px; padding: 0 4px; }
.mock-bars span{ flex: 1; background: linear-gradient(180deg, var(--s-blue), var(--s-sky)); border-radius: 6px 6px 2px 2px; }
.mock-tables{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-table{ aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--s-navy); background: var(--s-bg-alt); border: 2px solid transparent; position: relative; }
.mock-table--busy{ background: var(--s-blue-tint); color: var(--s-blue); }
.mock-table--bill{ background: var(--s-gold-tint); color: var(--s-amber); border-color: var(--s-gold); }
.mock-table--ready{ background: var(--s-green-tint); color: var(--s-green); }
.mock-table small{ position: absolute; bottom: 6px; font-size: 9.5px; font-weight: 700; }
.mock-wave{ display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.mock-wave span{ width: 5px; border-radius: 4px; background: var(--s-blue); animation: s-wave 1.1s ease-in-out infinite; }
.mock-wave span:nth-child(2n){ animation-delay: -.3s; } .mock-wave span:nth-child(3n){ animation-delay: -.6s; }
@keyframes s-wave{ 0%,100%{ height: 10px; } 50%{ height: 44px; } }
.mock-quote{ background: var(--s-bg-alt); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--s-ink); font-style: italic; }
.mock-branch{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--s-line); }
.mock-branch i{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s-blue-tint); color: var(--s-blue); }
.mock-branch b{ display: block; font-size: 13.5px; color: var(--s-navy); }
.mock-branch small{ font-size: 12px; color: var(--s-ink-soft); }
.mock-branch em{ margin-left: auto; font-style: normal; font-family: var(--s-head); font-weight: 800; color: var(--s-navy); }

/* ---------- Logos / integraciones ---------- */
.s-logos{ padding: 40px 0; border-bottom: 1px solid var(--s-line); }
.s-logos p{ text-align: center; font-size: 14px; color: var(--s-ink-faint); font-weight: 600; margin-bottom: 20px; }
.s-logos-row{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; }
.s-logos-row img{ height: 36px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.s-logos-row img:hover{ filter: none; opacity: 1; }
.s-integrations{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.s-integration{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--s-line); font-weight: 600; font-size: 14px; color: var(--s-navy); }
.s-integration i{ font-size: 18px; }

/* ---------- Cómo funciona (pasos) ---------- */
.s-steps{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.s-step-list{ display: grid; gap: 8px; counter-reset: step; }
.s-step{
    display: flex; gap: 16px; text-align: left; width: 100%;
    padding: 16px 18px; border-radius: 14px; border: 1px solid transparent; background: transparent;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.s-step:hover{ background: #fff; }
.s-step.is-active{ background: #fff; border-color: var(--s-line); box-shadow: var(--s-shadow); }
.s-step-num{ flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #fff; border: 1.5px solid var(--s-line); color: var(--s-ink-soft); transition: all .2s; }
.s-step.is-active .s-step-num{ background: var(--s-blue); border-color: var(--s-blue); color: #fff; }
.s-step strong{ display: block; font-family: var(--s-head); font-size: 17px; color: var(--s-navy); }
.s-step p{ font-size: 14.5px; color: var(--s-ink-soft); margin-top: 4px; display: none; }
.s-step.is-active p{ display: block; }
.s-step-progress{ height: 3px; border-radius: 3px; background: var(--s-line); margin-top: 12px; overflow: hidden; display: none; }
.s-step.is-active .s-step-progress{ display: block; }
.s-step-progress span{ display: block; height: 100%; width: 0; background: var(--s-blue); }
.s-step.is-active.is-playing .s-step-progress span{ animation: s-progress 6s linear forwards; }
@keyframes s-progress{ to{ width: 100%; } }
.s-step-screens{ position: relative; min-height: 400px; }
.s-step-screen{ position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .35s, transform .35s; pointer-events: none; }
.s-step-screen.is-active{ opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Productos ---------- */
.s-product{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.s-product + .s-product{ border-top: 1px solid var(--s-line); }
.s-product--reverse .s-product-copy{ order: 2; }
.s-product-copy h3{ font-size: clamp(26px, 3vw, 36px); font-weight: 800; margin-top: 10px; }
.s-product-copy > p{ margin-top: 14px; color: var(--s-ink-soft); font-size: 17px; }
.s-checks{ list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.s-checks li{ display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.s-checks li i{ flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; margin-top: 1px; background: var(--s-green-tint); color: var(--s-green); }
.s-product-actions{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 28px; }
.s-plan-tag{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--s-sky-tint); color: var(--s-navy-soft); }

/* ---------- Fotos de fondo (site/partials/section-photo) ----------
   La foto va debajo de una capa azul marino que asegura el contraste del
   texto (accesibilidad); el contenido queda arriba de las dos. */
.s-photo-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s-photo-bg img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.s-section--photo{ position: relative; overflow: hidden; }
.s-section--photo::before{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(19,33,63,.8) 0%, rgba(12,22,42,.9) 100%); }
.s-section--photo > .s-container{ position: relative; z-index: 2; }
.s-section--photo .s-card{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.s-section--photo .s-card:hover{ background: rgba(255,255,255,.1); }

.s-cta.s-cta--photo{ text-align: left; padding: 64px 56px; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }
.s-cta.s-cta--photo > .s-photo-bg{ position: absolute; z-index: 0; left: auto; width: 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.s-cta.s-cta--photo > .s-photo-bg img{ object-position: 35% 30%; }
.s-cta.s-cta--photo svg{ z-index: 1; }
/* Orden de capas: foto (0) < círculos (1) < contenido (2). */
.s-cta.s-cta--photo > :not(.s-photo-bg):not(svg){ z-index: 2; max-width: 560px; }
.s-cta.s-cta--photo h2, .s-cta.s-cta--photo p{ margin-left: 0; }
.s-cta.s-cta--photo .s-cta-actions, .s-cta.s-cta--photo ul{ justify-content: flex-start; }

/* Tarjetas chicas: la foto solo a la derecha, fundida con el azul. */
.s-mini--photo{ isolation: isolate; }
.s-mini--photo > :not(.s-photo-bg){ position: relative; z-index: 1; }
.s-mini-photo{ left: auto; width: 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 85%); mask-image: linear-gradient(90deg, transparent 0%, #000 85%); opacity: .45; transition: opacity .3s; }
.s-mini--photo:hover .s-mini-photo{ opacity: .6; }
.s-mini--photo > span:not(.s-mini-icon){ max-width: 66%; }
.s-mini--photo::after{ z-index: 1; }

.s-mini-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.s-mini{ display: flex; gap: 20px; padding: 28px; border-radius: var(--s-radius); background: var(--s-navy); color: #fff; position: relative; overflow: hidden; }
.s-mini::after{ content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(165,187,233,.2); }
.s-mini-icon{ flex: 0 0 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(165,187,233,.16); color: var(--s-sky); font-size: 22px; }
.s-mini h3{ color: #fff; font-size: 20px; }
.s-mini p{ color: rgba(255,255,255,.72); font-size: 15px; margin-top: 6px; }
.s-mini .s-link{ color: var(--s-sky); margin-top: 14px; }

/* ---------- Tarjetas de beneficios / features ---------- */
.s-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-card{ padding: 28px; border-radius: var(--s-radius); background: #fff; border: 1px solid var(--s-line); transition: transform .2s, box-shadow .2s, border-color .2s; }
.s-card:hover{ transform: translateY(-3px); box-shadow: var(--s-shadow); border-color: transparent; }
.s-card-icon{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--s-blue-tint); color: var(--s-blue); font-size: 20px; }
.s-card h3{ font-size: 19px; margin-top: 18px; }
.s-card p{ color: var(--s-ink-soft); font-size: 15px; margin-top: 8px; }
.s-section--navy .s-card{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.s-section--navy .s-card:hover{ background: rgba(255,255,255,.07); }
.s-section--navy .s-card-icon{ background: rgba(165,187,233,.16); color: var(--s-sky); }
.s-section--navy .s-card p{ color: rgba(255,255,255,.7); }

/* ---------- Prueba social ---------- */
.s-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; }
.s-stat b{ display: block; font-family: var(--s-head); font-size: clamp(36px, 4vw, 52px); font-weight: 800; color: var(--s-navy); letter-spacing: -.03em; }
.s-stat span{ color: var(--s-ink-soft); font-weight: 500; }
.s-testimonials{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-testimonial{ display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--s-radius); background: #fff; border: 1px solid var(--s-line); }
.s-stars{ color: #F2B01E; font-size: 14px; letter-spacing: 2px; }
.s-testimonial blockquote{ margin: 0; font-size: 16px; color: var(--s-ink); flex: 1; }
.s-author{ display: flex; align-items: center; gap: 12px; }
.s-avatar{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--s-sky-tint); color: var(--s-navy); display: grid; place-items: center; font-weight: 800; }
.s-author b{ display: block; font-size: 15px; color: var(--s-navy); }
.s-author span{ font-size: 13.5px; color: var(--s-ink-soft); }

/* ---------- Tipos de negocio ---------- */
.s-types{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.s-type{ display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--s-radius); background: #fff; border: 1px solid var(--s-line); transition: all .2s; }
.s-type:hover{ border-color: var(--s-blue); transform: translateY(-3px); box-shadow: var(--s-shadow); }
.s-type i.s-type-icon{ font-size: 26px; color: var(--s-blue); }
.s-type strong{ font-family: var(--s-head); font-size: 17px; color: var(--s-navy); }
.s-type span{ font-size: 14px; color: var(--s-ink-soft); line-height: 1.5; }
.s-type-detail{ display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center; padding: 28px; border-radius: var(--s-radius); background: #fff; border: 1px solid var(--s-line); scroll-margin-top: 96px; }
.s-type-detail + .s-type-detail{ margin-top: 16px; }
.s-type-detail > i{ width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: var(--s-blue-tint); color: var(--s-blue); }
.s-type-detail h2{ font-size: 22px; }
.s-type-detail p{ color: var(--s-ink-soft); margin-top: 6px; }
.s-type-links{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.s-type-links a{ font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--s-bg-alt); color: var(--s-navy); }
.s-type-links a:hover{ background: var(--s-blue-tint); color: var(--s-blue); }

/* ---------- Precios ---------- */
.s-period{ display: inline-flex; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--s-line); gap: 4px; margin: 0 auto 40px; }
.s-period-wrap{ text-align: center; }
.s-period button{ border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--s-ink-soft); display: inline-flex; gap: 8px; align-items: center; }
.s-period button.is-on{ background: var(--s-navy); color: #fff; }
.s-period button small{ font-size: 11.5px; font-weight: 800; color: var(--s-green); background: var(--s-green-tint); padding: 2px 7px; border-radius: 999px; }
.s-period button.is-on small{ background: rgba(255,255,255,.16); color: #9FE0B8; }
.s-plans{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.s-plan{ position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--s-line); }
.s-plan--featured{ border: 2px solid var(--s-blue); box-shadow: 0 30px 60px -30px rgba(49, 87, 213,.5); }
.s-plan-ribbon{ position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--s-blue); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.s-plan h3{ font-size: 24px; font-weight: 800; }
.s-plan-tagline{ color: var(--s-ink-soft); font-size: 14.5px; margin-top: 6px; min-height: 46px; }
.s-plan-price{ margin-top: 22px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.s-plan-price b{ font-family: var(--s-head); font-size: 42px; font-weight: 800; color: var(--s-navy); letter-spacing: -.03em; }
.s-plan-price span{ color: var(--s-ink-soft); font-weight: 600; }
.s-plan-net{ font-size: 12.5px; color: var(--s-ink-faint); margin-top: 4px; }
.s-plan-bill{ font-size: 13px; color: var(--s-green); font-weight: 600; margin-top: 6px; min-height: 20px; }
.s-plan .s-btn{ margin-top: 24px; }
.s-plan-includes{ margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--s-line); flex: 1; }
.s-plan-includes > strong{ display: block; font-size: 14px; color: var(--s-navy); margin-bottom: 14px; }
.s-plan-group + .s-plan-group{ margin-top: 16px; }
.s-plan-group h4{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--s-ink-faint); font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 8px; }
.s-plan-group ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.s-plan-group li{ display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.s-plan-group li i{ color: var(--s-blue); margin-top: 4px; font-size: 12px; }
.pp{ display: none; }
[data-period="monthly"] .pp--monthly,
[data-period="semiannual"] .pp--semiannual,
[data-period="annual"] .pp--annual{ display: inline; }
[data-period="monthly"] .pp-block--monthly,
[data-period="semiannual"] .pp-block--semiannual,
[data-period="annual"] .pp-block--annual{ display: block; }

.s-all-plans{ display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-top: 32px; padding: 28px 32px; border-radius: 20px; background: var(--s-sky-tint); }
.s-all-plans h3{ font-size: 18px; }
.s-all-plans ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.s-all-plans li{ display: flex; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--s-navy); }
.s-all-plans li i{ color: var(--s-green); margin-top: 4px; }
.s-chain{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 28px 32px; border-radius: 20px; background: var(--s-navy); color: #fff; }
.s-chain h3{ color: #fff; font-size: 20px; }
.s-chain p{ color: rgba(255,255,255,.72); margin-top: 4px; }

.s-compare-wrap{ overflow-x: auto; border-radius: 20px; border: 1px solid var(--s-line); background: #fff; }
.s-compare{ width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.s-compare th, .s-compare td{ padding: 14px 20px; border-bottom: 1px solid var(--s-line); text-align: center; }
.s-compare th:first-child, .s-compare td:first-child{ text-align: left; }
.s-compare thead th{ position: sticky; top: 0; background: #fff; font-family: var(--s-head); font-size: 17px; color: var(--s-navy); }
.s-compare thead th small{ display: block; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--s-ink-soft); font-weight: 600; }
.s-compare tr.s-compare-group td{ background: var(--s-bg-alt); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--s-ink-soft); }
.s-compare .fa-check{ color: var(--s-green); }
.s-compare .fa-minus{ color: #CBD3DC; }
.s-compare .is-featured{ background: rgba(229,239,246,.45); }

/* ---------- FAQ ---------- */
.s-faq{ max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.s-faq details{ background: #fff; border: 1px solid var(--s-line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.s-faq details[open]{ border-color: transparent; box-shadow: var(--s-shadow); }
.s-faq summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 16.5px; color: var(--s-navy); }
.s-faq summary::-webkit-details-marker{ display: none; }
.s-faq summary i{ flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--s-bg-alt); color: var(--s-ink-soft); font-size: 12px; transition: transform .2s, background .2s; }
.s-faq details[open] summary i{ transform: rotate(45deg); background: var(--s-blue); color: #fff; }
.s-faq details p{ padding: 0 24px 22px; color: var(--s-ink-soft); }
.s-faq-more{ text-align: center; margin-top: 32px; }

/* ---------- CTA final ---------- */
.s-cta{ position: relative; overflow: hidden; border-radius: 28px; padding: 72px 40px; text-align: center; color: #fff; background: radial-gradient(600px 300px at 80% 0%, rgba(165,187,233,.28), transparent 60%), linear-gradient(135deg, var(--s-navy) 0%, var(--s-navy-deep) 100%); }
.s-cta svg{ position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--s-sky); opacity: .12; pointer-events: none; }
.s-cta > *{ position: relative; }
.s-cta h2{ color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 800; max-width: 760px; margin: 0 auto; }
.s-cta p{ color: rgba(255,255,255,.75); font-size: 18px; margin: 16px auto 0; max-width: 620px; }
.s-cta-actions{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.s-cta ul{ list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; font-size: 14.5px; color: rgba(255,255,255,.8); }
.s-cta li i{ color: #7FD1A0; margin-right: 6px; }

/* ---------- Página de solución / interna ---------- */
.s-page-hero{ padding: 72px 0 80px; background: radial-gradient(800px 400px at 90% 0%, rgba(165,187,233,.35), transparent 60%), linear-gradient(180deg, #fff, var(--s-bg-alt)); }
.s-page-hero .s-hero-grid{ grid-template-columns: 1.05fr 1fr; }
.s-page-hero h1{ font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; margin-top: 14px; }
.s-page-hero--center{ text-align: center; }
.s-page-hero--center p{ margin-left: auto; margin-right: auto; }
.s-page-hero--center h1{ max-width: 860px; margin-left: auto; margin-right: auto; }
.s-breadcrumb{ display: flex; gap: 8px; font-size: 13px; color: var(--s-ink-faint); font-weight: 600; }
.s-breadcrumb a:hover{ color: var(--s-blue); }
.s-related{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---------- Contacto ---------- */
.s-contact{ display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.s-contact-aside h1{ font-size: clamp(32px, 4vw, 48px); font-weight: 800; margin-top: 14px; }
.s-contact-aside > p{ color: var(--s-ink-soft); font-size: 17px; margin-top: 16px; }
.s-contact-ways{ display: grid; gap: 12px; margin-top: 32px; }
.s-contact-way{ display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--s-line); background: #fff; transition: border-color .2s; }
.s-contact-way:hover{ border-color: var(--s-blue); }
.s-contact-way > i{ flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--s-blue-tint); color: var(--s-blue); }
.s-contact-way > i.fa-whatsapp{ background: #E3F7EA; color: #1FA855; }
.s-contact-way b{ display: block; color: var(--s-navy); }
.s-contact-way span{ font-size: 14px; color: var(--s-ink-soft); }
.s-form{ padding: 36px; border-radius: 24px; background: #fff; border: 1px solid var(--s-line); box-shadow: var(--s-shadow-lg); }
.s-form h2{ font-size: 24px; }
.s-form > p{ color: var(--s-ink-soft); margin-top: 6px; font-size: 15px; }
.s-form-plan{ display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--s-sky-tint); font-size: 14px; color: var(--s-navy); }
.s-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.s-form-grid .is-full{ grid-column: 1 / -1; }
.site-field label, .s-field label{ display: block; font-size: 14px; font-weight: 600; color: var(--s-navy); margin-bottom: 6px; }
.site-req{ color: var(--s-red); margin-left: 2px; }
.site-hint{ color: var(--s-ink-faint); font-weight: 500; font-size: 12.5px; margin-left: 4px; }
.s-input, .site-combo-input{
    width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--s-line); background: #fff;
    font: inherit; font-size: 15px; color: var(--s-ink); transition: border-color .15s, box-shadow .15s;
}
.s-input:focus{ outline: none; border-color: var(--s-blue); box-shadow: 0 0 0 4px var(--s-blue-tint); }
textarea.s-input{ resize: vertical; min-height: 96px; }
.site-combo{ position: relative; }
.site-combo-input{ display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.site-combo-input.is-open{ border-color: var(--s-blue); box-shadow: 0 0 0 4px var(--s-blue-tint); }
.site-placeholder{ color: var(--s-ink-faint); }
.site-chev{ font-size: 12px; color: var(--s-ink-faint); }
.site-combo-panel{ position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--s-line); border-radius: 12px; box-shadow: var(--s-shadow-lg); overflow: hidden; }
.site-combo-search{ padding: 8px; border-bottom: 1px solid var(--s-line); }
.site-combo-search input{ width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--s-line); font: inherit; font-size: 14px; }
.site-combo-search input:focus{ outline: none; border-color: var(--s-blue); }
.site-combo-list{ max-height: 220px; overflow-y: auto; }
.site-combo-option{ padding: 10px 14px; font-size: 14.5px; cursor: pointer; }
.site-combo-option:hover{ background: var(--s-blue-tint); }
.site-combo-empty{ padding: 14px; text-align: center; font-size: 13px; color: var(--s-ink-soft); }
.site-error{ font-size: 12.5px; color: var(--s-red); margin-top: 4px; }
.s-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-form-legal{ font-size: 12.5px; color: var(--s-ink-faint); margin-top: 14px; text-align: center; }
.s-form-legal a{ text-decoration: underline; }
.s-thanks{ max-width: 640px; margin: 0 auto; text-align: center; }
.s-thanks-icon{ width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 34px; background: var(--s-green-tint); color: var(--s-green); }
.s-thanks h1{ font-size: clamp(30px, 4vw, 44px); font-weight: 800; margin-top: 24px; }
.s-thanks > p{ color: var(--s-ink-soft); font-size: 18px; margin-top: 14px; }
.s-thanks .s-cta-actions{ margin-top: 28px; }

/* ---------- Texto legal ---------- */
.s-prose{ max-width: 780px; margin: 0 auto; }
.s-prose h2{ font-size: 22px; margin: 40px 0 12px; }
.s-prose p, .s-prose li{ color: var(--s-ink-soft); }
.s-prose p + p{ margin-top: 12px; }
.s-prose ul{ padding-left: 20px; }
.s-prose a{ color: var(--s-blue); text-decoration: underline; }

/* ---------- Footer ---------- */
.s-footer{ background: var(--s-navy-deep); color: rgba(255,255,255,.72); padding: 72px 0 32px; margin-top: 0; }
.s-footer-grid{ display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.s-footer-brand img{ width: 120px; height: auto; }
.s-footer-brand p{ font-size: 14.5px; margin-top: 16px; max-width: 280px; }
.s-footer h4{ color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 16px; }
.s-footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.s-footer a:hover{ color: #fff; }
.s-footer-social{ display: flex; gap: 10px; margin-top: 20px; }
.s-footer-social a{ width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #fff; }
.s-footer-social a:hover{ background: rgba(255,255,255,.14); }
.s-footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; }
.s-footer-bottom nav{ display: flex; gap: 20px; }

/* ---------- WhatsApp flotante ---------- */
.s-wa{
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: inline-flex; align-items: center; justify-content: center;
    height: 56px; min-width: 56px; padding: 0 15px; border-radius: 999px;
    background: #1FA855; color: #fff;
    box-shadow: 0 14px 30px -10px rgba(31,168,85,.7);
    font-weight: 700; font-size: 15px; transition: transform .2s, padding .2s;
}
.s-wa i{ font-size: 26px; line-height: 1; width: 26px; text-align: center; }
/* El texto colapsado no ocupa lugar (ni su margen): el ícono queda centrado. */
.s-wa span{ max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s, margin-left .3s; }
.s-wa:hover{ transform: translateY(-2px); padding-right: 20px; }
.s-wa:hover span{ max-width: 200px; margin-left: 10px; }

/* ---------- Aparición al hacer scroll ---------- */
/* Solo se oculta si hay JS (clase s-js en <html>): sin JS se ve todo. */
.s-js .s-reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.s-js .s-reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
    .s-js .s-reveal{ opacity: 1; transform: none; transition: none; }
    .mock-toast, .mock-wave span{ animation: none; }
    html{ scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
    .s-nav, .s-login, .s-header-actions .s-btn--ghost{ display: none; }
    .s-burger{ display: grid; place-items: center; }
    .s-footer-grid{ grid-template-columns: repeat(3, 1fr); }
    .s-footer-brand{ grid-column: 1 / -1; }
    .s-types, .s-related{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px){
    .s-section{ padding: 72px 0; }
    .s-hero-grid, .s-page-hero .s-hero-grid, .s-steps, .s-product, .s-contact{ grid-template-columns: 1fr; gap: 48px; }
    .s-product--reverse .s-product-copy{ order: 0; }
    .s-hero{ padding: 48px 0 88px; }
    .s-visual{ max-width: 560px; margin: 0 auto; width: 100%; }
    .s-cards, .s-testimonials, .s-plans{ grid-template-columns: 1fr; }
    .s-plans{ max-width: 480px; margin: 0 auto; }
    .s-mini-grid{ grid-template-columns: 1fr; }
    .s-mini--photo > span:not(.s-mini-icon){ max-width: none; }
    .s-all-plans{ grid-template-columns: 1fr; }
    .s-all-plans ul{ grid-template-columns: 1fr 1fr; }
    .s-chain{ flex-direction: column; align-items: flex-start; }
    .s-step-screens{ min-height: 380px; }
}
@media (max-width: 640px){
    /* En celular las tarjetas chicas no llevan foto: el texto ocupa todo. */
    .s-mini-photo{ display: none; }
    .s-container{ padding: 0 16px; }
    .s-section{ padding: 56px 0; }
    .s-heading{ margin-bottom: 36px; }
    .s-hero-ctas .s-btn{ flex: 1 1 100%; }
    .mock-cols{ grid-template-columns: repeat(2, 1fr); }
    .mock-cols .mock-col:nth-child(3){ display: none; }
    .mock-phone{ width: 150px; right: -6px; bottom: -48px; border-radius: 26px; padding: 6px; }
    .mock-toast--c{ right: -6px; }
    .mock-photo .mock-toast--a, .mock-photo .mock-toast--b{ left: -6px; }
    .mock-chat{ margin: 0 auto; }
    .mock-chat + .mock-toast--a{ left: -6px; }
    .mock-screen{ min-height: 280px; border-radius: 20px; }
    .mock-phone .mock-product{ margin: 6px 8px 0; padding: 6px; }
    .mock-phone .mock-thumb{ flex-basis: 32px; height: 32px; font-size: 13px; }
    .mock-phone .mock-product em{ display: none; }
    .mock-toast{ font-size: 12px; padding: 8px 10px; }
    .mock-toast--a{ left: -4px; top: -26px; }
    .mock-toast--b{ left: -4px; bottom: -30px; }
    .s-types, .s-related{ grid-template-columns: 1fr; }
    .s-type-detail{ grid-template-columns: 1fr; gap: 14px; }
    .s-form{ padding: 24px 18px; }
    .s-form-grid{ grid-template-columns: 1fr; }
    .s-all-plans ul{ grid-template-columns: 1fr; }
    .s-all-plans, .s-chain{ padding: 24px 20px; }
    .s-cta{ padding: 52px 20px; border-radius: 22px; }
    /* Celular: la foto arriba, como portada, fundida hacia abajo con el azul. */
    .s-cta.s-cta--photo{ text-align: center; padding: 220px 20px 44px; min-height: 0; }
    .s-cta.s-cta--photo > .s-photo-bg{ width: 100%; height: 260px; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
    .s-cta.s-cta--photo > :not(.s-photo-bg):not(svg){ max-width: none; }
    .s-cta.s-cta--photo h2, .s-cta.s-cta--photo p{ margin-left: auto; }
    .s-cta.s-cta--photo .s-cta-actions, .s-cta.s-cta--photo ul{ justify-content: center; }
    .s-cta-actions .s-btn{ flex: 1 1 100%; }
    .s-footer-grid{ grid-template-columns: 1fr 1fr; }
    .s-period{ flex-wrap: wrap; justify-content: center; border-radius: 18px; }
    .s-period button{ padding: 9px 14px; }
    .s-wa{ right: 14px; bottom: 14px; }
}

/* Link "Saltar al contenido": oculto hasta que recibe foco con teclado. */
.s-skip{ position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--s-navy); color: #fff; font-weight: 700; }
.s-skip:focus{ top: 12px; }

/* ---------- Medios de pago por país (home) ---------- */
.s-pm-title{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 14px; color: var(--s-ink-faint); font-weight: 600; }
.s-country{ position: relative; display: inline-block; }
.s-country summary{
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; border: 1px solid var(--s-line); background: #fff;
    color: var(--s-navy); font-weight: 700;
}
.s-country summary::-webkit-details-marker{ display: none; }
.s-country summary i{ font-size: 10px; transition: transform .2s; }
.s-country[open] summary i{ transform: rotate(180deg); }
.s-country-menu{
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: 240px; max-height: 300px; overflow-y: auto; padding: 6px;
    background: #fff; border: 1px solid var(--s-line); border-radius: 12px; box-shadow: var(--s-shadow-lg);
    text-align: left;
}
.s-country-menu a{ display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--s-ink); }
.s-country-menu a:hover{ background: var(--s-bg-alt); }
.s-country-menu a.is-on{ background: var(--s-blue-tint); color: var(--s-blue); font-weight: 700; }
.s-integration img{ width: 20px; height: 20px; object-fit: contain; }
.s-integration-emoji{ font-size: 17px; line-height: 1; }

/* ==========================================================================
   Páginas legales (Términos, Privacidad): mismo encabezado, índice lateral
   y estilos de contenido. Ver site/partials/legal-header y legal-toc.
   ========================================================================== */
.s-legal-meta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: var(--s-ink-soft); }
.s-legal-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.s-legal-meta i{ color: var(--s-blue); }
.s-legal-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

.s-legal{ display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.s-toc{ position: sticky; top: 96px; }
.s-toc-title{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-faint); margin-bottom: 10px; }
.s-toc ol{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.s-toc li{ counter-increment: toc; }
.s-toc a{ display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--s-ink-soft); line-height: 1.4; }
.s-toc a::before{ content: counter(toc, decimal-leading-zero); font-weight: 700; color: var(--s-ink-faint); font-size: 12px; padding-top: 1px; }
.s-toc a:hover{ background: var(--s-bg-alt); color: var(--s-navy); }
.s-toc a[aria-current="true"]{ background: var(--s-blue-tint); color: var(--s-blue); font-weight: 600; }
.s-toc a[aria-current="true"]::before{ color: var(--s-blue); }
.s-toc-mobile{ display: none; margin-bottom: 24px; }
.s-toc-mobile details{ border: 1px solid var(--s-line); border-radius: 12px; background: #fff; }
.s-toc-mobile summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 700; color: var(--s-navy); }
.s-toc-mobile summary::-webkit-details-marker{ display: none; }
.s-toc-mobile ol{ padding: 0 8px 10px; }
.s-toc-mobile .s-toc{ position: static; }

.s-legal .s-prose{ max-width: none; margin: 0; }
.s-prose section{ scroll-margin-top: 96px; }
.s-prose section + section{ margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--s-line); }
.s-prose > p + section{ margin-top: 28px; }
.s-prose h2{ display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 24px; }
.s-prose h3{ font-size: 17px; margin: 22px 0 8px; }
.s-sec-num{ font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; color: var(--s-blue); background: var(--s-blue-tint); padding: 3px 9px; border-radius: 999px; letter-spacing: 0; }
.s-prose ul{ display: grid; gap: 8px; margin: 12px 0; }
.s-prose ul ul{ margin-top: 8px; }
.s-prose strong{ color: var(--s-ink); }

.s-table-wrap{ overflow-x: auto; margin: 16px 0; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; }
.s-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
.s-table th{ text-align: left; padding: 12px 16px; background: var(--s-bg-alt); color: var(--s-navy); font-size: 13px; font-weight: 700; }
.s-table td{ padding: 12px 16px; border-top: 1px solid var(--s-line); color: var(--s-ink-soft); vertical-align: top; }
.s-table td:first-child{ color: var(--s-navy); font-weight: 600; white-space: nowrap; }
.s-table td:first-child i{ color: var(--s-blue); width: 18px; margin-right: 8px; }

.s-callout{ display: flex; gap: 14px; align-items: flex-start; margin: 16px 0; padding: 16px 18px; border-radius: 14px; background: var(--s-blue-tint); }
.s-callout > i{ font-size: 18px; color: var(--s-blue); margin-top: 2px; }
.s-callout p{ margin: 0; color: var(--s-ink); }
.s-callout--never{ background: #FBEAE8; }
.s-callout--never > i{ color: var(--s-red); }

.s-roles, .s-rights{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.s-rights{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-role, .s-right{ padding: 18px; border-radius: 14px; border: 1px solid var(--s-line); background: #fff; }
.s-role h3, .s-right h3{ margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.s-role h3 i, .s-right > i{ color: var(--s-blue); }
.s-right > i{ font-size: 18px; margin-bottom: 8px; display: block; }
.s-role p, .s-right p{ margin: 0; font-size: 14.5px; }
.s-role-mark{ width: 18px; height: 18px; border-radius: 4px; }
.s-operator{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.s-operator div{ padding: 12px 14px; border-radius: 12px; background: var(--s-bg-alt); }
.s-operator dt{ font-size: 12px; color: var(--s-ink-faint); font-weight: 600; }
.s-operator dd{ margin: 2px 0 0; color: var(--s-navy); font-weight: 600; }
.s-legal-contact{ padding: 24px; border-radius: 18px; background: var(--s-navy); }
.s-legal-contact h2, .s-legal-contact p{ color: #fff; }
.s-legal-contact p{ color: rgba(255,255,255,.75) !important; }
.s-legal-contact .s-sec-num{ background: rgba(165,187,233,.18); color: var(--s-sky); }
.s-legal-contact .s-cta-actions{ justify-content: flex-start; margin-top: 18px; }
.s-legal-missing{ display: flex; gap: 10px; color: #F2C9C3 !important; }

@media (max-width: 960px){
    .s-legal{ grid-template-columns: 1fr; gap: 0; }
    .s-legal > .s-toc{ display: none; }
    .s-toc-mobile{ display: block; }
    .s-rights{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
    .s-roles, .s-rights, .s-operator{ grid-template-columns: 1fr; }
    .s-table td:first-child{ white-space: normal; }
    .s-prose h2{ font-size: 21px; }
}
@media print{
    .s-header, .s-mobile, .s-footer, .s-wa, .s-toc, .s-toc-mobile, .s-legal-actions{ display: none !important; }
    .s-page-hero{ padding: 0 0 16px; background: none; }
    .s-legal{ display: block; }
    .s-js .s-reveal{ opacity: 1; transform: none; }
    .s-legal-contact{ background: none; padding: 0; }
    .s-legal-contact h2, .s-legal-contact p{ color: #000 !important; }
}

/* ---------- Límites del plan y "Próximamente" ---------- */
.s-plan-limits{ list-style: none; margin: 18px 0 0; padding: 12px 14px; display: grid; gap: 6px; border-radius: 12px; background: var(--s-bg-alt); font-size: 14px; font-weight: 600; color: var(--s-navy); }
.s-plan-limits li{ display: flex; align-items: center; gap: 10px; }
.s-plan-limits i{ color: var(--s-blue); width: 16px; text-align: center; }
.s-soon{ display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--s-gold-tint); color: var(--s-amber); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.s-plan-group li.is-soon{ color: var(--s-ink-soft); }
.s-plan-group li.is-soon i{ color: var(--s-amber); }
.s-all-plans li .fa-clock{ color: var(--s-amber); }
.s-compare-hint{ font-size: 12px; color: var(--s-ink-faint); font-weight: 500; }

/* ---------- Medios para pagar el plan (/precios, /suscripcion) ---------- */
.s-billing{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.s-billing-card{ display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--s-line); }
.s-billing-card header{ display: flex; align-items: center; gap: 12px; }
.s-billing-icon{ flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--s-blue-tint); color: var(--s-blue); }
.s-billing-card strong{ display: block; color: var(--s-navy); font-size: 16px; }
.s-billing-card small{ color: var(--s-ink-faint); font-size: 12.5px; font-weight: 600; }
.s-billing-card dl{ margin: 0; display: grid; gap: 8px; }
.s-billing-card dl div{ padding: 9px 12px; border-radius: 10px; background: var(--s-bg-alt); }
.s-billing-card dt{ font-size: 11.5px; color: var(--s-ink-faint); font-weight: 600; }
.s-billing-card dd{ margin: 2px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--s-navy); font-weight: 600; font-size: 14.5px; word-break: break-all; }
.s-copy{ flex-shrink: 0; border: 0; background: #fff; color: var(--s-blue); width: 30px; height: 30px; border-radius: 8px; }
.s-copy:hover{ background: var(--s-blue-tint); }
.s-billing-card p{ margin: 0; font-size: 14px; color: var(--s-ink-soft); }
.s-billing-card .s-btn{ align-self: flex-start; }

/* /negocios: misma grilla de tarjetas que el home, con soluciones y CTA. */
.s-types--detail{ grid-template-columns: repeat(3, 1fr); }
.s-type--detail{ scroll-margin-top: 96px; }
.s-type--detail .s-type-links{ margin-top: 4px; }
.s-type--detail .s-type-cta{ margin-top: auto; padding-top: 6px; font-size: 14.5px; }
.s-type--detail:target{ border-color: var(--s-blue); box-shadow: 0 0 0 4px var(--s-blue-tint); }
@media (max-width: 1080px){ .s-types--detail{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .s-types--detail{ grid-template-columns: 1fr; } }

/* ---------- Modo plataforma (logueado en Privacidad / Términos) ---------- */
/* Header: solo logo + "Ir al Dashboard", también en mobile (no hay menú). */
.s-header--compact .s-header-actions .s-btn--ghost{ display: inline-flex; }
/* Footer: marca a la izquierda y contacto pegado al borde derecho (alineado
   con los links legales de abajo); la columna mide lo que su contenido. */
.s-footer-grid--compact{ grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1080px){
    .s-footer-grid--compact .s-footer-brand{ grid-column: auto; }
}
@media (max-width: 640px){
    .s-footer-grid--compact{ grid-template-columns: 1fr; }
}