/* =============================================================
   BASE MINISTERIOS - Estilos compartidos y sistema de diseño
   ============================================================= */

:root {
  /* Escalas tipográficas fluidas */
  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.45rem + 0.9vw, 2.2rem);
  --step-3: clamp(2.15rem, 1.9rem + 1.4vw, 3rem);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 24px;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,.08), 0 1px 3px -1px rgba(0,0,0,.12);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,.12), 0 2px 6px -2px rgba(0,0,0,.16);
  --shadow-lg: 0 8px 24px -4px rgba(0,0,0,.18), 0 4px 12px -4px rgba(0,0,0,.22);
  --trans-fast: .18s cubic-bezier(.4,0,.2,1);
  --trans-slow: .4s cubic-bezier(.4,0,.2,1);
  --gradient-mask: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.65));
  --max-width: 1180px;
}

/* Paletas por ministerio (aplicar en body[data-ministerio="..."]) */
body[data-ministerio="varones"] { --m-color: #1a4971; --m-color-alt:#82b2d7; --m-bg-accent:#e9f0f7; }
body[data-ministerio="damas"] { --m-color: #9e4c98; --m-color-alt:#f4c3ef; --m-bg-accent:#f9d5f5; }
body[data-ministerio="jovenes"] { --m-color:#1e88e5; --m-color-alt:#ff8a65; --m-bg-accent:#c5e1fd; }
body[data-ministerio="ninos"] { --m-color:#ff9800; --m-color-alt:#ffe0b2; --m-bg-accent:#fff3e0; }
body[data-ministerio="evangelismo"] { --m-color:#00695c; --m-color-alt:#26a69a; --m-bg-accent:#e0f2f1; }
body[data-ministerio="matrimonios"] { --m-color:#ad1457; --m-color-alt:#f48fb1; --m-bg-accent:#fce4ec; }

/* Layout utilitario */
.container-min { width:100%; max-width: var(--max-width); margin:0 auto; padding: clamp(1rem,2vw,2rem); }
.grid-responsive { display:grid; gap:clamp(1.2rem,2vw,2.2rem); }
.grid-3 { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }

.section { position:relative; padding: clamp(3rem,6vw,5rem) 0; }
.section-header { text-align:center; margin:0 auto clamp(2rem,4vw,3rem); max-width:780px; }
.section-eyebrow { font-size: var(--step--1); letter-spacing:.12em; text-transform:uppercase; color: var(--m-color-alt); font-weight:600; display:block; margin-bottom:.5rem; }
.section-title { font-size: var(--step-2); line-height:1.15; font-weight:700; color: var(--m-color); margin:0 0 1rem; position:relative; }
.section-title::after { content:''; display:block; width:72px; height:4px; background: var(--m-color-alt); border-radius:2px; margin: .75rem auto 0; }
.section-lead { font-size: var(--step-0); color:#344054; line-height:1.6; margin:0 auto; }

/* Hero unificado */
.hero-min { position:relative; min-height: clamp(480px,65vh,720px); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.hero-min::before { content:""; position:absolute; inset:0; background: var(--gradient-mask); z-index:1; }
.hero-min > .hero-media { position:absolute; inset:0; z-index:0; }
.hero-min > .hero-media img, .hero-min > .hero-media picture { width:100%; height:100%; object-fit:cover; display:block; }
.hero-min .hero-inner { position:relative; z-index:2; max-width:900px; padding: clamp(1rem,2vw,2rem); animation: fadeHero .9s var(--trans-fast) both; }
.hero-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:.65rem; margin:1.25rem 0 0; }
.badge { background:rgba(255,255,255,.12); backdrop-filter:blur(6px); color:#fff; padding:.5rem .85rem; border-radius: 2rem; font-size:.75rem; letter-spacing:.05em; font-weight:500; text-transform:uppercase; display:inline-flex; gap:.4rem; align-items:center; }

@keyframes fadeHero { from {opacity:0; transform: translateY(24px);} to { opacity:1; transform:translateY(0);} }

/* Cards genéricas */
.card { background:#fff; border-radius: var(--radius-m); box-shadow: var(--shadow-sm); padding: clamp(1rem,1.4vw,1.75rem); position:relative; display:flex; flex-direction:column; gap:.75rem; transition: var(--trans-fast); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-accent { background: var(--m-bg-accent); }
.card-outline { border:1px solid color-mix(in srgb,var(--m-color) 25%,transparent); }

/* Líderes / Personas */
.people-grid { display:grid; gap:clamp(1.4rem,2.4vw,2.5rem); grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.person { background:#fff; border-radius: var(--radius-m); box-shadow: var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
.person-media { aspect-ratio: 4/3; position:relative; overflow:hidden; }
.person-media img { width:100%; height:100%; object-fit:cover; transition: var(--trans-fast); }
.person:hover .person-media img { scale:1.05; }
.person-body { padding:1rem 1rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.person-name { font-weight:600; color: var(--m-color); font-size:1rem; margin:0; }
.person-role { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--m-color-alt); font-weight:600; }
.person-desc { font-size:.8rem; line-height:1.45; color:#475467; }

/* Recursos / Feature grid */
.feature-grid { display:grid; gap:clamp(1.2rem,2vw,2rem); grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.feature { background:#fff; border:1px solid #eef0f3; border-radius: var(--radius-m); padding:1.15rem 1.15rem 1.4rem; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.75rem; box-shadow: var(--shadow-sm); }
.feature::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,var(--m-color) -10%,transparent 60%); opacity:.05; pointer-events:none; }
.feature-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background: var(--m-color); color:#fff; font-size:1.35rem; box-shadow:0 4px 12px -2px rgba(0,0,0,.22); }
.feature-title { font-size:1.05rem; font-weight:600; color: var(--m-color); margin:0; }
.feature-text { font-size:.85rem; line-height:1.55; color:#475467; margin:0; }

/* Bloque de contacto unificado */
.contact-block { background: var(--m-bg-accent); border-radius: var(--radius-l); padding: clamp(1.8rem,3vw,3rem); box-shadow: var(--shadow-sm); display:grid; gap:1.5rem; }
.contact-block h3 { margin:0; font-size: var(--step-1); color: var(--m-color); }
.contact-grid { display:grid; gap:1.2rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.contact-item { background:#fff; padding:1rem 1.1rem 1.15rem; border-radius: var(--radius-m); box-shadow: var(--shadow-sm); display:flex; gap:.85rem; align-items:flex-start; }
.contact-item i { font-size:1.1rem; color: var(--m-color); margin-top:.2rem; }
.contact-item p { margin:0; font-size:.8rem; line-height:1.4; color:#475467; }

/* Botones base */
.btn-min { --btn-bg: var(--m-color); --btn-fg:#fff; --btn-border: var(--m-color); cursor:pointer; appearance:none; display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:600; padding:.8rem 1.25rem; border-radius: var(--radius-s); border:1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); text-decoration:none; letter-spacing:.05em; text-transform:uppercase; transition: var(--trans-fast); position:relative; }
.btn-min:hover { filter:brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-min.outline { --btn-bg: transparent; --btn-fg: var(--m-color); }
.btn-min.outline:hover { --btn-bg: var(--m-color); --btn-fg:#fff; }

/* Utilidades */
.stack { display:flex; flex-direction:column; gap:clamp(.75rem,1.4vw,1.25rem); }
.center { text-align:center; }
.muted { color:#667085; }
.divide { width:100%; height:1px; background:linear-gradient(to right,transparent,#d0d5dd,transparent); margin:1.5rem 0; }

/* Responsive refinements */
@media (max-width: 780px) {
  .hero-min .hero-inner h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero-min { min-height: clamp(420px,70vh,640px); }
}