/* =====================================================
   CENTRO IMAGINA — STYLESHEET v3
   Corrección: fade SOLO donde el texto se asienta
   sobre imagen oscura. Imágenes decorativas = limpias.
   ===================================================== */

:root {
  --purple:        #751D7B;
  --purple-dark:   #4A1150;
  --purple-mid:    #9B35A2;
  --purple-muted:  #BA78BF;
  --purple-light:  #F2E0F4;
  --purple-faint:  #FBF4FC;

  --teal:          #2D8A72;
  --teal-dark:     #1F6654;

  --white:         #FFFFFF;
  --surface:       #FDFAFD;
  --surface-alt:   #F6EDF7;
  --dark-bg:       #1A0520;
  --dark-bg-2:     #26082D;

  --text-1:        #1F0822;
  --text-2:        #6B3F72;
  --text-3:        #A87AAD;

  --border:        #E8D8EA;
  --border-mid:    #CEB0D2;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 4px rgba(31,8,34,.07);
  --shadow-sm: 0 3px 14px rgba(31,8,34,.10);
  --shadow-md: 0 8px 32px rgba(31,8,34,.14);
  --shadow-lg: 0 24px 64px rgba(31,8,34,.18);
  --shadow-purple: 0 8px 32px rgba(117,29,123,.30);

  /* Glass sobre oscuro */
  --glass-bg:     rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.13);
  --glass-blur:   blur(22px) saturate(150%);

  /* Glass sobre claro */
  --glass-light-bg:     rgba(255,255,255,0.75);
  --glass-light-border: rgba(255,255,255,0.6);
  --glass-light-blur:   blur(18px) saturate(130%);

  --ease: cubic-bezier(.4,0,.2,1);
  --t: 0.22s;
  --max-w: 1200px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400; color: var(--text-1);
  background: var(--white); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

.container {
  width: 100%; max-width: var(--max-w);
  margin-inline: auto; padding-inline: 28px;
}

/* ---- TIPOGRAFÍA ---- */
h1 { font-size: clamp(2.6rem,5.5vw,4.25rem); font-weight:700; line-height:1.06; letter-spacing:-.025em; }
h2 { font-size: clamp(1.8rem,3.5vw,2.75rem);  font-weight:600; line-height:1.15; letter-spacing:-.015em; }
h3 { font-size: clamp(1.05rem,2vw,1.3rem);    font-weight:600; line-height:1.25; }
h4 { font-size: .875rem; font-weight:600; }
p  { color: var(--text-2); line-height:1.7; }

.hero-headline em {
  font-style: italic; display: inline-block;
  line-height: 1.1; padding-bottom: .1em;
  color: var(--purple);
}

/* ---- FADE IN ---- */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.fade-in.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .fade-in { opacity:1; transform:none; transition:none; } }

/* ---- BOTONES ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill);
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--purple); color: #fff; border-color: var(--purple);
}
.btn-primary:hover {
  background: var(--purple-dark); border-color: var(--purple-dark);
  box-shadow: 0 6px 24px rgba(117,29,123,.38);
}
.btn-ghost {
  background: transparent; color: var(--text-1); border-color: var(--border);
}
.btn-ghost:hover { background: var(--purple-faint); border-color: var(--border-mid); }

.btn-outline {
  background: transparent; color: var(--purple); border-color: var(--purple);
}
.btn-outline:hover {
  background: var(--purple); color: #fff;
  box-shadow: 0 6px 24px rgba(117,29,123,.28);
}
.btn-white {
  background: #fff; color: var(--purple-dark); border-color: #fff;
}
.btn-white:hover { background: var(--purple-light); border-color: var(--purple-light); }

.btn-full { width:100%; justify-content:center; }

/* ---- SECTION HEADER ---- */
.section-header { text-align:center; max-width:540px; margin:0 auto 3.5rem; }
.section-header p { margin-top:.7rem; font-size:1.05rem; }
.dark-header h2 { color:#fff; }
.dark-header p  { color:rgba(255,255,255,.6); }

/* ---- ORBES DE LUZ (fondo oscuro) ---- */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
  pointer-events: none;
}
.orb-1 {
  width: 55vw; height: 55vw; top:-20%; left:-15%;
  background: radial-gradient(circle, rgba(155,53,162,.7) 0%, transparent 70%);
}
.orb-2 {
  width: 40vw; height: 40vw; bottom:-15%; right:-5%;
  background: radial-gradient(circle, rgba(45,138,114,.5) 0%, transparent 70%);
}
.orb-sm-1 {
  width:80%; height:200%; top:-50%; left:-30%;
  background: radial-gradient(circle, rgba(155,53,162,.55) 0%, transparent 70%);
  opacity:.55;
}

/* ========================================================
   NAVEGACIÓN
   ======================================================== */
.nav-wrapper {
  position: sticky; top:0; z-index:200;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav { display:flex; align-items:center; height:68px; gap:1.5rem; }
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:36px; height:36px; background:var(--purple); color:#fff;
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.logo-text { font-size:.9375rem; font-weight:600; color:var(--text-1); }

.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
  /* El logo tiene fondo transparente — se ve bien sobre el nav claro */
}

.nav-links { display:flex; align-items:center; gap:.125rem; margin-left:auto; }
.nav-links a {
  padding:7px 13px; border-radius:var(--r-pill);
  font-size:.9rem; color:var(--text-2);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-links a:hover { color:var(--text-1); background:var(--purple-faint); }
.nav-cta { flex-shrink:0; }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px; margin-left:auto;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--text-1); border-radius:2px;
  transition: transform var(--t) var(--ease);
}

.mobile-menu {
  display:none; flex-direction:column; gap:1.5rem;
  padding:1.5rem 28px 2rem;
  border-top:1px solid var(--border); background:#fff;
}
.mobile-menu.open { display:flex; }
.mobile-menu ul  { display:flex; flex-direction:column; gap:.25rem; }
.mobile-menu a   {
  display:block; padding:10px 14px; border-radius:var(--r-md);
  font-size:1rem; color:var(--text-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.mobile-menu a:hover { background:var(--purple-faint); color:var(--text-1); }
.mobile-menu .btn { align-self:flex-start; }

/* ========================================================
   HERO — Imagen full-bleed con overlay + strip inferior
   ======================================================== */
.hero {
  position: relative;
  min-height: clamp(580px, 74vh, 840px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fondo full-bleed */
.hero-bg {
  position: absolute;
  inset: 0; z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Overlay gradiente: más oscuro a la izquierda donde va el texto */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(26,5,32,.90) 0%,
    rgba(26,5,32,.72) 40%,
    rgba(26,5,32,.38) 70%,
    rgba(26,5,32,.18) 100%
  );
}

/* Cuerpo del hero */
.hero-body {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center;
  padding: 7rem 0 5rem;
}
.hero-body-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* Texto */
.hero-content { max-width: 600px; }

.hero-eyebrow {
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(200,180,255,.78);
  margin-bottom: 1.25rem;
}
.hero-headline {
  color: #fff;
  margin-bottom: 1.375rem;
}
.hero-headline em {
  font-style: italic;
  color: rgba(210,190,255,.92);
  display: inline-block;
  line-height: 1.1; padding-bottom: .1em;
}
.hero-sub {
  font-size: 1.0625rem; max-width: 46ch;
  color: rgba(255,255,255,.7);
  margin-bottom: 2.25rem; line-height: 1.65;
}
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Botón ghost sobre fondo oscuro */
.btn-ghost-white {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
}

/* Badge glassmorfismo — anclado abajo-derecha del contenido */
.hero-glass-badge {
  flex-shrink: 0;
  align-self: flex-end;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 180px;
}
.glass-stat  { font-size: 2.25rem; font-weight: 700; color: #fff; line-height: 1; }
.glass-label { font-size: .8rem; color: rgba(255,255,255,.6); max-width: 15ch; line-height: 1.4; }

/* Strip inferior glassmorfismo */
.hero-strip {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.25rem 0;
}
.hero-strip-inner {
  display: flex; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-item strong { font-size: .875rem; font-weight: 600; color: #fff; }
.hero-meta-item span   { font-size: .78rem; color: rgba(255,255,255,.55); }
.hero-meta-divider     { width: 1px; height: 32px; background: rgba(255,255,255,.18); flex-shrink: 0; }

.hero-online-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 500; color: rgba(200,180,255,.9);
  background: rgba(117,29,123,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200,180,255,.25);
  border-radius: var(--r-pill); padding: 6px 14px;
}

/* ========================================================
   TRUST STRIP
   ======================================================== */
.trust-strip {
  background:var(--purple-faint);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.5rem 0;
}
.trust-grid { display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }
.trust-item { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.trust-num   { font-size:1.0625rem; font-weight:700; color:var(--purple); }
.trust-label { font-size:.8rem; color:var(--text-3); }
.trust-div   { width:1px; height:32px; background:var(--border-mid); flex-shrink:0; }

/* ========================================================
   NOSOTROS
   ======================================================== */
.about { padding:7rem 0; }
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}

/* Imagen decorativa: LIMPIA. El acento visual va DETRÁS */
.about-image-col { position:relative; }

.about-accent {
  position:absolute;
  bottom:-1.5rem; right:-1.5rem;
  width:62%; height:62%;
  background:var(--purple-light);
  border-radius:var(--r-2xl);
  z-index:0;
}

.about-image-wrap {
  position:relative; z-index:1;
  border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--shadow-md);
  height: 560px;    /* fija la altura tanto con imagen como con placeholder */
}
.about-image-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Glass flotante */
.about-glass-card {
  position:absolute; bottom:2.25rem; left:-1.25rem; z-index:3;
  background:var(--glass-light-bg);
  backdrop-filter:var(--glass-light-blur);
  -webkit-backdrop-filter:var(--glass-light-blur);
  border:1px solid var(--glass-light-border);
  border-radius:var(--r-md); padding:1rem 1.375rem;
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; flex-direction:column; gap:2px;
}

.about-content h2 { margin-bottom:1.25rem; }
.about-lead { font-size:1.0625rem; color:var(--text-1); line-height:1.65; margin-bottom:1rem; }
.about-content > p { margin-bottom:2rem; }

.about-checks { display:flex; flex-direction:column; gap:1.125rem; margin-bottom:2.25rem; }
.about-checks li { display:flex; align-items:flex-start; gap:1rem; }
.check-icon {
  width:26px; height:26px; border-radius:50%;
  background:var(--purple-light); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.about-checks strong { display:block; font-size:.9375rem; font-weight:600; color:var(--text-1); margin-bottom:2px; }
.about-checks p { font-size:.875rem; margin:0; }

/* ========================================================
   SERVICIOS — imagen + fade oscuro + glass label
   El fade AQUÍ SÍ va, porque el texto vive sobre la imagen
   ======================================================== */
.services { padding:7rem 0; background:var(--surface); }

.svc-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.25rem;
}

/* Dos cards grandes arriba */
.svc-card {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/3; display:block; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }

.svc-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .65s var(--ease); display:block;
}
.svc-card:hover img { transform:scale(1.06); }

/* Gradient OSCURO de abajo hacia arriba — el texto necesita esto */
.svc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(26,5,32,0.93) 0%,
    rgba(26,5,32,0.55) 35%,
    rgba(26,5,32,0.15) 60%,
    transparent 80%
  );
  pointer-events:none; z-index:1;
}

.svc-info {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:1.375rem 1.25rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem;
}
.svc-info > div { flex:1; }
.svc-tag {
  display:inline-block; font-size:.7rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:rgba(200,180,255,.85);
  margin-bottom:.375rem;
}
.svc-info h3 { color:#fff; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.35rem; }
.svc-info p  { color:rgba(255,255,255,.7); font-size:.8rem; line-height:1.5; margin:0; }

.svc-arrow {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0; align-self:flex-end; margin-bottom:2px;
  transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc-card:hover .svc-arrow { background:rgba(255,255,255,.28); transform:translateX(4px); }

.svc-online-note {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:1.75rem auto 0; padding:1rem 1.5rem;
  background:var(--purple-faint); border:1px solid var(--border);
  border-radius:var(--r-pill); font-size:.9rem; color:var(--text-2);
  max-width:520px;
}
.svc-online-note svg { color:var(--purple); flex-shrink:0; }
.svc-online-note strong { color:var(--text-1); }

/* ========================================================
   DARK FEATURES — glassmorfismo sobre fondo oscuro
   ======================================================== */
.dark-features {
  position:relative; padding:7rem 0;
  background:var(--dark-bg); overflow:hidden;
}
.dark-features-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.feat-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; position:relative; z-index:1;
}
.feat-cta-row {
  position: relative; z-index:1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-top: 2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  padding: 2rem 2.5rem;
}
.feat-cta-row-text { display:flex; align-items:baseline; gap:.75rem; }
.feat-cta-row-stat { font-size:3rem; font-weight:700; color:#fff; line-height:1; letter-spacing:-.03em; }
.feat-cta-row-label { font-size:1rem; color:rgba(255,255,255,.6); max-width:32ch; }

.glass-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.glass-card:hover {
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2);
}

.feat-card { padding:2rem; }
.feat-icon {
  width:46px; height:46px; border-radius:13px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  color:rgba(200,180,255,.9);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.feat-card h3 { color:#fff; font-size:1.05rem; margin-bottom:.5rem; }
.feat-card > p { color:rgba(255,255,255,.6); font-size:.875rem; line-height:1.65; }

.feat-card-cta { display:flex; flex-direction:column; align-items:flex-start; }
.feat-cta-stat  { font-size:3.5rem; font-weight:700; color:#fff; line-height:1; margin-bottom:.375rem; letter-spacing:-.03em; }
.feat-cta-label { color:rgba(255,255,255,.55); font-size:.9rem; max-width:18ch; }

/* ========================================================
   PROCESO
   ======================================================== */
.process { padding:7rem 0; }
.process-track { display:flex; align-items:flex-start; }
.process-step {
  flex:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 1.25rem;
}
.step-num {
  width:56px; height:56px; border-radius:50%;
  background:var(--purple-light); color:var(--purple);
  font-size:.9375rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; border:2px solid var(--purple-light);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.process-step:hover .step-num { background:var(--purple); color:#fff; border-color:var(--purple); }
.process-step h3 { margin-bottom:.4rem; font-size:1.05rem; }
.process-step p  { font-size:.875rem; }
.process-line {
  flex-shrink:0; width:40px; height:1px;
  background:var(--border-mid); margin-top:27px; position:relative;
}
.process-line::after {
  content:''; position:absolute; right:-4px; top:-3px;
  width:7px; height:7px;
  border-top:1px solid var(--border-mid); border-right:1px solid var(--border-mid);
  transform:rotate(45deg);
}

/* ========================================================
   EQUIPO
   ======================================================== */
.team { padding:7rem 0; background:var(--surface); }

/* Fila superior: card destacada + lista */
.team-top {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2rem; margin-bottom:2rem;
}

.team-featured-card {
  background:#fff; border-radius:var(--r-2xl);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.team-photo-wrap {
  position:relative; aspect-ratio:4/3; overflow:hidden;
}
.team-photo-wrap img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform .6s var(--ease);
}
.team-featured-card:hover .team-photo-wrap img { transform:scale(1.04); }

/* Glass info sobre la foto — el fade oscuro SÍ va aquí */
.team-glass-info {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:1.25rem 1.5rem;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-top:1px solid rgba(255,255,255,.12);
}
.team-role { font-size:.76rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; display:block; margin-bottom:.3rem; }
.team-glass-info .team-role { color:rgba(200,180,255,.85); }
.team-glass-info h3 { color:#fff; font-size:1.15rem; }

.team-body { padding:1.5rem 1.75rem 1.75rem; }
.team-body p  { font-size:.9rem; margin-bottom:1.25rem; }
.team-tags { display:flex; flex-wrap:wrap; gap:.375rem; }
.team-tags span {
  font-size:.75rem; font-weight:500; color:var(--purple);
  background:var(--purple-faint); border:1px solid var(--border);
  padding:4px 11px; border-radius:var(--r-pill);
}

/* Lista de terapeutas */
.team-list { display:flex; flex-direction:column; gap:1.25rem; }
.team-row {
  display:flex; align-items:center; gap:1.25rem;
  background:#fff; border-radius:var(--r-lg); padding:1.25rem;
  border:1px solid var(--border);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.team-row:hover { border-color:var(--border-mid); box-shadow:var(--shadow-xs); transform:translateY(-1px); }
.team-row-photo {
  width:70px; height:70px; border-radius:50%;
  overflow:hidden; flex-shrink:0; border:2px solid var(--border);
}
.team-row-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-row-body .team-role { color:var(--purple); margin-bottom:.25rem; }
.team-row-body h3 { font-size:1rem; margin-bottom:.25rem; }
.team-row-body p  { font-size:.8125rem; }

/* Grid del equipo — todas las tarjetas con el mismo peso visual */
.team-grid-secondary {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.25rem; margin-bottom:2rem;
}
.team-mini-card {
  background:#fff; border-radius:var(--r-lg); padding:1.5rem;
  border:1px solid var(--border); text-align:center;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.team-mini-card:hover { border-color:var(--border-mid); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.team-mini-photo {
  width:72px; height:72px; border-radius:50%;
  overflow:hidden; margin:0 auto 1rem;
  border:2px solid var(--border);
}
.team-mini-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-mini-card .team-role { color:var(--purple); margin-bottom:.375rem; display:block; font-size:.75rem; }
.team-mini-card h3 { font-size:1rem; margin-bottom:.5rem; }
.team-mini-card p  { font-size:.8125rem; }

.team-more {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  padding:1.5rem 2rem; background:var(--purple-faint);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.team-more p { font-size:.9375rem; color:var(--text-2); }
.team-more strong { color:var(--text-1); }

/* ========================================================
   TALLERES — fade oscuro en imagen PORQUE el overlay va ahí
   ======================================================== */
.workshops { padding:7rem 0; }
.workshops-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

.workshop-card {
  border-radius:var(--r-2xl); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.workshop-img-wrap { position:relative; overflow:hidden; }
.workshop-img-wrap img {
  width:100%; height:240px; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.workshop-card:hover .workshop-img-wrap img { transform:scale(1.04); }

/* Fade en imágenes de talleres: hacia abajo desde transparente (efecto sutil) */
.workshop-img-overlay {
  position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top, var(--surface-alt) 0%, transparent 100%);
  pointer-events:none;
}
.workshop-img-overlay-dark {
  background:linear-gradient(to top, var(--dark-bg-2) 0%, transparent 100%);
}

.workshop-body {
  padding:2rem; flex:1; background:var(--surface-alt);
  display:flex; flex-direction:column;
}
.workshop-dark {
  position:relative; background:var(--dark-bg-2); overflow:hidden;
}
.workshop-dark .dark-features-bg { position:absolute; inset:0; pointer-events:none; }
.workshop-dark > * { position:relative; z-index:1; }

.workshop-body-dark { background:transparent; }
.workshop-body-dark h3 { color:#fff; }
.workshop-body-dark > p { color:rgba(255,255,255,.6); }

.workshop-tag {
  display:inline-block; align-self:flex-start;
  font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--purple); background:var(--purple-faint);
  border:1px solid var(--border); padding:4px 11px;
  border-radius:var(--r-pill); margin-bottom:1rem;
}
.workshop-tag-light {
  background:rgba(155,53,162,.22); border-color:rgba(155,53,162,.3);
  color:rgba(200,180,255,.9);
}
.workshop-body h3 { margin-bottom:.75rem; }
.workshop-body > p { margin-bottom:1.25rem; font-size:.9375rem; }

.workshop-items {
  display:flex; flex-direction:column; gap:.625rem;
  margin-bottom:1.75rem; flex:1;
}
.workshop-items li {
  font-size:.875rem; color:var(--text-2);
  display:flex; align-items:flex-start; gap:.625rem;
}
.workshop-items li svg { color:var(--purple); flex-shrink:0; margin-top:2px; }
.workshop-items-light li { color:rgba(255,255,255,.6); }
.workshop-items-light li svg { color:rgba(200,180,255,.7); }

/* ========================================================
   TESTIMONIOS
   ======================================================== */
.testimonials { padding:7rem 0; background:var(--surface); overflow:hidden; }
.testimonials-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:3rem;
}
.testimonials-title { font-size:clamp(1.6rem,3vw,2.25rem); font-weight:600; max-width:480px; }
.testimonials-nav { display:flex; gap:.625rem; flex-shrink:0; }
.testimonials-btn {
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.testimonials-btn:hover {
  background:var(--purple); border-color:var(--purple); color:#fff;
  box-shadow: var(--shadow-purple);
}
.testimonials-btn:disabled { opacity:.35; pointer-events:none; }

/* Track de scroll */
.testimonials-track {
  display:flex; gap:1.25rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.5rem;
  /* ocultar scrollbar */
  scrollbar-width:none;
}
.testimonials-track::-webkit-scrollbar { display:none; }

.testimonial {
  flex:0 0 calc(33.333% - .875rem);
  min-width:280px;
  scroll-snap-align:start;
  background:#fff; border-radius:var(--r-lg);
  padding:1.875rem; border:1px solid var(--border);
  display:flex; flex-direction:column; gap:1.5rem;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.testimonial:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.testimonial-highlight {
  background:var(--purple); border-color:var(--purple);
  box-shadow:var(--shadow-purple);
}
.testimonial > p { font-size:.9375rem; line-height:1.72; color:var(--text-1); flex:1; }
.testimonial-highlight > p { color:rgba(255,255,255,.9); }
.testimonial footer {
  display:flex; flex-direction:column; gap:2px;
  padding-top:1.25rem; border-top:1px solid var(--border);
}
.testimonial-highlight footer { border-top-color:rgba(255,255,255,.2); }
.testimonial footer strong { font-size:.875rem; font-weight:600; color:var(--text-1); }
.testimonial-highlight footer strong { color:#fff; }
.testimonial footer span { font-size:.8rem; color:var(--text-3); }
.testimonial-highlight footer span { color:rgba(255,255,255,.55); }

/* Dots */
.testimonials-dots {
  display:flex; justify-content:center; gap:.5rem; margin-top:2rem;
}
.testimonials-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--border-mid); border:none; cursor:pointer; padding:0;
  transition: background .2s var(--ease), transform .2s var(--ease), width .2s var(--ease);
}
.testimonials-dot.active {
  background:var(--purple); width:22px; border-radius:4px; transform:none;
}

/* ========================================================
   FAQ
   ======================================================== */
.faq { padding:7rem 0; }
.faq-grid { display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start; }
.faq-intro h2 { margin-bottom:.75rem; }
.faq-intro p  { font-size:1rem; }
.faq-list { display:flex; flex-direction:column; gap:.75rem; }

.faq-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] {
  border-color: var(--purple-mid);
  box-shadow: 0 4px 24px rgba(117,29,123,.08);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.5rem;
  font-size: .9375rem; font-weight: 500; color: var(--text-1);
  cursor: pointer; list-style: none; gap: 1rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.faq-item[open] summary { color: var(--purple); }
.faq-item summary:hover { background: var(--purple-faint); }
.faq-item summary::-webkit-details-marker { display: none; }
/* Ícono chevron SVG */
.faq-item summary::after {
  content: '';
  display: block; flex-shrink: 0;
  width: 20px; height: 20px;
  background-color: var(--purple-light);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235C3A9A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .25s var(--ease), background-color .2s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(180deg);
  background-color: var(--purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.faq-item > p {
  padding: 0 1.5rem 1.375rem;
  font-size: .9rem; line-height: 1.75; color: var(--text-2);
  border-top: 1px solid var(--border);
  margin-top: 0; padding-top: 1rem;
}

/* ========================================================
   CONTACTO
   ======================================================== */
.contact { padding:7rem 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.contact-left h2  { margin-bottom:1rem; }
.contact-left > p { font-size:1.0625rem; margin-bottom:2rem; }
.contact-channels { display:flex; flex-direction:column; gap:.75rem; }

.channel-card {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--white);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t) var(--ease);
}
.channel-card:hover { border-color:var(--border-mid); box-shadow:var(--shadow-sm); background:var(--purple-faint); transform:translateY(-1px); }
.channel-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--purple-faint); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid var(--border);
}
.channel-wa .channel-icon { background:#e6f5ec; color:#25d366; border-color:#c5e8d2; }
.channel-card strong { display:block; font-size:.9375rem; font-weight:600; color:var(--text-1); }
.channel-card span   { font-size:.8rem; color:var(--text-3); }

.contact-right { position:sticky; top:86px; }
.contact-form-box {
  background:var(--surface); border-radius:var(--r-xl);
  padding:2.25rem; border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.contact-form-box h3 { margin-bottom:1.75rem; font-size:1.25rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:1.125rem; }
.form-group label { font-size:.875rem; font-weight:500; color:var(--text-1); }
.label-opt { font-weight:400; color:var(--text-3); }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:inherit; font-size:.9375rem; color:var(--text-1);
  background:#fff; outline:none; -webkit-appearance:none;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(117,29,123,.12);
}
.form-group textarea { resize:vertical; min-height:88px; }
.form-group select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235C4D7A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px;
}

/* ========================================================
   FOOTER
   ======================================================== */
.footer { background:var(--dark-bg); padding:4.5rem 0 0; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr;
  gap:3rem; padding-bottom:3.5rem;
}
.footer-logo .logo-text { color:#fff; }
.footer-brand > p { color:rgba(255,255,255,.38); font-size:.875rem; margin:1rem 0 1.5rem; max-width:26ch; line-height:1.6; }
.footer-social { display:flex; gap:.625rem; }
.footer-social a {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.footer-social a:hover { background:var(--purple-mid); color:#fff; }

.footer-nav h4 { font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.25rem; }
.footer-nav ul { display:flex; flex-direction:column; gap:.625rem; }
.footer-nav a { font-size:.875rem; color:rgba(255,255,255,.5); transition:color var(--t) var(--ease); }
.footer-nav a:hover { color:#fff; }

.footer-contact h4 { font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.25rem; }
.footer-contact p { color:rgba(255,255,255,.5); font-size:.875rem; margin-bottom:.45rem; }
.footer-hours { margin-top:.75rem; color:rgba(255,255,255,.28) !important; font-size:.8rem !important; line-height:1.65 !important; }

.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:1.25rem 0; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.8rem; color:rgba(255,255,255,.3); }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:.8rem; color:rgba(255,255,255,.3); transition:color var(--t) var(--ease); }
.footer-legal a:hover { color:#fff; }

/* ========================================================
   RESPONSIVE — TABLET (≤1024px)
   ======================================================== */
@media (max-width: 1024px) {
  .hero-grid    { gap:2.5rem; }
  .about-grid   { gap:3.5rem; }
  .contact-grid { gap:3.5rem; }
  .faq-grid     { gap:3.5rem; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .feat-grid    { grid-template-columns:repeat(3,1fr); }
  .svc-grid     { grid-template-columns:repeat(2,1fr); }
  .testimonial  { flex:0 0 calc(50% - .625rem); }
  .team-top     { grid-template-columns:1fr; }
  .team-photo-wrap { aspect-ratio:16/9; }
  .team-grid-secondary { grid-template-columns:repeat(3,1fr); }
}

/* ========================================================
   RESPONSIVE — MOBILE (≤768px)
   ======================================================== */
@media (max-width: 768px) {
  .container { padding-inline:18px; }
  .nav-links { display:none; }
  .nav-cta   { display:none; }
  .nav-toggle { display:flex; }

  .hero-body { padding: 5rem 0 3rem; }
  .hero-body-inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .hero-glass-badge { align-self: flex-start; min-width: auto; }
  .hero-content { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
  .hero-strip-inner { gap: .875rem; }
  .hero-meta-divider { display: none; }

  .trust-grid .trust-div { display:none; }
  .about-grid { grid-template-columns:1fr; }
  .about-image-col { display:none; }
  .svc-grid  { grid-template-columns:1fr; gap:.75rem; }
  .svc-card,
  .svc-card:nth-child(3),
  .svc-card:nth-child(4) { aspect-ratio:4/3; }
  .feat-grid { grid-template-columns:1fr; }
  .feat-cta-row { flex-direction:column; align-items:flex-start; }

  .process-track { flex-direction:column; gap:1.5rem; align-items:center; }
  .process-line  { width:1px; height:28px; margin:0; }
  .process-line::after { display:none; }
  .process-step  { padding:0 1rem; max-width:280px; }

  .team-top { grid-template-columns:1fr; }
  .team-grid-secondary { grid-template-columns:1fr 1fr; }
  .workshops-grid { grid-template-columns:1fr; }
  .testimonial { flex:0 0 85vw; }
  .testimonials-header { flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .faq-grid { grid-template-columns:1fr; gap:2.5rem; }
  .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-right { position:static; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; padding-bottom:2.5rem; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
  .team-more { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px) {
  .svc-grid { grid-template-columns:1fr; }
  .team-grid-secondary { grid-template-columns:1fr; }
}

/* ========================================================
   DROPDOWN NAVEGACIÓN
   ======================================================== */
.has-dropdown { position: relative; }
.dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 440px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 .5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: 300;
}
/* Puente invisible que cubre el gap de 10px entre trigger y dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;          /* cubre el gap + un poco más */
  left: 0; right: 0;
  height: 12px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display: block; padding: 9px 14px;
  border-radius: var(--r-md); font-size: .9rem; color: var(--text-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-dropdown li a:hover { background: var(--purple-faint); color: var(--text-1); }

/* Mobile menu extras */
.mobile-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  padding: 4px 14px; pointer-events: none;
}
.mobile-divider { height: 1px; background: var(--border); margin: .5rem 0; }

/* ========================================================
   PAGE HERO — Héroe interior (páginas internas)
   ======================================================== */
.page-hero {
  position: relative;
  height: clamp(360px, 42vh, 520px);
  display: flex; align-items: center;
  overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(26,5,32,.88) 0%, rgba(26,5,32,.62) 50%, rgba(26,5,32,.3) 100%);
}
.page-hero-content {
  position: relative; z-index: 1;
  max-width: 680px;
}
.page-hero-eyebrow {
  font-size: .8125rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(200,180,255,.75); margin-bottom: 1rem;
}
.page-hero-content h1 { color: #fff; margin-bottom: 1rem; }
.page-hero-content p  { color: rgba(255,255,255,.72); font-size: 1.0625rem; max-width: 48ch; }

/* ========================================================
   SECCIÓN CTA FINAL (compartida en páginas internas)
   ======================================================== */
.page-cta {
  padding: 6rem 0;
  background: var(--purple-faint);
  border-top: 1.5px solid var(--purple-light);
  position: relative; overflow: hidden;
}
.page-cta-bg { display: none; } /* orbes ya no aplican sobre fondo claro */
.page-cta-content {
  position: relative; z-index: 1;
  text-align: center; max-width: 600px; margin: 0 auto;
}
.page-cta-content h2 { color: var(--text-1); margin-bottom: 1rem; }
.page-cta-content p  { color: var(--text-2); font-size: 1.0625rem; margin-bottom: 2rem; }
.page-cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ========================================================
   CONTENIDO INTERIOR — estilos generales
   ======================================================== */
.inner-section { padding: 6rem 0; }
.inner-section-alt { padding: 6rem 0; background: var(--surface); }

/* Split: texto + imagen */
.split-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.split-img {
  border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.split-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
.split-content h2 { margin-bottom: 1.25rem; }
.split-content p  { margin-bottom: 1.25rem; }
.split-content .btn { margin-top: .5rem; }

/* Lista de beneficios */
.benefits-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; }
.benefit-item { display: flex; align-items: flex-start; gap: 1rem; }
.benefit-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--purple-faint); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.benefit-item strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.benefit-item p { font-size: .875rem; margin: 0; }

/* Grid de 3 */
.three-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }

/* Tarjeta de contenido */
.content-card {
  background: #fff; border-radius: var(--r-xl); padding: 2rem;
  border: 1px solid var(--border);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.content-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.content-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--purple-faint); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.content-card h3 { margin-bottom: .625rem; }
.content-card p  { font-size: .9rem; }

/* Equipo — grid completo */
.team-full-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.team-full-card {
  background: #fff; border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid var(--border);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.team-full-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.team-full-photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.team-full-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease); }
.team-full-card:hover .team-full-photo img { transform: scale(1.05); }
.team-full-body { padding: 1.5rem; }
.team-full-body .team-role { color: var(--purple); margin-bottom: .25rem; }
.team-full-body h3 { font-size: 1.1rem; margin-bottom: .625rem; }
.team-full-body p  { font-size: .875rem; line-height: 1.65; margin-bottom: 1rem; }
.team-specialties { display: flex; flex-wrap: wrap; gap: .375rem; }
.team-specialties span {
  font-size: .72rem; font-weight: 500; color: var(--purple);
  background: var(--purple-faint); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* Eventos / talleres lista */
.events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.event-card {
  background: #fff; border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.event-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.event-img { position: relative; overflow: hidden; }
.event-img img { width: 100%; height: 200px; object-fit: cover; transition: transform .6s var(--ease); }
.event-card:hover .event-img img { transform: scale(1.05); }
.event-body { padding: 1.5rem; }
.event-tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple); background: var(--purple-faint);
  border: 1px solid var(--border); padding: 3px 10px;
  border-radius: var(--r-pill); margin-bottom: .75rem;
}
.event-body h3 { font-size: 1.1rem; margin-bottom: .625rem; }
.event-body p  { font-size: .875rem; margin-bottom: 1.25rem; }

/* Diplomado módulos */
.modules-list { display: flex; flex-direction: column; gap: 1rem; counter-reset: module; }
.module-item {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem; background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--border);
  counter-increment: module;
}
.module-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple-light); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 700; flex-shrink: 0;
}
.module-item h4 { font-size: 1rem; margin-bottom: .375rem; }
.module-item p  { font-size: .875rem; margin: 0; }

/* Módulos en dos columnas con fecha (diplomado) */
.modules-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; align-items: stretch;
}
.modules-grid .module-item { margin: 0; }
.module-body { flex: 1; min-width: 0; }
.module-body h3 { font-size: .9375rem; margin-bottom: .3rem; }
.module-body p  { font-size: .8125rem; margin: 0 0 .5rem; }
.module-date {
  display: inline-block; font-size: .75rem; font-weight: 600;
  color: var(--purple); background: var(--purple-faint);
  border: 1px solid var(--purple-light);
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* Ficha de datos clave del diplomado */
.facts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.fact-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.75rem 1.5rem; text-align: center;
}
.fact-card .fact-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--purple-faint); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.fact-card h3 { font-size: .8rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; }
.fact-card p { font-size: .9375rem; color: var(--text-1); margin: 0; line-height: 1.5; }
.fact-card .fact-big { font-size: 1.5rem; font-weight: 700; color: var(--purple); display: block; }

@media (max-width: 900px) {
  .modules-grid { grid-template-columns: 1fr; }
  .facts-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .facts-grid { grid-template-columns: 1fr; }
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--text-3); margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--text-3); transition: color var(--t) var(--ease); }
.breadcrumb a:hover { color: var(--text-1); }
.breadcrumb span { color: var(--text-1); }

/* Mapa placeholder */
.map-placeholder {
  width: 100%; height: 320px; border-radius: var(--r-xl);
  background: var(--surface-alt); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; color: var(--text-3);
}
.map-placeholder svg { opacity: .4; }
.map-placeholder p { font-size: .9rem; }

/* ========================================================
   RESPONSIVE INTERIOR
   ======================================================== */
@media (max-width: 1024px) {
  .split-grid { gap: 3rem; }
  .three-grid { grid-template-columns: repeat(2,1fr); }
  .team-full-grid { grid-template-columns: repeat(2,1fr); }
  .events-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .split-grid { grid-template-columns: 1fr; }
  .split-grid.reverse > *:first-child { order: 2; }
  .three-grid { grid-template-columns: 1fr; }
  .team-full-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .page-cta-btns { flex-direction: column; align-items: center; }
}

/* ========================================================
   FIX: Placeholder de imagen
   ======================================================== */
.img-placeholder {
  background: var(--surface-alt);
  border: 1.5px dashed var(--border-mid);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  color: var(--text-3);
  width: 100%;
  min-height: 220px;
  height: 100%;
}
.img-placeholder svg  { opacity: .3; }
.img-placeholder span { font-size: .8rem; font-weight: 500; text-align: center; padding: 0 1rem; word-break: break-all; }

/* Hero bg placeholder — fondo oscuro para que el texto siga legible */
.hero-bg .img-placeholder {
  background: var(--dark-bg-2);
  border: none;
  border-radius: 0;
  min-height: 100%;
  position: absolute;
  inset: 0;
}
.hero-bg .img-placeholder svg  { opacity: .12; }
.hero-bg .img-placeholder span { color: rgba(255,255,255,.25); }

/* Page hero bg placeholder */
.page-hero-bg .img-placeholder {
  background: var(--dark-bg-2);
  border: none;
  border-radius: 0;
  min-height: 100%;
  position: absolute;
  inset: 0;
}
.page-hero-bg .img-placeholder svg  { opacity: .1; }
.page-hero-bg .img-placeholder span { color: rgba(255,255,255,.2); }

/* Split img placeholder mantiene altura */
.split-img .img-placeholder { min-height: 480px; border-radius: var(--r-2xl); }
/* About image placeholder: hereda la altura fija del contenedor */
.about-image-wrap .img-placeholder {
  position: absolute; inset: 0;
  min-height: 100%; height: 100%;
  border-radius: 0; border: none;
}

/* Svc card placeholder ocupa toda la card */
.svc-card .img-placeholder {
  position: absolute; inset: 0;
  min-height: 100%; border: none; border-radius: 0;
  background: var(--surface-alt);
}

/* Team photo placeholder */
.team-photo-wrap .img-placeholder,
.team-full-photo .img-placeholder { min-height: 240px; border-radius: 0; border: none; }
.team-row-photo .img-placeholder,
.team-mini-photo .img-placeholder {
  min-height: 70px; border-radius: 50%;
  border: 1.5px dashed var(--border-mid);
}
.team-row-photo .img-placeholder span,
.team-mini-photo .img-placeholder span { display: none; }

/* Workshop img placeholder */
.workshop-img-wrap .img-placeholder { min-height: 240px; border-radius: 0; border: none; }

/* Event img placeholder */
.event-img .img-placeholder { min-height: 200px; border-radius: 0; border: none; }

/* ========================================================
   FIX: Trust strip — más espacio, no se junta con hero strip
   ======================================================== */
.trust-strip {
  padding: 2.25rem 0;
  background: #fff;
  border-top: none;
  border-bottom: 1px solid var(--border);
}

/* ========================================================
   FIX: Hero strip — borde inferior limpio
   ======================================================== */
.hero-strip {
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 3px solid var(--purple-faint);
}

/* ========================================================
   FIX: About glass card — fondo sólido, siempre visible
   ======================================================== */
.about-glass-card {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
}
.about-glass-card .glass-stat  { color: var(--purple) !important; font-size: 1.75rem !important; }
.about-glass-card .glass-label { color: var(--text-2) !important; font-size: .8rem !important; }

/* ========================================================
   FIX: Dropdown — transition-delay para bridgear el gap
   El delay en el estado "cerrado" mantiene el dropdown
   visible mientras el mouse cruza el espacio hasta él.
   ======================================================== */
.nav-dropdown {
  /* Delay 250ms antes de ocultarse — da tiempo al mouse de cruzar el gap */
  transition: opacity .18s var(--ease) .25s,
              transform .18s var(--ease) .25s !important;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  /* Mostrar sin delay */
  transition: opacity .18s var(--ease) 0s,
              transform .18s var(--ease) 0s !important;
}

/* ========================================================
   FIX: Texto legible dentro de glass-cards en secciones oscuras
   (Las páginas de subagente usan glass-card sin feat-card)
   ======================================================== */
.dark-features .glass-card { padding: 2rem; }

/* page-cta ahora es fondo claro — cards sólidas */
.page-cta .glass-card {
  padding: 2rem;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.page-cta .glass-card h3,
.page-cta .glass-card h4 { color: var(--text-1) !important; }
.page-cta .glass-card p   { color: var(--text-2) !important; }
.page-cta .glass-card .feat-icon {
  background: var(--purple-light) !important;
  border-color: var(--border) !important;
  color: var(--purple) !important;
}

.dark-features .glass-card h3,
.dark-features .glass-card h4 {
  color: #fff !important;
  font-size: 1.05rem;
  margin-bottom: .5rem;
}

.dark-features .glass-card p {
  color: rgba(255, 255, 255, .65) !important;
  font-size: .875rem;
  line-height: 1.65;
}

.dark-features .glass-card .feat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(200,180,255,.9);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}

/* feat-cta-stat también en páginas generadas */
.dark-features .glass-card .feat-cta-stat {
  font-size: 3.5rem; font-weight: 700;
  color: #fff !important; line-height: 1;
  margin-bottom: .375rem;
  letter-spacing: -.03em;
}
.dark-features .glass-card .feat-cta-label {
  color: rgba(255,255,255,.55) !important;
  font-size: .9rem; max-width: 18ch;
}

/* ========================================================
   WHATSAPP FLOATING BUTTON
   ======================================================== */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.wa-float:hover {
  transform: scale(1.11);
  box-shadow: 0 6px 28px rgba(37,211,102,.6), 0 3px 12px rgba(0,0,0,.22);
}
.wa-float svg { width: 32px; height: 32px; display: block; }

/* Pulso animado */
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0;  }
  100% { transform: scale(1.55); opacity: 0;  }
}

/* ========================================================
   FAQ — páginas de servicio (li + button.faq-question + div.faq-answer)
   ======================================================== */
ul.faq-list { list-style: none; padding: 0; margin: 0; }

li.faq-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
li.faq-item.open {
  border-color: var(--purple-mid);
  box-shadow: 0 4px 24px rgba(117,29,123,.08);
}

.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: .9375rem; font-weight: 500;
  color: var(--text-1); text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.faq-question:hover { background: var(--purple-faint); }
li.faq-item.open .faq-question { color: var(--purple); }

/* Ícono chevron en círculo */
.faq-question svg {
  flex-shrink: 0; width: 20px; height: 20px;
  padding: 4px;
  background: var(--purple-light);
  border-radius: 50%;
  color: var(--purple-mid);
  transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
li.faq-item.open .faq-question svg {
  transform: rotate(180deg);
  background: var(--purple);
  color: #fff;
}

/* Respuesta colapsada/expandida */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
li.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p,
.faq-answer > div {
  overflow: hidden;
  border-top: 0px solid var(--border);
  transition: border-top-width 0s .28s, padding .28s var(--ease);
  padding: 0 1.5rem;
  font-size: .9rem; line-height: 1.75; color: var(--text-2);
}
li.faq-item.open .faq-answer > p,
li.faq-item.open .faq-answer > div {
  border-top-width: 1px;
  border-top-color: var(--border);
  padding: 1rem 1.5rem 1.375rem;
  transition: padding .28s var(--ease);
}

/* ========================================================
   AVISOS DE FORMULARIO (éxito / error)
   ======================================================== */
.form-aviso {
  margin: 0; padding: .875rem 1.125rem;
  border-radius: var(--r-md);
  font-size: .9rem; line-height: 1.5;
  border: 1.5px solid transparent;
}
.form-aviso--ok {
  background: #E8F6F0; border-color: #A8DCC8; color: #1F6654;
}
.form-aviso--error {
  background: #FDECEC; border-color: #F5B9B9; color: #A32020;
}
button.btn:disabled { opacity: .6; cursor: not-allowed; }