/* ============================================
   Patricio D. Anguita — Portfolio Static Site
   Pixel-perfect Strikingly replica
   ============================================ */

/* El sitio adopta el tema claro por defecto; la capa de dark mode
   (al final del archivo) lo invierte según prefers-color-scheme del SO. */
:root { color-scheme: light; }

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Titillium Web', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  color: #333;
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: 'Titillium Web', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  line-height: 1.3;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; }

/* ---------- Utility ---------- */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.text-center { text-align: center; }
.text-white { color: #fff; }

.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 4px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: #5c1f8e;
  color: #fff;
}
.btn-primary:hover {
  background: #4a1873;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(92, 31, 142, 0.4);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline:hover {
  background: #fff;
  color: #1C1C1C;
}

.btn-dark {
  background: #1C1C1C;
  color: #fff;
}
.btn-dark:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(28, 28, 28, 0.4);
}

/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0;
  background: #1C1C1C;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: #1C1C1C;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.3;
  padding: 12px 0;
}

.navbar-subtitle {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  letter-spacing: 0.3px;
}

.nav-links {
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 100%;
}

.nav-links li {
  display: flex;
  align-items: stretch;
}

.nav-links a {
  color: rgba(255,255,255,0.85);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  padding: 18px 20px;
  display: flex;
  align-items: center;
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.nav-links a.active {
  color: #fff;
  background: #5c1f8e;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  width: 28px;
  height: 2px;
  background: #fff;
  transition: all 0.3s;
}

/* ---------- Hero Section ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1C1C1C;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Homepage hero — subtle dark overlay so white text stays legible. Compact height matching the original (~602px). */
.hero-home {
  min-height: 600px;
  padding-bottom: 80px;
}

.hero-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 28, 28, 0.45);
  z-index: 1;
}

/* Cosmic starfield canvas — sits above the bg + overlay, behind the content */
.hero-starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Subpage heroes — dark overlay */
.subpage-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 28, 28, 0.55);
  z-index: 1;
}

/* White curved bottom edge — concave arc (hero extends lower in center) */
.hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 3;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,80 1440,0 L1440,80 L0,80 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 24px;
}

.hero-profile {
  display: inline-block;
  margin-bottom: 24px;
}

.hero-profile img {
  width: 200px;
  height: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), filter 0.35s ease;
}

.hero-profile a:hover img,
.hero-profile a:focus-visible img {
  transform: scale(1.07) translateY(-4px);
  filter: brightness(1.08) drop-shadow(0 0 5px rgba(145, 63, 213, 0.85)) drop-shadow(0 10px 22px rgba(145, 63, 213, 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .hero-profile img { transition: filter 0.2s ease; }
  .hero-profile a:hover img,
  .hero-profile a:focus-visible img { transform: none; }
}

.hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 400;
}

.hero h1 {
  color: #fff;
  font-size: 2.8rem;
  margin-bottom: 16px;
  letter-spacing: 1px;
  font-weight: 700;
}

.hero-tagline {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
  font-weight: 300;
}

.hero-hashtags {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-indicator {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  animation: bounce 2s infinite;
}

.scroll-indicator svg {
  width: 30px;
  height: 30px;
  stroke: rgba(255,255,255,0.4);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* ---------- Section Base ---------- */
.section {
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  color: #1C1C1C;
  margin-bottom: 16px;
}

.section-header .divider {
  width: 60px;
  height: 3px;
  background: #5c1f8e;
  margin: 0 auto 20px;
}

.section-header p {
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ---------- About Section ---------- */
.about {
  background: #fff;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.about-image {
  position: relative;
}

.about-image .img-wrapper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  position: relative;
}

.about-image .img-wrapper img {
  width: 100%;
  display: block;
}

.about-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #2c2c2c, #1C1C1C);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #913fd5;
  font-family: 'Montserrat', sans-serif;
  font-size: 4rem;
  font-weight: 700;
}

/* Biography infographic image */
.about-biography-img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.about-text h2 {
  color: #1C1C1C;
  margin-bottom: 8px;
}

.about-text .role {
  color: #913fd5;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.about-text .bio {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.about-text .quote {
  font-style: italic;
  color: #1C1C1C;
  font-size: 1.15rem;
  border-left: 3px solid #5c1f8e;
  padding-left: 20px;
  margin-bottom: 30px;
}

.credentials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.credential-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.credential-icon {
  width: 24px;
  height: 24px;
  background: #5c1f8e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.credential-icon svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
}

.credential-text {
  font-size: 0.95rem;
  color: #555;
}

.credential-text strong {
  color: #1C1C1C;
}

/* ---------- Biography Section ---------- */
.biography {
  background: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ---------- Services Section ---------- */
.services {
  background: #FFFFFF;
  padding-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background: #fff;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-3px);
}

.service-subtitle {
  color: #913fd5;
  font-size: 1rem;
  margin-bottom: 12px;
}

.service-icon {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 24px;
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-icon svg {
  width: 100%;
  height: 100%;
  stroke: #5c1f8e;
  fill: none;
}

.service-card h3 {
  color: #1C1C1C;
  margin-bottom: 16px;
}

.service-card p {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

/* ---------- Ámbitos de competencia ---------- */
.competencias {
  background: #1C1C1C;
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 40px;
}

.competencias .section-header h2 {
  color: #fff;
}

.competency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Per-card accent colors — matched to each card's particle color */
.c-transformacion { --accent: #2eae66; --accent-bright: #5fd790; }  /* verde */
.c-cambio        { --accent: #f5c518; --accent-bright: #ffdb52; }  /* amarillo dorado */
.c-salud         { --accent: #4096ff; --accent-bright: #79b8ff; }  /* azul */

.competency-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 48px 34px 40px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.competency-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: #181818;
}

/* Bright particle field behind each card */
.competency-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.competency-index {
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  transition: color 0.35s ease;
  pointer-events: none;
}

.competency-card:hover .competency-index {
  color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.competency-icon {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
}

/* expanding ripple emitted on hover — noticeable regardless of icon shape */
.competency-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--accent-bright);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
}

.competency-card:hover .competency-icon::after {
  animation: competencyRipple 1.4s ease-out infinite;
}

@keyframes competencyRipple {
  0%   { opacity: 0.75; transform: scale(0.55); }
  100% { opacity: 0;    transform: scale(1.8); }
}

.competency-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              stroke 0.3s ease,
              stroke-width 0.3s ease,
              filter 0.3s ease;
}

.competency-card:hover .competency-icon svg {
  transform: scale(1.22) rotate(45deg);
  stroke: var(--accent-bright);
  stroke-width: 2.6;
  filter: drop-shadow(0 0 9px var(--accent));
}

.competency-card h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.competency-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.competency-line {
  display: block;
  height: 3px;
  width: 40px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 0.4s ease;
}

.competency-card:hover .competency-line {
  width: 80px;
}

.service-card .btn {
  padding: 10px 24px;
  font-size: 0.85rem;
  margin-top: auto;
  align-self: center;
}

/* ---------- Courses Section ---------- */
.courses {
  background: #1C1C1C;
  color: #fff;
}

.courses .section-header h2 {
  color: #fff;
}

.courses .section-header p {
  color: rgba(255,255,255,0.6);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.course-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  transition: all 0.3s ease;
}

.course-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: #913fd5;
  transform: translateY(-3px);
}

.course-type {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #913fd5;
  margin-bottom: 12px;
}

.course-card h3 {
  color: #fff;
  margin-bottom: 8px;
}

.course-duration {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.course-card p {
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---------- Oro Puro Section ---------- */
.oro-puro {
  background: #fff;
  position: relative;
  overflow: hidden;
}

.oro-puro::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(145, 63, 213, 0.06) 0%, transparent 70%);
  border-radius: 50%;
}

.oro-puro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.oro-puro-text h2 {
  color: #1C1C1C;
  margin-bottom: 8px;
}

.oro-puro-text .tagline {
  color: #913fd5;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.oro-puro-text p {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.oro-puro-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature-item svg {
  width: 22px;
  height: 22px;
  stroke: #5c1f8e;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-item span {
  color: #555;
  font-size: 0.95rem;
}

.oro-puro-visual {
  position: relative;
}

.newsletter-preview {
  background: linear-gradient(135deg, #1C1C1C, #333);
  border-radius: 12px;
  padding: 40px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(28, 28, 28, 0.3);
}

.newsletter-preview .logo-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #913fd5;
  margin-bottom: 8px;
}

.newsletter-preview .sub-text {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.newsletter-topics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.topic-tag {
  background: rgba(145, 63, 213, 0.15);
  color: #c89ef5;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

.newsletter-cta {
  display: flex;
  gap: 10px;
}

.newsletter-cta input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
  font-family: 'Titillium Web', sans-serif;
}

.newsletter-cta input::placeholder {
  color: rgba(255,255,255,0.4);
}

.newsletter-cta .btn {
  padding: 12px 24px;
}

/* ---------- Advisory Section ---------- */
.advisory {
  background: #FFFFFF;
}

.advisory-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 50px;
  position: relative;
}

/* Connector track + animated flow pulse linking steps 1 -> 2 -> 3 */
.advisory-steps::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: #e6d8f5;
  z-index: 0;
}

.advisory-steps::after {
  content: '';
  position: absolute;
  top: 29px;
  left: 16.66%;
  right: 16.66%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #913fd5 50%, transparent);
  background-size: 38% 100%;
  background-repeat: no-repeat;
  z-index: 0;
  animation: stepFlow 3.4s ease-in-out infinite;
}

@keyframes stepFlow {
  0%   { background-position: -45% 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: 145% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .advisory-steps::after { animation: none; opacity: 0; }
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #5c1f8e, #913fd5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 2;
}

.step h3 {
  color: #1C1C1C;
  margin-bottom: 12px;
}

.step p {
  color: #666;
  font-size: 0.95rem;
}

.advisory-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.advisory-area {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.advisory-area:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.advisory-area svg {
  width: 40px;
  height: 40px;
  stroke: #5c1f8e;
  flex-shrink: 0;
}

.advisory-area h4 {
  color: #1C1C1C;
  margin-bottom: 8px;
}

.advisory-area p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---------- Experience Section ---------- */
.experience {
  background: #fff;
}

.timeline {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  width: 2px;
  height: 100%;
  background: #e0dcd4;
}

.timeline-item {
  padding-left: 60px;
  padding-bottom: 40px;
  position: relative;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 18px;
  height: 18px;
  background: #5c1f8e;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #5c1f8e;
}

.timeline-item h4 {
  color: #1C1C1C;
  margin-bottom: 4px;
}

.timeline-item .company {
  color: #913fd5;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.timeline-item .period {
  color: #999;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.timeline-item p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---------- Contact / CTA Section ---------- */
.contact {
  background: #5c1f8e;
  color: #fff;
  text-align: center;
}

.contact h2 {
  color: #fff;
  margin-bottom: 16px;
}

.contact p {
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  transition: color 0.3s;
}

.contact-link:hover {
  color: #fff;
}

.contact-link svg {
  width: 22px;
  height: 22px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-link {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.social-link:hover {
  background: #fff;
  border-color: #fff;
}

.social-link:hover svg {
  fill: #5c1f8e;
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ---------- Stats / Badges ---------- */
.stats {
  background: #f5f5f5;
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.stat-item .stat-number {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #5c1f8e;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-item .stat-label {
  font-size: 0.9rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Countries / Speaking ---------- */
.speaking-countries {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.country-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(92, 31, 142, 0.08);
  border-radius: 24px;
  font-size: 0.85rem;
  color: #555;
}

.country-badge .flag {
  font-size: 1.2rem;
}

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  position: relative;
}

.testimonial-card {
  background: #e4f7f0;
}

.testimonial-card::before {
  content: '\201C';
  font-size: 4rem;
  color: rgba(92, 31, 142, 0.15);
  font-family: Georgia, serif;
  position: absolute;
  top: 10px;
  left: 20px;
  line-height: 1;
}

.testimonial-card blockquote {
  font-size: 1.3rem;
  color: #1C1C1C;
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 16px;
}

.testimonial-card .attribution {
  font-size: 0.8rem;
  color: #999;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 12px;
}

/* Testimonial with image */
.testimonial-card .testimonial-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

/* Horizontal testimonial cards (Cursos page - Strikingly style) */
.testimonials-horizontal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.testimonial-wide {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  background: #e4f7f0;
  border-radius: 8px;
  padding: 30px;
  align-items: start;
}

.testimonial-wide-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.testimonial-wide-content blockquote {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
  margin-bottom: 16px;
}

.testimonial-wide-content blockquote p::before {
  content: '\2714 ';
  margin-right: 4px;
}

.testimonial-wide-content .attribution {
  font-size: 0.85rem;
  color: #999;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

/* ---------- Detailed Course Cards ---------- */
.detailed-course {
  background: #fff;
  border-radius: 8px;
  padding: 36px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.detailed-course:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.detailed-course-with-img {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: start;
}

.detailed-course-with-img .course-img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
}

.detailed-course h3 {
  color: #1C1C1C;
  margin-bottom: 8px;
}

.detailed-course .course-modality {
  color: #913fd5;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.detailed-course p {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.detailed-course .learning-outcomes {
  list-style: none;
  margin-bottom: 20px;
}

.detailed-course .learning-outcomes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #555;
}

.detailed-course .learning-outcomes li::before {
  content: '↳';
  color: #5c1f8e;
  font-weight: 700;
  flex-shrink: 0;
}

.detailed-course .course-status {
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
}

/* ---------- Speaking Events ---------- */
.speaking-events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.speaking-event {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.speaking-event:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.speaking-event .event-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.speaking-event .event-content {
  padding: 24px;
}

.speaking-event h4 {
  color: #1C1C1C;
  font-size: 1rem;
  margin-bottom: 6px;
}

.speaking-event .event-detail {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0;
}

/* ---------- How It Works Steps (sub-pages) ---------- */
.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}

/* ---------- Modalidades ---------- */
.modalidades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.modalidad-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.modalidad-card .modalidad-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.modalidad-card .modalidad-content {
  padding: 32px 28px;
}

.modalidad-card h4 {
  color: #1C1C1C;
  margin-bottom: 12px;
}

.modalidad-card p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---------- Work Lines with images ---------- */
.work-line {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 30px;
}

.work-line .work-line-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.work-line .work-line-content {
  padding: 30px 30px 30px 0;
}

.work-line h3 {
  color: #1C1C1C;
  margin-bottom: 12px;
}

.work-line p {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---------- Pricing / Plan cards ---------- */
.plan-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
}

.plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Footer ---------- */
.footer {
  background: #FFFFFF;
  color: #666;
  padding: 30px 0 30px;
  font-size: 0.85rem;
  border-top: 1px solid #eee;
}

/* Footer logo */
.footer-logo-img {
  width: 72px;
  height: 72px;
  display: block;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.footer-col h4 {
  color: #5c1f8e;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.footer-col p,
.footer-col a {
  color: #666;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 8px;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: #5c1f8e;
}

.footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-tag {
  background: #f5f5f5;
  color: #666;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
  color: #999;
}

.footer a {
  color: #5c1f8e;
}

/* ---------- Sub-page hero with background image ---------- */
.subpage-hero {
  min-height: 50vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.subpage-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 28, 28, 0.6);
  z-index: 1;
}

.subpage-hero .hero-content {
  z-index: 2;
}

/* Asesoria hero variant (bright background image, dark text) */
.asesoria-hero {
  min-height: 100vh;
}

.asesoria-hero::before {
  background: rgba(255, 255, 255, 0.15);
}

.asesoria-hero h1 {
  color: #1C1C1C;
  font-weight: 300;
}

/* Cursos hero variant (full height, bright image, dark text, purple tagline) */
.cursos-hero::before {
  background: rgba(255, 255, 255, 0.42);
}

.cursos-hero h1 {
  color: #1C1C1C;
  font-weight: 300;
}

.cursos-hero .hero-tagline {
  color: #913fd5;
}

/* CTA with image (asesoria) */
.cta-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.cta-text {
  text-align: left;
}

.cta-image img {
  max-width: 100%;
}

/* Emprendimiento hero — original is the natural dark B&W photo (no purple tint) */
.hero-purple::before {
  background: rgba(28, 28, 28, 0.4);
}

.hero-purple h1 {
  font-weight: 300;
}

/* ---------- Oro Puro Page ---------- */
.oropuro-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1140px;
  width: 100%;
  text-align: left;
}

.oropuro-hero-text h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.oropuro-hero-quote {
  margin: 30px 0;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
}

.oropuro-hero-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: rgba(255,255,255,0.6);
}

.oropuro-hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oropuro-hero-logo img {
  width: 200px;
  height: auto;
  border-radius: 20px;
}

/* Mountain background section */
.oropuro-mountain {
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.oropuro-mountain-logo {
  width: 120px;
  height: auto;
  border-radius: 20px;
  position: relative;
  z-index: 2;
}

/* Siempre contigo section */
.siempre-contigo {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.siempre-contigo-text {
  background: #f0f0f0;
  padding: 60px 50px;
  border-radius: 8px;
}

.siempre-contigo-phone img {
  max-width: 320px;
  margin: 0 auto;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  h1 { font-size: 2.5rem; }
  .hero h1 { font-size: 2.8rem; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-image {
    max-width: 400px;
    margin: 0 auto;
  }

  .services-grid,
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .competency-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .oro-puro-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .advisory-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .advisory-steps::before,
  .advisory-steps::after {
    display: none;
  }

  .advisory-areas {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oropuro-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .oropuro-hero-logo {
    order: -1;
  }

  .siempre-contigo {
    grid-template-columns: 1fr;
  }

  .how-it-works-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .modalidades-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .work-line {
    grid-template-columns: 1fr;
  }

  .work-line .work-line-content {
    padding: 30px;
  }

  .detailed-course-with-img {
    grid-template-columns: 1fr;
  }

  .testimonial-wide {
    grid-template-columns: 1fr;
  }

  .cta-with-image {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-text {
    text-align: center;
  }

  .speaking-events {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28,28,28,0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 1.2rem;
  }

  .hamburger {
    display: flex;
    z-index: 1001;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero h1 { font-size: 2.2rem; }
  .hero-tagline { font-size: 1rem; }

  .services-grid,
  .courses-grid {
    grid-template-columns: 1fr;
  }

  .section { padding: 70px 0; }

  .contact-links {
    flex-direction: column;
    align-items: center;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .speaking-events {
    grid-template-columns: 1fr;
  }

  .modalidades-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-tags {
    justify-content: center;
  }

  .testimonial-wide {
    grid-template-columns: 1fr;
  }

  .cta-with-image {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  h2 { font-size: 1.8rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
}

/* ---------- Biography timeline (HTML rebuild of the original "Resumen de mi trayectoria" image) ---------- */
.bio-timeline {
  max-width: 720px;
  margin: 0 auto;
  background: #f5f5ef;
  padding: 8px 36px 28px;
  border-radius: 4px;
}

.bio-timeline-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: #f4582e;
  text-align: center;
  margin: 24px 0 4px;
  letter-spacing: -0.5px;
}

.bio-row {
  display: grid;
  grid-template-columns: 120px 1fr 190px;
  gap: 28px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid #f4582e;
}

.bio-timeline .bio-row:first-of-type {
  border-top: none;
}

.bio-year {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: #f4582e;
}

.bio-desc p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.bio-desc p:last-child {
  margin-bottom: 0;
}

.bio-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.bio-logos img {
  max-width: 150px;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.bio-logos img.is-loaded {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bio-logos img { transition: opacity 0.3s ease; transform: none; }
}

/* Placeholder for a logo still to be supplied — subtly striped box */
.bio-logo-placeholder {
  width: 150px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: #9a8f7e;
  border: 1px dashed #cbbfa9;
  border-radius: 4px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.025),
    rgba(0, 0, 0, 0.025) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* Rows with several logos (e.g. 2022): smaller so they form a compact cluster */
.bio-logos-dense {
  gap: 10px;
}

.bio-logos-dense img {
  max-width: 80px;
  max-height: 46px;
}

@media (max-width: 640px) {
  .bio-timeline {
    padding: 8px 18px 18px;
  }
  .bio-row {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    justify-items: center;
    padding: 18px 0;
  }
  .bio-year {
    font-size: 2.4rem;
  }
}

/* ---------- Cookie Consent Banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  background: #1C1C1C;
  color: #fff;
  border-top: 3px solid #5c1f8e;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 760px;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.cookie-banner-link {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: #913fd5;
  text-decoration: underline;
  white-space: nowrap;
}

.cookie-banner-link:hover {
  color: #fff;
}

.cookie-banner-accept {
  padding: 10px 28px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 16px 20px;
  }

  .cookie-banner-actions {
    justify-content: center;
  }
}

/* ---------- Legal / Policy Content ---------- */
.legal-content {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.7;
}

.legal-content h2 {
  color: #1C1C1C;
  font-size: 1.6rem;
  margin-top: 36px;
  margin-bottom: 10px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content .divider {
  width: 60px;
  height: 3px;
  background: #5c1f8e;
  margin: 0 0 20px;
}

.legal-content p {
  margin-bottom: 18px;
}

.legal-content ul {
  list-style: disc;
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-content li {
  margin-bottom: 10px;
}

.legal-content a {
  color: #5c1f8e;
  text-decoration: underline;
}

.legal-content a:hover {
  color: #4a1873;
}

/* ============================================
   Course Detail Pages (curso-*.html)
   Hero estilo "1d" (imagen + overlay) + cuerpo editorial estilo "1a"
   ============================================ */
.cd-hero {
  position: relative;
  color: #fff;
  padding: 150px 0 70px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(28,28,28,0.92), rgba(74,24,115,0.78));
}

.cd-hero .container {
  position: relative;
  z-index: 1;
}

.cd-kicker {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #dcc6f3;
}

.cd-hero h1 {
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  max-width: 760px;
  margin: 14px 0 16px;
  line-height: 1.2;
}

.cd-hero .cd-lead {
  color: rgba(255,255,255,0.82);
  font-size: 1.12rem;
  max-width: 620px;
  margin-bottom: 28px;
}

.cd-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.cd-meta .lbl {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}

.cd-meta .val {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
}

/* ----- Body (editorial single column) ----- */
.cd-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 24px;
}

.cd-section {
  margin-bottom: 52px;
}

.cd-section:last-child {
  margin-bottom: 0;
}

.cd-section > .cd-kicker {
  color: #913fd5;
}

.cd-section h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #1C1C1C;
  margin: 6px 0 20px;
}

.cd-section > p {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.cd-outcomes {
  list-style: none;
}

.cd-outcomes li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: #555;
  font-size: 1.02rem;
}

.cd-outcomes li::before {
  content: '↳';
  color: #5c1f8e;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cd-note {
  font-size: 0.95rem;
  color: #888;
  margin-top: 4px;
}

.cd-block {
  border-left: 3px solid #913fd5;
  padding: 4px 0 4px 22px;
  margin-bottom: 22px;
}

.cd-block h4 {
  font-size: 1.12rem;
  color: #1C1C1C;
  margin-bottom: 6px;
}

.cd-block p {
  font-size: 0.98rem;
  color: #555;
  margin-bottom: 0;
}

.cd-block.bonus {
  border-color: #f5c518;
}

.cd-block.bonus h4 {
  color: #a87f00;
}

.cd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cd-chips span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(92,31,142,0.08);
  color: #5c1f8e;
}

/* Professor card */
.cd-prof {
  background: #f5f5ef;
  border-radius: 10px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}

.cd-prof .cd-score {
  text-align: center;
}

.cd-prof .cd-score .num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  color: #5c1f8e;
  line-height: 1;
}

.cd-prof .cd-score .num small {
  font-size: 1.2rem;
  color: #aaa;
}

.cd-prof .cd-score .lbl {
  font-size: 0.78rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}

.cd-prof blockquote {
  font-style: italic;
  color: #444;
  font-size: 1rem;
  margin-bottom: 10px;
}

.cd-prof .cd-linkedin {
  color: #5c1f8e;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
}

.cd-prof .cd-linkedin:hover {
  color: #4a1873;
}

/* Closing CTA */
.cd-cta {
  background: #1C1C1C;
  color: #fff;
  text-align: center;
  padding: 64px 24px;
}

.cd-cta h2 {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.cd-cta p {
  color: rgba(255,255,255,0.65);
  max-width: 540px;
  margin: 0 auto 28px;
}

@media (max-width: 768px) {
  .cd-hero { padding: 120px 0 56px; }
  .cd-hero h1 { font-size: 2.1rem; }
  .cd-meta { gap: 24px; }
  .cd-body { padding: 50px 24px; }
  .cd-prof {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
}

/* ============================================
   Dark mode — respeta la preferencia del SO (prefers-color-scheme).
   Capa aditiva: el tema claro de arriba queda intacto; aquí solo se
   redefinen superficies y textos cuando el sistema pide modo oscuro.
   Las secciones que ya son oscuras (navbar, heroes, competencias,
   cursos, contacto, footer del banner, CTAs de curso) se mantienen.
   Los heroes con foto clara (asesoria/cursos) conservan su texto
   oscuro porque van sobre imagen, no sobre fondo de tema.
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121212;           /* fondo de página */
    --surface: #1c1c1c;      /* secciones y tarjetas que eran claras */
    --surface-2: #242424;    /* tarjetas elevadas / hover */
    --surface-warm: #211f1a; /* reemplaza el crema #f5f5ef */
    --surface-soft: #262626; /* reemplaza #f0f0f0 */
    --surface-mint: #14302a; /* reemplaza el menta #e4f7f0 */
    --band: #161616;         /* franjas alternas (#f5f5f5) */
    --text-strong: #ffffff;  /* títulos (#1C1C1C) — blanco puro */
    --text: #f1f1f1;         /* cuerpo (#333) — casi blanco */
    --text-2: #ededed;       /* #444 */
    --text-muted: #e6e6e6;   /* #555 */
    --text-soft: #d8d8d8;    /* #666 */
    --text-dim: #cacaca;     /* #888 */
    --text-faint: #bcbcbc;   /* #999 — gris claro, aún bien visible */
    --hairline: rgba(255, 255, 255, 0.12);
    --link: #c9a6f2;         /* púrpura brillante para enlaces/acentos sobre fondo oscuro */
  }

  body { background: var(--bg); color: var(--text); }

  /* Secciones claras -> oscuras */
  .about, .biography, .services, .oro-puro,
  .advisory, .experience, .footer { background: var(--surface); }
  .stats { background: var(--band); }

  /* Subpáginas: el fondo de varias secciones viene por estilo inline
     (background:#fff / #f5f5f5), que gana por especificidad. Se fuerza
     con !important para que no quede una franja blanca en modo oscuro. */
  section[style*="#fff"], section[style*="#FFF"] { background: var(--surface) !important; }
  section[style*="#f5f5f5"] { background: var(--band) !important; }

  /* Colores de texto fijados por estilo inline en el HTML (ganan por
     especificidad): se fuerzan a la versión clara/brillante en oscuro.
     Solo aplican a elementos sobre secciones de tema (no sobre fotos). */
  [style*="color:#555"], [style*="color: #555"] { color: var(--text-muted) !important; }
  [style*="color:#999"], [style*="color: #999"] { color: var(--text-faint) !important; }
  [style*="color:#913fd5"], [style*="color: #913fd5"] { color: var(--link) !important; }
  [style*="color:#1C1C1C"], [style*="color: #1C1C1C"],
  [style*="color:#1c1c1c"], [style*="color: #1c1c1c"] { color: var(--text-strong) !important; }

  /* Tarjetas y bloques que eran blancos */
  .service-card, .advisory-area, .detailed-course,
  .speaking-event, .modalidad-card, .work-line { background: var(--surface); }
  .service-card:hover, .advisory-area:hover,
  .speaking-event:hover, .detailed-course:hover { background: var(--surface-2); }

  /* Superficies especiales */
  .testimonial-card, .testimonial-wide { background: var(--surface-mint); }
  .cd-prof { background: var(--surface-warm); }
  .siempre-contigo-text { background: var(--surface-soft); }

  /* Biografía ("Resumen de mi trayectoria") en oscuro: panel oscuro, texto
     claro, y logos institucionales (grises pensados para crema) aclarados con
     filtro invert para que sigan visibles sobre fondo oscuro. */
  .bio-timeline { background: var(--surface-warm); }
  .bio-desc p { color: var(--text-muted); }
  .bio-logos img { filter: grayscale(1) invert(1) brightness(1.5); }
  .bio-logo-placeholder { border-color: var(--hairline); color: var(--text-faint); }
  .footer-tag { background: var(--band); color: var(--text-soft); }

  /* Títulos / texto fuerte (#1C1C1C) */
  .section-header h2, .about-text h2, .about-text .quote,
  .credential-text strong, .service-card h3, .oro-puro-text h2,
  .step h3, .advisory-area h4, .timeline-item h4,
  .testimonial-card blockquote, .detailed-course h3,
  .speaking-event h4, .modalidad-card h4, .work-line h3,
  .legal-content h2, .cd-section h2, .cd-block h4 { color: var(--text-strong); }

  /* Texto de cuerpo / secundario */
  .about-text .bio, .credential-text, .oro-puro-text p,
  .feature-item span, .country-badge, .detailed-course p,
  .detailed-course .learning-outcomes li, .work-line p,
  .cd-section > p, .cd-block p, .cd-outcomes li, .timeline-item p,
  .legal-content, .cd-prof blockquote,
  .testimonial-wide-content blockquote { color: var(--text-muted); }

  .section-header p, .service-card p, .step p, .advisory-area p,
  .stat-item .stat-label, .modalidad-card p,
  .footer, .footer-col p, .footer-col a { color: var(--text-soft); }

  .timeline-item .period, .testimonial-card .attribution,
  .testimonial-wide-content .attribution, .detailed-course .course-status,
  .speaking-event .event-detail, .footer-bottom, .cd-note,
  .cd-prof .cd-score .lbl, .cd-prof .cd-score .num small { color: var(--text-faint); }

  /* Bordes y líneas claras */
  .footer, .footer-bottom { border-color: var(--hairline); }
  .timeline::before { background: var(--hairline); }
  .advisory-steps::before { background: var(--hairline); }
  .testimonial-card .attribution { border-top-color: var(--hairline); }

  /* Acentos púrpura: subir brillo sobre fondo oscuro */
  .footer a, .footer-col a, .footer-col h4, .footer-col a:hover,
  .legal-content a, .legal-content a:hover, .cd-prof .cd-linkedin,
  .section-header .divider, .legal-content .divider,
  .stat-item .stat-number,
  .cd-outcomes li::before,
  .detailed-course .learning-outcomes li::before { color: var(--link); }
  .section-header .divider, .legal-content .divider { background: var(--link); }
  .feature-item svg, .advisory-area svg, .service-icon svg { stroke: var(--link); }
  .cd-chips span { background: rgba(185, 143, 230, 0.16); color: var(--link); }

  /* Etiquetas/acentos en púrpura medio (#913fd5) -> versión brillante.
     Se excluye .cursos-hero .hero-tagline porque va sobre foto clara. */
  .service-subtitle, .about-text .role, .oro-puro-text .tagline,
  .timeline-item .company, .course-type, .detailed-course .course-modality,
  .cd-section > .cd-kicker, .cd-prof .cd-score .num { color: var(--link); }
  .cd-block.bonus h4 { color: #e6b800; } /* oro más brillante sobre fondo oscuro */

  /* La curva blanca bajo el hero del home debe igualar la sección
     siguiente (.services -> --surface) en vez de quedar blanca. */
  .hero-curve {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,80 1440,0 L1440,80 L0,80 Z' fill='%231c1c1c'/%3E%3C/svg%3E");
  }
}