/*Version 1.0.1 de Ardiseny para sandra sacristan*/ :root { --blanco-roto: #f0eade; --beige-arena: #E6DED4; --verde-oliva: #556B2F; --verde-oliva-claro: #d4decb; --azul-profundo: #3e5066; --gris-piedra: #828d8f; --texto-logo: #565f62; --subrayado: #8f9783; --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sandra-theme-public { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; } body.sandra-theme-public { padding-top: 80px; /* Ajusta este valor según la altura de tu header */ font-family: 'Tenor Sans', sans-serif; background-color: var(--blanco-roto); color: var(--azul-profundo); line-height: 1.7; /* overflow-x: hidden; Evita scroll horizontal por animaciones laterales */ } /* 2. Si no lo tienes, añade un contenedor en tu HTML justo debajo del y envuelve TODO */ .page-wrapper { overflow-x: hidden; width: 100%; position: relative; } .container { max-width: 1100px; margin: 0 auto; padding: 0 10px; } /* ----HERRAMIENTAS --*/ .texto-grande{ font-size: 17px; } a:link{ color: var(--verde-oliva); } a:visited, a:active{ color: var(--verde-oliva); } .pcenter{ text-align: center; text-align-last: center; } .pleft{ text-align: left; } .pright{ text-align: right; } /*SAlto de espacio*/ .espacio20px{ padding: 20px; } .espacio40px{ padding: 40px; } /*corrijo el color del hover del whataapp*/ /* Definición de la animación */ @keyframes parpadeo-whatsapp { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); transform: scale(1); } } .iwa-whatsapp-icon { position: fixed; bottom: 20px; /* Ajusta la posición según necesites */ right: 20px; background-color: #25d366; border-radius: 50%; width: 60px; height: 60px; text-align: center; line-height: 60px; z-index: 9999; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; /* Aplicar la animación */ animation: parpadeo-whatsapp 2s infinite; } /* Efecto Hover */ .iwa-whatsapp-icon:hover { background-color: var(--verde-oliva) !important; animation-play-state: paused; /* Opcional: la animación se detiene al poner el ratón */ transform: scale(1.1); } /* Asegurar que el icono dentro sea blanco */ .iwa-whatsapp-icon i { color: white; font-size: 30px; } /* --- HEADER --- */ header { background: rgba(250, 245, 242, 0.8); /* Reducimos opacidad para potenciar el efecto Apple */ background-image: url('../../imagenes/patron2.png'); border-bottom: 1px solid rgba(230, 222, 212, 0.5); /* Cambios clave para posición fija */ position: fixed !important; top: 0; left: 0; width: 100%; /* Obligatorio con fixed para que ocupe todo el ancho */ z-index: 1000; backdrop-filter: blur(5px); /* Efecto Apple: Blur + Sombra sutil */ backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); /* Soporte para Safari */ /* La sombra mágica */ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 0 1px 0 rgba(0, 0, 0, 0.02); } .nav-wrapper { display: flex; justify-content: space-between; align-items: center; } .logo-area { cursor: pointer; } .logo-title { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--texto-logo); letter-spacing: 1px; } .logo-tagline { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-piedra); border-top: 1px solid var(--subrayado); display: inline-block; margin-top: 4px; } .logo-responsive { max-width: 100%; height: auto; width: 500px; } @media (max-width: 480px) { .logo-responsive { width: 250px; } } /* Estilos Base e Iconos */ .nav-menu { list-style: none; display: flex; gap: 10px; } .nav-menu i { font-size: 22px; margin-right: 8px; color: var(--verde-oliva); } .nav-menu span{ border-bottom: 0.2px solid var(--verde-oliva); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 4px; /* Bordes redondeados tipo "pastilla" */ text-decoration: none; color: var(--verde-oliva); /* Color del texto */ transition: var(--transition); padding: 5px; } .nav-menu a:link, .nav-menu a:visited span{ text-decoration: none; /*color: var(--verde-oliva);*/ transition: var(--transition); /* Para que el cambio sea suave */ } .nav-menu a:hover span{ text-decoration: none; transform: translateY(-4px); /* Eleva el elemento 4 píxeles hacia arriba */ box-shadow: 0 10px 20px rgba(0,0,0,0.08); background-color: rgba(255, 255, 255, 0.5); /* Mantenemos el borde pero podemos cambiar su color al elevarse */ border-bottom: 0.2px solid var(--azul-profundo); } .nav-link-custom { display: flex; /* Activa el modo horizontal */ align-items: center; /* Alinea verticalmente la imagen y el texto al centro */ /* Espacio entre la imagen y el texto */ text-decoration: none; /* Quita el subrayado del enlace */ color: inherit; /* Mantiene el color de texto definido en el padre */ padding: 2px 5px 2px 2px; /* Espacio interno para que el borde no toque el texto */ margin-right: 10px; } .nav-link-custom img { display: block; /* Evita espacios extra debajo de la imagen */ object-fit: contain; /* Mantiene la proporción del icono */ } /* Ajuste para que el menú de WP se parezca a tu diseño */ /* 1. Reset para los elementos del menú de WP */ .nav-menu li { list-style: none; display: inline-block; /* O el estilo que uses para alinearlos */ } .nav-menu li a { display: flex !important; align-items: center; gap: 10px; text-decoration: none; } /* 2. Definición de la caja del icono */ .nav-menu li a::before { content: ""; display: inline-block; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } /* 3. Asignación de imágenes (Usando los IDs o clases de WP) */ /* Asegúrate de que las carpetas existen en esta ruta exacta dentro de tu tema hijo */ /* Inicio */ /* 1º Ítem del menú */ .nav-menu li:nth-child(1) a::before { background-image: url('../../imagenes/iconos/row-1-column-2.png') !important; } /* 2º Ítem del menú */ .nav-menu li:nth-child(2) a::before { background-image: url('../../imagenes/iconos/row-2-column-5.png') !important; } /* 3º Ítem del menú */ .nav-menu li:nth-child(3) a::before { background-image: url('../../imagenes/iconos/row-1-column-4.png') !important; } /* 4º Ítem del menú */ .nav-menu li:nth-child(4) a::before { background-image: url('../../imagenes/iconos/row-2-column-1.png') !important; } /* ESTADO ACTIVO EN WORDPRESS */ /* 1. Estilo para el contenedor de texto (span) cuando la página está activa */ .nav-menu li.current-menu-item a span, .nav-menu li.current_page_item a span { text-decoration: none; transform: translateY(-4px); /* Eleva el elemento 4 píxeles hacia arriba */ box-shadow: 0 10px 20px rgba(0,0,0,0.08); background-color: rgba(255, 255, 255, 0.5); /* Mantenemos el borde pero podemos cambiar su color al elevarse */ border-bottom: 0.2px solid var(--azul-profundo); } /* --- DISEÑO MÓVIL (Lateral) --- */ @media (max-width: 768px) { #main-nav { position: fixed; top: 0; right: -100vh; width: 350px; height: 100vh; background: #fff; box-shadow: -2px 0 5px rgba(0,0,0,0.1); transition: 0.3s ease-in-out; z-index: 1000; padding: 20px; } #main-nav.active { right: 0; } .nav-menu { flex-direction: column; margin-top: 50px; } .menu-toggle, .menu-close { display: block; background: none; border: none; font-size: 1.7rem; cursor: pointer;margin-right: 10px; } .menu-close { position: absolute; top: 20px; right: 20px; } .nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; } .nav-overlay.active { display: block; } } /* --- DISEÑO DESKTOP --- */ @media (min-width: 769px) { .menu-toggle, .menu-close { display: none; } #main-nav { position: static; height: auto; width: auto; } } /* SUB MENU */ /* ========================================================================== ESTILOS EXCLUSIVOS PARA SUBMENÚS DE WORDPRESS (.sub-menu) ========================================================================== */ /* --- 1. COMPORTAMIENTO EN ESCRITORIO (Desplegable Flotante con Flecha) --- */ @media (min-width: 769px) { /* El elemento padre debe ser el ancla relativa */ .nav-menu li { position: relative; } /* Añadir flecha indicadora hacia abajo en los elementos que tienen submenú */ .nav-menu .menu-item-has-children > a { position: relative; padding-right: 18px; /* Espacio para que la flecha no pise el texto */ } .nav-menu .menu-item-has-children > a::after { content: "▾"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: 0.7; transition: transform 0.3s ease; } /* Rotar la flecha sutilmente al hacer hover */ .nav-menu .menu-item-has-children:hover > a::after { transform: translateY(-50%) rotate(180deg); color: var(--verde-oliva); } /* Ocultar el botón de móvil en escritorio por si acaso */ .sub-menu-toggle { display: none !important; } /* Contenedor del submenú oculto por defecto */ .nav-menu .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(255, 255, 255, 0.95); min-width: 200px; padding: 15px 0; margin: 0; list-style: none; border-radius: 8px; border: 1px solid rgba(230, 222, 212, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.02); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index: 1000; } /* Mostrar submenú al hacer Hover en el padre */ .nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Elementos de la lista del submenú */ .nav-menu .sub-menu li { display: block; width: 100%; padding: 0; margin: 0; } /* Enlaces del submenú */ .nav-menu .sub-menu li a { display: block !important; padding: 10px 20px; font-family: 'Tenor Sans', sans-serif; font-size: 14px; letter-spacing: 0.5px; text-decoration: none; transition: var(--transition); text-align: left; } /* Quitar los iconos ::before generados en tu CSS general para los enlaces del submenú */ .nav-menu .sub-menu li a::before { display: none !important; } /* Quitar posibles flechas heredadas en submenús de tercer nivel si los hubiera */ .nav-menu .sub-menu .menu-item-has-children > a::after { display: none; } /* Hover en los enlaces del submenú */ .nav-menu .sub-menu li a:hover { color: var(--verde-oliva) !important; padding-left: 25px; } } /* --- 2. COMPORTAMIENTO EN MÓVIL (Acordeón Desplegable mediante botón JS) --- */ @media (max-width: 768px) { .nav-menu .menu-item-has-children { position: relative; display: flex; flex-wrap: wrap; align-items: center; } /* Ajuste para que el enlace original no ocupe todo el ancho y deje sitio al botón */ .nav-menu .menu-item-has-children > a { display: inline-block; flex: 1; } /* Botón creado por JS para hacer clic exclusivamente en el más (+) */ .sub-menu-toggle { display: block !important; background: none; border: none; color: var(--gris-piedra); font-size: 22px; font-weight: 300; padding: 10px 15px; cursor: pointer; line-height: 1; transition: color 0.3s ease; outline: none; } /* Estilo del botón cuando el menú está desplegado */ .nav-menu .sub-menu-open > .sub-menu-toggle { color: var(--verde-oliva); } /* Estructura del submenú (Oculto por defecto) */ .nav-menu .sub-menu { display: none; /* Controlado estrictamente por JS */ width: 100%; /* Empuja el submenú abajo en el flexwrap */ list-style: none; padding: 5px 0 5px 15px; margin: 5px 0 10px 0; border-left: 1px solid var(--beige-arena); } /* Mostrar submenú SOLO cuando tiene la clase activa inyectada por JS */ .nav-menu .menu-item-has-children.sub-menu-open > .sub-menu { display: block; } .nav-menu .sub-menu li { display: block; margin-bottom: 5px; } .nav-menu .sub-menu li a { font-size: 15px; padding: 5px 0; color: var(--gris-piedra) !important; } .nav-menu .sub-menu li a::before { display: none !important; } .nav-menu .sub-menu li a:hover { color: var(--verde-oliva) !important; } } /* --- SLIDER (Metodología) --- */ .hero-slider { position: relative; height: 90vh; overflow: hidden; background: #222; } .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; } .slide.active { opacity: 1; } .slide-overlay { background: rgba(0,0,0,0.3); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; text-align: center; } .slide-content { max-width: 900px; padding: 20px; } .slide-content h2 { font-size: 3.5rem; font-family: 'Playfair Display', serif; margin-bottom: 15px; font-style: italic; } .slide-content p { font-size: 1.5rem; font-weight: 300; letter-spacing: 1px; } .slider-controls { position: absolute; top: 50%; width: 93%; display: flex; justify-content: space-between; padding: 0 40px; transform: translateY(-50%); z-index: 5; } .prev, .next { font-size: 30px; color: white; cursor: pointer; opacity: 0.5; transition: 0.3s; } .prev:hover, .next:hover { opacity: 1; } .slider-thumbnails { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; } .thumb { width: 60px; height: 40px; object-fit: cover; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s; filter: grayscale(100%); } .thumb.active { border-color: #fff; filter: grayscale(0%); transform: scale(1.1); } /* --- CATEGORÍAS (Ejes de Trabajo) --- */ .intro-text { padding: 30px 10px; text-align: center; max-width: 800px; margin: 0 auto; } .intro-text h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 20px; color: var(--azul-profundo); } .categories-circles { padding: 40px 0 100px; display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; } .cat-item { text-align: center; width: 180px; } /* 1. El contenedor: Define el círculo y el tamaño */ .cat-img { width: 180px; /* Ajusta al tamaño que desees */ height: 180px; /* Debe ser igual al width para que sea un círculo */ border-radius: 50%; overflow: hidden; /* Crucial: recorta la imagen en forma de círculo */ margin-bottom: 20px; border: 1px solid var(--beige-arena); transition: var(--transition); box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* Asegura que el contenido esté centrado */ display: flex; align-items: center; justify-content: center; } /* 2. La imagen dentro: Se adapta al círculo */ .cat-img img { width: 100%; height: 100%; object-fit: cover; /* Llena el círculo sin deformarse */ object-position: center; } /* 3. El efecto Hover */ .cat-item:hover .cat-img { transform: translateY(-10px); border-color: var(--verde-oliva); } .cat-item p { font-weight: 500; font-size: 16px; letter-spacing: 1px; color: var(--texto-logo); } @media (max-width: 768px) { .slider-controls { position: absolute; top: 50%; width: 93%; display: flex; justify-content: space-between; padding: 0 20px; transform: translateY(-50%); z-index: 5; } .categories-circles { flex-direction: column; /* Fuerza a los elementos a ponerse uno debajo de otro */ align-items: center; /* Centra los círculos horizontalmente */ gap: 30px; /* Reduce el espacio entre círculos para móvil */ padding: 40px 0; /* Ajusta el padding para que no sea tan largo */ } .cat-item { width: 100%; /* El contenedor ocupa todo el ancho disponible */ display: flex; flex-direction: column; align-items: center; /* Asegura que la imagen y el texto estén centrados */ } } /* --- CATEGORÍAS ORGÁNICAS --- */ .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-top: 60px; margin-bottom: 60px; } .cat-card { text-align: center; perspective: 1000px; } .cat-circle { width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%; /* Forma orgánica irregular */ overflow: hidden; border: 1px solid var(--beige-arena); transition: var(--transition); animation: morph 8s ease-in-out infinite; } @keyframes morph { 0% { border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%; } 50% { border-radius: 30% 60% 40% 70% / 50% 40% 30% 60%; } 100% { border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%; } } .cat-card:hover .cat-circle { transform: scale(1.05) rotate(3deg); border-color: var(--verde-oliva); } .cat-circle img { width: 100%; height: 100%; object-fit: cover; } /* --- SERVICIOS (Grid) --- */ .services-section { background: #fff; padding: 10px 0;padding-bottom: 40px; } .section-title { text-align: center; font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 60px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); gap: 40px; } .product-card { display: flex; background: var(--blanco-roto); border-radius: 4px; overflow: hidden; transition: var(--transition); border: 1px solid transparent; } .product-card:hover { border-color: var(--beige-arena); background: #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.05); } .product-img-wrapper { width: 40%; min-height: 250px; overflow: hidden; } .product-img-wrapper img { width: 100%; height: 100%; object-fit: cover; } .product-info { width: 60%; padding: 30px; display: flex; flex-direction: column; justify-content: center; } .product-info h3 { font-size: 1.6rem; margin-bottom: 10px; color: var(--verde-oliva); } .product-info p { font-size: 16px; color: var(--gris-piedra); margin-bottom: 15px; } .product-info a{ color:var(--verde-oliva); text-decoration: none !important; } .tag { font-size: 10px; text-transform: uppercase; color: var(--azul-profundo); font-weight: 700; margin-bottom: 5px; } .tag2 { font-size: 10px; text-transform: uppercase; color: var(--azul-profundo); font-weight: 700; margin-bottom: 5px; background-color: var(--beige-arena); padding: 10px;} /*----------CAll images*/ .img-call { width: 100%; height: auto; overflow: hidden; max-height:200px; } .img-call img { width: 100%; height: 100%; object-fit: cover; } /*----Google*/ .write-review-wrapper { margin-top: 15px; text-align: center; } .btn-google-review { display: inline-flex; align-items: center; gap: 10px; background-color: transparent; color: var(--azul-profundo) !important; border: 1px solid var(--verde-oliva); padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); text-decoration: none; } .btn-google-review i { color: var(--verde-oliva); font-size: 1rem; } .btn-google-review:hover { background-color: var(--verde-oliva); color: #fff !important; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .btn-google-review:hover i { color: #fff; } /* --- PARALLAX (Manifiesto) --- */ .parallax-section { min-height: 500px; background-attachment: fixed; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; background-image: url('../../imagenes/rio.png'); } .parallax-section-g1 { height: 300px; background-attachment: fixed; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; background-image: url('../../imagenes/JPEG/RMG_7559-Edit.jpg'); } .parallax-section-oii { height: 300px; background-attachment: fixed; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; background-image: url('../../imagenes/oii-cartel.png'); } .parallax-content-g1 { background: rgba(253, 247, 237, 0.8); padding: 0px 30px; text-align: center; max-width: 700px; } .parallax-content { background: rgba(253, 247, 237, 0.92); padding: 20px 20px; text-align: center; max-width: 900px; border-left: 4px solid var(--verde-oliva); } .parallax-content h2 { font-style: italic; line-height: 1.4; } /* --- TESTIMONIOS (Carrusel) --- */ .testimonials { padding: 0px 0;margin-bottom: 50px; } .testi-track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .testi-item { min-width: 100%; padding: 0 15%; text-align: center; } .testi-item blockquote { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 30px; color: var(--azul-profundo); line-height: 1.4; } .testi-item cite { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; font-style: normal; color: var(--verde-oliva); font-weight: 600; } /* --- ESTILO TIPO GOOGLE REVIEWS --- */ .google-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); max-width: 700px; margin: 0 auto; border: 1px solid #eee; } .stars { color: #fbbc05; /* El amarillo oficial de Google */ margin-bottom: 15px; font-size: 18px; } .testi-arrows { display: flex; justify-content: center; gap: 20px; margin-top: 30px; } .testi-arrow { background: white; border: 1px solid var(--beige-arena); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; color: var(--azul-profundo); transition: 0.3s; display: flex; align-items: center; justify-content: center; } .testi-arrow:hover { background: var(--azul-profundo); color: white; transform: scale(1.1); } /* Ajuste del track para que no se pegue a los bordes */ .testi-item { padding: 0 10px; } /* --- BLOG STYLES --- */ .blog-container { padding: 80px 0; display: none; background: #fff; } .blog-post { max-width: 800px; margin: 0 auto 80px; } .blog-post img { border-radius: 4px; margin-bottom: 30px; } .blog-meta { font-size: 15px; color: var(--gris-piedra); margin-bottom: 10px; letter-spacing: 1px; } .blog-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 20px; color: var(--azul-profundo); } .blog-excerpt { font-size: 1.2rem; color: var(--texto-logo); } .blog-container a{ color: var(--verde-oliva)} /* Contenedor de la paginación */ .pagination-wrapper { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--beige-arena); } /* Números y flechas */ .pagination-wrapper .page-numbers { display: inline-block; padding: 12px 20px; margin: 0 5px; border: 1px solid var(--beige-arena); color: var(--azul-profundo); text-decoration: none; border-radius: 4px; font-family: 'Tenor Sans', sans-serif; transition: all 0.3s ease; } /* --- DISEÑO SINGLE POST (PÁGINA DE ARTÍCULO) --- */ /* Grid de la cabecera */ .post-header-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; /* Título más ancho que la imagen */ gap: 50px; align-items: center; margin-top: 30px; } .post-header-info .blog-meta-top { margin-bottom: 20px; } .meta-item { margin-right: 20px; font-size: 0.9rem; color: var(--verde-oliva); text-transform: uppercase; letter-spacing: 1px; } .meta-item i { margin-right: 5px; } .post-main-title { font-size: 3rem; line-height: 1.2; margin-bottom: 30px; color: var(--azul-profundo); } /* Redes Sociales para compartir */ .post-share { margin-top: 30px; display: flex; align-items: center; gap: 20px; } .post-share p { margin: 0; font-family: 'Tenor Sans', sans-serif; font-size: 0.9rem; text-transform: uppercase; } .share-buttons { display: flex; gap: 15px; } .share-buttons a { width: 40px; height: 40px; border: 1px solid var(--beige-arena); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--azul-profundo); transition: all 0.3s ease; text-decoration: none !important; /* Sin subrayado */ } .share-buttons a:hover { background-color: var(--verde-oliva); color: #fff; border-color: var(--verde-oliva); transform: translateY(-3px); } /* Imagen Destacada */ .featured-image-wrapper img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); } /* Cuerpo del texto */ .menos-padding{ padding: 10px; } .blog-content-body { padding: 10px; max-width: 800px; /* Lectura cómoda */ margin: 0 auto; line-height: 1.8; font-size: 1.15rem; color: #444; } .entry-content p { margin-bottom: 25px; } .post-footer { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--beige-arena); } /* Responsivo */ @media (max-width: 992px) { .post-header-grid { grid-template-columns: 1fr; text-align: center; } .post-header-info { order: 2; } .post-header-image { order: 1; } .post-share { justify-content: center; } } /* Página activa (Verde Oliva) */ .pagination-wrapper .page-numbers.current { background-color: var(--verde-oliva); color: #ffffff; border-color: var(--verde-oliva); } /* Hover en los números */ .pagination-wrapper a.page-numbers:hover { background-color: var(--blanco-roto); border-color: var(--azul-profundo); transform: translateY(-2px); } /* Estilo para la fecha dentro de la card */ .fecha-blog { display: block; margin-top: 15px; font-size: 0.85rem; color: var(--verde-oliva); font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; } /* --- RESPONSIVE --- */ @media (max-width: 768px) { .hero-slider { height: 70vh; } .slide-content h2 { font-size: 2.2rem; } .product-grid { grid-template-columns: 1fr; } .product-card { flex-direction: column; width: 98%; margin: 0 auto; } .product-img-wrapper, .product-info { width: 100%; } .categories-circles { gap: 20px; } .cat-item { width: 45%; } .cat-img { width: 320px; height: 320px;} } .active-view { display: block !important; } /* --- FOOTER 3 COLUMNS --- */ footer { background: white; color: var(--azul-profundo); padding: 80px 0 40px; border-top: 1px solid var(--beige-arena); } /* Estilo base (Escritorio) */ .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; } /* Responsivo (Móvil y Tablets pequeñas) */ @media (max-width: 768px) { .footer-grid { /* Cambiamos a una sola columna */ grid-template-columns: 1fr; /* Reducimos el gap si es necesario para ahorrar espacio */ gap: 20px; /* Opcional: centrar el texto en móviles */ text-align: center; } } .footer-col h4 { font-family: 'Playfair Display', serif; margin-bottom: 20px; font-size: 1.5rem; } .footer-links { list-style: none;text-align: left;padding: 0 10px 0 50px;} .footer-links li { margin-bottom: 10px; } .footer-links a { text-decoration: none; color: var(--gris-piedra); font-size: 15px; transition: 0.3s; } .footer-links a:hover { color: var(--verde-oliva); } .map-container { width: 100%; height: 200px; border-radius: 8px; overflow: hidden; filter: grayscale(1); transition: 0.5s; } .map-container:hover { filter: grayscale(0); } .map-container iframe { width: 100%; height: 100%; border: 0; } /* --- SPLIT REVEAL COMPARATOR (Corregido) --- */ .comparison-section { padding: 10px 0; background: #85807a; text-align: center; color: #fff;} .comparison-container { position: relative; width: 100%; max-width: 800px; height: 500px; margin: 40px auto; overflow: hidden; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); cursor: col-resize; } .comparison-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .img-before { background-image: url('../../imagenes/tran1.png'); z-index: 1; } .img-after { background-image: url('../../imagenes/tran2.png'); z-index: 2; width: 50%; border-right: 3px solid white; } .comparison-slider { position: absolute; z-index: 10; top: 0; left: 50%; width: 3px; height: 100%; background: white; cursor: ew-resize; transform: translateX(-50%); } .slider-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--azul-profundo); box-shadow: 0 0 15px rgba(0,0,0,0.3); border: 2px solid var(--beige-arena); } /* ----------------------------------------------------------- NUEVAS CLASES DE ANIMACIÓN AL HACER SCROLL ----------------------------------------------------------- */ .reveal { opacity: 0; transition: all 1s ease-out; } /* Entrada desde abajo */ .reveal-up { transform: translateY(50px); } /* Entrada desde la izquierda */ .reveal-left { transform: translateX(-50px); } /* Entrada desde la derecha */ .reveal-right { transform: translateX(50px); } /* Estado activo (cuando entra en el scroll) */ .reveal.active { opacity: 1; transform: translate(0, 0); } /* Delay escalonado para listas (opcional) */ .delay-1 { transition-delay: 0.2s; } .delay-2 { transition-delay: 0.4s; } .delay-3 { transition-delay: 0.6s; } /*Herramientas*/ .display-lado{ display: flex; justify-content: space-around; align-items: center; } /*****IDIOMAS***/ /* El contenedor padre ya no necesita ser un ancla */ .contenedor-idiomas { /* Eliminado position: relative */ text-align: left; } /* Contenedor de idiomas corregido (Flujo natural e Izquierda) */ .idiomas { /* Eliminado position: absolute, top, right y left */ font-size: 11px; display: flex; justify-content: end; /* Alinea el contenido a la izquierda */ align-items: center; gap: 15px; z-index: 100; font-family: 'Tenor Sans', sans-serif; letter-spacing: 1px; } /* Estilo de los enlaces de idiomas */ .idiomas a { text-decoration: none; /* Quita el subrayado */ color: var(--verde-oliva); display: inline-block; /* Necesario para que el transform funcione */ transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transición suave orgánica */ padding: 5px 8px; border-radius: 4px; } /* Efecto al pasar el ratón (Hover) */ .idiomas a:hover { color: var(--azul-profundo); /* Cambio de color sutil */ transform: translateY(-4px); /* El elemento se eleva */ text-decoration: none; /* Asegura que no aparezca subrayado */ /* Sombra suave y difuminada (Efecto elevación) */ box-shadow: 0 10px 20px rgba(0,0,0,0.08); background-color: rgba(255, 255, 255, 0.5); /* Un fondo ligero para resaltar la sombra */ } /*Tel head (Alineado a la izquierda) */ .tel-head { display: flex; justify-content: start; /* Cambiado de end a start para alinear a la izquierda */ align-items: center; gap: 5px; } /* Quitamos el subrayado al estado inicial y visitado */ .tel-head a:link, .tel-head a:visited { font-size: 18px; font-weight: 700; text-decoration: none; /* <- Esto quita el subrayado */ } /* Evitamos que se subraye al pasar el ratón por encima */ .tel-head a:hover, .tel-head a:active { text-decoration: none; } @media (max-width: 768px) { .idiomas { margin-top: 20px; display: block; text-align: center; /* Eliminado position, top, left y el transform de centrado */ font-size: 15px; z-index: 1000; } .tel-head { margin-bottom: 20px; display: block; text-align: center; } } /*Animacion*/ .ocean { height: 150px; /* Altura solicitada */ width: 100%; position: absolute; bottom: 0; left: 0; z-index: 5; /* Un nivel por debajo de ocean2 si quieres que se solapen */ overflow: hidden; } .ocean svg { display: block; width: 200%; /* Doble de ancho para permitir el desplazamiento */ height: 100%; position: absolute; bottom: 0; left: 0; /* Animación: 7 segundos para que sea diferente a la otra onda */ animation: wave-horizontal 7s linear infinite; } @keyframes wave-horizontal { 0% { transform: translateX(0); } 50% { transform: translateX(-15%); /* Movimiento suave */ } 100% { transform: translateX(0); } } /*------------------------*/ .ocean2 { height: 90px; /* Aquí tienes tus 100px */ width: 100%; position: relative; left: 0; z-index: 10; overflow-x: hidden; top: 2px; } .ocean2 svg { display: block; width: 200%; /* Hacemos el SVG más ancho para que haya "margen" para moverlo */ height: 100%; position: absolute; transform: scaleY(-1); left: 0; transform: translate3d(0, 0, 0); animation: wave-move 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; } @media (max-width: 768px) { .ocean2 { width: 100%; } .ocean{ width: 100%; } } /* Animación de balanceo */ @keyframes wave-move { 0% { transform: translateX(0); } 50% { transform: translateX(-25%); /* Se desplaza un poco */ } 100% { transform: translateX(0); } } /* --- ESTILOS GENERALES DE SECCIÓN --- */ .section-padding { padding: 10px 10px; } .playfair-italic { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2.8rem; margin-bottom: 25px; color: var(--azul-profundo); } /* --- 1. DOS COLUMNAS --- */ .two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } @media (max-width: 768px) { .two-columns { grid-template-columns: 1fr; gap: 40px; } } /* --- 2. GALERÍA --- */ /* --- CUADRÍCULA DE GALERÍA --- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 250px; gap: 20px; } .gallery-item { overflow: hidden; border-radius: 8px; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item.tall { grid-row: span 2; } /* --- VISOR LIGHTBOX (FONDO NEGRO) --- */ .gallery-modal { display: none; /* Oculto por defecto */ position: fixed; z-index: 2000; /* Por encima de todo */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); /* Fondo negro intenso */ align-items: center; justify-content: center; flex-direction: column; } .modal-content { max-width: 90%; max-height: 80%; border-radius: 4px; animation: zoomIn 0.3s ease; } @keyframes zoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .close-modal { position: absolute; top: 30px; right: 40px; color: white; font-size: 50px; font-weight: bold; cursor: pointer; transition: 0.3s; } .close-modal:hover { color: var(--beige-arena); } #caption { margin-top: 20px; color: var(--blanco-roto); letter-spacing: 1px; } /* --- 3. PROCESO (STEPS) --- */ .process-wrapper { display: flex; justify-content: space-between; gap: 40px; } .process-step { flex: 1; padding: 30px; border-left: 1px solid var(--beige-arena); transition: var(--transition); } .process-step:hover { background: rgba(160, 159, 158, 0.2); border-left-color: var(--verde-oliva); } .step-number { font-size: 3.5rem; color: var(--verde-oliva); line-height: 1; margin-bottom: 20px; display: block; } .process-step h3 { font-family: 'Tenor Sans', sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; margin-bottom: 15px; color: var(--azul-profundo); } @media (max-width: 768px) { .process-wrapper { flex-direction: column; gap: 20px; } } /* --- 4. FAQ (ACORDEÓN) --- */ .faq-container { max-width: 90%; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--beige-arena); } .faq-question { width: 100%; padding: 30px 0; background: none; border: none; display: flex; justify-content: space-between; align-items: center; font-family: 'Tenor Sans', sans-serif; font-size: 1.5rem; color: var(--azul-profundo); cursor: pointer; text-align: left; } .faq-answer { max-height: 0; overflow: hidden; transition: all 0.4s ease; color: var(--gris-piedra); font-size: 15px; line-height: 1.8; } .faq-item.active .faq-answer { max-height: 250px; padding-bottom: 30px; } .faq-question i { transition: transform 0.4s ease; font-size: 15px; color: var(--verde-oliva); } .faq-item.active .faq-question i { transform: rotate(45deg); } .apple-separator { border: 0; height: 1px; background: rgba(0, 0, 0, 0.1); /* Línea sutil oscura */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); /* Reflejo de luz debajo */ margin: 40px auto; width: 80%; /* O el ancho que prefieras */ } /*background colors de fondos*/ .background-blanco { background-color: #fff; width: 100%; padding: 60px 0px; } .background-cebecera-blanca { background-color: #fff; width: 100%; padding: 40px 0px !important; } .background-fotos { background-color: #fbf5f1; width: 100%; padding: 40px 0px; } .background-oscuro { background-color: var(--gris-piedra); color: #fff !important; width: 100%; padding: 60px 0px; } .background-oscuro h1, .background-oscuro h2{ color: #fff !important; } .background-oscuro h2{ font-size: 2.4rem; } /* --- ESTILOS DE CONTACTO --- */ .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } /* Formulario */ .contact-form-container { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); } .form-group { margin-bottom: 25px; } .form-group label { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: -8px; color: var(--azul-profundo); } .form-group input, .form-group textarea { width: 93% !important; padding: 12px 15px; border: 1px solid var(--beige-arena); background-color: var(--blanco-roto); font-family: 'Tenor Sans', sans-serif; color: var(--azul-profundo); border-radius: 4px; transition: var(--transition); font-size: 16px; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--verde-oliva); background-color: #fff; } .btn-submit { background-color: var(--azul-profundo); color: #fff !important; padding: 10px 10px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Tenor Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; transition: var(--transition); /* Centrado y Ancho */ display: block; /* Necesario para usar margin: auto */ width: 100%; /* Se adapta al contenedor hasta el máximo */ max-width: 320px; /* Límite de ancho pedido */ margin: 20px auto; /* Centra horizontalmente */ /* Limpieza de estilo */ text-decoration: none; /* Elimina subrayado */ text-align: center; /* Centra el texto */ text-align-last: center; /* Es por la configuración del párrafo*/ box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra base sutil */ } .btn-submit:hover { background-color: var(--verde-oliva); color: #fff; /* Asegura que el texto siga blanco */ text-decoration: none; /* Refuerza que no aparezca subrayado en hover */ transform: translateY(-5px); /* Se eleva un poco más para notar el efecto */ box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sombra más profunda al elevarse */ } /*Para form 7*/ /* Asegura que los campos de CF7 ocupen todo el ancho del form-group */ .wpcf7-form-control-wrap { display: block; width: 100%; } /* Forzamos que los estilos de input se apliquen a los campos generados por CF7 */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--beige-arena); background-color: var(--blanco-roto); font-family: 'Tenor Sans', sans-serif; color: var(--azul-profundo); border-radius: 4px; transition: var(--transition); font-size: 16px; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--verde-oliva); background-color: #fff; } /* Ocultar los mensajes de error/éxito por defecto si quieres personalizarlos luego */ .wpcf7-response-output { margin: 20px 0 0 0 !important; padding: 10px !important; border-radius: 4px !important; font-size: 14px; border: 2px solid var(--verde-oliva) !important; /* Estilo para mensaje de éxito */ } /* Color específico para los iconos del formulario */ .icon-verde { color: var(--verde-oliva); margin-right: 8px; font-size: 1.1rem; vertical-align: middle; } /* Ajuste opcional para que el label se vea más profesional con iconos */ .form-group label { display: flex; align-items: center; font-weight: 600; /* Un poco más de cuerpo para que resalten los iconos */ } /* Asegurar que el nuevo campo de teléfono tenga el mismo estilo que los otros */ .wpcf7-form input[type="tel"] { width: 100%; padding: 12px 15px; border: 1px solid var(--beige-arena); background-color: var(--blanco-roto); font-family: 'Tenor Sans', sans-serif; color: var(--azul-profundo); border-radius: 4px; transition: var(--transition); font-size: 16px; } .wpcf7-form input[type="tel"]:focus { outline: none; border-color: var(--verde-oliva); background-color: #fff; } /* Info de Contacto */ .contact-info { display: flex; flex-direction: column; gap: 30px; } .info-item { display: flex; gap: 20px; align-items: flex-start; } .info-item i { font-size: 20px; color: var(--verde-oliva); margin-top: 5px; } .info-item h4 { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; margin: 0; margin-bottom: 5px; } .info-item p { color: var(--gris-piedra); font-size: 15px; } .map-container-contact { width: 100%; height: 215px; border-radius: 8px; overflow: hidden; filter: grayscale(1); transition: 0.5s; border: 1px solid var(--beige-arena); } .map-container-contact:hover { filter: grayscale(0); } .map-container-contact iframe { width: 100%; height: 100%; border: 0; } /* Responsive Contacto */ @media (max-width: 768px) { .contact-wrapper { grid-template-columns: 1fr; gap: 40px; width: 90%; margin: 0 auto; } .contact-form-container { padding: 25px; } } /* --- BOTÓN VOLVER ARRIBA --- */ .back-to-top { position: fixed; bottom: 22px; right: 70px; width: 45px; height: 45px; background-color: var(--blanco-roto); color: var(--azul-profundo); border: 1px solid var(--beige-arena); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 999999; transition: var(--transition); opacity: 0; /* Invisible por defecto */ visibility: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top i { display: block !important; position: relative; z-index: 10; } .back-to-top:hover { background-color: var(--azul-profundo); color: #fff; transform: translateY(-5px); border-color: var(--azul-profundo); } @media (max-width: 768px) { .back-to-top { bottom: 22px; right: 70px; width: 40px; height: 40px; } } /*FONDO CANVAS*/ /* --- EFECTO FONDO DINÁMICO (CANVAS) --- */ #bgCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* Se mantiene detrás de todo el contenido */ z-index: -1; /* Evita que el canvas interfiera con los clics en el menú o botones */ pointer-events: none; /* Opcional: asegura que el fondo del body sea suave para que las líneas resalten */ background-color: var(--blanco-roto); } /* Asegura que el contenido principal tenga un fondo si quieres que el canvas solo se vea en los laterales/espacios vacíos */ section, .container { position: relative; z-index: 1; } /*PIE FIRMA*/ .pie-firma{ border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; font-size: 12px; letter-spacing: 1px; } .pie-firma p{ text-align: center !important; text-align-last: center; } .pie-firma a{ text-decoration: none; color: var(--blanco-roto); } .pie-firma a:hover{ color: var(--verde-oliva); } .firmas{ display: flex; justify-content: space-around; align-items: center; } /*FOOTER*/ footer{ background: var(--azul-profundo); color: var(--blanco-roto); padding: 0px 40px; text-align: center; } .texto-pie{ font-size: 15px; opacity: 0.7; max-width: 600px; margin: 0 auto 40px; } .margin-botton{ display: block; margin: 30px; } /* GRID DE SERVICIOS */ .servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .servicios-grid h2, .servicios-grid h3, .servicios-grid h4, .servicios-grid h5 { font-weight:bolder; color: var(--verde-oliva); } .servicio-col { padding: 40px; background: #fdfdfd; border: 1px solid #eee; transition: 0.3s ease; } .servicio-col:hover { border-color: var(--verde-oliva); } .servicio-col-img { display: block; width: 100%; height: 200px; /* Altura fija que solicitaste */ object-fit: cover; /* Clave para que actúe como fondo/cover sin deformarse */ object-position: center; /* Asegura que la imagen se centre al recortar */ } .sub-h { color: var(--verde-oliva); font-weight: 400; margin-top: -10px; margin-bottom: 20px; } .intervencion-box { margin: 30px 0; background: #f9f9f9; padding: 20px; } .lista-intervencion { list-style: none; padding: 0; } .lista-intervencion li { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; } .lista-intervencion i { color: var(--verde-oliva); font-size: 10px; margin-right: 10px; } /* ICONOS DE PROCESO */ .proceso-iconos { display: flex; justify-content: space-between; margin: 40px 0; text-align: center; } .icono-item { flex: 1; } .icono-item i { font-size: 24px; color: var(--azul-profundo); display: block; margin-bottom: 10px; } .icono-item span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } /* Responsive */ @media (max-width: 768px) { .servicios-grid { grid-template-columns: 1fr; gap: 30px; } .servicio-col{ padding: 10px; width: 90%; margin: 0 auto; } } /* --- UTILIDADES GENERALES --- */ .section-padding { padding: 10px 0; } .img-responsive { width: 100%; height: auto; display: block;padding: 10px; } @media (max-width: 768px) { .img-responsive { width: 95%; height: auto; display: block;padding: 10px; } } .rounded-border { border-radius: 8px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-white { color: #fff !important; } .margin-b-20 { margin-bottom: 20px; } /* --- COLORES Y FONDOS --- */ .background-oscuro { background-color: var(--azul-profundo); color: #fff; } .background-blanco-roto { background-color: var(--blanco-roto); } .background-azul-profundo { background-color: var(--azul-profundo); } /* --- GRID SOBRE MÍ Y METODOLOGÍA --- */ .two-columns, .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* --- INTRO ARQUITECTURA --- */ .intro-architecture h4 { font-size: 1.8rem; margin-bottom: 10px; margin-top: -50px; } /* --- LISTAS DE CHEQUEO --- */ .check-list { list-style: none; padding: 0; } .check-list li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .icon-verde { color: var(--verde-oliva); } /* --- UNIVERSO SIMBÓLICO (TIENDA VIRTUAL) --- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; } .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .product-img-wrapper { height: auto; overflow: hidden; } .product-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-img-wrapper img { transform: scale(1.05); } .product-info { padding: 25px; text-align: center; } .product-info .tag { color: var(--verde-oliva); font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; display: block; margin-bottom: 10px; } .product-info h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 15px; color: var(--azul-profundo); } .product-info p { font-size: 0.95rem; line-height: 1.6; color: #666; text-align: left;} /*REsponsive product*/ @media (max-width: 768px) { .product-info { padding: 5px; } .product-info p{ padding: 10px; } } /* --- RESULTADOS --- */ .results-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 40px; } .result-item { flex: 1; min-width: 200px; } .result-icon { /* Colores */ background-color: var(--verde-oliva); /* Fondo blanco redondo */ color: var(--blanco-roto); /* Icono en azul profundo */ /* Forma y Tamaño */ width: 60px; /* Ancho fijo */ height: 60px; /* Alto fijo igual al ancho */ border-radius: 50%; /* Lo hace perfectamente redondo */ /* Centrado del icono dentro del círculo */ display: flex; align-items: center; justify-content: center; /* Posicionamiento */ font-size: 1.5rem; /* Tamaño del icono ajustado al círculo */ margin: 0 auto 20px auto; /* Centra el círculo en la columna y da margen abajo */ /* Opcional: Sombra suave para dar profundidad sobre el fondo azul */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } /* Efecto opcional al pasar el ratón */ .result-item:hover .result-icon { transform: scale(1.1); background-color: var(--blanco-roto); color: var(--azul-profundo); } /* --- CTA SECTION --- */ .cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .cta-card { background: white; padding: 30px; border-radius: 8px; flex: 1; min-width: 280px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; } .cta-card h4 { margin-bottom: 15px; color: var(--azul-profundo); } .cta-subtitle { font-size: 0.9rem; margin-top: 10px; color: #777; } /* --- DELAYS PARA ANIMACIONES REVEAL --- */ .delay-1 { transition-delay: 0.2s; } .delay-2 { transition-delay: 0.4s; } /* --- RESPONSIVE --- */ @media (max-width: 992px) { .two-columns, .grid-2-col { grid-template-columns: 1fr; gap: 40px; } .col-text { text-align: center;width: 90%; } .section-title.text-left { text-align: center; } .intro-architecture h4 { margin-top: 0; font-size: 1.5rem; } .section-padding { padding: 30px 0px; } } @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .cta-card { min-width: 100%; } } /*Page*/ .page-content{ padding: 10px; } /*BUSCADOR*/ /* Estilos para Resultados y Archivos */ .result-card { background: #fff; padding: 30px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: var(--transition); } .result-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); } .result-card h3 a { color: var(--azul-profundo); text-decoration: none; } .read-more { display: inline-block; margin-top: 15px; color: var(--verde-oliva); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; } /* El formulario de búsqueda que puedes poner donde quieras */ .search-form { display: flex; max-width: 500px; margin: 20px 0; } .search-field { flex-grow: 1; padding: 12px 20px; border: 1px solid var(--beige-arena); border-radius: 50px 0 0 50px; outline: none; font-family: 'Tenor Sans', sans-serif; } .search-submit { background: var(--azul-profundo); color: white; border: none; padding: 0 25px; border-radius: 0 50px 50px 0; cursor: pointer; transition: var(--transition); } .search-submit:hover { background: var(--verde-oliva); } /*comentarios*/ /* --- ESTILOS DE COMENTARIOS --- */ .comments-area { margin-top: 60px; border-top: 1px solid var(--beige-arena); } .comment-list { list-style: none; padding: 0; } .comment-body { background: #fff; padding: 30px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); } .comment-author img { border-radius: 50%; float: left; margin-right: 15px; } .comment-metadata { font-size: 0.8rem; color: var(--gris-piedra); margin-bottom: 15px; } .comment-content p { font-size: 0.95rem; line-height: 1.6; } /* Formulario de respuesta */ #reply-title { display: block; font-size: 1.8rem; margin-bottom: 25px; } .comment-form p { margin-bottom: 15px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; padding: 12px; border: 1px solid var(--beige-arena); border-radius: 4px; background-color: #fff; } .comment-form label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; } /*LANDING PAGE*/ /* --- SECCIÓN ESPECÍFICA: FORMAS DE TRABAJO LANDING --- */ .l-metodo-banner-principal { width: 100%; height: 200px; margin-bottom: 50px; border: 1px solid var(--beige-arena); } .l-metodo-banner-principal img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Grid de 3 columnas */ .l-metodo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; align-items: stretch; /* Esto hace que todas las tarjetas midan lo mismo de alto */ } /* Tarjeta individual */ .l-metodo-item { background: #fff; border: 1px solid var(--beige-arena); display: flex; flex-direction: column; text-align: center; /* Centrado de títulos y textos */ transition: var(--transition); } .l-metodo-item:hover { border-color: var(--verde-oliva); } .l-metodo-img-wrapper { width: 100%; height: auto; /* Quitamos los 250px para que se adapte */ max-height: 400px; /* Opcional: un tope máximo por si la foto es gigante */ overflow: hidden; border-bottom: 1px solid var(--beige-arena); } .l-metodo-img-wrapper img { width: 102%; height: auto; /* La imagen manda sobre la altura */ display: block; /* Ya no hace falta object-fit porque la imagen fluye natural */ } /* Contenido de texto */ .l-metodo-content { padding: 30px 20px; } .l-metodo-content h3 { font-family: 'Playfair Display', serif; font-style: italic; color: var(--azul-profundo); margin-bottom: 15px; font-size: 1.4rem; } .l-metodo-subtitle { font-weight: bold; color: var(--verde-oliva); margin-bottom: 10px; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; } .l-metodo-content p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; } /* Responsive: 2 columnas en tablets, 1 en móviles */ @media (max-width: 992px) { .l-metodo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .l-metodo-grid { grid-template-columns: 1fr; } .l-metodo-banner-principal { height: 150px; } } /* --- SECCIÓN ESPECÍFICA: IDENTIFICACIÓN (LANDING) --- */ .l-identifica-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: stretch; /* Hace que ambas tarjetas midan lo mismo */ margin-top: 40px; } .l-identifica-card { padding: 45px; transition: var(--transition); display: flex; flex-direction: column; } /* Estilos específicos Tarjeta Desorden */ .card-desorden { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--beige-arena); } .card-desorden h4 { color: var(--azul-profundo); margin-bottom: 25px; font-size: 1.8rem; } .card-desorden .icon-error { color: #a94442; /* Rojo suave para desorden */ margin-right: 15px; width: 20px; text-align: center; } /* Estilos específicos Tarjeta Orden */ .card-orden { background: #fff; border: 1px solid var(--verde-oliva); } .card-orden h4 { color: var(--verde-oliva); margin-bottom: 25px; font-size: 1.8rem; } .card-orden .icon-success { color: var(--verde-oliva); margin-right: 15px; width: 20px; text-align: center; } /* Ajustes de las listas dentro de estas tarjetas */ .l-identifica-card .check-list { list-style: none; padding: 0; margin: 0; } .l-identifica-card .check-list li { display: flex; align-items: flex-start; margin-bottom: 18px; line-height: 1.5; font-size: 1.05rem; } /* --- RESPONSIVE --- */ @media (max-width: 992px) { .l-identifica-card { padding: 30px; } } @media (max-width: 768px) { .l-identifica-grid { grid-template-columns: 1fr; /* Una sola columna en móvil */ gap: 20px; } .l-identifica-card h4 { font-size: 1.5rem; } } /*ICO-c*/ .ico-c{ background-color: #f7f7f7; /* Forma y Tamaño */ width: 60px; /* Ancho fijo */ height: 60px; /* Alto fijo igual al ancho */ border-radius: 50%; /* Lo hace perfectamente redondo */ padding: 20px; /* Centrado del icono dentro del círculo */ display: flex; align-items: center; justify-content: center; /* Posicionamiento */ font-size: 1.5rem; /* Tamaño del icono ajustado al círculo */ margin: 0 auto 20px auto; /* Centra el círculo en la columna y da margen abajo */ /* Opcional: Sombra suave para dar profundidad sobre el fondo azul */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .ico-c:hover{ transform: scale(1.1); background-color: var(--blanco-roto); color: var(--azul-profundo); } /* ========================================================================== ESTILOS PARA LA SECCIÓN DE LLAMADA A LA ACCIÓN (CTA) ========================================================================== */ /* Contenedor principal de la sección */ section.reveal.reveal-up[style*="text-align: center"] { max-width: 700px; background-color: #ffffff; /* Fondo blanco puro para que resalte sobre el blanco-roto */ border: 1px solid var(--beige-arena); border-radius: 12px; padding: 20px; margin-top: 40px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(62, 80, 102, 0.03); /* Sombra muy sutil usando tu azul profundo */ transition: var(--transition); } /* Efecto hover interactivo en toda la tarjeta de llamada a la acción */ section.reveal.reveal-up[style*="text-align: center"]:hover { border-color: var(--subrayado); box-shadow: 0 15px 40px rgba(62, 80, 102, 0.06); transform: translateY(-2px); } /* Título de la sección */ section.reveal.reveal-up[style*="text-align: center"] .section-title { color: var(--azul-profundo); font-size: 2.2rem; margin-bottom: 15px; position: relative; display: inline-block; } /* Párrafo descriptivo */ section.reveal.reveal-up[style*="text-align: center"] .pcenter { color: var(--gris-piedra); max-width: 600px; margin: 0 auto 10px auto; font-size: 1.1rem; } /* El botón de acción (Agendar Encuentro) */ section.reveal.reveal-up[style*="text-align: center"] .btn-submit { background-color: var(--verde-oliva); color: #ffffff !important; text-transform: uppercase; font-family: 'Tenor Sans', sans-serif; font-size: 0.9rem; letter-spacing: 2px; font-weight: bold; border-radius: 4px; border: 1px solid transparent; box-shadow: 0 4px 15px rgba(85, 107, 47, 0.2); transition: var(--transition); text-decoration: none; } /* Hover interactivo del botón */ section.reveal.reveal-up[style*="text-align: center"] .btn-submit:hover { background-color: transparent; color: var(--verde-oliva) !important; border-color: var(--verde-oliva); box-shadow: 0 6px 20px rgba(85, 107, 47, 0.1); transform: scale(1.02); /* Crece un milímetro de manera muy elegante */ } /* --- Adaptación para pantallas móviles --- */ @media (max-width: 768px) { section.reveal.reveal-up[style*="text-align: center"] { padding: 40px 20px; margin-left: 15px; margin-right: 15px; } section.reveal.reveal-up[style*="text-align: center"] .section-title { font-size: 1.8rem; } section.reveal.reveal-up[style*="text-align: center"] .btn-submit { width: 100% !important; /* En móvil se vuelve full-width para facilitar la pulsación táctil */ box-sizing: border-box; padding: 15px 20px !important; } } /* ========================================================================== CORRECCIONES DE DESBORDAMIENTO HORIZONTAL EN MÓVIL ========================================================================== */ @media (max-width: 768px) { /* 1. Corrección del menú lateral móvil */ #main-nav { right: -100% !important; /* Cambiado de -100vh a -100% */ width: 280px !important; /* Reducido de 350px a 280px para que quepa en móviles pequeños */ max-width: 85vw !important; /* Asegura que nunca ocupe más del 85% de la pantalla */ } #main-nav.active { right: 0 !important; } /* 2. Corrección del tamaño de los círculos de categorías */ .cat-img { width: 160px !important; /* Reducido de 320px a un tamaño armonioso para móvil */ height: 160px !important; /* Mantiene la proporción 1:1 para seguir siendo un círculo */ } /* 4. Asegurar el contenedor global */ .product-card { width: 100% !important; /* Cambiado de 98% a 100% con box-sizing */ box-sizing: border-box !important; } } /* ========================================================================== SECCIÓN DEL CARRUSEL DE SERVICIOS (CORREGIDO) ========================================================================== */ :root { /* Definición explícita del gap interno del carrusel */ --gap-carousel: 30px; } .psico-carousel-section { padding: 60px 20px; background-color: var(--blanco-roto); font-family: 'Playfair Display', Georgia, serif; overflow: hidden; } .carousel-container { max-width: 1200px; margin: 0 auto; position: relative; } /* Encabezado */ .carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .carousel-header h2 { font-size: 2.25rem; color: var(--azul-profundo); margin: 0; font-weight: 600; } .carousel-arrows { display: flex; gap: 12px; } .carousel-arrow { background: transparent; border: 1px solid var(--azul-profundo); color: var(--azul-profundo); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--transition); } .carousel-arrow:hover { background-color: var(--azul-profundo); color: #ffffff; } /* Contenedor del Slider */ .carousel-slider-track { overflow: hidden; width: 100%; } .carousel-track { display: flex; gap: var(--gap-carousel); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } /* Tarjetas individuales (4 en escritorio) */ .carousel-card { flex: 0 0 calc((100% - (var(--gap-carousel) * 3)) / 4); background: #ffffff; /* Tarjeta blanca para hacer contraste limpio con el fondo blanco-roto */ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; border: 1px solid var(--beige-arena); } .card-image { width: 100%; height: 200px; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .carousel-card:hover .card-image img { transform: scale(1.05); } .card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; text-align: center; } .card-content h3 { margin: 0 0 12px 0; font-size: 1.35rem; color: var(--azul-profundo); font-weight: 600; font-family: 'Playfair Display', serif; } .card-content p { font-size: 0.95rem; color: var(--gris-piedra); line-height: 1.6; margin: 0 0 25px 0; flex-grow: 1; font-family: 'Tenor Sans', sans-serif; } /* Botón de acción */ .card-btn { display: block; width: 100%; padding: 12px 20px; background-color: var(--verde-oliva); text-decoration: none; text-transform: uppercase; font-size: 0.85rem; font-weight: 500; letter-spacing: 1px; border-radius: 6px; border: 1px solid var(--verde-oliva); transition: var(--transition); box-sizing: border-box; font-family: 'Tenor Sans', sans-serif; color: var(--blanco-roto) !important; } .card-btn:hover { background-color: transparent !important; color: var(--verde-oliva) !important; } /* Paginación inferior (Corregida visibilidad) */ .carousel-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; } .carousel-bullet { width: 10px; height: 10px; border-radius: 50%; background-color: var(--verde-oliva-claro); /* Corregido: ya no se camufla con el fondo */ cursor: pointer; transition: var(--transition); } .carousel-bullet.active { background-color: var(--verde-oliva); transform: scale(1.3); } /* --- RESPONSIVE MEDIA QUERIES --- */ /* Tablets (Muestra 2 tarjetas) */ @media (max-width: 1024px) { .carousel-card { flex: 0 0 calc((100% - (var(--gap-carousel) * 1)) / 2); } .carousel-header h2 { font-size: 1.8rem; } } /* Dispositivos Móviles (Muestra 1 tarjeta completa) */ @media (max-width: 767px) { .psico-carousel-section { padding: 40px 15px; } .carousel-header { flex-direction: column; align-items: flex-start; gap: 15px; } .carousel-arrows { width: 100%; justify-content: flex-end; } .carousel-card { flex: 0 0 100%; } }