/* ==========================================================================
 * ESTUDIO-2026.CSS — Villa & Asociados · capa de diseño 2026
 *
 * Se carga AL FINAL del <head> de cada página. NO cambia textos, enlaces,
 * formularios ni medición: sólo la presentación.
 *
 * 1. Tipografía nueva con los NOMBRES de las viejas: cualquier regla del sitio
 *    que pida "Cormorant Garamond", "EB Garamond", "Inter" o "JetBrains Mono"
 *    recibe la nueva familia. size-adjust conserva el ANCHO de cada línea
 *    (medido: Cormorant 11,51 / Schibsted 13,92 -> 82 %), así los títulos
 *    cortan donde cortaban y ningún bloque se desarma.
 * 2. Tokens de color nuevos (ganan a los de cada página y a theme.css).
 * 3. Componentes compartidos de las páginas internas.
 * 4. Home (React): ajustes por sección.
 * 5. Innovaciones: transición entre páginas, barra de lectura, aparición al
 *    hacer scroll, encabezado inteligente, foco de luz, carruseles táctiles.
 *    Todo progresivo: si el navegador no lo soporta, la página queda igual.
 * ========================================================================== */

/* ---------- 1. Fuentes (alojadas en el sitio) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/SchibstedGrotesk-normal-400-800.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; size-adjust: 82%; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/Newsreader-italic-500.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; size-adjust: 90%; }
@font-face { font-family: "EB Garamond"; src: url("fonts/SchibstedGrotesk-normal-400-800.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; size-adjust: 82%; }
@font-face { font-family: "EB Garamond"; src: url("fonts/Newsreader-italic-500.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; size-adjust: 90%; }
@font-face { font-family: "Inter"; src: url("fonts/SchibstedGrotesk-normal-400-800.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/IBMPlexMono-normal-400.woff2") format("woff2"); font-weight: 300 450; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/IBMPlexMono-normal-500.woff2") format("woff2"); font-weight: 451 800; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root:root {
  --display: "Cormorant Garamond", system-ui, sans-serif !important;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --mono: "JetBrains Mono", ui-monospace, monospace !important;

  --bg: #F6F7F8 !important;            /* fondo general: blanco frío */
  --surface: #FFFFFF !important;
  --ink: #0B1520 !important;           /* tinta azul noche */
  --inkSoft: #3C4756 !important;
  --muted: #5C6774 !important;         /* 5,2:1 sobre --bg */
  --line: #E1E5EA !important;
  --hero: #0B1520 !important;
  --heroInk: #F3F5F7 !important;
  --heroInk-soft: rgba(243,245,247,.80) !important;
  --heroInk-dim: rgba(243,245,247,.64) !important;
  --inputBg: #FFFFFF !important;

  --accent: #8A6A24 !important;        /* dorado sobre claro: 4,9:1 */
  --accent-bright: #D8B46A !important; /* dorado sobre oscuro: 9:1 */
  --accent-deep: #6D5219 !important;
  --accentInk: #FFFFFF !important;

  --ok-bg: rgba(216,180,106,.12) !important;
  --ok-border: rgba(216,180,106,.42) !important;

  --radio: 10px !important;
  --radio-sm: 6px !important;
  --sombra-1: 0 1px 2px rgba(11,21,32,.05), 0 4px 14px rgba(11,21,32,.05) !important;
  --sombra-2: 0 2px 6px rgba(11,21,32,.06), 0 18px 44px rgba(11,21,32,.10) !important;
  --ease: cubic-bezier(.2,.7,.2,1) !important;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: rgba(216,180,106,.35); color: inherit; }
img { image-rendering: auto; }
:where(a, button, [role="button"], summary, input, select, textarea) { -webkit-tap-highlight-color: rgba(216,180,106,.18); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ==========================================================================
 * 5a. INNOVACIÓN · transición suave entre páginas (Chrome/Edge; el resto navega igual)
 * ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ==========================================================================
 * 5b. INNOVACIÓN · barra de lectura (cuánto falta de la página), sin JavaScript
 * ========================================================================== */
@keyframes va-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  html::after {
    content: ""; position: fixed; left: 0; top: 0; z-index: 2147483000; width: 100%; height: 2px;
    background: var(--accent-bright);
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
    animation: va-progreso linear both; animation-timeline: scroll(root block);
  }
}

/* ==========================================================================
 * 5c. INNOVACIÓN · los bloques aparecen al llegar a la pantalla (scroll-driven, sin JS).
 *     Lo que está a la vista al cargar ya se ve completo.
 * ========================================================================== */
@keyframes va-entra { from { opacity: .001; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .va-aparece { animation: va-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}

/* ==========================================================================
 * 5d. INNOVACIÓN · encabezado inteligente: se esconde al bajar y vuelve al subir
 *     (la clase la pone estudio-2026.js; sin JS queda fijo como siempre)
 * ========================================================================== */
.va-nav, nav.nav, header.site-header, .site > nav { transition: transform .38s var(--ease), background-color .3s, box-shadow .3s, backdrop-filter .3s !important; }
html.va-baja .va-nav, html.va-baja nav.nav, html.va-baja header.site-header { transform: translateY(-105%) !important; }
html.va-scroll .va-nav { background: rgba(11,21,32,.78) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.18) !important; }


/* ==========================================================================
 * 5f. INNOVACIÓN · micro-interacciones
 * ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .va-elevable { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background-color .35s !important; }
  .va-elevable:hover { transform: translateY(-3px); box-shadow: var(--sombra-2) !important; }
  .va-boton { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s !important; }
  .va-boton:hover { transform: translateY(-1px); }
  .va-boton:active { transform: translateY(0) scale(.985); }
}

/* ==========================================================================
 * 3. PÁGINAS INTERNAS (calculadoras, chequeos, guías, fallos)
 *    "html ..." + !important: les gana a los !important puestos en cada página.
 * ========================================================================== */
html body { background: var(--bg) !important; color: var(--ink); }

/* Encabezado: vidrio claro, fijo arriba, se esconde al bajar */
html nav.nav {
  position: sticky !important; top: 0; z-index: 60;
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid rgba(11,21,32,.08) !important;
}
html.va-scroll nav.nav { box-shadow: 0 8px 28px rgba(11,21,32,.07); }
html nav.nav .back { color: var(--ink) !important; font-weight: 500; border-radius: 999px; padding: 8px 14px; transition: background .2s; }
html nav.nav .back:hover { background: rgba(11,21,32,.05); }

/* Hero: azul noche con un brillo dorado arriba a la derecha (igual en todas las verticales) */
html .hero {
  background:
    linear-gradient(180deg, #0B1520 0%, #0F1E2E 100%) !important;
  color: var(--heroInk) !important;
}
html .hero h1 { color: #F6F8FA !important; letter-spacing: -.028em !important; font-weight: 500 !important; }
html .hero h1 em { color: var(--accent-bright) !important; letter-spacing: -.01em; }
html .hero p { color: rgba(243,245,247,.82) !important; text-align: left !important; hyphens: manual !important; }
html .hero .eyebrow { color: var(--accent-bright) !important; letter-spacing: .14em !important; }
html .eyebrow::before { background: var(--accent-bright) !important; }

/* Tarjeta principal (formularios de las calculadoras) */
html .card, html .res-body, html .res-head {
  border-color: var(--line) !important;
}
html .card {
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(11,21,32,.04), 0 24px 60px -18px rgba(11,21,32,.18) !important;
}
html .res-head { border-radius: 10px 18px 0 0 !important; }
html .res-body { border-radius: 0 0 10px 10px !important; }

/* Botones */
html .btn {
  border-radius: 6px !important; min-height: 52px; letter-spacing: .03em !important; font-weight: 600 !important;
}
html .btn-primary {
  background: #8A6A24 !important; color: #FFFFFF !important; border: 0 !important;
  box-shadow: none !important;
}
html .btn-primary:hover { background: #755818 !important; }
html .hero .btn-primary, html .footer-cta .btn-primary {
  background: #D8B46A !important; color: #0B1520 !important;
  box-shadow: none !important;
}
html .btn-wa { background: #128C4A !important; color: #fff !important; box-shadow: none !important; }
html .btn-wa:hover { background: #0F7A40 !important; }
html .btn-ghost, html .btn-tel {
  background: transparent !important; border: 1.5px solid rgba(11,21,32,.22) !important; color: var(--ink) !important;
}
html .hero .btn-ghost, html .footer-cta .btn-ghost { border-color: rgba(255,255,255,.32) !important; color: #fff !important; }

/* Campos de formulario (sólo páginas internas; la home tiene su propio estilo) */
:root:not(:has(#root)) :is(.field input, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, textarea):not([type="radio"]):not([type="checkbox"]) {
  background: #FFFFFF !important; border: 1.5px solid #CDD4DC !important; border-radius: 6px !important;
  transition: border-color .2s, box-shadow .2s;
}
:root:not(:has(#root)) :is(.field input, input, select, textarea):focus {
  border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(216,180,106,.28) !important; outline: none !important;
}
html :is(.chip, .opt, .pill, .flow-choice span, .opt-box) { border-radius: 6px !important; }
/* opciones elegibles (botones de formulario); las etiquetas informativas de los héroes no se tocan */
html :is(button.chip, label.chip, .chips .chip, [role="radio"].chip, .card .chip) { background: #FFFFFF !important; border: 1.5px solid #CDD4DC !important; }
html :is(button.chip, label.chip, .chips .chip, [role="radio"].chip, .card .chip).on { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
html .hero :is(.chip, .pill, .tag) { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18) !important; color: rgba(243,245,247,.86) !important; border-radius: 999px !important; }

/* Preguntas frecuentes */
html :is(.faq, .faq-seo) details { border-color: var(--line) !important; transition: background .2s; }
html :is(.faq, .faq-seo) summary { letter-spacing: -.005em; }
html :is(.faq, .faq-seo) summary::after { font-family: var(--sans) !important; font-weight: 300; color: var(--accent) !important; transition: transform .3s var(--ease); }
html :is(.faq, .faq-seo) details[open] summary::after { transform: rotate(180deg); }
@media (hover: hover) { html :is(.faq, .faq-seo) details:hover { background: rgba(11,21,32,.015); } }

/* Pie con llamada a la acción + pie del sitio */
html .footer-cta {
  background:
    linear-gradient(180deg, #0B1520 0%, #0E1C2B 100%) !important;
}
html .footer-cta p { color: rgba(243,245,247,.80) !important; }
html .footer-cta :is(h1, h2, h3, h4, strong, b) { color: #F3F5F7 !important; }
html .footer-cta :is(h1, h2, h3, h4) em { color: #D8B46A !important; }
html .footer-cta :is(.ey, .eyebrow, .kicker, small) { color: rgba(243,245,247,.62) !important; }
html .footer-cta a:not(.btn) { color: #D8B46A !important; }
/* el pie de las páginas internas trae textos y logo claros (logo invertido): va sobre azul noche */
html footer.site { background: #08111A !important; color: rgba(243,245,247,.86) !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
html footer.site :is(span, div, p, a, b, strong) { color: rgba(243,245,247,.86) !important; }
html footer.site :is(.disclaimer, .copy) { color: rgba(243,245,247,.62) !important; opacity: 1 !important; }
/* botones "fantasma" sobre fondo oscuro (lo marca estudio-2026.js) */
html .va-sobre-oscuro:is(.btn-ghost, .btn-tel) { color: #F3F5F7 !important; border-color: rgba(255,255,255,.34) !important; }
html .va-sobre-oscuro:is(.btn-ghost, .btn-tel):hover { border-color: #D8B46A !important; }
/* etiqueta dorada clara con texto blanco: pasa a texto azul noche */
html .cct-chip { color: #0B1520 !important; }
/* Test de trato laboral en celular: el sitio actual corre dos paginadores y ninguno tenía estilo
   (salían todas las preguntas juntas y botones sueltos bajo el pie). Queda el de la página:
   una pregunta por pantalla, progreso arriba y Atrás / Siguiente fijos abajo. */
html .encuesta-nav-mobile:not(#enc-mobile-nav), html .encuesta-progress-mobile:not(#enc-mobile-top) { display: none !important; }
@media (max-width: 640px) {
  html body.encuesta-mobile-paginated .panel-body .q:not(.is-active) { display: none !important; }
  html body.encuesta-mobile-paginated .panel:not(:has(.q.is-active)) { display: none !important; }
  html body.encuesta-mobile-paginated .panel-body .q.is-active { min-height: 46vh; padding: 8px 0 24px; border: 0; }
  html body.encuesta-mobile-paginated .panel-body .q.is-active .q-opts { margin-left: 0; margin-top: 22px; }
  html body.encuesta-mobile-paginated .panel-body .q.is-active .q-opts button { min-height: 56px; font-size: 15px; }
  html #enc-mobile-top {
    position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    margin: 0 0 18px; padding: 12px 4px; background: rgba(246,247,248,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  }
  html #enc-mobile-top .bar { height: 3px; background: rgba(11,21,32,.10); border-radius: 3px; overflow: hidden; }
  html #enc-mobile-top .bar-fill { height: 100%; background: #8A6A24; transition: width .35s ease; }
  html #enc-mobile-top #enc-m-block { color: #8A6A24 !important; }
  html #enc-mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(246,247,248,.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  html #enc-mobile-nav button {
    min-height: 52px; border-radius: 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em;
    background: transparent; color: var(--ink); border: 1.5px solid rgba(11,21,32,.22); cursor: pointer;
  }
  html #enc-mobile-nav button.primary { background: #0B1520; color: #fff; border-color: #0B1520; }
  html #enc-mobile-nav button:disabled { opacity: .35; }
  html body.encuesta-mobile-paginated { padding-bottom: 96px; }
  /* si está la barra de WhatsApp fija del celular, los botones van justo encima */
  html:has(#villa-mcta) #enc-mobile-nav { bottom: var(--va-mcta, 73px); border-bottom: 1px solid var(--line); }
  html:has(#villa-mcta) body.encuesta-mobile-paginated { padding-bottom: 170px; }
}

/* opciones con título y aclaración: una debajo de la otra (en el sitio actual salían pegadas) */
html .opt-txt :is(.t, .s) { display: block; }
/* página 404 (era oscura; queda clara con textos legibles) */
html:has(body > .box > .num) body { background: var(--bg) !important; }
html:has(body > .box > .num) .box p { color: rgba(11,21,32,.74) !important; }
html:has(body > .box > .num) .box .foot { color: rgba(11,21,32,.52) !important; }
html:has(body > .box > .num) .box a.ghost { border-color: rgba(11,21,32,.24) !important; color: #0B1520 !important; }

/* Tarjetas genéricas de las páginas internas */
html :is(.card-item, .meta-item, .block, .module, .c-point, .testigo) {
  border-radius: 10px !important; border-color: var(--line) !important;
}

/* ==========================================================================
 * 4a. HOME · ESCRITORIO (React con estilos en línea: se ajusta por contexto)
 * ========================================================================== */
/* fondo del hero: azul noche + brillo dorado */
.va-hero > div[style*="linear-gradient"] {
  background:
    linear-gradient(180deg, #0B1520 0%, #0F1E2E 100%) !important;
}
.va-hero h1 { letter-spacing: -.03em !important; font-weight: 500 !important; }
.va-hero h1 em { letter-spacing: -.012em; }
/* texto corrido: alineado a la izquierda, sin cortes con guion (más legible) */
#root p, #root [style*="text-align: justify"] { text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important; }
#root [style*="text-align: center"] { text-align: center !important; }

/* botones de la home */
#root a[style*="background: var(--accent)"], #root button[style*="background: var(--accent)"] {
  border-radius: 6px !important; letter-spacing: .06em !important;
  background: #8A6A24 !important; color: #fff !important;
  box-shadow: none !important;
}
:is(.va-hero, .va-nav, #servicios, #recursos, #contacto) :is(a, button)[style*="background: var(--accent)"] {
  background: #D8B46A !important; color: #0B1520 !important;
  box-shadow: none !important;
}
#root :is(a, button)[style*="background: var(--ink)"] { border-radius: 6px !important; }
#root :is(a, button)[style*="border: 1px solid"] { border-radius: 6px !important; }
#root .va-nav button[style*="background: var(--accent)"] { border-radius: 6px !important; padding-left: 22px !important; padding-right: 22px !important; }

/* menú: subrayado animado + sección activa */
.va-nav-links > a { position: relative; }
.va-nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--accent-bright); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.va-nav-links > a:hover::after, .va-nav-links > a.va-activo::after { transform: scaleX(1); }

/* superficies con borde: esquinas suaves */
#root [style*="border: 1px solid var(--line)"]:not(input):not(textarea),
#root [style*="background: var(--surface)"] { border-radius: 10px; }
#root a[href*="fallos/"] { border-radius: 10px; }
#servicios [style*="grid-template-columns: repeat(4"] { border-radius: 12px !important; overflow: hidden; }
#root img[src*="team/"], #root img[src*="villa.webp"], #root img[src*="chiesa.webp"], #root img[src*="burgos.webp"] { border-radius: 10px; }
#equipo button { border-radius: 10px; }
#equipo button img { transition: transform .6s var(--ease), filter .6s; }
@media (hover: hover) { #equipo button:hover img { transform: scale(1.035); } }

/* ==========================================================================
 * 4b. HOME · CELULAR (.va-mapp): tokens propios + carruseles táctiles
 * ========================================================================== */
.va-mapp.va-mapp {
  --bg: #F6F7F8 !important; --bg-alt: #EEF1F4 !important; --bg-card: #FFFFFF !important;
  --ink: #0B1520 !important; --ink-soft: #3C4756 !important; --muted: #5C6774 !important; --muted-soft: #7A8592 !important;
  --line: #E1E5EA !important; --line-soft: #E9ECF0 !important;
  --accent: #8A6A24 !important; --accent-hi: #9C7B30 !important; --accent-soft: #D8B46A !important;
  --hero-bg: #0B1520 !important; --hero-ink: #F3F5F7 !important; --hero-mute: #9AA4AF !important;
  --radius-sm: 4px !important; --radius-md: 6px !important; --radius-lg: 12px !important;
  --serif: "Cormorant Garamond", system-ui, sans-serif !important;
  --gutter: 20px !important;
}
@media (max-width: 860px) { html, html body { background: #F6F7F8 !important; } }

.vm-nav { background: rgba(255,255,255,.78) !important; border-bottom: 1px solid rgba(11,21,32,.07) !important; -webkit-backdrop-filter: saturate(170%) blur(18px) !important; backdrop-filter: saturate(170%) blur(18px) !important; }
.vm-hero { background: linear-gradient(180deg, #0B1520 0%, #0F1E2E 100%) !important; }
.vm-hero::before { background: none !important; }
.vm-h1 { letter-spacing: -.03em !important; font-weight: 500 !important; }
.vm-h1 em { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--accent-soft) !important; letter-spacing: -.01em; }
.vm-h2 { letter-spacing: -.025em !important; }
.vm-h2 em, .vm-mapp em { color: var(--accent); }
.vm-btn { border-radius: 8px !important; min-height: 54px; }
.vm-btn-primary { background: #D8B46A !important; color: #0B1520 !important; box-shadow: none !important; }
.vm-section.vm-cx { background: linear-gradient(180deg, #F6F7F8 0%, #EEF1F4 100%) !important; }
.vm-cx-box { border-radius: 12px !important; box-shadow: 0 1px 2px rgba(11,21,32,.04), 0 24px 50px -20px rgba(11,21,32,.22) !important; border-color: var(--line) !important; }
.vm-cx-input { background: #FFFFFF !important; border: 1.5px solid #CDD4DC !important; border-radius: 6px !important; }
.vm-cx-input:focus { border-color: #0B1520 !important; box-shadow: 0 0 0 4px rgba(216,180,106,.28) !important; }
.vm-cx-toggle button { border-radius: 6px !important; }
.vm-cx-go { border-radius: 8px !important; }
.vm-aud-card { border-radius: 12px !important; }
.vm-case, .vm-calc-row, .vm-team-btn { border-radius: 10px !important; }

/* Carrusel táctil: los 6 fallos en una fila deslizable (ahorra ~2.000 px de scroll) */
@media (max-width: 860px) {
  .va-mapp .vm-cases {
    display: flex !important; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)) !important; padding: 6px var(--gutter) 22px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .va-mapp .vm-cases::-webkit-scrollbar { display: none; }
  .va-mapp .vm-cases > li { flex: 0 0 86%; scroll-snap-align: start; list-style: none; margin: 0 !important; display: flex; }
  .va-mapp .vm-cases > li > .vm-case { width: 100%; box-shadow: 0 1px 2px rgba(11,21,32,.04), 0 14px 34px -18px rgba(11,21,32,.25); }
  /* puntitos nativos del carrusel (Chrome 135+; el resto desliza igual) */
  .va-mapp .vm-cases { scroll-marker-group: after; }
  .va-mapp .vm-cases::scroll-marker-group { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
  .va-mapp .vm-cases > li::scroll-marker { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #C7CED6; transition: width .3s, background .3s; }
  .va-mapp .vm-cases > li::scroll-marker:target-current { width: 24px; background: var(--accent); }

  /* el equipo también en carrusel */
  .va-mapp .vm-team {
    display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)) !important; padding: 4px var(--gutter) 20px !important; scrollbar-width: none;
    scroll-marker-group: after;
  }
  .va-mapp .vm-team::-webkit-scrollbar { display: none; }
  .va-mapp .vm-team > li { flex: 0 0 82%; scroll-snap-align: start; list-style: none; margin: 0 !important; border: 0 !important; }
  .va-mapp .vm-team > li > .vm-team-btn { width: 100%; height: 100%; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 12px 30px -20px rgba(11,21,32,.3); }
  .va-mapp .vm-team::scroll-marker-group { display: flex; justify-content: center; gap: 8px; }
  .va-mapp .vm-team > li::scroll-marker { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #C7CED6; transition: width .3s, background .3s; }
  .va-mapp .vm-team > li::scroll-marker:target-current { width: 24px; background: var(--accent); }
}

/* Barra inferior de WhatsApp (celular): vidrio, respeta el borde del teléfono */
#villa-mcta { -webkit-backdrop-filter: saturate(170%) blur(18px) !important; backdrop-filter: saturate(170%) blur(18px) !important; background: rgba(255,255,255,.80) !important; border-top: 1px solid rgba(11,21,32,.08) !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
#villa-mcta a { border-radius: 10px !important; }

/* ---------- ajustes finos ---------- */
#servicios [style*="grid-template-columns: repeat(4"] > * { border-radius: 0 !important; }

/* celular: negros puros -> azul noche, botón principal de la calculadora */
.vm-aud-company { background: linear-gradient(180deg, #0B1520 0%, #10202F 100%) !important; }
.vm-footer { background: #0B1520 !important; }
.vm-cx-go { background: #0B1520 !important; color: #FFFFFF !important; box-shadow: none !important; }
.vm-cx-go:active { background: #13263A !important; }
.vm-cx-toggle button.is-on { background: #0B1520 !important; color: #fff !important; border-color: #0B1520 !important; }

@media (max-width: 860px) {
  /* equipo: tarjetas tipo retrato en el carrusel */
  .va-mapp .vm-team > li { flex-basis: 66%; }
  .va-mapp .vm-team-btn { display: flex !important; flex-direction: column !important; align-items: stretch !important; text-align: left; padding: 10px 10px 16px !important; gap: 12px !important; }
  .va-mapp .vm-team-btn > svg { display: none; }
  .va-mapp .vm-team-btn > * { width: 100% !important; max-width: none !important; }
  .va-mapp .vm-team-ph { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; border-radius: 6px !important; object-fit: cover; }
  .va-mapp .vm-team-body { width: auto !important; padding: 0 6px; }

  /* empresas que confían: tira deslizable en vez de una grilla de 860 px */
  .va-mapp .vm-clients {
    display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter)) !important; padding: 4px var(--gutter) 18px !important; scrollbar-width: none;
    scroll-marker-group: after;
  }
  .va-mapp .vm-clients::-webkit-scrollbar { display: none; }
  .va-mapp .vm-clients > li { flex: 0 0 40%; scroll-snap-align: start; margin: 0 !important; }
  .va-mapp .vm-clients::scroll-marker-group { display: flex; justify-content: center; gap: 7px; }
  .va-mapp .vm-clients > li::scroll-marker { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #C7CED6; transition: width .3s, background .3s; }
  .va-mapp .vm-clients > li::scroll-marker:target-current { width: 18px; background: var(--accent); }
}

/* ==========================================================================
 * 6. OPCIONES (cada una se activa con una clase va-op-* en <html>)
 *    Repertorio de sitios premiados; nada de brillos, vidrio ni neón.
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* — titular: el título principal entra como una persiana, el dorado llega después — */
  @keyframes va-persiana { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
  @keyframes va-funde { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
  @keyframes va-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  html :is(.va-hero h1, .vm-h1, .hero h1) { animation: va-persiana 1.1s cubic-bezier(.7,0,.15,1) both; }
  html :is(.va-hero h1, .vm-h1, .hero h1) em { animation: va-funde .9s .55s ease-out both; }
  html :is(.va-hero h1, .vm-h1, .hero h1) ~ * { animation: va-sube .8s .7s var(--ease) both; }

  /* — fotos: las fotos se descubren de abajo hacia arriba al llegar — */
  @keyframes va-foto { from { clip-path: inset(100% 0 0 0); transform: scale(1.14); } to { clip-path: inset(0); transform: scale(1); } }
  @supports (animation-timeline: view()) {
    html :is(#equipo img, .vm-team-ph, #root img[src*="brochure"], .vm-tmodal-hero img) {
      animation: va-foto linear both; animation-timeline: view(); animation-range: entry 0% entry 85%;
    }
  }

  /* — lectura: los párrafos destacados se van "encendiendo" línea a línea mientras bajás — */
  @keyframes va-lee { to { background-position: 0 0; } }
  @supports (animation-timeline: view()) {
    html .va-lee {
      background-image: linear-gradient(180deg, currentColor 0 46%, color-mix(in srgb, currentColor 24%, transparent) 54% 100%);
      background-size: 100% 220%; background-position: 0 100%; background-repeat: no-repeat;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      animation: va-lee linear both; animation-timeline: view(); animation-range: entry 15% entry 100%;
    }
  }

  /* — cortina: al cambiar de página, la nueva sube como un telón — */
  @keyframes va-telon-entra { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  @keyframes va-telon-sale { to { transform: translateY(-6%); opacity: .5; } }
  html::view-transition-new(root) { animation: va-telon-entra .75s cubic-bezier(.76,0,.24,1) both; }
  html::view-transition-old(root) { animation: va-telon-sale .75s cubic-bezier(.76,0,.24,1) both; }

  /* — logos: una cinta continua con las empresas, frena al pasar el mouse — */
  @keyframes va-cinta { from { transform: translateX(calc(var(--va-n) * var(--va-s) - var(--va-s))); } to { transform: translateX(calc(-1 * var(--va-s))); } }
  html .va-cinta {
    position: relative !important; display: block !important; overflow: hidden !important;
    min-height: calc(var(--va-top) + var(--va-h) + 6px) !important; scroll-snap-type: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  html .va-cinta::scroll-marker-group { display: none !important; }
  html .va-cinta-fila { position: static !important; display: block !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  html .va-cinta-item {
    position: absolute !important; left: 0 !important; top: var(--va-top) !important; margin: 0 !important;
    width: calc(var(--va-s) - 24px) !important; flex: none !important;
    animation: va-cinta calc(var(--va-n) * 3.4s) linear infinite !important; animation-delay: calc(var(--va-k) * -3.4s) !important;
    opacity: 1 !important;
  }
  html .va-cinta:hover .va-cinta-item { animation-play-state: paused !important; }
}

/* — cursor: un punto que invierte el color de lo que tiene abajo y crece sobre lo que se puede tocar (sólo compu) — */
.va-cursor { position: fixed; left: 0; top: 0; z-index: 2147483600; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .2s; will-change: transform; }
.va-cursor.sobre { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.va-cursor.foto { mix-blend-mode: normal; background: transparent; border: 1.5px solid #D8B46A; box-shadow: 0 0 0 1px rgba(11,21,32,.25); }
.va-cursor.texto { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; }
html.va-cursor-listo, html.va-cursor-listo * { cursor: none !important; }
html.va-cursor-listo :is(input, textarea, select, [contenteditable]) { cursor: text !important; }

/* — magnético: los botones se corren levemente hacia el mouse (sólo compu) — */
html.va-op-magnetico .va-boton { transition: translate .35s cubic-bezier(.2,.8,.2,1), transform .25s, background-color .25s, color .25s, border-color .25s !important; }

/* — grano: textura finísima tipo fotografía analógica sobre todo el sitio — */
html.va-op-grano body::after {
  content: ""; position: fixed; inset: -50%; z-index: 2147482000; pointer-events: none; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes va-grano { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(2%,2%); } }
  html.va-op-grano body::after { animation: va-grano .9s steps(4) infinite; }
}

/* nombres de las empresas en la cinta: legibles y completos (se permite partir en líneas) */
html .va-cinta-item :is(figcaption, .vm-client-n, div, span):not(:has(img)) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; max-height: none !important; }
html .va-cinta-item figcaption, html .va-cinta-item .vm-client-n { color: var(--inkSoft) !important; opacity: 1 !important; line-height: 1.45 !important; }

/* ==========================================================================
 * OPCIÓN «luz» · halo suave que sigue al mouse y aclara apenas las superficies oscuras.
 * Un solo elemento fijo con mezcla «screen»: sólo aclara (sobre blanco no se nota) y se
 * enciende únicamente cuando el puntero está sobre un fondo oscuro (lo decide estudio-2026.js).
 * ========================================================================== */
.va-luz-foco {
  position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  pointer-events: none; z-index: 9990; mix-blend-mode: screen; opacity: 0; transition: opacity .55s ease;
  background: radial-gradient(closest-side, rgba(232,222,200,.15), rgba(232,222,200,.065) 45%, rgba(232,222,200,.02) 72%, rgba(232,222,200,0) 100%);
  will-change: transform, opacity;
}
.va-luz-foco.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .va-luz-foco { display: none; } }