/* =====================================================================
   SERVICE TV · Hero cinematográfico (versión A1)
   Las 5 condiciones del modo fijo coinciden EXACTAMENTE con hero.js
   ===================================================================== */
:root {
  --tshadow: 0 1px 2px rgba(3, 8, 20, .95), 0 3px 12px rgba(3, 8, 20, .75), 0 10px 44px rgba(3, 8, 20, .8);
  --hero-ink: #F2F6FD;
  --hero-ink-2: #B9C8E2;
}

.scrub { position: relative; height: 420vh; background: #040B1C; color: var(--hero-ink); }
.scrub-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background-color: #040B1C; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.scrub-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease-out); transform: translateZ(0); will-change: transform;
}
.scrub-stage.video-ready video { opacity: 1; }
.scrub-stage.video-failed video { display: none; }

/* Capas de legibilidad */
.scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(4, 11, 28, 0) 35%, rgba(4, 11, 28, .62) 100%); }
.scrim-top { position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 11, 28, .7), transparent); }

/* Anillo de carga */
.ring { position: absolute; right: 28px; bottom: 28px; width: 40px; height: 40px; color: #8CB9FF; opacity: .9; transition: opacity .5s; }
.ring circle.track { stroke: rgba(140, 185, 255, .2); }
.video-ready .ring, .video-failed .ring { opacity: 0; }

/* Tramos de texto */
.band { position: absolute; z-index: 2; text-shadow: var(--tshadow); }
.band::before {
  content: ""; position: absolute; inset: -14% -18%; z-index: -1; pointer-events: none;
  opacity: calc(.3 + .7 * var(--k, 1));
  background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(3, 8, 20, .7) 0%, rgba(3, 8, 20, .45) 48%, rgba(3, 8, 20, 0) 76%);
}
.band .btn { text-shadow: none; }
.band-left { left: max(20px, calc((100vw - 1200px) / 2 + 20px)); top: 50%; transform: translateY(-50%); width: min(560px, 38vw); }
.band-right { right: max(20px, calc((100vw - 1200px) / 2 + 20px)); top: 50%; transform: translateY(-50%); width: min(440px, 32vw); text-align: right; }
.band-center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 86vw); text-align: center; }
.band-center::before { background: radial-gradient(ellipse 66% 60% at 50% 50%, rgba(3, 8, 20, .5) 0%, rgba(3, 8, 20, .28) 50%, rgba(3, 8, 20, 0) 78%); }

.band .kicker { background: rgba(4, 11, 28, .55); border-color: rgba(140, 185, 255, .3); color: var(--hero-ink-2); text-shadow: none; backdrop-filter: blur(8px); }
.band h1, .band h2 { color: #fff; max-width: none; }
.band .hero-title { font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.6rem); }
.band .hero-title span { color: #6FA8FF; }
.band .hero-sub { color: var(--hero-ink-2); }
.band .hero-benefits li { color: #fff; }
.band .hero-benefits .ico { background: rgba(4, 11, 28, .6); border-color: rgba(140, 185, 255, .3); color: #8CB9FF; box-shadow: none; }
.band .btn-ghost { --fg: #fff; --bd: rgba(220, 232, 255, .45); --bg: rgba(4, 11, 28, .35); }
.band .btn-ghost:hover { --bd: #fff; --bg: rgba(4, 11, 28, .55); }
.band .hero-note { color: var(--hero-ink-2); }
.band-step { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #8CB9FF; display: inline-block; margin-bottom: 14px; }
.band h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; }
.band p.band-lede { margin-top: 16px; font-size: 1.125rem; color: var(--hero-ink-2); }
.band-right p.band-lede { margin-left: auto; max-width: 36ch; }
.band-center h2 { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.9rem); }
.band-center .hero-ctas { justify-content: center; }
.band-center .band-lede { margin-inline: auto; max-width: 46ch; }

/* Entradas (solo transform y opacity, guiadas por --k) */
.band .w { display: inline-block; opacity: var(--kc); --kc: clamp(0, (var(--k, 1) - var(--th, 0)) * 3, 1); transform: translateY(calc((1 - var(--kc)) * -18px)); }
.band .rise { --kr: clamp(0, (var(--k, 1) - var(--d, .5)) * 3.5, 1); opacity: var(--kr); transform: translateY(calc((1 - var(--kr)) * 14px)); }

/* Indicador de scroll */
.scroll-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hero-ink-2); text-shadow: var(--tshadow); }
.scroll-cue i { width: 1.5px; height: 36px; background: linear-gradient(#8CB9FF, transparent); animation: cue 2.4s var(--ease-io) infinite; animation-delay: -1s; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Barra de progreso del recorrido */
.hero-progress { position: absolute; left: max(20px, calc((100vw - 1200px) / 2 + 20px)); bottom: 32px; z-index: 2; display: flex; gap: 8px; }
.hero-progress span { width: 28px; height: 3px; border-radius: 3px; background: rgba(140, 185, 255, .25); overflow: hidden; }

@media (max-height: 640px) { .scroll-cue, .hero-progress { display: none; } }

/* ---------- Modo fijo: celulares, tablets en vertical, movimiento reducido ---------- */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .scrub { height: auto; }
  .scrub-stage { position: relative; height: auto; min-height: 0; background-image: none !important; padding: calc(var(--header-h) + 28px) 0 0; }
  .scrub-stage video, .ring, .scroll-cue, .hero-progress, .scrim { display: none; }
  .scrub .static-bg { display: block; }
  .band { position: relative; inset: auto; transform: none; width: auto; text-align: left; padding-inline: 20px; max-width: 640px; margin-inline: auto; opacity: 1 !important; visibility: visible !important; }
  .band::before { display: none; }
  .band:not(.band-hero) { display: none; }
  .band .w, .band .rise { opacity: 1; transform: none; }
  .scrub .static-steps { display: grid; }
}
.static-bg, .static-steps { display: none; }
.static-bg { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 11, 28, .2) 0%, rgba(4, 11, 28, .78) 55%, #040B1C 100%), url('../video/hero-poster-mobile.jpg') center top / cover no-repeat; }
.static-steps { position: relative; z-index: 1; gap: 10px; padding: 28px 20px 40px; max-width: 640px; margin-inline: auto; }
.static-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(9, 25, 56, .75); border: 1px solid rgba(140, 185, 255, .22); color: var(--hero-ink-2); font-size: .95rem; }
.static-steps strong { display: block; color: #fff; font-family: var(--f-display); font-weight: 600; }
.static-steps .ico { color: #8CB9FF; margin-top: 2px; }

/* ---------- Logo (versión A1) ---------- */
.brand { gap: 12px; }
.brand .brand-mark { width: auto; height: 36px; }
.brand-word { font-family: "Saira", var(--f-display); font-style: italic; font-weight: 800; font-size: 1.375rem; letter-spacing: .01em; color: #0B1E46; }
.brand-word span { color: #1E88FF; margin-left: .22em; }
.brand-light .brand-word { color: #fff; }
.brand-light .brand-word span { color: #4C9EFF; }

/* ---------- Encabezado sobre el video ---------- */
.site-header { transition: border-color .3s, box-shadow .3s, background-color .4s; }
.site-header.on-dark { background: rgba(4, 11, 28, .5); border-bottom-color: rgba(140, 185, 255, .14); box-shadow: none; }
.site-header.on-dark .brand-word { color: #fff; }
.site-header.on-dark .brand-word span { color: #4C9EFF; }
.site-header.on-dark .brand-mark { filter: none; }
.site-header.on-dark .menu-btn { background: rgba(4, 11, 28, .5); border-color: rgba(140, 185, 255, .3); color: #fff; }
@media (min-width: 1100px) {
  .site-header.on-dark .nav ul a { color: #C9D6EC; }
  .site-header.on-dark .nav ul a:hover, .site-header.on-dark .nav ul a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
}
.menu-open .site-header.on-dark, .menu-open .site-header { background: var(--canvas); }
.menu-open .site-header .brand-word { color: #0B1E46; }
.menu-open .site-header .brand-word span { color: #1E88FF; }
.menu-open .site-header .menu-btn { background: var(--surface); color: var(--navy-800); border-color: var(--line); }

/* El hero arranca debajo del encabezado fijo */
.scrub { margin-top: calc(var(--header-h) * -1); }

/* Tarjeta del cierre (legible sobre la pantalla encendida) */
.settle-card { padding: 36px 40px 40px; border-radius: 28px; background: rgba(4, 13, 34, .72); border: 1px solid rgba(140, 185, 255, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(2, 8, 24, .45); }
.band-settle::before { display: none; }

/* Logo claro/oscuro según el fondo del encabezado */
.site-header .mark-light { display: none; }
.site-header.on-dark .mark-dark { display: none; }
.site-header.on-dark .mark-light { display: block; }
.menu-open .site-header .mark-dark { display: block; }
.menu-open .site-header .mark-light { display: none; }

/* Ajustes del primer tramo */
.band-hero { top: calc(50% + var(--header-h) / 2); width: min(580px, 42vw); }
.band-hero .kicker-long { display: none; }
.band-hero .kicker { white-space: nowrap; }
.band-hero .hero-title { margin-top: 18px; }
.band-hero .hero-sub { font-size: 1.0625rem; margin-top: 16px; }
.band-hero .hero-benefits { margin-top: 20px; gap: 8px; }
.band-hero .hero-ctas { margin-top: 24px; flex-direction: row; flex-wrap: wrap; }
.band-hero .hero-ctas .btn { min-height: 52px; padding: 12px 22px; font-size: 1rem; }
.scrub-stage.moved .scroll-cue { opacity: 0; }
.scroll-cue { transition: opacity .4s; }
@media (max-height: 820px) { .band-hero .hero-benefits { display: none; } }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .band-hero { top: auto; width: auto; }
  .band-hero .hero-benefits { display: grid; }
  .band-hero .kicker { white-space: normal; }
}

/* ---------- Foto de la visita ---------- */
.home-visual picture, .home-photo { display: block; }
.home-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: #DCE7F6; }

/* ---------- Mapa real de Zona Norte ---------- */
.map-real { position: relative; height: 340px; background: #E9EEF5; z-index: 0; }
@media (min-width: 1024px) { .map-real { height: 520px; } }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--text-2); font-size: .9375rem; }
.map-real .leaflet-container, .map-real.leaflet-container { font-family: var(--f-body); background: #E9EEF5; }
.zn-pin i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(11, 36, 71, .35); transition: transform .25s var(--ease-out); }
.zn-pin.hl i { transform: scale(1.5); background: #0B2A6B; }
.leaflet-tooltip.zn-label { padding: 2px 8px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: var(--navy-800); font-weight: 700; font-size: 12px; box-shadow: 0 1px 4px rgba(11, 36, 71, .18); }
.leaflet-tooltip.zn-label::before { display: none; }
.leaflet-tooltip.zn-label.hl { background: var(--accent); color: #fff; }
@media (max-width: 599px) { .leaflet-tooltip.zn-label { font-size: 10.5px; padding: 1px 6px; } }

/* ---------- Un solo cuadro: Zona Norte ---------- */
.zone-single h3 { gap: 8px; font-size: 1.25rem; }
.zone-single h3 .ico { color: var(--accent); }
.zone-single .zone-ask { margin-top: 18px; }
.zone-tags li { cursor: default; }
/* Mapa: tonos suaves para que combine con la web */
.map-real .leaflet-tile-pane { filter: grayscale(1) brightness(1.1) contrast(.72); }
@media (max-width: 1023px) { .map-real { height: 440px; } }

/* "Zona Norte · Desde 2009": misma tipografía que los subtítulos */
.kicker { font-family: "Saira", var(--f-display); font-style: italic; font-weight: 700; font-size: .9375rem; letter-spacing: .06em; }

/* =====================================================================
   Optimización para celulares
   ===================================================================== */

/* El cartel "Powered by Netlify" (plan gratuito) ocupa la esquina inferior
   derecha: subimos el botón flotante y la barra de servicios para que no se tapen. */
.wa-float { bottom: calc(64px + env(safe-area-inset-bottom)); }
.svc-pick { bottom: 64px; }

/* Enlaces del pie más fáciles de tocar */
@media (pointer: coarse) {
  .footer-col a, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  /* Tarjetas de confianza: formato de fila compacta (ícono + texto) */
  .trust-grid { gap: 10px; }
  .trust-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 16px; }
  .trust-card .ico-wrap { width: 44px; height: 44px; margin: 0; grid-row: span 2; border-radius: 12px; }
  .trust-card h3 { font-size: 1rem; align-self: center; }
  .trust-card p { margin-top: 4px; font-size: .9375rem; }

  /* Pasos: más compactos */
  .step { padding: 18px 16px 18px 68px; }
  .steps::before, .steps::after { left: 27px; }
  .step-ico { left: 8px; top: 14px; }
  .sec-head-center { text-align: left; }
  .sec-head-center h2, .sec-head-center .lede { margin-inline: 0; }

  /* Servicios: tarjetas un poco más bajas */
  .svc { padding: 14px 12px; }
  .svc .ico { width: 22px; height: 22px; margin-bottom: 2px; }

  /* Garantía: sello más chico para que el texto aparezca antes */
  .guarantee-grid { gap: 24px; }
  .seal { width: 190px; }
  .seal-center strong { font-size: 3.4rem; }

  /* Contacto */
  .contact-card { padding: 24px 16px 16px; border-radius: 22px; }
  .form-card { padding: 20px 16px; }

  /* Pie: columnas de enlaces de a dos */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
  .site-footer { padding-top: 44px; }
  .footer-bottom { margin-top: 28px; padding-bottom: 100px; }
}

/* =====================================================================
   Video con scroll en pantallas verticales (celulares y tablets paradas)
   La consulta coincide con NARROW en hero.js. El modo fijo (más arriba)
   sigue ganando para "movimiento reducido" y celulares acostados.
   ===================================================================== */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference), (max-width: 720px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .scrub { height: 360vh; }
  /* Oscurece la mitad de abajo, donde va el texto; arriba se ve la luz */
  .scrim { background: linear-gradient(180deg, rgba(4, 11, 28, .1) 0%, rgba(4, 11, 28, .15) 30%, rgba(4, 11, 28, .78) 58%, rgba(4, 11, 28, .94) 100%); }
  .band, .band-hero, .band-left, .band-right {
    left: 16px; right: 16px; width: auto; top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); transform: none; text-align: left;
  }
  .band::before { display: none; }
  .band-right p.band-lede { margin-left: 0; max-width: none; }
  .band h2 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.4rem); }
  .band p.band-lede { font-size: 1rem; margin-top: 12px; }
  .band-step { margin-bottom: 10px; }

  /* Primer tramo: lo esencial (los beneficios ya aparecen más abajo) */
  .band-hero .hero-benefits, .band-hero .hero-note { display: none; }
  .band-hero .hero-title { font-size: clamp(2rem, 1.3rem + 3.6vw, 2.6rem); margin-top: 14px; }
  .band-hero .hero-title span { font-size: .78em; }
  .band-hero .hero-sub { font-size: 1rem; margin-top: 12px; }
  .band-hero .hero-ctas { margin-top: 18px; flex-direction: column; }
  .band-hero .hero-ctas .btn { width: 100%; }

  /* Cierre: tarjeta centrada */
  .band-center { left: 16px; right: 16px; top: 50%; bottom: auto; width: auto; transform: translateY(-50%); text-align: center; }
  .settle-card { padding: 26px 20px 24px; border-radius: 22px; }
  .band-center h2 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.5rem); }
  .band-center .hero-ctas .btn { width: 100%; }

  .scroll-cue, .hero-progress { display: none; }
  .ring { right: 16px; bottom: auto; top: calc(var(--header-h) + 14px); width: 32px; height: 32px; }
}
@media (orientation: portrait) and (max-width: 720px) and (max-height: 700px) and (prefers-reduced-motion: no-preference) {
  .band-hero .hero-sub { display: none; }
}
/* En pantallas verticales, el botón flotante se oculta mientras se ve el video (ya hay botones de WhatsApp ahí) */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference), (max-width: 720px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-on .wa-float { opacity: 0; pointer-events: none; transform: translateY(12px); }
}
/* Celular: los tramos 1 a 3 más arriba (no pegados al borde inferior) */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference), (max-width: 720px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .band-hero, .band-left, .band-right { bottom: calc(16vh + env(safe-area-inset-bottom)); bottom: calc(16svh + env(safe-area-inset-bottom)); }
  .scrim { background: linear-gradient(180deg, rgba(4, 11, 28, .1) 0%, rgba(4, 11, 28, .2) 22%, rgba(4, 11, 28, .8) 45%, rgba(4, 11, 28, .9) 100%); }
}
/* Celular: textos más arriba y en cascada (cada paso un escalón más abajo) */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference), (max-width: 720px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .band-hero, .band-left, .band-right { bottom: auto; }
  .band-hero  { top: calc(var(--header-h) + 3svh); }
  .band-right { top: calc(var(--header-h) + 11svh); }
  .band-left:not(.band-hero) { top: calc(var(--header-h) + 19svh); }
  /* Paso 1 y Paso 2 con una línea de acento a la izquierda: se nota que son etapas distintas */
  .band-right, .band-left:not(.band-hero) { padding-left: 16px; border-left: 3px solid rgba(76, 158, 255, .85); }
  .scrim { background: linear-gradient(180deg, rgba(4, 11, 28, .55) 0%, rgba(4, 11, 28, .78) 30%, rgba(4, 11, 28, .7) 70%, rgba(4, 11, 28, .25) 100%); }
}
/* =====================================================================
   Celular: cascada
   - Cada etapa aparece un escalón más abajo y más adentro (diagonal).
   - Una línea de luz "cae" al costado de cada paso mientras aparece.
   - Los elementos de cada paso caen uno detrás del otro.
   ===================================================================== */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference), (max-width: 720px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .band-hero { top: calc(var(--header-h) + 9svh); }
  .band-right { top: calc(var(--header-h) + 15svh); left: 30px; }
  .band-left:not(.band-hero) { top: calc(var(--header-h) + 25svh); left: 46px; }

  /* La línea de luz que cae */
  .band-right, .band-left:not(.band-hero) { border-left: 0; padding-left: 18px; }
  .band-right::after, .band-left:not(.band-hero)::after {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #CFE3FF 0%, #4C9EFF 35%, rgba(31, 107, 255, .15) 100%);
    box-shadow: 0 0 12px rgba(76, 158, 255, .8);
    transform-origin: top; transform: scaleY(var(--k, 1));
  }
  .band-right::before, .band-left:not(.band-hero)::before {
    display: block; content: ""; position: absolute; inset: auto; left: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%;
    background: #CFE3FF; box-shadow: 0 0 0 4px rgba(76, 158, 255, .25), 0 0 16px #4C9EFF; opacity: var(--k, 1);
  }

  /* Cada elemento del paso cae desde arriba, uno detrás del otro */
  .band-right .rise, .band-left:not(.band-hero) .rise { transform: translateY(calc((1 - var(--kr)) * -28px)); }
  .band-right h2, .band-left:not(.band-hero) h2 {
    --kr: clamp(0, (var(--k, 1) - .22) * 3.2, 1);
    opacity: var(--kr); transform: translateY(calc((1 - var(--kr)) * -28px));
  }
  .band-right .band-lede, .band-left:not(.band-hero) .band-lede { --d: .55 !important; }
}

/* ---------- Logo FA Service TV ---------- */
.brand picture { display: block; line-height: 0; }
.brand .brand-logo { display: block; width: auto; height: 46px; }
@media (min-width: 1100px) { .brand .brand-logo { height: 54px; } }
.footer-brand .brand .brand-logo { height: 70px; }
.legal ~ * .brand-logo, .site-header .brand { flex: none; }
/* Logo más grande para que se lea "Service TV" */
:root { --header-h: 74px; }
.brand .brand-logo { height: 58px; }
@media (min-width: 1100px) { :root { --header-h: 84px; } .brand .brand-logo { height: 66px; } }
@media (max-width: 359px) { .brand .brand-logo { height: 50px; } }