/*
  Pulido de tablet (oct-2026). Solo aplica entre 641 y 1100px de ancho: el
  computador y el celular no cambian. La landing hereda en tablet proporciones
  de escritorio (titulares partidos en 4 líneas en media columna, fotos de
  700px de alto, la demo con los controles separados de su pantalla) y la
  página medía 14 pantallas a 800px. Va al final de APPROVED_LANDING_STYLES y
  con el prefijo .approved-landing-shell para ganarle a las capas anteriores,
  que ya usan !important. Revertir = quitar la hoja de la lista.
*/
@media (min-width: 641px) and (max-width: 1100px) {
  /* En tablets de 1024px (iPad) aplicaba el «snap» de escritorio con
     scroll-snap-stop:always: al deslizar, la página saltaba sola al inicio de la
     sección y la demo se perdía de vista. En táctil se desliza libre. */
  html.approved-landing-html { scroll-snap-type: none !important; }

  /* Ritmo vertical y encabezados */
  .approved-landing-shell .section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .approved-landing-shell .section-intro { margin-bottom: 28px !important; }
  .approved-landing-shell .section-intro.split {
    grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important;
  }
  .approved-landing-shell .section-intro.split > p { max-width: 60ch; margin: 0 !important; }
  .approved-landing-shell .section-intro.split > .industry-tabs { justify-content: flex-start !important; }
  .approved-landing-shell .section h2 {
    font-size: clamp(32px, 4.4vw, 42px) !important; line-height: 1.06 !important; max-width: 22ch;
  }
  .approved-landing-shell .section-intro.centered h2 { margin-inline: auto; }
  .approved-landing-shell .julieta-layout h2,
  .approved-landing-shell .offline-layout h2 { font-size: clamp(28px, 3.8vw, 36px) !important; }

  /* Hero: el titular no cabe en una columna de 308px a 50px */
  .approved-landing-shell .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important; gap: 28px !important; }
  .approved-landing-shell .hero h1 { font-size: clamp(38px, 5.4vw, 52px) !important; line-height: 1.02 !important; }
  .approved-landing-shell .hero-lead { font-size: 17px !important; }

  /* Del cuaderno al control: la foto no pasa de un tercio de pantalla */
  .approved-landing-shell .journey-visual { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; max-height: 72svh; }
  .approved-landing-shell .journey { gap: 0 !important; }

  /* Recorrido: capítulos a la izquierda, pantalla fija a la derecha */
  .approved-landing-shell .tour-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important; gap: 22px !important; align-items: start !important;
  }
  .approved-landing-shell .tour-sticky { position: sticky !important; top: 92px !important; }
  .approved-landing-shell .tour-stack { height: auto !important; aspect-ratio: 739 / 542; }
  .approved-landing-shell .tour-stack img { width: 100% !important; height: 100% !important; inset: 0 !important; object-fit: contain !important; }
  .approved-landing-shell .tour-list .chapter { padding-top: 14px !important; padding-bottom: 14px !important; }
  .approved-landing-shell .tour-list .chapter p { font-size: 14px !important; }
  .approved-landing-shell .tour-thumbs { flex-wrap: wrap !important; gap: 6px !important; }

  /* Demo de producto: los controles en una barra pegada a la pantalla */
  .approved-landing-shell .product-workbench { grid-template-columns: 1fr !important; gap: 12px !important; }
  .approved-landing-shell .product-controls-column {
    order: 1 !important; position: sticky !important; top: 84px !important; z-index: 6;
    max-width: none !important; display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 6px !important; border-radius: 16px !important;
  }
  .approved-landing-shell .product-screen-column { order: 2 !important; }
  .approved-landing-shell .product-controls-column .product-toolbar {
    display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 1 auto; min-width: 0; margin: 0 !important;
  }
  .approved-landing-shell .product-controls-column .product-tabs {
    display: flex !important; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
    padding: 4px !important; gap: 2px !important; border-radius: 12px !important;
  }
  .approved-landing-shell .product-controls-column .product-tabs::-webkit-scrollbar { display: none; }
  .approved-landing-shell .product-controls-column .product-tabs button {
    flex: 0 0 auto !important; min-height: 40px !important; padding: 0 14px !important; text-align: center !important; font-size: 13px !important;
  }
  .approved-landing-shell .product-controls-column .product-tabs button:last-child { grid-column: auto !important; }
  .approved-landing-shell .product-controls-column .view-controls { display: flex !important; flex: none; gap: 6px !important; }
  .approved-landing-shell .product-controls-column .device-tabs,
  .approved-landing-shell .product-controls-column .product-guide,
  .approved-landing-shell .product-controls-column .product-julieta-link,
  .approved-landing-shell .product-controls-column .product-caption p,
  .approved-landing-shell .product-controls-column .product-caption a + a { display: none !important; }
  .approved-landing-shell .product-controls-column .theme-toggle {
    width: auto !important; min-height: 40px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 12px !important; white-space: nowrap;
  }
  .approved-landing-shell .product-controls-column .product-caption { display: flex !important; flex: none; margin: 0 !important; padding: 0 !important; }
  .approved-landing-shell .product-controls-column .product-caption a {
    min-height: 40px !important; padding: 0 10px !important; font-size: 13px !important; white-space: nowrap;
  }
  .approved-landing-shell .product-viewport,
  .approved-landing-shell .product-viewport.hf-device-ready,
  .approved-landing-shell .product-viewport[data-device-stage] {
    height: min(690px, calc(100svh - 200px)) !important; min-height: 0 !important;
  }

  /* Tú haces la venta: tarjetas menos altas */
  .approved-landing-shell .operation-cards { gap: 12px !important; }
  .approved-landing-shell .operation-cards > article { padding: 22px !important; gap: 18px !important; min-height: 0 !important; }
  .approved-landing-shell .operation-cards > article h3 { font-size: 24px !important; }

  /* CRM: la historia tenía 500px fijos y quedaba media tarjeta vacía */
  .approved-landing-shell .crm-story { height: auto !important; min-height: 380px !important; }
  .approved-landing-shell .scenario-options button { min-height: 120px !important; }

  /* Para tu negocio: la foto deja de ser más alta que ancha */
  .approved-landing-shell .business-explorer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; }
  .approved-landing-shell .business-photo { min-height: 0 !important; height: auto !important; }
  .approved-landing-shell .business-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .approved-landing-shell .business-content { padding: 22px !important; gap: 14px !important; }

  /* Mercados: el mapa no necesita 430px de alto para 330px de dibujo */
  .approved-landing-shell .world-viewport { height: auto !important; aspect-ratio: 4 / 3; }

  /* Negocios reales */
  .approved-landing-shell .business-showcase-card img { height: 190px !important; object-fit: cover !important; }

  /* Banner de cookies en una franja */
  .privacy-banner {
    width: min(720px, calc(100% - 32px)) !important; left: 16px !important; right: auto !important; bottom: 16px !important;
    flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 12px 16px !important;
  }
  .privacy-banner p { font-size: 13px !important; line-height: 1.4 !important; margin: 2px 0 0 !important; }
  .privacy-banner strong { font-size: 14px !important; }
  .privacy-banner-actions { flex-direction: row !important; flex: none; gap: 6px !important; }
  .privacy-banner-actions button { min-height: 40px !important; padding: 0 12px !important; white-space: nowrap; }
}

/* Tablet en vertical: con dos columnas las fotos quedaban en cajas angostas y
   altas (la del inicio perdía 40% de la foto, la del restaurante era casi el
   doble de alta que ancha) y se veían «con zoom». En vertical cada foto va a lo
   ancho y con la proporción de la propia imagen (1536×1024 ≈ 3:2). */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .approved-landing-shell .hero-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .approved-landing-shell .hero-copy { max-width: 640px; }
  .approved-landing-shell .hero h1 { font-size: clamp(44px, 6.6vw, 60px) !important; }
  .approved-landing-shell .hero-media { width: 100% !important; max-width: 760px; margin: 0 auto !important; }
  .approved-landing-shell .hero-photo { height: auto !important; max-height: none !important; aspect-ratio: 3 / 2 !important; }
  .approved-landing-shell .hero-photo img { height: 100% !important; }
  .approved-landing-shell .hero-status.glass-card { width: min(330px, 46%) !important; padding: 20px !important; }
  .approved-landing-shell .hero-status > div:first-child span { font-size: 17px !important; }
  .approved-landing-shell .hero-status > div:first-child strong { font-size: 24px !important; }
  .approved-landing-shell .hero-status .status-chart { height: 54px !important; }
  .approved-landing-shell .hero-status small { font-size: 16px !important; }
  .approved-landing-shell .hero-ticket.glass-card { width: auto !important; min-width: 240px; padding: 16px !important; gap: 14px !important; }
  .approved-landing-shell .hero-ticket .ticket-icon { width: 38px !important; height: 38px !important; }
  .approved-landing-shell .hero-ticket strong { font-size: 15px !important; }
  .approved-landing-shell .hero-ticket small { font-size: 17px !important; }

  .approved-landing-shell .business-explorer { grid-template-columns: 1fr !important; }
  .approved-landing-shell .business-photo { height: auto !important; aspect-ratio: 16 / 10 !important; }
  .approved-landing-shell .business-content { padding-top: 28px !important; }

  /* Del cuaderno al control: a 1024px en vertical iba en dos columnas y la foto
     quedaba en una caja de 401×620 (se perdía más de la mitad). */
  .approved-landing-shell .journey { grid-template-columns: 1fr !important; }
  .approved-landing-shell .journey-visual { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; }
}