/*
Theme Name: La Casita
Theme URI: 
Description: Tema personalizado para Lacasita.
Author: VICUO
Author URI: 
Template: twentytwentyfive
Version: 1.0.0
Text Domain: lacasita
*/

/* Importar estilos del tema padre */
@import url("../twentytwentyfive/style.css");


/* FONTS */
@font-face {
  font-family: 'MacanPanWeb-Semibold';
  src: url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Semibold.woff2') format('woff2'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Semibold.woff') format('woff'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Semibold.eot') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MacanPanWeb-Book';
  src: url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Book.woff2') format('woff2'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Book.woff') format('woff'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Book.eot') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MacanPanWeb-Light';
  src: url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Light.woff2') format('woff2'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Light.woff') format('woff'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Light.eot') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MacanPanWeb-Regular';
  src: url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Regular.woff2') format('woff2'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Regular.woff') format('woff'),
       url('/wp-content/themes/lacasita/assets/fonts/macan/MacanPanWeb-Regular.eot') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



body {
  background-color: #EAE9E5;
  font-family: 'MacanPanWeb-Book', sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.035em; 
  color: #343434;
}


/* MÓVIL */
/* Background */
.has-modal-open .is-menu-open {
  background-color: #CAC9C5 !important;
}

/* QUITAR MARGEN SUPERIOR home */

/* Elimina margen superior dentro de .wp-site-blocks en HOME */
body.home .wp-site-blocks > * {
  margin-block-start: 0 !important;
}

/* También fuerza que cualquier grupo o bloque principal no tenga espacio extra */
body.home .wp-site-blocks,
body.home .wp-site-blocks > * {
  padding-top: 0 !important;
}

/* En caso de que haya margen individual en main o grupo envolvente */
body.home main {
 margin-top: 0 !important;
 padding-top: 0 !important;
}

body.home .wp-block-group {
  margin-top: 0 !important;
 /* padding-top: 0 !important; */
}


/* QUITAR MARGEN SUPERIOR páginas interiores */

/* Elimina margen superior dentro de .wp-site-blocks en HOME */
body .wp-site-blocks > * {
  margin-block-start: 0 !important;
}

/* También fuerza que cualquier grupo o bloque principal no tenga espacio extra */
/*
body .wp-site-blocks,
body .wp-site-blocks > * {
  padding-top: 0 !important;
}
*/

body main,
body .wp-site-blocks > main {
  padding-top: 0 !important;
}


/* En caso de que haya margen individual en main o grupo envolvente */
body main {
 margin-top: 0 !important;
 padding-top: 0 !important;
}

/*
body main,
body .wp-site-blocks > main { padding-top: 0 !important; }
*/

body .wp-block-group {
  margin-top: 0 !important;
 /* padding-top: 0 !important; */
}


/* Evitar scroll horizontal en home */
body.home {
  overflow-x: hidden;
}

/* Evitar margen/padding en html y body para evitar hueco arriba */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Estilos generales para home */
body.home main {
  padding-top: 100px; /* Altura header fijo */
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}



/* páginas interiores */

/* Evitar scroll horizontal */
body {
  overflow-x: hidden;
}

/* Estilos generales */
body main {
  padding-top: 100px; /* Altura header fijo */
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}





/* Header */

/* MAIN MENU (Items) */
/* === Aplicar fuente personalizada al header y al menú === */
.site-header,
.site-header a,
.site-header nav,
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  color: #ffffff;  
  font-size: 16px;
  text-decoration: none;
  letter-spacing: -0.010em;
}

.site-header .wp-block-navigation a {
	margin-right: 14px;
}


	@media (max-width: 1024px) {
	  .site-header .wp-block-navigation a {
	  	margin-right: 0px;
	  }
	}

	@media (max-width: 932px) {
	  .site-header .wp-block-navigation a {
	    margin-right: 0px;
	  }
	}

	@media (max-width: 900px) {
	  .site-header .wp-block-navigation a {
	    font-size: 12px;
	    margin-right: 0px;
	  }
	}

	@media (max-width: 800px) {
	  .site-header .wp-block-navigation a {
	    font-size: 9px;
	  }
	}

	@media (max-width: 600px) {
	  .site-header .wp-block-navigation a {
	    font-size: 20px;
	  }
	}	



	/* Menú móvil */
	@media (max-width: 782px) {
	  /* Contenedor del menú desplegado */
	  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	    justify-content: flex-start !important;
	    align-items: flex-start !important;
	    text-align: left !important;
	  }

	  /* Cada item ocupa todo el ancho */
	  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	    align-self: stretch !important;
	  }

	  /* Enlaces alineados a la izquierda */
	  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	    display: block !important;
	    width: 100% !important;
	    text-align: left !important;
	  }
	}



/* Hover */
/* Transición suave en el color de los ítems del menú */
.site-header .wp-block-navigation a {
  transition: color 0.3s ease;
}
/* Cambiar color al hacer hover en ítems del menú */
.site-header .wp-block-navigation a:hover {
  color: #FD675B;
}

/* Active  (Estilo para el ítem activo del menú) */
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current_page_item > a,
.wp-block-navigation-item.is-current-page > a {
  color: #FD675B !important; 
  background-color: transparent !important; /* Asegura que no tenga fondo blanco */
}


/* Elimina el recuadro de los elementos dentro de header */
.site-header a:focus,
.site-header a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}



/* Header general */
body.home .site-header {
  
  /* top: 0; */

  /* z-index: 1000; */
  /* background-color: var(--color-home-bg); */
/*  
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
*/

/*  
  gap: 1rem;
*/ 
/* 
  box-sizing: border-box;
 */

  /* background-color: blue; /* debug */
  margin-top: 10px !important;
}

body .site-header {
  margin-top: 10px !important;
}


	@media (max-width: 782px) {	  
	  body.home .site-header {
	   margin-top: 0px !important;
	  }
	  
	  body .site-header {
	   margin-top: 0px !important;
	  }
	}



.site-header {
  /* position: sticky; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* background: transparent; /* en home empieza transparente */
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estado al hacer scroll */
.site-header.is-sticky {
  background: rgba(255, 255, 255, 0.2); /* Blanco translúcido */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  backdrop-filter: saturate(140%) blur(6px);
  padding: 0.4rem 2rem; /* ↓ Reduce el alto (antes estaba en 0.75rem) */
}

/*
.site-header.is-sticky .wp-block-site-logo img {
  max-height: 50px; /* ↓ Reduce el logo */
/*
}
*/


.site-header.is-sticky .logo img {
  max-height: 50px; /* ↓ Reduce el logo */
}

.site-header.is-sticky .logo-positivo img {
  max-height: 50px; /* ↓ Reduce el logo */
}



.site-header.is-sticky .wp-block-navigation a {
  line-height: 1.2; /* ↓ Reduce espacio vertical en enlaces */
}

/* Hover menú sticky home */
.site-header.is-sticky nav a:hover {
	color: #FD675B !important;
}

/* Hover botón contacto home */
.site-header.is-sticky .contacto-btn a:hover {
	color: #ffffff !important;
}

	/* ===== Desactivar header fijo en móvil ===== */
	@media (max-width: 600px) {
	  /* 1) El header deja de ser fixed en móvil */
	  .site-header {
	    position: relative !important;
	    top: auto !important;
	    left: auto !important;
	    right: auto !important;
	    z-index: 10 !important;
	    max-width: 100% !important;  /* que no se limite a 1200px */
	    margin: 0 !important;        /* elimina el centrado con margin auto */
	    padding: 1rem 1rem !important;/* ajusta si quieres */
	    background: transparent !important; /* como prefieras */
	    box-shadow: none !important;
	  }

	  /* 2) Si tu JS añade/quita .is-sticky, neutralízalo en móvil */
	  .site-header.is-sticky {
	    position: relative !important;
	    background: transparent !important;
	    box-shadow: none !important;
	    padding: 1rem 1rem !important;
	  }

	  /* 3) Como el header ya no es fijo, quita el hueco extra arriba del contenido */
	  body.home main {
	    padding-top: 0 !important;
	  }
	  body main {
	    padding-top: 0 !important;
	  }

	  /* Color backgroun del Main Menú en móvil */
	  header.wp-block-template-part {
	  	background: #343434;
	  }

	}







/* Interiores mantienen su color */
/* body:not(.home) .site-header{ background: var(--color-inner-bg); } */

/* Colores de menú/botón al scroll (home) */
/*
body.home .site-header .wp-block-navigation a{ color:#fff; }
*/

body.home .site-header.is-sticky .wp-block-navigation a { 
	color:#1C1B1B; 
}

body .site-header.is-sticky .wp-block-navigation a { 
	color:#1C1B1B; 
}


/*
body.home .site-header .contacto-btn a{ color:#fff; border-color:#fff; }
*/

body.home .site-header.is-sticky .contacto-btn a { 
	color:#1C1B1B; 
	border-color:#1C1B1B; 
}

body .site-header.is-sticky .contacto-btn a { 
	color:#1C1B1B; 
	border-color:#1C1B1B; 
}

/*
body.home .site-header.is-sticky .contacto-btn a:hover{ background:#28BDCF; color:#fff; }
*/

/* Compensación barra admin WP (opcional) */
@media (min-width:783px){ body.admin-bar .site-header{ top:32px; } }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }







/* Header páginas interiores */
body:not(.home) .site-header {
  /* background-color: var(--color-inner-bg); */
  /* position: relative; */
  box-shadow: none;
  max-width: 1200px;
  margin: 0 auto;
  border: none;
}


/* Logo */


/*
body .wp-block-site-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

body .wp-block-site-logo img {
  max-height: 80px;
  width: auto;
  display: block;
}

	@media (max-width: 600px) {
	  body .wp-block-site-logo img {
	    max-height: 60px;
	  }
	}
*/


body .logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

body .logo img {
  max-height: 80px;
  width: auto;
  display: block;
}

	@media (max-width: 600px) {
	  body .logo img {
	    max-height: 60px;
	  }
	}


body .logo-positivo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

body .logo-positivo img {
  max-height: 70px;
  width: auto;
  display: block;
}

	@media (max-width: 600px) {
	  body .logo-positivo img {
	    max-height: 53px;
	  }
	}






/* Bloque de Navegación (items de menú definidos más arriba) */
body/*.home*/ .wp-block-navigation {
  flex: 1 1 auto;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0;
  margin: 0;
}

/* Botón contacto */
.contacto-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.contacto-btn a {
  text-decoration: none;
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
  padding: 10px 30px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contacto-btn a:hover {
  background-color: #28BDCF;
  border: 1px solid #28BDCF !important;
}

	@media (max-width: 1024px) {
	  .contacto-btn a {
	    font-size: 10px !important;
	    border: 1px solid #ffffff;
	    /* padding: 8px; */
	  }
	}

	@media (max-width: 700px) {
	  .contacto-btn a {
	    font-size: 6px !important;
	    border: 1px solid #ffffff;  
	    padding: 2px; 
	  }
	}

	@media (max-width: 600px) {
	  .contacto-btn a {
	    font-size: 6px !important;
	    border: 1px solid #ffffff;
	    padding: 8px;
	  }
	}


/* MetaSlider */

/* MetaSlider full width */
body.home #metaslider-id-54 {
  position: relative;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  top: -1px;
  left: 0;
  z-index: 1; /* debajo del header */
}

body.home #metaslider-id-54 .flexslider .caption-wrap {
  background: transparent;
  opacity: 1;
}


body.home #metaslider-id-54 .caption-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Elementos en columna */
  height: 100%;
  width: 100%;
  text-align: center;
}

body.home h1,
body h1 {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  font-size: clamp(32px, 8vw, 80px);
  line-height: 1;
  color: #ffffff !important;
  letter-spacing: clamp(-2.5px, -1vw, 0px);
  width: 800px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px; 
}

	@media (max-width: 1270px) {
	  body.home h1,
	  body h1 {  
		margin-top: 100px;
	  }  
	}

	@media (max-width: 1024px) {
	  body.home h1,
	  body h1 {  
	    width: 420px;
	    padding: 0 10px;
	    font-size: 40px;
	    letter-spacing: -1px;
	  }  
	}

	@media (max-width: 835px) {
	  body.home h1,
	  body h1 {  
	    font-size: 30px;
	    letter-spacing: 0;
	    margin-top: 40px;
	    margin-bottom: 20px; 
	  }  
	}


	@media (max-width: 600px) {
	  body.home h1,
	  body h1 {
	    letter-spacing: 0;
	    width: 60%;
	    font-size: 16px;
	    /* margin-top: 80px; */
	  }
	}


/* Párrafo slider */
body.home #metaslider-id-54 p {
	width: 400px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: clamp(16px, 4vw, 32px);
}

	@media (max-width: 835px) {
	  body.home #metaslider-id-54 p {  
	  	font-size: 14px;
	    line-height: 18px; 
	    width: 50%;
	    line-height: 16px;
	  }  
	}

	@media (max-width: 600px) {
	  body.home #metaslider-id-54 p {
	    font-size: 10px;
	    width: 60%;
	    line-height: 12px;
	    margin-bottom: 20px;
	  }
	}



/* Botón slider */
.btn-slider {
  display: inline-block;
  padding: 24px 60px;
  background-color: #FD675B;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-slider:hover {
  background-color: #28BDCF;
  /* transform: scale(1.03); */
}


	@media (max-width: 835px) {
	  .btn-slider {  
	  	font-size: 14px; 
	  	padding: 18px 50px;
	  }  
	}

	@media (max-width: 600px) {
	  .btn-slider {
	  	font-size: 10px; 
	    padding: 10px 40px;
	  }
	}



/* Ajustes contenedores padding/margin en home */
body.home .entry-content.wp-block-post-content,
body.home .alignnormal {
  padding: 0 !important;
  margin: 0 !important;
}

/* Ajustes contenedores padding/margin en páginas interiores */
body .entry-content.wp-block-post-content,
body .alignnormal {
  padding: 0 !important;
  margin: 0 !important;
}



h2 {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  color: #FD675B;
  font-size: clamp(28px, 4.5vw, 50px); /* min 28px, escala con vw, máx 50px */
  line-height: 1.24;                  /* 62px / 50px = 1.24 → escala con el font-size */
  letter-spacing: -0.04em;            /* -2px sobre 50px ≈ -0.04em (escala con el tamaño) */
  margin: 0;
}



body.home h2 {
	width: 100% !important;
}


.p2 {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  color: #ffffff;
  font-size: clamp(18px, 3.2vw, 33px); /* min 18px, escala con vw, máx 33px */
  line-height: 1.3;                       /* 33px / 33px = 1 → escala con el font-size */
  letter-spacing: -0.035em;             /* -1.5px / 33px ≈ -0.045em */
  margin: 0 !important;
  padding: 0 !important;
}



/* =====================
   Sección columnas Home
   ===================== */

/* Quitar límites y gaps */
body.home .wp-block-columns.is-layout-flex {
  align-items: stretch;
  gap: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* esto afecta también a las PÁGINAS INTERIORES */
body .wp-block-columns.is-layout-flex {
  align-items: stretch;
  gap: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Home Bloque 1 */

.home-bloque1 {
	margin: 0 !important;
	padding: 0 !important;
	margin-top: 65px !important;
}


/* Columna izquierda: imagen cubre todo */
.home-columna-izquierda {
}

.home-columna-izquierda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Columna derecha */

/* Columna derecha: flex vertical para empujar fila 2 abajo */
.home-columna-derecha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}

/* Fila 1 */
.home-fila1 {
  background: #ffffff;
  height: 66.66%;
  padding: clamp(20px, 6vw, 80px); /* min 20px, escala con vw, max 80px */
}


/* Fila 2 */
.home-fila2 {
  background: #FD675B;
  height: 33.33%;
  padding: clamp(20px, 6vw, 80px) clamp(20px, 6vw, 80px) 0 !important;
}


/* Botón fila 2 */
.home-fila2 .wp-block-button__link {
  font-size: clamp(14px, 1.5vw, 18px);
  margin: 0 !important;
  background: #343434;
  padding: 23px 80px;
  margin-top: 20px !important;
  transition: background-color 0.3s ease;
}

.home-fila2 .wp-block-button__link:hover {
  background: #4B4B4B;
}



	@media (max-width: 1400px) {
		.home-fila2 .p2 {
			font-size: 21px; 
			/* color: black; */
			/* padding: 0; */
		}

		/* Botón fila 2 */
		.home-fila2 .wp-block-button__link {
			/* padding: 23px 80px; */
		}				
	}

	@media (max-width: 1360px) {
		.home-fila1 h2 {
			font-size: 40px;
		}

		.home-fila2 .p2 {		
		}

		/* Botón fila 2 */
		.home-fila2 .wp-block-button__link {
			/* background: black; */
			/* padding: 15px 60px; */
		}	

	}	

	@media (max-width: 1130px) {
		.home-fila1 h2{
			font-size: 32px;
		}

		.home-fila2 .p2 {
			font-size: 18px;
		}

		/* Botón fila 2 */
		.home-fila2 .wp-block-button__link {
			padding: 13px 50px; 
		}	


	}

	@media (max-width: 900px) {
		.home-fila1 h2{
			font-size: 25px;
		}

		.home-fila2 .p2 {
			font-size: 14px;
		}
	}



	/* Responsive: columnas en vertical */
	@media (max-width: 768px) {
	  body.home .wp-block-columns.is-layout-flex {
	    flex-direction: column;
	  }

	  body .wp-block-columns.is-layout-flex {
	  }

	  .home-columna-derecha {
	    justify-content: flex-start;
	  }

	  .home-bloque1 { 
	  	margin-top: 25px !important;
	  }

	  .home-fila1,
	  .home-fila2 {
	    padding: 5vw;
	  }

	  .home-fila2 .wp-block-button__link {
	    align-self: center;
	  }

	  .home-fila2 .p2 {
	  	font-size: 16px;
	  }

	  /* Botón fila 2 */
	  .home-fila2 .wp-block-button__link {
		margin-bottom: 30px !important;
	  }	

	}


/* Home Bloque 2 */

/* Invertir columnas solo en el bloque indicado */
.home-bloque2 {
  flex-direction: row-reverse;
  margin-top: 65px !important;
}


.home-bloque2 h2 {
  color: #28BDCF;
}


/* Bloque 2 Fila 2 */
.home-bloque2 .home-fila2 {
  background: #28BDCF;
}


	/* Bloque 2 móvil */
	@media (max-width: 768px) {
	  .home-bloque2 {
	    flex-direction: column !important; /* Para que mantenga en columna la imagen por delante en este caso */
	    margin-top: 25px !important;
	  }
	}


/* Home Bloque 3 */

.home-bloque3 {
  margin-top: 65px !important;
}

.home-bloque3 h2 {
  color: #80895E;
}

/* Bloque 3 Fila 2 */
.home-bloque3 .home-fila2 {
  background: #80895E;
}

	/* Bloque 2 móvil */
	@media (max-width: 768px) {
	  .home-bloque3 {
	    margin-top: 25px !important;
	  }
	}



/* Newsletter Home */

/* ==== Estilo bloque newsletter MailPoet integrado ==== */

/* ===== Newsletter Home ===== */
.newsletter-home {
  background-color: #ffffff;
  color: #1C1B1B;
  width: 80% !important;         /* ancho del bloque */
  max-width: 80% !important;     /* para que no lo limite Gutenberg */
  margin-left: auto !important;  /* centra horizontalmente */
  margin-right: auto !important; 
  text-align: center;
  border-radius: 8px;
  padding: clamp(60px, 8vw, 120px) clamp(30px, 6vw, 80px);
}

/* Márgenes Newsletter Home */
body.home .wp-block-group .newsletter-home {
	margin-top: 100px !important;
	margin-bottom: 100px !important;
}


/* En móviles y tablets pequeñas, ancho completo */
@media (max-width: 768px) {
  .newsletter-home {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.home .wp-block-group .newsletter-home {
	margin-top: 25px !important;
	margin-bottom: 25px !important;
  }
}



/* Título h3 */
.newsletter-home h3 {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  margin-bottom: 15px;
  letter-spacing: -0.04em; 
}

	@media (max-width: 768px) {
		.newsletter-home h3 {
			font-size: 18px;
		}
	}

/* Párrafo */
.newsletter-home p {
  font-family: 'MacanPanWeb-Light', sans-serif;
  font-size: 15px;
  line-height: 20px;
  margin-top: 40px;
  margin-bottom: 26px;
  width: 274px;
}

/* Formulario MailPoet */
.newsletter-home form {
  display: flex;
  flex-direction: column; /* 👉 Pone input arriba y botón debajo */
  align-items: center;    /* Centra los elementos horizontalmente */
  gap: 10px;
}


/* Campo de email */
.newsletter-home input[type="email"] {
  padding: 15px 20px;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  flex: 1 1 250px;
  width: 274px !important;
  height: 43px !important;
  border: 1px solid #202020;
  background: #EDEDED;
  text-align: center;
}

/*
	@media (max-width: 768px) {
		.newsletter-home input[type="email"] {
			font-size: 12px;
		}
	}
*/

/* Botón de enviar */
.newsletter-home button,
.newsletter-home input[type="submit"] {
  background-color: #28BDCF;
  color: #fff;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 274px !important;
  height: 43px !important;
}

/* Hover del botón */
.newsletter-home button:hover,
.newsletter-home input[type="submit"]:hover {
  background-color: #4B4B4B;
}

/* Márgen entre input y botón */
.mailpoet_form .mailpoet_paragraph {
	margin-bottom: 10px !important;
}




/* ===== FOOTER ===== */

body.home .footer { 
	padding-top: 100px !important; 
}


.footer {
	font-family: 'MacanPanWeb-Light', sans-serif;
	background: #CAC9C5;
	padding: 100px 100px 0;
	color: #1C1B1B;
	font-size: 14px;
	line-height: 25px;
}

	@media (max-width: 700px) {
		.footer {
			padding-bottom: 50px;
		}
	}


.footer ul {
	list-style: none; /* Quita los bullets */
	margin: 0 !important;
	padding: 0 !important;
}

	@media (max-width: 700px) {
	  .footer ul {
			margin-bottom: 20px !important;
	  }
	}


.footer a {
	text-decoration: none;
	font-family: 'MacanPanWeb-Regular', sans-serif;
	transition: text-decoration-color 0.3s ease, color 0.3s ease;
	text-decoration-color: transparent; /* Oculta subrayado inicial */
	letter-spacing: -0.3px;
}

.footer a:hover {
	text-decoration: underline;
	text-decoration-color: currentColor; /* Usa el color actual del texto */
}


.footer .wp-block-image,
.site-footer .wp-block-image {
  max-width: none;         /* quita límites del layout */
}
.footer .wp-block-image img,
.site-footer .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.footer a[href^="mailto:"] {
  font-family: 'MacanPanWeb-Light', sans-serif;
  font-size: 26px;
}

	@media (max-width: 1160px) {
		.footer a[href^="mailto:"] {
		   font-size: 20px;
		}
	}

	@media (max-width: 950px) {
		.footer a[href^="mailto:"] {
		   font-size: 15px;
		}
	}
	
	@media (max-width: 700px) {
		.footer a[href^="mailto:"] {
		   font-family: 'MacanPanWeb-Book', sans-serif;
		   font-size: 15px;
		}
	}



.footer p {
}

.footer #mailpoet_form_1 {
}

.footer #mailpoet_form_1 form.mailpoet_form {
	padding: 0;
}

/* Campo de email */
.footer #mailpoet_form_1 input[type="email"] {
  padding: 15px 20px;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  flex: 1 1 250px;
  width: 227px !important;
  height: 40px !important;
  border: 1px solid #202020;
  background: #EDEDED;
  text-align: center;
}

	@media (max-width: 700px) {
		.footer #mailpoet_form_1 input[type="email"]  {
		   font-size: 13px !important;
		}
	}


/* Botón de enviar */
.footer #mailpoet_form_1 button,
.footer #mailpoet_form_1 input[type="submit"] {
  background-color: #343434;
  color: #fff;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 227px !important;
  height: 40px !important;
}

/* Hover del botón */
.footer #mailpoet_form_1 button:hover,
.footer #mailpoet_form_1 input[type="submit"]:hover {
  background-color: #4B4B4B;
}

.footer .footer-last-fila {
	border-top: 1px solid #D8D6D0;
	padding: 17px 0;
}

.footer .footer-last-fila a,
.footer .footer-last-fila p {
	padding: 0 !important;
	margin: 0 !important;
}

.footer .footer-last-fila a {
	/* border: 1px solid yellow; */
}


.footer .parrafo-kit {
	margin-top: 60px;
}




/* ///// PÁGINAS INTERIORES  ///// */

.site-header.is-sticky.interiores  {
	box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.site-header.interiores nav a {
	color: #343434 !important;
}

/* Hover */
.site-header.interiores nav a:hover {
  color: #FD675B !important;
}

/* Active  (Estilo para el ítem activo del menú) */
.site-header.interiores .current-menu-item > a,
.site-header.interiores .current_page_item > a,
.site-header.interiores .is-current-page > a {
  color: #FD675B !important; 
}


.site-header.interiores .contacto-btn a {
  color: #343434;
  border: 1px solid #343434;
}

.site-header.interiores .contacto-btn a:hover {
  color: #EAE9E5;
}


	/* Menú móvil */
	@media (max-width: 782px) {
	  /* Menú hamburguesa en interiores */
	  .site-header.interiores button.wp-block-navigation__responsive-container-open {
	    color: #343434;
	  }
	}



h1.wp-block-heading {
	color: #FD675B !important;
	width: 900px;
	margin-top: 116px !important;
}

	@media (max-width: 1024px) {
	  h1.wp-block-heading {  
	    width: 500px;
	    margin-top: 90px !important;
	  }  
	}

	@media (max-width: 835px) {
	  h1.wp-block-heading {  
	    width: 370px;
	    margin-top: 70px !important;
	  }  
	}

	@media (max-width: 600px) {
	  h1.wp-block-heading {  
	    width: 200px;
	    margin-top: 0 !important;
	  }  
	}


h1.wp-block-heading::after {
  content: "";
  display: block;
  width: 345px;         /* largo de la línea */
  height: 6px;         /* grosor */
  background: #FD675B;    /* color de la línea */
  margin: 85px auto 100px; /* separa del texto y centra */
}

	@media (max-width: 1024px) {
	  h1.wp-block-heading::after {  
	    height: 4px; 
	    width: 195px;
	    margin: 50px auto;
	  }  
	}

	@media (max-width: 835px) {
	  h1.wp-block-heading::after {  
	    height: 3px;
	    width: 150px; 
	  }  
	}

	@media (max-width: 600px) {
	  h1.wp-block-heading::after {  
	    height: 2px;
	    width: 80px; 
	    margin: 20px auto;
	  }  
	}

/* Content páginas interiores */
.fila1 {
	margin-top: 0;
	position: relative; 
    overflow: visible; /* Permitir que algo sobresalga del conjunto */
}

.columna-central {
	background: #ffffff;
	padding: 100px !important;
	position: relative;
	/* z-index: 1; */
}

	@media (max-width: 600px) {
		.columna-central {
			padding: 40px !important;
		}
	}


/* h2 páginas interiores */
body:not(.home) h2 {
  color: #28BDCF;
}

body:not(.home) h2::after {
  content: "";
  display: block;
  width: 345px;         /* largo de la línea */
  height: 6px;         /* grosor */
  background: #28BDCF;    /* color de la línea */
  margin: 85px 0; /* separa del texto y centra */
}

	@media (max-width: 1024px) {
	  body:not(.home) h2::after {  
	    height: 4px; 
	    width: 195px;
	    margin: 50px 0;
	  }  
	}

	@media (max-width: 835px) {
	  body:not(.home) h2::after {  
	    height: 3px;
	    width: 150px; 
	  }  
	}

	@media (max-width: 600px) {
	  body:not(.home) h2::after {  
	    height: 2px;
	    width: 80px; 
	    margin: 40px 0;
	  }  
	}


body:not(.home) .p2 {
  color: #28BDCF;
  font-size: 20px;
  width: 300px;
}
	
	@media (max-width: 600px) {
		body:not(.home) .p2 {
			font-size: 15px;
			width: 180px;
		}
	}

.columna-central p {
	width: 300px;
	margin: 80px 0;
	position: relative;
	z-index: 20;
}


	@media (max-width: 600px) {
		.columna-central p {
			margin: 40px 0;
			position: static;
		}
	}

body strong {
	font-family: 'MacanPanWeb-Semibold', sans-serif;
}


/* h3 páginas interiores */
body:not(.home) h3 {
  font-family: 'MacanPanWeb-Semibold', sans-serif;
  color: #FD675B;
  font-size: 33px;
  line-height: 40px;
  letter-spacing: -0.04em;
  width: 300px;
  position: relative;
  z-index: 20;
}

	@media (max-width: 600px) {
		body:not(.home) h3 {
			font-size: 15px;
  			line-height: 19px;
  			width: 180px;
		}
	}

.columna-central {
}

.columna-derecha {
}

.columna-izquierda {
}


/* Imagen de la columna derecha: tamaño fluido y acotado */
.columna-izquierda .img-columna-izquierda img {
	width: auto !important;
    height: auto;
    /* se encoge con el viewport, sin crecer más de “grande” */
    max-width: clamp(300px, 40vw, 900px) !important; /* ajusta 300 / 40vw / 900 a tu gusto */
}


/* 2) Hacer que “flote” sobre la columna central y 3) darle margen superior */
.columna-izquierda .img-columna-izquierda {
  position: relative;   /* necesario para z-index */
  z-index: 10;           /* por encima de la central */
  margin-top: 625px;     /* tu margen superior */
  /* margin-left: -170px; */  /* desplázala hacia la izquierda para que invada la central */
  /* si prefieres usar transform: translateX(-120px); también vale */
}

@media (max-width: 781px) {
  .columna-izquierda .img-columna-izquierda {
    margin-left: 0;
    margin-top: 20px; /* opcional, ajusta */
  }
  .columna-izquierda .img-columna-izquierda img{
    max-width: 50% !important; /* llena el ancho disponible en móvil */
  }
}



/* Imagen de la columna derecha: tamaño fluido y acotado */
.columna-derecha .img-columna-derecha img{
  width: auto !important;
  height: auto;
  /* se encoge con el viewport, sin crecer más de “grande” */
  max-width: clamp(300px, 40vw, 900px) !important; /* ajusta 300 / 40vw / 900 a tu gusto */
}


/* 2) Hacer que “flote” sobre la columna central y 3) darle margen superior */
.columna-derecha .img-columna-derecha {
  position: relative;   /* necesario para z-index */
  z-index: 10;           /* por encima de la central */
  margin-top: 625px;     /* tu margen superior */
  margin-left: -170px;  /* desplázala hacia la izquierda para que invada la central */
  /* si prefieres usar transform: translateX(-120px); también vale */
}

@media (max-width: 781px) {
  .columna-derecha .img-columna-derecha {
    margin-left: 0;
    margin-top: 20px; /* opcional, ajusta */
  }
  .columna-derecha .img-columna-derecha img{
    max-width: 100% !important; /* llena el ancho disponible en móvil */
  }
}



/* Nosotros: ordenar columnas en móvil -> central, derecha, izquierda */
@media (max-width: 781px) {
  /* asegura layout de columnas en modo columna */
  .fila1 .wp-block-columns { 
    display: flex !important;
    flex-direction: column !important;
  }

  .fila1 .wp-block-column.columna-central   { order: 1; }
  .fila1 .wp-block-column.columna-derecha   { order: 2; }
  .fila1 .wp-block-column.columna-izquierda { order: 3; }
}


.fila2 {
	background: #D2D2D2;
	padding-top: 100px;
	padding-bottom: 100px;
}

.h2-centrado {
	width: 498px;
	margin: 0 auto;
	margin-bottom: 10px !important;
	text-align: center;
}

	@media (max-width: 781px) {
		.h2-centrado {
			width: 100%;
		}
	}

.h2-centrado::after {
	margin: 85px auto !important;
}


.pastilla-fila1, 
.pastilla-fila2 {
	background: #ffffff;
	padding: 50px 20px;
	border-radius: 13px;
	margin-right: 20px !important;
}

	@media (max-width: 781px) {
		.pastilla-fila1, 
		.pastilla-fila2 {			
			margin-right: 0 !important;
			margin-top: 10px !important;
		}
	}


h4:not(.footer h4) {
	font-family: 'MacanPanWeb-Semibold', sans-serif;
	font-size: 20px;
	line-height: 25px;
	color: #FD675B;
	letter-spacing: -0.04em;
	margin-bottom: 25px !important;
}

/*
.pastilla-fila1 p::after , 
.pastilla-fila2 p::after {
	content: "";
  	display: block;
  	width: 35px;         
 	height: 2px;         
  	background: #FD675B;    
  	margin-top: 60px; 
}
*/

.fila3 {
	background: #FD675B;
	padding: 100px;
	--pad-x: 100px;                /* ← iguala este valor al padding horizontal */
}

	@media (max-width: 781px) {
		.fila3 {			
			padding: 50px 20px;
			margin-right: 0 !important;
			margin-top: 10px !important;
		}
	}


.fila3 .h2-centrado {
	color: #ffffff;
}

.fila3 .h2-centrado::after {
	background: #ffffff;
}

.fila3 h3 {
	color: #ffffff !important;
}


/* La columna derecha empuja su contenido al borde derecho */
.fila3 .columna-derecha {
  display:flex;
  justify-content:flex-end;      /* contenido a la derecha */
  padding:0 !important;
  margin:0 !important;
}

/* Wrapper de la imagen: que no se estire y salte el padding (de la sección y el global) */
.fila3 .img-columna-derecha {
  display:block;
  width:max-content;             /* no ocupa todo el ancho */
  margin-top: 0;  /* Le quitamos el margin top que tiene la de arriba */
  margin-left:auto;              /* pega a la derecha de su columna */
  margin-right:calc(-1 * var(--pad-x) - var(--wp--style--root--padding-right, 0px)) !important;
  line-height: 0; /* Quita cualquier hueco de línea del wrapper */ 
}

/* 4) Imagen fluida */
/* Parte a tamaño original; solo se reduce si el viewport es menor */
.fila3 .img-columna-derecha img{
  width: auto !important;     /* usa el tamaño intrínseco */
  height: auto;
  max-width: 100vw !important;/* si el viewport es menor, se escala hacia abajo */
  transform: scale(.92);       /* << empieza “un poco” más pequeña */
  transform-origin: top right; 
  display: block;
  
}

	@media (max-width: 781px){
	  .fila3 .img-columna-derecha img{ transform: none; }
	}




	/* Responsive: en móvil no sobresalga */
	@media (max-width: 781px){
	  .fila3 .columna-derecha{ justify-content:center; }
	  .fila3 .img-columna-derecha{
	    width: auto;
	    margin-right:0 !important;
	  }
	  .fila3 .img-columna-derecha img{ max-width:100% !important; }
	}


.fila3 .columna-izquierda {
	max-width: 300px !important;
	background: #FD675B;
}

	@media (max-width: 781px){ 
		.fila3 .columna-izquierda {
			margin-bottom: 20px;
		}
	}	


.fila3 .columna-izquierda p {
}


/* 0) Asegura un contexto de apilado común */
.fila3{
  position: relative;
  isolation: isolate; /* evita interferencias de otros contextos */
}

/* 1) La imagen (derecha) por debajo */
.fila3 .img-columna-derecha{
  position: relative;
  z-index: 1;  /* capa inferior */
}

/* 2) El texto (izquierda) por encima */
.fila3 .columna-izquierda{
  position: relative;
  z-index: 3;  /* capa superior */
}
/* o, si prefieres solo ciertos elementos encima: */
.fila3 .columna-izquierda h2,
.fila3 .columna-izquierda h3,
.fila3 .columna-izquierda p{
  position: relative;
  z-index: 4;
}


.fila3 .pastilla-fila2 {
	background: none;
	padding-bottom: 0;
}

.fila3 .pastilla-fila2 h4 {
	color: #ffffff;
}


blockquote {
	border: none !important;
	width: 300px;
	margin: 0 auto !important;
	font-family: 'MacanPanWeb-Semibold', sans-serif;
	font-size: 36px !important;
	line-height: 44px;
	color: #FD675B;
	letter-spacing: -0.04em;
	padding: 150px 0 !important;
}


blockquote::after {
  content: "";
  display: block;
  width: 46px;         /* largo de la línea */
  height: 5px;         /* grosor */
  background: #FD675B !important;    /* color de la línea */
  margin: 70px 0 0 0; 
}


	@media (max-width: 1024px) {
      blockquote::after {  
	    height: 4px; 
	   
	    margin: 50px 0;
	  }  
	}

	@media (max-width: 835px) {
	  blockquote::after {  
	    height: 3px;
	     
	  }  
	}

	@media (max-width: 600px) {
	  blockquote::after {  
	    height: 2px;
	    margin: 40px 0;
	  }  
	}




/*  Página COLE  */
.cole.fila1 {
}

.cole.fila1{
  position: relative;
  background: url('https://www.lacasitaescuela.com/wp-content/uploads/2025/08/cole1.png') no-repeat center / cover;
}
.cole.fila1::before{ /* overlay opcional */ 
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}
/* .cole.fila1 > *{ position:relative; z-index:1; } */



/*  Página EXTRAESCOLARES  */
.extraescolares.fila1 {
}

.extraescolares.fila1{
  position: relative;
  background: url('https://www.lacasitaescuela.com/wp-content/uploads/2025/08/extraescolares1.png') no-repeat center / cover;
}
.extraescolares.fila1::before{ /* overlay opcional */ 
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}
/* .extraescolares.fila1 > *{ position:relative; z-index:1; } */


.extraescolares.fila2 {
	background: #80895E;
}

.extraescolares.pastilla-fila2.ultima-pastilla{
	background: none;
}

.p3 {
	font-size: 14px;
	line-height: 22px;
	color: #FD675B;
}

	@media (max-width: 1318px) {
	  .p3 {  
	    font-size: 12px;
	    line-height: 18px;
	  }  
	}

	@media (max-width: 1170px) {
	  .p3 {  
	    font-size: 10px;
	    line-height: 16px;
	  }  
	}

	@media (max-width: 700px) {
	  .p3 {  
	    font-size: 12px;
	    line-height: 20px;
	  }  
	}

.p3::before {
  content: "";
  display: block;
  width: 46px;         /* largo de la línea */
  height: 2px;         /* grosor */
  background: #FD675B !important;    /* color de la línea */
  margin: 30px 0; 
}


/*  Página CONTACTO  */
.contacto {
	background: #FD675B;
}

.contacto h3 {
	color: #ffffff !important;
}

	@media (max-width: 800px) {
	  .contacto h3 {  
	  	font-size: 20px !important;
	    line-height: 26px !important;
	    width: 100% !important;
	  }  
	}

.contacto p {
	padding: 100px;
}

	@media (max-width: 700px) {
	  .contacto p {  
	    padding: 20px;
	  }  
	}

.contacto .p2 {
	color: #000000 !important;
	padding: 100px !important;
	font-size: 28px !important;
	line-height: 32px !important;
	border: 3px dotted black !important;
	border-radius: 13px;
}

	@media (max-width: 700px) {
	  .contacto .p2 {  
	  	width: 100% !important;
	    padding: 20px !important;
	    border: none !important;
	  }  
	}

.contacto .p2 a {
	text-decoration: none;
}

	.contacto .p2 a:hover {
		text-decoration: underline;
	}

.contacto a[href^="mailto:"] {
  font-size: 20px;
}


/*  Página Diversábados  */

.diversabados.fila1 {
  position: relative;
  background: url('https://www.lacasitaescuela.com/wp-content/uploads/2025/08/diversabados-bg1.webp') no-repeat center / cover;
}
.diversabados.fila1::before{ /* overlay opcional */ 
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}
/* .diversabados.fila1 > *{ position:relative; z-index:1; } */


.columna-central ul, 
.columna-central h4 {
	position: relative;
	z-index: 20;
}

.diversabados video {
}


/* Imagen de la columna derecha: tamaño fluido y acotado */
.columna-derecha .video video {
  width: auto !important;
  height: auto;
  /* se encoge con el viewport, sin crecer más de “grande” */
  max-width: clamp(300px, 40vw, 900px) !important; /* ajusta 300 / 40vw / 900 a tu gusto */
}


/* 2) Hacer que “flote” sobre la columna central y 3) darle margen superior */
.columna-derecha .video {
  position: relative;   /* necesario para z-index */
  z-index: 10;           /* por encima de la central */
  margin-top: 100px;     /* tu margen superior */
  margin-left: -170px;  /* desplázala hacia la izquierda para que invada la central */
  /* si prefieres usar transform: translateX(-120px); también vale */
}


@media (max-width: 781px) {
  .columna-derecha .video {
    margin-left: 0;
    margin-top: 20px; /* opcional, ajusta */
    padding: 40px;
  }
  .columna-derecha .video video {
    max-width: 100% !important; /* llena el ancho disponible en móvil */
  }
}



/*  Página Campus  */

.campus.fila1 {
  position: relative;
  background: url('https://www.lacasitaescuela.com/wp-content/uploads/2025/08/campus-bg1.webp') no-repeat center / cover;
}
.campus.fila1::before{ /* overlay opcional */ 
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}


/*  Página Pijamadas  */

.pijamadas.fila1 {
  position: relative;
  background: url('https://www.lacasitaescuela.com/wp-content/uploads/2025/08/pijamadas-bg.png') no-repeat center / cover;
}
.pijamadas.fila1::before{ /* overlay opcional */ 
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25);
}
/* .diversabados.fila1 > *{ position:relative; z-index:1; } */