/* PetLink · capa visual «Aurora».
   Se carga después de app.css: degradados, vidrio, brillo y microanimaciones sobre los mismos componentes.
   Si algún día se quiere volver al estilo anterior, basta con quitar este archivo de base.html. */

/* ---------- Fondo con luces suaves ---------- */
body {
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(124, 77, 255, 0.13), transparent 62%),
    radial-gradient(900px 520px at 102% 2%, rgba(34, 199, 232, 0.12), transparent 60%),
    radial-gradient(900px 640px at 50% 112%, rgba(255, 107, 74, 0.09), transparent 60%),
    var(--cloud);
  background-attachment: fixed;
}
::selection { background: rgba(110, 75, 250, 0.22); }
.pub, .landing, .nfc-app { background: transparent; }
@media print { body { background: #fff; } }

/* Texto con degradado para destacar palabras clave */
.grad-text {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-warm {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: rgba(91, 100, 130, 0.35) transparent; }

/* ---------- Botones ---------- */
.btn { position: relative; isolation: isolate; letter-spacing: -0.005em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
/* Destello que cruza el botón al pasar el cursor (se mueve el fondo, así no hace falta recortar el botón) */
.btn-primary::after, .btn-dark::after, .btn-wa::after, .btn-success::after, .btn-danger::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0; transition: background-position 750ms var(--ease);
}
.btn-primary:hover::after, .btn-dark:hover::after, .btn-wa:hover::after, .btn-success:hover::after, .btn-danger:hover::after { background-position: -60% 0; }
.alt-row .btn { flex-shrink: 0; }

.btn-primary {
  background: var(--grad-brand); background-size: 160% 160%; background-position: 0% 50%;
  box-shadow: var(--shadow-cta);
  transition: background-position 400ms var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover { background: var(--grad-brand); background-size: 160% 160%; background-position: 100% 50%; box-shadow: 0 16px 34px -10px rgba(110, 75, 250, 0.7), 0 2px 6px rgba(79, 91, 255, 0.25); }
.btn-soft { background: var(--grad-brand-soft); color: var(--cobalt-hover); box-shadow: inset 0 0 0 1px rgba(79, 91, 255, 0.10); }
.btn-soft:hover { background: linear-gradient(135deg, #E4E7FF 0%, #ECE3FF 100%); color: var(--cobalt-hover); box-shadow: inset 0 0 0 1px rgba(79, 91, 255, 0.22); }
.btn-outline { background: rgba(255, 255, 255, 0.85); border-color: var(--border); box-shadow: 0 1px 2px rgba(23, 26, 74, 0.05); }
.btn-outline:hover { background: var(--white); border-color: var(--sky-border); color: var(--cobalt-hover); box-shadow: 0 8px 20px -10px rgba(79, 91, 255, 0.45); }
.btn-dark { background: var(--grad-ink); box-shadow: 0 10px 24px -10px rgba(11, 16, 38, 0.6); }
.btn-dark:hover { background: var(--grad-ink); box-shadow: 0 14px 30px -10px rgba(34, 20, 90, 0.75); }
.btn-white { box-shadow: 0 10px 24px -12px rgba(11, 16, 38, 0.45); }
.btn-white:hover { background: var(--white); color: var(--cobalt-hover); }
.btn-success { background: var(--grad-mint); box-shadow: 0 10px 24px -10px rgba(15, 179, 127, 0.6); }
.btn-success:hover { background: var(--grad-mint); }
.btn-danger { background: linear-gradient(135deg, #F0525A 0%, #D12E4A 100%); box-shadow: 0 10px 24px -10px rgba(229, 72, 77, 0.6); }
.btn-danger:hover { background: linear-gradient(135deg, #E5484D 0%, #B4232A 100%); }
.btn-danger-outline:hover { box-shadow: 0 8px 20px -12px rgba(229, 72, 77, 0.55); }
/* WhatsApp con su color de marca, y llamada en menta */
.btn-wa { background: var(--grad-wa); color: var(--white); box-shadow: 0 12px 26px -10px rgba(31, 191, 92, 0.65); }
.btn-wa:hover { background: var(--grad-wa); color: var(--white); box-shadow: 0 16px 32px -10px rgba(31, 191, 92, 0.75); }
.btn-call { background: linear-gradient(135deg, #E2F8EF 0%, #DDF4F6 100%); color: var(--success-text); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(18, 168, 118, 0.18); }
.btn-call:hover { background: linear-gradient(135deg, #D2F3E5 0%, #CDEEF1 100%); color: var(--success-text); }
.btn-ghost:hover { background: rgba(79, 91, 255, 0.06); }
.btn-link { transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); }
.btn-link:hover { gap: 6px; }
.admin .btn-primary { box-shadow: 0 8px 20px -8px rgba(79, 91, 255, 0.6); }
.admin .btn-dark { box-shadow: 0 8px 18px -10px rgba(11, 16, 38, 0.6); }

/* ---------- Chips, insignias y avatares ---------- */
.chip { letter-spacing: 0.01em; }
.chip .dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.chip-success { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); }
.chip-success .dot { animation: live-dot 2.4s ease-in-out infinite; }
.chip-sky { background: var(--grad-brand-soft); color: var(--cobalt-hover); }
.chip-premium { background: linear-gradient(135deg, #FFE7D9 0%, #FFE0EC 100%); color: var(--premium-text); box-shadow: inset 0 0 0 1px rgba(255, 107, 74, 0.18); }
.chip-alert { background: linear-gradient(135deg, #FFEDEE 0%, #FFE6EF 100%); }
.chip-alert .dot { background: var(--alert); animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 168, 118, 0.0); } 50% { box-shadow: 0 0 0 4px rgba(18, 168, 118, 0.18); } }
.badge { background: var(--grad-warm); box-shadow: 0 4px 10px -3px rgba(255, 79, 123, 0.6); }
.num { background: var(--grad-brand); color: var(--white); box-shadow: 0 6px 14px -6px rgba(110, 75, 250, 0.7); }
.avatar { background: var(--grad-brand-soft); color: var(--cobalt-hover); box-shadow: inset 0 0 0 1px rgba(79, 91, 255, 0.12); }
.avatar-peach { background: linear-gradient(135deg, #FFE1D3 0%, #FFD3E2 100%); color: var(--premium-text); }
.code-pill { background: var(--grad-brand-soft); color: var(--cobalt-hover); }

/* ---------- Tarjetas y superficies ---------- */
.card, .acard, .psection, .quick, .report-list, .l-faq, .kpi, .wizard, .phone-box, .plan-now, .pick-list {
  border: 1px solid rgba(227, 230, 241, 0.9); box-shadow: var(--shadow-card);
}
.card, .psection, .acard { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.acard { border-radius: 22px; }
.notice-sky { background: var(--grad-brand-soft); box-shadow: inset 0 0 0 1px rgba(79, 91, 255, 0.10); }
.notice-success { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); }
.notice-alert { background: linear-gradient(135deg, #FFEDEE 0%, #FFE8EF 100%); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.14); }
.notice-premium { background: var(--grad-warm-soft); border-color: rgba(255, 107, 74, 0.25); }

/* Tarjetas que se pueden tocar: se elevan */
.pet-card, .aviso-item, a.pet-line, .att, .alert-card, .l-step, .l-benefit, .kpi, .report-item, .pick, .add-tile, a.plan-link, .tile {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pet-card:hover, .aviso-item:hover, a.pet-line:hover, .alert-card:hover, .l-step:hover, .l-benefit:hover, .kpi:hover, a.plan-link:hover {
  transform: translateY(-3px); box-shadow: 0 22px 44px -18px rgba(23, 26, 74, 0.28);
}

/* ---------- Formularios ---------- */
.input, .select, .textarea { background: rgba(255, 255, 255, 0.92); }
.input:hover, .select:hover, .textarea:hover { border-color: #CDD1E6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(79, 91, 255, 0.14), 0 6px 18px -10px rgba(79, 91, 255, 0.5); background: var(--white); }
.switch:checked { background: var(--grad-brand); box-shadow: 0 4px 12px -4px rgba(110, 75, 250, 0.6); }
.seg { background: rgba(238, 240, 247, 0.9); }
.seg input:checked + span { color: var(--cobalt-hover); box-shadow: 0 4px 12px -6px rgba(79, 91, 255, 0.45); }
.species input:checked + span { border-color: transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-brand) border-box; border: 2px solid transparent; box-shadow: 0 8px 20px -12px rgba(110, 75, 250, 0.6); }
.photo-drop, .photo-upload { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 240, 255, 0.7)); }
.photo-drop:hover, .photo-upload:hover { border-color: var(--violet); }
.photo-drop-ico { background: var(--grad-brand); color: var(--white); box-shadow: 0 10px 22px -10px rgba(110, 75, 250, 0.7); }

/* ---------- Diálogos y avisos flotantes ---------- */
dialog::backdrop { background: rgba(11, 16, 38, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-body { border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow-pop); }
.modal-title { letter-spacing: -0.03em; }
.modal-x { background: var(--grad-brand-soft); color: var(--cobalt-hover); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.modal-x:hover { transform: rotate(90deg); background: var(--sky-hover); }
.sheet-body { box-shadow: 0 -20px 50px -20px rgba(11, 16, 38, 0.35); }
.toast { background: rgba(11, 16, 38, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); }
.toast-success { background: linear-gradient(135deg, rgba(11, 107, 75, 0.95), rgba(11, 154, 160, 0.95)); }
.toast-error { background: linear-gradient(135deg, rgba(180, 35, 42, 0.95), rgba(209, 46, 74, 0.95)); }

/* ---------- Tablas y pestañas ---------- */
.table:not(.compare) thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table tbody tr:hover td { background: rgba(238, 240, 255, 0.55); }
.table tr.is-selected td { background: rgba(225, 228, 255, 0.7); }
.tabs { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-card); }
.tabs a[aria-current="page"], .mini-tabs a[aria-current="page"] { background: var(--grad-brand); color: var(--white); box-shadow: 0 8px 18px -8px rgba(110, 75, 250, 0.7); }
.tabs a[aria-current="page"] small { color: rgba(255, 255, 255, 0.75); }
.code-link { color: var(--cobalt); transition: background-color var(--dur-fast) var(--ease); }
.code-link:hover { background: var(--grad-brand-soft); }

/* ---------- Marca ---------- */
.brand-mark { background: var(--grad-brand); box-shadow: 0 8px 18px -8px rgba(110, 75, 250, 0.8); }
.brand-chip, .glass-chip { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 16px -10px rgba(11, 16, 38, 0.4); }

/* ---------- Panel del dueño ---------- */
.side { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right-color: rgba(227, 230, 241, 0.8); }
.side-nav a:hover, .side-nav button:hover { background: rgba(79, 91, 255, 0.07); }
.side-nav a[aria-current="page"] { background: var(--grad-brand); color: var(--white); box-shadow: 0 10px 22px -10px rgba(110, 75, 250, 0.75); }
.side-nav a[aria-current="page"] .icon { color: var(--white); }
.side-plan { background: linear-gradient(145deg, #EEF0FF 0%, #F5EEFF 60%, #FFF0EA 100%); border: 1px solid rgba(124, 77, 255, 0.14); }
.bottom-nav { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top-color: rgba(227, 230, 241, 0.8); }
.bottom-nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 2px; width: 34px; height: 4px; border-radius: var(--r-pill); background: var(--grad-brand);
}
.page-title { letter-spacing: -0.04em; }
.topbar { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Inicio del dueño */
.m-alert, .alert-card { position: relative; }
.m-alert { background: var(--grad-brand); box-shadow: 0 16px 34px -14px rgba(110, 75, 250, 0.75); }
.m-alert:hover { background: var(--grad-brand); }
.alert-card { border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-brand) border-box; }
.bell-ico, .m-alert-ico { animation: ring 3s ease-in-out infinite; }
.bell-ico { background: var(--grad-brand); color: var(--white); }
@keyframes ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 95% { transform: rotate(8deg); } }
.pet-card { border: 1px solid rgba(227, 230, 241, 0.9); }
.pet-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 16, 38, 0.28)); pointer-events: none; }
.progress { background: rgba(79, 91, 255, 0.12); }
.progress span { background: var(--grad-brand); }
.progress.is-done span { background: var(--grad-mint); }
.add-tile { background: rgba(255, 255, 255, 0.5); }
.add-tile:hover { border-color: var(--violet); background: rgba(255, 255, 255, 0.9); transform: translateY(-3px); }
.add-tile-ico { background: var(--grad-brand); color: var(--white); box-shadow: 0 12px 26px -10px rgba(110, 75, 250, 0.8); }
.quick .icon { color: var(--violet); }
.quick a:hover { background: var(--grad-brand-soft); }
.tile { background: var(--grad-brand-soft); }
.tile:hover { background: linear-gradient(135deg, #E4E7FF 0%, #ECE3FF 100%); transform: translateY(-2px); }
.tile .icon { color: var(--violet); }
.tile-danger { background: linear-gradient(135deg, #FFEDEE 0%, #FFE6EF 100%); }
.tile-success { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); }
.m-premium, .plan-promo { background: var(--grad-ink); position: relative; overflow: hidden; box-shadow: 0 20px 44px -18px rgba(34, 20, 90, 0.8); }
.m-premium::before, .plan-promo::before {
  content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 74, 0.55), transparent 65%); pointer-events: none;
}
.m-premium > *, .plan-promo > * { position: relative; }
.m-premium-ico, .premium-box-ico { background: var(--grad-warm); color: var(--white); box-shadow: 0 10px 22px -10px rgba(255, 79, 123, 0.8); }
.premium-box { background: var(--grad-warm-soft); border-color: rgba(255, 107, 74, 0.22); }
.empty-peach { background: var(--grad-warm); opacity: 0.85; }
.empty-paw { color: var(--white); }
.empty-nfc { background: var(--grad-brand); color: var(--white); box-shadow: 0 14px 30px -12px rgba(110, 75, 250, 0.8); }
.wizard-bars span.is-on { background: var(--grad-brand); }
.wizard-head, .wizard-foot { background: rgba(255, 255, 255, 0.9); }
.done-ring { background: linear-gradient(135deg, #DDF6EC 0%, #D6F2F4 100%); }
.done-ring > span { background: var(--grad-mint); box-shadow: 0 14px 30px -10px rgba(15, 179, 127, 0.7); }
.nfc-pulse span { border-color: rgba(124, 77, 255, 0.35); }
.nfc-pulse span + span { border-color: rgba(79, 91, 255, 0.45); }
.nfc-pulse b { background: var(--grad-brand); box-shadow: 0 16px 34px -12px rgba(110, 75, 250, 0.85); }
.nfc-halo-core { background: var(--grad-brand); color: var(--white); box-shadow: 0 18px 40px -14px rgba(110, 75, 250, 0.8); }
.nfc-halo-ring { border-color: rgba(124, 77, 255, 0.4); animation: spin 18s linear infinite; }
.lost-status { background: var(--grad-warm); box-shadow: 0 16px 34px -14px rgba(255, 79, 123, 0.7); }
.compare .c-premium { background: rgba(255, 241, 234, 0.75); }
.pick:has(input:checked) { background: var(--grad-brand-soft); box-shadow: inset 0 0 0 1.5px rgba(79, 91, 255, 0.35); }
.pick input:checked ~ .pick-dot { border-color: var(--violet); }
.report-item[aria-current="true"] { background: var(--grad-brand-soft); }
.new-dot { background: var(--grad-warm); box-shadow: 0 0 0 4px rgba(255, 79, 123, 0.15); }

/* Vista previa en el teléfono (editar mascota) */
.phone { background: linear-gradient(160deg, #1B2150, #0B1026); box-shadow: 0 30px 60px -24px rgba(23, 26, 74, 0.6); }
.phone-wa { background: var(--grad-wa); }
.phone-btn { background: var(--grad-brand-soft); }

/* ---------- Panel admin ---------- */
.aside { background: var(--grad-ink); overflow-x: hidden; }
.aside::before {
  content: ""; position: absolute; inset: -40% -60% auto auto; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.45), transparent 65%); pointer-events: none;
}
.aside::after {
  content: ""; position: absolute; left: -120px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 199, 232, 0.22), transparent 65%); pointer-events: none;
}
.aside > * { position: relative; z-index: 1; }
.aside-nav a { position: relative; }
.aside-nav a:hover { background: rgba(255, 255, 255, 0.07); }
.aside-nav a[aria-current="page"] { background: linear-gradient(135deg, rgba(79, 91, 255, 0.95), rgba(139, 61, 240, 0.95)); box-shadow: 0 10px 24px -10px rgba(124, 77, 255, 0.9); }
.aside-user { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.aside-user .avatar { background: var(--grad-warm); }
@media (max-width: 959px) { .admin-bar { background: var(--grad-ink); } }
.admin-login-page { background: var(--grad-ink); }
.admin-login-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(600px 400px at 15% 10%, rgba(124, 77, 255, 0.4), transparent 60%), radial-gradient(500px 400px at 90% 90%, rgba(34, 199, 232, 0.25), transparent 60%);
}
.admin-login { position: relative; }
.admin-login-page .card, .admin-login-page .auth-card { background: var(--white); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.admin-title { letter-spacing: -0.04em; }

/* Dashboard: indicadores con color propio */
.kpi { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.9); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--kpi-grad, var(--grad-brand)); }
.kpi b { background: var(--kpi-grad, var(--grad-brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi b.is-bad { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-ico {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 12px; color: var(--white);
  background: var(--kpi-grad, var(--grad-brand)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px -10px rgba(23, 26, 74, 0.55); font-style: normal;
}
.kpi > span { padding-right: 48px; }
.kpi-1 { --kpi-grad: var(--grad-brand); }
.kpi-2 { --kpi-grad: linear-gradient(135deg, #22C7E8 0%, #4F5BFF 100%); }
.kpi-3 { --kpi-grad: var(--grad-mint); }
.kpi-4 { --kpi-grad: var(--grad-warm); }
.kpi-5 { --kpi-grad: var(--grad-sun); }
.kpis > * { animation: rise-in var(--dur-page) var(--ease) both; }
.kpis > :nth-child(2) { animation-delay: 40ms; } .kpis > :nth-child(3) { animation-delay: 80ms; }
.kpis > :nth-child(4) { animation-delay: 120ms; } .kpis > :nth-child(5) { animation-delay: 160ms; }
.bar i { background: linear-gradient(180deg, rgba(110, 75, 250, 0.42) 0%, rgba(79, 91, 255, 0.16) 100%); }
.bar.is-now i { background: var(--grad-brand); box-shadow: 0 10px 22px -10px rgba(110, 75, 250, 0.8); }
.att { position: relative; padding-left: 18px; overflow: hidden; }
.att::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.att-alert { background: linear-gradient(135deg, #FFEDEE 0%, #FFF3F6 100%); } .att-alert::before { background: var(--grad-warm); }
.att-warn { background: linear-gradient(135deg, #FFF4E6 0%, #FFF0EA 100%); } .att-warn::before { background: var(--grad-sun); }
.att-info { background: var(--grad-brand-soft); } .att-info::before { background: var(--grad-brand); }
.att:hover { transform: translateX(3px); }
.detail-box, .plan-box, .msg-box:not(.is-outline), .detail-strip { background: linear-gradient(135deg, #F4F5FB 0%, #F1F0FD 100%); }
.access-box { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); }
.access-box.is-pending { background: linear-gradient(135deg, #FFF4E6 0%, #FFF0EA 100%); }
.tl-dot.is-done { background: var(--grad-mint); box-shadow: 0 6px 12px -6px rgba(15, 179, 127, 0.8); }
.tl-dot.is-bad { background: var(--grad-warm); }
.chip-card { background: var(--grad-ink); position: relative; overflow: hidden; }
.chip-card::before { content: ""; position: absolute; right: -60px; top: -80px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 77, 255, 0.5), transparent 65%); }
.chip-card > * { position: relative; }
.checks li > span { background: var(--grad-mint); color: var(--white); }
.split-bar { background: rgba(79, 91, 255, 0.1); }

/* ---------- Perfil público de la mascota ---------- */
.photo-peach { background: linear-gradient(145deg, #FFB199 0%, #FF7A9A 55%, #B66BFF 100%); color: rgba(255, 255, 255, 0.92); }
.photo-slate { background: linear-gradient(145deg, #7AA8FF 0%, #6E4BFA 60%, #22C7E8 130%); color: rgba(255, 255, 255, 0.92); }
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 16, 38, 0.18) 0%, transparent 28%, transparent 60%, rgba(11, 16, 38, 0.35) 100%);
}
.photo > .photo-top, .photo > .photo-dots, .photo > .photo-badge { z-index: 2; }
.profile-card {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, rgba(79, 91, 255, 0.55), rgba(255, 107, 74, 0.45)) border-box;
  box-shadow: 0 30px 60px -28px rgba(23, 26, 74, 0.45);
}
.hello { letter-spacing: -0.045em; }
.quote { position: relative; padding-left: 20px; background: var(--grad-brand-soft); font-style: italic; }
.quote::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: var(--r-pill); background: var(--grad-brand); }
.facts .fact { position: relative; overflow: hidden; border: 1px solid transparent; }
.facts .fact:nth-child(5n+1) { background: linear-gradient(135deg, #EEF0FF, #F3EDFF); } .facts .fact:nth-child(5n+1) span { color: var(--cobalt-hover); }
.facts .fact:nth-child(5n+2) { background: linear-gradient(135deg, #FFF1EA, #FFE9F0); } .facts .fact:nth-child(5n+2) span { color: var(--premium-text); }
.facts .fact:nth-child(5n+3) { background: linear-gradient(135deg, #E3F8EF, #DDF6F3); } .facts .fact:nth-child(5n+3) span { color: var(--success-text); }
.facts .fact:nth-child(5n+4) { background: linear-gradient(135deg, #E6F7FD, #E9EDFF); } .facts .fact:nth-child(5n+4) span { color: #0B6E8A; }
.facts .fact:nth-child(5n+5) { background: linear-gradient(135deg, #FFF6E0, #FFF0EA); } .facts .fact:nth-child(5n+5) span { color: #8A5A00; }
.fact span { font-weight: 700; letter-spacing: 0.02em; }
.medical { border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-warm) border-box; }
.med-ico { background: var(--grad-warm); color: var(--white); box-shadow: 0 10px 20px -10px rgba(255, 79, 123, 0.8); }
.round-btn { background: var(--grad-brand-soft); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.round-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(79, 91, 255, 0.6); }
.home-chip .dot { animation: live-dot 2.4s ease-in-out infinite; }
.lost-band { background: var(--grad-warm); }
.lost-ico { animation: ring 2.4s ease-in-out infinite; }
.lost-msg { background: var(--grad-warm-soft); }
.state-card, .auth-card {
  border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px rgba(23, 26, 74, 0.45);
}
.state-ico { background: var(--grad-brand-soft); color: var(--cobalt-hover); }
.mini-paw { background: var(--grad-warm); color: var(--white); }
.map-pin { background: var(--grad-brand); }
.loc-ok { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); }

/* ---------- Página comercial ---------- */
.l-header { background: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(227, 230, 241, 0.7); }
.l-links a { position: relative; }
.l-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--grad-brand); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.l-links a:hover::after { transform: scaleX(1); }
.l-hero { position: relative; }
.l-eyechip { border: 1px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-brand) border-box; box-shadow: 0 8px 20px -12px rgba(110, 75, 250, 0.6); }
.l-h1 { letter-spacing: -0.05em; }
.l-hero-art {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(145deg, #FF9A7B 0%, #FF6B8B 38%, #8B5CF6 75%, #4F5BFF 100%);
  box-shadow: 0 40px 80px -30px rgba(110, 75, 250, 0.55);
}
.ring-1 { border-color: rgba(255, 255, 255, 0.35); }
.ring-2 { border-color: rgba(255, 255, 255, 0.5); }
.ring-1 { animation: breathe 6s ease-in-out infinite; }
.ring-2 { animation: breathe 6s ease-in-out infinite 1.5s; }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.6; } }
.l-phone { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-10px); } }
.l-phone-photo { background: linear-gradient(145deg, #FFC2AB 0%, #FF9AB2 100%); color: var(--white); }
.l-phone-wa { background: var(--grad-wa); }
.l-phone-btns span { background: var(--grad-brand-soft); }
.l-tag { background: var(--white); color: var(--violet); box-shadow: 0 24px 48px -16px rgba(34, 20, 90, 0.55); animation: float-tag 6s ease-in-out infinite; }
@keyframes float-tag { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(6deg); } }
.l-toast { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: float-tag 8s ease-in-out infinite 1s; }
.l-toast-ico { background: var(--grad-mint); color: var(--white); }
.l-checks .icon { color: var(--white); background: var(--grad-mint); border-radius: 50%; padding: 3px; }
.l-band { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(227, 230, 241, 0.7); }
.l-eyebrow { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-step { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(227, 230, 241, 0.9); box-shadow: var(--shadow-card); }
.l-step-num { background: var(--grad-brand); box-shadow: 0 12px 24px -10px rgba(110, 75, 250, 0.8); }
.l-steps .l-step:nth-child(2) .l-step-num { background: var(--grad-warm); box-shadow: 0 12px 24px -10px rgba(255, 79, 123, 0.7); }
.l-steps .l-step:nth-child(3) .l-step-num { background: var(--grad-mint); box-shadow: 0 12px 24px -10px rgba(15, 179, 127, 0.7); }
.l-benefit { border: 1px solid rgba(227, 230, 241, 0.9); }
.l-benefit-ico.is-sky { background: var(--grad-brand); color: var(--white); box-shadow: 0 12px 24px -10px rgba(110, 75, 250, 0.7); }
.l-benefit-ico.is-alert { background: var(--grad-warm); color: var(--white); box-shadow: 0 12px 24px -10px rgba(255, 79, 123, 0.7); }
.l-benefits .l-benefit:nth-child(3n+2) .l-benefit-ico.is-sky { background: var(--grad-mint); box-shadow: 0 12px 24px -10px rgba(15, 179, 127, 0.7); }
.l-benefits .l-benefit:nth-child(3n) .l-benefit-ico.is-sky { background: linear-gradient(135deg, #22C7E8 0%, #4F5BFF 100%); }
.l-dark, .l-cta { position: relative; overflow: hidden; isolation: isolate; }
.l-dark { background: var(--grad-ink); box-shadow: 0 40px 80px -40px rgba(34, 20, 90, 0.8); }
.l-dark::before, .l-cta::before {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -160px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.55), transparent 65%);
}
.l-dark::after {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; left: -160px; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 199, 232, 0.3), transparent 65%);
}
.l-dark-check > span { background: var(--grad-brand); }
.l-cta { background: var(--grad-brand); box-shadow: 0 40px 80px -36px rgba(110, 75, 250, 0.8); }
.l-cta::before { background: radial-gradient(circle, rgba(255, 154, 123, 0.55), transparent 65%); }
.l-plan { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(227, 230, 241, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.l-plan.is-main {
  position: relative; border: 2px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-brand) border-box;
  box-shadow: 0 30px 70px -30px rgba(110, 75, 250, 0.7);
}
.l-plan.is-main::before {
  content: "Más elegido"; position: absolute; top: -14px; right: 28px; height: 28px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--grad-warm); color: var(--white); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center;
  box-shadow: 0 10px 20px -10px rgba(255, 79, 123, 0.8);
}
.l-feats .icon { color: var(--white); background: var(--grad-brand); border-radius: 50%; padding: 3px; flex-shrink: 0; }
.l-price { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-family { background: var(--grad-brand-soft); border: 1px solid rgba(79, 91, 255, 0.12); }
.l-faq-ico { background: var(--grad-brand-soft); }
.l-faq.is-open .l-faq-ico, .l-faq button[aria-expanded="true"] .l-faq-ico { background: var(--grad-brand); }
.l-footer { background: rgba(255, 255, 255, 0.7); }


/* ---------- Aviso de registros, proveedor de placas, escaneos y redes ---------- */
.chip-new { background: var(--grad-warm); color: var(--white); vertical-align: 1px; }
.att-new { background: linear-gradient(135deg, #E3F8EF 0%, #DDF6F3 100%); } .att-new::before { background: var(--grad-mint); }
.att-new i { background: var(--mint); }
.provider-card {
  padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-radius: 22px;
  border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-warm) border-box;
}
.provider-ico {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: var(--grad-warm); color: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -10px rgba(255, 79, 123, 0.7);
}
.scan-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.scan-line:first-of-type { border-top: 0; }
.scan-line b { font-size: 14px; } .scan-line small { font-size: 12px; color: var(--muted); }
.scan-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: var(--grad-brand); }
.scan-ico.is-qr { background: linear-gradient(135deg, #22C7E8 0%, #4F5BFF 100%); }
.scan-link { font-weight: 700; text-decoration: none; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.social-pill {
  min-height: 52px; padding: 8px 14px; border-radius: 16px; display: flex; align-items: center; gap: 10px;
  color: var(--white); text-decoration: none; font-size: 13px; font-weight: 700;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.social-pill:hover { color: var(--white); transform: translateY(-2px); }
.social-pill b { font-size: 14px; } .social-pill small { font-size: 12px; font-weight: 500; opacity: 0.9; overflow-wrap: anywhere; }
.social-instagram { background: linear-gradient(135deg, #FEDA75 -20%, #FA7E1E 20%, #D62976 55%, #962FBF 85%, #4F5BD5 120%); box-shadow: 0 10px 22px -12px rgba(214, 41, 118, 0.8); }
.social-facebook { background: linear-gradient(135deg, #1877F2 0%, #0B5BD3 100%); box-shadow: 0 10px 22px -12px rgba(24, 119, 242, 0.8); }
.social-tiktok { background: linear-gradient(135deg, #111 0%, #25F4EE -40%, #111 40%, #FE2C55 160%); box-shadow: 0 10px 22px -12px rgba(254, 44, 85, 0.6); }
.social-dot { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0; }
.social-dot.is-off { filter: grayscale(1); opacity: 0.45; }


/* ---------- Ficha pública: contenidos y títulos centrados (se leen mejor en el celular) ---------- */
.pub-profile .profile-card { align-items: center; text-align: center; }
.pub-profile .profile-card > .stack { align-items: center; }
.pub-profile .home-chip { align-self: center; }
.pub-profile .profile-card > .btn, .pub-profile .profile-card > .pbtn-row { align-self: stretch; }
.pub-profile .quote { padding: 18px 18px 14px; text-align: center; }
.pub-profile .quote::before { left: 50%; top: 0; bottom: auto; width: 44px; height: 4px; transform: translate(-50%, -50%); }
.pub-profile .lost-msg { align-self: stretch; align-items: center; text-align: center; }
.pub-profile .last-seen { justify-content: center; }
.pub-profile .lost-band { justify-content: center; text-align: center; }
.pub-profile .lost-band .stack { align-items: center; }
.pub-profile .psection > .card-title { text-align: center; }
.pub-profile .psection > .row:first-child { justify-content: center; }
.pub-profile .fact { align-items: center; text-align: center; }
/* Si queda una tarjeta sola en la última fila, va centrada con el mismo ancho que las demás */
.pub-profile .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.pub-profile .psection .step { text-align: left; }
.pub-profile .social-pill { justify-content: center; }
.pub-profile .pfoot .hint { text-align: center; }
.pub-profile .pfoot .row.hint { flex-direction: column; gap: 6px; }
.pub-profile .psection-row { flex-direction: column; text-align: center; }
.pub-profile .psection-row > .stack { align-items: center; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .l-phone, .l-tag, .l-toast, .ring-1, .ring-2, .bell-ico, .m-alert-ico, .lost-ico, .nfc-halo-ring,
  .chip-success .dot, .chip-alert .dot, .home-chip .dot { animation: none; }
  .btn-primary::after, .btn-dark::after, .btn-wa::after, .btn-success::after, .btn-danger::after { display: none; }
  .btn:hover, .pet-card:hover, .aviso-item:hover, a.pet-line:hover, .alert-card:hover, .l-step:hover, .l-benefit:hover,
  .kpi:hover, a.plan-link:hover, .add-tile:hover, .tile:hover, .att:hover, .round-btn:hover, .social-pill:hover { transform: none; }
}