/* ============================================================================
   EXPERIENCE.CSS — Capa de rediseño visual · Talita Cumi Levántate
   Se carga DESPUÉS de styles.css. Idea: "Amanecer" llevado al máximo —
   cielo vivo, sol naciente, cristal dorado, secciones con ritmo y profundidad.
   ============================================================================ */
:root{
  --gold-grad:linear-gradient(135deg,#F7DE8E 0%,#D4AF37 48%,#B88E1E 100%);
  --glass:linear-gradient(160deg,rgba(255,250,242,.16),rgba(255,250,242,.04));
  --glow:0 0 60px -10px rgba(242,211,116,.45);
  --header-h:76px; --radius-m:20px; --radius-l:32px;
  --shadow-soft:0 1px 2px rgba(30,15,59,.05),0 18px 40px -22px rgba(30,15,59,.38);
  --shadow-lift:0 4px 8px rgba(30,15,59,.06),0 40px 70px -30px rgba(30,15,59,.55);
}
body{background:var(--cream);}
::selection{background:var(--gold);color:var(--purple-deep);}

/* ---- Barra de progreso de lectura ---- */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:var(--gold-grad);box-shadow:0 0 12px rgba(242,211,116,.7);pointer-events:none}

/* ---- Header: cristal oscuro que se compacta al bajar ---- */
.site-header{background:linear-gradient(180deg,rgba(20,10,40,.78),rgba(30,15,59,.62));-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(242,211,116,.16);transition:background .35s ease,box-shadow .35s ease}
.site-header.starfield{background-color:rgba(20,10,40,.7)}
.site-header .header-inner{transition:min-height .35s var(--ease-out)}
.site-header.scrolled{background:rgba(20,10,40,.94);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.site-header.scrolled .header-inner{min-height:62px}
.brand img{box-shadow:0 0 0 2px rgba(242,211,116,.75),0 0 26px rgba(242,211,116,.28)}
nav.main-nav ul a{position:relative;background:none!important}
nav.main-nav ul a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.38rem;height:2px;border-radius:2px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
nav.main-nav ul a:hover::after,nav.main-nav ul a.active::after{transform:scaleX(1)}

/* ---- Botones ---- */
.btn{position:relative;overflow:hidden;letter-spacing:.01em;min-height:48px;padding-inline:1.5rem}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn-gold{background:var(--gold-grad);color:var(--purple-deep);border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 30px -12px rgba(212,175,55,.8)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 40px -14px rgba(212,175,55,.95)}
.btn-outline{border-color:rgba(242,211,116,.6);color:var(--white);background:rgba(255,250,242,.04)}
.btn-outline:hover{background:rgba(242,211,116,.14);border-color:var(--gold-light);transform:translateY(-3px)}
.btn-outline-dark:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(30,15,59,.55)}

/* ---- HERO: cielo vivo + sol naciente ---- */
.hero:not(.detail-hero){min-height:clamp(640px,92vh,900px);padding-top:calc(var(--header-h) + 2rem)}
.site-header{position:sticky}
.hero:not(.detail-hero) .hero-grid{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero .sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .sky i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 8px 1px rgba(242,211,116,.9);animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.hero:not(.detail-hero)::before{width:min(900px,140vw);left:0;right:0;margin-inline:auto;top:auto;bottom:-52%;transform:none;border:0;
  background:radial-gradient(circle,rgba(255,226,150,.95) 0,rgba(244,162,76,.75) 18%,rgba(244,162,76,.28) 40%,transparent 68%);
  box-shadow:none;filter:blur(2px);opacity:.85;animation:sunrise 2.4s var(--ease-out) both,breathe 9s ease-in-out 2.4s infinite}
@keyframes sunrise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:.85}}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.hero:not(.detail-hero)::after{height:70%;background:radial-gradient(90% 100% at 50% 125%,rgba(244,162,76,.6),rgba(212,100,76,.18) 50%,transparent 75%)}
.hero:not(.detail-hero) h1{font-size:clamp(3.2rem,1.4rem + 8.4vw,8rem);line-height:.94;letter-spacing:-.035em;margin-bottom:.35em;text-shadow:0 8px 50px rgba(0,0,0,.35)}
.hero h1 .rise{background:linear-gradient(100deg,#FFF1C2 0%,#F2D374 40%,#F4A24C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-weight:600;padding-right:.1em}
.hero .eyebrow{color:var(--gold-light);font-size:1.2rem}
.hero-lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.6;max-width:44ch}
.hero-actions .btn{min-height:54px;padding-inline:1.9rem;font-size:1rem}
.hero-card{background:var(--glass);border:1px solid rgba(242,211,116,.38);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 50px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,250,242,.28),var(--glow);position:relative;transition:transform .6s var(--ease-out)}
.hero-card:hover{transform:translateY(-4px)}
.hero-card::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:2px;background:var(--gold-grad);border-radius:2px}
.hero-card-title{font-size:1.5rem}

/* ---- Secciones con ritmo ---- */
.section{position:relative;padding-block:clamp(4.5rem,3rem + 6vw,8rem)}
.section-cream{background:radial-gradient(60rem 30rem at 85% 0,rgba(212,175,55,.09),transparent 70%),var(--cream)}
.section-white{background:radial-gradient(50rem 26rem at 5% 100%,rgba(59,30,109,.06),transparent 70%),#fff}
.section-dark{background-color:var(--purple-deep)}
.section-head{max-width:68ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head h2,.section-center h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.9rem);line-height:1.02;letter-spacing:-.028em}
.section-head h2::after,.section-center h2::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:var(--gold-grad);margin-top:1rem}
.section-center h2::after{margin-inline:auto}
.section-foot{margin-top:3rem}
.eyebrow{font-size:1.15rem}
.rise-divider{color:var(--gold)}

/* ---- Tarjetas ---- */
.card{border:1px solid rgba(26,16,36,.07);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s ease}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift);border-color:rgba(212,175,55,.55)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.card:hover::after{transform:scaleX(1)}
.card-thumb,.event-thumb{overflow:hidden}
.card img{transition:transform 1s var(--ease-out),filter .5s ease}
.card:hover img{transform:scale(1.07)}
.card-body{padding:clamp(1.2rem,2vw,1.7rem)}
.card-body h3{font-size:1.3rem;line-height:1.18}
.grid{gap:clamp(1.1rem,2.2vw,2rem)}
.grid-feature>:first-child{box-shadow:var(--shadow-lift)}
.tag{letter-spacing:.04em}

/* ---- Misión (oscuro): cristal con borde dorado ---- */
.section-dark .eyebrow{color:var(--gold-light)}
.section-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(50rem 24rem at 50% 0,rgba(244,162,76,.16),transparent 70%);pointer-events:none}
.section-dark>.wrap{position:relative}
.card-dark{background:var(--glass);border:1px solid rgba(242,211,116,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,250,242,.12),0 30px 50px -34px rgba(0,0,0,.8)}
.card-dark:hover{border-color:rgba(242,211,116,.7);box-shadow:inset 0 1px 0 rgba(255,250,242,.2),0 0 50px -12px rgba(242,211,116,.4),0 30px 50px -30px rgba(0,0,0,.8)}
.card-dark .icon{box-shadow:0 0 24px rgba(242,211,116,.28)}

/* ---- Dar / formularios / paneles ---- */
.give-card,.form-card,.prayer-card,.regular-panel,.svc-card{border-radius:var(--radius-l);box-shadow:var(--shadow-soft)}
.give-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.give-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.give-card.available{box-shadow:var(--shadow-gold),var(--shadow-soft)}
input,select,textarea{transition:border-color .2s ease,box-shadow .25s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(75,42,154,.14)}

/* ---- Galería ---- */
.photo-tile,.mosaic-tile{border-radius:var(--radius-m);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s ease}
.photo-tile:hover,.mosaic-tile:hover{transform:translateY(-5px) scale(1.012);box-shadow:var(--shadow-lift)}

/* ---- Héroes de páginas internas ---- */
.detail-hero{padding-top:calc(var(--header-h) + 1.5rem)}
.detail-hero h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem);letter-spacing:-.03em}

/* ---- Pie de página ---- */
.site-footer{position:relative;background-color:var(--night);padding-top:clamp(4rem,6vw,6rem)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--sunset-orange),var(--gold),transparent)}
.site-footer::after{content:"";position:absolute;inset:0;background:radial-gradient(40rem 16rem at 50% 0,rgba(244,162,76,.14),transparent 70%);pointer-events:none}
.site-footer>*{position:relative;z-index:1}
.footer-verse{font-size:1.15rem;color:var(--gold-light)}

/* ---- Revelado al hacer scroll (solo si JS está activo) ---- */
.js-rv .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--rd,0s)}
.js-rv .rv.in{opacity:1;transform:none}

/* ---- Tablet / móvil ---- */
@media (max-width:980px){
  .hero:not(.detail-hero) .hero-grid{grid-template-columns:1fr}
  .hero:not(.detail-hero)::before{bottom:-38%}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .hero:not(.detail-hero){min-height:auto;padding-bottom:4rem}
  .hero:not(.detail-hero) h1{font-size:clamp(3rem,15vw,4.4rem)}
  .hero-actions .btn{flex:1 1 100%}
  .section{padding-block:3.75rem}
  .card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hero .sky i,.hero:not(.detail-hero)::before{animation:none!important}
  .js-rv .rv{opacity:1;transform:none;transition:none}
  .btn::after{display:none}
}

/* ---- Menú móvil: que ocupe toda la pantalla (arregla el menú "cortado") ----
   El header tiene backdrop-filter, y eso hace que un hijo con position:fixed se mida
   contra el header (una franja de ~70px) en vez de contra la pantalla. Por eso el menú
   se veía recortado. Se coloca justo debajo del header y llena el resto de la pantalla. */
@media (max-width:1080px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; bottom:auto;
    height:calc(100vh - 100%); height:calc(100dvh - 100%);
    max-height:none;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding-bottom:calc(2.5rem + env(safe-area-inset-bottom,0px));
  }
}