/* =========================================================
   ULBIA — Estudio de Comunicación y Diseño
   Reemplazar las URLs de imágenes (https://www.figma.com/api/mcp/asset/...)
   por archivos propios en /assets/img/ antes de publicar.
   Los links de Figma son temporales (expiran).
   ========================================================= */

:root{
  --black: #000000;
  --white: #ffffff;
  --gray-text: #d1d1d1;
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;
  --max-width: 1440px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
u{ text-decoration-thickness: 2px; }

/* ===================== SCROLL ANIMATIONS ===================== */
.fade-in-up{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.fade-in-up.is-visible{
  opacity:1;
  transform:translateY(0);
}
.portfolio-card.fade-in-up:nth-child(2){ transition-delay:.15s; }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5%;
}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding:24px 5.5%;
  display:flex;
  justify-content:center;
  transition:background .3s ease;
}

.site-header.scrolled{
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(6px);
}

.header-inner{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo-img{ height:24px; width:auto; }

.header-right{
  display:flex;
  align-items:center;
  gap:40px;
}

.header-tag{
  font-size:13px;
  letter-spacing:1.2px;
  color:var(--white);
  font-weight:500;
}

.menu-toggle{
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  position:relative;
  z-index:200;
}

.menu-icon{
  position:relative;
  display:inline-block;
  width:20px;
  height:20px;
}
.menu-icon span{
  position:absolute;
  background:var(--white);
  transition:transform .35s ease;
}
.menu-icon span:first-child{
  left:9px; top:0; width:3px; height:20px;
}
.menu-icon span:last-child{
  left:0; top:9px; width:20px; height:3px;
}
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child{ transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child{ transform: rotate(45deg); }

/* ===================== FULL-SCREEN MENU ===================== */
.site-menu{
  position:fixed;
  inset:0;
  background:var(--black);
  z-index:150;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.site-menu.open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease;
}

/* Lienzo proporcional: reproduce las coordenadas exactas del frame
   "+ Despliegue" de Figma (1440 x 1034), todo en % para que escale
   igual en cualquier pantalla. */
.site-menu-canvas{
  position:relative;
  width:100%;
  height:100%;
  max-width:var(--max-width);
  margin:0 auto;
}

.menu-item{
  position:absolute;
  top:25.6%;
  width:18%;
  height:31.4%;
  display:flex;
  flex-direction:column;
}
.mi-1{ left:16.25%; }
.mi-2{ left:36%; }
.mi-3{ left:55.8%; }
.mi-4{ left:75.6%; }

.menu-item-img{
  width:100%;
  height:100%;
  border-radius:24px 0 0 0;
  overflow:hidden;
  transition:opacity .2s ease;
}
.menu-item-img img{
  width:100%; height:100%; object-fit:cover;
}
.menu-item:hover .menu-item-img{ opacity:0.75; }

.menu-link{
  position:absolute;
  top:calc(100% + 15px);
  left:0;
  width:100%;
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(13px, 1.2vw, 18px);
  letter-spacing:2px;
  color:var(--white);
  white-space:nowrap;
}

.site-menu-footer{
  position:absolute;
  top:77.8%;
  left:5.9%;
  display:flex;
  align-items:center;
  gap:40px;
}
.footer-email-dark{ color:var(--white); font-size:clamp(13px, 1.2vw, 16px); }

/* ===================== HERO ===================== */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  max-height:900px;
  width:100%;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1s ease;
  z-index:1;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

.hero-bg{
  position:absolute; inset:0;
}
.hero-bg-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-content{
  position:absolute;
  left:5.5%;
  top:32%;
  z-index:2;
}

.hero-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(48px, 7.6vw, 110px);
  line-height:1;
  letter-spacing:1px;
  text-transform:lowercase;
}
.hero-title span{ display:block; }

.hero-dots{
  position:absolute;
  right:5.5%;
  bottom:12%;
  display:flex;
  gap:8px;
  z-index:5;
}
.dot{
  width:36px; height:9px;
  border-radius:6px;
  border:1px solid var(--white);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:background .3s ease;
}
.dot.active{ background:var(--white); }
.dot:hover{ background:rgba(255,255,255,0.5); }

/* ===================== TAGLINE ===================== */
.tagline{
  background:var(--black);
  padding:80px 5.5% 40px;
}
.tagline p{
  font-weight:600;
  font-size:clamp(28px, 4.2vw, 56px);
  line-height:1.15;
  letter-spacing:-1px;
  max-width:900px;
}

/* ===================== PROYECTOS BANNER ===================== */
.proyectos-banner{
  position:relative;
  height:80vh;
  min-height:520px;
  max-height:820px;
  margin:40px 0;
  overflow:hidden;
}
.proyectos-bg{ position:absolute; inset:0; }
.proyectos-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.proyectos-bg-blur{
  filter:blur(14px) grayscale(15%) brightness(1.05);
  transform:scale(1.05);
}

.proyectos-bg-sharp{
  clip-path: inset(8.5% 15.7% 8.1% 67.5% round 110px 0 0 0);
}

.proyectos-frame{
  position:absolute;
  left:67.5%;
  top:8.5%;
  width:16.8%;
  height:83%;
  border:3px solid var(--white);
  border-radius:110px 0 0 0;
  z-index:1;
  pointer-events:none;
}

.proyectos-cross{
  position:absolute;
  left:75.4%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  color:var(--white);
  font-size:clamp(20px, 2.4vw, 36px);
  font-weight:400;
  pointer-events:none;
}

.proyectos-label{
  position:absolute;
  left:5.5%;
  top:6%;
  font-size:12px;
  letter-spacing:3px;
  color:var(--gray-text);
  z-index:2;
}

.proyectos-headings{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:5%;
  padding:0 5.5%;
}
.proyectos-headings h2{
  font-family:var(--font-body);
  font-size:clamp(20px, 2.4vw, 36px);
  letter-spacing:4px;
  font-weight:300;
  text-align:left;
  position:relative;
}
.pb-identity{ font-weight:500; }
.pb-impact{ font-weight:700; }

.proyectos-plus{
  position:absolute;
  right:5.5%;
  top:6%;
  font-size:24px;
  z-index:2;
}

/* ===================== PORTFOLIO GRID ===================== */
.portfolio{
  display:flex;
  gap:40px;
  padding:20px 5.5% 100px;
  max-width:var(--max-width);
  margin:0 auto;
}

.portfolio-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:70px;
}

.portfolio-col-right{
  margin-top:110px;
}

.portfolio-card{
  display:block;
  color:inherit;
}
.portfolio-card .portfolio-img{
  border-radius:30px 0 0 0;
  overflow:hidden;
  aspect-ratio:4/5;
  margin-bottom:20px;
}
.portfolio-card .portfolio-img img{
  width:100%; height:100%; object-fit:cover;
}

.portfolio-card h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(22px, 2.2vw, 32px);
  letter-spacing:-0.6px;
  margin-bottom:14px;
}

.portfolio-card .tag{
  display:inline-block;
  border:1px solid var(--white);
  border-radius:69px;
  padding:6px 20px;
  font-size:12px;
  letter-spacing:1px;
  font-weight:300;
}

/* ===================== MARQUEE ===================== */
.marquee{
  border-top:1px solid rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.4);
  overflow:hidden;
  white-space:nowrap;
  padding:24px 0;
}
.marquee-track{
  display:inline-flex;
  animation: scroll-left 28s linear infinite;
}
.marquee-track span{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(22px, 4vw, 40px);
  letter-spacing:-1px;
  padding-right:10px;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding:60px 5.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}
.site-footer-light{
  background:var(--white);
  color:var(--black);
}
body.light-page .site-footer{
  background:var(--white);
  color:var(--black);
}
body.light-page .footer-social a{ color:var(--black); }
.footer-email{
  font-size:clamp(18px, 1.8vw, 24px);
  font-weight:300;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:20px;
}
.footer-social a{
  color:var(--white);
  display:flex;
  transition:opacity .2s ease;
}
.footer-social a:hover{ opacity:0.6; }
.site-footer-light .footer-social a{ color:var(--black); }

.footer-social-dark a{ color:var(--white) !important; }
.footer-social-dark svg{ width:18px; height:18px; }

/* ===================== MOBILE (<=768px) ===================== */
@media (max-width: 768px){

  .site-header{ padding:16px 6%; }
  .header-tag{ display:none; }
  .menu-toggle{ display:block; }
  .site-menu-canvas{ overflow-y:auto; height:100%; padding:90px 6% 30px; }
  .menu-item{
    position:static;
    width:100%;
    height:auto;
    margin-bottom:32px;
    aspect-ratio:auto;
  }
  .menu-item-img{ aspect-ratio:4/5; }
  .menu-link{ position:static; display:block; margin-top:14px; text-align:left; }
  .site-menu-footer{
    position:static;
    margin-top:20px;
    flex-direction:column;
    gap:20px;
    align-items:flex-start;
  }

  .hero{ height:100vh; min-height:640px; max-height:800px; }
  .hero-content{ top:14%; left:6%; right:6%; }
  .hero-title{ font-size:50px; letter-spacing:0; }

  .tagline{ padding:60px 6% 30px; }
  .tagline p{ font-size:24px; letter-spacing:-1px; }

  .proyectos-banner{ height:70vh; min-height:460px; }
  .proyectos-headings{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    top:50%;
    transform:translateY(-50%);
  }
  .proyectos-headings h2{ font-size:20px; letter-spacing:2px; }

  .portfolio{
    flex-direction:column;
    gap:50px;
    padding:20px 6% 70px;
  }
  .portfolio-col{ gap:50px; }
  .portfolio-col-right{ margin-top:0; }
  .portfolio-card .portfolio-img{ aspect-ratio:1/1; }
  .portfolio-card h3{ font-size:24px; }

  .marquee-track span{ font-size:24px; }

  .site-footer{ flex-direction:column; gap:24px; padding:50px 6%; text-align:center; }
}

@media (min-width: 769px) and (max-width: 1100px){
  .portfolio{ flex-direction:column; max-width:500px; }
  .portfolio-col{ gap:50px; }
  .portfolio-col-right{ margin-top:0; }
}

/* ===================== LIGHT THEME PAGES (Servicios, etc.) ===================== */
body.light-page{
  background:var(--white);
  color:var(--black);
}
body.light-page .header-tag{ color:var(--black); }
body.light-page .logo-img{ filter:invert(1); }
body.light-page .menu-icon span{ background:var(--black); }
body.light-page .site-header.scrolled{
  background:rgba(255,255,255,0.85);
}

/* Cuando el menú full-screen está abierto, el header vuelve a blanco
   (queda sobre el fondo negro del menú) sin importar el tema de la página */
body.menu-open .header-tag{ color:var(--white); }
body.menu-open .logo-img{ filter:none; }
body.menu-open .menu-icon span{ background:var(--white); }

/* ===================== SERVICIOS ===================== */
.services-intro{
  padding:170px 5.5% 40px;
  text-align:center;
}
.services-intro h1{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(22px, 2.2vw, 32px);
  letter-spacing:3.5px;
}

.services-list{
  max-width:var(--max-width);
  margin:0 auto;
  border-top:1px solid rgba(0,0,0,0.15);
}
.service-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:70px 5.5%;
  border-bottom:1px solid rgba(0,0,0,0.15);
  transition:background-color .3s ease, color .3s ease;
  cursor:default;
}
.service-row:hover,
.service-row:active{
  background-color:var(--black);
  color:var(--white);
}
.service-row:hover .service-desc h3,
.service-row:hover .service-desc p,
.service-row:active .service-desc h3,
.service-row:active .service-desc p{
  color:var(--white);
}
.service-title{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(40px, 5.5vw, 85px);
  line-height:1;
  text-align:right;
  text-transform:lowercase;
}
.service-desc{
  max-width:400px;
  justify-self:start;
}
.service-desc h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  letter-spacing:0.4px;
  margin-bottom:10px;
}
.service-desc p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.5;
}

.services-cta{
  display:flex;
  justify-content:center;
  padding:60px 5.5%;
}
.pill-btn{
  background:var(--black);
  color:var(--white);
  border-radius:63px;
  padding:14px 40px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  letter-spacing:2px;
}

@media (max-width: 768px){
  .services-intro{ padding:120px 6% 30px; }
  .service-row{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 6%;
    text-align:left;
  }
  .service-title{ text-align:left; font-size:38px; }
  .service-desc{ max-width:100%; justify-self:start; }
}

/* ===================== CONTACTO ===================== */
.contact-section{
  display:grid;
  grid-template-columns:minmax(0,530px) minmax(0,399px);
  justify-content:center;
  column-gap:100px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:170px 5.5% 100px;
  align-items:start;
}
.contact-section[hidden]{ display:none; }

.contact-copy h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(44px, 6vw, 90px);
  line-height:1.05;
  margin-bottom:32px;
}
.contact-copy p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  max-width:400px;
}

.contact-form-wrap{
  max-width:399px;
  justify-self:end;
  width:100%;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
  width:100%;
}
.contact-form[hidden]{ display:none; }
.contact-form label{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  letter-spacing:1.5px;
  margin-bottom:-14px;
}
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body);
  font-size:15px;
  border:1px solid var(--black);
  border-radius:63px;
  padding:8px 20px;
  background:var(--white);
  color:var(--black);
  outline:none;
}
.contact-form textarea{
  border-radius:14px;
  padding:14px 20px;
  resize:vertical;
  font-family:var(--font-body);
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-width:2px;
}
.contact-submit{
  align-self:flex-end;
  background:var(--black);
  color:var(--white);
  border:none;
  border-radius:63px;
  padding:10px 32px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  letter-spacing:1.5px;
  cursor:pointer;
  transition:opacity .2s ease;
}
.contact-submit:hover{ opacity:0.75; }

.contact-thanks{
  width:100%;
  margin-top:100px;
  border:1px solid var(--black);
  border-radius:24px;
  padding:50px 40px;
  text-align:center;
}
.contact-thanks p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
}
.contact-thanks p:first-child{ font-weight:600; margin-bottom:6px; }

@media (max-width: 768px){
  .contact-section{
    grid-template-columns:1fr;
    padding:100px 6% 50px;
    gap:30px;
  }
  .contact-copy h1{ font-size:50px; line-height:1; margin-bottom:20px; }
  .contact-copy p{ max-width:100%; font-size:14px; }
  .contact-form-wrap{ justify-self:stretch; max-width:100%; }
  .contact-form{ gap:14px; }
  .contact-form label{ font-size:12px; margin-bottom:-8px; }
  .contact-form input,
  .contact-form textarea{ padding:6px 16px; font-size:14px; }
  .contact-form textarea{ padding:10px 16px; }
  .contact-submit{ padding:8px 26px; font-size:13px; }
  .contact-thanks{ padding:36px 24px; margin-top:0; }
}

/* ===================== EQUIPO ===================== */
.team-members{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:var(--max-width);
  margin:0 auto;
  padding:170px 5.5% 90px;
}
.team-member{
  padding:0 60px;
}
.team-member:first-child{
  border-right:1px solid rgba(255,255,255,0.3);
}
.team-member:last-child{
  text-align:right;
}
.team-member:last-child .team-linkedin{
  flex-direction:row-reverse;
}

.team-member h2{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(24px, 2.6vw, 32px);
  letter-spacing:0.6px;
  color:var(--white);
  margin-bottom:14px;
}
.team-role{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  letter-spacing:1.6px;
  color:var(--white);
  margin-bottom:16px;
}
.team-bio{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  color:var(--white);
  margin-bottom:22px;
}
.team-linkedin{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--white);
  border-radius:63px;
  padding:9px 20px;
  color:var(--white);
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:1.4px;
  transition:background .2s ease, color .2s ease;
}
.team-linkedin:hover{ background:var(--white); color:var(--black); }

/* Marquee de roles del equipo */
.team-marquee{
  border-top:1px solid rgba(255,255,255,0.3);
  border-bottom:1px solid rgba(255,255,255,0.3);
  overflow:hidden;
  white-space:nowrap;
  padding:24px 0;
}
.team-marquee-track{
  display:inline-flex;
  gap:60px;
  animation:scroll-left 32s linear infinite;
}
.team-marquee-track span{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(24px, 3.4vw, 48px);
  letter-spacing:0.8px;
  color:var(--white);
}
.team-marquee-track span.dim{
  color:transparent;
  -webkit-text-stroke:1px var(--white);
}

.team-closing{
  max-width:var(--max-width);
  margin:0 auto;
  padding:120px 5.5% 100px;
}
.team-closing-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
  margin-bottom:80px;
}
.team-closing h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(32px, 4.5vw, 64px);
  line-height:1.1;
  color:var(--white);
  text-align:left;
}
.team-closing p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--white);
}
.team-cta{
  display:block;
  width:fit-content;
  margin:0 auto;
  background:var(--white);
  color:var(--black);
}

@media (max-width: 768px){
  .team-members{
    grid-template-columns:1fr;
    padding:100px 6% 50px;
    gap:36px;
  }
  .team-member{ padding:0; }
  .team-member:first-child{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.3);
    padding-bottom:36px;
  }
  .team-member:last-child{
    text-align:left;
  }
  .team-member:last-child .team-linkedin{
    flex-direction:row;
  }
  .team-member h2{ font-size:26px; }

  .team-marquee-track span{ font-size:26px; }

  .team-closing{ padding:70px 6% 60px; }
  .team-closing-row{
    grid-template-columns:1fr;
    gap:30px;
    margin-bottom:50px;
  }
  .team-closing h1{ font-size:36px; }
  .team-closing p{ font-size:14px; }
  .team-cta{ margin:0; }
}

/* ===================== PROYECTOS (listado) ===================== */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px 34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:170px 6% 100px;
}
.project-card{
  position:relative;
  display:block;
  aspect-ratio:400/531;
  overflow:hidden;
  border-radius:0;
}
.project-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.project-card:hover img{ transform:scale(1.05); }

.project-card-info{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 0 32px 32px;
  background:rgba(0,0,0,0);
  opacity:0;
  transition:opacity .3s ease, background .3s ease;
}
.project-card:hover .project-card-info{
  background:rgba(0,0,0,0.55);
  opacity:1;
}
.project-card-info h2{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(20px, 2vw, 28px);
  letter-spacing:-1px;
  color:var(--white);
  margin-bottom:8px;
}
.project-card-info span{
  font-family:var(--font-body);
  font-weight:300;
  font-size:12px;
  letter-spacing:1.2px;
  color:var(--white);
}

/* Escalonado: columna del medio arranca más arriba */
.pc-2, .pc-5, .pc-8{ margin-top:-85px; }

@media (max-width: 768px){
  .projects-grid{
    grid-template-columns:1fr;
    gap:40px;
    padding:100px 6% 60px;
  }
  .pc-2, .pc-5, .pc-8{ margin-top:0; }
  .project-card{
    aspect-ratio:auto;
    height:auto;
    overflow:visible;
    display:block;
  }
  .project-card img{
    width:100%;
    height:auto;
    aspect-ratio:306/382;
    object-fit:cover;
    display:block;
  }
  .project-card-info{
    position:static;
    opacity:1;
    background:none;
    padding:16px 0 0;
  }
  .project-card:hover img{ transform:none; }
}

/* ===================== PROYECTO INTERIOR (páginas de caso) ===================== */
.project-header-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:170px 5.5% 60px;
  align-items:start;
}
.project-hero-img{
  width:100%;
  aspect-ratio:635/588;
  object-fit:cover;
  border-radius:40px 0 0 0;
}
.project-title{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(34px, 4.4vw, 64px);
  letter-spacing:-2px;
  color:var(--white);
  line-height:1.05;
  margin-bottom:14px;
}
.project-tag{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  letter-spacing:1.6px;
  color:var(--white);
  margin-bottom:24px;
  display:block;
}
.project-desc p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:var(--white);
  margin-bottom:16px;
}
.project-desc p:last-child{ margin-bottom:0; }

.project-links{
  display:flex;
  gap:16px;
  margin-top:28px;
}
.project-links a{
  background:var(--white);
  color:var(--black);
  border-radius:63px;
  padding:9px 24px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:1.4px;
  transition:opacity .2s ease;
}
.project-links a:hover{ opacity:0.75; }

.project-gallery{
  display:flex;
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
  align-items:stretch;
}
.pg-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.project-gallery img{
  width:100%;
  display:block;
}
.pg-col img:last-child{
  flex:1;
  object-fit:cover;
  min-height:0;
}

.project-gallery-mobile{
  display:none;
}

/* Galería específica de Stella Maris: 2 fotos grandes arriba + 3 chicas abajo */
.sm-gallery{
  display:flex;
  flex-direction:column;
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
}
.sm-gallery-row-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.sm-gallery-row-bottom{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
}
.sm-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sm-gallery-row-top img{ aspect-ratio:1/1; }
.sm-gallery-row-bottom img{ aspect-ratio:3/4; }

@media (max-width: 768px){
  .sm-gallery-desktop{ display:none; }
}

/* Galería específica de Que Bonito: 3 columnas x 2 filas, todas del mismo tamaño */
.qb-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
}
.qb-gallery img{
  width:100%;
  height:100%;
  aspect-ratio:1/1.47;
  object-fit:cover;
  display:block;
}
@media (max-width: 768px){
  .qb-gallery{ display:none; }
}

/* Galería específica de Buenavida Visión: 3 columnas x 2 filas, todas del mismo tamaño */
.bv-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
}
.bv-gallery img{
  width:100%;
  height:100%;
  aspect-ratio:1/1.47;
  object-fit:cover;
  display:block;
}
@media (max-width: 768px){
  .bv-gallery{ display:none; }
}

/* Galería específica de Serfit: fila 2 fotos + fila 3 fotos + fila 2 fotos */
.sf-gallery{
  display:flex;
  flex-direction:column;
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
}
.sf-gallery-row{
  display:grid;
  gap:34px;
}
.sf-gallery-row-2{ grid-template-columns:0.93fr 1fr; }
.sf-gallery-row-3{ grid-template-columns:repeat(3, 1fr); }
.sf-gallery-row-2-rev{ grid-template-columns:1fr 0.93fr; }
.sf-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sf-gallery-row-2 img,
.sf-gallery-row-2-rev img{ aspect-ratio:1.33/1; }
.sf-gallery-row-3 img{ aspect-ratio:1/1.48; }

@media (max-width: 768px){
  .sf-gallery{ display:none; }
}

/* Galería específica de Chefs de Fuegos: fila 2 fotos + fila 3 fotos + fila 2 fotos */
.cf-gallery{
  display:flex;
  flex-direction:column;
  gap:34px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 5.5% 60px;
}
.cf-gallery-row{
  display:grid;
  gap:34px;
}
.cf-gallery-row-2{ grid-template-columns:0.93fr 1fr; }
.cf-gallery-row-3{ grid-template-columns:repeat(3, 1fr); }
.cf-gallery-row-2-rev{ grid-template-columns:1fr 0.93fr; }
.cf-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cf-gallery-row-2 img,
.cf-gallery-row-2-rev img{ aspect-ratio:1.33/1; }
.cf-gallery-row-3 img{ aspect-ratio:1/1.48; }

@media (max-width: 768px){
  .cf-gallery{ display:none; }
}

.project-banner{
  width:100%;
  display:block;
  aspect-ratio:1440/693;
  object-fit:cover;
}

@media (max-width: 768px){
  .project-header-row{
    grid-template-columns:1fr;
    padding:90px 0 0;
    gap:0;
  }
  .project-hero-img{
    aspect-ratio:390/422;
    border-radius:0;
  }
  .project-header-row > picture{ order:-1; }
  .project-title{ font-size:28px; padding:0 6%; margin-top:24px; }
  .project-tag{ padding:0 6%; }
  .project-desc{ padding:0 6%; }
  .project-links{ padding:0 6%; }

  .project-gallery-desktop{ display:none; }
  .project-gallery-mobile{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:0 6% 40px;
    margin-top:24px;
    max-width:var(--max-width);
    margin-left:auto;
    margin-right:auto;
  }
  .project-gallery-mobile img{
    width:100%;
    display:block;
  }
  .project-banner{
    aspect-ratio:auto;
    height:auto;
    width:88%;
    margin:0 6% 40px;
  }
}

/* ===== Ajustes home desktop ===== */
@media (min-width: 769px){
  /* Banner 2 (branding): título centrado verticalmente */
  .hero-content-center{ top:50%; transform:translateY(-50%); }
}
@media (min-width: 1101px){
  /* Grilla de proyectos de la home: composición del Figma (frame 1440) */
  .portfolio{
    --u:calc(min(100vw, 1440px) / 1440);
    position:relative;
    display:block;
    max-width:1440px;
    height:calc(var(--u) * 1525);
    padding:0;
  }
  .portfolio-col{ display:contents; }
  .portfolio-card{ position:absolute; }
  .hp-mp{ left:calc(var(--u) * 141); top:calc(var(--u) * 96);  width:calc(var(--u) * 617); }
  .hp-sm{ left:calc(var(--u) * 850); top:calc(var(--u) * 40);  width:calc(var(--u) * 463); }
  .hp-ol{ left:calc(var(--u) * 102); top:calc(var(--u) * 621); width:calc(var(--u) * 463); }
  .hp-ny{ left:calc(var(--u) * 680); top:calc(var(--u) * 833); width:calc(var(--u) * 670); }
  .hp-mp .portfolio-img{ aspect-ratio:617/392; }
  .hp-sm .portfolio-img{ aspect-ratio:463/558; }
  .hp-ol .portfolio-img{ aspect-ratio:463/613; }
  .hp-ny .portfolio-img{ aspect-ratio:670/476; }
  /* Monte Paulino y OrangeLoops: título y etiqueta en la misma línea */
  .hp-mp, .hp-ol{ display:flex; flex-wrap:wrap; align-items:center; column-gap:22px; }
  .hp-mp .portfolio-img, .hp-ol .portfolio-img{ flex:0 0 100%; }
  .hp-mp h3, .hp-ol h3{ margin-bottom:0; }
}

/* ===== Ajustes home + menú mobile (según Figma) ===== */
@media (max-width: 768px){
  /* Banner PROYECTOS: la imagen ya trae la franja nítida, se encuadra la cara */
  .proyectos-banner{ height:515px; min-height:0; max-height:none; }
  .proyectos-bg-blur{ display:none; }
  .proyectos-bg-sharp{ clip-path:none; object-position:79% center; }
  .proyectos-frame,
  .proyectos-plus{ display:none; }
  .proyectos-cross{ left:calc(79% - 25px); top:50%; font-size:28px; }

  /* Menú desplegado: grilla 2x2 */
  .site-menu-canvas{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:17px;
    box-sizing:border-box;
    width:100%;
    row-gap:43px;
    align-content:start;
    padding:95px 18px 40px 21px;
  }
  .menu-item{ margin-bottom:0; }
  .menu-item-img{ aspect-ratio:167/209; border-radius:15px 0 0 0; }
  .menu-link{
    margin-top:12px;
    text-align:center;
    font-size:16px;
    font-weight:600;
    letter-spacing:1.76px;
  }
  .mi-2{ order:1; }
  .mi-1{ order:2; }
  .mi-3{ order:3; }
  .mi-4{ order:4; }
  .site-menu-footer{
    order:5;
    grid-column:1 / -1;
    margin-top:19px;
    align-items:center;
    gap:12px;
  }
  .site-menu-footer .footer-email{ font-size:12px; }
  .site-menu-footer .footer-social{ gap:16px; }
  .site-menu-footer .footer-social svg{ width:22px; height:22px; }
  .site-menu-footer .footer-social a:nth-child(3){ order:4; }
}

/* ===== Selector de idioma ES / EN ===== */
.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  letter-spacing:1.2px;
  font-weight:500;
  color:var(--white);
}
.lang-switch a{ color:inherit; opacity:.45; transition:opacity .2s ease; }
.lang-switch a:hover,
.lang-switch a.active{ opacity:1; }
.lang-switch span{ opacity:.45; }
body.light-page .lang-switch{ color:var(--black); }
body.menu-open .lang-switch{ color:var(--white); }
.lang-switch{ position:relative; z-index:200; }

@media (max-width: 768px){
  .header-right{ gap:18px; }
  .lang-switch{ font-size:12px; }
}

/* ===== Header: bajada centrada (desktop) ===== */
@media (min-width: 769px){
  .header-inner{ position:relative; }
  .header-tag{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    white-space:nowrap;
    pointer-events:none;
  }
}