/* ===== PÁGINA PRESENTACIÓN ===== */

/* Contenedor editorial: alineado con el espacio entre el logo y "Bibliotecas →" del header */
.pres-inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: 200px;
  padding-right: 160px;
}

/* ── Wrapper que agrupa cabecera + cuerpo para posicionar la textura lateral ── */
.pres-wrapper {
  position: relative;
  overflow-x: clip; /* evita scroll horizontal por la franja con left negativo */
}

/* Franja de textura tejido girada 90° — se usa un div real para poder rotar el background */
.pres-textura-izq {
  position: absolute;
  left: -30px; /* mitad de la franja fuera del viewport */
  top: 230px; /* aproximado: padding-top cabecera (80px) + etiqueta (36px) + h1 (114px) */
  width: 80px;
  bottom: 280px; /* aproximado: espacio del bloque de autores + padding inferior */
  clip-path: inset(
    0
  ); /* recorta el output visual post-transform, no el layout box */
  pointer-events: none;
}

/* El ::before se despliega horizontal (3000px × 80px) y rota 90° CW.
   rotate(90deg) sobre left-top desplaza el visual a x negativo (x:[-80,0]).
   translateX(80px) lo reubica en x:[0,80] — dentro del clip del padre. */
.pres-textura-izq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3000px;
  height: 80px;
  background-color: #fcebd5;
  background-image: url("../../images/recursos/textura-tejido.png");
  background-repeat: repeat-x;
  background-size: auto 80px;
  transform: translateX(80px) rotate(90deg);
  transform-origin: left top;
}

/* ── Cabecera ── */
.pres-cabecera {
  background: #fdf3e6;
  padding: var(--espacio-xl) 0 var(--espacio-s);
}

.pres-etiqueta {
  text-align: left;
  font-family: var(--font-cuerpo);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #707070;
  margin-bottom: var(--espacio-s);
}

.pres-titulo {
  text-align: left;
  font-family: var(--font-cuerpo);
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: 0;
  color: #750032;
  max-width: 820px;
}

/* ── Cuerpo de texto ── */
.pres-cuerpo {
  background: #fdf3e6;
  padding: var(--espacio-s) 0 var(--espacio-xl);
  overflow-x: clip; /* permite que la cita desborde visualmente sin generar scroll horizontal */
}

.pres-p {
  text-align: left;
  font-family: var(--font-titulo);
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
  color: #707070;
  margin-bottom: var(--espacio-m);
}

/* ── Bloque Bolivia + cita en dos columnas ── */
.pres-bloque-cita {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-xl);
  align-items: stretch; /* ambas columnas ocupan la misma altura */
  margin-bottom: var(--espacio-m);
}

.pres-bloque-cita .pres-p {
  margin-bottom: 0;
}

/* Cita destacada: 80% dentro del container, 20% desborda a la derecha */
.pres-cita {
  width: calc(
    100% / 0.8
  ); /* = 125% de la columna → 80% dentro, 20% fuera del container */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-cuerpo);
  font-size: 25px;
  line-height: 33px;
  font-weight: 700;
  letter-spacing: 0;
  color: #294a3a;
  margin: 0;
  padding: 0;
  border: none;
}

/* ── Autores ── */
.pres-autores {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline; /* alinea ambos autores por la línea base del texto */
  gap: var(--espacio-xl);
  margin-top: var(--espacio-xl);
  padding-top: var(--espacio-l);
}

.pres-autor {
  font-family: var(--font-cuerpo);
  font-size: 16px;
  line-height: 19px;
  font-weight: 900;
  letter-spacing: 0;
  color: #707070;
  opacity: 1;
  text-align: left;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Imagen ya orientada hacia la derecha — sin transform para que no varíe entre tamaños de pantalla */
.pres-autor__icono {
  width: 18px;
  height: 31px;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Banda tejido decorativa ── */
.pres-banda-tejido {
  width: 100%;
  height: 80px;
  background-image: url("../../images/recursos/textura-tejido.png");
  background-repeat: repeat-x;
  background-size: auto 150%;
  background-color: #781c41;
}

/* ── Agradecimiento ── */
.pres-agradecimiento {
  background: #781c41;
  padding: var(--espacio-xl) 0;
}

.pres-agradecimiento__texto {
  text-align: center;
  font-family: var(--font-cuerpo);
  font-size: 25px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
  max-width: 820px;
  margin: 0 auto;
}

/* ── Sección créditos ── */
.creditos {
  padding: var(--espacio-xl) 0;
  background: var(--color-crema);
}

.creditos .container {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--espacio-m);
}

.creditos__titulo {
  color: var(--color-verde);
  text-align: center;
  margin-bottom: var(--espacio-l);
}

.creditos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-l);
}

.credito-card {
  background: var(--color-blanco);
  border-radius: var(--radio);
  padding: var(--espacio-m);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
}

.credito-card__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
}

.credito-card__pais {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gris);
}

.credito-card__nombre {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--color-verde);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.credito-card__equipo {
  font-size: 0.9rem;
  color: var(--color-texto);
  line-height: 1.6;
}

/* ── Coordinación general del Proyecto ── */
.coord {
  background: var(--color-fondo);
  padding: var(--espacio-xl) 0 var(--espacio-m);
  scroll-margin-top: var(--header-h);
}

.coord__titulo {
  text-align: left;
  font-family: var(--font-cuerpo);
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #707070;
  opacity: 1;
  margin-bottom: var(--espacio-l);
}

.coord__bloque {
  margin-bottom: var(--espacio-l);
}

.coord__bloque--bnc {
  max-width: calc(50% - (var(--espacio-xl) / 2));
}

.coord__subtitulo {
  text-align: left;
  font-family: var(--font-cuerpo);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.75px;
  color: #707070;
  opacity: 1;
  margin-bottom: var(--espacio-s);
}

.coord__nombre {
  text-align: left;
  font-family: var(--font-titulo);
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  letter-spacing: 0;
  color: #707070;
  opacity: 1;
  margin: 0;
}

.coord__cargo {
  text-align: left;
  font-family: var(--font-titulo);
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: #9d9d9d;
  opacity: 1;
  margin: 0 0 var(--espacio-xs);
}

.coord__linea {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid #c1c1c1;
  opacity: 1;
  margin: 0 0 var(--espacio-s);
}

.coord__separador {
  border: none;
  border-top: 1px dashed #707070;
  opacity: 1;
  margin: var(--espacio-m) 0;
}

.coord__bloque:has(+ .coord__separador) {
  margin-bottom: 0;
}

.coord__col .coord__bloque:last-child {
  margin-bottom: 0;
}

.coord__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-xl);
}

.coord__col {
  display: flex;
  flex-direction: column;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pres-inner {
    padding-left: var(--espacio-m);
    padding-right: var(--espacio-m);
  }

  .pres-textura-izq {
    display: none;
  }

  .pres-bloque-cita {
    grid-template-columns: 1fr;
    gap: var(--espacio-l);
  }

  .pres-cita {
    width: 100%;
    font-size: 20px;
    line-height: 28px;
  }

  .pres-autores {
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-m);
  }

  .creditos__grid {
    grid-template-columns: 1fr;
  }

  .coord__bloque--bnc {
    max-width: 100%;
  }

  .coord__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 560px) {
  .pres-titulo {
    font-size: 24px;
    line-height: 32px;
  }
}