:root {
    --gold: #c5a059;
    --dark-gold: #a6823d;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #444;
}

.font-title {
    font-family: 'Dancing Script', cursive;
    color: var(--gold);
}

.text-gold { color: var(--gold); }

.btn-gold {
    background-color: var(--gold);
    color: white;
    border: none;
    transition: 0.3s;
}

.btn-gold:hover {
    background-color: var(--dark-gold);
    color: white;
    transform: translateY(-2px);
}

/* Hero con imagen de fondo */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../assets/img/portada.jpeg') center/cover no-repeat;
    height: 100vh;
}

/* Estilo del Countdown */
.countdown-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: 10px;
    min-width: 70px;
}

.countdown-num {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}


/* Galería Estilos */
.gallery-item {
    overflow: hidden; /* Corta lo que sobresalga al hacer zoom */
    border-radius: 12px;
    background-color: #fff;
    padding: 5px; /* Efecto marco */
}

.gallery-item img {
    transition: transform 0.4s ease;
    cursor: pointer;
    width: 100%;
    height: 250px; /* Altura fija para que todas se vean iguales */
    object-fit: cover; /* Recorta la foto para llenar el espacio sin deformarse */
}

.gallery-item:hover img {
    transform: scale(1.05); /* Zoom suave al pasar el mouse */
}


/* Ajuste para que las fotos del carrusel se vean bien en móvil */
.custom-carousel-img {
    height: 500px; /* Altura ideal para móviles */
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    object-position: center;
}

/* En pantallas más grandes (computadoras), podemos bajar un poco la altura */
@media (min-width: 768px) {
    .custom-carousel-img {
        height: 600px;
    }
}

/* Personalizar las flechas si quieres que se vean más */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}




/* El Splash cubre toda la pantalla */
#splash-screen {
    position: fixed; /* Esto lo deja "flotando" sobre todo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* Fondo blanco sólido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Asegura que esté por encima de TODO */
    transition: opacity 0.8s ease, visibility 0.8s;
}

/* Clase para ocultarlo con el botón */
.splash-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Evita que el botón invisible bloquee clics */
}

/* Bloqueo de scroll mientras el splash esté activo */
body.no-scroll {
    overflow: hidden;
}



/* Regalos */
/* Contenedor principal */
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 300px;
  height: 350px;
  perspective: 1000px; /* Efecto 3D */
}

/* El "motor" del giro */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Girar cuando se toca o se pasa el mouse */
.flip-card:hover .flip-card-inner, 
.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

/* Estilo común para ambas caras */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border: 1px solid #eee;
}

/* Lado Frontal (Blanco) */
.flip-card-front {
  background-color: #ffffff;
  color: #333;
}

/* Lado Trasero (Ligeramente Dorado o Crema) */
.flip-card-back {
  background-color: #fdfaf3;
  color: #333;
  transform: rotateY(180deg);
}/* Contenedor principal */
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 300px;
  height: 350px;
  perspective: 1000px; /* Efecto 3D */
}

/* El "motor" del giro */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Girar cuando se toca o se pasa el mouse */
.flip-card:hover .flip-card-inner, 
.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

/* Estilo común para ambas caras */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border: 1px solid #eee;
}

/* Lado Frontal (Blanco) */
.flip-card-front {
  background-color: #ffffff;
  color: #333;
}

/* Lado Trasero (Ligeramente Dorado o Crema) */
.flip-card-back {
  background-color: #fdfaf3;
  color: #333;
  transform: rotateY(180deg);
}


/* Estilos para detalles */
.ramo-separador {
    width: 100%;             /* El div ocupa todo el ancho de la pantalla */
    height: 80px;            /* Altura suficiente para que no se corte */
    margin: 30px 0;          /* Espacio arriba y abajo para separar secciones */
    
    background-image: url('../assets/img/Olivos1.png');
    background-repeat: no-repeat;
    background-position: center center; /* Centrado perfecto */
    
    /* AQUÍ AJUSTAS EL TAMAÑO DEL RAMO */
    background-size: 100px;  /* Puedes usar píxeles (150px) o porcentaje (30%) */
    
    opacity: 0.9;
    display: block;
}

/* Guia Vertical */
/* Clase para secciones que llevan la rama lateral */
.seccion-guia-olivo {
    position: relative;
    /* Creamos espacio a la derecha para que la rama no toque el texto */
    padding-right: 60px !important; 
    overflow: hidden; /* Evita que la hoja cause scroll horizontal */
}

.seccion-guia-olivo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;      /* Ancho del carril de la rama */
    height: 100%;     /* Que cubra todo el alto de la sección */
    
    background-image: url('../assets/img/OlivosH.png');
    background-repeat: repeat-y; /* Se repite hacia abajo si la sección es larga */
    background-position: center right;
    background-size: 50px auto;  /* Ajusta el ancho de tu rama aquí */
    
    opacity: 0.7;
    z-index: 1;
    pointer-events: none; /* Permite que el usuario toque botones debajo */
}

/* Ajuste para móviles: reducimos el espacio para que el texto respire */
@media (max-width: 576px) {
    .seccion-guia-olivo {
        padding-right: 40px !important;
    }
    .seccion-guia-olivo::after {
        width: 50px;
        background-size: 35px auto;
        opacity: 0.5; /* Menos opacidad en móvil para no distraer */
    }
}

/* Anillos */
.anillos-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0; /* Espaciado entre nombres y frase */
}

.anillos-separator img {
    width: 60px; /* Tamaño discreto y elegante */
    height: auto;
    /* Si tu SVG es negro y lo quieres dorado, puedes usar este filtro: */
    filter: sepia(2) saturate(2) hue-rotate(10deg); 
    opacity: 0.9;
}

/* Animación opcional: un leve parpadeo o entrada suave */
.anillos-separator img {
    animation: fadeInAnillos 2s ease-in-out;
}

@keyframes fadeInAnillos {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 0.9; transform: translateY(0); }
}