/* .imagenCastillo{
  background-image: url("/images/castillo-alburquerque.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.imagenCastillo2{
  background-image: url("/images/presentacion1.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.imagenActividades{
  background-image: url("/images/actividades1.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.imagenParticipacion{
  background-image: url("/images/participacion1.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.imagenRecursos{
  background-image: url("/images/recursos.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.circulo{ 
    position: relative; border-radius: 9999px; overflow: hidden; 
}

.circulo::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #70984b;
  mix-blend-mode: multiply;
  opacity: 1;
}

.circulo1{ 
    position: relative; border-radius: 9999px; overflow: hidden; 
}

.circulo1::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #70984b;
  mix-blend-mode: multiply;
  opacity: 1;
}

.circulo2{ 
    position: relative; border-radius: 9999px; overflow: hidden; 
}

.circulo2::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #d88736;
  mix-blend-mode: multiply;
  opacity: 1;
}

.textoCirculo{
  font-size: 34px;
  font-weight: bold;
  color: #fff;
  position: relative;
  z-index: 1;
}

h1{
  font-size: 50px;
  font-weight: bold;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.actualidad{ 
    font-size: 40px; 
}

h2{ 
    font-size: 23px; font-weight: bold; 
}

.chat{ 
    font-size: 26px; 
}

.normal{
     font-size: 15px;
}

a{ 
    font-size: 12px; 
}

#site-header{ 
    height: 134px; position: relative; 
} 

nav#site-header::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 134px;
  height: 134px;
  background-image: url("/images/capa_verde.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

.sec1{ 
  position: relative; overflow: visible; 
}

.sec1 > *{ 
  position: relative; z-index: 1; 
}

.sec1::before{
  content:"";
  position:absolute;
  right: calc(100%);
  top: 0px; 
  width: 250px;
  height: 356px;
  background: url("/images/capa_morada.png") no-repeat 0 0 / contain;
  pointer-events:none;
  z-index: 0;
}

.sec1::after{
  content:"";
  position:absolute;
  right: -15.5rem;                   
  top: 71%;                        
  transform: translateY(-50%);      
  width: 250px;                    
  height: 356px;                    
  background: url("/images/capa_verde.png") no-repeat center / contain;
  pointer-events:none;
  z-index:0;
}

.sec-actualidad{
  position: relative;
  overflow: visible;
}
.sec-actualidad > *{
  position: relative;
  z-index: 1;
}

.sec-actualidad::before{
  content:"";
  position:absolute;
  left: -15.6rem;          
  bottom: -1.7rem;            
  width: 250px;               
  height: 356px;
  background: url("/images/capa_morada_alpha.png") no-repeat center / contain;
  pointer-events:none;
  z-index:0;
}

.sec-actualidad::after{
  content:"";
  position:absolute;
  right: -15.5rem;       
  top: 1.9rem;              
  width: 250px;
  height: 356px;
  background: url("/images/capa_verde_alpha.png") no-repeat center / contain;
  pointer-events:none;
  z-index:0;
}

.pagination-green nav a,
.pagination-green nav span {
  background-color: #ffffff !important; 
  color: #70984b !important;
  border-color: #70984b !important;
}

.pagination-green nav a:hover {
  background-color: #eef5e8 !important;
}

.pagination-green nav span[aria-current="page"] {
  background-color: #70984b !important;
  color: #ffffff !important;
  border-color: #70984b !important;
}

.pagination-green nav span[aria-disabled="true"] {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  border-color: #e5e7eb !important;
}

.pagination-green nav svg {
  color: inherit !important;
  fill: currentColor !important;
}

.sec-presentacion{ 
  position: relative; overflow: visible; 
}

.sec-presentacion > *{ 
  position: relative; z-index: 1; 
}

.sec-presentacion::before{
  content:"";
  position:absolute;
  right: calc(100%);
  top: 0px; 
  width: 285px;
  height: 350px;
  background: url("/images/capa_verde2.png") no-repeat 0 0 / contain;
  pointer-events:none;
  z-index: 0;
}

@layer utilities {
  #site-header img[alt="Plan Adapta Clima"]{
    height: 3.5rem !important; /* h-14 */
    width: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  .force-mobile #site-header .md\:grid { display: none !important; } 

  @media (max-width: 1279px){
    .force-mobile #site-header{ position: relative !important; }
    .force-mobile #site-header::before{
      content: "";
      position: absolute;
      left: 0; top: 0;
      width: 28vw;               
      height: 100%;
      background: #fff;     
      z-index: 5;
      pointer-events: none;
    }
    .force-mobile #site-header > .max-w-7xl{ position: relative; z-index: 10; }
  }

  @media (max-width: 770px){
    .force-mobile #site-header .sm\:hidden { display: block !important; }
    .force-mobile #site-header .sm\:flex   { display: none !important; }

    .force-mobile #site-header .md\:py-8 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .force-mobile #site-header .sm\:hidden .h-\[96px\] { height: 96px !important; align-items: center !important; }
    .force-mobile #site-header .sm\:hidden img.h-14 { margin-top: 0 !important; }
    .force-mobile #site-header .sm\:hidden button[aria-controls="mobile-menu"] { margin-top: 0 !important; }
  }

  @media (min-width: 771px) and (max-width: 1280px){
    .force-mobile #site-header .sm\:hidden { display: none !important; }  
    .force-mobile #site-header .sm\:flex   { display: flex !important; }

    .force-mobile #site-header .md\:py-8{ padding-top: 0 !important; padding-bottom: 0 !important; }

    .force-mobile #site-header .sm\:flex.md\:hidden{
      height: auto !important;
      flex-direction: column !important;  
      align-items: center !important;
      justify-content: center !important;
      gap: .2rem !important;
    }

    .force-mobile #site-header .sm\:flex.md\:hidden .flex-1{
      width: 100% !important;
      margin-top: 0 !important;
      padding-right: 0 !important;
    }

    .force-mobile #site-header .sm\:flex.md\:hidden .flex.flex-wrap{
      display: flex !important;
      flex-wrap: wrap !important;          
      justify-content: center !important; 
      align-items: center !important;
      gap: .25rem .6rem !important;       
      width: 80% !important;             
      max-width: 80% !important;
      margin: 0 auto !important;
      white-space: normal !important;
      overflow: visible !important;
    }

    .force-mobile #site-header .sm\:flex.md\:hidden .flex.flex-wrap a{
      display: block !important;
      text-align: center !important;
      padding: 0 !important;
      line-height: 1.2 !important;
      font-size: 0.875rem !important;    
    }
  }
}

@media (max-width: 1279px) {
  nav#site-header::after,
  .sec1::before, .sec1::after,
  .sec-actualidad::before, .sec-actualidad::after,
  .sec-presentacion::before {
    content: none !important;
    background: none !important;
  }
}

@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; }
}

#site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}