/* =========================================================
   Daniela León · Portfolio  (versión 2)
   Concepto: el inicio es una pantalla de cine. El videoclip ocupa
   todo el ancho y el nombre aparece encima como un rótulo de créditos.
   Debajo, una página tranquila de texto alineado a la izquierda.
   ========================================================= */

/* ---------- 1. Tokens (tema claro, principal) ---------- */
:root {
  /* Color: blanco roto frío, tinta verdinegra y un verde petróleo
     sacado de los pilares del aparcamiento de OUTLANDish. */
  --papel: #EFEFEC;
  --superficie: #E3E4E0;
  --tinta: #121413;
  --gris: #59605C;
  --linea: #CDD0CB;
  --acento: #1E5650;
  --acento-tinta: #F1F5F3;
  --sobre-video: #FFFFFF;

  /* Tipografía: una sola familia, Archivo, con eje de anchura.
     - Expandida (125%) y negra para el nombre y los títulos:
       recuerda a los rótulos de crédito de cine y videoclip.
     - Anchura normal para lectura, datos y navegación.
     Una superfamilia mantiene la unidad; el contraste lo dan la
     anchura y el peso, no un cambio de estilo. */
  --f-base: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ancho-display: 125%;
  --ancho-texto: 100%;

  /* Escala: tercera mayor (1.25) sobre 17px, más contenida que la anterior */
  --t-pequeno: 0.8125rem;  /* 13px */
  --t-base: 1.0625rem;     /* 17px */
  --t-medio: 1.3125rem;    /* 21px */
  --t-grande: 1.65rem;     /* 26px */
  --t-titulo: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --t-nombre: clamp(3.25rem, 0.8rem + 11vw, 10.5rem);

  /* Espaciado y medidas */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-6: clamp(5rem, 3rem + 7vw, 9rem);
  --margen: clamp(16px, 4vw, 48px);
  --ancho-max: 1320px;
  --medida: 36em;
  --radio: 0;

  --transicion: 180ms ease;
  color-scheme: light;
}

/* ---------- 2. Tema oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0F1211;
    --superficie: #191D1B;
    --tinta: #E6E9E6;
    --gris: #9AA19D;
    --linea: #2A302D;
    --acento: #2B6A62;
    --acento-tinta: #E8F2EF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0F1211;
  --superficie: #191D1B;
  --tinta: #E6E9E6;
  --gris: #9AA19D;
  --linea: #2A302D;
  --acento: #2B6A62;
  --acento-tinta: #E8F2EF;
  color-scheme: dark;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-base);
  font-stretch: var(--ancho-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--papel);
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-base);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
cite { font-style: italic; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  padding: var(--esp-1) var(--esp-2);
  background: var(--tinta);
  color: var(--papel);
  z-index: 50;
}
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-left: max(var(--margen), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margen), env(safe-area-inset-right, 0px));
}

/* ---------- 4. Cabecera ---------- */
.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.cabecera.con-borde { border-bottom-color: var(--linea); }

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 3.75rem;
}

.marca {
  font-weight: 800;
  font-stretch: var(--ancho-display);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-right: auto;
}
.marca__corta { display: none; }

.nav { display: flex; gap: clamp(0.9rem, 2.5vw, 2rem); }
.nav a {
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gris);
  transition: color var(--transicion);
}
.nav a:hover { color: var(--tinta); }

.tema {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--transicion);
}
.tema:hover { border-color: var(--tinta); }
.tema__sol { display: none; }
[data-theme-actual="dark"] .tema__luna { display: none; }
[data-theme-actual="dark"] .tema__sol { display: block; }

/* ---------- 5. Inicio: pantalla de cine ---------- */
.hero__pantalla {
  position: relative;
  margin: 0;
  background: #000;
  overflow: hidden;
}
.hero__video {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 82svh;
  object-fit: cover;
}
/* Degradado inferior para que el rótulo se lea sobre cualquier plano */
.hero__pantalla::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
  pointer-events: none;
}

.hero__rotulo {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--esp-2);
  color: var(--sobre-video);
}
.hero__nombre {
  font-size: var(--t-nombre);
  font-weight: 900;
  font-stretch: var(--ancho-display);
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.hero__rotulo figcaption {
  font-size: var(--t-pequeno);
  color: var(--sobre-video);
  opacity: 0.85;
}

.hero__rejilla {
  display: grid;
  padding-top: var(--esp-4);
}
.hero__intro {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
  max-width: 34em;
}
.hero__intro p {
  font-size: var(--t-medio);
  line-height: 1.45;
  font-weight: 300;
}

figcaption {
  margin-top: var(--esp-1);
  font-size: var(--t-pequeno);
  color: var(--gris);
}

.media-video {
  width: 100%;
  object-fit: cover;
  background: var(--superficie);
}

/* Botón principal: rectángulo sobrio que se rellena de acento */
.boton {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.95rem 1.4rem;
  border: 1px solid var(--tinta);
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}

/* ---------- 6. Secciones ---------- */
.seccion { padding-top: var(--esp-6); }

.seccion__titulo {
  font-size: var(--t-titulo);
  font-weight: 800;
  font-stretch: var(--ancho-display);
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-4);
}

.subtitulo {
  font-size: var(--t-grande);
  font-weight: 700;
  font-stretch: var(--ancho-display);
  letter-spacing: -0.01em;
  margin-top: var(--esp-5);
  margin-bottom: var(--esp-3);
}

.etiqueta {
  display: inline-block;
  font-weight: 600;
  font-size: var(--t-pequeno);
  line-height: 1;
  padding: 0.4rem 0.55rem;
  background: var(--acento);
  color: var(--acento-tinta);
}

/* ---------- 7. Sobre mí ---------- */
.sobre { display: grid; gap: var(--esp-4); }
.sobre__retrato { margin: 0; }
.sobre__retrato img { width: 100%; filter: grayscale(1); }

.sobre__texto {
  display: grid;
  gap: var(--esp-2);
  max-width: var(--medida);
  min-width: 0;
}
.entrada { font-size: var(--t-medio); line-height: 1.45; font-weight: 500; }
.sobre__texto p:not(.entrada) { color: var(--gris); }

.datos {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-2) 0 0;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linea);
}
.datos div { display: grid; gap: 0.15rem; }
.datos dt,
.proyecto__datos dt,
.contacto__tipo,
.rodaje__titulo {
  font-weight: 500;
  font-size: var(--t-pequeno);
  color: var(--gris);
}
.datos dd { margin: 0; }

.servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 var(--esp-4);
}
.servicios li {
  display: grid;
  gap: var(--esp-1);
  padding-block: var(--esp-3);
  border-top: 1px solid var(--linea);
}
.servicios h4 { font-size: var(--t-medio); font-weight: 700; letter-spacing: -0.01em; }
.servicios p { color: var(--gris); max-width: 32em; }

/* ---------- 8. Proyectos audiovisuales ---------- */
.proyecto {
  display: grid;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--linea);
}
.proyecto:first-of-type { border-top: 0; padding-top: 0; }

.proyecto__media { min-width: 0; }
.proyecto__media .media-video { aspect-ratio: 16 / 9; }

.proyecto__info {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  justify-items: start;
  min-width: 0;
}
.proyecto__titulo {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: var(--ancho-display);
  letter-spacing: -0.015em;
  margin-top: var(--esp-1);
}
.proyecto__artista { font-style: italic; margin-top: -0.6rem; }
.proyecto__datos { margin: 0; }
.proyecto__datos dd { margin: 0; font-weight: 500; }
.proyecto__info > p:not(.proyecto__artista) { color: var(--gris); font-size: 0.97rem; }

.enlace {
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  transition: text-underline-offset var(--transicion), color var(--transicion);
}
.enlace:hover { color: var(--acento); text-underline-offset: 0.5em; }

.hueco {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px dashed var(--linea);
  background: var(--superficie);
}
.hueco span {
  font-weight: 700;
  font-stretch: var(--ancho-display);
  font-size: var(--t-medio);
  color: var(--gris);
}

.rodaje { min-width: 0; }
.rodaje__titulo { margin-bottom: var(--esp-1); }
.rodaje__fila {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--esp-1);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rodaje__fila li { flex: 0 0 auto; scroll-snap-align: start; }
.rodaje__fila img { height: clamp(140px, 22vw, 220px); width: auto; }

/* ---------- 9. Fotografía ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-3);
}
/* Filtros como texto: el activo se marca con un subrayado de acento */
.filtro {
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}
.filtro:hover { color: var(--tinta); }
.filtro[aria-pressed="true"] {
  color: var(--tinta);
  border-bottom-color: var(--acento);
}

.galeria { columns: 2; column-gap: 4px; }
.galeria figure {
  margin: 0 0 4px;
  break-inside: avoid;
  background: var(--superficie);
}
.galeria img { width: 100%; }

/* ---------- 10. Contacto ---------- */
.contacto__texto {
  font-size: var(--t-medio);
  font-weight: 300;
  line-height: 1.45;
  max-width: var(--medida);
  margin-bottom: var(--esp-4);
}
.contacto__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.contacto__lista li { display: grid; gap: 0.25rem; min-width: 0; }
.contacto__dato {
  font-weight: 700;
  font-stretch: var(--ancho-display);
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  justify-self: start;
  background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0 2px no-repeat;
  transition: background-size 260ms ease;
}
.contacto__dato:hover { background-size: 100% 2px; }

/* Botón de WhatsApp: mismo botón rectangular del sitio, con icono */
.boton--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--esp-4);
}
.boton--whatsapp svg { flex: none; }

@media (min-width: 600px) {
  .contacto__lista { grid-template-columns: repeat(2, max-content); column-gap: var(--esp-5); }
}

/* ---------- 11. Pie ---------- */
.pie { margin-top: var(--esp-6); border-top: 1px solid var(--linea); }
.pie__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  padding-block: var(--esp-3);
  font-size: var(--t-pequeno);
  color: var(--gris);
}

/* ---------- 12. Responsive (mobile first) ---------- */
@media (max-width: 479px) {
  .marca__completa { display: none; }
  .marca__corta { display: inline; }
  .cabecera__fila { gap: var(--esp-2); }
  .nav { gap: 0.85rem; }
}

@media (min-width: 600px) {
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .galeria { columns: 3; }
}

@media (min-width: 768px) {
  .hero__video { aspect-ratio: 16 / 9; }
}

@media (min-width: 900px) {
  .hero__rotulo {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .hero__rotulo figcaption { text-align: right; padding-bottom: 0.4rem; }

  .sobre { grid-template-columns: 5fr 7fr; align-items: start; }

  .proyecto {
    grid-template-columns: 8fr 4fr;
    column-gap: var(--esp-4);
  }
  .rodaje { grid-column: 1 / -1; }

  .galeria { columns: 4; }
}

/* ---------- 13. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}