@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700");

/* ===============================
   VARIABLES GLOBALES (fondo compartido)
   =============================== */
:root {
    --bg-image: url('https://traumaxp.com/good/img/contact/back-img-contact.png');
    --overlay-dark: rgba(0, 0, 0, 0.2);

    /* Capa de oscurecimiento */
}

/* ===============================
   SECCIÓN BLOB (Rounded Text)
   =============================== */
.blob-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    /* Asegura que el contenido esté por encima del pseudo-elemento */
    z-index: 1;

    /* Imagen + Degradado específico para blob */
    background: var(--bg-image) center/cover no-repeat,
        radial-gradient(circle at 120% 100%, 
        #0062FF 0%, 
        #375fff 10%, 
        #000000 30%) 
        fixed;
    background-color: #000;
    background-repeat: no-repeat, no-repeat;
    background-position: center, left top;
    background-size: cover, auto;
    background-attachment: fixed;
}

/* ===============================
   SECCIÓN SPLIT TEXT (Abajo)
   =============================== */
.txp-split-text {
    position: relative;
    width: 100%;
    min-height: 100vh;

    /* Ajusta según necesites */
    overflow: visible;
    z-index: 1;

    /* Imagen + Degradado específico para split text */
    background: var(--bg-image) center/cover no-repeat,       
    radial-gradient(circle at 120% 100%,       
    #0062FF 0%,       
    #375fff 10%,       
    #000000 27%)         
    fixed;
    background-color: #000000;
    background-repeat: no-repeat, no-repeat;
    background-position: center, left top;
    background-size: cover, auto;

    /* Background fijo */
    background-attachment: fixed;
}

/* Fondo SOLO para esta sección */
background: radial-gradient(
    /* Mover gradieint, posición 50% 50% centro  */
    circle at 120% 100%,
    #0062FF 0%,
    #375fff 10%,
    #000000 30%
    ) fixed;

/* Ajuste móvil - solo la POSICIÓN del gradiente */
@media (max-width: 768px) {
    .blob-section {
        background: radial-gradient(
            circle at 150% 100%,
            #0062FF 0%,
            #375fff 10%,
            #000000 35%
        ) fixed;
    }
}

/* ===============================
   CONTENEDOR
   =============================== */
.blob-container {
    position: relative;
    width: 100%;
    max-width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

/* ===============================
   SVG
   =============================== */
.blob-svg {
    width: 90%;
    max-width: 70vw;
    max-height: 90vh;
    aspect-ratio: 1/1;
    display: block;
}

/* ===============================
   CLIPPATH ANIMATION
   =============================== */
.blob-svg #blobClip-xp {
    transform-origin: center;
    transition: transform 0.4s ease-out;
}

.blob-svg:hover #blobClip-xp {
    transform: scale(1.15);
}

/* ===============================
   TEXT STYLES
   =============================== */
.blob-svg .text-content {
    font: 700 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    fill: #ffffff;
    mix-blend-mode: normal;
    pointer-events: none;
    transition: fill 0.5s ease;
}

/* Hover effect */
.blob-svg:hover .text-content {
    fill: #ffffff;
    mix-blend-mode: overlay;
}

/* ===============================
   MOBILE OPTIMIZATION
   =============================== */
@media (max-width: 768px) {
    .blob-section {
        min-height: 90vh;
    }

    .blob-container {
        max-width: 100vw;
    }

    .blob-svg {
        max-width: 100vw;
        max-height: 70vh;
    }

    .blob-svg .text-content {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
}

/* ===============================
        iPhone - Hover/Tap
   =============================== */
.blob-svg {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Para iPhone - activar al tocar */
.blob-svg:active #blobClip-xp {
    transform: scale(1.15);
    transition: transform 0.2s ease-out;
}

.blob-svg:active .text-content {
    fill: #ffffff;
    mix-blend-mode: overlay;
    transition: fill 0.2s ease;
}

/* Mantener hover para desktop */
@media (hover: hover) {
    .blob-svg:hover #blobClip-xp {
        transform: scale(1.15);
    }

    .blob-svg:hover .text-content {
        fill: #ffffff;
        mix-blend-mode: overlay;
    }
}
}