/* Celular (max-width 1023px) para web/v2. Todo aplica solo hasta 1023px; el escritorio queda como styles.css. */

/* el selector de lugar vive en el hero, solo en celular */
.m-lugar { display: none; }
.m-bar { display: none; }
/* etiqueta sobre la foto del hero, solo en celular */
.m-photo-tag { display: none; }

/* primera pantalla de celular: ritmo 14 / 24 / 10 / 20 px, foto simétrica con el radio de las tarjetas */
@media (max-width: 1023px) {
  /* el destino de un enlace no se desplaza durante la revelación: solo aparece con opacidad */
  .js [data-enter] { transform: none; }
  /* sin ancla de desplazamiento: al terminar el salto, el ajuste automático corría el destino 21px */
  html { overflow-anchor: none; }
  .hero { padding-top: 24px; padding-bottom: 0; gap: 20px; }
  .hero-copy { gap: 0; }
  .hero .lead { max-width: none; margin-top: 14px; }
  .hero .hero-actions { display: none; }
  .m-lugar { margin-top: 24px; gap: 10px; }
  .m-lugar h2 { font-size: 15px; line-height: 1.2; }
  .hero .m-chips { flex-wrap: nowrap; gap: 4px; }
  .hero .m-chips button { flex: 1 1 auto; min-width: 0; padding: 7px 8px; font-size: 14px; text-align: center; white-space: nowrap; }
  .stage-photo { position: relative; border-radius: 18px; }
  .m-photo-tag {
    display: inline-flex; align-items: center; position: absolute; left: 12px; top: 12px; z-index: 1;
    min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--luz); color: var(--noche);
    font-size: 14px; font-weight: 700; text-decoration: none;
  }
}

/* chips compactos: visual de 36px, zona de toque de 40px (::after), 8px entre chips */
@media (max-width: 1023px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* el selector nuevo reemplaza al selector del hero y la CTA del encabezado repite la barra */
  .hero .picker { display: none; }
  .top > .btn, .js .top-cta { display: none !important; }

  /* selector de lugar: primera pantalla, justo después de la línea del hero */
  .m-lugar { display: grid; gap: 12px; }
  .m-lugar h2 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
  .m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-chips button {
    position: relative; min-height: 36px; padding: 7px 14px; border: 0; border-radius: 999px;
    background: var(--blanco); color: var(--noche); font: inherit; font-weight: 700; font-size: 15px;
    line-height: 1.2; text-align: left; cursor: pointer;
    transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
  }
  .m-chips button[aria-pressed="true"] { background: var(--noche); color: var(--papel); }
  .m-chips button::after, .tablist button::after, .chips a::after, .chat-chip::after {
    content: ""; position: absolute; inset: -2px -4px;
  }

  /* la línea del hero tiene una variante por lugar apiladas en una celda: al elegir no cambia el alto */
  .lead { display: grid; }
  .lead > span { grid-area: 1 / 1; }

  /* lugares: pestañas y chips compactos */
  .lugares { gap: 20px; scroll-margin-top: 84px; }
  .tablist button { position: relative; min-height: 36px; padding: 7px 14px; font-size: 15px; }
  .chips { gap: 8px; }
  .chips a { position: relative; min-height: 36px; padding: 7px 12px; font-size: 14px; display: inline-flex; align-items: center; }

  /* logo, enlaces y encabezados de FAQ con 44px */
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .text-link, .foot-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary { min-height: 44px; display: flex; align-items: center; }
  .faq details { padding: 14px 18px; }
  /* el texto "¿Cómo empiezo?" del FAQ quedaba a 56px de la carta: se separa para que no parezca una etiqueta */
  .about { padding-top: 56px; }

  /* funciones y voces: lista de acordeón en lugar de chips (los chips de voz quedan ocultos en celular, como antes) */
  .js .chip-tabs { display: none !important; }
  .js .chip-pane:not(.is-on) { display: grid; }
  #pedidos { gap: 12px; }
  #pedidos .feature { grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: 88px; }
  #pedidos .feature.flip .f-text { order: 0; }
  #pedidos .feature.flip .f-ui { order: 1; }
  #pedidos .f-text { gap: 0; }
  #pedidos .f-ui[hidden], #pedidos .m-tag[hidden] { display: none !important; }
  .acc-btn {
    appearance: none; position: relative; box-sizing: border-box; display: grid; gap: 4px;
    width: 100%; min-height: 44px; margin: 0; padding: 12px 44px 12px 16px; border: 0; border-radius: 18px;
    background: var(--blanco); color: var(--noche); font: inherit; text-align: left; cursor: pointer;
    justify-items: start;
  }
  .acc-btn[aria-expanded="true"] { background: var(--noche); color: var(--papel); }
  .acc-btn:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
  .acc-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
  .acc-btn .benefit { display: block; max-width: none; font-size: 15px; line-height: 1.4; color: #3F4A57; text-wrap: pretty; }
  .acc-btn[aria-expanded="true"] .benefit { color: var(--papel); }
  .acc-btn::after {
    content: ""; position: absolute; right: 20px; top: 18px; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 240ms var(--ease-out);
  }
  .acc-btn[aria-expanded="true"]::after { transform: rotate(-135deg); top: 22px; }
  .m-tag {
    justify-self: start; display: inline-flex; align-items: center; min-height: 26px;
    padding: 3px 9px; border-radius: 999px; background: var(--luz); color: var(--noche);
    font-size: 12px; font-weight: 700;
  }
  .feature.is-open .f-ui { margin-top: 0; }

  /* chips de chat y de voz */
  .chat-chip { position: relative; min-height: 36px; padding: 7px 14px; font-size: 14px; line-height: 1.25; }

  /* barra inferior fija: solo el logo de WhatsApp, botones de 40px dentro de un margen */
  .m-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
    padding: 12px var(--margin) calc(12px + env(safe-area-inset-bottom));
    background: var(--noche); color: var(--papel);
    transition: transform 240ms var(--ease-out), visibility 240ms;
  }
  .m-bar.is-off { transform: translateY(100%); visibility: hidden; }
  .m-bar .btn { position: relative; min-height: 40px; padding: 0 16px; font-size: 15px; line-height: 1.2; text-align: center; justify-content: center; border-radius: 999px; }
  .m-bar .btn::after { content: ""; position: absolute; inset: -4px; }
  .m-bar .m-wa { width: 40px; min-height: 40px; padding: 0; background: var(--luz); color: var(--noche); }
  .m-bar .m-propuesta { background: var(--papel-2); color: var(--noche); }
  .m-bar .btn:hover, .m-bar .btn:active { transform: none; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .m-bar, .m-chips button, .acc-btn::after { transition: none; }
}

/* The bottom bar is the only proposal CTA on phones */
@media (max-width: 1023px) {
  .top > .btn[href="#propuesta"], .menu-cta, .hero .btn[href="#propuesta"], .precio .btn[href="#propuesta"] { display: none; }
}

/* Bars stay out of the way: hidden while a link jumps and while the page is at rest */
@media (max-width: 1023px) {
  .auto-scroll .top { transform: translateY(-100%); }
  .m-bar { transition: transform 260ms var(--ease-out), visibility 260ms; }
  .m-bar.is-rest, .auto-scroll .m-bar { transform: translateY(110%); }
  .lugares, #pedidos .feature, .js .chip-pane, .pide, section[id] { scroll-margin-top: 32px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .m-bar { transition: none; } }