/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    https://www.mercatomeraviglia.com
Description:  Tema hijo para el sitio web Mercato Meraviglia.
Author:       David Paredes Miranda
Author URI:   https://www.mercatomeraviglia.com
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  twentytwentyfive-child
*/

/* GENERALES */
/* TIPOGRAFIA */
@font-face {
	font-family: 'Dala Floda';
	src: url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.eot);
	src: url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.eot?#iefix) format('embedded-opentype'),
		url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.woff2) format('woff2'),
		url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.woff) format('woff'),
		url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.ttf) format('truetype'),
		url(//www.mercatomeraviglia.com/wp-content/themes/twentytwentyfive-child/fonts/Data Webfont/DalaFloda-Bold.svg#DalaFloda-Bold) format('svg');
	font-weight: bold;
	font-style: normal;
	font-size: 14px;
	font-display: swap;
}

/* ELIMINA EL TITULO */ 
.wp-block-post-title,
h1.entry-title {
    display: none !important;
}

/* 1. RESETEO TOTAL DE BORDES Y MÁRGENES */
/* Sobrescribimos las variables nativas de Twenty Twenty-Five en el cuerpo de la página */
body, 
.wp-site-blocks, 
main, 
article,
.entry-content, 
.post-content, 
.wp-block-post-content {
    --wp--style--global--content-size: 100vw !important;
    --wp--style--global--wide-size: 100vw !important;
    
    /* Forzado extra para eliminar cualquier max-width calculado por WordPress */
    max-width: 100% !important;
    width: 100% !important;
	margin-top: 0px; !important;
}

/* 1. Resetear las variables de espaciado nativas de WordPress a 0 */
:root, body, main, article, .entry-content, .post-content {
    --wp--preset--spacing--60: 0px !important;
    --wp--preset--spacing--50: 0px !important;
    --wp--preset--spacing--40: 0px !important;
}

/* Reseteamos el cálculo de padding y márgenes negativos de WordPress */

/* Ponemos a cero el padding raíz que genera la variable de WordPress */
:root, body {
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
}


.site-header-clean {
    position: relative;
    z-index: 10; /* Mayor que la imagen */
    width: 100%;
}


body.page {
    display: block !important;
    min-height: 100vh !important;
	font-family: 'Dala Floda';
}

/* Elimina contenedores basura de WordPress que limitan el ancho */
.wp-site-blocks, main, article {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- ENCABEZADO Y BANNER --- */
 /* Contenedor principal del encabezado */
.encabezado-principal {
  width: 100%;
  background-color: #ffffff; /* Cambia el fondo si lo deseas */
  padding: 2px 4% 2px 3%;
  box-sizing: border-box;
}

/* Menú en formato Flexbox */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Empuja las redes sociales hacia la derecha */
.menu li:first-child {
  margin-right: auto;
}

/* Espaciado uniforme entre los iconos sociales */
.menu li:not(:first-child) {
  margin-left: 20px;
}

/* Estilos para el banner/logo principal */
.menu .banner {
  height: 100px; /* Ajusta la altura según tu diseño */
  width: auto;
  display: block;
}

/* Estilos para los iconos de redes sociales */
.menu li a img {
  height: 50px; /* Tamaño estándar para iconos sociales */
  width: auto;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Efecto visual al pasar el cursor sobre las redes */
.menu li a:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}

/* --- RESPONSIVE: MÓVIL VERTICAL (Portrait) --- */
@media (max-width: 480px) and (orientation: portrait) {
    .fondo-pantalla {
        /* Se eliminó '!important' innecesario al corregir la base */
        object-position: 100% 100%; /* Tu ajuste específico para el Samsung A13 */
    }

    .menu .banner {
	  height: 50px; /* Ajusta la altura según tu diseño */
	  width: auto;
	  display: block;
	}

    .menu li a img {
        width: 30px;
        height: 30px;
    }
	.barra-piepagina{
		font-size: 10px;
	}
	
	.encabezado-principal {
      width: 100%;
      background-color: #ffffff; /* Cambia el fondo si lo deseas */
      padding: 2px 3% 2px 1%;
      box-sizing: border-box;
    }

}

/* --- RESPONSIVE: MÓVIL HORIZONTAL (Landscape) --- */
@media (max-width: 932px) and (orientation: landscape) { 
    /* Actualizado a 932px para cubrir el ancho de tu Samsung A13 en horizontal */
    .menu .banner {
	  height: 50px; /* Ajusta la altura según tu diseño */
	  width: auto;
	  display: block;
	}
	
	.menu li a img {
        width: 30px;
        height: 30px;
    }
	
	.barra-piepagina{
		font-size: 10px;
	}
	
	.encabezado-principal {
      width: 100%;
      background-color: #ffffff; /* Cambia el fondo si lo deseas */
      padding: 2px 3% 2px 2.5%;
      box-sizing: border-box;
    }
}

/* --- EFECTOS DE INTERACCIÓN (Hover y Activo) --- */

/* 1. Definimos el estado inicial suave para las imágenes de los enlaces */
.menu a img {
    opacity: 0.85; /* Se ven ligeramente translúcidos por defecto */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Controla la velocidad de la animación */
}

/* 2. Efecto al pasar el mouse por encima (Escritorio) o al tocarlos (Móvil) */
.menu a:hover img,
.menu a:active img {
    opacity: 1; /* Se iluminan al 100% */
    transform: scale(1.15); /* Se agrandan un 15% de forma fluida */
}

.barra-piepagina {
    font-size: 12px;
}