/*ESTILO WEB*/
body {
    padding: 0;
    margin: 0;
    background: #F6F5EE;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1,
h2,
h3,
.display-5 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    /* Playfair Display la cargas con 700 y 900 */
}

.color-web {
    color: #B16278;
}

.titulos-color {
    color: #B16278;
}

.lineas {
    background-color: #B16278;
}

.button-web {
    background-color: #B16278;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 1em;
    width: 200px;
    /* define un ancho fijo */
    margin: 0 auto;
    /* centrado horizontal */
    border-radius: 5px;
}

.button-web-2 {
    background-color: #B16278;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 1em;
    width: 300px;
    /* define un ancho fijo */
    margin: 0 auto;
    /* centrado horizontal */
    border-radius: 5px;
    cursor: pointer;
}

a div.button-web {
    text-decoration: none;
}

/*PRINCIPAL*/

/* Hero background + overlay + alturas responsivas */
.hero {
    position: relative;
    min-height: 75vh;
    overflow: hidden;
}

/* 🎥 Vídeo de fondo */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 5%;
    z-index: 0;
}

/* 🔹 Capa de oscurecimiento encima del vídeo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .5) 100%);
    z-index: 1;
}

/* Contenido del hero */
.hero .container {
    position: relative;
    z-index: 2;
}

/*FIN PRINCIPAL*/



/* PRODUCTOS DESTACADOS*/
.galeria-1 {
    width: 80%;
}

/* --- TARJETAS SIMPLES CON IMAGEN + TÍTULO --- */
.card-simple {

    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Contenedor de imagen */
.img-box {
    width: 100%;
    aspect-ratio: 3 / 3;

    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

/* Título */
.card-simple h3 {
    color: #333;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

/*FIN PRODUCTOS DESTACADOS*/

/*CARD1*/

.card1 {
    background: white;
    padding: 30px;
    border-radius: 10px;
}


.imagen-caja {
    width: 100%;
    height: 50%;
    /* ajusta la altura que quieras mostrar */
    overflow: hidden;
    /* oculta lo que se salga */

}

/* 🔹 Imagen dentro del contenedor */
.imagen-caja img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* rellena y recorta sin deformar */
    object-position: center;
    /* centra el recorte */
    transition: transform 0.3s ease;
    /* opcional: efecto al pasar el ratón */
}



.ancho-cards1 {
    width: 80%;
}

/*CARD1*/

/*NEWSLETTER*/
.newsletter {
  /* menos padding en móvil */
  padding: 3rem 0 4rem 0 !important;
}

.formulario1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  max-width: 640px;    /* limita el ancho en desktop */
  margin: 0 auto;
  padding: 0 1rem;     /* respiración lateral en móvil */
}

.formulario1 > * {
  text-align: center;
}

/* INPUT correo: mobile-first = ocupa todo el ancho disponible */
.formulario1 input.form-correo {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;  /* evita que el padding aumente el ancho total */
  min-width: 0;            /* previene overflow en flex */
}

/* Focus */
.formulario1 input.form-correo:focus {
  border-color: #B16278;
  outline: none;
  box-shadow: 0 0 6px rgba(177, 98, 120, 0.5);
}

/* Checkbox en su propia línea, centrado */
.checkbox-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 100%;
  flex-wrap: wrap;
}

/* Botón: sin ancho fijo */
.formulario1 button,
.button-web {
  background: black;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
  width: auto;       /* clave: evita 500px fijos */
  max-width: 100%;
}
.checkbox-linea {
  display: flex;
  align-items: center;      /* alinea checkbox y texto en la misma línea */
  justify-content: center;  /* centra el conjunto en el formulario */
  gap: 0.6rem;              /* espacio entre ambos */
  line-height: 1.2;
}

.checkbox-linea input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #B16278;
  transform: translateY(-1px); /* 🔥 ajusta visualmente el alineado */
  cursor: pointer;
  margin-bottom:25px;
}

.checkbox-linea span {
  font-size: 1rem;
  color: #000;
  line-height: 1.2;
}
/* ——— Layout en pantallas medianas/grandes ——— */
@media (min-width: 768px) {
  .newsletter {
    padding: 4.5rem 0 6rem 0 !important;
  }

  /* Input y botón en la misma línea */
  .formulario1 input.form-correo {
    flex: 1 1 420px;  /* crece y ocupa */
    max-width: 520px;
  }

  .formulario1 button,
  .button-web {
    flex: 0 0 auto;
  }
}
/*FIN NEWSLETTER*/


/*GALERIA CUADRADOS*/
.gallery-section {
    background-color: #F6F5EE;
    padding-bottom: 1rem;
}

.gallery-box {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    /* 👈 más ancho que alto (antes era 1/1) */
    overflow: hidden;
    border-radius: 10px;
}

.gallery-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.gallery-box:hover img {
    transform: scale(1.05);
}



/*GALERIA GRID*/
/* --- Galería tipo mosaico (Bootstrap + CSS Grid) --- */
.gallery-grid {
    max-width: 980px;
    /* ancho visual como el “real” */
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
    /* ≈ 20px */
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    /* evita pequeños descuadres verticales */
}

/* Ítems */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    display: block;
}

.gallery-img {
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .3s ease;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.04);
}

/* Proporciones (clave para alinear la fila inferior) */
.gallery-item .gallery-img {
    aspect-ratio: 1 / 1;
}

/* cuadrados por defecto */
.gallery-item--wide .gallery-img {
    aspect-ratio: 16 / 9;
}

/* rectangular ancho */

/* ⚖️ Hero: ocupa 2 columnas y 2 filas y
   su alto debe igualar (cuadrado arriba) + (wide abajo).
   Con 4 columnas, esto cuadra con aspect-ratio 16/17. */
.gallery-item--hero .gallery-img {
    aspect-ratio: 16 / 17;
}

/* Colocación exacta en el grid (desktop) */
.gallery-item--hero {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.gallery-item:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
}

/* café */
.gallery-item:nth-of-type(3) {
    grid-column: 4;
    grid-row: 1;
}

/* tartaleta */
.gallery-item--wide {
    grid-column: 3 / span 2;
    grid-row: 2;
}

/* interior */

/* Responsive (tablet/móvil): 2 columnas, todo fluye vertical */
@media (max-width: 991.98px) {
    .gallery-grid {
        max-width: 720px;
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item--hero {
        grid-column: 1 / span 2;
        grid-row: auto;
    }

    .gallery-item:nth-of-type(2),
    .gallery-item:nth-of-type(3),
    .gallery-item--wide {
        grid-column: 1 / span 2;
        grid-row: auto;
    }
}

@media (max-width: 575.98px) {
    .gallery-grid {
        max-width: 100%;
        gap: 1rem;
    }

    .gallery-item {
        border-radius: 14px;
    }
}

/*FIN GALERIA GRID*/


/*FOOTER*/

footer {
    background-color: #f6f5ee;
    /* color tipo crema, más cálido */
}

footer h5,
footer h3 {
    color: #B16278;
    /* tono pastel tipo “accent” */
}

footer a:hover {
    color: #B16278;
    text-decoration: underline;
}

/*FIN FOOTER*/


/*MENU*/
/* --- Estilo menu --- */
.menu-nav { --accent: #1bb3a8; } /* color de activo (verde-agua) */
.bg-black { background:#000 !important; }

.menu-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 28px;
  color: #fff !important;
  line-height: 1;
}
.menu-logo small {
  font-size: 11px;
  letter-spacing: .3em;
  opacity: .85;
}

/* Links */
.menu-nav .nav-link {
  color: #fff !important;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  position: relative;
  padding: .25rem 0;
}

/* Subrayado fino animado */
.menu-nav .nav-link::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease, background-color .25s ease;
}
.menu-nav .nav-link:hover::after {
  background: #fff;
  transform: scaleX(1);
}

/* Activo en color acento */
.menu-nav .nav-link.is-active,
.menu-nav .nav-link.is-active:hover {
  color: var(--accent) !important;
  opacity: 1;
}
.menu-nav .nav-link.is-active::after {
  background: var(--accent);
  transform: scaleX(1);
}

/* Alineación de columnas a izquierda/derecha (desktop) */
@media (min-width: 992px) {
  .menu-nav .navbar-nav {
    gap: 1.5rem;          /* antes 2rem o más */
  }
  .menu-nav .nav-link {
    font-size: .95rem;    /* un pelín más pequeño */
    letter-spacing: .06em;
  }
  .menu-logo {
    font-size: 26px;      /* baja 1–2px si hace falta */
  }
}