:root {
  --page: #faf6ee;
  --surface: #ffffff;
  --surface-alt: #f3ecdd;
  --cream: #f3ecdd;
  --gold: #c6a467;
  --gold-deep: #a3824a;
  --gold-text: #8a6b36;
  --gold-soft: #f0e4c8;
  --ink: #29231c;
  --muted: #7b7161;
  --line: #e7dcc6;
  --white: #ffffff;
  --shadow: 0 18px 46px rgba(41, 35, 28, 0.1);
  --shadow-soft: 0 10px 28px rgba(41, 35, 28, 0.07);
  --serif: "Cormorant Garamond", Georgia, serif;
  /* Dorado del logo del estudio */
  --gold-logo: #d8c08a;
  --sans: "Inter", system-ui, sans-serif;
  --container: min(1210px, calc(100% - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid rgba(198, 164, 103, 0.95);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 68px;
  display: grid;
  align-items: center;
  background: rgba(250, 248, 244, 0.96);
  border-bottom: 1px solid rgba(221, 214, 204, 0.8);
  backdrop-filter: blur(16px);
}

.main-nav {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.nav-menu a {
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a.is-current {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.nav-menu a[aria-current="page"] {
  background: var(--gold-soft);
}

.student-button {
  min-height: 46px;
  padding: 0 30px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.student-button:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--white);
}

.account-area,
.profile-menu {
  position: relative;
}

.profile-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 4px 5px;
  border: 1px solid rgba(221, 214, 204, 0.95);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(42, 35, 29, 0.1);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  min-width: 190px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: var(--shadow);
}

.profile-dropdown p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-dropdown button {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
}

.profile-dropdown button:hover {
  background: var(--gold-deep);
}

.profile-dropdown .secondary-account-action {
  margin-top: 0;
  border: 1px solid var(--line);
  background: #fffaf3;
  color: var(--ink);
}

.profile-dropdown .secondary-account-action:hover {
  background: var(--gold-soft);
}

.profile-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--gold-soft);
}

.profile-avatar img,
.profile-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-avatar img {
  object-fit: cover;
}

.profile-avatar svg {
  padding: 8px;
  fill: var(--gold-text);
}

.wordmark {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  min-width: 176px;
}

/* El nombre es la imagen del logo, para que sean las letras exactas. */
.wordmark img {
  display: block;
  width: auto;
  height: 46px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  background: var(--ink);
}

.hero-photo-block {
  min-height: calc(100vh - 68px);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 108px 20px 64px;
  background: radial-gradient(ellipse 60% 55% at 88% 8%, rgba(198, 164, 103, 0.2), transparent 55%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-photo-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(31, 26, 19, 0.88) 0%, rgba(31, 26, 19, 0.55) 42%, rgba(31, 26, 19, 0.2) 64%, rgba(31, 26, 19, 0.08) 82%);
  z-index: 0;
  pointer-events: none;
}

.studio-glimpse-wrap {
  padding: 64px 20px 88px;
  background: var(--page);
}

.lead-panel.studio-glimpse {
  align-items: center;
}

.lead-panel.studio-glimpse img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  object-fit: cover;
  border-radius: 14px;
}

.lead-panel.studio-glimpse h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 14px;
}

.lead-panel.studio-glimpse p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.page-view {
  display: none;
}

.page-view.is-active {
  display: grid;
}

.section.page-view.is-active,
.contact-section.page-view.is-active {
  display: block;
}

.hero-pattern {
  position: absolute;
  inset: 68px 0 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
}

.line,
.circle {
  position: absolute;
  display: block;
}

.line {
  height: 1px;
  width: min(560px, 60vw);
  background: linear-gradient(90deg, transparent, rgba(163, 130, 74, 0.35) 40%, rgba(163, 130, 74, 0.35) 60%, transparent);
  transform: rotate(-7deg);
}

.line-one {
  left: -4%;
  top: 66%;
}

.line-two {
  right: -6%;
  bottom: 60%;
  transform: rotate(-7deg);
}

.circle {
  border: 1px solid rgba(163, 130, 74, 0.24);
  border-radius: 50%;
}

.circle-one {
  width: 620px;
  height: 620px;
  right: -18%;
  top: -12%;
}

.circle-two {
  width: 2px;
  height: 2px;
  display: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 20px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  text-align: left;
}

.hero-copy {
  max-width: 720px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--gold-text);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}

.pill::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1;
}

h1 {
  color: var(--ink);
  font-size: clamp(3.1rem, 5.6vw, 5.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-copy h1 {
  color: var(--white);
}

.hero-lead {
  max-width: 620px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--sans);
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  font-weight: 400;
  line-height: 1.6;
}

.brand-quote {
  max-width: 560px;
  margin: 26px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  font-style: italic;
}

.hero-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.home-panel {
  display: grid;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.home-panel-note {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
}

.home-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-benefits span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.panel-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.panel-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.trial-button,
.secondary-button,
.lime-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font-family: var(--serif);
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.trial-button {
  min-width: 242px;
  min-height: 80px;
  flex-direction: column;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--white);
  box-shadow: 0 16px 34px rgba(163, 130, 74, 0.32);
}

.trial-button strong {
  font-size: 1.25rem;
  line-height: 1.1;
}

.trial-button span {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 0.92rem;
}

.secondary-button {
  min-height: 50px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--white);
  font-size: 1.18rem;
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.trial-button:hover,
.secondary-button:hover,
.lime-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.benefit-strip {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vw, 74px);
  padding: 24px 20px;
  background: #fffaf3;
}

.benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--gold-text);
  font-family: var(--sans);
  font-weight: 800;
}

.auth-section {
  padding: 34px 20px 70px;
  background: var(--white);
}

body.reset-link-active .page-view.is-active {
  display: none !important;
}

body.reset-link-active .auth-section {
  min-height: calc(100vh - 86px);
}

.auth-shell {
  position: relative;
  max-width: 1270px;
  margin-inline: auto;
  padding: 38px 40px 68px;
  border-radius: 28px;
  background: var(--surface-alt);
}

.auth-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.4rem;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.auth-block h2 {
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.auth-block p {
  margin: 10px 0 26px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.38rem;
}

/* ---------- Entrar con Google ---------- */

.google-auth {
  margin-bottom: 22px;
}

.google-boton {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.google-error {
  margin: 10px 0 0;
  color: #963d35;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}

.google-error:empty {
  display: none;
}

.separador {
  position: relative;
  margin-top: 22px;
  text-align: center;
}

.separador::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.separador span {
  position: relative;
  padding: 0 14px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-form {
  padding: 28px 30px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.auth-form label,
.interest-form label,
.field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.auth-form label span {
  color: #b00000;
}

.auth-form input,
.interest-form input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 14px;
  margin-bottom: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form input:focus-visible,
.interest-form input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 164, 103, 0.22);
  outline: none;
}

.auth-form .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.photo-upload {
  min-height: 76px;
  display: grid !important;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  margin: 0 0 16px !important;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf9;
  color: var(--ink) !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.photo-upload:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

.photo-upload > span {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-soft);
}

.photo-upload svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-upload strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}

.photo-upload small {
  color: var(--muted);
  font-size: 0.78rem;
}

.profile-preview {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: -4px 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fbf8f3;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.profile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 48px;
}

.password-field button {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.password-field button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-field button .eye-closed {
  display: none;
}

.password-field button.is-visible .eye-open {
  display: none;
}

.password-field button.is-visible .eye-closed {
  display: block;
}

.auth-options {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: -6px;
}

.lime-button {
  min-height: 46px;
  padding: 0 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--white);
  font-size: 1.45rem;
  box-shadow: 0 14px 30px rgba(163, 130, 74, 0.26);
}

.remember {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}

.remember input {
  width: auto;
  height: auto;
  margin: 0;
}

.recover-link {
  display: inline-block;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: var(--gold-text);
  font-size: 0.82rem;
  padding: 0;
}

.privacy-copy {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
}

.reset-panel {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.auth-section.is-token-reset .auth-shell {
  max-width: 760px;
}

.auth-section.is-token-reset .reset-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.auth-section.is-token-reset .local-reset {
  margin-inline: auto;
}

.reset-panel h2 {
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.reset-panel > p {
  max-width: 720px;
  color: var(--muted);
}

.reset-form {
  max-width: 560px;
}

.local-reset {
  max-width: 620px;
  margin-top: 18px;
  padding: 30px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #fffdf9;
}

.local-reset h3 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}

.reset-eyebrow {
  margin: 0 0 8px;
  color: var(--gold-text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reset-help {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.65;
}

.local-reset label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.local-reset input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 14px;
  margin-bottom: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.local-reset input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 164, 103, 0.22);
  outline: none;
}

.token-reset-form .lime-button {
  width: 100%;
  max-width: none;
  margin-top: 4px;
  padding-inline: 14px;
  font-size: 1rem;
  line-height: 1.2;
}

.section {
  min-height: calc(100vh - 204px);
  padding: 120px 20px 92px;
  background: #fffaf3;
}

.muted {
  background: #f3eadf;
}

.classes-view {
  display: none;
  background:
    linear-gradient(135deg, #fffdf9 0%, #f3eadf 55%, #f2e8d8 100%);
}

.classes-view.page-view.is-active {
  display: grid;
  align-items: center;
}

.classes-layout {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.classes-intro {
  max-width: 430px;
}

.classes-intro h2 {
  font-size: clamp(3rem, 5vw, 5rem);
}

.classes-intro p:not(.eyebrow) {
  margin: 22px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
}

.classes-cta {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  box-shadow: 0 18px 46px rgba(42, 35, 29, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.classes-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(198, 164, 103, 0.26);
}

.classes-board {
  display: grid;
  gap: 18px;
}

.class-feature-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(221, 214, 204, 0.88);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.class-feature-card {
  min-height: 520px;
  display: grid;
  align-content: end;
  padding: 32px;
}

.class-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.class-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 26, 19, 0) 32%, rgba(31, 26, 19, 0.82) 100%);
  z-index: 0;
  pointer-events: none;
}

.class-feature-card > div {
  position: relative;
  z-index: 1;
}

.class-feature-card .class-kicker {
  color: var(--gold);
}

.class-feature-card h3 {
  color: var(--white);
}

.class-feature-card p:not(.class-kicker) {
  color: rgba(255, 255, 255, 0.82);
}

.class-feature-card .class-tags span {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

.class-kicker {
  margin: 0 0 10px;
  color: var(--gold-text);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.class-feature-card h3 {
  font-size: clamp(2.2rem, 3.4vw, 3.25rem);
}

.class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.class-tags span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.section-heading {
  max-width: 980px;
  margin: 0 auto 34px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-text);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

h3 {
  font-size: 2rem;
}

.section-heading p,
.studio-card p,
.schedule-box p,
.lead-panel p,
.footer p {
  color: var(--muted);
}

.account-guest {
  max-width: 480px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.account-guest p {
  margin: 0 0 18px;
  color: var(--muted);
}

.account-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.account-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.account-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--gold-soft);
}

.account-avatar img,
.account-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.account-avatar img {
  object-fit: cover;
}

.account-avatar svg {
  padding: 12px;
  fill: var(--gold-text);
}

.account-profile strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
}

.account-profile span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9rem;
}

.account-bookings {
  padding-top: 24px;
}

.account-bookings h3 {
  margin: 0 0 14px;
  font-size: 1.3rem;
}

.account-bookings ul {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.account-bookings li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 0.95rem;
}

.account-bookings li.booking-empty {
  border: 0;
  background: none;
  padding: 0;
}

.account-bookings li button {
  border: 0;
  background: none;
  color: var(--gold-text);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
}

.account-bookings li .booking-locked {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ---------- Avisos en el celular ---------- */

.avisos-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--surface-alt);
}

.avisos-texto h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.avisos-texto p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.avisos-boton {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.avisos-boton:hover:not(:disabled) {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.avisos-boton.is-activo {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.avisos-boton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .avisos-caja {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .avisos-boton {
    width: 100%;
  }
}

.cards-grid,
.plans-grid {
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.studio-card,
.plans-grid article,
.schedule-box,
.lead-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.studio-card {
  padding: 32px;
}

.studio-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--gold-soft);
  font-weight: 800;
}

.plans-grid article {
  padding: 28px;
  text-align: center;
}

.plans-grid strong,
.plans-grid span {
  display: block;
}

.plans-grid strong {
  font-family: var(--serif);
  font-size: 2rem;
}

.plans-grid span {
  color: var(--muted);
}

.schedule-steps {
  max-width: 1080px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.schedule-step {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.schedule-step-number {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.schedule-step h3 {
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.schedule-step p {
  margin: 0;
  color: var(--muted);
}

.schedule-box {
  max-width: 900px;
  margin-inline: auto;
  padding: 36px;
  text-align: center;
}

.schedule-box p {
  margin: 0 0 20px;
}

.schedule-box .classes-cta {
  margin-top: 0;
}

.booking-widget {
  position: relative;
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.booking-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  background: rgba(31, 26, 19, 0.72);
  contain: layout paint;
  animation: popupFadeIn 0.28s ease forwards;
}

.booking-popup.is-closing {
  animation: popupFadeOut 0.3s ease forwards;
}

.booking-popup-card {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  padding: 44px 40px 36px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(31, 26, 19, 0.32);
  text-align: center;
  animation: popupCardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.booking-popup-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: 0.01em;
  animation: popupRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s backwards;
}

.booking-popup-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  color: var(--gold-deep);
  opacity: 0;
}

.booking-popup-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-popup-icon.is-visible {
  opacity: 1;
}

.booking-popup-icon.is-visible .icon-ring {
  animation: drawRing 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.booking-popup-icon.is-visible .icon-mark {
  animation: drawMark 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.34s backwards;
}

.booking-popup.is-sad .booking-popup-icon {
  color: var(--muted);
}

.booking-popup-detail {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.booking-popup-detail.is-visible {
  opacity: 1;
}

.booking-popup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  animation: popupRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s backwards;
}

.booking-popup-actions button {
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.booking-popup-close,
.booking-popup-confirm {
  background: var(--ink);
  color: var(--surface);
}

.booking-popup-close:hover,
.booking-popup-confirm:hover {
  background: var(--gold-deep);
}

.booking-popup-cancel {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}

.booking-popup-cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
}

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

@keyframes drawRing {
  from { stroke-dashoffset: 151; }
  to { stroke-dashoffset: 0; }
}

@keyframes drawMark {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@keyframes popupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popupFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

.booking-widget-head h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.booking-widget-head p:not(.eyebrow) {
  margin: 0 0 20px;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.booking-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.booking-calendar-nav button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.booking-calendar-nav button:hover:not(:disabled) {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.booking-calendar-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.booking-calendar-nav p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
}

.booking-calendar-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.booking-calendar {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 4px;
}

.booking-calendar thead th {
  padding: 10px 4px;
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.booking-calendar thead th small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
}

.booking-calendar thead th.is-today {
  color: var(--gold-text);
}

.booking-calendar thead th.is-past-day {
  color: var(--muted);
  opacity: 0.5;
}

.booking-calendar thead th.is-past-day small {
  font-style: italic;
}

.booking-calendar-corner {
  background: var(--surface-alt);
}

.booking-calendar tbody th {
  padding: 0 10px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}

.booking-calendar-gap td {
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: italic;
  text-align: center;
}

.booking-cell {
  width: 100%;
  min-width: 78px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.booking-cell strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}

.booking-cell span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gold-text);
}

.booking-cell.is-open:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

.booking-cell.is-low {
  border-color: rgba(198, 164, 103, 0.55);
  background: var(--gold-soft);
}

.booking-cell.is-full,
.booking-cell.is-day-taken {
  background: var(--page);
  opacity: 0.6;
  cursor: not-allowed;
}

.booking-cell.is-full span,
.booking-cell.is-day-taken span {
  color: var(--muted);
}

.booking-cell.is-mine {
  border: 1px solid var(--gold);
  border-left: 3px solid var(--gold);
  background: var(--surface);
  cursor: pointer;
}

.booking-cell.is-mine:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.booking-cell.is-mine strong {
  color: var(--gold-text);
  font-size: 0.95rem;
}

.booking-cell.is-mine span {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

td.is-past {
  color: var(--line);
  text-align: center;
}

.booking-loading-row {
  padding: 30px !important;
  color: var(--muted);
  text-align: center;
}

.booking-error-row {
  padding: 26px 20px !important;
  color: var(--ink);
  text-align: center;
  line-height: 1.6;
}

.booking-error-row code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-alt);
  font-size: 0.9em;
}

.booking-error-row button {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-text);
  font-weight: 700;
}

.booking-error-row button:hover {
  background: var(--gold);
  color: var(--white);
}

.booking-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.booking-legend span {
  display: inline-flex;
  align-items: center;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
}

.legend-dot.legend-open {
  background: var(--surface);
  border: 1px solid var(--line);
}

.legend-dot.legend-low {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
}

.legend-dot.legend-full {
  background: var(--page);
  border: 1px solid var(--line);
}

.legend-dot.legend-mine {
  background: var(--gold);
}

.booking-empty {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.booking-widget .booking-status {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: var(--ink);
  font-weight: 700;
}

.booking-status.is-success {
  color: var(--gold-text);
  animation: statusReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-status.is-cancel {
  color: var(--muted);
  animation: statusReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-week-count {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@keyframes statusReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bookingCellSettle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.booking-cell.just-booked,
.booking-cell.just-cancelled {
  animation: bookingCellSettle 0.45s ease;
}


.contact-section {
  min-height: calc(100vh - 204px);
  padding: 122px 20px 90px;
  background:
    linear-gradient(135deg, #fffdf9, #f4eadf);
  text-align: center;
}

.contact-heading h2 {
  font-size: clamp(2.7rem, 5vw, 4rem);
}

.contact-heading p {
  margin: 22px 0 34px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 700;
}

.contact-cards {
  max-width: 1135px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
}

.contact-card {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.contact-whatsapp,
.contact-instagram,
.contact-mail {
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
  color: var(--ink);
}

.contact-whatsapp .contact-icon,
.contact-instagram .contact-icon,
.contact-mail .contact-icon {
  border-color: rgba(226, 217, 206, 0.95);
  background: rgba(255, 255, 255, 0.7);
}

.contact-whatsapp strong,
.contact-instagram strong,
.contact-mail strong {
  color: var(--ink);
  text-shadow: none;
}

.contact-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(47, 48, 45, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.contact-icon img {
  width: 30px;
  height: 30px;
  display: block;
}

.contact-card strong {
  font-size: 1.35rem;
  line-height: 1.18;
}

.contact-address {
  width: min(520px, 100%);
  display: grid;
  gap: 4px;
  margin: 28px auto 0;
  padding: 18px 24px;
  border: 1px solid rgba(221, 214, 204, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-style: normal;
}

.contact-address span {
  color: var(--gold-text);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-address strong {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.contact-help {
  margin: 56px 0 0;
  color: var(--ink);
  font-size: 1.15rem;
}

.contact-help a {
  color: var(--gold-text);
  font-weight: 800;
  text-decoration: underline;
}

.contact-map {
  width: min(720px, 100%);
  margin: 28px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.contact-map iframe {
  width: 100%;
  height: 260px;
  display: block;
  border: 0;
}

.contact-config-note {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-faq {
  max-width: 1080px;
  margin: 56px auto 0;
  text-align: left;
}

.contact-faq h3 {
  margin: 0 0 20px;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.faq-mini details summary {
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  list-style: none;
}

.faq-mini details summary::-webkit-details-marker {
  display: none;
}

.faq-mini details summary::after {
  content: "+";
  float: right;
  color: var(--gold-text);
  font-family: var(--sans);
  font-weight: 800;
}

.faq-mini details[open] summary::after {
  content: "\2212";
}

.faq-mini details p {
  margin: 14px 0 0;
  color: var(--muted);
}

.faq-mini {
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 auto;
}

.faq-mini article {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.lead-panel {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 34px;
  padding: 38px;
}

.legal-section {
  min-height: 560px;
  padding-top: 130px;
}

.legal-copy {
  max-width: 900px;
  margin-inline: auto;
  padding: 46px;
  border: 1px solid rgba(221, 214, 204, 0.86);
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: var(--shadow);
}

.legal-copy h2 {
  margin-bottom: 26px;
}

.legal-copy p:not(.eyebrow) {
  color: #51483f;
  font-size: 1.05rem;
}

.interest-form {
  display: grid;
}

.interest-form .lime-button {
  justify-self: start;
  margin-top: 6px;
}

.error-message {
  min-height: 18px;
  margin-top: -12px;
  margin-bottom: 10px;
  color: #963d35;
  font-size: 0.84rem;
  font-weight: 700;
}

.form-status {
  margin: 12px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  padding: 38px max(20px, calc((100vw - 1210px) / 2));
  background:
    linear-gradient(135deg, #241f18, #3d3120);
  color: var(--white);
}

.footer strong {
  font-family: var(--serif);
  font-size: 1.8rem;
}

.footer p,
.footer small {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
}

.footer small {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
}

.footer nav {
  max-width: 520px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 18px;
  color: rgba(255, 255, 255, 0.75);
}

.footer a:hover {
  color: var(--gold);
}

.music-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.92);
  color: var(--gold-text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.music-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.music-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-toggle .icon-sound-off {
  display: none;
}

.music-toggle.is-muted {
  color: var(--muted);
}

.music-toggle.is-muted .icon-sound-on {
  display: none;
}

.music-toggle.is-muted .icon-sound-off {
  display: block;
}

@media (max-width: 760px) {
  .music-toggle {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .music-toggle svg {
    width: 19px;
    height: 19px;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 1060px) {
  .main-nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 76px;
    left: 20px;
    right: 20px;
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .wordmark {
    min-width: auto;
  }

  .wordmark img {
    height: 38px;
  }

  .student-button {
    padding-inline: 20px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    max-width: 760px;
    text-align: center;
  }

  .hero-photo-block::after {
    background: linear-gradient(180deg, rgba(31, 26, 19, 0.82), rgba(31, 26, 19, 0.72));
  }

  .hero-copy {
    max-width: none;
  }

  .hero-lead {
    margin-inline: auto;
  }

  .brand-quote {
    margin-inline: auto;
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 3px solid rgba(198, 164, 103, 0.95);
  }

  .hero-actions {
    justify-content: center;
  }

  .classes-layout,
  .classes-board {
    grid-template-columns: 1fr;
  }

  .classes-layout {
    width: min(100% - 40px, 760px);
  }

  .classes-intro {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .auth-grid,
  .lead-panel,
  .contact-cards,
  .faq-mini,
  .schedule-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    height: 72px;
  }

  .main-nav {
    width: min(100% - 24px, 1210px);
    gap: 10px;
  }

  .student-button {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 0.95rem;
  }

  .wordmark img {
    height: 32px;
  }

  .hero-photo-block {
    min-height: auto;
    padding-top: 108px;
    padding-bottom: 42px;
  }

  .hero-actions,
  .benefit-strip {
    flex-direction: column;
  }

  .trial-button,
  .secondary-button {
    width: min(100%, 330px);
  }

  .home-panel {
    padding: 18px;
  }

  .classes-view {
    align-items: start;
  }

  .classes-layout {
    width: min(100% - 24px, 680px);
  }

  .class-feature-card {
    min-height: 500px;
    padding: 24px;
  }

  .benefit-strip {
    align-items: flex-start;
  }

  .auth-shell {
    padding: 42px 18px 28px;
    border-radius: 22px;
  }

  .auth-form {
    padding: 22px;
  }

  .cards-grid,
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .lead-panel {
    padding: 24px;
  }

  .booking-widget {
    padding: 24px 18px;
  }

  .legal-section {
    min-height: auto;
    padding-top: 96px;
  }

  .legal-copy {
    padding: 30px 22px;
  }

  .contact-section {
    min-height: auto;
    padding-top: 96px;
  }

  .contact-card {
    min-height: 170px;
  }

  .footer {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .footer nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ============================================================
   MEJORAS DE PRESENTACION
   ============================================================

   Todo lo de aca abajo es agregado: no se modifico ninguna regla
   anterior. Si algo no gusta, se borra este bloque entero y la web
   vuelve exactamente a como estaba.

   Contiene tres cosas:
     1. Header transparente sobre el video, que toma color al bajar
     2. Alineaciones (que el hero coincida con el resto de la web)
     3. Animaciones de entrada y de scroll
   ============================================================ */

:root {
  /* Curva de movimiento unica para toda la web: arranca rapido y
     frena suave. Es lo que da la sensacion "cara" en vez de lineal. */
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --alto-header: 68px;
}


/* ============================================================
   1. HEADER TRANSPARENTE SOBRE EL VIDEO
   ============================================================

   Al entrar, la barra de arriba no tiene fondo ni bordes: se ven
   los textos flotando sobre el video. Apenas se baja un poco, el
   fondo y los colores aparecen con una transicion suave.

   La clase la pone script.js:
     body.vista-inicio  -> estamos en la portada (la del video)
     body.con-scroll    -> ya se bajo de los 60px

   El estado transparente pide las dos: portada Y arriba de todo.
   Asi en Clases, Horarios o Contacto (que tienen fondo claro) la
   barra siempre conserva su color y el texto se lee.
   ============================================================ */

.topbar {
  transition:
    background-color 0.45s var(--salida),
    border-color 0.45s var(--salida),
    box-shadow 0.45s var(--salida),
    height 0.4s var(--salida);
}

/* --- El estado transparente --- */

body.vista-inicio:not(.con-scroll) .topbar {
  height: 84px;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Los links del menu: solo el texto, sin la pastilla de color */
body.vista-inicio:not(.con-scroll) .nav-menu a {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  /* La sombra hace que el texto se lea sobre cualquier fotograma
     del video, incluso en las partes mas claras. */
  text-shadow: 0 1px 12px rgba(24, 20, 15, 0.55);
}

body.vista-inicio:not(.con-scroll) .nav-menu a:hover,
body.vista-inicio:not(.con-scroll) .nav-menu a.is-current,
body.vista-inicio:not(.con-scroll) .nav-menu a[aria-current="page"] {
  background: transparent;
  color: #ffffff;
}

/* En vez de la pastilla, la seccion actual se marca con una linea
   dorada fina que crece desde el centro. */
body.vista-inicio:not(.con-scroll) .nav-menu a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1.5px;
  background: var(--gold-logo);
  transform: scaleX(0);
  transition: transform 0.35s var(--salida);
}

body.vista-inicio:not(.con-scroll) .nav-menu a:hover::after,
body.vista-inicio:not(.con-scroll) .nav-menu a.is-current::after {
  transform: scaleX(1);
}

/* El boton "Ya soy alumno": contorno claro en vez de negro */
body.vista-inicio:not(.con-scroll) .student-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 10px rgba(24, 20, 15, 0.45);
}

body.vista-inicio:not(.con-scroll) .student-button:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
  text-shadow: none;
}

/* El perfil, cuando hay sesion iniciada */
body.vista-inicio:not(.con-scroll) .profile-button {
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(24, 20, 15, 0.45);
}

/* El boton de menu en celular */
body.vista-inicio:not(.con-scroll) .nav-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}

body.vista-inicio:not(.con-scroll) .nav-toggle span {
  background: #ffffff;
}

/* Que la linea dorada pueda posicionarse dentro del link */
.nav-menu a {
  position: relative;
}

/* Transiciones para que el cambio de transparente a color no sea
   un salto seco, sino un fundido. */
.nav-menu a,
.student-button,
.profile-button,
.nav-toggle,
.nav-toggle span {
  transition:
    background-color 0.45s var(--salida),
    border-color 0.45s var(--salida),
    color 0.45s var(--salida),
    text-shadow 0.45s var(--salida),
    transform 0.2s ease;
}

/* El logo sobre el video necesita un poco mas de presencia */
body.vista-inicio:not(.con-scroll) .wordmark img {
  filter: brightness(1.18) drop-shadow(0 2px 14px rgba(24, 20, 15, 0.5));
  transition: filter 0.45s var(--salida);
}

/* Al bajar, la barra se compacta un poco: da sensacion de que la
   web "responde" al scroll. */
body.con-scroll .topbar {
  height: 64px;
  box-shadow: 0 6px 28px rgba(41, 35, 28, 0.08);
}

/* En celular el menu desplegable es un panel propio con fondo
   claro, asi que ahi los links vuelven a su color de siempre. */
@media (max-width: 1060px) {
  body.vista-inicio:not(.con-scroll) .nav-menu a {
    color: var(--ink);
    text-shadow: none;
  }

  body.vista-inicio:not(.con-scroll) .nav-menu a::after {
    display: none;
  }

  body.vista-inicio:not(.con-scroll) .nav-menu a:hover,
  body.vista-inicio:not(.con-scroll) .nav-menu a.is-current {
    background: var(--gold-soft);
    color: var(--ink);
  }

  body.vista-inicio:not(.con-scroll) .topbar {
    height: 68px;
  }
}


/* ============================================================
   2. ALINEACIONES
   ============================================================ */

/* El hero usaba un ancho propio (1180px) distinto al del resto de
   la web (--container, 1210px). Por eso el titulo no arrancaba en
   la misma linea vertical que los titulos de abajo. Ahora comparten
   la misma medida y todo cae en la misma columna. */
.hero-content {
  width: var(--container);
}

/* La portada ocupa la pantalla entera. Como la barra es
   transparente y flota encima, el video se ve completo de punta a
   punta en vez de arrancar debajo del header. */
.hero-photo-block {
  min-height: 100vh;
  padding-top: calc(var(--alto-header) + 56px);
}

/* Altura pareja en todos los controles de la barra. Antes el link
   del menu media 44px, el boton de alumno 46 y el de perfil 48:
   se notaba como un desnivel sutil. */
.nav-menu a,
.student-button,
.profile-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* El bloque del menu queda centrado de verdad respecto de la barra */
.main-nav {
  gap: 20px;
}

/* Los dos botones del hero al mismo alto, para que la base coincida */
.hero-actions .trial-button,
.hero-actions .secondary-button {
  min-height: 62px;
}


/* ============================================================
   3. ANIMACIONES
   ============================================================ */

/* --- El video entra con un acercamiento muy lento ---
   Es casi imperceptible por segundo, pero le saca la sensacion de
   foto fija y hace que la portada respire. */
.hero-video {
  animation: videoRespira 26s ease-out forwards;
}

@keyframes videoRespira {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

/* --- Entrada escalonada del hero ---
   Los elementos no aparecen todos juntos: entran uno detras de
   otro, de arriba hacia abajo. Es lo que hace que se lea como una
   secuencia y no como un parpadeo. */
.hero-copy > *,
.landing-hero .home-panel {
  animation: entraDesdeAbajo 1s var(--salida) backwards;
}

.hero-copy .pill        { animation-delay: 0.15s; }
.hero-copy h1           { animation-delay: 0.28s; }
.hero-copy .hero-lead   { animation-delay: 0.41s; }
.hero-copy .brand-quote { animation-delay: 0.54s; }
.hero-copy .hero-actions{ animation-delay: 0.67s; }
.landing-hero .home-panel { animation-delay: 0.6s; }

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

/* La barra de arriba baja al entrar */
.topbar {
  animation: bajaHeader 0.9s var(--salida) backwards;
}

@keyframes bajaHeader {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Reveal al hacer scroll ---
   El efecto ya existia. Se le agrega un desplazamiento un poco
   mayor y la curva suave, para que acompanie al resto. */
.reveal {
  transform: translateY(32px);
  transition:
    opacity 0.85s var(--salida),
    transform 0.85s var(--salida);
}

/* Las tarjetas de una misma fila entran una detras de otra en vez
   de todas de golpe. */
.class-feature-card.reveal:nth-child(2),
.studio-card.reveal:nth-child(2),
.contact-card.reveal:nth-child(2),
.schedule-step.reveal:nth-child(2) { transition-delay: 0.1s; }

.class-feature-card.reveal:nth-child(3),
.studio-card.reveal:nth-child(3),
.contact-card.reveal:nth-child(3),
.schedule-step.reveal:nth-child(3) { transition-delay: 0.2s; }

.class-feature-card.reveal:nth-child(4),
.studio-card.reveal:nth-child(4),
.contact-card.reveal:nth-child(4),
.schedule-step.reveal:nth-child(4) { transition-delay: 0.3s; }

/* --- Hover de tarjetas ---
   Se levantan apenas y la sombra se abre. El movimiento corto y la
   sombra ancha son lo que da la lectura de calidad. */
.class-feature-card,
.studio-card,
.contact-card,
.schedule-box {
  transition:
    transform 0.4s var(--salida),
    box-shadow 0.4s var(--salida);
}

.class-feature-card:hover,
.studio-card:hover,
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(41, 35, 28, 0.14);
}

/* Las fotos dentro de las tarjetas acompanan el hover con un
   acercamiento contenido. */
.class-feature-card,
.studio-card {
  overflow: hidden;
}

.class-feature-card img,
.studio-card img {
  transition: transform 0.7s var(--salida);
}

.class-feature-card:hover img,
.studio-card:hover img {
  transform: scale(1.05);
}

/* --- Botones ---
   Un brillo que cruza el boton al pasar el mouse. */
.trial-button,
.panel-link,
.secondary-button {
  position: relative;
  overflow: hidden;
}

.trial-button::after,
.panel-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.7s var(--salida);
  pointer-events: none;
}

.trial-button:hover::after,
.panel-link:hover::after {
  left: 125%;
}

/* --- Titulos de seccion ---
   La linea dorada debajo del titulo se dibuja sola cuando la
   seccion entra en pantalla. */
.section-heading.reveal .eyebrow {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.section-heading.reveal .eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46px;
  height: 1.5px;
  margin-left: -23px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.8s var(--salida) 0.25s;
}

.section-heading.reveal.is-visible .eyebrow::after {
  transform: scaleX(1);
}

/* --- Respeto por quien pidio menos movimiento ---
   Si la persona configuro su sistema para reducir animaciones, no
   corre ninguna de las de arriba: ve la web quieta y completa. */
@media (prefers-reduced-motion: reduce) {
  .hero-video,
  .hero-copy > *,
  .landing-hero .home-panel,
  .topbar {
    animation: none !important;
  }

  .trial-button::after,
  .panel-link::after {
    display: none;
  }
}


/* ============================================================
   DISTRIBUCION EDITORIAL
   ============================================================

   Segundo bloque agregado, independiente del anterior. Se puede
   borrar solo este y la web conserva el header transparente y las
   animaciones; se borran los dos y vuelve al diseno original.

   QUE CAMBIA Y POR QUE
   --------------------
   El diseno anterior centraba casi todo: titulo al medio, texto al
   medio, tarjetas al medio. Centrar todo es lo que hace que una web
   se lea "simple", porque no hay jerarquia: todo pesa igual.

   Acá se pasa a una estructura de revista:
     - Los titulos van a la izquierda, anclados a una linea dorada.
     - La bajada de texto se corre a la derecha, en una columna mas
       angosta. El ojo entra por el titulo y despues baja al texto.
     - Las imagenes se salen del margen y se superponen.
     - Mucho mas aire vertical entre secciones.

   En celular todo vuelve a una sola columna: ahi el centrado si
   funciona porque no hay espacio para jerarquia horizontal.
   ============================================================ */

/* --- Ritmo vertical mas amplio ---
   El aire es lo mas barato y lo que mas sube la percepcion de
   calidad. Las secciones respiran casi el doble que antes. */
.section {
  padding: clamp(90px, 11vh, 150px) 20px clamp(80px, 10vh, 130px);
}

.contact-section {
  padding: clamp(100px, 12vh, 160px) 20px clamp(80px, 10vh, 130px);
}


/* ============================================================
   TITULOS DE SECCION EN DOS COLUMNAS
   ============================================================ */

.section-heading {
  width: var(--container);
  max-width: none;
  margin: 0 auto clamp(46px, 6vw, 84px);
  padding-top: 26px;
  text-align: left;

  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 14px;
  align-items: start;

  /* La linea dorada que cruza arriba del titulo: es el gesto que
     mas "estudio de diseno" agrega, y es una sola linea de CSS. */
  border-top: 1px solid var(--line);
  position: relative;
}

.section-heading::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.section-heading .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.section-heading h2 {
  grid-column: 1;
  grid-row: 2;
  line-height: 1.02;
}

/* La bajada ocupa la columna derecha y se alinea con la base del
   titulo, no con su tope: asi las dos columnas "apoyan" parejo. */
.section-heading p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  max-width: 46ch;
  margin: 0 0 8px;
  font-size: 1.06rem;
  line-height: 1.7;
}


/* ============================================================
   EL ESTUDIO (foto + texto) EN COMPOSICION ASIMETRICA
   ============================================================ */

.studio-glimpse-wrap {
  padding: clamp(80px, 10vh, 140px) 20px clamp(90px, 11vh, 150px);
}

.lead-panel.studio-glimpse {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  /* Asimetrica a proposito: la foto manda, el texto acompania. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lead-panel.studio-glimpse img {
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  object-fit: cover;
  border-radius: 4px;
}

/* El texto arranca con la misma linea dorada que los titulos de
   seccion: es lo que hace que la web se lea como un sistema y no
   como paginas sueltas. */
.lead-panel.studio-glimpse > div {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.lead-panel.studio-glimpse > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.lead-panel.studio-glimpse h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.06;
}

.lead-panel.studio-glimpse p {
  margin-top: 20px;
  font-size: 1.06rem;
  line-height: 1.75;
}


/* ============================================================
   CLASES
   ============================================================ */

.classes-layout {
  width: var(--container);
  /* La columna de texto arriba, no centrada verticalmente: el
     titulo queda a la altura del borde superior de la foto. */
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}

.classes-intro {
  max-width: 460px;
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  /* Queda fija mientras se recorre la tarjeta de al lado. Es un
     recurso de catalogo caro y no necesita JavaScript. */
  position: sticky;
  top: 120px;
}

.classes-intro::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.classes-intro h2 {
  line-height: 1.02;
}

.class-feature-card {
  border-radius: 6px;
  min-height: 600px;
}


/* ============================================================
   CONTACTO
   ============================================================ */

.contact-heading {
  width: var(--container);
  margin: 0 auto clamp(40px, 5vw, 72px);
  padding-top: 26px;
  text-align: left;
  border-top: 1px solid var(--line);
  position: relative;
}

.contact-heading::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.contact-heading p {
  max-width: 48ch;
}

.contact-cards {
  width: var(--container);
  max-width: none;
  gap: 18px;
}

/* Tarjetas mas altas y con el contenido apoyado abajo, como fichas
   de catalogo, en vez de todo flotando al centro. */
.contact-card {
  min-height: 280px;
  place-items: start;
  align-content: end;
  gap: 18px;
  padding: 30px;
  border-radius: 6px;
  text-align: left;
}

.contact-card strong {
  text-align: left;
}

/* Todos los bloques de contacto comparten el mismo ancho y el mismo
   borde izquierdo. Antes cada uno tenia su propio max-width (520px,
   620px, 720px, 1080px) y quedaban escalonados hacia adentro: eso
   era buena parte de la sensacion de "simple". */
.contact-address,
.contact-map,
.contact-config-note,
.contact-faq {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
  text-align: left;
}

.contact-address {
  border-radius: 6px;
}

.contact-map iframe {
  border-radius: 6px;
}

.faq-mini {
  max-width: none;
}


/* ============================================================
   UNA SOLA COLUMNA PARA TODA LA WEB
   ============================================================

   Cada bloque traia su propio ancho maximo heredado: 480, 520, 620,
   720, 900, 1080, 1120, 1210. Al estar todos centrados, cada uno
   arrancaba en un punto distinto y el ojo veia un escalonado hacia
   adentro. Eso es lo que mas hace ver una web como plantilla.

   Ahora todos apoyan sobre la misma linea vertical izquierda.
   ============================================================ */

.lead-panel.studio-glimpse,
.booking-widget,
.schedule-box {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
}

/* La foto del estudio deja de ser una "tarjeta" con borde y sombra
   y pasa a ser una composicion limpia: la imagen manda sola. */
.lead-panel.studio-glimpse {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.schedule-box {
  text-align: left;
  padding-inline: 0;
}

/* Los bloques que no conviene estirar a todo el ancho (quedarian
   vacios) conservan su tamano, pero se alinean por la izquierda en
   lugar de quedar centrados. El calculo los apoya exactamente sobre
   el borde del contenedor. */
.account-guest,
.account-panel {
  margin-left: max(0px, calc((100% - var(--container)) / 2));
  margin-right: auto;
  text-align: left;
}

@media (max-width: 900px) {
  .account-guest,
  .account-panel {
    margin-inline: auto;
  }

  .schedule-box {
    padding-inline: 20px;
  }
}


/* ============================================================
   PREGUNTAS FRECUENTES COMO LISTA, NO COMO CAJAS
   ============================================================

   Las cajas con sombra compiten entre si. Una lista separada por
   lineas finas se lee mas rapido y se ve mas cuidada.
   ============================================================ */

.contact-faq {
  width: var(--container);
  margin-inline: auto;
  text-align: left;
}

.contact-faq h3 {
  text-align: left;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.faq-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
}

.faq-mini article {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.faq-mini details summary {
  padding: 22px 34px 22px 0;
}

.faq-mini details p {
  padding-bottom: 22px;
}


/* ============================================================
   TIPOGRAFIA
   ============================================================ */

/* Los titulos grandes necesitan las letras un poco mas juntas: a
   tamano chico el espaciado ayuda a leer, a tamano grande sobra y
   se ve amateur. */
h1,
h2 {
  letter-spacing: -0.018em;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
}

/* El subrayado dorado que se dibujaba bajo el "eyebrow" ya no va:
   ahora esa funcion la cumple la linea dorada del borde superior, y
   tener las dos marcas juntas competia entre si. */
.section-heading.reveal .eyebrow::after {
  display: none;
}


/* ============================================================
   FLECHITA DE "SEGUI BAJANDO" EN LA PORTADA
   ============================================================ */

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 2;
  width: 1px;
  height: 56px;
  margin-left: -0.5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

/* Un destello dorado que baja por la linea, en loop. */
.hero-scroll span {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 22px;
  background: var(--gold-logo);
  animation: bajaDestello 2.4s ease-in-out infinite;
}

@keyframes bajaDestello {
  0%   { transform: translateY(-24px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* Al bajar desaparece: ya cumplio su funcion. */
body.con-scroll .hero-scroll {
  opacity: 0;
  transition: opacity 0.4s var(--salida);
}


/* ============================================================
   EN CELULAR VUELVE A UNA COLUMNA
   ============================================================

   La composicion de dos columnas necesita ancho. Abajo de 900px
   todo se apila y se centra, que es lo que funciona en pantalla
   angosta.
   ============================================================ */

@media (max-width: 900px) {
  .section-heading {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .section-heading h2,
  .section-heading .eyebrow,
  .section-heading p:not(.eyebrow) {
    grid-column: 1;
    grid-row: auto;
  }

  .section-heading p:not(.eyebrow) {
    max-width: none;
  }

  .lead-panel.studio-glimpse {
    grid-template-columns: 1fr;
  }

  .lead-panel.studio-glimpse img {
    height: clamp(260px, 42vh, 380px);
  }

  .classes-intro {
    position: static;
    max-width: none;
  }

  .faq-mini {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: 210px;
  }

  .hero-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll span {
    animation: none;
  }
}


/* ============================================================
   CLASES Y CONTACTO
   ============================================================

   Tercer bloque agregado. Solo toca el diseno y la ubicacion de
   los elementos de estas dos secciones. Ni los enlaces, ni el
   mapa, ni el mecanismo de reservas cambian.
   ============================================================ */


/* ============================================================
   CLASES
   ============================================================

   Antes: una foto con el texto encima, abajo a la izquierda. Se
   leia como un banner.

   Ahora: la foto va limpia y el texto baja a un panel que se monta
   sobre el borde inferior. Ese desfase entre foto y panel es el
   recurso clasico de catalogo caro: da profundidad sin efectos.
   ============================================================ */

.class-feature-card {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Se quita el velo oscuro: ya no hay texto sobre la foto. */
.class-feature-card::after {
  display: none;
}

.class-photo {
  position: static;
  width: 100%;
  height: clamp(400px, 58vh, 600px);
  object-fit: cover;
  border-radius: 4px;
}

/* El panel de texto: angosto, corrido a la derecha y montado sobre
   la foto. Al no ocupar todo el ancho, deja ver la imagen y genera
   la asimetria que hace que se lea como una pieza disenada. */
.class-feature-card > div {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 520px);
  margin: -96px 0 0 auto;
  margin-right: 28px;
  padding: 34px 36px 36px;
  background: var(--surface);
  border-top: 2px solid var(--gold);
  box-shadow: 0 24px 60px rgba(41, 35, 28, 0.16);
}

/* Los textos vuelven a color oscuro: ya no estan sobre la foto. */
.class-feature-card .class-kicker {
  color: var(--gold-text);
}

.class-feature-card h3 {
  color: var(--ink);
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  line-height: 1.04;
}

.class-feature-card p:not(.class-kicker) {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Las etiquetas dejan de ser pastillas y pasan a ser una linea de
   versalitas separadas por barras finas, como una ficha tecnica.
   Tres pastillas juntas se leen como botones; esto se lee como
   dato. */
.class-feature-card .class-tags {
  gap: 0;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.class-feature-card .class-tags span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gold-text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.class-feature-card .class-tags span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 14px -1px;
  background: var(--line);
}

/* El hover levanta solo la foto, no el bloque entero: el panel
   queda quieto y el movimiento se siente mas controlado. */
.class-feature-card:hover {
  transform: none;
  box-shadow: none;
}

.class-feature-card .class-photo {
  transition: transform 0.7s var(--salida);
}

.class-feature-card:hover .class-photo {
  transform: none;
}

.classes-intro .classes-cta {
  margin-top: 34px;
}


/* ============================================================
   CONTACTO
   ============================================================

   Antes todo era una pila de franjas a lo ancho: tres tarjetas,
   despues la direccion, despues el mapa. Cada franja empujaba a la
   siguiente hacia abajo y la seccion se leia como un formulario.

   Ahora son dos columnas: a la izquierda las formas de contacto
   como lista, a la derecha el mapa a lo alto. Se ve todo junto sin
   scrollear y queda equilibrado.
   ============================================================ */

.contact-main {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.contact-ways {
  display: flex;
  flex-direction: column;
}

/* Las tres formas de contacto pasan de tarjetas sueltas a una lista
   continua separada por lineas finas. Ocupa menos, se compara mas
   rapido y se ve mas cuidado. */
.contact-cards {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.contact-card {
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.contact-card:first-child {
  border-top: 1px solid var(--line);
}

/* Se anula el fondo degradado que traian las tres variantes */
.contact-whatsapp,
.contact-instagram,
.contact-mail {
  background: transparent;
}

.contact-icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.35s var(--salida), background-color 0.35s var(--salida);
}

.contact-icon img {
  width: 21px;
  height: 21px;
}

.contact-card strong {
  font-size: 1.06rem;
  font-weight: 600;
  font-family: var(--serif);
  letter-spacing: 0.01em;
}

/* La flecha de la tercera columna. Se dibuja con CSS, no hace falta
   agregar nada al HTML. */
.contact-card::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-top: 1.5px solid var(--gold-deep);
  border-right: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform 0.35s var(--salida), opacity 0.35s var(--salida);
}

.contact-card:hover {
  transform: none;
  box-shadow: none;
}

.contact-card:hover::after {
  opacity: 1;
  transform: rotate(45deg) translate(4px, -4px);
}

.contact-card:hover .contact-icon {
  border-color: var(--gold);
  background: var(--gold-soft);
}

/* La direccion cierra la columna, pegada abajo para que las dos
   columnas terminen a la misma altura. */
.contact-address {
  width: auto;
  margin: auto 0 0;
  padding: 26px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact-address span {
  letter-spacing: 0.18em;
}

.contact-address strong {
  font-family: var(--serif);
  font-size: 1.3rem;
}

/* El mapa ocupa toda la altura de la columna de al lado. */
.contact-map {
  width: auto;
  margin: 0;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: 4px;
}

.contact-config-note {
  margin-top: 26px;
  font-size: 0.88rem;
}


/* ============================================================
   EN PANTALLA ANGOSTA VUELVEN A UNA COLUMNA
   ============================================================ */

@media (max-width: 900px) {
  /*
   * En pantalla angosta el ancho util lo define el padding de cada
   * seccion (20px). Si --container ademas resta otros 20px de cada
   * lado, los margenes quedan al doble y el texto se comprime.
   * Aca se deja que los bloques ocupen todo el ancho disponible.
   */
  :root {
    --container: 100%;
  }

  .contact-main {
    grid-template-columns: 1fr;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 320px;
  }

  .contact-address {
    margin-top: 26px;
  }

  .class-feature-card > div {
    width: calc(100% - 32px);
    margin: -60px auto 0;
    padding: 28px 26px 30px;
  }

  .class-photo {
    height: clamp(280px, 42vh, 400px);
  }
}


/* ============================================================
   CLASES (refuerzo) Y HORARIOS
   ============================================================

   Cuarto bloque agregado. Sigue sin tocarse el mecanismo: los
   botones del calendario, sus clases de estado y el JavaScript que
   los genera son los mismos. Solo cambia como se ven.
   ============================================================ */


/* ============================================================
   CLASES: composicion mas marcada
   ============================================================ */

/* Mas peso a la imagen y mas aire a la columna de texto. */
.classes-layout {
  grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1.24fr);
}

.classes-intro h2 {
  font-size: clamp(2.6rem, 4vw, 4rem);
}

.class-photo {
  height: clamp(460px, 66vh, 680px);
}

/* El panel pasa a la izquierda y monta mas sobre la foto. El
   desfase mas profundo es lo que separa una pieza disenada de una
   tarjeta apoyada abajo. */
.class-feature-card > div {
  width: min(100% - 56px, 545px);
  margin: -118px auto 0 0;
  margin-left: 34px;
  padding: 38px 40px 40px;
}

/* Numeracion editorial: "01 — CLASE PRINCIPAL". El numero es
   decorativo y se agrega desde el CSS, no toca el contenido. */
.class-feature-card .class-kicker::before {
  content: "01";
  margin-right: 14px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.class-feature-card .class-kicker {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}


/* ============================================================
   HORARIOS: LOS TRES PASOS
   ============================================================

   Antes: tres tarjetas con sombra y un circulo dorado con el
   numero adentro. El circulo relleno con degradado es lo que le
   daba el aire infantil.

   Ahora: sin cajas ni circulos. Tres columnas separadas por una
   linea fina arriba, con el numero como cifra grande en serif.
   Es como se numeran los pasos en un catalogo impreso.
   ============================================================ */

.schedule-steps {
  width: var(--container);
  max-width: none;
  margin: 0 auto clamp(48px, 6vw, 80px);
  gap: clamp(28px, 4vw, 64px);
}

.schedule-step {
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.schedule-step-number {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 14px;
  border-radius: 0;
  background: none;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1;
}

/* Cero adelante: "01" se lee como indice, "1" como lista de tarea. */
.schedule-step-number::before {
  content: "0";
}

.schedule-step h3 {
  font-size: 1.35rem;
  line-height: 1.2;
}

.schedule-step p {
  margin: 10px 0 0;
  font-size: 0.97rem;
  line-height: 1.65;
}

.schedule-step:hover {
  transform: none;
  box-shadow: none;
}


/* ============================================================
   HORARIOS: EL CALENDARIO
   ============================================================

   Antes las celdas eran botones redondeados separados 4px, cada
   uno con su propio borde. Eso se lee como un tablero de juego.

   Ahora es una grilla continua de lineas finas, como una tabla de
   horarios impresa. La disponibilidad se marca con una barra
   vertical dorada al costado en vez de rellenar la celda de color.
   ============================================================ */

/* El widget deja de ser una tarjeta flotante */
.booking-widget {
  padding: 34px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.booking-widget-head h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1.06;
}

.booking-widget-head p:not(.eyebrow) {
  max-width: 62ch;
  margin-bottom: 28px;
  line-height: 1.7;
}

/* La navegacion de semana: la fecha manda, las flechas acompanan */
.booking-calendar-nav {
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.booking-calendar-nav p {
  order: -1;
  margin: 0 auto 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.booking-calendar-nav button {
  width: 40px;
  height: 40px;
  border-color: var(--line);
  background: transparent;
  font-size: 1rem;
  transition: border-color 0.3s var(--salida), color 0.3s var(--salida);
}

.booking-calendar-nav button:hover:not(:disabled) {
  transform: none;
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-text);
}

/* La grilla: lineas finas, sin cajas sueltas */
.booking-calendar-scroll {
  border: 0;
  border-radius: 0;
  margin-bottom: 20px;
}

.booking-calendar {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Encabezado de dias: versalitas, sin fondo relleno */
.booking-calendar thead th {
  padding: 0 6px 14px;
  background: transparent;
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.booking-calendar thead th small {
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.booking-calendar thead th.is-today {
  color: var(--gold-text);
}

.booking-calendar-corner {
  background: transparent;
}

/* Columna de horas: discreta, no compite con los turnos */
.booking-calendar tbody th {
  padding: 0 14px 0 2px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--muted);
}

.booking-calendar tbody td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.booking-calendar-gap td {
  border-left: 0;
  padding: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  text-transform: uppercase;
}

/* La celda ocupa todo el cuadro de la grilla, sin borde propio */
.booking-cell {
  min-width: 86px;
  padding: 16px 8px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: background-color 0.25s var(--salida), border-color 0.25s var(--salida);
}

.booking-cell strong {
  font-size: 1rem;
  font-weight: 600;
}

.booking-cell span {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.booking-cell.is-open:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  background: var(--gold-soft);
  border-left-color: var(--gold);
}

/* Pocos lugares: barra dorada al costado en lugar de rellenar la
   celda de amarillo. Marca igual de claro y no ensucia la grilla. */
.booking-cell.is-low {
  background: transparent;
  border-left-color: var(--gold);
}

.booking-cell.is-full,
.booking-cell.is-day-taken {
  background: transparent;
  opacity: 1;
  color: var(--line);
}

.booking-cell.is-full strong,
.booking-cell.is-day-taken strong {
  color: #bdb4a4;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.booking-cell.is-full span,
.booking-cell.is-day-taken span {
  color: #bdb4a4;
}

/* Tu turno: la unica celda con relleno, para que salte a la vista */
.booking-cell.is-mine {
  border: 0;
  border-left: 2px solid var(--gold-deep);
  background: var(--gold-soft);
}

/* La referencia: barritas finas iguales al lenguaje de la grilla */
.booking-legend {
  gap: 6px 22px;
  margin-bottom: 18px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.legend-dot {
  width: 3px;
  height: 15px;
  margin-right: 9px;
  border-radius: 0;
  vertical-align: -3px;
}

.legend-dot.legend-open {
  background: var(--line);
  border: 0;
}

.legend-dot.legend-low {
  background: var(--gold);
  border: 0;
}

.legend-dot.legend-full {
  background: #ded6c8;
  border: 0;
}

.legend-dot.legend-mine {
  background: var(--gold-deep);
}

/* El recuadro de "coordinar por mensaje" tampoco necesita caja */
.schedule-box {
  padding-top: 34px;
  border-top: 1px solid var(--line);
}


@media (max-width: 1060px) {
  /*
   * Clases mantenia dos columnas hasta en pantallas de 768px: la
   * foto quedaba comprimida contra el borde. A partir del mismo
   * ancho en que el menu pasa a hamburguesa, se apila.
   */
  .classes-layout {
    grid-template-columns: 1fr;
  }

  .classes-intro {
    position: static;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .schedule-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .schedule-step {
    padding: 22px 0 24px;
  }

  .schedule-step-number {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .booking-calendar-nav {
    gap: 10px;
  }

  .booking-calendar-nav p {
    font-size: 1.05rem;
  }

  .class-feature-card > div {
    width: calc(100% - 32px);
    margin: -60px auto 0;
    padding: 28px 26px 30px;
  }
}


/* ============================================================
   CLASES: DISEÑO NUEVO (doble pagina)
   ============================================================

   Reemplaza al planteo anterior (columna fija al costado y panel
   montado sobre la foto). Este bloque va ultimo, asi que manda
   sobre lo de arriba; borrandolo vuelve el diseno previo.

   COMO ESTA ARMADO
   ----------------
   1. El encabezado pasa arriba, a todo el ancho, con el mismo
      formato que Horarios y Contacto: linea dorada, titulo grande
      a la izquierda y bajada en columna angosta a la derecha. Asi
      las cuatro secciones se leen como un mismo sistema.

   2. La clase se presenta como una doble pagina: foto y texto son
      dos paneles de la misma altura, uno al lado del otro, sin
      superposiciones. Es como se muestra una pieza en un catalogo
      o un lookbook.
   ============================================================ */

/* Deja de ser dos columnas: ahora es encabezado arriba y pieza
   abajo, las dos a todo el ancho del contenedor. */
.classes-layout {
  display: block;
}

.classes-view.page-view.is-active {
  align-items: start;
}


/* --- Encabezado --- */

.classes-intro {
  position: static;
  width: 100%;
  max-width: none;
  margin-bottom: clamp(38px, 5vw, 68px);
  padding-top: 26px;

  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 16px;
  align-items: start;
}

.classes-intro .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.classes-intro h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(2.5rem, 4.4vw, 4.2rem);
  line-height: 1.02;
}

/* La bajada apoya sobre la misma linea de base que el titulo */
.classes-intro p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  max-width: 46ch;
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.7;
}

.classes-intro .classes-cta {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: 14px;
}


/* --- La pieza: foto y texto como dos paneles parejos --- */

.class-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
}

/* La foto define la altura de la pieza y el panel de texto se
   estira para igualarla. Con alto definido (y no 100%) la fila no
   se infla de mas y el texto no queda nadando en un panel vacio. */
.class-photo {
  position: static;
  width: 100%;
  height: clamp(430px, 62vh, 620px);
  min-height: 0;
  object-fit: cover;
  border-radius: 0;
}

.class-feature-card > div {
  width: auto;
  margin: 0;
  padding: clamp(34px, 3.6vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border-top: 0;
  box-shadow: none;
}

/* Linea dorada arriba del texto, como firma de la seccion */
.class-feature-card > div::before {
  content: "";
  width: 62px;
  height: 2px;
  margin-bottom: 26px;
  background: var(--gold);
}

.class-feature-card h3 {
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  line-height: 1.04;
}

.class-feature-card p:not(.class-kicker) {
  margin-top: 16px;
  max-width: 42ch;
}

.class-feature-card .class-tags {
  margin-top: 30px;
  padding-top: 20px;
}


/* --- En pantalla angosta, una columna --- */

@media (max-width: 1060px) {
  .classes-intro {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .classes-intro .eyebrow,
  .classes-intro h2,
  .classes-intro p:not(.eyebrow),
  .classes-intro .classes-cta {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }

  .class-feature-card {
    grid-template-columns: 1fr;
  }

  .class-photo {
    height: clamp(280px, 44vh, 420px);
  }

  .class-feature-card > div {
    width: auto;
    margin: 0;
    padding: clamp(28px, 6vw, 40px);
  }

  .class-feature-card > div::before {
    margin-bottom: 20px;
  }
}


/* ============================================================
   MI CUENTA
   ============================================================

   Sexto bloque agregado. No se toca script.js: los mismos datos,
   los mismos botones, el mismo comportamiento. Cambia como se
   distribuyen y como se ven.

   QUE ESTABA MAL
   --------------
   Todo entraba en una sola tarjeta de 640px centrada: la foto, el
   nombre, los turnos y los avisos, uno abajo del otro. Se leia
   como un formulario, no como el espacio personal de alguien.

   COMO QUEDA
   ----------
       [  identidad: foto grande + nombre, a todo el ancho  ]
       [  tus turnos (ancho)      |   avisos (angosto)      ]

   La identidad arriba y sola es lo que le da el tono personal:
   lo primero que se ve es quien sos, no una lista.
   ============================================================ */

/* El panel deja de ser una tarjeta y pasa a ocupar la columna
   completa, como el resto de las secciones. */
.account-panel {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(30px, 4vw, 52px);
  align-items: start;
}


/* --- Identidad: la franja de arriba --- */

.account-profile {
  grid-column: 1 / -1;
  align-items: center;
  gap: 26px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

/* La misma firma dorada que abre las demas secciones */
.account-profile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

/* Foto mas grande: es el elemento que personaliza la pantalla */
.account-avatar {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line);
}

.account-profile strong {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.account-profile span {
  margin-top: 8px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}


/* --- Tus turnos --- */

.account-bookings {
  grid-column: 1;
  padding-top: 0;
}

.account-bookings h3 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.account-bookings ul {
  gap: 0;
  margin-bottom: 26px;
}

/* Cada turno como renglon de agenda, separado por una linea fina.
   Las cajas redondeadas con fondo competian entre si. */
.account-bookings li {
  padding: 18px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.account-bookings li:first-child {
  border-top: 1px solid var(--line);
}

/* "Cancelar" deja de ser un link subrayado y pasa a ser una accion
   discreta con el mismo lenguaje que el resto de la web. */
.account-bookings li button {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s var(--salida), color 0.3s var(--salida);
}

.account-bookings li button:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

.booking-locked {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bdb4a4;
}

/* Cuando no hay turnos, el mensaje no debe parecer un renglon mas */
.account-bookings li.booking-empty {
  border: 0;
  padding: 18px 0 22px;
  font-family: var(--sans);
  font-size: 0.98rem;
}


/* --- Avisos: columna angosta al costado --- */

.avisos-caja {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.avisos-texto h3 {
  font-size: 1.15rem;
}

.avisos-texto p {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.65;
}

.avisos-boton {
  width: 100%;
  margin-top: 20px;
  border-radius: 999px;
  border-color: var(--ink);
}

/*
 * .panel-link no traia padding horizontal. En la portada no se
 * notaba porque se estiraba a lo ancho de su columna, pero aca
 * queda al ancho del texto y las letras tocaban el borde.
 */
.account-bookings .panel-link {
  padding: 0 30px;
}


/* --- Sin sesion iniciada --- */

/* La invitacion a entrar tambien se alinea con la columna y deja
   la caja: es una llamada, no un formulario. */
.account-guest {
  width: min(100%, 520px);
  max-width: none;
  margin-left: max(0px, calc((100% - var(--container)) / 2));
  margin-right: auto;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  position: relative;
}

.account-guest::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.account-guest p {
  margin-bottom: 24px;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
}


/* --- Una columna en pantalla angosta --- */

@media (max-width: 900px) {
  .account-panel {
    grid-template-columns: 1fr;
  }

  .account-profile {
    grid-column: 1;
    gap: 18px;
  }

  .account-bookings,
  .avisos-caja {
    grid-column: 1;
    grid-row: auto;
  }

  .account-avatar {
    width: 68px;
    height: 68px;
  }

  .avisos-boton {
    width: auto;
  }

  /* En pantalla angosta la fecha y el estado del turno no entran
     en la misma linea: se apilan en vez de comprimirse. */
  .account-bookings li {
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* ============================================================
   MI CUENTA: DISEÑO NUEVO (panel con barra lateral)
   ============================================================

   Reemplaza al planteo anterior (franja de identidad a lo ancho y
   dos columnas abajo). Va ultimo, asi que manda sobre aquel;
   borrando este bloque vuelve el anterior.

   POR QUE CAMBIA
   --------------
   Con la identidad como franja horizontal, la foto y el nombre se
   perdian contra 1210px de ancho, y la columna de avisos quedaba
   corta dejando un hueco grande debajo.

   COMO QUEDA
   ----------
       | perfil   |                              |
       | (foto    |   TUS PROXIMOS TURNOS        |
       |  grande  |   renglones de agenda        |
       |  nombre) |   boton reservar             |
       |----------|                              |
       | avisos   |                              |

   Barra lateral con el perfil arriba y los avisos abajo, y los
   turnos como contenido principal. Es la estructura de un panel de
   cuenta de verdad: quien sos a un lado, lo que tenes al otro.
   La barra queda fija al scrollear.
   ============================================================ */

.account-panel {
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  column-gap: clamp(36px, 5vw, 84px);
  row-gap: 0;
}


/* --- Barra lateral: perfil --- */

.account-profile {
  grid-column: 1;
  grid-row: 1;

  /* Deja de ser una fila horizontal: la foto arriba y el nombre
     debajo se lee como ficha de perfil, no como encabezado. */
  display: block;
  padding: 32px 0 34px;
  border-bottom: 0;

  position: sticky;
  top: 120px;
}

.account-avatar {
  width: 104px;
  height: 104px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.account-avatar svg {
  width: 56%;
  height: 56%;
  fill: var(--gold-deep);
  opacity: 0.55;
}

.account-profile strong {
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
  line-height: 1.08;
}

.account-profile span {
  margin-top: 10px;
  font-size: 0.92rem;
  word-break: break-word;
}


/* --- Barra lateral: avisos como modulo aparte --- */

.avisos-caja {
  grid-column: 1;
  grid-row: 2;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.avisos-texto h3 {
  font-size: 1.05rem;
}

.avisos-texto p {
  font-size: 0.89rem;
}


/* --- Contenido principal: los turnos --- */

.account-bookings {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  position: relative;
}

/* La firma dorada tambien abre esta columna, para que las dos
   mitades arranquen con el mismo gesto. */
.account-bookings::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.account-bookings h3 {
  margin-bottom: 26px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.08;
}

/* Renglones mas altos y con la fecha con mas peso: es el dato que
   la persona viene a buscar. */
.account-bookings li {
  padding: 22px 2px;
  font-size: 1.15rem;
}

.account-bookings li.booking-empty {
  padding: 4px 0 26px;
  font-size: 1rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--muted);
}


/* --- Una columna en pantalla angosta --- */

@media (max-width: 900px) {
  .account-panel {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .account-profile {
    grid-column: 1;
    grid-row: auto;
    position: static;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 0 28px;
    border-bottom: 1px solid var(--line);
  }

  .account-avatar {
    width: 72px;
    height: 72px;
    margin-bottom: 0;
  }

  .account-bookings {
    grid-column: 1;
    grid-row: auto;
    border-top: 0;
    padding-top: 28px;
  }

  .account-bookings::before {
    display: none;
  }

  .avisos-caja {
    grid-column: 1;
    grid-row: auto;
    margin-top: 28px;
  }
}


/* ============================================================
   CORRECCIONES
   ============================================================

   Tres defectos detectados mirando la web terminada.
   ============================================================ */


/* ------------------------------------------------------------
   1. El boton de perfil sobre el video
   ------------------------------------------------------------
   Con la sesion iniciada, el boton con la foto y el nombre
   conservaba su fondo blanco, su borde y su sombra: quedaba un
   ovalo blanco flotando sobre el video, cuando el resto de la
   barra ya era transparente.

   Ahora toma el mismo tratamiento que "Ya soy alumno": vidrio
   apenas visible con contorno claro.
   ------------------------------------------------------------ */

body.vista-inicio:not(.con-scroll) .profile-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

body.vista-inicio:not(.con-scroll) .profile-button:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
  text-shadow: none;
}

/* El circulo de la foto tambien: el relleno dorado claro se veia
   como un parche sobre la imagen. */
body.vista-inicio:not(.con-scroll) .profile-avatar {
  background: rgba(255, 255, 255, 0.2);
}

body.vista-inicio:not(.con-scroll) .profile-avatar svg {
  fill: #ffffff;
}

body.vista-inicio:not(.con-scroll) .profile-button:hover .profile-avatar {
  background: var(--gold-soft);
}

body.vista-inicio:not(.con-scroll) .profile-button:hover .profile-avatar svg {
  fill: var(--gold-deep);
}

.profile-button,
.profile-avatar,
.profile-avatar svg {
  transition:
    background-color 0.45s var(--salida),
    border-color 0.45s var(--salida),
    box-shadow 0.45s var(--salida),
    fill 0.45s var(--salida),
    color 0.45s var(--salida);
}


/* ------------------------------------------------------------
   2. "Consultar por WhatsApp o mail", al pie de Horarios
   ------------------------------------------------------------
   Este bloque se habia quedado con el marco de tarjeta viejo
   (borde redondeado de 20px, fondo blanco y sombra) heredado de
   una regla que agrupa .lead-panel, .studio-card y .schedule-box.
   Despues de pasar el calendario a lineas finas, esa caja quedaba
   flotando al final como un parche de otro diseno. Ademas tenia
   20px de padding lateral que la desalineaban del resto.

   Ahora es una linea de cierre: texto a la izquierda, boton a la
   derecha, sin caja.
   ------------------------------------------------------------ */

.schedule-box {
  padding: 32px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 36px;
}

.schedule-box p {
  margin: 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.65;
}

.schedule-box .classes-cta {
  margin-top: 0;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   3. La foto de perfil en Mi cuenta
   ------------------------------------------------------------
   El icono anonimo se veia diminuto y corrido hacia arriba.

   Eran dos cosas sumadas:
     - Una regla previa le ponia  padding: 12px  al SVG. Con
       box-sizing border-box, de los 58px del icono quedaban solo
       15px de dibujo real.
     - El centrado dependia de un grid heredado que no lo alineaba
       verticalmente: quedaba 15px por encima del centro.

   Se limpia el padding y se centra con flex, que no deja lugar a
   dudas. La foto real, cuando existe, sigue llenando el circulo.
   ------------------------------------------------------------ */

/*
 * OJO CON LA ESPECIFICIDAD.
 *
 * El avatar es un <span> dentro de .account-profile, y existe una
 * regla  .account-profile span { display: block }  para el mail.
 * Ese selector (0,1,1) le gana a  .account-avatar  (0,1,0) sin
 * importar el orden, asi que el display:flex nunca se aplicaba y
 * el icono quedaba pegado arriba.
 *
 * Por eso aca se nombra el contenedor: asi empata en peso y, al
 * ir despues, manda.
 */
.account-profile .account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 0;
  overflow: hidden;
}

.account-profile .account-avatar svg {
  width: 48%;
  height: 48%;
  padding: 0;
  display: block;
  fill: var(--gold-deep);
  opacity: 0.55;
}

.account-profile .account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El avatar chico de la barra de arriba, por las mismas razones */
.profile-button .profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.profile-button .profile-avatar svg {
  width: 62%;
  height: 62%;
  padding: 0;
  display: block;
}

.profile-button .profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 900px) {
  .schedule-box {
    padding: 28px 0 0;
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ============================================================
   ACCESO: INICIAR SESION Y REGISTRARSE
   ============================================================

   Noveno bloque. Solo diseno: no cambia ningun campo, ningun
   name, ningun data-* ni la logica de los formularios.

   QUE ESTABA FLOJO
   ----------------
   - Una caja beige de 28px de radio, y adentro otra caja blanca
     con borde: caja dentro de caja.
   - El boton "Acceso" con degradado dorado y letra de 1.45rem,
     mas grande que los propios campos.
   - Las etiquetas de los campos sin jerarquia.
   - El boton de Google con sus esquinas cuadradas de 4px, ajeno
     al resto de la web.
   ============================================================ */

/* El panel deja la caja beige y se apoya en el fondo de la web,
   con el ancho y la linea dorada del resto de las secciones. */
.auth-shell {
  width: var(--container);
  max-width: none;
  padding: 34px 0 64px;
  border-radius: 0;
  background: transparent;
  position: relative;
  border-top: 1px solid var(--line);
}

.auth-shell::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.auth-section {
  padding: 40px 20px 80px;
  background: var(--page);
}

.auth-grid {
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}


/* --- Cada bloque es una ficha limpia, no una caja dentro de otra --- */

.auth-block h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.06;
}

.auth-block > p {
  margin: 12px 0 28px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* El formulario pierde el borde y el fondo propios: ya no hay dos
   cajas superpuestas, solo una superficie con aire. */
.auth-form {
  padding: 0;
  border: 0;
  background: transparent;
}


/* --- Campos --- */

/* Etiquetas en versalitas, como el resto de la web */
.auth-form label,
.interest-form label,
.field-label {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-form label span {
  color: var(--gold-deep);
}

.auth-form input,
.interest-form input {
  height: 54px;
  border-radius: 3px;
  border-color: var(--line);
  background: var(--surface);
  margin-bottom: 22px;
  padding: 0 16px;
  font-size: 1rem;
  transition:
    border-color 0.3s var(--salida),
    box-shadow 0.3s var(--salida),
    background-color 0.3s var(--salida);
}

.auth-form input:hover,
.interest-form input:hover {
  border-color: #d8cdb5;
}

/* El foco se marca con una linea dorada abajo y un halo suave, en
   lugar del recuadro grueso anterior. */
.auth-form input:focus-visible,
.interest-form input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 164, 103, 0.16), 0 1px 0 0 var(--gold);
  background: #ffffff;
}

.password-field button {
  top: 11px;
  color: var(--muted);
  transition: color 0.3s var(--salida);
}

.password-field button:hover {
  color: var(--gold-deep);
}


/* --- Boton principal --- */

/* Sin degradado: un dorado plano se ve mas caro que uno con
   brillo. El tamano de letra baja para no competir con el titulo. */
.lime-button {
  min-height: 52px;
  padding: 0 38px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.35s var(--salida),
    transform 0.35s var(--salida),
    box-shadow 0.35s var(--salida);
}

.lime-button:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(163, 130, 74, 0.24);
}

/* El mismo destello que cruza los botones del resto de la web */
.lime-button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--salida);
  pointer-events: none;
}

.lime-button:hover::after {
  left: 125%;
}

.auth-options {
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}

.remember {
  color: var(--muted);
  font-size: 0.88rem;
}

.remember input {
  accent-color: var(--gold-deep);
  width: 16px;
  height: 16px;
}

/* "Olvidaste la contrasena" con subrayado que se dibuja al pasar */
.recover-link {
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}

.recover-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--salida);
}

.recover-link:hover::after {
  transform: scaleX(1);
}


/* --- Boton de Google --- */

/*
 * Google dibuja su boton dentro de un iframe con esquinas de 4px,
 * y su marcado no se puede tocar. Lo que si se puede es recortarlo
 * desde el contenedor: con overflow oculto y radio completo, queda
 * redondeado en los costados como el resto de los botones.
 */
.google-boton {
  border-radius: 999px;
  overflow: hidden;
  min-height: 46px;
  box-shadow: 0 1px 0 rgba(41, 35, 28, 0.06);
  transition: box-shadow 0.35s var(--salida), transform 0.35s var(--salida);
}

.google-boton:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(41, 35, 28, 0.12);
}

.google-boton > div,
.google-boton iframe {
  border-radius: 999px !important;
}

.google-auth {
  margin-bottom: 30px;
}

/* El separador toma el fondo nuevo de la seccion */
.separador {
  margin-top: 26px;
}

.separador span {
  background: var(--page);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}


/* --- Cerrar --- */

.auth-close {
  top: 30px;
  right: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  transition:
    border-color 0.3s var(--salida),
    color 0.3s var(--salida),
    transform 0.3s var(--salida);
}

.auth-close:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: rotate(90deg);
}


/* --- La foto de perfil del registro --- */

.photo-upload {
  border-radius: 3px;
  background: var(--surface);
  transition:
    border-color 0.3s var(--salida),
    background-color 0.3s var(--salida);
}

.photo-upload:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gold);
  background: #fffdf9;
}


/* --- Entrada escalonada --- */

.auth-block {
  animation: entraDesdeAbajo 0.8s var(--salida) backwards;
}

.auth-grid .auth-block:nth-child(1) { animation-delay: 0.05s; }
.auth-grid .auth-block:nth-child(2) { animation-delay: 0.17s; }


@media (max-width: 760px) {
  .auth-shell {
    padding: 30px 0 48px;
    border-radius: 0;
  }

  .auth-form {
    padding: 0;
  }

  .auth-close {
    top: 26px;
  }

  .auth-options {
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-block {
    animation: none;
  }

  .lime-button::after {
    display: none;
  }
}


/* ============================================================
   ACCESO: UNA VISTA POR VEZ
   ============================================================

   Antes "Iniciar sesion" y "Prueba gratis" estaban lado a lado y
   habia que leer los dos formularios para saber cual usar. Ahora
   se muestra uno solo, centrado, y se pasa al otro desde el pie.
   ============================================================ */

.auth-grid {
  /* Una sola columna: siempre hay una sola vista visible. */
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.auth-block {
  width: 100%;
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* La firma dorada se mueve del panel al formulario.
   Estando el formulario centrado, una linea que arrancaba en el
   borde de la pagina quedaba suelta, sin relacion con lo que
   encabeza. */
.auth-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.auth-shell {
  border-top: 0;
}

.auth-shell::before {
  display: none;
}

/* El boton y "Recuerdame" necesitan aire entre si: pegados se
   leian como una sola pieza. */
.auth-options {
  gap: 30px;
  margin-top: 8px;
}

/* Al alternar, la vista nueva entra con un desplazamiento corto.
   Es lo que hace que se entienda que cambio el contenido y no que
   la pagina se recargo. */
.auth-block[data-auth-vista] {
  animation: entraDesdeAbajo 0.5s var(--salida) backwards;
}


/* --- El pie con los enlaces --- */

.auth-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.auth-pie .recover-link {
  margin-top: 0;
}

/* "No tengo una cuenta" pesa mas que "olvidaste la contrasena":
   es el camino alternativo principal, asi que va en tinta y con la
   flecha que ya usan las tarjetas de contacto. */
.auth-cambiar {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s var(--salida);
}

.auth-cambiar::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--gold-deep);
  border-right: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform 0.35s var(--salida);
}

.auth-cambiar:hover {
  color: var(--gold-text);
}

.auth-cambiar:hover::after {
  transform: rotate(45deg) translate(3px, -3px);
}


@media (max-width: 760px) {
  .auth-pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .auth-cambiar {
    margin-left: 0;
  }
}


/* ============================================================
   EL ACCESO COMO APARTADO PROPIO
   ============================================================

   Antes el formulario aparecia empujando el contenido de la
   portada: se leia como una parte mas de Inicio.

   Ahora es una pantalla aparte que cubre todo, con el fondo de la
   web oscurecido y desenfocado detras. Es el modo en que lo
   resuelven los sitios serios, y deja claro que estas en otra
   instancia y no navegando la pagina.
   ============================================================ */

.auth-section {
  position: fixed;
  inset: 0;
  z-index: 1500;

  display: grid;
  place-items: center;
  padding: 24px 20px;
  overflow-y: auto;

  /* El velo. El desenfoque separa del fondo sin taparlo del todo:
     se sigue reconociendo la web detras. */
  background: rgba(31, 26, 19, 0.55);
  backdrop-filter: blur(6px);

  animation: veloEntra 0.35s ease forwards;
}

@keyframes veloEntra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mientras esta abierto el fondo no se mueve */
body.acceso-abierto {
  overflow: hidden;
}

/* La tarjeta: ancho contenido, centrada, sobre superficie clara */
.auth-shell {
  width: min(100%, 560px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 44px 46px 40px;
  border-radius: 6px;
  background: var(--page);
  box-shadow: 0 40px 100px rgba(24, 20, 15, 0.4);

  /* Sube al entrar, con la misma curva que el resto de la web */
  animation: tarjetaEntra 0.55s var(--salida) 0.06s backwards;
}

@keyframes tarjetaEntra {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dentro de la tarjeta ya no hace falta limitar el ancho: la
   tarjeta misma es el limite. */
.auth-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* El separador toma el fondo de la tarjeta, no el de la pagina */
.separador span {
  background: var(--page);
}

/* La cruz de cerrar queda dentro de la tarjeta, arriba a la derecha */
.auth-close {
  top: 18px;
  right: 18px;
}


/* --- Entrada escalonada de los campos ---
   Los elementos del formulario aparecen uno detras de otro. Es lo
   que le da la sensacion de que la pantalla "se arma" en vez de
   aparecer de golpe. */

.auth-block > *,
.auth-form > * {
  animation: entraDesdeAbajo 0.45s var(--salida) backwards;
}

.auth-block > h2        { animation-delay: 0.10s; }
.auth-block > p         { animation-delay: 0.15s; }
.auth-block > .google-auth { animation-delay: 0.20s; }
.auth-form > *:nth-child(1) { animation-delay: 0.24s; }
.auth-form > *:nth-child(2) { animation-delay: 0.28s; }
.auth-form > *:nth-child(3) { animation-delay: 0.32s; }
.auth-form > *:nth-child(4) { animation-delay: 0.36s; }
.auth-form > *:nth-child(5) { animation-delay: 0.40s; }
.auth-form > *:nth-child(6) { animation-delay: 0.44s; }
.auth-form > *:nth-child(7) { animation-delay: 0.48s; }
.auth-form > *:nth-child(8) { animation-delay: 0.52s; }


/* --- Ajustes de la tarjeta en pantalla chica --- */

@media (max-width: 620px) {
  .auth-section {
    padding: 0;
    place-items: stretch;
  }

  .auth-shell {
    width: 100%;
    max-height: none;
    min-height: 100vh;
    border-radius: 0;
    padding: 64px 22px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-section,
  .auth-shell,
  .auth-block > *,
  .auth-form > * {
    animation: none !important;
  }
}


/* ============================================================
   ACCESO: PANEL LATERAL DESLIZANTE
   ============================================================

   Reemplaza a la tarjeta centrada del bloque anterior. Va ultimo,
   asi que manda; borrando este bloque vuelve aquella.

   El panel entra desde la derecha y ocupa una franja alta, con la
   web visible al costado. Es mas agil que tapar toda la pantalla:
   se entiende que es un paso al margen y no otro sitio.
   ============================================================ */

.auth-section {
  /* El velo ocupa todo, pero el contenido se alinea a la derecha */
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  place-items: initial;
  padding: 0;
  overflow: hidden;

  background: rgba(31, 26, 19, 0.42);
  backdrop-filter: blur(3px);
}

.auth-shell {
  width: min(100%, 460px);
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 76px 44px 48px;
  border-radius: 0;
  overflow-y: auto;
  background: var(--page);

  /* Sombra hacia la izquierda: despega el panel de la web */
  box-shadow: -30px 0 70px rgba(24, 20, 15, 0.3);

  animation: panelEntra 0.45s var(--salida) backwards;
}

@keyframes panelEntra {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* La cruz queda arriba a la izquierda del panel: es el borde por
   donde uno "sale" hacia la web que quedo a la vista. */
.auth-close {
  top: 24px;
  left: 28px;
  right: auto;
}


/* ------------------------------------------------------------
   "Recuerdame" bien ubicado
   ------------------------------------------------------------
   Estaba al lado del boton, en la misma linea: se leia como si
   fuera parte del boton y en el panel angosto quedaba apretado.

   Ahora va arriba, solo en su renglon, y el boton pasa a ocupar
   todo el ancho. Es el orden que usa cualquier formulario serio:
   primero la opcion, despues la accion.
   ------------------------------------------------------------ */

.auth-options {
  display: flex;
  /* column-reverse: en el HTML el boton viene primero, pero
     visualmente queremos "Recuerdame" arriba. Asi no hace falta
     tocar el orden del formulario. */
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 18px;
  margin-top: 8px;
}

.auth-options .lime-button {
  width: 100%;
}

.remember {
  align-self: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

/*
 * El cuadradito quedaba corrido hacia arriba.
 *
 * La causa: la regla general  .auth-form input  le pone
 * margin-bottom para separar un campo del siguiente, y al checkbox
 * tambien le llegaba. Esos 22px de mas estiraban el alto de la
 * etiqueta y dejaban el cuadrado 11px por encima del centro.
 *
 * Se lo nombra por tipo (input[type="checkbox"]) para superar en
 * peso a la regla general y devolverle margen cero.
 */
.remember input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold-deep);
  cursor: pointer;
}


/* --- El pie, en una sola columna dentro del panel angosto --- */

.auth-pie {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.auth-cambiar {
  margin-left: 0;
}


/* --- En celular el panel ocupa todo --- */

@media (max-width: 620px) {
  .auth-shell {
    width: 100%;
    min-height: 0;
    padding: 76px 24px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell {
    animation: none !important;
  }
}


/* ============================================================
   MENU "MAS", SEDES Y CENTRO DE UÑAS
   ============================================================ */


/* ---------- Los tres puntos ---------- */

.nav-mas {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-mas-boton {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color 0.3s var(--salida), color 0.3s var(--salida);
}

.nav-mas-boton:hover {
  background: var(--gold-soft);
}

/* Sobre el video toma el mismo tratamiento que el resto de la barra */
body.vista-inicio:not(.con-scroll) .nav-mas-boton {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(24, 20, 15, 0.55);
}

body.vista-inicio:not(.con-scroll) .nav-mas-boton:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.nav-mas-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  display: grid;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 20px 44px rgba(41, 35, 28, 0.16);
  animation: entraDesdeAbajo 0.28s var(--salida);
}

.nav-mas-menu a {
  padding: 12px 14px;
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s var(--salida);
}

.nav-mas-menu a:hover {
  background: var(--gold-soft);
}

/*
 * En celular el menu ya es una lista desplegable: los tres puntos
 * no aportan nada, asi que sus items se muestran directamente
 * junto al resto.
 */
@media (max-width: 1060px) {
  .nav-mas {
    display: block;
  }

  .nav-mas-boton {
    display: none;
  }

  .nav-mas-menu {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }

  .nav-mas-menu[hidden] {
    display: grid !important;
  }

  .nav-mas-menu a {
    padding: 10px 16px;
    font-size: 1.08rem;
    font-weight: 700;
  }
}


/* ---------- Sedes ---------- */

.sedes-lista {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.sede {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  position: relative;
}

.sede::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.sede-numero {
  margin: 0 0 14px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
}

.sede h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  line-height: 1.06;
}

.sede address {
  margin-top: 14px;
  color: var(--muted);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
}

.sede-detalle {
  margin: 28px 0 0;
  display: grid;
  gap: 16px;
}

.sede-detalle div {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sede-detalle dt {
  color: var(--gold-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sede-detalle dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.sede-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
}

.sede-acciones .classes-cta {
  margin-top: 0;
}

.sede-mapa-link {
  color: var(--gold-text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}

.sede-mapa-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--salida);
}

.sede-mapa-link:hover::after {
  transform: scaleX(1);
}

.sede-mapa {
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.sede-mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}


/* ---------- Centro de uñas ---------- */

.unas-layout {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: start;
}

.unas-foto img {
  width: 100%;
  height: clamp(320px, 46vh, 460px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.unas-copy {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  position: relative;
}

.unas-copy::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.unas-intro {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
}

.unas-consulta {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.unas-consulta h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}

.unas-consulta p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.unas-consulta .classes-cta {
  margin-top: 22px;
}


@media (max-width: 900px) {
  .sede,
  .unas-layout {
    grid-template-columns: 1fr;
  }

  .sede-mapa,
  .sede-mapa iframe {
    min-height: 280px;
  }

  .unas-foto img {
    height: clamp(240px, 36vh, 340px);
  }
}


/* ============================================================
   PORTADA EN UNA COLUMNA Y ARREGLOS DEL MENU "MAS"
   ============================================================ */


/* ---------- La portada, centrada ----------
   Se quitaron del HTML la pastilla y el panel de la derecha.
   Ahora el texto ocupa una sola columna centrada sobre el video. */

.hero-content {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.hero-copy {
  max-width: 900px;
  text-align: center;
}

.hero-lead {
  max-width: 720px;
  margin-inline: auto;
}

/* La cita deja la barra lateral y pasa a ir entre dos lineas
   finas: centrada, una barra al costado queda descolgada. */
.brand-quote {
  max-width: 660px;
  margin-inline: auto;
  padding: 22px 0 0;
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.hero-actions {
  justify-content: center;
}


/* ---------- Bug: los enlaces del menu "mas" no se veian ----------
 *
 * El desplegable vive dentro de .nav-menu, asi que le llegaba la
 * regla que pinta de blanco los links cuando la barra esta
 * transparente sobre el video. Resultado: texto blanco sobre un
 * panel blanco, invisible hasta que al bajar volvia el color.
 *
 * Aca se le devuelve el color de tinta con mas peso que aquella.
 */
body.vista-inicio:not(.con-scroll) .nav-mas-menu a {
  color: var(--ink);
  text-shadow: none;
}

body.vista-inicio:not(.con-scroll) .nav-mas-menu a:hover {
  color: var(--ink);
  background: var(--gold-soft);
}

/* Tampoco corresponde la linea dorada del subrayado: eso es para
   los links de la barra, no para los de un desplegable. */
body.vista-inicio:not(.con-scroll) .nav-mas-menu a::after {
  display: none;
}


/* ---------- En celular y tablet, los tres puntos tambien ----------
 *
 * Antes en pantalla chica se mostraban "Centro de uñas" y "Mi
 * cuenta" sueltos dentro de la lista. Ahora se comportan igual que
 * en escritorio: aparece el boton de tres puntos y al tocarlo se
 * despliegan esas dos opciones.
 */
@media (max-width: 1060px) {
  .nav-mas {
    display: flex;
    justify-content: center;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
  }

  .nav-mas-boton {
    display: grid;
  }

  /* Vuelve a ser un desplegable: oculto hasta que se lo toca. */
  .nav-mas-menu[hidden] {
    display: none !important;
  }

  .nav-mas-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 20px 44px rgba(41, 35, 28, 0.16);
  }
}


/* ============================================================
   EL MENU DE CELULAR, TRANSPARENTE SOBRE EL VIDEO
   ============================================================

   Al abrir las tres rayitas sobre la portada aparecia un panel
   blanco macizo, que cortaba el video justo cuando la barra de
   arriba era transparente. Ahora el panel acompana: cristal con
   desenfoque y texto blanco mientras estamos arriba del video, y
   recien al bajar toma su fondo claro de siempre.
   ============================================================ */

@media (max-width: 1060px) {
  body.vista-inicio:not(.con-scroll) .nav-menu {
    background: rgba(31, 26, 19, 0.28);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    backdrop-filter: blur(14px);
  }

  /* Los links vuelven a ser blancos: sobre el cristal oscuro se
     leen, y acompanan al resto de la barra. */
  body.vista-inicio:not(.con-scroll) .nav-menu a {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 12px rgba(24, 20, 15, 0.55);
  }

  body.vista-inicio:not(.con-scroll) .nav-menu a:hover,
  body.vista-inicio:not(.con-scroll) .nav-menu a.is-current {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  /* La linea que separa los tres puntos, tambien clara */
  body.vista-inicio:not(.con-scroll) .nav-mas {
    border-top-color: rgba(255, 255, 255, 0.22);
  }

  /* El desplegable de los tres puntos sigue el mismo criterio */
  body.vista-inicio:not(.con-scroll) .nav-mas-menu {
    background: rgba(31, 26, 19, 0.5);
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);
  }

  body.vista-inicio:not(.con-scroll) .nav-mas-menu a {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 12px rgba(24, 20, 15, 0.55);
  }

  body.vista-inicio:not(.con-scroll) .nav-mas-menu a:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  /* La transicion hace que el cambio al bajar sea un fundido y no
     un salto seco. */
  .nav-menu,
  .nav-mas-menu {
    transition:
      background-color 0.45s var(--salida),
      border-color 0.45s var(--salida);
  }
}


/* ============================================================
   LOGO A LA IZQUIERDA Y VELO MAS OSCURO
   ============================================================ */

/* El logo pasa al primer lugar de la barra. Se hace con "order"
   para no tener que mover nada en el HTML. */
.main-nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.wordmark {
  order: -1;
  justify-content: flex-start;
  min-width: 0;
}

.nav-menu {
  justify-content: center;
}

@media (max-width: 1060px) {
  /* En celular el boton de menu queda primero y el logo al lado */
  .nav-toggle {
    order: -2;
  }
}

/*
 * El velo de la portada.
 *
 * Era un degradado lateral, pensado para cuando el texto estaba a
 * la izquierda. Ahora que quedo centrado, ese degradado dejaba el
 * centro claro y los bordes oscuros: al reves de lo que conviene.
 *
 * Se reemplaza por un oscurecido parejo, mas denso que antes, con
 * las puntas un poco mas cerradas para que el titulo y la barra de
 * arriba tengan fondo suficiente.
 */
.hero-photo-block::after {
  background:
    linear-gradient(
      180deg,
      rgba(24, 20, 15, 0.62) 0%,
      rgba(24, 20, 15, 0.46) 40%,
      rgba(24, 20, 15, 0.52) 70%,
      rgba(24, 20, 15, 0.7) 100%
    );
}

@media (max-width: 1060px) {
  .hero-photo-block::after {
    background:
      linear-gradient(
        180deg,
        rgba(24, 20, 15, 0.7) 0%,
        rgba(24, 20, 15, 0.58) 45%,
        rgba(24, 20, 15, 0.72) 100%
      );
  }
}


/* ============================================================
   PANEL DE ADMINISTRACION
   ============================================================ */

.panel-wrap {
  width: var(--container);
  margin-inline: auto;
}

.panel-sin-acceso {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.panel-contenido {
  display: grid;
  gap: clamp(36px, 4vw, 60px);
}


/* --- Los numeros de arriba --- */

.panel-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.panel-dato {
  display: grid;
  gap: 6px;
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--line);
}

.panel-dato:last-child {
  border-right: 0;
}

.panel-dato-numero {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--ink);
}

.panel-dato-titulo {
  color: var(--gold-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* --- Bloques --- */

.panel-bloque {
  padding-top: 26px;
  border-top: 1px solid var(--line);
  position: relative;
}

.panel-bloque::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.panel-bloque h3 {
  font-size: 1.45rem;
  line-height: 1.1;
}

.panel-bloque-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 22px;
}


/* --- Formulario de reserva --- */

.panel-form {
  margin-top: 20px;
}

.panel-campos {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 18px;
}

.panel-campos label,
.panel-rango label {
  display: grid;
  gap: 8px;
}

.panel-campos span,
.panel-rango span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel-campos input,
.panel-campos select,
.panel-rango input,
.panel-busca {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.98rem;
  transition: border-color 0.3s var(--salida), box-shadow 0.3s var(--salida);
}

.panel-campos input:focus-visible,
.panel-campos select:focus-visible,
.panel-rango input:focus-visible,
.panel-busca:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 164, 103, 0.16);
}

.panel-busca {
  width: min(100%, 300px);
}

.panel-forzar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 22px;
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
}

.panel-forzar input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold-deep);
}

.panel-rango {
  display: flex;
  gap: 16px;
}


/* --- Tablas --- */

.panel-tabla-scroll {
  overflow-x: auto;
}

.panel-tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.panel-tabla th {
  padding: 0 14px 12px 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}

.panel-tabla td {
  padding: 16px 14px 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  vertical-align: middle;
}

.panel-correo {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
  word-break: break-word;
}

.panel-tenue {
  color: #bdb4a4;
}

.panel-tabla tr.es-pasado td {
  color: #bdb4a4;
}

.panel-vacio {
  padding: 26px 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* Marca los turnos cargados desde el mostrador */
.panel-marca {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-text);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.panel-cancelar {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--salida), color 0.3s var(--salida);
}

.panel-cancelar:hover:not(:disabled) {
  border-color: #c2645a;
  color: #a8493f;
}

.panel-cancelar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-aviso {
  margin: 16px 0 0;
  min-height: 1.2em;
  color: var(--gold-text);
  font-size: 0.92rem;
}

.panel-aviso.es-error {
  color: #a8493f;
}


@media (max-width: 900px) {
  .panel-campos {
    grid-template-columns: 1fr;
  }

  .panel-dato {
    padding-inline: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .panel-dato:first-child {
    padding-left: 0;
  }

  .panel-rango {
    width: 100%;
  }

  .panel-busca {
    width: 100%;
  }
}


/* ============================================================
   PORTADA: SIN FOTO DE ESPERA NI PATRON
   ============================================================ */

/*
 * El bloque arranca oscuro.
 *
 * Al sacarle el "poster" al video, el hueco quedaba transparente
 * hasta que llegaba el primer fotograma y por un instante se veia
 * el fondo claro de la pagina. Pintando el bloque del mismo tono
 * que el velo, el paso al video es imperceptible.
 */
.hero-photo-block {
  background: #191410;
}

/* El patron (circulo grande y lineas diagonales) ya no esta en el
   HTML. La regla queda por si algun celular conserva cacheada una
   version anterior de la pagina. */
.hero-pattern {
  display: none;
}


/* ============================================================
   COPIA DE SEGURIDAD, EN EL PANEL
   ============================================================ */

/* Se destaca del resto de los bloques: es la accion que conviene
   que la persona vea apenas entra al panel. */
.panel-respaldo {
  padding: 26px 28px 28px;
  border: 1px solid var(--gold);
  border-top: 2px solid var(--gold);
  background: rgba(240, 228, 200, 0.28);
}

.panel-respaldo::before {
  display: none;
}

.panel-respaldo .panel-bloque-cabecera {
  margin-bottom: 14px;
}

.panel-respaldo-texto {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.panel-respaldo-texto strong {
  color: var(--ink);
}

.panel-descargar {
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background-color 0.35s var(--salida),
    transform 0.35s var(--salida),
    box-shadow 0.35s var(--salida);
}

.panel-descargar:hover:not(:disabled) {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(163, 130, 74, 0.24);
}

.panel-descargar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .panel-respaldo {
    padding: 22px 20px 24px;
  }

  .panel-descargar {
    width: 100%;
  }
}


/* ============================================================
   BORRAR CLIENTA, EN LA BASE
   ============================================================ */

/* Hereda el aspecto de "Cancelar" pero en rojo apagado: es una
   accion que no se deshace y conviene que se distinga de un
   simple cancelar turno. */
.panel-borrar {
  border-color: #e0cfcb;
  color: #a8493f;
}

.panel-borrar:hover:not(:disabled) {
  border-color: #c2645a;
  background: rgba(168, 73, 63, 0.06);
  color: #8f3b32;
}


/* ============================================================
   PANEL: FICHAS PENDIENTES Y OCUPACION
   ============================================================ */

/* ---------- Fichas para revisar ---------- */

/* Se destaca porque es lo que requiere accion: si hay una ficha
   esperando, tiene que saltar a la vista al entrar al panel. */
.panel-solicitudes {
  padding: 26px 28px 28px;
  border: 1px solid var(--gold);
  border-top: 2px solid var(--gold);
  background: rgba(240, 228, 200, 0.28);
}

.panel-solicitudes::before {
  display: none;
}

.panel-globo {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gold-deep);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  vertical-align: middle;
}

.panel-globo:empty {
  display: none;
}

.panel-lista-solicitudes {
  display: grid;
  gap: 16px;
}

.panel-solicitud {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.panel-solicitud-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-solicitud h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink);
}

.panel-solicitud .panel-correo {
  margin: 4px 0 0;
}

/* Las respuestas de la ficha, en dos columnas para que entren sin
   hacer una lista interminable. */
.panel-respuestas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 18px 0 0;
}

.panel-respuestas div {
  min-width: 0;
}

.panel-respuestas dt {
  color: var(--gold-text);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-respuestas dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
}

.panel-solicitud-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.panel-aceptar {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 700;
  transition:
    background-color 0.3s var(--salida),
    transform 0.3s var(--salida);
}

.panel-aceptar:hover:not(:disabled) {
  background: var(--gold-deep);
  transform: translateY(-2px);
}

.panel-aceptar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ---------- Ocupacion de la semana ---------- */

.panel-leyenda {
  display: flex;
  gap: 20px;
  color: var(--muted);
  font-size: 0.78rem;
}

.panel-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Cada punto es una camilla. Vacio con borde, lleno en dorado:
   se distingue incluso de reojo. */
.panel-punto {
  width: 9px;
  height: 9px;
  display: inline-block;
  border: 1px solid #d5cbb6;
  border-radius: 50%;
  background: transparent;
}

.panel-punto.lleno {
  border-color: var(--gold-deep);
  background: var(--gold-deep);
}

.panel-ocupacion-grilla {
  display: grid;
  grid-template-columns: auto repeat(var(--dias, 6), minmax(86px, 1fr));
  gap: 1px;
  min-width: 620px;
  background: var(--line);
  border: 1px solid var(--line);
}

.panel-ocupacion-grilla > * {
  background: var(--surface);
  padding: 10px 8px;
}

.panel-ocu-esquina,
.panel-ocu-dia {
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  background: var(--surface-alt);
}

.panel-ocu-dia small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.panel-ocu-hora {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: right;
  background: var(--surface-alt);
  white-space: nowrap;
}

/* Los seis puntos en dos filas de tres: en una sola fila quedaban
   muy juntos y no se distinguian. */
.panel-ocu-celda {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 5px;
  justify-content: center;
  align-content: center;
}


@media (max-width: 760px) {
  .panel-solicitudes {
    padding: 22px 18px 24px;
  }

  .panel-solicitud {
    padding: 18px 16px;
  }

  .panel-respuestas {
    grid-template-columns: 1fr;
  }

  .panel-solicitud-acciones .panel-aceptar,
  .panel-solicitud-acciones .panel-borrar {
    width: 100%;
  }
}


/* ============================================================
   ACCESO: LA FICHA EN LUGAR DEL REGISTRO
   ============================================================

   El registro propio ya no existe: mantener dos formularios (el de
   la web y el de Google) llevaba a que se desincronizaran. Este
   bloque explica el camino y lleva a la ficha.
   ============================================================ */

.auth-pasos {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.auth-pasos li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.5;
}

/* El numero en circulo: se lee como secuencia y no como viñetas */
.auth-pasos span {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
}

.auth-ficha-boton {
  width: 100%;
  min-height: 56px;
  text-decoration: none;
}


/* ============================================================
   CLASES: CONTENIDO
   ============================================================

   La seccion tenia un titulo y una tarjeta: era la mas pobre de la
   web y dejaba sin responder lo que mas se pregunta antes de la
   primera clase. Estos dos bloques van debajo de la pieza.
   ============================================================ */

.clases-detalle {
  width: var(--container);
  margin: clamp(56px, 7vw, 96px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  position: relative;
}

.clases-detalle::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 92px;
  height: 2px;
  background: var(--gold);
}

.clases-explica h3 {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
}

.clases-explica p {
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.75;
}

/* Los datos duros, en fichas separadas por lineas finas: se
   escanean sin leer, que es como se miran estos numeros. */
.clases-datos {
  margin: 0;
  display: grid;
  gap: 0;
}

.clases-datos div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.clases-datos div:first-child {
  border-top: 1px solid var(--line);
}

.clases-datos dt {
  color: var(--gold-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clases-datos dd {
  margin: 7px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
}


/* ---------- Como es venir ---------- */

.clases-practico {
  width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

.clases-practico article {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.clases-num {
  display: block;
  margin-bottom: 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
}

.clases-practico h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.clases-practico p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}


@media (max-width: 1060px) {
  .clases-practico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .clases-detalle {
    grid-template-columns: 1fr;
  }

  .clases-practico {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .clases-practico article {
    padding: 22px 0 24px;
  }
}