/* ============================================================
   PROPUESTAS — Albert Arenas Yabar | Cusco 2026
   public/css/propuestas.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

.propuestas-page {
    --prop-overlap: clamp(72px, 11vw, 160px);
    width: 100%;
    background: #F2F2F2;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* ============================================================
   INTRO: hero + tarjetas superpuestas (solo tablet/desktop)
   ============================================================ */
.propuestas-intro {
    position: relative;
    width: 100%;
}

/* ============================================================
   HERO — clases propias (evita conflicto con .hero global)
   ============================================================ */
.propuestas-hero {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
    min-height: auto;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .propuestas-hero {
        flex-direction: row;
        min-height: clamp(320px, 42vw, 440px);
        overflow: visible;
        padding-bottom: var(--prop-overlap);
    }
}

/* ── Columna izquierda: título ── */
.propuestas-hero__izq {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 4vw, 32px) clamp(16px, 5vw, 52px);
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}

@media (min-width: 768px) {
    .propuestas-hero__izq {
        width: 38%;
        max-width: 480px;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 16px;
    }
}

.propuestas-hero__titulo {
    color: #D50000;
    font-size: clamp(1.75rem, 5.5vw, 3.4rem);
    font-weight: 900;
    margin: 0;
    line-height: 1;
    letter-spacing: -1px;
}

.propuestas-hero__subtitulo {
    color: #D50000;
    font-size: clamp(0.95rem, 2.5vw, 1.45rem);
    font-weight: 800;
    margin: 12px 0 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .propuestas-hero__subtitulo {
        margin-left: clamp(16px, 3vw, 32px);
    }
}

/* ── Columna derecha: imagen ── */
.propuestas-hero__der {
    flex: 1;
    position: relative;
    min-height: clamp(180px, 38vw, 360px);
    display: flex;
    align-items: stretch;
}

@media (min-width: 768px) {
    .propuestas-hero__der {
        padding-left: clamp(20px, 3vw, 36px);
        min-height: clamp(280px, 36vw, 440px);
    }
}

.propuestas-hero__img-wrap {
    width: 100%;
    height: 100%;
    min-height: inherit;
    border-top-left-radius: clamp(48px, 12vw, 280px);
    border-bottom-left-radius: clamp(48px, 12vw, 280px);
    box-shadow: clamp(-16px, -2.5vw, -32px) 0 0 0 #D50000;
    overflow: hidden;
    position: relative;
}

.propuestas-hero__img-wrap img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}

.propuestas-hero__franja {
    position: absolute;
    bottom: -10px;
    right: -8px;
    width: clamp(120px, 22vw, 240px);
    height: clamp(34px, 6vw, 62px);
    background: #D50000;
    transform: rotate(-7deg);
    transform-origin: right bottom;
    z-index: 10;
    pointer-events: none;
}

/* ============================================================
   TARJETAS
   ============================================================ */
.tarjetas-contenedor {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2.5vw, 20px);
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(16px, 3vw, 24px) clamp(16px, 4vw, 40px) clamp(32px, 6vw, 60px);
    position: relative;
    z-index: 30;
}

@media (min-width: 600px) {
    .tarjetas-contenedor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tarjetas-contenedor {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Superposición controlada sobre el hero (tablet/desktop) */
@media (min-width: 768px) {
    .propuestas-intro .tarjetas-contenedor {
        margin-top: calc(-1 * var(--prop-overlap));
    }
}

/* Variante inicio: sin superposición */
.tarjetas-contenedor--inicio {
    margin-top: 0;
    padding-top: 1rem;
    z-index: auto;
}

/* ── Tarjeta ── */
.tarjeta {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 50%, #F5F5F5 100%);
    border-radius: 14px;
    padding: clamp(16px, 3vw, 22px) clamp(14px, 2.5vw, 18px);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        2px 2px 0 rgba(0,0,0,0.06),
        4px 4px 0 rgba(0,0,0,0.08),
        6px 6px 0 rgba(0,0,0,0.08),
        8px 8px 0 rgba(130, 130, 130, 0.10),
        10px 10px 0 rgba(130, 130, 130, 0.12),
        12px 12px 0 rgba(130, 130, 130, 0.08),
        0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.tarjeta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
    border-radius: 14px 14px 0 0;
}

.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.08),
        4px 4px 0 rgba(0,0,0,0.10),
        6px 6px 0 rgba(0,0,0,0.10),
        8px 8px 0 rgba(0,0,0,0.10),
        10px 10px 0 rgba(130, 130, 130, 0.15),
        12px 12px 0 rgba(130, 130, 130, 0.15),
        14px 14px 0 rgba(130, 130, 130, 0.12),
        0 24px 48px rgba(0,0,0,0.12);
}

.tarjeta-head {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    margin-bottom: 10px;
    min-width: 0;
}

.tarjeta-icono {
    width: clamp(46px, 10vw, 54px);
    height: clamp(46px, 10vw, 54px);
    border-radius: 50%;
    background: #F5F5F5;
    border: 2px solid #E8EEF4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.tarjeta-icono img {
    width: clamp(26px, 6vw, 32px);
    height: clamp(26px, 6vw, 32px);
    object-fit: contain;
}

.tarjeta-icono i {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    color: #D50000;
}

.tarjeta-titulos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tarjeta-titulos span {
    color: #111111;
    font-size: clamp(0.88rem, 2.2vw, 0.98rem);
    font-weight: 800;
    line-height: 1.25;
    word-wrap: break-word;
}

.tarjeta-slogan {
    color: #111111;
    font-size: clamp(0.78rem, 2vw, 0.82rem);
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
    line-height: 1.3;
}

.tarjeta-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tarjeta-lista li {
    color: #666666;
    font-size: clamp(0.78rem, 2vw, 0.82rem);
    line-height: 1.45;
    font-weight: 400;
}

/* ============================================================
   MÓVIL
   ============================================================ */
@media (max-width: 767px) {
    .propuestas-hero {
        flex-direction: column;
    }

    .propuestas-hero__izq {
        text-align: center;
        order: 2;
    }

    .propuestas-hero__subtitulo {
        margin-left: 0;
    }

    .propuestas-hero__der {
        order: 1;
        min-height: clamp(200px, 52vw, 280px);
    }

    .propuestas-hero__img-wrap {
        border-radius: 0;
        box-shadow: none;
    }

    .propuestas-hero__franja {
        width: 130px;
        height: 38px;
    }

    .propuestas-intro .tarjetas-contenedor {
        margin-top: 0;
        padding-top: clamp(12px, 3vw, 20px);
    }
}