/* ─────────────────────────────────────────────────────────────────────
   motion.css — Animaciones de la web IEBG (nov 2026)
   Va junto a motion.js. Todo lo que oculta algo para animarlo depende de
   la clase .motion-on en <html>, que pone motion.js: sin JS, o con
   «Reducir movimiento», la página se ve completa y quieta.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1 · Hero cinematográfico: zoom lento en el pase de fotos ── */
.motion-on .iebg-root .hero-slide { transform-origin: 30% 40%; will-change: transform; }
.motion-on .iebg-root .hero-slide.kb { animation: iebgKenBurns 8s linear forwards; }
@keyframes iebgKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
/* El titular sube palabra a palabra (usa .word-rise de styles.css) */
.motion-on .iebg-root .hero h1.iebg-reveal { transform: none; }
.motion-on .iebg-root .hero h1 .word-rise > span { transition-delay: calc(var(--rev-delay, 0s) + var(--w, 0) * 85ms); }

/* ── 2 · Cabecera viva ── */
.iebg-root .navA { transition: padding .35s cubic-bezier(.2,.7,.15,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.iebg-root .navA .logo-neg { display: none; }
.iebg-root .nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-accent); transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); pointer-events: none;
}
.iebg-root .navA[data-scrolled="true"] { box-shadow: 0 8px 24px rgba(21,17,13,.08); }
.iebg-root .navA[data-scrolled="true"] .logo-mark img { height: 36px !important; transition: height .35s cubic-bezier(.2,.7,.15,1); }
.iebg-root .navA .logo-mark img { transition: height .35s cubic-bezier(.2,.7,.15,1); }

/* Arriba del todo: menú transparente sobre la foto de la cabecera */
.has-hero .iebg-root .hero { margin-top: calc(-1 * var(--nav-real, 81px)); }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .logo-pos { display: none !important; }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .logo-neg { display: block; }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .word { border-left-color: rgba(255,255,255,.3) !important; }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .word .top { color: #fff; }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .nav-toggle span { background: #fff; }
@media (min-width: 1281px) {
  .has-hero .iebg-root .navA[data-scrolled="false"] .navA-links a { color: rgba(255,255,255,.88); }
  .has-hero .iebg-root .navA[data-scrolled="false"] .navA-links a:hover,
  .has-hero .iebg-root .navA[data-scrolled="false"] .navA-links a.active { color: #fff; background: rgba(255,255,255,.14); }
}
/* Degradado arriba de la foto para que el menú se lea siempre */
.has-hero .iebg-root .hero-media::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 1;
  background: linear-gradient(180deg, rgba(10,8,6,.5), rgba(10,8,6,0)); pointer-events: none;
}

/* ── 3 · Botones: elevación suave y flecha que avanza al pasar el ratón ── */
.iebg-root .btn svg { transition: transform .25s ease; }
.motion-on .iebg-root .btn { transition: background .15s, color .15s, border-color .15s, transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .motion-on .iebg-root .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,17,13,.14); }
  .motion-on .iebg-root .btn:hover svg { transform: translateX(3px); }
}
.motion-on .iebg-root .btn:active { transform: translateY(0); box-shadow: none; }

/* ── 4 · Próxima reunión en vivo ── */
.iebg-root .next-main { flex-wrap: wrap; row-gap: 8px; }
.iebg-root .next-dot { position: relative; }
.motion-on .iebg-root .next-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--c-accent); opacity: 0; animation: iebgPing 2s ease-out infinite;
}
@keyframes iebgPing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.iebg-root .next-left {
  font-size: .85rem; color: var(--c-muted); white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--c-accent-soft);
}
.iebg-root .next-left b { color: var(--c-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.iebg-root .next-left:empty { display: none; }
.iebg-root .next-service-strip.is-live .next-dot { background: #c2410c; box-shadow: 0 0 0 4px rgba(194,65,12,.18); }
.iebg-root .next-service-strip.is-live .next-dot::after { border-color: #c2410c; }
.iebg-root .next-service-strip.is-live .t-eyebrow { color: #c2410c; }
.iebg-root .next-service-strip.is-live .next-left { background: rgba(194,65,12,.1); }
.iebg-root .next-service-strip.is-live .next-left b { color: #c2410c; }

/* ── 5 · Iconos de contacto ── */
.iebg-root .contact-icon svg { overflow: visible; }
.iebg-root .ic-mail .flap { transform-origin: 7px 4px; transform-box: view-box; }
.motion-on .iebg-root .contact-list.is-in .ic-phone svg,
.motion-on .iebg-root .ic-phone:hover svg { animation: iebgRing 1s ease .2s 2; }
.motion-on .iebg-root .contact-list.is-in .ic-mail .flap,
.motion-on .iebg-root .ic-mail:hover .flap { animation: iebgFlap 1.4s cubic-bezier(.2,.7,.15,1) .4s both; }
.motion-on .iebg-root .contact-list.is-in .ic-pin svg,
.motion-on .iebg-root .ic-pin:hover svg { animation: iebgDrop .9s cubic-bezier(.3,1.6,.5,1) .5s both; }
@keyframes iebgRing { 0%,100% { transform: rotate(0); } 10%,30%,50% { transform: rotate(-14deg); } 20%,40%,60% { transform: rotate(14deg); } 70% { transform: rotate(0); } }
@keyframes iebgFlap { 0% { transform: scaleY(1); } 40%,70% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
@keyframes iebgDrop { from { transform: translateY(-14px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ── 6 · Horario que se dibuja ── */
.iebg-root .service-list.tl { position: relative; padding-left: 30px; }
.iebg-root .service-list.tl::before {
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: var(--c-accent); transform-origin: top;
}
.iebg-root .service-list.tl .service-block { position: relative; }
.iebg-root .service-list.tl .service-block::before {
  content: ""; position: absolute; left: -30px; top: calc(22px + .55rem);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--c-accent); box-sizing: border-box;
}
.motion-on .iebg-root .service-list.tl::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.2,.7,.15,1); }
.motion-on .iebg-root .service-list.tl .service-block { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.15,1); transition-delay: calc(.2s + var(--i, 0) * .25s); }
.motion-on .iebg-root .service-list.tl .service-block::before { transform: scale(0); transition: transform .4s ease; transition-delay: calc(.3s + var(--i, 0) * .25s); }
.motion-on .iebg-root .service-list.tl.is-in::before { transform: scaleY(1); }
.motion-on .iebg-root .service-list.tl.is-in .service-block { opacity: 1; transform: none; }
.motion-on .iebg-root .service-list.tl.is-in .service-block::before { transform: scale(1); }
.iebg-root section[data-bg="oscuro"] .service-list.tl .service-block::before { background: var(--c-ink); }

/* ── 7 · Galería: la foto crece desde su sitio ── */
.iebg-root .photo-card img { cursor: zoom-in; }
.iebg-lightbox { flex-direction: column; gap: 14px; cursor: default; }
.iebg-lightbox img { cursor: default; transform-origin: 0 0; }
.motion-on .iebg-lightbox img { transform: none; transition: none; }
.iebg-lightbox .lb-cap {
  color: #fff; font-family: var(--font-display, Georgia, serif); font-size: 1.1rem;
  text-align: center; max-width: 80vw; min-height: 1.4em;
}
.iebg-lightbox .lb-count { color: rgba(255,255,255,.55); font-size: .8rem; letter-spacing: .12em; }
.iebg-lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 20px; display: grid; place-items: center; cursor: pointer;
}
.iebg-lightbox .lb-nav:hover { background: rgba(255,255,255,.22); }
.iebg-lightbox .lb-prev { left: 20px; }
.iebg-lightbox .lb-next { right: 20px; }
.iebg-lightbox .lb-nav[hidden] { display: none; }
.iebg-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .iebg-lightbox .lb-nav { top: auto; bottom: 20px; transform: none; }
}

/* ── Reducir movimiento: todo quieto ── */
@media (prefers-reduced-motion: reduce) {
  .iebg-root .hero-slide { animation: none !important; }
  .iebg-root .next-dot::after { display: none; }
}

/* ── Selector de idioma ── */
.iebg-root .lang-switch { position: relative; margin-left: 10px; }
.iebg-root .lang-switch summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  color: var(--c-ink-soft); border: 1px solid var(--c-line);
}
.iebg-root .lang-switch summary::-webkit-details-marker { display: none; }
.iebg-root .lang-switch summary:hover { color: var(--c-accent); border-color: var(--c-accent); }
.iebg-root .lang-switch ul {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; margin: 0; padding: 6px;
  list-style: none; background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(21,17,13,.14); z-index: 70;
}
.iebg-root .lang-switch li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .9rem; color: var(--c-ink-soft); }
.iebg-root .lang-switch li a:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.iebg-root .lang-switch li a.on { color: var(--c-accent); font-weight: 600; }
.has-hero .iebg-root .navA[data-scrolled="false"]:not(:has(.navA-menu.open)) .lang-switch summary { color: #fff; border-color: rgba(255,255,255,.35); }
@media (max-width: 1280px) {
  .iebg-root .lang-switch { margin: 18px 0 0; }
  .iebg-root .lang-switch summary { display: none; }
  .iebg-root .lang-switch ul { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; box-shadow: none; background: none; min-width: 0; }
  .iebg-root .lang-switch li a { border: 1px solid var(--c-line); }
  .iebg-root .lang-switch li a.on { border-color: var(--c-accent); background: var(--c-accent-soft); }
}
@media (max-width: 1280px) { .iebg-root .lang-switch:not([open]) > ul { display: flex; } }

/* Aviso «en español» en las predicaciones */
.iebg-root .yt-lang {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-line);
}