/**
 * SITEBUILDER - Componentes premium
 * Piezas reutilizables para composiciones editoriales/cinemáticas:
 * badges, chips, cards flotantes, glass, overlays, formas decorativas,
 * scroll-reveal. No reemplaza .btn/.card de global.css, los complementa.
 */

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.chip-accent {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}

.chip-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ============================================================
   CARDS FLOTANTES (superposición sobre fotografía/hero)
   ============================================================ */
.card-float {
    background: var(--bg-surface-raised);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-4);
    padding: 24px 28px;
}

.card-float-sm {
    padding: 16px 20px;
    border-radius: var(--radius-lg);
}

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.glass-light {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ============================================================
   MEDIA / FOTOGRAFÍA — contenedores con proporción controlada
   ============================================================ */
.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.media img,
.media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-square { aspect-ratio: 1 / 1; }
.media-portrait { aspect-ratio: 4 / 5; }
.media-landscape { aspect-ratio: 4 / 3; }
.media-wide { aspect-ratio: 16 / 9; }
.media-cinema { aspect-ratio: 21 / 9; }

.overlay-gradient-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.overlay-gradient-top {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

.overlay-solid {
    position: absolute;
    inset: 0;
    background: rgba(10, 9, 6, 0.5);
    pointer-events: none;
}

.overlay-accent {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, black) 0%, color-mix(in srgb, var(--accent-2) 70%, black) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ============================================================
   FORMAS DECORATIVAS
   ============================================================ */
.shape-blob {
    position: absolute;
    border-radius: var(--radius-blob);
    filter: blur(2px);
    z-index: 0;
}

.shape-dot-grid {
    background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.35;
}

.shape-line-v {
    width: 1px;
    background: var(--border-strong);
}

.shape-line-h {
    height: 1px;
    background: var(--border-strong);
}

/* ============================================================
   SECCIÓN — ritmo vertical consistente
   ============================================================ */
.section-pad { padding-block: clamp(64px, 9vw, 140px); }
.section-pad-sm { padding-block: clamp(40px, 6vw, 88px); }
.section-pad-lg { padding-block: clamp(88px, 12vw, 180px); }

.bg-canvas { background: var(--bg-canvas); }
.bg-surface { background: var(--bg-surface); }
.bg-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.bg-inverse h1, .bg-inverse h2, .bg-inverse h3, .bg-inverse h4 { color: var(--text-inverse); }
.bg-inverse p { color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   SCROLL REVEAL — se activa vía assets/js/reveal.js
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

[class*="reveal"][data-delay="1"] { transition-delay: 80ms; }
[class*="reveal"][data-delay="2"] { transition-delay: 160ms; }
[class*="reveal"][data-delay="3"] { transition-delay: 240ms; }
[class*="reveal"][data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   IMAGEN CON ZOOM AL HOVER (para cards de servicios/portfolio)
   ============================================================ */
.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform var(--duration-slow) var(--ease-out); }
.media-zoom:hover img { transform: scale(1.06); }

/* ============================================================
   SUBRAYADO ANIMADO (links editoriales)
   ============================================================ */
.link-underline {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.link-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-base) var(--ease-out);
}

.link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}