* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #fff;
}

/* Estilos generales para la barra de navegación */
.header {
  background-color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  border-bottom: 1px solid #444;
  position: sticky;
  top: 0;
  z-index: 999;
  flex-wrap: nowrap; /* Esto asegura que los elementos no se apilen */
}

.navbar {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap; /* Para evitar el apilamiento */
  overflow-x: auto; /* Habilita el desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Para una mejor experiencia en iOS */
}

.navbar a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
}

.navbar a.active,
.navbar a:hover {
  font-weight: bold;
  border-bottom: 2px solid white;
}

/* Estilos para pantallas pequeñas (dispositivos móviles) */
@media (max-width: 768px) {
  .header {
    flex-direction: row;
    padding: 10px 20px; /* Ajustamos el padding */
    overflow-x: auto; /* Habilita el desplazamiento horizontal en pantallas móviles */
  }

  .navbar {
    min-width: 100%;
    justify-content: flex-start;
    overflow-x: auto; /* Desplazamiento horizontal en pantallas móviles */
  }

  .header .logo {
    display: none !important; /* Fuerza que el logo no se muestre */
  }

  .header .contact-info {
    display: none; /* Oculta el contact-info en pantallas pequeñas */
  }


  .menu-toggle {
    display: block; /* Asegúrate de que el botón de menú hamburguesa sea visible */
  }

  .navbar a {
    flex-shrink: 0; /* Impide que los enlaces se reduzcan */
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 40px;
}

.navbar a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

.navbar a.active,
.navbar a:hover {
  font-weight: bold;
  border-bottom: 2px solid white;
}

.contact-info {
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #ccc;
}

.contact-info a {
  color: #ccc;
  text-decoration: none;
  word-wrap: break-word; /* Permite que las palabras largas se dividan */
  overflow-wrap: break-word; /* Compatibilidad adicional */
  max-width: 100%; /* Asegura que no se desborde */
  display: inline-block; /* Permite el ajuste del texto */
}

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px 30px; /* Reducí el padding-top a 20px y el padding-bottom a 30px */
  background-color: #000;
  background-image: url('../img/Estampado_v1.png');
  background-repeat: repeat;
  background-size: auto;
  color: white;
}

.hero-text {
  max-width: 50%;
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ccc;
}

.hero-images {
  display: flex;
  gap: 120px;
  flex-wrap: wrap;
  margin-top: 100px;

  max-width: 50%;

  margin-bottom: 100px;


  
}

.hero-images img {
  width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
  height: auto; /* Mantendrá la proporción de la imagen */
  object-fit: cover; /* Asegura que la imagen se recorte si es necesario */
  border-radius: 10px;
}

.explora {
  text-align: center;
  padding: 40px 0;
  background-color: #111;
}

.explora-btn {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  padding: 12px 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
}

.explora-btn:hover {
  background-color: white;
  color: black;
}

.categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 60px 20px;
  background-color: #fff;
  background-image: url('../img/Estampado_v2.png'); /* Cambia 'tu-imagen.png' por la ruta de tu imagen */
  background-repeat: repeat; /* Hace que la imagen se repita */
  background-size: auto; /* Mantiene el tamaño original de la imagen */
  color: black;
}

.categoria {
  max-width: 45%;
  text-align: center;
  margin-bottom: 40px;
}

.categoria img {
  width: 100%;
  aspect-ratio: 5 / 3; /* Ajusta la proporción según lo que necesites */
  object-fit: cover; /* Asegura que la imagen se recorte para llenar el área */
  border-radius: 10px;
}
.categoria h3 {
  margin-top: 15px;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .hero-text, .hero-images {
    max-width: 100%;
  }

  .hero {
    flex-direction: column;
  }

  .categoria {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}







/* productos de la pagina ------------ */



/* estilos exclusivos para la sección de productos */

.productos-section {
  padding: 60px 40px;
  background-image: url('../img/Estampado_v2.png'); /* reemplaza con el nombre real de tu imagen */
  background-repeat: repeat;
  background-size: auto;
  color: #000;
}


.productos-section h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #111;
}

.productos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.producto {
  background-color: #111; /* negro oscuro */
  color: #fff;
  width: 250px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  text-align: center;
  transition: transform 0.3s ease;
}


.producto:hover {
  transform: scale(1.03);
}

.producto img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.producto h3 {
  font-size: 1rem;
  margin: 15px 0 5px 0;
}

.producto p {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .productos-grid {
    flex-direction: column;
    align-items: center;
  }
}

.ver-mas-container {
  display: flex;
  justify-content: center;
  margin-top: -20px;

  margin-bottom: -20px;
}

.ver-mas-btn {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  padding: 12px 30px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 30px;
}

.ver-mas-btn:hover {
  background-color: white;
  color: black;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .logo {
    justify-content: center;
    width: 100%;
  }

  .navbar {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 15px 0;
  }

  .navbar a {
    margin: 8px 0;
  }

  .contact-info {
    align-items: flex-start;
    width: 100%;
    font-size: 0.9rem;
    margin-top: 10px;
  }

  .hero {
    padding: 20px;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-images {
    margin: 40px 0;
    justify-content: center;
  }

  .hero-images img {
    height: 300px;
  }

  .explora {
    padding: 30px 10px;
  }

  .categorias {
    flex-direction: column;
    align-items: center;
    padding: 30px 10px;
  }

  .categoria {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .productos-section {
    padding: 30px 20px;
  }

  .producto {
    width: 100%;
    max-width: 300px;
  }

  .producto img {
    height: 200px;
  }

  .ver-mas-container {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    margin: 0;
  }

  .ver-mas-btn {
    width: 100%;
    max-width: 300px;
    padding: 10px;
  }
}

/* Estilos para el botón del menú hamburguesa */
.menu-toggle {
  display: none; /* Oculto por defecto */
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease-in-out; /* Añadida transición para el botón */
}

.menu-toggle.active {
  transform: rotate(90deg); /* Rotación al activarse */
}

.menu-overlay {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Suaviza la transición */
}

.menu-overlay.active {
  display: block;
  opacity: 1; /* Totalmente visible */
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 60%; /* Ocupa el 60% del ancho de la pantalla */
  height: 100%;
  background-color: #1a1a1a;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  transform: translateX(-100%); /* Fuera de la pantalla */
  opacity: 0; /* Totalmente invisible */
  visibility: hidden; /* Oculto visualmente */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transición suave */
  z-index: 999;
}

.mobile-menu.active {
  transform: translateX(0); /* Mueve el menú a su posición visible */
  opacity: 1; /* Totalmente visible */
  visibility: visible; /* Visible */
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* Asegúrate de que el botón de menú hamburguesa sea visible */
  }

  .navbar {
    display: none; /* Ocultar la barra de navegación normal */
  }

  .mobile-menu a {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    color: white;
  }

  .mobile-menu a:hover {
    color: #ccc; /* Cambia el color al pasar el cursor */
  }
}

/* Mostrar el contact-info en computadoras */
@media (min-width: 769px) {
  .contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.85rem;
    color: #ccc;
  }
}

.sobre-tienda {
  padding: 2rem;
  max-width: 1090px;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
}

.sobre-tienda h1, .sobre-tienda h2 {
  color: #2e2e2e;
}

.sobre-tienda p {
  margin-bottom: 1.2rem;
  line-height: 1.6;
}



/* estilos exclusivos para la sección de contenido */

/* Fondo con estampado */
body {
  background-image: url('../img/Estampado_v1.png');
  background-repeat: repeat;
  background-size: auto;
}

/* Estilo para los títulos */
.sobre-tienda h1, .sobre-tienda h2 {
  color: white;
  font-size: 2.5rem; /* Agrandar los títulos */
  text-align: left; /* Alinear a la izquierda */
  margin-bottom: 20px;
}

/* Estilo para las imágenes */
.imagenes-sobre-tienda {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Alinea las imágenes por la parte superior */
  gap: 30px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.imagenes-sobre-tienda img {
  width: auto;
  max-width: 400px;
  height: auto;
  max-height: 350px; /* Limita la altura máxima para alineación */
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  /* Elimina aspect-ratio y object-fit */
  transition: transform 0.3s ease;
  display: block;
}

.imagenes-sobre-tienda img:hover {
  transform: scale(1.1);
  z-index: 2;
}

/* Adaptar imágenes y contenedor en pantallas pequeñas */
@media (max-width: 900px) {
  .imagenes-sobre-tienda {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .imagenes-sobre-tienda img {
    max-width: 95vw;
    max-height: 50vw;
  }
}

/* Evitar que el zoom haga overflow en móviles */
@media (max-width: 600px) {
  .imagenes-sobre-tienda img:hover {
    transform: scale(1.03);
  }
}

/* Fondo exclusivo para la página de cesta */
body.cesta-bg {
  background-image: url('../img/Estampado_v2.png') !important;
  background-repeat: repeat;
  background-size: auto;
}

/* ================================================== */
/* ESTILOS PARA LA SECCIÓN DE CONTACTO         */
/* Pega este código al final de tu             */
/* archivo estilos.css                         */
/* ================================================== */

/* Contenedor principal de la sección de contacto */
.contact-main-container {
  display: flex;
  justify-content: center;
  gap: 60px; /* Espacio entre columnas */
  padding: 60px 40px;
  background-image: url('../img/Estampado_v1.png'); /* Usando el mismo fondo que el hero */
  background-repeat: repeat;
  background-size: auto;
  flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
}

/* Estilo para cada columna (Horario y Contáctanos) */
.contact-column {
  flex: 1; /* Permite que las columnas crezcan y se ajusten */
  max-width: 450px; /* Ancho máximo para cada columna */
  color: #fff;
}

.contact-column h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  border-bottom: 2px solid #555;
  padding-bottom: 10px;
}

.contact-column p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 20px;
}

/* Estilos para las listas */
.horario-list, .phone-list {
  list-style: none; /* Quita los puntos de la lista */
  padding: 0;
  color: #ccc;
  font-size: 1rem;
  line-height: 1.8;
}

.contact-info-details {
  margin-bottom: 15px;
}

.contact-info-details p {
  margin-bottom: 5px; /* Ajusta el espacio entre el título (Ej. Dirección) y el texto */
}

.contact-info-details p strong {
    color: #fff; /* Hace que "Dirección", "Teléfono", etc. sean más blancos */
}


/* --- Estilos para pantallas móviles --- */
@media (max-width: 768px) {
  .contact-main-container {
    flex-direction: column; /* Apila las columnas verticalmente */
    padding: 40px 20px;
    gap: 40px; /* Espacio entre las secciones apiladas */
  }

  .contact-column h2 {
    font-size: 1.8rem;
    text-align: center;
  }

  .contact-column {
    text-align: center; /* Centra el texto en móviles */
  }
}

/* ================================================== */
/* ESTILOS PARA PÁGINAS CLARAS                 */
/* ================================================== */
body.pagina-clara {
  background-color: #fff;
  background-image: url('../img/Estampado_v2.png');
  background-repeat: repeat;
  background-size: auto;
  color: #111;
}

/* ================================================== */
/* ESTILOS PARA DETALLE DE PRODUCTO            */
/* ================================================== */
.detalle-container {
  display: flex;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  gap: 40px;
}

.galeria-producto {
  display: flex;
  flex: 1.2; /* Darle un poco más de espacio a la galería */
  gap: 20px;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumbnail-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: border-color 0.3s;
}

.thumbnail-img:hover {
  border-color: #111;
}

.imagen-principal {
  flex: 1;
}

.imagen-principal img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.info-producto {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-producto h1 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.info-producto .descripcion {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #555;
}

.info-producto p {
  margin-bottom: 10px;
  color: #555;
}

.info-producto .precio {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 20px 0;
}

.btn-anadir {
  background-color: #111;
  color: #fff;
  border: none;
  padding: 15px 25px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px; /* Ancho máximo */
}

.btn-anadir:hover {
  background-color: #444;
}

/* Responsividad para Detalle de Producto */
@media (max-width: 900px) {
  .detalle-container {
    flex-direction: column;
  }
  .galeria-producto {
    flex-direction: column-reverse; /* Poner thumbnails abajo */
  }
  .thumbnails {
    flex-direction: row;
    justify-content: center;
  }
}

/* ================================================== */
/* ESTILOS PARA LA CESTA DE COMPRA             */
/* ================================================== */
.cesta-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

.cesta-container h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
}

/* --- Vista Cesta Vacía --- */
.cesta-vacia {
  text-align: center;
  padding: 40px 0;
}
.cesta-vacia p {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #555;
}
.btn-negro {
  background-color: #111;
  color: #fff;
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  transition: background-color 0.3s;
}
.btn-negro:hover {
  background-color: #444;
}

/* --- Vista Cesta con Items --- */
.cesta-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 40px;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  color: #555;
  margin-bottom: 20px;
}
.cesta-header span:nth-child(n+2) { /* Alinear textos desde el segundo item */
  text-align: center;
}

.cesta-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 40px;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.cesta-producto-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.cesta-producto-info img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}
.cesta-precio, .cesta-subtotal, .cesta-eliminar {
  text-align: center;
}
.cesta-cantidad {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 5px;
}
.cesta-cantidad button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 5px;
}
.cesta-eliminar {
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}
.cesta-eliminar:hover {
  color: #111;
}

.cesta-resumen {
  max-width: 350px;
  margin-left: auto; /* Alinear a la derecha */
  margin-top: 30px;
  font-size: 0.9rem;
  color: #555;
}
.cesta-resumen div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cesta-resumen .total-final {
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  margin-top: 15px;
  border-top: 1px solid #ccc;
  padding-top: 15px;
}

.cesta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.link-seguir-comprando {
  color: #555;
  text-decoration: underline;
}

/* Responsividad para la cesta */
@media (max-width: 768px) {
  .cesta-header { display: none; }
  .cesta-item {
    grid-template-columns: 1fr;
    gap: 15px;
    text-align: center;
  }
  .cesta-producto-info {
    flex-direction: column;
  }
  .cesta-resumen {
    max-width: 100%;
    margin-left: 0;
  }
}

/* ======================================= */
/* ESTILOS PARA LA PROMO DEL TEST     */
/* ======================================= */
.test-promo {
  background-color: #fff;
  color: #111;
  padding: 4rem 2.5vw; /* Usar rem y vw para escalabilidad */
}

.test-promo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw; /* Usar vw para que el gap escale con el zoom */
  max-width: 1100px; /* Corrige el error de 11000px */
  margin: 0 auto;
  text-align: left;
  width: 100%;
}

.test-promo-image-link {
  flex-shrink: 0;
  width: 100%;
  max-width: 38vw; /* Escalable, mantiene proporción */
  min-width: 220px;
}

.test-promo-image-link img {
  width: 100%;
  max-width: 38vw; /* Escalable, igual que el contenedor */
  min-width: 220px;
  border-radius: 15px;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: auto;
}

.test-promo-image-link img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.test-promo-text {
  flex: 1;
  min-width: 220px;
}

.test-promo-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.test-promo-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 600px;
}

.test-promo-text .transformacion-link {
  font-weight: 500;
}

.test-promo-button {
  background-color: #111;
  color: #fff;
  border: 2px solid #111;
  padding: 0.75rem 3.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 5px;
  display: block;
  width: fit-content;
  margin: 2.5rem auto 0 auto;
  font-size: 1.1rem;
}

.test-promo-button:hover {
  background-color: #fff;
  color: #111;
}

/* --- Estilos para móviles --- */
@media (max-width: 960px) {
  .test-promo-container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    max-width: 98vw;
  }

  .test-promo-text h2 {
    font-size: 2rem;
  }

  .test-promo-image-link,
  .test-promo-image-link img {
    max-width: 90vw;
    min-width: 0;
  }
}


/* --- Estilos para la Página de Checkout (checkout.html) --- */

.checkout-main {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Navegación de pasos */
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: #888;
    flex-wrap: wrap;
}

.checkout-steps .step {
    padding: 8px 0; /* Menos padding vertical para el subrayado */
    border-radius: 0; /* Sin bordes redondeados */
    background-color: transparent; /* Fondo transparente */
    transition: color 0.3s ease, border-bottom 0.3s ease;
    font-weight: 500; /* Menos negrita por defecto */
    color: #888; /* Color de texto por defecto */
}

.checkout-steps .step.active {
    color: #007bff; /* Color azul para el paso activo */
    font-weight: 600; /* Más negrita para el paso activo */
    border-bottom: 2px solid #007bff; /* Subrayado azul */
}

/* Contenedor principal del checkout (dos columnas) */
.checkout-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.checkout-billing-section,
.checkout-summary-section {
    background-color: #ffffff; /* Fondo blanco para las secciones */
    padding: 30px;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Sombra suave */
    border: 1px solid #e0e0e0; /* Borde sutil */
}

.checkout-billing-section {
    flex: 2; /* Ocupa más espacio en pantallas grandes */
    min-width: 300px; /* Ancho mínimo para la columna de facturación */
}

.checkout-summary-section {
    flex: 1; /* Ocupa menos espacio */
    min-width: 280px; /* Ancho mínimo para el resumen */
    max-width: 400px; /* Ancho máximo para el resumen */
    position: sticky; /* Para que se quede fijo al scroll */
    top: 20px; /* Distancia desde el top */
    align-self: flex-start; /* Se alinea al inicio del contenedor flex */
}

/* Títulos de sección */
.checkout-billing-section h2,
.checkout-summary-section h2 {
    font-size: 2rem;
    color: #333; /* Color de texto oscuro */
    margin-bottom: 15px;
    font-weight: 700;
}

.checkout-billing-section p {
    color: #666; /* Color de texto más suave */
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* Estilos de formulario */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-row.two-columns > .form-group {
    flex: 1; /* Para que los grupos de formulario ocupen mitad de ancho */
}

.form-group {
    flex: 1;
    margin-bottom: 0; /* Ya manejado por form-row */
}

.form-group.full-width {
    flex: none; /* Deshabilita flex para que ocupe todo el ancho */
    width: 100%;
}

.form-group label {
    display: block;
    color: #555; /* Color de label oscuro */
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc; /* Borde claro */
    border-radius: 5px; /* Bordes más suaves */
    background-color: #fff; /* Fondo blanco */
    color: #333; /* Texto oscuro */
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #007bff; /* Borde azul al enfocar */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* Sombra suave azul */
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox groups */
.form-checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 15px;
}

.form-checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
    cursor: pointer;
}

.form-checkbox-group label {
    color: #333; /* Texto oscuro */
    font-size: 1rem;
    cursor: pointer;
}

/* Secciones ocultas */
.hidden-section {
    display: none;
    background-color: #f0f0f0; /* Fondo ligeramente diferente para secciones ocultas */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #e0e0e0; /* Borde sutil */
    animation: fadeIn 0.5s ease-out; /* Animación de aparición */
}

.hidden-section.active {
    display: block;
}

.hidden-section h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Animación de fade-in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navegación de botones al final del formulario */
.checkout-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* Borde sutil */
}

.btn-back {
    background-color: #ffffff; /* Fondo blanco */
    color: #007bff; /* Texto azul */
    border: 1px solid #007bff; /* Borde azul */
    padding: 10px 20px;
    border-radius: 5px; /* Bordes suaves */
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.btn-back:hover {
    background-color: #007bff;
    color: #fff;
}

.btn-continue {
    background-color: #007bff; /* Fondo azul */
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

.btn-continue:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
}

/* --- Estilos para el Resumen de Pedido --- */
.logo-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.logo-summary img {
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

.logo-summary span {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333; /* Texto oscuro */
}

.checkout-summary-section h2 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

#summary-products {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}

.summary-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd; /* Borde más claro */
}

.summary-item .item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.summary-item .item-name {
    color: #333; /* Texto oscuro */
    font-weight: 500;
    font-size: 0.95rem;
}

.summary-item .item-quantity {
    color: #777; /* Texto más suave */
    font-size: 0.85rem;
}

.summary-item .item-price {
    color: #333; /* Texto oscuro */
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.summary-totals {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #555; /* Texto más suave */
    font-size: 0.95rem;
}

.total-row span:first-child {
    font-weight: 500;
}

.total-row span:last-child {
    color: #333; /* Texto oscuro */
    font-weight: 600;
}

.summary-grand-total {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #007bff;
}

.summary-coupon {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.summary-coupon input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

.summary-coupon input[type="text"]::placeholder {
    color: #888;
}

.btn-coupon {
    background-color: #e0e0e0; /* Fondo gris claro */
    color: #555; /* Texto oscuro */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-coupon:hover {
    background-color: #d0d0d0;
    color: #333;
}

/* --- Media Queries para Responsividad (ajustadas al tema claro) --- */
@media (max-width: 768px) { /* Ajustado de 900px a 768px para tabletas */
    .checkout-container {
        flex-direction: column;
        align-items: center;
    }

    .checkout-billing-section,
    .checkout-summary-section {
        width: 100%;
        max-width: 500px; /* Limita el ancho máximo en móvil */
    }

    .checkout-summary-section {
        position: static;
        margin-top: 30px;
    }

    .checkout-navigation {
        flex-direction: column;
        gap: 15px;
    }

    .btn-back,
    .btn-continue {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) { /* Ajustado de 600px a 480px para móviles pequeños */
    .checkout-main {
        padding: 20px 15px;
    }

    .checkout-steps {
        font-size: 0.85rem;
        gap: 8px;
    }

    .checkout-billing-section h2,
    .checkout-summary-section h2 {
        font-size: 1.5rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row.two-columns > .form-group {
        width: 100%;
    }

    .form-group {
        margin-bottom: 15px;
    }
}

/* ========================================================== */
/* ESTILOS PARA LA PÁGINA DE CHECKOUT (VERSIÓN FINAL)         */
/* Reemplaza los estilos de checkout anteriores con estos.    */
/* ========================================================== */

.checkout-main {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- INDICADOR DE PASOS --- */
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 40px;
    font-size: 1rem;
    color: #888;
}
.checkout-steps .step {
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}
.checkout-steps .step.active {
    color: #007bff;
    font-weight: 600;
    border-bottom-color: #007bff;
}

/* --- CONTENEDOR PRINCIPAL Y COLUMNAS --- */
.checkout-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.checkout-form-container {
    flex: 2;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}
.checkout-summary-section {
    flex: 1;
    min-width: 320px;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    position: sticky;
    top: 100px; /* Ajusta según la altura de tu header */
}

/* --- VISIBILIDAD DE SECCIONES POR PASOS --- */
.checkout-form-section { display: none; }
.checkout-form-section.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- FORMULARIO Y TÍTULOS --- */
.checkout-form-container h2 { font-size: 1.8rem; font-weight: 700; color: #343a40; margin-bottom: 10px; }
.checkout-form-container p { color: #6c757d; margin-bottom: 30px; }
.form-row { display: flex; gap: 20px; }
.form-group { width: 100%; margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.9rem; font-weight: 500; color: #495057; margin-bottom: 8px; }
.form-group input, .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* --- SECCIÓN DE ENVÍO --- */
.checkout-shipping-options { display: flex; flex-direction: column; gap: 15px; }
.shipping-option {
    display: flex; align-items: center; padding: 15px; border: 1px solid #dee2e6; border-radius: 5px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.shipping-option:hover { border-color: #80bdff; }
.shipping-option:has(input:checked) { background-color: #e7f1ff; border-color: #007bff; }
.shipping-option input[type="radio"] { margin-right: 15px; width: 18px; height: 18px; accent-color: #007bff; }
.shipping-details { flex-grow: 1; }
.shipping-details h4 { margin: 0 0 5px; font-size: 1.1rem; color: #343a40; }
.shipping-details p { margin: 0; font-size: 0.9rem; color: #6c757d; }
.shipping-price { font-weight: 600; color: #343a40; }

/* --- BOTONES DE NAVEGACIÓN --- */
.checkout-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; }
.btn-back {
    background-color: #fff; color: #007bff; border: 1px solid #007bff; padding: 10px 20px; border-radius: 5px; font-weight: 600; text-decoration: none; transition: all 0.2s;
}
.btn-back:hover { background-color: #007bff; color: #fff; }
.btn-continue {
    background-color: #007bff; color: #fff; border: 1px solid #007bff; padding: 11px 30px; border-radius: 5px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-continue:hover { background-color: #0056b3; border-color: #0056b3; }

/* --- RESUMEN DE PEDIDO --- */
.logo-summary { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.logo-summary img { height: 40px; }
.logo-summary span { font-size: 1.5rem; font-weight: 700; color: #343a40; }
.checkout-summary-section h2 { font-size: 1.5rem; text-align: left; margin-bottom: 20px; }
#summary-products { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.summary-item { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.summary-item img { width: 50px; height: 50px; border-radius: 5px; border: 1px solid #e9ecef; }
.item-details { flex-grow: 1; }
.item-name { font-weight: 500; font-size: 0.9rem; color: #343a40; }
.item-quantity { font-size: 0.85rem; color: #6c757d; }
.item-price { font-weight: 600; white-space: nowrap; }
.summary-totals { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.total-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; }
.total-row span:last-child { font-weight: 600; }
.summary-grand-total { display: flex; justify-content: space-between; margin-top: 15px; font-size: 1.2rem; font-weight: 700; color: #007bff; }
.summary-coupon { display: flex; gap: 10px; }
.summary-coupon input { flex-grow: 1; padding: 10px; border: 1px solid #ced4da; border-radius: 5px; }
.btn-coupon { background-color: #f8f9fa; color: #343a40; border: 1px solid #ced4da; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: 500; transition: background-color 0.2s; }
.btn-coupon:hover { background-color: #e2e6ea; }

/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {
    .checkout-container { flex-direction: column-reverse; }
    .checkout-summary-section { position: static; width: 100%; min-width: unset; }
}
@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 0; }
    .form-group { margin-bottom: 20px; }
}


/* ========================================================== */
/* ESTILOS ADICIONALES PARA CHECKOUT (YAPE Y CHECKBOXES)      */
/* ========================================================== */

/* --- Estilos para los Checkboxes en Facturación --- */
.form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.form-checkbox-group label {
    margin-bottom: 0; /* Anular el margen por defecto de los labels */
    font-weight: 500;
    color: #495057;
}
.form-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}

/* --- Estilos para la Opción de Pago (Yape) --- */
.checkout-payment-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.payment-option:hover {
    border-color: #80bdff;
}
.payment-option:has(input:checked) {
    background-color: #e7f1ff;
    border-color: #007bff;
}
.payment-option input[type="radio"] {
    margin-right: 15px;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}
.payment-details {
    flex-grow: 1;
}
.payment-details h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
    color: #343a40;
}
.payment-details p {
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

/* --- Contenedor del QR (oculto por defecto) --- */
.qr-container {
    display: none; /* Oculto por defecto */
    padding: 20px;
    margin-top: 15px;
    border: 1px dashed #ced4da;
    border-radius: 5px;
    text-align: center;
    background-color: #f8f9fa;
}
.qr-container.active {
    display: block; /* Se muestra cuando el input está :checked */
    animation: fadeIn 0.5s ease;
}
.qr-container p {
    color: #343a40;
    margin-bottom: 15px;
}
.qr-placeholder {
    width: 180px;
    height: 180px;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
    color: #6c757d;
    font-weight: 500;
}


/* ========================================================== */
/* ESTILOS ADICIONALES PARA CHECKOUT (CONFIRMACIÓN)           */
/* ========================================================== */

/* --- Contenedor de campos ocultos en facturación --- */
.hidden-fields {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    animation: fadeIn 0.5s ease;
}
.hidden-fields h4 {
    font-size: 1.2rem;
    color: #343a40;
    margin-bottom: 15px;
}

/* --- Estilos para la sección de Confirmación --- */
.confirmation-summary-block {
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 20px;
}
.confirmation-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}
.confirmation-summary-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #343a40;
}
.edit-btn {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}
.confirmation-summary-content {
    color: #6c757d;
    line-height: 1.6;
}
.payment-confirm {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qr-placeholder-small {
    width: 60px;
    height: 60px;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.8rem;
}

/* Textarea para información adicional */
.form-group textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical;
}

/* Links en Términos y Condiciones */
.form-checkbox-group a {
    color: #007bff;
    text-decoration: none;
}
.form-checkbox-group a:hover {
    text-decoration: underline;
}


/* ======================================= */
/* ESTILOS PARA EL TEST DE SKINCARE        */
/* ======================================= */

.test-skincare-main {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 80vh;
}

.test-container {
    max-width: 700px;
    width: 100%;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden; /* Para las animaciones */
}

/* Estilos de los pasos (pantallas) */
.test-step {
    display: none;
    animation: fadeOut 0.4s ease-out forwards;
}

.test-step.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Títulos y textos */
.test-container h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.test-container h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 25px;
}

.test-container p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Formulario de nombre */
.form-group-test {
    margin: 30px 0;
}
.form-group-test label {
    display: block;
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}
.form-group-test input {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}
.form-group-test input:focus {
    outline: none;
    border-color: #a2c5a2;
    box-shadow: 0 0 0 3px rgba(162, 197, 162, 0.3);
}

/* Botones principales */
.test-button {
    background-color: #2e2e2e;
    color: #fff;
    border: none;
    padding: 14px 35px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
}

.test-button:hover {
    background-color: #4a4a4a;
    transform: translateY(-2px);
}
.test-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.test-button.secondary {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}
.test-button.secondary:hover {
    background-color: #e0e0e0;
}

/* Barra de progreso */
.progress-container {
    margin-bottom: 30px;
}
.progress-bar {
    width: 0%;
    height: 8px;
    background-color: #97b397; /* Verde suave */
    border-radius: 4px;
    transition: width 0.4s ease-in-out;
}
.progress-text {
    font-size: 0.9rem;
    color: #888;
    margin-top: 8px;
    display: block;
}

/* Grid de respuestas */
.answers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.answer-btn {
    width: 100%;
    padding: 15px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
}

.answer-btn:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
    transform: scale(1.02);
}

/* Resultados */
#result-skin-type {
    background-color: #e8f0e8; /* Verde muy pálido */
    color: #3a5a3a;
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.recommendation-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-left: 5px solid #97b397; /* Verde suave */
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    margin-bottom: 25px;
}
.recommendation-box h4 {
    margin-top: 0;
    color: #333;
}
.recommendation-box p {
    margin-bottom: 0;
}

.motivational-message {
    font-style: italic;
    color: #777;
}

.result-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Responsividad */
@media (min-width: 600px) {
    .answers-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .test-container {
        padding: 20px;
    }
    .test-container h1 {
        font-size: 1.8rem;
    }
}

/* ======================================= */
/* AJUSTES PARA NUEVO TEST DE SKINCARE     */
/* ======================================= */

/* Contenedor para el botón de Anterior */
.quiz-navigation {
    display: flex;
    justify-content: flex-start; /* Alinea el botón a la izquierda */
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#prev-btn {
    display: none; /* Oculto por defecto, JS lo mostrará */
}

/* Estilo para la respuesta seleccionada (al retroceder) */
.answer-btn.selected {
    background-color: #e7f1ff;
    border-color: #007bff;
    font-weight: 600;
}



/* ======================================= */

/* ================================================== */
/* ESTILOS PARA LA SECCIÓN DE COMENTARIOS */
/* ================================================== */

.comments-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 30px;
    background-color: #f0f0f0; /* Fondo claro para destacar en página-clara */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #111; /* Color de texto oscuro */
}

.comments-container h2,
.comments-container h3 {
    color: #111;
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.comments-separator {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 40px 0;
}

/* Estilos del formulario de comentarios */
.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; 
}

.comment-form textarea {
    resize: vertical;
    min-height: 100px;
}

.comment-submit-btn {
    background-color: #111;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.comment-submit-btn:hover {
    background-color: #555;
}

#comment-message {
    color: green;
    font-weight: bold;
    margin-top: 15px;
}

.hidden {
    display: none;
}

/* Estilos de los comentarios individuales */
.comment-item {
    border-bottom: 1px dashed #ddd;
    padding: 15px 0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 5px;
}

.comment-author {
    font-weight: bold;
    color: #111;
}

.comment-content {
    font-size: 1rem;
    line-height: 1.5;
}

.loading-message {
    text-align: center;
    color: #777;
    font-style: italic;
}

/* Responsive */
@media (max-width: 850px) {
    .comments-container {
        margin: 40px 20px;
        padding: 20px;
    }
}