/* =========================================================
   [foto] portfolio — intro
   Lienzo de diseño: 1710 x 1110 px (mismas proporciones que
   la referencia). El .stage se escala entero para adaptarse
   a cualquier pantalla sin romper el layout.
   ========================================================= */

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #F1EDEC;
  overflow: hidden;
}

body{
  font-family: 'Roboto', Arial, sans-serif;
}

img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.viewport{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #F1EDEC;
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}

.viewport.is-leaving{
  opacity: 0;
  filter: blur(5px);
  transform: scale(1.015);
  pointer-events: none;
}

/* Lienzo de tamaño fijo, centrado y escalado por JS
   (transform: scale) para respetar el diseño exacto */
.stage{
  position: absolute;
  top: 0;
  left: 0;
  width: 1710px;
  height: 1110px;
  transform-origin: top left;
  background: #F1EDEC;
}

/* =========================================================
   Textos
   ========================================================= */

.txt-foto{
  position: absolute;
  left: 570px;
  top: 360px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 69px;
  letter-spacing: -0.11em;
  color: #EAAEC6;
  line-height: 1;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.txt-portfolio{
  position: absolute;
  left: 500px;
  top: 400px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 230px;
  letter-spacing: -0.11em;
  color: #26262C;
  line-height: 0.82;
  white-space: nowrap;
  z-index: 2;
}

/* =========================================================
   Iconos de programas
   ========================================================= */

.item-ae{ position: absolute; left: 400px; top: 118px; width: 95px; height: 95px; }
.item-pr{ position: absolute; left: 1305px; top: 210px; width: 90px; height: 90px; }
.item-ps{ position: absolute; left: 1430px; top: 450px; width: 95px; height: 95px; }
.item-ai{ position: absolute; left: 425px; top: 705px; width: 90px; height: 90px; }

/* =========================================================
   Flores decorativas
   ========================================================= */

.flor{
  position: absolute;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.flor-top{      left: 1300px;  top: 500px; width: 68px;  height: 68px; }
.flor-mid{      left: 345px;  top: 548px; width: 68px;  height: 68px; }
.flor-big{      left: 515px;  top: 805px; width: 140px; height: 140px; }
.flor-producto{ left: 1188px; top: 748px; width: 70px;  height: 68px; }

/* =========================================================
   Fotos con su etiqueta (figure > img + figcaption)
   ========================================================= */

.fig{
  position: absolute;
  margin: 0;
  text-align: center;
}

.fig img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fig figcaption{
  margin-top: 9px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.11em;
  color: #26262C;
  white-space: nowrap;
}

.fig-periodistica{ left: 1125px; top: 99px;  width: 122px; height: 158px; }
.fig-deportiva{    left: 220px;  top: 635px; width: 125px; height: 158px; }
.fig-show{         left: 1114px; top: 870px; width: 160px; height: 125px; }
.fig-producto{     left: 1320px; top: 745px; width: 130px; height: 155px; }

/* =========================================================
   Carpeta clickeable
   ========================================================= */

/* Capa de ATRÁS de la carpeta (con oreja): va detrás del texto,
   se solapa con la base de las letras de "portfolio" */
.folder-back-layer{
  position: absolute;
  left: 635px;
  top: 500px;
  width: 415px;
  height: 323px;
  z-index: 1;
  pointer-events: none;
}

.folder{
  position: absolute;
  left: 635px;
  top: 548px;
  width: 415px;
  height: 275px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.folder:focus-visible{
  outline: 3px solid #26262C;
  outline-offset: 6px;
  border-radius: 8px;
}

.folder:hover{
  transform: scale(1.035) rotate(-1deg);
}
.folder:active{
  transform: scale(.97);
}

.folder-front{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: bottom center;
  transition: transform .55s cubic-bezier(.6,0,.35,1), opacity .5s ease;
}

.folder.opening .folder-front{
  transform: rotateX(58deg) translateY(-18px);
  opacity: 0;
}
img.folder-back-layer.opening{
  transform: scale(1.06) translateY(-6px);
  transition: transform .55s cubic-bezier(.2,.8,.2,1) .1s;
}

/* La transición anterior con círculo rosa fue retirada. */
.reveal{ display: none !important; }

/* =========================================================
   Animación de entrada (pop-up) con leve delay escalonado
   ========================================================= */

.pop{
  opacity: 0;
  transform: scale(.4);
  animation: popIn .55s cubic-bezier(.26,1.4,.4,1) forwards;
  animation-play-state: paused;
}

.stage.is-ready .pop{
  animation-play-state: running;
}

/* al terminar el pop-in liberamos la animación para que
   hover / click (carpeta) puedan mover el transform en paz */
.pop.popped{
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes popIn{
  0%   { opacity: 0; transform: scale(.4); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* la carpeta hereda el scale(1) del pop-in + su propio hover,
   por eso separamos el transform de hover en un wrapper implícito */
.folder.pop{
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .pop{
    opacity: 1;
    transform: none;
    animation: none;
  }
  .folder,
  .folder-front,
  .folder-back,
  .reveal{
    transition: none;
  }
}


/* INTERACCIÓN SUTIL DE LOS ELEMENTOS DE LA INTRO */
.intro-clickable{
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: center center;
}

.intro-clickable.intro-click-pop{
  animation: introClickPop .34s cubic-bezier(.22,.8,.3,1) both;
  animation-delay: 0ms !important;
}

@keyframes introClickPop{
  0%{ transform: translateY(0) scale(1); }
  45%{ transform: translateY(-7px) scale(1.045); }
  100%{ transform: translateY(0) scale(1); }
}

/* =========================================================
   HOME / PORTFOLIO FOTOGRÁFICO
   Se agrega debajo de la intro sin modificar su layout.
   ========================================================= */

html.portfolio-open,
body.portfolio-open{
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.portfolio-open{
  background: #F1EDEC;
}

.viewport[hidden],
.site-shell[hidden]{
  display: none !important;
}

.site-shell{
  width: 100%;
  min-height: 100vh;
  background: #F1EDEC;
  color: #26262C;
  opacity: 0;
}

.site-shell.is-visible{
  animation: siteFadeIn .45s ease forwards;
}

@keyframes siteFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* HEADER */
.main-header{
  width: 100%;
  height: 80px;
  background-color: #F1EDEC;
  display: flex;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

.header-brand{
  position: absolute;
  top: 19.28px;
  left: 50px;
  height: 41.44px;
  width: auto;
  display: block;
  z-index: 2;
}

.iso-header{
  display: block;
  height: 41.44px;
  width: auto;
}

.menu-links{
  position: relative;
  width: 100%;
  height: 100%;
}

.menu-links a{
  position: absolute;
  top: 30px;
  height: 15px;
  color: #26262C;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.menu-links a:nth-child(1){ left: 160px; }
.menu-links a:nth-child(2){ left: 265px; }
.menu-links a:nth-child(3){ right: 50px; left: auto; }

.menu-links a:hover,
.menu-links a:focus-visible{
  color: #EAAEC6;
}

/* CTA de diseño gráfico en el extremo derecho */
.menu-links .design-graphic-link{
  top: 19px;
  min-width: 154px;
  height: 42px;
  padding: 0 24px;
  border: 2px solid #EAAEC6;
  border-radius: 20px;
  background: #F1EDEC;
  color: #EAAEC6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 700;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.menu-links .design-graphic-link:hover,
.menu-links .design-graphic-link:focus-visible{
  background: #EAAEC6;
  color: #F1EDEC;
  transform: translateY(-1px);
}

#hamburger-btn{
  display: none;
  position: fixed;
  top: 22px;
  right: 20px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #26262C;
  z-index: 10001;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#hamburger-btn span{
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}

#hamburger-btn[aria-expanded="true"] span:nth-child(1){
  transform: translateY(14px) rotate(45deg);
}

#hamburger-btn[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}

#hamburger-btn[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-14px) rotate(-45deg);
}

#mobile-menu{
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: min(70vw, 360px);
  height: 100vh;
  padding: 100px 20px 20px;
  gap: 20px;
  background-color: #F1EDEC;
  box-shadow: -4px 0 12px rgba(0,0,0,.1);
  z-index: 10000;
}

#mobile-menu.show{
  display: flex;
}

#mobile-menu a{
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  color: #26262C;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

/* PORTADA CON GRADIENTE ANIMADO */
.photo-hero{
  min-height: 500px;
  padding: 80px 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, #EAAEC6, #F3BDD2, #F1EDEC, #F3BDD2, #E080A7);
  background-size: 800% 800%;
  animation: gradientMove 8s ease-in-out infinite;
}

@keyframes gradientMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.photo-hero__content{
  width: min(1080px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.photo-hero__title{
  width: 100%;
  margin: 0;
  color: #26262C;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(50px, 5.7vw, 84px);
  font-weight: 700;
  letter-spacing: -3.4px;
  line-height: .88;
  text-align: center;
}

.photo-hero__line{
  display: block;
  white-space: nowrap;
}

.photo-hero__line--one{
  transform: translateX(-8%);
}

.photo-hero__line--two{
  margin-top: 10px;
  transform: translateX(9%);
  font-style: italic;
  font-weight: 700;
}

.photo-contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 46px;
  padding: 0 34px;
  border: 2px solid #EAAEC6;
  border-radius: 20px;
  background: #F1EDEC;
  color: #EAAEC6;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.photo-contact-btn:hover,
.photo-contact-btn:focus-visible{
  background: #EAAEC6;
  color: #F1EDEC;
  transform: translateY(-2px);
}

.site-shell.is-visible .main-header{
  animation: headerIn .45s ease both;
}

.site-shell.is-visible .photo-hero__line--one{
  animation: heroLineOne .65s cubic-bezier(.22,.8,.3,1) both .12s;
}

.site-shell.is-visible .photo-hero__line--two{
  animation: heroLineTwo .65s cubic-bezier(.22,.8,.3,1) both .2s;
}

.site-shell.is-visible .photo-contact-btn{
  animation: heroButtonIn .55s ease both .34s;
}

@keyframes headerIn{
  from{ opacity: 0; transform: translateY(-12px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes heroLineOne{
  from{ opacity: 0; transform: translate(-8%, 20px) scale(.985); }
  to{ opacity: 1; transform: translate(-8%, 0) scale(1); }
}

@keyframes heroLineTwo{
  from{ opacity: 0; transform: translate(9%, 20px) scale(.985); }
  to{ opacity: 1; transform: translate(9%, 0) scale(1); }
}

@keyframes heroButtonIn{
  from{ opacity: 0; transform: translateY(16px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* GALERÍA EN DOS COLUMNAS, MISMO ORDEN QUE LA REFERENCIA */
.photo-gallery{
  width: 100%;
  padding: 64px 40px 112px;
  background: #F1EDEC;
}

.photo-gallery__grid{
  width: calc(100% - 20px);
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 42.5532% 57.4468%;
  gap: 20px;
  align-items: start;
}

.photo-gallery__column{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.photo-card{
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.photo-card img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}



/* VISOR DE FOTOGRAFÍAS A PANTALLA COMPLETA */
.photo-card{
  position: relative;
  cursor: zoom-in;
  outline: none;
}

.photo-card img{
  transition: transform .35s cubic-bezier(.22,.75,.3,1), filter .35s ease;
}

.photo-card:hover img,
.photo-card:focus-visible img{
  transform: scale(1.012);
}

.photo-card:focus-visible{
  box-shadow: 0 0 0 3px #EAAEC6;
}

body.lightbox-open{
  overflow: hidden !important;
}

.photo-lightbox[hidden]{
  display: none !important;
}

.photo-lightbox{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  background: rgba(13,13,15,.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility .26s ease;
  cursor: zoom-out;
}

.photo-lightbox.is-open{
  opacity: 1;
  visibility: visible;
}

.photo-lightbox__image{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  object-fit: contain;
  pointer-events: auto;
  user-select: none;
  transform: scale(.985);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,.75,.3,1), opacity .26s ease;
  cursor: default;
}

.photo-lightbox.is-open .photo-lightbox__image{
  transform: scale(1);
  opacity: 1;
}

.photo-lightbox__close{
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #EAAEC6;
  border-radius: 50%;
  background: #F1EDEC;
  color: #EAAEC6;
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.photo-lightbox__close:hover,
.photo-lightbox__close:focus-visible{
  background: #EAAEC6;
  color: #F1EDEC;
  transform: scale(1.035);
  outline: none;
}

/* APARICIÓN SUTIL AL HACER SCROLL */
.scroll-reveal{
  opacity: 0;
  transform: translateY(28px) scale(.988);
  transition: opacity .7s ease var(--reveal-delay, 0ms),
              transform .7s cubic-bezier(.22,.75,.3,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* FOOTER */
.site-footer{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background-color: #EAAEC6;
}

.footer-container{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 60px;
  padding-left: 150px;
  padding-top: 100px;
  position: relative;
  z-index: 2;
}

.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 60px;
  border-right: 1px solid #F1EDEC;
  color: #F1EDEC;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.footer-nav a{
  color: #F1EDEC;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible{
  color: #3A2117;
}

.footer-social{
  align-self: flex-end;
  display: flex;
  gap: 24px;
  transform: translateY(-32px);
}

.footer-social a{
  display: block;
  width: 25px;
  height: 25px;
}

.footer-social svg{
  display: block;
  width: 25px;
  height: 25px;
  fill: #F1EDEC;
  transition: transform .2s ease;
}

.footer-social a:hover svg,
.footer-social a:focus-visible svg{
  transform: scale(1.1);
}

.footer-logo{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  object-fit: cover;
  pointer-events: none;
}

#inicio-foto,
#portfolio,
#footer{
  scroll-margin-top: 80px;
}

html.portfolio-open{
  scroll-behavior: smooth;
}

@media (max-width: 900px){
  .photo-hero{
    min-height: 430px;
  }

  .photo-gallery{
    padding: 42px 24px 80px;
  }

  .photo-gallery__grid,
  .photo-gallery__column{
    gap: 14px;
  }

  .footer-container{
    padding-left: 70px;
  }
}

@media (max-width: 768px){
  #hamburger-btn{
    display: flex;
  }

  .menu-links{
    display: none;
  }

  .header-brand{
    left: 30px;
  }

  .photo-hero{
    min-height: 390px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .photo-hero__title{
    font-size: clamp(40px, 8.8vw, 58px);
    letter-spacing: -2.3px;
  }

  .photo-hero__line--one{
    transform: translateX(-3%);
  }

  .photo-hero__line--two{
    transform: translateX(4%);
  }

  .footer-container{
    padding: 70px 40px 0;
  }

  .site-shell.is-visible .photo-hero__line--one{
    animation-name: heroLineOneMobile;
  }

  .site-shell.is-visible .photo-hero__line--two{
    animation-name: heroLineTwoMobile;
  }
}

@keyframes heroLineOneMobile{
  from{ opacity: 0; transform: translate(-3%, 18px) scale(.985); }
  to{ opacity: 1; transform: translate(-3%, 0) scale(1); }
}

@keyframes heroLineTwoMobile{
  from{ opacity: 0; transform: translate(4%, 18px) scale(.985); }
  to{ opacity: 1; transform: translate(4%, 0) scale(1); }
}

@media (max-width: 640px){
  .photo-gallery{
    padding: 24px 16px 64px;
  }

  .photo-gallery__grid{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .photo-gallery__column{
    display: contents;
  }

  .photo-card{
    order: var(--mobile-order);
  }

  .footer-container{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 30px;
    padding: 55px 30px 0;
  }

  .footer-nav{
    align-items: flex-start;
    padding-right: 30px;
  }

  .footer-social{
    align-self: center;
    gap: 16px;
    transform: none;
  }

  .footer-logo{
    margin-top: 0;
  }
}

@media (max-width: 420px){
  .photo-hero{
    min-height: 350px;
  }

  .photo-hero__title{
    font-size: 35px;
    letter-spacing: -1.6px;
  }

  .photo-hero__line{
    white-space: normal;
  }

  .photo-contact-btn{
    min-width: 150px;
    height: 43px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  html.portfolio-open{
    scroll-behavior: auto;
  }

  .site-shell.is-visible,
  .site-shell.is-visible .main-header,
  .site-shell.is-visible .photo-hero__line,
  .site-shell.is-visible .photo-contact-btn{
    animation: none;
    opacity: 1;
  }

  .photo-hero{
    animation: none;
  }

  .scroll-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .intro-clickable.intro-click-pop,
  .photo-lightbox,
  .photo-lightbox__image,
  .photo-card img{
    animation: none;
    transition: none;
  }
}


/* =========================================================
   INTRO MOBILE: composición ampliada y mejor espaciada
   ========================================================= */
@media (max-width: 768px) and (orientation: portrait){
  /* En mobile la composición sigue siendo grande, pero los elementos
     periféricos se redistribuyen para liberar aire alrededor del título
     y de la carpeta. El layout de escritorio no cambia. */

  .txt-foto{
    left: 565px;
    top: 335px;
  }

  .txt-portfolio{
    left: 500px;
    top: 400px;
  }

  .folder-back-layer{
    left: 635px;
    top: 500px;
  }

  .folder{
    left: 635px;
    top: 548px;
  }

  .item-ae{
    left: 340px;
    top: 95px;
  }

  .fig-periodistica{
    left: 1085px;
    top: 85px;
  }

  .item-pr{
    left: 1270px;
    top: 205px;
  }

  .item-ps{
    left: 1285px;
    top: 465px;
  }

  .item-ai{
    left: 350px;
    top: 680px;
  }

  .fig-deportiva{
    left: 300px;
    top: 800px;
  }

  .fig-producto{
    left: 1260px;
    top: 800px;
  }

  .fig-show{
    left: 1035px;
    top: 920px;
  }

  .flor-mid{
    left: 430px;
    top: 555px;
  }

  .flor-top{
    left: 1190px;
    top: 550px;
  }

  .flor-big{
    left: 500px;
    top: 885px;
  }

  .flor-producto{
    left: 1150px;
    top: 770px;
  }
}