/*
Theme Name: Roca Rubia
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Copy of Twenty Twenty-Four. Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rocarubia
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Oculta por defecto */
.i18n-es, .i18n-ca, .i18n-en, .i18n-fr { display: none; }

/* Muestra según el idioma activo */
:lang(es) .i18n-es { display: revert; }
:lang(ca) .i18n-ca { display: revert; }
:lang(en) .i18n-en { display: revert; }
:lang(fr) .i18n-fr { display: revert; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

a {
  text-decoration: none;
}


body {
	font-family: "Bodoni Moda", serif;
  font-size: 18px;
  /*color: #00000070;*/
}
/*
p, div {
  color: #00000070;
}*/
.text-diluit {
  color: #00000070;
}
a {
  color: #000;
}

/* Evita que aparezca el overlay nativo */
.wp-block-navigation__responsive-container { display: none !important; }
body.has-modal-open { overflow: auto !important; }
.wp-block-navigation__responsive-container.is-menu-open { display:none !important; }

.wp-block-navigation__container.navegacion_peu {
    display: block !important;
}

/* Overlay: pantalla completa */
.c-overlay[hidden] { display: none !important; }
/*
.c-overlay {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
    overflow: clip;
    position: absolute;
    top: 32px;
    min-height: 100vh;
    z-index: 2;
    width: 100%;
}
*/
.c-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel que contiene todo */

.c-overlay__panel {
    width: 100%;
    height: 100%;
/*
    position: relative;
    max-width: 1600px;

    min-height: 80vh;
    background-color: #FFFCF0;
*/
}



.c-overlay.is-open .c-overlay__panel {
  opacity: 1;
  transform: none;
}

/* Botón cerrar (esquina superior derecha) */
.c-overlay__close {
  /*position: absolute;
  top: 3.5rem;
  right: 5rem;*/
  background: none;
  border: 0;
  cursor: pointer;
  
  font-family: "Cormorant Garamond", serif;
  font-size: 4rem;
  line-height: 30px;
  
}

/* Contenido centrado */
.c-overlay__content {
  text-align: center;

  /*margin-top: 86px;*/
}

.c-overlay__logo {
  padding: 86px 0px 50px 0px;
}

/* Logo centrado */
.c-overlay__logo img {
  max-width: 200px;
  height: auto;
  /*margin-bottom: 2rem;*/
}

.c-overlay__nav {

  display: flex;
  flex-direction: column;     /* apila logo y nav */
  justify-content: center;    /* centra vertical */
  align-items: center;        /* centra horizontal */
  min-height: 40vh;
  text-align: center;
  
}

.c-overlay__nav ul.menu { 
  padding-left: 0px !important;
}

/* Navegación centrada */
.c-overlay__nav .menu li {
  /*margin: 1rem 0;*/
  letter-spacing: 7px;
  height: 50px;

  list-style: none;
  text-transform: uppercase;
  font-size: 25px;

}

.c-overlay__nav .menu a {
  /*color: #fff;*/
  /*font-size: 1.5rem;*/
  text-decoration: none;
}

/* Accesibilidad: respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .c-overlay,
  .c-overlay__panel {
    transition: none;
  }
}

.menu ul {
  padding-left: 0;
}




/* El selector de idioma al fondo */
.language-switcher {
  
  width: 100%;
  display: flex;
  justify-content: center; /* centrado horizontal */
  position: absolute;
  bottom: var(--wp--preset--spacing--40);
  left: 0;
}

.language-switcher ul {
  /*display: flex;
  gap: 1.5rem;*/
  list-style: none;
  padding: 0px 20px;
  margin: 0;
}

.language-switcher li {
  /*display: flex;
  align-items: center;*/
  display: inline;

}

.language-switcher li:not(:last-child)::after {
  content: "/";
  margin-left: .5rem;
  margin-right: .5rem;
  /*color: #fff;*/
  opacity: 0.7; /* un poco más suave */
}

.language-switcher a {
  /*color: #fff;*/
  text-decoration: none;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: .5rem;           /* espacio bandera-texto */
  font-size: 16px;
}

.language-switcher a:hover {
  text-decoration: none;
}

.language-switcher .current-lang a {
  font-weight: 700;     /* resalta el idioma actual */
}






.img-contacto {
	max-width: 1000px!important;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}


.is-layout-constrained > .alignwidefull {
  max-width: 1600px;
}

.block-editor-block-list__layout.is-root-container > .alignwidefull {
  max-width: 1600px!important;
}

.boder-simple table {
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}
.boder-simple table tr td{
  border: none;
  padding: 0px;
}

.pantalla-completa-vertical {
  min-height: calc(100vh - 350px);
}
.pantalla-completa-vertical2 {
  min-height: 100svh!important;
}


.img-bnw{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);          /* Safari */
  transition: filter .4s ease-in-out, 
  -webkit-filter .4s ease-in-out;
}

.img-bnw:hover,
.img-bnw:focus{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

/* Si prefieres que el hover sea en el contenedor/enlace: */
.link:hover .img-bnw,
.link:focus .img-bnw{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .img-bnw{
    transition: none;
  }
}


.img-atenua{
  background-color: rgba(0,0,0,.45)!important; /* el overlay */
  background-blend-mode: multiply;   /* mezcla color+imagen */
  color:#fff;
}

#icono_menu {
  cursor: pointer;
}


.bg-rocarubia {
  background-color: #FFFCF0;
}

.entry-content.alignfull,
.alignfull.pantalla-completa-vertical2,
.pantalla-completa-vertical2 .wp-block-columns {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.no-blockstart {
  margin-block-start: 0;
}

.seccion_bloc {
  position: relative;
}
.inner_content {
  position: absolute !important;
  /*top: 20%;
  right: 10%;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(0, -50%);
  right: 0;*/

  top: 0;

}

/*
#gran_salon .splide__arrow.splide__arrow--prev {
  top: 60%;
  left: 55%;
}



#gran_salon .splide__arrow.splide__arrow--next {
  top: 60%;
  right:40%;
}*/

#destino-botonera-galeria,
#destino-botonera-comedor,
#destino-botonera-terrazas,
#destino-botonera-capilla {
  /*margin-left: -25px;*/
  margin-top: 30px;
}

.kb-splide .splide__arrow {
  height: auto;
}

#gran_salon .kb-splide .splide__arrow--prev {
  /*left: var(--wp--preset--spacing--40);*/
  left: -30px;
  background: none;
  color: #000;
  font-size: 40px;
}
#gran_salon .kb-splide .splide__arrow--next {
  /*left: calc(var(--wp--preset--spacing--40) + 40px);*/
  left: 0px;
  background: none;
  color: #000;
  font-size: 40px;
}

#comedor .kb-splide .splide__arrow--prev {
  left: 0;
  background: none;
  color: #000;
  font-size: 40px;
}
#comedor .kb-splide .splide__arrow--next {
  left: 40px;
  background: none;
  color: #000;
  font-size: 40px;
}

#terrazas .kb-splide .splide__arrow--prev {
  /*left: var(--wp--preset--spacing--40);*/
  left: -30px;
  background: none;
  color: #000;
  font-size: 40px;
}
#terrazas .kb-splide .splide__arrow--next {
  /*left: calc(var(--wp--preset--spacing--40) + 40px);*/
  left: 0px;
  background: none;
  color: #000;
  font-size: 40px;
}


#capilla .kb-splide .splide__arrow--prev {
  left: -25px;
  background: none;
  color: #000;
  font-size: 40px;
}
#capilla .kb-splide .splide__arrow--next {
  left: 15px;
  background: none;
  color: #000;
  font-size: 40px;
}

.content-contacte {
  width: 80%;
  margin: 0 auto;
}

#destino-botonera-capilla {
  margin-bottom: -50px;
  position: absolute;
  /*bottom: var(--wp--preset--spacing--60);*/
  /*bottom: 20%;*/
}




/* 1. El contenedor debe ser el punto de referencia */
.mainsection {
  position: relative;
}

/* 2. El overlay se posiciona absolutamente dentro del contenedor */
#c-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Asegura que esté por encima de otros elementos */
  background-color: #FFFCF0;
  
  /* Centra el contenido del overlay (ej. el botón de cerrar o un menú) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 3. Lógica para la transición de visibilidad */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* La clase que tu JavaScript añade para mostrar el overlay */
#c-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

#c-overlay main {
  padding-top:var(--wp--preset--spacing--40);
  padding-right:var(--wp--preset--spacing--40);
  padding-bottom:var(--wp--preset--spacing--40);
  padding-left:var(--wp--preset--spacing--40);
}

.page-template-wp-custom-template-p-gina-espacios #c-overlay main {
  padding-top:var(--wp--preset--spacing--40);
  padding-right:var(--wp--preset--spacing--60);
  padding-bottom:var(--wp--preset--spacing--40);
  padding-left:var(--wp--preset--spacing--60);
}

.estil-underline a {
  /*line-height: 25px;*/
  display: inline-block;
  border-bottom-width: 1px ;
  border-bottom-style: solid;
  max-height: 33px;
}





/* Contenedor a pantalla completa */
.hero{
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}

/* HAZ GRID al contenedor y a los wrappers internos típicos de WP/Kadence */
.hero,
.hero > .wp-block-group__inner-container,
.hero > .kt-inside-inner-col{
  display: grid !important;
  grid-template: "stack" 1fr / 1fr;   /* una sola celda para apilar */
  min-width: 0;
  min-height: 0;
}

/* Apila hijos en la MISMA celda, estén colgando de .hero, del inner-container o de .kt-inside-inner-col */
.hero > *,
.hero > .wp-block-group__inner-container > *,
.hero > .kt-inside-inner-col > *{
  grid-area: stack;
  min-width: 0;
  min-height: 0;
}

/* Fondo (imagen, cover, slider, etc.) ocupa todo */
.hero .fondo,
.hero .wp-block-kadence-advancedgallery,
.hero .wp-block-cover{
  width: 100%;
  height: 100%;
}

/* Si usas imagen simple como fondo */
.hero .fondo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay: centrado vertical y desplazado a la derecha */
.hero .hero__overlay{
  align-self: center;   /* vertical */
  justify-self: end;    /* horizontal */
  max-width: min(30ch, 100%);
  margin-right: clamp(16px, 6vw, 96px); /* “separación” del borde derecho */
  /*padding: clamp(.75rem, 2vw, 1.25rem);*/
  padding-top: 50px;
  padding-bottom: 50px;
  /*border-radius: .8rem;*/
  background: color-mix(in srgb, #000 22%, transparent);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: clamp(1rem, 1.2vw + .8rem, 2rem);
  line-height: 1.25;
}

/* Overlay: centrado vertical y desplazado a la derecha */
.hero .hero__overlay_left{
  align-self: center;   /* vertical */
  justify-self: start;    /* horizontal */
  max-width: min(30ch, 100%);
  margin-left: clamp(16px, 6vw, 96px); /* “separación” del borde derecho */
  /*padding: clamp(.75rem, 2vw, 1.25rem);*/
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 40px;
  padding-left: 40px;
  /*border-radius: .8rem;*/
  background: color-mix(in srgb, #000 22%, transparent);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: clamp(1rem, 1.2vw + .8rem, 2rem);
  line-height: 1.25;
}

.hero__overlay_left p {
  max-width: 300px;
}


.wp-block-site-logo.is-default-size img {
  max-width: none;
}

/* (Opcional) en móviles céntralo también horizontalmente */
@media (max-width: 640px){
  .hero .hero__overlay{ justify-self: center; margin-right: 0; }
}



@media (max-width: 781px) {

  /* —o— si prefieres lados específicos */
  .wp-block-group.margen-movil {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .content-contacte p.has-text-align-right {
    text-align: left !important;
  }



  .hero { 
    grid-template: none !important; 
    grid-auto-flow: row; 
  }
  .hero .hero__overlay{ grid-row: 1 !important; }
  .hero .hero__bg{      grid-row: 2 !important; }


  .hero .hero__overlay {
    max-width: none;
  }
  .hero__overlay_left p {
    max-width: initial !important;
  }

  #comedor .wp-block-column p,
  #capilla .wp-block-column p {
    padding-right: 0!important;

  }
  #destino-botonera-capilla {
    bottom: 10%;
  }


}



.btn-panel-cookies {
    padding: 0;
    margin: 0;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}