/* ============================================================
   RESPONSIVE.CSS
   Este archivo SOLO contiene reglas responsive (media queries).
   Las reglas base viven en styles.css.
   IMPORTANTE: este archivo debe cargarse DESPUÉS de styles.css
   en el <head>, o los media queries no van a poder pisar la base.
   ============================================================ */

/* ------------------------------------------------------------
   Safety net global: ningún media/imagen debe desbordar su
   contenedor en ningún ancho de pantalla.
   ------------------------------------------------------------ */
img,
video {
    max-width: 100%;
}

/* ============================================================
   RESPONSIVE — Desktop grande / Laptop (≤1440px)
   Suaviza la transición antes de que empiece el breakpoint 1200px:
   el padding-right:800px del título en styles.css aprieta demasiado
   el texto en laptops de 1280–1440px.
   ============================================================ */
@media (max-width: 1440px) {
    .titulo-principal {
        padding-right: 600px;
    }

    .hero-subtitle {
        padding-right: 45%;
    }
}

/* ============================================================
   RESPONSIVE — Laptop pequeña / Tablet horizontal (≤1200px)
   ============================================================ */
@media (max-width: 1200px) {
    .titulo-principal {
        font-size: 3.2rem;
        padding-right: 400px;
        width: 90%;
    }

    .titulo-destacado {
        font-size: 4.5rem;
    }

    .hero-subtitle {
        font-size: 1.6rem;
        padding-right: 40%;
    }

    .secondary-content {
        padding-right: 45%;
    }

    .secondary-content h2 {
        font-size: 3.5rem;
    }

    .secondary-img {
        width: 500px;
        height: 500px;
        top: 28%;
        left: 60%;
    }

    .terciary-title h2,
    .fourth-title h2 {
        font-size: 3.5rem;
    }

    .terciary-title p,
    .fourth-title p {
        font-size: 1.5rem;
    }

    .primary-content1 h2 {
        font-size: 2.8rem;
    }

    .card-title {
        font-size: 20px;
    }

    .panel-body {
        max-width: 560px;
    }
}

/* ============================================================
   RESPONSIVE — Tablet / Laptop pequeña (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .titulo-principal {
        font-size: 2.8rem;
        padding-right: 200px;
        width: 100%;
    }

    .titulo-destacado {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
        padding-right: 25%;
    }

    .primary {
        height: auto;
        padding: 5% 5% 8%;
    }

    .primary-content {
        flex-direction: column;
        height: auto;
        gap: 24px;
    }

    .primary-content1,
    .primary-content2 {
        width: 100%;
        height: auto;
    }

    .primary-content1 h2 {
        font-size: 2.4rem;
    }

    .primary-content2 p {
        font-size: 1.2rem;
    }

    .primary-images {
        height: 340px;
        margin-top: 32px;
    }

    .primary-grid {
        gap: 16px;
    }

    .secondary {
        height: auto;
        min-height: 100vh;
    }

    .secondary-content {
        padding-right: 42%;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .secondary-content h2 {
        font-size: 3rem;
    }

    .secondary-content p {
        font-size: 1.5rem;
    }

    .secondary-img {
        width: 420px;
        height: 420px;
        top: 20%;
        left: 55%;
    }

    .secondary-deco {
        left: 50%;
        top: 12%;
        width: 220px;
        height: 220px;
    }

    .terciary-content {
        flex-direction: column;
        padding: 4% 4% 2%;
    }

    .terciary-title {
        margin-bottom: 40px;
        padding-right: 0;
    }

    .terciary-title h2 {
        font-size: 3rem;
    }

    .terciary-title p {
        font-size: 1.3rem;
    }

    .terciary-title a {
        width: 60%;
    }

    .fourth-title {
        padding-right: 10%;
    }

    .fourth-title h2 {
        font-size: 3rem;
    }

    .fourth-title p {
        font-size: 1.3rem;
    }

    .fourth-title a {
        width: 60%;
    }

    .emprendedores-grid,
    #home-emprendedores-recientes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .emprendedor-card {
        width: 100%;
    }

    .benefit-card-media {
        height: 340px;
    }

    .deco-main1,
    .deco-main2 {
        width: 320px;
        height: 320px;
    }

    .deco-main4 {
        width: 320px;
        height: 320px;
    }

    .deco-main5 {
        width: 500px;
        height: 500px;
    }

    .ft-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Bienestar / deck de cards: bajamos altura y aflojamos padding,
       todavía en formato fila horizontal */
    .stage {
        height: auto;
        min-height: 100vh;
        padding: 5vh 4vw;
    }

    .card-panel {
        padding: 5vh 5vw;
    }
}

/* ============================================================
   RESPONSIVE — Tablet vertical / Mobile grande (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    h1 {
        font-size: 2.4rem;
    }

    .hero-section {
        height: auto;
        min-height: 100svh;
        background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 100%),
            url(/assets/images/hero-bg-1.webp);
        background-size: cover;
        background-position: center top;
        padding-bottom: 0;
    }

    .hero-title {
        height: auto;
        padding: 32px 20px 24px;
        gap: 16px;
    }

    .hero-title img {
        width: 140px;
    }

    .titulo-principal {
        font-size: 2rem;
        padding-right: 0;
        width: 100%;
        padding-bottom: 14px;
    }

    .titulo-destacado {
        font-size: 2.8rem;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        padding-right: 0;
    }

    .hero-bottom {
        flex-direction: column;
        height: auto;
        padding: 0;
        gap: 0;
    }

    .hero-bottom-card {
        border-right: none;
        border-bottom: 1px solid #00364b;
    }

    .hero-bottom-card:last-child {
        border-bottom: none;
    }

    .hero-bottom-card a {
        padding: 18px 20px;
        justify-content: flex-start;
        gap: 16px;
    }

    .hero-bottom-card i {
        font-size: 1.4rem;
        width: 32px;
        text-align: center;
    }

    .hero-bottom-card p {
        font-size: 1rem;
    }

    .primary {
        height: auto;
        padding: 40px 20px 56px;
    }

    .primary-content {
        flex-direction: column;
        gap: 16px;
    }

    .primary-content1 h2 {
        font-size: 1.8rem;
    }

    .primary-content2 p {
        font-size: 1rem;
    }

    .primary-images {
        height: 280px;
        margin-top: 24px;
    }

    .primary-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 10px;
    }

    .primary1,
    .primary2,
    .primary3,
    .primary4 {
        grid-column: span 1;
        grid-row: span 1;
        grid-column-start: auto;
    }

    .deco {
        display: none;
    }

    .secondary {
        height: auto;
        min-height: unset;
    }

    .secondary-img {
        position: relative;
        width: 100%;
        height: 280px;
        top: unset;
        left: unset;
        clip-path: none;
        flex-direction: row;
        border-radius: 16px;
        overflow: hidden;
        margin: 0 20px;
    }

    .secondary-img video {
        width: 50%;
        height: 100%;
        object-fit: cover;
    }

    .secondary-deco {
        display: none;
    }

    .secondary-content {
        position: relative;
        padding: 40px 20px;
        padding-right: 20px;
        gap: 16px;
    }

    .secondary-content h2 {
        font-size: 2rem;
    }

    .secondary-content span {
        font-size: 1.2rem;
    }

    .secondary-content p {
        font-size: 1.2rem;
    }

    .secondary-content a {
        width: 100%;
        height: 48px;
    }

    .deco-main1,
    .deco-main2 {
        display: none;
    }

    .terciary-content {
        flex-direction: column;
        padding: 40px 20px 0;
    }

    .terciary-title {
        gap: 20px;
        margin-bottom: 32px;
    }

    .terciary-title h2 {
        font-size: 2rem;
    }

    .terciary-title p {
        font-size: 1.1rem;
    }

    .terciary-title a {
        width: 100%;
        height: 48px;
    }

    .benefit-card {
        flex: 0 0 min(300px, 80vw);
    }

    .benefit-card-media {
        height: 280px;
    }

    .fourth-content {
        padding: 40px 20px 56px;
    }

    .fourth-title {
        padding-right: 0;
        margin-bottom: 40px;
        gap: 16px;
    }

    .fourth-title h2 {
        font-size: 2rem;
    }

    .fourth-title p {
        font-size: 1.1rem;
    }

    .fourth-title a {
        width: 100%;
        height: 48px;
    }

    .emprendedores-grid,
    #home-emprendedores-recientes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .deco-main4,
    .deco-main5 {
        display: none;
    }

    .ft-root {
        padding: 2.5rem 20px 1.5rem;
    }

    .ft-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ft-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .benefits-scroll::-webkit-scrollbar {
        height: 6px;
    }

    .hero-bottom-card.active-section a {
        background-color: #10b981;
    }

    .hero-bottom-card.active-section a i,
    .hero-bottom-card.active-section a p {
        color: #fff;
    }

    /* --------------------------------------------------------
       Bienestar (.stage / .deck / .card): en 5 columnas
       angostas el título se corta. Pasamos a lista vertical
       tipo acordeón: cada card es una franja, al tocarla se
       expande hacia abajo y las demás quedan colapsadas arriba.
       -------------------------------------------------------- */
    .stage {
        height: auto;
        min-height: unset;
        padding: 32px 16px;
    }

    .deck {
        flex-direction: column;
        height: auto;
        max-height: none;
        gap: 10px;
    }

    .card {
        flex: none;
        width: 100%;
        height: 78px;
        border-radius: 14px;
        transition: height 0.45s cubic-bezier(.22, .61, .36, 1);
    }

    .deck.has-expanded .card {
        flex: none;
        height: 60px;
    }

    .deck.has-expanded .card.expanded {
        height: 70vh;
    }

    .card-face {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 20px;
    }

    .card-number {
        font-size: 13px;
    }

    .card-title {
        font-size: 15px;
    }

    .card-panel {
        padding: 28px 20px;
    }

    .panel-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 3vh;
    }

    .panel-title {
        font-size: clamp(24px, 6vw, 34px);
    }

    .close-btn {
        align-self: flex-end;
    }

    .panel-body {
        max-width: 100%;
    }

    .panel-body p {
        font-size: 15px;
    }
}

/* ============================================================
   RESPONSIVE — Mobile pequeño (≤480px)
   ============================================================ */
@media (max-width: 480px) {
    .titulo-principal {
        font-size: 1.6rem;
    }

    .titulo-destacado {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-title img {
        width: 110px;
    }

    .primary-content1 h2 {
        font-size: 1.5rem;
    }

    .secondary-content h2 {
        font-size: 1.6rem;
    }

    .terciary-title h2,
    .fourth-title h2 {
        font-size: 1.6rem;
    }

    .primary-images {
        height: 200px;
    }

    .secondary-img {
        height: 200px;
        margin: 0 12px;
    }

    .benefit-card-media {
        height: 220px;
    }

    .benefit-card {
        flex: 0 0 min(260px, 85vw);
    }

    .hero-bottom-card a {
        padding: 14px 16px;
        gap: 12px;
    }

    .hero-bottom-card i {
        font-size: 1.2rem;
        width: 28px;
    }

    .hero-bottom-card p {
        font-size: 0.9rem;
    }

    .secondary-content a,
    .terciary-title a,
    .fourth-title a {
        height: 44px;
        font-size: 0.9rem;
    }

    .ft-root {
        padding: 2rem 16px 1.2rem;
    }

    .ft-desc {
        font-size: 0.82rem;
    }

    /* Bienestar en mobile pequeño: franjas aún más compactas */
    .card {
        height: 68px;
    }

    .deck.has-expanded .card {
        height: 52px;
    }

    .deck.has-expanded .card.expanded {
        height: 76vh;
    }

    .card-title {
        font-size: 13px;
    }

    .panel-eyebrow {
        font-size: 12px;
    }

    .panel-title {
        font-size: clamp(20px, 7vw, 28px);
    }

    .panel-body p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ============================================================
   RESPONSIVE — Mobile muy pequeño (≤360px)
   ============================================================ */
@media (max-width: 360px) {
    .titulo-principal {
        font-size: 1.3rem;
    }

    .titulo-destacado {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .primary-content1 h2 {
        font-size: 1.2rem;
    }

    .primary-images {
        height: 160px;
    }

    .primary-grid {
        gap: 6px;
    }

    .secondary-img {
        height: 160px;
    }

    .benefit-card-media {
        height: 180px;
    }

    .benefit-card {
        flex: 0 0 min(220px, 88vw);
    }

    .hero-bottom-card a {
        padding: 12px 14px;
        gap: 10px;
    }

    .hero-bottom-card i {
        font-size: 1rem;
        width: 24px;
    }

    .hero-bottom-card p {
        font-size: 0.8rem;
    }

    .card {
        height: 60px;
    }

    .deck.has-expanded .card.expanded {
        height: 80vh;
    }

    .card-face {
        padding: 0 14px;
        gap: 10px;
    }

    .card-title {
        font-size: 12px;
    }
}