/* 150 · Hola, Vida Adulta — graduación vaquera: sombreros, pacas de heno, botas y lazo al atardecer. Se abre lanzando el sombrero como un birrete.
   Portada: el atardecer del campo con pacas de heno y la cerca, con polvo dorado en los rayos del sol (WebGL, modo rayos).
   Orden: el letrero de rancho — cada sección es una tabla de madera colgada de la cerca con dos sogas, que se balancea al llegar; el programa es el cartel de rodeo.
   Fecha: el lazo da vueltas y se cierra alrededor del día. Cierre: las botas y el sombrero. */
.c-rancho { --display-peso: 400; --nombre-color: #3B2A1C; --titulo-letra: "Alfa Slab One"; --titulo-peso: 400; --titulo-espacio: 0;
	--dia-letra: "Alfa Slab One"; --dia-color: #3B2A1C; --radio: 6px; --vj: 60px; --sombra: 0 14px 16px rgb(59 42 28 / .25);
	--nombre-tam: clamp(3.6rem, 9.6vw, 8rem); --ap-w: min(64vw, 310px); --ap-destello: rgb(247 215 154 / .7); }
.c-rancho .xv-cielo { display: none; }
.c-rancho main { background: linear-gradient(180deg, #F6EBD8, #F1DFC0); }
.c-rancho main > .xv-sec:not(#portada) { background: transparent; }
.c-rancho .v-velo { background: radial-gradient(48% 40% at 50% 50%, rgb(255 246 228 / .8), transparent 76%); }
html.so-abre .c-rancho .ap-cosa[data-efecto="salta"] .ap-pieza { transform: translate(0, -60vh) rotate(-380deg) scale(.8); }

.c-rancho .e-evento { font-family: "Alfa Slab One", serif; color: #B8352A; letter-spacing: .14em; font-size: .9rem; }
.c-rancho .e-grado-t { color: #3B2A1C; } .c-rancho .e-grado-i { color: #5E4A38; }
.c-rancho .e-fecha { color: #3B2A1C; font-weight: 600; background: rgb(255 251 242 / .85); padding: 6px 16px; border-radius: 999px; }
.c-rancho .e-nombre { text-shadow: 0 3px 0 #F7D79A, 0 8px 24px rgb(255 246 228 / .9); }
.rn-paca { --w: min(26vmin, 250px); left: 3vw; bottom: 3vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 10s; --fa: 2px; --fr: 0deg; }
.rn-botas { --w: min(18vmin, 170px); right: 6vw; bottom: 4vh; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .5s; --fd: 8s; --fa: 2px; --fr: 0deg; }
.rn-lazo { --w: min(18vmin, 170px); right: 8vw; top: 9vh; --dy: -14vh; --dr: 60deg; --ex: 30vw; --ey: -20vh; --ed: .7s; --fd: 6s; --fa: 4px; --fr: 6deg; }

/* tablas de madera colgadas */
.c-rancho main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; margin-top: 60px; color: #3B2A1C; --papel: #FFF8EA; --tinta: #3B2A1C; --tinta-2: #5E4A38; --acento: #B8352A; --linea: rgba(59,42,28,.18);
	background: repeating-linear-gradient(180deg, transparent 0 78px, rgb(122 78 42 / .35) 78px 80px), linear-gradient(180deg, #EBD3A8, #E2C391); border-radius: 6px;
	padding: clamp(50px, 6vw, 72px) clamp(24px, 5vw, 64px); box-shadow: inset 0 0 0 3px rgb(122 78 42 / .4), inset 0 0 40px rgb(122 78 42 / .25), 0 30px 50px -30px rgb(59 42 28 / .6); transform-origin: 50% -60px; }
.c-rancho main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { animation: fi-balanceo 2.4s ease-out .2s; }
.rn-soga { top: -62px; left: 0; right: 0; height: 62px; }
.rn-soga i { position: absolute; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: repeating-linear-gradient(160deg, #B98C55 0 4px, #8A6236 4px 8px); }
.rn-soga i:first-child { left: 18%; rotate: 12deg; } .rn-soga i:last-child { right: 18%; rotate: -12deg; }
.c-rancho .xv-kicker { font-family: "Alfa Slab One", serif; color: #B8352A; letter-spacing: .12em; }
.c-rancho .xv-titulo { color: #3B2A1C; }
.c-rancho .xv-titulo .xv-script { font-family: "Sancreek", serif; color: #3F5E8C; }
.c-rancho .xv-superficie { background: rgb(255 251 242 / .7); border: 2px solid rgb(122 78 42 / .35); border-radius: 4px; box-shadow: none; }
.c-rancho .xv-momento time { color: #B8352A; font-weight: 700; }
.c-rancho .e-firma { color: #B8352A; }
.c-rancho .xv-boton:not(.xv-boton-suave) { background: #B8352A; color: #FFFFFF; border-color: #B8352A; }
.c-rancho .e-ornamento { width: min(66%, 260px); }
/* el cartel de rodeo */
.c-rancho #itinerario > .xv-ancho { background: linear-gradient(180deg, #FFF3DC, #F6E3BF) !important; box-shadow: inset 0 0 0 6px #B8352A, inset 0 0 0 10px #FFF3DC, inset 0 0 0 12px #3B2A1C, 0 30px 50px -30px rgb(59 42 28 / .6) !important; }
.c-rancho #itinerario .xv-titulo { font-family: "Sancreek", serif; color: #B8352A; font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* fecha: el lazo se cierra alrededor del día */
.c-rancho .e-fecha-k { font-family: "Alfa Slab One", serif; color: #B8352A; letter-spacing: .14em; }
.rn-m-lazo { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: rotate(calc(var(--t1) * 720deg)) scale(calc(1.6 - var(--t1) * .7)); filter: drop-shadow(0 14px 20px rgb(59 42 28 / .3)); }
.c-rancho .e-dia { font-size: clamp(3.4rem, 9vw, 5rem); }
.c-rancho .e-mes { font-family: "Sancreek", serif; color: #B8352A; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.c-rancho .e-anio { color: #5E4A38; }

.rn-cierre-botas { position: absolute; left: 50%; top: 60px; width: min(30vmin, 180px); translate: -70% 0; }
.rn-cierre-sombrero { position: absolute; left: 50%; top: 20px; width: min(28vmin, 170px); translate: 10% 0; rotate: 12deg; animation: e-flota 3s ease-in-out infinite alternate; }
.c-rancho .e-cierre { padding-top: clamp(250px, 36vh, 320px); }
.c-rancho .e-cierre .xv-kicker { color: #B8352A; font-family: "Alfa Slab One", serif; }

@media (max-width: 760px) {
	.c-rancho { --nombre-tam: clamp(3rem, 14vw, 4.2rem); }
	.rn-paca { --w: 40vw; left: -6vw; bottom: 2vh; } .rn-botas { --w: 30vw; right: 0; bottom: 3vh; } .rn-lazo { --w: 26vw; right: 2vw; top: 8vh; }
}