/* ============================================================
   Páginas de proyecto — componentes compartidos + temas
   ============================================================ */

/* ------------------------------------------------------------
   Componentes
   ------------------------------------------------------------ */
.hero-proyecto { position: relative; }

.hero-proyecto img { width: 100%; }

.hero-proyecto .hero-video {
  width: 100%;
  display: block;
  animation: hero-entrada 1.1s ease both;
}

.titulo-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vino);
  color: var(--dorado-suave);
  border: 1px solid var(--dorado);
  border-top: none;
  border-radius: 0 0 22px 22px;
  padding: 0.55rem 3rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Sección de introducción con etiqueta vertical */
.seccion-intro {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 4.5rem 2rem;
}

.seccion-intro .etiqueta-vertical {
  transform: rotate(180deg);
  border-left: 1px solid currentColor;
  padding-left: 0.7rem;
  flex: none;
  opacity: 0.9;
}

.seccion-intro .texto { flex: 1; }

.seccion-intro .texto p {
  font-size: 0.86rem;
  line-height: 1.75;
  text-align: justify;
}

.seccion-intro .texto p + p { margin-top: 0.9rem; }

.seccion-intro .fotos {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 150px;
}

.seccion-intro .fotos img {
  width: 100%;
  border: 2px solid var(--acento, var(--vino));
}

/* Banda de título (Desarrollo, etc.) */
.banda {
  padding: 4.2rem 1rem;
  text-align: center;
}

.banda .script {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
}

/* Carta con borde dorado */
.carta {
  max-width: 900px;
  margin: 3rem auto;
  border: 1px solid var(--carta-borde, var(--dorado));
  border-radius: 26px;
  padding: 2.4rem 2.6rem;
}

.carta h3.script {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.carta .subtitulo {
  font-weight: 500;
  font-size: 0.82rem;
  margin-bottom: 0.8rem;
}

.carta p {
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: justify;
}

.carta p + p { margin-top: 0.8rem; }

.carta-cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.2rem;
  align-items: start;
}

.carta-cols .con-borde { border-left: 1px solid var(--carta-borde, var(--dorado)); padding-left: 2.2rem; }

@media (max-width: 720px) {
  .carta-cols { grid-template-columns: 1fr; }
  .carta-cols .con-borde { border-left: none; padding-left: 0; }
}

/* Imagen a sangre completa con etiqueta vertical */
.franja {
  position: relative;
}

.franja img { width: 100%; }

.franja .etiqueta-vertical {
  position: absolute;
  right: 1.2rem;
  bottom: 1.6rem;
}

/* Imagen centrada con marco redondeado */
.lamina {
  max-width: 780px;
  margin: 2.4rem auto;
  padding: 0 1.6rem;
}

.lamina img,
.lamina video {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.lamina figcaption {
  font-family: "Pinyon Script", cursive;
  font-size: 1.7rem;
  margin-top: 0.7rem;
}

/* Galería continua: franjas contiguas de una sola pieza, sin separación */
.galeria-continua {
  max-width: 835px;
  margin: 3rem auto 0;
}

.galeria-continua img {
  display: block;
  width: 100%;
}

/* Galería en columna */
.galeria-col {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  align-items: center;
  padding: 3rem 1.6rem;
}

.galeria-col img {
  max-width: min(760px, 100%);
  border-radius: 4px;
}

/* Texto largo sobre papel claro: dorado algo más profundo para que se lea
   (los títulos y acentos conservan el dorado del diseño) */
.p-ana .seccion-intro .texto p,
.p-ana .carta p,
.p-ana .eti,
.p-daniela .seccion-intro .texto p,
.p-daniela .carta p,
.p-daniela .eti,
.p-daniela .grupo-refs figcaption {
  color: #a8741c;
}

/* Anotaciones de referencia (etiquetas pequeñas con línea) */
.ref-label {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   Collages compuestos con items individuales
   (posiciones en % medidas del diseño original)
   ------------------------------------------------------------ */
.collage {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.collage > img,
.collage > .item-recortado,
.collage > .eti,
.collage > .linea-oro,
.collage > .nota-collage {
  position: absolute;
}

.collage > img { height: auto; }

.item-recortado { overflow: hidden; }

.item-recortado img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.collage .eti {
  font-size: clamp(0.42rem, 2.1cqw, 0.72rem);
  line-height: 1.35;
  z-index: 4;
}

/* collage denso (muchas etiquetas): el texto escala con el contenedor */
.collage.denso .eti {
  font-size: clamp(0.3rem, 1.6cqw, 0.7rem);
  line-height: 1.3;
}

.collage .linea-oro {
  border-top: 1px solid currentColor;
  opacity: 0.85;
  z-index: 3;
}

.collage .linea-oro.vertical {
  border-top: none;
  border-left: 1px solid currentColor;
}

.collage .nota-collage {
  background: #fdf6bd;
  color: #6b5a25;
  padding: 4% 3%;
  font-size: clamp(0.42rem, 2cqw, 0.7rem);
  text-align: center;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* Grupos con pie de foto (Espacio / Outfit 3) */
.grupo-refs h5 {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}

.grupo-refs .fila-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 0.7rem;
}

.grupo-refs .fila-fotos.dos { grid-template-columns: repeat(2, 1fr); }

.grupo-refs figure { margin: 0; }

.grupo-refs figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.grupo-refs figure.alta img { aspect-ratio: 1 / 1.15; }

.grupo-refs figcaption {
  text-align: center;
  font-size: 0.62rem;
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------
   Líneas de referencia: imagen + descripciones conectadas
   ------------------------------------------------------------ */
.ref-conjunto {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  align-items: center;
}

.anotaciones {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}

.anotaciones li {
  display: flex;
  align-items: center;
  font-size: 0.68rem;
  line-height: 1.5;
}

.anotaciones li::before {
  content: "";
  flex: 0 0 clamp(26px, 6vw, 80px);
  border-top: 1px solid currentColor;
  opacity: 0.75;
  margin-right: 0.7rem;
}

/* las líneas nacen desde la imagen */
.ref-conjunto .anotaciones { margin-left: -1.6rem; }

/* variante: etiquetas a la izquierda, línea apuntando a la derecha */
.anotaciones.izq li { flex-direction: row-reverse; text-align: right; }
.anotaciones.izq li::before { margin-right: 0; margin-left: 0.7rem; }
.ref-conjunto .anotaciones.izq { margin-left: 0; margin-right: -1.6rem; }

/* variante: etiquetas debajo con línea vertical hacia la imagen */
.anotaciones-abajo {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  justify-content: space-around;
  align-items: flex-start;
  margin: -0.2rem 0 0;
  padding: 0;
}

.anotaciones-abajo li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1.45;
  max-width: 180px;
}

.anotaciones-abajo li::before {
  content: "";
  height: 28px;
  border-left: 1px solid currentColor;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

@media (max-width: 720px) {
  .ref-conjunto { grid-template-columns: 1fr; gap: 1rem; }
  .ref-conjunto .anotaciones { margin-left: 0; }
  .ref-conjunto .anotaciones.izq { margin-right: 0; }
  .anotaciones li::before { flex-basis: 26px; }
  .anotaciones-abajo { flex-wrap: wrap; }
}

/* Frase destacada */
.frase {
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 1.2rem;
}

/* ------------------------------------------------------------
   TEMAS por proyecto
   ------------------------------------------------------------ */

/* — El universo de Ana — */
.p-ana {
  /* el cuerpo va sobre papel claro; solo hero y bandas llevan color */
  background: url("../assets/tex/ana-papel.jpg?v=6") repeat #eee7e6;
  background-size: 270px;
  color: #c9922f;
  --nav-bg: #3a281a;
  --nav-ink: var(--crema);
  --nav-logo: var(--dorado);
  --acento: #c9922f;
  --carta-borde: #d8b25e;
}

.p-ana .banda-rayas {
  background: repeating-linear-gradient(
    to bottom,
    #e0a44d 0 44px,
    #802747 44px 88px
  );
  color: #5e1b33;
}

.p-ana .banda-rayas .script { color: #7c2342; text-shadow: 0 1px 0 rgba(255, 240, 210, 0.4); }

/* — La Tiendita — */
.p-daniela {
  /* papel claro en todo el cuerpo; el color queda en hero y bandas */
  background: url("../assets/tex/daniela-papel.jpg?v=6") repeat #eee7e7;
  background-size: 260px;
  color: #c08a3e;
  --acento: #c08a3e;
  --carta-borde: #d8b25e;
}

.p-daniela .banda-intro {
  /* bandas horizontales rosadas de la introducción */
  background: url("../assets/tex/daniela-intro-bandas.jpg?v=6") repeat #c4abaf;
  background-size: 420px;
}

.p-daniela .banda-oscura {
  /* rayas verticales del Desarrollo */
  background: url("../assets/tex/daniela-desarrollo-rayas.jpg?v=4") repeat #6d1f36;
  background-size: 710px;
  color: var(--dorado-suave);
  padding: 5.5rem 1rem;
}

.p-daniela .banda-bocetos {
  background: url("../assets/tex/daniela-desarrollo-rayas.jpg?v=4") repeat #6d1f36;
  background-size: 710px;
  filter: brightness(0.82);
  color: var(--dorado-suave);
  padding: 3.5rem 1rem;
}

/* — Veinticuatro — */
.p-v24 {
  background: #f2ecdb;
  color: #4a4433;
  --nav-bg: #f2ecdb;
  --nav-ink: #4a4433;
  --nav-logo: #8a7a4a;
  --acento: #6b6434;
  --carta-borde: #8a7a4a;
}

.p-v24 .banda-oliva {
  background: url("../assets/tex/v24-oliva.jpg?v=2") repeat #565025;
  background-size: 860px;
  color: #e9e2c8;
}

.p-v24 .banda-argyle {
  background: url("../assets/tex/v24-argyle.jpg?v=2") repeat #4a431f;
  background-size: 1024px;
  color: #e9e2c8;
}

.p-v24 .carta-clara {
  background: #f2ecdb;
  border-color: #8a7a4a;
}

/* — A Boot's Diary — */
.p-boots {
  background: url("../assets/tex/boots-papel.jpg?v=6") repeat #f3eeee;
  background-size: 220px;
  color: #6b4a35;
  --nav-bg: #3a281a;
  --nav-ink: #f3d9c8;
  --nav-logo: #e8b4c0;
  --acento: #d1567e;
  --carta-borde: #d1567e;
}

/* la banda de botitas va sobre el mismo papel, no sobre café */
.p-boots .banda-cafe {
  background: transparent;
  color: #a08d7e;
  padding: 1.4rem 1rem 1.8rem;
}

.boots-nav {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  max-width: 980px;
  margin: 0 auto;
}

.boots-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  transition: transform 0.2s ease;
}

.boots-nav a:hover { transform: translateY(-4px); }

.boots-nav img { width: 84px; }

.boots-nav a:hover img { animation: botita 0.5s ease; }

@keyframes botita {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
}

.p-boots .estrella {
  color: #e0679a;
  font-size: 2.4rem;
}

/* — Brinja — */
.p-brinja {
  background: #faf3e7;
  color: #4a4038;
  --nav-bg: #faf3e7;
  --nav-ink: #4a4038;
  --nav-logo: #7a6a55;
  --acento: #4a4038;
  --carta-borde: #9a8a72;
}

.p-brinja .banda-negra {
  background: #352c26;
  color: #efe6d6;
  padding: 3rem 1rem;
  text-align: center;
}

/* — El refugio del desterrado — */
.p-refugio {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.045) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 60%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px),
    #47565f;
  background-size: 90px 90px, 110px 110px, auto;
  color: #e8d8c8;
  --nav-bg: #3a4750;
  --nav-ink: #e8d8c8;
  --nav-logo: #d9a7b0;
}

.p-refugio .titulo-serif {
  font-family: "Cinzel", serif;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem;
}

.p-refugio .bloque-texto {
  max-width: 920px;
  margin: 0 auto;
  padding: 4.5rem 2rem 2rem;
}

.p-refugio .bloque-texto p {
  font-size: 0.88rem;
  line-height: 1.8;
  text-align: justify;
}

.p-refugio .alineado-derecha { text-align: right; }

/* ------------------------------------------------------------
   Animaciones e interactividad (usadas por js/animaciones.js)
   ------------------------------------------------------------ */
.hero-proyecto img {
  animation: hero-entrada 1.1s ease both;
}

@keyframes hero-entrada {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}

.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.ampliable { cursor: zoom-in; transition: transform 0.35s ease; }

.ampliable:hover { transform: scale(1.012); }

.escenas figure { transition: transform 0.3s ease, box-shadow 0.3s ease; }

.escenas figure:hover { transform: translateY(-6px) rotate(-0.4deg); }

.carta { transition: box-shadow 0.35s ease; }

.carta:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); }

/* ------------------------------------------------------------
   Flechas laterales para pasar de página
   ------------------------------------------------------------ */
.flecha-pagina {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.7rem;
  border-radius: 999px;
  color: var(--flecha-ink, var(--marron-oscuro));
  background: var(--flecha-bg, rgba(255, 253, 246, 0.82));
  border: 1px solid currentColor;
  box-shadow: 0 6px 18px rgba(20, 12, 6, 0.18);
  backdrop-filter: blur(4px);
  transition: transform 0.28s ease, background 0.28s ease, opacity 0.28s ease;
  opacity: 0.55;
}

.flecha-pagina:hover,
.flecha-pagina:focus-visible {
  opacity: 1;
  background: var(--flecha-bg-hover, #fffdf6);
}

.flecha-pagina.izq { left: 0.9rem; flex-direction: row; }
.flecha-pagina.der { right: 0.9rem; flex-direction: row-reverse; }

.flecha-pagina.izq:hover { transform: translateY(-50%) translateX(-3px); }
.flecha-pagina.der:hover { transform: translateY(-50%) translateX(3px); }

.flecha-pagina svg { width: 22px; height: 22px; flex: none; }

.flecha-nombre {
  font-family: "Pinyon Script", cursive;
  font-size: 1.15rem;
  line-height: 1;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.32s ease, opacity 0.28s ease;
}

.flecha-pagina:hover .flecha-nombre,
.flecha-pagina:focus-visible .flecha-nombre {
  max-width: 15rem;
  opacity: 1;
}

/* temas oscuros: flecha clara */
.p-refugio,
.p-solaria,
.fondo-audiovisual {
  --flecha-ink: #f3e8da;
  --flecha-bg: rgba(30, 20, 12, 0.55);
  --flecha-bg-hover: rgba(30, 20, 12, 0.85);
}

.p-ana,
.p-daniela,
.p-boots {
  --flecha-ink: #8a6a48;
  --flecha-bg: rgba(255, 253, 246, 0.85);
  --flecha-bg-hover: #fffdf6;
}

@media (max-width: 640px) {
  .flecha-pagina { padding: 0.7rem 0.5rem; opacity: 0.75; }
  .flecha-pagina.izq { left: 0.4rem; }
  .flecha-pagina.der { right: 0.4rem; }
  .flecha-pagina svg { width: 18px; height: 18px; }
  .flecha-nombre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flecha-pagina, .flecha-nombre { transition: none; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(22, 13, 8, 0.88);
  display: grid;
  place-items: center;
  padding: 2rem;
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: lightbox-entrada 0.3s ease;
}

@keyframes lightbox-entrada {
  from { opacity: 0; transform: scale(0.96); }
}

.lightbox .lightbox-cerrar {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #f3e8da;
  font-size: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .hero-proyecto img { animation: none; }
}

/* — Solaria — */
.p-solaria {
  background: #b27380;
  color: #f6e8e8;
  --nav-bg: #b27380;
  --nav-ink: #f6e8e8;
  --nav-logo: #ffffff;
}

.p-solaria .escenario {
  min-height: 68vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6rem 1.6rem 5rem;
}