/* Preguntas y contacto: el teléfono. Generado desde mockups/mesa por sitio/montaje-a-portada.mjs. */
/* ═══ EL TELÉFONO: preguntas y contacto ═══════════════════════
     Después de la mesa, un teléfono en vertical con dos apps.
     "Preguntas" abre un chat con las cuatro de siempre: tocas una
     y aparece la respuesta. La otra app es WhatsApp: un bot pide
     nombre, negocio, qué necesitas y cómo te ayudamos, de a uno,
     y al final el mensaje sale hacia Está Fino. Hoy abre WhatsApp
     con todo escrito; después irá al receptor de leads.

     Movimiento del manual: sólo transform y opacity, 280 ms con la
     curva de salida; ningún mensaje se hace esperar más de eso.
  ═══════════════════════════════════════════════════════════════ */
  .tlf-sec{position:relative;isolation:isolate}
  .tlf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(28px,5vw,80px);align-items:center}
  .tlf-aside h2{font-family:var(--say);font-variation-settings:'opsz' 144,'wght' 700,'SOFT' 80,'WONK' 1;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.96;letter-spacing:-.025em;margin:14px 0 0;font-weight:700;max-width:14ch}
  .tlf-aside h2 em{font-style:italic;color:var(--gold)}
  .tlf-aside > p{margin:16px 0 0;color:var(--cream-dim);max-width:40ch}
  .tlf-aside .direct{margin-top:26px}
  .tlf-aside .pista{margin-top:26px;font-family:var(--tech);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
  .tlf-aside .pista b{color:var(--cream);font-weight:500}

  /* ── El aparato ────────────────────────────────────────────── */
  .tlf{position:relative;width:min(100%, 380px);margin-inline:auto;aspect-ratio:9/19;border-radius:44px;padding:4px;box-sizing:border-box;
    background:linear-gradient(135deg,#7a756c 0%,#3a3732 22%,#2a2723 50%,#55514a 78%,#1a1815 100%);
    box-shadow:0 2px 2px rgba(0,0,0,.7), 26px 48px 70px rgba(0,0,0,.6)}
  .tlf .cristal{position:relative;height:100%;border-radius:40px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 2px #000}
  .tlf .isla{position:absolute;left:50%;top:14px;width:98px;height:28px;border-radius:16px;background:#000;transform:translateX(-50%);z-index:9;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
  .tlf .brillo{position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(118deg, rgba(255,245,215,.10) 0%, rgba(255,245,215,.03) 30%, transparent 44%)}
  .tlf b.bot{position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#6a655c,#2a2724)}
  .tlf .mute{left:-3px;top:110px;height:26px}.tlf .v1{left:-3px;top:160px;height:52px}.tlf .v2{left:-3px;top:226px;height:52px}.tlf .pow{right:-3px;top:180px;height:78px}

  /* Todas las pantallas viven apiladas; la activa se ve, las otras esperan a un lado */
  .pant{position:absolute;inset:0;display:flex;flex-direction:column;background:#0B0A08;color:var(--cream);
    opacity:0;visibility:hidden;transform:translateX(24px);pointer-events:none;
    transition:transform 280ms var(--ease-out), opacity 280ms var(--ease-out), visibility 0s 280ms}
  .pant.en{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .pant.inicio{transform:scale(1.04)}
  .pant.inicio.en{transform:none}

  /* ── Inicio: hora y dos apps ───────────────────────────────── */
  .inicio{background:
      radial-gradient(70% 50% at 50% 0%, rgba(240,180,41,.22), transparent 70%),
      radial-gradient(100% 80% at 50% 100%, #1A1712, #0B0A08 70%);
    align-items:center;padding:64px 28px 40px;box-sizing:border-box}
  .inicio .hora{font-family:var(--struct);font-variation-settings:'wdth' 100,'wght' 300;font-size:4.2rem;line-height:1;letter-spacing:-.03em;margin-top:26px}
  .inicio .fecha{font-family:var(--tech);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-top:8px}
  .inicio .apps{margin-top:auto;display:flex;gap:26px;justify-content:center;width:100%}
  .app{display:grid;justify-items:center;gap:9px;background:none;border:0;padding:0;color:var(--cream);cursor:pointer;font:500 .74rem var(--struct);
    transition:transform 160ms var(--ease-out)}
  .app:active{transform:scale(.95)}
  .app .icono{width:66px;height:66px;border-radius:17px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}
  .app .icono.preg{background:linear-gradient(160deg,#25211A,#12100C);font-family:var(--say);font-style:italic;font-size:2.2rem;color:var(--gold);line-height:1}
  .app .icono.wa{background:linear-gradient(160deg,#5BE07A,#25D366 55%,#1DB954)}
  .app .icono.wa svg{width:40px;height:40px;color:#fff}
  .app .globo{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:#14100A;font:600 .62rem var(--struct);display:grid;place-items:center;padding:0 5px}
  .app .icono{position:relative}
  .inicio .toque{margin-top:22px;font-family:var(--tech);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}

  /* ── Cabecera de app y chat ────────────────────────────────── */
  .app-cab{display:flex;align-items:center;gap:12px;padding:56px 14px 12px;border-bottom:1px solid var(--line);background:#12100C;flex:none}
  .app-cab .atras{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform 160ms var(--ease-out)}
  .app-cab .atras:active{transform:scale(.92)}
  .app-cab .avatar{width:36px;height:36px;border-radius:50%;background:#0A0907;display:grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--line-hard)}
  .app-cab .avatar img{width:22px;height:22px;display:block}
  .app-cab .quien{min-width:0}
  .app-cab .quien b{display:block;font-family:var(--struct);font-weight:600;font-size:.92rem;line-height:1.15}
  .app-cab .quien small{display:block;font-family:var(--tech);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);margin-top:3px}
  .app-cab .quien small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

  .chat{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;overscroll-behavior:contain}
  @media (prefers-reduced-motion:reduce){ .chat{scroll-behavior:auto} }
  .msg{max-width:84%;padding:10px 13px;border-radius:16px;font-family:var(--struct);font-size:.88rem;line-height:1.45;
    opacity:0;transform:translateY(8px) scale(.97);animation:msg 280ms var(--ease-out) forwards}
  @keyframes msg{to{opacity:1;transform:none}}
  .msg.el{align-self:flex-start;background:#1E1B16;border-bottom-left-radius:5px}
  .msg.tu{align-self:flex-end;background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.25);border-bottom-right-radius:5px}
  .msg small{display:block;font-family:var(--tech);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);margin-top:6px}
  .msg.preg{cursor:pointer;transition:transform 160ms var(--ease-out), background 160ms ease}
  .msg.preg:active{transform:scale(.97)}
  .msg.preg::after{content:"›";float:right;margin-left:10px;color:var(--gold);font-family:var(--say)}
  .msg.preg.abierta::after{content:"–"}
  .fecha-chat{align-self:center;font-family:var(--tech);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);margin:4px 0 6px}

  /* opciones para tocar */
  .fichas{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:92%;opacity:0;animation:msg 280ms var(--ease-out) 60ms forwards}
  .fichas button{border:1px solid var(--line-hard);background:transparent;color:var(--cream);border-radius:999px;padding:8px 13px;font:500 .8rem var(--struct);cursor:pointer;
    transition:transform 160ms var(--ease-out), border-color 160ms ease, background 160ms ease}
  .fichas button:hover{border-color:var(--gold)}
  .fichas button:active{transform:scale(.96)}

  /* el final: mandar */
  .mandar{align-self:flex-start;display:grid;gap:8px;margin-top:4px;opacity:0;animation:msg 280ms var(--ease-out) 60ms forwards}
  .mandar .btn{width:100%;justify-content:center}
  .mandar .otra{background:none;border:0;color:var(--cream-dim);font:500 .78rem var(--struct);cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:center}

  /* ── Escribir ──────────────────────────────────────────────── */
  .escribir{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 22px;border-top:1px solid var(--line);background:#12100C}
  .escribir textarea{flex:1;min-height:42px;max-height:110px;resize:none;border-radius:21px;border:1px solid var(--line-hard);background:#0B0A08;color:var(--cream);padding:11px 14px;font:400 .9rem/1.35 var(--struct);outline:none}
  .escribir textarea:focus{border-color:rgba(240,180,41,.6)}
  .escribir textarea::placeholder{color:#6B665C}
  .escribir textarea:disabled{opacity:.45}
  .escribir .enviar{width:42px;height:42px;border-radius:50%;border:0;background:var(--gold);color:#14100A;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform 160ms var(--ease-out), opacity 160ms ease}
  .escribir .enviar:active{transform:scale(.92)}
  .escribir .enviar:disabled{opacity:.35;cursor:default}

  @media (max-width:940px){
    .tlf-grid{grid-template-columns:1fr;gap:28px}
    .tlf-aside h2{max-width:none}
    .tlf{width:min(100%, 380px)}
  }
  @media (max-width:520px){
    .tlf{width:100%;aspect-ratio:auto;height:min(78vh, 720px);border-radius:32px}
    .tlf .cristal{border-radius:28px}
  }