/* Blog / Erlebnis landings */
.blog-hero{position:relative;padding:80px 24px 60px;text-align:center;color:#fff;overflow:hidden;}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(15,41,64,.3));}
.blog-hero .tag{display:inline-block;background:rgba(255,255,255,.18);color:#fff;padding:5px 16px;border-radius:20px;font-size:.78rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.blog-hero h1{font-family:'Playfair Display',serif;font-size:2.2rem;margin-bottom:14px;max-width:750px;margin-left:auto;margin-right:auto;line-height:1.25;}
.blog-hero .sub{font-size:1.05rem;opacity:.9;max-width:600px;margin:0 auto 8px;}
.blog-hero .meta{font-size:.85rem;opacity:.7;margin-top:12px;}
.blog-content{max-width:760px;margin:0 auto;padding:40px 24px 50px;}
.blog-content h2{font-family:'Playfair Display',serif;color:#1a6fad;font-size:1.5rem;margin:36px 0 14px;padding-top:16px;}
.blog-content h3{color:#333;font-size:1.15rem;margin:24px 0 10px;}
.blog-content p{font-size:1rem;line-height:1.85;color:#444;margin-bottom:16px;}
.blog-content ul{padding-left:24px;margin-bottom:16px;}
.blog-content li{font-size:.95rem;line-height:1.7;color:#555;margin-bottom:6px;}
.blog-content strong{color:#333;}
.mood-box{background:linear-gradient(135deg,#f0f4ff,#e8eeff);border-left:4px solid #6366f1;border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;}
.mood-box h3{color:#4f46e5;margin:0 0 10px;font-size:1.05rem;}
.mood-box p{margin:0;font-size:.92rem;color:#555;line-height:1.7;}
.tip-box{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-left:4px solid #f5a623;border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;}
.tip-box h3{color:#d97706;margin:0 0 10px;font-size:1.05rem;}
.tip-box p{margin:0;font-size:.92rem;color:#555;line-height:1.7;}
.blog-img-full{width:100%;border-radius:14px;margin:28px 0;box-shadow:0 4px 20px rgba(0,0,0,.1);}
.blog-img-caption{text-align:center;font-size:.82rem;color:#888;margin-top:-18px;margin-bottom:24px;}
.blog-cta{text-align:center;background:linear-gradient(135deg,#e8f4fd,#d1eafc);border-radius:16px;padding:36px 24px;margin:40px 0;}
.blog-cta h3{font-family:'Playfair Display',serif;color:#1a6fad;font-size:1.3rem;margin-bottom:10px;}
.blog-cta p{color:#555;font-size:.95rem;margin-bottom:20px;}
.blog-cta a{display:inline-block;background:#f5a623;color:#fff;padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:1rem;transition:all .2s;}
.blog-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,166,35,.35);}
.blog-back{display:inline-flex;align-items:center;gap:6px;color:#1a6fad;font-weight:600;text-decoration:none;font-size:.95rem;margin-bottom:10px;}
.blog-back:hover{text-decoration:underline;}
@media(max-width:600px){.blog-hero h1{font-size:1.6rem;}.blog-content{padding:28px 18px 40px;}}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(15,82,137,.3));}
.route-box{background:#e8f4fd;border-left:4px solid #1a6fad;border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;}
.route-box h3{color:#1a6fad;margin:0 0 10px;font-size:1.05rem;}
.route-box p{margin:0;font-size:.92rem;color:#555;line-height:1.7;}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(22,78,99,.3));}
.warning-box{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #ef4444;border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;}
.warning-box h3{color:#dc2626;margin:0 0 10px;font-size:1.05rem;}
.warning-box p{margin:0;font-size:.92rem;color:#555;line-height:1.7;}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(15,50,35,.3));}
.nature-box{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-left:4px solid #059669;border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;}
.nature-box h3{color:#047857;margin:0 0 10px;font-size:1.05rem;}
.nature-box p{margin:0;font-size:.92rem;color:#555;line-height:1.7;}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(10,50,25,.3));}
.blog-hero {
position: relative;
background: linear-gradient(rgba(26, 26, 46, .4), rgba(26, 26, 46, .55)), url('images/esperanza-sunset.webp') center/cover no-repeat;
padding: 80px 24px 60px;
text-align: center;
color: #fff;
overflow: hidden;
}
.blog-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(transparent, rgba(26, 26, 46, .3));
.blog-hero .tag {
display: inline-block;
background: rgba(255, 255, 255, .18);
padding: 5px 16px;
border-radius: 20px;
font-size: .78rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 16px;
.blog-hero h1 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
margin-bottom: 14px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
line-height: 1.25;
.blog-hero .sub {
font-size: 1.05rem;
opacity: .9;
max-width: 600px;
margin: 0 auto 8px;
.blog-hero .meta {
font-size: .85rem;
opacity: .7;
margin-top: 12px;
.blog-content {
max-width: 760px;
margin: 0 auto;
padding: 40px 24px 50px;
.blog-content h2 {
color: #1a6fad;
font-size: 1.5rem;
margin: 36px 0 14px;
padding-top: 16px;
.blog-content h3 {
color: #333;
font-size: 1.15rem;
margin: 24px 0 10px;
.blog-content p {
font-size: 1rem;
line-height: 1.85;
color: #444;
.blog-content ul {
padding-left: 24px;
.blog-content li {
font-size: .95rem;
line-height: 1.7;
color: #555;
margin-bottom: 6px;
.blog-content strong {
.event-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
margin: 32px 0;
transition: transform .2s;
.event-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
.event-card-img {
width: 100%;
height: 240px;
object-fit: cover;
.event-card-body {
padding: 24px 28px;
.event-card-tag {
background: #e8f4fd;
padding: 4px 12px;
font-size: .72rem;
font-weight: 700;
margin-bottom: 10px;
.event-card-body h3 {
font-size: 1.25rem;
margin: 0 0 10px;
.event-card-body p {
font-size: .92rem;
margin: 0 0 14px;
.event-card-detail {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: .82rem;
color: #888;
.event-card-detail span {
align-items: center;
gap: 4px;
.tip-box {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-left: 4px solid #f5a623;
border-radius: 0 12px 12px 0;
padding: 20px 24px;
margin: 28px 0;
.tip-box h3 {
color: #d97706;
.tip-box p {
margin: 0;
.love-box {
background: linear-gradient(135deg, #fdf2f8, #fce7f3);
border-left: 4px solid #ec4899;
.love-box h3 {
color: #db2777;
.love-box p {
.party-box {
background: linear-gradient(135deg, #f0f4ff, #e8eeff);
border-left: 4px solid #6366f1;
.party-box h3 {
color: #4f46e5;
.party-box p {
.blog-img-full {
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
.blog-img-caption {
margin-top: -18px;
margin-bottom: 24px;
.blog-cta {
background: linear-gradient(135deg, #e8f4fd, #d1eafc);
padding: 36px 24px;
margin: 40px 0;
.blog-cta h3 {
font-size: 1.3rem;
.blog-cta p {
margin-bottom: 20px;
.blog-cta a {
background: #f5a623;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
transition: all .2s;
.blog-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 166, 35, .35);
.blog-back {
display: inline-flex;
gap: 6px;
.blog-back:hover {
text-decoration: underline;
.ideas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.idea-item {
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
.idea-item:hover {
.idea-icon {
font-size: 2rem;
margin-bottom: 8px;
.idea-title {
margin-bottom: 4px;
.idea-sub {
font-size: .8rem;
@media(max-width:600px) {
font-size: 1.6rem;
padding: 28px 18px 40px;
height: 180px;
grid-template-columns: 1fr 1fr;