/* =====================================================================
   CSS LIMPIO Y DEDUPLICADO
   - Se ha conservado el resultado visual que ya se aplicaba en producción
     (cuando había reglas duplicadas, se mantiene el valor que "ganaba"
     por orden de cascada).
   - 2 bugs corregidos, marcados con comentario [FIX].
   - Reglas muertas eliminadas (nunca se aplicaban a ningún HTML actual),
     marcadas en el resumen que te doy en el chat.
   ===================================================================== */

/* ==========================
   RESET GLOBAL / WORDPRESS
========================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  font-family: Arial, sans-serif;
  background: #fff;
}

.site,
#page,
.site-main,
.site-content,
.content-area,
.entry-content,
.entry-content-wrap,
.wp-site-blocks,
.elementor-section-wrap,
.elementor-top-section,
main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body > * {
  margin: 0 !important;
}

.wp-site-blocks > * {
  margin-top: 0 !important;
}

body::before {
  display: none !important;
}

#wpadminbar {
  display: none !important;
}

.entry-title,
.page-title,
h1.entry-title,
.page-header,
.entry-header,
.site-header,
.breadcrumbs {
  display: none !important;
}

body {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.site-footer {
  display: none !important;
}

/* Botón flotante "volver arriba" del tema (Astra): en móvil queda fijo
   sobre el botón "+" de los tickets y sobre "Complete your booking".
   Se quita en todas las páginas. */
#ast-scroll-top {
  display: none !important;
}

/* ==========================
   FULL WIDTH SECTIONS
   (barras que deben ocupar todo el ancho del viewport,
   independientemente del contenedor de WordPress)
========================== */

.top-bar,
.louvre-header,
.hero-section,
.cta-bar {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
}

/* ==========================
   TOP BAR
========================== */

.top-bar {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  /* El contenedor de Elementor que envuelve este bloque (.e-con-inner)
     añade 10px de padding-top por defecto, dejando un filo blanco encima
     del aviso en todas las páginas. Se compensa aquí, no tocando la clase
     genérica de Elementor (la usan otros contenedores del sitio). */
  margin-top: -10px;
}

/* ==========================
   GRID CARDS (listado de productos, main.html)
========================== */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 10px;
}

.price {
  font-weight: bold;
  color: #00aa6c;
}

/* ==========================
   HEADER
========================== */

.louvre-header {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px 40px;
  position: relative;
}

.lang-switch {
  position: relative;
}

.lang-switch summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  color: #0a0a0a;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.15s ease;
}

.lang-switch summary:hover {
  background: #ececec;
}

.lang-switch summary::-webkit-details-marker {
  display: none;
}

.lang-switch summary::after {
  content: "▾";
  font-size: 10px;
  color: #888;
  margin-left: 2px;
}

.lang-switch[open] summary::after {
  content: "▴";
}

.lang-switch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  min-width: 190px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.lang-switch-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0a0a0a;
  text-decoration: none;
  padding: 11px 14px;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 8px;
}

.lang-switch-menu a:hover {
  background: #f2f2f2;
}

.lang-switch-flag {
  font-size: 16px;
  line-height: 1;
}

.header-brand {
  display: flex;
  align-items: center;
}

.header-brand img {
  height: 46px;
  width: auto;
  display: block;
}

/* ==========================
   NAV
========================== */

.nav-bar {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.nav-menu a {
  text-decoration: none !important;
  color: #0a0a0a;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.nav-menu a:visited,
.nav-menu a:active {
  color: #0a0a0a;
  text-decoration: none !important;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 1px;
  background: #0a0a0a;
  transition: 0.3s;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* ==========================
   HERO (louvre-tickets.html)
========================== */

.hero-section {
  position: relative;
  height: 60vh;
  /* En móvil horizontal la altura de la pantalla es pequeña, así que el
     60vh se queda muy corto y las tarjetas (que no encogen con la altura)
     terminan sobresaliendo por arriba del hero, encima del menú. Este
     mínimo asegura que siempre quepan. */
  min-height: 300px;
  background-image: url('https://enjoyourtour.com/assets/images/paris/hero-section.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hero-overlay {
  background: linear-gradient(
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.05)
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  max-width: 700px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  margin-top: 0px;
}

.hero-content h1 {
  /* [FIX] Antes existía una regla previa "font-size:0px" para este mismo
     selector que dejaba el titular invisible. Solo no se notaba porque
     esta regla posterior la pisaba por orden de cascada: era una bomba
     de relojería que desaparecería en cuanto alguien reordenase el CSS.
     Eliminada la regla de font-size:0, esta es ahora la única. */
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 15px;
  font-family: "Playfair Display", serif;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.hero-content p {
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 22px;
  font-family: "Playfair Display", serif;
  color: black;
  font-weight: 600;
}

.hero-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  font-size: 12px;
  text-decoration: none;
}

.btn-primary {
  background: #fff;
  color: #000;
}

.btn-secondary {
  border: 1px solid #fff;
  color: #fff;
}

/* ==========================
   HERO PEQUEÑO (checkout.html / success.html)
========================== */

.hero {
  height: 130px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6)),
    url("https://enjoyourtour.com/assets/images/paris/hero-small.jpg");
  background-size: cover;
  background-position: center 21%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================
   TARJETAS DE TICKET SOBRE EL HERO
========================== */

/* PANEL DE CONTROL de las tarjetas: posición y tamaño.
   POSICIÓN:
   - "left"/"right": desplazamiento horizontal. Usa SOLO una de las dos
     (si pones las dos a la vez, el navegador prioriza "left" e ignora "right").
   - "top"/"bottom": desplazamiento vertical. Igual que arriba, usa solo una.
   - "gap": separación entre las dos tarjetas.
   TAMAÑO:
   - "--card-width": anchura de cada tarjeta (afecta a la tarjeta entera).
   - "--card-photo-height": altura de la foto de cada tarjeta. Es lo que
     controla la altura TOTAL de la tarjeta, porque el resto del contenido
     (título, precio, botones) siempre ocupa lo mismo y se ajusta solo debajo. */
.hero-ticket-cards {
  position: absolute;
  bottom: 20px;
  left: 800px;
  z-index: 2;
  display: flex;
  align-items: center;

  /* La forma es un triángulo isósceles más ancho que alto (como la
     pirámide real, de perfil poco pronunciado) - así hay más ancho
     útil disponible cerca de la base, donde va el texto, sin que el
     clip-path lo recorte por los lados. */
  --pyramid-width: 230px;
  --pyramid-height: 210px;
  --pyramid-border: 3px;

  /* Cuánto se "montan" las dos pirámides una sobre la otra. 0px = solo
     tocan sus vértices centrales; valores positivos las hacen solapar
     más (la base de la invertida se mete por encima de la base de la
     normal). Como es un solape, no un hueco, no puede usarse "gap"
     (no admite negativos) - por eso es un margen en la segunda. */
  --pyramid-overlap: 100px;
}

.hero-ticket-card,
.hero-ticket-card:link,
.hero-ticket-card:visited,
.hero-ticket-card:hover,
.hero-ticket-card:focus,
.hero-ticket-card:active {
  /* El tema (Astra) subraya los enlaces por defecto y gana por
     especificidad/orden a nuestra regla si no forzamos !important aquí. */
  text-decoration: none !important;
}

/* Pirámide: dos capas apiladas con el mismo clip-path (triángulo) -
   la de fuera es negra y hace de "borde", la de dentro va encogida
   --pyramid-border px hacia el centro y lleva la foto + overlay oscuro.
   Este truco de doble clip-path da un borde limpio y uniforme en
   cualquier ángulo, cosa que un `border` normal no consigue bien
   sobre una forma no rectangular. */
.hero-ticket-card {
  position: relative;
  display: block;
  width: var(--pyramid-width);
  height: var(--pyramid-height);
  background: #000;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.hero-ticket-card.hero-pyramid-down {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  margin-left: calc(-1 * var(--pyramid-overlap));
  /* Por encima de la primera pirámide en la zona donde se solapan,
     para que se vea como si su base "montara" sobre el filo de la otra. */
  z-index: 1;
}

.hero-ticket-card:hover {
  transform: translateY(-4px);
}

.hero-ticket-card-inner {
  position: absolute;
  inset: var(--pyramid-border);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 50px 14px;
}

/* Oscurece la foto para que el texto blanco resalte, igual que en los
   círculos de referencia. Va dentro de .hero-ticket-card-inner, que ya
   tiene su propio clip-path, así que este overlay queda recortado al
   mismo triángulo automáticamente sin repetir el polygon aquí. */
.hero-ticket-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  z-index: 0;
}

.hero-ticket-card-inner > * {
  position: relative;
  z-index: 1;
}

.hero-pyramid-down .hero-ticket-card-inner {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  justify-content: flex-start;
  padding: 14px 50px 0;
}

.hero-ticket-card-title {
  font-size: 12.5px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.hero-ticket-card-price {
  font-size: 10.5px;
  color: #eee;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.hero-ticket-card-price-value {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ==========================
   CTA BAR
========================== */

.cta-bar {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 18px;
  cursor: pointer;
}

/* ==========================
   BOOKING WRAPPER / LAYOUT
========================== */

.booking-wrapper {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}

.booking-layout {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* .booking-row contiene SOLO el calendario (izquierda) y contact
   details/checkout (derecha) — es su propio grid de una única fila, para
   que el "sticky" de la derecha tenga un límite inequívoco (su propia
   fila) y no se solape con .tour-info, que ahora vive fuera de este
   grid, como bloque normal a ancho completo debajo. */
@media (min-width: 900px) {
  .booking-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
    align-items: start;
  }

  .booking-right {
    position: sticky;
    top: 20px;
    align-self: start;
  }
}

.booking-layout,
.booking-row,
.booking-left,
.booking-right {
  overflow: visible !important;
}

/* ==========================
   TOUR INFO (debajo del botón de compra en escritorio,
   al final de la página en móvil)
========================== */

.tour-info {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.5;
  margin-top: 30px;
  max-width: 760px;
}

@media (min-width: 900px) {
  .tour-info {
    margin-left: auto;
    margin-right: auto;
  }
}

.tour-info h3 {
  font-size: 16px;
  font-weight: bold;
  color: #111;
  margin: 22px 0 8px;
}

.tour-info h3:first-child {
  margin-top: 0;
}

.tour-info p {
  font-size: 14px;
  margin: 0 0 8px;
}

.tour-info ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.tour-info li {
  font-size: 14px;
  margin-bottom: 4px;
}

.tour-info blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  border-left: 3px solid #c9a961;
  font-style: italic;
  color: #555;
}

.section-title {
  margin: 15px 0 8px;
  font-size: 16px;
}

/* ==========================
   TICKET CARDS (audio / cruise)
========================== */

.ticket-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: 0.25s;
}

.ticket-card:hover {
  border-color: #000;
}

.ticket-card input {
  display: none;
}

.ticket-card.active {
  border: 2px solid #000;
}

.card-desc {
  color: #b08d57;
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
}

/* ==========================
   CALENDARIO
========================== */

.calendar-header {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  margin: 10px 0 15px;
}

#monthLabel {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #1e2a4a;
}

.calendar-header button {
  background: none;
  border: none;
  color: #1e2a4a;
  font-size: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: 0.2s ease;
}

.calendar-header button:hover {
  background: #eef0f4;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px 8px;
  margin-top: 18px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px 8px;
  margin-top: 16px;
  text-align: center;
}

.weekdays span {
  font-size: 12px;
  font-weight: 600;
  color: #9aa3b2;
  text-transform: lowercase;
}

.day {
  height: 60px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: none;
  cursor: pointer;
  transition: 0.2s ease;
}

.day:hover {
  transform: translateY(-2px);
}

.day-inner {
  width: 46px;
  max-width: 100%;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1.5px solid transparent;
  transition: 0.2s ease;
}

.day-number {
  font-size: 15px;
  font-weight: 500;
  color: #1e2a4a;
}

.availability-dot {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  margin-top: 5px;
  background: linear-gradient(to right, var(--avail-color, #5ec49a) 0%, var(--avail-color, #5ec49a) var(--avail, 80%), #e3e7ed var(--avail, 80%), #e3e7ed 100%);
}

.day.selected .day-inner {
  border-color: #1e2a4a;
}

.day.past {
  font-size: 15px;
  font-weight: 500;
  color: #c3c8d1;
  cursor: not-allowed;
}

.day.past:hover {
  transform: none;
}

.time-slots button {
  margin: 5px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: white;
  transition: 0.2s;
}

.time-slots button:hover {
  transform: scale(1.05);
}

.time-slots button.selected {
  background: black;
  color: white;
}

.time-dropdown {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  margin-top: 5px;
}

/* ==========================
   BOOKING DETAILS / IDIOMAS
========================== */

.booking-section {
  margin-top: 12px;
}

.languages-list {
  font-size: 13px;
  color: #555;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================
   TICKETS (filas de cantidad)
========================== */

.tickets-wrapper {
  margin-top: 48px;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
}

.ticket-name {
  font-size: 14px;
}

.ticket-price {
  font-size: 13px;
  color: #666;
}

.tickets-wrapper .qty {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid #ccc;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.tickets-wrapper .qty button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tickets-wrapper .qty button:hover {
  background: #f0f0f0 !important;
}

.tickets-wrapper .qty button:active {
  background: #e5e5e5 !important;
}

.tickets-wrapper .qty span {
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hidden-internal {
  display: none;
}

.eee-note {
  font-size: 11px;
  color: #777;
  margin-top: 8px;
  line-height: 1.4;
}

/* ==========================
   CONTACT DETAILS / FLOATING LABELS
========================== */

.contact-details {
  margin-top: 0px;
}

.contact-details h3 {
  margin-bottom: 25px;
}

.floating-field {
  position: relative;
  margin-bottom: 22px;
}

.floating-field input,
.floating-field select {
  width: 100%;
  height: 56px;
  padding: 16px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  font-size: 16px;
  outline: none;
  transition: 0.2s ease;
}

.floating-field input:focus,
.floating-field select:focus {
  border-color: #000;
}

.floating-field label {
  position: absolute;
  left: 12px;
  top: 16px;
  color: #777;
  font-size: 14px;
  pointer-events: none;
  background: white;
  padding: 0 4px;
  transition: 0.2s ease;
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  color: #000;
}

.valid-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: green;
  opacity: 0;
  transition: 0.2s;
}

.input-valid {
  border: 1px solid green;
}

.input-valid ~ .valid-icon {
  opacity: 1;
}

.input-error {
  border: 1px solid #d8000c !important;
}

.error-msg {
  font-size: 12px;
  color: #d8000c;
  margin-top: 4px;
  display: none;
}

/* [FIX] Se eliminaron las reglas input:valid / input:invalid nativas:
   un campo vacío sin "required" se considera :valid por defecto en HTML5,
   así que pintaban el borde en verde desde que cargaba la página, antes
   de que el usuario escribiera nada. La validación real ya la gestiona
   el JS con las clases .input-valid / .input-error, que solo se aplican
   después de que el usuario haya tocado el campo. */

/* ==========================
   TELÉFONO
========================== */

.phone-group {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: 22px;
}

.prefix-field {
  width: 90px;
}

.prefix-field select {
  width: 100%;
  height: 56px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  padding: 0 12px;
  font-size: 15px;
}

.phone-field {
  flex: 1;
}

/* ==========================
   RESUMEN DE PEDIDO (checkout)
========================== */

.checkout-box {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.total-line {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.pay-button,
.pay-btn {
  width: 100%;
  padding: 14px;
  background-color: #b38b59;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.pay-button:hover,
.pay-btn:hover {
  opacity: 0.9;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 14px;
}

.summary-row span:first-child {
  font-weight: 600;
  color: #333;
}

.summary-row span:last-child {
  color: #666;
}

.summary-row.title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.summary-row.total {
  font-size: 16px;
  font-weight: 700;
}

.summary-subtitle {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

#checkoutBtn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: not-allowed;
  background: #ccc;
  color: #666;
  transition: all 0.3s ease;
}

#checkoutBtn.active {
  background: #111;
  color: white;
  cursor: pointer;
}

/* ==========================
   PESTAÑAS DE ASISTENTES (checkout)
========================== */

#attendeesTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #f5f7fa;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tab-btn:hover {
  background: #e9edf2;
  border-color: #d0d5db;
}

.tab-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tab-btn.complete {
  background: #eefaf2;
  color: #1f7a4d;
  border-color: #bfe6cf;
}

.tab-btn.complete:hover {
  background: #e3f7eb;
}

.tab-btn.active.complete {
  background: #2ecc71;
  color: white;
  border-color: #2ecc71;
}

.tab-btn.complete::after {
  content: "✓";
  margin-left: 6px;
  font-size: 12px;
  font-weight: bold;
}

/* ==========================
   PÁGINAS LEGALES
========================== */

.legal-footer {
  width: 100%;
  padding: 20px 10px;
  text-align: center;
  font-size: 13px;
  color: #777;
  background-color: #f9f9f9;
}

.legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.legal-links a {
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: #000;
  text-decoration: underline;
}

.legal-links span {
  color: #bbb;
}

.legal-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.legal-container h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

.legal-container h2 {
  margin-top: 30px;
  font-size: 22px;
}

.legal-container ul {
  margin-left: 20px;
}

/* ==========================
   FAQ (faq.html)
========================== */

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.faq-intro {
  color: #444;
  line-height: 1.6;
  margin-bottom: 30px;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: #888;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  padding: 0 0 20px;
  margin: 0;
  color: #444;
  line-height: 1.6;
}

/* ==========================
   PÁGINA DE ÉXITO (success.html)
========================== */

.success-box {
  max-width: 600px;
  margin: 60px auto;
  text-align: center;
  padding: 20px;
}

.success-text {
  font-size: 16px;
  margin: 10px 0;
  color: #333;
}

.success-email {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0;
  color: #000;
}

.success-note {
  font-size: 14px;
  color: #777;
}

/* ==========================
   PIE DE PÁGINA "SOMOS INTERMEDIARIOS"
   (inyectado vía wp_footer, ver functions.php — va encima del
   .site-legal-footer, sin sustituirlo)
========================== */

.site-intermediary-footer {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  background: #000;
  padding: 48px 20px 32px;
  text-align: center;
}

.site-intermediary-footer img {
  height: 100px;
  width: auto;
  margin-bottom: 24px;
}

.site-intermediary-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 24px;
}

.site-intermediary-contact a {
  color: #fff;
  text-decoration: underline;
}

.site-intermediary-contact a:hover {
  color: #ccc;
}

.site-intermediary-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  color: #aaa;
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================
   PIE DE PÁGINA LEGAL
   (inyectado vía wp_footer, ver functions.php)
========================== */

.site-legal-footer {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  background: #000;
  padding: 18px 20px;
  text-align: center;
}

.site-legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 8px;
}

.site-legal-footer-links a {
  color: #ccc;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.site-legal-footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-legal-footer-copy {
  color: #777;
  font-size: 10px;
  margin: 0;
  line-height: 1.5;
}

/* ==========================
   BANNER DE COOKIES
   (inyectado vía wp_footer, ver functions.php)
========================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #111;
  padding: 14px 20px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

.cookie-banner-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.cookie-banner-text {
  margin: 0;
  font-size: 12px;
  color: #ccc;
  flex: 1 1 260px;
  text-align: center;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid #555;
  background: transparent;
  color: #eee;
  transition: all 0.2s ease;
}

.cookie-btn-ghost:hover {
  border-color: #fff;
  color: #fff;
}

.cookie-btn-solid {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.cookie-btn-solid:hover {
  opacity: 0.85;
}

.cookie-settings-panel {
  max-width: 900px;
  margin: 14px auto 0;
  padding-top: 14px;
  border-top: 1px solid #333;
}

.cookie-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cookie-settings-label strong {
  display: block;
  font-size: 13px;
  color: #fff;
}

.cookie-settings-label span {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

.cookie-settings-more {
  margin: 0 0 14px;
  font-size: 11px;
}

.cookie-settings-more a {
  color: #ccc;
  text-decoration: underline;
}

.cookie-settings-more a:hover {
  color: #fff;
}

.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: #555;
  border-radius: 22px;
  transition: 0.2s;
  cursor: pointer;
}

.cookie-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  background: #4caf50;
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(18px);
}

/* ==========================
   RESPONSIVE
========================== */

/* Igual que el bloque de abajo, pero hasta 1024px en vez de 768px: un
   móvil en horizontal puede llegar a pesar ~930px de ancho (más que el
   punto de corte de "móvil" de 768px), así que sin este bloque intermedio
   las tarjetas usaban el "left: 800px" de escritorio y se salían por la
   derecha de la pantalla. */
@media (max-width: 1024px) {
  .hero-ticket-cards {
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);

    --pyramid-width: 175px;
    --pyramid-height: 155px;
    --pyramid-border: 2px;
    --pyramid-overlap: 75px;
  }

  .hero-ticket-card-inner {
    padding-left: 38px;
    padding-right: 38px;
  }

  .hero-pyramid-up .hero-ticket-card-inner {
    padding-bottom: 9px;
  }

  .hero-pyramid-down .hero-ticket-card-inner {
    padding-top: 9px;
  }

  .hero-ticket-card-title {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .hero-ticket-card-price {
    font-size: 8.5px;
  }

  .hero-ticket-card-price-value {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    gap: 12px 18px;
  }

  .hero-content h1 {
    font-size: 30px;
  }

  .checkout-container {
    flex-direction: column;
  }

  /* Cabecera: logo, menú y selector de idioma van en fila en escritorio.
     En pantallas estrechas no caben los 4 enlaces del menú junto al logo
     y al selector, así que el menú baja a su propia línea completa. */
  .louvre-header {
    padding: 14px 16px;
    row-gap: 10px;
  }

  .header-brand img {
    height: 30px;
  }

  .nav-bar {
    order: 3;
    flex-basis: 100%;
  }

  .lang-switch summary {
    padding: 6px 10px;
    font-size: 12px;
    gap: 5px;
  }

  .lang-switch-menu {
    min-width: 160px;
  }

  /* Carrusel de Explore: en escritorio es mitad foto / mitad texto en
     fila. En vertical, con las dos mitades en fila, la altura repartida
     entre las dos dejaba la foto casi sin ver. Aquí pasa a apilarse:
     foto arriba con su propia altura fija, texto debajo. */
  .route-carousel-frame {
    flex-direction: column;
    min-height: auto;
  }

  .route-carousel-photo {
    flex: 0 0 220px;
    width: 100%;
    min-width: 100%;
  }

  .route-carousel-text {
    flex: 1 1 auto;
    padding: 28px 24px;
  }
}

/* ==========================
   VISIT / EXPLORE — cabecera editorial
========================== */

.nav-menu a.nav-active {
  border-bottom: 1px solid #fff;
  padding-bottom: 4px;
}

.editorial-hero {
  max-width: 760px;
  margin: 56px auto 40px;
  padding: 0 20px;
  text-align: center;
}

.editorial-hero h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #111;
}

.editorial-hero p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ==========================
   VISIT — cuadrícula de artículos
========================== */

.article-grid {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .article-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.article-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.article-image::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: inherit;
  transition: transform 0.6s ease;
}

.article-card:hover .article-image::before {
  transform: scale(1.12);
}

.article-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 1;
}

.article-body {
  padding: 22px;
}

.article-body h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.35;
  color: #111;
}

.article-body p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 14px;
}

.article-link {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

/* ==========================
   VISIT / EXPLORE — cabecera de sección in-page
========================== */

.section-heading {
  max-width: 760px;
  margin: 70px auto 36px;
  padding: 0 20px;
  text-align: center;
}

.section-heading h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #111;
}

.section-heading p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ==========================
   ARTÍCULO — página completa (History/Tips)
========================== */

.article-page-hero {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  height: 340px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.article-page-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 20px 90px;
}

.article-page-body h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 26px;
  color: #111;
}

.article-page-body h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 34px 0 12px;
  color: #111;
}

.article-page-body p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  margin: 0 0 20px;
}

/* ==========================
   EXPLORE — carrusel de la ruta Masterpiece
========================== */

.route-carousel {
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

.route-carousel-frame {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #0c0c0c;
  border-radius: 16px;
  overflow: hidden;
  min-height: 560px;
}

.route-carousel-photo {
  flex: 1 1 50%;
  min-width: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: opacity 0.4s ease;
}

.route-carousel-photo-number {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-carousel-text {
  flex: 1 1 50%;
  min-width: 280px;
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.route-carousel-text .route-carousel-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b08d57;
  margin-bottom: 14px;
  font-weight: 700;
}

.route-carousel-text h3 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.3;
}

.route-carousel-text p {
  font-size: 15px;
  line-height: 1.7;
  color: #ccc;
  margin: 0;
}

.route-carousel-text.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

.route-carousel-photo.is-fading {
  opacity: 0;
}

.route-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.route-carousel-btn {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  font-size: 18px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  cursor: pointer;
  transition: 0.2s ease;
}

.route-carousel-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

.route-carousel-counter {
  font-size: 13px;
  color: #777;
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ==========================
   BRAND HOME / CITY HUB (enjoyourtour.com)
========================== */

.brand-hero {
  background: #0a0a0a;
  color: #fff;
  text-align: center;
  padding: 90px 20px;
}

.brand-hero-city {
  background-size: cover;
  background-position: center;
  position: relative;
}

.brand-hero-city::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.brand-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.brand-hero h1 {
  font-size: 34px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.brand-hero p {
  font-size: 16px;
  color: #ddd;
}

.site-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.site-section-title {
  font-size: 26px;
  text-align: center;
  margin-bottom: 10px;
}

.site-section-intro {
  text-align: center;
  color: #666;
  max-width: 600px;
  margin: 0 auto 36px;
}

.site-section-intro a {
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: underline;
}

.site-section-intro a:hover {
  color: #555;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.dest-card,
.product-card {
  display: block;
  text-decoration: none !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}

.dest-card:hover,
.product-card:hover {
  transform: translateY(-4px);
}

.dest-card-inner,
.product-card-inner {
  height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  position: relative;
}

.dest-card-inner::before,
.product-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}

.dest-card-title,
.product-card-title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.product-card-price {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 13px;
  margin-top: 6px;
}

.product-card-price-value {
  font-weight: 700;
}

.dest-card-soon {
  cursor: default;
  filter: grayscale(0.4);
}

.dest-card-soon-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: #fff;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
}

@media (max-width: 768px) {
  .brand-hero {
    padding: 60px 20px;
  }

  .brand-hero h1 {
    font-size: 26px;
  }

  .site-section {
    padding: 40px 20px;
  }
}

/* ==========================
   HEADER (simplified — no primary nav, secondary links + lang switch grouped right)
========================== */

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-menu-secondary a {
  text-decoration: none !important;
  color: #0a0a0a;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-right: 24px;
}

.nav-menu-secondary a:last-child {
  margin-right: 0;
}

.nav-menu-secondary a:hover {
  color: #555;
}

/* ==========================
   BREADCRUMB
========================== */

.breadcrumb-bar {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  padding: 12px 40px;
  font-size: 13px;
  color: #666;
}

.breadcrumb-bar a {
  color: #666;
  text-decoration: none !important;
}

.breadcrumb-bar a:hover {
  color: #0a0a0a;
  text-decoration: underline !important;
}

.breadcrumb-bar .breadcrumb-current {
  color: #0a0a0a;
  font-weight: 600;
}

.breadcrumb-sep {
  margin: 0 8px;
  color: #ccc;
}

/* ==========================
   HERO SEARCH (home page)
========================== */

.hero-search {
  display: flex;
  max-width: 560px;
  margin: 28px auto 0;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.hero-search input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 18px;
  font-size: 15px;
  color: #0a0a0a;
}

.hero-search button {
  border: none;
  background: #0a0a0a;
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hero-search button:hover {
  background: #333;
}

/* ==========================
   TRUST BADGES (home page, below hero)
========================== */

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 22px 20px;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #333;
}

.trust-badge-icon {
  font-size: 18px;
}

@media (max-width: 768px) {
  .header-right {
    gap: 12px;
  }

  .nav-menu-secondary {
    display: none;
  }

  .breadcrumb-bar {
    padding: 10px 16px;
    font-size: 12px;
  }

  .hero-search {
    flex-direction: column;
    border-radius: 16px;
    background: #fff;
    padding: 8px;
  }

  .hero-search button {
    margin-top: 6px;
  }

  .trust-badges {
    gap: 16px;
  }
}