/*
==============================================
Paso 1: Definir la nueva paleta de colores y fuentes
==============================================
*/
:root {
  --color-primario: #3498db; /* Azul cielo amigable */
  --color-secundario: #f1c40f; /* Amarillo sol */
  --color-cta: #e67e22; /* Naranja zanahoria para botones */
  --color-texto: #34495e; /* Un gris azulado oscuro, más suave que el negro */
  --color-fondo: #ecf0f1; /* Un gris muy claro para el fondo */
  --color-blanco: #ffffff;

  /* Fuentes importadas de Google Fonts */
  --fuente-titulos: "Fredoka One", cursive;
  --fuente-cuerpo: "Nunito", sans-serif;

  /* Sombra para dar profundidad */
  --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.1);
  --sombra-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/*
==============================================
Paso 2: Estilos generales y mejoras
==============================================
*/
body {
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  margin: 0;
  line-height: 1.7;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* Redondeamos las esquinas de todas las imágenes */
}

/*
==============================================
Paso 3: Header y Navegación con efectos
==============================================
*/
header {
  background: var(--color-blanco);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--sombra-suave);
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  max-height: 60px;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 25px;
}
nav a {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-texto);
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s ease;
}
/* Efecto de línea bajo el link al pasar el ratón */
nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-secundario);
  transition: width 0.3s ease;
}
nav a:hover {
  color: var(--color-primario);
}
nav a:hover::after {
  width: 100%;
}

/*
==============================================
Paso 4: Botones y CTAs animados
==============================================
*/
.cta-principal,
.cta-secundario,
.cta-carrito {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 50px; /* Botones redondeados, más amigables */
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}
.cta-principal {
  background-color: var(--color-cta);
  color: var(--color-blanco);
}
.cta-secundario {
  background-color: var(--color-blanco);
  color: var(--color-primario);
  border: 2px solid var(--color-primario);
}
.cta-carrito {
  background-color: var(--color-primario);
  color: var(--color-blanco);
}
/* La magia del hover: el botón se agranda y la sombra cambia */
.cta-principal:hover,
.cta-secundario:hover,
.cta-carrito:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

/*
==============================================
Paso 5: Animaciones para el Catálogo y Secciones
==============================================
*/

/* Definimos la animación de "aparecer hacia arriba" */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clase que aplicaremos a los elementos que queremos animar */
.animar-al-scroll {
  opacity: 0; /* Inicialmente invisible */
}

/* Cuando JavaScript añada la clase 'visible', se activará la animación */
.visible {
  animation: fadeInUp 0.8s ease forwards;
}

/* Tarjeta de Producto rediseñada y con animación */
.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}
.producto-card {
  background: var(--color-blanco);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--sombra-suave);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.producto-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-hover);
}
.producto-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 15px 15px 0 0; /* Redondeamos solo esquinas superiores */
}
.producto-card h3 {
  margin: 20px 10px 10px 10px;
  font-size: 22px;
}
.producto-card p {
  padding: 0 20px;
  margin-bottom: 20px;
}
/* Contenedor para los botones dentro de la tarjeta */
.producto-card .acciones {
  padding: 0 20px 25px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
==============================================
Paso 6: Mejoras en Formularios
==============================================
*/
.formulario-cotizacion input,
.formulario-cotizacion textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box; /* Importante para que el padding no afecte el ancho */
}
/* Efecto al hacer clic en un campo del formulario */
.formulario-cotizacion input:focus,
.formulario-cotizacion textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

/* Otros estilos (hero, razones, etc.) se benefician de las mejoras generales */
.hero {
  background: linear-gradient(
    135deg,
    var(--color-primario),
    #8e44ad
  ); /* Un gradiente divertido */
  padding: 100px 0;
  text-align: center;
  color: var(--color-blanco);
}
.hero h1 {
  font-size: 56px;
  margin-bottom: 10px;
  color: var(--color-blanco);
}

.razones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.razon-item {
  background: var(--color-blanco);
  padding: 30px;
  border-radius: 15px;
  box-shadow: var(--sombra-suave);
  text-align: center;
}

/*
==============================================
Paso 7: Diseño Adaptable (Responsive) sin cambios
==============================================
*/
@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    gap: 15px;
  }
  nav ul {
    /*
==============================================
ESTILO EXPLOSIVO Y DIVERTIDO 🎈
==============================================
*/
    :root {
      --color-primario: #00c4cc; /* Turquesa Veraniego */
      --color-secundario: #ffc600; /* Amarillo Sol */
      --color-cta: #fa348c; /* Magenta Eléctrico */
      --color-texto: #34495e;
      --color-fondo: #f4f7f6;
      --color-blanco: #ffffff;

      --fuente-titulos: "Fredoka One", cursive;
      --fuente-cuerpo: "Nunito", sans-serif;

      --sombra-globo: 0 10px 30px rgba(0, 0, 0, 0.12);
      --sombra-globo-hover: 0 15px 35px rgba(0, 0, 0, 0.2);
    }

    /*
==============================================
Animaciones "Wobble" (tambaleo) y "PopIn"
==============================================
*/
    @keyframes wobble {
      0%,
      100% {
        transform: scale(1) rotate(0);
      }
      25% {
        transform: scale(1.05) rotate(-3deg);
      }
      75% {
        transform: scale(1.05) rotate(3deg);
      }
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(0.5);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .visible {
      animation: popIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* --- Estilos Generales --- */
    body {
      font-family: var(--fuente-cuerpo);
      color: var(--color-texto);
      background-color: var(--color-fondo);
      margin: 0;
      line-height: 1.7;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    h1,
    h2,
    h3 {
      font-family: var(--fuente-titulos);
    }
    h1 {
      color: var(--color-cta);
      text-shadow: 2px 2px 0 var(--color-secundario);
      font-size: 48px;
      text-align: center;
    }
    .page-container {
      padding-top: 40px;
      padding-bottom: 60px;
    }
    .subtitulo-pagina {
      font-size: 20px;
      color: #666;
      max-width: 600px;
      margin: -10px auto 40px auto;
      text-align: center;
    }

    /* --- Header y Navegación --- */
    header {
      background: var(--color-blanco);
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }
    header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      max-height: 50px;
    }
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      gap: 20px;
    }
    nav a {
      text-decoration: none;
      color: var(--color-texto);
      font-weight: 700;
    }

    /* --- Botones súper redondeados --- */
    .cta-principal,
    .cta-secundario,
    .cta-carrito,
    button {
      font-family: var(--fuente-cuerpo);
      display: inline-block;
      padding: 15px 30px;
      border-radius: 50px;
      font-weight: 700;
      text-align: center;
      border: none;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-transform: uppercase;
      font-size: 16px;
      text-decoration: none;
    }
    .cta-principal {
      background: var(--color-cta);
      color: var(--color-blanco);
    }
    .cta-principal:hover {
      animation: wobble 0.5s ease;
      box-shadow: var(--sombra-globo-hover);
    }
    .cta-secundario {
      background-color: #eee;
      color: var(--color-texto);
    }
    .cta-carrito {
      background-color: var(--color-primario);
      color: var(--color-blanco);
    }
    .cta-grande {
      padding: 20px 40px;
      font-size: 18px;
      width: 100%;
      box-sizing: border-box;
    }

    /* --- Tarjeta de Producto Estilo Globo --- */
    .catalogo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 40px;
    }
    .producto-card {
      background: var(--color-blanco);
      border-radius: 30px;
      overflow: hidden;
      text-align: center;
      box-shadow: var(--sombra-globo);
      transition: all 0.3s ease;
      opacity: 0;
    }
    .producto-card:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: var(--sombra-globo-hover);
    }
    .producto-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 30px 30px 0 0;
      border-bottom: 5px solid var(--color-secundario);
    }
    .producto-card h3 {
      margin: 20px 10px 10px 10px;
      font-size: 24px;
      color: var(--color-primario);
    }
    .producto-card p {
      padding: 0 20px;
      margin-bottom: 20px;
    }
    .producto-card .acciones {
      padding: 0 20px 30px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* --- Estilos Páginas Interiores --- */
    .text-center {
      text-align: center;
    }
    .contenido-simple h2,
    .faq h3,
    .info-contacto h3 {
      color: var(--color-primario);
    }
    .proceso-pasos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
    }
    .paso-item {
      background: var(--color-blanco);
      padding: 30px;
      border-radius: 30px;
      box-shadow: var(--sombra-globo);
      text-align: center;
      opacity: 0;
    }
    .paso-numero {
      width: 60px;
      height: 60px;
      line-height: 60px;
      border-radius: 50%;
      background: var(--color-cta);
      color: white;
      font-family: var(--fuente-titulos);
      font-size: 30px;
      margin: -60px auto 20px auto;
    }
    .producto-detalle {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }
    @media (min-width: 768px) {
      .producto-detalle {
        grid-template-columns: 1fr 1fr;
      }
    }
    .descripcion-producto {
      font-size: 18px;
    }
    .datos-clave {
      list-style: none;
      padding: 0;
    }
    .datos-clave li {
      background: #e9e9e9;
      margin-bottom: 8px;
      padding: 10px;
      border-radius: 10px;
    }
    .galeria-thumbs {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    .galeria-thumbs img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 10px;
      border: 2px solid #ddd;
      cursor: pointer;
    }
    .contacto-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }
    @media (min-width: 768px) {
      .contacto-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    .faq-item {
      background: var(--color-blanco);
      padding: 20px;
      border-radius: 20px;
      margin-bottom: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    .item-cotizacion {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .item-cotizacion img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 15px;
    }
    .item-cotizacion h4 {
      flex-grow: 1;
      margin: 0;
    }
    .formulario-cotizacion {
      max-width: 600px;
      margin: 40px auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .formulario-cotizacion label {
      font-weight: bold;
    }
    .formulario-cotizacion input,
    .formulario-cotizacion textarea {
      width: 100%;
      padding: 15px;
      border: 2px solid #ddd;
      border-radius: 15px;
      transition: all 0.3s ease;
      box-sizing: border-box;
    }
    .formulario-cotizacion input:focus,
    .formulario-cotizacion textarea:focus {
      outline: none;
      border-color: var(--color-primario);
      box-shadow: 0 0 10px rgba(0, 196, 204, 0.3);
    }

    /* --- Filtros --- */
    .filtros {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-bottom: 40px;
    }
    .filtros select {
      padding: 15px;
      border-radius: 50px;
      border: 2px solid #ddd;
      font-weight: 700;
      font-family: var(--fuente-cuerpo);
    }
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero h1 {
    font-size: 38px;
  }
}