@import "tailwindcss";

/* CleanHouse Punta - Core Identity - Optimizado para Accesibilidad */
:root {
    --ch-orange: #f97316; /* orange-500 */
    --ch-bg: #020617;    /* slate-950 */
    /* Aumentamos el brillo del texto para mejorar el contraste WCAG AA */
    --ch-text: #f1f5f9;   /* slate-100 en lugar de slate-200 */
    --ch-text-muted: #94a3b8; /* slate-400 */
}

/* Evitar parpadeo de Alpine.js */
[x-cloak] { display: none !important; }

/* Configuración Base */
html { 
    scroll-behavior: smooth; 
    background-color: var(--ch-bg); 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    color: var(--ch-text); 
    line-height: 1.6;
}

/* --- Accesibilidad: Navegación por teclado --- */
:focus-visible {
    outline: 2px solid var(--ch-orange);
    outline-offset: 2px;
}

/* --- Mejoras en Formularios y Selects (Alto contraste) --- */
select, input, textarea {
    background-color: #0f172a; /* slate-900 */
    color: var(--ch-text) !important;
    border: 1px solid #334155 !important; /* slate-700 */
}

select:focus, input:focus, textarea:focus {
    border-color: var(--ch-orange) !important;
    ring: 2px var(--ch-orange);
}

select option { 
    background-color: #0f172a; 
    color: white; 
}

/* --- HERO SLIDER (Estabilidad de layout para Core Web Vitals) --- */
.hero-slider-container {
    height: 380px; 
    contain: layout;
}
@media (min-width: 1024px) {
    .hero-slider-container { height: 580px; }
}

/* --- COMPONENTES EXTRAS --- */
.glass { 
    background: rgba(2, 6, 23, 0.9); /* Ligeramente más opaco para mejor contraste */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
}

/* Scrollbar (No afecta SEO pero mejora la UX móvil) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ch-bg); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ch-orange); }

/* --- Ajuste SEO: Títulos y jerarquía --- */
h1, h2, h3, h4 {
    text-wrap: balance; /* Mejora la legibilidad de títulos en móvil */
}