/* ============================================================
   NATALITY — Portfolio
   Paleta: rosa #FA3E77 · papel frío #EDEDFB
   Tipos: Sigmar (títulos) · Nerko One (subtítulos) · Lato 300 (cuerpo)
   Fuentes auto-hospedadas en /fonts para que carguen SIEMPRE
   (sin depender de Google Fonts ni de la conexión externa).
   ============================================================ */

@font-face {
  font-family: "Sigmar";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sigmar-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sigmar";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sigmar-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nerko One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nerko-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nerko One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nerko-one-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fuente-titulo: "Sigmar", system-ui, sans-serif;
  --fuente-sub: "Nerko One", system-ui, sans-serif;
  --fuente-cuerpo: "Lato", system-ui, sans-serif;
  --rosa: #FA3E77;
  --rosa-oscuro: #d92a5f;
  --rosa-suave: #fdd9e4;
  --rosa-bruma: #f7e9f0;
  --papel: #EDEDFB;
  --tinta: #2b2340;
  --tinta-suave: #6b6284;
  --lila: #b9a8e0;
  --blanco: #ffffff;
  --radio: 18px;
  --sombra: 0 10px 30px rgba(43, 35, 64, 0.10);
  --sombra-hover: 0 16px 40px rgba(250, 62, 119, 0.22);
  --transicion: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
  background-color: var(--papel);
  color: var(--tinta);
  line-height: 1.65;
  overflow-x: hidden;
}

strong { font-weight: 700; }

/* Textura de papel (ruido SVG) sobre el fondo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

h1, h2 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

h3 {
  font-family: var(--fuente-sub);
  font-weight: 400;
  line-height: 1.15;
}

.manuscrita {
  font-family: "Caveat", cursive;
  font-weight: 600;
  color: var(--rosa);
}

a { color: var(--rosa); }

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

.contenedor {
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* ============ NAV — banda rosa, letras blancas ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rosa);
  box-shadow: 0 4px 18px rgba(250, 62, 119, 0.25);
  transition: top 0.35s ease;
}

/* se esconde al bajar y reaparece al subir. Se mueve con top (no con
   transform) para que arriba del todo ocupe siempre su sitio: así, al subir
   deprisa, no asoma el fondo entre la nav y el banner. La altura la pone
   main.js en --alto-nav */
.nav--oculta { top: calc(-1 * var(--alto-nav, 72px)); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
}

.logo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.logo span { color: var(--rosa-suave); }

.nav-derecha {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  align-items: center;
}

/* botón de idioma ES/EN */
.idioma-btn {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.idioma-btn:hover {
  background: #fff;
  color: var(--rosa);
}

.nav-links a {
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  font-size: 0.98rem;
  position: relative;
  padding: 0.2rem 0;
}

/* subrayado "pincelada" al pasar el ratón */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}

.nav-burger span {
  display: block;
  width: 26px; height: 3px;
  border-radius: 3px;
  background: #fff;
  margin: 5px 0;
  transition: var(--transicion);
}

/* ============ HERO BANNER ============
   Solo el nombre sobre una imagen ligeramente oscurecida.
   No ocupa toda la pantalla: se ve que hay contenido debajo. */
.hero-banner {
  position: relative;
  /* se mete 3px por debajo de la nav: la nav no mide píxeles enteros y, al
     redondear, podía asomar una rayita del fondo entre las dos */
  margin-top: -3px;
  height: min(62vh, 560px);
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-fondo {
  position: absolute;
  inset: 0;
  /* La imagen va primero y el degradado queda debajo como respaldo:
     si el archivo aún no existe, se sigue viendo el degradado.
     El retrato es cuadrado y la banda apaisada, así que solo se ve una
     franja central: ajustar el segundo valor de background-position
     (50% = centro, menos = enseña más la parte de arriba). */
  background:
    url("../media/index-natalia.jpg") center 46% / cover no-repeat,
    linear-gradient(135deg, #f5c6da 0%, #b9a8e0 55%, #8d7cc2 100%);
}

/* capa oscura para que el nombre respire sobre la imagen */
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(43, 35, 64, 0.42), rgba(43, 35, 64, 0.55));
}

.hero-fondo-nota {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
}

.hero-nombre {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(2.8rem, 9vw, 5.8rem);
  text-align: center;
  padding: 0 1rem;
  text-shadow: 0 4px 30px rgba(43, 35, 64, 0.45);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
  border: 2px solid var(--rosa);
}

.boton-primario {
  background: var(--rosa);
  color: var(--blanco);
  box-shadow: var(--sombra);
}

.boton-primario:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
  background: var(--rosa-oscuro);
  border-color: var(--rosa-oscuro);
}

.boton-secundario {
  background: transparent;
  color: var(--rosa);
}

.boton-secundario:hover {
  background: var(--rosa-suave);
  transform: translateY(-3px);
}

/* ============ SECCIONES ============ */
.seccion { padding: 4.5rem 0; }

.seccion-titulo {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* estrella dibujada a mano junto a algunos títulos */
.estrella {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  transform: rotate(-8deg) translateY(-0.05em);
}

.seccion-sub {
  color: var(--tinta-suave);
  margin-bottom: 2.5rem;
}

/* textos corridos justificados; los largos, además, con guiones para que
   no se abran huecos entre palabras */
.seccion-sub,
.cabecera-pagina p,
.proyecto-descripcion,
.sobre-texto p,
.proyecto-info p,
.area-cuerpo p { text-align: justify; }

.proyecto-descripcion,
.sobre-texto p { hyphens: auto; }

/* ============ DEMO REEL ============ */
.reel-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background: linear-gradient(135deg, var(--tinta) 0%, #4a3a6b 60%, var(--rosa-oscuro) 130%);
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.reel-marco:not(.reproduciendo):hover { transform: scale(1.01); box-shadow: var(--sombra-hover); }

.reel-marco.reproduciendo { cursor: default; }

/* portada clicable del reel; al pulsarla, main.js la cambia por el vídeo */
.reel-portada {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.reel-marco video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.reel-candado {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--fuente-sub);
  font-size: 1rem;
}

.reel-marco iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.reel-play {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--rosa);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px rgba(250, 62, 119, 0.5);
  transition: transform var(--transicion);
}

.reel-portada:hover .reel-play { transform: scale(1.12); }

.reel-play svg { margin-left: 5px; }

/* ============ TARJETAS DE ÁREA (ilustradas, estilo Celia) ============ */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.area-tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
  display: flex;
  flex-direction: column;
}

.area-tarjeta:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: var(--sombra-hover); }

.area-tarjeta .ph { border-radius: 0; }

.area-cuerpo { padding: 1.2rem 1.5rem 1.3rem; }

.area-cuerpo h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }

.area-cuerpo p { color: var(--tinta-suave); font-size: 0.95rem; }

.area-cuerpo .enlace {
  display: inline-block;
  margin-top: 0.8rem;
  font-weight: 700;
  font-family: var(--fuente-cuerpo);
  color: var(--rosa);
}

/* ============ PLACEHOLDERS DE IMAGEN ============ */
/* Bloques degradados con etiqueta — se sustituirán por imágenes reales */
.ph {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--rosa-suave), var(--lila));
  color: var(--tinta);
}

.ph::after {
  content: attr(data-label);
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(43, 35, 64, 0.55);
  padding: 0 1rem;
  text-align: center;
}

.ph--cuadrado  { aspect-ratio: 1; }
.ph--retrato   { aspect-ratio: 3 / 4; }
.ph--ancho     { aspect-ratio: 16 / 9; }
.ph--alto      { aspect-ratio: 2 / 3; }

/* variantes de color para que la parrilla no sea monótona */
.ph--v1 { background: linear-gradient(135deg, #fdd9e4, #b9a8e0); }
.ph--v2 { background: linear-gradient(135deg, #ffe9f0, #fa9cbb); }
.ph--v3 { background: linear-gradient(135deg, #d9d4f5, #f7c8d8); }
.ph--v4 { background: linear-gradient(135deg, #f5c6da, #a99ad9); }
.ph--v5 { background: linear-gradient(135deg, #fce4ec, #c5b3ee); }

/* ============ PARRILLA DE PROYECTOS (miniaturas, Maca / Gema) ============ */
.parrilla-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
}

.proyecto-tarjeta {
  text-decoration: none;
  color: var(--tinta);
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.proyecto-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }

.proyecto-tarjeta .ph { border-radius: 0; }

.proyecto-info { padding: 1rem 1.3rem 1.1rem; }

/* en las tarjetas (de proyecto y de área) la imagen ocupa toda la tarjeta y
   el texto va encima, abajo, sobre un blanco algo translúcido para que la
   ilustración se intuya por debajo sin perder legibilidad */
.proyecto-tarjeta,
.area-tarjeta { position: relative; }

.proyecto-tarjeta .miniatura,
.proyecto-tarjeta .ph { aspect-ratio: 4 / 3; }

.area-tarjeta .miniatura { aspect-ratio: 1; }

.proyecto-info,
.area-cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.proyecto-info h3 { font-size: 1.15rem; }

.proyecto-info p {
  font-size: 0.88rem;
  color: var(--tinta-suave);
  margin-top: 0.2rem;
}

.etiqueta {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--fuente-cuerpo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rosa);
  background: var(--rosa-bruma);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.5rem;
}

.etiqueta--nda { color: var(--tinta-suave); background: #e3e1f2; }

/* tarjeta NDA: la imagen y una capa encima comparten celda. En la capa, el
   candado ocupa todo el hueco que deja libre el texto, así queda centrado en
   la parte visible de la imagen mida lo que mida el texto */
.proyecto-tarjeta.nda { display: grid; }

.proyecto-tarjeta.nda > * { grid-area: 1 / 1; }

.nda-capa {
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.nda-capa .proyecto-info { position: relative; }

.candado {
  flex: 1;
  display: grid;
  place-items: center;
  background: rgba(43, 35, 64, 0.3);
  color: var(--blanco);
  text-shadow: 0 1px 8px rgba(43, 35, 64, 0.5);
}

/* ============ MOSAICO DE ILUSTRACIÓN (estilo Gema Vadillo) ============ */
/* casi a todo el ancho para que en pantalla grande las imágenes luzcan */
.contenedor--mosaico { width: min(1500px, 95%); }

/* ilustraciones pegadas con una línea fina, por filas. Cada una crece en
   proporción a su --r (ancho/alto), así todas las de una fila tienen la
   misma altura y se ven enteras */
.mosaico {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mosaico-fila {
  display: flex;
  gap: 4px;
}

.tesela {
  flex: var(--r, 1) 1 0;
  min-width: 0;
  aspect-ratio: var(--r, 1);
  height: auto;
  object-fit: cover;
  cursor: zoom-in;
  transition: filter var(--transicion);
}

.tesela:hover { filter: brightness(1.08) saturate(1.08); }

/* ============ PARRILLA COMPACTA con zoom (Maca) ============ */
.parrilla-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}

/* sin subtítulo, la parrilla se separa un poco del título */
.seccion-titulo + .parrilla-mini { margin-top: 1.6rem; }

.parrilla-mini .ph {
  aspect-ratio: 1;
  cursor: zoom-in;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.parrilla-mini .ph:hover { transform: scale(1.04); box-shadow: var(--sombra-hover); }

.parrilla-mini .ph::after { font-size: 1.05rem; }

/* ============ MEDIA REAL (imágenes y vídeos) ============ */

/* miniatura de tarjeta: recorta a 16:9 para que la parrilla quede pareja */
.miniatura {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* portada de proyecto: se ve entera, sea apaisada o vertical */
.portada-proyecto {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: zoom-in;
}

/* vídeo incrustado de un proyecto */
.video-proyecto {
  width: 100%;
  display: block;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: #000;
}

/* miniaturas cuadradas de la parrilla "Más imágenes" */
.mini {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra);
  cursor: zoom-in;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.mini:hover { transform: scale(1.04); box-shadow: var(--sombra-hover); }

img.mini { object-fit: cover; }

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

/* distintivo de play sobre las miniaturas que son vídeo */
.mini-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mini-play span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(250, 62, 119, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.mini-play span::after {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

/* la miniatura del reel lleva la portada del vídeo de fondo */
.reel-marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-play { position: relative; z-index: 1; }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(43, 35, 64, 0.82);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 4vmin;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.abierta { opacity: 1; pointer-events: auto; }

.lightbox-figura {
  width: min(1200px, 100%);
  max-height: 88vh;
  cursor: default;
  transform: scale(0.94);
  transition: transform 0.25s ease;
}

.lightbox.abierta .lightbox-figura { transform: scale(1); }

.lightbox-figura .ph { box-shadow: 0 30px 80px rgba(0,0,0,0.4); max-height: 80vh; }

/* la imagen o el vídeo ampliados siempre caben enteros en pantalla */
.lightbox-figura img,
.lightbox-figura video {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radio);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  background: #000;
}

.lightbox-pie {
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.95rem;
}

.lightbox-cerrar {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
}

/* flechas para pasar entre imágenes del mismo bloque */
.lightbox-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--rosa);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-bottom: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background var(--transicion);
}

.lightbox-flecha:hover { background: var(--rosa-oscuro); }

.lightbox-flecha--izq { left: 1.2rem; }
.lightbox-flecha--der { right: 1.2rem; }

/* ============ SOBRE MÍ ============ */
.sobre-mi {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: center;
}

.sobre-foto { position: relative; }

.sobre-foto .ph { aspect-ratio: 3 / 4; border-radius: var(--radio); box-shadow: var(--sombra); }

.sobre-texto h2 { margin-bottom: 1rem; }

.sobre-texto p { margin-bottom: 1rem; color: var(--tinta-suave); }

.sobre-texto p strong { color: var(--tinta); }

/* ============ CONTACTO / FOOTER (estilo Kaos: centrado y limpio) ============ */
.contacto {
  text-align: center;
  padding: 5rem 0 3rem;
}

.contacto h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

.contacto .correo {
  display: inline-block;
  margin: 1.2rem 0 2rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 3px solid var(--rosa);
  transition: color var(--transicion);
}

.contacto .correo:hover { color: var(--rosa); }

.redes {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  list-style: none;
}

.redes a {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}

.redes a:hover {
  transform: translateY(-5px);
  background: var(--rosa);
  color: var(--blanco);
}

.footer-final {
  text-align: center;
  padding: 2rem 0 2.5rem;
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

/* ============ CABECERA DE PÁGINA INTERIOR ============ */
.cabecera-pagina {
  padding: 4rem 0 1rem;
  text-align: center;
}

.cabecera-pagina h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

.cabecera-pagina p {
  color: var(--tinta-suave);
  max-width: 920px;
  margin: 0.8rem auto 0;
  text-align-last: center;
}

/* ============ PÁGINA DE PROYECTO ============ */
.proyecto-hero { padding: 3.5rem 0 0; }

.proyecto-hero .ph { box-shadow: var(--sombra); }

/* los cuatro apartados en una fila; si un texto no cabe, salta de línea
   dentro de su columna en vez de mandar el apartado abajo */
.proyecto-meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 1.5rem 2.5rem;
  margin: 2rem 0;
}

.proyecto-meta div h4 {
  font-family: var(--fuente-sub);
  font-weight: 400;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rosa);
  margin-bottom: 0.2rem;
}

.proyecto-descripcion {
  color: var(--tinta-suave);
  margin-bottom: 2.5rem;
}

/* enlace de "volver" con tipografía de cuerpo */
.enlace-volver {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--rosa);
  text-decoration: none;
}

.enlace-volver:hover { text-decoration: underline; }

/* navegación entre proyectos (evitar el problema de Erica) */
.proyecto-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(43,35,64,0.1);
  margin-top: 3rem;
}

.proyecto-nav .boton {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  letter-spacing: 0;
}

/* ============ PUERTA NDA (integrada en la página, sin recuadro) ============ */
.nda-puerta {
  max-width: 460px;
  margin: 3rem auto;
  padding: 1rem 0;
  text-align: center;
}

.nda-puerta .nda-icono {
  width: 74px; height: 74px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--rosa-bruma);
  display: grid;
  place-items: center;
  color: var(--rosa);
}

.nda-puerta h2,
.nda-puerta h3 {
  font-family: var(--fuente-sub);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.nda-puerta p { color: var(--tinta-suave); font-size: 0.95rem; margin-bottom: 1.5rem; }

.nda-formulario { display: flex; gap: 0.6rem; }

.nda-formulario input {
  flex: 1;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  border: 2px solid rgba(43,35,64,0.15);
  font-size: 1rem;
  font-family: inherit;
  background: var(--blanco);
  color: var(--tinta);
  min-width: 0;
}

.nda-formulario input:focus {
  outline: none;
  border-color: var(--rosa);
}

.nda-formulario button {
  cursor: pointer;
  border: none;
}

.nda-error {
  color: var(--rosa-oscuro);
  font-size: 0.88rem;
  margin-top: 0.9rem;
  min-height: 1.2em;
  font-weight: 600;
}

.nda-contenido { display: none; }

.nda-contenido.desbloqueado { display: block; }

.nda-desbloqueado-aviso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  margin-bottom: 2rem;
}

/* ============ ANIMACIONES DE ENTRADA ============ */
/* solo se ocultan si hay JS activo (clase .js en <html>) — sin JS todo es visible */
html.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .revelar.visible { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .sobre-mi { grid-template-columns: 1fr; gap: 2rem; }
  .sobre-foto { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .nav-burger { display: block; }

  .nav-derecha { gap: 0.9rem; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--rosa);
    box-shadow: 0 10px 22px rgba(250, 62, 119, 0.3);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .nav-links.abierto { max-height: 400px; }

  .nav-links li { width: 100%; text-align: center; }

  .nav-links a { display: block; padding: 1rem 0; }

  .nav-links a::after { display: none; }

  .hero-banner { height: min(48vh, 420px); }

  /* en móvil se ve la ilustración entera, así que el nombre baja abajo
     del todo para no pisar la cara y ensancha para no cortarse */
  .hero-nombre {
    max-width: 92%;
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    align-self: end;
    padding-bottom: 1.4rem;
  }

  .seccion { padding: 3rem 0; }

  /* en móvil los apartados del proyecto van de dos en dos */
  .proyecto-meta {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }

  /* en móvil el mosaico va de una en una, a todo el ancho */
  .mosaico, .mosaico-fila { gap: 3px; }
  .mosaico-fila { flex-direction: column; }
  .tesela { flex: none; width: 100%; }

  .parrilla-mini { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .lightbox-flecha { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-flecha--izq { left: 0.5rem; }
  .lightbox-flecha--der { right: 0.5rem; }

  .proyecto-nav { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}