/* ============================================================
   Acervo — Tema hijo: tokens de marca y estilos base
   Soda Lemon · 2026
   ============================================================ */

:root {
  /* Paleta oficial Acervo */
  --acervo-purple:        #522c99;
  --acervo-purple-dark:   #3e2074;
  --acervo-ink:           #332e2d;   /* gris oscuro para texto y footer */
  --acervo-white:         #fffdfd;
  --acervo-lavender:      #f5f4f9;   /* fondos suaves */

  /* Tokens semánticos */
  --color-bg:             var(--acervo-white);
  --color-surface:        var(--acervo-lavender);
  --color-text:           var(--acervo-ink);
  --color-text-muted:     #6e6864;
  --color-accent:         var(--acervo-purple);
  --color-accent-hover:   var(--acervo-purple-dark);
  --color-border:         #e6e3ec;
  --color-footer-bg:      var(--acervo-ink);
  --color-footer-text:    var(--acervo-white);

  /* Tipografía */
  --font-serif:           "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans:            "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display:           clamp(2.5rem, 5vw, 4rem);
  --fs-h1:                clamp(2rem, 4vw, 3rem);
  --fs-h2:                clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:                clamp(1.35rem, 2vw, 1.75rem);
  --fs-body:              1rem;
  --fs-small:             .875rem;

  /* Layout */
  --radius:               4px;
  --radius-lg:            8px;
  --shadow-soft:          0 4px 20px rgba(82, 44, 153, .08);
  --shadow-card:          0 8px 30px rgba(51, 46, 45, .08);

  /* Motion */
  --ease:                 cubic-bezier(.22, .61, .36, 1);
}

/* ===== Reset suave para que Elementor herede ===== */
body, .elementor-page {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--color-text);
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ===== Utilidades de marca para reusar en Elementor (clases CSS) ===== */
.is-purple { color: var(--color-accent) !important; }
.bg-purple { background-color: var(--color-accent) !important; color: var(--acervo-white); }
.bg-lavender { background-color: var(--color-surface) !important; }
.bg-ink { background-color: var(--color-footer-bg) !important; color: var(--color-footer-text); }

/* Botón estándar Acervo (para Elementor Button: añade clase .btn-acervo) */
.btn-acervo .elementor-button {
  background: var(--color-accent);
  color: var(--acervo-white);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  font-size: .82rem;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-acervo .elementor-button:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Botón outline (clase .btn-acervo-outline) */
.btn-acervo-outline .elementor-button {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .9rem 2rem;
  font-size: .82rem;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-acervo-outline .elementor-button:hover {
  background: var(--color-accent);
  color: var(--acervo-white);
}

/* ===== Chip / badge (para los 3 servicios del hero) — añade clase .acervo-chip ===== */
.acervo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  text-align: center;
  background: var(--color-bg);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.acervo-chip:hover {
  background: var(--color-accent);
  color: var(--acervo-white);
}

/* ===== Card de servicios (clase .acervo-service-card) ===== */
.acervo-service-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  height: 100%;
}
.acervo-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(51, 46, 45, .12);
}
.acervo-service-card h3 {
  color: var(--color-accent);
  margin-bottom: 1rem;
}

/* ===== Formulario de contacto ===== */
.acervo-form .elementor-field {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius) !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
}
.acervo-form .elementor-field:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.acervo-form label.elementor-field-label {
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 500;
}
.acervo-form .elementor-button {
  background: var(--color-accent);
  color: var(--acervo-white);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* ===== Footer oscuro ===== */
.acervo-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 4rem var(--gutter, 1.5rem) 2rem;
  text-align: center;
}
.acervo-footer a { color: var(--acervo-white); opacity: .85; }
.acervo-footer a:hover { opacity: 1; }