/* =========================================================
   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;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:60px;
  padding:100px 5.5% 40px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-16px);
  transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.site-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .4s ease, transform .4s ease;
}

.site-menu-nav{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  width:100%;
  max-width:900px;
}

.menu-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.menu-item-img{
  width:100%;
  aspect-ratio:4/5;
  border-radius:16px 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{
  font-family:var(--font-body);
  font-weight:300;
  font-size:13px;
  letter-spacing:2px;
  color:var(--white);
}

.site-menu-footer{
  display:flex;
  align-items:center;
  gap:40px;
}
.footer-email-dark{ color:var(--white); font-size:14px; }
.footer-social-dark a{ color:var(--white); }
.footer-social-dark svg{ width:18px; height:18px; }

/* ===================== 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 .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(--white);
  color:var(--black);
  padding:60px 5.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}
.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(--black);
  display:flex;
  transition:opacity .2s ease;
}
.footer-social a:hover{ opacity:0.6; }

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

  .site-header{ padding:16px 6%; }
  .header-tag{ display:none; }
  .menu-toggle{ display:block; }
  .site-menu{ gap:40px; padding:90px 6% 30px; }
  .site-menu-nav{ grid-template-columns:repeat(2, 1fr); gap:16px; max-width:100%; }
  .site-menu-footer{ 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-frame, .proyectos-cross{ display:none; }
  .proyectos-bg-blur{ filter:none; transform:none; }
  .proyectos-bg-sharp{ display:none; }
  .proyectos-headings{ flex-direction:column; align-items:flex-start; gap:22px; 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; }
}