/* ====================================================================
site-tweaks.css — Overrides de diseño sobre el export de Webflow.
Se carga DESPUÉS de espacios-pucv-2553f5.webflow.css para ganar por orden.
No tocamos el CSS del export para mantenerlo replazable si re-exportan.
==================================================================== */
/* ====================================================================
/sobre-nosotros/ — cards de párrafos largos (.qe_grid.pourquoi.v2)
Misma estructura .p_unit con .pu_image + .pu_text + .p_text.sn pero
son cards informativas (no pasos), con párrafos extensos. El export deja:
- .p_text { color: --azul-pucv (#2a578b); font-size: 15px } → bajo contraste
- .p_text.sn { line-height: 1.6em; margin-right: 30px } → ok pero text muy chico
- .textcontainer { width: 100% } → texto pegado al borde
Mejoras: contraste alto, font-size más legible, padding interno cómodo,
gap entre cards. Sólo afecta sobre-nosotros (selector específico .v2). */
/* Gap interno entre cards (dentro de un .pourquoicontainer) */
.qe_grid.pourquoi.v2 .pourquoicontainer {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/* Gap ENTRE los dos .pourquoicontainer del HTML (sin esto las cards 2 y 3 quedan
pegadas porque pertenecen a contenedores diferentes y el gap interno no aplica) */
.qe_grid.pourquoi.v2 {
display: flex !important;
flex-direction: column !important;
gap: 1.75rem;
}
.qe_grid.pourquoi.v2 .p_unit .pu_text {
padding: 36px 32px;
box-sizing: border-box;
}
.qe_grid.pourquoi.v2 .p_unit .textcontainer {
max-width: 56ch; /* limit reading width para legibilidad */
}
.qe_grid.pourquoi.v2 .p_text.sn {
font-size: 1rem !important; /* 15px → 16px (más legible) */
line-height: 1.7 !important; /* 1.6em → 1.7 más respirable */
font-weight: 400;
color: #1a202c !important; /* contraste alto (era azul-pucv #2a578b) */
margin: 0 !important; /* override margin-right: 30px que descuadraba */
}
/* En cards .dark (fondo azul) el texto va blanco para mantener contraste */
.qe_grid.pourquoi.v2 .p_unit.dark .p_text.sn {
color: #fff !important;
opacity: 0.95;
}
.qe_grid.pourquoi.v2 .p_unit.medium .p_text.sn {
color: #fff !important;
opacity: 0.95;
}
/* Strong (palabras como "PUCV Santiago") con peso visual: en cards claras
azul-pucv, en cards oscuras color crema/destaque */
.qe_grid.pourquoi.v2 .p_text.sn strong {
color: #2a578b;
font-weight: 600;
}
.qe_grid.pourquoi.v2 .p_unit.dark .p_text.sn strong,
.qe_grid.pourquoi.v2 .p_unit.medium .p_text.sn strong {
color: #fff;
opacity: 1;
}
/* ---- Mobile (≤767px): stack image-arriba + texto-abajo ---- */
@media (max-width: 767px) {
.qe_grid.pourquoi.v2 .p_unit {
flex-flow: column !important;
height: auto !important;
min-height: auto;
border-radius: 1.25rem !important;
overflow: hidden;
}
.qe_grid.pourquoi.v2 .p_unit .pu_image {
width: 100% !important;
height: 240px !important;
order: 1;
border-radius: 0 !important;
}
/* Normalizamos el .pu_text en mobile: alineación CENTRADA y simétrica.
IMPORTANTE: el .whitesymbol está vacío en sobre-nosotros pero el export
le aplica width:50px + margin-left:20px + margin-right:20px → ocupa 90px
a la izquierda dentro del flex-row de .pu_text, descentrando el texto.
Lo ocultamos en mobile para que .textcontainer pueda centrarse de verdad. */
.qe_grid.pourquoi.v2 .p_unit .whitesymbol:empty {
display: none !important;
}
.qe_grid.pourquoi.v2 .p_unit .pu_text {
width: 100% !important;
order: 2;
/* Override del export: a <767px aplica margin-top: 50px + margin-bottom: 50px
a .pu_text, lo que creaba el "vacío" entre imagen y texto en mobile. */
margin: 0 !important;
padding: 28px 24px !important; /* simétrico — top y bottom iguales */
flex-direction: column !important; /* en lugar de row, evita interferencia del whitesymbol */
justify-content: flex-start !important;
align-items: center !important;
flex: 0 0 auto !important;
height: auto !important;
}
/* El .p_unit en mobile también es flex column. Forzamos height a content
(sin estirar) para que el espacio top/bottom alrededor del texto sea
simétrico determinado solo por padding (28px cada lado). */
.qe_grid.pourquoi.v2 .p_unit {
align-items: stretch !important;
}
.qe_grid.pourquoi.v2 .p_unit .textcontainer {
max-width: 100%;
width: 100%;
margin: 0;
text-align: center;
}
/* El propio párrafo: texto centrado para que líneas wrappeen simétricas */
.qe_grid.pourquoi.v2 .p_text.sn {
text-align: center !important;
margin: 0 auto !important; /* sin margin lateral asimétrico del export */
max-width: 32ch; /* limita ancho para mejor wrap simétrico en mobile */
}
/* Aumentamos el gap entre cards en mobile para mejor respiración */
.qe_grid.pourquoi.v2,
.qe_grid.pourquoi.v2 .pourquoicontainer {
gap: 1.5rem;
}
/* Duplicado mobile-only: mostrar .mobile, ocultar el desktop equivalente */
.qe_grid.pourquoi.v2 .p_unit.dark.mobile { display: flex !important; }
.qe_grid.pourquoi.v2 .p_unit.dark:not(.mobile) { display: none !important; }
.qe_grid.pourquoi.v2 .stickytitle.nos {
font-size: 1.85rem;
line-height: 1.25;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* ====================================================================
C6 · text-transform: capitalize en inputs de email/tel/number
El export pone .contact__input con text-transform: capitalize. Está bien
para Nombre pero rompe formato de email (juan@gmail.com → Juan@Gmail.Com)
y teléfono cuando hay separadores (+56 2 2344 5800 → +56 2 2344 5800 ok
pero cualquier letra se capitaliza). En autofill o paste, también
rompe — el browser pega valor lower-case y CSS lo capitaliza visualmente,
confundiendo al usuario. Override para email/tel/number/url. */
.contact__input[type="email"],
.contact__input[type="tel"],
.contact__input[type="number"],
.contact__input[type="url"],
.contact__input[name="message"], /* mensaje libre — no capitalizar cada palabra */
.form-field[type="email"],
.form-field[type="tel"],
.form-field[type="number"],
.form-field[type="url"],
.form-field[name="message"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
.text-area {
text-transform: none !important;
}
/* ====================================================================
Fallback grid-placement para textarea de mensaje en .form-2
El export usa `#message.w-node-...` para asignar `grid-area: span 1 / span 2`
al textarea (que debe ocupar 2 columnas en el grid). Como renombramos los
`id="message"` para evitar IDs duplicados (C4), agregamos esta regla que
selecciona por `name="message"` (estable) y reasegura el span sobre 2 cols.
También aplica al heading "Reserva tu espacio" (primer w-node) y al
checkbox + submit que también necesitan span. */
.form-2 textarea[name="message"],
.form-2 .w-checkbox.checkbox-field,
.form-2 .w-checkbox.checkbox-field-2,
.form-2 input[type="submit"] {
grid-column: span 2;
}
/* ---------- Submit del form de cotización (Form 1) — fix texto blanco
sobre fondo blanco + duplicación del label ----------
El export envuelve el `Reservar Espacio
` DUPLICADO como
label visible. El submit está absolute encima con z:99 y texto blanco
(invisible originalmente). Esto causaba dos bugs encadenados:
1) "Reservar Espacio" invisible (blanco sobre blanco del submit input)
2) Si solo dabamos color al submit, su texto se superponía con el del
text-block-8 abajo (efecto de texto doble desfasado)
Fix: hide el `.text-block-8` redundante (display:none) y dejar SOLO el
submit con texto azul-pucv. El wrapper tiene height: 40px fijo, así
que ocultar el div interior no rompe layout. Bonus: el `data-wait="Enviando..."`
funciona nativamente — durante el submit Webflow swap el value del input
y nuestro color azul se mantiene en ambos textos. */
.contact-form .submit-btn,
.contact-form input[type="submit"].submit-btn,
.button-3.mod--form input[type="submit"] {
color: var(--azul-pucv) !important;
font-weight: 600;
}
.contact-form .submit-btn:hover,
.button-3.mod--form input[type="submit"]:hover {
color: var(--steel-blue) !important;
}
.button-3.mod--form .text-block-8 {
display: none !important;
}
/* ====================================================================
AUDITORÍA DE FONT-SIZES — MOBILE ONLY (≤767px)
El export deja varios elementos con tamaños sub-óptimos en mobile:
- .form-field sin font-size explícito → hereda 14px → iOS hace zoom al focus
- .text-area: 14px → mismo problema iOS zoom
- h5 .p_label: 12.48px → demasiado chico para legibilidad mobile
- body text inconsistente entre 13-20px
- H1/H2 a veces a 50px+ en mobile
Este bloque corrige sólo en mobile (NO toca desktop). */
@media (max-width: 767px) {
/* === INPUTS / FORMS — bump a 16px para prevenir el auto-zoom de iOS al
hacer focus en cualquier input con font-size <16px (regla iOS Safari). */
.form-field,
.text-area,
.contact__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
font-size: 16px !important;
}
/* Placeholder: heredar font-size del input (algunos browsers lo hacen smaller) */
.form-field::placeholder,
.text-area::placeholder,
.contact__input::placeholder {
font-size: 16px;
}
/* === H5 LABELS pequeños (.p_label "paso uno/dos/tres", body-text-14) —
bump a 13px mínimo para legibilidad sin perder jerarquía visual. */
h5,
.body-text-14 {
font-size: 0.82rem !important; /* ~13.1px, antes 12.48px */
}
/* === BODY TEXT — normaliza párrafos extra-chicos (≤14px) a 15px mínimo
para legibilidad. Excluye los ya bien dimensionados. */
.paragraph-small,
.short-paragraph {
font-size: 0.95rem !important; /* ~15.2px */
line-height: 1.55;
}
/* === H1 con bandera bajada en mobile (max 2.25rem para que no rompa layout) */
h1.heading-27 { /* "Otras formas de contacto" en /contacto/ */
font-size: 1.7rem !important;
line-height: 1.2;
}
/* === BUTTON font-size mínimo (legibilidad + tappability) */
.button.w-button {
font-size: 0.95rem;
}
}
/* ====================================================================
Form del footer (cotización "Tu espacio ideal está disponible..."):
El export deja .contact_form-block con margin-left: 13.9rem (222px) en
desktop, lo que carga el form a la izquierda dejando un hueco asimétrico
a la derecha. Lo centramos con margin-left/right: auto.
El .contact__heading-wrap (título "Tu espacio ideal está disponible...")
también queda con su propio offset — lo dejamos quieto porque el título
tiene un layout intencional con 2 líneas (".contact__title.mod--right"
está alineado a la derecha) que da identidad visual a la sección.
En mobile el export ya hace margin-left:0 + max-width:none, así que
este fix sólo cambia el comportamiento desktop/tablet. */
.contact_form-block {
margin-left: auto !important;
margin-right: auto !important;
}
/* ====================================================================
/sala-alumni/ — sección .section-8 con .frame.first/second/third
El export deja 3 frames decorativos (sin texto) cada uno con height: 100vh
y background-attachment: fixed (parallax). Total: 300vh de scroll sólo
para 3 fotos. Rompe ritmo de navegación y desentona con el resto del sitio.
Los compactamos a galería horizontal de 3 fotos lado a lado, con altura
razonable y sin parallax. Mantenemos los overlays azul PUCV (--steel-blue,
--40-azul-pucv) que ya están en paleta. */
.section-8 {
padding: 4rem 1.5rem;
}
.section-8 .frame-parent {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1rem;
max-width: 1280px;
margin: 0 auto;
height: auto !important;
}
.section-8 .frame {
width: auto !important;
height: 360px !important;
padding: 0 !important;
border-radius: 14px !important;
background-attachment: scroll, scroll, scroll !important; /* remove parallax fixed */
background-size: auto, cover, cover !important; /* normalizamos size — descartamos el "contain" raro de .frame.first */
transition: transform .4s ease, box-shadow .4s ease;
cursor: default;
}
.section-8 .frame:hover {
transform: translateY(-4px);
box-shadow: 0 18px 32px rgba(42, 87, 139, 0.18);
}
@media (max-width: 991px) {
.section-8 { padding: 3rem 1.25rem; }
.section-8 .frame { height: 280px !important; }
}
@media (max-width: 767px) {
.section-8 { padding: 2.5rem 1rem; }
.section-8 .frame-parent {
grid-template-columns: 1fr !important;
gap: 12px;
}
.section-8 .frame {
height: 220px !important;
border-radius: 12px !important;
}
}
/* ====================================================================
/salas/ — cards numeradas (.card-2.is-one/is-two/is-three) "Salas de
Capacitación / Salas Ejecutivas / Salas de Reunión".
Problemas del export:
- .card_number-circle (2rem, fondo BLANCO) + .card_number (color #000)
→ en .card-2.is-one (fondo blanco) el número es INVISIBLE
- En mobile el layout sigue siendo row 43%/57% → todo apretado, título cortado
- position: sticky en mobile causa overlap raro al scrollear
Mejoras: número en círculo azul PUCV con texto blanco (alto contraste),
más grande y prominente; en mobile stack vertical image + content. */
/* Número en círculo: azul PUCV en lugar de blanco, texto blanco bold */
.card_number-circle {
background-color: #2a578b !important;
width: 2.5rem !important;
height: 2.5rem !important;
box-shadow: 0 4px 10px rgba(42, 87, 139, 0.25);
flex: 0 0 auto;
}
.card_number {
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1;
}
/* Heading consistencia */
.card-2 .heading-31 {
line-height: 1.2;
margin: 0;
}
/* Reemplazamos los colores verde (#2ba07d) y morado (#511de0) del template
Webflow por la paleta PUCV. Card .is-one queda fondo blanco-suave (neutro),
.is-two azul PUCV medio (--steel-blue #096ad0), .is-three azul PUCV oscuro
(--midnight-blue #002D55). Variedad visual manteniendo identidad de marca. */
.card-2.is-one {
background-color: #f1f4f9 !important; /* gris-azulado muy suave, neutral */
}
.card-2.is-two {
background-color: #096ad0 !important; /* steel-blue */
}
.card-2.is-three {
background-color: #002D55 !important; /* midnight-blue */
}
.card-2 .card_content {
background-color: transparent !important;
}
.card-2.is-one .heading-31 {
color: #2a578b;
}
.card-2.is-two .heading-31,
.card-2.is-three .heading-31 {
color: #fff;
}
/* ---- Mobile (≤767px): stack vertical, image arriba + content abajo ---- */
@media (max-width: 767px) {
.cards_wrapper {
margin-bottom: 4rem !important;
gap: 1.5rem;
}
.card-2 {
flex-direction: column !important;
min-height: auto !important;
height: auto !important;
position: static !important; /* desactiva el sticky raro en mobile */
border-radius: 1rem;
overflow: hidden;
}
.card-2 .card_image {
width: 100% !important;
height: 220px !important;
object-fit: cover;
order: 1;
}
.card-2 .card_content {
width: 100% !important;
order: 2;
padding: 1.5rem 1.5rem 1.75rem !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
}
/* Número aún más grande en mobile para mejor presencia */
.card_number-circle {
width: 2.75rem !important;
height: 2.75rem !important;
}
.card_number {
font-size: 1.2rem !important;
}
.card-2 .heading-31 {
font-size: 1.2rem !important;
flex: 1 1 auto;
min-width: 0;
}
}
/* ---------- M7 · Hover lift en cards de /salas/
Las 3 cards (.cards_wrapper > .card-2.is-one|is-two|is-three) son grandes
y prominentes pero el export las dejaba como divs estáticos sin feedback
al pasar el mouse → no comunicaban "esto es interactivo".
- Lift de 6px + sombra azul-pucv suave en hover.
- Zoom 1.04 sobre la imagen interna (.card_image) para movement adicional
que refuerza la sensación de profundidad.
- cursor: pointer + role="link" + click handler agregados desde JS
(form-handler.js → initSalasCards) para navegar a /todas-las-salas/?tab=N.
Mapping del cliente confirmado en /todas-las-salas/:
Card 1 "Salas de Capacitación" → ?tab=2
Card 2 "Salas Ejecutivas" → ?tab=3
Card 3 "Salas de Reunión" → ?tab=1 */
.cards_wrapper .card-2 {
transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow .3s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
}
.cards_wrapper .card-2:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg); /* M12: token unificado (era 0 12px 32px rgba(42,87,139,0.18)) */
}
.cards_wrapper .card-2 .card_image {
transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cards_wrapper .card-2:hover .card_image {
transform: scale(1.04);
}
/* Foco con teclado: mismo lift + halo azul (a11y, ya que ahora son
"links" via JS con tabindex+role aplicado). */
.cards_wrapper .card-2:focus-visible {
transform: translateY(-6px);
box-shadow: var(--shadow-lg),
0 0 0 3px rgba(9, 106, 208, 0.35); /* M12 token + halo de foco */
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.cards_wrapper .card-2,
.cards_wrapper .card-2 .card_image {
transition: none;
}
.cards_wrapper .card-2:hover {
transform: none;
}
.cards_wrapper .card-2:hover .card_image {
transform: none;
}
}
/* ====================================================================
/auditorio-fernando-rosas/ — sección "Equipamiento y Servicios"
Las cards (.cards_cms_item) tienen el .card_heading h3 con line-height
por default del browser (cerca de 2x el font-size, ej. 34px sobre 16.8px),
lo que separa demasiado las líneas en títulos de 2+ líneas como
"Micrófonos inalámbricos y cableados" o "Posibilidad de servicio de
catering según tu necesidad". Ajustamos a 1.3 para mejor cohesión visual. */
.cards_cms_item .card_heading {
line-height: 1.3 !important;
margin-bottom: 0 !important;
}
/* ====================================================================
Sección "Ubicación" con Google Maps embed — insertada antes del form
del footer en home + páginas de sala (index, salas, sala-alumni,
terraza-techada, auditorio-fernando-rosas). Diseño limpio, mapa con
border-radius y sombra para integrarse al look del sitio.
==================================================================== */
.fh-ubicacion-section {
padding: 64px 24px 72px;
background: #fff;
}
.fh-ubicacion-wrapper {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.fh-ubicacion-title {
font-family: Montserrat, Arial, sans-serif;
font-size: 2.25rem;
font-weight: 500;
color: #2a578b;
margin: 0 0 12px;
letter-spacing: -0.015em;
}
.fh-ubicacion-address {
font-family: Montserrat, Arial, sans-serif;
font-size: 1.05rem;
color: #4a5568;
margin: 0 0 32px;
line-height: 1.5;
}
.fh-ubicacion-map {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(42, 87, 139, 0.14);
background: #e8eef5; /* placeholder mientras carga el iframe */
}
.fh-ubicacion-map iframe {
display: block;
width: 100%;
height: 450px;
border: 0;
}
@media (max-width: 991px) {
.fh-ubicacion-section { padding: 56px 20px 64px; }
.fh-ubicacion-title { font-size: 2rem; }
.fh-ubicacion-map iframe { height: 400px; }
}
@media (max-width: 767px) {
.fh-ubicacion-section { padding: 48px 16px 56px; }
.fh-ubicacion-title { font-size: 1.7rem; }
.fh-ubicacion-address { font-size: 0.98rem; margin-bottom: 24px; }
.fh-ubicacion-map { border-radius: 12px; }
.fh-ubicacion-map iframe { height: 340px; }
}
/* ====================================================================
Hero banner CTAs — la sección .section-6.mod--hero tiene overflow:hidden
(necesario para clip del video/image background) lo que recortaba el
drop-shadow inferior de los botones "Ver Espacios" / "Consultar Disponibilidad".
Agregamos un margin-bottom al wrapper de botones para que la sombra (4-11px
abajo) tenga espacio para render dentro del clipping de la sección. */
.section-6.mod--hero .value-proposition-buttons {
margin-bottom: 18px;
}
/* En el hero también queremos asegurarnos que cualquier .button con shadow no
quede pegado al borde inferior. Padding-bottom adicional al hero. */
.section-6.mod--hero {
padding-bottom: 3.5rem;
}
/* ====================================================================
Navbar mobile (≤991px): mostrar TODOS los items del navbar desktop
en una lista plana con buena jerarquía y CTA Reservar Espacio al final.
El export deja los dropdowns Auditorio/Salas colapsados (requiere tap),
y la CTA "Reservar Espacio" oculta en mobile (.w-hidden-medium).
==================================================================== */
@media (max-width: 991px) {
/* El menu mobile de Webflow es .nav-menu-container — lo convertimos en
una columna vertical scrolleable con padding cómodo. */
.nav-menu-container.w-nav-menu {
background: var(--midnight-blue, #002D55);
width: 100%;
min-height: 100vh;
padding: 8px 0 32px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Forzar expandidos los dropdowns por default — flat list mejor que dropdowns
anidados que requieren tap extra en mobile (jakob's law). */
.nav-menu-container .w-dropdown {
display: block !important;
width: 100%;
}
.nav-menu-container .w-dropdown-list {
position: static !important;
display: block !important;
background: transparent !important;
box-shadow: none !important;
width: 100%;
max-height: none !important;
height: auto !important;
overflow: visible !important;
transform: none !important;
opacity: 1 !important;
margin: 0;
padding: 0;
}
/* El "toggle" del dropdown (Auditorio, Salas) ahora actúa como header de
sección — uppercase pequeño, no clickable visualmente, separator arriba. */
.nav-menu-container .w-dropdown-toggle {
pointer-events: none; /* no se ve como botón, sólo etiqueta de grupo */
padding: 22px 28px 10px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5) !important;
background: transparent !important;
border-bottom: none !important;
}
.nav-menu-container .w-dropdown-toggle .text-block-2 {
color: inherit;
font-size: inherit;
text-align: left;
text-transform: uppercase;
}
/* Ocultar la flecha del dropdown — ya no toggle */
.nav-menu-container .w-icon-dropdown-toggle,
.nav-menu-container .icon-2 {
display: none !important;
}
/* Items dentro de los dropdowns: links de tap target generoso (≥48px alto).
Estilo similar al de los nav-link-3 (PUCV, Nosotros) para consistencia.
El export pone .page-preview-link { height: 160px } en <479px y { height: 22px }
en <991px — ambos rotos. Override con height: auto. */
.nav-menu-container .page-preview-link.w-inline-block {
display: flex !important;
align-items: center;
width: 100%;
height: auto !important;
padding: 16px 28px !important;
color: #fff;
text-decoration: none;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: background .15s ease;
}
.nav-menu-container .page-preview-link.w-inline-block:hover,
.nav-menu-container .page-preview-link.w-inline-block:active {
background: rgba(255, 255, 255, 0.05);
}
/* El icono SVG dentro del page-preview-link se mantiene chico a la izquierda */
.nav-menu-container .nav-link-with-icon-containr {
display: flex;
align-items: center;
gap: 14px;
}
.nav-menu-container .nav-link-with-icon-containr .menu-icon {
width: 22px;
height: 22px;
filter: brightness(0) invert(1);
opacity: 0.85;
}
.nav-menu-container .nav-link-with-icon-containr .text-block {
font-family: Montserrat, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #fff;
}
/* Links sueltos PUCV / Nosotros — mismo padding que los items de dropdown
para alineación visual consistente. Override del padding 31px del export
que era demasiado vertical. */
.nav-menu-container > .nav-link-3.w-nav-link:not(.fh-mobile-cta) {
padding: 18px 28px !important;
font-size: 1rem;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* CTA "Reservar Espacio" — botón prominente al final del menu mobile.
La clase .fh-mobile-cta la añadimos al markup.
IMPORTANTE: el .nav-link-3 del export tiene width: 100% — combinado con
margin 24px lateral causaba scroll horizontal en mobile (388px viewport
+ 48px margen = overflow). Forzamos width: auto para que respete margen. */
.nav-menu-container .fh-mobile-cta {
display: block !important;
width: auto !important;
margin: 24px 24px 8px !important;
padding: 16px 24px !important;
background: var(--azul-pucv, #2a578b) !important;
color: #fff !important;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.92rem !important;
font-weight: 600 !important;
border-radius: 999px;
border: 0 !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
/* Garantía adicional: evitamos scroll horizontal en el menu si algún hijo
se desborda (defensa en profundidad). */
.nav-menu-container.w-nav-menu {
overflow-x: hidden;
}
.nav-menu-container .fh-mobile-cta:hover,
.nav-menu-container .fh-mobile-cta:active {
background: var(--steel-blue, #096AD0) !important;
}
}
/* En desktop la CTA mobile está oculta — la real es la del .navbar-links-container */
@media (min-width: 992px) {
.fh-mobile-cta {
display: none !important;
}
}
/* ====================================================================
"¿Cómo funciona el arriendo de espacios?" — sección #Pourquoi
Estructura: .qe_grid.pourquoi.ho.home (flex row desktop)
├── .leftanchor.home (sticky title 45%)
└── .pourquoicontainer.home (cards column 65%)
├── .p_unit.v2.home (paso uno) — image left + text right
├── .p_unit.dark.home (paso dos) — text left + image right
├── .p_unit.dark.mobile (paso dos en mobile, display:none desktop)
└── .p_unit.medium.v3.home (paso tres) — image left + text right
Mejoras: spacing entre cards, padding interno consistente, labels paso
más legibles, mobile con stack limpio. SIN modificar copy ni colores.
==================================================================== */
.qe_grid.pourquoi.ho.home {
gap: 2rem; /* espacio entre title sticky y cards column */
}
.qe_grid.pourquoi .pourquoicontainer.home {
display: flex;
flex-direction: column;
gap: 1.5rem; /* aire entre cards (paso 1, 2, 3) */
}
/* Padding interno consistente en cada card para que el contenido respire */
.qe_grid.pourquoi .p_unit .pu_text {
padding: 28px 24px;
box-sizing: border-box;
}
/* Label "paso uno/dos/tres" — más prominente: uppercase con tracking */
.qe_grid.pourquoi .p_label {
font-size: 0.82rem !important; /* 13.12px — más legible en mobile (era 0.78 = 12.48px) */
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
margin-bottom: 10px !important;
opacity: 0.7;
}
/* Heading del paso — line-height más respirable */
.qe_grid.pourquoi .p_text {
font-size: 1.15rem !important;
line-height: 1.4 !important;
font-weight: 500 !important;
margin: 0 !important;
}
/* ---- Tablet (≤991px): el sticky title queda muy ancho, comprimimos ---- */
@media (max-width: 991px) {
.qe_grid.pourquoi.ho.home {
flex-flow: column !important;
gap: 1.5rem;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.qe_grid.pourquoi .leftanchor.home,
.qe_grid.pourquoi .pourquoicontainer.home {
width: 100% !important;
position: static !important;
}
.qe_grid.pourquoi .leftanchor.home {
padding: 0 0 1rem !important;
}
.qe_grid.pourquoi .stickytitle {
font-size: 2.25rem;
line-height: 1.2; /* aire entre las dos líneas del título responsive */
}
}
/* ---- Mobile (≤767px): cards stack image-arriba + text-abajo ---- */
@media (max-width: 767px) {
.qe_grid.pourquoi .p_unit {
flex-flow: column !important;
height: auto !important;
min-height: 400px;
border-radius: 1.25rem !important;
overflow: hidden;
}
/* Image arriba (más alta para presencia visual), text-abajo. Order asegura
imagen primero incluso cuando el markup desktop la pone después (paso 2). */
.qe_grid.pourquoi .p_unit .pu_image {
width: 100% !important;
height: 280px !important;
order: 1;
/* Reset border-radius del export para que tope con el card border */
border-radius: 0 !important;
}
.qe_grid.pourquoi .p_unit .pu_text {
width: 100% !important;
order: 2;
padding: 22px 20px;
flex-flow: row !important;
align-items: flex-start !important;
}
.qe_grid.pourquoi .p_unit .whitesymbol {
width: 36px !important;
height: 36px !important;
margin-left: 0 !important;
margin-right: 14px !important;
flex: 0 0 auto;
}
.qe_grid.pourquoi .p_unit .whitesymbol img {
width: 100%;
height: 100%;
object-fit: contain;
}
.qe_grid.pourquoi .p_unit .textcontainer {
flex: 1 1 auto;
min-width: 0;
}
.qe_grid.pourquoi .stickytitle {
font-size: 1.85rem;
line-height: 1.25; /* aire entre "¿Cómo funciona el" y "arriendo de espacios?" */
}
/* En mobile el `.p_unit.dark.mobile` se muestra (era el duplicado mobile-only),
y el `.p_unit.dark.home` se oculta para evitar duplicado. */
.qe_grid.pourquoi .p_unit.dark.home {
display: none !important;
}
.qe_grid.pourquoi .p_unit.dark.mobile {
display: flex !important;
}
/* Paso Dos en mobile: la foto .pu_image._2 (techo carpa terraza) tiene
background-position 0 0 (top-left) — en mobile cropea sólo el techo y
no se ve el espacio. Override a center bottom para mostrar la mitad
inferior donde se aprecia la terraza. */
.qe_grid.pourquoi .p_unit .pu_image._2 {
background-position: center 75% !important;
}
}
/* ====================================================================
Type scale + tipografía moderna (lean design)
==================================================================== */
/* Font rendering smooth y kerning moderno en todo el sitio */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'liga' 1;
}
/* Letter-spacing tight en headings grandes (look editorial moderno).
Reduce el tracking de los headings para que se vean más densos y
"premium" sin tocar tamaños del cliente. */
h1, h2,
.h1, .heading-1, .heading-2, .heading-3,
.heading-8, .heading-9, .heading-10, .heading-13, .heading-15,
.heading-22, .heading-29 {
letter-spacing: -0.015em;
}
.hero__title {
letter-spacing: -0.03em;
}
.contact__title,
.h1.text-style-allcaps {
letter-spacing: -0.005em;
}
/* Line-height más generoso en prosa larga (estándar moderno: 1.5–1.6
para body text). El export tenía 1.4–1.5; subimos para legibilidad. */
.paragraph,
.paragraph-2,
.paragraph-3,
.paragraph-4,
.paragraph-7,
.paragraph-8,
.paragraph-small,
.short-paragraph,
.body-text-14 {
line-height: 1.6;
}
/* Reading width para columnas de prosa larga (60ch ≈ 540px optimal).
Solo aplica donde el texto es información, no en CTAs o headers. */
.choose__text-wrap p,
.contact__text-wrap p,
.paragraph-3,
.paragraph-4 {
max-width: 65ch;
}
/* Strong / bold con peso 600 (más legible que el 700 default que se ve
"blocky" en fuentes modernas). */
strong, b, .bold {
font-weight: 600;
}
/* Caps labels con tracking generoso (estándar para minúsculas-en-caps:
+0.05–0.1em hace los caps respirar). */
.text-style-allcaps,
.tag,
.p_label,
.body-text-14.text-weight-medium.sk {
letter-spacing: 0.06em;
font-feature-settings: 'kern' 1;
}
/* ---------- Hero banners — vertical center + gap entre columnas ----------
El export tenía .container-7 { align-items: flex-end } pegando todo al
bottom del hero. Centramos verticalmente. Además, los heros con dos textos
lado a lado (index, todas-las-salas) renderizaban sin gap, lo que hacía que
el título grande chocara con el subtítulo derecho ("Salas|Espacios..." sin
espacio entre ambas palabras). Agregamos gap horizontal robusto. */
.container-7 {
align-items: center;
gap: 3rem;
}
@media (max-width: 991px) {
.container-7 { gap: 2rem; }
}
/* ---------- m1: subtítulo del hero alineado verticalmente al título ---------- */
.section-6.mod--hero .hero__heading-wrap {
align-self: center;
}
/* ---------- C2: container-5 con translate3d(30rem) inline congelado ----------
El IX2 que debía animar transform → 0 nunca se configuró. Override el inline
style con !important. */
.container-5,
[data-w-id].container-5 {
transform: none !important;
}
/* ---------- C1 + M1 + M22: elementos con IX2 inicial state pegado ----------
Webflow puso style="opacity:0" o transforms inline esperando que el IX2
los animara, pero no se configuraron. JS aplica .fh-revealed para
animarlos al entrar al viewport (ver form-handler.js).
M22: removido `[data-w-id]` del selector para cubrir también elementos
sin data-w-id (ej. `.page-wrapper` con opacity:0 inline). El JS ya
filtra correctamente cuáles necesitan el reveal — la clase fh-revealed
solo se añade a elementos efectivamente "stuck". */
.fh-revealed {
opacity: 1 !important;
transform: none !important;
transition: opacity 0.6s ease, transform 0.6s ease !important;
}
/* ---------- Cards "Formación PUCV" — animación premium (M2 v2) ----------
El export Webflow tiene IX2 corriendo sobre `.d-105-card-wrapper` con
`translate3d(0, 0, ~135px)` permanente que con perspective: 1000px del
parent magnifica visualmente la card un 16% — y al hover IX2 cambia el Z
provocando que la card "salte" de tamaño y la imagen dentro overflow.
Solución: override total con `transform: none !important` — desactivamos
IX2 y asumimos control completo del transform. Animación final:
translateY(-8px) + scale(1.02) + zoom de imagen interna + color shift
del título + shadow elevation + entrance stagger. */
/* Override IX2 — card sin Z translate, solo nuestro transform */
.d-105-card-wrapper {
cursor: pointer;
transform: none !important;
box-shadow: 0 4px 12px rgba(31, 44, 61, 0.06);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important,
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.d-105-card-wrapper.fh-card-hover {
transform: translateY(-8px) scale(1.02) !important;
box-shadow: 0 24px 40px rgba(9, 106, 208, 0.18),
0 8px 16px rgba(31, 44, 61, 0.10);
}
/* Imagen: zoom suave en hover.
IX2 inyecta inline `height: 100%; opacity: 0.6` en hover que hace que la
imagen overflow sobre el área del título (looks broken). Los lockeamos a
60% / opacity 1 con !important para neutralizar IX2 y dejar SOLO nuestro
scale 1.08 como efecto de zoom. */
.d-105-image-wrapper {
height: 60% !important;
width: 100% !important;
opacity: 1 !important;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
will-change: transform;
}
.d-105-card-wrapper.fh-card-hover .d-105-image-wrapper {
transform: scale(1.08) !important;
}
/* Título: color shift sutil */
.d-105-card-title {
transition: color 0.3s ease;
}
.d-105-card-wrapper.fh-card-hover .d-105-card-title {
color: #096AD0;
}
/* Entrance stagger: cards entran con wave 0/120/240ms al entrar viewport */
.div-block-64 > .d-105-3d-wrapper {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.div-block-64.fh-cards-entered > .d-105-3d-wrapper {
opacity: 1;
transform: none;
}
.div-block-64.fh-cards-entered > .d-105-3d-wrapper:nth-child(1) { transition-delay: 0ms; }
.div-block-64.fh-cards-entered > .d-105-3d-wrapper:nth-child(2) { transition-delay: 120ms; }
.div-block-64.fh-cards-entered > .d-105-3d-wrapper:nth-child(3) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
.d-105-card-wrapper,
.d-105-image-wrapper,
.d-105-card-title,
.div-block-64 > .d-105-3d-wrapper {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ---------- M3: anular text-transform: capitalize en headings ----------
El export aplica capitalize en varios headings, deformando casing español
("Capacidad de 100 personas" → "Capacidad De 100 Personas"). Restauramos
el casing escrito por el cliente. */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6,
.heading-7, .heading-8, .heading-9, .heading-10, .heading-11, .heading-12,
.heading-13, .heading-14, .heading-15, .heading-16, .heading-17, .heading-18,
.heading-19, .heading-20, .heading-21, .heading-22, .heading-29 {
text-transform: none;
}
/* ---------- M4: iconos sociales del footer normalizados ----------
El export usa con un `
con video background (`videopuv_mp4.mp4`) y `.atmosphere__content` con
texto blanco. El video tiene frames variables (interior PUCV con luz
natural) que reducen el contraste del texto blanco intermitentemente.
Aplicamos un gradiente vertical oscuro (transparente arriba → 45% azul
midnight abajo) entre el video y el contenido para garantizar legibilidad.
- Pseudo en `.container-6` (no en section-5) para vivir dentro del mismo
stacking context que el video y el content.
- z-index: 1 → arriba del video (z-auto), abajo del content (z:2).
También se agrega selector defensivo para `.section.full-screen.background-image-side`
por si el cliente reactiva ese bloque en el futuro. */
section.section-5 .container-6::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(31, 44, 61, 0), rgba(31, 44, 61, 0.45));
pointer-events: none;
z-index: 1;
}
.section.full-screen.background-image-side::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(31, 44, 61, 0), rgba(31, 44, 61, 0.45));
pointer-events: none;
z-index: 1;
}
.section.full-screen.background-image-side {
position: relative;
}
.section.full-screen.background-image-side .value-proposition-container {
position: relative;
z-index: 2;
}
/* ---------- M16 · Google Maps iframe sin CLS
El iframe tiene `loading="lazy"` correctamente, pero las dimensiones
`width="100%" height="450"` (atributos HTML) sin aspect-ratio CSS
provocan que el browser no reserve espacio antes de cargar el iframe
→ al insertarse en el viewport, el contenido posterior salta hacia abajo
(Cumulative Layout Shift, métrica Core Web Vitals).
Solución: aspect-ratio fija + clamps min/max para que el espacio
esté reservado desde el primer paint, sin importar si el iframe
ya cargó o no. El bg #f0f0f0 da un placeholder neutro mientras carga.
Aplica a las 5 páginas con mapa: index, salas, sala-alumni,
terraza-techada, auditorio-fernando-rosas. */
iframe[src*="google.com/maps/embed"] {
aspect-ratio: 16 / 9;
height: auto !important;
width: 100%;
max-height: 450px;
min-height: 320px;
background: #f0f0f0;
}
/* ---------- M19 · Estado "scrolled" en navbar (shrink + box-shadow)
El audit pidió "shrinkear el logo + bg blanco translúcido al hacer scroll".
Reconciliación con la realidad del export: la navbar ya tiene bg blanco
sólido (#fff) y los links son texto oscuro `rgb(34, 34, 34)`. Si aplicara
el `rgba(31, 44, 61, 0.96)` dark del CSS del audit literal, los links se
volverían invisibles. Por eso uso el texto del audit: blanco translúcido
(matching paleta actual) + box-shadow para crear separación visual al
scrollear, en lugar del dark bg.
El estado "scrolled" se activa via JS en form-handler.js cuando window.scrollY > 80px:
- Navbar pasa de 80px a ~50px de altura (padding 32→8 + logo 200→140).
- Box-shadow sutil aparece como separador del contenido scrolleado.
- Backdrop-filter: blur(10px) crea efecto frosted-glass moderno. */
/* === REDISEÑO COMPLETO DEL NAVBAR (M19 v2 + fix de dropdown overlay) ===
Problema raíz: Webflow trata los megamenús (.dropdown-container._1/_2)
como bloques en FLUJO INLINE dentro del .navbar.fixed con position:static
y margin-top:45px. Cuando expanden (hover), su top queda en y=77 mientras
el bottom del navbar es y=80 → 3px de overlap perpetuo. Ese 3px se ve
como "barra azul atravesando la navbar" especialmente cuando los items
internos tienen contraste (links blancos sobre el navy del dropdown).
Solución: convertir los dropdown-container en overlays absolute-positioned
debajo del navbar (top: 100%) en lugar de flujo inline. Así:
- No hay overlap visual con el navbar
- El navbar mantiene su altura natural (no se "deforma" al hover)
- El contenido posterior de la página no salta cuando se abre el dropdown
- Visual cleaner y más moderno (overlay clásico tipo SaaS) */
/* Navbar — base + transitions */
.navbar.fixed.w-nav {
transition: padding .3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow .3s ease;
/* Subtle base shadow para separar del contenido en cualquier estado */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Estado scrolled: shadow más pronunciada, padding más ajustado */
.navbar.fixed.w-nav.fh-nav-scrolled {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgb(255, 255, 255);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
0 1px 0 rgba(0, 0, 0, 0.04);
}
/* Logo: smooth scale on scroll + hover lift (N5) */
.navbar.fixed.w-nav .logo-navbar {
transition: max-width .3s cubic-bezier(0.22, 1, 0.36, 1),
transform .2s ease;
}
.navbar.fixed.w-nav.fh-nav-scrolled .logo-navbar {
max-width: 150px;
}
.logo:hover .logo-navbar {
transform: scale(1.04);
}
/* === DROPDOWN-CONTAINER OVERLAY FIX === */
/* Solo desktop (≥992px) — en mobile el menú usa otro mecanismo */
@media (min-width: 992px) {
.navbar.fixed.w-nav .dropdown-container._1,
.navbar.fixed.w-nav .dropdown-container._2 {
position: absolute !important;
top: 100% !important; /* justo bajo el navbar, sin overlap */
left: 0 !important;
right: 0 !important;
width: 100%;
margin-top: 0 !important; /* anula el margin-top: 45px del export */
z-index: 5; /* por encima del wrapper navbar (z:10 absolute) */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
overflow: hidden; /* clip durante height transition */
}
/* Solo hover/active activa el shadow visible — cuando height=0 no sirve */
.navbar.fixed.w-nav .dropdown-container._1:not([style*="0px"]),
.navbar.fixed.w-nav .dropdown-container._2:not([style*="0px"]) {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}
}
/* ---------- M23 · Reveal de elementos con width/height: 0px stuck
Webflow IX2 set inline `style="height:0px"` o `style="width:0px"` como
estado inicial de animación scroll-into-view. JS (initRevealStaleSize)
detecta los stragglers tras 2s, observa con IO y limpia las inline
styles al entrar al viewport. La transición permite que el cambio sea
suave si CSS provee dimensiones explícitas (decorativa en la mayoría
de los casos donde el natural sizing es lo que aplica). */
.fh-size-revealed {
transition: width .8s ease, height .8s ease;
}
/* ---------- M24 · Footer mobile — gap consistente + tap targets
El export deja `.row.footer` con grid-template-rows/columns y col-margins
asimétricos en mobile → gaps inconsistentes entre las 4 columnas (logo,
espacios PUCV, espacios, encuéntranos), algunas con margin-bottom y
otras no. Override mobile-only: forzamos flex single-column con gap 32px
uniforme. Footer-links-container también pasa a flex column con gap 8px.
Los `.footer-link` reciben padding 6px arriba/abajo para que el tap
target alcance ≥36px (recomendación móvil) sin alterar el spacing visual. */
/* ---------- N2 + N8 · Stagger fade-in en grupos de columnas y bento grids
N2: "Todo lo que tu evento necesita" (.row.grilla-4) y "Por qué elegirnos"
(.choose__columns) — 4 columnas con fade + translateY.
N8: bento "Cerro Concepción / Alegre / San Cristóbal" en /sobre-nosotros/
(.qe_grid.pourquoi.v2 .p_unit) — fade + scale 0.92 → 1.0.
El init JS las marca con `.fh-stagger-in` (cols) o `.fh-stagger-scale-in`
(bento) con transition-delay incremental de 80ms. Estado inicial se
aplica con regla normal; al recibir la clase transitiona suave. */
.row.grilla-4 .col,
.choose__columns .choose__col {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
}
.row.grilla-4 .col.fh-stagger-in,
.choose__columns .choose__col.fh-stagger-in {
opacity: 1;
transform: none;
}
.qe_grid .p_unit {
opacity: 0;
transform: scale(0.92);
transition: opacity .6s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.qe_grid .p_unit.fh-stagger-scale-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.row.grilla-4 .col,
.choose__columns .choose__col,
.qe_grid .p_unit {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- N3 · Parallax suave en hero images
La inline `transform: translate3d(...)` se actualiza desde JS en cada
scroll tick con factor 0.15 (15% de la distancia scrolleada).
Fix franja gris: el JS desplaza la imagen hacia arriba al scrollear, lo
que exponía la parte inferior del contenedor del hero (fondo gris). Damos
115% de altura + object-fit: cover para que haya 15% de buffer vertical
que el parallax pueda usar sin revelar el background. `object-position`
center para que el cropping siempre muestre el sujeto principal centrado.
`transform-origin: center top` asegura que cualquier scale futuro
no cause shift horizontal. */
.hero__bg {
height: 115% !important;
object-fit: cover;
object-position: center;
transform-origin: center top;
will-change: transform;
transition: transform .15s linear;
}
/* (N5 logo hover lift consolidado en el bloque del navbar arriba — M19 v2) */
/* ---------- N15 · Page transition fade entre rutas
Browsers con cross-document View Transitions API (` 
de 1494×838 px
ocupando todo el alto desde el top de section-4 (incluido el área del form).
El cliente quiere mantener la imagen como banner ARRIBA del form pero no
atravesando los inputs. Solución: mask-image con gradient para que la imagen
se vea sólida en la zona de banner (top de la sección) y fade-out justo
donde empieza el form, dejando el background azul sólido limpio detrás. */
img.contact__bg {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 75%);
mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 75%);
}
/* ---------- Dropdowns FAQ (.question-container) ----------
El export tiene