/* Milena Jasso — Portafolio
   Implementacion semantica y responsive del diseño 'Portafolio Mile.fig'.
   Tokens: bg base #FCFCFC · zona hero/header #FEF9F8 · tinta #292929 · claro #FCFCFC */

/* ---- Fuentes ---- */
@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/Satoshi-Regular.woff2") format("woff2")}
@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;
  src:url("../assets/fonts/Satoshi-Medium.woff2") format("woff2")}
@font-face{font-family:'Lato';font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/Lato-Regular.woff2") format("woff2")}
@font-face{font-family:'Aktiv Grotesk';font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/AktivGrotesk-Regular.woff2") format("woff2")}
@font-face{font-family:'Aktiv Grotesk';font-weight:500;font-style:normal;font-display:swap;
  src:url("../assets/fonts/AktivGrotesk-Medium.woff2") format("woff2")}
@font-face{font-family:'Aktiv Grotesk';font-weight:700;font-style:normal;font-display:swap;
  src:url("../assets/fonts/AktivGrotesk-Bold.woff2") format("woff2")}
@font-face{font-family:'Aktiv Grotesk';font-weight:700;font-style:italic;font-display:swap;
  src:url("../assets/fonts/AktivGrotesk-BoldItalic.woff2") format("woff2")}
/* Alias con SOLO la Regular (sin cara itálica): al pedir italic el navegador la
   SINTETIZA a peso normal. La única cara italic real de Aktiv Grotesk es la
   BoldItalic (700), que se usaría siempre y saldría en bold. */
@font-face{font-family:'Aktiv Grotesk Oblique';font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/AktivGrotesk-Regular.woff2") format("woff2")}
@font-face{font-family:"Editor's Note";font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/EditorsNote-Regular.woff2") format("woff2")}

/* ---- Tokens ---- */
:root{
  --ink:#292929;
  --light:#FCFCFC;
  --pink:rgba(252,239,234,.8);
  --pink-solid:#FCF2EE;
  --gutter:80px;
  --maxw:1280px;
  --sans:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --grotesk:'Aktiv Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --grotesk-italic:'Aktiv Grotesk Oblique','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:"Editor's Note",Georgia,'Times New Roman',serif;
  --serif-ui:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --legal:'Lato',system-ui,sans-serif;
}

/* ---- Reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--light);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---- Header ---- */
.header{
  position:static;
  display:flex;align-items:center;justify-content:space-between;
  height:100px;padding:24px var(--gutter);
  background:var(--pink);
}
.header__logo img{width:47px;height:57px}
.nav{display:flex;gap:32px;font-size:16px;text-transform:uppercase;letter-spacing:1.28px;font-weight:500;font-family:var(--grotesk)}
.nav a{transition:opacity .2s}
.nav a:hover{font-family:var(--grotesk);font-weight:700;font-style:italic}
/* Home (index): header con el mismo rosa que el hero (var(--pink)) y nav en
   grotesca (Aktiv Grotesk, como Priordei) en vez de Satoshi. */
.page-home .header{background:var(--pink)}
.page-home .nav{font-family:var(--grotesk)}
/* Botón hamburguesa (2 líneas): oculto en escritorio, visible solo en móvil */
.header__toggle{display:none;position:relative;width:28px;height:12px;background:none;border:0;padding:0;cursor:pointer;flex-shrink:0}
.header__toggle span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px}
.header__toggle span:nth-child(1){top:0}
.header__toggle span:nth-child(2){bottom:0}

/* Menú móvil a pantalla completa (Figma 277:393): oculto por defecto (incl. escritorio) */
.menu{display:none}

/* ---- Hero ---- */
.hero{
  background:var(--pink);
  min-height:740px;
  /* Composicion subida ~40px para que quede centrada en la banda */
  display:flex;align-items:flex-start;justify-content:center;gap:0;
  padding:110px var(--gutter) 60px;
}
.hero__inner{
  display:flex;align-items:flex-start;gap:0;
}
.hero__badge{
  width:212px;height:auto;flex-shrink:0;
  /* alinear la estrella del sello con la línea "MILENA" y acercarlo al nombre */
  margin-top:12px;
  margin-right:-59px;
}
.hero__wordmark{
  width:723px;max-width:100%;height:auto;
}

/* ---- Intro ---- */
.intro{
  max-width:var(--maxw);margin:0 auto;
  padding:220px var(--gutter);
}
.intro__inner{
  max-width:961px;
  display:flex;flex-direction:column;align-items:flex-start;gap:28px;
}
.intro__title{
  font-family:var(--grotesk);
  font-weight:400;font-size:42px;line-height:52px;
}
.intro__title strong{font-weight:700}
.intro__link{
  font-family:var(--grotesk);font-weight:400;font-size:20px;
  text-decoration:underline;text-underline-position:from-font;
}
/* Links de texto subrayados: Aktiv Grotesk Regular; al pasar el raton -> Bold Italic */
.intro__link:hover,.project__link:hover,.about__link:hover{font-weight:700;font-style:italic}

/* ---- Work ---- */
.work{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter) 120px;
  display:flex;flex-direction:column;align-items:center;gap:102px;
  font-family:var(--grotesk);
}
/* Cada proyecto: en el DOM va [cover, info]; el desktop alterna con row-reverse */
.project{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:41px;
  flex-direction:row-reverse; /* texto izquierda, imagen derecha */
}
.project--media-left{flex-direction:row} /* imagen izquierda, texto derecha */
.project__info{
  flex:0 1 589px;min-width:0;
  display:flex;flex-direction:column;gap:28px;
}
/* info y portada escalan juntos manteniendo la proporcion de Figma (589:650) */
.project__head{display:flex;align-items:center;gap:20px}
.project__name{font-weight:700;font-size:20px;line-height:1.2;letter-spacing:.8px}
.project__divider{width:2px;height:20px;background:var(--ink);flex-shrink:0}
/* El nombre queda SIEMPRE en una línea (no encoge); el tag envuelve dentro de su columna
   si es muy largo (p.ej. "Branding & Fundraising Campaign"), en vez de desbordar. */
.project__tag{font-weight:700;font-size:20px;line-height:1.2;letter-spacing:.8px;min-width:0}
.project__name{white-space:nowrap;flex-shrink:0}
.project__desc{font-weight:400;font-size:24px;line-height:1.3}
.project__desc strong{font-weight:700}
.project__link{
  font-weight:400;font-size:20px;text-decoration:underline;
  text-underline-position:from-font;align-self:flex-start;
}
/* Portada: caja con relacion 650x500; admite <img> plana o capas (video + overlays) */
.project__cover{
  flex:0 1 650px;min-width:0;
  position:relative;aspect-ratio:650/500;
  border-radius:2px;overflow:hidden;
}
.project__cover-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;border-radius:inherit;
}
/* Tarjeta PONTE GUAPO: video de puma + onda azul + logo */
.project__cover--pg{background:#fff}
.project__cover--pg .pg-wave{
  position:absolute;left:0;bottom:0;width:100%;height:auto;
  z-index:1;pointer-events:none;
}
.project__cover--pg .pg-logo{
  position:absolute;left:46.9%;top:72.4%;width:51.1%;height:auto;
  z-index:2;pointer-events:none;
}

/* Boton "Explore all projects" (pill) */
.work__cta{
  align-self:center;
  font-family:var(--grotesk);font-weight:400;font-size:18px;line-height:1;
  padding:16px 20px;border:1px solid var(--ink);border-radius:32px;
  transition:background .2s,color .2s;
}
.work__cta:hover{background:var(--ink);color:var(--light)}

/* ---- About (Figma 451:5050) ---- */
.about{
  background:var(--pink-solid);
  display:flex;align-items:center;justify-content:space-between;gap:41px;
  padding:120px var(--gutter);
}
.about__photo{flex:0 1 585px;min-width:0}
/* La imagen ya viene recortada en arco con transparencia: sin border-radius ni crop */
.about__photo img{width:100%;height:auto;display:block}
.about__info{
  flex:0 1 589px;min-width:0;
  display:flex;flex-direction:column;gap:28px;font-family:var(--grotesk);
}
.about__title{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:1.6px;
}
.about__text{font-weight:400;font-size:24px;line-height:1.3}
.about__text strong{font-weight:700}
.about__link{
  font-weight:400;font-size:20px;text-decoration:underline;
  text-underline-position:from-font;align-self:flex-start;
}

/* ---- Footer (Figma 255:127): compartido index + priordei ---- */
.site-footer{
  background:var(--light);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:64px var(--gutter);
  font-family:'Aktiv Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.site-footer__top{display:flex;align-items:center;justify-content:center;gap:clamp(40px,18vw,296px);width:100%}
.site-footer__col{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.site-footer__head{font-size:14px;color:var(--ink);text-transform:uppercase;letter-spacing:.6px}
.site-footer__links{display:flex;flex-direction:column;gap:14px;font-size:13px;color:#656565;letter-spacing:.4px}
.site-footer__links a{text-transform:uppercase}
.site-footer__links a[href^="mailto"]{text-transform:none}
.site-footer__links a:hover{color:var(--ink)}
.site-footer__logo{flex-shrink:0;display:block}
.site-footer__logo img{width:72px;height:87px;display:block;object-fit:contain}
.site-footer__bottom{display:flex;flex-direction:column;align-items:center;gap:21px;max-width:264px;text-align:center}
.site-footer__tagline{font-size:13px;line-height:1.4;color:var(--ink)}
.site-footer__copy{font-family:var(--legal);font-size:13px;line-height:24px;color:var(--ink)}
@media (max-width:640px){
  .site-footer__top{flex-direction:column;gap:40px}
}

/* ---- Reveal al hacer scroll (aparición suave, igual que los case studies) ---- */
.reveal-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal-on .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-on .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Responsive ---- */
@media (max-width:1024px){
  :root{--gutter:48px}
  .hero{min-height:0;padding:48px var(--gutter)}
  .hero__inner{flex-direction:column;align-items:center;gap:16px}
  .hero__badge{margin:0}
  .intro{padding:150px var(--gutter)}
  .intro__title{font-size:34px;line-height:1.3}
  .project__desc{font-size:20px}
  .about__title{font-size:34px}
  .about__text{font-size:20px}
}

/* Work: apila imagen sobre texto por debajo de 1100px. Es donde el layout lado-a-lado
   deja de tener sitio para el head del proyecto (nombre largo, p.ej. "CENTRO MÉDICO
   CATALUNYA", + tag) y desbordaba en horizontal; ese scroll "cortaba" los fondos de color
   del hero y del about por la derecha. Escritorio (≥1101) sin cambios. */
@media (max-width:1100px){
  .project,.project--media-left{flex-direction:column;align-items:stretch;gap:24px}
  .project__cover{flex:none;width:100%}
  .project__info{flex:none;width:100%;gap:24px}
}

@media (max-width:768px){
  :root{--gutter:24px}
  /* Móvil: logo a la izquierda, hamburguesa a la derecha; el menú es un overlay */
  .header{height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0;padding:16px var(--gutter)}
  .header__toggle{display:block}
  .nav{display:none}
  /* Solo en movil: ocultar el sello/circulo del hero */
  .hero__badge{display:none}

  /* Menú a pantalla completa (Figma 277:393) */
  body.menu-open{overflow:hidden}
  .menu{
    position:fixed;inset:0;z-index:1000;
    flex-direction:column;
    padding:16px var(--gutter) 48px;
    background:#ea4934;color:#fcfcfc;
    overflow-y:auto;
  }
  body.menu-open .menu{display:flex}
  .menu__bar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
  .menu__logo img{width:47px;height:57px;display:block;filter:brightness(0) invert(1)}
  .menu__close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;border:0;color:#fcfcfc;cursor:pointer}
  .menu__close svg{width:30px;height:30px;display:block}
  .menu__links{
    display:flex;flex-direction:column;align-items:center;gap:18px;
    margin:auto 0;text-align:center;
    font-family:'Aktiv Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;
  }
  .menu__links a{font-size:clamp(46px,16vw,64px);line-height:1.05;text-transform:uppercase;color:#fcfcfc}
  /* Solo móvil: al seleccionar (tap/hover/focus) un enlace pasa a bold itálica
     (los enlaces ya son 700 → usa la cara Aktiv Grotesk BoldItalic real) */
  .menu__links a:hover,
  .menu__links a:focus,
  .menu__links a:active{font-style:italic}
  .menu__foot{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .menu__foot-title{font-family:'Aktiv Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:24px;color:#fcfcfc}
  .menu__foot-mail{font-style:italic;font-size:20px;text-decoration:underline;text-underline-position:from-font;color:#fcfcfc}

  .intro{padding:64px var(--gutter)}
  .intro__title{font-size:28px}
  .work{gap:64px;padding-bottom:64px}
  /* Apilar: imagen arriba, texto abajo (mismo orden del DOM en todas las filas) */
  /* flex:none para que el flex-basis (650/589px) no se interprete como ALTURA en columna */
  .project,.project--media-left{flex-direction:column;align-items:stretch;gap:24px}
  .project__cover{flex:none;width:100%}
  .project__info{flex:none;width:100%;gap:24px}
  .project__desc{font-size:20px}
  .project__tag{white-space:normal} /* en movil el tag puede envolver */
  /* En móvil, el head se APILA (nombre sobre tag) y se oculta el divisor: en una columna
     estrecha (~342px a 390px) el nombre largo ("Centro Médico Catalunya") + tag inline
     desbordaba y eso "cortaba" el fondo del header y del about. En escritorio queda inline. */
  .project__head{flex-direction:column;align-items:flex-start;gap:8px}
  .project__divider{display:none}
  .project__name{white-space:normal}

  /* About apilado */
  .about{flex-direction:column;align-items:stretch;gap:32px;padding:64px var(--gutter)}
  .about__photo{flex:none;width:100%}
  .about__info{flex:none;width:100%}
  .about__title{font-size:30px}
}