/* variables.css */
:root {
	--negro: #000000;
	--blanco: #FFFFFF;
	--azul-logo: #000e6b;
	--azul: #000080; /*Azul marino*/
	--azul-cel: #b6d9f3; /*Azul celeste*/
	--azul-claro: #0582CA; /*Azul más claro: boton*/
	--azul-rey: #1c4e80; /*Azul rey*/
	--amarillo: #ffcd57; /*Amarillo: boton*/
	--rojo: #FF0000;

	--azul-celestial: #5E9BC7;
	--azul-maya: #81C3F5;
	--azul-lapis: #005594;
	--azul-oxford: #001D3D;

	--negro-rgb: 0, 0, 0;
	--blanco-rgb: 255, 255, 255;

}
/***********DECLARACIÓN DE FUENTES****************/
@font-face {
    font-family: 'Asap';
    src: url('../fonts/Asap-Regular.woff2') format('woff2'),
         url('../fonts/Asap-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Asap';
    src: url('../fonts/Asap-SemiBold.woff2') format('woff2'),
         url('../fonts/Asap-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Asap';
    src: url('../fonts/Asap-Bold.woff2') format('woff2'),
         url('../fonts/Asap-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
         url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fuente base */
body, button, input, select, textarea,
.ast-button, .ast-custom-button {
    font-family: 'Poppins', sans-serif; font-weight: 400; }

/* Párrafos, enlaces, texto normal */
p, a, li, span,
.entry-content, .wp-block-paragraph {
    font-family: 'Poppins', sans-serif; font-weight: 400; }

/* Negritas */
strong, b,
.wp-block-heading strong, .wp-block-paragraph strong, .has-bold-font-weight {
    font-weight: 700; }

/* Encabezados */
h1, h2, h3, h4, h5, h6,
.entry-title, .wp-block-heading { font-family: 'Asap', sans-serif; font-weight: 600; }

/* Elementos específicos de Gutenberg */
.wp-block-quote, .wp-block-pullquote, .wp-block-button__link, .wp-block-search__button,
.wp-block-file__button { font-family: 'Poppins', sans-serif; }

/* Widgets, menús, etc. */
.widget, .main-header-menu, .site-footer { font-family: 'Poppins', sans-serif; }

/*TEXTO*/
h1 {
	font-size: 3.5rem!important;
	line-height: 1.3!important;
}
h2 {
    font-size: 2.5rem!important;
	line-height: 1.3!important;
}
h3 {
    font-size: 1.5rem!important;
	line-height: 1.3!important;
}
p, a, li, span {
	font-size: 1rem!important;
    line-height: 1.3!important; 
}

/*OCULTAR ELEMENTOS*/
.ocultar {
	display: none;
}
/*JUSTIFICAR TEXTO*/
.justificado {
	text-align: justify!important;
}


/***********ASTRA****/
/************LOGOS Y MENU***********/

/***************CONTENEDOR PARA HEADER Y FOOTER*********/
/* Hacer el contenedor full width */
.site-header .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Asegurar que los elementos internos usen todo el ancho */
.site-header .ast-builder-grid-row {
    grid-column-gap: 0 !important;
}

/* Para las secciones del header */
.site-header-section {
    padding: 0 !important;
}

/* Eliminar espacio en el contenedor del footer */
.site-above-footer-wrap, .site-below-footer-wrap {
	padding-top: 0!important;
	padding-bottom: 0!important;
}

/****************MENU*********************/
/* *********Menú fijo con clase .sticky***** */
.main-header-bar.sticky,
.ast-mobile-header-wrap.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

body.menu-is-sticky .site-content,
body.menu-is-sticky #content {
  margin-top: 60px !important; /* Ajusta según la altura real del header */
}

/* Espacios laterales del header */
.site-header-section {
    padding: 0 1rem !important;
}

/**************Estilo de menú y submenú***********************/
.menu-item > a {
	border: 1px solid #000000!important;
	background: var(--azul-celestial)!important;
	color: var(--azul)!important;
	border-radius: 3px!important;
	font-size: 0.9rem!important;
	padding: 5px 17px!important; 
	display: flex!important;
	align-items: center!important;
	justify-content: center!important;
	transition: all 0.3s ease!important;
}
.menu-item:hover > a, .menu-item:focus > a {
	border: 2px solid #000000!important;
	background: var(--amarillo)!important;
	color: var(--negro)!important;
	font-size: 1rem!important;
	box-shadow: 3px 3px 3px #888!important;
} 
 .current-menu-item > a {
	background: var(--azul-lapis)!important;
	color: var(--blanco)!important;
} 


/***********MI SITIO WEB****/
/*********MENU y LOGOS *************/
/* Contenedor general del encabezado */
.div-marca {
	width: 100%;
	padding: 5px 20px;
}

/* Logo + texto Hidromira */
.div-logo {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.div-logo img {
	height: 70px;
	width: auto;
}

.div-logo-texto h2 {
	font-size: 1.5rem!important;
	color: var(--azul);
	margin: 0;
	padding: 0;
}

.div-logo-texto p {
	font-size: 0.8rem!important;
	color: var(--negro);
	margin: 0;
}


/* Adaptación a pantallas pequeñas */
@media (max-width: 768px) {
	.div-logo-texto h2 {
		font-size: 1rem!important;
	}

	.div-logo-texto p {
		font-size: 0.7rem!important;
	}
}

/*********FOOTER*************/
.div-footer { /*Tomado de div-ancho-completo*/
	margin-top: 0;
	margin-bottom: 0;
	padding: 0!important;
	margin-left: calc(-50vw + 50%)!important;
	margin-right: calc(-50vw + 50%)!important;
	max-width: 100vw!important;
	width: 100vw;
}
.div-footer {
	background: var(--azul-rey);
	color: var(--blanco);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 2rem!important;
}
/* ****Botones Redes Sociales**** */
.barra-redes {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

.social-icon {
	width: 60px;
	height: 60px;
	background: rgba(var(--blanco-rgb), 0.2);
	color: var(--blanco);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 24px!important;
	transition: all 0.4s ease;
}

.social-icon:hover {
	transform: rotate(360deg) scale(1.2);
}

.social-icon.facebook:hover {
	background: #3b5998;
	color: var(--blanco);
}

.social-icon.instagram:hover {
	background: #e1306c;
	color: var(--blanco);
}
.social-icon.pinterest:hover {
	background: #c8232c ;
	color: var(--blanco);
}
.social-icon.linkedin:hover {
	background: #0e76a8 ;
	color: var(--blanco);
}

.social-icon.twitter:hover {
	background-color: #1da1f2;
	color: var(--blanco);
}

.social-icon.youtube:hover {
	background-color: #ff0000;
	color: var(--blanco);
}
.social-icon.mail:hover {
	background-color: #f9bc2e;
	color: var(--blanco);
}
.social-icon.whatsapp:hover {
	background-color: #25d366;
	color: var(--blanco);
}

/*Texto copyright al pie*/
.copyright-text {
	color: var(--blanco);
	font-size: 14px;
	margin-top: 10px;
}