/* La agenda propia de Ianora · la página de reserva · rediseño del 26-10-2026 (SET-23).
   Claro, como el resto de Ianora: los valores son los TOKENS de KeyClosers-ops/dashboards/brand/marca.js, y el movimiento, el de la
   casa (public/index.html del Setter: rápido para lo que responde a un dedo, y la curva que aterriza en vez de pararse de golpe).
   Nada de partículas ni de resplandores (docs/brand/ianora-light.md §8): lo que se mueve explica algo — lo elegido se queda arriba
   como hecho, lo siguiente se abre, la barra avanza con cada respuesta. Quien pide menos movimiento se queda sin él (al final). */
:root{
  --ia-violeta:#8B5CF6; --ia-azul:#3B82F6; --ia-acento:#6D28D9; --ia-grad:linear-gradient(94deg,#8B5CF6,#3B82F6);
  --ia-fondo:#F5F5F8; --ia-sup:#FFFFFF; --ia-sup2:#F0F0F5; --ia-linea:rgba(20,20,40,.11); --ia-sobre:#FFFFFF;
  --ia-texto:#16161F; --ia-texto2:#3C3C4E; --ia-suave:#5E5E70; --ia-ok:#047857; --ia-aviso:#A1540A; --ia-error:#C81E1E;
  --ia-s1:0 1px 2px rgba(20,20,40,.055); --ia-s2:0 4px 14px -4px rgba(20,20,40,.09); --ia-s3:0 16px 38px -14px rgba(20,20,40,.15);
  --ia-sf:0 28px 70px -22px rgba(20,20,40,.26); --ia-velo:rgba(22,22,31,.42);
  --ia-r:14px; --ia-rg:20px; --ia-rp:10px; --ia-rs:8px;
  --ia-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rapido:.18s; --medio:.3s; --curva:cubic-bezier(.19,1,.22,1); --curva-ui:cubic-bezier(.45,.05,.55,.95);
  /* el verde de WhatsApp: solo de fondo y con el texto oscuro encima (9:1); con blanco no llega a 2:1. El texto, fijo: en oscuro también */
  --wa:#25D366; --wa-texto:#16161F;
  color-scheme:light;
}
/* 28-10 (a petición de Rebranding): en oscuro, para la web que la incrusta en oscuro (?tema=oscuro) o, con ?tema=auto, si el sistema lo
   pide. Los valores son los de TOKENS_OSCURO (KeyClosers-ops/dashboards/brand/marca.js). Con color-scheme:dark, el navegador deja el
   iframe transparente dentro de una página oscura; con «light» pinta detrás un bloque blanco. */
html[data-tema="oscuro"]{--ia-acento:#A78BFA; --ia-fondo:#0A0A0F; --ia-sup:#111119; --ia-sup2:#16161F; --ia-linea:rgba(255,255,255,.09);
  --ia-texto:#EDEDF2; --ia-texto2:#AEB6C6; --ia-suave:#8891A4; --ia-ok:#34D399; --ia-aviso:#FBBF24; --ia-error:#F87171; --ia-velo:rgba(0,0,0,.6);
  --ia-s1:0 1px 2px rgba(0,0,0,.4); --ia-s2:0 4px 14px -4px rgba(0,0,0,.55); --ia-s3:0 16px 38px -14px rgba(0,0,0,.7); --ia-sf:0 28px 70px -22px rgba(0,0,0,.8);
  color-scheme:dark}
@media (prefers-color-scheme:dark){
  html[data-tema="auto"]{--ia-acento:#A78BFA; --ia-fondo:#0A0A0F; --ia-sup:#111119; --ia-sup2:#16161F; --ia-linea:rgba(255,255,255,.09);
    --ia-texto:#EDEDF2; --ia-texto2:#AEB6C6; --ia-suave:#8891A4; --ia-ok:#34D399; --ia-aviso:#FBBF24; --ia-error:#F87171; --ia-velo:rgba(0,0,0,.6);
    --ia-s1:0 1px 2px rgba(0,0,0,.4); --ia-s2:0 4px 14px -4px rgba(0,0,0,.55); --ia-s3:0 16px 38px -14px rgba(0,0,0,.7); --ia-sf:0 28px 70px -22px rgba(0,0,0,.8);
    color-scheme:dark}
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ia-fondo); color:var(--ia-texto); font:15px/1.5 var(--ia-sans); -webkit-font-smoothing:antialiased;
  padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
body.con-wa{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--ia-acento)}
:focus-visible{outline:2px solid var(--ia-acento); outline-offset:2px}
/* lo que solo oye un lector de pantalla. Arriba del todo y sin márgenes (28-10): al final de la página, sus márgenes de <p> la alargaban
   15 px y la página incrustada salía con barra de desplazamiento dentro del iframe */
.sr{position:absolute; top:0; left:0; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.i .relleno{fill:currentColor; stroke:none}

/* ───── la casa ───── */
.barra,.caja,.pie{max-width:580px; margin-left:auto; margin-right:auto}
.barra{display:flex; align-items:center; margin-bottom:14px; padding:0 4px}
.logo{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:16px; letter-spacing:-.02em; color:var(--ia-texto)}
.logo svg{width:24px; height:24px}
.caja{position:relative; overflow:hidden; background:var(--ia-sup); border:1px solid var(--ia-linea); border-radius:var(--ia-rg); box-shadow:var(--ia-s3); padding:26px 26px 24px}
.pie{margin-top:14px; text-align:center; font-size:12.5px; color:var(--ia-suave)}
.pie a{color:inherit; text-decoration:none} .pie a:hover{text-decoration:underline}

/* la barra de arriba: avanza con cada paso y con cada dato */
.progreso{position:absolute; left:0; right:0; top:0; height:3px; background:var(--ia-sup2)}
.progreso i{display:block; height:100%; background:var(--ia-grad); transform:scaleX(var(--p,0)); transform-origin:left center; transition:transform .7s var(--curva)}

.cab{display:flex; align-items:center; gap:12px}
.avatar{width:46px; height:46px; flex:none; border-radius:99px; background:var(--ia-grad); color:var(--ia-sobre); display:grid; place-items:center; font-weight:700; font-size:19px; box-shadow:var(--ia-s2)}
.cab h1{margin:0; font-size:17px; line-height:1.3; font-weight:600; letter-spacing:-.01em}
.cab .meta{margin:2px 0 0; font-size:13.5px; color:var(--ia-texto2); display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.pastilla{display:inline-flex; align-items:center; padding:1px 9px; border-radius:99px; font-size:12px; font-weight:600; color:var(--ia-suave); background:color-mix(in srgb, currentColor 12%, var(--ia-sup))}
.pastilla.aviso{color:var(--ia-aviso)} .pastilla.ok{color:var(--ia-ok)} .pastilla.error{color:var(--ia-error)} .pastilla.marca{color:var(--ia-acento)}

/* los pasos: lo hecho lleva su marca, lo de ahora el degradado, la raya entre ellos se llena al avanzar */
.pasos{display:flex; align-items:center; list-style:none; padding:0; margin:22px 0 0; gap:0}
.pasos li{display:flex; align-items:center; flex:1; gap:8px; font-size:12.5px; font-weight:600; color:var(--ia-suave); white-space:nowrap}
.pasos li:first-child{flex:0 0 auto}
.pasos li+li::before{content:""; flex:1; height:2px; margin:0 10px; border-radius:2px; background:linear-gradient(94deg,var(--ia-violeta),var(--ia-azul)) no-repeat 0 0/0% 100%, var(--ia-sup2); transition:background-size .6s var(--curva)}
.pasos li.hecho::before,.pasos li.actual::before{background-size:100% 100%, auto}
.pasos b{width:24px; height:24px; flex:none; border-radius:99px; display:grid; place-items:center; font-size:12px; border:1.5px solid var(--ia-linea); background:var(--ia-sup); color:var(--ia-suave); transition:background-color var(--medio), border-color var(--medio), color var(--medio)}
.pasos b .i{width:13px; height:13px; stroke-width:3}
.pasos li.actual{color:var(--ia-texto)}
.pasos li.actual b{border-color:transparent; background:var(--ia-grad); color:var(--ia-sobre); animation:ag-pop .45s var(--curva)}
.pasos li.hecho{color:var(--ia-texto2)}
.pasos li.hecho b{border-color:transparent; background:color-mix(in srgb, var(--ia-violeta) 12%, var(--ia-sup)); color:var(--ia-acento)}
.pasos[hidden]{display:none}

/* ───── cada paso ───── */
.paso{margin-top:6px}
.pregunta{display:block; margin:24px 0 6px; font-size:clamp(22px,5.4vw,26px); line-height:1.16; letter-spacing:-.025em; font-weight:600; color:var(--ia-texto)}
.pregunta:focus{outline:none}
.pregunta small{font-size:15px; font-weight:500; color:var(--ia-suave); letter-spacing:0}
.sub{margin:0 0 16px; color:var(--ia-texto2); font-size:14.5px}

/* lo ya elegido: se queda arriba, hecho, con su «cambiar» */
.elegidos{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:20px}
.elegidos:empty{display:none}
.fila{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 8px 8px 12px; border-radius:var(--ia-rp); background:var(--ia-sup2); font-weight:600; font-size:14.5px}
.fila .ok{width:22px; height:22px; flex:none; border-radius:99px; background:var(--ia-grad); color:var(--ia-sobre); display:grid; place-items:center}
.fila .ok .i{width:13px; height:13px; stroke-width:3}
/* en dos líneas como mucho: la hora no se puede cortar, y una respuesta larga se queda en su resumen */
.fila .txt{flex:1; min-width:0; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.35}
.cambiar{all:unset; cursor:pointer; flex:none; padding:6px 8px; border-radius:var(--ia-rs); font-size:13px; font-weight:600; color:var(--ia-acento)}
.cambiar:hover{background:color-mix(in srgb, var(--ia-violeta) 10%, var(--ia-sup))}
.cambiar:focus-visible{outline:2px solid var(--ia-acento)}

/* los días: tres como mucho a la vista */
.dias{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:10px; margin-top:18px}
.dia,.parte,.hora{all:unset; box-sizing:border-box; cursor:pointer; position:relative; background:var(--ia-sup); border:1px solid var(--ia-linea); box-shadow:var(--ia-s1);
  transition:transform var(--rapido) var(--curva-ui), box-shadow var(--rapido) var(--curva-ui), border-color var(--medio) var(--curva-ui), background-color var(--rapido) var(--curva-ui)}
.dia{display:flex; flex-direction:column; align-items:flex-start; padding:14px 12px 12px 14px; border-radius:var(--ia-r); min-width:0}
.dia:hover,.parte:hover{transform:translateY(-2px); box-shadow:var(--ia-s3); border-color:color-mix(in srgb, var(--ia-violeta) 45%, var(--ia-linea))}
.dia .rel{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ia-suave); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dia .rel.hoy{color:var(--ia-acento)}
.dia .num{margin-top:4px; font-size:36px; line-height:1; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.dia .mes{margin-top:2px; font-size:13.5px; color:var(--ia-texto2)}
.dia .cuantos{margin-top:10px; font-size:12px; font-weight:500; color:var(--ia-suave)}
.dia .cuantos.pocos{color:var(--ia-aviso); font-weight:600}
/* la línea del día: lo libre, en degradado; crece al entrar (explica que se está leyendo la agenda) */
.dia .linea{display:block; width:100%; margin-top:8px}
.dia .pista{position:relative; display:block; height:4px; border-radius:99px; background:var(--ia-sup2); overflow:hidden}
.dia .pista i{position:absolute; top:0; bottom:0; background:var(--ia-grad) no-repeat; transform-origin:left center; animation:ag-crece .7s var(--curva) both; animation-delay:calc(var(--i,0) * 70ms + 160ms)}
.dia .extremos{display:flex; justify-content:space-between; margin-top:4px; font-size:10.5px; font-weight:500; color:var(--ia-suave); font-variant-numeric:tabular-nums}
.dia:focus-visible,.parte:focus-visible,.hora:focus-visible{outline:2px solid var(--ia-acento); outline-offset:2px}
/* lo pulsado: borde de degradado y su marca, un instante antes de pasar al siguiente */
.dia[aria-pressed="true"],.parte[aria-pressed="true"]{border-color:transparent; background:linear-gradient(var(--ia-sup),var(--ia-sup)) padding-box, var(--ia-grad) border-box; box-shadow:var(--ia-s3)}
.dia[aria-pressed="true"]::after{content:""; position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:99px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat, var(--ia-grad);
  animation:ag-pop .3s var(--curva)}
.mas{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 8px; margin-left:-8px; border-radius:var(--ia-rs); font-size:14px; font-weight:600; color:var(--ia-acento)}
.mas:hover{background:color-mix(in srgb, var(--ia-violeta) 10%, var(--ia-sup))}

/* mañana, tarde o noche: primero el momento; las horas, después */
.partes{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:10px; margin-top:18px}
.parte{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px; border-radius:var(--ia-r)}
.parte .i{width:22px; height:22px; color:var(--ia-acento); margin-bottom:6px}
.parte b{font-size:15.5px; font-weight:600}
.parte span{font-size:12.5px; color:var(--ia-suave)}
.partes.compactas{margin-top:14px; gap:6px; padding:4px; border-radius:var(--ia-r); background:var(--ia-sup2)}
.partes.compactas .parte{flex-direction:row; align-items:center; justify-content:center; gap:7px; padding:8px 6px; border-radius:var(--ia-rp); border-color:transparent; box-shadow:none; background:transparent}
.partes.compactas .parte .i{width:17px; height:17px; margin:0}
.partes.compactas .parte b{font-size:14px}
.partes.compactas .parte span{display:none}
.partes.compactas .parte:hover{transform:none; box-shadow:none; border-color:transparent; background:color-mix(in srgb, var(--ia-sup) 70%, transparent)}
.partes.compactas .parte[aria-pressed="true"]{background:var(--ia-sup); box-shadow:var(--ia-s2); border-color:var(--ia-linea)}

.horas{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:16px}
.hora{text-align:center; padding:13px 4px; border-radius:var(--ia-rp); font-weight:600; font-size:15.5px; font-variant-numeric:tabular-nums}
.hora:hover{transform:translateY(-1px); border-color:color-mix(in srgb, var(--ia-violeta) 45%, var(--ia-linea))}
.hora[aria-pressed="true"]{background:var(--ia-grad); color:var(--ia-sobre); border-color:transparent; box-shadow:var(--ia-s2)}

.zona-linea{margin:18px 0 0; font-size:13px; color:var(--ia-suave); display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.zona-linea button{all:unset; cursor:pointer; color:var(--ia-acento); font-weight:600; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
.zona-linea select{border:1px solid var(--ia-linea); background:var(--ia-sup2); border-radius:var(--ia-rs); padding:5px 8px; max-width:100%}

/* tus datos: una pregunta cada vez */
.campo-grande{display:flex; gap:8px; margin-top:14px}
.campo-grande input,.campo-grande textarea{flex:1; min-width:0; font-size:17px; padding:13px 14px; border-radius:var(--ia-rp); border:1.5px solid var(--ia-linea); background:var(--ia-sup2);
  transition:border-color var(--rapido), background-color var(--rapido), box-shadow var(--rapido)}
.campo-grande textarea{min-height:56px; resize:vertical; line-height:1.4}
.campo-grande input:focus,.campo-grande textarea:focus{outline:none; border-color:var(--ia-violeta); background:var(--ia-sup); box-shadow:0 0 0 4px color-mix(in srgb, var(--ia-violeta) 14%, transparent)}
.campo-grande.mal input,.campo-grande.mal textarea{border-color:var(--ia-error); box-shadow:0 0 0 4px color-mix(in srgb, var(--ia-error) 12%, transparent); animation:ag-no .32s var(--curva-ui)}
.siguiente{all:unset; box-sizing:border-box; cursor:pointer; width:54px; flex:none; border-radius:var(--ia-rp); background:var(--ia-grad); color:var(--ia-sobre); display:grid; place-items:center; box-shadow:var(--ia-s2); transition:transform var(--rapido) var(--curva-ui)}
.siguiente:active{transform:scale(.96)}
.siguiente .i{width:20px; height:20px}
.ayuda{margin:8px 0 0; font-size:13px; color:var(--ia-suave)}
.fallo{margin:8px 0 0; font-size:13.5px; font-weight:500; color:var(--ia-error)}
.saltar{all:unset; cursor:pointer; margin-top:12px; padding:6px 8px; margin-left:-8px; border-radius:var(--ia-rs); font-size:14px; font-weight:600; color:var(--ia-acento)}
.saltar:hover{background:color-mix(in srgb, var(--ia-violeta) 10%, var(--ia-sup))}

/* el motivo de una cancelación (opcional): tres rápidos, uno elegido a la vez */
.motivos{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.motivo{all:unset; box-sizing:border-box; cursor:pointer; padding:9px 14px; border-radius:99px; border:1px solid var(--ia-linea); background:var(--ia-sup); font-size:14px; font-weight:500; color:var(--ia-texto2);
  transition:border-color var(--medio) var(--curva-ui), color var(--rapido)}
.motivo:hover{border-color:color-mix(in srgb, var(--ia-violeta) 45%, var(--ia-linea))}
.motivo:focus-visible{outline:2px solid var(--ia-acento); outline-offset:2px}
.motivo[aria-pressed="true"]{border-color:transparent; background:linear-gradient(var(--ia-sup),var(--ia-sup)) padding-box, var(--ia-grad) border-box; color:var(--ia-acento); font-weight:600}
[data-otra-hora]{margin-top:12px}

/* ───── mensajes ───── */
.mensaje{margin:18px 0 0; padding:12px 14px; border-radius:var(--ia-rp); font-size:14px; color:var(--ia-texto2); background:var(--ia-sup2)}
.mensaje.aviso{color:var(--ia-aviso); background:color-mix(in srgb, var(--ia-aviso) 10%, var(--ia-sup))}
.mensaje.error{color:var(--ia-error); background:color-mix(in srgb, var(--ia-error) 8%, var(--ia-sup))}
.aviso-pruebas{margin:16px 0 0; padding:10px 12px; border-radius:var(--ia-rp); font-size:13.5px; color:var(--ia-aviso); background:color-mix(in srgb, var(--ia-aviso) 10%, var(--ia-sup)); border:1px solid color-mix(in srgb, var(--ia-aviso) 26%, var(--ia-sup))}
.estado{margin:10px 0 0; font-size:13.5px; color:var(--ia-texto2); min-height:1.5em}
.estado.mal{color:var(--ia-error)}
.carga{display:grid; gap:12px; padding:4px 0}
.carga i{display:block; height:16px; border-radius:var(--ia-rs); background:var(--ia-sup2); animation:ag-respira 1.4s ease-in-out infinite}
.carga i:nth-child(1){width:52%; height:22px}
.carga i:nth-child(2){width:78%; animation-delay:.15s}
.carga i:nth-child(3){height:104px; border-radius:var(--ia-r); animation-delay:.3s}

/* ───── botones ───── */
.btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border-radius:var(--ia-rp); white-space:nowrap;
  font-weight:600; border:1px solid var(--ia-linea); background:var(--ia-sup); color:var(--ia-texto); box-shadow:var(--ia-s1); transition:transform var(--rapido) var(--curva-ui), border-color var(--medio)}
.btn:hover{border-color:color-mix(in srgb, var(--ia-violeta) 45%, var(--ia-linea))}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ia-acento); outline-offset:2px}
.btn.primario{background:var(--ia-grad); color:var(--ia-sobre); border-color:transparent; box-shadow:var(--ia-s2)}
.btn.grande{width:100%; min-height:54px; font-size:16px; margin-top:18px}
.btn.peligro{color:var(--ia-error); border-color:color-mix(in srgb, var(--ia-error) 35%, var(--ia-sup))}
.btn.wa{background:var(--wa); color:var(--wa-texto); border-color:transparent; box-shadow:var(--ia-s2)}
.btn.enlace{min-height:auto; padding:6px 8px; border:0; box-shadow:none; background:none; color:var(--ia-acento)}
.btn[disabled]{opacity:.55; cursor:progress}
.btn.cargando::after{content:""; width:16px; height:16px; border-radius:99px; border:2px solid currentColor; border-right-color:transparent; animation:ag-gira .7s linear infinite}
.acciones{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px}

/* ───── hecho ───── */
.listo{padding-top:6px}
.sello{display:block; width:64px; height:64px; margin:14px 0 0}
.sello circle{fill:none; stroke-width:3; stroke-dasharray:176; stroke-dashoffset:176; animation:ag-traza .8s var(--curva) .05s forwards}
.sello path{fill:none; stroke:var(--ia-acento); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:ag-traza .5s var(--curva) .5s forwards}
.listo .pregunta{margin-top:14px}
.billete{position:relative; overflow:hidden; margin-top:18px; padding:18px 18px 16px; border-radius:var(--ia-r); border:1px solid var(--ia-linea); background:var(--ia-sup); box-shadow:var(--ia-s2)}
.billete::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ia-grad)}
.billete .b-dia{font-size:14px; font-weight:600; color:var(--ia-texto2)}
.billete .b-hora{margin:2px 0 4px; font-size:36px; line-height:1.1; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.billete .b-hora span{font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ia-suave)}
.billete .b-meta{font-size:13.5px; color:var(--ia-texto2); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.gestion{margin-top:16px; padding:14px; border-radius:var(--ia-rp); background:var(--ia-sup2); font-size:13.5px; color:var(--ia-texto2); display:grid; gap:10px}
.gestion code{display:block; overflow-wrap:anywhere; font-size:12.5px; color:var(--ia-texto)}
.gestion .acciones{margin-top:0}

/* ───── WhatsApp: el botón que flota y su hoja ───── */
.wa-flot{all:unset; box-sizing:border-box; cursor:pointer; position:fixed; z-index:20; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:7px 16px 7px 7px; border-radius:99px; background:var(--ia-sup); border:1px solid var(--ia-linea); box-shadow:var(--ia-s3);
  font-size:13.5px; font-weight:600; color:var(--ia-texto); animation:ag-sube .6s var(--curva) .5s both}
.wa-flot[hidden]{display:none}
.wa-flot:hover{box-shadow:var(--ia-sf)}
.wa-flot:focus-visible{outline:2px solid var(--ia-acento); outline-offset:2px}
.wa-flot .t{white-space:nowrap}
.wa-flot .mas2{display:none; white-space:nowrap; font-weight:500; color:var(--ia-texto2)}
.wa-flot.aviso{animation:ag-llama .7s var(--curva)}
.wa-flot.aviso .mas2{display:inline}
.bola{width:34px; height:34px; flex:none; border-radius:99px; background:var(--wa); color:var(--wa-texto); display:grid; place-items:center}
.bola.grande{width:52px; height:52px}
.bola.grande .i{width:26px; height:26px}
.wa-hoja{border:0; padding:0; background:transparent; width:min(420px, calc(100% - 24px)); max-width:none; overflow:visible}
.wa-hoja::backdrop{background:var(--ia-velo)}
.wa-hoja .hoja{position:relative; background:var(--ia-sup); border-radius:var(--ia-rg); box-shadow:var(--ia-sf); padding:26px 22px 18px; animation:ag-sube .45s var(--curva) both}
.wa-hoja h2{margin:14px 0 6px; font-size:21px; line-height:1.2; letter-spacing:-.02em}
.wa-hoja p{margin:0; color:var(--ia-texto2); font-size:14.5px}
.wa-hoja .btn.grande{margin-top:18px}
.wa-hoja .btn.enlace{display:flex; margin:10px auto 0}
.cerrar{all:unset; cursor:pointer; position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:99px; display:grid; place-items:center; color:var(--ia-suave)}
.cerrar:hover{background:var(--ia-sup2)}

/* ───── el movimiento: corto y con sentido ───── */
@keyframes ag-entra{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes ag-sube{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes ag-pop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ag-pulsa{0%{transform:scale(1)}40%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes ag-llama{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(0)}80%{transform:translateY(-2px)}100%{transform:none}}
@keyframes ag-no{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes ag-traza{to{stroke-dashoffset:0}}
@keyframes ag-crece{from{transform:scaleX(0)}to{transform:none}}
@keyframes ag-respira{50%{opacity:.5}}
@keyframes ag-gira{to{transform:rotate(360deg)}}
.entra{animation:ag-entra .55s var(--curva) both; animation-delay:calc(var(--i,0) * 32ms)}
.pulsado{animation:ag-pulsa .24s var(--curva-ui)}

/* ───── incrustada en la web de un cliente (?incrustada=1): su tarjeta pone el marco; aquí ni fondo, ni márgenes, ni logo arriba ───── */
html.incrustada,html.incrustada body{background:transparent}
html.incrustada body,html.incrustada body.con-wa{padding:0 0 4px}
html.incrustada .barra{display:none}
html.incrustada .caja{max-width:none; border:0; box-shadow:none; background:transparent; padding:6px 2px 6px; border-radius:0; overflow:visible}
/* la barra de avance, incrustada, sin su carril gris: dentro de la tarjeta de otra web se veía como una raya fina encima de todo (28-10,
   Rebranding); el degradado sale igual a medida que se avanza */
html.incrustada .progreso{border-radius:99px; background:transparent}
html.incrustada .wa-flot{position:static; translate:none; display:flex; width:max-content; max-width:100%; margin:14px auto 0; box-shadow:var(--ia-s1); animation:none}
html.incrustada .wa-flot[hidden]{display:none}
html.incrustada .pie{margin-top:10px}

@media (max-width:520px){
  body{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
  body.con-wa{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .barra{margin-bottom:10px}
  .caja{padding:22px 16px 18px; border-radius:var(--ia-rg)}
  .dias,.partes{gap:8px}
  .dia{padding:12px 10px 10px 11px}
  .dia .num{font-size:32px}
  .parte{padding:12px 10px}
  .horas{grid-template-columns:repeat(3, minmax(0,1fr))}
  .pasos li{font-size:12px; gap:6px}
  .pasos li+li::before{margin:0 7px}
  html:not(.incrustada) .wa-flot{right:auto; left:50%; translate:-50% 0}
  .wa-hoja{margin:auto auto max(12px, env(safe-area-inset-bottom)); width:calc(100% - 16px)}
  .acciones{flex-direction:column; align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .sello circle,.sello path{stroke-dashoffset:0}
}