/* Estilos de la página de inicio (index.html): hero, intro, manifiesto, talleres, hecho en Espora y equipo.
   También los usa hecho-en-espora.html (lista de todos los proyectos).
   Las marcas de esquina y el footer están en footer-y-marcas.css. */

/* ---------- 01 · HERO ---------- */
.hero {
  --alto: calc(100vh - var(--marco) - var(--franja));
  --lineas: 23;                         /* líneas de texto que cubren la pantalla */
  position: relative;
  height: var(--alto);
  min-height: 420px;
  margin-bottom: var(--franja);
  overflow: hidden;
}

.hero__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleY(-1);                /* foto volteada verticalmente (flip vertical). Para volver a la original, borra esta línea. */
}

.hero__texto {
  position: relative;
  /* el tamaño sale del alto disponible: 23 líneas = pantalla completa */
  --interlinea: calc(var(--alto) / var(--lineas));
  font-size: calc(var(--interlinea) * 1.22);
  line-height: var(--interlinea);
  font-weight: 500;
  width: 33.333vw;                      /* un tercio del ancho de la pantalla */
  letter-spacing: .06em;                /* espaciado entre letras */
  margin-left: 20px;                    /* margen izquierdo */
  color: #d9d9d6;                       /* gris claro. Para volver al blanco: #fff */
}

.hero__texto s {
  text-decoration-thickness: .07em;
}

/* Responsivo (móvil): el texto usa casi todo el ancho; el script ajusta la letra para que sigan 23 líneas */
@media (max-width: 767px) {
  .hero__texto {
    width: auto;
    margin-right: 20px;
    letter-spacing: .12em;              /* más espacio entre letras */
  }
}

/* ---------- 02 · INTRO ---------- */
.intro {
  position: relative;
  /* ocupa justo la pantalla bajo el menú: texto y foto se ven completos */
  min-height: calc(100vh - var(--marco));
  display: flex;
  flex-direction: column;
  padding: 9vh 0 6vh;
}
.intro .marca { top: 3vh; }

.intro__texto {
  width: 68%;
  margin-left: 20px;                    /* margen izquierdo */
  padding: 2vh 0 4vh;
  font-size: clamp(1.1rem, 2.1vw, 2.8rem);
  line-height: 1.22;
  font-weight: 500;
  color: var(--texto-suave);
}

.intro__foto {
  flex: 1 1 0;                          /* la foto usa el alto que queda en pantalla */
  min-height: 0;
  width: 39%;
  margin: 0 0 0 57%;
}
.intro__foto img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }

/* Responsivo (tablet y móvil): la sección mide lo que mide su contenido, sin espacio vacío debajo */
@media (max-width: 1100px) {
  .intro { min-height: 0; padding-bottom: 6vh; }
  .intro__foto { flex: none; width: auto; margin: 2vh 0 0; }   /* foto a todo el ancho, hasta la barra lateral */
  .intro__foto img { height: auto; }
}

/* Responsivo (móvil): el texto usa todo el ancho y la foto queda debajo, grande */
@media (max-width: 767px) {
  .intro { padding: 12vh 0 5vh; }
  .intro__texto { width: auto; margin-right: 20px; }
  .intro__foto {
    margin: 2vh 0 0;
  }
}

/* Responsivo (tablet horizontal): intro y foto caben en una pantalla; la foto se ajusta al alto que queda y queda pegada a la derecha */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 600px) {
  .intro { min-height: calc(100vh - var(--marco)); padding: 9vh 0 4vh; }
  .intro__foto { flex: 1 1 0; min-height: 0; width: auto; margin: 0 0 0 20px; }
  .intro__foto img { width: 100%; height: 100%; object-fit: contain; object-position: right top; }
}

/* ---------- 04 · TALLERES ---------- */
.talleres {
  background: var(--gris-fondo);          /* #F2F2F0 */
  padding: 4.5vh 2vw 6vh 2.8vw;
}

.talleres__titulo { margin: 0 0 4vh; line-height: 0; }
.talleres__titulo img { width: 227px; height: auto; }

.talleres__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3vw;
}
.talleres__lista a { display: block; }
.talleres__lista img { width: 100%; height: auto; transition: opacity .2s; }
.talleres__lista a:hover img { opacity: .85; }

/* Responsivo (tablet vertical y móvil): afiches en 2 columnas, para que se lean los textos de cada afiche */
@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) {
  .talleres__lista { grid-template-columns: repeat(2, 1fr); gap: 3vw; }
}

/* Responsivo (móvil): título TALLERES más chico, a una altura parecida a la letra del hero (≈35 px) */
@media (max-width: 767px) {
  .talleres__titulo img { width: 130px; }

  /* Carrusel (prueba): los 4 afiches en una fila que se desliza con el dedo; el siguiente asoma a la derecha */
  .talleres__lista {
    display: flex;
    gap: 4vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .talleres__lista::-webkit-scrollbar { display: none; }
  .talleres__lista li { flex: 0 0 68%; scroll-snap-align: start; }
}

/* ---------- 05 · HECHO EN ESPORA ---------- */
.hecho { padding: 12vh 2vw 10vh 2.8vw; }

.hecho__titulo { margin: 0 0 8vh; line-height: 0; }
.hecho__titulo img { width: 395px; height: auto; }

.pieza { margin-bottom: 16vh; }
.pieza:last-child { margin-bottom: 0; }

.pieza__fila {
  display: flex;
  align-items: flex-end;                  /* el texto queda al pie de la imagen */
  gap: 4.2vw;
  margin-left: 13%;
}
.pieza--inversa .pieza__fila {
  flex-direction: row-reverse;
  justify-content: flex-start;            /* con row-reverse, esto empuja a la derecha */
  margin-left: 0;
  margin-right: 5%;
}

.pieza__imagen {
  position: relative;
  flex: 0 0 24.6%;
  margin: 0;
}
.pieza__imagen > img:first-child { width: 100%; height: auto; }

/* El trazo se superpone a la imagen. Sus valores (--trazo-ancho, --trazo-x, --trazo-y)
   se escriben en el HTML, dentro de cada pieza, para que sean independientes. */
.pieza__trazo {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--trazo-ancho, 140%);
  max-width: none;
  transform: translate(calc(-50% + var(--trazo-x, 0%)), calc(-50% + var(--trazo-y, 0%)));
  pointer-events: none;
}

.pieza__texto {
  flex: 0 1 30%;
  font-size: clamp(.8rem, 1.05vw, 1.3rem);
  line-height: 1.3;
  font-weight: 400;
}
.pieza__texto h3 { margin: 0 0 .3em; font-size: 1.15em; font-weight: 500; }
.pieza__texto a { display: block; width: fit-content; }
.pieza__texto a:hover { text-decoration: line-through; text-decoration-thickness: .08em; }  /* tachado instantáneo, sin animación */

/* Responsivo (tablet vertical): imagen más grande y texto más legible, en la misma fila */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .pieza__fila { margin-left: 0; }
  .pieza--inversa .pieza__fila { margin-right: 0; }
  .pieza__imagen { flex: 0 0 38%; }
  .pieza__texto { flex: 1 1 0; font-size: 1rem; }
  .pieza { margin-bottom: 10vh; }
}

/* Responsivo (móvil): cada pieza va en una columna (imagen arriba, texto abajo); la imagen alterna izquierda y derecha.
   Los trazos se mantienen (más chicos si hace falta) y se quitan las descripciones: queda solo el título. */
@media (max-width: 767px) {
  .hecho { padding: 8vh 20px 8vh 20px; }
  .hecho__titulo img { width: 200px; }
  .hecho__cabecera { margin-bottom: 5vh; gap: 12px; }
  .hecho__todo { padding: .7em 1em; }

  .pieza { margin-bottom: 8vh; }
  .pieza__fila,
  .pieza--inversa .pieza__fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5vh;
    margin: 0;
  }
  .pieza--inversa .pieza__fila { align-items: flex-end; }
  .pieza__imagen { flex: none; width: 62%; }
  .hecho { overflow-x: clip; }          /* un trazo que se pasa del borde no ensancha la página */
  .pieza__texto { flex: none; width: 100%; font-size: .95rem; }
  .pieza__texto p { display: none; }     /* sin descripción en móvil */
  /* El título va al lado contrario de su imagen, para compensar */
  .pieza__texto { display: flex; justify-content: flex-end; text-align: right; }   /* text-align: si el título ocupa 2 líneas, también se alinea al lado contrario */
  .pieza--inversa .pieza__texto { justify-content: flex-start; text-align: left; }
}

/* ---------- 06 · EQUIPO ---------- */
.equipo {
  min-height: calc(100vh - var(--marco) * 1.4);
  padding: 4.5vh 2vw 8vh 2.8vw;
  position: relative;
  isolation: isolate;
  background: var(--blanco);
  color: var(--blanco);
}
/* Fondo con opacidad 95% (cambia el valor de opacity) */
.equipo::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: #555 url("../imagenes/inicio/equipo-fondo.webp") center / cover no-repeat;
  opacity: .95;
}

.equipo__titulo { margin: 0 0 14vh; line-height: 0; }
.equipo__titulo img { width: 167px; height: auto; }

.equipo__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw;
}
.equipo__lista img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.equipo__lista p {
  margin-top: 1.4vh;
  font-size: clamp(.85rem, 1.4vw, 1.7rem);
  font-weight: 400;
}

/* Responsivo (tablet vertical y móvil): el equipo en 2 columnas (2 + 2) */
@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) {
  .equipo { min-height: 0; }
  .equipo__lista { grid-template-columns: repeat(2, 1fr); gap: 5vw 3vw; }
  .equipo__titulo { margin-bottom: 8vh; }
}

/* Responsivo (móvil): título EQUIPO a una altura parecida a la letra del hero (≈35 px) */
@media (max-width: 767px) {
  .equipo { padding: 6vh 20px 8vh; }
  .equipo__titulo { margin-bottom: 6vh; }
  .equipo__titulo img { width: 90px; }
  .equipo__lista p { font-size: .95rem; }
}

/* ---------- 03 · MANIFIESTO ---------- */
.manifiesto {
  position: relative;
  min-height: calc(100vh - var(--marco));
  padding: 9vh 0 10vh 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;                     /* el trazo no se sale del marco */
}

.manifiesto__intro {
  font-size: clamp(.9rem, 1.55vw, 2rem);
  font-weight: 500;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* Las tres palabras. El detalle de cada una se posiciona respecto de la lista,
   así los tres textos aparecen en el mismo lugar. */
.manifiesto__ejes {
  position: relative;
  flex: 1;
  list-style: none;
  margin: 0; padding: 0 0 0 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.eje { width: fit-content; }

.eje__titulo {
  position: relative;
  display: block;
  padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit;
  font-size: clamp(2.4rem, 7.4vw, 9.5rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
}
/* tachado que se dibuja de izquierda a derecha */
.eje__titulo::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%;
  top: 56%;
  height: .045em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.eje__titulo:focus-visible { outline: 2px solid var(--negro); outline-offset: .1em; }

/* Texto que se despliega hacia la derecha */
.eje__detalle {
  position: absolute;
  z-index: 3;                           /* por encima del trazo: el fondo tapa la línea y se lee mejor */
  left: 57%;
  top: 50%;
  width: 38%;
  padding: 1.3vw 1.4vw;
  background: rgba(242, 242, 240, .88); /* #F2F2F0 con 88% de opacidad: el trazo se ve tenue detrás; sube el valor para tapar más */
  font-size: clamp(.85rem, 1.75vw, 2.1rem);
  line-height: 1.25;
  font-weight: 500;
  transform: translateY(-50%);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path .45s ease, opacity .3s ease;
}
.eje__detalle p + p { margin-top: .5em; }
.eje__cita { font-weight: 600; }

/* Estado activo: cursor encima, foco de teclado, o toque (ver scripts/inicio-hero-y-manifiesto.js) */
.eje:hover .eje__titulo::after,
.eje:focus-within .eje__titulo::after,
.eje.is-activo .eje__titulo::after { transform: scaleX(1); }

.eje:hover .eje__detalle,
.eje:focus-within .eje__detalle,
.eje.is-activo .eje__detalle { clip-path: inset(0 0 0 0); opacity: 1; }

/* Trazo dibujado: centrado sobre el recuadro de descripción; sus valores
   (--trazo-ancho, --trazo-x, --trazo-y) se escriben en el HTML. */
.manifiesto__trazo {
  position: absolute;
  left: 76%;
  top: 50%;
  width: var(--trazo-ancho, 22%);
  max-width: none;
  transform: translate(calc(-50% + var(--trazo-x, 0%)), calc(-50% + var(--trazo-y, 0%)));
  pointer-events: none;
  z-index: 2;
}

/* Responsivo (tablet vertical): la sección no ocupa una pantalla entera, así no queda espacio vacío */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .manifiesto { min-height: 0; padding-bottom: 8vh; }
  .manifiesto__ejes { margin: 12vh 0 6vh; }
}

/* Responsivo (móvil): las palabras van una bajo otra y la descripción se abre justo debajo de la palabra tocada.
   El trazo se oculta (no cabe junto al texto). */
@media (max-width: 767px) {
  .manifiesto { min-height: 0; padding: 4vh 0 8vh 20px; }   /* arriba poco espacio: sube la sección, pero la intro se ve completa sin que asome el manifiesto */
  .manifiesto__intro { white-space: normal; padding-right: 20px; }
  .manifiesto__ejes {
    margin-top: 7vh;
    padding: 0 20px 0 0;
    justify-content: flex-start;
    align-items: stretch;
    gap: 3.5vh;
  }
  .eje { width: auto; }
  .eje__titulo { font-size: clamp(2.2rem, 11.5vw, 4rem); }

  .eje__detalle {
    position: static;
    width: auto;
    padding: 0 4vw;
    max-height: 0;
    overflow: hidden;
    transform: none;
    clip-path: none;
    font-size: .95rem;
    transition: max-height .4s ease, opacity .3s ease, padding .4s ease, margin .4s ease;
  }
  .eje:hover .eje__detalle,
  .eje:focus-within .eje__detalle,
  .eje.is-activo .eje__detalle {
    max-height: 40em;
    padding: 4vw;
    margin-top: 2vh;
  }

  .manifiesto__trazo { display: none; }
}

/* Nombre del integrante como enlace: se tacha al pasar el cursor */
.equipo__lista a:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

/* Encabezado de la sección 05: título a la izquierda y botón "ver todo" a la derecha */
.hecho__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8vh;
}
.hecho__cabecera .hecho__titulo { margin: 0; }
.hecho__todo {
  padding: .75em 1.6em;
  border: 1.5px solid var(--negro);
  font-size: clamp(.65rem, .8vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hecho__todo:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

/* Las imágenes de Hecho en Espora y de Equipo también son enlaces */
.pieza__imagen > a { display: block; line-height: 0; }
.pieza__imagen > a > img { width: 100%; height: auto; }
.equipo__lista li > a { display: block; line-height: 0; }

/* Revisión general (tablet y móvil): el botón "ver todo" con letra mínima de 12 px. */
@media (max-width: 1100px) {
  .hecho__todo { font-size: .75rem; }
}