/* =========================================================
   Erotiplástica — estilos
   ========================================================= */

/* Tipografías (Google Fonts)
   Anton: condensada para títulos, en la línea de los diseños de Oceanario.
   Archivo: para el texto corrido, legible en pantalla. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600&display=swap");


/* ---------- 1. Variables ----------
   Si cambian un color, lo cambian acá y se actualiza en todo el sitio. */
:root {
  --negro: #0a0a0a;
  --negro-2: #161616;      /* fondo de tarjetas y header, apenas más claro */
  --blanco: #f2f2f2;       /* blanco roto: menos agresivo que #fff sobre negro */
  --gris: #a8a8a8;         /* textos secundarios */
  --fucsia: #e62873;       /* contraste ~5,7:1 sobre negro: sirve incluso para texto */

  --fuente-titulos: "Anton", Impact, "Arial Narrow", sans-serif;
  --fuente-texto: "Archivo", system-ui, sans-serif;

  --ancho-max: 1100px;
  --margen: 1rem;          /* margen lateral en celular */
}


/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;    /* 17px */
  line-height: 1.6;
}

/* Textura de fondo (solo en las páginas con <body class="con-textura">: obra y proceso).
   Va en una capa fija detrás del contenido: se queda quieta al hacer scroll
   y funciona también en iPhone (a diferencia de background-attachment: fixed). */
.con-textura::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--negro) url("../img/textura-fondo.png") center / cover no-repeat;
  opacity: 0.35;           /* subí o bajá este número para más o menos textura */
  pointer-events: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 400;        /* Anton ya es gruesa; no hay que ponerla en bold */
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

a {
  color: var(--fucsia);
}

a:hover {
  color: var(--blanco);
}

/* Contorno visible al navegar con teclado (no lo saquen) */
:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 3px;
}


/* ---------- 3. Header y menú ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--margen);
  background: var(--negro);
  border-bottom: 1px solid var(--fucsia);
}

.logo {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fucsia);
}

/* Botón hamburguesa */
.btn-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;             /* 44px: tamaño mínimo cómodo para el dedo */
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.btn-linea {
  display: block;
  height: 3px;
  background: var(--fucsia);
  transition: transform 0.2s, opacity 0.2s;
}

/* Las tres líneas se convierten en una X cuando el menú está abierto */
.btn-menu[aria-expanded="true"] .btn-linea:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.btn-menu[aria-expanded="true"] .btn-linea:nth-child(2) {
  opacity: 0;
}
.btn-menu[aria-expanded="true"] .btn-linea:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Lista del menú (celular: desplegable a lo ancho) */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Solo se oculta si el JavaScript cargó (clase .js en <html>).
   Si el script falla, el menú queda visible y el sitio sigue navegable. */
.js .menu {
  display: none;
}

.js .menu.abierto {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--negro);
  border-bottom: 1px solid var(--fucsia);
  padding: 0.5rem var(--margen) 1rem;
}

.menu a {
  display: block;
  padding: 0.6rem 0;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanco);
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--fucsia);
}


/* ---------- 4. Contenido general ---------- */
main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen);
}

section {
  padding: 3rem 0;
}

h2 {
  font-size: 2rem;
  color: var(--fucsia);
}


/* ---------- 5. Inicio: presentación ---------- */
.presentacion {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid #333;
}

.presentacion h1 {
  /* Grande en escritorio, se achica sola en celular */
  font-size: clamp(2.5rem, 13vw, 8rem);
  color: var(--fucsia);
  margin-bottom: 0.15em;
  overflow-wrap: break-word;  /* red de seguridad si la tipografía no carga */
}

.bajada {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.presentacion p:last-child {
  max-width: 38ch;         /* líneas cortas: se leen mejor */
  font-size: 1.25rem;
  color: var(--gris);
}


/* ---------- 6. Inicio: tarjetas de áreas ---------- */
.areas {
  display: grid;
  gap: 1.5rem;
}

.areas h2 {
  margin-bottom: 0;
}

.tarjeta {
  position: relative;      /* para que el link cubra toda la tarjeta */
  background: var(--negro-2);
  border: 1px solid #333;
  transition: border-color 0.2s;
}

.tarjeta:hover,
.tarjeta:focus-within {
  border-color: var(--fucsia);
}

.tarjeta img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.tarjeta h3 {
  font-size: 1.75rem;
  margin: 1rem 1rem 0.4rem;
}

.tarjeta h3 a {
  color: var(--blanco);
  text-decoration: none;
}

/* Toda la tarjeta es clickeable, pero el link sigue siendo uno solo */
.tarjeta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta:hover h3 a {
  color: var(--fucsia);
}

.tarjeta p {
  margin: 0 1rem 1.25rem;
  color: var(--gris);
}

/* Tarjeta destacada (la obra): imagen apaisada, sin recortar */
.tarjeta--destacada img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #000;
}

.tarjeta--destacada h3 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-top: 0;
}

.etiqueta {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fucsia) !important;
  margin: 1.25rem 1rem 0.25rem !important;
}


/* ---------- 6b. Páginas internas ---------- */

/* Portada de cada página: etiqueta chica + título grande */
.portada {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #333;
}

.etiqueta-portada {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
  margin: 0 0 0.5rem;
}

.portada h1 {
  font-size: clamp(2.5rem, 11vw, 6.5rem);
  color: var(--fucsia);
  overflow-wrap: break-word;
}

.bajada-portada {
  max-width: 40ch;
  font-size: 1.25rem;
  color: var(--gris);
  margin: 0;
}

.portada-img {
  margin-top: 2rem;
  width: 100%;
}

/* Ciclo: próxima fecha destacada */
.proxima {
  border-bottom: 1px solid #333;
}

.proxima-fecha {
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 14vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fucsia);
  margin: 0 0 0.75rem;
}

/* Bloques de texto: líneas de ancho cómodo para leer */
.texto {
  max-width: 65ch;
}

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--fucsia);
  background: var(--negro-2);
  font-size: 1.2rem;
}

blockquote p {
  margin: 0;
}

.lista li {
  margin-bottom: 0.75rem;
}

.nota {
  font-size: 0.95rem;
  color: var(--gris);
}

/* Botón (es un link con forma de botón) */
.boton {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--fucsia);
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--fucsia);
}

.boton:hover {
  background: var(--fucsia);
  color: var(--negro);
}

/* Ficha técnica: dato a la izquierda, valor a la derecha */
.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  margin: 1.5rem 0;
}

.ficha dt {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  color: var(--fucsia);
}

.ficha dd {
  margin: 0;
}

.ficha--angosta {
  max-width: 65ch;
}

/* Fotos con epígrafe */
figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--gris);
}

figure.ancho img {
  width: 100%;
}

/* Galería: una columna en celular, más en pantallas grandes */
.galeria {
  display: grid;
  gap: 1.5rem;
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Tablas */
.tabla-scroll {
  overflow-x: auto;      /* si no entra en el celular, se desliza en vez de romper la página */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

caption {
  text-align: left;
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--fucsia);
  padding-bottom: 0.5rem;
}

th,
td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #333;
  text-align: left;
}

thead th {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 2px solid var(--fucsia);
}

tbody th {
  font-weight: 600;
}

.tablas-talles {
  display: grid;
  gap: 1rem;
}

/* Nosotras */
.dos-columnas {
  display: grid;
  gap: 2rem;
}

.integrantes {
  list-style: none;
  padding: 0;
}

.integrantes li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #333;
}

.integrantes strong {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--fucsia);
}

/* Contacto */
.contactos {
  list-style: none;
  padding: 0;
}

.contactos li {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  border-bottom: 1px solid #333;
}

.contacto-tipo {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  color: var(--gris);
}

.contactos a {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-family: var(--fuente-titulos);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Videos propios: en fila, uno al lado del otro.
   En compu entran dos; en celular cada uno ocupa casi todo el ancho
   y se pasan deslizando hacia el costado. */
.videos {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* al soltar, queda centrado en un video */
  padding-bottom: 0.75rem;         /* lugar para la barra de scroll */
  scrollbar-color: var(--fucsia) transparent;
}

.videos figure {
  flex: 0 0 85%;                   /* asoma el siguiente: da la pista de que se desliza */
  scroll-snap-align: start;
}

.videos video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

@media (min-width: 768px) {
  .videos figure {
    flex-basis: calc(50% - 0.5rem); /* dos por fila; si agregan más, se scrollea */
  }
}

/* Video de YouTube con proporción 16:9 */
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}


/* ---------- 7. Footer ---------- */
.pie {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 2rem var(--margen);
  border-top: 1px solid var(--fucsia);
  color: var(--gris);
}

.redes {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
}

.redes a {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.25rem;
}


/* ---------- 8. Pantallas grandes (tablet / compu) ---------- */
@media (min-width: 768px) {
  :root {
    --margen: 2rem;
  }

  .btn-menu {
    display: none;
  }

  .js .menu,
  .menu {
    display: flex;
    gap: 1.5rem;
    position: static;
    padding: 0;
    border: 0;
  }

  .menu a {
    font-size: 1.125rem;
    padding: 0.25rem 0;
  }

  .menu a[aria-current="page"] {
    border-bottom: 2px solid var(--fucsia);
  }

  .areas {
    grid-template-columns: repeat(2, 1fr);
  }

  /* La obra ocupa todo el ancho: imagen a la izquierda, texto a la derecha */
  .tarjeta--destacada {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
  }

  .areas h2 {
    grid-column: 1 / -1;   /* el título ocupa todo el ancho */
  }

  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }

  .tablas-talles {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .dos-columnas {
    grid-template-columns: 2fr 3fr;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Galería de 3 fotos: tres columnas. Galería de 2: dos columnas */
  .galeria:has(> figure:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }

  .galeria--dos {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---------- 9. Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}