/* ==========================================================================
   Xtudio.dev - Sección Quiénes Somos (About Section)
   ========================================================================== */

:root {
  --xt-bg-main: #0d0f12;
  --xt-bg-card: #16191e;
  --xt-text-primary: #f3f4f6;
  --xt-text-secondary: #9ca3af;
  --xt-accent: #3b82f6;
  --xt-accent-glow: rgba(59, 130, 246, 0.15);
  --xt-border: #262a33;
  --xt-max-width: 1140px;
}

body {
      margin: 0;
      height: 100vh;
      background-color: var(--xt-bg-main);
    }
	
	.about-top {
	display: flex;
	flex-flow: wrap;
	gap: 2rem;
    justify-content: center;
    align-items: center;
	padding: 0 7%;
	}

/* LOGO */
    .logo-container {
      max-width: 150px;
      height: auto;
	  order: 2;
    }

    /* Estilos base para los trazos del SVG */
    .logo-path {
      stroke-width: 12;
      stroke-linecap: round;
      stroke-linejoin: round;
      
      /* Animación de las líneas (duración de 2s) */
      animation: dibujarLogo 2s ease-in-out forwards;
    }
    
    /* Animación del relleno: empieza transparente y termina opaco */
    .logo-path {
      animation: dibujarLogo 2s ease-in-out forwards, aparecerRelleno 0.8s ease-in-out 1.8s forwards;
    }
    
    /* Estado inicial: sin relleno para que no interfiera mientras se dibuja */
    .pieza-blanca {
      stroke: #fff;
      fill: #fff;
      fill-opacity: 0; /* Arranca transparente */
    }

    .pieza-celeste {
      stroke: #008cd6;
      fill: #008cd6;
      fill-opacity: 0; /* Arranca transparente */
    }

    /* 1. Animación del trazo */
    @keyframes dibujarLogo {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* 2. Animación para que el color sólido aparezca suavemente al final */
    @keyframes aparecerRelleno {
      to {
        fill-opacity: 1;
		/*filter: drop-shadow(20px 0 40px rgba(0, 0, 0, .3)) drop-shadow(15px 0 50px rgba(0, 0, 0, .2));*/
      }
    }
	
/* Layout Contenedor Principal */
.about-section {
  background-color: var(--xt-bg-main);
  color: var(--xt-text-primary);
  font-family: var(--xt-font-sans);
  padding: 5rem 1.5rem;
  max-width: var(--xt-max-width);
  margin: 0 auto;
}

/* 1. Encabezado / Hero Interno */
.about-header {
  max-width: 780px;
  margin-bottom: 4rem;
  flex: 2;
  order: 1;
}

.about-badge {
  display: inline-block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--xt-accent);
  background-color: var(--xt-accent-glow);
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.about-title {
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #008DD0;
  margin-bottom: 1.5rem;
}

.about-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--xt-text-secondary);
}

.about-lead strong {
  color: var(--xt-text-primary);
}

/* 2. Bloque Alternado / Trayectoria (Flex Asimétrico) */
.about-story {
	display: flex;
	gap: 2rem;
    justify-content: center;
    align-items: center;
	padding: 3rem 7%;
	border-top: 1px solid var(--xt-border);
	border-bottom: 1px solid var(--xt-border);
	margin-bottom: 4rem;
}

.story-column.heading-col {
  min-width: 252px;
}

.story-column.heading-col h2 {
	font-size: 1.75rem;
	line-height: 1.3;
	color: var(--xt-text-primary);
	letter-spacing: -0.01em;
}

.story-column.content-col {
	max-width: 780px;
	color: var(--xt-text-secondary);
	margin-bottom: 1.25rem;
}

.story-column.content-col p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.about-top, .about-story {
	flex-flow: column;
	gap: 2rem;
    justify-content: center;
    align-items: center;
	margin-bottom: 60px;
	}
}

/* 3. Pilares Metodológicos (Grid 3 Columnas) */
	.about-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 5rem;
}

@media (min-width: 768px) {
	.about-pillars {
	grid-template-columns: repeat(3, 1fr);
  }
}

.pillar-card {
  background-color: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: 8px;
  padding: 2rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--xt-accent);
}

.pillar-number {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--xt-accent);
  margin-bottom: 1rem;
}

.pillar-card h3 {
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
  color: var(--xt-text-primary);
}

.pillar-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--xt-text-secondary);
  margin: 0;
}

/* 4. Franja CTA de Cierre */
.about-cta {
  background: linear-gradient(135deg, var(--xt-bg-card) 0%, #11141a 100%);
  border: 1px solid var(--xt-border);
  border-radius: 12px;
  padding: 3.5rem 2rem;
  text-align: center;
}

.about-cta h2 {
  font-size: 1.85rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  color: #ECEAEF;
}

.about-cta p {
  font-size: 1.05rem;
  color: var(--xt-text-secondary);
  max-width: 550px;
  margin: 0 auto 2rem auto;
}

.btn-cta {
  display: inline-block;
  background-color: var(--xt-accent);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 30px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-cta:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}


.region-content-bottom {
    color: #fff;
}
.region-content-bottom h4, .region-content-bottom a {
    color: var(--xt-accent);
}
.region-content-bottom a:hover {
    color: #fff;
}