:root{ --cms-green: #6AC045; --cms-green-700:#4C8B31; --cms-cream: #F7F8F5; --cms-accent: #ECFF4F; --cms-blue: #13779F; --cms-blue-light: #6FC7E1; --cms-text:#1e1f23; } body{margin:0;background:var(--cms-cream);color:var(--cms-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;} .cms-map-section{width:100%;padding:56px 16px 0;box-sizing:border-box;} .cms-map-wrap{max-width:1200px;margin:0 auto;text-align:center;} .cms-map-title{font-weight:800;font-size:clamp(28px,4vw,54px);line-height:1.1;margin:0 0 8px;letter-spacing:-.02em;} .cms-map-subtitle{font-size:clamp(14px,1.4vw,20px);opacity:.85;margin:0 0 28px;} #cmsLeaflet{width:100%;height:62vh;min-height:420px;border-radius:18px 18px 0 0;box-shadow:0 10px 30px rgba(0,0,0,.06) inset;} .blog-grid.style2 .blog-box.grid-style, .blog-grid .blog-box { border: none !important; background: #fff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08) !important; border-radius: 16px !important; padding: 0 !important; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Efecto Hover: La tarjeta sube ligeramente */ .blog-grid.style2 .blog-box.grid-style:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important; } .blog-grid .blog-box .post-img { border-radius: 16px 16px 0 0 !important; /* Solo redondeamos arriba */ margin: 0 !important; width: 100%; } /* Efecto de zoom suave en la imagen al pasar el mouse */ .blog-grid .blog-box .thumb-bg { transition: transform 0.5s ease; } .blog-grid .blog-box:hover .thumb-bg { transform: scale(1.05); } .blog-grid .blog-box .thumbnail-date .popup-date { position: absolute; top: 20px !important; /* Ajusta según necesites */ left: 20px !important; right: auto; background: rgba(255, 255, 255, 0.95) !important; /* Fondo blanco casi sólido */ color: #333 !important; /* Texto oscuro para contraste */ border-radius: 8px !important; padding: 8px 12px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-weight: 700; z-index: 10; text-align: center; line-height: 1.2; } /* Ajuste tipográfico de la fecha */ .blog-grid .blog-box .thumbnail-date .popup-date .day { display: block; font-size: 18px; color: var(--rt-primary-color); /* Usa el color principal de tu web */ } .blog-grid .blog-box .thumbnail-date .popup-date .month { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; } /* Espaciado para el texto */ .blog-grid .blog-box .post-content { padding: 25px 30px 30px !important; /* Espacio cómodo para leer */ } /* Título */ .blog-grid .blog-box .post-content h2.post-title { font-size: 20px !important; /* 24px a veces es muy grande para grid de 2 columnas */ font-weight: 700 !important; margin-bottom: 15px; line-height: 1.4 !important; padding-top: 10px !important; } .blog-grid .blog-box .post-content h2.post-title a { color: #2c3e50; /* Color oscuro sólido */ text-decoration: none; } .blog-grid .blog-box .post-content h2.post-title a:hover { color: var(--rt-primary-color); } /* Metadatos (Autor, Categoría) */ .blog-grid .blog-box .post-content .post-meta { font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.5px; color: #999 !important; margin-bottom: 10px !important; border-bottom: 1px solid #eee; padding-bottom: 15px; } .read-more-grid-btn { margin-top: 20px; } .read-more-grid-btn a { font-weight: 600 !important; font-size: 14px !important; color: var(--rt-primary-color) !important; display: inline-flex; align-items: center; } /* Animación de la flecha */ .read-more-grid-btn a .arrow-btn { transition: margin-left 0.3s ease; margin-left: 5px; } .read-more-grid-btn a:hover .arrow-btn { margin-left: 10px; /* La flecha se mueve a la derecha al hacer hover */ } .category-casas-prefabricadas .post-content .is_dots .list-inline .author-meta .author { display: none; } /* Unificar el estilo de la caja del widget con el del blog */ .main-sidebar-wrapper .widget, .sidebar-widget .widget { background: #fff; border: none !important; /* Sombra suave idéntica al blog */ box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08) !important; border-radius: 16px !important; padding: 30px !important; /* Más aire interno */ margin-bottom: 30px !important; overflow: hidden; } /* Títulos de los widgets más limpios */ .sidebar-widget .widget-heading, .sidebar-widget .widget_block h2 { font-size: 18px !important; font-weight: 700 !important; color: #2c3e50; margin-bottom: 25px !important; letter-spacing: -0.5px; position: relative; display: inline-block; } /* Opcional: Pequeña línea decorativa bajo el título */ .sidebar-widget .widget-heading::after { content: ''; display: block; width: 40px; height: 3px; background: var(--rt-primary-color); margin-top: 8px; border-radius: 2px; } /* Caja del input redondeada */ .widget_search .input-group { border-radius: 50px !important; border: 1px solid #f0f0f0 !important; background-color: #f9f9f9; padding: 5px; transition: all 0.3s ease; } /* Efecto al hacer clic en buscar */ .widget_search .input-group:focus-within { background-color: #fff; border-color: var(--rt-primary-color) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } /* El campo de texto */ .widget_search .form-control { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 14px; padding-left: 15px; } /* El botón de la lupa */ .widget_search .input-group-append .item-btn { background-color: var(--rt-primary-color) !important; color: #fff !important; border-radius: 50% !important; /* Botón redondo */ width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .widget_categories ul li { border-bottom: 1px dashed #eee; /* Línea separadora sutil */ padding: 12px 0 !important; display: flex; justify-content: space-between; align-items: center; } .widget_categories ul li:last-child { border-bottom: none; } .widget_categories ul li a { color: #555; font-weight: 500; font-size: 15px; transition: padding-left 0.2s; } /* Efecto hover: el texto se mueve un poco a la derecha */ .widget_categories ul li a:hover { padding-left: 5px; color: var(--rt-primary-color); } /* Estilo para el número de posts (el span) */ .widget_categories ul li span { background: #f0f2f5; color: #777; font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600; } /* Quitar borde inferior duro */ .rtcl-widget-border-enable .rtcl .rtcl-grid-view .listing-item:not(:last-child) { border-bottom: 1px solid transparent !important; padding-bottom: 15px !important; margin-bottom: 15px !important; } /* Contenedor de cada item de casa */ .rtcl-widget-listing-item { display: flex !important; /* Forzar layout flex */ gap: 15px; align-items: flex-start; } /* La imagen en miniatura */ .rtcl-widget-listing-item .listing-thumb { flex-shrink: 0; width: 90px !important; /* Tamaño fijo */ border-radius: 10px !important; overflow: hidden; } .rtcl-widget-listing-item .listing-thumb img { height: 70px !important; object-fit: cover; width: 100%; transition: transform 0.3s; } /* Zoom suave en la miniatura al pasar el mouse */ .rtcl-widget-listing-item:hover .listing-thumb img { transform: scale(1.1); } /* Título de la casa */ .rtcl-widget-listing-item .listing-title { font-size: 15px !important; line-height: 1.3 !important; margin-bottom: 5px !important; } .rtcl-widget-listing-item .listing-title a { color: #333; font-weight: 600; } /* Precio */ .rtcl-widget-listing-item .listing-price .amount { color: var(--rt-primary-color); font-weight: 700; font-size: 14px; } .sidebar-widget .widget.widget_media_image { padding: 0 !important; /* Quitamos el padding para que llene el widget */ } .sidebar-widget .widget.widget_media_image img { border-radius: 16px; /* Redondear la imagen misma */ display: block; width: 100%; } /* Modernización de la Tarjeta Blog */ .blog-grid.style2 .blog-box.grid-style, .blog-grid .blog-box { border: 1px solid #f0f0f0 !important; /* Borde muy sutil para definir la forma */ background: #fff; /* Sombra más grande, suave y sutilmente azulada para un toque moderno */ box-shadow: 0 15px 50px -15px rgba(0, 100, 200, 0.1) !important; border-radius: 18px !important; /* Ligeramente más redondeado */ padding: 0 !important; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Efecto Hover: Movimiento y sombra más intensa para un efecto "Premium" */ .blog-grid.style2 .blog-box.grid-style:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -10px rgba(0, 100, 200, 0.2) !important; } /* Espaciado del Contenido */ .blog-grid .blog-box .post-content { padding: 30px 30px 25px !important; /* Ajuste del padding */ } /* Título de alto contraste y limpio */ .blog-grid .blog-box .post-content h2.post-title a { color: #1a1a1a !important; /* Negro puro para máximo contraste */ font-size: 22px !important; line-height: 1.3 !important; font-weight: 700 !important; transition: color 0.3s; } /* Metadatos (Autor, Categoría) como texto de apoyo discreto */ .blog-grid .blog-box .post-content .post-meta { font-size: 13px !important; text-transform: none !important; color: #888 !important; border-bottom: none !important; /* Quitamos la línea que añadimos antes si no te gusta */ padding-bottom: 0 !important; margin-bottom: 15px !important; } /* Separador sutil entre metadatos (puntos) */ .blog-grid .blog-box .post-content .post-meta .list-inline>li:not(:last-child)::after { content: "•" !important; color: #ccc; margin: 0 8px; } .read-more-grid-btn { margin-top: 25px; } .read-more-grid-btn a { font-weight: 700 !important; font-size: 14px !important; color: var(--rt-primary-color) !important; display: inline-flex; align-items: center; padding: 8px 0; /* Simular un botón pero sin caja */ border-bottom: 2px solid transparent; transition: all 0.3s ease; } /* Línea sutil al hacer hover */ .read-more-grid-btn a:hover { border-bottom: 2px solid var(--rt-primary-color); } /* Animación de la flecha/icono de lectura */ .read-more-grid-btn a .arrow-btn { margin-left: 8px; font-size: 10px; opacity: 0.8; transition: transform 0.3s ease, opacity 0.3s ease; } .read-more-grid-btn a:hover .arrow-btn { transform: translateX(5px); opacity: 1; } .blog-grid .blog-box .thumbnail-date .popup-date { border-radius: 12px !important; /* Más redondeado que antes */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* Sobreescribir las reglas de caja para el sidebar */ .main-sidebar-wrapper .widget, .sidebar-widget .widget, .rtcl-agents-single-main .agent-email-area { /* Mismo redondeado que el blog */ border-radius: 18px !important; border: 1px solid #f0f0f0 !important; /* Borde muy sutil */ background: #fff !important; /* Sombra más suave y moderna (coherente con el blog) */ box-shadow: 0 15px 50px -15px rgba(0, 100, 200, 0.1) !important; padding: 30px !important; /* Espacio interno generoso */ margin-bottom: 35px !important; transition: box-shadow 0.3s ease; } /* Efecto Hover opcional para widgets (para dar un toque dinámico) */ .main-sidebar-wrapper .widget:hover { box-shadow: 0 25px 50px -10px rgba(0, 100, 200, 0.15) !important; } /* Títulos más impactantes */ .sidebar-widget .widget-heading, .sidebar-widget .widget_block h2 { font-size: 20px !important; /* Un poco más grande para destacar */ font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 25px !important; position: relative; padding-bottom: 10px; } /* Limpiar cualquier estilo de padding/borde residual que pueda tener la imagen de banner */ .sidebar-widget .widget.widget_media_image { padding: 0 !important; } .sidebar-widget .widget.widget_media_image img { border-radius: 16px !important; } /* Pestañas de categorías limpias y modernas */ .widget_categories ul li { padding: 14px 0 !important; /* Más espacio vertical */ border-bottom: 1px solid #f5f5f5 !important; /* Línea de separación muy clara */ } .widget_categories ul li a { font-size: 15px !important; color: #333 !important; font-weight: 500; } .widget_categories ul li a:hover { color: var(--rt-primary-color) !important; } /* Contenedor de búsqueda - Reforzamos el estilo pill/redondeado */ .widget_search .input-group { border-radius: 50px !important; border: 2px solid #eee !important; /* Borde más visible */ } /* Botón de búsqueda dentro del input */ .widget_search .input-group-append .item-btn { border-radius: 50% !important; background-color: var(--rt-primary-color) !important; color: #fff !important; width: 40px; height: 40px; margin-right: 2px; } /* Eliminamos el borde duro y usamos el espaciado para diferenciar */ .sidebar-widget .widget-heading, .sidebar-widget .widget_block h2 { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 25px !important; color: #1a1a1a !important; font-size: 20px !important; } /* Si existe una regla para añadir una línea con ::after, la ocultamos */ .sidebar-widget .widget-heading::after { display: none !important; } /* Ocultamos la línea verde gruesa que aparece debajo del título */ .rtcl.rtcl-widget-listings h3.widget-heading + .rtcl-grid-view::before { display: none !important; } /* Eliminamos la línea bajo el ítem destacado y le damos más espacio */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child { border-bottom: none !important; /* NO BORDER */ padding-bottom: 20px !important; /* Más aire abajo */ margin-bottom: 25px !important; /* Más espacio antes del siguiente */ } /* Ajuste de la separación en los ítems pequeños */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:not(:first-child) { /* Usamos solo una línea de puntos MUY suave */ border-bottom: 1px dashed #f0f0f0 !important; padding-bottom: 15px !important; margin-bottom: 15px !important; } /* Forzamos que el precio vaya justo debajo de la ubicación */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:not(:first-child) .item-content { display: flex; flex-direction: column; justify-content: center; } /* El precio y ubicación deben estar pegados para una lectura rápida */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:not(:first-child) .listing-meta { order: 3; /* Ubicación abajo */ } #rtcl-widget-listing-3 .rtcl-widget-listing-item:not(:first-child) .listing-price { order: 2; /* Precio arriba (o donde prefieras, aquí lo pongo debajo del título) */ } /* Ajuste de título para que no quede muy pegado */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:not(:first-child) .listing-title { margin-bottom: 5px !important; order: 1; /* Título arriba */ } /* Quitamos la línea final de la lista */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; } /* ========================================= WIDGET CASAS LATERAL - PRIMER ÍTEM DESTACADO ========================================= */ /* --- Estilos para el PRIMER elemento (El Destacado) --- */ /* Cambiamos el layout a bloque para que la imagen quede arriba */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child { display: block !important; border-bottom: 2px solid #eee !important; /* Separador más fuerte debajo del destacado */ padding-bottom: 25px !important; margin-bottom: 25px !important; position: relative; } /* Imagen grande para el destacado */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child .listing-thumb { width: 100% !important; /* Ancho completo */ height: auto !important; margin-bottom: 15px !important; /* Espacio debajo de la imagen */ border-radius: 12px !important; /* Redondeado un poco más grande */ } /* Forzar altura de la imagen destacada */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child .listing-thumb img { height: 200px !important; /* Altura fija para que destaque */ object-fit: cover; } /* Título grande para el destacado */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child .listing-title { font-size: 18px !important; font-weight: 700 !important; margin-top: 10px !important; line-height: 1.3 !important; } /* Precio grande para el destacado */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child .listing-price .amount { font-size: 20px !important; font-weight: 800 !important; color: var(--rt-primary-color); display: block; margin-top: 10px; } /* Etiqueta "Disponible" en el destacado (Opcional: hacerla más visible) */ #rtcl-widget-listing-3 .rtcl-widget-listing-item:first-child .listing-type-badge { position: absolute; top: 15px; left: 15px; background: var(--rt-primary-color); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; z-index: 2; } @media(max-width: 768px){ .page-template-default .content-area, .archive .content-area, .page-template-template-blog-grid .content-area, .search .content-area, .blog .content-area, .single .content-area { background-color: var(--rt-primary-light3, #EAF7F4); padding: 0px !important; margin-top: 0px !important; } } @media (max-width: 768px) { .section-title-wrapper .main-title { font-size: 24px; margin-top: 47px; } .casamovilsur-porciudad-modern .city-card-modern-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 250px; background-size: cover; background-position: center; z-index: 1; transition: transform 0.5s cubic-bezier(.4, 2, .6, 1), filter 0.3s; filter: brightness(.92) saturate(1.1); } .listing-card a .card-image-wrapper { height: 125px; overflow: hidden; padding-top: 56.66% !important; max-height: 125px !important; } } /* 1. CONTENEDOR PRINCIPAL: Quitar bordes por defecto y dar espacio */ selector .elementor-accordion { border: none !important; } selector .elementor-accordion-item { border: none !important; /* Quitamos bordes antiguos */ margin-bottom: 15px !important; /* Espacio entre preguntas */ border-radius: 8px !important; /* Bordes redondeados */ background: #ffffff !important; /* Fondo blanco para las tarjetas */ box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; /* Sombra suave para efecto 3D */ overflow: hidden !important; /* Para que el contenido respete el borde redondeado */ transition: all 0.3s ease !important; } /* Efecto al pasar el ratón por encima de toda la tarjeta */ selector .elementor-accordion-item:hover { transform: translateY(-2px) !important; /* Pequeña elevación */ box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important; } /* 2. TÍTULO (La pregunta) - ESTADO INACTIVO */ selector .elementor-tab-title { background-color: #f9f9f9 !important; /* Gris muy suave */ padding: 20px 25px !important; /* Más aire interno */ font-weight: 600 !important; transition: all 0.3s ease !important; border-bottom: 1px solid transparent !important; /* Cambiar el orden: Icono a la derecha */ display: flex !important; flex-direction: row-reverse !important; /* Icono al final */ justify-content: space-between !important; align-items: center !important; } /* Color del texto inactivo */ selector .elementor-tab-title a { color: #333333 !important; /* Gris oscuro */ font-size: 16px !important; /* Ajusta según necesites */ } /* 3. TÍTULO - ESTADO ACTIVO (Cuando se abre) */ selector .elementor-tab-title.elementor-active { background-color: #0f2340 !important; /* TU COLOR AZUL OSCURO (Aprox) */ border-bottom: 1px solid rgba(255,255,255,0.1) !important; } selector .elementor-tab-title.elementor-active a { color: #ffffff !important; /* Texto blanco al estar activo */ } /* 4. EL ICONO (+ / -) */ selector .elementor-accordion-icon { margin-left: 0 !important; /* Resetear margen de Elementor */ width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(0,0,0,0.05) !important; /* Círculo gris suave de fondo */ transition: all 0.3s ease !important; } /* Color del icono inactivo */ selector .elementor-accordion-icon i { color: #0f2340 !important; } /* Estilo del icono cuando está ACTIVO */ selector .elementor-tab-title.elementor-active .elementor-accordion-icon { background: #00d6b4 !important; /* TU COLOR VERDE MENTA/TURQUESA */ transform: rotate(180deg) !important; /* Pequeña rotación elegante */ } selector .elementor-tab-title.elementor-active .elementor-accordion-icon i { color: #ffffff !important; /* Icono blanco sobre fondo verde */ } /* 5. EL CONTENIDO (La respuesta) */ selector .elementor-tab-content { background-color: #ffffff !important; padding: 25px !important; border-top: none !important; color: #555555 !important; line-height: 1.6 !important; } .product-grid .product-box { /* Eliminamos la sombra por defecto y usamos un borde más sutil */ box-shadow: none; border: 1px solid #e0e0e0; /* Borde suave para definir el límite */ border-radius: 12px; /* Aumentamos el radio para un look más suave */ overflow: hidden; /* Asegura que la imagen respete el borde superior */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-grid .product-box:hover { /* Sombra al pasar el ratón para dar sensación de elevación (moderno) */ transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .product-grid .product-box .product-thumb { border-radius: 12px 12px 0 0; /* Coincide con el radio superior de la tarjeta */ } /* Etiqueta de Tipo (* Disponible) */ .product-grid .product-box .product-thumb .product-type { top: 20px; /* Separamos un poco de la parte superior */ left: 20px; } .product-grid .product-box .product-thumb .product-type span { font-size: 13px; padding: 5px 12px; border-radius: 6px; /* Usamos un color de fondo sólido en lugar de solo borde para más impacto */ border: none; font-weight: 600; } /* Precio */ .product-grid .product-box .product-thumb .product-price { bottom: 20px; /* Separamos un poco de la parte inferior */ left: 20px; font-size: 28px; /* Precio más grande y destacado */ font-weight: 700; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Sombra suave para que destaque sobre la imagen */ } .product-grid .product-box .product-thumb .product-price .rtcl-price-amount { font-size: 28px; font-weight: 700; } .product-grid .product-box.style2 .product-content { padding: 15px 22px 22px; /* Redefinimos el padding para un mejor espacio interno */ } /* Título */ .product-grid .product-box.style2 .product-content .item-title { font-size: 20px; /* Un poco más pequeño y enfocado */ line-height: 28px; padding: 0; /* Eliminamos el padding superior y lateral innecesario aquí */ margin-bottom: 5px; font-weight: 600; } /* Categoría (moverla hacia abajo si es necesario para más claridad) */ .product-grid .product-box.style2 .product-content .product-category { margin-top: 0; /* Eliminamos el margen negativo */ margin-bottom: 8px; /* Espaciado moderno */ font-size: 13px; font-weight: 500; text-transform: uppercase; } /* Metadatos (Ubicación) */ .product-grid .product-box.style2 .product-content .entry-meta { padding-bottom: 0; /* Eliminamos el padding inferior para reducir el espacio */ margin-top: 10px; color: #666; /* Color más suave */ font-size: 14px; } .product-grid .product-box .product-content .entry-meta li { margin-right: 15px; } /* Altísima especificidad para asegurar que sobrescribe al tema */ .rt-el-listing-wrapper.product-grid .product-box { /* **Cambio importante:** Asegura que las propiedades visuales prevalezcan */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; border: none !important; border-radius: 16px !important; transition: all 0.3s ease-in-out !important; overflow: hidden !important; background: #ffffff !important; } .rt-el-listing-wrapper.product-grid .product-box:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra más fuerte al pasar el ratón */ } /* Forzar la tipografía a una fuente moderna y limpia si el tema la permite */ body, h1, h2, h3, h4, .product-grid .product-box .product-content { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } .product-grid .product-box .product-thumb { border-radius: 16px 16px 0 0 !important; } /* Degradado forzado para mejorar el contraste del texto sobre la imagen */ .product-grid .product-box .product-thumb:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%) !important; border-radius: 16px 16px 0 0; } /* Etiqueta de Disponibilidad */ .product-grid .product-box .product-thumb .product-type { top: 20px !important; left: 20px !important; z-index: 2 !important; } .product-grid .product-box .product-thumb .product-type span { color: #fff !important; padding: 6px 12px !important; border-radius: 4px !important; font-weight: 600 !important; font-size: 13px !important; border: none !important; } /* Precio */ .product-grid .product-box .product-thumb .product-price { bottom: 20px !important; left: 20px !important; z-index: 2 !important; color: #ffffff !important; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important; } .product-grid .product-box .product-thumb .product-price .rtcl-price-amount { font-size: 30px !important; font-weight: 800 !important; color: #ffffff !important; } /* Contenedor del contenido */ .rt-el-listing-wrapper .product-box.style2 .product-content { padding: 20px 22px 22px !important; } /* Título de la Casa (El más importante) */ .product-grid .product-box.style2 .product-content .item-title { font-size: 24px !important; line-height: 1.2 !important; padding: 0 !important; margin-top: 5px !important; margin-bottom: 10px !important; font-weight: 700 !important; color: #333333 !important; } /* Categoría (Sutil) */ .product-grid .product-box .product-content .product-category a { color: #777777 !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 0.5px !important; font-weight: 600 !important; } /* Metadatos (Ubicación) */ .product-grid .product-box.style2 .product-content .entry-meta { margin-top: 10px !important; padding-bottom: 0 !important; border-top: 1px solid #eeeeee !important; /* Separador sutil */ padding-top: 15px !important; } .product-grid .product-box .product-content .entry-meta li { font-size: 14px !important; color: #666666 !important; } .product-grid .product-box .product-content .entry-meta li i { color: #555555 !important; margin-right: 5px !important; } .main-sidebar-wrapper .widget, .sidebar-widget .widget { border-radius: 10px !important; border: 1px solid #f0f0f0 !important; /* Borde muy fino */ background: #ffffff !important; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.05) !important; /* Sombra muy, muy sutil */ padding: 25px !important; margin-bottom: 30px !important; } /* Campos de Formulario */ .advance-search-form .search-box .search-item input[type="text"], .advance-search-form .search-box .search-item select, .select2-container--classic .select2-selection--single { height: 48px !important; border-radius: 8px !important; background: #f7f7f7 !important; /* Fondo gris claro */ border: 1px solid #e0e0e0 !important; padding-left: 15px !important; font-size: 15px !important; } /* Botón de Buscar */ .search-btn .submit-btn { width: 100%; height: 48px; border-radius: 8px; font-weight: 600 !important; font-size: 16px !important; border: none !important; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4); } /* Popups */ .leaflet-popup-content-wrapper{border-radius:14px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(0,0,0,.10);} .leaflet-popup-content{margin:12px 12px 8px;} .cms-city{font-weight:800;font-size:18px;margin-bottom:2px;} .cms-rep{font-size:13px;opacity:.8;margin-bottom:8px;} .cms-btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--cms-green);color:#fff;text-decoration:none;font-weight:700;transition:.18s ease;} .cms-btn:hover{background:var(--cms-green-700);transform:translateY(-1px);} .cms-btn:focus-visible{outline:3px solid #9be7a7;outline-offset:2px;} /* ---- Marcador mobilhome animado ---- */ .cms-house-wrap{position:relative;width:40px;height:40px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));} .cms-house-wrap::after{ content:"";position:absolute;inset:0;border-radius:999px; background:radial-gradient(closest-side, rgba(106,192,69,.35), rgba(106,192,69,0)); transform:scale(.55);animation:cms-pulse 2.4s ease-out infinite; } @keyframes cms-pulse{0%{transform:scale(.55);opacity:.8}70%{transform:scale(1);opacity:0}100%{transform:scale(1.05);opacity:0}} .cms-house{position:absolute;inset:0;display:grid;place-items:center;animation:cms-float 2.8s ease-in-out infinite;z-index:1;} @keyframes cms-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @media (prefers-reduced-motion: reduce){ .cms-house,.cms-house-wrap::after{animation:none!important} } .cms-house svg{width:28px;height:28px} .cms-house .body{fill:#fff;stroke:var(--cms-green-700);stroke-width:1.2} .cms-house .roof{fill:var(--cms-green)} .cms-house .door{fill:var(--cms-blue)} .cms-house .window{fill:var(--cms-blue-light)} .cms-house .base{fill:var(--cms-green-700);opacity:.12} .about-us-casamovilsur-widget { --brand-primary: #00c194; --brand-secondary: #005a9c; --brand-tertiary: #0dd3a9; --text-dark: #0e2e50; --text-light: #5a6a7a; --bg-light: #f0f7f5; --bg-gradient-start: #eaf7f4; --radius-l: 1.5rem; /* 24px */ --shadow-color: rgba(0, 193, 148, 0.2); --gap-size: 3rem; /* Espacio entre columnas */ } /* Este bloque de estilos SÍ se mantiene, ya que no pertenece al header */ .fullwidth-cms { width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 1rem; box-sizing: border-box; } /* Contact Block Styles */ #contactBlock { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: flex-end; background: linear-gradient(90deg, rgb(212 235 221) 60%, rgb(170 255 181) 100%); padding: 0.7rem 1rem; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px; margin-bottom: 0.5rem; } #contactBlock a { display: flex; align-items: center; gap: 0.4em; font-size: 1rem; color: #2d3e50; text-decoration: none; padding: 0.3em 0.7em; border-radius: 6px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; background: transparent; } #contactBlock a:hover { background: #e6f0ff; color: #007cba; box-shadow: 0 2px 8px rgba(0,124,186,0.08); } #contactBlock a[href^="tel:"]::before { content: "📞"; font-size: 1.1em; } #contactBlock a[href*="facebook"]::before { font-family: Arial, sans-serif; font-size: 1.1em; color: #1877f2; } #contactBlock a[href*="instagram"]::before { font-family: Arial, sans-serif; font-size: 1.1em; color: #e4405f; } #contactBlock a[href*="youtube"]::before { font-size: 1.1em; color: #ff0000; } @media (max-width: 768px) { #contactBlock { flex-direction: row; align-items: center; justify-content: space-around; gap: 0.5rem; padding: 0.5rem; border-radius: 8px; background: linear-gradient(90deg, #f8fafc 50%, #e3eafc 100%); } /* Ocultar redes sociales en móvil */ #contactBlock a[href*="facebook"], #contactBlock a[href*="instagram"], #contactBlock a[href*="youtube"] { display: none; } /* Teléfonos más compactos */ #contactBlock a[href^="tel:"] { font-size: 0.75rem; padding: 0.4em 0.6em; white-space: nowrap; flex: 1; text-align: center; min-width: 0; } #contactBlock a[href^="tel:"]::before { content: "📞"; font-size: 1em; margin-right: 0.2em; } a.tel2 { position: relative; left: -2px; } a.tel2 { position: relative; top: 35px; left: 0px; background: white !important; padding-right: 88px !important; } a.tel3 { position: relative; left: -63px; z-index: 9; } main{ margin-top: 185px; } #site-header{ position: fixed; top: 65px; z-index: 999999999; background: white; } .fullwidth-cms{ position: fixed; top: 0px; z-index: 9 !important; background: rgba(255, 255, 255, 0.8); padding-bottom: 14px; } } .enhanced-head-block { position: relative; width: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center; padding: 32px 0; overflow: hidden; font-family: 'Segoe UI', Arial, sans-serif; } .head-block-bg-blob { position: absolute; left: -15vw; top: -10vw; width: 40vw; height: 40vw; background: radial-gradient(circle at 40% 40%, #00C194 0%, #fff 80%); filter: blur(60px) brightness(1.1); z-index: 0; pointer-events: none; opacity: 0.7; animation: blob-move 8s ease-in-out infinite alternate; } @keyframes blob-move { 0% { transform: scale(1) translateY(0); } 100% { transform: scale(1.1) translateY(20px); } } .head-block-inner { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: stretch; justify-content: center; width: 100%; max-width: 1250px; background: #fff; border-radius: 0 0 48px 48px; box-shadow: 0 8px 32px rgba(0,0,0,0.07); overflow: hidden; top: -4dvh; } .head-block-content { flex: 1 1 0; min-width: 320px; max-width: 540px; padding: 56px 40px 56px 64px; display: flex; flex-direction: column; justify-content: center; background: transparent; text-align: left; } .main-head-title { font-size: 2.4rem; font-weight: 700; color: #181818; margin: 0 0 18px 0; line-height: 1.15; } .main-head-subtitle { color: #026E55; font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; } .main-head-description { font-size: 1.08rem; color: #444; margin-bottom: 28px; margin-top: 0; line-height: 1.6; } .main-head-btn { display: inline-block; padding: 14px 36px; background: #00C194 ; color: #181818; border-radius: 20px; font-size: 1.08rem; font-weight: 700; text-decoration: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s; margin-top: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); border: 2px solid #00C194 ; letter-spacing: 0.5px; } .main-head-btn:hover { background: #fff; color: #026E55FF; border-color: #026E55; box-shadow: 0 4px 16px rgba(230,255,123,0.15); } .main-head-image { flex: 1 1 0; min-width: 320px; max-width: 700px; display: flex; align-items: flex-end; justify-content: flex-end; background: transparent; border-radius: 0 0 48px 0; overflow: hidden; } .main-head-image img { width: 100%; max-width: 700px; height: 73dvh !important; height: auto; border-radius: 0 0 48px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.10); object-fit: cover; display: block; animation: img-fadein 1.2s cubic-bezier(.4,0,.2,1); } @keyframes img-fadein { from { opacity: 0; transform: scale(1.04) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Animaciones de entrada */ .animate-fadein { animation: fadein 1.2s cubic-bezier(.4,0,.2,1); } .animate-slidein { animation: slidein 1.2s cubic-bezier(.4,0,.2,1); } .animate-bounce { animation: bouncein 1.1s cubic-bezier(.4,0,.2,1); } .animate-img { animation: img-fadein 1.2s cubic-bezier(.4,0,.2,1); } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes slidein { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes bouncein { 0% { opacity: 0; transform: scale(0.9); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } /* Responsive */ @media (max-width: 900px) { .head-block-inner { flex-direction: column; border-radius: 0 0 32px 32px; display: block; } .main-head-image { max-width: 100vw; border-radius: 0 0 32px 0; } .main-head-image img { border-radius: 0 0 32px 0; } .head-block-content { padding: 40px 24px 32px 24px; max-width: 100vw; } } @media (max-width: 768px) { .main-head-image { top: -39dvh !important; max-height: 330px !important; } .head-block-inner { height: 673px; max-height: 689px; } } @media (max-width: 600px) { .head-block-inner { flex-direction: column; border-radius: 0 0 18px 18px; max-height: 511px !important; } .main-head-image { border-radius: 0 0 18px 0; max-width: 100vw; min-height: 1px; display: block; position: relative; top: -37dvh; } .main-head-image img { border-radius: 0 0 18px 0; max-width: 100vw; width: 100%; height: 180px !important; min-height: 120px; object-fit: cover; display: block; } .main-head-image .fix-image-position{ height: 380px !important; position: relative; min-height:300px !important; top: 10dvh; } .head-block-content { padding: 18px 6px 12px 6px; max-width: 100vw; text-align: center; position: relative; bottom: -32dvh; } .main-head-title { font-size: 1.1rem; margin-bottom: 10px; } .main-head-subtitle { font-size: 0.95rem; margin-bottom: 6px; } .main-head-description { font-size: 0.98rem; margin-bottom: 16px; } .main-head-btn { width: 100%; padding: 12px 0; font-size: 1rem; margin-top: 12px; } .head-block-bg-blob { display: none; } .ubications-block-content { max-width: 95dvw !important; } .ubications-block-location-btn { font-size: 14px !important; } } @media (max-width: 550px) { .main-head-image .fix-image-position{ height: 390px !important; position: relative; min-height: 300px !important; top: 18dvh; } .main-head-image { top: -48dvh !important; max-height: 400px !important; } .head-block-content { padding-top: 100px !important; } } @media (max-width: 540px) { .ubications-block-media-video iframe { top: 0px !important; } .main-head-image { top: -54dvh !important; max-height: 400px !important; } .head-block-content { padding: 18px 6px 12px; max-width: 100vw; text-align: center; position: relative; bottom: -15dvh; } .head-block-inner { height: 394px; max-height: 689px; } .ubications-block-heading { font-size: 30px !important; } .ubications-block-location-btn { padding: 10px 20px !important; } .ubications-block-description { font-size: 14px !important; text-align: justify !important; } .ubications-block-content { padding-left: 12px !important; padding-right: 12px !important; } .ubications-block-action-btn { font-size: 14px !important; padding: 10px 20px !important; } #bosqueiframe { height: 300px; overflow-y: hidden; } .cmsur-video-title { font-size: 1.25rem !important; } .fullwidth-cms { z-index: 9; } .rt-sticky { z-index: 9999999 !important; } .casamovilsur-porciudad-modern .city-card-modern-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; /* Cambia cover por 100% 100% */ background-size: 100% 100% !important; background-position: center !important; z-index: 1 !important; transition: transform 0.5s cubic-bezier(.4, 2, .6, 1), filter 0.3s !important; filter: brightness(.92) saturate(1.1) !important; } .casamovilsur-porciudad-modern .city-card-modern { min-height: 251px !important; } #cms-home-block-column > .elementor-widget-wrap{ padding: 0px !important; } } @media (max-width: 450px) { .main-head-image .fix-image-position{ height: 315px !important; position: relative; min-height:300px !important; top: 10dvh; } .main-head-image { top: -36dvh !important; max-height: 330px !important; } .head-block-content { padding-top: 100px !important; bottom: -21dvh !important; } .head-block-inner { max-height: 511px !important; } .elementor-widget-rt-properties-type-tab{ margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 430px) { .main-head-image { top: -36dvh !important; max-height: 330px !important; } .head-block-inner { height: 442px; max-height: 689px; } .enhanced-head-block{ padding-top: 0px; padding-bottom: 0px; } #casamovilsur-porciudad-widget{ padding-top: 1dvh !important; } } @media (max-width: 428px) { .main-head-image { top: -43dvh !important; max-height: 330px !important; } } @media (max-width: 428px) and (max-height: 926px){ .main-head-image { top: -39dvh !important; max-height: 306px !important; } .head-block-content { padding-top: 100px !important; bottom: -28dvh !important; } .head-block-inner { height: 483px; max-height: 689px; } .main-head-image .fix-image-position { height: 382px !important; position: relative; min-height: 316px !important; top: 10dvh; } .main-head-image { top: -39dvh !important; max-height: 346px !important; } } @media (max-width: 414px) { .main-head-image { top: -41dvh !important; max-height: 330px !important; } } @media (max-width: 414px) and (max-height: 650px) { .main-head-image { top: -44dvh !important; max-height: 330px !important; } } @media (max-width: 414px) and (max-height: 660px) { .main-head-image { top: -40dvh !important; max-height: 301px !important; } } @media (max-width: 414px) and (max-height: 720px) { .main-head-image { top: -41dvh !important; max-height: 308px !important; } } @media (max-width: 414px) and (max-height: 920px) { .main-head-image { top: -40dvh !important; max-height: 338px!important; } } @media (max-width: 412px) { .main-head-image { top: -39dvh !important; max-height: 330px !important; } } @media (max-width: 412px) and (max-height: 780px) { .main-head-image { top: -36dvh !important; max-height: 353px !important; } } @media (max-width: 412px) and (max-height: 720px) { .main-head-image { top: -36dvh !important; max-height: 353px !important; } } @media (max-width: 412px) and (max-height: 680px) { .main-head-image { top: -36dvh !important; max-height: 353px !important; } } @media (max-width: 412px) and (max-height: 650px) { .main-head-image { top: -36dvh !important; max-height: 353px !important; } } @media (max-width: 412px) and (max-height: 1000px) { .main-head-image { top: -36dvh !important; max-height: 353px !important; } } @media (max-width: 400px) { .main-head-image .fix-image-position{ height: 350px !important; position: relative; min-height:300px !important; top: 10dvh; } .main-head-image { top: -61dvh !important; max-height: 353px !important; } .head-block-content { padding-top: 100px !important; } } @media (max-width: 395px) { .main-head-image { top: -48dvh !important; max-height: 353px !important; } } @media (max-width: 395px) and (min-height: 700px){ .main-head-image { top: -43dvh !important; max-height: 309px !important; } } @media (max-width: 395px) and (min-height: 756px){ .main-head-image { top: -43dvh !important; max-height: 345px !important; } } @media (max-width: 390px) { .main-head-image { top: -57dvh !important; max-height: 353px !important; } } @media (max-width: 390px) and (min-height: 600px){ .main-head-image { top: -47dvh !important; max-height: 316px !important; } } @media (max-width: 390px) and (min-height: 675px){ .main-head-image { top: -49dvh !important; max-height: 296px !important; } } @media (max-width: 390px) and (min-height: 676px){ .main-head-image { top: -49dvh !important; max-height: 324px!important; } } @media (max-width: 390px) and (min-height: 900px){ .main-head-image { top: -50dvh !important; max-height: 303px !important; } } @media (max-width: 390px) and (min-height: 1000px){ .main-head-image { top: -50dvh !important; max-height: 303px !important; } } @media (max-width: 375px) { .main-head-image .fix-image-position{ height: 350px !important; position: relative; min-height:300px !important; top: 10dvh; } .main-head-image { top: -61dvh !important; max-height: 335px !important; } .head-block-content { padding-top: 100px !important; } .head-block-inner { height: 436px; max-height: 689px; } .elementor-16981 .elementor-element.elementor-element-94fc486>.elementor-widget-container { margin: 0vw 0vw 0vw 0vw !important; } } @media (max-width: 375px) and (min-height:600px) { .main-head-image { top: -55dvh !important; max-height: 335px !important; } .head-block-inner { height: 509px; max-height: 689px; } .head-block-content { padding-top: 100px !important; bottom: -30dvh !important; } } @media (max-width: 360px) and (min-height: 500px) { .main-head-image { top: -74dvh !important; max-height: 353px !important; } } @media (max-width: 360px) and (min-height: 560px) { .main-head-image { top: -73dvh !important; max-height: 353px !important; } } @media (max-width: 360px) and (min-height: 590px) { .main-head-image { top: -72dvh !important; max-height: 353px !important; } } @media (max-width: 360px) and (min-height: 600px) { .main-head-image { top: -69dvh !important; max-height: 353px !important; } } @media (max-width: 360px) and (min-height: 612px) { .main-head-image { top: -57dvh !important; max-height: 315px !important; } } @media (max-width: 360px) and (min-height: 640px) { .main-head-image { top: -51dvh !important; max-height: 303px !important; } } @media (max-width: 360px) and (min-height: 680px) { .main-head-image { top: -51dvh !important; max-height: 307px !important; } } @media (max-width: 360px) and (min-height: 690px) { .main-head-image { top: -51dvh !important; max-height: 309px !important; } } @media (max-width: 360px) and (min-height: 695px) { .main-head-image { top: -51dvh !important; max-height: 344px !important; } } @media (max-width: 360px) and (min-height: 700px) { .main-head-image { top: -51dvh !important; max-height: 307px !important; } } @media (max-width: 360px) and (min-height: 715px) { .main-head-image { top: -51dvh !important; max-height: 351px !important; } } @media (max-width: 360px) and (min-height: 795px) { .main-head-image { top: -45dvh !important; max-height: 351px !important; } .head-block-inner { height: 531px; max-height: 689px; } .head-block-content { padding-top: 100px !important; bottom: -27dvh !important; } } @media (max-width: 360px) and (min-height: 800px) { .main-head-image { top: -51dvh !important; max-height: 322px !important; } } @media (max-width: 344px) { .main-head-image { top: -46dvh !important; max-height: 353px !important; } } @media (max-width: 320px) and (min-height: 450px) { .main-head-image { top: -78dvh !important; max-height: 283px !important; } .head-block-inner { height: 469px; max-height: 689px; } .head-block-content { padding-top: 100px !important; bottom: -32dvh !important; } } @media (max-width: 320px) and (min-height: 453px) { .main-head-image { top: -79dvh !important; max-height: 283px !important; } .head-block-inner { height: 469px; max-height: 689px; } .head-block-content { padding-top: 100px !important; bottom: -32dvh !important; } } .ccb-horizontal { max-width: 100% !important; } /* === SLIDER DE APARTAMENTOS === */ /* === SLIDER DE APARTAMENTOS FULL-WIDTH === */ .estado-tag-apartamento { display: inline-block; background: #f5f5f5; color: #1a1a1a; font-size: 12px; padding: 2px 10px; border-radius: 10px; border: 1px solid #d1d1d1; font-weight: 600; margin-left: 2px; vertical-align: middle; } .casamovilsur-slider-apartment-wrapper { margin: 0 !important; padding: 0 !important; max-width: 100vw !important; width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box !important; z-index: 10; } .casamovilsur-slider-apartment { position: relative !important; width: 100vw !important; max-width: 100vw !important; padding: 0 !important; box-sizing: border-box !important; } .swiper { width: 100vw !important; max-width: 100vw !important; height: 100% !important; box-sizing: border-box !important; } .swiper-wrapper { display: flex; align-items: stretch; } .slider-apartment-slide { background: transparent; border-radius: 0; box-shadow: none; overflow: hidden; margin: 0; display: flex; flex-direction: column; height: 100%; } .slider-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .slider-image-wrapper { width: 100vw !important; max-width: 100vw !important; aspect-ratio: 16/7; background: #000; position: relative; min-height: 320px; height: 60vh; max-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box !important; } .slider-image-wrapper img { width: 100vw !important; max-width: 100vw !important; height: 100% !important; object-fit: cover !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; box-sizing: border-box !important; } .slider-overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.32); z-index: 2; } @media (max-width: 991px) { .slider-image-wrapper { height: 40vh; min-height: 220px; aspect-ratio: 16/9; } .apartamento-main-image { height: auto !important; object-fit: unset; } } @media (max-width: 767px) { .slider-image-wrapper { height: 28vh; min-height: 160px; aspect-ratio: 16/10; } } .slider-overlay-content { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: rgba(0,0,0,0.32); z-index: 2; padding: 40px 0 0 48px; box-sizing: border-box; } .slider-title { font-size: 2.2rem; margin: 0 0 18px 0; color: #fff; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.3); text-align: left; letter-spacing: 0.5px; line-height: 1.1; position: relative; left: 65dvw; top: 5dvh; font-size: 3em !important; } .slider-title:hover { color: #07c196; transition: 0.2s; } .slider-button { background: #00C194; color: #fff; border-radius: 16px; padding: 14px 32px; font-weight: 600; font-size: 1.08rem; text-align: left; display: inline-block; margin-top: 0; margin-bottom: 0; margin-left: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.2s, color 0.2s; position: relative; left: 10dvw; bottom: 26dvh; } .slider-button:hover { background: #EAF7F4; color: #00C194; } .slider-content { padding: 18px 20px 24px 20px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; } .slider-button { background: #00C194; color: #EAF7F4; border-radius: 12px; padding: 10px 22px; font-weight: 500; text-align: center; display: inline-block; margin-top: 10px; transition: background 0.2s, color 0.2s; } .slider-button:hover { background: #EAF7F4; color: #00C194; } /* Swiper navigation */ .swiper-button-next, .swiper-button-prev { color: #fff; background: #00C194; border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,0.18); width: 48px; height: 48px; top: 50%; transform: translateY(-50%); transition: background 0.2s, color 0.2s; opacity: 0.92; border: 2px solid #fff; z-index: 20; display: flex; align-items: center; justify-content: center; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.8rem; font-weight: bold; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.18); } .swiper-button-next:hover, .swiper-button-prev:hover { background: #fff; color: #00C194; border-color: #00C194; opacity: 1; } .swiper-pagination { bottom: 0; text-align: center; } .swiper-pagination-bullet { background: #00C194; opacity: 0.4; margin: 0 4px; width: 12px; height: 12px; border-radius: 50%; transition: opacity 0.2s; } .swiper-pagination-bullet-active { opacity: 1; } @media (max-width: 991px) { .slider-apartment-slide { min-width: 320px; } } @media (max-width: 767px) { .slider-apartment-slide { min-width: 240px; } .swiper-button-next, .swiper-button-prev { width: 36px; height: 36px; } } .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; overflow: hidden !important; } .elementor-column.elementor-col-100, .elementor-column[data-col="100"] { width: 100%; } /* Filtros */ .casamovilsur-filters { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .filter-item { display: flex; flex-direction: column; } .filter-item label { font-size: 14px; margin-bottom: 5px; font-weight: bold; } .filter-item select, .filter-item input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; } /* Grid de Apartamentos */ .casamovilsur-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */ gap: 20px; transition: opacity 0.3s ease-in-out; } /* Diseño de la Card */ .listing-card { border: 1px solid #eee; border-radius: 30px; overflow: hidden; transition: box-shadow 0.3s ease; text-decoration: none; color: #333; display: flex; flex-direction: column; } .listing-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .card-link { color: #336; position: relative; display: block; } .card-link:hover { color: #00C194; } .card-image-wrapper { position: relative; width: 100%; padding-top: 66.66%; background: #f0f0f0; height: 300px; } .card-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .listing-card a .card-image-wrapper{ padding-top: 56.66% !important; max-height: 192px !important; height: 192px; overflow: hidden; } .single-rtcl_listing .content-area { padding: 0px 0 0; } .breadcrumbs-banner { padding: 0px 0 !important; } .apartamento-single { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .apartamento-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } .apartamento-badge { background: #a4d65e; color: white; padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; margin-bottom: 10px; display: inline-block; } .apartamento-title { font-size: 32px; font-weight: 700; color: #333; margin: 0 0 10px 0; flex: 1; min-width: 300px; } .apartamento-price { font-size: 36px; font-weight: 700; color: #a4d65e; margin: 0; } .apartamento-content { display: grid; grid-template-columns: 1fr 400px; gap: 40px; margin-bottom: 40px; } .apartamento-gallery { position: relative; } .apartamento-main-image { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; margin-bottom: 15px; } .apartamento-thumbnails { display: flex; gap: 10px; flex-wrap: wrap; } .apartamento-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; } .apartamento-thumb:hover, .apartamento-thumb.active { opacity: 1; } .apartamento-info { background: #f8f9fa; padding: 30px; border-radius: 12px; } .apartamento-locations { margin-bottom: 25px; } .apartamento-locations h3 { color: #333; font-size: 18px; margin-bottom: 15px; } .location-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; color: #666; } .location-item i { color: #a4d65e; margin-right: 8px; width: 16px; } .precio-breakdown { border-top: 1px solid #e0e0e0; padding-top: 20px; margin-bottom: 25px; } .precio-breakdown h4 { color: #333; font-size: 16px; margin-bottom: 15px; } .precio-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; } .precio-total { border-top: 1px solid #e0e0e0; padding-top: 10px; font-weight: 700; font-size: 16px; } .apartamento-description { margin-bottom: 30px; } .apartamento-features { display: flex; gap: 60px; background: white; padding: 30px; border-radius: 12px; border: 1px solid #e0e0e0; margin-bottom: 40px; } .feature-item { text-align: center; min-width: 80px; } .feature-icon { width: 60px; height: 60px; background: #f0f8e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #a4d65e; font-size: 24px; } .feature-value { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 5px; } .feature-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .apartamento-specs { background: white; padding: 30px; border-radius: 12px; border: 1px solid #e0e0e0; } .apartamento-specs h3 { color: #333; font-size: 20px; margin-bottom: 20px; } .spec-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .spec-item:last-child { border-bottom: none; } .spec-label { font-weight: 600; color: #333; } .spec-value { color: #666; } .spec-highlight { background: #a4d65e; color: white; padding: 8px 15px; border-radius: 6px; margin: -8px -15px; } .rtcl-listing-widgets { background: white; padding: 30px; border-radius: 12px; border: 1px solid #e0e0e0; margin-top: 40px; } .rtcl-listing-widgets .widget { margin-bottom: 30px; } .rtcl-listing-widgets .widget:last-child { margin-bottom: 0; } .rtcl-listing-widgets .widget-title { color: #333; font-size: 20px; margin-bottom: 20px; font-weight: 700; } .single-rtcl_listing .content-area { padding: 0px !important; } .breadcrumbs-banner { padding: 0px !important; } .rtrs-review-wrap { padding-left: 12dvw !important; padding-right: 12dvw !important; } @media (max-width: 768px) { .rtrs-review-wrap { padding-left: 2dvw !important; padding-right: 2dvw !important; } } /* === Simulador de Cuotas Widget === */ #cms-cuotas-widget { font-family: system-ui, 'Segoe UI', Roboto, Arial, sans-serif; } #cms-cuotas-widget .cmsw { font-family: system-ui, 'Segoe UI', Roboto, Arial, sans-serif; color: #1d2b44; background: #f6f7f3; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; width: 100%; max-width: 100%; box-sizing: border-box; } #cms-cuotas-widget .cmsw h3 { margin: 0 0 12px; font-size: 18px; color: #0e7096; } #cms-cuotas-widget .cmsw .row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0; } @media(min-width: 560px) { #cms-cuotas-widget .cmsw .row { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { main { margin-top: 0px !important; } } #cms-cuotas-widget .box { background: #fff; border: 1px solid #eef0f2; border-radius: 12px; padding: 12px; } #cms-cuotas-widget label { font-size: 12px; opacity: 0.8; margin-bottom: 6px; display: block; } #cms-cuotas-widget .amt { font-size: 22px; font-weight: 800; color: #0e7096; } #cms-cuotas-widget .quota { font-size: 28px; font-weight: 900; color: #6ac24b; } #cms-cuotas-widget .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #0e7096, #7cc7e6); outline: none; } #cms-cuotas-widget .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #effd58; border: 2px solid #0e7096; cursor: pointer; } #cms-cuotas-widget .slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #effd58; border: 2px solid #0e7096; cursor: pointer; } #cms-cuotas-widget .marks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; opacity: 0.75; } #cms-cuotas-widget .disclaimer { font-size: 11px; opacity: 0.7; margin-top: 10px; } #cms-cuotas-widget .btn-wsp { margin-top: 14px; display: inline-block; background: #6ac24b; color: white; font-weight: 700; padding: 12px 16px; border-radius: 10px; text-decoration: none; transition: 0.2s; } #cms-cuotas-widget .btn-wsp:hover { background: #58a63d; } #cms-cuotas-widget .cmsw-result-box { display: flex; justify-content: space-between; align-items: center; } #cms-cuotas-widget .cmsw-result-label { font-size: 12px; opacity: 0.8; } #cms-cuotas-widget .cmsw-detalle { font-size: 12px; opacity: 0.75; } .card-badge { position: absolute; top: 20px; left: 20px; background-color: #68c72ee0; color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; } .card-content { padding: 15px; } .card-title { font-size: 18px; margin: 0 0 10px 0; color: #212121; } .card-title:hover { color: #07c196; transition: 0.2s ease-in-out; } .card-price { font-size: 20px; font-weight: bold; color: #00a376; margin-bottom: 15px; } .card-meta { display: flex; gap: 15px; font-size: 14px; color: #666; border-top: 1px solid #eee; padding-top: 10px; i { color: #07c196; } } .card-meta span { display: flex; align-items: center; gap: 5px; } /* Paginación */ .casamovilsur-pagination { margin-top: 30px; display: flex; justify-content: center; gap: 5px; } .casamovilsur-pagination .page-numbers { padding: 8px 14px; border: 1px solid #ccc; text-decoration: none; color: #333; border-radius: 4px; } .casamovilsur-pagination .page-numbers.current, .casamovilsur-pagination .page-numbers:hover { background-color: #00C194; color: white; border-color: #00C194; } .elementor-21243 .elementor-element.elementor-element-695497aa > .elementor-widget-container { padding: 25px 0px 15px 0px !important; } .elementor-21243 .elementor-element.elementor-element-7838eabe .elementor-heading-title { font-size: 25px !important; font-weight: 300 !important; color: #0E2E50 !important; margin-top: 35px !important; font-family: 'Pacifico', cursive !important; } .elementor-21243 .elementor-element.elementor-element-695497aa .elementor-button:hover, .elementor-21243 .elementor-element.elementor-element-695497aa .elementor-button:focus { color: #FFF; background-color: #0E2E50; } .elementor-21243 .elementor-element.elementor-element-695497aa .elementor-button { border-radius: 4px; } .elementor-element.elementor-element-7ffcc58.elementor-align-center.elementor-widget.elementor-widget-button { position: relative; top: -23dvh; } .elementor-21243 .elementor-element.elementor-element-d6d4e1f { padding: 0px 0px 110px 0px !important; top: -10dvh; } .subtitulo-casamovil-sur { div{ h4{ font-size: 25px !important; font-weight: 300 !important; color: #0E2E50 !important; margin-top: 35px !important; font-family: 'Pacifico', cursive !important; } } } .titulo-pral-casamovilsur{ div{ h3{ font-size: 60px !important; font-weight: 400 !important; color: #00C194 !important; margin-top: 40px !important; font-family: 'Pacifico', cursive !important; } } } .titulo-casamovilsur{ div{ h3{ font-size: 35px !important; font-weight: 400 !important; color: #00C194 !important; margin-top: 40px !important; font-weight: bold !important; } } } .elementor-21243 .elementor-element.elementor-element-7875b64f{ padding: 50px 0px 50px 0px !important; } .card-buttons { text-align: right; .card-button { background-color: #00C194; padding: 10px; border-radius: 12px; color: #EAF7F4; position: relative; top: -20px; } .card-button:hover { background-color: #EAF7F4; color: #00C194; transition: 0.2s ease-in-out; } } .location{ text-align: left; } .desplegateCard { border-radius: 15px; .hidden-card { display: none; } } @keyframes desplegarCardAnim { 0% { opacity: 0; max-height: 0; transform: translateY(-20px); } 100% { opacity: 0.7; max-height: 500px; transform: translateY(0); } } .desplegateCard:hover { .hidden-card { display: block; animation: desplegarCardAnim 0.4s ease; max-height: 500px; overflow: hidden; z-index: 99999; position: relative; background: #00C194; color: #EAF7F4; transition: box-shadow 0.3s ease; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); } } .title { margin: 0 0 10px 0; position: relative; } .footer-title { font-size: 1.2rem; color: #ffffff !important; font-weight: bold; border-radius: 15px; padding: 5px; b { font-size: 2rem; font-weight: bold; color: #A1EE78!important; } } .slider-detail { position: relative; bottom: -38dvh; left: 67dvw; } .slider-whatsapp { position: relative; bottom: -13dvh; left: 65dvw; a { border-radius: 15px; padding: 10px 24px 12px 24px !important; .elementor-button-text { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important; font-size: 1.08rem; padding: 4.32px; } } } .slider-texto { position: relative; left: 65dvw; top: -12dvh; background: rgba(0, 193, 148,0.5); border-radius: 15px; padding: 20px; p{ font-size: 2rem; color: #fafafa; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important; } } /* Diseño para Móviles */ @media (max-width: 991px) { .casamovilsur-grid { grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */ } } @media (max-width: 767px) { .casamovilsur-grid { grid-template-columns: 1fr; /* 1 columna en móvil */ } } /* --- Contenedor General --- */ .casamovilsur-container { width: 100%; max-width: 100dvw; padding: 3rem 8rem; } /* --- Responsive para contenedor --- */ @media (max-width: 1200px) { .casamovilsur-container { padding: 2.5rem 4rem; } } @media (max-width: 991px) { .casamovilsur-container { padding: 2rem 2rem; } } @media (max-width: 767px) { .casamovilsur-container { padding: 1.5rem 1rem; } } /* --- NUEVO: Grid con Flexbox (sin Bootstrap) --- */ .casamovilsur-grid-container { display: flex; align-items: center; /* Centra verticalmente las columnas */ gap: var(--gap-size); } .casamovilsur-column { display: flex; /* Para centrar el contenido de la tarjeta si es necesario */ justify-content: center; } .casamovilsur-column-image { flex: 1 1 40%; min-width: 30dvw; /* Ancho mínimo para evitar que se comprima demasiado */ } .casamovilsur-column-text { flex: 1 1 60%; min-width: 40dvw; } /* --- Responsive para el grid --- */ @media (max-width: 1200px) { .casamovilsur-grid-container { --gap-size: 2rem; } } @media (max-width: 991px) { .casamovilsur-grid-container { flex-direction: column; /* Apila las columnas verticalmente */ --gap-size: 2rem; } .casamovilsur-column-image, .casamovilsur-column-text { flex-basis: 100%; /* Cada columna ocupa todo el ancho */ min-width: unset; } .casamovilsur-column-text { order: 1; /* Texto aparece primero en móvil */ } .casamovilsur-column-image { order: 2; /* Imagen aparece después en móvil */ } } @media (max-width: 767px) { .casamovilsur-grid-container { --gap-size: 1.5rem; } } @keyframes animated-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .about-us-casamovilsur-widget { background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-light), var(--brand-tertiary)); background-size: 200% 200%; animation: animated-gradient 25s ease infinite; font-family: 'Poppins', sans-serif; overflow: hidden; } .content-card, .image-collage-card { padding: clamp(1.5rem, 5vw, 2.5rem); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-l); box-shadow: 0 10px 40px rgba(0,0,0,0.1); transform-style: preserve-3d; transform: perspective(1000px); width: 100%; } /* --- Responsive para cards --- */ @media (max-width: 767px) { .content-card, .image-collage-card { padding: clamp(1rem, 4vw, 1.5rem); border-radius: 1rem; } } .content-card { text-align: left; } @media (max-width: 991px) { .content-card { text-align: center; } } .content-card .subtitle { color: var(--brand-primary); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.75rem; display: block; } .content-card .main-title { color: var(--text-dark); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.7rem); line-height: 1.2; margin-bottom: 1.25rem; } .content-card .description-text { color: var(--text-light); font-size: clamp(0.9rem, 2.5vw, 1.05rem); line-height: 1.7; margin-bottom: 2rem; } /* --- Responsive para texto --- */ @media (max-width: 767px) { .content-card .subtitle { font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 0.5rem; } .content-card .main-title { margin-bottom: 1rem; } .content-card .description-text { margin-bottom: 1.5rem; } } .btn-cta { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); color: #fff; padding: 0.85rem 1.75rem; border-radius: 50px; font-weight: 600; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px var(--shadow-color); font-size: clamp(0.9rem, 2vw, 1rem); } .btn-cta:hover { color: #fff; transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 25px var(--shadow-color); } /* --- Responsive para botón --- */ @media (max-width: 767px) { .btn-cta { padding: 0.75rem 1.5rem; gap: 0.5rem; } } .image-collage-card { display: grid; grid-template-rows: auto auto; gap: 1rem; grid-template-areas: "img1 img1" "img2 gcard"; } .collage-img-1 { grid-area: img1; } .collage-img-2 { grid-area: img2; } .google-reviews-card { grid-area: gcard; } .collage-img-1, .collage-img-2 { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.4s ease; } .collage-img-1:hover, .collage-img-2:hover { transform: scale(1.05); } /* --- Responsive para galería de imágenes --- */ @media (max-width: 767px) { .image-collage-card { gap: 0.75rem; grid-template-areas: "img1 img1" "img2 gcard"; } .collage-img-1, .collage-img-2 { border-radius: 0.75rem; min-height: 120px; } } @media (max-width: 480px) { .image-collage-card { grid-template-areas: "img1" "img2" "gcard"; grid-template-columns: 1fr; gap: 1rem; } .collage-img-1, .collage-img-2 { min-height: 150px; } } @keyframes float-animation { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .google-reviews-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; background: #fff; border-radius: 1rem; text-align: center; text-decoration: none; box-shadow: 0 5px 20px rgba(0,0,0,0.1); animation: float-animation 6s ease-in-out infinite; transition: box-shadow 0.3s ease; } .google-reviews-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation-play-state: paused; } .google-logo-img { max-width: 50px; margin-bottom: 0.5rem; } .google-reviews-text { line-height: 1.2; } .google-title { font-weight: 700; color: var(--text-dark); font-size: clamp(0.85rem, 2vw, 1rem); } .google-subtitle { font-size: clamp(0.7rem, 1.5vw, 0.8rem); color: var(--text-light); display: block; } .google-stars { color: #fbbc05; font-size: clamp(0.9rem, 2vw, 1rem); display: block; } /* --- Responsive para Google Reviews --- */ @media (max-width: 767px) { .google-reviews-card { padding: 0.75rem; min-height: 100px; } .google-logo-img { max-width: 40px; margin-bottom: 0.25rem; } } @media (max-width: 480px) { .google-reviews-card { padding: 1rem; min-height: 120px; } } #ubication-cms-yt{ .elementor-widget-container{ padding-top: 50px; padding-bottom: 50px; } } .ubications-block-widget { display: flex; gap: 48px; align-items: flex-start; background: #fff; border-radius: 28px; box-shadow: 0 6px 32px rgba(0,0,0,0.10); padding: 36px 32px; max-width: 1200px; margin: 0 auto; z-index: 99; position: relative; } .ubications-block-media { position: relative; width: 480px; max-width: 100%; min-height: 320px; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.10); background: #f7f7f7; } .ubications-block-media-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.13); z-index: 2; } .ubications-block-media-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.2s; } .ubications-block-media-img:hover { filter: brightness(0.93); } .ubications-block-media-img img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; filter: brightness(0.97); } .ubications-block-media-img img[alt="Icono play"] { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 120px; z-index: 4; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10)); } .ubications-block-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; width: 64px; height: 64px; background: #00C194; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.13); border: 4px solid #fff; transition: background 0.2s; } .ubications-block-play:hover { background: #0073aa; } .ubications-block-media-img:hover .ubications-block-play { background: #00C194; } .ubications-block-play svg { width: 32px; height: 32px; } .ubications-block-media-video { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .ubications-block-media-video iframe { border-radius: 20px; width: 100%; height: 100%; border: none; position: relative; top: 100px; } .ubications-block-content { flex: 1; min-width: 320px; display: flex; flex-direction: column; justify-content: flex-start; } .ubications-block-subheading { margin-bottom: 8px; font-size: 17px; font-weight: 400; letter-spacing: 1px; color: #222; opacity: 0.85; } .ubications-block-heading { font-size: 32px; font-weight: 800; line-height: 1.18; margin-bottom: 18px; color: #111; letter-spacing: -0.5px; } .ubications-block-locations { display: flex; gap: 5px; margin-bottom: 18px; } .ubications-block-location-btn { background: #00C194; color: #222; border: none; border-radius: 20px; padding: 10px 32px; font-weight: 700; font-size: 17px; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: background 0.18s, color 0.18s; } .ubications-block-location-btn:hover { background: #00C194; color: #fff; } .ubications-block-description { font-size: 17px; line-height: 1.7; margin-bottom: 28px; color: #222; opacity: 0.92; } .ubications-block-content hr { border: 0; border-top: 2px solid #00C194; margin: 28px 0 18px 0; } .ubications-block-action { display: flex; align-items: center; gap: 16px; } .ubications-block-action img { width: 48px; height: 48px; } .ubications-block-action-btn { background: #00C194; color: #222; font-weight: 800; font-size: 18px; padding: 14px 36px; border-radius: 28px; text-decoration: none; display: inline-block; box-shadow: 0 2px 12px rgba(0,0,0,0.10); border: none; transition: background 0.18s, color 0.18s; } .ubications-block-action-btn:hover { background: #00C194; color: #fff; } @media (max-width: 900px) { .ubications-block-widget { flex-direction: column; gap: 32px; padding: 24px 8px; } .ubications-block-media { width: 100%; min-height: 220px; } } .our-team-widget { width: 100%; padding: 60px 40px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .our-team-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; } .team-member-item { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 20px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-member-item:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .team-member-image { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background-color: #2E8B7B; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; border: 4px solid #f8f9fa; box-shadow: 0 4px 15px rgba(46, 139, 123, 0.2); } .team-member-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 0.3s ease; } .team-member-item:hover .team-member-image img { transform: scale(1.05); } .team-member-info { width: 100%; padding: 0 10px; } .team-member-name { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; color: #2c3e50; line-height: 1.3; letter-spacing: -0.02em; } .team-member-position { font-size: 15px; color: #7f8c8d; margin: 0 0 16px 0; line-height: 1.4; font-weight: 500; } .team-member-email { margin-top: 12px; } .team-member-email a { color: #00C896; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 25px; background: rgba(0, 200, 150, 0.1); transition: all 0.3s ease; border: 1px solid rgba(0, 200, 150, 0.2); } .team-member-email a:hover { color: #ffffff; background: #00C896; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 200, 150, 0.3); } .team-member-email i { font-size: 14px; } /* Responsive Design */ @media (max-width: 1024px) { .our-team-widget { padding: 50px 30px; } .our-team-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 35px; } } @media (max-width: 768px) { .our-team-widget { padding: 40px 20px; } .our-team-container { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; } .team-member-item { padding: 16px; } .team-member-image { width: 130px; height: 130px; margin-bottom: 16px; } .team-member-name { font-size: 18px; } .team-member-position { font-size: 14px; margin-bottom: 14px; } .team-member-email a { font-size: 13px; padding: 6px 14px; } } @media (max-width: 480px) { .our-team-widget { padding: 30px 15px; } .our-team-container { grid-template-columns: 1fr; gap: 25px; } .team-member-item { padding: 20px 15px; margin: 0 auto; max-width: 300px; min-width: 300px; } .team-member-image { width: 120px; height: 120px; margin-bottom: 15px; } .team-member-name { font-size: 17px; margin-bottom: 6px; } .team-member-position { font-size: 13px; margin-bottom: 12px; } .team-member-email a { font-size: 12px; padding: 5px 12px; gap: 6px; } } @media (max-width: 360px) { .our-team-widget { padding: 25px 10px; } .team-member-item { padding: 15px 10px; } .team-member-image { width: 100px; height: 100px; } .team-member-name { font-size: 16px; } .team-member-position { font-size: 12px; } } /* --- ANIMATIONS --- */ @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* --- MAIN SECTION --- */ .cmsur-video-modern-section { position: relative; min-height: 550px; background-size: cover; background-position: center; /* Efecto Parallax simple */ background-attachment: fixed; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2rem; } /* --- OVERLAY --- */ .cmsur-video-overlay { position: absolute; inset: 0; /* Gradiente más sutil y moderno */ background: linear-gradient(120deg, rgba(0, 123, 255, 0.2), rgba(0, 0, 0, 0.6)); z-index: 1; } /* --- CONTENT --- */ .cmsur-video-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 1200px; margin: 0 auto; } /* --- GLASSMORPHISM CARD --- */ .cmsur-video-card { /* Efecto de cristal */ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); padding: 2.5rem; max-width: 450px; margin-right: 48px; display: flex; flex-direction: column; gap: 1.5rem; /* Animación de entrada */ animation: fadeInSlideUp 0.8s ease-out forwards; } /* --- CARD ELEMENTS --- */ .cmsur-video-subtitle { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; /* Animación con retraso */ animation: fadeInSlideUp 0.8s 0.2s ease-out forwards; opacity: 0; /* Start hidden */ } .cmsur-video-title { font-size: 2.25rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; /* Animación con retraso */ animation: fadeInSlideUp 0.8s 0.4s ease-out forwards; opacity: 0; /* Start hidden */ } /* --- VIDEO BUTTON --- */ .cmsur-video-btn { display: inline-flex; align-items: center; gap: 0.8em; background: #00c194; color: #fff; font-weight: 700; border-radius: 50px; padding: 0.8em 1.8em; text-decoration: none; font-size: 1.1rem; transition: transform 0.3s ease, background 0.3s ease; align-self: flex-start; /* Alinear a la izquierda */ /* Animación con retraso */ animation: fadeInSlideUp 0.8s 0.6s ease-out forwards; opacity: 0; /* Start hidden */ } .cmsur-video-btn:hover { background: #009e7a; transform: scale(1.05); /* Efecto de crecimiento */ } .cmsur-video-btn-icon { display: grid; place-items: center; transition: transform 0.3s ease; } .cmsur-video-btn:hover .cmsur-video-btn-icon { transform: scale(1.2) rotate(5deg); } /* --- SECONDARY TEXT --- */ .cmsur-video-secondary-section { display: flex; align-items: center; gap: 2rem; margin-left: 32px; } .cmsur-video-secondary-text { font-family: 'Pacifico', cursive; /* Asegúrate de importar esta fuente si la usas */ font-size: 3rem; color: #fff; opacity: 0; /* Start hidden */ text-shadow: 0 4px 15px rgba(0,0,0,0.25); /* Animación con retraso */ animation: fadeInSlideUp 0.8s 0.8s ease-out forwards; } /* --- INFLUENCER IMAGE --- */ .cmsur-video-influencer { opacity: 0; /* Start hidden */ animation: fadeInSlideUp 0.8s 1.0s ease-out forwards; } .cmsur-influencer-image { width: 15dvw; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; margin-left: 5dvw; } .cmsur-influencer-image:hover { transform: scale(1.1); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); } /* --- RESPONSIVE DESIGN --- */ @media (max-width: 900px) { .cmsur-video-content { flex-direction: column; align-items: center; /* Centrar en móvil */ text-align: center; } .cmsur-video-card { margin-right: 0; margin-bottom: 2.5rem; align-items: center; } .cmsur-video-btn { align-self: center; /* Centrar botón en la tarjeta */ } .cmsur-video-secondary-section { flex-direction: column; margin-left: 0; text-align: center; gap: 1.5rem; } .cmsur-video-secondary-text { font-size: 2.5rem; } .cmsur-influencer-image { width: 61dvw; } } .cms-reviews{--bg:#0f172a;--muted:#94a3b8;--card:#0b1223;--ring:#1e293b;--txt:#e2e8f0;--acc:#22c55e;--chip:#0ea5e9;--shadow:0 10px 30px rgba(0,0,0,.25);background:linear-gradient(180deg,#020617, #0b1223);color:var(--txt);padding:56px 16px;border-radius:20px} .cms-wrap{max-width:1100px;margin:auto} .cms-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .cms-head h2{margin:0;font-size:clamp(1.25rem,2.4vw,1.8rem)} .cms-rating{display:flex;align-items:center;gap:12px} .cms-stars .star{font-size:20px;color:#FFD166} .cms-stars .half{background:linear-gradient(90deg,#FFD166 50%, #334155 50%);-webkit-background-clip:text;color:transparent} .cms-score{font-size:.95rem;color:var(--muted)} .cms-carousel{position:relative} .cms-carousel .track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(33.33% - 12px);gap:18px;overflow:hidden;scroll-behavior:smooth} @media(max-width:900px){.cms-carousel .track{grid-auto-columns:calc(50% - 12px)}} @media(max-width:620px){.cms-carousel .track{grid-auto-columns:100%}} .card{background:rgba(255,255,255,.03);border:1px solid var(--ring);border-radius:16px;padding:16px;box-shadow:var(--shadow)} .card-head{display:flex;gap:12px;align-items:center;margin-bottom:8px} .card-head img{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.12)} .name{margin:0 0 2px 0;font-size:1rem} .stars{color:#FFD166;font-weight:700;letter-spacing:1px;font-size:.95rem} .meta{font-size:.8rem;color:var(--muted)} .badge{background:rgba(14,165,233,.95);color:#7dd3fc;border:1px solid rgba(125,211,252,.25);padding:2px 6px;border-radius:999px} .text{margin:10px 0 0 0;line-height:1.5} .nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--ring);background:rgba(255,255,255,.05);color:var(--txt);width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer} .nav:hover{background:rgba(255,255,255,.12)} .prev{left:-8px} .next{right:-8px} .cms-cta{margin-top:18px;text-align:center} .btn{display:inline-block;background:linear-gradient(90deg,#22c55e,#16a34a);color:white;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700} .btn:hover{filter:brightness(1.05)} /* === ESTILOS MODERNOS PARA FORMULARIO DE CONTACTO === */ .frm-fluent-form .choices__list--dropdown { max-height: 320px !important; background-color: rgba(255, 255, 255, 0.95) !important; } .contact-page-form .elementor-widget-container{ /* Mantenemos tu radio, aunque 16px-20px suele ser más estándar para cards */ border-radius: 20px; /* El truco: un borde semitransparente o gris muy claro, no negro */ border: 1px solid rgba(0, 0, 0, 0.08); /* Sombra doble: una pequeña para definición y una grande para difusión */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background-color: white; padding: 24px; } /* Container principal del formulario */ .contact-page-form .fluentform_wrapper_1 { border-radius: 20px; padding: 40px; position: relative; overflow: visible; margin: 40px 0; z-index: 10; } .elementor-2308 .elementor-element.elementor-element-57dbaf1 > .elementor-element-populated { border-style: none !important; } .contact-page-form .fluentform_wrapper_1::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; z-index: 1; } .contact-page-form .fluent_form_1 { position: relative; z-index: 2; } /* Estilos para el contenedor de columnas */ .contact-page-form .ff-t-container { gap: 30px; } /* Grupos de campos */ .contact-page-form .ff-el-group { margin-bottom: 25px; position: relative; z-index: auto; } /* Ajuste especial para el campo del select */ .contact-page-form .ff-el-group:has(.choices) { z-index: 100; margin-bottom: 35px; } /* Labels modernos */ .contact-page-form .ff-el-input--label { margin-bottom: 8px; } .contact-page-form .ff-el-input--label label { font-weight: 600; font-size: 14px; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.5px; position: relative; display: inline-block; } /* Asterisco personalizado */ .contact-page-form .ff-el-is-required.asterisk-right label::after { content: '*'; color: #e74c3c; margin-left: 5px; font-size: 16px; font-weight: bold; } /* Inputs modernos */ .contact-page-form .ff-el-form-control { width: 100% !important; padding: 15px 20px; border: 2px solid #e1e8ed; border-radius: 12px; font-size: 16px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: rgba(255, 255, 255, 0.9); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .contact-page-form .ff-el-form-control:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); outline: none; background: rgba(255, 255, 255, 1); transform: translateY(-1px); } /* Placeholder styling */ .contact-page-form .ff-el-form-control::placeholder { color: #95a5a6; font-style: italic; } /* Textarea específico */ .contact-page-form textarea.ff-el-form-control { resize: vertical; min-height: 120px; } /* Select mejorado - Choices.js */ .contact-page-form .choices { margin-bottom: 0; position: relative; z-index: 100; } .contact-page-form .choices__inner { background: rgba(255, 255, 255, 0.9); border: 2px solid #e1e8ed; border-radius: 12px; padding: 10px 15px; min-height: 52px; transition: all 0.3s ease; } .contact-page-form .choices__inner:focus-within, .contact-page-form .choices.is-open .choices__inner { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .contact-page-form .choices__list--multiple .choices__item { background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 20px; color: white; padding: 5px 12px; margin: 3px; font-size: 13px; font-weight: 500; } .contact-page-form .choices__list--dropdown { border: none; border-radius: 12px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25); margin-top: 8px; z-index: 9999; position: absolute; background: white; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #667eea #f1f1f1; } /* Estilos para scrollbar webkit */ .contact-page-form .choices__list--dropdown::-webkit-scrollbar { width: 6px; } .contact-page-form .choices__list--dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 6px; } .contact-page-form .choices__list--dropdown::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 6px; } .contact-page-form .choices__list--dropdown::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #5a67d8, #6b46c1); } .contact-page-form .choices__item--choice { padding: 12px 16px; border-bottom: 1px solid #f1f1f1; transition: all 0.2s ease; } .contact-page-form .choices__item--choice:last-child { border-bottom: none; } .contact-page-form .choices__item--choice.is-highlighted { background-color: #667eea; color: white; } .contact-page-form .choices__item--choice:hover { background-color: #f8f9fa; } .contact-page-form .choices__item--choice.is-highlighted:hover { background-color: #5a67d8; } /* Flecha del dropdown */ .contact-page-form .choices__inner::after { border-color: #667eea transparent transparent; margin-top: -2px; } .contact-page-form .choices.is-open .choices__inner::after { border-color: transparent transparent #667eea; margin-top: -7px; } /* Botón de envío */ .contact-page-form .ff-btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12px; padding: 16px 40px; font-size: 16px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; } .contact-page-form .ff-btn-submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .contact-page-form .ff-btn-submit:hover::before { left: 100%; } .contact-page-form .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); } .contact-page-form .ff-btn-submit:active { transform: translateY(0); } /* Animaciones de carga */ .contact-page-form .ff-btn-submit.loading { pointer-events: none; opacity: 0.8; } .contact-page-form .ff-btn-submit.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Mensajes de error mejorados */ .contact-page-form .ff-el-is-error .ff-el-form-control { border-color: #e74c3c !important; animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 20%, 40%, 60%, 80% { transform: translateX(0); } 10%, 30%, 50%, 70% { transform: translateX(-5px); } 90% { transform: translateX(5px); } 100% { transform: translateX(0); } } /* Mensajes de éxito */ .contact-page-form .ff-message-success { background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; padding: 20px; border-radius: 12px; margin: 20px 0; box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3); } /* Responsive */ @media (max-width: 768px) { .contact-page-form .fluentform_wrapper_1 { padding: 25px 20px; margin: 25px 0; margin-top: 90px; } .contact-page-form .ff-t-container { gap: 20px; } .contact-page-form .ff-t-cell { flex-basis: 100% !important; } .contact-page-form .ff-el-form-control { padding: 12px 15px; font-size: 16px; /* Evita zoom en iOS */ } .contact-page-form .choices__list--dropdown { max-height: 280px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } } /* Fix para z-index en diferentes contextos */ .contact-page-form .ff-el-group.choices-container { z-index: 1000 !important; } .contact-page-form .choices.is-open { z-index: 9999 !important; } /* Asegurar que el dropdown aparezca correctamente */ .contact-page-form .choices__list--dropdown.is-active { display: block; opacity: 1; transform: translateY(0); transition: all 0.3s ease; } /* Prevenir overflow issues */ .contact-page-form .ff-t-container, .contact-page-form .ff-t-cell { overflow: visible !important; } /* Efectos de hover para campos */ .contact-page-form .ff-el-group { transform: translateZ(0); } .contact-page-form .ff-el-group:hover .ff-el-form-control { border-color: #bdc3c7; } /* Indicador visual de campo requerido */ .contact-page-form .ff-el-is-required .ff-el-input--content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 4px 4px 0; opacity: 0.7; z-index: 1; } /* Mejora para el título del formulario si existe */ .contact-page-form .ff_screen_reader_title { display: none !important; } /* Añadir un título visual */ .contact-page-form .fluentform_wrapper_1::after { content: 'Contacta con nosotros'; position: absolute; top: -15px; left: 40px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; z-index: 3; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* === ESTILOS ESPECÍFICOS PARA FORMULARIO EN HOME === */ #contactohome .fluentform_wrapper_1 { border-radius: 20px; padding: 40px; position: relative; overflow: visible; margin: 40px auto; max-width: 1200px; z-index: 10; } #contactohome .fluentform_wrapper_1::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; z-index: 1; } #contactohome .fluent_form_1 { position: relative; z-index: 2; } /* Estilos para el contenedor de columnas en home */ #contactohome .ff-t-container { gap: 30px; } /* Grupos de campos en home */ #contactohome .ff-el-group { margin-bottom: 25px; position: relative; z-index: auto; } /* Ajuste especial para el campo del select en home */ #contactohome .ff-el-group:has(.choices) { z-index: 100; margin-bottom: 35px; } /* Labels modernos en home */ #contactohome .ff-el-input--label { margin-bottom: 8px; } #contactohome .ff-el-input--label label { font-weight: 600; font-size: 14px; color: #2c3e50; text-transform: uppercase; letter-spacing: 0.5px; position: relative; display: inline-block; } /* Asterisco personalizado en home */ #contactohome .ff-el-is-required.asterisk-right label::after { content: '*'; color: #e74c3c; margin-left: 5px; font-size: 16px; font-weight: bold; } /* Inputs modernos en home */ #contactohome .ff-el-form-control { width: 100% !important; padding: 15px 20px; border: 2px solid #e1e8ed; border-radius: 12px; font-size: 16px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: rgba(255, 255, 255, 0.9); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } #contactohome .ff-el-form-control:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); outline: none; background: rgba(255, 255, 255, 1); transform: translateY(-1px); } /* Placeholder styling en home */ #contactohome .ff-el-form-control::placeholder { color: #95a5a6; font-style: italic; } /* Textarea específico en home */ #contactohome textarea.ff-el-form-control { resize: vertical; min-height: 120px; } /* Select mejorado - Choices.js en home */ #contactohome .choices { margin-bottom: 0; position: relative; z-index: 100; } #contactohome .choices__inner { background: rgba(255, 255, 255, 0.9); border: 2px solid #e1e8ed; border-radius: 12px; padding: 10px 15px; min-height: 52px; transition: all 0.3s ease; } #contactohome .choices__inner:focus-within, #contactohome .choices.is-open .choices__inner { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } #contactohome .choices__list--multiple .choices__item { background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 20px; color: white; padding: 5px 12px; margin: 3px; font-size: 13px; font-weight: 500; } #contactohome .choices__list--dropdown { border: none; border-radius: 12px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25); margin-top: 8px; z-index: 9999; position: absolute; background: white; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #667eea #f1f1f1; } /* Estilos para scrollbar webkit en home */ #contactohome .choices__list--dropdown::-webkit-scrollbar { width: 6px; } #contactohome .choices__list--dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 6px; } #contactohome .choices__list--dropdown::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 6px; } #contactohome .choices__list--dropdown::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #5a67d8, #6b46c1); } #contactohome .choices__item--choice { padding: 12px 16px; border-bottom: 1px solid #f1f1f1; transition: all 0.2s ease; } #contactohome .choices__item--choice:last-child { border-bottom: none; } #contactohome .choices__item--choice.is-highlighted { background-color: #667eea; color: white; } #contactohome .choices__item--choice:hover { background-color: #f8f9fa; } #contactohome .choices__item--choice.is-highlighted:hover { background-color: #5a67d8; } /* Flecha del dropdown en home */ #contactohome .choices__inner::after { border-color: #667eea transparent transparent; margin-top: -2px; } #contactohome .choices.is-open .choices__inner::after { border-color: transparent transparent #667eea; margin-top: -7px; } /* Botón de envío en home */ #contactohome .ff-btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 12px; padding: 16px 40px; font-size: 16px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; } #contactohome .ff-btn-submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } #contactohome .ff-btn-submit:hover::before { left: 100%; } #contactohome .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); } #contactohome .ff-btn-submit:active { transform: translateY(0); } /* Animaciones de carga en home */ #contactohome .ff-btn-submit.loading { pointer-events: none; opacity: 0.8; } #contactohome .ff-btn-submit.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } /* Mensajes de error mejorados en home */ #contactohome .ff-el-is-error .ff-el-form-control { border-color: #e74c3c !important; animation: shake 0.5s ease-in-out; } /* Mensajes de éxito en home */ #contactohome .ff-message-success { background: linear-gradient(135deg, #2ecc71, #27ae60); color: white; padding: 20px; border-radius: 12px; margin: 20px 0; box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3); } /* Efectos de hover para campos en home */ #contactohome .ff-el-group { transform: translateZ(0); } #contactohome .ff-el-group:hover .ff-el-form-control { border-color: #bdc3c7; } /* Indicador visual de campo requerido en home */ #contactohome .ff-el-is-required .ff-el-input--content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 4px 4px 0; opacity: 0.7; z-index: 1; } /* Título del formulario en home */ #contactohome .fluentform_wrapper_1::after { content: 'Contactanos Ahora'; position: absolute; top: -15px; left: 40px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; z-index: 3; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Responsive específico para home */ @media (max-width: 768px) { #contactohome .fluentform_wrapper_1 { padding: 25px 20px; margin: 25px 10px; margin-top: 90px; } #contactohome .ff-t-container { gap: 20px; } #contactohome .ff-t-cell { flex-basis: 100% !important; } #contactohome .ff-el-form-control { padding: 12px 15px; font-size: 16px; } #contactohome .choices__list--dropdown { max-height: 280px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } } /* Fix para z-index en diferentes contextos home */ #contactohome .ff-el-group.choices-container { z-index: 1000 !important; } #contactohome .choices.is-open { z-index: 9999 !important; } /* Asegurar que el dropdown aparezca correctamente en home */ #contactohome .choices__list--dropdown.is-active { display: block; opacity: 1; transform: translateY(0); transition: all 0.3s ease; } /* Prevenir overflow issues en home */ #contactohome .ff-t-container, #contactohome .ff-t-cell { overflow: visible !important; } .cms-reviews{--bg:#0f172a;--muted:#94a3b8;--card:#0b1223;--ring:#1e293b;--txt:#e2e8f0;--acc:#22c55e;--chip:#0ea5e9;--shadow:0 10px 30px rgba(0,0,0,.25);background:linear-gradient(180deg,#020617, #0b1223) !important;color:var(--txt) !important;padding:56px 16px !important;border-radius:20px !important} .cms-wrap{max-width:1100px !important;margin:auto !important} .cms-head{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;flex-wrap:wrap !important;margin-bottom:18px !important} .cms-head h2{margin:0 !important;font-size:clamp(1.25rem,2.4vw,1.8rem) !important} .cms-rating{display:flex !important;align-items:center !important;gap:12px !important} .cms-stars .star{font-size:20px !important;color:#FFD166 !important} .cms-stars .half{background:linear-gradient(90deg,#FFD166 50%, #334155 50%) !important;-webkit-background-clip:text !important;color:transparent !important} .cms-score{font-size:.95rem !important;color:var(--muted) !important} .cms-carousel{position:relative !important} .cms-carousel .track{display:grid !important;grid-auto-flow:column !important;grid-auto-columns:calc(33.33% - 12px) !important;gap:18px !important;overflow:hidden !important;scroll-behavior:smooth !important} @media(max-width:900px){.cms-carousel .track{grid-auto-columns:calc(50% - 12px) !important}} @media(max-width:620px){.cms-carousel .track{grid-auto-columns:100% !important}} .card{background:rgba(255,255,255,.03) !important;border:1px solid var(--ring) !important;border-radius:16px !important;padding:16px !important;box-shadow:var(--shadow) !important} .card-head{display:flex !important;gap:12px !important;align-items:center !important;margin-bottom:8px !important} .card-head img{width:48px !important;height:48px !important;border-radius:50% !important;border:2px solid rgba(255,255,255,.12) !important} .name{margin:0 0 2px 0 !important;font-size:1rem !important} .stars{color:#FFD166 !important;font-weight:700 !important;letter-spacing:1px !important;font-size:.95rem !important} .meta{font-size:.8rem !important;color:var(--muted) !important} .badge{background:rgba(14,165,233,.15) !important;color:#7dd3fc !important;border:1px solid rgba(125,211,252,.25) !important;padding:2px 6px !important;border-radius:999px !important} .text{margin:10px 0 0 0 !important;line-height:1.5 !important} .nav{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;border:1px solid var(--ring) !important;background:rgba(255,255,255,.05) !important;color:var(--txt) !important;width:36px !important;height:36px !important;border-radius:999px !important;display:grid !important;place-items:center !important;cursor:pointer !important} .nav:hover{background:rgba(255,255,255,.12) !important} .prev{left:-8px !important} .next{right:-8px !important} .cms-cta{margin-top:18px !important;text-align:center !important} .btn{display:inline-block !important;background:linear-gradient(90deg,#22c55e,#16a34a) !important;color:white !important;padding:12px 18px !important;border-radius:999px !important;text-decoration:none !important;font-weight:700 !important} .btn:hover{filter:brightness(1.05) !important} .services-block { padding: 50px; border-radius: 20px; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.18); background: #23272a; position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; justify-content: center; } .service-item { background: rgba(20, 22, 25, 0.92); border-radius: 16px; padding: 32px; width: 100%; box-sizing: border-box; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.1); color: #fff; display: flex; flex-direction: column; align-items: flex-start; position: relative; transition: all 0.3s ease; height: 100%; } .service-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); } @media (max-width: 768px) { .services-block { padding: 30px 20px; grid-template-columns: 1fr; } .service-item { padding: 24px; } } .service-icon { font-size: 2.7em !important; color: #b6ff3c !important; margin-bottom: 18px !important; } .service-title { margin: 0 0 10px 0; font-size: 1.35em; font-weight: 700; color: #fff; letter-spacing: 0.01em; } .service-desc { font-size: 1.05em; color: #e0e0e0; margin-bottom: 18px; } .service-btn { display: inline-block; background: #c6ff3c; color: #23272a; font-weight: 700; font-size: 1.08em; padding: 12px 28px; border-radius: 30px; text-decoration: none; margin-top: 10px; box-shadow: 0 2px 8px rgba(182,255,60,0.13); transition: background 0.18s, color 0.18s; border: none; cursor: pointer; } .service-btn:hover { background: #b6ff3c; color: #111; } .anim-container { opacity: 0; transform: perspective(1000px) translateY(50px) rotateX(-10deg); transition: opacity 1s ease, transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); } .anim-container.is-visible { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(0); } .casamovilsur-column-text .anim-container.is-visible { transition-delay: 0.2s; } /* --- Responsive para animaciones --- */ @media (max-width: 767px) { .anim-container { transform: perspective(1000px) translateY(30px) rotateX(-5deg); } } /* --- Mejoras generales para móvil --- */ @media (max-width: 480px) { * { -webkit-tap-highlight-color: transparent; } .about-us-casamovilsur-widget { overflow-x: hidden; } } /** PADDING DEL APARTAMENTOS-WIDGET */ .casamovilsur-apartamentos-wrapper { padding-left: 0dvw; padding-right: 0dvw; } /** blog */ /* -- Variables de Color y Diseño para fácil personalización -- */ :root { --blw-color-primary: #005A9C !important; --blw-color-primary-light: #e6f0f6 !important; --blw-color-secondary: #00B4D8 !important; --blw-text-dark: #1a202c !important; --blw-text-light: #4a5568 !important; --blw-background-light: #f7fafc !important; --blw-background-widget: #ffffff !important; --blw-border-color: #e2e8f0 !important; --blw-border-radius: 12px !important; --blw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important; --blw-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; --blw-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* -- Contenedor Principal -- */ .blog-list-widget-wrapper { width: 100% !important; max-width: 1280px !important; margin: 3rem auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* -- Filtros -- */ .blog-list-filters { display: flex !important; flex-wrap: wrap !important; gap: 1.5rem !important; margin-bottom: 3rem !important; padding: 1.5rem !important; background: var(--blw-background-widget) !important; border-radius: var(--blw-border-radius) !important; border: 5px solid var(--blw-border-color) !important; } .blog-list-filters .filter-item { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; min-width: 200px !important; } .blog-list-filters label { font-size: 0.9em !important; font-weight: 600 !important; margin-bottom: 0.5em !important; color: var(--blw-text-dark) !important; } .blog-list-filters select, .blog-list-filters input[type="text"] { border-radius: 8px !important; padding: 0.8em 1em !important; font-size: 1em !important; background-color: var(--blw-background-light) !important; color: var(--blw-text-light) !important; transition: var(--blw-transition) !important; } .blog-list-filters select:focus, .blog-list-filters input[type="text"]:focus { outline: none !important; border-color: var(--blw-color-primary) !important; box-shadow: 0 0 0 3px var(--blw-color-primary-light) !important; background-color: var(--blw-background-widget) !important; } .blog-list-filters button[type="submit"] { background: var(--blw-color-primary) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 0.8em 2.5em !important; font-size: 1em !important; font-weight: 700 !important; cursor: pointer !important; align-self: flex-end !important; transition: var(--blw-transition) !important; } .blog-list-filters button[type="submit"]:hover { background: var(--blw-text-dark) !important; transform: translateY(-2px) !important; box-shadow: var(--blw-shadow) !important; } /* -- Grid de Artículos -- */ .blog-list-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; gap: 2.5rem !important; } .blog-list-grid .no-results { grid-column: 1 / -1 !important; text-align: center !important; padding: 4rem 2rem !important; background-color: var(--blw-background-widget) !important; border-radius: var(--blw-border-radius) !important; color: var(--blw-text-light) !important; font-size: 1.2em !important; border: 1px solid var(--blw-border-color) !important; } /* -- Tarjeta de Artículo -- */ .blog-card { background: var(--blw-background-widget) !important; border-radius: var(--blw-border-radius) !important; box-shadow: var(--blw-shadow) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: var(--blw-transition) !important; border: 1px solid var(--blw-border-color) !important; .blog-card:hover { transform: translateY(-8px) !important; box-shadow: var(--blw-shadow-hover) !important; border-radius: 15px !important; } .blog-card .card-link { color: inherit !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; height: 100% !important; } .card-image-wrapper { width: 100% !important; aspect-ratio: 16/9 !important; overflow: hidden !important; } .card-image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s ease !important; } .blog-card:hover .card-image-wrapper img { transform: scale(1.05) !important; } .card-content { padding: 1.5rem !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } .card-categories { margin-bottom: 0.75rem !important; } .card-categories .cat { background: var(--blw-color-primary-light) !important; color: var(--blw-color-primary) !important; border-radius: 999px !important; padding: 0.3em 0.8em !important; font-size: 0.8em !important; font-weight: 700 !important; margin-right: 0.4em !important; display: inline-block !important; margin-bottom: 0.4em !important; } .card-title { font-size: 1.4em !important; font-weight: 700 !important; color: var(--blw-text-dark) !important; margin: 0 0 0.5em 0 !important; line-height: 1.3 !important; } .card-link-title { color: #00c194 !important; } .card-link-title:hover { color: #005A9C !important; text-decoration: none !important; } .card-excerpt { color: var(--blw-text-light) !important; font-size: 1em !important; line-height: 1.6 !important; margin-bottom: 1.5rem !important; flex-grow: 1 !important; } .card-meta { font-size: 0.9em !important; color: var(--blw-text-light) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: 1px solid var(--blw-border-color) !important; padding-top: 1rem !important; margin-top: auto !important; } .card-date, .card-author { font-weight: 500 !important; } .card-read-more { font-weight: 700 !important; color: var(--blw-color-primary) !important; text-decoration: none !important; } .card-read-more:hover { text-decoration: underline !important; } } /* -- Paginación -- */ .blog-list-pagination { display: flex !important; justify-content: center !important; gap: 0.75em !important; margin: 4rem 0 1rem 0 !important; padding: 1.5rem !important; background: var(--blw-background-widget) !important; border-radius: var(--blw-border-radius) !important; box-shadow: var(--blw-shadow) !important; border: 1px solid var(--blw-border-color) !important; } .blog-list-pagination .page-numbers { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--blw-background-light) !important; color: var(--blw-text-light) !important; font-weight: 600 !important; text-decoration: none !important; transition: var(--blw-transition) !important; } .blog-list-pagination .page-numbers:hover { background: var(--blw-color-primary-light) !important; color: var(--blw-color-primary) !important; transform: translateY(-2px) !important; } .blog-list-pagination .page-numbers.current { background: var(--blw-color-primary) !important; color: #fff !important; cursor: default !important; transform: none !important; box-shadow: 0 4px 10px -2px rgba(0, 90, 156, 0.4) !important; } .blog-list-pagination .prev, .blog-list-pagination .next { font-size: 1.2em !important; } /* -- Responsividad -- */ @media (max-width: 768px) { .blog-list-filters { flex-direction: column !important; align-items: stretch !important; } .blog-list-filters button[type="submit"] { align-self: auto !important; } .blog-list-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } } #casamovilsur-apartments-column-widget .apartments-column-widget { width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.07); padding: 1.5rem 1rem 2rem 1rem; margin-bottom: 2rem; } #casamovilsur-apartments-column-widget .apartments-main-card { background: linear-gradient(90deg, #00C194 0%, #005A9C 100%); border-radius: 14px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10); overflow: hidden; margin-bottom: 2rem; color: #fff; display: flex; flex-direction: column; align-items: stretch; } #casamovilsur-apartments-column-widget .apartments-main-card .main-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #e2e8f0; } #casamovilsur-apartments-column-widget .apartments-main-card .main-content { padding: 1.2em 1.3em 1.3em 1.3em; } #casamovilsur-apartments-column-widget .apartments-main-card .main-title { font-size: 1.25em; font-weight: 700; margin: 0 0 0.5em 0; color: #fff; } #casamovilsur-apartments-column-widget .apartments-main-card .main-meta { font-size: 1em; margin-bottom: 0.7em; color: #e0f7fa; } #casamovilsur-apartments-column-widget .apartments-main-card .main-link { display: inline-block; margin-top: 0.7em; background: #fff; color: #00C194; border-radius: 8px; padding: 0.5em 1.2em; font-weight: 700; text-decoration: none; transition: background 0.2s, color 0.2s; } #casamovilsur-apartments-column-widget .apartments-main-card .main-link:hover { background: #00b4d8; color: #fff; } #casamovilsur-apartments-column-widget .apartments-top-list { display: flex; flex-direction: column; gap: 1.2rem; } #casamovilsur-apartments-column-widget .apartments-top-card { display: flex; align-items: center; background: #f7fafc; border-radius: 10px; overflow: hidden; transition: box-shadow 0.18s, transform 0.18s; border: 5px solid var(--blw-border-color) !important; } #casamovilsur-apartments-column-widget .apartments-top-card .top-image { width: 80px; height: 80px; object-fit: cover; background: #e2e8f0; border-radius: 10px 0 0 10px; flex-shrink: 0; } #casamovilsur-apartments-column-widget .apartments-top-card .top-content { padding: 0.7em 1em; flex: 1 1 auto; } #casamovilsur-apartments-column-widget .apartments-top-card .top-title { font-size: 1.05em; font-weight: 700; color: #22223b; margin: 0 0 0.2em 0; } #casamovilsur-apartments-column-widget .apartments-top-card .top-meta { font-size: 0.95em; color: #4a5568; } #casamovilsur-apartments-column-widget .apartments-top-card .top-link { display: inline-block; margin-top: 0.3em; color: #00C194; font-weight: 700; text-decoration: none; font-size: 0.97em; } #casamovilsur-apartments-column-widget .apartments-top-card .top-link:hover { text-decoration: underline; } @media (max-width: 600px) { #casamovilsur-apartments-column-widget .apartments-column-widget { padding: 0.5rem 0.2rem 1rem 0.2rem; } #casamovilsur-apartments-column-widget .apartments-main-card .main-content { padding: 0.7em 0.7em 1em 0.7em; } #casamovilsur-apartments-column-widget .apartments-top-card .top-content { padding: 0.5em 0.5em; } #casamovilsur-apartments-column-widget .apartments-top-card .top-image { width: 60px; height: 60px; } } #casamovilsur-porciudad-widget { padding-top: 7dvh; padding-bottom: 2.5rem; } .casamovilsur-porciudad-modern .city-card-link { display: block; text-decoration: none; height: 100%; } .casamovilsur-porciudad-modern .city-card-modern { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13); background: #fff; min-height: 340px; transition: box-shadow 0.3s, transform 0.3s; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; } .casamovilsur-porciudad-modern .city-card-modern:hover { box-shadow: 0 12px 40px 0 rgba(0,193,148,0.18), 0 2px 8px 0 rgba(0,0,0,0.10); transform: translateY(-8px) scale(1.03); } .casamovilsur-porciudad-modern .city-card-modern-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; transition: transform 0.5s cubic-bezier(.4,2,.6,1), filter 0.3s; filter: brightness(0.92) saturate(1.1); } .casamovilsur-porciudad-modern .city-card-modern:hover .city-card-modern-bg { transform: scale(1.07); filter: brightness(0.85) saturate(1.2); } .casamovilsur-porciudad-modern .city-card-modern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,193,148,0.22) 0%, rgba(0,0,0,0.55) 100%); opacity: 0.92; z-index: 2; transition: background 0.3s, opacity 0.3s; } .casamovilsur-porciudad-modern .city-card-modern:hover .city-card-modern-overlay { background: linear-gradient(135deg, rgba(0,193,148,0.32) 0%, rgba(0,0,0,0.75) 100%); opacity: 1; } .casamovilsur-porciudad-modern .city-card-modern-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2.2rem 1.2rem 1.2rem 1.2rem; min-height: 180px; } .casamovilsur-porciudad-modern .city-card-modern-logo-wrapper { background: rgba(255,255,255,0.92); border-radius: 50%; padding: 8px; margin-bottom: 1.1rem; box-shadow: 0 2px 12px 0 rgba(0,193,148,0.10); display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; } .casamovilsur-porciudad-modern .city-card-modern-logo { width: 90px; height: 90px; object-fit: contain; border-radius: 50%; background: transparent; transition: transform 0.3s; } .casamovilsur-porciudad-modern .city-card-modern:hover .city-card-modern-logo { transform: scale(1.12) rotate(-3deg); } .casamovilsur-porciudad-modern .city-card-modern-title { color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 1px 2px rgba(0,193,148,0.12); margin-bottom: 0; margin-top: 0.2rem; line-height: 1.1; } .casamovilsur-porciudad-modern .city-card-modern-hidden { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; width: 100%; background: rgba(0,0,0,0.92); color: #fff; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; padding: 1.5rem 1.2rem 1.2rem 1.2rem; opacity: 0; transform: translateY(100%); pointer-events: none; transition: opacity 0.45s cubic-bezier(.4,2,.6,1), transform 0.45s cubic-bezier(.4,2,.6,1); display: flex; flex-direction: column; align-items: center; text-align: center; } .casamovilsur-porciudad-modern .city-card-modern:hover .city-card-modern-hidden { opacity: 1; transform: translateY(0); pointer-events: auto; } .casamovilsur-porciudad-modern .city-card-modern-hidden h5 { font-size: 1.13rem; font-weight: 700; margin-bottom: 0.5rem; color: #A1EE78; letter-spacing: 0.01em; } .casamovilsur-porciudad-modern .city-card-modern-hidden p { font-size: 0.97rem; color: #fff; opacity: 0.92; margin-bottom: 0; } @media (max-width: 991px) { .casamovilsur-porciudad-modern .city-card-modern-content { padding: 1.5rem 0.7rem 0.7rem 0.7rem; min-height: 120px; } .casamovilsur-porciudad-modern .city-card-modern-logo-wrapper { width: 80px; height: 80px; padding: 5px; } .casamovilsur-porciudad-modern .city-card-modern-logo { width: 60px; height: 60px; } .casamovilsur-porciudad-modern .city-card-modern-title { font-size: 1.1rem; } .casamovilsur-porciudad-modern .city-card-modern-hidden h5 { font-size: 1rem; } .casamovilsur-porciudad-modern .city-card-modern-hidden p { font-size: 0.82rem; } } .casamovilsur-porciudad-modern .img-fluid { max-width: 100%; height: auto; } .casamovilsur-porciudad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2.2rem; justify-items: center; align-items: stretch; margin: 0 auto; } .casamovilsur-porciudad-grid-item { width: 100%; max-width: 410px; display: flex; flex-direction: column; align-items: stretch; } @media (max-width: 991px) { .casamovilsur-porciudad-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; } .casamovilsur-porciudad-grid-item { max-width: 100%; } } @media (max-width: 600px) { .casamovilsur-porciudad-grid { grid-template-columns: 1fr; gap: 1rem; } } .casamovilsur-titles-section { text-align:center; padding-bottom: 7dvh; } .casamovilsur-titles-section-label { font-size: 1.2em; letter-spacing: 2px; color: #16304a; font-weight: 400; display: block; margin-bottom: 0.2em; } .casamovilsur-titles-section-main { font-family: 'Pacifico', cursive; font-size: 4em; color: #00C194; line-height: 1; margin: 0; font-weight: 400; } .casamovilsur-titles-section-secondary { font-family: inherit; font-size: 1.5em; color: #16304a; font-weight: 700; margin-top: -0.3em; } @media (max-width: 600px) { .casamovilsur-titles-section-main { font-size: 2.2em !important; } .casamovilsur-titles-section-secondary { font-size: 1.1em !important; } body{ margin-top: 90px !important; } .casamovil-header .site-branding .custom-logo-link img { max-width: 100%; height: auto; width: 30px; } } .contact-page-form .choices__list--dropdown { display: none; } @media (max-width: 768px) { .listing-card a .card-image-wrapper { height: 125px !important; max-height: 125px !important; } .site-main:not(.homlisti-myaccount) .main-content { background-color: #fff; padding: 0px !important; } .apartamento-info { padding: 3px !important; } .widget { padding: 3px !important; } .rtcl-listing-widgets { padding: 0px !important; } } @media (max-width: 468px) { #contactBlock a[href^="tel:"] { font-size: .65rem !important; } }