/* Viventa Comercial - Theme CSS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* LT Wave — fuente de marca real (títulos), tomada de la guía de diseño. Montserrat queda como fallback. */
@font-face {
  font-family: 'LT Wave';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lt-wave-regular.woff') format('woff');
}
@font-face {
  font-family: 'LT Wave';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lt-wave-bold.woff') format('woff');
}

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

:root {
  --vnt-primary:       #E60064;
  --vnt-primary-hover: #c00556;
  --vnt-dark:          #323755;
  --vnt-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vnt-font-title:    'LT Wave', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vnt-radius-full:   9999px;
  --vnt-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --vnt-shadow-2xl:    0 25px 50px rgba(0,0,0,.25);
  --vnt-max-w:         1440px;
}

html { font-size: 16px; }
body {
  font-family: var(--vnt-font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--vnt-dark);
  background: #ffffff;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}
h1, h2 { font-family: var(--vnt-font-title); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--vnt-primary); outline-offset: 2px; }

/* Oqtane layout overrides - neutralize Bootstrap containers Oqtane injects */
#app, .app { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
/* Oqtane wraps content in container > row > col — reset them so they dont add padding/margin */
main > .container,
main > .container-fluid,
main > .container > .row,
main > .container-fluid > .row {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
main > .container > .row > [class*="col"],
main > .container-fluid > .row > [class*="col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.vnt-container { max-width: var(--vnt-max-w); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 640px)  { .vnt-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .vnt-container { padding-inline: 8rem; } }

/* NAVBAR - guia: bg-white border-b border-gray-100 sticky top-0 z-50 shadow-sm */
.vnt-nav { background: #ffffff; border-bottom: 1px solid #f3f4f6; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* guia: max-w-[1440px] mx-auto px-6 sm:px-8 lg:px-32 h-20 flex items-center justify-between */
.vnt-nav-inner { max-width: var(--vnt-max-w); margin-inline: auto; padding-inline: 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative; }
@media (min-width: 640px)  { .vnt-nav-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .vnt-nav-inner { padding-inline: 8rem; } }

/* guia: flex-shrink-0 height:32px aspectRatio:529/117 */
.vnt-nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.vnt-nav-logo svg { height: 32px; width: auto; }

/* guia: hidden lg:flex items-center gap-8 */
.vnt-nav-links { display: none; list-style: none; align-items: center; gap: 2rem; margin: 0; padding: 0; }
@media (min-width: 1024px) { .vnt-nav-links { display: flex; } }

/* guia: font-medium text-sm text-[#323755] hover:text-[#E60064] flex items-center gap-1.5 */
.vnt-nav-link { font-weight: 500; font-size: .875rem; color: #323755; display: flex; align-items: center; gap: .375rem; transition: color .2s; white-space: nowrap; }
.vnt-nav-link:hover { color: #E60064; }
.vnt-nav-link.active { color: #E60064; }

/* Contador de favoritos del header — pill rosa (#E60064 de la guía), rounded-full.
   Lo pinta theme.js desde localStorage; oculto (hidden) cuando no hay favoritos,
   de modo que el header vuelve a su estado original.
   OJO: la clase se llama vnt-nav-fav-badge, NO vnt-fav-count — ese nombre ya lo
   usa el subtítulo del hero de la página /favoritos (más abajo en este archivo). */
.vnt-nav-fav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; /* el padre .vnt-nav-link es flex: que no encoja el círculo */
    min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem;
    border-radius: 9999px; background: #E60064; color: #ffffff;
    font-family: var(--vnt-font-body);
    font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: 0;
    /* Cifras tabulares: en Inter proporcional el "1" es más angosto que el resto
       y sus bearings son asimétricos, así que el dígito se ve corrido dentro del
       círculo. Con tnum cada cifra ocupa el mismo ancho y va centrada en él. */
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
    text-align: center;
}
.vnt-nav-fav-badge[hidden] { display: none; }
/* Con favoritos guardados el enlace se marca en rosa y el corazón se rellena */
.vnt-nav-link.has-favorites { color: #E60064; }
.vnt-nav-link.has-favorites svg { fill: currentColor; }
/* En el drawer el badge se alinea al extremo derecho del enlace */
.vnt-drawer-nav-link .vnt-nav-fav-badge { margin-left: auto; }

/* Menú desplegable "Nosotros" (desktop) — CSS-only, abre en hover/focus.
   guia: panel blanco rounded-2xl shadow-xl, ítems rosa en hover/activo */
.vnt-nav-dropdown { position: relative; }
.vnt-nav-dropdown-toggle { font-family: var(--vnt-font-body); background: none; border: 0; padding: 0; cursor: pointer; }
.vnt-nav-chevron { transition: transform .2s; }
.vnt-nav-dropdown:hover .vnt-nav-chevron,
.vnt-nav-dropdown:focus-within .vnt-nav-chevron { transform: rotate(180deg); }
.vnt-nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin: 0; padding: .5rem 0; min-width: 13rem; list-style: none;
    background: #ffffff; border: 1px solid #f3f4f6; border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    z-index: 100;
}
.vnt-nav-dropdown:hover .vnt-nav-dropdown-menu,
.vnt-nav-dropdown:focus-within .vnt-nav-dropdown-menu { display: block; }
/* puente invisible para que el mouse no pierda el hover al bajar al panel */
.vnt-nav-dropdown-menu::before { content: ""; position: absolute; top: -.75rem; left: 0; right: 0; height: .75rem; }
.vnt-nav-dropdown-item { display: block; padding: .625rem 1.25rem; font-size: .875rem; color: #323755; text-decoration: none; transition: all .2s; }
.vnt-nav-dropdown-item:hover, .vnt-nav-dropdown-item.active { color: #E60064; background: rgba(230,0,100,.05); }

/* guia: hidden lg:flex items-center gap-4 */
.vnt-nav-actions { display: none; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .vnt-nav-actions { display: flex; } }

/* Botones admin del ControlPanel: fuera del flujo, pegados al borde derecho,
   para no empujar el resto del navbar hacia la izquierda.
   OJO: sin transform/filter aquí — crearían un containing block que confina el
   panel desplegable (position:fixed) de Oqtane y lo dejaría aplastado. El centrado
   vertical se hace con top/bottom + flex. */
.vnt-nav-actions .vnt-controlpanel { position: absolute; right: 1.5rem; top: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; }
.vnt-nav-actions .vnt-controlpanel > telerik-blazor { display: contents; }

/* guia: flex bg-gray-100 rounded-full p-0.5 md:p-1 gap-0.5 md:gap-1 */
.vnt-currency-toggle { display: flex; background: #f3f4f6; border-radius: var(--vnt-radius-full); padding: .125rem; gap: .125rem; }

/* guia: px-2 md:px-5 py-1.5 md:py-2 rounded-full font-semibold text-sm
   active: bg-[#E60064] text-white shadow-md
   normal: text-gray-600 hover:text-gray-900 hover:bg-gray-200 */
.vnt-currency-btn { padding: .375rem .5rem; border-radius: var(--vnt-radius-full); font-family: var(--vnt-font-body); font-weight: 600; font-size: .875rem; border: none; cursor: pointer; transition: all .2s; color: #4b5563; background: transparent; }
@media (min-width: 768px) { .vnt-currency-btn { padding: .5rem 1.25rem; } }
.vnt-currency-btn:hover { color: #111827; background: #e5e7eb; }
.vnt-currency-btn.active { background: #E60064; color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,.1); }

/* guia: flex items-center gap-2 px-6 py-2.5 bg-[#E60064] text-white font-semibold text-sm rounded-full hover:bg-[#c00556] shadow-md */
.vnt-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--vnt-font-body); font-weight: 600; font-size: .875rem; border: none; cursor: pointer; transition: background .2s, color .2s; text-decoration: none; white-space: nowrap; border-radius: var(--vnt-radius-full); }
.vnt-btn-primary { padding: .625rem 1.5rem; background: #E60064; color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.vnt-btn-primary:hover { background: #c00556; color: #ffffff; }
.vnt-btn-lg { padding: 1rem 1.5rem; font-size: 1rem; }

/* guia: lg:hidden p-2 text-[#323755] */
.vnt-nav-hamburger { display: flex; align-items: center; justify-content: center; padding: .5rem; color: #323755; background: none; border: none; cursor: pointer; }
@media (min-width: 1024px) { .vnt-nav-hamburger { display: none; } }

/* guia: fixed inset-0 bg-black/50 z-40 */
.vnt-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }
.vnt-nav-backdrop.open { display: block; }

/* guia: fixed top-0 right-0 bottom-0 w-[85%] max-w-sm bg-white z-50 shadow-2xl */
.vnt-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 85%; max-width: 24rem; background: #ffffff; z-index: 99; box-shadow: var(--vnt-shadow-2xl); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; }
.vnt-nav-drawer.open { transform: translateX(0); }

/* guia: flex items-center justify-between p-6 border-b border-gray-100 */
.vnt-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #f3f4f6; }
.vnt-drawer-header svg { height: 28px; width: auto; }

/* guia: p-2 text-[#323755] hover:bg-gray-100 rounded-full */
.vnt-drawer-close { display: flex; align-items: center; padding: .5rem; color: #323755; background: none; border: none; cursor: pointer; border-radius: var(--vnt-radius-full); transition: background .2s; }
.vnt-drawer-close:hover { background: #f3f4f6; }

/* guia: flex-1 overflow-y-auto py-6 px-6 */
.vnt-drawer-nav { flex: 1; overflow-y: auto; padding: 1.5rem; }
.vnt-drawer-nav-list { list-style: none; display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; }

/* guia: font-medium text-base py-3 px-4 rounded-lg flex items-center gap-3
   active: bg-[#E60064]/10 text-[#E60064] | normal: text-[#323755] hover:bg-gray-50 */
.vnt-drawer-nav-link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; font-weight: 500; font-size: 1rem; color: #323755; transition: all .2s; }
.vnt-drawer-nav-link:hover { background: #f9fafb; }
.vnt-drawer-nav-link.active { background: rgba(230,0,100,.1); color: #E60064; }

/* Menú "Nosotros" en drawer móvil — acordeón <details> sin JS */
.vnt-drawer-dropdown summary { list-style: none; cursor: pointer; justify-content: space-between; }
.vnt-drawer-dropdown summary::-webkit-details-marker { display: none; }
.vnt-drawer-chevron { transition: transform .2s; }
.vnt-drawer-dropdown[open] .vnt-drawer-chevron { transform: rotate(180deg); }
.vnt-drawer-subnav { list-style: none; margin: .25rem 0 .25rem 1rem; padding: 0 0 0 1rem; border-left: 2px solid rgba(230,0,100,.2); display: flex; flex-direction: column; gap: .25rem; }
.vnt-drawer-subnav-link { font-size: .9375rem; }

.chat-with-us{
  color: #ffffff;
  border-radius: 50px;
}
.chat-with-us:hover {
    background: #c00556 !important;
    color: #ffffff !important;
}

/* guia: border-t border-gray-100 p-6 space-y-4 bg-gray-50 */
.vnt-drawer-footer { border-top: 1px solid #f3f4f6; padding: 1.5rem; background: #f9fafb; display: flex; flex-direction: column; gap: 1rem; }
.vnt-drawer-currency-label { font-size: .75rem; color: #4b5563; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

/* guia: flex bg-white rounded-full p-1 gap-1 border border-gray-200 */
.vnt-drawer-currency-toggle { display: flex; background: #ffffff; border-radius: var(--vnt-radius-full); padding: .25rem; gap: .25rem; border: 1px solid #e5e7eb; }

/* guia: flex-1 px-4 py-2.5 rounded-full font-semibold text-sm active:bg-[#E60064] text-white */
.vnt-drawer-currency-btn { flex: 1; padding: .625rem 1rem; border-radius: var(--vnt-radius-full); font-family: var(--vnt-font-body); font-weight: 600; font-size: .875rem; border: none; cursor: pointer; transition: all .2s; color: #4b5563; background: transparent; text-align: center; }
.vnt-drawer-currency-btn:hover { background: #f9fafb; }
.vnt-drawer-currency-btn.active { background: #E60064; color: #ffffff; }

main { display: block; }

/* Eliminate all space after footer — Oqtane injects divs after </footer> */
#blazor-error-ui { display: none !important; height: 0 !important; }
footer ~ *:not(.vv-chat):not([data-vv-barra-global]):not(.offcanvas):not(.offcanvas-backdrop):not(.modal):not(.modal-backdrop) { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
/* .vnt-controlpanel = wrapper del <ControlPanel/> de Oqtane (admin); no ocultarlo.
   .offcanvas/.modal = paneles/diálogos que abre el Control Panel.
   .vv-chat = burbuja flotante de WhatsApp del rediseño; cuelga del <body>
   a propósito para posicionarse contra la ventana.
   [data-vv-barra-global] = barra fija de agendar (US 1160); igual que .vv-chat,
   cuelga del <body> tras el footer para posicionarse contra la ventana. Sin
   esta excepción la mata el display:none de arriba y no se ve nunca.
   .vv-cookies = banner de consentimiento de cookies (CookieConsentBanner.razor);
   va como hermano de <nav> antes de <main>, así que a esta regla no le importa
   su posición, sólo que no es nav/main/footer. Misma razón que .vv-chat: es
   position:fixed y necesita colgar del <body> para posicionarse. */
body > *:not(nav):not(main):not(footer):not(.vv-chat):not(.vv-cookies):not([data-vv-barra-global]):not(.vnt-nav):not(.vnt-nav-backdrop):not(.vnt-nav-drawer):not(.vnt-controlpanel):not(.offcanvas):not(.offcanvas-backdrop):not(.modal):not(.modal-backdrop) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Oqtane pane/container structure — eliminate padding/margin when pane is empty */
main .container,
main .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}
main .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
main .row > [class*="col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Oqtane system messages — hide framework UI messages that appear in panes */
main:empty { display: none; }
/* "You Are Already Signed In" and similar Oqtane auth messages */
main .container:empty,
main .container-fluid:empty { display: none; }

/* Oqtane system divs that appear after footer */
#blazor-error-ui,
.blazor-error-boundary,
[id^="blazor"],
.loading-progress,
.loading-progress-text {
  display: none !important;
}

/* Oqtane admin toolbar & notifications - only hide non-admin elements affecting layout */
.app-notification { display: none; }

/* FOOTER - guia: bg-[#323755] text-white */
.vnt-footer { background: #323755; color: #ffffff; }

/* guia: max-w-[1440px] mx-auto px-6 sm:px-8 lg:px-32 py-16 lg:py-20 pb-24 lg:pb-20 */
.vnt-footer-inner { max-width: var(--vnt-max-w); margin-inline: auto; padding-inline: 1.5rem; padding-top: 4rem; padding-bottom: 6rem; }
@media (min-width: 640px)  { .vnt-footer-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .vnt-footer-inner { padding-inline: 8rem; padding-top: 5rem; padding-bottom: 5rem; } }

/* guia: grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12 */
.vnt-footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
@media (min-width: 768px)  { .vnt-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vnt-footer-grid { grid-template-columns: repeat(5, 1fr); } }

/* guia: lg:col-span-2 */
.vnt-footer-brand { grid-column: span 1; }
@media (min-width: 1024px) { .vnt-footer-brand { grid-column: span 2; } }

/* guia: mb-6 height:32px aspectRatio:529/117 */
.vnt-footer-logo { height: 32px; width: auto; margin-bottom: 1.5rem; display: block; }

/* guia: text-sm text-white/70 mb-6 leading-relaxed */
.vnt-footer-brand > p { font-size: .875rem; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; line-height: 1.625; }

/* guia: space-y-3 */
.vnt-footer-contact { display: flex; flex-direction: column; gap: .75rem; }

/* guia: flex items-center gap-3 text-sm text-white/70 hover:text-white */
.vnt-footer-contact-item { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: rgba(255,255,255,.7); transition: color .2s; }
.vnt-footer-contact-item:hover { color: #ffffff; }
.vnt-footer-contact-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* guia: font-bold text-base text-white mb-4 */
.vnt-footer-col h3 { font-weight: 700; font-size: 1rem; color: #ffffff; margin-bottom: 1rem; }
.vnt-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; }
.vnt-footer-col ul a { font-size: .875rem; color: rgba(255,255,255,.7); transition: color .2s; }
.vnt-footer-col ul a:hover { color: #ffffff; }

/* guia: mb-8 pb-8 border-b border-white/10 */
.vnt-footer-offices { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.vnt-footer-offices h3 { font-weight: 700; font-size: 1rem; color: #ffffff; margin-bottom: 1rem; }

/* guia: flex items-center gap-2 text-sm text-white/70 hover:text-white (es un <a>) */
.vnt-footer-offices-link { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.7); transition: color .2s; text-decoration: none; }
.vnt-footer-offices-link:hover { color: #ffffff; }
.vnt-footer-offices-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* guia: pt-8 border-t border-white/10 flex flex-col lg:flex-row items-center justify-between gap-6 */
.vnt-footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .vnt-footer-bottom { flex-direction: row; justify-content: space-between; } }

/* guia: text-sm text-white/60 */
.vnt-footer-copy { font-size: .875rem; color: rgba(255,255,255,.6); }

/* guia: flex items-center gap-4 */
.vnt-footer-socials { display: flex; align-items: center; gap: 1rem; }

/* guia: w-10 h-10 rounded-full bg-[#E60064] flex items-center justify-center hover:bg-[#c00556] */
.vnt-footer-social { width: 2.5rem; height: 2.5rem; border-radius: var(--vnt-radius-full); background: #E60064; display: flex; align-items: center; justify-content: center; color: #ffffff; transition: background .2s; }
.vnt-footer-social:hover { background: #c00556; color: #ffffff; }
.vnt-footer-social svg { width: 18px; height: 18px; }

/* guia: mt-8 pt-8 border-t border-white/10 text-xs text-white/50 text-center leading-relaxed */
.vnt-footer-disclaimer { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; color: rgba(255,255,255,.5); text-align: center; line-height: 1.625; }

/* ═══════════════════════════════════════════════════════════
   TELERIK BLAZOR — Overrides transversales (todos los módulos)
   guía: C:\Users\Familia\Downloads\Viventa - Comercial 2\src\app\pages\Proyectos.tsx
   ═══════════════════════════════════════════════════════════ */

/* ══ INPUT PILL — NumericTextBox / TextBox ══════════════════
   guia: w-full px-4 py-3 rounded-full border border-gray-200
         font-pangram text-sm focus:ring-2 focus:ring-[#E60064]
   Telerik renderiza: <span class="k-numerictextbox k-input k-input-solid k-input-md k-rounded-md vnt-input-pill">
   ══════════════════════════════════════════════════════════ */
.vnt-input-pill {
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: none !important;
  width: 100% !important;
  /* neutraliza k-input-solid que pone background y border propios */
  background-color: #ffffff !important;
}
/* el inner input donde va el texto */
.vnt-input-pill .k-input-inner,
.vnt-input-pill input.k-input-inner {
  padding: .75rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  color: #323755 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
}
.vnt-input-pill .k-input-inner::placeholder,
.vnt-input-pill input.k-input-inner::placeholder { color: #9ca3af !important; }
/* ocultar spinners — Telerik v14 usa .k-spin-button, también .k-input-spinner */
.vnt-input-pill .k-spin-button,
.vnt-input-pill .k-input-spinner,
.vnt-input-pill .k-numeric-wrap .k-select { display: none !important; }
/* focus ring */
.vnt-input-pill:focus-within {
  border-color: #E60064 !important;
  box-shadow: 0 0 0 2px rgba(230,0,100,.15) !important;
}

/* ══ SEARCH PILL — TextBox con sombra y padding-left para ícono ══
   guia: w-full pl-12 pr-4 py-4 rounded-full bg-white shadow-md
         focus:ring-2 focus:ring-[#E60064]
   ══════════════════════════════════════════════════════════════ */
.vnt-search-pill {
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) !important;
  width: 100% !important;
}
.vnt-search-pill .k-input-inner,
.vnt-search-pill input.k-input-inner {
  padding: 1rem 1rem 1rem 3rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  color: #323755 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
}
.vnt-search-pill .k-input-inner::placeholder,
.vnt-search-pill input.k-input-inner::placeholder { color: #9ca3af !important; }
.vnt-search-pill:focus-within {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(230,0,100,.2), 0 4px 6px rgba(0,0,0,.07) !important;
}

/* ══ SELECT PILL — DropDownList ══════════════════════════════
   guia: w-full px-4 py-3 border border-gray-300 rounded-full
         font-pangram text-sm focus:border-[#E60064]
   Telerik renderiza: <span class="k-dropdownlist k-picker k-picker-solid k-picker-md k-rounded-md vnt-select-pill">
   ══════════════════════════════════════════════════════════ */
.vnt-select-pill {
  border-radius: 9999px !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
}
/* texto seleccionado — guía: py-3 px-4 → altura total ~44px */
.vnt-select-pill .k-input-value-text {
  padding: .625rem 0 .625rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  color: #374151 !important;
  line-height: 1.25 !important;
}
/* neutralizar padding interno extra que Telerik pone en el wrapper .k-input */
.vnt-select-pill .k-input {
  padding: 0 !important;
  height: auto !important;
  min-height: unset !important;
}
/* altura del botón chevron igual que el texto */
.vnt-select-pill .k-button,
.vnt-select-pill .k-input-button {
  padding-top: .625rem !important;
  padding-bottom: .625rem !important;
  align-self: stretch !important;
}
/* botón chevron derecha */
.vnt-select-pill .k-button,
.vnt-select-pill .k-input-button {
  border-radius: 0 9999px 9999px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  padding-right: .75rem !important;
}
.vnt-select-pill .k-button:hover,
.vnt-select-pill .k-input-button:hover { background: transparent !important; color: #374151 !important; }
/* focus */
.vnt-select-pill:focus-within {
  border-color: #E60064 !important;
  box-shadow: none !important;
}
/* disabled */
.vnt-select-pill.k-disabled,
.vnt-select-pill[aria-disabled="true"] {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
.vnt-select-pill.k-disabled .k-input-value-text,
.vnt-select-pill[aria-disabled="true"] .k-input-value-text { color: #9ca3af !important; }

/* variante borde claro para el widget (border-gray-200) */
.vnt-select-pill-light {
  border-color: #e5e7eb !important;
}
.vnt-select-pill-light:focus-within {
  border-color: #E60064 !important;
  box-shadow: 0 0 0 2px rgba(230,0,100,.15) !important;
}

/* Popup/lista del DropDownList — se renderiza en portal fuera del DOM,
   Telerik añade la clase del componente al .k-animation-container via JS.
   Usamos .k-list-item global con alta especificidad. */
.k-animation-container .k-list-item {
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  color: #374151 !important;
  padding: .5rem 1rem !important;
}
.k-animation-container .k-list-item.k-selected,
.k-animation-container .k-list-item.k-state-selected {
  background-color: #E60064 !important;
  color: #ffffff !important;
}
.k-animation-container .k-list-item:hover:not(.k-selected):not(.k-state-selected) {
  background-color: rgba(230,0,100,.06) !important;
  color: #E60064 !important;
}

/* ══ RANGE SLIDER ════════════════════════════════════════════
   guia: dos input[type=range] con accent-[#E60064], track gris h-2
   Telerik: .k-slider-track (fondo gris), .k-slider-selection (relleno rosa),
            .k-draghandle (thumb rosa con borde blanco)
   ══════════════════════════════════════════════════════════ */
.vnt-range-slider { width: 100% !important; }
.vnt-range-slider .k-slider-track {
  background-color: #e5e7eb !important;
  height: .5rem !important;
  border-radius: 9999px !important;
}
.vnt-range-slider .k-slider-selection {
  background-color: #E60064 !important;
  border-radius: 9999px !important;
}
.vnt-range-slider .k-draghandle {
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-color: #E60064 !important;
  border: 3px solid #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 6px rgba(230,0,100,.4) !important;
  top: 50% !important;
  margin-top: -.625rem !important;
}
.vnt-range-slider .k-draghandle:hover,
.vnt-range-slider .k-draghandle:focus {
  background-color: #c00556 !important;
  border-color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(230,0,100,.25) !important;
}
/* ocultar ticks, labels Y botones de flecha < > */
.vnt-range-slider .k-slider-items,
.vnt-range-slider .k-tick { display: none !important; }
.vnt-range-slider .k-button-decrease,
.vnt-range-slider .k-button-increase,
.vnt-range-slider .k-slider-buttons { display: none !important; }
/* compensar espacio que ocupaban las flechas */
.vnt-range-slider .k-slider-track-wrap { margin: 0 !important; }

/* ══ Popup dropdown dentro de modal con overflow ══════════════
   El modal .proy-filter-modal tiene overflow:visible pero Telerik
   por defecto posiciona el popup relativo al scroll container más
   cercano. Forzar position:fixed en el popup lo ancla al viewport. */
.k-animation-container.vnt-dropdown-popup {
  position: fixed !important;
}

/* ══ TelerikRootComponent: neutralizar div extra en flex/grid ══
   TelerikRootComponent inyecta <div class="telerik-blazor">
   dentro de flex/grid. display:contents lo neutraliza. ══════ */
.vnt-telerik-inline { display: contents !important; }
.vnt-telerik-inline > * { display: contents !important; }
/* ========================================= */
/* --- INJECTED MODULE STYLES (BUNDLED) --- */
/* ========================================= */

/* Module: ViventaComercial.MediaPress */
/* ==========================================================================
   MEDIA PRESS – Menciones en medios
   ========================================================================== */

.MediaPress {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--vnt-primary);
  position: relative;
  overflow: hidden;
}

/* ── Background Pattern ──────────────────────────────────────────────────── */

.MediaPress__bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05;
}

.MediaPress__bg-blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  background-color: #ffffff;
  border-radius: 9999px;
  filter: blur(48px);
}

.MediaPress__bg-blob--top {
  top: 0;
  left: 0;
}

.MediaPress__bg-blob--bottom {
  bottom: 0;
  right: 0;
}

/* ── Container ───────────────────────────────────────────────────────────── */

.MediaPress__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.MediaPress__layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}

.MediaPress__heading {
  display: flex;
  align-items: center;
}

.MediaPress__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: #ffffff;
  font-weight: 700;
}

/* ── Carousel Wrapper ────────────────────────────────────────────────────── */

.MediaPress__carousel {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Navigation Buttons ──────────────────────────────────────────────────── */

.MediaPress__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
}

.MediaPress__nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.MediaPress__nav-btn:hover .MediaPress__nav-icon {
  transform: scale(1.1);
}

.MediaPress__nav-icon {
  transition: transform 0.2s ease;
}

.MediaPress__nav-btn--prev {
  left: 0;
  transform: translateY(-50%) translateX(-16px);
}

.MediaPress__nav-btn--next {
  right: 0;
  transform: translateY(-50%) translateX(16px);
}

.MediaPress__slider-wrapper {
  width: 100%;
}

/* Native slider container */
#mediapress-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#mediapress-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ── Slide ───────────────────────────────────────────────────────────────── */

.MediaPress__slide {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.MediaPress__card {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--vnt-shadow-xl);
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.MediaPress__logo-wrapper {
  margin-bottom: 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
}

.MediaPress__logo {
  max-height: 3rem;
  width: auto;
  object-fit: contain;
}

.MediaPress__quote {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.625;
  flex-grow: 1;
}

.MediaPress__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: var(--vnt-primary);
  font-weight: 600;
  margin-top: 1rem;
  text-decoration: none;
}

.MediaPress__card-link:hover {
  color: var(--vnt-primary-hover);
}

.MediaPress__link-icon {
  transition: transform 0.2s ease;
}

.MediaPress__card-link:hover .MediaPress__link-icon {
  transform: translateX(4px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .MediaPress {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .MediaPress__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .MediaPress__slide {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .MediaPress {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .MediaPress__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .MediaPress__layout {
    flex-direction: row;
    gap: 3rem;
  }

  .MediaPress__heading {
    width: 41.666%; /* 5/12 */
  }

  .MediaPress__carousel {
    width: 58.333%; /* 7/12 */
  }

  .MediaPress__title {
    font-size: 2.25rem;
  }

  .MediaPress__slide {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .MediaPress__card {
    padding: 2.5rem;
  }

  .MediaPress__quote {
    font-size: 1.125rem;
  }

  .MediaPress__nav-btn--prev {
    transform: translateY(-50%) translateX(-24px);
  }

  .MediaPress__nav-btn--next {
    transform: translateY(-50%) translateX(24px);
  }
}


/* Module: ViventaComercial.FeaturedProjects */
/* ==========================================================================
   FEATURED PROJECTS – Proyectos destacados
   ========================================================================== */

.Projects {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #ffffff;
}

.Projects__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.Projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.Projects__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: var(--vnt-dark);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.Projects__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1.125rem;
  color: #374151;
}

.Projects__link {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--vnt-primary);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.Projects__link:hover {
  background-color: rgba(230, 0, 100, 0.05);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.Projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.Projects__card {
  background-color: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
}

.Projects__card:hover {
  box-shadow: var(--vnt-shadow-2xl);
  transform: translateY(-8px);
}

/* ── Card Image ──────────────────────────────────────────────────────────── */

.Projects__card-image-wrapper {
  position: relative;
  height: 16rem;
  overflow: hidden;
}

.Projects__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.Projects__card:hover .Projects__card-image {
  transform: scale(1.1);
}

/* ── Verified Badge ──────────────────────────────────────────────────────── */

.Projects__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  box-shadow: var(--vnt-shadow-lg);
}

.Projects__badge-icon {
  color: #16a34a;
}

.Projects__badge-text {
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--vnt-dark);
}

/* ── Card Body ───────────────────────────────────────────────────────────── */

.Projects__card-body {
  padding: 1.5rem;
}

/* ── Location ────────────────────────────────────────────────────────────── */

.Projects__location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.Projects__location-icon {
  color: #6b7280;
}

.Projects__location-text {
  font-family: var(--vnt-font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
}

/* ── Name ────────────────────────────────────────────────────────────────── */

.Projects__name {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--vnt-dark);
  margin-bottom: 1rem;
}

/* ── Features ────────────────────────────────────────────────────────────── */

.Projects__features {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.Projects__feature {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.Projects__feature-icon {
  color: #6b7280;
}

.Projects__feature-text {
  font-family: var(--vnt-font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: #1f2937;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.Projects__pricing {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.Projects__monthly {
  background: linear-gradient(to right, rgba(230, 0, 100, 0.05), transparent);
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.Projects__monthly-label {
  font-family: var(--vnt-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vnt-primary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.Projects__monthly-value {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--vnt-primary);
  margin-top: 0.25rem;
}

.Projects__reserve {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Projects__reserve-label {
  font-family: var(--vnt-font-body);
  font-size: 0.75rem;
  color: #374151;
}

.Projects__reserve-value {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--vnt-dark);
}

/* ── Card CTA ────────────────────────────────────────────────────────────── */

.Projects__card-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--vnt-primary);
  color: var(--vnt-primary);
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.Projects__card-cta:hover {
  background-color: var(--vnt-primary);
  color: #ffffff;
}

/* ── Mobile CTA ──────────────────────────────────────────────────────────── */

.Projects__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  background-color: var(--vnt-primary);
  border-radius: 9999px;
  text-decoration: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Projects {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .Projects__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .Projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .Projects {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .Projects__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .Projects__title {
    font-size: 2.25rem;
  }

  .Projects__link {
    display: inline-flex;
  }

  .Projects__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .Projects__mobile-cta {
    display: none;
  }
}


/* Module: ViventaComercial.Proyectos */
/* ═══════════════════════════════════════════════════════════
   Viventa Comercial — Módulo Proyectos
   Estilos copiados EXACTAMENTE de Proyectos.tsx (guía de referencia)
   ═══════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
/* bg-gradient-to-br from-[#323755] to-[#1a1d2e] py-12 */
.proy-hero {
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  padding: 3rem 0;
  color: white;
}

/* flex flex-col items-start gap-4 */
.proy-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* text-3xl sm:text-4xl lg:text-5xl font-bold — guía: 1.875/2.25/3rem */
.proy-hero-title,
section.proy-hero h1,
.proy-hero h1.proy-hero-title {
  font-family: 'LT Wave', 'Montserrat', -apple-system, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1.2 !important;
  margin: 0 0 .75rem !important;
}

@media (min-width: 640px) {
  .proy-hero-title,
  section.proy-hero h1,
  .proy-hero h1.proy-hero-title { font-size: 2.25rem !important; }
}
@media (min-width: 1024px) {
  .proy-hero-title,
  section.proy-hero h1,
  .proy-hero h1.proy-hero-title { font-size: 3rem !important; }
}

/* text-base sm:text-lg text-white/80 max-w-2xl */
.proy-hero-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.80);
  max-width: 42rem;
  margin: 0;
}

@media (min-width: 640px) { .proy-hero-subtitle { font-size: 1.125rem; } }

/* flex flex-col sm:flex-row gap-3 */
.proy-hero-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .5rem;
}

@media (min-width: 640px) { .proy-hero-actions { flex-direction: row; } }

/* Botón primario: px-6 py-3 bg-[#E60064] text-white font-semibold text-sm rounded-full */
.proy-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  background: #E60064;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  transition: background .2s;
}

.proy-btn-primary:hover { background: #c00556; color: white; }

/* Botón outline blanco: px-6 py-3 bg-transparent border-2 border-white text-white rounded-full */
.proy-btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

.proy-btn-outline-white:hover { background: rgba(255,255,255,.10); color: white; }

/* ── LOGOS BANCOS — CARRUSEL AUTOMÁTICO ──────────────────── */
/* bg-white py-6 border-b border-gray-100 */
.proy-banks {
  background: white;
  padding: 1.5rem 0;
  border-bottom: 1px solid #f3f4f6;
  overflow: hidden;
}

/* grid grid-cols-1 lg:grid-cols-4 gap-8 items-center */
.proy-banks-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 640px)  { .proy-banks-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .proy-banks-inner { padding: 0 5rem; grid-template-columns: auto 1fr; } }

/* text-sm text-gray-600 hidden lg:block */
.proy-banks-label {
  font-size: .875rem;
  color: #4b5563;
  display: none;
  white-space: nowrap;
}

@media (min-width: 1024px) { .proy-banks-label { display: block; } }

.proy-banks-carousel {
  overflow: hidden;
  position: relative;
}

/* CSS marquee infinito — idéntico a react-slick autoplay continuo */
.proy-banks-track {
  display: flex;
  gap: 3rem;
  align-items: center;
  animation: vnt-marquee 22s linear infinite;
  width: max-content;
}

.proy-banks-track:hover { animation-play-state: paused; }

@keyframes vnt-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* h-12 flex items-center justify-center */
.proy-bank-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  flex-shrink: 0;
}

/* max-h-10 w-auto object-contain filter grayscale opacity-60 hover:grayscale-0 hover:opacity-100 */
.proy-bank-logo img {
  max-height: 2.5rem;
  width: auto;
  object-fit: contain;
  transition: filter .3s ease;
}

.proy-bank-logo:hover img { filter: grayscale(0%) opacity(1); }

/* ── WIDGET ¿CUÁNTO PUEDO PAGAR? ─────────────────────────── */
/* py-8 bg-gradient-to-b from-white to-gray-50 */
.proy-widget-section {
  padding: 2rem 0;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

/* bg-white rounded-2xl shadow-lg p-6 border border-gray-100 */
.proy-widget {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
}

/* flex flex-col lg:flex-row items-center gap-6 */
.proy-widget-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) { .proy-widget-inner { flex-direction: row; } }

/* flex items-center gap-3 */
.proy-widget-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

/* w-12 h-12 rounded-full bg-[#E60064]/10 flex items-center justify-center */
.proy-widget-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(230,0,100,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E60064;
  flex-shrink: 0;
}

/* font-bold text-base text-[#323755] */
.proy-widget-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  margin: 0;
}

/* text-sm text-gray-600 */
.proy-widget-subtitle {
  font-size: .875rem;
  color: #4b5563;
  margin: 0;
}

/* flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4 */
.proy-widget-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) { .proy-widget-fields { grid-template-columns: 1fr 1fr; } }

/* text-xs text-gray-600 mb-1 block */
.proy-widget-label {
  font-size: .75rem;
  color: #4b5563;
  margin-bottom: .25rem;
  display: block;
  font-family: 'Inter', sans-serif;
}

/* w-full px-4 py-3 rounded-full border border-gray-200 text-sm focus:ring-2 focus:ring-[#E60064] */
.proy-widget-input {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: white;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #323755;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow .2s, border-color .2s;
}

.proy-widget-input:focus {
  border-color: #E60064;
  box-shadow: 0 0 0 2px rgba(230,0,100,.15);
}

/* select igual que input pero con flecha */
.proy-widget-select {
  width: 100%;
  padding: .75rem 2.5rem .75rem 1rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right .75rem center;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #323755;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: box-shadow .2s, border-color .2s;
}

.proy-widget-select:focus {
  border-color: #E60064;
  box-shadow: 0 0 0 2px rgba(230,0,100,.15);
}

/* ── BARRA BÚSQUEDA + FILTROS ──────────────────────────────── */
/* py-6 bg-gray-50 border-y border-gray-100 */
.proy-search-section {
  padding: 1.5rem 0;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

/* flex flex-col sm:flex-row items-stretch gap-4 */
.proy-search-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) { .proy-search-bar { flex-direction: row; align-items: stretch; } }

.proy-search-input-wrap {
  position: relative;
  flex: 1;
}

.proy-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 2;
}

/* pl-12 pr-4 py-4 rounded-full bg-white text-[#323755] shadow-md focus:ring-2 focus:ring-[#E60064] */
.proy-search-native {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 9999px;
  border: none;
  background: white;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #323755;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  outline: none;
  box-sizing: border-box;
  transition: box-shadow .2s;
}

.proy-search-native::placeholder { color: #9ca3af; }
.proy-search-native:focus { box-shadow: 0 0 0 2px rgba(230,0,100,.20), 0 4px 6px rgba(0,0,0,.07); }

/* px-6 py-4 bg-[#E60064] text-white font-semibold text-base rounded-full shadow-md */
.proy-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.5rem;
  background: #E60064;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: background .2s;
}

.proy-filter-btn:hover { background: #c00556; }

/* ── MODAL FILTROS ───────────────────────────────────────── */
/* fixed inset-0 bg-black/50 z-40 */
.proy-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.50);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* w-[90%] max-w-4xl max-h-[85vh] bg-white rounded-2xl shadow-2xl
   SIN overflow en el contenedor raíz — Telerik calcula la posición del popup
   relativa al primer ancestro con overflow, si este modal tiene overflow:auto
   el popup aparece desplazado. El scroll se pone solo en .proy-filter-body */
.proy-filter-modal {
  background: white;
  border-radius: 1rem;
  width: 90%;
  max-width: 56rem;
  max-height: 85vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  padding: 1.5rem;
}

@media (min-width: 1024px) { .proy-filter-modal { padding: 2rem; } }

/* flex items-center justify-between mb-6 */
.proy-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* font-bold text-xl text-[#323755] */
.proy-filter-header h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #323755;
  margin: 0;
}

/* p-2 hover:bg-gray-100 rounded-full */
.proy-filter-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #374151;
  padding: .5rem;
  border-radius: 9999px;
  transition: background .2s;
  display: flex;
}

.proy-filter-close:hover { background: #f3f4f6; }

/* space-y-6 */
.proy-filter-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* grid grid-cols-1 md:grid-cols-2 gap-6 */
.proy-filter-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) { .proy-filter-grid-2 { grid-template-columns: 1fr 1fr; } }

/* grid grid-cols-1 md:grid-cols-3 gap-6 */
.proy-filter-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) { .proy-filter-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* font-semibold text-sm text-[#323755] mb-2 block */
.proy-filter-field > label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: #323755;
  margin-bottom: .5rem;
  display: block;
}

/* w-full px-4 py-3 border border-gray-300 rounded-full text-sm focus:border-[#E60064] */
.proy-filter-select {
  width: 100%;
  padding: .75rem 2.5rem .75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right .75rem center;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .2s;
}

.proy-filter-select:focus { border-color: #E60064; outline: none; }
.proy-filter-select:disabled { background-color: #f3f4f6; cursor: not-allowed; color: #9ca3af; }

/* Precio */
.proy-filter-price-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: #323755;
  margin-bottom: .75rem;
  display: block;
}

/* guía: flex items-center justify-between mb-4 */
.proy-filter-price-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* font-bold text-lg text-[#E60064] */
.proy-price-val {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #E60064;
}

/* text-sm text-gray-600 */
.proy-price-sep { font-size: .875rem; color: #4b5563; }

/* guía: space-y-3 — dos sliders separados */
.proy-filter-price-sliders {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* guía: text-xs text-gray-500 mb-1 block */
.proy-price-row-label {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  color: #6b7280;
  margin-bottom: .25rem;
  display: block;
}

/* range slider: h-2 bg-gray-200 rounded-lg accent-[#E60064] */
.proy-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .5rem;
  border-radius: 9999px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
  accent-color: #E60064;
}

.proy-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #E60064;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(230,0,100,.4);
  cursor: pointer;
}

.proy-range-label {
  font-size: .75rem;
  color: #6b7280;
  margin-bottom: .25rem;
  display: block;
}

/* flex gap-3 mt-6 */
.proy-filter-footer {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* px-6 py-3 border border-gray-300 text-gray-700 font-semibold text-sm rounded-full */
.proy-btn-outline-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 1px solid #d1d5db;
  color: #374151;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s;
}

.proy-btn-outline-gray:hover { background: #f9fafb; }

/* ── GRID DE PROYECTOS ───────────────────────────────────── */
/* py-6 sm:py-8 */
.proy-grid-section {
  padding: 1.5rem 0 4rem;
  background: #F8FAFC;
}

/* font-medium text-lg text-[#323755] mb-1 */
.proy-grid-count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  color: #323755;
  margin: 0 0 .25rem;
}

/* flex items-center gap-2 text-sm */
.proy-grid-social-proof {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: #4b5563;
  margin-bottom: 2rem;
}

.proy-grid-social-proof svg { color: #E60064; }
.proy-grid-social-proof strong { font-weight: 700; color: #E60064; }

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 */
.proy-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px)  { .proy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proy-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── CARD ────────────────────────────────────────────────── */
/* bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl hover:-translate-y-2 border border-gray-100 */
.proy-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  border: 1px solid #f3f4f6;
  transition: box-shadow .3s ease, transform .3s ease;
}

.proy-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  transform: translateY(-.5rem);
}

/* relative h-56 overflow-hidden */
.proy-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 14rem;
}

/* w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 */
.proy-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.proy-card:hover .proy-card-img { transform: scale(1.10); }

/* Wrapper posicionado absolute para contener badge + tooltip */
.proy-badge-verified-wrap {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* El botón badge Verificado */
.proy-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .625rem;
  border-radius: 9999px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .75rem;
  background: rgba(255,255,255,.95);
  color: #323755;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  cursor: pointer;
  transition: background-color .2s;
}

.proy-badge-verified:hover { background: white; }

/* CheckCircle2 — verde; Info — gris */
.proy-badge-verified .icon-check { color: #16a34a; flex-shrink: 0; }
.proy-badge-verified .icon-info  { color: #9ca3af; flex-shrink: 0; }

/* Texto "Verificado" oculto en móvil < 640px, visible en sm+ */
@media (max-width: 639px) { .proy-badge-verified .hidden-xs { display: none; } }

/* Tooltip azul oscuro que aparece debajo del badge al hacer click */
.proy-verified-tooltip {
  margin-top: .5rem;
  background: #323755;
  color: white;
  border-radius: .5rem;
  padding: .75rem;
  font-size: .75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  width: 16rem;
}

/* p-6 */
.proy-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}

/* flex items-center gap-2 mb-3 */
.proy-card-location {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .875rem;
  color: #4b5563;
}

.proy-card-location svg { color: #9ca3af; flex-shrink: 0; }

/* font-bold text-xl text-[#323755] mb-4 */
.proy-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #323755;
  margin: 0;
  line-height: 1.3;
}

/* flex items-center gap-4 mb-4 pb-4 border-b border-gray-100 */
.proy-card-features {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
  flex-wrap: wrap;
}

/* flex items-center gap-1.5 font-medium text-sm text-gray-700 */
.proy-card-feature {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .875rem;
  color: #374151;
}

.proy-card-feature svg { color: #9ca3af; width: 1.125rem; height: 1.125rem; }

/* Wrapper ml-auto con posición relativa para contener tooltip */
.proy-type-badge-wrap {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Botón badge VIS / No VIS / VIP */
.proy-type-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border-radius: 9999px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  background: #E60064;
  color: white;
  cursor: pointer;
  transition: background-color .2s;
}

.proy-type-badge:hover { background: #c00556; }

/* Tooltip azul oscuro debajo del badge */
.proy-type-tooltip {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: 16rem;
  background: #323755;
  color: white;
  border-radius: .5rem;
  padding: .75rem;
  font-size: .75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  z-index: 20;
}

/* Desde + precio */
.proy-card-desde { font-family: 'Inter', sans-serif; font-size: .75rem; color: #6b7280; }

/* font-bold text-2xl text-[#323755] */
.proy-card-price-value {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #323755;
}

/* flex items-center gap-2 TrendingUp + cuota */
.proy-card-monthly {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #4b5563;
}

.proy-card-monthly svg { color: #E60064; flex-shrink: 0; }

/* font-bold text-base text-[#E60064] */
.proy-card-monthly strong { font-weight: 700; font-size: 1rem; color: #E60064; }

/* flex flex-col sm:flex-row gap-2 */
.proy-card-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
}

@media (min-width: 640px) { .proy-card-actions { flex-direction: row; } }

/* flex-1 px-4 py-3 border-2 border-[#323755] text-[#323755] font-semibold text-sm rounded-full */
.proy-btn-interest {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 2px solid #323755;
  color: #323755;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.proy-btn-interest:hover { background: #323755; color: white; }

/* flex-1 px-4 py-3 bg-[#E60064] text-white font-semibold text-sm rounded-full */
.proy-btn-details {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  background: #E60064;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s;
}

.proy-btn-details:hover { background: #c00556; color: white; }

/* ── LOADING / EMPTY ─────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.proy-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
  color: #6b7280;
  font-family: 'Inter', sans-serif;
}

/* text-center py-16 */
.proy-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
  text-align: center;
}

/* text-lg text-gray-600 mb-4 */
.proy-empty-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: #4b5563;
  margin: 0;
}

/* ── Ver más proyectos ──────────────────────────────────────── */
.proy-load-more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.proy-btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  background: #323755;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: background .2s, box-shadow .2s, transform .2s;
}

.proy-btn-load-more:hover {
  background: #2a2f47;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: scale(1.03);
}


/* ── TelerikCard — neutralizar k-card para que .proy-card sea la única fuente de estilos ──
   TelerikCard renderiza <div class="k-card proy-card">.
   Telerik define border-radius, border, flex:0 0 auto, box-shadow en .k-card
   que colisionan con .proy-card. Los reseteamos aquí con mayor especificidad. */
.proy-card.k-card {
  border-radius: 1rem !important;
  border: 1px solid #f3f4f6 !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) !important;
  flex: 1 1 auto !important;  /* permite que la card llene la celda del grid */
  background: white !important;
}
.proy-card.k-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important;
  transform: translateY(-.5rem) !important;
}
/* .proy-grid es ahora <div> en lugar de <ul> — eliminar list-style heredado */
.proy-grid { list-style: none; }

/* Nota: los overrides de Telerik (k-*) están en Theme.css con clases vnt-*
   reutilizables por todos los módulos. Aquí solo estilos específicos de Proyectos. */

/* ═══════════════════════════════════════════════════════════
   PANTALLA DE DETALLE (ProyectoDetalle.razor)
   Basado en ProyectoDetalle.tsx — guía de referencia
   ═══════════════════════════════════════════════════════════ */

/* Loading / not-found */
.det-loading,
.det-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 1rem;
  text-align: center;
  color: #323755;
}

/* Página raíz */
.det-page {
  background: #F8FAFC;
  min-height: 60vh;
  padding-bottom: 4rem;
}

/* Breadcrumb / volver */
.det-breadcrumb {
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.det-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  color: #4b5563;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  padding: .25rem 0;
  transition: color .2s;
}
.det-back-btn:hover { color: #E60064; }

/* Grid principal: 2/3 galería + 1/3 info */
.det-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .det-grid { grid-template-columns: 2fr 1fr; gap: 2rem; }
}

/* ── Galería ── */
.det-gallery-col {}

.det-gallery-sticky {
  position: sticky;
  top: 6rem;
}

.det-main-img-wrap {
  position: relative;
  height: 20rem;
  border-radius: 1rem;
  overflow: hidden;
}
@media (min-width: 640px)  { .det-main-img-wrap { height: 24rem; } }
@media (min-width: 1024px) { .det-main-img-wrap { height: 32rem; } }

.det-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.det-main-img-wrap:hover .det-main-img { transform: scale(1.02); }

/* Badge verificado — top right */
.det-badge-verified-wrap {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.det-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .8125rem;
  font-weight: 700;
  color: #323755;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: background .2s;
}
.det-badge-verified:hover { background: white; }
.det-badge-verified svg:first-child { color: #16a34a; }

.det-verified-tooltip {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: 18rem;
  background: #323755;
  color: white;
  padding: 1rem;
  border-radius: .75rem;
  font-size: .75rem;
  line-height: 1.7;
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
  z-index: 10;
}
.det-verified-title {
  font-weight: 700;
  font-size: .8125rem;
  margin-bottom: .25rem;
}
.det-verified-tooltip p { margin: 0; }

/* Contador de imágenes — bottom right */
.det-tour-btn {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  padding: .625rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  font-size: .875rem;
  font-weight: 600;
  color: #323755;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.det-tour-btn svg { color: #E60064; flex-shrink: 0; }
.det-tour-btn:hover { background: white; transform: translateY(-1px); }

.det-img-counter {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  color: white;
  font-size: .8125rem;
  padding: .375rem .875rem;
  border-radius: 9999px;
}

/* Thumbnails */
.det-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}

.det-thumb {
  position: relative;
  height: 5rem;
  border-radius: .5rem;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, border-color .2s;
  padding: 0;
}
.det-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.det-thumb:hover { opacity: 1; }
.det-thumb--active {
  border-color: #E60064;
  opacity: 1;
}

/* ── Columna info ── */
.det-info-col {}

.det-info-sticky {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card precio */
.det-price-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  border: 1px solid #f3f4f6;
}

.det-location {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: .75rem;
}
.det-location svg { color: #9ca3af; flex-shrink: 0; }

.det-project-name {
  font-family: 'LT Wave', 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #323755;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.det-unit-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1rem;
}

.det-unit-stat {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: #374151;
}
.det-unit-stat svg { color: #9ca3af; }

.det-price-block {
  margin-bottom: 1.25rem;
}
.det-price-desde {
  font-size: .875rem;
  color: #6b7280;
}
.det-price-value {
  font-size: 2rem;
  font-weight: 700;
  color: #E60064;
  line-height: 1.1;
}
.det-delivery {
  display: block;
  font-size: .75rem;
  color: #9ca3af;
  margin-top: .25rem;
}

.det-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #E60064;
  color: white;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(230,0,100,.3);
  margin-bottom: .75rem;
  text-decoration: none;
}
.det-cta-primary:hover {
  background: #c00556;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(230,0,100,.4);
}

.det-cta-interest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1.5rem;
  background: transparent;
  color: #E60064;
  border: 2px solid #E60064;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.det-cta-interest:hover { background: #E60064; color: white; }

/* Simulador */
.det-simulator {
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  color: white;
}

.det-sim-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.det-sim-header svg { color: #E60064; }
.det-sim-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

.det-sim-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 1rem;
}

.det-sim-type-btn {
  padding: .625rem 1rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.1);
  border: none;
  color: white;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.det-sim-type-btn:hover { background: rgba(255,255,255,.2); }
.det-sim-type-btn--active { background: white; color: #323755; }

.det-sim-type-desc {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .5rem;
  padding: .75rem;
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  margin-bottom: 1rem;
}

.det-sim-fields { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }

.det-sim-field {}
.det-sim-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: white;
}

.det-sim-range {
  width: 100%;
  height: .5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.2);
  appearance: none;
  cursor: pointer;
  accent-color: #E60064;
}

.det-sim-result {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
}
.det-sim-result-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.8);
  margin-bottom: .25rem;
}
.det-sim-result-label svg { color: #E60064; }
.det-sim-result-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
}
.det-sim-result-note {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  margin-top: .25rem;
}

/* ── Secciones inferiores ── */
.det-sections { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }

.det-section {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.07);
  border: 1px solid #f3f4f6;
}

.det-section-title {
  font-family: 'LT Wave', 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #323755;
  margin: 0 0 1.25rem;
}

/* Planos de apartamentos */
.det-floorplans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .det-floorplans-grid { grid-template-columns: 1fr 1fr; }
}

.det-floorplan-card {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  overflow: hidden;
}

.det-floorplan-header {
  background: #f9fafb;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.det-floorplan-header span {
  font-weight: 600;
  font-size: .875rem;
  color: #323755;
}

.det-floorplan-body { padding: 1rem; }

.det-floorplan-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: .5rem;
}

.det-floorplan-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem 1rem;
  background: #f9fafb;
  border-radius: .5rem;
  aspect-ratio: 16/9;
}

.det-floorplan-pdf-icon { color: #9ca3af; }

.det-floorplan-pdf-label {
  font-size: .875rem;
  font-weight: 500;
  color: #4b5563;
  margin: 0;
}

.det-floorplan-download {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  background: #E60064;
  color: white;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.det-floorplan-download:hover {
  background: #c00556;
  transform: translateY(-1px);
}

/* Tipos de unidades */
.det-units-list { display: flex; flex-direction: column; gap: .75rem; }

.det-unit-row {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  background: #f9fafb;
  border-radius: .75rem;
  transition: background .2s;
}
@media (min-width: 640px) {
  .det-unit-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.det-unit-row:hover { background: #f3f4f6; }

.det-unit-row-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.det-unit-row-price { text-align: right; }
.det-unit-price {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: #323755;
}

/* Constructora */
.det-builder {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(to bottom right, #f0fdf4, white);
  border-color: #bbf7d0 !important;
}

.det-builder-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #16a34a;
}

.det-builder-body { flex: 1; }
.det-builder-name-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.det-builder-name-row h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #323755;
  margin: 0;
}
.det-builder-desc { font-size: .875rem; color: #374151; margin: 0 0 .75rem; }
.det-builder-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.det-builder-badge {
  font-size: .75rem;
  font-weight: 600;
  color: #166534;
  background: #dcfce7;
  padding: .25rem .75rem;
  border-radius: 9999px;
}

/* Card wrapper para secciones inferiores (bg white, shadow, border) */
.det-section-card {
  background: white;
  border: 1px solid #f3f4f6;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.07);
}

/* Amenidades */
.det-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) { .det-amenities-grid { grid-template-columns: repeat(3, 1fr); } }

.det-amenity-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: #374151;
}
.det-amenity-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(230,0,100,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #E60064;
}

/* Orientación y vistas */
.det-orient-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .det-orient-grid { grid-template-columns: 1fr 1fr; } }

.det-orient-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: .75rem;
}
.det-orient-sun {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
}
.det-orient-view {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.det-orient-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #323755;
  margin: 0 0 .25rem;
}
.det-orient-item p {
  font-size: .875rem;
  color: #374151;
  margin: 0;
}
.det-orient-note {
  font-size: .75rem !important;
  color: #6b7280 !important;
  margin-top: .5rem !important;
}

/* Puntos cercanos */
.det-nearby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .det-nearby-grid { grid-template-columns: 1fr 1fr; } }

.det-nearby-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: .5rem;
  color: #9ca3af;
}
.det-nearby-name {
  font-size: .875rem;
  font-weight: 600;
  color: #323755;
  margin: 0;
}
.det-nearby-dist {
  font-size: .75rem;
  color: #6b7280;
  margin: 0;
}

/* Testimonios */
.det-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .det-testimonials-grid { grid-template-columns: 1fr 1fr; } }

.det-testimonial {
  background: linear-gradient(to bottom right, #f9fafb, white);
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1.5rem;
}
.det-testimonial-quote {
  font-size: .875rem;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.det-testimonial-author {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.det-testimonial-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #323755, #1a1d2e);
  color: white;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.det-testimonial-avatar-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.det-testimonial-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.det-testimonial-name {
  font-size: .875rem;
  font-weight: 700;
  color: #323755;
  margin: 0;
}
.det-testimonial-location {
  font-size: .75rem;
  color: #6b7280;
  margin: 0;
}

/* Mapa */
.det-map-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: .75rem;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 0;
}

/* Info grid */
.det-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (min-width: 768px) { .det-info-grid { grid-template-columns: repeat(3, 1fr); } }

.det-info-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .875rem 1rem;
  background: #f9fafb;
  border-radius: .5rem;
}
.det-info-label { font-size: .75rem; color: #6b7280; font-weight: 500; }
.det-info-value { font-size: .9375rem; font-weight: 600; color: #323755; }


/* Module: ViventaComercial.UsedProperty */
/* ==========================================================================
   USED PROPERTY – Inmueble usado
   ========================================================================== */

.UsedProperty {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}

.UsedProperty__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.UsedProperty__header {
  text-align: center;
  margin-bottom: 3rem;
}

.UsedProperty__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: var(--vnt-dark);
  font-weight: 700;
  margin-bottom: 1rem;
}

.UsedProperty__highlight {
  color: var(--vnt-primary);
}

.UsedProperty__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1.125rem;
  color: #374151;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625;
}

.UsedProperty__subtitle-bold {
  font-weight: 700;
  color: var(--vnt-primary);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.UsedProperty__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* ── Benefits Column ─────────────────────────────────────────────────────── */

.UsedProperty__benefits {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.UsedProperty__benefit {
  text-align: center;
}

.UsedProperty__benefit-icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.UsedProperty__benefit-icon {
  color: var(--vnt-primary);
}

.UsedProperty__benefit-title {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--vnt-dark);
  margin-bottom: 0.5rem;
}

.UsedProperty__benefit-text {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.625;
}

/* ── Image Column ────────────────────────────────────────────────────────── */

.UsedProperty__image-wrapper {
  display: none;
}

.UsedProperty__image-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--vnt-shadow-xl);
  height: 400px;
}

.UsedProperty__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.UsedProperty__cta-wrapper {
  text-align: center;
  margin-top: 2.5rem;
}

.UsedProperty__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-xl);
}

.UsedProperty__cta:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-2xl);
  transform: scale(1.05);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .UsedProperty {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .UsedProperty__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .UsedProperty {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .UsedProperty__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .UsedProperty__title {
    font-size: 2.25rem;
  }

  .UsedProperty__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .UsedProperty__image-wrapper {
    display: block;
  }
}


/* Module: ViventaComercial.FAQ */
/* ==========================================================================
   FAQ – Preguntas frecuentes
   ========================================================================== */

.FAQ {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}

.FAQ__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.FAQ__header {
  text-align: center;
  margin-bottom: 4rem;
}

.FAQ__title {
  font-family: var(--vnt-font-title);
  font-size: 2.25rem;
  color: var(--vnt-secondary);
  margin-bottom: 1rem;
  font-weight: 700;
}

.FAQ__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1.125rem;
  color: #374151;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Accordion List ──────────────────────────────────────────────────────── */

.FAQ__list {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.FAQ__item {
  margin-bottom: 1rem;
}

.FAQ__item-card {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: var(--vnt-shadow-sm);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.FAQ__item-card:hover {
  box-shadow: var(--vnt-shadow-md);
}

/* ── Question Button ─────────────────────────────────────────────────────── */

.FAQ__question {
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.FAQ__question:hover {
  background-color: rgba(249, 250, 251, 0.5);
}

.FAQ__question-text {
  font-family: var(--vnt-font-title);
  font-size: 1.125rem;
  color: var(--vnt-secondary);
  font-weight: 600;
  padding-right: 1rem;
}

.FAQ__chevron {
  flex-shrink: 0;
  color: #6b7280;
}

.FAQ__chevron--open {
  color: var(--vnt-primary);
}

/* ── Answer ───────────────────────────────────────────────────────────────── */

.FAQ__answer {
  overflow: hidden;
  /* Added a simple animation for Blazor rendering without Framer Motion */
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.FAQ__answer-inner {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 1.5rem;
  padding-top: 0.5rem;
}

.FAQ__answer-text {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.625;
}

/* ── Footer CTA ──────────────────────────────────────────────────────────── */

.FAQ__footer {
  text-align: center;
  margin-top: 3rem;
}

.FAQ__footer-text {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: #374151;
  margin-bottom: 1.5rem;
}

.FAQ__footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-lg);
}

.FAQ__footer-cta:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-xl);
  transform: scale(1.05);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .FAQ {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .FAQ__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .FAQ {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .FAQ__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .FAQ__title {
    font-size: 3rem;
  }

  .FAQ__question-text {
    font-size: 1.25rem;
  }

  .FAQ__answer-text {
    font-size: 1.125rem;
  }
}


/* Module: ViventaComercial.SocialResponsibility */
/* ==========================================================================
   SOCIAL RESPONSIBILITY – Responsabilidad social
   ========================================================================== */

.Social {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #ffffff;
}

.Social__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.Social__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.Social__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: var(--vnt-secondary);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

/* ── Content Grid ────────────────────────────────────────────────────────── */

.Social__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

/* ── Image Column ────────────────────────────────────────────────────────── */

.Social__image-wrapper {
  position: relative;
}

.Social__image-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--vnt-shadow-xl);
}

.Social__image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.Social__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.Social__badge {
  position: absolute;
  bottom: calc(-1 * 1.5rem);
  right: calc(-1 * 1.5rem);
  background-color: var(--vnt-primary);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: var(--vnt-shadow-2xl);
}

.Social__badge-content {
  text-align: center;
}

.Social__badge-icon-wrapper {
  width: 5rem;
  height: 5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Social__badge-icon {
  color: #ffffff;
}

.Social__badge-label {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.Social__badge-value {
  font-family: var(--vnt-font-title);
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
}

.Social__badge-sublabel {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Content Column ──────────────────────────────────────────────────────── */

.Social__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.Social__text {
  font-family: var(--vnt-font-body);
  font-size: 1.125rem;
  color: #1f2937;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

/* ── Impact Stats ────────────────────────────────────────────────────────── */

.Social__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.Social__stat {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  background: linear-gradient(to bottom right, #f9fafb, #ffffff);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}

.Social__stat-icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Social__stat-icon-wrapper--pink {
  background-color: rgba(230, 0, 100, 0.1);
}

.Social__stat-icon-wrapper--teal {
  background-color: rgba(0, 230, 200, 0.1);
}

.Social__stat-icon--pink {
  color: var(--vnt-primary);
}

.Social__stat-icon--teal {
  color: #00e6c8;
}

.Social__stat-value {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--vnt-secondary);
}

.Social__stat-label {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #374151;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.Social__description {
  padding-top: 1rem;
}

.Social__description-text {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: #374151;
  line-height: 1.625;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.Social__cta-wrapper {
  padding-top: 1.5rem;
}

.Social__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-lg);
}

.Social__cta:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-xl);
  transform: scale(1.05);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Social__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .Social__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .Social {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .Social__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .Social__title {
    font-size: 2.25rem;
  }

  .Social__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  .Social__badge {
    right: calc(-1 * 2rem);
  }
}


/* Module: ViventaComercial.Stats */
/* ==========================================================================
   STATS – Estadísticas de impacto
   ========================================================================== */

.Stats {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f3f4f6;
}

.Stats__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 5rem;
}

.Stats__header {
  text-align: center;
  margin-bottom: 2rem;
}

.Stats__title {
  font-family: var(--vnt-font-title);
  font-size: 1.5rem;
  color: var(--vnt-dark);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.Stats__highlight {
  color: var(--vnt-primary);
}

.Stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.Stats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease;
}

.Stats__card:hover {
  transform: scale(1.05);
}

.Stats__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  height: 5rem;
}

.Stats__icon {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.Stats__value {
  font-family: var(--vnt-font-body);
  font-size: 2.25rem;
  color: var(--vnt-dark);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.Stats__label {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #374151;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Stats {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .Stats__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .Stats__header {
    margin-bottom: 3rem;
  }

  .Stats__title {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .Stats {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .Stats__container {
    padding-left: 8rem;
    padding-right: 8rem;
    padding-bottom: 0;
  }

  .Stats__title {
    font-size: 2.25rem;
  }

  .Stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem;
  }

  .Stats__value {
    font-size: 3rem;
  }

  .Stats__label {
    font-size: 1rem;
  }
}


/* Module: ViventaComercial.Hero */
/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.Hero {
  position: relative;
  height: 450px;
  overflow: hidden;
}

/* ── Background ──────────────────────────────────────────────────────────── */

.Hero__background {
  position: absolute;
  inset: 0;
}

.Hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(50, 55, 85, 0.9),
    rgba(50, 55, 85, 0.7),
    rgba(50, 55, 85, 0.5)
  );
}

/* ── Content ─────────────────────────────────────────────────────────────── */

.Hero__container {
  position: relative;
  height: 100%;
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.Hero__content {
  height: 100%;
  display: flex;
  align-items: center;
}

.Hero__text {
  max-width: 56rem; /* max-w-4xl */
}

.Hero__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 700;
}

.Hero__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* ── CTA Buttons ─────────────────────────────────────────────────────────── */

.Hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Hero__cta--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--vnt-radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-xl);
}

.Hero__cta--primary:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-2xl);
  transform: scale(1.05);
}

.Hero__cta--primary .Hero__cta-icon {
  transition: transform 0.2s ease;
}

.Hero__cta--primary:hover .Hero__cta-icon {
  transform: translateX(4px);
}

.Hero__cta--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--vnt-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.Hero__cta--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Hero__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .Hero__title {
    font-size: 2.25rem;
  }

  .Hero__subtitle {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
  }

  .Hero__actions {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .Hero {
    height: 550px;
  }

  .Hero__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .Hero__title {
    font-size: 3.75rem;
  }

  .Hero__subtitle {
    font-size: 1.5rem;
  }
}


/* Module: ViventaComercial.Testimonials */
/* ==========================================================================
   TESTIMONIALS – Historias de éxito
   ========================================================================== */

.Testimonials {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(
    to bottom,
    #ffffff,
    #f9fafb
  );
}

.Testimonials__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.Testimonials__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.Testimonials__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: var(--vnt-secondary);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.Testimonials__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1rem;
  color: #374151;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.Testimonials__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* ── Slider Native Containers ────────────────────────────────────────────── */

#testimonials-video-slider,
#testimonials-cards-slider {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#testimonials-video-slider::-webkit-scrollbar,
#testimonials-cards-slider::-webkit-scrollbar {
  display: none;
}
.Testimonials__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ── Video Slider ────────────────────────────────────────────────────────── */

.Testimonials__videos {
  position: relative;
  min-width: 0;
}

.Testimonials__video {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--vnt-shadow-lg);
  background-color: var(--vnt-secondary);
  cursor: pointer;
  height: 420px;
}

.Testimonials__video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.Testimonials__video-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.Testimonials__video:hover .Testimonials__video-image {
  transform: scale(1.05);
}

.Testimonials__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.3),
    transparent
  );
}

.Testimonials__play-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}

.Testimonials__play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: var(--vnt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vnt-shadow-xl);
  transition: transform 0.2s ease;
}

.Testimonials__video:hover .Testimonials__play-btn {
  transform: scale(1.1);
}

.Testimonials__play-icon {
  color: #ffffff;
  margin-left: 2px;
}

.Testimonials__video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}

.Testimonials__video-title {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.Testimonials__video-subtitle {
  font-family: var(--vnt-font-body);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

/* ── Video Navigation ────────────────────────────────────────────────────── */

.Testimonials__slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vnt-shadow-lg);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--vnt-secondary);
}

.Testimonials__slider-nav:hover {
  background-color: #ffffff;
}

.Testimonials__slider-nav--prev {
  left: 1rem;
}

.Testimonials__slider-nav--next {
  right: 1rem;
}

/* ── Testimonial Cards Slider ────────────────────────────────────────────── */

.Testimonials__cards-wrapper {
  position: relative;
  min-width: 0;
}

.Testimonials__cards-container {
  height: 420px;
}

.Testimonials__cards-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* ── Testimonial Card ────────────────────────────────────────────────────── */

.Testimonials__card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: var(--vnt-shadow-md);
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
  flex: 1;
}

.Testimonials__card:hover {
  box-shadow: var(--vnt-shadow-xl);
}

.Testimonials__card-inner {
  display: flex;
  gap: 1rem;
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */

.Testimonials__avatar-wrapper {
  flex-shrink: 0;
}

.Testimonials__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 4px solid rgba(230, 0, 100, 0.2);
}

.Testimonials__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card Content ────────────────────────────────────────────────────────── */

.Testimonials__card-content {
  flex: 1;
  min-width: 0;
}

.Testimonials__info {
  margin-bottom: 0.5rem;
}

.Testimonials__name {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--vnt-secondary);
}

.Testimonials__location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.25rem;
}

.Testimonials__location-icon {
  color: var(--vnt-primary);
}

.Testimonials__location-text {
  font-family: var(--vnt-font-body);
}

.Testimonials__project {
  font-family: var(--vnt-font-body);
  font-size: 0.75rem;
  color: var(--vnt-primary);
  font-weight: 600;
}

/* ── Quote ───────────────────────────────────────────────────────────────── */

.Testimonials__quote-wrapper {
  position: relative;
}

.Testimonials__quote-icon {
  color: rgba(230, 0, 100, 0.3);
  position: absolute;
  left: -4px;
  top: -4px;
}

.Testimonials__quote-text {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #1f2937;
  line-height: 1.625;
  padding-left: 1rem;
  overflow-wrap: break-word;
}

/* ── Card Navigation ─────────────────────────────────────────────────────── */

.Testimonials__card-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: #ffffff;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vnt-shadow-lg);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--vnt-secondary);
}

.Testimonials__card-nav:hover {
  background-color: #f9fafb;
}

.Testimonials__card-nav--prev {
  left: -1rem;
}

.Testimonials__card-nav--next {
  right: -1rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Testimonials__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .Testimonials {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .Testimonials__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .Testimonials__title {
    font-size: 2.25rem;
  }

  .Testimonials__subtitle {
    font-size: 1.125rem;
  }

  .Testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .Testimonials__video-title {
    font-size: 1.125rem;
  }
}


/* Module: ViventaComercial.StickyBar */
/* ==========================================================================
   STICKY BAR – Barra fija inferior
   ========================================================================== */

/* ── Desktop Sticky Bar ──────────────────────────────────────────────────── */

.StickyBar--desktop {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(to right, #1f2937, #111827);
  box-shadow: var(--vnt-shadow-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* Default hidden state for JS toggle */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.StickyBar--desktop.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.StickyBar__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.5rem;
}

.StickyBar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.StickyBar__title {
  font-family: var(--vnt-font-title);
  font-weight: 700;
  font-size: 1.125rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.StickyBar__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.StickyBar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.StickyBar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-lg);
}

.StickyBar__cta:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-xl);
}

/* ── Mobile Sticky Bar ───────────────────────────────────────────────────── */

.StickyBar--mobile {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: var(--vnt-shadow-2xl);
  border-top: 1px solid #9ca3af;
  /* Default hidden state for JS toggle */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.StickyBar--mobile.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.StickyBar__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: var(--vnt-shadow-lg);
  transition: background-color 0.2s ease;
}

.StickyBar__mobile-cta:hover {
  background-color: var(--vnt-primary-hover);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .StickyBar__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .StickyBar--desktop {
    display: block;
  }

  .StickyBar--mobile {
    display: none;
  }

  .StickyBar__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}


/* Module: ViventaComercial.WhyViventa */
/* ==========================================================================
   WHY VIVENTA – Beneficios y proceso
   ========================================================================== */

.WhyViventa {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}

.WhyViventa__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.WhyViventa__header {
  text-align: center;
  margin-bottom: 4rem;
}

.WhyViventa__title {
  font-family: var(--vnt-font-title);
  font-size: 1.875rem;
  color: var(--vnt-dark);
  margin-bottom: 1rem;
  font-weight: 700;
}

.WhyViventa__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 1.125rem;
  color: #374151;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

/* ── Benefits Grid ───────────────────────────────────────────────────────── */

.WhyViventa__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 5rem;
}

.WhyViventa__card {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
}

.WhyViventa__card:hover {
  box-shadow: var(--vnt-shadow-xl);
  transform: translateY(-4px);
}

.WhyViventa__card-icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.WhyViventa__card-icon {
  color: var(--vnt-primary);
}

.WhyViventa__card-title {
  font-family: var(--vnt-font-body);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--vnt-dark);
  margin-bottom: 0.5rem;
}

.WhyViventa__card-text {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: #374151;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.WhyViventa__cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}

.WhyViventa__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-xl);
}

.WhyViventa__cta:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-2xl);
  transform: scale(1.05);
}

.WhyViventa__cta-icon {
  transition: transform 0.2s ease;
}

.WhyViventa__cta:hover .WhyViventa__cta-icon {
  transform: translateX(4px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .WhyViventa {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .WhyViventa__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .WhyViventa__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .WhyViventa {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .WhyViventa__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .WhyViventa__title {
    font-size: 2.25rem;
  }

  .WhyViventa__subtitle {
    font-size: 1.25rem;
  }

  .WhyViventa__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Module: ViventaComercial.TrustBar */
/* ==========================================================================
   TRUSTBAR – Barra de logos de bancos aliados
   ========================================================================== */

.TrustBar {
  width: 100%;
  background-color: #ffffff;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.TrustBar__wrapper {
  width: 100%;
}

.TrustBar__text {
  font-family: var(--vnt-font-title);
  color: var(--vnt-dark);
  text-align: center;
  margin-bottom: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.5rem;
}

.TrustBar__highlight {
  color: var(--vnt-primary);
  font-weight: 700;
}

/* CSS Marquee para reemplazar slick-carousel */
.TrustBar__slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.TrustBar__track {
  display: flex;
  width: 200%; /* El contenido está duplicado, necesitamos el doble de ancho */
  animation: scroll-trustbar 30s linear infinite;
}

.TrustBar__track:hover {
  animation-play-state: paused;
}

@keyframes scroll-trustbar {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Mueve exactamente la mitad (los primeros 6 logos) */
}

.TrustBar__slide {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  flex: 1 0 auto; /* Asegura que no se achiquen */
  width: calc(100% / 12); /* 12 items en total */
}

@media (max-width: 1024px) {
  .TrustBar__track { width: 300%; }
  .TrustBar__slide { width: calc(100% / 18); }
}

@media (max-width: 768px) {
  .TrustBar__track { width: 400%; }
  .TrustBar__slide { width: calc(100% / 24); }
}

@media (max-width: 640px) {
  .TrustBar__track { width: 600%; }
  .TrustBar__slide { width: calc(100% / 36); }
}

.TrustBar__logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
}

.TrustBar__logo {
  max-height: 4rem;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.TrustBar__logo:hover {
  filter: grayscale(0%);
}


/* Module: ViventaComercial.SimulatorTeaser */
/* ==========================================================================
   SIMULATOR TEASER – Buscador de presupuesto
   ========================================================================== */

.Simulator {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: linear-gradient(to right, #1f2235, #323755);
}

.Simulator__container {
  max-width: var(--vnt-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.Simulator__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

/* ── Intro Column ────────────────────────────────────────────────────────── */

.Simulator__intro {
  /* lg:col-span-1 handled by grid */
}

.Simulator__title {
  font-family: var(--vnt-font-title);
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.Simulator__subtitle {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Form Card ───────────────────────────────────────────────────────────── */

.Simulator__form {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--vnt-shadow-xl);
}

.Simulator__form-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Budget Section ──────────────────────────────────────────────────────── */

.Simulator__budget-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.Simulator__budget-label-icon {
  color: var(--vnt-primary);
}

.Simulator__budget-label-text {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: var(--vnt-dark);
}

.Simulator__budget-display {
  background: linear-gradient(
    to bottom right,
    rgba(230, 0, 100, 0.05),
    rgba(230, 0, 100, 0.1)
  );
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.Simulator__budget-value {
  font-family: var(--vnt-font-body);
  font-size: 1.875rem;
  color: var(--vnt-dark);
  text-align: center;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.Simulator__budget-hint {
  font-family: var(--vnt-font-body);
  font-size: 0.75rem;
  color: #374151;
  text-align: center;
}

.Simulator__slider {
  width: 100%;
  height: 12px;
  background-color: #9ca3af;
  border-radius: 0.5rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  accent-color: var(--vnt-primary);
}

.Simulator__slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.Simulator__slider-label {
  font-family: var(--vnt-font-body);
  font-size: 0.75rem;
  color: #374151;
}

/* ── Filter Fields ───────────────────────────────────────────────────────── */

.Simulator__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.Simulator__field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.Simulator__field-icon {
  color: var(--vnt-primary);
}

.Simulator__field-text {
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: var(--vnt-dark);
}

.Simulator__select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #f9fafb;
  border: 1px solid #9ca3af;
  border-radius: 9999px;
  font-family: var(--vnt-font-body);
  font-size: 0.875rem;
  color: var(--vnt-dark);
  outline: none;
  transition: all 0.2s ease;
}

.Simulator__select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--vnt-primary);
}

/* ── Submit Button ───────────────────────────────────────────────────────── */

.Simulator__submit-wrapper {
  padding-top: 1rem;
}

.Simulator__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background-color: var(--vnt-primary);
  color: #ffffff;
  font-family: var(--vnt-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--vnt-shadow-xl);
}

.Simulator__submit:hover {
  background-color: var(--vnt-primary-hover);
  box-shadow: var(--vnt-shadow-2xl);
  transform: scale(1.02);
}

.Simulator__submit-icon {
  transition: transform 0.2s ease;
}

.Simulator__submit:hover .Simulator__submit-icon {
  transform: translateX(4px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .Simulator {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .Simulator__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .Simulator__layout {
    gap: 2rem;
  }

  .Simulator__title {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }

  .Simulator__subtitle {
    font-size: 1rem;
  }

  .Simulator__form {
    border-radius: 1.5rem;
    padding: 2rem;
  }
}

@media (min-width: 768px) {
  .Simulator__fields {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .Simulator {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .Simulator__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .Simulator__layout {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }

  .Simulator__title {
    font-size: 2.25rem;
  }

  .Simulator__form {
    padding: 2.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA CONTÁCTANOS  (contenido vive en un módulo HtmlText de Oqtane;
   el estilo depende del wrapper .vnt-contact para que editar textos no
   rompa el layout). Réplica fiel de la guía: Contactanos.tsx.
   ═══════════════════════════════════════════════════════════════════ */
.vnt-contact { background: #F8FAFC; color: var(--vnt-dark); }
.vnt-contact h1, .vnt-contact h2, .vnt-contact h3 { font-family: var(--vnt-font-title); }
.vnt-contact .vnt-ic { flex-shrink: 0; }

/* Hero */
.vnt-contact-hero {
  position: relative;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  color: white;
}
.vnt-contact-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.vnt-contact-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(50,55,85,.52), rgba(50,55,85,.35) 55%, rgba(50,55,85,.12)); }
.vnt-contact-hero-inner { position: relative; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .vnt-contact-hero-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
.vnt-contact-hero h1 { color: #ffffff; font-weight: 700; line-height: 1.15; font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: .5rem; }
.vnt-contact-hero p { color: rgba(255,255,255,.7); max-width: 32rem; }
.vnt-contact-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.vnt-contact .vnt-btn .vnt-ic { width: 18px; height: 18px; }

/* Botón fantasma translúcido (hero + CTA) */
.vnt-contact-btn-ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #ffffff; }
.vnt-contact-btn-ghost:hover { background: rgba(255,255,255,.2); color: #ffffff; }

/* Secciones genéricas */
.vnt-contact-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.vnt-contact-section-head { margin-bottom: 2rem; }
.vnt-contact h2 { color: var(--vnt-dark); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.vnt-contact-sub { color: #6b7280; font-size: .875rem; margin-top: .25rem; }

/* Oficinas: cards + mapa */
.vnt-contact-offices-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .vnt-contact-offices-layout { grid-template-columns: 2fr 3fr; } }
.vnt-contact-office-cards { display: flex; flex-direction: column; gap: 1rem; }
.vnt-contact-office-card { background: #ffffff; border: 1px solid #f3f4f6; border-radius: 1rem; padding: 1.25rem; box-shadow: var(--vnt-shadow-sm); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.vnt-contact-office-card:hover { border-color: #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
/* Oficina seleccionada (guía: border-[#E60064] shadow-lg ring-2 ring-[#E60064]/10) */
.vnt-contact-office-card.is-active { border-color: #E60064; box-shadow: 0 0 0 3px rgba(230,0,100,.12), 0 10px 15px -3px rgba(0,0,0,.1); }
.vnt-contact-office-card.is-active .vnt-contact-office-city { color: #E60064; }
.vnt-contact-office-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
/* CircleFlag: 40x40 rounded ring-white shadow (guía) */
.vnt-contact-flag { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25); flex-shrink: 0; }
.vnt-contact-office-head-text { display: flex; flex-direction: column; line-height: 1.25; }
.vnt-contact-office-city { font-weight: 700; color: var(--vnt-dark); font-size: 1rem; }
.vnt-contact-office-country { font-size: .75rem; color: #9ca3af; }
/* Badge "En mapa" — solo visible en la tarjeta activa */
.vnt-contact-office-badge { display: none; align-items: center; gap: .25rem; margin-left: auto; font-size: .75rem; color: #E60064; background: rgba(230,0,100,.1); padding: .25rem .625rem; border-radius: 9999px; white-space: nowrap; }
.vnt-contact-office-badge .vnt-ic { width: 11px; height: 11px; }
.vnt-contact-office-card.is-active .vnt-contact-office-badge { display: inline-flex; }
.vnt-contact-office-line { display: flex; gap: .375rem; font-size: .8125rem; color: #4b5563; margin-top: .5rem; }
.vnt-contact-office-line .vnt-ic { width: 14px; height: 14px; color: #9ca3af; margin-top: 2px; }
.vnt-contact-office-line strong { color: var(--vnt-dark); font-weight: 600; }
.vnt-contact-office-foot { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: #6b7280; margin-top: .625rem; }
.vnt-contact-office-foot .vnt-ic { width: 12px; height: 12px; color: #9ca3af; }
.vnt-contact-office-foot a { color: var(--vnt-dark); margin-left: auto; }

/* Mapa + badge flotante */
.vnt-contact-map-wrap { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 1px solid #f3f4f6; }
@media (min-width: 1024px) { .vnt-contact-map-wrap { position: sticky; top: 6rem; } }
.vnt-contact-map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; }
.vnt-contact-map-badge { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .625rem; background: rgba(255,255,255,.95); backdrop-filter: blur(4px); border-radius: .75rem; padding: .625rem 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.vnt-contact-map-badge-flag { width: 28px; height: 28px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.vnt-contact-map-badge-text { display: flex; flex-direction: column; min-width: 0; }
.vnt-contact-map-badge-label { font-size: .75rem; color: #6b7280; }
.vnt-contact-map-badge-place { font-size: .875rem; color: var(--vnt-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnt-contact-map-badge-open { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .8125rem; font-weight: 600; color: #E60064; white-space: nowrap; }
.vnt-contact-map-badge-open .vnt-ic { width: 12px; height: 12px; }

/* Canales de contacto */
.vnt-contact-channels-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .vnt-contact-channels-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vnt-contact-channels-grid { grid-template-columns: repeat(4, 1fr); } }
.vnt-contact-channel-card { text-decoration: none; display: flex; flex-direction: column; gap: .5rem; background: #ffffff; border: 1px solid #f3f4f6; border-radius: 1rem; padding: 1.25rem; transition: box-shadow .2s, transform .2s; }
.vnt-contact-channel-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); transform: translateY(-4px); }
.vnt-contact-channel-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--vnt-radius-full); display: flex; align-items: center; justify-content: center; }
.vnt-contact-channel-icon .vnt-ic { width: 16px; height: 16px; color: #ffffff; }
.vnt-contact-channel-icon.is-whatsapp { background: #22c55e; }
.vnt-contact-channel-icon.is-pink { background: var(--vnt-primary); }
.vnt-contact-channel-icon.is-navy { background: var(--vnt-dark); }
.vnt-contact-channel-label { font-size: .75rem; color: #6b7280; }
.vnt-contact-channel-value { font-size: .875rem; color: var(--vnt-dark); font-weight: 500; word-break: break-all; }
.vnt-contact-channel-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--vnt-primary); font-weight: 600; font-size: .8125rem; }
.vnt-contact-channel-cta .vnt-ic { width: 13px; height: 13px; }

/* CTA oscuro final */
.vnt-contact-cta-box { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; background: linear-gradient(to bottom right, var(--vnt-dark), #1a1d2e); border-radius: 1.5rem; padding: 2.5rem; }
@media (min-width: 1024px) { .vnt-contact-cta-box { grid-template-columns: 1fr 1fr; padding: 3rem; } }
.vnt-contact-cta-box h3 { color: #ffffff; font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: .75rem; }
.vnt-contact-cta-box p { color: rgba(255,255,255,.8); }
.vnt-contact-cta-actions { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .vnt-contact-cta-actions { flex-direction: row; } }

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA CRÉDITO — contenido estático (HtmlText). Clases .vnt-credito-*
   Validado contra la guía Credito.tsx. Paleta #E60064 / #323755 / #F8FAFC.
   El simulador interactivo vive en el módulo (clases crsim-*).
   ══════════════════════════════════════════════════════════════════════ */
.vnt-credito { color: #323755; }
.vnt-credito-head { text-align: center; margin-bottom: 3rem; }
.vnt-credito-head h2 { color: #323755; font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.15; margin: 0 0 .5rem; }
.vnt-credito-head p { color: #6b7280; font-size: .875rem; margin: 0; }
.vnt-credito-accent { color: #E60064; }

/* ── Hero (height:260px, overlay a la derecha) ───────────────────────── */
.vnt-credito-hero { position: relative; overflow: hidden; height: 260px; }
.vnt-credito-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vnt-credito-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom right, #323755, #1a1d2e); }
.vnt-credito-hero-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.vnt-credito-hero h1 { color: #fff; font-weight: 800; line-height: 1.15; font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 .5rem; }
.vnt-credito-hero p { color: rgba(255,255,255,.7); font-size: .875rem; max-width: 36rem; margin: 0 0 1rem; }
.vnt-credito-hero-actions { display: flex; flex-direction: row; gap: .75rem; flex-wrap: wrap; }
.vnt-credito-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 600; font-size: .875rem; border-radius: 9999px; text-decoration: none; transition: background .2s; }
.vnt-credito-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── Aliados financieros (marquee) ───────────────────────────────────── */
.vnt-credito-banks { background: #fff; border-bottom: 1px solid #f3f4f6; padding: 2rem 0; }
.vnt-credito-banks-label { text-align: center; font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 1.5rem; }
.vnt-credito-banks-carousel { overflow: hidden; position: relative; }
.vnt-credito-banks-track { display: flex; gap: 3rem; align-items: center; width: max-content; animation: vnt-credito-marquee 22s linear infinite; }
.vnt-credito-banks-track:hover { animation-play-state: paused; }
@keyframes vnt-credito-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.vnt-credito-bank-logo { display: flex; align-items: center; justify-content: center; }
.vnt-credito-bank-logo img { max-height: 2.5rem; width: auto; object-fit: contain; filter: grayscale(100%) opacity(.6); transition: filter .3s; }
.vnt-credito-bank-logo:hover img { filter: grayscale(0%) opacity(1); }

/* ── Value props ─────────────────────────────────────────────────────── */
.vnt-credito-value { background: #fff; padding: 4rem 0; }
@media (min-width: 1024px) { .vnt-credito-value { padding: 5rem 0; } }
.vnt-credito-value-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .vnt-credito-value-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.vnt-credito-value h2 { color: #323755; font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15; margin: 0 0 .75rem; }
.vnt-credito-value-lead { color: #6b7280; font-size: .875rem; line-height: 1.6; margin: 0 0 2.5rem; max-width: 28rem; }
.vnt-credito-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.vnt-credito-stat-top { display: flex; align-items: baseline; gap: .375rem; margin-bottom: .25rem; }
.vnt-credito-stat-num { font-family: var(--vnt-font-title); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: #323755; }
.vnt-credito-stat-unit { font-size: .875rem; color: #E60064; font-weight: 600; }
.vnt-credito-stat-label { font-size: .75rem; color: #9ca3af; line-height: 1.3; margin: 0; }
.vnt-credito-value-btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.5rem; padding: .875rem 1.75rem; background: #323755; color: #fff; font-weight: 600; font-size: .875rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,.1); transition: background .2s; }
.vnt-credito-value-btn:hover { background: #1a1d2e; color: #fff; }
.vnt-credito-value-media { position: relative; display: none; }
@media (min-width: 1024px) { .vnt-credito-value-media { display: block; } }
.vnt-credito-value-img { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); aspect-ratio: 4/3; }
.vnt-credito-value-img img { width: 100%; height: 100%; object-fit: cover; }
.vnt-credito-value-float { position: absolute; bottom: -1.5rem; left: -2rem; background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); padding: 1.25rem 1.5rem; }
.vnt-credito-value-float-cap { font-size: .75rem; color: #9ca3af; margin: 0 0 .25rem; }
.vnt-credito-value-float-num { font-family: var(--vnt-font-title); font-weight: 700; font-size: 1.875rem; color: #E60064; }
.vnt-credito-value-float-unit { font-size: .875rem; color: #323755; font-weight: 600; }
.vnt-credito-value-badge { position: absolute; top: -1rem; right: -1rem; background: #E60064; color: #fff; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(230,0,100,.3); padding: 1rem 1.25rem; }
.vnt-credito-value-badge p { margin: 0; font-size: .75rem; line-height: 1.3; }

/* ── Proceso en 4 pasos ──────────────────────────────────────────────── */
.vnt-credito-process { background: #F8FAFC; padding: 3.5rem 0; }
@media (min-width: 1024px) { .vnt-credito-process { padding: 5rem 0; } }
.vnt-credito-steps { position: relative; max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .vnt-credito-steps { grid-template-columns: repeat(4, 1fr); } }
.vnt-credito-steps-line { display: none; }
@media (min-width: 768px) { .vnt-credito-steps-line { display: block; position: absolute; top: 2rem; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(to right, rgba(230,0,100,.3), rgba(50,55,85,.3), rgba(230,0,100,.3)); z-index: 0; } }
.vnt-credito-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vnt-credito-step-icon { width: 4rem; height: 4rem; border-radius: 9999px; background: linear-gradient(to bottom right, #E60064, #c00556); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; box-shadow: 0 10px 15px -3px rgba(230,0,100,.2); color: #fff; }
.vnt-credito-step-num { font-size: .75rem; font-weight: 700; color: #E60064; margin-bottom: .5rem; letter-spacing: .03em; }
.vnt-credito-step h3 { font-weight: 700; font-size: .875rem; color: #323755; margin: 0 0 .25rem; }
.vnt-credito-step p { font-size: .75rem; color: #6b7280; line-height: 1.5; margin: 0; }

/* ── Requisitos ──────────────────────────────────────────────────────── */
.vnt-credito-req { background: #fff; padding: 3.5rem 0; }
@media (min-width: 1024px) { .vnt-credito-req { padding: 5rem 0; } }
.vnt-credito-req-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 640px) { .vnt-credito-req-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vnt-credito-req-grid { grid-template-columns: repeat(3, 1fr); } }
.vnt-credito-req-card { display: flex; gap: 1rem; background: #F8FAFC; border: 1px solid #f3f4f6; border-radius: 1rem; padding: 1.25rem; }
.vnt-credito-req-icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #323755; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vnt-credito-req-card strong { display: block; font-weight: 700; font-size: .875rem; color: #323755; margin-bottom: .25rem; }
.vnt-credito-req-card p { font-size: .75rem; color: #6b7280; line-height: 1.5; margin: 0; }
.vnt-credito-req-note { max-width: 64rem; margin: 1.25rem auto 0; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 1rem; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: .75rem; }
.vnt-credito-req-note svg { color: #f59e0b; flex-shrink: 0; margin-top: 2px; }
.vnt-credito-req-note p { margin: 0; font-size: .875rem; color: #92400e; }

/* ── FAQ (acordeón CSS-only <details>) ───────────────────────────────── */
.vnt-credito-faq { background: #F8FAFC; padding: 3.5rem 0; }
@media (min-width: 1024px) { .vnt-credito-faq { padding: 5rem 0; } }
.vnt-credito-faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.vnt-credito-faq-item { background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.vnt-credito-faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; color: #323755; transition: background .2s; }
.vnt-credito-faq-item > summary::-webkit-details-marker { display: none; }
.vnt-credito-faq-item > summary:hover { background: #f9fafb; }
.vnt-credito-faq-chevron { flex-shrink: 0; color: #E60064; transition: transform .3s; }
.vnt-credito-faq-item[open] .vnt-credito-faq-chevron { transform: rotate(180deg); }
.vnt-credito-faq-answer { padding: 0 1.5rem 1.25rem; font-size: .875rem; color: #6b7280; line-height: 1.6; }

/* ── CTA final (banda oscura) ────────────────────────────────────────── */
.vnt-credito-cta { background: linear-gradient(to right, #323755, #1a1d2e); }
.vnt-credito-cta-inner { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; padding: 2rem 0; }
@media (min-width: 1024px) { .vnt-credito-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.vnt-credito-cta-text h3 { color: #fff; font-weight: 700; font-size: 1.125rem; margin: 0 0 .25rem; }
.vnt-credito-cta-text p { color: rgba(255,255,255,.6); font-size: .875rem; margin: 0; }
.vnt-credito-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   CRÉDITO SIMULADOR — módulo Telerik (clases crsim-*).
   En este proyecto los estilos de módulo viven en el Theme.css global
   (igual que .proy-*): Oqtane aquí no auto-inyecta el Module.css.
   Validado contra la guía Credito.tsx #simulador (líneas 262-419).
   ══════════════════════════════════════════════════════════════════════ */
.crsim-section { background: #323755; padding: 3.5rem 0; }
@media (min-width: 1024px) { .crsim-section { padding: 5rem 0; } }
.crsim-inner { max-width: 64rem; margin: 0 auto; }
.crsim-head { text-align: center; margin-bottom: 2.5rem; }
.crsim-title { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.15; margin: 0 0 .5rem; }
.crsim-subtitle { color: rgba(255,255,255,.6); font-size: .875rem; margin: 0; }
.crsim-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }
@media (min-width: 1024px) { .crsim-grid { grid-template-columns: repeat(5, 1fr); } }
.crsim-controls { background: #fff; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); display: flex; flex-direction: column; }
@media (min-width: 1024px) { .crsim-controls { grid-column: span 3 / span 3; } }
.crsim-currency-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #f3f4f6; flex-wrap: wrap; }
.crsim-currency-label { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.crsim-currency-toggle { display: inline-flex; align-items: center; gap: .25rem; background: #f3f4f6; border-radius: 9999px; padding: .25rem; }
.crsim-currency-btn { border: 0; background: none; cursor: pointer; padding: .375rem 1rem; border-radius: 9999px; font-size: .75rem; color: #6b7280; transition: all .2s; font-family: inherit; }
.crsim-currency-btn:hover { color: #323755; }
.crsim-currency-btn.active { background: #E60064; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.crsim-trm { font-size: .75rem; color: #9ca3af; margin-left: auto; }
.crsim-sliders { display: flex; flex-direction: column; gap: 1.25rem; }
.crsim-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.crsim-slider-label { font-size: .875rem; color: #323755; }
.crsim-slider-value { font-size: .875rem; color: #E60064; }
.crsim-slider-scale { display: flex; justify-content: space-between; margin-top: .25rem; }
.crsim-slider-scale span { font-size: .75rem; color: #9ca3af; }
.crsim-warning { margin-top: 1rem; display: flex; align-items: flex-start; gap: .625rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; padding: .75rem 1rem; }
.crsim-warning-icon { flex-shrink: 0; margin-top: .125rem; font-size: .875rem; }
.crsim-warning p { margin: 0; font-size: .75rem; color: #92400e; line-height: 1.5; }
.crsim-warning strong { font-weight: 700; }
.crsim-secure { margin-top: auto; padding: .75rem 1rem; display: flex; align-items: center; gap: .625rem; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: .75rem; }
.crsim-secure-icon { color: #22c55e; flex-shrink: 0; }
.crsim-secure p { margin: 0; font-size: .75rem; color: #6b7280; }
.crsim-results { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .crsim-results { grid-column: span 2 / span 2; } }
.crsim-result-card { background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); flex: 1; display: flex; flex-direction: column; }
.crsim-result-top { margin-bottom: .75rem; }
.crsim-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border-radius: 9999px; margin-bottom: .5rem; }
.crsim-badge-navy { color: #323755; background: rgba(50,55,85,.08); }
.crsim-badge-pink { color: #E60064; background: rgba(230,0,100,.08); }
.crsim-result-caption { margin: 0; font-size: .75rem; color: #9ca3af; }
.crsim-result-amount { font-family: var(--vnt-font-title); font-weight: 700; font-size: 1.875rem; line-height: 1.1; margin: 0 0 .25rem; }
.crsim-amount-navy { color: #323755; }
.crsim-amount-pink { color: #E60064; }
.crsim-result-rate { margin: 0 0 1rem; font-size: .75rem; color: #9ca3af; }
.crsim-result-list { border-top: 1px solid #f3f4f6; padding-top: .75rem; display: flex; flex-direction: column; gap: .375rem; margin-top: auto; }
.crsim-result-item { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: #4b5563; }
.crsim-check { color: #22c55e; flex-shrink: 0; }
.crsim-cta { display: flex; justify-content: center; margin-top: 2rem; }
.crsim-cta-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 2.5rem; background: #E60064; color: #fff; font-weight: 600; font-size: .875rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(230,0,100,.2); transition: background .2s; }
.crsim-cta-btn:hover { background: #c00556; color: #fff; }
.crsim-sliders telerik-blazor { display: contents; }

/* ── Sticky CTA de Crédito (guía: aparece al hacer scroll, se esconde en el footer) ── */
.vnt-credito-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; transform: translateY(110%); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; }
.vnt-credito-sticky.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* Desktop: banda oscura ancha */
.vnt-credito-sticky-desktop { display: none; background: linear-gradient(to right, #323755, #1a1d2e); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -10px 25px rgba(0,0,0,.2); }
@media (min-width: 1024px) { .vnt-credito-sticky-desktop { display: block; } }
.vnt-credito-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.vnt-credito-sticky-title { color: #fff; font-weight: 700; font-size: 1rem; margin: 0; }
.vnt-credito-sticky-sub { color: rgba(255,255,255,.6); font-size: .875rem; margin: 0; }
.vnt-credito-sticky-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
/* Móvil: botón único blanco/rosa */
.vnt-credito-sticky-mobile { display: block; background: #fff; box-shadow: 0 -10px 25px rgba(0,0,0,.15); border-top: 1px solid #f3f4f6; padding: 1rem; }
@media (min-width: 1024px) { .vnt-credito-sticky-mobile { display: none; } }
.vnt-credito-sticky-mobile-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem 1.5rem; background: #E60064; color: #fff; font-weight: 600; font-size: 1rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(230,0,100,.2); }
.vnt-credito-sticky-mobile-btn:hover { background: #c00556; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGE — CSS Puro (BEM estricto)
   Archivo: blog.css
   ═══════════════════════════════════════════════════════════════════════════ */

.blog {
  min-height: 100vh;
  background-color: #F8FAFC;
}

/* =========================================
   HERO SECTION
   ========================================= */
.blog__hero {
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.blog__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog__hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(50, 55, 85, 0.97), rgba(50, 55, 85, 0.85), rgba(50, 55, 85, 0.60));
}

.blog__container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .blog__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .blog__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

.blog__hero-content {
  position: relative;
  z-index: 10;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 1024px) {
  .blog__hero-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.blog__hero-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .blog__hero-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.blog__title {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 640px) {
  .blog__title { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .blog__title { font-size: 2.25rem; }
}

.blog__subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
  margin-bottom: 0;
  max-width: 32rem;
}

/* =========================================
   SEARCH & CATEGORIES
   ========================================= */
.blog__search {
  position: relative;
  width: 100%;
}
@media (min-width: 1024px) {
  .blog__search { width: 20rem; }
}
@media (min-width: 1280px) {
  .blog__search { width: 24rem; }
}

.blog__search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.blog__search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #ffffff;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.blog__search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.blog__search-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.blog__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog__category-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
}
.blog__category-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.blog__category-btn--active {
  background-color: #E60064;
  color: #ffffff;
  border-color: #E60064;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.blog__category-btn--active:hover {
  background-color: #E60064;
  color: #ffffff;
}

/* =========================================
   MAIN CONTENT
   ========================================= */
.blog__main {
  padding-top: 3rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
  .blog__main {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Empty state */
.blog__empty {
  text-align: center;
  padding: 6rem 0;
}

.blog__empty-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.blog__empty-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #E60064;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.blog__empty-btn:hover {
  text-decoration: underline;
}

/* =========================================
   POST CATEGORY BADGE (Compartido)
   ========================================= */
.blog__post-category {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #E60064;
  background-color: rgba(230, 0, 100, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  width: fit-content;
}

/* =========================================
   META INFO (Compartido)
   ========================================= */
.blog__meta-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* =========================================
   FEATURED POST
   ========================================= */
.blog__featured {
  margin-bottom: 2.5rem;
}

.blog__featured-link {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.blog__featured-link:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 1024px) {
  .blog__featured-link {
    grid-template-columns: 3fr 2fr;
  }
}

.blog__featured-image-wrapper {
  position: relative;
  height: 16rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .blog__featured-image-wrapper {
    height: auto;
  }
}

.blog__featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.blog__featured-link:hover .blog__featured-image {
  transform: scale(1.05);
}

.blog__featured-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 55, 85, 0.6), transparent, transparent);
}

.blog__featured-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #E60064;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.blog__featured-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .blog__featured-content {
    padding: 2.5rem;
  }
}

.blog__featured-title {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  color: #323755;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.375;
  transition: color 0.3s ease;
}
.blog__featured-link:hover .blog__featured-title {
  color: #E60064;
}
@media (min-width: 1024px) {
  .blog__featured-title { font-size: 1.5rem; }
}

.blog__featured-excerpt {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.blog__featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid #f3f4f6;
}

.blog__meta-read {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #E60064;
  transition: gap 0.3s ease;
}
.blog__featured-link:hover .blog__meta-read {
  gap: 0.75rem;
}

/* =========================================
   POSTS GRID
   ========================================= */
.blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog__grid { grid-template-columns: repeat(3, 1fr); }
}

.blog__post-link {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog__post-link:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.25rem);
}

.blog__post-image-wrapper {
  position: relative;
  height: 12rem;
  overflow: hidden;
}

.blog__post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog__post-link:hover .blog__post-image {
  transform: scale(1.05);
}

.blog__post-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog__post-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.375;
  flex: 1;
  transition: color 0.3s ease;
}
.blog__post-link:hover .blog__post-title {
  color: #E60064;
}

.blog__post-excerpt {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 1rem;
}

.blog__post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.blog__post-arrow {
  color: #E60064;
  transition: transform 0.3s ease;
}
.blog__post-link:hover .blog__post-arrow {
  transform: translateX(0.25rem);
}

/* =========================================
   NEWSLETTER CTA
   ========================================= */
.blog__cta {
  margin-top: 4rem;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  border-radius: 1.5rem;
  padding: 2.5rem;
}
@media (min-width: 1024px) {
  .blog__cta { padding: 3rem; }
}

.blog__cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .blog__cta-grid { grid-template-columns: repeat(2, 1fr); }
}

.blog__cta-title {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
  .blog__cta-title { font-size: 1.875rem; }
}

.blog__cta-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.625;
  margin: 0;
}

.blog__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .blog__cta-actions { flex-direction: row; }
}

.blog__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.blog__cta-btn--primary {
  background-color: #E60064;
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.blog__cta-btn--primary:hover {
  background-color: #c00556;
  transform: scale(1.05);
}

.blog__cta-btn--secondary {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.blog__cta-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA CONÓCENOS — CSS Puro (BEM estricto)
   Archivo: conocenos.css
   ═══════════════════════════════════════════════════════════════════════════ */

.about {
  min-height: 100vh;
  background-color: #F8FAFC;
  color: #323755;
}

.about__container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .about__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .about__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/* =========================================
   HERO
   ========================================= */
.about__hero {
  position: relative;
  overflow: hidden;
  height: 340px;
}

.about__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
}

.about__hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__hero-title {
  font-family: 'LT Wave', 'Work Sans', -apple-system, sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .about__hero-title { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .about__hero-title { font-size: 2.25rem; }
}
.about__hero-title span {
  color: #E60064;
}

.about__hero-subtitle {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 32rem;
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.about__hero-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.about__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: #E60064;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}
.about__btn-primary:hover {
  background-color: #c00556;
}

.about__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.about__btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.about__btn-ghost svg {
  flex-shrink: 0;
}

/* =========================================
   STATS
   ========================================= */
.about__stats {
  background-color: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.about__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Fallback para divide-x de Tailwind */
  border-left: 1px solid transparent;
}
@media (min-width: 1024px) {
  .about__stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about__stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}
@media (min-width: 1024px) {
  .about__stat-item {
    border-bottom: none;
  }
}

.about__stat-top {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.about__stat-num {
  font-family: 'LT Wave', 'Work Sans', -apple-system, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #323755;
  line-height: 1;
}
@media (min-width: 1024px) {
  .about__stat-num { font-size: 3rem; }
}

.about__stat-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #E60064;
  font-weight: 600;
}

.about__stat-desc {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}

/* =========================================
   STORY
   ========================================= */
.about__story {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  .about__story {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.about__story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about__story-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
  }
}

.about__section-title {
  font-family: 'LT Wave', 'Work Sans', -apple-system, sans-serif;
  font-size: 1.875rem;
  color: #323755;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .about__section-title { font-size: 2.25rem; }
}
.about__section-title span {
  color: #E60064;
}

.about__section-desc {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0;
}

.about__story-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.625;
}
.about__story-text p {
  margin: 0;
}

.about__story-quote {
  margin-top: 2rem;
  border-left: 4px solid #E60064;
  padding-left: 1.25rem;
}

.about__story-quote-text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  color: #323755;
  font-style: italic;
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.about__story-quote-author {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 0;
}

.about__story-media {
  position: relative;
}

.about__story-img-wrapper {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  aspect-ratio: 4/3;
  position: relative;
}

.about__story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__story-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 55, 85, 0.3), transparent);
}

.about__story-badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.about__story-badge-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E60064;
}

.about__story-badge-content p {
  margin: 0;
  line-height: 1.3;
}
.about__story-badge-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}
.about__story-badge-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #323755;
}
.about__story-badge-id {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #E60064;
}

/* =========================================
   VALUES
   ========================================= */
.about__values {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
}

.about__section-head {
  text-align: center;
  margin-bottom: 3rem;
}
.about__section-head .about__section-desc {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.about__values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .about__values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .about__values-grid { grid-template-columns: repeat(4, 1fr); }
}

.about__value-card {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}
.about__value-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-0.25rem);
}

.about__value-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #E60064;
}

.about__value-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #323755;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.about__value-desc {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.625;
  margin: 0;
}

/* =========================================
   TEAM
   ========================================= */
.about__team {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #F8FAFC;
  overflow: hidden;
}

.about__team-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.about__team-nav {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .about__team-nav { display: flex; }
}

.about__team-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s ease;
}
.about__team-btn:hover {
  border-color: #E60064;
  color: #E60064;
}

.about__team-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.about__team-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.about__team-card {
  flex-shrink: 0;
  width: 16rem;
  scroll-snap-align: start;
}

.about__team-card-inner {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}
.about__team-card-inner:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.25rem);
}

.about__team-photo {
  height: 14rem;
  overflow: hidden;
}
.about__team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about__team-info {
  padding: 1rem 1.25rem;
}
.about__team-name {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
.about__team-role {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #E60064;
  margin: 0;
}

.about__team-dots {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
}
.about__team-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background-color: #d1d5db;
  transition: all 0.3s ease;
}
.about__team-dot--active {
  width: 1.5rem;
  background-color: #E60064;
}

/* =========================================
   ALLIES (Bancos)
   ========================================= */
.about__allies {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
}

.about__allies-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .about__allies-grid { gap: 3rem; }
}

.about__ally {
  max-height: 3.5rem;
  max-width: 150px;
  object-fit: contain;
  transition: all 0.3s ease;
}
.about__ally:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* =========================================
   OFFICES
   ========================================= */
.about__offices {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #F8FAFC;
}

.about__offices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about__offices-grid { grid-template-columns: repeat(2, 1fr); }
}

.about__offices-desc {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 2rem;
  max-width: 28rem;
  line-height: 1.625;
}

.about__offices-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.about__office-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.about__office-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E60064;
  flex-shrink: 0;
}

.about__office-city {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  margin: 0;
}
.about__office-country {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}

.about__offices-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #E60064;
  text-decoration: none;
  margin-top: 1.5rem;
}
.about__offices-link:hover {
  text-decoration: underline;
}

.about__offices-media {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  aspect-ratio: 4/3;
}
.about__offices-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   STICKY CTA
   ========================================= */
.about__sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.about__sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.about__sticky-desktop {
  display: none;
  background: linear-gradient(to right, #323755, #1a1d2e);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
}
@media (min-width: 1024px) {
  .about__sticky-desktop { display: block; }
}

.about__sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
}

.about__sticky-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
}
.about__sticky-sub {
  font-family: 'Inter', -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
}

.about__sticky-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.about__sticky-mobile {
  display: block;
  background-color: #ffffff;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
  border-top: 1px solid #f3f4f6;
  padding: 1rem;
}
@media (min-width: 1024px) {
  .about__sticky-mobile { display: none; }
}

.about__sticky-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: #E60064;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(230, 0, 100, 0.2);
  border: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA CÓMO FUNCIONA — CSS Puro (BEM estricto)
   Archivo: comofunciona.css
   ═══════════════════════════════════════════════════════════════════════════ */

.how {
  min-height: 100vh;
  background-color: #ffffff;
  color: #323755;
}

.how__container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .how__container { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .how__container { padding-left: 8rem; padding-right: 8rem; }
}

/* =========================================
   HERO
   ========================================= */
.how__hero {
  position: relative;
  overflow: hidden;
  height: 320px;
}
@media (min-width: 1024px) {
  .how__hero { height: 380px; }
}

.how__hero-bg {
  position: absolute;
  inset: 0;
}
.how__hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.how__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
}

.how__hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
}

.how__hero-content {
  max-width: 42rem;
}

.how__hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(230, 0, 100, 0.2);
  border: 1px solid rgba(230, 0, 100, 0.3);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}
.how__hero-tag svg {
  color: #E60064;
}
.how__hero-tag span {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.how__hero-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.25;
  font-weight: 700;
}
@media (min-width: 640px) { .how__hero-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .how__hero-title { font-size: 2.25rem; } }
.how__hero-title span { color: #E60064; }

.how__hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.625;
}
@media (min-width: 1024px) { .how__hero-desc { font-size: 1rem; } }
.how__hero-desc strong { color: #ffffff; font-weight: 600; }

.how__hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.how__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.how__btn--primary {
  background-color: #E60064;
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: none;
}
.how__btn--primary:hover {
  background-color: #c00556;
  transform: scale(1.05);
}
.how__btn--outline {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.how__btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* =========================================
   STATS
   ========================================= */
.how__stats {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #F8FAFC;
}
@media (min-width: 640px) { .how__stats { padding-top: 5rem; padding-bottom: 5rem; } }

.how__stats-head {
  text-align: center;
  margin-bottom: 3rem;
}
.how__stats-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.5rem;
  color: #323755;
  font-weight: 700;
}
@media (min-width: 640px) { .how__stats-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .how__stats-title { font-size: 2.25rem; } }
.how__stats-title span { color: #E60064; }

.how__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 1024px) {
  .how__stats-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; }
}

.how__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}
.how__stat:hover {
  transform: scale(1.05);
}
.how__stat-img {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.how__stat-img img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.how__stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) { .how__stat-value { font-size: 3rem; } }
.how__stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.375;
}
@media (min-width: 1024px) { .how__stat-label { font-size: 1rem; } }

/* =========================================
   MODELO PREVENTA
   ========================================= */
.how__model {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #ffffff;
}
@media (min-width: 640px) { .how__model { padding-top: 5rem; padding-bottom: 5rem; } }

.how__model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .how__model-grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
}

.how__model-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
@media (min-width: 1024px) { .how__model-title { font-size: 2.25rem; } }
.how__model-title span { color: #E60064; }

.how__model-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 2rem;
  line-height: 1.625;
}
@media (min-width: 1024px) { .how__model-desc { font-size: 1.125rem; } }

.how__model-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.how__model-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.how__model-item svg {
  color: #E60064;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.how__model-item span {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #374151;
}
@media (min-width: 1024px) { .how__model-item span { font-size: 1rem; } }

.how__model-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #E60064;
  text-decoration: none;
  transition: color 0.3s ease;
}
.how__model-link:hover {
  color: #c00556;
}
.how__model-link svg {
  transition: transform 0.3s ease;
}
.how__model-link:hover svg {
  transform: translateX(0.25rem);
}

.how__model-visual {
  position: relative;
}
.how__model-card {
  background-color: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}
@media (min-width: 1024px) { .how__model-card { padding: 2.5rem; } }

.how__model-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.how__model-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.how__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.how__bar-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
}
.how__bar-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
}
.how__bar-value--red { color: #E60064; }
.how__bar-value--dark { color: #323755; }

.how__bar-track {
  height: 2.5rem;
  background-color: #f3f4f6;
  border-radius: 0.75rem;
  overflow: hidden;
}
.how__bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.75rem;
  border-radius: 0.75rem;
  /* Animación manual simulada o con JS */
  width: 0;
  transition: width 1s ease-out;
}
.how__bar-fill--30 { background-color: #E60064; }
.how__bar-fill--70 { background-color: #323755; }
.how__bar-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 600;
}

.how__model-timeline {
  border-top: 1px solid #f3f4f6;
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.how__time-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.how__time-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #323755;
  font-weight: 600;
}

.how__model-badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1rem;
  background-color: #E60064;
  color: #ffffff;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.how__badge-top {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.125rem;
}
.how__badge-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.how__badge-bot {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

/* =========================================
   STEPS
   ========================================= */
.how__steps {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}
@media (min-width: 640px) { .how__steps { padding-top: 5rem; padding-bottom: 5rem; } }

.how__steps-head {
  text-align: center;
  margin-bottom: 4rem;
}
.how__steps-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) { .how__steps-title { font-size: 2.25rem; } }
.how__steps-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  max-width: 42rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .how__steps-desc { font-size: 1.125rem; } }

/* Desktop Steps */
.how__steps-desktop {
  display: none;
  position: relative;
}
@media (min-width: 1024px) { .how__steps-desktop { display: block; } }

.how__steps-line {
  position: absolute;
  top: 2.5rem; /* center of 80px circle */
  left: 12%;
  right: 12%;
  height: 2px;
  background-color: #e5e7eb;
  z-index: 0;
}

.how__steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 10;
}

.how__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.how__step-circle {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.25rem;
}
.how__step-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
}
.how__step-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
}
.how__step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.625;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
}
.how__step-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

/* Mobile Steps */
.how__steps-mobile {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) { .how__steps-mobile { display: none; } }

.how__step-mob {
  display: flex;
  gap: 1.25rem;
}
.how__step-mob-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.how__step-mob-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.how__step-mob-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #ffffff;
}
.how__step-mob-line {
  width: 2px;
  flex: 1;
  background-color: #e5e7eb;
  margin: 0.5rem 0;
  min-height: 3rem;
}
.how__step-mob-right {
  padding-bottom: 2rem;
}
.how__step-mob:last-child .how__step-mob-right {
  padding-bottom: 0;
}

/* =========================================
   ALIADOS
   ========================================= */
.how__allies {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  overflow: hidden;
}
.how__allies-head {
  text-align: center;
  margin-bottom: 2rem;
}
.how__allies-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.25rem;
  color: #323755;
  max-width: 42rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .how__allies-title { font-size: 1.5rem; } }
.how__allies-title span { font-weight: 400; color: #E60064; }

/* Marquee infinite slider */
.how__allies-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.how__allies-track {
  display: inline-flex;
  gap: 3rem;
  align-items: center;
  animation: marquee 20s linear infinite;
}
.how__allies-marquee:hover .how__allies-track {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.how__ally {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.how__ally img {
  max-height: 3.5rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.how__ally:hover img {
  filter: grayscale(0%);
}

/* =========================================
   WHY VIVENTA
   ========================================= */
.how__why {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}
@media (min-width: 1024px) { .how__why { padding-bottom: 4rem; } }

.how__why-head {
  text-align: center;
  margin-bottom: 4rem;
}
.how__why-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) { .how__why-title { font-size: 2.25rem; } }
.how__why-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  max-width: 42rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .how__why-desc { font-size: 1.125rem; } }

.how__why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) { .how__why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .how__why-grid { grid-template-columns: repeat(4, 1fr); } }

.how__why-card {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}
.how__why-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.25rem);
}
.how__why-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #E60064;
}
.how__why-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #323755;
  margin-bottom: 0.5rem;
}
.how__why-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
}

.how__why-cta {
  text-align: center;
}
.how__btn--large {
  font-size: 1rem;
  padding: 1rem 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* =========================================
   TESTIMONIALS
   ========================================= */
.how__testi {
  padding-top: 3rem;
  padding-bottom: 6rem;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
}
@media (min-width: 1024px) { .how__testi { padding-bottom: 4rem; } }

.how__testi-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.how__testi-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px) { .how__testi-title { font-size: 2.25rem; } }
.how__testi-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  max-width: 42rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .how__testi-desc { font-size: 1.125rem; } }

.how__testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .how__testi-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* Simple snap slider for both sides */
.how__slider-wrapper {
  position: relative;
  height: 420px;
}
.how__slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  z-index: 10;
  color: #323755;
  transition: background-color 0.3s ease;
}
.how__slider-nav:hover { background-color: #ffffff; }
.how__slider-nav--prev { left: 1rem; }
.how__slider-nav--next { right: 1rem; }
@media (min-width: 1024px) {
  .how__slider-nav--prev { left: -1rem; }
  .how__slider-nav--next { right: -1rem; }
}

.how__slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  gap: 1rem;
}
.how__slider-track::-webkit-scrollbar { display: none; }

.how__slider-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

/* Video specific */
.how__video-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #323755;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.how__video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.how__video-card:hover img {
  transform: scale(1.05);
}
.how__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
}
.how__video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how__video-play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: #E60064;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.how__video-card:hover .how__video-play-btn {
  transform: scale(1.1);
}
.how__video-play-btn svg {
  color: #ffffff;
  fill: #ffffff;
  margin-left: 0.25rem;
}
.how__video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}
.how__video-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
@media (min-width: 1024px) { .how__video-title { font-size: 1.125rem; } }
.how__video-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}
.how__video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Reviews specific */
.how__reviews-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
.how__review-card {
  flex: 1;
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  gap: 1rem;
}
.how__review-avatar {
  flex-shrink: 0;
}
.how__review-img {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 4px solid rgba(230, 0, 100, 0.2);
}
.how__review-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.how__review-content {
  flex: 1;
}
.how__review-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
}
.how__review-loc {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}
.how__review-loc svg { color: #E60064; }
.how__review-proj {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #E60064;
  margin-bottom: 0.5rem;
}
.how__review-quote {
  position: relative;
}
.how__review-quote svg {
  position: absolute;
  left: -0.25rem;
  top: -0.25rem;
  color: rgba(230, 0, 100, 0.3);
}
.how__review-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.625;
  padding-left: 1rem;
}

/* =========================================
   FAQ
   ========================================= */
.how__faq {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}
@media (min-width: 1024px) { .how__faq { padding-bottom: 6rem; } }

.how__faq-head {
  text-align: center;
  margin-bottom: 4rem;
}
.how__faq-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) { .how__faq-title { font-size: 2.25rem; } }
.how__faq-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  max-width: 42rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .how__faq-desc { font-size: 1.125rem; } }

.how__faq-list {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.how__faq-item {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  overflow: hidden;
}

.how__faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
  cursor: pointer;
  list-style: none; /* hide default marker */
  transition: background-color 0.2s ease;
}
.how__faq-summary::-webkit-details-marker {
  display: none;
}
.how__faq-summary:hover {
  background-color: rgba(249, 250, 251, 0.5);
}
.how__faq-q {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #323755;
  padding-right: 1rem;
}
.how__faq-icon {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.3s ease, color 0.3s ease;
}
/* When <details> is open */
.how__faq-item[open] .how__faq-icon {
  transform: rotate(180deg);
  color: #E60064;
}

.how__faq-body {
  padding: 0.5rem 2rem 1.5rem 2rem;
}
.how__faq-ans {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #374151;
  line-height: 1.625;
  margin: 0;
}

.how__faq-cta {
  text-align: center;
  margin-top: 3rem;
}
.how__faq-cta-text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
}

/* =========================================
   CTA FINAL
   ========================================= */
.how__cta {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background-color: #F8FAFC;
  border-top: 1px solid #f3f4f6;
}
@media (min-width: 1024px) { .how__cta { padding-bottom: 5rem; } }

.how__cta-head {
  text-align: center;
  margin-bottom: 3rem;
}
.how__cta-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #323755;
  line-height: 1.3;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) { .how__cta-title { font-size: 2.25rem; } }
.how__cta-title span { color: #E60064; }
.how__cta-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #6b7280;
  max-width: 36rem;
  margin: 0 auto;
}

.how__cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .how__cta-grid { grid-template-columns: repeat(3, 1fr); }
}

.how__cta-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.how__cta-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.25rem);
}
.how__cta-card--dark {
  background: linear-gradient(to bottom right, #323755, #1f2340);
  border: none;
}

.how__cta-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-color: #E60064;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(230, 0, 100, 0.3);
  transition: transform 0.3s ease;
  color: #ffffff;
}
.how__cta-card--dark .how__cta-icon {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.how__cta-card:hover .how__cta-icon {
  transform: scale(1.1);
}

.how__cta-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #323755;
  margin-bottom: 0.5rem;
}
.how__cta-card--dark .how__cta-card-title { color: #ffffff; }

.how__cta-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  margin-bottom: 1.5rem;
  flex: 1;
}
.how__cta-card--dark .how__cta-card-desc { color: rgba(255, 255, 255, 0.7); }

.how__cta-card-bot {
  border-top: 1px solid #f3f4f6;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.how__cta-card--dark .how__cta-card-bot { border-top-color: rgba(255, 255, 255, 0.1); }

.how__cta-bot-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.125rem;
}
.how__cta-card--dark .how__cta-bot-label { color: rgba(255, 255, 255, 0.5); }
.how__cta-bot-val {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #323755;
}
.how__cta-card--dark .how__cta-bot-val { color: #ffffff; }

.how__cta-arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  color: #E60064;
}
.how__cta-card--dark .how__cta-arrow {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.how__cta-card:hover .how__cta-arrow {
  background-color: #E60064;
  color: #ffffff;
}
.how__cta-card--dark:hover .how__cta-arrow {
  background-color: #ffffff;
  color: #323755;
}

/* Dark card background glow */
.how__cta-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  background-color: #E60064;
  filter: blur(4rem);
  opacity: 0.2;
  border-radius: 9999px;
  transform: translate(25%, -25%);
}

.how__cta-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.how__cta-tags-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}
.how__cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.how__cta-tag svg { color: #E60064; }

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA EVENTOS — CSS Puro (BEM estricto)
   Archivo: eventos.css
   ═══════════════════════════════════════════════════════════════════════════ */

.ev {
  min-height: 100vh;
  background-color: #F8FAFC;
  color: #323755;
}

.ev__container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .ev__container { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .ev__container { padding-left: 8rem; padding-right: 8rem; }
}

/* =========================================
   HERO
   ========================================= */
.ev__hero {
  position: relative;
  overflow: hidden;
  height: 300px;
}
.ev__hero-bg {
  position: absolute;
  inset: 0;
}
.ev__hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ev__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(50, 55, 85, 0.97), rgba(50, 55, 85, 0.80), rgba(50, 55, 85, 0.30));
}
.ev__hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev__hero-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .ev__hero-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .ev__hero-title { font-size: 2.25rem; } }
.ev__hero-title span { color: #E60064; }

.ev__hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 32rem;
  line-height: 1.625;
  margin-bottom: 1.25rem;
}

.ev__hero-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ev__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: #E60064;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}
.ev__hero-btn:hover {
  background-color: #c00556;
}
.ev__hero-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.ev__hero-stats svg { color: rgba(255, 255, 255, 0.5); }

/* =========================================
   FEATURED EVENT
   ========================================= */
.ev__feat {
  background-color: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.ev__feat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(to right, rgba(230, 0, 100, 0.05), transparent);
  border: 1px solid rgba(230, 0, 100, 0.2);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
@media (min-width: 640px) {
  .ev__feat-card { flex-direction: row; align-items: center; justify-content: space-between; }
}

.ev__feat-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ev__feat-flag {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background-color: #E60064;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 10px 15px -3px rgba(230, 0, 100, 0.3);
  flex-shrink: 0;
}
.ev__feat-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}
.ev__feat-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #E60064;
  background-color: rgba(230, 0, 100, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.ev__feat-spots {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}
.ev__feat-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  margin-bottom: 0;
}
.ev__feat-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0;
}

.ev__btn-reg {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background-color: #E60064;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.ev__btn-reg:hover { background-color: #c00556; }
.ev__btn-reg--dark { background-color: #323755; }
.ev__btn-reg--dark:hover { background-color: #E60064; }

/* =========================================
   EVENTS SECTION & FILTERS
   ========================================= */
.ev__main {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) { .ev__main { padding-top: 4rem; padding-bottom: 4rem; } }

.ev__filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .ev__filters { flex-direction: row; align-items: center; justify-content: space-between; }
}

.ev__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ev__region-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ev__region-btn:hover { border-color: #323755; color: #323755; }
.ev__region-btn--active {
  background-color: #323755;
  color: #ffffff;
  border-color: #323755;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ev__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
@media (min-width: 640px) { .ev__controls { width: auto; } }

.ev__search {
  position: relative;
  flex: 1;
}
@media (min-width: 640px) { .ev__search { width: 14rem; } }
.ev__search svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}
.ev__search-input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #323755;
  transition: border-color 0.2s ease;
}
.ev__search-input:focus {
  outline: none;
  border-color: #323755;
}

.ev__views {
  display: flex;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.25rem;
  gap: 0.125rem;
}
.ev__view-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ev__view-btn:hover { color: #4b5563; }
.ev__view-btn--active {
  background-color: #323755;
  color: #ffffff;
}
.ev__view-btn--active:hover { color: #ffffff; }

/* Empty state */
.ev__empty {
  text-align: center;
  padding: 5rem 0;
}
.ev__empty svg {
  color: #e5e7eb;
  margin: 0 auto 1rem auto;
}
.ev__empty p {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.ev__empty button {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #E60064;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ev__empty button:hover { text-decoration: underline; }

/* =========================================
   LIST VIEW
   ========================================= */
.ev__group {
  margin-bottom: 2.5rem;
}
.ev__group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid #323755;
  padding-left: 1rem;
}
.ev__group-head--us { border-left-color: #2563eb; }
.ev__group-head--eu { border-left-color: #7c3aed; }
.ev__group-head--latam { border-left-color: #059669; }

.ev__group-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.ev__group-head--us .ev__group-title { color: #2563eb; }
.ev__group-head--eu .ev__group-title { color: #7c3aed; }
.ev__group-head--latam .ev__group-title { color: #059669; }

.ev__group-count {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  background-color: #f3f4f6;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.ev__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ev__card-list {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.ev__card-list:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: #e5e7eb;
}

.ev__card-list-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .ev__card-list-top { flex-direction: row; align-items: center; }
}

.ev__cl-flag {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.ev__cl-info {
  flex: 1;
  min-width: 0;
}
@media (min-width: 640px) { .ev__cl-info { width: 11rem; } }
.ev__cl-city {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}
.ev__cl-city p {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  margin: 0;
}
.ev__cl-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.ev__cl-venue {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev__cl-col {
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .ev__cl-col--date { width: 9rem; }
  .ev__cl-col--time { width: 8rem; }
  .ev__cl-col--spots { width: 7rem; }
}
.ev__cl-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}
.ev__cl-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #323755;
  font-weight: 600;
  margin: 0;
}

.ev__cl-spots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ev__cl-bar {
  flex: 1;
  height: 0.375rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}
.ev__cl-fill {
  height: 100%;
  background-color: #E60064;
  border-radius: 9999px;
}
.ev__cl-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.ev__cl-num--low { color: #E60064; }

.ev__card-list-bot {
  padding: 0 1.25rem 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-top: 1px solid #f9fafb;
  padding-top: 0.75rem;
}
.ev__card-list-bot svg { color: #9ca3af; }
.ev__card-list-bot p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}

/* =========================================
   GRID VIEW
   ========================================= */
.ev__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .ev__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ev__grid { grid-template-columns: repeat(3, 1fr); } }

.ev__card-grid {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}
.ev__card-grid:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.25rem);
}
.ev__cg-top {
  height: 0.375rem;
  background: linear-gradient(to right, #323755, #E60064);
}
.ev__cg-body {
  padding: 1.5rem;
}
.ev__cg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ev__cg-flag {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.ev__cg-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}

.ev__cg-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #323755;
  margin-bottom: 0.25rem;
}
.ev__cg-venue {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 1rem;
}

.ev__cg-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ev__cg-info-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #4b5563;
}
.ev__cg-info-item svg { color: #E60064; }

.ev__cg-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ev__cg-address svg { color: #9ca3af; flex-shrink: 0; }
.ev__cg-address p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev__cg-spots {
  margin-bottom: 1.25rem;
}
.ev__cg-spots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.ev__cg-spots-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}
.ev__cg-spots-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #323755;
}
.ev__cg-spots-val--low { color: #E60064; }
.ev__cg-spots-bar {
  height: 0.375rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}
.ev__cg-spots-fill {
  height: 100%;
  background: linear-gradient(to right, #E60064, #c00556);
  border-radius: 9999px;
}

.ev__btn-full {
  width: 100%;
  display: block;
  text-align: center;
}

/* =========================================
   CTA WHATSAPP
   ========================================= */
.ev__cta {
  padding-top: 3rem;
  padding-bottom: 4rem;
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
}
@media (min-width: 1024px) { .ev__cta { padding-top: 4rem; } }

.ev__cta-card {
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  border-radius: 1.5rem;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) { .ev__cta-card { padding: 3rem; } }
.ev__cta-glow {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: radial-gradient(circle at 80% 50%, #E60064 0%, transparent 55%);
}

.ev__cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
  z-index: 10;
  align-items: center;
}
@media (min-width: 1024px) { .ev__cta-grid { grid-template-columns: repeat(2, 1fr); } }

.ev__cta-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px) { .ev__cta-title { font-size: 1.875rem; } }
.ev__cta-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.625;
  margin: 0;
}

.ev__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) { .ev__cta-actions { flex-direction: row; } }

.ev__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.ev__cta-btn--primary {
  background-color: #E60064;
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: none;
}
.ev__cta-btn--primary:hover {
  background-color: #c00556;
  transform: scale(1.05);
}
.ev__cta-btn--outline {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ev__cta-btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* =========================================
   MODAL
   ========================================= */
.ev__modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ev__modal--open {
  visibility: visible;
  opacity: 1;
}

.ev__modal-content {
  background-color: #ffffff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 48rem; /* 3xl */
  display: flex;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
}
.ev__modal--open .ev__modal-content {
  transform: scale(1) translateY(0);
}

.ev__modal-left {
  flex: 1;
  padding: 2rem;
}
@media (min-width: 1024px) { .ev__modal-left { padding: 2.5rem; } }

.ev__modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.ev__modal-badge-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E60064;
}
.ev__modal-badge-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #E60064;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ev__modal-title {
  font-family: 'LT Wave', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #323755;
  margin-bottom: 0.25rem;
}
.ev__modal-venue {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 1.5rem;
}

.ev__modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ev__modal-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
}
.ev__modal-meta-item svg { color: #E60064; }
.ev__modal-meta-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: #d1d5db;
}
.ev__modal-meta-spots {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.ev__modal-meta-spots--low { color: #E60064; }

.ev__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ev__form-group {
  display: flex;
  flex-direction: column;
}
.ev__form-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.375rem;
}
.ev__form-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #323755;
  transition: border-color 0.2s ease;
}
.ev__form-input:focus {
  outline: none;
  border-color: #E60064;
}

.ev__form-submit {
  width: 100%;
  padding: 0.875rem;
  background-color: #E60064;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  margin-top: 0.5rem;
}
.ev__form-submit:hover { background-color: #c00556; }

.ev__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 0;
}
.ev__success-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: #dcfce3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  margin-bottom: 1rem;
}
.ev__success-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #323755;
  margin-bottom: 0.25rem;
}
.ev__success-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
}

.ev__modal-right {
  display: none;
  width: 18rem;
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .ev__modal-right { display: block; } }
.ev__modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.ev__modal-close:hover { background-color: rgba(255, 255, 255, 0.3); }
.ev__modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev__modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 55, 85, 0.9), rgba(50, 55, 85, 0.3), transparent);
}
.ev__modal-img-content {
  position: absolute;
  bottom: 1.5rem;
  left: 1.25rem;
  right: 1.25rem;
}
.ev__modal-img-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.ev__modal-img-flag { font-size: 1.5rem; }
.ev__modal-img-country {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.ev__modal-img-title {
  font-family: 'LT Wave', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.ev__modal-img-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   FAVORITOS (/favoritos) — guía Favoritos.tsx
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: 200px, overlay #323755 95→80→40 ─────────────────── */
.vnt-fav-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.vnt-fav-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vnt-fav-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(50,55,85,.95), rgba(50,55,85,.80), rgba(50,55,85,.40));
}
.vnt-fav-hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* flex items-center gap-3 mb-2 */
.vnt-fav-hero-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
/* w-9 h-9 rounded-full bg-[#E60064]/20 */
.vnt-fav-hero-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(230,0,100,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* text-2xl sm:text-3xl lg:text-4xl text-white font-bold LT Wave */
.vnt-fav-title {
  font-family: var(--vnt-font-title);
  font-weight: 700;
  color: white;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 640px)  { .vnt-fav-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .vnt-fav-title { font-size: 2.25rem; } }
/* text-sm text-white/70 */
.vnt-fav-count {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* ── Contenido: py-12 ──────────────────────────────────────── */
.vnt-fav-main {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: #F8FAFC;
}
.vnt-fav { background: #F8FAFC; }

/* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 */
.vnt-fav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px)  { .vnt-fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vnt-fav-grid { grid-template-columns: repeat(3, 1fr); } }
/* TelerikRootComponent inyecta <telerik-blazor> dentro del grid — neutralizar (Regla #2) */
.vnt-fav-grid telerik-blazor { display: contents; }

.vnt-fav-loading {
  text-align: center;
  padding: 5rem 0;
  color: #4b5563;
}

/* ── Botón Trash2 flotante sobre la imagen de la card ──────────
   absolute top-4 right-4 w-10 h-10 rounded-full bg-white/95
   backdrop-blur shadow-lg hover:bg-red-50 ─────────────────── */
.vnt-fav-remove-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 2;
  color: #4b5563;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  transition: background .2s, color .2s;
}
.vnt-fav-remove-btn:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ── Empty state: text-center py-20 ────────────────────────── */
.vnt-fav-empty {
  text-align: center;
  padding: 5rem 0;
}
/* w-24 h-24 rounded-full bg-gray-100, Heart 48 gray-400 */
.vnt-fav-empty-icon {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
/* text-2xl text-[#323755] mb-3 font-bold */
.vnt-fav-empty-title {
  font-family: var(--vnt-font-title);
  font-weight: 700;
  font-size: 1.5rem;
  color: #323755;
  margin: 0 0 .75rem;
}
/* text-base text-gray-600 mb-6 max-w-md mx-auto */
.vnt-fav-empty-text {
  font-size: 1rem;
  color: #4b5563;
  margin: 0 auto 1.5rem;
  max-width: 28rem;
}
.vnt-fav-empty-actions {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
/* inline-block px-8 py-3 bg-[#323755] text-white font-semibold text-sm rounded-full hover:bg-[#2A2F47] */
.vnt-fav-cta {
  display: inline-block;
  padding: .75rem 2rem;
  background: #323755;
  color: white !important;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s;
}
.vnt-fav-cta:hover { background: #2A2F47; }
.vnt-fav-cta-secondary {
  display: inline-block;
  padding: .75rem 2rem;
  background: transparent;
  color: #323755 !important;
  border: 2px solid #323755;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.vnt-fav-cta-secondary:hover { background: #323755; color: white !important; }

/* ── Botón "Me interesa" del detalle — estado guardado ─────────
   Inversión del hover ya definido (la guía no define el activo) */
.det-cta-interest--active {
  background: #E60064;
  color: white;
}

/* ═══════════════════════════════════════════════════════════
   MODAL DE LOGIN (anónimo intenta guardar favorito)
   ═══════════════════════════════════════════════════════════ */
.vnt-login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,29,46,.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.vnt-login-modal {
  position: relative;
  background: white;
  border-radius: 1rem;
  padding: 2.5rem 2rem 2rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,.25);
}
.vnt-login-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: .25rem;
  line-height: 0;
}
.vnt-login-modal-close:hover { color: #4b5563; }
.vnt-login-modal-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(230,0,100,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.vnt-login-modal-title {
  font-family: var(--vnt-font-title);
  font-weight: 700;
  font-size: 1.25rem;
  color: #323755;
  margin: 0 0 .5rem;
}
.vnt-login-modal-text {
  font-size: .875rem;
  color: #4b5563;
  margin: 0 0 1.5rem;
}
.vnt-login-modal-actions {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.vnt-login-modal-btn-primary {
  display: block;
  padding: .75rem 1.5rem;
  background: #E60064;
  color: white !important;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s;
}
.vnt-login-modal-btn-primary:hover { background: #c00556; }
.vnt-login-modal-btn-secondary {
  display: block;
  padding: .75rem 1.5rem;
  background: transparent;
  color: #323755 !important;
  border: 2px solid #323755;
  font-weight: 600;
  font-size: .875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.vnt-login-modal-btn-secondary:hover { background: #323755; color: white !important; }

/* ── Card en modo favoritos: "Ver detalles" oscuro (guía Favoritos.tsx) ── */
.proy-btn-details--dark { background: #323755; }
.proy-btn-details--dark:hover { background: #2A2F47; }

/* ═══════════════════════════════════════════════════════════
   STICKY CTA "Hablar con un asesor" (guía StickyBar.tsx)
   Genérico: la lógica de scroll (theme.js) togglea .is-visible.
   ═══════════════════════════════════════════════════════════ */
.vnt-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; transform: translateY(110%); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; }
.vnt-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.vnt-sticky-cta-desktop { display: none; background: linear-gradient(to right, #323755, #1a1d2e); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -10px 25px rgba(0,0,0,.2); }
@media (min-width: 1024px) { .vnt-sticky-cta-desktop { display: block; } }
.vnt-sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.vnt-sticky-cta-title { color: #fff; font-weight: 700; font-size: 1rem; margin: 0 0 .25rem; }
.vnt-sticky-cta-sub { color: rgba(255,255,255,.6); font-size: .875rem; margin: 0; }
.vnt-sticky-cta-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.vnt-sticky-cta-mobile { display: block; background: #fff; box-shadow: 0 -10px 25px rgba(0,0,0,.15); border-top: 1px solid #f3f4f6; padding: 1rem; }
@media (min-width: 1024px) { .vnt-sticky-cta-mobile { display: none; } }
.vnt-sticky-cta-mobile-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem 1.5rem; background: #E60064; color: #fff !important; font-weight: 600; font-size: 1rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(230,0,100,.2); }
.vnt-sticky-cta-mobile-btn:hover { background: #c00556; color: #fff !important; }


/* ═══════════════════════════════════════════════════════════
   CTA de WhatsApp de las barras fijas (US 1160)

   El visitante debe poder agendar en cualquier punto del scroll, y el canal
   de agendamiento del sitio es WhatsApp — así que las tres barras fijas
   (home, favoritos, crédito) llevan la identidad de WhatsApp en vez del rosa
   de marca. Dos variantes, según el fondo que ya tiene cada barra:

     .vv-wa-cta            verde sólido, para la banda navy del desktop
     .vv-wa-cta--outline   logo y texto verdes sobre blanco, para la barra
                           móvil, que ya es blanca

   Los tokens --vv-whatsapp* salen de chrome.css (:root). Los !important son
   necesarios porque .vnt-btn-primary, .StickyBar__cta y los *-mobile-btn ya
   fijan background/color con la misma especificidad o mayor. Deliberado:
   NO se redefine .vnt-btn-primary, que es global a todo el sitio.
   ═══════════════════════════════════════════════════════════ */

.vv-wa-cta {
  background: var(--vv-whatsapp) !important;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(37, 211, 102, .25) !important;
}
.vv-wa-cta:hover {
  background: var(--vv-whatsapp-hover) !important;
  color: #fff !important;
}

/* Variante "logo verde + texto verde". El borde de 2px se descuenta del padding
   (las tres barras móviles usan 1rem 1.5rem) para que el botón conserve la
   misma altura que el sólido. */
.vv-wa-cta--outline {
  background: #fff !important;
  color: var(--vv-whatsapp) !important;
  border: 2px solid var(--vv-whatsapp) !important;
  padding: calc(1rem - 2px) calc(1.5rem - 2px) !important;
  box-shadow: 0 10px 15px -3px rgba(37, 211, 102, .18) !important;
}
.vv-wa-cta--outline:hover {
  background: #ECFDF3 !important;
  color: var(--vv-whatsapp-hover) !important;
  border-color: var(--vv-whatsapp-hover) !important;
}

/* ── Barra de Crédito ─────────────────────────────────────────────────────
   Su markup vive en un módulo HtmlText en la BD, no en el repo, así que las
   clases .vv-wa-cta no se le pueden poner desde código: se aplican acá por
   selector acotado a la barra. Y como tampoco se puede cambiar el <path> del
   ícono, se oculta el SVG genérico y el logo de WhatsApp entra por máscara
   (hereda el color del botón vía background-color: currentColor).

   Es idempotente: si algún día se repega el HtmlText con el SVG correcto,
   el resultado en pantalla es el mismo.
   ──────────────────────────────────────────────────────────────────────── */

.vnt-credito-sticky-actions .vnt-btn-primary {
  background: var(--vv-whatsapp) !important;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(37, 211, 102, .25) !important;
}
.vnt-credito-sticky-actions .vnt-btn-primary:hover {
  background: var(--vv-whatsapp-hover) !important;
  color: #fff !important;
}

.vnt-credito-sticky-mobile-btn {
  background: #fff !important;
  color: var(--vv-whatsapp) !important;
  border: 2px solid var(--vv-whatsapp) !important;
  padding: calc(1rem - 2px) calc(1.5rem - 2px) !important;
  box-shadow: 0 10px 15px -3px rgba(37, 211, 102, .18) !important;
}
.vnt-credito-sticky-mobile-btn:hover {
  background: #ECFDF3 !important;
  color: var(--vv-whatsapp-hover) !important;
  border-color: var(--vv-whatsapp-hover) !important;
}

.vnt-credito-sticky-actions .vnt-btn-primary > svg,
.vnt-credito-sticky-mobile-btn > svg { display: none; }

.vnt-credito-sticky-actions .vnt-btn-primary::before,
.vnt-credito-sticky-mobile-btn::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm5.8 14.03c-.24.68-1.4 1.3-1.93 1.38-.53.08-1.03.11-1.6-.1a13.4 13.4 0 0 1-4.3-2.68 11.1 11.1 0 0 1-2.2-3.02c-.23-.47-.35-.98-.35-1.5 0-.7.28-1.32.72-1.77.16-.16.35-.24.55-.24h.4c.19 0 .38.02.53.36.19.42.63 1.5.68 1.6.06.1.09.23.02.37-.07.14-.13.23-.26.37l-.2.24c-.11.13-.23.27-.1.5.13.24.58.96 1.25 1.55.86.77 1.58 1.01 1.81 1.12.17.08.36.06.5-.08.16-.17.55-.63.7-.85.15-.22.3-.18.5-.11.2.07 1.28.6 1.5.71.22.11.37.17.42.26.05.1.05.55-.19 1.23z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm5.8 14.03c-.24.68-1.4 1.3-1.93 1.38-.53.08-1.03.11-1.6-.1a13.4 13.4 0 0 1-4.3-2.68 11.1 11.1 0 0 1-2.2-3.02c-.23-.47-.35-.98-.35-1.5 0-.7.28-1.32.72-1.77.16-.16.35-.24.55-.24h.4c.19 0 .38.02.53.36.19.42.63 1.5.68 1.6.06.1.09.23.02.37-.07.14-.13.23-.26.37l-.2.24c-.11.13-.23.27-.1.5.13.24.58.96 1.25 1.55.86.77 1.58 1.01 1.81 1.12.17.08.36.06.5-.08.16-.17.55-.63.7-.85.15-.22.3-.18.5-.11.2.07 1.28.6 1.5.71.22.11.37.17.42.26.05.1.05.55-.19 1.23z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* El botón de crédito del desktop es más compacto (17px en el diseño). */
.vnt-credito-sticky-actions .vnt-btn-primary::before { width: 17px; height: 17px; }


/* ═══════════════════════════════════════════════════════════
   ViventaComercial.Colaboradores — página /colaboradores (US 873)

   Valores tomados de los equivalentes ya existentes en el proyecto:
   el hero replica .proy-hero (Proyectos), la barra de búsqueda replica
   .proy-search-section, y el pill del filtro reusa .vnt-select-pill del
   tema. No hay página de Colaboradores en la guía visual, así que se
   sigue el lenguaje ya establecido en lugar de inventar valores.
   ═══════════════════════════════════════════════════════════ */

.col-page {
  background: #F8FAFC;
}

/* ── HERO ──────────────────────────────────────────────────── */
/* Mismo tratamiento que .ev__hero (Eventos): foto de fondo con overlay
   degradado horizontal, oscuro a la izquierda y transparente a la derecha.
   Para cambiar la foto, editar el <img> en Index.razor. */
.col-hero {
  position: relative;
  overflow: hidden;
  height: 240px;
  color: white;
}
.col-hero-bg {
  position: absolute;
  inset: 0;
}
.col-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* El mockup usa un velo azul UNIFORME sobre toda la foto, no el degradado
   horizontal de Eventos: la imagen se ve pareja de lado a lado. */
.col-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(50, 55, 85, 0.78);
}
.col-hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .25rem;
}
.col-hero-title,
section.col-hero h1,
.col-hero h1.col-hero-title {
  font-family: 'Work Sans', -apple-system, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1.2 !important;
  margin: 0 0 .5rem !important;
}
.col-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: rgba(255, 255, 255, .8);
  margin: 0;
  line-height: 1.6;
}

/* El mockup mantiene el título contenido — no escala a 3rem como el de Proyectos. */
@media (min-width: 640px) {
  .col-hero-title,
  section.col-hero h1,
  .col-hero h1.col-hero-title { font-size: 2rem !important; }
  .col-hero-subtitle { font-size: .9375rem; }
}
@media (min-width: 1024px) {
  .col-hero-title,
  section.col-hero h1,
  .col-hero h1.col-hero-title { font-size: 2.25rem !important; }
}

/* ── BÚSQUEDA + FILTRO ─────────────────────────────────────── */
.col-search-section {
  padding: 1.5rem 0;
  background: #F8FAFC;
}
.col-search-bar {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .col-search-bar {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* Buscador nativo: <form method="get">. La página se sirve en RenderMode Static, así
   que no puede depender de eventos de Blazor ni de componentes Telerik. */
.col-search-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.col-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: .75rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #323755;
  outline: none;
  transition: border-color .2s;
}
.col-search-input::placeholder { color: #9ca3af; }
.col-search-input:focus { border-color: #E60064; }

.col-search-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 9999px;
  background: #E60064;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  padding: .75rem 1.5rem;
  cursor: pointer;
  transition: background .2s;
}
.col-search-btn:hover { background: #c00556; }

.col-search-clear {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #4b5563;
  text-decoration: none;
  padding: .75rem .5rem;
}
.col-search-clear:hover { color: #E60064; }

/* El filtro por país se retiró del alcance (decisión de negocio, US 873): el campo
   `country` de Zoho viene vacío en el 62% y sin normalizar en el resto. */

.col-count {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #4b5563;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── GRID ──────────────────────────────────────────────────── */
.col-list-section {
  padding: .5rem 0 4rem;
  background: #F8FAFC;
}
.col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px)  { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .col-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; } }

/* ── TARJETA ───────────────────────────────────────────────── */
/* Marcado plano (<article>), sin TelerikCard: la página se sirve en Static. */
.col-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: 1.25rem .75rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  background: white;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.col-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  border-color: #d1d5db;
  transform: translateY(-.25rem);
}

/* Avatar */
.col-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.col-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.col-avatar-initials {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  letter-spacing: .02em;
  user-select: none;
}

/* Paleta del avatar sin foto. Se asigna de forma estable según el nombre,
   así que cada persona conserva siempre su color. */
.col-avatar--1 { background: #E60064; }
.col-avatar--2 { background: #323755; }
.col-avatar--3 { background: #7c3aed; }
.col-avatar--4 { background: #059669; }
.col-avatar--5 { background: #ea580c; }
.col-avatar--6 { background: #0284c7; }

.col-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .8125rem;
  color: #323755;
  margin: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.col-card-country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.3;
}
.col-card-pin { flex-shrink: 0; color: #9ca3af; }

/* ── MENSAJES (cargando / vacío / error) ───────────────────── */
.col-message {
  text-align: center;
  padding: 3rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  color: #4b5563;
}
.col-message p { margin: 0 0 1rem; }
.col-message--error { color: #b91c1c; }

.col-retry-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: white;
  background: #E60064;
  border: 0;
  border-radius: 9999px;
  padding: .625rem 1.5rem;
  cursor: pointer;
  transition: background .2s;
}
.col-retry-btn:hover { background: #c00556; }

/* ── PAGINACIÓN ────────────────────────────────────────────── */
/* Enlaces reales (?page=N), no un pager de Telerik: tienen que funcionar sin JS. */
.col-pager {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
}
.col-pager-link {
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #323755;
  padding: .5rem 1.25rem;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.col-pager-link:hover { border-color: #E60064; color: #E60064; }
.col-pager-status { color: #4b5563; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSABILIDAD SOCIAL — CSS Puro (BEM estricto)
   Archivo: responsabilidad-social.css
   ═══════════════════════════════════════════════════════════════════════════ */

.rs__hero,
.rs__stats,
.rs__dimensions,
.rs__programs,
.rs__testimonials,
.rs__awards,
.rs__gallery,
.rs__volunteers,
.rs__transparency,
.rs__dei,
.rs__modal-backdrop {
  color: #323755;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  text-align: left;
  box-sizing: border-box;
}

/* box-sizing no se hereda. Lo forzamos en todo lo que viva dentro de una
   sección para no depender del reset del tema de Oqtane: sin esto,
   .rs__transparency-btn y .rs__btn--submit (width:100% + padding) se desbordan
   de su tarjeta. El selector se auto-limita al prefijo `rs__`. */
[class*="rs__"],
[class*="rs__"] *,
[class*="rs__"]::before,
[class*="rs__"]::after,
[class*="rs__"] *::before,
[class*="rs__"] *::after {
  box-sizing: border-box;
}

/* =========================================
   CONTAINER & GLOBALS
   ========================================= */
.rs__container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 640px) {
  .rs__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .rs__container {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

.rs__section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.rs__section-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.875rem;
  color: #323755;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .rs__section-title {
    font-size: 2.25rem;
  }
}

.rs__section-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================
   BUTTONS
   ========================================= */
.rs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.rs__btn--primary {
  background-color: #E60064;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(230, 0, 100, 0.25), 0 4px 6px -2px rgba(230, 0, 100, 0.15);
}
.rs__btn--primary:hover {
  background-color: #c00556;
  transform: scale(1.05);
}

.rs__btn--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
}
.rs__btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.rs__btn--submit {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: #E60064;
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(230, 0, 100, 0.25);
  margin-top: 0.5rem;
}
.rs__btn--submit:hover {
  background-color: #c00556;
}

.rs__btn--gallery-more {
  padding: 0.875rem 2rem;
  border: 2px solid #323755;
  color: #323755;
  background-color: transparent;
}
.rs__btn--gallery-more:hover {
  background-color: #323755;
  color: #ffffff;
}

.rs__btn--gallery-less {
  padding: 0.875rem 2rem;
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background-color: transparent;
}
.rs__btn--gallery-less:hover {
  border-color: #d1d5db;
}

.rs__btn--dei {
  padding: 1rem 1.75rem;
}

/* =========================================
   HERO
   ========================================= */
.rs__hero {
  position: relative;
  overflow: hidden;
  height: 420px;
  background-color: #323755;
}

.rs__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.rs__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(50, 55, 85, 0.9) 0%, rgba(50, 55, 85, 0.7) 50%, rgba(50, 55, 85, 0.2) 100%);
}

.rs__hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rs__hero-content {
  max-width: 36rem;
}

.rs__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(230, 0, 100, 0.25);
  border: 1px solid rgba(230, 0, 100, 0.4);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.rs__hero-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
  .rs__hero-title { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .rs__hero-title { font-size: 2.25rem; }
}
.rs__hero-title span {
  color: #E60064;
}

.rs__hero-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.625;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .rs__hero-desc { font-size: 1rem; }
}
.rs__hero-desc strong {
  color: #ffffff;
}

.rs__hero-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

/* =========================================
   VOLUNTEER MODAL
   ========================================= */
/* Apertura sin JS. El checkbox vive en el módulo del modal; los botones que lo
   abren viven en módulos HtmlText y son <label for="rs-voluntariado">. Un <label>
   alcanza su control desde cualquier punto del documento, así que el botón NO
   necesita ser hermano del checkbox — el `~` de abajo sí lo necesita, y por eso
   el checkbox precede al backdrop dentro del módulo. Mismo truco que
   .rs__gallery-toggle. Queda oculto pero enfocable (Espacio lo alterna).

   OJO: sin la regla `display: none` de .rs__modal-backdrop el modal se ve siempre,
   porque a diferencia del diseño original ya no se renderiza condicionalmente. */
.rs__modal-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.rs__modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1050; /* por encima del header y overlays del tema de Oqtane */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.rs__modal-toggle:checked ~ .rs__modal-backdrop {
  display: flex;
}

/* Cerrar al hacer clic fuera de la tarjeta: capa que cubre todo el fondo y queda
   por debajo de .rs__modal (que sube con z-index). */
.rs__modal-dismiss {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: default;
}

.rs__modal {
  background-color: #ffffff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 48rem;
  display: flex;
  position: relative;
  z-index: 1;
}

.rs__modal-form-wrapper {
  flex: 1;
  padding: 2rem;
  position: relative;
}
@media (min-width: 1024px) {
  .rs__modal-form-wrapper {
    padding: 2.5rem;
  }
}

.rs__modal-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #4b5563;
}
.rs__modal-close:hover {
  background-color: #e5e7eb;
}

.rs__modal-close--mobile {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
@media (min-width: 1024px) {
  .rs__modal-close--mobile {
    display: none;
  }
}

.rs__modal-close--desktop {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: #ffffff;
}
.rs__modal-close--desktop:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.rs__modal-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.rs__modal-badge-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs__modal-badge-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #E60064;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rs__modal-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.5rem;
  color: #323755;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.rs__modal-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.rs__modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
  text-align: center;
}

.rs__modal-success-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: #dcfce7;
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.rs__modal-success-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #323755;
  margin-bottom: 0.25rem;
}

.rs__modal-success-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.rs__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs__form-group {
  display: flex;
  flex-direction: column;
}

.rs__form-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.375rem;
  display: block;
}

.rs__form-input,
.rs__form-select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #323755;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.rs__form-input:focus,
.rs__form-select:focus {
  border-color: #E60064;
}

.rs__modal-image-wrapper {
  display: none;
  width: 18rem;
  flex-shrink: 0;
  position: relative;
}
@media (min-width: 1024px) {
  .rs__modal-image-wrapper {
    display: block;
  }
}

.rs__modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs__modal-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 55, 85, 0.8) 0%, rgba(50, 55, 85, 0.2) 50%, transparent 100%);
}

.rs__modal-image-content {
  position: absolute;
  bottom: 1.5rem;
  left: 1.25rem;
  right: 1.25rem;
}

.rs__modal-image-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.375;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.rs__modal-image-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* =========================================
   IMPACT STATS
   ========================================= */
.rs__stats {
  background-color: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.rs__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .rs__stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rs__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}
@media (min-width: 1024px) {
  .rs__stat-card {
    border-bottom: none;
  }
  .rs__stat-card:last-child {
    border-right: none;
  }
}

.rs__stat-icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  color: #E60064;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.rs__stat-number-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.rs__stat-number {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.875rem;
  color: #323755;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .rs__stat-number { font-size: 2.25rem; }
}

.rs__stat-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #E60064;
  font-weight: 600;
}

.rs__stat-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

/* =========================================
   3 DIMENSIONS OF IMPACT
   ========================================= */
.rs__dimensions {
  background-color: #F8FAFC;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  .rs__dimensions {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.rs__dimensions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .rs__dimensions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rs__dimension-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.rs__dimension-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(-0.5rem);
}

.rs__dimension-header {
  position: relative;
  height: 13rem;
  overflow: hidden;
}

.rs__dimension-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rs__dimension-card:hover .rs__dimension-image {
  transform: scale(1.05);
}

.rs__dimension-overlay {
  position: absolute;
  inset: 0;
}

.rs__dimension-content {
  position: absolute;
  inset: 0;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rs__dimension-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.rs__dimension-icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs__dimension-number {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 700;
  line-height: 1;
}

.rs__dimension-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.rs__dimension-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.625;
  margin: 0;
}

.rs__dimension-body {
  background-color: #ffffff;
  padding: 1.5rem;
}

.rs__dimension-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rs__dimension-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.rs__dimension-item-icon {
  flex-shrink: 0;
}

.rs__dimension-item-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
}

/* =========================================
   PROGRAMS & ALLIANCES
   ========================================= */
.rs__programs {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
}

.rs__programs-header {
  margin-bottom: 3rem;
}
.rs__programs-header .rs__section-title {
  text-align: left;
}
.rs__programs-header .rs__section-desc {
  text-align: left;
  margin: 0;
}

.rs__programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .rs__programs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rs__programs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rs__program-card {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.2s ease;
}
.rs__program-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-0.25rem);
}

.rs__program-image-wrapper {
  position: relative;
  height: 11rem;
  overflow: hidden;
}

.rs__program-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.rs__program-card:hover .rs__program-image {
  transform: scale(1.05);
}

.rs__program-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.rs__program-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

.rs__program-tag--social {
  background-color: #fce7f3;
  color: #be185d;
}
.rs__program-tag--education {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.rs__program-tag--community {
  background-color: #f3e8ff;
  color: #7e22ce;
}
.rs__program-tag--health {
  background-color: #ffe4e6;
  color: #be123c;
}
.rs__program-tag--rights {
  background-color: #fef3c7;
  color: #b45309;
}

.rs__program-logo-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.rs__program-logo-wrapper {
  height: 2rem;
  width: 5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.rs__program-logo {
  max-height: 2rem;
  max-width: 100%;
  object-fit: contain;
}

.rs__program-org-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs__program-content {
  padding: 1.25rem;
}

.rs__program-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.rs__program-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
  margin: 0;
}

/* =========================================
   TESTIMONIALS
   ========================================= */
.rs__testimonials {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  position: relative;
  overflow: hidden;
}

.rs__testimonials-glow {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 50%, #E60064 0%, transparent 55%);
}

.rs__testimonials-inner {
  position: relative;
  z-index: 10;
}

.rs__testimonials-header {
  text-align: center;
  margin-bottom: 3rem;
}

.rs__testimonials-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.875rem;
  color: #ffffff;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .rs__testimonials-title { font-size: 2.25rem; }
}

.rs__testimonials-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.rs__testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .rs__testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rs__testimonial-card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rs__testimonial-quote {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.625;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.rs__testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rs__testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs__testimonial-avatar--rose { background-color: #f43f5e; }
.rs__testimonial-avatar--navy { background-color: #323755; }
.rs__testimonial-avatar--pink { background-color: #E60064; }

.rs__testimonial-avatar-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

.rs__testimonial-info {
  display: flex;
  flex-direction: column;
}

.rs__testimonial-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #ffffff;
  margin: 0;
}

.rs__testimonial-role {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* =========================================
   AWARDS
   ========================================= */
.rs__awards {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #F8FAFC;
}

.rs__awards-header {
  margin-bottom: 3rem;
}
.rs__awards-header .rs__section-title {
  text-align: left;
}
.rs__awards-header .rs__section-desc {
  text-align: left;
  margin: 0;
}

.rs__awards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .rs__awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rs__awards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rs__award-card {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  transition: all 0.2s ease;
}
.rs__award-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.25rem);
}

.rs__award-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.rs__award-icon-wrapper {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: rgba(230, 0, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs__award-year {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  background-color: #f3f4f6;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}

.rs__award-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  line-height: 1.375;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.rs__award-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
  margin: 0;
}

/* =========================================
   GALLERY
   ========================================= */
.rs__gallery {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
}

.rs__gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.rs__gallery-header .rs__section-title {
  text-align: left;
  margin-bottom: 0.25rem;
}
.rs__gallery-header .rs__section-desc {
  text-align: left;
  margin: 0;
}

.rs__gallery-count {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}
@media (min-width: 640px) {
  .rs__gallery-count {
    display: flex;
  }
}

.rs__gallery-grid {
  columns: 2;
  column-gap: 0.75rem;
}
@media (min-width: 640px) {
  .rs__gallery-grid {
    columns: 3;
  }
}
@media (min-width: 1024px) {
  .rs__gallery-grid {
    columns: 4;
  }
}

.rs__gallery-item {
  position: relative;
  break-inside: avoid;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.rs__gallery-img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.rs__gallery-item:hover .rs__gallery-img {
  transform: scale(1.05);
}

.rs__gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rs__gallery-item:hover .rs__gallery-overlay {
  opacity: 1;
}

.rs__gallery-caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #ffffff;
  line-height: 1.375;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rs__gallery-item:hover .rs__gallery-caption {
  opacity: 1;
}

.rs__gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* --- Toggle "Ver todas las fotos / Ver menos" — sin JS ---------------------
   El módulo HTML/Text de Oqtane renderiza con MarkupString: no ejecuta Blazor
   ni <script>. El estado vive en un checkbox que precede a la grilla y a los
   botones dentro del mismo .rs__container, y se lee con el combinador `~`.
   Los dos <label for="rs-gallery-toggle"> hacen de botón.
   -------------------------------------------------------------------------- */

/* Checkbox visualmente oculto pero presente en el orden de tabulación
   (nada de display:none / visibility:hidden: eso lo sacaría del foco). */
.rs__gallery-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Las 3 fotos extra arrancan ocultas; el checkbox marcado las revela. */
.rs__gallery-item--extra {
  display: none;
}
.rs__gallery-toggle:checked ~ .rs__gallery-grid .rs__gallery-item--extra {
  display: block;
}

/* Se muestra un solo botón a la vez. */
.rs__btn--gallery-less {
  display: none;
}
.rs__gallery-toggle:checked ~ .rs__gallery-actions .rs__btn--gallery-more {
  display: none;
}
.rs__gallery-toggle:checked ~ .rs__gallery-actions .rs__btn--gallery-less {
  display: inline-flex;
}

/* El foco del checkbox oculto se dibuja sobre la etiqueta visible. */
.rs__gallery-toggle:focus-visible ~ .rs__gallery-actions .rs__btn {
  outline: 2px solid #E60064;
  outline-offset: 3px;
}

/* =========================================
   VOLUNTEERS + FEATURE
   ========================================= */
.rs__volunteers {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #F8FAFC;
}

.rs__volunteers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .rs__volunteers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rs__volunteers-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.5rem;
  color: #323755;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .rs__volunteers-title { font-size: 1.875rem; }
}

.rs__volunteers-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0;
  margin-bottom: 2rem;
}

.rs__volunteers-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs__volunteer-card {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.rs__volunteer-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.rs__volunteer-rank {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e5e7eb;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.rs__volunteer-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs__volunteer-initials {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

.rs__volunteer-info {
  flex: 1;
  min-width: 0;
}

.rs__volunteer-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs__volunteer-role {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs__volunteer-hours-wrapper {
  text-align: right;
  flex-shrink: 0;
}

.rs__volunteer-hours {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.25rem;
  color: #E60064;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.rs__volunteer-hours-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}

.rs__volunteer-progress-track {
  height: 0.375rem;
  background-color: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}

.rs__volunteer-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #E60064, #c00556);
  border-radius: 9999px;
  transition: width 0.8s ease;
}

.rs__volunteers-cta {
  margin-top: 1.75rem;
}

.rs__volunteers-feature-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  aspect-ratio: 4 / 3;
}

.rs__volunteers-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs__volunteers-feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 55, 85, 0.7) 0%, transparent 100%);
}

.rs__volunteers-feature-content {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
}

.rs__volunteers-feature-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.rs__volunteers-feature-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* =========================================
   TRANSPARENCY & GOVERNANCE
   ========================================= */
.rs__transparency {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #ffffff;
}

.rs__transparency-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .rs__transparency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rs__transparency-left {
  /* sticky left container */
}
@media (min-width: 1024px) {
  .rs__transparency-left {
    position: sticky;
    top: 7rem;
  }
}

.rs__transparency-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(50, 55, 85, 0.08);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: #323755;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rs__transparency-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.875rem;
  color: #323755;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .rs__transparency-title { font-size: 2.25rem; }
}

.rs__transparency-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  max-width: 24rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.rs__transparency-checks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rs__transparency-check-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.rs__transparency-check-icon {
  flex-shrink: 0;
}

.rs__transparency-check-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #4b5563;
}

.rs__transparency-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.rs__transparency-item {
  background-color: #F8FAFC;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.rs__transparency-item:hover,
.rs__transparency-item[open] {
  border-color: rgba(230, 0, 100, 0.2);
}

/* El disparador es un <summary>. `display:flex` ya reemplaza al `list-item`
   por defecto, pero Firefox y Safari necesitan además que se les quite el
   marcador de forma explícita. */
.rs__transparency-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  list-style: none;
}
.rs__transparency-btn::marker,
.rs__transparency-btn::-webkit-details-marker {
  display: none;
  content: "";
}
.rs__transparency-btn:focus-visible {
  outline: 2px solid #E60064;
  outline-offset: -2px;
  border-radius: 1rem;
}

.rs__transparency-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #E60064;
}

.rs__transparency-item-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #323755;
  flex: 1;
}

.rs__transparency-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.rs__transparency-item[open] .rs__transparency-icon {
  transform: rotate(180deg);
}

.rs__transparency-body {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: 1px solid #f3f4f6;
}

.rs__transparency-body-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.rs__transparency-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #E60064;
  text-decoration: none;
  transition: text-decoration 0.2s;
}
.rs__transparency-doc-link:hover {
  text-decoration: underline;
}

/* =========================================
   DEI HIGHLIGHT BANNER
   ========================================= */
.rs__dei {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background-color: #F8FAFC;
}

.rs__dei-card {
  background: linear-gradient(to bottom right, #323755, #1a1d2e);
  border-radius: 1.5rem;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .rs__dei-card {
    padding: 3rem;
  }
}

.rs__dei-glow {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: radial-gradient(circle at 85% 50%, #E60064 0%, transparent 55%);
}

.rs__dei-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .rs__dei-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rs__dei-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(230, 0, 100, 0.2);
  border: 1px solid rgba(230, 0, 100, 0.3);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.rs__dei-title {
  font-family: 'LT_Wave', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
  .rs__dei-title { font-size: 1.875rem; }
}
.rs__dei-title span {
  color: #E60064;
}

.rs__dei-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.625;
  margin: 0;
}

.rs__dei-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .rs__dei-actions {
    flex-direction: row;
  }
}