body {
  font-family: Montserrat, Arial, sans-serif !important;
  line-height: 1.65;
}

h1, h2 {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  line-height: 1.15;
}

h3, h4, h5, h6 {
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.badge {
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
}

.btn {
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btn:hover {
  background-color: #CEA417 !important;
  border-color: #CEA417 !important;
  color: #28282B !important;
}

.header-row a, header a {
  color: #28282B !important;
  text-decoration: none !important;
}

.header-row a:hover, header a:hover {
  color: #9C7A0E !important;
}

footer, .footer-row {
  background-color: #28282B !important;
}

footer a, footer p, footer span, footer li, .footer-row a, .footer-row p, .footer-row span {
  color: #F4F3F0 !important;
}

footer a:hover, .footer-row a:hover {
  color: #CEA417 !important;
}

input, textarea, select {
  border: 1px solid #D8D6D1 !important;
  border-radius: 6px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #CEA417 !important;
  outline: none !important;
}
#customPageContent [data-ss-id="UTpFNX38"], #customPageContent [data-ss-id="yAA9xhAZ"], #customPageContent [data-ss-id="XkJUs6d5"] {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: 1.1;
}
#ss-logo h3 {
  display: none !important;
}

#ss-logo .logo-header {
  height: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

@media (max-width: 991px) {
  #ss-logo .logo-header {
    height: 64px !important;
    max-height: 64px !important;
  }
}

/* Videos: 4 en fila en computador, 2x2 en celular */
html body #customPageContent [aria-label="Obra en video"] .ssc-grid.ssc-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
}
html body #customPageContent [aria-label="Obra en video"] .ssc-grid > div {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #28282B !important;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.35) !important;
  padding: 0 !important;
  gap: 0 !important;
}
html body #customPageContent [aria-label="Obra en video"] .ssc-grid iframe {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  border: 0 !important;
  display: block !important;
}
html body #customPageContent [aria-label="Obra en video"] .video-label {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #F4F3F0 !important;
  background: #28282B !important;
  text-align: center;
}
@media (max-width: 991px) {
  html body #customPageContent [aria-label="Obra en video"] .ssc-grid.ssc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* Portada ajustada */
html body #customPageContent [aria-label="Portada"] h1 {
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.05 !important;
}
html body #customPageContent [aria-label="Portada"] h2 {
  font-size: clamp(20px, 1.9vw, 28px) !important;
  line-height: 1.2 !important;
}
html body #customPageContent [aria-label="Portada"] p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html body #customPageContent [aria-label="Portada"] .btn,
html body .btn.ss-btn-lg {
  font-size: 13px !important;
  padding: 14px 26px !important;
  letter-spacing: 0.12em !important;
}
html body #customPageContent [aria-label="Portada"] img {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 420px;
  max-height: 600px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
}
@media (max-width: 991px) {
  html body #customPageContent [aria-label="Portada"] img {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 5 !important;
    max-height: 460px !important;
  }
  html body #customPageContent [aria-label="Portada"] .btn {
    width: 100% !important;
    text-align: center;
  }
}

/* Botones flotantes WhatsApp e Instagram */
.sinner-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sinner-float a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none !important;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.sinner-float a:hover { transform: scale(1.08); }
.sinner-float .sf-wa { background: #25D366 !important; color: #FFFFFF !important; }
.sinner-float .sf-ig { background: #28282B !important; color: #CEA417 !important; }
.sinner-float a i { color: inherit !important; }
@media (max-width: 991px) {
  .sinner-float { right: 14px; bottom: 14px; gap: 10px; }
  .sinner-float a { width: 50px; height: 50px; font-size: 25px; }
}
/* Menu compacto */
html body #ss-header .navbar-toggler {
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background-color: #28282B !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html body #ss-header .navbar-toggler i { color: #F4F3F0 !important; font-size: 20px; }
@media (max-width: 991px) {
  #ss-logo .logo-header {
    height: 52px !important;
    max-height: 52px !important;
  }
  html body #ss-header .ss-mobile { padding: 14px 18px !important; }
}