html { scroll-behavior: smooth; }

/*iconos de google*/
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}
span.size-40 {
	font-size: 40px;
	font-variation-settings: 'OPSZ' 40;
	color:black;
}

span.size-20 {
	font-size: 25px;
	font-variation-settings: 'OPSZ' 40;
	color:black;
}

.circle-icon {
	/* Propiedades del círculo */
	background-color: white; /* Color de fondo blanco */
	border-radius: 50%; /* Hace que el elemento sea un círculo */
	padding: 8px; /* Espacio alrededor del ícono */
	display: inline-flex; /* Permite centrar el ícono */
	align-items: center; /* Centra verticalmente */
	justify-content: center; /* Centra horizontalmente */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
/*****************************************/

/*Logo Ibiza*/
img.svg-img{
	width: 100px;
	height: auto;
	fill:white;
}

h1, h2, h3{
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
footer a{
	text-decoration:none;
}

h2{
	font-size:20px;
	font-weight:bold;
}
div.sucursal-id h2{
	margin:0;
}

h3{
	font-size:20px;
}

div.margeninferior{
	margin-bottom:80px;
}
/*********************************************************/

/* Estilo del contenedor principal para el botón de ayuda*/
.tooltip-container {
	position: relative; /* Es clave para posicionar la nube de texto */
	display: inline-block; /* Permite que el contenedor se ajuste al contenido */
}

/* Estilo de la nube de texto */
.tooltip-text {
	visibility: hidden; /* Oculta el elemento por defecto */
	width: 200px; /* Ancho de la nube */
	background-color: #555; /* Color de fondo */
	color: #fff; /* Color del texto */
	text-align: center; /* Alineación del texto */
	border-radius: 6px; /* Bordes redondeados */
	padding: 5px 5px; /* Espaciado interno */
	
	/* Posicionamiento y opacidad */
	position: absolute; /* Posiciona el elemento relativo a su contenedor */
	z-index: 1; /* Asegura que esté sobre otros elementos */
	bottom: 125%; /* Coloca la nube encima del ícono */
	left: 10%;
	margin-left: -60px; /* Centra la nube horizontalmente */
	opacity: 0; /* Totalmente transparente por defecto */
	transition: opacity 0.3s; /* Transición suave para la animación */
}

/* Estilo de la flecha de la nube de texto */
.tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 40%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Muestra la nube al pasar el cursor sobre el contenedor */
.tooltip-container:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}
/*********************************************************/

#campoTextoOculto,#campoTextoOculto2,#campoTextoOculto3,#campoTextoOculto4 {
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
}

textarea {
	width: 95%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ddd;
}
/*********************************************************/
.fondo-cabecera {
	/* Ruta de la imagen */
	background-image: url('/img/fondo-cabecera-grande.jpg');
	/* Opcional: Propiedades para controlar el comportamiento de la imagen */
	background-size: cover;       /* Cubre todo el espacio del div */
	background-position: center;  /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que la imagen se repita */
	height:200px;
}

@media only screen and (max-width: 600px) {
	.fondo-cabecera {
		/* Ruta de la imagen */
		background-image: url('/img/fondo-cabecera.jpg');
	}
}