/* ============================================================
   INSPIRELIA — Design System CSS
   Cafetería Atelier de Arte
   Estética: Cálida + Editorial / Inspirado en Buy Me a Coffee
   Compatible con Bootstrap 5 + Tema Delicius
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* Paleta principal */
    --c-accent:       #ffb03b;
    --c-accent-hover: #e69e35;
    --c-accent-soft:  rgba(255, 176, 59, 0.12);
    --c-accent-mid:   rgba(255, 176, 59, 0.25);

    --c-warm:         #d4a373;        /* Café con leche */
    --c-warm-hover:   #bc8a5f;
    --c-warm-soft:    rgba(212, 163, 115, 0.15);

    --c-dark:         #1a1714;        /* Negro cálido */
    --c-dark-2:       #212529;        /* Bootstrap dark */
    --c-surface:      #faf8f5;        /* Blanco crema — fondo principal */
    --c-surface-2:    #f3efe8;        /* Crema más oscura — cards, secciones alternas */
    --c-border:       #e8e2d9;        /* Borde sutil cálido */

    --c-white:        #ffffff;
    --c-text:         #1a1714;
    --c-text-muted:   #7a6f63;
    --c-text-light:   rgba(255, 255, 255, 0.65);

    /* Tipografía — body usa la del tema Delicius */
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', monospace;  /* solo para badges/etiquetas */

    /* Escala tipográfica */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.375rem;
    --text-2xl:   1.75rem;
    --text-3xl:   2.25rem;
    --text-4xl:   3rem;
    --text-5xl:   4rem;

    /* Espaciado */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border radius */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-xl:   40px;
    --radius-2xl:  60px;
    --radius-pill: 9999px;

    /* Sombras */
    --shadow-sm:     0 2px 8px rgba(26, 23, 20, 0.06);
    --shadow-md:     0 8px 24px rgba(26, 23, 20, 0.08);
    --shadow-lg:     0 20px 48px rgba(26, 23, 20, 0.12);
    --shadow-xl:     0 32px 64px rgba(26, 23, 20, 0.16);
    --shadow-accent: 0 12px 32px rgba(255, 176, 59, 0.25);
    --shadow-warm:   0 12px 32px rgba(212, 163, 115, 0.22);

    /* Transiciones */
    --ease-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast:   all 0.2s var(--ease-in-out);
    --transition-base:   all 0.3s var(--ease-smooth);
    --transition-slow:   all 0.5s var(--ease-smooth);
    --transition-bounce: all 0.4s var(--ease-bounce);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

body {
    font-family: var(--font-body);
    color: var(--c-text);
    background-color: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* contiene el parallax horizontal sin cortar el parallax vertical */
}

/*
   h1–h3 heredan font-family del tema Delicius.
   Solo fijamos line-height para consistencia visual.
*/
h1, h2, h3 { line-height: 1.15; }
h4, h5, h6 { line-height: 1.3; }

img {
    max-width: 100%;
    height: auto;
}

/* Override Bootstrap focus ring */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* Date input oscuro */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}


/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */

/* Secciones con padding estándar */
.section     { padding: var(--space-24) 0; }
.section-sm  { padding: var(--space-16) 0; }
.section-lg  { padding: calc(var(--space-24) * 1.5) 0; }

/* Fondos de sección */
.section-cream  { background-color: var(--c-surface-2); }
.section-dark   { background-color: var(--c-dark-2); color: var(--c-white); }
.section-accent { background-color: var(--c-accent); color: var(--c-dark); }

/*
   NOTA: .section-dark hereda color: white en todos sus hijos.
   Para texto secundario usa .text-muted-warm o Bootstrap text-white-50.
*/

/* Contenedor editorial estrecho */
.container-editorial {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Separadores decorativos */
.divider-warm {
    border: none;
    height: 1px;
    background: var(--c-border);
    margin: var(--space-12) 0;
}

.divider-accent {
    border: none;
    height: 2px;
    width: 48px;
    background: var(--c-accent);
    margin: var(--space-4) 0 var(--space-6);
}


/* ============================================================
   4. TIPOGRAFÍA UTILITARIA
   ============================================================ */

/*
   Etiqueta pre-título estilo Buy Me a Coffee.
   Usa --font-mono para diferenciarse visualmente del tema.
*/
.label-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
}

.label-tag.label-dark {
    color: var(--c-warm-hover);
    background: var(--c-warm-soft);
}

.label-tag.label-light {
    color: var(--c-white);
    background: rgba(255,255,255,0.12);
}

/*
   Clases de escala tipográfica.
   NO definen font-family — respetan los encabezados del tema Delicius.
*/
.text-display { font-size: var(--text-5xl); font-weight: 700; line-height: 1.1; }
.text-heading { font-size: var(--text-4xl); font-weight: 700; line-height: 1.15; }
.text-title   { font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; }
.text-subtitle{ font-size: var(--text-xl);  font-weight: 400; line-height: 1.6; }
.text-body    { font-size: var(--text-base); line-height: 1.7; }
.text-small   { font-size: var(--text-sm);  line-height: 1.6; }
.text-caption { font-size: var(--text-xs);  letter-spacing: 0.05em; }

/* Colores de texto utilitarios */
.text-muted-warm { color: var(--c-text-muted) !important; }
.text-accent     { color: var(--c-accent) !important; }
.text-warm       { color: var(--c-warm) !important; }

/* Highlight subrayado cálido en títulos */
.text-highlight {
    position: relative;
    display: inline;
}

.text-highlight::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 6px;
    background: var(--c-accent);
    border-radius: var(--radius-pill);
    opacity: 0.45;
    z-index: -1;
}


/* ============================================================
   5. BOTONES
   ============================================================ */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.75rem;
    transition: var(--transition-base);
    letter-spacing: 0.01em;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Dorado — CTA principal */
.btn-accent {
    background: var(--c-accent);
    color: var(--c-dark);
    box-shadow: var(--shadow-accent);
}

.btn-accent:hover,
.btn-accent:focus-visible {
    background: var(--c-accent-hover);
    color: var(--c-dark);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 176, 59, 0.35);
}

/* Café con leche — CTA secundario */
.btn-warm {
    background: var(--c-warm);
    color: var(--c-white);
    box-shadow: var(--shadow-warm);
}

.btn-warm:hover,
.btn-warm:focus-visible {
    background: var(--c-warm-hover);
    color: var(--c-white);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(212, 163, 115, 0.35);
}

/* Contorno oscuro — sobre fondos claros */
.btn-outline-dark-warm {
    background: transparent;
    color: var(--c-dark);
    border: 1.5px solid var(--c-border);
}

.btn-outline-dark-warm:hover {
    background: var(--c-surface-2);
    border-color: var(--c-warm);
    color: var(--c-dark);
}

/* Contorno claro — sobre fondos oscuros */
.btn-outline-light-warm {
    background: transparent;
    color: var(--c-white);
    border: 1.5px solid rgba(255,255,255,0.25);
}

.btn-outline-light-warm:hover {
    background: var(--c-white);
    color: var(--c-dark);
    border-color: var(--c-white);
}

/* Ghost — links de navegación */
.btn-ghost {
    background: transparent;
    color: var(--c-text-muted);
    border: none;
    padding-left: 0;
}

.btn-ghost:hover {
    color: var(--c-accent);
    background: transparent;
}

/* Icono circular */
.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
    transition: var(--transition-bounce);
}

.btn-icon:hover {
    background: var(--c-accent);
    color: var(--c-dark);
    border-color: var(--c-accent);
    transform: scale(1.08);
}

.btn-icon.btn-icon-dark {
    background: var(--c-dark);
    color: var(--c-white);
    border-color: var(--c-dark);
}

/* Tamaños */
.btn-sm { padding: 0.5rem 1.25rem; font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn-lg { padding: 1rem 2.25rem;   font-size: var(--text-lg);  border-radius: var(--radius-xl); }

@media (max-width: 480px) {
    .btn-full-mobile { width: 100%; justify-content: center; }
}

/* Toggle activo — Bootstrap btn-check genérico */
.btn-check:checked + .btn-outline-light {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: var(--c-dark) !important;
}

/*
   Bootstrap define .btn-check + .btn:hover con variables --bs-btn-* que resetean
   el hover al color base del botón (transparente en outline), haciéndolo invisible
   sobre el fondo oscuro rgba(255,255,255,0.05) de .schedules-selection.
   Sobreescribimos exactamente esa regla dentro del contexto del selector.
*/
.schedules-selection .btn-check + .btn-outline-light-warm:hover {
    background: rgba(255, 176, 59, 0.15);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.schedules-selection .btn-check:checked + .btn-outline-light-warm {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-dark);
}


/* ============================================================
   6. CARDS
   ============================================================ */

/* Base limpia */
.card-clean {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card-clean:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-accent);
}

/* Cream — sobre fondos blancos */
.card-cream {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: var(--transition-base);
}

.card-cream:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Numerada — sección "por qué nosotros" */
.card-feature {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    transition: var(--transition-base);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.card-feature:hover,
.card-feature:focus-visible {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-accent);
    outline: none;
}

/* Barra inferior decorativa */
.card-feature::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-8);
    right: var(--space-8);
    height: 4px;
    background: var(--c-accent);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    opacity: 0;
    transition: var(--transition-base);
}

.card-feature:hover::after,
.card-feature:focus-visible::after { opacity: 1; }

/* Oscura */
.card-dark {
    background: var(--c-dark);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    color: var(--c-white);
    transition: var(--transition-base);
}

.card-dark:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Evento (imagen + texto) */
.card-event {
    background: var(--c-dark-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
    border: none;
}

.card-event:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.card-event .card-img-top {
    height: 220px;
    object-fit: cover;
}

/* Minicard flotante */
.card-float {
    background: var(--c-white);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    box-shadow: var(--shadow-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}


/* ============================================================
   7. BADGES & CHIPS
   ============================================================ */

.badge-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    transition: var(--transition-fast);
    min-width: 36px;
}

.card-feature:hover .badge-number {
    background: var(--c-accent);
    color: var(--c-dark);
}

.badge-warm {
    background: var(--c-warm-soft);
    color: var(--c-warm);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
}

.badge-dark {
    background: var(--c-dark);
    color: var(--c-white);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
}

/* Indicador live */
.dot-live {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--c-accent);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-accent 2s infinite;
}

@keyframes pulse-accent {
    0%   { box-shadow: 0 0 0 0    rgba(255, 176, 59, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 176, 59, 0); }
    100% { box-shadow: 0 0 0 0    rgba(255, 176, 59, 0); }
}


/* ============================================================
   8. HERO & SECCIONES ESPECIALES
   ============================================================ */

/* Blobs decorativos */
.blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    contain: strict;
    max-width: 100vw;
    overflow: hidden;
}

.blob-accent {
    background: radial-gradient(circle, var(--c-accent-soft) 0%, transparent 70%);
    filter: blur(80px);
}

.blob-warm {
    background: radial-gradient(circle, var(--c-warm-soft) 0%, transparent 70%);
    filter: blur(70px);
}

/* Overlays sobre imágenes */
.img-overlay { position: absolute; inset: 0; pointer-events: none; }

.img-overlay-dark-r {
    background: linear-gradient(to right, rgba(26,23,20,0.15), rgba(26,23,20,0.65));
}

.img-overlay-dark-b {
    background: linear-gradient(to bottom, transparent 30%, rgba(26,23,20,0.75));
}

/* ── Stack hero (columna visual del hero) ── */
.img-stack {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-stack-main {
    width: 82%;
    height: 440px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 8px solid rgba(255,255,255,0.06);
    transform: rotate(-3deg);
    transition: var(--transition-slow);
    z-index: 2;
}

.img-stack-main img { width: 100%; height: 100%; object-fit: cover; }

.img-stack-side {
    position: absolute;
    width: 240px; height: 290px;
    right: 0; top: -20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 1;
    transform: rotate(10deg);
    border: 5px solid rgba(255,255,255,0.1);
}

.img-stack-side img { width: 100%; height: 100%; object-fit: cover; }

/* ── Page Hero — encabezado de páginas interiores ── */

/*
   El navbar de Delicius es transparente al inicio con texto blanco,
   asumiendo hero oscuro. En páginas con page-hero claro (section-cream)
   forzamos el estado oscuro del header desde el primer pixel.
   Agrega la clase .page-light al <body> en páginas interiores.
*/
.page-light #header {
    background: var(--c-dark-2) !important;
}

/* El header fijo ocupa ~108px (topbar + branding) */
.page-hero {
    padding-top: calc(108px + var(--space-8)) !important;
    padding-bottom: var(--space-16) !important;
    overflow: visible !important;
}

.page-hero-img-wrap {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Badge: sin animación CSS — el float lo maneja el JS junto con el parallax */
.page-hero-badge {
    position: absolute;
    bottom: 0;
    left: -16px;
    z-index: 3;
    will-change: transform;
}

/* Wrapper para el blob — lo contiene sin afectar al stack */
.page-hero-blob-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Imagen principal — rotada como el hero del home */
.page-hero-img {
    width: 90%;
    height: 380px;
    border-radius: var(--radius-xl);
    border: 6px solid rgba(26, 23, 20, 0.06);
    box-shadow: var(--shadow-xl);
    transform: rotate(-2deg);
    transition: var(--transition-slow);
    overflow: hidden;
    position: relative;
    z-index: 2;
    will-change: transform;
}

.page-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Imagen secundaria — esquina superior derecha */
.page-hero-img-side {
    position: absolute;
    width: 160px;
    height: 180px;
    right: 0;
    top: -16px;
    border-radius: var(--radius-lg);
    border: 4px solid rgba(26, 23, 20, 0.06);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1;
    transform: rotate(6deg);
    will-change: transform;
}

.page-hero-img-side img { width: 100%; height: 100%; object-fit: cover; }

/* Badge flotante — el float y parallax los maneja el JS, sin animación CSS */
.page-hero-badge {
    position: absolute;
    bottom: 0;
    left: -16px;
    z-index: 3;
    will-change: transform;
}

@media (max-width: 991px) {
    .page-hero-img-wrap  { height: 320px; }
    .page-hero-img       { width: 90%; height: 300px; transform: rotate(0); }
    .page-hero-img-side  { display: none; }
    .page-hero-badge     { left: 0; will-change: auto; }
    .page-hero-img,
    .page-hero-img-side  { will-change: auto; }
}

/* ── Stack CTA (sección creative-cta) ── */
.image-stack { position: relative; padding-bottom: 20px; }

.item-main img {
    border-radius: var(--radius-xl);
    border: 10px solid rgba(255, 255, 255, 0.06);
    object-fit: cover;
    width: 100%;
    height: 450px;
}

.item-sub {
    position: absolute;
    bottom: 20px;
    left: -30px;
    z-index: 3;
    min-width: 160px;
    animation: float-y 3.5s ease-in-out infinite;
}

/* CTA redondeada */
.section-cta-rounded {
    border-radius: var(--radius-2xl);
    margin: 0 var(--space-6);
    position: relative;
    overflow: hidden;
}

/* ── Responsivo ── */
@media (max-width: 991px) {
    .section-cta-rounded { margin: 0 var(--space-4); border-radius: var(--radius-xl); }
    .img-stack { height: 380px; }
    .img-stack-main { width: 100%; height: 340px; transform: rotate(0); }
}

@media (max-width: 768px) {
    .item-sub { left: 0; bottom: 0; margin-top: -50px; margin-left: 20px; }
    .item-main img { height: 300px; }
}


/* ============================================================
   9. FORMULARIOS & INPUTS
   ============================================================ */

.input-warm {
    background: var(--c-white);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    color: var(--c-text);
    transition: var(--transition-fast);
    width: 100%;
}

.input-warm:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    outline: none;
}

.input-dark {
    background: #2b3035;
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    color: var(--c-white);
    transition: var(--transition-fast);
    width: 100%;
}

.input-dark:focus,
input[type="date"].input-dark:focus {
    background-color: #2b3035;
    color: var(--c-white);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    outline: none;
}


/* ============================================================
   10. SWIPER / CARRUSEL
   ============================================================ */

.swiper-button-next,
.swiper-button-prev {
    color: var(--c-accent);
    background: rgba(26, 23, 20, 0.8);
    padding: 1.5rem;
    border-radius: 50%;
    width: 24px; height: 24px;
    transition: var(--transition-fast);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--c-accent);
    color: var(--c-dark);
}

.swiper-button-next::after,
.swiper-button-prev::after { font-size: 20px; }

.swiper-pagination-bullet-active { background: var(--c-accent) !important; }


/* ============================================================
   10b. MENÚ ISOTOPE — override de tokens del tema Delicius
   ============================================================ */

/*
   El tema Delicius estiliza .menu-filters y .menu-item correctamente.
   Solo sobreescribimos el color activo y hover para usar --c-accent.
*/
.menu-filters li:hover,
.menu-filters li.filter-active {
    color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}

/*
   El tema usa --background-color en .menu-content span como fondo del truco
   de línea punteada nombre···precio. Sobre section-cream queda un parche blanco.
   Sobreescribimos la variable solo dentro de #menu para que coincida con el fondo.
*/
#menu {
    --background-color: var(--c-surface-2);
}


/* ============================================================
   11. BOTÓN PLAY
   ============================================================ */

.btn-play {
    position: absolute;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 56px; height: 56px;
    background: var(--c-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-dark);
    font-size: 1.5rem;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-play:hover {
    transform: scale(1.1) rotate(5deg);
    background: var(--c-white);
    color: var(--c-dark);
}


/* ============================================================
   12. ANIMACIONES UTILITARIAS
   ============================================================ */

.animate-float      { animation: float-y 4s ease-in-out infinite; }
.animate-float-slow { animation: float-y 6s ease-in-out infinite; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-16px); }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 0.6s var(--ease-smooth) forwards;
}

@keyframes fade-in-up {
    to { opacity: 1; transform: translateY(0); }
}

/* Delays para animaciones escalonadas */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }


/* ============================================================
   13. UTILIDADES ADICIONALES
   ============================================================ */

.letter-spacing-wide  { letter-spacing: 0.08em; }
.letter-spacing-wider { letter-spacing: 0.15em; }

/* Sombras rápidas */
.shadow-accent { box-shadow: var(--shadow-accent); }
.shadow-warm   { box-shadow: var(--shadow-warm); }
.shadow-soft   { box-shadow: var(--shadow-md); }

/* Imágenes */
.img-cover   { width: 100%; height: 100%; object-fit: cover; }
.img-contain { width: 100%; height: 100%; object-fit: contain; }

/* Aspect ratios */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-portrait  { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 16 / 9; }
.aspect-art       { aspect-ratio: 4 / 5; }

.overflow-clip { overflow: hidden; }

/* ── Responsivo ── */
@media (max-width: 768px) {
    .section    { padding: var(--space-16) 0; }
    .section-lg { padding: var(--space-20) 0; }
    .text-display { font-size: var(--text-4xl); }
    .text-heading { font-size: var(--text-3xl); }
    .text-title   { font-size: var(--text-2xl); }
    .card-clean, .card-feature, .card-cream { padding: var(--space-6); }
}

@media (max-width: 480px) {
    .text-display { font-size: var(--text-3xl); }
    .text-heading { font-size: var(--text-2xl); }
}