/* MDP · Cinematic layer — destilado de landonorris.com / off+brand
 * v1 · 2026-05-15 · efectos de polish premium sobre la base brand existente.
 * Carga AL FINAL (después de scroll-anim.css) para overrides quirúrgicos.
 * NO toca tokens, NO reemplaza nada — solo añade refinement.
 */

/* ============ 1 · (REMOVED) FLUID FONT SCALING ============
   El patrón Lando reescala el html font-size por viewport. En MDP rompe el balance
   de cards y proporciones que ya están afinadas a px/rem fijos. Descartado.
   Si en el futuro se quiere reactivar, hacerlo opt-in con .fluid-type wrapper. */

/* ============ 2 · HIDE SCROLLBARS PREMIUM ============
   Lando esconde scrollbars en todos los navegadores. Look limpio editorial. */
body ::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; }
html { scrollbar-width: none; }

/* ============ 3 · BRAND SELECTION ============
   Selección de texto con cantera. Detail editorial. */
::selection {
  background-color: var(--cantera);
  color: var(--paper);
  text-shadow: none;
}
::-moz-selection {
  background-color: var(--cantera);
  color: var(--paper);
  text-shadow: none;
}
img::selection,
svg::selection { background: transparent; }

/* En secciones dark, invertir el selection */
[data-section-theme="dark"] ::selection,
[data-section-theme="dark"] ::-moz-selection {
  background-color: var(--paper);
  color: var(--carbon);
}

/* ============ 4 · LINE CLIP-PATH REVEAL ============
   Patrón Lando: cada línea de texto se enmascara con polygon, se "limpia" al hacer scroll-in.
   Más sofisticado que un fade-up — el texto literalmente emerge desde detrás de su propio baseline.
   Aplica a .reveal-line · funciona con motion.js (.is-in lo dispara). */
.reveal-line {
  display: block;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transform: translateY(0.4em);
  opacity: 0;
  transition:
    clip-path 1100ms var(--ease-cine-strong, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 900ms var(--ease-cine-strong, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 700ms ease-out;
  will-change: clip-path, transform;
}
.reveal-line.is-in {
  clip-path: polygon(0 -2%, 0 102%, 100% 102%, 100% -2%);
  transform: translateY(0);
  opacity: 1;
}

/* Stagger de líneas para párrafos multi-línea */
.reveal-line.d-1 { transition-delay: 80ms; }
.reveal-line.d-2 { transition-delay: 160ms; }
.reveal-line.d-3 { transition-delay: 240ms; }
.reveal-line.d-4 { transition-delay: 320ms; }

/* ============ 5 · SCROLL (smooth removido por jank en Windows) ============
   scroll-behavior: smooth introduce micro-lag visible al usar la rueda del mouse en Windows.
   Mantengo scroll-padding-top para que los hash-links no queden tapados por el chrome.
   Reveal-line se anula bajo prefers-reduced-motion para accesibilidad. */
html {
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-line {
    clip-path: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ============ 6 · MARQUEE INFINITE (reutilizable) ============
   Pattern Lando: strips de logos/texto que se deslizan infinitamente.
   Usar como: <div class="cine-marquee"><div class="cine-marquee-track"> items × N </div></div>
   El track debe contener el set DUPLICADO para loop seamless. */
@keyframes cineMarqueeLeft  { to { transform: translateX(-50%); } }
@keyframes cineMarqueeRight { to { transform: translateX(50%); } }

.cine-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.cine-marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: cineMarqueeLeft 40s linear infinite;
}
.cine-marquee[data-dir="right"] .cine-marquee-track {
  animation-name: cineMarqueeRight;
}
.cine-marquee:hover .cine-marquee-track {
  animation-play-state: paused;
}

/* ============ 7 · SECTION THEME SWITCHING ============
   Lando swap chrome color cuando entras a section dark/light vía data-nav-theme-target.
   Acá uso data-section-theme. motion.js (o un IntersectionObserver) puede leerlo y aplicar
   data-theme="dark" al body cuando la section entra en viewport.
   Por ahora solo declara los estilos base — el switcher se puede activar después. */
[data-section-theme="dark"] {
  background-color: var(--carbon);
  color: var(--paper-on-dark);
}
[data-section-theme="light"] {
  background-color: var(--paper);
  color: var(--ink-900);
}

/* ============ 8 · BTN TEXT-SHADOW OFFSET (kinetic accent) ============
   Lando usa text-shadow vertical para "duplicar" el texto del botón con offset.
   Se activa en hover · da sensación de profundidad / kinetic typo.
   Aplicar con clase .btn-kinetic o atributo data-kinetic-text. */
.btn-kinetic,
[data-kinetic-text] {
  display: inline-block;
  transition: text-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-kinetic:hover,
[data-kinetic-text]:hover {
  text-shadow: 0 0.85em 0 currentColor;
  transform: translateY(-0.85em);
}

/* ============ 9 · POINTER UTILITIES (Lando style) ============ */
[pointer-none] { pointer-events: none; user-select: none; }
[pointer-auto] { pointer-events: auto; }
[overflow-clip="x"] { overflow-x: clip; }
[overflow-clip="y"] { overflow-y: clip; }

/* ============ 9.5 · HIDE PROJECT CARD LABELS (post 2026-05-15) ============
   "OBRAS ACTIVAS · X" (ps-chapter) y "OBRA · 014 · CANCÚN" (ps-num)
   no aportan valor con la arquitectura editorial nueva — el render + headline ya orientan. */
.ps-chapter,
.ps-num {
  display: none !important;
}

/* ============ 9.6 · PROJECT CARD · más chico + más liquid glass (post 2026-05-15) ============
   User feedback: card domina demasiado y tapa el render. Achicar + transparentar más.
   - Grid columns: 560px → 420px (deja 40% más de aire al render)
   - Padding más compacto
   - Font sizes reducidos en lead + specs
   - Background opacity 0.32 → 0.16 · brightness 0.92 → 0.98
   - Blur sube de 32px → 36px para que el efecto glass sea más visible */
.project-spread .ps-content {
  grid-template-columns: minmax(0, 420px) 1fr !important;
  padding: 28px var(--pad-x) 40px !important;
}
.project-spread[data-align="right"] .ps-content {
  grid-template-columns: 1fr minmax(0, 420px) !important;
}
.project-spread .ps-card {
  padding: 22px 26px 24px !important;
  max-height: calc(100vh - 100px) !important;
  /* Glass optimizado: blur 24 (era 40) baja costo GPU manteniendo el efecto.
     Background opacity 0.20 (era 0.16) compensa la legibilidad. */
  background:
    linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
    rgba(14, 12, 10, 0.20) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  contain: layout style paint;
}
.project-spread .ps-card .ps-header {
  margin-bottom: 12px !important;
  gap: 4px !important;
}
.project-spread .ps-card .ps-name {
  font-size: clamp(38px, 4.4vw, 64px) !important;
  letter-spacing: -0.03em !important;
}
.project-spread .ps-card .ps-loc {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
}
.project-spread .ps-card .ps-lead {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.42 !important;
  margin-bottom: 14px !important;
}
.project-spread .ps-card .ps-dropcap {
  font-size: 2.4em !important;
}
.project-spread .ps-card .ps-specs {
  gap: 0 !important;
}
.project-spread .ps-card .ps-specs > div {
  padding: 8px 0 !important;
  font-size: 12px !important;
}
.project-spread .ps-card .ps-specs dt {
  font-size: 9.5px !important;
  letter-spacing: 0.26em !important;
}
.project-spread .ps-card .ps-specs dd {
  font-size: 12px !important;
}
.project-spread .ps-card .ps-cta {
  margin-top: 12px !important;
}
.project-spread .ps-card .ps-cta .btn-link {
  font-size: 10px !important;
  letter-spacing: 0.32em !important;
}

/* Mobile: card respira full-width pero sigue más translúcido */
@media (max-width: 767px) {
  .project-spread .ps-card {
    background: rgba(14, 12, 10, 0.22) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  }
}

/* ============ 10 · FOCUS RING CINEMATIC ============ */
:where(:focus-visible) {
  outline: 2px solid var(--cantera);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============ 10.5 · PERFORMANCE OPTIMIZATIONS (post 2026-05-15) ============
   - content-visibility: auto en secciones below-fold permite al browser saltar render hasta scroll-in.
   - contain en heroes y bloques con backdrop-filter aísla el reflow cost.
   - GPU-promote elementos con transforms (no layout). */
.act-divisions,
.act-oficio-alianzas,
.act-catalogo,
.act-servicios,
.act-metodo,
.act-contacto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Hero y chrome NO usan content-visibility · están always-on */
.act-hero,
.chrome,
.menu-overlay { content-visibility: visible; }

/* ============ 10.6 · COMPACTAR OFICIO + ALIANZAS (post 2026-05-15) ============
   Section pedía 16vh + 13vh padding + 78vh map + alianzas pesada. Total >150vh.
   Comprimir a ~100vh el bloque mapa+stats (alianzas queda below, sigue siendo su tramo). */
.act-oficio-alianzas {
  padding: clamp(56px, 7vh, 88px) 0 clamp(48px, 6vh, 80px) !important;
}
.ofa-intro {
  margin-bottom: clamp(24px, 3vh, 40px) !important;
}
.ofa-title {
  font-size: clamp(28px, 3.4vw, 48px) !important;
  margin-top: 8px !important;
}
.ofa-map-stats {
  margin-bottom: clamp(24px, 3vh, 40px) !important;
  gap: clamp(24px, 3vw, 56px) !important;
}
.ofa-map-frame {
  max-height: 56vh !important;
  max-width: calc(56vh * (2029 / 1326)) !important;
}
.ofa-stat {
  padding: 16px 18px !important;
  margin-bottom: 8px !important;
  gap: 6px !important;
}
.ofa-stat-val {
  font-size: clamp(32px, 2.8vw, 46px) !important;
  line-height: 0.9 !important;
}
.ofa-stats-head {
  padding-bottom: 12px !important;
  margin-bottom: 10px !important;
}
.ofa-map-caption {
  margin-top: 10px !important;
  font-size: 10px !important;
}

/* Alianzas: separación más ajustada · ya viene below-the-fold, no necesita 96px margin */
.ofa-alianzas {
  margin-top: clamp(32px, 4vh, 56px) !important;
  padding-top: clamp(28px, 3.5vh, 48px) !important;
}
.ofa-alianzas-head {
  margin-bottom: clamp(24px, 3vh, 40px) !important;
}

/* Heavy animated elements get GPU compositor hint solo en hover/scroll-active */
.ps-hero,
.dh-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce paint area de backdrop-filter en mobile (muy caro) */
@media (max-width: 767px) {
  .project-spread .ps-card {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  }
}

/* ============ 11 · SCATTER COLLAGE (post 2026-05-15) ============
   Patrón Lando estilo "moodboard scattered": imágenes absolute positioned,
   tamaños distintos, rotaciones sutiles, gaps intencionales. Estática · sin JS.
   Integrada antes del Método como prelude visual. */
.cine-scatter {
  position: relative;
  background: var(--carbon);
  padding: 8vh 4vw 12vh;
  overflow: hidden;
  contain: layout style paint;
}
.cine-scatter-grid {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 16 / 11;
}
.cine-scatter .cs-img {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.55),
    0 8px 16px -4px rgba(0,0,0,0.32);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cine-scatter .cs-img:hover {
  transform: scale(1.03) rotate(0deg) !important;
  z-index: 20;
  box-shadow:
    0 40px 80px -16px rgba(0,0,0,0.75),
    0 16px 32px -4px rgba(0,0,0,0.42);
}

/* Posiciones aleatorias intencionalmente desordenadas · gaps blancos */
.cine-scatter .cs-1 { top: 0%;   left: 2%;   width: 20%; height: 38%; transform: rotate(-2deg);  z-index: 3; }
.cine-scatter .cs-2 { top: 6%;   left: 28%;  width: 22%; height: 30%; transform: rotate(1.5deg); z-index: 5; }
.cine-scatter .cs-3 { top: 2%;   right: 4%;  width: 26%; height: 42%; transform: rotate(2deg);   z-index: 4; }
.cine-scatter .cs-4 { top: 44%;  left: 8%;   width: 18%; height: 30%; transform: rotate(1deg);   z-index: 6; }
.cine-scatter .cs-5 { top: 40%;  left: 34%;  width: 24%; height: 36%; transform: rotate(-1.5deg);z-index: 2; }
.cine-scatter .cs-6 { top: 50%;  right: 2%;  width: 20%; height: 32%; transform: rotate(2.5deg); z-index: 7; }
.cine-scatter .cs-7 { bottom: 2%; left: 4%;  width: 24%; height: 32%; transform: rotate(-2deg);  z-index: 4; }
.cine-scatter .cs-8 { bottom: 4%; left: 38%; width: 22%; height: 30%; transform: rotate(1.5deg); z-index: 5; }
.cine-scatter .cs-9 { bottom: 0%; right: 8%; width: 22%; height: 34%; transform: rotate(-2deg);  z-index: 3; }

/* Mobile: convertir en grid plano sin rotaciones */
@media (max-width: 767px) {
  .cine-scatter { padding: 6vh 4vw 8vh; }
  .cine-scatter-grid {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cine-scatter .cs-img {
    position: relative;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    transform: none !important;
  }
  .cine-scatter .cs-img:nth-child(odd) { aspect-ratio: 3 / 4; }
}

/* ============ 11.OLD · HORIZONTAL SCROLL PORTFOLIO (deprecated) ============
   Quitado del HTML 2026-05-15 — se trababa al scrollear. Reemplazado por .cine-scatter.
   Mantengo CSS comentado por si se quiere reactivar en futuro:
   ----------------------------------------------------------------*/
.cine-hscroll {
  position: relative;
  height: 380vh;
  background: var(--carbon);
  color: var(--paper-on-dark);
  overflow: clip;
}
.cine-hscroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cine-hscroll-head {
  position: absolute;
  top: 6vh;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 clamp(24px, 4vw, 72px);
  pointer-events: none;
}
.cine-hscroll-head .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.cine-hscroll-head .title {
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.04em;
  color: var(--paper-on-dark);
  line-height: 0.95;
}
.cine-hscroll-head .title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--cantera);
}
.cine-hscroll-track {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  padding: 0 clamp(48px, 8vw, 160px);
  align-items: center;
  height: 78vh;
  will-change: transform;
  transform: translateX(0);
  transition: transform 60ms linear;
}
.cine-hscroll-item {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.cine-hscroll-item .cine-eyebrow {
  position: absolute;
  top: -1.4rem;
  left: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.cine-hscroll-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cine-hscroll-item:hover img {
  transform: scale(1.04);
}
.cine-hscroll-item.size-portrait  { width: clamp(220px, 26vw, 460px); height: 62vh; }
.cine-hscroll-item.size-landscape { width: clamp(320px, 40vw, 700px); height: 48vh; }
.cine-hscroll-item.size-square    { width: clamp(260px, 30vw, 520px); height: 50vh; }
.cine-hscroll-item.size-tall      { width: clamp(200px, 22vw, 400px); height: 70vh; }
.cine-hscroll-item.size-wide      { width: clamp(340px, 48vw, 820px); height: 44vh; }

.cine-hscroll-callout {
  flex: 0 0 auto;
  width: clamp(280px, 32vw, 520px);
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  align-items: flex-start;
}
.cine-hscroll-callout .quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--paper-on-dark);
  text-wrap: balance;
}
.cine-hscroll-callout .quote em {
  font-style: italic;
  color: var(--cantera);
  font-weight: 400;
}
.cine-hscroll-callout .signature {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}

/* Mobile fallback: native horizontal scroll, no pin */
@media (max-width: 767px) {
  .cine-hscroll { height: auto; }
  .cine-hscroll-pin {
    position: relative;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14vh 0 8vh;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cine-hscroll-track {
    transform: none !important;
    height: 60vh;
    padding: 0 6vw;
    gap: 16px;
  }
  .cine-hscroll-item { scroll-snap-align: center; }
  .cine-hscroll-item.size-portrait,
  .cine-hscroll-item.size-landscape,
  .cine-hscroll-item.size-square,
  .cine-hscroll-item.size-tall,
  .cine-hscroll-item.size-wide {
    width: 78vw;
    height: 55vh;
  }
  .cine-hscroll-callout {
    width: 78vw;
    padding: 1.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    height: 55vh;
    justify-content: center;
  }
  .cine-hscroll-head {
    position: relative;
    top: 0;
    padding: 4vh 6vw 2vh;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============ 12 · FAN OF CARDS (Lando what's up on socials) ============
   Abanico de cards radiales · cada una rotada outward · centro elevado.
   Hover en cualquier card: se levanta + endereza + escala. */
.cine-fan {
  padding: 10vh 0 14vh;
  background: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cine-fan-title {
  font-family: var(--sans-display);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 128px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--ink-900);
  margin: 0 auto 5vh;
  max-width: 1100px;
  text-transform: uppercase;
}
.cine-fan-title .ital {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.02em;
  margin-top: -0.05em;
}
.cine-fan-deck {
  position: relative;
  height: 56vh;
  max-height: 620px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  perspective: 1200px;
}
.cine-fan-card {
  position: absolute;
  bottom: 0;
  width: clamp(160px, 17vw, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  transform-origin: bottom center;
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.28),
    0 8px 16px -4px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1),
              z-index 0ms 350ms;
  cursor: pointer;
}
.cine-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cine-fan-card:nth-child(1) { transform: rotate(-22deg) translate(-22vw, 4vh); z-index: 1; }
.cine-fan-card:nth-child(2) { transform: rotate(-11deg) translate(-11vw, -2vh); z-index: 2; }
.cine-fan-card:nth-child(3) { transform: rotate(0deg)   translate(0, -6vh);     z-index: 3; }
.cine-fan-card:nth-child(4) { transform: rotate(11deg)  translate(11vw, -2vh);  z-index: 2; }
.cine-fan-card:nth-child(5) { transform: rotate(22deg)  translate(22vw, 4vh);   z-index: 1; }

.cine-fan-card:hover {
  transform: translateY(-8vh) rotate(0deg) scale(1.08) !important;
  z-index: 10 !important;
  transition-delay: 0ms;
  box-shadow:
    0 40px 80px -16px rgba(0,0,0,0.42),
    0 16px 32px -4px rgba(0,0,0,0.24);
}

.cine-fan-cta {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--ink-700);
  margin: 6vh auto 2vh;
  max-width: 600px;
  letter-spacing: -0.01em;
}
.cine-fan-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.cine-fan-links a {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-900);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color 300ms, color 300ms;
}
.cine-fan-links a:hover {
  border-bottom-color: var(--cantera);
  color: var(--cantera);
}

@media (max-width: 767px) {
  .cine-fan-deck { height: 48vh; max-height: 420px; }
  .cine-fan-card:nth-child(1) { transform: rotate(-18deg) translate(-26vw, 6vh); }
  .cine-fan-card:nth-child(2) { transform: rotate(-9deg)  translate(-13vw, -1vh); }
  .cine-fan-card:nth-child(4) { transform: rotate(9deg)   translate(13vw, -1vh); }
  .cine-fan-card:nth-child(5) { transform: rotate(18deg)  translate(26vw, 6vh); }
}