@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root{--font-body:"Manrope",sans-serif;--font-display:"Cormorant Garamond",serif}
body{font-family:var(--font-body)}
h1,h2,h3,.lead,blockquote,.footer-cta a,.join-options strong{font-family:var(--font-display)!important;letter-spacing:-.018em}
.hf-hero{background:#000!important}
.hf-hero video{object-position:center center!important}
.hf-hero-copy{overflow:visible}
.hf-hero-copy .honey-bg{display:inline-flex!important;align-items:center;justify-content:center;position:relative;z-index:5;background:#e8b742!important;color:#173921!important;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 28px rgba(0,0,0,.24);opacity:1!important;visibility:visible!important}
.hf-hero-copy .honey-bg:hover,.hf-hero-copy .honey-bg:focus-visible{background:#f0c55a!important;transform:translateY(-1px)}

/* Cabecera compartida */
.global-header{height:92px;padding:0 5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#faf7ef;color:#173921;position:relative;z-index:50;border-bottom:1px solid rgba(23,57,33,.12)}
.global-brand{display:flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600}
.global-brand img{width:68px;height:68px;object-fit:contain}
.global-brand strong{color:#518944}
.global-header nav{display:flex;align-items:center;gap:30px;font-size:13px}
.global-header nav a:hover{color:#518944}
.global-action{justify-self:end;background:#214f35;color:#fff;padding:13px 22px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.global-menu{display:none;background:none;border:0}

/* Pie compartido */
.global-footer{display:block;background:#102b1e;color:#fff;padding:70px 6vw 24px;text-align:left}
.global-footer__grid{display:grid;grid-template-columns:1.35fr .75fr 1.2fr .9fr;gap:48px}
.global-footer__grid>div,.global-footer__grid>nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.global-footer small{color:#9ab0a0;text-transform:uppercase;letter-spacing:.16em;font-size:10px}
.global-footer a,.global-footer span,.global-footer p{font-size:12px}
.global-footer__brand p{color:rgba(255,255,255,.68);line-height:1.7;max-width:310px}
.global-footer .global-brand span{font-size:13px}
.global-footer__bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:52px;padding-top:22px;display:flex;justify-content:space-between;color:rgba(255,255,255,.62)}
.global-footer a[href="https://blackshep.es"]{color:#a58b49;opacity:.78;text-decoration:underline;text-decoration-color:rgba(165,139,73,.52);text-underline-offset:3px;transition:opacity .2s ease,color .2s ease}
.global-footer a[href="https://blackshep.es"]:hover,.global-footer a[href="https://blackshep.es"]:focus-visible{color:#b69a54;opacity:1}

/* Sin numeración: la imagen y el título marcan el orden visual */
.how-steps article>b,.activity-list article>span,.service-grid article>span,.join-options a>b,.collab-grid article>span{display:none}
.how-steps article{grid-template-columns:82px 1fr;align-items:center}
.how-steps article>img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.activity-list article{grid-template-columns:minmax(190px,290px) 1fr;align-items:center}
.activity-list article>img{width:100%;height:190px;object-fit:cover;border-radius:4px}
.service-grid article>img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:22px;border-radius:4px}
.steps .service-grid article{padding-right:18px}
.join-options a{grid-template-columns:1fr auto}

/* Tarjetas equilibradas en portada */
.experience-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.exp-card,.exp-card.tall{height:520px}
.exp-card>img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Patrón 3D vectorial sobre la sección crema de presentación */
.welcome{position:relative;background-image:linear-gradient(rgba(247,242,232,.82),rgba(247,242,232,.82)),url('patron-3d-panal-crema.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.welcome>*{position:relative;z-index:1}

/* Colaboraciones con la misma estructura y acciones alineadas */
.collab-grid{align-items:stretch}
.collab-grid article{display:flex;flex-direction:column;height:100%}
.collab-grid article .button{margin-top:auto;align-self:flex-start}

/* Dos secciones con fondos 2D vectoriales */
.experience-showcase{background-image:linear-gradient(rgba(18,57,39,.92),rgba(18,57,39,.92)),url('fondo-vector-biodiversidad.png');background-size:cover;background-position:center;background-attachment:fixed}
.join-band{background-image:linear-gradient(rgba(232,183,66,.84),rgba(232,183,66,.84)),url('fondo-vector-apadrinamiento.png');background-size:cover;background-position:center}

/* Misión: fotografía más visible y tarjeta en armonía */
.mission-panel>img{filter:brightness(.58) saturate(.92)!important}
.mission-panel:after{background:linear-gradient(90deg,rgba(5,27,17,.72),rgba(5,27,17,.35) 62%,rgba(5,27,17,.12))!important}
.mission-copy{background:rgba(7,37,24,.72)!important;backdrop-filter:blur(5px);border-color:#e8b742!important}

/* Nuestra lucha con imagen por contenido */
.card-list{display:grid;gap:22px}
.card-list article{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;padding:18px 0}
.card-list article>img{width:160px;height:125px;object-fit:cover;border-radius:4px}
.card-list article>div h3{margin-top:0}

.legal-page{max-width:980px;margin:auto}
.legal-page h1{color:#173e2d}
.legal-page h2{font-size:30px;margin-top:42px}
.legal-page p,.legal-page li{line-height:1.8;color:#56635a}
.legal-page a{color:#285c3e;text-decoration:underline}
.legal-page .provisional-note{display:none}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.cookie-actions button{border:0;cursor:pointer}
.faq-page details{border-top:1px solid rgba(23,62,45,.18);padding:22px 0}.faq-page summary{font-family:var(--font-display);font-size:25px;font-weight:700;color:#173e2d;cursor:pointer}.faq-page details p{padding-right:4vw}
.cookie-banner{position:fixed;z-index:200;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:#102b1e;color:#fff;padding:20px 24px;border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 50px rgba(0,0,0,.28);border-radius:8px}.cookie-banner strong{font-family:var(--font-display);font-size:23px}.cookie-banner p{margin:5px 0 0;max-width:720px;color:rgba(255,255,255,.72);font-size:12px}.cookie-banner>div:last-child{display:flex;align-items:center;gap:10px;white-space:nowrap}.cookie-banner button,.cookie-banner a{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:11px 14px;border-radius:99px;font:600 11px var(--font-body);cursor:pointer}.cookie-banner .accept{background:#e8b742;color:#173921;border-color:#e8b742}

/* Galería fotográfica */
.gallery-intro{padding:105px 8vw 75px;background:#f5f0e5 url('patron-3d-panal-crema.png') center/cover no-repeat;position:relative}
.gallery-intro:before{content:"";position:absolute;inset:0;background:rgba(247,242,232,.84)}
.gallery-intro>*{position:relative}.gallery-intro h1{font-size:clamp(48px,6vw,82px);line-height:1;margin:18px 0;color:#173e2d}.gallery-intro h1 em{color:#b48724}.gallery-intro>p:last-child{max-width:620px;line-height:1.8;color:#56635a}
.photo-gallery{height:100svh;padding:0;background:#091c14;outline:none;position:relative;overflow:hidden}
.gallery-stage{width:100%;height:100%;min-height:0;position:relative;display:flex;overflow-x:auto;overflow-y:hidden;background:#091c14;border-radius:0;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.gallery-stage::-webkit-scrollbar{display:none}
.gallery-slide{position:relative;flex:0 0 100%;height:100%;margin:0;opacity:1;visibility:visible;scroll-snap-align:start;scroll-snap-stop:always}.gallery-slide img{width:100%;height:100%;object-fit:contain;background:#091c14;cursor:zoom-in}
.gallery-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(9,28,20,.65);backdrop-filter:blur(5px);color:#fff;font-size:24px;cursor:pointer}.gallery-arrow:hover{background:#e8b742;color:#173921}.gallery-arrow.prev{left:22px}.gallery-arrow.next{right:22px}.gallery-counter{position:absolute;z-index:3;right:22px;bottom:20px;background:rgba(9,28,20,.72);color:#fff;border-radius:99px;padding:8px 13px;font-size:11px;letter-spacing:.12em}
.gallery-thumbs{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);width:min(78vw,950px);display:flex;gap:8px;overflow-x:auto;padding:8px;background:rgba(9,28,20,.68);backdrop-filter:blur(8px);border-radius:5px;scrollbar-width:none}.gallery-thumbs::-webkit-scrollbar{display:none}.gallery-thumbs button{flex:0 0 82px;height:56px;padding:0;border:2px solid transparent;background:none;opacity:.58;cursor:pointer}.gallery-thumbs button.active{border-color:#e8b742;opacity:1}.gallery-thumbs img{width:100%;height:100%;object-fit:cover}.gallery-help{position:absolute;z-index:4;left:50%;top:18px;transform:translateX(-50%);color:rgba(255,255,255,.72);font-size:11px;margin:0;padding:8px 13px;background:rgba(9,28,20,.62);border-radius:99px;white-space:nowrap}
.lightbox-open{overflow:hidden}
.gallery-lightbox{display:none;position:fixed;z-index:500;inset:0;background:#000;align-items:center;justify-content:center;touch-action:pan-y;user-select:none}
.gallery-lightbox.open{display:flex}.gallery-lightbox>img{width:100%;height:100%;object-fit:contain}
.gallery-lightbox__close{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:46px;height:46px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.48);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.gallery-lightbox:fullscreen{width:100vw;height:100vh;background:#000}

@media(max-width:900px){
  .global-header{height:80px;grid-template-columns:1fr auto auto;gap:12px}.global-brand img{width:58px;height:58px}.global-action{display:block;padding:11px 16px;font-size:10px}.global-menu{display:grid;gap:6px}.global-menu span{width:27px;height:2px;background:#214f35}.global-header nav{display:none;position:absolute;top:80px;left:0;right:0;background:#faf7ef;padding:28px 6vw;flex-direction:column;align-items:flex-start;box-shadow:0 14px 24px rgba(17,43,30,.12)}.global-header nav.open{display:flex}.global-footer__grid{grid-template-columns:1fr 1fr}.activity-list article{grid-template-columns:160px 1fr}.service-grid{grid-template-columns:1fr 1fr}.experience-showcase{background-attachment:scroll;background-position:center}.join-band{background-position:center}.experience-cards .tall{grid-column:auto}
}
@media(max-width:600px){
  .global-header{height:72px;gap:9px;padding-left:4vw;padding-right:4vw}.global-brand img{width:48px;height:48px}.global-brand span{display:none}.global-action{padding:10px 15px;font-size:10px}.global-header nav{top:72px}.global-footer__grid{grid-template-columns:1fr}.global-footer__bottom{display:block}.global-footer__bottom>span{display:block;margin-top:8px}.how-steps article{grid-template-columns:64px 1fr;gap:10px}.how-steps article>img{width:58px;height:58px}.activity-list article{grid-template-columns:1fr}.activity-list article>img{height:220px}.service-grid{grid-template-columns:1fr}.card-list article{grid-template-columns:1fr}.card-list article>img{width:100%;height:210px}
  .cookie-banner{left:10px;right:10px;bottom:10px;display:block}.cookie-banner>div:last-child{margin-top:14px;flex-wrap:wrap}.cookie-banner button,.cookie-banner a{padding:10px 12px}
  .experience-cards{display:block}.exp-card,.exp-card.tall{height:440px;margin-bottom:18px}.welcome{background-position:center top;background-size:auto 100%}.experience-showcase{background-position:35% center}.join-band{background-position:30% center}
  .hf-hero{height:auto;min-height:760px;display:flex;align-items:center;padding:64px 0;box-sizing:border-box}.hf-hero video{position:absolute;inset:0;width:100%;height:100%;object-position:center center!important}.hf-overlay{background:radial-gradient(ellipse 72% 70% at -8% 48%,rgba(4,22,14,.98) 0%,rgba(4,22,14,.9) 42%,rgba(4,22,14,.5) 68%,transparent 100%),linear-gradient(0deg,rgba(4,22,14,.28) 0%,transparent 38%)}.hf-hero-copy{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:none;padding:0 6vw;box-sizing:border-box}.hf-hero-copy>div{width:100%;gap:16px}.hf-hero-copy .round-button{width:100%;max-width:340px;text-align:center;box-sizing:border-box}.hf-hero h1{font-size:clamp(42px,13vw,52px);overflow-wrap:anywhere}.hf-hero-copy>p:not(.mini){font-size:16px}
  .gallery-intro{padding:75px 6vw 55px;background-position:center top}.gallery-arrow{width:44px;height:44px}.gallery-arrow.prev{left:10px}.gallery-arrow.next{right:10px}.gallery-counter{right:12px;bottom:92px}.gallery-thumbs{bottom:12px;width:calc(100% - 24px)}.gallery-thumbs button{flex-basis:70px;height:50px}.gallery-help{top:12px;max-width:calc(100% - 90px);white-space:normal;text-align:center;line-height:1.4}.gallery-slide img{object-fit:contain}
}

/* Orden responsive del header: menú | logo | acción */
@media(max-width:900px){
  .global-header{grid-template-columns:1fr auto 1fr;gap:10px}
  .global-menu{grid-column:1;grid-row:1;justify-self:start}
  .global-brand{grid-column:2;grid-row:1;justify-self:center}
  .global-brand>span{display:none}
  .global-action{grid-column:3;grid-row:1;justify-self:end}
  .global-header nav{grid-column:1/-1}
}
@media(max-width:380px){
  .global-header{padding-left:3vw;padding-right:3vw;gap:5px}
  .global-brand img{width:44px;height:44px}
  .global-action{padding:9px 11px;font-size:9px}
  .global-menu span{width:24px}
}