:root {
  --color-fondo: #f8f5f0; /* crema cálido */
  --color-primario: #2E7D32; /* verde salvia */
  --color-primario-hover: #6a7b6c;
  --color-acento: #c2a878; /* dorado suave */
  --color-texto: #4b3f34; /* marrón tierra */
  --color-blanco: #ffffff;
  --color-negro: #000000;
  --color-navbar: #2E7D32;
  --color-footer: #4b3f34;
  --color-whatsapp: #2E7D32;
  --color-whatsapp-hover: #1ebe57;
}

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

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.6;
}

/* Títulos con serif elegante */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* ocupa todo el espacio disponible y empuja el footer abajo */
}


/* Navbar */
/* Estilos generales */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-navbar);
    padding: 0.8rem 1.5rem;
    position: relative;
    z-index: 1000;
}

.logo img {
    height: 50px;
}

/* Menú escritorio */
nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

nav ul li a {
    color: var(--color-blanco);
    text-decoration: none;
    
}

/* Botón hamburguesa (oculto en escritorio) */
.menu-toggle {
    display: none;
    font-size: 2rem;
    color: var(--color-blanco);
    cursor: pointer;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    /* Mostrar botón hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* Menú oculto por defecto */
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color-navbar);
        width: 100%;
        display: none;
    }

    nav.active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav ul li {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    nav ul li a {
        display: block;
        padding: 1rem;
        color: var(--color-blanco);
    }

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


/* Hero */
.hero {
  position: relative;
  background: url('../img/orellanas.png') center/cover no-repeat;
  color: var(--color-blanco);
  text-align: center;
  padding: 5rem 2rem;
  overflow: hidden; /* asegura que la capa no se salga */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* capa oscura, ajusta opacidad aquí */
  z-index: 1;
}

/* Para que el contenido esté encima de la capa */
.hero-content {
  position: relative;
  z-index: 2;
}

.btn-principal {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  background: var(--color-primario);
  color: var(--color-blanco);
  text-decoration: none;
  border-radius: 5px;
}

.btn-principal:hover {
  background: var(--color-primario-hover);
}

/* Sección Historia */
.historia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: auto;
}

/* Texto */
.historia .texto {
  flex: 1;
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s ease forwards;
}

.historia .texto h2 {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-primario);
}

.historia .texto p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Imagen */
.historia .imagen {
  flex: 1;
  text-align: right;
  opacity: 0;
  transform: translateX(50px);
  animation: fadeInRight 1s ease forwards;
  animation-delay: 0.3s;
}

.historia .imagen img {
  max-width: 80%;
  height: auto;
  border-radius: 10px;
}

/* Animaciones Desktop */
@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación vertical para móvil */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .historia {
    flex-direction: column;
    text-align: center;
  }

  /* Ajusta animación texto e imagen para vertical + menos desplazamiento */
  .historia .texto {
    transform: translateY(30px);
    animation-name: fadeInUp;
    animation-delay: 0s;
  }

  .historia .imagen {
    text-align: center;
    transform: translateY(30px);
    animation-name: fadeInUp;
    animation-delay: 0.3s;
  }
}


/* Beneficios */
.beneficios {
  padding: 2rem;
  background: var(--color-acento);
  color: var(--color-texto);
  text-align: center;
}

.grid-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Cada beneficio con animación inicial oculta */
.beneficio {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(0.9);
  /* Eliminamos animación automática para controlar con JS */
  /* animation: fadeZoom 0.6s ease forwards; */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.6s ease;
}

/* Animación activa al agregar clase */
.beneficio.animate {
  animation: fadeZoom 0.6s ease forwards;
}

/* Animación en cascada con delays */
.beneficio.animate:nth-child(1) {
  animation-delay: 0.1s;
}
.beneficio.animate:nth-child(2) {
  animation-delay: 0.3s;
}
.beneficio.animate:nth-child(3) {
  animation-delay: 0.5s;
}
.beneficio.animate:nth-child(4) {
  animation-delay: 0.7s;
}

/* Efecto hover */
.beneficio:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

/* Keyframes de la animación */
@keyframes fadeZoom {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Catalogo */
.catalogo {
  padding: 3rem 2rem;
  background: var(--color-fondo);
  text-align: center;
}

.catalogo h2 {
  font-size: 2rem;
  color: var(--color-primario);
  margin-bottom: 2rem;
}

/* Cuadrícula responsiva */
.grid-catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Tarjetas de producto */
.producto {
  background: var(--color-blanco);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.producto img {
  width: 100%;
  height: 250px; /* todas las imágenes tendrán la misma altura */
  border-radius: 8px;
  margin-bottom: 1rem;
  object-fit: cover;
}

.producto h3 {
  font-size: 1.2rem;
  color: var(--color-texto);
  margin-bottom: 1rem;
  text-align: center;
}

/* Botón */
.btn-comprar {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  background: var(--color-primario);
  color: var(--color-blanco);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
  text-align: center;
}

.btn-comprar:hover {
  background: var(--color-primario-hover);
  transform: scale(1.05);
}

/* Hover de tarjeta */
.producto:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}



/* Ajustes para móviles */
@media (max-width: 768px) {
  .catalogo {
    padding: 2rem 1rem;
  }

  .producto {
    padding: 1rem;
  }

  .producto h3 {
    font-size: 1.1rem;
  }

  .producto {
  /* opacity: 0;  <- eliminar */
  /* transform: translateY(30px); <- eliminar */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.producto.animate {
  opacity: 1;
  transform: translateY(0);
}


  .btn-comprar {
    width: 100%;
    padding: 0.8rem;
  }
}

.testimonios {
    padding: 3rem 2rem;
    background: var(--color-acento);
    text-align: center;
}

.testimonios h2,
.beneficios h2 {
  font-size: 2.5rem;
  color: var(--color-texto);
  margin-bottom: 2rem;
  letter-spacing: 1px;
}


/* Grid de testimonios */
.grid-testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

/* Tarjeta testimonial */
.testimonio {
    background: var(--color-blanco);
    padding: 2rem 1.5rem 2.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: 
      transform 0.3s ease, 
      box-shadow 0.3s ease, 
      opacity 0.6s ease, 
      transform 0.6s ease; /* agregado para animación */

    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Animación - estado inicial oculto y abajo */
    opacity: 0;
    transform: translateY(30px);
}

/* Activar animación */
.testimonio.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Hover solo en desktop para levantar */
.testimonio:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Imagen redonda más grande */
.testimonio img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 4px solid var(--color-acento);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.testimonio:hover img {
    transform: scale(1.1);
}

/* Texto testimonial */
.testimonio p {
    font-size: 1.15rem;
    font-style: italic;
    color: var(--color-negro);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Nombre o iniciales */
.testimonio span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-texto);
}

/* Responsive para móviles */
@media (max-width: 480px) {
    .testimonio img {
        width: 100px;
        height: 100px;
    }

    .grid-testimonios {
        grid-template-columns: 1fr;
    }
}


/* Contacto rápido */
.contacto-rapido {
    padding: 2rem;
    text-align: center;
    background: var(--color-fondo);
    color: var(--color-blanco);
}

.contacto-rapido h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--color-texto);
}

.contacto-rapido p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-texto);
}

.contacto-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contacto-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.contacto-btn i {
    font-size: 1.3rem;
}

/* Colores por red social */
.whatsapp {
    background-color: var(--color-whatsapp);
}
.instagram {
    background-color: #E1306C;
}
.facebook {
    background-color: #1877F2;
}

.contacto-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.horarios {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Responsivo */
@media (max-width: 600px) {
    .contacto-grid {
        flex-direction: column;
        align-items: center;
    }
}


/* Huerto a tu mesa */
.huerto-mesa {
    padding: 2rem;
    text-align: center;
}

.huerto-mesa h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--color-primario);
}

/* Proceso: layout y animaciones */
.proceso {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.proceso div {
    flex: 1 1 200px;
    max-width: 250px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

.proceso div:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.proceso img {
    width: 100%;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0.5rem;
    object-fit: cover;
    height: 280px;
}

.proceso p {
    margin: 0.5rem 0 1rem;
    font-weight: 600;
    color: var(--color-primario);
}

/* Sellos: chips más vivos con hover */
.sellos {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.sellos span {
    background: #eee;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primario);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.sellos span:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}

/* Animación entrada fade-up simple */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplica la animación a cada paso con delay */
.proceso div {
    opacity: 0;
    animation: fadeUp 0.6s forwards;
}

.proceso div:nth-child(1) {
    animation-delay: 0.2s;
}
.proceso div:nth-child(2) {
    animation-delay: 0.4s;
}
.proceso div:nth-child(3) {
    animation-delay: 0.6s;
}

/* Responsivo */
@media (max-width: 768px) {
    .proceso {
        flex-direction: column;
        align-items: center;
    }
    
       .proceso div {
        max-width: 320px;
        overflow: visible; /* Asegura que no corte el texto */
    }

    .proceso img {
        height: auto; /* La imagen se adapta */
    }
}

/* --- GRID DE RECETARIOS --- */
.grid-recetas {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 2rem 0;
}

/* CARD */
.receta {
  background: var(--color-blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding-bottom: 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.receta:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* IMAGEN */
.receta img {
  width: 100%;
  height: 200px;
  object-fit: cover;     /* <- evita la deformación */
  display: block;
}

/* TÍTULO */
.receta h3 {
  font-size: 1.3rem;
  color: var(--color-texto);
  margin: 1rem 0;
}

.recetas h2 {
  font-size: 1.5rem;
  color: var(--color-texto);
  margin-bottom: 1rem;
  text-align: center;
}

/* BOTÓN */
.btn-comprar {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--color-primario);
  color: white;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.btn-comprar:hover {
  background: var(--color-primario-hover);
}




/* Footer */
.footer {
  background: var(--color-footer);
  color: var(--color-blanco);
  text-align: center;
  padding: 1rem;
}