/* ============================================================
   CANCUN YACHT RENTAL — "Eslora Nocturna" (propuesta A, 2026-10-16)
   Se carga DESPUÉS de app.css: misma marca (Michroma + Hanken, esquinas rectas,
   logo Línea de flotación) en versión oscura. Grafito de fondo, petróleo claro
   #3FA7A2 como único acento (versión "reverse" del logo).
   ============================================================ */

:root {
  --bg:       #161C21;   /* grafito */
  --surf:     #1C242A;   /* superficie */
  --surf-2:   #232D34;
  --surf-3:   #2C363D;
  --ink:      #0F1418;   /* bloques más profundos: pie, cotizador */
  --ink-2:    #161C21;
  --steel:    #46525B;
  --line:     rgba(238,241,243,.10);
  --line-2:   rgba(238,241,243,.22);
  --tx:       #EEF1F3;   /* niebla */
  --tx-2:     #C9D2D8;
  --mute:     #9AA6AE;
  --sun:      #3FA7A2;   /* petróleo claro */
  --sun-2:    #5CBDB8;
  --sun-ink:  #0B1215;   /* texto sobre botón petróleo */
  --sun-soft: rgba(63,167,162,.14);
  --on-dark:  #F4F6F8;
  --on-dark-2:#C9D2D8;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 18px 44px -18px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}
body { background: var(--bg); color: var(--tx); }

/* Menú fijo: grafito translúcido al bajar (sobre el hero sigue transparente) */
.nav { background: rgba(22,28,33,.94); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }
.nav .wl-logo .wl-sub,
.footer__brand-name .wl-logo .wl-sub { fill: #3FA7A2; }
@media (max-width: 960px) {
  body.has-hero .nav:not(.scrolled) .nav__cta { background: var(--sun) !important; color: var(--sun-ink) !important; }
}

/* Controles con fondo de texto: en oscuro el "activo" va en niebla con texto grafito */
.seg [aria-pressed="true"], .seg [aria-current="page"], .seg .is-active,
.scroller__btn:hover,
.btn--outline:hover { background: var(--tx); color: var(--bg); }
.chip.is-active, .chip.active { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
.social-icon:hover { color: var(--bg); }

/* Formularios */
input, select, textarea { color: var(--tx); }
input::placeholder, textarea::placeholder { color: var(--mute); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Cabeceras de página sin foto: grafito con una línea de flotación al pie */
.page-hero { background: var(--surf); }
.page-hero:not(.has-image):not(.page-hero--image)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sun) 20%, var(--sun) 80%, transparent);
  opacity: .6;
}

/* Hero: etiqueta superior "16 yates privados · Cancún" */
html .hero__eyebrow { display: block; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sun); }

/* Regla de eslora (propuesta A): el protagonista de la portada */
html .eslora { background: var(--bg); border-bottom: 1px solid var(--line); }
html .eslora__axis, html .eslora__tick { background: var(--mute); }
html .eslora__tick--minor { background: var(--steel); }
html .eslora__mk i { border-color: var(--tx-2); background: var(--bg); }
html .eslora__mk:hover i, html .eslora__mk:focus-visible i { background: var(--steel); }
html .eslora__mk[aria-selected="true"] i { background: var(--sun); border-color: var(--sun); }
html .eslora__mk::after { background: var(--tx); color: var(--bg); }
html .eslora__pick { background: var(--surf); border: 1px solid var(--line); padding: 28px; border-top: 1px solid var(--line); }
html .eslora__pick img { background: var(--surf-2); }
html .eslora__slider { display: block; width: 100%; margin: 26px 0 0; accent-color: var(--sun); cursor: pointer; }
html .eslora__slider-l { display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: var(--mute); font-variant-numeric: tabular-nums; }

/* Franja "qué incluye" bajo la regla */
html .incluye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 44px 0 8px; margin-top: 44px; border-top: 1px solid var(--line); }
html .incluye h3 { font-family: var(--font-display); font-weight: 400; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); margin: 0 0 8px; }
html .incluye p { margin: 0; color: var(--mute); font-size: .95rem; max-width: 34ch; }
@media (max-width: 760px) { .incluye { grid-template-columns: 1fr; gap: 22px; } }

/* Yate insignia + lista */
html .pair { background: var(--bg); }
html .trow { border-color: var(--line); }
html .trow:hover { background: var(--surf); }

/* Tarjetas y bloques claros heredados */
.fleet-card, .card, .mini-quote, .quote-card, .sidebar-card, .vessel-card, .transport-card,
.testimonial-card, .success-box, .inc-box, .exc-box { border-color: var(--line); }
.fleet-card:hover { border-color: var(--line-2); }
.transport-table th { background: var(--surf-2); color: var(--tx); }
.transport-table td { border-color: var(--line); }

/* Preguntas frecuentes y textos del gestor de páginas */
.page-manager-body, .faq-answer { color: var(--tx-2); }
.page-manager-body a, .faq-answer a { color: var(--sun); }

/* Selección y foco */
::selection { background: var(--sun); color: var(--sun-ink); }
:focus-visible { outline-color: var(--sun); }

/* Solo para lectores de pantalla */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Duraciones apagadas desde el panel (fleet.hours_off): tachadas en diagonal, sin poder elegirse */
html .dur-chip--active, html .dur-chip--active:hover { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); }
html .dur-chip--off, html .dur-chip--off:hover {
  color: var(--mute); border-color: var(--line-2); opacity: .7; cursor: not-allowed;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mute) calc(50% - 1px), var(--mute) calc(50% + 1px), transparent calc(50% + 1px));
}
html .tier-off { position: relative; color: var(--mute); }
html .tier-off b { font-weight: 500; font-size: .85rem; color: var(--mute); }
html .tier-off span { position: relative; padding: 0 6px; }
html .tier-off span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mute) calc(50% - 1px), var(--mute) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Tarjeta de WhatsApp en la reserva: fondo oscuro con borde verde (el verde claro heredado no se leía) */
html .whatsapp-direct-card { background: var(--surf); border: 1px solid rgba(37,211,102,.45); }
html .whatsapp-direct-card .bk-wa__t { color: var(--tx); }
html .whatsapp-direct-card .bk-wa__p { color: var(--mute); }

/* Confirmaciones y alertas: versiones oscuras (las heredadas eran verde/rosa claro con texto claro encima) */
html .contact-sent { background: rgba(31,138,91,.14); border-color: rgba(63,190,130,.45); }
html .contact-sent__title { color: var(--tx); }
html .contact-sent p { color: var(--tx-2); }
html .alert--success { background: rgba(31,138,91,.14); border-color: rgba(63,190,130,.45); color: #BFEBD3; }
html .alert--error { background: rgba(180,35,58,.16); border-color: rgba(230,110,130,.45); color: #F6C9D1; }
html .alert--info { background: var(--sun-soft); border-color: rgba(63,167,162,.45); color: var(--tx); }
html .ok-paid { background: rgba(31,138,91,.14); border-color: rgba(63,190,130,.45); }
html .ok-paid__t { color: #6FD3A2; }
html .ok-paid__p { color: var(--tx-2); }