/* ================================================================
   La Casa Kehilá — puente Elementor
   Cargar DESPUÉS de lck-inmersion.css.

   La entrega v2 de Claude Design (07-09-2026, 23:50) es prácticamente
   autosuficiente: trae las claves de clase correctas en los
   contenedores, los anchos declarados como boxed_width, el color y la
   medida de cada elemento, y sube la especificidad con .elementor para
   ganarle al CSS que Elementor genera por página.

   Se verificó desactivando este archivo en caliente: medidas, colores
   y comportamiento quedan idénticos con y sin él. De los siete bloques
   que necesitaba la v1 sobrevive uno.

   Regla que conviene sostener: no editar lck-inmersion.css. Se
   sobrescribe entero con cada entrega. Todo parche va acá.
   ================================================================ */

/* ── 1. Capas a sangre dentro de un contenedor con caja ────────────
   La v2 arregló el envoltorio del widget, pero queda un nivel más
   arriba. Cuando una sección es "boxed", Elementor inserta un
   .e-con-inner con position:relative y el ancho de la caja —acá,
   1240 px—. Las capas absolutas del diseño (.lck-fotos, .lck-velo,
   .lck-hebreo--fondo) toman ESE como bloque contenedor y quedan
   encajonadas: la foto del hero se recorta a 1240 en vez de ir de
   borde a borde como en el standalone.

   Devolviendo el inner a estático, el bloque contenedor sube hasta la
   sección, que sí ocupa el ancho completo. Solo dos contenedores del
   sitio contienen capas a sangre, así que el alcance es acotado.     */
/* lck-inmersion.css pone .elementor .lck-hero > .e-con-inner en
   position:relative con z-index:2. Ese relative está para el apilado,
   no para contener la foto, pero de paso convierte al inner en bloque
   contenedor de las capas absolutas y las encajona.

   Volviéndolo estático, las capas resuelven contra .lck-hero, que
   ocupa el ancho completo y ya recorta con overflow:hidden. El
   contenido sigue a 1240 porque el max-width del inner no depende de
   position. Hace falta un nivel más de especificidad para ganarle.

   Al soltar el inner, el contenido pierde el apilado que heredaba de
   ahí. El bloque 2 se lo devuelve; no borrar uno sin el otro.

   Solo desde 768: en móvil el diseño vuelve .lck-fotos a position
   relative con 62svh de alto a propósito, para que las fotos 3:2 no se
   recorten en vertical. Ahí no hay nada que arreglar.                */
@media (min-width: 768px) {
  .elementor .lck-hero > .e-con-inner:has(.lck-fotos),
  .elementor .lck-hero > .e-con-inner:has(.lck-velo),
  .elementor .lck-hero > .e-con-inner:has(.lck-hebreo--fondo) {
    position: static;
  }
}

/* ── 2. El contenido del hero, siempre sobre sus capas ─────────────
   El bloque de arriba suelta el inner para que la foto vaya a sangre.
   El precio es que el contenido deja de heredar apilado de ahí y queda
   dependiendo del suyo propio.

   Y ese apilado era frágil: .lck-hero__cuerpo{z-index:2} de la entrega
   empata en especificidad con .e-con{z-index:var(--z-index)} del CSS
   base de Elementor, que resuelve a revert —o sea, auto—. El empate lo
   decide el orden de impresión, y ese orden cambió al pasar el CSS por
   página a modo interno: el texto del hero terminó debajo de la foto y
   del velo, ilegible.

   functions.php ya fija el orden declarando la dependencia. Esto es la
   segunda línea: gana por especificidad, así que aguanta aunque el
   orden vuelva a moverse. Se excluyen las tres capas para no subirlas
   a ellas —el velo tiene que quedar entre la foto y el texto—.        */
.elementor .lck-hero__cuerpo,
.elementor .lck-hero > .e-con-inner > .elementor-element:not(:has(.lck-fotos)):not(:has(.lck-velo)):not(:has(.lck-hebreo--fondo)) {
  position: relative;
  z-index: 2;
}

/* ── 3. Crédito de la donación ─────────────────────────────────────
   Lo imprime el tema en wp_footer, no una plantilla de Elementor: las
   plantillas se reemplazan enteras con cada entrega y el crédito no
   debería perderse ahí.

   "Nedavá" —ofrenda voluntaria— y no "matená", el regalo de todos los
   días, ni "trumá", la palabra del recibo. Es la del versículo con que
   empieza la construcción del Mishkán.

   Registro discreto a propósito. Es una dedicatoria, no un aviso.     */
.lck-nedava {
  background: var(--lck-fondo, #170D12);
  color: rgba(245, 239, 230, .5);
  font-family: var(--lck-texto, "Plus Jakarta Sans", system-ui, sans-serif);
  text-align: center;
  padding: clamp(28px, 5vh, 48px) clamp(20px, 5vw, 80px) clamp(36px, 6vh, 56px);
  border-top: 1px solid rgba(245, 239, 230, .08);
}

.lck-nedava p { margin: 0; }

.lck-nedava__hebreo {
  font-family: var(--lck-hebreo, "Frank Ruhl Libre", Georgia, serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(212, 165, 116, .72);
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.lck-nedava__texto {
  font-size: clamp(.8125rem, 1vw, .875rem);
  line-height: 1.7;
}

.lck-nedava__bendicion {
  display: block;
  font-style: italic;
  color: rgba(245, 239, 230, .38);
}
@media (min-width: 640px) {
  .lck-nedava__bendicion { display: inline; }
  .lck-nedava__bendicion::before { content: " · "; font-style: normal; }
}

/* ── 4. Contenedor del pie ─────────────────────────────────────────
   La entrega trae .lck-pie__col, __rotulo y __legal, pero ninguna
   plantilla que los use: el pie iba a armarse en Theme Builder, que es
   de Pro. Lo imprime el tema, así que la caja que los contiene va acá.

   Solo el contenedor y la grilla. Los estilos de las columnas, los
   enlaces y la línea legal son los de la entrega, sin tocar.          */
.lck-pie {
  background: var(--lck-fondo, #170D12);
  padding: clamp(48px, 8vh, 88px) clamp(20px, 5vw, 80px) clamp(28px, 4vh, 40px);
  border-top: 1px solid rgba(245, 239, 230, .08);
}

.lck-pie__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--lck-ancho, 1240px);
  margin: 0 auto clamp(32px, 5vh, 52px);
}

.lck-pie__legal {
  max-width: var(--lck-ancho, 1240px);
  margin: 0 auto;
}

/* El crédito de la nedavá va debajo del pie, así que no repite el borde. */
.lck-pie + .lck-nedava { border-top: 0; }

/* ── 5. Cabecera impresa por el tema ───────────────────────────────
   El envoltorio .elementor está para que apliquen los selectores de la
   entrega. Acá se neutraliza lo que ese envoltorio arrastra —sin esto
   ocupa una fila en el flujo y empuja el hero hacia abajo— y vive el
   salto al contenido, hijo directo de .lck-cabecera-tema y anterior a
   la barra en el orden del documento.                                */
.lck-cabecera-tema { display: contents; }

/* Invisible hasta recibir foco: fuera de pantalla y no display:none, que
   algunos lectores de pantalla lo saltarían. position:fixed porque
   .lck-cabecera-tema no es un contenedor de posicionamiento —display:
   contents la saca del árbol de caja—, el mismo motivo por el que
   .lck-nav de la entrega también usa fixed en vez de heredar de acá. */
.lck-saltar {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 95;
  padding: 12px 22px;
  background: var(--lck-crema);
  color: var(--lck-tinta);
  border-radius: 999px;
  font-family: var(--lck-texto);
  font-size: 14px;
  font-weight: 600;
  transition: top var(--t-rapido) var(--ease-suave);
}
.lck-saltar:focus { top: 96px; }

/* La barra de WordPress se sienta encima de la cabecera cuando hay sesión
   iniciada. Solo lo ven Karen y Nico, pero es justamente a ellos a quienes
   se les muestra el sitio. */
body.admin-bar .elementor .lck-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .elementor .lck-nav { top: 46px; }
}

/* ── 6. Menú provisorio ────────────────────────────────────────────
   Hasta que Elementor Pro habilite Theme Builder y la cabecera de la
   entrega pueda montarse de verdad. Todo lo de acá abajo usa clases
   .lck-menu__*, así que se quita de un tirón sin tocar nada del
   diseño: la barra, la marca y el CTA siguen siendo los suyos.

   El corte con el panel de pantalla completa es 1200 px, no 1100: la
   barra necesitaba aire para los nueve verbos más Contacto sin achicar
   la letra. Los desplegables de Elegir y Recordar son :hover y
   :focus-within —CSS puro— más un botón de flecha que además reacciona
   al clic, para Safari en mac, que no enfoca un <button> al hacer clic
   y sin eso se queda sin forma de abrirlos con mouse y sin hover.     */

/* La entrega le da a .e-con-inner dirección, alineación y gap, pero el
   display:flex se lo pone Elementor con `.e-con > .e-con-inner`, y esta
   barra la imprime el tema: no hay ningún .e-con arriba. Sin esta línea la
   marca, los enlaces y el botón se apilan en tres filas. */
.lck-cabecera-tema .lck-nav > .e-con-inner { display: flex; }

/* Sin esto el nombre envuelve en dos líneas apenas falta espacio, que es
   justo lo que pasa entre 375 y 1199: la barra tiene marca, píldora y
   hamburguesa peleando por el mismo ancho. */
.lck-nav__marca { white-space: nowrap; }

.lck-menu__lista {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lck-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.lck-menu__item > a,
a.lck-menu__contacto {
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  font-family: var(--lck-texto);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(245, 239, 230, .8);
  white-space: nowrap;
}

/* Dónde está parado el visitante: dorado y, además del color, un filete
   —así aria-current tiene una contraparte que no depende de distinguir
   colores—. */
.lck-menu__item > a[aria-current],
.lck-menu__contacto[aria-current] {
  color: var(--lck-dorado);
  position: relative;
}
.lck-menu__item > a[aria-current]::after,
.lck-menu__contacto[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 1px;
  background: var(--lck-dorado);
}

/* El botón de flecha de Elegir y Recordar: 28×28 de área táctil con un
   chevrón de 10px centrado. */
.lck-menu__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: rgba(245, 239, 230, .8);
  cursor: pointer;
}
.lck-menu__flecha-icono { transition: transform var(--t-rapido) var(--ease-suave); }
.lck-menu__item--rama:hover .lck-menu__flecha-icono,
.lck-menu__item--rama:focus-within .lck-menu__flecha-icono,
.lck-menu__flecha[aria-expanded="true"] .lck-menu__flecha-icono {
  transform: rotate(180deg);
}

.lck-menu__hijas {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 214px;
  display: grid;
  gap: 2px;
  margin: 0;
  /* El padding de arriba es también el puente: sin él, el hueco entre la
     fila del enlace y el panel corta el hover a mitad de camino. */
  padding: 14px 16px 16px;
  list-style: none;
  background: rgba(23, 13, 18, .94);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 239, 230, .1);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-rapido) var(--ease-suave),
              transform var(--t-rapido) var(--ease-suave),
              visibility var(--t-rapido);
}

/* Ratón, teclado y clic abren el mismo panel. El clic además marca
   es-abierto —ver el <script> de functions.php— y es el único de los
   tres que toca aria-expanded. */
.lck-menu__item--rama:hover > .lck-menu__hijas,
.lck-menu__item--rama:focus-within > .lck-menu__hijas,
.lck-menu__item--rama.es-abierto > .lck-menu__hijas {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lck-menu__hijas a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: rgba(245, 239, 230, .8);
}
.lck-menu__hijas a:hover { color: var(--lck-dorado); }

/* ── La hamburguesa ─────────────────────────────────────────────── */
.lck-menu__boton {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(245, 239, 230, .18);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
.lck-menu__boton span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1.5px;
  background: var(--lck-crema);
  transition: transform var(--t-rapido) var(--ease-fluido),
              opacity var(--t-rapido) var(--ease-suave);
}
.lck-menu__boton span:first-child { top: 17px; }
.lck-menu__boton span:last-child  { top: 23px; }
.lck-menu__boton[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.lck-menu__boton[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ── El panel de pantalla completa ──────────────────────────────── */
.lck-menu__panel {
  position: fixed;
  inset: 0;
  /* Por debajo de la barra —que va en 90—, no por encima: si el panel la
     tapa, tapa también el botón con que se cierra. La barra es
     transparente, así que el panel se ve igual de completo. */
  z-index: 88;
  background: rgba(23, 13, 18, .97);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 96px var(--lck-pad-x, 24px) 56px;
}
.lck-menu__panel[hidden] { display: none; }

.lck-menu__panel-caja { display: grid; gap: 32px; max-width: 560px; }

.lck-menu__panel-lista {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lck-menu__panel-fila {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lck-menu__panel-verbo {
  display: block;
  flex: 1 1 auto;
  font-family: var(--lck-display);
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 1.1;
  color: var(--lck-crema);
}
.lck-menu__panel-verbo:hover { color: var(--lck-dorado); }

/* El verbo en hebreo, a la derecha de su fila. La entrega pide 45%, pero
   sobre el fondo del panel eso da ≈4,1:1 —bajo el piso AA de 4,5:1 para
   texto de este tamaño—. 50% es el mismo tono que .lck-eyebrow--tenue y
   da ≈4,8:1. */
.lck-menu__hebreo {
  flex: 0 0 auto;
  font-family: var(--lck-hebreo);
  font-size: 1.1rem;
  color: rgba(245, 239, 230, .5);
}

.lck-menu__panel-hijas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
  font-size: 14px;
}
.lck-menu__panel-hijas a { color: rgba(245, 239, 230, .62); }
.lck-menu__panel-hijas a:hover { color: var(--lck-dorado); }

.lck-menu__panel-pie {
  padding-top: 22px;
  border-top: 1px solid rgba(245, 239, 230, .1);
  display: grid;
  gap: 16px;
}

.lck-menu__panel-contacto {
  font-family: var(--lck-texto);
  font-size: 15px;
  font-weight: 500;
  color: var(--lck-crema);
}
.lck-menu__panel-contacto:hover { color: var(--lck-dorado); }

/* El CTA del panel repite la píldora de la entrega. No la hereda porque
   aquella cuelga de .lck-nav__enlaces y acá estamos fuera de la barra. */
.lck-menu__panel-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid rgba(212, 165, 116, .5);
  border-radius: 999px;
  color: var(--lck-crema);
  font-family: var(--lck-texto);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--t-rapido) var(--ease-suave);
}
.lck-menu__panel-cta:hover {
  background: var(--lck-dorado);
  border-color: var(--lck-dorado);
  color: var(--lck-tinta);
}

/* El foco de teclado, dibujado y no el del navegador, que acá se ve azul
   sobre una foto. */
.lck-menu a:focus-visible,
.lck-menu__panel a:focus-visible,
.lck-menu__boton:focus-visible,
.lck-menu__flecha:focus-visible {
  outline: 2px solid var(--lck-dorado);
  outline-offset: 4px;
  border-radius: 4px;
}

body.lck-sin-scroll { overflow: hidden; }

/* ── El corte ───────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .lck-menu__lista { display: none; }
  /* a. porque .lck-menu__item > a, a.lck-menu__contacto (más arriba) ya
     puso display:inline-flex con esa misma especificidad; con solo la
     clase, ese display gana y Contacto se queda visible en la barra. */
  a.lck-menu__contacto { display: none; }
  .lck-menu__boton { display: block; }
  /* El panel arranca debajo de la barra, que queda por encima para que el
     botón de cerrar siga siendo alcanzable. */
  .lck-menu__panel { padding-top: 112px; }

  /* Entre 375 y 1199 la barra tiene que repartir su ancho entre marca,
     píldora y hamburguesa sin el resto del menú: el gap de 24px de la
     entrega es cómodo con nueve verbos, pero aprieta de más con solo
     estos tres. */
  .lck-cabecera-tema .lck-nav > .e-con-inner { gap: 12px; }

  /* La píldora compacta de la barra. Con el selector de la entrega
     —.lck-nav__enlaces a.lck-nav__cta— hay que igualar especificidad o
     el padding de acá no le gana al suyo. nowrap y flex-shrink:0 porque
     sin ellos el texto se parte en dos o tres líneas dentro de la
     píldora en vez de mantenerla de una sola. */
  .lck-menu a.lck-nav__cta {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media (max-width: 374px) {
  /* Bajo el ancho de un iPhone SE/6/7/8/X (375) la píldora ya no cabe
     cómoda junto a la marca y el botón: se oculta acá y sigue estando
     en el panel. */
  .lck-menu a.lck-nav__cta { display: none; }
}
@media (min-width: 1200px) {
  .lck-menu__panel { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lck-saltar,
  .lck-menu__hijas,
  .lck-menu__flecha-icono,
  .lck-menu__boton span,
  .lck-menu__panel-cta { transition: none; }
}

/* ── 7. Formularios del tema ───────────────────────────────────────
   La entrega ya estila campos, foco y botón —los pensó para el Izkor—.
   Falta lo que su maqueta no tenía: la etiqueta como <label> propio, la
   trampa antirrobots, los avisos de recibido y de error, y el desplegable,
   que en un fondo oscuro necesita que le dibujen la flecha.              */

.lck-form__caja { max-width: 34rem; }

.lck-form__campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 26px;
}

.lck-form__campo > label {
  font-family: var(--lck-texto);
  font-size: .92rem;
  color: rgba(245, 239, 230, .78);
}

.lck-form .lck-nota {
  font-size: .8rem;
  color: rgba(245, 239, 230, .62);
  margin-top: 2px;
}

/* El desplegable: sin esto hereda la flecha del sistema, que en un fondo
   oscuro puede quedar negra sobre negro. */
.lck-form select {
  appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245, 239, 230, .7) 50%),
                    linear-gradient(135deg, rgba(245, 239, 230, .7) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.lck-form select option { background: var(--lck-fondo); color: var(--lck-crema); }

/* El selector de fecha del navegador, en oscuro. */
.lck-form input[type="date"] { color-scheme: dark; }

.lck-form textarea { resize: vertical; min-height: 108px; line-height: 1.6; }

/* La trampa para robots. Fuera de la pantalla y no display:none, que algunos
   la detectan y la saltan. */
.lck-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lck-form__gracias,
.lck-form__error {
  padding: 16px 20px;
  border-radius: 14px;
  margin: 0 0 28px;
  font-family: var(--lck-texto);
  font-size: .95rem;
  border: 1px solid;
}
.lck-form__gracias {
  border-color: rgba(132, 169, 140, .5);
  background: rgba(132, 169, 140, .12);
  color: var(--lck-crema);
}
.lck-form__error {
  border-color: rgba(201, 123, 90, .55);
  background: rgba(201, 123, 90, .12);
  color: var(--lck-crema);
}

.lck-form__nota { margin-bottom: 24px; }
.lck-form__enviar { margin: 0; }

/* ── 8. Contraste bajo AA y letra bajo 12px ─────────────────────────
   Hallazgo 7 de la auditoría (08-09-2026): legal del pie 3,72:1,
   rótulos del pie 4,11:1 y eyebrow malva 4,24:1 quedaban bajo el piso
   AA de 4,5:1 para texto; el hebreo .34 caía a 2,84:1. Hallazgo 16:
   eyebrow y rótulo de tira, en 11px y 10,5px, bajo el mínimo legible
   de 12px (el rótulo de tira ya pasaba AA en contraste —4,80:1— pero
   no en tamaño). Todo sube acá, con un nivel más de especificidad que
   la regla que se pisa —el ancestro real (.lck-pie, .lck-tira) cuando
   lo hay, o la propia clase repetida cuando no lo hay— para no
   depender del orden de carga. Verificado con el script de contraste
   del brief: los valores nuevos van de 5,56:1 (hebreo verbo) a
   7,59:1 (legal). */
.lck-pie .lck-pie__legal,
.lck-pie .lck-pie__legal a {
  color: rgba(245, 239, 230, .66);
}

.lck-pie .lck-pie__rotulo {
  color: rgba(245, 239, 230, .62);
  font-size: .75rem;
}

.lck-tira .lck-tira__rotulo {
  font-size: .75rem;
  color: rgba(245, 239, 230, .62);
}

/* El eyebrow sale de tres formas en la entrega —span suelto, título de
   un widget Heading, párrafo de un widget de texto—, cada una con su
   propia especificidad (sección 3 de lck-inmersion.css). Se pisan las
   tres; .lck-eyebrow.lck-eyebrow no cambia a qué le pega el selector,
   solo lo hace pesar un poco más para ganarles a las tres. */
.lck-eyebrow.lck-eyebrow,
.elementor .lck-eyebrow.lck-eyebrow .elementor-heading-title,
.elementor .lck-eyebrow.lck-eyebrow .elementor-widget-container > p {
  font-size: .75rem;
}

/* Malva más claro, solo para texto: el filete y el hebreo de las
   viñetas malva heredan el mismo --lck-acento y suben con ellos —
   aceptado, ver el brief—. Mismo selector que la entrega: basta con
   cargar después, no hace falta especificidad extra. */
.lck-a-malva { --lck-acento: #C48E90; }

.lck-hebreo--verbo { color: rgba(245, 239, 230, .55); }

/* ── 9. Foco visible fuera del menú ──────────────────────────────────
   El menú ya dibuja el suyo (bloque 6). Acá el resto de lo que se
   puede alcanzar con teclado: botones de la entrega, la tira,
   "Siguiente", los números del panel cuando son enlace, "entrar" de
   los verbos, los campos y el botón de enviar del formulario, y la
   pausa del carrusel.

   Los campos necesitan ganarle a un :focus{outline:none} de la
   entrega (lck-inmersion.css, sección 14): mismo prefijo
   .elementor .lck-form que usa esa regla, misma especificidad: el
   puente carga después —lck_encolar_assets() lo declara como
   dependencia—, así que esta gana el empate. El subrayado dorado que
   la entrega ya pone en :focus con border-bottom-color sigue intacto;
   esto solo agrega el contorno. */
.elementor .lck-boton a.elementor-button:focus-visible,
a.lck-tira__item:focus-visible,
.lck-siguiente:focus-visible,
.lck-eyebrow--tenue[href]:focus-visible,
.lck-verbos__entrar:focus-visible,
.lck-fotos__pausa:focus-visible,
.elementor .lck-form input:focus-visible,
.elementor .lck-form select:focus-visible,
.elementor .lck-form textarea:focus-visible,
.elementor .lck-form button[type=submit]:focus-visible {
  outline: 2px solid var(--lck-dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 10. Aviso de formulario visible bajo la barra ───────────────────
   Hallazgo 1 (catástrofe): el aviso de "recibido" o de error quedaba
   2.300px abajo, fuera de vista. La tarea 1 ya puso el ancla; esto es
   el complemento: que el scroll-into-view del navegador no lo deje
   tapado bajo la barra fija, y que un campo con error se note también
   en el borde, no solo en el texto que agrega. Necesita ganarle al
   border-bottom de mayor especificidad de la sección 14 —los
   selectores por [type=...] de la entrega—, así que suma el mismo
   ancestro .lck-form que ya tienen esos. .lck-form__privacidad ya
   trae la clase lck-nota (lck-formularios.php:314,316): hereda su
   estilo del bloque 7 sin nada nuevo acá. */
.lck-form,
.lck-form__gracias,
.lck-form__error {
  scroll-margin-top: 110px;
}

.elementor .lck-form .lck-form__campo--error input,
.elementor .lck-form .lck-form__campo--error textarea,
.elementor .lck-form .lck-form__campo--error select {
  border-bottom-color: var(--lck-terracota);
}

/* ── 11. Verbos con puerta ────────────────────────────────────────────
   Hallazgo 3: los nueve verbos del scrollytelling no eran clicables.
   .lck-verbos__lienzo, el envoltorio de todo el texto, tiene
   pointer-events:none (lck-inmersion.css:274) para dejar pasar el
   scroll; el enlace de cada panel necesita recuperarlo a mano. Y como
   .lck-verbos__panel es una columna flex sin align-items propio,
   "stretch" —el valor por defecto— lo estira a lo ancho entero: de
   ahí la barra de pared a pared que describe el hallazgo. align-self
   la vuelve a un botón del tamaño de su texto, a la manera de los del
   hero.

   Hallazgo 10, la otra mitad: los paneles inactivos siguen en el DOM,
   apilados unos sobre otros, y opacity:0 no los saca del orden de
   tabulación — un Tab de más cae en un enlace invisible. visibility
   sí los saca, pero tiene que esperar a que el fundido termine: si se
   esconde de golpe, el panel que se va desaparece a mitad de la
   transición de opacity. De ahí el delay de 700ms, del largo de
   --t-medio, y por qué se repite la lista completa de transition en
   vez de solo agregar visibility: una propiedad nueva en el shorthand
   reemplaza el shorthand entero, así que hay que repetir
   opacity/transform para no perderles la curva. */
.lck-verbos__panel .lck-verbos__entrar {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 22px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  padding: 14px 26px;
}

.lck-verbos__panel:not(.es-activa) {
  visibility: hidden;
  transition: opacity var(--t-medio) var(--ease-suave),
              transform var(--t-medio) var(--ease-fluido),
              visibility 0s linear 700ms;
}
.lck-verbos__panel.es-activa {
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lck-verbos__panel:not(.es-activa) { transition: none; }
}

/* ── 12. Margen lateral de los bloques texto/foto ──────────────────────
   Hallazgo 2: .lck-seccion--sin-pad no tiene padding y .lck-bloque
   tampoco tiene padding horizontal (lck-inmersion.css, secciones 2 y
   10), así que el texto de los bloques texto/foto pega contra el borde
   de la pantalla. Los marcos de foto —el otro contenido de esas
   secciones— siguen a sangre a propósito: no se toca
   .lck-seccion--sin-pad, solo el bloque de texto.

   Bajo 768px Elementor apila las dos columnas: el bloque ocupa todo el
   ancho y necesita margen a ambos lados, el mismo 20px del hero móvil. */
@media (max-width: 767px) {
  .elementor .lck-seccion--sin-pad .lck-bloque { padding-inline: 20px; }
}

/* De 768px en adelante bloque y marco van lado a lado dentro del inner
   de 1400px (.lck-ancho-1400). Ese inner solo deja margen natural cuando
   el viewport lo supera —(100vw − 1400px) / 2— y ese margen recién
   alcanza el del resto del sitio (--lck-pad-x, clamp(20px, 5vw, 80px))
   a 1560px. Hasta ahí, el bloque recibe en su lado exterior —el que da
   al viewport, no el que da a la foto, que conserva el gap de 60px— la
   diferencia entre ambos. Así el texto queda siempre a
   max(--lck-pad-x, margen natural) del borde, como cualquier otra
   sección, y no hay salto en ningún ancho. Un bloque solo (Privacidad)
   es primero y último a la vez y recibe el margen a ambos lados.
   El 1400px es el mismo de .lck-ancho-1400: si cambia allá, cambia acá.
   En Windows 100vw incluye la barra de scroll: entre 1400 y 1560px el
   margen queda unos 8px más corto; aceptable. */
@media (min-width: 768px) {
  .elementor .lck-seccion--sin-pad > .e-con-inner > .lck-bloque:first-child {
    padding-inline-start: max(0px, var(--lck-pad-x) - max(0px, (100vw - 1400px) / 2));
  }
  .elementor .lck-seccion--sin-pad > .e-con-inner > .lck-bloque:last-child {
    padding-inline-end: max(0px, var(--lck-pad-x) - max(0px, (100vw - 1400px) / 2));
  }
}

/* ── 13. Tira: enlace que se nota ─────────────────────────────────────
   Hallazgo 20: la tira se ve igual sea enlace (home, <a>) o no
   (interiores, <div>). El selector a.lck-tira__item excluye a estas
   últimas solo: no hay nada que tocar ahí. */
a.lck-tira__item .lck-tira__dato::after {
  content: " →";
  opacity: 0;
  transition: opacity 240ms var(--ease-suave);
}
a.lck-tira__item:hover .lck-tira__dato::after,
a.lck-tira__item:focus-visible .lck-tira__dato::after {
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  a.lck-tira__item .lck-tira__dato::after { transition: none; }
}

/* ── 14. Panel móvil: Contacto es un enlace, no un rótulo ─────────────
   Hallazgo 12: en el panel de pantalla completa, "Contacto" —impreso
   por lck_cabecera(), .lck-menu__panel-contacto, bloque 6— usa la
   tipografía de texto corrido y no se distingue de un rótulo. Pasa a
   la tipografía de los verbos y suma la misma flecha que aparece al
   pasar el mouse por la tira (bloque 13): sin color propio, así que
   hereda el dorado que .lck-menu__panel-contacto:hover ya pone en el
   bloque 6, sin duplicar esa regla acá. No se toca el markup: bloque
   nuevo, no el 6. */
.lck-menu__panel-contacto {
  font-family: var(--lck-display);
  font-size: 1.35rem;
  color: var(--lck-crema);
}
.lck-menu__panel-contacto::after {
  content: " →";
  opacity: 0;
  transition: opacity 240ms var(--ease-suave);
}
.lck-menu__panel-contacto:hover::after,
.lck-menu__panel-contacto:focus-visible::after {
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .lck-menu__panel-contacto::after { transition: none; }
}

/* ── 15. Página 404 ────────────────────────────────────────────────────
   404.php no pasa por Canvas: sin hero que absorba la barra fija, el
   contenido queda pegado contra ella. 140px de padding-top en <main>
   la compensa.

   La sección de la 404 usa las clases de contenedor de Elementor
   (.e-con, .e-con-inner) para heredar su CSS, pero sin pasar por su
   render: nadie calcula, por instancia, los --display que
   frontend.min.css necesita (.e-con,.e-con>.e-con-inner{display:
   var(--display)}) — normalmente Elementor los imprime por elemento,
   acá no hay elemento. Se ponen a mano, solo en la 404; el resto sale
   solo: flex-direction:column es un valor fijo de .e-flex, no una
   variable, y --row-gap/--column-gap caen en su default de 20px
   cuando nadie los pisa.

   Los tres botones van dentro de .lck-404__acciones, una fila flex
   propia con wrap: sueltos como hijos directos de .e-con-inner
   saldrían uno por fila, apilados, por el flex-direction:column de
   arriba — el mismo problema que el bloque 11, con la misma solución
   de envolverlos en una fila. align-self:flex-start es defensivo: la
   fila también es flex y stretch (su default) igualaría la altura de
   los tres al del más alto; con los tres ya del mismo tamaño no
   cambia nada visible, pero evita una sorpresa si alguno lo deja de
   estar. El tamaño y las mayúsculas de estos botones imitan a los de
   Elementor del resto del sitio: la 404 no pasa por Canvas, así que
   no los hereda por su cuenta. */
.lck-404 main { padding-top: 140px; }

.lck-404 .e-con,
.lck-404 .e-con-inner { --display: flex; }

.lck-404__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.lck-404 .lck-boton {
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  padding: 14px 26px;
}

/* ── 16. Carrusel: botón de pausa ─────────────────────────────────────
   Hallazgo 10: el carrusel no tenía forma de pausarlo. El botón lo
   inserta lck-inmersion.js justo después de cada .lck-fotos con dos o
   más fotos (ver la nota al inicio de ese archivo); acá va el estilo.

   .lck-hero es el contenedor position:relative de la entrega. El
   envoltorio del widget HTML donde vive .lck-fotos está forzado a
   position:static (lck-inmersion.css, sección 1) para que la foto a
   sangre no quede encajonada; el botón, hermano de .lck-fotos dentro
   de ese mismo envoltorio, hereda esa misma cadena y su absoluto
   resuelve contra .lck-hero, no contra su padre inmediato.

   En escritorio eso ya deja el botón pegado a la esquina de la foto,
   porque ahí la foto ocupa el hero entero. En móvil no: .e-con-inner
   —el bloque 1 solo lo vuelve static desde 768px— sigue siendo el
   contenedor de posicionamiento ahí, con 32px de padding-top propio
   (sección 15), y adentro la foto pasa a relative con 62svh de alto
   (misma sección) seguida del texto en fondo sólido. bottom:22px
   caería entonces al pie de todo el bloque, texto incluido, no al pie
   de la foto. El quiebre calcula la esquina inferior de la foto desde
   ese padding-top más su alto, y transform:translateY(-100%) ubica el
   botón por su propio borde inferior sin necesitar saber de antemano
   cuánto mide. */
.lck-hero .lck-fotos__pausa {
  position: absolute;
  right: clamp(20px, 5vw, 80px);
  bottom: 22px;
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(245, 239, 230, .4);
  background: transparent;
  color: rgba(245, 239, 230, .7);
  font-family: var(--lck-texto);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease-suave);
}
.lck-hero .lck-fotos__pausa:hover,
.lck-hero .lck-fotos__pausa:focus-visible {
  color: var(--lck-crema);
}

@media (max-width: 767px) {
  .lck-hero .lck-fotos__pausa {
    top: calc(32px + 62svh - 22px);
    bottom: auto;
    transform: translateY(-100%);
  }
}

/* ── 17. Volver arriba ─────────────────────────────────────────────
   Pedido de la dueña después de la auditoría UX: en las páginas largas
   —Recordar, Elegir, el pie con las nueve viñetas— bajar es fácil,
   volver arriba significaba arrastrar el dedo o el mouse todo el
   camino de vuelta. Lo imprime lck_volver_arriba() (functions.php) en
   wp_footer, en todas las páginas, incluida la 404.

   z-index 87: bajo la barra (90, sección 5) y el panel móvil (88,
   sección 6), nunca por encima. Nace hidden y el script inline lo
   muestra recién pasado el 70% del alto de la ventana —el mismo
   umbral con que la barra se vuelve sólida en lck-inmersion.js—, así
   que nunca coincide con "Pausar fotos" (sección 16): ese botón vive
   dentro del hero, en el primer tramo de scroll.

   El anillo no es decorativo, es la posición de lectura en la página.
   stroke-dasharray es constante —el perímetro del propio <circle>,
   2π·21— y va acá; stroke-dashoffset cambia con el scroll y lo pone el
   script. rotate(-90deg) lo hace arrancar arriba en vez del punto de
   las 3 en punto con que empieza un <circle> de SVG. */
.lck-arriba {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  z-index: 87;
  background: rgba(23, 13, 18, .78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 239, 230, .28);
  color: var(--lck-crema);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t-rapido) var(--ease-suave),
    transform var(--t-rapido) var(--ease-suave);
}
/* La especificidad de .lck-arriba (una clase) empata con la del
   selector [hidden] de la hoja del navegador, y el origen de autor le
   gana al de user-agent aunque empate la especificidad: sin esto,
   display:grid de la regla de arriba deja el botón oculto solo por
   opacity, pero igual presente y tabulable mientras hidden. */
.lck-arriba[hidden] {
  display: none;
}
.lck-arriba.es-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lck-arriba:hover,
.lck-arriba:focus-visible {
  border-color: var(--lck-dorado);
  transform: translateY(-2px);
}
.lck-arriba:focus-visible {
  outline: 2px solid var(--lck-dorado);
  outline-offset: 3px;
}

.lck-arriba__anillo {
  position: absolute;
  inset: -1px;
  width: 50px;
  height: 50px;
  transform: rotate(-90deg);
}
.lck-arriba__pista {
  fill: none;
  stroke: rgba(245, 239, 230, .14);
  stroke-width: 2;
}
.lck-arriba__avance {
  fill: none;
  stroke: var(--lck-dorado);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 131.95;
  transition: stroke-dashoffset 120ms linear;
}

.lck-arriba__flecha {
  color: rgba(245, 239, 230, .85);
}
.lck-arriba:hover .lck-arriba__flecha,
.lck-arriba:focus-visible .lck-arriba__flecha {
  color: var(--lck-dorado);
}

@media (max-width: 767px) {
  .lck-arriba {
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 16px;
  }
  .lck-arriba__anillo {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lck-arriba,
  .lck-arriba__avance {
    transition: none;
  }
}

/* ── 18. Contacto directo e Instagram ──────────────────────────────
   Pedido de la dueña después de la auditoría UX: enlaces directos de
   WhatsApp, teléfono, correo e Instagram (shortcode lck_contacto_directo,
   página de Contacto), y un bloque "La casa, en Instagram" en la home.

   .lck-directo es la lista de canales; .lck-instagram__grilla, las seis
   fotos que llevan al perfil —la cuenta es privada, así que no se
   incrustan publicaciones—. .lck-menu__panel-instagram hereda el estilo
   de .lck-menu__panel-contacto (bloques 6 y 14): misma regla, ampliada
   con el selector nuevo, sin duplicar declaraciones. */
.lck-directo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 760px;
}

.lck-directo__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(245, 239, 230, .14);
  border-radius: 16px;
  color: var(--lck-crema);
  transition: border-color var(--t-rapido) var(--ease-suave),
    background var(--t-rapido) var(--ease-suave),
    transform var(--t-rapido) var(--ease-suave);
}
.lck-directo__item:hover,
.lck-directo__item:focus-visible {
  border-color: var(--lck-dorado);
  background: rgba(212, 165, 116, .08);
  transform: translateY(-2px);
}
.lck-directo__item:focus-visible {
  outline: 2px solid var(--lck-dorado);
  outline-offset: 3px;
}

.lck-directo__icono {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(245, 239, 230, .06);
  display: grid;
  place-items: center;
  color: var(--lck-dorado);
}

.lck-directo__canal {
  font-family: var(--lck-texto);
  font-size: 15px;
  font-weight: 600;
  color: var(--lck-crema);
}

.lck-directo__dato {
  display: block;
  font-size: 13px;
  color: rgba(245, 239, 230, .62);
}

/* La casa, en Instagram —home—. Seis fotos propias: la cuenta es
   privada y no hay publicaciones públicas que incrustar. */
.lck-instagram__grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 760px;
  margin-top: 8px;
}

.lck-instagram__tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.lck-instagram__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-fluido);
}
.lck-instagram__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(212, 165, 116, .14);
  opacity: 0;
  transition: opacity var(--t-rapido) var(--ease-suave);
}
.lck-instagram__tile:hover img,
.lck-instagram__tile:focus-within img {
  transform: scale(1.04);
}
.lck-instagram__tile:hover::after,
.lck-instagram__tile:focus-within::after {
  opacity: 1;
}
.lck-instagram__tile:focus-visible {
  outline: 2px solid var(--lck-dorado);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .lck-instagram__grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Misma fila que .lck-menu__panel-contacto (bloques 6 y 14): la flecha
   al pasar el mouse o el foco, la tipografía de los verbos. Selector
   ampliado, no una regla nueva. */
.lck-menu__panel-contacto.lck-menu__panel-instagram {
  font-family: var(--lck-display);
  font-size: 1.35rem;
  color: var(--lck-crema);
}
.lck-menu__panel-contacto.lck-menu__panel-instagram::after {
  content: " →";
  opacity: 0;
  transition: opacity 240ms var(--ease-suave);
}
.lck-menu__panel-contacto.lck-menu__panel-instagram:hover::after,
.lck-menu__panel-contacto.lck-menu__panel-instagram:focus-visible::after {
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .lck-directo__item,
  .lck-instagram__tile img,
  .lck-instagram__tile::after,
  .lck-menu__panel-contacto.lck-menu__panel-instagram::after {
    transition: none;
  }
}

/* ── 19. Los <button> del tema frente al reset de Hello ─────────────
   Hello Elementor trae en reset.css: button, en reposo, con color:#c36
   y border:1px solid #c36 —especificidad (0,0,1)—; en :hover y :focus,
   background-color:#c36 y color:#fff —(0,1,1), un elemento más una
   pseudo-clase—. Ese magenta no está en la paleta: es el rosa de
   fábrica con que Hello marca que un botón es interactivo cuando el
   tema no trae CSS propio.

   Una clase sola —.lck-menu__flecha, .lck-menu__boton, .lck-arriba—
   vale (0,1,0): en reposo ya le gana a button (0,0,1), la clase pesa
   más que el elemento. Pero en :hover/:focus empata con
   button:hover/:focus en la columna de clases y pseudo-clases y pierde
   en la de elementos, porque button aporta uno y la clase ninguno: de
   ahí el magenta. Hace falta que el propio :hover o :focus del botón
   fije background-color y color a mano —la especificidad sube a (0,2,0)
   y gana siempre, sin depender de qué hoja cargue después—. .lck-hero
   .lck-fotos__pausa (bloque 16) no se rompía porque su selector ya suma
   dos clases contra el fondo; el color de foco quedaba igual sin decir.

   Este bloque agrega esas reglas explícitas —reposo solo donde faltaba,
   :hover y :focus siempre, sin tocar el :focus-visible que cada botón
   ya tenía— sin editar los bloques 6, 16 ni 17. .lck-form
   button[type=submit] no aparece acá: su reposo y su :hover ya ganan
   con el dorado y la tinta de lck-inmersion.css; el :focus sin hover se
   queda con el crema del reposo, que tampoco es magenta. */

/* El chevrón de Elegir/Recordar: el que vio la dueña en la captura. */
.lck-menu__flecha:hover,
.lck-menu__flecha:focus {
  background-color: transparent;
  color: var(--lck-dorado);
  border-color: transparent;
}

/* La hamburguesa: bloque 6 nunca le puso color propio —invisible hoy
   porque las rayas son <span> con fondo fijo, pero deja de estarlo
   apenas cambie el ícono—. */
.lck-menu__boton {
  background-color: transparent;
  color: var(--lck-crema);
}
.lck-menu__boton:hover,
.lck-menu__boton:focus {
  background-color: transparent;
  color: var(--lck-crema);
  border-color: rgba(245, 239, 230, .4);
}

/* Acá el magenta sí se veía entero: fondo del botón incluido. */
.lck-arriba:hover,
.lck-arriba:focus {
  background-color: rgba(23, 13, 18, .78);
  color: var(--lck-dorado);
  border-color: var(--lck-dorado);
  transform: translateY(-2px);
}

/* Ya ganaba por especificidad (bloque 16, dos clases); esto solo deja
   :focus explícito igual que :hover, sin depender del orden de las
   hojas. */
.lck-hero .lck-fotos__pausa:focus {
  color: var(--lck-crema);
}

/* ── 8. El logo en la cabecera ─────────────────────────────────────
   La marca era texto en Fraunces. Ahora es el wordmark real: el de la
   casa con el maguén david dentro del techo, que es el que la
   comunidad usa. Va en blanco sobre transparente, porque la barra es
   transparente sobre la foto y se vuelve oscura al bajar.

   El logo es de dos líneas, así que en la barra se ve compacto a
   propósito: no se trata de que se lea a un metro, sino de que se
   reconozca.                                                         */
.lck-nav__marca {
  display: flex;
  align-items: center;
  line-height: 0;
}

.lck-nav__marca img {
  height: 56px;
  width: auto;
  display: block;
  transition: opacity var(--t-rapido) var(--ease-suave);
}

.lck-nav__marca:hover img { opacity: .78; }

@media (max-width: 1099px) {
  .lck-nav__marca img { height: 44px; }
}


/* ====================================================================
   9 · El epígrafe de la portada, sin plato
   --------------------------------------------------------------------
   El resto del sitio usa .lck-eyebrow--plato: una píldora oscura con
   desenfoque detrás del texto. En las páginas interiores funciona,
   porque el epígrafe es un rótulo de navegación —"Elegir · 01 · …"— y
   conviene que se lea como una etiqueta despegada de la foto.

   En la portada no. Ahí la frase es la definición de la comunidad, y el
   rectángulo negro le pasaba por encima a la foto justo donde la foto
   tiene que respirar. Pedido de Nico, 14-09-2026.

   Sin el plato, el texto queda directamente sobre la imagen, así que el
   contraste ya no lo da un fondo sólido sino el velo del hero (que
   arranca en .78 de opacidad arriba, donde vive el epígrafe) más una
   sombra corta. Con las dos cosas el texto pasa AA sobre las cinco
   fotos del carrusel, incluida la más clara.                          */
.lck-eyebrow--sobrefoto,
.elementor .lck-eyebrow--sobrefoto .elementor-heading-title {
  color: var(--lck-crema);
  text-shadow: 0 1px 2px rgba(23, 13, 18, .55), 0 2px 14px rgba(23, 13, 18, .8);
}