:root {
    --navy: #14304f;          /* pulled from the ICV logo */
    --navy-deep: #0b1e34;
    --navy-ink: #0e2338;
    --gold: #f2a33c;
    --gold-bright: #ffb84d;
    --white: #ffffff;
    --off: #f4f6f9;
    --muted: #5b6b7d;
    --font: "Archivo", sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font);
    color: var(--navy-ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }

  /* ============ NAV ============ */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(14,35,56,.08), 0 6px 24px rgba(14,35,56,.06);
  }
  .nav {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .nav-logo img {
    height: 52px;
    width: auto;
    display: block;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
  }
  .nav-links a {
    text-decoration: none;
    color: var(--navy-ink);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
    transition: color .2s;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .nav-links a:hover { color: var(--navy); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-cta {
    background: var(--gold);
    color: var(--navy-deep) !important;
    padding: 11px 18px !important;
    border-radius: 6px;
    font-weight: 800 !important;
  }
  .nav-cta::after { display: none; }
  .nav-cta:hover { background: var(--gold-bright); }

  /* hamburger */
  .burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
  }
  .burger span {
    display: block;
    width: 30px; height: 3px;
    background: var(--navy-ink);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  .burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 90px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(11,30,52,.82) 0%, rgba(20,48,79,.72) 45%, rgba(11,30,52,.88) 100%),
      url("hero.jpg") center 38% / cover no-repeat;
  }
  /* subtle grain for depth */
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    max-width: 1000px;
    z-index: 1;
  }
  .hero-eyebrow {
    color: #dbe6f2;
    font-size: clamp(13px, 1.6vw, 19px);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: rise .8s ease .1s both;
  }
  .hero h1 {
    font-size: clamp(46px, 8.6vw, 108px);
    font-weight: 900;
    font-stretch: 115%;
    line-height: .98;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--white);
    animation: rise .8s ease .25s both;
  }
  .hero h1 .accent {
    color: var(--gold);
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }
  .hero h1 .accent svg {
    position: absolute;
    left: 0;
    bottom: -.32em;
    width: 100%;
    height: .38em;
    overflow: visible;
  }
  .hero h1 .accent svg path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: draw 1.1s ease .9s forwards;
  }
  .hero-sub {
    margin-top: 44px;
    color: var(--white);
    font-size: clamp(24px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    animation: rise .8s ease .45s both;
  }
  .hero-verse {
    text-transform: none;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(19px, 2.6vw, 30px);
    line-height: 1.45;
    letter-spacing: .01em;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: #eef3f9;
  }
  .hero-verse .verse-ref {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .hero-actions {
    margin-top: 44px;
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    animation: rise .8s ease .6s both;
  }
  .btn {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .1em;
    padding: 19px 40px;
    border-radius: 8px;
    transition: transform .2s ease, background .2s, box-shadow .2s, color .2s;
  }
  .btn-solid {
    background: var(--gold);
    color: var(--navy-deep);
    box-shadow: 0 10px 30px rgba(242,163,60,.35);
  }
  .btn-solid:hover { background: var(--gold-bright); transform: translateY(-3px); }
  .btn-outline {
    border: 2px solid var(--gold);
    color: var(--gold);
  }
  .btn-outline:hover { background: rgba(242,163,60,.14); transform: translateY(-3px); }

  /* el borde transparente iguala la altura con el botón de contorno */
  .hero-actions .btn-solid { border: 2px solid transparent; }

  /* hero en móvil: versículo más cómodo de leer y botones del mismo ancho */
  @media (max-width: 560px) {
    .hero-eyebrow { text-wrap: balance; }
    .hero-verse {
      font-size: 17.5px;
      line-height: 1.6;
      letter-spacing: .015em;
      padding: 0 8px;
      text-wrap: balance;
    }
    .hero-verse .verse-ref {
      font-size: 12px;
      letter-spacing: .26em;
      margin-top: 12px;
    }
    .hero-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-actions .btn {
      width: 100%;
      text-align: center;
      padding: 18px 20px;
    }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* ============ SECTIONS ============ */
  section { padding: 100px 28px; }
  .wrap { max-width: 1240px; margin: 0 auto; }
  .kicker {
    color: var(--gold);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  h2 {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 900;
    font-stretch: 110%;
    text-transform: uppercase;
    line-height: 1.02;
    color: var(--navy-ink);
  }

  /* welcome */
  .welcome .wrap {
    max-width: 820px;
  }
  .welcome p {
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 56ch;
  }
  /* El mismo bloque de versículo sirve en las secciones .welcome y en las
     de formulario (.prayer), donde antes salía como texto suelto. */
  .welcome .verse,
  .prayer .verse {
    margin-top: 30px;
    padding: 26px 30px;
    border-left: 5px solid var(--gold);
    background: var(--off);
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    font-style: italic;
    color: var(--navy);
    line-height: 1.6;
  }
  .welcome .verse strong,
  .prayer .verse strong {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .family-q {
    margin-top: 44px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    font-stretch: 110%;
    text-transform: uppercase;
    color: var(--navy);
    line-height: 1.15;
  }
  .pastors {
    margin-top: 34px;
    display: inline-block;
    padding: 22px 30px;
    border: 2px solid var(--navy);
    border-radius: 12px;
  }
  .pastors-label {
    color: var(--gold);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .pastors-names {
    font-size: 21px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.35;
  }

  /* horarios */
  .times {
    background: var(--navy-deep);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .times::before {
    content: "";
    position: absolute;
    top: -220px; right: -220px;
    width: 560px; height: 560px;
    border: 90px solid rgba(242,163,60,.09);
    border-radius: 50%;
  }
  .times h2 { color: var(--white); }
  .times-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .time-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 40px 34px;
    transition: transform .25s ease, border-color .25s, background .25s;
  }
  .time-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    background: rgba(255,255,255,.08);
  }
  .time-card .day {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 14px;
  }
  .time-card .hour {
    font-size: 44px;
    font-weight: 900;
    font-stretch: 110%;
    margin: 14px 0 10px;
  }
  .time-card .name {
    font-size: 17px;
    color: #c3d0de;
    line-height: 1.5;
  }

  /* ministerios */
  .ministries { background: var(--off); }
  .kids-card {
    margin-top: 56px;
    background: var(--navy-deep);
    color: var(--white);
    border-radius: 16px;
    padding: 46px 44px;
    box-shadow: 0 20px 50px rgba(14,35,56,.2);
  }
  .kids-head {
    display: flex;
    gap: 26px;
    align-items: flex-start;
  }
  .kids-head .icon {
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: 12px;
    background: var(--gold);
    display: grid;
    place-items: center;
    font-size: 26px;
  }
  .kids-head h3 {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 12px;
  }
  .kids-head p {
    color: #c3d0de;
    font-size: 16px;
    line-height: 1.7;
    max-width: 72ch;
  }
  .kids-groups {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .group {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .25s ease, border-color .25s;
  }
  .group:hover { transform: translateY(-5px); border-color: var(--gold); }
  .g-age {
    color: var(--gold);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .g-name {
    font-weight: 800;
    font-size: 19px;
    line-height: 1.25;
  }
  .ministries-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .min-card {
    background: var(--white);
    border-radius: 14px;
    padding: 38px 30px;
    box-shadow: 0 4px 18px rgba(14,35,56,.06);
    transition: transform .25s ease, box-shadow .25s;
  }
  .min-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(14,35,56,.14);
  }
  .min-card .icon {
    width: 58px; height: 58px;
    border-radius: 12px;
    background: var(--navy);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 22px;
  }
  .min-card h3 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
  }
  .min-card p { color: var(--muted); font-size: 15px; line-height: 1.65; }

  /* visítanos */
  .visit {
    background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 70%, #1d436e 100%);
    color: var(--white);
  }
  .visit h2 { color: var(--white); }
  .visit p {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.7;
    color: #d5e0ec;
    max-width: 52ch;
  }
  .visit .btn { margin-top: 34px; }
  .visit-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
  }
  .info-list { margin-top: 30px; }
  .info-row {
    margin-top: 14px !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .info-row a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 2px solid rgba(242,163,60,.55);
    transition: color .2s, border-color .2s;
  }
  .info-row a:hover { color: var(--gold); border-color: var(--gold); }
  .info-list.on-light .info-row,
  .info-list.on-light .info-row a { color: var(--navy-ink); }
  .info-list.on-light .info-row a { border-bottom-color: rgba(20,48,79,.3); }
  .info-list.on-light .info-row a:hover { color: var(--navy); border-color: var(--navy); }
  .temp-note {
    margin-top: 28px;
    padding: 18px 22px;
    background: rgba(242,163,60,.12);
    border: 1px solid rgba(242,163,60,.45);
    border-left: 5px solid var(--gold);
    border-radius: 10px;
    color: #ffe3b8;
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 52ch;
  }
  .temp-note strong { color: var(--gold-bright); }
  .visit-map iframe {
    width: 100%;
    height: 460px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(0,0,0,.35);
    display: block;
  }

  /* footer */
  footer {
    background: var(--navy-ink);
    color: #9fb1c4;
    padding: 70px 28px 40px;
  }
  .foot {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 50px;
  }
  .foot-4 { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
  .foot img {
    height: 60px;
    filter: brightness(0) invert(1);
    opacity: .95;
    margin-bottom: 20px;
  }
  .foot h4 {
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 13px;
    margin-bottom: 18px;
  }
  .foot a {
    color: #9fb1c4;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    transition: color .2s;
  }
  .foot a:hover { color: var(--gold); }
  .foot p { font-size: 15px; line-height: 1.7; }
  .affiliation {
    max-width: 1240px;
    margin: 56px auto 0;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
  }
  .affiliation img {
    height: 44px;
    width: auto;
    opacity: .8;
    margin-bottom: 18px;
  }
  .aff-verse {
    font-style: italic;
    font-size: 14.5px;
    color: #8fa3b8;
    max-width: 62ch;
    margin: 0 auto 8px;
    line-height: 1.6;
  }
  .aff-text {
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d8199;
  }
  .copyright {
    max-width: 1240px;
    margin: 36px auto 0;
    font-size: 13px;
    letter-spacing: .06em;
    text-align: center;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 960px) {
    .visit-grid { grid-template-columns: 1fr; gap: 44px; }
    .visit-map iframe { height: 340px; }
    .times-grid { grid-template-columns: 1fr; }
    .ministries-grid { grid-template-columns: 1fr 1fr; }
    .kids-groups { grid-template-columns: 1fr 1fr; }
    .foot, .foot-4 { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 1000px) {
    .burger { display: flex; }
    .nav-links {
      position: fixed;
      top: 84px; left: 0; right: 0;
      background: var(--white);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 10px 28px 26px;
      box-shadow: 0 20px 40px rgba(14,35,56,.15);
      transform: translateY(-130%);
      transition: transform .3s ease;
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 14px 0; font-size: 15px; }
    .nav-cta { margin-top: 12px; text-align: center; }
  }
  @media (max-width: 560px) {
    .ministries-grid { grid-template-columns: 1fr; }
    .kids-groups { grid-template-columns: 1fr; }
    .kids-head { flex-direction: column; }
    .kids-card { padding: 34px 26px; }
    section { padding: 76px 22px; }
  }
  /* ============ SUBPÁGINAS ============ */
  .page-hero {
    background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 65%, #1d436e 100%);
    color: var(--white);
    padding: 168px 28px 78px;
  }
  .page-hero-sm {
    padding: 130px 28px 60px;
  }
  /* Cabecera con foto detrás del azul. El degradado va casi opaco a
     propósito: la foto sólo se insinúa y el texto sigue legible.
     Para usarla en otra página: añade las clases page-hero-foto y una
     clase propia que defina --hero-foto, como .page-hero-ninos. */
  .page-hero-foto {
    background-image:
      linear-gradient(120deg, rgba(11,30,52,.94) 0%, rgba(20,48,79,.90) 62%, rgba(29,67,110,.90) 100%),
      var(--hero-foto);
    background-position: center, center 42%;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }
  .page-hero-ninos { --hero-foto: url("hero-ninos.jpg"); }
  .page-hero-visita { --hero-foto: url("galeria/iglesia2.jpg"); }
  .page-hero .wrap { max-width: 1240px; margin: 0 auto; }
  .page-hero h1 {
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 900;
    font-stretch: 112%;
    text-transform: uppercase;
    line-height: 1;
  }
  .page-hero-sm h1 { font-size: clamp(34px, 4.6vw, 56px); }
  .page-hero .lead {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.7;
    color: #d5e0ec;
    max-width: 62ch;
  }
  .page-hero .page-verse {
    margin-top: 26px;
    font-style: italic;
    color: #ffd9a1;
    font-size: 16px;
    max-width: 60ch;
    line-height: 1.6;
  }
  .page-hero .page-verse strong {
    display: block;
    font-style: normal;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 8px;
  }
  .back-link {
    display: inline-block;
    color: var(--gold);
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .back-link:hover { color: var(--gold-bright); }

  /* ============ VIDEOS / PRÉDICAS ============ */
  .video-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .video-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(14,35,56,.08);
    transition: transform .25s ease, box-shadow .25s;
    text-decoration: none;
    color: var(--navy-ink);
    display: block;
  }
  .video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(14,35,56,.16);
  }
  .video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(130deg, var(--navy-deep), var(--navy));
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .video-thumb .ph-logo {
    height: 54px;
    opacity: .5;
    filter: brightness(0) invert(1);
  }
  .video-thumb .play {
    position: absolute;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: rgba(242,163,60,.95);
    display: grid;
    place-items: center;
    transition: transform .2s;
  }
  .video-card:hover .play { transform: scale(1.12); }
  .video-thumb .play::after {
    content: "";
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent var(--navy-deep);
    margin-left: 5px;
  }
  .video-body { padding: 20px 22px 24px; }
  .video-title { font-weight: 800; font-size: 17px; line-height: 1.35; }
  .video-meta {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* series de estudios */
  .serie {
    margin-top: 46px;
    background: var(--white);
    border-radius: 16px;
    padding: 42px 40px;
    box-shadow: 0 4px 18px rgba(14,35,56,.07);
  }
  .serie-tag {
    display: inline-block;
    background: var(--navy);
    color: var(--gold);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
  }
  .serie h3 {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  .serie > p { margin-top: 10px; color: var(--muted); line-height: 1.65; max-width: 70ch; }
  .serie .video-grid { margin-top: 30px; }

  .yt-banner {
    margin-top: 60px;
    background: var(--navy-deep);
    border-radius: 16px;
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    color: var(--white);
  }
  .yt-banner h3 {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
  }
  .yt-banner p { margin-top: 8px; color: #c3d0de; }

  /* clases (página de niños) */
  /* la columna de la foto es más ancha que la del logo para que las
     maestras se vean más grandes que la caricatura */
  .class-card {
    margin-top: 34px;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(14,35,56,.07);
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    overflow: hidden;
  }
  .class-info {
    padding: 38px 40px;
    align-self: center;
    text-align: center;
  }
  /* las tarjetas pares se voltean: foto a la izquierda, texto a la derecha */
  .class-card:nth-of-type(even) { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  .class-card:nth-of-type(even) .class-info { order: 2; }
  /* franja de encabezado: la edad primero para que se pueda escanear
     la página y encontrar el grupo de cada niño de un vistazo */
  .class-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    background: var(--navy);
    color: var(--white);
    padding: 16px 26px;
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .class-head-age {
    background: var(--white);
    color: var(--navy);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .class-logo {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(14,35,56,.14);
    margin: 0 auto 14px;
  }
  .class-card p { margin-top: 10px; color: var(--muted); line-height: 1.7; }

  @media (max-width: 960px) {
    .video-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px) {
    .class-card,
    .class-card:nth-of-type(even) { grid-template-columns: 1fr; }
    .class-card:nth-of-type(even) .class-info { order: 0; }
    .class-info { padding: 34px 28px 28px; }
  }
  @media (max-width: 620px) {
    .video-grid { grid-template-columns: 1fr; }
    .serie { padding: 30px 24px; }
  }

  /* enlaces "conocer más" en tarjetas */
  a.min-card { text-decoration: none; color: var(--navy-ink); }
  .card-more {
    display: inline-block;
    margin-top: 16px;
    color: var(--gold);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  a.min-card:hover .card-more { color: var(--navy); }
  .card-more-dark {
    margin-top: 28px;
    text-decoration: none;
  }
  .card-more-dark:hover { color: var(--gold-bright); }

  /* ============ PALETA FINAL: AZUL MARINO, BLANCO Y GRIS ============ */
  :root {
    --gold: #9fb3c8;          /* gris azulado (reemplaza el dorado) */
    --gold-bright: #c9d6e4;
    --slate: #64809e;
    --silver: #c9d6e4;
  }
  .kicker { color: var(--slate); }
  .times .kicker, .visit .kicker, .page-hero .kicker, .prayer-dark .kicker { color: var(--silver); }
  .hero h1 .accent { color: var(--silver); }
  .hero h1 .accent svg path { stroke: var(--silver); }
  .btn-solid {
    background: var(--white);
    color: var(--navy-deep);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }
  .btn-solid:hover { background: var(--silver); }
  .btn-outline { border-color: rgba(255,255,255,.7); color: var(--white); }
  .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }
  .nav-links a::after { background: var(--navy); }
  .nav-cta { background: var(--navy); color: #fff !important; }
  .nav-cta:hover { background: #1d436e; }
  .verse { border-left-color: var(--navy); }
  .verse strong { color: var(--slate); }
  .pastors-label { color: var(--slate); }
  .time-card .day { color: var(--silver); }
  .time-card:hover { border-color: rgba(255,255,255,.55); }
  .times::before { border-color: rgba(255,255,255,.05); }
  .group:hover { border-color: rgba(255,255,255,.55); }
  .g-age { color: var(--silver); }
  .kids-head .icon { background: rgba(255,255,255,.12); }
  .card-more { color: var(--slate); }
  a.min-card:hover .card-more { color: var(--navy); }
  .card-more-dark { color: var(--silver); }
  .card-more-dark:hover { color: #fff; }
  .info-row a { border-bottom-color: rgba(255,255,255,.45); }
  .info-row a:hover { color: var(--silver); border-color: #fff; }
  .temp-note {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,214,228,.35);
    border-left: 5px solid var(--silver);
    color: #d5e0ec;
  }
  .temp-note strong { color: #fff; }
  .foot a:hover { color: var(--silver); }
  .page-hero .page-verse { color: var(--silver); }
  .page-hero .page-verse strong { color: #fff; }
  .back-link { color: var(--silver); }
  .back-link:hover { color: #fff; }
  .serie-tag { color: var(--silver); }
  .video-thumb .play { background: rgba(255,255,255,.95); }

  /* ============ EVENTOS ============ */
  .events { background: var(--white); }
  .events-list { margin-top: 46px; display: grid; gap: 22px; }
  .event-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    background: var(--off);
    border-radius: 14px;
    padding: 32px 34px;
    transition: transform .25s ease, box-shadow .25s;
  }
  .event-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(14,35,56,.12); }
  .event-date {
    flex-shrink: 0;
    width: 88px;
    background: var(--navy);
    color: var(--white);
    border-radius: 12px;
    text-align: center;
    padding: 16px 8px 14px;
  }
  .e-day { display: block; font-size: 30px; font-weight: 900; line-height: 1; }
  .e-month {
    display: block;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--silver);
    margin-top: 6px;
    font-weight: 700;
  }
  .event-card h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; }
  .event-card .e-desc { margin-top: 8px; color: var(--muted); line-height: 1.65; }
  .event-card .e-meta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate);
  }

  /* ============ ORACIÓN / MENSAJES ============ */
  /* El header va fijo (84px), así que al llegar desde un enlace #oracion
     la sección arranca debajo y no queda tapado el título. */
  .prayer { background: var(--white); scroll-margin-top: 96px; }
  /* Variante para cuando la sección cae junto a otra blanca: el fondo va gris
     y la tarjeta del formulario y el versículo van en blanco. */
  .prayer.prayer-off { background: var(--off); }
  .prayer.prayer-off .prayer-form,
  .prayer.prayer-off .verse { background: var(--white); }
  .prayer-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: start;
  }
  .prayer-form {
    background: var(--off);
    border-radius: 16px;
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .prayer-form label {
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .prayer-form input,
  .prayer-form textarea {
    font-family: var(--font);
    font-size: 16px;
    padding: 14px 16px;
    border: 2px solid #d7dfe8;
    border-radius: 10px;
    background: var(--white);
    color: var(--navy-ink);
    resize: vertical;
  }
  .prayer-form input:focus,
  .prayer-form textarea:focus { outline: none; border-color: var(--navy); }
  .prayer-form button {
    border: 0;
    cursor: pointer;
    font-family: var(--font);
    background: var(--navy);
    color: var(--white);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .1em;
    padding: 18px 40px;
    border-radius: 8px;
    transition: background .2s, transform .2s;
  }
  .prayer-form button:hover { background: #1d436e; transform: translateY(-2px); }
  .form-note { font-size: 13.5px; color: var(--muted); text-align: center; }
  @media (max-width: 960px) {
    .prayer-grid { grid-template-columns: 1fr; gap: 44px; }
    .event-card { flex-direction: column; gap: 18px; }
  }

  /* ============ TARJETAS DE MINISTERIO UNIFORMES ============ */
  .ministries-grid-5 {
    margin-top: 56px;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  .ministries-grid-5 .min-card {
    display: flex;
    flex-direction: column;
    padding: 34px 26px;
  }
  .ministries-grid-5 .min-card p { flex-grow: 1; }
  .ministries-grid-5 .min-card h3 { font-size: 19px; }
  @media (max-width: 1100px) {
    .ministries-grid-5 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .ministries-grid-5 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 500px) {
    .ministries-grid-5 { grid-template-columns: 1fr; }
  }

  /* botón azul marino para secciones claras */
  .btn-navy {
    margin-top: 34px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 10px 26px rgba(14,35,56,.22);
  }
  .btn-navy:hover { background: #1d436e; }

  /* ============ TARJETAS DE MINISTERIO — AZUL MARINO ============ */
  .ministries-grid-5 .min-card {
    background: var(--navy-deep);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.1);
    padding: 0 0 30px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(14,35,56,.16);
  }
  .ministries-grid-5 .min-card:hover {
    box-shadow: 0 22px 48px rgba(14,35,56,.32);
    border-color: rgba(201,214,228,.5);
  }
  .ministries-grid-5 .min-card h3 { color: var(--white); }
  .ministries-grid-5 .min-card p { color: #b9c8d8; padding: 0 26px; }
  .ministries-grid-5 .min-card h3 { padding: 0 26px; margin-bottom: 10px; }
  .ministries-grid-5 .card-more { color: var(--silver); padding: 0 26px; }
  .ministries-grid-5 .min-card:hover .card-more { color: var(--white); }

  /* banda del logo — un poco menos de la mitad de la tarjeta */
  .min-logo {
    width: 100%;
    aspect-ratio: 10 / 7;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    overflow: hidden;
  }
  .min-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    display: block;
  }
  .min-logo .icon-fallback {
    display: none;
    font-size: 40px;
    line-height: 1;
  }
  /* si el logo aún no existe, se muestra el ícono de respaldo */
  .min-logo .icon-fallback:only-child { display: block; }

  /* los logos traen fondo blanco: que llenen la banda de borde a borde */
  .min-logo { background: var(--white); }
  .min-logo img { padding: 0; }

  /* tarjeta con foto de portada (grupos de WhatsApp, etc.) — mismo patrón, sin grid-5 */
  .min-card.has-photo {
    background: var(--navy-deep);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.1);
    padding: 0 0 30px;
    overflow: hidden;
  }
  .min-card.has-photo:hover {
    box-shadow: 0 22px 48px rgba(14,35,56,.32);
    border-color: rgba(201,214,228,.5);
  }
  .min-card.has-photo h3 { color: var(--white); padding: 0 26px; margin-bottom: 10px; }
  .min-card.has-photo p { color: #b9c8d8; padding: 0 26px; }
  .min-card.has-photo .card-more { color: var(--silver); padding: 0 26px; }
  .min-card.has-photo:hover .card-more { color: var(--white); }
  .min-card.has-photo .min-logo { aspect-ratio: 4 / 3; }
  .min-card.has-photo .min-logo img { object-fit: cover; }

  /* ============ PRÉDICAS: PESTAÑAS + BUSCADOR ============ */
  .lib-toolbar {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 46px;
  }
  .tabs {
    display: inline-flex;
    background: var(--white);
    border: 1px solid #dce3ea;
    border-radius: 999px;
    padding: 6px;
    gap: 4px;
  }
  .tab {
    border: 0;
    cursor: pointer;
    font-family: var(--font);
    background: transparent;
    color: var(--muted);
    padding: 13px 30px;
    border-radius: 999px;
    text-align: center;
    line-height: 1.25;
    transition: background .2s, color .2s;
  }
  .tab strong { display: block; font-size: 17px; font-weight: 800; }
  .tab span { font-size: 13px; opacity: .85; }
  .tab:hover { color: var(--navy); }
  .tab.active { background: var(--navy); color: var(--white); }
  .tab.active span { color: var(--silver); }

  .search-box { position: relative; flex: 1; min-width: 260px; max-width: 420px; }
  .search-box input {
    width: 100%;
    font-family: var(--font);
    font-size: 16px;
    padding: 16px 20px 16px 50px;
    border: 1px solid #dce3ea;
    border-radius: 999px;
    background: var(--white);
    color: var(--navy-ink);
  }
  .search-box input:focus { outline: none; border-color: var(--navy); }
  .search-box::before {
    content: "🔍";
    position: absolute;
    left: 20px; top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: .55;
    pointer-events: none;
  }

  .panel { display: none; }
  .panel.on { display: block; }
  .empty-msg {
    margin-top: 40px;
    text-align: center;
    color: var(--muted);
    font-size: 17px;
    padding: 50px 20px;
    background: var(--white);
    border-radius: 14px;
  }

  /* tarjetas de estudio */
  .studies-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .study-card {
    background: var(--navy-deep);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 34px 32px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s, border-color .25s;
  }
  .study-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(14,35,56,.3);
    border-color: rgba(201,214,228,.5);
  }
  .study-ico {
    width: 62px; height: 62px;
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    display: grid;
    place-items: center;
    font-size: 28px;
    margin-bottom: 22px;
  }
  .study-count {
    color: var(--silver);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .study-card h3 {
    font-size: 23px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .study-card p { color: #b9c8d8; line-height: 1.6; font-size: 15.5px; flex-grow: 1; }
  .study-go {
    margin-top: 20px;
    color: var(--silver);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .study-card:hover .study-go { color: var(--white); }

  /* detalle de un estudio */
  .study-detail { margin-top: 34px; }
  .detail-head {
    background: var(--navy-deep);
    color: var(--white);
    border-radius: 16px;
    padding: 36px 38px;
  }
  .detail-head h3 { font-size: 30px; font-weight: 900; margin: 10px 0; }
  .detail-head p { color: #c3d0de; line-height: 1.65; max-width: 70ch; }
  .btn-back {
    border: 0;
    background: rgba(255,255,255,.12);
    color: var(--white);
    font-family: var(--font);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .btn-back:hover { background: rgba(255,255,255,.22); }
  .lesson-num {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  @media (max-width: 900px) { .studies-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) {
    .studies-grid { grid-template-columns: 1fr; }
    .tabs { width: 100%; }
    .tab { flex: 1; padding: 12px 10px; }
    .search-box { max-width: none; }
  }

  /* ============ BLOQUE DE PRÉDICAS EN EL HOME ============ */
  /* Foto del pastor predicando detrás del azul, igual que .page-hero-foto:
     el degradado va casi opaco para que la foto sólo se insinúa.
     La foto es vertical, así que el 32% deja a la vista la cabeza y la mano
     levantada — que es la parte que se reconoce debajo del azul. */
  .home-media {
    background-color: var(--navy-deep);
    background-image:
      linear-gradient(105deg, rgba(11,30,52,.96) 0%, rgba(11,30,52,.92) 48%, rgba(15,38,63,.84) 100%),
      url("predicas-altar.jpg");
    background-position: center, center 32%;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    color: var(--white);
  }
  .home-media h2 { color: var(--white); }
  .home-media > .wrap > p {
    margin-top: 20px;
    color: #c3d0de;
    font-size: 18px;
    line-height: 1.7;
    max-width: 58ch;
  }
  .media-cards {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .media-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 40px 36px;
    text-decoration: none;
    color: var(--white);
    display: block;
    transition: transform .25s ease, background .25s, border-color .25s;
  }
  .media-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.1);
    border-color: rgba(201,214,228,.6);
  }
  .media-card .m-ico { font-size: 34px; display: block; margin-bottom: 18px; }
  .media-card h3 { font-size: 24px; font-weight: 900; text-transform: uppercase; }
  .media-card p { margin-top: 10px; color: #b9c8d8; line-height: 1.6; }
  .media-card .m-go {
    display: inline-block;
    margin-top: 18px;
    color: var(--silver);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .media-card:hover .m-go { color: var(--white); }
  @media (max-width: 700px) { .media-cards { grid-template-columns: 1fr; } }

  /* ============ FAQ (visita) ============ */
  .faq-list { margin-top: 44px; display: grid; gap: 14px; max-width: 880px; }
  .faq-item {
    background: var(--white);
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    padding: 4px 24px;
  }
  .faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    font-size: 17px;
    padding: 18px 34px 18px 0;
    list-style: none;
    position: relative;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }
  .faq-item[open] summary::after { content: "–"; }
  .faq-item .faq-a {
    color: var(--muted);
    line-height: 1.75;
    font-size: 16px;
    padding-bottom: 20px;
    max-width: 75ch;
  }
  .faq-item .faq-a a { color: var(--navy); font-weight: 600; }

  /* ============ PÁGINA DE EVENTOS ============ */
  .ev-section { background: var(--off); }
  .ev-list { margin-top: 40px; display: grid; gap: 26px; }

  /* --- tarjeta de evento próximo --- */
  .ev-card {
    background: var(--white);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 300px 1fr;
    box-shadow: 0 6px 24px rgba(14,35,56,.08);
    transition: transform .25s ease, box-shadow .25s;
  }
  .ev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14,35,56,.14); }
  .ev-card.ev-featured { grid-template-columns: 1fr; }
  .ev-card.ev-featured .ev-media { height: 340px; }
  /* sin foto no hace falta tanto alto — evita un bloque vacío enorme */
  .ev-card.ev-featured .ev-media.ev-noimg { height: 150px; }
  .ev-card .ev-media.ev-noimg { min-height: 150px; }

  .ev-media {
    position: relative;
    background: var(--navy);
    min-height: 220px;
    overflow: hidden;
  }
  .ev-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .ev-media.ev-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  }
  .ev-media.ev-noimg img {
    width: auto; height: 62px;
    object-fit: contain;
    opacity: .6;
    filter: brightness(0) invert(1);
  }
  .ev-badge {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--white);
    color: var(--navy-ink);
    border-radius: 12px;
    padding: 12px 14px 10px;
    text-align: center;
    min-width: 72px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
  }
  .ev-badge .b-day { display: block; font-size: 27px; font-weight: 900; line-height: 1; }
  .ev-badge .b-month {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--slate);
    margin-top: 5px;
  }
  .ev-flag {
    position: absolute;
    top: 18px; right: 18px;
    background: var(--navy);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 8px 13px;
    border-radius: 999px;
  }

  .ev-body { padding: 34px 38px; display: flex; flex-direction: column; }
  .ev-body h3 {
    font-size: 23px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--navy-ink);
  }
  .ev-meta {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
  }
  .ev-meta span {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--slate);
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .ev-body p.ev-desc {
    margin-top: 16px;
    color: var(--muted);
    line-height: 1.72;
    font-size: 16px;
    max-width: 68ch;
    flex-grow: 1;
  }
  .ev-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
  .ev-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font);
    border: 1px solid #dce3ea;
    background: var(--white);
    color: var(--navy);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 13px 22px;
    border-radius: 8px;
    transition: background .2s, color .2s, border-color .2s;
  }
  .ev-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .ev-btn-solid { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .ev-btn-solid:hover { background: #1d436e; border-color: #1d436e; }

  /* --- eventos pasados: archivo con fotos --- */
  .ev-year {
    margin: 54px 0 26px;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .ev-year:first-child { margin-top: 40px; }
  .ev-year h3 {
    font-size: 30px;
    font-weight: 900;
    color: var(--navy-ink);
    letter-spacing: .02em;
  }
  .ev-year .ev-year-line { flex: 1; height: 1px; background: #d8e0e8; }
  .ev-year .ev-year-count {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .ev-past-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .ev-past-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(14,35,56,.07);
    transition: transform .25s ease, box-shadow .25s;
    display: flex;
    flex-direction: column;
  }
  .ev-past-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(14,35,56,.14); }
  .ev-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--navy);
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    width: 100%;
    display: block;
  }
  .ev-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
  .ev-past-card:hover .ev-cover img { transform: scale(1.05); }
  .ev-cover.ev-noimg {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    cursor: default;
  }
  .ev-cover.ev-noimg img { width: auto; height: 54px; object-fit: contain; opacity: .55; filter: brightness(0) invert(1); }
  .ev-count {
    position: absolute;
    bottom: 12px; right: 12px;
    background: rgba(11,30,52,.86);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 7px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ev-past-body { padding: 22px 24px 26px; flex-grow: 1; display: flex; flex-direction: column; }
  .ev-past-body h4 {
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--navy-ink);
  }
  .ev-past-date {
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .ev-past-body p {
    margin-top: 11px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
    flex-grow: 1;
  }
  .ev-see-photos {
    margin-top: 16px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font);
    color: var(--navy);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
  }
  .ev-see-photos:hover { color: var(--slate); }

  /* --- visor de fotos (lightbox) --- */
  .lb {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8,20,34,.95);
    display: none;
    flex-direction: column;
  }
  .lb.on { display: flex; }
  .lb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    color: var(--white);
    flex-wrap: wrap;
  }
  .lb-title { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .lb-sub { font-size: 13px; color: #a9bccd; margin-top: 4px; letter-spacing: .1em; text-transform: uppercase; }
  .lb-close {
    background: rgba(255,255,255,.12);
    border: 0;
    color: var(--white);
    font-size: 26px;
    line-height: 1;
    width: 46px; height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font);
    transition: background .2s;
  }
  .lb-close:hover { background: rgba(255,255,255,.26); }
  .lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 20px 14px;
    min-height: 0;
  }
  .lb-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }
  .lb-nav {
    background: rgba(255,255,255,.12);
    border: 0;
    color: var(--white);
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font);
    transition: background .2s;
  }
  .lb-nav:hover { background: rgba(255,255,255,.28); }
  .lb-nav:disabled { opacity: .25; cursor: default; }
  .lb-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 26px 24px;
    justify-content: center;
    flex-wrap: wrap;
    max-height: 132px;
  }
  .lb-thumbs img {
    width: 74px; height: 56px;
    object-fit: cover;
    border-radius: 7px;
    cursor: pointer;
    opacity: .45;
    border: 2px solid transparent;
    transition: opacity .2s, border-color .2s;
  }
  .lb-thumbs img.on { opacity: 1; border-color: var(--white); }
  .lb-thumbs img:hover { opacity: .85; }

  @media (max-width: 1000px) {
    .ev-past-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    .ev-card, .ev-card.ev-featured { grid-template-columns: 1fr; }
    .ev-card.ev-featured .ev-media { height: 230px; }
    .ev-body { padding: 26px 24px 30px; }
    .ev-past-grid { grid-template-columns: 1fr; }
    .ev-year h3 { font-size: 24px; }
    .lb-nav { width: 44px; height: 44px; font-size: 20px; }
  }

  /* ============ PÁGINA DE OFRENDAS / DAR ============ */

  /* --- formas de dar --- */
  .give-ways { background: var(--off); }
  .give-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .give-card {
    background: var(--white);
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    padding: 36px 32px 34px;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s, box-shadow .25s;
  }
  .give-card:hover {
    transform: translateY(-6px);
    border-color: var(--slate);
    box-shadow: 0 18px 40px rgba(14,35,56,.08);
  }
  .give-card.g-featured {
    border-color: var(--navy);
    border-width: 2px;
    box-shadow: 0 18px 40px rgba(14,35,56,.10);
  }
  .give-card .g-ico {
    font-size: 32px;
    display: block;
    margin-bottom: 18px;
    line-height: 1;
  }
  .give-card h3 {
    font-size: 21px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--navy-ink);
  }
  .give-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
  }
  .g-badge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .g-badge.g-badge-soft {
    background: rgba(20,48,79,.08);
    color: var(--navy);
  }
  .give-card .g-go {
    margin-top: auto;
    padding-top: 22px;
    color: var(--navy);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .give-card .g-go:hover { color: var(--slate); }

  /* --- dar automático (constructor) --- */
  .give-auto {
    background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 65%, #1d436e 100%);
    color: var(--white);
  }
  .give-auto h2 { color: var(--white); }
  .give-auto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .give-auto p.ga-lead {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.75;
    color: #d5e0ec;
    max-width: 52ch;
  }
  .ga-points { margin-top: 30px; display: grid; gap: 16px; }
  .ga-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.6;
    color: #d5e0ec;
  }
  .ga-point span:first-child {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #fff;
  }
  .ga-point strong { color: #fff; font-weight: 700; }

  .builder {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,214,228,.32);
    border-radius: 18px;
    padding: 34px 32px 32px;
  }
  .builder .b-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--silver);
    margin-bottom: 12px;
  }
  .builder .b-block + .b-block { margin-top: 26px; }
  .chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip {
    font-family: inherit;
    cursor: pointer;
    border: 1px solid rgba(201,214,228,.45);
    background: transparent;
    color: #e6edf5;
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 700;
    transition: background .2s, color .2s, border-color .2s;
  }
  .chip:hover { background: rgba(255,255,255,.12); border-color: #fff; }
  .chip.on {
    background: var(--white);
    color: var(--navy-deep);
    border-color: var(--white);
  }
  .amount-wrap { position: relative; margin-top: 12px; }
  .amount-wrap span {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    color: var(--silver);
    font-size: 17px;
    font-weight: 700;
    pointer-events: none;
  }
  .amount-wrap input {
    width: 100%;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(201,214,228,.45);
    border-radius: 10px;
    padding: 14px 18px 14px 36px;
  }
  .amount-wrap input::placeholder { color: rgba(201,214,228,.6); font-weight: 500; }
  .amount-wrap input:focus { outline: none; border-color: #fff; }
  .builder .btn { width: 100%; text-align: center; margin-top: 28px; }
  .b-note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--silver);
    text-align: center;
  }

  /* --- zelle --- */
  .zelle-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 54px;
    align-items: start;
  }
  .zelle-box {
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: 16px;
    padding: 30px 30px 28px;
  }
  .zelle-box .z-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .zelle-box .z-value {
    margin-top: 10px;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 900;
    color: var(--navy-ink);
    word-break: break-all;
    line-height: 1.25;
  }
  .z-copy {
    margin-top: 18px;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    padding: 13px 24px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .2s;
  }
  .z-copy:hover { background: #1d436e; }
  .z-copy.done { background: #1f7a4d; }
  .zelle-box .z-name { margin-top: 18px; font-size: 15px; color: var(--muted); line-height: 1.7; }
  .zelle-box .z-name strong { color: var(--navy-ink); }

  .steps { display: grid; gap: 20px; counter-reset: paso; }
  .step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .step .s-num {
    counter-increment: paso;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
  }
  .step .s-num::before { content: counter(paso); }
  .step h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .step p { margin-top: 6px; color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 60ch; }
  .steps-title {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--navy-ink);
    margin-bottom: 22px;
    letter-spacing: .03em;
  }
  .steps-block + .steps-block { margin-top: 44px; }

  /* --- qué es cada ofrenda --- */
  .fund-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .fund-card {
    background: var(--off);
    border-radius: 16px;
    padding: 34px 30px;
    border-left: 5px solid var(--navy);
  }
  .fund-card h3 {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--navy-ink);
    letter-spacing: .03em;
  }
  .fund-card p { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.72; }
  .fund-card .f-verse {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dbe3ec;
    font-style: italic;
    font-size: 14.5px;
    color: var(--navy);
    line-height: 1.6;
  }
  .fund-card .f-verse strong {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate);
  }

  /* --- transparencia --- */
  .trust-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .trust-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 28px 24px;
  }
  .trust-card .t-ico { font-size: 26px; display: block; margin-bottom: 14px; }
  .trust-card h4 {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
  }
  .trust-card p { margin-top: 9px; font-size: 14.5px; line-height: 1.65; color: #b9c8d8; }

  @media (max-width: 1000px) {
    .give-grid { grid-template-columns: 1fr; }
    .give-auto-grid { grid-template-columns: 1fr; gap: 44px; }
    .zelle-grid { grid-template-columns: 1fr; gap: 40px; }
    .fund-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .trust-grid { grid-template-columns: 1fr; }
    .builder { padding: 28px 22px 26px; }
    .zelle-box { padding: 26px 22px 24px; }
    .chip { padding: 10px 16px; font-size: 14px; }
  }

  /* --- calculadora de diezmo --- */
  .calc-out {
    margin-top: 26px;
    padding: 24px 22px;
    border-radius: 12px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(201,214,228,.3);
    text-align: center;
  }
  .calc-out .c-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--silver);
  }
  .calc-out .c-monto {
    margin-top: 10px;
    font-size: clamp(38px, 6vw, 52px);
    font-weight: 900;
    font-stretch: 110%;
    line-height: 1;
    color: #fff;
  }
  .calc-out .c-cada { margin-top: 8px; font-size: 15px; color: var(--silver); }

  /* dos tarjetas en vez de tres — colapsa igual en móvil */
  .give-grid-2 { grid-template-columns: 1fr 1fr; }
  @media (max-width: 1000px) { .give-grid-2 { grid-template-columns: 1fr; } }

  .calc-card {
    margin-top: 22px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(201,214,228,.32);
    border-radius: 18px;
    padding: 30px 30px 26px;
  }

  /* --- calculadora --- */
  .calc-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: start;
  }
  .calc-controls .amount-wrap { margin-top: 10px; }
  .calc-results {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(201,214,228,.25);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: end;
  }
  .calc-results .cr {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--silver);
  }
  .calc-results .cr-val {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
  }
  .calc-results .cr-total .cr-val {
    font-size: clamp(34px, 4.4vw, 44px);
    font-weight: 900;
    font-stretch: 108%;
  }
  .calc-results .cr-total { text-align: right; }

  @media (max-width: 820px) {
    .calc-controls { grid-template-columns: 1fr; gap: 20px; }
    .calc-results { grid-template-columns: 1fr 1fr; }
    .calc-results .cr-total { grid-column: 1 / -1; text-align: left; padding-top: 14px; border-top: 1px solid rgba(201,214,228,.25); }
  }

  /* --- tarjeta Zelle con número integrado --- */
  .czn {
    margin-top: 22px;
    background: var(--off);
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    padding: 20px 22px;
  }
  .czn-num {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 900;
    font-stretch: 106%;
    color: var(--navy-ink);
    line-height: 1;
  }
  .czn-copy {
    margin-top: 14px;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .2s;
  }
  .czn-copy:hover { background: #1d436e; }
  .czn-copy.done { background: #1f7a4d; }
  .czn-note {
    margin-top: 16px !important;
    font-size: 14.5px !important;
    line-height: 1.65;
  }
  .czn-note strong { color: var(--navy-ink); }
  .czn-dir { font-size: 17px; font-weight: 800; color: var(--navy-ink); line-height: 1.45; }
  .czn-hor {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px solid #dbe3ec;
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.6;
  }

  /* --- foto de cabecera en tarjeta --- */
  .give-photo {
    display: block;
    width: calc(100% + 64px);
    margin: -36px -32px 24px;
    border-radius: 14px 14px 0 0;
    aspect-ratio: 16/10;
    object-fit: cover;
  }
  .give-photo-brand {
    object-fit: contain;
    padding: 36px 54px;
    background: #6c1cd3;
    box-sizing: border-box;
  }

  /* ============ PÁGINA DE EVENTOS: CALENDARIO ============ */

  /* --- tarjetas "Próximas actividades" --- */
  .prox-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
  }
  .prox-card {
    position: relative;
    background: var(--white);
    border: 1px solid #e2e9f1;
    border-radius: 18px;
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 22px rgba(14,35,56,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    animation: calIn .5s cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .prox-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(14,35,56,.13);
    border-color: #cfdae6;
  }
  .prox-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .prox-badge {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    border-radius: 14px;
    padding: 12px 16px 10px;
    text-align: center;
    min-width: 66px;
    box-shadow: 0 8px 20px rgba(14,35,56,.25);
  }
  .prox-badge .p-day { display: block; font-size: 28px; font-weight: 900; line-height: 1; }
  .prox-badge .p-month {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 4px;
    color: var(--silver);
  }
  .prox-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef3f8;
    color: var(--slate);
  }
  .prox-card h3 {
    font-size: 21px;
    font-weight: 900;
    font-stretch: 108%;
    text-transform: uppercase;
    line-height: 1.12;
    color: var(--navy-ink);
  }
  .prox-meta {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.7;
  }
  .prox-desc {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    flex-grow: 1;
  }
  .prox-add {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    background: none;
    border: 1.6px solid #c9d6e4;
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .prox-add:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

  /* variantes por tipo */
  .prox-card.t-jovenes .prox-tag { background: #e3f1ee; color: #1d6a60; }
  .prox-card.t-damas   .prox-tag { background: #f6ecf3; color: #8a5379; }
  .prox-card.t-especial {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-color: var(--navy);
  }
  .prox-card.t-especial h3, .prox-card.t-especial .prox-meta { color: var(--white); }
  .prox-card.t-especial .prox-meta span { color: #c3d0de; }
  .prox-card.t-especial .prox-desc { color: #c3d0de; }
  .prox-card.t-especial .prox-badge { background: var(--white); color: var(--navy-ink); }
  .prox-card.t-especial .prox-badge .p-month { color: var(--slate); }
  .prox-card.t-especial .prox-tag { background: rgba(255,255,255,.14); color: var(--silver); }
  .prox-card.t-especial .prox-add { color: var(--white); border-color: rgba(255,255,255,.45); }
  .prox-card.t-especial .prox-add:hover { background: var(--white); color: var(--navy-deep); border-color: var(--white); }

  /* --- tarjetas con ilustración (campo "foto" en calendario.js) ---
     La ilustración es cuadrada y ya trae el logo del ministerio arriba,
     así que se muestra entera: nada de recortes y nada encima de ella.
     La fecha y la etiqueta van debajo. Si la imagen no carga, el JS
     quita la clase con-foto y la tarjeta vuelve a la de sólo texto. */
  .prox-body { display: flex; flex-direction: column; flex: 1; }
  .prox-card.con-foto { padding: 0; overflow: hidden; }
  .prox-card.con-foto .prox-body { padding: 22px 26px 24px; }
  .prox-foto { line-height: 0; background: #eef3f8; }
  .prox-foto img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  /* --- sección del calendario --- */
  .cal-section { background: var(--off); }
  .cal-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
  }
  .cal-sub {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .cal-sub-label {
    width: 100%;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 2px;
  }
  .cal-sub a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    background: var(--white);
    border: 1.6px solid #d4dee9;
    border-radius: 999px;
    padding: 11px 18px;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
  }
  .cal-sub a:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    transform: translateY(-2px);
  }
  .cal-sub a svg { flex-shrink: 0; }

  .cal-card {
    margin-top: 40px;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 3px 8px rgba(14,35,56,.05), 0 24px 60px rgba(14,35,56,.1);
    overflow: hidden;
  }
  .cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 34px 24px;
  }
  .cal-title {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 900;
    font-stretch: 110%;
    text-transform: uppercase;
    color: var(--navy-ink);
    line-height: 1;
  }
  .cal-title #cal-anio { color: #b9c7d6; margin-left: 8px; }
  .cal-nav { display: flex; gap: 8px; align-items: center; }
  .cal-nav button {
    font-family: var(--font);
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
    border: 1.6px solid #d4dee9;
    background: var(--white);
    color: var(--navy);
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s, color .2s, border-color .2s;
  }
  .cal-nav .cal-hoy-btn {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 18px;
  }
  .cal-nav button:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

  .cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 18px;
    margin-bottom: 6px;
  }
  .cal-dow span {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--slate);
    padding: 10px 0;
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 18px 18px;
  }
  .cal-dia {
    font-family: var(--font);
    position: relative;
    text-align: left;
    background: #f7f9fc;
    border: 1.6px solid transparent;
    border-radius: 12px;
    min-height: 108px;
    padding: 10px 10px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background .18s, border-color .18s, transform .18s;
  }
  .cal-grid.anim .cal-dia {
    animation: calIn .4s cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(var(--i, 0) * 6ms);
  }
  .cal-dia:hover { background: #eef3f9; transform: translateY(-2px); }
  .cal-dia:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 2px; }
  .cal-dia.fuera { background: transparent; cursor: default; }
  .cal-dia.fuera .cal-num { opacity: .22; }
  .cal-dia.fuera:hover { transform: none; }
  .cal-dia.sel { border-color: var(--navy); background: #eef3f9; }
  .cal-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-ink);
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .cal-dia.hoy .cal-num { background: var(--navy); color: var(--white); }
  .cal-chips { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
  .cal-chip {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #e8eef5;
    color: var(--navy);
  }
  .cal-chip b { font-weight: 800; opacity: .65; }
  .cal-chip.t-jovenes { background: #dfefeb; color: #185e55; }
  .cal-chip.t-damas { background: #f4e7ef; color: #7c4468; }
  .cal-chip.t-especial { background: var(--navy); color: var(--white); }
  .cal-chip.t-especial b { opacity: .8; }
  .cal-chip.cal-mas { background: transparent; color: var(--slate); padding: 0 8px; }
  .cal-dots { display: none; gap: 4px; justify-content: center; margin-top: auto; padding-bottom: 2px; }
  .cal-dots i {
    width: 6.5px; height: 6.5px;
    border-radius: 50%;
    background: var(--navy);
  }
  .cal-dots i.d-jovenes { background: #2c8b7f; }
  .cal-dots i.d-damas { background: #a86a92; }
  .cal-dots i.d-especial { background: var(--navy-deep); outline: 1.5px solid var(--navy-deep); outline-offset: 1.5px; }

  @keyframes calIn {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* --- detalle del día seleccionado --- */
  .cal-detalle {
    border-top: 1.6px solid #e6ecf3;
    background: #fbfcfe;
  }
  .cal-det-inner {
    padding: 26px 34px 30px;
    animation: calIn .35s ease both;
  }
  .cal-det-fecha {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 16px;
  }
  .cal-det-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f6;
  }
  .cal-det-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .cal-det-hora {
    flex-shrink: 0;
    width: 106px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 9px 4px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
  }
  .cal-det-row.t-jovenes .cal-det-hora { background: #1d6a60; }
  .cal-det-row.t-damas .cal-det-hora { background: #8a5379; }
  .cal-det-row.t-especial .cal-det-hora { background: var(--navy-deep); }
  .cal-det-info { flex: 1; min-width: 0; }
  .cal-det-info strong {
    display: block;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--navy-ink);
  }
  .cal-det-info p {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
  }
  .cal-det-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--white);
    border: 1.6px solid #d4dee9;
    border-radius: 999px;
    padding: 9px 15px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .cal-det-add:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .cal-det-vacio { font-size: 15px; color: var(--muted); line-height: 1.7; }

  /* --- leyenda --- */
  .cal-leyenda {
    margin-top: 22px;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cal-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .cal-leyenda i { width: 11px; height: 11px; border-radius: 4px; background: #b9cbdd; }
  .cal-leyenda .l-servicio i { background: var(--navy); }
  .cal-leyenda .l-jovenes i { background: #2c8b7f; }
  .cal-leyenda .l-damas i { background: #a86a92; }
  .cal-leyenda .l-especial i { background: var(--navy-deep); outline: 2px solid #b9cbdd; outline-offset: 1.5px; }

  /* --- ritmo semanal: detalles dentro de la banda oscura --- */
  .time-card .sub {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.14);
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .time-card .sub span {
    font-size: 14px;
    color: #c3d0de;
    display: flex;
    gap: 10px;
    line-height: 1.5;
  }
  .time-card .sub b { color: var(--white); font-weight: 800; white-space: nowrap; }

  .cal-mens {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .cal-mens-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 20px 20px 18px;
    transition: border-color .25s, background .25s, transform .25s;
  }
  .cal-mens-card:hover {
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
    transform: translateY(-4px);
  }
  .cal-mens-card h4 {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .cal-mens-card p {
    margin-top: 7px;
    font-size: 13.5px;
    color: #c3d0de;
    line-height: 1.55;
  }
  .cal-mens-card .prox-fecha {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-deep);
    background: var(--silver);
    border-radius: 999px;
    padding: 6px 12px;
  }
  .cal-mens-card .prox-fecha.pausa {
    background: rgba(255,255,255,.12);
    color: #c3d0de;
  }

  /* --- responsive del calendario --- */
  @media (max-width: 960px) {
    .cal-mens { grid-template-columns: 1fr 1fr; }
    .cal-intro { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 700px) {
    .cal-card { border-radius: 16px; }
    .cal-head { padding: 20px 16px 12px; }
    .cal-dow { padding: 0 10px; }
    .cal-dow span { font-size: 9.5px; letter-spacing: .08em; }
    .cal-grid { gap: 4px; padding: 0 10px 12px; }
    .cal-dia {
      min-height: 54px;
      padding: 6px;
      border-radius: 9px;
      align-items: center;
      gap: 3px;
    }
    .cal-num { font-size: 13px; width: 24px; height: 24px; }
    .cal-chips { display: none; }
    .cal-dots { display: flex; }
    .cal-det-inner { padding: 20px 18px 24px; }
    .cal-det-row { flex-wrap: wrap; gap: 10px 14px; }
    .cal-det-hora { width: auto; padding: 8px 14px; }
    .cal-det-info { flex-basis: 100%; order: 3; }
    .cal-nav button { height: 38px; min-width: 38px; font-size: 18px; }
  }
  @media (max-width: 560px) {
    .cal-mens { grid-template-columns: 1fr; }
    .prox-grid { grid-template-columns: 1fr; }
    .cal-sub a { flex: 1; justify-content: center; white-space: nowrap; }
  }

  /* fotos de equipos, maestros y líderes */
  .team-figure {
    margin: 40px 0 0;
    background: var(--white);
    border-radius: 16px;
    padding: 34px 30px 26px;
    box-shadow: 0 4px 18px rgba(14,35,56,.07);
  }
  .team-figure img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto;
  }
  /* fotos de grupo grande: más ancho para que las caras no queden diminutas */
  .team-figure-wide img { max-width: 1120px; }
  .team-figure figcaption {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
  }
  /* panel "escenario": las fotos son recortes sobre blanco, así que
     mix-blend-mode: darken funde ese blanco con el degradado del panel
     y las personas quedan apoyadas en el borde inferior de la tarjeta */
  .class-photo {
    margin: 0;
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #eef3f9 0%, #d8e3ef 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 20px 0;
    min-height: 280px;
  }
  .class-photo img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    mix-blend-mode: darken;
  }
  .class-photo figcaption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    max-width: calc(100% - 32px);
    background: rgba(11,30,52,.82);
    color: #e8eef6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 7px 14px;
    border-radius: 999px;
  }
  /* misma idea para la foto grande del equipo (solo /ninos) */
  .team-figure-stage {
    isolation: isolate;
    background: linear-gradient(180deg, #eef3f9 0%, #d8e3ef 100%);
    padding: 44px 30px 26px;
  }
  .team-figure-stage img { mix-blend-mode: darken; }
  .team-figure-stage figcaption { color: var(--navy); }
  /* en pantallas angostas la tarjeta se apila y el panel ya no
     necesita altura mínima: la foto define su propia altura */
  @media (max-width: 860px) {
    .class-photo { min-height: 0; padding: 22px 18px 0; }
    .team-figure-stage { padding: 26px 18px 18px; }
  }

  /* nuestro pastor y su esposa — retrato editorial */
  .pastores-section { isolation: isolate; }
  .pastores-section::before { display: none; }
  .pastores-stack {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }
  .pastores-name { margin-top: 12px; }
  .pastores-name span {
    display: block;
    margin-top: 16px;
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 500;
    font-stretch: 100%;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--silver);
  }
  /* la foto se desvanece por abajo, así que el texto que la sigue
     casi no necesita margen propio */
  .pastores-bio {
    margin: 4px auto 0;
    font-size: 18px;
    line-height: 1.75;
    color: #c3d0de;
    max-width: 58ch;
  }
  .pastores-photo {
    position: relative;
    width: min(430px, 82%);
    margin: 34px auto 0;
  }
  /* halo suave para que las figuras no floten sobre el azul plano.
     El recuadro es cuadrado y el degradado se apaga muy adentro de él;
     si llegara al borde se vería un corte recto. */
  .pastores-photo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 172%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side,
      rgba(159,179,200,.30) 0%,
      rgba(159,179,200,.11) 44%,
      rgba(159,179,200,0) 72%);
    z-index: -1;
  }
  .pastores-photo img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
  }
  .pastores-cta {
    margin-top: 34px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* junta local — tarjetas de miembros */
  .junta-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 20px;
  }
  .junta-card {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 18px 28px;
    box-shadow: 0 4px 18px rgba(14,35,56,.07);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .junta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(14,35,56,.13);
  }
  .junta-card img,
  .junta-card .junta-initial {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: var(--off);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--gold);
  }
  .junta-card .junta-initial {
    display: grid;
    place-items: center;
    font-size: 54px;
    font-weight: 900;
    color: var(--gold);
    background: linear-gradient(135deg, var(--navy) 0%, #1d436e 100%);
  }
  .junta-card h3 {
    margin-top: 22px;
    font-size: 17px;
    font-weight: 800;
    color: var(--navy-ink);
    line-height: 1.3;
  }
  .junta-card .junta-rol {
    margin-top: 7px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
  }

  /* servidores — foto grupal */
  .servidores-photo {
    margin: 42px 0 0;
  }
  .servidores-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(0,0,0,.45);
  }

  /* ============ APARICIÓN AL HACER SCROLL ============ */
  /* La clase js-reveal sólo la añade el script; sin JS nada queda oculto. */
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.28,1);
  }
  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* ============ GALERÍA HORIZONTAL ============ */
  /* .welcome estrecha su wrap a 820px; la galería necesita todo el ancho */
  .galeria-section .wrap { max-width: 1240px; }
  .galeria-viewport { position: relative; }
  /* las flechas van encima de las fotos: la barra de scroll está oculta,
     así que en escritorio son la única forma de avanzar con el ratón */
  .galeria-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    box-shadow: 0 6px 20px rgba(14,35,56,.28);
    color: var(--navy);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease;
  }
  .galeria-btn-prev { left: 14px; }
  .galeria-btn-next { right: 14px; }
  .galeria-btn:hover:not(:disabled) {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
  }
  .galeria-btn:disabled {
    opacity: .32;
    cursor: default;
  }
  .galeria-btn:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
  }
  /* la pista se desborda a propósito hasta el borde de la ventana */
  .galeria-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .galeria-track::-webkit-scrollbar { display: none; }
  .galeria-item {
    flex: 0 0 clamp(260px, 30%, 380px);
    scroll-snap-align: start;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--off);
    box-shadow: 0 6px 22px rgba(14,35,56,.10);
  }
  .galeria-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  @media (max-width: 620px) {
    .galeria-item { flex-basis: 78%; }
    .galeria-btn { display: none; }
  }

  /* equipo de visitación (estudio bíblico en casa) */
  .visita-equipo {
    margin: 26px 0 0;
    max-width: 520px;
  }
  .visita-equipo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .visita-equipo figcaption {
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted);
  }

  /* ============ EVENTOS DE LA PORTADA (carrusel tipo calendario) ============ */
  .ev-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
  }
  .ev-mes {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    background: var(--off);
    border: 1px solid rgba(14,35,56,.12);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    white-space: nowrap;
  }
  .ev-mes::before { content: "🗓️"; font-size: 15px; letter-spacing: 0; }
  .ev-mes:empty { display: none; }

  .evc { position: relative; margin-top: 44px; }
  .evc-track {
    display: flex;
    gap: 22px;
    margin: 0;
    /* el padding deja aire para la sombra de las tarjetas al levantarse */
    padding: 8px 4px 14px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .evc-track::-webkit-scrollbar { display: none; }
  .evc-track:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
  .evc-slide {
    flex: 0 0 calc((100% - 44px) / 3);
    scroll-snap-align: start;
    display: flex;
  }
  .evc-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    border: 1px solid rgba(14,35,56,.08);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(14,35,56,.08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  }
  .evc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(14,35,56,.18);
    box-shadow: 0 22px 46px rgba(14,35,56,.16);
  }

  /* EL ESPACIO PARA LA ILUSTRACIÓN — cuadrado. Haz la imagen 1080 x 1080 px. */
  .evc-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--off);
  }
  .evc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* mientras no haya ilustración, la tarjeta muestra el logo sobre azul */
  .evc-img.ev-noimg {
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  }
  .evc-img.ev-noimg img {
    width: auto;
    height: 56px;
    object-fit: contain;
    opacity: .5;
    filter: brightness(0) invert(1);
  }

  /* hoja de calendario arriba, justo donde empieza la foto: así no le cae
     encima al título ni le tapa el logo a la ilustración. El 31% es donde
     termina la banda blanca del logo en las ilustraciones cuadradas. */
  .evc-fecha {
    position: absolute;
    left: 14px;
    top: 31%;
    width: 62px;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(14,35,56,.24);
  }
  .evc-fecha b {
    display: block;
    padding: 11px 0 9px;
    font-size: 26px;
    font-weight: 900;
    color: var(--navy-ink);
  }
  .evc-fecha i {
    display: block;
    padding: 5px 0 6px;
    background: var(--navy);
    color: var(--white);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .evc-flag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(11,30,52,.9);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .evc-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 22px 24px;
  }
  .evc-body h3 {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--navy-ink);
  }
  .evc-meta {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .evc-lugar {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
  }
  /* la misma descripción que se lee en la página de eventos. Crece para
     empujar el botón de "agregar" al pie de todas las tarjetas por igual */
  .evc-desc {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
    flex-grow: 1;
  }
  .evc-mas {
    margin-top: auto;
    padding-top: 18px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate);
    transition: color .2s;
  }
  .evc-card:hover .evc-mas { color: var(--navy); }

  /* La tarjeta es un enlace a /eventos MÁS un botón para guardarse la
     fecha. Van separados porque un botón no puede ir dentro de un
     enlace: el enlace es .evc-link y el botón queda debajo. */
  .evc-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
  }
  .evc-add {
    margin: 0 22px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    background: none;
    border: 1.6px solid #c9d6e4;
    border-radius: 999px;
    padding: 11px 14px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .evc-add:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .evc-add:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

  .evc-btn {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 6px 20px rgba(14,35,56,.26);
    color: var(--navy);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .22s ease, color .22s ease, opacity .22s ease;
  }
  .evc-btn-prev { left: -18px; }
  .evc-btn-next { right: -18px; }
  .evc-btn:hover:not(:disabled) { background: var(--navy); color: var(--white); }
  .evc-btn:disabled { opacity: .3; cursor: default; }
  .evc-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

  .evc-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
  }
  .evc-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(14,35,56,.2);
    cursor: pointer;
    transition: background .22s ease, transform .22s ease;
  }
  .evc-dot:hover { background: rgba(14,35,56,.42); }
  .evc-dot[aria-current="true"] { background: var(--navy); transform: scale(1.25); }
  .evc-dot:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

  /* si todas las tarjetas caben, no hacen falta flechas ni puntos */
  .evc-completo .evc-btn,
  .evc-completo .evc-dots { display: none; }

  @media (max-width: 1000px) {
    .evc-slide { flex-basis: calc((100% - 22px) / 2); }
    .evc-btn-prev { left: -6px; }
    .evc-btn-next { right: -6px; }
  }
  @media (max-width: 680px) {
    .ev-head { align-items: flex-start; }
    .evc-slide { flex-basis: 82%; }
    .evc-btn { display: none; }
    /* que "Agregar a mi calendario" quepa en un solo renglón */
    .evc-add {
      margin: 0 16px 18px;
      font-size: 11px;
      letter-spacing: .04em;
      padding: 11px 10px;
    }
  }

  /* ============ HORARIOS CON FOTO DETRÁS ============ */
  /* Misma idea que .page-hero-foto: el azul se queda casi opaco y la foto
     de la congregación sólo se insinúa, para que el texto siga legible.
     El primer degradado funde la parte de abajo con el azul liso de la
     sección del pastor, para que las dos se vean como un solo fondo. */
  .times.times-foto {
    background-image:
      linear-gradient(to bottom, rgba(11,30,52,0) 58%, var(--navy-deep) 96%),
      linear-gradient(160deg, rgba(11,30,52,.88) 0%, rgba(11,30,52,.81) 55%, rgba(20,48,79,.86) 100%),
      url("horarios-iglesia.jpg");
    background-position: center, center, center 42%;
    background-size: cover, cover, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  /* sobre la foto el aro dorado de la esquina estorba, así que aquí no va */
  .times.times-foto::before { display: none; }
  /* las tarjetas necesitan algo de cuerpo para no ensuciarse con la foto */
  .times.times-foto .time-card {
    background: rgba(11,30,52,.5);
    border-color: rgba(255,255,255,.18);
  }
  .times.times-foto .time-card:hover { background: rgba(11,30,52,.62); }

  /* ============ HORARIOS SOBRE FONDO CLARO ============ */
  /* Se usa cuando la sección de horarios va justo debajo del hero oscuro,
     para no dejar dos bloques azul marino pegados. */
  .times.times-light {
    background: var(--off);
    color: var(--navy-ink);
  }
  .times.times-light::before { border-color: rgba(20,48,79,.05); }
  .times.times-light h2 { color: var(--navy-ink); }
  .times.times-light .kicker { color: var(--slate); }
  .times.times-light .time-card {
    background: var(--white);
    border: 1px solid rgba(14,35,56,.08);
    box-shadow: 0 4px 18px rgba(14,35,56,.06);
  }
  .times.times-light .time-card:hover {
    background: var(--white);
    border-color: rgba(14,35,56,.22);
    box-shadow: 0 16px 36px rgba(14,35,56,.13);
  }
  .times.times-light .time-card .day { color: var(--slate); }
  .times.times-light .time-card .hour { color: var(--navy-ink); }
  .times.times-light .time-card .name { color: var(--muted); }

  /* ============ EQUIPOS QUE SIRVEN (resumen) ============ */
  .equipos-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
  }
  .equipo-card {
    background: var(--white);
    border-radius: 14px;
    padding: 16px 14px 18px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .equipo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(0,0,0,.32);
  }
  /* contain, no cover: son recortes de personas y no se deben cortar cabezas */
  .equipo-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--white);
  }
  .equipo-card h3 {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--navy-ink);
    line-height: 1.25;
  }
  @media (max-width: 520px) {
    .equipos-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .equipo-card h3 { font-size: 13.5px; }
  }

  /* ============ CARRUSEL DE FOTOS (página Nosotros) ============ */
  /* La portada ya no usa este carrusel (tiene su collage, más abajo);
     sigue vivo en nosotros.html. */
  /* .welcome estrecha su wrap a 820px; el carrusel necesita más aire para
     que las fotos sean el protagonista de la sección. */
  .welcome-fotos .wrap { max-width: 1080px; }

  .carrusel { margin-top: 40px; }
  .carrusel-viewport { position: relative; }

  .carrusel-track {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 20px;
  }
  .carrusel-track::-webkit-scrollbar { display: none; }
  .carrusel-track:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 4px;
  }

  /* una sola foto grande por vista: es el punto de la sección */
  .carrusel .carrusel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: 20px;
    overflow: hidden;
    background: var(--off);
    box-shadow: 0 10px 34px rgba(14,35,56,.16);
  }
  .carrusel .carrusel-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* las flechas van encima de la foto; la barra de scroll está oculta,
     así que con ratón son la forma principal de avanzar.
     (.collage-btn son las mismas flechas, sobre el collage de la portada) */
  .carrusel-btn,
  .collage-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    box-shadow: 0 6px 20px rgba(14,35,56,.28);
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .22s ease, color .22s ease, opacity .22s ease;
  }
  .carrusel-btn-prev, .collage-btn-prev { left: 14px; }
  .carrusel-btn-next, .collage-btn-next { right: 14px; }
  .carrusel-btn:hover:not(:disabled),
  .collage-btn:hover:not(:disabled) {
    background: var(--navy);
    color: var(--white);
  }
  .carrusel-btn:disabled, .collage-btn:disabled { opacity: .32; cursor: default; }
  .carrusel-btn:focus-visible,
  .collage-btn:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
  }

  .welcome-fotos .btn-navy { margin-top: 36px; }

  /* En el teléfono las flechas se hacen un poco más chicas y se pegan al
     borde, pero se quedan: son la única guía del carrusel. */
  @media (max-width: 620px) {
    .carrusel .carrusel-slide img { aspect-ratio: 4 / 3; }
    .carrusel-btn, .collage-btn { width: 38px; height: 38px; font-size: 22px; }
    .carrusel-btn-prev, .collage-btn-prev { left: 8px; }
    .carrusel-btn-next, .collage-btn-next { right: 8px; }
  }

  /* espacios del carrusel que todavía no tienen foto */
  .foto-pendiente {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: radial-gradient(120% 130% at 50% 0%, #1d4370 0%, var(--navy-deep) 72%);
    color: var(--silver);
  }
  .foto-pendiente::before {
    content: "";
    width: 60px;
    height: 60px;
    opacity: .5;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21%204.5H3A1.5%201.5%200%200%200%201.5%206v12A1.5%201.5%200%200%200%203%2019.5h18A1.5%201.5%200%200%200%2022.5%2018V6A1.5%201.5%200%200%200%2021%204.5zm0%2013.5H3V6h18v12z'/%3E%3Ccircle%20cx='8.2'%20cy='9.6'%20r='1.5'/%3E%3Cpath%20d='M4.6%2016.5l3.4-4.2%202.3%202.7%202.8-3.4%204.3%204.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21%204.5H3A1.5%201.5%200%200%200%201.5%206v12A1.5%201.5%200%200%200%203%2019.5h18A1.5%201.5%200%200%200%2022.5%2018V6A1.5%201.5%200%200%200%2021%204.5zm0%2013.5H3V6h18v12z'/%3E%3Ccircle%20cx='8.2'%20cy='9.6'%20r='1.5'/%3E%3Cpath%20d='M4.6%2016.5l3.4-4.2%202.3%202.7%202.8-3.4%204.3%204.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .foto-pendiente span {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .75;
  }

  @media (max-width: 620px) {
    .foto-pendiente { aspect-ratio: 4 / 3; }
    .foto-pendiente::before { width: 46px; height: 46px; }
  }

  /* ============ COLLAGE DE FOTOS (portada) ============ */
  /* Un mosaico de borde a borde de la pantalla: la sección suelta su
     padding lateral y los .wrap de texto lo recuperan por su cuenta. */
  .welcome-collage { padding-left: 0; padding-right: 0; }
  .welcome-collage .wrap { padding-left: 28px; padding-right: 28px; }

  .collage { position: relative; margin-top: 48px; }

  .collage-track {
    display: grid;
    /* dos filas de mosaico; el alto y ancho de las celdas se adaptan
       a la pantalla (mínimo, ideal, máximo) */
    grid-template-rows: repeat(2, clamp(150px, 23vw, 240px));
    grid-auto-columns: clamp(150px, 24vw, 250px);
    grid-auto-flow: column dense;
    gap: 6px;                /* el aire entre fotos: mínimo a propósito */
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .collage-track::-webkit-scrollbar { display: none; }
  .collage-track.arrastrando { cursor: grabbing; }
  .collage-track:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: -3px;
  }

  .collage-track .carrusel-slide {
    overflow: hidden;
    border-radius: 8px;
    background: var(--off);
  }
  .collage-track .carrusel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
  }

  /* El patrón del mosaico se repite cada 7 fotos: la 1.ª sale alta,
     la 4.ª grande y la 5.ª ancha; las demás, normales. Se decide solo
     por la posición — no hay que marcar nada en el HTML. */
  .collage-track .carrusel-slide:nth-child(7n+1) { grid-row: span 2; }
  .collage-track .carrusel-slide:nth-child(7n+4) { grid-row: span 2; grid-column: span 2; }
  .collage-track .carrusel-slide:nth-child(7n+5) { grid-column: span 2; }

  @media (max-width: 560px) {
    /* mismo padding lateral que las demás secciones en el teléfono */
    .welcome-collage .wrap { padding-left: 22px; padding-right: 22px; }
    .collage-track { gap: 4px; }
  }

  /* ============ ESTUDIO BÍBLICO EN CASA (portada) ============ */
  /* La foto va debajo del título y antes del texto. */
  .estudio-foto {
    margin: 34px 0 0;
    line-height: 0;
  }
  .estudio-foto img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(14,35,56,.16);
  }