/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/**************SECCIÓN HEADER *************/

.alinear_centro{
  align-self: center;
}

/* Estilo base del botón */
li.btn_menu{
  margin-left: 8px;
  margin-right: 8px;
}

.btn_menu a.hfe-menu-item {
    min-width: 200px;
    font-family: 'Satoshi', sans-serif !important;
    border: 5px solid #000000 !important;
    border-radius: 20px !important;
    box-shadow: 5px 5px 0px #000000 !important;
    background-color: #FFFFFF; 
    display:block;
	  text-align:center;
    color: #1A1A1A !important;
    font-weight: 700;
    transition: all 0.2s ease;
    padding: 16px 8px 16px 8px;
}

.btn_menu.color_reserva a.hfe-menu-item {
    background-color: #EC4A27; 
}

.btn_menu.color_contacto a.hfe-menu-item {
    background-color: #F6C129; 
}

/* Efecto HOVER (Al pasar el ratón) */
.btn_menu a.hfe-menu-item:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px #000000 !important;
    background-color: #f0f0f0; 
} 

/* Efecto ACTIVE (Al hacer clic) */
/* .btn_menu a.hfe-menu-item:active {
    transform: translate(5px, 5px);
    box-shadow: none !important;
}*/


@media (max-width: 767px) {
    div.hfe-site-logo-container{
        text-align: center !important;
    }

    .cont-mobile{
        display: block;
    }
}

/************** FIN SECCIÓN HEADER *************/


/************** SECCIÓN INICIO *************/

body .boton-comic .elementor-button {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #000000;
    padding: 10px 0px;
    background-color: #FFFFFF;
    border: 5px solid #000000 !important;
    border-radius: 19px !important;
    box-shadow: 6px 6px 0px #000000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

body .boton-comic .elementor-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #000000 !important;
    background-color: #f7f7f7;
}

body .boton-comic .elementor-button a span{
    font-family: 'Inter', sans-serif !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
}

/*TABLET */
@media (max-width: 1024px) {
	
	#inicio{
	background-size: auto !important;
}

body .boton-comic .elementor-button{
    font-size: 20px;
}

}

/*MÓVIL*/
@media (max-width: 767px) {
#inicio{
    margin-top: -90px;
	background-size: auto !important;
}

body .boton-comic .elementor-button{
    font-size: 20px !important;
}

}

@media (max-width: 1224px){

body .boton-comic .elementor-button{
    font-size: 26px;
}
}

@media (min-width: 1800px){
	#comida img{
		display: block;
    position: relative;
    bottom: 120px;
    width: 86%;
	}
	
	.elementor-90 .elementor-element.elementor-element-374dddf {
    --padding-left: 240px;
    --padding-right: 240px;
}
	
}


/************** FIN SECCIÓN INICIO *************/



/************** ESTILOS FORMULARIO RESERVA COMIC *************/

/* =========================================
   ESTILO TARJETA FORMULARIO (CONTENEDOR)
   ========================================= */
.reserva-comic-form {
    background-color: #FFFFFF;
    border: 10px solid #000000;
    border-radius: 46px;
    box-shadow: 10px 10px 0px #000000;
    padding: 50px 100px;
}

/* =========================================
   ESTILO DE LOS TEXTOS (LABELS)
   ========================================= */
.reserva-comic-form label {
    font-weight: 400;
    color: #000000;
    margin-bottom: 8px;
    font-size: 30px;
}

/* =========================================
   ESTILO DE LOS INPUTS (LAS CAJAS PARA ESCRIBIR)
   ========================================= */
.reserva-comic-form input:not([type="submit"]),
.reserva-comic-form textarea,
.reserva-comic-form select {
    background-color: #FFFFFF;
	font-family: 'Satoshi', sans-serif !important;
    border: 5px solid #000000 !important;
    border-radius: 13px !important;
    padding: 10px 15px;
    width: 100%;
    height: 80px;
    font-size: 30px;
    color: #000;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.reserva-comic-form select{
	font-size:16px;
}

/* Ajuste para que los inputs se vean bien en Safari/iOS */
.reserva-comic-form input {
    -webkit-appearance: none;
}

/* =========================================
   ESTROCTURA DE COLUMNAS (FECHA Y HORA)
   ========================================= */
.form-row-split {
	display: flex;
    gap: 6px;
    width: 100%;
    margin-bottom: -4px;
}

.form-group.half {
    width: 50%;
}

/* .form-group {
    margin-bottom: 25px;
} */

/* =========================================
   BOTÓN DE ENVIAR (ADAPTADO DE TU CÓDIGO)
   ========================================= */
.reserva-comic-form input[type="submit"] {
    font-family: 'Satoshi', sans-serif !important;
    font-size: 43px; /* Tamaño ajustado para botón de form */
    font-weight: 700;
    color: #000000;
    
    /* El color naranja del figma */
    background-color: #F25C30; 
    
    /* Tu estilo de bordes */
    border: 5px solid #000000 !important;
    border-radius: 19px !important;
    
    /* Tu sombra */
    box-shadow: 6px 6px 0px #000000 !important;
    
    width: 100%;
    padding: 15px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s ease;
}

/* Hover del botón */
.reserva-comic-form input[type="submit"]:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #000000 !important;
    background-color: #ff7b55; /* Un naranja un pelín más claro al pasar el mouse */
}

/* =========================================
   RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 768px) {
    .reserva-comic-form {
        padding: 20px;
        border-width: 3px;
        box-shadow: 8px 8px 0px #000000; /* Sombra más pequeña en móvil */
    }
    
    .form-row-split {
        flex-direction: column;
        gap: 0;
    }
    
    .form-group.half {
        width: 100%;
    }
	
	
	.reserva-comic-form input:not([type="submit"]),
	.reserva-comic-form textarea,
	.reserva-comic-form select {
    height: 50px;
		font-size:16px;
	}
	
	.reserva-comic-form {
    padding: 16px 32px;
}

.reserva-comic-form label {
    font-size: 16px;
}
	.reserva-comic-form input[type="submit"]{
		font-size:24px;
	}
}

/************** ESTILOS FORMULARIO RESERVA COMIC *************/


@media (min-width: 1025px) and (max-width: 1600px) {
   
/* 	.elementor-90 .elementor-element.elementor-element-4a32eca .elementor-heading-title{
		font-size:70px !important;
	} */
	
	#inicio h1, #inicio h2{
		font-size:60px !important;
	}
	#inicio p{
		font-size:24px !important;
	}
	#inicio a{
		font-size:30px !important;
	}
	
	#carta h2, #reserva h2, #donde_estamos h2,  #contacto h2{
		font-size:50px !important;
	}
	
	#carta p, #reserva p, #donde_estamos p,  #contacto p{
		font-size:24px !important;
	}
	
	#carta a, #reserva a, #donde_estamos a  #contacto a{
		font-size:30px !important;
	}
	
	#comida{
		top:20px !important;
	}
		
	.reserva-comic-form label, .reserva-comic-form input:not([type="submit"]){
		font-size:20px;
	}
	.reserva-comic-form input[type="submit"]{
		font-size:24px;
	}
	
	.reserva-comic-form input:not([type="submit"]), .reserva-comic-form textarea, .reserva-comic-form select{
		height:50px
	}
	
	.reserva-comic-form{
		padding: 30px 60px 0px 60px;
	}
}