/* ============================================================
   Pure Senses × Odiss — look premium para Agent Genie
   Aplicado vía header_scripts. Skills: redesign + high-end + emil.
   Referencia: agentgenie-local/ODISS-DESIGN.md
   ============================================================ */

:root {
  --ps-gold: #C5A059;
  --ps-gold-dk: #9f8451;
  --ps-ink: #171412;
  --ps-ink-2: #1f1c19;
  --ps-cream: #faf7f2;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Rasgo Odiss: tracking uppercase en nav ---------- */
.main-nav a, nav.main-nav a, #menu-header_menu a, .menu-item a {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .8rem;
  transition: color 200ms var(--ease);
}

/* ---------- Títulos de sección: uppercase + adorno Odiss ---------- */
.section-title, .widget-title, .fl-heading-text {
  letter-spacing: .04em;
}

/* ---------- Iconos de contacto del header: visibles en TODA vista ----------
   (la pantalla de resultados del proveedor los pinta azul pálido) */
.topaddress a:not(.topbtn), .top-bar-right a:not(.topbtn) {
  color: var(--ps-ink) !important;
}
.topaddress .fa, .top-bar-right .fa,
.topaddress i, .top-bar-right i {
  color: var(--ps-gold-dk) !important;
  font-size: 1rem;
}
@media (hover:hover){
  .topaddress a:hover, .top-bar-right a:hover { color: var(--ps-gold-dk) !important; }
}

/* ---------- Botones del header (Weddings & Groups / WhatsApp Us) ----------
   son a.topbtn (los de ofertas son button.topbtn, no se ven afectados).
   El texto estaba tinta sobre fondo tinta = invisible. Odiss: texto blanco, hover oro. */
.top-bar-right a.topbtn, .topaddress a.topbtn, a.topbtn {
  color: #fff !important;
  background: var(--ps-ink) !important;
  border: 1px solid var(--ps-ink) !important;
  letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; font-weight: 500;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 120ms var(--ease);
}
a.topbtn i, a.topbtn .fa, a.topbtn span { color: var(--ps-gold) !important; }
@media (hover:hover){
  a.topbtn:hover { background: var(--ps-gold) !important; border-color: var(--ps-gold) !important; color: var(--ps-ink) !important; transform: translateY(-1px); }
  a.topbtn:hover i, a.topbtn:hover .fa, a.topbtn:hover span { color: var(--ps-ink) !important; }
}
a.topbtn:active { transform: scale(.97); }

/* ============================================================
   BUSCADOR (advanced-travel-search)
   ============================================================ */
/* Menú simplificado en TODO el sitio: solo Promotions y Book Now.
   (Home = primer li — el logo sigue llevando a la home; Destinations=911, About=7856, Contact=7857) */
ul[id^='menu-header_menu'] > li:first-child,
li.menu-item-911,
li.menu-item-7856,
li.menu-item-7857 { display: none !important; }

.cruiseform, .hotelform {
  background: #fff;
  border: 1px solid rgba(159,132,81,.18);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(23,20,18,.07);
  padding: 8px 6px;
}
.be-tabs-label {
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase; letter-spacing: .1em;
  color: #8a8177 !important;
  border: none !important; background: transparent !important;
  position: relative; transition: color 200ms var(--ease);
}
.be-tabs-label.be-tab-active { color: var(--ps-ink) !important; font-weight: 500; }
.be-tabs-label.be-tab-active::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px;
  height: 2px; background: var(--ps-gold);
}
@media (hover:hover){ .be-tabs-label:hover { color: var(--ps-gold-dk) !important; } }

.multiselect__tags {
  border: 1px solid #e4ddd2 !important; border-radius: 8px !important;
  min-height: 48px; padding-top: 12px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.multiselect:hover .multiselect__tags { border-color: var(--ps-gold) !important; }
.multiselect--active .multiselect__tags {
  border-color: var(--ps-gold) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,.15) !important;
}
.multiselect__placeholder, .multiselect__single {
  font-family: 'Montserrat', sans-serif !important; color: #6b6257 !important; font-size: .92rem;
}
.multiselect__select::before { border-color: var(--ps-gold-dk) transparent transparent !important; }
.multiselect__option--highlight, .multiselect__option--highlight::after { background: var(--ps-gold) !important; }
.multiselect__option--selected.multiselect__option--highlight { background: var(--ps-gold-dk) !important; }

/* Botón RESET: fantasma de marca */
a.reset.od-reset, .od-reset {
  background: transparent !important; color: #8a8177 !important;
  border: 1px solid #e4ddd2 !important; border-radius: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: .12em; text-transform: uppercase; font-size: .74rem;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 120ms var(--ease);
}
@media (hover:hover){ .od-reset:hover { color: var(--ps-ink) !important; border-color: var(--ps-gold) !important; } }
.od-reset:active { transform: scale(.97); }

/* Botón SEARCH: Odiss outline→fill, uppercase tracking */
button.od-btn.btn-search, .btn-search {
  background: var(--ps-ink) !important; color: #fff !important;
  border: none !important; border-radius: 4px !important;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease), transform 120ms var(--ease);
}
@media (hover:hover){ .btn-search:hover {
  background: var(--ps-gold) !important;
  box-shadow: 0 8px 24px rgba(197,160,89,.28); transform: translateY(-1px);
} }
.btn-search:active { transform: translateY(0) scale(.98); }

/* ============================================================
   OFERTAS (Promotions)
   ============================================================ */
.container.titlebar { border-bottom-color: rgba(159,132,81,.30) !important; }
.offer-price-box.custom-offer {
  border: none !important; background: var(--ps-ink) !important; border-radius: 4px !important;
  transition: background 200ms var(--ease), transform 120ms var(--ease), box-shadow 200ms var(--ease);
}
.offer-price-box a, .offer-price-box .topbtn, .offer a, .offer .topbtn {
  color: #fff !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; font-size: .74rem;
}
@media (hover:hover){ .offer-price-box.custom-offer:hover, .offer-price-box:hover {
  background: var(--ps-gold) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(197,160,89,.28);
} }
.offer-price-box:hover a, .offer-price-box:hover .topbtn { color: var(--ps-ink) !important; }
.offer-price-box:active { transform: scale(.98); }

/* ============================================================
   HOME — cards, EXPLORE, reveals (Odiss motion)
   ============================================================ */
.offer_item { overflow: hidden; border-radius: 6px; transition: transform 250ms var(--ease), box-shadow 250ms var(--ease); }
.offer_item img { transition: transform 500ms var(--ease); will-change: transform; }
@media (hover:hover){
  .offer_item:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(23,20,18,.14); }
  .offer_item:hover img { transform: scale(1.05); }
}
/* Botón EXPLORE: Odiss píldora outline→fill */
.overlay a {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid #fff !important; border-radius: 2px !important;
  letter-spacing: .18em; font-weight: 500; text-transform: uppercase; font-size: .74rem;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 120ms var(--ease);
}
@media (hover:hover){ .overlay a:hover { background: var(--ps-gold) !important; border-color: var(--ps-gold) !important; color: var(--ps-ink) !important; } }
.overlay a:active { transform: scale(.96); }

.bx-next, .bx-prev { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
@media (hover:hover){ .bx-next:hover, .bx-prev:hover { transform: scale(1.15); opacity: 1 !important; } }

/* Reveals al scroll (JS marca el body) */
body.ps-genie-reveal .offer_item { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
body.ps-genie-reveal .offer_item.ps-in { opacity: 1; transform: none; }
body.ps-genie-reveal .offer_item:nth-child(2).ps-in { transition-delay: 70ms; }
body.ps-genie-reveal .offer_item:nth-child(3).ps-in { transition-delay: 140ms; }

/* ---------- Accesibilidad ---------- */
.multiselect input:focus-visible, .btn-search:focus-visible, .od-reset:focus-visible,
.offer-price-box:focus-visible, .overlay a:focus-visible {
  outline: 2px solid var(--ps-gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { transition-duration: .01ms !important; }
  body.ps-genie-reveal .offer_item { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PANTALLA DE RESULTADOS del buscador (spec: RESULTS-SPEC.md)
   Selectores por patrón: si un nombre no coincide, la regla no
   aplica (cero riesgo). Afinar con el HTML real cuando lo haya.
   ============================================================ */

/* --- Barra de resumen de búsqueda (destino/fechas/Modify Search) --- */
[class*="od-"][class*="summary"], [class*="search-summary"],
[class*="od-"][class*="itinerary-bar"], [class*="modify-search-bar"] {
  background: var(--ps-ink) !important;
  color: #fff !important;
  border: none !important;
}
[class*="search-summary"] a, [class*="modify-search"] a,
[class*="search-summary"] button, [class*="modify-search"] button {
  color: var(--ps-gold) !important;
  letter-spacing: .06em;
}

/* --- Sidebar de filtros --- */
[class*="filter"][class*="header"], [class*="filter"][class*="title"],
[class*="od-filter"] > [class*="head"] {
  background: var(--ps-ink) !important;
  color: #fff !important;
}
[class*="od-"][class*="slider"] [class*="track"],
[class*="od-"][class*="range"] [class*="active"] { background: var(--ps-gold) !important; }

/* --- Botones del proveedor: primario y "Book Now" --- */
[class*="od-btn-primary"], [class*="od-book"], [class*="book-now"],
button[class*="od-btn"]:not(.od-reset), a[class*="od-btn"]:not(.od-reset) {
  background: var(--ps-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  min-height: 44px; /* touch target */
  transition: background 220ms var(--ease), box-shadow 220ms var(--ease), transform 120ms var(--ease);
}
@media (hover:hover){
  [class*="od-btn-primary"]:hover, [class*="od-book"]:hover, [class*="book-now"]:hover,
  button[class*="od-btn"]:not(.od-reset):hover, a[class*="od-btn"]:not(.od-reset):hover {
    background: var(--ps-gold) !important;
    color: var(--ps-ink) !important;   /* contraste AA: tinta sobre oro, nunca blanco */
    box-shadow: 0 8px 22px rgba(197,160,89,.28);
    transform: translateY(-1px);
  }
}
[class*="od-btn-primary"]:active, [class*="book-now"]:active { transform: scale(.98); }

/* --- Precios: tabular para que no salte el layout --- */
[class*="od-"][class*="price"], [class*="rate-amount"], [class*="total-price"] {
  font-variant-numeric: tabular-nums;
  color: var(--ps-ink) !important;
  font-weight: 600;
}

/* --- Nombre del hotel/producto: es el título, debe pesar --- */
[class*="od-"][class*="hotel-name"] a, [class*="product-name"] a,
[class*="od-"][class*="result"] h2 a, [class*="od-"][class*="result"] h3 a {
  color: var(--ps-ink) !important;
  font-family: 'Playfair Display', serif;
  transition: color 200ms var(--ease);
}
@media (hover:hover){
  [class*="od-"][class*="hotel-name"] a:hover, [class*="product-name"] a:hover { color: var(--ps-gold-dk) !important; }
}

/* --- Enlaces secundarios (Room/Board types, More prices) --- */
[class*="od-"][class*="result"] a[class*="link"],
[class*="room-board"], [class*="more-price"] { color: var(--ps-gold-dk) !important; }

/* --- Tarjeta de resultado: elevación sutil al hover --- */
[class*="od-"][class*="result-item"], [class*="hotel-card"], [class*="od-result-card"] {
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
@media (hover:hover){
  [class*="od-"][class*="result-item"]:hover, [class*="hotel-card"]:hover, [class*="od-result-card"]:hover {
    box-shadow: 0 14px 38px rgba(23,20,18,.10);
    transform: translateY(-2px);
  }
}

/* --- Focus visible en todo el flujo de reserva (accesibilidad) --- */
[class*="od-"] a:focus-visible, [class*="od-"] button:focus-visible,
[class*="od-"] input:focus-visible, [class*="od-"] select:focus-visible {
  outline: 2px solid var(--ps-gold) !important;
  outline-offset: 2px;
}

/* ============================================================
   REGLA CONSOLIDADA — todos los .topbtn del tema OA
   El tema deja varios con texto negro sobre fondo tinta (invisibles):
   MORE CRUISES / MORE TOURS (button.topbtn en .button_wrapper).
   Se unifican: tinta + texto blanco, hover oro con texto tinta.
   ============================================================ */
.topbtn, a.topbtn, button.topbtn,
.button_wrapper .topbtn, .button_wrapper a {
  color: #fff !important;
  background: var(--ps-ink) !important;
  border-color: var(--ps-ink) !important;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  transition: background 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease), transform 120ms var(--ease);
}
.topbtn i, .topbtn .fa { color: var(--ps-gold) !important; }
@media (hover:hover){
  .topbtn:hover, a.topbtn:hover, button.topbtn:hover,
  .button_wrapper a:hover .topbtn, .button_wrapper .topbtn:hover {
    background: var(--ps-gold) !important;
    border-color: var(--ps-gold) !important;
    color: var(--ps-ink) !important;   /* contraste AA sobre oro */
  }
  .topbtn:hover i, .topbtn:hover .fa { color: var(--ps-ink) !important; }
}
.topbtn:active, button.topbtn:active { transform: scale(.97); }

/* ============================================================
   ACCESIBILIDAD — correcciones medidas con ui-ux-pro-max (ago 2026)
   Auditoría a 375px sobre home/ofertas/buscador:
     · Menú y datos de contacto en gris #808080 → contraste 2.29:1
       y 2.51:1 (el mínimo WCAG AA es 4.5:1). Ilegibles al sol,
       justo donde el cliente decide reservar.
     · Objetivos táctiles de 16–38px (el mínimo es 44px).
   ============================================================ */

/* --- §1 Contraste: sustituir el gris del tema por tinta de marca --- */
#menu-header_menu a, .menu-item a, .main-nav a {
  color: var(--ps-ink) !important;
}
a[href^="tel"], a[href^="mailto"],
.topaddress a:not(.topbtn), .top-bar-right a:not(.topbtn) {
  color: var(--ps-ink) !important;
}
@media (hover: hover) {
  #menu-header_menu a:hover, .menu-item a:hover,
  a[href^="tel"]:hover, a[href^="mailto"]:hover { color: var(--ps-gold-dk) !important; }
}
/* Enlaces legales del pie: gris demasiado claro sobre fondo claro */
.footer a, .site-footer a { color: #4a443d !important; }

/* --- §2 Objetivos táctiles ≥44px (solo móvil/tablet, no altera el escritorio) --- */
@media (max-width: 900px) {
  #menu-header_menu a, .menu-item a,
  a[href^="tel"], a[href^="mailto"],
  a.topbtn, button.topbtn,
  .offer-price-box a, .button_wrapper a,
  .footer a, .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Aire entre objetivos contiguos (regla touch-spacing: 8px) */
  #menu-header_menu > li + li { margin-top: 4px; }
}

/* --- §1 Contraste del ORO como TEXTO (medido sobre blanco) ---------------
   El oro de marca #C5A059 sobre blanco da 2.4:1 y no cumple WCAG AA.
   Se usan dos tonos según el tamaño, como permite la norma:
     · Títulos grandes (≥24px) → #9f8451 = 3.35:1 (AA texto grande)
     · Texto pequeño en oro    → #7e6840 = 5.18:1 (AA en cualquier tamaño)
   El oro claro se mantiene donde es FONDO (ahí el contraste lo da la tinta). */
h1, h2:not(.entry-title), .titlebar h1, .section-title {
  color: #9f8451 !important;
}
h2.entry-title a, .entry-title a,
.travel_feed_results a, .travel_feed a,
.widget-title, .offer h3 a {
  color: #7e6840 !important;
}
/* Enlaces de texto en gris del tema (3.9:1) → gris tinta legible */
.travel_feed_results li a, .footer a, .site-footer a,
.copyright a, .footer-bottom a { color: #4a443d !important; }

/* --- §2 Objetivos táctiles que faltaban (titulares-enlace y pie) --- */
@media (max-width: 900px) {
  h2.entry-title a, .entry-title a,
  .travel_feed_results a, .travel_feed a,
  .copyright a, .footer-bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* El tema fija los titulares en oro claro con una regla de alta especificidad
   (h1:not(.fl-heading):not(.uabb-infobox-title) … !important). Se la gana
   añadiendo el ancestro, sin tocar los titulares de Beaver Builder. */
html body h1:not(.fl-heading):not(.uabb-infobox-title),
html body h2:not(.entry-title):not(.fl-heading):not(.uabb-infobox-title),
html body h3:not(.fl-heading):not(.uabb-infobox-title),
html body .widget-title, html body .travel_feed h2 {
  color: #9f8451 !important;   /* 3.35:1 — AA para texto grande */
}
/* Titulares-enlace de sección: también objetivo táctil en móvil */
@media (max-width: 900px) {
  html body h2 a, html body h3 a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- Últimos puntos de la auditoría: paginación, pie y aviso de cookies --- */
.pagination a, .pagination span, .page-numbers,
nav.pagination a, .nav-links a { color: #4a443d !important; }

html body .footer, html body .site-footer,
html body .copyright, html body .footer-bottom { color: #4a443d !important; }

/* Aviso de cookies (plugin): botón usable y texto legible */
#cookie-notice .cn-button, #cookie-notice a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#cookie-notice, #cookie-notice .cn-text-container { color: #f2efe9 !important; }

@media (max-width: 900px) {
  .pagination a, .page-numbers, .nav-links a {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}