:root {
  --c-dorado: #e7bb6a;
  --c-dorado-claro: #f2dc82;
  --c-dorado-oscuro: #ccb25e;
  /* Paleta de ajustes solicitados (ajustemilonga-1.pdf) */
  --c-crema: #faf7f2;
  --c-crema-2: #f1ece4;
  --c-bordo: #660000;
  /* Variante aclarada para estados hover, equivalente a lo que
     #8d7252 era respecto del dorado #ab8a62. */
  --c-bordo-claro: #8a1a1a;
}

#selectLang {
  z-index: 9999;
 }

 .languageSelector {
  width: 70px;
  right: 0;
}

#languageOptions { position: fixed; }

.loader_flow {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  --_m: 
  conic-gradient(#fff0 10%,#fff),
  linear-gradient(#fff 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.loader-container {
  display: flex;
  justify-content: center;
}

/* Eliminar flechas de los inputs number */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* Fix para que el header y el selector de idiomas estén por encima del banner hero */
.header {
    position: relative;
    z-index: 1000;
}

/* Asegurar que el dropdown de idiomas esté siempre visible */
#languageOptions {
    z-index: 1001;
}

/* El dropdown de idiomas es position:fixed, pero sus clases utilitarias
   (absolute / right-0 / mt-7) se escribieron pensando en position:absolute.
   Sin un `top` propio, el navegador lo dejaba en su posicion estatica, que
   en movil cae POR ENCIMA del borde superior de la pantalla: el primer
   idioma quedaba cortado fuera del viewport.
   Aca se ancla explicitamente debajo del header, que esta fijo en top:0
   y mide ~76px tanto en estado normal como sticky. */
@media screen and (max-width: 991px) {
    #languageOptions {
        top: 72px;
        right: 8px;
        margin-top: 0;
        width: auto;
        min-width: 190px;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        border-radius: 6px;
    }
}

/* El header top desaparece cuando el usuario hace scroll
   porque el menú sticky lo cubre al posicionarse fixed en top: 0 */

/* Anular el transform que aplica el plugin smooth-scroll al header */
.header__function {
    transform: none !important;
}

/* Asegurar que el header sticky permanezca visible */
.header__function.is__sticky {
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
}

/* Clases para el menú de carta */
.bg-dorado {
  background-color: var(--c-dorado) !important;
}

.bg-dorado:hover {
  background-color: var(--c-dorado-claro) !important;
}
/* ===========================================================
   Ajustes de color solicitados (ajustemilonga-1.pdf)
   1) Header: barra superior de contacto + barra de navegacion
      en crema #faf7f2, tanto en estado normal como sticky.
   =========================================================== */
.header__top,
.header,
.header__function,
.header__function.is__sticky {
    background-color: var(--c-crema) !important;
}

/* 2) Botones solidos del frontend en bordo #660000. Cubre los marcados con
      rombo en el PDF ("Reservar ahora", "Ver el menu completo", "Enviar
      mensaje") y los equivalentes de la pagina del bandoneon, que comparten
      las mismas clases.

      Se aplica a .theme-btn.fill en lugar de cambiar --btn-1 en la raiz: esa
      variable tambien alimenta bordes y estados hover de botones con borde,
      donde el gris sigue siendo correcto. */
.theme-btn.fill,
.theme-btn.fill:hover,
.theme-btn:hover.fill,
.theme-btn:hover.btn-style {
    background: var(--c-bordo) !important;
    background-color: var(--c-bordo) !important;
    border-color: var(--c-bordo) !important;
}

.theme-btn.fill span {
    color: #fff !important;
}

/* 3) Bloque "about" (Milonga Julie presenta...) con fondo crema #f1ece4.
      Sin rombos en el PDF: solo cambia el fondo, los textos quedan como estan. */
.section--about {
    background-color: var(--c-crema-2);
}

/* 4) Franja "Salon Bandoneones" (video) pasa de gris oscuro #31302f a bordo.
      El rombo del PDF apunta al fondo de la franja completa, no a un elemento
      puntual; el titulo ya es blanco y el video no se toca. */
.experiencia__section {
    background-color: var(--c-bordo);
}

/* 5) Tarjetas de actividades: los dorados #ab8a62 pasan a bordo.
      - "Agregar": el rombo del PDF marca su fondo.
      - "+ Mas Info": la nota "poner el texto de + info" junto al #660000
        refiere al color del texto (y su borde/icono), que era dorado.
      El icono hereda el color por currentColor, no hace falta tocarlo. */
.btn-mas-info {
    color: var(--c-bordo);
    border-color: var(--c-bordo);
}

.btn-agregar {
    background-color: var(--c-bordo);
}

.btn-agregar:hover {
    background-color: var(--c-bordo-claro);
}

/* 7) Testimonios: fondo crema, dorados a bordo y textos a negro.
      Los rombos del PDF marcan el rotulo "Testimonios" y las estrellas de
      valoracion, ambos en el dorado .text-primary (#ab8a62). */
.section--testimonios {
    background-color: var(--c-crema);
}

.section--testimonios .subtitle,
.section--testimonios .text-primary {
    color: var(--c-bordo);
}

/* Los adornos que flanquean el rotulo son SVG dorados servidos como <img>:
   no se pueden recolorear por CSS, asi que se los vira con un filtro
   calculado para llevar #ab8a62 a #660000. */
.section--testimonios .subtitle img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(89%) saturate(4626%) hue-rotate(2deg) brightness(95%) contrast(114%);
}

/* Los dos adornos son el mismo SVG espejado, pero el derecho se veia lavado:
   quedaba montado por debajo del propio rotulo (.subtitle, inline-block, cuya
   caja se extiende mas alla del texto), que lo iba cubriendo de izquierda a
   derecha. Se lo eleva por encima y se lo compone en su propia capa, para que
   ademas se rasterice sobre la grilla de pixeles entera en vez de heredar la
   fraccion de subpixel del contenedor. */
.section--testimonios .subtitle img {
    z-index: 2;
    transform: translateY(-50%) translateX(-100%) translateZ(0);
    backface-visibility: hidden;
}

.section--testimonios .subtitle img:last-of-type {
    transform: translateY(-50%) translateX(100%) translateZ(0);
}

/* 8) Contacto: los rombos del PDF marcan los iconos de la columna derecha
      (telefono, whatsapp, sobre y pin, todos en el dorado .text-primary) y el
      boton "Enviar mensaje", que comparte el gris var(--btn-1) del resto. */
#contacto .text-primary {
    color: var(--c-bordo);
}

/* Los enlaces de contacto viran al dorado en hover (hover:text-primary);
   se lleva ese estado al bordo claro para acompañar la paleta nueva. */
#contacto a:hover,
#contacto a:hover .text-primary {
    color: var(--c-bordo-claro);
}

/* 9) Boletin: fondo gris #f1f1f1 al crema, y el boton "Suscribirse" (rombo en
      el PDF, hoy dorado .bg-primary) al bordo. */
.section--boletin {
    background-color: var(--c-crema);
}

.section--boletin .bg-primary {
    background-color: var(--c-bordo) !important;
}

.section--boletin .bg-primary:hover {
    background-color: var(--c-bordo-claro) !important;
}

/* 10) Footer: de gris oscuro #31302f a bordo.
       Los iconos de redes venian en dorado #a27f5c (borde y relleno): sobre el
       bordo nuevo ese dorado queda con muy poco contraste, asi que pasan a
       blanco, que es como se resuelve el logo en esta misma franja. */
.section--footer {
    background-color: var(--c-bordo);
}

.section--footer [class*="border-[#a27f5c]"] {
    border-color: #fff !important;
}

.section--footer [class*="fill-[#a27f5c]"] {
    fill: #fff !important;
}

/* 11) Pagina "Historia del Bandoneon": el rombo del PDF marca la barra
       superior, que venia en negro #1B1B1B. */
.bdn-header {
    background-color: var(--c-bordo);
}

/* 12) Boton "volver arriba": del gris var(--btn-1) al bordo de la paleta.
       Flota sobre secciones de fondo variable, y dos de ellas son bordo (la
       franja del Salon Bandoneones y el footer), donde quedaria del mismo color
       que el fondo: un aro blanco tenue lo recorta en esos casos sin ensuciarlo
       sobre los fondos claros. */
.rts__back__top {
    background: var(--c-bordo);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .55), 0 4px 14px rgb(0 0 0 / .18);
}

.rts__back__top:hover {
    background: var(--c-bordo-claro);
}