/*
  Hoja de estilos para la nueva landing de OpenDialogo.
  Se simplificaron y reescribieron las reglas para que la
  navegación se adapte correctamente en móviles y ordenadores,
  y para que la galería de diapositivas sea visible en todas
  las resoluciones. El diseño sigue la paleta de colores
  original y utiliza tipografía Inter.
*/

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  /* Fondo ligeramente gris para un contraste suave con las secciones blancas */
  background-color: #f7f9fb;
  /* Texto principal en tono azul oscuro para mejorar la legibilidad */
  color: #0a2536;
}

a {
  text-decoration: none;
}

/* Contenedores */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Encabezado */
/*
  Cabecera fija en la parte superior.  Utiliza un azul marino profundo
  como fondo para reflejar la seriedad y profesionalidad del sector
  de la construcción.  También nos aseguramos de que el contenido
  quede por encima del resto al hacer scroll.  El relleno se
  mantiene para dar aire alrededor del logo y la navegación.*/
.header {
  background-color: #0a2536;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

.nav a {
  margin-left: 1.5rem;
  color: #ffffff;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

/* Al pasar el ratón por los enlaces del menú utilizamos el color
   corporativo naranja para llamar la atención sin romper la armonía. */
.nav a:hover {
  color: #e47a0b;
}

/* Ajustes de navegación para pantallas pequeñas */
@media (max-width: 768px) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav a {
    margin: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Slider */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
  /* Oculta la barra de desplazamiento en la mayoría de los navegadores */
  scrollbar-width: none; /* Firefox */
}
.slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.slide {
  flex: 0 0 100%;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  scroll-snap-align: start;
  color: #ffffff;
}
.overlay {
  background: rgba(0, 0, 0, 0.45);
  padding: 1rem;
  margin: 0 0 2rem 1rem;
  border-radius: 8px;
  max-width: 90%;
}
.slide h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #ffffff;
}
.slide p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #e6e6e6;
}

/* Botones */
/* Botones reutilizables. Se redefine la paleta para adoptar el
   naranja corporativo en el primario y un estilo contorneado en el
   secundario. Los bordes redondeados aportan suavidad y accesibilidad. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: #e47a0b;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #cf6710;
}

.btn-secondary {
  background-color: #ffffff;
  color: #e47a0b;
  border: 2px solid #e47a0b;
}
.btn-secondary:hover {
  background-color: #fce9d5;
  color: #cf6710;
}

/* Sección de beneficios */
.benefits {
  padding: 4rem 0;
  background-color: #ffffff;
}
.benefits h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.benefit-item {
  background-color: #f0f7fd;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.benefit-icon {
  /* Círculo de color naranja corporativo para resaltar cada beneficio */
  background-color: #e47a0b;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  color: #ffffff;
  font-size: 1.5rem;
}
.benefit-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  /* Títulos en azul marino para combinar con el encabezado */
  color: #0a2536;
}
.benefit-item p {
  color: #324a69;
  font-size: 0.95rem;
}

/* Cómo funciona */
.steps {
  background-color: #f8fafd;
  padding: 4rem 0;
}
.steps h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.step-item {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.step-number {
  font-size: 2rem;
  font-weight: 700;
  /* Los números del proceso utilizan el color corporativo naranja */
  color: #e47a0b;
  margin-bottom: 0.5rem;
}

/* Planes */
.pricing {
  padding: 4rem 0;
  background-color: #ffffff;
}
.pricing h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.price-item {
  background-color: #ffffff;
  border: 1px solid #e0eaff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.price-item.featured {
  border-color: #0070BA;
  box-shadow: 0 0 0 2px #0070BA;
}
.price-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: #0c3f6b;
}
.price {
  font-size: 2rem;
  font-weight: 700;
  color: #00ADEF;
  margin-bottom: 1rem;
}
.price-item ul {
  list-style: none;
  margin-bottom: 1rem;
}
.price-item ul li {
  margin-bottom: 0.5rem;
  color: #324a69;
}
.pricing-grid .price-item a {
  margin-top: 1rem;
}

/* =========================================================
   Sección de servicios
   Inspirada en la estructura de la tabla de planes, pero
   orientada a mostrar las distintas áreas de servicio de
   TotalPro. Cada elemento cuenta con su propio icono,
   título y descripción.  Los colores y sombras siguen la
   identidad visual de la página.
========================================================= */
.services {
  padding: 4rem 0;
  background-color: #ffffff;
}
.services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.service-item {
  background-color: #f8fafd;
  border: 1px solid #e0eaff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
.service-icon {
  background-color: #e47a0b;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  color: #ffffff;
  font-size: 1.5rem;
}
.service-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: #0a2536;
}
.service-item p {
  color: #324a69;
  font-size: 0.95rem;
}

/* Formulario de contacto */
.contact {
  background-color: #f8fafd;
  padding: 4rem 0;
}
.contact h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #0c3f6b;
}
.contact p {
  text-align: center;
  margin-bottom: 2rem;
  color: #324a69;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #ccdfff;
  border-radius: 8px;
  font-size: 1rem;
}
.contact-form button {
  align-self: center;
}

/* Pie de página */
.footer {
  background-color: #0c3f6b;
  color: #ffffff;
  padding: 1.5rem 0;
}
.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer p {
  margin-bottom: 0.5rem;
  text-align: center;
}
.footer-nav {
  display: flex;
  gap: 1.5rem;
}
.footer-nav a {
  color: #ffffff;
  text-decoration: none;
}
.footer-nav a:hover {
  color: #00a8e8;
}

/*
  Clases añadidas para cumplimiento legal y accesibilidad.
  Estas reglas proporcionan estilos para el bloque legal en el
  pie de página y un botón flotante de WhatsApp para contacto
  rápido. La paleta de colores mantiene coherencia con la
  identidad visual de OpenDialogo.
*/

/* Bloque legal en el footer */
.footer-legal {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #d9e6f2;
  text-align: center;
  opacity: 0.85;
}

.footer-legal a {
  color: #ffffff;
  text-decoration: underline;
}

.footer-legal a:hover {
  color: #00a8e8;
}

/* Botón flotante de WhatsApp
   Reposicionado para que quede a la mitad de la pantalla en la derecha.
   Esto mejora la visibilidad tanto en móviles como en escritorio. */
.whatsapp-float {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding: 0.8rem 1rem;
  background: #25D366;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.whatsapp-float:hover {
  background: #1ebe54;
}

.whatsapp-float:focus {
  outline: 2px solid #0c3f6b;
  outline-offset: 2px;
}


/* === Overrides: Botón flotante circular con auricular blanco (sin texto) === */
.whatsapp-float{
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  z-index: 1000;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  color: transparent; /* oculta cualquier texto residual */
}

.whatsapp-float svg{
  width: 26px;
  height: 26px;
  fill: #fff;
  display: block;
}

.whatsapp-float:hover{
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

@media (max-width: 768px){
  .whatsapp-float{
    right: 14px;
    width: 54px;
    height: 54px;
  }
  .whatsapp-float svg{
    width: 24px;
    height: 24px;
  }
}