/* 13 · Carta a mi Futuro — papel artístico cálido con pliegues; tinta ciruela.
   La portada es una carta a gran escala que se despliega en tres paneles (acordeón) al abrir el sobre;
   la escritura es HTML. Una línea de tinta conecta los capítulos. Los días cambian como hoja de calendario. */

.c-xv-carta-a-mi-futuro { --nombre-color: #3D3439; --radio-foto: 4px; --hilo-ancho: 1.4; --rot-retrato: -3deg; }
.c-xv-carta-a-mi-futuro .ca-hoja { position: absolute; left: 50%; top: 5vh; width: min(1180px, 94vw); height: 86vh; transform: translateX(-50%) translateY(calc(var(--m, 0) * -3vh)); perspective: 1800px; filter: drop-shadow(0 40px 50px rgba(101, 66, 87, .18)); }
.c-xv-carta-a-mi-futuro .ca-pan { position: absolute; left: 0; right: 0; height: calc(100% / 3 + 1px); background: linear-gradient(180deg, #FBF5EC, #F7EEE1); transform-origin: top center; transition: transform 1.6s cubic-bezier(.77,0,.175,1); }
.c-xv-carta-a-mi-futuro .ca-p1 { top: 0; border-radius: 6px 6px 0 0; }
.c-xv-carta-a-mi-futuro .ca-p2 { top: calc(100% / 3); background: linear-gradient(180deg, #F3E8D8, #FAF3E8); transition-delay: .3s; }
.c-xv-carta-a-mi-futuro .ca-p3 { top: calc(200% / 3); border-radius: 0 0 6px 6px; transition-delay: .7s; }
.c-xv-carta-a-mi-futuro .ca-esquina { position: absolute; z-index: 2; filter: drop-shadow(0 14px 18px rgba(61, 52, 57, .25)); transition: opacity 1s 2s, transform 1.4s cubic-bezier(.34,1.3,.64,1) 2s; }
.c-xv-carta-a-mi-futuro .ca-esq-izq { width: min(9vw, 130px); left: -2.4%; top: -4%; }
.c-xv-carta-a-mi-futuro .ca-esq-der { width: min(16vw, 220px); right: -3%; bottom: -5%; }
html:not(.rl-abierto) .c-xv-carta-a-mi-futuro .ca-esquina { opacity: 0; transform: scale(.7); }
.c-xv-carta-a-mi-futuro .ca-pliegue { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; transition: opacity 1s 1.6s; }
html:not(.rl-abierto) .c-xv-carta-a-mi-futuro .ca-p2 { transform: rotateX(-88deg); }
html:not(.rl-abierto) .c-xv-carta-a-mi-futuro .ca-p3 { transform: translateY(-100%) rotateX(88deg); }
html:not(.rl-abierto) .c-xv-carta-a-mi-futuro .ca-pliegue { opacity: 0; }
html:not(.rl-abierto) .c-xv-carta-a-mi-futuro .rl-composicion { opacity: 0; }
.c-xv-carta-a-mi-futuro .rl-composicion { transition: opacity 1.2s 1.2s; }
.c-xv-carta-a-mi-futuro .rl-frase { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-style: italic; color: #5E5258; }
.c-xv-carta-a-mi-futuro .rl-retrato { border: 10px solid #FFFFFF; box-shadow: 0 20px 30px -20px rgba(61, 52, 57, .5); }
.c-xv-carta-a-mi-futuro .ca-sello { width: min(62%, 240px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #7E5670, #654257 60%, #4E3343); box-shadow: 0 18px 30px -16px rgba(61, 52, 57, .6), inset 0 0 0 10px rgba(255,255,255,.08); rotate: -8deg; }
.c-xv-carta-a-mi-futuro .ca-sello span { font-family: var(--script); font-size: clamp(4rem, 8vw, 6rem); color: #F4EBDD; }
.c-xv-carta-a-mi-futuro .rl-indice ol { border-top-style: dashed; }

.c-xv-carta-a-mi-futuro .en-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-xv-carta-a-mi-futuro .xv-entrada .xv-monograma { background: #654257; color: #F4EBDD; border: 0; }

/* Viajero: una nota doblada. */
.vj-nota { position: relative; width: 70px; height: 50px; background: linear-gradient(135deg, #FBF5EC 50%, #EADCCB 50%); border-radius: 3px; box-shadow: 0 10px 18px -10px rgba(61, 52, 57, .5); transform: rotate(calc(-8deg + var(--vm, 0) * 16deg)); }
.vj-nota i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #654257; }
.c-xv-carta-a-mi-futuro .ca-orn { display: block; width: 60%; aspect-ratio: 3 / 4; background: linear-gradient(180deg, #FBF5EC, #F3E8D8); border: 1px solid rgba(101, 66, 87, .2); rotate: 4deg; box-shadow: 0 30px 40px -30px rgba(61, 52, 57, .5); }

.c-xv-carta-a-mi-futuro .rl-cap-t .xv-script { color: #654257; }
.c-xv-carta-a-mi-futuro .rl-frases li { color: #654257; }
.c-xv-carta-a-mi-futuro .rl-calendario { border-radius: 4px; }
.c-xv-carta-a-mi-futuro .xv-superficie { background: #FBF5EC; border-color: rgba(101, 66, 87, .18); border-radius: 4px; }
.c-xv-carta-a-mi-futuro .rl-cierre { background: radial-gradient(45% 45% at 50% 50%, rgba(213, 177, 185, .4), transparent 70%); }
@media (max-width: 760px) { .c-xv-carta-a-mi-futuro .ca-hoja { top: 4vh; height: 90vh; } }
html.quieto .c-xv-carta-a-mi-futuro .ca-pan { transform: none !important; }