/* ───────── RETIROS (Zen + paleta Rosa/Verd) ───────── */

/* Google Fonts (Zen) */
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique+Soft:wght@400;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root{
    --rosa: rgba(252,210,232,0.58);
    --verd: rgba(223,243,164,0.57);
    /* fallbacks si no existen en global */
    --primary-color: #8B4513;
    --secondary-color: #D2B48C;
    --accent-color: #228B22;
    --text-dark: #2C3E50;
}

.retiros-page h1,
.retiros-page h2,
.retiros-page h3,
.retiros-page .section-title{
    font-family: "Zen Antique Soft", Georgia, serif;
}
.retiros-page p, .retiros-page li, .retiros-page blockquote, .retiros-page .btn{
    font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ───────── Hero IGUAL QUE EN INICIO ───────── */
.hero-section.retiros-hero{
    color:#fff;
    text-align:center;
    min-height: 100svh;
    display:flex; align-items:center;
    padding: 140px 0;
    background:
            linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.28)),
            url('/assets/img/retiros/hero.jpg') center/cover no-repeat;
}
.hero-section.retiros-hero h1{
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,.3);
    margin-bottom: .8rem;
}
.hero-section.retiros-hero .lead{
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    margin-bottom: 1.6rem;
}
@media (max-width: 991px){
    .hero-section.retiros-hero{ min-height:65vh; padding:120px 0; }
}

/* ───────── Bloques color (tu paleta) ───────── */
.container-green{ background: var(--verd); border-radius: 20px; padding: 48px 28px; }
.container-pink{  background: var(--rosa); border-radius: 20px; padding: 48px 28px; }

/* ───────── Tarjetas / iconos ───────── */
img{ max-width:100%; height:auto; display:block; }
.card{ border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,.08); }
.icon-xl{ font-size:3rem; line-height:1; margin-bottom:16px; }
.card h5{ margin-bottom:.5rem; }

/* ───────── Post “Instagram style” ───────── */
.insta-card{
    max-width: 560px;              /* un pelín más grande */
    margin-inline:auto;             /* centrado horizontal */
    border-radius: 18px; overflow:hidden;
    background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.insta-head{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px;
}
.insta-avatar{
    width:36px; height:36px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(0,0,0,.06);
}
.insta-user{ font-weight:600; font-family:"Zen Maru Gothic", sans-serif; }
.insta-media{
    position:relative; background:#000;
    aspect-ratio: 4 / 5;            /* formato IG vertical */
    overflow:hidden;
}
.insta-media img, .insta-media video{
    width:100%; height:100%; object-fit:cover; display:block;
}
.insta-actions{
    display:flex; gap:16px; padding:10px 14px; align-items:center;
    border-top:1px solid rgba(0,0,0,.06);
}
.insta-caption{
    padding:0 14px 12px;
    font-size:.95rem;
}
.insta-actions i{ font-size:1.35rem; opacity:.85; }

/* Centrado “un poco más” del bloque media en la introducción */
.intro-row{ align-items:center; }
.intro-row .media-col{ display:flex; justify-content:center; }

/* ───────── Retreat cards ───────── */
.retreat-card{
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    height: 100%;
}

/* ───────── Quote ───────── */
.retiros-quote{
    background: var(--rosa);
    border-radius: 16px;
    padding: 28px;
}

/* ───────── CTA suave (color más suave, sin degradado fuerte) ───────── */
.retiros-cta-soft{
    background: var(--rosa);                 /* suave y coherente con tu paleta */
    color: var(--text-dark);
}
.retiros-cta-soft h2,
.retiros-cta-soft p{ color: var(--text-dark); }
.retiros-cta-soft .btn{
    background: var(--primary-color); border-color: var(--primary-color);
    color:#fff;
}
.retiros-cta-soft .btn:hover{
    filter: brightness(0.95);
}

/* separaciones */
.section-gap{ margin: 48px 0; }