/* ============================================================
   demo-hotel  ·  Hotel céntrico (editorial claro bone + banda espresso)
   Blueprint mockup2 (dirección editorial moderna). LIGHT / bone + clay + sand.
   REESCRITO ENTERO: el archivo anterior era el CSS Porto original sin scope.
   Re-skineable: la escala de color la deriva SkinColorService en runtime
   desde los 6 brand_defaults.colors (skin:"auto"). Este archivo define:
   (A) el diseño del home/header/footer/page-header (Capa 1 visual)
   (B) el ensamble de los módulos services/gallery (Capa 2).
   Estructura bone/espresso = tokens NEUTROS fijos (legibilidad garantizada
   ante cualquier re-skin). Los ACENTOS siguen la marca: var(--primary)
   (clay), var(--tertiary) (sand), var(--quaternary) (clay profundo).
   Scope SIEMPRE html.demo-hotel …  ·  NUNCA @if($activeDemo).
   ============================================================ */

/* Tokens neutros del demo (no atados a la marca → siempre legibles) +
   radio editorial (pisa el 0 del bloque brandColors inline). */
html.demo-hotel{
    --border-radius:18px;
    --ht-bone:#F2EEE7;
    --ht-bone-2:#E9E3D8;
    --ht-paper:#FBF9F5;
    --ht-espresso:#1C1714;
    --ht-espresso-2:#2A231E;
    --ht-smoke:#6E655C;
    --ht-line:rgba(28,23,20,.14);
    --ht-line-light:rgba(242,238,231,.14);
    --ht-wa:#128C4B;
    scroll-behavior:smooth;
}
html.demo-hotel body{
    background:var(--ht-bone);
    color:var(--ht-espresso);
    font-family:var(--font-family-primary,'Jost','Avenir Next',Montserrat,system-ui,sans-serif);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
html.demo-hotel .body{background:var(--ht-bone)}
html.demo-hotel .main{background:var(--ht-bone);overflow-x:hidden}
html.demo-hotel img{max-width:100%}

html.demo-hotel .ht-serif{font-family:var(--font-family-secondary,'Cormorant Garamond',Didot,Georgia,serif);font-weight:500;line-height:.98;letter-spacing:-.01em}
html.demo-hotel .ht-serif em{font-style:italic;color:var(--primary,#B4372E)}
html.demo-hotel .ht-wrap{max-width:1280px;margin:0 auto;padding:0 36px}
html.demo-hotel .ht-muted-light{color:rgba(242,238,231,.66)}

html.demo-hotel .ht-eyebrow{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--primary,#B4372E);font-weight:400;display:inline-block}
html.demo-hotel .ht-eyebrow--sand{color:var(--tertiary,#CBB694)}

/* botones pill */
html.demo-hotel .ht-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-family-primary,'Jost',sans-serif);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;padding:15px 32px;border-radius:999px;border:1px solid var(--ht-espresso);transition:.3s;cursor:pointer;text-decoration:none;background:transparent;color:var(--ht-espresso)}
html.demo-hotel .ht-btn--fill{background:var(--ht-espresso);color:var(--ht-bone);border-color:var(--ht-espresso)}
html.demo-hotel .ht-btn--fill:hover{background:var(--primary,#B4372E);border-color:var(--primary,#B4372E);color:#fff}
html.demo-hotel .ht-btn--ghost:hover{background:var(--ht-espresso);color:var(--ht-bone)}
html.demo-hotel .ht-btn--light{border-color:rgba(255,255,255,.7);color:#fff}
html.demo-hotel .ht-btn--light:hover{background:#fff;color:var(--ht-espresso)}

/* ── header · nav pill flotante glassmorphism ── */
html.demo-hotel .ht-header{position:fixed;top:9px;left:0;right:0;z-index:60;pointer-events:none;background:transparent;border:0;box-shadow:none}
html.demo-hotel .ht-bar{pointer-events:auto;max-width:1280px;margin:14px auto 0;padding:10px 14px 10px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(28,23,20,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#fff}
@media(max-width:1330px){html.demo-hotel .ht-bar{margin:14px 24px 0}}
html.demo-hotel .ht-brand{display:flex;align-items:center;text-decoration:none}
html.demo-hotel .ht-nav{display:flex;gap:26px;align-items:center;margin-left:auto}
html.demo-hotel .ht-nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);transition:.2s;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
html.demo-hotel .ht-nav a:hover,html.demo-hotel .ht-nav a.on{color:#fff;border-color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-hright{display:flex;align-items:center;gap:12px}
html.demo-hotel .ht-hd-cta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--primary,#B4372E);color:#fff;padding:12px 26px;border-radius:999px;transition:.25s;text-decoration:none;white-space:nowrap}
html.demo-hotel .ht-hd-cta:hover{background:var(--quaternary,#8F2A23);color:#fff}
html.demo-hotel .ht-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
html.demo-hotel .ht-burger span{width:24px;height:2px;background:#fff;display:block}
@media(max-width:900px){
  html.demo-hotel .ht-nav{display:none;position:absolute;top:calc(100% + 10px);left:16px;right:16px;flex-direction:column;gap:14px;background:rgba(28,23,20,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:22px 26px;border-radius:24px;border:1px solid rgba(255,255,255,.14)}
  html.demo-hotel .ht-nav.open{display:flex}
  html.demo-hotel .ht-burger{display:flex}
  html.demo-hotel .ht-header{position:absolute}
}
@media(max-width:560px){html.demo-hotel .ht-hd-cta{display:none}}

/* ── hero inmersivo ── */
html.demo-hotel .ht-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
html.demo-hotel .ht-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
html.demo-hotel .ht-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,23,20,.38),rgba(28,23,20,.05) 38%,rgba(28,23,20,.62) 86%)}
html.demo-hotel .ht-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:150px}
html.demo-hotel .ht-hero-inner .ht-eyebrow{display:block;margin-bottom:18px}
html.demo-hotel .ht-hero h1{font-size:clamp(3.2rem,10vw,8.5rem);color:#fff;margin:0 0 0 -4px}
html.demo-hotel .ht-hero h1 em{color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-hero-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:26px;flex-wrap:wrap}
html.demo-hotel .ht-hero-sub p{font-size:1.05rem;color:rgba(255,255,255,.85);max-width:40ch;margin:0}
html.demo-hotel .ht-scroll{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ── booking pill flotante ── */
html.demo-hotel .ht-book{position:relative;z-index:10;margin-top:-58px}
html.demo-hotel .ht-book-pill{background:var(--ht-paper);border:1px solid var(--ht-line);border-radius:24px;box-shadow:0 30px 80px rgba(28,23,20,.22);display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;overflow:hidden}
html.demo-hotel .ht-book-c{padding:20px 26px;border-right:1px solid var(--ht-line)}
html.demo-hotel .ht-book-c--go{border-right:0;display:flex;align-items:center;justify-content:center;padding:14px}
html.demo-hotel .ht-book-c label{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ht-smoke);margin-bottom:5px;font-weight:400}
html.demo-hotel .ht-book-input{font-family:var(--font-family-secondary,'Cormorant Garamond',Georgia,serif);font-size:1.25rem;color:var(--ht-espresso);background:transparent;border:0;width:100%;padding:0;cursor:pointer}
html.demo-hotel .ht-book-input:focus{outline:none}
html.demo-hotel select.ht-book-input{appearance:none;-webkit-appearance:none}
html.demo-hotel .ht-book-go{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--ht-wa);border:0;color:#fff;border-radius:16px;padding:18px 20px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:.25s;text-align:center}
html.demo-hotel .ht-book-go:hover{background:#0d6e3a;color:#fff}
html.demo-hotel .ht-book-go .fab{font-size:1.1rem}
@media(max-width:880px){
  html.demo-hotel .ht-book-pill{grid-template-columns:1fr 1fr}
  html.demo-hotel .ht-book-c{border-bottom:1px solid var(--ht-line)}
  html.demo-hotel .ht-book-c--go{grid-column:span 2}
}

/* ── marquee (respeta prefers-reduced-motion) ── */
html.demo-hotel .ht-marquee{overflow:hidden;padding:34px 0;border-bottom:1px solid var(--ht-line);white-space:nowrap}
html.demo-hotel .ht-marquee-track{display:inline-block;animation:ht-mq 26s linear infinite;font-family:var(--font-family-secondary,'Cormorant Garamond',Georgia,serif);font-size:1.5rem;font-style:italic;color:var(--ht-smoke)}
html.demo-hotel .ht-marquee-track b{color:var(--primary,#B4372E);font-weight:500;margin:0 18px;font-style:normal;vertical-align:middle}
@keyframes ht-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){html.demo-hotel .ht-marquee-track{animation:none}}

/* ── intro editorial ── */
html.demo-hotel .ht-intro{padding:120px 0}
html.demo-hotel .ht-intro-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:70px;align-items:center}
html.demo-hotel .ht-intro h2{font-size:clamp(2.4rem,5vw,4rem);margin:18px 0 26px;color:var(--ht-espresso)}
html.demo-hotel .ht-intro p{color:var(--ht-smoke);font-size:1.04rem;max-width:52ch;margin-bottom:14px}
html.demo-hotel .ht-intro .ht-btn{margin-top:16px}
html.demo-hotel .ht-intro-figure{position:relative;margin:0}
html.demo-hotel .ht-intro-figure img{width:100%;height:520px;object-fit:cover;border-radius:200px 200px 24px 24px}
html.demo-hotel .ht-intro-chip{position:absolute;left:-30px;bottom:40px;background:var(--ht-espresso);color:var(--ht-bone);padding:20px 26px;border-radius:18px}
html.demo-hotel .ht-intro-chip b{font-size:2rem;display:block;line-height:1;color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-intro-chip span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,238,231,.7)}
@media(max-width:880px){
  html.demo-hotel .ht-intro-grid{grid-template-columns:1fr;gap:40px}
  html.demo-hotel .ht-intro-figure img{height:400px}
  html.demo-hotel .ht-intro-chip{left:14px}
}

/* ── habitaciones (banda espresso · filas numeradas) ── */
html.demo-hotel .ht-rooms{background:var(--ht-espresso);color:var(--ht-bone);padding:110px 0}
html.demo-hotel .ht-rooms h2{color:var(--ht-bone);font-size:clamp(2.4rem,5vw,4rem);margin:14px 0 60px}
html.demo-hotel .ht-rooms h2 em{color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-room-row{display:grid;grid-template-columns:90px 1fr 1.35fr;gap:34px;align-items:center;padding:38px 0;border-top:1px solid var(--ht-line-light);transition:.3s;text-decoration:none;color:var(--ht-bone)}
html.demo-hotel .ht-room-row:last-of-type{border-bottom:1px solid var(--ht-line-light)}
html.demo-hotel .ht-room-row:hover{background:rgba(242,238,231,.03);color:var(--ht-bone)}
html.demo-hotel .ht-room-n{font-style:italic;font-size:2rem;color:var(--tertiary,#CBB694);opacity:.7}
html.demo-hotel .ht-room-body h3{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--ht-bone);margin:0 0 8px}
html.demo-hotel .ht-room-meta{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tertiary,#CBB694);margin-bottom:12px}
html.demo-hotel .ht-room-body p{color:rgba(242,238,231,.66);font-size:.94rem;max-width:42ch;margin:0}
html.demo-hotel .ht-room-price{margin-top:14px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tertiary,#CBB694);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
html.demo-hotel .ht-room-price em{font-style:normal;color:rgba(242,238,231,.55);border-bottom:1px solid var(--ht-line-light);padding-bottom:2px}
html.demo-hotel .ht-room-row figure{overflow:hidden;border-radius:20px;height:280px;margin:0}
html.demo-hotel .ht-room-row img{width:100%;height:100%;object-fit:cover;transition:.7s;filter:saturate(.95)}
html.demo-hotel .ht-room-row:hover img{transform:scale(1.05)}
@media(max-width:880px){
  html.demo-hotel .ht-room-row{grid-template-columns:1fr}
  html.demo-hotel .ht-room-n{display:none}
}

/* ── experiencias (mosaico escalonado) ── */
html.demo-hotel .ht-exp{padding:120px 0}
html.demo-hotel .ht-exp h2{font-size:clamp(2.4rem,5vw,4rem);margin-top:14px;color:var(--ht-espresso)}
html.demo-hotel .ht-exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
html.demo-hotel .ht-exp-card{position:relative;border-radius:24px;overflow:hidden;min-height:430px;display:flex;align-items:flex-end;color:#fff}
html.demo-hotel .ht-exp-card:nth-child(2){margin-top:44px}
html.demo-hotel .ht-exp-card:nth-child(3){margin-top:88px}
html.demo-hotel .ht-exp-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.7s}
html.demo-hotel .ht-exp-card:hover .ht-exp-bg{transform:scale(1.06)}
html.demo-hotel .ht-exp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,23,20,0) 35%,rgba(28,23,20,.85))}
html.demo-hotel .ht-exp-body{position:relative;z-index:2;padding:30px}
html.demo-hotel .ht-exp-tag{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-exp-body h3{font-size:2rem;color:#fff;margin:8px 0 6px}
html.demo-hotel .ht-exp-body p{font-size:.88rem;color:rgba(255,255,255,.82);margin:0}
@media(max-width:880px){
  html.demo-hotel .ht-exp-grid{grid-template-columns:1fr}
  html.demo-hotel .ht-exp-card:nth-child(2),html.demo-hotel .ht-exp-card:nth-child(3){margin-top:0}
}

/* ── gastro / eventos (banda full-bleed) ── */
html.demo-hotel .ht-bleed{position:relative;min-height:76vh;display:flex;align-items:center;color:#fff;overflow:hidden}
html.demo-hotel .ht-bleed-bg{position:absolute;inset:0;background-size:cover;background-position:center}
html.demo-hotel .ht-bleed-bg::after{content:"";position:absolute;inset:0;background:rgba(28,23,20,.55)}
html.demo-hotel .ht-bleed-inner{position:relative;z-index:2;width:100%;padding-top:70px;padding-bottom:70px}
html.demo-hotel .ht-bleed-col{max-width:560px}
html.demo-hotel .ht-bleed h3{font-size:clamp(2rem,4.4vw,3.4rem);color:#fff;margin:12px 0 16px}
html.demo-hotel .ht-bleed p{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:22px}

/* ── ubicación ── */
html.demo-hotel .ht-loc{padding:120px 0}
html.demo-hotel .ht-loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
html.demo-hotel .ht-loc h2{font-size:clamp(2.4rem,5vw,3.8rem);margin:16px 0 20px;color:var(--ht-espresso)}
html.demo-hotel .ht-loc p{color:var(--ht-smoke);max-width:46ch}
html.demo-hotel .ht-walk{margin-top:34px}
html.demo-hotel .ht-walk-row{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--ht-line)}
html.demo-hotel .ht-walk-row:first-child{border-top:1px solid var(--ht-line)}
html.demo-hotel .ht-walk-row .ht-serif{font-size:1.3rem}
html.demo-hotel .ht-walk-t{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--primary,#B4372E)}
html.demo-hotel .ht-map{position:relative;background:#E4DED2;height:520px;border-radius:24px;overflow:hidden;margin:0}
html.demo-hotel .ht-map iframe{width:100%;height:100%;border:0;display:block}
html.demo-hotel .ht-map-streets{position:absolute;inset:0;opacity:.6}
html.demo-hotel .ht-st{position:absolute;background:var(--ht-bone);display:block}
html.demo-hotel .ht-st-h1{left:0;right:0;top:26%;height:14px}
html.demo-hotel .ht-st-h2{left:0;right:0;top:52%;height:22px}
html.demo-hotel .ht-st-h3{left:0;right:0;top:78%;height:12px}
html.demo-hotel .ht-st-v1{top:0;bottom:0;left:22%;width:14px}
html.demo-hotel .ht-st-v2{top:0;bottom:0;left:48%;width:20px}
html.demo-hotel .ht-st-v3{top:0;bottom:0;left:76%;width:12px}
html.demo-hotel .ht-st-block{position:absolute;left:50%;top:54%;width:150px;height:110px;background:#CDC4B2;border-radius:8px;transform:translate(-50%,-50%);display:block}
html.demo-hotel .ht-map-pinbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);text-align:center}
html.demo-hotel .ht-map-pin{width:64px;height:64px;margin:0 auto;border-radius:50% 50% 50% 4px;background:var(--primary,#B4372E);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(28,23,20,.35)}
html.demo-hotel .ht-map-pin span{transform:rotate(-45deg);color:#fff;font-weight:600;font-size:1.4rem}
html.demo-hotel .ht-map-card{margin-top:18px;background:var(--ht-paper);border-radius:12px;padding:12px 20px;font-size:.78rem;letter-spacing:.06em;box-shadow:0 12px 30px rgba(28,23,20,.18);color:var(--ht-espresso)}
html.demo-hotel .ht-map-card b{font-weight:500}
html.demo-hotel .ht-map-ref{position:absolute;left:24%;top:24%;transform:translate(-50%,-50%);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#8A8378;max-width:12ch;text-align:center}
@media(max-width:880px){
  html.demo-hotel .ht-loc-grid{grid-template-columns:1fr}
  html.demo-hotel .ht-map{height:380px}
}

/* ── review destacada ── */
html.demo-hotel .ht-rev{background:var(--ht-bone-2);padding:110px 0;text-align:center}
html.demo-hotel .ht-stars{color:var(--primary,#B4372E);letter-spacing:.4em;font-size:.9rem}
html.demo-hotel .ht-rev blockquote{font-style:italic;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.3;max-width:24ch;margin:26px auto 0;color:var(--ht-espresso);border:0;padding:0}
html.demo-hotel .ht-rev cite{display:block;margin-top:26px;font-style:normal;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ht-smoke)}

/* ── cta final inmersivo ── */
html.demo-hotel .ht-cta{position:relative;min-height:70vh;display:flex;align-items:center;color:#fff;overflow:hidden}
html.demo-hotel .ht-cta-bg{position:absolute;inset:0;background-size:cover;background-position:center}
html.demo-hotel .ht-cta-bg::after{content:"";position:absolute;inset:0;background:rgba(28,23,20,.66)}
html.demo-hotel .ht-cta-inner{position:relative;z-index:2;text-align:center;width:100%;padding-top:70px;padding-bottom:70px}
html.demo-hotel .ht-cta h2{font-size:clamp(2.6rem,7vw,5.2rem);color:#fff;margin:14px 0 26px}
html.demo-hotel .ht-cta h2 em{color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── page header (about/contact/módulos · banda espresso) ── */
html.demo-hotel .ht-pagehead{background:var(--ht-espresso);color:var(--ht-bone);padding:170px 0 70px;text-align:center}
html.demo-hotel .ht-crumb ol{list-style:none;display:flex;gap:10px;justify-content:center;padding:0;margin:0 0 16px;color:rgba(242,238,231,.6);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em}
html.demo-hotel .ht-crumb a{color:rgba(242,238,231,.6);text-decoration:none}
html.demo-hotel .ht-crumb a:hover{color:var(--ht-bone)}
html.demo-hotel .ht-crumb span{color:var(--tertiary,#CBB694)}
html.demo-hotel .ht-pagehead h1{font-size:clamp(2.4rem,5vw,3.8rem);color:var(--ht-bone);margin:0}
html.demo-hotel .ht-pagehead p{color:rgba(242,238,231,.7);margin:16px auto 0;max-width:56ch}

/* ── about ── */
html.demo-hotel .ht-sec{padding:96px 0}
html.demo-hotel .ht-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
html.demo-hotel .ht-about-title{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ht-espresso);margin:14px 0 20px}
html.demo-hotel .ht-about-grid p{color:var(--ht-smoke);margin:0 0 16px}
html.demo-hotel .ht-about-img{width:100%;height:100%;object-fit:cover;border-radius:24px}
@media(max-width:880px){html.demo-hotel .ht-about-grid{grid-template-columns:1fr;gap:32px}}

/* ── contact ── */
html.demo-hotel .ht-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
html.demo-hotel .ht-contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;color:var(--ht-smoke)}
html.demo-hotel .ht-contact-list strong{color:var(--ht-espresso);display:block;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:4px}
html.demo-hotel .ht-contact-form form{display:grid;gap:16px}
html.demo-hotel .ht-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html.demo-hotel .ht-input{background:var(--ht-paper);border:1px solid var(--ht-line);border-radius:14px;padding:14px 18px;color:var(--ht-espresso);font-size:.95rem;width:100%;font-family:inherit}
html.demo-hotel .ht-input:focus{outline:none;border-color:var(--primary,#B4372E)}
html.demo-hotel .ht-input::placeholder{color:var(--ht-smoke);opacity:.7}
html.demo-hotel .ht-contact-form .ht-btn--fill{justify-self:start}
html.demo-hotel .ht-alert{background:rgba(180,55,46,.1);border:1px solid var(--primary,#B4372E);color:var(--quaternary,#8F2A23);padding:14px 18px;border-radius:14px;margin-bottom:20px}
@media(max-width:880px){html.demo-hotel .ht-contact-grid{grid-template-columns:1fr;gap:36px}html.demo-hotel .ht-form-row{grid-template-columns:1fr}}

/* ── footer (espresso) ── */
html.demo-hotel .ht-footer{background:var(--ht-espresso);color:rgba(242,238,231,.66);padding:70px 0 40px;border-top:0}
html.demo-hotel .ht-fin{max-width:1280px;margin:0 auto;padding:0 36px}
html.demo-hotel .ht-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--ht-line-light)}
html.demo-hotel .ht-fbrand p{color:rgba(242,238,231,.66);font-size:.9rem;max-width:34ch;margin:0}
html.demo-hotel .ht-footer h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tertiary,#CBB694);margin:0 0 18px;font-weight:400}
html.demo-hotel .ht-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
html.demo-hotel .ht-footer a{color:rgba(242,238,231,.66);font-size:.88rem;text-decoration:none;transition:.2s}
html.demo-hotel .ht-footer a:hover{color:var(--ht-bone)}
html.demo-hotel .ht-footer li{color:rgba(242,238,231,.66);font-size:.87rem}
html.demo-hotel .ht-social{display:flex;gap:12px;margin-bottom:18px}
html.demo-hotel .ht-social a{width:36px;height:36px;border:1px solid var(--ht-line-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ht-bone)}
html.demo-hotel .ht-social a:hover{background:var(--primary,#B4372E);border-color:var(--primary,#B4372E);color:#fff}
html.demo-hotel .ht-footer .ht-fcta{display:inline-block}
/* contraste del CTA en footer: el `#footer a{color:#555}` de Porto (especificidad
   de ID en theme.css) le gana a cualquier regla de clases → el texto del botón se
   pierde sobre el --primary (detectado con cabanas, primary verde bosque).
   Override con !important, mismo patrón que los overrides de demos dark (#57). */
html.demo-hotel .ht-footer a.ht-fcta{color:#fff !important}
html.demo-hotel .ht-footer a.ht-fcta:hover{color:#fff !important}
html.demo-hotel .ht-fbot{display:flex;justify-content:space-between;padding-top:24px;color:rgba(242,238,231,.55);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap;gap:10px}
@media(max-width:820px){html.demo-hotel .ht-fgrid{grid-template-columns:1fr 1fr}}

/* ============================================================
   CAPA B · Ensamble de módulos (páginas internas)
   services/gallery se sirven con markup Porto genérico. hotel ESTÁ en
   is_demo_light_themed() → esas vistas ya deciden light solas (fondos
   claros + texto oscuro). La Capa A GLOBAL (cd-system-base.css) ya alinea
   botones/badges/paginación/links a var(--primary)/var(--border-radius).
   Acá va SOLO lo que la whitelist light + Capa A no cubren para que se
   vea nativo al editorial del demo: serif en títulos, acento clay,
   filtros, cards y fallback isotope. El page-header espresso llega vía
   page-header-hotel (dynamic-header) — el detalle de services usa
   site.services.detail_light=1 desde el preset.
   ============================================================ */

/* Todas las internas usan page-header-hotel (dynamic-header): sin margen
   extra bajo el nav pill flotante (el padding-top del pagehead lo cubre). */
html.demo-hotel .main .ht-pagehead{margin-top:0}

/* Títulos de módulo (services/gallery) en la serif editorial */
html.demo-hotel .main h1,
html.demo-hotel .main h2,
html.demo-hotel .main h3,
html.demo-hotel .main .card-title{font-family:var(--font-family-secondary,'Cormorant Garamond',Georgia,serif)}

/* Acento de marca en enlaces/negritas de los módulos (clay) */
html.demo-hotel .main .text-color-primary,
html.demo-hotel .main .read-more{color:var(--primary,#B4372E) !important}

/* Nav-pills de filtro (gallery) en editorial claro */
html.demo-hotel .main .sort-source .nav-link{color:var(--ht-smoke);border-color:transparent;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
html.demo-hotel .main .sort-source .nav-link:hover{color:var(--primary,#B4372E)}
html.demo-hotel .main .sort-source .nav-item.active .nav-link,
html.demo-hotel .main .sort-source .nav-link.active{color:var(--ht-espresso);border-bottom:2px solid var(--primary,#B4372E)}

/* Cards de módulo (services): superficie paper, borde fino, sombra suave.
   Literales inline legibles sobre bone. */
html.demo-hotel .main .card.custom-box-shadow-1,
html.demo-hotel .main article.post .card{background:var(--ht-paper) !important;border:1px solid var(--ht-line) !important;box-shadow:0 10px 30px rgba(28,23,20,.06) !important}
html.demo-hotel .main .card .text-color-dark{color:var(--ht-espresso) !important}
html.demo-hotel .main .card .text-color-dark:hover{color:var(--primary,#B4372E) !important}

/* Fallback isotope: si el JS no inicializa, las cards de gallery arrancan
   ocultas → forzamos visibles (red de seguridad, SIN !important para no
   romper el filtro por categoría cuando el JS sí corre). */
html.demo-hotel .main .gallery-list .isotope-item,
html.demo-hotel .main .sort-destination .isotope-item{opacity:1;visibility:visible}

/* Porto .section trae border-top 5px #f4f4f4: en el editorial se ve como
   una línea dura → suavizada a la línea del demo. */
html.demo-hotel .main section.section,
html.demo-hotel .main .section{border-top-color:var(--ht-line) !important}

/* Fix legibilidad grilla /services: la vista compartida pinta títulos con
   var(--light) (pensado para skins oscuros); en este demo claro las cards
   son blancas → títulos y textos oscuros. */
html.demo-hotel .main .service-card h3,
html.demo-hotel .main .service-card h3 a { color: var(--dark) !important; }
html.demo-hotel .main .service-card p[itemprop="description"] { color: #6E655C !important; }