/* =====================================================================
   PERFIL PÚBLICO · lo usan p.php y la vista previa de dashboard.php
   Una sola hoja para los dos = lo que ves editando es lo que se publica.
   ===================================================================== */
.pf{
  --p-bg:#0B1220;--p-surface:#FFFFFF;--p-text:#FFFFFF;--p-muted:rgba(255,255,255,.66);
  --p-card-text:#111318;--p-card-sub:#6B7280;--p-accent:#C9A227;--p-accent-ink:#0B1220;
  --p-r:16px;
  /* El fondo son DOS capas: arriba el color con la transparencia
     contraria a la opacidad elegida, y debajo la imagen. Asi la opacidad
     de la imagen sale sin una capa aparte y sin tocar el apilado de toda
     la pagina. Sin imagen, `--p-bg-img` es `none` y el velo es 0: queda
     exactamente el color de siempre. */
  background-color:var(--p-bg);
  background-image:
    /* El grano arriba de todo: cae sobre lo que haya debajo, sea color,
       degradado, trama o foto. `none` cuando esta apagado. */
    var(--p-bg-ruido,none),
    linear-gradient(rgba(var(--p-bg-rgb,11,18,32),var(--p-bg-veil,0)),
                    rgba(var(--p-bg-rgb,11,18,32),var(--p-bg-veil,0))),
    var(--p-bg-img,none),
    /* El degradado va ABAJO de todo: la imagen de fondo, si la hay, se
       apoya encima. `none` cuando no hay, asi la capa existe siempre. */
    var(--p-bg-grad,none);
  /* EL GRANO SE REPITE EN MOSAICO, lo demas cubre. Con `cover` sobre el
     grano, una baldosa de 120px se estiraba a toda la pantalla y quedaban
     manchones enormes en vez de textura. */
  background-size:120px 120px,cover,cover,cover,cover;
  background-position:center;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  /* El grano se MEZCLA con lo que tiene debajo en vez de apoyarse
     encima. Apoyado, su gris subia el brillo de todo y un fondo negro
     terminaba gris: dejaba de verse el color elegido. Con `overlay`
     oscurece donde el fondo es oscuro y aclara donde es claro, asi que
     agrega textura sin mover el tono. Las otras cuatro capas van
     normales. */
  background-blend-mode:overlay,normal,normal,normal,normal;
  color:var(--p-text);
  /* El fondo se pinta sobre ESTE bloque, asi que tiene que llegar abajo
     de la pantalla aunque el perfil traiga poco contenido. `100%` NO
     servia: un min-height en porcentaje se mide contra la ALTURA del
     padre, y `.pf-wrap` solo declara min-height, asi que quedaba en
     automatico y el bloque media lo que media el contenido. Con el fondo
     plano no se notaba (debajo estaba el mismo color); con un degradado,
     el difuminado o la trama se veia el corte a media pagina.
     `dvh` va despues para que en el movil no salte con la barra del
     navegador; los que no lo entienden se quedan con `vh`. */
  min-height:100vh;min-height:100dvh;
  font-family:'Inter',-apple-system,sans-serif;padding-bottom:104px;position:relative;
}
.pf.no-cta{padding-bottom:28px}
.pf{padding-bottom:28px}
.pf:not(.no-cta){padding-bottom:0}
/* El fondo asoma donde el estilo de portada recorta (el arco, la onda,
   la curva). Toma el color de la BANDA del nombre, no el de la pagina:
   asi el recorte del hero y la banda son una sola mancha de color en vez
   de dos. Sin banda es `transparent` y se ve el fondo de siempre. */
.pf-cover{height:var(--cover-h,216px);position:relative;overflow:hidden;
  background:var(--p-head-bg,transparent)}
.pf-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.pf-track::-webkit-scrollbar{display:none}
.pf-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;
  scroll-snap-stop:always;background:#1A2436 center/cover no-repeat}
/* DOS capas, no una: la de arriba oscurece el filo superior (fija, es lo
   que despega la muesca del telefono) y la de abajo funde con el fondo.
   Separadas, el ALTO del fundido es un solo numero y se puede llevar a 0
   para dejar el corte limpio. Con `--cov-fade:65%` el resultado es
   exactamente el degradado de tres paradas que habia antes. */
.pf-cover-veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.28) 0%,transparent 35%),
    linear-gradient(to top,var(--p-bg) 0%,transparent var(--cov-fade,65%))}
/* =====================================================================
   ESTILOS DE PORTADA

   Trece formas para el mismo bloque. La forma es lo UNICO que cambia:
   el color, el alto, el anillo del logo y la tipografia siguen saliendo
   del tema del perfil. Ningun estilo trae paleta propia, porque entonces
   dejaria de verse como el resto de la pagina.

   Todo vive aca y nada mas que aca. Los dos renderizadores (`render.ts`
   del editor y `render_profile()` de lib.php) solo escriben la clase
   `cov-<id>` en `.pf-cover`, la misma cadena de los dos lados. Es a
   proposito: `herramientas/comparar-renderers.mjs` exige HTML identico
   al caracter, y un estilo que trajera su propio HTML seria una ocasion
   mas de que los dos lados se separen. Con una clase, el comparador
   queda verde para siempre.

   --cov-lift: cuanto se come el estilo del borde de abajo. El logo y la
   cabecera suben ese mismo tanto, asi que la separacion entre el logo y
   el nombre no cambia de un estilo a otro. Se declara en tres selectores
   a la vez (la portada, y los dos hermanos que lo usan) porque las
   variables CSS bajan, no cruzan.

   Las formas se dibujan de tres maneras, ninguna agrega nodos al HTML:
     - un `::after` pintado de --p-bg, que tapa (arco, arcada, doble)
     - `clip-path`, que recorta (diagonal, superpuesto)
     - `mask-image` con un SVG en data: URI, para los filos irregulares
       (onda, pincel). Van incrustados en el CSS y no como archivo suelto:
       un archivo mas es un pedido mas en un telefono con mala senal.
   ================================================================== */

/* 1 · Arco clasico. La cupula sube 56px en el centro y el filo va marcado
   en el color de acento.

   Se dibujaba con un `::after` de fondo y un `border-top`. Andaba, pero la
   linea se afinaba en los cantos: medida en el perfil publico de Mingo,
   1px en el canto izquierdo y 2px en el derecho contra 2-3px en el resto.
   En una esquina redondeada el grosor del borde se degrada, y aca se veia
   la cola de esa degradacion.

   Ahora se dibuja igual que su gemelo `cov-arcoabajo`: la MISMA elipse en
   una mascara SVG, y la linea como un trazo con `non-scaling-stroke`, que
   mantiene 2px de verdad de punta a punta sin importar la pendiente.

   Los dos gemelos comparten construccion a proposito. Antes uno usaba un
   borde y el otro una mascara, y por eso no habia manera de que se vieran
   iguales por mas que se ajustaran los numeros.

   La mascara va FIJA en 216px anclada abajo, igual que la de su gemelo:
   la cupula mide 56px sea cual sea el alto de la portada. */
.cov-arco .pf-track,
.cov-arco .pf-cover-veil{
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V86.85 A58 25.93 0 0 0 0 86.85 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V86.85 A58 25.93 0 0 0 0 86.85 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% calc(100% - 216px),100% 216px;
  mask-size:100% calc(100% - 216px),100% 216px;
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cov-arco::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--p-accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 86.85 A58 25.93 0 0 1 100 86.85' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 86.85 A58 25.93 0 0 1 100 86.85' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 216px;mask-size:100% 216px;
  -webkit-mask-position:bottom;mask-position:bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cov-arco,.cov-arco ~ .pf-ring,.cov-arco ~ .pf-head{--cov-lift:18px}

/* 1b · Arco hacia abajo. El gemelo del arco clasico, doblado al reves.

   LA LINEA NO PUEDE SER UN BORDE, Y COSTO TRES INTENTOS ENTENDERLO.

   Primero fue `border-bottom`. Se apagaba en las puntas: en una esquina
   redondeada el grosor se DEGRADA entre los dos bordes vecinos, y el de
   abajo iba en 2px contra costados de 0. Medido, la linea moria 7px antes
   de cada canto (cubria 376 de 390 columnas). El arco de arriba sufre lo
   mismo, pero su elipse se sale un 8% por lado y la degradacion le pasa
   fuera de la pantalla. Poner los cuatro bordes en 2px fue peor: 36px
   menos de ancho.

   Despues fue una sombra interior, que no se degrada porque es una copia
   de la forma corrida dos pixeles. Cubria las 390 columnas, pero seguia
   afinandose: con un radio de 50% la elipse llega VERTICAL a las puntas, y
   ahi un grosor vertical constante da un grosor perpendicular de cero.

   Lo que hay ahora no aproxima nada: dibuja la MISMA elipse del arco (rx
   un 116% del ancho, ry 56px) con una mascara SVG, y la linea como un
   trazo con `vector-effect='non-scaling-stroke'`, que mantiene 2px de
   verdad en toda su longitud sin importar la pendiente. Por construccion
   no se puede difuminar. Medido contra el arco real: cubre las 390 de 390
   columnas, 2px en las puntas (el arco tiene 1), y el desvio de espejo es
   de 0,60px de media sobre una portada de 216.

   El tamano de la mascara va FIJO en 216px anclado abajo, y no al 100%. Si
   escalara con el alto, mover ese control separaria a los gemelos, porque
   la cupula del arco mide 56px siempre. Medido a 120, 216 y 400px de alto,
   el desvio se queda en 0,60px en las tres.

   La primera capa de la mascara es el rectangulo de arriba y la segunda el
   arco: varias capas de mascara se SUMAN, y esa union es la forma.

   Se enmascaran la foto Y el velo, no `.pf-cover`: el `::after` que dibuja
   la linea es hijo suyo, y enmascarar al padre le comeria medio trazo.

   No lleva `--cov-lift`: el centro del filo se queda donde estaba y el
   logo, que va centrado, cae encima sin moverse un pixel. */
.cov-arcoabajo .pf-track,
.cov-arcoabajo .pf-cover-veil{
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V87.2 A58 25.9 0 0 1 0 87.2 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V87.2 A58 25.9 0 0 1 0 87.2 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% calc(100% - 216px),100% 216px;
  mask-size:100% calc(100% - 216px),100% 216px;
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cov-arcoabajo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--p-accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 87.2 A58 25.9 0 0 0 100 87.2' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 87.2 A58 25.9 0 0 0 100 87.2' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 216px;mask-size:100% 216px;
  -webkit-mask-position:bottom;mask-position:bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* 2 · Onda. Dos lobulos desiguales recortados con mascara. El SVG se
   estira con la portada (`preserveAspectRatio='none'`), asi que la onda
   guarda su proporcion con cualquier alto. */
.cov-onda{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H100 V88 C82,98 70,78 50,88 C32,97 16,80 0,90 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H100 V88 C82,98 70,78 50,88 C32,97 16,80 0,90 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cov-onda,.cov-onda ~ .pf-ring,.cov-onda ~ .pf-head{--cov-lift:12px}

/* 3 · Diagonal. El corte y la linea de acento salen del MISMO polygon
   con 3px de diferencia: el recorte del padre borra todo lo que queda
   por debajo del filo y sobrevive la tira. Asi la linea no puede quedar
   desalineada del corte por mas que cambie el ancho del telefono. */
.cov-diagonal{clip-path:polygon(0 0,100% 0,100% 78%,0 100%)}
.cov-diagonal::after{
  content:'';position:absolute;inset:0;background:var(--p-accent);
  clip-path:polygon(0 calc(100% - 3px),100% calc(78% - 3px),100% 100%,0 100%);
}

/* 4 · Arcada. El mismo dibujo que el arco pero con la elipse mucho mas
   ancha que la portada: se ve el techo del arco, no la cupula entera. */
.cov-arcada::after{
  content:'';position:absolute;left:-30%;right:-30%;bottom:-2px;height:96px;
  background:var(--p-bg);border-radius:50% 50% 0 0/100% 100% 0 0;
}
.cov-arcada,.cov-arcada ~ .pf-ring,.cov-arcada ~ .pf-head{--cov-lift:30px}

/* 5 · Hexagonos. No recorta nada: es un panal en el color de acento por
   encima de la foto. El SVG va de MASCARA y el color lo pone el fondo
   del `::after`, porque un data: URI no puede leer una variable CSS. */
.cov-hexagono::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--p-accent);opacity:.16;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M27.99 1.75l-14 8.08L0 1.75'/%3E%3Cpath d='M0 47.25l13.99-8.08 14 8.08'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M27.99 1.75l-14 8.08L0 1.75'/%3E%3Cpath d='M0 47.25l13.99-8.08 14 8.08'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:28px 49px;mask-size:28px 49px;
}

/* 6 · Curva suave. El unico estilo que no necesita ni pseudo ni mascara:
   la portada ya venia con `overflow:hidden`. */
.cov-curva{border-radius:0 0 50% 50%/0 0 22% 22%}
.cov-curva,.cov-curva ~ .pf-ring,.cov-curva ~ .pf-head{--cov-lift:14px}

/* 7 · Fundido. Sin forma: la foto se apaga y el velo se estira. Para
   fotos flojas, que son la mayoria de las que sube un cliente con el
   telefono. */
.cov-fundido .pf-slide{filter:saturate(.55) contrast(1.06) brightness(.94)}
.cov-fundido .pf-cover-veil{
  background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,transparent 14%,var(--p-bg) 74%);
}

/* 8 · Mitad y mitad. La foto ocupa la izquierda y la derecha queda en el
   fondo del perfil con un velo de acento. */
.cov-mitad .pf-track{
  -webkit-mask-image:linear-gradient(to right,#000 0 54%,transparent 54%);
  mask-image:linear-gradient(to right,#000 0 54%,transparent 54%);
}
/* Va en `::after` y no en `::before` a proposito. `::before` se pinta por
   DEBAJO del velo, y el velo termina opaco: el tinte se veia arriba, el
   velo lo tapaba abajo, y quedaba un escalon horizontal a media portada
   que parecia un error de dibujo. */
.cov-mitad::after{
  content:'';position:absolute;inset:0 0 0 54%;pointer-events:none;
  background:var(--p-accent);opacity:.10;
}
.cov-mitad .pf-cover-veil{
  background:linear-gradient(to bottom,rgba(0,0,0,.30) 0%,transparent 45%,var(--p-bg) 100%);
}

/* 9 · Pincelada. Como la onda pero con el filo a mano alzada: tres
   ondas de distinto tamano, que es lo que hace que no se lea como una
   figura de programa. */
.cov-pincel{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H100 V86 C88,96 80,79 66,85 C54,90 46,79 33,86 C22,92 12,82 0,89 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H100 V86 C88,96 80,79 66,85 C54,90 46,79 33,86 C22,92 12,82 0,89 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.cov-pincel,.cov-pincel ~ .pf-ring,.cov-pincel ~ .pf-head{--cov-lift:14px}

/* 10 · Vidrio. Banda esmerilada abajo. `backdrop-filter` no existe en
   navegadores viejos: sin el queda una banda oscura solida. Se ve
   distinto, no se ve roto. */
.cov-vidrio::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  background:rgba(255,255,255,.10);
  /* Sin esto el esmerilado empieza de golpe y se lee como una costura
     recta cruzando la foto. La mascara lo hace entrar de a poco. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 42%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cov-vidrio::after{background:rgba(10,13,20,.34)}
}

/* 11 · Doble curva. La cupula de acento asoma por encima de la de fondo
   y las dos juntas se leen como una cinta. */
.cov-doble::before,.cov-doble::after{
  content:'';position:absolute;left:-14%;right:-14%;height:56px;
  border-radius:50% 50% 0 0/100% 100% 0 0;
}
/* La de acento asoma 22px por encima de la de fondo. Con menos, la cinta
   se lee como una raya y el estilo no se distingue del arco. */
.cov-doble::before{bottom:22px;background:var(--p-accent);opacity:.9}
.cov-doble::after{bottom:-2px;background:var(--p-bg)}
.cov-doble,.cov-doble ~ .pf-ring,.cov-doble ~ .pf-head{--cov-lift:18px}

/* 12 · Figura superpuesta. Cuna de acento en angulo sobre la foto. */
.cov-superpuesto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--p-accent);opacity:.62;
  clip-path:polygon(0 62%,100% 84%,100% 100%,0 100%);
}

/* 14 · Marco. La foto enmarcada con una linea del MISMO color que el filo
   del arco clasico: `var(--p-accent)`, o sea la de la marca del cliente.
   No es un gris ni un blanco fijo, se tine sola con la paleta del perfil.

   El marco va por DENTRO y no en el borde del bloque: una linea pegada al
   canto de la pantalla no se lee como marco, se lee como que la pagina
   termina ahi. Separada 11px, se lee como una foto enmarcada.

   La sombra de 1px hacia afuera no es decoracion: sobre una foto clara
   una linea de color sola se pierde, y ese filo oscuro la despega sin
   ensuciarle el color. */
.cov-marco::after{
  content:'';position:absolute;inset:11px;pointer-events:none;
  border:2px solid var(--p-accent);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.28);
}
/* Los puntos, adentro del marco. Fuera lo cruzarian por la mitad. */
.cov-marco{--dots-b:22px}
.cov-marco .pf-dots{right:22px}

/* Los puntos del carrusel viven abajo a la derecha. Casi todas las formas
   se comen justo esa esquina, asi que cada una declara con --dots-b cuanto
   hay que subirlos y la cuenta se hace en UN solo lugar, en `.pf-dots`.

   ANTES SE IBAN ARRIBA (`bottom:auto;top:14px`) Y ESO ERA UN BUG: el menu
   de los tres puntitos vive en `top:14px;right:14px` con z-index 6, o sea
   el MISMO rincon, y los puntos (z-index 4) quedaban DETRAS del boton.
   Medido: el boton ocupa x 338..376 y los puntos x 314..376 en un telefono
   de 390. Pasaba en las diez formas de esa lista, no en una sola.

   Los numeros salen de MEDIR cuanto tapa cada forma en la franja donde
   caen los puntos, mas 6px de aire. Las formas que se dibujan con
   porcentajes van en % para que sigan al alto de la portada, que el
   cliente mueve entre 90 y 400px; las que se dibujan con una figura de
   alto fijo van en px. Si se toca una mascara, hay que volver a medir. */
.cov-arco{--dots-b:38px}          /* tapa 32px, fijos */
.cov-arcada{--dots-b:82px}        /* tapa 76px, fijos */
.cov-doble{--dots-b:42px}         /* tapa 36px, fijos */
.cov-curva{--dots-b:20px}         /* tapa 13px, fijos */
.cov-onda{--dots-b:calc(9% + 6px)}
.cov-pincel{--dots-b:calc(11% + 6px)}
.cov-diagonal{--dots-b:calc(18% + 6px)}
/* arcoabajo tapa 7px, y superpuesto y mitad NO cortan la portada: solo la
   tinen por encima. Esas tres se quedan con los 14px de siempre, y estaban
   en la lista de arriba sin necesidad. */
/* ---------- logo con anillo de gradiente ----------
   --rw = grosor del anillo. El tamaño del círculo blanco queda fijo en
   118 px y el contenedor crece hacia afuera, así cambiar el grosor no
   achica el logo ni lo desplaza: el centro se mantiene en el mismo punto. */
.pf-ring{
  --rw:3px; --gap:4px;
  position:absolute;left:50%;z-index:3;transform:translateX(-50%);
  width:calc(118px + 2 * var(--rw) + 2 * var(--gap));
  height:calc(118px + 2 * var(--rw) + 2 * var(--gap));
  top:calc(var(--cover-h,216px) - 76px - 2*var(--rw) - 2*var(--gap) - var(--cov-lift,0px));
  border-radius:50%;padding:var(--rw);box-sizing:border-box;isolation:isolate;
}
.pf-ring::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:0;
  background:var(--ring,none);
}
.pf-ring.ring-off{--rw:0px;--gap:5px}
.pf-ring.ring-off::before{display:none}

.pf-ring.ring-color    { --ring:var(--rc,var(--p-accent)); }
.pf-ring.ring-marca    { --ring:conic-gradient(from 210deg,var(--p-accent),var(--p-text),var(--p-accent),var(--p-text),var(--p-accent)); }
.pf-ring.ring-instagram{ --ring:linear-gradient(45deg,#F9CE34 5%,#EE2A7B 50%,#6228D7 95%); }
.pf-ring.ring-atardecer{ --ring:linear-gradient(135deg,#FF8A00,#E52E71 55%,#FF3D77); }
.pf-ring.ring-neon     { --ring:linear-gradient(135deg,#00F5A0,#00D9F5 55%,#7A6BFF); }
.pf-ring.ring-oro      { --ring:conic-gradient(from 200deg,#8C6D12,#F5D07A 25%,#C9A227 50%,#FFF0C2 70%,#8C6D12); }
.pf-ring.ring-arcoiris { --ring:conic-gradient(#FF4D4D,#F9CB28,#3BE081,#22D3EE,#7A6BFF,#FF4D4D); }

.pf-ring.spin::before{animation:pf-spin 5s linear infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}

.pf-logo{
  position:relative;z-index:1;width:100%;height:100%;
  border-radius:50%;box-sizing:border-box;
  background-color:#fff;background-repeat:no-repeat;background-position:center;
  /* Un filo gris, no un anillo. Antes era `var(--gap) solid var(--p-bg)`,
     o sea 4px del color de FONDO: en un perfil oscuro se veia como un aro
     negro grueso alrededor del logo, y en uno claro desaparecia. El logo
     siempre se apoya en blanco (`background-color:#fff`), asi que un gris
     translucido se lee igual en los dos temas. */
  border:1px solid var(--p-logo-bd,rgba(0,0,0,.12));
  /* EL FONDO SE RECORTA AL PADDING-BOX, Y NO ES UN DETALLE.

     De fabrica un `background-color` llega hasta el BORDER-box, o sea que
     se pinta TAMBIEN debajo del borde. Con el blanco de aca abajo, ese
     filo del 12 por ciento quedaba dibujado sobre blanco y daba un gris
     224 SOLIDO: un aro claro de 1px entre el logo y el anillo, que con un
     logo oscuro se lee como un hueco y no como un filo. Medido pixel a
     pixel el 07/09 sobre el perfil de Cosmetica.

     Con `padding-box` el filo se pinta sobre lo que de verdad hay detras
     (el anillo, o el fondo de la pagina), asi que en oscuro casi
     desaparece y en una paleta clara sigue separando el logo, que es para
     lo que se puso. */
  background-clip:padding-box;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
/* Por defecto el logo entra COMPLETO. 'cover' recorta todo lo que no sea
   perfectamente cuadrado, que es el caso de casi cualquier logotipo. */
.pf-logo{background-size:contain;background-origin:content-box;padding:11px}
.pf-logo.fill{background-size:cover;background-origin:padding-box;padding:0}
/* ZOOM DEL LOGO

   Casi todo logotipo trae SU PROPIO margen dentro del archivo: medido en
   los perfiles publicados, entre 7 y 21 por ciento de aire por lado. Ni
   `cover` ni `contain` lo pueden quitar, porque no es hueco del
   contenedor, es parte de la imagen. Este deslizador agranda el dibujo
   dentro del circulo hasta comerse ese aire.

   Se dibuja en un ::before que crece con inset NEGATIVO, asi el HTML no
   cambia: hereda el background del padre, incluido el `background-image`
   que el servidor escribe en linea, y su padding, que es lo que distingue
   el modo Completo del Recortado.

   `z-index:-1` lo deja encima del fondo del padre y DEBAJO de su
   contenido: sin eso, el logo de iniciales (una letra, sin imagen) queda
   tapado por el pseudo-elemento.

   Con 100 el inset es 0, o sea exactamente lo de siempre. */
.pf-logo{overflow:hidden}
.pf-logo::before{
  content:'';position:absolute;z-index:-1;
  inset:calc(50% - var(--p-logo-z,100) * .5%);
  background:inherit;background-color:transparent;padding:inherit;
}
.pf-ring.sq,.pf-ring.sq::before{border-radius:calc(26px + var(--rw) + var(--gap))}
.pf-ring.sq .pf-logo{border-radius:26px}
.pf-ring.sq.spin::before{animation:none}
/* El logo cuelga 42px por debajo de la portada (es absoluto). Este
   relleno tiene que dejarlo pasar y nada mas: cada pixel de mas es
   aire entre el logo y el nombre. 50 deja 8px de separacion. */
/* El bloque del nombre y la ubicacion puede llevar fondo propio, que se
   elige en Apariencia > Logo. De fabrica es `transparent`: se ve el fondo
   de la pagina y ningun perfil publicado cambia ni un pixel.
   El relleno de abajo va en una variable y no fijo, porque solo hace falta
   cuando HAY fondo: sin banda de color, ese aire seria un hueco. */
.pf-head{padding:calc(50px - var(--cov-lift,0px)) 22px 0;text-align:center}
/* LA BANDA DEL NOMBRE

   Va en el nombre y el lema, y NO en `.pf-head`. La cabecera tambien
   contiene la calificacion de Google y los sellos, y esos van FUERA de la
   banda, sobre el fondo de la pagina. Pintar `.pf-head` los metia adentro.

   No se envuelve nada en un div nuevo: esta hoja no usa combinadores de
   hijo directo, pero un div de mas es la clase de cambio que rompe el
   diseno meses despues sin que nadie lo relacione (ver la cabecera de
   render.ts). Se pintan las dos cajas que ya existen y se hace que se
   toquen. */
.pf-name{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  display:block;text-align:center;
  color:var(--p-head-text);
  background:var(--p-head-bg,transparent);
  /* Los 9px que separaban al lema eran su `margin-top`. Pasan a ser
     relleno de aca para que las dos cajas se TOQUEN y la banda salga
     entera: un margen no pinta fondo. Se ve exactamente igual. */
  padding-bottom:9px;
  /* Sangra hasta los cantos de la pantalla, y sube a tapar el relleno de
     arriba de `.pf-head`: el margen negativo estira la caja hacia arriba y
     el relleno igual y contrario devuelve el texto a su sitio, asi que la
     banda arranca pegada a la portada sin mover una letra. */
  margin-left:-22px;margin-right:-22px;
  margin-top:calc(-1 * (50px - var(--cov-lift,0px)));
  padding-top:calc(50px - var(--cov-lift,0px));
  /* 28 y no 22: es el colchon donde cae el sello, que sale del flujo con
     el margen negativo de abajo. Con 22 el sello se pasaba del borde de la
     pantalla en un nombre que llenara el renglon, y eso es scroll
     horizontal en la pagina del cliente. 28 = 21 del sello + 7 del hueco. */
  padding-left:28px;padding-right:28px}
/* EL SELLO VA EN LINEA, COMO UNA PALABRA MAS, Y NO CUENTA PARA CENTRAR.

   Dos cosas, y las dos hacen falta:

   1. EN LINEA, no como item flex. Siendo hermano flex del texto, cuando
      el nombre no entra en un renglon el sello no cabe al lado y se cae
      SOLO a una tercera linea, centrado y huerfano. Pasaba de verdad en
      New York Paver a 320, 360 y 390. En linea fluye como una palabra
      mas y se queda siempre pegado a la ultima.

   2. `margin-right` negativo, para que no ocupe ancho. Sin eso lo que se
      centra es «nombre + hueco + sello» y el NOMBRE queda 14px corrido a
      la izquierda (medido en 6 de los 7 perfiles publicados).

   El margen tiene que ser `ancho + margen izquierdo`: si cambia
   cualquiera de los dos, este numero y el padding de arriba cambian. */
.pf-verified{width:21px;height:21px;flex:none;
  display:inline-block;vertical-align:-3px;margin-left:7px;margin-right:-28px}
.pf-tag{margin:0 -22px;padding:0 22px var(--p-head-pb,0px);
  font-size:14.5px;line-height:1.55;color:var(--p-head-muted);font-weight:450;
  background:var(--p-head-bg,transparent)}
/* Sellos de confianza. Mas chicos que .pf-chip y sin fondo fuerte: van
   junto al nombre y no tienen que competir con el. El icono toma el color
   de acento, que es lo que los ata al resto del perfil. */
/* =====================================================================
   EL ESTILO DE TARJETA VALE PARA TODA LA PAGINA

   Hasta el 24/08 el ajuste "Estilo de tarjeta" solo tocaba `.pf-block`,
   o sea los enlaces. Poner "contorno" dejaba los enlaces sin relleno y
   TODO lo demas igual que antes: las burbujas de acciones rapidas, las
   pastillas de servicios, los sellos, las promociones y las zonas
   seguian rellenas. Media pagina en un estilo y media en otro.

   Ahora las superficies chicas leen estos tres tokens, asi que el ajuste
   se propaga solo y una pieza nueva entra al idioma con solo usarlos.
   `.pf-block` conserva sus propias reglas: es una tarjeta grande, usa el
   color de superficie y lleva sombra, y esa diferencia es a proposito.

   El estilo de fabrica (`elevated`) no cambia ni un pixel: los tokens
   valen exactamente lo que estaba escrito antes. */
/* Los tres estilos se declaran UNA sola vez, con dos selectores cada
   uno: el de la pagina entera (`.pf.style-X`, que sale de Apariencia) y
   el de una seccion suelta (`[data-est="X"]`, que sale de la pestana
   Diseno de esa seccion). Asi no hay una segunda tabla de valores que se
   pueda separar de la primera cuando alguien retoque un color.

   Como son variables, la seccion gana por cascada sin necesidad de subir
   la especificidad ni de repetir una sola regla de dibujo. */
.pf,
.pf [data-est="elevated"]{
  --p-card-bg:var(--p-chip);
  --p-card-bd:var(--p-chip-line);
  --p-card-bg-h:var(--p-line-2);
  --p-blk-bg:var(--p-surface);
  --p-blk-bd:transparent;
  --p-blk-tx:var(--p-card-text);
  --p-blk-sub:var(--p-card-sub);
  --p-blk-sh:0 1px 2px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.18);
  --p-blk-sh-h:0 4px 8px rgba(0,0,0,.08),0 14px 28px -12px rgba(0,0,0,.3);
  --p-bicon-bg:rgba(0,0,0,.055);
}
/* Contorno: sin relleno, y el borde pasa a ser lo unico que dibuja la
   pieza, asi que tiene que verse mas que el de siempre. */
.pf.style-outline,
.pf [data-est="outline"]{
  --p-card-bg:transparent;
  --p-card-bd:var(--p-line-2);
  --p-card-bg-h:var(--p-chip);
  --p-blk-bg:transparent;
  --p-blk-bd:var(--p-line-2);
  --p-blk-tx:var(--p-text);
  --p-blk-sub:var(--p-muted);
  --p-blk-sh:none;
  --p-blk-sh-h:none;
  --p-bicon-bg:var(--p-chip);
}
/* Suave: el relleno se queda y el borde desaparece. */
.pf.style-soft,
.pf [data-est="soft"]{
  --p-card-bg:var(--p-chip);
  --p-card-bd:transparent;
  --p-card-bg-h:var(--p-line-2);
  --p-blk-bg:var(--p-chip);
  --p-blk-bd:transparent;
  --p-blk-tx:var(--p-text);
  --p-blk-sub:var(--p-muted);
  --p-blk-sh:none;
  --p-blk-sh-h:none;
  --p-bicon-bg:var(--p-chip);
}

/* La calificacion de Google, entre el lema y los sellos.

   Es un ENLACE a la ficha real del negocio a proposito: el numero lo
   escribe el cliente, asi que el visitante tiene que quedar a un toque de
   comprobarlo. Por eso se ve pulsable y no como una etiqueta muerta.

   La estrella lleva su color propio y no el acento del perfil: una
   estrella de valoracion se lee como estrella cuando es ambar, y con
   algunas paletas (la morada, la roja) el acento la vuelve irreconocible. */
.pf-grate{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:11px;padding:6px 13px 6px 11px;border-radius:999px;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  text-decoration:none;color:var(--p-text);
  font-size:12.5px;line-height:1;white-space:nowrap;
  transition:transform .18s,border-color .18s;
}
.pf-grate:hover{transform:translateY(-1px);border-color:var(--p-icon-act)}
.pf-grate b{font-weight:800;font-size:13.5px;letter-spacing:.01em}
.pf-grate span{font-weight:600;color:var(--p-muted)}
.pf-gstar{width:15px;height:15px;flex:none;color:#F5B301}

.pf-sellos{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:12px}
.pf-sello{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  color:var(--p-text);
  /* Envuelve en vez de `nowrap`. Con el tope en 60 caracteres, un sello
     como "Distribuidor independiente Omnilife y Seytú" mide más que un
     teléfono de 360px: con nowrap se salía de la pastilla. Envolviendo,
     la pastilla crece hacia abajo y nunca pasa del ancho disponible.
     `max-width` es el cinturón: aunque alguien meta una palabra sola
     larguísima, no puede desbordar. */
  max-width:100%;
  text-align:left;
  overflow-wrap:anywhere;
}
.pf-sello svg{width:13px;height:13px;color:var(--p-icon-act);flex:none;align-self:flex-start;margin-top:2px}
.pf-actions{display:flex;justify-content:center;gap:10px;padding:24px 18px 4px;flex-wrap:wrap}
.pf-act{display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;color:inherit;
  /* Ancho flexible en vez de 70px fijos: un rotulo como "Afiliate a
     Omnilife" necesita mas, y uno como "Llamar" no tiene por que ocupar
     tanto. El maximo evita que un rotulo largo empuje a los demas. */
  width:auto;min-width:70px;max-width:104px}
/* El blanco estaba ESCRITO A MANO (`rgba(255,255,255,.09)`), asi que la
   burbuja no solo se saltaba el estilo de tarjeta: sobre una paleta clara
   era blanco sobre blanco y no se veia. Con los tokens hace las dos cosas
   bien. En paleta oscura el valor es idéntico al de antes. */
/* El radio NO va clavado en 50%: la seccion puede pedir el suyo y
   volverlas cuadradas o redondeadas. `--p-actr` solo lo escribe un ajuste
   PROPIO de la seccion (ver `conEstilo` en lib.php), asi que sin tocar
   nada el valor de respaldo son 999px y `min(...,50%)` las deja circulares
   igual que siempre: ningun perfil publicado se mueve.

   El `min(...,50%)` es el mismo truco de la galeria: asi el tope da un
   circulo perfecto sin inventar un valor especial para "circular". */
.pf-act .bubble{width:56px;height:56px;border-radius:min(var(--p-actr,999px),50%);display:grid;place-items:center;
  background:var(--p-card-bg);color:var(--p-icon-act);transition:.18s;
  border:1px solid var(--p-card-bd)}
.pf-act:hover .bubble{transform:translateY(-2px);background:var(--p-card-bg-h)}
.pf-act .bubble svg{width:24px;height:24px}
.pf-act span{font-size:11.5px;font-weight:600;color:var(--p-muted);text-align:center;
  line-height:1.2;
  /* DOS renglones como maximo, y con puntos suspensivos si no entra.
     Con tres, las burbujas de al lado quedan desalineadas y la fila se
     ve rota. Lo pidio Pedro asi. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere}
/* ---------------------------------------------------------------
   BOTÓN DE TARJETA DE CONTACTO
   Va en contorno y no relleno a propósito: si compite visualmente con
   el botón principal, le roba los toques justo a la acción que el
   negocio eligió destacar. Acá el objetivo es que se vea disponible,
   no que grite.
   --------------------------------------------------------------- */
.pf-vcard{padding:14px 18px 0;display:flex;justify-content:center}
/* Al final de la página necesita más aire arriba: viene pegado al último
   bloque y sin separación parece uno más de la lista, no una acción
   distinta. */
.pf-vcard.abajo{padding-top:22px}
.pf-vcard a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:var(--p-r);text-decoration:none;
  font-size:14px;font-weight:650;letter-spacing:-.01em;
  color:var(--p-text);background:var(--p-card-bg);
  border:1px solid var(--p-card-bd);
  transition:transform .15s,background .15s;
}
.pf-vcard a:hover{background:var(--p-card-bg-h)}
.pf-vcard a:active{transform:scale(.98)}
.pf-vcard svg{width:17px;height:17px;flex:none;color:var(--p-accent)}
@media (prefers-reduced-motion:reduce){.pf-vcard a{transition:none}}

.pf-blocks{display:flex;flex-direction:column;gap:11px;padding:20px 18px 0}
.pf-block{
  display:flex;align-items:center;gap:13px;padding:13px 15px;text-decoration:none;
  background:var(--p-blk-bg);color:var(--p-blk-tx);border-radius:var(--p-r);
  transition:.18s;border:1px solid var(--p-blk-bd);
  box-shadow:var(--p-blk-sh);
}
.pf-block:hover{transform:translateY(-2px);box-shadow:var(--p-blk-sh-h)}
.pf-block .pf-sub{color:var(--p-blk-sub)}
/* 48 y 28. Viene de 40/21, paso por 44/24 y Pedro lo seguia viendo chico,
   con razon: el circulo de 44 era el mas chico de la pagina (la burbuja de
   una accion rapida mide 56) y el dibujo llenaba solo el 55%.

   Se comparo cada paso dibujando las opciones una debajo de la otra con el
   MISMO contenido, que es la unica forma de ver la diferencia: entre dos
   capturas separadas la memoria no retiene el tamano.

   EL CIRCULO SE QUEDA EN 48. Lo que crecio es el DIBUJO, de 24 a 32: el
   problema nunca fue el tamano del contenedor sino cuanto de el ocupaba
   el icono, que era el 55%. Ahora es el 67% y la fila sigue en 76px.

   Se probo 52/32 (fila de 80px) y Pedro pidio el contenedor como estaba.
   Y 48/34 llega al 71%, donde un logotipo CUADRADO como el de Instagram
   casi toca el borde del circulo: 32 es lo mas grande que le deja aire. */
.pf-bicon{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--p-bicon-bg);overflow:hidden}
.pf-bicon svg{width:32px;height:32px}
.pf-bicon img{width:100%;height:100%;object-fit:cover}
.pf-btext{flex:1;min-width:0}
.pf-btitle{font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px}
.pf-badge{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:5px;background:var(--p-accent);color:var(--p-accent-ink)}
.pf-sub{font-size:12.5px;color:var(--p-card-sub);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-chev{flex:none;opacity:.4}
.pf-chev svg{width:17px;height:17px}
/* Normal: queda al final del contenido. Fijo: acompaña el scroll. */
.pf-cta{padding:16px 18px calc(16px + env(safe-area-inset-bottom));margin-top:22px}
.pf-cta.sticky{
  position:sticky;bottom:0;
  /* Encima de cualquier capa que una seccion declare para sus adentros (la
     mas alta hoy es el 6 del menu de la portada) y por debajo de los
     modales, que van en 50 y 60. Es el boton que cierra la venta: no puede
     quedar tapado porque alguien agrego una pieza con z-index. */
  z-index:10;
  background:linear-gradient(to top,var(--p-bg) 58%,transparent);
}
.pf-cta a{
  display:flex;align-items:center;justify-content:center;gap:9px;height:56px;
  border-radius:var(--p-r);background:var(--p-accent);color:var(--p-accent-ink);
  font-weight:var(--p-ctaw,700);font-size:16px;letter-spacing:-.01em;text-decoration:none;transition:.18s;
}
.pf-cta a:hover{filter:brightness(1.06)}
.pf-cta a svg{width:20px;height:20px}
/* El tamano del pie lo elige el cliente. De fabrica va igual que el lema
   (.pf-tag, 14.5px): en 11.5 quedaba como letra chica al lado de todo lo
   demas. El respaldo del var() es para una pagina vieja en cache que
   todavia no traiga la variable. */
/* SIN `opacity`. La llevaba desde que el pie era una linea de horario en
   letra chica, y encima de `--p-muted` (que YA es el texto al 66% / 58%)
   lo dejaba al 46%: el color que elige el cliente en «Color del texto» de
   la seccion salia lavado, que es justo lo contrario de elegirlo a mano.
   Lo mando quitar Pedro el 09/09. Si hace falta atenuar el pie, se hace
   con el token, no con una capa encima. */
.pf-foot{text-align:center;padding:18px 22px 0;font-size:var(--foot-fs,14.5px);
         line-height:1.55;color:var(--p-muted)}
.pf-empty{text-align:center;padding:30px 20px;color:var(--p-muted);font-size:13px}

/* --- página pública --- */
.pf-page{margin:0;padding:0}
.pf-wrap{max-width:520px;margin:0 auto;min-height:100vh}
.pf a:focus-visible,.pf button:focus-visible{outline:2px solid var(--p-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pf *{transition:none!important}
  .pf-ring::before{animation:none!important}}

/* =====================================================================
   CINTA DE SERVICIOS
   Se desplaza sola en bucle. Dos copias idénticas del contenido y un
   desplazamiento de -50% = bucle sin salto visible.
   ===================================================================== */
.pf-marquee{
  overflow:hidden;margin-top:20px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.pf-mtrack{display:flex;width:max-content;animation:pf-marquee var(--spd,28s) linear infinite}
.pf-marquee:hover .pf-mtrack,.pf-marquee:active .pf-mtrack{animation-play-state:paused}
@keyframes pf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pf-chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 14px;margin-right:9px;border-radius:999px;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  font-size:13px;font-weight:600;white-space:nowrap;color:var(--p-text);
}
.pf-chip svg{width:15px;height:15px;color:var(--p-icon-act);flex:none}

/* HORARIO DE ATENCIÓN

   Colapsado es un renglón, como la cinta de servicios. La semana entera
   vive dentro de un <details> nativo: se abre con teclado, sin JavaScript
   y sin que los dos renderizadores tengan que ponerse de acuerdo en nada
   más que el HTML.

   El semáforo y la marca del día de hoy los pone assets/horario.js. Si no
   llega, esto se sigue viendo entero: solo falta el color. */
.pf-horario{padding:20px 22px 0}
.pf-h{border:1px solid var(--p-card-bd);border-radius:var(--p-r);
  background:var(--p-card-bg);overflow:hidden}
.pf-h-cab{display:flex;align-items:center;gap:9px;padding:13px 15px;
  cursor:pointer;list-style:none;font-size:14px;color:var(--p-text)}
.pf-h-cab::-webkit-details-marker{display:none}
.pf-h-luz{flex:none;font-size:11px;line-height:1}
.pf-h-estado{font-weight:700}
.pf-h-detalle{flex:1;min-width:0;color:var(--p-muted);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-h-chev{flex:none;display:inline-flex;transition:transform .18s}
.pf-h-chev svg{width:16px;height:16px;color:var(--p-muted);display:block}
.pf-h[open] .pf-h-chev{transform:rotate(90deg)}
/* El punto del semáforo toma el color del estado, no del texto.
   Los DOS selectores hacen falta: `horario.js` pone la clase en la raíz
   que encuentre, que es `.pf-horario` en el modo de siempre y `.pf-h` en
   el compacto, donde esa sección no existe. */
.pf-horario.abierto .pf-h-estado,
.pf-h.abierto .pf-h-estado{color:var(--p-accent)}
.pf-h-semana{list-style:none;margin:0;padding:2px 15px 4px;
  border-top:1px solid var(--p-chip-line)}
.pf-h-semana li{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:7px 0;font-size:13.5px;color:var(--p-muted)}
.pf-h-semana li+li{border-top:1px solid var(--p-chip-line)}
.pf-h-semana li.hoy{color:var(--p-text);font-weight:700}
.pf-h-dia{flex:none}
.pf-h-rango{text-align:right}
.pf-h-nota{margin:0;padding:0 15px 13px;font-size:12px;color:var(--p-muted);opacity:.8}

/* ---------- horario compacto, en la cabecera ----------
   Una sola línea debajo del lema: el semáforo, "Abierto ahora · Cierra
   11:00 PM" y un chevron que despliega la semana. Es el MISMO <details>
   del modo de siempre con otro envoltorio, así que `horario.js` no
   distingue uno de otro.

   Cerrado no lleva tarjeta: en la cabecera tiene que leerse como un dato
   más del negocio, al lado de la valoración y la dirección, no como un
   bloque. La tarjeta aparece recién al desplegarlo, que es cuando pasa a
   ser contenido. */
.pf-h-mini{border:0;background:none;border-radius:0;margin-top:9px;overflow:visible}
.pf-h-mini .pf-h-cab{
  justify-content:center;gap:6px;padding:0;
  font-size:13px;color:var(--p-muted);
}
.pf-h-mini .pf-h-estado{font-weight:650}
/* En la cabecera el detalle NO se estira: va pegado al estado, separado
   por un punto medio, para que los dos se lean como una sola frase. */
.pf-h-mini .pf-h-detalle{flex:0 1 auto;font-size:13px}
.pf-h-mini .pf-h-detalle:not(:empty)::before{content:'· ';opacity:.55}
.pf-h-mini .pf-h-chev{opacity:.6}
.pf-h-mini .pf-h-chev svg{width:14px;height:14px}
/* La semana desplegada sí es una tarjeta: ahí ya es contenido. */
.pf-h-mini .pf-h-semana{
  margin-top:10px;border:1px solid var(--p-card-bd);border-radius:var(--p-r);
  background:var(--p-card-bg);padding:2px 15px 4px;text-align:left;
}
.pf-h-mini .pf-h-nota{padding:8px 2px 0;text-align:center}
/* El texto de la cabecera va centrado y esto es un <li> con flex, así que
   hay que devolverle la alineación de su contenido. */
.pf-h-mini .pf-h-semana li{text-align:left}

/* Servicios en modo lista: renglones con el precio a la derecha.
   La guía de puntos es un borde punteado sobre un elemento que se estira,
   NUNCA caracteres «.» repetidos: con caracteres el ancho depende de la
   fuente, y el cliente puede cambiar la tipografía desde Apariencia. */
.pf-precios{list-style:none;margin:0;padding:20px 22px 0;display:flex;flex-direction:column;gap:2px}
.pf-precio{display:flex;align-items:baseline;gap:9px;padding:9px 0;
  font-size:14.5px;color:var(--p-text)}
.pf-precio+.pf-precio{border-top:1px solid var(--p-chip-line)}
.pf-precio-i{flex:none;align-self:center;display:inline-flex}
.pf-precio-i svg{width:16px;height:16px;color:var(--p-icon-act);display:block}
.pf-precio-n{font-weight:600}
.pf-precio-guia{flex:1;min-width:14px;border-bottom:1px dotted var(--p-chip-line);
  transform:translateY(-3px)}
.pf-precio-v{flex:none;font-weight:800;color:var(--p-accent);white-space:nowrap}
/* Sin precio no hay guía, así que el nombre ocupa el renglón entero. */
.pf-precio.sinprecio .pf-precio-n{flex:1}

/* =====================================================================
   MENÚ DE ACCIONES (los tres puntos)
   ===================================================================== */
.pf-menu{position:absolute;top:14px;right:14px;z-index:6}
.pf-menu > button{
  width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(12,15,22,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;display:grid;place-items:center;transition:.16s;
}
.pf-menu > button:hover{background:rgba(12,15,22,.72);transform:scale(1.05)}
.pf-menu > button svg{width:19px;height:19px}
.pf-menu .sheet{
  font-family:inherit;
  /* `width:max-content` NO es un lujo, es lo que hace que la hoja se mida
     por su texto mas largo.

     Sin eso, "Add to Apple Wallet" se partia en dos renglones. La causa no
     es obvia: la hoja cuelga de `.pf-menu`, que es absoluto y sin ancho, o
     sea que mide lo que su boton, 38px. Un absoluto con `right:0` y ancho
     automatico se mide contra ESE bloque, asi que la hoja colapsaba al
     `min-width` y todo lo que no entrara en 190px envolvia.

     El `max-width` la deja crecer hasta donde el telefono aguanta y no un
     pixel mas: 28 son los 14 de margen a cada lado. Si algun dia una
     traduccion no entra ni asi, envuelve, que es preferible a salirse de
     la pantalla. */
  position:absolute;top:46px;right:0;padding:5px;border-radius:14px;
  width:max-content;min-width:190px;max-width:min(280px,calc(100vw - 28px));
  background:var(--p-surface);color:var(--p-card-text);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.06);
}
.pf-menu.open .sheet{display:block !important}
.pf-menu .sheet button{
  width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:none;
  background:none;border-radius:9px;cursor:pointer;font:inherit;font-size:14px;
  font-weight:600;color:inherit;text-align:left;transition:.13s;
}
.pf-menu .sheet button:hover{background:rgba(125,125,125,.13)}
.pf-menu .sheet button svg{width:16px;height:16px;opacity:.65;flex:none}

/* ventana del QR */
.pf-modal{
  position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(8,10,15,.6);backdrop-filter:blur(6px);
}
.pf-modal.on{display:flex}
.pf-modal,.pf-modal .card{font-family:inherit}
.pf-modal .card{
  background:#fff;color:#111318;border-radius:20px;padding:22px;max-width:330px;width:100%;
  text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.pf-modal h3{font-size:17px;font-weight:750;letter-spacing:-.02em;margin:0 0 5px}
.pf-modal p{font-size:12px;color:#6B7280;margin:0 0 16px;word-break:break-all;font-weight:500}
.pf-modal .qr{background:#fff;border-radius:14px;padding:6px;margin-bottom:16px}
.pf-modal .qr svg{width:100%;height:auto;display:block}
/* Badge oficial de Apple Wallet, debajo del codigo.
   El espacio libre minimo que pide Apple es .1X del alto del badge; con
   44px de alto son 4.4, y aca hay 14 arriba y 16 abajo. No lleva sombra,
   ni borde, ni hover: la marca de Apple no se decora. */
.pf-modal .pf-wbadge{display:block;margin:14px 0 16px;text-align:center;line-height:0}
.pf-modal .pf-wbadge img{height:44px;width:auto;display:inline-block}

.pf-modal .row{display:flex;gap:8px}
.pf-modal .row button{
  flex:1;height:40px;border-radius:11px;border:1px solid #E1E4EA;background:#fff;
  font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;transition:.15s;color:#111318;
}
.pf-modal .row button:hover{background:#F3F5F8}
.pf-modal .row button.solid{background:#111318;color:#fff;border-color:#111318}

/* =====================================================================
   CRÉDITO
   ===================================================================== */
/* La marca del pie, en pastilla.

   Era un renglón de texto en gris al 75%, o sea letra chica del pie. En
   la página de un cliente esta es la única puerta al producto, y quien la
   está mirando es exactamente quien podría querer la suya: un botón se
   toca mucho más que una línea. Lo pidió Pedro con la referencia de
   Linktree.

   Tres cosas que NO se negocian:
   · Blanca con texto negro SIEMPRE, pase lo que pase con la paleta. Es
     nuestra marca, no una pieza del perfil, y con los tokens del cliente
     cambiaba de aspecto en cada página: en «Contorno» quedaba de contorno
     y casi no se veía. Lo pidió Pedro con la referencia de Linktree.
   · NUNCA el acento. El acento es del negocio, y una pastilla de su color
     al lado de su botón principal le roba el clic que él paga.
   · El radio es fijo (999px) y no `var(--p-r)`: tiene que leerse como algo
     aparte y no como un bloque más de los suyos.

   El filo y la sombra NO son decoración: dos de los siete perfiles
   publicados tienen la página en #FFFFFF, y ahí una pastilla blanca sin
   nada que la separe no existe. */
.pf-credit{text-align:center;padding:20px 22px 8px}
.pf-credit-b{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:11px 20px;border-radius:999px;
  background:#fff;border:1px solid rgba(17,19,24,.10);color:#111318;
  box-shadow:0 2px 10px rgba(17,19,24,.10);
  font-size:13.5px;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;text-decoration:none;
  transition:box-shadow .15s,transform .15s;
}
.pf-credit-b b{font-weight:800;color:#111318}
.pf-credit-b:hover{box-shadow:0 4px 16px rgba(17,19,24,.16);transform:translateY(-1px)}
.pf-credit-b:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.pf-credit-b{transition:none}}

@media (prefers-reduced-motion:reduce){
  .pf-mtrack{animation:none}
  .pf-marquee{overflow-x:auto;scrollbar-width:none}
  .pf-marquee::-webkit-scrollbar{display:none}
}


/* --- ajustes de iconos y espaciado --- */
.pf-act .bubble b{font-size:19px;font-weight:800;color:var(--p-icon-act)}
.pf-bicon svg{color:var(--p-icon-blk)}
.pf-block.noicon{padding-left:18px}
.pf-chip.noicon{padding-left:15px}

/* =====================================================================
   PUNTOS DEL CARRUSEL
   Estilo moderno: los inactivos son puntos, el activo es una barrita
   redondeada. Van dentro de la portada, abajo a la derecha.
   ===================================================================== */
.pf-dots{
  position:absolute;right:14px;z-index:4;
  /* --dots-b lo sube segun la forma de la portada (ver arriba). El tope
     `100% - 77px` es lo que impide que vuelva a pasar el bug del menu: el
     boton de los tres puntitos termina en y=52 y los puntos miden 17 de
     alto, asi que su borde de arriba nunca puede quedar por encima de 60.
     Hace falta porque hay formas que tapan un alto FIJO (arcada tapa 76)
     y la portada puede bajar hasta 90px: sin el tope, en una portada baja
     el desplazamiento los empujaba otra vez detras del boton.
     El `max(8px,...)` es por si algun dia se baja ese minimo de 90.

     El precio del tope: en una portada muy baja (por debajo de ~120px)
     con las formas que tapan mas (arcada, diagonal) la pastilla puede
     caer sobre el fondo plano en vez de sobre la foto. Se elige eso a
     proposito: quedar detras del boton del menu es un defecto que se ve
     en todas las portadas, y esto solo pasa en un alto que nadie usa. */
  bottom:max(8px, min(var(--dots-b,14px), calc(100% - 77px)));
  display:flex;align-items:center;gap:5px;
  padding:6px 8px;border-radius:999px;
  background:rgba(10,13,20,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pf-dots i{
  width:5px;height:5px;border-radius:999px;display:block;
  background:rgba(255,255,255,.55);transition:width .28s ease,background .28s ease;
}
.pf-dots i.on{width:16px;background:#fff}

/* Cinta arrastrable con el dedo. Al tocarla se pausa la animación
   y pasa a desplazamiento manual; sola vuelve a andar. */
/* pan-y, NO pan-x: le deja el eje VERTICAL al navegador para que el dedo
   pueda seguir bajando la pagina aunque haya arrancado encima de la cinta.
   Lo horizontal lo maneja el JS, que decide primero hacia donde va el dedo.
   Con pan-x el navegador tenia PROHIBIDO el scroll vertical aca, y ninguna
   correccion en el JS podia arreglarlo. */
.pf-marquee{touch-action:pan-y;cursor:grab}
.pf-marquee.dragging{cursor:grabbing}
.pf-marquee.manual{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pf-marquee.manual::-webkit-scrollbar{display:none}
.pf-marquee.manual .pf-mtrack{animation:none}

/* =====================================================================
   GALERÍA DE TRABAJOS
   La cabecera (título + enlace) va fuera del carril: adentro se
   arrastraba junto con las fotos. El carril vive en su propia caja con
   desbordamiento, que es lo único que se mueve.
   ===================================================================== */
.pf-gallery{padding:26px 0 0;--gcols:3}
/* Una sola columna: es lo que queda cuando el perfil tiene una foto y el
   carrusel se apaga solo. Sin esta regla, `--gcols` se quedaba en 3 y la
   unica foto se dibujaba a un tercio del ancho, con dos huecos al lado. */
.pf-gallery.cols-1{--gcols:1}
.pf-gallery.cols-2{--gcols:2}
.pf-gallery.cols-3{--gcols:3}
.pf-gallery.cols-4{--gcols:4}

.pf-ghead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 18px 12px;
}
/* El peso lo elige el cliente en Apariencia -> Textos. El respaldo es el
   MISMO valor de fabrica que emiten los dos renderizadores, para que la
   hoja y el HTML nunca digan cosas distintas. */
.pf-gtitle{font-size:15px;font-weight:var(--p-tw,700);letter-spacing:-.02em;color:var(--p-text);margin:0}
.pf-glink{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  color:var(--p-accent);text-decoration:none;font-size:12.5px;font-weight:650;
  transition:.15s;white-space:nowrap;
}
.pf-glink:hover{opacity:.75}
.pf-glink svg{width:14px;height:14px}

/* `pan-y` SOLO dejaba pasar el gesto vertical, asi que el navegador tenia
   prohibido desplazar la galeria en horizontal y el dedo dependia entero
   del arrastre por JS: sin inercia, y perdiendo el gesto cuando el
   navegador decidia que era un scroll. Con `pan-x pan-y` el navegador
   desambigua solo, que es lo que ya hacen el carrusel de la portada y la
   cinta de la tienda, y por eso esos dos si se sienten bien.

   La razon original de `pan-y` sigue cubierta: bajar la pagina con el dedo
   apoyado sobre las fotos la sigue bajando. */
.pf-gviewport{overflow:hidden;touch-action:pan-x pan-y}
.pf-gviewport.manual{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.pf-gviewport.manual::-webkit-scrollbar{display:none}
.pf-gviewport.manual .pf-gtrack{animation:none}
.pf-gviewport.dragging{cursor:grabbing}

.pf-gtrack{
  display:flex;gap:var(--ggap,10px);padding:0 18px;width:max-content;
  animation:pf-gscroll var(--gspd,34s) linear infinite;
}
.pf-gviewport:hover .pf-gtrack{animation-play-state:paused}
/* El contenido está duplicado exacto: al llegar a la mitad, el reinicio
   cae sobre una copia idéntica y no se ve ningún salto ni hueco. */
@keyframes pf-gscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pf-work{
  flex:0 0 auto;
  width:calc((min(100vw,520px) - 36px - (var(--gcols) - 1) * var(--ggap,10px)) / var(--gcols));
  min-width:96px;max-width:230px;
  border:0;padding:0;background:none;cursor:zoom-in;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:7px;text-align:center;
}
.pf-work-img{
  display:block;width:100%;aspect-ratio:1;border-radius:min(var(--gr,var(--p-r)),50%);
  background:var(--p-chip) center/cover no-repeat;
  border:1px solid var(--p-chip-line);transition:.2s;
}
.pf-work:hover .pf-work-img{transform:translateY(-2px);filter:brightness(1.06)}
.pf-work-t{
  font-size:11.5px;font-weight:600;color:var(--p-muted);line-height:1.3;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}


/* =====================================================================
   GALERÍA EN REJILLA

   La alternativa al carrusel: se ven todas las fotos a la vez, sin
   movimiento. Con pocas fotos el carrusel queda raro (hay que duplicar
   el contenido para que el bucle no deje un hueco) y esto se lee mejor.
   ================================================================== */
.pf-gallery.rejilla .pf-gviewport{overflow:visible;touch-action:auto}
.pf-gallery.rejilla .pf-gtrack{
  display:grid;grid-template-columns:repeat(var(--gcols),1fr);
  gap:var(--ggap,10px);width:auto;animation:none;
}
.pf-gallery.rejilla .pf-work{width:auto;max-width:none;min-width:0}

/* =====================================================================
   VISIBILIDAD POR PANTALLA

   El editor deja elegir en qué aparatos aparece cada sección. Se hace
   con consultas de medios y no escondiendo la sección en el servidor:
   el servidor no sabe con qué se está mirando la página, y deducirlo
   del User-Agent es cómo se terminan sirviendo páginas rotas a los
   aparatos que salieron después.

   Los cortes son los mismos que usa el editor para dibujar el marco:
   móvil hasta 767, tablet hasta 1023, escritorio de ahí para arriba.
   ================================================================== */
@media (max-width:767px)                   { .pf-no-movil{display:none !important} }
@media (min-width:768px) and (max-width:1023px) { .pf-no-tablet{display:none !important} }
@media (min-width:1024px)                  { .pf-no-escritorio{display:none !important} }

/* --- visor con zoom --- */
.pf-zoom{
  position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(8,10,15,.85);backdrop-filter:blur(10px);font-family:inherit;
}
.pf-zoom.on{display:flex}
.pf-zoom img{
  max-width:100%;max-height:74vh;border-radius:22px;display:block;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.pf-zoom .cap{
  margin-top:16px;color:#fff;font-size:15px;font-weight:650;text-align:center;
  max-width:520px;line-height:1.4;
}
.pf-zoom .x{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;
  display:grid;place-items:center;transition:.15s;line-height:1;
}
.pf-zoom .x:hover{background:rgba(255,255,255,.26)}
.pf-zoom .nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.15s;font-size:22px;line-height:1;
}
.pf-zoom .nav:hover{background:rgba(255,255,255,.26)}
.pf-zoom .prev{left:14px}
.pf-zoom .next{right:14px}
@media (max-width:560px){ .pf-zoom .nav{display:none} }


/* =====================================================================
   TÍTULO DE LA CINTA DE SERVICIOS

   La cabecera es opcional: sin título, el HTML no trae ni el <section>
   ni el <div>, y el bloque queda exactamente como estaba. Cuando sí hay
   título, el envoltorio se hace cargo del espacio de arriba y se lo saca
   a la lista, para que no queden los dos paddings sumados.
   ===================================================================== */
.pf-serv{padding-top:22px}
.pf-serv .pf-precios{padding-top:0}
.pf-serv .pf-marquee{margin-top:0}

/* =====================================================================
   ANTES Y DESPUÉS

   Dos fotos apiladas y una línea que las parte. `--ba` es lo único que
   se mueve: recorta la foto de arriba, coloca la línea y coloca el
   mando, así que las tres cosas no se pueden desalinear entre sí.

   La posición de fábrica (50%) vive ACÁ y no en el JavaScript: si el
   archivo no carga, la comparación se sigue viendo partida al medio en
   vez de quedar con una sola foto tapando a la otra.
   ===================================================================== */
.pf-antes{padding:24px 0 0}
.pf-balist{display:flex;flex-direction:column;gap:14px;padding:0 18px}

.pf-ba{
  --ba:50%;
  /* `isolation` encierra las capas de adentro (las etiquetas van en 2 y el
     tirador en 3). Sin esto esos numeros se cuentan contra TODA la pagina,
     y el tirador de 3 le ganaba al CTA fijo: el "Before/After" se dibujaba
     encima del boton. Una seccion no tiene por que poder taparle algo al
     resto de la pagina. */
  isolation:isolate;
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/3;border-radius:var(--p-r);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  /* Sin esto, arrastrar la línea en un teléfono scrollea la página en
     vez de mover la comparación. */
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.pf-ba-img{
  position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;
}
/* La de "después" va encima y se recorta desde la izquierda: lo que
   queda a la izquierda de la línea es la foto de abajo, o sea el antes. */
.pf-ba-b{clip-path:inset(0 0 0 var(--ba))}
.pf-ba-linea{
  position:absolute;top:0;bottom:0;left:var(--ba);width:2px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transform:translateX(-1px);pointer-events:none;
}
.pf-ba-tag{
  position:absolute;bottom:10px;z-index:2;pointer-events:none;
  padding:4px 9px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
}
.pf-ba-ta{left:10px}
.pf-ba-tb{right:10px}
.pf-ba-cap{
  position:absolute;top:10px;left:10px;right:10px;z-index:2;pointer-events:none;
  font-size:13px;font-weight:700;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* El mando lo agrega `assets/antes.js`. No se dibuja de fábrica a
   propósito: un tirador que no se puede arrastrar enseña que la página
   está rota. */
.pf-ba-mando{
  position:absolute;top:50%;left:var(--ba);z-index:3;
  width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;
  border:2px solid #fff;border-radius:50%;
  background:rgba(0,0,0,.45);cursor:ew-resize;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.pf-ba-mando::before,.pf-ba-mando::after{
  content:'';position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  margin-top:-5px;
}
.pf-ba-mando::before{left:6px;border-right:6px solid #fff}
.pf-ba-mando::after{right:6px;border-left:6px solid #fff}
.pf-ba-mando:focus-visible{outline:3px solid var(--p-accent);outline-offset:2px}
.pf-ba-vivo{cursor:ew-resize}
.pf-ba-drag .pf-ba-mando{transform:scale(1.06)}

/* =====================================================================
   PROMOCIONES

   Una promoción vencida no llega hasta acá: la filtran los dos
   renderizadores antes de dibujar.
   ===================================================================== */
/* =====================================================================
   VIDEO
   ---------------------------------------------------------------------
   Lo que se dibuja de entrada es una FACHADA: la miniatura mas un boton.
   El reproductor lo crea `assets/video.js` al tocar play, y ahi el
   boton se reemplaza por `.pf-video-caja`. Sin ese archivo la seccion se
   sigue viendo entera, solo que el boton no hace nada.
   ===================================================================== */
.pf-videos{padding:24px 0 0}
.pf-videolist{list-style:none;margin:0;padding:0 18px;display:grid;gap:12px}
.pf-video{
  border-radius:var(--p-r);overflow:hidden;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
}
/* El boton es la miniatura entera: un area de toque chica sobre una
   imagen grande se lee como que el video no responde. */
.pf-video-fig{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  padding:0;border:0;cursor:pointer;
  background:var(--p-chip) center/cover no-repeat;
}
.pf-video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#111;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
  transition:transform .15s ease;
}
.pf-video-fig:hover .pf-video-play{transform:translate(-50%,-50%) scale(1.07)}
.pf-video-play svg{width:22px;height:22px;margin-left:3px;display:block}
.pf-video-dur{
  position:absolute;right:9px;bottom:9px;height:20px;display:inline-flex;align-items:center;
  padding:0 7px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;
  font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;
}
.pf-video-tx{display:block;padding:11px 13px 13px}
.pf-video-t{display:block;font-size:14px;font-weight:750;color:var(--p-text);line-height:1.3}
.pf-video-d{display:block;margin-top:4px;font-size:12.5px;color:var(--p-muted);line-height:1.45}
/* La caja que reemplaza al boton al reproducir. `aspect-ratio` aqui
   tambien: si no, el iframe entra con alto 0 y la pagina da un salto. */
.pf-video-caja{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000}
.pf-video-caja iframe,
.pf-video-caja video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.pf-promos{padding:24px 0 0}
.pf-promolist{list-style:none;margin:0;padding:0 18px;
  display:flex;flex-direction:column;gap:9px}
/* APILADA, NO EN FILA.

   Con la etiqueta a la izquierda y centrada verticalmente pasaban dos
   cosas: le robaba ~110px de ancho al texto (la descripcion del ejemplo
   caia a 5 renglones en un telefono de 390) y, en una promo larga, la
   pastilla quedaba flotando en mitad de la nada. Apilada, la descripcion
   usa el ancho entero (3 renglones) y el titulo deja de competir con la
   etiqueta por la jerarquia.

   El precio esta aceptado: la seccion crece ~28% de alto. Las promociones
   no tienen tope por plan, asi que un negocio con muchas suma scroll. */
.pf-promo{
  display:block;
  padding:16px 18px;border-radius:calc(var(--p-r) + 4px);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
}
.pf-promo-b{
  display:inline-block;margin:0 0 11px;padding:5px 12px;border-radius:999px;
  background:var(--p-accent);color:var(--p-accent-ink);
  font-size:12px;font-weight:800;letter-spacing:.03em;
  /* SIN `nowrap`, y con tope de ancho: la etiqueta llega a 40 caracteres
     desde el 07/09 y con `nowrap` una frase ancha se salia de la tarjeta
     y provocaba scroll horizontal en la pagina (medido: 233px con 40
     mayusculas). `anywhere` cubre ademas una palabra larguisima sin
     espacios, que no tiene por donde cortar. Mismo patron que los sellos
     de confianza. */
  max-width:100%;overflow-wrap:anywhere;
  /* SIN `text-transform`: la etiqueta la escribe el cliente y un
     «2x1» forzado a mayusculas sale «2X1», que no es lo que puso. */
}
.pf-promo-x{display:block;min-width:0}
.pf-promo-t{display:block;font-size:19px;font-weight:800;
  letter-spacing:-.025em;line-height:1.2;color:var(--p-text)}
.pf-promo-s{display:block;margin-top:7px;font-size:13px;line-height:1.45;color:var(--p-muted)}
/* La fecha en el acento y no en gris: es el dato que apura, y en gris se
   lee como una nota al pie que nadie mira. */
.pf-promo-v{display:block;margin-top:9px;font-size:12px;font-weight:700;color:var(--p-accent)}
/* EL @supports VA DESPUES DE LAS REGLAS BASE, NO ANTES.

   Dentro de @supports la especificidad es la misma, asi que si va arriba
   gana la regla normal que viene despues y el degradado no se aplica
   nunca. Pasaba con `.pf-promo-b`, y no da ningun error: simplemente se
   ve el color liso.

   Y va en @supports porque un `background` invalido no degrada, DESAPARECE
   la tarjeta: sin color-mix se queda el fondo liso de arriba, que es
   correcto aunque menos vistoso. */
@supports (background: color-mix(in srgb, red 10%, blue)) {
  /* El tinte y el borde salen del ACENTO DEL NEGOCIO, nunca de un color
     fijo: cada perfil tiene su paleta y esta seccion admite acento propio. */
  .pf-promo{
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--p-accent) 15%, var(--p-card-bg)) 0%,
      var(--p-card-bg) 62%);
    border-color:color-mix(in srgb, var(--p-accent) 34%, transparent);
  }
  .pf-promo-b{
    background:linear-gradient(95deg, var(--p-accent),
      color-mix(in srgb, var(--p-accent) 58%, #fff));
  }
}

/* =====================================================================
   COBRAR DESDE EL PERFIL

   Un boton que lleva a /pagar/<slug>. NO hay formulario de tarjeta aca:
   Stripe.js se carga desde js.stripe.com y la CSP de p.php manda
   `script-src 'self'`, asi que la superficie de pago vive aislada.

   Los colores salen de los tokens compartidos (`--p-card-bg`,
   `--p-card-bd`, `--p-accent`) y NO escritos a mano: una superficie con
   su color literal no se entera del ajuste "Estilo de tarjeta" ni de un
   estilo propio de la seccion, que es el bug que ya mordio el 24/08 con
   las burbujas de acciones rapidas.
   ===================================================================== */
.pf-pay{padding:24px 0 0}
.pf-pay-t{margin:0 18px 12px;font-size:13.5px;line-height:1.5;color:var(--p-muted)}
.pf-pay-b{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 18px;height:52px;border-radius:var(--p-r);
  background:var(--p-accent);color:var(--p-accent-ink);
  font-weight:var(--p-ctaw,700);font-size:15.5px;letter-spacing:-.01em;
  text-decoration:none;transition:.18s;
}
.pf-pay-b:hover{filter:brightness(1.06)}
.pf-pay-b svg{width:19px;height:19px;flex:none}
/* Quien va a escribir una tarjeta necesita saber quien procesa el cobro
   ANTES de tocar el boton, asi que esto no es letra chica decorativa. */
.pf-pay-s{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:9px 18px 0;font-size:11.5px;color:var(--p-muted);
}
.pf-pay-s svg{width:13px;height:13px;flex:none}
/* Los dos <span> llevan clase y no van pelados: ver el comentario de
   `render_profile()`. No aportan estilo propio, pero existir con clase es
   lo que evita una deriva falsa en el comparador de renderizadores. */
.pf-pay-l,.pf-pay-n{display:contents}

/* ---------- el estado bloqueado, SOLO DENTRO DEL EDITOR ----------
   `render_profile()` de lib.php NUNCA emite `.trabado`: en la pagina
   publica, o el boton cobra o no se dibuja. Esto es lo que ve el dueno
   mientras arma su perfil y todavia no conecto su cuenta de Stripe, para
   que sepa como va a quedar en vez de encender la seccion y no ver nada.

   Se ve como el boton de verdad, no como un error: mismo tamano, mismas
   proporciones y el acento de su marca, bajado de intensidad. Si se
   dibujara gris se leeria como algo roto, y lo que tiene que decir es
   "esto va a quedar asi cuando lo actives". */
.pf-pay.trabado .pf-pay-b{
  background:color-mix(in srgb, var(--p-accent) 42%, transparent);
  color:var(--p-accent-ink);
  cursor:default;
  /* La linea cortada es lo que dice "todavia no": sin ella, un boton mas
     palido se lee como una eleccion de color del cliente. */
  outline:2px dashed color-mix(in srgb, var(--p-accent) 55%, transparent);
  outline-offset:3px;
}
.pf-pay.trabado .pf-pay-b:hover{filter:none}
.pf-pay.trabado .pf-pay-s{
  color:var(--p-accent);
  opacity:.9;
  font-weight:600;
}
/* `color-mix` no lo entiende un navegador viejo, y ahi el boton quedaria
   igual que el activo. El borde cortado se dibuja de todos modos, asi que
   la diferencia se sigue viendo. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .pf-pay.trabado .pf-pay-b{opacity:.55}
}

/* =====================================================================
   ÁREA DE COBERTURA
   ===================================================================== */
.pf-cobertura{padding:24px 0 0}
.pf-zonas{list-style:none;margin:0;padding:0 18px;
  display:flex;flex-wrap:wrap;gap:8px}
.pf-zona{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  font-size:13px;font-weight:600;color:var(--p-text);
}
.pf-zona svg{width:14px;height:14px;color:var(--p-icon-act);flex:none}

/* EL CORTE A TRES FILAS lo pone `assets/cobertura.js`, midiendo, en un
   `max-height` en linea. Aca solo va el recorte y la transicion: la
   ALTURA no puede vivir en esta hoja porque depende de la tipografia que
   elija el cliente y del idioma, y un numero fijo cortaria a la mitad de
   la cuarta fila en cuanto alguien elija una fuente mas alta.
   Sin el archivo JS no hay `max-height`, asi que se ven todas: es el
   estado de siempre y no se rompe nada. */
.pf-zonas{overflow:hidden;transition:max-height .22s ease}
.pf-cob-abierta .pf-zonas{max-height:none}

.pf-cob-mas{
  display:block;margin:10px 18px 0;width:calc(100% - 36px);
  padding:9px 14px;border-radius:var(--p-r);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  color:var(--p-text);font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;text-align:center;
}
.pf-cob-mas:hover{background:var(--p-card-bg-h)}
/* `display:block` GANA sobre el `[hidden]` del navegador, que es
   `display:none` con la especificidad mas baja que hay. Sin esta regla,
   con pocas zonas queda una barra vacia debajo de la seccion. Es el
   mismo fallo que ya tuvo `.pf-shop-mas`. */
.pf-cob-mas[hidden]{display:none}

.pf-cob-nota{margin:10px 0 0;padding:0 18px;
  font-size:12.5px;line-height:1.5;color:var(--p-muted)}

@media (prefers-reduced-motion:reduce){
  .pf-zonas{transition:none}
  .pf-ba-drag .pf-ba-mando{transform:none}
  .pf-gtrack{animation:none}
  .pf-gviewport{overflow-x:auto;scrollbar-width:none}
}

/* =====================================================================
   MINI TIENDA

   Tarjetas de producto con un botón que abre una conversación. No es un
   carrito: no cobra, no guarda pedidos y no lleva stock.

   Las superficies usan `--p-card-bg` / `--p-card-bd`, que es lo que hace
   que el ajuste "Estilo de tarjeta" del cliente valga también acá. Un
   fondo escrito a mano se queda fuera de ese ajuste y deja media página
   en un estilo y media en otro.
   ===================================================================== */
.pf-shop{padding:26px 0 0;--shopcols:2}
.pf-shop.cols-1{--shopcols:1}
.pf-shop.cols-2{--shopcols:2}
.pf-shop.cols-3{--shopcols:3}

.pf-shop-vp{padding:0 18px}
.pf-shop-track{display:grid;gap:12px;grid-template-columns:repeat(var(--shopcols),minmax(0,1fr))}

/* El carrusel es scroll horizontal NATIVO con puntos de anclaje: son
   productos que hay que leer, no una cinta que se mueve sola. El dedo, el
   trackpad y la rueda ya funcionan sin una línea de JavaScript. */
.pf-shop.carrusel .pf-shop-vp{
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* El respiro a los costados va como padding del contenedor y no como
     margen de la tarjeta: así la primera y la última quedan alineadas con
     el resto de la página en vez de pegadas al borde. */
  padding-bottom:2px;
}
.pf-shop.carrusel .pf-shop-vp::-webkit-scrollbar{display:none}
.pf-shop.carrusel .pf-shop-track{
  display:flex;grid-template-columns:none;
  /* Cada tarjeta ocupa una fracción del ancho visible, así se ve que hay
     más a la derecha: si entrara justa, el carrusel parece una rejilla. */
  --ancho:calc((100% - (var(--shopcols) - 1) * 12px) / var(--shopcols));
}
.pf-shop.carrusel .pf-prod{flex:0 0 var(--ancho);scroll-snap-align:start}

/* "Ver todos" lo agrega tienda.js. Sin ese archivo no aparece y la
   sección sigue funcionando como carrusel. */
.pf-shop.abierta .pf-shop-vp{overflow:visible}
.pf-shop.abierta .pf-shop-track{
  display:grid;grid-template-columns:repeat(min(var(--shopcols),2),minmax(0,1fr))
}
.pf-shop.abierta .pf-prod{flex:none}
.pf-shop-mas{
  display:block;margin:12px 18px 0;width:calc(100% - 36px);
  padding:9px 14px;border-radius:var(--p-r);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  color:var(--p-text);font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;text-align:center;
}
.pf-shop-mas:hover{background:var(--p-card-bg-h)}
/* `display:block` GANA sobre el `[hidden]` del navegador, que es
   `display:none` con la especificidad más baja que hay. Sin esta regla,
   `btn.hidden = true` deja el botón midiendo sus 36px: cuando todos los
   productos entran en pantalla, en vez de desaparecer queda una barra
   vacía debajo de la tienda que no dice nada.
   Venía así desde que existe la sección; no se notaba porque los cuatro
   productos del único cliente con tienda nunca entran de una. */
.pf-shop-mas[hidden]{display:none}

/* ---------------------------------------------------------------------
   BARRA DE CATEGORÍAS

   Va con `flex-wrap` y NO con scroll horizontal: en cuanto se le da
   estilo a `::-webkit-scrollbar` el navegador deja de usar la barra
   flotante y pasa a la clásica, que reserva su alto SIEMPRE aunque las
   pastillas entren de sobra. Ya pasó con las pestañas de la consola.
   Un segundo renglón se lee bien; contenido escondido a la derecha no lo
   descubre nadie.
   ------------------------------------------------------------------ */
.pf-shop-cats{
  display:flex;flex-wrap:wrap;gap:7px;
  padding:0 18px;margin:0 0 12px;
}
.pf-cat{
  padding:6px 12px;border-radius:999px;
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  color:var(--p-muted);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;line-height:1.3;
}
.pf-cat:hover{background:var(--p-card-bg-h)}
/* La elegida se pinta con el acento del negocio. `--p-accent-ink` es el
   color de texto que el servidor ya calculó por CONTRASTE contra ese
   acento: escribirlo en blanco fijo deja la pastilla activa ilegible en
   los perfiles de acento claro (el oro y el turquesa engañan al umbral). */
.pf-cat.on{
  background:var(--p-accent);border-color:var(--p-accent);
  color:var(--p-accent-ink);
}

/* En carrusel la barra solo aparece con la sección abierta: con dos
   tarjetas a la vista no hay nada que filtrar. En rejilla se ve siempre,
   porque ahí no existe el botón de "ver todos" del que colgarla. */
.pf-shop.carrusel:not(.abierta) .pf-shop-cats{display:none}

/* Se oculta con clase y no con `[hidden]`, por lo mismo que el botón de
   arriba: `.pf-prod` es un `<article>` con display propio. */
.pf-prod-off{display:none!important}

.pf-prod{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--p-r);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
}
.pf-prod-img{
  display:block;width:100%;aspect-ratio:4/3;
  background-size:cover;background-position:center;
  background-color:var(--p-chip);
}
.pf-prod-in{display:flex;flex-direction:column;gap:5px;padding:10px 11px 11px;flex:1}
.pf-prod-t{
  margin:0;font-size:13.5px;font-weight:750;letter-spacing:-.01em;
  /* `--p-text` y NO `--p-card-text`: este último es casi negro y está
     hecho para `.pf-block`, que tiene superficie opaca. La tarjeta de
     producto se apoya en `--p-card-bg`, que es el chip translúcido, así
     que ahí el título quedaba negro sobre oscuro y no se veía. Los
     mismos tokens que usa `.pf-promo-t`. */
  color:var(--p-text);
  /* Un renglón: el nombre de un producto largo no puede empujar el precio
     fuera de la tarjeta y dejar media rejilla desalineada. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Dos líneas exactas, como pidió Pedro. `line-clamp` recorta con puntos
   suspensivos y no depende de contar caracteres, que cambia con la fuente
   que el cliente elija en Apariencia. */
.pf-prod-d{
  margin:0;font-size:12px;line-height:1.45;color:var(--p-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;
}
/* Se envuelve a propósito. A dos columnas la tarjeta queda en ~184px, y
   un precio como "From $45/sf" más un botón como "Ask about this" no
   entran en un renglón: sin envolver, el botón se sale de la tarjeta y se
   ve cortado. Envolviendo, el botón baja solo y siempre se lee entero. */
.pf-prod-f{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px 8px;
  margin-top:auto;padding-top:6px;
}
.pf-prod-b{margin-left:auto}
/* Sin precio, el boton ocupa la tarjeta entera. Con el precio al lado tiene
   que quedar compacto a la derecha, pero solo no hay nada con que
   compartir el renglon: dejarlo chico deja un hueco mudo a la izquierda. */
/* `box-sizing` explícito: `profile.css` la usan DOS páginas (el perfil
   público y el iframe del editor) y no puede depender de que cada una
   traiga su propio reset. Depender de eso es justo lo que hizo que este
   botón se saliera de la tarjeta en el editor y no en la página. */
.pf-prod-b:only-child{width:100%;margin-left:0;text-align:center;box-sizing:border-box}
.pf-prod-p{font-size:13.5px;font-weight:800;color:var(--p-accent);white-space:nowrap}
.pf-prod-b{
  flex:none;padding:6px 11px;border-radius:999px;
  background:var(--p-accent);color:var(--p-accent-ink);
  font-size:12px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;
}
.pf-prod-b:hover{filter:brightness(1.06)}

/* En un teléfono angosto tres columnas de carrusel dejan cada tarjeta en
   menos de 110px, que no alcanza ni para el botón. */
@media (max-width:400px){
  .pf-shop.carrusel .pf-shop-track{--ancho:calc((100% - 12px) / min(var(--shopcols),2))}
}

/* =====================================================================
   FICHA DE UN PRODUCTO

   Se abre tocando la tarjeta, o sola cuando la dirección es
   /<perfil>/product/<producto>, que es el enlace que viaja por WhatsApp.
   La arma `assets/tienda.js` con lo que ya está en la tarjeta.
   ===================================================================== */
.pf-prodmodal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(0,0,0,.72);
  /* El desenfoque es lo que hace que la ficha se lea como una capa y no
     como una tarjeta más de la página. */
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.pf-prodficha{
  position:relative;width:100%;max-width:420px;
  max-height:calc(100dvh - 36px);overflow-y:auto;
  border-radius:var(--p-r);background:var(--p-surface);
  color:var(--p-card-text);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
/* La foto ENTERA, sin recortar. Es un <img>, así que la caja toma la
   proporción de la foto y no hay franjas: una foto cuadrada se ve
   cuadrada y una vertical se ve vertical.

   `max-height` es el único límite: una foto muy alta dejaría el nombre y
   el botón fuera de la pantalla, y ahí sí se ajusta con `contain`, que
   sigue mostrándola completa. */
.pf-prodficha-img{
  display:block;width:100%;height:auto;
  max-height:min(56dvh,520px);object-fit:contain;
  background:var(--p-chip);
}
.pf-prodficha-in{display:flex;flex-direction:column;gap:9px;padding:16px 16px 18px}
.pf-prodficha-t{margin:0;font-size:18px;font-weight:var(--p-tw,700);letter-spacing:-.02em;color:var(--p-card-text)}
.pf-prodficha-p{font-size:16px;font-weight:800;color:var(--p-accent)}
/* Acá la descripción va COMPLETA. En la tarjeta se corta a dos renglones
   por espacio; la ficha existe justamente para leer el resto. */
.pf-prodficha-d{margin:0;font-size:14px;line-height:1.55;color:var(--p-card-sub)}
.pf-prodficha-b{
  display:block;margin-top:4px;padding:12px 16px;border-radius:var(--p-r);
  background:var(--p-accent);color:var(--p-accent-ink);
  font-size:15px;font-weight:var(--p-ctaw,700);text-align:center;text-decoration:none;
}
.pf-prodficha-b:hover{filter:brightness(1.06)}
.pf-prodficha-x{
  position:absolute;top:9px;right:9px;width:32px;height:32px;
  display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:999px;background:rgba(0,0,0,.5);color:#fff;
  font:400 22px/1 system-ui,sans-serif;
}
.pf-prodficha-x:hover{background:rgba(0,0,0,.7)}
/* Con el dedo, una tarjeta que se abre tiene que decir que se puede tocar. */
.pf-shop .pf-prod{cursor:pointer}

/* =====================================================================
   EL CARRITO DE LA TIENDA

   Todo lo de aca lo dibuja `assets/tienda.js` y solo cuando el negocio
   vende de verdad. Sin ese archivo no existe ninguno de estos elementos y
   la tienda sigue funcionando con sus botones de consultar.
   ================================================================== */

/* El formulario del boton no puede cambiar el diseno del pie de la
   tarjeta: es un envoltorio, no una fila mas. */
.pf-prod-add{margin-left:auto;display:contents}
.pf-prod-add .pf-prod-b{border:0;font:inherit;cursor:pointer;
  font-size:12.5px;font-weight:700;margin-left:auto}
/* Sin precio al lado, el boton ocupa la tarjeta entera. Es la misma regla
   que ya tiene el enlace de consultar, pero el selector `:only-child` no
   alcanza porque aca el boton vive dentro del formulario. */
.pf-prod-f > .pf-prod-add:only-child .pf-prod-b{width:100%;margin-left:0;text-align:center}

.pf-cart-ver{
  display:block;margin:10px 18px 0;width:calc(100% - 36px);
  padding:11px 14px;border-radius:var(--p-r);border:0;
  background:var(--p-accent);color:var(--p-accent-ink);
  font:inherit;font-size:13.5px;font-weight:var(--p-ctaw,700);
  cursor:pointer;text-align:center;
}
.pf-cart-ver:hover{filter:brightness(1.06)}
/* Por lo mismo que el de arriba: sin esto, el pedido vacío deja una barra
   del color de la marca flotando debajo de la tienda. */
.pf-cart-ver[hidden]{display:none}

.pf-cart{padding:18px 16px 16px}
.pf-cart-l{list-style:none;margin:12px 0 0;padding:0;
  border-top:1px solid var(--p-card-bd)}
.pf-cart-l li{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--p-card-bd)}
.pf-cart-l .n{flex:1;font-size:14px;line-height:1.35;color:var(--p-card-text)}
.pf-cart-l .p{font-size:14px;font-weight:800;white-space:nowrap;color:var(--p-card-text)}
/* Los mas y los menos son 30px de lado: con el dedo, un boton mas chico
   se falla y el visitante termina agregando de mas. */
.pf-cart-l .c{display:flex;align-items:center;gap:2px}
.pf-cart-l .c button{width:30px;height:30px;border-radius:999px;
  border:1px solid var(--p-card-bd);background:transparent;cursor:pointer;
  color:var(--p-card-text);font:inherit;font-size:16px;line-height:1}
.pf-cart-l .c button:hover{background:var(--p-card-bg-h)}
.pf-cart-l .c > span{min-width:22px;text-align:center;font-size:14px;
  font-weight:700;color:var(--p-card-text)}

.pf-cart-t{margin:12px 0 4px}
.pf-cart-t > div{display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:14px;color:var(--p-card-sub)}
.pf-cart-t small{display:block;font-size:12px;font-weight:400}
.pf-cart-t .g{margin-top:6px;padding-top:10px;
  border-top:1px solid var(--p-card-bd);
  font-size:17px;font-weight:800;color:var(--p-card-text)}

/* En la ficha de un producto el botón es un <a>, que siendo bloque llena
   el ancho solo. Acá es un <button>, y un <button> tiene tamaño
   intrínseco: con `display:block` igual se queda del ancho de su texto y
   se ve como un botón mal puesto en la esquina. */
.pf-cart form{margin-top:14px}
.pf-cart .pf-prodficha-b{width:100%;box-sizing:border-box;border:0;
  cursor:pointer;font:inherit;font-size:15px;font-weight:var(--p-ctaw,700)}

.pf-cart-vaciar{display:block;margin:10px auto 0;padding:6px 12px;
  border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--p-card-sub);text-decoration:underline}

/* =====================================================================
   MOTION DEL PERFIL

   Los mismos tokens que usan el editor y la consola (`--mo-*` de sus
   `index.css`). Se tocan juntos: si una duración cambia allá y no acá, el
   editor mostraría una vista previa que se mueve a otro ritmo que la
   página del cliente, y esa es justo la diferencia que el iframe existe
   para que no ocurra.

   VAN EN `:root` ADEMÁS DE EN `.pf`, y hace falta: el visor de fotos y la
   ficha de un producto se cuelgan del `body`, o sea FUERA de `.pf`, así
   que acotados a la sección se quedarían sin tokens y caerían a sus
   valores de respaldo. Esta hoja solo la cargan `p.php` y el iframe del
   editor, que son documentos dedicados, así que `:root` no le pisa nada a
   nadie.

   Nada de esto cambia una sola medida ni un solo color, así que ningún
   perfil publicado se ve distinto en reposo: lo único que cambia es cómo
   llega de un estado al otro.
   ================================================================== */
:root,.pf{
  --mo-hover:150ms; --mo-press:100ms; --mo-dropdown:200ms;
  --mo-modal:240ms; --mo-hoja:290ms; --mo-acordeon:300ms;
  --mo-entra:cubic-bezier(.16,1,.3,1);
  --mo-sale:cubic-bezier(.4,0,1,1);
  --mo-suave:cubic-bezier(.32,.72,0,1);
}

/* LO QUE SE TOCA SE HUNDE.

   Todo esto ya tenía su hover; lo que faltaba era la respuesta al clic.
   Sin ella, entre apretar y que la página cambie no pasa nada durante
   unos milisegundos y el dedo duda: se lee como que el botón no registró
   el toque, y es la razón número uno por la que alguien vuelve a apretar.

   El hundido dura MENOS que el hover a propósito (`--mo-press` contra
   `--mo-hover`): una respuesta al toque tiene que sentirse inmediata,
   mientras que un hover que aparece de golpe se lee como un parpadeo. */
.pf-block,.pf-cta a,.pf-act .bubble,.pf-prod-b,.pf-shop-mas,.pf-grate,
.pf-zona,.pf-h summary,.pf-prod{
  transition-duration:var(--mo-hover);
  transition-timing-function:var(--mo-entra);
}
/* LA LISTA DE PROPIEDADES VA EXPLÍCITA EN LOS QUE NO TENÍAN NINGUNA.

   `transition-property` vale `all` por omisión, así que darle una
   duración a un elemento que no transicionaba nada haría que transicione
   TODO, incluido lo que decide el layout. En un `<summary>` que abre un
   panel eso significa animar el alto de la tarjeta del horario a
   destiempo del contenido, y en una pastilla de zona, el ancho al
   filtrar. Los otros cinco ya traían su propia `transition:.18s`, así que
   ahí solo cambia el ritmo. */
.pf-prod-b,.pf-shop-mas,.pf-zona,.pf-h summary{
  transition-property:background,color,border-color,box-shadow,filter,transform;
}
.pf-block:active,.pf-cta a:active,.pf-prod-b:active,.pf-shop-mas:active,
.pf-grate:active{
  transform:scale(.985);
  transition-duration:var(--mo-press);
  transition-timing-function:var(--mo-sale);
}
/* La burbuja de una acción rápida es un círculo chico: a .985 el hundido
   no se ve. Se le da un poco más de recorrido, que a ese tamaño sigue
   siendo discreto. */
.pf-act .bubble:active{transform:scale(.94);transition-duration:var(--mo-press)}

/* LA TARJETA DE UN PRODUCTO SE ELEVA, como ya hacían los enlaces.
   Sube un píxel y gana sombra; NO se escala, porque una tarjeta con texto
   adentro escalada reajusta la tipografía en cada cuadro y el texto
   tiembla. El `translateY` va en la GPU y no empuja a las vecinas. */
.pf-prod{transition-property:transform,box-shadow,border-color,background}
.pf-prod:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.28)}
.pf-prod:active{transform:translateY(0);transition-duration:var(--mo-press)}

/* El carrusel de la tienda se detiene en cada tarjeta con suavidad en vez
   de frenar en seco. Es scroll nativo, así que la inercia ya la pone el
   navegador; esto es solo cómo termina. */
.pf-shop-vp{scroll-behavior:smooth}

/* La flecha del horario gira con la misma curva con la que se despliega
   el panel, así se leen como un solo movimiento y no como dos. */
.pf-h-chev{transition:transform var(--mo-acordeon) var(--mo-suave)}
.pf-zonas{transition:max-height var(--mo-acordeon) var(--mo-suave)}

/* Quien pidió menos movimiento pierde también esto. El bloque de más
   arriba ya apaga las transiciones de `.pf *`; acá se agregan las dos
   cosas que no son transiciones. */
@media (prefers-reduced-motion:reduce){
  .pf-shop-vp{scroll-behavior:auto}
  .pf-prod:hover,.pf-block:hover{transform:none}
}

/* LAS TARJETAS QUE APARECEN AL ABRIR LA TIENDA ENTRAN, no aparecen.

   Solo las que estaban fuera del carrusel: `tienda.js` mide cuáles se
   veían antes de abrir y a esas no les pone la clase, porque volver a
   animar algo que ya estaba en pantalla se lee como un parpadeo.

   El retraso lo pone el JS en `--mo-i`, topado a 6. */
@keyframes pf-prod-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pf-prod-entra{
  animation:pf-prod-entra var(--mo-modal) var(--mo-entra) both;
  animation-delay:calc(var(--mo-i,0) * 40ms);
}
@media (prefers-reduced-motion:reduce){
  .pf-prod-entra{animation:none}
}

/* =====================================================================
   LO QUE SE ABRE ENCIMA: visor de fotos, ficha de producto y menú •••

   Los tres aparecían de golpe porque los tres se encienden con `display`,
   que es una propiedad discreta y no se puede transicionar. La ENTRADA se
   resuelve con un keyframe (cuando el elemento pasa a visible, la
   animación corre sola); la SALIDA la retrasan sus archivos JS con la
   clase `saliendo`, porque si no el elemento se quita del documento en el
   cuadro siguiente y no hay nada que animar.
   ================================================================== */
@keyframes pf-capa-in  {from{opacity:0}to{opacity:1}}
@keyframes pf-capa-out {from{opacity:1}to{opacity:0}}
/* Escala suave, sin rebote: es una capa que se acerca, no un elemento
   que reacciona a un toque. */
@keyframes pf-modal-in {from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes pf-menu-in  {from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}

.pf-zoom.on            {animation:pf-capa-in var(--mo-modal,240ms) var(--mo-entra,ease-out)}
.pf-zoom.on img        {animation:pf-modal-in var(--mo-modal,240ms) var(--mo-entra,ease-out) both}
.pf-zoom.saliendo      {animation:pf-capa-out var(--mo-hover,150ms) var(--mo-sale,ease-in) forwards}

.pf-prodmodal          {animation:pf-capa-in var(--mo-modal,240ms) var(--mo-entra,ease-out)}
.pf-prodmodal .pf-prodficha {animation:pf-modal-in var(--mo-modal,240ms) var(--mo-entra,ease-out) both}
.pf-prodmodal.saliendo {animation:pf-capa-out var(--mo-hover,150ms) var(--mo-sale,ease-in) forwards}
/* El contenido acompaña a la capa en la salida: si solo se desvaneciera
   el fondo, la ficha se vería flotar sola sobre la página un instante. */
.pf-prodmodal.saliendo .pf-prodficha {animation:pf-capa-out var(--mo-hover,150ms) var(--mo-sale,ease-in) forwards}

/* El menú crece desde su botón, arriba a la derecha, no desde el centro. */
.pf-menu .sheet        {transform-origin:top right}
.pf-menu.open .sheet   {animation:pf-menu-in var(--mo-dropdown,200ms) var(--mo-entra,ease-out)}
.pf-menu.saliendo .sheet {animation:pf-capa-out var(--mo-press,100ms) var(--mo-sale,ease-in) forwards}

@media (prefers-reduced-motion:reduce){
  .pf-zoom.on,.pf-zoom.on img,.pf-prodmodal,.pf-prodmodal .pf-prodficha,
  .pf-menu.open .sheet,.pf-zoom.saliendo,.pf-prodmodal.saliendo,
  .pf-menu.saliendo .sheet{animation:none}
}

/* ---------------------------------------------------------------------
   CITAS · el formulario de contacto

   Dos columnas donde entran, una sola en el telefono. El mensaje ocupa
   siempre el ancho completo: es el campo donde de verdad se escribe.
   ------------------------------------------------------------------ */
/* `padding` y NO `margin-top:var(--p-gap)`: ese token NO EXISTE en ningún
   lado. Una declaración con una variable indefinida es inválida y el
   navegador la descarta sin decir nada, así que la sección quedaba PEGADA
   a la de arriba. Los 24px son los mismos que usan `.pf-promos` y
   `.pf-pay`, que es la separación de la casa. */
.pf-citas{padding:24px 0 0}

/* =====================================================================
   EL BOTON Y SU MODAL

   En la pagina solo se ve un boton. El formulario abierto ocupaba media
   pantalla del perfil y empujaba hacia abajo las fotos, la tienda y el
   horario, que es lo que la gente vino a ver. Ocho campos de entrada
   tambien intimidan: se piden cuando alguien ya decidio, no antes.
   ================================================================== */
/* `margin:0 18px` Y NO `width:100%`: 18px es el margen que usa TODO el
   contenido del perfil (ver `.pf-pay-b`, que es el botón de al lado). Con
   `width:100%` el botón salía más ancho que todo lo demás y se notaba a
   simple vista, porque ignoraba ese margen y ocupaba la sección entera. */
.pf-cita-abrir{
  display:flex;align-items:center;justify-content:center;
  /* El ancho va con `calc` y no con `width:auto`. `.pf-pay-b`, que es el
     botón de al lado, se estira solo con `margin:0 18px` porque es un <a>;
     este es un <button> y los controles de formulario se encogen a su
     contenido. Sin el calc, el botón salía del ancho del texto: "Enviar
     mensaje" quedaba de 150px en el medio de la página.
     Los 36 son los 18 de cada lado; van pegados a la línea del margen
     justamente para que se cambien juntos. */
  margin:2px 18px 0;width:calc(100% - 36px);box-sizing:border-box;
  height:52px;padding:0 18px;border:0;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:var(--p-ctaw,700);
  color:var(--p-accent-ink);background:var(--p-accent);
  border-radius:min(var(--p-cta-r,var(--p-r)),18px);
  transition:filter .16s ease,transform .1s ease;
}
/* Dentro del botón principal el margen lo pone `.pf-cta`, que ya tiene el
   suyo: repetirlo acá lo dejaría con 36px de cada lado. */
.pf-cta .pf-cita-abrir{margin:0;width:100%}
.pf-cita-abrir:hover{filter:brightness(1.06)}
.pf-cita-abrir:active{transform:scale(.985)}
/* Apagado es el estado de ARRANQUE: lo enciende citas.js. Si el archivo
   no carga, se ve apagado en vez de no hacer nada al tocarlo. */
.pf-cita-abrir[disabled]{opacity:.5;cursor:default}

/* EL `[hidden]` DEL NAVEGADOR NO GANA CONTRA `display:flex`: es
   `display:none` con la especificidad mas baja que hay. Sin esta linea el
   modal se ve SIEMPRE, tapando el perfil entero. Ya mordio dos veces en
   este archivo (`.pf-shop-mas` y `.pf-citas-ok`). */
.pf-cita-modal[hidden]{display:none!important}

/* ---------------------------------------------------------------------
   ENTRA DESDE ABAJO Y SALE HACIA ABAJO

   Como el resto de lo que se abre encima en este archivo: la ENTRADA es
   un keyframe (el elemento pasa a visible y la animación corre sola), y
   la SALIDA la retrasa `citas.js` con la clase `saliendo`, porque si no
   el modal se esconde en el cuadro siguiente y no hay nada que animar.

   El fondo y la caja animan POR SEPARADO: el fondo se desvanece y la
   caja se desliza. Si se animara solo el conjunto, la hoja se vería
   "caer" con el velo pegado y parecería que se cae la página entera.
   ------------------------------------------------------------------ */
@keyframes pf-hoja-in  {from{transform:translateY(100%)} to{transform:none}}
@keyframes pf-hoja-out {from{transform:none} to{transform:translateY(100%)}}

.pf-cita-modal:not([hidden]) {animation:pf-capa-in var(--mo-modal,240ms) var(--mo-entra,ease-out)}
.pf-cita-modal:not([hidden]) .pf-cita-caja{
  /* `both` mantiene el estado inicial ANTES de que arranque: sin eso la
     hoja parpadea un cuadro en su posición final. */
  animation:pf-hoja-in var(--mo-modal,240ms) var(--mo-entra,cubic-bezier(.32,.72,0,1)) both;
}
.pf-cita-modal.saliendo      {animation:pf-capa-out var(--mo-hover,150ms) var(--mo-sale,ease-in) forwards}
.pf-cita-modal.saliendo .pf-cita-caja{
  /* Un poco más lenta que el velo: la hoja tiene que llegar abajo, no
     desaparecer a mitad de camino. */
  animation:pf-hoja-out var(--mo-modal,240ms) var(--mo-sale,cubic-bezier(.4,0,1,1)) forwards;
}

/* Quien pidió menos movimiento no recibe ninguno. El bloque general de
   `prefers-reduced-motion` de este archivo apaga `transition`, no
   `animation`, así que esto hace falta aparte. */
@media (prefers-reduced-motion:reduce){
  .pf-cita-modal:not([hidden]),
  .pf-cita-modal:not([hidden]) .pf-cita-caja,
  .pf-cita-modal.saliendo,
  .pf-cita-modal.saliendo .pf-cita-caja{animation:none!important}
}
.pf-cita-modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,10,15,.62);backdrop-filter:blur(5px);
  padding:0;
}
.pf-cita-caja{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  /* `--p-surface` y NO `--p-card-bg`: esa última es `--p-chip`, o sea
     `rgba(0,0,0,.05)`, y en algunos estilos directamente `transparent`.
     Sirve para una tarjeta apoyada sobre la página, pero en un modal deja
     ver el perfil ENTERO a través del formulario y no se puede leer nada.
     `--p-surface` es la superficie opaca, y sigue el tema del negocio. */
  background:var(--p-surface,var(--p-bg));border:1px solid var(--p-card-bd);
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.55);
  -webkit-overflow-scrolling:touch;
}
/* En pantalla grande deja de ser una hoja que sube y pasa a ser una
   tarjeta centrada: pegada abajo en un monitor se ve perdida. */
@media (min-width:700px){
  .pf-cita-modal{align-items:center;padding:24px}
  .pf-cita-caja{border-radius:22px}
}
.pf-cita-t{
  margin:0 34px 14px 0;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--p-text);line-height:1.25;
}
.pf-cita-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--p-card-bd);border-radius:50%;
  background:transparent;color:var(--p-muted);
}
.pf-cita-x:hover{background:rgba(125,125,125,.14);color:var(--p-text)}
.pf-cita-x svg{width:16px;height:16px;stroke-width:2.2}
.pf-citas-n{margin:-2px 0 12px;font-size:13.5px;line-height:1.5;color:var(--p-muted)}

/* El formulario A LA VISTA, en su sección: lleva el mismo margen de 18px
   que el resto del contenido. Dentro del modal no, porque ahí el margen
   lo pone la caja. */
.pf-citas > .pf-cita,
.pf-citas > .pf-citas-ok{margin:0 18px}
.pf-cita{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-cita-full,.pf-cita-b,.pf-cita-msg{grid-column:1 / -1}
@media (max-width:430px){ .pf-cita{grid-template-columns:1fr} }

.pf-cita-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-cita-f > span{font-size:12.5px;font-weight:600;color:var(--p-muted)}
.pf-cita-f > span i{font-style:normal;font-weight:400;opacity:.75}

.pf-cita-f input,.pf-cita-f select,.pf-cita-f textarea{
  /* `box-sizing` explicito: esta hoja la usan la pagina publica Y el
     iframe del editor, y no puede depender del reset de quien la
     hospede. Sin esto, el ancho es 100% MAS el relleno y el formulario
     se sale de la pagina. */
  box-sizing:border-box;
  /* 16px Y NO MENOS. Safari en iPhone hace ZOOM solo al tocar un campo
     cuya letra baje de 16px, y despues deja la pagina ampliada: la
     persona tiene que salir a pellizcar para volver, en la mitad de
     llenar un formulario. Con 16 no hay zoom.

     La otra forma de evitarlo es `maximum-scale=1` en el viewport, y NO
     se usa a proposito: eso le saca el pellizco a TODO el mundo en toda
     la pagina, incluida la gente que amplia para poder leer. Un pixel de
     letra sale mucho mas barato que eso. */
  width:100%;font:inherit;font-size:16px;color:var(--p-text);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
  border-radius:min(var(--p-r),14px);padding:11px 13px;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
/* 15px y no menos: por debajo de 16px, Safari en iPhone hace zoom solo al
   enfocar un campo, y la pagina se queda ampliada. */
.pf-cita-f textarea{resize:vertical;min-height:84px;line-height:1.5}
.pf-cita-f input:focus-visible,.pf-cita-f select:focus-visible,.pf-cita-f textarea:focus-visible{
  border-color:var(--p-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 26%,transparent);
}

.pf-cita-b{
  margin-top:2px;padding:13px 18px;border:0;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:var(--p-ctaw,700);
  color:var(--p-accent-ink);background:var(--p-accent);
  border-radius:min(var(--p-cta-r,var(--p-r)),18px);
  transition:filter .16s ease,transform .1s ease;
}
.pf-cita-b:hover{filter:brightness(1.06)}
.pf-cita-b:active{transform:scale(.985)}
/* Deshabilitado es el estado de ARRANQUE: lo habilita citas.js. Asi, si
   el archivo no carga, se ve apagado en vez de no hacer nada al tocarlo. */
.pf-cita-b[disabled]{opacity:.5;cursor:default}

.pf-cita-msg:empty{display:none}
.pf-cita-msg{margin:0;font-size:13.5px;color:#E0564F}

/* La trampa para robots. `position:absolute` fuera de pantalla y no
   `display:none`: varios programas saltean lo que esta oculto del todo,
   y la idea es justo que lo llenen. */
.pf-cita-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* EL `[hidden]` DEL NAVEGADOR NO GANA CONTRA `display:flex`: es
   `display:none` con la especificidad mas baja que hay, asi que
   cualquier display propio lo pisa y el "gracias" se ve SIEMPRE, debajo
   del formulario. Ya mordio con `.pf-shop-mas`. */
.pf-citas-ok[hidden]{display:none}
.pf-citas-ok{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:26px 18px;border-radius:min(var(--p-r),18px);
  background:var(--p-card-bg);border:1px solid var(--p-card-bd);
}
.pf-citas-ok-i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--p-accent);color:var(--p-accent-ink);margin-bottom:2px}
.pf-citas-ok-i svg{width:22px;height:22px}
.pf-citas-ok b{font-size:16.5px;font-weight:var(--p-tw,700);color:var(--p-text)}
.pf-citas-ok span{font-size:14px;line-height:1.55;color:var(--p-muted);max-width:38ch}