/* ==========================================
   TARJETAS DE SERVICIOS - REGISTRO PROPIEDAD
========================================== */

.service-stamp-card{
    position:relative;
    overflow:hidden;
    background:#faf8f3;
    border:1px solid #e8e2d5;
    border-radius:18px;
    padding:35px 30px;
    text-align:center;
    height:100%;
    cursor:pointer;

    transition:all .35s ease;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);
         width:100%;
    max-width:370px;

    margin:auto;
}

/* Línea dorada superior */

.service-stamp-card::before{

    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:0;
    height:5px;
    background:#c8a24a;
    transform:translateX(-50%);
    transition:.45s ease;

}

/* Hover */

.service-stamp-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.15);

}

.service-stamp-card:hover::before{

    width:100%;

}

/* ==================================
          CABECERA
================================== */

.service-header{

    width:95px;
    height:95px;
    margin:0 auto 25px;

    border-radius:50%;
    background:#fff;
    border:3px solid #d2b46d;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.4s;

}

.service-stamp-card:hover .service-header{

    transform:scale(1.05);

    box-shadow:
        0 0 25px rgba(201,162,74,.30);

}

/* ==================================
            ICONO
================================== */

.icon{

    font-size:42px;
    color:#0e4a7b;

    transition:.45s;

}

.service-stamp-card:hover .icon{

    transform:scale(1.12) rotate(-8deg);

}

/* ==================================
            TITULO
================================== */

.service-title{

    font-family:'Cormorant Garamond', serif;
    font-size:30px;
    font-weight:700;
    color:#153a5b;
    margin-bottom:18px;

}

/* ==================================
         DESCRIPCIÓN
================================== */

.service-description{

    font-family:'Poppins',sans-serif;
    font-size:15px;
    line-height:1.8;
    color:#555;
    min-height:80px;

}

/* ==================================
            BOTÓN
================================== */

.service-button{

    margin-top:20px;

    background:#0e4a7b;
    color:#fff;

    border:none;
    border-radius:40px;

    padding:12px 28px;

    font-weight:600;
    letter-spacing:.4px;

    transition:.35s;

}

.service-button:hover{

    background:#0b3d66;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(14,74,123,.25);

}

/* ==================================
      EFECTO PAPEL
================================== */

.service-stamp-card::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.10),
            rgba(255,255,255,0)
        );

    pointer-events:none;

}

/* ==================================
        TRANSICIONES
================================== */

.service-stamp-card,
.service-header,
.icon,
.service-button{

    transition:all .35s ease;

}

/* ==================================
        RESPONSIVE
================================== */

@media(max-width:768px){

.service-title{

    font-size:26px;

}

.service-description{

    font-size:14px;

}

.service-header{

    width:85px;
    height:85px;

}

.icon{

    font-size:36px;

}

}

/* =====================================================
                SELLO ANIMADO
===================================================== */

.stamp-overlay{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    pointer-events:none;
    overflow:hidden;

}

/* Imagen del sello */

.stamp-image{

    width:180px;

    opacity:0;

    transform:
        translateY(-250px)
        rotate(-25deg)
        scale(2);

    filter:
        drop-shadow(0 15px 15px rgba(0,0,0,.30));

}

/* Estado cuando se hace clic */

.service-stamp-card.stamping{

    box-shadow:
        0 0 45px rgba(200,162,74,.45),
        0 25px 45px rgba(0,0,0,.20);

    animation:
        shake .18s .48s;

}

/* Animación del sello */

.service-stamp-card.stamping .stamp-image{

    animation:
        stampFall .70s cubic-bezier(.18,.9,.32,1),
        stampImpact .20s .58s;

    opacity:1;

    transform:
        translateY(0)
        rotate(-18deg)
        scale(1);

}

/* =====================================
        CAÍDA DEL SELLO
===================================== */

@keyframes stampFall{

0%{

opacity:0;

transform:
translateY(-250px)
rotate(-25deg)
scale(2);

}

60%{

opacity:1;

transform:
translateY(20px)
rotate(-18deg)
scale(.95);

}

80%{

transform:
translateY(-8px)
rotate(-18deg)
scale(1.05);

}

100%{

transform:
translateY(0)
rotate(-18deg)
scale(1);

}

}

/* =====================================
        IMPACTO
===================================== */

@keyframes stampImpact{

0%{

filter:
drop-shadow(0 0 0 rgba(0,0,0,.2));

}

50%{

filter:
drop-shadow(0 0 28px rgba(180,20,20,.60));

}

100%{

filter:
drop-shadow(0 10px 12px rgba(0,0,0,.30));

}

}

/* =====================================
        VIBRACIÓN
===================================== */

@keyframes shake{

0%{

transform:translateX(0);

}

20%{

transform:translateX(-3px);

}

40%{

transform:translateX(3px);

}

60%{

transform:translateX(-2px);

}

80%{

transform:translateX(2px);

}

100%{

transform:translateX(0);

}

}

.service-button:disabled{

    opacity:.75;
    cursor:wait;

}