/* ==========================================================================
   Techos Fisicaro - Custom Styles
   Complementa Tailwind CDN con estilos específicos del sitio
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero background con patrón sutil */
.hero-bg {
    background-color: #1C2B3A;
    background-image:
        linear-gradient(135deg, rgba(28, 43, 58, 0.95) 0%, rgba(17, 29, 40, 0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 L40 0 L80 40 L80 80 L0 80 Z' fill='none' stroke='%23D14820' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
    background-size: cover, 80px 80px;
    position: relative;
    overflow: hidden;
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #D14820);
    opacity: 0.15;
    pointer-events: none;
}

/* Animación sutil de fade-in al cargar */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-delay-1 { animation-delay: 0.15s; opacity: 0; }
.fade-in-delay-2 { animation-delay: 0.3s; opacity: 0; }
.fade-in-delay-3 { animation-delay: 0.45s; opacity: 0; }

/* Badge de urgencia: aparece con fade-in y luego parpadea suave */
@keyframes urgencyBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.urgency-badge {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards, urgencyBlink 1.6s ease-in-out 0.9s infinite;
}

/* Pulso suave para el botón flotante de WhatsApp */
@keyframes whatsappPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.whatsapp-float {
    animation: whatsappPulse 2.5s infinite;
}

/* Mejora visual del scroll */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F5F0E8;
}

::-webkit-scrollbar-thumb {
    background: #1C2B3A;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #D14820;
}

/* Selección de texto con colores de marca */
::selection {
    background: #D14820;
    color: white;
}

/* Mejora de focus para accesibilidad */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #D14820;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Card hover effect mejorado */
.service-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-6px);
}

/* Forma decorativa de techo (usada como divisor) */
.roof-divider {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L720 0 L1440 60 Z' fill='%23F5F0E8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 60px;
    width: 100%;
}

/* Container utilitario */
.container-custom {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-custom { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
    .container-custom { padding-left: 2rem; padding-right: 2rem; }
}

/* Print styles */
@media print {
    .no-print, .whatsapp-float, header, footer { display: none !important; }
}