/* ============================================================
   ÉLITE YACHTS — Polish global
   Capa final de refinamiento. Se carga última en todas las
   páginas: unifica tipografía display, paleta, radios, sombras,
   focos y microinteracciones. No toca lógica ni estructura.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap');

:root {
    --ey-navy: #043e66;
    --ey-navy-profundo: #051e44;
    --ey-accion: #0b5fe0;
    --ey-dorado: #B08D57;
    --ey-dorado-texto: #8F6F3F;
    --ey-crema: #FAF7F1;
    --ey-borde: #E5E2DC;
    --ey-grafito: #55524B;
    --ey-gris: #6E6A63;
    --ey-serif: 'Playfair Display', Georgia, serif;
    --ey-sombra: 0 2px 12px rgba(4, 30, 68, 0.06);
    --ey-sombra-hover: 0 8px 22px rgba(4, 30, 68, 0.10);
}

html { scroll-behavior: smooth; }
::selection { background: var(--ey-navy); color: #fff; }

/* ---- Tipografía display: serif solo en títulos grandes ---- */
body .hero_titulo,
body .seccion_titulo,
body .detalle_titulo,
body .publicar_titulo,
body .cta_publicar h2,
body .footer_logo .logo a,
body .pack_nombre {
    font-family: var(--ey-serif);
    font-weight: 500;
    letter-spacing: 0.02em;
}
body .detalle_titulo{ font-size: 38px; }
body .seccion_titulo { font-weight: 500; }
body .hero_titulo { font-weight: 500; }
body .hero_titulo span{ color: #cfa76a; }
body .pack_nombre { font-weight: 600; }

/* ---- Paleta disciplinada: azul eléctrico solo en acciones ---- */
body .precio_hora{ color: var(--ey-navy); font-weight: 600; font-size: 21px; }
body .precio_hora small{ color: #9A968E; }
body .extra_precio{ color: var(--ey-grafito); font-weight: 500; font-size: 13px; }
body .spec_item i{ color: var(--ey-navy); }
body .card_barco_precio{ color: var(--ey-grafito); font-weight: 500; font-size: 14px; }
body .detalle_sub i, body .card_barco_sub i{ color: var(--ey-navy); }
body .resumen_total{ color: var(--ey-navy); border-top-color: var(--ey-borde); }

/* ---- Radios y sombras unificados ---- */
body .ficha_card, body .cotizador_card, body .card_barco, body .publicar_card, body .buscador_card, body .cta_publicar{
    border-radius: 10px;
    box-shadow: var(--ey-sombra);
}
body .ficha_card, body .cotizador_card, body .card_barco, body .publicar_card{
    border: 1px solid rgba(229, 226, 220, 0.6);
}
body .visor_principal{ border-radius: 10px; }
body .hero_btn, body .publicar_btn, body .buscador_btn, body .btn_ver, body .btn_wsp, body .btn_reservar, body .cta_btn{
    border-radius: 6px;
}
body .card_barco{ transition: transform 220ms ease, box-shadow 220ms ease; }
body .card_barco:hover{ transform: translateY(-2px); box-shadow: var(--ey-sombra-hover); }
body .card_barco img.cover{ transition: none; }

/* ---- Botones: hover y transiciones coherentes ---- */
body .hero_btn, body .publicar_btn, body .buscador_btn, body .btn_ver, body .btn_wsp, body .btn_reservar, body .cta_btn, body .foto_btn{
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
body .btn_reservar:hover, body .btn_wsp:hover{ background: #1da851; transform: translateY(-1px); }
body .hero_btn:hover, body .buscador_btn:hover, body .btn_ver:hover, body .publicar_btn:hover{ transform: translateY(-1px); }

/* ---- Focos visibles y elegantes (teclado y formularios) ---- */
a:focus-visible, button:focus-visible, [onclick]:focus-visible {
    outline: 2px solid rgba(4, 62, 102, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}
.form-control:focus, select.form-control:focus, textarea.form-control:focus {
    border-color: var(--ey-navy);
    box-shadow: 0 0 0 1px rgba(4, 62, 102, 0.12);
    outline: none;
}

/* ---- Miniaturas de galería: hairline en vez de marco grueso ---- */
body .tira_miniaturas .mini{ border-width: 1px; border-color: var(--ey-borde); transition: border-color 200ms ease, opacity 200ms ease; }
body .tira_miniaturas .mini:hover{ opacity: 0.9; }
body .tira_miniaturas .mini.activa{ border-color: var(--ey-dorado); }

/* ---- Botón flotante de WhatsApp: presente pero sereno ---- */
.WhatsApp { top: auto !important; bottom: 26px; right: 22px !important; width: auto !important; height: auto !important; padding: 0 !important; }
.WhatsApp img { width: 54px !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22)); transition: transform 200ms ease; }
.WhatsApp:hover img { transform: scale(1.06); }

/* ---- Visor de galería: invita al click ---- */
body .visor_principal img{ cursor: zoom-in; }

/* ============================================================
   Campo de fecha + calendario de disponibilidad
   ============================================================ */
.campo_fecha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: #fff;
    cursor: pointer;
    color: #333;
    font-size: 14px;
}
.campo_fecha .chev { color: var(--ey-gris); transition: transform 250ms ease; }
.campo_fecha.abierto .chev { transform: rotate(180deg); }
.cal_contenedor { position: relative; }
.cal_pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ey-borde);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(4, 30, 68, 0.14);
    padding: 16px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}
.cal_pop.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
.cal_cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal_mes { font-family: var(--ey-serif); font-weight: 500; font-size: 17px; color: var(--ey-navy); letter-spacing: 0.02em; text-transform: capitalize; }
.cal_flecha {
    background: none;
    border: 1px solid var(--ey-borde);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ey-navy);
    transition: background 200ms ease, border-color 200ms ease;
}
.cal_flecha:hover { background: var(--ey-crema); border-color: var(--ey-dorado); }
.cal_flecha:disabled { opacity: 0.35; cursor: default; }
.cal_grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal_dia_nombre { text-align: center; font-size: 10px; letter-spacing: 0.12em; color: #9A968E; text-transform: uppercase; padding: 4px 0 8px 0; }
.cal_dia {
    text-align: center;
    font-size: 13px;
    color: #333;
    padding: 7px 0;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 150ms ease, border-color 150ms ease;
}
.cal_dia:hover { background: var(--ey-crema); border-color: var(--ey-dorado); }
.cal_dia.vacio { visibility: hidden; }
.cal_dia.pasado { color: #C9C4BA; cursor: default; pointer-events: none; }
.cal_dia.ocupado { color: #C9C4BA; text-decoration: line-through; cursor: default; pointer-events: none; background: #FAFAF8; }
.cal_dia.hoy { font-weight: 600; }
.cal_dia.sel { background: var(--ey-navy); color: #fff; border-color: var(--ey-navy); font-weight: 600; }
.cal_leyenda { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: #9A968E; }
.cal_leyenda .tachado { text-decoration: line-through; }

/* ============================================================
   Resumen "Tu reserva"
   ============================================================ */
.reserva_titulo { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #9A968E; border-top: 1px solid var(--ey-borde); padding-top: 14px; margin-top: 16px; margin-bottom: 10px; }
.resumen_linea { color: var(--ey-gris); }
.resumen_linea .resumen_dato { color: #333; text-align: right; }

/* ============================================================
   Barra móvil fija con total
   ============================================================ */
.barra_movil { display: none; }
@media (max-width: 991px) {
    .barra_movil {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--ey-borde);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
        z-index: 99998;
        box-shadow: 0 -4px 16px rgba(4, 30, 68, 0.08);
    }
    .barra_movil .bm_etiqueta { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A968E; }
    .barra_movil .bm_total { font-size: 17px; font-weight: 600; color: var(--ey-navy); white-space: nowrap; }
    .barra_movil .bm_boton {
        background: #25d366;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        padding: 11px 20px;
        white-space: nowrap;
    }
    .WhatsApp { bottom: 84px; }
}

/* ============================================================
   Lightbox de galería
   ============================================================ */
.lb_overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 14, 28, 0.96);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms;
}
.lb_overlay.abierto { opacity: 1; visibility: visible; }
.lb_media { max-width: 92vw; max-height: 84vh; }
.lb_media img, .lb_media video { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 4px; display: block; }
.lb_boton {
    position: fixed;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 14px;
    transition: color 200ms ease, transform 200ms ease;
    z-index: 100001;
}
.lb_boton:hover { color: #fff; transform: scale(1.08); }
.lb_cerrar { top: 18px; right: 18px; }
.lb_prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb_next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb_prev:hover { transform: translateY(-50%) scale(1.08); }
.lb_next:hover { transform: translateY(-50%) scale(1.08); }
.lb_contador {
    position: fixed;
    top: 26px;
    left: 26px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.12em;
    z-index: 100001;
}
body.lb_abierta { overflow: hidden; }
@media (max-width: 768px) {
    .lb_prev, .lb_next { display: none; } /* en móvil se navega deslizando */
}