/* Archivo: stores.css
   Funcion: Estilo especifico de "Puntos de venta" (distribuidores.php), misma direccion
   "natural/organico" que el resto de paginas ya migradas (ver homepage.css, about.css,
   institutional.css): tonos tierra, formas organicas suaves, acentos botanicos y algo de
   movimiento ambiental. Se carga UNICAMENTE en distribuidores.php (ver includes/header.php)
   y todas las reglas van prefijadas con body.page-stores. */

@keyframes organic-drift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(4deg); }
}

@keyframes gentle-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

/* ---------- Banner de cabecera: formas organicas con movimiento lento ---------- */
body.page-stores .page-hero::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    animation: organic-drift 15s ease-in-out infinite;
}

body.page-stores .page-hero::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    animation: organic-drift 19s ease-in-out infinite reverse;
}

/* ---------- Icono de hoja junto al "eyebrow" ---------- */
body.page-stores .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.page-stores .leaf-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-earth-clay);
    animation: gentle-sway 4s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* ---------- Titulos con mas presencia + subrayado verde a tierra ---------- */
body.page-stores .section-title h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    letter-spacing: -0.01em;
}

body.page-stores .section-title h2::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-earth-clay));
}

/* ---------- Foto del local: forma organica asomando detras del marco ----------
   El "peek" decorativo va en un envoltorio aparte (.store-photo-frame), no en
   .store-photo directamente, porque .store-photo necesita overflow:hidden para
   recortar la foto a sus esquinas redondeadas, lo que cortaria la forma decorativa. */
body.page-stores .store-photo-frame {
    position: relative;
}

body.page-stores .store-photo-frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 140px;
    height: 140px;
    top: -30px;
    right: -30px;
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    background: rgba(185, 118, 79, 0.18);
    animation: organic-drift 16s ease-in-out infinite;
}

/* ---------- Insignia "Sede oficial": tierra en vez del verde de stock ---------- */
body.page-stores .badge-in_stock {
    background: var(--color-earth-cream);
    color: var(--color-earth-clay-dark);
}

/* ---------- Ficha de contacto de la tienda: calidez en vez de blanco liso ---------- */
body.page-stores .store-spotlight-info {
    background: var(--color-earth-cream);
}

/* ---------- CTA band: degradado tierra + formas organicas ---------- */
body.page-stores .cta-band {
    background: linear-gradient(120deg, var(--color-earth-moss), var(--color-primary-dark));
}

body.page-stores .cta-band::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    background: rgba(185, 118, 79, 0.18);
    animation: organic-drift 16s ease-in-out infinite;
}

body.page-stores .cta-band::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    background: rgba(246, 241, 226, 0.08);
    animation: organic-drift 20s ease-in-out infinite reverse;
}