/* ============================================================
   FRESAS CON CREMA — Sistema de diseño Soft UI / Neumorfismo
   Paleta: blancos cálidos + rosa pastel (color del logo)
   Tipografía: Fraunces (display) + Quicksand (cuerpo / UI)
   ============================================================ */

   :root {
    /* Paleta */
    --bg:            #FBF6F8;   /* fondo general, blanco cálido */
    --surface:       #FDF4F7;   /* superficie de tarjetas */
    --pink-50:       #FFF3F8;
    --pink-100:      #FBE1EC;
    --pink-200:      #F5C7DC;
    --pink-300:      #EFA9C7;
    --pink-400:      #E787AF;
    --pink-500:      #DE6199;   /* acento principal (fresa) */
    --pink-600:      #C64A82;
    --text-dark:     #4A3140;
    --text-muted:    #8E7280;
    --white:         #FFFFFF;

    /* Sombras neumórficas (luz arriba-izquierda, sombra abajo-derecha) */
    --shadow-light:  #FFFFFF;
    --shadow-dark:   #E4C9D6;

    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 12px;

    --font-display: 'Fraunces', serif;
    --font-body: 'Quicksand', sans-serif;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text-dark);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
}

/* ---------- Utilidades Neumórficas ---------- */

.neu-raised {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
    transition: box-shadow .25s ease, transform .25s ease;
}

.neu-raised-sm {
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}

.neu-pressed {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
}

.neu-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 10px 10px 22px var(--shadow-dark), -10px -10px 22px var(--shadow-light);
    transition: transform .3s ease, box-shadow .3s ease;
}
.neu-card:hover {
    transform: translateY(-6px);
    box-shadow: 14px 14px 26px var(--shadow-dark), -14px -14px 26px var(--shadow-light);
}

/* ---------- Tarjeta de producto: ahora con estilo neumórfico (Soft UI) ---------- */
.product-card {
    background: var(--white);
    border-radius: 28px;
    box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
    transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 16px 16px 30px var(--shadow-dark), -16px -16px 30px var(--shadow-light);
}
.desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.neu-btn {
    background: linear-gradient(145deg, var(--pink-400), var(--pink-500));
    color: var(--white);
    border-radius: 999px;
    box-shadow: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    font-family: var(--font-body);
    font-weight: 700;
}
.neu-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.neu-btn:active {
    box-shadow: inset 4px 4px 10px var(--pink-600), inset -4px -4px 10px var(--pink-300);
    transform: translateY(0);
}

.neu-btn-round {
    background: var(--surface);
    color: var(--pink-500);
    border-radius: 50%;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow .15s ease, transform .15s ease;
}
.neu-btn-round:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

/* Botones de redes sociales (footer) */
.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--pink-600);
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    transition: transform .15s ease, color .15s ease, box-shadow .15s ease;
}
.social-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}
.social-btn:hover {
    color: var(--pink-500);
    transform: translateY(-2px);
}
.social-btn:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    transform: translateY(0);
}

.badge-pill {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: .04em;
    padding: 4px 14px;
    border-radius: 999px;
}
.badge-nuevo   { background: var(--pink-500); color: var(--white); }
.badge-favorito{ background: var(--pink-100); color: var(--pink-600); }

/* ---------- Botón "Ver detalles" en hover sobre imagen de producto ---------- */
.ver-detalles-btn {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    color: var(--pink-600);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(74, 49, 64, 0.18);
}

/* ---------- Divisor ondulado entre secciones ---------- */
.cream-divider {
    display: block;
    width: 100%;
    height: 72px;
    line-height: 0;
    background: var(--wave-from, var(--bg));
    margin: 0;
    overflow: hidden;
}
.cream-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}
.cream-divider path {
    fill: var(--wave-to, var(--surface));
}

/* ---------- Scrollbar carrito ---------- */
.scroll-soft::-webkit-scrollbar { width: 6px; }
.scroll-soft::-webkit-scrollbar-thumb { background: var(--pink-200); border-radius: 10px; }

/* ---------- Animaciones ---------- */
@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(4deg); }
}
.animate-floaty { animation: floaty 6s ease-in-out infinite; }

@keyframes slideInCart {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.cart-open { animation: slideInCart .3s ease forwards; }

@media (prefers-reduced-motion: reduce) {
    .animate-floaty, .neu-card, .neu-btn { animation: none !important; transition: none !important; }
}

/* ---------- Navbar desktop (pills neumórficos) ---------- */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--surface);
    border: 1px solid rgba(222, 97, 153, 0.18);
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-link::after { display: none; }
.nav-link:hover {
    color: var(--pink-600);
    border-color: rgba(222, 97, 153, 0.35);
    transform: translateY(-1px);
}
.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
    border-color: transparent;
    box-shadow: 5px 5px 12px rgba(198, 74, 130, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.7);
}
.nav-link.active:hover {
    color: #fff;
    filter: brightness(1.04);
}
.nav-link i {
    color: var(--pink-500);
}
.nav-link.active i {
    color: #fff;
}

/* ---------- Nav inferior tipo app (móvil) ---------- */
.app-bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--pink-100);
    border-radius: 22px;
    box-shadow:
        0 10px 28px rgba(198, 74, 130, 0.18),
        0 2px 8px rgba(74, 49, 64, 0.08);
}
.app-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    margin: 0;
    padding: 6px 4px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    border-radius: 16px;
    transition: color .2s ease, background .2s ease, transform .15s ease;
    cursor: pointer;
}
.app-bottom-nav__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pink-50);
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--pink-100);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.app-bottom-nav__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
.app-bottom-nav__item span:last-child {
    color: inherit;
}
.app-bottom-nav__item.is-active {
    color: var(--pink-600);
}
.app-bottom-nav__item.is-active .app-bottom-nav__icon {
    background: linear-gradient(145deg, var(--pink-400), var(--pink-500));
    color: #fff;
    box-shadow: 0 6px 14px rgba(222, 97, 153, 0.35);
}
.app-bottom-nav__item:active {
    transform: scale(0.96);
}
.app-bottom-nav__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(198, 74, 130, 0.4);
}
body {
    padding-bottom: 0;
}
@media (max-width: 767px) {
    body {
        padding-bottom: 88px;
    }
    footer {
        margin-bottom: 8px;
    }
}
@media (min-width: 768px) {
    .app-bottom-nav {
        display: none !important;
    }
}

/* ============================================================
   ADICIONES — pégalas al final de tu archivo CSS existente.
   No modifican paleta, tipografía ni las clases neu-* actuales.
   ============================================================ */

/* Revelado al hacer scroll — secciones y bloques */
.reveal-section .reveal-block {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .75s cubic-bezier(0.22, 1, 0.36, 1),
        transform .75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal-section.is-visible .reveal-block {
    opacity: 1;
    transform: translateY(0);
}

/* Compatibilidad con tarjetas sueltas (otras páginas) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* Estrellas de testimonios: tamaño consistente, usa el rosa de acento ya definido */
figure blockquote + figcaption,
figure .flex.gap-1 {
    letter-spacing: 2px;
}

/* Icono de chevron en el acordeón de preguntas frecuentes */
details > summary {
    outline-offset: 4px;
}
details[open] summary i[data-lucide="chevron-down"] {
    transform: rotate(180deg);
}

/* ---------- Búsqueda de tienda ---------- */
.tienda-search {
    background: #fff;
    border: 1px solid rgba(222, 97, 153, 0.28);
    box-shadow:
        inset 4px 4px 10px rgba(228, 201, 214, 0.45),
        inset -4px -4px 10px rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(74, 49, 64, 0.04);
}
.tienda-search:focus-within {
    border-color: rgba(222, 97, 153, 0.55);
    box-shadow:
        inset 3px 3px 8px rgba(228, 201, 214, 0.35),
        inset -3px -3px 8px rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(222, 97, 153, 0.14);
}
.tienda-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.tienda-card-hide {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tienda-search {
        transition: none;
    }
}