/*este file está en wordpress, en la carpeta del tema astra-child public_html/wp-content/themes/astra-child/ */
/* =============== Reset Básico =============== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-secondary);
  color: var(--color-texto);
  background-color: var(--color-blanco);
  line-height: 1.5;
}

/* =============== Variables Globales =============== */
:root {
  /* Colores */
  --color-primario: #08AD49;
  --color-secundario: #1A1919;
  --color-texto: #999999;
  --color-accent: #0CF000;
  --color-blanco: #FFFFFF;
  --color-gris: #CCCCCC;
  /* Nuevos colores personalizados */
  --color-fondoContainer-oscuro: #1D1C1C;
  --color-texto-oscuro-15: #262626;
  --color-texto-oscuro-30: #4D4D4D;
  --color-texto-claro-100: #FFFFFF;
  --color-texto-claro-80: #CCCCCC;
  --color-fondo-claro: #F5F5F7;
  --color-boton-oscuro: #262626;
  /* Variantes de color primario */
  --color-primario-lighten-15: #0EF468;
  --color-primario-lighten-30: #57F796;
  --color-primario-lighten-45: #A0FBC4;
  --color-primario-lighten-60: #E9FEF1;
  --color-primario-darken-15: #05642A;
  --color-primario-darken-30: #011B0B;
  --color-primario-desaturate-15: #169F4C;
  --color-primario-desaturate-30: #23924F;
  --color-primario-desaturate-45: #318452;
  --color-primario-desaturate-60: #3E7755;
  --color-primario-desaturate-75: #4C6957;
  --color-primario-desaturate-90: #595C5A;

  /* Tipografía */
  --font-primary: "Playfair Display", sans-serif;
  --font-secondary: "Lato", sans-serif;

  /* Espaciados */
  --fluid-side-padding-min: 1.25rem;
  --fluid-side-padding-max: 5rem;

  --section-xxl-padding-min: 9.375rem;
  --section-xxl-padding-max: 10rem; 
  --section-xl-padding-min: 6.875rem;
  --section-xl-padding-max: 7.5rem;
  --section-l-padding-min: 5.625rem;
  --section-l-padding-max: 6.25rem;
  --section-m-padding-min: 5rem;
  --section-m-padding-max: 5rem;
  --section-s-padding-min: 3.75rem;
  --section-s-padding-max: 3.75rem;
  --section-xs-padding-min: 2.5rem;
  --section-xs-padding-max: 2.5rem;
  --section-xxs-padding-min: 1.5rem;
  --section-xxs-padding-max: 1.5rem;
  --section-header-padding-min: 1.25rem;
  --section-header-padding-max: 1.25rem;

  /* Otros */
  --section-hero-height: 100vh;
  --section-offset-header: 80px;
  --section-narrow: 62.5rem;
  --section-narrow-xs: 45rem;
  /* Espaciado base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

/* =============== Estilos Base =============== */
h1 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
h2 {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
h3 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
h4 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
p {
  margin-bottom: var(--space-3);
}

/* =============== Clases de Sección/Contenedor =============== */
.section-xxl {
  padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xl {
  padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-l {
  padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-m {
  padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-s {
  padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xs {
  padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-xxs {
  padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-header {
  padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
}

.section-hero {
  min-height: var(--section-hero-height) !important;
}

.section-full div {
  max-width: 100% !important;
}

.section-narrow .e-con-inner {
  max-width: var(--section-narrow) !important;
}

.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
}

.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* =============== Media Queries para Responsividad =============== */
@media (max-width: 1024px) {
  body {
    font-size: 0.95rem;
  }
  .section-xxl,
  .section-xl,
  .section-l {
    padding-left: var(--fluid-side-padding-min);
    padding-right: var(--fluid-side-padding-min);
  }
}

@media (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }
  .section-xxl {
    padding-top: calc(var(--section-xxl-padding-min) * 0.8);
    padding-bottom: calc(var(--section-xxl-padding-min) * 0.8);
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.85rem;
  }
}

/* =============== Clases de Utilidad (Ejemplo) =============== */
.u-center {
  text-align: center;
}

.u-margin-bottom {
  margin-bottom: 1rem;
}


/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--color-fondoContainer-oscuro);
  background-color: var(--color-boton-oscuro);
  box-shadow: 0 0 1px 2px var(--color-texto-oscuro-30);
  border-radius: 2.2rem;
  gap: 0.7rem 1.5rem;
  padding: 0.7rem 1.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  color: var(--color-texto-claro-100);
  background-color: var(--color-boton-oscuro);
  border-radius: 2.2rem;
  gap: 0.7rem 1.5rem;
}

/* Imágenes */
.img-rounded {
  border-radius: 15px;
}