/* ================================================================
   TOMKO BOOKING PORTAL - CLEAN CSS
   Riscrittura completa.
   Un solo sistema grafico responsive per desktop/tablet/mobile.
   Nessuna logica applicativa.
   ================================================================ */

/* ================================================================
   01. TOKENS
   ================================================================ */

:root{
    --tb-primary:#e30613;
    --tb-primary-dark:#a8000b;
    --tb-primary-mid:#c3121c;
    --tb-primary-light:#fdebed;

    --tb-card-head:#0b1722;
    --tb-card-body:#0b1722;
    --tb-card-visual-1:#111e2a;
    --tb-card-visual-2:#201217;

    --tb-secondary:#141b24;
    --tb-accent:#f11725;

    --tb-bg:#f4f6f8;
    --tb-panel:#ffffff;
    --tb-soft:#f1f3f5;
    --tb-soft-green:#f5f6f7;

    --tb-text:#20252b;
    --tb-muted:#69717b;
    --tb-light-text:#9299a1;

    --tb-line:#dfe3e7;
    --tb-line-soft:#eceff2;

    --tb-ok:#50705a;
    --tb-danger:#a33c3c;

    --tb-header-h:72px;
    --tb-content-desktop:calc(100% - 48px);
    --tb-content-max:1480px;
    --tb-editorial-max:1180px;

    --tb-radius:14px;
    --tb-shadow:0 14px 34px rgba(6,15,24,.12);
}


/* ================================================================
   02. RESET / BASE
   ================================================================ */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

html{
    background:#fff;
}

body{
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    background:#fff;
    color:var(--tb-text);
    font-weight:400;
    overflow-x:hidden;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

a{
    color:inherit;
}

.tb-app{
    min-height:100vh;
    background:#fff;
}

#tbApp[style*="display:none"]{
    display:none !important;
}


/* ================================================================
   03. LOADING / ERROR
   ================================================================ */

.tb-loading{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--tb-muted);
    background:#fff;
}

.tb-auth-error{
    width:min(520px,calc(100% - 32px));
    margin:80px auto;
    padding:28px;
    background:#fff;
    border:1px solid var(--tb-line);
    border-radius:var(--tb-radius);
    text-align:center;
}

.tb-auth-error button{
    margin-top:16px;
    border:0;
    border-radius:var(--tb-radius);
    padding:11px 18px;
    background:var(--tb-primary);
    color:#fff;
    font-weight:600;
}


/* ================================================================
   04. AUTH
   ================================================================ */

.tb-auth-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:#f3f6f5;
}

.tb-auth-card{
    width:min(100%,540px);
    overflow:hidden;
    background:#fff;
    border:1px solid var(--tb-line);
    border-radius:10px;
    box-shadow:var(--tb-shadow);
}

.tb-auth-head{
    padding:28px;
    color:#fff;
    background:var(--tb-primary);
}

.tb-auth-brand{
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
}

.tb-auth-title{
    margin-top:10px;
    font-size:27px;
    font-weight:600;
}

.tb-auth-subtitle{
    margin-top:7px;
    font-size:14px;
    line-height:1.55;
    opacity:.88;
}

.tb-auth-body{
    padding:24px;
}

.tb-auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:20px;
}

.tb-auth-tab{
    min-height:42px;
    border:1px solid var(--tb-line);
    background:#fff;
    border-radius:7px;
    color:#555c63;
    font-weight:500;
}

.tb-auth-tab.active{
    color:var(--tb-primary);
    border-color:#b9d5d5;
    background:#eef7f6;
}

.tb-auth-message{
    display:none;
    margin-bottom:14px;
    padding:11px 12px;
    border-radius:7px;
    font-size:12px;
}

.tb-auth-message.ko{
    display:block;
    color:#8a2222;
    background:#fff0f0;
    border:1px solid #efcaca;
}

.tb-auth-form{
    display:none;
}

.tb-auth-form.active{
    display:block;
}

.tb-auth-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.tb-auth-field{
    margin-bottom:12px;
}

.tb-auth-field.full{
    grid-column:1 / -1;
}

.tb-auth-field label{
    display:block;
    margin-bottom:6px;
    color:var(--tb-muted);
    font-size:12px;
    font-weight:600;
}

.tb-auth-field input{
    width:100%;
    min-height:44px;
    border:1px solid #d9d6d1;
    border-radius:7px;
    padding:0 13px;
    outline:none;
    background:#fff;
}

.tb-auth-field input:focus{
    border-color:var(--tb-primary);
}

.tb-auth-submit,
.tb-auth-book{
    width:100%;
    min-height:46px;
    border-radius:7px;
    padding:0 16px;
    font-weight:600;
}

.tb-auth-submit{
    border:0;
    background:var(--tb-primary);
    color:#fff;
}

.tb-auth-book{
    margin-top:18px;
    border:1px solid var(--tb-primary);
    background:#fff;
    color:var(--tb-primary);
}

.tb-auth-submit:disabled{
    opacity:.5;
}


/* ================================================================
   05. HEADER - eTOMKO BOOKING
   ================================================================ */

.tb-header{
    width:100%;
    min-height:var(--tb-header-h);
    position:sticky;
    top:0;
    z-index:1500;
    background:#07111b;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(6,14,22,.14);
}

.tb-header-top{
    width:var(--tb-content-desktop);
    max-width:var(--tb-content-max);
    min-height:var(--tb-header-h);
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:24px;
}

.tb-desktop-brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.tb-desktop-brand-logo{
    width:48px;
    height:48px;
    display:block;
    object-fit:cover;
    object-position:center;
    border-radius:9px;
}

.tb-desktop-brand-name{
    font-size:22px;
    line-height:1;
    font-weight:700;
    letter-spacing:.045em;
}

.tb-desktop-brand-product{
    margin-left:-3px;
    color:#f11c2a;
    font-size:15px;
    line-height:1;
    font-weight:700;
    letter-spacing:.16em;
}

.tb-desktop-brand-mark{
    display:none;
}

.tb-desktop-nav-links{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.tb-desktop-nav-link{
    min-height:40px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#d8dde2;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
}

.tb-desktop-nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.tb-header-actions,
.tb-welcome{
    display:none;
}

/* ================================================================
   06. ACCOUNT MENU
   ================================================================ */

.tb-account-menu{
    position:relative;
    flex:0 0 auto;
}

.tb-account-summary{
    list-style:none;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border-radius:7px;
    color:#e2e6ea;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    user-select:none;
}

.tb-account-summary::-webkit-details-marker{
    display:none;
}

.tb-account-summary:hover,
.tb-account-menu[open] .tb-account-summary{
    background:rgba(255,255,255,.08);
}

.tb-account-avatar{
    display:none;
}

.tb-account-chevron{
    font-size:11px;
    transition:transform .18s ease;
}

.tb-account-menu[open] .tb-account-chevron{
    transform:rotate(180deg);
}

.tb-account-dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 7px);
    width:220px;
    padding:7px;
    background:#fff;
    border:1px solid var(--tb-line);
    border-radius:8px;
    box-shadow:var(--tb-shadow);
    z-index:2500;
}

.tb-account-item{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:7px;
    border:0;
    background:#fff;
    border-radius:6px;
    padding:8px 10px;
    color:#40464e;
    text-align:left;
    font-size:14px;
}

.tb-account-item:hover{
    background:#f2f0ed;
}

.tb-account-item.logout{
    color:var(--tb-danger);
    border-top:1px solid var(--tb-line-soft);
    margin-top:4px;
}

.tb-account-item-icon{
    width:26px;
    min-width:26px;
    text-align:center;
    font-size:17px;
}


/* ================================================================
   07. MOBILE MENU BUTTON
   ================================================================ */

.tb-menu-btn{
    display:none;
    width:46px;
    height:46px;
    border:0;
    background:transparent;
    color:#30353a;
    font-size:27px;
    line-height:1;
}


/* ================================================================
   08. MAIN / PAGE
   ================================================================ */

.tb-main{
    width:100%;
    margin:0;
    padding:0;
}

.tb-desktop-shell{
    width:100%;
}

.tb-desktop-main{
    min-width:0;
}

.tb-page{
    display:none;
}

.tb-page.active{
    display:block;
}

.tb-title{
    margin:0 0 24px;
    color:#202429;
    font-size:27px;
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.02em;
    text-align:left;
}


/* ================================================================
   09. HOME HERO - LIGHT BRAND PANEL
   ================================================================ */

.tb-portal-hero{
    display:none;
}

.tb-home-route .tb-portal-hero{
    display:block;
    width:100%;
    max-width:none;
    min-height:310px;
    margin:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:none;
}

.tb-portal-hero-inner{
    width:100%;
    min-height:310px;
    display:grid;
    grid-template-columns:minmax(0,55%) minmax(0,45%);
    align-items:stretch;
}

.tb-portal-hero-copy{
    min-width:0;
    padding:46px 5vw 46px max(48px,10vw);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    background:linear-gradient(125deg,#ffffff 0%,#f6f8fa 100%);
}

.tb-portal-hero-kicker{
    color:#303844;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.tb-portal-hero-title{
    margin-top:8px;
    color:#07111b;
    font-size:42px;
    line-height:1.02;
    font-weight:750;
    letter-spacing:.035em;
}

.tb-portal-hero-title::after{
    content:"BOOKING";
    display:block;
    margin-top:5px;
    color:var(--tb-primary);
    font-size:.46em;
    line-height:1;
    letter-spacing:.22em;
}

.tb-portal-hero-subtitle{
    max-width:560px;
    margin-top:19px;
    color:#56606b;
    font-size:16px;
    line-height:1.55;
}

.tb-portal-hero-actions{
    margin-top:24px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.tb-portal-action{
    min-width:142px;
    min-height:43px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--tb-primary);
    border-radius:9px;
    background:var(--tb-primary);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:650;
    white-space:nowrap;
}

.tb-portal-action.secondary{
    background:#fff;
    color:#26303a;
    border-color:#d7dce1;
}

.tb-portal-action:hover{
    transform:translateY(-1px);
}

.tb-portal-hero-media{
    min-width:0;
    min-height:310px;
    overflow:hidden;
    background:#07111b;
}

.tb-portal-hero-image,
.tb-portal-hero-brand-panel{
    width:100%;
    height:100%;
    min-height:310px;
    display:block;
}

.tb-portal-hero-image{
    object-fit:cover;
}

.tb-portal-hero-brand-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 78%,rgba(227,6,19,.24),transparent 30%),
        linear-gradient(135deg,#07111b,#0e1a26);
}

.tb-portal-hero-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.2;
    background-image:
        linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
        linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08));
    background-size:42px 72px;
}

.tb-portal-hero-brand-image{
    position:relative;
    z-index:1;
    width:min(92%,520px);
    max-height:190px;
    object-fit:contain;
}

/* ================================================================
   10. HOME MAIN WIDTH
   ================================================================ */

.tb-home-route .tb-desktop-grid{
    width:var(--tb-content-desktop);
    max-width:var(--tb-content-max);
    margin:0 auto;
    padding:22px 0 48px;
}

.tb-home-route .tb-desktop-main{
    width:100%;
}

.tb-home-route .tb-page[data-page="home"]{
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:20;
}

.tb-home-route .tb-page[data-page="home"] > .tb-title{
    display:none;
}

.tb-home-route .tb-grid{
    display:block;
}

/* ================================================================
   11. HOME FEATURE CARDS - IMAGE ASSET GRID
   ================================================================ */

.tb-etomko-feature-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.tb-etomko-feature{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:#07111b;
    color:#fff;
    box-shadow:0 14px 30px rgba(4,12,20,.16);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.tb-etomko-visual{
    width:100%;
    aspect-ratio:1.58 / 1;
    min-height:0;
    overflow:hidden;
    background:#07111b;
}

.tb-etomko-visual img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .24s ease;
}

.tb-etomko-content{
    min-height:76px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:linear-gradient(90deg,#07111b 0%,#0d1823 65%,#1b1117 100%);
    border-top:1px solid rgba(255,255,255,.08);
}

.tb-etomko-content-copy{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:10px;
}

.tb-etomko-label{
    color:#aeb7c0;
    font-size:12px;
    line-height:1.3;
    font-weight:500;
}

.tb-etomko-count{
    color:#fff;
    font-size:22px;
    line-height:1;
    font-weight:700;
}

.tb-etomko-more{
    flex:0 0 auto;
    color:#fff;
    font-size:13px;
    line-height:1.3;
    font-weight:600;
    white-space:nowrap;
}

.tb-etomko-more b{
    margin-left:5px;
    color:var(--tb-primary);
    font-size:18px;
    font-weight:400;
}

.tb-etomko-feature:hover{
    transform:translateY(-3px);
    border-color:rgba(227,6,19,.45);
    box-shadow:0 18px 38px rgba(4,12,20,.22);
}

.tb-etomko-feature:hover .tb-etomko-visual img{
    transform:scale(1.015);
}

/* ================================================================
   12. HOME SERVICE STRIP
   ================================================================ */

.tb-desktop-service-strip{
    display:none;
}

.tb-home-route .tb-desktop-service-strip{
    width:min(var(--tb-editorial-max),calc(100% - 48px));
    margin:58px auto 0;
    padding:36px 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:34px;
    border-top:1px solid var(--tb-line);
    border-bottom:1px solid var(--tb-line);
}

.tb-service-item{
    min-width:0;
}

.tb-service-icon{
    display:none;
}

.tb-service-title{
    margin-bottom:9px;
    color:#202429;
    font-size:16px;
    line-height:1.25;
    font-weight:600;
}

.tb-service-text{
    color:#656c74;
    font-size:14px;
    line-height:1.55;
}


/* ================================================================
   13. HEALTH PROMO
   ================================================================ */

.tb-health-promo{
    display:none;
}

.tb-home-route .tb-health-promo{
    width:min(var(--tb-editorial-max),calc(100% - 48px));
    margin:52px auto 50px;
    padding:46px 50px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:52px;
    align-items:center;
    background:var(--tb-soft-green);
    border-radius:10px;
}

.tb-health-kicker{
    color:var(--tb-primary);
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.tb-health-title{
    margin:9px 0 0;
    color:#20252a;
    font-size:32px;
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.02em;
}

.tb-health-text{
    max-width:610px;
    margin:16px 0 0;
    color:#555d65;
    font-size:16px;
    line-height:1.65;
}

.tb-health-list{
    margin:22px 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.tb-health-list li{
    position:relative;
    padding-left:24px;
    color:#394047;
    font-size:14px;
    line-height:1.5;
}

.tb-health-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.48em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--tb-primary);
}

.tb-health-cta{
    display:inline-flex;
    min-height:42px;
    margin-top:28px;
    padding:0 18px;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:var(--tb-primary);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.tb-health-promo-media{
    min-width:0;
}

.tb-health-image,
.tb-health-placeholder{
    width:100%;
    min-height:300px;
    display:block;
    object-fit:cover;
    border-radius:8px;
}

.tb-health-placeholder{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#d7e7e7,#eef6f5);
}

.tb-health-placeholder-shape{
    position:absolute;
    width:260px;
    height:260px;
    right:-40px;
    bottom:-70px;
    border-radius:50%;
    background:rgba(23,111,115,.11);
}

.tb-health-placeholder-copy{
    position:absolute;
    left:28px;
    bottom:28px;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.tb-health-placeholder-copy span{
    color:#2c3238;
    font-size:20px;
    font-weight:600;
}

.tb-health-placeholder-copy small{
    color:#737a82;
    font-size:13px;
}


/* ================================================================
   14. HOME INFO / MAP
   ================================================================ */

.tb-desktop-side{
    display:none;
}

.tb-home-route .tb-desktop-side{
    width:min(var(--tb-editorial-max),calc(100% - 48px));
    margin:0 auto;
    padding:0 0 52px;
    display:grid;
    grid-template-columns:1fr 1fr 1.25fr;
    column-gap:44px;
    row-gap:30px;
    align-items:start;
}

.tb-portal-note{
    display:none;
}

.tb-info-panel{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}

.tb-info-panel-title{
    margin-bottom:15px;
    color:#22262b;
    font-size:19px;
    font-weight:600;
}

.tb-home-info-studio{
    grid-column:1;
    grid-row:1 / span 2;
}

.tb-home-regole{
    grid-column:2;
    grid-row:1;
}

.tb-home-info-utili{
    grid-column:2;
    grid-row:2;
    padding-top:24px;
    border-top:1px solid var(--tb-line);
}

.tb-home-mappa{
    grid-column:3;
    grid-row:1 / span 2;
}

.tb-info-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:9px 0;
}

.tb-info-icon{
    display:none;
}

.tb-info-text{
    min-width:0;
    flex:1;
}

.tb-info-label{
    color:#858a90;
    font-size:12px;
}

.tb-info-value{
    margin-top:3px;
    color:#34393f;
    font-size:14px;
    font-weight:500;
    overflow-wrap:anywhere;
}

.tb-info-value a{
    color:var(--tb-primary);
}

.tb-rule-list{
    margin:0;
    padding-left:18px;
    color:#4c5259;
    font-size:14px;
    line-height:1.65;
}

.tb-rule-list li{
    margin-bottom:7px;
}

.tb-map-box{
    overflow:hidden;
    border:1px solid var(--tb-line);
    border-radius:8px;
    background:#f6f7f7;
}

.tb-map-frame{
    width:100%;
    height:300px;
    display:block;
    border:0;
}

.tb-map-caption{
    padding:12px 14px;
    color:var(--tb-muted);
    font-size:13px;
}


/* ================================================================
   15. SECTION ROUTES - DESKTOP
   ================================================================ */

.tb-section-route{
    background:var(--tb-bg);
}

.tb-section-route .tb-portal-hero,
.tb-section-route .tb-desktop-service-strip,
.tb-section-route .tb-health-promo,
.tb-section-route .tb-desktop-side{
    display:none;
}

.tb-section-route .tb-desktop-nav-links{
    display:none;
}

.tb-section-route .tb-desktop-grid{
    width:min(1180px,calc(100% - 64px));
    margin:0 auto;
    padding:34px 0 64px;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:34px;
    align-items:start;
}

.tb-section-sidebar{
    display:block;
    min-height:520px;
    padding-right:18px;
    border-right:1px solid #d9d5cf;
}

.tb-section-sidebar-head{
    padding:0 8px 18px;
}

.tb-section-sidebar-kicker{
    color:#8b8d91;
    font-size:11px;
    font-weight:500;
}

.tb-section-sidebar-title{
    margin-top:4px;
    color:#23262a;
    font-size:18px;
    font-weight:600;
}

.tb-section-sidebar-group{
    padding:14px 0;
    border-top:1px solid #ddd9d3;
}

.tb-section-sidebar-label{
    padding:0 8px 7px;
    color:#8c8f94;
    font-size:11px;
    font-weight:500;
}

.tb-section-link{
    width:100%;
    min-height:38px;
    padding:7px 9px;
    display:flex;
    align-items:center;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#55595f;
    text-decoration:none;
    text-align:left;
    font-size:14px;
    line-height:1.3;
}

.tb-section-link-icon{
    display:none;
}

.tb-section-link:hover{
    background:#ece9e4;
    color:#22262a;
}

.tb-section-link.active{
    background:#e3efee;
    color:var(--tb-primary-dark);
    font-weight:600;
}

.tb-section-link.danger{
    color:#8f4a4a;
}

.tb-section-back-home{
    display:inline-flex;
    margin:18px 8px 0;
    color:#656a70;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
}

.tb-section-back-home:hover{
    color:var(--tb-primary);
}

.tb-section-route .tb-desktop-main{
    min-width:0;
}

.tb-section-route .tb-title{
    font-size:28px;
    margin-bottom:24px;
}


/* ================================================================
   16. COMMON PANELS / PROFILE
   ================================================================ */

.tb-panel{
    background:#fff;
    border:1px solid var(--tb-line);
    border-radius:8px;
    padding:22px;
}

.tb-profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.tb-field.full{
    grid-column:1 / -1;
}

.tb-field label{
    display:block;
    margin-bottom:6px;
    color:var(--tb-muted);
    font-size:12px;
    font-weight:600;
}

.tb-field input{
    width:100%;
    min-height:44px;
    padding:0 13px;
    border:1px solid #d9d6d1;
    border-radius:7px;
    outline:none;
}

.tb-field input:focus{
    border-color:var(--tb-primary);
}

.tb-help{
    margin-top:5px;
    color:var(--tb-muted);
    font-size:12px;
}

.tb-form-message{
    display:none;
    margin-bottom:15px;
    padding:11px 13px;
    border-radius:7px;
    font-size:13px;
}

.tb-form-message.ok{
    display:block;
    color:#176b38;
    background:#eef9f2;
    border:1px solid #cde8d6;
}

.tb-form-message.ko{
    display:block;
    color:#8a2222;
    background:#fff0f0;
    border:1px solid #efcaca;
}

.tb-save{
    min-height:44px;
    margin-top:18px;
    padding:0 18px;
    border:0;
    border-radius:7px;
    background:var(--tb-primary);
    color:#fff;
    font-weight:600;
}

.tb-save:disabled{
    opacity:.55;
}


/* ================================================================
   17. SEARCH / FILTERS
   ================================================================ */

.tb-appointments-tools,
.tb-documents-tools,
.tb-accounting-tools,
.tb-clinic-tools{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:14px;
}

.tb-search-wrap{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    background:#fff;
    border:1px solid #d7d3cd;
    border-radius:7px;
}

.tb-search-wrap span{
    font-size:16px;
    opacity:.55;
}

.tb-search-wrap input{
    width:100%;
    border:0;
    outline:none;
    background:transparent;
    color:#30343a;
    font-size:14px;
}

.tb-filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.tb-filter-btn{
    min-height:36px;
    padding:0 13px;
    border:1px solid #d8d4ce;
    border-radius:7px;
    background:#fff;
    color:#555a60;
    font-size:13px;
    font-weight:500;
}

.tb-filter-btn.active{
    background:#e3efee;
    border-color:#c2d9d8;
    color:var(--tb-primary-dark);
}


/* ================================================================
   18. SUMMARY
   ================================================================ */

.tb-appointments-summary,
.tb-documents-summary,
.tb-clinic-summary{
    margin-bottom:14px;
    padding:11px 13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border:0;
    border-radius:7px;
    background:#e8efed;
    color:#34383d;
    font-size:13px;
}

.tb-appointments-summary strong,
.tb-documents-summary strong,
.tb-clinic-summary strong{
    font-size:15px;
    font-weight:600;
}

.tb-accounting-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.tb-accounting-stat{
    padding:12px 14px;
    background:#e8efed;
    border-radius:7px;
    color:#33373c;
}

.tb-accounting-stat-label{
    color:#6a6f75;
    font-size:12px;
}

.tb-accounting-stat-value{
    margin-top:4px;
    font-size:18px;
    font-weight:600;
}


/* ================================================================
   19. APPOINTMENT / DOCUMENT / INVOICE / CLINIC CARDS
   ================================================================ */

.tb-next-appointment{
    display:none;
    margin-bottom:14px;
    padding:16px 18px;
    background:#f0f5f0;
    border:1px solid #d8e2d8;
    border-radius:8px;
}

.tb-next-appointment.visible{
    display:block;
}

.tb-next-appointment-title{
    margin-bottom:8px;
    color:#50705a;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
}

.tb-next-appointment-date{
    color:#262a2f;
    font-size:17px;
    font-weight:600;
}

.tb-next-appointment-meta{
    margin-top:7px;
    color:var(--tb-muted);
    font-size:13px;
    line-height:1.5;
}

.tb-appointments-list,
.tb-documents-list,
.tb-accounting-list,
.tb-clinic-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.tb-appointment-card,
.tb-document-card,
.tb-invoice-card,
.tb-clinic-card{
    padding:16px 18px;
    background:#fff;
    border:1px solid #ddd9d3;
    border-radius:8px;
}

.tb-document-card,
.tb-invoice-card{
    display:flex;
    align-items:flex-start;
    gap:13px;
    cursor:pointer;
}

.tb-clinic-card{
    display:flex;
    align-items:flex-start;
    gap:13px;
}

.tb-appointment-main{
    display:flex;
    justify-content:space-between;
    gap:14px;
}

.tb-appointment-date,
.tb-document-title,
.tb-invoice-code,
.tb-clinic-title{
    color:#262a2f;
    font-size:15px;
    font-weight:600;
}

.tb-appointment-studio,
.tb-document-studio,
.tb-invoice-studio,
.tb-clinic-studio{
    margin-top:5px;
    color:#656b72;
    font-size:12px;
    font-weight:400;
}

.tb-appointment-meta,
.tb-document-date,
.tb-invoice-date,
.tb-clinic-date,
.tb-document-id,
.tb-invoice-bottom,
.tb-clinic-id{
    color:#7c8187;
    font-size:12px;
}

.tb-appointment-meta{
    margin-top:7px;
    line-height:1.45;
}

.tb-appointment-id{
    color:#7c8187;
    font-size:11px;
    white-space:nowrap;
}

.tb-document-icon,
.tb-invoice-icon,
.tb-clinic-icon{
    display:none;
}

.tb-document-body,
.tb-invoice-body,
.tb-clinic-body{
    min-width:0;
    flex:1;
}

.tb-document-title,
.tb-invoice-code,
.tb-clinic-title{
    margin-top:3px;
    overflow-wrap:anywhere;
}

.tb-document-studio,
.tb-invoice-studio,
.tb-clinic-studio{
    margin-top:6px;
}

.tb-document-id{
    margin-top:5px;
}

.tb-invoice-bottom{
    margin-top:7px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.tb-invoice-total{
    color:#24282d;
    font-size:14px;
    font-weight:600;
}

.tb-clinic-bottom{
    margin-top:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.tb-clinic-status{
    display:inline-flex;
    align-items:center;
    padding:4px 7px;
    border-radius:5px;
    font-size:11px;
    font-weight:500;
}

.tb-clinic-status.e{
    background:#e9f1e9;
    color:#4e6c54;
}

.tb-clinic-status.s{
    background:#f4efe4;
    color:#776443;
}

.tb-clinic-status.ne{
    background:#e5efee;
    color:var(--tb-primary-dark);
}

.tb-empty,
.tb-coming{
    padding:25px 18px;
    background:#fff;
    border:1px solid var(--tb-line);
    border-radius:8px;
    color:var(--tb-muted);
    text-align:center;
}

.tb-new-booking{
    width:100%;
    min-height:44px;
    margin-top:14px;
    border:0;
    border-radius:7px;
    background:var(--tb-primary);
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.tb-new-booking:hover{
    background:var(--tb-primary-dark);
}


/* ================================================================
   20. PDF VIEWER
   ================================================================ */

.tb-pdf-viewer{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    flex-direction:column;
    background:rgba(10,12,18,.92);
    backdrop-filter:blur(8px);
}

.tb-pdf-viewer.open{
    display:flex;
}

.tb-pdf-bar{
    min-height:56px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#fff;
    background:rgba(0,0,0,.28);
}

.tb-pdf-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
}

.tb-pdf-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.tb-pdf-btn{
    padding:9px 12px;
    border:0;
    border-radius:7px;
    background:rgba(255,255,255,.16);
    color:#fff;
    text-decoration:none;
    font-size:13px;
}

.tb-pdf-frame-wrap{
    flex:1;
    min-height:0;
    padding:10px;
}

.tb-pdf-frame{
    width:100%;
    height:100%;
    border:0;
    background:#fff;
    border-radius:8px;
}


/* ================================================================
   21. DRAWER
   ================================================================ */

.tb-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:3000;
    background:rgba(0,0,0,.45);
}

.tb-overlay.visible{
    display:block;
}

.tb-drawer{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:min(340px,90vw);
    overflow:auto;
    background:#fff;
    box-shadow:8px 0 30px rgba(0,0,0,.16);
}

.tb-drawer-head{
    padding:24px 20px;
    background:var(--tb-primary);
    color:#fff;
}

.tb-avatar{
    width:52px;
    height:52px;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:12px;
    font-weight:600;
}

.tb-drawer-small{
    font-size:11px;
    opacity:.78;
}

.tb-drawer-name{
    margin-top:3px;
    font-size:17px;
    font-weight:600;
}

.tb-menu-section{
    padding:18px 18px 8px;
    color:#777d83;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
}

.tb-menu-item{
    width:calc(100% - 20px);
    min-height:52px;
    margin:2px 10px;
    padding:10px 13px;
    display:flex;
    align-items:center;
    gap:12px;
    border:0;
    border-radius:7px;
    background:#fff;
    color:#31363b;
    text-align:left;
    font-size:15px;
}

.tb-menu-item:hover{
    background:#eef5f4;
}

.tb-menu-icon{
    width:30px;
    min-width:30px;
    color:var(--tb-primary);
    text-align:center;
    font-size:20px;
}

.tb-menu-item.logout{
    color:var(--tb-danger);
}

.tb-menu-footer{
    margin:20px 14px 0;
    padding:16px 6px;
    border-top:1px solid var(--tb-line);
    color:var(--tb-muted);
    font-size:11px;
}

.tb-drawer .tb-menu-item[data-nav="home"],
.tb-drawer #btnBookMenu{
    display:none;
}


/* ================================================================
   22. BOTTOM NAV
   Non usata nel nuovo portale.
   ================================================================ */

.tb-bottom{
    display:none;
}


/* ================================================================
   23. TABLET
   ================================================================ */

@media(max-width:1023px){

    :root{ --tb-header-h:64px; }

    body{ background:#fff; }

    .tb-header{ min-height:var(--tb-header-h); }

    .tb-header-top{
        width:calc(100% - 28px);
        min-height:var(--tb-header-h);
        justify-content:space-between;
    }

    .tb-desktop-brand-logo{ width:42px; height:42px; }
    .tb-desktop-brand-name{ font-size:19px; }
    .tb-desktop-brand-product{ font-size:12px; }

    .tb-desktop-nav-links,
    .tb-account-menu,
    .tb-header-actions{ display:none; }

    .tb-menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
    }

    .tb-home-route .tb-portal-hero{
        width:100%;
        margin-top:0;
        min-height:auto;
        border-radius:0;
    }

    .tb-portal-hero-inner{
        min-height:auto;
        grid-template-columns:1fr;
    }

    .tb-portal-hero-copy{ padding:34px 6vw; }
    .tb-portal-hero-title{ font-size:36px; }
    .tb-portal-hero-subtitle{ font-size:15px; }
    .tb-portal-hero-media{ display:none; }

    .tb-home-route .tb-desktop-grid{
        width:calc(100% - 28px);
        max-width:none;
        padding-top:16px;
    }

    .tb-etomko-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .tb-etomko-visual{
        aspect-ratio:1.58 / 1;
        min-height:0;
    }

    .tb-etomko-content{
        min-height:68px;
        padding:12px 14px;
    }

    .tb-etomko-label{ font-size:11px; }
    .tb-etomko-count{ font-size:21px; }
    .tb-etomko-more{ font-size:12px; }

    .tb-home-route .tb-desktop-service-strip{
        width:calc(100% - 40px);
        grid-template-columns:repeat(2,1fr);
        gap:28px 32px;
    }

    .tb-home-route .tb-health-promo{
        width:calc(100% - 40px);
        grid-template-columns:1fr;
        padding:36px;
    }

    .tb-health-promo-media{ display:none; }

    .tb-home-route .tb-desktop-side{
        width:calc(100% - 40px);
        grid-template-columns:1fr 1fr;
        gap:30px;
    }

    .tb-home-info-studio,
    .tb-home-regole,
    .tb-home-info-utili,
    .tb-home-mappa{
        grid-column:auto;
        grid-row:auto;
    }

    .tb-map-frame{ height:230px; }

    .tb-section-route{ background:#f7f7f5; }

    .tb-section-route .tb-desktop-grid{
        width:calc(100% - 40px);
        margin:0 auto;
        padding:30px 0 48px;
        display:block;
    }

    .tb-section-sidebar{ display:none; }
    .tb-section-route .tb-desktop-main{ width:100%; }
    .tb-section-route .tb-title{ font-size:25px; }
}

/* ================================================================
   24. PHONE
   ================================================================ */

@media(max-width:639px){

    .tb-header-top{ width:calc(100% - 20px); }
    .tb-desktop-brand{ gap:7px; }
    .tb-desktop-brand-logo{ width:38px; height:38px; border-radius:7px; }
    .tb-desktop-brand-name{ font-size:17px; }
    .tb-desktop-brand-product{ font-size:10px; letter-spacing:.12em; }
    .tb-menu-btn{ width:42px; height:42px; font-size:24px; }

    .tb-home-route .tb-portal-hero{
        width:100%;
        margin-top:0;
        border-radius:0;
    }

    .tb-portal-hero-copy{ padding:28px 22px; }
    .tb-portal-hero-kicker{ font-size:10px; }
    .tb-portal-hero-title{ font-size:31px; }
    .tb-portal-hero-subtitle{ margin-top:15px; font-size:14px; }

    .tb-portal-hero-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .tb-portal-action{ width:100%; min-width:0; }

    .tb-home-route .tb-desktop-grid{
        width:calc(100% - 20px);
        padding-top:12px;
    }

    .tb-etomko-feature-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .tb-etomko-feature{ border-radius:13px; }

    .tb-etomko-visual{
        aspect-ratio:1.58 / 1;
        min-height:0;
    }

    .tb-etomko-content{
        min-height:64px;
        padding:11px 13px;
        gap:10px;
    }

    .tb-etomko-content-copy{
        gap:8px;
        flex-wrap:wrap;
    }

    .tb-etomko-label{ font-size:10.5px; }
    .tb-etomko-count{ font-size:20px; }
    .tb-etomko-more{ font-size:11.5px; }

    .tb-home-route .tb-desktop-service-strip{
        width:calc(100% - 32px);
        margin-top:40px;
        padding:28px 0;
        grid-template-columns:1fr;
        gap:24px;
    }

    .tb-home-route .tb-health-promo{
        width:calc(100% - 32px);
        margin:36px auto;
        padding:28px 22px;
        display:block;
    }

    .tb-health-title{ font-size:26px; }
    .tb-health-text{ font-size:14px; }
    .tb-health-promo-media{ display:none; }

    .tb-home-route .tb-desktop-side{
        width:calc(100% - 32px);
        display:block;
        padding-bottom:38px;
    }

    .tb-info-panel{ margin-bottom:28px; }
    .tb-home-info-utili{ padding-top:24px; }
    .tb-map-frame{ height:220px; }

    .tb-section-route .tb-desktop-grid{
        width:calc(100% - 24px);
        padding:24px 0 40px;
    }

    .tb-section-route .tb-title{ margin-bottom:18px; font-size:23px; }
    .tb-profile-grid{ grid-template-columns:1fr; }
    .tb-field.full{ grid-column:auto; }
    .tb-accounting-summary{ grid-template-columns:1fr; }
    .tb-appointment-main{ flex-direction:column; gap:7px; }
    .tb-appointment-id{ white-space:normal; }
    .tb-pdf-frame-wrap{ padding:0; }
    .tb-pdf-frame{ border-radius:0; }
    .tb-auth-grid{ grid-template-columns:1fr; }
    .tb-auth-field.full{ grid-column:auto; }
}

/* ================================================================
   25. VERY SMALL PHONE
   ================================================================ */

@media(max-width:390px){
    .tb-desktop-brand-name{ font-size:15px; }
    .tb-desktop-brand-product{ display:none; }
    .tb-portal-hero-title{ font-size:28px; }
    .tb-etomko-more{ white-space:normal; text-align:right; }
}

/* ================================================================
   26. FOOTER
   ================================================================ */

.tb-desktop-footer{
    width:100%;
    margin-top:0;
    padding:42px 0 24px;
    background:#f7f5f2;
    border-top:1px solid var(--tb-line);
}

.tb-footer-grid{
    width:var(--tb-content-desktop);
    max-width:var(--tb-content-max);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.45fr 1fr 1fr 1fr;
    gap:46px;
    align-items:start;
}

.tb-footer-brand{
    margin-bottom:10px;
    color:var(--tb-primary-dark);
    font-size:18px;
    line-height:1.2;
    font-weight:600;
}

.tb-footer-copy{
    max-width:360px;
    color:var(--tb-muted);
    font-size:13px;
    line-height:1.6;
}

.tb-footer-title{
    margin-bottom:12px;
    color:#262b30;
    font-size:13px;
    font-weight:600;
}

.tb-footer-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#656c73;
    font-size:13px;
    line-height:1.45;
}

.tb-footer-list a{
    color:#656c73;
    text-decoration:none;
}

.tb-footer-list a:hover{
    color:var(--tb-primary);
}

.tb-footer-bottom{
    width:var(--tb-content-desktop);
    max-width:var(--tb-content-max);
    margin:34px auto 0;
    padding-top:18px;
    border-top:1px solid #ddd9d3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    color:#858b91;
    font-size:12px;
    line-height:1.4;
}


/* TABLET FOOTER -------------------------------------------------- */

@media(max-width:1023px){

    .tb-desktop-footer{
        padding:36px 0 22px;
    }

    .tb-footer-grid{
        width:calc(100% - 40px);
        max-width:none;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:32px 36px;
    }

    .tb-footer-copy{
        max-width:none;
    }

    .tb-footer-bottom{
        width:calc(100% - 40px);
        max-width:none;
        margin-top:30px;
    }
}


/* PHONE FOOTER --------------------------------------------------- */

@media(max-width:639px){

    .tb-desktop-footer{
        padding:30px 0 20px;
    }

    .tb-footer-grid{
        width:calc(100% - 32px);
        grid-template-columns:1fr;
        gap:26px;
    }

    .tb-footer-brand{
        font-size:17px;
    }

    .tb-footer-title{
        margin-bottom:9px;
    }

    .tb-footer-list{
        gap:6px;
    }

    .tb-footer-bottom{
        width:calc(100% - 32px);
        margin-top:28px;
        padding-top:16px;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        font-size:11px;
    }
}

/* ================================================================
   27. HERO HOME DEFINITIVA
   - banner full width
   - testo a sinistra
   - immagine a destra
   - diagonale sul BLOCCO media, non sul file immagine
   - media sovrapposto al banner: nessun triangolo/vuoto bianco
   - card sovrapposte
   ================================================================ */

/*
 * Il fondo appartiene all'intera hero.
 * La parte testuale e la zona lasciata libera dal taglio diagonale
 * mostrano quindi lo STESSO identico sfondo.
 */
.tb-home-route .tb-portal-hero{
    display:block;
    position:relative;
    z-index:1;

    width:100vw;
    max-width:100vw;
    min-height:500px;

    margin:0 0 0 calc(50% - 50vw);
    padding:0;

    overflow:hidden;
    border:0;
    border-radius:0;
    box-shadow:none;

    background:linear-gradient(
        135deg,
        #778899 0%,
        #aebdc8 34%,
        #dae5e6 58%,
        #dae5e6 100%
    );
}


/* Struttura desktop: due colonne logiche. */
.tb-home-route .tb-portal-hero-inner{
    width:100%;
    min-height:500px;

    display:grid;
    grid-template-columns:56% 44%;
    align-items:stretch;

    position:relative;
}


/* Testo: trasparente, usa il fondo unico della hero. */
.tb-home-route .tb-portal-hero-copy{
    min-width:0;
    min-height:500px;

    padding:58px 42px 120px max(48px,7vw);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    position:relative;
    z-index:3;

    background:transparent;
}


/* Testi hero ---------------------------------------------------- */

.tb-home-route .tb-portal-hero-kicker{
    color:#25394c;
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.tb-home-route .tb-portal-hero-title{
    margin-top:8px;
    color:#081521;
    font-size:54px;
    line-height:.95;
    font-weight:800;
    letter-spacing:.01em;
}

.tb-home-route .tb-portal-hero-title::after{
    content:"BOOKING";
    display:block;
    margin-top:8px;

    color:#e30613;
    font-size:.38em;
    line-height:1;
    letter-spacing:.26em;
    font-weight:700;
}

.tb-home-route .tb-portal-hero-subtitle{
    max-width:620px;
    margin-top:20px;

    color:#354b5e;
    font-size:17px;
    line-height:1.55;
}


/* CTA ----------------------------------------------------------- */

.tb-home-route .tb-portal-hero-actions{
    margin-top:28px;

    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;

    position:relative;
    z-index:4;
}

.tb-home-route .tb-portal-action{
    min-width:150px;
    min-height:46px;
    padding:0 22px;

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

    border:1px solid #e30613;
    border-radius:9px;

    background:#e30613;
    color:#fff;

    text-decoration:none;
    font-size:13px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;

    transition:all .18s ease;
}

.tb-home-route .tb-portal-action:hover{
    transform:translateY(-1px);
    background:#c9000b;
    border-color:#c9000b;
}

.tb-home-route .tb-portal-action.secondary{
    background:#fff;
    color:#1f2a35;
    border-color:#d5dbe1;
}

.tb-home-route .tb-portal-action.secondary:hover{
    background:#f8fafc;
    border-color:#bcc5ce;
}


/* Immagine ------------------------------------------------------
 *
 * Punto chiave:
 * il blocco media entra 120px nella zona sinistra.
 * Il clip-path taglia SOLO il blocco HTML media.
 * Sotto non c'e' bianco: c'e' il fondo continuo della hero.
 *
 * top-left  = 120px -> parte alta della diagonale
 * bottom-left = 0px  -> parte bassa piu' a sinistra
 * --------------------------------------------------------------- */

.tb-home-route .tb-portal-hero-media{
    min-width:0;
    min-height:500px;

    position:relative;
    z-index:2;

    margin-left:-120px;
    width:calc(100% + 120px);

    overflow:hidden;
    background:transparent;

    clip-path:polygon(
        120px 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

.tb-home-route .tb-portal-hero-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    border:0;
    border-radius:0;
    box-shadow:none;

    transform:none;
}


/* Card sovrapposte ---------------------------------------------- */

.tb-home-route .tb-desktop-grid{
    position:relative;
    z-index:20;
}

.tb-home-route .tb-page[data-page="home"]{
    width:100%;
    margin:-92px auto 0;

    position:relative;
    z-index:25;
}

.tb-home-route .tb-etomko-feature-grid{
    position:relative;
    z-index:26;
}


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

@media(max-width:1180px){

    .tb-home-route .tb-portal-hero,
    .tb-home-route .tb-portal-hero-inner,
    .tb-home-route .tb-portal-hero-copy{
        min-height:390px;
    }

    .tb-home-route .tb-portal-hero-inner{
        grid-template-columns:54% 46%;
    }

    .tb-home-route .tb-portal-hero-copy{
        padding:46px 30px 108px 34px;
    }

    .tb-home-route .tb-portal-hero-title{
        font-size:50px;
    }

    .tb-home-route .tb-portal-hero-subtitle{
        font-size:15px;
    }

    .tb-home-route .tb-portal-hero-media{
        min-height:390px;
        margin-left:-82px;
        width:calc(100% + 82px);

        clip-path:polygon(
            82px 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .tb-home-route .tb-page[data-page="home"]{
        margin-top:-78px;
    }
}


/* ================================================================
   MOBILE
   Su mobile niente diagonale: testo e immagine diventano due blocchi
   verticali puliti e leggibili.
   ================================================================ */

@media(max-width:820px){

    .tb-home-route .tb-portal-hero{
        min-height:auto;
        background:linear-gradient(
            135deg,
            #778899 0%,
            #b6c5cf 55%,
            #dae5e6 100%
        );
    }

    .tb-home-route .tb-portal-hero-inner{
        min-height:auto;
        grid-template-columns:1fr;
    }

    .tb-home-route .tb-portal-hero-copy{
        min-height:auto;
        padding:34px 22px 28px;
        order:1;
    }

    .tb-home-route .tb-portal-hero-title{
        font-size:38px;
        line-height:1;
    }

    .tb-home-route .tb-portal-hero-title::after{
        margin-top:6px;
        font-size:.42em;
    }

    .tb-home-route .tb-portal-hero-subtitle{
        margin-top:16px;
        font-size:15px;
    }

    .tb-home-route .tb-portal-hero-actions{
        margin-top:20px;
        gap:10px;
    }

    .tb-home-route .tb-portal-action{
        min-width:140px;
        min-height:44px;
        font-size:12px;
    }

    .tb-home-route .tb-portal-hero-media{
        order:2;

        width:100%;
        min-height:260px;

        margin-left:0;

        clip-path:none;
    }

    .tb-home-route .tb-portal-hero-image{
        object-position:center center;
    }

    .tb-home-route .tb-page[data-page="home"]{
        margin-top:-34px;
    }
}


/* ================================================================
   SMALL PHONE
   ================================================================ */

@media(max-width:520px){

    .tb-home-route .tb-portal-hero-copy{
        padding:28px 18px 24px;
    }

    .tb-home-route .tb-portal-hero-title{
        font-size:32px;
    }

    .tb-home-route .tb-portal-hero-subtitle{
        font-size:14px;
        line-height:1.5;
    }

    .tb-home-route .tb-portal-hero-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .tb-home-route .tb-portal-action,
    .tb-home-route .tb-portal-action.secondary{
        width:100%;
    }

    .tb-home-route .tb-portal-hero-media{
        min-height:220px;
    }

    .tb-home-route .tb-page[data-page="home"]{
        margin-top:-20px;
    }
}