/* =========================================================================
   INSPIRAN.DO — Contenido / Portafolio de Redes Sociales
   Hoja específica de la página /contenido/. Se carga DESPUÉS de styles.css,
   así que reutiliza sus tokens (--black, --paper, --rule…), su header,
   su footer, .container, .section, .eyebrow, .reveal, etc.

   Solo añade lo propio de esta página: la galería de reels con autoplay
   silencioso al hacer scroll. La lógica vive en contenido.js.
   ========================================================================= */

/* --- Hero de contenido ---------------------------------------------------- */
.cnt-hero { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cnt-hero__title { font-size: var(--fs-display); max-width: 16ch; margin-bottom: var(--space-m); }
.cnt-hero__lead { font-size: var(--fs-lead); color: var(--text-soft); max-width: 46ch; }
.cnt-hero__lead strong { color: var(--text); font-weight: 600; }

/* --- Método (reutiliza .method de styles.css; solo el flujo horizontal) --- */

/* --- Región oscura del portafolio ---------------------------------------- */
/* Cada categoría es .section.is-dark: juntas forman una galería continua en
   negro donde los reels resaltan (recurso "bloque que rompe el ritmo"). */
.cnt-cat { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cnt-cat + .cnt-cat { padding-top: 0; }
.cnt-cat__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cnt-cat__title { font-size: var(--fs-h1); letter-spacing: -0.02em; }
.cnt-cat__lead { margin-top: var(--space-s); color: var(--text-soft); max-width: 48ch; font-size: var(--fs-small); }

/* --- Módulo de cliente ---------------------------------------------------- */
.cnt-module + .cnt-module {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--rule);
}
.cnt-module__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-bottom: var(--space-m);
}
.cnt-module__name { font-size: var(--fs-h3); letter-spacing: -0.01em; }
.cnt-module__handle { font-size: var(--fs-small); color: var(--text-soft); font-weight: 500; }

/* --- Etiqueta de fila (Reels / Historias) --------------------------------- */
.cnt-rowlabel {
  font-size: var(--fs-detail); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
  margin: var(--space-m) 0 var(--space-xs);
}
.cnt-rowlabel:first-child { margin-top: 0; }

/* --- Cuadrícula de reels verticales --------------------------------------- */
.cnt-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cnt-reels--four { grid-template-columns: repeat(4, 1fr); }

.cnt-tile {
  position: relative; margin: 0; overflow: hidden;
  background: #141414; border: 1px solid var(--rule-strong);
  aspect-ratio: 9 / 16;
}
.cnt-tile--hist { aspect-ratio: 3 / 4; }        /* historias tipo carrusel (Finzen) */
.cnt-tile video, .cnt-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnt-tile video { cursor: pointer; }

/* Etiqueta de sonido sobre el reel */
.cnt-tile__tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: rgba(11,11,11,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 4px 8px; pointer-events: none; transition: opacity var(--t-base) var(--ease);
}
.cnt-tile.is-sound .cnt-tile__tag { background: var(--paper); color: var(--black); }

/* --- Fila de fotos -------------------------------------------------------- */
.cnt-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cnt-photos figure { position: relative; margin: 0; overflow: hidden; background: #141414; border: 1px solid var(--rule-strong); aspect-ratio: 4 / 5; }
.cnt-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Subproyecto anidado -------------------------------------------------- */
.cnt-sub { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px dashed var(--rule-strong); }
.cnt-sub__label {
  display: inline-block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--black); background: var(--stone);
  padding: 4px 9px; margin-bottom: var(--space-s);
}
.cnt-sub__name { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--space-s); }
.cnt-sub__name span { color: var(--text-soft); font-weight: 500; font-size: var(--fs-small); margin-left: 0.5rem; }

/* --- Asesorías: fila de un reel por cliente, etiquetado con su @ ---------- */
.cnt-ase { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cnt-ase__item { margin: 0; }
.cnt-ase__handle {
  display: block; margin-top: var(--space-2xs);
  font-size: var(--fs-small); color: var(--text-soft); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================================
   RESPONSIVE — en móvil las cuadrículas verticales se deslizan (como reels)
   ========================================================================= */
@media (max-width: 760px) {
  .cnt-ase { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
}
@media (max-width: 640px) {
  .cnt-reels, .cnt-reels--four, .cnt-photos {
    display: flex; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cnt-reels::-webkit-scrollbar, .cnt-reels--four::-webkit-scrollbar, .cnt-photos::-webkit-scrollbar { display: none; }
  .cnt-tile { flex: 0 0 64%; scroll-snap-align: start; }
  .cnt-tile--hist { flex: 0 0 56%; }
  .cnt-photos figure { flex: 0 0 64%; scroll-snap-align: start; }
  .cnt-ase { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .cnt-ase::-webkit-scrollbar { display: none; }
  .cnt-ase__item { flex: 0 0 60%; scroll-snap-align: start; }
}