/* =========================================================
   ALBUMSHOT EVENTOS · BLOQUE RELOJ
   Archivo exclusivo: /blocks/reloj/reloj.css

   Modelos compatibles:
   classic = clásico
   minimal = minimalista
   cards   = tarjetas/recuadros
   marco   = ornamental/elegante
========================================================= */

.ev-reloj{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:
        var(--reloj-padding-top,28px)
        var(--reloj-padding-x,16px)
        var(--reloj-padding-bottom,28px);
    box-sizing:border-box;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
.ev-reloj-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.ev-reloj-title{
    margin:0 0 24px;
    color:var(--reloj-title,#222);
    font-family:var(--reloj-title-font,Georgia);
    font-size:var(--reloj-title-size,34px);
    text-align:var(--reloj-title-align,center);
    line-height:1.1;
}

.ev-reloj-countdown{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;
    width:100%;
    gap:8px;
}

.ev-reloj-unit{
    min-width:0;
    text-align:center;
}

.ev-reloj-unit strong{
    display:block;
    color:var(--reloj-number,#222);
    font-size:clamp(28px,9vw,58px);
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.ev-reloj-unit span{
    display:block;
    margin-top:8px;
    color:var(--reloj-label,#555);
    font-size:var(--reloj-label-size,12px);
    line-height:1.15;
    text-transform:uppercase;
    letter-spacing:.07em;
}

/* =========================================================
   MODELO 1 · CLASSIC
   Abierto · elegante · preparado para fondo imagen/degradé
========================================================= */

.ev-reloj--classic{
    position:relative;
}

/* luces ambientales suaves */
.ev-reloj--classic::before,
.ev-reloj--classic::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    pointer-events:none;
    z-index:1;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.42) 0%,
        rgba(255,255,255,.18) 30%,
        rgba(255,255,255,0) 72%
    );

    filter:blur(12px);
}

.ev-reloj--classic::before{
    top:-95px;
    left:-75px;
}

.ev-reloj--classic::after{
    right:-85px;
    bottom:-105px;
}


/* contenido por encima de las luces */
.ev-reloj--classic .ev-reloj-inner{
    position:relative;
    z-index:2;
}


/* título */
.ev-reloj--classic .ev-reloj-title{
    margin:0;
    line-height:1.05;
}


/* reloj limpio, sin líneas divisorias */
.ev-reloj--classic .ev-reloj-countdown{
    gap:var(--reloj-unit-gap,8px);
}


/* cada unidad queda abierta, sin tarjeta */
.ev-reloj--classic .ev-reloj-unit{
    background:transparent;
    border:0;
    box-shadow:none;
}


/* números */
.ev-reloj--classic .ev-reloj-unit strong{
    font-family:var(--reloj-number-font,Arial);
    font-size:var(--reloj-number-size,48px);
    color:var(--reloj-number,#222);
    font-weight:700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.14),
        0 0 12px rgba(255,255,255,.22);
}


/* días / horas / minutos / segundos */
.ev-reloj--classic .ev-reloj-unit span{
    color:var(--reloj-label,#555);
    font-size:var(--reloj-label-size,12px);
    margin-top:8px;
}

/* =========================================================
   MODELO 2 · MINIMAL
   Compacto · moderno · sin adornos
========================================================= */

.ev-reloj--minimal .ev-reloj-inner{
    gap:var(--reloj-content-gap,16px);
}

.ev-reloj--minimal .ev-reloj-title{
    line-height:1.1;
}

.ev-reloj--minimal .ev-reloj-countdown{
    gap:var(--reloj-unit-gap,4px);
}

.ev-reloj--minimal .ev-reloj-unit{
    min-height:auto;
    padding:4px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.ev-reloj--minimal .ev-reloj-unit::before{
    display:none;
}

.ev-reloj--minimal .ev-reloj-unit strong{
    font-weight:400;
    text-shadow:none;
}

.ev-reloj--minimal .ev-reloj-unit span{
    margin-top:5px;
    font-weight:400;
    letter-spacing:.05em;
    text-shadow:none;
}
/* =========================================================
   MODELO 3 · CARDS
   Tarjetas individuales · moderno · editable
========================================================= */

.ev-reloj--cards .ev-reloj-inner{
    gap:var(--reloj-content-gap,22px);
}

.ev-reloj--cards .ev-reloj-countdown{
    gap:max(8px,var(--reloj-unit-gap,10px));
}

.ev-reloj--cards .ev-reloj-unit{
    min-height:var(--reloj-unit-height,96px);
    padding:14px 6px;

    border-radius:var(--reloj-unit-radius,16px);

    background:transparent;

    box-shadow:
        0 8px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.20);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

/* fondo editable de cada tarjeta */
.ev-reloj--cards .ev-reloj-unit::before{
    display:block;
    border-radius:inherit;

    background-image:var(--reloj-unit-bg-image,none);
    background-color:var(--reloj-unit-bg-color,rgba(255,255,255,.18));
    background-position:center;
    background-repeat:no-repeat;
    background-size:var(--reloj-unit-bg-size,cover);

    opacity:var(--reloj-unit-bg-opacity,1);
}

/* números */
.ev-reloj--cards .ev-reloj-unit strong{
    font-family:var(--reloj-number-font,Arial);
    font-size:var(--reloj-number-size,48px);
    color:var(--reloj-number,#222);
    font-weight:700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.10);
}

/* etiquetas */
.ev-reloj--cards .ev-reloj-unit span{
    margin-top:7px;

    color:var(--reloj-label,#555);
    font-size:var(--reloj-label-size,12px);

    font-weight:600;
    letter-spacing:.06em;
}

/* efecto suave al pasar el mouse */
.ev-reloj--cards .ev-reloj-unit{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

@media (hover:hover){
    .ev-reloj--cards .ev-reloj-unit:hover{
        transform:translateY(-2px);
        box-shadow:
            0 11px 26px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.22);
    }
}
/* =========================================================
   MODELO 4 · MARCO
   Elegante · ornamental · composición enmarcada
========================================================= */

.ev-reloj--marco .ev-reloj-inner{
    gap:var(--reloj-content-gap,20px);
    padding:20px 18px;
    box-sizing:border-box;
}

/* título con presencia elegante */
.ev-reloj--marco .ev-reloj-title{
    font-family:var(--reloj-title-font,Georgia);
    line-height:1.05;
    letter-spacing:.01em;
}

/* contenedor ornamental */
.ev-reloj--marco .ev-reloj-countdown{
    position:relative;
    gap:max(6px,var(--reloj-unit-gap,8px));
    padding:20px 10px;
}

/* ornamento superior e inferior */
.ev-reloj--marco .ev-reloj-countdown::before,
.ev-reloj--marco .ev-reloj-countdown::after{
    content:"❦";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:var(--reloj-label,#555);
    opacity:.72;
    font-size:22px;
    line-height:1;
    pointer-events:none;
}

.ev-reloj--marco .ev-reloj-countdown::before{
    top:-8px;
}

.ev-reloj--marco .ev-reloj-countdown::after{
    bottom:-8px;
}

/* unidades */
.ev-reloj--marco .ev-reloj-unit{
    min-height:var(--reloj-unit-height,92px);
    padding:12px 5px;
    border-radius:var(--reloj-unit-radius,12px);
}

/* fondo editable de cada unidad */
.ev-reloj--marco .ev-reloj-unit::before{
    display:block;
    border-radius:inherit;

    background-image:var(--reloj-unit-bg-image,none);
    background-color:var(--reloj-unit-bg-color,transparent);
    background-position:center;
    background-repeat:no-repeat;
    background-size:var(--reloj-unit-bg-size,cover);

    opacity:var(--reloj-unit-bg-opacity,1);
}

/* números */
.ev-reloj--marco .ev-reloj-unit strong{
    font-family:var(--reloj-number-font,Georgia);
    font-size:var(--reloj-number-size,48px);
    color:var(--reloj-number,#222);
    font-weight:400;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.10);
}

/* etiquetas */
.ev-reloj--marco .ev-reloj-unit span{
    margin-top:7px;
    color:var(--reloj-label,#555);
    font-size:var(--reloj-label-size,12px);
    letter-spacing:.08em;
}

/* el marco general queda por encima */
.ev-reloj--marco .ev-reloj-frame{
    z-index:5;
}
/* =========================================================
   MODELO 5 · THEMED / TEMÁTICO
   Imagen detrás de cada número
========================================================= */

.ev-reloj--themed .ev-reloj-inner{
    gap:var(--reloj-content-gap,22px);
}

.ev-reloj--themed .ev-reloj-countdown{
    gap:max(6px,var(--reloj-unit-gap,8px));
}

.ev-reloj--themed .ev-reloj-unit{
    position:relative;
    overflow:hidden;

    min-height:var(--reloj-unit-height,110px);
    width:calc(100% * var(--reloj-unit-scale,1));
    justify-self:center;

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

    padding:8px 3px;
    box-sizing:border-box;

    border-radius:var(--reloj-unit-radius,18px);
    background:transparent;
}

/* IMAGEN DETRÁS DE CADA NÚMERO */
.ev-reloj--themed .ev-reloj-unit::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    display:none;

    background-image:var(--reloj-unit-bg-image,none);
    background-color:var(--reloj-unit-bg-color,transparent);
    background-position:center;
    background-repeat:no-repeat;
    background-size:var(--reloj-unit-bg-size,contain);

    opacity:var(--reloj-unit-bg-opacity,1);

    pointer-events:none;
}

/* número y texto siempre delante */
.ev-reloj--themed .ev-reloj-unit > *{
    position:relative;
    z-index:2;
}

.ev-reloj--themed .ev-reloj-unit strong{
    font-family:var(--reloj-number-font,Arial);
    font-size:var(--reloj-number-size,48px);
    color:var(--reloj-number,#fff);

    font-weight:800;

    text-shadow:
        0 2px 5px rgba(0,0,0,.65),
        0 0 8px rgba(0,0,0,.35);
}

.ev-reloj--themed .ev-reloj-unit span{
    margin-top:7px;

    color:var(--reloj-label,#fff);
    font-size:var(--reloj-label-size,12px);

    font-weight:700;
    letter-spacing:.06em;

    text-shadow:
        0 1px 4px rgba(0,0,0,.7);
}
/* =========================================================
   CELULARES ANGOSTOS
========================================================= */

@media (max-width:360px){
    .ev-reloj{
        padding-left:9px;
        padding-right:9px;
    }

    .ev-reloj-countdown{
        gap:5px;
    }

    .ev-reloj--cards .ev-reloj-countdown{
        gap:5px;
    }

    .ev-reloj--cards .ev-reloj-unit{
        border-radius:10px;
        padding-left:2px;
        padding-right:2px;
    }
}


/* =========================================================
   CAPA 2 · MARCO DECORATIVO
   Es independiente del fondo y sólo ocupa los bordes.
   PNG/WebP transparente recomendado.
========================================================= */
.ev-reloj-frame{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
}