/* ============================================================
   Piñatitas Mely - Identidad visual
   "Festiva mexicana refinada": rosa mexicano, amarillo papel
   picado, turquesa, fondo crema. Sin caer en lo infantil.
   ============================================================ */

:root {
    /* Paleta */
    --pm-rose:        #E63178;   /* rosa mexicano principal */
    --pm-rose-deep:   #B71F5C;
    --pm-rose-soft:   #FFE2EE;
    --pm-yellow:      #FDC83A;   /* amarillo papel picado */
    --pm-yellow-deep: #E8AE16;
    --pm-turquoise:   #2BB8B0;
    --pm-turquoise-d: #1B8F89;
    --pm-coral:       #FF6F61;
    --pm-purple:      #6B47A8;

    /* Neutrales */
    --pm-cream:       #FFF8EE;   /* fondo papel */
    --pm-cream-2:     #FCEFD9;
    --pm-ink:         #2A1A2E;   /* casi negro vinotinto */
    --pm-ink-soft:    #5A4A60;
    --pm-line:        #EFE0C9;
    --pm-white:       #FFFFFF;

    /* Tipografía */
    --pm-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --pm-font-body:    'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --pm-font-accent:  'Caveat', 'Kalam', cursive;

    /* Sombras */
    --pm-shadow-sm: 0 2px 8px rgba(42, 26, 46, 0.06);
    --pm-shadow-md: 0 6px 20px rgba(42, 26, 46, 0.10);
    --pm-shadow-lg: 0 18px 40px rgba(42, 26, 46, 0.14);

    /* Bordes */
    --pm-radius-sm: 8px;
    --pm-radius:    14px;
    --pm-radius-lg: 22px;

    /* Override Bootstrap */
    --bs-primary: var(--pm-rose);
    --bs-primary-rgb: 230, 49, 120;
    --bs-body-font-family: var(--pm-font-body);
    --bs-body-color: var(--pm-ink);
    --bs-body-bg: var(--pm-cream);
    --bs-border-color: var(--pm-line);
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
    font-family: var(--pm-font-body);
    color: var(--pm-ink);
    background-color: var(--pm-cream);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(253, 200, 58, 0.07) 0%, transparent 38%),
        radial-gradient(circle at 88% 22%, rgba(43, 184, 176, 0.06) 0%, transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(230, 49, 120, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .pm-display {
    font-family: var(--pm-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pm-ink);
}

h1, .pm-h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pm-script {
    font-family: var(--pm-font-accent);
    font-weight: 400;
    color: var(--pm-rose);
    line-height: 1;
}

a { color: var(--pm-rose); text-decoration: none; transition: color .2s; }
a:hover { color: var(--pm-rose-deep); }

::selection { background: var(--pm-yellow); color: var(--pm-ink); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    font-weight: 500;
    border-radius: 999px;
    padding: .65rem 1.5rem;
    letter-spacing: .01em;
    transition: all .25s cubic-bezier(.2, .8, .2, 1);
    border: 1.5px solid transparent;
}

.btn-primary,
.btn-pm {
    background: var(--pm-rose);
    border-color: var(--pm-rose);
    color: #fff;
    box-shadow: 0 4px 14px rgba(230, 49, 120, 0.28);
}
.btn-primary:hover,
.btn-pm:hover {
    background: var(--pm-rose-deep);
    border-color: var(--pm-rose-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(230, 49, 120, 0.35);
    color: #fff;
}

.btn-pm-yellow {
    background: var(--pm-yellow);
    border-color: var(--pm-yellow);
    color: var(--pm-ink);
    box-shadow: 0 4px 14px rgba(253, 200, 58, 0.35);
}
.btn-pm-yellow:hover {
    background: var(--pm-yellow-deep);
    transform: translateY(-1px);
    color: var(--pm-ink);
}

.btn-outline-pm {
    background: transparent;
    border-color: var(--pm-ink);
    color: var(--pm-ink);
}
.btn-outline-pm:hover {
    background: var(--pm-ink);
    color: var(--pm-cream);
}

.btn-pm-ghost {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-color: rgba(42, 26, 46, 0.1);
    color: var(--pm-ink);
}

.btn-lg { padding: .85rem 2rem; font-size: 1.05rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.pm-navbar {
    background: rgba(255, 248, 238, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pm-line);
    padding: .9rem 0;
    transition: padding .3s;
}
.pm-navbar.scrolled { padding: .55rem 0; box-shadow: var(--pm-shadow-sm); }

.pm-logo {
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--pm-ink);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.pm-logo:hover { color: var(--pm-rose); }
.pm-logo-mark {
    width: 36px;
    height: 36px;
    display: inline-block;
    transform: rotate(-8deg);
    transition: transform .4s cubic-bezier(.4, 1.4, .5, 1);
}
.pm-logo:hover .pm-logo-mark { transform: rotate(12deg) scale(1.05); }

.pm-nav-link {
    color: var(--pm-ink);
    font-weight: 500;
    padding: .5rem 1rem;
    position: relative;
    font-size: .95rem;
}
.pm-nav-link::after {
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: .35rem;
    height: 2px;
    background: var(--pm-rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.pm-nav-link:hover,
.pm-nav-link.active { color: var(--pm-rose); }
.pm-nav-link:hover::after,
.pm-nav-link.active::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.pm-hero {
    position: relative;
    padding: 5rem 0 6rem;
    overflow: hidden;
}
.pm-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--pm-rose-soft);
    color: var(--pm-rose-deep);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.pm-hero-title { margin: 1.25rem 0 1.25rem; }
.pm-hero-title .pm-script {
    display: inline-block;
    font-size: 1.3em;
    transform: rotate(-3deg);
    margin: 0 .1em;
}
.pm-hero-lead {
    font-size: 1.15rem;
    color: var(--pm-ink-soft);
    max-width: 540px;
    margin-bottom: 2rem;
}
.pm-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.pm-hero-visual {
    position: relative;
    min-height: 480px;
}

/* Piñata flotante decorativa (SVG inline en HTML) */
.pm-pinata-float {
    animation: pm-bob 6s ease-in-out infinite;
    transform-origin: top center;
    filter: drop-shadow(0 24px 40px rgba(42, 26, 46, 0.18));
}
@keyframes pm-bob {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%     { transform: translateY(-18px) rotate(3deg); }
}

/* Confeti decorativo */
.pm-confetti {
    position: absolute;
    pointer-events: none;
}
.pm-confetti span {
    position: absolute;
    width: 12px; height: 12px;
    opacity: .85;
    animation: pm-fall 8s linear infinite;
}
.pm-confetti span:nth-child(1) { left: 8%;  top: 10%; background: var(--pm-yellow);     transform: rotate(15deg); border-radius: 2px; animation-delay: 0s; }
.pm-confetti span:nth-child(2) { left: 20%; top: 70%; background: var(--pm-turquoise);  transform: rotate(-25deg); border-radius: 50%; animation-delay: 1s; }
.pm-confetti span:nth-child(3) { left: 80%; top: 25%; background: var(--pm-rose);       transform: rotate(40deg); animation-delay: 2.4s; }
.pm-confetti span:nth-child(4) { left: 90%; top: 70%; background: var(--pm-coral);      border-radius: 50%; animation-delay: 1.8s; }
.pm-confetti span:nth-child(5) { left: 50%; top: 5%;  background: var(--pm-purple);     animation-delay: 3.2s; }
@keyframes pm-fall {
    0%   { transform: translateY(-20px) rotate(0); opacity: 0; }
    10%  { opacity: .85; }
    100% { transform: translateY(60vh) rotate(360deg); opacity: 0; }
}

/* ============================================================
   PAPEL PICADO (decoración superior) - SVG repetido en CSS
   ============================================================ */
.pm-papel-picado {
    height: 56px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56' preserveAspectRatio='xMidYMin slice'%3E%3Cpath d='M0,0 L120,0 L120,18 C108,32 96,18 84,30 C72,40 60,22 48,32 C36,44 24,24 12,34 L0,20 Z' fill='%23E63178'/%3E%3Ccircle cx='30' cy='18' r='4' fill='%23FFF8EE'/%3E%3Ccircle cx='60' cy='22' r='3' fill='%23FFF8EE'/%3E%3Ccircle cx='90' cy='16' r='4' fill='%23FFF8EE'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 120px 56px;
}
.pm-papel-picado.alt {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Cpath d='M0,0 L120,0 L120,16 C100,28 80,16 60,32 C40,44 20,22 0,32 Z' fill='%23FDC83A'/%3E%3Ccircle cx='30' cy='14' r='3' fill='%23FFF8EE'/%3E%3Cpath d='M55,18 L65,18 L60,28 Z' fill='%23FFF8EE'/%3E%3Ccircle cx='90' cy='16' r='3' fill='%23FFF8EE'/%3E%3C/svg%3E");
}

/* ============================================================
   SECCIONES
   ============================================================ */
.pm-section { padding: 5rem 0; position: relative; }
.pm-section-eyebrow {
    color: var(--pm-rose);
    font-family: var(--pm-font-accent);
    font-size: 1.8rem;
    line-height: 1;
    display: inline-block;
    transform: rotate(-2deg);
    margin-bottom: .25rem;
}
.pm-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}
.pm-section-lead {
    color: var(--pm-ink-soft);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto;
}

/* ============================================================
   CARDS
   ============================================================ */
.pm-card {
    background: var(--pm-white);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
    padding: 1.5rem;
    transition: all .3s cubic-bezier(.2, .8, .2, 1);
}
.pm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-rose-soft);
}

.pm-category-card {
    display: block;
    background: var(--pm-white);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
    color: var(--pm-ink);
    transition: all .3s;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.pm-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pm-rose-soft) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s;
}
.pm-category-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: var(--pm-shadow-md);
    color: var(--pm-rose-deep);
    border-color: transparent;
}
.pm-category-card:hover::before { opacity: 1; }
.pm-category-card > * { position: relative; z-index: 1; }
.pm-category-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: var(--pm-rose-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--pm-rose);
    font-size: 1.5rem;
    transition: all .3s;
}
.pm-category-card:hover .pm-category-icon {
    background: var(--pm-rose);
    color: #fff;
    transform: scale(1.05) rotate(-5deg);
}
.pm-category-name {
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.pm-product-card {
    background: var(--pm-white);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
    overflow: hidden;
    transition: all .3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pm-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-rose-soft);
}
.pm-product-image {
    aspect-ratio: 1;
    background: var(--pm-cream-2);
    position: relative;
    overflow: hidden;
}
.pm-product-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s;
}
.pm-product-card:hover .pm-product-image img { transform: scale(1.05); }
.pm-product-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.pm-product-cat { font-size: .8rem; color: var(--pm-ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.pm-product-name {
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin: .25rem 0 .75rem;
    color: var(--pm-ink);
}
.pm-product-price { color: var(--pm-rose); font-weight: 600; font-size: 1.1rem; margin-top: auto; }
.pm-product-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--pm-ink-soft);
    font-size: 3rem;
    opacity: .25;
}

/* ============================================================
   PROCESO (Cómo funciona)
   ============================================================ */
.pm-step {
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
}
.pm-step-number {
    font-family: var(--pm-font-display);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pm-yellow);
    -webkit-text-stroke: 2px var(--pm-ink);
    margin-bottom: 1rem;
    display: block;
}
.pm-step-title {
    font-family: var(--pm-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: .75rem;
}
.pm-step-text { color: var(--pm-ink-soft); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.pm-cta {
    background: linear-gradient(135deg, var(--pm-rose) 0%, var(--pm-rose-deep) 100%);
    color: #fff;
    border-radius: var(--pm-radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pm-cta::before, .pm-cta::after {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(253, 200, 58, 0.15);
    pointer-events: none;
}
.pm-cta::before { top: -60px; left: -60px; }
.pm-cta::after  { bottom: -80px; right: -80px; background: rgba(43, 184, 176, 0.2); }
.pm-cta h2 { color: #fff; position: relative; }
.pm-cta .pm-script { color: var(--pm-yellow); }
.pm-cta-text { color: rgba(255,255,255,.92); font-size: 1.1rem; margin: 1rem auto 2rem; max-width: 540px; position: relative; }

/* ============================================================
   FORMULARIOS (Auth)
   ============================================================ */
.pm-auth-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    padding: 3rem 0;
}
.pm-auth-card {
    background: var(--pm-white);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--pm-shadow-lg);
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
}
.pm-auth-title {
    font-size: 1.85rem;
    margin-bottom: .5rem;
    text-align: center;
}
.pm-auth-subtitle {
    text-align: center;
    color: var(--pm-ink-soft);
    margin-bottom: 2rem;
}

.form-control, .form-select {
    background: var(--pm-cream);
    border: 1.5px solid var(--pm-line);
    border-radius: var(--pm-radius-sm);
    padding: .75rem 1rem;
    color: var(--pm-ink);
    transition: all .2s;
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--pm-rose);
    box-shadow: 0 0 0 4px rgba(230, 49, 120, 0.12);
    color: var(--pm-ink);
}
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; }

.form-check-input:checked {
    background-color: var(--pm-rose);
    border-color: var(--pm-rose);
}

.invalid-feedback, .pm-error {
    display: block;
    color: var(--pm-rose-deep);
    font-size: .85rem;
    margin-top: .35rem;
}

/* ============================================================
   ALERTS / FLASH
   ============================================================ */
.pm-alert {
    border-radius: var(--pm-radius-sm);
    padding: .9rem 1.15rem;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.pm-alert-success { background: #E8F7F0; color: #0F6B3F; border-color: #B8E5CC; }
.pm-alert-error   { background: #FCE6EE; color: #8E1240; border-color: #F4BBCF; }
.pm-alert-info    { background: #E5F4F3; color: #14695F; border-color: #B5DDD9; }

/* ============================================================
   FOOTER
   ============================================================ */
.pm-footer {
    background: var(--pm-ink);
    color: rgba(255, 248, 238, 0.85);
    padding: 4rem 0 1.5rem;
    margin-top: 5rem;
    position: relative;
    z-index: 0;
}
.pm-footer h5 {
    color: #fff;
    font-family: var(--pm-font-display);
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}
.pm-footer a { color: rgba(255, 248, 238, 0.7); }
.pm-footer a:hover { color: var(--pm-yellow); }
.pm-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
    margin-top: 3rem;
    text-align: center;
    color: rgba(255, 248, 238, 0.5);
    font-size: .9rem;
}
.pm-footer-logo {
    color: #fff;
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.pm-social {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
}
.pm-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: grid; place-items: center;
    transition: all .2s;
}
.pm-social a:hover { background: var(--pm-rose); color: #fff; }

/* ============================================================
   ANIMACIONES de entrada
   ============================================================ */
.pm-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: pm-fadeUp .8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.pm-delay-1 { animation-delay: .12s; }
.pm-delay-2 { animation-delay: .24s; }
.pm-delay-3 { animation-delay: .36s; }
.pm-delay-4 { animation-delay: .48s; }

@keyframes pm-fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.pm-bg-cream { background: var(--pm-cream-2); }
.pm-bg-white { background: var(--pm-white); }
.pm-divider {
    height: 1px;
    background: var(--pm-line);
    border: none;
    margin: 3rem 0;
}

@media (max-width: 768px) {
    .pm-section { padding: 3.5rem 0; }
    .pm-hero    { padding: 3rem 0 4rem; }
    .pm-cta     { padding: 3rem 1.5rem; }
}

/* ============================================================
   FICHA DE PRODUCTO - pills de opciones
   ============================================================ */
.pm-option-pill {
    cursor: pointer;
    user-select: none;
}
.pm-option-pill > span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .55rem 1.1rem;
    border: 1.5px solid var(--pm-line);
    border-radius: 999px;
    background: var(--pm-white);
    transition: all .2s;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
}
.pm-option-pill > span small {
    font-size: .72rem;
    color: var(--pm-ink-soft);
    font-weight: 400;
}
.pm-option-pill:hover > span { border-color: var(--pm-rose); }
.pm-option-pill.selected > span {
    border-color: var(--pm-rose);
    background: var(--pm-rose-soft);
    color: var(--pm-rose-deep);
}
.pm-option-pill.selected > span small { color: var(--pm-rose-deep); }

.pm-thumb { transition: border-color .2s; }

/* ============================================================
   SEGUIMIENTO DE PEDIDO (timeline)
   ============================================================ */
.pm-tracking {
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow-x: auto;
    gap: .5rem;
    padding-bottom: .5rem;
}
.pm-tracking::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: var(--pm-line);
    z-index: 0;
}
.pm-track-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 70px;
}
.pm-track-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pm-white);
    border: 3px solid var(--pm-line);
    display: grid;
    place-items: center;
    color: var(--pm-line);
    font-size: 1.1rem;
    transition: all .3s;
}
.pm-track-step.done .pm-track-dot {
    background: var(--pm-turquoise);
    border-color: var(--pm-turquoise);
    color: #fff;
}
.pm-track-step.active .pm-track-dot {
    background: var(--pm-rose);
    border-color: var(--pm-rose);
    color: #fff;
    box-shadow: 0 0 0 5px var(--pm-rose-soft);
}
.pm-track-label {
    font-size: .72rem;
    text-align: center;
    color: var(--pm-ink-soft);
    line-height: 1.2;
}
.pm-track-step.done .pm-track-label,
.pm-track-step.active .pm-track-label {
    color: var(--pm-ink);
    font-weight: 500;
}

/* ============================================================
   FIX: que el contenido principal nunca quede tras el footer
   (al desplegar formularios como la dirección en checkout)
   ============================================================ */
main {
    position: relative;
    z-index: 1;
}
.pm-section {
    position: relative;
    z-index: 1;
}

/* Resumen del carrito: sticky seguro que no colapsa la altura del row */
.pm-cart-summary {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}
@media (max-width: 991px) {
    .pm-cart-summary { position: static; }
}