EN100DELO | Desarrollamos personas. Impulsamos posibilidades.
:root{
--navy:#172D46;--dark:#08192A;--gold:#C9A65B;
--cream:#F4EFE5;--light:#F6F8FA;--muted:#687789;
--white:#fff;--line:#E2E8EE
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--navy);font-family:Poppins,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3{font-family:Montserrat,Arial,sans-serif;line-height:1.15}
.container{width:min(1180px,90%);margin:auto}
.section{padding:105px 0}
.eyebrow{color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.heading{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-1.4px;margin:15px 0 22px}
.lead{color:var(--muted);line-height:1.9;max-width:700px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 25px;border-radius:7px;font-weight:700;font-size:.88rem;transition:.25s}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:var(--dark)}
.btn-outline{border:1px solid #A7B3C0;color:white}
.btn-dark{background:var(--navy);color:white}
.center{text-align:center}
.center .lead{margin:auto}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}
/* NAVIGATION */
.header{position:absolute;inset:0 0 auto;z-index:30;transition:background .3s}
.header.scrolled{position:fixed;background:rgba(8,25,42,.97);box-shadow:0 5px 25px #0002}
.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{color:white;font:900 1.6rem Montserrat,sans-serif;letter-spacing:-1px}
.brand span{color:var(--gold)}
.brand small{display:block;color:#CBD4DE;font:500 .53rem Poppins,sans-serif;letter-spacing:2px;margin-top:4px}
.links{display:flex;align-items:center;gap:23px}
.links a{font-size:.78rem;font-weight:600;color:white}
.links a:hover{color:var(--gold)}
.links .contact-link{background:var(--gold);color:var(--dark);padding:12px 16px;border-radius:6px}
.menu-button{display:none;background:none;border:0;color:white;font-size:1.8rem}
/* HERO */
.hero{position:relative;min-height:760px;height:100svh;max-height:1050px;display:flex;align-items:center;overflow:hidden;background:var(--dark);color:white}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,18,32,.94),rgba(5,18,32,.68) 60%,rgba(5,18,32,.35))}
.hero-inner{position:relative;z-index:2;padding-top:75px}
.hero h1{font-size:clamp(2.8rem,6vw,5.8rem);letter-spacing:-2.5px;max-width:940px;margin:25px 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p:not(.eyebrow){max-width:650px;color:#E0E7EF;font-size:1.03rem;line-height:1.9}
.actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:35px}
/* INDICADOR INFERIOR DEL HERO */
.hero-scroll {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: #CBD4DE;
font-size: .72rem;
letter-spacing: 2px;
white-space: nowrap;
text-align: center;
}
/* Reservar espacio para el indicador inferior */
.hero-inner {
padding-bottom: 100px;
}
/* En pantallas bajas, ocultar el indicador */
@media (max-height: 750px) {
.hero-scroll {
display: none;
}
}
/* En celulares */
@media (max-width: 560px) {
.hero-scroll {
display: none;
}
.hero-inner {
padding-bottom: 40px;
}
}
/* MOVING STRIP */
.ticker{overflow:hidden;background:var(--gold);padding:19px 0}
.ticker-track{display:flex;width:max-content;animation:move 35s linear infinite}
.ticker-group{display:flex;flex-shrink:0}
.ticker-group span{white-space:nowrap;font:800 .9rem Montserrat,sans-serif;padding:0 30px;letter-spacing:1px}
.ticker-group b{padding-left:40px}
@keyframes move{to{transform:translateX(-50%)}}
/* INTRO */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.intro-image{position:relative}
.intro-image img{width:100%;height:490px;object-fit:cover;border-radius:17px}
.intro-stamp{position:absolute;right:-15px;bottom:-20px;background:var(--navy);color:white;padding:24px;border-radius:10px;max-width:220px;font-size:.85rem}
.intro-stamp strong{display:block;color:var(--gold);font:800 1.2rem Montserrat,sans-serif;margin-bottom:8px}
.intro-copy p{color:var(--muted);line-height:1.9;margin-bottom:18px}
.intro-copy .btn{margin-top:12px}
/* SERVICES */
.services{background:var(--light)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.service{background:white;border:1px solid var(--line);border-radius:16px;padding:36px;transition:.3s}
.service:hover{transform:translateY(-7px);box-shadow:0 20px 45px #142C4515}
.service-number{color:var(--gold);font:800 2.2rem Montserrat,sans-serif}
.service h3{font-size:1.24rem;margin:24px 0 15px}
.service p{font-size:.87rem;color:var(--muted);line-height:1.85}
.service a{display:inline-block;margin-top:25px;font-size:.83rem;font-weight:700}
/* 3D CAROUSEL */
.experience{background:var(--dark);color:white;overflow:hidden}
.experience .heading{color:white}
.experience .lead{color:#BDCBD8}
.carousel-stage {
height: 490px;
perspective: 1400px;
position: relative;
margin-top: 50px;
overflow: hidden;
touch-action: pan-y;
}
.carousel-3d {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(.22,.68,0,1.08);
}
.carousel-card {
position: absolute;
left: 50%;
top: 50%;
width: 290px;
height: 370px;
margin-left: -145px;
margin-top: -185px;
border-radius: 18px;
overflow: hidden;
background: #203C57;
backface-visibility: hidden;
box-shadow: 0 25px 65px rgba(0,0,0,.45);
}
.carousel-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
transparent 35%,
rgba(4,16,29,.92)
);
}
.carousel-card div {
position: absolute;
bottom: 24px;
left: 23px;
right: 23px;
z-index: 2;
}
.carousel-card strong {
display: block;
font: 800 1.15rem Montserrat, sans-serif;
}
.carousel-card small {
display: block;
color: #D7E1EB;
margin-top: 8px;
}
@media (max-width: 560px) {
.carousel-stage { height: 400px; }
.carousel-card {
width: 210px;
height: 290px;
margin-left: -105px;
margin-top: -145px;
}
}
/* PROGRAMS */
.programs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:23px;margin-top:45px}
.program{background:var(--navy);color:white;min-height:250px;border-radius:15px;padding:35px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.program:nth-child(2){background:#25415C}
.program:nth-child(3){background:#304D66}
.program:nth-child(4){background:#10283F}
.program:before{content:"";position:absolute;width:220px;height:220px;border:1px solid #C9A65B55;border-radius:50%;right:-70px;top:-90px}
.program small{color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.program h3{font-size:1.35rem;margin:12px 0}
.program p{font-size:.85rem;color:#D8E2EB;line-height:1.75}
/* SECOND VIDEO */
.video-band{height:500px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--dark);color:white}
.video-band:after{content:"";position:absolute;inset:0;background:rgba(6,22,39,.78)}
.video-band .container{position:relative;z-index:2;text-align:center}
.video-band h2{font-size:clamp(2.1rem,4.7vw,4.1rem);max-width:880px;margin:20px auto}
.video-band p:not(.eyebrow){max-width:650px;margin:0 auto;color:#DCE5EE}
.video-band .btn{margin-top:28px}
/* INSTRUCTORS */
.instructors{background:var(--light)}
.instructor-layout{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:20px;overflow:hidden;background:var(--navy);margin-top:48px;min-height:490px;box-shadow:0 20px 55px #10253A20}
.instructor-photo{position:relative;background:#304A64;min-height:490px}
.instructor-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font:800 5rem Montserrat,sans-serif}
.instructor-info{padding:55px;color:white;display:flex;flex-direction:column;justify-content:center}
.instructor-info h3{font-size:clamp(1.8rem,3.2vw,3rem);margin:15px 0 10px}
.instructor-specialty{color:#E5C47D;font-weight:600;font-size:.93rem}
.instructor-description{color:#D0DCE6;font-size:.88rem;line-height:1.85;margin:22px 0}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{border:1px solid #64788B;border-radius:25px;padding:7px 11px;color:#E3EAF1;font-size:.7rem}
.instructor-nav{display:flex;gap:12px;align-items:center;margin-top:30px}
.instructor-nav .btn{margin-left:auto}
.instructor-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:20px}
.person-btn{border:2px solid transparent;background:white;padding:12px;border-radius:10px;text-align:left;font-size:.79rem;font-weight:700;color:var(--navy)}
.person-btn.active{border-color:var(--gold)}
.person-btn small{display:block;color:var(--muted);font-weight:400;font-size:.69rem;margin-top:5px}
/* METHODOLOGY */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:50px}
.method-item{border-top:2px solid var(--gold);padding-top:25px}
.method-item b{font:800 2.4rem Montserrat,sans-serif;color:var(--gold)}
.method-item h3{font-size:1.1rem;margin:17px 0}
.method-item p{color:var(--muted);font-size:.85rem;line-height:1.8}
/* CTA */
.cta{background:radial-gradient(circle at 80% 30%,#C9A65B25,transparent 35%),var(--dark);color:white;text-align:center;padding:105px 0}
.cta h2{font-size:clamp(2.2rem,4.5vw,3.9rem);max-width:850px;margin:18px auto}
.cta h2 span{color:var(--gold)}
.cta p:not(.eyebrow){max-width:630px;margin:0 auto;color:#D0DAE5;line-height:1.9}
.cta .btn{margin-top:30px}
/* FOOTER */
.footer{background:#061321;color:#BBC9D6;padding:60px 0 25px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px}
.footer p{font-size:.84rem;max-width:350px;line-height:1.85;margin-top:18px}
.footer h3{font-size:.95rem;color:white;margin:0 0 20px}
.footer a:not(.brand){display:block;font-size:.83rem;margin-bottom:12px}
.footer a:hover{color:var(--gold)}
.copyright{text-align:center;border-top:1px solid #283A4C;margin-top:45px;padding-top:23px;font-size:.75rem}
/* RESPONSIVE */
@media(max-width:1000px){
.links{gap:13px}
.links a{font-size:.72rem}
.instructor-info{padding:35px}
}
@media(max-width:820px){
.menu-button{display:block}
.links{display:none;position:absolute;top:88px;left:0;right:0;background:var(--dark);padding:25px 5%;flex-direction:column;align-items:stretch}
.links.open{display:flex}
.links a{font-size:.9rem;padding:8px 0}
.intro-grid,.instructor-layout{grid-template-columns:1fr}
.intro-image{order:2}
.intro-image img{height:390px}
.services-grid{grid-template-columns:1fr 1fr}
.instructor-photo{min-height:400px}
.method-grid{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.section{padding:80px 0}
}
@media(max-width:560px){
.hero{height:90svh;min-height:650px}
.hero h1{font-size:2.7rem;letter-spacing:-1px}
.hero-scroll{display:none}
.actions{flex-direction:column;align-items:stretch}
.services-grid,.programs-grid,.method-grid,.footer-grid{grid-template-columns:1fr}
.carousel-stage{height:410px}
.carousel-card{width:230px;height:305px;margin-left:-115px;margin-top:-152.5px}
.video-band{height:440px}
.instructor-photo{min-height:340px}
.instructor-info{padding:30px 24px}
.instructor-nav{flex-wrap:wrap}
.instructor-nav .btn{margin:10px 0 0;width:100%}
.instructor-picker{grid-template-columns:1fr 1fr}
.intro-stamp{right:0}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* Aquí termina el CSS que ya tienes */
/* LOGOTIPO OFICIAL EN100DELO */
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.brand-symbol {
width: 58px;
height: 58px;
object-fit: contain;
flex-shrink: 0;
}
.brand-words {
display: flex;
flex-direction: column;
}
.brand-name {
font-family: Montserrat, sans-serif;
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -1px;
line-height: 1.1;
color: #FFFFFF;
}
.brand-name .gold {
color: #C9A65B;
}
.brand-words small {
margin-top: 6px;
font-family: Poppins, sans-serif;
font-size: .5rem;
font-weight: 500;
letter-spacing: 1.7px;
color: #D5DEE7;
}
@media (max-width: 560px) {
.brand-symbol {
width: 43px;
height: 43px;
}
.brand-name {
font-size: 1.15rem;
}
.brand-words small {
font-size: .42rem;
letter-spacing: 1px;
}
}
EN100DELO · Formación y Desarrollo
Desarrollamos personas.
Impulsamos posibilidades.
Encendemos ideas, activamos capacidades y creamos experiencias de aprendizaje que invitan a reflexionar, decidir y actuar.
DESCUBRE EN100DELO ↓
DESARROLLO PERSONAL ✦
MENTALIDAD FINANCIERA ✦
RELACIONES HUMANAS ✦
METAS Y DECISIONES ✦
CREATIVIDAD ✦
DESARROLLO PERSONAL ✦
MENTALIDAD FINANCIERA ✦
RELACIONES HUMANAS ✦
METAS Y DECISIONES ✦
CREATIVIDAD ✦
Aprender para actuarExperiencias que conectan ideas con decisiones.
Conoce EN100DELO
El potencial se desarrolla cuando una idea se enciende.
Creemos que las personas pueden ampliar sus capacidades cuando encuentran nuevas perspectivas, herramientas y oportunidades de aprendizaje.
En EN100DELO integramos formación, desarrollo humano y experiencias participativas para conectar el conocimiento con la vida personal y profesional.
Nuestra historia ↗
Nuestras líneas de trabajo
Formación que responde a diferentes necesidades.
Propuestas para personas, instituciones educativas, empresas y organizaciones.
01
Formación y capacitación
Charlas, talleres y programas de desarrollo personal, mentalidad financiera y relaciones humanas.
Explorar formación →
02
Soluciones para organizaciones
Propuestas formativas adaptadas a los objetivos de equipos, empresas e instituciones.
Conocer soluciones →
03
Desarrollo empresarial
Una línea orientada a capacidades, generación de valor y oportunidades de crecimiento empresarial.
Descubrir la línea →
Experiencias que conectan
El aprendizaje se vive, no solo se escucha.
Explora algunos de los elementos que forman parte de nuestra visión de formación.
Fotografías de experiencias formativas previas de integrantes del equipo.
Programas destacados
Temas que invitan a pensar y actuar.
Diseñamos experiencias formativas según las características y objetivos de cada grupo.
Desarrollo personal
Actitud y Orientación al Logro
Actitud, fijación de metas, decisiones y desarrollo de capacidades.
Desarrollo económico
Dinero y Mentalidad Financiera
Dinero, necesidades, cuadrante del flujo de dinero y generación de valor.
Desarrollo interpersonal
Relaciones Humanas y Autonomía
Análisis Transaccional, simbiosis y crecimiento a través de los riesgos.
Habilidades transversales
Creatividad y Solución de Problemas
Exploración de perspectivas, alternativas y aplicación de ideas.
Nuestra filosofía
Una idea puede cambiar tu perspectiva.
Una decisión puede cambiar tu dirección.
Promovemos el aprendizaje que se convierte en reflexión, compromiso y acción.
Descubre nuestra metodología ↗
El equipo detrás de la experiencia
Conoce a nuestros instructores.
Diferentes especialidades, un propósito compartido: facilitar experiencias de desarrollo humano.
Nuestra metodología
Del conocimiento a la acción.
Nuestra metodología integra conexión, comprensión, participación, reflexión y aplicación.
01Conectar
Construimos un ambiente de integración y participación.
02Comprender
Presentamos conceptos que amplían perspectivas.
03Experimentar
Integramos ejercicios, preguntas y dinámicas.
04Aplicar
Promovemos decisiones y compromisos concretos.
Construyamos una experiencia de formación
Enciende nuevas ideas.
Impulsa nuevas posibilidades.
Cuéntanos qué deseas desarrollar en tu institución, organización o grupo. Podemos explorar juntos una propuesta formativa.
Solicitar una propuesta ↗
/* HEADER */
const header=document.getElementById("header");
const menuButton=document.getElementById("menuButton");
const links=document.getElementById("links");
window.addEventListener("scroll",()=>{
header.classList.toggle("scrolled",window.scrollY>30);
},{passive:true});
menuButton.addEventListener("click",()=>{
const open=links.classList.toggle("open");
menuButton.textContent=open?"✕":"☰";
menuButton.setAttribute("aria-expanded",String(open));
});
document.getElementById("year").textContent=new Date().getFullYear();
/* SCROLL ANIMATIONS */
const reduced=window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if(reduced){
document.querySelectorAll(".reveal").forEach(el=>el.classList.add("visible"));
document.querySelectorAll("video").forEach(v=>v.pause());
}else if("IntersectionObserver" in window){
const observer=new IntersectionObserver(entries=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
},{threshold:.08});
document.querySelectorAll(".reveal").forEach(el=>observer.observe(el));
}else{
document.querySelectorAll(".reveal").forEach(el=>el.classList.add("visible"));
}
/* CARRUSEL 3D AUTOMÁTICO */
const experiences = [
{
title: "Participación activa",
desc: "Aprendizaje que involucra",
image: "imagenes/imagen-2.jpg"
},
{
title: "Experiencias compartidas",
desc: "Espacios para reflexionar",
image: "imagenes/imagen-6.jpeg"
},
{
title: "Formación presencial",
desc: "Ideas que se convierten en diálogo",
image: "imagenes/imagen-3.jpg"
},
{
title: "Desarrollo personal",
desc: "Capacidades y nuevas perspectivas",
image: "imagenes/imagen-7.jpeg"
},
{
title: "Aprendizaje en equipo",
desc: "Interacción y acompañamiento",
image: "imagenes/imagen-5.jpeg"
}
];
const carousel = document.getElementById("carousel3d");
const stage = document.getElementById("carouselStage");
const carouselCount = document.getElementById("carouselCount");
let carouselIndex = 0;
let rotation = 0;
let autoRotate = null;
let dragStart = null;
const total = experiences.length;
const angleStep = 360 / total;
experiences.forEach(item => {
const card = document.createElement("article");
card.className = "carousel-card";
const img = document.createElement("img");
img.src = item.image;
img.alt = item.title;
img.loading = "lazy";
const info = document.createElement("div");
const title = document.createElement("strong");
title.textContent = item.title;
const desc = document.createElement("small");
desc.textContent = item.desc;
info.append(title, desc);
card.append(img, info);
carousel.appendChild(card);
});
function positionCards() {
const radius = window.innerWidth {
card.style.transform =
`rotateY(${i * angleStep}deg) translateZ(${radius}px)`;
});
}
function updateRotation() {
carousel.style.transform = `rotateY(${rotation}deg)`;
carouselCount.textContent =
`${carouselIndex + 1} / ${total}`;
}
function rotateCarousel(direction) {
rotation -= direction * angleStep;
carouselIndex =
(carouselIndex + direction + total) % total;
updateRotation();
}
function stopAutoRotate() {
if (autoRotate !== null) {
clearInterval(autoRotate);
autoRotate = null;
}
}
function startAutoRotate() {
stopAutoRotate();
// Respeta la preferencia de reducir animaciones.
if (window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches) return;
// Inicia la rotación automática cada 3 segundos.
autoRotate = window.setInterval(() => {
if (!document.hidden) {
rotateCarousel(1);
}
}, 3000);
}
document.getElementById("carouselPrev")
.addEventListener("click", () => {
rotateCarousel(-1);
startAutoRotate();
});
document.getElementById("carouselNext")
.addEventListener("click", () => {
rotateCarousel(1);
startAutoRotate();
});
stage.addEventListener("pointerdown", e => {
dragStart = e.clientX;
stopAutoRotate();
});
stage.addEventListener("pointerup", e => {
if (dragStart === null) return;
const delta = e.clientX - dragStart;
if (Math.abs(delta) > 35) {
rotateCarousel(delta {
dragStart = null;
startAutoRotate();
});
stage.addEventListener("focusin", stopAutoRotate);
stage.addEventListener("focusout", e => {
if (!stage.contains(e.relatedTarget)) startAutoRotate();
});
window.addEventListener("resize", positionCards);
document.addEventListener("visibilitychange", () => {
if (document.hidden) stopAutoRotate();
else startAutoRotate();
});
positionCards();
updateRotation();
startAutoRotate();
/* INSTRUCTOR DATA */
const instructors=[
{
name:"Augusto Santisteban",
specialty:"Desarrollo Personal, Metas y Mentalidad Financiera",
photo:"imagenes/imagen-7.jpeg",
description:"Facilita experiencias sobre actitud, metas, decisiones económicas y generación de valor.",
topics:["Actitud","Metas","Dinero","Cuadrante","Generación de valor","Escalera al éxito"]
},
{
name:"Yeny Cisneros",
specialty:"Desarrollo Personal, Metas y Mentalidad Financiera",
photo:"",
description:"Imparte temas relacionados con la actitud, la fijación de metas, el dinero y el desarrollo de capacidades personales.",
topics:["Actitud","Metas","Dinero","Cuadrante","Generación de valor","Escalera al éxito"]
},
{
name:"Jhony Llamoga",
specialty:"Desarrollo Personal, Metas y Mentalidad Financiera",
photo:"imagenes/imagen-8.jpeg",
description:"Desarrolla sesiones sobre actitud, orientación al logro, mentalidad financiera y generación de valor.",
topics:["Actitud","Metas","Dinero","Cuadrante","Generación de valor","Escalera al éxito"]
},
{
name:"Ana Quintana",
specialty:"Relaciones Humanas y Desarrollo Interpersonal",
photo:"imagenes/imagen-9.jpeg",
description:"Facilita experiencias sobre relaciones humanas, interacción, autonomía, riesgos y creatividad.",
topics:["Relaciones humanas","Análisis Transaccional","Simbiosis","Riesgos","Creatividad"]
}
];
let instructorIndex=0;
const instructorPhoto=document.getElementById("instructorPhoto");
const instructorPicker=document.getElementById("instructorPicker");
function renderInstructor(){
const person=instructors[instructorIndex];
instructorPhoto.replaceChildren();
if(person.photo){
const img=document.createElement("img");
img.src=person.photo;
img.alt="Actividad formativa de "+person.name;
img.onerror=()=>{img.replaceWith(makeFallback(person))};
instructorPhoto.appendChild(img);
}else{
instructorPhoto.appendChild(makeFallback(person));
}
document.getElementById("instructorName").textContent=person.name;
document.getElementById("instructorSpecialty").textContent=person.specialty;
document.getElementById("instructorDescription").textContent=person.description;
const tags=document.getElementById("instructorTags");
tags.replaceChildren();
person.topics.forEach(topic=>{
const span=document.createElement("span");
span.textContent=topic;
tags.appendChild(span);
});
instructorPicker.replaceChildren();
instructors.forEach((p,i)=>{
const button=document.createElement("button");
button.type="button";
button.className="person-btn"+(i===instructorIndex?" active":"");
button.setAttribute("aria-pressed",String(i===instructorIndex));
const strong=document.createElement("strong");
strong.textContent=p.name;
const small=document.createElement("small");
small.textContent="Ver especialidad";
button.append(strong,small);
button.addEventListener("click",()=>{
instructorIndex=i;
renderInstructor();
});
instructorPicker.appendChild(button);
});
}
function makeFallback(person){
const div=document.createElement("div");
div.className="photo-fallback";
div.textContent=person.name.split(" ").map(x=>x[0]).slice(0,2).join("");
return div;
}
function changeInstructor(delta){
instructorIndex=(instructorIndex+delta+instructors.length)%instructors.length;
renderInstructor();
}
document.getElementById("instructorPrev").addEventListener("click",()=>changeInstructor(-1));
document.getElementById("instructorNext").addEventListener("click",()=>changeInstructor(1));
renderInstructor();
