/* Chat «Domi», propuesta A «Bienvenida con foto» (Martin, 05/11/2026). Mismos tokens de la marca que la anterior. */
.domi{--cal:#FAF6EE;--tinta:#1B1812;--parra:#17212D;--oro:#D4A94F;--linea:#E3D8C2;--suave:#4A525C;--wa:#0F7A3F;--pie:#5E646C;
  position:fixed;z-index:60;right:24px;bottom:96px;width:400px;height:min(680px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;background:var(--cal);color:var(--tinta);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:var(--display,'Familjen Grotesk',Arial,sans-serif)}
.domi[hidden]{display:none}
.domi *{box-sizing:border-box}
.domi-cab{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:var(--parra);color:var(--cal);flex:none}
.domi-logo{height:24px;width:auto;display:block;flex:none}
.domi-quien{flex:1 1 0;padding-left:10px;border-left:1px solid rgba(250,246,238,.25);min-width:0}
.domi-quien b{display:block;font-weight:600;font-size:16px;line-height:1.2}
.domi-quien small{display:flex;flex-wrap:wrap;overflow:hidden;font-size:13px;line-height:1.25;opacity:.9}
.domi-wa-cab{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--wa);color:#fff}
.domi-wa-cab:hover{filter:brightness(1.1)}
.domi-quien i{font-style:normal;margin-left:-.9em;padding-left:.9em;margin-right:.9em}
.domi-quien i::before{content:"·";display:inline-block;width:.9em;margin-left:-.9em;text-align:center}
.domi-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.domi-x:hover{background:rgba(250,246,238,.1)}
/* bienvenida: el atardecer real con el logo y la X encima, y botones grandes para casi no tener que escribir */
.domi-hero,.domi-opts{display:none}
.domi-ini .domi-cab{position:absolute;inset:0 0 auto;z-index:1;background:transparent;padding:10px 8px 10px 16px;justify-content:space-between}
.domi-ini .domi-logo{height:30px}
.domi-ini .domi-quien,.domi-ini .domi-wa-cab,.domi-ini .domi-m{display:none}
.domi-ini{height:auto;max-height:calc(100vh - 120px)}
.domi-ini .domi-hero{display:flex;flex-direction:column;justify-content:flex-end;flex:0 1 auto;min-height:0;aspect-ratio:5/4;max-height:40dvh;padding:104px 16px 18px;color:#fff;background:linear-gradient(180deg,rgba(23,33,45,.45) 0,rgba(23,33,45,0) 28%,rgba(23,33,45,0) 42%,rgba(23,33,45,.82) 78%),url(fotos-agente/atardecer.jpg) center 40%/cover no-repeat var(--parra)}
.domi-hola{margin:0;font:600 28px/1.12 var(--display,'Familjen Grotesk',Arial,sans-serif);color:#fff;text-wrap:balance}
.domi-hola-sub{margin:6px 0 0;font-size:16px;line-height:1.35;color:#fff}
.domi-hola-sub span{display:block}
.domi-ini .domi-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px}
.domi-op{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:8px 6px;border-radius:13px;border:1px solid var(--linea);background:#fff;color:var(--parra);font:600 15px/1.2 var(--display,'Familjen Grotesk',Arial,sans-serif);text-align:center;text-decoration:none;cursor:pointer}
.domi-op:hover{background:#F3E7CC}
.domi-op-p{grid-column:1/-1;flex-direction:column;gap:2px;min-height:64px;border:0;background:var(--parra);color:var(--cal)}
.domi-op-p:hover{background:#22303F}
.domi-op-p b{font-weight:600;font-size:17px}
.domi-op-p small{font-weight:400;font-size:14px;opacity:.9}
.domi-op-wa{grid-column:1/-1;min-height:48px;border-color:var(--wa);color:var(--wa)}
.domi-op-wa:hover{background:#E8F4EC}
.domi-op-wa svg{flex:none}
.domi-de{display:block;margin-bottom:2px;font:600 13px/1.3 var(--display,'Familjen Grotesk',Arial,sans-serif);color:var(--suave)}
.domi-m{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:8px}
.domi-m>:first-child{margin-top:auto}
.domi-f{display:flex;flex-shrink:0}
.domi-yo{justify-content:flex-end}
.domi-b{max-width:86%;padding:10px 14px;border-radius:18px;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.domi-b p{margin:0}.domi-b p+p{margin-top:.5em}
.domi-bot .domi-b{background:#fff;color:var(--tinta);border-bottom-left-radius:6px;box-shadow:0 1px 3px rgba(23,33,45,.14)}
.domi-bot .domi-b a{color:var(--parra);text-decoration:underline}
.domi-yo .domi-b{background:var(--parra);color:var(--cal);border-bottom-right-radius:6px}
/* tarjetas en carrusel: la siguiente asoma para que se note que hay más */
.domi-rail{display:flex;gap:8px;flex-shrink:0;margin-right:-14px;padding:0 14px 4px 0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.domi-rail .domi-tar{flex:none;width:min(240px,74%);scroll-snap-align:start}
.domi-rail-1 .domi-tar{width:86%}
.domi-tar{flex-shrink:0;width:86%;border-radius:16px;overflow:hidden;background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.domi-tar img{display:block;width:100%;height:120px;object-fit:cover}
.domi-c{padding:12px 14px 14px}
.domi-c h4{margin:0 0 4px;font-family:inherit;font-size:17px;font-weight:600;line-height:1.25}
.domi-c p{margin:0 0 10px;font-size:14px;line-height:1.35;color:var(--suave)}
.domi-pre{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.domi-pre strong{font-size:20px;font-weight:700}.domi-pre span,.domi-pre s{font-size:14px;color:var(--suave)}
.domi-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:6px 10px;text-align:center;border-radius:12px;background:var(--parra);color:var(--cal);font:600 16px/1 var(--display,'Familjen Grotesk',Arial,sans-serif);text-decoration:none}
.domi-btn:hover{filter:brightness(.95)}
.domi-wa{background:var(--wa);color:#fff}
.domi-chips{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}
.domi-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #D9CBB0;background:#fff;color:var(--parra);font:500 15px/1 var(--display,'Familjen Grotesk',Arial,sans-serif);cursor:pointer}
.domi-chip:hover{background:#F3E7CC}
.domi-esc{display:flex;gap:8px;align-items:flex-end;margin:0 12px 8px;padding:6px 6px 6px 16px;border-radius:24px;background:#fff;border:1px solid var(--linea);flex:none}
.domi-esc textarea{overflow-y:hidden;flex:1;min-width:0;min-height:40px;max-height:120px;padding:9px 0;border:0;outline:0;resize:none;background:transparent;color:var(--tinta);font:400 16px/1.4 var(--display,'Familjen Grotesk',Arial,sans-serif)}
.domi-esc textarea::placeholder{color:#5E646C}
.domi-env{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--parra);color:#fff;display:grid;place-items:center;cursor:pointer}
.domi-env:disabled{opacity:.5;cursor:default}
.domi-abono{display:block;margin-top:8px;font-size:13px;color:var(--suave)}
.domi-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 14px 8px;white-space:nowrap;font-size:13px;color:var(--pie);flex:none}
.domi-pol{min-height:28px;display:flex;align-items:center;color:var(--suave);text-decoration:underline;text-underline-offset:2px}
.domi-firma{display:flex;align-items:center;gap:6px;color:var(--pie);text-decoration:none}
.domi-firma img{height:16px;width:auto;display:block}
.domi-firma:hover span{text-decoration:underline}
.domi :focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.domi .domi-esc textarea,.domi .domi-esc textarea:focus,.domi .domi-esc textarea:focus-visible{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important}
.domi:focus{outline:0}
.domi-esc:has(textarea:focus-visible){border-color:var(--parra);box-shadow:inset 0 0 0 1px var(--parra)}
.domi-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.domi-pensando{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--suave)}
.domi-pt{display:inline-flex;gap:4px;flex:none;padding:4px 0}
.domi-pt i{width:7px;height:7px;border-radius:50%;background:var(--oro);animation:domi-pt 1.1s infinite ease-in-out}
.domi-pt i:nth-child(2){animation-delay:.15s}.domi-pt i:nth-child(3){animation-delay:.3s}
@keyframes domi-pt{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.domi-pt i{animation:none;opacity:1}}
/* con la ventana abierta, «¿Hablamos?» no se ve: ya hay una X en la cabecera y ofrecería hablar cuando ya estás hablando (Agatha, 05/11) */
.domi-abierto #pdh-boton{display:none}
/* celular, también apaisado: pantalla completa, sin el botón «¿Hablamos?» encima */
@media (max-width:48rem),(max-height:32rem){
  .domi{inset:0;width:auto;height:100%;height:100dvh;border-radius:0}
  .domi-abierto body{overflow:hidden}
  /* bienvenida: panel abajo según su contenido y el sitio oscurecido arriba, sin dejarlo tocar; al primer mensaje, altura completa */
  .domi-ini{inset:auto 0 0;height:auto;max-height:100dvh;border-radius:22px 22px 0 0}
  .domi-abierto body::after{content:"";position:fixed;inset:0;z-index:59;background:rgba(23,33,45,.55)}
}
/* poco alto (apaisado o 320x568): la foto se achica para que el aviso y el campo se vean sin scroll; los botones hacen scroll entre ellos */
@media (max-height:40rem){.domi-ini .domi-hero{padding:54px 16px 10px}.domi-hola{font-size:22px}.domi-hola-sub{margin-top:2px;font-size:15px}}
/* apaisado: los botones en dos filas, para que el WhatsApp no quede cortado por el campo */
@media (max-height:32rem){.domi-ini .domi-opts{grid-template-columns:repeat(6,1fr);padding:8px 12px}.domi-op{grid-column:span 2;min-height:44px}.domi-op-p{grid-column:span 4;grid-row:1;min-height:52px}.domi-op-wa{grid-column:span 2;grid-row:1;min-height:52px}.domi-op-p small{display:none}.domi-hola-sub span{display:inline}}
/* poco alto y angosto (celular con el teclado abierto): sin foto, con la cabecera de la conversación, que ya trae el WhatsApp */
@media (max-height:32rem) and (max-width:30rem){.domi-ini .domi-hero,.domi-ini .domi-op-wa{display:none}.domi-ini .domi-cab{position:static;background:var(--parra);padding:8px 8px 8px 14px;justify-content:flex-start}.domi-ini .domi-logo{height:24px}.domi-ini .domi-quien{display:block}.domi-ini .domi-wa-cab{display:grid}.domi-ini .domi-opts{grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px}.domi-op{grid-column:auto;min-height:44px}.domi-op-p{grid-column:1/-1;grid-row:auto;min-height:44px}}
/* con el teclado abierto en la bienvenida, domi.js le da a la ventana el alto visible: foto chica y, si casi no queda alto, lo mismo que poco alto y angosto */
.domi-tecl.domi-ini{border-radius:0}
.domi-tecl.domi-ini .domi-hero{aspect-ratio:auto;max-height:none;flex:1 1 0;padding:54px 16px 10px}.domi-tecl .domi-hola{font-size:22px}.domi-tecl .domi-hola-sub{margin-top:2px;font-size:15px}
.domi-baja.domi-ini .domi-hero,.domi-baja.domi-ini .domi-op-wa{display:none}.domi-baja.domi-ini .domi-cab{position:static;background:var(--parra);justify-content:flex-start}.domi-baja.domi-ini .domi-wa-cab{display:grid}.domi-baja.domi-ini .domi-opts{grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px}.domi-baja .domi-op{grid-column:auto;min-height:44px}.domi-baja .domi-op-p{grid-column:1/-1;grid-row:auto;min-height:44px}.domi-baja .domi-op-p small{display:none}
/* con muy poco alto (Agatha, 06/11): cabecera de una línea, campo y pie más bajos. El aviso y el enlace no se sacan (Petra); la firma sí, solo aquí. Si ni así caben, salen los botones */
.domi-baja .domi-cab,.domi-baja.domi-ini .domi-cab{gap:4px;padding:2px 4px 2px 12px}.domi-baja .domi-logo{display:none}.domi-baja .domi-quien,.domi-baja.domi-ini .domi-quien{display:flex;align-items:baseline;gap:6px;padding-left:0;border-left:0;white-space:nowrap;overflow:hidden}.domi-baja .domi-quien small{display:block;flex-wrap:nowrap}.domi-baja .domi-wa-cab,.domi-baja .domi-x{width:40px;height:40px}
.domi-baja .domi-esc{margin:auto 8px 2px;padding:1px 2px 1px 12px}.domi-baja .domi-esc textarea{min-height:36px;padding:6px 0}.domi-baja .domi-env{width:40px;height:40px}.domi-baja .domi-pie{padding-top:2px;padding-bottom:2px}.domi-baja .domi-firma{display:none}
.domi-mini.domi-ini .domi-opts{display:none}
/* muy angosto: el aviso necesita el ancho más que el logo, y el pie no se parte */
@media (max-width:22.5rem){.domi:not(.domi-ini) .domi-logo{display:none}.domi:not(.domi-ini) .domi-quien{padding-left:0;border-left:0}.domi-pie{padding-left:12px;padding-right:12px;font-size:12.5px}.domi-firma{gap:4px}.domi-firma img{height:14px}}
