/* Vargas Studio · modo app en celular (≤760px)
   Mismo encabezado, barra de pestañas y menú "Más" que javivargas.cr/home2 en todas las páginas del sitio.
   Lo activa app.js agregando la clase .vs-app al <html>. En computadora no hace nada. */

.vsa-head, .vsa-tab, .vsa-mas { display: none; }

@media (max-width: 760px) {
  html.vs-app .vsh, html.vs-app .vsp, html.vs-app .vsf { display: none !important; }
  html.vs-app body { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

  /* Encabezado */
  html.vs-app .vsa-head { display: flex; position: sticky; top: 0; z-index: 99990; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 12px) 20px 12px; background: rgba(245,245,248,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-family: Montserrat, sans-serif; }
  .vsa-head img { height: 28px; width: auto; display: block; }
  .vsa-head-r { display: flex; align-items: center; gap: 8px; }
  .vsa-lang { display: flex; height: 36px; padding: 3px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E3E4EA; }
  .vsa-lang a { min-width: 34px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #131C46 !important; text-decoration: none !important; }
  .vsa-lang a.on { background: #131C46; color: #FFFFFF !important; }
  .vsa-cta { height: 36px; padding: 0 14px; border-radius: 18px; background: #131C46; color: #FFFFFF !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; display: flex; align-items: center; text-decoration: none !important; }

  /* Barra de pestañas */
  html.vs-app .vsa-tab { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 99991; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid #E3E4EA; font-family: Montserrat, sans-serif; }
  .vsa-tab a, .vsa-tab button { border: 0; background: transparent; padding: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #6B6F86 !important; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .vsa-tab svg { stroke: currentColor; }
  .vsa-tab .on { color: #FC4B08 !important; font-weight: 700; }

  /* Menú "Más" */
  html.vs-app .vsa-mas.open { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 99989; font-family: Montserrat, sans-serif; }
  .vsa-veil { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(19,28,70,.5); animation: vsaVeil .3s ease both; }
  .vsa-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; border-radius: 28px 28px 0 0; background: #FFFFFF; padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 18px; animation: vsaUp .42s cubic-bezier(.32,.72,0,1) both; color: #131C46; }
  @keyframes vsaVeil { from { opacity: 0; } to { opacity: 1; } }
  @keyframes vsaUp { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .vsa-veil, .vsa-sheet { animation: none; } }
  .vsa-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #E3E4EA; }
  .vsa-talk { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #131C46; text-decoration: none !important; }
  .vsa-talk img { width: 48px; height: 48px; border-radius: 24px; object-fit: cover; object-position: 50% 18%; }
  .vsa-talk b { display: block; color: #FFFFFF; font-size: 15px; font-weight: 800; }
  .vsa-talk small { display: block; color: #C5CAE0; font-size: 12px; }
  .vsa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vsa-grid a { min-height: 96px; padding: 14px; border-radius: 18px; border: 1px solid #E3E4EA; background: #F5F5F8; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; color: #131C46 !important; font-size: 13px; font-weight: 700; line-height: 1.25; text-decoration: none !important; }
  .vsa-grid a.on { border-color: #FC4B08; background: #FFF1EA; }
  .vsa-grid i { width: 36px; height: 36px; border-radius: 11px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
  .vsa-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
  .vsa-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #F5F5F8; width: 190px; }
  .vsa-seg a { height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #131C46 !important; text-decoration: none !important; }
  .vsa-seg a.on { background: #131C46; color: #FFFFFF !important; }
  .vsa-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #4A5072; }
  .vsa-soc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .vsa-soc::-webkit-scrollbar { display: none; }
  .vsa-soc a { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #E3E4EA; font-size: 12px; font-weight: 600; color: #131C46 !important; text-decoration: none !important; display: flex; align-items: center; }
  .vsa-legal { margin: 0; font-size: 11px; line-height: 1.7; color: #4A5072; text-align: center !important; }
  .vsa-legal a { color: #4A5072 !important; }

  /* Contenido: títulos con el mismo estilo que la app (sin mayúsculas forzadas, mismo tamaño) */
  html.vs-app body h1:not(.vsa-x), html.vs-app body h2:not(.vsa-x) { text-transform: none !important; letter-spacing: -.01em !important; line-height: 1.15 !important; }
  html.vs-app body h1:not(.vsa-x) { font-size: 30px !important; }
  html.vs-app body h2:not(.vsa-x) { font-size: 24px !important; }
  html.vs-app body h3:not(.vsa-x) { text-transform: none !important; letter-spacing: -.005em !important; }

  /* Portadas: quitar el espacio que se reservaba para el encabezado de escritorio */
  html.vs-p-vargas-experience .hero .in { padding: 48px 20px 48px !important; }
  html.vs-p-calculadora .cc-hero { padding: 40px 20px 48px !important; }
  html.vs-p-urbanity .hero { min-height: 0 !important; }
  html.vs-p-urbanity .hero-main { padding: 72px 20px 56px !important; }
  html.vs-p-urbanity .hero-h { font-size: 34px !important; }
  html.vs-app .lg-hero { margin: 12px 16px 0 !important; padding: 28px 22px 30px !important; border-radius: 22px !important; }
  html.vs-app .lg-hero h1 { font-size: 28px !important; }
  html.vs-p-privacidad body, html.vs-p-terminos body, html.vs-p-mapa-del-sitio body { background: #F5F5F8 !important; }
  html.vs-app .lg-body { margin: 14px 16px 24px !important; padding: 24px 20px !important; background: #FFFFFF; border: 1px solid #E3E4EA; border-radius: 22px; box-sizing: border-box !important; }
  html.vs-app .lg-body p, html.vs-app .lg-body li { font-size: 15px !important; line-height: 1.65 !important; }
  html.vs-app .lg-body h2 { margin-top: 28px !important; }
  html.vs-app .lg-body h2:first-child { margin-top: 0 !important; }
}

/* ========== Construir (Urbanity) en modo app ========== */
@media (max-width: 760px) {
  html.vs-p-urbanity body { background: #F5F5F8 !important; }
  html.vs-p-urbanity .sec-h, html.vs-p-urbanity .cta-h, html.vs-p-urbanity .testi-title { font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -.01em !important; text-transform: none !important; text-align: left !important; }
  html.vs-p-urbanity .sec-label { font-size: 11px !important; letter-spacing: .12em !important; color: #D93F06 !important; margin-bottom: 8px !important; }
  html.vs-p-urbanity .sec-p, html.vs-p-urbanity .testi-sub, html.vs-p-urbanity .cta-sub { font-size: 15px !important; line-height: 1.55 !important; text-align: left !important; }
  html.vs-p-urbanity .sec-top { margin-bottom: 18px !important; }
  html.vs-p-urbanity .section, html.vs-p-urbanity .porque, html.vs-p-urbanity .testi { padding: 36px 0 8px !important; background: transparent !important; }
  html.vs-p-urbanity .btn, html.vs-p-urbanity .btn-fill { min-height: 52px; border-radius: 16px !important; font-size: 14px !important; font-weight: 800 !important; background-color: #FC4B08; }
  html.vs-p-urbanity footer, html.vs-p-urbanity .nav, html.vs-p-urbanity .nav-menu-m { display: none !important; }

  /* Portada: tarjeta con el video */
  html.vs-p-urbanity .hero { margin: 4px 20px 0; min-height: 0 !important; border-radius: 26px; }
  html.vs-p-urbanity .hero-overlay { background: linear-gradient(180deg, rgba(19,28,70,.25) 0%, rgba(19,28,70,.92) 100%) !important; }
  html.vs-p-urbanity .hero-main { align-items: flex-start !important; text-align: left !important; padding: 150px 22px 22px !important; }
  html.vs-p-urbanity .hero-eyebrow { margin-bottom: 10px !important; font-size: 11px !important; letter-spacing: .12em !important; }
  html.vs-p-urbanity .hero-eyebrow::before { display: none; }
  html.vs-p-urbanity .hero-h { font-size: 30px !important; line-height: 1.1 !important; text-align: left !important; }
  html.vs-p-urbanity .hero-p { margin-top: 10px !important; font-size: 14px !important; line-height: 1.55 !important; text-align: left !important; }
  html.vs-p-urbanity .hero-btns { width: 100%; margin-top: 18px !important; }
  html.vs-p-urbanity .hero-btns .btn { width: 100%; }

  html.vs-p-urbanity .hero-video-bg iframe { width: auto !important; height: 100% !important; aspect-ratio: 16 / 9; min-width: 100%; }
  html.vs-p-urbanity .btn-ghost-o { background: transparent !important; color: #D93F06 !important; border: 1.5px solid #FC4B08 !important; width: 100%; justify-content: center; }
  /* Modelos: tarjetas redondeadas */
  html.vs-p-urbanity .proj-grid { padding: 0 20px 8px !important; gap: 14px !important; }
  html.vs-p-urbanity .pj { border-radius: 22px !important; overflow: hidden; }

  /* Cómo lo hacemos: pasos como tarjetas con número en círculo */
  html.vs-p-urbanity .proceso { margin: 28px 20px 0; padding: 24px 18px !important; border-radius: 26px; background: #131C46 !important; }
  html.vs-p-urbanity .proceso .wrap { padding: 0 !important; }
  html.vs-p-urbanity .proceso .sec-label { color: #FC4B08 !important; }
  html.vs-p-urbanity .proceso .sec-p { color: #C5CAE0 !important; }
  html.vs-p-urbanity .steps { display: flex !important; flex-direction: column; gap: 10px; margin-top: 4px !important; border: 0 !important; }
  html.vs-p-urbanity .step { display: grid !important; grid-template-columns: 40px minmax(0,1fr); column-gap: 14px; row-gap: 4px; padding: 16px !important; border: 0 !important; border-radius: 18px; background: rgba(255,255,255,.06); }
  html.vs-p-urbanity .step-n { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0 !important; border-radius: 20px; background: #FC4B08; color: #FFFFFF !important; font-size: 15px !important; letter-spacing: 0 !important; display: flex; align-items: center; justify-content: center; }
  html.vs-p-urbanity .step-h { margin: 0 !important; font-size: 16px !important; }
  html.vs-p-urbanity .step-p { font-size: 14px !important; line-height: 1.5 !important; color: #C5CAE0 !important; }

  /* Por qué: tarjetas blancas */
  html.vs-p-urbanity .pq-header { gap: 12px !important; margin-bottom: 16px !important; }
  html.vs-p-urbanity .pq-grid { display: flex !important; flex-direction: column; gap: 10px; border: 0 !important; }
  html.vs-p-urbanity .pq { padding: 18px !important; border: 1px solid #E3E4EA !important; border-radius: 20px; background: #FFFFFF; }
  html.vs-p-urbanity .pq-icon { border: 0 !important; border-radius: 12px !important; background: #FFF1EA; margin-bottom: 10px !important; }

  /* Llamado: tarjeta azul */
  html.vs-p-urbanity .cta-sec { margin: 28px 20px 0; padding: 24px 20px !important; border-radius: 26px; }
  html.vs-p-urbanity .cta-sec::before, html.vs-p-urbanity .cta-sec::after { display: none; }
  html.vs-p-urbanity .cta-sec .wrap { padding: 0 !important; }
  html.vs-p-urbanity .cta-inner { gap: 16px !important; }
  html.vs-p-urbanity .cta-right { width: 100%; }

  /* Reseñas: carrusel como en Inicio */
  html.vs-p-urbanity .testi .wrap { padding: 0 !important; }
  html.vs-p-urbanity .testi-title, html.vs-p-urbanity .testi-sub { padding: 0 20px; }
  html.vs-p-urbanity .testi-row { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 4px; scroll-padding: 0 20px; scrollbar-width: none; }
  html.vs-p-urbanity .testi-row::-webkit-scrollbar { display: none; }
  html.vs-p-urbanity .testi-score, html.vs-p-urbanity .tq-card { flex: 0 0 80%; scroll-snap-align: start; border-radius: 22px !important; padding: 20px !important; }
  html.vs-p-urbanity .testi-score-stars, html.vs-p-urbanity .tq-card-stars span { color: #FC4B08 !important; }
  html.vs-p-urbanity .testi { padding-bottom: 36px !important; }
}

/* ========== Propiedades (lista y ficha) en modo app ========== */
@media (max-width: 760px) {
  html.vs-p-propiedades body { background: #F5F5F8 !important; }
  html.vs-p-propiedades #top-bar, html.vs-p-propiedades #jv-header, html.vs-p-propiedades #jv-mobile-nav { display: none !important; }
  /* Tarjetas: foto arriba y datos abajo, como en la pestaña Buscar */
  html.vs-p-propiedades .jv-card { aspect-ratio: auto !important; border-radius: 22px !important; background: #FFFFFF !important; border: 1px solid #E3E4EA; box-shadow: none !important; }
  html.vs-p-propiedades .jv-card-img-wrap { position: relative !important; height: 210px; }
  html.vs-p-propiedades .jv-card-img-wrap::after { display: none !important; }
  html.vs-p-propiedades .jv-card-body { position: static !important; padding: 14px 16px 16px !important; background: #FFFFFF !important; color: #131C46 !important; }
  html.vs-p-propiedades .jv-card-body * { color: #131C46; text-shadow: none !important; }
  html.vs-p-propiedades .jv-card-precio { font-size: 20px !important; font-weight: 900 !important; }
  html.vs-p-propiedades .jv-card-precio small, html.vs-p-propiedades .jv-card-precio-rent { color: #4A5072 !important; }
  html.vs-p-propiedades .jv-card-titulo, html.vs-p-propiedades .jv-card-title { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
  html.vs-p-propiedades .jv-card-specs { background: transparent !important; border: 0 !important; padding: 0 !important; color: #4A5072 !important; }
  html.vs-p-propiedades .jv-card-spec, html.vs-p-propiedades .jv-card-spec span { color: #4A5072 !important; }
  html.vs-p-propiedades .jv-tag { border-radius: 8px !important; text-transform: none !important; letter-spacing: .02em !important; font-size: 11px !important; }
  html.vs-p-propiedades .jv-tag.venta { background: #D93F06 !important; }
  html.vs-p-propiedades .jv-card::after { display: none !important; }
  html.vs-p-propiedades .jv-card-tags { z-index: 3; }
  html.vs-p-propiedades .jv-search-bar { border-radius: 16px !important; height: 50px !important; background: #FFFFFF !important; padding: 0 6px 0 14px !important; }
  html.vs-p-propiedades .jv-search-bar input { min-width: 0; font-size: 16px !important; }
  html.vs-p-propiedades .jv-btn-limpiar { display: none !important; }
  html.vs-p-propiedades .jv-btn-filtros-mobile { flex-shrink: 0; height: 38px; border-radius: 12px !important; background: #131C46 !important; color: #FFFFFF !important; border: 0 !important; }
  html.vs-p-propiedades #jv-filtros-wrap { top: 64px !important; background: rgba(245,245,248,.95) !important; border-bottom: 0 !important; }
  /* Portada de la lista: tarjeta como en la app */
  html.vs-p-propiedades #jv-hero { margin: 4px 20px 0; height: 180px !important; min-height: 0 !important; padding-top: 0 !important; border-radius: 26px; overflow: hidden; }
  html.vs-p-propiedades #jv-hero h1 { font-size: 26px !important; text-transform: none !important; }
  html.vs-p-propiedades #jv-hero.oculto { display: none !important; }
  /* Ficha: menos espacio arriba y título a la escala de la app */
  html.vs-p-propiedades #jv-detalle.visible { padding-top: 0 !important; }
  html.vs-p-propiedades .det-inner { padding: 8px 20px 0 !important; }
  html.vs-p-propiedades .det-mosaic { margin: 0 20px !important; }
  html.vs-p-propiedades .det-layout { padding: 16px 20px 0 !important; }
  html.vs-app.vs-p-propiedades .det-wrap { padding-top: 4px !important; }
  html.vs-app.vs-p-propiedades .det-titulo { font-size: 22px !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: -.01em !important; }
  html.vs-p-propiedades .det-precio { font-size: 28px !important; }
  html.vs-p-propiedades .det-sec-head h3 { text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; }
  html.vs-p-propiedades .det-desc { font-size: 14px !important; line-height: 1.65 !important; }
  html.vs-p-propiedades .jv-pag { border-radius: 12px !important; }
  html.vs-p-propiedades .jv-pag.activo { background: #131C46 !important; border-color: #131C46 !important; }
  /* Ficha */
  html.vs-p-propiedades .det-inner { padding-top: 12px !important; }
  html.vs-p-propiedades .det-mosaic { border-radius: 22px !important; height: 300px !important; }
  html.vs-p-propiedades .det-cta, html.vs-p-propiedades .det-btn-send { min-height: 52px; border-radius: 16px !important; font-size: 13px !important; letter-spacing: .04em !important; text-transform: none !important; display: flex !important; align-items: center; justify-content: center; }
  html.vs-p-propiedades .det-cta-wa { background: #FC4B08 !important; }
  html.vs-p-propiedades .det-btn-send { background: #131C46 !important; }
  html.vs-p-propiedades .det-input { border-radius: 12px !important; font-size: 16px !important; }
  html.vs-p-propiedades .det-sec, html.vs-p-propiedades .det-agente, html.vs-p-propiedades .det-sidebar-sticky { border-radius: 22px !important; }
}

/* ========== Preventa en modo app ========== */
@media (max-width: 760px) {
  html.vs-p-preventa body { background: #F5F5F8 !important; padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
  html.vs-p-preventa nav.nav, html.vs-p-preventa .nav-menu-m, html.vs-p-preventa footer.site { display: none !important; }
  /* Su barra WhatsApp / Agendar queda justo encima de la barra de la app */
  html.vs-p-preventa .mbar { bottom: calc(64px + env(safe-area-inset-bottom)) !important; border-radius: 20px 20px 0 0; box-shadow: none !important; }
  html.vs-p-preventa .mbar .btn { min-height: 46px; border-radius: 14px; }
  html.vs-p-preventa .hero { margin: 4px 20px 0; min-height: 560px !important; border-radius: 26px; overflow: hidden; }
  html.vs-p-preventa .hero-inner { padding: 0 22px 28px !important; }
  html.vs-app.vs-p-preventa .hero h1 { font-size: 30px !important; }
  html.vs-p-preventa .hero p.lead { font-size: 15px !important; margin-bottom: 18px !important; }
  html.vs-p-preventa .hero-cta-row .btn { flex: 1; }
  html.vs-p-preventa .hero-price strong { font-size: 28px !important; }
  html.vs-p-preventa .statbar { margin-top: 14px !important; border-radius: 20px !important; box-shadow: none !important; border: 1px solid #E3E4EA; overflow: hidden; }
  html.vs-p-preventa .btn { border-radius: 16px; min-height: 52px; font-size: 14px; }
  html.vs-p-preventa section { padding: 36px 0 !important; }
  html.vs-p-preventa section.band { background: transparent !important; }
  html.vs-p-preventa .gal-grid a, html.vs-p-preventa .split img, html.vs-p-preventa .split-video, html.vs-p-preventa .amen-tile, html.vs-p-preventa .acab-card, html.vs-p-preventa .map-panel { border-radius: 18px !important; }
  html.vs-p-preventa .fin { border-radius: 22px !important; }
  html.vs-p-preventa .final { margin: 0 20px 24px; border-radius: 26px; background: #131C46 !important; }
  html.vs-p-preventa .final-form { border-radius: 20px !important; background: rgba(255,255,255,.06) !important; }
  html.vs-p-preventa .field input { border-radius: 12px !important; font-size: 16px !important; background: #FFFFFF !important; color: #131C46 !important; border-color: #FFFFFF !important; }
}

/* ========== Cotizador de Urbanity en modo app ========== */
@media (max-width: 760px) {
  html.vs-p-urbanity-cotizador, html.vs-p-urbanity-cotizador body { height: auto !important; }
  html.vs-p-urbanity-cotizador body { display: block !important; background: #F5F5F8 !important; font-family: Montserrat, sans-serif !important; }
  html.vs-p-urbanity-cotizador .form-panel { position: static !important; height: auto !important; overflow: visible !important; padding-top: 0 !important; background: transparent !important; display: block !important; }
  html.vs-p-urbanity-cotizador .fp-header { padding: 12px 20px 0 !important; background: transparent !important; border: 0 !important; }
  html.vs-p-urbanity-cotizador .content-inner { margin: 12px 20px 24px !important; width: auto !important; padding: 22px 20px !important; background: #FFFFFF; border-radius: 22px; border: 1px solid #E3E4EA; }
  html.vs-p-urbanity-cotizador .form-panel input, html.vs-p-urbanity-cotizador .form-panel button, html.vs-p-urbanity-cotizador .form-panel textarea, html.vs-p-urbanity-cotizador .form-panel select { font-family: Montserrat, sans-serif !important; }
  html.vs-p-urbanity-cotizador .c-question { font-size: 22px !important; letter-spacing: -.01em !important; }
  html.vs-p-urbanity-cotizador .c-sub { font-size: 14px !important; }
  html.vs-p-urbanity-cotizador .c-big-inp { border-radius: 12px !important; border-width: 1px !important; border-color: #C5CAE0 !important; height: 50px; }
  html.vs-p-urbanity-cotizador .c-pill { border-radius: 20px !important; min-height: 40px; font-size: 13px !important; }
  html.vs-p-urbanity-cotizador .c-pill.on, html.vs-p-urbanity-cotizador .c-card.on { background: #131C46 !important; border-color: #131C46 !important; }
  html.vs-p-urbanity-cotizador .c-card { border-radius: 16px !important; }
  html.vs-p-urbanity-cotizador .c-btn-next { min-height: 52px; border-radius: 16px !important; background: #FC4B08 !important; font-size: 14px !important; font-weight: 800 !important; }
  html.vs-p-urbanity-cotizador .c-btn-back { min-height: 52px; border-radius: 16px !important; }
}

/* ========== WordPress (Zona Cero, artículos, contacto) en modo app ========== */
@media (max-width: 760px) {
  html.vs-app .backtop, html.vs-app .prop-compare { display: none !important; }
  html.vs-app .wpresidence_main_wrapper_class { padding-top: 0 !important; }
  html.vs-app body.vs-solid, html.vs-app body.single-post, html.vs-app.vs-p-blog body, html.vs-app.vs-p-contacto body { background: #F5F5F8 !important; }
  /* Zona Cero */
  html.vs-p-blog .elementor-element-d3326bb { margin: 12px 16px 0 !important; width: auto !important; border-radius: 22px; overflow: hidden; min-height: 190px !important; justify-content: flex-end !important; padding: 22px 20px !important; }
  html.vs-p-blog .elementor-element-d3326bb .elementor-shape { display: none !important; }
  html.vs-p-blog .elementor-element-d3326bb .elementor-heading-title { text-align: left !important; text-transform: none !important; letter-spacing: -.01em !important; }
  html.vs-p-blog .elementor-element-f0af2c0 .elementor-heading-title { font-size: 30px !important; line-height: 1.1 !important; }
  html.vs-p-blog .elementor-element-751b5fe .elementor-heading-title { font-size: 14px !important; font-weight: 600 !important; opacity: .9; }
  html.vs-p-blog .elementor-element-28d8479 { padding: 18px 16px 24px !important; }
  html.vs-p-blog .elementor-element-28d8479 > .e-con-inner, html.vs-p-blog .elementor-element-ff0706a { padding: 0 !important; margin: 0 !important; }
  html.vs-p-blog .elementor-posts-container { gap: 14px !important; row-gap: 14px !important; }
  html.vs-p-blog .elementor-post__card { border-radius: 20px !important; border: 1px solid #E3E4EA !important; box-shadow: none !important; background: #FFFFFF !important; }
  html.vs-p-blog .elementor-post__text { padding: 16px 18px 18px !important; margin: 0 !important; }
  html.vs-p-blog .elementor-post__title, html.vs-p-blog .elementor-post__title a { font-family: Montserrat, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #131C46 !important; }
  html.vs-p-blog .elementor-post__read-more { font-family: Montserrat, sans-serif !important; color: #FC4B08 !important; font-size: 12px !important; font-weight: 800 !important; text-transform: none !important; margin-top: 10px !important; display: inline-block; }
  /* Artículo */
  html.vs-app body.single-post .breadcrumb_container, html.vs-app body.single-post #primary { display: none !important; }
  html.vs-app body.single-post #post { padding: 12px 16px 24px !important; }
  html.vs-app body.single-post #post > div { padding: 0 !important; }
  html.vs-app body.single-post .single-blog { padding: 0 0 22px !important; margin: 0 !important; border-radius: 22px !important; border: 1px solid #E3E4EA; box-shadow: none !important; overflow: hidden; background: #FFFFFF !important; }
  html.vs-app body.single-post .single-blog > *:not(.post-carusel) { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; max-width: none !important; }
  html.vs-app body.single-post .post-carusel .carousel-indicators { display: none !important; }
  html.vs-app body.single-post .post-carusel { margin: 0 0 18px !important; }
  html.vs-app body.single-post .post-carusel img { width: 100% !important; height: 240px !important; object-fit: cover; border-radius: 0 !important; }
  html.vs-app body.single-post .wpresidence-carousel-control { display: none !important; }
  html.vs-app body.single-post .single-title { font-family: Montserrat, sans-serif !important; font-size: 24px !important; line-height: 1.2 !important; color: #131C46 !important; margin-top: 0 !important; }
  html.vs-app body.single-post .meta-info { display: flex !important; flex-wrap: wrap; gap: 4px 14px; font-size: 12px !important; color: #4A5072 !important; margin-bottom: 14px !important; }
  html.vs-app body.single-post .single-blog p { font-size: 15px !important; line-height: 1.65 !important; color: #2B3150 !important; }
  html.vs-app body.single-post .single-blog strong { color: #131C46; }
  html.vs-app body.single-post .single-blog figure img { border-radius: 14px; }
  html.vs-app body.single-post .prop_social_single a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #F5F5F8 !important; display: inline-flex !important; align-items: center; justify-content: center; }
  /* Contacto */
  html.vs-p-contacto #contact-call-05 { padding: 12px 16px 24px !important; background: transparent !important; }
  html.vs-p-contacto #contact-call-05 > .elementor-background-overlay { display: none !important; }
  html.vs-p-contacto #contact-call-05 > .elementor-container { padding: 0 !important; gap: 14px; }
  html.vs-p-contacto #contact-call-05 .elementor-top-column > .elementor-widget-wrap { border-radius: 22px !important; padding: 24px 20px !important; margin: 0 !important; }
  html.vs-p-contacto #contact-call-05 .elementor-top-column:last-child > .elementor-widget-wrap { background: #131C46 !important; }
  html.vs-p-contacto #contact-call-05 .elementor-top-column:first-child > .elementor-widget-wrap { background: #FFFFFF !important; border: 1px solid #E3E4EA; box-shadow: none !important; }
  html.vs-p-contacto #contact-call-05 .elementor-heading-title { text-transform: none !important; text-align: left !important; font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -.01em !important; }
  html.vs-p-contacto #contact-call-05 .elementor-top-column:first-child .elementor-heading-title { color: #131C46 !important; font-size: 20px !important; font-weight: 800 !important; }
  html.vs-p-contacto #contact-call-05 .elementor-widget-text-editor, html.vs-p-contacto #contact-call-05 .elementor-widget-text-editor p { text-align: left !important; font-size: 15px !important; margin: 0 0 6px !important; }
  html.vs-p-contacto #contact-call-05 .elementor-widget-button .elementor-button { width: 100%; justify-content: center; border-radius: 16px !important; background: #FC4B08 !important; min-height: 50px; text-transform: none !important; font-family: Montserrat, sans-serif !important; font-weight: 800 !important; font-size: 14px !important; }
  html.vs-p-contacto #contact-call-05 .elementor-widget-button .elementor-button-content-wrapper { justify-content: center; }
  html.vs-p-contacto #contact-call-05 .elementor-field-group { padding: 0 !important; margin-bottom: 10px !important; }
  html.vs-p-contacto #contact-call-05 input, html.vs-p-contacto #contact-call-05 textarea { border-radius: 12px !important; border: 1px solid #C5CAE0 !important; background: #FFFFFF !important; min-height: 48px; font-size: 16px !important; padding: 10px 14px !important; }
  html.vs-p-contacto #contact-call-05 button[type=submit], html.vs-p-contacto #contact-call-05 .elementor-field-type-submit button { width: 100% !important; min-height: 52px; border-radius: 16px !important; background: #131C46 !important; border: 0 !important; font-family: Montserrat, sans-serif !important; font-weight: 800 !important; text-transform: none !important; }
}

/* ========== Calculadora en modo app ========== */
@media (max-width: 760px) {
  html.vs-p-calculadora body { background: #F5F5F8 !important; }
  html.vs-p-calculadora .cc-hero { margin: 4px 20px 0; padding: 26px 22px !important; border-radius: 26px; }
  html.vs-p-calculadora .cc-hero h1 { font-size: 30px !important; }
  html.vs-p-calculadora .cc-hero .lead { margin-top: 10px !important; font-size: 15px !important; line-height: 1.55 !important; }
  html.vs-p-calculadora .cc-main { padding: 20px 20px 8px !important; }
  html.vs-p-calculadora .card, html.vs-p-calculadora .res { border-radius: 22px !important; padding: 20px !important; }
  html.vs-p-calculadora .card h2, html.vs-p-calculadora .cmp h2 { font-size: 20px !important; font-weight: 900 !important; letter-spacing: -.01em !important; text-transform: none !important; margin-bottom: 14px !important; }
  html.vs-p-calculadora .seg { border-radius: 14px; }
  html.vs-p-calculadora .seg button { border-radius: 10px; }
  html.vs-p-calculadora .money { border-radius: 12px; border-color: #C5CAE0; }
  html.vs-p-calculadora .res { margin-top: 14px; }
  html.vs-p-calculadora .btn { min-height: 52px; border-radius: 16px; font-size: 13px; font-weight: 800; letter-spacing: .06em; width: 100%; }
  html.vs-p-calculadora .btn.o { background: #FC4B08; }
  html.vs-p-calculadora .cmp { margin-top: 14px !important; }
  html.vs-p-calculadora .tbl th { letter-spacing: .04em; }
  html.vs-p-calculadora .tbl td:nth-child(2) { white-space: nowrap; }
  html.vs-p-calculadora .disc { padding: 8px 20px 32px !important; }
}

/* ========== Vargas Experience en modo app (mismo lenguaje que home2) ========== */
@media (max-width: 760px) {
  html.vs-p-vargas-experience body, html.vs-p-vargas-experience main { background: #F5F5F8 !important; }
  html.vs-p-vargas-experience p, html.vs-p-vargas-experience blockquote { text-align: left !important; }
  html.vs-p-vargas-experience .h2 { font-size: 24px !important; font-weight: 900 !important; letter-spacing: -.01em !important; text-transform: none !important; }
  html.vs-p-vargas-experience .btn { min-height: 52px; border-radius: 16px; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
  html.vs-p-vargas-experience .btn.o { background: #FC4B08; }

  /* Portada: tarjeta con foto, como la de Inicio */
  html.vs-p-vargas-experience .hero { margin: 4px 20px 0; min-height: 520px !important; border-radius: 26px; }
  html.vs-p-vargas-experience .hero::after { background: linear-gradient(180deg, rgba(19,28,70,.05) 15%, rgba(19,28,70,.92) 100%) !important; }
  html.vs-p-vargas-experience .hero .in { padding: 22px !important; }
  html.vs-p-vargas-experience .hero .kick { margin-bottom: 8px; font-size: 11px; letter-spacing: .12em; }
  html.vs-p-vargas-experience .hero h1 { font-size: 30px !important; line-height: 1.1 !important; }
  html.vs-p-vargas-experience .hero blockquote { margin-top: 12px; font-size: 14px !important; line-height: 1.55; font-style: italic; }
  html.vs-p-vargas-experience .hero .acts { margin-top: 18px; }
  html.vs-p-vargas-experience .hero .acts .btn { width: 100%; }

  /* Lo que hacemos: tarjetas blancas */
  html.vs-p-vargas-experience .puntos { padding: 40px 20px 8px !important; background: transparent; }
  html.vs-p-vargas-experience .puntos .head { display: block !important; margin-bottom: 18px !important; }
  html.vs-p-vargas-experience .puntos .head p { margin-top: 8px !important; font-size: 15px !important; line-height: 1.55 !important; }
  html.vs-p-vargas-experience .grid4 { display: flex !important; flex-direction: column; gap: 10px !important; }
  html.vs-p-vargas-experience .pt { padding: 18px !important; border-radius: 20px !important; background: #FFFFFF !important; border: 1px solid #E3E4EA; gap: 6px !important; }
  html.vs-p-vargas-experience .pt h3 { font-size: 17px !important; }
  html.vs-p-vargas-experience .pt p { font-size: 14px !important; line-height: 1.55 !important; }

  /* Cómo funciona: pasos como tarjetas con número en círculo */
  html.vs-p-vargas-experience .pasos { margin: 32px 20px 0; padding: 24px 18px !important; border-radius: 26px; }
  html.vs-p-vargas-experience .pasos ol { margin-top: 18px !important; display: flex !important; flex-direction: column; gap: 10px !important; }
  html.vs-p-vargas-experience .pasos ol::before { display: none !important; }
  html.vs-p-vargas-experience .pasos li { display: grid !important; grid-template-columns: 40px minmax(0,1fr); column-gap: 14px; row-gap: 6px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); }
  html.vs-p-vargas-experience .pasos li > * { grid-column: 2; }
  html.vs-p-vargas-experience .pasos .big { grid-column: 1 !important; grid-row: 1 / span 4; width: 40px; height: 40px; padding: 0 !important; border-radius: 20px; background: #FC4B08 !important; color: #FFFFFF !important; -webkit-text-stroke: 0 !important; font-size: 15px !important; letter-spacing: 0 !important; display: flex !important; align-items: center; justify-content: center; }
  html.vs-p-vargas-experience .pasos h3 { margin: 0 !important; font-size: 16px !important; font-weight: 800 !important; }
  html.vs-p-vargas-experience .pasos p { font-size: 14px !important; line-height: 1.5 !important; }
  html.vs-p-vargas-experience .pasos p.rec { padding-top: 10px !important; font-size: 13px !important; }
  html.vs-p-vargas-experience .pasos a.go { font-size: 12px; }

  /* Javi: tarjeta con foto arriba */
  html.vs-p-vargas-experience .javi { margin: 32px 20px 0; border-radius: 26px; background: #131C46 !important; }
  html.vs-p-vargas-experience .javi img { position: static !important; width: 100% !important; height: 300px !important; object-position: 50% 18% !important; filter: none !important; }
  html.vs-p-vargas-experience .javi .fade { display: none !important; }
  html.vs-p-vargas-experience .javi .in { padding: 22px !important; }
  html.vs-p-vargas-experience .javi .body { max-width: none !important; }
  html.vs-p-vargas-experience .javi p.q { font-size: 20px !important; line-height: 1.35 !important; }
  html.vs-p-vargas-experience .javi p.t { margin-top: 12px !important; font-size: 14px !important; line-height: 1.6 !important; }
  html.vs-p-vargas-experience .javi .datos { margin-top: 20px !important; padding-top: 18px !important; gap: 12px !important; }
  html.vs-p-vargas-experience .javi .datos b { font-size: 26px !important; }

  /* Reseñas: carrusel de tarjetas */
  html.vs-p-vargas-experience .res { padding: 40px 0 8px !important; }
  html.vs-p-vargas-experience .res .head { padding: 0 20px; margin-bottom: 16px !important; }
  html.vs-p-vargas-experience .res .head p { margin-top: 8px !important; font-size: 15px !important; line-height: 1.55 !important; }
  html.vs-p-vargas-experience .res .grid3 { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 4px; scroll-padding: 0 20px; scrollbar-width: none; }
  html.vs-p-vargas-experience .res .grid3::-webkit-scrollbar { display: none; }
  html.vs-p-vargas-experience .res figure { flex: 0 0 85%; scroll-snap-align: start; padding: 20px !important; border: 0 !important; border-radius: 22px; background: #FFFFFF; gap: 12px !important; }
  html.vs-p-vargas-experience .res blockquote { font-size: 14px !important; line-height: 1.55 !important; }
  html.vs-p-vargas-experience .res figcaption b { letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; }

  /* Agendar: formulario como en la app */
  html.vs-p-vargas-experience .agenda { padding: 40px 20px !important; background: transparent !important; }
  html.vs-p-vargas-experience .agenda .in { display: block !important; }
  html.vs-p-vargas-experience .agenda .side { margin-bottom: 16px; }
  html.vs-p-vargas-experience .agenda .side p { margin-top: 8px !important; font-size: 15px !important; line-height: 1.55 !important; }
  html.vs-p-vargas-experience .agenda .side ul { margin-top: 12px !important; }
  html.vs-p-vargas-experience .card { padding: 20px !important; border-radius: 22px !important; }
  html.vs-p-vargas-experience .row2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  html.vs-p-vargas-experience .fi input { height: 48px; border-radius: 12px !important; border-color: #C5CAE0 !important; font-size: 16px !important; }
  html.vs-p-vargas-experience .chips button { border-radius: 20px !important; }
  html.vs-p-vargas-experience .chips.dias button { border-radius: 16px !important; }
  html.vs-p-vargas-experience .nav2 { display: grid !important; grid-template-columns: 1fr 1.6fr; gap: 8px; }
  html.vs-p-vargas-experience .nav2 .btn { width: 100%; padding: 0 12px; }

  /* Preguntas frecuentes: agrupadas en una tarjeta */
  html.vs-p-vargas-experience .faq { padding: 8px 20px 40px !important; background: transparent !important; }
  html.vs-p-vargas-experience .faq-list { margin-top: 16px !important; padding: 0 18px; border-radius: 22px; background: #FFFFFF; border: 1px solid #E3E4EA; }
  html.vs-p-vargas-experience .faq-list details:last-child { border-bottom: 0 !important; }
  html.vs-p-vargas-experience .faq summary { font-size: 15px !important; padding-block: 16px !important; }
}