/* =============================================
   FMA PAINTINGS — CSS GLOBAL
   Pegar en: Apariencia → Personalizar → CSS adicional
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@200;300;400&display=swap');

:root {
  --cream: #f5f2ec;
  --ink: #1a1916;
  --ink-light: #6b6860;
  --gold: #b8976a;
  --gold-pale: #e8dece;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', sans-serif;
}

/* BASE */
body {
  font-family: var(--sans) !important;
  background-color: var(--cream) !important;
  color: var(--ink) !important;
}

/* NAVEGACIÓN */
.site-header,
header.site-header,
#masthead {
  background: rgba(245,242,236,0.95) !important;
  backdrop-filter: blur(8px);
  border-bottom: 0.5px solid rgba(26,25,22,0.12) !important;
  position: sticky;
  top: 0;
  z-index: 999;
}

.site-title a,
.site-title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  text-transform: uppercase;
}

.main-navigation a,
nav a {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--ink-light) !important;
  transition: color 0.2s !important;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
  color: var(--gold) !important;
}

/* TÍTULOS GLOBALES */
h1, h2, h3 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
}

/* FOOTER */
.site-footer,
footer.site-footer {
  background: var(--cream) !important;
  border-top: 0.5px solid rgba(26,25,22,0.1) !important;
  font-family: var(--sans) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink-light) !important;
}

/* OCULTAR elementos de WordPress.com innecesarios */
#wpadminbar { display: none !important; }
.wp-block-query-pagination,
.entry-footer,
.post-navigation { display: none !important; }


/* =============================================
   ESTILOS ELEMENTOR — CLASES PERSONALIZADAS
   ============================================= */

/* Etiqueta dorada pequeña (section label) */
.fma-label {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* Títulos grandes con serif */
.fma-heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
}

.fma-heading em,
.fma-heading i {
  font-style: italic !important;
  color: var(--gold) !important;
}

/* Texto body elegante */
.fma-body {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: var(--ink) !important;
}

/* Cita destacada */
.fma-quote {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  color: var(--gold) !important;
  line-height: 1.5 !important;
  border-left: 1.5px solid var(--gold) !important;
  padding-left: 1.5rem !important;
}

/* Botón primario */
.fma-btn .elementor-button {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0.5px solid var(--ink) !important;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  transition: all 0.3s !important;
}

.fma-btn .elementor-button:hover {
  background: var(--ink) !important;
  color: var(--cream) !important;
}

/* Divisor dorado */
.fma-divider .elementor-divider-separator {
  border-color: var(--gold) !important;
  border-width: 0.5px !important;
  width: 48px !important;
}

/* Galería — efecto hover en imágenes */
.elementor-gallery-item__overlay {
  background: rgba(26,25,22,0.3) !important;
  opacity: 0 !important;
  transition: opacity 0.4s !important;
}

.elementor-gallery-item:hover .elementor-gallery-item__overlay {
  opacity: 1 !important;
}

.elementor-gallery-item img {
  transition: transform 0.6s ease !important;
}

.elementor-gallery-item:hover img {
  transform: scale(1.04) !important;
}

/* Hero — sección de bienvenida */
.fma-hero {
  background-color: var(--cream) !important;
  min-height: 100vh;
}

.fma-hero-dark {
  background-color: var(--ink) !important;
}

/* Imagen con zoom suave al hover */
.fma-zoom img {
  transition: transform 8s ease !important;
  transform: scale(1.03) !important;
}

.fma-zoom:hover img {
  transform: scale(1.0) !important;
}

/* Stats */
.fma-stat-num {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 2.2rem !important;
  color: var(--ink) !important;
  line-height: 1 !important;
}

.fma-stat-label {
  font-family: var(--sans) !important;
  font-weight: 200 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-top: 4px !important;
}

/* Formulario de contacto */
.fma-form input,
.fma-form textarea {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(26,25,22,0.2) !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  transition: border-color 0.2s !important;
}

.fma-form input:focus,
.fma-form textarea:focus {
  border-bottom-color: var(--gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

.fma-form label {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--ink-light) !important;
}

.fma-form button[type="submit"] {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  background: var(--ink) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 36px !important;
  transition: background 0.3s !important;
}

.fma-form button[type="submit"]:hover {
  background: var(--gold) !important;
}

/* Animaciones de entrada */
@keyframes fmaFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fma-animate {
  animation: fmaFadeUp 0.7s ease forwards;
}
.fma-animate-2 { animation: fmaFadeUp 0.7s 0.15s ease forwards; opacity: 0; }
.fma-animate-3 { animation: fmaFadeUp 0.7s 0.30s ease forwards; opacity: 0; }
.fma-animate-4 { animation: fmaFadeUp 0.7s 0.45s ease forwards; opacity: 0; }
/* Menú hamburguesa móvil */
@media (max-width: 768px) {
  .menu-toggle {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
  }

  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span {
    content: '';
    display: block;
    width: 24px;
    height: 0.5px;
    background: #1a1916;
    margin: 5px auto;
    transition: all 0.3s;
  }
}
/* Menú hamburguesa móvil */
@media (max-width: 768px) {
  label#toggle-menu.button {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
  }

  label#toggle-menu.button::before,
  label#toggle-menu.button::after {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    background: #1a1916 !important;
  }

  label#toggle-menu.button .dropdown-icon,
  label#toggle-menu.button .hide-visually {
    display: none !important;
  }
}