/* Partes comunes: footer fijo, prefooter y Pixo bebé (landing, panel y páginas legales). */
:root { --ff-h: 28px; }
body.has-fixed-footer { padding-bottom: calc(var(--ff-h) + env(safe-area-inset-bottom)); }

/* ---------- Footer fijo (siempre visible, como el header) ---------- */
.fixed-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: var(--ff-h); padding: 3px clamp(12px, 4vw, 40px) calc(3px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 4px 20px; flex-wrap: wrap;
  background: #030304; color: #b7b2d8; font: 600 clamp(10.5px, 1vw, 12.5px)/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: 0 -6px 24px #0000002e;
}
.fixed-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff4d6d, #ffb703, #2fe08a, #3b82f6, #a855f7, #ff4d6d); background-size: 200% 100%; animation: ff-rainbow 6s linear infinite;
}
@keyframes ff-rainbow { to { background-position: 200% 0; } }
.fixed-footer a { color: inherit; text-decoration: none; }
.fixed-footer a b { color: #fff; letter-spacing: .08em; }
.fixed-footer a:hover { color: #2fe08a; }
.ff-links { display: flex; gap: 16px; }
.ff-links a { opacity: .8; }
.fixed-footer::before { height: 2px; }

/* ---------- Prefooter (al final, con scroll) ---------- */
.prefooter { position: relative; background: radial-gradient(ellipse at 20% 0%, #2b2373, #100d2b 70%); color: #b7b2d8; padding: 70px clamp(16px, 4vw, 48px) 46px; margin-top: 40px; }
.pf-wave { position: absolute; left: 0; top: -60px; width: 100%; height: 62px; fill: #100d2b; }
.pf-wave path { fill: #1d1750; }
.pf-peek { position: absolute; top: -96px; left: 50%; translate: -50% 0; display: flex; gap: 6px; width: min(420px, 80vw); }
.pf-peek > div { flex: 1; animation: pf-peek 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.pf-peek > div:nth-child(2) { animation-delay: -.8s; } .pf-peek > div:nth-child(3) { animation-delay: -1.6s; } .pf-peek > div:nth-child(4) { animation-delay: -2.4s; }
@keyframes pf-peek { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(0) rotate(-3deg); } }
.pf-inner { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.pf-brand p { line-height: 1.6; margin: 14px 0 0; max-width: 360px; }
.pf-adult a { color: #2fe08a; font-weight: 800; }
.pf-col { display: flex; flex-direction: column; gap: 10px; }
.pf-col b { color: #fff; font: 800 17px Outfit, sans-serif; margin-bottom: 4px; }
.pf-col a { color: #b7b2d8; text-decoration: none; transition: color .2s, transform .2s; width: fit-content; }
.pf-col a:hover { color: #2fe08a; transform: translateX(4px); }
@media (max-width: 860px) { .pf-inner { grid-template-columns: 1fr 1fr; } .pf-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .pf-inner { grid-template-columns: 1fr; text-align: center; } .pf-col { align-items: center; } .pf-brand p { margin-inline: auto; } }

/* ---------- Pixo bebé ---------- */
.pixo-kid {
  position: fixed; right: clamp(12px, 3vw, 26px); bottom: calc(var(--ff-h) + 14px + env(safe-area-inset-bottom)); z-index: 45;
  width: 66px; height: 66px; border: 0; padding: 0; cursor: pointer;
  /* Pixo es incoloro: solo sus líneas, sin fondo. El halo blanco lo deja ver sobre fondos oscuros. */
  background: transparent; color: #14102a; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
  display: grid; place-items: center; animation: pk-hop 3.2s ease-in-out infinite;
}
.pixo-kid:hover { animation-play-state: paused; transform: scale(1.08); }
.pixo-kid .pk-hi { position: absolute; right: 74px; bottom: 16px; white-space: nowrap; background: #fff; color: #14102a; font: 800 14px Outfit, sans-serif;
  padding: 7px 12px; border-radius: 14px; box-shadow: 0 6px 18px #0003; animation: pk-hi 7s ease-in-out infinite; pointer-events: none; }
.pixo-kid .pk-hi::after { content: ''; position: absolute; right: -7px; bottom: 10px; border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
@keyframes pk-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-10px) scale(1.04, .96); } 80% { transform: translateY(0) scale(.97, 1.03); } }
@keyframes pk-hi { 0%, 8%, 40%, 100% { opacity: 0; transform: translateX(8px); } 12%, 34% { opacity: 1; transform: none; } }
@media (max-width: 560px) { .pixo-kid { width: 56px; height: 56px; border-radius: 18px; } .pixo-kid .pk-hi { display: none; } }

/* El cubito (misma técnica que el Pixo de pixobra.com, en versión bebé) */
.pk-cube-wrap { position: relative; width: 44px; height: 44px; perspective: 124px; }
.pk-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.pk-face { position: absolute; inset: 0; box-sizing: border-box; border: 2.6px solid currentColor; border-radius: 13px; }
.pk-face.pk-side { opacity: 0; filter: blur(.6px); }
.pk-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; }
.pk-eyes { display: flex; gap: 8px; margin-top: 2px; }
.pk-eye { position: relative; width: 8px; height: 10px; border-radius: 50%; background: currentColor; transition: height .1s; }
.pk-eye::after { content: ''; position: absolute; top: 1.5px; right: 1px; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.pk-cheeks { position: absolute; left: 3px; right: 3px; top: 21px; display: flex; justify-content: space-between; }
.pk-cheeks i { width: 7px; height: 4px; border-radius: 50%; background: #ff7eb6; opacity: .9; }
.pk-mouth { width: 9px; height: 5px; border-bottom: 2.4px solid currentColor; border-radius: 0 0 10px 10px; }
.pk-curl { position: absolute; left: 50%; top: -9px; width: 10px; height: 10px; translate: -50% 0; border: 2.4px solid currentColor; border-color: currentColor currentColor transparent transparent; border-radius: 50%; transform: rotate(-30deg); }

/* Ventana "Pixo te responde" */
.pk-panel {
  position: fixed; right: clamp(12px, 3vw, 26px); bottom: calc(var(--ff-h) + 92px + env(safe-area-inset-bottom)); z-index: 46;
  width: min(360px, calc(100vw - 24px)); max-height: calc(100svh - var(--ff-h) - 120px); overflow: auto;
  background: #14102a; color: #f4f2ff; border-radius: 22px; box-shadow: 0 20px 60px #0008, 0 0 0 2px #2fe08a33;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; transform-origin: 100% 100%;
  opacity: 0; transform: scale(.85) translateY(10px); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.pk-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.pk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #ffffff14; }
.pk-head b { font: 800 17px Outfit, sans-serif; display: block; }
.pk-head small { color: #b7b2d8; }
.pk-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #ffffff1a; color: #fff; font-size: 16px; cursor: pointer; }
.pk-answer { padding: 18px 16px; min-height: 96px; line-height: 1.55; color: #e6e3ff; }
.pk-answer.typing::after { content: '▍'; animation: pk-blink .8s steps(1) infinite; color: #2fe08a; }
@keyframes pk-blink { 50% { opacity: 0; } }
/* Desplegable: se ve una sola pregunta; las demás aparecen al abrirlo */
.pk-select { position: relative; padding: 0 12px 12px; }
.pk-current { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid #ffffff2a; background: #ffffff0d; color: #fff; padding: 12px 14px; border-radius: 12px; font: 700 14.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.pk-current::after { content: '▾'; transition: transform .2s; }
.pk-select.open .pk-current { border-color: #2fe08a; }
.pk-select.open .pk-current::after { transform: rotate(180deg); }
.pk-qs { display: none; flex-direction: column; gap: 4px; margin-top: 6px; }
.pk-select.open .pk-qs { display: flex; animation: pk-drop .2s ease-out; }
@keyframes pk-drop { from { opacity: 0; transform: translateY(-6px); } }
.pk-qs button { text-align: left; border: 0; background: #ffffff0a; color: #f4f2ff; padding: 10px 12px; border-radius: 10px; font: 600 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background .2s; }
.pk-qs button:hover, .pk-qs button.on { background: #2fe08a22; }
.pk-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid #ffffff14; }
.pk-links a, .pk-links span { display: block; text-align: center; padding: 11px 8px; border-radius: 12px; font: 800 14px Outfit, sans-serif; text-decoration: none; }
.pk-links .so { background: #fff; color: #14102a; }
.pk-links .wa { background: #25d366; color: #052e16; }
.pk-links .wa.off { background: #1f5c3a; color: #7fbf9a; cursor: default; }
.pk-links .fb { grid-column: span 1; background: #fff; color: #14102a; }

@media (prefers-reduced-motion: reduce) { .pixo-kid, .pk-hi, .fixed-footer::before, .pf-peek > div { animation: none !important; } }

/* ---------- "Pixo te responde" como chat compacto ---------- */
.pixo-kid { bottom: calc(var(--ff-h) + 10px + env(safe-area-inset-bottom)); }
.pk-panel { width: min(310px, calc(100vw - 20px)); bottom: calc(var(--ff-h) + 84px + env(safe-area-inset-bottom)); border-radius: 18px;
  display: flex; flex-direction: column; max-height: min(460px, calc(100svh - var(--ff-h) - 110px)); overflow: hidden; font-size: 13px; }
.pk-head { padding: 8px 10px 8px 12px; gap: 8px; flex: none; }
.pk-head b { font-size: 14.5px; }
.pk-head small { font-size: 11px; }
.pk-close { width: 26px; height: 26px; font-size: 12px; }
.pk-chat { flex: 1; min-height: 120px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.pk-msg { max-width: 86%; padding: 7px 10px; border-radius: 14px; line-height: 1.4; animation: pk-drop .2s ease-out; word-wrap: break-word; }
.pk-msg.pixo { align-self: flex-start; background: #ffffff12; color: #ecebff; border-bottom-left-radius: 4px; }
.pk-msg.me { align-self: flex-end; background: #2fe08a; color: #0b1a12; font-weight: 700; border-bottom-right-radius: 4px; }
.pk-msg.typing { display: flex; gap: 4px; padding: 10px 12px; }
.pk-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #b7b2d8; animation: pk-dot 1s ease-in-out infinite; }
.pk-msg.typing i:nth-child(2) { animation-delay: .15s; } .pk-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pk-dot { 50% { transform: translateY(-4px); opacity: .5; } }
.pk-select { padding: 8px 10px; flex: none; border-top: 1px solid #ffffff12; }
.pk-current { padding: 8px 10px; font-size: 13px; border-radius: 10px; }
.pk-qs { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 2px); margin: 0; padding: 6px; gap: 2px; background: #1d1840; border: 1px solid #ffffff1f; border-radius: 12px; box-shadow: 0 -10px 30px #0006; max-height: 220px; overflow-y: auto; }
.pk-qs button { padding: 7px 9px; font-size: 12.5px; border-radius: 8px; }
.pk-links { padding: 8px 10px 10px; gap: 6px; flex: none; }
.pk-links a, .pk-links span { padding: 7px 6px; font-size: 12.5px; border-radius: 10px; }
.pk-answer { display: none; }
.pixo-kid[aria-expanded="true"] .pk-hi { display: none; }

/* Caja para escribir a Pixo */
.pk-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #ffffff12; flex: none; }
.pk-input { flex: 1; min-width: 0; background: #ffffff0d; border: 1px solid #ffffff2a; color: #fff; border-radius: 10px; padding: 8px 10px; font: 600 13px 'Plus Jakarta Sans', sans-serif; outline: none; }
.pk-input:focus { border-color: #2fe08a; }
.pk-input::placeholder { color: #b7b2d8; }
.pk-send { flex: none; width: 36px; border: 0; border-radius: 10px; background: #2fe08a; color: #0b1a12; font-size: 15px; cursor: pointer; }
.pk-form.busy .pk-send { opacity: .5; cursor: wait; }
@media (max-width: 560px) { .pk-input { font-size: 16px; } } /* 16px evita el zoom automático en iPhone */