/* ==========================================================================
   ConectaMX · Hoja de estilos
   Orden: variables → base → cabecera → carrusel → beneficios → descarga
          → pasos → FAQ → cierre → pie/sticky/toast → responsive
   ========================================================================== */

:root {
  --pink: #fa397f;
  --violet: #9b55ed;
  --bg: #130e18;
  --muted: #d1c0d2;
}

/* ---------- Base ---------- */
* { box-sizing: border-box }

body {
  margin: 0;
  background: #f3edf4;
  color: white;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

main {
  max-width: 445px;
  min-height: 100vh;
  margin: auto;
  background: radial-gradient(circle at 50% 30%, #37213d, #140d19 70%);
  padding: 18px 16px 112px;
  box-shadow: 0 0 36px #35273a22;
}

/* ---------- Cabecera / hero ---------- */
/* El selector de idioma no debe encogerse: si falta sitio se oculta la etiqueta,
   nunca se parte el logotipo ni el texto de los botones. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px }

.brand { font-weight: 850; letter-spacing: .3px; font-size: 20px; white-space: nowrap; flex-shrink: 0 }
.brand span { color: var(--pink) }

.tag {
  font-size: 10px;
  letter-spacing: .3px;
  border: 1px solid #ffffff38;
  border-radius: 99px;
  padding: 5px 9px;
  color: #e9cde2;
  white-space: nowrap;
  flex-shrink: 0;
}

.top__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }

/* Selector de idioma: botones segmentados y grandes
   (objetivo táctil de 40 px de alto, como pide cualquier guía móvil).
   Oculto hasta que app.js genera los botones, así nunca se ve un pastillero vacío. */
.lang {
  display: none;
  align-items: center;
  gap: 3px;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  padding: 4px;
  background: #ffffff14;
}
.lang.is-ready { display: inline-flex }

.lang__globe { font-size: 14px; line-height: 1; opacity: .9; padding: 0 2px 0 6px }

.lang__btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #f2dfea;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1;
  cursor: pointer;
  min-width: 54px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s, color .18s;
}
.lang__btn:hover { background: #ffffff21; color: #fff }
.lang__btn.is-active {
  background: linear-gradient(135deg, #ff67ac, #bf4fd0);
  color: #fff;
  box-shadow: 0 4px 14px #ff67ac42;
}
.lang__btn:focus-visible { outline: 2px solid #ff67ac; outline-offset: 2px }

/* Hindi: la escritura devanagari necesita un poco más de aire */
html[lang^="hi"] .lang__btn { font-size: 14px; letter-spacing: 0 }

.eyebrow {
  text-align: center;
  color: #ff9abf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 20px 0 5px;
}

.headline {
  text-align: center;
  font-size: clamp(26px, 7.4vw, 38px);
  line-height: 1.09;
  letter-spacing: -1.2px;
  margin: 0 0 9px;
  font-weight: 900;
}
.headline em { font-style: normal; color: #ff63a3 }

.sub {
  text-align: center;
  max-width: 320px;
  margin: 0 auto 20px;
  line-height: 1.5;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Carrusel de perfiles ---------- */
.device {
  position: relative;
  width: min(100%, 320px);
  height: min(126vw, 470px);
  max-height: 480px;
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid #66505d;
  border-radius: 37px;
  background: #28222f;
  box-shadow: 0 26px 60px #0008, 0 0 0 5px #ffffff09;
  touch-action: pan-y;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16px) scale(.98);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.picture {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #c87b90 0%, #8b4d84 44%, #393352 100%);
  background-size: cover;
  background-position: center;
}
.slide:nth-child(1) .picture { background-image: linear-gradient(155deg, #c87b90 0%, #8b4d84 44%, #393352 100%) }
.slide:nth-child(2) .picture { background-image: linear-gradient(150deg, #b66c6d, #563e79 72%) }
.slide:nth-child(3) .picture { background-image: linear-gradient(150deg, #579aa0, #61518d 70%) }
.slide:nth-child(4) .picture { background-image: linear-gradient(150deg, #dc9178, #743851 70%) }
.slide:nth-child(5) .picture { background-image: linear-gradient(150deg, #7f6bb0, #3a2a55 72%) }
.slide:nth-child(6) .picture { background-image: linear-gradient(150deg, #c96f9b, #4a2447 70%) }
/* La foto real se aplica con background-image en línea desde app.js
   (una variable CSS con url() se resolvería contra esta carpeta, no contra la raíz). */

/* Silueta neutra: se muestra mientras no haya foto real configurada */
.ghost {
  position: absolute;
  top: 19%;
  left: 17%;
  width: 66%;
  height: 60%;
  opacity: .6;
  display: grid;
  place-items: center;
}
.ghost svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 25px #0003) }
.picture.has-photo .ghost { display: none }

.shade { position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, #09050d 97%) }

.bottomcard { position: absolute; bottom: 20px; left: 20px; right: 20px }
.name { font-size: 28px; font-weight: 900; letter-spacing: -.5px }
.name small { font-size: 17px; font-weight: 600 }
.bio { font-size: 13px; color: #f4deec; margin: 4px 0 17px; line-height: 1.45 }

.actions { display: flex; justify-content: center; gap: 18px }
.action {
  border: 1px solid #ffffff2e;
  color: white;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  cursor: pointer;
  background: #201923bb;
  box-shadow: 0 8px 25px #0005;
}
.action.like { background: var(--pink); border: none }
.action.star { color: #fff; background: #7840b7 }
.action:active { transform: scale(.94) }

.hint { text-align: center; color: #bfabc3; font-size: 12px; margin: 14px auto }

.dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 }
.dot { height: 7px; width: 7px; border-radius: 9px; background: #806a84; border: 0; padding: 0; cursor: pointer }
.dot.on { width: 22px; background: #ff67ac }

/* ---------- Galería (segundo carrusel, debajo del principal) ----------
   Pista horizontal centrada con transform: la foto activa ocupa el centro y
   las vecinas asoman a los lados. Se arrastra con el dedo o se cambia con los
   puntos; el JS solo mueve translateX (no hay scroll horizontal → sin barra). */
.gallery {
  margin: 6px 0 4px;
  padding: 16px 0 12px;
  border-radius: 22px;
  border: 1px solid #ffffff1f;
  background: linear-gradient(160deg, #1d1424, #150e1a);
  box-shadow: 0 12px 30px #05020840;
  overflow: hidden;
}

.gallery__kicker { margin: 0 15px 6px }
.gallery__title { font-size: 19px; font-weight: 900; margin: 0 15px 12px; letter-spacing: -.3px }

.gallery__viewport {
  /* debe ser un bloque de ancho de contenedor: si deja crecer al track,
     clientWidth devuelve el ancho del CONTENIDO y el centrado se descuadra */
  width: 100%;
  overflow: hidden;
  padding: 0 0 2px;
}

.gallery__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 15px;
  /* sin width: max-content — con flex-basis en % el max-content se realimenta
     y las fotos crecen sin límite. El track simplemente se desborda. */
  transition: transform .3s ease;
  will-change: transform;
  cursor: grab;
}
.gallery__track:active { cursor: grabbing }

.gallery__item {
  flex: 0 0 78%;
  margin: 0;
  scroll-snap-align: center;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #28222f;
  aspect-ratio: 2 / 3;
  box-shadow: 0 8px 20px #00000059;
  opacity: .62;
  transform: scale(.96);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery__item.is-active { opacity: 1; transform: scale(1) }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.gallery .dots { margin: 12px 0 6px }
.gallery__note { text-align: center; color: #a993ad; font-size: 11px; margin: 0 }

/* ---------- Beneficios ---------- */
.social-proof {
  margin: 19px 0 8px;
  padding: 16px 15px 14px;
  border-radius: 22px;
  border: 1px solid #fa56915e;
  background: radial-gradient(circle at 94% 10%, #74305c70, transparent 50%), linear-gradient(150deg, #2d182e, #1b1122);
  box-shadow: 0 12px 30px #05020840;
}

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

.benefit-card {
  background: linear-gradient(180deg, #16151b, #111215);
  border: 1px solid #ffffff18;
  border-radius: 22px;
  padding: 22px 14px 18px;
  min-height: 154px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px #00000035;
}
.benefit-icon { font-size: 28px; line-height: 1; margin-bottom: 14px }
.benefit-title { font-size: 16px; font-weight: 850; line-height: 1.2; margin: 0 0 8px }
.benefit-text { font-size: 13px; line-height: 1.45; color: #c7b9c9; margin: 0; max-width: 180px }

/* ---------- Panel de descarga ---------- */
.download-panel {
  margin-top: 24px;
  border: 1px solid #ffffff20;
  border-radius: 23px;
  background: radial-gradient(circle at 78% 88%, #581b39 0%, transparent 44%), linear-gradient(135deg, #21132b, #190e1b 70%);
  padding: 23px 17px;
  box-shadow: 0 16px 36px #0004;
}
.download-panel h2 { font-size: 24px; line-height: 1.18; margin: 0 0 18px; letter-spacing: -.5px }
.download-panel p { font-size: 13px; line-height: 1.6; color: #baaac3; margin: 0 0 19px }
.download-panel .note { margin: 13px 0 0 }

.section-kicker { font-weight: 800; letter-spacing: 2px; color: #ed72fa; font-size: 11px; margin: 0 0 24px }
.section-kicker--tight { margin-bottom: 12px }

.app-specs { display: grid; gap: 10px; margin-top: 20px }
.app-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid #ffffff1d;
  background: #110d13a6;
  border-radius: 15px;
  min-height: 50px;
  padding: 13px 14px;
  font-size: 12px;
}
.app-spec span { color: #b4a5bb }
.app-spec b { text-align: right; font-weight: 750 }

/* ---------- Secciones de información ---------- */
.info-section { padding: 28px 3px 5px }
.info-section h2 { font-size: 23px; line-height: 1.15; margin: 0 0 10px }
.info-lead { font-size: 13px; color: #b8a8c0; line-height: 1.5; margin: 0 0 18px }

/* ---------- Pasos de instalación ---------- */
.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.step-list li {
  border: 1px solid #ffffff1b;
  border-radius: 17px;
  background: #ffffff08;
  padding: 15px 14px;
  display: block;
}
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pink);
  display: grid;
  place-items: center;
  flex: none;
  font-size: 14px;
  font-weight: 850;
}
.step-main { display: flex; gap: 12px; align-items: flex-start }
.step-list strong { display: block; font-size: 13px; margin: 0 0 5px }
.step-list p { font-size: 12px; line-height: 1.5; color: #b6a6ba; margin: 0 }

/* Capturas de instalación: tamaño natural, sin recortarlas en recuadros bajos */
.step-image {
  display: block;
  margin-top: 14px;
  border: 1px dashed #e77fbb75;
  border-radius: 15px;
  overflow: hidden;
  background: #201523;
}
.step-image img {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}
.step-image.ready img { visibility: visible }

.step-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 185px;
  padding: 20px 12px;
  color: #e3c9e3;
  text-align: center;
}
.step-placeholder .placeholder-icon { font-size: 35px; line-height: 1; color: #f391c4 }
.step-placeholder b { font-size: 13px }
.step-placeholder small { font-size: 11px; color: #bfa0bf }
.step-image.ready .step-placeholder { display: none }

/* ---------- Preguntas frecuentes ---------- */
.faq-section { padding-top: 32px }
.faq-section h2 { font-size: 26px; letter-spacing: -.6px; margin-bottom: 9px }
.faq-section .info-lead { margin-bottom: 17px }

.faq-item {
  margin: 10px 0;
  border: 1px solid #e32f7f65;
  border-radius: 21px;
  background: linear-gradient(140deg, #130e18, #0e0c11);
  box-shadow: 0 3px 15px #0002;
  overflow: hidden;
}
.faq-item[open] { border-color: #ee348b9c }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after { content: '+'; color: #ff469b; font-weight: 900; font-size: 20px; line-height: 1 }
.faq-item[open] summary::after { content: '−' }
.faq-item p { padding: 0 16px 18px; font-size: 13px; line-height: 1.7; color: #bcb1c5; margin: 0 }

/* ---------- Panel final ---------- */
.final-panel {
  padding: 24px 18px;
  margin: 23px 0 10px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, #3b1539, #1d1124);
  border: 1px solid #ffffff20;
}
.final-panel h2 { font-size: 23px; margin: 4px 0 10px }
.final-panel p { font-size: 13px; color: #c7b4cb; line-height: 1.5; margin: 0 0 18px }

/* ---------- Botones ---------- */
.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  color: white;
  background: linear-gradient(90deg, #fa2676, #fc4c9f);
  padding: 17px 20px;
  border-radius: 17px;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 9px 26px #fb27784d;
  cursor: pointer;
  border: 0;
  width: 100%;
  font-family: inherit;
}
.rainbow-cta {
  background: linear-gradient(100deg, #be19dc 0%, #fb2488 48%, #fe7800 100%);
  border-radius: 30px;
  font-size: 14px;
  padding: 16px;
  box-shadow: 0 12px 24px #d7267c34;
}

.note { text-align: center; color: #bdaec4; font-size: 11px; margin-top: 10px }

/* ---------- Pie, barra fija y aviso ---------- */
.foot { font-size: 11px; color: #a993ad; text-align: center; line-height: 1.7; margin-top: 27px }
.foot a { color: #d8bdd7 }

.sticky {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(445px, 100%);
  background: #140d18f5;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff21;
  z-index: 50;
}
.sticky .cta { padding: 13px; font-size: 15px }

/* ---------- Botones flotantes de atención al cliente ----------
   Se colocan encima de la barra fija inferior para no tapar el CTA.
   Aro blanco + sombra fuerte: así se leen sobre cualquier fondo de la página. */
.float-contact {
  position: fixed;
  /* Siempre DENTRO del marco de contenido: en móvil a 14px del borde, en
     escritorio a 14px del borde derecho de la columna (max-width 445px).
     50% - 208px = mitad de la columna (222.5) menos 14px de margen interior. */
  right: max(14px, calc(50% - 208px));
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  /* OJO: imprescindible. El contenedor se ajusta al ancho del elemento más ancho
     (la píldora de texto), así que sin esto el botón redondo queda a la IZQUIERDA
     y la píldora sobresale hacia la derecha.                                   */
  align-items: flex-end;
  gap: 14px;
}

.support-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 3px #fff, 0 10px 22px #00000073;
  transition: transform .15s ease, box-shadow .15s ease;
}
.support-btn:active { transform: scale(.94) }
.support-btn svg { display: block; fill: currentColor }

/* Telegram: el avión ocupa casi todo el círculo */
.support-btn--telegram { background: #2aabee }
.support-btn--telegram svg { width: 30px; height: 30px }

/* Pilón con texto bajo el icono del avión: «Live agent» (atención humana) */
.support-pill {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border-radius: 18px;
  background: #2aabee;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 3px #fff, 0 10px 22px #00000073;
  transition: transform .15s ease, box-shadow .15s ease;
}
.support-pill:active { transform: scale(.95) }
.support-pill svg { width: 16px; height: 16px; display: block }
.support-pill[hidden] { display: none }

/* Pulso suave sobre el botón del avión: llama la atención sin ser molesto */
.support-btn--telegram::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #2aabee;
  animation: supportPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes supportPulse {
  0% { transform: scale(1); opacity: .75 }
  70% { transform: scale(1.4); opacity: 0 }
  100% { transform: scale(1.4); opacity: 0 }
}

.support-btn[hidden] { display: none }

@media (hover: hover) {
  .support-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 14px 28px #0000008c }
  .support-pill:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 14px 28px #0000008c }
}

@media (prefers-reduced-motion: reduce) {
  .support-btn { transition: none }
  .support-pill { transition: none }
  .support-btn--telegram::after { animation: none; opacity: 0 }
}

/* Pantallas muy bajas: reduce el tamaño para no tapar el carrusel */
@media (max-height: 560px) {
  .support-btn { width: 48px; height: 48px }
  .support-btn--telegram svg { width: 26px; height: 26px }
  .support-pill { height: 30px; font-size: 11px }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: #fff;
  color: #241228;
  border-radius: 12px;
  padding: 11px 14px;
  z-index: 80;
  font-size: 13px;
  box-shadow: 0 10px 30px #0004;
  max-width: 88%;
  display: none;
  text-align: center;
}
.toast.show { display: block }

/* ---------- Ajustes tipográficos por idioma ----------
   El devanagari (hindi) necesita más interlineado y menos tracking. */
html[lang^="hi"] .headline { line-height: 1.34; letter-spacing: 0 }
html[lang^="hi"] .sub,
html[lang^="hi"] .info-lead,
html[lang^="hi"] .benefit-text,
html[lang^="hi"] .step-list p,
html[lang^="hi"] .faq-item p { line-height: 1.75 }
html[lang^="hi"] .eyebrow,
html[lang^="hi"] .section-kicker { letter-spacing: 1px }

/* ---------- Responsive ---------- */
/* El selector de idioma es grande a propósito: en pantallas estrechas se retira
   primero la etiqueta "ANDROID APP" y sólo luego se comprime el selector. */
@media (max-width: 430px) {
  .tag { display: none }
}

@media (max-width: 360px) {
  .lang__globe { display: none }
  .lang__btn { min-width: 50px; padding: 0 11px; font-size: 14px }
}

@media (max-width: 360px) {
  .benefit-card { min-height: 145px; padding: 20px 12px 16px }
  .benefit-title { font-size: 15px }
  .benefit-text { font-size: 12px }
}

@media (max-width: 350px) {
  .device { height: 430px }
  .actions { gap: 12px }
  .action { width: 51px; height: 51px }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none }
}

:focus-visible { outline: 2px solid #ff67ac; outline-offset: 2px }