/* 143 · Cómic Pop — cumpleaños de héroes: viñetas, tramas de puntos y onomatopeyas, con un héroe propio (capa y antifaz vacíos). Se abre la portada del cómic: la página se voltea.
   Portada: rayos de acción y tramas de puntos que laten; su nombre como título de cómic.
   Orden: viñetas — cada sección es una viñeta con borde de tinta que entra con temblor y su onomatopeya («¡POW!», «¡BAM!»…).
   Fecha: una explosión de cómic deja el día al centro. Cierre: la capa ondeando. */
.c-comic { --display-peso: 400; --nombre-color: #FFFFFF; --titulo-letra: "Bangers"; --titulo-peso: 400; --titulo-espacio: .04em;
	--dia-letra: "Bangers"; --dia-color: #111111; --edad-letra: "Bangers"; --edad-color: #E63946; --radio: 4px; --vj: 50px; --sombra: 4px 4px 0 #111111;
	--nombre-tam: clamp(5rem, 15vw, 12rem); --ap-w: min(78vw, 380px); }
.c-comic .xv-cielo { display: none; }
.c-comic main { background: radial-gradient(circle, rgb(17 17 17 / .14) 1.4px, transparent 2px) 0 0 / 14px 14px, #FFD60A; }
.c-comic main > .xv-sec:not(#portada) { background: transparent; }
.c-comic .v-velo { background: radial-gradient(48% 40% at 50% 50%, rgb(255 255 255 / .3), transparent 76%); }

/* apertura: la portada del cómic */
.ap-t-comic .ap-t-cara { background: radial-gradient(circle, rgb(17 17 17 / .18) 1.6px, transparent 2.2px) 0 0 / 12px 12px, linear-gradient(160deg, #FFD60A 0 55%, #E63946 55%); border: 5px solid #111111; border-radius: 4px;
	box-shadow: 10px 10px 0 #111111; padding: 70px 22px 30px; aspect-ratio: .72; align-content: center; }
.ap-t-comic .ap-titulo { color: #111111; } .ap-t-comic .ap-titulo small { font-family: "Bangers", sans-serif; font-size: 1.2rem; letter-spacing: .1em; color: #1D4ED8; }
.ap-t-comic .ap-titulo strong { font-size: clamp(3rem, 14vw, 4.6rem); color: #FFFFFF; -webkit-text-stroke: 2px #111111; text-shadow: 5px 5px 0 #111111; }
.ap-t-comic .ap-titulo em { color: #111111; font-weight: 800; }
.ap-c-num { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: #FFFFFF; border: 3px solid #111111; font: 400 1rem/1 "Bangers", sans-serif; color: #111111; }
.ap-c-pow { position: absolute; top: 12px; right: 10px; font: 400 2.2rem/1 "Bangers", sans-serif; color: #FFD60A; -webkit-text-stroke: 2px #111111; rotate: 12deg; }
.ap-t-comic .ap-t-boton { background: #1D4ED8; color: #FFFFFF; border: 3px solid #111111; font-family: "Bangers", sans-serif; font-size: 1.2rem; letter-spacing: .1em; box-shadow: 4px 4px 0 #111111; }
.c-comic .so-escena::before { background: radial-gradient(circle, rgb(255 255 255 / .1) 1.4px, transparent 2px) 0 0 / 14px 14px, #1D4ED8; }

.c-comic .e-evento { font-family: "Bangers", sans-serif; color: #111111; background: #FFFFFF; border: 3px solid #111111; padding: 4px 12px; letter-spacing: .1em; font-size: 1.1rem; rotate: -3deg; box-shadow: 4px 4px 0 #111111; }
.c-comic .e-edad-t { font-family: "Bangers", sans-serif; color: #111111; }
.c-comic .e-edad-n { -webkit-text-stroke: 2px #111111; }
.c-comic .e-fecha { color: #111111; font-weight: 700; background: #FFFFFF; border: 3px solid #111111; padding: 6px 14px; }
.c-comic .e-nombre { -webkit-text-stroke: 3px #111111; text-shadow: 7px 7px 0 #111111; letter-spacing: .04em; }
.cm-rayo-a { --w: min(14vmin, 130px); left: 8vw; top: 10vh; --r: -12deg; --dy: -12vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: .5s; --fa: 3px; --fr: 2deg; }
.cm-rayo-b { --w: min(12vmin, 110px); right: 10vw; top: 14vh; --r: 18deg; --dy: -12vh; --ex: 30vw; --ey: 0px; --ed: .4s; --fd: .6s; --fa: 3px; --fr: 2deg; }
.cm-capa { --w: min(24vmin, 230px); right: 4vw; bottom: 5vh; --r: 8deg; --dy: 12vh; --ex: 30vw; --ey: 0px; --ed: .6s; --fd: 3s; --fa: 6px; --fr: 4deg; }
.cm-antifaz { --w: min(20vmin, 190px); left: 5vw; bottom: 8vh; --r: -10deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .75s; --fd: 4s; --fa: 6px; --fr: 3deg; }

/* viñetas */
.c-comic main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; padding: clamp(50px, 6vw, 74px) clamp(24px, 5vw, 64px); border-radius: 2px; }
.cm-pow { top: -48px; right: clamp(4px, 3vw, 30px); width: clamp(110px, 14vw, 150px); display: grid; place-items: center; transform: scale(0) rotate(-30deg); transition: transform .45s cubic-bezier(.3,1.8,.5,1) .5s; }
.cm-pow b { position: absolute; font: 400 clamp(1.3rem, 2.4vw, 1.7rem)/1 "Bangers", sans-serif; color: #E63946; -webkit-text-stroke: 1px #111111; rotate: -8deg; }
.llego > .xv-ancho > .cm-pow { transform: scale(1) rotate(8deg); }
.c-comic .xv-kicker { font-family: "Bangers", sans-serif; font-size: 1.1rem; color: #1D4ED8; letter-spacing: .12em; }
.c-comic .xv-titulo { color: #111111; font-size: clamp(2.6rem, 6vw, 4rem); }
.c-comic .xv-titulo .xv-script { color: #E63946; }
.c-comic .xv-superficie { background: #FFF8D6; border: 3px solid #111111; border-radius: 2px; box-shadow: 5px 5px 0 #111111; }
.c-comic .xv-momento time { color: #E63946; font-weight: 700; }
.c-comic .e-firma { color: #E63946; -webkit-text-stroke: 1px #111111; }
.c-comic .xv-boton:not(.xv-boton-suave) { background: #E63946; color: #FFFFFF; border: 3px solid #111111; border-radius: 4px; box-shadow: 4px 4px 0 #111111; font-weight: 700; }
.c-comic .xv-boton-suave { border: 3px solid #111111; border-radius: 4px; }
.c-comic .e-ornamento { width: min(70%, 280px); }

/* fecha: la explosión */
.c-comic .e-fecha-k { font-family: "Bangers", sans-serif; color: #111111; background: #FFFFFF; border: 3px solid #111111; padding: 4px 12px; letter-spacing: .12em; font-size: 1.1rem; }
.cm-m-boom { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: scale(calc(.2 + var(--t1) * .9 + var(--t2) * .05)) rotate(calc((1 - var(--t1)) * -40deg)); }
.cm-m-rayas { inset: -20%; background: repeating-conic-gradient(rgb(17 17 17 / .14) 0 4deg, transparent 4deg 14deg); -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%, transparent 70%); mask: radial-gradient(circle, transparent 40%, #000 42%, transparent 70%); opacity: var(--t2); }
.c-comic .e-dia { font-size: clamp(5rem, 15vw, 8.4rem); color: #FFFFFF; -webkit-text-stroke: 3px #111111; text-shadow: 6px 6px 0 #111111; }
.c-comic .e-mes { font-family: "Bangers", sans-serif; color: #111111; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: .06em; }
.c-comic .e-anio { color: #111111; }

.cm-cierre-capa { position: absolute; left: 50%; top: 20px; width: min(40vmin, 240px); translate: -50% 0; transform-origin: 50% 0; animation: cm-ondea 1.4s ease-in-out infinite alternate; }
@keyframes cm-ondea { from { transform: skewX(-4deg) scaleX(.98); } to { transform: skewX(5deg) scaleX(1.03); } }
.c-comic .e-cierre { padding-top: clamp(240px, 34vh, 300px); }
.c-comic .e-cierre .xv-kicker { color: #1D4ED8; font-family: "Bangers", sans-serif; }
.c-comic .e-nombre-fin { color: #FFFFFF; -webkit-text-stroke: 2px #111111; text-shadow: 5px 5px 0 #111111; }

@media (max-width: 760px) {
	.c-comic { --nombre-tam: clamp(4.4rem, 24vw, 6.4rem); }
	.cm-rayo-a { --w: 20vw; left: 4vw; top: 8vh; } .cm-rayo-b { --w: 18vw; right: 4vw; top: 10vh; }
	.cm-capa { --w: 36vw; right: -4vw; bottom: 4vh; } .cm-antifaz { --w: 34vw; left: 0; bottom: 6vh; }
}

/* Texto blanco legible sobre el rojo del cómic. */
.c-comic .xv-boton:not(.xv-boton-suave) { background:#BE2435; border-color:#111111; color:#FFFFFF; }