@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Lora:wght@400;500;600&display=swap";:root{--color-fondo:#f5f1e8;--color-superficie:#fcfaf6;--color-texto:#2b2723;--color-texto-suave:#6b645d;--color-acento:#876846;--color-acento-hover:#705638;--color-linea:#2b272326;--fuente-titulo:"Cormorant Garamond", serif;--fuente-texto:"Lora", serif;--radio-boton:999px;--transicion:.35s ease}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(circle at top, #ffffff8c, transparent 45%), var(--color-fondo);min-height:100vh;color:var(--color-texto);font-family:var(--fuente-texto);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}button{font-family:inherit}.pantalla{justify-content:center;align-items:center;min-height:100vh;padding:3rem 2rem;display:flex}.inicio,.obra{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:760px;display:flex}.obra{transform:translateY(2vh)}h1{font-family:var(--fuente-titulo);letter-spacing:.015em;color:var(--color-texto);margin:0 0 2.6rem;font-size:clamp(3.8rem,6vw,5.2rem);font-weight:400;line-height:1.08}.titulo-obra{font-size:clamp(3.1rem,5vw,4.2 rem)}.nombre-autor{font-family:var(--fuente-titulo);letter-spacing:.035em;color:var(--color-texto);margin:0;font-size:clamp(1.95rem,2.5vw,2.3rem);font-weight:500}.registro{text-transform:uppercase;letter-spacing:.18em;color:#9c8f80;margin-top:.55rem;margin-bottom:2.4rem;font-size:.82rem}.mensaje{color:#57514b;max-width:620px;margin:0 0 5rem;font-size:1.28rem;line-height:1.8}.sinopsis{color:#4a433d;text-align:center;width:100%;max-width:620px;margin:0 auto;font-size:1.18rem;line-height:2}.boton-principal{border:1.4px solid var(--color-acento);min-width:270px;color:var(--color-acento);letter-spacing:.08em;cursor:pointer;background:0 0;border-radius:999px;padding:18px 40px;font-size:1.05rem;transition:all .35s}.boton-principal:hover{color:#241d17;background:#2d2a260f}.acciones{justify-content:center;gap:2rem;margin-top:5rem;display:flex}.acciones .boton-obra{border:1.2px solid var(--color-acento);min-width:220px;color:var(--color-acento);letter-spacing:.08em;cursor:pointer;background:0 0;border-radius:999px;padding:15px 34px;font-size:1rem;transition:background .35s,transform .25s,box-shadow .35s}.acciones .boton-obra:hover{color:#241d17;background:#2d2a260d;transform:translateY(-2px);box-shadow:0 8px 20px #0000000d}.acciones .boton-obra:active{transform:translateY(0)}.acciones .boton-obra:focus{outline:none}.sala{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;width:min(640px,92vw);margin:auto;display:flex}.reproductor-audio{width:min(520px,100%);margin-top:1.8rem;margin-bottom:1.6rem}.reproductor-video{border-radius:18px;width:100%;max-width:760px;overflow:hidden}@keyframes aparecer{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes revelarObra{0%{opacity:0}to{opacity:1}}.inicio h1{opacity:0;animation:.9s forwards aparecer}.inicio .mensaje{opacity:0;animation:.9s .35s forwards aparecer}.inicio .boton-principal{opacity:0;animation:.9s .7s forwards aparecer}.titulo-audio{margin:0;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:300}.nombre-autor{opacity:0;animation:.45s .1s forwards revelarObra}.registro{opacity:0;animation:.45s .2s forwards revelarObra}.sinopsis{opacity:0;animation:1.6s .8s forwards revelarObra}.acciones{opacity:0;animation:.5s .35s forwards revelarObra}.salida{animation:.9s forwards desaparecer}@keyframes desaparecer{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.985)}}@media (width<=768px){.pantalla{padding:2rem 1.4rem}.obra{transform:none}h1{margin-bottom:2rem;font-size:3rem}.nombre-autor{letter-spacing:.08em;color:#c9c2b3;margin:0;font-size:1rem}.registro{margin-bottom:2rem;font-size:.74rem}.mensaje{font-size:1.08rem}.sinopsis{text-align:justify;text-align-last:center;-webkit-hyphens:auto;hyphens:auto;width:95%;line-height:1.7}.acciones{flex-direction:column;gap:1rem;width:100%;margin-top:3rem}.acciones .boton-obra{width:100%}}.audio-sala{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:700px;min-height:70vh;margin:auto;display:flex}.audio-titulo{font-family:var(--fuente-titulo);color:var(--color-texto);margin:0;font-size:clamp(2.4rem,5vw,3.3rem);font-weight:400;line-height:1.1}.audio-autor{font-family:var(--fuente-titulo);letter-spacing:.06em;color:#6f655a;margin-top:.9rem;margin-bottom:3.5rem;font-size:1.15rem}.audio-player{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;max-width:520px}.video-player{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#000;border-radius:18px;width:100%;max-width:520px;display:block}.audio-regresar{color:#8a7d6f;letter-spacing:.08em;cursor:pointer;background:0 0;border:none;margin-top:3.8rem;font-size:.95rem;transition:opacity .3s,transform .3s,color .3s}.audio-regresar:hover{opacity:1;color:#2d2a26;transform:translate(-3px)}.audio-regresar:focus{outline:none}@media (width<=768px){.nombre-autor{letter-spacing:.02em!important;white-space:nowrap!important;color:#5a4635!important;-webkit-text-fill-color:#5a4635!important;opacity:1!important;text-shadow:none!important;font-size:1.55rem!important;font-weight:600!important}}.obra-etiqueta{letter-spacing:.08em;text-transform:lowercase;color:#2b272394;text-align:center;margin:0 0 -.7rem;font-family:Cormorant Garamond,serif;font-size:1.05rem;font-style:italic;font-weight:500}.autor-enlace{text-align:center;color:#2b27239e;cursor:pointer;margin-top:1.8rem;font-family:Cormorant Garamond,serif;font-size:.95rem;font-style:italic;transition:all .25s}.autor-enlace:hover{color:#2b2723eb;letter-spacing:.04em}.modal-fondo{z-index:1000;opacity:1;background:#12100e99;justify-content:center;align-items:center;padding:.8rem;transition:opacity .4s;display:flex;position:fixed;inset:0}.modal-fondo.cerrando{opacity:0}.modal-nido{opacity:1;background:#f8f5ef;border-radius:18px;width:min(560px,100%);padding:3rem 2.7rem;transition:opacity .4s,transform .4s;animation:.28s aparecer;box-shadow:0 15px 40px #0000002e}.modal-nido h2{text-align:center;letter-spacing:.02em;margin-top:0;margin-bottom:1.2rem;font-family:Cormorant Garamond,serif;font-size:2.35rem;font-weight:400}.modal-texto{text-align:justify;margin:1rem 0 1.6rem;font-size:.98rem;line-height:1.7}.cerrar-modal{margin:2rem auto 0;display:block}.modal-nido input,.modal-nido textarea{box-sizing:border-box;color:#2b2723;background:#ffffff73;border:1px solid #2b272333;border-radius:10px;outline:none;width:100%;margin-top:1rem;padding:.9rem 1rem;font-family:Lora,serif;font-size:.95rem}.modal-nido textarea{resize:none;line-height:1.6}.modal-nido input:focus,.modal-nido textarea:focus{border-color:#876846a6}.modal-nido button{color:#fff;cursor:pointer;background:#876846;border:none;border-radius:30px;margin:1.5rem auto 0;padding:.65rem 1.8rem;font-family:Cormorant Garamond,serif;font-size:1.1rem;transition:background-color .25s,box-shadow .25s;display:block}.modal-nido .cerrar-modal{color:#6b645d;background:0 0;margin-top:.8rem;font-size:.95rem}.bloque-obra{transform:translateY(-24px)}.boton-enviar:hover:not(:disabled){background:#947150;box-shadow:0 6px 16px #0000001a}
