/* Lúcida · página «Redes para tu marca» (/redes/)
   Va después de /styles.css, que pone todo lo común: letras, colores, cabecera, portada, tira de reels,
   preguntas, focos de luz, pie y reproductor.
   Aquí solo lo propio de esta página: qué entra cada mes, cómo es un mes y Sombrilla.
   La demostración «Del perfil al calendario» usa /demos/demo-redes.css (la misma del inicio). La luz sigue en imágenes WebP (las de styles.css): portada, cierre y pie. */

/* la página en la que estás y el contacto mínimo («Hablamos») van en /styles.css, iguales en todas las páginas */

/* ---------- qué entra cada mes ---------- */
.incl { padding-top: var(--section); }
.incl__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 28px; align-items: start; }
.incl__head { grid-column: 1 / 6; grid-row: 1 / span 2; display: grid; gap: 20px; position: sticky; top: 96px; align-self: start; }
.incl__lead { font-size: var(--s3); line-height: 1.3; letter-spacing: -0.01em; max-width: 22ch; color: var(--muted); }
.incl__list { grid-column: 6 / 13; }
.incl__item, .incl__out {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gut); row-gap: 6px; align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 24px);
}
.incl__item + .incl__item { border-top: 4px solid var(--surface); }
.incl__name { font-family: var(--f-display); font-weight: 400; font-size: var(--s3); line-height: 1.1; letter-spacing: -0.01em; }
.incl__item p, .incl__out p { max-width: 38ch; }
/* lo que no entra: aparte, sobre el gris claro */
.incl__out { grid-column: 6 / 13; background: var(--surface); padding-inline: clamp(18px, 2vw, 28px); }
@media (max-width: 899px) {
  .incl__head { grid-column: 1 / -1; grid-row: auto; position: static; }
  .incl__list, .incl__out { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .incl__item, .incl__out { grid-template-columns: 1fr; }
}

/* ---------- cómo es un mes contigo: un verbo cada vez (el mismo dibujo que tenía «Cómo trabajamos» del inicio) ---------- */
.mes { padding-top: var(--section); }
.mes .h2 { margin-bottom: clamp(20px, 2.4vw, 36px); }
.mes__step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline;
  padding-block: clamp(14px, 1.6vw, 22px);
}
.mes__step + .mes__step { border-top: 4px solid var(--surface); }
.mes__verb { grid-column: 1 / 5; font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.025em; }
.mes__step p { grid-column: 5 / 11; max-width: 40ch; font-size: var(--s3); line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 899px) {
  .mes__step { grid-template-columns: 1fr; row-gap: 8px; }
  .mes__verb, .mes__step p { grid-column: 1; }
  .mes__step p { font-size: var(--s4); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .mes__step { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gut); }
  .mes__verb { grid-column: 1; }
  .mes__step p { grid-column: 2; }
}

/* ---------- Sombrilla: todas las piezas de una marca ---------- */
.sb { padding-top: var(--section); }
.sb__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 20px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.sb__head .h2 { grid-column: 1 / 7; }
.sb__copy { grid-column: 8 / 13; display: grid; gap: 14px; max-width: 46ch; }
@media (max-width: 1099px) {
  .sb__head .h2, .sb__copy { grid-column: 1 / -1; }
  .sb__copy { max-width: 60ch; }
}
.sb__rows { display: grid; row-gap: clamp(28px, 3vw, 44px); }
/* cada fila a la misma altura: el ancho de cada pieza va según su formato (--r = ancho / alto) */
.sb__row { display: flex; gap: var(--gut); align-items: flex-start; }
.sb__item { flex: var(--r) 1 0; min-width: 0; }
.sb__media { position: relative; display: block; overflow: clip; background: var(--surface-2); }
.sb__media img { width: 100%; height: auto; }
.sb .work__media { aspect-ratio: 9 / 16; }
.sb .work__media::after { content: "Ver entero"; }
.sb__cap {
  margin-top: 10px; min-height: 44px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  font-size: var(--s5); line-height: 1.35; color: var(--muted);
}
.sb__cap > span:first-child { color: var(--ink); font-weight: 560; }
.sb__item .sb__cap { align-items: flex-start; }

/* el carrusel: se desliza como en Instagram; con script, además, contador y botones */
.carrusel__track {
  display: flex; aspect-ratio: 4 / 5;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__track:focus-visible { outline-offset: -3px; }
.carrusel__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.carrusel__cap { align-items: center; }
.carrusel__count { margin-left: 8px; color: var(--muted); font-weight: 420; font-variant-numeric: tabular-nums; }
.carrusel__nav { display: inline-flex; gap: 6px; }
.carrusel__nav[hidden] { display: none; }
.carrusel__btn {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease;
}
.carrusel__btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
  transform: translate(-65%, -50%) rotate(45deg);
}
.carrusel__btn[data-dir="-1"]::before { transform: translate(-35%, -50%) rotate(-135deg); }
.carrusel__btn:active { transform: scale(0.94); }
.carrusel__btn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .carrusel__btn:not(:disabled):hover { background: var(--lila); } }

/* en el móvil: dos columnas; el carrusel, el anuncio cuadrado y la primera publicación a todo el ancho */
@media (max-width: 759px) {
  .sb__head .h2, .sb__copy { grid-column: 1 / -1; }
  .sb__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gut); align-items: start; }
  .sb__item--carrusel { grid-column: 1 / -1; order: -1; }
  .sb__item--first { grid-column: 1 / -1; order: 1; }
  .sb__item--wide { grid-column: 1 / -1; order: 1; }
  .sb__item--escritorio { display: none; }
}


/* la etiqueta como en la tira del inicio: el cliente en negrita y, debajo, el trabajo */
.etiqueta { font-size: var(--s5); line-height: 1.4; }
.etiqueta__cliente { display: block; font-weight: 560; color: var(--ink); }
.etiqueta__trabajo { display: block; color: var(--muted); }
/* el reproductor solo tiene aquí el reel de Sombrilla: sin «Anterior» ni «Siguiente» */
.player__btn[data-step] { display: none; }