.rounded-button {
border-radius: 8px !important;
}
html,
body {
overflow-x: hidden;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes wiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
.float-animation {
animation: float 2s ease-in-out infinite;
}
.wiggle-animation {
animation: wiggle 0.8s ease-in-out;
}
.service-card {
cursor: pointer;
transition: all 0.3s ease;
}
.service-card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.service-card.selected {
transform: scale(1.08);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
border: 2px solid #1f2937;
}
.service-card.selected .service-icon {
transform: scale(1.1);
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}
.slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider-item.active {
opacity: 1;
}
.dot.active {
background-color: white !important;
transform: scale(1.2);
}
.renovation-filter.active {
background-color: #1f2937;
color: white;
}
.renovation-filter:not(.active) {
background-color: transparent;
color: #6b7280;
}
.renovation-filter:not(.active):hover {
background-color: #f3f4f6;
color: #1f2937;
}
.tab-button {
transition: all 0.2s ease;
}
.tab-button.active {
background-color: #1f2937 !important;
color: white !important;
}
.tab-content {
transition: opacity 0.3s ease;
}
.clip-right {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.before-after-container {
user-select: none;
touch-action: none;
width: 100%;
height: auto !important;
aspect-ratio: 16 / 9;
}
.before-after-container .before-image img,
.before-after-container .after-image img {
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: center;
}
.slider-handle {
left: 50%;
transform: translateX(-50%);
}
.renovation-item {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.renovation-item.hidden {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
display: none;
}
.renovation-item > .bg-white,
.renovation-item > .bg-gray-50 {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#renovations-grid,
#renovations-grid-full {
gap: 2.5rem;
}
#renovations-grid .renovation-item,
#renovations-grid-full .renovation-item {
display: flex;
}
#renovations-grid .renovation-item > .bg-white,
#renovations-grid .renovation-item > .bg-gray-50,
#renovations-grid-full .renovation-item > .bg-white,
#renovations-grid-full .renovation-item > .bg-gray-50 {
display: flex;
flex-direction: column;
height: 100%;
}
#renovations-grid .renovation-item > .bg-white > .p-6,
#renovations-grid .renovation-item > .bg-gray-50 > .p-6,
#renovations-grid-full .renovation-item > .bg-white > .p-6,
#renovations-grid-full .renovation-item > .bg-gray-50 > .p-6 {
min-height: 12.5rem;
}
#whatsapp-bubble {
line-height: 1.35;
}
#testimonios .relative.overflow-hidden {
overflow: hidden !important;
}
#testimonials-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
transform: none !important;
padding-bottom: 0.35rem;
}
#testimonials-container.dragging {
cursor: grabbing;
scroll-snap-type: none;
}
#testimonials-container::-webkit-scrollbar {
display: none;
}
#testimonials-container > div {
flex: 0 0 100%;
scroll-snap-align: start;
}
@media (min-width: 768px) {
#testimonials-container > div {
flex-basis: calc(50% - 1rem);
}
}
@media (min-width: 1024px) {
#testimonials-container > div {
flex-basis: calc(33.333% - 1.34rem);
}
}
@media (max-width: 768px) {
#inicio {
min-height: 82svh;
padding-top: 5rem;
padding-bottom: 2.5rem;
}
#hero-background {
background-attachment: scroll !important;
background-position: center 35% !important;
background-size: cover !important;
}
}
@media (max-width: 640px) {
#inicio {
min-height: 74svh;
}
#inicio .relative.z-10.w-full {
padding-left: 1rem;
padding-right: 1rem;
}
#inicio .text-center.text-white {
max-width: 22rem;
margin-left: auto;
margin-right: auto;
}
#inicio h1 {
font-size: clamp(2rem, 9vw, 2.85rem);
line-height: 0.96;
margin-bottom: 0.85rem;
text-wrap: balance;
}
#inicio p {
font-size: 1rem !important;
line-height: 1.5;
margin-bottom: 1.25rem !important;
}
#inicio #quote-btn,
#inicio #projects-btn {
width: 100%;
max-width: 19rem;
padding: 0.9rem 1.1rem !important;
font-size: 0.96rem !important;
}
header nav {
padding: 0.85rem 1rem !important;
}
header nav img {
height: 2.2rem !important;
}
#mobile-menu-btn {
width: 2.8rem;
height: 2.8rem;
}
#mobile-menu {
max-height: calc(100svh - 4.5rem);
overflow-y: auto;
}
#sobre-nosotros,
#servicios,
#proyectos,
#ventajas,
#testimonios,
#contacto {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
#sobre-nosotros > div,
#servicios > div,
#proyectos > div,
#ventajas > div,
#testimonios > div,
#contacto > div,
footer > div {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
#sobre-nosotros .mb-16,
#servicios .mb-16,
#proyectos .mb-16,
#ventajas .mb-16,
#testimonios .mb-16,
#contacto .mb-16 {
margin-bottom: 2.25rem !important;
}
#sobre-nosotros h2,
#servicios h2,
#proyectos h2,
#ventajas h2,
#testimonios h2,
#contacto h2 {
font-size: 2rem !important;
line-height: 1.08;
text-wrap: balance;
}
#sobre-nosotros .grid,
#contacto .grid {
gap: 1.75rem !important;
}
#sobre-nosotros .h-96 {
height: 14rem !important;
}
#sobre-nosotros .pl-8 {
padding-left: 0 !important;
}
#sobre-nosotros .space-y-6 {
gap: 1rem !important;
}
#sobre-nosotros p.text-lg {
font-size: 1rem !important;
line-height: 1.7;
text-align: left !important;
}
#servicios .grid,
#ventajas .grid {
gap: 1rem !important;
}
.service-card {
transform: none !important;
}
#servicios .service-card,
#portfolio-content .bg-white.rounded-lg.shadow-lg,
#testimonials-container > div {
padding: 1.25rem !important;
}
#servicios h3,
#ventajas h3 {
font-size: 1.2rem !important;
line-height: 1.25;
}
#servicios p,
#ventajas p,
#testimonials-container p {
font-size: 0.97rem !important;
line-height: 1.65;
}
#proyectos .mb-12 {
margin-bottom: 1.5rem !important;
}
#proyectos .tab-button {
padding: 0.9rem 1rem !important;
font-size: 0.95rem !important;
}
#proyectos .renovation-filter {
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
#proyectos .flex.flex-wrap.gap-3.bg-white {
gap: 0.5rem !important;
padding: 0.45rem !important;
border-radius: 1rem;
overflow-x: auto;
flex-wrap: nowrap !important;
justify-content: flex-start;
scrollbar-width: none;
}
#proyectos .flex.flex-wrap.gap-3.bg-white::-webkit-scrollbar {
display: none;
}
#renovations-grid,
#renovations-grid-full {
gap: 1.25rem !important;
}
.before-after-container {
aspect-ratio: 5 / 4;
}
#renovations-grid .p-6,
#renovations-grid-full .p-6 {
padding: 1rem !important;
}
#renovations-grid h3,
#renovations-grid-full h3 {
font-size: 1.15rem !important;
line-height: 1.3;
}
#renovations-grid p,
#renovations-grid-full p {
font-size: 0.95rem !important;
line-height: 1.65;
}
#whatsapp-bubble {
display: none !important;
}
#renovations-grid .renovation-item > .bg-white > .p-6,
#renovations-grid .renovation-item > .bg-gray-50 > .p-6,
#renovations-grid-full .renovation-item > .bg-white > .p-6,
#renovations-grid-full .renovation-item > .bg-gray-50 > .p-6 {
min-height: auto;
}
.renovation-item > .bg-white,
.renovation-item > .bg-gray-50 {
max-width: 100%;
}
#contacto .space-y-6 {
gap: 1rem !important;
}
#contacto input,
#contacto textarea {
font-size: 0.98rem !important;
padding: 0.9rem 0.95rem !important;
}
#contacto textarea {
min-height: 8rem;
}
#contacto button[type="submit"] {
padding-top: 0.95rem !important;
padding-bottom: 0.95rem !important;
}
#contacto .space-y-8 {
gap: 1.25rem !important;
}
#testimonials-container {
gap: 1rem !important;
scroll-padding-inline: 1rem;
padding-inline: 1rem;
}
#testimonials-container > div {
flex-basis: 86%;
scroll-snap-align: center;
}
footer {
padding-top: 2.75rem !important;
padding-bottom: 2.25rem !important;
}
footer .grid {
gap: 1.5rem !important;
}
footer h3 {
font-size: 1.45rem !important;
}
footer h4 {
margin-bottom: 0.75rem !important;
}
footer .mt-8 {
margin-top: 1.5rem !important;
}
footer .pt-8 {
padding-top: 1.25rem !important;
}
#whatsapp-btn {
width: 3.25rem;
height: 3.25rem;
}
#whatsapp-btn i {
font-size: 1.35rem;
}
#whatsapp-btn .animate-ping,
#whatsapp-btn .absolute.-top-1.-right-1.w-4.h-4 {
width: 0.75rem;
height: 0.75rem;
top: -0.1rem;
right: -0.1rem;
}
}
@media (max-width: 420px) {
#inicio h1 {
font-size: clamp(1.9rem, 10vw, 2.45rem);
}
#inicio p {
font-size: 0.96rem !important;
}
#sobre-nosotros h2,
#servicios h2,
#proyectos h2,
#ventajas h2,
#testimonios h2,
#contacto h2 {
font-size: 1.8rem !important;
}
#proyectos .tab-button,
#proyectos .renovation-filter {
font-size: 0.88rem !important;
}
}