/**************************************************************
 *	Skin boutique · web pública del centro
 *	Va después de v3.css (el marcado es el de v3) y sólo cambia el aspecto: fondo oscuro cálido,
 *	títulos con serif, esquinas rectas, bordes finos en lugar de sombras y textos pequeños en
 *	mayúsculas espaciadas. El color del centro se mantiene en botones y detalles, aclarado en
 *	--v3-acento para que se lea sobre el fondo oscuro.
 ***************************************************************/

/* ---------- Tokens ---------- */
:root {
    --v3-fondo: #0e0d0c;
    --v3-superficie: #161513;
    --v3-superficie-2: #201e1b;
    --v3-texto: #ede8df;
    --v3-texto-suave: #a39c90;
    --v3-borde: rgba(237, 232, 223, .12);
    --v3-acento: #d9c7a7;
    --v3-acento: color-mix(in srgb, var(--v3-principal) 55%, #efe6d6);
    --v3-principal-suave: #24211d;
    --v3-principal-suave: color-mix(in srgb, var(--v3-principal) 18%, #161513);
    --v3-ok: #6fcf97;
    --v3-error: #f08a7e;
    --v3-aviso: #e6bd6a;
    --v3-radio: 2px;
    --v3-radio-peq: 2px;
    --v3-sombra: none;
    --v3-sombra-alta: 0 24px 60px rgba(0, 0, 0, .55);
    --v3-fuente: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --boutique-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
    --boutique-marfil: #efe9df;
    --boutique-negro: #0a0908;
    color-scheme: dark;
}

/* ---------- Base ---------- */
body {
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.7;
}

::selection {
    background: var(--v3-acento);
    color: var(--boutique-negro);
}

strong, b {
    font-weight: 500;
}

h1, h2, h3, h4,
.v3-hero-titulo,
.v3-cabecera-pagina h1,
.v3-seccion-cabecera h2,
.v3-titulo-bloque,
.v3-tarjeta-titulo,
.v3-fila-titulo,
.v3-cta h2,
.v3-tarifa-nombre,
.v3-tarifa-precio,
.v3-calendario-cabecera h2,
.v3-dialogo-cabecera h2,
.v3-login-tarjeta h1 {
    font-family: var(--boutique-serif);
    font-weight: 500;
    letter-spacing: 0;
}

/* Las etiquetas pequeñas en mayúsculas espaciadas son el otro rasgo del estilo */
.v3-migas,
.v3-chip,
.v3-meta,
.v3-clase-hora,
.v3-dia-pestana span,
.v3-pie-titulo,
.v3-acceso-titulo,
.v3-enlace-flecha {
    text-transform: uppercase;
    letter-spacing: .14em;
}

.v3-migas {
    font-size: .7rem;
}

/* Textos del CMS: los colores puestos a mano en el editor (pensados para fondo blanco) no se verían */
.v3-texto [style*="color"],
.v3-texto font[color] {
    color: inherit !important;
}

.v3-texto [style*="background"] {
    background: transparent !important;
}

/* ---------- Botones ---------- */
.v3-boton {
    min-height: 46px;
    padding: 12px 26px;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.v3-boton:hover {
    filter: brightness(1.12);
    transform: none;
}

.v3-boton-suave {
    border-color: rgba(237, 232, 223, .3);
    background: transparent;
    color: var(--v3-texto);
}

.v3-boton-suave:hover {
    border-color: var(--v3-acento);
    color: var(--v3-acento);
    filter: none;
}

.v3-boton-peq {
    min-height: 38px;
    padding: 6px 16px;
    font-size: 11.5px;
}

.v3-boton-grande {
    min-height: 54px;
    padding: 16px 34px;
    font-size: 13px;
}

.v3-boton-icono {
    border-radius: 0;
    background: transparent;
}

.v3-enlace-flecha {
    font-size: .75rem;
    font-weight: 400;
}

.v3-enlace-flecha:hover {
    text-decoration: none;
    color: var(--v3-texto);
}

.v3-chip {
    border-radius: 0;
    background: transparent;
    font-size: .68rem;
    font-weight: 400;
}

.v3-chips-scroll .v3-chip {
    font-size: .7rem;
}

.v3-chip.activo {
    border-color: var(--v3-acento);
    background: transparent;
    color: var(--v3-acento);
}

/* ---------- Cabecera ---------- */
.v3-cabecera {
    border-bottom-color: rgba(237, 232, 223, .08);
}

.v3-cabecera::before {
    background: rgba(14, 13, 12, .86);
}

.v3-cabecera.con-scroll {
    box-shadow: 0 1px 0 rgba(237, 232, 223, .06), 0 12px 30px rgba(0, 0, 0, .35);
}

/* Logo oscuro sobre transparente (boutiqueLogoEsOscuro): va sobre una placa marfil */
.boutique-logo-placa .v3-logo,
.boutique-logo-placa .v3-nav-cabecera img,
.v3-login-logo.boutique-logo-placa {
    padding: 6px 12px;
    background: var(--boutique-marfil);
}

.v3-login-logo.boutique-logo-placa {
    padding: 12px 20px;
}

.v3-nav-enlace {
    border-radius: 0;
    font-weight: 400;
}

.v3-nav-enlace:hover {
    background: transparent;
    color: var(--v3-acento);
}

.v3-nav-lista > li.activo > .v3-nav-enlace {
    background: transparent;
    color: var(--v3-acento);
}

.v3-desplegable-menu a,
.v3-nav-socio a,
.selector-idioma ul li a {
    border-radius: 0;
}

.v3-desplegable-menu a:hover,
.v3-nav-socio a:hover,
.selector-idioma ul li.activo a,
.selector-idioma ul li a:hover {
    background: var(--v3-superficie-2);
}

.selector-idioma > a.selector-idioma-actual,
.selector-idioma ul {
    border-radius: 0;
}

.v3-acciones .v3-boton-icono:hover,
.v3-acciones .selector-idioma > a.selector-idioma-actual:hover {
    background: transparent;
}

.v3-velo {
    background: rgba(0, 0, 0, .6);
}

@media (min-width: 1100px) {
    .v3-barra {
        min-height: 84px;
    }

    .v3-logo img {
        max-height: 42px;
    }

    .v3-nav-enlace {
        padding: 8px 12px;
        border-radius: 0;
        font-size: .74rem;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    /* El activo, subrayado fino en lugar de pastilla */
    .v3-nav-lista > li.activo > .v3-nav-enlace {
        box-shadow: inset 0 -1px 0 var(--v3-acento);
    }

    .v3-desplegable-menu,
    .v3-nav .v3-desplegable-menu {
        border-radius: 0;
        background: var(--v3-superficie);
    }

    .v3-nav-mas .v3-desplegable-menu .v3-nav-enlace {
        border-radius: 0;
        letter-spacing: .02em;
        text-transform: none;
    }

    .v3-nav-mas .v3-desplegable-menu .v3-desplegable > .v3-nav-enlace {
        letter-spacing: .16em;
        text-transform: uppercase;
    }
}

/* ---------- Banners de la portada ---------- */
.v3-hero {
    background: var(--v3-fondo);
}

/* Sin panel de color ni capa encima de la imagen: el texto va directamente sobre el banner, y es el
   centro quien prepara la imagen (zona oscura donde va el texto) para que se lea */
.v3-hero-diapositiva .v3-hero-texto {
    max-width: 640px;
    padding: 0 0 8px;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--v3-texto);
    box-shadow: none;
}

/* Filete fino del color del centro encima del título */
.v3-hero-diapositiva .v3-hero-texto::before,
.v3-hero-simple .v3-contenedor::before {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    margin-bottom: 22px;
    background: var(--v3-acento);
}

.v3-hero-titulo {
    font-weight: 500;
    line-height: 1.02;
}

.v3-hero-diapositiva .v3-hero-titulo {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem);
}

.v3-hero-titulo span,
.v3-hero-diapositiva .v3-hero-titulo span {
    color: var(--v3-acento);
    font-style: italic;
    opacity: 1;
}

.v3-hero-diapositiva .v3-hero-sub {
    max-width: 44ch;
    font-size: 1.05rem;
    letter-spacing: .02em;
    opacity: .85;
}

.v3-hero-diapositiva .v3-hero-botones {
    margin-top: 28px;
}

/* Botones sobre la imagen y en la llamada final: marfil y contorno, no el color del centro */
.v3-hero-diapositiva .v3-boton,
.v3-cta .v3-boton {
    background: var(--boutique-marfil);
    color: var(--boutique-negro);
}

.v3-hero-diapositiva .v3-boton-suave,
.v3-cta .v3-boton-suave {
    border-color: rgba(239, 233, 223, .5);
    background: transparent;
    color: var(--boutique-marfil);
}

.v3-hero-diapositiva .v3-boton-suave:hover,
.v3-cta .v3-boton-suave:hover {
    border-color: var(--boutique-marfil);
}

.v3-hero-simple {
    border-bottom: 1px solid var(--v3-borde);
}

.v3-hero .v3-carrusel-controles {
    border-radius: 0;
    background: rgba(10, 9, 8, .45);
}

.v3-hero .v3-carrusel-controles .v3-boton-icono {
    border-radius: 0;
    background: transparent;
}

.v3-hero .v3-carrusel-controles .v3-boton-icono:hover {
    background: rgba(255, 255, 255, .12);
}

.v3-punto {
    width: 18px;
    height: 2px;
    border-radius: 0;
}

.v3-punto.activo {
    width: 36px;
    background: var(--v3-acento);
}

.v3-hero .v3-punto.activo {
    background: var(--boutique-marfil);
}

@media (min-width: 900px) {
    .v3-hero-diapositiva,
    .v3-hero-rejilla {
        min-height: clamp(520px, 76vh, 780px);
    }

    .v3-hero-diapositiva .v3-hero-texto {
        padding: 0;
        border-radius: 0;
    }

    .v3-hero-simple {
        padding-block: 110px 90px;
    }
}

/* ---------- Secciones de la portada ---------- */
.v3-acceso {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.v3-acceso:hover {
    border-color: var(--v3-acento);
    background: var(--v3-superficie);
    box-shadow: none;
    transform: none;
}

.v3-acceso-icono {
    border: 1px solid var(--v3-borde);
    border-radius: 0;
    background: transparent;
}

.v3-acceso-titulo {
    font-size: .74rem;
    font-weight: 400;
}

.v3-seccion-cabecera {
    margin-bottom: 28px;
}

.v3-seccion-cabecera h2 {
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
    line-height: 1.1;
}

/* Filete bajo el título de cada sección */
.v3-seccion-cabecera h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-top: 14px;
    background: var(--v3-acento);
}

.v3-seccion-alterna {
    background: var(--v3-superficie);
}

@media (min-width: 640px) {
    .v3-seccion {
        padding-block: 80px;
    }
}

.v3-cta {
    border: 1px solid var(--v3-borde);
    border-radius: 0;
    background: linear-gradient(120deg, #1d1a17, #11100e);
    color: var(--v3-texto);
}

.v3-cta h2 {
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
    font-weight: 500;
}

/* ---------- Tarjetas y listas ---------- */
.v3-tarjeta {
    box-shadow: none;
}

.v3-tarjeta-enlace:hover {
    border-color: rgba(237, 232, 223, .28);
    box-shadow: none;
    transform: none;
}

.v3-tarjeta-imagen img,
.v3-galeria-item img {
    transition: transform .8s ease;
}

.v3-tarjeta-titulo {
    font-size: 1.4rem;
    line-height: 1.2;
}

.v3-fila-titulo {
    font-size: 1.3rem;
}

.v3-titulo-bloque {
    font-size: 1.5rem;
}

.v3-cabecera-pagina {
    padding: 36px 0 14px;
}

.v3-cabecera-pagina h1 {
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
    line-height: 1.08;
}

@media (min-width: 900px) {
    .v3-cabecera-pagina {
        padding: 64px 0 24px;
    }
}

.v3-tarifa-nombre {
    font-size: 1.5rem;
}

.v3-tarifa-precio {
    font-size: 3rem;
    font-weight: 500;
}

.v3-lista-check li .v3-icono {
    color: var(--v3-acento);
}

.v3-nota,
.v3-dia-vacio,
.v3-galeria-item,
.v3-ubicacion-mapa,
.v3-mapa,
.v3-fila-imagen,
.v3-fila-icono {
    border-radius: 0;
}

.v3-fila-icono {
    border: 1px solid var(--v3-borde);
    background: transparent;
}

/* Las imágenes por defecto de los elementos sin foto (images/imagen-*.png) son gris claro: se oscurecen */
img[src*="/images/imagen-"] {
    filter: invert(1) brightness(.55) contrast(.9);
}

/* Mapas en tonos oscuros, como el resto de la página (home, contacto y contenidos) */
.v3-ubicacion-mapa,
.v3-mapa {
    filter: grayscale(1) invert(.9) contrast(.9);
}

.v3-pagina .message {
    border-radius: 0;
}

/* ---------- Calendario de reservas ---------- */
.v3-calendario-cabecera h2 {
    font-size: 1.8rem;
}

.v3-dia-pestana {
    border-radius: 0;
    background: transparent;
}

.v3-dia-pestana span {
    font-size: .64rem;
    font-weight: 400;
}

.v3-dia-pestana strong {
    font-family: var(--boutique-serif);
    font-size: 1.4rem;
    font-weight: 500;
}

.v3-dia-pestana.activo {
    border-color: var(--v3-acento);
    background: transparent;
    color: var(--v3-acento);
}

/* Cabecera de cada día en el calendario de escritorio (en v3, con esquinas redondeadas) */
.v3-dia-titulo,
.con-pestanas .v3-dia-titulo {
    border-radius: 0;
    font-family: var(--v3-fuente);
    font-weight: 400;
    letter-spacing: .14em;
}

.v3-dia.hoy .v3-dia-titulo {
    border-color: var(--v3-acento);
    background: transparent;
}

.v3-clase {
    border-left-width: 2px;
    border-radius: 0;
    background: var(--v3-superficie);
}

.v3-clase-hora {
    font-size: .7rem;
    font-weight: 400;
}

.v3-clase-titulo {
    font-family: var(--boutique-serif);
    font-size: 1.3rem;
    font-weight: 500;
}

/* Mismos colores de estado que v3 pero en versión para fondo oscuro */
.v3-clase.reserva-disponible {
    --v3-estado: #59ce83;
    --v3-estado-fondo: rgba(89, 206, 131, .12);
    --v3-estado-texto: #8fdcab;
}

.v3-clase.reserva-no-disponible {
    --v3-estado: #ff6666;
    --v3-estado-fondo: rgba(255, 102, 102, .12);
    --v3-estado-texto: #ff9f9f;
}

.v3-clase.reserva-no-disponible-lista-espera {
    --v3-estado: #ffcc00;
    --v3-estado-fondo: rgba(255, 204, 0, .12);
    --v3-estado-texto: #f2d36b;
}

.v3-clase.fecha-no-disponible {
    --v3-estado: #5c5852;
    --v3-estado-fondo: rgba(255, 255, 255, .05);
    --v3-estado-texto: #8d877d;
}

/* ---------- Formularios ---------- */
.formulario-publico input[type=text],
.formulario-publico input[type=email],
.formulario-publico input[type=password],
.formulario-publico input[type=number],
.formulario-publico input[type=tel],
.formulario-publico input[type=file],
.formulario-publico select,
.formulario-publico textarea,
.v3-filtros select,
.v3-carrito select,
.v3-buscador input {
    border-radius: 0;
    background-color: var(--v3-fondo);
}

.formulario-publico input:focus,
.formulario-publico select:focus,
.formulario-publico textarea:focus,
.v3-filtros select:focus,
.v3-carrito select:focus,
.v3-buscador input:focus {
    border-color: var(--v3-acento);
    box-shadow: none;
}

.select2-container--default .select2-selection--single,
.select2-dropdown {
    border-radius: 0;
    background: var(--v3-fondo);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--v3-borde);
    background: var(--v3-superficie);
    color: var(--v3-texto);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--v3-superficie-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--v3-principal-suave);
    color: var(--v3-texto);
}

/* ---------- Diálogos, login y carga ---------- */
.v3-dialogo,
#loading-web #loading-content {
    border: 1px solid var(--v3-borde);
    border-radius: 0;
}

.v3-dialogo::backdrop,
#loading-web {
    background: rgba(0, 0, 0, .7);
}

@media (max-width: 639px) {
    dialog.v3-dialogo:not(.v3-lightbox) {
        border-radius: 0;
    }
}

.v3-login {
    background: var(--v3-fondo);
}

.v3-login-tarjeta h1 {
    font-size: 1.7rem;
}

/* ---------- Patrocinadores y pie ---------- */
.v3-patrocinadores {
    background: var(--v3-superficie);
}

/* Cada logo sobre una placa marfil: muchos son oscuros sobre transparente y en el fondo oscuro no se verían */
.v3-patrocinadores img {
    padding: 10px 16px;
    background: var(--boutique-marfil);
}

.v3-pie {
    padding-top: 64px;
    border-top: 1px solid rgba(237, 232, 223, .08);
    background: var(--boutique-negro);
    color: var(--v3-texto-suave);
}

.v3-pie a {
    color: var(--v3-texto);
}

.v3-pie-titulo {
    margin-bottom: 18px;
    color: var(--v3-texto);
    font-family: var(--v3-fuente);
    font-size: .72rem;
    font-weight: 500;
}

.v3-pie-columnas > div:first-child > .v3-pie-titulo {
    font-family: var(--boutique-serif);
    font-size: 1.7rem;
    letter-spacing: 0;
    text-transform: none;
}

.v3-pie-menu a {
    color: var(--v3-texto-suave);
}

.v3-pie-menu a:hover {
    color: var(--v3-acento);
    text-decoration: none;
}

.v3-redes a {
    border: 1px solid var(--v3-borde);
    border-radius: 0;
    background: transparent;
}

.v3-redes a:hover {
    border-color: var(--v3-acento);
    background: transparent;
    color: var(--v3-acento);
}

.v3-pie-noticias img {
    border-radius: 0;
}

.v3-pie-noticias strong {
    font-family: var(--boutique-serif);
    font-size: 1.05rem;
    font-weight: 500;
}

.v3-pie-noticias small,
.v3-check-legal,
.v3-pie-legal {
    color: #7d776e;
}

.v3-campo-boton {
    border-color: var(--v3-borde);
    border-radius: 0;
    background: transparent;
}

.v3-campo-boton .v3-boton {
    min-height: 40px;
    padding: 0 14px;
}

.v3-pie-legal {
    border-top-color: rgba(237, 232, 223, .08);
    letter-spacing: .04em;
}
