/* 71 · Sabanero Chic — grabado en madera a dos tintas: hacienda guanacasteca al atardecer.
   Guion: el portón de corral se abre; el árbol de Guanacaste en silueta sobre el atardecer y los nombres; el lazo de
   cuero se desenrolla; en la fecha el lazo se cierra en un círculo con el día y la herradura arriba. */
.c-sabanero { --display-peso: 400; --nombre-color: #3E2617; --titulo-letra: "Young Serif"; --titulo-espacio: -.01em; --dia-letra: "Sancreek"; --dia-color: #3E2617;
	--y-letra: "Young Serif"; --y-tam: .4em; --y-color: #9A3F1E; --radio: 10px; --vj: 64px; --sombra: 0 20px 24px rgb(62 38 23 / .3); --nombre-tam: clamp(4rem, 10.5vw, 8.6rem); }
.c-sabanero .e-evento { color: #9A3F1E; font-weight: 700; letter-spacing: .4em; }
.c-sabanero .e-nombre { text-shadow: 0 2px 0 #FAF3E6, 0 10px 30px rgb(250 243 230 / .8); line-height: 1; }
.c-sabanero .e-fecha { color: #3E2617; font-weight: 700; background: rgb(250 243 230 / .82); padding: 4px 14px; border-radius: 999px; }
.c-sabanero .e-titulos { align-self: start; margin-top: 14vh; }

.sa-arbol { --w: min(70vmin, 640px); left: 50%; bottom: 4vh; --x: -50%; --dy: 10vh; --ds: .1; --ey: 20vh; --ed: .3s; --fd: 0s; opacity: .95; }
.sa-arbol .e-img { animation: none; }
.sa-sombrero { --w: min(24vmin, 240px); right: 4vw; top: 5vh; --r: 14deg; --dy: -20vh; --dr: 20deg; --ex: 30vw; --ey: 0px; --ed: .8s; --fd: 6s; }
.sa-botas { --w: min(20vmin, 200px); left: 5vw; bottom: 3vh; --dy: 12vh; --ex: -20vw; --ey: 10vh; --ed: 1s; --fd: 0s; }
.sa-botas .e-img { animation: none; }
.sa-lazo { --w: min(18vmin, 180px); right: 6vw; bottom: 4vh; --r: -8deg; --dy: 12vh; --dr: -40deg; --ex: 20vw; --ey: 10vh; --ed: 1.2s; --fd: 7s; }

.c-sabanero .xv-entrada { background: linear-gradient(180deg, #F0A35E, #FAF3E6); overflow: hidden; }
.sa-porton { position: absolute; top: 0; bottom: 0; width: 50.5%; background: repeating-linear-gradient(0deg, transparent 0 9%, #5C3D29 9% 15%), linear-gradient(90deg, #7A4A2A 0 8%, transparent 8% 92%, #7A4A2A 92%); }
.sa-porton-izq { left: 0; } .sa-porton-der { right: 0; }
.c-sabanero .xv-entrada-contenido { position: relative; z-index: 1; background: rgb(250 243 230 / .94); padding: 26px 28px; border-radius: 14px; box-shadow: 0 20px 50px rgb(62 38 23 / .4); }
html.abriendo .sa-porton { transition: transform 1.3s cubic-bezier(.65,0,.35,1); }
html.abriendo .sa-porton-izq { transform: perspective(900px) rotateY(80deg); transform-origin: 0 50%; } html.abriendo .sa-porton-der { transform: perspective(900px) rotateY(-80deg); transform-origin: 100% 50%; }

.c-sabanero .e-ornamento { width: min(56%, 220px); }
.c-sabanero .e-firma { font-family: "Sancreek", serif; color: #9A3F1E; font-size: clamp(2rem, 4vw, 2.8rem); }

/* fecha: lazo → aro con herradura */
.sa-m-lazo { left: 10%; top: 14%; width: 80%; transform: rotate(calc(var(--t1) * 180deg)) scale(calc(1 - var(--t1) * .2)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.sa-m-aro { inset: 10%; border-radius: 50%; border: 12px solid #7A4A2A; box-shadow: inset 0 0 0 3px #B5532E, 0 0 0 3px #B5532E, 0 20px 40px -10px rgb(62 38 23 / .4); background: rgb(250 243 230 / .9);
	opacity: clamp(0, calc(var(--t1) * 3 - 1.5), 1); transform: scale(calc(.5 + var(--t2) * .5)); }
.sa-m-herradura { left: 40%; top: -6%; width: 20%; opacity: var(--t2); transform: translateY(calc((1 - var(--t2)) * -40px)); }
.c-sabanero .e-dia { font-size: clamp(4rem, 11vw, 6.2rem); }
.c-sabanero .e-mes { font-family: "Young Serif", serif; color: #9A3F1E; }

.c-sabanero .xv-superficie { background: #FFFAF0; border: 2px solid #7A4A2A; }
.c-sabanero .e-itinerario { background: #EAD9BE; }
.c-sabanero .xv-momento time { color: #9A3F1E; }
.c-sabanero .xv-titulo .xv-script { font-family: "Sancreek", serif; color: #9A3F1E; }
.sa-cierre-arbol { position: absolute; left: 50%; bottom: -2vh; width: min(70vmin, 560px); translate: -50% 0; opacity: .3; }

@media (max-width: 760px) {
	.sa-arbol { --w: 110vw; bottom: 8vh; }
	.sa-sombrero { --w: 34vw; right: -4vw; top: 4vh; }
	.sa-botas { --w: 30vw; left: 0; bottom: 2vh; }
	.sa-lazo { --w: 26vw; right: 2vw; bottom: 3vh; }
	.c-sabanero .e-titulos { margin-top: 15vh; }
}