/* ==============================================
   CSS COMPLETO - Colores Verde Manzana Pastel y Blanco y Responsive
   ============================================== */

/* --- REGLA GENERAL PARA IMAGENES RESPONSIVAS --- */
img {
  max-width: 100%;
  height: auto; 
  display: block; 
}


/* ===========================
   Estilos Base y Tipografía
=========================== */
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  /* Fondo base verde manzana pastel */
  background: linear-gradient(180deg, #f1f8e9 0%, #ffffff 100%); 
  color: #333;
}

/* ===========================
   Fondo geométrico (Nuevo Color Verde Pastel)
=========================== */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Colores verde manzana semi-transparentes */
    radial-gradient(circle at 10% 20%, rgba(200, 230, 201, 0.5) 0%, transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(165, 214, 167, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #f1f8e9 0%, #ffffff 100%);
  z-index: -1;
}

/* ===========================
   Hero Section & Botones
=========================== */
.hero {
  /* Si usas la imagen de fondo: */
  /* background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("images/hero.jpg") center/cover no-repeat; */
  
  /* Si usas el fondo geométrico verde */
  background: linear-gradient(135deg, #c5e1a5 50%, #ffffff 50%); /* Verde claro */
  height: auto; 
  text-align: center;
  padding: 6rem 1rem; 
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; 
}
.hero-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95); /* Fondo blanco casi opaco */
  display: inline-block;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.hero h1 {
  font-size: 2.5rem; 
  margin-bottom: 0.5rem;
  color: #558b2f; /* Verde oscuro (tono manzana) para el título */
}
.subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: #444;
}
.btn-primary {
  background-color: #8bc34a; /* Verde lima/manzana vibrante */
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: background 0.3s;
  display: inline-block;
}
.btn-primary:hover {
  background-color: #689f38; /* Verde oscuro en hover */
}

/* ===========================
   Secciones Generales
=========================== */
section {
  padding: 2rem 1rem; 
  max-width: 1100px;
  margin: auto;
  text-align: center;
}
h2 {
  color: #558b2f; /* Verde oscuro para todos los h2 */
  margin-bottom: 1.5rem;
}

/* ===========================
   Service Cards (Responsive)
=========================== */
.services {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 1.5rem;
}
.service-card {
  border: 1px solid #c5e1a5; /* Borde verde claro */
  border-radius: 1rem;
  padding: 1.5rem; 
  background: #ffffff; /* Fondo blanco */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.price {
  font-weight: bold;
  margin: 1rem 0;
  color: #558b2f; /* Verde oscuro para precios */
}

/* ===========================
   Comparison Table (Responsive & Estilo Limpio)
=========================== */
.comparison table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden; 
  display: block; 
  overflow-x: auto; 
  white-space: nowrap; 
}
.comparison th, .comparison td {
  border: 1px solid #c5e1a5; 
  padding: 0.8rem;
  text-align: center; 
}
.comparison th {
  background-color: #aed581; /* Verde medio para encabezados */
  color: #fff;
  font-weight: 600; 
}
.comparison td {
  background-color: #ffffff; /* Fondo blanco */
}

/* ===========================
   Extra Sections (Colores Verde Pastel)
=========================== */
.extra, .reviews, .contact, .faq {
  background-color: #f1f8e9; /* Fondo verde pastel muy claro */
  border-radius: 1rem;
  padding: 3rem 1rem;
}

/* ===========================
   Footer (Verde Oscuro)
=========================== */
footer {
  background-color: #558b2f; /* Verde oscuro para el footer */
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
.email-visible {
  color: #444; 
}
.email-visible strong, .contact a, .faq-item a {
  color: #558b2f; /* Verde oscuro para enlaces y email */
}

/* ===========================
   Warum R&R Reinigung Section (Responsive)
=========================== */
.why-us {
  padding: 60px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
}

.why-us h2 {
  font-size: 2rem;
  color: #558b2f; /* Verde oscuro */
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 25px;
}

.why-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.why-card h3 {
  color: #558b2f; /* Verde oscuro */
}

/* ===========================
   Imágenes de Servicio (Responsive)
=========================== */
.service-img {
  width: 100%;
  max-width: 100%; 
  height: auto; 
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

/* Contenedor de varias imágenes en servicios */
.service-images {
  display: flex;
  gap: 15px; 
  margin-bottom: 15px;
  flex-wrap: wrap; 
  justify-content: center; 
}

.service-images img {
  width: 100%; /* Una imagen por fila en móvil */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  object-fit: cover;
  max-height: 250px; 
}

/* Media Query para pantallas más grandes (tablets/escritorio) */
@media (min-width: 600px) {
  .service-images img {
    width: 48%; /* Dos imágenes por fila en escritorio */
  }
}