/* todorodados.com.ar — Estilos custom */

html { scroll-behavior: smooth; }

/* Títulos destacados con la tipografía display */
.font-display { font-family: "Playfair Display", Georgia, serif; }

/* Line clamp */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/* Scrollbar */
.overflow-x-auto::-webkit-scrollbar { height:4px; }
.overflow-x-auto::-webkit-scrollbar-track { background:#e8edf2; border-radius:4px; }
.overflow-x-auto::-webkit-scrollbar-thumb { background:#9fb3c8; border-radius:4px; }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,#d9e2ec 25%,#e8edf2 50%,#d9e2ec 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.select-all { user-select:all; }

/* Hero pattern */
.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,140,0,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(98,125,152,0.18) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 100%);
}

/* Subtle grid pattern overlay */
.grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Card hover lift */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12); }

/* Category card glow on hover */
.cat-card { transition: all 0.25s ease; }
.cat-card:hover {
    border-color: #FF8C00;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.12), 0 8px 20px -4px rgba(16,42,67,0.12);
}

/* Category card con imagen de fondo */
.cat-tile {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(16,42,67,0.35);
}
.cat-tile .cat-bg { transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.cat-tile:hover .cat-bg { transform: scale(1.08); }

/* Subcategorías desplegables en el home */
.cat-wrap { position: relative; }
.cat-wrap .cat-subs {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: #fff;
    border: 1px solid #D9E2EC;
    border-radius: 0.9rem;
    box-shadow: 0 16px 32px -12px rgba(16,42,67,0.28);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    max-height: 280px;
    overflow-y: auto;
}
.cat-wrap:hover .cat-subs,
.cat-wrap.open .cat-subs {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Stats counter animation */
@keyframes countUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.stat-item { animation: countUp 0.5s ease forwards; }
.stat-item:nth-child(2) { animation-delay: 0.1s; }
.stat-item:nth-child(3) { animation-delay: 0.2s; }

/* Smooth image zoom on card hover */
.img-zoom { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.group:hover .img-zoom { transform: scale(1.06); }

/* Badge shine effect */
.badge-shine { position:relative; overflow:hidden; }
.badge-shine::after {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    animation: shine 3s infinite;
}
@keyframes shine { 0%{left:-100%} 20%{left:100%} 100%{left:100%} }

/* Footer gradient */
.footer-gradient {
    background: linear-gradient(135deg, #102A43 0%, #1a324b 50%, #243B53 100%);
}

/* Search input focus glow */
.search-glow:focus {
    box-shadow: 0 0 0 3px rgba(255,140,0,0.18);
}

/* Pulse dot for live stats */
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
.pulse-dot { animation: pulse-dot 2s infinite; }