/*
Theme Name: SDADV - Societat de gestió col·lectiva
Description: Tema personalizado para la Societat de gestió col·lectiva de drets d'autor i drets veïns del Principat d'Andorra
Version: 1.0
Author: SDADV
*/

/* CSS Reset y Variables */
:root {
  /* Colores del diseño */
  --azabache: #000000;
  --negro: #202824;
  --granate: #6F123C;
  --blanco: #FFFFFF;
  --amarillo: #FFCC19;
  --naranja: #FF5E29;
  --verde: #02AA6F;
  --verde-apagado: #00804A;
  --rosado: #FFB5F3;
  --morado: #2A42F4;
  --arena: #FFF0DC;
  --blue: #2A42F4;
  --lavanda-pastel: #E4D1FF;
  --sky-blue: #019AE7;
  
  /* Tipografías */
  --font-family: 'DM Sans', sans-serif;
  
  /* Title L */
  --title-l-size: 80px;
  --title-l-weight: 900;
  --title-l-line-height: 85px;
  
  /* Title M */
  --title-m-size: 72px;
  --title-m-weight: 900;
  --title-m-line-height: 79.2px;
  
  /* Title S */
  --title-s-size: 60px;
  --title-s-weight: 900;
  --title-s-line-height: 65px;
  
  /* Heading XL */
  --heading-xl-size: 42px;
  --heading-xl-weight: 700;
  --heading-xl-line-height: 44px;
  
  /* Heading L */
  --heading-l-size: 32px;
  --heading-l-weight: 900;
  --heading-l-line-height: 36px;
  
  /* Heading M */
  --heading-m-size: 26px;
  --heading-m-weight: 700;
  --heading-m-line-height: 30px;
  
  /* Heading S */
  --heading-s-size: 20px;
  --heading-s-weight: 900;
  --heading-s-line-height: 24px;
  
  /* Body */
  --body-size: 16px;
  --body-weight: 500;
  --body-line-height: 20px;
  
  /* Button Big */
  --button-big-size: 17px;
  --button-big-weight: 500;
  --button-big-line-height: 20px;
  
  /* Button Small */
  --button-small-size: 12px;
  --button-small-weight: 500;
  --button-small-line-height: 13px;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Solución más agresiva para el scroll horizontal */
* {
  max-width: 100vw;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Ocultar formas geométricas azules en móvil para evitar scroll horizontal */
@media (max-width: 768px) {
  .hero-section .position-absolute[style*="top: 89px; right: 0px; width: 597px; height: 609px;"] {
    display: none !important;
  }
  
  /* Ocultar TODOS los elementos posicionados absolutamente que puedan causar overflow */
  .hero-section .position-absolute {
    display: none !important;
  }
  
  /* Mostrar solo los elementos necesarios para el contenido */
  .hero-section .container-fluid {
    display: block !important;
  }
  
  .hero-section .row {
    display: block !important;
  }
  
  .hero-section .col-lg-8 {
    display: block !important;
  }
}

/* Asegurar que no haya overflow horizontal en móvil */
@media (max-width: 768px) {
  .hero-section {
    overflow-x: hidden !important;
  }
  
  /* Ocultar el efecto decorativo izquierdo que está en right: -300px */
  .position-absolute[style*="right: -300px"] {
    display: none !important;
  }
  
  /* Ocultar cualquier elemento que esté fuera del viewport */
  .position-absolute[style*="right: -"] {
    display: none !important;
  }
  
  .position-absolute[style*="left: -"] {
    display: none !important;
  }
  
  /* Asegurar que todas las secciones principales no tengan overflow horizontal */
  section {
    overflow-x: hidden !important;
  }
  
  .container-fluid {
    overflow-x: hidden !important;
  }
  
  /* Asegurar que las imágenes no causen overflow */
  .discipline-image {
    max-width: 100% !important;
  }
  
  .discipline-image-mobile {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Asegurar que el círculo central móvil no cause overflow */
  .central-circle-mobile {
    max-width: 100% !important;
  }
  
  /* Regla general: ocultar cualquier elemento que pueda causar scroll horizontal */
  .position-absolute {
    max-width: 100vw !important;
  }
  
  /* Asegurar que no haya elementos con width mayor al viewport */
  * {
    max-width: 100vw !important;
  }
}

/* Estilos para las tarjetas de disciplinas */
.disciplines-section {
  min-height: 2000px;
}

@media (max-width: 1300px) {
  .disciplines-section {
    min-height: 1500px;
  }
  .discipline-case.case-4{
    top: 56.8% !important;
  }
}

.discipline-case {
  z-index: 3;
}

.discipline-card {
  position: relative;
}

.discipline-image {
  cursor: pointer;
  z-index: 2;
  position: relative;
}

.discipline-image:hover .discipline-overlay {
  opacity: 1 !important;
  transform: translateY(0);
}

/* .discipline-shape eliminado - ahora solo usamos .discipline-shape-hover */

.discipline-shape-hover {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease;
  transform-origin: center center;
}

.discipline-shape-hover img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  aspect-ratio: 1/1;
  transform-origin: center center; /* La imagen rota desde su centro */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Asegurar que los títulos estén por encima de las formas */
.discipline-card h3 {
  position: relative;
  z-index: 4 !important;
}

.discipline-card:hover .discipline-shape-hover {
  opacity: 1;
  animation: elasticScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover img {
  transform: rotate(90deg);
}

/* Animación solo de escalado */
@keyframes elasticScale {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -20%) scale(5);
  }
}

/* ============================================
   REGLAS ESPECÍFICAS POR DISCIPLINA
   ============================================ */

/* LITERARIA */
.discipline-shape-hover.discipline-literaria {
  transform: translate(-50%, -50%) scale(0.2);
}

.discipline-card:hover .discipline-shape-hover.discipline-literaria {
  animation: elasticScaleLiteraria 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-literaria img {
  transform: rotate(90deg);
}

/* MUSICAL */
.discipline-shape-hover.discipline-musical {
  transform: translate(-50%, -50%) scale(0.2);
}

.discipline-card:hover .discipline-shape-hover.discipline-musical {
  animation: elasticScaleMusical 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-musical img {
  transform: rotate(75deg);
}

/* AUDIOVISUAL */
.discipline-shape-hover.discipline-audiovisual {
  transform: translate(-50%, -50%) scale(0.5);
}

.discipline-shape-hover.discipline-audiovisual img {
  transform: rotate(345deg);
}

.discipline-card:hover .discipline-shape-hover.discipline-audiovisual {
  animation: elasticScaleAudiovisual 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-audiovisual img {
  transform: rotate(360deg);
}

/* PLASTICA */
.discipline-shape-hover.discipline-plastica {
  transform: translate(-50%, -50%) scale(0.5);
}

.discipline-shape-hover.discipline-plastica img {
  transform: rotate(300deg);
}

.discipline-card:hover .discipline-shape-hover.discipline-plastica {
  animation: elasticScalePlastica 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-plastica img {
  transform: rotate(360deg);
}

/* ESCENICA */
.discipline-shape-hover.discipline-escenica {
  transform: translate(-50%, -50%) scale(0.5);
}

.discipline-shape-hover.discipline-escenica img {
  transform: rotate(30deg);
}

.discipline-card:hover .discipline-shape-hover.discipline-escenica {
  animation: elasticScaleEscenica 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-escenica img {
  transform: rotate(120deg);
}

@keyframes elasticScaleBig {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(12);
  }
}

.discipline-shape-hover.discipline-shape-rotate-345 {
  transform: translate(-50%, -50%) scale(0.5);
}

.discipline-shape-hover.discipline-shape-rotate-345 img {
  transform: rotate(345deg);
}

.discipline-card:hover .discipline-shape-hover.discipline-shape-rotate-345 {
  animation: elasticScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-shape-rotate-345 img {
  transform: rotate(435deg);
}

.discipline-shape-hover.discipline-shape-rotate-30 {
  transform: translate(-50%, -50%) scale(0.5);
}

.discipline-shape-hover.discipline-shape-rotate-30 img {
  transform: rotate(30deg);
}

.discipline-card:hover .discipline-shape-hover.discipline-shape-rotate-30 {
  animation: elasticScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.discipline-card:hover .discipline-shape-hover.discipline-shape-rotate-30 img {
  transform: rotate(120deg);
}

/* ============================================
   ANIMACIONES ESPECÍFICAS POR DISCIPLINA
   ============================================ */

/* LITERARIA - elasticScaleLiteraria */
@keyframes elasticScaleLiteraria {
  0% {
    transform: translate(0%, 0%) scale(0.2);
  }
  100% {
    transform: translate(0%, 50%) scale(16);
  }
}

/* MUSICAL - elasticScaleMusical */
@keyframes elasticScaleMusical {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    transform: translate(-50%, 90%) scale(16);
  }
}

/* AUDIOVISUAL - elasticScaleAudiovisual */
@keyframes elasticScaleAudiovisual {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -20%) scale(4);
  }
}

/* PLASTICA - elasticScalePlastica */
@keyframes elasticScalePlastica {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -100%) scale(5);
  }
}

/* ESCENICA - elasticScaleEscenica */
@keyframes elasticScaleEscenica {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -20%) scale(5);
  }
}

.discipline-overlay {
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
  margin-bottom:10px;
}

/* Responsive para las tarjetas de disciplinas */
@media (max-width: 768px) {
  .discipline-case {
    position: static !important;
    width: 100% !important;
    margin-bottom: 2rem;
  }
  
  .discipline-shape {
    display: none;
  }
  
  .discipline-overlay {
    display: none;
  }
}

/* Prevención de scroll cuando el menú está abierto */
body.menu-open {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ============================================
   ANIMACIONES PARA DERECHOS DE MIEMBROS
   ============================================ */

/* Formas decorativas de derechos */
.rights-shape-hover {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease;
  transform-origin: center center;
}

.rights-shape-hover img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  aspect-ratio: 1/1;
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Transform-origin específico para la forma 3 */
.rights-shape-3 {
  transform-origin: center center;
}

.rights-shape-3 img {
  transform-origin: center center;
}

/* Las rotaciones están incluidas en las animaciones elasticScale */

/* Hover en las imágenes de derechos - cada forma usa su animación específica */
.rights-image:hover .rights-shape-hover {
  opacity: 1;
}

/* Animaciones específicas para cada forma de derechos */
.rights-image:hover .rights-shape-1,
.rights-image img:hover + .rights-shape-1 {
  opacity: 1;
  animation: elasticScaleRights1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rights-image:hover .rights-shape-2,
.rights-image img:hover + .rights-shape-2 {
  opacity: 1;
  animation: elasticScaleRights2 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rights-image:hover .rights-shape-3,
.rights-image img:hover + .rights-shape-3 {
  opacity: 1;
  animation: elasticScaleRights3 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rights-image:hover .rights-shape-4,
.rights-image img:hover + .rights-shape-4 {
  opacity: 1;
  animation: elasticScaleRights4 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Efecto de desaparición suave cuando se quita el hover - Derechos */
.rights-shape-hover {
  transition: opacity 0.2s ease;
}

.rights-shape-hover img {
  transition: transform 0.3s ease;
}

/* Keyframes para las animaciones de derechos */
@keyframes elasticScaleRights {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    transform: translate(-50%, -20%) scale(5);
  }
}

@keyframes elasticScaleRights1 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -20%) scale(4) rotate(135deg);
  }
}

@keyframes elasticScaleRights2 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(315deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.75) rotate(340deg);
  }
}

@keyframes elasticScaleRights3 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(180deg);
    transform-origin: center center;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(240deg);
    transform-origin: center center;
  }
}

@keyframes elasticScaleRights4 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(270deg);
  }
  100% {
    transform: translate(-50%, -25%) scale(3.8) rotate(360deg);
  }
}

/* ============================================
   OBLIGACIONES DE MIEMBROS - FLEX LAYOUT
   ============================================ */

/* Container principal - FLEX DE 3 COLUMNAS */
.obligations-cards-container {
  display: flex;
  gap: 3.5rem;
  width: 100%;
}

/* Cada card ocupa 1/3 del ancho total */
.obligations-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 722px;
}

/* Contenedor de imagen con overflow hidden */
.obligations-image {
  position: relative;
  width: 100%;
  height: 450px;
}

/* Imagen principal con object-fit cover */
.obligations-image img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* Formas decorativas de obligaciones */
.obligations-shape-hover {
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease;
  transform-origin: center center;
}

.obligations-shape-hover img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  aspect-ratio: 1/1;
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover en las imágenes de obligaciones - cada forma usa su animación específica */
.obligations-image:hover .obligations-shape-hover {
  opacity: 1;
}

/* Animaciones específicas para cada forma de obligaciones */
.obligations-image:hover .obligations-shape-1,
.obligations-image img:hover + .obligations-shape-1 {
  opacity: 1;
  animation: elasticScaleObligations1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.obligations-image:hover .obligations-shape-2,
.obligations-image img:hover + .obligations-shape-2 {
  opacity: 1;
  animation: elasticScaleObligations2 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.obligations-image:hover .obligations-shape-3,
.obligations-image img:hover + .obligations-shape-3 {
  opacity: 1;
  animation: elasticScaleObligations3 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Efecto de desaparición suave cuando se quita el hover - Obligaciones */
.obligations-shape-hover {
  transition: opacity 0.2s ease;
}

.obligations-shape-hover img {
  transition: transform 0.3s ease;
}

/* Keyframes para las animaciones de obligaciones */
@keyframes elasticScaleObligations1 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -30%) scale(3.4) rotate(90deg);
  }
}

@keyframes elasticScaleObligations2 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(3) rotate(315deg);
  }
}

@keyframes elasticScaleObligations3 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(90deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(3.4) rotate(180deg);
  }
}

/* Contenido de texto */
.obligations-content {
  padding: 1.5rem 0;
  flex-grow: 1;
}

/* Título de la obligación */
.obligations-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: #000;
  margin-bottom: 1.5rem;
}

/* Lista de obligaciones */
.obligations-list {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  padding-left: 24px;
  list-style-type: disc;
}

.obligations-list li {
  margin-bottom: 0.5rem;
}

.obligations-list li:last-child {
  margin-bottom: 0;
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .obligations-cards-container {
    flex-direction: column;
    gap: 3rem;
  }
  
  .obligations-image {
    height: 300px;
  }
  
  .obligations-title {
    font-size: 24px;
    line-height: 28px;
  }
}

/* ============================================
   EFECTOS HOVER PARA QUE-ES-LA-SDADV
   ============================================ */

/* Shapes ocultos por defecto */
.que-es-shape {
  opacity: 0;
  transform-origin: center center;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

/* Asegurar que las imágenes estén por delante */
.que-es-card img:not(.que-es-shape) {
  position: relative;
  z-index: 1;
}

/* Hover en la card completa muestra el shape */
.que-es-card:hover .que-es-shape {
  opacity: 1;
}

/* Animaciones específicas para cada shape */
.que-es-card:hover .que-es-shape-1 {
  animation: elasticScaleQueEs1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.que-es-card:hover .que-es-shape-2 {
  animation: elasticScaleQueEs2 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.que-es-card:hover .que-es-shape-3 {
  animation: elasticScaleQueEs3 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Keyframes para las animaciones de que-es-la-sdadv */
@keyframes elasticScaleQueEs1 {
  0% {
    transform: scale(0.5) rotate(0deg);
  }
  100% {
    transform: scale(1.2) rotate(15deg);
  }
}

@keyframes elasticScaleQueEs2 {
  0% {
    transform: scale(0.5) rotate(66.042deg);
  }
  100% {
    transform: scale(1.3) rotate(80deg);
  }
}

@keyframes elasticScaleQueEs3 {
  0% {
    transform: scale(0.5) rotate(0deg);
  }
  100% {
    transform: scale(1.4) rotate(-10deg);
  }
}

/* Animaciones para usuaris-i-llicencies shapes */
.que-es-card:hover .que-es-shape-usuaris-1 {
  animation: elasticScaleUsuaris1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.que-es-card:hover .que-es-shape-usuaris-2 {
  animation: elasticScaleUsuaris2 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.que-es-card:hover .que-es-shape-usuaris-3 {
  animation: elasticScaleUsuaris3 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Keyframes para las animaciones de usuaris-i-llicencies */
@keyframes elasticScaleUsuaris1 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(4.5) rotate(15deg);
  }
}

@keyframes elasticScaleUsuaris2 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(66.042deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(5.6) rotate(80deg);
  }
}

@keyframes elasticScaleUsuaris3 {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(4.7) rotate(-15deg);
  }
}


body {
  font-family: var(--font-family);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  color: var(--negro);
  background-color: var(--blanco);
}

/* Tipografías */
.title-l {
  font-size: var(--title-l-size);
  font-weight: var(--title-l-weight);
  line-height: var(--title-l-line-height);
  letter-spacing: -2px;
}

.title-m {
  font-size: var(--title-m-size);
  font-weight: var(--title-m-weight);
  line-height: var(--title-m-line-height);
  letter-spacing: -0.72px;
}

.title-s {
  font-size: var(--title-s-size);
  font-weight: var(--title-s-weight);
  line-height: var(--title-s-line-height);
}

.heading-xl {
  font-size: var(--heading-xl-size);
  font-weight: var(--heading-xl-weight);
  line-height: var(--heading-xl-line-height);
  letter-spacing: -1px;
}

.heading-l {
  font-size: var(--heading-l-size);
  font-weight: var(--heading-l-weight);
  line-height: var(--heading-l-line-height);
  letter-spacing: -0.64px;
}

.heading-m {
  font-size: var(--heading-m-size);
  font-weight: var(--heading-m-weight);
  line-height: var(--heading-m-line-height);
  letter-spacing: -0.52px;
}

.heading-s {
  font-size: var(--heading-s-size);
  font-weight: var(--heading-s-weight);
  line-height: var(--heading-s-line-height);
  letter-spacing: -0.4px;
}

.body-text {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
}

/* Botones */
.btn {
  font-family: var(--font-family);
  border: none;
  padding: 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: var(--button-big-size);
  font-weight: var(--button-big-weight);
  line-height: var(--button-big-line-height);
  letter-spacing: 0.5px;
  text-transform: none;
}

.btn-solid-white {
  background-color: var(--blanco);
  color: var(--negro);
  border: 1px solid var(--negro);
  border-radius: 0px;
}

.btn-solid-black {
  background-color: var(--negro);
  color: var(--blanco);
  border: 1px solid var(--blanco);
}

.btn-solid-white:hover,
.btn-solid-black:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Botón Go To Top */
.gotop-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 67px;
  background-color: var(--naranja);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.gotop-btn:hover {
  transform: scale(1.1);
}

.gotop-btn i {
  color: var(--blanco);
  font-size: 24px;
  transform: rotate(-90deg);
}

/* Layout responsive */
.container-fluid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Utilidades */
.text-white { color: var(--blanco) !important; }
.text-black { color: var(--negro) !important; }
.text-negro { color: var(--negro) !important; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }

/* Iconos con círculos para la tabla de disciplinas */
.icon-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    aspect-ratio: 1/1;
    background-color: #02AA6F;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.icon-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    aspect-ratio: 1/1;
    background-color: #591345;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

/* Contenedor para alineación perfecta de iconos */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.bg-negro { background-color: var(--negro) !important; }
.bg-granate { background-color: var(--granate) !important; }
.bg-blanco { background-color: var(--blanco) !important; }
.bg-amarillo { background-color: var(--amarillo) !important; }
.bg-verde { background-color: var(--verde) !important; }
.bg-rosado { background-color: var(--rosado) !important; }
.bg-morado { background-color: var(--morado) !important; }
.bg-naranja { background-color: var(--naranja) !important; }
.bg-arena { background-color: var(--arena) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-lavanda-pastel { background-color: var(--lavanda-pastel) !important; }
.bg-sky-blue { background-color: var(--sky-blue) !important; }

/* Com ser membre: imágenes decorativas */
.membres-section {
  position: relative;
}

.membres-section h2{
  text-align: center;

}
.membres-section .content {
  text-align: center;
}

@media (min-width: 992px) and (max-width: 1900px) {
  .membres-section h2{
    padding-left: 90px;
    max-width: 400px;
    text-align: left;

  }
  .membres-section .content {
    padding-left: 180px;
    text-align: left;
  }
}

.membres-media .membre-img {
  position: absolute;
  background-size: cover;
  background-position: center;
}

/* Top-right grande */
.membre-img-tr {
  top: 0;
  right: 0;
  width: 493px; 
  height: 181px;
  transform: translateY(-25%);
}

/* Bottom-left grande parcialmente visible bajo el texto */
.membre-img-bl {
  left: 0;
  bottom: 0;
  width: 381px;
  height: 240px;
  transform: translateY(40%);
}

/* Bottom-right pequeña (recorte de manos) */
.membre-img-br {
  right: 60px;
  bottom: 0px;
  width: 213px;
  height: 265px;
  transform: translateY(50%);
}

.membre-img-tp {
  top: 0px;
  width: 307px;
  height: 131px;
  transform: translateX(50%) translateY(50%);
}

.membre-img-bt {
  bottom: 0px;
  width: 307px;
  height: 131px;
  transform: translateX(50%) translateY(500%);
}

@media (max-width: 1199.98px) {
  .membre-img-tr { width: 493px; height: 181px; }
  .membre-img-bl { width: 381px; height: 240px; }
  .membre-img-br { width: 213px; height: 265px; }
}

@media (max-width: 991.98px) {
  .membres-media { display: none; }
}

@media (min-width: 1900px) {
  .membres-text {
    /* Remove col-6 and offfset */
    padding-top: 160px !important;
    padding-bottom: 160px !important;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }
}

/* hasta md */
@media (max-width: 768px) {
  .membres-text {
    padding-top: 60px;
    padding-bottom: 60px;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }
}

/* Bloque de texto desktop: alinear a grilla Figma */
.membres-text {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Media queries para responsive */
@media (max-width: 768px) {
  .title-l { font-size: 42px; line-height: 44px; }
  .title-m { font-size: 42px; line-height: 44px; }
  .title-s { font-size: 42px; line-height: 44px; }
  .heading-xl { font-size: 32px; line-height: 36px; }
  .heading-l { font-size: 26px; line-height: 30px; }
  .heading-m { font-size: 22px; line-height: 26px; }
  
  .gotop-btn {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
}

.usuaris-section {
  padding-top: 160px;
  padding-bottom: 160px;
}

/* Ocultar elementos por defecto de WordPress */
.admin-bar .gotop-btn {
  bottom: 46px;
}

.text-rosado{
color: var(--Rosado, #FFB5F3);
}

.text-lavanda-pastel{
  color: var(--lavanda-pastel, #E4D1FF);
}

/* DESKTOP */
@media (min-width: 992px) {
  /* iterar los diferentes items y darle padding indice* 10px, donde index es el # de hijo que es */
  
  .navigation-items .nav-item:nth-child(1) {
    padding-left: 0px;
  }
  
  .navigation-items .nav-item:nth-child(2) {
    padding-left: 120px;
  }
  
  .navigation-items .nav-item:nth-child(3) {
    padding-left: 240px;
  }
  
  .navigation-items .nav-item:nth-child(4) {
    padding-left: 360px;
  }
  
  .navigation-items .nav-item:nth-child(5) {
    padding-left: 480px;
  }
}

/* Asegurar que los enlaces de navegación estén por encima de la máscara */
.navigation-items {
  position: relative;
  z-index: 2;
}

.navigation-items .nav-item {
  position: relative;
  z-index: 2;
}

/* Estilos para los enlaces de navegación */
.nav-link-content {
  display: inline-flex !important;
  width: auto !important;
  transition: all 0.3s ease;
}

.nav-link-content:hover h3 {
  color: var(--amarillo) !important;
}

.nav-link-content:hover i {
  color: var(--amarillo) !important;
}

/* Para Tarifes que no tiene enlace */
.nav-link-inactive {
  cursor: pointer;
}

.nav-link-inactive:hover h3 {
  color: var(--amarillo) !important;
}

.nav-link-inactive:hover i {
  color: var(--amarillo) !important;
}

/* Estilos para las imágenes de noticias */
.noticia-image-container {
  width: 520px;
  height: 282px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.noticia-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.noticia-item:hover .noticia-image-container {
  opacity: 1;
}

.noticia-item:hover .noticia-image {
  transform: scale(1.05);
}

/* En mobile, ocultar completamente las imágenes */
@media (max-width: 991.98px) {
  .noticia-image-container {
    display: none !important;
  }
}

/* Estilos para las imágenes de navegación */
.navigation-main-image {
  position: absolute;
  top: 80px;
  right: 80px;
  width: 307px;
  height: 292px;
  z-index: 2;
}

.navigation-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navigation-mask-image {
  position: absolute;
  left: -208px;
  top: 226px;
  width: 724.759px;
  height: 755.18px;
  z-index: 1;
  pointer-events: none; /* Permitir clicks a través del elemento */
}

.mask-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask-element {
  width: 500.15px;
  height: 583.265px;
  background-color: #000000;
  transform: rotate(30deg);
  mask-image: url('./assets/images/mask-pattern.png');
  mask-size: 724.774px 755.197px;
  mask-position: 0px;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('./assets/images/mask-pattern.png');
  -webkit-mask-size: 724.774px 755.197px;
  -webkit-mask-position: 0px;
  -webkit-mask-repeat: no-repeat;
}

/* Estilos para la imagen decorativa de Defensem */
.defensem-decorative-image {
  position: absolute;
  left: calc(75% + 52px);
  top: 0;
  width: 724.513px;
  height: 754.893px;
  z-index: 1;
  pointer-events: none;
}

.defensem-mask-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.defensem-mask-element {
  width: 500.15px;
  height: 583.265px;
  background-color: #FFFFFF;
  transform: rotate(30deg);
  opacity: 0.2;
  mask-image: url('./assets/images/mask-pattern.png');
  mask-size: 724.774px 755.197px;
  mask-position: 0px;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('./assets/images/mask-pattern.png');
  -webkit-mask-size: 724.774px 755.197px;
  -webkit-mask-position: 0px;
  -webkit-mask-repeat: no-repeat;
}

/* ========================================
   ESTILOS PARA POST DEL BLOG
   ======================================== */

/* Contenedor principal del blog */
.blog-post-page {
  position: relative;
  background: var(--blanco);
  min-height: 100vh;
}

/* Botón de scroll to top */
.scroll-to-top {
  position: fixed;
  bottom: 11px;
  right: 20px;
  width: 64px;
  height: 67px;
  background: var(--naranja);
  border: none;
  border-radius: 89px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
}

.scroll-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 94, 41, 0.3);
}

.scroll-to-top svg {
  width: 36px;
  height: 36px;
  transform: rotate(270deg);
}

/* Hero Section del Blog */
.blog-hero {
  background: var(--rosado);
  padding: 80px 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 400px;
}

/* Variantes de color para el hero */
.blog-hero.hero-rosado {
  background: var(--rosado);
}

.blog-hero.hero-amarillo {
  background: var(--amarillo);
}

.blog-hero.hero-naranja-claro {
  background: #F6D8AE;
}

.blog-hero-content {
  max-width: 849px;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--negro);
  padding: 10px;
  margin-bottom: 16px;
  background: transparent;
  gap: 10px;
}

.blog-tag span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 50px;
  line-height: 54px;
  color: var(--negro);
  margin: 0;
  text-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px;
}

/* Contenido Principal del Blog */
.blog-content {
  padding: 120px 0;
  background: var(--blanco);
}

.blog-content-wrapper {
  margin-bottom: 84px;
}

/* Imagen del blog - estilo periódico */
.blog-image {
  background: #ffd900;
  width: 198px;
  height: 198px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  float: left;
  margin: 0 24px 24px 0;
  shape-outside: margin-box;
}

.blog-logo img {
  width: 100%;
  height: auto;
}

/* Texto del blog */
.blog-text {
  flex: 1;
  max-width: 847px;
}

.post-content {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--negro);
}

.post-content h2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 42px;
  line-height: 44px;
  color: var(--granate);
  margin: 32px 0 16px 0;
  letter-spacing: -1px;
}

.post-content h2:first-child {
  margin-top: 0;
}

.post-content p {
  margin-bottom: 16px;
}

.post-content p:last-child {
  margin-bottom: 0;
}

.post-content ul {
  margin: 16px 0;
  padding-left: 0;
  list-style: none;
}

.post-content li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.post-content li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--negro);
  font-weight: bold;
}

.post-content a {
  color: var(--naranja);
  text-decoration: underline;
  text-underline-position: from-font;
}

.post-content strong {
  color: var(--naranja);
}

/* Sección de compartir */
.share-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--negro);
  text-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px;
  white-space: nowrap;
}

.share-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-btn, .instagram {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #019AE7;
  transition: color 0.3s ease;
}

.share-btn:hover, .instagram:hover{
  color: #2A42F4;
}

/* Sección de Contacto */
.contact-section {
  background: #F6D8AE;
  padding: 120px 0;
}

.contact-content {
  display: flex;
  gap: 131px;
  align-items: center;
}

.contact-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 42px;
  line-height: 44px;
  color: var(--negro);
  margin: 0;
  letter-spacing: -1px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
}

.contact-item {
  flex: 1;
}

.contact-label {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 32px;
  line-height: 36px;
  color: var(--naranja);
  margin: 0 0 8px 0;
  letter-spacing: -0.64px;
}

.contact-detail {
  display: flex;
  gap: 8px;
  align-items: center;
}

.contact-detail svg {
  width: 32px;
  height: 32px;
  color: var(--negro);
  flex-shrink: 0;
}

.contact-detail span {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 26px;
  line-height: 30px;
  color: var(--negro);
  letter-spacing: -0.52px;
}

.contact-divider {
  width: 76px;
  height: 1px;
  background: var(--naranja);
  transform: rotate(90deg);
  flex-shrink: 0;
  align-self: center;
}

/* CTA Section */
.cta-section {
  background: var(--granate);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.cta-title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 72px;
  line-height: 79.2px;
  color: var(--rosado);
  margin: 0;
  letter-spacing: -0.72px;
  flex: 1;
}

.cta-decoration {
  width: 150px;
  height: 130px;
  flex-shrink: 0;
}

.cta-decoration svg {
  width: 100%;
  height: 100%;
}

/* Responsive Design */
@media (max-width: 1199.98px) {
  .blog-content-wrapper {
    /* Mantener el float en tablet */
  }
  
  .blog-image {
    /* Mantener float en tablet */
  }
  
  .contact-content {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  
  .contact-info {
    flex-direction: column;
    gap: 32px;
  }
  
  .contact-divider {
    width: 100px;
    height: 1px;
  }
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 60px 0;
    min-height: 300px;
  }
  
  .blog-title {
    font-size: 32px;
    line-height: 36px;
  }
  
  .blog-content {
    padding: 80px 0;
  }
  
  .blog-content-wrapper {
    /* En móvil mantener float pero más pequeño */
  }
  
  .blog-image {
    width: 150px;
    height: 150px;
    margin: 0 16px 16px 0; /* Menos margen en móvil */
  }
  
  .post-content h2 {
    font-size: 32px;
    line-height: 36px;
  }
  
  .contact-section {
    padding: 80px 0;
  }
  
  .contact-title {
    font-size: 32px;
    line-height: 36px;
  }
  
  .contact-label {
    font-size: 26px;
    line-height: 30px;
  }
  
  .contact-detail span {
    font-size: 22px;
    line-height: 26px;
  }
  
  .cta-section {
    padding: 80px 0;
  }
  
  .cta-title {
    font-size: 42px;
    line-height: 44px;
  }
  
  .cta-decoration {
    width: 100px;
    height: 87px;
  }
  
  .scroll-to-top {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
  
  .scroll-to-top svg {
    width: 24px;
    height: 24px;
  }
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA FOOTER
   ======================================== */

/* Asegurar que las imágenes del footer sean perfectamente cuadradas */
footer .bg-amarillo {
    aspect-ratio: 1/1 !important;
    width: 88px !important;
    height: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: .5rem !important;
}

footer .bg-amarillo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1/1 !important;
    display: block !important;
}

/* Hover effects para el footer */
footer a:hover {
    color: var(--amarillo) !important;
    transition: color 0.3s ease;
}

.footer-news-item {
    transition: transform 0.3s ease;
}

.footer-news-item:hover {
    transform: translateY(-2px);
}

/* Imágenes decorativas según diseño de Figma */
.image-zachary-nelson {
    position: absolute;
    height: 240px;
    left: 73.26%;
    right: 0%;
    transform: translateY(-40%);
    background: url('assets/images/zachary-nelson-HPYk8X9hh34-unsplash.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.image-ricardo-loaiza {
    position: absolute;
    height: 265px;
    left: 13.06%;
    right: 73.54%;
    transform: translateY(-75%);
    background: url('assets/images/ricardo-loaiza-e77DC8P_tZ4-unsplash.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.group-48095456 {
    position: absolute;
    width: 373.03px;
    height: 373.03px;
    left: -125px;
    bottom: 0;
    transform: translateY(15%);
    background: url('assets/images/asterisc-groc.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* Estilos para la sección "Quan adherir-se?" */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
}

.step-item {
    position: relative;
    right: -100vw;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* El primer paso está visible desde el inicio */
.step-item[data-step="1"] {
    right: 0;
    opacity: 1;
}

/* Mostrar pasos inmediatamente si JavaScript no está disponible */
.no-js .step-item {
    right: 0;
    opacity: 1;
}

.step-item.animate-in {
    right: 0;
    opacity: 1;
}

.step-item.animate-out {
    right: -100vw;
    opacity: 0;
}

.step-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(111, 18, 60, 0.3);
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(111, 18, 60, 0.4);
}

.step-line {
    transition: width 0.5s ease;
}

.step-item.animate-in .step-line {
    animation: expandLine 0.8s ease forwards;
}

@keyframes expandLine {
    from {
        width: 0;
    }
    to {
        width: 123px;
    }
}

/* Responsive para pasos */
@media (max-width: 768px) {
    .step-card {
        flex-direction: column !important;
        height: auto !important;
        padding: 24px !important;
        gap: 16px !important;
    }
    
    .step-header {
        width: 100% !important;
        height: auto !important;
    }
    
    .steps-container {
        gap: 24px;
    }
}

.faq-item{
  padding: 1rem 0;
}

.faq-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.faq-section h2.title-l {
  letter-spacing: 2px;
}

.faq-item h3 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
}

.pt-10{
  padding-top: 120px !important;
}

.pb-10{
  padding-bottom: 120px !important;
}

.py-10{
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.py-20{
  padding-top: 200px !important;
  padding-bottom: 200px !important;
}

/* ============================================
   EFECTOS DE SCROLL PARA IMÁGENES
   ============================================ */

/* Efecto Imagen Appears - Aparece con fadein + movimiento elástico */
.image-appears {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
}

.image-appears.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Efecto Imagen Disappears - Desaparece con fadeout + movimiento elástico */
.image-disappears {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
  visibility: visible !important;
  display: block !important;
}

/* Regla específica para imágenes */
img.image-disappears {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
  display: block !important;
}

.image-disappears.hidden {
  opacity: 0 !important;
  transform: translateY(-20px) scale(0.9) !important;
}

/* Variantes adicionales para diferentes direcciones */
.image-appears-left {
  opacity: 0;
  transform: translateX(-40px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
}

.image-appears-left.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.image-appears-right {
  opacity: 0;
  transform: translateX(40px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
}

.image-appears-right.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.image-disappears-left {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
}

.image-disappears-left.hidden {
  opacity: 0 !important;
  transform: translateX(-30px) scale(0.9) !important;
}

.image-disappears-right {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: opacity, transform;
}

.image-disappears-right.hidden {
  opacity: 0 !important;
  transform: translateX(30px) scale(0.9) !important;
}

.btn.btn-solid-black:hover {
  color: var(--blanco) !important;
}

.btn{
  z-index: 3;
  border-radius: var(--bs-border-radius);
}

.blue-logo{
  top: -444px;
  right: -577px;
  z-index: 1;
  width: 1144px;
  height: 1144px;
}

.star-logo{
  top: -207px;
  right: -433px;
  z-index: 3;
  width: 793px;
  height: 793px;
  position: absolute;
}

.star-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.hero-background-mobile{
  margin-right: 3rem !important;
  margin-left: 1.5rem !important;
}

.disciplines-section {
  height: 100vh;
  overflow: hidden;
  background-color: var(--amarillo);
}

.text-left{
  text-align: left !important;
}

.why-member-img{
  height: 674px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden;
}

.blog-hero.hero-rosado{
  background-color: #E4D1FF;
}

.star-container-wrapper {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: visible;
  .star-container {
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: visible;
    svg {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translateY(35%);
      overflow: visible;
    }
  }
}

.requirements-asterisc{
  position: absolute; 
  top: 80px; 
  right: 0; 
  z-index: 0; 
  width: 355px; 
  height: 355px;
}

.user-types-asterisc{
  position: absolute; 
  top: -217px; 
  left: -230px; 
  z-index: 0; 
  width: 571px; 
  height: 571px;
}

.faq-section-asterisc{
  position: absolute; 
  top: -299px; 
  left: -240px; 
  z-index: 0; 
  width: 461px; 
  height: 461px;
}

.protection-asterisc{
  position: absolute; 
  right: 0; 
  z-index: 0; 
  height: 524px;
  width: 524px;
}

.header-asterisc-color-blue{
  position: absolute;
  left: auto;
  top: -20px;
  right: 0;
  z-index: 4;
  height: 1144px;
  width: 1144px;
  rect{
    fill: #019AE7;
  }
}

.faq-section * {
  letter-spacing: 0px !important;
}

.hover-grow {
  transition: transform 0.4s ease;
}

.hover-grow circle {
  fill: #ffcc19;
  transition: fill 0.5s ease;
}

.position-absolute.d-flex.align-items-center:hover .hover-grow {
  transform: scale(1.5);
}

.position-absolute.d-flex.align-items-center:hover .hover-grow circle {
  fill: #019AE7;
}

.cisac-section.bg-granate{
  background-color: #591345 !important; 
}

.cisac-section.bg-granate *, .cisac-section.bg-sky-blue *{
  transition: color 0.3s ease;
  text-decoration: none !important;
}

.cisac-section.bg-granate.hover-active *{
  color: var(--rosado) !important;
}

.cisac-section.bg-sky-blue:hover *{
  color: #FFD900 !important;
}

.normativa-content{
  .heading-xl{ 
    font-size: 50px;
    letter-spacing: 0;
  }
  .heading-m{
    font-size: 20px;
  }
}

.mb-4_5{
  margin-bottom: 2rem !important;
}

.organitzacio-section{
  h2.text-taronja{
    color: #FF493F; 
    font-size: 26px;
  }
}

.assamblea-section{
  h2.text-granate{
    font-size: 42px;
    font-weight: 700;
    line-height: 44px;
  }
}

.administracio-section {
  .container-fluid {
    z-index: 1;
    .image-row {
      display: grid;
      gap: 21px;
      .col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        border: 1px solid black;
        border-radius: 10px;
        padding: 24px;
        h3.titol{
          font-size: 26px;
          font-weight: 700 !important;
          line-height: 30px;
        }
        .nom{
          font-size: 16px;
          font-weight: 700;
          line-height: 20px;
        }
        .ocupacio{
          font-size: 16px;
          font-weight: 500;
          line-height: 20px;
        }
      }
      &.row-3 .col {
        min-height: 154px;
      }
      &.row-4 .col,
      &.row-3-alt .col, 
      &.row-2 .col {
        min-height: 136px;
      }
      &.row-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      &.row-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      &.row-3-alt {
        grid-template-columns: repeat(3, 1fr);
      }
      &.row-2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
@media (max-width: 768.98px){
  .administracio-section{
    .image-item {
      width: 70vw !important;
    }
  }
}

.organigrama-section{
  .organigrama{
    display: flex;
    justify-content: center;
  }
  .container-fluid::-webkit-scrollbar {
    height: 12px; 
  }
  .container-fluid::-webkit-scrollbar-track {
    background: #D9D9D9;
    border-radius: 10px;
  }
  .container-fluid::-webkit-scrollbar-thumb {
    background-color: #019AE7; 
    border-radius: 10px;
  }
  .firma-top .firma{
    left: -344px;
    top: -274px;
    transform: translateY(0%) translateX(0) rotate(123deg);
    width: 582px; 
    aspect-ratio: 1/1;
    mix-blend-mode: multiply;
    z-index: 0;
  }
}

.plans-section .container-img{
  margin-top: 84px;
}

.avis-legal{
  font-size: 12px;
}

.contact-form-box{
  margin-right: 3rem;
  left: 5%;
}

.share-btn svg, .instagram svg{
  pointer-events: auto;
}

.footer .bg-amarillo{
  background-color: #ffd900 !important;
}

.contact-form-section.form-white{
  height: 650px;
  .contact-form-box{
    transform: translateY(-18%) !important;
  }
}
@media (max-width: 487px){
  .contact-form-section.form-white{
    height: 1085px !important;
  }
}

.image-t-mobile{
  z-index:99;
}

@media (max-width: 1400px){
  .image-t-mobile{
    z-index:0;
  }
}

.sdadv-groc img {
  transition: opacity 0.6s ease-in-out;
}

a:hover .sdadv-groc img {
  filter: invert(26%) sepia(96%) saturate(748%) hue-rotate(359deg) brightness(103%) contrast(101%);
}

@media (max-width: 1174px) and (min-width: 991px){
  .que-es-card{
    margin-top: 75px !important;
  }
}

@media (max-width: 991.98px) {
  .star-container.blue{
    top: 0 !important;
  }
  h2{
    font-size: 42px !important;
    letter-spacing: 0px !important;
  }
  .legal-section h2.h2-rosado{
    font-size: 42px !important;
    line-height: 44px !important;
  }
  .cisac-section h2.text-rosado{
    font-size: 50px !important; 
    line-height: 54px !important; 
    font-weight: 700 !important;
    letter-spacing: 1px !important;
  }
  .text-header-phone{
    padding-right: 1.8rem !important;
  }
  .row.hero-title-mobile-b{
    display: flex !important;
    align-items: flex-end !important;
    .hero-content-mobile-p{
      padding-left: 1.2rem !important;
    }
    .hero-llicencies-mobile-p{
      padding-left: 1.2rem !important;
      h1{
        font-size: 50px !important;
      }
    }
    h1{
      margin-bottom: 4rem !important;
      position: relative;
      z-index: 2;
    }
  }
  .intro-section.intro-what-is{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    .container-fluid{
      padding-left: 2.2rem !important;
      padding-right: 2.2rem !important;
    }
  }
  .px-2_2{
    padding-left: 2.2rem !important;
    padding-right: 2.2rem !important;
    .img-fluid{
      width: 100% !important;
      max-width: 282px !important;
    }
  }
  .mb-2_2{
    margin-bottom: 2.2rem !important;
  }
  .blue-logo{
    top: -550px;
    right: -667px;
    min-width: 1090px;
    img{
      min-width: 1090px;
    }
  }
  .star-logo{
    top: -50px !important;
    right: -144px;
    width: 292px !important;
    min-width: 292px;
    img{
      height: auto !important;
    }
  }
  .mobile-hero-bg{
    height: 422px;
    background: #000000;
    margin-bottom: 8rem;
  }
  .disciplines-section {
    height: auto;
    .d-lg-none.py-5{
      .container-fluid{
        z-index: 1;
        position: relative;
      }
    }
  }
  #scroll-circle-disciplines{
    max-width: none !important;
  }
  .faq-item h3 {
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
  }
  .navigation-items.ms-5.d-lg-none h3{
    font-weight: 700 !important;
    line-height: 44px !important; 
    letter-spacing: 1px !important;
  }
  .explore-img{
    width: 100%; 
    height: 350px; 
    max-width: 311px !important; 
    max-height: 350px !important; 
    align-self: stretch;
    object-fit: cover;
  }
  .timeline-item{
    gap: 0 !important;
  }
  .timeline-separator {
    width: 100%;
    border: none;
    border-top: 2px solid  var(--Granate, #6F123C); /* granate color */
  }
  section .btn{
    border-radius: 8px !important;
  }
  footer .bg-amarillo{
    border-radius: 8px !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  footer .btn{
    border-radius: 8px !important;
  }
  .contact-form-section{
    margin-bottom: 3rem !important;
    margin-top: 3rem !important;
    overflow-x: visible !important;
    .container-fluid{
      overflow-x: visible !important;
      .bg-rosado{
        margin-left: 2rem !important;
        padding: 1.25rem !important;
      }
    }
  }
  .why-member-section{
    padding-top: 0 !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 1.9rem !important;
      padding-right: 1.9rem !important;
      padding-top: 7.5rem !important;
      .why-member-img{
        height: auto !important; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        overflow: hidden;
        padding-bottom: 1.5rem !important;
      }
      .why-member-content{
        margin: auto !important;
        .title-l{
          font-size: 42px !important;
        }
      }
    }
  }
  .who-can-member-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
      .container-fluid{
      padding-left: 1.9rem !important;
      padding-right: 1.9rem !important;
      .title-l{
        font-size: 42px !important;
      }
      img{
        width: 62px !important;
        height: 72px !important;
      }
    }
  }
  .requirements-section.bg-amarillo{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 1.9rem !important;
      padding-right: 1.9rem !important;
      .cta-section{
        padding: 1rem !important;
        .d-flex{
          flex-direction:column !important;
          gap: 12px !important;
        }
      }
    }
  }
  .how-to-member-section.bg-morado{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 1.9rem !important;
      padding-right: 1.9rem !important;
      .row.mt-5{
        margin-top: 0 !important;
        #com-fer-se-membre{
          text-align: center !important;
          font-size: 32px !important;
          margin-bottom: 0 !important;
        }
      }
      .row.mb-5{
        margin-bottom: 0 !important;
      }
      .image-t{
        width: 100% !important;
        max-width: 311px !important;
        height: 350px !important;
        margin: 24px auto !important;
        object-fit: cover;
      }
      .my-5{
        margin-bottom: 24px !important;
        margin-top: 64px !important;
        .title-s{
          padding: 0 !important ;
          font-size: 32px !important;
          width: auto !important;
        }
      }
    }
    .steps-container{
      padding-left: 0 !important;
      margin: 0 2rem 64px !important;
      .step-item{
        .step-card{
          padding: 20px !important;
          border-radius: 42px !important;
          width: calc(100vw - 68px) !important;
          gap: 15px !important;
          h4{
            font-size: 26px !important;
          }
        }
      }
    }
    .cta-section{
      padding: 1rem !important;
      .d-flex{
        flex-direction:column !important;
        gap: 12px !important;
      }
    }
    .firma{
      display: block !important;
    }
  }
  .member-rights-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      h2{
        font-size: 42px !important;
      }
    }
  }
  .specific-rights-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      .d-flex.gap-4{
        flex-direction: column !important;
        gap: 48px !important;
        height: auto !important;
        .position-relative.d-flex.flex-column{
          width: 100% !important;
          height: auto !important;
          .rights-image{
            margin-right: auto !important;
            margin-left: auto !important;
            min-height: 250px !important;
            height: 250px !important;
            width: 100% !important;
            max-width: 310px !important;
          }
        }
      }
      .row.mt-5{
        margin-top: 2rem !important;
        .cta-section{
          padding: 1rem !important;
          .title-s{
            font-size: 32px !important;
          }
          .d-flex{
            flex-direction:column !important;
            gap: 12px !important;
          }
        }
      }
    }
    .firma{
      width: 341px !important;
      transform: translateY(-64%) translateX(31%) rotate(30deg) !important;
    }
  }
  .work-declaration-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      h2{
        font-size: 32px !important;
      }
      h3{
        font-size: 26px !important;
      }
      .contact-info{
        gap: 12px !important;
        .me-3{
          margin-right: 0.5rem !important;
        }
        .mail-margin-t{
          margin-bottom: -4px !important;
        }
        .mail-margin-b{
          margin-bottom: 0 !important;
        }
      }
      .image-b{
        height: 350px !important;
        width: 100% !important;
        max-width: 311px !important;
        margin-top: 20px !important;
      }
    }
  }
  .obligations-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      h2{
        font-size: 42px !important;
        padding-right: clamp(0px, calc((100vw - 301px) / (364 - 301) * 63), 63px) !important;
      }
    }
  }
  .specific-obligations-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    .container-fluid{
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      h2{
        font-size: 42px !important;
      }
      .obligations-cards-container{
        gap: 0 !important;
        .obligations-card{
          min-height: auto !important;
          .obligations-image{
            max-width: 320px !important;
            height: 250px !important;
          }
          .obligations-content{
            padding: 0 0 2rem 0 !important;
          }
          .obligations-content-last{
            padding: 0 !important;
          }
        }
      }
      .cta-section{
        padding: 1rem !important;
        h2{
          font-size: 32px !important;
        }
        .d-flex{
          flex-direction:column !important;
          gap: 12px !important;
        }
      }
    }
    .firma{
      transform: translateY(-97%) translateX(-61%) rotate(212deg) !important;
      width: 339px !important;
    }
    .asterisc{
      display: block !important;
      right: -166px !important;
      top: -211px !important;
    }
  }
  .firma-header.position-absolute[style*="right: -"]{
    display: block !important;
    top: 360px !important;
    right: -268px !important;
    width: 350px !important;
  }
  .contact-info-section{
    padding: 3rem 2rem !important;
    .container-fluid{
      padding: 0 !important;
    }
  }
  .contact-form-section.bg-granate{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
    }
  }
  .cisac-section.bg-sky-blue{
    padding: 40px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      .col-lg-8.px-5.position-relative{
        padding-left: .8rem !important;
        padding-right: 4rem !important;
        h2{
          line-height: 50px !important;
          font-size: 50px !important;
          .sdadv-m{
            width: 206px !important;
          }
          .sdadv-asterisc-m{
            width: 28px !important; 
            margin-left: 4px !important;
          }
        }
      }
    }
  }
  .help-section{
    padding: 140px 0 0 0 !important;
    height: auto !important;
    .container-fluid{
      padding: 0 2rem !important;
      .help-content{
        margin-top: 0 !important;
        h2{
          font-size: 32px !important;
        }
        p{
          font-size: 16px !important;
          margin-bottom: 3rem !important;
        }
      }
      img{
        position: relative !important; 
      }
      .image-t{
        margin: 0 auto 60px;
        width: 311px !important;
        height: 350px !important;
        object-fit: cover !important;
        bottom: auto !important;
        left: 50%;
        transform: translateX(-50%);
      }
      .image-b{
        width: calc(100% + 4rem);
        margin-right: -2rem;
        display: block;
        height: auto;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
      }
    }
  }
  .form-section.bg-verde{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
    }
  }
  .btn-dark{
    width: 100% !important;
  }
  .cisac-section.bg-ciruela-oscuro{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      .col-lg-8.px-5.position-relative{
        padding-left: .8rem !important;
        padding-right: 4rem !important; 
        h2{
          line-height: 44px !important;
        }    
      }
      img{
        margin-right: 0 !important;
        height: 72px !important;
        width: 62px !important;
      }
    }
  }
  .user-types-section.bg-lavanda-pastel{
    padding: 160px 2rem 60px !important;
    img{
      height: 182px !important;
      top: -22px !important;
      right: 0 !important;
      left: auto !important;
      transform: scaleX(-1);
    }
    .container-fluid{
      padding: 0 !important;
      overflow: hidden;
      .row.row-title{
        height: auto !important;
        h2{
          font-size: 32px !important;
        }
      }
    }
    .user-types-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      .user-type-item.hover-effect .bullet-point{
        background-color: #019AE7; 
        transform: translateX(10px);
        transition: all 0.3s ease;
      }
      .user-type-item{
        padding: 0 !important;
        display: flex !important;
        width: 100%;
        flex-direction: row;
        margin-bottom: 1rem;
        p{
          text-align: left !important;
        }
      }
    }
  }
  .license-types-section.bg-negro{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      .license-layout{
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        h3{
          font-size: 26px !important;
        }
        .license-column.last{
          margin-top: 3rem !important;
        }
        .license-item{
          margin-right: auto !important;
          margin-left: auto !important;
        }
      }
    }
  }
  .creativity-section.bg-blanco{
    padding: 60px 2rem 0 !important;
    overflow: hidden !important;
    .container-fluid{
      padding: 0 !important;
      .col-lg-6{
        order: 1 !important;
        .creativity-image{
          height: 250px !important;
        }
      }
      .offset-lg-1.col-lg-5{
        order: 0 !important;
        margin-bottom: 1.5rem !important;
        h2{
          margin: 0 !important;
        }
      }
    }
    svg{
      height: 239px !important;
      right: -62px !important;
      bottom: 9px !important;
    }
  }
  .cisac-section.bg-granate{
    padding: 40px 2rem !important;
    background-color: #591345 !important;
    .container-fluid{
      padding: 0 !important;
      div{
        padding-right: 0 !important;
        padding-left: 6px !important;
        .d-inline-flex{
          padding-left: 0 !important;
        }
      }
      h2{
        line-height: 54px !important;
        font-size: 49px !important;
        padding-right: 31px !important;
      }
      .ms-auto.my-auto.me-5{
        width: 83px !important;
        margin-right: 0 !important;
        padding-right: 11px !important;
      }
    }
  }
  .faq-section.bg-amarillo{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 8px !important;
    }
    h2{
      font-size: 42px !important;
    }
    .row.text-center.mb-5{
      margin-bottom: 2rem !important;
    }
    div{
      padding-left: 0 !important;
      padding-right: 0 !important;
      .d-flex.align-items-center.justify-content-between, .faq-content{
        padding-left: 11px !important;
        padding-right: 11px !important;
      }
    }
  }
  .star-logo.white{
    overflow: hidden !important;
    img{
      transform: translateX(17px);
    }
  }
  .authors-section.bg-granate{
    padding: 60px 2rem !important;
    background-color: #591345 !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        font-size: 42px !important;
        padding-right: 31px;
      }
      .my-auto.me-5{
        margin-right: 0 !important;
        height: 72px !important;
        margin-left: auto !important;
      }
    }
  }
  .disciplines-table-section.bg-blanco{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      .disciplines-accordion.d-lg-none{
        h3{
          padding-right: 10px !important;
        }
        .accordion-body{
          .col-8{
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .faq-section.bg-lavanda-pastel{
    padding: 2.5rem 2rem !important;
    .container-fluid{
      padding: 0 !important;
    }
  }
  .situations-section.bg-verde{
    padding: 2.5rem 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        font-size: 42px !important;
        line-height: 44px !important;
      }
      h3{
        line-height: 30px !important;
      }
      .title-xs{
        font-size: 20px !important;
        letter-spacing: 0 !important;
        font-weight: 900 !important;
      }
      .heading-xl{
        font-size: 26px !important;
        padding-right: 30px !important;
        font-weight: 700 !important;
      }
    }
  }
  .legal-content-section.bg-blanco{
    padding: 60px 2rem 40px !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        font-size: 26px !important;
      }
    }
  }
  .blog-title{
    font-size: 42px !important;
  }
  .blog-hero.hero-rosado{
    background-color: #E4D1FF;
    padding: 160px 2rem 80px !important;
    .container{
      padding: 0 !important;
    }
  }
  .blog-content{
    padding: 60px 2rem !important;
    .container{
      padding: 0 !important;
      .blog-image{
        width: 198px !important;
        height: 198px !important;
        margin-bottom: 48px !important;
      }
      h2{
        font-size: 26px !important;
        line-height: 30px !important;
      }
    }
    .share-section{
      flex-direction: column !important;
      align-items: start !important;
    }
  }
  .contact-section{
    padding: 60px 2rem !important;
    .container{
      padding: 0 !important;
      .contact-content{
        text-align: start !important;
        align-items: start !important;
        h2{
          font-size: 26px !important;
        }
        .contact-info.d-flex.flex-row{
          flex-direction: column !important;
          width: 100% !important;
          .contact-divider{
            width: 100% !important;
            transform: rotate(0deg) !important;
          }
        }
      }
    }
  }
  .blog-hero.hero-amarillo{
    padding: 160px 2rem 80px !important;
    .container{
      padding: 0 !important;
    }
  }
  .blog-hero.hero-naranja-claro {
    padding: 160px 2rem 80px !important;
    .container{
      padding: 0 !important;
    }
  }
  .blog-hero{
    padding: 160px 2rem 80px !important;
    .container{
      padding: 0 !important;
    }
  }
  .explore-section.bg-white.py-10{
    padding: 60px 2rem 84px !important;
    overflow: hidden;
    .explore-asterisc{
      height: 244px !important;
      bottom: -101px !important;
      left: -122px !important;
    }
    .explore-image-mobile{
      height: 350px !important;
      object-fit: cover !important;
      position: relative !important;
      transform: none !important;
      bottom: auto !important;
      right: auto !important;
      margin: 1.5rem auto !important;
    }
    .container-fluid{
      padding: 0 !important;
      .title-l.text-negro.mt-5{
        margin-top: 0 !important;
        font-size: 42px !important;
      }
      .d-flex.gap-4{
        flex-direction: column !important;
        .btn{
          margin-left: 0 !important;
        }
      }
    }
  }
  .timeline-section.bg-amarillo{
    padding: 60px 2rem 20px !important;
    .container-fluid{
      padding: 0 !important;
      .mob-order-0{
        order: 0;
      }
      .mob-order-1{
        order: 1;
      }
      .mob-order-2{
        order: 2;
      }
      .ms-auto, .me-4, .me-auto, .ms-4{
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .text-start, .text-end{
        text-align: center !important;
      }
      .row.title{
        margin: 0 auto;
        text-align: center !important;
        .title-l{
          font-size: 42px !important;
        }
      }
      .timeline-container{
        flex-direction: column !important;
        align-items: center !important;
      }
    }
  }
  .corner-circle {
    position: absolute;
    width: 255.45px;
    height: 245px;
    background-color: #E4D1FF;
    border-radius: 50%;
    bottom: -125px;
    left: -155px;  
    z-index: 1;    
  }
  .accions-section.bg-blanco{
    padding: 130px 2rem 40px !important;
    .container-fluid{
      padding: 0 !important;
      .btn{
        width: 100% !important;
      }
    }
  }
  .requirements-asterisc{
    top: auto !important; 
    right: -85px !important; 
    bottom: 460px;
    width: 240px; 
    height: 240px;
  }
  .user-types-asterisc{
    top: -265px !important; 
    right: -101px;
    left: auto !important; 
    width: 265px; 
    height: 265px;
  }
  .faq-section-asterisc{
    top: -138px; 
    left: -134px; 
    width: 216px; 
    height: 216px;
  }
  .membres-text{
    padding-top: 120px;
    padding-bottom: 80px;
  }
  .membre-img-tp, .membre-img-bt{
    transform: none;
    left: 50%;
    transform: translateX(-50%);
  }
  .membre-img-tp{
    top: -50px;
  }
  .accions-section .membre-img-tp{
    top: -154px;
  }
  .menu-item{
    text-align: left !important;
  }
  .hero-content.governanca{
    padding-right: 0 !important;
  }
  .hero-section h1.governanca{
    font-size: 50px !important;
    font-weight: 700;
    line-height: 54px;
    word-wrap: break-word;  
    overflow-wrap: break-word;   
    white-space: normal;
    z-index: 3;
  }
  .organitzacio.bg-taronja{
    padding: 60px 2rem !important;
    .col-lg-4.text-start{
      text-align: right !important;
    }
    .container-fluid{
      padding: 0 !important;
      h2{
        line-height: 44px !important;
        font-size: 42px !important;
        word-wrap: break-word;  
        overflow-wrap: break-word;   
        white-space: normal;
      }
      .arrow-icon{
        img{
          height: 72px !important;
          width: auto !important;
        }
      }
    }
  }
  .organitzacio-section{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        word-wrap: break-word;  
        overflow-wrap: break-word;   
        white-space: normal;
      }
    }
  }
  .assamblea.bg-granate{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        line-height: 44px !important;
        font-size: 42px !important;
        word-wrap: break-word;  
        overflow-wrap: break-word;   
        white-space: normal;  
      }
      .arrow-icon{
        img{
          height: 72px !important;
          width: auto !important;
        }
      }
    }
  }
  .assamblea-section{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      img{
        height: 400px;
      }
    }
  }
  .administracio.bg-verd{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        line-height: 44px !important;
        font-size: 42px !important;
        word-wrap: break-word;  
        overflow-wrap: break-word;   
        white-space: normal;  
      }
      .arrow-icon{
        img{
          height: 72px !important;
          width: auto !important;
        }
      }
    }
  }
  .administracio-section{
    .slider-container {
      position: relative;
      overflow: visible;
      max-width: 100%;
    }
    .slider-track {
      display: flex;
      transition: transform 0.4s ease;
      touch-action: pan-y;
      cursor: grab;
      width: max-content;
      margin: 0 auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }
    .slide {
      flex: 0 0 auto;
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      scroll-snap-align: center;
    }
    .image-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 389px;
      aspect-ratio: 1 / 1;
      background-color: #F6D8AE;
    }
    .image-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      max-height: 80vh;
    }
    .image-item p {
      margin-top: 0.5rem;
      font-size: 16px;
    }
    .dot-nav {
      text-align: center;
      margin-top: 1rem;
    }
    .dot {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin: 0 6px;
      background-color: #ccc;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .dot.active {
      background-color: #02AA6F;
    }
  }
  .administracio-section .image-row {
    grid-template-columns: 1fr !important;
  }
  .administracio-section {
    padding: 60px 2rem !important;
    .container-fluid {
      padding: 0 !important;
    }
  }
  .organigrama.bg-sky-blue{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        line-height: 44px !important;
        font-size: 42px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
      }
    }
    .arrow-icon{
      img{
        height: 72px !important;
        width: auto !important;
      }
    }
  }
  .organigrama-section{
    padding: 60px 2rem !important;
    .organigrama{
      justify-content: start !important;
      padding-bottom: 2rem;
    }
    .container-fluid{
      padding: 0 !important;
    }
    .firma-top .firma{
      display: block;
      left: -330px;
      top: -177px;
      transform: translateY(0%) translateX(0) rotate(123deg);
      width: 407px; 
      z-index: 0;
    }
  }
  .plans.bg-taronja{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      h2{
        line-height: 44px !important;
        font-size: 42px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
      }
    }
    .arrow-icon{
      img{
        height: 72px !important;
        width: auto !important;
      }
    }
  }
  .plans-section{
    padding: 60px 2rem !important;
    .container-fluid{
      padding: 0 !important;
      img{
        height: 400px;
        margin-bottom: 2rem !important;
      }
      h2{
        font-size: 26px !important;
        font-weight: 700;
        line-height: 30px !important; 
        margin-bottom: 1rem !important;
      }
      h3{
        font-size: 16px !important;
        font-weight: 700;
        line-height: 20px !important; 
      }
    }
    .container-img{
      margin-top: 2rem !important;
    }
  }
  .defensem-decorative-image{
      right: calc(75% + 52px) !important;
      left: auto !important;
  }
  .contact-form-box{
    margin-left: 2rem !important;
    left: auto !important;
  }
  .contact-form-box {
    margin-left: 1.3rem !important;
  }
  .cisac-section.bg-sky-blue{
    h2{
      line-height: 54px !important;
      font-size: 49px !important;
      padding-right: 31px !important;
    }
    .sdadv-groc{
      .sdadv-m{
        height: 36px !important;
      }
      .sdadv-asterisc-m{                         
        width: 26px !important; 
        margin-left: 4px;
      }
    }
  }
}

@media (max-width: 767.98px){
   .contact-form-section.form-white{
    height: 850px;
    .contact-form-box{
      transform: translateY(-12%) !important;
    }
  }
}

@media (max-width: 455px){
  .blog-content{
    .container{
      .blog-image{
        float: none !important;
      }
    }
  }
}

@media (max-width: 450.98px) {
  .requirements-asterisc{
    bottom: 500px !important;
  }
}

@media (max-width: 389.98px) {
  .legal-section h2.h2-rosado{
    font-size: 33px !important;
  }
}