/* =========================================================
   Site.css — Hermandad
   Paleta: negro terciopelo + oro viejo + hueso/encaje
   ========================================================= */

:root{
  --black:      #0b0a08;
  --black-2:    #131110;
  --gold:       #c9a24a;
  --gold-light: #e8d9b0;
  --ivory:      #f5f0e6;
  --wine:       #3d0f10;
  --hairline:   rgba(201,162,74,0.35);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--ivory);
  font-family:'EB Garamond', serif;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; }

/* ---------- Sunburst signature motif (rayos de la corona) ---------- */
.sunburst{
  position:absolute;
  pointer-events:none;
  opacity:0.16;
}
.sunburst svg{ width:100%; height:100%; display:block; }

/* ================= NAV / MASTER HEADER ================= */
header.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 5vw;
  background:linear-gradient(to bottom, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.0) 100%);
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, padding .4s ease;
}
header.site-header.scrolled{
  background:rgba(11,10,8,0.94);
  border-bottom:1px solid var(--hairline);
  padding:14px 5vw;
  backdrop-filter:blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--gold-light);
  text-decoration:none;
}
.brand-mark {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand-mark svg{ width:20px; height:20px; }
.brand-mark img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.brand-text{
  font-family:'Cinzel', serif;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--gold-light);
  opacity:0.9;
}
.brand-text span{ display:block; font-size:0.62rem; color:var(--gold); opacity:0.75; }
.nav-social {
    display: flex;
    align-items: center;
    padding-left: clamp(18px, 3vw, 42px);
    border-left: 1px solid var(--hairline);
}

    .nav-social a {
        display: flex;
        color: var(--gold);
        opacity: 0.85;
        transition: opacity .3s ease, color .3s ease, transform .3s ease;
    }

        .nav-social a:hover, .nav-social a:focus-visible {
            color: var(--gold-light);
            opacity: 1;
            transform: translateY(-2px);
        }

        .nav-social a:focus-visible {
            outline: 1px dashed var(--gold);
            outline-offset: 4px;
        }

/* dentro del menú móvil abierto, que no herede el borde lateral */
header.site-header.open .nav-social {
    border-left: none;
    padding-left: 0;
}

nav.main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:clamp(18px, 3vw, 42px);
}
nav.main-nav a{
  font-family:'Cinzel', serif;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ivory);
  text-decoration:none;
  position:relative;
  padding-bottom:6px;
  opacity:0.85;
  transition:opacity .3s ease, color .3s ease;
  white-space:nowrap;
}
nav.main-nav a::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .35s ease, left .35s ease;
}
nav.main-nav a:hover, nav.main-nav a:focus-visible{
  opacity:1;
  color:var(--gold-light);
}
nav.main-nav a:hover::after, nav.main-nav a:focus-visible::after{
  width:100%; left:0;
}
nav.main-nav a.active{ opacity:1; color:var(--gold-light); }
nav.main-nav a.active::after{ width:100%; left:0; }
nav.main-nav a:focus-visible{ outline:1px dashed var(--gold); outline-offset:4px; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--gold);
  color:var(--gold-light);
  width:42px; height:42px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
}

#nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:90;
}

@media (max-width: 860px){
  nav.main-nav ul{ display:none; }
  .nav-toggle{ display:block; }
  header.site-header.open nav.main-nav ul{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:78vw;
    max-width:320px;
    background:var(--black);
    border-left:1px solid var(--hairline);
    padding:110px 40px;
    gap:34px;
    align-items:flex-start;
  }

  /* sin marco circular en móvil, ni en el logo ni en el botón de menú */
  .brand-mark{
    border:none;
    border-radius:0;
    background:transparent;
    padding:0;
    width:40px;
    height:40px;
  }
  .nav-toggle{
    border:none;
    border-radius:0;
    background:transparent;
  }
}

/* ================= PAGE BODY WRAPPER ================= */
/* every content page should give its outermost element this class
   so it starts below the fixed header */
.page-body{ padding-top:0; }

/* ================= HERO (Default.aspx) ================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:stretch;
}

.hero-image{
  position:relative;
  flex:0 0 46%;
  max-width:640px;
  overflow:hidden;
}
.hero-image::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:35%;
  background:linear-gradient(to right, rgba(11,10,8,0) 0%, var(--black) 100%);
}
.hero-image img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:70% center;
  display:block;
  filter:saturate(1.02) contrast(1.03);
}

.hero-copy{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:160px 6vw 100px;
  text-align:center;
}

.sunburst.behind-copy{
  top:50%; left:50%;
  width:min(70vw, 720px);
  height:min(70vw, 720px);
  transform:translate(-50%,-50%);
}

.prayer{ position:relative; max-width:560px; }
.eyebrow{
  font-family:'Cinzel', serif;
  font-size:0.7rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.prayer h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(2.1rem, 3.6vw, 3.1rem);
  line-height:1.15;
  color:var(--gold-light);
  margin-bottom:8px;
}
.prayer .subtitle{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--gold);
  opacity:0.85;
  margin-bottom:36px;
}
.divider{
  width:64px; height:1px;
  background:var(--gold);
  margin:0 auto 36px;
  position:relative;
}
.divider::before{
  content:"✦";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--black);
  color:var(--gold);
  font-size:0.7rem;
  padding:0 8px;
}

.prayer p{
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:1.14rem;
  line-height:1.9;
  color:var(--ivory);
  opacity:0.92;
}
.prayer p + p{ margin-top:1.4em; }

.prayer .amen{
  display:block;
  margin-top:34px;
  font-family:'Cinzel', serif;
  font-style:normal;
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.85;
}

.prayer .note{
  margin-top:46px;
  font-family:'EB Garamond', serif;
  font-style:normal;
  font-size:0.82rem;
  color:var(--gold-light);
  opacity:0.55;
  letter-spacing:0.02em;
}

.scroll-cue{
  position:absolute;
  bottom:34px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  color:var(--gold);
  opacity:0.7;
  font-family:'Cinzel', serif;
  font-size:0.6rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
}
.scroll-cue .line{
  width:1px; height:34px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:pulse-line 2.4s ease-in-out infinite;
}
@keyframes pulse-line{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

@media (max-width: 860px){
  .hero{ flex-direction:column; }
  .hero-image{
    flex:none;
    max-width:none;
    width:100%;
    height:56vh;
    /* solo lo justo para despejar el header fijo (~88px en móvil) */
    margin-top:88px;
  }
  .hero-image::after{
    width:100%; height:40%;
    top:auto; bottom:0; right:0; left:0;
    background:linear-gradient(to bottom, rgba(11,10,8,0) 0%, var(--black) 100%);
  }
  .hero-image img{
    object-position:center top;
  }
  .hero-copy{ padding:48px 8vw 90px; }
}

/* ================= CALENDAR / OCCASIONS GRID ================= */
.calendar{
  position:relative;
  padding:120px 6vw 140px;
  background:var(--black-2);
  border-top:1px solid var(--hairline);
}
.calendar-head{ text-align:center; max-width:640px; margin:0 auto 70px; }
.calendar-head .eyebrow{ margin-bottom:18px; }
.calendar-head h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  color:var(--gold-light);
}

.occasions{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  max-width:1180px;
  margin:0 auto;
  border-left:1px solid var(--hairline);
}
.occasion{
  position:relative;
  padding:0 32px;
  border-right:1px solid var(--hairline);
  text-align:center;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .35s ease;
}
.occasion:hover, .occasion:focus-visible{ transform:translateY(-6px); }
.occasion:focus-visible{ outline:1px dashed var(--gold); outline-offset:6px; }

.occasion-mark{ width:44px; height:44px; margin-bottom:22px; color:var(--gold); opacity:0.85; }
.occasion-mark svg{ width:100%; height:100%; }

.occasion h3{
  font-family:'Cinzel', serif;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-light);
  line-height:1.6;
  margin-bottom:12px;
}
.occasion .when{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:0.95rem;
  color:var(--gold);
  opacity:0.7;
}

@media (max-width: 980px){
  .occasions{ grid-template-columns:repeat(2, 1fr); }
  .occasion{ border-bottom:1px solid var(--hairline); padding:36px 20px; }
}
@media (max-width: 560px){
  .occasions{ grid-template-columns:1fr; }
}

/* ================= MASTER FOOTER ================= */
footer.site-footer{
  padding:46px 6vw;
  text-align:center;
  border-top:1px solid var(--hairline);
  font-family:'Cinzel', serif;
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.55;
}

/* ================= INNER PAGES (SP-driven) ================= */
/* utility scaffolding for the four occasion pages that will bind
   to stored procedures — use as a starting point, not final content */
.inner-hero{
  padding:180px 6vw 80px;
  text-align:center;
  border-bottom:1px solid var(--hairline);
}
.inner-hero .eyebrow{ margin-bottom:18px; }
.inner-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--gold-light);
}
.inner-content{
  max-width:960px;
  margin:0 auto;
  padding:80px 6vw 140px;
}

/* ---- tabla de turnos (SP TurnosWeb) ---- */
.turnos-table{
  overflow-x:auto;
  border:1px solid var(--hairline);
  border-radius:4px;
}
.turnos-table table{
  width:100%;
  border-collapse:collapse;
  font-family:'EB Garamond', serif;
  font-size:1rem;
}
.turnos-table thead th{
  text-align:left;
  padding:16px 20px;
  background:var(--black-2);
  border-bottom:1px solid var(--hairline);
  font-family:'Cinzel', serif;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.turnos-table tbody td{
  padding:14px 20px;
  border-bottom:1px solid rgba(201,162,74,0.14);
  color:var(--ivory);
  opacity:0.92;
  white-space:nowrap;
}
.turnos-table tbody tr:last-child td{ border-bottom:none; }
.turnos-table tbody tr:hover td{ background:rgba(201,162,74,0.05); }

.turnos-empty{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--gold-light);
  opacity:0.7;
  text-align:center;
  padding:60px 20px;
  border:1px dashed var(--hairline);
  border-radius:4px;
}