/* La Barveria — maquetación de las páginas.
   Los colores, la tipografía y los componentes vienen del design system (tokens.css + bundle.css).
   Aquí solo hay disposición, con variables de tokens.css. Nada de colores ni tamaños sueltos. */

body { margin: 0; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--espacio-3); top: -100px; z-index: 30; }
.saltar:focus { top: var(--espacio-3); background: var(--superficie); padding: var(--espacio-2) var(--espacio-3); }
a { color: var(--acento-texto); }

/* ---------- Cabecera fija y menú móvil ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; }
.cabecera__nav { display: contents; }
.cabecera__reserva-movil { display: none; }
@media (max-width: 860px) {
  .cabecera__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: var(--espacio-4);
    padding: var(--espacio-5) var(--espacio-4) var(--espacio-6);
    background: var(--superficie); border-bottom: 1px solid var(--filete);
  }
  .cabecera.is-open .cabecera__nav { display: flex; }
  .cabecera.is-open .lb-cabecera__nav { display: flex; flex-direction: column; gap: var(--espacio-3); }
  .cabecera__reserva-movil { display: inline-flex; align-self: flex-start; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--espacio-8); }
.seccion--baja { background: var(--superficie-baja); }
.seccion--sin-arriba { padding-top: 0; }
@media (max-width: 720px) { .seccion { padding-block: var(--espacio-7); } .seccion--sin-arriba { padding-top: 0; } }

.pila { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-6); }
.pila > :not(.lb-titulo):not(.lb-boton):not(.cuenta):not(.selector):not(.nota-pie) { align-self: stretch; }
.pila--izquierda { align-items: flex-start; }

.entradilla { font-size: 20px; line-height: 32px; color: var(--tinta); max-width: 56ch; text-wrap: pretty; }
.nota-pie { font-size: 13px; line-height: 20px; color: var(--tinta-suave); }

/* Cabeza de las páginas interiores */
.cabeza-pagina { padding: var(--espacio-9) 0 var(--espacio-7); text-align: center; }
.cabeza-pagina .entradilla { margin: var(--espacio-5) auto 0; color: var(--tinta-suave); }
.cabeza-pagina .lb-titulo__texto { font-size: 56px; line-height: 64px; letter-spacing: 0.18em; margin-right: -0.18em; }
@media (max-width: 720px) {
  .cabeza-pagina { padding: var(--espacio-8) 0 var(--espacio-6); }
  .cabeza-pagina .lb-titulo__texto { font-size: 28px; line-height: 36px; }
}

/* ---------- Inicio ---------- */
.lb-portada h1 { margin: 0; }
/* Portada de la home: la foto sola, enmarcada; la firma ya está en la cabecera */
.portada-foto__img { width: 100%; height: clamp(420px, 57.5vw, 828px); object-fit: cover; object-position: 50% 30%; }
/* Reservas en la primera pantalla: una por local, abajo a la izquierda sobre el difuminado.
   Villaviciosa → Booksy; Boadilla → teléfono de Víctor. */
.portada-foto { position: relative; }
.portada-foto__reservas {
  position: absolute; z-index: 1; bottom: var(--espacio-7);
  left: max(var(--espacio-5), calc((100% - var(--ancho-contenido)) / 2 + var(--espacio-5)));
  display: flex; gap: var(--espacio-3);
}
.portada-foto__reservas .lb-boton { background: transparent; border-color: var(--crema); color: var(--crema); }
.portada-foto__reservas .lb-boton:hover { background: var(--crema); color: var(--cafe); }
@media (max-width: 860px) {
  /* Móvil: apilados y a caballo del borde inferior de la foto; 96px de aire hasta la siguiente sección */
  .portada-foto__reservas {
    position: relative; left: auto; bottom: auto; width: max-content; max-width: calc(100% - 2 * var(--espacio-4));
    flex-direction: column; margin: -25px var(--espacio-4) var(--espacio-5);
  }
}
/* Gris (sin difuminado). Escritorio: sobre la foto, rellenos de negro para leerse sin velo.
   Móvil: debajo de la foto, en contorno, sobre la página. */
html[data-theme="mono"] .portada-foto__reservas .lb-boton { background: #000; border-color: #000; color: #f5f5f4; }
html[data-theme="mono"] .portada-foto__reservas .lb-boton:hover { background: #f5f5f4; border-color: #f5f5f4; color: #000; }
@media (max-width: 860px) {
  html[data-theme="mono"] .portada-foto__reservas { margin: var(--espacio-4) var(--espacio-4) var(--espacio-5); }
  html[data-theme="mono"] .portada-foto__reservas .lb-boton { background: transparent; border-color: var(--tinta); color: var(--tinta); }
  html[data-theme="mono"] .portada-foto__reservas .lb-boton:hover { background: var(--tinta); color: var(--superficie); }
}

/* Pase de fotos de la portada (versión café): fundido cruzado y acercamiento lento. */
.portada-foto__capa {
  position: absolute; top: 0; left: 0; width: 100%; height: clamp(420px, 57.5vw, 828px);
  object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 1.8s ease-in-out;
}
.portada-foto__capa.is-visible { opacity: 1; }
.portada-foto { overflow: hidden; }
.portada-foto.is-viva .portada-foto__img, .portada-foto__capa { transform-origin: 50% 40%; }
.portada-foto .is-acercando { animation: portada-acercar 9s ease-out forwards; }
@keyframes portada-acercar { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (max-width: 720px) { .portada-foto__capa { height: 420px; } }
@media (prefers-reduced-motion: reduce) { .portada-foto .is-acercando { animation: none; } }
@media (max-width: 720px) { .portada-foto__img { height: 420px; } }

/* Rejilla común de la home: etiqueta a la izquierda (3 de 12), contenido a la derecha (9 de 12) */
.fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-6); align-items: start; }
.fila__lado { grid-column: 1 / 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-3); padding-top: 13px; }
.fila__etiqueta {
  font-family: var(--font-texto); font-weight: 500; font-size: 13px; line-height: 20px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave);
}
.fila__contenido { grid-column: 4 / 13; min-width: 0; }
.fila--filete .fila__lado { border-top: 1px solid var(--filete-fuerte); padding-top: var(--espacio-4); }
.fila--filete .fila__etiqueta { line-height: 22px; }
.seccion--corta { padding-block: var(--espacio-7); }
@media (max-width: 860px) {
  .fila { display: flex; flex-direction: column; gap: var(--espacio-4); }
  .fila__lado { flex-direction: row; justify-content: space-between; align-self: stretch; padding-top: 0; }
}

.destacado { font-family: var(--font-texto); font-weight: 300; font-size: 32px; line-height: 44px; letter-spacing: -0.01em; }
@media (max-width: 860px) { .destacado br { display: none; } }
@media (max-width: 860px) { .destacado { font-size: 24px; line-height: 34px; } }

.servicios-linea { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-5); border-top: 1px solid var(--filete-fuerte); padding-top: var(--espacio-4); flex-wrap: wrap; }
.lista-servicios { list-style: none; padding: 0; display: flex; gap: var(--espacio-7); }
.lista-servicios__nombre {
  font-family: var(--font-rotulo); font-weight: 400; font-size: 14px; line-height: 22px;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.seccion--corta { padding-block: var(--espacio-6); }

.galeria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-6); row-gap: var(--espacio-4); align-items: end; }
.galeria .galeria__pie { grid-row: 1; grid-column: 1 / -1; }
.galeria figure { grid-row: 2; display: flex; flex-direction: column; gap: var(--espacio-3); margin: 0; }
.galeria img { width: 100%; object-fit: cover; }
.galeria__grande { grid-column: 1 / 7; }
.galeria__grande img { aspect-ratio: 4 / 5; object-position: 50% 45%; }
.galeria__pequena { grid-column: 7 / 13; }
.galeria__pequena img { aspect-ratio: 3 / 2; }
@media (max-width: 720px) {
  .galeria { grid-template-columns: minmax(0, 1fr); }
  .galeria .galeria__pie, .galeria figure { grid-row: auto; grid-column: auto; }
}

.fila .lb-locales { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6); align-items: stretch; }
@media (max-width: 720px) { .fila .lb-locales { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Conócenos ---------- */
.historia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--espacio-8); align-items: center; }
.historia__texto { display: flex; flex-direction: column; gap: var(--espacio-4); max-width: var(--ancho-texto); }
.historia__cita { border-left: 1px solid var(--filete); padding-left: var(--espacio-6); display: flex; flex-direction: column; gap: var(--espacio-3); }
.historia__frase {
  font-family: var(--font-rotulo); font-size: 32px; line-height: 44px; letter-spacing: 0.22em;
  text-transform: uppercase; text-wrap: balance;
}
.historia__firma {
  font-family: var(--font-rotulo); font-size: 11px; line-height: 16px; letter-spacing: 0.37em;
  text-transform: uppercase; color: var(--acento-texto);
}
@media (max-width: 860px) {
  .historia { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-6); }
  .historia__cita { border-left: 0; border-top: 1px solid var(--filete); padding: var(--espacio-5) 0 0; }
}

/* ---------- Servicios ---------- */
.destacados { display: flex; flex-direction: column; gap: var(--espacio-8); }
.otros {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--espacio-6); border-top: 1px solid var(--filete); max-width: 900px; margin-inline: auto; width: 100%;
}
.otros li {
  display: flex; align-items: baseline; gap: var(--espacio-4);
  padding: var(--espacio-4) 0; border-bottom: 1px solid var(--filete);
  font-family: var(--font-rotulo); font-size: 14px; line-height: 22px; letter-spacing: 0.3em; text-transform: uppercase;
}
@media (max-width: 720px) { .otros { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Productos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.filtro, .selector__opcion {
  font-family: var(--font-rotulo); font-size: 11px; line-height: 16px; letter-spacing: 0.37em; text-transform: uppercase;
  padding: var(--espacio-2) calc(var(--espacio-4) - 0.37em) var(--espacio-2) var(--espacio-4);
  background: transparent; color: var(--tinta); border: 1px solid var(--filete-fuerte); border-radius: var(--radio-0);
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.filtro[aria-pressed="true"], .selector__opcion[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); }
.filtro:focus-visible, .selector__opcion:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.lb-producto[hidden] { display: none; }

/* ---------- Club ---------- */
.cuenta { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-3); text-align: center; }
.cuenta__etiqueta, .plan__frecuencia {
  font-family: var(--font-rotulo); font-size: 11px; line-height: 16px; letter-spacing: 0.37em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.cuenta__reloj { display: flex; gap: var(--espacio-5); }
.cuenta__reloj[hidden] { display: none; }
.cuenta__reloj span { display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 20px; color: var(--tinta-suave); }
.cuenta__reloj b { font-size: 28px; line-height: 34px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta); }
.selector { display: flex; }
.tarifas { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-6); }
.tarifas .planes { align-self: stretch; }
.selector__opcion + .selector__opcion { border-left: 0; }
/* Móvil: el selector se queda fijo bajo la cabecera mientras se recorren las fichas de precios
   (sticky dentro de .tarifas: se suelta al terminar la última ficha). */
@media (max-width: 860px) {
  .selector {
    position: sticky; top: 77px; z-index: 10;
    padding-block: var(--espacio-3); background: var(--superficie);
    box-shadow: 0 0 0 100vmax var(--superficie); clip-path: inset(0 -100vmax);
    border-bottom: 1px solid var(--filete);
  }
}

.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--filete); }
.plan { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-4); padding: var(--espacio-6) var(--espacio-5); text-align: center; min-width: 0; }
.plan + .plan { border-left: 1px solid var(--filete); }
.plan--black { background: var(--superficie-alta); }
.plan__nombre {
  font-family: var(--font-rotulo); font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: 0.22em;
  text-transform: uppercase; margin-right: -0.22em;
}
.plan__frecuencia { margin-top: calc(var(--espacio-3) * -1); }
.plan__importe { font-size: 44px; line-height: 52px; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan__importe small { font-size: 16px; font-weight: 400; color: var(--tinta-suave); }
.plan__unidad { font-size: 14px; line-height: 22px; color: var(--tinta-suave); }
.plan__ventajas { list-style: none; padding: 0; width: 100%; border-top: 1px solid var(--filete); text-align: left; }
.plan__ventajas li { display: flex; gap: var(--espacio-3); padding: var(--espacio-3) 0; border-bottom: 1px solid var(--filete); font-size: 14px; line-height: 22px; }
.plan__ventajas strong { font-weight: 600; min-width: 4ch; color: var(--acento-texto); }
.plan__vip--no { color: var(--tinta-suave); }
.plan__vip--no strong { color: var(--tinta-suave); }
.plan .lb-boton { margin-top: auto; }
.plan .lb-boton[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 860px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--filete); }
}
.vip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--espacio-8); align-items: center; }
@media (max-width: 860px) { .vip { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5); } }

/* ---------- Legales ---------- */
.legal { max-width: calc(var(--ancho-texto) + 2 * var(--espacio-5)); display: flex; flex-direction: column; gap: var(--espacio-3); }
.legal h2 {
  font-family: var(--font-rotulo); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.3em;
  text-transform: uppercase; margin-top: var(--espacio-6);
}
.legal h3 { font-size: 16px; font-weight: 600; margin-top: var(--espacio-3); }
.legal ul { padding-left: var(--espacio-4); }

/* ---------- Pie ---------- */
.pie__local { margin-top: var(--espacio-2); color: var(--crema-apagada); }
.pie__local:first-child { margin-top: 0; }

.pie__telefono { font-size: 20px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lb-locales { width: 100%; }

/* Lista numerada (estilo de la web antigua): número pequeño, título en Mattone, texto suave, filetes */
.numerada { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--filete); }
.numerada li {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr); column-gap: var(--espacio-4);
  padding: var(--espacio-5) 0; border-bottom: 1px solid var(--filete);
}
.numerada__num, .otros .numerada__num {
  font-family: var(--font-rotulo); font-size: 11px; line-height: 22px; letter-spacing: 0.2em; color: var(--tinta-suave);
}
.numerada__titulo {
  font-family: var(--font-rotulo); font-weight: 400; font-size: 14px; line-height: 22px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--tinta);
}
.numerada__texto { margin-top: var(--espacio-2); color: var(--tinta-suave); max-width: 60ch; }
.numerada--tras-destacado { margin-top: var(--espacio-7); }
@media (max-width: 720px) { .numerada li { grid-template-columns: 3em minmax(0, 1fr); } }

.foto-ancha { display: flex; flex-direction: column; gap: var(--espacio-3); margin-inline: auto; }
.foto-ancha img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }

/* ---------- Aviso del Club (temporal, hasta el 26 de octubre) ----------
   Excepción explícita de Charly a «solo transiciones de color» (2026-10-08): un punto que bota
   como el de un mensaje nuevo. Sin movimiento con prefers-reduced-motion. main.js lo quita al
   pasar la fecha límite. */
.lb-cabecera__nav a, .lb-cabecera__menu { position: relative; }
.aviso {
  position: absolute; top: -3px; right: -11px; width: 8px; height: 8px; border-radius: var(--radio-circulo);
  background: var(--acento-texto); box-shadow: 0 0 0 2px var(--superficie);
  animation: aviso-bote 3.6s ease-in-out infinite;
}
.aviso::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--acento-texto);
  animation: aviso-onda 3.6s ease-out infinite;
}
@media (max-width: 860px) { .cabecera.is-open .lb-cabecera__nav a { display: inline-block; } } /* el punto, pegado al texto */
.lb-cabecera__menu .aviso { top: -4px; right: -4px; height: 8px; margin: 0; background: var(--acento-texto); }
@keyframes aviso-bote {
  0%, 62%, 100% { transform: translateY(0); }
  68% { transform: translateY(-7px); }
  74% { transform: translateY(0); }
  79% { transform: translateY(-3px); }
  84% { transform: translateY(0); }
}
@keyframes aviso-onda {
  0%, 70% { transform: scale(1); opacity: 0; }
  72% { opacity: .9; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .aviso, .aviso::after { animation: none; } }
/* Mientras dura la campaña del Club, «Reserva tu cita» de la cabecera va de contorno en todas
   las páginas (también en el Club, aunque allí no haya punto): se rellena al pasar el ratón. Vuelve a cobalto cuando main.js quita la clase. */
.cabecera--campana .lb-boton--primario { background: transparent; border-color: var(--filete-fuerte); color: var(--tinta); }
.cabecera--campana .lb-boton--primario:hover { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }

/* ---------- Mosaico de la home ----------
   Muro de fotos en cuadrados a sangre, con dos cajas de texto encima (referencia: presentación de
   STMNT). Licencias sobre el reglamento, con permiso de Charly: casillas apagadas (opacidad y gris)
   para que el muro respire. */
.mosaico { padding: 0; }
.mosaico__rejilla {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px;
}
.mosaico__foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; align-self: start; }
.mosaico__foto--apagada { opacity: .16; filter: grayscale(1); }
.mosaico__caja {
  position: relative; z-index: 1; background: var(--superficie);
  display: flex; flex-direction: column; justify-content: center; gap: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-5);
}
.mosaico__caja--titulo { grid-column: 1 / 8; grid-row: 2 / 4; }
.mosaico__caja--pie { grid-column: 11 / 17; grid-row: 5 / 7; }
.mosaico__titulo {
  font-family: var(--font-rotulo); font-weight: 400; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.15;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta);
}
.mosaico__texto { font-size: 17px; line-height: 26px; color: var(--tinta-suave); }
.mosaico__enlace { color: var(--tinta); font-size: 17px; line-height: 26px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mosaico__enlace:hover { color: var(--acento-texto); }
@media (max-width: 860px) {
  .mosaico__rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mosaico__caja--titulo { grid-column: 1 / -1; grid-row: 2 / 5; }
  .mosaico__caja--pie { grid-column: 1 / -1; grid-row: 9 / 11; }
  .mosaico__foto:nth-of-type(n+43) { display: none; }
  .mosaico__caja { padding: var(--espacio-4); }
}


/* ---------- Manuscrita en los textos de acento (2026-10-08) ----------
   Petición de Charly: los textos en azul que no son enlace van en manuscrita, como la firma del
   logo y el «Madrid / Boadilla» azul de la tarjeta. Es Emily Austin, la de la tarjeta, servida por
   Adobe Fonts con el kit de Víctor (klj0coq, enlazado en build.py). Allura (OFL, en ds/fonts) queda
   de reserva por si el kit no carga. Las cifras (01, 25 %) siguen igual. */
@font-face { font-family: "Allura"; src: url("../ds/fonts/Allura-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.historia__firma, .lb-local__ciudad, .manuscrita {
  font-family: "emily-austin", "Allura", "Brush Script MT", cursive; font-weight: 400; font-style: normal;
  text-transform: none; letter-spacing: 0; margin-right: 0;
}
.historia__firma { font-size: 42px; line-height: 1.1; margin-top: var(--espacio-1); }
.lb-local__ciudad { font-size: 46px; line-height: 1.05; }

/* «Milagros a María» va siempre en la manuscrita y en el color de acento, esté donde esté */
.manuscrita { color: var(--acento-texto); font-size: 40px; line-height: 1.1; display: inline-block; }
.lb-cafe .manuscrita { color: var(--acento-texto); }

/* ---------- Botones flotantes (solo móvil) ----------
   Abajo a la izquierda, redes: botón con el icono de compartir que despliega Instagram, TikTok y
   Spotify. Abajo a la derecha, «Reservar»: despliega Villaviciosa (Booksy) y Boadilla (teléfono).
   Mismo estilo los dos. Las redes se esconden al llegar al pie; «Reservar» no sale mientras se ven
   los botones de reserva de la portada. */
.flotante { display: none; }
@media (max-width: 860px) {
  .flotante {
    position: fixed; z-index: 15; bottom: var(--espacio-3);
    display: flex; flex-direction: column; gap: var(--espacio-2);
    transition: opacity .2s ease;
  }
  .flotante--redes { left: var(--espacio-3); align-items: flex-start; }
  .flotante--reservar { right: var(--espacio-3); align-items: flex-end; }
  .flotante.is-oculta { opacity: 0; pointer-events: none; }
  .flotante__boton, .flotante__panel {
    background: var(--superficie); color: var(--tinta);
    border: 1px solid var(--filete-fuerte); border-radius: 14px;
  }
  .flotante__boton {
    height: 52px; min-width: 52px; padding: 0 var(--espacio-4); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-rotulo); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  }
  .flotante__boton--icono { padding: 0; }
  .flotante__boton svg { width: 22px; height: 22px; }
  .flotante__boton .i-close, .flotante.is-abierta .flotante__boton .i-share { display: none; }
  .flotante.is-abierta .flotante__boton .i-close { display: block; }
  .flotante.is-abierta .flotante__boton { background: var(--tinta); color: var(--superficie); }
  .flotante__boton:focus-visible, .flotante__panel a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .flotante__panel {
    display: flex; flex-direction: column; gap: var(--espacio-1); padding: 6px;
    opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .flotante.is-abierta .flotante__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .flotante__icono { display: grid; place-items: center; width: 40px; height: 40px; color: var(--tinta); border-radius: 10px; }
  .flotante__icono svg { width: 22px; height: 22px; }
  .flotante__opcion {
    display: block; padding: 12px var(--espacio-3); border-radius: 10px; color: var(--tinta); text-decoration: none;
    font-family: var(--font-rotulo); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
  }
  .flotante__icono:hover, .flotante__opcion:hover { background: var(--tinta); color: var(--superficie); }
}
@media (prefers-reduced-motion: reduce) { .flotante__panel { transition: none; } }