/* =================================
   VARIABLES DE COLOR Y FUENTES
   ================================= */
:root {
    --color-fondo: #fffbf4;
    --color-seccion: #f4eed7;
    --color-principal: #bfa38a;
    --color-principal-hover: #cbbba2;
    --color-texto-oscuro: rgb(65, 47, 24);
    --color-titulos: #67583f;
    --fuente-cuerpo: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    --fuente-titulos: 'Pacifico', cursive;
}

/* =================================
   ESTILOS GENERALES
   ================================= */
body {
    background-color: var(--color-fondo);
    font-family: var(--fuente-cuerpo);
}

h1,
h2,
h3 {
    font-family: var(--fuente-titulos);
    color: var(--color-titulos);
    font-weight: lighter;
}

p#texto-introduccion {
    font-size: large;
    font-style: italic;
    color: var(--color-texto-oscuro);
}

.descripcion-producto {
    line-height: 2;
}

.descripcion-producto strong {
    font-weight: bold;
    color: #6c6311;
}

.divisora2 {
    border: none;
    height: 1px;
    background-color: #95854d;
    margin: 2rem auto;
    width: 60%;
}

/* =================================
   COMPONENTES DE BOOTSTRAP PERSONALIZADOS
   ================================= */

/* --- Barra de Navegación --- */
.navbar {
    background-color: var(--color-fondo);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-nav .nav-link {
    font-size: large;
    margin: 0 10px;
}

.navbar-nav .nav-link:hover {
    color: var(--color-principal-hover);
}

/* MOBILE navbar */
@media (max-width: 991.98px){
  /* Dejar que la navbar haga wrap */
  .navbar .container-fluid{
    flex-wrap: wrap;                 /* antes estaba en nowrap */
    align-items: center;
    justify-content: space-between;
  }

  /* Botón Volver NO a 100% dentro de la navbar */
  .navbar .btn.btn-secondary{
    width: auto !important;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;              /* aire respecto al toggler */
  }

  /* Hamburguesa en la misma línea del Volver */
  .navbar-toggler{
    margin-left: 8px;
  }

  /* Cuando el menú se despliega, que ocupe toda la línea de abajo */
  .navbar .navbar-collapse{
    flex-basis: 100%;
    margin-top: .5rem;               /* un poco de separación */
  }

  /* Opcional: un pelín de padding vertical a los links */
  .navbar-nav .nav-link{
    padding: .35rem 0;
  }
}



/* --- Botones --- */
.btn-primary {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-principal-hover);
    border-color: var(--color-principal-hover);
    transform: scale(1.05);
}

.btn-secondary {
    background-color: var(--color-fondo);
    border-color: var(--color-titulos);
    color: var(--color-titulos);
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--color-principal-hover);
    border-color: var(--color-principal-hover);
    transform: scale(1.05);
}

/* --- Efecto hover para títulos h4 (lo mantuvimos porque es genial) --- */
h4 {
    position: relative;
    overflow: hidden;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: default;
}

h4::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffeba2;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .3s ease;
}

h4:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* =================================
   ESTILOS ADICIONALES PARA LA TIENDA
   ================================= */
.product-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.product-card .card-footer {
    background-color: transparent;
    border-top: none;
    padding: 0 1rem 1rem 1rem;
}

.product-card .precio {
    font-style: italic;
    font-weight: lighter;
    color: var(--color-titulos);
    font-size: 1.5rem;
}

.btn-efectivo,
.btn-mp {
    color: white;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-efectivo {
    background-color: #d3c99e;
    /* Tono de tu paleta */
}

.btn-efectivo:hover {
    background-color: #8cc355;
    color: white;
    transform: scale(1.05);
}

.btn-mp {
    background-color: #4d8ee2;
    /* Azul de MP */
}

.btn-mp:hover {
    background-color: #8cc355;
    color: white;
    transform: scale(1.05);
}

/* =================================
   ESTILOS PARA EL ÍNDICE DEL BLOG 
   ================================= */

.blog-summary-card {
    background-color: var(--color-seccion);
    border-left: 4px solid var(--color-principal);
    /* Borde izquierdo decorativo */
    padding: 1.5rem;
    text-align: center;
    /* ¡AQUÍ LA MAGIA! Centramos todo el contenido */
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 0 .5rem .5rem 0;
    /* Redondeamos solo las esquinas opuestas al borde */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.blog-summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

/* Título con fuente limpia y legible, no la decorativa 'Pacifico' */
.blog-summary-card h3 {
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    /* Más grueso para que destaque */
    font-size: 1.4rem;
    color: var(--color-texto-oscuro);
}

/* Párrafo de descripción */
.blog-summary-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #6c757d;
    /* Un gris suave de Bootstrap para el texto secundario */
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    /* Espacio extra antes del botón */
}

/* El botón .btn-primary y .btn-sm ya están definidos y se centrarán automáticamente. */

.icono-redes {
    width: 24px;
    /* Un ancho fijo */
    height: 24px;
    /* Una altura fija */
    margin-right: 8px;
    /* Espacio entre el ícono y el texto */
    vertical-align: middle;
    /* Alinea el ícono con el medio del texto */
}

/* =================================
   TIPOGRAFÍA UNIFORME PARA PÁGINA DE CONTACTO
   ================================= */

/* Unifica la fuente de todos los títulos de la página */
.titulo-seccion-contacto,
.subtitulo-seccion-contacto,
.titulo-contacto {
    font-family: var(--fuente-titulos);
    color: var(--color-titulos);
    font-weight: lighter;
}

/* Define un estilo base para el texto normal y las listas de la página */
.bio-card p,
.bio-card li {
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto-oscuro);
}

.bio-card {
    background-color: #f4eed7;
    /* Fondo blanco limpio para que la sombra resalte */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.07);
    /* Sombra más pronunciada y moderna */
    border-radius: 0.75rem;
    /* Esquinas más redondeadas */
    border: none;
    /* Sin borde */
}

/* =================================
   EFECTO HOVER FOTO ASTRID
   ================================= */
#foto-astrid {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#foto-astrid:hover {
    transform: scale(1.04);
    /* Un ligero y elegante zoom */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* La sombra también cambia para dar profundidad */
}

.floral-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

.floral-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.floral-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =================================
   ESTILOS PARA PÁGINAS DE POSTS DEL BLOG
   ================================= */
.blog-post-content h1 {
    font-family: var(--fuente-titulos);
    color: var(--color-titulos);
    font-size: 2.8rem;
    font-weight: lighter;
    margin-bottom: 0.5rem;
}

.blog-post-content .post-meta {
    font-style: italic;
    color: #6c757d;
    margin-bottom: 2.5rem;
}

.blog-post-content article p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #343a40;
}

/* =================================
   EFECTO HOVER PARA TARJETAS DE TESTIMONIO
   ================================= */
.testimonial-card {
    /* Prepara la tarjeta para una transición suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.testimonial-card:hover {
    /* Eleva la tarjeta ligeramente */
    transform: translateY(-5px);
    /* Aumenta la sombra para dar profundidad y el efecto "flotante" */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/* =================================
   BOTÓN DE RESERVA (Calendly)
   ================================= */
.btn-reserva {
    background-color: var(--color-titulos);
    /* color rosa floral */
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 28px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-reserva:hover {
    background-color: var(--color-titulos);
    /* tono más oscuro al pasar el mouse */
    color: #fff;
    transform: scale(1.05);
}

/* =================================
   Labdays-like + Reveal on scroll
   ================================= */

/* Hero base */
.ld-hero{
  background: var(--color-fondo);
  min-height: 88vh;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.ld-hero-copy{ max-width: 640px; }
.ld-kicker{
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color: var(--color-titulos); opacity:.85;
}
.ld-title{
  font-family: var(--fuente-titulos);
  color: var(--color-titulos);
  font-weight: lighter;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.08;
  margin:.4rem 0 .75rem;
}
.ld-sub{
  color: var(--color-texto-oscuro);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 62ch;
}
.ld-hero-illust{
  width: min(92vw, 560px);
  max-width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  display: inline-block;
}

/* Secciones */
.ld-section{ padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--color-fondo); }
.ld-section-alt{ background: var(--color-seccion); }

.ld-sec-title{
  font-family: var(--fuente-titulos);
  color: var(--color-titulos);
  font-weight: lighter;
  font-size: clamp(1.8rem, 4.6vw, 2.4rem);
  margin-bottom:.25rem;
}
.ld-sec-sub{
  color: var(--color-texto-oscuro);
  opacity:.9;
}

/* Tarjetas */
.ld-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:1.25rem 1.25rem;
}
.ld-card-title{
  margin-bottom:.25rem;
  font-weight:600;
  color: var(--color-titulos);
}

/* Pasos */
.ld-step{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:1.25rem 1.25rem;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  text-align:center;
}
.ld-step-num{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  margin:0 auto .5rem;
  background: var(--color-seccion);
  color: var(--color-titulos);
  font-weight:700;
}

/* Listas */
.ld-list{ margin: .5rem 0 0 1rem; }
.ld-list li{ margin:.25rem 0; }

/* Reveal on scroll */
.ld-reveal{ opacity:0; transform: translateY(16px); }
.ld-reveal.is-visible{ animation-duration:.8s; animation-fill-mode: both; animation-delay: var(--reveal-delay, 0ms); }

@keyframes ld-fade-up {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: none; }
}
@keyframes ld-fade-right {
  from { opacity:0; transform: translateX(-22px); }
  to   { opacity:1; transform: none; }
}
@keyframes ld-fade-left {
  from { opacity:0; transform: translateX(22px); }
  to   { opacity:1; transform: none; }
}

/* Clases animación (se asignan vía JS) */
.ld-fade-up.is-visible    { animation-name: ld-fade-up; }
.ld-fade-right.is-visible { animation-name: ld-fade-right; }
.ld-fade-left.is-visible  { animation-name: ld-fade-left; }

/* Accesibilidad: respetar reduce motion */
@media (prefers-reduced-motion: reduce){
  .ld-reveal,
  .ld-fade-up.is-visible,
  .ld-fade-right.is-visible,
  .ld-fade-left.is-visible{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsivo */
@media (max-width: 991.98px){
  .ld-hero{ min-height: auto; text-align:center; }
  .ld-hero-copy{ margin:0 auto; }
  .ld-hero-illust{ width: min(86vw, 480px); margin-bottom:.25rem; }
  .btn-reserva, .btn.btn-secondary{ width:100%; text-align:center; }
}


/* === Botón moderno "Ver más" === */
/* Botón principal "Comprar" (usa tu paleta) */
.btn-modern {
  display:inline-block; padding:10px 22px; border-radius:30px;
  background: linear-gradient(135deg, var(--color-principal), var(--color-principal-hover));
  color:#fff; font-weight:600; text-decoration:none; transition:.25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.btn-modern:hover { transform: translateY(-1px) scale(1.02); color:#fff; text-decoration:none; }


.badge-nuevo {
  display: inline-block;
  margin-bottom: 10px;          
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--color-principal);
  color: #fff;
  border-radius: 999px;        
  vertical-align: middle;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.modal-footer .btn {
  border-radius: 25px;
  font-weight: 600;
  padding: 10px;
  min-width: 120px;  
}