/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --bg:        #0a0a0a;
  --bg-alt:    #121212;
  --ink:       #f6f6f1;
  --muted:     #9a9a94;
  --accent:    #e7ec5c;
  --line:      rgba(246,246,241,0.16);

  --font-display: "Anton", sans-serif;
  --font-script:  "Caveat", cursive;
  --font-body:    "Work Sans", sans-serif;

  --pad: clamp(24px, 5vw, 72px);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

/* =========================================================
   BARRA SUPERIOR (fija, como el header del deck)
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px var(--pad);
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar__eyebrow{ color: var(--muted); }
.topbar__name{ color: var(--ink); font-weight: 600; }

/* =========================================================
   BLOQUES GENERALES DE SECCIÓN
   ========================================================= */
.slide{
  position: relative;
  min-height: 100vh;
  padding: 96px var(--pad) 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.slide--dark{ background: var(--bg-alt); }

.slide__title{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(28px, 4vw, 56px);
}

.slide__title--framed .framed{
  border: 2px solid var(--ink);
  padding: 4px 10px;
  display: inline-block;
}

.slide__title--onimg{
  color: var(--ink);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* número de página, esquina inferior */
.page-num{
  position: absolute;
  left: var(--pad);
  bottom: 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 7px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
}
.page-num--dark{ color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* elementos decorativos: destellos y estallidos, tomados del deck */
.spark{
  position: absolute;
  color: var(--accent);
  line-height: 1;
  pointer-events: none;
}
.spark--sm{ font-size: 22px; }
.spark--lg{ font-size: 34px; }

.burst{
  position: absolute;
  width: 90px;
  height: 90px;
  background: var(--accent);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity: 0.95;
}
.burst{ right: -12px; bottom: -12px; }
.burst--top-right{ top: 40px; right: 40px; bottom: auto; }
.burst--bottom-right{ right: 6%; bottom: 6%; }
.burst--behind{
  position: absolute;
  top: -18px; left: -18px;
  width: 64px; height: 64px;
  z-index: -1;
}

/* =========================================================
   01 · PORTADA
   ========================================================= */
.slide--cover{
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.cover__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}
.cover__title{
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cover__script{
  font-family: var(--font-script);
  text-transform: none;
  font-size: 0.5em;
  color: var(--ink);
}
.cover__spark1{ top: 16%; left: 14%; }
.cover__spark2{ bottom: 16%; right: 14%; }

/* =========================================================
   02 · SOBRE MÍ
   ========================================================= */
.about{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.about__portrait{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: sepia(0.25) saturate(1.4);
}
.about__text{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 55ch;
}

@media (max-width: 780px){
  .about{ grid-template-columns: 1fr; }
}

/* =========================================================
   03 · HABILIDADES
   ========================================================= */
.skills{ display: flex; flex-direction: column; gap: 0; }
.skills__photo{
  position: relative;
  height: clamp(200px, 30vh, 320px);
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1);
  margin-bottom: -1px;
}
.skills__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.92) 100%);
}
.skills__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-top: none;
}
.skills__list{
  padding: clamp(20px,3vw,32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.skills__list:first-child{ border-right: 1px solid var(--line); }
.skills__list li::before{
  content: "— ";
  color: var(--accent);
}

@media (max-width: 640px){
  .skills__grid{ grid-template-columns: 1fr; }
  .skills__list:first-child{ border-right: none; border-bottom: 1px solid var(--line); }
}

/* =========================================================
   04 · FOTOGRAFÍA (intro)
   ========================================================= */
.photo-intro{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.photo-intro__img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}
.photo-intro__text{
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink);
}
.photo-intro__spark1{ top: 30%; left: 6%; }
.photo-intro__spark2{ top: 42%; right: 6%; }

@media (max-width: 780px){
  .photo-intro{ grid-template-columns: 1fr; }
}

/* =========================================================
   05 · TRABAJO
   ========================================================= */
.slide--work{ padding: 96px 0 64px; }
.work{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
}
.work__img{
  width: 100%;
  height: clamp(320px, 70vh, 640px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.work__caption{ padding: 0 var(--pad); }
.work__caption .slide__title{ margin-bottom: 20px; }
.work__caption p{
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  max-width: 42ch;
}

@media (max-width: 780px){
  .work{ grid-template-columns: 1fr; }
  .work__caption{ padding: 32px var(--pad) 0; }
}

/* =========================================================
   06 · HERRAMIENTAS
   ========================================================= */
.tools__banner{
  position: relative;
  height: clamp(160px, 26vh, 280px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  margin: 0 calc(var(--pad) * -1) clamp(28px, 4vw, 48px);
  filter: saturate(1.1);
}
.tools__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.85), rgba(10,10,10,0.35));
}
.tools__intro{
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin: 0 0 20px;
}
.tools__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 320px));
  gap: 12px 40px;
}
.tools__list li{
  font-weight: 700;
  font-size: 1.05rem;
  padding-left: 18px;
  position: relative;
}
.tools__list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 640px){
  .tools__list{ grid-template-columns: 1fr; }
}

/* =========================================================
   07 · MELA STUDIO
   ========================================================= */
.mela{
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.mela__logo-wrap{ position: relative; }
.mela__logo{
  width: 100%;
  max-width: 420px;
  background: #f4f0e6;
  padding: 24px;
  border-radius: 4px;
}
.mela__copy p{
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 20px;
  max-width: 62ch;
}
.mela__question{ color: var(--accent); }

@media (max-width: 780px){
  .mela{ grid-template-columns: 1fr; }
}

/* =========================================================
   08 · CONTACTO
   ========================================================= */
.slide--contact{
  padding: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-bottom: none;
}
.contact__side{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  filter: grayscale(1);
}

.contact__center{
  height: 100vh;
  padding: 48px clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.contact__flow{
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  margin: 0;
}
.contact__quote{
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--accent);
  margin: 0;
}
.contact__card{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__label{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact__row{
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  align-self: center;
}
.contact__row:hover{ color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px){
  .slide--contact{ grid-template-columns: 1fr; }
  .contact__side{ height: 30vh; }
  .contact__center{ height: auto; padding: 56px var(--pad); }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding: 24px var(--pad);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}