/* NearVisual — páginas de servicios, industrias, casos y ofertas.
   Mismo lenguaje que la portada (css/movil.css y css/escritorio.css): lienzo
   gris frío, tarjetas blancas con relieve suave, bandas negras, cian sólo en
   lo que se toca; Nunito en títulos e Inter en el texto. La cabecera (d-*) y la
   barra de abajo con su hoja «Más» (m-*) son las mismas piezas del sitio. */

body.sx {
    /* Fichas de color de la portada (en el sitio viven en body.nv-app). */
    --m-lienzo: #E2E8EB; --m-hueco: #EFF3F5; --m-papel: #FFFFFF;
    --m-tinta: #0C1114; --m-tinta-2: #475761; --m-tinta-3: #7F8F99; --m-linea: #DDE5E9;
    --m-acento: #00E5FF; --m-sobre-acento: #031014; --m-acento-hondo: #00798C; --m-acento-luz: #C2F3FB;
    --m-acento-boton: #00C8E6; --m-acento-bruma: #F0FCFE;
    --m-noche: #0B0E10; --m-panel: linear-gradient(160deg, #1A1E21 0%, #0D1012 55%, #070809 100%);
    --m-sombra-0: 0 1px 2px rgba(12, 22, 28, .06), 0 8px 22px rgba(12, 22, 28, .09);
    --m-sombra: 0 14px 34px rgba(12, 22, 28, .18);
    --m-sombra-acento: 0 10px 22px rgba(0, 170, 200, .28);
    --m-r-xl: 28px; --m-r-lg: 22px; --m-r-md: 16px;
    --m-arriba: env(safe-area-inset-top, 0px); --m-abajo: env(safe-area-inset-bottom, 0px);
    --nv-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --d-ancho: min(1200px, calc(100vw - 80px));
    --d-alto-cabecera: 72px;
    --nv-t-fondo: #0B0E10; --nv-t-texto: #fff; --nv-t-acento: #00E5FF; --nv-t-acento-texto: #031014;

    margin: 0;
    background: var(--m-lienzo);
    color: var(--m-tinta);
    font: 16px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(84px + var(--m-abajo));
}
@media (min-width: 1024px) {
    body.sx { --m-lienzo: #F1F4F6; padding-top: var(--d-alto-cabecera); padding-bottom: 0; }
}
*, *::before, *::after { box-sizing: border-box; }
:where(body.sx) img { max-width: 100%; height: auto; }
.d-marca img:first-child { width: 34px; height: 34px; }
.d-marca-logo { height: 20px; width: auto; }
:where(body.sx) a { color: var(--m-acento-hondo); text-underline-offset: 4px; }
:where(body.sx) :is(h1, h2, h3) { font-family: var(--font-heading); color: var(--m-tinta); letter-spacing: -.02em; line-height: 1.15; }
.nv-desk-only { display: none !important; }
@media (min-width: 1024px) { .nv-desk-only { display: flex !important; } .nv-mob-only { display: none !important; } }
.d-cabecera a.d-nav-item { display: inline-flex; align-items: center; text-decoration: none; }
.d-cabecera a.d-nav-item.active { color: #0C1114; }
.d-cabecera .d-icono, .d-cabecera .d-cta { text-decoration: none; }
.m-barra a.m-barra-item { text-decoration: none; }
.m-hoja-reja a.m-hoja-item { text-decoration: none; color: inherit; }
.sx-saltar { position: absolute; left: -9999px; }
.sx-saltar:focus { left: 16px; top: 16px; z-index: 2000; background: #fff; padding: 8px 14px; border-radius: 10px; }

/* ── Contenido ─────────────────────────────────────────────────────────── */
.sx-main { max-width: 1200px; margin: 0 auto; padding: 0 0 56px; }
@media (min-width: 1024px) { .sx-main { width: var(--d-ancho); padding-top: 28px; } }

/* Portada de sección: banda negra con esquinas inferiores redondeadas,
   como las portadas del sitio. */
.sx-hero {
    display: grid; gap: 28px; align-items: center;
    background: var(--m-panel); color: #F7F8F8;
    padding: calc(28px + var(--m-arriba)) 20px 34px;
    border-radius: 0 0 var(--m-r-xl) var(--m-r-xl);
}
@media (min-width: 1024px) {
    .sx-hero { grid-template-columns: 1.1fr .9fr; padding: 48px 48px 52px; border-radius: var(--m-r-xl); box-shadow: var(--m-sombra); }
    .sx-hero:not(.sx-hero-img) { grid-template-columns: 1fr; }
}
.sx-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 52px); margin: 10px 0 16px; }
.sx-lead { font-size: 1.08rem; color: rgba(247, 248, 248, .82); margin: 0 0 22px; }
.sx-kicker { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(0, 229, 255, .14); color: var(--m-acento); font: 800 .72rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; }
.sx-kicker:empty { display: none; }
.sx-migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: rgba(247, 248, 248, .6); margin-bottom: 14px; }
.sx-migas a { color: rgba(247, 248, 248, .8); text-decoration: none; }
.sx-migas a:hover { color: var(--m-acento); }
.sx-hero-fig { margin: 0; }
.sx-hero-fig img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--m-r-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.sx-hero-fig img { aspect-ratio: 16 / 10; height: auto; object-position: center top; }
/* Imagen vertical: el marco abraza la foto (sin franjas negras) en escritorio. */
.sx-hero-fig.sx-vert { display: flex; justify-content: center; }
.sx-hero-fig.sx-vert img { width: auto; max-width: 100%; max-height: 460px; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 1023px) {
    .sx-hero-fig img { max-height: 280px; }
    /* En celular la vertical se recorta a una franja apaisada para no empujar el contenido. */
    .sx-hero-fig.sx-vert img { width: 100%; max-height: 300px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
}

/* Botones del sitio: pastilla cian; secundario con filo. */
.sx-acc { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
    background: var(--m-acento); color: var(--m-sobre-acento) !important;
    font: 800 .95rem/1 var(--font-heading); text-decoration: none; cursor: pointer;
    box-shadow: var(--m-sombra-acento); transition: transform .15s ease;
}
.sx-btn:hover { transform: translateY(-1px); }
.sx-btn-sec { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.sx-cuerpo .sx-btn-sec, .sx-cierre .sx-btn-sec { color: var(--m-tinta) !important; box-shadow: inset 0 0 0 1.5px var(--m-linea); }
.sx-btn-wa::before { content: "\f232"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* Cuerpo: tarjetas blancas sobre el lienzo. */
.sx-cuerpo { display: grid; gap: 16px; padding: 18px 14px 0; }
@media (min-width: 1024px) { .sx-cuerpo { gap: 20px; padding: 24px 0 0; } }
.sx-resumen, .sx-sec, .sx-cierre, .nv-aviso-campana {
    background: var(--m-papel); border-radius: var(--m-r-lg); box-shadow: var(--m-sombra-0);
    padding: 22px 20px;
}
@media (min-width: 1024px) { .sx-resumen, .sx-sec, .sx-cierre { padding: 30px 34px; } }
.sx-sec h2, .sx-cierre h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 12px; }
.sx-sec h3 { font-size: 1.1rem; margin: 18px 0 8px; }
.sx-sec p { margin: 0 0 12px; color: var(--m-tinta-2); }
.sx-sec p:last-child { margin-bottom: 0; }
.sx-resumen { border-left: 5px solid var(--m-acento); }
.sx-resumen-t { margin: 0 0 6px; font: 800 .74rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--m-acento-hondo); }
.sx-resumen dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0 0; }
.sx-resumen dl div { background: var(--m-hueco); border-radius: var(--m-r-md); padding: 10px 12px; }
.sx-resumen dt { font-size: .74rem; color: var(--m-tinta-3); text-transform: uppercase; letter-spacing: .05em; }
.sx-resumen dd { margin: 2px 0 0; font-weight: 700; }
.sx-nota { font-size: .86rem; color: var(--m-tinta-3) !important; }

/* Listas y pasos con viñeta cian. */
.sx-lista, .sx-pasos { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.sx-lista li, .sx-pasos li { display: grid; gap: 2px; padding: 12px 14px 12px 40px; border-radius: var(--m-r-md); background: var(--m-hueco); position: relative; }
.sx-lista li::before { content: ""; position: absolute; left: 16px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--m-acento); box-shadow: 0 0 0 4px var(--m-acento-luz); }
.sx-lista li.sx-falta::before { background: transparent; box-shadow: inset 0 0 0 2px var(--m-tinta-3); }
.sx-lista li b, .sx-pasos li b { font-family: var(--font-heading); }
.sx-lista li span, .sx-pasos li span { color: var(--m-tinta-2); }
.sx-pasos { counter-reset: paso; }
.sx-pasos li { counter-increment: paso; }
.sx-pasos li::before { content: counter(paso); position: absolute; left: 10px; top: 11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--m-noche); color: var(--m-acento); font: 800 .75rem/1 var(--font-heading); }
.sx-falta b { display: none; }

/* Tablas. */
.sx-tabla-w { overflow-x: auto; margin-top: 8px; border-radius: var(--m-r-md); border: 1px solid var(--m-linea); }
.sx-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sx-tabla th, .sx-tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--m-linea); vertical-align: top; }
.sx-tabla thead th { background: var(--m-noche); color: #fff; font-family: var(--font-heading); font-size: .82rem; }
.sx-tabla tbody tr:last-child > * { border-bottom: 0; }
.sx-fig { margin: 14px 0 0; }
.sx-fig img { border-radius: var(--m-r-md); display: block; }
.sx-fig figcaption { font-size: .82rem; color: var(--m-tinta-3); margin-top: 6px; }

/* Tarjetas de enlaces a otras páginas. */
.sx-cards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sx-card { background: var(--m-papel); border: 1px solid var(--m-linea); border-radius: var(--m-r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; position: relative; }
.sx-card:hover { box-shadow: var(--m-sombra); transform: translateY(-2px); }
.sx-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sx-card > div { padding: 14px 16px 16px; }
.sx-card h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.sx-card h3 a { color: var(--m-tinta); text-decoration: none; }
.sx-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sx-card p { margin: 0; font-size: .9rem; color: var(--m-tinta-2); }
.sx-card-k { margin: 0; font: 800 .7rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .07em; color: var(--m-acento-hondo); }
.sx-card-k:empty { display: none; }
.sx-estado, .nv-promo__estado { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--m-hueco); font: 800 .72rem/1.4 var(--font-heading); }

/* Preguntas. */
.sx-faq details { border-bottom: 1px solid var(--m-linea); }
.sx-faq details:last-child { border-bottom: 0; }
.sx-faq summary { cursor: pointer; padding: 14px 32px 14px 0; font: 700 1rem/1.4 var(--font-heading); list-style: none; position: relative; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.4rem; color: var(--m-acento-hondo); }
.sx-faq details[open] summary::after { content: "–"; }
.sx-faq details > div { padding: 0 0 14px; }

/* Apps. */
.sx-app { display: grid; gap: 20px; }
@media (min-width: 1024px) { .sx-app { grid-template-columns: 1fr 1fr; align-items: start; } }
.sx-app .sx-kicker { background: var(--m-acento-bruma); color: var(--m-acento-hondo); }
.sx-app-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-app-imgs img { border-radius: var(--m-r-md); box-shadow: var(--m-sombra-0); width: 100%; }
.sx-app-imgs img:first-child { grid-column: 1 / -1; }

/* Cierre: banda negra como las del sitio. */
.sx-cierre { background: var(--m-panel); color: #F7F8F8; text-align: center; }
.sx-cierre h2 { color: #fff; }
.sx-cierre p { color: rgba(247, 248, 248, .78); max-width: 620px; margin: 0 auto 18px; }

/* Aviso de campaña terminada. */
.nv-aviso-campana { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-left: 5px solid #e10d1e; }
.nv-aviso-campana[hidden] { display: none; }
.nv-aviso-campana p { margin: 0; flex: 1 1 240px; }

/* ── Pie: el de la portada ─────────────────────────────────────────────── */
.sx-pie { background: var(--m-noche); color: rgba(247, 248, 248, .75); margin-top: 40px; border-radius: var(--m-r-xl) var(--m-r-xl) 0 0; }
.sx-pie-in { max-width: 1200px; margin: 0 auto; padding: 36px 20px 20px; display: grid; gap: 28px; }
@media (min-width: 1024px) { .sx-pie-in { width: var(--d-ancho); padding: 48px 0 24px; grid-template-columns: 260px 1fr; gap: 48px; } }
.sx-pie-marca p { font-size: .9rem; line-height: 1.6; margin: 14px 0; }
.sx-pie .d-marca img:first-child { width: 32px; height: 32px; }
.sx-pie .d-marca-logo { height: 18px; width: auto; }
.nv-social { display: flex; gap: 8px; }
.nv-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.nv-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
@media (min-width: 760px) { .nv-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nv-foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nv-foot-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.nv-foot-t { margin: 0 0 4px; font: 800 .66rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .14em; color: var(--m-acento); }
.nv-foot-col a, .sx-pie-base a { color: rgba(247, 248, 248, .72); text-decoration: none; font-size: .86rem; line-height: 1.35; }
.nv-foot-col a:hover, .sx-pie-base a:hover { color: var(--m-acento); }
.sx-pie-base { max-width: 1200px; margin: 0 auto; padding: 18px 20px 26px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
@media (min-width: 1024px) { .sx-pie-base { width: var(--d-ancho); padding: 18px 0 30px; } }
.sx-pie-base nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 10px; }
.sx-pie-base p { margin: 0; font-size: .78rem; color: rgba(247, 248, 248, .45); }

@media (prefers-reduced-motion: reduce) { .sx-card, .sx-btn { transition: none; } }
.m-hoja a.m-boton { text-decoration: none; }

/* Tráiler de app (45 s, capturas reales). */
.sx-app-video { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--m-r-md); box-shadow: var(--m-sombra-0); background: #050607; }

/* ── Cabecera clara y compacta (antes banda negra alta) ─────────────────
   Tarjeta blanca con el título, dos botones y la foto más baja: lo que se
   puede hacer queda arriba y el texto largo va debajo. */
.sx-hero { gap: 16px; background: var(--m-papel); color: var(--m-tinta); padding: calc(16px + var(--m-arriba)) 16px 20px; box-shadow: var(--m-sombra-0); }
.sx-hero h1 { color: var(--m-tinta); font-size: clamp(24px, 3.2vw, 38px); margin: 8px 0 10px; }
.sx-lead { color: var(--m-tinta-2); font-size: 1rem; margin: 0 0 16px; }
.sx-kicker { background: var(--m-acento-bruma); color: var(--m-acento-hondo); }
.sx-migas { color: var(--m-tinta-3); margin-bottom: 10px; }
.sx-migas a { color: var(--m-tinta-2); }
.sx-hero .sx-btn-sec { color: var(--m-tinta) !important; box-shadow: inset 0 0 0 1.5px var(--m-linea); background: var(--m-papel); }
.sx-hero-fig img { max-height: 320px; box-shadow: var(--m-sombra-0); }
@media (min-width: 1024px) { .sx-hero { padding: 28px 32px; gap: 28px; box-shadow: var(--m-sombra-0); } }
@media (max-width: 1023px) {
    .sx-hero { grid-template-columns: 1fr; }
    .sx-hero-fig { order: -1; }
    .sx-hero-fig img, .sx-hero-fig.sx-vert img { max-height: 190px; aspect-ratio: 16 / 9; object-fit: cover; }
    .sx-hero .sx-acc .sx-btn { flex: 1; }
}
button.sx-btn { font-family: var(--font-heading); }

/* Fichas de tour: «Pedir este tour» siempre a la mano en celular. */
.sx-pedir-fijo { display: none; }
@media (max-width: 1023px) {
    .sx-pedir-fijo { display: block; position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(76px + var(--m-abajo)); }
    .sx-pedir-fijo .sx-btn { width: 100%; }
    body.sx-tour { padding-bottom: calc(150px + var(--m-abajo)); }
}
.sx-card-acc { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; }
.sx-card-acc .sx-btn { min-height: 38px; padding: 0 18px; font-size: .86rem; }
/* Listón de oferta en las tarjetas de tours con descuento. */
.sx-card-oferta { position: relative; overflow: hidden; }
.nv-oferta { position: absolute; z-index: 2; top: 14px; left: -32px; width: 124px; padding: 4px 0; background: #E10D1E; color: #fff; font: 900 .7rem/1 var(--font-heading); letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(-35deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); border-top: 2px solid #fff; border-bottom: 2px solid #fff; }

/* Celular: barra negra de arriba como la portada (atrás, marca y WhatsApp). */
.sx-mtop { display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--m-arriba)) 14px 14px; background: var(--m-noche); border-radius: 0 0 var(--m-r-lg) var(--m-r-lg); }
.sx-mtop .m-marca { flex: 1; min-width: 0; }
.sx-atras { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff !important; text-decoration: none; font-size: 1rem; }
.sx-mtop .m-redondo { flex: none; }
@media (max-width: 1023px) { .sx-hero { margin-top: 12px; border-radius: var(--m-r-xl); padding-top: 16px; } .sx-main { padding-left: 10px; padding-right: 10px; } }
/* La barra fija de «Pedir» entra al perder de vista el botón de arriba. */
@media (max-width: 1023px) {
    .sx-pedir-fijo { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
    .sx-pedir-fijo.ver { opacity: 1; transform: none; pointer-events: auto; }
}

/* Video promocional en la cabecera de servicios: mismo marco que .sx-hero-fig img (agregado, no reemplaza reglas). */
.sx-hero-fig video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 320px; object-fit: cover; background: #000; border-radius: var(--m-r-lg); box-shadow: var(--m-sombra-0); }
@media (max-width: 1023px) { .sx-hero-fig video { max-height: none; } }