:root{
    --parchment:#f7f1e6;
    --parchment-deep:#ecdfc4;
    --parchment-shadow:#d9c9a3;
    --ink:#33231a;
    --ink-soft:#574a3f;
    --gold:#a78a5c;
    --gold-light:#c8a96e;
    --gold-deep:#8a6f45;
    --white:#ffffff;
    --serif-display:'EB Garamond', 'Georgia', serif;
    --serif-cinzel:'Cinzel', 'EB Garamond', serif;
    --serif-body:'Merriweather', Georgia, serif;
    --rule: 1px solid rgba(87,74,63,.35);
    --shadow-soft: 0 10px 30px rgba(51,35,26,.18);
    --shadow-deep: 0 18px 45px rgba(51,35,26,.32);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }

  body{
    margin:0;
    font-family:var(--serif-body);
    color:var(--ink);
    background-color:var(--parchment);
    background-image:
      radial-gradient(ellipse at 12% 8%, rgba(167,138,92,.16), transparent 42%),
      radial-gradient(ellipse at 92% 18%, rgba(87,74,63,.14), transparent 38%),
      radial-gradient(ellipse at 30% 92%, rgba(167,138,92,.13), transparent 45%),
      radial-gradient(ellipse at 80% 85%, rgba(87,74,63,.10), transparent 40%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.2  0 0 0 0 0.16  0 0 0 0 0.11  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}
  a{color:inherit;}
  ::selection{background:var(--gold); color:var(--white);}

  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* ---------- Typography helpers ---------- */
  .eyebrow{
    font-family:var(--serif-cinzel);
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold-deep);
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
  }
  .eyebrow::before, .eyebrow::after{content:"";flex:0 0 34px;height:1px;background:linear-gradient(90deg, transparent, var(--gold), transparent);}
  .eyebrow::after{flex:0 0 34px;}

  h1,h2,h3,h4{font-family:var(--serif-display); font-weight:600; margin:0; color:var(--ink);}
  h2.section-title{font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1.15; letter-spacing:.01em;}
  h2.section-title em{font-style:italic; color:var(--gold-deep);}
  p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:60ch;}

  .divider{
    height:34px;
    margin:0 auto;
    width:100%;
    background-repeat:repeat-x;
    background-size:44px 34px;
    opacity:.9;
  }
  .divider.torn-down{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cpath d='M0 0 L22 30 L44 0 Z' fill='%23f7f1e6'/%3E%3C/svg%3E");
  }
  .divider.torn-up{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cpath d='M0 34 L22 4 L44 34 Z' fill='%23f7f1e6'/%3E%3C/svg%3E");
  }
  .divider.deep-down{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cpath d='M0 0 L22 30 L44 0 Z' fill='%23ecdfc4'/%3E%3C/svg%3E");
  }
  .divider.deep-up{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cpath d='M0 34 L22 4 L44 34 Z' fill='%23ecdfc4'/%3E%3C/svg%3E");
  }
  .divider.ink-down{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Cpath d='M0 0 L22 30 L44 0 Z' fill='%2333231a'/%3E%3C/svg%3E");
  }

  .cross-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px; height:56px;
    border-radius:50%;
    border:1.5px solid var(--gold);
    background:radial-gradient(circle at 35% 30%, #fffdf7, var(--parchment) 70%);
    box-shadow:var(--shadow-soft);
    position:relative;
  }
  .cross-mark svg{width:24px; height:24px;}

  /* drop cap / illuminated letter */
  .illuminated::first-letter{
    font-family:var(--serif-cinzel);
    font-size:3.6em;
    float:left;
    line-height:.8;
    padding:.08em .14em .05em 0;
    color:var(--gold-deep);
    -webkit-text-stroke:.5px var(--ink-soft);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--serif-cinzel);
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-decoration:none;
    padding:16px 30px;
    border-radius:2px;
    border:1px solid var(--gold);
    color:var(--parchment);
    background:linear-gradient(180deg, #b5946250, transparent), var(--ink);
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow:var(--shadow-soft);
  }
  .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-deep);}
  .btn.gold{background:linear-gradient(160deg, var(--gold-light), var(--gold-deep)); color:var(--ink); border-color:var(--gold-deep);}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink-soft);}
  .btn.ghost:hover{border-color:var(--gold);}

  /* ---------- Header ---------- */
  header.site-header{
    position:sticky; top:0; z-index:100;
    background:rgba(247,241,230,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(167,138,92,.45);
  }
  .header-inner{
    max-width:1180px; margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{height:46px; width:46px; border-radius:50%; box-shadow:0 0 0 1px var(--gold);}
  .brand-word{font-family:var(--serif-cinzel); font-size:.92rem; letter-spacing:.06em; color:var(--ink); line-height:1.15;}
  .brand-word small{display:block; font-family:var(--serif-display); font-style:italic; font-weight:400; font-size:.78rem; color:var(--ink-soft); letter-spacing:0;}

  nav.main-nav{display:flex; align-items:center; gap:28px;}
  nav.main-nav a{
    font-family:var(--serif-cinzel); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
    text-decoration:none; color:var(--ink-soft); position:relative; padding:6px 0;
  }
  nav.main-nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-deep);
    transition:width .3s ease;
  }
  nav.main-nav a:hover{color:var(--ink);}
  nav.main-nav a:hover::after{width:100%;}

  .nav-toggle{display:none; background:none; border:1px solid var(--ink-soft); border-radius:2px; width:42px; height:38px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
  .nav-toggle span{display:block; width:20px; height:1.5px; background:var(--ink);}

  @media (max-width:920px){
    nav.main-nav{
      position:fixed; inset:64px 0 auto 0; background:var(--parchment); flex-direction:column; align-items:flex-start;
      padding:20px 28px 28px; gap:16px; border-bottom:1px solid var(--gold); transform:translateY(-130%); transition:transform .35s ease; box-shadow:var(--shadow-deep);
    }
    nav.main-nav.open{transform:translateY(0);}
    .nav-toggle{display:flex;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:92vh; display:flex; align-items:flex-end;
    background:
      linear-gradient(180deg, rgba(29,20,14,.35) 0%, rgba(20,13,9,.55) 55%, rgba(15,10,7,.86) 100%),
      url('https://ibpg.ec/wp-content/uploads/2026/04/01-1024x671.jpg') center/cover no-repeat;
    isolation:isolate;
  }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 45%, rgba(10,7,5,.55) 100%);
    mix-blend-mode:multiply;
  }
  .hero-inner{position:relative; z-index:1; padding:120px 28px 90px; max-width:1180px; margin:0 auto; width:100%;}
  .hero .eyebrow{color:var(--gold-light);}
  .hero .eyebrow::before, .hero .eyebrow::after{background:linear-gradient(90deg, transparent, var(--gold-light), transparent);}
  .hero h1{
    color:var(--parchment); font-size:clamp(2.3rem, 5.6vw, 4.4rem); line-height:1.08; max-width:16ch;
    text-shadow:0 3px 18px rgba(0,0,0,.5);
  }
  .hero h1 em{font-style:italic; color:var(--gold-light);}
  .hero p{color:#e8ddc8; font-size:1.15rem; max-width:52ch; margin:22px 0 34px;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
  .hero-verse{margin-top:46px; font-family:var(--serif-display); font-style:italic; color:#d8c9a5; font-size:1rem; max-width:44ch; border-left:2px solid var(--gold); padding-left:16px;}
  .hero-verse cite{display:block; font-style:normal; font-family:var(--serif-cinzel); font-size:.68rem; letter-spacing:.15em; margin-top:8px; color:var(--gold-light);}

  /* ---------- Section shells ---------- */
  section{position:relative; padding:100px 0;}
  section.tone-deep{background:var(--parchment-deep);}
  section.tone-ink{background:var(--ink); color:var(--parchment);}
  section.tone-ink .eyebrow{color:var(--gold-light);}
  section.tone-ink .eyebrow::before, section.tone-ink .eyebrow::after{background:linear-gradient(90deg, transparent, var(--gold-light), transparent);}
  section.tone-ink h2{color:var(--parchment);}

  .section-head{max-width:760px; margin-bottom:56px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head.center .eyebrow{justify-content:center;}
  .section-head.center p.lede{margin-left:auto; margin-right:auto;}

  /* ---------- Identity / Creemos ---------- */
  .identity-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start;}
  @media (max-width:880px){.identity-grid{grid-template-columns:1fr;}}
  .quote-card{
    background:var(--white); border:1px solid var(--parchment-shadow); border-radius:2px;
    padding:34px 32px; box-shadow:var(--shadow-soft); position:relative; margin-bottom:22px;
  }
  .quote-card::before{content:"❦"; position:absolute; top:-16px; left:28px; background:var(--parchment); padding:0 8px; color:var(--gold-deep); font-size:1.2rem;}
  .quote-card h4{font-family:var(--serif-cinzel); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px;}
  .quote-card blockquote{margin:0; font-style:italic; font-size:1.05rem; color:var(--ink-soft);}
  .quote-card cite{display:block; margin-top:12px; font-style:normal; font-family:var(--serif-cinzel); font-size:.7rem; letter-spacing:.1em; color:var(--ink);}

  .creed-list{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--parchment-shadow); border:1px solid var(--parchment-shadow); margin-top:10px;}
  @media (max-width:700px){.creed-list{grid-template-columns:1fr;}}
  .creed-item{background:var(--parchment); padding:30px 28px; display:flex; gap:18px;}
  .creed-num{font-family:var(--serif-cinzel); font-size:1.5rem; color:var(--gold); flex:0 0 auto;}
  .creed-item h4{font-size:1.15rem; margin-bottom:8px;}
  .creed-item p{margin:0 0 8px; color:var(--ink-soft); font-size:.96rem;}
  .creed-item small{font-family:var(--serif-cinzel); font-size:.65rem; letter-spacing:.08em; color:var(--gold-deep);}

  .confession-link{margin-top:32px; display:inline-flex; align-items:center; gap:10px; font-family:var(--serif-display); font-style:italic; color:var(--ink-soft); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold);}

  /* ---------- Ministerios ---------- */
  .ministry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
  @media (max-width:980px){.ministry-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.ministry-grid{grid-template-columns:1fr;}}
  .ministry-card{background:var(--white); border:1px solid var(--parchment-shadow); box-shadow:var(--shadow-soft); overflow:hidden; display:flex; flex-direction:column;}
  .ministry-media{aspect-ratio:4/3; overflow:hidden; position:relative; background:linear-gradient(160deg,#e7dabb,#cdb488);}
  .ministry-media img{width:100%; height:100%; object-fit:cover; filter:sepia(.28) contrast(1.02);}
  .ministry-plate{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
  .ministry-body{padding:22px 22px 26px;}
  .ministry-body h4{font-size:1.18rem; margin-bottom:10px;}
  .ministry-body p{font-size:.9rem; color:var(--ink-soft); margin:0;}

  /* ---------- Vida congregacional / horarium ---------- */
  .rhythm-list{border-top:var(--rule);}
  .rhythm-row{display:grid; grid-template-columns:190px 1fr; gap:30px; padding:26px 0; border-bottom:var(--rule);}
  @media (max-width:700px){.rhythm-row{grid-template-columns:1fr;}}
  .rhythm-time{font-family:var(--serif-cinzel); font-size:.72rem; letter-spacing:.1em; color:var(--gold-deep); text-transform:uppercase; padding-top:4px;}
  .rhythm-copy h4{font-size:1.25rem; margin-bottom:8px;}
  .rhythm-copy p{margin:0; color:var(--ink-soft); font-size:.96rem; max-width:66ch;}

  .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:60px;}
  @media (max-width:880px){.gallery{grid-template-columns:repeat(2,1fr);}}
  .gallery figure{margin:0; position:relative; overflow:hidden; border:4px solid var(--white); box-shadow:var(--shadow-soft);}
  .gallery figure:nth-child(3n+1){grid-row:span 2;}
  .gallery img{width:100%; height:100%; object-fit:cover; filter:sepia(.32) contrast(1.03); transition:transform .5s ease;}
  .gallery figure:hover img{transform:scale(1.06);}
  .gallery figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:10px 12px 8px;
    font-family:var(--serif-cinzel); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--parchment); background:linear-gradient(0deg, rgba(20,13,9,.78), transparent);
  }

  /* ---------- Liderazgo ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  @media (max-width:880px){.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.team-grid{grid-template-columns:1fr;}}
  .team-card{text-align:center; padding:8px;}
  .medallion{
    width:118px; height:118px; border-radius:50%; margin:0 auto 18px; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, #fffdf8, var(--parchment-deep) 75%);
    border:2px solid var(--gold);
    box-shadow:0 0 0 5px var(--parchment), 0 0 0 6px var(--gold-light), var(--shadow-soft);
  }
  .medallion span{font-family:var(--serif-cinzel); font-size:1.5rem; color:var(--gold-deep); letter-spacing:.03em;}
  .team-card h4{font-size:1.12rem; margin-bottom:4px;}
  .team-role{font-family:var(--serif-cinzel); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px; display:block;}
  .team-card p{font-size:.87rem; color:var(--ink-soft); margin:0;}

  /* ---------- Testimonios ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  @media (max-width:880px){.testi-grid{grid-template-columns:1fr;}}
  .testi-card{
    background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--ink);
    border:1px solid rgba(167,138,92,.4); padding:34px 28px; position:relative; box-shadow:var(--shadow-deep);
  }
  .testi-card::before{content:"“"; font-family:var(--serif-display); font-size:3.2rem; color:var(--gold); position:absolute; top:6px; left:20px; line-height:1;}
  .testi-card blockquote{margin:26px 0 20px; font-style:italic; color:#e6dcc4; font-size:.98rem;}
  .testi-card footer{font-family:var(--serif-cinzel); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light);}
  .testi-card footer small{display:block; font-family:var(--serif-body); font-style:italic; text-transform:none; letter-spacing:0; color:#a99b7e; margin-top:4px;}

  /* ---------- Membresía FAQ ---------- */
  .faq{max-width:820px; margin:0 auto; border-top:var(--rule);}
  .faq details{border-bottom:var(--rule); padding:22px 4px;}
  .faq summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px;
    font-family:var(--serif-display); font-size:1.15rem; color:var(--ink);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-family:var(--serif-cinzel); font-size:1.4rem; color:var(--gold-deep); transition:transform .3s ease;}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq .faq-a{margin:16px 0 4px; color:var(--ink-soft); font-size:.97rem; max-width:70ch;}

  /* ---------- Sermones / YouTube ---------- */
  .yt-frame-wrap{
    position:relative; padding-top:56.25%; border:6px solid var(--white); box-shadow:var(--shadow-deep); margin-bottom:50px;
  }
  .yt-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

  .sermon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:880px){.sermon-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.sermon-grid{grid-template-columns:1fr;}}
  .sermon-card{text-decoration:none; display:block; background:var(--white); border:1px solid var(--parchment-shadow); box-shadow:var(--shadow-soft); overflow:hidden; transition:transform .3s ease;}
  .sermon-card:hover{transform:translateY(-4px);}
  .sermon-thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink);}
  .sermon-thumb img{width:100%; height:100%; object-fit:cover; filter:sepia(.35) contrast(1.05);}
  .play-badge{
    position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
    background:rgba(20,13,9,.55); border:1.5px solid var(--gold-light); display:flex; align-items:center; justify-content:center;
  }
  .play-badge svg{width:16px; height:16px; fill:var(--parchment); margin-left:2px;}
  .sermon-info{padding:16px 18px 20px;}
  .sermon-info h5{font-family:var(--serif-display); font-size:1.02rem; margin:0 0 6px; color:var(--ink);}
  .sermon-info span{font-family:var(--serif-cinzel); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep);}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:start;}
  @media (max-width:880px){.contact-grid{grid-template-columns:1fr;}}
  .info-line{display:flex; gap:16px; padding:18px 0; border-bottom:var(--rule);}
  .info-line:first-child{border-top:var(--rule);}
  .info-line .ico{flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center;}
  .info-line .ico svg{width:15px; height:15px;}
  .info-line strong{display:block; font-family:var(--serif-cinzel); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px;}
  .info-line p{margin:0; color:var(--ink-soft); font-size:.95rem;}

  form.contact-form{background:var(--white); border:1px solid var(--parchment-shadow); padding:38px; box-shadow:var(--shadow-soft);}
  .field{margin-bottom:20px;}
  .field label{display:block; font-family:var(--serif-cinzel); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;}
  .field input, .field textarea{
    width:100%; border:none; border-bottom:1px solid var(--parchment-shadow); background:transparent;
    font-family:var(--serif-body); font-size:.98rem; padding:10px 4px; color:var(--ink); resize:vertical;
  }
  .field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--gold-deep);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media (max-width:520px){.field-row{grid-template-columns:1fr;}}

  /* ---------- Footer ---------- */
  footer.site-footer{background:var(--ink); color:#d9cdb2; padding:80px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(167,138,92,.3);}
  @media (max-width:880px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
  .footer-brand img{height:38px; margin-bottom:16px;}
  .footer-brand p{font-size:.88rem; color:#a99b7e; max-width:32ch; font-style:italic; font-family:var(--serif-display);}
  footer h5{font-family:var(--serif-cinzel); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  footer a{text-decoration:none; color:#d9cdb2; font-size:.92rem; transition:color .25s ease;}
  footer a:hover{color:var(--gold-light);}
  .footer-bottom{padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#8f8264;}

  .skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--parchment); padding:12px 18px; z-index:999;}
  .skip-link:focus{left:12px; top:12px;}

  a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px;}