/* AZ Futura · portada provisional con contador. Hoja suelta: no depende del tema. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
.azc {
	--magenta: #e5057f; --azul: #087fd0; --tinta: #2d3748; --gris: #4a5568; --crema: #f7ede2; --rosa: #fac7c0; --naranja: #f2ad47; --lima: #bdce07;
	min-height: 100vh; min-height: 100svh; display: grid;
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--gris);
	background:
		radial-gradient(60vw 60vw at 110% -10%, rgba(229, 5, 127, .13), transparent 60%),
		radial-gradient(55vw 55vw at -10% 110%, rgba(8, 127, 208, .13), transparent 60%),
		var(--crema);
	border-top: 7px solid var(--magenta);
	overflow: hidden;
}
.azc__hoja { position: relative; display: grid; place-items: center; padding: clamp(28px, 5vw, 64px) 20px; }
.azc__centro { position: relative; z-index: 2; width: min(100%, 760px); text-align: center; }
.azc__logo { width: clamp(190px, 26vw, 300px); height: auto; }
.azc__ante { margin: 26px 0 0; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(12px, 1.3vw, 14px); font-weight: 700; color: #b7791f; }
.azc__titulo { margin: 12px 0 0; font-family: "Lilita One", Roboto, sans-serif; font-weight: 400; font-size: clamp(40px, 7.4vw, 84px); line-height: 1.02; color: var(--tinta); text-wrap: balance; }
.azc__titulo span { color: var(--magenta); }
.azc__texto { margin: 22px auto 0; max-width: 34em; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; text-wrap: pretty; }

.azc__reloj { margin: clamp(28px, 4vw, 44px) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.6vw, 18px); max-width: 640px; }
.azc__caja { background: #fff; border-radius: 22px; padding: clamp(14px, 2.4vw, 24px) 6px clamp(12px, 2vw, 18px); border-bottom: 6px solid var(--c); box-shadow: 0 14px 30px -18px rgba(45, 55, 72, .45); }
.azc__caja b { display: block; font-family: "Lilita One", Roboto, sans-serif; font-weight: 400; font-size: clamp(34px, 7vw, 68px); line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.azc__caja span { display: block; margin-top: 8px; font-size: clamp(11px, 1.3vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); }
.azc__caja--1 { --c: var(--magenta); } .azc__caja--2 { --c: var(--azul); } .azc__caja--3 { --c: #e08a0b; } .azc__caja--4 { --c: #7f8d00; }

.azc__botones { margin-top: clamp(26px, 3.6vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.azc__boton { display: inline-block; padding: 13px 26px; border-radius: 50px; background: var(--magenta); color: #fff; text-decoration: none; font-family: "Lilita One", Roboto, sans-serif; font-size: 20px; line-height: 1.2; box-shadow: 0 0 8px rgba(45, 55, 72, .2); transition: background .2s, transform .2s; }
.azc__boton:hover, .azc__boton:focus-visible { background: var(--azul); transform: translateY(-2px); }
.azc__boton--claro { background: #fff; color: var(--magenta); }
.azc__boton--claro:hover, .azc__boton--claro:focus-visible { background: var(--tinta); color: #fff; }
.azc__boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Los dibujos de la casa, uno en cada esquina, flotando despacio. */
.azc__dibujo { position: absolute; z-index: 1; height: auto; animation: azc-flota 7s ease-in-out infinite; }
.azc__dibujo--1 { width: clamp(150px, 21vw, 330px); left: clamp(-30px, 2vw, 40px); bottom: clamp(-10px, 3vh, 40px); }
.azc__dibujo--2, .azc__dibujo--3 { mix-blend-mode: multiply; } /* PNG con fondo blanco */
.azc__dibujo--2 { width: clamp(110px, 14vw, 220px); right: clamp(0px, 4vw, 70px); top: clamp(10px, 7vh, 80px); animation-delay: -2s; }
.azc__dibujo--3 { width: clamp(110px, 14vw, 220px); left: clamp(0px, 5vw, 90px); top: clamp(10px, 8vh, 90px); animation-delay: -4s; }
.azc__dibujo--4 { width: clamp(120px, 16vw, 250px); right: clamp(-10px, 3vw, 60px); bottom: clamp(0px, 5vh, 60px); animation-delay: -5.5s; }
@keyframes azc-flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .azc__dibujo { animation: none; } .azc__boton { transition: none; } }

/* Tableta y móvil: los dibujos pasan a una tira bajo el contenido. */
@media (max-width: 1180px) {
	.azc__hoja { display: flex; flex-direction: column-reverse; justify-content: center; gap: 26px; }
	.azc__dibujos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 28px); }
	.azc__dibujo { position: static; width: clamp(64px, 19vw, 150px) !important; }
}
@media (max-width: 420px) { .azc__boton { width: 100%; } .azc__caja { border-radius: 16px; } }