/* ==========================================================================
   Bicotorto · capa de sistema
   --------------------------------------------------------------------------
   Por qué existe: la web está construida con estilos por widget de Elementor.
   Eso da un escritorio cuidado y un móvil roto, porque no hay NADA que escale:
   ni escala tipográfica, ni ritmo de espaciado, ni capa de estados, ni
   movimiento. Esta hoja es ese sistema, y se aplica a las 250 páginas de los
   cuatro idiomas a la vez.

   🔴 Sobre !important: los tamaños de Elementor vienen de reglas con
   especificidad (0,3,1) tipo `.elementor-7 .elementor-element-htit .elementor-
   heading-title`. Competir con eso a base de selectores sería frágil y
   ilegible. Se usa !important SOLO en las propiedades que esta capa toma
   deliberadamente (tamaño y ritmo del display por debajo de 1024px, y las
   cajas de la cabecera en móvil). Todo lo demás compite por especificidad
   normal y cede ante un ajuste puntual de Elementor, que es lo que se quiere.
   ========================================================================== */

:root{
  /* — Marca. Son los colores que ya usaba la web; aquí solo se nombran para
       que dejen de estar copiados a mano en cada widget. — */
  --bt-ink:      #2A2620;   /* titulares */
  --bt-ink-2:    #5C564B;   /* cuerpo */
  --bt-ink-3:    #6C675E;   /* secundario · era #8A8478 = 3,08:1 sobre crema */
  --bt-gold:     #C99417;   /* acento único de todo el sitio */
  --bt-gold-lit: #E0B443;   /* el mismo acento sobre fondo oscuro */
  --bt-paper:    #FFF7EA;
  --bt-paper-2:  #F4E9D2;
  --bt-line:     #E7DFCE;
  --bt-dark:     #211E1B;
  --bt-dark-2:   #2A2620;

  /* — Curvas. Las de serie de CSS son flojas; estas tienen intención.
       Nunca ease-in en interfaz: retrasa el arranque justo en el instante
       que el usuario está mirando, y se percibe lento aunque dure igual. — */
  --bt-out:      cubic-bezier(.23,1,.32,1);
  --bt-in-out:   cubic-bezier(.77,0,.175,1);

  /* — Duraciones. Todo lo de interfaz por debajo de 300 ms. — */
  --bt-press:    140ms;
  --bt-hover:    200ms;
  --bt-reveal:   640ms;   /* prosa. Los titulares van más lentos, ver §6 */

  /* — Sombras tintadas al tono del fondo, nunca negro puro sobre crema. — */
  --bt-sh-1: 0 1px 2px rgba(58,48,30,.06), 0 6px 14px -8px rgba(58,48,30,.14);
  --bt-sh-2: 0 2px 4px rgba(58,48,30,.07), 0 18px 38px -22px rgba(58,48,30,.30);
  --bt-sh-3: 0 4px 8px rgba(58,48,30,.08), 0 34px 60px -30px rgba(58,48,30,.38);

  /* — Un solo sistema de radios. — */
  --bt-r: 2px;

  /* Alto de la cabecera. Vive aquí, no en el propio header, porque
     `html { scroll-padding-top }` no puede leer una variable de un hijo. */
  --bt-hdr: 96px;
}

/* ==========================================================================
   1 · Superficies del navegador
   Lo que no dibujas también comunica. Selección, cursor de texto, barra de
   desplazamiento, anillo de foco y subrayados salen de serie sin pertenecer a
   ningún sistema de diseño. Es la señal más barata de que una página está
   construida y no montada.
   ========================================================================== */
::selection{ background:var(--bt-gold); color:#1C1C1C; text-shadow:none; }
::-moz-selection{ background:var(--bt-gold); color:#1C1C1C; }
html{ caret-color:var(--bt-gold); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Ancla que no queda debajo de la cabecera fija. */
html{ scroll-padding-top:calc(var(--bt-hdr,96px) + 16px); }

*{ scrollbar-color:var(--bt-gold) var(--bt-paper-2); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bt-paper-2); }
::-webkit-scrollbar-thumb{ background:#cbb98d; border:3px solid var(--bt-paper-2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--bt-gold); }

/* Foco visible de verdad, y solo con teclado. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--bt-gold);
  outline-offset:3px;
  border-radius:var(--bt-r);
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }

/* Subrayados que respiran y no cortan las descendentes. */
a{ text-underline-offset:.18em; text-decoration-thickness:from-font; }

/* Cifras alineadas donde hay datos: ficha técnica, precios, calendario. */
.btr-ficha__f dd, .btr, .btr-precio, table td, table th{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   2 · Escala tipográfica fluida
   El problema medido: el h1 de la portada mide 74px EN LOS DOS tamaños, igual
   en un monitor de 1440 que en un iPhone de 390. No había escala: había un
   número escrito a mano. Por debajo de 1024px esta capa toma el mando; por
   encima se respeta lo compuesto para escritorio.
   ========================================================================== */
@media (max-width:1024px){
  .elementor-widget-heading h1.elementor-heading-title{
    font-size:clamp(2.4rem, 9.6vw, 3.6rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.012em !important;
  }
  .elementor-widget-heading h2.elementor-heading-title{
    font-size:clamp(1.75rem, 6.4vw, 2.6rem) !important;
    line-height:1.14 !important;
  }
  .elementor-widget-heading h3.elementor-heading-title{
    font-size:clamp(1.3rem, 4.8vw, 1.75rem) !important;
    line-height:1.2 !important;
  }
  /* La cursiva de marca (Sacramento) lleva descendentes largas: necesita aire
     o se le come la cola a la «y» y a la «ñ». */
  .elementor-heading-title [style*="Sacramento"],
  [style*="Sacramento"]{
    line-height:1.28 !important;
    padding-bottom:.06em;
  }
}
/* La cursiva de marca tampoco escalaba: 34px fijos en las dos pantallas, con
   lo que en el móvil competía en tamaño con el propio titular al que adorna.
   Ahora va siempre por debajo de él. */
.elementor-heading-title [style*="Sacramento"],
[style*="Sacramento"]{ font-size:clamp(1.5rem, 5.4vw, 2.6rem) !important; }
@media (min-width:1025px){
  [style*="Sacramento"]{ font-size:clamp(2rem, 2.6vw, 2.5rem) !important; }
}

/* 🔴 AQUÍ HABÍA una «medida de lectura»: max-width:74ch en todos los párrafos de los
   editores de texto. La retiré el 26-09-2026 porque DESCENTRABA 820 párrafos en 103
   páginas. El texto de este sitio ya vive en cajas con su propio ancho (max-width:820px
   margin:0 auto); al encoger el párrafo DENTRO de esa caja sin centrarlo, se quedaba
   pegado a la izquierda y el bloque aparecía desplazado ~65px respecto al titular.
   La regla que debía compensarlo ([data-bt-centro] p) no se activaba nunca: ese
   atributo no se pone en los editores de texto. Jose lo vio en /gl/camino-de-santiago/.
   Lección: el ancho de lectura lo decide la caja del autor, no una regla global. */

/* Más aire encima de un titular que debajo: agrupa lo que va junto. */
.elementor-widget-heading + .elementor-widget-text-editor{ margin-top:.35rem; }

/* ==========================================================================
   3 · Cabecera
   Medido: 205px de alto en móvil, el 24% de la pantalla de un iPhone antes de
   ver una sola palabra. La causa es que las tres columnas (logo, menú, idioma)
   se envuelven en tres filas. Se fuerza una sola fila.
   ========================================================================== */


@media (max-width:1024px){
  :root{ --bt-hdr:80px; }
  .elementor-location-header > .elementor-section > .elementor-container{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px;
    min-height:var(--bt-hdr);
  }
  .elementor-location-header > .elementor-section > .elementor-container > .elementor-column{
    width:auto !important;
    flex:0 0 auto !important;
  }
  /* El logo manda a la izquierda y se come el espacio sobrante. */
  .elementor-location-header .elementor-container > .elementor-column:first-child{ flex:1 1 auto !important; }
  .elementor-location-header .elementor-widget-wrap{ padding:0 !important; }
  .elementor-location-header > .elementor-section{ padding-block:8px !important; }
  .elementor-location-header .bt-logo img{ max-height:38px; width:auto; }
  /* Idioma y hamburguesa, juntos a la derecha y sin estirarse. */
  .elementor-location-header .elementor-widget-container > div[class*="lang"],
  .elementor-location-header [class*="langsw"] > div{ width:auto !important; }

  /* 🔴 El desplegable CERRADO seguía en el flujo (max-height:0 y scaleY(0) no le quitan
     el ancho): reservaba 165px, lo que mide «ALOJAMIENTOS», al lado de una hamburguesa de
     33. A 320px la fila sumaba 358 y el «ES» del idioma quedaba fuera de pantalla. Y al
     abrirlo se metía DENTRO de la barra: la estiraba a ~300px y bajaba el logo.
     Ahora cuelga de la sección (que es fixed) como panel a todo el ancho bajo la barra.
     Para eso los tres envoltorios que hay entre medias dejan de ser su referencia. */
  .elementor-location-header > .elementor-section > .elementor-container,
  .elementor-location-header .elementor-column:has(.elementor-menu-toggle),
  .elementor-location-header .elementor-column:has(.elementor-menu-toggle) > .elementor-widget-wrap,
  .elementor-location-header .elementor-widget-nav-menu{ position:static !important; }
  .elementor-location-header nav.elementor-nav-menu--dropdown{
    position:absolute !important; top:100% !important; left:0; right:0;
    width:auto !important; margin-top:0 !important;
    box-shadow:0 22px 34px -22px rgba(0,0,0,.6);
  }
  /* Con un submenú abierto el panel puede pasar de la pantalla: que se pueda recorrer. */
  .elementor-location-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{
    max-height:calc(100dvh - var(--bt-hdr) - 16px) !important;
    overflow-y:auto !important; overscroll-behavior:contain;
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item{
    padding-inline:clamp(20px, 5vw, 32px) !important;
  }
}

/* Estado al bajar: la cabecera se compacta y gana un borde de un pelo.
   La clase la pone el JS con un centinela, nunca escuchando el scroll. */
.elementor-location-header{
  transition:background-color var(--bt-hover) var(--bt-out),
             box-shadow var(--bt-hover) var(--bt-out),
             backdrop-filter var(--bt-hover) var(--bt-out);
}
body.bt-scrolled .elementor-location-header{
  background-color:rgba(33,30,27,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(224,180,67,.16), 0 10px 30px -18px rgba(0,0,0,.6);
}
@media (prefers-reduced-transparency: reduce){
  body.bt-scrolled .elementor-location-header{
    background-color:#211E1B; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* ==========================================================================
   4 · Velo sobre fotografía
   Medido: entre 2 y 4 bloques de texto por página van sobre una foto sin
   ningún velo. El subtítulo de la portada es blanco sobre agua reflejando el
   cielo: no se lee, y no es un matiz de gusto sino un fallo de contraste.
   El velo se aplica por JS solo donde hay foto Y texto, y es direccional: se
   oscurece el lado donde vive el texto y se deja respirar la foto en el otro.
   ========================================================================== */
.bt-velo{ position:relative; isolation:isolate; }
.bt-velo > *{ position:relative; z-index:1; }
.bt-velo::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* La banda oscura llega hasta donde termina el texto (≈60 % del ancho) y
     solo entonces se abre: si se aclara antes, el final de cada línea se
     pierde sobre el agua. Medido sobre el subtítulo de la portada. */
  background:linear-gradient(
    to right,
    rgba(24,21,18,.74) 0%,
    rgba(24,21,18,.66) 38%,
    rgba(24,21,18,.46) 62%,
    rgba(24,21,18,.16) 88%,
    rgba(24,21,18,.08) 100%);
}
.bt-velo[data-bt-velo="centro"]::after{
  /* 26-09-2026: medido sobre los píxeles de la foto, la etiquetilla de 12 px que va ENCIMA
     del titular en los banners interiores quedaba fuera de lo más denso del velo (centrado
     al 60 %) y daba 1,85-3,13:1. El foco sube al 45 % y es más ancho. */
  background:
    radial-gradient(130% 95% at 50% 45%, rgba(24,21,18,.70) 0%, rgba(24,21,18,.42) 55%, rgba(24,21,18,.18) 100%),
    linear-gradient(to top, rgba(24,21,18,.55), rgba(24,21,18,0) 55%);
}
/* Texto PEQUEÑO sobre foto: una sombra corta y suave, pegada a la letra. No es un halo
   decorativo: es la técnica de legibilidad sobre imagen, y solo actúa en texto de menos de
   16 px, que es el que no aguanta una foto con zonas claras. */
.bt-velo [style*="font-size:10px"], .bt-velo [style*="font-size:11px"], .bt-velo [style*="font-size:12px"],
.bt-velo [style*="font-size:13px"], .bt-velo [style*="font-size:14px"],
.bt-velo .elementor-heading-title.elementor-size-small, .bt-velo h6,
.bt-velo .elementor-widget-heading:first-child .elementor-heading-title{
  text-shadow:0 1px 2px rgba(15,12,9,.65), 0 0 14px rgba(15,12,9,.45);
}
@media (max-width:1024px){
  /* En vertical el texto ocupa todo el ancho: el degradado pasa a vertical. */
  .bt-velo::after, .bt-velo[data-bt-velo="centro"]::after{
    background:linear-gradient(to top,
      rgba(24,21,18,.80) 0%, rgba(24,21,18,.58) 42%, rgba(24,21,18,.28) 78%, rgba(24,21,18,.16) 100%);
  }
}

/* ==========================================================================
   5 · Estados
   Medido: 38 de 40 elementos interactivos no tenían ninguna transición. La web
   no respondía al usuario. Aquí está la capa de respuesta completa: reposo,
   hover (solo con ratón de verdad), pulsación y foco.
   ========================================================================== */
a.btlink-btn, .elementor-button, .btr-btn, button:not(.elementor-menu-toggle),
input[type=submit], .bt-cta{
  transition-property:transform, box-shadow, background-color, color, border-color !important;
  transition-duration:var(--bt-press), var(--bt-hover), var(--bt-hover), var(--bt-hover), var(--bt-hover) !important;
  transition-timing-function:var(--bt-out) !important;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  a.btlink-btn:hover, .elementor-button:hover, .btr-btn:hover, .bt-cta:hover{
    transform:translateY(-1px);
    box-shadow:var(--bt-sh-2);
  }
}
/* La pulsación es el momento en que la interfaz demuestra que te oyó. */
a.btlink-btn:active, .elementor-button:active, .btr-btn:active,
button:not(.elementor-menu-toggle):active, input[type=submit]:active, .bt-cta:active{
  transform:scale(.97);
  transition-duration:var(--bt-press);
}

/* Enlaces de texto: el subrayado crece desde el lado por el que entra el ojo. */
.elementor-widget-text-editor a:not(.btlink-btn):not(.elementor-button){
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--bt-hover) var(--bt-out), color var(--bt-hover) ease;
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .elementor-widget-text-editor a:not(.btlink-btn):not(.elementor-button):hover{ background-size:100% 1px; }
}

/* Tarjetas: la elevación solo aparece cuando hay a dónde ir. */
.bt-card{
  transition-property:transform, box-shadow !important;
  transition-duration:var(--bt-hover), var(--bt-hover) !important;
  transition-timing-function:var(--bt-out), var(--bt-out) !important;
  box-shadow:var(--bt-sh-1);
}
@media (hover:hover) and (pointer:fine){
  .bt-card:hover{ transform:translateY(-4px); box-shadow:var(--bt-sh-3); }
  .bt-card:hover .bt-card__img{ transform:scale(1.035); }
}
.bt-card__img{
  transition-property:transform !important;
  transition-duration:900ms !important;
  transition-timing-function:var(--bt-out) !important;
  will-change:transform;
}
.bt-card__wrap{ overflow:hidden; }

/* Navegación: el acento se dibuja, no aparece de golpe.
   Elementor deja `transition: all` en los enlaces del menú. `all` transiciona
   también el layout y provoca tirones; hay que nombrar las propiedades. */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu .elementor-item{
  position:relative;
  transition-property:color, background-color !important;
  transition-duration:var(--bt-hover) !important;
  transition-timing-function:ease !important;
}
.elementor-nav-menu--main .elementor-item::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--bt-gold-lit); transform:scaleX(0); transform-origin:left center;
  transition:transform 260ms var(--bt-out);
}
@media (hover:hover) and (pointer:fine){
  .elementor-nav-menu--main .elementor-item:hover::after{ transform:scaleX(1); }
}
.elementor-nav-menu--main .elementor-item.elementor-item-active::after{ transform:scaleX(1); }

/* Objetivos táctiles: 44px es el suelo, no una recomendación.
   Se crece el área sensible sin mover el dibujo. */
@media (max-width:1024px){
  .elementor-nav-menu--dropdown .elementor-item,
  .elementor-location-footer a, .bt-toque{
    position:relative; min-height:44px; display:flex; align-items:center;
  }
  /* Solo en vertical: con display:flex cada enlace ya ocupa todo el ancho de su caja, y
     los 6px laterales que tenía sacaban el de «Preferencias de cookies» (margin-left:14px)
     fuera de la pantalla. Eso hacía arrastrable de lado el 87% de las páginas. */
  .elementor-location-footer a::before{
    content:""; position:absolute; inset:-11px 0; /* zona de dedo invisible */
  }
}

/* ==========================================================================
   6 · Movimiento

   PUNTO DE VISTA. La marca de Bicotorto es grabado gastronómico: oro sobre
   carbón, serif de imprenta con un script encima, «productos da terra». No es
   una marca de producto digital, así que no puede moverse como uno. El
   desvanecido hacia arriba de manual (el que traía la primera versión de esta
   capa) es correcto y anónimo: vale para cualquier web del mundo, y por eso no
   vale para esta.

   El vocabulario es de IMPRENTA, no de interfaz:
     · la TINTA entra por la línea base, como si el titular se estuviera
       imprimiendo, en vez de aparecer de la nada;
     · el SCRIPT se escribe de izquierda a derecha, porque es letra manuscrita
       y aparecer de golpe la delata como tipografía;
     · un FILETE de oro se traza bajo el titular: es el gesto del grabado, y usa
       el acento de marca COMO elemento que se mueve, no como decoración quieta;
     · el ORO de un botón principal recibe UN barrido de lámina al entrar. Uno,
       no un bucle: el pan de oro brilla cuando lo giras, no late.

   Ritmo: más lento que una interfaz al uso (780-1150 ms donde lo normal serían
   200-300). Es deliberado. La marca dice «O Ribeiro no se bebe de un trago».

   🔴 Y las reglas de seguridad de siempre: el estado por defecto es VISIBLE, el
   JS es quien esconde, y todo cae a quieto con prefers-reduced-motion.
   ========================================================================== */

/* — Base común a las tres formas de entrar — */
[data-bt-rev]{
  transition-property:opacity, transform, filter, clip-path !important;
  transition-duration:var(--bt-reveal), var(--bt-reveal), var(--bt-reveal), var(--bt-reveal) !important;
  transition-timing-function:var(--bt-out) !important;
  transition-delay:var(--bt-rev-d,0ms) !important;
  will-change:transform, opacity;
}
[data-bt-rev].bt-visto{ will-change:auto; }

/* — TINTA: el titular se imprime desde la línea base.
     El inset de abajo es NEGATIVO al final para no cortar las descendentes
     de la Cormorant, que son largas. — */
[data-bt-rev="tinta"]{
  clip-path:inset(0 0 102% 0);
  transform:translate3d(0,6px,0);
  opacity:1;
  transition-duration:900ms !important;
  transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}
[data-bt-rev="tinta"].bt-visto{ clip-path:inset(-22% 0 -22% 0); transform:none; }

/* — SCRIPT: la Sacramento se escribe. Más lenta y con un pelo de retraso
     sobre el titular al que acompaña. — */
[data-bt-rev="script"]{
  clip-path:inset(0 101% 0 0);
  opacity:1;
  transition-duration:1150ms !important;
  transition-timing-function:cubic-bezier(.22,.61,.36,1) !important;
}
[data-bt-rev="script"].bt-visto{ clip-path:inset(-30% -4% -30% 0); }

/* — TEXTO: prosa y tarjetas. Un desplazamiento corto, sin desenfoque.
     El desenfoque a media transición se lee como texto roto; ya pasó. — */
[data-bt-rev="texto"]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition-duration:var(--bt-reveal) !important;
}
[data-bt-rev="texto"].bt-visto{ opacity:1; transform:none; }

/* — FILETE de oro bajo el titular de sección. El gesto del grabado. — */
.bt-filete{ position:relative; }
.bt-filete::after{
  content:""; position:absolute; left:0; bottom:-.42em;
  width:2.6em; height:1px; background:var(--bt-gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 780ms cubic-bezier(.16,1,.3,1) 260ms;
}
.bt-filete.bt-visto::after{ transform:scaleX(1); }
/* Si el titular va centrado, el filete se traza desde el centro hacia fuera. */
.bt-filete[data-bt-centro]::after{ left:50%; margin-left:-1.3em; transform-origin:center; }

/* — El momento de autor de la portada — */
.bt-hero-foto{
  transform:scale(1.06);
  transition-property:transform !important;
  transition-duration:2400ms !important;
  transition-timing-function:var(--bt-out) !important;
  will-change:transform;
}
.bt-hero-foto.bt-visto{ transform:scale(1); }
/* El zoom escala la sección entera: durante 2,4s mide un 6% más que la pantalla y la
   página se podía arrastrar de lado. clip recorta sin crear zona de scroll (hidden sí la
   crearía, y rompería lo que vaya fijo o pegajoso dentro). */
:has(> .bt-hero-foto){ overflow-x:clip; }

/* — LÁMINA: un solo barrido sobre el botón principal al entrar en pantalla.
     Una vez. El pan de oro brilla cuando lo giras; no late. — */
.bt-lamina{ position:relative; overflow:hidden; }
.bt-lamina::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform:translateX(-120%);
}
.bt-lamina.bt-visto::before{
  transition:transform 1400ms cubic-bezier(.33,0,.2,1) 520ms;
  transform:translateX(120%);
}

@media (prefers-reduced-motion: reduce){
  /* Menos movimiento no es menos web: se retira todo desplazamiento y toda
     máscara, y se conservan color, velos y legibilidad. */
  [data-bt-rev], [data-bt-rev].bt-visto,
  .bt-hero-foto, .bt-hero-foto.bt-visto,
  .bt-filete::after, .bt-filete.bt-visto::after{
    opacity:1 !important; transform:none !important; filter:none !important;
    clip-path:none !important; transition:none !important;
  }
  .bt-filete::after{ transform:scaleX(1) !important; }
  .bt-lamina::before{ display:none; }
  .bt-card:hover{ transform:none; }
  .bt-card__img, .bt-card:hover .bt-card__img{ transform:none; }
}

/* ==========================================================================
   7 · Ritmo y detalle
   ========================================================================== */
/* Las fotos de fondo no se pixelan al escalar en pantallas densas. */
[style*="background:url"], [style*="background-image"]{ background-position:center; background-size:cover; }

/* Hueco bajo la cabecera fija para los saltos internos. */
:target{ scroll-margin-top:calc(var(--bt-hdr,96px) + 20px); }

/* Impresión: que una reserva impresa sea legible. */
@media print{
  .elementor-location-header, .elementor-location-footer, #bt-cc, .btr-btn{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; color:#555; }
}


/* ==========================================================================
   8 · Composición vertical de los héroes
   Medido: el hero de la portada mide 950px en un móvil de 844 (se sale) y deja
   entre un 29 % y un 37 % de cielo vacío por encima del titular. No es aire
   generoso: es el contenido caído al fondo de una caja demasiado alta.
   ========================================================================== */
.bt-hero-foto{
  /* Que la siguiente sección asome. Es la forma honesta de decir «hay más
     abajo», mejor que escribir la palabra «Scroll». */
  min-height:min(88svh, 860px) !important;
  display:flex !important;
  align-items:flex-end !important;
}
/* 🔴 El alto no lo mandaba la sección: lo mandaba su contenedor interior, con
   un min-height propio de 759px. Sumado al relleno daba 950px de hero en una
   pantalla de 844. Se anula ahí, que es donde estaba. */
.bt-hero-foto > .elementor-container{ min-height:0 !important; }
@media (max-width:1024px){
  .bt-hero-foto{
    min-height:min(84svh, 720px) !important;
    padding-top:92px !important;     /* deja pasar la cabecera de 80px */
    padding-bottom:44px !important;
  }
}

/* Banners de página interior: medían 180px con un titular de 52px encima,
   aplastado contra la cabecera. Se les da altura suficiente para respirar,
   pero NO altura de hero: son una banda, no una portada. */
.bt-banner{
  min-height:clamp(230px, 34svh, 380px) !important;
  display:flex !important;
  align-items:center !important;
}
.bt-banner > .elementor-container{ min-height:0 !important; }
.bt-banner .elementor-heading-title{ margin-bottom:.4rem; }
@media (max-width:1024px){
  .bt-banner{ min-height:clamp(190px, 30svh, 280px) !important; padding-top:88px !important; }
}

/* ==========================================================================
   9 · Tarjetas de alojamiento
   Son HTML suelto dentro de un editor de texto, con la foto como fondo de un
   div con aspect-ratio. La elevación aparece solo al apuntar, y la foto se
   acerca un 3,5 %: lo justo para que la tarjeta conteste sin moverse de sitio.
   ========================================================================== */
.bt-card{ position:relative; }
.bt-card__img{ transform-origin:center 55%; }
@media (hover:hover) and (pointer:fine){
  .bt-card:hover{ transform:translateY(-5px); box-shadow:var(--bt-sh-3); }
}


/* ==========================================================================
   10 · Contraste (WCAG AA)
   Auditoría mecánica sobre el sitio en vivo, 10 páginas × 2 anchuras:
   **224 elementos por debajo de AA**, en 9 causas. Esto las cierra.
   El oro de marca #C99417 da 2,72:1 sobre blanco, 2,55:1 sobre crema y
   2,25:1 sobre crema tintada. En texto pequeño no es legible: por eso existe
   --bt-gold-ink, el mismo tono (H=42°) oscurecido hasta pasar 4,5:1 en los
   tres fondos. Sobre fondo OSCURO el oro de marca sí cumple y no se toca:
   ahí siguen el logo, el menú y las cejillas de los héroes.
   ========================================================================== */
:root{
  --bt-gold-ink: #87630F;   /* 5,49:1 blanco · 5,17:1 crema · 4,56:1 crema tintada */
}

/* 🔴 CUALQUIER enlace con fondo de color ES un botón, aunque no lleve la clase.
   El sitio tiene una regla global que pinta TODO enlace de oro y lo subraya, con
   !important. Un botón de fondo oro acababa con texto oro sobre oro: 1,66:1,
   ilegible. Pasaba en «Ver las tres casas» y «Ver disponibilidad».
   Esta regla lo cierra para siempre, también para botones que se creen mañana. */
/* 🔴 LECCIÓN DEL 26-09-2026: estas reglas llevaban `a.btlink-btn[style*="background"]` a
   secas, y el sitio usa `btlink-btn` también en las TARJETAS CON FOTO de fiestas, destinos
   y experiencias (fondo `linear-gradient(...), url(foto)`). El `background-image:none` les
   borraba la foto: 13 páginas con tarjetas en blanco y títulos blancos sobre crema. Ahora
   solo cuenta como botón lo que tiene fondo LISO: nunca si el estilo lleva url( o gradient. */
a[style*="background:#C99417"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#c99417"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#E0B443"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#e0b443"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background: #C99417"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background: #c99417"]:not([style*="url("]):not([style*="gradient"]),
a.btlink-btn[style*="background"]:not([style*="url("]):not([style*="gradient"]){
  color:#1C1C1C !important;
  text-decoration:none !important;
  background-image:none !important;
}
/* Y si el fondo del botón es oscuro, el texto va en crema. */
a[style*="background:#1C1C1C"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#211E1B"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#2A2620"]:not([style*="url("]):not([style*="gradient"]),
a[style*="background:#33432F"]:not([style*="url("]):not([style*="gradient"]){
  color:#F6F0E2 !important;
  text-decoration:none !important;
  background-image:none !important;
}

/* Subtítulos de tarjeta: 4,23:1. Falta poco, pero falta. */
[style*="color:#7c766c"], [style*="color:#7C766C"]{ color:#767067 !important; }
/* Nota de la ficha técnica: 4,41:1 */
.btr-ficha__n{ color:#767064 !important; }

/* Grises de metadatos sobre claro, escritos a mano en el contenido */
[style*="color:#a49b8a"], [style*="color:#A49B8A"]{ color:#7B7468 !important; }
[style*="color:#a89f8b"], [style*="color:#A89F8B"]{ color:#6F6753 !important; }  /* 2,18:1 → 4,66:1 */
[style*="color:#a49d90"], [style*="color:#A49D90"]{ color:#746F66 !important; }

/* ==========================================================================
   11 · Rejillas escritas a mano en el contenido
   Medido el 26-09-2026 a 390 y 320px sobre las 212 URLs: el 100% de las páginas
   se podía arrastrar de lado. Las rejillas en línea de las páginas (1fr 1fr en 86,
   repeat(3,1fr) en 52, repeat(4,1fr) en 20…) no tenían versión móvil: la home medía
   543px de ancho en un iPhone. Un 1fr no encoge por debajo de su palabra más larga,
   así que las columnas empujaban hacia fuera en vez de estrecharse.
   Se tocan aquí, por el patrón del estilo en línea, y no en las ~250 páginas.
   ========================================================================== */
/* Base: un hijo de rejilla puede encoger, y una palabra larga parte antes que desbordar. */
[style*="grid-template-columns"] > *{ min-width:0; overflow-wrap:break-word; }
[style*="minmax(230px,1fr)"]{ grid-template-columns:repeat(auto-fill, minmax(min(230px,100%), 1fr)) !important; }
[style*="minmax(180px,1fr)"]{ grid-template-columns:repeat(auto-fit, minmax(min(180px,100%), 1fr)) !important; }

@media (max-width:767px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  /* foto + texto (Cómo llegar): una sola columna ya en tablet vertical */
  [style*="grid-template-columns:1.1fr 1fr"]{ grid-template-columns:minmax(0,1fr) !important; gap:26px !important; }
}
@media (max-width:560px){
  /* A una columna: cajas de texto de hasta 280 caracteres, listas de hasta 177 y
     tarjetas con foto. En dos columnas de ~150px quedaban palabras sueltas por línea. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:minmax(0,1fr) !important; }
  /* Las 4 columnas se quedan en 2 cuando son etiquetas («Calefacción», «WiFi»: fichas).
     Si cada tarjeta lleva título + descripción (servicios de la portada), a una: en dos
     columnas de ~140px el título ocupaba 3 líneas y la descripción 2-3 palabras por línea,
     y una columna mide lo mismo de alto (4 filas × ~260px ≈ 8 × ~130px). */
  [style*="grid-template-columns:repeat(4,1fr)"]:has(> * > * + *){ grid-template-columns:minmax(0,1fr) !important; }
}

/* ==========================================================================
   12 · Fondos diferidos (26-09-2026)
   Medido en móvil (4G lento): la portada pedía sus 11 fotos de fondo en el mismo
   milisegundo, 8 de ellas entre 7.000 y 11.000 px más abajo, y el hero tardaba 22,5 s.
   Elementor trae esta misma técnica, pero solo para contenedores (.e-con): esta web
   está hecha con secciones y no le hacía nada.
   Desde la 3.ª sección de la página, ni la sección ni nada dentro baja su fondo hasta
   que bt-sistema.js le pone .bt-bg-ok, 800 px antes de que llegue a la pantalla.
   Sin JS no pasa nada: la clase del <html> la pone un script del <head>, que además la
   retira si sistema.js no llega a arrancar.
   🔴 velos() y contraste() NO deciden sobre una sección pendiente (verían «sin foto»):
      la repasan cuando le llega su fondo.
   ========================================================================== */
@media screen{
  html.bt-lazybg .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-top-section:nth-of-type(n+3):not(.bt-bg-ok),
  html.bt-lazybg .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-top-section:nth-of-type(n+3):not(.bt-bg-ok) *{
    background-image:none !important;
  }
}