/* ── LANDING PAGE — MOBILE ── */
  @media (max-width: 820px) {
    #landingView { padding: 0 20px; }
    #landingView nav { margin: 0 -20px; }

    #landingView nav { padding: 10px 20px; height: 60px; }
    /* Por encima del panel: en la referencia la barra no desaparece al abrir
       el menu -- el logo sigue ahi y la hamburguesa se convierte en la X. Sin
       esto el panel tapaba el logo y la pantalla quedaba sin identidad. */
    .nav-logo { padding-left: 0; position: relative; z-index: 330; }


    /* Sin reborde ni fondo, como la de enginy.ai: tres lineas finas que, al
       abrir, se cruzan y se funden en una X (la de arriba y la de abajo
       giran hacia el centro y la del medio se apaga). */
    .nav-hamburger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-right: -8px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      cursor: pointer;
      color: var(--black);
      position: relative;
      z-index: 330;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-hamburger svg { width: 26px; height: 26px; overflow: visible; }
    .nav-hamburger line {
      stroke-width: 1.6;
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
    }
    .nav-hamburger .l1 { transform-origin: 12px 6px; }
    .nav-hamburger .l2 { transform-origin: 12px 12px; }
    .nav-hamburger .l3 { transform-origin: 12px 18px; }
    .nav-hamburger.abierto .l1 { transform: translateY(6px) rotate(45deg); }
    .nav-hamburger.abierto .l2 { opacity: 0; transform: scaleX(0.2); }
    .nav-hamburger.abierto .l3 { transform: translateY(-6px) rotate(-45deg); }

    /* Medido en chatbase.co a 375 px: no es un desplegable, es una CAPA A
       PANTALLA COMPLETA. fixed desde arriba, 100dvh de alto, y el hueco de la
       barra resuelto con padding-top en vez de bajando el panel. Fondo gris
       muy claro, sin sombra, sin borde y sin fondo oscurecido detras -- nada
       de eso hace falta cuando el panel ocupa la pantalla entera.
       100dvh y no 100vh: en el movil la barra del navegador aparece y
       desaparece, y vh se queda con la altura grande. */
    /* Como el de enginy.ai: una capa blanca a pantalla completa que entra con
       un fundido y un pequeño desplazamiento hacia abajo; la barra (logo y X)
       se queda encima. Las filas llevan su linea fina y una flecha a la derecha,
       entran una detras de otra, y los dos botones van fijos abajo.
       100dvh y no 100vh: en el movil la barra del navegador aparece y
       desaparece, y vh se queda con la altura grande. */
    .nav-panel-content {
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      height: 100dvh;
      overflow-y: auto;
      background: #fff;
      z-index: 320;
      padding: 76px 20px 20px;
      opacity: 0;
      transform: translateY(-14px);
      /* Se oculta de verdad, retrasando la visibilidad hasta que acaba el
         fundido, para no cortarlo. */
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    }
    .nav-panel-content.open {
      opacity: 1;
      transform: none;
      visibility: visible;
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
    .nav-panel-content .nav-links {
      position: static;
      transform: none;
      width: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .nav-panel-content .nav-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: #000;
      border-bottom: 1px solid #ebe9e5;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.25s ease, transform 0.3s ease;
    }
    .nav-panel-content .nav-links a::after {
      content: '';
      width: 8px;
      height: 8px;
      margin-right: 4px;
      border-top: 1.6px solid #8a8a8a;
      border-right: 1.6px solid #8a8a8a;
      transform: rotate(45deg);
    }
    .nav-panel-content.open .nav-links a { opacity: 1; transform: none; }
    .nav-panel-content.open .nav-links a:nth-child(1) { transition-delay: 0.08s; }
    .nav-panel-content.open .nav-links a:nth-child(2) { transition-delay: 0.13s; }
    .nav-panel-content.open .nav-links a:nth-child(3) { transition-delay: 0.18s; }
    .nav-panel-content .nav-actions {
      flex-direction: column;
      gap: 10px;
      width: 100%;
      margin-top: auto;
      padding-top: 24px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.25s ease, transform 0.3s ease;
    }
    .nav-panel-content.open .nav-actions { opacity: 1; transform: none; transition-delay: 0.22s; }
    .nav-panel-content .nav-actions a {
      width: 100%;
      padding: 14px 18px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      text-align: center;
    }

    /* Sin fondo oscurecido: el panel ya tapa la pantalla entera. */
    #navPanelBackdrop.show { display: none; }


    /* 40 arriba y no 88. En escritorio esos 88 los pide el panel de color,
       que tiene que llegar a la barra; en movil el panel no existe --esta en
       display:none unas lineas mas abajo-- asi que ese hueco no sostenia
       nada: eran 88px de blanco entre la barra y el titular, en una pantalla
       de 812 de alto. */
    .hero { padding: 40px 0 72px; }
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    /* En una columna la respuesta no cabe en el alto de escritorio: el texto
       baja un punto y la ventana crece, para que se vea entera sin que el
       visitante tenga que esperar a que el hilo suba solo. */
    /* La ventana de la demo en el telefono: la MISMA que en escritorio (barra de
       titulo, chats y conversacion), sin marco de movil. Lo unico que cambia es
       que la barra lateral no cabe en 335 px y pasa a ser una fila de chats que
       se desliza de lado a lado, justo bajo la barra de titulo. */
    .preview-text { font-size: 11.5px; }
    .hero-right { padding: 20px 0; }
    .app-preview {
      margin: 0 14px;
      max-width: none;
      /* Sombra corta: la de escritorio, con 80 px de difusion, se salia del panel
         azul y dejaba una nube gris sobre el blanco. */
      box-shadow: 0 0 0 8px rgba(255,255,255,0.20), 0 10px 24px rgba(6,14,50,0.28);
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto 1fr;
    }
    .pv-selector { display: none; }
    .pv-lado {
      grid-row: 2;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 9px 12px;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid #ebe9e4;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .pv-lado::-webkit-scrollbar { display: none; }
    .pv-lado-seccion, .pv-lado-proyecto, .pv-lado-nuevo { display: none; }
    .pv-lado-item {
      flex: none;
      display: block;
      -webkit-line-clamp: unset;
      white-space: nowrap;
      padding: 7px 12px;
      border: 1px solid #e4e1dc;
      border-radius: 999px;
      font-size: 11.5px;
    }
    .pv-lado-item.activa { border-color: #d3d7f0; }
    .preview-body { grid-row: 3; height: 540px; }
    .pv-pista-lado { display: none; }
    .pv-pista-movil { display: inline; }
    /* La pregunta de entrada ocupa tres lineas y la caja, anclada por abajo,
       crece hacia arriba: el saludo sube lo que la caja gana, para que quepan
       los dos. */
    .pv-saludo { bottom: calc(50% + 84px); }
    .pv-pista { font-size: 10.5px; margin-top: 6px; }
    /* En una pantalla de 290 px de ancho el avatar se come una columna entera:
       los chats de movil de verdad no lo ponen en cada mensaje. */
    .preview-answer { gap: 0; }
    .preview-avatar { display: none; }
    /* El dialogo de la ubicacion, en 262 px de caja: las pestanas y los botones
       no caben en una linea a 11,5 y 12, y «Cancelar» salia pegado arriba de
       un boton de dos lineas. */
    .pv-pestana { font-size: 10.5px; padding-left: 4px; padding-right: 4px; }
    .pv-btn { font-size: 11.5px; display: flex; align-items: center; justify-content: center; text-align: center; }
    /* Las cotas del plano, mas grandes: el dibujo se reduce a ~0,65 y a 11,5 el
       texto salia de 7 px. 12,5 y no mas: «Ø 1,35» tiene que caber dentro del
       circulo de 40 unidades. */
    .pv-plano .p-cota { font-size: 12.5px; }
    .pv-plano .p-cota-fina { font-size: 10.5px; }
    /* A la izquierda, igual que en escritorio. Estuvo centrado mientras el
       hero de movil era una tarjeta suelta; con el titular a 48px y cuatro
       lineas, centrarlo deja los finales de linea en diagonal y cuesta mas
       de leer. Alineado a la izquierda cada linea empieza donde acabo la
       anterior, que es lo que hace el ojo al bajar. */
    .hero-left { text-align: left; }
    /* 34: el sector vuelve a ir en su propia linea, asi que cambiar de palabra
       ya no puede recolocar nada. Cuatro lineas con "instalaciones". */
    .hero-left h1 { font-size: 48px; }   /* el tracking va en em: se escala solo */
    /* Sin los margin:auto que lo centraban. El max-width tiene que seguir
       suelto: en una columna de 375 no sobra ancho que recortar. */
    .hero-left p { max-width: none; font-size: 19px; line-height: 1.4; }
    /* Uno encima del otro y cada uno a todo el ancho. En fila, en 375, los
       dos salian del tamaño de su texto y quedaban dos pastillas desiguales
       con un hueco muerto a la derecha. A lo ancho son dos franjas iguales
       y el pulgar da en cualquier parte de ellas. */
    .hero-cta {
      flex-direction: column;
      align-items: stretch;
    }
    /* La etiqueta, al centro de su franja. Sin esto hereda el text-align:left
       del bloque de al lado y se queda pegada a la izquierda de un boton que
       ahora mide toda la columna. */
    .hero-cta > a { text-align: center; }

    .features, .features-wrap .features, .who, .pricing, .cta-section {
      padding-left: 24px;
      padding-right: 24px;
    }
    .features, .who, .pricing { padding-top: 64px; padding-bottom: 64px; }
    .cta-section { padding-top: 64px; padding-bottom: 64px; margin: 24px 0; }

    .features, .who-inner, .pricing { text-align: center; }
    /* El titular de «Producto», a la izquierda, como el de la portada. */
    .features { text-align: left; }
    .features .section-label { text-align: left; }
    .features .section-title { margin-left: 0; margin-right: 0; }
    .section-label { width: 100%; }
    .section-title, .section-sub { margin-left: auto; margin-right: auto; }
    .section-title { font-size: 28px; }
    .cta-section h2 { font-size: 30px; }

    /* «Precios» y «Para quien», en movil, como carrusel: las cajas van en una
       fila que se desliza de lado a lado y la siguiente asoma por la derecha.
       La fila llega al borde de la pantalla (44 = los 20 de la pagina y los 24
       de la seccion) y cada caja se detiene en el centro. */
    .pricing-grid, .who-grid {
      display: flex;
      grid-template-columns: none;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-left: -44px;
      margin-right: -44px;
      padding: 2px 44px;
      scroll-padding: 0 44px;
    }
    .pricing-grid::-webkit-scrollbar, .who-grid::-webkit-scrollbar { display: none; }
    .pricing-grid { text-align: left; }
    .pricing-card, .who-tarjeta { flex: 0 0 82%; scroll-snap-align: center; }
    /* El selector de producto: la lista arriba y el panel debajo. En una
       columna de 375 el panel gasta menos margen para que la respuesta del
       video no se parta en diez lineas. */
    .sel { grid-template-columns: 1fr; gap: 20px; }
    /* En movil, cada punto es UN BLOQUE (el texto y, debajo, su imagen o video)
       y los cuatro bloques se deslizan juntos de lado a lado, como las cajas de
       «Para quien»: el texto y el panel de color se mueven a la vez, y el
       siguiente asoma por la derecha. El script los monta asi (ver
       montarCarrusel) y los devuelve a su sitio al pasar a escritorio. */
    .sel.carrusel { display: block; }
    .sel.carrusel > .sel-lista, .sel.carrusel > .sel-panel { display: none; }
    .sel-slides {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* 44 = los 20 de la pagina y los 24 de la seccion: la fila llega hasta el
         borde de la pantalla. */
      margin: 0 -44px;
      padding: 2px 44px;
      scroll-padding: 0 44px;
      text-align: left;
      user-select: none;
      -webkit-user-select: none;
    }
    .sel-slides::-webkit-scrollbar { display: none; }
    .sel-slide {
      flex: 0 0 84%;
      min-width: 0;
      scroll-snap-align: center;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    /* El diseño de siempre, sin recuadro: el texto sobre el fondo de la seccion
       (apagado cuando no es el elegido) y debajo su panel de color. */
    .sel-slide .sel-item { flex: none; width: 100%; padding: 0; opacity: 0.4; transition: opacity 0.25s ease; }
    .sel-slide.activa .sel-item { opacity: 1; }
    .sel-slide .sel-titulo { color: var(--black); font-size: 19px; }
    .sel-slide .sel-texto { grid-template-rows: 1fr; opacity: 1; }
    .sel-slide .sel-texto > span { padding-top: 10px; font-size: 14px; }
    /* El panel de cada bloque lleva su propio color y su propia demo, y va
       pegado abajo para que los cuatro queden a la misma altura. */
    .sel-slide .sel-panel { margin-top: auto; min-height: 420px; padding: 22px 14px; border-radius: 22px; }
    .sel-slide .sel-escena { display: block; animation: none; }
    .sel-slide .sel-fondo { opacity: 1; }
    .mv-ui { padding: 12px; }
    .who-tarjeta { padding: 28px 16px 16px; }
    .who-tarjeta h3 { font-size: 22px; }
    .who-lienzo { min-height: 420px; }
    .who-lienzo::before { height: 210px; }


    .footer-inner { padding: 0 24px; }
    .footer-top { padding: 48px 0 40px; }
    .footer-llamada h4 { font-size: 28px; }
    /* En 335 px el boton no cabe al lado del campo: va debajo, a todo el ancho. */
    .footer-llamada-form { flex-direction: column; }
    .footer-llamada-form button { width: 100%; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .footer-bottom-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-links { flex-wrap: wrap; gap: 16px; }
  }

  @media (max-width: 480px) {
    .footer-cols { grid-template-columns: 1fr; }
  }