/* El asistente conserva la identidad visual de la tienda, pero funciona como una conversación. */
.ia-hero { padding: 42px 0; }
.ia-hero h1 { font-size: clamp(32px, 4vw, 48px); }
.ia-orbita { transform: scale(.84); }
.ia-workspace { display: block; margin-top: -23px; }
.ia-form-card { padding: 23px; }
.ia-options { margin-top: 15px; }
.ia-options summary { color: var(--primario); font-size: 12px; font-weight: 800; cursor: pointer; }
.ia-options[open] summary { margin-bottom: 13px; }
.ia-side-tip { margin: 16px 0 0; color: var(--texto-suave); font-size: 12px; line-height: 1.5; }

.ia-chat { display: flex; min-height: 470px; flex-direction: column; overflow: hidden; border: 1px solid #cfe0f1; border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(8,45,93,.12); }
.ia-chat-head { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid #e5eff9; background: linear-gradient(100deg, #fff, #eef8ff); }
.ariah-logo { position:relative; display:grid; width:39px; height:39px; flex:none; place-items:center; overflow:hidden; border-radius:12px; background:linear-gradient(145deg,#0a4d9b,#3ba8ef); color:#fff; box-shadow:0 5px 12px rgba(22,111,190,.23); }
.ariah-logo::before { content:''; position:absolute; width:26px; height:26px; border:1px solid rgba(255,255,255,.42); border-radius:50%; }
.ariah-logo b { z-index:1; font-size:19px; }
.ariah-logo span { position:absolute; right:4px; bottom:3px; z-index:1; color:#d9f1ff; font-size:7px; font-weight:900; letter-spacing:.03em; }
.ia-chat-head strong,.ia-chat-head span { display:block; }
.ia-chat-head strong { color: var(--azul-900); font-size: 13px; }
.ia-chat-head span { margin-top: 2px; color: var(--texto-suave); font-size: 10px; }
.ia-chat-head i { margin-left: auto; color: #159e58; font-size: 10px; font-style: normal; font-weight: 800; }.ia-chat-head i em { display:inline-block; width:7px; height:7px; margin-right:3px; border-radius:50%; background:#1db968; box-shadow:0 0 0 3px rgba(29,185,104,.14); }
.ia-messages { display: grid; align-content: start; gap: 13px; flex: 1; max-height: 360px; overflow: auto; padding: 22px; background: linear-gradient(135deg,#f6faff,#fbfdff); }
.ia-message { width: fit-content; max-width: 76%; padding: 12px 14px; border-radius: 15px; font-size: 13px; line-height: 1.55; box-shadow:0 3px 10px rgba(10,58,112,.04); }
.ia-message p { margin: 0; }
.ia-message-bot { border: 1px solid #dceaf8; border-top-left-radius: 4px; background: #fff; color: var(--texto); }
.ia-message-user { justify-self: end; border-bottom-right-radius: 4px; background: var(--primario); color: #fff; }
.ia-consult-options { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e5eff9; }.ia-consult-options>span { color:var(--azul-900); font-size:12px; font-weight:800; }.ia-consult-options .ia-uses { margin:9px 0 0; }.ia-consult-options .ia-use { background:#f8fbff; }
.ia-options { margin:0; padding:10px 20px; border-top:1px solid #e5eff9; background:#fff; }.ia-options summary { list-style:none; }.ia-options summary::before { content:'+'; display:inline-grid; width:18px; height:18px; margin-right:7px; place-items:center; border-radius:50%; background:var(--azul-50); }.ia-options summary::-webkit-details-marker { display:none; }
.ia-message .ia-answer-list { min-width: min(330px, 100%); margin-top: 11px; }
.ia-message .ia-mini-product { background: #fbfdff; }
.ia-loading p::after { content: ' ● ● ●'; color: var(--primario); letter-spacing: 2px; }
.ia-chat-compose { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid #e5eff9; }
.ia-chat-compose textarea { min-height: 43px; flex: 1; resize: none; box-sizing: border-box; border: 1px solid var(--borde); border-radius: 10px; padding: 11px; font: inherit; font-size: 13px; outline: 0; }
.ia-chat-compose textarea:focus { border-color: var(--primario); box-shadow: 0 0 0 3px var(--azul-100); }
.ia-chat-compose .ia-ask { width: auto; min-height: 43px; margin: 0; padding: 0 15px; }
.ia-chat>.ia-note { margin: -1px 14px 11px; }

@media (max-width: 760px) {
  .ia-hero { padding: 29px 0; }
  .ia-hero p:not(.ia-eyebrow), .ia-trust { display: none; }
  .ia-workspace { display:block; margin-top:0; }
  .ia-form-card { padding: 18px; }
  .ia-uses { margin: 14px 0; gap: 6px; }
  .ia-use { padding: 7px 9px; font-size: 11px; }
  .ia-side-tip { margin-top: 12px; }
  .ia-chat { min-height: 420px; border-radius:15px; }
  .ia-messages { max-height: 300px; padding: 14px; }
  .ia-message { max-width: 94%; }
  .ia-chat-compose { padding: 10px; }
  .ia-chat-compose .ia-ask { padding: 0 11px; font-size: 12px; }
}