<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seu Curriculo</title>
    <style>
        body,
        html {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
        }

        .stage {
            position: relative;
            margin: auto;
            width: 100%;
            height: auto;
            padding: 0px 60px 0px 60px;

        }

        .header {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: end;
            margin-top: 20px;
        }

        .header h2 {
            margin: 0px
        }

        .header .photo img {
            height: auto;
            width: 150px;
        }

        .default-color {
            color: #662e93
        }

        .body section {
            margin-top: 15px;
            border-bottom: solid #CCC 1px;
            max-width: 85%;
        }

        .body .row {
            width: 100%;
        }

        .body .row .title-wrapper {
            width: 100%;
        }

        .body .row .title-wrapper h3 {
            margin: 0px;
        }

        .body .row .title-wrapper p {
            font-weight: bold;
            margin-bottom: 0px;
        }

        .body .row .content-wrapper {
            width: 100%;
        }

        .body .row .content-wrapper p {
            text-align: justify;
            font-size: 15px;
            color: #333
        }

        .body .row .content-wrapper p.title {
            font-weight: bold;
        }

        .body .row li {
            text-align: justify;
        }

        footer {
            height: 100px;
        }

        .triangle {
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0 200px 150px 0;
            border-color: transparent #662e93 transparent transparent;
            transform: rotate(0deg);
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .profile-info p {
            margin: 3px 0px 3px 0px;
            text-align: justify;
        }

        .profile-info p b {
            color: #666;
        }

        .header {
            width: 100%;
            white-space: nowrap;
            /* Impede que os elementos quebrem para a linha de baixo */
        }

        .photo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            background: #f3f3f3;
            display: inline-block;
            vertical-align: top;
            /* 🔥 força alinhar pelo topo */
            margin-right: 20px;
            position: relative;
        }

        .photo img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* centra de verdade */
            min-width: 100%;
            min-height: 100%;
            width: auto;
            /* evita distorção */
            height: auto;
            /* sem border-radius aqui; o recorte é do container */
        }

        .profile-info {
            display: inline-block;
            width: calc(100% - 120px);
            /* Calcula o espaço restante para não quebrar */
            vertical-align: top;
            /* Mantém alinhado com a foto */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="stage">
        <div class="triangle"></div>
        <div class="header">
            <div class="photo" #{styles_photo}>
                <img src="#{avatar}" alt="Foto do candidato" onerror="this.style.display='none'">
            </div>
            <div class="profile-info">
                <h2>#{fullname}</h2>
                <p><b>Email:</b> #{email}</p>
                <p><b>Telefone:</b> #{phone}</p>
                <p><b>Endereço:</b> #{address}</p>
                <br />
                <h3 class="default-color">CARGOS/ÁREA DE INTERESSE</h3>
                #{desired_jobs}
            </div>
        </div>
        <section class="body">
            <section>
                <div class="row">
                    <div class="title-wrapper">
                        <h3 class="default-color">SOBRE MIM</h3>
                    </div>
                    <div class="content-wrapper">
                        <p>#{about_me}</p>
                    </div>
                </div>
            </section>

            <section #{styles}>
                <div class="row">
                    <div class="title-wrapper">
                        <h3 class="default-color">EXPERIÊNCIA PROFISSIONAL</h3>
                    </div>
                </div>
                #{profissional_experience}
            </section>

            <section>
                <div class="row">
                    <div class="title-wrapper">
                        <h3 class="default-color">FORMAÇÃO ACADÊMICA</h3>
                    </div>
                </div>
                #{education_experience}
            </section>

            <section #{styles_courses}>
                <div class="row">
                    <div class="title-wrapper">
                        <h3 class="default-color">CURSOS E ESPECIALIZAÇÕES</h3>
                    </div>
                </div>
                #{courses}
            </section>
        </section>
        <!--<footer style="position: relative;">-->

        <!--</footer>-->
    </div>
</body>

</html>