/* Variables */
:root{
  --about-primary:#00f0ff;
  --about-secondary:#7b2dff;
  --about-dark:#0a0a1a;
  --about-darker:#050510;
  --about-light:#f0f0f0;
  --about-transition:all .4s cubic-bezier(.165,.84,.44,1);
}

/* Sección */
.about-section{
  position:relative;
  padding:100px 0;
  background:linear-gradient(135deg,var(--about-darker) 0%, var(--about-dark) 100%);
  color:var(--about-light);
  overflow:hidden;
}

/* Canvas partículas */
.about-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none; }

/* Contenedor */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* Hero */
.about-hero{ text-align:center; padding:80px 0; margin-bottom:60px; position:relative; }
.about-title{
  font-size:clamp(2.2rem,5vw,4rem);
  margin-bottom:1.2rem;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(123,45,255,.3);
}
.about-subtitle{ font-size:clamp(1.05rem,1.6vw,1.5rem); opacity:.85; max-width:720px; margin:0 auto; font-weight:300; }

/* Timeline */
.timeline-container{ margin:100px auto; position:relative; }
.timeline{ position:relative; max-width:980px; margin:0 auto; }
.timeline-line{
  position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%);
  background:linear-gradient(to bottom, transparent 0%, var(--about-primary) 20%, var(--about-secondary) 80%, transparent 100%);
  z-index:1;
}

/* Ítem con imagen + texto */
.timeline-item{
  position:relative; margin-bottom:90px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.timeline-content,
.timeline-media{ width:45%; }

/* Tarjeta de texto */
.timeline-content{
  background:rgba(10,10,26,.7);
  padding:28px; border-radius:16px;
  border:1px solid rgba(123,45,255,.12);
  backdrop-filter:blur(10px);
  transform-style:preserve-3d; transform:perspective(1000px);
  transition:var(--about-transition);
}
.timeline-content:hover{ transform:perspective(1000px) rotateY(4deg) translateY(-8px);
  box-shadow:0 15px 30px rgba(0,240,255,.10);
  border-color:rgba(123,45,255,.3);
}
.timeline-content h3{ font-size:1.35rem; margin:0 0 .6rem; color:var(--about-primary); }

/* Imagen (lado vacío) */
.timeline-media figure{ margin:0; }
.timeline-media img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:16px; border:1px solid rgba(123,45,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  background:linear-gradient(180deg,rgba(10,10,26,.6),rgba(5,5,16,.8));
}
.timeline-media img:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.5);
  border-color:rgba(123,45,255,.35);
}

/* Alternancia izquierda/derecha */
.timeline-item:nth-child(odd) .timeline-content{ order:2; text-align:right; padding-right:70px; }
.timeline-item:nth-child(odd) .timeline-media{ order:1; padding-left:70px; }
.timeline-item:nth-child(even) .timeline-content{ order:1; text-align:left; padding-left:70px; }
.timeline-item:nth-child(even) .timeline-media{ order:2; padding-right:70px; }

/* Punto */
.timeline-dot{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary));
  border:3px solid var(--about-dark);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; transition:var(--about-transition);
}
.timeline-item:hover .timeline-dot{ transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 18px rgba(0,240,255,.55); }

/* Equipo */
.team-section{ margin:120px 0; }
.section-title{
  text-align:center; font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:26px;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:40px; }
.team-member{ text-align:center; transition:var(--about-transition); }
.member-image{
  position:relative; width:200px; height:200px; margin:0 auto 16px;
  border-radius:50%; overflow:hidden; border:3px solid rgba(123,45,255,.3); transition:var(--about-transition);
}
.team-member:hover .member-image{ transform:translateY(-8px); border-color:var(--about-primary); box-shadow:0 10px 30px rgba(0,240,255,.28); }
.member-image img{ width:100%; height:100%; object-fit:cover; }
.member-overlay{
  position:absolute; inset:0; background:rgba(5,5,16,.65);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--about-transition);
}
.team-member:hover .member-overlay{ opacity:1; }
.social-links{ display:flex; gap:14px; }
.social-links a{ color:var(--about-light); font-size:1.4rem; transition:var(--about-transition); }
.social-links a:hover{ color:var(--about-primary); transform:translateY(-3px); }
.team-member h3{ font-size:1.15rem; margin:.2rem 0 .2rem; }
.team-member p{ opacity:.85; font-size:.95rem; }

/* Valores */
.values-section{ margin:100px 0; }
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-top:40px; }
.value-card{
  background:rgba(10,10,26,.7); border-radius:15px; padding:26px;
  border:1px solid rgba(123,45,255,.1); backdrop-filter:blur(10px);
  transition:var(--about-transition); text-align:center;
}
.value-card:hover{ transform:translateY(-8px); box-shadow:0 15px 30px rgba(0,240,255,.1); border-color:rgba(123,45,255,.3); }
.value-icon{ font-size:2.4rem; margin-bottom:14px;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.value-card h3{ font-size:1.2rem; margin-bottom:10px; }
.value-card p{ opacity:.85; line-height:1.6; }

/* CTA */
.about-cta{
  text-align:center; padding:70px 0; margin-top:56px;
  background:rgba(123,45,255,.06); border-radius:20px; border:1px solid rgba(123,45,255,.12);
}
.about-cta h2{
  font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:14px;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-cta p{ font-size:1.05rem; max-width:600px; margin:0 auto 22px; opacity:.85; }
.cta-button{
  display:inline-block; padding:14px 26px; border-radius:999px; text-decoration:none;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary)); color:#081018; font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,240,255,.3); }

/* Fade-in base (por si no está global) */
.fade-in{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
.fade-in.visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 992px){
  .timeline{ max-width:100%; }
  .timeline-line{ left:24px; transform:none; }
  .timeline-item{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:60px; }
  .timeline-content, .timeline-media{ width:100%; padding:0; }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content{ text-align:left; padding:0; }
  .timeline-item:nth-child(odd) .timeline-media,
  .timeline-item:nth-child(even) .timeline-media{ padding:0; }
  .timeline-dot{ left:24px; top:0; transform:translate(-50%,-50%); }
}
@media (max-width:768px){
  .member-image{ width:170px; height:170px; }
}
@media (max-width:576px){
  .member-image{ width:140px; height:140px; }
}
/* Variables */
:root{
  --about-primary:#00f0ff;
  --about-secondary:#7b2dff;
  --about-dark:#0a0a1a;
  --about-darker:#050510;
  --about-light:#f0f0f0;
  --about-transition:all .4s cubic-bezier(.165,.84,.44,1);
}

/* Sección */
.about-section{
  position:relative;
  padding:100px 0;
  background:linear-gradient(135deg,var(--about-darker) 0%, var(--about-dark) 100%);
  color:var(--about-light);
  overflow:hidden;
}

/* Canvas partículas */
.about-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none; }

/* Contenedor */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* Hero */
.about-hero{ text-align:center; padding:80px 0; margin-bottom:60px; position:relative; }
.about-title{
  font-size:clamp(2.2rem,5vw,4rem);
  margin-bottom:1.2rem;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(123,45,255,.3);
}
.about-subtitle{ font-size:clamp(1.05rem,1.6vw,1.5rem); opacity:.85; max-width:720px; margin:0 auto; font-weight:300; }

/* Timeline */
.timeline-container{ margin:100px auto; position:relative; }
.timeline{ position:relative; max-width:980px; margin:0 auto; }
.timeline-line{
  position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%);
  background:linear-gradient(to bottom, transparent 0%, var(--about-primary) 20%, var(--about-secondary) 80%, transparent 100%);
  z-index:1;
}

/* Ítem con imagen + texto */
.timeline-item{
  position:relative; margin-bottom:90px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.timeline-content,
.timeline-media{ width:45%; }

/* Tarjeta de texto */
.timeline-content{
  background:rgba(10,10,26,.7);
  padding:28px; border-radius:16px;
  border:1px solid rgba(123,45,255,.12);
  backdrop-filter:blur(10px);
  transform-style:preserve-3d; transform:perspective(1000px);
  transition:var(--about-transition);
}
.timeline-content:hover{ transform:perspective(1000px) rotateY(4deg) translateY(-8px);
  box-shadow:0 15px 30px rgba(0,240,255,.10);
  border-color:rgba(123,45,255,.3);
}
.timeline-content h3{ font-size:1.35rem; margin:0 0 .6rem; color:var(--about-primary); }

/* Imagen (lado vacío) */
.timeline-media figure{ margin:0; }
.timeline-media img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:16px; border:1px solid rgba(123,45,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  background:linear-gradient(180deg,rgba(10,10,26,.6),rgba(5,5,16,.8));
}
.timeline-media img:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.5);
  border-color:rgba(123,45,255,.35);
}

/* Alternancia izquierda/derecha */
.timeline-item:nth-child(odd) .timeline-content{ order:2; text-align:right; padding-right:70px; }
.timeline-item:nth-child(odd) .timeline-media{ order:1; padding-left:70px; }
.timeline-item:nth-child(even) .timeline-content{ order:1; text-align:left; padding-left:70px; }
.timeline-item:nth-child(even) .timeline-media{ order:2; padding-right:70px; }

/* Punto */
.timeline-dot{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary));
  border:3px solid var(--about-dark);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; transition:var(--about-transition);
}
.timeline-item:hover .timeline-dot{ transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 18px rgba(0,240,255,.55); }

/* Equipo */
.team-section{ margin:120px 0; }
.section-title{
  text-align:center; font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:26px;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:40px; }
.team-member{ text-align:center; transition:var(--about-transition); }
.member-image{
  position:relative; width:200px; height:200px; margin:0 auto 16px;
  border-radius:50%; overflow:hidden; border:3px solid rgba(123,45,255,.3); transition:var(--about-transition);
}
.team-member:hover .member-image{ transform:translateY(-8px); border-color:var(--about-primary); box-shadow:0 10px 30px rgba(0,240,255,.28); }
.member-image img{ width:100%; height:100%; object-fit:cover; }
.member-overlay{
  position:absolute; inset:0; background:rgba(5,5,16,.65);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--about-transition);
}
.team-member:hover .member-overlay{ opacity:1; }
.social-links{ display:flex; gap:14px; }
.social-links a{ color:var(--about-light); font-size:1.4rem; transition:var(--about-transition); }
.social-links a:hover{ color:var(--about-primary); transform:translateY(-3px); }
.team-member h3{ font-size:1.15rem; margin:.2rem 0 .2rem; }
.team-member p{ opacity:.85; font-size:.95rem; }

/* Valores */
.values-section{ margin:100px 0; }
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-top:40px; }
.value-card{
  background:rgba(10,10,26,.7); border-radius:15px; padding:26px;
  border:1px solid rgba(123,45,255,.1); backdrop-filter:blur(10px);
  transition:var(--about-transition); text-align:center;
}
.value-card:hover{ transform:translateY(-8px); box-shadow:0 15px 30px rgba(0,240,255,.1); border-color:rgba(123,45,255,.3); }
.value-icon{ font-size:2.4rem; margin-bottom:14px;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.value-card h3{ font-size:1.2rem; margin-bottom:10px; }
.value-card p{ opacity:.85; line-height:1.6; }

/* CTA */
.about-cta{
  text-align:center; padding:70px 0; margin-top:56px;
  background:rgba(123,45,255,.06); border-radius:20px; border:1px solid rgba(123,45,255,.12);
}
.about-cta h2{
  font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:14px;
  background:linear-gradient(90deg,var(--about-primary),var(--about-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-cta p{ font-size:1.05rem; max-width:600px; margin:0 auto 22px; opacity:.85; }
.cta-button{
  display:inline-block; padding:14px 26px; border-radius:999px; text-decoration:none;
  background:linear-gradient(45deg,var(--about-primary),var(--about-secondary)); color:#081018; font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,240,255,.3); }

/* Fade-in base (por si no está global) */
.fade-in{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
.fade-in.visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 992px){
  .timeline{ max-width:100%; }
  .timeline-line{ left:24px; transform:none; }
  .timeline-item{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:60px; }
  .timeline-content, .timeline-media{ width:100%; padding:0; }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content{ text-align:left; padding:0; }
  .timeline-item:nth-child(odd) .timeline-media,
  .timeline-item:nth-child(even) .timeline-media{ padding:0; }
  .timeline-dot{ left:24px; top:0; transform:translate(-50%,-50%); }
}
@media (max-width:768px){
  .member-image{ width:170px; height:170px; }
}
@media (max-width:576px){
  .member-image{ width:140px; height:140px; }
}