/* Página de Starlink con fotos reales (17/09/2026). Se carga después de style.css. */
.landing header { align-items: center; }
.top-links { display: flex; align-items: center; gap: 18px; }
.top-links a { text-decoration: none; font-weight: 700; }
.top-cta { padding: 9px 16px; border: 1px solid #7fa5ff; border-radius: 999px; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 34px 0 30px; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); text-shadow: 0 2px 20px #000; }
.hero-lead { font-size: 1.15rem; color: #d6e2ea; max-width: 560px; }
.hero-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.hero-datos li { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #0e1723b3; border: 1px solid #40586b; border-radius: 12px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-datos b { font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #7fa5ff; }
.hero-datos span { font-size: .82rem; line-height: 1.35; color: #cbd8e2; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-acciones .button { margin-top: 0; padding: 15px 22px; }
.button.secundario { background: transparent; color: #7fa5ff; border: 1px solid #7fa5ff; }
.hero-foto { position: relative; margin: 0; }
.hero-foto img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px #000a; }
.hero-foto figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; background: #0e1723cc; border-radius: 999px; font-size: .82rem; }

.prueba { margin: 10px 0 40px; padding: 16px 20px; background: #16293699; border: 1px solid #40586b; border-radius: 14px; }
.prueba p { margin: 0; color: #d6e2ea; }
.prueba b { color: #7fa5ff; }

.seccion-cabeza { margin-bottom: 20px; }
.seccion-cabeza h2 { margin: 6px 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.trabajos { padding: 20px 0 50px; }
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.galeria figure { margin: 0; overflow: hidden; background: #16293699; border: 1px solid #40586b; border-radius: 16px; }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.galeria figure:hover img { transform: scale(1.03); }
.galeria figcaption { padding: 12px 14px 16px; font-size: .92rem; line-height: 1.45; color: #cbd8e2; }
.galeria figcaption b { display: block; margin-bottom: 3px; color: #ecf4fa; font-size: 1rem; }

.calculator { margin-bottom: 10px; }
.scope li b { color: #ecf4fa; }

.pasos { padding: 50px 0 20px; }
.pasos ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { position: relative; padding: 46px 16px 18px; background: #16293699; border: 1px solid #40586b; border-radius: 14px; counter-increment: paso; }
.pasos li::before { content: counter(paso); position: absolute; top: 14px; left: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7fa5ff; color: #11132b; font-weight: 800; font-size: .85rem; }
.pasos b { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.pasos span { font-size: .92rem; line-height: 1.5; color: #cbd8e2; }

.cierre { margin: 10px 0 50px; padding: clamp(24px, 4vw, 44px); text-align: center; background: #223d4199; border: 1px solid #53716f; border-radius: 18px; }
.cierre h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.cierre p { color: #d5e5e3; }
.cierre .hero-acciones { justify-content: center; margin-top: 18px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paraquien-lista, .kit ul { grid-template-columns: 1fr; }
  .hero-foto { order: -1; }
  .hero-foto img { max-height: 420px; }
  .pasos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .top-links a:not(.top-cta) { display: none; }
  .hero-datos { grid-template-columns: 1fr; }
  .hero-datos li { flex-direction: row; align-items: baseline; gap: 10px; }
  .hero-acciones .button { flex: 1 1 100%; }
  .galeria { grid-template-columns: 1fr; }
  .galeria img { aspect-ratio: 4 / 3; }
  .pasos ol { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .galeria img { transition: none; } }

.paraquien { padding: 10px 0 50px; }
.paraquien-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.paraquien-lista article { padding: 18px; background: #16293699; border: 1px solid #40586b; border-radius: 14px; }
.paraquien-lista b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.paraquien-lista p { margin: 0; color: #cbd8e2; font-size: .95rem; line-height: 1.5; }
.kit { margin-top: 18px; padding: 18px 20px; background: #223d4180; border: 1px solid #53716f; border-radius: 14px; }
.kit ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 4px; padding: 0; list-style: none; }
.kit li { display: flex; flex-direction: column; gap: 2px; }
.kit li b { font-size: 1.1rem; color: #7fa5ff; }
.kit li span { font-size: .85rem; color: #cbd8e2; }
.scope-tiempo { grid-column: 1 / -1; margin: 0; }

/* Botón de la ficha técnica: que se entienda que es una descarga (17/09/2026). */
.kit .kit-ficha { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 20px 14px 16px; background: #7fa5ff; color: #11132b; border-radius: 14px; text-decoration: none; box-shadow: 0 8px 22px #0006; transition: transform .18s, box-shadow .18s, background .18s; }
.kit .kit-ficha:hover, .kit .kit-ficha:focus-visible { transform: translateY(-3px); background: #b6ccff; box-shadow: 0 14px 30px #000a, 0 0 0 4px #7fa5ff33; }
.kit .kit-ficha:active { transform: translateY(0); }
.kit-ficha-icono { flex: 0 0 auto; width: 34px; height: 34px; padding: 6px; background: #11132b; color: #7fa5ff; border-radius: 10px; }
.kit-ficha-texto { display: flex; flex-direction: column; line-height: 1.25; }
.kit-ficha-texto b { font-size: 1.08rem; }
.kit-ficha-texto small { font-size: .8rem; opacity: .8; }
.kit-ficha-flecha { flex: 0 0 auto; width: 22px; height: 22px; transition: transform .18s; }
.kit .kit-ficha:hover .kit-ficha-flecha { transform: translateY(3px); }
@media (max-width: 640px) { .kit .kit-ficha { display: flex; } }
@media (prefers-reduced-motion: reduce) { .kit .kit-ficha, .kit-ficha-flecha { transition: none; } }

/* Botón del asistente: más discreto, no tapa la página (17/09/2026). */
.landing .agent-launch { width: 92px; height: 92px; min-width: 0; min-height: 0; max-width: none; max-height: none; padding: 8px; right: 18px; bottom: 18px; gap: 2px; }
.landing .agent-caption { font-size: .68rem; line-height: 1.1; }
.landing .agent-greeting { width: 170px; padding: 9px 12px; font-size: .85rem; }
@media (max-width: 640px) {
  .landing .agent-launch { width: 70px; height: 70px; right: 12px; bottom: 12px; padding: 6px; }
  .landing .agent-caption { display: none; }
  .landing .agent-greeting { display: none; }
  .landing footer { padding-bottom: 110px; }
}

/* Ficha técnica y checklist en la propia página (Héctor, 23/09/2026): «esa ficha
   está muy chida como para plasmarla en la página… así evitamos que la gente
   tenga que bajar un archivo para ver la información». Va como texto, no como
   imagen del PDF: así lo lee Google, se copia y se ve bien en el teléfono. */
.ficha, .checklist { padding: 10px 0 50px; }
.ficha-intro { max-width: 62ch; color: #cbd8e2; line-height: 1.6; margin: 0 0 22px; }
.ficha-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ficha-grupo { padding: 18px 20px; background: #16293699; border: 1px solid #40586b; border-radius: 14px; }
.ficha-grupo h3 { margin: 0 0 12px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #9fd3c7; }
.ficha-grupo h3 + h3 { margin-top: 20px; }
.ficha-grupo dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 14px; margin: 0; }
.ficha-grupo dt { color: #9fb3c4; font-size: .92rem; }
.ficha-grupo dd { margin: 0; font-size: .95rem; font-weight: 600; }
.ficha-lista { margin: 0; padding-left: 18px; line-height: 1.6; color: #dbe6ee; }
.ficha-lista li { margin-bottom: 5px; font-size: .95rem; }
.ficha-nota { margin: 18px 0 0; max-width: 78ch; color: #9fb3c4; font-size: .84rem; line-height: 1.55; }
.checklist-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.checklist-cols article { padding: 18px 20px; background: #16293699; border: 1px solid #40586b; border-radius: 14px; }
.checklist-cols h3 { margin: 0 0 12px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #9fd3c7; }
@media (max-width: 760px) {
  .ficha-grupos, .checklist-cols { grid-template-columns: minmax(0, 1fr); }
  .ficha-grupo dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha-grupo dd { margin-bottom: 10px; }
}
.hero-aviso { margin: 14px 0 0; max-width: 560px; font-size: .78rem; line-height: 1.4; color: #aebccb; }

/* Banda de la tienda (19/10/2026) */
.tienda-banda { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px 0 40px; padding: clamp(20px, 3vw, 32px); background: linear-gradient(120deg, #16293699, #2f6bff33); border: 1px solid #40586b; border-radius: 18px; }
.tienda-banda h2 { margin: 4px 0 8px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.tienda-banda p { margin: 0; color: #cbd8e2; max-width: 620px; }
.tienda-banda .button { flex: none; margin-top: 0; }
@media (max-width: 700px) { .tienda-banda { flex-direction: column; align-items: flex-start; } }

/* ===== Portada con más vida (19/10/2026): fotos que se salen del cuadro, cinta, mosaico y cortes ===== */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; right: -8%; top: -12%; width: 62%; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, #2f6bff40, #2f6bff00 66%); pointer-events: none; }
.landing .hero-foto > img:first-of-type { border-radius: 34px 150px 34px 34px; }
.landing .hero-foto .hero-foto-2 { position: absolute; left: -34px; bottom: 54px; width: 36%; max-width: 190px; height: auto; aspect-ratio: 1; max-height: none; object-fit: cover; border-radius: 50%; border: 5px solid #0a0f1a; box-shadow: 0 16px 36px #000a; }
.hero-sello { position: absolute; top: 22px; right: -14px; display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%; background: #2f6bff; color: #fff; text-align: center; font-size: .72rem; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; transform: rotate(9deg); box-shadow: 0 12px 30px #0008; }
.hero-sello b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; letter-spacing: 0; line-height: 1; }

.seccion-cabeza .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.seccion-cabeza .eyebrow::before { content: ""; width: 34px; height: 2px; background: #7fa5ff; }

/* Cinta de fotos (21/10/2026): avanza siempre sola, también con «reducir movimiento», y sin barra de deslizamiento; se detiene al pasar el
   cursor. Cada foto sale una sola vez por vuelta y el juego completo es más ancho que la pantalla, así que no se ven dos iguales a la vez. */
.prueba { background: transparent; border: 0; padding: 0; margin: 0 0 46px; }
.prueba > p { margin: 0 0 18px; padding: 14px 20px; background: #16293699; border: 1px solid #40586b; border-radius: 999px; display: inline-block; }
.cinta { overflow: hidden; margin: 0 -16px; padding: 10px 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cinta::-webkit-scrollbar { display: none; }
.cinta { scrollbar-width: none; }
.cinta-pista { display: flex; gap: 16px; width: max-content; animation: cinta-avanza 80s linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
.cinta figure { flex: none; width: clamp(190px, 20vw, 320px); margin: 0; }
.cinta img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 14px 30px #0007; }
.landing .cinta figure:nth-child(3n+1) img { border-radius: 95px 95px 18px 18px; }
.landing .cinta figure:nth-child(3n+2) img { border-radius: 18px 60px 18px 60px; }
.landing .cinta figure:nth-child(3n) img { border-radius: 18px 18px 95px 95px; }
.cinta figure:nth-child(even) { transform: translateY(18px); }
@keyframes cinta-avanza { to { transform: translateX(calc(-50% - 8px)); } }

/* Fotos que se abren al tocarlas. */
.cinta img, .mosaico img, .hero-foto > img { cursor: zoom-in; }
.visor { overflow: hidden; padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.visor::backdrop { background: #05080fe8; backdrop-filter: blur(4px); }
.visor-marco { position: relative; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; padding: 56px 64px 64px; }
.visor-marco img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 14px; box-shadow: 0 20px 60px #000c; background: #162936; }
.visor-pie { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; padding: 0 70px; text-align: center; font-size: .9rem; color: #c9d6e2; }
.visor button { position: absolute; width: 46px; height: 46px; min-width: 0; min-height: 0; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; background: #0a0f1ad9; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.visor button:hover { background: #2f6bff; }
.visor .visor-cerrar { top: 14px; right: 14px; }
.visor .visor-ant { left: 12px; top: 50%; transform: translateY(-50%); }
.visor .visor-sig { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .visor-marco { padding: 56px 8px 70px; } .visor-marco img { max-height: calc(100vh - 150px); } .visor .visor-ant { left: 6px; top: auto; bottom: 14px; transform: none; } .visor .visor-sig { right: 6px; top: auto; bottom: 14px; transform: none; } .visor-pie { padding: 0 60px; font-size: .8rem; } }

/* Mosaico de trabajos: celdas de distinto tamaño y esquinas distintas. */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 14px; }
.mosaico figure { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #162936; }
.mosaico figure:nth-child(4n+2) { border-radius: 22px 80px 22px 22px; }
.mosaico figure:nth-child(4n+3) { border-radius: 22px 22px 80px 22px; }
.mosaico .m-grande { grid-row: span 2; }
.mosaico .m-ancha { grid-column: span 2; }
.mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mosaico figure:hover img { transform: scale(1.06); }
.mosaico figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 16px 14px; font-size: .88rem; line-height: 1.4; color: #dbe6ee; background: linear-gradient(180deg, #0a0f1a00, #0a0f1af0 70%); }
.mosaico figcaption b { display: block; color: #fff; font-size: .98rem; margin-bottom: 2px; }
@media (max-width: 900px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; } }
@media (max-width: 640px) { .mosaico { grid-template-columns: 1fr; grid-auto-rows: 280px; } .mosaico .m-grande, .mosaico .m-ancha { grid-row: auto; grid-column: auto; } .landing .hero-foto .hero-foto-2 { left: 8px; } .hero-sello { right: 8px; width: 84px; height: 84px; } .hero-sello b { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .mosaico img { transition: none; } }

/* Cortes y formas: nada de puros rectángulos. */
.tienda-banda { padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 44px); clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%); border: 0; background: linear-gradient(120deg, #162936, #2f6bff55); border-radius: 0; }
.landing .cierre { border-radius: 24px 110px 24px 110px; }
.landing .pasos li { border-radius: 16px 46px 16px 16px; }
.landing .pasos li::before { border-radius: 50%; width: 30px; height: 30px; font-size: 1rem; }
.paraquien-lista figure { margin: 0; }
.landing .paraquien-lista img { display: block; width: 100%; height: auto; border-radius: 22px 22px 22px 70px; }
.landing .paraquien-lista figure:nth-child(2) img { border-radius: 22px 70px 22px 22px; }
.landing .kit, .landing .ficha-grupo, .landing .checklist-cols article { border-radius: 20px 20px 20px 54px; }
@media (max-width: 700px) { .tienda-banda { clip-path: none; border-radius: 24px; } }

/* Banda del mapa (19/10/2026): igual que la de la tienda pero con el corte hacia el otro lado. */
.landing .mapa-banda { clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); background: linear-gradient(240deg, #162936, #2f6bff66); }
@media (max-width: 700px) { .landing .mapa-banda { clip-path: none; } }

/* Botón del asistente con el robot (21/10/2026): la cara del robot llena el círculo, con un aro de luz y un puntito de «en línea». */
.landing .agent-launch { padding: 0; gap: 0; border: 3px solid #4fd8ff; background: #0f1d2c; overflow: visible; box-shadow: 0 0 0 4px #4fd8ff30, 0 8px 28px #000a, 0 0 26px #2fb8ff66; transition: transform .2s, box-shadow .2s; }
.landing .agent-launch:hover { transform: scale(1.06); box-shadow: 0 0 0 5px #4fd8ff55, 0 10px 30px #000b, 0 0 34px #2fb8ff99; }
.landing .agent-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.landing .agent-launch::after { content: ""; position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #3ddc84; border: 3px solid #0f1d2c; animation: agente-pulso 2.2s ease-out infinite; }
@keyframes agente-pulso { 0% { box-shadow: 0 0 0 0 #3ddc8499; } 70%, 100% { box-shadow: 0 0 0 10px #3ddc8400; } }
.landing .agent-caption { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #0a0f1a; border: 1px solid #4fd8ff80; color: #d6f4ff; font-size: .64rem; font-weight: 700; white-space: nowrap; }
.agent-avatar-chico { width: 44px; height: 44px; margin-right: 10px; vertical-align: middle; border-radius: 50%; border: 2px solid #4fd8ff; object-fit: cover; }
@media (max-width: 640px) { .landing .agent-launch { width: 72px; height: 72px; } .landing .agent-launch::after { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .landing .agent-launch::after { animation: none; } }