/* ── CSS EXTRA PARA V2 ───────────────────────────────────────── */
.bg-white { background: var(--clr-white) !important; color: var(--clr-bg-dark) !important; }
.bg-light { background: #F8F9FA !important; color: var(--clr-bg-dark) !important; }
.bg-dark { background: var(--clr-bg-dark) !important; color: var(--clr-text-primary) !important; }
.text-white { color: var(--clr-white) !important; }
.text-gray { color: var(--clr-text-secondary) !important; }
.text-green { color: var(--clr-accent-green2) !important; }
.bg-dark-green { background: #0c1a13 !important; }
.border-gold { border: 1px solid var(--clr-gold); }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.85rem; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.py-5 { padding-top: 4rem; padding-bottom: 4rem; }
.p-4 { padding: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.rounded { border-radius: var(--radius-md); }
.img-rounded { border-radius: var(--radius-lg); }

.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-3 { gap: 1rem; }

.section-v2 { padding: 1rem 0; overflow: hidden; }
.section-inner-v2.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.section-inner-v2.align-start { align-items: flex-start; }

.sec-label-v2 { display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; }
.sec-label-v2.center { justify-content: center; width: 100%; }
.sec-label-v2 .num { background: var(--clr-accent-green); color: var(--clr-white); font-family: var(--font-heading); font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 1.1rem; border: 1px solid #c9a84c; flex-shrink: 0; }
.sec-label-v2 .lbl { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: inherit; line-height: 1.2; }
.sec-title-v2 { font-size: 2.2rem; font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; }
.sec-subtitle-v2 { font-size: 1.1rem; color: var(--clr-text-secondary); max-width: 700px; margin-inline: auto; line-height: 1.6; }
.sec-desc-v2 { font-size: 1.1rem; color: #555; line-height: 1.6; }

.grid-v2 { display: grid; gap: 0.5rem; }
.cols-70-30 { display: grid; grid-template-columns: 1.8fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 992px) { .cols-70-30 { grid-template-columns: 1fr; } }

.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card-v2 { background: var(--clr-white); padding: 2rem; border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: left; transition: transform 0.3s; }
.card-v2:hover { transform: translateY(-5px); }
.card-v2.outline { border: 1px solid rgba(27,67,50,0.15); box-shadow: none; }
.card-v2.dark { background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,76,0.15); }
.card-v2 h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.8rem; }
.card-v2 p { font-size: 0.9rem; color: #666; margin: 0; }

.icon-v2 { margin-bottom: 1.2rem; color: var(--clr-accent-green); }

.btn-dark-green { background: transparent; border: 1.5px solid var(--clr-accent-green2); color: var(--clr-bg-dark); }
.btn-dark-green:hover { background: var(--clr-accent-green2); color: var(--clr-white); }
/* Hero V2 */
.hero-v2-wrapper { padding: 0; }
.hero-v2 { position: relative; height: 100vh; min-height: 650px; display: flex; align-items: center; width: 100%; margin: 0; border-radius: 0; overflow: hidden; }
.hero-bg-v2 { position: absolute; inset: 0; background-image: url('../img/hero-resort.jpg'); background-size: cover; background-position: center; }
.hero-overlay-v2 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,14,13,0.95) 0%, rgba(11,14,13,0.8) 40%, rgba(11,14,13,0) 100%); }

/* AQUÍ ESTABA EL ERROR: width 100% destruía el container. Ahora respeta los márgenes. */
.hero-inner-v2 { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-top: 80px; width: min(1200px, 92%); margin: 0 auto; }

.hero-content-v2 { max-width: 550px; }
.hero-content-v2 h1 { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; text-transform: none; }

.hero-content-v2{
  margin-top: 40px;
}

.hero-desc-v2 { font-size: 1rem; color: var(--clr-text-secondary); margin-bottom: 2rem; line-height: 1.6; }
.hero-actions-v2 { display: flex; gap: 1rem; }
.hero-actions-v2 .btn-dark-green { background: var(--clr-accent-green); color: var(--clr-white); border-color: var(--clr-accent-green); }
.hero-actions-v2 .btn-dark-green:hover { background: var(--clr-accent-green2); border-color: var(--clr-accent-green2); color: var(--clr-white); }


.hero-video-card-v2 { position: relative; width: 290px; border: 1px solid rgba(201,168,76,0.6); border-radius: var(--radius-md); overflow: hidden; transform: translateY(-15px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.hero-video-card-v2 img { width: 100%; height: 280px; object-fit: cover; display: block; }
.hero-video-card-v2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); pointer-events: none; z-index: 1; }

.hero-video-card-v2 .play-btn-v2 { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--clr-white); cursor: pointer; z-index: 2; transition: transform 0.3s, background 0.3s; }
.hero-video-card-v2 .play-btn-v2 svg { width: 24px; height: 24px; margin-left: 3px; }
.hero-video-card-v2 .play-btn-v2:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(255, 255, 255, 0.1); }
.hero-video-card-v2 .video-card-text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.2rem; text-align: left; z-index: 2; box-sizing: border-box; }
.hero-video-card-v2 h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--clr-white); }
.hero-video-card-v2 p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin: 0; }

/* Blindaje Responsivo para la Tarjeta de Video */
@media (max-width: 992px) {
    .hero-video-card-v2 { width: 100%; max-width: 320px; transform: none; margin: 0 auto 2rem auto; }
    .hero-video-card-v2 img { height: 300px; }
    .hero-video-card-v2 .video-card-text { text-align: center; }
}
/* Overlapping boxes V2 */
.overlap-boxes { position: relative; z-index: 10; margin-top: -60px; margin-bottom: 4rem; }
.overlap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; background: rgba(17, 47, 36, 0.85); backdrop-filter: blur(12px); border-radius: var(--radius-lg); padding: 1.5rem 2.5rem; border: 1px solid rgba(201,168,76,0.3); }
.overlap-item { display: flex; align-items: center; gap: 1rem; }
.overlap-icon { color: var(--clr-gold); display: flex; align-items: center; justify-content: center; }
.overlap-text { color: var(--clr-white); font-size: 0.95rem; font-weight: 500; line-height: 1.2; }


/* Stats bar V2 */
.stats-bar-v2 { background: var(--clr-accent-green); padding: 2.5rem 0; border-bottom: 2px solid var(--clr-gold); }
/* Stats bar V2 - Optimizado para Responsive */
.stats-bar-v2 { background: var(--clr-accent-green); padding: 2.5rem 0; border-bottom: 2px solid var(--clr-gold); }
.stats-bar-inner { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 1.5rem; 
    align-items: start; 
}

.stat-item-v2 { 
    text-align: center; 
    padding: 0 0.5rem; 
    border-right: 1px solid rgba(255,255,255,0.1); 
}
.stat-item-v2:last-child { border-right: none; }

/* Responsive de la barra de stats */
@media (max-width: 1024px) {
    .stats-bar-inner { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
    .stat-item-v2:nth-child(3) { border-right: none; } /* Ajuste de bordes en grid de 3 */
}

/* Blindaje Móvil: Apagamos la barra de escritorio para evitar duplicidad con la barra de 4 íconos */
@media (max-width: 992px) {
    .stats-bar-v2 {
        display: none !important;
    }
}

.stat-icon-v2 { display: flex; justify-content: center; margin-bottom: 1rem; color: var(--clr-gold); }
.stat-icon-v2 svg { width: 30px; height: 30px; stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.stat-title-v2 { font-size: 0.8rem; color: var(--clr-white); font-weight: 500; margin-bottom: 0.4rem; line-height: 1.2; }
.stat-val-v2 { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--clr-gold); line-height: 1.1; margin-bottom: 0.4rem; }
.stat-sub-v2 { font-size: 0.75rem; color: rgba(255,255,255,0.8); line-height: 1.3; }
.stat-sub-v2 span { font-size: 0.65rem; opacity: 0.7; }


/* Video Autoridad */
.autoridad-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.autoridad-video img { width: 100%; display: block; }
.play-btn-v2.lg { width: 70px; height: 70px; background: rgba(255,255,255,0.9); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: var(--clr-accent-green); cursor: pointer; transition: transform 0.3s; }
.play-btn-v2.lg:hover { transform: translate(-50%, -50%) scale(1.1); }
.autoridad-label { position: absolute; bottom: 1.5rem; left: 1.5rem; color: var(--clr-white); text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-weight: 700; line-height: 1.2; }
.autoridad-label span { font-size: 0.8rem; font-weight: 400; }

/* ---- V2 TARGET: AJUSTES SECCIÓN 01 (VIDEO AUTORIDAD) ---- */

/* Empareja el nivel de padding de la sección Video con la barra Verde superior */
.stats-bar-v2 + .section-v2 {
  padding-top: 2.5rem !important;
}

.section-autoridad {
  padding-top: 2.5rem; /* Sincroniza el ritmo vertical con la barra de estadísticas superior */
  padding-bottom: 4rem;
}

/* Desde aqui  */
.cols-autoridad {
  display: grid;
  grid-template-columns: 0.95fr 1.25fr;
  gap: 4rem;
  align-items: center; /* RESTAURADO: Alineación vertical perfecta entre texto y video */
}


@media (max-width: 992px) {
  .cols-autoridad {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* hasta aqui  */

/* Ajuste de proximidad: Título y subtítulo en secciones de autoridad */
.sec-label-v2.label-autoridad {
  margin-bottom: 1.5rem; 
}

/* En secciones centradas, el bloque de texto también se centra */
.sec-label-v2.label-autoridad.center > div {
  text-align: left;
}


.label-autoridad .num.dark {
    background: var(--clr-accent-green);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 1.1rem;
    border: 1px solid #c9a84c;
}

.label-autoridad .lbl-small {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
}
.desc-autoridad {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: 400;
  margin-left: 3.4rem; /* Desplaza el texto para alinear exactamente con la 'V' de Video */
}

/* Aplica el mismo nivel de sangría al botón exclusivo de esta sección */
.section-autoridad .content-left .btn {
  margin-left: 3.4rem; 
}

/* Reset de seguridad para pantallas móviles (evita que el texto se aplaste) */
@media (max-width: 576px) {
  .desc-autoridad,
  .section-autoridad .content-left .btn {
    margin-left: 0;
  }
}

.wide-video {
  aspect-ratio: 2.2 / 1;
  border-radius: 12px;
}

.wide-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn-v2.outline-play {
  width: 66px;
  height: 66px;
  background: transparent;
  border: 2px solid rgba(201,168,76, 0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-btn-v2.outline-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(201,168,76, 0.15);
  border-color: var(--clr-gold);
}

.play-btn-v2.outline-play svg {
  width: 36px; /* Aumentado ligeramente para que destaque con fuerza en el anillo de 66px */
  height: 36px;
  margin-left: 3px; /* El famoso centrado óptico */
}

/* ---- V2 TARGET: AJUSTES SECCIÓN 02 (EL PROBLEMA) ---- */
.section-problema {
  padding-top: 1rem; /* Acorta la distancia con la sección superior */
  padding-bottom: 4rem;

}

.problema-box {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.problema-header {
  text-align: left;
  margin-bottom: 1.5rem;
}

.problema-header .desc-autoridad {
  margin-bottom: 0; 
  max-width: 100%;
}

.card-centered {
  text-align: center;
  padding: 1.8rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-v2.large-icon {
  margin-bottom: 1.2rem;
  color: #2D6A4F; /* Un tono oscuro/verdoso elegante para los iconos */
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-v2.large-icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.2; /* Hace el trazo del icono más fino y moderno */
}

@media (max-width: 768px) {
  .problema-box {
    padding: 1.8rem 1.5rem;
  }
}



/* List */
.list-v2 { display: flex; flex-direction: column; gap: 0.5rem; }
.list-item-v2 { display: flex; gap: 1rem; align-items: flex-start; }
.list-icon-v2 { width: 45px; height: 45px; border-radius: 50%; background: rgba(27,67,50,0.1); color: var(--clr-accent-green); display: grid; place-items: center; flex-shrink: 0; }
.list-item-v2 h5 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; color: #111; }
/* List */
.list-v2 { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  margin-left: 3.4rem; /* Sangría exacta para alinear con el texto superior (tu línea roja) */
}
@media (max-width: 576px) {
  .list-v2 { margin-left: 0; }
}
.list-item-v2 { display: flex; gap: 1rem; align-items: flex-start; }
.list-icon-v2 { width: 45px; height: 45px; border-radius: 50%; background: rgba(27,67,50,0.1); color: var(--clr-accent-green); display: grid; place-items: center; flex-shrink: 0; }
.list-item-v2 h5 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; color: #111; } /* Tamaño de fuente reducido */
.list-item-v2 p { font-size: 0.9rem; color: #555; margin: 0; } /* Tamaño de fuente reducido */

/* Item Simple */
.item-simple h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: #111; }
.item-simple p { font-size: 0.9rem; color: #666; margin: 0; }
/* Seccion 07 Legalidad y transparencia */
.legal-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1.5rem;
    gap: 1rem;
}
.legal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.legal-item svg {
    margin-bottom: 0.6rem;
    color: var(--clr-dark-green, #1b3b2b);
    width: 22px;
    height: 22px;
}
.legal-item p {
    font-size: 0.75rem;
    color: #444;
    line-height: 1.25;
    margin: 0;
    font-weight: 700;
}
.legal-divider {
    width: 1px;
    background-color: #ddd;
    margin: 0 0.5rem;
    align-self: stretch;
}
.img-legal {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Por defecto ocultamos la lista móvil en escritorio */
.legal-mobile-list {
    display: none;
}

/* ── BLINDAJE MÓVIL: SECCIÓN 07 (FORMATO 3 TARJETAS MOCKUP) ── */
@media (max-width: 992px) {
    /* Ocultar grilla de 6 ítems y el párrafo de escritorio */
    .legal-subtitle-desktop,
    .legal-grid {
        display: none !important;
    }

    /* Mostrar la lista móvil */
    .legal-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    /* Formato de Tarjeta Horizontal Blanca */
    .legal-m-item {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 10px;
        padding: 1.2rem;
        gap: 1.2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }

    .l-m-icon {
        color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .l-m-icon svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.5;
    }

    .l-m-text {
        text-align: left;
    }

    .l-m-text h5 {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        color: #111;
        margin: 0 0 0.15rem 0;
    }

    .l-m-text p {
        font-size: 0.82rem;
        color: #666;
        margin: 0;
        line-height: 1.35;
    }

    /* Redimensionar imagen para móvil */
    .img-legal {
        height: 220px;
        margin-top: 0.5rem; /* Pequeña separación con la última tarjeta */
    }
}


/* Seccion 06 Beneficios */
.grid-beneficios {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}
.beneficio-item {
    text-align: center;
}
.beneficio-img-wrapper {
    position: relative;
    width: 100%;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}
.beneficio-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.play-icon-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(2px);
    transition: transform 0.3s ease, background 0.3s ease;
}
.play-icon-center svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}
.beneficio-item:hover .play-icon-center {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--clr-gold);
    border-color: var(--clr-gold);
}
.beneficio-item h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: #111;
    line-height: 1.2;
}
.beneficio-item p {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* ── BLINDAJE MÓVIL: GRID 4 ARRIBA, 1 ABAJO (ESTILO MOCKUP) ── */
@media (max-width: 992px) {
    .grid-beneficios { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .grid-beneficios { 
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 0.5rem !important; 
    }
    
    /* Ocultar el párrafo (subtítulo) para emular el mockup móvil */
    .beneficio-item p {
        display: none !important;
    }
    
    /* Achicar títulos para que entren en los cuadritos sin romper la pantalla */
    .beneficio-item h4 {
        font-size: 0.65rem !important;
        margin-top: 0.4rem !important;
        line-height: 1.15 !important;
    }
    
    /* Forzar formato 1:1 (cuadrado perfecto) en las 4 primeras fotos */
    .beneficio-item:not(.item-experiencias) .beneficio-img-wrapper {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
    }
    
    /* Empequeñecer el botón de play para que no tape las fotos chiquitas */
    .beneficio-item:not(.item-experiencias) .play-icon-center {
        width: 24px !important;
        height: 24px !important;
        border-width: 1px !important;
    }
    .beneficio-item:not(.item-experiencias) .play-icon-center svg {
        width: 10px !important;
        height: 10px !important;
        margin-left: 1px !important;
    }
    
    /* MAGIA: El 5to elemento rompe la grilla y se estira al 100% abajo */
    .item-experiencias {
        grid-column: 1 / -1 !important;
        margin-top: 0.8rem !important;
    }
    
    /* Convertir la 5ta imagen en rectangular */
    .item-experiencias .beneficio-img-wrapper {
        height: auto !important;
        aspect-ratio: 2.5 / 1 !important;
        border-radius: 10px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .item-experiencias h4 {
        font-size: 0.85rem !important;
    }
}

/* Seccion 05 Compra */
.compra-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}
.compra-card {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 2rem 1.2rem;
    text-align: center;
    background: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}
.compra-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
}
.compra-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--clr-accent-green);
}
.compra-card h4 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.compra-card p {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.compra-mobile-list {
    display: none;
}

/* ── BLINDAJE MÓVIL: SECCIÓN 05 (FORMATO LISTA MOCKUP) ── */
@media (max-width: 992px) {
    /* Mutar fondo de sección a verde corporativo para encuadrar la tarjeta */
    .section-compra {
        background: #0B2117 !important;
        padding: 3rem 0 !important;
    }

    /* Ocultamos el subtítulo de escritorio y la cuadrícula original */
    .compra-subtitle-desktop,
    .compra-grid {
        display: none !important;
    }

    /* Caja crema contenedora */
    .compra-mobile-box {
        background: #FFF8F0 !important;
        border-radius: 16px;
        padding: 2rem 1.2rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ajuste del título para que quepa bien dentro de la caja */
    .section-compra .sec-label-v2 {
        margin-bottom: 1.5rem !important;
        align-items: center !important;
    }

    /* Encendemos la lista apilada */
    .compra-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }

    /* Formato de las 4 tarjetas blancas horizontales */
    .compra-m-item {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 10px;
        padding: 1.2rem;
        gap: 1.2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }

    .c-m-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #111;
    }

    .c-m-icon svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.5;
    }

    .c-m-text {
        text-align: left;
    }

    .c-m-text h5 {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        color: #111;
        margin: 0 0 0.15rem 0;
        line-height: 1.2;
    }

    .c-m-text p {
        font-size: 0.82rem;
        color: #666;
        margin: 0;
        line-height: 1.35;
    }
}

/* Card Img */
.card-img { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; background: #fff; }
.card-img img { width: 100%; height: 180px; object-fit: cover; }
.card-img-content { padding: 1.5rem 1rem; position: relative; }
.play-icon-small { width: 36px; height: 36px; background: var(--clr-gold); color: #fff; border-radius: 50%; display: grid; place-items: center; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); border: 3px solid #fff; }
.card-img-content h4 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; color: #111; }
.card-img-content p { font-size: 0.8rem; color: #666; margin: 0; }

/* Small Cards */
.card-small { background: #fff; border: 1px solid rgba(0,0,0,0.05); padding: 1.5rem 1rem; text-align: center; border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.card-small svg { color: var(--clr-accent-green); margin-bottom: 0.8rem; }
.card-small p { font-size: 0.85rem; font-weight: 600; color: #333; margin: 0; line-height: 1.3; }

/* Comparativo Table */
.comparativo-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.comparativo-table th, .comparativo-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; font-size: 0.9rem; color: #444; }
.comparativo-table th { background: var(--clr-accent-green); color: #fff; font-weight: 600; font-family: var(--font-heading); }
.comparativo-table th.highlight { background: var(--clr-accent-green2); }
.comparativo-table td.highlight { background: rgba(45,106,79,0.05); font-weight: 700; color: var(--clr-accent-green); }

/* Prueba Social */
.grid-ps { display: grid; grid-template-columns: 1.2fr 2.2fr 1.2fr 1fr; gap: 1.5rem; }
@media (max-width: 1100px) { .grid-ps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .grid-ps { grid-template-columns: 1fr; } }

.ps-card { text-align: center; }
.ps-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.ps-card h5 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #111; margin-bottom: 0.5rem; }
.ps-card p { font-size: 0.85rem; color: #666; }

.ps-card.medios-card { background: #fdfdfd; padding: 1.5rem; border-radius: 12px; border: 1px solid #eaeaea; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ps-card.medios-card h5 { margin-bottom: 1.5rem; font-size: 0.95rem; }
.medios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; align-items: center; justify-content: center; }
.ps-card.medios-card .medios-grid span { display: block; font-weight: 800; color: #333; font-size: 0.9rem; text-align: center; padding: 0; background: transparent; border: none; font-family: var(--font-heading); }

/* Timeline */
.timeline-v2 { border-left: 2px solid rgba(255,255,255,0.1); padding-left: 2rem; margin-left: 1rem; }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; left: -2.65rem; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #222; border: 2px solid var(--clr-gold); }
.timeline-item.active .timeline-dot { background: var(--clr-gold); box-shadow: 0 0 10px var(--clr-gold); }
.timeline-content h5 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--clr-gold); margin-bottom: 0.3rem; }
.timeline-content p { font-size: 1rem; color: var(--clr-white); margin-bottom: 0.3rem; }
.timeline-content span { font-size: 0.85rem; color: var(--clr-text-secondary); }

/* Form wrapper */
.form-wrapper-v2 { display: flex; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.form-left { flex: 1.2; padding: 3rem; border-right: 1px solid #eee; text-align: left; }
.form-right { flex: 1; padding: 3rem; background: #fafafa; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.form-control { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.3s; }
.form-control:focus { border-color: var(--clr-gold); }
.form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.form-check label { font-size: 0.85rem; color: #666; margin: 0; cursor: pointer; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .section-inner-v2.cols-2 { grid-template-columns: 1fr; gap: 2rem; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .overlap-grid { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }
  .overlap-boxes { margin-top: -30px; }
  .hero-inner-v2 { flex-direction: column; justify-content: center; text-align: center; gap: 2rem; }
  .hero-actions-v2 { justify-content: center; }
  .form-wrapper-v2 { flex-direction: column; }
  .form-left, .form-right { border-right: none; padding: 2rem; }
}
@media (max-width: 576px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .hero-content-v2 h1 { font-size: 2rem; }
  .overlap-grid { grid-template-columns: 1fr; }
  /* Centrar headers de sección en móvil */
  .sec-label-v2.label-autoridad { justify-content: center; }
}

/* -- FORM & CALENDAR REFINEMENTS V2 -- */
.bg-cream { background: #FFFdf8 !important; color: var(--clr-bg-dark) !important; }

.form-v2-left { padding: 0; flex: 1.2; }
.form-v2-right { padding: 0; flex: 1; display: flex; justify-content: flex-end; }

.btn-form-v2 { padding: 0.8rem 2.5rem; font-size: 1rem; border-radius: var(--radius-sm); margin-top: 1rem; display: inline-flex; }

.calendar-card-v2 { background: #fff; border-radius: var(--radius-md); padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid rgba(201,168,76,0.1); width: 100%; max-width: 420px; }
.cal-title-v2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 0.2rem; }
.cal-sub-v2 { font-size: 0.95rem; color: var(--clr-text-secondary); margin-bottom: 1.5rem; }

.calendar-block-v2 { display: flex; flex-direction: column; gap: 1rem; }
.calendar-block-v2 .calendar-widget { width: 100%; }

.calendar-block-v2 .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201,168,76,0.15); }
.calendar-block-v2 .cal-month { font-family: var(--font-heading); font-weight: 700; color: #111; font-size: 0.95rem; }
.calendar-block-v2 .cal-nav { background: none; border: none; color: var(--clr-text-secondary); cursor: pointer; transition: color 0.3s; padding: 0.2rem; }
.calendar-block-v2 .cal-nav:hover { color: var(--clr-gold); }

.calendar-block-v2 .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; font-weight: 600; color: #111; margin-bottom: 0.5rem; }
.calendar-block-v2 .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }

.calendar-block-v2 .cal-day { padding: 0.4rem 0; text-align: center; border: none; background: transparent; cursor: pointer; border-radius: 50%; font-size: 0.85rem; color: #444; width: 32px; height: 32px; margin: 0 auto; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.calendar-block-v2 .cal-day:hover { background: rgba(201,168,76,0.1); color: var(--clr-gold); }
.calendar-block-v2 .cal-day.selected { background: var(--clr-gold); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(201,168,76,0.4); }
.calendar-block-v2 .cal-day.today { border: 1px solid var(--clr-gold); color: var(--clr-gold); }
.calendar-block-v2 .cal-day:disabled { opacity: 0.3; cursor: not-allowed; }

.time-picker-v2 { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(201,168,76,0.15); }
.time-carousel-wrapper { display: flex; align-items: center; gap: 0.5rem; position: relative; width: 100%; }
.time-nav-btn { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 50%; color: var(--clr-gold); width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; transition: all 0.3s; flex-shrink: 0; padding: 0; }
.time-nav-btn:hover { background: var(--clr-gold); color: #fff; }
.time-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.time-picker-v2 .time-slots { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; justify-content: flex-start; padding-bottom: 0.5rem; scroll-behavior: smooth; flex: 1; scrollbar-width: none; -ms-overflow-style: none; }
.time-picker-v2 .time-slots::-webkit-scrollbar { display: none; /* hide scrollbar since we have arrows */ }
.time-picker-v2 .time-slot { padding: 0.5rem 1rem; border: 1px solid rgba(201,168,76,0.3); background: transparent; border-radius: 4px; font-size: 0.85rem; color: var(--clr-gold); cursor: pointer; font-weight: 600; transition: all 0.3s; flex: 0 0 auto; min-width: 75px; text-align: center; }
.time-picker-v2 .time-slot:hover { background: var(--clr-gold); color: #fff; }
.time-picker-v2 .time-slot.selected { background: var(--clr-gold); color: #fff; border-color: var(--clr-gold); }

/* =========================================================
   BLINDAJE ABSOLUTO CALENDARIO Y HORAS EN MÓVIL
   ========================================================= */
@media (max-width: 992px) {
    /* 1. Forzar que la tarjeta respire y no se aplaste */
    .calendar-card-v2 {
        padding: 1.5rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Forzar ESTRICTAMENTE las 7 columnas para los días */
    .calendar-block-v2 .cal-weekdays,
    .calendar-block-v2 .cal-days,
    .cal-weekdays,
    .cal-days {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        width: 100% !important;
        gap: 2px !important;
    }

    /* 3. Evitar que los números se deformen */
    .cal-day, 
    .calendar-block-v2 .cal-day {
        width: 100% !important;
        max-width: 38px !important;
        height: 38px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
    }

    .cal-weekdays span {
        font-size: 0.75rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 4. Proteger el Slider horizontal de las horas */
    .time-carousel-wrapper {
        width: 100% !important;
        display: flex !important;
    }

    .time-picker-v2 .time-slots,
    .time-slots {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prohíbe que bajen a otra línea */
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-bottom: 5px !important;
    }

    .time-picker-v2 .time-slot,
    .time-slot {
        flex: 0 0 auto !important;
        min-width: 85px !important; /* Ancho fijo para que se deslicen bien */
        width: auto !important;
        padding: 0.6rem 0.5rem !important;
    }
}



/* =========================================================
   REPARACIÓN DEL CALENDARIO (MATA-PADDINGS)
   ========================================================= */
@media (max-width: 992px) {
    /* 1. MATAR LOS PADDINGS GIGANTES QUE ESTÁN APLASTANDO EL CALENDARIO */
    .form-right, .form-v2-right {
        padding: 1rem !important; /* Antes tenía 3rem (48px) bloqueando la pantalla */
    }
    .calendar-card-v2 {
        padding: 1.5rem 0.5rem !important; /* Antes tenía 2rem (32px) bloqueando la pantalla */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Ahora el grid de 7 sí tiene espacio para existir en la pantalla */
    .calendar-block-v2 .cal-weekdays,
    .calendar-block-v2 .cal-days {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
    }
    
    /* 3. Ajustar los circulitos de los días para que entren perfectos */
    .calendar-block-v2 .cal-day {
        width: 100% !important;
        max-width: 38px !important;
        height: 38px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        padding: 0 !important;
    }
    
    .calendar-block-v2 .cal-weekdays span {
        font-size: 0.75rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 4. Proteger el Slider horizontal de las horas */
    .time-carousel-wrapper {
        width: 100% !important;
    }
    .time-picker-v2 .time-slots {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 5px !important;
    }
    .time-picker-v2 .time-slot {
        flex: 0 0 auto !important;
        min-width: 85px !important;
        padding: 0.6rem 0.5rem !important;
    }
}




/* --- REPARACIÓN ESTRUCTURAL: SECCIÓN 04 --- */
.section-v2.bg-dark {
  background: var(--clr-bg-dark) !important;
  padding: 5rem 0; /* Asegura el mismo padding que el resto */
}

/* Forzar la alineación del título en la sección 04 para que coincida con la 03 */
.section-v2.bg-dark .sec-label-v2 .lbl-small {
  color: var(--clr-white) !important; /* Corregir color de texto */
}

/* Ajuste del ancho de la caja .content-left para que sea igual en todas las secciones */
.section-v2 .content-left {
  max-width: 100%;
}


/* Corrección de la estructura 04 */
/* 1. Fondo global blanco y sección pegada a la de arriba */
.section-v2.bg-dark.section-proyecto {
    background: var(--clr-white) !important; 
    padding-top: 0 !important;
    margin-top: -3.5rem; 
    position: relative;
    z-index: 5;
}

/* 2. Pestaña superior (El inicio del fondo oscuro) */
.section-proyecto .header-autoridad {
    background-color: #1b4332;
    max-width: 48%;
    padding: 0.8rem 1.5rem 1.5rem 1.5rem;
    border-radius: 14px 14px 0px 0px;
    margin-bottom: 0 !important;
    position: relative;
    height: 100px;
}

/* 3. LA RAMPA DIAGONAL (La línea roja exacta que dibujaste) */
.section-proyecto .header-autoridad::after {
    content: '';
    position: absolute;
    top: 3px;
    right: -106px;
    width: 110px;
    height: 110%;
    background-color: #1b4332;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    pointer-events: none;
}

/* Arreglo de la separación gigante del subtítulo */
.section-proyecto .header-autoridad .desc-autoridad {
    margin-bottom: 0;
}

/* 4. Cuerpo inferior (Tarjetas e Imagen) */
.section-proyecto .cols-autoridad {
    background-color: rgb(27 67 50);
    padding: 24px 2.5rem 1.5rem;
    border-radius: 0px 15px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

/* 4.1 Alineación estructural de la imagen con el grid de tarjetas */
.section-proyecto .cols-autoridad .content-left {
    display: flex;
    height: 100%;
}

.section-proyecto .cols-autoridad .content-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corrección de color del badge para el fondo oscuro */
.section-v2.bg-dark.section-proyecto .num.dark {
    background: var(--clr-accent-green) !important;
    color: #fff !important;
}
/* =========================================================
   BLINDAJE MÓVIL: SECCIÓN 04 (PROYECTO ELOHIM)
   ========================================================= */
.proyecto-mobile-wrapper {
    display: none;
}

@media (max-width: 992px) {
    /* Ocultar la estructura verde y diagonal de escritorio */
    .section-proyecto .header-autoridad,
    .section-proyecto .cols-autoridad {
        display: none !important;
    }

    /* Fondo verde corporativo en toda la sección para encuadrar la tarjeta */
    .section-proyecto {
        background: #0B2117 !important;
        padding: 3rem 0 !important;
        margin-top: 0 !important;
    }

    /* Mostrar wrapper móvil */
    .proyecto-mobile-wrapper {
        display: block !important;
        width: 100%;
    }

    /* Caja contenedora crema */
    .proyecto-mobile-box {
        background: #FFF8F0 !important;
        border-radius: 16px;
        padding: 1.5rem 1.2rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Imagen superior */
    .proyecto-m-img {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    .proyecto-m-img img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 12px;
    }

    /* Lista de items aglomerados (blancos con bordes) */
    .proyecto-m-list {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.06);
        overflow: hidden;
    }

    .proyecto-m-item {
        display: flex;
        align-items: center;
        padding: 1.2rem 1rem;
        gap: 1.2rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .proyecto-m-item:last-child {
        border-bottom: none;
    }

    .p-m-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
        flex-shrink: 0;
    }

    .p-m-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.5;
    }

    .p-m-text {
        text-align: left;
    }

    .p-m-text h5 {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        color: #111;
        margin: 0 0 0.15rem 0;
        line-height: 1.2;
    }

    .p-m-text p {
        font-size: 0.82rem;
        color: #666;
        margin: 0;
        line-height: 1.35;
    }
}


/* Corrección de color del badge para el fondo oscuro */
.section-v2.bg-dark .num.dark {
    background: var(--clr-accent-green) !important;
    color: #fff !important;
}



 

/* Corrección de tarjetas horizontales en sección 04 */
/* Corrección de tarjetas horizontales en sección 04 */
.card-v2.horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Regresamos el icono a la parte superior */
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 1.8rem 1.5rem; /* Padding premium para equilibrar el espacio */
    border: 1px solid rgba(201,168,76,0.3);
    height: 100%;
    box-sizing: border-box;
}

.card-v2.horizontal .icon-v2 {
    margin-bottom: 0;
    flex-shrink: 0;
    margin-top: 0.15rem; /* Alineación óptica sutil con el texto del h4 */
}

.card-v2.horizontal .card-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-v2.horizontal h4 {
    margin-bottom: 0.4rem;
    line-height: 1.2;
    font-size: 1.05rem;
}

.card-v2.horizontal p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}


/* Corrección de color de iconos en sección 04 - Color Dorado Corporativo */
.section-proyecto .card-v2 .icon-v2 {
    color: var(--clr-gold) !important;
    fill: none !important;
    stroke: currentColor !important;
}


.section-v2.section-proyecto.el{
margin-bottom: -100px;
}


/* ══════════════════════════════════════════════
   SECCIÓN 10 — URGENCIA POR ETAPA (REDISEÑO FINAL)
   ══════════════════════════════════════════════ */

/* Fondo crema cálido */
.urgencia-section {
    background: #FFF8F0 !important;
    color: #1b1b1b !important;
    padding: 4rem 0;
}

/* Layout exterior: [contenido izquierdo] [imagen derecha independiente] */
.urgencia-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

/* Lado izquierdo: header + cards */
.urgencia-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fila de 4 tarjetas, cada una independiente con gap */
.urgencia-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    flex: 1;
}

/* Base de todas las tarjetas */
.urgencia-card {
    border-radius: 14px;
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

/* Tarjeta 1: Verde oscuro con todo el border-radius */
.urgencia-card--dark {
    background: #1b4332;
}

/* Tag "Etapa vigente" */
.urgencia-tag {
    display: inline-block;
    background: rgba(201,168,76,0.2);
    color: var(--clr-gold);
    border: 1px solid rgba(201,168,76,0.5);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
    width: fit-content;
    margin-bottom: 0.3rem;
}

.urgencia-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    display: block;
}

.urgencia-card--dark .urgencia-card-desc {
    color: rgba(255,255,255,0.65);
}

/* Tarjetas 2 y 3: Sin fondo (transparente sobre el crema) */
.urgencia-card--ghost {
    background: transparent;
}

.urgencia-card-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    line-height: 1.35;
    margin: 0 0 0.2rem 0;
}

.urgencia-card-num {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--clr-accent-green);
    line-height: 1;
    display: block;
}

.urgencia-card-desc {
    font-size: 0.82rem;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

/* Tarjeta 4: Verde corporativo (mismo tono que botones primarios) */
.urgencia-card--cta {
    background: var(--clr-accent-green);
    gap: 0.9rem;
    justify-content: center;
}

.urgencia-cta-txt {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

/* Botón dorado dentro del CTA */
.urgencia-cta-btn {
    display: inline-block;
    background: var(--clr-gold);
    color: #1a1a1a;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    width: fit-content;
    white-space: nowrap;
}

.urgencia-cta-btn:hover {
    background: #b8922e;
    transform: translateY(-1px);
}

/* Imagen derecha: completamente independiente, border-radius completo */
.urgencia-img-wrap {
    width: 280px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.urgencia-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.urgencia-img-wrap:hover img {
    transform: scale(1.04);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .urgencia-img-wrap { width: 240px; }
}



.card-v2.horizontal p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}


/* Corrección de color de iconos en sección 04 - Color Dorado Corporativo */
.section-proyecto .card-v2 .icon-v2 {
    color: var(--clr-gold) !important;
    fill: none !important;
    stroke: currentColor !important;
}


.section-v2.section-proyecto.el{
margin-bottom: -100px;
}


/* ══════════════════════════════════════════════
   SECCIÓN 10 — URGENCIA POR ETAPA (REDISEÑO FINAL)
   ══════════════════════════════════════════════ */

/* Fondo crema cálido */
.urgencia-section {
    background: #FFF8F0 !important;
    color: #1b1b1b !important;
    padding: 4rem 0;
}

/* Layout exterior: [contenido izquierdo] [imagen derecha independiente] */
.urgencia-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

/* Lado izquierdo: header + cards */
.urgencia-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fila de 4 tarjetas, cada una independiente con gap */
.urgencia-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    flex: 1;
}

/* Base de todas las tarjetas */
.urgencia-card {
    border-radius: 14px;
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

/* Tarjeta 1: Verde oscuro con todo el border-radius */
.urgencia-card--dark {
    background: #1b4332;
}

/* Tag "Etapa vigente" */
.urgencia-tag {
    display: inline-block;
    background: rgba(201,168,76,0.2);
    color: var(--clr-gold);
    border: 1px solid rgba(201,168,76,0.5);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
    width: fit-content;
    margin-bottom: 0.3rem;
}

.urgencia-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    display: block;
}

.urgencia-card--dark .urgencia-card-desc {
    color: rgba(255,255,255,0.65);
}

/* Tarjetas 2 y 3: Sin fondo (transparente sobre el crema) */
.urgencia-card--ghost {
    background: transparent;
}

.urgencia-card-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    line-height: 1.35;
    margin: 0 0 0.2rem 0;
}

.urgencia-card-num {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--clr-accent-green);
    line-height: 1;
    display: block;
}

.urgencia-card-desc {
    font-size: 0.82rem;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

/* Tarjeta 4: Verde corporativo (mismo tono que botones primarios) */
.urgencia-card--cta {
    background: var(--clr-accent-green);
    gap: 0.9rem;
    justify-content: center;
}

.urgencia-cta-txt {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

/* Botón dorado dentro del CTA */
.urgencia-cta-btn {
    display: inline-block;
    background: var(--clr-gold);
    color: #1a1a1a;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    width: fit-content;
    white-space: nowrap;
}

.urgencia-cta-btn:hover {
    background: #b8922e;
    transform: translateY(-1px);
}

/* Imagen derecha: completamente independiente, border-radius completo */
.urgencia-img-wrap {
    width: 280px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.urgencia-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.urgencia-img-wrap:hover img {
    transform: scale(1.04);
}
/* ── Responsive ── */
.urgencia-mobile-wrapper { display: none; }

@media (max-width: 1100px) {
    .urgencia-img-wrap { width: 240px; }
}

@media (max-width: 992px) {
    /* Ocultar versión escritorio por completo */
    .urgencia-layout {
        display: none !important;
    }
    
    /* Adaptar fondo de sección principal a verde oscuro para que la tarjeta resalte */
    .urgencia-section {
        background: #0B2117 !important;
        padding: 3rem 0 !important;
    }

    /* Mostrar bloque móvil inyectado */
    .urgencia-mobile-wrapper {
        display: block !important;
        width: 100%;
    }

    /* Caja crema exterior (contenedor principal) */
    .urgencia-mobile-box {
        background: #FFF8F0;
        border-radius: 16px;
        padding: 2rem 1.2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    /* Lista blanca de 3 filas */
    .urgencia-m-list {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
    }

    .urgencia-m-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.2rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    
    .urgencia-m-item.border-0 {
        border-bottom: none;
    }

    /* Círculos con íconos */
    .u-m-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #F2ECE4; /* Tono crema sutil */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .u-m-icon svg {
        width: 18px;
        height: 18px;
        stroke: #111;
    }

    .u-m-text {
        text-align: left;
    }

    .u-m-text h5 {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        color: #111;
        margin: 0 0 0.15rem 0;
    }

    .u-m-text p {
        font-size: 0.82rem;
        color: #666;
        margin: 0;
        line-height: 1.35;
    }

    /* El Botón Gigante */
    .btn-urgencia-mobile {
        display: block;
        width: 100%;
        background: #C9A84C;
        color: #111;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        padding: 1.1rem 0rem;
        border-radius: 8px;
        text-align: center;
        text-decoration: none;
        transition: transform 0.3s;
    }
    
    .btn-urgencia-mobile:hover {
        transform: translateY(-2px);
        background: #b8922e;
    }
}
/* ══════════════════════════════════════════════
   PRE-FOOTER CTA
   ══════════════════════════════════════════════ */
.cta-pre-footer {
    position: relative;
    background-color: #0d2119; /* Verde oscuro corporativo base */
    padding: 3.5rem 0;
    overflow: hidden;
}

/* Imagen de fondo sutil - montañas más visibles */
.cta-pre-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../img/hero-resort.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.35; 
    z-index: 1;
}

/* Gradiente overlay para dar el tono verde oscuro característico */
.cta-pre-footer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(13, 33, 25, 0.92), rgba(13, 33, 25, 0.75));
    z-index: 2;
}

.cta-pre-footer-inner {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Columna izquierda: Título */
.cta-left {
    flex: 0 0 55%;
}

.cta-title {
    color: #e8d08c; /* Tono dorado/crema pálido */
    font-size: 1.6rem;
    line-height: 1.35;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Columna derecha: Subtítulo + Botón */
.cta-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* A la izquierda como pidió el usuario */
    gap: 1.2rem;
}

.cta-text-right {
    text-align: left; /* A la izquierda como pidió el usuario */
}

.cta-ready {
    display: block;
    color: #e8d08c; 
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.2rem;
}

.cta-desc {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    opacity: 0.9;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--clr-gold) !important;
    color: #111 !important;
    border-radius: 6px;
    border: none !important;
    transition: transform 0.3s, background 0.3s;
}

.cta-btn:hover {
    background: #c2a138 !important;
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .cta-pre-footer {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════
   CIERRE DE CONFIANZA (SECCIÓN 12)
   ══════════════════════════════════════════════ */
.cierre-section {
    background: #fff !important; /* Fondo general blanco */
}

.cierre-box {
    background: #FFF8F0; /* Fondo crema de la caja interior */
    border-radius: 12px;
    padding: 1rem 1.5rem;
    overflow: hidden;
}

.cierre-layout {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.cierre-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.cierre-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.cierre-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cierre-icon {
    color: var(--clr-gold); /* Dorado */
    margin-bottom: 0.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(201,168,76,0.1); /* Círculo de fondo sutil dorado */
}

.cierre-item-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.3rem 0;
    line-height: 1.2;
}

.cierre-item-desc {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    line-height: 1.35;
}

.cierre-right {
    flex-shrink: 0;
    width: 320px;
}

.cierre-img-wrap {
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: 12px;
    overflow: hidden;
}

.cierre-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 992px) {
    /* Fondo verde oscuro exterior para la sección completa */
    .cierre-section {
        background: #0B2117 !important; 
        padding: 3rem 0 !important; 
    }

    /* Tarjeta interior en tono crema */
    .cierre-box {
        background: #FFF8F0 !important;
        padding: 2rem 1.2rem !important;
        border-radius: 16px;
    }

    .cierre-layout {
        flex-direction: column;
    }

    /* Volamos la imagen en móvil */
    .cierre-right {
        display: none !important; 
    }

    /* Alinear ítems en columna simple */
    .cierre-items {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    /* Diseño de cada tarjeta blanca */
    .cierre-item {
        flex-direction: row;
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 8px;
        padding: 1.2rem;
        text-align: left;
    }

    /* Íconos negros, alineados a la izquierda, sin fondo circular */
    .cierre-icon {
        margin-bottom: 0;
        margin-right: 1.2rem;
        background: transparent !important;
        color: #111 !important;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    /* Textos alineados a la izquierda dentro del wrap */
    .cierre-text-wrap {
        text-align: left;
    }

    .cierre-item-title {
        margin: 0 0 0.2rem 0;
        font-size: 0.95rem;
        color: #111;
    }

    .cierre-item-desc {
        font-size: 0.82rem;
        color: #555;
        margin: 0;
    }
}

/* ══════════════════════════════════════════════
   FORMULARIO LIGHT (SECCIÓN 11)
   ══════════════════════════════════════════════ */
.form-light .form-control {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #111 !important;
}

.form-light .form-control::placeholder {
    color: #888 !important;
}

.form-light label {
    color: #111 !important;
    font-weight: 600;
}

.form-light .form-check label {
    color: #555 !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE SECTION PROYECTO
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   RESPONSIVE SECTION PROYECTO
   ══════════════════════════════════════════════ */
.pt-responsive-proyecto {
    padding-top: 2rem !important; /* Asesinato del gap gigante blanco en móviles */
}
@media (min-width: 992px) {
    .pt-responsive-proyecto {
        padding-top: 2rem !important;
    }
}
@media (min-width: 1200px) {
    .pt-responsive-proyecto {
        padding-top: 3rem !important;
    }
}

/* ══════════════════════════════════════════════
   FOOTER RESPONSIVO (MOBILE TARGET)
   ══════════════════════════════════════════════ */

/* Ocultar botón por defecto en escritorio */
.btn-mobile-invest {
    display: none;
}

@media (max-width: 992px) {
    /* MATA EL SCROLL HORIZONTAL DE RAIZ SIN AFECTAR AL CONTAINER */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 1. Centrar marca y mostrar botón */
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .footer-brand .footer-brand-text {
        margin-bottom: 1.5rem;
    }

    .btn-mobile-invest {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: var(--clr-gold) !important;
        color: #111 !important;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.05rem;
        padding: 0.9rem 2rem;
        border-radius: 8px;
        width: 100%;
        max-width: 360px;
        text-decoration: none;
        margin: 20px auto 1.5rem auto;
        transition: transform 0.3s;
    }

    .footer-logo-img {
        height: 80px !important;
        max-width: 100%;
    }

    .btn-mobile-invest:hover {
        transform: translateY(-2px);
        background: #d4b55b !important;
    }

    /* 2. Volar enlaces de navegación en móvil */
    .footer-grid-5 .footer-col:nth-child(2),
    .footer-grid-5 .footer-col:nth-child(3) {
        display: none !important;
    }

    /* 3. Volar títulos de "Contacto" y "Síguenos" */
    .footer-col h4 {
        display: none !important;
    }

    /* 4. Alinear CONTACTO (WhatsApp, Correo, Dirección) con el padding solicitado */
    .footer-grid-5 .footer-col:nth-child(4) {
        padding: 0 40px !important;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center; /* Centra la caja entera */
    }

    .footer-grid-5 .footer-col:nth-child(4) ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Mantiene los iconos alineados a la izquierda entre sí */
        width: fit-content;
        margin: 0;
        gap: 0.8rem;
    }

    .footer-grid-5 .footer-col:nth-child(4) ul li {
        justify-content: flex-start;
        margin-bottom: 0 !important;
        width: 100%;
        word-break: break-word;
    }

    /* 5. Transformar diseño de Redes Sociales */
    .footer-grid-5 .footer-col:last-child {
        padding: 0 40px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-social {
        display: flex !important;
        justify-content: center !important;
        gap: 1.2rem !important;
        margin-top: 0.5rem !important;
        flex-wrap: wrap;
    }

    .footer-social .social-link {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        width: 46px !important;
        height: 46px !important;
        flex-shrink: 0;
    }

    .footer-social .social-link:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: #fff !important;
    }

    .footer-social .social-link svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* 6. Centrar copyright y políticas */
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.8rem;
        padding-top: 2rem !important;
        border-top-color: rgba(255, 255, 255, 0.1) !important;
        width: 100%;
    }
}



/* =========================================================
   CENTRAR FORMULARIO Y CALENDARIO EN MÓVIL (SECCIÓN 11)
   ========================================================= */
/* =========================================================
   CENTRAR FORMULARIO Y CALENDARIO EN MÓVIL (SECCIÓN 11)
   ========================================================= */
/* =========================================================
   CENTRAR FORMULARIO Y CALENDARIO EN MÓVIL (SECCIÓN 11)
   ========================================================= */
@media (max-width: 992px) {
    /* 1. Usamos GRID para manipular la estructura esquivando el HTML */
    #contacto .sec-label-v2 {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important; /* CORRECCIÓN: minmax evita que el texto estire la caja */
        gap: 0 1rem !important;
        width: 80% !important;
    }

    /* 2. MAGIA PURA: 'display: contents' anula por completo el maldito <div style="flex: 1;"> en línea. Lo desintegra visualmente. */
    #contacto .sec-label-v2 > div {
        display: contents !important;
    }

    /* 3. El contenedor del Título se va a la columna derecha, justo al lado del "11" */
    #contacto .sec-label-v2 > div > div:first-child {
        grid-column: 2 / 3 !important;
        margin-bottom: 0 !important;
        min-width: 0 !important; /* CORRECCIÓN: Obliga al texto a bajar de línea en vez de salirse de la pantalla */
    }

    /* 4. El formulario rompe la cuadrícula y toma el 100% del ancho debajo del 11 y el título */
    #contact-form {
        grid-column: 1 / -1 !important;
        margin-top: 2rem !important;
        width: 100% !important;
        min-width: 0 !important; /* CORRECCIÓN: Seguro antidésborde */
    }

    /* 5. Acomodamos las cajas de texto a 1 sola columna hacia abajo */
    #contacto .grid-2 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important; /* CORRECCIÓN: Obliga a los inputs a respetar el ancho de la pantalla */
        gap: 1.2rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 6. Matamos los paddings de escritorio y blindamos el ancho de los inputs */
    #contacto .form-left,
    #contacto .form-v2-left {
        padding: 2.5rem 1.2rem 1.5rem 1.2rem !important; /* Ajuste milimétrico lateral para respirar */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* ASESINO DEL SCROLL HORIZONTAL */
    }
    
    #contact-form .form-control,
    #contact-form select.form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

 /* =========================================================
       SOLO AFECTA AL CALENDARIO (LADO DERECHO)
       ========================================================= */
    #contacto .form-right,
    #contacto .form-v2-right {
        padding: 0 1rem 2.5rem 1rem !important; /* Quitamos exceso de padding lateral */
        width: 80% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }

    .calendar-card-v2 {
        width: 100% !important;
        max-width: 380px !important; /* Hace el trabajo de tu 'width: 350px' pero se achica solo si el celular es más angosto */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    /* 7. Botón gigante para móviles */
    #contact-form .btn-form-v2 {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =========================================================
   BLINDAJE DE PRUEBA SOCIAL 4 COLUMNAS EN MÓVIL
   ========================================================= */
/* Ocultar el bloque móvil en pantallas de escritorio por defecto */
.ps-mobile-wrapper {
    display: none;
}

@media (max-width: 992px) {
    /* Ocultamos el título de escritorio en móvil */
    .ps-desktop-title {
        display: none !important;
    }

    /* 1. Desactivamos por completo el bloque viejo de escritorio */
    .ps-desktop-grid {
        display: none !important;
    }

    /* 2. Activamos el contenedor exterior dándole el fondo verde corporativo */
    .ps-section-v2 {
        background: #0B2117 !important;
        padding: 2rem 0 !important;
    }

    /* 3. Mostramos la tarjeta interna crema solicitada */
    .ps-mobile-wrapper {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ps-mobile-box {
        background: #FFF8F0 !important;
        border-radius: 16px;
        padding: 1.5rem 0.6rem !important;
        border: 1px solid rgba(0,0,0,0.05);
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Forzamos la grilla estricta de 4 columnas */
    .ps-mobile-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ps-mobile-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        min-width: 0 !important; /* Blindaje anti-desborde */
    }

    /* 5. Estilos para los bloques blancos superiores */
    .ps-mobile-card {
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 8px !important;
        padding: 0.6rem 0.25rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 120px !important; /* Mantiene la simetría visual */
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .ps-m-icon {
        width: 18px !important;
        height: 18px !important;
        color: #111 !important;
        stroke-width: 1.5 !important;
        flex-shrink: 0 !important;
    }

    .ps-mobile-card p {
        font-size: 0.58rem !important; /* Tamaño calculado milimétricamente para pantallas de 360px */
        line-height: 1.25 !important;
        color: #333 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }

    /* 6. Ajuste perfecto de las imágenes cuadradas inferiores */
    .ps-mobile-col img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
    }
}


/* =========================================================
   CLONACIÓN EXACTA DEL HERO MÓVIL (MOCKUP FIGMA)
   ========================================================= */
/* Ocultamos la barra en escritorio */
.hero-mobile-bottom-bar {
    display: none;
}

@media (max-width: 992px) {
    /* 1. Ajustes del contenedor principal (Hero) */
    .hero-v2 {
        height: auto !important;
        min-height: 100vh !important;
        padding-bottom: 110px !important; /* Espacio exacto para la barra inferior */
    }
    
    .hero-inner-v2 {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding-top: 110px !important; /* Espacio para el navbar móvil */
        gap: 1.5rem !important;
    }

    /* 2. Textos alineados a la izquierda (Idéntico al mockup) */
    .hero-content-v2 {
        margin-top: 0 !important;
        width: 100% !important;
    }
    
    .hero-content-v2 h1 {
        font-size: 2.1rem !important;
        text-align: left !important;
        line-height: 1.15 !important;
        margin-bottom: 1.2rem !important;
    }

    .hero-desc-v2 {
        text-align: left !important;
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
    }

    /* 3. Botones apilados al 100% de ancho */
    .hero-actions-v2 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.8rem !important;
        display: flex !important;
    }

    .hero-actions-v2 .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 1rem !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .hero-actions-v2 .btn-primary {
        background: #C9A84C !important;
        color: #111 !important;
        border: none !important;
    }

    .hero-actions-v2 .btn-dark-green {
        background: #0B2117 !important;
        color: #C9A84C !important;
        border: 1px solid #C9A84C !important;
    }

    /* 4. Tarjeta de Video liberada al 100% ancho */
    .hero-video-card-v2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        transform: none !important;
        border: 1px solid rgba(201,168,76,0.4) !important;
    }
    
    .hero-video-card-v2 img {
        height: 220px !important;
    }
    
    .hero-video-card-v2 .video-card-text {
        text-align: left !important;
    }

    /* 5. Barra inferior fija en la base del Hero */
    .hero-mobile-bottom-bar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #0B2117 !important;
        padding: 1.2rem 0.2rem !important;
        z-index: 10 !important;
        border-top: 1px solid rgba(201,168,76,0.15) !important;
    }

    .hm-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
        border-right: 1px solid rgba(255,255,255,0.08) !important;
    }
    
    .hm-item:last-child {
        border-right: none !important;
    }

    .hm-item svg {
        width: 20px !important;
        height: 20px !important;
        color: #C9A84C !important;
    }

    .hm-item span {
        font-size: 0.65rem !important;
        color: #E0E0E0 !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }
}



/* =========================================================
   NUEVO BLOQUE: COMPARATIVO MÓVIL (SECCIÓN 08)
   ========================================================= */
.mobile-comparativo {
    display: none;
}

@media (max-width: 992px) {
    /* 1. Apagamos la tabla ancha original en móvil */
    .table-responsive {
        display: none !important;
    }

    /* 2. Encendemos el nuevo layout de 3 columnas */
    .mobile-comparativo {
        display: block !important;
        width: 100% !important;
    }

    .mobile-comp-box {
        background: #FFFAF0 !important; /* Fondo crema de tu mockup */
        border: 1px solid rgba(201,168,76,0.2) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
    }

    .mobile-comp-table {
        width: 100% !important;
        border-collapse: collapse !important;
        text-align: center !important;
    }

    .mobile-comp-table th, 
    .mobile-comp-table td {
        padding: 0.9rem 0.4rem !important;
        border-bottom: 1px solid rgba(201,168,76,0.15) !important;
        font-size: 0.75rem !important;
        color: #333 !important;
        vertical-align: middle !important;
        line-height: 1.3 !important;
    }

    .mobile-comp-table th {
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        color: #111 !important;
    }

    /* Quitamos el borde inferior a la última fila para que no choque con el border-radius */
    .mobile-comp-table tr:last-child td {
        border-bottom: none !important;
    }

    /* Alineación de la primera columna (Aspecto) */
    .mobile-comp-table th:first-child,
    .mobile-comp-table td:first-child {
        text-align: left !important;
        font-weight: 700 !important;
        padding-left: 1rem !important;
    }

    /* Columna dorada resaltada (Proyecto turístico-inmobiliario) */
.highlight-gold-mobile {
        background: rgba(201,168,76,0.15) !important; 
        font-weight: 700 !important;
        color: #111 !important;
    }
}

/* =========================================================
   BLINDAJE MÓVIL: SECCIÓN 03 (VALLE SAGRADO)
   ========================================================= */
.valle-mobile-wrapper {
    display: none;
}

@media (max-width: 992px) {
    /* Apagar el grid de escritorio para esta sección */
    .section-valle .cols-2 {
        display: none !important;
    }

    /* Mutar el fondo exterior a verde corporativo */
    .section-valle {
        background: #0B2117 !important;
        padding: 3rem 0 !important;
        margin-bottom: 0 !important; /* Resetea el margen negativo extraño del desktop */
    }

    /* Mostrar contenedor móvil */
    .valle-mobile-wrapper {
        display: block !important;
        width: 100%;
    }

    /* Tarjeta interior color crema idéntica al mockup */
    .valle-mobile-box {
        background: #FFF8F0 !important;
        border-radius: 16px;
        padding: 1.5rem 1.2rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ajuste de la imagen panorámica */
    .valle-m-img {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .valle-m-img img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

    /* Lista de checks */
    .valle-m-list {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .valle-m-item {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
    }

    /* Icono verde oscuro (Check circle) */
    .v-m-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0B2117;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 0.15rem; /* Alineación óptica con la primera línea de texto */
    }

    .v-m-icon svg {
        width: 100%;
        height: 100%;
    }

    /* Tipografía de la lista móvil */
    .valle-m-item p {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: #222;
        margin: 0;
        line-height: 1.4;
        font-weight: 500;
    }
}


/* =========================================================
   BLINDAJE MÓVIL: SECCIÓN 02 (EL PROBLEMA)
   ========================================================= */
.problema-mobile-wrapper {
    display: none;
}

@media (max-width: 992px) {
    /* Ocultar el bloque de escritorio completo */
    .problema-desktop-wrapper {
        display: none !important;
    }

    /* Fondo verde oscuro para encuadrar la tarjeta (según diseño) */
    .section-problema {
        background: #0B2117 !important;
        padding: 3rem 0 !important;
    }

    /* Activar el contenedor móvil */
    .problema-mobile-wrapper {
        display: block !important;
        width: 100%;
    }

    /* Tarjeta interior crema */
    .problema-mobile-box {
        background: #FFF8F0 !important;
        border-radius: 16px;
        padding: 1.5rem 1.2rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Formato Grid 2 Columnas x 2 Filas */
    .problema-m-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    /* Tarjeta individual blanca */
    .problema-m-item {
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 10px;
        padding: 1rem 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    }

    /* Contenedor del Icono a la izquierda */
    .pr-m-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
        flex-shrink: 0;
        width: 22px;
        height: 22px;
    }

    .pr-m-icon svg {
        width: 100%;
        height: 100%;
        stroke-width: 1.5;
    }

    /* Textos a la derecha */
    .pr-m-text {
        text-align: left;
        min-width: 0;
    }

    .pr-m-text h5 {
        font-family: var(--font-heading);
        font-size: 0.72rem;
        font-weight: 700;
        color: #111;
        margin: 0 0 0.15rem 0;
        line-height: 1.15;
    }

    .pr-m-text p {
        font-size: 0.65rem;
        color: #666;
        margin: 0;
        line-height: 1.2;
    }
}
/* =========================================================
   BLINDAJE MÓVIL: SECCIÓN 01 VIDEO AUTORIDAD (70/30 GRID)
   ========================================================= */

/* Apagar nodos móviles en el render de escritorio */
.desc-mobile, .btn-mobile-video, .img-mobile {
    display: none !important;
}

@media (max-width: 992px) {
    /* 1. Inyección de contenedor tipo tarjeta y Grid 70/30 */
    .section-autoridad .cols-autoridad {
        display: grid !important;
        grid-template-columns: 65% 35% !important; /* Proporción balanceada para absorción de padding */
        gap: 0.8rem !important;
        align-items: center !important;
        background: #FFFdf8 !important; /* Emula el bg-cream */
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 12px !important;
        padding: 1.2rem !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    }

    /* 2. Toggle de visibilidad para inyectar copys móviles */
    .desc-desktop, .btn-desktop, .img-desktop, .label-desktop {
        display: none !important;
    }
    
    .desc-mobile {
        display: block !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        color: #555 !important;
        margin: 0 0 0.8rem 0 !important;
    }

    /* 3. Comportamiento estricto: Imagen 1:1 forzada */
    .img-mobile {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* 4. Estabilización de la columna izquierda (Textos) */
    .section-autoridad .content-left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important; /* Previene desbordamiento del grid */
    }

    .section-autoridad .sec-label-v2.label-autoridad {
        margin-bottom: 0.4rem !important;
    }

    .section-autoridad .label-autoridad .lbl-small {
        font-size: 0.95rem !important;
    }

    /* 5. Reset estilístico para el Botón "Ver video" móvil */
    .btn-mobile-video {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #C9A84C !important;
        color: #111 !important;
        font-family: var(--font-heading) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        padding: 0.5rem 0.8rem !important;
        border-radius: 6px !important;
        width: fit-content !important;
        border: none !important;
        margin: 0 !important;
    }

    /* 6. Enrutamiento de la columna derecha */
    .section-autoridad .content-right {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .section-autoridad .autoridad-video.wide-video {
        aspect-ratio: 1 / 1 !important; /* Destruye el aspect-ratio horizontal de escritorio */
        height: auto !important;
        width: 100% !important;
        border-radius: 8px !important;
    }

    /* 7. Re-escalado del botón Play para que no contamine la vista cuadrada */
    .section-autoridad .play-btn-v2.outline-play {
        width: 36px !important;
        height: 36px !important;
        border-width: 1.5px !important;
    }
    
    .section-autoridad .play-btn-v2.outline-play svg {
        width: 16px !important;
        height: 16px !important;
        margin-left: 2px !important;
    }
}

/* ============================================================
   CUSTOM SCROLL OFFSET & PREMIUM FAQ ACCORDION STYLES
   ============================================================ */

/* ── Scroll Margin for Sticky Header ── */
section[id], header[id] {
    scroll-margin-top: 100px;
}
@media (max-width: 992px) {
    section[id], header[id] {
        scroll-margin-top: 80px;
    }
}

/* ── FAQ Section Background ── */
.faq-section {
    background-color: #fdfbf7 !important; /* Cream light color */
}

/* ── FAQ Accordion Wrapper ── */
.faq-accordion-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── FAQ Accordion Items ── */
.faq-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.1);
    border-color: rgba(201, 168, 76, 0.25);
    transform: translateY(-2px);
}

.faq-item.active {
    border-color: rgba(201, 168, 76, 0.45);
    box-shadow: 0 12px 30px rgba(11, 33, 23, 0.08);
}

/* ── FAQ Question Header Button ── */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 1.4rem 1.6rem;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.faq-question span:first-child {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: #111111;
    transition: color 0.3s ease;
    padding-right: 1.5rem;
    line-height: 1.4;
}

.faq-item:hover .faq-question span:first-child {
    color: var(--clr-gold-dark);
}

.faq-item.active .faq-question span:first-child {
    color: #0b2117;
}

/* ── FAQ Dynamic Icon ── */
.faq-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdfbf7;
    border: 1px solid rgba(201, 168, 76, 0.35);
    align-items: center;
    justify-content: center;
    color: var(--clr-gold);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
}

.faq-item.active .faq-icon {
    background: var(--clr-accent-green) !important;
    color: #ffffff !important;
    border-color: var(--clr-accent-green) !important;
}

/* ── FAQ Answer Drawer ── */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 1.6rem;
}

.faq-answer p {
    color: #4a4a4a;
    font-size: 0.96rem;
    line-height: 1.65;
    padding-bottom: 1.4rem;
    margin: 0;
}

/* ============================================================
   PREMIUM SUBMIT BUTTON ATTENTION NUDGE ANIMATION
   ============================================================ */

@keyframes btnPremiumNudge {
    0% {
        transform: scale(1) rotate(0deg);
    }
    /* First brief wiggle nudge */
    4% {
        transform: scale(1.05) rotate(-2deg);
    }
    8% {
        transform: scale(1.05) rotate(2deg);
    }
    12% {
        transform: scale(1.05) rotate(-1.5deg);
    }
    16% {
        transform: scale(1.05) rotate(1.5deg);
    }
    20% {
        transform: scale(1.02) rotate(0deg);
    }
    /* Pulse glow aura peaks at 25% */
    25% {
        box-shadow: 0 12px 30px rgba(201, 168, 76, 0.65), 0 0 0 8px rgba(201, 168, 76, 0.25);
    }
    30% {
        box-shadow: 0 6px 15px rgba(201, 168, 76, 0.3), 0 0 0 0px rgba(201, 168, 76, 0);
    }
    /* Rest period for professional aesthetic (no continuous hyper-wiggle) */
    40%, 100% {
        transform: scale(1) rotate(0deg);
    }
}

.btn-attention-nudge {
    animation: btnPremiumNudge 3.2s infinite ease-in-out !important;
    position: relative !important;
    background: linear-gradient(135deg, #d4b256, #b08d3f) !important;
    border-color: #d4b256 !important;
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4) !important;
    transition: all 0.3s ease !important;
}

/* Subtle glowing aura indicator behind the button */
.btn-attention-nudge::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: inherit;
    border: 2px solid rgba(201, 168, 76, 0.5);
    pointer-events: none;
    animation: btnAuraPulse 3.2s infinite ease-in-out;
    opacity: 0;
}

@keyframes btnAuraPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        transform: scale(1.02);
        opacity: 0.8;
    }
    35% {
        transform: scale(1.06);
        opacity: 0;
    }
}

/* ============================================================
   MOBILE "INVERTIR" HEADER BUTTON STYLES
   ============================================================ */
.btn-invertir-mobile {
    display: none;
}

@media (max-width: 992px) {
    .btn-invertir-mobile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #c9a84c, #b08d3f) !important;
        color: #0b2117 !important;
        font-family: var(--font-heading), 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.82rem !important;
        padding: 0.5rem 1.1rem !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(201, 168, 76, 0.35) !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        letter-spacing: 0.03em !important;
        text-transform: none !important;
        cursor: pointer !important;
    }
    
    .btn-invertir-mobile:hover,
    .btn-invertir-mobile:active {
        background: linear-gradient(135deg, #d4b256, #c9a84c) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(201, 168, 76, 0.5) !important;
        color: #0b2117 !important;
    }

    .nav-hamburger {
        margin-left: auto !important;
        margin-right: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .nav-logo-img {
        height: 50px !important;
    }
    .btn-invertir-mobile {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================================
   CALENDAR CARD HEADER V2 REBRANDING
   ============================================================ */
.cal-header-custom-v2 {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0;
    width: 100%;
}

.cal-header-icon-v2 {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.12) !important;
    border: 1.5px solid rgba(201, 168, 76, 0.35) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a84c !important; /* Gold */
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.cal-header-icon-v2 svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.cal-header-text-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
}

.cal-title-v2 {
    font-family: var(--font-heading), 'Playfair Display', serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0b2117 !important; /* Dark green brand color */
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

.cal-sub-v2 {
    font-family: var(--font-body), sans-serif !important;
    font-size: 0.95rem !important;
    color: #555 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Adjustments in mobile view for calendar card and headers */
@media (max-width: 992px) {
    .calendar-card-v2 {
        padding: 1.5rem 1.2rem !important;
    }
    
    .cal-header-custom-v2 {
        gap: 0.8rem;
        margin-bottom: 1.2rem;
    }
    
    .cal-header-icon-v2 {
        width: 40px;
        height: 40px;
    }
    
    .cal-header-icon-v2 svg {
        width: 18px;
        height: 18px;
    }
    
    .cal-title-v2 {
        font-size: 1.05rem !important;
    }
    
    .cal-sub-v2 {
        font-size: 0.78rem !important;
    }
}

/* ============================================================
   RESPONSIVE VIDEO MODAL OPTIMIZATION
   ============================================================ */
@media (max-width: 768px) {
    .video-modal-footer {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 1.1rem !important;
        padding: 1.25rem 1.2rem !important;
        background: rgba(255, 255, 255, 0.01) !important;
        border-top: 1px solid rgba(201, 168, 76, 0.12) !important;
    }
    
    .video-modal-msg {
        max-width: 100% !important;
        text-align: center !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        color: #b3c5bb !important; /* Muted brand silver-sage */
    }
    
    .video-modal-cta {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        padding: 0.85rem 1.5rem !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}



/* -- MEDIOS CAROUSEL -- */
.medios-carousel-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding: 2rem 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.medios-carousel-wrapper::-webkit-scrollbar {
    display: none;
}
.medios-carousel-wrapper::before,
.medios-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.medios-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.medios-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.medios-carousel-track {
    display: inline-flex;
    align-items: center;
    width: max-content;
}
.medio-item {
    width: 180px;
    padding: 0 1.5rem 35px 1.5rem;
    cursor: pointer;
    transition: transform 0.3s;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: center;
}
.medio-item::after {
    content: 'Ver publicación';
    position: absolute;
    bottom: 5px;
    color: var(--clr-gold, #C9A84C);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    transform: translateY(-8px);
    white-space: nowrap;
    z-index: 10;
}
.medio-item:hover::after,
.medio-item.active-touch::after {
    opacity: 1;
    transform: translateY(0);
}
.medio-item img {
    width: 100%;
    height: auto;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
}
.medio-item:hover,
.medio-item.active-touch {
    transform: scale(1.05);
}
.medio-item:hover img,
.medio-item.active-touch img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 768px) {
    .medios-carousel-wrapper::before,
    .medios-carousel-wrapper::after {
        width: 60px;
    }
    .medio-item {
        width: 130px;
        padding: 0 1rem 35px 1rem;
    }
}

/* -- MODAL PUBLICACION MEDIOS -- */
.pub-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.pub-modal.active {
    opacity: 1;
    visibility: visible;
}
.pub-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}
.pub-modal-content {
    position: relative;
    z-index: 10000;
    background: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pub-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}
.pub-modal-close:hover {
    background: var(--clr-gold, #C9A84C);
}
.pub-modal-scroll-area {
    width: 100%;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}
.pub-modal-scroll-area img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* -- COUNTDOWN Y PROGRESO (LANZAMIENTO OFICIAL) -- */
.countdown-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    width: 70px;
    height: 70px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.cd-box span {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
}
.cd-box small {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
}
.cd-sep {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-gold, #C9A84C);
    margin: 0 0.2rem;
    line-height: 1;
}

@media (max-width: 400px) {
    .countdown-wrapper {
        gap: 0.2rem;
    }
    .cd-box {
        width: 55px;
        height: 55px;
    }
    .cd-box span {
        font-size: 1.3rem;
    }
    .cd-box small {
        font-size: 0.55rem;
    }
    .cd-sep {
        font-size: 1.5rem;
        margin: 0 0.1rem;
    }
}

@media (max-width: 576px) {
    .cd-box {
        width: 60px;
        height: 60px;
    }
    .cd-box span {
        font-size: 1.5rem;
    }
    .cd-box small {
        font-size: 0.6rem;
    }
    .cd-sep {
        font-size: 1.5rem;
        margin: 0;
    }
}