/*
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;
}


/* Estilos Globales y Reset */
.main-header {
    width: 100%;
    position: relative;
    z-index: 10; /* Asegura que este por encima de otros contenidos */
}

/* Barra Superior */
.top-bar {
    height: 20px;
    background-color: #164361;
    width: 100%;
}

.header-content-wrapper {
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Area del Logo */
.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Altura del área para definir la curva */
    
    /* Fondo que genera la forma curva */
    background-color: white;
    
    /* Creación de la forma con clip-path (curva del lado derecho) */
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    
    /* Traslada la forma hacia la izquierda para que parezca que el logo sale de ella */
    transform: translateX(-100px);
    width: 380px; /* Ajusta el ancho para el tamaño de la curva */
}
.btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo {
    width: 250px;
    height: auto;
    display: block;
}

/* Navegacion y Boton */

.main-navigation {
    display: flex;
    align-items: center;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Espacio entre elementos del menu */
}

.nav-menu li a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: color 0.3s;
}

/* Boton */

.cta-button {
    background-color: var(--color-yellow);
    color: var(--color-dark-blue);
    text-decoration: none;
    padding: 15px 30px;
    font-weight: 700;
    border-radius: 10px;
    transition: background-color 0.3s;
}