:root{
      --bg:#0b0b0c;
      --surface:#111214;
      --surface-2:#181a1e;
      --text:#eaecef;
      --muted:#a4aab5;
      --primary:#f1b34c;   /* acento cálido como en el UI de referencia */
      --primary-700:#d49a3c;
      --ring:rgba(241,179,76,.35);
      --card:#0f1012;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
      color:var(--text);
      background:linear-gradient(180deg,#0a0a0b 0%, #080d2e 60%, #0b0b0c 100%);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; height:auto; display:block}
    .container{max-width:1200px; margin:0 auto; padding:0 20px}
    .btn{
      display:inline-flex; align-items:center; gap:.6rem;
      background:var(--primary); color:#111;
      border-radius:999px; padding:.9rem 1.2rem; font-weight:700;
      box-shadow:0 6px 18px rgba(241,179,76,.3);
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .btn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(241,179,76,.35); background:var(--primary-700)}
    .btn--ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16)}
    .btn--ghost:hover{background:rgba(255,255,255,.06)}

    /* Skip link */
    .skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
    .skip:focus{left:16px; top:16px; width:auto; height:auto; padding:.6rem .9rem; background:#fff; color:#111; border-radius:8px; z-index:9999}

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg, rgba(13,13,14,.75), rgba(13,13,14,.55) 60%, transparent);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
    .logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
    .logo-mark{
      width:34px; height:34px; border-radius:10px;
      background: radial-gradient(100% 100% at 70% 20%, #ffe9c8 0%, #f1b34c 45%, #b07a23 100%);
      box-shadow:inset 0 -6px 16px rgba(0,0,0,.45), inset 0 2px 6px rgba(255,255,255,.45);
    }
    nav ul{display:flex; list-style:none; gap:1.2rem; margin:0; padding:0}
    nav a{color:var(--muted); font-weight:600}
    nav a[aria-current="page"], nav a:hover{color:var(--text)}

    /* Hero */
    .hero{
      position:relative; overflow:hidden; border-radius:0 0 clamp(20px,3vw,28px) clamp(20px,3vw,28px);
      background: #080d2e;
    }
    .hero-media{
      position:absolute; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(1200px 700px at 10% 10%, rgba(241,179,76,.15), transparent 60%),
        radial-gradient(1200px 800px at 80% 0%, rgba(46,133,238,.10), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.66));
    }
    .hero::before{
      content:""; position:absolute; inset:-30px -30px auto -30px; height:62%;
      filter:grayscale(.15) contrast(1.1) saturate(1.05) brightness(.85);
      z-index:0;
      border-radius:0 0 clamp(20px,3vw,28px) clamp(20px,3vw,28px);
    }
    .hero-inner{position:relative; z-index:1; padding: 20px;}
    .eyebrow{color:var(--primary); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem}
    .hero h1{margin:.5rem 0 1rem; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height:1.06}
    .hero p{margin:0 0 1.6rem; color:var(--muted); max-width:60ch}
    .actions{display:flex; gap:.8rem; flex-wrap:wrap}

    .picture{
        background-image: url('../img/oasis-sundays.avif');
    }

    /* Sections */
    section{padding: clamp(40px, 6.5vw, 84px) 0}
    .section-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
    .section-head h2{margin:0; font-size:clamp(1.4rem,2.6vw,2rem)}
    .section-desc{color:var(--muted); margin:0}
    .grid{display:grid; gap:18px}
    .grid--3{grid-template-columns:repeat(3, 1fr)}
    @media (max-width:980px){.grid--3{grid-template-columns:repeat(2, 1fr)}}
    @media (max-width:640px){.grid--3{grid-template-columns:1fr}}

    /* Cards (Mensajes) */
    .card{
      background:linear-gradient(180deg, var(--card), var(--surface-2));
      border:1px solid rgba(255,255,255,.06);
      border-radius:calc(var(--radius) + 2px);
      box-shadow:var(--shadow);
      overflow:hidden;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .card:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.45); border-color:rgba(255,255,255,.12)}
    .card-media{position:relative; aspect-ratio: 16/9; background:#0b0b0c}
    .card-media img{width:100%; height:100%; object-fit:cover}
    .badge-icons{
      position:absolute; right:12px; bottom:12px; display:flex; gap:8px;
    }
    .icon-pill{
      width:34px; height:34px; border-radius:50%;
      display:grid; place-items:center;
      background:#0e0f12; border:1px solid rgba(255,255,255,.12);
      box-shadow:0 6px 14px rgba(0,0,0,.35);
    }
    .card-body{padding:16px}
    .meta{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; margin-bottom:.4rem}
    .title{font-weight:800; line-height:1.25; margin:.2rem 0 .6rem; font-size:1.08rem}
    .teacher{display:flex; align-items:center; gap:.55rem; color:var(--muted); font-weight:600; font-size:.92rem}
    .avatar{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#333,#555)}

    /* Info / Visítanos */
    .info{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
    @media (max-width:900px){.info{grid-template-columns:1fr; gap:16px}}
    .card--info{padding:22px 20px}
    .info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
    @media (max-width:640px){.info-grid{grid-template-columns:1fr}}
    .info-item{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px;box-shadow: #0000000d 1px 1px 20px 3px; border: 1px solid rgb(140 140 140 / 15%) !important;}
    .info-item h3{margin:0 0 .2rem; font-size:1rem}
    .info-item p{margin:0; color:var(--muted)}

    /* Newsletter */
    .newsletter{
      display:flex; gap:10px; width:100%;
      background:var(--surface); border:1px solid rgba(255,255,255,.08);
      border-radius:999px; padding:6px; align-items:center;
    }
    .newsletter input{
      flex:1; min-width:140px; background:transparent; border:none; outline:none;
      color:var(--text); padding:.85rem 1rem; font-size:1rem;
    }
    .newsletter input::placeholder{color:#9aa1ab}
    .newsletter button{border:none}

    /* Footer */
    footer{padding:50px 0; background:#0a0a0b; border-top:1px solid rgba(255,255,255,.06)}
    .footer-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px}
    @media (max-width:860px){.footer-grid{grid-template-columns:1fr}}
    .kicker{color:var(--muted); font-size:.92rem}

    /* Utility */
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
    .muted{color:var(--muted)}
    .chip{display:inline-block; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:#111; background:var(--primary); border-radius:999px; padding:.42rem .7rem}
  


/* === Theme Update: White background + Button color #080d2e === */
:root{
  --primary:#080d2e;
  --primary-700:#060a24;
  --text:#0b0b0c;
  --muted:#5e6675;
  --bg:#ffffff;
  --surface:#ffffff;
  --card:#ffffff;
  --ring:rgba(8,13,46,.18);
}

/* Base background/text */
html, body {
  background: #ffffff !important;
  color: var(--text);
}

/* Remove dark/gradient backgrounds across common layout blocks */
header, footer, main, .section, .banner, .header, .footer, .wrapper, .card, .panel {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none;
  border-color: rgba(8,13,46,.08);
}

/* Links and nav */
a { color: inherit; }
nav a { color: var(--muted); }
nav a:hover, nav a[aria-current="page"] { color: var(--text); }

/* Buttons (covers many class patterns) */
button,
.btn,
.button,
.Button,
[class*="btn"],
[class*="Btn"],
[class*="button"],
[role="button"] {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 6px 18px rgba(8,13,46,.25) !important;
}

button:hover,
.btn:hover,
.button:hover,
.Button:hover,
[class*="btn"]:hover,
[class*="Btn"]:hover,
[class*="button"]:hover,
[role="button"]:hover {
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  box-shadow: 0 10px 26px rgba(8,13,46,.30) !important;
}

/* Ghost/outline buttons */
.btn--ghost, .button--ghost, .btn-outline, .button-outline {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(8,13,46,.16) !important;
}

.btn-white{
  background: white !important;
  color: var(--text) !important;
}

.btn-white-ghost{
  background: transparent !important;
  color: white !important;
}

.btn-white:hover{
  background: var(--primary) !important;
  color: white !important;
}

.btn-white-ghost:hover{
  background: white !important;
  color:  var(--primary) !important;
}


/* Inputs / fields in light mode */
input, select, textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid rgba(8,13,46,.16) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: #8b93a2 !important; }

/* Cards look light */
.card, .panel, .tile, .feature, .pricing-card {
  background: linear-gradient(180deg, var(--card), #f6f8fb) !important;
  border: 1px solid rgba(8,13,46,.12) !important;
  box-shadow: 0 10px 24px rgba(8,13,46,.06) !important;
}

.text-white{ color: white !important}

/* Chips / tags */
.chip, .tag, .badge {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
}

.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  gap:.5rem; padding:.55rem .7rem;
  border:1px solid rgba(8,13,46,.16);
  background:#fff; color:var(--text);
  border-radius:10px; cursor:pointer;
}

@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  header .nav{ position:relative; padding: 30px 40px;}

  /* Menú colapsable */
  header nav{
    position:absolute; top:100%; left:0; right:0;
    display:none; background:var(--surface);
    border-bottom:1px solid rgba(8,13,46,.12);
    z-index:60;
  }
  header nav[data-open="true"]{ display:block; }
  header nav ul{
    flex-direction:column; gap:0; padding:10px 20px;
  }
  header nav a{
    display:block; padding:12px 0;
  }
}