/* ═══════════════════════════════════════════════════════════
   style.css — Refactored for Professional UI/UX
   Palette: Orange (#e1963c) · Dark (#121216) · Light (#F4F6F9) · White
   ═══════════════════════════════════════════════════════════ */

/* ── 0. CUSTOM FONT ── */
@font-face {
  font-family: 'Montserrat';
  src: url(../assets/Font/Montserrat-VariableFont_wght.ttf);
  font-display: swap;
}

/* ── 1. DESIGN TOKENS (CSS Variables) ── */
:root {
  /* Palette */
  --bg-color:  #F4F6F9;
  --text:      #FFFFFF;
  --btn:       #e1963c;
  --btn-hover: #c97d29;       /* darker orange for better hover contrast */
  --btn-alpha: rgba(225,150,60,.18);
  --accent:    #0077B6;
  --muted:     #999999;

  /* Dark surfaces */
  --bg:       #121216;
  --surface:  #1a1a20;
  --card:     #22222a;
  --border:   #333340;

  /* Skeleton shimmer */
  --skeleton-bg:        #2a2a35;
  --skeleton-shimmer:   rgba(255,255,255,0.06);
  --skeleton-highlight: rgba(255,255,255,0.04);

  /* Radii */
  --r:       12px;
  --r-sm:    8px;
  --r-chip:  100px;

  /* Spacing scale */
  --sp-xs:   8px;
  --sp-sm:   12px;
  --sp-md:   20px;
  --sp-lg:   32px;
  --sp-xl:   48px;
  --sp-2xl:  64px;

  /* Transitions */
  --dur-fast: 0.15s;
  --dur-base: 0.28s;
  --ease-out: cubic-bezier(0.22,1,0.36,1);

  /* Shadows (dark-mode safe) */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.30);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.55), 0 20px 40px rgba(0,0,0,0.35);
  --shadow-chip:  0 2px 6px rgba(0,0,0,0.35);
}


/* ── 2. RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding:    0;
  margin:     0;
}

html { scroll-behavior: smooth; }

body {
  width:            100%;
  font-family:      'Montserrat', sans-serif;
  background-color: var(--bg-color);
  color:            var(--bg);
  overflow-x:       hidden;
  -webkit-font-smoothing: antialiased;
}

ul, ol  { list-style: none; }
a       { text-decoration: none; color: inherit; }
img     { display: block; max-width: 100%; height: auto; object-fit: cover; object-position: center; }
button  { font-family: inherit; cursor: pointer; }

/* Global Typography (single authoritative definition) */
h2 {
  font-size:   clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color:       var(--bg);
  margin:      0;
  text-align: center;
}
h3 {
  font-size:   clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  color:       var(--bg);
}
h4 {
  font-size:   0.92rem;
  font-weight: 600;
  color:       var(--text);
  margin:      0;
}
p, span {
  font-size:   0.88rem;
  font-weight: 500;
  color:       var(--bg);
  margin:      0;
}
li, a {
  font-size:   medium;
  font-weight: 400;
  color:       var(--text);
}

:focus-visible {
  outline:        2px solid var(--btn);
  outline-offset: 3px;
  border-radius:  3px;
}
:focus:not(:focus-visible) { outline: none; }


/* ── 3. HEADER & NAVIGATION ── */

header {
  position: relative;
  width:     100%;
}

header nav {
  width:           100%;
  height:          10vh;
  min-height:      60px;
  position:        absolute;
  top:             0;
  left:            0;
  z-index:         100;
  display:         flex;
  justify-content: end;
  align-items:     center;
  padding-inline:  clamp(16px, 4vw, 40px);
}

/* Logo */
header nav .headerLogo {
  display:     flex;
  align-items: center;
}
header nav .headerLogo img {
  width:      auto;
  max-height: 42px;
  max-width:  160px;
  object-fit: contain;
}

/* Navbar container */
header nav .navbar {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
}

/* Hamburger button */
header nav .navbar .hamburger {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  width:           44px;
  height:          44px;
  padding:         8px;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  border-radius:   var(--r-sm);
  transition:      background var(--dur-fast) var(--ease-out);
}
header nav .navbar .hamburger:hover {
  background: var(--btn-alpha);
}

header nav .navbar .hamburger span {
  display:          block;
  width:            24px;
  height:           2.5px;
  background-color: var(--btn);
  border-radius:    2px;
  transition:       transform var(--dur-base) var(--ease-out),
                    opacity  var(--dur-base) var(--ease-out);
}

/* Hamburger → X animation */
header nav .navbar .hamburger.active span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
header nav .navbar .hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
header nav .navbar .hamburger.active span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Dropdown menu */
header nav .navbar ul {
  position:         absolute;
  top:              calc(100% + 12px);
  right:            0;
  width:            clamp(220px, 60vw, 300px);
  padding:          20px 24px;
  border-radius:    var(--r);
  background-color: var(--card);
  border:           1px solid var(--border);
  box-shadow:       var(--shadow-card);

  display:         none;
  flex-direction:  column;
  gap:             8px;
  transform:       translateY(-8px);
  transition:      transform var(--dur-base) var(--ease-out),
                   opacity  var(--dur-base) var(--ease-out);
}

header nav .navbar ul.active,
header nav .navbar ul.ulLink.active {
  display:   flex;
  transform: translateY(0);
  opacity:   1;
}

/* Remove old .ulLink transform — handled above */
.ulLink {
  transition: transform var(--dur-base) var(--ease-out),
              opacity   var(--dur-base) var(--ease-out);
}

header nav .navbar ul li {
  display:  inline-block;
  position: relative;
  cursor:   pointer;
  padding-block: 4px;
}

header nav .navbar ul li::after {
  content:          "";
  position:         absolute;
  bottom:           -3px;
  left:             0;
  width:            100%;
  height:           2px;
  background-color: var(--btn);
  border-radius:    2px;
  transform-origin: left;
  transform:        scaleX(0);
  transition:       transform var(--dur-base) var(--ease-out);
}
header nav .navbar ul li:hover::after { transform: scaleX(1); }


/* ── 4. HERO ── */

header .hero {
  width:  100%;
  height: auto;
  position: relative;
}

/* Text readability above any hero image */
header .hero .hero-content,
header .hero h1,
header .hero h2,
header .hero p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.55),
               0 4px 16px rgba(0,0,0,0.35);
}


/* ── 5. MAIN LAYOUT ── */

main { width: 100%; }


/* ── 6. ABOUT SECTION ── */

main .about {
  width:           100%;
  padding:         clamp(28px, 5vw, 60px) clamp(20px, 5vw, 60px);
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             clamp(24px, 4vw, 60px);
  background-color: var(--bg-color);
}

main .about .containerText {
  flex:            1 1 55%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             clamp(20px, 3vw, 40px);
  text-align:      center;
  min-width:       0;
}

main .about .containerImg {
  flex:            1 1 40%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             20px;
  min-width:       0;
}

main .about .containerText p,
main .about .containerText .Presentación_p1 {
  font-size:   1rem;
  font-weight: 500;
  max-width:   52ch;
}

main .about .containerImg .Cartel img {
  width:         clamp(167px, 66%, 268px);
  border-radius: var(--r);
  box-shadow:    var(--shadow-card);
}

main .about .containerImg a {
  display:     flex;
  justify-content: center;
  align-items: center;
}
main .about .containerImg a img {
  width: clamp(60px, 18%, 90px);
}


/* ── 7. CONTACTO SECTION ── */

main .contacto {
  width:              100%;
  padding:            100px;

  background-image:   url(../assets/image/map.svg);
  background-position: center;
  background-repeat:  no-repeat;
  background-size:    contain;
  background-color:   #bbbfc9; /* neutral gray, consistent */

  display:            flex;
  flex-direction:     column;
  justify-content:    center;
  align-items:        center;
  gap:                var(--sp-lg);
}

main .contacto .infoContacto {
  width:           100%;
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             clamp(16px, 3vw, 40px);
  flex-wrap:       wrap;
}

main .contacto .infoContacto section {
  background-color: var(--card);
  border-radius:    var(--r);
  padding:          clamp(16px, 2.5vw, 28px);
  min-width:        160px;
  max-width:        280px;
  flex:             1 1 180px;

  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  align-items:      center;
  gap:              8px;
  text-align:       center;
  box-shadow:       var(--shadow-card);
}

main .contacto .infoContacto span {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             4px;
  color:           var(--text);
  font-size:       0.85rem;
}


/* ── 8. FOOTER ── */

footer {
  width:            100%;
  padding:          clamp(24px, 4vw, 48px) clamp(20px, 5vw, 60px);
  background-color: #6b7280;

  display:          flex;
  justify-content:  center;
  align-items:      center;
}

footer img {
  width:     auto;
  max-width: clamp(120px, 30%, 50%);
}


/* ── 9. RESULTS ERROR BANNER ── */

.results-sectionP {
  color: var(--bg-color);
}

#global-error {
  display:          none;
  margin:           16px clamp(16px, 5vw, 60px) 0;
  padding:          12px 16px;
  border-radius:    var(--r-sm);
  background-color: var(--surface);
  color:            var(--text);
  text-align:       center;
}


/* ── 10. PAGE WRAPPER ── */

.page {
  padding: var(--sp-xl) clamp(16px, 5vw, 60px);
  display: grid;
  gap:     var(--sp-lg);
}


/* ── 11. SECTION BLOCKS ── */

.section {
  background-color: var(--surface);
  overflow:         hidden;
  box-shadow:       var(--shadow-card);
  animation:        fadeUp 0.45s var(--ease-out) both;
}
.section:nth-child(1) { animation-delay: 0.05s; }
.section:nth-child(2) { animation-delay: 0.15s; }
.section:nth-child(3) { animation-delay: 0.25s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section ID overrides (light background sections) */
#cardStyle,
#section-header-1,
#section-header-2,
#section-header-3,
#section-header-4,
#section-header-5 {
  background-color: var(--bg-color);
}

#section-header-1 h2,
#section-header-2 h2,
#section-header-3 h2,
#section-header-4 h2,
#section-header-5 h2 {
  color: var(--bg);
}

#section-header-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 50px 120px 60px 120px;
}

#cardBgstyle {
  background-color: rgb(185,185,185);
}
#cardBgstyle label {
  color: var(--bg);
}

.section-header {
  padding:    clamp(20px, 3vw, 36px) clamp(20px, 3.5vw, 32px);
  text-align: center;
}

.section-icon {
  font-size:     18px;
  color:         var(--muted);
  width:         36px;
  height:        36px;
  border-radius: 50%;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.section-title {
  font-size:      clamp(1.3rem, 2.5vw, 2.1rem);
  font-weight:    700;
  color:          #f5f5f5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin:         0;
}

.section-body {
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px);
}

.section-body > .search-grid,
.section-body > .movie-grid,
#results-container {
  width: 100%;
}


/* ── 12. SEARCH CONTROLS ── */

.search-grid {
  /* display:               grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) auto;
  gap:                   14px;
  align-items:           end; */

    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr)) auto;
    align-items: end;
    padding-bottom: 50px;
    gap: 20px;
}

.search-actions {
  display:     flex;
  gap:         8px;
  align-items: flex-end;
}

label.field-label {
  display:        block;
  font-size:      0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text);
  margin-bottom:  8px;
}

select, input[type="date"] {
  width:            100%;
  min-height:       48px;
  background-color: var(--btn);
  border: none;
  border-radius:    var(--r-sm);
  color:            var(--bg);
  padding:          12px 16px;
  font-size:        0.85rem;
  font-family:      inherit;
  appearance:       none;
  cursor:           pointer;
  transition:       border-color var(--dur-base) var(--ease-out),
                    box-shadow   var(--dur-base) var(--ease-out);
}
select:focus,
input[type="date"]:focus {
  outline:      none;
  border-color: var(--btn);
  box-shadow:   0 0 0 3px var(--btn-alpha);
}
select option {
  background-color: var(--card);
  color:            var(--text);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content:           '▾';
  position:          absolute;
  inset-inline-end:  16px;
  inset-block-start: 50%;
  transform:         translateY(-50%);
  color:             var(--muted);
  font-size:         12px;
  pointer-events:    none;
}


/* ── 13. BUTTONS ── */

.btn-search {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-height:     48px;
  padding:        12px 32px;
  background-color: var(--btn);
  color:          var(--bg);
  font-weight:    700;
  border:         none;
  border-radius:  var(--r-sm);
  font-size:      0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  transition:     background-color var(--dur-fast) var(--ease-out),
                  transform        var(--dur-fast) var(--ease-out),
                  box-shadow       var(--dur-fast) var(--ease-out);
}
.btn-search:hover {
  background-color: var(--btn-hover);
  transform:        translateY(-2px);
  box-shadow:       0 4px 14px rgba(225,150,60,.45);
}
.btn-search:active {
  transform:  translateY(0);
  box-shadow: none;
}

.btn-reset {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-height:     48px;
  padding:        12px 20px;
  background-color: transparent;
  color:          var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--r-sm);
  font-size:      0.8rem;
  white-space:    nowrap;
  transition:     color        var(--dur-base) var(--ease-out),
                  border-color var(--dur-base) var(--ease-out),
                  background   var(--dur-base) var(--ease-out);
}
.btn-reset:hover {
  color:            var(--muted);
  border-color:     var(--btn);
  background-color: var(--btn-alpha);
}


/* ── 14. MOVIE GRID & CARDS ── */

/* Flexbox grid — centres odd-count cards automatically */
.movie-grid {
  display:         flex;
  gap:             clamp(12px, 2vw, 24px);
  justify-content: center;
  flex-wrap: wrap;
}

.movie-grid > * {
  flex:     0 0 clamp(130px, 18vw, 180px);
}

/* When only 1–2 cards: constrain width so they don't stretch full-width */
.movie-grid:has(> :nth-child(1):last-child),
.movie-grid:has(> :nth-child(2):last-child) {
  max-width:     420px;
  margin-inline: auto;
}

/* Movie card */
.movie-card {
  background-color: var(--card);
  border-radius:    var(--r);
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  box-shadow:       var(--shadow-card);
  transition:       transform    var(--dur-base) var(--ease-out),
                    box-shadow   var(--dur-base) var(--ease-out),
                    border-color var(--dur-base) var(--ease-out);
}
.movie-card:hover {
  transform:    translateY(-6px) scale(1.01);
  box-shadow:   var(--shadow-hover);
  border-color: var(--btn);
}

article {
  box-shadow: var(--shadow-card);
}

/* Poster */
.poster-link {
  display:  block;
  position: relative;
  overflow: hidden;
}
.poster-link img {
  width:        100%;
  aspect-ratio: 2/3;
  object-fit:   cover;
  background-color: #111;
  transition:   transform var(--dur-base) var(--ease-out);
}
.movie-card:hover .poster-link img {
  transform: scale(1.04);
}

/* Poster placeholder */
.poster-placeholder {
  aspect-ratio:     2/3;
  background:       var(--card);
  display:          grid;
  place-items:      center;
  color:            var(--text);
  font-size:        28px;
}
.poster-placeholder--large { font-size: 36px; }

/* "Ver ficha" overlay */
.poster-link::after {
  content:          '▶  Ver ficha';
  position:         absolute;
  inset:            0;
  display:          grid;
  place-items:      center;
  background-color: rgba(0,0,0,0.72);
  color:            var(--text);
  font-size:        0.92rem;
  font-weight:      700;
  letter-spacing:   0.08em;
  opacity:          0;
  transition:       opacity var(--dur-base) var(--ease-out);
}
.poster-link:hover::after { opacity: 1; }

/* Card info area */
.movie-card-info {
  padding:        14px 16px 16px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  flex:           1;
}
.movie-card-info h4 {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.movie-card-meta { color: var(--muted); font-size: 0.78rem; text-transform: uppercase;}
.movie-card-link {
  color:           var(--btn);
  font-size:       0.72rem;
  font-weight:     600;
  letter-spacing:  0.04em;
  margin-top:      auto;
  padding-top:     6px;
  transition:      color var(--dur-fast) var(--ease-out);
}
.movie-card-link:hover { color: var(--btn-hover); }


/* ── 15. TODAY SECTION ── */

/* Section icon */
.section-icon.today-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  animation:  today-pulse 2.5s ease-in-out infinite;
  border:     none;
  color:      #fff;
}

@keyframes today-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245,158,11,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(245,158,11,0);   }
}

/* Date badge */
.today-date-badge {
  display:        inline-block;
  margin-left:    auto;
  padding:        0.25rem 0.85rem;
  border-radius:  var(--r-chip);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  background:     var(--btn);
  color:          var(--text);

  white-space:    nowrap;
  box-shadow:     var(--shadow-chip);
}

/* Today pill inside cards */
.today-badge-pill {
  display:        inline-block;
  padding:        0.15rem 0.6rem;
  margin-bottom:  0.45rem;
  border-radius:  var(--r-chip);
  font-size:      0.68rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  color:          #fff;
  background:     linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}


/* Empty states */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        clamp(32px, 6vw, 72px) 20px;
  color:          var(--muted);
  text-align:     center;
}
.empty-state .icon { font-size: 42px; opacity: 0.3; margin-bottom: 12px; }
.empty-state p     { font-size: 0.9rem; color: var(--muted); }

.empty-state--today { padding: 2.5rem 1rem; }
.today-empty-msg    { font-size: 1.05rem; font-weight: 600; color: #ccc; margin: 0 0 0.4rem; }
.today-empty-sub    { font-size: 0.9rem;  color:       #888; margin: 0; }

.movie-grid > .empty-state { grid-column: 1 / -1; }

.inline-message {
  color:      var(--muted);
  font-size:  13px;
  text-align: center;
}


/* ── 16. CITY CHIPS ── */

.city-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  padding:   4px 0;
  justify-content: center;
  align-items: center;
}

.city-chip {
  /* background-color: var(--btn);
  color:            var(--bg);
  padding:          10px 20px;
  border-radius:    var(--r-chip);
  font-size:        0.85rem;
  font-weight:      600;
  cursor:           pointer;
  min-height:       40px;
  display:          inline-flex;
  align-items:      center;
  box-shadow:       var(--shadow-chip);
  transition:       background-color var(--dur-base) var(--ease-out),
                    transform        var(--dur-fast) var(--ease-out),
                    box-shadow       var(--dur-base) var(--ease-out);
  border: none;
  text-transform: uppercase; */
    background-color: #ffffff;
    color: var(--bg);
    padding: 5px 10px;
    border-radius: var(--r-chip);
    font-size: 0.60rem;
    font-weight: 400;
    cursor: pointer;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-chip);
    transition: background-color var(--dur-base) var(--ease-out),
                    transform        var(--dur-fast) var(--ease-out),
                    box-shadow       var(--dur-base) var(--ease-out);
    border: none;
    text-transform: uppercase;

}
.city-chip:hover {
  background-color: var(--btn-hover);
  transform:        translateY(-2px);
  box-shadow:       0 4px 14px rgba(225,150,60,.45);
}
.city-chip:active { transform: translateY(0); }


/* ── 17. SKELETON LOADING ── */

.skeleton-container {
  display:   flex;
  flex-wrap: wrap;
  gap:       16px;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg)        0%,
    var(--skeleton-shimmer)   50%,
    var(--skeleton-bg)        100%
  );
  background-size: 200% 100%;
  animation:       shimmer 1.6s infinite linear;
  position:        relative;
  overflow:        hidden;
}

@keyframes shimmer {
  from { background-position:  200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-chip {
  min-height:    40px;
  width:         clamp(80px,15vw,140px);
  border-radius: var(--r-chip);
  opacity:       0.9;
}
.skeleton-chip::after {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    var(--skeleton-highlight);
  border-radius: var(--r-chip);
}

.skeleton-card {
  background-color: var(--skeleton-bg);
  border-radius:    var(--r);
  border:           1px solid var(--border);
  aspect-ratio:     2/3.5;
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  box-shadow:       0 4px 10px rgba(0,0,0,0.25);
}

.skeleton-poster {
  width:        100%;
  aspect-ratio: 2/3;
  background:   linear-gradient(
    90deg,
    var(--skeleton-bg)      0%,
    rgba(255,255,255,0.04) 50%,
    var(--skeleton-bg)      100%
  );
  background-size: 200% 100%;
  animation:       shimmer 1.6s infinite linear;
}

.skeleton-info {
  padding:        16px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.skeleton-text {
  width:      90%;
  min-height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation:       shimmer 1.6s infinite linear;
}
.skeleton-text.short { width: 60%; }


/* ── 18. RESULTS SECTION (fade-in) ── */

#results-section { display: none; }

#results-section.results-section--visible {
  display:   block;
  animation: resultsFadeIn 0.4s ease-out both;
}

@keyframes resultsFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/*Guia del Usuario*/

.guiadelusuario {
  width: 30%;
  height: auto;
  background-color: var(--bg-color);
  padding: 20px;
  border-radius: 15px;
  gap: 15px;

  position: absolute;
  z-index: 999999;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.guiadelusuario form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.guiadelusuario form input {
  width:            100%;
  min-height:       48px;
  background-color: var(--btn);
  border: none;
  border-radius:    var(--r-sm);
  color:            var(--bg);
  padding:          12px 16px;
  font-size:        0.85rem;
  font-family:      inherit;
  appearance:       none;
  cursor:           pointer;
  transition:       border-color var(--dur-base) var(--ease-out),
                    box-shadow   var(--dur-base) var(--ease-out);
}

.guiadelusuario form input::placeholder {
  color: var(--bg);
}

.guiadelusuario.active {
  display: flex;
}

#section-header-5  {
  padding-bottom: 100px;
}

/* ── 19. RESPONSIVE BREAKPOINTS ── */

/* Tablet */
@media screen and (min-width: 601px) and (max-width: 1024px) {

  .search-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .search-actions {
    grid-column: 1 / -1;
  }

  main .about {
    gap: 32px;
  }

  .movie-grid {
  flex-wrap:       wrap;
}
}

/* Mobile */
@media screen and (max-width: 600px) {

  main .about {
    flex-direction: column;
    padding:        clamp(24px,5vw,40px) 20px;
  }
  main .about .containerText,
  main .about .containerImg {
    width: 100%;
  }
  main .about .containerImg .Cartel img {
    width: clamp(100px, 35%, 160px);
  }

  main .contacto .infoContacto {
    flex-direction: column;
    gap:            24px;
  }
  main .contacto .infoContacto section {
    max-width: 100%;
    width:     100%;
  }

  .search-grid {
    grid-template-columns: 1fr;
  }
  .search-actions {
    flex-direction: column;
    align-items:    stretch;
  }
  .btn-search,
  .btn-reset {
    width: 100%;
  }

  .movie-grid {
  flex-wrap:       wrap;
    gap: 12px;
  }

  .section-body {
    padding: 16px;
  }
}


/* ── 20. ACCESSIBILITY ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:      0.01ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:     0.01ms !important;
    scroll-behavior:         auto  !important;
  }
}