/* Archivo: about.css
   Funcion: Estilo especifico de "Conocenos" (nosotros.php), misma direccion
   "natural/organico" que la portada (ver homepage.css): tonos tierra, formas organicas
   suaves, acentos botanicos y algo de movimiento ambiental. Se carga UNICAMENTE en
   nosotros.php (ver includes/header.php) y todas las reglas van prefijadas con
   body.page-about para dejar claro que es intencionalmente exclusivo de esta pagina. */

@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-about .page-hero::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    animation: organic-drift 15s ease-in-out infinite;
}

body.page-about .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 a los "eyebrow" ---------- */
body.page-about .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.page-about .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-about .section-title h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    letter-spacing: -0.01em;
}

body.page-about .section-title-lg h2 {
    font-size: clamp(2.1rem, 3.6vw, 3.4rem);
}

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

/* ---------- Carrusel de historia: tarjetas con calidez y marco organico ---------- */
body.page-about .history-slide {
    background: var(--color-earth-cream);
    position: relative;
    overflow: hidden;
}

body.page-about .history-slide::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    right: -60px;
    bottom: -60px;
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    background: rgba(185, 118, 79, 0.14);
    pointer-events: none;
}

body.page-about .history-slide-label {
    color: var(--color-earth-clay-dark);
}

@media (hover: hover) {
    body.page-about .history-arrow:hover:not(:disabled) {
        background: var(--color-earth-clay);
    }
}

body.page-about .history-dot.is-active {
    background: var(--color-earth-clay);
}

/* ---------- Seccion de expertos: fondo calido + fotos con marco organico ---------- */
body.page-about .section-soft {
    background:
        radial-gradient(circle at 10% 15%, rgba(185, 118, 79, 0.07), transparent 42%),
        radial-gradient(circle at 90% 85%, rgba(74, 103, 65, 0.08), transparent 42%),
        radial-gradient(circle, rgba(74, 103, 65, 0.06) 1.4px, transparent 1.4px);
    background-size: auto, auto, 26px 26px;
    background-color: var(--color-earth-cream);
}

/* Marco organico (blob) en vez del circulo perfecto de siempre, para las fotos de los
   fundadores/expertos: rompe con la forma generica y encaja con el resto de la pagina. */
body.page-about .expert-card img {
    width: 150px;
    height: 150px;
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    transition: border-radius 0.6s var(--ease-smooth);
}

@media (hover: hover) {
    body.page-about .expert-card:hover img {
        border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    }
}