/* ///////////////// CUENTA REGRESIVA ///////////////// */
#cuenta {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(72px,10vw,128px) var(--espacio-small);
scroll-margin-top: 50px;
background-color: var(--col-rojo);
background-image:
radial-gradient(circle at 84% 16%,var(--trans-20blanco) 0 1px,transparent 2px),
radial-gradient(circle at 16% 78%,var(--trans-10blanco) 0 1px,transparent 2px),
repeating-linear-gradient(135deg,transparent 0 19px,var(--trans-10negro) 20px 21px),
linear-gradient(145deg,var(--trans-10negro),transparent 46%,var(--trans-30negro));
background-size: 26px 26px,38px 38px,auto,auto;
border-top: 6px solid var(--col-dorado);
border-bottom: 6px solid var(--col-dorado);
}
#cuenta::before,
#cuenta::after {
content: "";
position: absolute;
z-index: -1;
border: 1px solid var(--col-mostaza);
border-radius: 50%;
opacity: .38;
pointer-events: none;
}
#cuenta::before {
top: -220px;
right: -170px;
width: 480px;
height: 480px;
}
#cuenta::after {
bottom: -260px;
left: -210px;
width: 560px;
height: 560px;
}
#cuenta .cuenta-regresiva {
position: relative;
z-index: 1;
}
#cuenta .contador-panel {
position: relative;
width: min(100%,760px);
margin: 0 auto;
padding: clamp(30px,6vw,64px);
overflow: hidden;
text-align: center;
background-color: var(--col-crema);
border: 1px solid var(--col-dorado);
border-radius: var(--borderradius-medium);
box-shadow: 0 24px 64px var(--trans-50negro);
}
#cuenta .contador-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background-color: var(--col-mostaza);
}
.etiqueta {
display: inline-block;
margin-bottom: var(--espacio-small);
color: var(--col-dorado);
font-family: var(--font-san-serif),sans-serif;
font-size: var(--fontsize-small);
letter-spacing: .06em;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
#cuenta h2 {
max-width: 13ch;
margin: 0 auto var(--espacio-small);
color: var(--col-noche);
font-family: var(--font-serif),serif;
font-size: var(--fontsize-subtitular);
line-height: 1.05;
text-wrap: balance;
}
#cuenta .introduccion {
max-width: 36em;
margin: 0 auto var(--espacio-medium);
color: var(--col-fuente);
font-family: var(--font-san-serif),sans-serif;
font-size: clamp(1rem,2vw,1.18rem);
line-height: 1.55;
text-wrap: balance;
}
#cuenta .fecha-visita {
display: inline-block;
margin-bottom: clamp(28px,5vw,48px);
padding: 9px 0;
color: var(--col-rojo);
font-family: var(--font-san-serif),sans-serif;
font-size: clamp(.72rem,1.8vw,.9rem);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-top: 1px solid var(--col-dorado);
border-bottom: 1px solid var(--col-dorado);
}
#cuenta .tiempo {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: clamp(5px,1.5vw,16px);
width: 100%;
}
#cuenta .unidad {
position: relative;
min-width: 0;
overflow: hidden;
padding: clamp(14px,3vw,28px) clamp(2px,1vw,10px);
text-align: center;
background-color: var(--col-rojo);
border: 1px solid var(--col-dorado);
border-radius: var(--borderradius-xsmall);
box-shadow: 0 12px 28px var(--trans-20negro);
}
#cuenta .unidad::after {
content: "";
position: absolute;
right: 20%;
bottom: 0;
left: 20%;
height: 3px;
background-color: var(--col-mostaza);
}
#cuenta .numero,
#cuenta .nombre-unidad {
display: block;
}
#cuenta .numero {
color: var(--col-crema);
font-family: var(--font-serif),serif;
font-size: clamp(1.45rem,7vw,4.5rem);
font-weight: 700;
line-height: .9;
font-variant-numeric: tabular-nums;
}
#cuenta .nombre-unidad {
margin-top: clamp(8px,1.5vw,14px);
color: var(--col-amarillo);
font-family: var(--font-san-serif),sans-serif;
font-size: clamp(.52rem,1.6vw,.8rem);
font-weight: 700;
letter-spacing: .08em;
line-height: 1.1;
text-transform: uppercase;
overflow-wrap: anywhere;
}

/* ---- Adaptaciones por pantalla y movimiento ---- */
@media only screen and (max-width:600px) {
#cuenta {
  padding: var(--espacio-3xlarge) 12px;
}
#cuenta .contador-panel {
  padding: 32px 12px;
}
#cuenta .tiempo {
  gap: 4px;
}
#cuenta .unidad {
  padding: 12px 2px;
}
#cuenta .numero {
  font-size: clamp(1.35rem,9vw,2.3rem);
}
#cuenta .nombre-unidad {
  font-size: clamp(.45rem,2.3vw,.62rem);
  letter-spacing: .035em;
}
}