/* ============================================================
   carmenleo.com — Páginas interiores
   (hoy, Poesía). Reutilizan portada.css y añaden la entrada de
   sección, el estado "muy pronto" y la composición de poemas.
   ============================================================ */

.interior .cabecera { position: fixed; }

/* ---------- Entrada de sección (sala oscura) ---------- */

.entrada-seccion {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 80rem;
  margin-inline: auto;
  padding: calc(var(--alto-cabecera) + clamp(3rem, 8vw, 6rem)) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}
.entrada-seccion::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 70% 45%, var(--sala-700), var(--sala-900) 70%);
}
.entrada-seccion--sola { grid-template-columns: 1fr; max-width: 52rem; }

.entrada-seccion__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.entrada-seccion__texto {
  max-width: 34rem;
  margin: var(--esp-4) 0 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--hueso-apagado);
}
.entrada-seccion .pantalla { aspect-ratio: 5 / 4; }

/* Migas: de dónde vienes */
.migas {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--hueso-tenue);
}
.migas a { color: var(--luz); }
.migas a:hover { color: var(--luz-clara); }
.papel .migas { color: var(--papel-tinta-suave); }
.papel .migas a { color: var(--luz-tinta); }

/* ---------- Texto corrido sobre papel ---------- */

.prosa p {
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.22rem);
  line-height: 1.75;
  margin: 0 0 1.2em;
}

/* ---------- Estado "muy pronto" ---------- */
/* Una sección sin contenido todavía no se ve vacía: se ve anunciada. */

.pronto {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
  padding: var(--esp-5) var(--esp-4);
  border: 1px dashed var(--papel-linea);
  border-radius: var(--radio-suave);
  text-align: center;
}
.pronto__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--luz-tinta);
}
.pronto__texto { margin: 0 auto; max-width: 30rem; color: var(--papel-tinta-suave); font-size: var(--t-sm); }

/* ---------- Poesía ---------- */

.poema__titulo {
  margin: 0 0 var(--esp-5);
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--t-xl);
}
/* ---------- Índice de poemas ---------- */

.indice-poemas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-5);
  margin: var(--esp-5) 0 0;
  padding: 0;
  list-style: none;
}
.indice-poemas a {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--t-lg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--subrayado);
}
.indice-poemas a:hover { color: var(--luz-tinta); text-decoration-color: currentColor; }

/* ---------- Cada poema, su forma ---------- */

.poema-seccion { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }

.poema-seccion .poema__titulo {
  margin: 0 0 var(--esp-6);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.08;
  text-wrap: balance;
}

/* Todos los versos: bloques, sin sangría heredada del párrafo */
.poema-forma { margin: 0; padding: 0; list-style: none; }
.poema-forma .verso {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-verso);
  line-height: 1.75;
}

/* «Nuestro mundo» — La escalada.
   Es un romance: se imprime en octosílabos, uno por línea. Cada par de
   versos (la unidad de la rima) sube un peldaño hacia la derecha, como
   la montaña. En el giro final los versos vuelven de golpe al margen:
   el lector se da la vuelta con el poema. */
.poema--escalada .verso {
  margin-left: calc(var(--i, 0) * clamp(0.6rem, 1.7vw, 1.5rem));
  padding-block: 0.3em;
}
.poema--escalada .hemi { display: block; }
.poema--escalada .vuelta {
  margin-top: var(--esp-6);
  margin-left: 0;
  font-style: italic;
  font-size: calc(var(--t-verso) * 1.3);  /* el giro es el clímax */
  color: var(--luz-tinta);
}
.poema--escalada .vuelta + .vuelta { margin-top: 0.3em; }

/* «Valientes» — Pasos en la noche.
   Los versos largos caminan por una columna; los cortos caen
   alternando a izquierda y derecha, como el taconeo. */
.poema--pasos { max-width: 46rem; }
.poema--pasos .verso { padding-left: clamp(1.5rem, 9vw, 7rem); }
.poema--pasos .paso {
  margin-block: 1.4em 0.5em;
  padding-left: 0;
  font-style: italic;
  font-size: calc(var(--t-verso) * 1.15);
  color: var(--luz-tinta);
}
.poema--pasos .paso--der { text-align: right; }
.poema--pasos .final {
  margin-top: var(--esp-6);
  padding-left: 0;
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.2;
  text-wrap: balance;
}

/* «Siete días de acuarela» — La paleta.
   Cada terceto es un día y cada día tiene su color: una mancha de
   acuarela detrás de su nombre. Tonos suaves y difuminados, como el
   agua sobre el papel; nunca un bloque de color. */
.poema--acuarela { max-width: 44rem; }
.poema--acuarela .terceto { margin: 0 0 2.4em; }
.poema--acuarela .dia {
  position: relative;
  z-index: 0;
  font-style: italic;
  font-weight: 500;
}
.poema--acuarela .dia::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.1em;
  top: -0.7em;
  width: calc(100% + 2.6em);
  height: 2.5em;
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  background: radial-gradient(ellipse at 45% 50%, var(--color) 0%, var(--color) 32%, transparent 70%);
  opacity: 0.6;
  filter: blur(5px);
  transform: rotate(-3deg);
}
/* El blanco del lunes no se vería: se sugiere con un contorno de agua */
.poema--acuarela .dia--blanco::before {
  /* translúcido: una mancha blanca opaca taparía la letra siguiente */
  background: radial-gradient(ellipse at 45% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(33, 29, 24, 0.1) 60%, transparent 72%);
  opacity: 1;
}
/* El jueves son dos colores: el plateado de la olla y el rojo del estrés */
.poema--acuarela .dia--jueves::before {
  background:
    radial-gradient(ellipse 60% 70% at 30% 50%, #b9bcc0 0%, #b9bcc0 30%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 78% 50%, #c65440 0%, #c65440 25%, transparent 70%);
}
.poema--acuarela .cierre {
  margin-top: 1.2em;
  font-style: italic;
  color: var(--luz-tinta);
}

/* «Escala de espaguetis con coquinas» — La partitura.
   Ocho coplas de pie quebrado, cada una con su nota en grande al
   margen, en dos columnas como una partitura. Los versos de cuatro
   sílabas (el pie quebrado) van sangrados, como en la tradición. */
.poema--escala {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6) clamp(2rem, 6vw, 5rem);
  max-width: 56rem;
}
.copla {
  position: relative;
  padding-left: clamp(3.4rem, 7vw, 4.6rem);
}
.copla__nota {
  position: absolute;
  left: 0;
  top: -0.15em;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1;
  color: var(--luz-tinta);
}
.copla .verso { font-size: calc(var(--t-verso) * 0.95); line-height: 1.6; }
.copla .quebrado { padding-left: 2.4em; font-style: italic; }
.copla .quebrado--fin { margin-bottom: 0.6em; }

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 860px) {
  .entrada-seccion { grid-template-columns: 1fr; padding-top: 8rem; }
  /* En móvil cada hemistiquio va en su línea y la subida es más corta:
     la escalada se mantiene sin salirse de la pantalla */
  .poema--escalada .verso { margin-left: calc(var(--i, 0) * 0.4rem); }
  .poema--escalada .vuelta { margin-left: 0; }
  .poema--escala { grid-template-columns: 1fr; }
  .poema--pasos .verso { padding-left: 1rem; }
  .poema--pasos .paso { padding-left: 0; }
}

/* ---------- Prensa ---------- */
.prensa__linea {
  margin: var(--esp-6) 0 0;
  max-width: 44rem;
  padding: var(--esp-4) var(--esp-5);
  border-left: 2px solid var(--luz-tinta);
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  line-height: 1.4;
}
.prensa__linea span {
  display: block;
  margin-bottom: var(--esp-2);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--luz-tinta);
}
.bio {
  margin-top: var(--esp-5);
  padding: var(--esp-5);
  background: var(--papel);
  border: 1px solid var(--papel-linea);
}
.bio__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.bio__cabeza h3 { margin: 0; font-family: var(--fuente-display); font-weight: 400; font-size: var(--t-lg); }
.bio__cabeza h3 span { font-family: var(--fuente-ui); font-size: var(--t-xs); letter-spacing: var(--interletra-media); color: var(--papel-tinta-suave); }
.bio__copiar {
  flex: none;
  padding: 0.45rem 0.9rem;
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--papel-tinta);
  background: transparent;
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-suave);
  cursor: pointer;
}
.bio__copiar:hover { border-color: var(--luz-tinta); color: var(--luz-tinta); }
.bio p { margin: 0 0 1em; }
.bio p:last-child { margin-bottom: 0; }
.fotos-prensa {
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
}
.fotos-prensa img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: var(--esp-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
@media (max-width: 760px) { .fotos-prensa { grid-template-columns: 1fr 1fr; } }