/* ============================================================
   CONECTA TURISMO — TEMA OSCURO (DARK MODE)
   ------------------------------------------------------------
   Capa de override: enlázala SIEMPRE DESPUÉS del CSS principal.
     <link rel="stylesheet" href="estilo.css">
     <link rel="stylesheet" href="ct-dark-theme.css">  <-- esta

   Objetivos:
     · Fondo oscuro general
     · Labels de formulario en dorado
     · Bordes / contornos de inputs en dorado
     · Tipografía clara (legible sobre oscuro)

   ------------------------------------------------------------
   ACTUALIZACIÓN — look & feel inspirado en nobelfy.com
   ------------------------------------------------------------
   Se ha revisado la paleta y se han añadido refinamientos
   (sección 11, al final del archivo) para acercar el resultado
   a la estética cinematográfica de nobelfy.com: negro cálido
   casi puro, dorado más rico y luminoso, botones en píldora,
   tarjetas con esquinas redondeadas y resplandor dorado sutil,
   y tipografía con más aire (letter-spacing) en títulos y CTAs.
   Nota: al no tener acceso en vivo al inspector del navegador,
   la paleta se ha calibrado a partir de una captura de pantalla
   de la web; si Conecta Turismo dispone de los hex exactos de
   marca de nobelfy.com, se pueden sustituir directamente en las
   variables de :root sin tocar el resto del archivo.
   ============================================================ */

:root {
  /* Marca (se mantiene la estructura de variables original) */
  --ct-color-primary: #0c0906; /* base oscura — negro cálido tipo nobelfy */
  --ct-color-secondary: #c9a24c; /* dorado / acento — más rico y luminoso */
  --ct-color-optional: #cfc6ba;

  /* Paleta dark añadida */
  --ct-bg: #0a0806; /* fondo general — negro cálido casi puro */
  --ct-surface: #14100c; /* tarjetas, cajas, header */
  --ct-surface-2: #201a13; /* hover / superficies elevadas */
  --ct-text: #f3efe8; /* texto claro general — blanco cálido */
  --ct-text-muted: #b8ab99; /* texto secundario — gris cálido */
  --ct-gold:#a5805c ; /* dorado (labels y bordes) */
  --ct-gold-bright: #e2c274; /* dorado claro — hover / resplandor */
  --ct-gold-soft: rgba(201, 162, 76, 0.25);
  --ct-gold-glow: rgba(201, 162, 76, 0.35);
  --ct-radius-card: 14px;
  --ct-radius-pill: 999px;
}

/* ---------- Base ---------- */
body {
  background-color: var(--ct-bg);
  color: var(--ct-text);
}

/* Texto que en claro era oscuro/gris → ahora claro */
.title,
.title a,
.title-section,
.block-seo .title h1,
.product-recommended .box-price .price,
.product-recommended .caption .box-price .price {
  color: var(--ct-text);
}
/* El acento dorado de los títulos se mantiene */
.title-section span,
.title-section.red,
.block-seo .title h2 {
  color: var(--ct-gold);
}

/* ---------- LABELS EN DORADO ---------- */
label,
.label,
.searcher label,
md-input-container label,
.md-input-container label,
md-input-container .md-label,
md-input-container.md-input-has-value label,
md-input-container.md-input-focused label,
.md-datepicker-input-container label {
  color: var(--ct-gold) !important;
}

/* ---------- INPUTS: SUBRAYADO dorado, texto claro ---------- */
input,
select,
textarea,
.form-control,
md-input-container input,
md-input-container textarea,
md-select .md-select-value {
  background-color: transparent;
  color: var(--ct-text);
  border: 0;
  border-bottom: 1px solid var(--ct-gold);
  border-radius: 0;
}
input::placeholder,
textarea::placeholder {
  color: var(--ct-text-muted);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
md-select.md-default-theme:focus .md-select-value,
md-select:focus .md-select-value {
  border-bottom-color: var(--ct-gold);
  outline: none;
  box-shadow: 0 1px 0 0 var(--ct-gold); /* subrayado un poco más marcado al enfocar */
}

/* Angular Material: el subrayado de los campos también en dorado */
md-input-container .md-input {
  color: var(--ct-text);
  border-color: var(--ct-gold) !important;
}
md-input-container.md-input-focused .md-input,
md-input-container .md-input:focus,
md-input-container.md-input-has-value .md-input {
  border-color: var(--ct-gold) !important;
}
md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused
  label,
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
  color: var(--ct-gold) !important;
}



/* ---------- Buscador principal (caja blanca → oscura) ---------- */
.main-slider .position-searcher {
  background-color: var(--ct-surface);
}
.main-slider .position-searcher .searcher {
  border-top-color: var(--ct-surface-2);
}
.tabs-searcher .md-tab {
  color: var(--ct-text);
}
.tabs-searcher .md-tab.md-active {
  color: var(--ct-gold);
}

/* ---------- Tarjetas de producto ---------- */
.product-recommended {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.product-recommended .caption {
  background-color: var(--ct-surface);
  border-bottom-color: var(--ct-gold-soft);
}
.product-recommended .caption .destination {
  color: var(--ct-text-muted);
}
.product-recommended .caption .destination i {
  color: var(--ct-gold);
}
.product-recommended .image .box {
  background-color: var(--ct-surface);
  color: var(--ct-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.product-recommended .btn-arrow,
.product-recommended .btn-arrow-top {
  background-color: var(--ct-surface);
}
.product-recommended .btn-arrow-top {
  border-bottom-color: var(--ct-gold-soft);
  border-left-color: var(--ct-gold-soft);
}

/* Fondos claros auxiliares → superficie oscura */
.bg-gray {
  background-color: var(--ct-surface);
}

/* ---------- Footer ---------- */
#web-footer .bottom-line .copyright {
  color: var(--ct-text-muted);
}

/* ---------- Sidenav móvil (era blanco) ---------- */
.sidenav-menu-mvl,
.sidenav-menu-mvl md-content {
  background: var(--ct-bg);
}
.sidenav-menu-mvl ul .md-button,
.sidenav-menu-mvl ul li a {
  background: var(--ct-surface);
  color: var(--ct-text);
}
.sidenav-menu-mvl ul .md-button:hover,
.sidenav-menu-mvl ul li a:hover {
  background: var(--ct-surface-2);
  color: var(--ct-gold);
}

/* ---------- Diálogos / menús Material ---------- */
md-dialog {
  background-color: var(--ct-surface);
  color: var(--ct-text);
}
md-dialog .section-header {
  color: var(--ct-gold);
}
md-dialog a:hover {
  color: var(--ct-gold-bright);
}

/* ---------- Enlaces ---------- */
a {
  color: var(--ct-gold);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ct-gold-bright);
}

/* ---------- Detalle: scrollbar acorde al tema (opcional) ---------- */
* {
  scrollbar-color: var(--ct-gold) var(--ct-surface);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ct-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--ct-gold);
  border-radius: 10px;
}

/* ============================================================
   TRAVELWEB MANAGER v5 — MOTORES Y RESERVA (enfoque por ámbito)
   ------------------------------------------------------------
   La hoja del motor tiene cientos de reglas con colores fijos.
   En vez de ir caja por caja, aquí se hace un BARRIDO por las
   raíces de cada motor/página y luego se REAFIRMAN los acentos
   (dorado en precios, verde/rojo en estados, etc.).
   ============================================================ */

:root {
  --ct-border-soft: rgba(
    201,
    162,
    76,
    0.12
  ); /* sustituye a #e6e6e6 / #d3d3d3 — con un ligero tinte cálido */
  --ct-success: #7bc47f;
  --ct-danger: #ff6f60;
  --ct-warn: #e0c07a;
  --ct-info: #7ec1e8;
  --ct-info-bg: rgba(94, 151, 189, 0.16);
}

/* ============================================================
   1) BARRIDO DE TEXTO → claro en todo lo que cuelga de un motor
   ============================================================ */
.availEngines,
.availEngines *,
.availHotels,
.availHotels *,
.availFlights,
.availFlights *,
.availFerries,
.availFerries *,
.availTransfers,
.availTransfers *,
.availTours,
.availTours *,
.availTour,
.availTour *,
.availPackages,
.availPackages *,
.availCombinedSales,
.availCombinedSales *,
.productHotel,
.productHotel *,
.productActivity,
.productActivity *,
.productTour,
.productTour *,
.ferryResume,
.ferryResume *,
.transferResume,
.transferResume *,
.flightBreakdown,
.flightBreakdown *,
.bookingPage,
.bookingPage *,
.receiptPage,
.receiptPage *,
.budgetPage,
.budgetPage *,
.clientBooking,
.clientBooking *,
.paymentOrder,
.paymentOrder * {
  color: var(--ct-text) !important;
  border-color: var(--ct-border-soft);
}

/* md-icons neutros (gris/oscuro) → claros */
.availEngines md-icon,
.availHotels md-icon,
.availFerries md-icon,
.availTransfers md-icon,
.availTours md-icon,
.availTour md-icon,
.availPackages md-icon,
.availCombinedSales md-icon,
.productHotel md-icon,
.productActivity md-icon,
.productTour md-icon,
.ferryResume md-icon,
.transferResume md-icon,
.bookingPage md-icon,
.receiptPage md-icon,
.budgetPage md-icon,
.clientBooking md-icon {
  color: var(--ct-text) !important;
}

/* ============================================================
   2) FONDOS → oscuros
   ============================================================ */
/* 2a) Cajas blancas (#fff/#ffffff) → superficie */
.searchResume,
.loadingResults,
.loadingBooking,
.loadingValuation,
.hotelContainer,
.flightContainer,
.activityContainer,
.insuranceContainer,
.modalityContainer,
.ferryContainer,
.transferContainer,
.tourContainer,
.configService,
.boxModality,
.boxSegment,
.roomContainer,
.roomsContainer,
.galleryHotel,
.galleryActivity,
.galleryTour,
.hotelGeneralData,
.activityGeneralData,
.infoTour,
.informationContainer,
.modalitiesContainer,
.searchCalendar,
.boxContainer,
.boxFlight,
.formContainerBox,
.serviceContainer,
.priceContainer,
.contactUs,
.progressBarContainer,
.listBox,
.detailsContiner .boxSegment,
.securePayment,
.availEngines md-card,
.productTour md-card,
.availTour md-card,
.availEngines md-sidenav md-content,
.availTour md-sidenav md-content,
.availPackages md-sidenav md-content {
  background-color: var(--ct-surface) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2b) Cajas gris claro (#e6e6e6 / #f7f7f7 / #f8f8f8 / #eee) → superficie elevada */
.roomName,
.journeyBox,
.tariffTitle,
.dateHeader,
.sectionSubservice,
.secondBox,
.loginBox,
.boxSummary,
.includesTour,
.modalityName,
.ratingsContainer,
.b2bInfoPrice,
.headerLeft,
.orderTools span.titleOrder,
.orderTools .md-button.orderActive,
.detailsOption .title,
.roomHeader,
.paxHeader,
.transferHeader,
.btnShowDetails.open,
.detailsContiner,
.serviceData.journey .time,
.serviceData.extra,
.boxRadio,
.group-filter-category .btn-filter-category.categoryActive,
.infoGDPR,
.errorAlert,
.panel.panel-default > .panel-heading,
.panel > .panel-heading {
  background-color: var(--ct-surface-2) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2c) Hover claro de opciones → superficie elevada */
.boardOption:hover {
  background-color: var(--ct-surface-2) !important;
}

/* 2d) md-card y panel dentro de motores (fallback) */
.availEngines .panel,
.productHotel .panel,
.productTour .panel,
.availTour .panel,
.availPackages .panel {
  background-color: var(--ct-surface) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2e) Cabeceras que YA eran oscuras (#0b1315) — se reafirman por si acaso */
.boxHeader,
.headerBox,
.headerFixed,
.headerOptions,
.searchBox,
.searcherBox,
.tabsOperation .btnPageOperation.active,
.configurationTour > .resumeConfiguration,
.configurationPackage > .resumeConfiguration,
.changeService > .resumeConfiguration,
.availableModality .resultsContainer > .resumeConfiguration {
  background-color: var(--ct-color-primary) !important;
}

/* ============================================================
   3) REAFIRMAR ACENTOS (sobre el barrido de texto)
   ============================================================ */
/* 3a) Precios y totales → dorado */
.price,
.priceAmount,
.totalPrice,
.totalPrice .price,
.priceInformation .price,
.priceInfo .amount,
.hotelPriceDetails .price,
.activityPriceDetails .price,
.tourPriceDetails .price,
.boxPrice .optionPrice .price,
.infoTour .priceInformation .price,
.resumePrice .lineTotal .price,
.b2bInfoPrice .price {
  color: var(--ct-gold) !important;
}
.totalPrice .info,
.priceInformation .info,
.priceInfo .info,
.hotelPriceDetails .info,
.tourPriceDetails .info {
  color: var(--ct-text-muted) !important;
}

/* 3b) Enlaces / acciones doradas + sus iconos */
.newSearch,
.newSearch md-icon,
.moreOptions,
.moreOptions md-icon,
.moreInformation,
.moreInfo,
.fileLink,
.showDetails,
.showDetails md-icon,
.btnShowHotels,
.btnShowHotels md-icon,
.btnAddFlight,
.btnAddFlight md-icon,
.btnDeleteFlight,
.btnShowDetails a,
.iconInfo,
.infoSubTitle md-icon {
  color: var(--ct-gold) !important;
}

/* 3c) Botones de acción (fondo dorado, texto claro) — texto en blanco */
.md-button.moreInfo,
.md-button.price,
.md-button.viewTour,
.md-button.btnSearch,
.btnBooking,
.btnContinue,
.goBooking,
.tourBook,
.chooseService,
.modifiyService,
.btnPageOperation,
.btnGoToPay,
.btnLogin {
  color: #fff !important;
}

/* 3d) Estados: éxito (verde) y selección */
.selectedService,
.selectedService md-icon,
.chooseService md-icon,
.promotionalCodeContainer.valid label {
  color: var(--ct-success) !important;
}
.payMethod {
  background-color: rgba(123, 196, 127, 0.15) !important;
  color: var(--ct-success) !important;
}

/* 3e) Estados: error / aviso (rojo-naranja) */
.md-input-invalid label,
.md-input-invalid .md-input,
.md-input-invalid .md-input-message-animation,
.infoDestination b small,
.nightly,
.nightly md-icon,
.promotionalCodeContainer.invalid label {
  color: var(--ct-danger) !important;
}

/* 3f) Chips de reglas/promos (amarillo claro → ámbar sobre oscuro) */
.rules span {
  background-color: rgba(224, 192, 122, 0.15) !important;
  color: var(--ct-warn) !important;
}

/* 3g) Cajas informativas azules (#d9edf6 / #d9edf7 / #e3f3fd / #bce2f7) */
.formImportantMsg,
.alert-info,
.detailsScale,
.filtersContainer .panel-body .subTitle {
  background-color: var(--ct-info-bg) !important;
  color: var(--ct-info) !important;
  border-color: rgba(126, 193, 232, 0.4) !important;
}

/* 3h) Franja izquierda de servicios del resumen → dorada (más visible) */
.boxSummary .serviceContainer {
  border-left-color: var(--ct-gold) !important;
}

/* ============================================================
   4) FORMULARIOS DEL MOTOR (labels dorados, inputs con borde dorado)
   ============================================================ */
.availEngines md-input-container label,
.productHotel md-input-container label,
.productActivity md-input-container label,
.productTour md-input-container label,
.bookingPage md-input-container label,
.availTour md-input-container label,
.availPackages md-input-container label {
  color: var(--ct-gold) !important;
}
.availEngines md-input-container .md-input,
.productHotel md-input-container .md-input,
.productTour md-input-container .md-input,
.bookingPage md-input-container .md-input,
.availTour md-input-container .md-input,
.availPackages md-input-container .md-input,
.bookingPage md-input-container input {
  color: var(--ct-text) !important;
  border-color: var(--ct-gold) !important;
}
.availEngines md-input-container md-select .md-select-value,
.productTour md-input-container md-select .md-select-value,
.bookingPage md-input-container md-select .md-select-value {
  color: var(--ct-text) !important;
  border-bottom-color: var(--ct-gold) !important;
}

/* ============================================================
   5) DATEPICKER, SLIDER, TOOLBAR, MENÚS (popups del motor)
   ============================================================ */
.ui-datepicker {
  background-color: var(--ct-surface);
  color: var(--ct-text);
  border-color: var(--ct-gold);
}
.ui-datepicker th {
  color: var(--ct-gold);
}
.ui-datepicker td span,
.ui-datepicker td a {
  color: var(--ct-text);
}
.ui-datepicker .ui-datepicker-title select {
  color: var(--ct-text);
  background-color: var(--ct-surface-2);
}
.ui-datepicker .ui-state-hover {
  background-color: var(--ct-surface-2);
}
.ui-datepicker.travel-datepicker td > span,
.ui-datepicker.travel-datepicker td > a {
  background-color: var(--ct-surface-2);
  border-color: var(--ct-border-soft);
  color: var(--ct-text);
}
.ui-datepicker.travel-datepicker
  .ui-datepicker-unselectable.ui-state-disabled
  .ui-state-default {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--ct-text-muted);
}
.ui-datepicker.travel-datepicker
  .ui-datepicker-calendar
  td
  a[data-custom-price]::after,
.ui-datepicker.travel-datepicker .infoPrice {
  color: var(--ct-gold);
}
.ui-datepicker td a.ui-state-active {
  background-color: var(--ct-gold);
  color: #fff;
}

.ui-slider {
  background: rgba(255, 255, 255, 0.2);
}
.ui-slider .ui-slider-handle,
.ui-slider .ui-slider-range {
  background-color: var(--ct-gold);
}

md-toolbar:not(.md-menu-toolbar) {
  background-color: var(--ct-color-primary) !important;
  color: #fff;
}

/* ============================================================
   6) DETALLES VARIOS
   ============================================================ */
.bookingPage .progressBarContainer > div.step {
  background-color: var(--ct-surface-2) !important;
}
.bookingPage .progressBarContainer > div.step md-icon {
  background-color: var(--ct-surface) !important;
}
.notFoundContent h1,
.notFoundContent span {
  color: var(--ct-text) !important;
}
.clientMenu md-icon,
.agencyMenu md-icon {
  color: var(--ct-text-muted) !important;
}
.bookingPage .timeMessage {
  background-color: #12526f;
}
.panel-group .panel {
  background-color: var(--ct-surface-2);
}
/* ============================================================
   AJUSTES FINOS — formularios Material, autofill e itinerario
   ============================================================ */

/* ------------------------------------------------------------
   7) md-select: igualar al resto de inputs (subrayado dorado),
      no caja completa. Placeholder y flecha legibles.
   ------------------------------------------------------------ */
md-select .md-select-value,
md-input-container md-select .md-select-value {
  border: 0 !important;
  border-bottom: 1px solid var(--ct-gold) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--ct-text) !important;
}
md-select.md-default-theme:not([disabled]):focus .md-select-value,
md-select:not([disabled]):focus .md-select-value {
  border-bottom-color: var(--ct-gold) !important;
  color: var(--ct-text) !important;
}
/* Texto "País" cuando aún no hay selección */
md-select .md-select-value.md-select-placeholder,
md-select .md-select-value.md-select-placeholder > span {
  color: var(--ct-text-muted) !important;
}
/* Flecha del desplegable */
md-select .md-select-value .md-select-icon {
  color: var(--ct-gold) !important;
}
/* Panel de opciones al desplegar */
md-select-menu,
md-select-menu md-content,
.md-select-menu-container md-select-menu,
.md-select-menu-container md-content {
  background-color: var(--ct-surface) !important;
  color: var(--ct-text) !important;
}
md-select-menu md-option {
  color: var(--ct-text) !important;
}
md-select-menu md-option:not([disabled]):focus,
md-select-menu md-option.md-focused,
md-select-menu md-option[selected] {
  background-color: var(--ct-surface-2) !important;
  color: var(--ct-gold) !important;
}
.md-button.md-default-theme.md-primary.md-fab,
.md-button.md-primary.md-fab,
.md-button.md-default-theme.md-primary.md-raised,
.md-button.md-primary.md-raised {
  background-color: var(--ct-gold);
}
/* ------------------------------------------------------------
   8) Checkbox y radio: marca dorada, etiqueta clara
   ------------------------------------------------------------ */
md-checkbox:not(.md-checked) .md-icon,
md-checkbox.md-default-theme:not(.md-checked) .md-icon {
  border-color: var(--ct-gold) !important;
}
md-checkbox.md-checked .md-icon,
md-checkbox.md-default-theme.md-checked .md-icon {
  background-color: var(--ct-gold) !important;
  border-color: var(--ct-gold) !important;
}
md-checkbox.md-checked .md-icon:after {
  border-color: #0c0906 !important;
} /* el "tick" oscuro sobre dorado */
md-checkbox .md-label,
md-radio-button .md-label {
  color: var(--ct-text) !important;
}

md-radio-button:not(.md-checked) .md-off {
  border-color: var(--ct-gold) !important;
}
md-radio-button.md-checked .md-on {
  background-color: var(--ct-gold) !important;
}
md-radio-button.md-checked .md-off {
  border-color: var(--ct-gold) !important;
}

/* ------------------------------------------------------------
   9) AUTOFILL (Chrome/Safari/Firefox): mantener fondo oscuro
      y texto claro. El box-shadow interior tapa el azul del
      navegador; el text-fill-color fuerza el color del texto.
      NOTA: el color interior (--ct-bg) está pensado para
      formularios sobre fondo general. Si tu formulario va dentro
      de una tarjeta clara, cambia --ct-bg por --ct-surface aquí.
   ------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
  -webkit-text-fill-color: var(--ct-text) !important;
  caret-color: var(--ct-text) !important;
  border-bottom-color: var(--ct-gold) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
/* Firefox */
input:autofill,
textarea:autofill,
select:autofill {
  background-color: var(--ct-bg) !important;
  color: var(--ct-text) !important;
  box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
}

/* ------------------------------------------------------------
   10) Itinerario del tour: fila "contrast" (fondo claro fijo)
   ------------------------------------------------------------ */
.productTour .itineraryDescription .dayItinerary.contrast {
  background-color: var(--ct-surface-2) !important;
  border-left-color: var(--ct-gold) !important;
}
.productTour .itineraryDescription .dayItinerary .dayInformation {
  border-left-color: var(--ct-border-soft) !important;
}
.productTour
  .itineraryDescription
  .dayItinerary
  .dayInformation
  .itinerary-day {
  background-color: var(--ct-gold) !important;
  border-color: var(--ct-surface) !important;
}

/* ============================================================
   11) REFINAMIENTOS "NOBELFY" — cinemático, dorado, píldora
   ------------------------------------------------------------
   Capa puramente estética que se apoya en las variables y
   selectores ya definidos arriba. No añade ni elimina
   funcionalidad: solo ajusta radios, sombras, tipografía y
   la sensación general de "lujo discreto sobre negro cálido"
   observada en nobelfy.com (fondo casi negro con tinte cálido,
   viñetas/resplandor dorado sutil, botones en píldora,
   tarjetas redondeadas con sombra dorada y mayúsculas con
   letter-spacing en titulares y CTAs).
   ============================================================ */

/* 11a) Fondo general con viñeta cálida sutil (efecto "cinemático") */
body {
  background-image: radial-gradient(
      ellipse 900px 500px at 50% -10%,
      rgba(201, 162, 76, 0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 1200px 800px at 50% 110%,
      rgba(0, 0, 0, 0.6),
      transparent 70%
    );
  background-color: var(--ct-bg);
  background-attachment: fixed;
}

/* 11b) Titulares con más aire y peso — sensación editorial/lujo */
.title-section,
.block-seo .title h1,
.block-seo .title h2 {
  letter-spacing: 0.03em;
  font-weight: 600;
}
.title-section span,
.title-section.red {
  font-weight: 700;
}

/* 11c) Tarjetas y contenedores → esquinas redondeadas + resplandor dorado sutil */
.searchResume,
.hotelContainer,
.flightContainer,
.activityContainer,
.insuranceContainer,
.modalityContainer,
.ferryContainer,
.transferContainer,
.tourContainer,
.roomContainer,
.roomsContainer,
.galleryHotel,
.galleryActivity,
.galleryTour,
.hotelGeneralData,
.activityGeneralData,
.infoTour,
.boxContainer,
.boxFlight,
.formContainerBox,
.serviceContainer,
.priceContainer,
.contactUs,
.product-recommended .caption,
.product-recommended .image .box {
  border-radius: var(--ct-radius-card) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--ct-border-soft) !important;
}

/* 11d) Botones de acción principales → píldora dorada con resplandor al hover */
.md-button.moreInfo,
.md-button.price,
.md-button.viewTour,
.md-button.btnSearch,
.btnBooking,
.btnContinue,
.goBooking,
.tourBook,
.chooseService,
.modifiyService,
.btnPageOperation,
.btnGoToPay,
.btnLogin,
.md-button.md-primary.md-raised,
.md-button.md-default-theme.md-primary.md-raised {
  background-image: linear-gradient(
    180deg,
    var(--ct-gold-bright),
    var(--ct-gold)
  ) !important;
  border-radius: var(--ct-radius-pill) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border: none !important;
  box-shadow: 0 4px 14px var(--ct-gold-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-button.moreInfo:hover,
.md-button.price:hover,
.md-button.viewTour:hover,
.md-button.btnSearch:hover,
.btnBooking:hover,
.btnContinue:hover,
.goBooking:hover,
.tourBook:hover,
.chooseService:hover,
.modifiyService:hover,
.btnPageOperation:hover,
.btnGoToPay:hover,
.btnLogin:hover {
  box-shadow: 0 6px 20px var(--ct-gold-glow);
  transform: translateY(-1px);
}

/* 11e) Enlaces de acción secundarios → mayúsculas discretas, sin fondo */
.newSearch,
.moreOptions,
.showDetails,
.btnShowHotels,
.btnAddFlight {
  letter-spacing: 0.03em;
}

/* 11f) Inputs: resplandor dorado sutil al enfocar (además del subrayado) */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  box-shadow: 0 1px 0 0 var(--ct-gold), 0 0 8px 0 var(--ct-gold-soft);
}

/* 11g) Separadores y bordes generales → tinte cálido en vez de gris neutro */
hr,
.divider {
  border-color: var(--ct-border-soft);
}

#web-footer,
#web-footer *{color:var(--ct-gold) !important}