/* ==========================================================
   IGLESIA IBEE — hoja de estilos común a todas las páginas
   ========================================================== */

:root{
  /* Colores de marca */
  --azul-profundo:#0f2e4a;
  --azul-blazer:#1f4e79;
  --gris:#6b7682;
  --amarillo-sol:#efc451;
  --dorado:#d2a435;
  --dorado-profundo:#a87420;

  /* Derivados de interfaz */
  --papel:#f6f7f9;
  --blanco:#ffffff;
  --linea:#dde2e8;
  --tinta:#0f2e4a;
  --texto:#3c4654;

  --titulo:"Cabin",system-ui,sans-serif;
  --cuerpo:"Open Sans",system-ui,-apple-system,sans-serif;

  --ancho:1120px;
  --radio:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--cuerpo);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul-blazer)}

h1,h2,h3,h4{font-family:var(--titulo);color:var(--tinta);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(32px,5.5vw,52px);font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(25px,3.6vw,36px);font-weight:700;letter-spacing:-.01em}
/* El h1 de las páginas interiores va dentro de .seccion y usa la escala del h2.
   El de la portada conserva su tamaño mayor. */
.seccion h1{font-size:clamp(25px,3.6vw,36px);font-weight:700;letter-spacing:-.01em;margin:0 0 .5em}
.seccion--azul h1{color:#fff}
h3{font-size:20px;font-weight:600}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 22px}
.seccion{padding:76px 0}
.seccion--claro{background:var(--blanco)}
.seccion--papel{background:var(--papel)}
.seccion--azul{background:var(--azul-profundo);color:#d6dee7}
.seccion--azul h2,.seccion--azul h3{color:#fff}

.antetitulo{
  font-family:var(--titulo);font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dorado-profundo);
  margin:0 0 10px;
}
.seccion--azul .antetitulo{color:var(--amarillo-sol)}
.plomo{font-size:18px;color:var(--gris);max-width:60ch}
.seccion--azul .plomo{color:#adbccb}

/* ---------- El arco: elemento distintivo tomado del logo ---------- */
.arco{display:block;width:100%;height:54px;line-height:0}
.arco svg{display:block;width:100%;height:100%}
.arco--azul-a-papel{background:var(--azul-profundo)}
.arco--azul-a-blanco{background:var(--azul-profundo)}
.arco--papel-a-azul{background:var(--papel)}
@media (max-width:600px){.arco{height:34px}}
.subrayado-arco{position:relative;display:inline-block;padding-bottom:14px}
.subrayado-arco::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  background:radial-gradient(ellipse 100% 200% at 50% 100%,var(--dorado) 55%,transparent 56%);
}

/* ---------- Barra de navegación ---------- */
/* La barra de navegación. OJO: la clase .barra está reservada para esto.
   No la reutilices en otras páginas o la barra se rompe. */
.barra{
  position:sticky;top:0;z-index:100;background:var(--blanco);
  border-bottom:1px solid var(--linea);box-shadow:0 2px 12px rgba(15,46,74,.10);
}
.barra .contenedor{display:flex;align-items:center;gap:20px;min-height:74px}
.barra .marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.barra .marca img{height:42px;width:auto}
.barra .marca span{
  font-family:var(--titulo);font-weight:700;font-size:17px;color:var(--tinta);
  letter-spacing:.01em;line-height:1.1;
}
.barra .marca small{display:block;font-size:10.5px;font-weight:400;color:var(--gris);letter-spacing:.08em}
.menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.menu a{
  font-size:15px;color:var(--texto);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--azul-blazer);border-bottom-color:var(--dorado)}
.menu a[aria-current="page"]{color:var(--tinta);font-weight:600;border-bottom-color:var(--dorado)}
.hamburguesa{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--tinta)}
.hamburguesa svg{display:block}

@media (max-width:980px){
  .hamburguesa{display:block}
  .menu{
    position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 22px 18px;
    border-bottom:1px solid var(--linea);display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--linea)}
}

/* ---------- Botones ---------- */
.boton{
  display:inline-block;font-family:var(--titulo);font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.boton--oro{background:var(--dorado);color:var(--azul-profundo)}
.boton--oro:hover{background:var(--amarillo-sol)}
.boton--borde{border-color:currentColor;color:var(--tinta)}
.boton--borde:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.seccion--azul .boton--borde,.portada .boton--borde{color:#fff}
.seccion--azul .boton--borde:hover,.portada .boton--borde:hover{background:#fff;color:var(--azul-profundo)}
a:focus-visible,button:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}

/* ---------- Portada ---------- */
.portada{
  background:
    radial-gradient(120% 90% at 50% -20%,#1f4e79 0%,transparent 62%),
    var(--azul-profundo);
  color:#fff;text-align:center;padding:72px 0 0;
}
.portada img.logo{width:min(230px,52vw);margin:0 auto 26px}
.portada h1{color:#fff;max-width:16ch;margin-inline:auto}
.portada p{color:#b9c8d6;font-size:19px;max-width:52ch;margin:0 auto 30px}
.portada .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding-bottom:70px}
.versiculo{
  font-family:var(--titulo);font-style:italic;color:var(--amarillo-sol);
  font-size:16px;letter-spacing:.01em;margin-bottom:22px;
}

/* ---------- Tarjetas ---------- */
.rejilla{display:grid;gap:20px}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.rejilla--3,.rejilla--2{grid-template-columns:1fr}}

.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 24px;
}
.seccion--claro .tarjeta{background:var(--papel);border-color:#e6eaef}
.tarjeta h3{margin-bottom:6px}
.tarjeta p{margin:0;font-size:15.5px}
.tarjeta .hora{
  font-family:var(--titulo);font-weight:700;color:var(--dorado-profundo);
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- Horarios ---------- */
.horarios{list-style:none;margin:0;padding:0}
.horarios li{
  display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-top:1px solid rgba(255,255,255,.15);
}
.seccion--claro .horarios li,.seccion--papel .horarios li{border-top-color:var(--linea)}
.horarios li:first-child{border-top:0}
.horarios .dia{
  font-family:var(--titulo);font-weight:700;min-width:112px;flex-shrink:0;
  color:var(--amarillo-sol);font-size:15px;
}
.seccion--claro .horarios .dia,.seccion--papel .horarios .dia{color:var(--dorado-profundo)}
.horarios .que{font-weight:600;color:#fff}
.seccion--claro .horarios .que,.seccion--papel .horarios .que{color:var(--tinta)}
.horarios .hh{margin-left:auto;font-size:14.5px;color:inherit;opacity:.8;flex-shrink:0}

/* ---------- Pie ---------- */
.pie{background:var(--azul-profundo);color:#9fb1c2;padding:56px 0 30px;font-size:14.5px}
.pie a{color:#cfdae4;text-decoration:none}
.pie a:hover{color:var(--amarillo-sol)}
.pie img{height:66px;width:auto;margin-bottom:16px}
.pie h4{color:#fff;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{padding:4px 0}
.pie .abajo{
  border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;
  font-size:13px;color:#7f93a6;
}

@media (prefers-reduced-motion:no-preference){
  .seccion>.contenedor>*{animation:aparecer .5s ease both}
  @keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}