/* ============================================================
   Casa Aluxes — sistema de diseño
   Misma plantilla que frateryucatan.com (Esencia Stays). Lo único que
   cambia entre propiedades son los 3 tokens de color y el serif de
   display. Estructura, tamaños de foto y espaciados: idénticos.

   Frater      ->  Casa Aluxes
   --verde     ->  --tabaco  #2E3A30 -> #3A2109
   --salvia    ->  --barro   #5D7261 -> #683B10  (extraído del logo)
   --arena     ->  --ambar   #C9A961 -> #F29100  (extraído del logo)
   Italiana    ->  Cormorant Garamond
   ============================================================ */
:root{
  --tabaco:#3A2109; --barro:#683B10; --ambar:#F29100;
  --tinta:#241E17; --gris:#726B60; --gris2:#9E968A;
  --linea:#E8E2D8; --papel:#FFF; --crema:#FBF8F3;
  --r:14px; --max:1280px; --hdr:66px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:450;font-size:16px;line-height:1.55;color:var(--tinta);
  background:var(--papel);-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* tipografía: una familia, pesos 450/550, tracking negativo en títulos */
h1,h2,h3{font-weight:550;letter-spacing:-0.02em;line-height:1.12}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:1rem;letter-spacing:-0.01em}
.display{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:.005em}
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);font-weight:500}
.lead{font-size:1.02rem;color:var(--gris);max-width:64ch}
.mut{color:var(--gris)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;cursor:pointer;font-weight:550;
  padding:12px 24px;background:var(--tabaco);color:#fff;
  transition:transform .15s,background .2s;white-space:nowrap;
}
.btn:hover{background:#261505;transform:translateY(-1px)}
.btn.claro{background:#F3EEE6;color:var(--tinta)}
.btn.claro:hover{background:#E9E1D5}
.btn.bloque{width:100%;padding:16px;font-size:1rem}
.pill{display:inline-block;background:#F3EEE6;border-radius:999px;padding:9px 18px;font-size:.86rem;font-weight:500}

/* ---------- aviso + header ---------- */
.avisos{background:var(--tabaco);color:#fff;font-size:.79rem;text-align:center;padding:9px 20px}
.avisos b{font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s}
header.pegado{border-color:var(--linea)}
.hdr{display:flex;align-items:center;gap:20px;height:var(--hdr)}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap;
  font-family:'Cormorant Garamond',serif;font-size:1.32rem;letter-spacing:.11em}
.logo img{height:34px;width:auto;flex-shrink:0}
/* El nombre de esta propiedad es mucho más largo que el de Frater ("CASA
   ALUXES" vs "FRATER"). Con el tamaño de escritorio el logo se partía en
   dos líneas en el teléfono y empujaba el idioma y la hamburguesa fuera de
   la pantalla: no había forma de abrir el menú. Si cambias el nombre de la
   marca, revisa esto en un viewport de 360 px. */
@media(max-width:760px){
  .hdr{gap:10px}
  .logo{font-size:1.02rem;letter-spacing:.05em;gap:7px}
  .logo img{height:26px}
}
@media(max-width:380px){
  .logo{font-size:.92rem}
  .logo img{height:22px}
}
.nav{display:flex;gap:24px;font-size:.875rem;margin-left:auto}
.nav a{color:var(--gris);transition:color .2s}
.nav a:hover{color:var(--tinta)}

/* buscador que se ancla al header al hacer scroll */
.busc-hdr{margin-left:auto;opacity:0;pointer-events:none;transform:translateY(6px);transition:.28s}
header.pegado .busc-hdr{opacity:1;pointer-events:auto;transform:none}
header.pegado .nav{display:none}

/* ---------- buscador ---------- */
.buscador{
  display:flex;align-items:center;background:#fff;border-radius:999px;
  box-shadow:0 10px 44px rgba(0,0,0,.2);padding:6px 6px 6px 8px;gap:2px;
  flex-wrap:wrap;justify-content:center;
}
.campo{display:flex;flex-direction:column;align-items:flex-start;padding:8px 18px;border-radius:999px;transition:background .2s;position:relative;min-width:136px}
.campo:hover{background:#F6F4F0}
.campo+.campo::before{content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--linea)}
.campo label{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.campo input,.campo select{border:0;background:none;font:inherit;font-size:.9rem;padding:2px 0;outline:none;width:100%;cursor:pointer;color:var(--tinta)}
.buscador .btn{padding:13px 26px}
.busc-hdr .buscador{box-shadow:0 2px 14px rgba(0,0,0,.09);padding:4px 4px 4px 6px}
.busc-hdr .campo{padding:5px 13px;min-width:104px}
.busc-hdr .campo label{font-size:.58rem}
.busc-hdr .campo input,.busc-hdr .campo select{font-size:.8rem}
.busc-hdr .btn{padding:9px 18px;font-size:.84rem}

/* ---------- secciones ---------- */
section{padding:76px 0}
.cabeza{margin-bottom:32px;max-width:70ch}
.cabeza h2{margin:10px 0 12px}

/* ---------- tarjeta de habitación (patrón de 4 líneas) ---------- */
.rejilla{display:grid;gap:28px 20px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.hab{display:block}
.hab-foto{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#EFE8DE}
.hab-foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.hab:hover .hab-foto img{transform:scale(1.045)}
.etiqueta{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.95);border-radius:999px;padding:5px 12px;font-size:.7rem;font-weight:600}
.hab-cat{font-size:.78rem;color:var(--gris);margin-top:11px}
.hab-nom{font-weight:600;font-size:.95rem;margin-top:2px;letter-spacing:-0.01em}
.hab-precio{font-size:.9rem;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hab-specs{font-size:.82rem;color:var(--gris);margin-top:2px}
.estrella{color:var(--ambar)}

/* ---------- tira de instalaciones: una sola línea ----------
   Scroll horizontal con desbordamiento a sangre (rompe el .wrap a
   propósito, como en Wander). Sin flechas ni puntos: el arrastre basta.
   Se apoya en scroll-snap para que nunca quede una foto a medias. */
/* Se intentó dos veces sacar la tira a sangre calculando el margen con
   100vw y luego con 100%. Las dos fallaron: 100vw incluye la barra de
   scroll y desplazaba la página entera, y 100% se vuelve circular porque
   el propio padding ensancha el contenedor (acabó midiendo 1660px dentro
   de una ventana de 1440). Ahora se alinea con el resto del contenido,
   sin cálculos: predecible y siempre cuadrado con los títulos. */
.tira{
  display:flex;gap:14px;margin:44px auto 0;
  max-width:var(--max);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 24px 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tira::-webkit-scrollbar{display:none}
/* La tira de instalaciones puede llevar título propio (.cabeza-tira). Cuando
   lo lleva, el aire superior lo pone la cabeza y no la tira, para que el
   título quede pegado a sus fotos y no flotando entre dos bloques. */
.cabeza-tira{margin-top:60px;margin-bottom:22px}
.tira.con-titulo{margin-top:0}
@media(max-width:760px){.cabeza-tira{margin-top:42px}}
.tira figure{flex:0 0 clamp(216px,26vw,300px);scroll-snap-align:start;margin:0}
.tira img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r);background:#EFE8DE;display:block;
  transition:transform .55s;
}
.tira figure:hover img{transform:scale(1.03)}
.tira figcaption{
  margin-top:10px;font-size:.8rem;color:var(--gris);letter-spacing:-0.005em;
}

/* ---------- tarjetas genéricas ---------- */
.tarjetas3{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:24px}
.tarjeta .ic{width:34px;height:34px;border-radius:9px;background:var(--tabaco);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.tarjeta p{font-size:.87rem;color:var(--gris);margin-top:6px}

/* ---------- reseñas ---------- */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:16px}
.resena{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.resena .est{color:var(--ambar);letter-spacing:.1em;font-size:.88rem;margin-bottom:10px}
.resena q{font-size:.89rem;line-height:1.62;color:#3E3529;flex:1;quotes:none}
.resena footer{display:flex;align-items:center;gap:10px;margin-top:18px}
.av{width:34px;height:34px;border-radius:50%;background:var(--barro);color:#fff;display:grid;place-items:center;font-size:.74rem;font-weight:600;flex-shrink:0}
.resena .quien{font-weight:600;font-size:.85rem}
.resena .meta{font-size:.73rem;color:var(--gris)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{padding:20px 0;cursor:pointer;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gris);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 20px;color:var(--gris);font-size:.92rem;max-width:82ch}

/* ---------- pie ---------- */
footer.pie{border-top:1px solid var(--linea);padding:48px 0 40px;font-size:.86rem;color:var(--gris)}
.pie-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.pie-cols h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta);margin-bottom:12px;font-weight:600}
.pie-cols a{display:block;padding:3px 0}
.pie-cols a:hover{color:var(--tinta)}

/* ---------- barra fija móvil ---------- */
.movil{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--linea);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:none;align-items:center;gap:14px;
}
.movil .txt{font-size:.77rem;line-height:1.3}
.movil .txt b{font-size:.92rem}
.movil .btn{margin-left:auto;padding:12px 22px}

@media(max-width:900px){.pie-cols{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:760px){
  .nav{display:none}
  /* El buscador del encabezado se ocultaba sólo al hacer scroll, pero aun
     con opacity:0 seguía ocupando lugar en la fila flex y empujaba el
     idioma y la hamburguesa fuera de la pantalla. En móvil se quita del
     layout por completo: el CTA de reservar ya vive en la barra inferior. */
  .busc-hdr{display:none}
  .buscador{flex-direction:column;border-radius:20px;align-items:stretch;padding:8px;width:100%}
  .campo{width:100%;min-width:0}
  .campo+.campo::before{left:16px;right:16px;top:0;width:auto;height:1px}
  .buscador .btn{width:100%;margin-top:6px}
  .movil{display:flex}
  body{padding-bottom:78px}
  section{padding:54px 0}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 14px}
}

@media(max-width:760px){.motor{padding:48px 0 60px}}



/* ---------- comparativa de tarifas (Rate Checker) ---------- */
.compara{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.compara-fila{display:flex;align-items:center;gap:11px;padding:14px 18px;font-size:.93rem;
  border-bottom:1px solid var(--linea)}
.compara-fila:last-child{border-bottom:0}
.compara-fila.directa{background:#F7F1E9}
.punto{width:8px;height:8px;border-radius:50%;background:var(--tabaco);flex-shrink:0}
.punto.gris{background:var(--gris2)}
.chip{background:#F0E3D2;color:var(--tabaco);border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:600}
.monto{margin-left:auto;font-weight:600;white-space:nowrap}
.monto.mut{font-weight:450;color:var(--gris2)}
@media(max-width:520px){.compara-fila{font-size:.86rem;padding:12px 14px}.chip{display:none}}


/* ---------- date picker de Cloudbeds ---------- */
/* IMPORTANTE: el componente de Cloudbeds ya dibuja su propio pill blanco.
   Nuestro contenedor NO debe pintar fondo, borde, sombra ni padding: si lo
   hace queda una caja dentro de otra caja y el botón se desborda.
   Aquí solo posicionamos y damos la elevación con drop-shadow, que sigue
   la silueta real del componente en vez de dibujar un rectángulo aparte. */
.picker-caja{
  display:inline-block;width:auto;max-width:100%;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  overflow:visible;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.22));
}
.picker-caja cb-property-date-picker,
.picker-caja cb-accommodation-date-picker{display:inline-block;max-width:100%}

/* variante del widget lateral: sin elevación, y sí llena la columna */
.picker-caja.plano{filter:none}
.picker-caja.plano cb-property-date-picker,
.picker-caja.plano cb-accommodation-date-picker{display:block;width:100%}

/* el calendario se dibuja en un portal al final del body: que nada lo recorte */
.cb-portal{z-index:1500}
.aside,.widget,.cols,main{overflow:visible}
@media(max-width:760px){
  .picker-caja,.picker-caja cb-property-date-picker{display:block;width:100%}
}


/* ============================================================
   PÁGINAS INTERIORES  ·  v6
   Estilos que necesitan galería, ubicación, habitaciones y blog.
   Rescatados del sitio anterior y remapeados a los tokens nuevos:
   el contenido no cambió, solo dejó de traer su propia hoja de estilos.
   ============================================================ */

/* ---------- sistema bilingüe ----------
   Cada bloque de texto existe dos veces, marcado con data-lang.
   El CSS enseña uno y esconde el otro según <html lang>.
   No tocar: es lo que mantiene viva la versión en inglés. */
/* Va con !important a propósito. Esto no es estilo, es un contrato: el
   idioma que no toca NUNCA debe verse. Sin él, cualquier regla de
   componente que ponga display sobre un span lo pisa por especificidad
   y la página aparece en los dos idiomas a la vez. Pasó con .dato span. */
[data-lang="en"]{display:none !important}
html[lang="en"] [data-lang="es"]{display:none !important}
html[lang="en"] [data-lang="en"]{display:revert !important}
html[lang="en"] a[data-lang="en"],
html[lang="en"] button[data-lang="en"]{display:inline-flex !important}

/* Píldora ES/EN. Va al extremo derecho del encabezado y NO se esconde
   nunca: ni al hacer scroll ni en móvil. Es la única forma que tiene un
   huésped extranjero de leer el sitio. */
.langtoggle{display:flex;gap:2px;margin-left:16px;flex-shrink:0;
  border:1px solid var(--linea);border-radius:999px;padding:3px;background:#fff}
.langtoggle button{background:none;border:0;cursor:pointer;font:inherit;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--gris);
  padding:5px 11px;border-radius:999px;line-height:1;transition:.18s}
.langtoggle button:hover{color:var(--tinta)}
.langtoggle button.active{background:var(--tabaco);color:#fff}
@media(max-width:760px){.langtoggle{margin-left:auto}}

/* ---------- encabezado de página interior ----------
   Mismo degradado concentrado abajo que el hero de la home, para que
   el contraste del título siga siendo AAA sobre cualquier foto. */
.pagehero{position:relative;min-height:46vh;display:flex;align-items:flex-end;
  padding:0 0 44px;overflow:hidden;margin-bottom:0}
.pagehero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.pagehero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(28,16,6,0) 0%, rgba(28,16,6,.20) 34%, rgba(28,16,6,.70) 60%, rgba(28,16,6,.88) 100%)}
.pagehero-inner{position:relative;z-index:2;width:100%;color:#fff}
.pagehero-inner h1{margin:10px 0 12px}
.pagehero-inner p{color:rgba(255,255,255,.93);max-width:58ch;font-size:1.02rem}
.breadcrumb{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.pagehero{min-height:0;padding:96px 0 34px}}

.sec-head{max-width:70ch;margin-bottom:32px}
.sec-head h2{margin:10px 0 12px}
.sec-head p{color:var(--gris);max-width:64ch}

/* ---------- galería ---------- */
.gallery-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.gallery-filters .btn{background:#F3EEE6;color:var(--tinta);padding:9px 18px;font-size:.86rem;font-weight:500}
.gallery-filters .btn.active{background:var(--tabaco);color:#fff}
.gallerygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.gallerygrid figure,.gallerygrid .ph{margin:0;border-radius:var(--r);overflow:hidden;background:#EFE8DE;aspect-ratio:4/5}
.gallerygrid img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.gallerygrid figure:hover img,.gallerygrid .ph:hover img{transform:scale(1.04)}

/* ---------- ubicación ---------- */
.locwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.mapbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);min-height:340px}
.mapbox iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.loc-facts{display:flex;flex-direction:column}
.loc-fact{display:flex;justify-content:space-between;gap:20px;padding:12px 0;
  border-bottom:1px solid var(--linea);font-size:.92rem}
.loc-fact:last-child{border-bottom:0}
.loc-fact span:last-child{color:var(--gris);white-space:nowrap}
.archstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:36px}
.archstrip img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;width:100%}
@media(max-width:900px){.locwrap{grid-template-columns:1fr;gap:30px}}

/* ---------- detalle de habitación en la página índice ---------- */
.roomdetail{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;
  padding:52px 0;border-bottom:1px solid var(--linea)}
.roomdetail:last-child{border-bottom:0}
.roomdetail:nth-child(even) .roomdetail-photos{order:2}
.roomdetail-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roomdetail-photos img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;width:100%}
.roomdetail-photos img:first-child{grid-column:1/-1;aspect-ratio:16/10}
.roomfeatures{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 22px}
.roomtag{background:#F3EEE6;border-radius:999px;padding:6px 14px;font-size:.79rem;font-weight:500}
@media(max-width:900px){
  .roomdetail{grid-template-columns:1fr;gap:24px;padding:36px 0}
  .roomdetail:nth-child(even) .roomdetail-photos{order:0}
}

/* ---------- pilares ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pillar{text-align:center}
.pillar .iconwrap{width:74px;height:74px;border-radius:50%;background:#F3EEE6;
  display:grid;place-items:center;margin:0 auto 16px}
.pillar h3{margin-bottom:6px}
.pillar p{color:var(--gris);font-size:.9rem;max-width:34ch;margin:0 auto}
@media(max-width:760px){.pillars{grid-template-columns:1fr;gap:32px}}

/* ---------- blog ---------- */
.blogcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:28px 22px}
.blogcard{display:block}
.blogcard img{border-radius:var(--r);aspect-ratio:16/10;object-fit:cover;width:100%;
  background:#EFE8DE;transition:transform .55s}
.blogcard:hover img{transform:scale(1.03)}
.blogcard .cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--barro);margin-top:14px;font-weight:600}
.blogcard h3{margin:6px 0 6px;font-size:1.05rem;line-height:1.28}
.blogcard p{font-size:.88rem;color:var(--gris)}
.article-meta{font-size:.78rem;color:var(--gris);letter-spacing:.04em}

/* cuerpo del artículo: medida corta y ritmo generoso, es para leer */
.article-body{max-width:68ch}
.article-body h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:38px 0 12px}
.article-body h3{font-size:1.02rem;margin:26px 0 8px}
.article-body p{margin-bottom:16px;line-height:1.72}
.article-body ul,.article-body ol{margin:0 0 18px 22px}
.article-body li{margin-bottom:7px;line-height:1.66}
.article-body img{border-radius:var(--r);margin:26px 0;width:100%}
.article-body a{color:var(--barro);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{border-left:2px solid var(--barro);padding-left:20px;
  margin:26px 0;color:var(--gris)}
.article-cta{background:var(--crema);border:1px solid var(--linea);border-radius:var(--r);
  padding:28px;margin:40px 0 0;max-width:68ch}
.article-cta h3{margin-bottom:8px}
.article-cta p{color:var(--gris);font-size:.92rem;margin-bottom:18px}

/* el botón del sitio anterior se llamaba distinto: lo alineamos */
.btn-primary{background:var(--tabaco);color:#fff}
.btn-primary:hover{background:#261505}


/* ---------- menú móvil ----------
   En pantallas chicas la navegación de escritorio se esconde. Sin un
   menú que la sustituya, quien entra desde el teléfono no puede llegar
   a Galería, Ubicación ni al blog: se queda encerrado en una página.
   Y la mayoría del tráfico de un hotel llega desde el teléfono. */
.hamburguesa{display:none;background:none;border:0;cursor:pointer;
  width:38px;height:38px;padding:9px;margin-left:12px;flex-shrink:0}
.hamburguesa span{display:block;height:2px;background:var(--tinta);border-radius:2px;
  transition:transform .25s,opacity .2s}
.hamburguesa span+span{margin-top:5px}
.hamburguesa.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa.abierto span:nth-child(2){opacity:0}
.hamburguesa.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-movil{display:none;flex-direction:column;gap:2px;
  padding:14px 24px 26px;border-top:1px solid var(--linea);background:#fff}
.menu-movil.abierto{display:flex}
.menu-movil a{padding:13px 0;font-size:1.02rem;border-bottom:1px solid var(--linea)}
.menu-movil a:last-child{border-bottom:0}
.menu-movil a.btn{border-bottom:0;justify-content:center;margin-bottom:6px}

@media(max-width:760px){
  .hamburguesa{display:block}
  .langtoggle{margin-left:auto}
}
@media(min-width:761px){
  .menu-movil{display:none !important}
}

/* ---------- datos duros de la portada ---------- */
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:30px 0}
.dato{text-align:center}
.dato b{display:block;font-size:1.9rem;letter-spacing:-0.03em;font-weight:550;line-height:1}
.dato span{display:block;font-size:.78rem;color:var(--gris);margin-top:7px}
@media(max-width:700px){.datos{grid-template-columns:repeat(2,1fr);gap:26px 20px}}

/* ---------- lista de servicios ---------- */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 28px}
.servicio{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.93rem}
.servicio::before{content:"—";color:var(--barro);flex-shrink:0}

/* enlace de "ver todo" al lado de un título */
/* .cabeza limita a 70ch para que los párrafos se lean bien, pero eso anulaba
   el space-between de .cabeza-fila: el enlace "ver todo" caía a media página
   en vez de alinearse a la derecha, y según el largo del título unas veces
   quedaba en línea y otras se bajaba. La fila ocupa el ancho completo. */
.cabeza-fila{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;max-width:none}
.cabeza-fila h2{max-width:70ch}
.vertodo{font-size:.88rem;color:var(--barro);white-space:nowrap}
.vertodo:hover{text-decoration:underline;text-underline-offset:4px}

/* Red de seguridad: ningún elemento debe poder ensanchar la página.
   Si algo desborda a lo ancho, el navegador desplaza TODO el sitio y
   el encabezado aparece cortado. Con clip se recorta sin romper el
   position:sticky del encabezado (overflow:hidden sí lo rompería). */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}


/* ============================================================
   Bloques de la portada (en Frater viven inline en index.html;
   aquí van en la hoja compartida para que las subpáginas puedan
   reutilizar .mitades y .cierre sin duplicar CSS).
   ============================================================ */

/* hero full-bleed — foto limpia arriba, degradado concentrado abajo.
   El texto vive en la zona donde la opacidad es >=0.78, lo que garantiza
   contraste AAA (>7:1) incluso sobre las partes más claras de la foto. */
.hero{position:relative;width:100%;height:68vh;min-height:520px;max-height:760px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:0 24px 46px;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Cuánto oscurecer: el texto es blanco puro (luminancia 1.0). Para
   contraste AA (4.5:1) el fondo compuesto no puede pasar de 0.183 de
   luminancia. La zona más clara de esta foto —los cojines— está en 0.68.
   Despejando, hace falta opacidad >=0.74 justo donde cae el texto, y
   >=0.86 para AAA. El degradado anterior daba 0.45 a la altura del
   antetítulo: ahí es donde se leía mal. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,16,6,0)    0%,
    rgba(28,16,6,.10) 18%,
    rgba(28,16,6,.55) 32%,
    rgba(28,16,6,.84) 44%,
    rgba(28,16,6,.89) 62%,
    rgba(28,16,6,.92) 100%)}
.hero-txt{position:relative;z-index:2;color:#fff;max-width:880px}
.hero-txt .eyebrow{color:rgba(255,255,255,.90)}
.hero-txt h1{margin:12px 0 12px}
.hero-txt p{color:rgba(255,255,255,.94);font-size:1.02rem;max-width:56ch;margin:0 auto}
.hero .buscador{position:relative;z-index:3;margin-top:26px;max-width:820px;width:100%}
.hero-nota{position:relative;z-index:3;margin-top:12px;font-size:.79rem;color:rgba(255,255,255,.9)}
/* las habitaciones arrancan de inmediato: sin subtítulo, solo el título */
#habitaciones{padding-top:34px;padding-bottom:64px}
#habitaciones .cabeza{margin-bottom:20px}
.hab-ver{font-size:.82rem;color:var(--barro);margin-top:5px;opacity:0;transform:translateY(-3px);transition:.22s}
.hab:hover .hab-ver,.hab:focus-visible .hab-ver{opacity:1;transform:none}
@media(hover:none){.hab-ver{opacity:1;transform:none}}
.mitades{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mitades img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.cierre{background:var(--tabaco);color:#fff;border-radius:20px;padding:58px 40px;text-align:center;margin:0 24px 76px}
.cierre p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 24px}
.cierre .btn{background:#fff;color:var(--tabaco)}
@media(max-width:900px){.mitades{grid-template-columns:1fr;gap:26px}}

/* En móvil el hero deja de tener altura fija y se ajusta al contenido.
   El degradado, al ser porcentual, se comprime: el título acababa cayendo
   sobre la parte clara de la foto (las palmas) y se leía mal.
   Aquí el oscurecimiento arranca antes y llega más abajo, para que el
   texto siempre esté sobre una zona con opacidad >=0.78. */
@media(max-width:760px){
  .hero{height:auto;min-height:0;padding:44px 20px 34px}
  .hero::after{background:linear-gradient(180deg,
    rgba(28,16,6,.30)   0%,
    rgba(28,16,6,.55)  22%,
    rgba(28,16,6,.80)  45%,
    rgba(28,16,6,.88)  70%,
    rgba(28,16,6,.92) 100%)}
  .hero-txt h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .hero-txt p{font-size:.96rem}
}