/* Plantilla 8 · Cine. Afiche de estreno: condensada enorme, mayúsculas, carteles 2:3 con título encima. */
:root { --sheet: #121212; --r-card: 4px; --r-field: 6px; --r-sheet: 14px; --line: rgb(255 255 255 / .12); }
main { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.top { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.top-brand { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }

.hero { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 44px 0 10px; }
.presenta { text-transform: uppercase; letter-spacing: .4em; font-size: .78rem; color: var(--ink-2); }
.hero-name { font-weight: 400; text-transform: uppercase; font-size: calc(clamp(3.4rem, 19vw, 9.5rem) * min(var(--ns, 1), var(--ws, 1))); line-height: .88; letter-spacing: .005em; max-width: 12ch;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .hero-name { color: #fff; } }
.hero-slogan { text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: var(--ink-2); max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-logo .logo-img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--accent), 0 0 40px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.js .hero > * { animation: fade-up 1s var(--ease) both; }
.js .hero-name { animation: title-in 1.4s var(--ease) both; }
/* El título se enfoca y se acerca a su tamaño, como en un afiche de estreno (sin animar el espacio entre letras) */
@keyframes title-in { from { opacity: 0; transform: scale(1.12); filter: blur(8px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
.cf-wrap { --cf-card: clamp(170px, 50vw, 280px); }
.cf-card { aspect-ratio: 2 / 3; border-radius: 4px; }
.cf-track { height: calc(var(--cf-card) * 1.5); }
.cf-title { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; }

.shop { margin-top: 34px; }
.shop-title { text-transform: uppercase; font-weight: 400; font-size: clamp(2.6rem, 13vw, 5rem); letter-spacing: .01em; }
.tab { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.grid { gap: 12px; }
.card-hit { position: relative; background: #111; box-shadow: none; border-radius: 4px; }
.card-media { aspect-ratio: 2 / 3; }
/* Título del cartel encima de la foto, con velo para que se lea */
.card-body { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; background: linear-gradient(to top, rgb(0 0 0 / .92) 30%, rgb(0 0 0 / .6) 65%, transparent); }
.card-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
.card-price .price-bs { color: #d6d6d6; }
@media (hover: hover) and (pointer: fine) { .card-hit:hover { box-shadow: 0 0 0 2px var(--accent); } }
.badge-out { text-transform: uppercase; letter-spacing: .1em; }
.extra { background: #111; }
.foot { text-align: center; justify-items: center; }
.foot-name { font-weight: 400; text-transform: uppercase; font-size: 2.2rem; }

@media (min-width: 900px) {
  main { padding: 0 32px; }
  .hero { padding-top: 64px; }
  .cf-wrap { --cf-card: clamp(200px, 17vw, 260px); }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabs { margin: 0 -32px; padding: 8px 32px; }
  .tabs-row { justify-content: center; }
  .cartbar { display: none; }
}
/* Colores a gusto: el nombre en el color de "Títulos" (sin el degradado de la plantilla) */
html[data-pal="personalizado"] .hero-name { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }