<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --blue: #0077C0;
    --blue-dark: #005A91;
    --blue-deep: #003F6B;
    --blue-pale: #E6F3FB;
    --orange: #F4901D;
    --orange-dark: #D4780A;
    --orange-pale: #FEF3E6;
    --white: #FFFFFF;
    --cream: #F9F7F4;
    --text: #1A1A2E;
    --text-muted: #4A5568;
    --border: #E2E8F0;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;
  }
body { font-family: var(--font-body); background: var(--cream); color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
.h1 .page-header{color: var(--blue); font-size: 32pt;font-family: var(--font-display);}
.header .logo.small {
       width: 3rem;
   }
.mod-menu {flex: 1;   display: flex;  align-items: end; }
.nav a {
    --nav-link-color: var(--blue);
    --nav-link-hover-color: var(--link-hover-color);
  }
.section-title {color: var(--blue); font-family: var(--font-display); font-size: 32pt;}
  .btn-primary { background: var(--orange); color: var(--white); padding: 0.85rem 2rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; border: none; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; letter-spacing: 0.03em; transition: background 0.2s, transform 0.15s; }
  .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
  .btn-outline-white { background: transparent; color: var(--white); padding: 0.85rem 2rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 400; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color 0.2s, color 0.2s; }
 .btn-outline-black { background: transparent; color: var(--blue-deep); padding: 0.55rem 1.2rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; border: 1.5px solid var(--blue-deep); border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
  .btn-outline-white:hover { border-color: var(--orange); color: var(--orange); }
/* actividades */
 .actividades-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
/* ENCUENTROS */
  .encuentros { background: var(--cream); }
  .encuentros-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }
  .encuentro-card { background: var(--white); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
  .encuentro-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,119,192,0.13); }
  .card-accent { height: 8px; }
  .card-accent.hombres { background: var(--blue); }
  .card-accent.mujeres { background: #8B3A5A; }
  .card-accent.parejas { background: var(--orange); }
  .card-body { padding: 1.8rem; }
  .card-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 1.2rem; }
  .card-icon.hombres { background: var(--blue-pale); }
  .card-icon.mujeres { background: rgba(139,58,90,0.08); }
  .card-icon.parejas { background: var(--orange-pale); }
  .card-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 0.65rem; }
  .card-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.3rem; }
  .card-dates { font-size: 0.78rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.38rem; margin-bottom: 1.4rem; padding-left: 0.8rem; border-left: 3px solid var(--orange-pale); }
  .card-dates .date-tag { font-weight: 500; color: var(--blue); }
/* TEMAS DE PREDICACION */
  .predicas { background: var(--cream); }
  .predicas-accent {background: var(--orange); height: 4px;}
  .predicas-grid { display: grid; grid-template-columns: repeat(1,1fr); gap: 1.0rem; margin-top: 0.5rem; }
  .predicas-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .predicas-body { padding: 0.8rem; }
  .predicas-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--blue); margin-bottom: 0.2rem; }
  .predicas-desc { font-size: 1rem; color: var(--text); line-height: 1.7; margin-bottom: 0rem; }
  .predicas-apoyos { font-size: 0.9rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.38rem; margin-bottom: 1.4rem; padding-left: 0.8rem; border-left: 3px solid var(--orange-pale); }
/* ===== ASAMBLEAS ===== */
  .bg-azul-suave { background: var(--blue-pale); }
  .asambleas-section { padding: 20px 24px; }
  .asambleas-inner { max-width: 1200px; margin: 0 auto; }

  .asambleas-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px; margin-bottom: 20px;
  }
  .asamblea-card {
    background: white; border-radius: 16px;
    padding: 24px; border: 1px solid rgba(0,119,192,0.15);
    transition: all 0.25s; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }
  .asamblea-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,119,192,0.12); border-color: var(--blue); }
  .asamblea-dia {
    background: var(--blue); color: white;
    display: inline-block; padding: 4px 12px;
    border-radius: 100px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 14px;
  }
  .asamblea-dia.naranja { background: var(--orange); }
  .asamblea-dia.virtual { background: #27ae60; }
  .asamblea-card h3 { font-family: 'Playfair Display', serif; font-size: 17px; color: #1a2a3a; margin-bottom: 8px; }
  .asamblea-card p { font-size: 13px; color: var(--text); line-height: 1.6; }
  .asamblea-hora { font-size: 13px; font-weight: 700; color: var(--azul); margin-top: 12px; }
/* Otros  */
  .btn-card { display: inline-block; font-size: 0.8rem; font-weight: 500; text-decoration: none; letter-spacing: 0.05em; padding: 0.55rem 1.2rem; border-radius: 3px; transition: background 0.2s; }
  .btn-card.hombres { background: var(--blue); color: var(--white); }
  .btn-card.hombres:hover { background: var(--blue-dark); }
  .btn-card.mujeres { background: #8B3A5A; color: var(--white); }
  .btn-card.parejas { background: var(--orange); color: var(--white); }
  .btn-card.parejas:hover { background: var(--orange-dark); }
