/*
Theme Name: Venice
Theme URI: https://gitlab.com/ocdata-pointer/wp-venecia
Author: Octadata
Author URI: https://octa-data.com
Description: Venice is a WordPress theme designed for the Best Doctors event, featuring Tailwind CSS and custom components.
Version: 4.0.0
License: MIT
License URI: https://github.com/jeffreyvr/tailpress/blob/master/LICENSE
Text Domain: tailpress
*/

/* Estilo para los links del menú */
.nav-dorado {
    color: white !important;
    text-decoration: none !important;
    font-family: Arial, sans-serif;
 	font-size: 14px!important;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 3px solid transparent; /* Invisible por defecto */
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.nav-dorado:hover {
    border-image: linear-gradient(to right, #8A6E2F, #C9A84C, #F7E7B4) 1;
    border-bottom: 3px solid; /* Se activa el degradado */
}

.Fdays {
    background: linear-gradient(90deg, #8a6d3b, #e5c592, #8a6d3b);
    color: white;
    padding: 5px 20px;
  	font-size:18px;
    font-weight: bold;
	margin-top:20px;
}
#Parrafos {
    font-family: 'HelveticaLight', sans-serif;
    font-weight: 100;
    font-size: 16px;
    color: white;
    opacity: 0.8;
    line-height: 1.6;
    margin-top: 15px;
    max-width: 600px; /* Evita que las líneas sean demasiado largas en PC */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Asumiendo que va centrado como el título Monik */
}



.grid-fotos {
	font-family: 'Monik';
	text-decoration: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, 180px); /* 3 columnas fijas */
    gap: 30px;
    justify-content: center;
    margin: 0 auto;
	font-size: 45px;
    color: white;
	padding-top:5%;
}

.cuadro-dia {
	font-family: 'Monik';
	font-size: 45px;
	text-decoration: none !important;
    color: white;
    width: 180px;
    height: 180px;
    background-image: url('assets/cuadroP.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

#helveticah2 {
    font-family: 'HelveticaLight', sans-serif;
    font-weight: 100;
    font-size: 40px;
    line-height: 1.2;
    color: bisque;
    text-align: right;
}

#Monikah2 {
    font-family: 'Monik', sans-serif;
    font-size: 45px;
    color: white;
    margin: 0;
    line-height: 1.1;
    text-align: center; /* Por defecto centrado como en tu diseño */
}

.contenedor-video-flex {
    width: 100%;
    max-width: 800px; /* Se mantiene igual que antes en PC */
    margin: 0 auto;
}

@font-face {
    font-family: 'Monik';
    src: url('fonts/Monik-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaLight';
    /* Eliminamos el PHP y dejamos solo la ruta real */
    src: url('fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@media (max-width: 768px) {

.grid-fotos {
        /* Esto obliga a que los cuadros tengan un tamaño decente */
        grid-template-columns: repeat(2, minmax(150px, 1fr)) !important; 
        gap: 15px;
        justify-content: center; /* Centra los dos cuadros si sobra espacio */
    }

    .cuadro-dia {
        /* Le decimos que use todo el ancho de la columna (fr) */
        width: 100% !important; 
        max-width: 300px; /* Permitimos que sea más grande que en PC para que luzca */
        height: auto !important;
        aspect-ratio: 1 / 1; /* Mantiene el cuadrado perfecto */
    }

    .texto-dia {
        font-size: 28px !important; /* Ajustamos la letra para el tamaño de móvil */
    }
    /* Ajustamos el contenedor principal para que no mida 130vh (es demasiado en móvil) */
    .relative[style*="height: 120vh"], 
    header.fondo-overlay {
        height: auto !important; 
        min-height: 110vh;
      
    }

    /* Reducimos el espacio de las letras del logo que se ve gigante */
    .superior p {
        letter-spacing: 10px !important;
    }

    .superior img {
        width: 80% !important; /* Que el logo respire */
        margin: 20px auto !important;
    }
}

@media (max-width: 768px) {
    .inferior {
        flex-direction: column !important; /* Uno arriba del otro */
        text-align: center !important;
        padding: 0 20px !important;
        margin-top: 30px !important;
    }

    .inferior div {
        min-width: 100% !important;
    }

    .inferior h2 {
        text-align: center !important;
        font-size: 28px !important;
    }
	
	#grid-fotos{
		width:100px;
height:100px;
	}
}

@media (max-width: 1024px) {
	#img-welcome-main {
		width: 100% !important;
        max-width: 450px !important; /* Este tamaño es el ideal para que en tablet se vea equilibrado */
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
	.grid-fotos {
		padding-top:10%;
		padding-bottom:10%;
        grid-template-columns: repeat(3, 160px); /* Bajamos un poco el tamaño */
        gap: 20px;
    }
    .cuadro-dia {
        width: 160px;
        height: 160px;
    }
	
	 .relative[style*="height: 120vh"], 
    header.fondo-overlay {
        height: auto !important; 
        min-height: 110vh;
        
    }
    /* Quitamos ese padding de 100px que asfixia el contenido en móvil */
    div[style*="padding: 100px"] {
        padding: 40px 20px !important;
        border-radius: 20px !important;
    }

    /* Los botones de Day 1, Day 2... que no se amontonen */
    .day-tab {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }

    /* El contenido de adentro: Texto arriba, Imagen abajo */
    .day-content .flex-col.md\:flex-row {
        flex-direction: column !important;
		font-size: 14px;
		
    }

    .day-content h1 img {
        width: 60% !important; /* El logo de "Dia 1" */
		justify-content:center!important;
		border-radius:25px;
		font-size: 20px;
    }

div[style*="margin-top:200px"] {
        margin-top: 50px !important;
    }

    .contenedor-video-flex {
        max-width: 100% !important;
        padding: 0 20px !important; /* Espacio a los lados para que no toque los bordes */
    }

    /* Forzamos que el video mantenga su forma (16:9) */
    .aspect-video {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

    /* Reducimos el margen de 100px entre video y texto */
    div[style*="margin-top: 100px"] {
        margin-top: 40px !important;
    }

#Parrafos {
        max-width: 80%; /* Le damos más aire a los lados */
        font-size: 18px!important;
    }

#Parrafos2 {
     
        font-size: 17px!important;
    }
	
#helveticah2 {
        font-size: 36px;
        text-align: right;
	letter-spacing: 10px;
    }

#Monikah2 {
        font-size: 32px; /* Reducimos el tamaño para que no desborde */
        line-height: 1.2;
        padding: 0 10px;
    }
	
	#centrarcontenido{
       display: flex;
    justify-content: center; /* Centra horizontalmente */
        width: 100%;
		text-align:center;
    }

    .day-content h2 {
        font-size: 24px !important;
        text-align: center;
    }

.contenedor-agenda-derecha {
        background-color: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 20px !important;
        padding: 20px !important;        
        display: block !important;
		
    }

    /* La imagen de Venecia al final */
    figure img, .day-content img[class*="h-[550px]"] {
        height: 250px !important; /* Más bajita para que quepa en la pantalla */
        width: 100% !important;
        margin-top: 20px;
		border-radius:25px;
    }
}

@media (max-width: 768px) {
    .seccion-agenda-praga {
        background-position: center !important;
        padding: 50px 20px !important;
        justify-content: center !important;
        min-height: auto !important;
    }
	
	#Monikah2 {
		font-size: 22px; /* Reducimos el tamaño para que no desborde */
        line-height: 1.2;
        padding: 0 10px;
    }
	
	#Parrafos {
        font-size: 17px !important;
       
    }
	
	#grid-fotos{
		width:100px;
height:100px;
	}
}