/* ═══════════════════════════════════════════════
   AMAAR7E · by Amalia Carvajal
   ═══════════════════════════════════════════════ */

:root{
  --noir:      #0B0B0B;
  --noir-2:    #131313;
  --marfil:    #F2EDE4;
  --piedra:    #8C877E;
  --piedra-d:  #55524C;
  --hielo:     #A9C6D8;
  --linea:     rgba(242,237,228,.14);

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--noir);
  color:var(--marfil);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }

::selection{ background:var(--marfil); color:var(--noir) }

/* ── Tipografía base ───────────────────── */
.kicker{
  font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--piedra); font-weight:400;
}

.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.015em;
  margin:1.1rem 0 0;
}
.section-title em{ font-style:italic; color:var(--piedra) }

.section-lead{
  max-width:44ch; margin-top:1.6rem;
  color:rgba(242,237,228,.62); font-size:1.02rem;
}

/* ── Botones ───────────────────────────── */
.btn{
  display:inline-block; position:relative;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:400; padding:1.05rem 2.4rem;
  transition:all .5s var(--ease);
}
.btn--ghost{ border:1px solid var(--linea); backdrop-filter:blur(4px) }
.btn--ghost:hover{ background:var(--marfil); color:var(--noir); border-color:var(--marfil) }

.btn--line{
  padding:0 0 .55rem; border-bottom:1px solid var(--linea);
  color:var(--marfil);
}
.btn--line::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px;
  background:var(--hielo); transition:width .6s var(--ease);
}
.btn--line:hover{ color:var(--hielo) }
.btn--line:hover::after{ width:100% }

.btn--solid{ background:var(--marfil); color:var(--noir) }
.btn--solid:hover{ background:var(--hielo) }
.btn--lg{ padding:1.25rem 3.2rem }

/* ═══════════ PRELOADER ═══════════ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--noir);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.4rem;
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden }
.loader__mark{ text-align:center }
.loader__name{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,5vw,2.6rem);
  letter-spacing:.5em; text-indent:.5em;
}
.loader__by{
  display:block; margin-top:.7rem; font-size:.64rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--piedra);
}
.loader__bar{ width:min(190px,42vw); height:1px; background:rgba(242,237,228,.14) }
.loader__bar i{
  display:block; height:100%; width:0; background:var(--marfil);
  animation:fill 1.5s var(--ease) forwards;
}
@keyframes fill{ to{ width:100% } }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem var(--pad);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:1rem var(--pad);
  background:rgba(11,11,11,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);
}
.nav__logo{
  font-family:var(--serif); font-size:1.02rem;
  letter-spacing:.42em; text-indent:.42em;
}
.nav__links{ display:flex; gap:2.6rem }
.nav__links a{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(242,237,228,.68); position:relative; padding-bottom:3px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--marfil); transition:width .5s var(--ease);
}
.nav__links a:hover{ color:var(--marfil) }
.nav__links a:hover::after{ width:100% }

.nav__cta{
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--linea); padding:.7rem 1.5rem;
  transition:all .5s var(--ease);
}
.nav__cta:hover{ background:var(--marfil); color:var(--noir); border-color:var(--marfil) }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:30px; height:18px; position:relative;
}
.nav__burger span{
  position:absolute; left:0; width:100%; height:1px; background:var(--marfil);
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:3px }
.nav__burger span:last-child{ bottom:3px }
body.menu-open .nav__burger span:first-child{ transform:translateY(6px) rotate(45deg) }
body.menu-open .nav__burger span:last-child{ transform:translateY(-6px) rotate(-45deg) }

.menu{
  position:fixed; inset:0; z-index:8500;
  background:var(--noir);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open .menu{ opacity:1; visibility:visible }
.menu a{ font-family:var(--serif); font-size:1.9rem; font-style:italic }
.menu__wa{
  font-family:var(--sans)!important; font-style:normal!important;
  font-size:.7rem!important; letter-spacing:.26em; text-transform:uppercase;
  border:1px solid var(--linea); padding:1rem 2rem; margin-top:1rem;
}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
}

/* — columna tipográfica — */
.hero__copy{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:8rem var(--pad) 5rem;
}
.hero__glow{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  width:min(900px,140%); height:min(900px,140vh);
  background:radial-gradient(circle, rgba(169,198,216,.11) 0%, rgba(11,11,11,0) 64%);
  pointer-events:none; z-index:-1;
}
.hero__title{ animation:riseIn 1.3s var(--ease) .25s both }
.hero__word{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 6.4vw, 5.6rem); line-height:1;
  letter-spacing:.13em; text-indent:.13em;
}
.hero__by{
  display:block; margin-top:1rem;
  font-size:.68rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--piedra);
}
.hero__by i{ font-style:italic; text-transform:none; letter-spacing:.1em }

.hero__kicker{
  margin:2.6rem 0 1.2rem; padding-top:2.2rem;
  border-top:1px solid var(--linea); width:100%; max-width:340px;
  font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--hielo);
  animation:riseIn 1.3s var(--ease) .5s both;
}
.hero__pitch{
  max-width:34ch; color:rgba(242,237,228,.62); margin-bottom:2.6rem;
  animation:riseIn 1.3s var(--ease) .65s both;
}
.hero__copy .btn{ animation:riseIn 1.3s var(--ease) .8s both }

/* — columna imagen — */
.hero__frame{
  position:relative; margin:0; overflow:hidden;
  animation:fadeIn 1.8s var(--ease) .1s both;
}
.hero__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 26%;
}
.hero__frame::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(11,11,11,.95) 0%, rgba(11,11,11,.25) 22%, rgba(11,11,11,0) 48%);
}
.hero__frame figcaption{
  position:absolute; right:var(--pad); bottom:2.2rem; z-index:2;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(242,237,228,.72); text-shadow:0 2px 20px rgba(0,0,0,.9);
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(34px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.hero__scroll{
  position:absolute; bottom:2rem; left:var(--pad); z-index:3;
  width:1px; height:52px; background:rgba(242,237,228,.16); overflow:hidden;
}
.hero__scroll span{
  display:block; width:100%; height:40%; background:var(--marfil);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(260%) } }

/* ═══════════ MANIFIESTO ═══════════ */
.manifesto{
  padding:clamp(7rem,18vh,14rem) var(--pad);
  text-align:center;
  border-top:1px solid var(--linea);
}
.manifesto__quote{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem, 6.4vw, 5rem); line-height:1.12;
  letter-spacing:-.01em;
}
.manifesto__quote em{ font-style:italic; color:var(--hielo) }
.manifesto__sub{
  margin-top:2.4rem; font-size:.72rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--piedra);
}

/* ═══════════ SECTION HEAD ═══════════ */
.section-head{ padding:0 var(--pad); max-width:1400px; margin:0 auto }
.section-head--center{ text-align:center }
.section-head--center .section-lead{ margin-left:auto; margin-right:auto }

/* ═══════════ COLECCIÓN ═══════════ */
.collection{ padding:clamp(5rem,12vh,9rem) 0 }

.piece{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem); align-items:center;
  max-width:1400px; margin:0 auto;
  padding:clamp(4rem,10vh,8rem) var(--pad);
}
.piece--flip .piece__img{ order:2 }

.piece__img{ overflow:hidden; background:var(--noir-2) }
.piece__img img{
  width:100%; transition:transform 1.4s var(--ease);
}
.piece:hover .piece__img img{ transform:scale(1.035) }

.piece__num{
  display:block; font-family:var(--serif); font-size:.95rem;
  letter-spacing:.3em; color:var(--piedra-d);
}
.piece__name{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.05;
  margin:.7rem 0 .9rem;
}
.piece__type{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--hielo); margin-bottom:1.7rem;
}
.piece__text{ color:rgba(242,237,228,.6); max-width:46ch }
.piece__tag{
  margin:1.7rem 0 2.2rem; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--piedra-d);
}

/* ═══════════ STRIP ═══════════ */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea); border-block:1px solid var(--linea);
}
.strip figure{ position:relative; overflow:hidden; background:var(--noir) }
.strip img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.strip figure:hover img{ transform:scale(1.04) }
/* velo solo en la franja inferior, para que el nombre se lea sobre fotos claras */
.strip figure::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:45%;
  background:linear-gradient(to top, rgba(11,11,11,.82) 0%, rgba(11,11,11,.35) 45%, rgba(11,11,11,0) 100%);
  pointer-events:none;
}
.strip figcaption{
  position:absolute; left:1.2rem; bottom:1.2rem; z-index:2;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

/* ═══════════ CTA BAND ═══════════ */
.cta-band{
  padding:clamp(5rem,12vh,8rem) var(--pad);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}
.cta-band p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.4rem); color:rgba(242,237,228,.8);
}

/* ═══════════ ARTISTA ═══════════ */
.artist{
  background:var(--noir-2);
  border-block:1px solid var(--linea);
  padding:clamp(5rem,13vh,10rem) 0;
}
.artist__inner{
  max-width:1400px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:.85fr 1fr;
  gap:clamp(2.5rem,7vw,7rem); align-items:center;
}
.artist__img{ overflow:hidden }
.artist__img img{ width:100% }

.artist__role{
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--hielo); margin:1.4rem 0 2.2rem;
}
.artist__body p{ color:rgba(242,237,228,.66); margin-bottom:1.3rem; max-width:52ch }
.artist__sign{
  font-family:var(--serif)!important; font-style:italic;
  font-size:1.7rem!important; color:var(--marfil)!important;
  margin-top:2.4rem!important; padding-top:2rem;
  border-top:1px solid var(--linea);
}

/* ═══════════ WORLD ═══════════ */
.world{ padding:clamp(5rem,13vh,10rem) 0 }

.cities{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.9rem clamp(1.2rem,3vw,2.6rem);
  padding:clamp(3rem,7vh,5rem) var(--pad) clamp(3rem,7vh,5rem);
  max-width:1000px; margin:0 auto;
}
.cities li{
  font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,1.9rem);
  color:rgba(242,237,228,.5); transition:color .5s var(--ease);
}
.cities li:hover{ color:var(--hielo) }
.cities li + li::before{
  content:"·"; margin-right:clamp(1.2rem,3vw,2.6rem); color:var(--piedra-d);
}

.world__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea); border-block:1px solid var(--linea);
}
.world__grid figure{ overflow:hidden; background:var(--noir) }
.world__grid img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  transition:transform 1.6s var(--ease);
}
.world__grid figure:hover img{ transform:scale(1.05) }

.world__note{
  text-align:center; margin-top:clamp(3rem,7vh,5rem);
  font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--piedra);
}

/* ═══════════ CIERRE ═══════════ */
.end{
  border-top:1px solid var(--linea);
  padding:clamp(6rem,16vh,12rem) var(--pad) 3.5rem;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(169,198,216,.07) 0%, rgba(11,11,11,0) 60%);
}
.end__mark{
  font-family:var(--serif); font-size:clamp(2rem,7vw,4.4rem);
  letter-spacing:.24em; text-indent:.24em;
}
.end__line{
  margin:1.4rem 0 3.2rem; font-family:var(--serif);
  font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--piedra);
}
.end__phone{
  margin-top:1.6rem; font-size:.72rem;
  letter-spacing:.26em; color:rgba(242,237,228,.5);
}
.end__social{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:2.4rem; margin:3.6rem 0 3rem;
}
.end__social a{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(242,237,228,.6); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:all .5s var(--ease);
}
.end__social a:hover{ color:var(--marfil); border-bottom-color:var(--linea) }
.end__legal{
  font-size:.62rem; letter-spacing:.14em; line-height:2;
  color:var(--piedra-d); padding-top:2.6rem; border-top:1px solid var(--linea);
}

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa{
  position:fixed; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem);
  z-index:9500; width:54px; height:54px; border-radius:50%;
  background:var(--noir); border:1px solid var(--linea);
  display:grid; place-items:center;
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), background .4s, border-color .4s;
}
.wa.is-on{ opacity:1; transform:none; pointer-events:auto }
.wa:hover{ background:var(--marfil); border-color:var(--marfil) }
.wa svg{ width:25px; height:25px; fill:var(--marfil); transition:fill .4s }
.wa:hover svg{ fill:var(--noir) }

/* ═══════════ REVEAL ═══════════ */
/* solo se ocultan si hay JS: sin JS todo se ve normal */
.js .reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none }

html:not(.js) .loader{ display:none }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1024px){
  .nav__links, .nav__cta{ display:none }
  .nav__burger{ display:block }
  .strip, .world__grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:860px){
  /* el hero pasa a una sola capa: foto de fondo + texto encima */
  .hero{ grid-template-columns:1fr }
  .hero__copy{
    grid-area:1/1; padding:9rem var(--pad) 5rem;
    justify-content:flex-end; min-height:100svh;
  }
  .hero__frame{ grid-area:1/1; height:100% }
  .hero__frame::before{
    background:linear-gradient(to bottom, rgba(11,11,11,.55) 0%, rgba(11,11,11,.45) 35%, rgba(11,11,11,.94) 82%, var(--noir) 100%);
  }
  .hero__frame figcaption{ top:6.5rem; bottom:auto; right:var(--pad) }
  .hero__kicker{ max-width:none }
  .hero__scroll{ display:none }
}

@media (max-width:760px){
  body{ line-height:1.7 }

  .piece{ grid-template-columns:1fr; gap:2.2rem }
  .piece--flip .piece__img{ order:0 }
  .piece__text{ max-width:none }

  .artist__inner{ grid-template-columns:1fr }
  .artist__img{ max-width:420px }

  .cities li + li::before{ margin-right:1.2rem }
  .end__social{ gap:1.6rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}