/* ═══ Galerías infinitas (Email · Ads) ═══ */
.g-rows { padding-bottom: clamp(5rem, 10vw, 8rem); }
.g-row { margin-top: clamp(3.5rem, 7vw, 6rem); }
.g-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; padding: 0 var(--gutter) 1.4rem; }
.g-head h2 { font-family: Syne, sans-serif; font-weight: 800; color: var(--ink); font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: .95; letter-spacing: -.04em; }
.g-head h2 sup { font-family: "Plus Jakarta Sans", sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .4rem; vertical-align: super; }
.g-head p { max-width: 38ch; font-size: .9rem; line-height: 1.55; }

/* cinta infinita: se detiene con el mouse */
.marquee { position: relative; overflow: hidden; padding: 1.2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { display: flex; gap: clamp(.8rem, 1.4vw, 1.4rem); width: max-content; animation: slide var(--dur, 60s) linear infinite; }
.marquee.rev .track { animation-direction: reverse; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(var(--shift, -50%)); } }

.g-card { position: relative; flex: none; height: var(--h); aspect-ratio: var(--ar); border-radius: 12px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); background: var(--deep-2); --lx: 50%; --ly: 50%;
  transition: border-color .5s, box-shadow .6s var(--ease), transform .6s var(--ease); }
.g-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(.72) saturate(.85); transition: filter .6s var(--ease); }
.g-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(260px circle at var(--lx) var(--ly), rgb(6 182 212 / .25), transparent 60%); }
.g-card:hover, .g-card:focus-visible { border-color: rgb(6 182 212 / .45); box-shadow: 0 30px 80px -30px rgb(6 182 212 / .55); transform: translateY(-6px); }
.g-card:hover img, .g-card:focus-visible img { filter: none; }
.g-card:hover::after { opacity: 1; }
.g-tag { position: absolute; left: .7rem; bottom: .7rem; z-index: 2; padding: .3rem .65rem; border-radius: 999px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: rgb(5 8 20 / .65); border: 1px solid var(--line); backdrop-filter: blur(8px); }

.row-email .g-card { --h: clamp(330px, 34vw, 470px); --ar: 3 / 5; }
.row-ads .g-card { --h: clamp(260px, 26vw, 400px); }
.row-social .g-card { --h: clamp(240px, 24vw, 360px); }
.row-thumbs .g-card { --h: clamp(150px, 14vw, 220px); --ar: 16 / 9; }

/* fila sin imágenes todavía */
.g-empty { margin: 0 var(--gutter); position: relative; min-height: 220px; border-radius: 16px; border: 1px dashed rgb(6 182 212 / .35); overflow: hidden; }

/* caso de estudio destacado (Email) */
.g-case { margin: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px;
  background: linear-gradient(160deg, rgb(6 182 212 / .1), rgb(37 99 235 / .05) 55%, rgb(79 70 229 / .08)); box-shadow: inset 0 0 0 1px rgb(6 182 212 / .3);
  transition: box-shadow .6s var(--ease); }
.g-case:hover { box-shadow: inset 0 0 0 1px rgb(6 182 212 / .8), 0 40px 120px -40px rgb(6 182 212 / .55); }
.gc-txt { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.gc-txt small { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--neon); }
.gc-txt b { font-family: Syne, sans-serif; font-weight: 800; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.02; letter-spacing: -.04em; }
.gc-txt em { font-style: normal; font-size: .92rem; line-height: 1.5; }
.gc-stats { display: flex; gap: clamp(1rem, 2vw, 1.8rem); }
.gc-stats span { display: flex; flex-direction: column; gap: .2rem; white-space: nowrap; }
.gc-stats b { font-family: Syne, sans-serif; font-weight: 800; color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -.03em; }
.gc-stats i { font-style: normal; font-size: .75rem; }
.gc-go { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; color: var(--ink); font-weight: 600; font-size: .9rem; }
.gc-go i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, #67e8f9, var(--neon)); color: var(--deep); font-style: normal; transition: transform .6s var(--ease); }
.g-case:hover .gc-go i { transform: rotate(-45deg); }
@media (max-width: 1000px) { .g-case { grid-template-columns: 1fr; } }

/* flujos automatizados */
.fl-flow { margin: 0 var(--gutter) clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px; border: 1px solid var(--line); background: rgb(255 255 255 / .02); }
.fl-meta { min-width: 0; position: sticky; top: 7rem; }
.fl-meta small { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--neon); }
.fl-meta h3 { margin-top: .6rem; font-family: Syne, sans-serif; font-weight: 800; color: var(--ink); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.03em; }
.fl-meta p { margin-top: .7rem; font-size: .92rem; line-height: 1.55; }
.fl-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.2rem); }
.fl-steps li { position: relative; min-width: 0; }
.fl-steps li + li::before { content: "→"; position: absolute; left: calc(-1 * clamp(1.4rem, 2.4vw, 2.2rem)); width: clamp(1.4rem, 2.4vw, 2.2rem); top: 30%; text-align: center; color: var(--neon); font-size: 1.1rem; }
.fl-card { display: block; width: 100%; aspect-ratio: 3 / 5; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--deep-2); cursor: zoom-in;
  transition: border-color .5s, box-shadow .6s var(--ease), transform .6s var(--ease); }
.fl-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fl-card:hover, .fl-card:focus-visible { border-color: rgb(6 182 212 / .5); box-shadow: 0 30px 80px -30px rgb(6 182 212 / .55); transform: translateY(-6px); }
.fl-step { display: block; margin-top: .8rem; font-size: .82rem; line-height: 1.4; color: var(--ink); }
.fl-step b { display: block; margin-bottom: .2rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--neon); }
@media (max-width: 1000px) {
  .fl-flow { grid-template-columns: 1fr; }
  .fl-meta { position: static; }
}
@media (max-width: 640px) {
  .fl-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .fl-steps li { scroll-snap-align: start; }
}