/* ============================================================
   HYPERCONECTADO DESIGN SYSTEM v2.0
   Estilos específicos para la página de Camilo A. García
   ============================================================ */

:root {
  /* PRIMARIOS */
  --turquesa:      #308A9E;
  --turquesa-hover:#3BBBB2;
  --azul-claro:    #A8D8EA;
  --rojo:          #E63946;
  --rojo-hover:    #D32735;
  --naranja:       #FF9F1C;
  --naranja-hover: #E58A00;
  --gris-oscuro:   #2C3E50;
  --blanco:        #FFFFFF;
  --fondo:         #F3F3F3;
  --borde:         #000000;
  --borde-suave:   #DDE8EE;
  
  /* TIPOGRAFÍA */
  --font-display: 'Hakuna Sans', 'Open Sans', Arial, sans-serif;
  --font-body:    'Matter SQ Regular', 'Open Sans', Arial, Helvetica, sans-serif;
  
  /* ESPACIADO */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  
  /* SOMBRAS BRUTALISTAS */
  --shadow-sm: 3px 3px 0px #000000;
  --shadow-md: 5px 5px 0px #000000;
  --shadow-lg: 8px 8px 0px #000000;
  --shadow-hover: 10px 10px 0px #000000;
  
  /* BORDES */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
}

/* ============================================================
   CONTENEDOR PRINCIPAL
   ============================================================ */
.camilo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

/* Separador brutalista entre secciones */
.camilo-page .section {
  margin-bottom: var(--space-xxl);
  border-bottom: 3px solid var(--borde);
  padding-bottom: var(--space-xl);
}

.camilo-page .section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ============================================================
   BADGE DE SECCIÓN (patrón canónico)
   ============================================================ */
.camilo-page .badge-seccion {
  display: inline-block;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--borde);
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
}

/* Variante turquesa */
.camilo-page .badge-seccion-turquesa {
  background: var(--turquesa);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.camilo-page .hero-brutal {
  background: var(--turquesa);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  margin-bottom: var(--space-xxl);
}

.camilo-page .hero-top {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.camilo-page .hero-foto {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--blanco);
  overflow: hidden;
  background: var(--azul-claro);
  box-shadow: var(--shadow-md);
}

.camilo-page .hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camilo-page .hero-info {
  flex: 1;
}

.camilo-page .hero-nombre {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 900;
  color: var(--blanco);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.camilo-page .hero-rol {
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
}

.camilo-page .hero-bio {
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 600px;
}

.camilo-page .social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.camilo-page .social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
  font-family: var(--font-display);
  text-decoration: none;
}

.camilo-page .social-btn:hover {
  background: var(--blanco);
  border-color: var(--borde);
  color: var(--turquesa);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* ============================================================
   CTA BLOCK
   ============================================================ */
.camilo-page .cta-block-brutal {
  background: var(--rojo);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-md);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-xxl);
}

.camilo-page .cta-texto strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--blanco);
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
}

.camilo-page .cta-texto span {
  font-size: 14px;
  color: rgba(255,255,255,0.88);
}

.camilo-page .btn-primario {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--blanco);
  color: var(--rojo);
  border: 3px solid var(--borde);
  border-radius: var(--radius-md);
  padding: 14px 32px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  text-decoration: none;
}

.camilo-page .btn-primario:hover {
  background: var(--naranja);
  color: var(--blanco);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ============================================================
   GRID DE SERVICIOS (4)
   ============================================================ */
.camilo-page .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.camilo-page .service-card {
  background: var(--blanco);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: block;
}

.camilo-page .service-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.camilo-page .service-icono {
  width: 56px;
  height: 56px;
  background: var(--azul-claro);
  border: 2px solid var(--borde);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--gris-oscuro);
  margin-bottom: var(--space-md);
}

.camilo-page .service-titulo {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--rojo);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.camilo-page .service-desc {
  font-size: 13px;
  color: #5a6874;
  line-height: 1.5;
}

/* ============================================================
   BIO CARD
   ============================================================ */
.camilo-page .bio-card-brutal {
  background: var(--blanco);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  padding: 32px 36px;
  margin-top: var(--space-lg);
}

.camilo-page .bio-card-brutal p {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: var(--space-md);
  color: #4a4a4a;
}

.camilo-page .bio-card-brutal p:last-child {
  margin-bottom: 0;
}

.camilo-page .bio-card-brutal strong {
  color: var(--gris-oscuro);
  font-weight: 900;
}

.camilo-page .bio-card-brutal a {
  color: var(--turquesa-hover);
  font-weight: 700;
  border-bottom: 2px solid var(--turquesa);
  transition: all 0.15s ease;
}

.camilo-page .bio-card-brutal a:hover {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
}

/* ============================================================
   CREDENCIALES
   ============================================================ */
.camilo-page .creds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.camilo-page .cred-card {
  background: var(--blanco);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  padding: 24px 16px;
  text-align: center;
  transition: all 0.2s ease;
}

.camilo-page .cred-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-md);
}

.camilo-page .cred-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--turquesa);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.camilo-page .cred-etiqueta {
  font-size: 11px;
  font-weight: 900;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ============================================================
   POSTS BLOCKS
   ============================================================ */
.camilo-page .posts-block {
  background: var(--blanco);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.camilo-page .posts-header {
  background: var(--gris-oscuro);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.camilo-page .posts-header-titulo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.camilo-page .posts-header-link {
  font-size: 11px;
  color: var(--turquesa);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s;
}

.camilo-page .posts-header-link:hover {
  color: var(--naranja);
}

.camilo-page .posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.camilo-page .posts-list li {
  border-bottom: 1px solid #f0f0f0;
}

.camilo-page .posts-list li:last-child {
  border-bottom: none;
}

.camilo-page .posts-list a {
  display: block;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-oscuro);
  transition: all 0.2s ease;
  text-decoration: none;
}

.camilo-page .posts-list a:hover {
  background: var(--fondo);
  color: var(--turquesa-hover);
  padding-left: 32px;
}

.camilo-page .posts-loading {
  padding: 20px 24px;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* ============================================================
   PROYECTO DESTACADO
   ============================================================ */
.camilo-page .project-card {
  background: var(--azul-claro);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transition: all 0.2s ease;
  text-decoration: none;
  margin-top: var(--space-lg);
}

.camilo-page .project-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.camilo-page .project-tag {
  font-size: 11px;
  font-weight: 900;
  color: var(--turquesa-hover);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.camilo-page .project-titulo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--gris-oscuro);
}

.camilo-page .project-arrow {
  font-size: 28px;
  color: var(--gris-oscuro);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ============================================================
   GRID DE 7 SERVICIOS
   ============================================================ */
.camilo-page .services-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.camilo-page .service-full-card {
  background: var(--blanco);
  border: 3px solid var(--borde);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.camilo-page .service-full-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.camilo-page .service-full-icono {
  width: 56px;
  height: 56px;
  background: var(--azul-claro);
  border: 2px solid var(--borde);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--gris-oscuro);
  margin-bottom: var(--space-md);
}

.camilo-page .service-full-titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--rojo);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.camilo-page .service-full-desc {
  font-size: 13px;
  color: #5a6874;
  line-height: 1.5;
}

/* ============================================================
   FOOTER INLINE
   ============================================================ */
.camilo-page .footer-inline {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 3px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.camilo-page .footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--gris-oscuro);
}

.camilo-page .footer-brand span {
  color: var(--turquesa);
}

.camilo-page .footer-copy {
  font-size: 12px;
  color: #999;
}

.camilo-page .footer-copy a {
  color: var(--turquesa-hover);
  font-weight: 700;
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .camilo-page .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .camilo-page .creds-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .camilo-page .hero-brutal {
    padding: 32px 24px;
  }
  
  .camilo-page .hero-foto {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .camilo-page {
    padding: 40px 16px 60px;
  }
  
  .camilo-page .services-grid {
    grid-template-columns: 1fr;
  }
  
  .camilo-page .creds-grid {
    grid-template-columns: 1fr;
  }
  
  .camilo-page .hero-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .camilo-page .hero-bio {
    text-align: center;
  }
  
  .camilo-page .social-row {
    justify-content: center;
  }
  
  .camilo-page .cta-block-brutal {
    flex-direction: column;
    text-align: center;
  }
  
  .camilo-page .btn-primario {
    width: 100%;
    justify-content: center;
  }
  
  .camilo-page .bio-card-brutal {
    padding: 24px 20px;
  }
  
  .camilo-page .project-card {
    flex-direction: column;
    text-align: center;
  }
  
  .camilo-page .footer-inline {
    flex-direction: column;
    text-align: center;
  }
  
  .camilo-page .services-full-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.camilo-page .hero-brutal,
.camilo-page .cta-block-brutal,
.camilo-page .service-card,
.camilo-page .bio-card-brutal,
.camilo-page .cred-card,
.camilo-page .posts-block,
.camilo-page .project-card,
.camilo-page .service-full-card {
  animation: fadeInUp 0.5s ease forwards;
}

.camilo-page .service-card:nth-child(1) { animation-delay: 0.05s; }
.camilo-page .service-card:nth-child(2) { animation-delay: 0.1s; }
.camilo-page .service-card:nth-child(3) { animation-delay: 0.15s; }
.camilo-page .service-card:nth-child(4) { animation-delay: 0.2s; }