@font-face {
    font-family: 'Bathsy';
    src: url('/assets/fonts/Bathsy.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotu';
    src: url('/assets/fonts/Gotu-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('/assets/fonts/Karla-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla Italic';
    src: url('/assets/fonts/Karla-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* breakpoints Bootstrap-ish: sm=576, md=768, lg=992 */
.resp-fs {
    font-size: var(--fs-m, 16px);             /* móvil por defecto */
}
@media (min-width: 768px) {
    .resp-fs {
        font-size: var(--fs-t, var(--fs-m));  /* tablet */
    }
}
@media (min-width: 992px) {
    .resp-fs {
        font-size: var(--fs-d, var(--fs-t));  /* desktop */
    }
}

.bg-blue {
    background-color: #BAC7D7;
}


.bg-beige {
    background-color: #EBE7E4;
}


.bg-brown {
    background-color: #3C302F;
}


.bg-medium-brown {
    background-color: #B8A891;
}


.bg-green {
    background-color: #A2AA85;
}

/* ===== CLASES PARA APLICAR FUENTES ===== */
/* fuente bathsy */
.ff-bathsy {
  font-family: 'Bathsy', sans-serif;
}

/* fuente gotu */
.ff-gotu {
  font-family: 'Gotu', sans-serif;
}

/* fuente karla normal */
.ff-karla {
  font-family: 'Karla', sans-serif;
}

/* fuente karla italic */
.ff-karla-italic {
  font-family: 'Karla Italic', sans-serif;
}

.c-brown {
  color: #3C302F !important;
}

.c-light-brown {
  color: #4c4140 !important;
}

.c-beige {
  color: #B8A891 !important;
}

.c-light-beige {
  color: #e3ddd6 !important;
}

.c-light-medium-brown {
  color: #bfb19d !important;
}

.c-white {
  color: #fff !important;
}

.c-light-green {
    color: #b7bca1 !important;
}

.c-light-blue {
    color: #c1cddb !important;
}


.mw-50 {
    max-width: 50% !important;
}

.mw-60 {
    max-width: 60% !important;
}

.mw-70 {
    max-width: 70% !important;
}

.mw-75 {
    max-width: 75% !important;
}

.mw-80 {
    max-width: 80% !important;
}

.mw-90 {
    max-width: 90% !important;
}

.mw-100 {
    max-width: 100% !important;
}


/* ==== Helper para el tamaño ==== */
.fs-2 { font-size: 2px; }
.fs-4 { font-size: 4px; }
.fs-6 { font-size: 6px; }
.fs-8 { font-size: 8px; }
.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-25 { font-size: 25px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-32 { font-size: 32px; }
.fs-34 { font-size: 34px; }
.fs-35 { font-size: 35px; }
.fs-36 { font-size: 36px; }
.fs-38 { font-size: 38px; }
.fs-40 { font-size: 40px; }
.fs-42 { font-size: 42px; }
.fs-44 { font-size: 44px; }
.fs-46 { font-size: 46px; }
.fs-48 { font-size: 48px; }
.fs-50 { font-size: 50px; }
.fs-52 { font-size: 52px; }
.fs-54 { font-size: 54px; }
.fs-55 { font-size: 55px; }
.fs-56 { font-size: 56px; }
.fs-58 { font-size: 58px; }
.fs-60 { font-size: 60px; }
.fs-62 { font-size: 62px; }
.fs-64 { font-size: 64px; }
.fs-65 { font-size: 65px; }
.fs-66 { font-size: 66px; }
.fs-68 { font-size: 68px; }
.fs-70 { font-size: 70px; }
.fs-72 { font-size: 72px; }
.fs-74 { font-size: 74px; }
.fs-76 { font-size: 76px; }
.fs-78 { font-size: 78px; }
.fs-80 { font-size: 80px; }
.fs-82 { font-size: 82px; }
.fs-84 { font-size: 84px; }
.fs-86 { font-size: 86px; }
.fs-88 { font-size: 88px; }
.fs-90 { font-size: 90px; }
.fs-92 { font-size: 92px; }
.fs-94 { font-size: 94px; }
.fs-96 { font-size: 96px; }
.fs-98 { font-size: 98px; }
.fs-100 { font-size: 100px; }
.fs-102 { font-size: 102px; }
.fs-104 { font-size: 104px; }
.fs-106 { font-size: 106px; }
.fs-108 { font-size: 108px; }
.fs-110 { font-size: 110px; }
.fs-112 { font-size: 112px; }
.fs-114 { font-size: 114px; }
.fs-116 { font-size: 116px; }
.fs-118 { font-size: 118px; }
.fs-120 { font-size: 120px; }
.fs-122 { font-size: 122px; }
.fs-124 { font-size: 124px; }
.fs-126 { font-size: 126px; }
.fs-128 { font-size: 128px; }
.fs-130 { font-size: 130px; }
.fs-132 { font-size: 132px; }
.fs-134 { font-size: 134px; }
.fs-136 { font-size: 136px; }
.fs-138 { font-size: 138px; }
.fs-140 { font-size: 140px; }
.fs-142 { font-size: 142px; }
.fs-144 { font-size: 144px; }
.fs-146 { font-size: 146px; }
.fs-148 { font-size: 148px; }
.fs-150 { font-size: 150px; }
.fs-152 { font-size: 152px; }
.fs-154 { font-size: 154px; }
.fs-156 { font-size: 156px; }
.fs-158 { font-size: 158px; }
.fs-160 { font-size: 160px; }
.fs-162 { font-size: 162px; }
.fs-164 { font-size: 164px; }
.fs-166 { font-size: 166px; }
.fs-168 { font-size: 168px; }
.fs-170 { font-size: 170px; }
.fs-172 { font-size: 172px; }
.fs-174 { font-size: 174px; }
.fs-176 { font-size: 176px; }
.fs-178 { font-size: 178px; }
.fs-180 { font-size: 180px; }
.fs-182 { font-size: 182px; }
.fs-184 { font-size: 184px; }
.fs-186 { font-size: 186px; }
.fs-188 { font-size: 188px; }
.fs-190 { font-size: 190px; }
.fs-192 { font-size: 192px; }
.fs-194 { font-size: 194px; }
.fs-196 { font-size: 196px; }
.fs-198 { font-size: 198px; }
.fs-200 { font-size: 200px; }
.fs-250 { font-size: 250px; }
.fs-300 { font-size: 300px; }

/* ==== Helper para el tamaño ==== */
.lh-2 { line-height: 2px; }
.lh-4 { line-height: 4px; }
.lh-6 { line-height: 6px; }
.lh-8 { line-height: 8px; }
.lh-10 { line-height: 10px; }
.lh-12 { line-height: 12px; }
.lh-14 { line-height: 14px; }
.lh-16 { line-height: 16px; }
.lh-18 { line-height: 18px; }
.lh-20 { line-height: 20px; }
.lh-22 { line-height: 22px; }
.lh-24 { line-height: 24px; }
.lh-26 { line-height: 26px; }
.lh-28 { line-height: 28px; }
.lh-30 { line-height: 30px; }
.lh-32 { line-height: 32px; }
.lh-34 { line-height: 34px; }
.lh-35 { line-height: 35px; }
.lh-36 { line-height: 36px; }
.lh-38 { line-height: 38px; }
.lh-40 { line-height: 40px; }
.lh-42 { line-height: 42px; }
.lh-44 { line-height: 44px; }
.lh-46 { line-height: 46px; }
.lh-48 { line-height: 48px; }
.lh-50 { line-height: 50px; }
.lh-52 { line-height: 52px; }
.lh-54 { line-height: 54px; }
.lh-55 { line-height: 55px; }
.lh-56 { line-height: 56px; }
.lh-58 { line-height: 58px; }
.lh-60 { line-height: 60px; }
.lh-62 { line-height: 62px; }
.lh-64 { line-height: 64px; }
.lh-65 { line-height: 65px; }
.lh-66 { line-height: 66px; }
.lh-68 { line-height: 68px; }
.lh-70 { line-height: 70px; }
.lh-72 { line-height: 72px; }
.lh-74 { line-height: 74px; }
.lh-76 { line-height: 76px; }
.lh-78 { line-height: 78px; }
.lh-80 { line-height: 80px; }
.lh-82 { line-height: 82px; }
.lh-84 { line-height: 84px; }
.lh-86 { line-height: 86px; }
.lh-88 { line-height: 88px; }
.lh-90 { line-height: 90px; }
.lh-92 { line-height: 92px; }
.lh-94 { line-height: 94px; }
.lh-96 { line-height: 96px; }
.lh-98 { line-height: 98px; }
.lh-100 { line-height: 100px; }
.lh-102 { line-height: 102px; }
.lh-104 { line-height: 104px; }
.lh-106 { line-height: 106px; }
.lh-108 { line-height: 108px; }
.lh-110 { line-height: 110px; }
.lh-112 { line-height: 112px; }
.lh-114 { line-height: 114px; }
.lh-116 { line-height: 116px; }
.lh-118 { line-height: 118px; }
.lh-120 { line-height: 120px; }
.lh-122 { line-height: 122px; }
.lh-124 { line-height: 124px; }
.lh-126 { line-height: 126px; }
.lh-128 { line-height: 128px; }
.lh-130 { line-height: 130px; }
.lh-132 { line-height: 132px; }
.lh-134 { line-height: 134px; }
.lh-136 { line-height: 136px; }
.lh-138 { line-height: 138px; }
.lh-140 { line-height: 140px; }
.lh-142 { line-height: 142px; }
.lh-144 { line-height: 144px; }
.lh-146 { line-height: 146px; }
.lh-148 { line-height: 148px; }
.lh-150 { line-height: 150px; }
.lh-152 { line-height: 152px; }
.lh-154 { line-height: 154px; }
.lh-156 { line-height: 156px; }
.lh-158 { line-height: 158px; }
.lh-160 { line-height: 160px; }
.lh-162 { line-height: 162px; }
.lh-164 { line-height: 164px; }
.lh-166 { line-height: 166px; }
.lh-168 { line-height: 168px; }
.lh-170 { line-height: 170px; }
.lh-172 { line-height: 172px; }
.lh-174 { line-height: 174px; }
.lh-176 { line-height: 176px; }
.lh-178 { line-height: 178px; }
.lh-180 { line-height: 180px; }
.lh-182 { line-height: 182px; }
.lh-184 { line-height: 184px; }
.lh-186 { line-height: 186px; }
.lh-188 { line-height: 188px; }
.lh-190 { line-height: 190px; }
.lh-192 { line-height: 192px; }
.lh-194 { line-height: 194px; }
.lh-196 { line-height: 196px; }
.lh-198 { line-height: 198px; }
.lh-200 { line-height: 200px; }
.lh-250 { line-height: 250px; }
.lh-300 { line-height: 300px; }


/* Padding Top */
.pt-50  { padding-top: 50px !important; }
.pt-60  { padding-top: 60px !important; }
.pt-70  { padding-top: 70px !important; }
.pt-80  { padding-top: 80px !important; }
.pt-90  { padding-top: 90px !important; }
.pt-100 { padding-top: 100px !important; }
.pt-110 { padding-top: 110px !important; }
.pt-120 { padding-top: 120px !important; }
.pt-130 { padding-top: 130px !important; }
.pt-140 { padding-top: 140px !important; }
.pt-150 { padding-top: 150px !important; }
.pt-160 { padding-top: 160px !important; }
.pt-170 { padding-top: 170px !important; }
.pt-180 { padding-top: 180px !important; }
.pt-190 { padding-top: 190px !important; }
.pt-200 { padding-top: 200px !important; }
.pt-250 { padding-top: 250px !important; }

/* Padding Bottom */
.pb-50  { padding-bottom: 50px !important; }
.pb-60  { padding-bottom: 60px !important; }
.pb-70  { padding-bottom: 70px !important; }
.pb-80  { padding-bottom: 80px !important; }
.pb-90  { padding-bottom: 90px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pb-110 { padding-bottom: 110px !important; }
.pb-120 { padding-bottom: 120px !important; }
.pb-130 { padding-bottom: 130px !important; }
.pb-140 { padding-bottom: 140px !important; }
.pb-150 { padding-bottom: 150px !important; }
.pb-160 { padding-bottom: 160px !important; }
.pb-170 { padding-bottom: 170px !important; }
.pb-180 { padding-bottom: 180px !important; }
.pb-190 { padding-bottom: 190px !important; }
.pb-200 { padding-bottom: 200px !important; }
.pb-250 { padding-bottom: 250px !important; }


/* Margin Top */
.mt-50  { margin-top: 50px !important; }
.mt-60  { margin-top: 60px !important; }
.mt-70  { margin-top: 70px !important; }
.mt-80  { margin-top: 80px !important; }
.mt-90  { margin-top: 90px !important; }
.mt-100 { margin-top: 100px !important; }
.mt-110 { margin-top: 110px !important; }
.mt-120 { margin-top: 120px !important; }
.mt-130 { margin-top: 130px !important; }
.mt-140 { margin-top: 140px !important; }
.mt-150 { margin-top: 150px !important; }
.mt-160 { margin-top: 160px !important; }
.mt-170 { margin-top: 170px !important; }
.mt-180 { margin-top: 180px !important; }
.mt-190 { margin-top: 190px !important; }
.mt-200 { margin-top: 200px !important; }

/* Margin Bottom */
.mb-50  { margin-bottom: 50px !important; }
.mb-60  { margin-bottom: 60px !important; }
.mb-70  { margin-bottom: 70px !important; }
.mb-80  { margin-bottom: 80px !important; }
.mb-90  { margin-bottom: 90px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-110 { margin-bottom: 110px !important; }
.mb-120 { margin-bottom: 120px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mb-140 { margin-bottom: 140px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-160 { margin-bottom: 160px !important; }
.mb-170 { margin-bottom: 170px !important; }
.mb-180 { margin-bottom: 180px !important; }
.mb-190 { margin-bottom: 190px !important; }
.mb-200 { margin-bottom: 200px !important; }

@media (max-width: 768px) {


    .fs-80 { font-size: 42px !important }
    .fs-100 { font-size: 42px !important }
    .fs-110 { font-size: 42px !important }
    .fs-120 { font-size: 42px !important }
    .fs-170 { font-size: 42px !important }
    .fs-200 { font-size: 42px !important }

    .lh-100 { line-height:45px !important }

    .fs-xs-10 { font-size: 10px !important; }
    .fs-xs-12 { font-size: 12px !important; }
    .fs-xs-14 { font-size: 14px !important; }
    .fs-xs-16 { font-size: 16px !important; }
    .fs-xs-18 { font-size: 18px !important; }
    .fs-xs-20 { font-size: 20px !important; }
    .fs-xs-22 { font-size: 22px !important; }
    .fs-xs-24 { font-size: 24px !important; }
    .fs-xs-26 { font-size: 26px !important; }
    .fs-xs-28 { font-size: 28px !important; }
    .fs-xs-30 { font-size: 30px !important; }
    .fs-xs-32 { font-size: 32px !important; }
    .fs-xs-34 { font-size: 34px !important; }
    .fs-xs-36 { font-size: 36px !important; }
    .fs-xs-38 { font-size: 38px !important; }
    .fs-xs-40 { font-size: 40px !important; }
    .fs-xs-42 { font-size: 42px !important; }
    .fs-xs-60 { font-size: 60px !important; }

    .lh-xs-10 { line-height: 10px !important; }
    .lh-xs-12 { line-height: 12px !important; }
    .lh-xs-14 { line-height: 14px !important; }
    .lh-xs-16 { line-height: 16px !important; }
    .lh-xs-18 { line-height: 18px !important; }
    .lh-xs-20 { line-height: 20px !important; }
    .lh-xs-22 { line-height: 22px !important; }
    .lh-xs-24 { line-height: 24px !important; }
    .lh-xs-26 { line-height: 26px !important; }
    .lh-xs-28 { line-height: 28px !important; }
    .lh-xs-30 { line-height: 30px !important; }
    .lh-xs-32 { line-height: 32px !important; }
    .lh-xs-34 { line-height: 34px !important; }
    .lh-xs-36 { line-height: 36px !important; }
    .lh-xs-38 { line-height: 38px !important; }
    .lh-xs-40 { line-height: 40px !important; }
    .lh-xs-42 { line-height: 42px !important; }
    .lh-xs-60 { line-height: 60px !important; }


    .mw-50 { max-width: 100% !important }
    .mw-60 { max-width: 100% !important }
    .mw-70 { max-width: 100% !important }
    .mw-80 { max-width: 100% !important }
    .mw-90 { max-width: 100% !important }

    .pt-xs-60 { padding-top: 60px !important }
    .pt-xs-70 { padding-top: 70px !important }
    .pt-xs-80 { padding-top: 80px !important }
    .pt-xs-90 { padding-top: 90px !important }
    .pt-xs-100 { padding-top: 100px !important }

    .c-light-blue { color: #899eb7 !important }
}



/* base comun para titulos gigantes de fondo */
.bg-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  /* tamaño, top y color los marcas en la clase de seccion */
}

/* variante hacia la derecha (newsletter) */
.bg-title--right {
  left: auto;
  right: 0;
  transform: none;
  text-align: right;
}


/* base: siempre raleway 14px (pedido) */
.btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid currentColor;
  background: none;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;  /* siempre raleway */
  font-size: 14px;                     /* siempre 14px */
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
}

/* variantes de color */
.btn-outline--dark { color: #000; }
.btn-outline--dark:hover { background-color: #000; color: #fff; }

.btn-outline--beige { color: #B8A891; }
.btn-outline--beige:hover { background-color: #B8A891; color: #2e2320; }

.btn-outline--light-beige { color: #EBE7E4; }
.btn-outline--light-beige:hover { background-color: #EBE7E4; color: #2e2320; }

/* variantes de padding si lo necesitas (mantiene 14px) */
.btn-outline--sm { padding: 0.25rem 0.9rem; }
.btn-outline--lg { padding: 1rem 2.5rem; }


.text-deco {
  font-family: 'Bathsy', cursive;
  line-height: 1.25;
  color: #B8A891;
  pointer-events: none;
  transform: rotate(-5.2deg);
  transform-origin: left bottom;
  /* posicion y ancho los defines en la clase concreta */
}


/* base: SIEMPRE este color (pedido) */
.bg-block {
  position: absolute;
  background-color: #A2AA85;  /* color fijo del bloque verde */
  z-index: 1;
  /* width/height/posicion los pones en la clase de la seccion */
}


/* =========================
   CONTENEDOR GENERAL HERO
   ========================= */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem;
    overflow: hidden;
}

/* bloques de fondo */
.hero-bg {
    position: absolute;
    z-index: 1;
}
.hero-bg-left {
    top: 0;
    left: 0;
    width: 40%;
    max-width: 400px;
}
.hero-bg-right {
    bottom: 0;
    right: 0;
    width: 40%;
    max-width: 400px;
}
.hero-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* contenido centrado */
.hero-content-logo {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
}
.hero-content-logo img {
    width: 700px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    text-align: center;
    margin: auto;
}

/* titulo y textos (fuentes via helpers ff-*) */
.hero-title {
    font-size: 8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.hero-subtitle {
    /* font-family fuera, ahora ff-karla en el html */
    font-size: 30px;
    color: #3C302F;
    margin: 2.2rem 0;
    font-weight: 500;
}
.hero-intro {
    /* font-family y italic fuera, ahora ff-karla-italic */
    font-size: 23px;
    color: #3C302F;
    max-width: 450px;
    margin: auto;
    line-height: 27px;
}
.hero-body {
    /* font-family fuera, ahora ff-karla */
    font-size: 23px;
    color: #3C302F;
    max-width: 450px;
    margin: auto;
    line-height: 27px;
    font-weight: 200;
}


/* === MOVIL === */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .hero-bg-left { display: none; }
    .hero-bg-right {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        bottom: auto;
        right: auto;
        margin-bottom: 2rem;
        order: -1; /* primero en movil */
    }
    .hero-content { text-align: center; }
}

/* clase original para el texto de fondo de newsletter */
.background-text {
  position: absolute;
  top: 50px;
  right: 0;
  font-size: 12vw;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.1s ease-out;
  z-index: 0;
}

@media (max-width: 768px) {
  .background-text {
    font-size: 15vw;
    text-align: center;
    right: auto;
    left: 0;
  }
}


/* =========================
   NEWSLETTER
   ========================= */
.newsletter-section {
    position: relative;
    padding: 5rem 2rem 15rem;
    overflow: visible;
    margin-top: 75px;
}

/* titulo de fondo newsletter: estructura base la pone .bg-title */
.background-text {
    top: 50px;
    right: 0;
    font-size: 12vw;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.05);
    transition: transform 0.1s ease-out;
    z-index: 0;
    white-space: nowrap; /* opcional, ya lo pone el helper */
    pointer-events: none; /* idem */
}

.newsletter-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    z-index: 1;
    position: relative;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
}

.newsletter-left,
.newsletter-right {
    flex: 1 1 45%;
    min-width: 300px;
}

.image-wrapper {
    position: relative;
    overflow: visible;
}
.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* texto decorativo: propiedades comunes pasan a .text-deco */
.quote-text{
    position: absolute;
    left: 93px;
    bottom: -9rem;
    width: 140%;
    z-index: 2;
    font-size: clamp(2.8rem, 2.2vw, 2.4rem);
    text-align: center;
}

.newsletter-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.intro-text {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #333;
}
.subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.input-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.input-row input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #333;
    background: transparent;
    font-size: 1rem;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* boton newsletter: usa btn-outline; mantenemos solo layout local */
.btn-subscribe { align-self: flex-start; }

@media (max-width: 768px) {
    .newsletter-container { flex-direction: column; }
    .newsletter-section {
        padding: 5rem 2rem 5rem;
    }
    .quote-text{
        position: static;
        width: 100%;
        transform: none;          /* el helper no molesta aqui */
        margin-top: 1rem;
        text-align: center;
        font-size: clamp(2rem, 4.2vw, 1.5rem);
        padding: 0 .5rem;
    }
    .background-text {
        font-size: 15vw;
        text-align: center;
        right: auto;
        left: 0;
    }
}

/* =========================
   SECCION AYUDA
   ========================= */

/* tipografias: se quita bloque original, ahora via ff-* en html */

/* contenedor */
.ayuda-section {
    position: relative;
    background-color: #3C302F;
    padding: 180px 0;
    overflow: hidden;
}

/* titulo gigante de fondo (usa .bg-title) */
.background-title {
    top: 80px;
    font-size: 200px;
    font-weight: 700;
    color: rgba(184, 168, 145); 
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    margin-top: 50px;
    margin-bottom: 50px;
}


.background-title-2 {
    top: 80px;
    font-size: 200px;
    font-weight: 700;
    color: #3C302F; 
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* header */
.ayuda-header {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 1200px;
    margin: 300px auto 80px auto;
}
.ayuda-header h2 {
    font-size: 50px;
    margin-bottom: 25px;
    letter-spacing: 2px;
    color: #B8A891;
}
.ayuda-header p {
    font-size: 20px;
    line-height: 1.6;
    color: #B8A891;
    max-width: 600px;
}

/* contenedor principal */
.ayuda-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* columna izquierda con imagen */
.ayuda-left { flex: 1; position: relative; }
.ayuda-left .image-box {
  position: relative;
  display: block;
  width: 100%;
}
.ayuda-left .image-box img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.ayuda-left .color-block {
  position: absolute;
  bottom: -160px;
  left: -125px;
  width: 436px;
  height: 399px;
  /* color sale al helper .bg-block */
  z-index: 1;
}

/* columna derecha */
.ayuda-right { flex: 0.9; }

/* items */
.ayuda-item {
    position: relative;
    padding-left: 56px;
    margin-bottom: 50px;
}
.ayuda-item .numero {
    position: absolute;
    left: 0;
    font-size: 30px;
    font-weight: 700;
    color: #B8A891;
    line-height: 1;
    letter-spacing: 0.04em;
}
.ayuda-item h3 {
    font-size: 45px;
    margin: 0 0 12px 0;
    color: #B8A891;
}
.ayuda-item p {
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    color: #B8A891;
}

/* boton ecosistema: estilos pasan a helpers; mantenemos margen local */
.btn-ecosistema { margin-left: 56px; }

/* footer */
.ayuda-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 100px auto 0 auto;
  overflow: visible;
}
.footer-background-text {
  position: relative;
  left: -125px;
  text-align: left;
  font-size: 100px;
  font-weight: 300;
  color: #292020;
  line-height: 1.2;
  /* font-family fuera, ahora ff-gotu en el html */
}
.footer-image {
    position: absolute;
    width: 295px;
    height: 334px;
    left: 1025px;
    top: 141px;
}
.footer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
  .background-title {
    font-size: clamp(3rem, 20vw, 3rem);
    top: 40px;
    margin-top: 20px;
  }
  .background-title-2 {
    font-size: clamp(3rem, 20vw, 3rem);
    top: 40px;
    margin-top: 20px;
  }
  .ayuda-section {
    padding: 180px 0 80px;
  }
  .ayuda-header {
    margin: 0px auto 30px auto;
    padding: 0 20px;
    text-align: center;
  }
  .ayuda-header h2 { font-size: 28px; margin-bottom: 15px; }
  .ayuda-header p { font-size: 16px; line-height: 1.5; margin: 0 auto; }
  .ayuda-left .color-block { display: none; }
  .ayuda-container {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  .ayuda-left {
    order: 1;
    margin: 0 auto;
    max-width: 90%;
  }
  .ayuda-right { order: 2; }
  .ayuda-item { padding-left: 40px; margin-bottom: 30px; }
  .ayuda-item-npl { padding-left: 20px !important; }
  .ayuda-item .numero { font-size: 22px; }
  .ayuda-item h3 { font-size: 22px; }
  .ayuda-item p { font-size: 16px; }
  .btn-ecosistema {
    margin: 20px auto 0 auto;
    display: block;
    text-align: center;
  }
  .ayuda-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    padding: 0 20px;
    text-align: center;
  }
  .footer-background-text {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #292020;
  }
  .footer-image {
    width: 220px;
    height: 300px;
    margin: 0 auto;
  }
  .footer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
    .footer-background-text {
      left: -0px;
    }
}

/* =========================
   SECCION TESTIMONIOS
   ========================= */
.testimonios {
  position: relative;
  background-color: #EBE7E4;
  padding: 150px 20px;
  text-align: center;
  overflow: hidden;
}
.contenedor-testimonio {
  max-width: 800px;
  margin: 0 auto;
}
.icono-comillas { margin-bottom: 20px; }
.texto-testimonio {
  /* font-family fuera, ahora ff-karla */
  font-size: 25px;
  line-height: 1.6;
  color: #3c302f;
  margin: 20px 0;
}
.puntos { margin-top: 30px; }
.icono-decoracion {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  opacity: 0.7;
}
.testimonio-item { max-width: 800px; margin: 0 auto; }
.icono-comillas img { width: 125px; margin-bottom: 13px; }
.testimonio-item p {
  /* font-family fuera, ahora ff-karla */
  font-size: 27px;
  line-height: 1.6;
  color: #2e2320;
}
.navegacion { margin-top: 30px; }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #2e2320;
  border-radius: 50%;
  opacity: 0.4;
  cursor: pointer;
}
.dot.activo { opacity: 1; }
.decoracion { position: absolute; right: 30px; bottom: 20px; }
.decoracion img { width: 160px; opacity: 0.4; }

@media (max-width: 768px) {
  .testimonios { padding: 40px 20px; text-align: center; position: relative; }
  .icono-comillas { margin-bottom: 10px; }
  .icono-comillas img { width: 70px; height: auto; }
  .testimonios p {
    font-size: 20px;
    max-width: 90%;
    margin: 0 auto 15px auto;
    line-height: 1.4;
  }
  .icono-puntos svg { width: 40px; }
  .icono-decoracion { display: none; }
}

/* =========================
   SECCION QUIEN SOY
   ========================= */
.section-quien {
  position: relative;
  background-color: #BAC7D7;
  padding: 245px 0px;
  overflow: hidden;
}

/* titulo de fondo (usa .bg-title) */
.section-quien .titulo-fondo {
  top: 80px;
  font-size: 200px;
  font-weight: 700;
  color: #A9BACC;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  margin-top: 50px;
  margin-bottom: 50px;
}

/* contenedor principal */
.quien-contenido {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  max-width: 1200px;
  margin: 295px auto 0 auto; 
  z-index: 1;
}

/* imagen */
.quien-imagen { position: relative; flex: 1; }
.quien-imagen img {
  display: block;
  width: 100%;
  width: auto;
  position: relative;
  z-index: 2;
  margin-right: 8%;
}
/* bloque verde: color via .bg-block */
.quien-imagen .bloque-verde {
  position: absolute;
  bottom: -385px;
  left: -241px;
  width: 565px;
  height: 884px;
  z-index: 1;
}

/* texto */
.quien-texto {
  margin-top: 45px;
  flex: 0.8;
  font-size: 30px;
  line-height: 2;
  color: #3C302F;
}

/* bloque 2 (verdad expansiva) */
.verdad-expansiva {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0px auto 0 auto;
  position: relative;
  z-index: 1;
  margin-top: 300px;
}
.verdad-texto {
  flex: 1;
  /* font-family fuera, ahora ff-karla */
  font-size: 30px;
  line-height: 1.7;
  color: #333;
}
.verdad-texto strong { color: #000; }
/* boton interior: estilos pasan a helpers; dejamos solo separacion */
.verdad-texto .btn { margin-top: 80px; }

.verdad-imagen { flex: 0.8; position: relative; }
.verdad-imagen img {
  max-width: 121%;
  height: 858px;
  position: relative;
  z-index: 2;
  margin-left: 35px;
}
.verdad-imagen .bloque-verde {
  position: absolute;
  bottom: -148px;
  right: -235px;
  width: 493px;
  height: 635px;
  z-index: 1;
}

/* titulo intermedio */
.titulo-intermedio {
  text-align: center;
  font-size: 53px;
  margin-top: 130px;
  margin-bottom: -190px;
  /* font-family fuera, ahora ff-gotu */
  color: #3C302F;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section-quien { padding: 100px 0 80px 0; }
  .section-quien .titulo-fondo {
    font-size: clamp(3rem, 20vw, 3rem);
    top: 20px;
    transform: translateX(-50%);
  }
  .quien-contenido {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 83px auto 0 auto;
    padding: 0 20px;
  }
  .quien-imagen { width: 100%; display: flex; justify-content: center; }
  .quien-imagen img {
    width: 90%;
    height: auto;
    margin-left: 0;
  }
  .quien-imagen .bloque-verde { display: none; }
  .quien-texto {
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
    color: #3C302F;
    margin-top: 10px;
  }
  .quien-texto p { margin-bottom: 15px; }
  .titulo-intermedio {
    font-size: 28px;
    margin: 60px 0 40px 0;
    text-align: center;
    padding: 0 20px;
  }
  .verdad-expansiva {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 0;
    padding: 0 20px;
  }
  .verdad-imagen {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .verdad-imagen img {
    width: 90%;
    height: auto;
    max-width: none;
    margin-left: 0;
  }
  .verdad-imagen .bloque-verde { display: none; }
  .verdad-texto {
    order: 2;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
  }
  .verdad-texto .btn {
    display: inline-block;
    margin-top: 40px;
    font-size: 14px;
    padding: 10px 20px;
  }
}


/* ====== EXTRA: variante de boton gris para igualar #333 ====== */
.btn-outline--gray { color: #333; }
.btn-outline--gray:hover { background-color: #333; color: #fff; }


/* ====== SECCION PODCAST ====== */
.section-podcast {
  background-color: #3C302F;
  color: #B8A891;
  position: relative;
  padding: 120px 0 0 0;
  overflow: hidden;
}

.podcast-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.podcast-texto {
  flex: 1;
  font-family: 'Karla', sans-serif;
  font-size: 30px;
  line-height: 1.5;
}

.podcast-texto p {
  margin-bottom: 25px;
}

.podcast-descripcion{
	font-size:15px;
	margin-top:20px;
	margin-bottom:20px;
}
.podcast-nombre{
	font-size:20px;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:bold;
	line-height:30px;
}

.btn-podcast {
  display: inline-block;
  border: 1px solid #B8A891;
  color: #B8A891;
  padding: 10px 25px;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  font-family: 'Raleway', sans-serif; 
  transition: all 0.3s ease;
}

.btn-podcast:hover {
  background-color: #B8A891;
  color: #3C302F;
}

.podcast-imagen {
  flex: 1;
  position: relative;
  height: 520px;      /* alto visible del marco */
  z-index: 0 !important;
}

.podcast-imagen img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 238px;
  z-index: 0 !important;
}

.podcast-fondo-texto {
  position: relative;
  font-size: 150px;
  font-weight: 700;
  font-family: 'Gotu', sans-serif;
  color: #B8A891;
  pointer-events: none;
  z-index: 999 !important;
  word-spacing: 120px;
}

@media (max-width: 998px) {
    .section-podcast .container {
      margin-top: 160px !important; /* o el valor que necesites */
    }
}
@media (max-width: 768px) {
  .section-podcast {
    padding: 80px 0 100px 0;
    text-align: center;
  }

  .podcast-container {
    flex-direction: column; /* imagen debajo */
    align-items: center;
    gap: 40px;
    padding: 0 20px;
  }

  .podcast-texto {
    font-size: 18px;
    line-height: 1.6;
  }

  .podcast-texto p {
    margin-bottom: 20px;
  }

  .btn-podcast {
    margin-top: 10px;
    font-size: 13px;
    padding: 8px 20px;
  }

  .podcast-imagen {
    order: 2;
    height: auto;        /* sin marco fijo */
    overflow: visible;
    width: 100%;
  }

  .podcast-imagen img {
    position: static;    /* se comporta normal */
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .podcast-fondo-texto {
      font-size: 100px;
    }

    .section-podcast .container {
      margin-top: 40px !important; /* o el valor que necesites */
    }
}

/* ====== FOOTER ====== */
/* footer */
.footer-principal {
  background:#EDE9E3;
  color:#3C302F;
  font-family:'Karla',sans-serif;
}

/* grid 4 columnas */
.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1600px;
  margin: 0 auto;
}

/* separadores */
.footer-col {
  padding:40px 30px;
  border-bottom: 1px solid #707070;
}
.footer-col + .footer-col {
  border-left:1px solid #707070;
}

/* columna 1: logo */
.logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centra todo horizontalmente */
  justify-content: flex-start; /* evita que el alto desplace el eje */
  text-align: center;
}



.logo-col img {
  display: block;
  margin: 0 auto;           /* asegura centrado absoluto */
  max-width: 210px;         /* fija el tamaño máximo */
  height: auto;
}


/* redes sociales */
.social-footer {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EDE9E3; /* mismo fondo que el footer */
  color: #3C302F;
  font-size: 18px;
  transition: all 0.25s ease;
}

.social-btn:hover {
  background:#3C302F; 
  color:#fff;
}

/* listas */
.footer-links {
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links li { margin:10px 0; }
.footer-links a {
  text-decoration:none;
  color:#3C302F;
  font-size:15px;
  opacity:.85;
}
.footer-links a:hover { opacity:1; text-decoration:underline; }

/* newsletter */
.news-title {
  font-size:15px;
  font-weight:600;
  line-height:1.6;
  margin:0 0 18px 0;
  opacity:.85;
}
.form-newsletter {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.input-row {
  display:flex;
  gap:24px;
}
.input-row input {
  flex:1;
  background:transparent;
  border:none;
  border-bottom:1px solid #8f857c;
  padding:10px 2px 6px;
  font-family:inherit;
  font-size:14px;
  outline:none;
}
.check {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  opacity:.85;
}
.check input { flex-shrink:0; margin-top:2px; }
.check span {
  line-height:1.5;
  display:inline-block;
  max-width:360px;
}
.btn-enviar {
  align-self:flex-start;
  background:transparent;
  border:1px solid #3C302F;
  padding:1px 18px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}
.btn-enviar:hover {
  background:#3C302F;
  color:#fff;
}

/* ====== responsive ====== */
@media (max-width: 992px){
  .footer-container{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .news-col{ grid-column: 1 / -1; } /* newsletter ocupa fila completa */

  .marquee-container {
    display: none;
  }

  .podcast-texto {
    flex: 1;
    font-family: 'Karla', sans-serif;
    font-size: 25px;
    line-height: 1.5;
  }

  .section-podcast {
      padding: 120px 0 100px 10px !important;
  }
}

@media (max-width: 768px){
  .footer-container{
    grid-template-columns:1fr;
  }
  .footer-col{
    padding:28px 20px;
    border-left:none !important;
    border-top:1px solid #cfc7bd;
  }


  .footer-col:first-child{ border-top:none; }
  .logo-col{ align-items:center; text-align:center; }
  .input-row{ flex-direction:column; gap:14px; }
  .btn-enviar{ align-self:center; }
  .logo-col img {
    display: block;
    margin: 0 auto; 
  }

  .marquee-container {
    display: none;
  }
}

/* ===== CABECERA ===== */
.header-principal {
  width: 100%;
  background-color: #fff;
  padding: 20px 60px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

/*
.header-transparente {
    background: transparent !important;
}

.header-transparente .menu-principal {
    visibility: hidden;
}

.header-transparente .menu-toggle {
  display: flex; !important;
}
*/

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

/* LOGO */
.logo img {
  height: 60px;
  width: auto;
  display: block;
}

/* MENU */
.menu-principal ul {
  list-style: none;
  display: flex;
  gap: 60px;
  margin: 0;
  padding: 0;
}

.menu-principal a {
  position: relative;           /* necesario para el pseudo-elemento */
  text-decoration: none;
  color: #3C302F;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* línea animada */
.menu-principal > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;                 /* distancia del texto */
  width: 0%;
  height: 1px;
  background-color: #3C302F;    /* color del subrayado */
  transition: width 0.3s ease;  /* animación de extensión */
}

/* hover */
.menu-principal a:hover {
  color: #332929;
}

.menu-principal > ul > li > a:hover::after {
  width: 100%;                  /* subrayado aparece de izquierda a derecha */
}

/* ===== SUBMENU ===== */
.menu-principal li {
  position: relative; /* necesario para posicionar el submenu */
}

.menu-principal .submenu {
  display: block; /* controlado con opacity */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 300px;
  z-index: 1000;

  /* animación suave */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* ===== ENLACES DEL SUBMENU ===== */
.menu-principal .submenu li a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #3C302F;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.menu-principal .submenu li:hover {
  color: #fff; 
  background-color: #d5d5d5; 
  transition: all 0.3s ease;
}


/* mostrar el submenu al hacer hover en el padre */
.menu-principal li.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ===== MENU MOVIL ===== */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #3C302F;
  border-radius: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* submenu dentro del menu movil */
  .menu-principal .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    background: none;
    padding: 0;
    display: none; /* oculto al principio */
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* cuando se activa */
  .menu-principal .submenu.activo {
    display: flex;
  }


  .header-principal {
    padding: 20px 30px;
  }

  .menu-principal ul {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 80px;
    right: 0;
    background-color: #fff;
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid #ddd;
    display: none;
  }

  .menu-principal ul.activo {
    display: flex;
  }

  .menu-toggle {
    display: flex;
  }
  
}

/* ===== BOTON MENU EN PORTADA ===== */
.menu-portada-toggle {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 25px;
  cursor: pointer;
  z-index: 10000;
}

.menu-portada-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #3C302F;
  border-radius: 2px;
}

/* ===== mentoria hero ===== */

.mentoria-hero {
  background: #eee8e3;
  padding: 80px 0 0 0;
  position: relative;
  color: #2f2524;
  overflow: hidden;
}

/* layout: imagen + texto */
.mentoria-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 40px;
}

/* titulo */
.mentoria-titulo {
  position: absolute;
  top: -10px;
  left: 40px;
  z-index: 5;
  margin: 0;
  line-height: 1;
  font-weight: 400;
  color: #2f2524;
}
.mentoria-titulo span {
  display: block;
  font-size: clamp(48px, 9vw, 140px);
  letter-spacing: 2px;
}

/* imagen */
.mentoria-izq {
  position: relative;
  z-index: 1;
}
.mentoria-imgbox {
  position: relative;
  height: 600px;
  overflow: visible;
}
.mentoria-imgbox img {
  position: absolute;
  top: 105px;
  left: -91px;
  width: 100%;
  height: 500px;
  max-width: 680px;
  border-radius: 2px;
}

/* texto */
.mentoria-der {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 180px;
  margin-left: -127px;
}
.mentoria-der p {
  font-size: 32px;
  line-height: 1.3;
  color: #4a3f3d;
  max-width: 360px;
}

/* ===== PROGRAMAS ===== */
.mentoria-programas {
  max-width: 1100px;
  margin: 100px auto 100px;
  padding: 0 40px;
}

.servicio-item {
  margin-top: 25px;
  display: flex;
  align-items: flex-start;
  padding: 30px 0;
}

/* bloque que agrupa texto + flecha */
.bloque-texto {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.divisor {
  border: none;
  border-top: 2px solid #3c302f;
  opacity: 1;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
}

/* numero al inicio */
.numero {
  flex: 0 0 67px;
  font-size: 30px;
  opacity: 0.6;
  margin-right: 14px;
}

/* titulo principal */
.titulo-servicio {
  color: #332929;
  font-size: 60px;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}

/* flecha al lado derecho del texto */
.icono-flecha {
  width: 60px;
  height: auto;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

/* efecto hover */
.servicio-item:hover .icono-flecha {
  transform: translate(6px, -6px);
  opacity: 1;
}

/* ===== bloque escuela tranquiliad ===== */
.escuela-tranquilidad {
  background: #3C302F;
  color: #d8c2a8;
  padding: 90px 0 150px 0;
  position: relative;
  overflow: hidden;
}

/* contenedor centrado */
.escuela-contenedor {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* fila principal */
.item-tranquilidad {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 25px 0;
  text-align: right;
}

/* bloque izquierdo (flecha + texto) */
.lado-izq {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* flecha antes del texto */
.icono-tranquilidad {
  width: 60px;
  height: auto;
  opacity: 0.8;
  transition: transform 0.3s ease;
}
.item-tranquilidad:hover .icono-tranquilidad {
  transform: translate(6px, -6px);
  opacity: 1;
}

/* texto */
.titulo-tranquilidad {
  font-size: 62px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  color: #d8c2a8;
  text-align: left;
  max-width: 572px;
}

/* numero: alineado al borde derecho total */
.numero-tranquilidad {
  flex: 0 0 67px;
  font-size: 30px;
  opacity: 0.6;
  text-align: right;
  transform: translateY(-10px);
}

/* hr ancho completo */
.linea-tranquilidad {
  border: none;
  border-top: 1px solid #d8c2a8;
  opacity: 1;
  margin: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* contenedor relativo */
.bloque-intro-tranquilidad {
  position: relative;
  margin-top: 80px;
  padding: 417px 0 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* bloque de texto */
.texto-intro { position: relative; z-index: 2; }

/* titulo grande */
.titulo-intro {
  font-size: 170px;
  line-height: 1.1;
  font-weight: 400;
  color: #B8A891;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  max-width: 1350px;
  white-space: normal;
  word-wrap: break-word;
}

/* bloque de imagen (fuera del flujo normal) */
.imagen-intro {
  position: absolute;
  top: 40px;
  right: -40px;
  transform: translateY(-50%);
  z-index: 1;
}

/* imagen */
.imagen-intro img {
  width: 1150px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  opacity: 0.9;
}

/* ===== bloque formacion ===== */
.escuela-formacion {
  background-color: #B8A891;
  color: #3C302F;
  padding: 100px 0 115px 0;
}

/* contenedor centrado */
.contenedor-formacion {
  max-width: 995px;
  margin: 0 auto;
  padding: 0 40px;
}

/* cada fila */
.fila-formacion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 35px 0;
  position: relative;
}

/* numero */
.numero-formacion {
  flex: 0 0 60px;
  font-size: 22px;
  font-weight: 400;
  opacity: 0.6;
}

/* titulo */
.titulo-formacion {
  flex: 1;
  font-size: 42px;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  color: #3b2c2a;
  max-width: 700px;
  white-space: normal;
  word-wrap: break-word;
}

/* flecha a la derecha */
.flecha-formacion {
  flex: 0 0 50px;
  width: 40px;
  height: auto;
  opacity: 0.8;
  transform: rotate(-45deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.fila-formacion:hover .flecha-formacion {
  transform: rotate(-45deg) translate(6px, -6px);
  opacity: 1;
}

/* linea divisoria */
.linea-formacion {
  border: none;
  border-top: 1px solid #3b2c2a;
  margin: 0;
  opacity: 0.4;
}

/* contenedor relativo para poder superponer */
.hero-formacion{
  position: relative;
  max-width: 980px;
  margin: 120px auto 0;
  padding: 40px 0;
}

/* imagen centrada y responsiva */
.hero-formacion__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* titulo por delante de la imagen */
.hero-formacion__title{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  font-weight: 400;
  color: #3C302F;
  line-height: .9;
  letter-spacing: 2px;
  text-align: center;
  font-size: 200px;
  pointer-events: none;
}

/* ===== section jovenes emprendedores ===== */
.escuela-jovenes{
  background: #C9D5E3;
  color: #3C302F;
  padding: 200px 0 160px;
  position: relative;
  overflow: hidden;
}

.contenedor-jovenes{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* titulo enorme */
.titulo-jovenes{
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 2px;
  margin: 0 0 36px 0;
  color: #3C302F;
  font-size: clamp(30px, 9vw, 140px);
  text-transform: uppercase;
}

/* texto */
.texto-jovenes{
  max-width: 625px;
  margin: 0 0 32px 0;
  line-height: 1.35;
  font-size: clamp(18px, 3.2vw, 40px);
  color: rgba(60,48,47,0.9);
}

/* boton: ahora usa btn-outline (Raleway 14) y solo dejamos color/border/hover/spacing */
.btn-jovenes{
  display: inline-block;
  letter-spacing: 1.2px;
  padding: 14px 32px;
  border: 1px solid rgba(60,48,47,0.35);
  color: #3C302F;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-jovenes:hover{
  background: rgba(60,48,47,0.06);
  border-color: rgba(60,48,47,0.6);
  transform: translateY(-2px);
}

/* hook para tu svg de la esquina (opcional) */
.icono-esquina {
  position: absolute;
  right: -25px;
  bottom: -16px;
  width: 332px;
  height: auto;
  opacity: 0.7;
}

/* ====== FIXES GENERALES MOVIL/TABLET ====== */

@media (max-width: 768px) {
  .linea-tranquilidad,
  .divisor {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ====== MENTORIA HERO ====== */
@media (max-width: 1200px) {
  .mentoria-imgbox { height: 520px; }
  .mentoria-imgbox img { top: 60px; left: -40px; height: 460px; max-width: 560px; }
  .mentoria-der p { font-size: 28px; }
}

@media (max-width: 992px) {
  .mentoria-contenedor { grid-template-columns: 1fr; gap: 24px; padding: 0 28px; }
  .mentoria-titulo { position: static; margin: 0; }
  .mentoria-titulo span { font-size: clamp(40px, 12vw, 90px); }
  .mentoria-izq, .mentoria-der { z-index: 1; }
  .mentoria-imgbox { height: auto; }
  .mentoria-imgbox img { position: static; width: 100%; height: auto; max-width: none; }
  .mentoria-der { padding-top: 0; margin-left: 0; }
  .mentoria-der p { max-width: 100%; font-size: 22px; }
}

@media (max-width: 576px) {
  .mentoria-hero { padding-top: 56px; }
  .mentoria-titulo span { letter-spacing: 1px; }
  .mentoria-der p { font-size: 19px; line-height: 1.4; }
}

/* ====== PROGRAMAS (servicio-item) ====== */
@media (max-width: 992px) {
  .servicio-item { gap: 10px; padding: 22px 0; }
  .numero { flex: 0 0 44px; font-size: 22px; }
  .titulo-servicio { font-size: clamp(24px, 5.2vw, 40px); }
  .icono-flecha { width: 44px; }
}
@media (max-width: 576px) {
  .bloque-texto { gap: 14px; }
  .titulo-servicio { line-height: 1.15; }
}

/* ====== ESCUELA TRANQUILIDAD ====== */
@media (max-width: 1200px) {
  .escuela-tranquilidad { padding: 80px 0 520px 0; }
  .titulo-tranquilidad { font-size: 48px; max-width: 560px; }
  .icono-tranquilidad { width: 48px; }
  .numero-tranquilidad { flex-basis: 56px; font-size: 24px; }
  .titulo-intro { font-size: clamp(64px, 10vw, 140px); max-width: 1000px; }
  .imagen-intro img { width: 900px; }
  .imagen-intro { right: -20px; top: 104%; }
}

@media (max-width: 992px) {
  .escuela-tranquilidad { padding: 72px 0 360px 0; }
  .item-tranquilidad { justify-content: space-between; text-align: left; }
  .lado-izq { gap: 16px; }
  .titulo-tranquilidad { font-size: 40px; max-width: 480px; }
  .numero-tranquilidad { transform: none; }
  .bloque-intro-tranquilidad { padding: 0 0 0; display: block; }
  .titulo-intro { font-size: clamp(37px, 9vw, 110px); max-width: none; }
  .imagen-intro { position: static; transform: none; margin-top: 24px; }
  .imagen-intro img { width: 100%; max-width: none; }
}

@media (max-width: 576px) {
  .escuela-tranquilidad { padding: 22px 0 96px 0; }
  .titulo-tranquilidad { font-size: 30px; max-width: 100%; }
  .icono-tranquilidad { width: 40px; }
  .numero-tranquilidad { flex-basis: 44px; font-size: 20px; }
  .titulo-intro { letter-spacing: 1px; }
}

/* ====== ESCUELA FORMACION ====== */
@media (max-width: 992px) {
  .escuela-formacion { padding: 7px 0 30px; }
  .contenedor-formacion { padding: 0 28px; }
  .fila-formacion { flex-direction: column; gap: 8px; padding: 26px 0; }
  .numero-formacion { font-size: 18px; flex: none; }
  .titulo-formacion { font-size: clamp(22px, 4.6vw, 32px); max-width: 100%; }
  .flecha-formacion { align-self: flex-end; width: 32px; }
}

/* ====== HERO FORMACION ====== */
@media (max-width: 1200px) {
  .hero-formacion { max-width: 860px; margin-top: 90px; }
  .hero-formacion__title { font-size: clamp(42px, 15vw, 200px); }
}
@media (max-width: 768px) {
  .hero-formacion { max-width: 92%; margin-top: 30px; }
  .hero-formacion__title { font-size: clamp(42px, 16vw, 120px); line-height: .95; }
}
@media (max-width: 480px) {
  .hero-formacion__title { font-size: clamp(36px, 17vw, 96px); letter-spacing: 1px; }
}

/* ====== ESCUELA JOVENES ====== */
@media (max-width: 992px){
  .escuela-jovenes{ padding: 120px 0 120px; }
  .contenedor-jovenes{ padding: 0 28px; }
  .texto-jovenes{ max-width: 100%; }
}
@media (max-width: 576px){
  .escuela-jovenes{ padding: 80px 0 100px; }
  .btn-jovenes{ padding: 12px 20px; }
}

/* ====== HERRAMIENTAS SUAVES ====== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ================== UNIFICAR FILAS ================== */
.titulo-servicio,
.titulo-tranquilidad{
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.12;
  font-weight: 400;
  width: 100%;
}

.numero,
.numero-tranquilidad{
  flex: 0 0 56px;
  font-size: clamp(18px, 2.2vw, 24px);
  opacity: .6;
  text-align: right;
  transform: none;
}

.icono-flecha,
.icono-tranquilidad{
  width: 48px;
  height: auto;
  opacity: .8;
  transition: transform .3s ease, opacity .3s ease;
}

@media (max-width: 768px){
  .numero, .numero-tranquilidad{ flex-basis: 44px; }
  .icono-flecha, .icono-tranquilidad{ width: 38px; }
}

/* ================== HERO FORMACION (texto sobre la imagen) ================== */
.hero-formacion__title{
  font-size: clamp(42px, 15vw, 170px);
  line-height: .92;
  letter-spacing: 1.5px;
}

/* ================== ICONO ESQUINA (aun mas pequeño) ================== */
.icono-esquina{
  width: 388px;
  right: -10px;
  bottom: -10px;
  opacity: .7;
}
@media (max-width: 992px){
  .icono-esquina{ width: 200px; right: 10px; bottom: 0; }
}
@media (max-width: 768px){
  .icono-esquina{ width: 150px; right: 12px; bottom: 6px; }
}


/* ===== programa grupal  ===== */
.programa-grupal {
  padding: 0;
}

/*
.contenedor-programa,
.cabecera-programa,
.col-img {
  overflow: visible; 
}
*/


.cabecera-programa{
  position: relative;       /* referencia para la img absoluta */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

/* texto más grande que la imagen */
.col-texto {
  max-width: 900px;
  position: relative;
  z-index: 2;
  margin-right: -135px;
}

.col-img{
  flex: 1;
  position: relative;
}

/* imagen en posición absoluta */
.col-img img {
  position: absolute;
  top: -151px;
  right: -15px;
  width: 650px;
  height: auto;
  object-fit: cover;
  z-index: 1;
  border-radius: 2px;
  opacity: 0.95;
  max-width: none;
}

/* espacio fantasma para compensar la imagen */
.cabecera-programa::after{
  content: '';
  flex: 0 0 120px;
}

/* pretexto + título (tipografía via ff-gotu en HTML) */
.pretexto-programa {
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 24px;
  color: #3C302F;
  max-width: 720px;
}

.titulo-programa{
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: 1.5px;
  margin: 0;
  color: #3C302F;
  text-transform: uppercase;
}

/* separador fino (si lo usas) */
.linea-programa{
  border: none;
  border-top: 1px solid rgba(60,48,47,.25);
  margin: 50px 0;
}

/* frases centradas (tipografía via ff-gotu en HTML) */
.frases-programa{
  text-align: center;
  max-width: 1400px;
  margin: 100px auto 60px;
}
.frases-programa p{
  font-size: 27px;        /* px exacto */
  line-height: 1.35;
  margin: 48px;
  color: #3C302F;
}

/* escritorio / grande: offsets decorativos */
.frases-programa p:nth-child(1) { margin-right: 440px  !important; }
.frases-programa p:nth-child(3) { margin-right: 564px !important; }
.frases-programa p:nth-child(5) { margin-right: 304px !important; }
.frases-programa p:nth-child(6) { margin-left: 551px; }

@media (max-width: 768px) {
    .frases-programa p {
        margin: 10px 0;
        padding: 10px;
    }
    .frases-programa p:nth-child(1) { margin-right: 0  !important; }
    .frases-programa p:nth-child(3) { margin-right: 0 !important; }
    .frases-programa p:nth-child(5) { margin-right: 0 !important; }
    .frases-programa p:nth-child(6) { margin-left: 0; }
}

/* bloque final: titulo grande + boton */
.cta-programa{
  text-align: center;
}

@media (max-width: 768px) {
    .cta-programa { padding: 25px; }
}

.titulo-reflejada{
  font-weight: 400;
  font-size: 80px;         /* px exacto */
  line-height: 1.1;
  margin: 121px 0 28px 0;
  color: #3C302F;          /* color de títulos */
}

/* botón (estética propia) + helper btn-outline para Raleway 14 */
.btn-programa {
  display: inline-block;
  letter-spacing: 1.2px;
  padding: 4px 35px;
  border: 1px solid #3C302F;
  color: #3C302F;
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  margin-top: 33px;
}
.btn-programa:hover{
  background: rgba(60,48,47,.06);
  border-color: rgba(60,48,47,.65);
  transform: translateY(-2px);
}

/* margen “bastante” arriba para separar este bloque dentro de la sección */
.programa-mentora{
  margin-top: 120px;              /* ajusta si necesitas más/menos */
  padding-left: 40px;             /* coherente con tu layout */
  padding-right: 40px;
}

/* texto centrado; en desktop se coloca a la derecha de su columna */
.programa-mentora__text{
  line-height: 1.3;
  text-align: end;
  max-width: 520px;               /* evita líneas demasiado largas */
  margin: 0 auto;                 /* centrado en móvil/tablet */
}

/* en ≥lg: pegamos el bloque de texto a la DERECHA de su columna */
@media (min-width: 992px){
  .programa-mentora__text{
    margin-right: 0;
    margin-left: auto;            /* empuja el bloque a la derecha */
  }
}

/* imagen responsive (opcional el radio) */
.programa-mentora img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* === Section PROGRAMA DIFERENTE === */
.prog-diff{
  background:#3C302F;      /* marrón oscuro de tu paleta */
  color:#EDE7E3;           /* texto claro */
  padding: 100px 0 80px;
}

/* Limitar y centrar el contenido en pantallas muy anchas */
.prog-diff__container{
  max-width: 1325px;   
}

/* separa el bloque del anterior */
.prog-diff-head{
  margin-top: 72px;          
  max-width: 1200px;       
}

/* título grande */
.prog-diff-head__title{
  line-height: 0.95;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

/* párrafo intro (Karla 30) */
.prog-diff-head__intro{
  line-height: 1.5;
  opacity: 0.95;  
  margin: 72px 0 125px 0;             
}

.prog-diff-head__intro strong{
  font-weight: 700;           /* respeta negritas */
}

/* hace que la fila ocupe el 100% del ancho real y centra el texto */
.prog-diff-head__kicker-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* el texto no hace salto y se ajusta al ancho máximo disponible */
.prog-diff-head__kicker {
  white-space: nowrap;           /* evita el salto de línea */
  font-size: 62px;
  text-align: center;
  line-height: 1.1;
  max-width: 100vw;              /* usa todo el ancho de la ventana */
}

/* kicker centrado */
.prog-diff-head__kicker{
  line-height: 1.1;
  letter-spacing: 1px;
}

/* opcional: un pelín más ancho en desktops muy grandes */
@media (min-width: 1400px){
  .prog-diff-head{ max-width: 1280px; }
}

@media (max-width: 768px) {
  .prog-diff-head__kicker { white-space: normal !important; }    
}

/* separacion general del bloque dentro de la sección */
.prog-diff-block1{
  margin-top: 140px;
  margin-bottom: 16px;
  max-width: 1200px;         /* que no se abra infinito en muy anchas */
}

/* Título: Gotu 45 */
.prog-diff-block1__title{
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: .5px;
}

/* HR beige */
.prog-diff-block1__hr{
  border: 0;
  border-top: 1px solid #B8A891;  /* beige */
  opacity: 1;
  margin: 10px 0 18px;
}


/* Quotes con un pelín de respiro vertical */
.prog-diff-block1__quote{
  line-height: 1.45;
}

.prog-p1 {
  margin-bottom: 65px;
}

.prog-p2 {
  margin-bottom: 75px;
  margin-top: 50px;
}

/* ajustar límites en pantallas muy anchas */
@media (min-width: 1400px){
  .prog-diff-block1{ max-width: 1280px; }
}

/* Contenedor centrado y con aire */
.prog-diff-cta{
  max-width: 1200px;
  margin: 120px auto 100px;
  padding-left: 40px;
  padding-right: 40px;
}

/* Intro: Karla 30 */
.prog-diff-cta__intro{
  line-height: 1.5;
  margin-bottom: 50px;
  opacity: .95;
}

/* Headline: Gotu 65 exacto, centrado y con buen leading */
.prog-diff-cta__headline{
  font-size: 65px;          
  line-height: 1.18;
  letter-spacing: 1px;
  margin: 18px 0 65px;
  max-width: 1300px;        /* evita líneas excesivamente largas */
}

/* Botón centrado (usa btn-outline para tipografía/estética) */
.prog-diff-cta__btn{
  display: inline-block;
  margin-top: 10px;
}

/* Responsive: baja tamaños para no romper en móvil */
@media (max-width: 992px){
  .prog-diff-cta{ margin: 80px auto 70px; }
  .prog-diff-cta__headline{
    font-size: clamp(28px, 6.5vw, 44px);
    line-height: 1.22;
    max-width: 100%;
  }
  .prog-diff-cta__intro{ margin-bottom: 28px; }
}


.list-underline {
    list-style: none;  
    margin: 0;
    padding: 0;        
}

.list-underline li {
    border-bottom: 2px solid #3C302F;
    color: #3C302F;
    padding: 1.6rem 0;
}


.list-underline-light {
    list-style: none;  
    margin: 0;
    padding: 0;        
}

.list-underline-light li {
    border-bottom: 2px solid #EBE7E4;
    color: #EBE7E4;
    padding: 1.6rem 0;
}

.border-color-beige {
    border-color: #B9A891 !important;
}



/* === FIGURE CON BLOQUE TRASERO === */
.figure-with-block{
    position: relative;
    display: inline-block;      /* el ancho es el de la imagen */
    overflow: visible;          /* permite sobresalir */
}

/* imagen por encima */
.figure-with-block > img{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* bloque trasero */
.figure-with-block > .figure-block{
    position: absolute;
    z-index: 1;                 /* por detrás de la imagen */
    left: 0;
    bottom: 0;
    background: var(--block-bg, #b9c59a);

    /* Tamaño del bloque (por defecto % del ancho de la imagen) */
    width:  var(--block-w, 60%);
    height: var(--block-h, 28%);

    /* Sobresalir hacia fuera (relativo al propio bloque) */
    transform: translate(
        calc(-1 * var(--out-x, 10%)),   /* sobresale a la IZQUIERDA */
        var(--out-y, 20%)               /* sobresale por ABAJO */
    );

    /* opcional: curva/sombra */
    /* border-radius: 4px; */
    /* box-shadow: 0 10px 24px rgba(0,0,0,.08); */
}

/* Si algún padre usa overflow:hidden te lo cortará.
   Evítalo en el contenedor inmediato de la figura. */


.titulo-fondo-lograr {
    margin-top: -150px;
    color: white;
    opacity: 0.15;
    z-index: 9;
}

.section-programa-inversion {
  background-color: #A2AA85;
  color: #3C302F;
  padding: 120px 0;
}

/* contenedor relativo para poder superponer */
.hero-programa-inversion{
  position: relative;
  max-width: 980px;
  margin: auto;
}

/* imagen centrada y responsiva */
.hero-programa-inversion__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* titulo por delante de la imagen */
.hero-programa-inversion__title{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  font-weight: 400;
  color: #3C302F;
  line-height: .9;
  letter-spacing: 2px;
  text-align: center;
  font-size: 200px;
  pointer-events: none;
}

.section-programa-opiniones {
    background-image: url(../images/pages/programa/bg-opiniones.webp);
    background-position: center center;
    padding: 100px 0;
}

.section-programa-opiniones h2 {
    margin: 0 0 -100px 50px;
    max-width: 70%;
}

.container-programa-opiniones{
    background: transparent;
    padding: 100px 75px;
    margin: auto;
    width: 80%;
}

.container-programa-opiniones p {
    font-family: 'Karla', sans-serif;
    font-size: 20px;
    font-style: italic;
    margin: 30px 0;
}

@media (max-width: 768px) {
    .container-programa-opiniones{
        background: transparent;
        padding: 100px 25px;
        margin: auto;
        width: 80%;
    }
}



/* ===== section ceo empezo ===== */
.section-ceo-empezo{
  background: #3C302F;
  color: #B8A891;
  padding: 120px 0 160px;
  position: relative;
  overflow: hidden;
}

.contenedor-ceo-empezo{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* titulo enorme */
.titulo-ceo-empezo{
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 2px;
  margin: 0 0 36px 0;
  color: #3C302F;
  font-size: clamp(30px, 9vw, 140px);
  text-transform: uppercase;
}

/* texto */
.texto-ceo-empezo{
  max-width: 625px;
  margin: 0 0 32px 0;
  line-height: 1.35;
  font-size: clamp(18px, 3.2vw, 100px);
  color: #B8A891;
}

/* boton: ahora usa btn-outline (Raleway 14) y solo dejamos color/border/hover/spacing */
.btn-ceo-empezo{
  display: inline-block;
  letter-spacing: 1.2px;
  padding: 14px 32px;
  border: 1px solid rgba(60,48,47,0.35);
  color: #3C302F;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-ceo-empezo:hover{
  background: rgba(60,48,47,0.06);
  border-color: rgba(60,48,47,0.6);
  transform: translateY(-2px);
}

/* hook para tu svg de la esquina (opcional) */
.icono-esquina {
  position: absolute;
  right: -25px;
  bottom: -16px;
  width: 332px;
  height: auto;
  opacity: 0.7;
}

.section-gracias-pasado-img {
    margin-bottom: -100px;
}

@media (max-width: 768px) {

    .section-gracias-pasado-img {
        margin-bottom: 50px;
    }

}


/* =========================
   CEO-PASO-JUNTAS
   ========================= */
.ceo-juntas-section {
    position: relative;
    padding: 5rem 2rem 15rem;
    overflow: visible;
    margin-top: 75px;
}

.ceo-juntas-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    z-index: 1;
    position: relative;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: auto;
}

.ceo-juntas-left {
    flex: 1 1 57%;
}

.ceo-juntas-right {
    flex: 1 1 40%;
}

.ceo-juntas-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.quote-text-2{
    position: absolute;
    left: 463px;
    bottom: -9rem;
    width: 90%;
    z-index: 2;
    font-size: clamp(3.2rem, 2.2vw, 4.4rem);
    text-align: center;
}


@media (max-width: 768px) {

    .quote-text-2{
        position: static;
        width: 100%;
        transform: none;          /* el helper no molesta aqui */
        margin-top: 1rem;
        text-align: center;
        font-size: clamp(2rem, 4.2vw, 1.5rem);
        padding: 0 .5rem;
    }
}


/* ===== section ceo mision ===== */
.section-ceo-mision{
  background: #EBE7E4;
  color: #B8A891;
  padding: 0px 0 160px;
  position: relative;
  overflow: hidden;
}

.contenedor-ceo-mision{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}


/* Mata cualquier desbordamiento accidental en móvil */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    /* 1) Imagen del footer: que deje de ser absoluta en móvil */
    .footer-image {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important; /* centrada */
    }

    /* 2) Títulos gigantes absolutos: que no provoquen overflow */
    .bg-title,
    .background-text,
    .titulo-fondo,
    .titulo-fondo-lograr {
        max-width: 100vw;
        overflow: clip;              /* o hidden si prefieres */
        left: 50%;
        transform: translateX(-50%);
        white-space: normal;         /* evita una línea interminable */
    }

    /* 3) Evitar que el bloque tras la imagen se salga por la izquierda */
    .figure-with-block {
        --out-x: 0% !important;
        /* si quieres también evitar que baje: */
        /* --out-y: 0% !important; */
    }

    /* 4) Por si algún full-bleed quedó en 100vw, fuerzo a contenedor */
    .divisor,
    .linea-tranquilidad {
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 5) Cualquier quote desplazada que aún sobresalga */
    .quote-text,
    .quote-text-2 {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
    }

    /* 6) Titulares/CTA muy anchos que llevas con márgenes fijos */
    .section-programa-opiniones h2 {
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =========================
   SECCION PODCAST
   ========================= */

/* tipografias: se quita bloque original, ahora via ff-* en html */

/* contenedor */
.section-podcast-2 {
    position: relative;
    background-color: #EBE7E4;
    padding: 400px 0 100px;
    overflow: hidden;
    border-bottom: 1px solid #707070;
}

@media (max-width: 768px) {
    .section-podcast-2 {
        padding: 140px 0;
    }
}



/* Layout general */
.intensivo-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;   /* izquierda/derecha */
    grid-template-rows: auto auto;    /* fila 1: copy, fila 2: bloque inferior */
    align-items: stretch;
}

/* Imagen ocupa las dos filas en la columna izquierda */
.int-img {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.int-img img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Texto superior (columna derecha, fila 1) */
.int-copy {
    grid-column: 2;
    grid-row: 1;
}

/* Bloque inferior completo (título grande + botón + nota) */
.int-bottom {
    grid-column: 2;
    grid-row: 2;
    align-self: end;                   /* pegado al fondo de su fila */
    padding-top: 0.5rem;
}

/* Desplazamiento sincronizado del bloque inferior (muerde la imagen) */
.int-bottom {
    --big-shift: -12%;                 /* ajusta aquí la “mordida” */
}
.int-bottom .big-align {
    transform: translateX(var(--big-shift));
}

/* Título grande (cada línea en bloque) */
.int-big {
    line-height: 1.05;
    letter-spacing: .02em;
    font-family: 'Gotu', sans-serif;
    color: #EBE7E4;
}
.int-big span {
    display: block;
    font-weight: 300;
    /* el tamaño lo controlas vía .resp-fs + variables inline */
}

/* Responsivo: apilar y anular la “mordida” en móvil */
@media (max-width: 767.98px) {
    .intensivo-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; /* img, copy, bottom */
    }
    .int-img     { grid-column: 1; grid-row: 1; }
    .int-copy    { grid-column: 1; grid-row: 2; }
    .int-bottom  { grid-column: 1; grid-row: 3; }
    .int-bottom  { --big-shift: 0 !important; }          /* no sobresalga */
}


.section-programa-intensivo-planificacion {
  background-color: #3C302F;
  color: #EBE7E4;
  padding: 120px 0;
}

/* contenedor relativo para poder superponer */
.hero-programa-intensivo-planificacion{
  position: relative;
  max-width: 980px;
  margin: auto;
}

/* imagen centrada y responsiva */
.hero-programa-intensivo-planificacion__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* titulo por delante de la imagen */
.hero-programa-intensivo-planificacion__title{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  font-weight: 400;
  color: #EBE7E4;
  line-height: .9;
  letter-spacing: 2px;
  text-align: center;
  font-size: 170px;
  pointer-events: none;
}

.section-intensivo-planificacion-reservar {
    background-image: url(../images/pages/programa/bg-opiniones.webp);
    background-position: top center;
}

.bg-image-arena {
    background-image: url(../../assets/images/pages/intensivo-planificacion/intensivo-planificacion-8.webp);
    background-repeat: no-repeat;
    background-position: top right;
}

@media (max-width: 768px) {
    .bg-image-arena {
        background-image: none;
    }
}

.section-consultoria-importante {
    background-image: url(../../assets/images/pages/intensivo-planificacion/intensivo-planificacion-8.webp);
    background-repeat: no-repeat;
    background-position: top right;
    padding: 250px 0 150px;
}

.section-consultoria-importante h3 {
    margin-bottom: 150px;
    font-size: 160px;
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .section-consultoria-importante {
    }

    .section-consultoria-importante h3 {
        font-size: 80px;
    }
}

@media (max-width: 768px) {
    .section-consultoria-importante {
        background-image: none;
        padding: 90px 0 90px;
    }

    .section-consultoria-importante h3 {
        font-size: 40px;
        margin-bottom: 45px;
    }
}



/* ====== Layout base (mobile-first) ====== */
.section-hero-cursos {
    --gap: clamp(16px, 2vw, 32px);
    --hang: clamp(0px, 4vw, 40px); /* “colgado” del titular hacia la izq. */
}

.section-hero-cursos .hero-grid {
    display: grid;
    gap: var(--gap);
    /* Mobile: 1 columna */
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
}

/* Imágenes */
.section-hero-cursos .hero-img {
    margin: 0;
    overflow: hidden;
}

.section-hero-cursos .hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;            /* controla alto en desktop; en móvil se adapta */
    object-fit: cover;
}

/* Título superpuesto (mobile: debajo de la imagen central) */
.section-hero-cursos-hero-title {
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Copy pequeño (mobile: debajo del título) */
.section-hero-cursos-hero-copy {
    max-width: 40ch;
    color: #3b3533;
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.25rem);
}

/* ====== Tablet/Desktop ====== */
@media (min-width: 992px) {
    .section-hero-cursos .hero-grid {
        /* 12 columnas */
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: auto;
    }

    /* Imagen izquierda: columnas 1-4, más alta */
    .section-hero-cursos .hero-img--left {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }
    .section-hero-cursos .hero-img--left img {
        height: 560px; /* más alta que la central para el efecto escalonado */
    }

    /* Imagen central: columnas 4-8 */
    .section-hero-cursos .hero-img--center {
        grid-column: 4 / 7;
        grid-row: 1 / 3;
        align-self: end;
    }
    .section-hero-cursos .hero-img--center img {
        height: 420px;
    }

    /* Titular grande: columnas 7-12, superpuesto sobre la imagen central */
    .section-hero-cursos-hero-title {
        grid-column: 7 / 13;
        grid-row: 1 / 2;
        z-index: 2;                    /* por encima de la imagen */
        transform: translateY(-6%);    /* leve superposición vertical */
        margin-left: calc(var(--hang) * -1);
    }

    /* Copy pequeño: última columna derecha */
    .section-hero-cursos-hero-copy {
        grid-column: 8 / 12;
        grid-row: 2 / 3;
        align-self: start;
    }
}

/* ====== Comportamiento móvil específico ====== */
@media (max-width: 991.98px) {
    /* Oculta imagen izquierda en móvil/tablet */
    .section-hero-cursos .hero-img--left {
        display: none;
    }

    /* Orden: imagen center → título → copy */
    .section-hero-cursos .hero-img--center { order: 1; }
    .section-hero-cursos-hero-title      { order: 2; }
    .section-hero-cursos-hero-copy       { order: 3; }

    /* Ajustes de espaciado para mobile */
    .section-hero-cursos .hero-title {
        margin-top: 0.25rem;
    }
    .section-hero-cursos-hero-copy {
        margin-top: 0.25rem;
    }
}


.link-hero-flecha {
    display: inline-flex;               /* contenido ocupa lo que necesita */
    align-items: center;                /* centra verticalmente texto/flecha */
    gap: 0.75rem;                       /* espacio entre texto y flecha */
    padding-block: .5rem;               /* aire vertical */
}

.icono-flecha-100 {
    width: 100px;
}

.icono-flecha-xs-50 {
    width: 50px !important;
}

/* plitica privacidad */
.politica-privacidad {
    background: #EBE7E4;
    color: #3C302F;
    padding: 80px 20px;
}

.contenedor-politica {
    max-width: 900px;
    margin: 0 auto;
}

.politica-privacidad h1,
.politica-privacidad h2 {
    font-family: 'Gotu', sans-serif;
    color: #3C302F;
    margin-bottom: 20px;
}

.politica-privacidad h1 {
    font-size: 42px;
    text-align: center;
    margin-bottom: 50px;
}

.politica-privacidad h2 {
    font-size: 28px;
    margin-top: 50px;
}

.politica-privacidad p,
.politica-privacidad li {
    font-family: 'Karla', sans-serif;
    color: #3C302F;
    font-size: 19px;
    line-height: 1.9;
    margin-bottom: 22px;
}

.politica-privacidad ul {
    padding-left: 25px;
    margin-bottom: 25px;
}

.politica-privacidad a {
    color: #3C302F;
    text-decoration: underline;
}

.politica-privacidad a:hover {
    text-decoration: none;
}

/* version movil */
@media (max-width: 768px) {
    .politica-privacidad {
        padding: 60px 15px;
    }

    .politica-privacidad h1 {
        font-size: 28px;
    }

    .politica-privacidad h2 {
        font-size: 21px;
    }

    .politica-privacidad p,
    .politica-privacidad li {
        font-size: 16px;
    }
}

/*aviso legal  */

.aviso-legal {
  background: #EBE7E4;
  color: #3C302F;
  padding: 80px 20px;
}

.contenedor-aviso {
  max-width: 900px;
  margin: 0 auto;
}

.aviso-legal h1, .aviso-legal h2, .aviso-legal h3 {
  font-family: 'Gotu', sans-serif;
  color: #3C302F;
  margin-bottom: 20px;
}

.aviso-legal h1 {
  font-size: 42px;
  text-align: center;
  margin-bottom: 50px;
}

.aviso-legal h2 {
  font-size: 28px;
  margin-top: 50px;
}

.aviso-legal h3 {
  font-size: 22px;
  margin-top: 30px;
}

.aviso-legal p, .aviso-legal li {
  font-family: 'Karla', sans-serif;
  color: #3C302F;
  font-size: 19px;
  line-height: 1.9;
  margin-bottom: 22px;
}

.aviso-legal ul {
  padding-left: 25px;
  margin-bottom: 25px;
}

.aviso-legal a {
  color: #3C302F;
  text-decoration: underline;
}

.aviso-legal a:hover {
  text-decoration: none;
}

/* movil */
@media (max-width: 768px) {
  .aviso-legal {
    padding: 60px 15px;
  }

  .aviso-legal h1 {
    font-size: 28px;
  }

  .aviso-legal h2 {
    font-size: 21px;
  }

  .aviso-legal h3 {
    font-size: 19px;
  }

  .aviso-legal p,
  .aviso-legal li {
    font-size: 16px;
  }
}

/* Contenedor: ajusta al tamaño de tus fotos */
.t-video {
    width: 100%;
    max-width: 380px;              /* iguala al ancho visual de tus imágenes */
}

/* Vídeo con proporción de retrato (ajústala si tus clips son distintos) */
.t-video__el {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;           /* 3:4 como en tus fotos; cambia a 4/5, 9/16, etc. */
    object-fit: cover;             /* recorta para llenar el cuadro sin deformar */
    background: #000;              /* por si tarda en cargar */
    border-radius: 8px;            /* si tus fotos tenían bordes redondeados */
}


.podcast-carousel {
position: relative;
}

.podcast-viewport {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 24px;
padding-bottom: 6px;               /* un pelin para que no tape el scroll */
scrollbar-width: none;              /* Firefox: ocultar scroll */
}
.podcast-viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* cada item "encaja" en el carrusel */
.podcast-item {
flex: 0 0 100%;
scroll-snap-align: start;
}

/* en >= 768px mostramos 3 por vista (similar a col-md-4) */
@media (min-width: 768px) {
.podcast-item {
    flex-basis: calc((100% - 48px) / 3); /* gap de 24px -> 2 gaps entre 3 items */
}
}

/* botones */
.podcast-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #3C302F;
  color: #3C302F;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .25s ease;
  line-height: 0;
  font-family: Arial, sans-serif; 
}

.podcast-ctrl:disabled {
  opacity: 0.35;             
  cursor: default;
  background: #EDEAE9;        
  border-color: #B8AFAF;       
  color: #B8AFAF;          
  transform: translateY(-50%) scale(1.0);
}


.podcast-ctrl:disabled:hover {
  background: #EDEAE9;
  color: #B8AFAF;
  transform: translateY(-50%) scale(1.0);
}

.podcast-prev { left: -10px; }
.podcast-next { right: -10px; }

.podcast-ctrl:hover {
    background: #3C302F;
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.podcast-card img { width: 100%; height: auto; display: block; }

.link-escuchar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s ease;
}

.link-escuchar .flecha-icono {
    width: 28px;
    transition: transform .25s ease;
}

.link-escuchar:hover {
    color: #3C302F;
}

.link-escuchar:hover .flecha-icono {
    transform: translate(4px, -3px); 
}

.section-medios-logos {
    
}

/* ESCUCHAR */
.link-escuchar{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s ease;
}

/* contenedor iconos */
.podcast-iconos{
    display: inline-flex;
    gap: 10px;
    margin-left: 5px;
    align-items: center;
}

/* iconos */
.podcast-card img.podcast-icon{
    width: 22px;
    height: 22px;
    display: block;
    opacity: .9;
    transition: transform .15s ease, opacity .15s ease;
}

.podcast-card img.podcast-icon:hover{
    transform: scale(1.1);
    opacity: 1;
}