/* ============================================================ Provivienda — CSS del proyecto (child theme) Archivo único, cacheable (enqueado con filemtime → versión). Fuente de verdad en repo: theme/generatepress-child/assets/css/provivienda.css Desplegar a: wp-content/themes/generatepress-child/assets/css/provivienda.css ------------------------------------------------------------ Reglas globales / de componentes estables van AQUÍ. El "CSS adicional" del Customizer / Elementor solo para tweaks puntuales. ============================================================ */ /* Guard de scroll horizontal: los full-bleed usan width:100vw (incluye el ancho del scrollbar) → provocan un scroll horizontal mínimo en mobile. `clip` en el ROOT lo evita SIN crear scroll-container (a diferencia de overflow:hidden, y sin tocar que en Safari móvil puede romper el position:sticky de la barra de tabs). */ html { overflow-x: clip; } /* ============================================================ Carrusel de Zonas (JetEngine Listing 12076) Nombre + conteo en blanco superpuestos sobre la imagen. ============================================================ */ /* Tarjeta: relativa, redondeada, recorta */ .elementor-12076 .elementor-element-0552fee { position: relative !important; border-radius: 20px; overflow: hidden; padding: 0 !important; gap: 0 !important; height: 100%; } /* Imagen llena el ancho con proporción fija (cover) */ .elementor-12076 .elementor-element-f102276 { width: 100%; } .elementor-12076 .jet-listing-dynamic-image, .elementor-12076 .jet-listing-dynamic-image__link { display: block; line-height: 0; } .elementor-12076 .jet-listing-dynamic-image__img { width: 100%; aspect-ratio: 4 / 3; /* ← controla el alto de la tarjeta */ object-fit: cover; object-position: center; display: block; } /* Degradado inferior (legibilidad) */ .elementor-12076 .elementor-element-0552fee::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); pointer-events: none; z-index: 1; } /* Nombre de la zona — sobre la imagen, abajo-izquierda */ .elementor-12076 .elementor-element-72191e4 { position: absolute; left: 24px; right: 24px; bottom: 46px; z-index: 2; margin: 0; padding: 0; pointer-events: none; } .elementor-12076 .elementor-element-72191e4 .jet-listing-dynamic-field__content { color: #fff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.35); } /* "X proyectos" — debajo del título */ .elementor-12076 .elementor-element-8ac96c7 { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 2; margin: 0; padding: 0; pointer-events: none; } .elementor-12076 .elementor-element-8ac96c7 .jet-listing-dynamic-field__content { color: rgba(255,255,255,.92); font-family: "Inter", sans-serif; font-weight: 400; font-size: 16px; } /* "Ver zona" oculto — toda la tarjeta enlaza por la imagen */ .elementor-12076 .elementor-element-b5901b0 { display: none; } @media (max-width: 767px) { .elementor-12076 .elementor-element-72191e4 { bottom: 40px; } .elementor-12076 .elementor-element-72191e4 .jet-listing-dynamic-field__content { font-size: 22px; } } /* ============================================================ Marquee infinito — "¿Por qué elegir Provivienda?" Scroll horizontal automático y CONTINUO (CSS puro, sin plugin/JS). Estructura requerida en Elementor: .pv-marquee ← contenedor que RECORTA (overflow hidden) └ .pv-marquee__track ← contenedor interno que SE ANIMA └ tarjetas ×8 ← DUPLICA el set (4 → 8) para el bucle sin saltos ============================================================ */ .pv-marquee { display: block !important; overflow: hidden; width: 100%; /* desvanecido suave en los bordes (opcional: borra estas 2 líneas si no lo quieres) */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .pv-marquee__track { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; /* tarjetas a igual altura */ width: max-content !important; gap: 0 !important; /* el espaciado lo da el margin-right de cada tarjeta */ animation: pv-marquee-scroll 40s linear infinite; /* ← velocidad: menos seg = más rápido */ will-change: transform; } /* cada tarjeta: ancho fijo + su propio margen derecho (clave para el bucle exacto) */ .pv-marquee__track > .e-con { flex: 0 0 auto !important; width: 320px; /* ← ancho de tarjeta */ margin-right: 24px; /* ← separación entre tarjetas */ } /* pausa al pasar el cursor */ .pv-marquee:hover .pv-marquee__track { animation-play-state: paused; } /* el bucle: -50% = exactamente 1 set (por eso se duplica a 8) */ @keyframes pv-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* móvil */ @media (max-width: 767px) { .pv-marquee__track > .e-con { width: 78vw; margin-right: 16px; } } /* accesibilidad: respeta "reducir movimiento" del sistema */ @media (prefers-reduced-motion: reduce) { .pv-marquee__track { animation: none; } .pv-marquee { -webkit-mask-image: none; mask-image: none; } } /* ============================================================ Buscador del Home (JetSmartFilters) — estilo Figma Tarjeta blanca con 4 campos (Zona · Tipo · Precio · Metraje) + botón rojo. REQUIERE: clase pv-search en el contenedor de la tarjeta (7a5de24). Apunta a clases estables de JSF (no a IDs de Elementor) → reutilizable. ============================================================ */ /* ---- Tarjeta ---- */ .pv-search { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-end; /* botón alineado con la base de los campos */ gap: 24px; background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.12); padding: 24px 28px; } /* los widgets de filtros crecen por igual; el botón no */ .pv-search > .elementor-widget-jet-smart-filters-select, .pv-search > .elementor-widget-jet-smart-filters-range { flex: 1 1 0; min-width: 0; } .pv-search > .elementor-widget-jet-smart-filters-apply-button { flex: 0 0 auto; } .pv-search .elementor-widget-container { width: 100%; } /* cada grupo = fila de 2 campos */ .pv-search .jet-filters-group { display: flex; gap: 24px; align-items: flex-end; } /* cada campo = columna (etiqueta arriba, control abajo) */ .pv-search .jet-smart-filters-select, .pv-search .jet-smart-filters-range { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } /* ---- Etiquetas ---- */ .pv-search .jet-filter-label { margin: 0; font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; color: #1A1A1A; } /* ---- Selects (Zona / Tipo) como dropdown del Figma ---- */ .pv-search .jet-select { position: relative; } .pv-search .jet-select__control { width: 100%; height: 48px; padding: 0 42px 0 16px; /* sitio para el chevron a la derecha */ border: 1px solid #D9D9D9; border-radius: 8px; background-color: #fff; font-family: "Inter", sans-serif; font-size: 16px; color: #1A1A1A; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: 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='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } /* placeholder en gris cuando aún no se elige nada (opción vacía seleccionada) */ .pv-search .jet-select__control:has(option[value=""]:checked) { color: #B3B3B3; } .pv-search .jet-select__control:focus { outline: none; border-color: #D92E2E; box-shadow: 0 0 0 3px rgba(217,46,46,.12); } /* ---- Ranges (Precio / Metraje) — misma caja/altura que los selects ---- */ .pv-search .jet-range { height: 48px; border: 1px solid #D9D9D9; border-radius: 8px; background: #fff; padding: 0 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .pv-search .jet-range__slider { border: 0; margin: 0; padding: 0; height: 18px; } .pv-search .jet-range__slider__track { background: #E6E6E6 !important; } .pv-search .jet-range__slider__track__range { background: #D92E2E !important; } /* relleno en rojo de marca */ .pv-search .jet-range__slider__input::-webkit-slider-thumb { background: #fff; border: 2px solid #D92E2E; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .pv-search .jet-range__slider__input::-moz-range-thumb { background: #fff; border: 2px solid #D92E2E; } .pv-search .jet-range__values { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: #1A1A1A; line-height: 1; } /* ---- Botón "Buscar mi hogar" ---- */ .pv-search .apply-filters__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; background: #D92E2E; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .2s ease; } .pv-search .apply-filters__button:hover { background: #B81F1F; } .pv-search .apply-filters__button::before { /* icono de lupa (como el Figma) */ content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---- Responsive ---- */ /* Tablet (≤1024): tarjeta en columna; cada grupo sigue siendo fila de 2 → rejilla 2×2 + botón ancho */ @media (max-width: 1024px) { .pv-search { flex-direction: column !important; align-items: stretch; gap: 16px; padding: 20px 22px; } .pv-search .jet-filters-group { gap: 16px; } .pv-search .apply-filters__button { width: 100%; height: 50px; } } /* Teléfono (≤680): todo a 1 columna, tap targets grandes; 16px = evita el zoom de iOS al enfocar */ @media (max-width: 680px) { .pv-search { padding: 16px; gap: 14px; border-radius: 14px; } .pv-search .jet-filters-group { display: grid!important; grid-template-columns: 1fr 1fr!important; gap: 8px; align-items: end; } .pv-search .jet-select__control, .pv-search .jet-range { height: 52px; font-size: 16px; } .pv-search .jet-filter-label { font-size: 15px; } .pv-search .apply-filters__button { height: 54px; font-size: 17px; } } /* ============================================================ PÁGINA DE PROYECTOS (archive, page 845) Hero + barra de filtros sticky (AJAX multi-zona) + secciones por zona. Clases: pv-arch-hero · pv-archfilter · pv-zona/pv-zona-title/pv-zona-grid Tarjeta: listing 12067 con clases pv-card-* ============================================================ */ /* ---- Hero ---- */ .pv-arch-hero { position: relative; min-height: 360px; padding: 90px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-size: cover; background-position: center; } .pv-arch-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 0; } .pv-arch-hero > * { position: relative; z-index: 1; } .pv-arch-hero-title .elementor-heading-title { color: #fff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.15; margin: 0; } .pv-arch-hero-sub .elementor-heading-title { color: rgba(255,255,255,.92); font-family: "Inter", sans-serif; font-weight: 400; font-size: 20px; margin: 12px 0 0; } /* ---- Barra de filtros STICKY ---- */ .pv-archfilter { position: sticky; top: var(--pv-header-h, 0px); /* si el header es sticky, ajusta --pv-header-h a su alto */ z-index: 30; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.08); padding: 16px 24px; } .pv-archfilter .jet-filters-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; max-width: 1200px; margin: 0 auto; } .pv-archfilter .jet-smart-filters-select { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .pv-archfilter .jet-filter-label { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #1A1A1A; margin: 0; } .pv-archfilter .jet-select { position: relative; } .pv-archfilter .jet-select__control { width: 100%; height: 46px; padding: 0 38px 0 14px; border: 1px solid #D9D9D9; border-radius: 8px; background-color: #fff; font-family: "Inter", sans-serif; font-size: 15px; color: #1A1A1A; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: 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='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .pv-archfilter .jet-select__control:has(option[value=""]:checked) { color: #B3B3B3; } .pv-archfilter .jet-select__control:focus { outline: none; border-color: #D92E2E; box-shadow: 0 0 0 3px rgba(217,46,46,.12); } /* ---- Secciones por zona ---- */ .pv-zona { max-width: 1240px; margin: 0 auto; padding: 48px 24px 0; } .pv-zona-title .elementor-heading-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 30px; color: #1A1A1A; margin: 0 0 12px; } .pv-zona-grid .jet-listing-grid__items { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* ---- Tarjeta de proyecto (listing 12067) — estructura del Figma ---- OJO: en un listing los CONTENEDORES no reciben _css_classes (solo `e-con`); sí lo reciben los WIDGETS. Por eso la tarjeta/cuerpo/specs/finanzas se apuntan por :has() según el widget que contienen. */ /* Alturas iguales: la celda del grid se estira y la tarjeta la llena */ .pv-zona-grid .jet-listing-grid__item { width: auto !important; max-width: none !important; align-self: stretch; display: flex; } .pv-zona-grid .jet-listing-grid__item > .elementor { width: 100%; display: flex; flex-direction: column; } /* Tarjeta = contenedor que contiene la imagen (imagen a sangre, sin padding) */ :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-img) { position: relative; flex: 1; width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08); display: flex; flex-direction: column; padding: 0 !important; gap: 0 !important; } /* Imagen — cubre todo el ancho superior, sin bordes */ :is(.elementor-12067, .elementor-12546) .pv-card-img { margin: 0 !important; width: 100%; } :is(.elementor-12067, .elementor-12546) .pv-card-img, :is(.elementor-12067, .elementor-12546) .pv-card-img .elementor-widget-container, :is(.elementor-12067, .elementor-12546) .pv-card-img a, :is(.elementor-12067, .elementor-12546) .pv-card-img img { display: block; width: 100%; line-height: 0; } :is(.elementor-12067, .elementor-12546) .pv-card-img img { aspect-ratio: 16 / 10; object-fit: cover; } /* Tag sobre la imagen (ESTADO del proyecto) — punto de estado en vez de pin */ :is(.elementor-12067, .elementor-12546) .pv-card-tag { position: absolute; top: 14px; right: 14px; z-index: 3; margin: 0 !important; background: rgba(20,20,20,.6); border-radius: 999px; padding: 6px 13px 6px 25px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } :is(.elementor-12067, .elementor-12546) .pv-card-tag::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #4ED17E; /* punto de estado */ } :is(.elementor-12067, .elementor-12546) .pv-card-tag .jet-listing-dynamic-terms, :is(.elementor-12067, .elementor-12546) .pv-card-tag .jet-listing-dynamic-field__content, :is(.elementor-12067, .elementor-12546) .pv-card-tag a, :is(.elementor-12067, .elementor-12546) .pv-card-tag span { color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; line-height: 1; } /* Cuerpo = contenedor que contiene el título (compacto) */ :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-title) { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; } /* Nombre del proyecto — MAYÚSCULAS, semibold (como el Figma) */ :is(.elementor-12067, .elementor-12546) .pv-card-title h3, :is(.elementor-12067, .elementor-12546) .pv-card-title .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-weight: 600; font-size: 18px; color: #1A1A1A; margin: 0; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; } /* Fila de specs = área (izq) · hab · baños (der) — ocupa el 100% del ancho */ :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-area), :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-hab), :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-banos) { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: nowrap; width: 100%; gap: 0; padding: 0 !important; } :is(.elementor-12067, .elementor-12546) .pv-card-area, :is(.elementor-12067, .elementor-12546) .pv-card-hab, :is(.elementor-12067, .elementor-12546) .pv-card-banos { width: auto; } :is(.elementor-12067, .elementor-12546) .pv-card-area .jet-listing-dynamic-field__content, :is(.elementor-12067, .elementor-12546) .pv-card-hab .jet-listing-dynamic-field__content, :is(.elementor-12067, .elementor-12546) .pv-card-banos .jet-listing-dynamic-field__content { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: "Inter", sans-serif; font-size: 13.5px; color: #4A4A4A; } :is(.elementor-12067, .elementor-12546) .pv-card-hab { margin-left: auto; padding-left: 14px; border-left: 1px solid #E2E2E2; } :is(.elementor-12067, .elementor-12546) .pv-card-banos { margin-left: 14px; padding-left: 14px; border-left: 1px solid #E2E2E2; } :is(.elementor-12067, .elementor-12546) .pv-card-hab .jet-listing-dynamic-field__content::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16'/%3E%3Cpath d='M2 8h18a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M2 17h20'/%3E%3Cpath d='M6 8v9'/%3E%3C/svg%3E") no-repeat center / contain; } :is(.elementor-12067, .elementor-12546) .pv-card-banos .jet-listing-dynamic-field__content::before { content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 6.5 3.5a1.5 1.5 0 0 0-1-.5C4.683 3 4 3.683 4 4.5V17a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3Cline x1='10' y1='5' x2='8' y2='7'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='7' y1='19' x2='7' y2='21'/%3E%3Cline x1='17' y1='19' x2='17' y2='21'/%3E%3C/svg%3E") no-repeat center / contain; } /* Precio */ :is(.elementor-12067, .elementor-12546) .pv-card-precio .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-weight: 700; font-size: 19px; color: #1A1A1A; } /* Fila de finanzas = letra + ingreso lado a lado (50/50), pegada al precio */ :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-letra), :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-ingreso) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; width: 100%; gap: 14px; padding: 0 !important; margin-top: -4px; } :is(.elementor-12067, .elementor-12546) .pv-card-letra, :is(.elementor-12067, .elementor-12546) .pv-card-ingreso { flex: 1 1 0; min-width: 0; } :is(.elementor-12067, .elementor-12546) .pv-card-letra .jet-listing-dynamic-field__content, :is(.elementor-12067, .elementor-12546) .pv-card-ingreso .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-size: 12px; color: #8A8A8A; line-height: 1.35; } /* Botón full-width, centrado, pegado al fondo */ :is(.elementor-12067, .elementor-12546) .pv-card-btn { margin-top: auto; width: 100%; } /* wrappers a block 100% — PERO NO el (eso lo dejaba sin centrar) */ :is(.elementor-12067, .elementor-12546) .pv-card-btn .jet-listing, :is(.elementor-12067, .elementor-12546) .pv-card-btn .jet-listing-dynamic-link { display: block !important; width: 100%; } :is(.elementor-12067, .elementor-12546) .pv-card-btn a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; background: #D92E2E; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; height: 48px; border-radius: 8px; text-decoration: none; transition: background .2s ease; } :is(.elementor-12067, .elementor-12546) .pv-card-btn a:hover { background: #B81F1F; } /* Interacción hover en la tarjeta (lift + zoom de imagen) */ :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-img) { transition: transform .25s ease, box-shadow .25s ease; } :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-img):hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0,0,0,.15); } :is(.elementor-12067, .elementor-12546) .pv-card-img img { transition: transform .45s ease; } :is(.elementor-12067, .elementor-12546) .e-con:has(> .pv-card-img):hover .pv-card-img img { transform: scale(1.05); } /* ---- Responsive ---- */ @media (max-width: 1024px) { .pv-archfilter .jet-smart-filters-select { flex: 1 1 calc(50% - 7px); } .pv-zona-grid .jet-listing-grid__items { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 768px) { .pv-arch-hero { min-height: 260px; padding: 60px 18px; } .pv-arch-hero-title .elementor-heading-title { font-size: 32px; } .pv-arch-hero-sub .elementor-heading-title { font-size: 16px; } .pv-zona { padding: 36px 18px 0; } .pv-zona-title .elementor-heading-title { font-size: 24px; margin-bottom: 18px; } } @media (max-width: 600px) { .pv-archfilter { padding: 12px 16px; } .pv-archfilter .jet-filters-group { gap: 12px; } .pv-archfilter .jet-smart-filters-select { flex: 1 1 100%; } .pv-archfilter .jet-select__control { height: 50px; font-size: 16px; } /* 16px = sin zoom iOS */ .pv-zona-grid .jet-listing-grid__items { grid-template-columns: 1fr; gap: 18px; } /* Nombre del proyecto — MAYÚSCULAS, semibold (como el Figma) */ :is(.elementor-12067, .elementor-12546) .pv-card-title h3, :is(.elementor-12067, .elementor-12546) .pv-card-title .jet-listing-dynamic-field__content { font-weight: 600; font-size: 18px; }/* Precio del proyecto — MAYÚSCULAS, semibold (como el Figma) */ .pv-card-precio .jet-listing-dynamic-field__content { font-size: 16px!important;} } /* ============================================================ Barra de filtros — página de Proyectos (sticky bajo el header) Clase pv-filterbar en el CONTENEDOR DE LOS SELECTS (el interno, 72be3f4). El contenedor general (9767cc1) va SIN fondo (transparente). ============================================================ */ .pv-filterbar { position: sticky; top: 65px; z-index: 50; /* bajo el header sticky (~65px) */ background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.06); width: 100vw; margin-left: calc(50% - 50vw); /* full-bleed: ocupa el 100% del ancho de pantalla */ padding: 12px 24px !important; } .pv-filterbar .jet-filters-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 auto; /* filtros centrados dentro de la barra */ } .pv-filterbar .jet-smart-filters-select { flex: 1 1 150px; min-width: 0; } .pv-filterbar .jet-filter-label { display: none; } /* el placeholder de cada select ya describe el filtro */ .pv-filterbar .jet-select { position: relative; } .pv-filterbar .jet-select__control { width: 100%; height: 44px; padding: 0 36px 0 14px; border: 1px solid #E0E0E0; border-radius: 8px; background-color: #fff; font-family: "Inter", sans-serif; font-size: 14px; color: #1A1A1A; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: 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='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .pv-filterbar .jet-select__control:has(option[value=""]:checked) { color: #9A9A9A; } .pv-filterbar .jet-select__control:hover { border-color: #C5C5C5; } .pv-filterbar .jet-select__control:focus { outline: none; border-color: #D92E2E; box-shadow: 0 0 0 3px rgba(217,46,46,.1); } @media (max-width: 1024px) { .pv-filterbar .jet-smart-filters-select { flex: 1 1 calc(33.333% - 8px); } } @media (max-width: 680px) { .pv-filterbar { top: 60px; padding: 10px 16px !important; } .pv-filterbar .jet-filters-group { gap: 10px; } .pv-filterbar .jet-smart-filters-select { flex: 1 1 calc(50% - 5px); } .pv-filterbar .jet-select__control { height: 46px; font-size: 16px; } /* 16px = sin zoom iOS */ } /* ============================================================ Botón "Limpiar filtros" (clase pv-clear) — visible SOLO con filtros activos. El JS añade body.pv-filtros-activos cuando hay algún filtro puesto. ============================================================ */ /* Contenedor de la barra en COLUMNA → el botón va DEBAJO de los selects, no al lado (evita que su aparición encoja los 6 selects a 4 columnas). gap:0 para que el blanco del botón pegue con el de la barra (sin franja). */ .e-con:has(> .pv-filterbar) { flex-direction: column !important; gap: 0 !important; } .pv-clear { display: none !important; } body.pv-filtros-activos .pv-clear { display: block !important; width: 100vw; margin-left: calc(50% - 50vw); /* full-bleed, igual que la barra */ background: #fff; /* mismo blanco que los filtros → no flota */ padding: 0 24px 12px; text-align: right; } .pv-clear .elementor-button { display: inline-flex !important; align-items: center; gap: 6px; width: auto; background: transparent !important; box-shadow: none !important; border: 0 !important; color: #D92E2E !important; fill: #D92E2E !important; font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px; padding: 6px 2px !important; min-height: 0; } .pv-clear .elementor-button:hover { color: #B81F1F !important; text-decoration: underline; } .pv-clear .elementor-button-icon { margin: 0 !important; } @media (max-width: 680px) { body.pv-filtros-activos .pv-clear { padding: 4px 16px 2px; } } /* ============================================================ PÁGINA DE ZONA (/ubicacion//) — listings 12546 (tarjeta de modelo) y 12547 (vista de proyecto). La tarjeta de modelo reutiliza el CSS de .pv-card-* (compartido arriba vía :is con .elementor-12546). Aquí van los ajustes propios de modelo + layout. ============================================================ */ /* Alturas iguales en la fila de modelos (igual que .pv-zona-grid) */ .pv-pv-modelos .jet-listing-grid__item { align-self: stretch; display: flex; } .pv-pv-modelos .jet-listing-grid__item > .elementor { width: 100%; display: flex; flex-direction: column; } /* El tag del modelo es un pill de UBICACIÓN (📍 + zona), no estado: sin el punto verde, padding simétrico, y estilo del texto (el contenido viene de un text-editor con shortcode, no de un dynamic-field). */ .elementor-12546 .pv-card-tag { padding: 6px 13px; } .elementor-12546 .pv-card-tag::before { display: none; } .elementor-12546 .pv-card-tag, .elementor-12546 .pv-card-tag p { margin: 0; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; line-height: 1; } .elementor-12546 .pv-card-tag img.emoji { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; } /* Vista de proyecto: separación entre proyectos + título de cada proyecto */ .pv-zona-proyectos .jet-listing-grid__item { margin-bottom: 8px; } .pv-pv-title h1, .pv-pv-title h2, .pv-pv-title h3, .pv-pv-title .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-weight: 700; font-size: 26px; color: #1A1A1A; margin: 0 0 22px; line-height: 1.2; } /* ============================================================ BARRA DE TABS de proyecto (sticky, desktop + móvil) .pv-tabs-bar (contenedor sticky) > .pv-tabs (grid) > items (botón-pill). El JS (provivienda.js → pvZonaTabs) muestra un proyecto a la vez y marca .is-active en el tab del proyecto consultado. ============================================================ */ /* El contenedor de la barra de tabs (su clase custom no emite en este render, así que lo apuntamos por :has(> .pv-tabs)). Sticky debajo del header (~62px). */ .pv-zona-archive .e-con:has(> .pv-tabs) { position: -webkit-sticky; position: sticky; top: var(--pv-header-h, 105px); z-index: 30; margin: 0; padding: 0 3%; /* alineado con los proyectos (padding lateral 3%) */ background: transparent; transition: background .2s ease, box-shadow .2s ease; } /* SOLO cuando se pega al top (la clase la pone provivienda.js → pvStickyTabs): fondo blanco + sombra sutil, igual que la barra de filtros de la 845. La sombra vive en este contenedor EXTERIOR, así que el scroll de los items no la recorta. */ .pv-zona-archive .e-con.pv-tabs-stuck:has(> .pv-tabs) { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.08); } /* anula el grid de JetEngine → una fila horizontal con scroll. overflow-x:auto CONTIENE el scroll (sin esto, en móvil con body overflow-x:hidden los tabs se cortan sin poder alcanzarlos = el "ancho infinito"). */ .pv-tabs .jet-listing-grid__items { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap; gap: 10px; margin: 0 !important; padding: 14px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-snap-type: x proximity; } .pv-tabs .jet-listing-grid__items::-webkit-scrollbar { height: 5px; } .pv-tabs .jet-listing-grid__items::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; } /* cada item = pill-botón */ .pv-tabs .jet-listing-grid__item { flex: 0 0 auto; width: auto !important; max-width: none !important; min-height: 0; scroll-snap-align: start; cursor: pointer; -webkit-user-select: none; user-select: none; background: #F1ECE4; border-radius: 999px; padding: 12px 22px; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } .pv-tabs .jet-listing-grid__item > .elementor { width: auto; } .pv-tabs .jet-listing-grid__item .e-con { display: flex !important; flex-direction: row; align-items: center; gap: 7px; padding: 0 !important; flex-wrap: nowrap; } .pv-tab-name, .pv-tab-count { margin: 0 !important; } .pv-tab-name .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; color: #2A2A2A; white-space: nowrap; line-height: 1; } .pv-tab-count .jet-listing-dynamic-field__content { font-family: "Inter", sans-serif; font-weight: 500; font-size: 12px; color: #9A9A9A; white-space: nowrap; line-height: 1; } .pv-tabs .jet-listing-grid__item:hover { background: #E7E0D5; } /* ACTIVO — que se entienda que es el proyecto consultado */ .pv-tabs .jet-listing-grid__item.is-active { background: #D92E2E; box-shadow: 0 6px 16px rgba(217,46,46,.32); transform: translateY(-1px); } .pv-tabs .jet-listing-grid__item.is-active .pv-tab-name .jet-listing-dynamic-field__content { color: #fff; } .pv-tabs .jet-listing-grid__item.is-active .pv-tab-count .jet-listing-dynamic-field__content { color: rgba(255,255,255,.82); } @media (max-width: 767px) { .pv-zona-archive .e-con:has(> .pv-tabs) { margin: 0; padding: 0 3%; } .pv-tabs .jet-listing-grid__items { gap: 8px; padding: 11px 0; } .pv-tabs .jet-listing-grid__item { padding: 12px 20px; } .pv-tab-name .jet-listing-dynamic-field__content { font-size: 13px; } .pv-tab-count .jet-listing-dynamic-field__content { font-size: 11.5px; } .pv-zona-archive .e-con:has(> .pv-tabs) { position: -webkit-sticky; position: sticky; top: var(--pv-header-h, 63px); } } /* ============================================================ Oculta titulo de grid de proyectos en el tab de la zona ============================================================ */ .elementor-element.elementor-element-pvtit1.pv-pv-title.elementor-widget.elementor-widget-jet-listing-dynamic-field { display: none; } /* ============================================================ HERO de la zona — FULL-BLEED, 2 columnas (texto izq + galería der). Marco NATIVO en Elementor: container pvzhero1 → pvheroL (texto) / pvheroR (galería). La galería la arma [pv_hero_galeria] (.pv-hero-gal) y la desliza provivienda.js (pvHeroGallery). El texto de la izq son widgets nativos editables; estas reglas solo dan layout + estilo de marca. ============================================================ */ /* El #content de GeneratePress es flex y encoge el wrapper de la plantilla a su contenido (boxed ~1616px, alineado a la izq). Lo forzamos a ocupar TODO el área de contenido → el contenido queda centrado en el viewport y el hero puede ir a ancho completo sin offset de scrollbar. */ .pv-zona-archive { flex: 1 1 100%; width: 100%; max-width: 100%; } /* full-bleed: el ANCHO lo da el wrapper (.pv-zona-archive, arriba). El layout del hero — columnas, anchos, paddings, min-height (70vh), flex-direction, gap, fondo blanco de la izq — vive ahora en los SETTINGS de Elementor (todo editable desde el editor). Aquí solo queda lo estructural que Elementor no expone. */ .elementor-element-pvheror { position: relative; } /* ancla la galería absoluta */ /* los wrappers del widget de galería no deben aportar alto (si no, la imagen los infla) */ .elementor-element-pvheror .elementor-widget-shortcode, .elementor-element-pvherogal, .elementor-element-pvherogal > .elementor-widget-container, .elementor-element-pvherogal .elementor-shortcode { position: static; } /* Los textos del hero (back-link, breadcrumb, subtítulo) son widgets text-editor: su TAMAÑO / familia / peso / color / espaciado se EDITAN en Elementor (Style + Advanced del widget). Aquí solo el estilo de los (los links toman el color del widget vía inherit) y el realce del término — que el text-editor no expone. */ .elementor-element-pvherol .pv-hero-back, .elementor-element-pvmherol .pv-hero-back { display: inline-block; text-decoration: none; color: inherit; font: inherit; } .elementor-element-pvherol .pv-hero-crumb a, .elementor-element-pvmherol .pv-hero-crumb a { text-decoration: none; color: inherit; font: inherit; } .elementor-element-pvherol .pv-hero-back:hover, .elementor-element-pvherol .pv-hero-crumb a:hover, .elementor-element-pvmherol .pv-hero-back:hover, .elementor-element-pvmherol .pv-hero-crumb a:hover { color: #D92E2E; } .elementor-element-pvherol .pv-hero-crumb b, .elementor-element-pvmherol .pv-hero-crumb b { color: #1A1A1A; font-weight: 500; } /* título del hero: ahora es un

dentro de un text-editor (para campo dinámico por zona zona_hero_titulo) → hereda la tipografía del widget, no la del tema. */ .elementor-element-pvheroh1 h1 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; } /* ---------- galería: ABSOLUTA, llena la columna sin inflar su alto ---------- */ .pv-hero-gal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #0e0e0e; } .pv-hero-gal-track { display: flex; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.5,.12,.13,1); will-change: transform; } .pv-hero-gal-slide { flex: 0 0 100%; width: 100%; height: 100%; } .pv-hero-gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* flechas — MÁS VISIBLES (círculo blanco con sombra + chevron oscuro) */ .pv-hero-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.30) !important; color: #FFF!important; font-size: 22px; line-height: 1; box-shadow: 0 6px 22px rgba(0,0,0,.30); -webkit-appearance: none; appearance: none; padding: 0; z-index: 4; transition: background .2s, transform .2s, box-shadow .2s; border-style: solid; border-width: 1px; border-color:rgba(255, 255, 255, 0.13); } /* Pin de mapa sobre list proyects */ img.map-pin.alignnone.wp-image-12599.size-full { margin-right: 4px; margin-top: 0px; margin-bottom: -2px; } .pv-hero-gal-arrow:hover { background: #fff !important; transform: translateY(-50%) scale(1.09); box-shadow: 0 9px 28px rgba(0,0,0,.38); color: #1A1A1A!important; } .pv-hero-gal-prev { left: 22px; } .pv-hero-gal-next { right: 22px; } /* dots */ .pv-hero-gal-dots { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; gap: 9px; justify-content: center; z-index: 4; } .pv-hero-gal-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55) !important; -webkit-appearance: none; appearance: none; transition: background .25s, width .25s; } .pv-hero-gal-dot.is-active { background: #D92E2E !important; width: 28px; border-radius: 6px; } .pv-hero-gal.is-single .pv-hero-gal-arrow, .pv-hero-gal.is-single .pv-hero-gal-dots { display: none; } @media (max-width: 880px) { .elementor-element-pvzhero1 { min-height: 0; flex-direction: column !important; } .elementor-element-pvherol, .elementor-element-pvheror { flex: 1 1 100%; max-width: 100%; } .elementor-element-pvheror { order: 1; min-height: 46vh; } .elementor-element-pvherol { order: 2; padding: 32px clamp(18px, 6vw, 30px) 42px !important; } .pv-hero-gal-arrow { width: 44px; height: 44px; font-size: 18px; } .pv-hero-gal-prev { left: 12px; } .pv-hero-gal-next { right: 12px; } } /* ============================================================ BANDAS DE CONTENIDO de la vista de proyecto (shortcodes [pv_narrativa] / [pv_amenidades] / [pv_ubicacion] / [pv_form]). ============================================================ */ .pv-band-wrap { width: 100%; } .pv-band { padding: 56px 0; } .pv-band .pv-narr-eyebrow, .pv-band .pv-amen-eyebrow, .pv-band .pv-form-eyebrow { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D92E2E; margin: 0 0 10px; } /* Narrativa (centrada, formato del diseño) */ .pv-narrativa { max-width: 780px; margin: 0 auto; text-align: center; } .pv-narr-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.2; color: #1A1A1A; margin: 0 0 22px; letter-spacing: -.5px; } .pv-narr-title span { color: #D92E2E; } .pv-narr-text p { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.75; color: #5A5A5A; margin: 0 0 16px; } .pv-narr-btn { display: inline-flex; align-items: center; margin-top: 24px; background: #D92E2E; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; padding: 14px 30px; border-radius: 8px; text-decoration: none; transition: background .2s; } .pv-narr-btn:hover { background: #B81F1F; } /* Áreas sociales (título centrado + tiles, formato del diseño) */ .pv-amenidades { text-align: center; } .pv-amen-title { font-family: "Inter", sans-serif; font-weight: 400; font-size: 34px; color: #1A1A1A; margin: 0 0 30px; letter-spacing: -.5px; text-align: center; } .pv-amen-title span { font-weight: 700; } .pv-amen-carousel { position: relative; } .pv-amen-carousel.pv-no-scroll .pv-amen-nav { display: none; } .pv-amen-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .pv-amen-track::-webkit-scrollbar { display: none; } .pv-amen-slide { flex: 0 0 calc(33.333% - 12px); scroll-snap-align: start; margin: 0; position: relative; border-radius: 16px; overflow: hidden; } .pv-amen-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .pv-amen-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px; color: #fff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; text-align: center; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); } .pv-amen-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0 !important; background: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.18); color: #1A1A1A !important; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; } .pv-amen-prev { left: -10px; } .pv-amen-next { right: -10px; } .pv-amen-nav:hover { background: #f5f5f5; } .pv-amen-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; } .pv-amen-chips li { font-family: "Inter", sans-serif; font-size: 14px; color: #4A4A4A; background: #F1ECE4; border-radius: 999px; padding: 8px 16px; } /* ============================================================ HÍBRIDO narrativa/áreas — contenedores Elementor editables en 12547. La estructura (centrado/ancho/padding) va por ID; la tipografía de título/descripción/botón se edita en los settings de cada widget. ============================================================ */ .pv-hl { color: #D92E2E; } /* realce del título (convención *...*) */ .elementor-element-pvnarr { max-width: 780px; margin: 0 auto; padding: 56px 0; text-align: center; } .elementor-element-pvamen { padding: 56px 0; text-align: center; } /* el ancla "Agendar mi visita" → sala de ventas no debe quedar bajo header+tabs sticky */ #pv-sala-ventas { scroll-margin-top: 140px; } @media (max-width: 767px) { .elementor-element-pvnarr, .elementor-element-pvamen { padding: 44px 0; } } /* Ubicación (texto + tabs + lista numerada IZQ, mapa DER) */ .pv-ubi-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; flex-wrap: wrap; } .pv-ubi-title { font-family: "Inter", sans-serif; font-weight: 400; font-size: 32px; color: #1A1A1A; margin: 0; letter-spacing: -.5px; } .pv-ubi-title span { font-weight: 700; } .pv-ubi-gmaps { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #1A1A1A; text-decoration: none; border: 1px solid #D9D9D9; border-radius: 8px; padding: 11px 20px; transition: border-color .2s, color .2s; white-space: nowrap; } .pv-ubi-gmaps:hover { border-color: #D92E2E; color: #D92E2E; } .pv-ubi-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; align-items: start; } .pv-ubi-texto { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.7; color: #5A5A5A; margin: 0 0 24px; } .pv-ubi-map img { width: 100%; height: auto; border-radius: 16px; display: block; } .pv-ubi-embed iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 16px; display: block; } .pv-poi-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid #ECECEC; } .pv-poi-tab { -webkit-appearance: none; appearance: none; border: 0 !important; background: transparent !important; box-shadow: none !important; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #8A8A8A !important; padding: 8px 4px; margin-right: 12px; cursor: pointer; border-bottom: 2px solid transparent !important; margin-bottom: -1px; border-radius: 0 !important; } .pv-poi-tab.is-active { color: #D92E2E !important; border-bottom-color: #D92E2E !important; } .pv-poi-list { counter-reset: poi; list-style: none; margin: 0; padding: 0; display: none; } .pv-poi-list.is-active { display: block; } .pv-poi-list li { counter-increment: poi; display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid #ECECEC; font-family: "Inter", sans-serif; } .pv-poi-list li::before { content: counter(poi) "."; font-weight: 600; color: #1A1A1A; font-size: 15px; min-width: 16px; } .pv-poi-list li span { flex: 1; color: #4A4A4A; font-size: 15px; } .pv-poi-list li i { color: #D92E2E; font-style: normal; font-size: 16px; } /* Sala de ventas (cabecera + horarios + form-card sobre imagen lifestyle) */ .pv-form { display: block; background: none; box-shadow: none; border-radius: 0; } .pv-sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 24px; flex-wrap: wrap; } .pv-sv-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 22px; color: #1A1A1A; margin: 0; display: flex; align-items: center; gap: 8px; } .pv-sv-ico { display: inline-flex; align-items: center; color: #D92E2E; } .pv-sv-ico svg { display: block; width: 22px; height: 22px; } .pv-sv-horarios { display: flex; gap: 44px; } .pv-sv-horarios > div { font-family: "Inter", sans-serif; font-size: 14px; color: #4A4A4A; } .pv-sv-horarios span { display: block; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #B0B0B0; font-size: 11px; margin-bottom: 3px; } /* contacto de sala (dirección/teléfono/mapa) — campos reales sala_* */ .pv-sv-meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; } .pv-sv-contacto { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-family: "Inter", sans-serif; font-size: 13px; color: #5A5A5A; } .pv-sv-contacto a { color: #5A5A5A; text-decoration: none; } .pv-sv-mapa { color: #D92E2E !important; font-weight: 600; } .pv-sv-mapa:hover, .pv-sv-tel:hover { text-decoration: underline; } .pv-poi-dist { color: #9A9A9A; font-weight: 400; } .pv-sv-body { position: relative; background-size: cover; background-position: center; border-radius: 20px; overflow: hidden; padding: 48px; display: flex; align-items: center; min-height: 560px; } .pv-sv-card { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.2); padding: 36px; max-width: 640px; width: 100%; } .pv-sv-card-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 22px; color: #1A1A1A; margin: 0 0 22px; } .pv-sv-card .gform_fields { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 14px 18px; margin: 0; padding: 0; list-style: none; } .pv-sv-card .gform_fields > li.gfield { grid-column: span 12; margin: 0; padding: 0; } /* media fila (2 columnas) — markup legacy, por ID de campo */ .pv-sv-card #field_1_12, .pv-sv-card #field_1_13, .pv-sv-card #field_1_17, .pv-sv-card #field_1_40, .pv-sv-card #field_1_4, .pv-sv-card #field_1_11, .pv-sv-card #field_1_26, .pv-sv-card #field_1_27 { grid-column: span 6; } /* fila completa: intro, Modelo, Mensaje, Consentimiento (+ cualquier width-full / textarea / consent) */ .pv-sv-card #field_1_33, .pv-sv-card #field_1_39, .pv-sv-card #field_1_6, .pv-sv-card #field_1_38, .pv-sv-card .gfield--width-full, .pv-sv-card li.gfield:has(.ginput_container_textarea), .pv-sv-card li.gfield:has(.ginput_container_consent) { grid-column: span 12; } /* ocultar campos GF ocultos + HTML vacíos (no deben ocupar celda del grid) */ .pv-sv-card .gfield_visibility_hidden, .pv-sv-card li.gfield_html:empty, .pv-sv-card #field_1_35 { display: none !important; } .pv-sv-card .gfield_html { font-family: "Inter", sans-serif; font-size: 13px; color: #8A8A8A; line-height: 1.5; } .pv-sv-card .gfield_label { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: #4A4A4A; margin-bottom: 4px; } .pv-sv-card input[type="text"], .pv-sv-card input[type="email"], .pv-sv-card input[type="tel"], .pv-sv-card input[type="number"], .pv-sv-card select, .pv-sv-card textarea { width: 100%; border: 1px solid #E2E2E2; border-radius: 8px; padding: 10px 12px; font-family: "Inter", sans-serif; font-size: 14px; box-sizing: border-box; } .pv-sv-card .gform_footer { margin-top: 8px; } .pv-sv-card .gform_footer input[type="submit"], .pv-sv-card .gform_footer button { background: #D92E2E !important; color: #fff !important; border: 0 !important; border-radius: 8px; padding: 13px 28px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; width: 100%; } @media (max-width: 880px) { .pv-band { padding: 44px 0; } .pv-narr-title, .pv-amen-title, .pv-ubi-title { font-size: 25px; } .pv-amen-slide { flex-basis: calc(82% - 12px); } .pv-amen-nav { display: none; } .pv-ubi-grid { grid-template-columns: 1fr; gap: 24px; } .pv-sv-body { padding: 16px; min-height: 0; } .pv-sv-card { padding: 24px 20px; } .pv-sv-card .gform_fields { grid-template-columns: 1fr; } .pv-sv-card .gform_fields > li.gfield { grid-column: 1 / -1 !important; } .pv-sv-horarios { gap: 24px; } .pv-ubi-head { gap: 12px; } } /* ============================================================ SINGLE DE MODELO (/modelos//) ============================================================ */ .pv-modelo-single { width: 100%; } /* HERO: 2 columnas full-bleed (info izq + carrusel der). El carrusel reusa .pv-hero-gal (global). */ .pv-mod-hero { display: grid; grid-template-columns: 42% 58%; width: 100vw; margin-left: calc(50% - 50vw); min-height: 72vh; background: #fff; } .pv-mod-hero-info { padding: 56px 5% 56px 6%; display: flex; flex-direction: column; justify-content: center; } .pv-mod-bc { font-family: "Inter", sans-serif; font-size: 13px; color: #9A9A9A; margin: 0 0 30px; display: flex; flex-direction: column; gap: 6px; } .pv-mod-volver { color: #1A1A1A; text-decoration: none; font-weight: 600; width: max-content; } .pv-mod-volver:hover { color: #D92E2E; } .pv-mod-crumbs strong { color: #1A1A1A; } .pv-mod-crumbs a { color: inherit; text-decoration: none; } .pv-mod-crumbs a:hover { color: #D92E2E; } .pv-mod-nombre { font-family: "Inter", sans-serif; font-weight: 700; font-size: 54px; line-height: 1.05; color: #1A1A1A; text-transform: uppercase; margin: 0 0 10px; letter-spacing: -1px; } .pv-mod-precio { font-family: "Inter", sans-serif; font-size: 18px; color: #5A5A5A; margin: 0 0 28px; } .pv-mod-datos { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 13px; } .pv-mod-datos li { display: flex; align-items: center; gap: 11px; font-family: "Inter", sans-serif; font-size: 15px; color: #4A4A4A; } .pv-mod-datos .pv-mod-ic { color: #D92E2E; flex-shrink: 0; } .pv-mod-cta { display: flex; gap: 14px; flex-wrap: wrap; } .pv-mod-btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; padding: 14px 30px; border-radius: 8px; text-decoration: none; line-height: 1; transition: background .2s, color .2s, border-color .2s; } .pv-mod-btn-primary { background: #D92E2E; color: #fff; } .pv-mod-btn-primary:hover { background: #b91f1f; color: #fff; } .pv-mod-btn-ghost { background: #fff; color: #1A1A1A; border: 1px solid #D9D9D9!important; } .pv-mod-btn-ghost:hover { border-color: #D92E2E; color: #D92E2E!important; } .pv-mod-hero-media { position: relative; min-height: 72vh; } /* PLANO DEL MODELO */ .pv-mod-plano { padding: 64px 0; } .pv-mod-plano-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .pv-mod-plano-img img { width: 100%; height: auto; border-radius: 16px; display: block; } .pv-mod-plano-ph { aspect-ratio: 4 / 3; background: #F4F4F4; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #9A9A9A; font-family: "Inter", sans-serif; } .pv-mod-plano-im { width: 100%; height: auto; border-radius: 16px; display: block; } /* pestañas Planta baja / Planta alta (modelos de 2 niveles) */ .pv-mod-plano-tabbar { display: flex; gap: 8px; margin: 0 0 16px; } .pv-mod-plano-tab { -webkit-appearance: none; appearance: none; border: 1px solid #D92E2E !important; background: #fff !important; color: #D92E2E !important; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 8px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .pv-mod-plano-tab.is-active { background: #D92E2E; border-color: #D92E2E; color: #fff; } .pv-mod-plano-panes .pv-mod-plano-im { display: none; } .pv-mod-plano-panes .pv-mod-plano-im.is-active { display: block; } /* Variantes/tipos (A/C/D): el selector vive en la ficha (der) y controla también el plano (izq). */ .pv-mod-var-tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .pv-mod-var-tab { -webkit-appearance: none; appearance: none; border: 1px solid #D92E2E !important; background: #fff !important; color: #D92E2E !important; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 8px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .pv-mod-var-tab.is-active { background: #D92E2E; border-color: #D92E2E; color: #fff; } /* Fix :focus/:active — el tema (GeneratePress) pone fondo oscuro al hacer clic en