/* =============================================================
   MÓDULO: HOME (PORTADA Y SECCIONES ORIGINALES)
   ============================================================= */

/* --- HERO --- */
.hero { position: relative; height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); overflow: hidden; background: #000; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2; }
.hero-content { position: relative; z-index: 3; padding: 20px; width: 100%; }
.hero-content h1 { font-size: 3.5rem; margin-bottom: 1rem; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1.2rem; margin-bottom: 2rem; font-weight: 300; color: #ddd; }

/* --- MAQUETACIÓN SPLIT (Texto + Imagen) --- */
.split { display: flex; align-items: center; gap: 4rem; }
.reverse { flex-direction: row-reverse; }
.image-block, .text-block { flex: 1; min-width: 0; } 

.image-block img { width: 100%; box-shadow: 10px 10px 0px #333; filter: grayscale(20%); transition: 0.5s; border-radius: 4px; }
.image-block img:hover { filter: grayscale(0%); }
.service-list { margin-top: 1.5rem; text-align: left; }
.service-list li { margin-bottom: 0.8rem; font-size: 1.1rem; color: #ccc; }

/* --- OPINIONES --- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; }
.review-card { background: rgba(255,255,255,0.03); padding: 2rem; border: 1px solid rgba(255,255,255,0.1); text-align: center; border-radius: 4px; }
.stars { color: var(--gold); margin-bottom: 1rem; letter-spacing: 5px; font-size: 1.2rem;}
.review-card span { display: block; margin-top: 1rem; color: var(--gold); font-style: italic; }

/* --- ADAPTACIÓN MÓVIL HOME --- */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.2rem; }
    .split { flex-direction: column; text-align: center; }
    .image-block img { margin-bottom: 2rem; }
    .service-list { text-align: center; }
}