/* Assistent de La Carral: botó flotant + xat (marca de la casa) i bloc de portada.
   El xat de la web parla amb la veu de la casa (marí i crema). */

/* ---------- botó flotant ---------- */
.ast-llanca { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px;
  background: var(--mari); color: var(--blanc); font: 600 .98rem/1 var(--sans); cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(35, 32, 50, .55), 0 2px 6px -2px rgba(35, 32, 50, .3); transition: background .2s, transform .3s var(--ease); }
.ast-llanca .ic { width: 24px; height: 24px; color: var(--lila); }
.ast-llanca:hover { background: var(--mari-2); }
.ast-llanca:active { transform: translateY(1px); }
.ast-llanca[aria-expanded=true] { transform: scale(.9); opacity: 0; pointer-events: none; }
@media (max-width: 599px) {
  .ast-llanca { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .ast-llanca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- finestra del xat ---------- */
.ast-flot { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column;
  background: var(--crema); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(35, 32, 50, .55), 0 4px 14px -6px rgba(35, 32, 50, .3);
  opacity: 0; transform: translateY(14px); transform-origin: bottom right; transition: opacity .22s, transform .32s var(--ease); }
.ast-flot.si { opacity: 1; transform: none; }
.ast-flot[hidden] { display: none; }
@media (max-width: 599px) {
  .ast-flot { right: 0; left: 0; bottom: 0; width: 100%; height: min(92dvh, 760px); border-radius: 10px 10px 0 0; }
}
.ast-flot-cap { display: flex; align-items: center; gap: 6px; background: var(--mari); color: var(--lila); padding: 10px 6px 10px 18px; flex: none;
  border-bottom: 1px solid var(--pissarra); }
.ast-flot-cap > div { flex: 1; min-width: 0; }
.ast-flot-cap h2 { font: 400 1.7rem/1 var(--display); color: var(--blanc); }
.ast-flot-cap p { margin: 3px 0 0; font-size: .84rem; color: var(--lila); }
.ast-flot-cap button { border: 0; background: none; color: var(--lila); cursor: pointer; min-height: 44px; min-width: 44px; display: grid; place-items: center; border-radius: var(--radi); }
.ast-flot-cap button:hover { color: var(--blanc); background: rgba(255, 255, 255, .08); }
.ast-flot-nou { font: 600 .82rem var(--sans); padding: 0 8px; text-decoration: underline; text-underline-offset: .2em; }
.ast-flot-tanca .ic { width: 22px; height: 22px; }
.ast-flot-xat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- xat (comú) ---------- */
.xat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.xat-fil { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--crema-3) transparent; }
.xat-fil:focus-visible { outline-offset: -3px; }
.xat-avis { font-size: .78rem; line-height: 1.45; color: var(--tinta-2); background: var(--crema-2); border-radius: var(--radi); padding: 8px 11px; margin: 0 0 12px; }
.xat-llista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.xat-b { position: relative; max-width: 88%; padding: 9px 12px 8px; border-radius: 12px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; align-self: flex-start; }
.xat-b.primer { margin-top: 8px; }
.xat-text { white-space: pre-line; display: block; }
.xat-text b { font-weight: 700; }
.xat-hora { display: block; text-align: right; font-size: .7rem; margin-top: 3px; font-variant-numeric: tabular-nums; }
.xat-qui { display: block; font-size: .76rem; font-weight: 700; margin-bottom: 2px; }
.xat-accions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.xat-accio { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; font-weight: 600; font-size: .88rem; text-decoration: none; }
.xat-escriu { display: inline-flex; gap: 4px; padding: 13px 14px; margin-top: 8px; border-radius: 12px; }
.xat-escriu[hidden] { display: none; }
.xat-escriu i { width: 7px; height: 7px; border-radius: 50%; animation: xat-punt 1.1s infinite ease-in-out; }
.xat-escriu i:nth-of-type(2) { animation-delay: .15s; } .xat-escriu i:nth-of-type(3) { animation-delay: .3s; }
@keyframes xat-punt { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.xat-sugg { margin-top: 14px; }
.xat-sugg[hidden] { display: none; }
.xat-sugg p { font-size: .82rem; font-weight: 600; margin: 0 0 8px; }
.xat-sugg div { display: flex; flex-wrap: wrap; gap: 6px; }
.xat-sugg button { min-height: 44px; padding: 8px 14px; border-radius: 22px; font: 500 .9rem/1.25 var(--sans); cursor: pointer; text-align: left; }
.xat-contacte { margin-top: 14px; padding: 12px; border-radius: 10px; }
.xat-contacte[hidden] { display: none; }
.xat-contacte p { margin: 0 0 8px; font-weight: 600; font-size: .9rem; }
.xat-contacte-camps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; margin-bottom: 8px; }
.xat-contacte label { margin: 0; font-size: .8rem; }
.xat-contacte input { margin-top: 3px; min-height: 44px; width: 100%; }
.xat-error { margin: 0; padding: 8px 14px; font-size: .86rem; color: var(--vermell); background: #f8ebe5; flex: none; }
.xat-error[hidden] { display: none; }
.xat-peu { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.xat-entrada { flex: 1; margin: 0; min-width: 0; }
.xat-entrada textarea { width: 100%; min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; font: 400 1rem/1.4 var(--sans); border-radius: 24px; display: block; }
.xat-envia { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.xat-envia .ic { width: 22px; height: 22px; }
.xat-envia:disabled { opacity: .55; cursor: default; }
.xat-envia:active:not(:disabled) { transform: scale(.94); }

/* veu de la casa (web) */
.xat-web .xat-b.seu { background: var(--blanc); color: var(--tinta); border: 1px solid var(--linia); border-top-left-radius: 4px; }
.xat-web .xat-b.meu { align-self: flex-end; background: var(--mari); color: var(--blanc); border-top-right-radius: 4px; }
.xat-web .xat-b.de-equip { background: var(--crema-2); border-color: var(--crema-3); }
.xat-web .xat-b.de-equip .xat-qui { color: var(--terracota-fosc); }
.xat-web .xat-hora { color: var(--tinta-3); }
.xat-web .xat-b.meu .xat-hora { color: var(--lila); }
.xat-web .xat-b a:not(.xat-accio) { color: var(--mari-2); }
.xat-web .xat-accio { background: var(--malva); color: var(--mari); border: 1px solid #e2d8ec; }
.xat-web .xat-accio:hover { background: var(--lila); color: var(--mari-3); }
.xat-web .xat-escriu { background: var(--blanc); border: 1px solid var(--linia); }
.xat-web .xat-escriu i { background: var(--pissarra); }
.xat-web .xat-sugg p { color: var(--tinta-2); }
.xat-web .xat-sugg button { border: 1px solid #e2d8ec; background: var(--blanc); color: var(--mari); }
.xat-web .xat-sugg button:hover { background: var(--malva); }
.xat-web .xat-contacte { background: var(--blanc); border: 1px solid var(--linia); }
.xat-web .xat-peu { background: var(--blanc); border-top: 1px solid var(--linia); }
.xat-web .xat-entrada textarea { border: 1px solid #cdbb98; background: var(--crema); }
.xat-web .xat-envia { background: var(--mari); color: var(--blanc); }
.xat-web .xat-envia:hover:not(:disabled) { background: var(--mari-2); }

/* ---------- bloc de portada ---------- */
.ast-portada { background: var(--mari); color: var(--malva); }
.ast-portada h2 { color: var(--blanc); }
.ast-portada h2 em { color: var(--lila); }
.ast-portada .entradeta { color: var(--malva); }
.ast-portada-graella { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ast-portada-graella > * { min-width: 0; }
@media (min-width: 900px) { .ast-portada-graella { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.ast-portada-botons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 28px 0 0; }
.ast-portada .boto { background: var(--blanc); border-color: var(--blanc); color: var(--mari); }
.ast-portada .boto:hover { background: var(--malva); border-color: var(--malva); color: var(--mari-3); }
.ast-portada .enllac-fort { color: var(--blanc); display: inline-flex; align-items: center; min-height: 44px; }
.ast-portada-exemple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ast-portada-exemple li { max-width: 86%; padding: 11px 15px; border-radius: 12px; font-size: 1rem; line-height: 1.45; }
.ast-portada-exemple .de-client { align-self: flex-end; background: var(--lila); color: var(--mari-3); border-top-right-radius: 4px; }
.ast-portada-exemple .de-casa { align-self: flex-start; background: var(--mari-3); color: var(--malva); border-top-left-radius: 4px; border: 1px solid rgba(217, 210, 230, .25); }

/* ---------- simulació de WhatsApp (/whatsapp) ---------- */
.xat-wa { --wa-fons: #efeae2; --wa-meu: #d9fdd3; --wa-verd: #008069; --wa-verd-boto: #00a884; --wa-gris: #5e6f78; --wa-text: #111b21;
  background: var(--wa-fons); color: var(--wa-text); }
.xat-wa .xat-fil { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23123f4d' stroke-opacity='.06' stroke-width='1.5'%3E%3Cpath d='M6 70c8 5 16 5 24 0s16-5 24 0 16 5 24 0'/%3E%3Cpath d='M58 30l10-14 6 9 4-5 10 10'/%3E%3C/svg%3E"); }
.xat-wa .xat-avis { background: #fff3c4; color: #54471a; text-align: center; border-radius: 7px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.xat-wa .xat-b { border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); background: #fff; }
.xat-wa .xat-b.primer.seu { border-top-left-radius: 0; }
.xat-wa .xat-b.meu { align-self: flex-end; background: var(--wa-meu); }
.xat-wa .xat-b.primer.meu { border-top-right-radius: 0; }
.xat-wa .xat-hora { color: var(--wa-gris); }
.xat-wa .xat-qui { color: var(--wa-verd); }
.xat-wa .xat-b a:not(.xat-accio) { color: #027eb5; }
.xat-wa .xat-accions { margin: 8px -12px -8px; display: grid; gap: 0; border-top: 1px solid #e3e6e8; }
.xat-wa .xat-accio { justify-content: center; border-radius: 0; color: #027eb5; font-weight: 500; border-bottom: 1px solid #eef0f1; }
.xat-wa .xat-accio:last-child { border-bottom: 0; }
.xat-wa .xat-accio:hover { background: #f5f6f6; }
.xat-wa .xat-escriu { background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.xat-wa .xat-escriu i { background: #9aa5ab; }
.xat-wa .xat-sugg p { color: var(--wa-gris); text-align: center; }
.xat-wa .xat-sugg div { justify-content: flex-end; }
.xat-wa .xat-sugg button { border: 1.5px dashed #9fcfbf; background: rgba(217, 253, 211, .7); color: var(--wa-text); border-radius: 8px; }
.xat-wa .xat-sugg button:hover { background: var(--wa-meu); border-style: solid; }
.xat-wa .xat-peu { background: #f0f2f5; }
.xat-wa .xat-entrada textarea { border: 0; background: #fff; }
.xat-wa .xat-envia { background: var(--wa-verd-boto); color: #fff; }
.xat-wa .xat-envia:hover:not(:disabled) { background: var(--wa-verd); }

.wa-pagina main { padding-block: clamp(20px, 4vw, 56px) clamp(48px, 6vw, 96px); }
.wa-graella { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.wa-graella > * { min-width: 0; }
@media (min-width: 960px) { .wa-graella { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } }
.wa-movil { display: flex; flex-direction: column; height: min(740px, calc(100dvh - 120px)); min-height: 520px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(35, 32, 50, .6), 0 0 0 1px rgba(35, 32, 50, .12); background: #efeae2; }
@media (max-width: 599px) { .wa-movil { margin-inline: calc(var(--gutter) * -1); border-radius: 0; height: calc(100dvh - 140px); } }
.wa-cap { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 6px; background: #f0f2f5; border-bottom: 1px solid #dadfe2; min-height: 62px; flex: none; color: #111b21; }
.wa-cap a.wa-enrere { color: #008069; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.wa-av { width: 40px; height: 40px; border-radius: 50%; background: var(--mari); color: var(--blanc); display: grid; place-items: center; flex: none; }
.wa-av svg { width: 30px; height: auto; }
.wa-cap-nom { flex: 1; min-width: 0; line-height: 1.25; }
.wa-cap-nom b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-cap-nom span { font-size: .8rem; color: #5e6f78; }
.wa-cap button { border: 0; background: none; color: #008069; font: 600 .82rem var(--sans); min-height: 44px; padding: 0 10px; cursor: pointer; }
.wa-intro h1 { font-size: clamp(3rem, 7vw, 5rem); margin-bottom: 18px; }
.wa-passos { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 0; border-top: 1px solid var(--linia); }
.wa-passos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linia); }
.wa-passos li > .ic { width: 26px; height: 26px; color: var(--mari-2); margin-top: 2px; }
.wa-passos b { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.wa-passos p { margin: 0; color: var(--tinta-2); }
.wa-equip { background: var(--crema-2); border-radius: var(--radi); padding: 20px 22px; margin-bottom: 18px; }
.wa-equip h2 { font-size: 2rem; margin-bottom: 8px; }
.wa-nota { font-size: .9rem; color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) {
  .ast-flot, .ast-llanca { transition: none; }
  .xat-escriu i { animation: none; opacity: .7; }
}