/* =========================================================
   JOAQUÍN UNATES — index.html
   Sistema de diseño
   Color:
     --bg          #F4F5F0  fondo general
     --text        #333B38  texto principal
     --accent      #6B8E78  salvia, acento de marca
     --accent-deep #4A5F52  salvia oscuro, hover/estado activo
     --secondary   #D8D0C5  arena, líneas y superficies suaves
   Tipografía:
     Lora   -> nombre de marca, tagline (display, con cursiva)
     Inter  -> navegación, cuerpo, pie legal (utilitaria)
   ========================================================= */

:root {
  --bg: #F4F5F0;
  --text: #333B38;
  --accent: #6B8E78;
  --accent-deep: #4A5F52;
  --secondary: #D8D0C5;

  --font-display: 'Lora', serif;
  --font-body: 'Inter', sans-serif;

  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 300ms ease;
}

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

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow: hidden; /* filosofía "sin scroll" en escritorio */
}

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

/* Foco visible para accesibilidad de teclado */
a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 4px;
}

/* ========================= LAYOUT PRINCIPAL ========================= */

.page {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 38%) 1fr;
}

.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- Panel izquierdo: marca + menú ---------- */

.panel--left {
  justify-content: space-between;
  padding: 4.5vh 4vw 6vh 5vw;
  position: relative;
}

/* línea sutil que separa ambos paneles, en vez de una sombra dura */
.panel--left::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--secondary) 20%,
    var(--secondary) 80%,
    transparent
  );
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.brand__role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}

/* ---------- Menú ---------- */

.menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* "Texturas" queda al final y alineado a la derecha, a propósito:
   sigue siendo un destino de igual jerarquía funcional que el resto
   (mismo tamaño de letra, mismo efecto de hover), pero su posición
   lo marca como el contenido "aparte" del menú. */
.menu__item--texturas {
  align-self: flex-end;
  margin-top: 0.4rem;
}

.menu__item--texturas .menu__link {
  padding-left: 0;
  padding-right: 1.4rem;
}

.menu__item--texturas .menu__link::before {
  left: auto;
  right: 0;
}

.menu__item--texturas .menu__link:hover,
.menu__item--texturas .menu__link:focus-visible,
.menu__item--texturas .menu__link.is-active {
  padding-left: 0;
  padding-right: 1.7rem;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 400;
  color: var(--text);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

/* marcador que aparece a la izquierda del ítem activo/hover */
.menu__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform var(--transition-fast);
}

.menu__link:hover,
.menu__link:focus-visible,
.menu__link.is-active {
  color: var(--accent-deep);
  padding-left: 1.7rem;
}

.menu__link:hover::before,
.menu__link:focus-visible::before,
.menu__link.is-active::before {
  transform: translateY(-50%) scale(1);
}

/* ---------- Tagline / cita dinámica ---------- */

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 32ch;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.tagline.is-fading {
  opacity: 0;
}

/* ---------- Panel derecho: imagen ---------- */

.panel--right {
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  position: relative;
  overflow: hidden;
}

/* "Ventana" orgánica y asimétrica: el elemento distintivo de la página.
   Su forma se relaja levemente en cada transición de imagen, como una
   pausa entre una idea y la siguiente. */
.frame {
  position: relative;
  width: min(70%, 560px);
  aspect-ratio: 3 / 4;
  border-radius: 6% 94% 92% 8% / 10% 8% 92% 90%;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(51, 59, 56, 0.35),
    0 10px 24px -12px rgba(51, 59, 56, 0.25);
  transition: border-radius var(--transition-slow);
}

.frame.is-shifting {
  border-radius: 10% 90% 88% 12% / 14% 12% 88% 86%;
}

.frame__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.frame__image.is-changing {
  opacity: 0;
  transform: scale(1.04);
}

/* borde interno suave para dar profundidad, sin usar una sombra dura */
.frame__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* ========================= PIE LEGAL ========================= */

.legal-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 5vw;
  font-size: 0.72rem;
  color: var(--text);
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  opacity: 0.75;
  z-index: 5;
}

.legal-footer a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-footer a:hover {
  color: var(--accent-deep);
}

/* ========================= RESPONSIVE ========================= */
/* Por debajo de este ancho la filosofía "sin scroll" deja de ser realista;
   se prioriza la lectura y se permite scroll vertical normal. */

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .page {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .panel--left {
    padding: 6vh 6vw 4vh;
    order: 2;
  }

  .panel--left::after {
    display: none;
  }

  .panel--right {
    order: 1;
    height: 56vh;
  }

  .frame {
    width: min(80%, 420px);
  }

  .legal-footer {
    position: static;
    background: none;
    padding: 1.5rem 6vw 2rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
  }
}