/* ============================================================
   UNA TARDE CON AXAEL — styles.css
   Paleta sacada de la foto misma:
   verde de los árboles, luz de tarde, negro de los tapabocas
   y el rojo de la correa de la mochila como acento.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --luz-tarde:   #EEF3E9;  /* fondo: cielo colándose entre las hojas */
  --luz-alta:    #F7FAF3;  /* punto más claro del dappled light */
  --verde-hoja:  #24402E;  /* follaje profundo: títulos y tinta secundaria */
  --tinta:       #171B18;  /* negro tapabocas, con matiz verde */
  --rojo-correa: #C6362F;  /* la correa roja de la mochila: acento */
  --papel:       #FFFFFF;  /* borde de la impresión */
  --papel-dorso: #F6F1E6;  /* reverso mate de la foto */
  --tinta-pluma: #2A2620;  /* nota escrita a mano */
  --stamp:       #FF9D2E;  /* sello de fecha estilo cámara de rollo */

  /* Tipografía por rol */
  --f-marker: 'Permanent Marker', cursive;   /* título grande, una sola vez */
  --f-pluma:  'Caveat', cursive;             /* nota al reverso y cita */
  --f-cuerpo: 'Karla', system-ui, sans-serif;
  --f-mono:   'Space Mono', monospace;       /* datos, eyebrows, timestamp */

  /* Ritmo */
  --espacio-bloque: clamp(3.5rem, 10vw, 6rem);
  --radio: 4px;
}

/* ---------- Reset ligero ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-cuerpo);
  font-size: 1.0625rem;             /* 17px base */
  line-height: 1.65;
  color: var(--tinta);
  background-color: var(--luz-tarde);
  /* Luz de tarde entre hojas: dos manchas suaves, nada más */
  background-image:
    radial-gradient(42rem 30rem at 78% -6%, var(--luz-alta) 0%, transparent 62%),
    radial-gradient(30rem 24rem at 6% 32%, rgba(36, 64, 46, 0.06) 0%, transparent 68%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Layout ---------- */
.marco {
  max-width: 42.5rem;               /* 680px: columna íntima, es una sola foto */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.bloque { margin-block-end: var(--espacio-bloque); }

.bloque:first-child { padding-block-start: clamp(3rem, 9vw, 5rem); }

/* ---------- Piezas de texto ---------- */
.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-hoja);
}

.titulo {
  margin: 0 0 0.75rem;
  font-family: var(--f-marker);
  font-weight: 400;                 /* Permanent Marker solo trae 400 */
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1.08;
  color: var(--tinta);
  letter-spacing: 0.01em;
}

.sub {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  color: var(--verde-hoja);
}

/* ============================================================
   LA IMPRESIÓN VOLTEABLE (elemento firma)
   ============================================================ */
.escena { text-align: center; }

.print {
  position: relative;
  width: 100%;
  cursor: pointer;
  perspective: 1400px;
  outline: none;
  /* Ligeramente torcida, como recién pegada en el álbum */
  transform: rotate(-1.4deg);
  transition: transform 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.print:focus-visible {
  transform: rotate(0deg);
}

.print:focus-visible .print-inner {
  box-shadow:
    0 0 0 3px var(--luz-tarde),
    0 0 0 6px var(--rojo-correa),
    0 18px 40px rgba(23, 27, 24, 0.22);
}

/* Solo dispositivos con hover real se enderezan al pasar el mouse */
@media (hover: hover) and (pointer: fine) {
  .print:hover { transform: rotate(0deg); }
}

.print-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;              /* foto 870x654 (~1.33) + borde parejo */
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.34, 1.3, 0.5, 1);
  box-shadow:
    0 2px 4px rgba(23, 27, 24, 0.12),
    0 18px 40px rgba(23, 27, 24, 0.22);
  border-radius: var(--radio);
}

.print.is-flipped .print-inner { transform: rotateY(180deg); }

/* Cinta adhesiva sobre el borde superior */
.print::before {
  content: '';
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 7rem;
  height: 1.9rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(240, 224, 178, 0.55);
  border-inline: 1px dashed rgba(23, 27, 24, 0.12);
  box-shadow: 0 1px 3px rgba(23, 27, 24, 0.12);
  z-index: 2;
  pointer-events: none;
}

/* Caras */
.print-cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radio);
  overflow: hidden;
}

/* Frente: papel fotográfico blanco */
.print-frente {
  background: var(--papel);
  padding: clamp(0.6rem, 2.2vw, 1rem);
}

.print-frente img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sello de fecha estilo cámara de rollo (placeholder editable) */
.timestamp {
  position: absolute;
  right: clamp(1.1rem, 4vw, 1.9rem);
  bottom: clamp(1.1rem, 4vw, 1.9rem);
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 2.4vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--stamp);
  text-shadow: 0 0 6px rgba(255, 157, 46, 0.85);
}

/* Reverso: dorso mate con nota a pluma */
.print-reverso {
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(23, 27, 24, 0.04) 0%, transparent 55%),
    var(--papel-dorso);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
}

.nota {
  margin: 0;
  font-family: var(--f-pluma);
  font-weight: 600;
  font-size: clamp(1.45rem, 5.2vw, 2.1rem);
  line-height: 1.35;
  color: var(--tinta-pluma);
  transform: rotate(-1deg);
}

.firma {
  margin: 0;
  font-family: var(--f-pluma);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--rojo-correa);
  transform: rotate(-2deg);
}

.volver {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23, 27, 24, 0.45);
}

/* Pista bajo la foto */
.pista {
  margin: 1.75rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--verde-hoja);
}

.pista-marker {
  font-family: var(--f-marker);
  font-size: 0.95rem;
  color: var(--rojo-correa);
  letter-spacing: 0.02em;
}

/* ============================================================
   FICHA DEL MOMENTO
   ============================================================ */
.datos {
  margin: 0;
  border-top: 1px solid rgba(36, 64, 46, 0.18);
}

.dato {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-bottom: 1px solid rgba(36, 64, 46, 0.14);
}

.dato dt {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-hoja);
}

.dato dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.mono-dato {
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

/* Placeholders visibles del sistema {POR CONFIRMAR} */
.pendiente {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rojo-correa);
  background: rgba(198, 54, 47, 0.08);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  border: 1px dashed rgba(198, 54, 47, 0.45);
}

/* ============================================================
   RELATO
   ============================================================ */
.cita {
  margin: 0 0 1.25rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--rojo-correa);
}

.cita p {
  margin: 0;
  font-family: var(--f-pluma);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  line-height: 1.3;
  color: var(--verde-hoja);
}

.texto {
  margin: 0;
  max-width: 34rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.pie {
  margin-block-end: 0;
  padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(36, 64, 46, 0.18);
  text-align: center;
}

.pie-texto {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--verde-hoja);
}

.pie-mono {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(36, 64, 46, 0.55);
}

/* ============================================================
   REVEAL AL HACER SCROLL
   ============================================================ */
/* Solo se ocultan si hay JS (clase .js puesta en <head>).
   Sin JS, todo el contenido queda visible por defecto. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* El hero entra de una, sin esperar al observer */
.hero.reveal { transition-delay: 0.05s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Tablet: 768px — la ficha respira en dos columnas */
@media (min-width: 48rem) {
  .datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }

  .dato { grid-template-columns: 6.5rem 1fr; }
}

/* Desktop: 1280px — más aire, misma intimidad */
@media (min-width: 80rem) {
  .marco { max-width: 47.5rem; }    /* 760px */
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   El volteo sigue funcionando (es contenido), pero instantáneo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .print,
  .print-inner,
  .js .reveal {
    transition: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .print { transform: rotate(0deg); }
}