/* =========================================================
   INICIO: animación (caminata → saludo + texto) y, al
   deslizar, una sección por cada parte del menú
   Escena de proporción fija (1328 × 746).
   Todas las posiciones están en % de la escena, así que se
   mueven y escalan juntas en cualquier pantalla.
   ========================================================= */
/* ---------- Primera pantalla (animación) ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  container-type: size;   /* la escena se mide contra este bloque */
  background: var(--color-fondo);
}
.escena {
  --proporcion: 1.78016;  /* ancho / alto de la escena */
  container-type: size;   /* permite medir el texto en % de la escena (cqh) */
  position: absolute;
  left: 50%; top: 50%;
  width: max(100cqw, 100cqh * var(--proporcion));
  height: max(100cqh, 100cqw / var(--proporcion));
  transform: translate(-50%, -50%);
}

/* Celular / pantallas verticales:
   el bloque mide lo que la escena (no toda la pantalla), la escena se
   agranda y se recorta el lado izquierdo vacío: la chica entra caminando
   desde fuera de cuadro. Debajo empieza el contenido. */
@media (max-aspect-ratio: 1/1) {
  .hero {
    --zoom: 1.7;           /* 1 = escena completa · más alto = más grande */
    height: auto;
    container-type: normal;
    padding-top: var(--alto-header);
  }
  .escena {
    position: relative;
    left: auto; top: auto; transform: none;
    width: calc(100vw * var(--zoom));
    height: calc(100vw * var(--zoom) / var(--proporcion));
    margin-left: calc(100vw - 100vw * var(--zoom) + 4vw * var(--zoom));
  }
}

/* Aviso para deslizar (aparece al terminar el texto) */
.deslizar {
  position: absolute;
  left: 50%; bottom: clamp(1rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  font-weight: 600;
  font-size: var(--t-pequeno);
  text-decoration: none;
  letter-spacing: 0.08em;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.8s;
}
.deslizar span { animation: flotar 1.6s ease-in-out infinite; }
.listo .deslizar { opacity: 0.85; }
@keyframes flotar { 50% { transform: translateY(5px); } }
@media (max-aspect-ratio: 1/1) { .deslizar { display: none; } }

.escena img { position: absolute; }

.casa { left: 57.33%; top: 10.85%; width: 37.18%; height: 85.86%; }

.chica {
  position: absolute;
  left: 4.44%; top: 48.43%; width: 18.09%; height: 43.57%;
  visibility: hidden;
}
.chica img { inset: 0; width: 100%; height: 100%; }
.chica .b { opacity: 0; }

/* Chica saludando (aparece al terminar la caminata) */
.saludo { left: 44.04%; top: 47.01%; width: 20.23%; height: 45.03%; visibility: hidden; }

/* Texto que se escribe solo */
.bienvenida {
  position: absolute;
  left: 44.65%; top: 45.2%;
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: max(4.3cqh, 15px);  /* 4.3% del alto de la escena, mínimo 15px */
  line-height: 1;
  white-space: nowrap;
  color: var(--color-texto);
  visibility: hidden;
}
.bienvenida .cursor {
  display: inline-block;
  width: 0.06em; height: 1.05em;
  margin-left: 0.04em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: parpadeo 1s steps(1) infinite;
}
.escribiendo .bienvenida .cursor { animation: none; } /* fijo mientras escribe */
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---- Estados (los pone js/inicio.js) ---- */
.caminando .chica {
  visibility: visible;
  animation: caminar calc(var(--paso, 0.4s) * 6) step-end forwards;
}
.caminando .chica .a { animation: poseA calc(var(--paso, 0.4s) * 6) step-end forwards; }
.caminando .chica .b { animation: poseB calc(var(--paso, 0.4s) * 6) step-end forwards; }

.saludando .chica { visibility: hidden; animation: none; }
.saludando .saludo, .saludando .bienvenida { visibility: visible; }

/* 6 pasos: posición de la chica en cada uno */
@keyframes caminar {
  0%      { left: 4.44%; }
  16.667% { left: 12.06%; }
  33.333% { left: 19.68%; }
  50%     { left: 27.30%; }
  66.667% { left: 34.92%; }
  83.333%, 100% { left: 42.54%; }
}
@keyframes poseA {
  0%, 33.333%, 66.667% { opacity: 1; }
  16.667%, 50%, 83.333%, 100% { opacity: 0; }
}
@keyframes poseB {
  0%, 33.333%, 66.667% { opacity: 0; }
  16.667%, 50%, 83.333%, 100% { opacity: 1; }
}

/* ---------- Contenido al deslizar ---------- */
.portada {
  padding: var(--espacio-l) var(--margen);
  max-width: 90rem;
  margin: 0 auto;
}
.presentacion {
  font-family: var(--fuente-display);
  font-size: var(--t-h2);
  line-height: 1.15;
  max-width: 48rem;
  margin: 0 0 var(--espacio-l);
}

.bloque {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2.2fr;
  gap: var(--espacio-m) var(--espacio-l);
  align-items: start;
  padding: var(--espacio-l) 0;
  border-top: 1px solid var(--color-linea);
}
.bloque__num { font-family: var(--fuente-display); color: var(--color-texto-suave); }
.bloque__titulo { font-size: var(--t-h1); margin: 0.1em 0 0.25em; }
.bloque__titulo a { text-decoration: none; }
.bloque__texto { margin: 0 0 var(--espacio-m); color: var(--color-texto-suave); max-width: 24rem; }
.bloque__boton {
  display: inline-flex; gap: 0.4em; align-items: center;
  font-weight: 700; text-decoration: none;
  padding: 0.55em 1.2em;
  border: 1px solid var(--color-texto);
  border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.bloque__boton:hover { background: var(--color-texto); color: var(--color-fondo); }

/* En la portada la lista del blog va sin márgenes extra */
.bloque__muestra .lista-entradas { max-width: none; }
.bloque__muestra .entrada-item:first-child { border-top: 0; }
.bloque__muestra .entrada-item a { padding: var(--espacio-s) 0 var(--espacio-m); }
.bloque__muestra .rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--espacio-s); }
.bloque__muestra .rejilla--archivo { grid-template-columns: repeat(3, 1fr); }

/* Bloque sin muestra (Acerca de): panel de color */
.bloque--panel {
  display: block;
  background: var(--color-panel);
  border: 0;
  border-radius: var(--radio-panel);
  padding: var(--espacio-l) var(--margen);
  margin: var(--espacio-m) calc(var(--margen) * -0.5) 0;
}
.bloque--panel .bloque__texto { color: var(--color-texto); max-width: 32rem; font-size: 1.15em; }

@media (max-width: 800px) {
  .bloque { grid-template-columns: 1fr; gap: var(--espacio-m); padding: var(--espacio-m) 0 var(--espacio-l); }
  .bloque__titulo { font-size: var(--t-h2); }
  .bloque__texto { margin-bottom: var(--espacio-s); }
  .bloque__muestra .rejilla { grid-template-columns: repeat(2, 1fr); }
  .bloque__muestra .rejilla:not(.rejilla--archivo) > :nth-child(n+3) { display: none; }
  .bloque__muestra .rejilla--archivo { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .bloque__muestra .rejilla--archivo .tarjeta__titulo,
  .bloque__muestra .rejilla--archivo .tarjeta__sub { display: none; }
  .bloque__muestra .entrada-item a { grid-template-columns: 1fr; gap: 0.2rem; }
  .bloque--panel { margin: var(--espacio-s) 0 0; padding: var(--espacio-m) var(--margen); }
}
.portada { scroll-margin-top: var(--alto-header); }
.bloque__muestra .entrada-item:last-child { border-bottom: 0; }
@media (max-width: 800px) {
  .portada { padding-top: var(--espacio-m); }
  .presentacion { margin-bottom: var(--espacio-m); }
}