/* ==========================================================
 * MOBILE APP v2 — Villa & Asociados (basado en HTML cliente)
 * En ≤860px reemplazamos toda la experiencia desktop por una
 * mini-app (.va-mapp): nav, hero, trust, calculadoras,
 * audience, contacto, footer y WhatsApp FAB flotante.
 * ========================================================== */

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(139, 111, 62, 0.15);
}

/* ==========================================================
 * DESKTOP / TABLET (≥861px) — oculto la MobileApp
 * ========================================================== */
@media (min-width: 861px) {
  .va-mapp { display: none !important; }
}

/* ==========================================================
 * MOBILE (≤860px) — TODO el layout desktop se oculta
 * ========================================================== */
@media (max-width: 860px) {

  /* Mostrar MobileApp */
  .va-mapp { display: block !important; }

  /* Ocultar secciones desktop por ID/clase específicos */
  nav.va-nav,
  #top,
  #audience,
  #servicios,
  #equipo,
  #recursos,
  #casos,
  #principios,
  #clientes,
  #contacto,
  footer[data-site-footer],
  section[data-mobile-hide="true"] {
    display: none !important;
  }

  /* Fallback: ocultar TODAS las section/footer que NO estén dentro de .va-mapp */
  section:not(.va-mapp *):not(.va-mapp),
  footer:not(.va-mapp *):not(.va-mapp) {
    display: none !important;
  }

  /* Desactivar bot-asistente y barra legacy mobile-cta */
  #villa-bot-launcher,
  #villa-bot-panel,
  #villa-mcta,
  #villa-wa-fab {
    display: none !important;
  }

  /* Body reset (sin padding inferior porque ya no hay tab bar) */
  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow-x: hidden;
  }

  /* ===========================================================
   * TODOS los estilos de .va-mapp (versión cliente HTML)
   * =========================================================== */

  .va-mapp {
    --mapp-bg: #F5F1EA;
    --mapp-surface: #FFF;
    --mapp-ink: #141414;
    --mapp-ink-soft: #44403C;
    --mapp-muted: #78716C;
    --mapp-line: #E7DFD3;
    --mapp-accent: #8B6F3E;
    --mapp-accent-bright: #A98547;
    --mapp-hero: #141414;
    --mapp-hero-ink: #F5F1EA;
    --mapp-hero-muted: #8B8578;
    --mapp-display: "Cormorant Garamond", Georgia, serif;
    --mapp-sans: "Inter", system-ui, -apple-system, sans-serif;
    --mapp-mono: "JetBrains Mono", ui-monospace, monospace;
    --mapp-wa: #25D366;

    background: var(--mapp-bg);
    color: var(--mapp-ink);
    font-family: var(--mapp-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .va-mapp *,
  .va-mapp *::before,
  .va-mapp *::after {
    box-sizing: border-box;
  }

  .va-mapp a { color: inherit; text-decoration: none; }
  .va-mapp img { max-width: 100%; height: auto; display: block; }
  .va-mapp button {
    font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit;
  }
  .va-mapp ::selection { background: var(--mapp-accent); color: #fff; }

  .va-mapp .page {
    max-width: 480px;
    margin: 0 auto;
    background: var(--mapp-bg);
    position: relative;
  }

  /* ==== Nav ==== */
  .va-mapp .nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--mapp-bg);
    padding: 18px 24px;
    border-bottom: 1px solid var(--mapp-line);
    text-align: center;
  }
  .va-mapp .nav-brand {
    font-family: var(--mapp-display);
    font-size: 22px; font-weight: 500; letter-spacing: .01em;
    color: var(--mapp-ink);
  }
  .va-mapp .nav-brand em {
    font-style: italic; color: var(--mapp-accent); font-weight: 400;
  }

  /* ==== Eyebrow pill ==== */
  .va-mapp .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px;
    border: 1px solid rgba(139, 111, 62, .45);
    border-radius: 999px;
    font-family: var(--mapp-mono);
    font-size: 10px; letter-spacing: .25em;
    color: var(--mapp-accent); text-transform: uppercase;
  }
  .va-mapp .pill .dot {
    width: 5px; height: 5px; background: var(--mapp-accent); border-radius: 50%;
  }
  .va-mapp .pill-light {
    border-color: rgba(139, 111, 62, .55);
    color: var(--mapp-accent-bright);
  }
  .va-mapp .pill-light .dot { background: var(--mapp-accent-bright); }

  /* ==== Hero ==== */
  .va-mapp .hero {
    background: var(--mapp-hero);
    color: var(--mapp-hero-ink);
    padding: 48px 24px 40px;
    position: relative;
    overflow: hidden;
  }
  .va-mapp .hero::before {
    content: "";
    position: absolute;
    top: -20%; right: -40%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(139, 111, 62, .15), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
  }
  .va-mapp .hero-inner { position: relative; z-index: 1; }
  .va-mapp .hero h1 {
    font-family: var(--mapp-display);
    font-size: 44px; line-height: 1.02; font-weight: 400;
    letter-spacing: -.02em;
    margin: 18px 0 16px;
    color: var(--mapp-hero-ink);
  }
  .va-mapp .hero h1 em {
    font-style: italic;
    color: var(--mapp-accent-bright);
    font-weight: 400;
  }
  .va-mapp .hero-sub {
    font-size: 15px; line-height: 1.6;
    color: var(--mapp-hero-muted);
    margin-bottom: 26px;
    max-width: 420px;
  }
  .va-mapp .hero-ctas { display: flex; flex-direction: column; gap: 10px; }

  .va-mapp .btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    font-family: var(--mapp-sans);
    font-size: 14px; font-weight: 500;
    letter-spacing: .02em;
    min-height: 54px;
    border: 1px solid transparent;
    transition: opacity .2s, transform .1s;
    text-decoration: none;
  }
  .va-mapp .btn:active { transform: scale(.985); }
  .va-mapp .btn-primary { background: var(--mapp-wa); color: #fff; }
  .va-mapp .btn-primary:hover { opacity: .92; }
  .va-mapp .btn-outline {
    background: transparent;
    color: var(--mapp-hero-ink);
    border-color: rgba(139, 111, 62, .55);
  }
  .va-mapp .btn-outline:hover {
    border-color: var(--mapp-accent-bright);
    background: rgba(139, 111, 62, .08);
  }
  .va-mapp .btn svg { flex-shrink: 0; }

  /* ==== Trust bar ==== */
  .va-mapp .trust {
    background: var(--mapp-hero);
    color: var(--mapp-hero-ink);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: center;
    border-top: 1px solid rgba(139, 111, 62, .18);
    border-bottom: 1px solid rgba(139, 111, 62, .18);
  }
  .va-mapp .trust-item .n {
    font-family: var(--mapp-display);
    font-size: 30px; font-weight: 500;
    color: var(--mapp-accent-bright);
    line-height: 1;
  }
  .va-mapp .trust-item .l {
    font-family: var(--mapp-mono);
    font-size: 10px;
    color: var(--mapp-hero-muted);
    margin-top: 7px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .va-mapp .trust-item + .trust-item {
    border-left: 1px solid rgba(139, 111, 62, .18);
  }

  /* ==== Sections base ==== */
  .va-mapp .section { padding: 56px 24px; }
  .va-mapp .section-dark {
    background: var(--mapp-hero);
    color: var(--mapp-hero-ink);
  }
  .va-mapp .section-light {
    background: var(--mapp-bg);
    color: var(--mapp-ink);
  }
  .va-mapp .section-alt {
    background: var(--mapp-surface);
    color: var(--mapp-ink);
  }
  .va-mapp .section-title {
    font-family: var(--mapp-display);
    font-size: 34px; line-height: 1.08;
    font-weight: 400; letter-spacing: -.02em;
    margin: 14px 0 6px;
  }
  .va-mapp .section-title em {
    font-style: italic;
    color: var(--mapp-accent);
    font-weight: 400;
  }
  .va-mapp .section-dark .section-title em {
    color: var(--mapp-accent-bright);
  }
  .va-mapp .section-sub {
    font-size: 13px;
    color: var(--mapp-muted);
    margin-bottom: 22px;
    max-width: 360px;
  }
  .va-mapp .section-dark .section-sub {
    color: var(--mapp-hero-muted);
  }

  /* ==== Calculadoras ==== */
  .va-mapp .calcs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .va-mapp .calc {
    position: relative;
    background: var(--mapp-surface);
    border: 1px solid var(--mapp-line);
    padding: 16px 14px 14px;
    min-height: 138px;
    display: flex; flex-direction: column;
    gap: 10px;
    color: var(--mapp-ink);
    transition: border-color .2s, transform .1s;
  }
  .va-mapp .calc:active { transform: scale(.98); }
  .va-mapp .calc:hover { border-color: var(--mapp-accent); }
  .va-mapp .calc .num {
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--mapp-mono);
    font-size: 10px;
    color: var(--mapp-accent);
    letter-spacing: .1em;
  }
  .va-mapp .calc-ico {
    width: 28px; height: 28px;
    color: var(--mapp-accent);
  }
  .va-mapp .calc .t {
    font-family: var(--mapp-display);
    font-size: 15px; font-weight: 500;
    line-height: 1.15;
    color: var(--mapp-ink);
    margin-top: 4px;
  }
  .va-mapp .calc .s {
    font-size: 11px;
    color: var(--mapp-muted);
    line-height: 1.4;
  }

  /* ==== Audience ==== */
  .va-mapp .audience { display: flex; flex-direction: column; gap: 10px; }
  .va-mapp .aud-card {
    background: rgba(245, 241, 234, .04);
    border: 1px solid rgba(139, 111, 62, .25);
    padding: 20px 16px;
    display: flex; align-items: center; gap: 14px;
    color: var(--mapp-hero-ink);
    transition: border-color .2s, background .2s;
  }
  .va-mapp .aud-card:hover {
    border-color: var(--mapp-accent-bright);
    background: rgba(139, 111, 62, .1);
  }
  .va-mapp .aud-card:active { transform: scale(.99); }
  .va-mapp .aud-ico {
    width: 48px; height: 48px;
    border: 1px solid rgba(139, 111, 62, .55);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--mapp-accent-bright);
  }
  .va-mapp .aud-body { flex: 1; min-width: 0; }
  .va-mapp .aud-body .t {
    font-family: var(--mapp-display);
    font-size: 19px; font-weight: 500;
    color: var(--mapp-hero-ink);
    line-height: 1.15;
  }
  .va-mapp .aud-body .s {
    font-size: 12px;
    color: var(--mapp-hero-muted);
    margin-top: 4px;
    line-height: 1.45;
  }
  .va-mapp .aud-card .chev {
    color: var(--mapp-accent-bright);
    flex-shrink: 0;
  }

  /* ==== Contacto ==== */
  .va-mapp .contact-list { display: flex; flex-direction: column; gap: 8px; }
  .va-mapp .contact-item {
    background: var(--mapp-surface);
    border: 1px solid var(--mapp-line);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    color: var(--mapp-ink);
    transition: border-color .2s;
  }
  .va-mapp .contact-item:hover { border-color: var(--mapp-accent); }
  .va-mapp .contact-item:active { transform: scale(.99); }
  .va-mapp .contact-ico {
    width: 40px; height: 40px;
    border: 1px solid rgba(139, 111, 62, .4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--mapp-accent);
  }
  .va-mapp .contact-body { flex: 1; min-width: 0; }
  .va-mapp .contact-body .l {
    font-family: var(--mapp-mono);
    font-size: 10px;
    color: var(--mapp-accent);
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .va-mapp .contact-body .v {
    font-family: var(--mapp-display);
    font-size: 15px; font-weight: 500;
    color: var(--mapp-ink);
    margin-top: 2px;
    line-height: 1.3;
    word-break: break-word;
  }
  .va-mapp .contact-item .chev {
    color: var(--mapp-accent);
    flex-shrink: 0;
  }
  .va-mapp .hours {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(20, 20, 20, .05);
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mapp-mono);
    font-size: 11px;
    color: var(--mapp-muted);
    letter-spacing: .05em;
  }

  /* ==== Footer ==== */
  .va-mapp .footer {
    background: var(--mapp-hero);
    color: var(--mapp-hero-ink);
    padding: 40px 24px 32px;
    text-align: center;
    border-top: 1px solid rgba(139, 111, 62, .2);
  }
  .va-mapp .footer-brand {
    font-family: var(--mapp-display);
    font-size: 22px; font-weight: 500;
    letter-spacing: .01em;
    color: var(--mapp-hero-ink);
  }
  .va-mapp .footer-brand em {
    font-style: italic;
    color: var(--mapp-accent-bright);
    font-weight: 400;
  }
  .va-mapp .footer-links {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 22px;
  }
  .va-mapp .footer-link {
    width: 38px; height: 38px;
    border: 1px solid rgba(139, 111, 62, .35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--mapp-accent-bright);
    transition: border-color .2s, background .2s;
  }
  .va-mapp .footer-link:hover {
    border-color: var(--mapp-accent-bright);
    background: rgba(139, 111, 62, .1);
  }
  .va-mapp .footer-copy {
    font-family: var(--mapp-mono);
    font-size: 10px;
    color: var(--mapp-hero-muted);
    margin-top: 20px;
    letter-spacing: .1em;
  }

  /* ==== WhatsApp FAB ==== */
  .va-mapp .wa-fab {
    position: fixed;
    bottom: 24px; right: 20px;
    z-index: 90;
    width: 58px; height: 58px;
    background: var(--mapp-wa);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow:
      0 8px 24px -6px rgba(37, 211, 102, .45),
      0 4px 12px rgba(0, 0, 0, .18);
    transition: transform .2s;
  }
  .va-mapp .wa-fab:hover { transform: scale(1.06); }
  .va-mapp .wa-fab:active { transform: scale(.95); }
}

/* ==========================================================
 * Páginas internas (calc/encuesta/form) — siguen pulido
 * genérico mobile (no tienen .va-mapp)
 * ========================================================== */
@media (max-width: 640px) {
  /* Anti zoom iOS */
  body:not(:has(.va-mapp)) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body:not(:has(.va-mapp)) select,
  body:not(:has(.va-mapp)) textarea,
  body:not(:has(.va-mapp)) button {
    font-size: 16px !important;
  }
  body:not(:has(.va-mapp)) button,
  body:not(:has(.va-mapp)) .btn,
  body:not(:has(.va-mapp)) a.btn,
  body:not(:has(.va-mapp)) [role="button"] {
    min-height: 44px;
  }
  body:not(:has(.va-mapp)) img { max-width: 100%; height: auto; }
  body:not(:has(.va-mapp)) table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body:not(:has(.va-mapp)) input,
  body:not(:has(.va-mapp)) select,
  body:not(:has(.va-mapp)) textarea {
    max-width: 100%; box-sizing: border-box;
  }

  /* Back link mobile */
  .back { display: none !important; }

  /* Grids pesados → 1 columna */
  body:not(:has(.va-mapp)) [style*="grid-template-columns: 1fr 1fr"],
  body:not(:has(.va-mapp)) [style*="grid-template-columns: repeat(2"],
  body:not(:has(.va-mapp)) [style*="grid-template-columns: repeat(3"],
  body:not(:has(.va-mapp)) [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Textos muy anchos */
  body:not(:has(.va-mapp)) [style*="max-width: 1320px"],
  body:not(:has(.va-mapp)) [style*="max-width: 1200px"] {
    max-width: 100% !important;
  }

  /* Calendario con scroll horizontal */
  .calendar-wrap, [class*="calendar"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .cal-cell, [class*="cal-cell"], .cal-day {
    min-width: 38px; min-height: 38px; font-size: 11px !important;
  }
}

/* ==========================================================
 * Encuesta acoso — paginado mobile
 * ========================================================== */
@media (max-width: 640px) {
  body.encuesta-mobile-paginated .encuesta-question:not(.is-active),
  body.encuesta-mobile-paginated .q:not(.is-active) {
    display: none !important;
  }
  body.encuesta-mobile-paginated .encuesta-question,
  body.encuesta-mobile-paginated .q {
    animation: qfadein .25s ease-out;
  }
  @keyframes qfadein {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  body.encuesta-mobile-paginated .encuesta-progress-mobile {
    position: sticky; top: 0; z-index: 30;
    background: #F5F1EA; padding: 12px 16px;
    border-bottom: 1px solid #E7DFD3;
    display: flex; align-items: center; gap: 10px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #78716C;
  }
  body.encuesta-mobile-paginated .encuesta-progress-mobile .bar {
    flex: 1; height: 3px; background: #E7DFD3; border-radius: 999px; overflow: hidden;
  }
  body.encuesta-mobile-paginated .encuesta-progress-mobile .bar-fill {
    height: 100%; background: #8B6F3E; transition: width .3s ease;
  }
  body.encuesta-mobile-paginated .encuesta-nav-mobile {
    position: sticky; bottom: 0; z-index: 30;
    display: flex; gap: 10px; padding: 14px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: #F5F1EA; border-top: 1px solid #E7DFD3;
  }
  body.encuesta-mobile-paginated .encuesta-nav-mobile button {
    flex: 1; padding: 14px 16px; min-height: 48px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
    border: 1.5px solid #E7DFD3; background: #fff; color: #44403C; cursor: pointer;
  }
  body.encuesta-mobile-paginated .encuesta-nav-mobile button.primary {
    background: #141414; color: #F5F1EA; border-color: #141414;
  }
  body.encuesta-mobile-paginated .encuesta-nav-mobile button:disabled {
    opacity: .4; cursor: not-allowed;
  }
}