* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
    background: rgba(61, 196, 61, 0.1);
}

:root {
    --main-color: #006665;
    --second-color: #cb0101;
    --third-color: #262626;

    --scroolbar-thumb: #262626;
    --scrollbar-track: #7c7c8c;
}

html{
    scrollbar-width: thin;
    scrollbar-color: var(--scroolbar-thumb) var(--scrollbar-track);
    scroll-behavior: smooth;
    /* fondo con patrón  */
    background:
        linear-gradient(135deg, #646569 21px, #acbdba 22px, #acbdba 24px, transparent 24px, transparent 67px, #acbdba 67px, #acbdba 69px, transparent 69px),
        linear-gradient(225deg, #646569 21px, #acbdba 22px, #acbdba 24px, transparent 24px, transparent 67px, #acbdba 67px, #acbdba 69px, transparent 69px)0 64px;
    background-color:#646569;
    background-size: 64px 128px;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 6em;
    padding-block: 40px;
    background: rgba(255, 255, 255, 0.4);
}

header img {
    aspect-ratio: auto;
    width: 400px;
}

main {
    /* background-color: var(--third-color); */
    width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(500px, 1fr));
    margin-block: 20px;
}

main section.info {
    height: min-content;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap-reverse;
    padding-block: 15px;
}
main section.info article{
    min-width: 320px;
    max-width: 500px;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 40px;
    gap: 30px;
    background-color: #cddddd;
    border: solid 3px #006665;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
main section.info article h2{
    font-size: 40px;
}
main section.info article p {
    font-size: 25px;
    text-align: left;
}
main section.info img {
    border: solid 3px #006665;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

main section.company-goals {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    width: inherit;
    padding: 40px;
    background-color: #006665;
}

main section.company-goals article {
    min-width: 320px;
    max-width: 2em;
    padding-block: 20px;
    padding-inline: 10px;
}
main section.company-goals article h3 {
    text-align: center;
    font-size: 25px;
    margin-block-end: 15px;
    position: relative;
}
main section.company-goals article h3::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #cb0101;
}
main section.company-goals article p {
    font-size: 20px;
}

main section.content {
    padding-block: 15px;
    text-align: center;
    min-height: 320px;
    background-color: azure;
}

main section.content h3{
    display: block;
    margin-block-end: 10px;
    font-size: 25px;
}

main section.content article{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

main section.content article figure{
    position: relative;
}
main section.content article figure figcaption{
    position: absolute;
    bottom: 1px;
    left: 14%;
    width: 71%;
    padding-block: 15px;
    font-size: 18px;
    text-align: center;
    color: white;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}



footer {
    width: 100%;
    height: 8em;
    display: grid;
    grid-template-areas:
    "rights rights social"
    "partner partner social";
}

footer section.rights {
    grid-area: rights;
}
footer section.partners {
    grid-area: partner;
}
footer section.social-networks {
    grid-area: social;
}