/* contacto-flotante — botón fijo en esquina que se despliega en un panel con
   Llamar / WhatsApp / Cómo llegar. Negocio local en móvil: clínicas, talleres,
   hostelería, servicios a domicilio. Portado del `family-button` de Cult UI
   (allí React + motion, con tres capas de bordes anidados); aquí un solo
   panel con transform+opacity y un botón cuyo icono pasa de + a × con dos
   barras en ::before/::after, sin dependencias. */

.lui-cf{
  position:fixed;
  right:1.1em;
  bottom:calc(1.1em + env(safe-area-inset-bottom, 0px));
  z-index:60;
  font:400 .95rem/1.4 system-ui, sans-serif;
}

/* El panel vive siempre en el DOM (nunca display:none) para poder animar
   opacity/transform sin trucos de reflow. Lo que lo saca del árbol de
   accesibilidad y del tabulado cuando está cerrado es `visibility`, que se
   retrasa al cerrar y es inmediato al abrir con dos transition-delay
   distintos: así los enlaces de dentro no se pueden tabular estando ocultos,
   sin necesidad de tocarles el tabindex por JS. */
.lui-cf-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + .7em);
  width:min(17em, calc(100vw - 2.4em));
  padding:1em 1em .9em;
  border-radius:1.1em;
  background:var(--lui-superficie, #fff);
  border:1px solid var(--lui-linea, #e6e6e0);
  box-shadow:0 1.2em 2.4em rgba(0,0,0,.18), 0 .2em .5em rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:.5em;
  transform-origin:bottom right;
  opacity:0;
  visibility:hidden;
  transform:translateY(.6em) scale(.94);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.lui-cf[data-abierto="true"] .lui-cf-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}

.lui-cf-nombre{margin:0;font-weight:700;font-size:1em;color:var(--lui-texto, #1a1a18)}
.lui-cf-horario{margin:0 0 .3em;font-size:.82em;color:var(--lui-atenuado, #75756c)}

.lui-cf-opcion{
  display:flex;align-items:center;gap:.65em;
  padding:.65em .75em;
  border-radius:.7em;
  background:var(--lui-fondo-opcion, #f4f3ef);
  color:var(--lui-texto, #1a1a18);
  text-decoration:none;
  font-weight:600;font-size:.92em;
  transition:background .15s ease, color .15s ease;
}
.lui-cf-opcion svg{width:1.3em;height:1.3em;flex:none;color:var(--lui-acento, #c8a24a)}
.lui-cf-opcion:focus-visible{outline:2px solid var(--lui-acento, #c8a24a);outline-offset:2px}
/* Hover con criterio: en un móvil sin ratón esto solo dejaría el color de
   "encima" pegado tras el toque, así que se limita a dispositivos con cursor. */
@media (hover:hover){
  .lui-cf-opcion:hover{background:var(--lui-acento, #c8a24a);color:#fff}
  .lui-cf-opcion:hover svg{color:#fff}
}

.lui-cf-disparador{
  position:relative;
  width:3.6em;height:3.6em;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, #2a2a28, #111110);
  box-shadow:0 .6em 1.6em rgba(0,0,0,.32);
  cursor:pointer;
  display:block;
  padding:0;
}
/* El + se dibuja con dos barras (::before/::after) en vez de un icono de
   fuente externa. Cada una gira sola con su propia transición: no comparten
   keyframe, así que no hay riesgo de que una le pise la rotación a la otra. */
.lui-cf-disparador::before,
.lui-cf-disparador::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:1.3em;height:2px;
  background:#fff;
  transform-origin:center;
  transition:transform .25s ease;
}
.lui-cf-disparador::before{transform:translate(-50%,-50%) rotate(0deg)}
.lui-cf-disparador::after{transform:translate(-50%,-50%) rotate(90deg)}
.lui-cf[data-abierto="true"] .lui-cf-disparador::before{transform:translate(-50%,-50%) rotate(45deg)}
.lui-cf[data-abierto="true"] .lui-cf-disparador::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lui-cf-disparador:focus-visible{outline:2px solid var(--lui-acento, #c8a24a);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .lui-cf-panel,
  .lui-cf-opcion,
  .lui-cf-disparador::before,
  .lui-cf-disparador::after{transition:none}
}