body.generales { background: #f6f2eb; }
.generales-intro {
  background: linear-gradient(120deg, #0d1b0b, #263324 67%, #644d3a);
  color: #fff;
  padding: clamp(40px, 7vw, 80px) 0;
  overflow-x: clip;
}
.generales-intro .container {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 0.65fr);
  align-items: center;
  gap: 3rem;
}
.generales-intro h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.06; }
.generales-intro p { color: #f5f1e8; font-size: 1.17rem; max-width: 60ch; }
.generales-intro .kicker { color: #e8c895; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-primary); }
.generales-intro img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; }
.generales-content { padding: clamp(40px, 6vw, 76px) 0; }
.generales-content .container { max-width: 800px; }
.generales-content h2 { text-align: left; margin-bottom: 1rem; }
.generales-content h2::after { left: 0; transform: none; }
.generales-content .intro { max-width: 65ch; }
.generales-form { padding: clamp(24px, 5vw, 48px); background: #fff; border-radius: 12px; box-shadow: var(--box-shadow-lg); }
.generales-amounts { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin-bottom: 1.5rem; }
.generales-amounts legend { font-weight: 700; margin-bottom: 0.75rem; }
.generales-amounts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.generales-amounts label { display: block; padding: 0.8rem 1.1rem; cursor: pointer; border: 2px solid #785a46; border-radius: 6px; font-weight: 700; }
.generales-amounts input:checked + label { background: #0d1b0b; color: white; border-color: #0d1b0b; }
.generales-amounts input:focus-visible + label { outline: 3px solid #b8862f; outline-offset: 3px; }
.generales-form .field { margin-bottom: 1rem; }
.generales-form .field > label { display: block; margin-bottom: 0.25rem; font-weight: 700; }
.generales-form .field input { width: 100%; min-height: 48px; padding: 0.65rem 0.85rem; border: 1px solid #836f5e; border-radius: 5px; font: inherit; }
.generales-form .checks { margin: 1.5rem 0; }
.generales-form .checks label { display: flex; gap: 0.7rem; margin-bottom: 1rem; align-items: flex-start; }
.generales-form .checks input { margin-top: 0.35rem; flex: 0 0 auto; }
.generales-form button[type="submit"] { width: 100%; white-space: normal; }
.generales-form button[disabled] { opacity: 0.7; cursor: wait; }
.generales-error { padding: 1rem; margin-bottom: 1rem; border: 1px solid #aa3340; border-radius: 5px; color: #76202c; }
.generales-error[hidden], .generales-form [hidden] { display: none !important; }
.generales-trust { font-size: 0.9rem; text-align: center; color: #555; margin-top: 1rem; }
@media (max-width: 700px) {
  .generales-intro .container { grid-template-columns: 1fr; }
  .generales-intro img { max-height: 300px; object-position: left center; }
}

/* Secuencia editorial del 29N: portada, carillas interiores y papeleta. */
.generales-cinema-copy { min-width: 0; }
.generales-intro .generales-headline {
  font-size: clamp(2.55rem, 4.3vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 1.07;
  margin: 1.4rem 0 1.8rem;
}
.generales-headline-line { display: block; }
.generales-latido {
  display: inline-block;
  font-style: normal;
  color: #e8c895;
  transform-origin: center 62%;
  text-shadow: 0 0 0 transparent;
}
.generales-construye { display: inline-block; perspective: 600px; }
.generales-construye .generales-bloque {
  display: inline-block;
  transform-origin: 50% 90%;
}
.generales-contigo { display: inline-flex; white-space: nowrap; }
.generales-con,
.generales-tigo { display: inline-block; }
.generales-story { width: 100%; max-width: 420px; justify-self: center; margin: 0; }
.generales-film {
  position: relative;
  left: 0;
  width: var(--film-w, 100%);
  height: var(--film-h, auto);
  aspect-ratio: 1100 / 1558;
  isolation: isolate;
  perspective: 1100px;
  transform-origin: right center;
  overflow: hidden;
  border-radius: 9px;
  background: #f5f1e8;
  box-shadow: 0 30px 65px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255,255,255,.18);
}
.generales-film img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.generales-film-interior {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background: #f5f1e8;
}
.generales-film .generales-film-interior img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.generales-film-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--film-w, 100%);
  z-index: 3;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.generales-film-cover img { width: 100%; height: 100%; object-fit: cover; }
.generales-film-ballot {
  position: absolute;
  inset: 4% 12% 4%;
  z-index: 4;
  overflow: hidden;
  background: #fff;
  color: #111;
  opacity: 0;
  box-shadow: 0 16px 35px rgba(12,15,14,.35);
  transform: translateY(8%) scale(.94);
}
.generales-film .generales-ballot-page { object-fit: fill; }
.generales-ballot-name {
  position: absolute;
  z-index: 2;
  top: 23%;
  left: 3%;
  right: 3%;
  padding: .55rem .65rem;
  background: #11221b;
  color: #e8c895;
  font: 700 .75rem/1.4 var(--font-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-110%) scale(1.2);
}
.generales-ballot-name span { color: #fff; margin-left: .5rem; letter-spacing: 0; }
.generales-ballot-zoom {
  position: absolute;
  z-index: 3;
  top: 22%;
  left: -3%;
  width: 106%;
  padding: .7rem;
  background: #fff;
  border: 1px solid #ccc7bd;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  opacity: 0;
  transform: scale(.78);
  transform-origin: 10% 35%;
}
.generales-ballot-zoom span {
  display: block;
  color: #614231;
  font: 800 .7rem/1.4 var(--font-primary);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.generales-film .generales-ballot-zoom img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.generales-film-caption {
  display: grid;
  gap: .25rem;
  margin-top: .9rem;
  font: 600 .78rem/1.5 var(--font-primary);
  color: #fff;
}
.generales-film-caption span { color: #e8c895; text-transform: uppercase; letter-spacing: .12em; }
.generales-film-caption strong { font-weight: 500; }
.generales-film-documento {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 0;
  border-bottom: 1px solid #e8c895;
  color: #fff;
  font: 700 .86rem/1.5 var(--font-primary);
  visibility: visible;
}
.generales-film-documento:hover { color: #e8c895; }
.generales-film-documento:focus-visible { outline: 3px solid #e8c895; outline-offset: 3px; }
.generales-film-controls { display: flex; gap: .5rem; margin-top: .75rem; }
.generales-film-controls button {
  appearance: none;
  border: 1px solid #dfceae;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font: 700 .75rem/1.4 var(--font-primary);
  padding: .55rem .85rem;
  cursor: pointer;
}
.generales-film-controls button:focus-visible { outline: 3px solid #e8c895; outline-offset: 3px; }
.generales-film-controls button:hover { background: rgba(255,255,255,.15); }

/* Anima solo cuando el JS está listo. Sin JS, la portada queda visible. */
.generales-intro.cine-ready .generales-bloque {
  animation: construye .85s cubic-bezier(.14,.89,.35,1.06) both;
  animation-delay: calc(.16s + var(--paso) * .085s);
}
.generales-intro.cine-ready .generales-con {
  animation: abrazo-con 1.3s cubic-bezier(.16,.92,.25,1) .85s both;
}
.generales-intro.cine-ready .generales-tigo {
  animation: abrazo-tigo 1.3s cubic-bezier(.16,.92,.25,1) .85s both;
}
.generales-intro.cine-ready .generales-latido {
  animation: latido 2.6s ease-in-out 1.7s infinite;
}
.generales-intro.cine-film-ready .generales-film {
  animation: escenario-abre 14s cubic-bezier(.45,0,.22,1) both;
}
.generales-intro.cine-film-ready .generales-film-cover {
  animation: portada-abre 14s cubic-bezier(.45,0,.22,1) both, portada-funde 14s linear both;
}
.generales-intro.cine-film-ready .generales-film-ballot {
  animation: papeleta-entra 14s cubic-bezier(.22,.8,.28,1) both;
}
.generales-intro.cine-film-ready .generales-ballot-name {
  animation: nombre-llega 14s cubic-bezier(.2,.85,.25,1) both;
}
.generales-intro.cine-film-ready .generales-ballot-zoom {
  animation: nombre-acercamiento 14s cubic-bezier(.2,.8,.3,1) both;
}
.generales-intro.cine-film-ready .generales-film-documento {
  animation: enlace-diptico 14s ease-out both;
}
.generales-intro.cine-ready:not(.cine-film-ready) .generales-film-documento {
  visibility: hidden;
  opacity: 0;
}
.generales-intro.cine-paused *, .generales-intro.cine-paused *::before,
.generales-intro.cine-paused *::after { animation-play-state: paused !important; }

@keyframes construye {
  from { opacity: 0; transform: translateY(-.8em) rotateX(-80deg) scale(.55); filter: blur(6px); }
  65% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes abrazo-con {
  from { opacity: 0; transform: translateX(-1.8em) rotateY(-38deg); }
  75% { opacity: 1; transform: translateX(.06em); }
  to { opacity: 1; transform: none; }
}
@keyframes abrazo-tigo {
  from { opacity: 0; transform: translateX(1.8em) rotateY(38deg); }
  75% { opacity: 1; transform: translateX(-.06em); }
  to { opacity: 1; transform: none; }
}
@keyframes latido {
  0%, 34%, 52%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  40% { transform: scale(1.08); text-shadow: 0 0 18px rgba(232,200,149,.6); }
  46% { transform: scale(1.03); text-shadow: 0 0 7px rgba(232,200,149,.2); }
}
@keyframes escenario-abre {
  0%, 18%, 59%, 100% {
    width: var(--film-w);
    left: 0;
    transform: scale(1);
  }
  36%, 44% {
    width: calc(var(--film-w) * 2);
    left: calc(var(--film-shift) - var(--film-w));
    transform: scale(var(--film-open-scale));
  }
}
@keyframes portada-abre {
  0%, 18%, 59%, 100% { transform: rotateY(0); }
  36%, 44% { transform: rotateY(-175deg); }
}
@keyframes portada-funde {
  0%, 66% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes papeleta-entra {
  0%, 66% { opacity: 0; transform: translateY(8%) scale(.94); }
  78%, 100% { opacity: 1; transform: none; }
}
@keyframes nombre-llega {
  0%, 72% { opacity: 0; transform: translateX(-110%) scale(1.2); }
  84% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: none; }
}
@keyframes nombre-acercamiento {
  0%, 86% { opacity: 0; transform: scale(.78); }
  94% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}
@keyframes enlace-diptico {
  0%, 92% { opacity: 0; visibility: hidden; transform: translateY(8px); }
  100% { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 700px) {
  .generales-story { max-width: min(78vw, 340px); }
  .generales-intro .generales-headline { font-size: clamp(2.35rem, 9vw, 3.15rem); }
}
@media (min-width: 701px) {
  .generales-intro.cine-film-ready .generales-cinema-copy {
    animation: texto-cede 14s ease-in-out both;
  }
}
@keyframes texto-cede {
  0%, 18%, 59%, 100% { opacity: 1; filter: blur(0); }
  34%, 45% { opacity: .09; filter: blur(5px); }
}
@media (max-width: 380px) {
  .generales-intro .generales-headline { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .generales-intro *, .generales-intro *::before,
  .generales-intro *::after { animation: none !important; transition: none !important; }
  .generales-film-cover { display: none; }
  .generales-film-interior { visibility: hidden; }
  .generales-film-ballot { inset: 0; opacity: 1; transform: none; }
  .generales-ballot-zoom { opacity: 1; transform: none; }
  .generales-film-controls { display: none; }
}