/* Mini-sitio público de Agenda Premium.
   Archivo estático: el navegador lo cachea, así que la segunda visita (y el
   iframe incrustado en otra web) no vuelve a descargarlo.
   Los colores de marca van inline en la página porque dependen del negocio. */
*{ box-sizing:border-box; }
        .i{ width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor; }
        html,body{ margin:0;padding:0; }
        body{ font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
              background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5; }
        img{ max-width:100%; }
        .wrap{ max-width:940px;margin:0 auto;padding:0 16px 64px; }

        /* ═══ Estructura de dos columnas ═══ */
        .cols{ display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start; }
        /* En móvil se apila en el orden natural: portada, ficha, servicios y al final
   el mapa. El order:-1 de antes tenía sentido cuando la portada iba a sangre
   arriba; ahora pondría el mapa por delante de la portada. */
@media (max-width:900px){ .cols{ grid-template-columns:minmax(0,1fr); } .aside{ position:static; } }
        .aside{ display:flex;flex-direction:column;gap:14px;position:sticky;top:16px; }
        .box{ background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden; }
        .box-p{ padding:16px 18px; }
        .box-t{ font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px; }

        /* Mapa */
        .map{ height:170px;background:var(--b-soft);position:relative; }
        .map iframe{ width:100%;height:100%;border:0;display:block;filter:saturate(1.05); }
        .info-l{ display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);
                 font-size:13.5px;color:var(--text);text-decoration:none; }
        .info-l:last-child{ border-bottom:none; }
        .info-l .i{ color:var(--b);margin-top:3px;flex-shrink:0;font-size:15px; }
        a.info-l:hover{ color:var(--b); }

        /* Estado abierto / cerrado */
        .badge{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700; }
        .badge::before{ content:'';width:7px;height:7px;border-radius:50%; }
        .badge.on{ color:#16a34a; } .badge.on::before{ background:#16a34a; }
        .badge.off{ color:#dc2626; } .badge.off::before{ background:#dc2626; }

        /* Horario */
        .hrs{ display:none;margin-top:10px; }
        .hrs.on{ display:block; }
        .hrs-r{ display:flex;justify-content:space-between;padding:6px 0;font-size:12.5px;color:var(--muted); }
        .hrs-r b{ color:var(--text);font-weight:650;font-variant-numeric:tabular-nums; }
        .hrs-r.today{ color:var(--b); } .hrs-r.today b{ color:var(--b); }

        /* Equipo */
        .team{ display:flex;gap:14px;flex-wrap:wrap; }
        .tm{ text-align:center;width:62px; }
        .tm-av{ width:54px;height:54px;border-radius:50%;margin:0 auto 6px;overflow:hidden;display:flex;
                align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:19px; }
        .tm-av img{ width:100%;height:100%;object-fit:cover; }
        .tm-n{ font-size:11.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

        /* Buscador y filtros */
        .search{ position:relative; }
        .search input{ width:100%;padding:13px 15px 13px 42px;border:1.5px solid var(--line);border-radius:14px;
                       font-size:14.5px;font-family:inherit;background:var(--card);color:var(--text); }
        .search input:focus{ outline:none;border-color:var(--b);box-shadow:0 0 0 3px var(--b-soft); }
        .search .i-s{ position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;width:15px;height:15px; }
        .chips{ display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; }
        .chip{ background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;
               font-size:12.5px;font-weight:650;cursor:pointer;transition:border-color .12s ease,background-color .12s ease,color .12s ease; }
        .chip:hover{ border-color:var(--b);color:var(--b); }
        .chip.on{ background:var(--b);color:#fff;border-color:var(--b); }

/* ═══ Categorías en la ficha lateral (escritorio) ═══
   En móvil la ficha baja al final de la página, lejos de los servicios: allí se quedan los chips
   de arriba y esta tarjeta no se pinta. */
.cats-l{ display:flex;flex-direction:column;gap:2px;margin:0 -8px; }
.cat-i{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:10px;
        padding:8px 10px;font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--text);cursor:pointer;
        transition:background-color .12s ease,color .12s ease; }
.cat-i span{ flex:1;min-width:0; }
.cat-i b{ flex:none;min-width:26px;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--muted);
          font-size:11.5px;font-weight:700;text-align:center; }
.cat-i:hover{ background:var(--b-soft);color:var(--b); }
.cat-i.on{ background:var(--b);color:#fff; }
.cat-i.on b{ background:rgba(255,255,255,.22);color:#fff; }
.cat-i:focus-visible{ outline:2px solid var(--b);outline-offset:1px; }
@media (min-width:901px){
    .has-cats .chips{ display:none; }
    /* Con mapa, profesionales y categorías la ficha ya no cabe en la pantalla: deja de ir pegada
       entera y lo que acompaña al bajar por los servicios es solo la tarjeta de categorías. */
    .has-cats .aside{ position:static;align-self:stretch; }
    .has-cats .cats-box{ position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto; }
}
@media (max-width:900px){ .cats-box{ display:none; } }

        /* ═══ Servicios ═══ */
        .sec-t{ font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;
                margin:26px 0 13px;display:flex;align-items:center;gap:11px; }
        .sec-t::after{ content:'';flex:1;height:1px;background:var(--line); }
        .grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px; }
        .svc-more{ background:none;border:none;color:var(--b);font-weight:700;font-size:12.5px;cursor:pointer;padding:0;font-family:inherit; }
        .svc-tags{ display:flex;gap:6px;flex-wrap:wrap;margin-top:8px; }
        .tag{ font-size:11px;font-weight:650;color:var(--muted);background:var(--bg);border-radius:999px;padding:4px 10px;
              display:inline-flex;align-items:center;gap:5px; }
        .svc-cta{ background:var(--b);color:#fff;border:none;border-radius:11px;padding:9px 18px;font-weight:700;
                  font-size:13px;cursor:pointer;font-family:inherit;flex-shrink:0; }
        .svc-cta:hover{ background:var(--b-dark); }
        .no-res{ text-align:center;color:var(--muted);padding:38px 16px;font-size:14px; }
        .svc{ background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer;
              border:2px solid transparent;transition:transform .16s ease,border-color .16s ease;display:flex;flex-direction:column;contain:content; }
        .svc:hover{ transform:translateY(-3px);border-color:var(--b); }
        .svc-img{ height:152px;background:var(--b-soft);position:relative;overflow:hidden; }
        .svc-img img{ width:100%;height:100%;object-fit:cover;display:block; }
        .svc-img .ph{ height:100%;display:flex;align-items:center;justify-content:center;color:var(--b);font-size:30px;opacity:.35; }

        /* ═══ Cuando el servicio no tiene imagen propia ═══
           Se usa la portada del negocio muy difuminada, con un brillo que la
           cruza despacio. Da la sensación de que la imagen está por llegar en
           vez de dejar un cuadro vacío con unas tijeras. */
        .svc-img-fb .fb{
            position:absolute;inset:0;
            background-size:cover;background-position:center;
            /* El scale tapa el borde translúcido que deja el desenfoque. */
            filter:blur(18px) saturate(1.15) brightness(.92);
            transform:scale(1.25);
        }
        .svc-img-fb::after{                       /* vela para que el texto de al lado respire */
            content:'';position:absolute;inset:0;
            background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.60));
        }
        .svc-img-fb .fb-sheen{
            position:absolute;inset:0;z-index:1;
            background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
            background-size:260% 100%;
            animation:agpSheen 2.9s ease-in-out infinite;
        }
        .svc-img-fb .fb-i{
            position:absolute;z-index:2;left:50%;top:50%;
            width:26px;height:26px;margin:-13px 0 0 -13px;
            color:var(--b);opacity:.30;
        }
        @keyframes agpSheen{
            0%   { background-position:160% 0; }
            60%  { background-position:-60% 0; }
            100% { background-position:-60% 0; }   /* pausa antes de repetir */
        }

        /* ═══ Imágenes apagadas por el dueño ═══
           Sin hueco de 152 px: solo una franja con el color de marca, para que
           la tarjeta no empiece en un corte seco. */
        .svc-band{
            height:7px;flex:none;
            background:linear-gradient(90deg,
                color-mix(in srgb, var(--b) 92%, #000) 0%,
                var(--b) 38%,
                color-mix(in srgb, var(--b) 45%, #fff) 62%,
                var(--b) 100%);
        }

        /* Quien pidió menos movimiento no ve el brillo. */
        @media (prefers-reduced-motion: reduce){
            .svc-img-fb .fb-sheen{ animation:none;opacity:.25; }
        }

        .svc-b{ padding:15px 17px 17px;flex:1;display:flex;flex-direction:column; }
        .svc-n{ font-size:15.5px;font-weight:700;margin:0 0 5px;letter-spacing:-.01em; }
        .svc-d{ font-size:13px;color:var(--muted);line-height:1.55;flex:1; }
        .svc-f{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line); }
        .svc-p{ font-size:17px;font-weight:800;color:var(--b);letter-spacing:-.02em; }
        .svc-t{ font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px; }

        /* ═══ Ventana de reserva ═══ */
                /* Sin backdrop-filter: el desenfoque obliga a recomponer TODO el fondo en
           cada repintado y hacía que pasar el ratón por días y horas fuera a
           tirones. Un velo sólido se ve casi igual y no cuesta nada. */
        .mb{ display:none;position:fixed;inset:0;background:rgba(10,14,20,.66);z-index:900;
             align-items:center;justify-content:center;padding:18px; }
        .mb.on{ display:flex;animation:fade .18s ease; }
        .mo{ background:var(--card);border-radius:24px;width:100%;max-width:470px;max-height:92vh;overflow:hidden;
             display:flex;flex-direction:column;animation:pop .24s cubic-bezier(.2,.9,.3,1.15); }
        @keyframes fade{ from{opacity:0} to{opacity:1} }
        @keyframes pop{ from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }
        .mo-h{ padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:13px;flex-shrink:0; }
        .mo-h .ico{ width:42px;height:42px;border-radius:13px;overflow:hidden;flex-shrink:0;background:var(--b-soft);
                    display:flex;align-items:center;justify-content:center;color:var(--b); }
        .mo-h .ico img{ width:100%;height:100%;object-fit:cover; }
        .mo-t{ font-size:15.5px;font-weight:750;letter-spacing:-.01em; }
        .mo-s{ font-size:12.5px;color:var(--muted);margin-top:1px; }
        .mo-x{ margin-left:auto;background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:6px;border-radius:9px; }
        .mo-x:hover{ background:var(--bg);color:var(--text); }
        .mo-b{ padding:20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch; }
        .mo-f{ padding:15px 20px;border-top:1px solid var(--line);flex-shrink:0;background:var(--card); }

        .steps{ display:flex;gap:5px;margin-bottom:17px; }
        .steps i{ flex:1;height:3px;border-radius:99px;background:var(--line);transition:background .25s ease; }
        .steps i.on{ background:var(--b); }

        /* Carrusel de fechas: en escritorio se navega con flechas (no hay gesto
           táctil); en móvil se desliza con el dedo y las flechas sobran. */
        .dates-wrap{ position:relative;margin-bottom:15px; }
        .dates{ display:flex;gap:8px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none;scroll-behavior:smooth; }
        .dates::-webkit-scrollbar{ display:none; }
        .dnav{ display:none;position:absolute;top:calc(50% - 9px);transform:translateY(-50%);width:32px;height:32px;
               border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);
               cursor:pointer;align-items:center;justify-content:center;z-index:3;
               box-shadow:0 2px 10px rgba(16,24,40,.14);transition:background-color .14s ease,opacity .14s ease; }
        .dnav:hover{ background:var(--b);color:#fff;border-color:var(--b); }
        .dnav[disabled]{ opacity:0;pointer-events:none; }
        .dnav.prev{ left:-6px; }
        .dnav.next{ right:-6px; }
        .dnav svg{ width:13px;height:13px; }
        @media (hover:hover) and (pointer:fine){ .dnav{ display:flex; } }
        .dp{ flex-shrink:0;background:var(--bg);border:1.5px solid transparent;border-radius:14px;padding:10px 13px;
             text-align:center;cursor:pointer;min-width:60px;transition:border-color .12s ease,background-color .12s ease,color .12s ease; }
        .dp:hover{ border-color:var(--b); }
        .dp.on{ background:var(--b);color:#fff; }
        .dp .d{ font-size:10px;font-weight:800;text-transform:uppercase;opacity:.75;letter-spacing:.04em; }
        .dp .n{ font-size:17px;font-weight:800;margin-top:2px;letter-spacing:-.02em; }
        .dp .m{ font-size:10px;opacity:.72; }
        .slots{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
        @media (max-width:380px){ .slots{ grid-template-columns:repeat(2,1fr); } }
        .sl{ background:var(--bg);border:1.5px solid transparent;border-radius:12px;padding:12px 4px;text-align:center;
             font-size:14px;font-weight:700;cursor:pointer;transition:border-color .12s ease,color .12s ease;font-variant-numeric:tabular-nums; }
        .sl:hover{ border-color:var(--b);color:var(--b); }

        /* Elegir con quién te atienden */
        .pros{ display:flex;flex-direction:column;gap:8px;margin-bottom:6px; }
        .pro{ display:flex;align-items:center;gap:12px;padding:11px 13px;border:1.5px solid var(--line);
              border-radius:14px;cursor:pointer;transition:border-color .12s ease,background-color .12s ease; }
        .pro:hover{ border-color:var(--b);background:var(--b-soft); }
        .pro.on{ border-color:var(--b);background:var(--b-soft); }
        .pro-av{ width:40px;height:40px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--b-soft);
                 display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;overflow:hidden; }
        .pro-av img{ width:100%;height:100%;object-fit:cover;border-radius:50%;display:block; }
        .pro-n{ font-size:14.5px;font-weight:650;flex:1;min-width:0; }
        .pro-c{ width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative; }
        .pro.on .pro-c{ border-color:var(--b);background:var(--b); }
        .pro.on .pro-c::after{ content:'';position:absolute;inset:4px;border-radius:50%;background:#fff; }
        .step-t{ font-size:13px;font-weight:700;margin:0 0 11px; }
        /* Servicios que se atienden con varios profesionales a la vez */
        .pros-sub{ font-size:12.5px;line-height:1.5;color:var(--muted, #5f6b76);margin:-4px 0 11px; }
        .pros.multi .pro-c{ border-radius:6px; }
        .pros.multi .pro.on .pro-c::after{ inset:3px 6px 6px 5px;border-radius:0;background:none;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg); }
        .pros-count{ font-size:12.5px;color:var(--muted, #5f6b76);text-align:center;margin:6px 0 8px; }
        .pros-count b{ color:var(--b); }
        .pros-msg{ display:flex;gap:10px;align-items:flex-start;background:var(--b-soft);border:1.5px solid var(--b);border-radius:14px;padding:11px 13px;margin:0 0 10px;font-size:13.5px;line-height:1.5; }
        .pros-msg-i{ font-size:18px;line-height:1.2; }
        .pros-msg-in{ animation:prosMsgIn .35s ease; }
        @keyframes prosMsgIn{ 0%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 50%{ transform:translateX(5px) } 75%{ transform:translateX(-3px) } 100%{ transform:translateX(0) } }
        .pros-go{ width:100%; }
        /* Resumen: fotos de quienes atienden, en lugar de sus nombres */
        .sum-avs{ display:inline-flex;align-items:center; }
        .sum-av{ width:34px;height:34px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
                 color:#fff;font-weight:800;font-size:14px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.18);background:var(--b-soft); }
        .sum-av + .sum-av{ margin-left:-8px; }
        .sum-av img{ width:100%;height:100%;object-fit:cover;display:block; }
        .pros-go.pros-go-off{ opacity:.55; }
        @media (prefers-reduced-motion: reduce){ .pros-msg-in{ animation:none; } }

        .sum{ background:var(--bg);border-radius:15px;padding:14px 16px;margin-bottom:17px; }
        .sum-r{ display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13px;color:var(--muted); }
        .sum-r b{ color:var(--text);text-align:right;font-weight:650; }
        .sum-tot{ border-top:1px solid var(--line);margin-top:7px;padding-top:9px;font-size:15px; }
        .sum-tot b{ color:var(--b);font-size:17px;font-weight:800; }

        .f{ margin-bottom:14px; }
        .f label{ font-size:12.5px;font-weight:700;display:block;margin-bottom:6px; }
        .f label .req{ color:#dc2626; }
        .f input,.f textarea,.f select{ width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
                                        font-size:15px;font-family:inherit;background:var(--card);color:var(--text);transition:border-color .14s ease; }
        .f input:focus,.f textarea:focus,.f select:focus{ outline:none;border-color:var(--b);box-shadow:0 0 0 3px var(--b-soft); }
        .phone-row{ display:flex;gap:8px; }
        .phone-row select{ width:112px;flex-shrink:0;padding:12px 8px;font-size:13.5px; }
        .opts{ display:flex;flex-direction:column;gap:7px; }
        .opt{ display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;
              cursor:pointer;font-size:14px;transition:border-color .12s ease,background-color .12s ease; }
        .opt:hover{ border-color:var(--b);background:var(--b-soft); }
        .opt input{ width:auto;accent-color:var(--b);margin:0;flex-shrink:0; }

        .btn{ background:var(--b);color:#fff;border:none;border-radius:14px;padding:15px;font-weight:750;font-size:15.5px;
              width:100%;cursor:pointer;font-family:inherit;transition:background-color .15s ease;
              box-shadow:0 4px 14px var(--b-sh); }
        .btn:hover{ background:var(--b-dark); }
        .btn:active{ transform:translateY(1px); }
        .btn:disabled{ background:#aab2ba;box-shadow:none;cursor:progress; }
        .btn-g{ background:none;border:1.5px solid var(--line);color:var(--muted);box-shadow:none;padding:13px; }
        .btn-g:hover{ background:var(--bg);color:var(--text); }
        .row2{ display:flex;gap:9px; }
        .row2 .btn{ flex:1; }

        .empty{ text-align:center;color:var(--muted);padding:34px 14px;font-size:13.5px;line-height:1.6; }
        .alert{ background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:13px;padding:12px 15px;font-size:13px;margin-bottom:16px; }
        .foot{ text-align:center;color:#a9b0b8;font-size:11.5px;margin-top:34px; }
        @media (max-width:560px){
            .mo{ max-width:100%;max-height:96vh;border-radius:22px 22px 0 0;align-self:flex-end; }
            .mb{ padding:0;align-items:flex-end; }
        }

/* Insignia de calificación junto al nombre del negocio */
.rating{ display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;
         color:var(--text);text-decoration:none;background:var(--card);border:1px solid var(--line);
         border-radius:999px;padding:5px 13px;transition:border-color .14s ease; }
.rating:hover{ border-color:var(--b); }
.rating .i{ color:#f59e0b; }
.rating b{ font-weight:800; }
.rating span{ color:var(--muted);font-size:12.5px; }

/* Bloque de reseñas */
.reviews{ margin-top:34px; }
.reviews .box-p{ min-height:80px; }

/* ═══ Ficha del negocio (portada contenida, no a sangre) ═══ */
.cover{ position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
        aspect-ratio:21/8;background:var(--card);margin-bottom:16px; }
.cover img{ width:100%;height:100%;object-fit:cover;display:block; }
.cover-ph{ width:100%;height:100%;
           background:linear-gradient(120deg,var(--b),color-mix(in srgb,var(--b) 45%,#0ea5e9)); }
.cover::after{ content:'';position:absolute;inset:auto 0 0 0;height:42%;
               background:linear-gradient(180deg,transparent,rgba(8,12,18,.22));pointer-events:none; }
.cover-share{ position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
              background:rgba(255,255,255,.94);color:var(--text);display:flex;align-items:center;
              justify-content:center;z-index:2;box-shadow:0 2px 10px rgba(16,24,40,.2);
              transition:background-color .14s ease,color .14s ease; }
.cover-share:hover{ background:var(--b);color:#fff; }
.cover-share .i{ width:15px;height:15px; }

.biz{ display:flex;gap:18px;align-items:flex-start;margin-bottom:26px; }
.biz-logo{ width:112px;height:112px;flex-shrink:0;border-radius:16px;background:var(--card);
           border:1px solid var(--line);box-shadow:var(--sh);padding:11px;
           display:flex;align-items:center;justify-content:center;
           margin-top:-46px;position:relative;z-index:2; }
.biz-logo img{ width:100%;height:100%;object-fit:contain; }
.biz-info{ min-width:0;flex:1;padding-top:2px; }
.biz-n{ font-size:24px;font-weight:800;margin:0;letter-spacing:-.03em;line-height:1.2; }
.biz-meta{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px; }
.biz-d{ font-size:13.5px;color:var(--muted);line-height:1.65;margin:11px 0 0;max-width:68ch; }
.biz-more{ background:none;border:none;color:var(--b);font-weight:700;font-size:12.5px;
           cursor:pointer;padding:5px 0 0;font-family:inherit; }

@media (max-width:620px){
    .cover{ aspect-ratio:16/9;margin-bottom:12px; }
    .biz{ flex-direction:column;gap:12px;align-items:stretch; }
    .biz-logo{ width:86px;height:86px;margin-top:-40px; }
    .biz-n{ font-size:20px; }
}

/* ═══ Fecha de nacimiento en tres casillas ═══
   Se pide así y no con un calendario a propósito: en el móvil, navegar un
   datepicker hasta 1985 son muchos toques; escribir 18 02 1993 es inmediato. */
.dob{ display:flex;align-items:center;gap:8px; }
.dob input{ text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em;padding:12px 6px; }
.dob input#bD,.dob input#bM{ width:72px;flex:0 0 72px; }
.dob input#bY{ width:104px;flex:0 0 104px; }
.dob-s{ color:var(--muted);font-weight:700;user-select:none; }
.dob-h{ font-size:12px;color:var(--muted);margin-top:7px; }
.dob-h.err{ color:#dc2626;font-weight:600; }
.dob input.bad{ border-color:#dc2626; }
@media (max-width:380px){
    .dob input#bD,.dob input#bM{ width:60px;flex:0 0 60px; }
    .dob input#bY{ width:88px;flex:0 0 88px; }
}

/* ═══ Enlace/iframe de UN servicio ═══════════════════════════════════════════
   Misma tarjeta de reserva de siempre, pero deja de ser una ventana flotante
   y se queda fija en la página: dentro de un iframe un velo a pantalla completa
   con una ventana encima no tiene ningún sentido. */
body.solo{ background:var(--page); }
/* Dentro de un iframe NUNCA debe haber barra horizontal. */
body.embed, body.embed html{ overflow-x:hidden; }
/* Mientras se reserva dentro del iframe, el catálogo se aparta: la tarjeta
   pasa a ser la página, igual que en el enlace de un solo servicio. Si se
   quedara flotando (position:fixed) se centraría en mitad de un iframe muy
   alto y el visitante ni la vería. */
body.is-booking > .wrap{ display:none; }
body.solo .wrap{ max-width:520px;padding-bottom:0; }
.solo-top{ display:flex;align-items:center;justify-content:center;gap:11px;padding:20px 0 14px; }
.solo-logo{ width:38px;height:38px;border-radius:11px;object-fit:cover;background:var(--card);flex-shrink:0; }
.solo-top-n{ font-size:16px;font-weight:750;letter-spacing:-.01em; }
.solo-top-b{ display:flex;flex-direction:column;align-items:flex-start;min-width:0; }
.solo-rating{ margin-top:5px;padding:3px 11px;font-size:12.5px;gap:5px; }
.solo-rating .i{ width:13px;height:13px; }
.solo-reviews{ margin-top:4px; }
body.solo .mb, body.is-booking .mb{ display:block;position:static;inset:auto;background:none;z-index:auto;
               max-width:520px;margin:0 auto;padding:18px 16px 24px;animation:none; }
body.solo .mo, body.is-booking .mo{ max-width:100%;max-height:none;border-radius:20px;align-self:auto;
               box-shadow:var(--sh);animation:none; }
body.solo .mo-b, body.is-booking .mo-b{ overflow:visible;flex:none; }
body.solo .mo-x{ display:none; }         /* no hay nada que cerrar */
/* En el iframe sí: la X devuelve al catálogo. */
body.is-booking .mo-x{ display:block; }
body.solo .foot{ margin-top:0; }
@media (max-width:560px){
    body.solo .mb, body.is-booking .mb{ padding:12px 12px 20px; }
    body.solo .mo, body.is-booking .mo{ border-radius:18px; }
}
.foot-l{ color:inherit;text-decoration:underline;text-underline-offset:2px; }
.foot-l:hover{ color:var(--b); }

/* ═══ Descripción y video del servicio, dentro de la reserva ═════════════════
   Van antes del calendario: es donde el cliente decide si esto era lo que
   buscaba. El marco del video toma el color de marca del negocio — el mismo
   que pinta el calendario, los días y los botones. */
.mo-d{ font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 14px;overflow-wrap:anywhere; }
/* Con el formato del mini editor: párrafos, listas, alineación y tamaños. */
.mo-d p, .mo-d div{ margin:0 0 .5em; }
.mo-d ul, .mo-d ol{ margin:0 0 .5em 1.3em;padding:0; }
.mo-d > :last-child{ margin-bottom:0; }
.mo-d strong{ color:var(--text); }
/* Recogida en dos líneas; «Ver más» la despliega. */
.mo-d.is-clamp:not(.is-open){ max-height:3.2em;overflow:hidden;position:relative;margin-bottom:4px; }
.mo-d.is-clamp.has-more:not(.is-open)::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1.5em;background:linear-gradient(to bottom, transparent, var(--card));pointer-events:none; }
.mo-more{ display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:2px 0;margin:0 0 14px;color:var(--b);font-weight:750;font-size:12.5px;cursor:pointer; }
.mo-more:hover{ text-decoration:underline;text-underline-offset:2px; }
.mo-more[hidden]{ display:none; }
.mo-s:empty{ display:none; }
/* Duración y valor, en tarjetas. */
.mo-facts{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px; }
.mo-facts:empty{ display:none; }
.mo-fact{ display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:16px;background:var(--b-soft);min-width:0; }
.mo-fact-i{ width:38px;height:38px;border-radius:12px;background:var(--card);color:var(--b);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px var(--b-sh); }
.mo-fact-i .i{ width:17px;height:17px; }
.mo-fact b{ display:block;font-size:17px;font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mo-fact small{ display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px; }
@media (max-width:380px){ .mo-fact{ padding:10px;gap:9px; } .mo-fact b{ font-size:15.5px; } .mo-fact-i{ width:34px;height:34px; } }
/* Catálogo: «Leer más» muestra el texto con sus saltos de línea. */
.svc-d{ white-space:pre-line; }
.vid{ margin:0 0 17px; }
.vid-f{ position:relative;padding-top:56.25%;   /* 16:9 sin saber el alto del video */
        border-radius:16px;overflow:hidden;background:#0b0f14;
        border:2px solid var(--b);box-shadow:0 0 0 4px var(--b-soft), 0 10px 26px var(--b-sh); }
.vid-f iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; }
@media (max-width:560px){ .vid-f{ border-radius:14px;box-shadow:0 0 0 3px var(--b-soft); } }

/* Servicio sin costo: «Gratis» como distintivo, no como un precio raro. */
.svc-p.free{ font-size:14px;background:var(--b-soft);border-radius:999px;padding:4px 13px; }

/* Distintivo de que el servicio trae video */
.tag-v{ color:var(--b);background:var(--b-soft); }

/* ═══ Buscando horarios: esqueleto ══════════════════════════════════════════
   Unas fichas grises con brillo en vez de la frase "Buscando horarios…": se ve
   de una que ALLÍ van a aparecer las horas, y el salto al llegar es menor. */
.sk{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
@media (max-width:380px){ .sk{ grid-template-columns:repeat(2,1fr); } }
.sk i{
    display:block;height:44px;border-radius:12px;
    background:linear-gradient(90deg,#e9edf0 25%,#f5f8fa 50%,#e9edf0 75%);
    background-size:220% 100%;animation:skw 1.15s linear infinite;
}
.sk i:nth-child(2){ animation-delay:.09s } .sk i:nth-child(3){ animation-delay:.18s }
.sk i:nth-child(4){ animation-delay:.27s } .sk i:nth-child(5){ animation-delay:.36s }
.sk i:nth-child(6){ animation-delay:.45s }
@keyframes skw{ from{ background-position:220% 0 } to{ background-position:-220% 0 } }

/* ═══ Día sin cupo ══════════════════════════════════════════════════════════
   Antes era un "Sin horarios este día" seco. Ahora se dice POR QUÉ y se ofrece
   la salida: saltar al próximo día que sí tenga hueco. */
/* #slots es una rejilla de 3 columnas: sin esto, el mensaje y el esqueleto
   caían DENTRO de una celda y salía todo estrujado en un tercio del ancho,
   con el texto partido palabra por palabra. */
#slots > .ns, #slots > .sk{ grid-column:1 / -1; }
.ns{
    text-align:center;padding:30px 10px 24px;animation:nsin .22s ease;
    display:flex;flex-direction:column;align-items:center;
}
@keyframes nsin{ from{ opacity:0;transform:translateY(6px) } to{ opacity:1;transform:none } }
.ns-ic{
    width:72px;height:72px;border-radius:50%;margin:0 0 15px;display:flex;align-items:center;
    justify-content:center;font-size:32px;background:var(--b-soft);flex-shrink:0;
    box-shadow:0 0 0 9px rgba(16,24,40,.022), 0 8px 22px var(--b-sh);
}
.ns-t{
    font-size:17px;font-weight:750;color:var(--text);letter-spacing:-.02em;margin:0 0 7px;
    line-height:1.3;text-wrap:balance;   /* que no parta el título en una palabra suelta */
}
.ns-d{ font-size:13px;color:var(--muted);line-height:1.6;max-width:31ch;margin:0;text-wrap:pretty; }
.ns-b{
    margin-top:18px;background:var(--card);border:1.5px solid var(--b);color:var(--b);
    border-radius:13px;padding:11px 18px;font-size:13.5px;font-weight:750;cursor:pointer;
    font-family:inherit;transition:all .15s ease;display:inline-flex;align-items:center;
    justify-content:center;gap:8px;white-space:nowrap;max-width:100%;
}
.ns-b:hover{ background:var(--b);color:#fff; }
.ns-b:disabled{ opacity:.65;cursor:progress; }

/* ═══ Ajustes del modo incrustado ═══════════════════════════════════════════ */
/* Sin barra de scroll dentro del marco: con el alto automático no hay nada que
   deslizar, y si algo se descuadra es preferible que no aparezca la barra. */
body.embed, body.embed::-webkit-scrollbar{ scrollbar-width:none; }
body.embed::-webkit-scrollbar, html:has(body.embed)::-webkit-scrollbar{ width:0;height:0;display:none; }

/* El calendario de UN servicio se incrusta sin fondo, para que se funda con la
   web que lo aloja. El catálogo completo sí conserva el suyo: ahí el fondo
   separa unas tarjetas de otras. */
body.embed.solo{ background:transparent; }
body.embed.solo .wrap{ padding-top:0; }
body.embed.solo .mb{ padding-top:0; }

/* Si el negocio eligió un color de fondo, se respeta también al incrustarlo.
   Sin color, el calendario de un servicio va transparente para fundirse con la
   web que lo aloja (regla body.embed.solo de más arriba). */
body.embed.solo.has-bg{ background:var(--page); }

/* Catálogo incrustado: junto a la ficha lateral los servicios van en una columna y, donde
   la ficha termina, pasan a dos columnas y llenan el hueco de debajo. La columna de
   servicios, #results y cada .grid se aplanan (display:contents) para que títulos y
   tarjetas sean celdas de la misma grilla que la ficha; cuántas filas ocupa la ficha lo
   mide agpFlow() en site.js, que es quien pone la clase flow2. Solo en el iframe: por la
   URL directa la ficha acompaña al bajar (sticky) y ese hueco no existe. */
@media (min-width:901px){
    body.embed.flow2 .cols{ row-gap:14px; }
    body.embed.flow2 .cols > div, body.embed.flow2 #results, body.embed.flow2 #results > .grid{ display:contents; }
    body.embed.flow2 .aside{ grid-column:2;align-self:start; }
    /* Con el gap de la grilla (14) quedan los mismos 26 arriba y 13 abajo de siempre. */
    body.embed.flow2 .sec-t{ margin:12px 0 -1px; }
    body.embed.flow2 .sec-t.is-wide{ grid-column:1 / -1; }
    body.embed.flow2 .svc{ align-self:stretch; }
}

/* ═══ Preguntas de una en una ═══════════════════════════════════════════════ */
.q-paso{ font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--b);margin-bottom:5px; }
.q-next{
    margin-top:9px;background:var(--b-soft);border:1.5px solid var(--b);color:var(--b);
    border-radius:11px;padding:9px 18px;font-size:13.5px;font-weight:750;cursor:pointer;font-family:inherit;
}
.q-next:hover{ background:var(--b);color:#fff; }
.q-falta{ font-size:12px;color:#b42318;margin-top:7px;font-weight:650; }
.q{ animation:qin .22s ease; }
@keyframes qin{ from{ opacity:0;transform:translateY(6px) } to{ opacity:1;transform:none } }
.q-pies{ display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap; }
.q-back{
    background:none;border:1.5px solid var(--line);color:var(--muted);border-radius:11px;
    padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.q-back:hover{ border-color:var(--muted);color:var(--text); }

        /* ═══ Zona horaria del visitante ═══════════════════════════════════
           Solo sale cuando el reloj del visitante NO coincide con el del
           negocio: si coinciden no hay nada que explicar y una barra de más
           en la pantalla donde se elige la hora solo estorba. */
        .tzb{
            display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;
            background:var(--bg);border-radius:14px;flex-wrap:wrap;
        }
        .tzb > .i{ width:16px;height:16px;color:var(--b);flex-shrink:0; }
        .tzb-t{ flex:1;min-width:150px;font-size:12.5px;line-height:1.45;color:var(--muted); }
        .tzb-t b{ color:var(--text);font-weight:750; }
        .tzb-b{ display:block;font-size:11.5px;color:var(--muted);margin-top:2px; }
        .tzb-s{
            flex-shrink:0;border:1px solid var(--line);background:var(--card);
            border-radius:9px;padding:7px 9px;font-size:12px;font-family:inherit;
            color:var(--text);cursor:pointer;max-width:100%;
        }
        .tzb-s:focus{ outline:none;border-color:var(--b); }

        /* La hora del negocio dentro del resumen, en segundo plano respecto a
           la del cliente: la suya es la que tiene que retener. */
        .sum-tz b{ color:var(--muted);font-weight:650;font-size:12.5px; }
.mo-d b, .mo-d strong{ font-weight:700; }