:root{--bg:#f6f1e7;--surface:#fffaf1;--surface2:#efe7d6;--ink:#22301f;--muted:#5d6656;--accent:#1f4a33;--accent2:#c0322b;--onaccent:#f6f1e7;--line:#ddd3c0;--ok:#1f8a4c;--warn:#b7791f;--bad:#c0322b;--r:6px;--br:999px;--display:"Fraunces",Georgia,serif;--body:"Work Sans",system-ui,sans-serif;--script:"Fraunces",Georgia,serif;--paper:#1f4a33;--paperink:#f6f1e7;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color-scheme:light}

@font-face {
    font-family:VAGRoundedNext;
    src: url('/resources/ges-reserves/fonts/VAG_Rounded/VagRoundedNext/VAGRoundedNextRegular.otf') format('opentype');
}

body, p, li, td, th h1, h2, h3 {font-family:'VAGRoundedNext', sans-serif;}
body {background-color:var(--bg);}
a {text-decoration:none;}
.header .imatge {background-image:url('/resources/ges-reserves/images/BoscTions/capceleres-web-bosc-tions2.png');background-position:center center;background-size:cover;height:25vw;}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.hero{position:relative;height:150px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:#000}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.75;display:block}
.hero div{position:absolute;inset:auto 0 0 0;padding:16px 20px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.hero h1{font:600 30px/1.05 var(--display);margin:0}
.hero p{margin:4px 0 0;font-size:14px;opacity:.9}

.steps{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.steps span{flex:1;min-width:110px;padding:12px 10px;font-size:13px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;text-align:center}
.steps span b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);margin-right:6px;font-size:12px}
.steps span.on{color:var(--ink);border-color:var(--accent);font-weight:600}
.steps span.on b{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.steps span.done b{background:var(--ok);color:#fff;border-color:var(--ok)}
.pane{padding:22px}
h2{font:600 26px/1.15 var(--display);margin:0 0 6px}
.lead{color:var(--muted);margin:0 0 18px}
.sess{display:grid;gap:12px}
.s{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);cursor:pointer;text-align:left;width:100%}
.s[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.s[disabled]{opacity:.6;cursor:not-allowed}
.s .n{font:600 19px/1.2 var(--display)}
.s .sub{font-size:13px;color:var(--muted)}
.meter{grid-column:1/-1;height:7px;background:var(--surface2);border-radius:9px;overflow:hidden;display:flex}
.meter i{display:block;height:100%}
.meter .sold{background:var(--accent)}.meter .held{background:var(--warn)}
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}


.msg{padding:12px 14px;border-radius:var(--r);font-size:14px;margin-top:14px}
.msg.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.msg.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.msg.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}


.actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent) !important;color:var(--onaccent) !important;border:0;border-radius:var(--br);padding:13px 22px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent !important;color:var(--ink) !important;border:1px solid var(--line) !important;}
.btn.red{background:var(--bad) !important;color:#fff !important}.btn.green{background:var(--ok) !important;color:#fff !important}



.tk{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.tk .l b{display:block;font-weight:600}.tk .l span{font-size:13px;color:var(--muted)}
.tk .p{font:600 18px/1 var(--display);font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--br)}
.qty button{width:38px;height:38px;border:0;background:none;cursor:pointer;font-size:20px;color:var(--accent)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty output{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:14px;border-top:2px solid var(--accent)}
.tot span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tot strong{font:600 34px/1 var(--display);font-variant-numeric:tabular-nums}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
textarea{min-height:70px;resize:vertical}

.att{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:10px;align-items:center;margin-bottom:8px}
.att span{font-size:13px;color:var(--muted)}

.conf{text-align:center}
.conf .big{font:600 40px/1 var(--display);color:var(--accent);margin:6px 0}
.code{display:inline-block;font:600 20px/1 var(--mono);letter-spacing:.08em;padding:10px 16px;border:1px dashed var(--accent);border-radius:var(--r);margin:10px 0}


.language-selector {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.lang-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'VAGRoundedNext', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--br);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.lang-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--onaccent);
}

@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}.side{position:static}}
@media (max-width:560px){
    .grid2{grid-template-columns:minmax(0,1fr)}
    .att{grid-template-columns:minmax(0,1fr) 80px}
    .att span{grid-column:1/-1}
    .tk{grid-template-columns:minmax(0,1fr) auto}
    .tk .p{grid-column:1/-1;text-align:left}
    .hero h1{font-size:24px}
    .bo .n4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .top img{height:36px}
  .s {
    grid-template-columns: 1fr; /* Una sola columna: tot es posa un a sota de l'altre */
    gap: 10px;                  /* Espai vertical entre text i badge de places */
  }

  /* Ajust de la píndola de places disponibles */
  .s .pill {
    text-align: center;         /* Centra el text dins de la píndola */
    width: 100%;                /* Ocupa tot l'ample disponible */
    box-sizing: border-box;
  }    
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}










.content_principal {width:80%;}
.content_footer {width:80%;}
.footer {background-color:#EDEDED;color:#545859;}


.titol_pagina {color:#545859;}

.col_pagina_principal {display:flex;}
.col_pagina_principal a {width:100%;text-decoration:none;display:flex;}

.fitxa_pagina_principal {width:100%;border:1px solid #ededed;background-color:white;color:#545859;} 
.fitxa_pagina_principal .imatge {width:100%;margin:auto;}
.fitxa_pagina_principal .nom {font-weight:bold;margin-top:5px;font-size:1.4em;}
.fitxa_pagina_principal .descripcio {margin-top:5px;font-size:1.1em;}

.fitxa_pagina_principal p {background-color:white !important;}
.fitxa_pagina_principal table td {background-color:white !important;}
h5 {background-color:transparent;}
h5.titol {background-color:#545859;}
.fitxa_pagina_principal .titol_turisme_familiar {font-size:2.5vw;font-weight:bold;}
.fitxa_pagina_principal .subtitol_turisme_familiar {font-size:2vw;}

#taula_dades_facturacio {background-color:white;border:1px solid #ededed;color:#545859;}



.subtitol_reserves {color:#545859;}

.idioma_content td {width:50px;height:20px;padding:10px;text-align:center;}
.idioma_content td.enable {background-color:#545859;border:0px;}
.idioma_content td.disabled {background-color:#545859;border:0px;}

#menu-superior-reserves-online div {text-transform:uppercase;}
#menu-superior-reserves-online div.enable {background-color:#545859;}
#menu-superior-reserves-online div.disable {background-color:#EAEAEA;}


.casa_turisme_familiar {width:100%;}
.casa_turisme_familiar .imatge {width:90%;}
.casa_turisme_familiar .imatge img {width:100%;padding-bottom:10px;}
.casa_turisme_familiar .nom {font-weight:bold;width:90%;text-align:center;font-size:1vw;padding-bottom:50px;}

.tbl_informacio_tf {border:3px solid #cccccc;margin-top:10px;width:100%;}
.tbl_informacio_tf .imatge_tf {width:33%;}
.tbl_informacio_tf .info_txt_tf { border-left:3px solid #cccccc;padding-top:30px;position:relative; }
.tbl_informacio_tf .info_txt_tf .titol_tf { padding-left:2%;width:98%;font-size:1.5em; }
.tbl_informacio_tf .info_txt_tf .form_content_tf {position:absolute;bottom:0;width:98%;padding-left:2%;}
.tbl_informacio_tf .info_habitacions {border-top:3px solid #cccccc;}
.tbl_informacio_tf .info_habitacions td {padding-top:5px;padding-bottom:5px;}

/*.habitacio_info {border:2px solid #cccccc;padding:10px;margin-top:10px;margin-bottom:10px;position:relative;}*/
.habitacio_info {position:relative;}
.habitacio_info .nom_hab {display:inline-block;width:50%;color:#666666}
.habitacio_info .form_hab {display:inline-block;width:20%;color:#666666}
.habitacio_info .content_info_preu {display:inline-block;width:24%;text-align:center;}

.habitacio_info .content_info_preu .preu_room {color:#545859;font-size:25px;font-weight:bold;padding-top:10px;}
.habitacio_info .content_info_preu .preu_sense_descompte {color:#545859;font-size:18px;text-decoration: line-through}

.totals { width:100%; text-align:right;padding-right:10px;font-size:20px;text-transform:uppercase;}
.totals .valor {color:#545859;font-size:30px;display:inline-block;font-weight:bold;}

.table_resum_reserva {width:50%;}



@media (max-width: 768px) {
    .tbl_informacio_tf {width:99%}
    .tbl_informacio_tf .imatge_tf {width:100%;display:block;}
    .tbl_informacio_tf .info_txt_tf {display:block;padding-top:20px;padding-bottom:20px;border-left:0px;border-top:3px solid #cccccc;}
    .tbl_informacio_tf .info_txt_tf .titol_tf {font-size:25px;}
    .tbl_informacio_tf .info_txt_tf .form_content_tf {position:static;}

    .habitacio_info .nom_hab {display:block;width:100%;}
    .habitacio_info .form_hab {display:inline-block;width:35%;padding-top:10px;}
    .habitacio_info .content_info_preu {width:58%;padding-top:10px;}

    /* .fitxa_pagina_principal .col-md-8 { height: 250px; } */

    .fitxa_pagina_principal .titol_turisme_familiar {font-size:1.4em;}
    .fitxa_pagina_principal .subtitol_turisme_familiar {font-size:1.1em;}

    #table-seleccio td {padding-bottom:10px;}

    .table_resum_reserva {width:90%;}    
}