/*
 * PORTAFOLIO — Creativity Media
 * ===========================================================================
 *
 * Se carga SOLO en el archivo del portafolio, en el archivo de un servicio y en
 * la ficha de un proyecto (functions.php la encola de forma condicional). Servir
 * el CSS del mosaico en una página de aviso legal es peso que alguien paga de su
 * plan de datos.
 */

/* =========================================================================
 * 1. FILTROS POR SERVICIO
 * ====================================================================== */

.cm-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-top: var(--e-4);
}

.cm-filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* objetivo táctil: estas fichas se pulsan con el pulgar */
  padding: 0 18px;
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-pildora);
  color: var(--hueso);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.cm-filtro:hover { border-color: var(--ambar); color: var(--ambar); }

/*
 * El filtro activo se pinta relleno. El color NO es la única señal: el HTML
 * lleva aria-current="page", que es lo que anuncia el estado a quien no
 * distingue el ámbar del gris.
 */
.cm-filtro.es-activo {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--ambar-tinta);
}
.cm-filtro.es-activo:hover { background: var(--ambar-oscuro); border-color: var(--ambar-oscuro); color: var(--ambar-tinta); }


/* =========================================================================
 * 2. MOSAICO DEL ARCHIVO
 * ====================================================================== *
 * Doce columnas y un patrón que se repite cada CINCO piezas:
 *   7 + 5   (dos piezas grandes, alturas altas)
 *   4 + 4 + 4  (tres piezas menores, altura corta)
 *
 * Que el patrón se repita —y no sea aleatorio— es lo que lo hace leerse como
 * una decisión de maqueta. Una irregularidad sin ritmo parece un error de CSS.
 *
 * Las páginas se sirven de diez en diez (dos bloques completos), así que solo la
 * última puede quedar incompleta.
 */

.cm-mosaico-archivo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-2);
}

.cm-mosaico-archivo > * { grid-column: span 4; min-height: clamp(280px, 26vw, 360px); }
.cm-mosaico-archivo > *:nth-child(5n + 1) { grid-column: span 7; min-height: clamp(360px, 40vw, 540px); }
.cm-mosaico-archivo > *:nth-child(5n + 2) { grid-column: span 5; min-height: clamp(360px, 40vw, 540px); }

/*
 * Si la última fila se queda con una sola pieza de cuatro columnas, se estira a
 * lo ancho en vez de dejar dos tercios de fila vacíos. Es el mismo problema que
 * el huérfano de una rejilla de dos columnas, resuelto sin JavaScript.
 */
.cm-mosaico-archivo > *:last-child:nth-child(5n + 3) { grid-column: span 12; }
.cm-mosaico-archivo > *:last-child:nth-child(5n + 4) { grid-column: span 8; }

@media (max-width: 900px) {
  /* Un mosaico irregular en 360 px de ancho no es irregular: es ilegible. */
  .cm-mosaico-archivo > *,
  .cm-mosaico-archivo > *:nth-child(5n + 1),
  .cm-mosaico-archivo > *:nth-child(5n + 2),
  .cm-mosaico-archivo > *:last-child:nth-child(5n + 3),
  .cm-mosaico-archivo > *:last-child:nth-child(5n + 4) { grid-column: 1 / -1; }

  .cm-mosaico-archivo > * { min-height: 300px; }
  .cm-mosaico-archivo > *:nth-child(5n + 1) { min-height: 380px; }
}


/* =========================================================================
 * 3. HERO DE LA FICHA
 * ====================================================================== */

.cm-ficha-hero {
  display: flex;
  align-items: flex-end;
  /* Algo menos que la pantalla completa a propósito: se deja ver el borde de la
     sección siguiente para que se entienda que la página continúa. Un hero de
     100 svh en una ficha hace que mucha gente crea que ahí se acaba. */
  min-height: 86vh;
  min-height: 86svh;
  padding-block: calc(var(--alto-cabecera) + var(--e-6)) var(--e-6);
  background: var(--degradado-pieza);
}

.cm-ficha-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Respaldo sin fotografía: la misma pieza diseñada que en las tarjetas, a
   escala de página. */
.cm-ficha-hero__inicial {
  position: absolute;
  right: -.04em;
  bottom: -.24em;
  font-family: var(--fuente-display);
  font-size: clamp(14rem, 44vw, 34rem);
  line-height: .8;
  color: var(--brasa);
  opacity: .2;
  user-select: none;
}

.cm-ficha-hero__cuerpo { width: 100%; }

.cm-ficha-hero__titulo {
  margin: 0 0 var(--e-3);
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: var(--interlineado-cartel);
  letter-spacing: var(--tracking-cartel);
  color: var(--hueso);
  max-width: 18ch;
}

/* Cliente y año. Van como <dl> en el HTML porque son datos con nombre, no
   adornos: un lector de pantalla anuncia «Cliente: …», que es la información. */
.cm-ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: 0;
}
.cm-ficha-datos__par { display: flex; flex-direction: column; gap: 2px; }
.cm-ficha-datos dt {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ambar);
}
.cm-ficha-datos dd { margin: 0; font-size: var(--fs-h4); color: var(--hueso); }


/* =========================================================================
 * 4. CUERPO DE LA FICHA
 * ====================================================================== */

.cm-ficha-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--e-5) var(--e-7);
  align-items: start;
}

.cm-ficha-cuerpo__texto .cm-entradilla { margin-bottom: var(--e-4); color: var(--apagado); }

/* La columna lateral acompaña la lectura: los servicios y el botón siguen
   visibles mientras se lee la historia del proyecto, que es cuando el visitante
   se está convenciendo. */
.cm-ficha-cuerpo__lado { position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); }

.cm-ficha-lado__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: var(--e-2);
}

/* Los sellos van sobre papel: heredan el color de la sección clara. */
.cm-ficha-cuerpo__lado .cm-sello { color: var(--tinta); text-decoration: none; }
.cm-ficha-cuerpo__lado a.cm-sello:hover { background: var(--tinta); border-color: var(--tinta); color: var(--hueso); }

.cm-ficha-lado__cta { margin-top: var(--e-4); }

@media (max-width: 900px) {
  .cm-ficha-cuerpo { grid-template-columns: 1fr; }
  /* En una columna, un elemento fijo se queda pegado tapando el texto. */
  .cm-ficha-cuerpo__lado { position: static; }
}


/* =========================================================================
 * 5. VÍDEO Y GALERÍA
 * ====================================================================== */

/*
 * Marco de proporción para el iframe que devuelve el proveedor. Sin él, el
 * iframe llega con un alto fijo en píxeles y en móvil deja franjas negras
 * arriba y abajo, o peor, se descuadra al girar el teléfono.
 */
.cm-marco-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-pieza);
  overflow: hidden;
  background: var(--negro-suave);
}
.cm-marco-video iframe,
.cm-marco-video video,
.cm-marco-video embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cm-ficha-video { margin-bottom: var(--e-6); }

/*
 * `.cm-galeria.cm-escalona` Y NO `.cm-galeria` A SECAS — CHOQUE DE NOMBRES.
 *
 * Hay DOS componentes distintos llamados `cm-galeria` en este tema:
 *   · el <div class="cm-galeria cm-escalona"> de la FICHA de proyecto, que es
 *     el de aqui abajo, y
 *   · la <section class="cm-galeria"> del mosaico de portafolio
 *     (inc/portafolio-mosaico.php + assets/css/galeria.css).
 *
 * En la portada nunca coincidian porque esta hoja no se encola alli. Pero en
 * /proyectos/ se cargan las dos, y esta regla convertia la SECCION del mosaico
 * en una rejilla de dos columnas: su contenido se quedaba a media anchura
 * (304 px de 624 medidos a 660, y una casilla de 73 px a 768). Llevaba ahi
 * desde antes de tocar nada; salio al medir el carril.
 *
 * `cm-escalona` es la marca que YA distingue a los dos, asi que se usa esa en
 * vez de inventar una clase nueva. Es el mismo error que el comentario de la
 * cabecera de galeria.css cuenta con `cm-mosaico`: en este tema los choques de
 * nombre no son teoricos.
 */
.cm-galeria.cm-escalona {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}
/* Cada tercera imagen a lo ancho. Una tira de imágenes todas iguales se hojea
   sin mirar; con una grande cada dos, el ojo se detiene. */
.cm-galeria__pieza--ancha { grid-column: 1 / -1; }

.cm-galeria__pieza { margin: 0; }
.cm-galeria__pieza img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-pieza);
}
.cm-galeria__pieza--ancha img { aspect-ratio: 16 / 9; }

.cm-galeria__pieza figcaption {
  margin-top: var(--e-1);
  font-size: var(--fs-chico);
  color: var(--humo);
}

@media (max-width: 640px) {
  /* En vertical, dos columnas de fotografía son dos fotografías que no se ven. */
  /*
   * `minmax(0, 1fr)` Y NO `1fr` A SECAS.
   *
   * `1fr` es `minmax(auto, 1fr)`: el minimo de la pista es el MINIMO
   * INTRINSECO de lo que lleva dentro, asi que la pista no puede
   * encogerse por debajo de su contenido. Y aqui hay un choque de
   * nombres heredado: esta `.cm-galeria` es la de la FICHA de proyecto,
   * pero en /proyectos/ esta hoja se carga a la vez que galeria.css y
   * alcanza tambien a la seccion `.cm-galeria` del mosaico. Desde que
   * esa seccion lleva un carril horizontal, su contenido mide 8.361 px:
   * la pista se iba a 1.440 (el tope de `.cm-contenedor`) dentro de una
   * pantalla de 390, y el carril quedaba recortado sin forma de
   * arrastrarlo. Con el minimo en 0 la pista obedece al ancho de la
   * pantalla y el carril desplaza lo suyo por dentro. Medido: 1.440 -> 354.
   */
  .cm-galeria.cm-escalona { grid-template-columns: minmax(0, 1fr); }
  .cm-galeria__pieza img,
  .cm-galeria__pieza--ancha img { aspect-ratio: 4 / 3; }
}


/* =========================================================================
 * 6. CITA DEL CLIENTE
 * ====================================================================== */

.cm-cita { margin: 0; text-align: left; }

.cm-cita__texto { margin: 0; }
.cm-cita__texto p {
  margin: 0;
  /* En Archivo y no en la tipografía de cartel: una cita larga en mayúsculas
     condensadas no se lee, se descifra. */
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  color: var(--ambar-tinta);
}
.cm-cita__texto p::before { content: '\201C'; }
.cm-cita__texto p::after  { content: '\201D'; }

.cm-cita__autor {
  display: block;
  margin-top: var(--e-3);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ambar-tinta);
}


/* =========================================================================
 * 7. BANDA DE CIERRE
 * ====================================================================== */

.cm-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.cm-cierre__titulo {
  margin: 0;
  font-size: var(--fs-h2);
  color: var(--ambar-tinta);
  max-width: 16ch;
}

.cm-cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

@media (max-width: 640px) {
  .cm-cierre__acciones { width: 100%; flex-direction: column; }
}