/* ============================================================
   Tòtem Can Picafort — estil quiosc (vertical, tàctil)
   Paleta: blau marí #0d2645 · groc #f4a900 · clar #eaf2f4
   Fonts oficials: LEMON MILK (títols) · Roboto (cos)
   Origen: assets/css/totem.css del tema; canvis respecte a l'original marcats amb "app:".
   ============================================================ */

/* --- Fonts (assets/fonts/) --- */
@font-face{font-family:"LEMON MILK";src:url("../assets/fonts/LEMONMILK-Light.woff2") format("woff2"),url("../assets/fonts/LEMONMILK-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"LEMON MILK";src:url("../assets/fonts/LEMONMILK-Regular.woff2") format("woff2"),url("../assets/fonts/LEMONMILK-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"LEMON MILK";src:url("../assets/fonts/LEMONMILK-Medium.woff2") format("woff2"),url("../assets/fonts/LEMONMILK-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"LEMON MILK";src:url("../assets/fonts/LEMONMILK-Bold.woff2") format("woff2"),url("../assets/fonts/LEMONMILK-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;}

@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Light.woff2") format("woff2"),url("../assets/fonts/Roboto-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Regular.woff2") format("woff2"),url("../assets/fonts/Roboto-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Italic.woff2") format("woff2"),url("../assets/fonts/Roboto-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Medium.woff2") format("woff2"),url("../assets/fonts/Roboto-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Bold.woff2") format("woff2"),url("../assets/fonts/Roboto-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/Roboto-Black.woff2") format("woff2"),url("../assets/fonts/Roboto-Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap;}

:root{
  --f-title:"LEMON MILK",system-ui,sans-serif;
  --f-body:"Roboto",system-ui,-apple-system,sans-serif;
  --navy:#0d2645;
  --navy-2:#13355f;
  --yellow:#f4a900;
  --light:#eaf2f4;
  --ink:#0d2645;
  --radius:14px;
}

/* Base heretada de la maqueta de la web (resources/v1/css/style.css), que el tòtem antic carregava sencera. */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;padding:0;font-size:16px;line-height:20px;color:#282828;}
p{font-size:16px;line-height:24px;padding:0;margin:0;color:#000;}
h1,h2,h3,h4,h5,h6{padding:0;margin:0;line-height:30px;font-weight:normal;}
a{color:#192432;text-decoration:none;transition:all .5s ease;}
a,img{border:none;}
ul,ol{list-style-type:none;padding:0;margin:0;}

/* Tòtem físic: 2160 x 3840 (9:16 vertical). Disseny base 1080 x 1920 escalat.
   L'escala s'ajusta sola a qualsevol pantalla 9:16 (kiosk o preview): js/kiosk.js. */
.totem{
  width:1080px;
  height:1920px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:0 0 auto;
  transform-origin:center center;
  transform:scale(var(--totem-scale, 1));
  background:#fff bottom center/100% auto no-repeat;
  position:relative;
  font-family:var(--f-body);
  color:var(--ink);
}

/* Mode quiosc: el body ocupa la pantalla i el tòtem s'escala al mig. */
body.totem-kiosk{margin:0;background:#0d2645;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}

/* Títols i elements de marca amb LEMON MILK */
.totem-h2,
.totem-btn,
.totem-skip,
.totem-tile__label,
.totem-card__title,
.totem-topbar__right strong,
.totem-modal__body h2{font-family:var(--f-title);}
.totem--splash{background-image:none;}
.totem-modal__body p { font-size: 18px; line-height: 26px; margin: 20px 0px 30px 0px; }

/* ---------- Topbar ---------- */
.totem-topbar{
  display:flex;justify-content:space-between;align-items:center;
  background: center/cover no-repeat;color:#fff;padding:18px 60px;gap:16px;
  height:258px; width:100%; padding-bottom: 105px;
}
.totem-topbar__left{display:flex;align-items:center;gap:12px;}
.totem-home-ico{width:72.5px;height:72.5px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;}
.totem-home-ico img{width:72.5px;height:72.5px;}
.totem-logo-img{height:72.5px;width:auto;display:block;}
.totem-topbar__right{text-align:right;font-size:22px;line-height:1.3;opacity:.95;margin-top: 10px;}
.totem-lang-ico{display:grid;place-items:center;text-decoration:none;}
.totem-lang-ico img{width:102px;height:102px;border-radius:50%;object-fit:cover;}

/* ---------- Splash ---------- */
.totem--splash{padding:0;overflow:hidden;}
.totem-splash__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#8fbfe0;}
.totem-splash__bg::after{content:"";position:absolute;inset:0;}
.totem-splash__bg--video{overflow:hidden;}
.totem-splash__bg--video video{width:100%;height:100%;object-fit:cover;display:block;}
.totem-splash__inner{position:relative;z-index:2;padding:60px 30px;text-align:center;
  flex:1 1 auto;display:flex;flex-direction:column;align-content: center; flex-wrap: wrap; top: 141px;}
.totem-splash__logo{width:400px;height:auto;display:inline-block; margin-bottom:175px; margin-left:100px;}
.totem-splash__label{color:#182A3F;letter-spacing:2px;margin:40px 0 20px;font-size:22px;font-family: var(--f-title);}
.totem-langs{display:flex;justify-content:center;gap:0px;flex-wrap:wrap;}
.totem-lang{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#182A3F;}
.totem-lang__flag{width:125px;height:125px;border-radius:50%;object-fit:cover;background:none;}
.totem-lang__label{font-size:18px;}

/* ---------- Botons accions ---------- */
.totem-actions{display:flex;gap:16px;padding:60px 60px 60px 60px;flex-wrap:wrap;}
.totem-btn{flex:1;min-width:160px;background:var(--yellow);color:var(--navy);
  border:0;border-radius:10px;padding:25px 20px;font-size:18px;font-weight:700;
  text-decoration:none;text-align:center;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.totem-btn img{height:22px;width:auto;}

/* ---------- Títols ---------- */
.totem-h2{text-align:center;color:var(--navy);font-size:24px;font-weight:500;margin:18px 0;}

/* ---------- Mosaic Home (piràmide 1-2-3-4-5) ---------- */
.totem-mosaic{display:flex;flex-direction:column;gap:16px;padding:0 122px 24px;}
.totem-mrow{display:flex;gap:16px;flex:1;}
.totem-mrow .totem-tile{flex:1;}
.totem-mrow--1{flex:1.6; }
.totem-mrow--2 .totem-tile:first-child{flex:1.6;}

.totem-tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:190px;
  background:var(--navy-2) center/cover no-repeat;display:flex;align-items:flex-end;
  text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.12);height:220px;}
.totem-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(13,38,69,.78));}
.totem-tile__label{font-family:var(--f-body);position:relative;z-index:2;color:#fff;font-weight:500;font-size:22px;padding:25px; line-height:26px; }
.totem-tile--static{opacity:.9;}

/* ---------- Barra de filtres (04/05) ---------- */
.totem-filterbar{display:flex;gap:12px;padding:35px 100px 50px 100px;flex-wrap:wrap;align-items: center; justify-content: center;}

/* Desplegables de la barra de filtres (app: natius; el tema feia servir nice-select) */
.totem-select{position:relative;display:inline-flex;}
.totem-select select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background:#fff;color:var(--navy);border:1.5px solid var(--navy);border-radius:8px;
  font-family:var(--f-body);font-weight:600;font-size:18px;
  padding:15px 50px 15px 20px;cursor:pointer;}
.totem-select--yellow select{background:var(--yellow);color:var(--navy);border-color:var(--yellow);}
.totem-select::after{
  content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;transform:translateY(-50%);
  background:url('../assets/img/ico-dropown.svg') center/contain no-repeat;pointer-events:none;}
.totem-select:has(select[name='perfil']){display:none;}

/* ---------- Resultats ---------- */
.totem--resultats{position:relative;}
.totem--resultats .totem-filterbar{position:absolute;top:269px;left:0px;}
.totem-resultats__bar{display:flex;justify-content:space-between;align-items:center;padding:8px 100px;flex-wrap:wrap;gap:10px;
  position:absolute;top:250px;right:0px;height:200px;}
.totem-resultats__bar .totem-h2{display:none;}
.totem-toggle{display:flex;gap:11px;width: 100%;justify-content: center;margin-bottom: 40px;}
.totem-toggle button{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--navy);
  font-weight:600;font-size:18px;border-radius:34px;line-height:normal;padding:13px 25px;cursor:pointer;
  border:1.5px solid var(--navy);font-family:var(--f-body);}
.totem-toggle button img{width:22px;height:22px;}
.totem-toggle button.is-active{background:var(--yellow);color:var(--navy);border:1.5px solid var(--yellow);}
.totem-empty{padding:40px 24px;text-align:center;color:#7a8893;}
.totem--resultats .totem-empty{padding-top:170px;}

.totem-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 100px;}
.totem--resultats .totem-cards{padding:150px 100px 16px 100px;align-content:start;}
.totem-card{position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-2) center/cover no-repeat;display:flex;align-items:flex-end;
  text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.14);height: 190px;}
.totem-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(13,38,69,.8));}
.totem-card__tags{position:absolute;top:20px;left:20px;z-index:2;display:flex;gap:6px;margin:0;padding:0;list-style:none;}
.totem-card__tag{background:#e23b4e;color:#fff;font-size:11px;font-weight:700;border-radius:5px;padding:3px 8px;letter-spacing:.5px;}
.totem-card__title{font-family: var(--f-body); position: relative; z-index: 2; color: #fff; font-weight: 500; font-size: 22px; padding: 20px; line-height: 26px; margin:0;}

/* Badge de data (agenda) a la card */
.totem-cards:has(.totem-card__date) { grid-template-columns: repeat(2, 1fr); }
.totem-cards a:has(.totem-card__date) { height: 25vh; }
.totem-card__date{position:absolute; top:16px; right:16px; z-index:2; display:flex; gap:0; margin:0; padding:0; list-style:none; background: #ffffff; border-radius:8px; overflow:hidden; box-shadow: 6px 6px 11px -1px rgb(0 0 0);}
.totem-card__date-box{display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 17px 12px; line-height:1; color: var(--light); background: #e23b4e;}
.totem-card__date-box strong{font-size: 32px;font-weight:700;}
.totem-card__date-box small{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.totem-card__date--range .totem-card__date-box+.totem-card__date-box{border-left:1px solid #d7dde3;}

/* ---------- Mapa de resultats (app: Leaflet propi; el tema feia servir el motor de 6tems-maps) ---------- */
[data-view][hidden]{display:none !important;}
.totem--resultats .totem-map-wrap{padding:150px 100px 40px;}
#totem-map{height:1440px;border-radius:var(--radius);overflow:hidden;}

/* ---------- Modal detall (06) ---------- */
.totem-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;}
.totem-modal__backdrop{position:absolute;inset:0;background:rgba(13,38,69,.5);}
.totem-modal__panel{position:relative;z-index:2;width:min(940px,92%);max-height:88vh;overflow:auto;
  background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);min-height: 1400px;}
.totem-modal__close{position:absolute;top:14px;right:14px;z-index:3;width:50px;height:50px;border-radius:50%;
  background:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.totem-modal__close img{width: 25px;height: 25px;}
.totem-modal__hero{height:550px;background:center/cover no-repeat;position:relative;cursor:zoom-in;}
.totem-modal__hero .totem-card__tag{position:absolute;top:14px;left:14px;}
.totem-modal__body{padding:22px;}
.totem-modal__body h2{margin: 0 0 6px; color: var(--navy); font-size: 32px; font-weight: 500; margin-top: 10px;}
.totem-modal__loc{color:#7a8893;margin:0 0 12px;}
.totem-modal__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;}
.totem-modal__gallery img{width:100%;height:200px;object-fit:cover;border-radius:8px;cursor:zoom-in;}
#totem-map-detall{height:300px;border-radius:10px;overflow:hidden;}

/* Estat de càrrega mentre arriba la fitxa */
.totem-modal--loading .totem-modal__spinner{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;
  border:6px solid rgba(255,255,255,.35);border-top-color:#fff;animation:totem-spin .9s linear infinite;}
@keyframes totem-spin{to{transform:rotate(360deg);}}

/* Cos estil single dins el modal */
.totem-modal__event{display:flex;gap:18px;color:var(--navy);font-weight:600;margin:0 0 8px;}
.totem-modal__stars{color:#e8a800;font-size:22px;letter-spacing:2px;margin:0 0 12px;}
.totem-modal__cols{display:grid;grid-template-columns:1fr;gap:26px;}
@media (min-width:860px){.totem-modal__cols{grid-template-columns:1.7fr 1fr;}}
.totem-modal__lead{font-size:20px;line-height:30px;font-weight:600;color:var(--navy);margin:0 0 18px;}
.totem-modal__content{font-size:18px;line-height:28px;color:#33424f;}
.totem-modal__content p{margin:0 0 16px;}
.totem-modal__content img{max-width:100%;height:auto;border-radius:8px;}
.totem-modal__content p > a.boto{display:none;}
.totem-modal__audio{display:none;align-items:center;gap:8px;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:600;padding:10px 18px;border-radius:999px;margin:0 0 16px;}
.totem-modal__serveis{margin-top:20px;}
.totem-modal__serveis h3{color:var(--navy);font-size:20px;margin:0 0 10px;}
.totem-modal__serveis ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.totem-modal__serveis li{background:#eef2f6;border-radius:8px;padding:6px 12px;font-size:15px;color:#33424f;}
.totem-modal__pdf{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);
  text-decoration:none;margin-top:16px;}
.totem-modal__info{list-style:none;padding:0;margin:0 0 16px;}
.totem-modal__info li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #eceff2;
  font-size:16px;color:#33424f;}
.totem-modal__maplink{display: none;margin-top:10px;font-weight:600;color:var(--navy);text-decoration:underline;}

/* Platja: característiques (icona + títol) */
.totem-modal__caract{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0;}
.totem-modal__caract-item{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;width:96px;}
.totem-modal__caract-item img{width:48px;height:48px;object-fit:contain;}
.totem-modal__caract-item span{font-size:13px;line-height:1.2;color:#33424f;}

/* Platja: bloc "Sabies que?" */
.totem-modal__sabies{margin-top:30px;padding-top:24px;border-top:1px solid #eceff2;}
.totem-modal__sabies-top{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;}
@media (min-width:860px){.totem-modal__sabies-top{grid-template-columns:1fr 1fr;}}
.totem-modal__sabies-img{position:relative;}
.totem-modal__sabies-img img{width:100%;border-radius:10px;cursor:zoom-in;}
.totem-modal__sabies-band{position:absolute;top:12px;left:12px;width:64px;}
.totem-modal__sabies-band img{width:100%;border-radius:6px;}
.totem-modal__sabies-desc{font-size:18px;line-height:27px;color:var(--navy);font-weight:600;}
.totem-modal__sabies-txt{margin-top:20px;display:flow-root;}
.totem-modal__sabies-txt h2{color:var(--navy);font-size:26px;margin:0 0 10px;}
.totem-modal__sabies-txt p{font-size:18px;line-height:28px;color:#33424f;margin:0;}
.totem-modal__sabies-curio img{float:left;width:100px;height:100px;margin:0 25px 10px 0;border-radius:50%;object-fit:cover;}

/* ---------- Cartelera (signage 2x1m + salvapantalles) ---------- */
.totem-signage{position:fixed;inset:0;background:var(--navy);z-index:1;}
.totem-signage__empty{color:#fff;text-align:center;margin-top:40vh;font-size:24px;}
.totem-cartelera{position:fixed;inset:0;z-index:12000;background:var(--navy);overflow:hidden;}
.totem-cartelera__slide{position:absolute;inset:0;background:center/contain no-repeat;
  opacity:0;transition:opacity 2.5s ease;}
.totem-cartelera__slide.is-active{opacity:1;}
.totem-cartelera__slide--video{background:none;}
.totem-cartelera__video{display:block;width:100%;height:100%;object-fit:contain;}
.totem-cartelera--idle{cursor:pointer;}
.totem-cartelera__exit{position:fixed;left:50%;bottom:6%;transform:translateX(-50%);z-index:2;
  background:var(--yellow);color:var(--navy);border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-title);font-size:18px;font-weight:700;padding:22px 48px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);animation:totem-cart-pulse 2s ease-in-out infinite;}
@keyframes totem-cart-pulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.05);}}

/* ---------- Fotos ampliables ---------- */
.totem-zoom{position:fixed;inset:0;z-index:11000;background:rgba(0,0,0,.85);
  display:grid;place-items:center;cursor:zoom-out;}
.totem-zoom__img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.totem-zoom__close{position:absolute;top:20px;right:24px;width:54px;height:54px;border:0;border-radius:50%;
  background:#fff;color:var(--navy);font-size:34px;line-height:1;cursor:pointer;}

/* ---------- Overlay (pàgina de la web en iframe: On menjar, Transports) ---------- */
.totem-overlay{position:absolute;inset:0;z-index:2000;display:grid;place-items:center;}
.totem-overlay__backdrop{position:absolute;inset:0;background:rgba(13,38,69,.55);}
.totem-overlay__panel{position:relative;z-index:2;width:92%;height:88%;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);
  display:flex;flex-direction:column;}
.totem-overlay__close{position:absolute;top:16px;right:16px;z-index:3;width:54px;height:54px;border-radius:50%;
  border:0;background:#fff;color:var(--navy);font-size:24px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);}
.totem-overlay__frame{flex:1 1 auto;width:100%;height:100%;border:0;}

/* ---------- Itineraris preprogramats (llista + mapa en iframe) ---------- */
.totem-skip{flex:0 0 auto;background:#fff;border:2px solid var(--navy);border-radius:24px;
  padding:9px 24px;color:var(--navy);text-decoration:none;font-size:13px;font-weight:800;
  letter-spacing:1px;white-space:nowrap;}
.totem-skip:hover{background:var(--navy);color:#fff;}
.totem-cards--itineraris{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px 100px;}
.totem--itineraris .totem-card{height:260px;}
.totem--itineraris .totem-h2{margin:60px 0 18px 0;}
.totem--itineraris .totem-card__title{font-size:28px;padding:26px 120px 26px 30px;line-height:34px;}
.totem--itinerari-mapa{display:flex;flex-direction:column;}
.totem-itmapa__bar{display:flex;align-items:center;gap:20px;padding:8px 100px;flex-wrap:wrap;}
.totem-itmapa__bar .totem-h2{margin:10px 0;text-align:left;}
.totem-itmapa__frame{flex:1 1 auto;padding:0 100px 40px;display:flex;}
.totem-itmapa__frame iframe{flex:1 1 auto;width:100%;min-height:1100px;border:0;border-radius:12px;}

/* ---------- Error de càrrega (app) ---------- */
.totem-error{display:grid;place-items:center;height:100%;}
.totem-error button{width:160px;height:160px;border-radius:50%;border:0;background:var(--yellow);color:var(--navy);
  font-size:80px;line-height:1;cursor:pointer;}