/* =========================================================
   Fuente propia · servida desde el mismo dominio (sin Google Fonts):
   el teléfono no abre conexiones a otro servidor para leer el texto.
   ========================================================= */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pjs-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pjs-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/pjs-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pjs-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/pjs-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================
   El arrastre lateral NO mueve la página.
   Solo las cajas marcadas con .scroll-x se deslizan de lado,
   y al llegar a su orilla el gesto se queda ahí (no se contagia).
   ========================================================= */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { max-width: 100%; }
img, svg, video { max-width: 100%; }

.scroll-x {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   Case Factor · Sistema de diseño compartido (todas las páginas)
   Tokens semánticos, componentes y utilidades.
   ========================================================= */

/* Paleta clara de descanso visual: fondo blanco roto cálido (sin deslumbrar),
   texto casi negro, un solo acento azul para enlaces/íconos y el naranja
   reservado a botones. Todos los pares texto/fondo cumplen 4.5:1. */
:root {
    --bg: #F7F6F2;
    --surface: #FFFFFF;
    --surface-2: #F1F0EB;
    --line: #E6E4DD;
    --line-2: #CFCDC4;
    --fg: #1A1D24;
    --muted: #4B5563;
    --subtle: #6B7280;
    --brand: #1D6FD6;
    --brand-soft: #1A5FBF;
    --brand-tint: rgba(29, 111, 214, .08);
    --cta: #F7931E;
    --cta-hover: #E8850F;
    --cta-fg: #14100A;
    --cta-ink: #B45309;
    --danger: #DC2626;
    --ring: #1D6FD6;
    --radius: 1rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

/* Base tipográfica ligeramente mayor: todo el sistema escala en rem */
html { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (min-width: 1024px) { html { font-size: 18px; } }
body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ----- Accesibilidad ----- */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--fg); color: var(--bg); padding: .6rem 1rem; border-radius: .5rem; font-weight: 600;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }
button, a { touch-action: manipulation; }

/* ----- Iconos (sprite Lucide inline) ----- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-box {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem; flex: none;
    background: var(--brand-tint); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.icon-box.is-cta { background: rgba(247, 147, 30, .14); color: var(--cta-ink); }
.icon-box.is-danger { background: rgba(220, 38, 38, .1); color: var(--danger); }
.step-num {
    width: 2.5rem; height: 2.5rem; border-radius: .75rem;
    background: var(--brand-tint); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem; margin-bottom: 1.25rem;
}

/* ----- Botones ----- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: 0 1.5rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
    cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--cta); color: var(--cta-fg); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn-secondary { border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-soft); background: var(--brand-tint); }
.btn-ghost { background: transparent; color: var(--muted); padding: 0 1rem; }
.btn-ghost:hover { color: var(--fg); background: rgba(0, 0, 0, .04); }
.btn-sm { min-height: 2.5rem; padding: 0 1.1rem; font-size: .875rem; }
.btn-block { width: 100%; }
.link { color: var(--brand-soft); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Superficies ----- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: 0 10px 30px -18px rgba(26, 29, 36, .25); }
.card.is-featured { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(247, 147, 30, .12); }
.card.is-featured:hover { border-color: var(--cta-hover); }
.card.is-static:hover { border-color: var(--line); box-shadow: none; }
.card.is-static.is-featured:hover { border-color: var(--cta); }
.inset { background: var(--surface-2); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; }
.inset.is-cta { background: rgba(247, 147, 30, .08); border-color: rgba(247, 147, 30, .35); }
.inset.is-danger { background: rgba(220, 38, 38, .05); border-color: rgba(220, 38, 38, .25); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand-soft);
}
.eyebrow.is-cta { color: var(--cta-ink); }
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem; border-radius: 999px;
    background: var(--cta); color: var(--cta-fg);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.note { font-size: .85rem; color: var(--subtle); line-height: 1.6; }

/* ----- Stats (hero) ----- */
.stat {
    padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: .9rem;
    background: var(--surface); min-width: 8.5rem;
}
.stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--fg); line-height: 1.1; }
.stat b.is-brand { color: var(--brand-soft); }
.stat b.is-cta { color: var(--cta-ink); }
.stat span { display: block; margin-top: .25rem; font-size: .8rem; color: var(--subtle); font-weight: 500; }

/* ----- Media slot: aquí van los videos (poster ahora, <video> después) ----- */
.media-slot {
    position: relative; overflow: hidden; width: 100%;
    border-radius: 1.5rem; border: 1px solid var(--line); background: var(--surface-2);
    box-shadow: 0 24px 48px -24px rgba(26, 29, 36, .3);
}
.media-slot > img, .media-slot > video, .media-slot > iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media-slot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(15, 17, 22, .72) 0%, rgba(15, 17, 22, 0) 45%);
}
/* Los textos sobre la imagen siguen en claro: van sobre el degradado oscuro */
.media-caption {
    position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-size: .8rem; font-weight: 600; color: #FFFFFF;
}
.media-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border-radius: 999px;
    background: rgba(15, 17, 22, .7); border: 1px solid rgba(255, 255, 255, .18);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #E5E7EB;
    backdrop-filter: blur(6px);
}
.media-card {
    position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1;
    background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1rem; padding: 1rem 1.1rem; backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.media-card small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.media-card b { display: block; margin-top: .25rem; font-size: 1rem; font-weight: 700; color: var(--fg); }
.media-card p { margin-top: .25rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.media-card p strong { color: var(--brand-soft); }

/* ----- Tabs de servicios (index) ----- */
.tab {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
    border: 1px solid var(--line); background: transparent;
    color: var(--muted); font-weight: 600; font-size: .9rem; cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--fg); border-color: var(--line-2); }
.tab[aria-selected="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-soft); }
.panel[hidden] { display: none; }
.panel { animation: panelIn .35s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Listas ----- */
.check-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--muted); line-height: 1.6; }
.check-list .icon { color: var(--brand); margin-top: .2rem; }
.check-list .icon.is-cta { color: var(--cta-ink); }
.check-list .icon.is-danger { color: var(--danger); }
.check-list li.is-off { color: var(--subtle); }

/* ----- Tablas ----- */
.compare { min-width: 44rem; border-collapse: separate; border-spacing: 0; font-size: .9rem; width: 100%; }
.compare.is-compact { min-width: 32rem; }
.compare th, .compare td { padding: 1rem 1.1rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); background: var(--surface-2); }
.compare thead th.is-hi { color: var(--cta-ink); }
.compare thead th:first-child { border-top-left-radius: var(--radius); }
.compare thead th:last-child { border-top-right-radius: var(--radius); }
.compare tbody th { color: var(--fg); font-weight: 600; white-space: nowrap; background: var(--surface); }
.compare tbody td { color: var(--muted); font-variant-numeric: tabular-nums; }
.compare tbody td.is-hi { color: var(--fg); font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) th, .compare tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .015); }

/* Filas de cálculo (precio − maquila − envío) */
.calc { font-size: .95rem; }
.calc > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc > div.is-total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .9rem; color: var(--fg); font-weight: 700; }
.calc > div.is-total b { font-size: 1.35rem; color: var(--brand-soft); }
.calc > div.is-total b.is-cta { color: var(--cta-ink); }
.calc > div.is-dim { color: var(--subtle); font-size: .875rem; }

/* ----- FAQ con <details> nativo ----- */
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq + .faq { margin-top: .75rem; }
.faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; font-weight: 600; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--brand); transition: transform .25s var(--ease); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq p { padding: 0 1.25rem 1.25rem; color: var(--muted); line-height: 1.65; }

/* ----- Reveal (una sola animación, sutil) ----- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ----- Nav ----- */
#mobileMenu[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .panel { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* =========================================================
   Barra fija de acción en celular
   Las páginas miden entre 10 y 24 pantallas; el botón no puede
   vivir solo hasta arriba. Aparece al pasar el encabezado y se
   esconde al llegar al pie para no tapar los enlaces.
   ========================================================= */
.cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: .6rem; align-items: center;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .28s var(--ease);
}
.cta-bar.is-in { transform: translateY(0); }
.cta-bar .btn { flex: 1; min-height: 2.9rem; font-size: .9rem; padding: 0 .9rem; }
.cta-bar .cta-bar-nota { display: none; }
@media (min-width: 768px) { .cta-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-bar { transition: none; } }

/* =========================================================
   Video en las figuras: se descarga SOLO si lo piden
   (preload="none" + portada). Sin esto, un video por página
   volvería a hacer pesada la carga en celular.
   ========================================================= */
.media-slot .video-play {
    position: absolute; inset: 0; z-index: 2; display: flex;
    align-items: center; justify-content: center; gap: .6rem;
    background: transparent; border: 0; cursor: pointer; color: #fff;
}
.media-slot .video-play span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4.5rem; height: 4.5rem; border-radius: 999px;
    background: rgba(15, 17, 22, .62); border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px); transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.media-slot .video-play:hover span { transform: scale(1.06); background: rgba(15, 17, 22, .78); }
.media-slot .video-play .icon { width: 1.6rem; height: 1.6rem; margin-left: .18rem; fill: currentColor; stroke: none; }
.media-slot.is-playing .video-play,
.media-slot.is-playing .media-caption { opacity: 0; pointer-events: none; }
.media-slot.is-playing::after { opacity: 0; }
.media-slot::after, .media-slot .media-caption, .media-slot .video-play { transition: opacity .25s var(--ease); }

/* =========================================================
   Calculadora de ganancias
   ========================================================= */
.calc-panel { display: grid; gap: 1.1rem; }
.calc-campo { display: grid; gap: .4rem; }
.calc-campo > label { font-size: .8rem; font-weight: 700; color: var(--subtle); letter-spacing: .02em; }
.calc-campo select, .calc-campo input[type="number"] {
    width: 100%; min-height: 3rem; padding: 0 .9rem; border-radius: .75rem;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
    font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
}
.calc-campo select:focus-visible, .calc-campo input:focus-visible { border-color: var(--brand); }
.calc-seg { display: flex; gap: .5rem; }
.calc-seg button {
    flex: 1; min-height: 3rem; padding: 0 .6rem; border-radius: .75rem; cursor: pointer;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
    font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2;
}
.calc-seg button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-soft); }
.calc-rango { display: grid; gap: .3rem; }
.calc-rango input[type="range"] { width: 100%; accent-color: var(--brand); height: 2.5rem; }
.calc-salida { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.calc-caja { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--surface); }
.calc-caja.is-hi { border-color: var(--cta); background: rgba(247, 147, 30, .06); }
.calc-caja small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.calc-caja b { display: block; margin-top: .35rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc-caja .calc-mes { display: block; margin-top: .5rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc-caja .calc-mes strong { color: var(--fg); font-weight: 700; }
.calc-veredicto { border-radius: var(--radius); padding: .9rem 1rem; background: var(--surface-2); border: 1px solid var(--line); font-size: .9rem; color: var(--muted); line-height: 1.5; }
.calc-veredicto strong { color: var(--fg); }
.calc-veredicto.is-alerta { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .3); color: var(--danger); }
@media (max-width: 380px) { .calc-salida { grid-template-columns: 1fr; } }