/*
Theme Name: Pópulos Sala
Theme URI: https://populosfilms.com/sala/
Author: Pópulos Films
Description: Tema visual para la Sala de Proyección. Identidad de Pópulos Films, catálogo dinámico LifterLMS y compatibilidad con los formularios de alquiler y pago existentes.
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: populos-sala
Tags: custom-logo, custom-menu, featured-images, full-width-template, accessibility-ready
*/
:root {
  --s-ink: #111311;
  --s-night: #191c19;
  --s-deep: #222823;
  --s-paper: #f5f3ed;
  --s-cream: #eae6dc;
  --s-red: #ce392e;
  --s-red-hover: #e6483a;
  --s-muted: #a5ada3;
  --s-line: #d2d0c9;
  --s-max: 1440px;
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 100px}
body.sala-body {margin: 0; min-width: 300px; background: var(--s-ink); color: var(--s-paper); font-family: 'DM Sans', Arial, sans-serif; line-height: 1.57; font-size: 16px; -webkit-font-smoothing: antialiased}
body.sala-menu-open {overflow: hidden}
.sala-body a {color: inherit; text-decoration: none}
.sala-body img {max-width: 100%; height: auto}
.sala-body button, .sala-body input, .sala-body select, .sala-body textarea {font: inherit}
.sala-body a:focus-visible, .sala-body button:focus-visible, .sala-body input:focus-visible, .sala-body select:focus-visible, .sala-body textarea:focus-visible {outline: 3px solid #ffb458; outline-offset: 3px}
.sala-body ::selection {background: var(--s-red); color: white}
.sala-body h1, .sala-body h2, .sala-body h3, .sala-body h4 {font-family: 'Manrope', Arial, sans-serif; letter-spacing: -.065em; margin-top: 0; line-height: 1.08}
.sala-body h1 {font-weight: 800}
.sala-body p {line-height: 1.72}
.sala-container {width: min(calc(100% - 9vw), var(--s-max)); margin-inline: auto}
.sala-skip {position: absolute; top: -100px; left: 1rem; z-index: 110; padding: 12px 16px; color: #111!important; background: white}
.sala-skip:focus {top: 10px}
.sala-kicker {display: inline-flex; gap: 11px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase}
.sala-kicker-red::before {content: ''; width: 22px; height: 3px; background: var(--s-red); flex: none}
.sala-button {display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; border: 1px solid transparent; min-height: 55px; padding: 15px 20px; border-radius: 2px; cursor: pointer; font-weight: 800; font-size: 13px; letter-spacing: .01em; transition: transform .2s, background .2s, border-color .2s}
.sala-button:hover {transform: translateY(-2px)}
.sala-button span {font-size: 20px; font-weight: 400; line-height: 1}
.sala-button-red {background: var(--s-red); color: #fff!important}
.sala-button-red:hover {background: var(--s-red-hover)}
.sala-button-dark {background: var(--s-ink); color: #fff!important}
.sala-button-dark:hover {background: #303b31}
.sala-text-link {display: inline-flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 800; border-bottom: 1px solid currentColor; padding-block: 8px}
.sala-text-link span {color: var(--s-red); font-size: 20px; font-weight: 400}
.sala-text-link:hover {color: var(--s-red)}

/* Header — matches Pópulos Films' actual proportions and chromatic values. */
.sala-header {height: 86px; position: sticky; top: 0; z-index: 90; background: rgba(17,19,17,.96); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.11)}
.sala-header-inner {height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px}
.sala-brand {display: flex; align-items: center; gap: 19px; flex: none; min-width: 0}
.sala-brand-link {display: flex; align-items: center; justify-content: center; width: 155px; flex: none; min-height: 50px}
.sala-brand-logo {display: block; width: 100%; max-height: 50px; object-fit: contain}
.sala-brand-logo[hidden] {display: none}
.sala-brand-wordmark {font: 900 21px/1 'Manrope', Arial, sans-serif; letter-spacing: -.08em; white-space: nowrap; color: #fff}
.sala-brand-wordmark span {color: var(--s-red)}
.sala-brand-wordmark[hidden] {display: none}
.sala-brand-divider {height: 25px; width: 1px; background: rgba(255,255,255,.25)}
.sala-brand-subtitle {font-size: 9px; font-weight: 800; letter-spacing: .17em; color: #abb5aa; line-height: 1.3; max-width: 95px}
.sala-nav {display: flex; align-items: center; gap: 20px}
.sala-nav-links {display: flex; align-items: center; gap: clamp(14px,2.1vw,34px); list-style: none; padding: 0; margin: 0}
.sala-nav-links a {font-size: 12px; font-weight: 800; transition: color .2s; white-space: nowrap}
.sala-nav-links a:hover, .sala-nav-links .current-menu-item > a {color: #fcaa9f}
.sala-back-link {font-size: 11px; font-weight: 800; white-space: nowrap; padding: 12px 15px; background: var(--s-red); color: #fff!important; margin-left: 12px; transition: background .2s}
.sala-back-link:hover {background: var(--s-red-hover)}
.sala-back-link span {font-size: 17px; font-weight: 400; padding-left: 10px}
.sala-menu-toggle {display: none; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; color: white; font-size: 12px; font-weight: 800; padding: 12px 14px; cursor: pointer}
.sala-menu-toggle span {padding-left: 18px}

/* Homepage. */
.sala-hero {position: relative; isolation: isolate; background: radial-gradient(circle at 78% 16%, #3b4339 0%, #1c231d 35%, #111311 74%); overflow: hidden}
.sala-hero::before {content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(13,16,13,.33))}
.sala-hero-grid {display: grid; grid-template-columns: minmax(0,1.05fr) minmax(280px,.79fr); gap: clamp(36px,7vw,115px); min-height: 690px; align-items: center; padding-block: 94px 88px}
.sala-hero-copy h1 {font-size: clamp(72px,8vw,128px); letter-spacing: -.09em; line-height: .99; margin: 35px 0 32px; color: var(--s-paper)}
.sala-outline {color: transparent; -webkit-text-stroke: 1.6px #bdc9ba; white-space: nowrap}
.sala-hero-copy > p {color: #bec8bb; max-width: 530px; font-size: clamp(16px,1.45vw,19px); margin-bottom: 31px}
.sala-hero-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 20px 26px}
.sala-hero-bottom {font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #9ea99d; margin-top: 80px}
.sala-hero-bottom span {color: var(--s-red); margin-right: 11px}
.sala-hero-featured {display: flex; justify-content: center; align-self: center; min-width: 0}
.sala-featured-link {position: relative; display: flex; width: min(100%, 430px); flex-direction: column; align-items: stretch}
.sala-featured-poster {aspect-ratio: 2/3; width: 100%; background: #edece6; display: flex; align-items: center; justify-content: center; box-shadow: 20px 24px 65px rgba(0,0,0,.24)}
.sala-featured-poster img {height: 100%; width: 100%; object-fit: contain; object-position: center}
.sala-featured-badge {position: absolute; right: -15px; top: 29px; z-index: 3; background: var(--s-red); color: #fff; padding: 10px 14px; font-size: 10px; font-weight: 900; letter-spacing: .13em}
.sala-featured-caption {display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #637065; padding: 17px 0; font: 800 13px/1.2 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .08em}
.sala-featured-caption span {font-size: 22px; font-weight: 400; color: #dd5043}
.sala-featured-link:hover .sala-featured-caption {color: #ffac9f}
.sala-featured-placeholder {max-width: 90%; color: var(--s-ink); font: 900 clamp(36px,5vw,65px)/1 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: -.09em; text-align: center}
.sala-empty-feature {width: 100%; min-height: 380px; padding: 38px; background: #2d372e; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #657267}
.sala-empty-feature span {font-size: 11px; font-weight: 800; letter-spacing: .13em; color: #a7baaa}
.sala-empty-feature strong {font: 800 clamp(30px,3.7vw,56px)/1.06 'Manrope', sans-serif; letter-spacing: -.06em}
.sala-section {padding-block: clamp(78px,9vw,140px)}
.sala-section-cream {background: var(--s-paper); color: var(--s-ink)}
.sala-section-header {display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 49px}
.sala-section-header h2 {font-size: clamp(56px,6.3vw,94px); margin: 21px 0 0; line-height: 1.03}
.sala-section-header > p {max-width: 325px; font-size: 15px; color: #636960; margin: 0 0 5px}
.sala-card-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(25px,3.1vw,50px) clamp(16px,2vw,30px)}
.sala-film-card {display: block; min-width: 0}
.sala-film-poster {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 2/3; background: var(--s-paper); overflow: hidden}
.sala-film-poster img {height: 100%; width: 100%; object-fit: contain; object-position: center; background: transparent; transition: filter .25s, transform .3s}
.sala-film-card:hover .sala-film-poster img {filter: brightness(.72); transform: scale(1.014)}
.sala-poster-placeholder {display: grid; place-items: center; width: 100%; height: 100%; background: #e8e6de; color: #1b231c; text-align: center; padding: 18px; text-transform: uppercase; font: 900 clamp(26px,3.5vw,55px)/1.03 'Manrope',sans-serif; letter-spacing: -.08em; overflow-wrap: anywhere}
.sala-poster-overlay {opacity: 0; position: absolute; z-index: 2; bottom: 22px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #fff; background: var(--s-red); font-weight: 900; font-size: 11px; letter-spacing: .06em; transform: translateY(7px); transition: opacity .2s,transform .2s}
.sala-film-card:hover .sala-poster-overlay,.sala-film-card:focus-visible .sala-poster-overlay {opacity: 1; transform: translateY(0)}
.sala-poster-overlay span {font-size: 20px; font-weight: 400}
.sala-film-meta {display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #d3d4ce; padding: 17px 0}
.sala-film-meta h3 {margin: 0; font-size: clamp(18px,1.55vw,24px); line-height: 1.25; letter-spacing: -.04em; text-transform: uppercase}
.sala-film-meta > span {font-size: 24px; color: var(--s-red)}
.sala-film-card:hover .sala-film-meta h3 {color: #aa352a}
.sala-section-end {display: flex; justify-content: center; margin-top: 56px}
.sala-message {padding: 24px; border: 1px solid var(--s-line)}
.sala-how {background: #202621; color: var(--s-paper)}
.sala-header-inverse > p {color: #a9b7ab}
.sala-header-inverse h2 > span {color: transparent; -webkit-text-stroke: 1px #b8c4b8}
.sala-steps {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-top: 65px; border-top: 1px solid #58675a}
.sala-steps > div {padding: 24px 0 0; border-top: 3px solid var(--s-red); margin-top: -2px}
.sala-steps > div > span {font: 800 13px 'DM Sans',sans-serif; color: #ef7a6f}
.sala-steps h3 {font-size: 33px; margin: 55px 0 14px}
.sala-steps p {color: #afbeaf; font-size: 14px; max-width: 280px}
.sala-home-bottom {background: var(--s-cream); color: var(--s-ink); padding-block: 110px}
.sala-bottom-grid {display: grid; grid-template-columns: .45fr 1fr; gap: 70px}
.sala-bottom-grid > div h2 {font-size: clamp(52px,6.7vw,105px); line-height: 1.05; margin: 0 0 27px}
.sala-bottom-grid > div h2 em {color: #bb3d32; font-style: normal}
.sala-bottom-grid > div p {max-width: 520px; color: #535e54; font-size: 18px; margin-bottom: 28px}

/* Interior and course page. */
.sala-interior-hero {padding: clamp(80px,8vw,120px) 0 clamp(85px,8.5vw,130px); background: radial-gradient(circle at 85% 0%, #374036 0%, #1c231c 38%, #111311 80%)}
.sala-interior-hero h1 {font-size: clamp(68px,9vw,136px); margin: 27px 0 18px; line-height: .99; max-width: 1040px; overflow-wrap: anywhere}
.sala-interior-hero h1 span {color: transparent; -webkit-text-stroke: 1.4px #c3cbbf}
.sala-interior-hero p {color: #b7c2b8; font-size: 18px; max-width: 650px; margin: 20px 0 0}
.sala-interior-hero-small {padding: 75px 0 84px}
.sala-interior-hero-small h1 {font-size: clamp(45px,6vw,88px); line-height: 1.1; max-width: 1160px}
.sala-catalog-grid {row-gap: 50px}
.sala-pagination {margin-top: 62px}
.sala-pagination ul {display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; list-style: none}
.sala-pagination a,.sala-pagination span {display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c8c8be; padding: 11px 16px; font-weight: 800; font-size: 13px}
.sala-pagination .current,.sala-pagination a:hover {background: var(--s-ink); color: #fff}
.sala-course-hero {background: #202621; padding: 35px 0 clamp(70px,8vw,120px)}
.sala-breadcrumb {font-size: 12px; font-weight: 800; color: #b7c6b7; margin-bottom: 48px}
.sala-breadcrumb a:hover {color: white}
.sala-course-hero-grid {display: grid; grid-template-columns: minmax(0,1.22fr) minmax(240px,.70fr); gap: 8vw; align-items: center}
.sala-course-hero-copy h1 {font-size: clamp(58px,7.5vw,120px); margin: 26px 0 35px; overflow-wrap: anywhere}
.sala-course-hero-copy > p {font-size: 18px; max-width: 510px; color: #bfccbd; margin-bottom: 32px}
.sala-course-hero-art {width: min(100%,410px); justify-self: center; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; background: var(--s-paper)}
.sala-course-hero-art img {display: block; width: 100%; height: 100%; object-fit: contain}
.sala-course-main > .sala-container {display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 50px}
.sala-course-content {width: 100%; max-width: 1060px; min-width: 0; color: var(--s-ink)}
.sala-course-content > .sala-kicker {margin-bottom: 38px}
.sala-course-content h2 {font-size: clamp(31px,3.2vw,55px); line-height: 1.15; margin: 35px 0 22px}
.sala-course-content h3 {font-size: clamp(23px,2.1vw,32px); line-height: 1.2; margin: 30px 0 16px}
.sala-course-content h4 {font-size: 19px; margin: 24px 0 15px}
.sala-course-content p {font-size: 16px; max-width: 850px}
.sala-course-content ul,.sala-course-content ol {padding-left: 23px}
.sala-course-content img {max-width: 100%; height: auto}
.sala-course-content iframe,.sala-page-content iframe {max-width: 100%}
.sala-course-content .wp-block-embed__wrapper {max-width: 100%; overflow: hidden}
.sala-course-content .wp-block-embed iframe {width: 100%; aspect-ratio: 16/9; height: auto}
.sala-course-content .llms-featured-image {display: none} /* Hero already displays the same cover. */
.sala-course-sidebar {width: 255px}
.sala-course-sidebar .widget {background: #e8e9e0; padding: 22px; margin-bottom: 20px}
.sala-course-sidebar .widget-title {font-size: 18px}

/* Page content: LifterLMS dashboard, rentals, checkout, passwords, legal pages. */
.sala-page-content {width: 100%; max-width: 1080px; min-height: 240px; color: var(--s-ink); overflow-wrap: break-word}
.sala-page-content > p {max-width: 950px}
.sala-page-content h2 {font-size: clamp(27px,3.3vw,48px); letter-spacing: -.055em; line-height: 1.2}
.sala-page-content h3 {font-size: clamp(21px,2.4vw,32px); letter-spacing: -.045em}
.sala-page-content h4 {font-size: 21px}
.sala-page-content p, .sala-page-content li {line-height: 1.8}
.sala-page-content a:not(.llms-button-action):not(.button):not(.wp-element-button) {text-decoration: underline; text-underline-offset: 3px}
.sala-page-content img,.sala-page-content video {max-width: 100%; height: auto}
.sala-page-content table {max-width: 100%; border-collapse: collapse}
.sala-page-content th, .sala-page-content td {padding: 10px 14px; border-bottom: 1px solid var(--s-line)}
.sala-page-content .alignwide {max-width: 1170px}
.sala-page-content .alignfull {margin-left: 0; margin-right: 0}
.sala-index-entry {border-bottom: 1px solid var(--s-line); padding-bottom: 25px; margin-bottom: 27px}
.sala-index-entry h2 {font-size: 27px}

/* LifterLMS: visual overrides only — do NOT hide or replace pay buttons / scripts. */
.sala-body .llms-loop,.sala-body .llms-course-list {color: var(--s-ink)}
.sala-body .llms-access-plans,.sala-body .llms-pricing-table {display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 18px; margin: 30px 0 42px}
.sala-body .llms-access-plan {width: 100%; max-width: none; float: none; background: #fff; color: var(--s-ink); border: 1px solid #d4d4cb; box-shadow: none; padding: 0; border-radius: 0}
.sala-body .llms-access-plan .llms-access-plan-title {padding: 21px 23px; color: var(--s-ink); background: #e8e8df; font: 800 16px 'DM Sans',sans-serif; letter-spacing: .03em; text-transform: uppercase}
.sala-body .llms-access-plan .llms-access-plan-content {padding: 23px}
.sala-body .llms-access-plan .llms-access-plan-price {font-family: 'Manrope',sans-serif; color: var(--s-ink); font-size: 38px; font-weight: 800}
.sala-body .llms-access-plan .llms-access-plan-footer {background: transparent; padding: 12px 23px 24px; border: 0}
.sala-body .llms-button-action,.sala-body a.llms-button-action,.sala-body button.llms-button-action,.sala-body .llms-button-primary,.sala-body a.llms-button-primary {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--s-red); border-radius: 2px; background: var(--s-red); color: #fff!important; font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 800; text-decoration: none; padding: 13px 24px; cursor: pointer; box-shadow: none}
.sala-body .llms-button-action:hover,.sala-body a.llms-button-action:hover,.sala-body .llms-button-primary:hover {background: var(--s-red-hover); border-color: var(--s-red-hover)}
.sala-body .llms-notice,.sala-body .llms-info,.sala-body .llms-message {padding: 18px 20px; background: #e8eee3; border-left: 4px solid #54754c; color: #202b20; margin: 24px 0}
.sala-body .llms-error {padding: 18px 20px; background: #f9e7e5; border-left: 4px solid #b42e29; color: #562a27; margin: 24px 0}
.sala-body .llms-my-account, .sala-body .llms-checkout, .sala-body .llms-personal-information {color: var(--s-ink)}
.sala-body .llms-my-account > nav,.sala-body .llms-student-dashboard > nav {margin-bottom: 30px}
.sala-body .llms-sd-section-title {font-size: 30px; letter-spacing: -.04em}
.sala-body .llms-sd-nav,.sala-body .llms-student-dashboard-nav {display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; border: none}
.sala-body .llms-sd-nav a,.sala-body .llms-student-dashboard-nav a {display: block; padding: 10px 14px; border: 1px solid var(--s-line); font-weight: 700; font-size: 13px; background: #fff; text-decoration: none}
.sala-body .llms-sd-nav a:hover,.sala-body .llms-student-dashboard-nav a:hover {border-color: #555f55}
.sala-body .llms-course-outline,.sala-body .llms-lesson-preview,.sala-body .llms-course-progress {max-width: 100%}
.sala-body .llms-lesson-preview {background: #fff; border: 1px solid var(--s-line); margin-bottom: 12px; padding: 18px}
.sala-body .llms-course-outline .llms-section-title {color: var(--s-ink)}
.sala-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.sala-body textarea,.sala-body select {border: 1px solid #b9beb5; color: var(--s-ink); background: #fff; padding: 12px 14px; min-height: 44px; max-width: 100%; border-radius: 2px}
.sala-body input[type="checkbox"],.sala-body input[type="radio"] {accent-color: var(--s-red)}
.sala-body label {font-size: 14px; font-weight: 700}
.sala-body input[type="submit"],.sala-body button[type="submit"] {padding: 13px 22px; min-height: 46px; border-radius: 2px; cursor: pointer; background: var(--s-red); border: 1px solid var(--s-red); color: #fff; font-size: 13px; font-weight: 800}
.sala-body input[type="submit"]:hover,.sala-body button[type="submit"]:hover {background: var(--s-red-hover)}
.sala-body .llms-form-field,.sala-body .llms-field {margin-bottom: 16px}
.sala-body .llms-field > label,.sala-body .llms-form-field > label {display: block; margin-bottom: 7px}
.sala-body .llms-checkout-section,.sala-body .llms-checkout-wrapper {background: #fff; border: 1px solid var(--s-line); padding: clamp(15px,3vw,30px); margin-bottom: 23px}
.sala-body .llms-my-account .llms-login-form,.sala-body .llms-login,.sala-body .llms-registration-form {max-width: 640px}
.sala-body .llms-loop-item-content {background: #fff; border: 1px solid var(--s-line)}
.sala-body .llms-loop-item-content .llms-loop-title {color: var(--s-ink); font: 800 21px/1.2 'Manrope',sans-serif}
.sala-body .llms-loop-item-content .llms-author,.sala-body .llms-loop-item-content .llms-meta,.sala-body .llms-loop-item-content .llms-lesson-count {color: #666}

/* v1.1 — LifterLMS customer area: film library rather than student dashboard. */
.sala-account-page .sala-page-content {max-width: none;}
/* The default LifterLMS shortcode uses two columns: display this as a cinema library. */
.sala-account-page .llms-student-dashboard {display: block!important; width: 100%!important; grid-template-columns: none!important;}
.sala-account-page .llms-student-dashboard .llms-sd-nav {position: static!important; float: none!important; width: 100%!important; max-width: none!important;}
.sala-account-page .llms-student-dashboard .llms-sd-tab,
.sala-account-page .llms-student-dashboard .llms-sd-section {width: 100%!important; max-width: none!important; margin-left: 0!important;}
.sala-account-page .llms-student-dashboard .llms-sd-content {width: 100%!important; max-width: none!important; margin-left: 0!important;}
.sala-account-page .llms-sd-nav {display: block; width: 100%; margin: 0 0 42px;}
.sala-account-page .llms-sd-nav .llms-sd-items {display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0;}
.sala-account-page .llms-sd-nav .llms-sd-item {display: block; width: auto; float: none; margin: 0; padding: 0; border: none; background: transparent;}
.sala-account-page .llms-sd-nav .llms-sd-link {display: inline-flex; align-items: center; min-height: 45px; padding: 11px 18px; background: #ece9e1; border: 1px solid #d4d0c6; color: #222923; font-size: 13px; font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s;}
.sala-account-page .llms-sd-nav .llms-sd-item.current .llms-sd-link,
.sala-account-page .llms-sd-nav .llms-sd-link[aria-current="page"] {background: #111311; color: #fff; border-color: #111311;}
.sala-account-page .llms-sd-nav .llms-sd-link:hover {border-color: #8d8f87; background: #dedbd2;}
.sala-account-page .llms-sd-nav .llms-sd-item.current .llms-sd-link:hover {background: #2c322d;}
.sala-account-page .llms-sd-nav .llms-sep {display: none;}
.sala-account-page .llms-sd-section-title {font-size: clamp(33px,4.2vw,58px); letter-spacing: -.065em; margin: 0 0 30px;}
.sala-account-page .llms-sd-tab h2,
.sala-account-page .llms-sd-tab > h3 {font-family: 'Manrope',sans-serif; letter-spacing: -.055em;}
.sala-body .llms-loop:has(> .sala-film-loop-item) {display: grid!important; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: clamp(25px,3vw,44px) clamp(14px,2vw,30px); margin: 20px 0 30px!important; padding: 0!important; list-style: none!important; width: 100%; clear: both;}
.sala-body .llms-loop .sala-film-loop-item {list-style: none!important; width: auto!important; max-width: none!important; float: none!important; display: block!important; margin: 0!important; padding: 0!important; border: none; background: transparent;}
.sala-body .llms-loop .sala-film-loop-item::marker {content: '';}
.sala-body .sala-film-loop-item .sala-film-card {display: block; height: 100%; width: 100%; color: var(--s-ink); text-decoration: none;}
.sala-body .sala-film-loop-item .sala-film-card img {box-shadow: none;}
.sala-body .sala-film-loop-item .sala-film-meta h3 {font-family: 'Manrope',sans-serif; font-weight: 800;}
.sala-account-page .llms-sd-section-footer {clear: both; margin-top: 32px;}
.sala-account-page .llms-sd-section-footer .llms-button-secondary {display: inline-flex; padding: 13px 20px; border: 1px solid #111311; color: #111311; font-weight: 800; text-decoration: none;}
/* Fallback for LifterLMS output that bypasses the loop template override. */
.sala-account-page .llms-loop-item .llms-author,
.sala-account-page .llms-loop-item .llms-lesson-count,
.sala-account-page .llms-loop-item .llms-course-length,
.sala-account-page .llms-loop-item .llms-course-difficulty,
.sala-account-page .llms-loop-item .llms-enroll-date,
.sala-account-page .llms-loop-item .llms-enroll-status,
.sala-account-page .llms-loop-item .llms-course-progress {display: none!important;}
@media (max-width: 900px) {
  .sala-body .llms-loop:has(> .sala-film-loop-item) {grid-template-columns: repeat(2,minmax(0,1fr));}
}
@media (max-width: 530px) {
  .sala-body .llms-loop:has(> .sala-film-loop-item) {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 13px;}
  .sala-account-page .llms-sd-nav .llms-sd-items {gap: 7px;}
  .sala-account-page .llms-sd-nav .llms-sd-link {min-height: 40px; padding: 9px 11px; font-size: 12px;}
}

/* Custom payment plugin. Scope only to #realizarPago — preserve all hidden Redsys/TPV fields. */
.sala-body #realizarPago {width: min(100%,600px); margin: 16px auto 0; text-align: left}
.sala-body #realizarPago #submitPayment {display: block; width: 100%; min-height: 57px; padding: 15px 20px; background: var(--s-red); border: 1px solid var(--s-red); border-radius: 2px; color: #fff; font: 800 13px/1.2 'DM Sans',sans-serif; letter-spacing: .02em; cursor: pointer; transition: background .2s}
.sala-body #realizarPago #submitPayment:hover {background: var(--s-red-hover)}
.sala-body #realizarPago label {display: flex; align-items: flex-start; gap: 11px; text-align: left; margin-top: 16px; color: var(--s-ink)}
.sala-body #realizarPago label input[type=checkbox] {margin-top: 6px; flex: none}
.sala-body #realizarPago a {text-decoration: underline; text-underline-offset: 3px}
.sala-body:has(#realizarPago) b[style*="#a2365b"] {color: var(--s-red)!important}
.sala-body #realizarPago ul {text-align: left}

/* Footer. */
.sala-footer {background: #0c0e0c; border-top: 1px solid #303830; color: #eff0e7}
.sala-footer-top {display: flex; align-items: end; justify-content: space-between; gap: 35px; padding: 85px 0 80px}
.sala-footer-top .sala-kicker {color: #aeb7aa}
.sala-footer-top p {font: 800 clamp(38px,4.2vw,64px)/1.06 'Manrope',sans-serif; letter-spacing: -.075em; margin: 22px 0 0}
.sala-footer-top em {color: #aeafa6; font-style: normal}
.sala-footer-cta {font-size: 13px; font-weight: 800; display: flex; gap: 22px; align-items: center; border-bottom: 1px solid #8b9186; padding: 12px 0}
.sala-footer-cta:hover {color: #ff9a8e}
.sala-footer-cta span {font-size: 23px; color: var(--s-red)}
.sala-footer-bottom {display: flex; align-items: start; justify-content: space-between; gap: 30px; padding: 22px 0 28px; border-top: 1px solid #374036; color: #8e988d; font-size: 11px}
.sala-footer-links {display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: flex-end}
.sala-footer-links a:hover {color: #fff}

@media (max-width: 1150px) {
  .sala-brand-subtitle,.sala-brand-divider {display: none}
  .sala-header-inner {gap: 16px}
  .sala-nav {gap: 10px}
  .sala-back-link {margin-left: 0}
  .sala-hero-copy h1 {font-size: clamp(64px,7.4vw,103px)}
}
@media (max-width: 860px) {
  .sala-container {width: calc(100% - 44px)}
  .sala-header {height: 72px}
  .sala-header-inner {height: 72px}
  .sala-brand-link {width: 138px}
  .sala-menu-toggle {display: inline-block}
  .sala-nav {position: fixed; display: flex; flex-direction: column; align-items: stretch; gap: 26px; left: 0; top: 72px; right: 0; height: calc(100svh - 72px); overflow-y: auto; padding: 39px 25px 75px; background: #121612; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: visibility .15s, opacity .15s,transform .15s; border-top: 1px solid #344036}
  .sala-nav.is-open {visibility: visible; opacity: 1; transform: translateY(0)}
  .sala-nav-links {display: flex; flex-direction: column; align-items: stretch; gap: 0}
  .sala-nav-links li {border-bottom: 1px solid #394138}
  .sala-nav-links a {display: block; font: 800 clamp(24px,5vw,38px)/1.25 'Manrope',sans-serif; letter-spacing: -.06em; padding: 19px 0; white-space: normal}
  .sala-back-link {align-self: flex-start; font-size: 13px; padding: 16px 20px}
  .sala-hero-grid {grid-template-columns: 1fr 0.8fr; gap: 30px; min-height: 600px; padding: 65px 0}
  .sala-hero-copy h1 {font-size: clamp(58px,8.1vw,80px)}
  .sala-hero-bottom {margin-top: 40px}
  .sala-course-hero-grid {gap: 35px}
  .sala-course-sidebar {display: none}
  .sala-course-main > .sala-container {grid-template-columns: 1fr}
}
@media (max-width: 700px) {
  .sala-container {width: calc(100% - 34px)}
  .sala-hero-grid {grid-template-columns: 1fr; gap: 40px; padding: 61px 0 73px}
  .sala-hero-copy h1 {font-size: clamp(62px,12vw,91px); margin: 24px 0 22px}
  .sala-hero-copy > p {font-size: 16px}
  .sala-hero-bottom {display: none}
  .sala-hero-featured {width: min(78%,400px); justify-self: center}
  .sala-featured-badge {right: -11px}
  .sala-section {padding: 75px 0}
  .sala-section-header {display: block; margin-bottom: 32px}
  .sala-section-header h2 {font-size: clamp(55px,10vw,77px)}
  .sala-section-header > p {margin-top: 20px; max-width: 530px}
  .sala-card-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 13px}
  .sala-film-meta {padding: 12px 0}
  .sala-film-meta h3 {font-size: 17px}
  .sala-film-meta > span {font-size: 19px}
  .sala-poster-overlay {display: none}
  .sala-steps {grid-template-columns: 1fr; gap: 20px; margin-top: 33px}
  .sala-steps > div {margin: 0; padding: 17px 0 13px}
  .sala-steps h3 {margin: 16px 0 12px; font-size: 30px}
  .sala-bottom-grid {grid-template-columns: 1fr; gap: 20px}
  .sala-home-bottom {padding: 77px 0}
  .sala-bottom-grid > div h2 {font-size: clamp(48px,9vw,75px)}
  .sala-interior-hero {padding: 70px 0 78px}
  .sala-interior-hero h1 {font-size: clamp(52px,10.5vw,80px)}
  .sala-course-hero-grid {grid-template-columns: 1fr}
  .sala-course-hero-copy h1 {font-size: clamp(54px,10vw,84px); margin: 20px 0}
  .sala-course-hero-art {width: min(72%,360px)}
  .sala-course-hero {padding-bottom: 75px}
  .sala-footer-top {align-items: start; flex-direction: column; padding: 62px 0 45px}
  .sala-footer-bottom {flex-direction: column; gap: 18px}
  .sala-footer-links {justify-content: flex-start}
}
@media (max-width: 430px) {
  .sala-brand-link {width: 120px}
  .sala-brand-wordmark {font-size: 18px}
  .sala-hero-copy h1 {font-size: clamp(54px,13vw,70px)}
  .sala-outline {-webkit-text-stroke: 1px #bdc9ba}
  .sala-hero-actions {align-items: flex-start; flex-direction: column; gap: 11px}
  .sala-hero-featured {width: min(91%,360px)}
  .sala-film-meta h3 {font-size: 15px}
  .sala-interior-hero h1 {font-size: clamp(48px,11vw,64px)}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important}
}