/* ============================================================
 *  Anime System — Baburu
 *  Patrones SVG + máscaras degradadas para profundidad.
 *  Sin gradientes de color, solo textura + sólido.
 *
 *  @mcp-ready    true
 *  @version      2.0.0
 * ============================================================ */

@font-face {
    font-family: 'Fredoka';
    src: url('../resorces/Fonts/Fredoka/Fredoka-VariableFont_wdth\,wght.ttf');
}
@font-face {
    font-family: 'Inter';
    src: url('../resorces/Fonts/InterFont/Inter-VariableFont_slnt,wght.ttf');
}

/* ════════════════════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════════════════════ */
:root {
    --pk: #E3057A;
    --pk-dark: #BA176E;
    --cy: #20C2D7;
    --ye: #f5d76e;
    --pu: #9b59b6;

    --bd-thick: 3px;
    --bd-thicker: 4px;
    --r: 14px;
    --r-sm: 8px;
    --r-lg: 20px;
    --r-pill: 999px;

    --card-bg: #ffffff;
    --card-shadow: 0 2px 8px rgba(0,0,0,.07);
    --card-shadow-hover: 0 8px 24px rgba(227,5,122,.14);
    --body-bg: #f5f5f5;
    --text: #333;
    --text-sec: #666;
    --text-muted: #999;
    --border: #ddd;
    --input-bg: #fff;

    --f-head: 'Fredoka', sans-serif;
    --f-body: 'Inter', sans-serif;

    /* patrones — negro sutil para tema claro */
    --p-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='1.5' fill='%23000' opacity='.07'/%3E%3C/svg%3E");
    --p-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cline x1='8' y1='0' x2='0' y2='8' stroke='%23000' stroke-width='1' opacity='.05'/%3E%3C/svg%3E");
    --p-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='10' y1='0' x2='0' y2='10' stroke='%23000' stroke-width='.8' opacity='.04'/%3E%3Cline x1='0' y1='0' x2='10' y2='10' stroke='%23000' stroke-width='.8' opacity='.04'/%3E%3C/svg%3E");
    --p-stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='2' height='10' fill='%23000' opacity='.05'/%3E%3C/svg%3E");
    --p-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6Q18 12 24 6' fill='none' stroke='%23000' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolyline points='0,6 6,0 12,6' fill='none' stroke='%23000' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='.4' fill='%23000' opacity='.06'/%3E%3C/svg%3E");
    --p-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,0 16,8 8,16 0,8' fill='none' stroke='%23000' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='0' width='8' height='8' fill='%23000' opacity='.04'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23000' opacity='.04'/%3E%3C/svg%3E");
    --p-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpolygon points='7,0 14,14 0,14' fill='none' stroke='%23000' stroke-width='.7' opacity='.04'/%3E%3C/svg%3E");
    --p-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8'%3E%3Cline x1='3' y1='0' x2='3' y2='8' stroke='%23000' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-dots-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23000' opacity='.07'/%3E%3C/svg%3E");
    --p-hatch-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cline x1='12' y1='0' x2='0' y2='12' stroke='%23000' stroke-width='1.3' opacity='.05'/%3E%3C/svg%3E");
    --p-stripe-thick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='4' height='12' fill='%23000' opacity='.05'/%3E%3C/svg%3E");
    --p-diamond-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='12,0 24,12 12,24 0,12' fill='none' stroke='%23000' stroke-width='1' opacity='.05'/%3E%3C/svg%3E");
    --p-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M5 0v5H0v2h5v5h2V7h5V5H7V0H5z' fill='%23000' opacity='.05'/%3E%3C/svg%3E");
    --p-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23000' stroke-width='1' opacity='.05'/%3E%3Ccircle cx='7' cy='7' r='2' fill='none' stroke='%23000' stroke-width='.7' opacity='.04'/%3E%3C/svg%3E");
    --p-rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='none' stroke='%23000' stroke-width='.6' opacity='.05'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23000' opacity='.06'/%3E%3C/svg%3E");
}

body.dark-theme {
    --card-bg: #222;
    --card-shadow: 0 2px 8px rgba(0,0,0,.3);
    --card-shadow-hover: 0 8px 24px rgba(227,5,122,.22);
    --body-bg: #121212;
    --text: #e0e0e0;
    --text-sec: #b0b0b0;
    --text-muted: #777;
    --border: #444;
    --input-bg: #2a2a2a;

    --p-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='1.5' fill='%23fff' opacity='.06'/%3E%3C/svg%3E");
    --p-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cline x1='8' y1='0' x2='0' y2='8' stroke='%23fff' stroke-width='1' opacity='.05'/%3E%3C/svg%3E");
    --p-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='10' y1='0' x2='0' y2='10' stroke='%23fff' stroke-width='.8' opacity='.04'/%3E%3Cline x1='0' y1='0' x2='10' y2='10' stroke='%23fff' stroke-width='.8' opacity='.04'/%3E%3C/svg%3E");
    --p-stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='2' height='10' fill='%23fff' opacity='.05'/%3E%3C/svg%3E");
    --p-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6Q18 12 24 6' fill='none' stroke='%23fff' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolyline points='0,6 6,0 12,6' fill='none' stroke='%23fff' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='.4' fill='%23fff' opacity='.05'/%3E%3C/svg%3E");
    --p-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,0 16,8 8,16 0,8' fill='none' stroke='%23fff' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='0' width='8' height='8' fill='%23fff' opacity='.04'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23fff' opacity='.04'/%3E%3C/svg%3E");
    --p-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpolygon points='7,0 14,14 0,14' fill='none' stroke='%23fff' stroke-width='.7' opacity='.04'/%3E%3C/svg%3E");
    --p-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8'%3E%3Cline x1='3' y1='0' x2='3' y2='8' stroke='%23fff' stroke-width='.8' opacity='.05'/%3E%3C/svg%3E");
    --p-dots-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23fff' opacity='.06'/%3E%3C/svg%3E");
    --p-hatch-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cline x1='12' y1='0' x2='0' y2='12' stroke='%23fff' stroke-width='1.3' opacity='.05'/%3E%3C/svg%3E");
    --p-stripe-thick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='4' height='12' fill='%23fff' opacity='.05'/%3E%3C/svg%3E");
    --p-diamond-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='12,0 24,12 12,24 0,12' fill='none' stroke='%23fff' stroke-width='1' opacity='.05'/%3E%3C/svg%3E");
    --p-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M5 0v5H0v2h5v5h2V7h5V5H7V0H5z' fill='%23fff' opacity='.05'/%3E%3C/svg%3E");
    --p-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23fff' stroke-width='1' opacity='.05'/%3E%3Ccircle cx='7' cy='7' r='2' fill='none' stroke='%23fff' stroke-width='.7' opacity='.04'/%3E%3C/svg%3E");
    --p-rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='none' stroke='%23fff' stroke-width='.6' opacity='.05'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23fff' opacity='.05'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════
   2. PATRONES  (aplicar en cualquier elemento con position)
   ════════════════════════════════════════════════════════════ */
.anime-ptrn { position: relative; }
.anime-ptrn::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
}

.anime-ptrn--dots::before    { background-image: var(--p-dots); }
.anime-ptrn--hatch::before   { background-image: var(--p-hatch); }
.anime-ptrn--cross::before   { background-image: var(--p-cross); }
.anime-ptrn--stripe::before  { background-image: var(--p-stripe); }
.anime-ptrn--wave::before    { background-image: var(--p-wave); }
.anime-ptrn--zigzag::before  { background-image: var(--p-zigzag); }
.anime-ptrn--fine::before    { background-image: var(--p-fine); }
.anime-ptrn--diamond::before { background-image: var(--p-diamond); }
.anime-ptrn--checker::before { background-image: var(--p-checker); }
.anime-ptrn--triangle::before{ background-image: var(--p-triangle); }
.anime-ptrn--vert::before    { background-image: var(--p-vert); }
.anime-ptrn--dots-lg::before { background-image: var(--p-dots-lg); }
.anime-ptrn--hatch-lg::before{ background-image: var(--p-hatch-lg); }
.anime-ptrn--stripe-thick::before { background-image: var(--p-stripe-thick); }
.anime-ptrn--diamond-lg::before   { background-image: var(--p-diamond-lg); }
.anime-ptrn--plus::before   { background-image: var(--p-plus); }
.anime-ptrn--ring::before   { background-image: var(--p-ring); }
.anime-ptrn--rosette::before{ background-image: var(--p-rosette); }

/* ════════════════════════════════════════════════════════════
   3. MÁSCARAS DEGRADADAS  (profundidad: patrón se desvanece)
   ════════════════════════════════════════════════════════════ */
.anime-mask::before {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.anime-mask--t::before  { -webkit-mask-image: linear-gradient(to top,    black 60%, transparent); mask-image: linear-gradient(to top,    black 60%, transparent); }
.anime-mask--b::before  { -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent); }
.anime-mask--l::before  { -webkit-mask-image: linear-gradient(to right,  black 60%, transparent); mask-image: linear-gradient(to right,  black 60%, transparent); }
.anime-mask--r::before  { -webkit-mask-image: linear-gradient(to left,   black 60%, transparent); mask-image: linear-gradient(to left,   black 60%, transparent); }
.anime-mask--tb::before { -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.anime-mask--lr::before { -webkit-mask-image: linear-gradient(to right,  transparent, black 20%, black 80%, transparent); mask-image: linear-gradient(to right,  transparent, black 20%, black 80%, transparent); }
.anime-mask--radial::before { -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 50%, transparent 70%); }

/* ════════════════════════════════════════════════════════════
   4. ANIMACIONES DE PATRÓN
   ════════════════════════════════════════════════════════════ */

/* -- Movimiento orgánico con múltiples paradas (sensación aleatoria) -- */
@keyframes ptrnSlideX {
    0%   { background-position: 0 0; }
    25%  { background-position: 40px 0; }
    50%  { background-position: 12px 0; }
    75%  { background-position: 52px 0; }
    100% { background-position: 0 0; }
}
@keyframes ptrnSlideY {
    0%   { background-position: 0 0; }
    33%  { background-position: 0 50px; }
    66%  { background-position: 0 8px; }
    100% { background-position: 0 0; }
}

/* Deriva errática con rotación */
@keyframes ptrnDrift {
    0%   { transform: translate(0,0) rotate(0deg); }
    20%  { transform: translate(6px,-4px) rotate(.8deg); }
    40%  { transform: translate(-4px,8px) rotate(-.6deg); }
    60%  { transform: translate(8px,3px) rotate(.5deg); }
    80%  { transform: translate(-6px,-5px) rotate(-.4deg); }
    100% { transform: translate(0,0) rotate(0deg); }
}

/* Respiración profunda con microescala */
@keyframes ptrnBreathe {
    0%, 100% { opacity: .12; transform: scale(1); }
    25%      { opacity: .5;  transform: scale(1.01); }
    50%      { opacity: .85; transform: scale(1.015); }
    75%      { opacity: .4;  transform: scale(.99); }
}

/* Crecimiento/encogimiento más notorio */
@keyframes ptrnScale {
    0%, 100% { background-size: 100% auto; }
    40%      { background-size: 160% auto; }
    70%      { background-size: 120% auto; }
}

/* Latido cardíaco (2 pulsos por ciclo) */
@keyframes ptrnPulse {
    0%, 100% { opacity: .15; transform: scale(1); }
    15%      { opacity: .8;  transform: scale(1.08); }
    30%      { opacity: .2;  transform: scale(.98); }
    45%      { opacity: .7;  transform: scale(1.05); }
    60%      { opacity: .15; transform: scale(1); }
}

/* Rotación continua */
@keyframes ptrnRotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

/* Bamboleo vivo */
@keyframes ptrnWobble {
    0%, 100% { transform: rotate(0deg) translate(0,0); }
    15%      { transform: rotate(2.5deg) translate(4px,-3px); }
    35%      { transform: rotate(-2deg) translate(-3px,5px); }
    55%      { transform: rotate(1.2deg) translate(5px,3px); }
    75%      { transform: rotate(-1.8deg) translate(-4px,-2px); }
}

/* — Nuevas animaciones dinámicas — */

/* Caos: movimiento errático multi-eje + escala + rotación */
@keyframes ptrnChaos {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: .3; }
    15%  { transform: translate(8px,-5px) scale(1.1) rotate(1.5deg); opacity: .7; }
    30%  { transform: translate(-6px,10px) scale(.93) rotate(-2deg); opacity: .2; }
    45%  { transform: translate(9px,4px) scale(1.07) rotate(1deg); opacity: .6; }
    60%  { transform: translate(-8px,-6px) scale(1.04) rotate(-.8deg); opacity: .4; }
    75%  { transform: translate(5px,8px) scale(.96) rotate(1.2deg); opacity: .8; }
    100% { transform: translate(0,0) scale(1) rotate(0deg); opacity: .3; }
}

/* Flotación ingrávida */
@keyframes ptrnFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-14px) rotate(1.5deg); }
    50%      { transform: translateY(-6px) rotate(-.8deg); }
    75%      { transform: translateY(-20px) rotate(1deg); }
}

/* Giro con escala pulsante */
@keyframes ptrnSpinScale {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(1.12); }
    50%  { transform: rotate(180deg) scale(.88); }
    75%  { transform: rotate(270deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Estiramiento elástico */
@keyframes ptrnElastic {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    15%      { transform: scaleX(1.15) scaleY(.85); }
    30%      { transform: scaleX(.88) scaleY(1.12); }
    50%      { transform: scaleX(1.06) scaleY(.94); }
    70%      { transform: scaleX(.95) scaleY(1.05); }
    85%      { transform: scaleX(1.03) scaleY(.97); }
}

/* Tremor: vibración sutil de alta frecuencia */
@keyframes ptrnTremor {
    0%, 100% { transform: translate(0,0); }
    10%      { transform: translate(-1px,2px); }
    20%      { transform: translate(2px,-1px); }
    30%      { transform: translate(-2px,-2px); }
    40%      { transform: translate(1px,1px); }
    50%      { transform: translate(-1px,-1px); }
    60%      { transform: translate(2px,2px); }
    70%      { transform: translate(-2px,1px); }
    80%      { transform: translate(1px,-2px); }
    90%      { transform: translate(-1px,1px); }
}

/* Mareo: espiral hipnótica */
@keyframes ptrnSpiral {
    0%   { transform: rotate(0deg) scale(1); opacity: .3; }
    25%  { transform: rotate(90deg) scale(1.06); opacity: .5; }
    50%  { transform: rotate(180deg) scale(1.12); opacity: .7; }
    75%  { transform: rotate(270deg) scale(1.06); opacity: .5; }
    100% { transform: rotate(360deg) scale(1); opacity: .3; }
}

/* ── Clases de animación ── */
.anime-ptrn-anim--slide-x::before    { animation: ptrnSlideX    9s ease-in-out infinite; }
.anime-ptrn-anim--slide-y::before    { animation: ptrnSlideY    11s ease-in-out infinite; }
.anime-ptrn-anim--drift::before      { animation: ptrnDrift     6s ease-in-out infinite; }
.anime-ptrn-anim--breathe::before    { animation: ptrnBreathe   6s ease-in-out infinite; }
.anime-ptrn-anim--scale::before      { animation: ptrnScale     8s ease-in-out infinite; }
.anime-ptrn-anim--pulse::before      { animation: ptrnPulse     4s ease-in-out infinite; }
.anime-ptrn-anim--rotate::before     { animation: ptrnRotate    20s linear infinite; }
.anime-ptrn-anim--wobble::before     { animation: ptrnWobble    5s ease-in-out infinite; }
.anime-ptrn-anim--chaos::before      { animation: ptrnChaos     8s ease-in-out infinite; }
.anime-ptrn-anim--float::before      { animation: ptrnFloat     7s ease-in-out infinite; }
.anime-ptrn-anim--spin-scale::before { animation: ptrnSpinScale 18s linear infinite; }
.anime-ptrn-anim--elastic::before    { animation: ptrnElastic   5s ease-in-out infinite; }
.anime-ptrn-anim--tremor::before     { animation: ptrnTremor    .5s linear infinite; }
.anime-ptrn-anim--spiral::before     { animation: ptrnSpiral    10s linear infinite; }

/* ════════════════════════════════════════════════════════════
   5. CARD
   ════════════════════════════════════════════════════════════ */
.anime-card {
    background: var(--card-bg);
    border: var(--bd-thick) solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.anime-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.anime-card--pk { border-color: var(--pk); }
.anime-card--pk:hover { box-shadow: var(--card-shadow-hover), 0 0 16px rgba(227,5,122,.12); }
.anime-card--cy { border-color: var(--cy); }
.anime-card--cy:hover { box-shadow: var(--card-shadow-hover), 0 0 16px rgba(32,194,215,.12); }
.anime-card--pu { border-color: var(--pu); }
.anime-card--pu:hover { box-shadow: var(--card-shadow-hover), 0 0 16px rgba(155,89,182,.12); }

/* ── Card: capa de patrón (superpuesta) ── */
.anime-card-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.anime-card > *:not(.anime-card-pattern) {
    position: relative;
    z-index: 1;
}

/* ── Card image ── */
.anime-card__img {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #eee;
    position: relative;
}
body.dark-theme .anime-card__img { background: #2a2a2a; }
.anime-card__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s ease;
}
.anime-card:hover .anime-card__img img { transform: scale(1.04); }

/* ── Card body ── */
.anime-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.anime-card__title {
    font-family: var(--f-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}
.anime-card__desc {
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--text-sec);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.anime-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}
.anime-card__footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,.06);
    font-family: var(--f-body);
    font-size: .85rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
body.dark-theme .anime-card__footer { border-top-color: rgba(255,255,255,.06); }

/* ════════════════════════════════════════════════════════════
   6. BADGE
   ════════════════════════════════════════════════════════════ */
.anime-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--f-body);
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.anime-badge--pk   { background: var(--pk); color: #fff; }
.anime-badge--cy   { background: var(--cy); color: #fff; }
.anime-badge--pu   { background: var(--pu); color: #fff; }
.anime-badge--ye   { background: var(--ye); color: #333; }
.anime-badge--outline { background: transparent; border: 2px solid var(--pk); color: var(--pk); }
.anime-badge--abs {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   7. TAG
   ════════════════════════════════════════════════════════════ */
.anime-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-body);
    font-size: .8rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-sm);
    background: rgba(227,5,122,.08);
    color: var(--pk);
    white-space: nowrap;
    transition: background .2s;
}
body.dark-theme .anime-tag { background: rgba(227,5,122,.15); }
.anime-tag:hover { background: rgba(227,5,122,.14); }

/* ════════════════════════════════════════════════════════════
   8. BUTTON
   ── sólido, sin gradientes. patrón en hover.
   ════════════════════════════════════════════════════════════ */
.anime-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--r);
    font-family: var(--f-body);
    font-weight: 700;
    font-size: .9rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.anime-btn:hover { transform: translateY(-2px); }
.anime-btn:active { transform: translateY(0); }

.anime-btn--pk {
    background: var(--pk);
    color: #fff;
    border-color: var(--pk);
}
.anime-btn--pk:hover {
    background: var(--pk-dark);
    box-shadow: 0 4px 16px rgba(227,5,122,.25);
}

.anime-btn--cy {
    background: var(--cy);
    color: #fff;
    border-color: var(--cy);
}
.anime-btn--cy:hover {
    background: #1aafc2;
    box-shadow: 0 4px 16px rgba(32,194,215,.25);
}

.anime-btn--pu {
    background: var(--pu);
    color: #fff;
    border-color: var(--pu);
}
.anime-btn--pu:hover {
    background: #8e44ad;
    box-shadow: 0 4px 16px rgba(155,89,182,.25);
}

.anime-btn--outline {
    background: transparent;
    color: var(--pk);
    border-color: var(--pk);
}
.anime-btn--outline:hover {
    background: var(--pk);
    color: #fff;
}

.anime-btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}
.anime-btn--ghost:hover {
    background: rgba(227,5,122,.08);
    color: var(--pk);
}

.anime-btn--sm  { padding: 6px 16px; font-size: .8rem; border-radius: var(--r-sm); }
.anime-btn--lg  { padding: 14px 32px; font-size: 1rem;  border-radius: var(--r-lg); }

/* ── capa de patrón en hover ── */
.anime-btn-ptrn {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.anime-btn:hover .anime-btn-ptrn { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   9. INPUT
   ════════════════════════════════════════════════════════════ */
.anime-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--r);
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--text);
    background: var(--input-bg);
    transition: border-color .3s, box-shadow .3s;
    outline: none;
}
.anime-input:focus {
    border-color: var(--pk);
    box-shadow: 0 0 0 3px rgba(227,5,122,.1);
}

.anime-input--err {
    border-color: #e74c3c;
}
.anime-input--err:focus {
    box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}

.anime-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.anime-input-group__label {
    font-family: var(--f-body);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
}
.anime-input-group__hint {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   10. PROGRESS
   ════════════════════════════════════════════════════════════ */
.anime-progress {
    width: 100%;
    height: 8px;
    border-radius: var(--r-pill);
    background: rgba(0,0,0,.06);
    overflow: hidden;
}
body.dark-theme .anime-progress { background: rgba(255,255,255,.06); }

.anime-progress__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--pk);
    transition: width .6s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    overflow: hidden;
    min-width: 4px;
}
.anime-progress__fill--cy { background: var(--cy); }
.anime-progress__fill--pu { background: var(--pu); }
.anime-progress__fill--ye { background: var(--ye); }

.anime-progress--thick { height: 14px; }
.anime-progress--thin  { height: 4px; }

@keyframes progressShine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(200%); }
    100% { transform: translateX(200%); }
}
.anime-progress__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: translateX(-100%);
    animation: progressShine 2.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   11. TOGGLE
   ════════════════════════════════════════════════════════════ */
.anime-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.anime-toggle input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.anime-toggle__track {
    width: 44px; height: 24px;
    border-radius: var(--r-pill);
    background: rgba(0,0,0,.1);
    transition: background .3s;
    position: relative;
    flex-shrink: 0;
}
body.dark-theme .anime-toggle__track { background: rgba(255,255,255,.12); }

.anime-toggle__thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute; top: 2px; left: 2px;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.anime-toggle input:checked + .anime-toggle__track { background: var(--pk); }
.anime-toggle input:checked + .anime-toggle__track .anime-toggle__thumb { transform: translateX(20px); }
.anime-toggle__label {
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   12. HERO CARD
   ════════════════════════════════════════════════════════════ */
.anime-hero {
    display: flex;
    align-items: stretch;
    min-height: 200px;
    border-radius: var(--r-lg);
    border: var(--bd-thick) solid var(--pk);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.anime-hero__fig {
    width: 200px;
    min-height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.anime-hero__fig--pk { background-color: var(--pk); }
.anime-hero__fig--cy { background-color: var(--cy); }
.anime-hero__fig--pu { background-color: var(--pu); }
.anime-hero__fig--ye { background-color: var(--ye); }

.anime-hero__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 1;
    background: var(--card-bg);
}
.anime-hero__title {
    font-family: var(--f-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.anime-hero__desc {
    font-family: var(--f-body);
    font-size: .95rem;
    color: var(--text-sec);
    margin: 0;
    line-height: 1.6;
}
@media (max-width:640px) {
    .anime-hero { flex-direction: column; }
    .anime-hero__fig { width: 100%; min-height: 120px; }
}

/* ════════════════════════════════════════════════════════════
   13. RIBBON
   ════════════════════════════════════════════════════════════ */
.anime-ribbon {
    position: relative;
    display: inline-block;
    padding: 6px 18px 6px 14px;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    background: var(--pk);
    line-height: 1.4;
}
.anime-ribbon::after {
    content: '';
    position: absolute;
    right: -14px; top: 0;
    border: 14px solid var(--pk);
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.anime-ribbon--cy { background: var(--cy); }
.anime-ribbon--cy::after { border-color: var(--cy); border-right-color: transparent; border-bottom-color: transparent; }
.anime-ribbon--pu { background: var(--pu); }
.anime-ribbon--pu::after { border-color: var(--pu); border-right-color: transparent; border-bottom-color: transparent; }

/* ════════════════════════════════════════════════════════════
   14. SHAPE (figura decorativa)
   ════════════════════════════════════════════════════════════ */
.anime-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.anime-shape--sm { width: 44px; height: 44px; }
.anime-shape--md { width: 72px; height: 72px; }
.anime-shape--lg { width: 110px; height: 110px; }

.anime-shape--circle  { border-radius: 50%; }
.anime-shape--blob    { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.anime-shape--blob2   { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
.anime-shape--diamond { transform: rotate(45deg); border-radius: 4px; }
.anime-shape--diamond > * { transform: rotate(-45deg); }
.anime-shape--hex     { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.anime-shape--star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.anime-shape--pk  { background-color: var(--pk); }
.anime-shape--cy  { background-color: var(--cy); }
.anime-shape--pu  { background-color: var(--pu); }
.anime-shape--ye  { background-color: var(--ye); }

.anime-shape--bdr {
    border: var(--bd-thick) solid var(--pk);
    background: transparent;
}
.anime-shape--bdr.anime-shape--cy { border-color: var(--cy); }

/* ════════════════════════════════════════════════════════════
   15. SKELETON
   ════════════════════════════════════════════════════════════ */
@keyframes skeletonShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.anime-skeleton {
    border-radius: var(--r-sm);
    background: rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}
body.dark-theme .anime-skeleton { background: rgba(255,255,255,.05); }
.anime-skeleton::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%);
    animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.anime-skeleton--text   { height: 14px; width: 100%; margin-bottom: 8px; }
.anime-skeleton--title  { height: 22px; width: 70%; margin-bottom: 12px; }
.anime-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }
.anime-skeleton--card   { height: 260px; border-radius: var(--r); }

/* ════════════════════════════════════════════════════════════
   16. DIVIDER
   ════════════════════════════════════════════════════════════ */
.anime-divider {
    height: 3px;
    border: none;
    border-radius: 3px;
    margin: 24px 0;
    background: var(--border);
}
.anime-divider--pk { background: var(--pk); }
.anime-divider--cy { background: var(--cy); }

/* ════════════════════════════════════════════════════════════
   17. FILTER BAR
   ════════════════════════════════════════════════════════════ */
.anime-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.anime-filter-btn {
    font-family: var(--f-body);
    font-size: .85rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background: var(--card-bg);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.anime-filter-btn:hover {
    border-color: var(--pk);
    color: var(--pk);
}
.anime-filter-btn.active {
    background: var(--pk);
    color: #fff;
    border-color: var(--pk);
}
body.dark-theme .anime-filter-btn { background: #2a2a2a; }
body.dark-theme .anime-filter-btn.active { background: var(--pk); }

/* ════════════════════════════════════════════════════════════
   18. TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
.anime-heading {
    font-family: var(--f-head);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.anime-heading--xl { font-size: 2rem; }
.anime-heading--lg { font-size: 1.5rem; }
.anime-heading--md { font-size: 1.25rem; }

.anime-text {
    font-family: var(--f-body);
    color: var(--text);
    line-height: 1.6;
}
.anime-text--sec { color: var(--text-sec); }
.anime-text--sm  { font-size: .85rem; }

/* ── Animaciones de texto (sutiles) ── */
@keyframes textGlow {
    from { text-shadow: 0 0 4px rgba(227,5,122,.3); }
    to   { text-shadow: 0 0 12px rgba(227,5,122,.5); }
}
@keyframes textFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes textBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.anime-text--glow   { animation: textGlow 2s ease-in-out infinite alternate; }
.anime-text--float  { animation: textFloat 3s ease-in-out infinite; }
.anime-text--bounce { animation: textBounce 2s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════
   19. FADE IN (entrada)
   ════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anime-fade-in {
    opacity: 0;
    animation: fadeInUp .4s ease forwards;
}
.anime-fade-in:nth-child(1)  { animation-delay: 0ms; }
.anime-fade-in:nth-child(2)  { animation-delay: 60ms; }
.anime-fade-in:nth-child(3)  { animation-delay: 120ms; }
.anime-fade-in:nth-child(4)  { animation-delay: 180ms; }
.anime-fade-in:nth-child(5)  { animation-delay: 240ms; }
.anime-fade-in:nth-child(6)  { animation-delay: 300ms; }
.anime-fade-in:nth-child(7)  { animation-delay: 360ms; }
.anime-fade-in:nth-child(8)  { animation-delay: 420ms; }
.anime-fade-in:nth-child(n+9){ animation-delay: 480ms; }

/* ════════════════════════════════════════════════════════════
   20. GRID / SECTION
   ════════════════════════════════════════════════════════════ */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: var(--gap, 20px);
    width: 100%;
}
@media (max-width:992px) { .anime-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:576px) { .anime-grid { grid-template-columns: 1fr; } }

.anime-section {
    padding: 24px 0;
}
.anime-section__title {
    font-family: var(--f-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════════
   21. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
    .anime-card__title { font-size: 1rem; }
    .anime-filter-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .anime-filter-btn { flex-shrink: 0; }
}