/* ═══════════════════════════════════════════════════════════════════════════
   VIVENTA · CHROME DEL SITIO — navegación y pie de página
   Extraído del Module.css del rediseño (sitio-final/razor/Module.css), que se
   escribió como una landing de una sola pieza. Aquí viven únicamente el nav y
   el footer, porque en Oqtane el chrome es del TEMA y se pinta en todas las
   páginas; el resto de secciones se queda en el módulo del home.

   Convive con Theme.css sin pisarlo: aquel usa el prefijo `vnt-` y este `vv-`.
   Theme.css se deja intacto a propósito — sus reglas de nav/footer quedan
   muertas, pero `.vnt-btn` sigue vivo en varios módulos HtmlText del sitio.

   Al modificar este archivo, sube el ?v= en ThemeInfo.cs (cache-busting).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍAS
   Las fuentes viven junto a este archivo, en …/Modules/ViventaComercial.Landing/fonts/
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "LT Wave";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("fonts/LTWave-Bold.otf") format("opentype");
}

@font-face {
    font-family: "PP Pangram Sans";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("fonts/PPPangramSans-Medium.otf") format("opentype");
}

@font-face {
    font-family: "PP Pangram Sans";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("fonts/PPPangramSans-Semibold.otf") format("opentype");
}

@font-face {
    font-family: "PP Pangram Sans";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("fonts/PPPangramSans-Bold.otf") format("opentype");
}

/* ───────────────────────────────────────────────────────────────────────────
   TOKENS
   En el módulo estos tokens cuelgan de `.vv-landing`. El nav y el footer viven
   fuera de ese contenedor, así que aquí suben a :root. El prefijo --vv- es
   exclusivo de este diseño: no colisiona con los --vnt- de Theme.css.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Paleta */
    --vv-blanco:        #FFFFFF;
    --vv-rosa:          #E60D6F;
    --vv-rosa-oscuro:   #C70A60;
    --vv-rosa-suave:    #FFEDF4;
    --vv-rosa-pastel:   #F2A2C6;
    --vv-rosa-aro:      #F5B4CC;
    --vv-navy:          #2A2D52;
    --vv-navy-profundo: #161A33;
    --vv-navy-noche:    #0F1226;
    --vv-menta:         #00DDB8;
    --vv-menta-oscura:  #00A98C;
    --vv-menta-activa:  #00C4A3;
    --vv-menta-fondo:   #EBFFFB;
    --vv-menta-texto:   #0E4438;
    --vv-amarillo:      #FFEB37;
    --vv-lila:          #7C94FA;
    --vv-whatsapp:       #25D366;
    --vv-whatsapp-hover: #1EBE5A;
    --vv-whatsapp-oscuro:#075E54;
    --vv-whatsapp-fondo: #ECE5DD;

    /* Grises */
    --vv-gris-100: #FCFCFD;
    --vv-gris-150: #FAF7F2;
    --vv-gris-200: #F7F7FA;
    --vv-gris-250: #F2F2F5;
    --vv-gris-300: #EFEFF4;
    --vv-gris-350: #ECECF1;
    --vv-gris-400: #E4E4EA;
    --vv-gris-450: #E0E0E8;
    --vv-gris-500: #EDE7DC;
    --vv-gris-600: #A8AAB8;
    --vv-gris-700: #8A8C9E;
    --vv-gris-800: #7A7C90;
    --vv-gris-900: #5C5E73;

    /* Tipografía */
    --vv-display: "LT Wave", system-ui, sans-serif;
    --vv-texto:   "PP Pangram Sans", system-ui, sans-serif;

    /* Layout */
    --vv-ancho:   1240px;
    --vv-margen:  40px;

    /* Curvas y transiciones */
    --vv-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --vv-ease-back:  cubic-bezier(0.34, 1.44, 0.52, 1);
    --vv-transicion: background-color 160ms ease, color 160ms ease,
                     border-color 160ms ease, box-shadow 240ms ease,
                     transform 200ms var(--vv-ease);

    /* Marquesinas: la duración se calcula para que la velocidad aparente sea
       ~86 px/s con la pista duplicada (translateX(-50%)). */
    --vv-marquesina-duracion: 17s;
    --vv-medios-duracion:     20s;
}

/* ───────────────────────────────────────────────────────────────────────────
   BASE · envoltorio .vv-landing (lo comparten chrome y secciones)
   Los tokens --vv-* ya están en :root (chrome.css). Aquí queda lo que en el
   módulo original eran las propiedades de layout del contenedor, más el reset.
   ─────────────────────────────────────────────────────────────────────────── */

.vv-landing {
    width: 100%;
    margin: 0 auto;
    background: var(--vv-blanco);
    position: relative;
    overflow: hidden;
    font-family: var(--vv-texto);
    color: var(--vv-navy);
    -webkit-font-smoothing: antialiased;

    /* El diseño no declara line-height en ninguna parte: todo cuenta con el
       `normal` del navegador y cada bloque pone el suyo donde hace falta. Pero
       Theme.css fija `body { line-height: 1.5 }`, que se hereda aquí dentro y
       engorda cajas ajustadas (los botones salían a 77px en vez de 73px). */
    line-height: normal;
}

.vv-landing *,
.vv-landing *::before,
.vv-landing *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.vv-landing a {
    text-decoration: none;
    transition: var(--vv-transicion);
}

/* El color por defecto se limita a los enlaces sin clase: un selector de tipo
   (.vv-landing a → 0-1-1) tendría más especificidad que cualquier clase BEM
   (.vv-footer__enlace → 0-1-0) y pisaría el color de los bloques. */
.vv-landing a:not([class]) {
    color: var(--vv-rosa);
}

.vv-landing a:not([class]):hover {
    color: var(--vv-rosa-oscuro);
}

.vv-landing button,
.vv-landing input,
.vv-landing select,
.vv-landing textarea {
    font-family: var(--vv-texto);
    transition: var(--vv-transicion);
}

.vv-landing button:active {
    transform: scale(0.975);
}

.vv-landing img,
.vv-landing iframe {
    max-width: 100%;
}

.vv-landing ::selection {
    background: var(--vv-rosa);
    color: var(--vv-blanco);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE REUTILIZABLE · BOTÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: none;
    border-radius: 999px;
    font-family: var(--vv-texto);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--vv-transicion);
}

.vv-boton__icono {
    flex-shrink: 0;
}

/* — Variantes de color — */

.vv-boton--primario {
    background: var(--vv-rosa);
    color: var(--vv-blanco);
    box-shadow: 0 6px 18px rgba(230, 13, 111, 0.28);
}

.vv-boton--primario:hover {
    background: var(--vv-rosa-oscuro);
    color: var(--vv-blanco);
}

.vv-boton--contorno {
    background: var(--vv-blanco);
    color: var(--vv-rosa);
    border: 1.5px solid var(--vv-rosa);
}

.vv-boton--contorno:hover {
    background: var(--vv-rosa);
    color: var(--vv-blanco);
}

.vv-boton--fantasma {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vv-blanco);
    border: 1.5px solid rgba(255, 255, 255, 0.32);
}

.vv-boton--fantasma:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--vv-blanco);
}

.vv-boton--menta {
    background: var(--vv-menta);
    color: var(--vv-menta-texto);
    font-size: 17px;
    padding: 19px 36px;
}

.vv-boton--menta:hover {
    background: var(--vv-menta-activa);
    color: var(--vv-menta-texto);
}

/* — Variantes de tamaño — */

.vv-boton--compacto {
    font-size: 14px;
    padding: 11px 22px;
    gap: 8px;
}

.vv-boton--mediano {
    font-size: 16px;
    padding: 17px 32px;
    gap: 11px;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(230, 13, 111, 0.3);
}

.vv-boton--grande {
    font-size: 19px;
    padding: 24px 46px;
    gap: 14px;
}

.vv-boton--primario.vv-boton--grande {
    box-shadow: 0 16px 40px rgba(230, 13, 111, 0.48);
}

.vv-boton--bloque {
    width: 100%;
    font-size: 15.5px;
    padding: 17px 30px;
    gap: 10px;
}

.vv-boton--primario.vv-boton--bloque {
    box-shadow: 0 10px 26px rgba(230, 13, 111, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-nav {
    position: sticky;
    top: 0;
    z-index: 300;
    border-bottom: 1px solid var(--vv-gris-350);
}

/* El cristal esmerilado del diseño va en un ::before y no en .vv-nav a
   propósito: `backdrop-filter` crea bloque contenedor para los descendientes
   `position: fixed`, y el offcanvas del <ControlPanel /> de Oqtane cuelga de
   .vv-nav__admin. Con el filtro en .vv-nav, el panel de administración se
   posicionaba contra el nav en vez de contra la ventana y salía recortado a
   sus 76px de alto. En el pseudo-elemento el efecto se ve igual y .vv-nav
   deja de atrapar nada.

   Lo mismo valdría para `transform` o `filter`: no ponerlos en .vv-nav. */
.vv-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.vv-nav__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    padding: 0 var(--vv-margen);
    height: 76px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.vv-nav__logo {
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.vv-nav__menu {
    display: flex;
    gap: 30px;
    align-items: center;
    flex: 1;
}

.vv-nav__enlace {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 15px;
    color: var(--vv-navy);
}

.vv-nav__enlace:hover {
    color: var(--vv-rosa);
}

/* ── Desplegable "Nosotros" (escritorio) ────────────────────────────────────
   Sin JS: abre con :hover y con :focus-within, para que también funcione con
   teclado. Se oculta solo en móvil porque cuelga de .vv-nav__menu, que el
   breakpoint de 1050px ya pone a display:none. */

.vv-nav__desplegable {
    position: relative;
}

.vv-nav__desplegable-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.vv-nav__chevron {
    transition: transform 200ms var(--vv-ease);
}

.vv-nav__desplegable:hover .vv-nav__chevron,
.vv-nav__desplegable:focus-within .vv-nav__chevron {
    transform: rotate(180deg);
}

.vv-nav__desplegable-panel {
    display: none;
    position: absolute;
    /* 28px cubren el hueco entre el texto del enlace y el borde inferior de la
       barra de 76px, para que el panel cuelgue del nav y no lo pise. */
    top: calc(100% + 28px);
    left: 50%;
    transform: translateX(-50%);
    /* Geometría heredada del desplegable anterior (.vnt-nav-dropdown-menu en
       Theme.css): 13rem de ancho, 8px de aire arriba y abajo y ninguno a los
       lados, para que los ítems ocupen el ancho completo del panel. */
    min-width: 13rem;
    padding: 8px 0;
    background: var(--vv-blanco);
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 10;
}

.vv-nav__desplegable:hover .vv-nav__desplegable-panel,
.vv-nav__desplegable:focus-within .vv-nav__desplegable-panel {
    display: block;
}

/* Puente invisible sobre el hueco: sin él el :hover se pierde al bajar el ratón
   desde el enlace hasta el panel y el menú se cierra en el camino. */
.vv-nav__desplegable-panel::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
}

/* Cierre al navegar: la navegación mejorada de Blazor no reemplaza el nav, así
   que tras pulsar un ítem el enlace conserva el foco y el puntero sigue sobre el
   desplegable — ni :hover ni :focus-within se sueltan y el panel queda abierto
   encima de la página nueva. theme.js marca aquí --suprimido al pulsar y lo
   quita al salir el ratón o al volver a entrar el foco.
   Los selectores repiten :hover/:focus-within para empatar en especificidad con
   las reglas de apertura de arriba y ganarles por orden. */
.vv-nav__desplegable--suprimido:hover .vv-nav__desplegable-panel,
.vv-nav__desplegable--suprimido:focus-within .vv-nav__desplegable-panel {
    display: none;
}

.vv-nav__desplegable--suprimido:hover .vv-nav__chevron,
.vv-nav__desplegable--suprimido:focus-within .vv-nav__chevron {
    transform: none;
}

/* Ítems a ancho completo, sin esquinas redondeadas y con un realce de fondo muy
   tenue al pasar: así se veían antes. La tipografía y el navy sí son los tokens
   del rediseño, para que el panel pertenezca a la barra en la que cuelga. */
.vv-nav__desplegable-item {
    display: block;
    padding: .625rem 1.25rem;
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: .875rem;
    color: var(--vv-navy);
    white-space: nowrap;
    transition: color 200ms ease, background-color 200ms ease;
}

.vv-nav__desplegable-item:hover,
.vv-nav__desplegable-item.vv-nav__enlace--activo {
    color: var(--vv-rosa);
    background: rgba(230, 13, 111, 0.05);
}

.vv-nav__acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.vv-nav__favoritos {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 14px;
    color: var(--vv-navy);
    cursor: pointer;
}

.vv-nav__icono {
    color: var(--vv-navy);
}

/* Conmutador de moneda COP / USD */
.vv-nav__monedas {
    display: flex;
    background: var(--vv-gris-250);
    border-radius: 999px;
    padding: 3px;
}

.vv-nav__moneda {
    background: transparent;
    border-radius: 999px;
    padding: 6px 13px;
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--vv-gris-800);
    cursor: pointer;
    transition: var(--vv-transicion);
}

.vv-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: none;
    border-radius: 12px;
    background: var(--vv-gris-250);
    cursor: pointer;
}

.vv-nav__burger-linea {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--vv-navy);
    transition: transform 240ms var(--vv-ease), opacity 160ms ease;
}

/* Las tres líneas se convierten en una X cuando el menú está abierto */
.vv-nav__burger--activo .vv-nav__burger-linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vv-nav__burger--activo .vv-nav__burger-linea:nth-child(2) { opacity: 0; }
.vv-nav__burger--activo .vv-nav__burger-linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegable en pantallas pequeñas */
.vv-nav__sheet {
    display: none;
    border-top: 1px solid var(--vv-gris-350);
    background: var(--vv-blanco);
    padding: 14px 20px 20px;
    flex-direction: column;
}

.vv-nav__sheet--abierto {
    display: flex;
}

.vv-nav__sheet-enlace {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 16px;
    color: var(--vv-navy);
    padding: 14px 0;
    border-bottom: 1px solid #F5F5F8;
}

.vv-nav__sheet-enlace:hover {
    color: var(--vv-rosa);
}

/* ── Acordeón "Nosotros" (menú móvil) ───────────────────────────────────────
   <details> nativo, sin JS. El <summary> imita a .vv-nav__sheet-enlace pero no
   lleva esa clase: theme.js cierra la hoja al pulsarla y aquí hay que abrir el
   submenú, no cerrar el menú. */

.vv-nav__sheet-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #F5F5F8;
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 16px;
    color: var(--vv-navy);
    cursor: pointer;
    list-style: none;
}

/* El triángulo por defecto del <summary> se quita en ambos motores. */
.vv-nav__sheet-resumen::-webkit-details-marker {
    display: none;
}

.vv-nav__sheet-grupo[open] .vv-nav__chevron {
    transform: rotate(180deg);
}

.vv-nav__sheet-subenlaces {
    display: flex;
    flex-direction: column;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 2px solid var(--vv-rosa-aro);
}

.vv-nav__sheet-subenlace {
    font-size: 15px;
    padding: 12px 0;
}

/* El último del submenú no dibuja separador: ya lo cierra el borde del grupo. */
.vv-nav__sheet-subenlaces .vv-nav__sheet-enlace:last-child {
    border-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   PUENTE CON theme.js
   El motor de moneda de theme.js marca el chip activo con la clase `active`
   (ver applyCurrency). El diseño lo expresa con el modificador BEM --activa.
   Se igualan aquí para no tener que tocar theme.js.
   ─────────────────────────────────────────────────────────────────────────── */

/* El wordmark se sirve como SVG inline en lugar de PNG: mismo logotipo, sin
   petición extra y sin depender de rutas del tema. Las reglas del diseño
   asumían un <img> (height + object-fit), así que aquí se le da el width y el
   color que un SVG necesita. */

.vv-nav__logo-enlace {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.vv-nav__logo {
    width: auto;
    color: var(--vv-rosa);
}

.vv-footer__logo {
    width: auto;
    color: var(--vv-blanco);
    display: block;
}

/* Punto al que vuelve la vista tras una navegación mejorada (ver theme.js).
   El margen descuenta los 76px del nav pegajoso más un respiro, para que el
   ancla no quede escondida debajo de la barra. */
[data-vv-anclaje-scroll] {
    scroll-margin-top: 92px;
}

/* Página actual dentro del menú. El diseño no contemplaba estado activo. */

.vv-nav__enlace--activo {
    color: var(--vv-rosa);
    font-weight: 600;
}

/* Disclaimer legal heredado del footer anterior: es texto de cumplimiento. */

.vv-footer__disclaimer {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--vv-texto);
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* theme.js marca el chip elegido con `active`; el diseño lo expresa con
   --activa. Se agrupan para que sean exactamente el mismo estilo. */

.vv-nav__moneda.active,
.vv-nav__moneda--activa {
    background: var(--vv-rosa);
    color: var(--vv-blanco);
}

/* Favoritos en magenta cuando hay alguno guardado. La clase la pone
   paintFavCount() de theme.js sobre [data-vnt-fav-link]; el corazón usa
   stroke="currentColor", así que se tiñe con el texto. */

.vv-nav__favoritos.has-favorites,
.vv-nav__sheet-enlace.has-favorites {
    color: var(--vv-rosa);
}

/* El corazón no hereda: .vv-nav__icono fija su propio color y ese gana sobre
   el del enlace, así que el currentColor del SVG se queda en navy. Hay que
   teñirlo explícitamente en el mismo estado. */

.vv-nav__favoritos.has-favorites .vv-nav__icono {
    color: var(--vv-rosa);
}

/* Badge del contador de favoritos. No viene en el diseño: el sitio ya lo tenía
   y lo alimenta paintFavCount() de theme.js vía [data-vnt-fav-count]. */

.vv-nav__favoritos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--vv-rosa);
    color: var(--vv-blanco);
    font-family: var(--vv-texto);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* El ControlPanel de Oqtane (lápiz/engranaje de administración) se inyecta
   dentro de las acciones del nav; solo lo ve un usuario con permisos. */

.vv-nav__admin {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-footer {
    background: var(--vv-navy-noche);
    padding: 80px var(--vv-margen) 36px;
}

.vv-footer__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.vv-footer__logo {
    height: 28px;
    object-fit: contain;
    margin-bottom: 24px;
}

.vv-footer__contactos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vv-footer__contacto {
    font-family: var(--vv-texto);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 9px;
}

.vv-footer__contacto:hover {
    color: var(--vv-blanco);
}

.vv-footer__contacto-icono {
    color: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-footer__columna-titulo {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
}

.vv-footer__enlaces {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vv-footer__enlace {
    font-family: var(--vv-texto);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.6);
}

.vv-footer__enlace:hover {
    color: var(--vv-blanco);
}

.vv-footer__oficinas {
    padding: 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.vv-footer__oficinas .vv-footer__columna-titulo {
    margin-bottom: 18px;
}

.vv-footer__oficinas-lista {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vv-footer__oficina {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 14px;
    color: var(--vv-blanco);
}

.vv-footer__oficina:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--vv-blanco);
}

.vv-footer__oficina-icono {
    color: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-footer__legal {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.vv-footer__legal-texto {
    font-family: var(--vv-texto);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Reglas del chrome extraídas de los media queries del Module.css, donde
   estaban intercaladas con las de las secciones del home.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {

    .vv-nav__contenedor      { gap: 22px; padding: 0 28px; }
    .vv-nav__menu            { gap: 18px; }
    .vv-nav__favoritos       { display: none; }

    .vv-footer__grid         { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 1050px) {

    .vv-nav__menu   { display: none; }
    .vv-nav__burger { display: flex; }

    /* El menú llevaba flex:1 y era lo que empujaba las acciones a la derecha.
       Al ocultarlo, sin esto todo el nav se apelmaza contra el logo. */
    .vv-nav__acciones { margin-left: auto; }
}

@media (max-width: 1000px) {

    .vv-footer {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 720px) {

    /* Los botones del diseño son `white-space: nowrap`. En pantallas de
       teléfono hay etiquetas que no caben en una línea —"Conoce más sobre
       nuestro impacto" pide 345px y su tarjeta da 282— y se salían de la caja
       y de la pantalla. Se les deja envolver y se les pone tope al ancho del
       contenedor. Sólo actúa cuando no cabe: los que ya entraban en una línea
       se quedan exactamente igual. */
    .vv-boton {
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }

    .vv-nav__contenedor { gap: 12px; padding: 0 16px; }

    /* A este ancho no caben logo + monedas + CTA + burger: el CTA se desbordaba
       y empujaba el burger fuera de pantalla. Se oculta aquí y reaparece al
       final del sheet (.vv-nav__sheet-cta). */
    .vv-nav__acciones > .vv-boton--compacto { display: none; }

    .vv-nav__sheet-cta { margin-top: 18px; }

    .vv-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vv-footer__grid         { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {

    /* A 320px el nav pedía 326px y sacaba barra de scroll horizontal a toda la
       página: logo (118) + monedas (109) + burger (40) más los huecos no caben
       en 288px de contenido. Se aprietan los huecos y el toggle de moneda.
       El hueco vacío de .vv-nav__admin (el ControlPanel, que no pinta nada si
       no eres admin) también contaba 16px. */
    .vv-nav__contenedor { gap: 8px; padding: 0 12px; }
    .vv-nav__acciones   { gap: 10px; }
    .vv-nav__moneda     { padding: 6px 10px; font-size: 12px; }
}



/* El chat cuelga del <body>, fuera de .vv-landing, así que no le llega ni el
   reset ni la base tipográfica. Se le dan aquí las mismas. Sin esto hereda el
   `line-height: 1.5` y el color del body de Theme.css: las cajas salían 4-5px
   más altas que en el diseño y el texto en otro tono de navy.

   Va ANTES del bloque a propósito: `.vv-chat *` y `.vv-chat__cabecera` empatan
   en especificidad (0-1-0), así que si el reset cargara después dejaría todos
   los paddings del diseño en cero. */
.vv-chat {
    font-family: var(--vv-texto);
    color: var(--vv-navy);
    line-height: normal;
}

.vv-chat *,
.vv-chat *::before,
.vv-chat *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/* ═══════════════════════════════════════════════════════════════════════════
   CHAT FLOTANTE (WhatsApp)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-chat {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

/* — Panel de captación → WhatsApp — */

.vv-chat__panel {
    width: 340px;
    background: var(--vv-blanco);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 26px 64px rgba(19, 21, 42, 0.3);
    display: none;
    transform: translateY(12px) scale(0.97);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.34, 1.5, 0.64, 1), opacity 200ms ease;
}

.vv-chat__panel--abierto {
    display: block;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.vv-chat__cabecera {
    background: var(--vv-whatsapp-oscuro);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vv-chat__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vv-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--vv-blanco);
}

.vv-chat__identidad {
    flex: 1;
}

.vv-chat__marca {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 15px;
    color: var(--vv-blanco);
}

.vv-chat__estado {
    font-family: var(--vv-texto);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vv-chat__estado-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vv-whatsapp);
    display: inline-block;
    flex-shrink: 0;
}

.vv-chat__cerrar {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
}

.vv-chat__conversacion {
    background: var(--vv-whatsapp-fondo);
    padding: 20px 18px;
}

.vv-chat__mensaje {
    background: var(--vv-blanco);
    border-radius: 4px 14px 14px 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    max-width: 88%;
}

.vv-chat__mensaje-texto {
    font-family: var(--vv-texto);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--vv-navy);
}

.vv-chat__mensaje-hora {
    font-family: var(--vv-texto);
    font-size: 10.5px;
    color: #9A9CAE;
    text-align: right;
    margin-top: 6px;
}

.vv-chat__formulario {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vv-chat__campo {
    border: 1px solid var(--vv-gris-400);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 14px;
    color: var(--vv-navy);
    background: var(--vv-gris-100);
    outline: none;
}

.vv-chat__campo:focus-visible {
    border-color: var(--vv-whatsapp);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}

.vv-chat__enviar {
    border: none;
    border-radius: 999px;
    background: var(--vv-whatsapp);
    color: var(--vv-blanco);
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.vv-chat__enviar:hover {
    background: var(--vv-whatsapp-hover);
}

.vv-chat__nota {
    font-family: var(--vv-texto);
    font-size: 11px;
    color: var(--vv-gris-600);
    text-align: center;
}

.vv-chat__boton {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--vv-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.44);
    flex-shrink: 0;
    position: relative;
    color: var(--vv-blanco);
    transition: var(--vv-transicion);
}

.vv-chat__boton:hover {
    background: var(--vv-whatsapp-hover);
}

.vv-chat__contador {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vv-amarillo);
    border: 2.5px solid var(--vv-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 11px;
    color: var(--vv-navy);
}


/* El pulso no lo usa el markup por defecto: se activa añadiendo --pulso al
   botón. Se porta con el bloque para no dejarlo a medias. */
@keyframes vv-pulso {
    0%   { box-shadow: 0 14px 36px rgba(230, 13, 111, 0.5), 0 0 0 0 rgba(230, 13, 111, 0.45); }
    70%  { box-shadow: 0 14px 36px rgba(230, 13, 111, 0.5), 0 0 0 26px rgba(230, 13, 111, 0); }
    100% { box-shadow: 0 14px 36px rgba(230, 13, 111, 0.5), 0 0 0 0 rgba(230, 13, 111, 0); }
}

.vv-chat__boton--pulso {
    animation: vv-pulso 2.4s ease-out infinite;
}

/* Añadido sobre el diseño: en el home vive además la StickyBar del sitio, que
   ocupa todo el ancho abajo. Sin esto la burbuja le taparía justo el botón
   "Hablar con un asesor". El JS marca el <body> cuando la barra está visible. */
body.vv-con-barra-fija .vv-chat {
    bottom: 106px;
}

/* El banner de cookies (más abajo, .vv-cookies) también cuelga del <body> y
   es más alto que la burbuja: sin esto la tapa por completo mientras está
   visible (mismo problema que la StickyBar, pero hay que sumar los dos si
   están activos a la vez). Alturas medidas contra el markup real: banner
   ~131px solo, ~237px sumado al empuje de la StickyBar (106px).
   :has() tiene soporte amplio (2023+); donde no lo tenga, la burbuja
   simplemente queda detrás del banner hasta que se cierra — no rompe nada,
   solo no la empuja. */
body:has(.vv-cookies) .vv-chat {
    bottom: 157px;
}

body.vv-con-barra-fija:has(.vv-cookies) .vv-chat {
    bottom: 245px;
}


/* ── Responsive del chat ────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .vv-chat        { right: 16px; bottom: 16px; }
    .vv-chat__panel { width: calc(100vw - 32px); max-width: 340px; }

    body.vv-con-barra-fija .vv-chat { bottom: 96px; }

    /* En mobile el banner de cookies stackea sus tres botones y puede pasar
       de 350px de alto (ver .vv-cookies responsive): empujar la burbuja por
       encima la dejaría flotando a mitad de la pantalla. Se oculta mientras
       el banner esté visible; reaparece sola al aceptar/rechazar/recargar. */
    body:has(.vv-cookies) .vv-chat {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER DE CONSENTIMIENTO DE COOKIES (CookieConsentBanner.razor)
   Barra fija de ancho completo (no un card flotante): icono + copy a la
   izquierda, las tres acciones a la derecha. Cuelga del <body> igual que
   .vv-chat (excepción en Theme.css, regla `body > *:not(...)`) y sube cuando
   la StickyBar global está activa, para apilarse arriba de ella en vez de
   taparla — mismo mecanismo que ya usa .vv-chat con .vv-con-barra-fija.
   Reusa .vv-boton/--primario/--contorno del bloque de arriba para
   Aceptar/Rechazar: no repite esos estilos.
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
}

body.vv-con-barra-fija .vv-cookies {
    bottom: 106px;
}

.vv-cookies__panel {
    display: flex;
    /* flex-start y no center: con el panel de categorías abierto, .vv-cookies__cuerpo
       crece mucho más que el icono y las acciones — centrarlos contra esa altura los
       deja flotando a mitad del bloque en vez de junto al título. */
    align-items: flex-start;
    gap: 24px;
    background: var(--vv-blanco);
    color: var(--vv-navy);
    padding: 20px clamp(20px, 4vw, 56px);
    box-shadow: 0 -8px 30px rgba(19, 21, 42, 0.12);
    font-family: var(--vv-texto);
}

.vv-cookies__icono,
.vv-cookies__acciones {
    margin-top: 4px;
}

.vv-cookies__icono {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vv-rosa-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.vv-cookies__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.vv-cookies__titulo {
    font-family: var(--vv-display);
    font-size: 18px;
    margin: 0 0 4px;
    color: var(--vv-navy);
}

.vv-cookies__texto {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vv-gris-900);
    margin: 0 0 6px;
}

.vv-cookies__enlaces {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.vv-cookies__enlace {
    color: var(--vv-rosa);
    text-decoration: underline;
    font-size: 13px;
    font-weight: 600;
}

.vv-cookies__enlace:hover {
    color: var(--vv-rosa-oscuro);
}

.vv-cookies__separador {
    color: var(--vv-gris-600);
}

.vv-cookies__categorias {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--vv-gris-350);
}

.vv-cookies__categoria-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vv-cookies__categoria-nombre {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--vv-navy);
}

.vv-cookies__categoria-estado {
    font-size: 12px;
    font-weight: 600;
    color: var(--vv-gris-900);
    background: var(--vv-gris-250);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.vv-cookies__categoria-estado--activa {
    color: var(--vv-menta-oscura);
    background: var(--vv-menta-fondo);
}

.vv-cookies__categoria-texto {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--vv-gris-900);
    margin-top: 4px;
}

.vv-cookies__acciones {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 20px;
}

/* Los tres botones son <form> individuales (ver comentario en el .razor sobre
   RenderMode Static); display:contents saca el <form> de la caja para que el
   layout flex trate a sus botones como si fueran hijos directos. */
.vv-cookies__acciones form {
    display: contents;
}

.vv-cookies__configurar {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--vv-texto);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vv-navy);
    text-decoration: underline;
    cursor: pointer;
}

.vv-cookies__configurar:hover {
    color: var(--vv-rosa);
}

@media (max-width: 900px) {
    .vv-cookies__panel {
        flex-wrap: wrap;
    }

    .vv-cookies__acciones {
        flex-basis: 100%;
        justify-content: flex-start;
        padding-left: calc(56px + 24px);
    }
}

@media (max-width: 720px) {
    body.vv-con-barra-fija .vv-cookies {
        bottom: 96px;
    }

    .vv-cookies__panel {
        padding: 18px 20px;
        gap: 14px;
    }

    .vv-cookies__icono {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .vv-cookies__acciones {
        padding-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .vv-cookies__configurar {
        order: 3;
        text-align: center;
    }

    .vv-cookies__boton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vv-chat__boton--pulso { animation: none !important; }
}