/* =========================================================
   AL·MA Espacios — Hoja de estilos principal
   Estructura organizada:
   1. Fuentes
   2. Reset y variables globales
   3. Layout base
   4. Header / navegación
   5. Hero y slider
   6. Secciones generales
   7. Carrusel de proyectos
   8. Páginas de proyecto
   9. Equipo
   10. Método AL·MA
   11. Footer
   12. Responsive
   ========================================================= */


/* ==================== 1. Fuentes ==================== */
@font-face{
  font-family:'Colabero';
  src:url('../fonts/Colabero.woff') format('woff'),
      url('../fonts/Colabero.ttf') format('truetype'),
      url('../fonts/Colabero.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}


/* ==================== 2. Reset y variables globales ==================== */
*,:before,:after{box-sizing:border-box}
:root {
  --color-primary: #583a36;
  --bg:#f3f1f0;
  --text:#64504f;
  --text-soft:#716766;
  --accent:#7a6460;
  --border:rgba(122,100,96,.16);
  --container:1180px;
  --header-height:112px;
  --transition:260ms ease;
}
html{
  scroll-behavior:smooth;
  background:#f2f2f2;
  overscroll-behavior-y:none;
}
body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  background:var(--bg);
  color:var(--text);
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}

/* ==================== 3. Layout base ==================== */
.container{
  /* Ancho máximo común y márgenes laterales de toda la web */
  width:min(calc(100% - 96px), 1600px);
  margin-left:auto;
  margin-right:auto;
}
.section{padding:72px 0}



/* ==================== 4. Header / navegación ==================== */
/* Glass header effect */
.site-header{
  /* Header fijo con efecto cristal */
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background: rgba(243, 241, 240, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(122, 100, 96, 0.08);
}

.site-header.is-scrolled{border-bottom:1px solid var(--border)}
.header-inner{
  width:min(calc(100% - 96px), 1600px);
  min-height:var(--header-height);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.brand{grid-column:2;justify-self:center}
.brand img{width:140px;height:auto}
.site-nav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:28px;font-size:15px;font-weight:300}
.site-nav a{position:relative}
.site-nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform var(--transition)}
.site-nav a:hover:after{transform:scaleX(1)}
.nav-toggle{display:none;border:0;background:transparent;padding:0;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--text)}


/* ==================== 5. Hero y slider ==================== */
.hero-fixed-shell{
  position:relative;
  height:100vh;
  min-height:640px;
}
.hero-fixed{
  /* Imagen/slider fijo al fondo para el efecto al hacer scroll */
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  min-height:640px;
  z-index:0;
  overflow:hidden;
  background:#e9e2d8;
}
.hero-slider,.hero-slides,.hero-slide,.hero-media{height:100%}
.hero-slider{position:relative}
.hero-slides{position:relative}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-media{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  transform:scale(1.03);
}
.hero-fixed:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.03),rgba(0,0,0,.02));
}
.slider-arrow{
  position:absolute;
  top:50%;
  z-index:3;
  transform:translateY(-50%);
  width:62px;
  height:62px;
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:54px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background var(--transition),transform var(--transition);
}
.slider-arrow:hover{background:rgba(255,255,255,.32);transform:translateY(-50%) scale(1.04)}
.slider-arrow--left{left:56px}
.slider-arrow--right{right:56px}


/* ==================== 6. Secciones generales ==================== */
.page-content{
  /* Contenido principal por encima del hero fijo */
  position:relative;
  z-index:5;
  background:var(--bg);
}
.intro{
  position:relative;
  z-index:8;
  padding-top:84px;
  padding-bottom:72px;
  background:var(--bg);
}
h1,h2{margin:0 0 24px;font-size:18px;line-height:1.7;letter-spacing:.02em;font-weight:300;color:var(--text-soft)}
h1{font-size:clamp(28px,2.3vw,28px)}
h2{font-size:clamp(22px,1.8vw,22px)}
.intro p{max-width:1080px;margin:0;font-size:18px;line-height:1.7;font-weight:300;color:var(--text-soft)}


/* ==================== 7. Carrusel de proyectos ==================== */
.projects-section{padding:58px 0 88px;overflow:hidden}
.projects-head,
.projects-carousel,
.projects-gallery .container{
  width:min(calc(100% - 96px), 1600px);
  margin-left:auto;
  margin-right:auto;
}
.projects-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.projects-nav{display:flex;gap:12px}
.projects-arrow{
  width:52px;
  height:52px;
  border:1px solid rgba(122,100,96,.18);
  background:rgba(255,255,255,.55);
  color:var(--accent);
  font-size:34px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.projects-arrow:hover{background:#fff;border-color:rgba(122,100,96,.32);transform:translateY(-1px)}

.projects-carousel{
  overflow:hidden;
  cursor:default;
  user-select:none;
  touch-action:pan-y;
}
.projects-carousel.is-dragging{cursor:default}
.projects-track{
  /* Track horizontal del carrusel */
  display:flex;
  gap:18px;
  will-change:transform;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.projects-carousel.is-dragging .projects-track{transition:none}

.project-card{
  flex:0 0 calc((100% - 36px) / 2.18);
  width:calc((100% - 36px) / 2.18);
  display:flex;
  flex-direction:column;
  gap:12px;
  cursor:pointer;
  -webkit-user-drag:none;
}
.project-card:active{cursor:pointer}
.project-card *{-webkit-user-drag:none}

.project-image-wrap{
  position:relative;
  aspect-ratio:1.8 / 1;
  overflow:hidden;
  background:#e8e3dd;
}

/* Tinte marrón por defecto en las imágenes del slider de proyectos de Home */
.project-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(88,58,54,.42);
  pointer-events:none;
  transition:opacity .35s ease;
}

.project-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Pequeño zoom interior al hacer hover para dar sensación de ampliación */
  transform:scale(1);
  transform-origin:center center;
  transition:transform .65s ease;
  pointer-events:none;
}

.project-card:hover .project-image-wrap::after,
.project-card:focus-visible .project-image-wrap::after{
  opacity:0;
}

.project-card:hover .project-image-wrap img,
.project-card:focus-visible .project-image-wrap img{
  transform:scale(1.06);
}


.project-caption{
  min-height:34px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:20px;
  align-items:start;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.project-card:hover .project-caption,
.project-card:focus-visible .project-caption{
  opacity:1;
  transform:translateY(0);
}
.project-title,
.project-type,
.project-year{
  font-size:15px;
  line-height:1.35;
  color:#5b4c49;
}
.project-title{
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.project-type,
.project-year{
  font-weight:400;
}
.project-year{
  text-align:right;
}

@media (max-width: 1100px){
  .projects-head,
.projects-carousel,
.projects-gallery .container{
  width:min(calc(100% - 64px), 1600px);
  margin-left:auto;
  margin-right:auto;
}
  .project-card{flex-basis:calc((100% - 18px) / 1.9);width:calc((100% - 18px) / 1.9)}
  .project-caption{
    grid-template-columns:1fr;
    gap:6px;
    min-height:70px;
  }
  .project-year{text-align:left}
}

@media (max-width: 1200px){
  .container{width:min(calc(100% - 64px), 1600px)}
  .header-inner{width:min(calc(100% - 64px), 1600px)}
  .footer-shell{width:min(calc(100% - 64px), 1600px)}
}

@media (max-width: 768px){
  .container{width:min(calc(100% - 32px),var(--container))}
  .header-inner{
    width:min(calc(100% - 32px), 1180px);
    grid-template-columns:auto 1fr auto
  }
  .brand{grid-column:2}
  .nav-toggle{display:inline-flex;grid-column:3;justify-self:end}
  .site-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;gap:18px;padding:24px 16px 28px;background:rgba(243,241,240,.98);border-bottom:1px solid var(--border)}
  .site-nav.is-open{display:flex}
  .hero-fixed-shell{
    height:72vh;
    min-height:420px;
  }
  .hero-fixed{
    height:72vh;
    min-height:420px;
  }
  .slider-arrow{width:52px;height:52px;font-size:44px}
  .slider-arrow--left{left:18px}
  .slider-arrow--right{right:18px}
  .intro{padding-top:56px;padding-bottom:56px}
  .intro p{font-size:16px}
  .projects-head,
.projects-carousel,
.projects-gallery .container{
  width:min(calc(100% - 32px), 1600px);
  margin-left:auto;
  margin-right:auto;
}
  .projects-head{margin-bottom:20px}
  .projects-arrow{width:46px;height:46px;font-size:28px}
  .project-card{flex-basis:84vw;width:84vw}
  .project-caption{
    opacity:1;
    transform:none;
    grid-template-columns:1fr;
    gap:6px;
    min-height:68px;
  }
  .project-title,.project-type,.project-year{font-size:14px}
  .project-year{text-align:left}
}



/* ==================== 11. Footer ==================== */
.site-footer{
  /* Footer sólido para tapar el hero al final del scroll */
  position:relative;
  z-index:20;
  background:#f2f2f2;
  margin-top:0;
  padding:38px 0 16px;
  clear:both;
  overflow:hidden;
}
.footer-shell{
  width:min(calc(100% - 96px), 1600px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
  gap:40px;
}
.footer-left{
  display:flex;
  align-items:center;
  min-height:150px;
}
.footer-brand img{
  width:240px;
  height:auto;
  display:block;
}
.footer-center{
  text-align:center;
  min-height:150px;
}
.footer-center h3{
  margin:0 0 22px;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.03em;
  font-weight:400;
  color:#583a36;
}
.footer-center p{
  margin:3px 0;
  font-size:16px;
  line-height:1.5;
  color:#583a36;
}
.footer-center a{
  color:#583a36;
}
.footer-right{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:0;
}
.footer-socials{
  display:flex;
  align-items:center;
  gap:16px;
}
.footer-socials a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#111;
}
.footer-socials svg{
  width:100%;
  height:100%;
  fill:currentColor;
}
.footer-socials a:hover,
.footer-legal a:hover,
.footer-center a:hover{
  opacity:.65;
}
.footer-legal{
  width:min(calc(100% - 96px), 1600px);
  margin:40px auto 0;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:#111;
}
.footer-legal a{
  color:#111;
}

@media (max-width: 900px){
  .site-footer{
    margin-top:0;
    padding:34px 0 20px;
  }
  .footer-shell,
  .footer-legal{
    width:min(calc(100% - 32px), 1600px);
  }
  .footer-shell{
    grid-template-columns:1fr;
    gap:26px;
  }
  .footer-left,
  .footer-center,
  .footer-right{
    min-height:auto;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .footer-right{
    align-items:center;
  }
  .footer-brand img{
    width:180px;
  }
  .footer-socials{
    justify-content:center;
  }
  .footer-legal{
    margin-top:34px;
    font-size:12px;
  }
}

h1,h2,h3,.section-title,.intro h2{
  font-family:'Montserrat', serif;
}


/* PROJECTS PAGE */
.projects-main{
  position:relative;
  z-index:5;
  background:var(--bg);
}
.projects-page .site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.projects-hero-shell{
  position:relative;
  height:100vh;
  min-height:640px;
}
.projects-hero{
  padding-top:0;
}
.projects-hero-slider{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  min-height:640px;
  z-index:0;
  overflow:hidden;
}
.projects-hero-slides,
.projects-hero-slide{
  height:100%;
}
.projects-hero-slides{
  position:relative;
}
.projects-hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  opacity:0;
  transition:opacity .8s ease;
}
.projects-hero-slide.is-active{
  opacity:1;
}
.projects-hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.08));
  pointer-events:none;
}
.projects-hero-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  color:#fff;
  font-family:'Montserrat', serif;
  font-weight: 300;
  font-size:clamp(30px, 4vw, 40px);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
}
.projects-strip{
  padding-top:44px;
  padding-bottom:58px;
}
.projects-strip h2,
.projects-gallery h2{
  margin-bottom:24px;
  font-size:clamp(18px,1.5vw,22px);
}




/* LATEST PROJECTS editorial layout */
.projects-gallery{
  padding-top:18px;
  padding-bottom:90px;
}

.projects-masonry--editorial{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:42px;
  row-gap:38px;
  align-items:start;
}

.projects-masonry--editorial .masonry-card{
  display:block;
  overflow:visible;
}

.projects-masonry--editorial .masonry-media{
  display:block;
  width:100%;
  overflow:hidden;
}

.projects-masonry--editorial .masonry-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transform-origin:center center;
  transition:transform .55s ease;
  will-change:transform;
}

.projects-masonry--editorial .masonry-card:hover .masonry-media img,
.projects-masonry--editorial .masonry-card:focus-visible .masonry-media img{
  transform:scale(1.04);
}

.projects-masonry--editorial .masonry-caption{
  display:block;
  margin-top:14px;
  font-size:16px;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:600;
  color:#5b4c49;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
}

.projects-masonry--editorial .masonry-card:hover .masonry-caption,
.projects-masonry--editorial .masonry-card:focus-visible .masonry-caption{
  opacity:1;
  transform:translateY(0);
}

.projects-masonry--editorial .masonry-card--a{grid-column:1 / span 4;}
.projects-masonry--editorial .masonry-card--a .masonry-media{aspect-ratio:0.72 / 1;}

.projects-masonry--editorial .masonry-card--b{grid-column:5 / span 3;}
.projects-masonry--editorial .masonry-card--b .masonry-media{aspect-ratio:0.70 / 1;}

.projects-masonry--editorial .masonry-card--c{grid-column:8 / span 5;}
.projects-masonry--editorial .masonry-card--c .masonry-media{aspect-ratio:0.66 / 1.36;}

.projects-masonry--editorial .masonry-card--d{grid-column:1 / span 6;}
.projects-masonry--editorial .masonry-card--d .masonry-media{aspect-ratio:1.08 / 1;}

.projects-masonry--editorial .masonry-card--e{grid-column:8 / span 4;}
.projects-masonry--editorial .masonry-card--e .masonry-media{aspect-ratio:1 / 1;}

.projects-masonry--editorial .masonry-card--f{grid-column:2 / span 3;}
.projects-masonry--editorial .masonry-card--f .masonry-media{aspect-ratio:0.72 / 1;}

.projects-masonry--editorial .masonry-card--g{grid-column:8 / span 3;}
.projects-masonry--editorial .masonry-card--g .masonry-media{aspect-ratio:0.72 / 1;}

.projects-masonry--editorial .masonry-card--h{grid-column:1 / span 6;}
.projects-masonry--editorial .masonry-card--h .masonry-media{aspect-ratio:1.5 / 1;}

.projects-masonry--editorial .masonry-card--i{grid-column:8 / span 3;}
.projects-masonry--editorial .masonry-card--i .masonry-media{aspect-ratio:0.72 / 1;}

@media (max-width: 1100px){
  .projects-masonry--editorial{
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:28px;
  }

  .projects-masonry--editorial .masonry-card--a{grid-column:1 / span 3;}
  .projects-masonry--editorial .masonry-card--b{grid-column:4 / span 3;}
  .projects-masonry--editorial .masonry-card--c{grid-column:1 / span 3;}
  .projects-masonry--editorial .masonry-card--d{grid-column:1 / span 6;}
  .projects-masonry--editorial .masonry-card--e{grid-column:4 / span 3;}
  .projects-masonry--editorial .masonry-card--f{grid-column:1 / span 3;}
  .projects-masonry--editorial .masonry-card--g{grid-column:4 / span 3;}
  .projects-masonry--editorial .masonry-card--h{grid-column:1 / span 6;}
  .projects-masonry--editorial .masonry-card--i{grid-column:4 / span 3;}
}

@media (max-width: 768px){
  .projects-gallery{
    padding-top:10px;
    padding-bottom:60px;
  }

  .projects-masonry--editorial{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .projects-masonry--editorial .masonry-caption{
    opacity:1;
    transform:none;
    margin-top:10px;
    font-size:14px;
  }

  .projects-masonry--editorial .masonry-card--a,
  .projects-masonry--editorial .masonry-card--b,
  .projects-masonry--editorial .masonry-card--c,
  .projects-masonry--editorial .masonry-card--e,
  .projects-masonry--editorial .masonry-card--f,
  .projects-masonry--editorial .masonry-card--g,
  .projects-masonry--editorial .masonry-card--i{
    grid-column:span 1;
  }

  .projects-masonry--editorial .masonry-card--d,
  .projects-masonry--editorial .masonry-card--h{
    grid-column:span 2;
  }
}


@media (max-width: 768px){
  .projects-hero-shell{
    height:72vh;
    min-height:420px;
  }

  .projects-hero-slider{
    position:relative;
    inset:auto;
    height:72vh;
    min-height:420px;
  }
}

/* TEAM PAGE */
.team-main{
  position:relative;
  z-index:5;
  background:var(--bg);
}

.team-hero-shell{
  position:relative;
  height:100vh;
  min-height:640px;
}


/* ==================== 9. Equipo ==================== */
.team-hero{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  min-height:640px;
  z-index:0;
  overflow:hidden;
}

.team-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(100%);
}

.team-hero-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-family:'Montserrat', serif;
  font-size:clamp(28px,3vw,45px);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.team-intro{
  padding-top:42px;
  padding-bottom:28px;
}

.team-intro h1{
  margin-bottom:18px;
  max-width:12ch;
}


.team-intro p{
  max-width:1100px;
  margin:0;
  font-size:18px;
  line-height:1.77;
  font-weight:300;
  color:var(--text-soft);
}

.team-grid{
  padding-top:0;
  padding-bottom:36px;
}

.team-members{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.team-member{
  color:inherit;
}

.team-member-photo{
  width:100%;
  aspect-ratio:.89 / 1;
  overflow:hidden;
  background:#ddd;
}

.team-member-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(100%);
}

.team-member-meta{
  padding-top:14px;
  font-size:0;
}

.team-member-name{
  font-size:16px;
  font-weight:600;
  color:#583a36;
}

.team-member-role{
  font-size:15px;
  color:var(--text-soft);
}

.team-member-bio{
  margin-top:18px;
  font-size:15px;
  line-height:1.55;
  color:var(--text-soft);
}

.team-banner{margin-top:0;position:relative;z-index:2;background:var(--bg)}

.team-banner img{
  width:100%;
  display:block;
  vertical-align:top;
  filter:grayscale(100%);
}

@media (max-width: 768px){
  .team-hero-shell{
    height:54vw;
    min-height:220px;
  }

  .team-hero{
    position:relative;
    inset:auto;
    height:90vw;
    min-height:220px;
  }

  .team-members{
    grid-template-columns:1fr;
    gap:28px;
  }

  .team-intro{
    padding-top:28px;
    padding-bottom:24px;
  }

  .team-member-bio,
  .team-intro p{
    font-size:14px;
  }
}


/* INDIVIDUAL PROJECT PAGE */
.project-detail-page .site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.project-detail-main{
  position:relative;
  z-index:5;
  background:var(--bg);
}
.project-detail-hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
}
.project-detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.1));
  pointer-events:none;
}
.project-detail-hero-media,
.project-detail-hero-media img{
  width:100%;
  height:100%;
}
.project-detail-hero-media img{
  object-fit:cover;
  display:block;
}
.project-detail-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:min(calc(100% - 48px), 1200px);
  text-align:center;
  color:#fff;
  font-size:clamp(30px,4vw,40px);
  line-height:1.05;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:300;
}
.project-detail-gallery{
  padding:72px 0 104px;
}
.project-detail-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:16px;
}
.project-shot{
  display:block;
  overflow:hidden;
  background:#e7e2db;
}
.project-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.project-shot--a{grid-column:1 / span 6; aspect-ratio:0.95 / 1;}
.project-shot--b{grid-column:7 / span 3; aspect-ratio:0.72 / 1;}
.project-shot--c{grid-column:10 / span 3; aspect-ratio:0.72 / 1;}
.project-shot--d{grid-column:1 / span 12; aspect-ratio:1.95 / 1; margin-top:40px;}
.project-shot--e{grid-column:1 / span 3; aspect-ratio:0.72 / 1; margin-top:40px;}
.project-shot--f{grid-column:4 / span 3; aspect-ratio:0.72 / 1; margin-top:40px;}
.project-shot--g{grid-column:7 / span 6; aspect-ratio:1 / 1; margin-top:40px;}
.project-shot--h{grid-column:1 / span 6; aspect-ratio:0.95 / 1; margin-top:40px;}
.project-shot--i{grid-column:7 / span 3; aspect-ratio:0.72 / 1; margin-top:40px;}
.project-shot--j{grid-column:10 / span 3; aspect-ratio:0.72 / 1; margin-top:40px;}
.project-shot--k{grid-column:1 / span 3; aspect-ratio:0.72 / 1; margin-top:40px;}
.project-shot--l{grid-column:7 / span 6; aspect-ratio:0.95 / 1; margin-top:40px;}

@media (max-width: 1100px){
  .project-detail-hero{height:100vh; min-height:640px;}
  .project-detail-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:14px;
  }
  .project-shot--a{grid-column:1 / span 4;}
  .project-shot--b{grid-column:5 / span 2;}
  .project-shot--c{grid-column:5 / span 2;}
  .project-shot--d{grid-column:1 / span 6;}
  .project-shot--e{grid-column:1 / span 2;}
  .project-shot--f{grid-column:3 / span 2;}
  .project-shot--g{grid-column:5 / span 2; aspect-ratio:0.72 / 1;}
  .project-shot--h{grid-column:1 / span 4;}
  .project-shot--i{grid-column:5 / span 2;}
  .project-shot--j{grid-column:5 / span 2;}
  .project-shot--k{grid-column:1 / span 2;}
  .project-shot--l{grid-column:3 / span 4;}
}

@media (max-width: 768px){
  .project-detail-hero{
    height:54vh;
    min-height:340px;
  }
  .project-detail-title{
    width:min(calc(100% - 32px), 760px);
    font-size:clamp(26px,7vw,34px);
  }
  .project-detail-gallery{
    padding:40px 0 68px;
  }
  .project-detail-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .project-shot,
  .project-shot--a,
  .project-shot--b,
  .project-shot--c,
  .project-shot--d,
  .project-shot--e,
  .project-shot--f,
  .project-shot--g,
  .project-shot--h,
  .project-shot--i,
  .project-shot--j,
  .project-shot--k,
  .project-shot--l{
    grid-column:span 1;
    aspect-ratio:0.82 / 1;
    margin-top:0;
  }
  .project-shot--d,
  .project-shot--g,
  .project-shot--h,
  .project-shot--l{
    grid-column:1 / -1;
    aspect-ratio:1.35 / 1;
  }
}


.eyebrow{
  margin:0 0 14px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-heading{max-width:980px;margin-bottom:32px}
.section-heading h2,
.intro-copy h1,
.hero-title,
.team-intro h1,
.method-hero h1{
  font-size:clamp(25px,3.9vw,30px);
  line-height:1.14;
  letter-spacing:-.040em;
  text-wrap:pretty;
}
.section-heading h2{margin-bottom:0;max-width:40ch}

.intro-inner--home{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);
  gap:42px;
  align-items:start;
}
.intro-copy h1,.hero-title{margin-bottom:20px;max-width:40ch}
.intro-copy p + p{margin-top:20px}
.intro-aside{display:grid;gap:18px}
.value-card{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(122,100,96,.12);
  padding:26px 24px;
}
.value-card h2{margin-bottom:14px;font-size:24px}
.value-card p{margin:0;font-size:15px;line-height:1.7;color:var(--text-soft)}
.value-list{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--text-soft);font-size:15px;line-height:1.6}
.value-card--soft{background:rgba(122,100,96,.06)}

.home-principles{padding-top:0;padding-bottom:92px}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.principle-card{
  min-height:220px;
  padding:28px;
  border:1px solid rgba(122,100,96,.12);
  background:#ede8e3;
}
.principle-card h3{margin:0 0 14px;font-size:22px;font-weight:400;color:var(--accent)}
.principle-card p{margin:0;color:var(--text-soft);font-size:15px;line-height:1.75}

.team-intro-grid{
  display:grid;
  grid-template-columns:minmax(220px,.3fr) minmax(0,1.3fr);
  gap:44px;
  align-items:start;
}
.team-intro p{max-width:none}
.team-members--bios{align-items:start}
.team-member--detailed{display:flex;flex-direction:column;gap:16px}
.team-member-role{display:block;margin-top:8px;color:var(--text-soft)}
.team-member-text{margin:0;color:var(--text-soft);font-size:15px;line-height:1.75}
.team-values{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.team-value-card{
  padding:28px;
  background:#ede8e3;
  border:1px solid rgba(122,100,96,.12);
}
.team-value-card h2{font-size:24px;margin-bottom:14px}
.team-value-card p{margin:0;color:var(--text-soft);line-height:1.75;font-size:15px}

.method-page .page-content,
.method-main,
.team-main,
.projects-main,
.project-detail-main{padding-top:112px}

/* ==================== 10. Método AL·MA ==================== */
.method-hero{padding-bottom:18px}
.method-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;
}
.method-hero h1{margin-bottom:0;max-width:40ch}
.method-hero p{margin:0;color:var(--text-soft);font-size:18px;line-height:1.8}
.method-hero p + p{margin-top:18px}
.method-principles{padding-top:18px}
.method-pillars{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.method-pillar{
  padding:22px 20px 24px;
  border-top:1px solid rgba(122,100,96,.28);
  background:rgba(255,255,255,.35);
}
.method-pillar span,
.method-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:18px;
  border-radius:50%;
  background:#7a6460;
  color:#fff;
  font-size:12px;
  letter-spacing:.14em;
}
.method-pillar h3,
.method-step-card h3{margin:0 0 12px;font-size:20px;font-weight:400;color:var(--accent);line-height:1.3}
.method-pillar p{margin:0;color:var(--text-soft);font-size:15px;line-height:1.7}
.method-step-list{display:grid;gap:18px}
.method-step-card{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:24px;
  padding:28px;
  background:#ede8e3;
  border:1px solid rgba(122,100,96,.12);
}
.method-step-number{margin-bottom:0}
.method-step-card ul{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--text-soft);font-size:15px;line-height:1.7}


/* ==================== 12. Responsive ==================== */
@media (max-width: 980px){
  .intro-inner--home,
  .team-intro-grid,
  .method-hero-grid{grid-template-columns:1fr}
  .principles-grid,
  .team-values{grid-template-columns:1fr}
  .method-pillars{grid-template-columns:1fr 1fr}
}

@media (max-width: 720px){
  .section-heading h2,
  .intro-copy h1,
  .hero-title,
  .team-intro h1,
  .method-hero h1{font-size:clamp(25px,9vw,27px)}
  .principle-card,
  .team-value-card,
  .method-step-card{padding:22px}
  .method-pillars{grid-template-columns:1fr}
  .method-step-card{grid-template-columns:1fr;gap:14px}
}


/* Hero stacking fix for projects and team pages */
.projects-page,
.team-page{
  background:var(--bg);
}

.projects-hero,
.team-hero{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.projects-hero .slider-arrow,
.projects-hero .projects-hero-title{
  pointer-events:auto;
}

.projects-main,
.team-main,
.projects-main > :not(.projects-hero):not(.projects-hero-shell),
.team-main > :not(.team-hero):not(.team-hero-shell),
.projects-page .site-footer,
.team-page .site-footer{
  position:relative;
  z-index:2;
  background:var(--bg);
}

.projects-strip,
.projects-gallery,
.team-intro,
.team-grid,
.team-banner{
  position:relative;
  z-index:2;
}

.projects-page .site-footer,
.team-page .site-footer{
  z-index:3;
  margin-top:0;
  border-top:1px solid rgba(140,111,104,.12);
}

.team-banner img{
  width:100%;
  display:block;
}


/* Prevent the fixed hero from appearing under the footer on macOS/iOS overscroll */
html::before{
  content:"";
  position:fixed;
  inset:0;
  background:#f2f2f2;
  z-index:-2;
  pointer-events:none;
}


/* Final stacking hardening */
.team-grid{
  position:relative;
  z-index:2;
  background:var(--bg);
}

.team-banner{
  overflow:hidden;
}


/* === CUSTOM COLOR OVERRIDES === */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary) ;
}

footer, footer a {
  color: var(--color-primary) !important;
}

footer i {
  color: var(--color-primary) !important;
}

.footer-legal a {
  color: var(--color-primary) !important;
}