/* =========================================================
   VARIABLES DE COLOR Y TIPOGRAFÍA
   Cambia estos valores y toda la web se actualiza sola.

   v8: nueva dirección de diseño, inspirada en el segundo moodboard
   de Laura (tipografía manuscrita/serif con carácter, fondo cálido
   tipo "blush", una paleta más "noche" en algunas zonas con estrellas,
   y stickers ilustrados que se pueden arrastrar). Se mantienen los
   colores "pop" de sus ilustraciones (azul, rosa, amarillo, rojo) como
   colores de acento/stickers, y se añade un tono granate como color
   principal de marca — ya no usamos negro puro en ningún sitio.
   ========================================================= */
:root {
  /* v12: fondo casi blanco, el color exacto que nos pasaste (#FAFAFA)
     en vez del crema "blush" que se veía oscuro en Windows. */
  --color-bg: #fafafa;       /* fondo principal, casi blanco */
  --color-bg-soft: #f1efec;  /* variante ligeramente más oscura, para separar secciones */
  --color-dark: #2b1710;     /* marrón espresso — sustituye al negro de antes */
  --color-ink: #33201a;      /* texto normal: marrón oscuro cálido, no negro puro */
  --color-maroon: #8a2c3d;   /* granate — color de marca principal (eyebrow, CTAs, acentos) */
  --color-cream: #f7ecd9;    /* crema claro, para texto/estrellas sobre fondo oscuro */

  /* Colores "pop" de sus ilustraciones — ahora se usan sobre todo
     en los stickers y detalles decorativos */
  --color-blue: #3b6fd6;
  --color-pink: #ec6fae;
  --color-yellow: #f5d033;
  --color-red: #ef5b45;

  /* Inter, peso 500 como base del texto (antes 400 por defecto).
     Nota: el "serif" que se ve en el inspector de fuentes (Family:
     "Inter, serif") es solo la tipografía de reserva que usa el
     navegador SI Inter no llegara a cargar — casi nunca se ve, porque
     Inter carga bien. Aquí usamos una reserva que si acaso se usara
     se pareciera más a Inter (sans-serif), no una serif de verdad,
     que se notaría muchísimo más si Inter tardara en cargar. */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container-width: 1100px;
  --radius: 20px;
}

/* =========================================================
   RESET BÁSICO
   ========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* padding: 0 porque el navegador le pone un relleno por defecto a los
   <button> (normalmente 1px 6px) — sin este reset, ese relleno dejaba
   un fino margen visible alrededor de las ilustraciones de la galería
   (que son <button>), como si la imagen no llenara su hueco entero. */
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   ANIMACIÓN DE APARICIÓN AL HACER SCROLL
   El JS añade la clase "visible" cuando el elemento entra en pantalla.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HEADER
   Como tu web original: menú de texto centrado arriba (siempre
   visible, sin icono de hamburguesa) y tu logo grande centrado
   debajo. Sin línea/borde debajo tampoco, para que quede igual de
   limpio que tu web real. No es "sticky" (no se queda pegado al
   hacer scroll) — con el logo tan grande, quedarse pegado ocupaba
   demasiado espacio en pantalla.
   ========================================================= */
.site-header {
  background: var(--color-bg);
  padding: 20px 0 28px;
  text-align: center;
}
.header-top {
  display: flex;
  justify-content: center;
}
/* En pantallas estrechas el menú simplemente pasa a la siguiente
   línea (flex-wrap) en vez de esconderse detrás de un icono. */
.main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.main-nav a {
  font-weight: 600;
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%;
  height: 3px;
  background: var(--color-pink);
  transition: width 0.25s ease;
}
.main-nav a:hover::after { width: 100%; }

/* Tu logo real (el de los doodles), grande y centrado — el protagonista
   del header, como en tu web original. */
.logo {
  display: inline-block;
  margin-top: 14px;
}
.logo-image {
  /* Más grande, como en tu web real — antes se quedaba corto (tope de
     600px) comparado con lo ancho que se ve en tu sitio. */
  width: min(880px, 92%);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Etiqueta pequeña: mayúsculas, en negrita, con espaciado entre
   letras — el mismo recurso tipográfico en toda la web (sin
   tipografía manuscrita, solo Inter en distintos pesos). */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--color-maroon);
  margin: 0 0 14px;
}
.btn {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 6;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--color-maroon); color: var(--color-cream); }
.btn-dark { background: var(--color-dark); color: var(--color-bg); }

/* =========================================================
   MARQUEE (cinta de texto en bucle infinito)
   Más estrecha que antes: menos padding y letra más pequeña. El hero
   (texto de presentación, botón "Ver trabajos" y stickers) se quitó
   por completo, así que el marquee conecta directo con la Galería.
   ========================================================= */
.marquee {
  background: var(--color-dark);
  color: var(--color-bg);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 24px;
  /* El texto ahora está repetido 6 veces en vez de 2 (ver comentario en
     el HTML), así que el -50% recorre el triple de distancia que antes
     — se triplica también la duración (22s → 66s) para que la
     velocidad visual sea la misma que antes, no el triple de rápida. */
  animation: scroll-left 66s linear infinite;
}
.marquee-track span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% porque el contenido está duplicado */
}

/* =========================================================
   SECCIONES GENERALES
   ========================================================= */
.section { padding: 56px 24px 90px; }
/* Prácticamente sin espacio justo después del marquee — la Galería
   va pegada a él, sin el hueco que antes dejaba el hero. */
#galeria { padding-top: 16px; }
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: 12px;
}
/* Quitada la rayita rosa que iba debajo del título (la Galería ya no
   la tenía desde hace unas rondas; ahora tampoco "Sobre mí"). */
.section-sub {
  font-size: 1.05rem;
  max-width: 560px;
  opacity: 0.75;
  margin-bottom: 40px;
}

/* =========================================================
   GALERÍA (masonry con CSS Columns)
   Cada imagen se ve entera, con su alto natural — sin recortes.
   ========================================================= */
.gallery {
  column-width: 260px; /* ancho ideal de columna; el navegador decide cuántas caben */
  column-gap: 20px;
}
/* En móvil, "column-width: 260px" solo deja sitio para 1 columna —
   forzamos 2 columnas fijas para que se vea más de una imagen por fila. */
@media (max-width: 640px) {
  .gallery { column-width: auto; column-count: 2; column-gap: 12px; }
  .gallery-item { margin: 0 0 12px; }
}
.gallery-item {
  display: block;
  width: 100%;
  break-inside: avoid; /* evita que una imagen quede partida entre dos columnas */
  margin: 0 0 20px;
  border-radius: var(--radius);
  overflow: hidden; /* para que la imagen no se salga de las esquinas redondeadas */
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

/* Los huecos de color de ejemplo (placeholder) siguen centrando su texto */
.gallery-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 160px;
  font-family: var(--font-display);
  color: var(--color-cream);
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.gallery-item img {
  width: 100%;
  height: auto; /* la imagen conserva su proporción real, sin recortes */
  display: block;
}

/* Efecto hover: se agranda un poco y proyecta una sombra cálida (con
   el granate de marca en vez de negro plano). Antes llevaba también
   una pequeña rotación, pero combinada con las esquinas redondeadas
   dejaba ver una fina línea en el borde donde la imagen no parecía
   llenar el hueco entero — al quitar la rotación desaparece. */
button.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 30px rgba(138, 44, 61, 0.28);
}

.color-blue   { background: var(--color-blue); }
.color-pink   { background: var(--color-pink); }
.color-yellow { background: var(--color-yellow); color: var(--color-dark); text-shadow: none; }
.color-red    { background: var(--color-red); }

/* =========================================================
   SOBRE MÍ
   Fondo ligeramente más oscuro que el resto (--color-bg-soft) para
   que se note el cambio de sección al bajar desde la Galería.
   ========================================================= */
.about-section {
  background: var(--color-bg-soft);
}
.about {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}
/* La foto va en un lateral, en formato retrato (no cuadrada), ahora con
   las esquinas redondeadas (mismo --radius que el resto de la web).
   Se queda fija (sticky) mientras se lee el texto de al lado. */
.about-media {
  position: sticky;
  top: 110px;
}
.about-media .gallery-item {
  width: 260px;
  height: 325px; /* proporción 4:5, como una foto de retrato normal */
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.about-media .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-text p { font-size: 1.05rem; max-width: 560px; }

/* Misma etiqueta pequeña que el eyebrow del hero y de la Galería —
   mayúsculas, Inter en negrita. */
.about-subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--color-maroon);
  margin: 32px 0 10px;
}

.education-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}
.education-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(51, 32, 26, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.education-list li:last-child { border-bottom: 1px solid rgba(51, 32, 26, 0.15); }
.education-list strong { font-weight: 700; font-size: 0.98rem; }
.education-list span { font-size: 0.92rem; opacity: 0.7; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .about-media { position: static; justify-self: center; }
  .about-media .gallery-item { width: 200px; height: 250px; }
}

/* =========================================================
   CONTACTO
   Sección "noche": fondo espresso oscuro, titular manuscrito en rosa
   y estrellitas repartidas que titilan — el mismo lenguaje visual
   de la referencia "Pink Champagne" del moodboard.
   ========================================================= */
.contact {
  position: relative;
  background: var(--color-dark);
  color: var(--color-cream);
  text-align: center;
  overflow: hidden;
}
.contact .container { position: relative; z-index: 2; }
/* Titular grande: en negrita, como el resto de titulares de la web
   (ya no usamos ninguna tipografía manuscrita). */
.contact-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: -0.01em;
  color: var(--color-pink);
  line-height: 1.1;
}
.contact .section-sub {
  opacity: 0.85;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-cream);
}
.contact .btn-primary { background: var(--color-pink); color: var(--color-dark); }
.socials {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  justify-content: center;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.socials a { border-bottom: 2px solid transparent; }
.socials a:hover { border-color: var(--color-pink); }

/* Estrellitas decorativas: SVG repetido con distinta posición, tamaño,
   rotación (--r) y retraso de animación — la rotación varía de una a
   otra para que no se vean todas "rectas" y alineadas igual. */
.contact-star {
  position: absolute;
  color: var(--color-cream);
  opacity: 0.6;
  transform: rotate(var(--r, 0deg));
  animation: twinkle 2.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  z-index: 1;
}
.contact-star svg { width: 100%; height: 100%; display: block; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: rotate(var(--r, 0deg)) scale(0.85); }
  50%      { opacity: 0.9;  transform: rotate(var(--r, 0deg)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-star { animation: none; opacity: 0.5; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding: 28px 0;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* =========================================================
   LIGHTBOX (ventana emergente al hacer click en una ilustración)
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(43, 23, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 1000;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-content {
  width: min(80vw, 640px);
  height: min(70vh, 640px);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  padding: 20px;
}

/* Cuando el lightbox muestra una ilustración real en vez de un
   bloque de color: la imagen se ve entera (sin recortar) y el
   título queda debajo, a modo de pie de foto. */
.lightbox-content.has-image {
  flex-direction: column;
  gap: 14px;
  width: min(90vw, 760px);
  height: auto;
  max-height: 85vh;
  background: transparent;
}
.lightbox-content.has-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  border-radius: var(--radius);
  object-fit: contain;
}
.lightbox-caption {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-cream);
}

.lightbox-close, .lightbox-nav {
  position: absolute;
  color: var(--color-cream);
  font-size: 2rem;
  padding: 10px 16px;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { color: var(--color-pink); }

/* El menú ya no tiene versión "hamburguesa" — en pantallas estrechas
   simplemente pasa a la siguiente línea (ver .main-nav más arriba),
   así que no hace falta ningún bloque responsive aparte para él. */