/* ==========================================================
   ROMA 382 — COLABORADORES
   Agencia Misterio
========================================================== */

.roma382-colab-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:48px;
    width:100%;
}

.roma382-colab-card{
    min-width:0;
}

.roma382-colab-card__media{
    position:relative;
    width:100%;
    overflow:hidden;
}

.roma382-colab-card__media img{
    display:block;
    width:100%;
    height:auto;
}

.roma382-colab-socials{
    position:absolute;
    top:10px;
    right:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:2;
}

.roma382-colab-socials a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    color:#2E2E2D;
    text-decoration:none;
    transition:transform .22s ease,background-color .22s ease,color .22s ease;
}

.roma382-colab-socials a:hover{
    transform:scale(1.08);
    background:#2E2E2D;
    color:#fff;
}

.roma382-colab-socials svg{
    width:10px;
    height:10px;
    fill:currentColor;
}

.roma382-colab-card__content{
    padding-top:10px;
}

.roma382-colab-card__name{
    margin:0;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:20px;
    font-weight:500;
    line-height:1;
    color:#2E2E2D;
}

.roma382-colab-card__specialty{
    margin-top:3px;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1.1;
    color:#2E2E2D;
}

.roma382-colab-card__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:12px;
}

.roma382-colab-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 7px;
    border:1px solid #2E2E2D;
    border-radius:0;
    background:transparent;
    color:#2E2E2D;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1;
    text-decoration:none!important;
    cursor:pointer;
    box-shadow:none;
    transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}

.roma382-colab-btn svg{
    width:10px;
    height:10px;
    flex:0 0 10px;
    color:currentColor;
    transition:transform .28s ease;
}

.roma382-colab-btn:hover{
    background:#2E2E2D;
    color:#fff;
}

.roma382-colab-btn:hover svg{
    transform:translate(2px,-2px);
}

/* ==========================================================
   MODAL
========================================================== */

.roma382-colab-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,visibility .28s ease;
}

.roma382-colab-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.roma382-colab-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
}

.roma382-colab-modal__dialog{
    position:relative;
    z-index:1;
    width:min(100%,500px);
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    background:#fff;
    color:#2E2E2D;
    padding:30px 26px 28px;
    transform:translateY(16px) scale(.985);
    opacity:0;
    box-shadow:0 18px 55px rgba(0,0,0,.24);
    transition:transform .34s cubic-bezier(.22,.8,.2,1),opacity .28s ease;
}

.roma382-colab-modal.is-open .roma382-colab-modal__dialog{
    transform:translateY(0) scale(1);
    opacity:1;
}

.roma382-colab-modal__close{
    position:absolute;
    top:8px;
    right:10px;
    z-index:4;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
    color:#DA4E18;
    font-family:Arial,sans-serif;
    font-size:28px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
}

.roma382-colab-modal__media{
    position:relative;
}

.roma382-colab-modal__media img{
    display:block;
    width:100%;
    height:auto;
}

.roma382-colab-socials--modal{
    top:8px;
    right:8px;
}

.roma382-colab-modal__portfolio{
    display:flex;
    justify-content:flex-end;
    margin-top:12px;
}

.roma382-colab-modal__body{
    margin-top:18px;
}

.roma382-colab-modal__body h3{
    margin:0;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:21px;
    font-weight:500;
    line-height:1.05;
    color:#2E2E2D;
}

.roma382-colab-modal__specialty{
    margin-top:4px;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:1.1;
}

.roma382-colab-modal__text{
    margin-top:18px;
    font-family:"ClashDisplay","Clash Display",sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.16;
}

.roma382-colab-modal__text p{
    margin:0 0 10px;
}

html.roma382-colab-lock,
body.roma382-colab-lock{
    overflow:hidden;
}

.roma382-colab-empty{
    padding:18px;
    border:1px dashed #bbb;
    font:13px sans-serif;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){
    .roma382-colab-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .roma382-colab-card__name{
        font-size:15px;
    }

    .roma382-colab-card__specialty{
        font-size:11px;
    }

    .roma382-colab-btn{
        font-size:9px;
        padding:3px 6px;
    }

    .roma382-colab-btn svg{
        width:9px;
        height:9px;
        flex-basis:9px;
    }

    .roma382-colab-socials{
        top:7px;
        right:7px;
        gap:4px;
    }

    .roma382-colab-socials a{
        width:18px;
        height:18px;
    }

    .roma382-colab-socials svg{
        width:9px;
        height:9px;
    }

    .roma382-colab-modal{
        padding:15px;
        align-items:flex-start;
    }

    .roma382-colab-modal__dialog{
        width:100%;
        max-height:calc(100dvh - 30px);
        margin-top:0;
        padding:28px 22px 24px;
    }

    .roma382-colab-modal__body h3{
        font-size:19px;
    }

    .roma382-colab-modal__specialty{
        font-size:14px;
    }

    .roma382-colab-modal__text{
        font-size:12px;
        line-height:1.18;
    }
}

@media(prefers-reduced-motion:reduce){
    .roma382-colab-modal,
    .roma382-colab-modal__dialog,
    .roma382-colab-btn,
    .roma382-colab-btn svg,
    .roma382-colab-socials a{
        transition:none!important;
    }
}


/* ==========================================================
   v1.0.1 — FLECHA EXACTA + ANIMACIONES
========================================================== */

/* Flecha SVG adjunta por el usuario */
.roma382-colab-btn .roma382-colab-arrow{
    display:block;
    width:11px;
    height:11px;
    flex:0 0 11px;
    object-fit:contain;
    transform:translate(0,0);
    transform-origin:center;
    transition:
        transform .34s cubic-bezier(.22,.8,.2,1),
        filter .25s ease;
}

/* Hover elegante: la flecha avanza levemente hacia arriba/derecha */
.roma382-colab-btn:hover .roma382-colab-arrow,
.roma382-colab-btn:focus-visible .roma382-colab-arrow{
    transform:translate(2px,-2px);
}

/* Si el botón se vuelve oscuro, convertimos el SVG negro a blanco */
.roma382-colab-btn:hover .roma382-colab-arrow,
.roma382-colab-btn:focus-visible .roma382-colab-arrow{
    filter:brightness(0) invert(1);
}

/* Botones trayectoria y portfolio */
.roma382-colab-btn{
    overflow:hidden;
    position:relative;
}

.roma382-colab-btn span{
    position:relative;
    z-index:1;
}

.roma382-colab-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:#2E2E2D;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .3s cubic-bezier(.22,.8,.2,1);
    z-index:0;
}

.roma382-colab-btn:hover::before,
.roma382-colab-btn:focus-visible::before{
    transform:scaleX(1);
}

.roma382-colab-btn:hover,
.roma382-colab-btn:focus-visible{
    background:transparent;
    color:#fff;
    outline:none;
}

.roma382-colab-btn .roma382-colab-arrow{
    position:relative;
    z-index:1;
}

/* X del popup: solo la X, sin fondo */
.roma382-colab-modal__close{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#DA4E18 !important;
    width:30px;
    height:30px;
    padding:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Arial,sans-serif;
    font-size:30px;
    font-weight:300;
    line-height:1;
    transform:rotate(0deg) scale(1);
    transform-origin:center;
    transition:
        transform .34s cubic-bezier(.22,.8,.2,1),
        opacity .22s ease;
}

.roma382-colab-modal__close:hover,
.roma382-colab-modal__close:focus-visible{
    background:transparent !important;
    color:#DA4E18 !important;
    transform:rotate(90deg) scale(1.08);
    opacity:.82;
    outline:none;
}

@media(max-width:767px){
    .roma382-colab-btn .roma382-colab-arrow{
        width:9px;
        height:9px;
        flex-basis:9px;
    }

    .roma382-colab-modal__close{
        width:28px;
        height:28px;
        font-size:28px;
    }
}


/* ==========================================================
   v1.0.2 — AJUSTE TIPOGRÁFICO DESKTOP + CIERRE POPUP
========================================================== */

@media (min-width: 768px) {

    /* Tarjeta */
    .roma382-colab-card__name {
        font-size: 23px;
        font-weight: 500;
        line-height: 1;
    }

    .roma382-colab-card__specialty {
        font-size: 17px;
        font-weight: 400;
        line-height: 1.08;
    }

    .roma382-colab-btn {
        font-size: 13.5px;
        font-weight: 400;
        padding: 5px 8px;
        gap: 8px;
    }

    .roma382-colab-btn .roma382-colab-arrow {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

    /* Popup */
    .roma382-colab-modal__body h3 {
        font-size: 23px;
        font-weight: 500;
        line-height: 1;
    }

    .roma382-colab-modal__specialty {
        font-size: 17px;
        font-weight: 400;
        line-height: 1.08;
    }

    /* X más visible */
    .roma382-colab-modal__close {
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 34px;
        line-height: 1;
    }
}


/* ==========================================================
   v1.0.3 — BOTONES IGUALES + X CONSTRUIDA EN CSS
========================================================== */

/* GeneratePress puede aplicar estilos distintos a button y a.
   Normalizamos ambos botones para que trayectoria y portfolio
   tengan exactamente la misma tipografía y altura visual. */
.roma382-colab-card__actions .roma382-colab-btn,
.roma382-colab-modal__portfolio .roma382-colab-btn {
    font-family:"ClashDisplay","Clash Display",sans-serif !important;
    font-size:13.5px !important;
    font-weight:400 !important;
    line-height:1 !important;
    min-height:29px;
    padding:6px 8px !important;
    border:1px solid #2E2E2D !important;
    border-radius:0 !important;
    appearance:none;
    -webkit-appearance:none;
}

/* X exacta, sin carácter tipográfico */
.roma382-colab-modal__close {
    top:17px !important;
    right:17px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:block !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:rotate(0deg);
    transition:transform .35s cubic-bezier(.22,.8,.2,1), opacity .2s ease !important;
}

.roma382-colab-modal__close span,
.roma382-colab-modal__close span::before,
.roma382-colab-modal__close span::after {
    position:absolute;
    display:block;
}

.roma382-colab-modal__close span {
    inset:0;
}

.roma382-colab-modal__close span::before,
.roma382-colab-modal__close span::after {
    content:"";
    left:3px;
    top:13px;
    width:22px;
    height:2px;
    background:#DA4E18;
    transform-origin:center;
}

.roma382-colab-modal__close span::before {
    transform:rotate(45deg);
}

.roma382-colab-modal__close span::after {
    transform:rotate(-45deg);
}

.roma382-colab-modal__close:hover,
.roma382-colab-modal__close:focus-visible {
    background:transparent !important;
    transform:rotate(90deg) scale(1.08);
    opacity:.82;
    outline:none !important;
}

@media(max-width:767px){
    .roma382-colab-card__actions .roma382-colab-btn,
    .roma382-colab-modal__portfolio .roma382-colab-btn{
        font-size:9px !important;
        min-height:24px;
        padding:4px 6px !important;
    }

    .roma382-colab-modal__close{
        top:12px !important;
        right:12px !important;
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        min-height:26px !important;
    }

    .roma382-colab-modal__close span::before,
    .roma382-colab-modal__close span::after{
        left:3px;
        top:12px;
        width:20px;
        height:2px;
    }
}


/* ==========================================================
   v1.0.4 — POSICIÓN X + CORRECCIÓN PORTAFOLIO
========================================================== */

/* La X vive en el margen blanco superior del popup,
   fuera del área visual de la fotografía. */
.roma382-colab-modal__dialog{
    padding-top:36px;
}

.roma382-colab-modal__close{
    top:5px !important;
    right:7px !important;
    z-index:10 !important;
}

@media(max-width:767px){
    .roma382-colab-modal__dialog{
        padding-top:34px;
    }

    .roma382-colab-modal__close{
        top:4px !important;
        right:6px !important;
    }
}