/* ==========================================================
   Julian Ravi — portfolio
   Réplica del diseño de Framer (referencia: ancho de 1200 px).
   Todas las medidas en % salen de dividir los px del diseño
   original por 1200, así a 1200 px coincide al píxel y en
   otros anchos escala en proporción.
   ========================================================== */

:root {
  --ink: #000;
  --paper: #fff;
  --font: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs: 16px;
  --lh: 19.2px;          /* 1.2, igual que en Framer */
  --page-max: 1200px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Header ---------- */
/* En el original: nombre a 13 px del borde izquierdo; los dos
   links en cajas de 108 px, separadas 59 px, a 12 px del borde
   derecho. Arriba, a 8 px. Ocupa todo el ancho de la ventana. */
.site-header {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 0 13px;
}
.site-header nav {
  display: flex;
  gap: 59px;
}
.site-header nav a {
  width: 108px;
  text-align: center;
}

/* ---------- Contenedor de página ---------- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: 105px;
}

/* ---------- Portada (Kefi + columna de texto) ---------- */
/* 83 px | foto 844 | 44 | texto 193 | 36 px  = 1200 */
.hero {
  padding: 0 3% 0 6.9167%;
}
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 844fr) minmax(0, 193fr);
  column-gap: 44px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 6px;
}
.hero figure { margin: 0; }
.hero-caption { margin-top: 4px; padding-left: 2px; }

/* ---------- Proyectos ---------- */
/* 86 px | foto 1052 | 62 px  = 1200 */
.projects {
  padding: 32px 5.1667% 0 7.1667%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.project { margin: 0; }
.project figcaption { margin-top: 6px; }

.media {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f2f2f2;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Proporciones tal como se ven en la página original */
.r-kefi     { aspect-ratio: 3 / 2; }
.r-maquinas { aspect-ratio: 2990 / 1654; }
.r-deoido   { aspect-ratio: 1050 / 590.5; }
.r-nye      { aspect-ratio: 2994 / 1642; }
.r-infinita { aspect-ratio: 3 / 2; }
.r-yustech  { aspect-ratio: 5872 / 4000; }
.r-giu      { aspect-ratio: 3022 / 1694; }

/* En escritorio, las separaciones exactas del original
   (en Framer cada proyecto estaba ubicado a mano, así que
   varían unos pocos píxeles entre uno y otro). */
@media (min-width: 900px) {
  .projects { gap: 0; padding-top: 31.8px; }
  .project:nth-child(1) { --cap: 6.05px; --after: 28.8px; }
  .project:nth-child(2) { --cap: 5.4px;  --after: 28.8px; }
  .project:nth-child(3) { --cap: 4.05px; --after: 30.8px; }
  .project:nth-child(4) { --cap: 4.67px; --after: 29.8px; }
  .project:nth-child(5) { --cap: 8.4px;  --after: 26.8px; }
  .project:nth-child(6) { --cap: 6.3px;  --after: 0px; }
  .project { margin-bottom: var(--after); }
  .project figcaption { margin-top: var(--cap); }
}

/* ---------- Footer ---------- */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--fp, 59.8px) 20px 14.8px 20px;
}
.site-footer .center { text-align: center; position: relative; left: 9.5px; }
.site-footer .right  { text-align: right; }
.site-footer strong  { font-weight: 700; }

/* ---------- Tablet ---------- */
@media (max-width: 899px) {
  .site-header nav { gap: 24px; }
  .site-header nav a { width: auto; }

  /* Foto, epígrafe y después la columna de texto */
  .hero {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
  }
  .hero-row { display: contents; }
  /* En tablet y celular el texto va arriba, como presentación */
  .hero-text {
    order: 1;
    margin-bottom: 32px;
    padding-bottom: 0;
    gap: 16px;
  }
  .hero figure { order: 2; }
  .hero-caption { order: 3; margin-top: 6px; padding-left: 0; }

  .projects { padding: 40px 24px 0; gap: 40px; }
}

/* ---------- Celular ---------- */
@media (max-width: 599px) {
  .site-header { padding: 0 16px; top: 12px; }
  .site-header nav { gap: 20px; }
  .page { padding-top: 72px; }
  .hero, .projects { padding-left: 16px; padding-right: 16px; }
  .hero-caption { padding-left: 0; }
  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 56px 16px 20px;
  }
  .site-footer .center,
  .site-footer .right { text-align: left; left: 0; }
}

/* ==========================================================
   Páginas de proyecto
   Fotos a todo el ancho; las separaciones en px son las del
   diseño original a 1200 px.
   ========================================================== */
.pp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.pp-head .year  { padding-left: var(--yl, 0px); flex: none; }
.pp-head .title { padding-right: var(--tr, 0px); text-align: right; }
.pp-head .title.left { text-align: left; }

.pp-block { margin-top: var(--gap, 0px); }
.pp-pair {
  display: grid;
  grid-template-columns: var(--cols, 1fr 1fr);
  column-gap: var(--g, 16px);
}
.pp-block .media { background: #f2f2f2; }

/* Video de YouTube: miniatura + botón; el reproductor carga al tocar */
.yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  background: #000 center / cover no-repeat;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt .play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Yustech: columna a la izquierda (63 px | 603 px) */
.ys-col { margin-left: 5.25%; width: 50.25%; }
.ys-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ys-head .right { text-align: right; }
.ys-head .right p + p { margin-top: 6.8px; }
.ys-imgs { display: flex; flex-direction: column; gap: 1px; margin-top: 6.8px; }
.ys-head .right { padding-top: 16px; padding-right: 2.4px; }

/* ---------- Páginas de pantalla completa (Sobre mí, Contacto) ---------- */
body.fill {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.fill main { flex: 1; position: relative; }

.about-text {
  margin: 0 11.4167%;            /* 137 px | 927 px | 136 px */
  padding-top: 167px;
}
.about-text p { text-align: center; }
.about-text .sign p { text-align: right; }
.about-text .sign { margin-top: 19.2px; }
.about-text strong { font-weight: 700; }

.about-links {
  position: absolute;
  bottom: 19px;                   /* Instagram queda a 78,8 px del texto del footer */
  left: 0;
}
.about-links p:first-child { padding-left: 137px; }
.about-links p:last-child  { padding-left: 118px; margin-top: 13.8px; }

.contact-line {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  overflow-wrap: anywhere;
  padding: 0 16px;
}
.contact-mail { top: 170px; transform: translateX(1px); }
.contact-yt   { top: calc(52% + 27.8px); transform: translateX(-3px); }
.contact-ig   { bottom: 77px; transform: translateX(-8px); }

@media (max-width: 899px) {
  .pp-head { padding: 0 24px; }
  .pp-head .year, .pp-head .title { padding-left: 0; padding-right: 0; }
  .ys-col { margin: 0 24px; width: auto; }
  .about-text { margin: 0 24px; }
}

@media (max-width: 599px) {
  .pp-head { padding: 0 16px; flex-direction: column; gap: 4px; }
  .pp-head .title { text-align: left; overflow-wrap: anywhere; }
  .pp-head .year { margin-top: 0 !important; }
  .pp-head-wrap { padding-top: 72px !important; }
  .ys-col { padding-top: 72px !important; }
  .pp-block { margin-top: min(var(--gap, 0px), 12px); }
  .pp-pair { column-gap: 8px; }
  .ys-col { margin: 0 16px; }
  .ys-head { flex-direction: column; gap: 12px; }
  .ys-head .right { text-align: left; }
  .about-text { margin: 0 16px; padding-top: 96px; }
  .about-text p, .about-text .sign p { text-align: left; }
  .about-links { position: static; padding: 48px 16px 0; }
  .about-links p:first-child,
  .about-links p:last-child { padding-left: 0; overflow-wrap: anywhere; }
  .contact-line { position: static; transform: none; text-align: left; }
  body.fill main { padding-top: 96px; display: flex; flex-direction: column; gap: 32px; }
}

/* Links dentro de textos de proyecto */
.pp-head a:hover,
.pp-head a:focus-visible { text-decoration: underline; }

/* ---------- Formulario de contacto ---------- */
.link-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
.link-btn:hover,
.link-btn:focus-visible { text-decoration: underline; }

.contact-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.contact-dialog::backdrop { background: rgba(255, 255, 255, .82); }

.contact-form {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.cf-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.contact-form label { margin-top: 14px; margin-bottom: 4px; }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 6px 0;
  width: 100%;
}
.contact-form textarea {
  border: 1px solid var(--ink);
  padding: 8px;
  resize: vertical;
  min-height: 120px;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.contact-form textarea:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.cf-status { min-height: var(--lh); }
.cf-send {
  font: inherit;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 20px;
  cursor: pointer;
  flex: none;
}
.cf-send:hover { background: var(--paper); color: var(--ink); }
.cf-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cf-send:disabled { opacity: .5; cursor: wait; }
.cf-alt { margin-top: 20px; }
.cf-addr { user-select: all; }

@media (max-width: 599px) {
  .contact-form { padding: 16px; }
  .cf-bottom { flex-direction: column; align-items: stretch; }
  .cf-send { width: 100%; }
  .cf-alt { overflow-wrap: anywhere; }
}