.main-content{
 padding: var(--space-xl) 0;
}

.self-reference{
 color: var(--color-primary);
 text-decoration: none;
}

.self-reference:hover{
 text-decoration: underline;
}
*,
*::before,
*::after{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html{
 font-size: var(--font-size-base);
 scroll-behavior: smooth;
}

body{
 font-family: var(--font-family-base);
 font-size: var(--font-size-base);
 
 color: var(--color-text);
 background-color: var(--color-background);
}

button,
input,
textarea,
select{
 font-family: inherit;
 font-size: inherit;
}
:root{
 --color-primary: #d85c2b;
 --color-primary-hover: #00d3deff;
 --color-secondary: #f5efe7;
 --color-text: #1a1410;
 --color-background: #fefdfb;
 --color-border: #f5efe7;
 --color-success: #08cb00;
 --color-warning: #ffc107;
 --color-danger: #dc3545;

 --font-family-base: "Helvetica Neue", Arial, sans-serif;
 --font-size-xs: 0.6rem;
 --font-size-sm: 0.8rem;
 --font-size-base: 1rem;
 --font-size-lg: 1.1rem;
 --font-size-xl: 1.5rem;
 --font-size-2xl: 2rem;
 --font-size-3xl: 3rem;
 --line-height-base: 1.6;

 --space-xs: 0.25rem;
 --space-sm: 0.5rem;
 --space-md: 1rem;
 --space-lg: 1.5rem;
 --space-xl: 2rem;
 --space-2xl: 3rem;
 --space-3xl: 4rem;
 --gutter: 2rem;

 --border-radius-sm: 4px;
 --border-radius-md: 8px;
 --border-radius-lg: 12px;

 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
 --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.footer{
 margin-top: var(--space-xl);
 padding: var(--space-lg) var(--gutter) var(--space-2xl);
 text-align: center;
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
}
.header{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-sm) var(--space-md);
 border-bottom: 1px solid var(--color-border);
 box-shadow: var(--shadow-md);

 .campanita{
 display: flex;
 align-items: center;
 gap: var(--space-sm);
 text-decoration: none;
 font-weight: 600;
 font-size: 1.2rem;
 }

 .lang{
 text-decoration: none;
 color: var(--color-text);
 }

 .lang:hover{
 text-decoration: underline;
 }
}
.hero{
 padding: var(--space-xl) var(--gutter) var(--space-md);
 min-height: 30vh;

 p{
 margin: var(--space-lg) 0 var(--space-md) 0;
 }

 a{
 text-decoration: none;
 padding: var(--space-sm) var(--space-md);
 color: var(--color-background);
 background-color: var(--color-primary);
 border-radius: var(--border-radius-md);
 font-weight: 700;
 }
}

.gallery{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 400px;
 overflow-x: scroll;
 gap: 15px;
 padding: 20px;
 scroll-behavior: smooth;
 scroll-snap-type: x mandatory;

 img{
 scroll-snap-align: start;
 }
}

.steps{
 padding: var(--space-xl) var(--gutter);

 ol{
 list-style: none;
 display: flex;
 flex-direction: column;
 text-align: center;
 gap: var(--space-lg);

 li{
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
 align-items: center;
 }
 }
}

.resume{
 padding: var(--space-xl) var(--gutter);
 background-color: var(--color-secondary);
 text-align: center;

 p{
 margin: var(--space-md) 0 var(--space-sm) 0;
 }
}

@media (min-width: 768px){
 .steps{
 ol{
 flex-direction: row;
 text-align: left;

 li{
 flex-direction: row;
 align-items: flex-start;
 }
 }
 }
}