/* ============================================================
   PORTAFOLIO.CSS - DESBLOQUEO DE SCROLL Y FLUJO LIBRE
   ============================================================ */

/* 1. DESBLOQUEO MAESTRO */
html, body {
    /* Permitimos que el navegador use el scroll normal */
    overflow-y: auto !important; 
    height: auto !important;
}

#portafolio-manifesto {
    padding-top: 140px !important; 
    padding-bottom: 100px;
    /* CAMBIO VITAL: Permitimos que la sección crezca según el texto */
    height: auto !important; 
    min-height: 100vh; 
    background-color: #ffffff;
    width: 100%;
    display: block;
    /* Quitamos el bloqueo de visión */
    overflow: visible !important; 
}

.container-master {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

/* 2. BLOQUE DE INTRODUCCIÓN */
.manifesto-intro {
    margin-bottom: 30px !important;
}

.manifesto-intro h1 {
    font-family: 'Mulish', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 20px !important;
}

.highlight-statement {
    font-family: 'Mulish', sans-serif;
    font-size: 1.2rem;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}

/* 3. ESQUEMA CENTRAL (TIMELINE) */
.specialties-timeline {
    position: relative;
    margin-top: 40px !important;
    padding: 20px 0;
}

/* La línea vertical maestra de 1px */
.specialties-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #000;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-row {
    display: flex;
    align-items: center;
    min-height: 180px;
    position: relative;
    z-index: 2;
}

/* Seleccionamos la imagen del segundo bloque (Medicina Estética) */
.timeline-row:nth-child(2) .t-img img {
    /* Quitamos la rotación anterior */
    transform: rotate(90deg) !important; 
    
    /* Ajustamos el ancho para que luzca imponente horizontalmente */
    max-width: 400px !important; 
    max-height: 200px;
    width: auto;
    height: auto;
    
    /* Aseguramos que esté centrada en su espacio */
    object-fit: contain;
}

.t-img {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 60px;
}

.t-img img {
    max-height: 140px;
    width: auto;
}

.syringe-fix {
    transform: rotate(-45deg);
}

.t-connector {
    width: 40px;
    display: flex;
    justify-content: center;
}

.t-dot {
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #fff; 
}

.t-info {
    flex: 1;
    text-align: left;
    padding-left: 60px;
}

.t-info h3 {
    font-family: 'Mulish', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.t-info p {
    font-family: 'Mulish', sans-serif;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    max-width: 350px;
}

/* 4. BLOQUE DE FILOSOFÍA FINAL */
.manifesto-footer {
    max-width: 800px;
    margin: 80px auto 0;
    padding-top: 60px;
    border-top: 1px solid #eee;
    text-align: center;
}

.manifesto-footer p {
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

/* ============================================================
   SOLUCIÓN MAESTRA MÓVIL - PORTAFOLIO.CSS (CASAPIEL)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. HEADER MÓVIL LIMPIO Y CENTRADO */
    #main-header {
        height: 65px !important;
    }
    .shop-dropdown {
        display: none !important; /* Oculta "Comprar productos" en celular */
    }
    .nav-left { flex: 1 !important; justify-content: flex-start !important; }
    .nav-center { flex: 3 !important; justify-content: center !important; }
    .nav-right { flex: 1 !important; justify-content: flex-end !important; }
    .main-logo { height: 32px !important; }

    /* 2. INTRODUCCIÓN DEL MANIFIESTO (CAPTURA 1) */
    #portafolio-manifesto {
        padding-top: 85px !important;
        padding-bottom: 60px !important;
    }
    .container-master {
        width: 92% !important;
    }
    .manifesto-intro h1 {
        font-size: 1.15rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }
    .highlight-statement {
        font-size: 0.95rem !important;
        letter-spacing: 1px !important;
        line-height: 1.4 !important;
    }

    /* 3. ESQUEMA DE ESPECIALIDADES EN CELULAR (CAPTURA 2) */
    /* Ocultamos la línea vertical de 1px que cortaba la pantalla */
    .specialties-timeline::before {
        display: none !important;
    }

    /* Cada fila pasa de horizontal a VERTICAL */
    .timeline-row {
        flex-direction: column !important;
        min-height: auto !important;
        margin-bottom: 45px !important;
        padding-bottom: 25px !important;
        border-bottom: 1px solid #f2f2f2 !important; /* Línea divisoria sutil entre especialidades */
        text-align: center !important;
    }

    /* Última fila sin borde inferior */
    .timeline-row:last-child {
        border-bottom: none !important;
        margin-bottom: 20px !important;
    }

    /* La Imagen: Arriba y centrada */
    .t-img {
        flex: none !important;
        width: 100% !important;
        justify-content: center !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }
    .t-img img {
        max-height: 100px !important;
        max-width: 130px !important;
        object-fit: contain !important;
    }

    /* Corrección de la Jeringa en celular (para que no mida 400px ni deforme la pantalla) */
    .timeline-row:nth-child(2) .t-img img {
        transform: rotate(0deg) !important; /* Horizontal limpia */
        max-width: 160px !important;
        max-height: 80px !important;
    }

    /* El Punto Conector: Centrado entre la foto y el texto */
    .t-connector {
        width: 100% !important;
        margin: 5px 0 12px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .t-dot {
        width: 8px !important;
        height: 8px !important;
        box-shadow: 0 0 0 5px #f7f7f7 !important;
    }

    /* El Texto: Todo el ancho disponible, sin recortes */
    .t-info {
        flex: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    .t-info h3 {
        font-size: 1.15rem !important;
        letter-spacing: 1px !important;
        margin-bottom: 8px !important;
    }
    .t-info p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        color: #666 !important;
    }

    /* 4. BLOQUE DE FILOSOFÍA FINAL */
    .manifesto-footer {
        margin-top: 40px !important;
        padding-top: 35px !important;
    }
    .manifesto-footer p {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }
}