body {
      font-family: 'Playfair Display', serif;
      margin: 0;
      background-color: #fdf6f0;
      color: #333;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif; /* Títulos con la fuente */
    }

    p, button {
      font-family: 'Playfair Display', serif;  /* Opcional: cuerpo en sans-serif */
    }

    header {
  background-color: #347921;
  color: white;
  text-align: center;
  padding: 30px 20px;
  
  /* Comportamiento para MÓVIL (Por defecto) */
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center;    /* Centra el logo y los textos */
  justify-content: center;
  gap: 15px;
  position: relative;     /* Necesario para el ajuste de escritorio */
}

.titulos-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

header h1 { margin: 0; font-size: 2rem; }
header p { margin: 0; font-size: 1.1rem; }

.logo {
  width: 90px;
  height: auto;
  position: static; /* En móvil se comporta como un elemento normal centrado */
  border-radius: 50%;
}

/* ===== AJUSTE PARA ESCRITORIO (Pantallas de más de 768px) ===== */
@media (min-width: 768px) {
  header {
    padding: 40px 20px;
    /* Mantenemos flex para centrar el bloque de texto en el medio */
  }

  .logo {
    /* Movemos el logo a la IZQUIERDA solo en pantallas grandes */
    position: absolute; 
    left: 40px;
    top: 50%;
    transform: translateY(-50%); /* Lo centra perfectamente de arriba a abajo */
    width: 110px;
  }
}
/* ===== BOTÓN DEL HEADER ===== */
.boton-header {
  display: inline-block; /* Para que se comporte como botón */
  margin-top: 15px;      /* Separación del texto de arriba */
  padding: 10px 25px;
  background-color: #ffd54f; /* El color dorado de tu paleta */
  color: #333;               /* Letra oscura para buen contraste */
  text-decoration: none;     /* Quita el subrayado del enlace */
  border-radius: 6px;        /* Bordes redondeados */
  font-weight: bold;
  font-family: 'Playfair Display', serif;
  transition: all 0.3s ease; /* Suaviza el efecto hover */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Sombra suave */
}

/* Efecto al pasar el mouse por encima */
.boton-header:hover {
  background-color: #ffca28; /* Un dorado un poco más oscuro */
  transform: scale(1.05);    /* Crece un poquito */
  color: black;
}
  

/* ===== NUESTRA HISTORIA ===== */
.nuestra-historia {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 60px 20px;
  background-color: #fdf6e3;
}

.texto-historia {
  max-width: 550px;
}

.texto-historia h2 {
  color: #5d4037;
  font-size: 2em;
  margin-bottom: 20px;
  border-left: 5px solid #8bc34a;
  padding-left: 10px;
}

.texto-historia p {
  color: #4e342e;
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.imagen-historia img {
  width: 380px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.4s ease;
}

.imagen-historia img:hover {
  transform: scale(1.05);
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
  .nuestra-historia {
    flex-direction: column-reverse;
    text-align: center;
  }

  .texto-historia h2 {
    border-left: none;
    border-bottom: 4px solid #8bc34a;
    display: inline-block;
    padding-left: 0;
    padding-bottom: 5px;
  }
}


    /* ====== SECCIONES ====== */
    main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      padding: 30px;
    }

    .hero {
      background: url("https://picsum.photos/1200/500?grayscale") center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 100px 20px;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin: 0;
    }

    .hero p {
      font-size: 1.2rem;
      margin: 10px 0 20px;
    }

    .hero button {
      background-color: #ffd54f;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
    }

    .hero button:hover {
      background-color: #ffca28;
    }

/* ===== SOBRE NOSOTROS ===== */
.sobre-nosotros {
  background-color: #fff8e1;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sobre-nosotros-contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
}

.sobre-nosotros img {
  width: 320px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}
.fade {
  animation: aparecer 1s ease-in-out;
}

@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sobre-nosotros .texto {
  max-width: 500px;
}

.sobre-nosotros h2 {
  color: #4e342e;
  margin-bottom: 15px;
  font-size: 2rem;
}

.sobre-nosotros p {
  color: #3e2723;
  font-size: 1.1rem;
  line-height: 1.6;
}

    .card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.05);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card h2 {
      margin: 15px 0;
      font-size: 1.3rem;
      color: #347921;
    }

    .card p {
      padding: 0 15px 20px;
      font-size: 0.95rem;
    }
    /* ===== EN TU ARCHIVO styles.css ===== */

/* Busca este bloque y REEMPLÁZALO con el siguiente código: */
.card button {
  margin: 15px;
  padding: 10px 25px; /* Ajusté un poco el padding para que se vea mejor */
  border: none;
  background-color: #ffd54f; /* CAMBIO: Ahora es dorado */
  color: #333;               /* CAMBIO: Letra oscura para contraste */
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;          /* Un poquito más grande */
  font-weight: bold;        /* Negrita igual que el del header */
  font-family: 'Playfair Display', serif; /* Aseguramos la fuente */
  transition: all 0.3s ease; /* Transición suave para todo */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Una sombrita suave */
}

.card button a {
  text-decoration: none;
  color: inherit; /* Hereda el color oscuro del botón */
  display: block; /* Hace que todo el botón sea cliqueable */
}

.card button:hover {
  background-color: #ffca28; /* Dorado un poco más oscuro al pasar el mouse */
  transform: scale(1.05);    /* Efecto de crecer un poquito */
  color: black;
}

/* ===== FOOTER ===== */
.footer {
  background-color: #347921;
  color: white;
  text-align: center;
  padding: 25px 15px;
  font-size: 1rem;
}

.footer .social a {
  color: #ffd54f;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.footer .social a:hover {
  color: white;
}

/* ===== Carrusel/tentaciones.html ===== */
/* ===== ESTILOS DEL CARRUSEL ===== */
.contenedor-carrusel {
  position: relative;
  width: 90%;
  max-width: 800px; /* Ancho máximo para que no se vea gigante */
  margin: 40px auto; /* Centrado en la página */
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.carrusel {
  width: 100%;
  height: 400px; /* Altura fija para uniformidad */
  position: relative;
}

.carrusel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Animación suave */
  height: 100%;
}

.carrusel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.carrusel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarse */
  display: block;
}

/* Texto sobre la imagen (opcional) */
.texto-slide {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(52, 121, 33, 0.8); /* Verde semi-transparente */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
}

/* Flechas de navegación */
.carrusel-boton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffd54f; /* Color dorado */
  border: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s;
}

.carrusel-boton:hover {
  background-color: rgba(52, 121, 33, 0.9); /* Verde al pasar el mouse */
  color: white;
}

.boton-prev { left: 15px; }
.boton-next { right: 15px; }

/* Ajuste para móviles */
@media (max-width: 768px) {
  .carrusel { height: 250px; } /* Más bajito en celulares */
}