/**
 * FocoPlus — componentes interactivos:
 * modales (agendamiento, mapas, video), formularios AJAX, mapa con marca,
 * slider con 3 efectos (parallax / ken burns / staggered) y crédito Ecuation.
 *
 * @package FocoPlus
 */

/* ================= Modales ================= */
.foco-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.foco-modal[hidden] { display: none; }
.foco-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 12, 8, 0.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s ease; }
.foco-modal.is-open .foco-modal__backdrop { opacity: 1; }
.foco-modal__panel { position: relative; background: var(--sec-bg, #fff); color: var(--sec-text, #07100B); border-radius: 26px; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); transform: translateY(26px) scale(0.97); opacity: 0; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; }
.foco-modal.is-open .foco-modal__panel { transform: none; opacity: 1; }
.foco-modal__panel--map { width: min(860px, 100%); }
.foco-modal__panel--video { width: min(960px, 100%); background: #07100B; }
.foco-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(125, 125, 125, 0.25); background: var(--sec-bg, #fff); color: var(--sec-text, #07100B); cursor: pointer; display: grid; place-items: center; transition: transform 0.2s ease, background 0.2s ease; }
.foco-modal__close:hover { transform: rotate(90deg); background: #4ca674; color: #fff; border-color: #4ca674; }
.foco-modal__body { padding: 40px 36px 34px; }
.foco-modal__title { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.18; margin: 10px 0 8px; letter-spacing: -0.02em; }
.foco-modal__lead { color: var(--sec-sub, #5b6b62); margin: 0 0 22px; font-size: 15px; }
body.foco-modal-open { overflow: hidden; }

/* Pasos del modal (sede → formulario → gracias) */
.foco-step { display: none; }
.foco-step.is-active { display: block; animation: focoStepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes focoStepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Botones de sede (paso 1) */
.foco-modal__sedes { display: grid; gap: 12px; }
.foco-modal__sede-btn { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; border: 1.5px solid rgba(125, 125, 125, 0.22); background: transparent; color: inherit; cursor: pointer; font: inherit; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease; }
.foco-modal__sede-btn:hover { border-color: #4ca674; background: rgba(76, 166, 116, 0.08); transform: translateY(-2px); }
.foco-modal__sede-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #4ca674; color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; font-family: "Host Grotesk", sans-serif; }
.foco-modal__sede-info { flex: 1; min-width: 0; }
.foco-modal__sede-info strong { display: block; font-size: 16px; margin-bottom: 2px; }
.foco-modal__sede-info small { color: var(--sec-sub, #5b6b62); font-size: 12.5px; line-height: 1.45; display: block; }
.foco-modal__sede-arrow { flex: 0 0 auto; color: #4ca674; transition: transform 0.22s ease; }
.foco-modal__sede-btn:hover .foco-modal__sede-arrow { transform: translate(3px, -3px); }

/* Formulario del modal */
.foco-modal__sede-elegida { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: rgba(76, 166, 116, 0.1); border: 1px solid rgba(76, 166, 116, 0.35); font-size: 13.5px; color: var(--sec-sub, #41544a); }
.foco-modal__sede-elegida strong { color: #4ca674; }
.foco-modal__error { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #fdecec; border: 1px solid #f5b5b5; color: #a13232; font-size: 14px; }

/* Paso de gracias */
.foco-modal__success { text-align: center; padding: 18px 6px 4px; }
.foco-modal__success-icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #4ca674; color: #fff; margin-bottom: 18px; animation: focoPop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes focoPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.foco-modal__success h3 { font-size: 24px; margin: 0 0 10px; }
.foco-modal__success p { color: var(--sec-sub, #5b6b62); margin: 0 auto 22px; max-width: 42ch; }

/* ================= Mapa con marca Focoptica ================= */
.foco-map { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(125, 125, 125, 0.2); box-shadow: 0 18px 44px rgba(7, 16, 11, 0.18); }
.foco-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.foco-map__pin { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 8px 14px rgba(7, 16, 11, 0.4)); animation: focoPin 2.4s ease-in-out infinite; }
.foco-map__pin img { width: 52px; height: 52px; object-fit: contain; background: #07100B; border-radius: 50% 50% 50% 4px; padding: 6px; border: 2px solid #4ca674; transform: rotate(-45deg); }
.foco-map__pin img[src$="logo-blanco.png"] { }
@keyframes focoPin { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 8px)); } }
.foco-map__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Mapas en página de contacto */
.foco-sedes-maps { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 34px; }
.foco-sedes-maps .foco-sede-map-card h4 { margin: 0 0 4px; font-size: 17px; }
.foco-sedes-maps .foco-sede-map-card p { margin: 0 0 12px; color: var(--sec-sub, #5b6b62); font-size: 13.5px; }
.foco-sedes-maps .foco-map iframe { height: 240px; }

/* Disparadores de mapa en la tarjeta de contacto */
.foco-contact__list button.foco-contact__maplink { display: contents; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
li.foco-contact__sede { cursor: pointer; border-radius: 14px; transition: background 0.2s ease; }
li.foco-contact__sede:hover { background: rgba(76, 166, 116, 0.08); }
li.foco-contact__sede strong { color: #4ca674; }
li.foco-contact__sede .foco-contact__vermapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #4ca674; font-weight: 600; }

/* ================= Modal de video institucional ================= */
.foco-modal__panel--video .foco-modal__body { padding: 0; }
.foco-modal__video-wrap { position: relative; border-radius: 26px; overflow: hidden; background: #000; }
.foco-modal__video-wrap video { display: block; width: 100%; height: auto; max-height: calc(100vh - 60px); }
.foco-modal__panel--video .foco-modal__close { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.25); }

/* ================= Notificación de formulario enviado ================= */
.foco-form__ok { margin: 0 0 18px; padding: 16px 20px; border-radius: 16px; background: rgba(76, 166, 116, 0.12); border: 1px solid rgba(76, 166, 116, 0.4); color: #2f7a52; font-weight: 600; animation: focoStepIn 0.4s ease; }

/* ================= Slider del hero: 3 efectos ================= */
/* 1 · Parallax: el medio se mueve al hacer scroll y el contenido flota */
.foco-hero__slide[data-effect="parallax"] .foco-hero__media { will-change: transform; }
.foco-hero__slide[data-effect="parallax"].is-active .foco-hero__media img { animation: focoParallaxFloat 7s ease-in-out infinite alternate; }
@keyframes focoParallaxFloat { from { transform: translateY(-8px) scale(1.02); } to { transform: translateY(10px) scale(1.06); } }

/* 2 · Ken Burns: zoom y paneo cinematográfico */
.foco-hero__slide[data-effect="kenburns"].is-active .foco-hero__media img { animation: focoKenBurns 8s ease-out forwards; }
@keyframes focoKenBurns {
	0% { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.18) translate(-2.5%, 2%); }
}

/* 3 · Staggered: texto e imagen escalonados */
.foco-hero__slide[data-effect="stagger"] .foco-hero__content > * { opacity: 0; transform: translateY(26px); }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__content > * { animation: focoStaggerIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__content > *:nth-child(1) { animation-delay: 0.08s; }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__content > *:nth-child(2) { animation-delay: 0.22s; }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__content > *:nth-child(3) { animation-delay: 0.36s; }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__content > *:nth-child(4) { animation-delay: 0.5s; }
.foco-hero__slide[data-effect="stagger"] .foco-hero__media { opacity: 0; transform: scale(0.92); }
.foco-hero__slide[data-effect="stagger"].is-active .foco-hero__media { animation: focoStaggerMedia 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; }
@keyframes focoStaggerIn { to { opacity: 1; transform: none; } }
@keyframes focoStaggerMedia { to { opacity: 1; transform: scale(1); } }

/* Slide de video: póster integrado con botón de reproducción interna */
.foco-hero__video { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.foco-hero__video img { display: block; width: 100%; height: auto; }
.foco-hero__video-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(7, 16, 11, 0.25); cursor: pointer; transition: background 0.25s ease; }
.foco-hero__video-play:hover { background: rgba(7, 16, 11, 0.45); }
.foco-hero__video-play span { width: 84px; height: 84px; border-radius: 50%; background: #4ca674; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px rgba(76, 166, 116, 0.5); transition: transform 0.25s ease; }
.foco-hero__video-play:hover span { transform: scale(1.1); }

/* QA: sin animaciones pero con estados finales visibles */
body.foco-qa .foco-hero__slide[data-effect="stagger"] .foco-hero__content > *,
body.foco-qa .foco-hero__slide[data-effect="stagger"] .foco-hero__media { opacity: 1 !important; transform: none !important; animation: none !important; }
body.foco-qa .foco-hero__slide .foco-hero__media img { animation: none !important; transform: none !important; }
body.foco-qa .foco-map__pin { animation: none !important; }

/* ================= Crédito Ecuation.co ================= */
.foco-footer__credit { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.foco-footer__credit a { color: #4ca674; font-weight: 600; text-decoration: none; }
.foco-footer__credit a:hover { text-decoration: underline; }