.elementor-9317 .elementor-element.elementor-element-f0806a2{--display:flex;--min-height:1000px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-9317 .elementor-element.elementor-element-1cc62a2{--display:flex;--gap:12px 12px;--row-gap:12px;--column-gap:12px;box-shadow:8px 8px 0px 0px #000000;--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}.elementor-9317 .elementor-element.elementor-element-1cc62a2:not(.elementor-motion-effects-element-type-background), .elementor-9317 .elementor-element.elementor-element-1cc62a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c696dce );}.elementor-9317 .elementor-element.elementor-element-1cc62a2.e-con{--e-con-transform-rotateZ:-6deg;}.elementor-9317 .elementor-element.elementor-element-4aa2d77 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:136px;font-weight:900;text-transform:uppercase;line-height:130px;}.elementor-9317 .elementor-element.elementor-element-4aa2d77.elementor-widget-heading .elementor-heading-title, .elementor-9317 .elementor-element.elementor-element-4aa2d77.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:var( --e-global-color-text );}.elementor-9317 .elementor-element.elementor-element-6d3af7f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:24px;--padding-right:24px;}.elementor-9317 .elementor-element.elementor-element-6d3af7f:not(.elementor-motion-effects-element-type-background), .elementor-9317 .elementor-element.elementor-element-6d3af7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-9317 .elementor-element.elementor-element-31904a2 > .elementor-widget-container > .jet-listing-grid > .jet-listing-grid__items, .elementor-9317 .elementor-element.elementor-element-31904a2 > .jet-listing-grid > .jet-listing-grid__items{--columns:3;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-9317 .elementor-element.elementor-element-1cc62a2{--width:89%;}}@media(max-width:1024px){.elementor-9317 .elementor-element.elementor-element-4aa2d77 .elementor-heading-title{font-size:82px;}}@media(max-width:767px){.elementor-9317 .elementor-element.elementor-element-4aa2d77 .elementor-heading-title{font-size:40px;line-height:58px;}}/* Start custom CSS for container, class: .elementor-element-f0806a2 *//* 1. Contenedor principal que agrupa todo */
.contenedor-seccion {
  position: relative; /* Clave: permite posicionar la franja de forma absoluta respecto a este contenedor */
  width: 100%;
  padding: 150px 0; /* Espacio arriba y abajo para que se vea la franja */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Evita que los bordes de la franja amarilla ensanchen la página */
}

/* 2. La franja amarilla de fondo */
.contenedor-seccion::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%; /* Margen negativo para asegurar que cubra toda la pantalla al rotar */
  width: 120%; /* Más ancho que el 100% para que las esquinas no queden vacías al inclinarlo */
  height: 250px; /* El grosor de la franja amarilla */
  background-color: #FFFF00; /* Tono de amarillo flúor similar al de tu imagen */
  
  /* Centramos verticalmente y aplicamos la rotación hacia abajo (clockwise) */
  transform: translateY(-50%) rotate(8deg); 
  
  z-index: 0; /* Lo enviamos al fondo */
}

/* 3. La caja de texto que va por encima */
.titulo-caja {
  position: relative;
  z-index: 1; /* Asegura que el texto quede por encima de la franja amarilla */
  
  /* Estilos para replicar la caja de "CALENDARI" */
  background-color: white;
  border: 5px solid black;
  padding: 10px 40px;
  
  /* Inclinación contraria a la de la franja */
  transform: rotate(-6deg); 
  
  /* Efecto de sombra dura típica del estilo brutalista de la imagen */
  box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.1); 
}

/* 4. Estilos del texto (tipografía) */
.titulo-caja h1 {
  margin: 0;
  font-family: 'Arial Black', sans-serif; /* Usa la fuente de tu proyecto */
  font-size: 6rem;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: -2px;
}/* End custom CSS */