/* =========================
   CARD BASE (VARIABILI CORPORATE)
   - qui cambi 1 volta sola colore/ombre e si aggiorna tutto
========================= */
.firma-card{
  --firma-emerald:#2ecc71;               /* verde smeraldo (icone attive) */
  --firma-emerald-dark:#1fa85a;          /* fallback/active */
  --firma-glow1:rgba(46,204,113,0.22);   /* alone */
  --firma-glow2:rgba(46,204,113,0.30);   /* più intensa */

  max-width:760px;
  margin:0 auto;
  font-family:Helvetica, Arial, sans-serif;
  color:#333;
  box-shadow:0 0 10px #AAAAAA;
  border:1px solid #E3E3E3;
  border-radius:4px;
  overflow:hidden;
}

/* =========================
   TOP (VERDE)
========================= */
.firma-top{
  background:#C1DB8C;
  padding:10px 15px;
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:nowrap;
  overflow:visible !important; /* consenti al QR di uscire quando scala */
}

.firma-photo{ flex:0 0 auto; }
.firma-photo img{
  max-width:130px;
  height:auto;
  display:block;
  border-radius:2px;
}

.firma-top-contacts{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
}

.firma-top-contacts a{
  color:#135528;
  text-decoration:none;
}

/* =========================
   MOBILE TITLE
========================= */
.firma-title{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
  font-style:italic;
  color:#0f4a24;
  letter-spacing:0.5px;
}
.firma-title-text{
  font-variant:small-caps;
  display:inline-block;
}

/* =========================
   DESKTOP LABEL/VALUE placeholders
========================= */
.firma-deskinfo,
.firma-deskvalue{
  display:none;
}

.firma-top-contacts{
  --desk-label:"I miei contatti";
  --desk-value:"";
}

/* =========================
   ICONS
========================= */
.firma-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:2px;
}

.firma-tel,
.firma-whatsapp,
.firma-email{
  width:46px;
  height:46px;
  border:2px solid #BFC3C7;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;

  position:relative;
  overflow:hidden;

  background:linear-gradient(
    120deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.08) 100%
  );
  background-size:220% 220%;
  background-position:0% 50%;

  transition:transform .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select:none;
  touch-action: manipulation;
  outline:none;
}

.firma-tel::after,
.firma-whatsapp::after,
.firma-email::after{
  content:"";
  position:absolute;
  inset:-55%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:translateX(-95%) rotate(18deg);
  opacity:0;
  z-index:0;
  pointer-events:none;
}

.firma-tel::before,
.firma-whatsapp::before,
.firma-email::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  border:3px solid rgba(15,74,36,0);
  opacity:0;
  pointer-events:none;
  z-index:2;
}

.firma-contact-icon{
  width:30px;
  height:auto;
  position:relative;
  z-index:3;
}
.firma-whatsapp img{
  width:30px;
  height:auto;
  position:relative;
  z-index:3;
}

.firma-tel:active,
.firma-whatsapp:active,
.firma-email:active{
  transform:scale(0.96);
  box-shadow:0 6px 14px rgba(0,0,0,0.20);
}

/* =========================
   ICON ANIM SEQUENCE (bordi + glow)
   -> qui abbiamo sostituito il verde scuro con smeraldo via variabili
========================= */
.firma-tel{ animation: firmaTelCycle 7.2s ease-in-out infinite; }
.firma-whatsapp{ animation: firmaWaCycle 7.2s ease-in-out infinite; }
.firma-email{ animation: firmaEmailCycle 7.2s ease-in-out infinite; }

.firma-tel::after{ animation: firmaTelSweep 7.2s ease-in-out infinite; }
.firma-whatsapp::after{ animation: firmaWaSweep 7.2s ease-in-out infinite; }
.firma-email::after{ animation: firmaEmailSweep 7.2s ease-in-out infinite; }

@media (hover:hover) and (pointer:fine){
  .firma-tel:hover::before,
  .firma-whatsapp:hover::before,
  .firma-email:hover::before{
    animation: firmaTapRing 5s ease-in-out 1;
  }

  .firma-tel:hover .firma-contact-icon,
  .firma-whatsapp:hover img{
    animation: firmaTapIconTelWa 5s linear 1;
  }

  .firma-email:hover .firma-contact-icon{
    animation: firmaTapIconEmail 5s linear 1;
  }
}

/* =========================
   MINI-ZOOM ICONA INTERNA sincronizzato con la sequenza
========================= */
.firma-tel:not(:hover) .firma-contact-icon,
.firma-email:not(:hover) .firma-contact-icon{
  transform-origin:center;
  will-change:transform;
}
.firma-whatsapp:not(:hover) img{
  transform-origin:center;
  will-change:transform;
}
.firma-tel:not(:hover) .firma-contact-icon{ animation:firmaTelIconCycle 7.2s ease-in-out infinite; }
.firma-whatsapp:not(:hover) img{ animation:firmaWaIconCycle 7.2s ease-in-out infinite; }
.firma-email:not(:hover) .firma-contact-icon{ animation:firmaEmailIconCycle 7.2s ease-in-out infinite; }

/* =========================
   BOTTOM (PANNA) + TEXTURE
========================= */
.firma-bottom{
  background-color:#fbf7ee;
  background-image:
    linear-gradient(0deg,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.00) 18%,
      rgba(0,0,0,0.03) 50%,
      rgba(0,0,0,0.00) 82%,
      rgba(0,0,0,0.04) 100%
    ),
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      rgba(255,255,255,0.00) 1px,
      rgba(255,255,255,0.00) 6px
    ),
    radial-gradient(circle at 20% 30%,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.00) 55%
    );
  background-size: 100% 100%, 260px 260px, 100% 100%;
  background-blend-mode: multiply, normal, normal;

  padding:12px 15px;
  border-top:1px solid #E3E3E3;
  display:flex;
  align-items:center;
  gap:15px;
}

.firma-bottom-logo img{
  max-width:200px;
  height:auto;
  display:block;
}

.firma-bottom-text{
  flex:1;
  font-size:14px;
  line-height:18px;
  text-align:left;
}
.firma-bottom-text a{
  color:#135528;
  text-decoration:none;
  font-weight:600;
}

.firma-vcf-mobile{ display:none; }
.firma-vcf-btn{
  display:inline-block;
  padding:9px 14px;
  background:#135528;
  color:#fff !important;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  font-size:13px;
}

/* =========================
   DESKTOP
========================= */
@media (min-width:601px){

  /* bottom: solo logo */
  .firma-bottom{ justify-content:center; }
  .firma-bottom-text{ display:none !important; }
  .firma-bottom-logo img{
    max-width:320px;
    width:100%;
    margin:0 auto;
  }

  /* icone più grandi */
  .firma-tel, .firma-whatsapp, .firma-email{ width:54px; height:54px; }
  .firma-contact-icon{ width:36px; }
  .firma-whatsapp img{ width:36px; }

  /* MOBILE title nascosto */
  .firma-title{ display:none; }

  /* DESKTOP label sopra icone */
  .firma-deskinfo{
    display:block;
    height:18px;
    margin-bottom:14px;
    text-align:center;
    position:relative;
    top:-14px;
  }
  .firma-deskinfo-label{ height:18px; line-height:18px; }
  .firma-deskinfo-label::after{
    content:var(--desk-label);
    display:block;
    font-variant:small-caps;
    font-style:italic;
    font-weight:600;
    font-size:12px;
    color:#0f4a24;
    letter-spacing:0.5px;
  }

  /* valore sotto icone */
  .firma-deskvalue{
    display:block;
    height:20px;
    margin-top:6px;
    text-align:center;
  }
  .firma-deskvalue-text{ height:20px; line-height:20px; }
  .firma-deskvalue-text::after{
    content:var(--desk-value);
    display:block;
    font-weight:600;
    font-size:14px;
    color:#135528;
    opacity:0;
    transition:opacity .12s ease;
  }

 @supports selector(:has(*)){
  .firma-top-contacts:has(a.firma-tel:hover){
    --desk-label:"Telefono";
    --desk-value: var(--desk-tel);
  }
  .firma-top-contacts:has(a.firma-whatsapp:hover){
    --desk-label:"WhatsApp";
    --desk-value: var(--desk-wa);
  }
  .firma-top-contacts:has(a.firma-email:hover){
    --desk-label:"Email";
    --desk-value: var(--desk-email);
  }
  .firma-top-contacts:has(a.firma-tel:hover) .firma-deskvalue-text::after,
  .firma-top-contacts:has(a.firma-whatsapp:hover) .firma-deskvalue-text::after,
  .firma-top-contacts:has(a.firma-email:hover) .firma-deskvalue-text::after{
    opacity:1;
  }
}


  /* ===== QR DESKTOP scanner-safe + corners esterni ===== */
  .firma-top-qr{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:205px;
    padding:14px 14px 12px;
    border-radius:14px;

    background:rgba(255,255,255,0.20);
    border:1px solid rgba(15,74,36,0.16);
    box-shadow:0 8px 18px rgba(0,0,0,0.10);

    position:relative;
    z-index:50;
    transform-origin:100% 50%;
    will-change:transform;
    transition:transform .18s ease, box-shadow .18s ease;
  }

  .firma-top-qr:hover{
    transform:scale(1.15);
    box-shadow:0 16px 30px rgba(15,74,36,0.18);
  }

  .firma-top-qr:hover,
  .firma-top-qr:hover *{
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>") 0 0, none !important;
  }

  /* corners esterni (sul contenitore) */
  .firma-top-qr::before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:12px;
    pointer-events:none;
    background:
      linear-gradient(#135528,#135528) left top/22px 3px no-repeat,
      linear-gradient(#135528,#135528) left top/3px 22px no-repeat,
      linear-gradient(#135528,#135528) right top/22px 3px no-repeat,
      linear-gradient(#135528,#135528) right top/3px 22px no-repeat,
      linear-gradient(#135528,#135528) left bottom/22px 3px no-repeat,
      linear-gradient(#135528,#135528) left bottom/3px 22px no-repeat,
      linear-gradient(#135528,#135528) right bottom/22px 3px no-repeat,
      linear-gradient(#135528,#135528) right bottom/3px 22px no-repeat;
    opacity:0.55;
  }

  .firma-qr-title{
    font-variant:small-caps;
    font-style:italic;
    font-weight:700;
    letter-spacing:0.6px;
    font-size:12px;
    color:#0f4a24;
    margin:0;
  }
  .firma-qr-sub{
    font-weight:700;
    font-size:12px;
    color:#135528;
    margin:0;
  }

  /* box QR pulito */
  .firma-qr-box{
    width:118px;
    height:118px;
    background:#ffffff;
    border:none;
    box-shadow:none;
    border-radius:8px;
    padding:10px;
    box-sizing:border-box;
    position:relative;
  }
  .firma-qr-box::before,
  .firma-qr-box::after{ content:none !important; }

  .firma-qr-box img{
    width:100%;
    height:100%;
    display:block;
    border-radius:0;
    transform:none !important;
    filter:none !important;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width:600px){
  .firma-photo img{ max-width:95px; }
  .firma-qr-desktop{ display:none; }

  .firma-top, .firma-bottom{
    height:150px;
    box-sizing:border-box;
  }

  .firma-tel, .firma-whatsapp, .firma-email{
    width:55px;
    height:55px;
  }
  .firma-contact-icon{ width:36px; }
  .firma-whatsapp img{ width:36px; }

  .firma-bottom{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-bottom:25px;
  }
  .firma-bottom-text{ display:none !important; }

  .firma-bottom-logo img{
    max-width:220px;
    width:100%;
    height:auto;
    margin:10px auto 2px;
  }

  .firma-vcf-mobile{
    display:block;
    width:100%;
    text-align:center;
    margin-top:5px;
  }

  .firma-deskinfo,
  .firma-deskvalue{ display:none !important; }
  .firma-title{ display:block; }
}

/* =========================
   KEYFRAMES (bordi + glow smeraldo)
========================= */
@keyframes firmaTelCycle{
  0%{ border-color:var(--firma-emerald); box-shadow:0 0 10px var(--firma-glow1); transform:scale(1.02); }
  10%{ border-color:var(--firma-emerald); box-shadow:0 0 14px var(--firma-glow2); transform:scale(1.035); }
  25%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
  100%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
}
@keyframes firmaEmailCycle{
  0%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
  50%{ border-color:var(--firma-emerald); box-shadow:0 0 10px var(--firma-glow1); transform:scale(1.02); }
  60%{ border-color:var(--firma-emerald); box-shadow:0 0 14px var(--firma-glow2); transform:scale(1.035); }
  75%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
  100%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
}
@keyframes firmaWaCycle{
  0%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
  25%{ border-color:var(--firma-emerald); box-shadow:0 0 10px var(--firma-glow1); transform:scale(1.02); }
  35%{ border-color:var(--firma-emerald); box-shadow:0 0 14px var(--firma-glow2); transform:scale(1.035); }
  50%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
  75%{ border-color:var(--firma-emerald); box-shadow:0 0 10px var(--firma-glow1); transform:scale(1.02); }
  85%{ border-color:var(--firma-emerald); box-shadow:0 0 14px var(--firma-glow2); transform:scale(1.035); }
  100%{ border-color:#BFC3C7; box-shadow:none; transform:scale(1); }
}

@keyframes firmaTelSweep{
  0%{ opacity:0.38; transform:translateX(-95%) rotate(18deg); }
  14%{ opacity:0.18; transform:translateX(0%) rotate(18deg); }
  25%{ opacity:0; transform:translateX(95%) rotate(18deg); }
  100%{ opacity:0; transform:translateX(95%) rotate(18deg); }
}
@keyframes firmaEmailSweep{
  0%{ opacity:0; transform:translateX(-95%) rotate(18deg); }
  50%{ opacity:0.38; transform:translateX(-95%) rotate(18deg); }
  64%{ opacity:0.18; transform:translateX(0%) rotate(18deg); }
  75%{ opacity:0; transform:translateX(95%) rotate(18deg); }
  100%{ opacity:0; transform:translateX(95%) rotate(18deg); }
}
@keyframes firmaWaSweep{
  0%{ opacity:0; transform:translateX(-95%) rotate(18deg); }
  25%{ opacity:0.38; transform:translateX(-95%) rotate(18deg); }
  39%{ opacity:0.18; transform:translateX(0%) rotate(18deg); }
  50%{ opacity:0; transform:translateX(95%) rotate(18deg); }
  75%{ opacity:0.38; transform:translateX(-95%) rotate(18deg); }
  89%{ opacity:0.18; transform:translateX(0%) rotate(18deg); }
  100%{ opacity:0; transform:translateX(95%) rotate(18deg); }
}

@keyframes firmaTapRing{
  0%{ opacity:0; border-color:rgba(15,74,36,0); }
  6%{ opacity:1; border-color:var(--firma-emerald-dark); }
  94%{ opacity:1; border-color:var(--firma-emerald-dark); }
  100%{ opacity:0; border-color:rgba(15,74,36,0); }
}
@keyframes firmaTapIconTelWa{
  0%{ transform:rotate(0deg); filter:none; }
  6%{ filter:hue-rotate(55deg) saturate(1.9) brightness(1.08); }
  94%{ filter:hue-rotate(55deg) saturate(1.9) brightness(1.08); }
  100%{ transform:rotate(360deg); filter:none; }
}
@keyframes firmaTapIconEmail{
  0%{ transform:rotate(0deg); filter:none; }
  6%{
    filter: brightness(0) saturate(100%)
            invert(46%) sepia(78%) saturate(520%)
            hue-rotate(88deg) brightness(98%) contrast(96%);
  }
  94%{
    filter: brightness(0) saturate(100%)
            invert(46%) sepia(78%) saturate(520%)
            hue-rotate(88deg) brightness(98%) contrast(96%);
  }
  100%{ transform:rotate(360deg); filter:none; }
}

/* mini-zoom interno */
@keyframes firmaTelIconCycle{
  0%{ transform:scale(1); }
  6%{ transform:scale(1.10); }
  16%{ transform:scale(1); }
  25%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
@keyframes firmaWaIconCycle{
  0%{ transform:scale(1); }
  25%{ transform:scale(1); }
  32%{ transform:scale(1.10); }
  42%{ transform:scale(1); }
  50%{ transform:scale(1); }
  75%{ transform:scale(1); }
  82%{ transform:scale(1.10); }
  92%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
@keyframes firmaEmailIconCycle{
  0%{ transform:scale(1); }
  50%{ transform:scale(1); }
  57%{ transform:scale(1.10); }
  67%{ transform:scale(1); }
  75%{ transform:scale(1); }
  100%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .firma-tel, .firma-whatsapp, .firma-email{ animation:none !important; }
  .firma-tel::after, .firma-whatsapp::after, .firma-email::after,
  .firma-tel::before, .firma-whatsapp::before, .firma-email::before{
    animation:none !important;
    opacity:0 !important;
    display:none !important;
  }
  .firma-tel .firma-contact-icon,
  .firma-whatsapp img,
  .firma-email .firma-contact-icon{
    animation:none !important;
  }
}

/* =========================================================
   24/12 FIX HARD: header/toggle non cliccabile SOLO su pagina masonry
   Probabile causa: overlay/pseudo-elemento sopra la pagina.
   Mettere questo blocco ALLA FINE del CSS.
   ========================================================= */

/* Header sempre sopra qualsiasi overlay */
.t4-header,
.t4-navbar,
.t4-sticky,
header,
.navbar,
.header {
  position: relative !important;
  z-index: 2147483647 !important; /* z-index "massimo" */
}

/* Se il toggle sta in un contenitore specifico, lo blindiamo comunque */
.t4-header a,
.t4-header button,
.t4-header .btn,
.t4-navbar a,
.t4-navbar button,
.t4-navbar .btn {
  position: relative !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* Disinnesca overlay invisibili che possono coprire l’header */
.blog.view-masonry::before,
.blog.view-masonry::after,
.blog.view-masonry .magz-layout::before,
.blog.view-masonry .magz-layout::after,
.blog.view-masonry .row::before,
.blog.view-masonry .row::after {
  pointer-events: none !important;
}

/* Evita che contenitori masonry “salgano” di z-index */
.blog.view-masonry,
.blog.view-masonry .magz-layout,
.blog.view-masonry .items-row,
.blog.view-masonry .row,
.blog.view-masonry .item,
.blog.view-masonry .item-inner {
  z-index: 0 !important;
}

/* =========================================================
   MOBILE - usa solo il pulsante Off-canvas T4
   Nasconde il secondo hamburger del Megamenu in tutto il sito
   ========================================================= */

@media (max-width: 991.98px) {

  .navbar-expand-lg > .navbar-toggler {
    display: none !important;
  }

}
/* =========================================================
   CTA ARCH� - pulsanti azione articoli
   ========================================================= */

.arche-cta {
  display:inline-block;
  padding:13px 28px;
  background:#135528;
  color:#fff !important;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none !important;
  border:1px solid #135528;
  border-radius:7px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.arche-cta:hover,
.arche-cta:focus-visible {
  background:#1d7438;
  border-color:#1d7438;
  color:#fff !important;
  text-decoration:none !important;
  transform:translateY(-2px);
  box-shadow:0 5px 12px rgba(19,85,40,.22);
}

.arche-cta:active {
  transform:translateY(0);
  box-shadow:0 2px 5px rgba(19,85,40,.18);
}

.arche-cta:focus-visible {
  outline:2px solid #C1DB8C;
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
  .arche-cta {
    transition:none;
  }

  .arche-cta:hover,
  .arche-cta:focus-visible,
  .arche-cta:active {
    transform:none;
  }
}
/* =========================================================
   TITOLI ARTICOLI ARCH�
   Verde scuro leggibile + richiamo al verde corporate
   ========================================================= */

.com-content-article .arche-article-title {
  margin:22px 0 26px;
  padding:0;
  color:#135528;
  font-family:Helvetica,Arial,sans-serif;
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  letter-spacing:.01em;
}

.com-content-article .arche-article-title::after {
  content:"";
  display:block;
  width:64px;
  height:4px;
  margin:12px auto 0;
  background:#C1DB8C;
  border-radius:999px;
}

@media (max-width:600px) {
  .com-content-article .arche-article-title {
    margin:18px 0 22px;
    font-size:25px;
  }

  .com-content-article .arche-article-title::after {
    width:52px;
    height:3px;
    margin-top:10px;
  }
}
/* =========================================================
   HOME MAGAZINE - TITOLI CARD SU DUE RIGHE
   Allinea i tre box anche quando un titolo va a capo
   ========================================================= */

.blog .item .page-header h2,
.blog .item .page-header h3,
.blog .item .article-title,
.blog .item .item-title {
  min-height:2.5em;
  line-height:1.25;
  display:flex;
  align-items:flex-start;
  margin-bottom:12px;
}

/* Su mobile lasciamo l'altezza naturale */
@media (max-width:767.98px) {
  .blog .item .page-header h2,
  .blog .item .page-header h3,
  .blog .item .article-title,
  .blog .item .item-title {
    min-height:0;
    display:block;
  }
}

/* =========================================================
   HOME - SERVIZI ARCH�
   Solo per il Magazine Home con Classe Blog:
   arche-home-services

   Struttura verticale desktop:
   1) Corpo descrittivo: 450px
   2) Sintesi verde: 350px
      - titolo
      - massimo 5 punti
      - ogni punto pu� occupare fino a circa 2 righe
   3) Pulsante: 54px

   Su mobile tutte le altezze tornano naturali.
   ========================================================= */

.arche-home-services .article-body,
.arche-home-services .article-body > .arche-service-card {
  height:100%;
}

.arche-home-services .arche-service-card {
  display:grid;
  grid-template-rows:450px 350px 54px;
  gap:22px;
  box-sizing:border-box;
}

/* 1. CORPO DESCRITTIVO */
.arche-home-services .arche-service-body {
  height:450px;
  min-height:450px;
  max-height:450px;
  overflow:hidden;
  box-sizing:border-box;
}

/* 2. SINTESI VERDE */
.arche-home-services .arche-service-summary {
  height:350px;
  min-height:350px;
  max-height:350px;
  overflow:hidden;
  box-sizing:border-box;
}

/* Titolo della sintesi */
.arche-home-services .arche-service-summary > div:first-child {
  min-height:20px;
  margin-bottom:10px !important;
}

/* Elenco: spazio calibrato per massimo 5 punti */
.arche-home-services .arche-service-summary ul {
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.arche-home-services .arche-service-summary li {
  min-height:56px;
  box-sizing:border-box;
}

/* 3. PULSANTE */
.arche-home-services .arche-service-action {
  height:54px;
  min-height:54px;
  max-height:54px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin:0 !important;
  box-sizing:border-box;
}

.arche-home-services .arche-service-action .arche-cta {
  margin:0 !important;
}

/* MOBILE: niente altezze forzate */
@media (max-width:767.98px) {

  .arche-home-services .article-body,
  .arche-home-services .article-body > .arche-service-card {
    height:auto;
  }

  .arche-home-services .arche-service-card {
    display:block;
  }

  .arche-home-services .arche-service-body {
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
  }

  .arche-home-services .arche-service-summary {
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
    margin-top:26px;
  }

  .arche-home-services .arche-service-summary > div:first-child {
    min-height:0;
  }

  .arche-home-services .arche-service-summary li {
    min-height:0;
  }

  .arche-home-services .arche-service-action {
    height:auto;
    min-height:0;
    max-height:none;
    margin-top:22px !important;
    display:block;
    text-align:center;
  }
}


/* =========================================================
   HOME - SERVIZI ARCH�
   Animazione ingresso card su mobile
   ========================================================= */

@media (max-width:767.98px) {

  .arche-home-services .arche-service-card {
    opacity:0;
    transform:translateY(22px);
    transition:
      opacity .55s ease,
      transform .55s ease;
    will-change:opacity, transform;
  }

  .arche-home-services .arche-service-card.is-visible {
    opacity:1;
    transform:translateY(0);
  }

}

/* Accessibilit�: disattiva l'animazione se il dispositivo lo richiede */
@media (prefers-reduced-motion: reduce) {
  .arche-home-services .arche-service-card {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   HOME - SERVIZI ARCH�
   Animazione mobile rifinita:
   - dissolvenza pi� lenta
   - lieve salita del contenuto
   - immagine con fade + micro-zoom sobrio
   ========================================================= */

@media (max-width:767.98px) {

  /* Contenuto della card */
  .arche-home-services .arche-service-card {
    opacity:0;
    transform:translateY(24px);
    transition:
      opacity .95s ease,
      transform .95s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }

  .arche-home-services .arche-service-card.is-visible {
    opacity:1;
    transform:translateY(0);
  }

  /* Immagine introduttiva dell'articolo */
  .arche-home-services .arche-service-entry .item-image img,
  .arche-home-services .arche-service-entry .article-intro-image img,
  .arche-home-services .arche-service-entry figure img {
    opacity:.82;
    transform:scale(1.035);
    transition:
      opacity 1.10s ease,
      transform 1.10s cubic-bezier(.22,.61,.36,1);
    transform-origin:center center;
    will-change:opacity, transform;
  }

  .arche-home-services .arche-service-entry.arche-service-visible .item-image img,
  .arche-home-services .arche-service-entry.arche-service-visible .article-intro-image img,
  .arche-home-services .arche-service-entry.arche-service-visible figure img {
    opacity:1;
    transform:scale(1);
  }
}

/* Accessibilit� */
@media (prefers-reduced-motion:reduce) {
  .arche-home-services .arche-service-card,
  .arche-home-services .arche-service-entry .item-image img,
  .arche-home-services .arche-service-entry .article-intro-image img,
  .arche-home-services .arche-service-entry figure img {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   HOME SERVIZI - HOVER DESKTOP SU TUTTA LA CARD
   Effetto sobrio e professionale:
   - micro zoom dell'articolo attivo
   - micro zoom + lieve luminosit� sull'immagine
   - box testo appena pi� luminoso
   - altri due articoli leggermente attenuati
   ========================================================= */

@media (min-width:768px) and (hover:hover) and (pointer:fine) {

  .arche-home-services .item {
    transition:
      opacity .35s ease,
      transform .35s cubic-bezier(.22,.61,.36,1),
      filter .35s ease;
    transform-origin:center center;
  }

  .arche-home-services .item img {
    transition:
      transform .45s cubic-bezier(.22,.61,.36,1),
      filter .45s ease;
    transform-origin:center center;
  }

  .arche-home-services .arche-service-card {
    transition:
      background-color .35s ease,
      box-shadow .35s ease,
      transform .35s ease;
  }

  /* Se il mouse entra in uno dei tre servizi,
     gli altri due passano leggermente in secondo piano */
  .arche-home-services:has(.item:hover) .item {
    opacity:.82;
    filter:saturate(.94);
  }

  /* Servizio attivo */
  .arche-home-services .item:hover {
    opacity:1 !important;
    filter:none;
    transform:scale(1.012);
    position:relative;
    z-index:3;
  }

  /* Immagine del servizio attivo */
  .arche-home-services .item:hover img {
    transform:scale(1.025);
    filter:brightness(1.035);
  }

  /* Corpo dell'articolo appena pi� luminoso */
  .arche-home-services .item:hover .arche-service-card {
    background:#fffdf8 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.10);
  }

  /* Pulsante del servizio attivo */
  .arche-home-services .item:hover .arche-cta {
    box-shadow:0 5px 12px rgba(19,85,40,.22);
  }
}

/* Riduzione movimento */
@media (prefers-reduced-motion:reduce) {
  .arche-home-services .item,
  .arche-home-services .item img,
  .arche-home-services .arche-service-card {
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   HOME SERVIZI - CARD UNIFICATA PANNA + TITOLI
   Uniforma immagine, titolo e contenuto in un'unica card.
   ========================================================= */

.arche-home-services .item {
  background:#fbf7ee;
  border:1px solid #e2dccf;
  border-radius:12px;
  padding:10px;
  box-sizing:border-box;
  box-shadow:0 5px 16px rgba(0,0,0,.055);
  overflow:hidden;
}

/* Immagine integrata nella card */
.arche-home-services .item .item-image,
.arche-home-services .item .article-intro-image,
.arche-home-services .item figure {
  margin:0 0 12px !important;
}

.arche-home-services .item .item-image img,
.arche-home-services .item .article-intro-image img,
.arche-home-services .item figure img {
  display:block;
  width:100%;
  border-radius:8px;
}

/* Titolo pi� presente e centrato */
.arche-home-services .item .page-header h2,
.arche-home-services .item .page-header h3,
.arche-home-services .item .article-title,
.arche-home-services .item .item-title {
  min-height:2.5em;
  margin:0 8px 16px !important;
  color:#135528;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  justify-content:center;
  align-items:flex-start;
}

/* Piccolo segno grafico Arch� sotto il titolo */
.arche-home-services .item .page-header h2::after,
.arche-home-services .item .page-header h3::after,
.arche-home-services .item .article-title::after,
.arche-home-services .item .item-title::after {
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin:8px auto 0;
  background:#C1DB8C;
  border-radius:999px;
}

/* Il box interno non deve sembrare una seconda card */
.arche-home-services .arche-service-card {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Hover desktop: valorizza l'intera card, senza doppia ombra */
@media (min-width:768px) and (hover:hover) and (pointer:fine) {

  .arche-home-services .item:hover {
    background:#fffdf8;
    box-shadow:0 10px 26px rgba(0,0,0,.10);
  }

  .arche-home-services .item:hover .arche-service-card {
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* Mobile: card piena e titolo pi� leggibile */
@media (max-width:767.98px) {

  .arche-home-services .item {
    padding:10px;
    border-radius:12px;
    box-shadow:0 5px 16px rgba(0,0,0,.06);
  }

  .arche-home-services .item .page-header h2,
  .arche-home-services .item .page-header h3,
  .arche-home-services .item .article-title,
  .arche-home-services .item .item-title {
    min-height:0;
    display:block;
    margin:2px 8px 18px !important;
    font-size:24px;
    line-height:1.25;
    text-align:center;
  }

  .arche-home-services .item .page-header h2::after,
  .arche-home-services .item .page-header h3::after,
  .arche-home-services .item .article-title::after,
  .arche-home-services .item .item-title::after {
    width:38px;
    height:3px;
    margin-top:9px;
  }
}


/* =========================================================
   HOME SERVIZI - SPAZIATURA DESKTOP SENZA ALTERARE LA GRIGLIA
   Mantiene le 3 colonne Joomla.
   Riduce visivamente ogni card di 7px per lato,
   senza aggiungere margini alla colonna.
   ========================================================= */

@media (min-width:768px) {

  /*
     La .item resta larga esattamente quanto deciso da Joomla.
     NON impostiamo width, margin laterali o flex-basis.
  */
  .arche-home-services .item {
    position:relative;
    box-sizing:border-box;

    /* spazio interno: la colonna non cresce */
    padding-left:7px;
    padding-right:7px;

    /* lo sfondo panna viene spostato sul pseudo-elemento */
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible;
  }

  /* card panna ridotta di 7px per lato */
  .arche-home-services .item::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:7px;
    right:7px;
    z-index:0;
    pointer-events:none;

    background:#fbf7ee;
    border:1px solid #e2dccf;
    border-radius:12px;
    box-shadow:0 5px 16px rgba(0,0,0,.055);

    transition:
      background-color .35s ease,
      box-shadow .35s ease;
  }

  .arche-home-services .item > * {
    position:relative;
    z-index:1;
  }

  /* hover sull'intera card */
  .arche-home-services .item:hover {
    background:transparent !important;
    box-shadow:none !important;
  }

  .arche-home-services .item:hover::before {
    background:#fffdf8;
    box-shadow:0 10px 26px rgba(0,0,0,.10);
  }
}

/* MOBILE: mantiene la versione gi� approvata */
@media (max-width:767.98px) {

  .arche-home-services .item {
    width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
  }

  .arche-home-services .item:last-child {
    margin-bottom:0;
  }
}


/* =========================================================
   HOME SERVIZI - TITOLI LEGGIBILI ANCHE IN DARK MODE
   Forza il colore Arch� su titolo e relativo link.
   ========================================================= */

.arche-home-services .item .page-header h2,
.arche-home-services .item .page-header h3,
.arche-home-services .item .article-title,
.arche-home-services .item .item-title,
.arche-home-services .item .page-header h2 a,
.arche-home-services .item .page-header h3 a,
.arche-home-services .item .article-title a,
.arche-home-services .item .item-title a {
  color:#135528 !important;
  opacity:1 !important;
  text-decoration:none !important;
}

/* Hover/focus titolo */
.arche-home-services .item .page-header h2 a:hover,
.arche-home-services .item .page-header h3 a:hover,
.arche-home-services .item .article-title a:hover,
.arche-home-services .item .item-title a:hover,
.arche-home-services .item .page-header h2 a:focus,
.arche-home-services .item .page-header h3 a:focus,
.arche-home-services .item .article-title a:focus,
.arche-home-services .item .item-title a:focus {
  color:#1d7438 !important;
}

/* In dark mode la card resta panna, quindi manteniamo gli stessi colori */
html[data-bs-theme="dark"] .arche-home-services .item .page-header h2,
html[data-bs-theme="dark"] .arche-home-services .item .page-header h3,
html[data-bs-theme="dark"] .arche-home-services .item .article-title,
html[data-bs-theme="dark"] .arche-home-services .item .item-title,
html[data-bs-theme="dark"] .arche-home-services .item .page-header h2 a,
html[data-bs-theme="dark"] .arche-home-services .item .page-header h3 a,
html[data-bs-theme="dark"] .arche-home-services .item .article-title a,
html[data-bs-theme="dark"] .arche-home-services .item .item-title a,
.t4-dark .arche-home-services .item .page-header h2,
.t4-dark .arche-home-services .item .page-header h3,
.t4-dark .arche-home-services .item .article-title,
.t4-dark .arche-home-services .item .item-title,
.t4-dark .arche-home-services .item .page-header h2 a,
.t4-dark .arche-home-services .item .page-header h3 a,
.t4-dark .arche-home-services .item .article-title a,
.t4-dark .arche-home-services .item .item-title a {
  color:#135528 !important;
  opacity:1 !important;
}

/* =========================================================
   LOGO HEADER ARCH� SCUOLA
   ========================================================= */

.navbar-brand img,
.logo-image img,
.t4-logo img {
  width:300px !important;
  max-width:300px !important;
  height:auto !important;
  display:block;
}

/* MOBILE */
@media (max-width:767.98px) {
  .navbar-brand img,
  .logo-image img,
  .t4-logo img {
    width:260px !important;
    max-width:calc(100vw - 110px) !important;
    height:auto !important;
  }
}


/* =========================================================
   CREATIVE IMAGE SLIDER HOME - SFONDO CHIARO/SCURO
   Modulo slider Home: #cis_slider_1_213
   ========================================================= */

/* TEMA CHIARO */
body.light-active #cis_slider_1_213,
body.light-active #cis_slider_1_213 .cis_slider,
body.light-active #cis_slider_1_213 .cis_images_row,
html[data-bs-theme="light"] #cis_slider_1_213,
html[data-bs-theme="light"] #cis_slider_1_213 .cis_slider,
html[data-bs-theme="light"] #cis_slider_1_213 .cis_images_row {
  background:#fff !important;
}

/* TEMA SCURO */
body.dark-active #cis_slider_1_213,
body.dark-active #cis_slider_1_213 .cis_slider,
body.dark-active #cis_slider_1_213 .cis_images_row,
html[data-bs-theme="dark"] #cis_slider_1_213,
html[data-bs-theme="dark"] #cis_slider_1_213 .cis_slider,
html[data-bs-theme="dark"] #cis_slider_1_213 .cis_images_row,
.t4-dark #cis_slider_1_213,
.t4-dark #cis_slider_1_213 .cis_slider,
.t4-dark #cis_slider_1_213 .cis_images_row {
  background:#000 !important;
}

/* =========================================================
   FOOTER - MARCHI EDITORIALI ARCH�
   ========================================================= */

.arche-marchi-footer {
  width: 100%;
  padding: 34px 20px;
  box-sizing: border-box;
}

.arche-marchi-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.arche-marchi-footer h3 {
  margin: 0 0 28px;
  color: #135528;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
}

/* griglia */

.arche-marchi-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 24px;
}

/* spazio fisso logo 200 x 100 */

.arche-marchio {
  width: 200px;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 6px;
}

/* logo sempre proporzionato */

.arche-marchio img {
  display: block;

  width: auto;
  height: auto;

  max-width: 200px;
  max-height: 100px;

  object-fit: contain;
}

/* Didattica Libri */

.arche-marchi-didattica {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.arche-marchi-separatore {
  margin-bottom: 18px;
  color: #6b665d;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.arche-marchi-grid-didattica {
  max-width: 500px;
  margin: 0 auto;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-active .arche-marchi-footer h3,
html[data-bs-theme="dark"] .arche-marchi-footer h3,
.t4-dark .arche-marchi-footer h3 {
  color: #C1DB8C;
}

body.dark-active .arche-marchi-separatore,
html[data-bs-theme="dark"] .arche-marchi-separatore,
.t4-dark .arche-marchi-separatore {
  color: #c9c9c9;
}

body.dark-active .arche-marchi-didattica,
html[data-bs-theme="dark"] .arche-marchi-didattica,
.t4-dark .arche-marchi-didattica {
  border-top-color: rgba(255,255,255,.18);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

  .arche-marchi-grid {
    gap: 15px 18px;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

  .arche-marchi-footer {
    padding: 28px 10px;
  }

  .arche-marchi-footer h3 {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .arche-marchi-grid {
    gap: 12px;
  }

  .arche-marchio {
    width: calc(50% - 6px);
    max-width: 200px;
    height: 90px;
  }

  .arche-marchio img {
    max-width: 100%;
    max-height: 90px;
  }

}

/* =========================================================
   CREATIVE IMAGE SLIDER HOME
   NASCONDE DEFINITIVAMENTE LE FRECCE ORIGINALI DEL PLUGIN
   Manteniamo solo le frecce .arche-slider-*
   ========================================================= */

#cis_slider_1_213 .cis_button_left,
#cis_slider_1_213 .cis_button_right,
#cis_slider_1_213 img.cis_button_left,
#cis_slider_1_213 img.cis_button_right,
#cis_slider_1_213 .cis_arrow_data,
#cis_slider_1_213 .cis_arrow_left,
#cis_slider_1_213 .cis_arrow_right {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================================================
   ASSISTENTE ARCH�
   ========================================================= */

.arche-assistant-modal {
  position:fixed;
  inset:0;
  z-index:2147483646;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.arche-assistant-modal.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* sfondo */

.arche-assistant-backdrop {
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.42);
  backdrop-filter:blur(4px);
}


/* pannello */

.arche-assistant-panel {
  position:relative;
  z-index:2;

  width:min(520px, 100%);
  max-height:calc(100vh - 40px);

  overflow:auto;

  padding:28px;

  box-sizing:border-box;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(251,247,238,.98)
    );

  border:1px solid rgba(193,219,140,.75);

  border-radius:20px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.25);

  transform:
    translateY(18px)
    scale(.97);

  transition:
    transform .30s cubic-bezier(.22,.61,.36,1);
}

.arche-assistant-modal.is-open
.arche-assistant-panel {

  transform:
    translateY(0)
    scale(1);
}


/* chiudi */

.arche-assistant-close {
  position:absolute;

  top:12px;
  right:15px;

  width:38px;
  height:38px;

  padding:0;

  border:0;
  border-radius:50%;

  background:transparent;

  color:#555;

  font-size:30px;
  line-height:1;

  cursor:pointer;
}


/* intestazione */

.arche-assistant-head {
  display:flex;
  align-items:center;

  gap:14px;

  padding-right:40px;
  margin-bottom:20px;
}


.arche-assistant-icon {

  width:54px;
  height:54px;

  flex:0 0 54px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#C1DB8C;
  color:#135528;

  font-size:26px;

  box-shadow:
    0 0 0 7px rgba(193,219,140,.20);
}


.arche-assistant-head h2 {

  margin:0;

  color:#135528;

  font-size:26px;
  font-weight:700;
  line-height:1.15;
}


.arche-assistant-subtitle {

  margin-top:3px;

  color:#718644;

  font-size:14px;
  font-weight:600;
}


.arche-assistant-intro {

  margin-bottom:18px;

  color:#333;

  font-size:17px;
}


/* azioni */

.arche-assistant-actions {

  display:flex;
  flex-direction:column;

  gap:10px;
}


.arche-assistant-action {

  display:grid;

  grid-template-columns:
    38px
    1fr
    22px;

  align-items:center;

  gap:12px;

  padding:13px 15px;

  color:#333 !important;
  text-decoration:none !important;

  background:#fff;

  border:1px solid #e1ded5;
  border-radius:12px;

  box-shadow:
    0 3px 10px rgba(0,0,0,.04);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.arche-assistant-action:hover {

  transform:translateY(-1px);

  border-color:#C1DB8C;

  box-shadow:
    0 7px 16px rgba(19,85,40,.10);
}


.arche-assistant-action-icon {

  color:#6e9634;

  font-size:27px;

  text-align:center;
}


.arche-assistant-action strong {

  display:block;

  color:#135528;

  font-size:16px;
}


.arche-assistant-action small {

  display:block;

  margin-top:2px;

  color:#666;

  font-size:12px;
  line-height:1.35;
}


.arche-assistant-arrow {

  color:#6e9634;

  font-size:27px;
}


/* campo chat */

.arche-assistant-chat {

  display:flex;

  gap:8px;

  margin-top:19px;
}


.arche-assistant-chat input {

  flex:1;

  min-width:0;

  height:46px;

  padding:0 15px;

  box-sizing:border-box;

  border:1px solid #d8d3c8;
  border-radius:12px;

  background:#fff;

  color:#333;

  font-size:15px;

  outline:none;
}


.arche-assistant-chat input:focus {

  border-color:#86a84c;

  box-shadow:
    0 0 0 3px rgba(193,219,140,.25);
}


.arche-assistant-chat button {

  width:46px;
  height:46px;

  flex:0 0 46px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#769d35;
  color:#fff;

  font-size:20px;

  cursor:pointer;

  transition:
    transform .18s ease,
    background-color .18s ease;
}


.arche-assistant-chat button:hover {

  background:#135528;

  transform:scale(1.05);
}


/* risposta */

.arche-assistant-response {

  display:none;

  margin-top:15px;
  padding:14px 15px;

  background:#eef4df;

  border-left:4px solid #C1DB8C;
  border-radius:8px;

  color:#333;

  font-size:14px;
  line-height:1.5;
}


.arche-assistant-response:not(:empty) {
  display:block;
}


body.arche-assistant-open {
  overflow:hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {

  .arche-assistant-modal {
    align-items:flex-end;
    padding:0;
  }

  .arche-assistant-panel {

    width:100%;
    max-height:88vh;

    padding:
      24px
      17px
      22px;

    border-radius:
      20px
      20px
      0
      0;

    transform:
      translateY(100%);
  }

  .arche-assistant-modal.is-open
  .arche-assistant-panel {

    transform:
      translateY(0);
  }


  .arche-assistant-head h2 {
    font-size:23px;
  }


  .arche-assistant-action {

    grid-template-columns:
      34px
      1fr
      20px;

    padding:
      12px
      12px;
  }

}


/* =========================================================
   ASSISTENTE ARCH� - CHAT THREAD
   Aggiungere IN FONDO al custom.css
   ========================================================= */

.arche-assistant-response.arche-chat-thread {
  display:block;
  max-height:310px;
  overflow-y:auto;
  margin-top:15px;
  padding:12px;
  background:#f7f9f1;
  border:1px solid #e2e8d3;
  border-left:4px solid #C1DB8C;
  border-radius:10px;
  scroll-behavior:smooth;
}

.arche-assistant-response.arche-chat-thread:empty {
  display:none;
}

.arche-chat-message {
  margin-bottom:12px;
}

.arche-chat-message:last-child {
  margin-bottom:0;
}

.arche-chat-label {
  margin:0 0 4px 4px;
  color:#6b735f;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.arche-chat-bubble {
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.45;
}

.arche-chat-user {
  margin-left:34px;
}

.arche-chat-user .arche-chat-label {
  text-align:right;
  margin-right:4px;
}

.arche-chat-user .arche-chat-bubble {
  background:#135528;
  color:#fff;
  border-bottom-right-radius:4px;
}

.arche-chat-assistant {
  margin-right:20px;
}

.arche-chat-assistant .arche-chat-bubble {
  background:#fff;
  color:#333;
  border:1px solid #e3e0d7;
  border-bottom-left-radius:4px;
}

.arche-chat-results {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.arche-chat-result {
  padding:11px 12px;
  background:#fff;
  border:1px solid #e3e0d7;
  border-radius:10px;
}

.arche-chat-result strong {
  display:block;
  color:#135528;
  font-size:14px;
  line-height:1.3;
}

.arche-chat-result span {
  display:block;
  margin-top:2px;
  color:#666;
  font-size:12px;
  line-height:1.35;
}

.arche-chat-result .arche-chat-agent {
  margin-top:5px;
  color:#135528;
  font-weight:700;
}

.arche-chat-result-link {
  display:inline-block;
  margin-top:7px;
  color:#135528 !important;
  font-size:12px;
  font-weight:700;
  text-decoration:none !important;
}

.arche-chat-result-link:hover {
  color:#1d7438 !important;
  text-decoration:underline !important;
}

#arche-assistant-send.is-loading {
  opacity:.6;
  cursor:wait;
}

@media (max-width:600px) {

  .arche-assistant-response.arche-chat-thread {
    max-height:34vh;
  }

  .arche-chat-user {
    margin-left:20px;
  }

  .arche-chat-assistant {
    margin-right:8px;
  }

}