/* ═══════════════════════════════════════════════════════════════════
   PetiA 12.1.0 — Capa de pulido visual (aditiva)
   Se carga DESPUÉS de chat.css. No redefine estructura: solo refina.
   Marca: morado #5B3FA5 / #5e0079 · dorado #F5A800 · dark #1A1625
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PetiA Home (hero para la página principal) ─────────────────── */
.petia-home-hero{
  position:relative;
  max-width:860px;
  margin:0 auto;
  padding:clamp(28px,5vw,52px) clamp(18px,4vw,44px);
  border-radius:28px;
  background:linear-gradient(135deg,#ffffff 0%,#f7f3ff 55%,#fdf6e8 100%);
  border:1px solid rgba(91,63,165,.14);
  box-shadow:0 12px 40px rgba(91,63,165,.10);
  overflow:hidden;
  font-family:'DM Sans','Syne',system-ui,sans-serif;
  box-sizing:border-box;
}
.petia-home-hero *,.petia-home-hero *::before,.petia-home-hero *::after{box-sizing:border-box;}
.petia-home-glow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(420px 220px at 18% 12%,rgba(91,63,165,.10),transparent 70%),
    radial-gradient(380px 220px at 85% 90%,rgba(245,168,0,.12),transparent 70%);
  pointer-events:none;
}
.petia-home-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.petia-home-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:#5B3FA5;background:rgba(91,63,165,.08);
  border:1px solid rgba(91,63,165,.18);
  padding:6px 14px;border-radius:999px;
}
.petia-home-dot{
  width:8px;height:8px;border-radius:50%;
  background:#F5A800;
  animation:petiaHomePulse 2.2s ease-in-out infinite;
}
@keyframes petiaHomePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.petia-home-title{
  margin:0;font-family:'Syne','DM Sans',sans-serif;
  font-size:clamp(24px,4vw,38px);font-weight:700;line-height:1.15;
  color:#1A1625;
}
.petia-home-sub{margin:0;font-size:clamp(14px,1.8vw,17px);color:#5b5570;max-width:560px;}
.petia-home-form{
  display:flex;align-items:center;gap:8px;width:100%;max-width:640px;
  margin-top:6px;padding:8px 8px 8px 18px;
  background:#ffffff;border:1.5px solid rgba(91,63,165,.22);
  border-radius:999px;
  box-shadow:0 4px 18px rgba(26,22,37,.06);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.petia-home-form:focus-within{
  border-color:#5B3FA5;
  box-shadow:0 0 0 4px rgba(91,63,165,.12),0 4px 18px rgba(26,22,37,.06);
}
.petia-home-icon{font-size:18px;flex:0 0 auto;}
.petia-home-input{
  flex:1;min-width:0;border:none!important;outline:none!important;background:transparent!important;
  font-size:16px;color:#1A1625;padding:10px 4px!important;
  box-shadow:none!important;
}
.petia-home-input::placeholder{color:#9a93ad;}
.petia-home-send{
  flex:0 0 auto;border:none;cursor:pointer;
  background:linear-gradient(135deg,#5B3FA5,#5e0079);
  color:#fff;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:999px;
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.petia-home-send:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(91,63,165,.35);}
.petia-home-send:active{transform:scale(.97);}
.petia-home-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;}
.petia-home-chip{
  border:1px solid rgba(91,63,165,.2);background:rgba(255,255,255,.75);
  color:#4a3f6b;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.petia-home-chip:hover{background:#f3edff;border-color:#5B3FA5;}
.petia-home-chip:active{transform:scale(.97);}

@media (max-width:600px){
  .petia-home-hero{border-radius:20px;}
  .petia-home-form{flex-wrap:nowrap;padding-left:14px;}
  .petia-home-send{padding:11px 16px;font-size:14px;}
  .petia-home-chips{gap:6px;}
  .petia-home-chip{font-size:12px;padding:7px 11px;}
}

/* ── 2. Burbuja: refinamientos desktop y móvil ─────────────────────── */
/* Entrada suave de mensajes nuevos */
#petify-ai-messages > *{
  animation:petiaMsgIn .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes petiaMsgIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
/* Scroll suave y scrollbar discreto en el log */
#petify-ai-messages{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(91,63,165,.35) transparent;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#petify-ai-messages::-webkit-scrollbar{width:6px;}
#petify-ai-messages::-webkit-scrollbar-thumb{background:rgba(91,63,165,.3);border-radius:6px;}
#petify-ai-messages::-webkit-scrollbar-track{background:transparent;}

/* Botón flotante: micro-interacción y foco accesible */
#petify-ai-toggle{
  transition:transform .15s ease,box-shadow .2s ease;
}
#petify-ai-toggle:hover{transform:scale(1.06);}
#petify-ai-toggle:active{transform:scale(.95);}
#petify-ai-toggle:focus-visible,
.petia-home-chip:focus-visible,
.petia-home-send:focus-visible,
#petify-ai-send:focus-visible{
  outline:3px solid rgba(245,168,0,.85);
  outline-offset:2px;
}

/* Móvil: viewport dinámico (evita que el teclado corte el chat) + safe areas */
@media (max-width:760px){
  #petify-ai-bubble.open{
    height:100dvh !important;
    max-height:100dvh !important;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #petify-ai-input{
    font-size:16px !important; /* evita el auto-zoom de iOS al enfocar */
  }
}

/* ── 3. /petia (vista de página completa): aire y legibilidad ──────── */
@media (min-width:761px){
  .petia-page-shell, .petia-fullpage, #petia-page-root{
    max-width:1080px;margin-left:auto;margin-right:auto;
  }
}

/* ── 4. Accesibilidad: respeto a usuarios con movimiento reducido ──── */
@media (prefers-reduced-motion:reduce){
  #petify-ai-messages > *{animation:none;}
  .petia-home-dot{animation:none;}
  #petify-ai-messages{scroll-behavior:auto;}
  #petify-ai-toggle,#petify-ai-toggle:hover{transform:none;transition:none;}
}

/* ── 5. 12.2.0 — Tarjetas de productos y negocios en /petia ────────── */
.petia-page-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
  margin:10px 0 16px;
  max-width:820px;
}
.ppc-card{
  display:flex;align-items:stretch;gap:12px;
  background:#ffffff;border:1px solid rgba(91,63,165,.16);
  border-radius:18px;padding:12px;
  text-decoration:none;color:#1A1625;
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease;
  overflow:hidden;
}
.ppc-card:hover{
  transform:translateY(-2px);
  border-color:#5B3FA5;
  box-shadow:0 8px 22px rgba(91,63,165,.16);
}
.ppc-img{
  width:64px;height:64px;flex:0 0 64px;
  border-radius:12px;object-fit:cover;background:#f4f0fb;
}
.ppc-img-ph{
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
}
.ppc-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ppc-name{
  margin:0;font-size:13.5px;font-weight:700;line-height:1.25;color:#1A1625;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ppc-meta{margin:0;font-size:12px;color:#6b6382;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ppc-price{color:#5B3FA5;font-weight:700;}
.ppc-cta{font-size:12px;font-weight:700;color:#F5A800;margin-top:auto;}
@media(max-width:600px){
  .petia-page-cards{grid-template-columns:1fr 1fr;gap:8px;}
  .ppc-card{flex-direction:column;padding:10px;}
  .ppc-img{width:100%;height:84px;flex:0 0 auto;}
}
/* Dentro de la burbuja oscura de /petia, asegurar contraste del contenedor */
#petia-page-messages .petia-page-cards{padding:0 2px;}