/* ==========================================================================
   Sección 6 - Línea de transparencia
   Réplica en código de la pieza gráfica "imagen 2.jpg" (1920 x 215)
   ========================================================================== */

.transparencia {
    --t-blue: #4155a5;
    --t-white: #ffffff;
    --t-font: 'Outfit', 'Montserrat', sans-serif;
    --t-size: clamp(1.1rem, 1.36vw, 1.65rem);   /* ~26px en 1920px */
    --t-mail-size: clamp(0.95rem, 1.2vw, 1.45rem); /* ~22px en 1920px */

    position: relative;
    background-color: var(--t-blue);
    color: var(--t-white);
    font-family: var(--t-font);
    overflow: hidden;
    isolation: isolate;
}

/* Textura granulada sutil de la pieza original */
.transparencia::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Proporciones de columnas tomadas de la pieza: 625 | 573 | 722 px */
.transparencia-inner {
    display: grid;
    grid-template-columns: 625fr 2px 571fr 2px 720fr;
    align-items: center;
    min-height: clamp(150px, 11.2vw, 260px);
}

.t-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1rem;
}

/* Desplazamientos laterales para igualar la ubicación del texto en la pieza */
.t-col-title {
    padding-right: 4.3vw;
}

.t-col:last-child {
    padding-left: 4.5vw;
}

.t-sep {
    display: block;
    width: 2px;
    height: 33%;
    min-height: 56px;
    background-color: var(--t-white);
    opacity: 0.9;
}

.t-title,
.t-heading {
    font-family: var(--t-font);
    font-size: var(--t-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
    color: var(--t-white);
}

.t-heading {
    margin-bottom: 0.3em;
}

.t-heading-tight {
    margin-bottom: 0;
    line-height: 1.05;
}

/* Botón "aquí" */
.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(140px, 10.2vw, 230px);
    height: clamp(30px, 2vw, 46px);
    padding: 0 1.25rem;
    background-color: var(--t-white);
    color: var(--t-blue);
    border-radius: 999px;
    font-family: var(--t-font);
    font-size: var(--t-size);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.t-btn:hover,
.t-btn:focus-visible {
    color: var(--t-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.t-btn:focus-visible,
.t-mail:focus-visible {
    outline: 2px solid var(--t-white);
    outline-offset: 3px;
}

/* Correo mailto */
.t-mail {
    font-family: var(--t-font);
    font-size: var(--t-mail-size);
    font-weight: 400;
    color: var(--t-white);
    text-decoration: none;
    word-break: break-word;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

.t-mail:hover,
.t-mail:focus-visible {
    color: var(--t-white);
    background-size: 100% 1px;
}

/* ---------- Tablet / móvil: columnas apiladas ---------- */
@media (max-width: 767.98px) {
    .transparencia-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 1.5rem 0;
    }

    .t-col,
    .t-col-title,
    .t-col:last-child {
        padding: 1rem 1.25rem;
    }

    .t-sep {
        width: 60px;
        height: 2px;
        min-height: 0;
    }

    .t-title,
    .t-heading {
        font-size: 1.25rem;
    }

    .t-btn {
        min-width: 160px;
        height: 38px;
        font-size: 1.2rem;
    }

    .t-mail {
        font-size: 1.05rem;
    }
}