/*
Theme Name: Hello UdeMedellín Child
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-umed-child
*/

/* ================================
   Variables
================================= */
:root {
  --color-dark-blue: #001625;
  --color-green: #11A8A6;
  --color-blue: #164260;
  --color-dark-red: #741417;
  --color-red: #CE282D;
  --color-yellow: #FDDA2D;
  --color-background: #FDF6F6;

  --font-body: 'Lato', sans-serif;
  --font-heading: 'Lora', serif;

  --transition-base: all 0.3s ease-in-out;
  --radius-base: 0.5rem;
}

/* ================================
   Reset & Base
================================= */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-dark-blue);
  line-height: 1.6;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-blue);
  margin-top: 0;
  line-height: 1.2;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: var(--transition-base);
}
a:hover {
  color: var(--color-dark-red);
}

/* ================================
   Layout Utilities
================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }

.rounded { border-radius: var(--radius-base); }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* ================================
   Color Utilities
================================= */
.bg-dark-blue { background-color: var(--color-dark-blue); }
.bg-blue { background-color: var(--color-blue); }
.bg-green { background-color: var(--color-green); }
.bg-red { background-color: var(--color-red); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-white { background-color: #fff; }

.text-dark-blue { color: var(--color-dark-blue); }
.text-blue { color: var(--color-blue); }
.text-green { color: var(--color-green); }
.text-red { color: var(--color-red); }
.text-yellow { color: var(--color-yellow); }

.bg-light { background-color: var(--color-background); }

/* ================================
   Buttons
================================= */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-base);
  font-weight: 600;
  transition: var(--transition-base);
  font-family: var(--font-body);
}

.btn-blue {
  background-color: var(--color-blue);
  color: #fff;
}
.btn-blue:hover {
  background-color: var(--color-dark-blue);
}

.btn-red {
  background-color: var(--color-red);
  color: #fff;
}
.btn-red:hover {
  background-color: var(--color-dark-red);
}

/* ================================
   Accessibility
================================= */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ================================
   Custom Components
================================= */
/* Add components here as needed */


/* Títulos */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading) !important;
    color: var(--color-blue);
}

/* Cuerpo de Texto Asegura que fuente 'Lato' anule cualquier ajuste de Elementor. 
*/
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-section p,
.elementor-column p {
    font-family: var(--font-body) !important;
}

/* Botones y Elementos de Interfaz Aplica fuente corporal a otros elementos interactivos.
*/
.elementor-button,
.elementor-button .elementor-button-content-wrapper,
.elementor-widget-button .elementor-button {
    font-family: var(--font-body) !important; /* 'Lato' */
}

/* Lista de Iconos (Icon List) */
.elementor-icon-list-items .elementor-icon-list-text {
    font-family: var(--font-body) !important;
}

/* 4. Reseteo General de Elementor (Asegura la herencia) */
/* Este selector de alta especificidad obliga a heredar las fuentes 
   cuando Elementor no aplica un estilo específico.
*/
.elementor * {
    font-family: inherit;
}