/* 106 · Bata Blanca — graduación en ciencias de la salud. Sobre blanco con forro de cruces y un sello de estetoscopio.
   Portada: el pasillo claro con una franja de luz que pasa (WebGL, modo rayos).
   Orden: el pulso — cada sección empieza con una línea de electrocardiograma que se traza y late.
   Fecha: el estetoscopio gira y se acomoda alrededor del día mientras el pulso cruza detrás. */
.c-bata { --display-peso: 400; --nombre-color: #24313A; --titulo-letra: "Plus Jakarta Sans"; --titulo-peso: 800; --titulo-espacio: -.03em; --dia-letra: "DM Serif Display"; --dia-color: #24313A;
	--radio: 20px; --vj: 52px; --sombra: 0 18px 26px rgb(36 49 58 / .2); --nombre-tam: clamp(3.4rem, 8vw, 7rem); --pulso: #2E7DA6; }
.c-bata .xv-cielo { display: none; }
.c-bata main { background: linear-gradient(180deg, #F3F8FA, #EAF4F7); }
.c-bata main > .xv-sec:not(#portada) { background: transparent; }
.c-bata .v-velo { background: radial-gradient(56% 40% at 50% 46%, rgb(255 255 255 / .75), transparent 74%); }

html[data-largo] .c-bata .e-nombre { --n: 1; }

/* portada */
.c-bata .e-nombre { white-space: normal; text-wrap: balance; max-width: 12ch; line-height: 1; }
.c-bata .e-evento { color: #2E7DA6; letter-spacing: .44em; font-weight: 800; font-size: .74rem; }
.c-bata .e-grado-t { color: #24313A; }
.c-bata .e-grado-i { color: #2E7DA6; }
.c-bata .e-fecha { color: #465661; font-weight: 600; }
.bb-este { --w: min(28vmin, 250px); left: 2vw; bottom: 4vh; --r: -14deg; --dx: -8vw; --dy: 10vh; --dr: -12deg; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 6px; --fr: 2deg; }
.bb-birrete { --w: min(20vmin, 180px); right: 5vw; top: 8vh; --r: 12deg; --dy: -16vh; --dr: 14deg; --ex: 30vw; --ey: -10vh; --ed: .7s; --fd: 5s; --fa: 8px; --fr: 3deg; }

/* secciones: tarjetas clínicas blancas, con el pulso arriba */
.c-bata main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 22px; padding: clamp(26px, 4vw, 50px);
	box-shadow: 0 1px 0 #E6F1F5, 0 30px 60px -36px rgb(36 49 58 / .3); border-top: 4px solid #63C2B5; }
.c-bata .xv-kicker { color: #2E7DA6; letter-spacing: .38em; }
.c-bata .xv-titulo .xv-script { font-family: "DM Serif Display", serif; font-style: italic; font-weight: 400; color: #2E7DA6; letter-spacing: 0; }
.c-bata .xv-superficie { background: #F3F8FA; border: 1px solid #DCEBF1; }
.c-bata .xv-momento time { color: #2E7DA6; font-weight: 700; }
.c-bata .e-firma { font-family: "DM Serif Display", serif; font-style: italic; color: #2E7DA6; }
.c-bata .xv-boton:not(.xv-boton-suave) { background: #2E7DA6; color: #FFFFFF; border-color: #2E7DA6; }
.c-bata .e-ornamento { width: min(62%, 230px); }

/* fecha: el estetoscopio rodea el día; el pulso cruza detrás */
.c-bata .e-fecha-k { color: #2E7DA6; }
.bb-m-este { left: 16%; top: 2%; width: 68%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: rotate(calc((1 - var(--t1)) * -160deg)) scale(calc(.5 + var(--t1) * .5)); filter: drop-shadow(0 18px 24px rgb(36 49 58 / .2)); }
.bb-m-pulso { left: -30%; right: -30%; top: 42%; height: 16%; overflow: visible; opacity: .55; }
.bb-m-pulso path { fill: none; stroke: #63C2B5; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t1)); }
.c-bata .e-dia-caja { padding: 18px 22px; border-radius: 50%; background: rgb(255 255 255 / .9); aspect-ratio: 1; align-content: center; width: 40%; box-shadow: 0 10px 30px -10px rgb(36 49 58 / .25); }
.c-bata .e-dia { font-size: clamp(3rem, 9vw, 4.6rem); }
.c-bata .e-mes { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: #2E7DA6; text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; }
.c-bata .e-anio { color: #465661; font-size: .74rem; }

/* cierre */
.bb-cierre-bata { position: absolute; left: 50%; top: 4%; width: min(22vmin, 160px); translate: -50% 0; }
.c-bata .e-cierre { padding-top: clamp(220px, 32vh, 300px); }
.c-bata .e-nombre-fin { font-size: clamp(2.4rem, 7vw, 5rem); }

@media (max-width: 760px) {
	.c-bata { --nombre-tam: clamp(2.6rem, 12vw, 4rem); }
	.bb-este { --w: 38vw; left: -8vw; bottom: 2vh; }
	.bb-birrete { --w: 24vw; right: 2vw; top: 6vh; }
	.c-bata .e-dia-caja { width: 48%; }
}