/* =========================================================
   GIRAFE Planet – versión PRO final
   (compatible con girafe-planet.js actual)
   ========================================================= */
:root{
  --planet-brand:    #ff7979;
  --planet-brand-600:#ff5e5e;
  --planet-blue:     #3b82f6;

  --planet-bg:       #fff7f8;
  --planet-bg-soft:  rgba(255,247,248,.9);
  --planet-border:   #f3d2d6;
  --planet-surface:  #fff;

  --planet-radius:   16px;
  --planet-radius-lg:22px;
  --planet-pill:     999px;

  --planet-text:     #0f172a;
  --planet-muted:    #475569;

  --planet-shadow-soft: 0 8px 24px rgba(255,121,121,.10);
  --planet-shadow-card: 0 18px 44px rgba(0,0,0,.16);
  --planet-shadow-map:  0 22px 60px rgba(255,121,121,.20);
}

/* =========================================================
   Layout / contenedor general
   ========================================================= */
.planet-wrap{
  max-width:1469px;
  margin:8px auto 36px;
  padding:0 16px;
  color:var(--planet-text);
  position:relative;
  z-index:1;
}

.planet-hero{ text-align:center; }
.planet-title{
  text-align:center;
  margin:8px auto 6px;
  font:800 clamp(1.35rem, 2.2vw, 1.9rem)/1.15 system-ui,-apple-system,Segoe UI,Inter,Roboto;
  max-width:min(780px, 90%);
  letter-spacing:-.02em;
}
.planet-subtext{
  font-size:clamp(.95rem, 1.2vw, 1.05rem);
  max-width:78ch;
  margin:0 auto 20px;
  color:var(--planet-muted);
  text-align:center;
}

/* =========================================================
   CTA inferior
   ========================================================= */
.planet-cta-wrap{
  display:flex;
  justify-content:center;
  margin:18px auto 46px;
  max-width:1469px;
  padding:0 16px;
}
.planet-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--planet-pill);
  background:linear-gradient(135deg,var(--planet-brand) 0%, #ff9f9f 100%);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border:0;
  box-shadow:0 12px 30px rgba(255,121,121,.30);
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
  letter-spacing:.01em;
}
.planet-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 35px rgba(255,121,121,.36);
  filter:saturate(1.05);
}

/* =========================================================
   Toolbar (desktop first)
   ========================================================= */
.planet-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:var(--planet-pill);
  background:var(--planet-bg-soft);
  border:1px solid rgba(255,121,121,.18);
  backdrop-filter:blur(6px);
  box-shadow:var(--planet-shadow-soft);
}

.planet-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
}
.planet-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

/* =========================================================
   Chips / filtros
   ========================================================= */
.planet-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.planet-chip,
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:var(--planet-pill);
  padding:7px 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.04);
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
  transition:all .15s ease-out;
  box-shadow:0 5px 14px rgba(0,0,0,.03);
  white-space:nowrap;
  line-height:1;
}
.planet-chip[data-filter="person"]{
  background:rgba(59,130,246,.12);
  color:#0f4fb4;
  border-color:rgba(59,130,246,.25);
}
.planet-chip[data-filter="gproject"]{
  background:rgba(255,121,121,.16);
  color:#d84242;
  border-color:#ffd6db;
}
.planet-chip.is-active{
  box-shadow:0 10px 28px rgba(255,121,121,.18);
  border-color:currentColor;
  transform:translateY(-.5px);
}

/* =========================================================
   Buscador
   ========================================================= */
.planet-search-wrap{ position:relative; flex:0 0 auto; }
.planet-search{
  height:36px;
  border:1px solid #f0dbe0;
  border-radius:var(--planet-pill);
  padding:7px 12px;
  outline:none;
  background:#fff;
  box-shadow:0 8px 24px rgba(255,121,121,.08);
  font-size:.92rem;
  min-width:220px;
  color:var(--planet-text);
}
.planet-search::placeholder{ color:#9aa3af; }
.planet-search:focus{
  border-color:var(--planet-brand);
  box-shadow:0 0 0 3px rgba(255,121,121,.16);
}
.planet-search-toggle{ display:none; }

/* =========================================================
   Botones derecha
   ========================================================= */
.planet-geo,
.planet-paris,
.planet-world,
.planet-helpbtn,
.planet-fsbtn{
  width:34px;
  height:34px;
  border-radius:var(--planet-pill);
  border:1px solid var(--planet-border);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.07);
  transition:transform .12s ease-out, box-shadow .12s ease-out;
  font-size:16px;
}
.planet-geo:hover,
.planet-paris:hover,
.planet-helpbtn:hover,
.planet-fsbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* =========================================================
   Mapa
   ========================================================= */
.planet-map{
  height:var(--planet-h,72vh);
  border-radius:var(--planet-radius-lg);
  border:1px solid var(--planet-border);
  box-shadow:var(--planet-shadow-map);
  overflow:hidden;
  margin-bottom:10px;
  background:#fff;
}

/* fullscreen */
.planet-fs-active .planet-wrap{
  max-width:100%;
  margin:0;
  padding:0;
}
.planet-fs-active #girafe-planet-map,
.planet-fs-active .planet-map{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  border-radius:0 !important;
  z-index:9999 !important;
  box-shadow:none !important;
  border:0 !important;
}
.planet-fs-active .planet-toolbar{
  position:fixed;
  top:11%;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  width:min(980px, 94vw);
  background:rgba(255,247,248,.95);
}
.planet-fs-active .planet-cta-wrap{ display:none !important; }

/* =========================================================
   Popup base (Mapbox)
   ========================================================= */
.mapboxgl-popup{
  z-index:10;
}
.mapboxgl-popup-content{
  padding:0!important;
  border-radius:var(--planet-radius-lg);
  box-shadow:var(--planet-shadow-card);
  max-height:90vh!important;
  overflow:hidden!important;
  background:#fff;
}
.planet-popup{
  display:flex;
  flex-direction:column;
  max-width:340px;
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto;
  color:#111827;
  position:relative; /* para overlay de tipo proyecto */
}
.planet-popup--gproject{ max-width:380px; }

/*
 * Project label overlay (nombre del proyecto sobre la imagen)
 */
.planet-popup--gproject .pp-type{
  position:absolute;
  top:12px;
  left:12px;
  font-size:.625rem; /* ~10px */
  padding:2px 6px;
  margin:0;
  z-index:10;
  display:inline-block;
}

/* =========================================================
   Media / Carrusel
   ========================================================= */
.pp-media{
  position:relative;
  border-radius:var(--planet-radius-lg) var(--planet-radius-lg) 0 0;
  overflow:hidden;
  background:#000;
}
.pp-carousel{
  position:relative;
  width:100%;
  height:210px;
}
.cr-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .25s ease-out;
}
.cr-item{
  flex:0 0 100%;
  width:100%;
  height:100%;
  position:relative;
  opacity:1;
}
.cr-item img,
.cr-item iframe{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  display:block;
}

/* nav */
.cr-prev,.cr-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;height:30px;
  border-radius:var(--planet-pill);
  border:0;
  background:rgba(255,255,255,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  font-size:18px;
  z-index:2;
}
.cr-prev{ left:8px; }
.cr-next{ right:8px; }

.cr-dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:2;
}
.cr-dot{
  width:7px;height:7px;
  border-radius:var(--planet-pill);
  border:0;
  background:rgba(255,255,255,.7);
  cursor:pointer;
}
.cr-dot.is-active{ background:var(--planet-brand); }

/* =========================================================
   Cuerpo tarjeta
   ========================================================= */
.pp-main{
  padding:14px 16px 16px;
}

.pp-row-top{
  display:flex;
  align-items:flex-start;
  gap:0px;
}

.pp-title{
  margin:0 0 5px;
  font:800 1.05rem/1.25 system-ui,-apple-system,Segoe UI,Inter,Roboto;
  letter-spacing:-.01em;
}

.pp-meta-line{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  font-size:.78rem;
  align-items:center;
}

.pp-type{
  background:#fff0f2;
  border:1px solid #ffd6db;
  border-radius:var(--planet-pill);
  padding:2px 8px;
  font-weight:800;
  color:var(--planet-brand-600);
}
.pp-addr{ color:#6b7280; }

/* Tags gp */
.pp-tag{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:var(--planet-pill);
  padding:2px 6px;
  font-size:.75rem;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
}
.pp-tag-actor{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.30);
  color: #0f4fb4;
  margin: 0 0 0 22px;
}
.pp-tag-enjeu{
  background:rgba(255,121,121,.12);
  border-color:#ffd6db;
  color:#d84242;
}
/* Non-profit tag (fallback texto) */
.pp-tag-mode{
  color:#887a7a;
  border:1px solid #a4a1a1;
  border-radius:var(--planet-pill);
  padding:0 8px;
  font-size:.60rem;
  font-weight:800;
}

/* Non-profit badge (imagen) */
.pp-np-badge{
  height:38px;
  border-radius:var(--planet-pill);
}

/* Sponsor */
.pp-sponsor{
  margin-top:6px;
  font-size:.84rem;
  color:#475569;
}
.pp-sponsor-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
}
.pp-sponsor-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:#d84242;
  font-style: italic;
}

.pp-sponsor-logo{
  width:18px;
  height:18px;
  border-radius:4px;
  object-fit:cover;
}

.pp-title-block{
    min-width: 53%;
    
}

/* Share btn */
.pp-share{
  flex:0 0 auto;
  align-self:flex-start;
  width:32px;height:32px;
  border-radius:var(--planet-pill);
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .12s ease-out;
  margin-left:38%;
}
.pp-share:hover{ transform:translateY(-1px); }

/* excerpt */
.pp-ex{
  margin:10px 0 10px;
  color:#374151;
  font-size:.92rem;
}

/* buttons */
.pp-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:12px;
  background:var(--planet-brand);
  color:#fff;
  border:0;
  font-weight:800;
  cursor:pointer;
  font-size:.88rem;
  box-shadow:0 8px 20px rgba(255,121,121,.25);
  transition:transform .12s ease-out, filter .12s ease-out;
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05); }

.btn-light{
  background:#fff;
  color:#111827;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:9px 12px;
  font-weight:700;
  cursor:pointer;
  font-size:.88rem;
}

/* =========================================================
   Contacto
   ========================================================= */
.pp-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#fff7f7;
  border:1px solid #ffe0e0;
  border-radius:12px;
  padding:8px 10px 10px;
  margin-top:10px;
}
.pp-contact[hidden]{ display:none!important; }

.pp-field{ display:flex; flex-direction:column; gap:3px; }
.pp-field-label{ font-size:.78rem; color:#6b7280; }

.pp-contact-subject,
.pp-contact-email{
  width:100%;
  height:34px;
  border:1px solid #f3d2d6;
  border-radius:10px;
  font-size:.88rem;
  padding:4px 9px;
  background:#fff;
}

.pp-contact-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}

.pp-contact-status{
  font-size:.75rem;
  color:#64748b;
}
.pp-contact-status.is-error{ color:#b91c1c; }

.pp-contact.is-sent .pp-field,
.pp-contact.is-sent .pp-contact-actions{ display:none; }
.pp-contact.is-sent .pp-contact-status{
  color:#047857;
  font-weight:700;
}

/* =========================================================
   Voir plus / contenido largo + bloques extra
   ========================================================= */
.pp-more{
  border-top:1px dashed #f0dbe0;
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:15vh;
  overflow-y:auto;
  margin-top:10px;
  scrollbar-width:thin;
}
.pp-more[hidden]{ display:none!important; }
.pp-more-inner{
  font-size:.9rem;
  color:#374151;
  line-height:1.45;
}

/* Skills */
.pp-skills{ margin-top:6px;}
.pp-skills-label{
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:4px;
  font-weight:700;
}
.pp-skills-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pp-skill-chip{
  background:#ffeaea;
  color:#c93030;
  padding:4px 10px;
  border-radius:var(--planet-pill);
  font-size:.78rem;
  font-weight:800;
  border:1px solid #ffd0d0;
}

/* Type d'échange recherché */
.pp-exchange{
  margin-top:6px;
}
.pp-exchange-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pp-exchange-chip{
  background:#e2f2ff;
  color:#0f4fb4;
  padding:4px 10px;
  border-radius:var(--planet-pill);
  font-size:.78rem;
  font-weight:700;
  border:1px solid #c4e0ff;
}

/* Team (Joignez l'équipe actuelle) */
.pp-team{
  margin-top:8px;
  padding-top:6px;
  border-top:1px dashed #f0dbe0;
}
.pp-team-header{
  display:flex;
  align-items:center;
  justify-content:start;
  gap:8px;
  margin-bottom:4px;
}
.pp-team-note{
  font-size:.86rem;
  color:#4b5563;
  margin-bottom:4px;
}
.pp-team-members{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pp-team-chip{
  border-radius:var(--planet-pill);
  border:1px solid #e5e7eb;
  background:#fff;
  padding:4px 10px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:2px;
  box-shadow:0 6px 14px rgba(0,0,0,.03);
  transition:transform .12s ease-out, box-shadow .12s ease-out;
}
.pp-team-chip:hover{
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transform:translateY(-0.5px);
}
.pp-team-name{}
.pp-team-sep{ opacity:.7; }
.pp-team-role{ opacity:.8; }

/* =========================================================
   Panel de ayuda
   ========================================================= */
.planet-infopanel[hidden]{ display:none; }
.planet-infopanel{
  position:fixed;
  inset:0;
  z-index:50;
}
.pi-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.pi-card{
  position:relative;
  z-index:1;
  width:min(720px,92vw);
  margin:10vh auto 0;
  background:#fff;
  border-radius:16px;
  padding:16px 16px 22px;
  box-shadow:0 28px 70px rgba(0,0,0,.3);
}
.pi-close{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:32px;
  height:32px;
  border-radius:var(--planet-pill);
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .planet-toolbar{
    flex-wrap:wrap;
    align-items:flex-start;
    padding:10px;
    border-radius:18px;
  }
  .planet-chips{ width:100%; }
  .planet-search{ min-width:180px; }
}

@media (max-width: 720px){
  .content{
    margin-top:14%;
  }
  .pp-skills{
    margin-bottom:3px;
  }

  .planet-toolbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding:10px 10px;
    gap:8px;
  }
  .planet-toolbar::-webkit-scrollbar{ display:none; }

  .planet-left{ gap:6px; min-width:max-content; }
  .planet-chips{
    flex-wrap:nowrap;
    gap:6px;
    min-width:max-content;
  }
  .planet-chip{ flex:0 0 auto; padding:7px 12px; }

  .planet-search{ display:none; }
  .planet-search-toggle{
    display:inline-flex;
    width:34px;height:34px;
    border-radius:var(--planet-pill);
    border:1px solid #eee;
    background:#fff;
    align-items:center;
    justify-content:center;
  }
  .planet-search-wrap.is-open .planet-search{
    display:block;
    position:absolute;
    top:46px;
    left:-150px;
    right:auto;
    background:#fff;
    border:1px solid #f0dbe0;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    min-width:190px;
    padding:6px 10px;
    height:auto;
    z-index:40;
  }

  .planet-map{
    border-radius:18px;
    height:70vh;
  }

  .mapboxgl-popup-content{ max-width:270px; max-height:100vh !important; }
  .pp-carousel{ height:190px; }

  .pp-actions{
    flex-direction:column;
  }
  .btn,.btn-light{
    width:100%;
    justify-content:center;
  }
  .pp-contact-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .pp-more{
    max-height:15vh;
  }

  .planet-cta{
    width:90%;
    text-align:center;
  }
}

@media (max-width: 480px){
  .pp-carousel{ height:180px; }
  .mapboxgl-popup-content{ max-width:255px; }
}