/* ══════════════════════════════════════════════════════════════
   PELAO · "estilo limpio" (portada y página del profesional)
   Fondo blanco, neblina del color de la marca (o del oficio), burbujas de chat de vidrio y
   letra Geist, como los cuadros del reel limpio de Pelao.
   Va DESPUÉS de style.css (y de publico.css en la portada) y todo cuelga de html.limpio,
   así /buscar y la app siguen iguales. NO redefine --azul ni --ink: el color del oficio y el
   que escogió cada profesional siguen mandando (data-oficio / data-color en <html>).
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

html.limpio{
  --texto:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --lim-blanco:#FCFDFF;
  --lim-gris:#57687F;                 /* el gris del boceto (#6B7A99) no da 4.5:1; este sí */
  --lim-sombra:0 22px 60px rgba(32,64,140,.13),0 2px 8px rgba(32,64,140,.06);
  --lim-sombra-chica:0 4px 14px rgba(32,64,140,.07),0 1px 2px rgba(32,64,140,.05);
  --lim-sale:cubic-bezier(.22,1,.36,1);
  --lim-pop:cubic-bezier(.34,1.56,.64,1);
  --lim-tinte:#EEF3FD;
  --lim-tinte:color-mix(in srgb,var(--azul) 9%,#fff);
  background:var(--lim-blanco);
}
html.limpio body{background:var(--lim-blanco);letter-spacing:-.006em}
html.limpio body::before{background:var(--lim-blanco)}
html.limpio input,html.limpio textarea,html.limpio select{font-size:16px}   /* 16 px: el iPhone no hace zoom al tocar */

/* ── movimiento: lo marcado con data-mov arranca escondido solo si movimiento.js va a correr ── */
html.mov [data-mov]:not(.mov-listo){opacity:0}
/* si movimiento.js nunca llega (internet caído), a los 3 s se enseña todo igual */
html.mov:not(.mov-js) [data-mov]{animation:lim-salvavidas 0s 3s forwards}
@keyframes lim-salvavidas{to{opacity:1}}
.mov-p{display:inline-block}
/* las palabras sueltas heredan el color de donde estaban (si no, "span{color:azul}" de los titulares las pinta todas) */
html.limpio span.mov-p.mov-p{color:inherit}

/* ── titulares livianos (Geist 380 solo en tamaños grandes) ── */
.lim-titulo{font-weight:380;letter-spacing:-.035em;line-height:1.04;color:var(--ink);text-wrap:balance}
.lim-titulo b,.lim-titulo .azul{font-weight:380;color:var(--azul)}

/* ── globo de chat de vidrio (lo que el cliente pregunta) ── */
.globo{display:inline-flex;align-items:flex-end;gap:10px;background:rgba(255,255,255,.94);border-radius:22px;padding:9px 16px 9px 9px;
  font-weight:500;font-size:15.5px;letter-spacing:-.015em;line-height:1.2;color:var(--ink);white-space:nowrap;box-shadow:var(--lim-sombra)}
.globo .av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;align-self:center;display:grid;place-items:center;
  background:linear-gradient(135deg,#DCE8FF,#BCD2FF);color:#3A5BA8;font-size:12.5px;font-weight:600}
.globo small{font-size:11px;font-weight:500;color:#7D8AA6;padding-bottom:1px}
.globo.lejos{filter:blur(1.6px);opacity:.72}
/* la respuesta de la página: azul, a la derecha, con su palomita */
.globo.resp{background:var(--azul);color:#fff;align-items:center;padding:10px 16px 10px 10px;white-space:normal;box-shadow:0 18px 44px rgba(32,64,140,.2)}
.globo.resp .ok{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#fff;color:var(--ok);display:grid;place-items:center}
.globo.resp .ok svg{width:15px;height:15px;stroke-width:3}

/* ── pastilla flotante tipo aviso ("Nueva cita", "Cerrado") ── */
.aviso-flota{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);border-radius:20px;padding:9px 16px 9px 9px;box-shadow:var(--lim-sombra);text-align:left}
.aviso-flota b{display:block;font-weight:600;font-size:15px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.aviso-flota span{display:block;font-size:12px;font-weight:500;color:var(--lim-gris);line-height:1.3}
.aviso-flota .punto{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px rgba(18,147,77,.16);margin:0 3px 0 8px}
.aviso-flota .luna{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#16233B;display:grid;place-items:center}
.aviso-flota .luna svg{width:17px;height:17px;fill:#F3E7C9;stroke:none}

/* ── neblina del color de la marca (degradados quietos: no pesan y toman el color del oficio) ── */
.neblina{position:absolute;left:-30%;right:-30%;bottom:-150px;height:440px;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 58% at 18% 72%,rgba(46,107,230,.30),rgba(46,107,230,0) 70%),
    radial-gradient(48% 62% at 52% 86%,rgba(150,186,255,.45),rgba(150,186,255,0) 72%),
    radial-gradient(38% 54% at 86% 70%,rgba(46,107,230,.26),rgba(46,107,230,0) 70%),
    radial-gradient(26% 36% at 97% 46%,rgba(255,206,186,.42),rgba(255,206,186,0) 70%);
  background:
    radial-gradient(40% 58% at 18% 72%,color-mix(in srgb,var(--azul) 30%,transparent),transparent 70%),
    radial-gradient(48% 62% at 52% 86%,color-mix(in srgb,var(--azul) 22%,rgba(255,255,255,.5)),transparent 72%),
    radial-gradient(38% 54% at 86% 70%,color-mix(in srgb,var(--azul) 26%,transparent),transparent 70%),
    radial-gradient(26% 36% at 97% 46%,rgba(255,206,186,.42),transparent 70%)}

/* ── botones del estilo limpio: se hunden un poquito al tocarlos ── */
html.limpio .btn{transition:transform .16s var(--lim-sale),box-shadow .2s var(--lim-sale),background var(--dur)}
html.limpio .btn:active{transform:scale(.97)}

@media (prefers-reduced-motion: reduce){
  html.limpio .btn{transition:none}
  html.limpio .btn:active{transform:none}
}