/* =========================================================================
   Tema `lasiesta` — La Siesta Motel y Steak House, Hermosillo.

   LA REGLA DE LA QUE SALE TODO LO DEMÁS:
   el hotel manda y la parrilla entra como invitada, con su propia piel y
   en su propio territorio. Nunca revueltos. De ahí:

     · el hero de la portada es del hotel, nunca comida;
     · ninguna banda de fondo es verde — el verde del logotipo solo firma
       (botones, filetes, cifras);
     · el Steak House vive en bandas "noche" con otra tipografía y otro
       acento, y se lee como otra casa.

   Paleta y tipografía FIJAS por marca: este tema no lee appearance.colors
   ni appearance.fonts. Sí respeta appearance.custom_css.

   Todos los tokens llevan prefijo --ls- y todas las clases prefijo ls-.
   Mobile first: lo que está fuera de @media es la versión de celular.
   ========================================================================= */

:root{
  /* papel: el territorio del hotel */
  --ls-hueso:   #F8F5EE;
  --ls-blanco:  #FFFFFF;
  --ls-arena:   #EFE7D8;
  --ls-tinta:   #2A241C;
  --ls-tenue:   #6E6558;
  --ls-linea:   #E2DACA;

  /* firma: el verde del logotipo, solo en botones, filetes y cifras.
     2026-09-25: muestreados del LOGOTIPO NUEVO (BRANDING/*.ai), no del
     letrero viejo. El verde subio de #1B4A2E a #255A2F y la marca ahora
     trae un oro propio, el de la version sobre verde. */
  --ls-verde:       #255A2F;
  --ls-verde-claro: #2F6E3C;
  --ls-oro:         #DCCB79;
  --ls-barro:       #A65A3A;   /* acento cálido del hotel */

  /* noche: el territorio de la parrilla */
  --ls-noche:       #16130F;
  --ls-noche-sup:   #1E1A15;
  --ls-brasa:       #C4552E;
  --ls-crema:       #F2EBE1;
  --ls-tenue-noche: rgba(242,235,225,.72);
  --ls-linea-noche: rgba(242,235,225,.2);

  /* tipografía */
  /* Una sola letra de titulo: Bitter.
     Historia de la decision (2026-09-25): Newsreader se veia generica,
     Bodoni Moda demasiado delgada al lado del logotipo y Anton demasiado
     gruesa y ademas sin serifa. Bitter cae justo en medio de grosor, es
     serifa de losa de trazo parejo y esta dibujada para pantalla, asi que
     aguanta desde los 66 px del hero hasta los 17 px de los nombres de los
     cortes. Trae cursiva, que las reseñas necesitan. */
  --ls-display: "Bitter", Georgia, "Times New Roman", serif;
  --ls-texto:   "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ls-fuerte:  "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* métrica */
  --ls-gutter: clamp(18px, 5vw, 60px);
  --ls-maxw:   1220px;
  --ls-barra:  64px;
}

/* ---------------------------------------------------------------- base -- */
.ls-root{
  margin:0;
  background:var(--ls-hueso);
  color:var(--ls-tinta);
  font-family:var(--ls-texto);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
.ls-root *{box-sizing:border-box;min-width:0}
.ls-root img,.ls-root video{max-width:100%;height:auto;display:block}
.ls-root a{color:inherit}
.ls-root :focus-visible{outline:2px solid var(--ls-verde);outline-offset:3px}

.ls-wrap{max-width:var(--ls-maxw);margin-inline:auto;padding-inline:var(--ls-gutter)}

.ls-root h1,.ls-root h2,.ls-root h3{
  font-family:var(--ls-display);
  font-optical-sizing:auto;
  font-weight:600;
  line-height:1.08;
  letter-spacing:0;
  text-wrap:balance;
  margin:0;
}
.ls-root p{margin:0}

/* etiqueta de sección: versalitas en barro */
.ls-etiqueta{
  display:inline-block;
  font-family:var(--ls-texto);
  font-size:11px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--ls-barro);
}

/* -------------------------------------------------------------- bandas -- */
.ls-seccion{padding-block:clamp(44px,8vh,92px)}
.ls-seccion--crema{background:var(--ls-hueso)}
.ls-seccion--blanca{background:var(--ls-blanco);border-block:1px solid var(--ls-linea)}
.ls-seccion--arena{background:var(--ls-arena)}

/* Antes esta banda era "noche". El sitio entero va en papel: lo único
   oscuro que puede aparecer es una foto. El verde del logotipo hace ahora
   el trabajo que hacía el negro.

   2026-09-26: iba en arena, igual que la banda de arriba Y la de abajo, así
   que la parrilla no se separaba de nada: tres bandas del mismo tono
   seguidas. Va en blanco con filete, que es el otro tono de papel que ya
   usa el tema, y así el Steak House sí se lee como otra casa sin romper la
   regla de "nada de fondos oscuros". */
.ls-seccion--verde{
  background:var(--ls-blanco);
  border-block:1px solid var(--ls-linea);
}
.ls-seccion--verde .ls-etiqueta{color:var(--ls-barro)}
.ls-seccion--verde h2,.ls-seccion--verde h3{color:var(--ls-verde)}
.ls-seccion--verde .ls-entrada{color:var(--ls-tenue)}

/* Cabecera de sección a dos columnas: el título a la izquierda y la entrada
   a la derecha. Antes las dos iban apiladas contra el borde izquierdo y
   dejaban vacío el 60% del ancho; medido sobre un contenedor de 1220 px.
   En celular y tableta se apila, que es como se leía antes. */
.ls-cab{display:grid;gap:clamp(10px,2vw,18px)}
.ls-cab .ls-entrada{margin-top:0;max-width:52ch}
@media (min-width:1000px){
  /* Dos gaps distintos. Los 72px son para separar las DOS COLUMNAS (titulo |
     entrada); con un `gap` unico esa misma medida caia entre el rotulito y el
     titulo y abria 72px de aire donde hacen falta 12. */
  .ls-cab{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px,5vw,72px);row-gap:12px;
    align-items:start;
  }
  .ls-cab .ls-etiqueta{grid-column:1;margin-bottom:0}
  .ls-cab .ls-titulo{grid-column:1;grid-row:2;margin-top:0}
  /* La entrada va en el MISMO renglon que el titulo y arranca donde arranca
     el titulo. Antes ocupaba grid-row:1/4 centrada: reservaba tres renglones
     habiendo dos (el tercero quedaba vacio y metia un gap entero de aire
     muerto antes del contenido) y ademas el centrado la dejaba flotando
     ~29px por encima de la primera linea del titulo, que es lo que se veia
     descuadrado. */
  .ls-cab .ls-entrada{grid-column:2;grid-row:2;align-self:start;margin-top:0}
}

.ls-titulo{font-size:clamp(27px,4.6vw,42px);margin-top:13px}
.ls-entrada{
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.66;
  color:var(--ls-tenue);
  max-width:58ch;
  margin-top:15px;
}

/* --------------------------------------------------------------- barra -- */
/* Va encima de la foto, sin caja: forma parte de la imagen hasta que se
   hace scroll, y entonces se asienta sobre papel. */
/* La barra es clara por omisión, porque el sitio es claro. Solo se vuelve
   transparente donde hay un hero con foto detrás: ahí forma parte de la
   imagen hasta que se hace scroll. */
.ls-barra{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--ls-barra);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-inline:var(--ls-gutter);
  background:var(--ls-hueso);
  box-shadow:0 1px 0 var(--ls-linea);
  transition:background .3s ease, box-shadow .3s ease;
}
.ls-root:has(.ls-hero) .ls-barra:not(.is-fija),
.ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija){background:transparent;box-shadow:none}

.ls-barra-logo{display:block;line-height:0;flex:none;position:relative}
.ls-barra-logo img{height:46px;width:auto;transition:opacity .25s ease}
.ls-barra-logo .ls-logo-crema{position:absolute;top:0;left:0;opacity:0}
.ls-root:has(.ls-hero) .ls-barra:not(.is-fija) .ls-logo-crema,
.ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija) .ls-logo-crema{opacity:1}
.ls-root:has(.ls-hero) .ls-barra:not(.is-fija) .ls-logo-verde,
.ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija) .ls-logo-verde{opacity:0}
/* Con el logotipo grande dentro del hero, el de la barra sobra: se esconde
   entero mientras la barra va encima del hero y regresa en cuanto se fija.
   visibility y no solo opacity, para que no quede un enlace invisible que
   igual se puede clicar o alcanzar con el tabulador. */
.ls-root:has(.ls-hero-marca) .ls-barra:not(.is-fija) .ls-barra-logo{
  opacity:0;visibility:hidden;
}
.ls-barra-logo{opacity:1;visibility:visible;transition:opacity .25s ease,visibility .25s}

.ls-menu{display:none}
.ls-barra-acciones{display:flex;align-items:center;gap:10px}

.ls-hamb{
  width:46px;height:46px;flex:none;
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ls-hamb i{display:block;position:relative;width:24px;height:2px;background:var(--ls-tinta);transition:background .25s}
.ls-hamb i::before,.ls-hamb i::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:inherit;
  transition:transform .3s ease;
}
.ls-hamb i::before{top:-7px}
.ls-hamb i::after{top:7px}
.ls-root:has(.ls-hero) .ls-barra:not(.is-fija) .ls-hamb i,
.ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija) .ls-hamb i{background:var(--ls-crema)}

/* panel de celular */
.ls-panel{
  position:fixed;inset:0;z-index:55;
  background:var(--ls-verde);
  display:grid;align-content:center;justify-items:stretch;gap:2px;
  padding:calc(var(--ls-barra) + 22px) var(--ls-gutter) 32px;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.ls-panel.is-abierto{transform:translateY(0);visibility:visible}
.ls-panel a{
  font-family:var(--ls-display);font-weight:600;
  font-size:clamp(26px,7.5vw,34px);
  color:var(--ls-crema);text-decoration:none;
  padding:11px 0;
  border-bottom:1px solid var(--ls-linea-noche);
}
.ls-panel a:last-of-type{border-bottom:0}
.ls-panel-pie{margin-top:26px;font-size:14px;color:rgba(242,235,225,.6);display:grid;gap:4px}
.ls-panel-pie a{font-family:var(--ls-texto);font-size:15px;border:0;padding:2px 0;color:var(--ls-brasa)}
body.ls-sin-scroll{overflow:hidden}
.ls-barra.is-abierto{background:transparent;box-shadow:none}
.ls-barra.is-abierto .ls-hamb i{background:transparent}
.ls-barra.is-abierto .ls-hamb i::before{transform:translateY(7px) rotate(45deg);background:var(--ls-crema)}
.ls-barra.is-abierto .ls-hamb i::after{transform:translateY(-7px) rotate(-45deg);background:var(--ls-crema)}
.ls-barra.is-abierto .ls-logo-crema{opacity:1}
.ls-barra.is-abierto .ls-logo-verde{opacity:0}

/* --------------------------------------------------------------- botón -- */
.ls-boton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ls-texto);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  padding:12px 20px;border-radius:4px;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.ls-root .ls-boton--laton{background:var(--ls-verde);color:#FFF;border-color:var(--ls-verde)}
.ls-root .ls-boton--laton:hover{background:var(--ls-verde-claro);border-color:var(--ls-verde-claro);color:#FFF}
.ls-root .ls-boton--linea{border-color:var(--ls-tinta);color:var(--ls-tinta)}
.ls-root .ls-boton--linea:hover{background:var(--ls-tinta);color:var(--ls-hueso)}
/* Encima del video o la foto de los heros (en celular y en escritorio) el
   boton de linea va en crema; con la linea de tinta desaparecia. */
.ls-root .ls-hero .ls-boton--linea,
.ls-root .ls-portadilla--hero .ls-boton--linea{border-color:rgba(251,248,241,.6);color:#FBF8F1}
.ls-root .ls-hero .ls-boton--linea:hover,
.ls-root .ls-portadilla--hero .ls-boton--linea:hover{background:rgba(251,248,241,.16);color:#FBF8F1}

.ls-root .ls-boton--linea-verde{border-color:var(--ls-verde);color:var(--ls-verde);width:100%}
.ls-root .ls-boton--linea-verde:hover{background:var(--ls-verde);color:#FFF}


/* ---------------------------------------------------------------- hero -- */
/* El video de fondo y el texto ENCIMA, en celular y en escritorio.

   CELULAR (esto es lo de fuera del @media): el hero a casi toda la
   pantalla (92svh, para que asome lo que sigue), el texto anclado abajo
   sobre un velo que se oscurece hacia el pie, y con aire abajo para que la
   pildora flotante no tape los botones. (2026-10-01, Luica: el video
   arriba y el texto debajo en papel "se ve separado"; antes era asi.)

   ESCRITORIO (@media min-width:1000px): a pantalla completa, con el texto a
   la izquierda y centrado en vertical. */
.ls-hero{
  position:relative;
  height:92svh;min-height:560px;max-height:980px;
  background:#241F19;
  color:#FBF8F1;
  overflow:hidden;
}
/* height:100% y no auto: con inset:0 + height:auto el contenedor se
   dimensionaba al video y el <video height:100%> no tenia contra que
   resolver, asi que se iba a 1071 px dentro de un hero de 855. */
.ls-hero-fondo{position:absolute;inset:0;height:100%;background:#241F19}
/* Con .ls-root delante a proposito: la regla base `.ls-root img,.ls-root
   video{height:auto}` tiene mas peso que `.ls-hero-video` a secas y le
   ganaba. */
.ls-root .ls-hero-fondo img,
.ls-root .ls-hero-video{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  display:block;
}
/* Velo de celular: una sombra corta arriba para la barra transparente
   (hamburguesa en crema) y un degradado fuerte desde abajo, donde va el
   texto. Escritorio lo sustituye por el suyo dentro del @media. */
.ls-hero-fondo::after,
.ls-portadilla--hero .ls-portadilla-fondo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(20,17,13,.55) 0, rgba(20,17,13,.2) 80px, rgba(20,17,13,0) 150px),
    linear-gradient(to top, rgba(20,17,13,.92) 0%, rgba(20,17,13,.84) 30%, rgba(20,17,13,.6) 50%, rgba(20,17,13,.22) 68%, rgba(20,17,13,0) 82%);
}

.ls-hero-cuerpo{
  position:absolute;inset:0;width:100%;max-width:var(--ls-maxw);margin-inline:auto;
  display:flex;align-items:flex-end;
  padding:calc(var(--ls-barra) + 12px) var(--ls-gutter) clamp(30px,5svh,44px);
}
.ls-hero-bloque{display:grid;gap:clamp(10px,1.6vh,16px)}
/* El logotipo a tamano grande DENTRO del hero, en su version crema. Mientras
   se ve este, el de la barra se esconde (arriba): si no, la marca sale dos
   veces en la misma pantalla. Vuelve a aparecer cuando la barra se fija. */
.ls-hero-marca{display:block;margin:0 0 clamp(2px,.6vh,8px)}
.ls-hero-marca img{width:min(190px,52%);height:auto;display:block}
.ls-hero-sello{
  font-family:var(--ls-texto);font-size:11px;font-weight:700;text-wrap:balance;
  letter-spacing:.17em;text-transform:uppercase;color:#E8B08C;
}
.ls-hero h1{
  font-size:clamp(28px,7.6vw,56px);line-height:1.06;letter-spacing:-.008em;
  color:#FBF8F1;text-shadow:0 1px 24px rgba(20,17,13,.45);
}
/* En celular el sello repite lo que ya dice el logotipo (hotel, steakhouse,
   since 1961) y empuja los botones hacia la pildora: se esconde cuando hay
   logotipo. En escritorio regresa. */
.ls-hero-sello:has(+ .ls-hero-marca){display:none}
.ls-hero-bajada{
  font-size:clamp(15px,1.8vw,18px);line-height:1.55;text-wrap:pretty;
  color:rgba(251,248,241,.9);max-width:44ch;
}
.ls-hero-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(4px,1.2vh,12px)}
.ls-hero-acciones .ls-boton{flex:1 1 auto}
/* El filete y los dos datos son lo que le da base al bloque: sin ellos el
   texto queda flotando en la esquina. */
.ls-hero-pie{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin-top:clamp(6px,1.6vh,18px);
  padding-top:clamp(10px,2vh,20px);
  border-top:1px solid rgba(251,248,241,.28);
  font-size:14px;color:rgba(251,248,241,.8);
}
.ls-hero-pie b{font-weight:600;color:#E8B08C;letter-spacing:.02em}
.ls-hero-pie a{text-decoration:none;color:inherit}
.ls-hero-pie a:hover{color:#FBF8F1}
.ls-hero-desliza{display:none}

/* ---------------------------------------------------------- portadilla -- */
/* Misma mecanica que el hero de la portada, con foto (o videos) en vez de
   video: la foto de fondo y el texto ENCIMA, con el velo.

     CELULAR (esto)          a 78svh, el texto anclado abajo.
     ESCRITORIO (@media)     a pantalla completa, el texto centrado en
                             vertical.

   Sin foto, la portadilla es la banda de papel de siempre. */
.ls-portadilla{background:var(--ls-hueso);position:relative;overflow:hidden}
.ls-portadilla--hero{
  height:78svh;min-height:500px;max-height:940px;
  display:flex;align-items:flex-end;
  background:#241F19;color:#FBF8F1;
}
.ls-portadilla-fondo{position:absolute;inset:0;height:100%;background:#241F19}
.ls-root .ls-portadilla-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;
}
/* Videos del hero de las páginas interiores (Steak House): se turnan con un
   fundido encima de la foto. Calificados con .ls-root porque la regla base
   .ls-root video{height:auto} les gana a las clases sueltas. */
.ls-root .ls-portadilla-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
.ls-root .ls-portadilla-video.is-activo{opacity:1}

/* Banda de video a todo lo ancho, a media página (terraza del Steak House). */
.ls-banda-video{position:relative;overflow:hidden;background:#241F19;color:#FBF8F1;
  min-height:clamp(380px,70svh,720px);display:flex;align-items:flex-end}
.ls-root .ls-banda-video-medio{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ls-banda-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(20,17,13,.78) 0%, rgba(20,17,13,.45) 35%, rgba(20,17,13,0) 70%)}
.ls-banda-video-texto{position:relative;z-index:1;width:100%;padding-block:clamp(28px,6vw,64px)}
.ls-banda-video-etiqueta{font-family:var(--ls-fuerte);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#E8B08C}
.ls-banda-video h2{font-family:var(--ls-display);font-weight:600;font-size:clamp(28px,4.6vw,46px);line-height:1.08;color:#FBF8F1;margin-top:10px;max-width:22ch}
.ls-banda-video p{margin-top:12px;max-width:52ch;color:rgba(251,248,241,.86);font-size:17px}
.ls-portadilla-cuerpo{
  position:relative;width:100%;
  padding-top:calc(var(--ls-barra) + 12px);
  padding-bottom:clamp(30px,5svh,44px);
  text-align:left;
}
/* Sin foto la portadilla sigue siendo la banda de papel de siempre, centrada,
   y el titulo tiene que bajar lo que mide la barra para no quedar debajo. */
.ls-portadilla:not(.ls-portadilla--hero) .ls-portadilla-cuerpo{
  padding-top:calc(var(--ls-barra) + clamp(30px,6vh,64px));
  padding-bottom:clamp(26px,5vh,48px);
  text-align:center;
}
.ls-portadilla-titulo{font-size:clamp(32px,6.4vw,58px);margin-top:12px;color:var(--ls-verde);line-height:1.04}
.ls-portadilla-bajada{
  font-size:clamp(16.5px,2.2vw,19.5px);line-height:1.6;text-wrap:pretty;
  color:var(--ls-tenue);max-width:52ch;margin:14px auto 0;
}
.ls-portadilla-acciones{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:clamp(18px,3vh,26px);
}
.ls-portadilla-acciones .ls-boton{flex:1 1 auto}
/* El mismo pie del hero de la portada: un filete y los dos datos que le dan
   base al bloque. Sin el, el texto quedaba flotando en medio de la foto. */
.ls-portadilla-pie{
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  margin-top:clamp(14px,2.4vh,22px);
  padding-top:clamp(14px,2.4vh,20px);
  border-top:1px solid var(--ls-linea);
  font-size:14px;color:var(--ls-tenue);
}
.ls-portadilla-pie b{font-weight:600;color:var(--ls-barro);letter-spacing:.02em}
.ls-portadilla-pie a{text-decoration:none;color:inherit}
.ls-portadilla-pie a:hover{color:var(--ls-verde)}
/* Encima de la foto: texto en crema, alineado a la izquierda. */
.ls-portadilla--hero .ls-portadilla-titulo{
  color:#FBF8F1;text-shadow:0 1px 24px rgba(20,17,13,.45);
  font-size:clamp(34px,9vw,58px);line-height:1.04;
}
.ls-portadilla--hero .ls-portadilla-bajada{color:rgba(251,248,241,.9);margin-inline:0;max-width:52ch}
.ls-portadilla--hero .ls-portadilla-acciones{justify-content:flex-start}
.ls-portadilla--hero .ls-portadilla-pie{
  justify-content:flex-start;max-width:52ch;
  border-top-color:rgba(251,248,241,.28);color:rgba(251,248,241,.8);
}
.ls-portadilla--hero .ls-portadilla-pie b{color:#E8B08C}
.ls-portadilla--hero .ls-portadilla-pie a:hover{color:#FBF8F1}
.ls-portadilla--hero .ls-migas{justify-content:flex-start;color:rgba(251,248,241,.75)}
.ls-portadilla--hero .ls-migas a:hover{color:#E8B08C}
.ls-migas{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ls-tenue);
}
.ls-migas a{text-decoration:none;transition:color .2s}
.ls-migas a:hover{color:var(--ls-barro)}

/* ---------------------------------------------- estancia: las tres tiras -- */
.ls-datos{
  display:grid;grid-template-columns:1fr;gap:0;
  margin-top:clamp(26px,5vh,42px);
  background:var(--ls-linea);
  border:1px solid var(--ls-linea);
}
.ls-dato{background:var(--ls-blanco);padding:22px clamp(18px,3vw,26px);margin-bottom:1px}
.ls-dato:last-child{margin-bottom:0}
.ls-dato-cifra{
  font-family:var(--ls-display);font-size:clamp(28px,5.4vw,34px);
  font-weight:600;color:var(--ls-verde);line-height:1;
  font-variant-numeric:tabular-nums;
}
.ls-dato-texto{font-size:14.5px;color:var(--ls-tenue);margin-top:7px}

/* --------------------------------------------- habitaciones: las fichas -- */
/* 2026-09-26, segunda version. La primera era una tarjeta blanca con borde,
   esquinas redondas, lista con cuadritos y su propio boton de caja: la
   tarjeta generica que trae cualquier plantilla. Luica: "estan bien asi pero
   el formato que utilizaste esta feisimo".
   Ahora la foto manda. Sin caja, sin borde, sin radio: la imagen se apoya
   sobre el papel como las piezas de `maravillas`, y debajo va el nombre y
   UNA linea con lo que de verdad distingue al cuarto. El resto de amenidades
   ya las enumera el parrafo del encabezado, no hacen falta abajo tambien. */
.ls-habs{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,30px);margin-top:clamp(18px,3vh,28px)}

/* La ficha entera es el enlace: no hay razon para que solo el boton lo sea. */
.ls-root .ls-hab{display:block;color:inherit;text-decoration:none}
/* 4:3 = la proporcion NATIVA de las fotos (1200x900). Un 4:5 vertical se
   veria mejor, pero con este material obligaria a tirar el 44% del ancho y
   el cuarto se mutila. Cuando lleguen fotos verticales, aqui se cambia. */
.ls-hab-foto{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ls-arena)}
.ls-root .ls-hab-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ls-hab:hover .ls-hab-foto img{transform:scale(1.04)}

.ls-hab-cuerpo{padding-top:14px}
.ls-hab-cuerpo h3{font-size:20px;line-height:1.2;margin:0}
/* Las camas en una sola linea. Antes eran tres vinetas con un cuadrito
   verde, que leia a formulario. */
.ls-hab-camas{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ls-tenue)}
/* 2026-10-16: lo que distingue al tipo y no es cama ("Solo 3 habitaciones",
   "Con jacuzzi"). Pildora verde, como el gramaje de los cortes. */
.ls-hab-nota{
  display:block;width:fit-content;margin:8px 0 0;padding:3px 11px;border-radius:999px;
  background:var(--ls-verde);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.5;
}
/* Tipo sin foto todavia: papel con la leyenda, no un hueco. */
.ls-hab-sinfoto{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ls-display,Georgia,serif);font-size:17px;color:var(--ls-tenue);
  border:1px dashed var(--ls-linea,#E2DACA);
}
.ls-hab-ir{
  margin-top:11px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ls-verde);
}
.ls-hab-ir svg{width:14px;height:14px;transition:transform .35s ease}
.ls-hab:hover .ls-hab-ir svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .ls-root .ls-hab-foto img,.ls-hab-ir svg{transition:none}
  .ls-hab:hover .ls-hab-foto img{transform:none}
  .ls-hab:hover .ls-hab-ir svg{transform:none}
}

/* Ficha con galeria (/habitaciones, 2026-10-16). La foto es un carrusel
   chico de scroll-snap: el dedo lo arrastra y las flechas lo empujan. El
   marco conserva el 4:3 de la ficha; las piezas lo llenan con cover. Las
   flechas son los mismos circulos de papel de la galeria grande, en chico,
   y aqui SI se ven en celular porque si no nadie adivina que hay mas fotos.
   Sin zoom al pasar el raton: con el carrusel se siente que la foto se va. */
.ls-root .ls-hab--galeria{display:block}
.ls-hab-pista{
  display:flex;width:100%;height:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
}
.ls-hab-pista::-webkit-scrollbar{display:none}
.ls-hab-pieza{margin:0;flex:0 0 100%;height:100%;scroll-snap-align:start}
.ls-root .ls-hab--galeria .ls-hab-foto img{transition:none}
.ls-hab--galeria:hover .ls-hab-foto img{transform:none}
.ls-hab-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;border:0;padding:0;
  background:var(--ls-blanco);color:var(--ls-tinta);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,17,13,.22);
  transition:opacity .2s,background-color .2s;
}
.ls-hab-flecha:hover{background:var(--ls-hueso)}
.ls-hab-flecha svg{width:18px;height:18px}
.ls-hab-flecha--izq{left:10px}
.ls-hab-flecha--der{right:10px}
.ls-hab-cuenta{
  position:absolute;right:10px;bottom:10px;z-index:2;
  padding:3px 9px;border-radius:999px;
  background:rgba(20,17,13,.55);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.08em;
}
.ls-root .ls-hab-cuerpo{display:block;color:inherit;text-decoration:none}
.ls-hab-cuerpo:hover .ls-hab-ir svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .ls-hab-pista{scroll-behavior:auto}
  .ls-hab-cuerpo:hover .ls-hab-ir svg{transform:none}
}

/* ------------------------------------------------------ foto + texto -- */
.ls-partido{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:center}
.ls-partido-foto{aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--ls-arena)}
.ls-partido-foto img{width:100%;height:100%;object-fit:cover}
.ls-partido--invertido .ls-partido-foto{order:-1}

/* los años, el argumento de la parrilla */
.ls-anios{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  margin-top:clamp(20px,4vh,32px);
  padding-top:clamp(16px,3vh,24px);
  border-top:1px solid var(--ls-linea);
}
.ls-anios-num{
  font-family:var(--ls-display);font-size:clamp(44px,10vw,68px);
  font-weight:600;line-height:.9;color:var(--ls-verde);
}
/* 22ch al lado de una cifra de 68 px partia la frase en dos renglones
   cortos y descuadrados. Con 30ch cabe en uno y el bloque se alinea. */
.ls-anios-txt{font-size:14.5px;line-height:1.5;color:var(--ls-tenue);max-width:30ch}

/* --------------------------------------------- Hermosillo: maravillas -- */
/* Tres piezas altas con el dato ENCIMA de la foto, no al lado. La de en
   medio baja para que la fila se lea como composicion y no como tabla: tres
   columnas parejas es justo lo que ninguno de los cuatro hoteles hace. */
/* align-items:start es la clave del desfase. Por defecto el grid estira las
   tres piezas a la altura de la fila, asi que el margin-top de la de en medio
   no la BAJABA: se la comia, y quedaba mas chica que sus vecinas. Con
   align-items:start cada pieza mide su propio 3/4 y el margen si la recorre. */
.ls-maravillas{
  display:grid;grid-template-columns:1fr;gap:clamp(14px,2.4vw,22px);
  margin-top:clamp(28px,5vh,46px);
  align-items:start;
}
.ls-maravilla{position:relative;overflow:hidden;background:var(--ls-linea)}
.ls-root .ls-maravilla-foto img{
  width:100%;height:auto;object-fit:cover;display:block;
  aspect-ratio:3/4;
  transition:transform .6s ease;
}
.ls-maravilla:hover .ls-maravilla-foto img{transform:scale(1.04)}
/* El velo solo abajo: la foto se ve entera y el dato igual se lee. */
.ls-maravilla-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(20,17,13,.88) 0%, rgba(20,17,13,.62) 26%,
    rgba(20,17,13,.18) 50%, rgba(20,17,13,0) 68%);
}
.ls-maravilla-cuerpo{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:clamp(18px,3vw,28px);
  color:#FBF8F1;
}
.ls-maravilla-que{
  font-family:var(--ls-texto);font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ls-oro);margin-bottom:6px;
}
.ls-maravilla-cifra{
  font-family:var(--ls-display);font-weight:600;
  font-size:clamp(38px,5.4vw,58px);line-height:.98;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.ls-maravilla-txt{
  margin-top:8px;font-size:14.5px;line-height:1.55;
  color:rgba(251,248,241,.86);max-width:30ch;
}
/* El dato que nadie sabe, en cursiva y con filete: cierra la banda sin
   competir con las tres piezas. */
.ls-maravillas-pie{
  margin-top:clamp(20px,3.4vh,30px);
  padding-top:clamp(14px,2.4vh,20px);
  border-top:1px solid var(--ls-linea);
  font-family:var(--ls-display);font-style:italic;
  font-size:clamp(15.5px,1.9vw,18px);line-height:1.6;
  color:var(--ls-tenue);max-width:62ch;
}
@media (min-width:700px){
  .ls-maravillas{grid-template-columns:repeat(3,1fr)}
}
/* El desfase de la pieza de en medio se quito: a Luica le leia como error,
   no como composicion, y un recurso que se lee como error fallo. Las tres
   arrancan parejas. */
@media (prefers-reduced-motion:reduce){
  .ls-root .ls-maravilla-foto img{transition:none}
  .ls-maravilla:hover .ls-maravilla-foto img{transform:none}
}

/* ------------------------------------------------- cafeteria: puntos -- */
/* Tres argumentos cortos, en fila, con un filete que los separa. No son
   cifras como los de "El hotel": aqui lo que importa es el numero de
   platillos y el servicio, no una distancia. */
.ls-cafe-puntos{
  list-style:none;margin:clamp(18px,3vh,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 0;
  border-top:1px solid var(--ls-linea);padding-top:clamp(14px,2.4vh,20px);
}
.ls-cafe-puntos li{
  font-family:var(--ls-texto);font-size:14px;color:var(--ls-tenue);
  padding-right:18px;margin-right:18px;border-right:1px solid var(--ls-linea);
}
.ls-cafe-puntos li:last-child{border-right:0;margin-right:0;padding-right:0}

/* ------------------------------------------------------------ galeria -- */
/* Carrusel horizontal con flechas, como el de La Valise, que es el unico de
   los cuatro referentes que tiene galeria. El desplazamiento es NATIVO
   (overflow-x + scroll-snap): el dedo, la rueda y el teclado funcionan solos
   y las flechas nada mas empujan el track. Sin libreria.
   Va a sangre a proposito: el track se sale del .ls-wrap para que se vea que
   hay mas fotos a la derecha. */
.ls-galeria{position:relative;margin-top:clamp(26px,5vh,42px)}
.ls-galeria-pista{
  display:flex;gap:clamp(8px,1.2vw,14px);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* snap en "start" y no en "center": con center el punto de anclaje de la
     primera pieza cae en negativo, se recorta a 0 y el snap mandatory jalaba
     el track de regreso al inicio en cada scroll. Medido: scrollLeft=700
     volvia solo a 0. */
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scroll-padding-inline:var(--ls-gutter);
  padding-inline:var(--ls-gutter);
  scrollbar-width:none;
}
.ls-galeria-pista::-webkit-scrollbar{display:none}
.ls-galeria-pieza{
  margin:0;flex:0 0 auto;scroll-snap-align:start;
  width:min(84vw,640px);
  background:var(--ls-linea);overflow:hidden;
}
.ls-root .ls-galeria-pieza img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
}
/* Las flechas: circulos de papel sobre la foto, como en la referencia. */
.ls-galeria-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--ls-blanco);color:var(--ls-tinta);
  display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px rgba(20,17,13,.2);
  transition:background-color .2s;
}
.ls-galeria-flecha:hover{background:var(--ls-hueso)}
.ls-galeria-flecha svg{width:22px;height:22px}
.ls-galeria-flecha--izq{left:clamp(10px,2vw,26px)}
.ls-galeria-flecha--der{right:clamp(10px,2vw,26px)}
/* En celular no hay flechas: se arrastra con el dedo y estorban. */
@media (min-width:1000px){
  .ls-galeria-flecha{display:flex}
  .ls-galeria-pieza{width:min(46vw,620px)}
}
/* Variante con pie (/habitaciones, fotos de los cuartos): el ratio va en el
   marco, no en el <img>, y el pie queda sobre el papel, no sobre la foto. */
.ls-galeria-pieza--pie{background:none;overflow:visible}
.ls-galeria-marco{aspect-ratio:3/2;overflow:hidden;background:var(--ls-linea)}
.ls-root .ls-galeria-pieza--pie .ls-galeria-marco img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.ls-galeria-pieza--pie figcaption{
  padding-top:10px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ls-tenue);
}
@media (prefers-reduced-motion:reduce){
  .ls-galeria-pista{scroll-behavior:auto}
  .ls-galeria-flecha{transition:none}
}

/* --------------------------------------- parrilla: la franja invitada -- */
/* En la portada el Steak House aparece una sola vez, en su propia banda,
   con el rótulo que avisa que esto ya es otra casa. */
/* ------------------------------------------------ parrilla: el banner -- */
/* La UNICA banda de la portada que rompe el contenedor, a proposito: es lo
   que la separa de la cafeteria, que usa el mismo partido a dos columnas.
   Foto a todo lo ancho, velo hacia la izquierda y encima solo un renglon y
   un boton (Luica: "mas grafico porque ya mucho texto"). */
.ls-parrilla{position:relative;overflow:hidden;padding:0;background:var(--ls-tinta)}
.ls-parrilla-foto{position:absolute;inset:0}
/* object-position abajo: lo que sobra se recorta por ARRIBA (pared de
   ladrillo), nunca por abajo, que es donde esta la carne. */
.ls-root .ls-parrilla-foto img,
.ls-root .ls-parrilla-video{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
/* El velo carga a la izquierda, que es donde va el texto: la foto trae la
   pared de ladrillo oscura arriba pero platos claros abajo. */
.ls-parrilla-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,15,12,.93) 0%, rgba(18,15,12,.88) 26%, rgba(18,15,12,.62) 55%, rgba(18,15,12,.24) 82%, rgba(18,15,12,.14) 100%),
    linear-gradient(to top, rgba(18,15,12,.34) 0%, rgba(18,15,12,0) 55%);
}
.ls-parrilla-cuerpo{
  position:relative;z-index:2;
  /* grid, no flex: como item de flex el .ls-wrap se encogia al ancho del
     texto y se centraba en la pantalla, con lo que el titular arrancaba
     ~150px a la derecha del resto de las secciones. */
  display:grid;align-content:center;justify-items:stretch;
  /* Alta a proposito. Con 393px la foto (2200x1237) se recortaba a una tira
     de 2.4:1 y solo quedaba una franja del plato. Atada al ANCHO, no al alto
     de la ventana, para que el recorte no dependa del monitor. */
  min-height:clamp(345px,41vw,675px);
  padding-block:clamp(52px,9vh,84px);
}
/* width:100% porque el margin-inline:auto del .ls-wrap cancela el estirado
   del grid: sin esto se quedaba en 670px y se centraba solo, con el titular
   ~275px a la derecha del resto de las secciones. */
.ls-parrilla-cuerpo > .ls-wrap{width:100%}
.ls-parrilla-rotulo{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ls-oro);margin:0;
}
.ls-parrilla-titular{
  font-family:var(--ls-display);font-weight:600;
  font-size:clamp(30px,5.2vw,54px);line-height:1.08;
  letter-spacing:-.01em;color:#FBF8F1;
  margin:14px 0 0;max-width:16ch;text-wrap:balance;
}
.ls-parrilla-linea{
  font-family:var(--ls-display);font-style:italic;
  font-size:clamp(17px,2.1vw,22px);line-height:1.45;
  color:rgba(251,248,241,.9);margin:12px 0 0;max-width:24ch;
}
.ls-parrilla-accion{margin-top:clamp(22px,3.4vh,30px)}

.ls-parrilla-cab{
  display:flex;align-items:center;gap:14px;
  color:var(--ls-brasa);
  font-family:var(--ls-texto);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.ls-parrilla-cab::before,.ls-parrilla-cab::after{content:"";flex:1;height:1px;background:currentColor;opacity:.45}

/* ------------------------------------------------ los cortes -- */
/* Como en la carta impresa: tarjeta clara, la foto chica a la izquierda,
   el nombre, la píldora con el gramaje y la línea punteada hasta el borde. */
.ls-cortes-cabeza{text-align:center;max-width:62ch;margin-inline:auto}
.ls-cortes-cabeza .ls-entrada{margin-inline:auto}
.ls-cortes{
  list-style:none;margin:clamp(24px,4vh,38px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vw,14px);
}
.ls-corte{
  display:flex;align-items:center;gap:14px;
  background:var(--ls-blanco);
  border:1px solid var(--ls-linea);
  border-radius:8px;overflow:hidden;
  padding:10px 16px 10px 10px;
  transition:border-color .2s, box-shadow .2s;
}
.ls-corte:hover{border-color:var(--ls-barro);box-shadow:0 8px 20px -14px rgba(42,36,28,.5)}
.ls-corte-foto{flex:none;width:118px;aspect-ratio:347/109;overflow:hidden;border-radius:5px;background:var(--ls-arena)}
.ls-corte-foto img{width:100%;height:100%;object-fit:cover}
.ls-corte-txt{flex:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.ls-corte-nombre{font-family:var(--ls-display);font-weight:600;font-size:17px;color:var(--ls-tinta)}
.ls-corte-gramos{
  font-family:var(--ls-texto);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--ls-verde);color:#FFF;
  padding:3px 8px;border-radius:3px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ls-corte-txt::after{content:"";flex:1 0 20px;align-self:center;border-bottom:1px dotted rgba(42,36,28,.32)}

/* términos de cocción: el cartel del menú viejo, con la nota del chef */
.ls-terminos{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,32px);align-items:center;
  margin-top:clamp(26px,4vh,40px);
  padding:clamp(20px,3vw,28px);
  background:var(--ls-blanco);
  border:1px solid var(--ls-linea);
  border-radius:8px;
}
.ls-terminos-img{max-width:250px;margin-inline:auto}
.ls-terminos-img img{width:100%;height:auto}
.ls-terminos-nota{
  font-family:var(--ls-display);font-style:italic;
  font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--ls-tinta);
}

/* ------------------------------------- paquetes de carnes -- */
.ls-paquetes-lista{
  display:grid;grid-template-columns:1fr;gap:clamp(12px,2vw,18px);
  margin-top:clamp(22px,4vh,34px);
}
.ls-paquete{
  background:var(--ls-blanco);
  border:1px solid var(--ls-linea);
  border-left:3px solid var(--ls-verde);
  border-radius:0 8px 8px 0;
  padding:18px 20px;
}
.ls-paquete h3{
  font-family:var(--ls-display);font-weight:600;font-size:18px;color:var(--ls-tinta);
  margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.ls-paquete h3 span{
  font-family:var(--ls-texto);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--ls-verde);color:#FFF;padding:3px 8px;border-radius:3px;white-space:nowrap;
}
.ls-paquete p{font-size:14.5px;line-height:1.55;color:var(--ls-tenue);margin-top:8px}
.ls-paquetes-nota{
  margin-top:clamp(18px,3vh,26px);
  font-size:13.5px;line-height:1.6;color:var(--ls-tenue);
}

/* ---------------------------------------------- hora feliz -- */
.ls-feliz{
  margin-top:clamp(34px,6vh,56px);
  padding:clamp(20px,3.5vw,30px) clamp(22px,4vw,34px);
  background:var(--ls-verde);color:var(--ls-crema);
  border-radius:8px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
}
.ls-feliz h3{
  font-family:var(--ls-display);font-weight:600;font-size:clamp(21px,3vw,28px);
  letter-spacing:.01em;color:var(--ls-crema);margin:0;
}
.ls-feliz p{font-size:16px;font-weight:500;color:rgba(242,235,225,.84)}

/* --------------------------------- carta del steakhouse (dos columnas) -- */
.ls-carta{margin-top:clamp(26px,5vh,42px);display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px)}
.ls-carta-grupo h3{
  font-family:var(--ls-texto);font-size:12px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ls-brasa);
  padding-bottom:10px;border-bottom:1px solid var(--ls-linea-noche);
}
.ls-platillo{padding:14px 0;border-bottom:1px solid rgba(242,235,225,.09)}
.ls-platillo:last-child{border-bottom:0}
.ls-platillo-nombre{
  font-family:var(--ls-display);font-size:17.5px;font-weight:600;
  color:var(--ls-crema);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.ls-platillo-gramos{
  font-family:var(--ls-texto);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(242,235,225,.5);
}
.ls-platillo-desc{font-size:14.5px;line-height:1.55;color:var(--ls-tenue-noche);margin-top:5px}

/* ------------------------------------------- carta de la cafetería -- */
/* Hoja de papel dentro de la banda: la carta se lee como carta. */
.ls-minuta{
  margin-top:clamp(34px,6vh,62px);
  background:var(--ls-blanco);
  border:1px solid var(--ls-linea);
  border-radius:12px;
  padding:clamp(24px,5vw,54px) clamp(18px,4vw,50px);
  scroll-margin-top:calc(var(--ls-barra) + 12px);
}
.ls-minuta-cabeza{text-align:center;border-bottom:1px solid var(--ls-linea);padding-bottom:clamp(20px,3vh,28px)}
.ls-minuta-titulo{font-size:clamp(23px,4vw,33px);color:var(--ls-verde)}
.ls-minuta-lead{font-size:14px;color:var(--ls-tenue);margin-top:8px}

.ls-minuta-indice{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(18px,3vh,26px)}
.ls-minuta-indice a{
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;color:#FFF;
  background:var(--ls-verde);border:1px solid var(--ls-verde);border-radius:4px;
  padding:8px 15px;
  transition:background .2s,border-color .2s;
}
.ls-minuta-indice a:hover{background:var(--ls-verde-claro);border-color:var(--ls-verde-claro)}

.ls-minuta-grupo{margin-top:clamp(32px,5vh,50px);scroll-margin-top:calc(var(--ls-barra) + 12px)}
.ls-minuta-grupo-nombre{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);
  font-family:var(--ls-display);font-size:clamp(20px,3vw,26px);font-weight:600;
  color:var(--ls-verde);
}
.ls-minuta-grupo-nombre::before,
.ls-minuta-grupo-nombre::after{content:"";flex:1;height:1px;background:var(--ls-linea)}
.ls-minuta-grupo-nota{
  text-align:center;margin-top:10px;
  font-family:var(--ls-display);font-style:italic;font-size:15.5px;color:var(--ls-barro);
}
.ls-minuta-lista{list-style:none;margin:clamp(16px,2.5vh,24px) 0 0;padding:0;column-gap:clamp(26px,4vw,54px)}
.ls-minuta-item{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--ls-linea)}
.ls-minuta-nombre{
  font-family:var(--ls-display);font-size:17.5px;font-weight:600;color:var(--ls-tinta);
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
}
/* La línea punteada hasta el borde es el gesto de una carta impresa. */
.ls-minuta-nombre::after{
  content:"";flex:1 0 24px;align-self:center;
  border-bottom:1px dotted rgba(42,36,28,.32);
}
.ls-minuta-medida{
  font-family:var(--ls-texto);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--ls-verde);color:#FFF;
  padding:3px 8px;border-radius:3px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ls-minuta-desc{font-size:14px;line-height:1.55;color:var(--ls-tenue);margin-top:4px}

.ls-minuta-extra{
  margin-top:clamp(18px,3vh,26px);
  background:var(--ls-hueso);
  border:1px solid var(--ls-linea);
  border-left:3px solid var(--ls-barro);
  border-radius:0 8px 8px 0;
  padding:clamp(16px,3vw,22px);
}
.ls-minuta-extra-titulo{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ls-verde)}
.ls-minuta-extra-texto{font-size:14px;line-height:1.6;color:var(--ls-tenue);margin-top:7px}
.ls-minuta-extra-texto + .ls-minuta-extra-titulo{margin-top:16px}
.ls-minuta-extra-lista{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px;
  font-size:14.5px;color:var(--ls-tinta);
}
.ls-minuta-extra-lista li{position:relative;padding-left:15px}
.ls-minuta-extra-lista li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--ls-barro);border-radius:50%}
.ls-minuta-nota{
  margin-top:clamp(26px,5vh,42px);padding-top:clamp(16px,2.5vh,22px);
  border-top:1px solid var(--ls-linea);
  text-align:center;font-size:13.5px;line-height:1.6;color:var(--ls-tenue);
}

/* --------------------------------------------- tarjetas que reparten -- */
.ls-negocios{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,26px);margin-top:clamp(26px,5vh,42px)}
.ls-negocio{background:var(--ls-blanco);border:1px solid var(--ls-linea);border-radius:12px;overflow:hidden}
.ls-negocio-liga{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.ls-negocio-foto{aspect-ratio:16/10;overflow:hidden;background:var(--ls-arena)}
.ls-negocio-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ls-negocio-liga:hover .ls-negocio-foto img{transform:scale(1.04)}
.ls-negocio-cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ls-negocio-cuerpo h3{font-size:21px;color:var(--ls-verde)}
.ls-negocio-texto{font-size:14.5px;line-height:1.6;color:var(--ls-tenue);flex:1}
.ls-negocio-boton{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--ls-barro);
}
.ls-negocio-boton::after{content:"";width:18px;height:1px;background:currentColor;transition:width .25s}
.ls-negocio-liga:hover .ls-negocio-boton::after{width:32px}

/* ---------------------------------------------------------- lugares -- */
.ls-lugares{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.2vw,20px);margin-top:clamp(26px,5vh,42px)}
.ls-lugar{position:relative;overflow:hidden;border-radius:10px;background:var(--ls-arena);aspect-ratio:3/2}
.ls-lugar img{width:100%;height:100%;object-fit:cover;filter:brightness(.84);transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .4s}
.ls-lugar:hover img{transform:scale(1.05);filter:brightness(.98)}
.ls-lugar-txt{
  position:absolute;inset:auto 0 0 0;padding:16px 18px;
  background:linear-gradient(to top, rgba(18,15,12,.92), rgba(18,15,12,0));
  color:var(--ls-crema);
}
.ls-lugar-nombre{font-family:var(--ls-display);font-weight:600;font-size:19px}
.ls-lugar-dist{font-size:12.5px;color:rgba(242,235,225,.72);margin-top:2px}

/* ---------------------------------------------------------- reseñas -- */
/* Sin caja: una gran cita editorial (la `principal` o la primera) y las
   demás en fila debajo, cada una con su frase destacada en serif. */
.ls-cita{position:relative;margin:clamp(30px,5vh,52px) 0 0;max-width:980px}
.ls-cita-comilla{
  display:block;height:.42em;margin-left:-.05em;
  font-family:var(--ls-display);font-weight:700;font-size:clamp(96px,12vw,150px);line-height:.85;
  color:var(--ls-barro);user-select:none
}
.ls-cita-cuerpo{margin:0}
.ls-cita-frase{
  margin:0;max-width:24ch;font-family:var(--ls-display);font-weight:600;
  font-size:clamp(30px,4.6vw,54px);line-height:1.12;letter-spacing:-.012em;color:var(--ls-tinta);text-wrap:balance
}
.ls-cita--sola .ls-cita-frase{max-width:44ch;font-weight:500;font-size:clamp(21px,2.5vw,29px);line-height:1.42;letter-spacing:0;text-wrap:pretty}
.ls-cita-texto{margin:clamp(16px,2.4vh,22px) 0 0;max-width:60ch;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62;color:var(--ls-tenue)}
.ls-cita-firma,.ls-voz-firma{
  display:flex;align-items:center;gap:12px;
  font:600 12px var(--ls-texto);letter-spacing:.16em;text-transform:uppercase
}
.ls-cita-firma{margin-top:clamp(22px,3.4vh,32px);color:var(--ls-verde)}
.ls-cita-firma::before{content:"";width:46px;border-top:1.5px solid var(--ls-barro)}
.ls-voces{display:grid;grid-template-columns:1fr;margin-top:clamp(34px,6vh,60px);border-top:1px solid var(--ls-linea)}
.ls-voz{margin:0;display:flex;flex-direction:column;padding:clamp(22px,3vh,30px) 0}
.ls-voz + .ls-voz{border-top:1px solid var(--ls-linea)}
.ls-voz-frase{
  margin:0 0 12px;font-family:var(--ls-display);font-weight:600;
  font-size:clamp(19px,1.9vw,22.5px);line-height:1.3;color:var(--ls-tinta);text-wrap:balance
}
.ls-voz-frase::before{content:"\201C";color:var(--ls-barro);margin-right:.05em}
.ls-voz-frase::after{content:"\201D";color:var(--ls-barro);margin-left:.03em}
.ls-voz-texto{margin:0;font-size:15px;line-height:1.62;color:var(--ls-tenue)}
.ls-voz-texto--solo{font-family:var(--ls-display);font-size:17.5px;line-height:1.5;color:var(--ls-tinta)}
.ls-voz-firma{margin-top:auto;padding-top:18px;color:var(--ls-tenue);font-size:11.5px}
.ls-voz-firma::before{content:"";width:22px;border-top:1.5px solid var(--ls-barro)}
.ls-estrellas{display:none}

/* ------------------------------------------------- reservar: contacto -- */
.ls-contacto{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);margin-top:clamp(24px,4vh,36px)}
.ls-tel{
  display:block;text-decoration:none;
  padding:16px 0;border-bottom:1px solid var(--ls-linea);
}
.ls-tel:first-child{border-top:1px solid var(--ls-linea)}
.ls-tel-que{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ls-tenue)}
.ls-tel-num{
  font-family:var(--ls-display);font-weight:600;font-size:24px;color:var(--ls-verde);
  font-variant-numeric:tabular-nums;
}
.ls-tel:hover .ls-tel-num{color:var(--ls-verde-claro)}
.ls-domicilio{font-size:16px;line-height:1.7;color:var(--ls-tenue)}
.ls-horario{font-size:14.5px;color:var(--ls-tenue);margin-top:12px}

/* --------------------------------------------------------------- pie -- */
/* El pie era una sola linea de legales. Tres de los cuatro hoteles de
   referencia llevan contacto y navegacion aqui; es la ultima oportunidad de
   dar el telefono a quien bajo hasta el final.
   El padding de abajo deja libre el alto de la pildora, que va fija encima. */
.ls-pie{
  background:var(--ls-verde);color:var(--ls-crema);
  padding-block:clamp(36px,6vh,60px);
  padding-bottom:calc(clamp(36px,6vh,60px) + var(--ls-pildora, 0px));
}
.ls-pie-rejilla{display:grid;gap:clamp(26px,4vh,38px)}
.ls-pie img{height:52px;width:auto}
.ls-pie-lema{
  margin-top:14px;font-size:14px;line-height:1.6;
  color:rgba(242,235,225,.72);max-width:34ch;
}
.ls-pie-titulo{
  font-family:var(--ls-texto);font-size:11px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--ls-oro);margin-bottom:12px;
}
.ls-pie-lista{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ls-pie-lista a{
  text-decoration:none;color:rgba(242,235,225,.86);font-size:15px;
  transition:color .2s;
}
.ls-pie-lista a:hover{color:var(--ls-oro)}
/* La etiqueta del numero, en chico y en otro tono, para que el numero mande */
.ls-pie-lista span{
  display:inline-block;min-width:8.5em;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(242,235,225,.55);
}
.ls-pie-lista--nav span{min-width:0}
.ls-pie-dir{
  margin-top:14px;font-size:13.5px;line-height:1.6;
  color:rgba(242,235,225,.62);max-width:34ch;
}
.ls-pie-legal{
  margin-top:clamp(26px,4vh,38px);padding-top:clamp(16px,2.6vh,22px);
  border-top:1px solid rgba(242,235,225,.18);
  font-size:13px;color:rgba(242,235,225,.55);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
}
.ls-pie-menu{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.ls-pie-menu a{text-decoration:none;color:rgba(242,235,225,.72)}
.ls-pie-menu a:hover{color:var(--ls-oro)}

/* --------------------------------------------------- pildora de reserva -- */
/* Fija abajo y centrada, como la de Colima 71 y la de La Valise. Sustituye
   al boton redondo de llamar: los dos en la misma esquina se estorban.
   --ls-pildora lo lee el pie para no quedar tapado. */
:root{--ls-pildora:82px}
.ls-pildora{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:clamp(12px,2vh,20px);z-index:60;
  display:flex;align-items:center;gap:4px;
  max-width:calc(100vw - 24px);
  padding:6px;border-radius:999px;
  background:var(--ls-blanco);
  box-shadow:0 10px 34px rgba(20,17,13,.26), 0 0 0 1px rgba(20,17,13,.06);
}
/* Con .ls-root delante: `.ls-root a{color:inherit}` pesa (0,1,1) y le ganaba
   a `.ls-pildora-boton` (0,1,0), asi que el boton heredaba la tinta oscura de
   la pildora y salia texto negro sobre verde. */
.ls-root .ls-pildora-boton{
  display:inline-block;white-space:nowrap;
  background:var(--ls-verde);color:#FBF8F1;
  font-family:var(--ls-texto);font-size:14.5px;font-weight:600;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  transition:background-color .2s;
}
.ls-root .ls-pildora-boton:hover{background:var(--ls-verde-claro);color:#FBF8F1}
.ls-root .ls-pildora-tel{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:12px 20px 12px 16px;border-radius:999px;
  color:var(--ls-tinta);text-decoration:none;
  font-family:var(--ls-texto);font-size:14.5px;font-weight:600;
  transition:background-color .2s;
}
.ls-root .ls-pildora-tel:hover{background:var(--ls-arena)}
.ls-pildora-tel svg{width:18px;height:18px;flex:none;color:var(--ls-verde)}
/* En celular el numero se va: no cabe junto al boton y el telefono ya esta
   en el pie y en cada tarjeta. */
@media (max-width:560px){
  :root{--ls-pildora:74px}
  .ls-pildora-tel span{display:none}
  .ls-pildora-tel{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ls-pildora-boton,.ls-pildora-tel{transition:none}
}

/* botón flotante: llamar. Va en el verde de la marca y no en el verde de
   WhatsApp, que aquí sería de otra casa. */
.ls-flotante-retirado{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:54px;height:54px;border-radius:50%;
  background:var(--ls-verde);color:#FBF8F1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
  text-decoration:none;
  transition:transform .18s ease, background-color .18s ease;
}
.ls-flotante:hover{background:var(--ls-verde-claro);transform:translateY(-2px)}
.ls-flotante:focus-visible{outline:2px solid var(--ls-oro);outline-offset:3px}
.ls-flotante svg{width:27px;height:27px}
/* la reserva, por si algún día no hay teléfono confirmado */
.ls-flotante--wa{background:#25D366}
.ls-flotante--wa:hover{background:#1FB855}
@media (prefers-reduced-motion:reduce){
  .ls-flotante{transition:none}
  .ls-flotante:hover{transform:none}
}

/* prosa de las páginas sueltas del CMS */
.ls-prosa{font-size:17px;line-height:1.75;color:var(--ls-tenue)}
.ls-prosa h2,.ls-prosa h3{color:var(--ls-tinta);margin-top:1.6em}
.ls-prosa p{margin-bottom:1em}
.ls-prosa a{color:var(--ls-verde)}

/* imagen que todavía no llega */
.ls-img-falta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:repeating-linear-gradient(45deg,#EFE7D8,#EFE7D8 10px,#E6DCC8 10px,#E6DCC8 20px);
  border:1px dashed rgba(42,36,28,.28);
  font-family:var(--ls-texto);font-size:12px;color:var(--ls-tenue);
  text-align:center;padding:12px;width:100%;
}
.ls-img-falta-dim{opacity:.6}

/* ===================================================== de 700 px arriba == */
@media (min-width:700px){
  .ls-datos{grid-template-columns:repeat(3,1fr);gap:1px}
  .ls-dato{margin-bottom:0}
  .ls-habs{grid-template-columns:repeat(2,1fr)}
  .ls-lugares{grid-template-columns:repeat(2,1fr)}
  .ls-voces{grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,56px)}
  .ls-voz{padding-bottom:4px}
  .ls-voz + .ls-voz{border-top:0}
  .ls-carta{grid-template-columns:repeat(2,1fr)}
  .ls-negocios{grid-template-columns:repeat(2,1fr)}
  .ls-cortes{grid-template-columns:repeat(2,1fr)}
  .ls-terminos{grid-template-columns:auto 1fr}
  .ls-terminos-img{max-width:230px;margin:0}
  .ls-paquetes-lista{grid-template-columns:repeat(2,1fr)}
  .ls-contacto{grid-template-columns:1fr 1fr}
  .ls-minuta-extra-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ls-hero-acciones .ls-boton{flex:0 0 auto}
}

/* ==================================================== de 1000 px arriba == */
@media (min-width:1000px){
  .ls-menu{display:flex;gap:clamp(18px,2.4vw,32px);list-style:none;margin:0;padding:0}
  .ls-menu a{
    font-size:13.5px;font-weight:500;
    text-decoration:none;color:var(--ls-tenue);
    padding:6px 0;border-bottom:1px solid transparent;
    transition:color .2s,border-color .2s;
  }
  .ls-menu a:hover{color:var(--ls-verde);border-bottom-color:currentColor}
  .ls-root:has(.ls-hero) .ls-barra:not(.is-fija) .ls-menu a,
  .ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija) .ls-menu a{color:#FBF8F1}
  .ls-root:has(.ls-hero) .ls-barra:not(.is-fija) .ls-menu a:hover,
  .ls-root:has(.ls-portadilla--hero) .ls-barra:not(.is-fija) .ls-menu a:hover{color:var(--ls-barro)}
  .ls-hamb{display:none}
  /* Se queda en DOS columnas tambien en escritorio. Con cuatro en fila la
     foto medía 253px dentro del contenedor de 1220; en 2x2 llega a ~535px,
     mas del doble, sin sacar la seccion a todo lo ancho (eso dejaba esta
     banda mas ancha que todas las demas). */
  .ls-lugares{grid-template-columns:repeat(3,1fr)}
  .ls-negocios{grid-template-columns:repeat(2,1fr)}
  .ls-pie-rejilla{grid-template-columns:1.2fr 1fr 1fr;gap:clamp(30px,5vw,72px)}
  .ls-partido{grid-template-columns:1fr 1fr}
  .ls-partido--invertido .ls-partido-foto{order:0}

  /* ---- hero de escritorio: a pantalla completa y el texto centrado ---- */
  .ls-hero{height:100svh;min-height:640px;max-height:980px}
  /* El velo sube desde el borde inferior a todo lo ancho. Un degradado
     lateral dejaba una mancha vertical a media pantalla. */
  .ls-hero-fondo::after,
  .ls-portadilla--hero .ls-portadilla-fondo::after{
    background:
      /* Velo parejo del 20% encima de todo (Luica, 2026-09-26: "un filtro
         mas oscuro para que se vea mejor el texto, un 20% mas"). Va aparte
         de los degradados para poder subirlo o bajarlo sin volver a
         calcular las cinco paradas de abajo. */
      /* 2026-10-16: .2 -> .28 con el video de la sesion nueva (marmol y
         espuma blancos detras del titulo). */
      linear-gradient(rgba(20,17,13,.28), rgba(20,17,13,.28)),
      linear-gradient(to bottom, rgba(20,17,13,.58) 0%, rgba(20,17,13,.12) 15%, rgba(20,17,13,0) 28%),
      linear-gradient(to top, rgba(20,17,13,.88) 0%, rgba(20,17,13,.7) 30%, rgba(20,17,13,.38) 55%, rgba(20,17,13,.08) 75%, rgba(20,17,13,0) 88%);
  }
  .ls-hero-cuerpo{align-items:center;padding-block:0}
  .ls-hero-bloque{max-width:52ch;gap:clamp(11px,1.8vh,16px)}
  .ls-hero h1{max-width:15ch}
  .ls-hero-sello:has(+ .ls-hero-marca){display:block}
  .ls-hero-marca{margin-bottom:clamp(4px,1vh,10px)}
  .ls-hero-marca img{width:min(440px,68%)}
  .ls-hero-bajada{color:rgba(251,248,241,.88);line-height:1.58}
  .ls-hero-acciones{margin-top:clamp(6px,1.4vh,12px)}
  .ls-hero-pie{
    gap:8px 26px;margin-top:clamp(10px,2vh,18px);padding-top:clamp(14px,2.4vh,20px);
    color:rgba(251,248,241,.78);
  }

  /* ---- portadilla de escritorio: la foto a pantalla completa ---- */
  .ls-portadilla--hero{height:100svh;min-height:600px;max-height:940px;align-items:center}
  .ls-portadilla--hero .ls-portadilla-cuerpo{padding-block:0}
  /* El bloque conserva el canal centrado de .ls-wrap, como el hero de la
     portada; lo que se limita a 52ch es el texto, no el contenedor. */
  .ls-portadilla--hero .ls-portadilla-titulo{max-width:52ch}
  .ls-portadilla--hero .ls-migas{color:rgba(251,248,241,.72)}
  /* A pantalla completa el titulo de 54 px se veia perdido: 136 px de texto
     dentro de 911 px de foto. Sube a la escala del hero de la portada. */
  .ls-portadilla--hero .ls-portadilla-titulo{
    font-size:clamp(44px,6.4vw,76px);line-height:1.02;letter-spacing:-.01em;
  }
  .ls-portadilla--hero .ls-portadilla-bajada{
    color:rgba(251,248,241,.88);
    font-size:clamp(17px,1.5vw,20px);margin-top:18px;
  }
  .ls-portadilla--hero .ls-portadilla-acciones .ls-boton{flex:0 0 auto}
  .ls-portadilla--hero .ls-portadilla-pie{color:rgba(251,248,241,.78)}

  /* El "desliza": la palabra y una linea que baja, como en la referencia. */
  .ls-hero-desliza{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);
    margin:0;z-index:2;pointer-events:none;
  }
  .ls-hero-desliza span{
    font-family:var(--ls-texto);font-size:10.5px;font-weight:600;
    letter-spacing:.34em;text-transform:uppercase;
    color:rgba(251,248,241,.55);
  }
  .ls-hero-desliza::after{
    content:"";width:1px;height:clamp(26px,4vh,44px);
    background:linear-gradient(to bottom, rgba(251,248,241,.55), rgba(251,248,241,0));
  }
  .ls-paquetes-lista{grid-template-columns:repeat(3,1fr)}
  .ls-minuta-lista{column-count:2}
}

@media (prefers-reduced-motion:reduce){
  .ls-root *{transition:none !important;animation:none !important}
}

/* ------------------------------------------ buscador de la carta -- */
/* Pegado arriba mientras se recorre la hoja: la carta es larga. */
.ls-minuta [hidden]{display:none !important}
.ls-minuta-busca{
  position:sticky;top:calc(var(--ls-barra) + 8px);z-index:5;
  margin:clamp(16px,3vh,24px) auto 0;max-width:560px;
}
.ls-minuta-busca-caja{
  display:flex;align-items:center;gap:10px;
  background:var(--ls-blanco);border:1px solid var(--ls-linea);border-radius:999px;
  padding:0 8px 0 16px;color:var(--ls-tenue);
  box-shadow:0 6px 18px rgba(42,36,28,.10);
}
.ls-minuta-busca-caja:focus-within{border-color:var(--ls-verde);color:var(--ls-verde)}
.ls-minuta-busca-caja input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:500 16px var(--ls-texto);color:var(--ls-tinta);padding:13px 0;
}
.ls-minuta-busca-caja input::-webkit-search-cancel-button{-webkit-appearance:none}
.ls-minuta-busca-borrar{
  border:0;background:var(--ls-arena);color:var(--ls-tinta);cursor:pointer;
  width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;
}
.ls-minuta-busca-nada{
  text-align:center;margin-top:14px;padding:10px 14px;
  background:var(--ls-hueso);border-radius:8px;font-size:14.5px;color:var(--ls-tenue);
}
.ls-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------ los favoritos: pizarra de cortes -- */
/* 2026-10-01. Foto grande fija a un lado y los cortes como pizarra. En
   celular la foto va arriba, recortada a lo ancho. */
.ls-pizarra{display:grid;gap:clamp(26px,4vw,56px);align-items:start}
.ls-pizarra-foto{margin:0;position:relative;border-radius:12px;overflow:hidden;background:var(--ls-arena);aspect-ratio:4/3}
.ls-pizarra-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ls-pizarra-foto figcaption{
  position:absolute;left:14px;bottom:14px;
  background:rgba(248,245,238,.94);color:var(--ls-tinta);
  font:600 12.5px var(--ls-texto);letter-spacing:.02em;
  padding:7px 12px;border-radius:999px;
}
.ls-pizarra-cabeza .ls-entrada{max-width:56ch}

.ls-pizarra-lista{
  list-style:none;margin:clamp(22px,4vh,34px) 0 0;padding:0;
  display:grid;column-gap:clamp(22px,3vw,40px);
}
.ls-pizarra-corte{padding:14px 0;border-bottom:1px solid var(--ls-linea)}
.ls-pizarra-linea{display:flex;align-items:baseline;gap:10px;margin:0}
.ls-pizarra-linea::after{content:"";order:2;flex:1 0 18px;align-self:center;border-bottom:1px dotted rgba(42,36,28,.3)}
.ls-pizarra-nombre{order:0;font-family:var(--ls-display);font-weight:600;font-size:clamp(18px,2vw,21px);color:var(--ls-tinta)}
.ls-pizarra-sello{
  order:1;align-self:center;
  font:700 10px var(--ls-texto);letter-spacing:.14em;text-transform:uppercase;
  color:#FFF;background:var(--ls-barro);padding:4px 8px;border-radius:3px;
}
.ls-pizarra-gramos{order:3;font:600 13px var(--ls-texto);color:var(--ls-verde);white-space:nowrap}
.ls-pizarra-desc{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--ls-tenue)}
.ls-pizarra-corte.es-estrella .ls-pizarra-nombre{color:var(--ls-verde)}

.ls-pizarra-servicio{
  margin-top:clamp(24px,4vh,34px);
  display:grid;gap:18px;
  background:var(--ls-blanco);border:1px solid var(--ls-linea);border-radius:10px;
  padding:clamp(18px,3vw,26px);
}
.ls-pizarra-sub{
  margin:0 0 10px;
  font:700 11px var(--ls-texto);letter-spacing:.17em;text-transform:uppercase;color:var(--ls-barro);
}
.ls-pizarra-fichas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ls-pizarra-fichas li{
  font-size:14px;font-weight:500;color:var(--ls-tinta);
  background:var(--ls-hueso);border:1px solid var(--ls-linea);border-radius:999px;padding:7px 14px;
}
.ls-pizarra-fichas--verde li{background:#EAF1EA;border-color:#CFE0D1;color:var(--ls-verde)}

.ls-terminos2{margin-top:clamp(24px,4vh,34px)}
.ls-terminos2-escala{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ls-terminos2-escala li{display:flex;flex-direction:column;gap:8px;text-align:center}
.ls-terminos2-tono{
  display:block;height:44px;border-radius:6px;
  background:linear-gradient(180deg,#5B3A2C 0 14%,var(--tono) 14% 86%,#5B3A2C 86%);
}
.ls-terminos2-nombre{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ls-tenue)}
.ls-terminos2-escala li.es-recomendado .ls-terminos2-tono{outline:2px solid var(--ls-verde);outline-offset:3px}
.ls-terminos2-escala li.es-recomendado .ls-terminos2-nombre{color:var(--ls-verde)}
.ls-terminos2-nota{margin:14px 0 0;font-family:var(--ls-display);font-style:italic;font-size:15.5px;color:var(--ls-barro)}

.ls-pizarra-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,4vh,36px)}

@media (min-width:700px){
  .ls-pizarra-lista{grid-template-columns:1fr 1fr}
  .ls-pizarra-servicio{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .ls-pizarra{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ls-pizarra-foto{position:sticky;top:calc(var(--ls-barra) + 20px);aspect-ratio:4/5}
  /* Reseña principal: frase a la izquierda; el resto y la firma a la derecha. */
  .ls-cita:not(.ls-cita--sola){
    max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);
    grid-template-areas:"comilla ." "frase texto" "frase firma";grid-template-rows:auto auto 1fr
  }
  .ls-cita:not(.ls-cita--sola) .ls-cita-cuerpo{display:contents}
  .ls-cita:not(.ls-cita--sola) .ls-cita-comilla{grid-area:comilla}
  .ls-cita:not(.ls-cita--sola) .ls-cita-frase{grid-area:frase;align-self:start}
  .ls-cita:not(.ls-cita--sola) .ls-cita-texto{grid-area:texto;margin:.55em 0 0;padding-left:24px;border-left:1.5px solid var(--ls-linea)}
  .ls-cita:not(.ls-cita--sola) .ls-cita-firma{grid-area:firma;align-self:start;padding-left:25px}
}

/* 2026-10-16. Cinco tipos de habitacion: en pantalla ancha van 3 + 2 en vez
   de 2 + 2 + 1. Al final del archivo para ganarle a la regla de 700 px. */
@media (min-width:1100px){.ls-habs{grid-template-columns:repeat(3,1fr)}}