/* ═══════════════════════════════════════════════════════════════════════════
   MedExpert Store — tema claro premium (2026-10-24, rediseño)
   Marfil frío + blanco, tinta azul marino, índigo/violeta de la marca como acento.
   Las ilustraciones 3D comparten el fondo #F5F6FB: tarjeta e imagen se funden.
   ═══════════════════════════════════════════════════════════════════════════ */
body.mk-store {
    --st-bg: #f5f6fb;
    --st-bg-2: #eef0f8;
    --st-card: #ffffff;
    --st-ink: #0e1330;
    --st-ink-2: #454c6b;
    --st-muted: #7d84a0;
    --st-line: #e4e7f1;
    --st-line-2: #d7dbea;
    --st-indigo: #4f46e5;
    --st-indigo-2: #6366f1;
    --st-violet: #8b5cf6;
    --st-lila: #eef0ff;
    --st-ok: #059669;
    --st-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --st-sombra-1: 0 1px 2px rgba(14, 19, 48, .05), 0 1px 1px rgba(14, 19, 48, .03);
    --st-sombra-2: 0 2px 6px rgba(14, 19, 48, .04), 0 18px 40px -18px rgba(49, 46, 129, .22);
    --st-sombra-3: 0 4px 10px rgba(14, 19, 48, .05), 0 32px 70px -24px rgba(79, 70, 229, .35);
    --st-r: 22px;
    --st-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --st-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0; background: var(--st-bg); color: var(--st-ink); font-family: var(--st-sans);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.mk-store a { color: inherit; }
body.mk-store ::selection { background: rgba(99, 102, 241, .18); }
.st-wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.st-fondo {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(139, 92, 246, .12), transparent 60%),
        radial-gradient(700px 480px at -10% 10%, rgba(79, 70, 229, .10), transparent 60%),
        linear-gradient(180deg, #f8f9fd 0%, var(--st-bg) 40%);
}
.st-main, .st-header, .st-footer { position: relative; z-index: 1; }
.st-solo-escritorio { display: inline-flex; }

/* ─── Botones ─── */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1.15rem;
    border-radius: 12px; font: 600 .92rem/1 var(--st-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.st-btn-primario { background: var(--st-grad); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .7); }
.st-btn-primario:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(79, 70, 229, .8); }
.st-btn-primario:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.st-btn-oscuro { background: var(--st-ink); color: #fff !important; }
.st-btn-oscuro:hover { background: #1c2350; }
.st-btn-suave { background: #fff; color: var(--st-ink) !important; border-color: var(--st-line-2); box-shadow: var(--st-sombra-1); }
.st-btn-suave:hover { border-color: #c4c9e0; }
.st-btn-bloque { width: 100%; min-height: 52px; font-size: 1rem; }

/* ─── Barra superior ─── */
.st-header {
    position: sticky; top: 0; z-index: 60; background: rgba(245, 246, 251, .78);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid rgba(215, 219, 234, .6);
}
.st-header-in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.st-marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-size: 1.08rem; letter-spacing: -.01em; }
.st-marca img { border-radius: 10px; }
.st-marca span { font-weight: 700; color: var(--st-ink); }
.st-marca b {
    font-weight: 700; color: #fff; background: var(--st-grad); padding: .18rem .5rem; border-radius: 7px; font-size: .78rem;
    letter-spacing: .04em; text-transform: uppercase;
}
.st-nav { display: flex; gap: .3rem; margin-left: auto; }
.st-nav a { padding: .55rem .85rem; border-radius: 10px; text-decoration: none; color: var(--st-ink-2); font-weight: 500; font-size: .92rem; }
.st-nav a:hover { color: var(--st-ink); background: rgba(14, 19, 48, .04); }
.st-nav a.activo { color: var(--st-indigo); background: var(--st-lila); }
.st-header-acc { display: flex; gap: .5rem; }

/* ─── Hero ─── */
.st-hero { padding: 56px 0 28px; }
.st-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.st-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .9rem .42rem .7rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1);
    color: var(--st-ink-2); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
.st-eyebrow-sm { padding: .3rem .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--st-indigo); background: var(--st-lila); border-color: transparent; box-shadow: none; }
.st-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--st-grad); box-shadow: 0 0 0 4px rgba(99, 102, 241, .15); }
.st-hero h1 {
    margin: 1.1rem 0 1.1rem; font-family: var(--st-serif); font-weight: 500; font-size: clamp(2.3rem, 4.6vw, 4.1rem);
    line-height: 1.04; letter-spacing: -.025em; color: var(--st-ink); text-wrap: balance;
}
.st-hero h1 em {
    font-style: italic; background: linear-gradient(110deg, #4f46e5 10%, #8b5cf6 70%, #a855f7);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-hero-sub { margin: 0 0 1.6rem; max-width: 560px; color: var(--st-ink-2); font-size: 1.08rem; line-height: 1.65; }
.st-buscar { position: relative; display: flex; align-items: center; margin: 0; }
.st-buscar > i { position: absolute; left: 1.15rem; color: var(--st-muted); pointer-events: none; }
.st-buscar-input {
    width: 100%; height: 60px; padding: 0 3.4rem 0 3rem; border-radius: 16px; font: 500 1rem var(--st-sans); color: var(--st-ink);
    background: #fff; border: 1px solid var(--st-line-2); box-shadow: var(--st-sombra-2); outline: none; transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.st-buscar-input::placeholder { color: #9aa0b9; }
.st-buscar-input:focus { border-color: var(--st-indigo-2); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14), var(--st-sombra-2); }
.st-buscar kbd {
    position: absolute; right: 1rem; padding: .15rem .5rem; border-radius: 6px; border: 1px solid var(--st-line-2);
    background: var(--st-bg); color: var(--st-muted); font: 600 .78rem var(--st-sans);
}
.st-sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .84rem; color: var(--st-muted); }
.st-sugerencias button {
    padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--st-line); background: rgba(255, 255, 255, .7);
    color: var(--st-ink-2); font: 500 .82rem var(--st-sans); cursor: pointer;
}
.st-sugerencias button:hover { border-color: var(--st-indigo-2); color: var(--st-indigo); }
.st-confianza { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }
.st-confianza li { display: inline-flex; align-items: center; gap: .45rem; color: var(--st-ink-2); font-size: .86rem; font-weight: 500; }
.st-confianza i { color: var(--st-indigo); }

.st-hero-visual { position: relative; }
.st-hero-marco {
    position: relative; aspect-ratio: 3 / 2; border-radius: 32px; overflow: hidden; background: #f3f4fa;
    box-shadow: var(--st-sombra-3); border: 1px solid rgba(255, 255, 255, .8);
}
.st-hero-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-hero-marco.sin-imagen, .st-banner-img.sin-imagen, .st-card-media.sin-imagen, .st-ficha-media.sin-imagen {
    background:
        radial-gradient(60% 70% at 25% 20%, rgba(99, 102, 241, .22), transparent 70%),
        radial-gradient(50% 60% at 85% 85%, rgba(139, 92, 246, .2), transparent 70%),
        linear-gradient(160deg, #f7f7fd, #ecedf8);
}
.st-flota {
    position: absolute; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 18px;
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--st-sombra-2); animation: stFlota 6s ease-in-out infinite;
}
.st-flota b { display: block; font-size: .92rem; color: var(--st-ink); }
.st-flota span { display: block; font-size: .78rem; color: var(--st-muted); }
.st-flota-a { left: -28px; bottom: 34px; }
.st-flota-b { right: -18px; top: 30px; animation-delay: -3s; }
.st-flota-b > i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--st-grad); }
.st-flota-logos { display: flex; }
.st-flota-logos img { width: 34px; height: 34px; border-radius: 10px; border: 2px solid #fff; margin-left: -10px; box-shadow: var(--st-sombra-1); object-fit: cover; }
.st-flota-logos img:first-child { margin-left: 0; }
@keyframes stFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ─── Franja de logos ─── */
.st-franja { padding: 34px 0 30px; text-align: center; overflow: hidden; }
.st-franja p { margin: 0 0 1.1rem; color: var(--st-muted); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.st-franja-pista { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.st-franja-fila { display: flex; gap: 1.1rem; width: max-content; animation: stDesliza 60s linear infinite; }
.st-franja-fila img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: var(--st-sombra-1); border: 1px solid var(--st-line); background: #fff; }
.st-franja:hover .st-franja-fila { animation-play-state: paused; }
@keyframes stDesliza { to { transform: translateX(-50%); } }

/* ─── Pestañas (control segmentado fijo) ─── */
.st-tabs {
    position: sticky; top: 68px; z-index: 50; padding: 12px 0;
    background: rgba(245, 246, 251, .86); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.st-tabs.pegado { border-bottom-color: var(--st-line); box-shadow: 0 10px 24px -20px rgba(14, 19, 48, .25); }
.st-tabs-in { display: flex; align-items: center; gap: 1rem; }
.st-segmento {
    position: relative; display: inline-flex; padding: 5px; border-radius: 16px; background: #fff;
    border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.st-segmento::-webkit-scrollbar { display: none; }
.st-tab {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem;
    border: 0; background: none; border-radius: 12px; cursor: pointer; white-space: nowrap;
    font: 600 .93rem var(--st-sans); color: var(--st-ink-2); transition: color .25s;
}
.st-tab i { font-size: .9rem; opacity: .8; }
.st-tab:hover { color: var(--st-ink); }
.st-tab.activo { color: #fff; }
.st-tab-n:empty { display: none; }
.st-tab-n { font-style: normal; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--st-lila); color: var(--st-indigo); }
.st-tab.activo .st-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }
.st-segmento-luz {
    position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 12px; background: var(--st-grad);
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .7); transition: transform .38s cubic-bezier(.23, 1, .32, 1), width .38s cubic-bezier(.23, 1, .32, 1);
}
.st-buscar-mini { margin-left: auto; width: min(320px, 100%); }
.st-buscar-mini .st-buscar-input { height: 46px; border-radius: 13px; padding: 0 1rem 0 2.6rem; box-shadow: var(--st-sombra-1); font-size: .93rem; }
.st-buscar-mini > i { left: .95rem; }

/* ─── Paneles ─── */
.st-paneles { padding: 26px 0 30px; min-height: 60vh; }
.st-panel[hidden] { display: none; }
.st-panel { animation: stEntra .45s cubic-bezier(.23, 1, .32, 1); }
@keyframes stEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.st-aviso-busqueda {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 14px;
    background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); color: var(--st-ink-2); font-size: .92rem;
}
.st-aviso-busqueda[hidden] { display: none; }
.st-aviso-busqueda button { border: 0; background: var(--st-lila); color: var(--st-indigo); font: 600 .86rem var(--st-sans); padding: .35rem .7rem; border-radius: 9px; cursor: pointer; }

.st-banner {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2rem; margin-bottom: 1.8rem;
    padding: 1.6rem 1.6rem 1.6rem 2.2rem; border-radius: 28px; background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-2); overflow: hidden;
}
.st-banner h2 { margin: .8rem 0 .6rem; font-family: var(--st-serif); font-weight: 500; font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.st-banner p { margin: 0; color: var(--st-ink-2); line-height: 1.6; }
.st-banner-img { aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: #f3f4fa; }
.st-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-banner-compacto { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); padding-block: 1.2rem; }
.st-banner-compacto .st-banner-img { aspect-ratio: 16 / 9; }

.st-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.6rem; }
.st-filtro {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
    background: #fff; border: 1px solid var(--st-line); color: var(--st-ink-2); font: 500 .88rem var(--st-sans); transition: all .2s;
}
.st-filtro:hover { border-color: var(--st-line-2); color: var(--st-ink); }
.st-filtro.activo { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-contador { margin-left: auto; color: var(--st-muted); font-size: .86rem; }

.st-bloque { margin-bottom: 2.6rem; }
.st-bloque[hidden] { display: none; }
.st-bloque-tit { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); }

/* ─── Tarjetas ─── */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1.35rem; }
.st-grid-destacadas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.st-card {
    position: relative; display: flex; flex-direction: column; border-radius: var(--st-r); background: var(--st-card);
    border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); overflow: hidden;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1), box-shadow .4s, border-color .3s;
}
.st-card:hover { transform: translateY(-5px); box-shadow: var(--st-sombra-3); border-color: transparent; }
.st-card[hidden] { display: none; }
.st-card-hit { position: absolute; inset: 0; z-index: 4; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.st-card-hit:focus-visible { outline: 3px solid rgba(99, 102, 241, .5); outline-offset: -3px; }
.st-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f4fa; display: grid; place-items: center; }
.st-card-media > img:not(.st-media-logo) { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.23, 1, .32, 1); }
.st-card:hover .st-card-media > img:not(.st-media-logo) { transform: scale(1.045); }
.st-media-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: var(--st-sombra-2); }
.st-card-modos { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: flex; gap: .35rem; }
.st-modo {
    display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    color: var(--st-ink); background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--st-sombra-1);
}
.st-modo i { color: var(--st-indigo); font-size: .72rem; }
.st-card-body { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2.4rem 1.2rem 1.2rem; flex: 1; }
.st-logo {
    position: absolute; top: -28px; left: 1.2rem; width: 56px; height: 56px; border-radius: 15px; object-fit: cover; background: #fff;
    border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(14, 19, 48, .35);
}
.st-card-tit h3 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.st-card-tit p { margin: .2rem 0 0; color: var(--st-muted); font-size: .82rem; font-weight: 500; }
.st-card-resumen { margin: 0; color: var(--st-ink-2); font-size: .9rem; line-height: 1.55; flex: 1; }
.st-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--st-line); }
.st-precio { font-weight: 700; font-size: 1rem; color: var(--st-ink); }
.st-precio small { font-weight: 500; font-size: .75rem; color: var(--st-muted); margin-right: .15rem; }
.st-precio-consulta { font-weight: 500; font-size: .85rem; color: var(--st-muted); }
.st-ver { display: inline-flex; align-items: center; gap: .4rem; color: var(--st-indigo); font-weight: 600; font-size: .86rem; }
.st-ver i { transition: transform .25s; }
.st-card:hover .st-ver i { transform: translateX(4px); }
.st-card-grande .st-card-media { aspect-ratio: 16 / 11; }
.st-card-grande .st-card-tit h3 { font-size: 1.2rem; }

/* ─── Colección McGraw Hill ─── */
.st-coleccion { padding: 1.6rem; border-radius: 28px; background: linear-gradient(180deg, #fff, #fbfbfe); border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); }
.st-coleccion-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem; }
.st-coleccion-head img { border-radius: 14px; box-shadow: var(--st-sombra-1); }
.st-coleccion-head h3 { margin: 0 0 .25rem; font-family: var(--st-serif); font-weight: 500; font-size: 1.45rem; }
.st-coleccion-head p { margin: 0; color: var(--st-ink-2); font-size: .92rem; }
.st-sin-resultados { text-align: center; color: var(--st-ink-2); padding: 2rem 0; }
.st-sin-resultados[hidden] { display: none; }
.st-sin-resultados button { border: 0; background: none; color: var(--st-indigo); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ─── Próximamente ─── */
.st-pronto {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1.8rem 2rem; border-radius: 24px;
    background: #fff; border: 1px dashed var(--st-line-2); box-shadow: var(--st-sombra-1);
}
.st-pronto[hidden] { display: none; }
.st-pronto-icono { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--st-grad); color: #fff; font-size: 1.4rem; box-shadow: 0 14px 28px -12px rgba(79, 70, 229, .7); }
.st-pronto h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.st-pronto p { margin: 0; color: var(--st-ink-2); line-height: 1.6; }
.st-pronto-acc { display: flex; flex-direction: column; gap: .5rem; }

/* ─── Paquetes ─── */
.st-vista-previa { margin-bottom: 1.6rem; }
.st-vista-previa-aviso { display: inline-flex; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: .45rem .8rem; border-radius: 10px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: .84rem; font-weight: 600; }
.st-paquetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.35rem; }
.st-paquete {
    position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem; border-radius: var(--st-r); background: #fff;
    border: 1px solid var(--st-line); box-shadow: var(--st-sombra-2); overflow: hidden;
}
.st-paquete::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--st-grad); }
.st-paquete[hidden] { display: none; }
.st-paquete-etq { align-self: flex-start; padding: .25rem .6rem; border-radius: 999px; background: var(--st-lila); color: var(--st-indigo); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.st-paquete-logos { display: flex; }
.st-paquete-logos img { width: 56px; height: 56px; border-radius: 15px; border: 3px solid #fff; margin-left: -14px; box-shadow: var(--st-sombra-2); object-fit: cover; }
.st-paquete-logos img:first-child { margin-left: 0; }
.st-paquete h3 { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 1.45rem; }
.st-paquete p { margin: 0; color: var(--st-ink-2); line-height: 1.55; }
.st-paquete ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.st-paquete li { font-size: .9rem; color: var(--st-ink); }
.st-paquete li i { color: var(--st-ok); margin-right: .35rem; font-size: .78rem; }
.st-paquete-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--st-line); color: var(--st-muted); font-size: .86rem; }

/* ─── Secciones informativas ─── */
.st-seccion { padding: 70px 0 30px; }
.st-seccion-head { margin-bottom: 2rem; }
.st-seccion-head h2 { margin: .8rem 0 .5rem; font-family: var(--st-serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; }
.st-seccion-head p { margin: 0; color: var(--st-ink-2); }
.st-seccion-head a { color: var(--st-indigo); }
.st-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.st-pasos li { position: relative; padding: 1.7rem; border-radius: var(--st-r); background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); }
.st-paso-n { position: absolute; top: 1.3rem; right: 1.4rem; font-family: var(--st-serif); font-size: 2rem; color: #e3e5f3; }
.st-pasos li > i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--st-lila); color: var(--st-indigo); font-size: 1.1rem; margin-bottom: 1rem; }
.st-pasos h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.st-pasos p { margin: 0; color: var(--st-ink-2); line-height: 1.6; font-size: .93rem; }
.st-prueba {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.3rem; margin-top: 1.2rem; padding: 1.5rem 1.7rem;
    border-radius: var(--st-r); color: #fff; background: radial-gradient(120% 140% at 0% 0%, #4f46e5 0%, #1e1b4b 55%, #0e1330 100%);
    box-shadow: var(--st-sombra-3);
}
.st-prueba-icono { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 1.3rem; }
.st-prueba h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.st-prueba p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.st-prueba .st-btn-oscuro { background: #fff; color: var(--st-ink) !important; }
.st-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
.st-faq details { border-bottom: 1px solid var(--st-line); }
.st-faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 1.02rem;
}
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--st-indigo); transition: transform .25s; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq details p { margin: 0 0 1.2rem; color: var(--st-ink-2); line-height: 1.65; }
.st-legal { color: var(--st-muted); font-size: .78rem; text-align: center; padding: 30px 0 40px; }

.st-footer { border-top: 1px solid var(--st-line); background: #fff; }
.st-footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 0; }
.st-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.st-footer nav a, .st-footer nav button { color: var(--st-ink-2); text-decoration: none; font: 500 .88rem var(--st-sans); background: none; border: 0; cursor: pointer; padding: 0; }
.st-footer nav a:hover, .st-footer nav button:hover { color: var(--st-indigo); }
.st-footer p { margin: 0; color: var(--st-muted); font-size: .84rem; }

/* ─── Ficha (modal) ─── */
/* 2050: por ENCIMA del aviso de cookies (2000) y por debajo de su panel de preferencias (2100). */
.st-modal { position: fixed; inset: 0; z-index: 2050; display: grid; place-items: center; padding: 24px; }
.st-modal[hidden] { display: none; }
.st-modal-fondo { position: absolute; inset: 0; background: rgba(14, 19, 48, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-modal-panel {
    position: relative; width: min(1080px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; border-radius: 28px;
    overflow: hidden; background: #fff; box-shadow: 0 50px 120px -30px rgba(14, 19, 48, .5); animation: stModal .4s cubic-bezier(.23, 1, .32, 1);
}
@keyframes stModal { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.st-modal-barra {
    position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: .75rem .85rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--st-line);
}
.st-volver, .st-cerrar {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .95rem; border-radius: 11px; cursor: pointer;
    background: var(--st-bg); border: 1px solid var(--st-line); color: var(--st-ink); font: 600 .88rem var(--st-sans);
}
.st-volver[hidden] { display: none; }
.st-cerrar { width: 40px; padding: 0; justify-content: center; }
.st-volver:hover, .st-cerrar:hover { background: var(--st-lila); border-color: #d9dcff; }
.st-modal-scroll { overflow-y: auto; overscroll-behavior: contain; }
.st-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-ficha-media { position: sticky; top: 0; align-self: start; height: calc(min(92vh, 900px) - 66px); background: #f3f4fa; display: grid; place-items: center; overflow: hidden; }
.st-ficha-media img.st-ficha-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.st-ficha-media .st-media-logo { width: 120px; height: 120px; border-radius: 30px; }
.st-ficha-info { padding: 2rem 2.2rem 2.2rem; }
.st-ficha-head { display: flex; gap: 1rem; align-items: center; }
.st-logo-lg { position: static; width: 72px; height: 72px; border-radius: 19px; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-1); }
.st-ficha-editor { margin: 0; color: var(--st-indigo); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.st-ficha-head h2 { margin: .2rem 0 0; font-family: var(--st-serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.015em; line-height: 1.1; }
.st-ficha-modos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0; }
.st-ficha-modos .st-modo { background: var(--st-lila); box-shadow: none; padding: .38rem .75rem; font-size: .78rem; }
.st-ficha-desc { margin: 0; color: var(--st-ink-2); line-height: 1.7; }
.st-ficha-sub { margin: 1.5rem 0 .75rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); font-weight: 700; }
.st-incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.st-incluye li { display: flex; gap: .6rem; color: var(--st-ink); font-size: .93rem; line-height: 1.45; }
.st-incluye li::before {
    content: ''; flex: 0 0 18px; height: 18px; margin-top: .1rem; border-radius: 50%;
    background: var(--st-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.st-periodos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.1rem; }
.st-periodo {
    position: relative; text-align: left; padding: 1rem 1.1rem; border-radius: 15px; cursor: pointer; background: #fff;
    border: 1.5px solid var(--st-line); font-family: var(--st-sans); color: var(--st-ink); transition: border-color .2s, box-shadow .2s;
}
.st-periodo:hover { border-color: var(--st-line-2); }
.st-periodo[aria-checked="true"] { border-color: var(--st-indigo-2); box-shadow: 0 0 0 4px rgba(99, 102, 241, .12); }
.st-periodo b { display: block; font-size: .92rem; }
.st-periodo span { display: block; margin-top: .3rem; color: var(--st-muted); font-size: .88rem; }
.st-periodo .st-periodo-precio { font-family: var(--st-serif); font-size: 1.5rem; color: var(--st-ink); }
.st-periodo .st-periodo-tag { position: absolute; top: -10px; right: 12px; margin: 0; padding: .15rem .5rem; border-radius: 999px; background: var(--st-grad); color: #fff; font-size: .68rem; font-weight: 700; }
.st-ficha-nota { margin: .8rem 0 0; color: var(--st-muted); font-size: .84rem; text-align: center; line-height: 1.5; }
.st-ficha-nota a { color: var(--st-indigo); }

.st-pago { max-width: 560px; margin: 0 auto; padding: 2rem 1.6rem 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.st-resumen { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 16px; background: var(--st-bg); border: 1px solid var(--st-line); }
.st-resumen img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; }
.st-resumen h3 { margin: 0; font-size: 1.05rem; }
.st-resumen p { margin: .15rem 0 0; color: var(--st-ink-2); font-size: .88rem; }
.st-resumen-total { margin-left: auto; font-family: var(--st-serif); font-size: 1.5rem; white-space: nowrap; }
.st-form { display: grid; gap: 1rem; }
.st-form label { display: grid; gap: .4rem; color: var(--st-ink-2); font-size: .86rem; font-weight: 600; }
.st-form input {
    height: 52px; padding: 0 1rem; border-radius: 13px; font: 500 1rem var(--st-sans); color: var(--st-ink); background: #fff;
    border: 1px solid var(--st-line-2); outline: none;
}
.st-form input:focus { border-color: var(--st-indigo-2); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.st-form small { color: var(--st-muted); font-weight: 400; }
.st-form-sesion { margin: 0; padding: .9rem 1rem; border-radius: 13px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .9rem; }
.st-paypal[hidden] { display: none; }
.st-paypal p { margin: .6rem 0 0; color: var(--st-muted); font-size: .8rem; text-align: center; }
.st-error { margin: 0; padding: .85rem 1rem; border-radius: 13px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: .9rem; }
.st-error[hidden] { display: none; }
.st-exito { padding: 3.4rem 2rem; text-align: center; }
.st-exito-icono { width: 76px; height: 76px; margin: 0 auto 1.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--st-grad); color: #fff; font-size: 1.9rem; box-shadow: 0 20px 44px -14px rgba(79, 70, 229, .7); }
.st-exito h2 { margin: 0 0 .6rem; font-family: var(--st-serif); font-weight: 500; font-size: 2rem; }
.st-exito p { color: var(--st-ink-2); max-width: 460px; margin: 0 auto 1.6rem; line-height: 1.6; }
body.st-modal-abierto { overflow: hidden; }

/* ═══ Espacio del cliente ═══ */
.st-espacio { padding: 40px 0 90px; }
.st-perfil {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.3rem; padding: 2rem 2.2rem; border-radius: 28px;
    color: #fff; background: radial-gradient(120% 140% at 0% 0%, #4f46e5 0%, #1e1b4b 55%, #0e1330 100%); box-shadow: var(--st-sombra-3);
}
.st-perfil h1 { margin: .7rem 0 .4rem; font-family: var(--st-serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.st-perfil p { margin: 0; max-width: 640px; color: rgba(255, 255, 255, .8); line-height: 1.6; }
.st-perfil-acc { display: flex; flex-wrap: wrap; gap: .6rem; }
.st-perfil-acc form { margin: 0; }
.st-perfil .st-btn-suave { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.st-estado { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.st-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-estado-permanente, .st-estado-activo { color: #047857; background: #d1fae5; }
.st-estado-transitorio, .st-estado-prueba { color: #5b21b6; background: #ede9fe; }
.st-estado-vencido, .st-estado-revocado { color: #b91c1c; background: #fee2e2; }
.st-accesos { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.st-acceso { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.3rem; padding: 1.5rem; border-radius: var(--st-r); background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-2); }
.st-acceso > img { width: 64px; height: 64px; border-radius: 17px; object-fit: cover; box-shadow: var(--st-sombra-1); }
.st-acceso-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.st-acceso h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.st-acceso-meta { margin: .4rem 0 0; color: var(--st-ink-2); font-size: .9rem; }
.st-cred { grid-column: 1 / -1; display: grid; gap: .7rem; padding: 1rem; border-radius: 16px; background: var(--st-bg); border: 1px solid var(--st-line); }
.st-cred[hidden] { display: none; }
.st-cred-fila { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: .7rem; }
.st-cred-fila span { color: var(--st-muted); font-size: .82rem; font-weight: 600; }
.st-cred-fila code { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--st-ink); font-size: .95rem; word-break: break-all; background: #fff; padding: .5rem .7rem; border-radius: 9px; border: 1px solid var(--st-line); }
.st-copiar { min-height: 38px; padding: 0 .85rem; border-radius: 10px; background: #fff; border: 1px solid var(--st-line-2); color: var(--st-indigo); cursor: pointer; font: 600 .82rem var(--st-sans); }
.st-copiar:hover { background: var(--st-lila); }
.st-cred-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }
.st-cred-vacio { font-style: normal; color: var(--st-muted); font-size: .9rem; padding: .5rem .7rem; border-radius: 9px; border: 1px dashed var(--st-line-2); background: #fff; }
.st-cred-fila code[data-oculto] { color: var(--st-muted); letter-spacing: .12em; }
.st-cred-fila .st-copiar[hidden] { display: none; }
.st-instrucciones { grid-column: 1 / -1; margin: 0; color: var(--st-ink-2); font-size: .92rem; line-height: 1.6; white-space: pre-line; }
.st-nota { grid-column: 1 / -1; margin: 0; padding: .85rem 1rem; border-radius: 13px; font-size: .9rem; background: var(--st-lila); color: var(--st-ink-2); }
.st-espacio-vacio { margin-top: 1.8rem; padding: 2.6rem; text-align: center; border-radius: 24px; border: 1px dashed var(--st-line-2); background: #fff; color: var(--st-ink-2); }
.st-espacio-error { max-width: 560px; margin: 40px auto 0; text-align: center; padding: 3rem 2rem; border-radius: 28px; background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-2); }
.st-espacio-error > i { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; background: var(--st-lila); color: var(--st-indigo); font-size: 1.5rem; margin-bottom: 1rem; }
.st-espacio-error h1 { font-family: var(--st-serif); font-weight: 500; font-size: 1.9rem; margin: 0 0 .6rem; }
.st-espacio-error p { color: var(--st-ink-2); margin: 0 0 1.5rem; line-height: 1.6; }
.st-entrar { max-width: 440px; }
.st-entrar-form { text-align: left; }
.st-entrar-form .st-btn { width: 100%; justify-content: center; height: 52px; }
.st-espacio-error p.st-entrar-pie { margin: 1.3rem 0 0; font-size: .86rem; color: var(--st-muted); }
/* «Volver al Store» acompaña al desplazamiento. */
.st-volver-flotante {
    position: fixed; left: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1.1rem;
    border-radius: 999px; text-decoration: none; font: 600 .88rem var(--st-sans); color: #fff !important; background: var(--st-ink);
    box-shadow: 0 16px 34px -14px rgba(14, 19, 48, .6);
}
.st-volver-flotante:hover { background: #1c2350; }

/* ═══ Responsivo ═══ */
@media (max-width: 1080px) {
    .st-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .st-hero-visual { max-width: 720px; }
    .st-flota-a { left: 12px; } .st-flota-b { right: 12px; }
}
@media (max-width: 900px) {
    .st-nav { display: none; }
    .st-header-acc { margin-left: auto; }
    .st-banner, .st-banner-compacto { grid-template-columns: 1fr; padding: 1.3rem; gap: 1.2rem; }
    .st-banner-img, .st-banner-compacto .st-banner-img { aspect-ratio: 16 / 9; order: -1; }
    .st-pasos { grid-template-columns: 1fr; }
    .st-faq-grid { grid-template-columns: 1fr; gap: 1rem; }
    .st-ficha { grid-template-columns: 1fr; }
    .st-ficha-media { position: relative; height: auto; aspect-ratio: 4 / 3; }
    .st-pronto, .st-prueba { grid-template-columns: 1fr; text-align: left; }
    .st-tabs-in { flex-direction: column; align-items: stretch; gap: .6rem; }
    .st-segmento { width: 100%; }
    .st-tab { flex: 1 0 auto; justify-content: center; }
    .st-buscar-mini { width: 100%; margin: 0; }
}
@media (max-width: 640px) {
    .st-solo-escritorio { display: none !important; }
    .st-header-in { height: 60px; gap: .75rem; }
    .st-header-acc .st-btn span { display: none; }
    .st-header-acc .st-btn { width: 44px; padding: 0; }
    .st-hero { padding: 26px 0 12px; }
    .st-hero h1 { font-size: 2.2rem; }
    .st-hero-sub { font-size: 1rem; }
    .st-hero-marco { border-radius: 24px; }
    .st-flota { padding: .6rem .75rem; border-radius: 14px; }
    .st-flota-a { left: 8px; bottom: -18px; } .st-flota-b { right: 8px; top: 10px; }
    .st-flota-logos img { width: 28px; height: 28px; }
    .st-flota-b { display: none; }
    .st-tabs { top: 60px; padding: 8px 0; }
    .st-tab { padding: 0 .7rem; font-size: .84rem; gap: .35rem; min-height: 40px; }
    .st-tab i { display: none; }
    .st-tab-extra { display: none; }
    .st-tab { flex: 1 1 0; }
    .st-buscar-mini { display: none; }
    .st-grid, .st-grid-destacadas, .st-paquetes { grid-template-columns: 1fr; gap: 1.1rem; }
    .st-coleccion { padding: 1.1rem; border-radius: 22px; }
    .st-coleccion-head { align-items: flex-start; }
    .st-contador { width: 100%; margin: .2rem 0 0; }
    .st-modal { padding: 0; place-items: end stretch; }
    .st-modal-panel { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; }
    .st-ficha-info { padding: 1.4rem 1.2rem 1.6rem; }
    .st-periodos { gap: .6rem; }
    .st-pago { padding: 1.4rem 1.1rem 2rem; }
    .st-resumen { flex-wrap: wrap; }
    .st-resumen-total { margin-left: 0; width: 100%; }
    .st-cred-fila { grid-template-columns: 1fr auto; }
    .st-cred-fila span { grid-column: 1 / -1; }
    .st-acceso { grid-template-columns: 1fr; }
    .st-perfil { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .st-flota, .st-franja-fila, .st-panel, .st-modal-panel { animation: none; }
    .st-card, .st-card-media img, .st-segmento-luz { transition: none; }
}

/* ─── Oferta destacada de paquete (promoción por tiempo limitado, 2026-10-24) ─── */
.st-promo-badge {
    position: absolute; top: .8rem; left: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #e11d48 100%); box-shadow: 0 10px 22px -10px rgba(225, 29, 72, .75);
}
.st-promo-badge i { font-size: .72rem; }
.st-promo-badge-lg { top: 1.1rem; left: 1.1rem; font-size: .82rem; padding: .48rem .9rem; }
.st-precio-per { font-weight: 500; font-size: .75rem; color: var(--st-muted); }
.st-oferta {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-bottom: 1.6rem;
    border-radius: 28px; background: #fff; border: 1px solid var(--st-line); box-shadow: var(--st-sombra-3); overflow: hidden;
}
.st-oferta::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
    background: linear-gradient(135deg, rgba(249, 115, 22, .55), rgba(124, 58, 237, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.st-oferta[hidden] { display: none; }
.st-oferta-media { position: relative; display: flex; align-items: center; background: linear-gradient(90deg, #e5e7f2 0%, #ddd6ee 55%, #c4b0dd 100%); }
/* La ilustración lleva los logos a la derecha: se muestra ENTERA (contain), nunca recortada. */
.st-oferta-media img { display: block; width: 100%; height: auto; }
.st-oferta-info { display: flex; flex-direction: column; gap: .85rem; padding: 2rem 2.2rem; }
.st-oferta-logos { display: flex; align-items: center; gap: .55rem; }
.st-oferta-logos img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; border: 3px solid #fff; box-shadow: var(--st-sombra-2); }
.st-oferta-mas { color: var(--st-indigo); font-weight: 700; font-size: 1.2rem; }
.st-oferta-editor { margin: 0; color: var(--st-muted); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.st-oferta h3 { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.01em; line-height: 1.12; }
.st-oferta-resumen { margin: 0; color: var(--st-ink-2); line-height: 1.6; }
.st-oferta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.st-oferta-lista li { display: flex; gap: .55rem; align-items: baseline; color: var(--st-ink-2); font-size: .9rem; line-height: 1.45; }
.st-oferta-lista i { color: var(--st-ok); font-size: .78rem; }
.st-oferta-compra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem;
    padding: 1rem 1.1rem; border-radius: 18px; background: linear-gradient(135deg, #f7f7ff, #fdf6ff); border: 1px solid var(--st-line);
}
.st-oferta-precio { display: flex; flex-direction: column; }
.st-oferta-monto { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; background: var(--st-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-oferta-per { margin-top: .3rem; color: var(--st-muted); font-size: .8rem; font-weight: 600; }
.st-oferta-modos { display: flex; flex-wrap: wrap; gap: .4rem; }
.st-oferta-modos .st-modo { background: var(--st-lila); box-shadow: none; }
@media (max-width: 900px) {
    .st-oferta { grid-template-columns: 1fr; }
    .st-oferta-media { min-height: 0; }
    .st-oferta-media .st-promo-badge-lg { top: auto; bottom: .9rem; left: .9rem; }
    .st-oferta-info { padding: 1.4rem 1.2rem 1.5rem; }
    .st-oferta-compra { flex-direction: column; align-items: stretch; }
    .st-oferta-compra .st-btn { justify-content: center; }
}
.st-ficha-media { position: relative; }
.st-ficha-media .st-promo-badge-lg { top: auto; bottom: 1rem; left: 1rem; }

/* ─── Ficha de paquete = landing de una sola pantalla (2026-10-24) ─── */
.st-puntos, .st-landing-precio { display: none; }
.st-modal-landing { width: min(1180px, 100%); }
.st-landing { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.st-landing .st-ficha-media {
    position: relative; height: auto; align-self: stretch; display: flex; align-items: center;
    background: linear-gradient(90deg, #e5e7f2 0%, #ddd6ee 55%, #c4b0dd 100%);
}
.st-landing .st-ficha-media img.st-ficha-img { position: static; width: 100%; height: auto; object-fit: contain; }
.st-landing .st-ficha-media .st-promo-badge-lg { top: 1rem; bottom: auto; }
.st-landing .st-ficha-info { display: flex; flex-direction: column; justify-content: center; padding: 1.8rem 2rem; }
.st-landing .st-ficha-head > img, .st-landing .st-ficha-modos, .st-landing .st-solo-ficha, .st-landing .st-periodos { display: none; }
.st-landing .st-ficha-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.st-landing .st-ficha-desc { margin: .7rem 0 0; font-size: 1.02rem; line-height: 1.55; }
.st-landing .st-puntos { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.st-landing .st-puntos li {
    display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 12px; background: var(--st-lila);
    color: var(--st-ink); font-size: .86rem; font-weight: 600; line-height: 1.3;
}
.st-landing .st-puntos i { color: var(--st-ok); font-size: .78rem; }
.st-landing .st-landing-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; margin: 1.2rem 0 .9rem; }
.st-landing-monto { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; background: var(--st-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-landing-per { color: var(--st-muted); font-size: .86rem; font-weight: 600; }
.st-landing .st-ficha-nota { margin-top: .6rem; }
@media (max-width: 900px) {
    .st-landing { grid-template-columns: 1fr; }
    .st-landing .st-ficha-media { aspect-ratio: auto; }
    .st-landing .st-ficha-media .st-promo-badge-lg { top: auto; bottom: .7rem; left: .7rem; font-size: .74rem; padding: .38rem .7rem; }
    .st-landing .st-ficha-info { padding: 1.1rem 1.1rem 1.3rem; }
    .st-landing .st-ficha-head h2 { font-size: 1.55rem; }
    .st-landing .st-ficha-desc { font-size: .93rem; margin-top: .45rem; }
    .st-landing .st-puntos { margin-top: .8rem; gap: .45rem; }
    .st-landing .st-puntos li { padding: .5rem .6rem; font-size: .8rem; }
    .st-landing .st-landing-precio { margin: .9rem 0 .7rem; }
    .st-landing-monto { font-size: 2.1rem; }
}
.st-oferta-puntos { grid-template-columns: 1fr 1fr; gap: .5rem; }
.st-oferta-puntos li { align-items: center; padding: .55rem .7rem; border-radius: 12px; background: var(--st-lila); color: var(--st-ink); font-weight: 600; font-size: .86rem; }
.st-oferta-info { justify-content: center; }
@media (min-width: 901px) {
    /* Escritorio: la imagen llena su columna; se ancla a la derecha para no recortar nunca las tarjetas de logos. */
    .st-oferta-media { align-items: stretch; }
    .st-oferta-media img { height: 100%; object-fit: cover; object-position: 80% center; }
}
.st-oferta-media .st-promo-badge-lg { top: auto; bottom: 1.1rem; }

/* Botón «Comprar» de cada tarjeta (2026-10-26): toda la tarjeta abre la ficha con el pago. */
.st-comprar { padding: .45rem .9rem; border-radius: 999px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 6px 16px rgba(99, 102, 241, .28); }
.st-comprar i { font-size: .8rem; }
.st-card:hover .st-comprar { filter: brightness(1.06); }

/* Espacio del cliente: fecha de contratación y de vencimiento (2026-10-26). */
.st-fechas { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .35rem 0 0; }
.st-fechas div { display: grid; gap: .1rem; }
.st-fechas dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.st-fechas dd { margin: 0; font-weight: 600; color: #1e1b4b; }