/* ======== VARIABLES & FUENTES ======== */
:root {
    --palm-dark: #004d2b;
    --palm-primary: #006837;
    --palm-gold: #b88317; 
    --bg-soft: #f8fcf9;
    --white: #ffffff;
    --shadow-soft: 0 10px 40px rgba(0,0,0,0.06);
    --shadow-hover: 0 20px 50px rgba(0, 104, 55, 0.15);

    /* FUENTES ESPECÍFICAS PEDIDAS */
    --font-heading: 'Roboto Slab', serif;  /* Títulos */
    --font-body: 'Inter', sans-serif;      /* Párrafos */
    --font-ui: 'Poppins', sans-serif;      /* Botones/Etiquetas */
}

  html, body {
             max-width: 100%;
             overflow-x: hidden;
      }


body { font-family: var(--font-body); color: #444; background-color: #fff; overflow-x: hidden; line-height: 1.6; }

/* ======== HERO AMIGABLE ======== */
.hero-friendly {
    position: relative;
    background: url('../../assets/images/rse-2000x1123.jpg') center/cover fixed;
    height: 60vh; min-height: 450px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0 0 50px 50px; margin-bottom: 60px;
}
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 50, 20, 0.75); border-radius: 0 0 50px 50px; }

.hero-content { position: relative; z-index: 2; padding: 20px; }

.hero-content h1 {
    font-family: var(--font-heading); color: #fff; font-size: 3.5rem; font-weight: 700; margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.hero-content p {
    color: rgba(255,255,255,0.95); font-size: 1.15rem; max-width: 750px; margin: 0 auto 30px; font-weight: 300;
}
.badge-pill {
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); padding: 8px 25px; border-radius: 50px;
    color: var(--white); font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1.5px; margin-bottom: 20px; display: inline-block; border: 1px solid rgba(255,255,255,0.4);
}
.btn-scroll-down {
    color: #fff; font-size: 2.5rem; animation: float 2s infinite ease-in-out; display: inline-block; opacity: 0.8;
}
@keyframes float { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(10px);} }

/* ======== ESTADÍSTICAS ======== */
.stats-section { padding-bottom: 60px; margin-top: -50px; position: relative; z-index: 10; }
.stat-box {
    background: #fff; padding: 35px; border-radius: 25px; text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: 0.3s;
    border-bottom: 5px solid var(--palm-gold);
}
.stat-box:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.stat-box .num {
    font-family: var(--font-heading); font-size: 2.8rem; color: var(--palm-primary); font-weight: 800; margin: 0; line-height: 1;
}
.stat-box .lbl {
    font-family: var(--font-ui); font-size: 0.9rem; color: #777; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}

/* ======== PROYECTOS (FLIP CARDS) ======== */
.projects-section { padding: 60px 0 100px; background-color: var(--bg-soft); }
.section-title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--palm-dark); font-weight: 700; margin-bottom: 10px; }
.section-desc { font-family: var(--font-body); color: #666; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* Contenedor Flip */
.friendly-flip-card {
    background-color: transparent; width: 100%; height: 450px;
    perspective: 1000px; cursor: pointer;
}

/* El elemento que gira */
.flip-inner {
    position: relative; width: 100%; height: 100%; text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    box-shadow: var(--shadow-soft); border-radius: 25px;
}

/* ACTIVAR GIRO AL CLIC (Clase agregada por JS/HTML) */
.friendly-flip-card.flipped .flip-inner { transform: rotateY(180deg); }

/* Caras */
.flip-front, .flip-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 25px; overflow: hidden;
}

/* --- FRENTE --- */
.flip-front { background-color: #fff; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.front-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 50, 20, 0.95), transparent 60%); }

.front-content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 30px; text-align: left; color: #fff;
}
.cat-badge {
    background: var(--palm-gold); color: #fff; padding: 5px 15px; border-radius: 20px;
    font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
}
.front-content h3 {
    font-family: var(--font-heading); font-size: 1.8rem; margin: 15px 0 10px; font-weight: 700;
}
.click-hint { font-family: var(--font-ui); font-size: 0.85rem; opacity: 0.9; font-weight: 500; display: block; margin-top: 5px; color: var(--palm-gold); }

/* --- REVERSO --- */
.flip-back {
    background: #fff; color: #333; transform: rotateY(180deg);
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--palm-primary);
}
.back-content { padding: 40px; }
.icon-circle {
    width: 80px; height: 80px; background: var(--palm-light); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;
    color: var(--palm-primary); font-size: 2.5rem;
}
.back-content h3 { font-family: var(--font-heading); color: var(--palm-primary); font-size: 1.8rem; margin-bottom: 20px; font-weight: 700; }
.back-content p { font-family: var(--font-body); font-size: 1.05rem; color: #555; line-height: 1.7; margin-bottom: 25px; }
.return-hint { font-family: var(--font-ui); font-size: 0.9rem; color: #999; font-weight: 600; text-transform: uppercase; }

/* ======== MAPA AMIGABLE ======== */
.map-friendly-section { padding: 80px 0; background: #fff; }
.map-subtitle { font-family: var(--font-ui); color: var(--palm-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; display: block; margin-bottom: 10px; }
.map-title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--palm-dark); font-weight: 700; margin-bottom: 15px; }
.map-desc { font-family: var(--font-body); color: #666; margin-bottom: 30px; font-size: 1.1rem; }

.map-info-panel {
    background: var(--bg-soft); padding: 40px; border-radius: 30px; height: 550px;
    display: flex; flex-direction: column;
}
.location-scroller {
    flex-grow: 1; overflow-y: auto; padding-right: 10px; margin-top: 20px;
}
.location-scroller::-webkit-scrollbar { width: 6px; }
.location-scroller::-webkit-scrollbar-thumb { background-color: #d1e7dd; border-radius: 10px; }

.loc-item {
    background: #fff; padding: 15px 20px; margin-bottom: 12px; border-radius: 15px;
    font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; color: #555;
    cursor: pointer; transition: 0.2s; border: 1px solid transparent;
    display: flex; align-items: center; gap: 15px;
}
.loc-item i { color: var(--palm-gold); font-size: 1.2rem; }
.loc-item:hover, .loc-item.active {
    border-color: var(--palm-primary); color: var(--palm-primary); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateX(5px);
}

.map-frame {
    height: 550px; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-soft);
    border: 8px solid #fff;
}
#mapa-influencia { width: 100%; height: 100%; }

/* Responsive */
@media (max-width: 991px) {
    .hero-friendly h1 { font-size: 2.5rem; }
    .map-info-panel { height: auto; max-height: 400px; }
    .map-frame { height: 400px; }
    .hero-friendly { border-radius: 0 0 30px 30px; }
}