.cielo-guide {
    --ink: #17403c;
    --cream: #f3eddf;
    --blue: #9acad3;
    --copper: #c2753d;
    background: var(--cream);
    color: var(--ink);
	font-weight:400;
	font-size:18px;
	line-height:1.65;
}

.cielo-guide * {
    box-sizing: border-box
}

.cielo-guide h1,
.cielo-guide h2,
.cielo-guide h3 {
    font-family: Perpetua, Georgia, serif;
    font-weight: 400;
    line-height: 1.05;
    margin: 0 0 24px
}

.cielo-guide h1 {
    font-size: clamp(50px, 7vw, 100px)
}

.cielo-guide h2 {
    font-size: clamp(38px, 5vw, 68px)
}

.cielo-guide h3 {
    font-size: clamp(24px,2.903vw,36px)
}

.cielo-guide p {
    margin: 0 0 22px;
	color:#fffdf8;
}

.cielo-guide a {
    color: inherit;
    text-underline-offset: 5px;
}
.cg-links a,
.cg-trips a,
.cg-dark a,
#local a{
	text-decoration:underline;
	
}

 .cg-grid{
	padding-top:15px;
}

.cielo-guide a:focus-visible {
    outline: 3px solid var(--copper);
    outline-offset: 5px
}

.cg-wrap {
    max-width: 1240px;
    margin: auto;
    padding: 0 32px
}

.cg-hero {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    padding: 80px 0;
    color: #fffdf8;
    background: #17403c url(assets/hero.jpeg) center/cover
}

.cg-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 41, 39, .88), rgba(13, 41, 39, .38))
}

.cg-hero .cg-wrap {
    position: relative;
    width: 100%
}

.cg-hero p {
    max-width: 580px;
    font-size: clamp(16px,1.613vw,20px) ;
	color:#fffdf8;
}

.cg-label {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .16em;
    margin-bottom: 25px !important;
	font-weight:500;
}

.cg-section {
    padding: 85px 0;
	background:#f3eddf;
}

.cg-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px
}

.cg-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    border-top: 1px solid #17403c40;
    padding-top: 22px;
    margin-top: 25px;
    font-size: 16px
}

.cg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 60px
}

.cg-item {
    border-top: 1px solid #17403c40;
    padding-top: 28px;
	display:flex;
	flex-direction:column;
}
.cg-item a{
	margin-top:auto;
}

.cg-item p {
    font-size: 17px
}

.cg-dark {
    background: #17403c;
    color: #fffdf8
}

.cg-dark .cg-item {
    border-color: #ffffff40
}

.cg-dark .cg-label {
    color: #9acad3
}

.cg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px
}

.cg-split img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover
}

.cg-note {
    font-size: 15px !important
}

.cg-trips {
    background: #fffdf8
}

.cg-number {
    font-family: Perpetua, Georgia, serif;
    color: #9acad3;
    font-size: 64px;
    line-height: 1;
    margin-bottom: 20px
}

.cg-tip {
    font-size: 16px !important;
    border-top: 1px solid #17403c30;
    padding-top: 15px
}

.cg-cta {
    background: #17403c;
	color:#fffdf8;
}
.cg-cta p{
	color:#fffdf8 !important;
}

.cg-button {
    display: inline-block;
    padding: 14px 28px;
    background: #17403c;
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .1em;
	border:1px solid #9b9b9b;
}

.cg-button:hover {
    background: #0d2927
}

body {
    margin: 0
}

.preview-header {
    background: #9acad3;
    padding: 12px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    font-family: Perpetua, Georgia, serif
}

.preview-header img {
    width: 130px
}

.preview-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center
}

.preview-header a {
    color: #17403c;
    text-decoration: none;
    font-size: 17px
}

.preview-header .book {
    background: #000;
    color: #fff;
    padding: 10px 22px;
    white-space: nowrap
}

.preview-footer {
    background: #17403c;
    color: #fffdf8;
    padding: 50px 32px;
    text-align: center;
    font: 18px/1.6 Perpetua, Georgia, serif
}

.preview-footer a {
    color: inherit
}
.cg-split p,
.cg-intro p,
.cg-trips p,
#local p{
	color:#17403c;
	
}

@media(max-width:700px) {
	.cielo-guide {
		font-size:16px;
	}
    .cg-wrap {
        padding: 0 22px
    }

    .cg-intro,
    .cg-grid,
    .cg-split {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .cg-section {
        padding: 55px 0
    }

    .cg-hero {
        min-height: 480px;
        padding: 60px 0
    }


    .preview-header {
        flex-wrap: wrap;
        justify-content: center
    }

    .preview-header nav {
        gap: 12px 20px
    }

    .cg-split img {
        aspect-ratio: 4/3
    }
}