/* 42 · Fiesta Tropical — papel cortado de verano: mango, turquesa, verde palma y coral.
   Guion: dos hojas de palma se apartan como cortina; atardecer de papel con el sol detrás del nombre. Al bajar las
   palmas se abren más, el sol baja hacia el mar y la monstera y el hibisco entran desde los bordes. En la fecha la
   piña gira, se abre y se vuelve el sol que enmarca el día. Programa en postales de colores. */

.c-tropical { --titulo-letra: "Anton"; --titulo-peso: 400; --titulo-mayus: uppercase; --titulo-espacio: .01em; --edad-letra: "Anton"; --edad-color: #123B33;
	--nombre-color: #FFFFFF; --dia-letra: "Anton"; --dia-color: #123B33; --radio: 20px; --vj: 84px; --sombra: 0 22px 26px rgb(18 59 51 / .22); }
.c-tropical .e-titulos { margin-top: -6vh; }
.c-tropical .e-nombre { text-shadow: 0 4px 0 rgb(180 35 74 / .35), 0 14px 34px rgb(120 40 20 / .35); }
.c-tropical .e-evento { color: #FFF8EA; text-shadow: 0 2px 10px rgb(120 40 20 / .4); }
.c-tropical .e-fecha { color: #123B33; font-weight: 600; background: rgb(255 248 234 / .82); padding: 6px 16px; border-radius: 999px; }
.c-tropical .e-nombre-fin { color: #B4234A; }
.c-tropical .e-edad-n { font-size: clamp(3.6rem, 10vw, 7rem); text-shadow: 0 3px 0 #FFB020; }
.c-tropical .e-edad-t { color: #123B33; }

/* escena de papel */
.tr-sol { --w: min(34vmin, 320px); left: calc(50% - min(17vmin, 160px)); top: 50vh; --dy: 18vh; --ds: -.15; --ey: 30vh; --ed: .4s; --fd: 9s; --fa: 6px; --fr: 4deg; }
.tr-sol .e-img { filter: none; opacity: .92; }
.tr-palma-izq { --w: min(66vmin, 640px); left: -16vmin; top: -12vh; --r: 18deg; --dx: -16vw; --dr: 8deg; --ex: -50vw; --ey: 0px; --ed: .1s; --fd: 8s; --fr: 2deg; }
.tr-palma-der { --w: min(66vmin, 640px); right: -16vmin; top: -12vh; --r: -18deg; --dx: 16vw; --dr: -8deg; --ex: 50vw; --ey: 0px; --ed: .1s; --fd: 8.5s; --fr: 2deg; }
.tr-palma-der .e-img { scale: -1 1; }
.tr-monstera { --w: min(34vmin, 320px); left: -4vmin; bottom: -6vh; --r: 12deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 10vh; --ed: .8s; --fd: 7s; }
.tr-hibisco { --w: min(24vmin, 230px); right: 4vw; bottom: 10vh; --r: -14deg; --dx: 6vw; --dy: -12vh; --dr: 40deg; --ex: 30vw; --ey: 10vh; --ed: 1s; --fd: 5s; }

/* entrada: las palmas tapan; se apartan al abrir */
.c-tropical .xv-entrada { background: radial-gradient(90% 70% at 50% 40%, #1B6B3E, #0F4D2C 70%); }
.tr-entrada-izq, .tr-entrada-der { position: absolute; top: -8%; width: min(80vmin, 760px); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); }
.tr-entrada-izq { left: -18vmin; rotate: 18deg; }
.tr-entrada-der { right: -18vmin; rotate: -18deg; scale: -1 1; }
.c-tropical .xv-entrada-nombre { color: #FFF1D6; }
.c-tropical .xv-entrada .xv-evento { color: #FFB020; }
.c-tropical .xv-entrada .xv-boton:not(.xv-boton-suave) { background: #FFB020; border-color: #FFB020; color: #123B33; }

/* bienvenida */
.c-tropical .e-ornamento { width: min(46%, 200px); }

/* fecha: la piña gira, se abre y se vuelve el sol */
.tr-m-pina { left: 36%; top: 10%; width: 28%; transform: scale(calc(1 + var(--t1) * .25)) rotate(calc(var(--t1) * 160deg)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.tr-m-sol { inset: 0; transform: scale(calc(.15 + var(--t1) * .85)) rotate(calc(var(--m) * 70deg)); opacity: clamp(0, calc(var(--t1) * 2.2 - .6), 1); }
.c-tropical .e-dia { font-size: clamp(5rem, 15vw, 8.5rem); color: #123B33; }
.c-tropical .e-mes { color: #123B33; text-shadow: 0 0 14px rgb(255 241 214 / .8); }
.c-tropical .e-anio { color: #123B33; }

/* lugares como postal; programa en postales de colores sobre banda verde */
.c-tropical .xv-superficie { background: #FFF8EA; border: 10px solid #FFFFFF; box-shadow: 0 30px 50px -28px rgb(18 59 51 / .45); }
.c-tropical .e-lugar { rotate: -1.2deg; }
.c-tropical .e-itinerario { background: #0F4D2C; color: #FFF1D6; --tinta-2: #E9DCC2; }
.c-tropical .e-itinerario .xv-titulo { color: #FFF1D6; }
.c-tropical .e-itinerario .xv-titulo .xv-script { color: #FFB020; }
.c-tropical .e-itinerario .xv-kicker { color: #FFD58A; }
.c-tropical .xv-itinerario { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: none; }
.c-tropical .xv-momento { grid-template-columns: 1fr; gap: 6px; border: 0; padding: 22px; border-radius: 16px; color: #123B33; rotate: var(--g, 0deg); }
.c-tropical .xv-momento:last-child { border: 0; }
.c-tropical .xv-momento time { color: #8A1A38; font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; }
.c-tropical .xv-momento:nth-child(4n+1) { background: #FFE2A8; --g: -1deg; }
.c-tropical .xv-momento:nth-child(4n+2) { background: #BDEDE5; --g: .8deg; }
.c-tropical .xv-momento:nth-child(4n+3) { background: #FFD0D7; --g: 1deg; }
.c-tropical .xv-momento:nth-child(4n+4) { background: #D5EFCF; --g: -.6deg; }

/* cierre: el sol se pone */
.tr-cierre-sol { position: absolute; left: calc(50% - 30vmin); bottom: -26vmin; width: 60vmin; opacity: .45; }

@media (max-width: 760px) {
	.tr-palma-izq, .tr-palma-der { --w: 86vw; top: -6vh; }
	.tr-palma-izq { left: -34vw; }
	.tr-palma-der { right: -34vw; }
	.tr-sol { --w: 50vw; left: 25vw; top: 54vh; }
	.tr-monstera { --w: 44vw; }
	.tr-hibisco { --w: 30vw; bottom: 8vh; }
	.c-tropical .xv-itinerario { grid-template-columns: 1fr; }
}

/* Segunda revisión: lectura sin interferir con la ilustración. */
.c-tropical .e-pista { color:#123B33; isolation:isolate; }
.c-tropical .e-pista::before { content:""; position:absolute; z-index:-1; top:-6px; left:-12px; right:-12px; height:calc(1.5em + 12px); background:#FFF0CE; border-radius:999px; pointer-events:none; }