/* =====================================================
   BASE
===================================================== */
body {
  overflow-x: hidden;
  margin: 0;
  font-family: Arial, sans-serif;
  background: #010f0c; /* Fondo oscuro */
  color: rgb(153, 238, 227); /* Texto verde agua */
  text-align: center;  /* Centrar todos los textos por defecto */
}

/* =====================================================
   ENCABEZADO
===================================================== */
.favicon-container {
  text-align: center;
  margin-bottom: 20px;
}
.favicon-container img {
  width: 100%;
  height: auto;
  max-width: 400px; /* Ajusta según necesidad */
  margin: 0 auto;
  display: block;
}
.imagen-header {
  width: 100%;
  height: auto;
  display: block;
}
/* Forzamos el centrado de todos los títulos */
h1, h2, h3, h4 {
  text-align: center !important;
}
h1 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
/* Se mantiene la regla de h2, reforzada con !important */
h2 {
  font-size: 1.5rem;
  margin: 30px 0;
  color: rgb(153, 238, 227);
  text-align: center !important;
}

/* =====================================================
   PRESENTACIÓN
===================================================== */
.presentacion {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}
.presentacion p {
  text-align: center; /* Centrar párrafos */
  margin: 10px auto;
  line-height: 1.6;
}

/* =====================================================
   CONTENIDO (Imagen y Texto)
===================================================== */
.contenido {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: center; /* Forzamos el centrado */
}
.foto {
  width: 200px;
  height: auto;
  object-fit: cover;
}
.texto {
  flex: 1;
  text-align: center;
}

/* =====================================================
   BOTONES REDONDOS Y VARIANTES
===================================================== */
.botones {
  display: flex;
  justify-content: center;
  gap: 20px;              /* Espacio entre botones para escritorio */
  margin: 30px auto 20px;
  width: 100%;
  max-width: 400px;       /* Limita el ancho para centrar */
}
.boton {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.circulo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #010f0c;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blanco {
  background-color: white;
  color: #010f0c;
  border: 2px solid #010f0c;
}
.azul {
  background-color: rgb(153, 238, 227);
  color: #010f0c;
  border: 2px solid #010f0c;
}
.circulo:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}



/* Botón "Volver a inicio" dentro del header */
.boton-volver { 
  position: absolute;     /* Posicionado relativo al header */
  top: 10px;              /* Distancia desde la parte superior del header */
  left: 10px;             /* Distancia desde la parte izquierda */
  padding: 10px 15px;
  background: #ff6600;    /* Fondo naranja */
  color: white;           /* Letras en blanco */
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;    /* Forma tipo pill */
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0px 4px 10px rgba(255, 102, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;          /* Por encima del header */
  cursor: pointer;
}

/* Hover para el botón */
.boton-volver:hover {
  background: #cc5500;
  transform: scale(1.05);
  box-shadow: 0px 6px 15px rgba(255, 51, 0, 0.6);
}

/* Asegura que el enlace ocupe todo el área del botón */
.boton-volver a,
.boton-volver a:link,
.boton-volver a:visited {
  display: block;
  text-align: center;
  color: inherit;
}

/* Animación de entrada para el encabezado (ya existente) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.btn-oval-blanco {
  display: inline-block;
  padding: 10px 30px;
  font-size: 16px;
  background-color: white; /* Fondo blanco */
  color: #010f0c;          /* Texto en color oscuro */
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  margin-top: 60px;        /* Ajusta el margen superior según necesites */
}
.btn-oval-blanco:hover {
  background-color: #e6e6e6;
  transform: scale(1.05);
}

/* =====================================================
   SECCIÓN: PARTICULARES Y EMPRESAS
===================================================== */
h1,
h2,
.contenido-particulares p {
  text-align: center;
  margin: 20px auto;
  max-width: 800px;
  line-height: 1.6;
}
.contenido-particulares,
.contenido-empresas {
  padding: 15px;
  box-sizing: border-box;
}
/* Párrafos y listas centrados */
.contenido-particulares p,
.contenido-empresas p {
  text-align: center;
  margin: 10px auto;
  line-height: 1.6;
  max-width: 800px;
}
.contenido-particulares ul,
.contenido-empresas ul {
  text-align: center; /* Centramos las listas */
  margin: 20px auto;
  line-height: 1.6;
  max-width: 800px;
  padding-left: 0; /* Eliminamos el padding izquierdo */
}
ul li {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0px auto;
}
ul li::before {
  position: absolute;
  left: 0;
  color: rgb(153, 238, 227);
  font-size: 1.2rem;
}

/* =====================================================
   SERVICIOS RESUMEN
===================================================== */
.servicios-resumen {
  text-align: center;
  margin: 20px auto;
}
.servicios-lista {
  text-align: center;
}
.servicios-lista ul {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}

/* =====================================================
   FORMULARIOS
===================================================== */
form {
  padding: 20px;
  background-color: #010f0c;
  color: rgb(153, 238, 227);
  border: 2px solid rgb(153, 238, 227);
  border-radius: 10px;
  max-width: 600px;
  margin: 30px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}
form h3,
form h4 {
  text-align: center;
  margin-bottom: 20px;
}
label {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
input,
textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  background-color: #f4f4f9;
  color: #010f0c;
}
input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
}
textarea {
  resize: vertical;
}
button.btn {
  width: 100%;
  padding: 10px 20px;
  background-color: rgb(153, 238, 227);
  color: #010f0c;
  border: none;
  border-radius: 5px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
button.btn:hover {
  transform: scale(1.1);
  background-color: #66e5d3;
}
form div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 5px 0;
}
form div input[type="checkbox"] {
  margin: 0;
  margin-top: 5px;
  padding: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
form div label {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(153, 238, 227);
  cursor: pointer;
  text-align: center;
}
input[type="checkbox"],
label {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
form p {
  text-align: center;
  margin: 15px 0;
  font-size: 0.9rem;
  color: rgb(153, 238, 227);
}
form p a {
  color: #66e5d3;
  font-weight: bold;
  text-decoration: underline;
}
form p a:hover {
  color: #bef755;
}

/* =====================================================
   BOTONES SOCIALES
===================================================== */
.social-login .btn-social {
  padding: 10px 15px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}
.social-login .google {
  background-color: #4285F4;
  color: white;
}
.social-login .google:hover {
  background-color: #357AE8;
}
.social-login .apple {
  background-color: black;
  color: white;
}
.social-login .apple:hover {
  background-color: #333;
}

/* Botón de registro */
.boton-registro {
  text-align: center;
  margin: 20px 0;
}
.boton-registro .btn {
  padding: 10px 20px;
  background-color: rgb(153, 238, 227);
  color: #010f0c;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.boton-registro .btn:hover {
  background-color: #66e5d3;
  transform: scale(1.05);
}
#registro-instrucciones {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* =====================================================
   FORMULARIO ESPECIAL (Particulares y Empresas)
   - Centra el formulario como contenedor.
   - Los títulos, labels de texto y demás elementos
     seguirán centrados a excepción de los checkboxes.
===================================================== */
.formulario-especial {
  max-width: 600px;
  margin: 0 auto;           /* Centra el contenedor en la página */
  padding: 20px;
  box-sizing: border-box;
  /* Evitamos text-align: center aquí para no forzar todo el texto centrado;
     en su lugar, centramos solo los títulos más abajo */
}

.formulario-especial form {
  width: 100%;
}

.formulario-especial form h3,
.formulario-especial form h4 {
  text-align: center;       /* Solo los títulos se centran */
  margin-bottom: 20px;
}

/* Etiquetas generales (no checkboxes) */
.formulario-especial form label {
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
  /* text-align: center;  <- Si quieres las etiquetas de texto centradas, descomenta esta línea */
}

/* Campos y botón de envío */
.formulario-especial form input,
.formulario-especial form textarea,
.formulario-especial form button.btn {
  width: 100%;
  padding: 0.25rem 0.10rem;
  background-color: white;
  color: #010f0c;
  border: none;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* =====================================================
   CHECKBOXES
   - Alineación a la izquierda de todos los checkboxes
===================================================== */
.checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* Alinea todo a la izquierda */
  text-align: left;         /* Alinea el texto a la izquierda */
  gap: 10px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Evita que se centren horizontalmente */
  gap: 10px;
  cursor: pointer;
  width: 100%;                 /* Para que ocupe todo el ancho del contenedor */
  text-align: left;            /* Texto a la izquierda */
}

.checkbox-group input[type="checkbox"] {
  margin-top: 0;
  align-self: flex-start;       /* El checkbox también queda a la izquierda */
}

.checkbox-group label span {
  display: block;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .formulario-especial .checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .formulario-especial .checkbox-group label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .formulario-especial .checkbox-group input[type="checkbox"] {
    margin: 0 !important;
    align-self: flex-start !important;
  }
  .formulario-especial .checkbox-group label span {
    line-height: 1.4 !important;
  }
}





/* =====================================================
   BOTONES ADICIONALES (Blog, Footer, etc.)
===================================================== */
.btn {
  display: inline-block;
  background-color: #006d5b;
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-size: 1rem;
  text-align: center;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: #004d40;
}


.btn-oval {
  display: inline-block;
  padding: 10px 30px;
  font-size: 16px;
  margin-bottom: 0;
  background-color: rgb(153, 238, 227);
  color: #010f0c;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  margin-top: -30px;
}
.btn-oval:hover {
  background-color: #66e5d3;
  transform: scale(1.05);
}
header,
#blog {
  text-align: center;
  padding: 20px;
}
.blog-container {
  max-width: 800px;
  margin: 0 auto;
}
/* Footer a todo ancho, fondo oscuro, texto blanco */
/********************************
 *     ESTILOS FOOTER UNIFICADO *
 ********************************/
footer {
  width: 100%;
  background-color: #000;  /* Fondo oscuro (ajusta a tu preferencia) */
  color: #fff;             /* Texto en blanco */
  text-align: center;      /* Centra el contenido */
  padding: 15px 0;         /* Espacio interno arriba y abajo */
  box-sizing: border-box;  /* Asegura que el padding no exceda el ancho */
  margin-top: 20px;        /* Espacio arriba del footer (opcional) */
}

footer p {
  margin: 5px 0;           /* Separa un poco el texto de los enlaces */
}

/* Para que los enlaces se repartan en línea y se centren */
footer nav {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  flex-wrap: wrap;         /* Permite que salten de línea en pantallas pequeñas */
  gap: 20px;               /* Espacio entre enlaces */
  margin-top: 10px;        /* Espacio entre el párrafo y los enlaces */
}

footer nav a {
  color: #fff;             /* Enlaces en blanco */
  text-decoration: none;   /* Sin subrayado */
  font-size: 0.95rem;      /* Ajusta el tamaño de fuente a tu gusto */
}

footer nav a:hover {
  text-decoration: underline; /* Subrayado al pasar el ratón */
}

/********************************
 *      FIN ESTILOS FOOTER      *
 ********************************/


.boton-redondo,
.boton-redondo-blog {
  width: 80px;
  height: 80px;
  font-size: 14px;
}
.btn-blog {
  display: inline-block;
  padding: 10px 30px;
  font-size: 16px;
  background-color: rgb(153, 238, 227);
  color: #010f0c;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  margin-top: 40px;
}
.btn-blog:hover {
  background-color: #66e5d3;
  transform: scale(1.05);
}
.contenedor-boton-blog {
  display: flex;
  justify-content: center;
  margin-top: -30px;
}

/* =====================================================
   CONTENEDORES DE AUTENTICACIÓN
===================================================== */
.auth-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.social-login {
  flex-direction: column;
}
.social-login .btn-social {
  width: 100%;
  margin-bottom: 10px;
}

/* =====================================================
   MEDIA QUERIES
===================================================== */
@media (max-width: 768px) {
  .presentacion {
    width: 90%;
    padding: 10px;
  }
  .contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
  }
  .foto {
    width: 100%;
    max-width: 250px;
    height: auto;
  }
  .texto {
    width: 100%;
    text-align: center;
  }
  .botones {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }
  .circulo {
    width: 120px;
    height: 120px;
    font-size: 14px;
  }
  h1, h2, h3 {
    padding: 0 10px;
  }
  .contenido-particulares p,
  .contenido-empresas p {
    padding: 0 10px;
  }
/* Estilo base para todos los dispositivos */
.imagen-container {
  width: 100%; /* El contenedor ocupa todo el ancho disponible */
}

.imagen-particulares {
  display: block;
  width: 100%;  /* La imagen se adapta al ancho del contenedor */
  height: auto; /* La altura se ajusta manteniendo la proporción */
  margin: 15px auto;
}






@media (max-width: 600px) {
  .checkbox-group label {
    flex: 1 1 100%;
  }
  .formulario-especial {
    padding: 10px;
  }
}

/* =====================================================
   BANNER DE COOKIES
===================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1000;
  font-family: Arial, sans-serif;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.cookie-banner p {
  margin: 0;
  font-size: 14px;
}
.cookie-banner a {
  color: #ffc107;
  text-decoration: underline;
}
.cookie-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.cookie-buttons button {
  background: #ffc107;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}
.cookie-buttons button:hover {
  background: #e0a800;
}
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  text-align: center;
  z-index: 1000; /* Asegura que está por encima de todo */
}
#cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Oscurece la pantalla */
  z-index: 999;
  display: none; /* Oculto por defecto */
}
body.bloqueado {
  pointer-events: none;
}
#cookie-banner,
#cookie-overlay {
  pointer-events: auto;
}

#pagina-centrada * {
  text-align: center !important;
}

#ofertas {
  text-align: center;
}  /* Cierra la regla de #ofertas */

.center-list {
    width: 50%;              /* Define el ancho del contenedor */
    margin: 20px auto;       /* Centra horizontalmente y añade margen vertical */
    border: 2px solid #000;  /* Borde negro de 2px */
    padding: 20px;           /* Espacio interno */
    box-sizing: border-box;  /* Incluye el padding en el ancho total */
    text-align: center;      /* Centra el contenido textual, si lo deseas */
}


/* Ajuste para móviles */