/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 19 de març 2026, 17:55:51
    Author     : Dr. Carles Torras Font
*/
@font-face {
    font-family: 'Yaldevi_Regular';
    src: url('fonts/Yaldevi-Regular.eot');
    src: url('fonts/Yaldevi-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Yaldevi-Regular.woff') format('woff'),
         url('fonts/Yaldevi-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Yaldevi_Bold';
    src: url('fonts/Yaldevi-Bold.eot');
    src: url('fonts/Yaldevi-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/Yaldevi-Bold.woff') format('woff'),
         url('fonts/Yaldevi-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    /*font-size: 87.5%;  Base font size: 14px*/ 
    font-family: 'Yaldevi_Regular';
    line-height: 1.429;
    margin:0;
    padding:0px;
    height:100%; 
    overflow-x: auto;
    overflow-y: auto;  
}

.capcalera {
    position: fixed;
    height:50px;
    width: 100%;
    line-height: 50px;
    text-align: center;    
    font-size: 150%;
    background: black;
    font-family: 'Yaldevi_Regular';
    vertical-align: middle;          
    color: white;
    font-weight: bold;
    margin:0;
    padding:0px;  
    margin-top: 0px;
    z-index: 10;
}
.espiga {
    position: fixed;
    top: 5px;
    height: 40px;
    width: 100%;
    color: transparent;
    vertical-align: middle; 
    background-image: url('logotip.png');
    background-repeat: no-repeat;
    z-index: 10;
}

.peu {
    text-align: left;    
    font-size: 60%;
    background: black;
    font-family: 'Yaldevi_Regular';
    padding-left: 70px;
    vertical-align: top;          
    color: white;
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 20px;
    z-index: 10;
    background-image: url('cc.jpg');
    background-repeat: no-repeat;    
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-block: 60px;
    padding-bottom: 120px;
    width: 100%;
    max-width: 1000px;
    text-align: center;
    height: 1100px;    
}

.seccio-parallax {
  /* La imatge de fons */
  background-image: url('logotip_ja_sm.jpg');
  background-size: 135%;

  /* Fixem la imatge a la pantalla */
  background-attachment: fixed;

  /* Assegurem que es vegi bé */
  background-position: left top;
  background-repeat: no-repeat;

}

/* ********************************************************************************************************** */
/* EFECTES DEL RATOLÍ DAMUNT DEL QUADRE
/* Selecciona els elements clicables de l'SVG */
/* Selecciona qualsevol rectangle que tingui un onclick */

/* 1. ESTIL GENERAL DELS QUADRES CLICABLES */
.cls-51 {
    cursor: pointer !important; /* Força la mà de clicar */
    transition: all 0.3s ease;  /* Fa que el canvi de color sigui suau */
    pointer-events: all;        /* Assegura que el ratolí detecti el polígon */
}

/* 2. EFECTE AL PASSAR EL RATOLÍ (HOVER) */
/* Fem que s'il·luminin i canviïn el color del traç */
.cls-51:hover {
    fill: #ffcc00 !important;   /* Canvia el color de fons a groc (prova-ho!) */
    stroke: #333 !important;    /* Posa un contorn fosc */
    stroke-width: 2px !important;
    filter: brightness(1.1);    /* Li dona un punt més de llum */
}

/* 3. EVITAR QUE EL TEXT BLOQUEGI EL RATOLÍ */
/* Això és vital: si el text està a sobre del quadre, el "hover" no anirà 
   tret que li diguem al text que sigui invisible per al ratolí */
svg text {
    pointer-events: none !important;
    user-select: none;
}

/* 4. ESTILS PER A LA FINESTRA MODAL (Per si els vols polir) */
.modal {
    display: none; /* Canvia a flex per JS */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    
    /* Centrem la caixa blanca horitzontal i verticalment */
    align-items: center; 
    justify-content: center;
    padding: 20px; /* Això garanteix que la caixa mai toqui els marges del navegador */
}

.modal-content {
    background-color: white;
    width: 95%;
    max-width: 850px;
    
    /* EL TRUC: Limitem l'alçada de la caixa blanca */
    max-height: 80vh; /* Ocuparà com a màxim el 80% de la pantalla */
    overflow-y: auto; /* L'scroll només passa aquí dins */
    
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    position: relative;
    padding: 20px;
}

#modalTitle {
    color: #e67e22; /* Taronja fosc */
    border-bottom: 2px solid #ffdab9;
    padding-bottom: 10px;
    margin-top: 0;
}

#modalBody {
    line-height: 1.6;
    color: #444;
    font-size: 0.9em;
}

#modalBody ul {
    text-align: left;
    margin-top: 15px;
}

#modalBody a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ffdab9;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

#modalBody a:hover {
    background-color: #fdbb94;
}

/* LA CREU DE TANCAR */
.close {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #aaa;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: #e74c3c; /* Es torna vermella en passar el ratolí */
}
.cls-51:active {
    transform: scale(0.98); /* S'encull una miqueta en clicar */
}


/* ********************************************************************************************************** */
/* TOT EL FATO GENERAT PER ILLUSTRATOR */

.cls-1 {
  letter-spacing: 0em;
}

.cls-2 {
  fill: #f9b585;
}

.cls-3 {
  letter-spacing: 0em;
}

.cls-4 {
  fill: #fcb485;
}

.cls-5 {
  fill: #ffb484;
}

.cls-6 {
  fill: #f9f6f5;
}

.cls-7 {
  letter-spacing: 0em;
}

.cls-8 {
  opacity: .49;
}

.cls-8, .cls-9, .cls-10 {
  font-size: 7px;
}

.cls-8, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17 {
  fill: #c45911;
}

.cls-8, .cls-17 {
  font-family: Yaldevi-Regular, Yaldevi;
}

.cls-18 {
  fill: #fcb484;
}

.cls-19 {
  letter-spacing: 0em;
}

.cls-20 {
  letter-spacing: -.03em;
}

.cls-21 {
  letter-spacing: .02em;
}

.cls-9, .cls-10, .cls-12, .cls-13 {
  font-family: Yaldevi-SemiBold, Yaldevi;
  font-weight: 600;
}

.cls-22 {
  letter-spacing: -.01em;
}

.cls-23 {
  fill: #fcb585;
}

.cls-24 {
  fill: #bfe1ce;
}

.cls-25 {
  fill: #fdefe8;
}

.cls-26 {
  letter-spacing: -.02em;
}

.cls-27 {
  letter-spacing: .02em;
}

.cls-28 {
  letter-spacing: 0em;
}

.cls-29 {
  letter-spacing: -.06em;
}

.cls-30 {
  fill: #fff;
}

.cls-31 {
  letter-spacing: 0em;
}

.cls-32 {
  letter-spacing: -.02em;
}

.cls-33 {
  fill: #ff8939;
}

.cls-34 {
  fill: #bfba8f;
}

.cls-35 {
  fill: #f8b687;
}

.cls-36 {
  letter-spacing: 0em;
}

.cls-37 {
  letter-spacing: 0em;
}

.cls-38 {
  fill: #f7b586;
}

.cls-39 {
  fill: #fbf3ef;
}

.cls-40 {
  letter-spacing: -.02em;
}

.cls-41 {
  fill: #fb812b;
}

.cls-42 {
  letter-spacing: -.02em;
}

.cls-43 {
  letter-spacing: -.01em;
}

.cls-44 {
  letter-spacing: -.06em;
}

.cls-11 {
  font-size: 13px;
}

.cls-11, .cls-14, .cls-15, .cls-45 {
  font-family: Yaldevi-Bold, Yaldevi;
  font-weight: 700;
}

.cls-46 {
  letter-spacing: -.02em;
}

.cls-47 {
  fill: #f5b484;
}

.cls-48 {
  fill: #ff8735;
}

.cls-49 {
  letter-spacing: -.01em;
}

.cls-50 {
  letter-spacing: 0em;
}

.cls-51 {
  fill: #ffe6d6;
}

.cls-51b {
  fill: #ffe6d6;
}

.cls-52 {
  fill: #fc812b;
}

.cls-53 {
  fill: #fbb585;
}

.cls-54 {
  letter-spacing: -.02em;
}

.cls-55 {
  letter-spacing: -.01em;
}

.cls-56 {
  letter-spacing: 0em;
}

.cls-57 {
  letter-spacing: -.04em;
}

.cls-58 {
  fill: #f7b687;
}

.cls-12 {
  font-size: 8px;
}

.cls-13, .cls-14, .cls-45, .cls-17 {
  font-size: 12px;
}

.cls-59 {
  letter-spacing: -.04em;
}

.cls-60 {
  letter-spacing: .02em;
}

.cls-15 {
  font-size: 14px;
}

.cls-61 {
  letter-spacing: 0em;
}

.cls-62 {
  letter-spacing: -.02em;
}

.cls-63 {
  letter-spacing: 0em;
}

.cls-64 {
  letter-spacing: 0em;
}

.cls-65 {
  letter-spacing: -.02em;
}

.cls-66 {
  fill: #fee6d6;
}

.cls-67 {
  fill: #ff8a3a;
}

.cls-68 {
  letter-spacing: 0em;
}

.cls-69 {
  letter-spacing: -.03em;
}

.cls-70 {
  letter-spacing: 0em;
}

.cls-71 {
  letter-spacing: 0em;
}

.cls-72 {
  letter-spacing: 0em;
}

.cls-73 {
  letter-spacing: 0em;
}

.cls-74 {
  fill: #fbb586;
}

.cls-75 {
  letter-spacing: 0em;
}

.cls-76 {
  letter-spacing: 0em;
}

.cls-77 {
  letter-spacing: -.02em;
}

.cls-78 {
  letter-spacing: 0em;
}

.cls-79 {
  letter-spacing: 0em;
}

.cls-80 {
  letter-spacing: 0em;
}

.cls-81 {
  fill: #fce6d6;
}

.cls-82 {
  letter-spacing: -.01em;
}

.cls-83 {
  letter-spacing: -.01em;
}

.cls-84 {
  letter-spacing: -.03em;
}

.cls-85 {
  letter-spacing: 0em;
}

.cls-86 {
  letter-spacing: -.01em;
}

.cls-87 {
  letter-spacing: .02em;
}

.cls-88 {
  fill: #fbb688;
}

.cls-89 {
  letter-spacing: 0em;
}

.cls-90 {
  letter-spacing: -.02em;
}

.cls-91 {
  letter-spacing: 0em;
}

.cls-92 {
  fill: #fcb383;
}

.cls-93 {
  letter-spacing: -.04em;
}

.cls-94 {
  fill: #fde6d6;
}

.cls-95 {
  fill: #feb484;
}

.cls-96 {
  letter-spacing: -.01em;
}

.cls-97 {
  fill: #ffebe0;
}

.cls-98 {
  fill: #ffb586;
}