/*
  Plantilla «editorial-luxe». Todo bajo .lz-plantilla--editorial-luxe.

    --lz-primario   la tinta
    --lz-secundario el topo cálido: rótulos, líneas finas, subrayados
    --lz-fondo      el papel crema
    --lz-accion     SOLO los botones de reservar

  Tamaños de DIRECCION_VISUAL §7 traducidos al alfabeto latino: cuerpo 17, títulos
  2,3–2,7× el cuerpo, mayúsculas con 0,14–0,24 em de interletrado (aquí van más
  abiertas que en las otras: es lo que hace «revista»), línea a 1,75 y botón de
  reservar de 52 px. Nada por debajo de 14.

  La tipografía del tema (la serif) va en los titulares y en los rótulos; el texto de
  lectura va en la pila del sistema, que ya está en el dispositivo.
*/

.lz-plantilla--editorial-luxe,
.lz-plantilla--editorial-luxe *,
.lz-plantilla--editorial-luxe *::before,
.lz-plantilla--editorial-luxe *::after { box-sizing: border-box; }

.lz-plantilla--editorial-luxe {
  --lz-el-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lz-el-linea: color-mix(in srgb, var(--lz-primario) 16%, var(--lz-fondo));
  --lz-el-margen: 20px;
  --lz-el-hueco-fija: 84px;

  font-family: var(--lz-el-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--lz-primario);
  background: var(--lz-fondo);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .lz-plantilla--editorial-luxe * { transition: none !important; animation: none !important; }
}

@media (min-width: 900px) { .lz-plantilla--editorial-luxe { --lz-el-margen: 64px; } }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  font-family: var(--lz-el-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;            /* recto: una revista no tiene esquinas redondas */
  transition: opacity 0.2s;
}

.lz-plantilla--editorial-luxe .lz-el-boton:hover { opacity: 0.85; }

/* Con borde, como el de Loness arriba a la derecha. */
.lz-plantilla--editorial-luxe .lz-el-boton--linea {
  background: transparent;
  color: var(--lz-primario);
  border: 1px solid var(--lz-primario);
}

.lz-plantilla--editorial-luxe .lz-el-boton--accion {
  background: var(--lz-accion);
  color: var(--lz-fondo);
  border: 1px solid var(--lz-accion);
}

.lz-plantilla--editorial-luxe .lz-el-boton--ancho { flex: 1 1 auto; min-width: 0; }

.lz-plantilla--editorial-luxe .lz-el-enlace {
  color: var(--lz-primario);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lz-secundario);
}

/* ── Rótulos de sección ───────────────────────────────────────────────────── */

/*
  El rótulo de cada sección es un <h2> (30-09): era la única de las cinco plantillas sin
  un solo titular por debajo del <h1>, y quien navega con lector de pantalla salta de
  titular en titular. Aquí se le devuelve lo que un <h2> trae de serie y esta plantilla
  no quiere —negrita y cuerpo grande—, para que se vea exactamente igual que antes.
*/
.lz-plantilla--editorial-luxe .lz-el-rotulo {
  margin: 0 0 20px;
  font-family: var(--lz-fuente), Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lz-secundario);
}

/* ── Barra de arriba ──────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--lz-el-margen);
  background: var(--lz-fondo);
  border-bottom: 1px solid var(--lz-el-linea);
}

/*
  El nombre del salón, entero.

  Medido a 375 px antes de tocarlo: «Aurelia Estética» —dos palabras, un nombre
  cualquiera— pedía 223 px y tenía 211, así que en la barra ponía «AURELIA ESTÉTI…».
  Uno de verdad largo, «Aurelia Estética Avanzada & Spa Urbano», pedía 534 px y se
  enseñaban 211: el 40 %. El nombre del salón es lo último que se puede cortar en su
  propia web.

  En el móvil baja a 15 px y cierra el interletrado —que en unas mayúsculas ensancha
  más que el cuerpo— y se le dejan DOS líneas. Con eso el nombre largo entra entero
  sin que la barra crezca: dos líneas de 15 px a 1,15 son 34,5 px, menos que los 44
  del botón, que es quien manda en el alto.
*/
.lz-plantilla--editorial-luxe .lz-el-barra__nombre {
  font-family: var(--lz-fuente), Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Tres: un nombre de 25 caracteres entra en dos líneas y uno de 38 pide una más.
     La barra crece de 65 a 73 px solo para ese salón, que es quien lo necesita. */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (min-width: 640px) {
  .lz-plantilla--editorial-luxe .lz-el-barra__nombre { font-size: 19px; letter-spacing: 0.14em; }
}

.lz-plantilla--editorial-luxe .lz-el-barra__acciones { display: flex; gap: 8px; flex-shrink: 0; }

.lz-plantilla--editorial-luxe .lz-el-barra .lz-el-boton { min-height: 44px; padding: 8px 16px; font-size: 13px; }

/*
  El WhatsApp de la barra estorba en un móvil estrecho: está en la barra de abajo.

  Esto se escribía `:first-child`, dando por hecho que el primer botón de la barra
  siempre es el de WhatsApp. En un salón que no tiene WhatsApp el primero es el de
  pedir cita, y se escondía ÉL: medido a 375 px, un salón recién dado de alta se
  quedaba con la barra de arriba sin un solo botón. Ahora se nombra el que se quiere
  esconder, no la posición que se supone que ocupa.
*/
.lz-plantilla--editorial-luxe .lz-el-barra__wa { display: none; }

@media (min-width: 640px) {
  .lz-plantilla--editorial-luxe .lz-el-barra__wa { display: inline-flex; }
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-portada {
  padding: 72px var(--lz-el-margen) 56px;
  text-align: center;
}

.lz-plantilla--editorial-luxe .lz-el-portada__frase {
  margin: 0 auto 24px;
  max-width: 40ch;              /* una línea larga antes que una corta con huérfana */
  font-size: 17px;
  color: color-mix(in srgb, var(--lz-primario) 85%, var(--lz-fondo));
}

/* El logo de la dueña, si lo tiene: encima del nombre, y sin pisarlo (24-09).
   Se limita por ALTO, no por ancho: los logos vienen apaisados o cuadrados y lo
   que tiene que ser constante es lo que ocupan en vertical. */
.lz-plantilla--editorial-luxe .lz-el-portada__logo {
  display: block;
  height: calc(56px * var(--lz-logo-escala, 1));
  width: auto;
  max-width: 100%;
  margin: 0 auto 16px;
  object-fit: contain;
}

.lz-plantilla--editorial-luxe .lz-el-portada__nombre {
  margin: 0;
  font-family: var(--lz-fuente), Georgia, serif;
  /* Aquí el nombre SÍ manda: la portada es tipográfica, no una foto. */
  font-size: clamp(34px, 8vw, 68px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lz-plantilla--editorial-luxe .lz-el-portada__ciudad {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lz-secundario);
}

/*
  El aire entre el nombre y el botón es del BOTÓN, no de la ciudad.

  Lo llevaba el margen de abajo de la ciudad, así que un salón sin ciudad —cualquiera
  recién dado de alta— sacaba el botón pegado al nombre: medido, 0 px de hueco. El
  que necesita el aire es el botón, y ahora lo lleva él, haya ciudad o no.
*/
.lz-plantilla--editorial-luxe .lz-el-portada .lz-el-boton--accion { margin-top: 32px; }

@media (min-width: 900px) {
  .lz-plantilla--editorial-luxe .lz-el-portada { padding-block: 112px 80px; }
}

/* La foto, ancha y poco alta: recorta lo que sobra de una foto de sala normal. */
.lz-plantilla--editorial-luxe .lz-el-franja__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 900px) {
  .lz-plantilla--editorial-luxe .lz-el-franja__foto { aspect-ratio: 16 / 6; }
}

/*
  «Cómo llegar» en su propia línea.

  Va dentro del mismo <dd> que la dirección y solo las separaba un espacio, así que a
  375 px se leía «Calle Gran Vía 41, Majadahonda Cómo llegar» de corrido y partido en
  dos líneas: parecía parte de la dirección, no un enlace.
*/
.lz-plantilla--editorial-luxe .lz-el-tabla__mapa {
  display: block;
  width: fit-content;
  margin-top: 6px;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-seccion {
  padding: 64px var(--lz-el-margen);
  border-top: 1px solid var(--lz-el-linea);
}

@media (min-width: 900px) {
  .lz-plantilla--editorial-luxe .lz-el-seccion { padding-block: 96px; }
}

.lz-plantilla--editorial-luxe .lz-el-sobre__texto {
  max-width: 54ch;
  margin: 0 0 24px;
  font-size: 19px;               /* el texto de la dueña, un punto más grande */
  white-space: pre-line;         /* respeta los saltos que escriba */
}

/* ── Quién te atiende ─────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-cita {
  margin: 0;
  max-width: 30ch;
  font-family: var(--lz-fuente), Georgia, serif;
  font-size: clamp(24px, 4vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.lz-plantilla--editorial-luxe .lz-el-equipo {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 28px 0 0;
  padding: 0;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lz-secundario);
}

/* ── Galería ──────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;                      /* casi pegadas: es una tira, no tarjetas */
}

@media (min-width: 900px) {
  .lz-plantilla--editorial-luxe .lz-el-galeria { grid-template-columns: repeat(3, 1fr); }
}

.lz-plantilla--editorial-luxe .lz-el-galeria__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/*
  Cuando la ultima foto se queda sola en su fila, ocupa la fila entera.

  Medido a 375 px: con UNA foto, la rejilla de dos columnas la dejaba a media pantalla
  y con un hueco de papel al lado — no parece una decision, parece que falta algo. Con
  tres pasaba lo mismo en la ultima. Y una foto sola es el caso de casi cualquier salon
  que acaba de empezar a subirlas.

  Al ocupar el doble de ancho se le cambia la proporcion: un 4:5 a pantalla completa
  son 469 px de alto en el movil, mas que la franja de portada.
*/
.lz-plantilla--editorial-luxe .lz-el-galeria__foto:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
  /* Tres columnas: solo se estira si se queda sola de verdad (sobra una de tres). */
  .lz-plantilla--editorial-luxe .lz-el-galeria__foto:last-child:nth-child(odd) {
    grid-column: auto;
    aspect-ratio: 4 / 5;
  }
  .lz-plantilla--editorial-luxe .lz-el-galeria__foto:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
  }
}

/* ── Reseñas ──────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-resenas__nota {
  margin: 0 0 28px;
  font-family: var(--lz-fuente), Georgia, serif;
  font-size: 40px;
  line-height: 1;
}

.lz-plantilla--editorial-luxe .lz-el-resenas__de {
  font-family: var(--lz-el-sans);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--lz-secundario);
}

.lz-plantilla--editorial-luxe .lz-el-resenas__lista {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .lz-plantilla--editorial-luxe .lz-el-resenas__lista { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.lz-plantilla--editorial-luxe .lz-el-resena__texto { margin: 0 0 10px; font-size: 16px; }

.lz-plantilla--editorial-luxe .lz-el-resena__firma {
  margin: 0;
  font-size: 14px;
  color: var(--lz-secundario);
}

/* ── Reserva ──────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-reserva { border-top: 1px solid var(--lz-el-linea); }

/*
  El hueco. Ancho definido y SIN alto fijo: dentro va nuestro bloque, que mide lo que
  mida según el paso. Combinador descendiente y no `>`: entre la sección y el hueco
  puede haber un envoltorio invisible nuestro (§4).
*/
.lz-plantilla--editorial-luxe .lz-el-reserva__hueco { width: 100%; }

/* ── Datos ────────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-tabla { margin: 0; }

.lz-plantilla--editorial-luxe .lz-el-tabla__fila {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--lz-el-linea);
}

.lz-plantilla--editorial-luxe .lz-el-tabla__fila:last-child { border-bottom: 1px solid var(--lz-el-linea); }

.lz-plantilla--editorial-luxe .lz-el-tabla dt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lz-secundario);
}

.lz-plantilla--editorial-luxe .lz-el-tabla dd { margin: 0; }

/* Cada tramo de horario en su línea; un día partido manda la segunda SIN nombre. */
.lz-plantilla--editorial-luxe .lz-el-tabla__dia { display: block; }
.lz-plantilla--editorial-luxe .lz-el-tabla__nombre { display: inline-block; min-width: 6em; }

@media (min-width: 700px) {
  .lz-plantilla--editorial-luxe .lz-el-tabla__fila { grid-template-columns: 12em 1fr; gap: 24px; }
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-pie {
  padding: 48px var(--lz-el-margen) calc(48px + var(--lz-el-hueco-fija));
  border-top: 1px solid var(--lz-el-linea);
  font-size: 16px;
}

.lz-plantilla--editorial-luxe .lz-el-pie__nombre {
  margin: 0 0 6px;
  font-family: var(--lz-fuente), Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lz-plantilla--editorial-luxe .lz-el-pie__lanzo {
  margin: 0 0 16px;
  font-size: 14px;
  color: color-mix(in srgb, var(--lz-primario) 70%, var(--lz-fondo));
}

.lz-plantilla--editorial-luxe .lz-el-pie__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.lz-plantilla--editorial-luxe .lz-el-pie__legal a {
  color: var(--lz-primario);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lz-secundario);
}

/* ── Barra fija de móvil ──────────────────────────────────────────────────── */

.lz-plantilla--editorial-luxe .lz-el-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--lz-fondo);
  border-top: 1px solid var(--lz-el-linea);
  transition: transform 0.25s;
}

/* La esconde `plantilla.js` mientras se ve el botón de la portada. Sin JS, se queda. */
.lz-plantilla--editorial-luxe .lz-el-fija[data-lz-el-oculta] { transform: translateY(110%); }

.lz-plantilla--editorial-luxe .lz-el-fija .lz-el-boton--linea { flex: 0 0 auto; }

@media (min-width: 900px) {
  /* En escritorio la barra de arriba no se va nunca: la de abajo sobra. */
  .lz-plantilla--editorial-luxe .lz-el-fija { display: none; }
  .lz-plantilla--editorial-luxe { --lz-el-hueco-fija: 0px; }
}

/* El alto de la cabecera fija (contrato v1.11): el bloque de reserva lo usa para no
   quedarse debajo al subir. Es el de un nombre de una línea, medido el 09-10; el exacto
   lo pone plantilla.js midiendo la barra de verdad. */
.lz-plantilla--editorial-luxe { --lz-cabecera: 65px; }

/* ── Contacto: zona táctil de 44 px (revisión de diseño, 17-10) ───────────── */
/* Llamar y «Cómo llegar» son lo que más se toca desde un móvil, y medían 20–22 px de
   alto. En pantallas táctiles cada enlace de «Dónde estamos» ocupa 44 px; con ratón,
   la página queda como estaba. */
@media (pointer: coarse) {
  .lz-plantilla--editorial-luxe [data-lz-seccion="donde"] a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Escritorio: la mitad vacía, con lo que ya tiene el salón (Galo, 18-10) ──
   En la revisión de diseño, el texto ocupaba unos 600 px a la izquierda y el resto de la
   pantalla quedaba en blanco. Desde 1024 px, al lado del texto va algo que el salón ya
   tiene (lienzo «Plantillas · portada y escritorio»). Sin ese dato, como antes. */
/* Aquí, «El salón» y «Quién te atiende» lado a lado, como una doble página de revista. */
@media (min-width: 1024px) {
  .lz-plantilla--editorial-luxe .lz-el-pareja:has(> .lz-el-sobre):has(> .lz-el-quien) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--lz-el-linea);
  }

  .lz-plantilla--editorial-luxe .lz-el-pareja:has(> .lz-el-sobre):has(> .lz-el-quien) > .lz-el-seccion {
    border-top: 0;
  }

  .lz-plantilla--editorial-luxe .lz-el-pareja:has(> .lz-el-sobre):has(> .lz-el-quien) > .lz-el-quien {
    border-left: 1px solid var(--lz-el-linea);
  }
}