:root{
    --tecla-bg-0:#080713;
    --tecla-bg-1:#171838;
    --tecla-bg-2:#232350;
    --tecla-panel:rgba(15,15,32,.88);
    --tecla-panel-strong:rgba(18,18,42,.96);
    --tecla-blue:#7695be;
    --tecla-blue-soft:#9cb9dc;
    --tecla-blue-dark:#526f9a;
    --tecla-border:#63636a;
    --tecla-border-soft:rgba(150,164,191,.22);
    --tecla-text:#e7e9ef;
    --tecla-muted:#a5abb8;
    --tecla-radius:10px;
    --tecla-shadow:0 18px 46px rgba(0,0,0,.24);
    --tecla-transition:180ms ease;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    color:var(--tecla-text);
    background:
        radial-gradient(circle at 15% 5%, rgba(74,102,132,.18), transparent 28rem),
        radial-gradient(circle at 90% 15%, rgba(72,111,109,.18), transparent 30rem),
        linear-gradient(145deg,#0c0c15 0%,#162738 58%,#304b4d 100%);
    background-attachment:fixed;
    font-family:'Quicksand',sans-serif;
}

button,a{font:inherit;}
a{color:inherit;}

.page-glow{
    position:fixed;
    width:34rem;
    height:34rem;
    border-radius:50%;
    filter:blur(100px);
    opacity:.12;
    pointer-events:none;
    z-index:-1;
}
.page-glow-one{top:-18rem;left:-10rem;background:#7695be;}
.page-glow-two{right:-14rem;bottom:-18rem;background:#4f8683;}

.site-shell{
    width:min(94%, 1760px);
    margin:0 auto;
    padding:0 0 3.5rem;
}

/* --------------------------------------------------------------------------
   HEADER + ANIMACIÓ ORIGINAL "GIF"
   -------------------------------------------------------------------------- */
.header-row{margin-right:10px;}
.header{padding:10px;height:85px;margin:30px 15px;overflow:hidden;border-bottom:2px solid #63636a;}
.logo,.logo2{width:70px;}
.logo{animation-name:logo;}
.logo2{transform:rotate(270deg);animation-name:logo2;margin-top:-20px;margin-left:-10px;}
@keyframes logo{0%{transform:rotate(360deg);}25%{transform:rotate(0deg);}100%{transform:rotate(0deg);}}
@keyframes logo2{0%{transform:rotate(270deg);}25%{transform:rotate(630deg);}100%{transform:rotate(630deg);}}
.cadena,.cadena2{width:160px;margin-left:-80px;}
.cadena{transform:rotate(270deg);animation-name:cadena;position:absolute;margin-top:5px;}
.cadena2{transform:rotate(270deg);animation-name:cadena2;position:absolute;margin-top:63px;}
@keyframes cadena{0%{margin-top:5px;}8%{margin-top:77px;}11%{margin-top:77px;}25%{margin-top:205px;}100%{margin-top:205px;}}
@keyframes cadena2{0%{margin-top:-142px;}8%{margin-top:-70px;}11%{margin-top:-70px;}25%{margin-top:63px;}100%{margin-top:63px;}}
.logo,.logo2,.cadena,.cadena2,.slider{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:linear;animation-delay:4s;}
.slider h4{margin-bottom:180px;font-weight:600;}
.slider #p1:after,.slider #p2:after{content:'Informàtica';animation-name:canvi;animation-duration:32s;animation-iteration-count:infinite;animation-timing-function:linear;animation-delay:1s;}
.slider{margin-left:160px;margin-top:-250px;animation-name:slider;color:#7695be;}
@keyframes slider{0%{margin-top:-250px;}8%{margin-top:-173px;}11%{margin-top:-173px;}25%{margin-top:-45px;}100%{margin-top:-45px;}}
@keyframes canvi{0%{content:'Informàtica';}25%{content:'Extraescolars';}50%{content:'Hardware';}75%{content:'Manteniment';}100%{content:'Informàtica';}}
.nom h1{margin-top:20px;}
.nom,.dades{color:#e3e3e3;}
.dades ul{margin:0;padding-left:0;}
.dades ul li{text-align:right;list-style-type:none;white-space:nowrap;}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.main-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;padding:0 15px;}
.services-column{min-width:0;display:flex;flex-direction:column;gap:24px;}
.aside-dreta{width:300px;max-width:100%;position:relative;}
.actions-panel{position:sticky;top:22px;}


/* Correccions V2.1: el panell lateral no pot envair les targetes. */
.services-column, .service-card, .service-copy, .service-media{min-width:0;}
.actions-panel{min-width:0;}
.action-card-media{overflow:hidden;}
.action-card-media .action-content{padding-left:2px;}

/* --------------------------------------------------------------------------
   TARGETES DE SERVEI - MANTENIM ELS NOTCHES
   -------------------------------------------------------------------------- */
.service-card{
    display:grid;
    grid-template-columns:minmax(250px,34%) minmax(0,66%);
    min-height:235px;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.14));
    position:relative;
}
.service-card-right{grid-template-columns:minmax(0,66%) minmax(250px,34%);}
.service-media{min-height:235px;background-size:cover;background-position:center;border:1px solid rgba(137,144,157,.58);position:relative;overflow:hidden;}
.service-media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 45%,rgba(12,12,25,.28));pointer-events:none;}
.service-media picture,.service-detail-photo picture{display:block;position:absolute;inset:0;width:100%;height:100%;}
.service-media img,.service-detail-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.j-card-body{position:relative;color:var(--tecla-text);background:linear-gradient(245deg,rgba(8,7,19,.98) 0%,rgba(24,23,56,.98) 42%,rgba(35,35,80,.96) 100%);border:1px solid rgba(123,127,144,.65);padding:2rem 3rem;font-size:1rem;line-height:1.68;isolation:isolate;}
.j-card-body::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(118,149,190,.06),transparent 35%);z-index:-1;}
.j-card-body p:last-child{margin-bottom:0;}
.j-card-body b{color:#f1f3f7;font-weight:700;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(118,149,190,.72);}
.j-card-body hr{border-color:rgba(163,167,181,.34);opacity:1;margin:1rem 0 1.15rem;}
.service-heading h2{margin:.15rem 0 .1rem;font-size:1.45rem;font-weight:700;color:#f2f3f7;}
.service-kicker{color:var(--tecla-blue-soft);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.card-subtitle{color:var(--tecla-muted);font-size:.9rem;margin:0;}
.notch-esq-img{clip-path:polygon(100% 0%,82% 50%,100% 100%,0 100%,0 0);width:105%;justify-self:start;z-index:1;}
.notch-dre-text{clip-path:polygon(100% 0%,100% 100%,10% 100%,1% 50%,10% 0%);width:105%;justify-self:end;padding-left:12%;z-index:2;}
.notch-esq-text{clip-path:polygon(90% 0%,99% 50%,90% 100%,0% 100%,0% 0%);width:105%;justify-self:start;padding-right:12%;z-index:2;}
.notch-dre-img{clip-path:polygon(100% 0,100% 100%,0% 100%,18% 50%,0% 0%);width:105%;justify-self:end;z-index:1;}

/* --------------------------------------------------------------------------
   PANELL D'ACCIONS
   -------------------------------------------------------------------------- */
.actions-title{margin:0 0 12px;padding:0 2px;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.actions-title span{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tecla-blue-soft);}
.actions-title small{color:#8c929e;font-size:.75rem;}
.pc{display:block;width:100%;}
.tecla-action-button{width:100%;padding:0;border:1px solid #63636a;border-radius:3px;margin:0 0 20px;overflow:hidden;color:white;text-align:left;background:linear-gradient(245deg,rgba(8,7,19,1) 0%,rgba(24,23,56,1) 40%,rgba(35,35,80,1) 100%);box-shadow:0 8px 24px rgba(0,0,0,.14);transition:transform var(--tecla-transition),border-color var(--tecla-transition),box-shadow var(--tecla-transition),opacity var(--tecla-transition);}
.tecla-action-button:hover,.tecla-action-button:focus-visible{transform:translateY(-2px);border-color:#7695be;box-shadow:0 12px 28px rgba(0,0,0,.24);outline:none;}
.tecla-action-button:disabled{cursor:wait;}
.tecla-action-button .b-img{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;object-fit:initial;background:none;}
.tecla-action-button h4{min-height:45px;margin:22px 20px 16px;position:relative;text-align:left;font-size:1.25rem;line-height:1.25;}
.tecla-action-button h4 i{float:right;margin-top:.15rem;color:#a9b7c9;}

.action-subtext{display:block;margin:-10px 20px 17px;color:#a4a9b5;font-size:.78rem;}
.action-card-code{margin-top:0;}
.support-code-mode .boto-menu-remot{display:none;}
.support-code-mode .actions-title{display:none;}
.support-code-mode .action-card-code{border-color:rgba(118,149,190,.75);}
.support-code-panel{margin-top:-8px;padding:15px 10px 8px;border-radius:var(--tecla-radius);border:1px solid rgba(118,149,190,.34);background:rgba(8,7,19,.58);box-shadow:var(--tecla-shadow);animation:panel-in 190ms ease both;}
.support-code-panel[hidden]{display:none;}
.support-code-copy{text-align:center;padding:0 8px 10px;}
.support-code-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tecla-blue-soft);}
.support-code-copy p{margin:.4rem 0 0;font-size:.92rem;color:#e8e9ed;font-weight:600;}
.support-code-panel iframe{display:block;width:100%;height:300px;border:0;border-radius:6px;background:white;}
@keyframes panel-in{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

/* --------------------------------------------------------------------------
   ASSISTÈNCIA REMOTA
   -------------------------------------------------------------------------- */
.remote-support-button.remote-loading{opacity:.82;cursor:wait;}
.remote-download-status{
    margin:-2px 0 12px;
    padding:12px 13px;
    border:1px solid rgba(118,125,145,.6);
    border-radius:8px;
    background:linear-gradient(245deg,rgba(8,7,19,.97),rgba(24,23,56,.97) 50%,rgba(35,35,80,.97));
    color:var(--tecla-text);
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.remote-download-header{font-size:.82rem;font-weight:600;margin-bottom:8px;gap:12px;}
#remote-download-percent{min-width:38px;text-align:right;color:#a9c7ee;}
.remote-progress{
    height:8px;position:relative;overflow:hidden;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
}
.remote-progress-bar{
    width:0%;border-radius:20px;
    background:linear-gradient(90deg,var(--tecla-blue-dark),var(--tecla-blue),var(--tecla-blue-soft));
    transition:width .18s ease;
}
.remote-progress-indeterminate{width:35%!important;position:absolute;left:-35%;animation:remote-progress-slide 1.15s ease-in-out infinite;}
.remote-download-success{border-color:rgba(126,190,145,.55);}
.remote-download-error{border-color:rgba(210,91,91,.7);}
.remote-download-error .remote-progress-bar{background:#b84e4e;}
@keyframes remote-progress-slide{0%{left:-35%;}55%{left:55%;}100%{left:100%;}}

/* --------------------------------------------------------------------------
   MODALS / TOASTS
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width:2440px){.site-shell{width:min(62%,1760px);}}
@media (max-width:1500px){.site-shell{width:95%;}.main-layout{gap:28px;}}
@media (max-width:1279px){.main-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px;}.j-card-body{font-size:.96rem;padding:1.6rem 2.2rem;}.notch-dre-text{padding-left:12%;}.notch-esq-text{padding-right:12%;}}
@media (max-width:1000px){.site-shell{width:97%;}.main-layout{grid-template-columns:1fr;}.aside-dreta{width:100%;order:-1;}.actions-panel{position:static;max-width:620px;margin:0 auto 10px;}.pc{display:block;width:100%;}.service-card,.service-card-right{display:flex;flex-direction:column;min-height:0;filter:none;gap:0;}.service-card-right .service-copy{order:2;}.service-card-right .service-media{order:1;}.service-media{min-height:220px;width:100%!important;margin:0!important;clip-path:none!important;border-radius:7px 7px 0 0;}.j-card-body{width:100%!important;margin:0!important;padding:1.5rem!important;clip-path:none!important;border-radius:0 0 7px 7px;}}
@media (max-width:680px){.site-shell{width:100%;padding:0 12px 2rem;}.header{margin:18px 0;height:85px;}.nom h1{font-size:1.9rem;margin-top:22px;}.dades{font-size:.78rem;}.tecla-action-button h4{font-size:1.12rem;}.support-code-panel iframe{height:315px;}}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}