/* Botón Flotante de WhatsApp */
.wsp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wsp-float:hover {
    transform: scale(1.1);
    color: #fff;
    background-color: #128c7e;
}

/* Clase para logo en Navbar */
.nav-logo {
    height: 80px;
    width: auto; 
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease; /* Pequeña transición, efectos */
}
.navbar-brand:hover .nav-logo {
    transform: scale(1.05);
}
@media (max-width: 576px) {
    .nav-logo {
        height: 60px; /* Un poco más chico en celulares para que respire el diseño */
    }
}

.nav-info-box p {
    font-size: 0.875rem; 
}
@media (min-width: 768px) {
    .nav-info-box p {
        font-size: 14px; /* Acá especificar los px exactos para escritorio */
    }
}
.nav-info-box {
    font-family: 'Roboto', sans-serif; /* Usamos la sans-serif para texto chico legible */
    line-height: 1.4;                  /* Controla el interlineado de las 4 líneas */
    max-width: 250px;                  /* Evita que el texto se estire de más */
}

/* Contenedor principal del Hero */
.hero-custom {
    position: relative;
    min-height: 60vh; /* Le damos un poco más de aire vertical para lucir el video */
    display: flex;
    align-items: center;
    color: white; /* Fuerza el texto a blanco para contrastar con el video */
}

/* El Video de fondo estirado y con el filtro oscuro integrado */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta y encuadra al centro sin deformar el video */
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none; /* Evita que el usuario lo pause sin querer haciendo click */
    
    /* Filtro oscuro para asegurar que el texto blanco sea 100% legible */
    filter: brightness(45%); 
}

.hero-custom h1 {
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/
	font-size:2rem;
	font-family: 'Alata', sans-serif;
	font-weight:500;
	text-transform: uppercase;
}
h2 {
    font-family: 'Alata', sans-serif;
	color: #005d82;
	font-size:2.5rem;
	text-transform: uppercase;	
}
h3 {
    font-family: 'Alata', sans-serif;
	font-size:2.2rem;
}
.img-logo {
	max-width:300px;
}

@media (min-width: 768px) {
	.img-logo{
		max-width:400px;
	}
	.hero-custom h1 {
	font-size:2rem;	
	}
}

/*BOTONES*/

.btn-pausa {
    color: #005d82;
    border-color: #005d82;
    background-color: transparent;
    padding: 0.6rem 1.8rem; /* Tamaño de botón personalizado */
   /* font-family: 'Alata', sans-serif;*/
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-pausa:hover {
    color: #ffffff;
    background-color: #005d82;
    border-color: #005d82;
}

/**/




/*SECCION CARTA*/
/* SECCION CARTA */

#carta {
    position: relative; /* Contenedor de referencia para las imágenes absolutas */
    overflow: hidden;   /* Recorta cualquier desborde de las imágenes */
}

/* --- Estilos base compartidos para ambas imágenes --- */
#carta::before,
#carta::after {
    content: "";
    position: absolute;
    /*top: 60px;*/
    width: 45%;          /* Podés ajustar este porcentaje según qué tan anchas quieras las imágenes */
    height: 100%;        /* Acompaña siempre el alto dinámico de la sección */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;          /* Quedan por detrás de la grilla de texto */
    display: none;       /* Ocultas en Mobile y Tablet (hasta md inclusive) */
}

/* --- Imagen Izquierda --- */
#carta::before {
    left: -280px;
	top:0px;
	/*opacity:80%;
    background-image: url('../media/bg_carta_03.png'); /* Cambiá por tu imagen */
}

/* --- Imagen Derecha --- */
#carta::after {
    right: -280px;
	top:0px;
	/*opacity:80%;
    background-image: url('../media/bg_carta_03.png');   /* Cambiá por tu imagen */
}

/* --- Se muestran únicamente a partir de Pantallas Grandes (lg >= 992px) --- */
@media (min-width: 850px) {
    #carta::before,
    #carta::after {
        display: block;
    }
}



#carta {
    /* Variables y patrón de fondo CSS */
    --s: 67px; /* control the size */
    --c1: #ffffff;
    --c2: #f3f3f3;
    
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: 35.36% 35.36% at;
    --_c: #0000 66%,var(--c2) 68% 70%,#0000 72%;
    background:
        radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
        radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
        radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
        radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
        repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%) 0 0/var(--_s),
        radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
        var(--c1);

    /* Color de texto contrastante */
    color: #ffffff;
}




#carta h2 {
    font-size: 3.2rem; /* Un poco más chico en celulares para que no desborde */
    line-height: 1.1;
    text-align: center;
}

#carta p {
    font-size: 1.1rem;
    text-align: center;
}

/* En computadoras y tablets (desktop): activamos la tipografía gigante y el alineado a la derecha */
@media (min-width: 992px) {
    #carta h2 {
        font-size: 4rem;
        line-height: 4rem;
    }
    #carta p {
        font-size: 1.2rem;
    }
}


/**/



/*SECCION PASTELERIA APTA*/


/* Por defecto en celulares: el texto hereda la alineación izquierda o centrada natural */
#carta_apta h2 {
	color: #6e8577;
    font-size: 3.2rem; /* Un poco más chico en celulares para que no desborde */
    line-height: 1.1;
    text-align: center;
}

#carta_apta p {
    font-size: 1.1rem;
    text-align: center;
}

/* En computadoras y tablets (desktop): activamos la tipografía gigante y el alineado a la derecha */
@media (min-width: 992px) {
    #carta_apta h2 {
        font-size: 4rem;
        line-height: 4rem;
        text-align: right;
    }
    #carta_apta p {
        font-size: 1.2rem;
        text-align: right;
    }
}


nav.nav-casa-pausa {
    background-color: #005d82;
	}

.hero-text p{ 
	font-size:1.20rem;
	font-weight:300;
}


/**/

/*seccion pasteleria COLUMNAS Y ANIMACION*/
.contenedor-crop {
    width: 100%;  
    max-width: 420px;
    height: 420px; /* Al igualar ancho y alto se vuelve un recuadro perfecto */
    overflow: hidden; 
    margin: 0 auto; /* Lo centra perfectamente en su columna */
}

.img-crop-fit {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cambiamos a cover porque ahora el contenedor acompaña el formato de tu foto */
    object-position: center; 
}

/**/
/* --- Sección Pastelería Inclusiva: Contenedor de Imágenes Animadas --- */

/* 1. Definición Base y para Escritorio (lg en adelante) */
.efecto-fade-loop {
    position: relative;
    /* Mantenemos el tamaño original de 420px para escritorio */
    width: 420px;
    height: 420px;
    margin: 0 auto; /* Centrado horizontal */
    overflow: hidden;
    /* Opcional: Agregar bordes redondeados si la imagen base no los tiene */
    border-radius: 15px; 
}

/* 2. Ajuste Responsivo para Mobile (Debajo de lg, < 992px) */
@media (max-width: 991px) {
    .efecto-fade-loop {
        /* Reducimos el tamaño a la mitad (210px) */
        width: 250px;
        height: 250px;
        /* El margin: 0 auto; heredado asegura que siga centrado */
    }
}

/* --- Posicionamiento y Animación (Se mantiene igual) --- */

/* Posicionamiento base para ambas imágenes dentro del contenedor */
.efecto-fade-loop .img-fade-1,
.efecto-fade-loop .img-fade-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ocupa el 100% de los 420px o 210px según la pantalla */
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar la caja */
    object-position: center;
}

/* La Imagen 1 (fondo) se achica un poco para que sea fácil de tapar */
.img-fade-1 {
    z-index: 1;
    opacity: 1;
    transform: scale(0.9); /* Achicamos al 90% */
}

/* La Imagen 2 (gira) se mantiene al 100% y rota por encima */
.img-fade-2 {
    z-index: 2;
    /* Usamos la animación combo pero asegurándonos que mantenga scale(1) */
    animation: comboFadeYGiroAchicado 8s infinite linear;
}

/* Animación simplificada: Gira mientras aparece y desaparece */
@keyframes comboFadeYGiroAchicado {
    0% {
        opacity: 0;
        transform: scale(1) rotate(0deg);
    }
    25% {
        opacity: 0;
    }
    37.5%, 62.5% {
        opacity: 1; /* Visible, tapa a la Imagen 1 */
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(360deg); /* Completa la vuelta */
    }
}
/**/

/*SECCION TORTAS*/

#pasteleria_a_pedido h2 {
    font-size: 3.2rem; /* Un poco más chico en celulares para que no desborde */
    line-height: 1.1;
    text-align: center;
}

#pasteleria_a_pedido p {
    font-size: 1.1rem;
    text-align: center;
}

/* En computadoras y tablets (desktop): activamos la tipografía gigante y el alineado a la derecha */
@media (min-width: 992px) {
    #pasteleria_a_pedido h2 {
        font-size: 4rem;
        line-height: 4rem;
        text-align: left;
    }
    #pasteleria_a_pedido p {
        font-size: 1.2rem;
        text-align: left;
    }
}

/* --- Contenedor de imágenes completas --- */
.efecto-fade-loop-tortas {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* Estilo base para que ambas fotos ocupen exactamente el mismo espacio superpuesto */
.img-torta-fade {
    width: 100%;
    height: auto;
    display: block;
}

/* La primera foto define el flujo normal del layout */
.img-torta-1 {
    position: relative;
    z-index: 1;
    animation: zoomTorta1 12s infinite ease-in-out;
}

/* La segunda foto se clava encima de la primera sin alterar la altura del contenedor */
.img-torta-2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation: fadeTorta2 12s infinite ease-in-out;
}

/* La segunda foto se clava encima de la primera sin alterar la altura del contenedor */
.img-torta-3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    animation: fadeTorta3 12s infinite ease-in-out;
}

/* --- Transición de Fundido Cruzado (Crossfade) --- */

/* --- Contenedor e Imágenes (Revelado Vertical) --- */
.efecto-fade-loop-tortas {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.img-torta-fade {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 991px) {
    .efecto-fade-loop-tortas{
        /* Reducimos el tamaño a la mitad (210px) */
        max-width: 380px;
        /* El margin: 0 auto; heredado asegura que siga centrado */
    }
}

/* Imagen 1: Define el espacio y la altura del contenedor */
.img-torta-1 {
    position: relative;
    z-index: 1;
    animation: slideUpTorta1 12s infinite ease-in-out;
}

/* Imágenes 2 y 3: Superpuestas con posición absoluta */
.img-torta-2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation: slideUpTorta2 12s infinite ease-in-out;
}

.img-torta-3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    animation: slideUpTorta3 12s infinite ease-in-out;
}

/* --- Keyframes Revelado Vertical Sincronizados (12s total) --- */

/* --- Torta 1 --- */
@keyframes slideUpTorta1 {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    28% {
        opacity: 1;
        transform: translateY(0);
    }
    33% {
        opacity: 0;
        transform: translateY(-20px); /* Sale hacia arriba */
    }
    94% {
        opacity: 0;
        transform: translateY(20px);  /* Se prepara abajo para la vuelta */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Torta 2 --- */
@keyframes slideUpTorta2 {
    0%, 28% {
        opacity: 0;
        transform: translateY(20px);  /* Nace desde abajo */
    }
    33%, 61% {
        opacity: 1;
        transform: translateY(0);     /* Estable al centro */
    }
    66%, 100% {
        opacity: 0;
        transform: translateY(-20px); /* Sale hacia arriba */
    }
}

/* --- Torta 3 --- */
@keyframes slideUpTorta3 {
    0%, 61% {
        opacity: 0;
        transform: translateY(20px);  /* Nace desde abajo */
    }
    66%, 94% {
        opacity: 1;
        transform: translateY(0);     /* Estable al centro */
    }
    100% {
        opacity: 0;
        transform: translateY(-20px); /* Sale hacia arriba */
    }
}
/**/


/*Contacto*/


#contacto i {
    width: 20px; /* Asegura que los iconos estén alineados verticalmente */
    text-align: center;
}

#contacto a:hover {
    color: #0d6efd !important; /* Color de énfasis de Bootstrap al pasar el mouse */
}

.horarios p {
	font-size: large;
}

.medios-contacto a {
	font-size: large;
}

/* Ajustes Generales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

section {
    padding: 80px 0;
}

/* Contenedor principal: oculta lo que desborda de la pantalla */
.marquesina-contenedor {
    /*background-color: #005d82;*/
	background-color: #6e8577;
    color: #fbf7ea; 
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.marquesina-scroll {
    display: flex;
    width: max-content;
    animation: scrollMarquesina 40s linear infinite; 
}

.marquesina-texto {
    display: flex;
    flex-shrink: 0;
    padding-right: 10px; /* Línea limpia y corregida sin caracteres raros */
}

.marquesina-texto span {
    font-family: 'Alata', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 5px; /* Tu espaciado compacto perfecto */
}

@keyframes scrollMarquesina {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}


/* Links del menú desplegable mobile */
.nav-casa-pausa .nav-link {
    font-family: 'Alata', sans-serif;
    text-transform: uppercase;
    color: #ffffff !important;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-casa-pausa .nav-link:hover {
    color: #fbf7ea !important;
}
/* Corrección para Firefox y Chrome */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Restamos la altura aproximada del nav para que el contenido no quede tapado */
section {
    scroll-margin-top: 90px;
}