/* Kelion · movimiento, iconos y aviso de cookies. Usa los tokens de styles.css. */

/* Iconos */
.ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sage-soft);color:var(--sage-ink);flex:none}
.ico svg{width:22px;height:22px}
.area .ico{margin-bottom:6px}
.section-head .title{display:flex;align-items:center;gap:14px}
.section-head .title .ico{width:48px;height:48px;border-radius:14px}
.section-head .title .ico svg{width:26px;height:26px}
.privacy .ico{width:52px;height:52px;border-radius:16px;background:var(--surface);margin-bottom:14px}
.privacy .ico svg{width:28px;height:28px}

/* Listas de "Lo que hace / Lo que no" con icono */
.trust .panel li{grid-template-columns:22px 1fr}
.trust .panel li::before{width:18px;height:18px;margin-top:3px;border-radius:0;background:var(--sage-ink);
  -webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;
  --mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.trust .panel.no li::before{background:var(--warn-ink);
  --mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}

/* Aparición de secciones: solo afecta a lo que está fuera de pantalla al cargar */
.reveal-pending{opacity:0;transform:translateY(18px)}
.reveal-in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}

/* Chat que se va escribiendo */
.msgs > .msg-pending{display:none}
.msgs > .msg-show{animation:msgin .35s ease both}
.typing{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 16px;border-radius:16px;border-bottom-left-radius:6px;background:var(--bubble)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.35;animation:dot 1.1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msgs{transition:min-height .2s ease}

/* El orbe "respira" mientras Kelion escribe */
.chat.is-typing .chat-head .orb{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Aviso de cookies */
.cookie-bar{position:fixed;z-index:50;left:0;right:0;bottom:0;display:flex;justify-content:flex-start;pointer-events:none;
  padding:0 max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.cookie-card{pointer-events:auto;max-width:460px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 50px -18px rgba(20,30,20,.45);padding:18px 20px;display:flex;flex-direction:column;gap:14px;font-size:15px}
.cookie-card strong{font-weight:600}
.cookie-card p{color:var(--muted);margin:4px 0 0}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-actions .btn{padding:10px 18px;font-size:14px}
.cookie-bar.leaving .cookie-card{opacity:0;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease}

@media (prefers-reduced-motion: reduce){
  .reveal-pending{opacity:1;transform:none}
  .msgs > .msg-pending{display:revert}
  .typing{display:none}
  .chat.is-typing .chat-head .orb{animation:none}
  .msgs > .msg-show{animation:none}
}