@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Albert+Sans:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   REDISEÑO HOTETEC HOTELS & RESORTS · capa sobre "generic" (demo-hotetec, nov-2026)
   Tokens: tinta #1B2341 · arena #F2ECE2 · mar #2C7A7B · ciudad #A2574A · montaña #3F5E45
   Marcellus (titulares) + Albert Sans (texto). Sin esquinas exageradas ni sombras.
   ===================================================================== */
:root{
  --colorPrimary:#2C7A7B;
  --colorSecondary:#1B2341;
  --fontPrimary:"Marcellus","Times New Roman",serif;
  --fontSecondary:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --colorGray:#F2ECE2;
  --bRadius:4px;
  --text:17px;
  --hh-tinta:#1B2341;
  --hh-tinta2:#262F52;
  --hh-arena:#F2ECE2;
  --hh-arena2:#F8F4EE;
  --hh-mar:#2C7A7B;
  --hh-mar-osc:#22605F;
  --hh-mar-claro:#9FD3D1;
  --hh-ciudad:#A2574A;
  --hh-montana:#3F5E45;
  --hh-gris:#5B6275;
  --hh-linea:#DDD6C9;
}

/* ---------- Base ---------- */
html body,.htt-text-image p,body .universalLayout1-layout .ul-card__description,.htt-text-image ul li{letter-spacing:0;font-weight:400}
body{color:var(--hh-tinta)}
h1,h2,h3,h4,.ul-title-text,.htt-text-image p.title-h2{font-family:var(--fontPrimary);font-weight:400;letter-spacing:.01em;color:var(--hh-tinta)}
.ul-tagline-text{font-family:var(--fontSecondary) !important;font-size:12px !important;letter-spacing:.22em !important;text-transform:uppercase;font-weight:600 !important;color:var(--hh-mar) !important}
.ul-subtitle-text{font-family:var(--fontSecondary);color:var(--hh-gris)}
.bgGray{background:var(--hh-arena) !important}
.bgSecondary{background:var(--hh-tinta) !important}

/* Botones: rectángulo sobrio, mayúsculas espaciadas */
.btn.ul-btn-primary,.ul-btn-primary,.btn-corpo,form input[type=submit],.newsList-readMore{background:var(--hh-mar) !important;border:1px solid var(--hh-mar) !important;color:#fff !important;border-radius:3px !important;font-family:var(--fontSecondary) !important;font-weight:600 !important;font-size:13px !important;letter-spacing:.12em !important;text-transform:uppercase}
.btn.ul-btn-primary:hover,.ul-btn-primary:hover,.btn-corpo:hover{background:var(--hh-mar-osc) !important;border-color:var(--hh-mar-osc) !important}
.btn.ul-btn-secondary,.ul-btn-secondary,.layout.universalLayout1-layout .ul-btn-secondary{background:transparent !important;border:1px solid currentColor !important;border-radius:3px !important;font-weight:600 !important;font-size:13px !important;letter-spacing:.12em !important;text-transform:uppercase}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--hh-mar);outline-offset:2px}

/* ---------- Aviso superior y cabecera ---------- */
.alert-header{background:var(--hh-tinta) !important;color:#fff}
.httHeaderFixedToTopPlusAbsolute{background:var(--hh-tinta) !important}
header nav.menuCustom>ul li a,header nav.menuCustom>ul li button{font-family:var(--fontSecondary);font-weight:500;letter-spacing:.02em}

/* ---------- Hero ---------- */
.hero.hero-home .ul-card__image::after{background:linear-gradient(180deg,rgba(27,35,65,.25) 0%,rgba(27,35,65,0) 30%,rgba(27,35,65,0) 50%,rgba(27,35,65,.7) 100%) !important}
.hero .ul-title-text,.hero-home .ul-title-text{color:#fff !important;font-size:clamp(44px,5.6vw,84px) !important;line-height:1.02 !important;letter-spacing:.005em}
.hero .ul-subtitle-text{color:#fff !important;font-size:19px !important;font-weight:400}
.hero .ul-tagline-text{color:var(--hh-mar-claro) !important}
@media (max-width:767px){.hero-section .ul-title-text,.hero .ul-title-text,.hero-home .ul-title-text{font-size:40px !important;line-height:1.08 !important}}

/* ---------- Ventajas (franja bajo el buscador) ---------- */
.ventajas.bgSecondary{background:var(--hh-tinta) !important}
.ventajas p,.ventajas span{font-family:var(--fontSecondary) !important;letter-spacing:.02em}

/* ---------- Intro ---------- */
.intro .ul-title-text{font-size:clamp(34px,4vw,54px) !important}
.intro .ul-card__description,.intro .ul-card__description p{color:#3A4256;max-width:64ch;margin-inline:auto;font-size:18px !important;line-height:1.65 !important}

/* ---------- Títulos de sección ---------- */
.universalLayout1-layout .ul-card__title h2 .ul-title-text,h2.ul-title-text{font-size:clamp(32px,3.4vw,46px)}

/* ---------- Hoteles: foto arriba, texto debajo ---------- */
.hotels{background:var(--hh-arena2)}
.hotels .ul-card{background:transparent !important;display:flex !important;flex-direction:column !important;height:auto !important;min-height:0 !important;border-radius:0 !important;overflow:visible;box-shadow:none !important}
.hotels .ul-card__image{position:relative !important;inset:auto !important;height:auto !important;aspect-ratio:4/3;border-radius:2px !important;overflow:hidden}
.hotels .ul-card__image img,.hotels .ul-card__image video{position:static !important;width:100% !important;height:100% !important;object-fit:cover}
.hotels .swiper-slide{height:auto !important}
.hotels .text-hotel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.hotels .text-hotel p{margin:0 !important}
.hotels .text-hotel .stars{flex-basis:100%}
.hotels .text-hotel img{width:22px !important;height:22px !important}
.hotels .ul-card__image::after{display:none !important}
.hotels .hh-brand{flex-basis:100%;width:100%;margin:2px 0 0 !important;font-size:11px !important;letter-spacing:.14em;text-transform:uppercase;font-weight:600 !important;color:var(--colorPrimary) !important}
.hotels .ul-card__content{position:static !important;inset:auto !important;transform:none !important;background:none !important;color:var(--hh-tinta) !important;text-align:left !important;padding:16px 2px 0 !important;display:flex;flex-direction:column;gap:6px}
.hotels .ul-card__title .ul-title-text{color:var(--hh-tinta) !important;font-size:26px !important;text-shadow:none !important;text-align:left !important}
.hotels .text-hotel,.hotels .text-hotel p{color:var(--hh-gris) !important;text-shadow:none !important;text-align:left !important;font-size:15px !important}
.hotels .text-hotel img{filter:brightness(0) saturate(100%) invert(38%) sepia(33%) saturate(700%) hue-rotate(131deg) brightness(90%)}
.hotels .stars{color:#B08D57 !important}
.hotels .price_from_container{position:static !important;background:none !important;color:var(--hh-gris) !important;padding:10px 0 0 !important;border-top:1px solid var(--hh-linea);border-radius:0 !important;text-align:left !important;width:auto !important;font-size:14px}
.hotels .price_from_container a{color:var(--hh-tinta) !important;font-weight:700;font-size:21px}
.hotels .ul-card__actions{justify-content:flex-start !important;gap:12px}
.hotels.universalLayout1-layout .ul-card__actions .ul-btn-secondary,.hotels .ul-card__actions a.btn:not(.ul-btn-primary){color:var(--hh-tinta) !important;border:1px solid var(--hh-tinta) !important;background:transparent !important}
.hotels .ul-card__actions a.btn:not(.ul-btn-primary) svg{fill:currentColor;stroke:currentColor}

/* ---------- Banner Rewards ---------- */
.banner-rewards .ul-title-text{color:#fff !important}
.banner-rewards .ul-card{border-radius:2px !important}

/* ---------- Experiencias ---------- */
.experiences .ul-card{border-radius:2px !important;overflow:hidden}
.experiences .ul-title-text{color:#fff !important}

/* ---------- Ofertas ---------- */
.offers{background:var(--hh-tinta) !important}
.offers .ul-card{border-radius:2px !important;overflow:hidden}
.offers .ul-tagline-text{color:var(--hh-mar-claro) !important}
.offers .stars{display:none !important}
.offers .ul-card__subtitle .ul-subtitle-text{color:#fff !important;opacity:.92;font-size:16px !important;line-height:1.45 !important;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* ---------- Destinos (pestañas) ---------- */
.tab-destinos .nav.nav-pills{gap:6px;flex-wrap:wrap;justify-content:center}
.tab-destinos .nav.nav-pills .nav-link{background:transparent !important;border:1px solid var(--hh-linea) !important;color:var(--hh-tinta) !important;border-radius:999px !important;font-family:var(--fontSecondary);font-size:14px;padding:6px 18px}
.tab-destinos .nav.nav-pills .nav-link.active{background:var(--hh-tinta) !important;border-color:var(--hh-tinta) !important;color:#fff !important}

/* ---------- Pie ---------- */
footer{background:var(--hh-tinta) !important;color:#C9CCD6}
footer a{color:#E6E8EE}
footer a:hover{color:var(--hh-mar-claro)}
.form-footer .btn-corpo,footer .btn-corpo{background:var(--hh-mar) !important;border-color:var(--hh-mar) !important;color:#fff !important}
.form-footer .btn-corpo:hover,footer .btn-corpo:hover{background:var(--hh-mar-osc) !important}

/* Pie: hoteles agrupados por marca */
.hh-foot-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 28px;margin-top:16px}
.hh-foot-brands ul{list-style:none;margin:0;padding:0}
.hh-foot-brands li{margin:0 0 4px}
.hh-foot-brand{font-family:var(--fontSecondary) !important;font-size:11px !important;letter-spacing:.2em;text-transform:uppercase;font-weight:600 !important;color:var(--hh-mar-claro) !important;margin:0 0 6px !important}

/* Hotetec Rewards en la fila superior de la cabecera (junto al teléfono), con icono pequeño — como en democaribe */
header .phone{display:flex !important;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
header .phone p{margin:0 !important;white-space:nowrap}
header .phone p.rw-top{margin-left:18px !important;padding-left:18px;border-left:1px solid rgba(255,255,255,.25)}
header .rw-link{display:inline-flex !important;align-items:center;gap:7px;color:#fff !important;text-decoration:none}
header .rw-link:hover{color:var(--hh-mar-claro) !important}
header .rw-link img{width:17px !important;height:17px !important;opacity:1 !important;filter:brightness(0) invert(1)}

/* =====================================================================
   MICROSITES DE HOTEL (body:has(.marca-hotel)) — molde común para los 12
   Color del hotel = el de su colección: .hh-col-mar / .hh-col-ciudad / .hh-col-montana en el logo
   ===================================================================== */
body:has(.marca-hotel){--hh-hotel:var(--hh-mar);--colorPrimary:var(--hh-hotel)}
body:has(.hh-col-ciudad){--hh-hotel:var(--hh-ciudad)}
body:has(.hh-col-montana){--hh-hotel:var(--hh-montana)}

/* Cabecera: tinta y texto blanco (anula el naranja del CSS "coralia") */
body:has(.marca-hotel) header.httHeaderAbsolute,body:has(.marca-hotel) .httHeaderFixedToTopPlusAbsolute{background:var(--hh-tinta) !important;border-top:0 !important}
body:has(.marca-hotel) header a,body:has(.marca-hotel) header .white,body:has(.marca-hotel) header .person-login-text,body:has(.marca-hotel) header .person-login-text-high,body:has(.marca-hotel) .person-login-text,body:has(.marca-hotel) .mybooking-content-text,body:has(.marca-hotel) nav.menuCustom>ul li a,body:has(.marca-hotel) nav.menuCustom>ul li button,body:has(.marca-hotel) .language-text,body:has(.marca-hotel) .language-text:after{color:#fff !important}
body:has(.marca-hotel) .personLogin-content svg,body:has(.marca-hotel) .mybooking-content svg{fill:#fff !important}
body:has(.marca-hotel) .navbar-toggler-icon{filter:brightness(0) invert(1) !important}
body:has(.marca-hotel) .grid-menu .navbar-toggler{border-color:rgba(255,255,255,.5) !important}
body:has(.marca-hotel) .access-right>.row>div{border-color:rgba(255,255,255,.2) !important}

/* Logo de texto del hotel */
.hh-hlogo{display:inline-grid;line-height:1;gap:6px;color:#fff;text-align:left;padding:4px 0;text-decoration:none}
.hh-hlogo b{font-family:var(--fontPrimary);font-weight:400;font-size:28px;letter-spacing:.18em;white-space:nowrap}
.hh-hlogo small{font-family:var(--fontSecondary);font-size:9.5px;letter-spacing:.3em;font-weight:600;opacity:.85;text-transform:uppercase;white-space:nowrap}
@media (max-width:575px){.hh-hlogo b{font-size:20px;letter-spacing:.12em}.hh-hlogo small{font-size:8px;letter-spacing:.22em}}

/* Sello de marca (texto) */
.hh-stamp{display:inline-grid;place-items:center;line-height:1;gap:4px;padding:10px 14px;background:var(--hh-tinta);color:#fff;border:1px solid rgba(255,255,255,.35);text-align:center}
.hh-stamp b{font-family:var(--fontPrimary);font-weight:400;font-size:17px;letter-spacing:.22em}
.hh-stamp small{font-family:var(--fontSecondary);font-size:8px;letter-spacing:.32em;font-weight:600;opacity:.85}

/* Menú del microsite: barra del color del hotel, activa subrayada en blanco (opción B de Caribe) */
.menu-hotel .nav-content-navigation,.menu-hotel .nav-pills{width:100% !important;max-width:none !important}
.menu-hotel .btn-group{margin:0 !important}
.menu-hotel .nav-pills{background:var(--hh-hotel,var(--hh-mar)) !important;border-radius:0 !important;justify-content:center !important;box-shadow:none !important;margin:0 !important;gap:38px;padding:0 24px !important}
.menu-hotel .nav-link{background:none !important;border-radius:0 !important;box-shadow:none !important;color:rgba(255,255,255,.8) !important;padding:15px 2px 13px !important;border-bottom:2px solid transparent !important;font-size:15px;font-family:var(--fontSecondary)}
.menu-hotel .nav-link.active,.menu-hotel .htt-content-navigation .nav-link.active{background:none !important;color:#fff !important;border-bottom-color:#fff !important;font-weight:600}
@media (max-width:767px){.menu-hotel .nav-pills{gap:18px;padding:0 12px !important;overflow-x:auto;flex-wrap:nowrap !important;justify-content:flex-start !important}.menu-hotel .nav-link{white-space:nowrap;font-size:14px}}

/* Acentos del hotel */
body:has(.marca-hotel) .ul-tagline-text{color:var(--hh-hotel) !important}
body:has(.marca-hotel) .btn.ul-btn-primary,body:has(.marca-hotel) .ul-btn-primary{background:var(--hh-hotel) !important;border-color:var(--hh-hotel) !important}

/* Intro del hotel (descripción de la CRS) a dos columnas */
@media (min-width:992px){
  body:has(.marca-hotel) .intro .ul-card__description{max-width:1120px !important;column-count:2;column-gap:56px;text-align:left}
  body:has(.marca-hotel) .intro .ul-card__description p{max-width:none;margin-inline:0;break-inside:avoid-column}
}
body:has(.marca-hotel) .intro .ul-card__description p{font-family:var(--fontSecondary) !important;font-size:17px !important;line-height:1.65 !important}
body:has(.marca-hotel) .alert-header-hotel{background:var(--hh-hotel) !important;color:#fff !important}