/*
Theme Name: Royal Elementor Kit Child
Theme URI: https://royal-elementor-addons.com/royal-elementor-kit/
Template: royal-elementor-kit
Author: WP Royal
Author URI: https://royal-elementor-addons.com/
Description: Child Theme personalizado para MiGuau
Version: 1.0.0
Text Domain: miguau-child
*/

/* ================================
   MiGuau Design System
================================ */

:root {
  --mg-primary: #5e7a45;
  --mg-primary-dark: #3f5b2f;

  --mg-secondary: #e86a33;
  --mg-secondary-dark: #c95322;

  --mg-bg: #f8f5ef;
  --mg-surface: #ffffff;
  --mg-muted: #ece5d8;

  --mg-text: #1e1e1e;
  --mg-text-soft: #666666;

  --mg-border: rgba(30, 30, 30, 0.08);

  --mg-radius-sm: 14px;
  --mg-radius-md: 20px;
  --mg-radius-lg: 28px;

  --mg-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
  --mg-shadow-card: 0 16px 45px rgba(0, 0, 0, 0.08);

  --mg-container: 1180px;

  --mg-section-space: 110px;

  --mg-transition: all 0.3s ease;
}

/* ================================
   Base
================================ */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--mg-bg);
  color: var(--mg-text);
  overflow-x: hidden;
}

a {
  transition: var(--mg-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================
   Containers
================================ */

.mg-container {
  width: 100%;
  max-width: var(--mg-container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.mg-section {
  padding-top: var(--mg-section-space);
  padding-bottom: var(--mg-section-space);
}

/* ================================
   Cards
================================ */

.mg-card {
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  overflow: hidden;
  box-shadow: var(--mg-shadow-soft);
  transition: var(--mg-transition);
}

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

/* ================================
   Buttons
================================ */

.mg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: var(--mg-secondary);
  color: #ffffff !important;

  padding: 15px 28px;

  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;

  transition: var(--mg-transition);
}

.mg-btn-primary:hover {
  background: var(--mg-secondary-dark);
  transform: translateY(-2px);
}

.mg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: transparent;
  color: var(--mg-primary) !important;

  border: 1px solid var(--mg-primary);

  padding: 15px 28px;

  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;

  transition: var(--mg-transition);
}

.mg-btn-secondary:hover {
  background: var(--mg-primary);
  color: #ffffff !important;
}

/* ================================
   Typography Helpers
================================ */

.mg-heading {
  color: var(--mg-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mg-text-soft {
  color: var(--mg-text-soft);
}

/* ================================
   Utilities
================================ */

.mg-rounded {
  border-radius: var(--mg-radius-lg);
}

.mg-shadow {
  box-shadow: var(--mg-shadow-soft);
}

.mg-bg-white {
  background: var(--mg-surface);
}

.mg-bg-muted {
  background: var(--mg-muted);
}

/* ================================
   Responsive
================================ */

@media (max-width: 1024px) {

  :root {
    --mg-section-space: 90px;
  }

}

@media (max-width: 767px) {

  :root {
    --mg-section-space: 64px;
  }

  .mg-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mg-btn-primary,
  .mg-btn-secondary {
    width: 100%;
  }

}