/* Casa Rural -Alma de Santa Cruz-: portada de la raíz del dominio. Solo CSS (sin JavaScript): revelación en iris + desenfoque, título letra a letra, subtítulo con fundido. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-italic-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-italic-600.woff2) format("woff2")}

:root{--ink:#fff8ec;--gold:#ecc989;--shade:22,11,3;--ease:cubic-bezier(.2,.7,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#1a0e06;color:var(--ink);overflow:hidden;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;-webkit-font-smoothing:antialiased}

/* Fondo: la imagen se «revela» por un iris que se abre desde el centro mientras se enfoca y se ilumina, y después respira muy despacio. */
.stage{position:fixed;inset:0;overflow:hidden;background:#1a0e06}
.bg{position:absolute;inset:0;display:block;clip-path:circle(0% at 50% 54%);animation:iris 3.4s cubic-bezier(.22,.7,.18,1) .2s forwards}
.bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.16);filter:blur(16px) brightness(.5) saturate(.75);animation:develop 4.6s cubic-bezier(.2,.6,.2,1) .2s forwards,drift 46s ease-in-out 4.8s infinite alternate}
@keyframes iris{to{clip-path:circle(150% at 50% 54%)}}
@keyframes develop{to{transform:scale(1.06);filter:blur(0) brightness(1) saturate(1.05)}}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.2%,-.9%,0)}}

/* Velo para que el texto se lea sobre el ladrillo claro, y un rayo de sol que cruza la imagen una vez. */
.shade{position:absolute;inset:0;opacity:0;animation:appear 2.6s ease 1.1s forwards;
  background:radial-gradient(ellipse 72% 58% at 50% 50%,rgba(var(--shade),.52) 0%,rgba(var(--shade),.24) 58%,rgba(var(--shade),0) 100%),
             linear-gradient(to bottom,rgba(var(--shade),.18) 0%,rgba(var(--shade),0) 30%,rgba(var(--shade),0) 62%,rgba(var(--shade),.62) 100%)}
.beam{position:absolute;inset:-25% -70%;opacity:0;transform:translateX(-45%) skewX(-14deg);pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,228,168,.17) 50%,transparent 58%);animation:sweep 6s ease-in-out 3.4s 1 forwards}
@keyframes sweep{0%{opacity:0;transform:translateX(-45%) skewX(-14deg)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(45%) skewX(-14deg)}}
@keyframes appear{to{opacity:1}}

.hero{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.25rem 4.5rem}

/* Título: serif caligráfica cursiva (Cormorant Garamond, con Times New Roman como alternativa). Cada letra aparece enfocándose y subiendo, en cascada. */
.title{font-family:"Cormorant Garamond","Times New Roman",Times,serif;font-style:italic;font-weight:600;line-height:1.04;color:var(--ink);
  text-shadow:0 2px 26px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55)}
.t1,.t2{display:block}
.t1{font-size:clamp(2rem,6vw,4.3rem);font-weight:500;letter-spacing:.07em}
.t2{font-size:clamp(2.35rem,9vw,7.2rem);margin-top:.04em;letter-spacing:.01em}
.w{display:inline-block;white-space:nowrap}
.l{display:inline-block;opacity:0;transform:translateY(.5em) scale(.94);filter:blur(12px);
  animation:letter 1.4s var(--ease) both}
.l.dash{color:var(--gold)}
@keyframes letter{55%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}

/* Filete ornamental bajo el título. */
.orn{position:relative;display:block;width:min(52vw,380px);height:1px;margin:1.35rem auto 1.2rem;transform:scaleX(0);opacity:.95;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);animation:grow 1.8s var(--ease) 4.1s forwards}
.orn::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px rgba(236,201,137,.7)}
@keyframes grow{to{transform:scaleX(1)}}

/* Subtítulo: Arial negrita con aparición fundida. */
.subtitle{font:700 clamp(1rem,2.5vw,1.6rem)/1.3 Arial,"Helvetica Neue",Helvetica,sans-serif;letter-spacing:.09em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6);opacity:0;filter:blur(6px);animation:fade 2.6s ease 4.6s forwards}
@keyframes fade{to{opacity:1;filter:blur(0)}}

/* Pie: pequeño pero legible. */
.credit{position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));padding:0 1rem;text-align:center;opacity:0;animation:fade 2.2s ease 5.6s forwards;
  font:400 13px/1.5 Arial,"Helvetica Neue",Helvetica,sans-serif;color:rgba(255,248,236,.94);text-shadow:0 1px 8px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.7)}
.credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,248,236,.55);text-underline-offset:3px;border-radius:2px}
.credit a:hover{text-decoration-color:currentColor}
.credit a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.heart{width:1.05em;height:1.05em;vertical-align:-.17em;fill:#ff6275;filter:drop-shadow(0 0 4px rgba(0,0,0,.6));animation:beat 2.6s ease-in-out 7s infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}

@media (max-width:520px){.hero{padding-bottom:5rem}.orn{margin:1.1rem auto 1rem}}
@media (max-height:420px) and (orientation:landscape){.t1{font-size:1.5rem}.t2{font-size:2.3rem}.orn{margin:.7rem auto .6rem}.subtitle{font-size:.95rem}}

/* Quien prefiere menos movimiento ve la portada ya revelada. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bg{clip-path:none}.bg img{transform:none;filter:none}
  .shade,.l,.subtitle,.credit{opacity:1;transform:none;filter:none}
  .orn{transform:none}.beam{display:none}
}