/* ============================================================
   Sistema áureo (φ = 1.618) — todo sale de una sola cadena
   Tipografía: 14px (base) → 18px (14 × √φ) títulos
   Espaciado:  7 → 11 → 18 → 29 → 47 → 76  (cada paso × φ)
   Compartido por todas las páginas del sitio
   ============================================================ */
:root {
  --rojo: #FF0033;
  --negro: #000000;
  --fs-body: 14px;
  --fs-label: 14px;
  --fs-title: 18px;
  --sp-0: 7px;
  --sp-1: 11px;
  --sp-2: 18px;
  --sp-3: 29px;
  --sp-4: 47px;
  --sp-5: 76px;
  --margen: var(--sp-1);   /* margencito uniforme contra el borde */
  --tracking: -0.08em; /* -95 de Photoshop, suavizado en cuerpos chicos */
  --tracking-display: -0.092em;
}

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

html { background: #ffffff; scroll-behavior: smooth; }

/* Sin barra de scroll visible (se sigue pudiendo scrollear normal) */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge viejo */
}

html::-webkit-scrollbar { display: none; } /* Chrome / Safari */

body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 475;
  color: var(--negro);
  letter-spacing: var(--tracking);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

/* En móvil la columna llena toda la pantalla, solo con el margencito */
.pagina {
  margin: 0 auto;
  padding: 0 var(--margen);
}

a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--sp-2) 0;
}

header .logo img {
  display: block;
  height: 18px;
  width: auto;
}

nav {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

/* ---------- Acerca / Redes / Contacto (home) ---------- */
.info {
  display: grid;
  /* Acerca y Contacto más anchos, Redes al centro un poco más apretado (φ : 1 : φ) */
  grid-template-columns: 1.618fr 1fr 1.618fr;
  gap: var(--sp-2);
  padding: var(--sp-4) 0 var(--sp-2);
}

/* Redes corrido a la derecha de su columna, pegado hacia Contacto */
.info > div:nth-child(2) { justify-self: end; }

.info h3 {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--sp-0);
}

.cuadro {
  width: 7px;
  height: 7px;
  background: var(--rojo);
  margin-bottom: var(--sp-0);
}

.info p {
  text-align: left;
  hyphens: none;
}

.info ul { list-style: none; }

.info ul li { margin-bottom: var(--sp-0); }

.info ul a { text-decoration: underline; }

/* Links dentro de los párrafos de info: subrayados y en el rojo de la marca */
.info p a {
  color: var(--rojo);
  text-decoration: underline;
}

/* ---------- Bloques rojos (placeholders de proyectos) ---------- */
.bloque {
  width: 100%;
  background: var(--rojo);
}

/* Formato de post vertical de Instagram (4:5) */
.proyecto .bloque { aspect-ratio: 4 / 5; }

/* Marco horizontal (16:9) para proyectos de video widescreen */
.proyecto .bloque.horizontal { aspect-ratio: 16 / 9; }

/* Fotos y videos reales: mismo marco 4:5, recortan para llenar.
   Sin el fondo rojo: evita la línea que se asoma en el borde del video */
img.bloque, video.bloque {
  display: block;
  object-fit: cover;
  background: transparent;
}

/* Encuadres de las fotos de EME (50% es centrado; más % sube el contenido) */
img[src='eme2.jpg'] { object-position: 50% 57%; }
video[src='eme4.mp4'] { object-position: 50% 42%; }
img[src='eme6.jpg'] { object-position: 50% 42%; }

/* Ajustes solo para el reel de Bount */
video.reel {
  transform: scale(0.99);
  /* Reel 9:16 en marco 4:5: el encuadre corrido un poco hacia arriba */
  object-position: 50% 65%;
}

/* Carrusel: los medios comparten el mismo marco, click para pasar al siguiente */
.media {
  display: grid;
  /* Cursor flecha de macOS pero apuntando a la derecha, blanca con
     contorno negro, para indicar que el click avanza al siguiente */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M4.65 2.9 L12.57 7.22 Q14 8 12.57 8.78 L4.65 13.1 Q3 14 3 12.2 L3 3.8 Q3 2 4.65 2.9 Z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/></svg>") 10 6, e-resize;
}

.media > *:not(.puntos) {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.media > .activo { opacity: 1; }

/* Circulitos tipo carrusel de IG, integrados abajo dentro del marco */
.media { position: relative; }

.puntos {
  position: absolute;
  bottom: var(--sp-1);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}

.puntos span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  /* Sombrita para que se lean también sobre fotos claras */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

.puntos span.activo { background: var(--rojo); }

/* ---------- Proyectos ---------- */
/* Separador pegado al título: la línea abre cada proyecto */
.proyecto {
  margin-top: var(--sp-4);
  border-top: 2px solid var(--negro);
  padding-top: 4px; /* 7 ÷ φ */
}

/* El primer proyecto más pegado a la sección de info */
.info + .proyecto { margin-top: var(--sp-0); }

.proyecto .titulos {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.proyecto h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.proyecto .meta {
  margin-top: var(--sp-2);
  font-weight: 700;
}

.proyecto .anio {
  margin-bottom: var(--sp-2);
  font-weight: 700;
}

.proyecto .descripcion {
  text-align: justify;
  hyphens: auto;
}

/* Espacio entre párrafos de una misma descripción */
.descripcion + .descripcion { margin-top: var(--sp-2); }

/* ---------- Footer ---------- */
footer {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5);
  text-align: center;
}

/* Flechita hasta abajo del todo, respetando el margencito del borde */
footer .subir {
  position: absolute;
  bottom: var(--margen);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0;
}

footer .estampilla {
  width: 47%;
  max-width: 210px;
  height: auto;
  display: block;
  margin: 0 auto var(--sp-3);
}

/* ---------- Animación de entrada: slide up + opacidad sutil ----------
   La clase .anim la pone el script (si no hay JS, todo se ve normal) */
.anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.anim.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .anim { transition: none; opacity: 1; transform: none; }
}

/* En desktop: layout de borde a borde, todo escalado un 15% arriba
   (zoom escala fuentes, espaciados e imágenes en proporción exacta).
   Header, separadores y filas de título abarcan todo el ancho;
   imágenes y textos quedan alineados a la izquierda con su mismo tamaño.
   Al final de la hoja para ganarle a las reglas base. */
@media (min-width: 600px) {
  body { zoom: 1.15; }


  .pagina { max-width: none; }

  /* La sección de Acerca/Redes/Contacto conserva su ancho de columna */
  .info { max-width: 418px; }

  /* Las imágenes conservan su ancho exacto de antes y se pegan a la izquierda */
  .bloque { width: 418px; max-width: 100%; }

  /* El carrusel solo ocupa el cuadrito: el hover/click no se extiende a la derecha */
  .media { width: 418px; max-width: 100%; }

  .proyecto .descripcion { max-width: 418px; }

  /* Caballo y copyright centrados respecto a la columna de 418px;
     la flechita sigue centrada a toda la página */
  footer { text-align: left; }

  footer .estampilla {
    width: 210px;
    margin: 0 0 var(--sp-3) calc((418px - 210px) / 2);
  }

  footer > div {
    max-width: 418px;
    text-align: center;
  }
}