/* ===========================
   SERVICIOS (Talentia V3)
   Alineado al componente React
   =========================== */

:root{
  --r-lg: 20px;
  --r-xl: 24px;
  --shadow-a: 0 10px 25px rgba(2,6,23,.12), 0 4px 10px rgba(2,6,23,.06);
  --shadow-b: 0 18px 36px rgba(2,6,23,.18);
}

/* ---------- HERO ---------- */
.srv-hero{ padding: 5rem 1rem; background: hsla(var(--primary)/.05); }
.srv-hero__inner{ text-align:center; max-width: 64rem; margin:0 auto; }
.srv-hero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .875rem; border-radius:9999px;
  background: hsla(var(--primary)/.10);
  color:hsl(var(--primary)); font-weight:500; margin-bottom:1rem;
  font-size: .875rem;
}
.srv-hero__title{ margin:.25rem 0 1rem; line-height:1.1; }
.srv-hero__title-brand{ color:hsl(var(--primary)); font-weight: 700;font-size: 3.75rem; }
.srv-hero__title-accent{ display:block; color:hsl(var(--secondary)); font-weight:700; font-size:3.75rem; }
.srv-hero__lead{    color: hsl(241 49% 25%);
 font-size:1.25rem; max-width:56rem; margin:0 auto; }

/* ---------- SELECTOR (2 CARDS) ---------- */
.srv-select{ padding: 5rem 0 3rem; }
.srv-grid-two{ display:grid; grid-template-columns:1fr; gap:2rem; max-width:72rem; margin:0 auto; }
@media (min-width:1024px){ .srv-grid-two{ grid-template-columns:1fr 1fr; gap:3rem; } }

/* Card principal */
.service-card{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:#fff; box-shadow: var(--shadow-a); border:1px solid hsla(var(--primary)/.08);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
  cursor: pointer;
}
.service-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-b); color: white !important; }

/* layers */
.srv-card__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .45s; }
.service-card:hover .srv-card__bg{ opacity:1; }
.srv-card__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.65); opacity:0; transition:opacity .45s; }
.service-card:hover .srv-card__overlay{ opacity:1; }

.srv-card__media{
  position:relative; height: 14rem; background-size:cover; background-position:center;
  transition:opacity .45s;
}
@media (min-width:1024px){ .srv-card__media{ height: 18rem; } }
.service-card:hover .srv-card__media{ opacity:0; }

.srv-card__body{ position:relative; z-index:1; padding: 1.75rem; }
@media (min-width:1024px){ .srv-card__body{ padding: 2rem; } }

.srv-card__title{ margin:0 0 .75rem; font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.2; }
.srv--primary{ color:hsl(var(--primary)); }
.srv--secondary{ color:hsl(var(--secondary)); }
.srv-card__text{ color:#475569; line-height:1.7; margin:0 0 1.25rem; font-size:.98rem; }

.service-card:hover .srv-card__title,
.service-card:hover .srv-card__text {
  color: #fff; /* blanco */
}
.impulsa-logo {
    width:160px;
    margin-bottom: 16px;
}

/* Botón principal dentro de card */
.srv-card__btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:9999px; padding:.9rem 1.25rem; font-weight:700; border:2px solid transparent;
  transition: all .25s ease;
}
.btn.btn--primary{ 
    background:hsl(var(--primary)); 
    color:hsl(var(--primary-foreground)); 
    border-radius: 8px; 
    padding: 8px 0px; 
    font-weight:500; 
    font-size: .875rem;
    line-height: 1.25rem;
}
.btn.btn--primary:hover{ background: hsla(var(--primary)/.9); }
.btn.btn--secondary{ background:hsl(var(--secondary)); color:#fff; }
.btn.btn--secondary:hover{ background: hsla(var(--secondary)/.9); }

/* ---------- EDUCACIÓN (detalle) ---------- */
.srv-section{ padding: 3rem 0; }
@media (min-width:1024px){ .srv-section{ padding: 4rem 0 5rem; } }
.srv-section__head{ 
    text-align:center; max-width:64rem; margin:0 auto 2rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.srv-section__title{ margin:.25rem 0 1rem; font-size: 2.25rem;
        line-height: 2.5rem; font-weight:700; }
.srv-section__lead{ color: hsl(241 49% 25%); font-size: 1.125rem; max-width: 56rem;
 line-height:1.8; }

#srv-educacion {
    background-color: hsl(var(--primary) / .05);
}
#srv-organizaciones {
    background-color: hsl(var(--secondary) / .05);
}

.srv-edu__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:1024px){ .srv-edu__grid{ grid-template-columns: repeat(2,minmax(0,1fr)); align-items:start; gap:2rem; } }

/* Impulsa T destacado */
.srv-card{ background:#fff; border-radius:var(--r-xl); border:1px solid hsla(var(--primary)/.12); overflow:hidden; box-shadow: var(--shadow-a); }
.srv-impulsa__media{ position:relative; height:220px; background-size:cover; background-position:center; }
@media (min-width:1024px){ .srv-impulsa__media{ height: 200px; } }
.srv-impulsa__tint{ position:absolute; inset:0; background: hsla(var(--primary)/.2); }
.badge-edu{ margin-bottom: 1rem; display:inline-flex; padding: .125rem .75rem; align-items:center; gap:.35rem; border-radius:20px; font-weight:600; font-size: .75rem;
    line-height: 1rem; background: hsla(var(--secondary)); color:white; }
.badge--star{ background:hsl(var(--primary)); color:#fff; border-radius: 20px; padding: 0px .75rem; 
    position: absolute; top: 10px; right: 10px;
}

.srv-card__pad{ padding:1.25rem; }
@media (min-width:1024px){ .srv-card__pad{ padding:1.5rem; } }
.srv-card__h{ margin:0 0 .5rem; font-weight:700; font-size:1.5rem; color:hsl(var(--foreground)); }
.srv-card__p{ 
    color: hsl(241 49% 25%);
    line-height: 1.625;
    margin:0 0 1rem; 
    font-size: .875rem;
}

.srv-card__pad .srv-card__h {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* feature pills */
.srv-feats{ display:grid; grid-template-columns:1fr; gap:.75rem; margin: 1rem 0 1.25rem; }
@media (min-width:768px){ .srv-feats{ grid-template-columns: repeat(3, 1fr); } }
.srv-feat{ 
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    
.srv-feat:nth-child(1) {
  background-color: hsl(var(--primary) / .05);
}

.srv-feat:nth-child(2) {
  background-color: hsl(var(--secondary) / .05);
}

.srv-feat:nth-child(3) {
  background-color: rgba(245, 158, 11, 0.05);
}
.srv-feat__icon{ width:40px; height:40px; border-radius:10px; }
.srv-feat__t {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0.25rem;
}
.srv-feat__s {
    color: hsl(241 49% 25%);
    font-size: 0.75rem;
    line-height: 1rem;
}

/* PME / IDPS burbujas */
.srv-info{ 
    margin-top:.5rem; 
    background-color: hsl(5 30% 93%); 
    border-color: hsl(var(--primary) / .1);
    border-width: 1px;
    border-radius: 1rem;
    padding:1.5rem;
}
.srv-info__p {
    color: hsl(241 49% 25%);
    font-size: 0.875rem;
    line-height: 1.625;
}
.mark {
    background-color: hsl(var(--primary) / .1);
    padding: 4px 8px;
    border-radius: 8px;
}
.srv-bubbles{ 
    display:grid;
    grid-template-columns:repeat(3, minmax(0px, 1fr));
    margin:1rem 0; 
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    border-width: 1px;
    border-radius: 0.75rem;
}
@media (min-width:640px){ .srv-bubbles{ grid-template-columns: repeat(3, 1fr); } }
.srv-bubble{ display:flex; align-items:center; gap:.5rem; color:#475569; font-size:.92rem; }
.srv-bubble:nth-child(1) div { background-color: hsl(var(--primary)); border-radius: 9999px; width: 1.5rem; height: 1.5rem; justify-content: center; display: flex; align-items: center; }
.srv-bubble:nth-child(2) div { background-color: hsl(var(--secondary)); border-radius: 9999px; width: 1.5rem; height: 1.5rem; justify-content: center; display: flex; align-items: center; }
.srv-bubble:nth-child(3) div { background-color: hsl(var(--accent)); border-radius: 9999px; width: 1.5rem; height: 1.5rem; justify-content: center; display: flex; align-items: center; }
.srv-bubble span { max-width: 70px; width:100%; font-size: 0.875rem; line-height: 1.25rem; color: hsl(241 49% 25%); }
.srv-bubble div svg { stroke:white; }
.srv-dot{ width:20px; height:20px; border-radius:9999px; display:grid; place-items:center; color:#fff; }
.srv--amber{ color:#B45309; }
@media (min-width:1060px){ 
    .srv-bubble span {
        max-width: 90px
        
    }
}
/* acciones */
.srv-actions{ display:grid; gap:.75rem; margin-top:1rem; }
.srv-actions__row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:12px; padding:.75rem 1rem; font-weight:700; text-decoration:none; }
.btn.btn--outline{ border:2px solid hsla(var(--primary)/.2); background:transparent; color:hsl(var(--primary)); }
.btn.btn--outline:hover{ background: hsla(var(--primary)/.06); }
.btn.btn--secondary{ background:hsl(var(--secondary)); color:#fff; }
.srv-actions a { font-weight: 500; font-size: .875rem; line-height: 1.25rem; border-radius: 8px; }

/* mini cards (col derecha) */
.srv-edu__aside{ display:grid; grid-template-columns:1fr; gap:1rem; }
.srv-thumb{ height:140px; background-size:cover; background-position:center; }
.srv-card .btn.btn--ghost{ color:hsl(var(--primary)); background:transparent; padding:.25rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight:500}
.srv-card .btn.btn--ghost:hover{ text-decoration:underline; background-color: hsl(var(--accent));}

/* ---------- ORGANIZACIONES (journey) ---------- */
.srv-journey{ display:grid; gap:2rem; margin-top:1rem; }
.badge-org{ margin-bottom: 1rem; display:inline-flex; padding: .125rem .75rem; align-items:center; gap:.35rem; border-radius: 9999px; border-width: 1px; font-weight:600; font-size: .75rem; line-height: 1rem; border-color: hsl(var(--accent)); border-style: solid; color:black; }
.srv-list{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.6rem; color:#334155; }
.srv-list .check{ width:18px; height:18px; border-radius:9999px; background:hsl(var(--primary)); display:inline-block; margin-right:.5rem; position:relative; top:.2rem; }
.srv-list .check::after{ content:""; position:absolute; inset:4px; border:2px solid #fff; border-left:0; border-top:0; transform: rotate(45deg); }

.srv-journey__media .srv-photo{ border-radius:18px; height:260px; background-size:cover; background-position:center; box-shadow: var(--shadow-a); }

/* ---------- Animaciones simples ---------- */
.js-anim{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js-anim.is-in{ opacity:1; transform:none; }

/* =========================
   ORGANIZACIONES – Journey
   (timeline con milestones)
   ========================= */
.srv-org { background: hsla(var(--secondary)/.05); }
.srv-journey { position: relative; margin: 0 auto 3.5rem; }
@media (min-width:1024px){ .srv-journey { padding: .5rem 0 2rem; } }
.srv-journey::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); border-radius:999px; background: linear-gradient(to bottom, hsl(241 49% 35% / .95) 0%, hsl(241 49% 45% / .55) 50%, hsl(241 49% 55% / .25) 100%); display:none; }
@media (min-width:1024px){ .srv-journey::before{ display:block; } }
.srv-journey__row{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; margin: 1.5rem 0 3rem; position:relative; z-index:1; }
.srv-journey__row--alt .srv-j__item { align-items: center; gap: .6rem; font-size: 0.875rem; line-height: 1.25rem; }
@media (min-width:1024px){
  .srv-journey__row{ grid-template-columns: 1fr 1fr; gap:2.25rem; }
  .srv-journey__row--alt .srv-journey__text{ order:2; padding-left:3rem; }
  .srv-journey__row--alt .srv-journey__media{ order:1; padding-right:3rem; }
  .srv-journey__row .srv-journey__text{ padding-right:3rem; }
  .srv-journey__row .srv-journey__media{ padding-left:3rem; }
}
.srv-journey__milestone{ display:none; }
@media (min-width:1024px){
  .srv-journey__milestone{ width:82px; height:82px; position:absolute; left:50%; transform:translateX(-50%); border-radius:9999px; background:hsl(var(--primary)); border:4px solid #fff; box-shadow:0 14px 36px rgba(2,6,23,.15); display:grid; place-items:center; z-index:2; }
  .srv-journey__milestone svg{ color:#fff; width:36px; height:36px; }
}
.srv-journey__card{ background:#fff; border-radius:8px; padding:2rem; border:2px solid hsla(var(--primary)/.25); box-shadow: var(--shadow-a); }
.srv-jhead{ display:flex; align-items:center; gap:.9rem; margin-bottom:.75rem; }
.srv-jhead__ico{ width:64px; height:64px; border-radius:9999px; background: hsla(var(--primary)/.12); display:grid; place-items:center; color:hsl(var(--primary)); }
.srv-jhead__badge{ display:inline-block; background: hsla(var(--primary)/.12); color:hsl(var(--primary)); border-radius:9999px; padding:.15rem .6rem; margin-bottom:.35rem; font-size: .75rem; font-weight: 600; }
.srv-jhead__title{ margin:0; color:hsl(var(--primary)); font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.srv-j__p{ color: hsl(241 49% 25%); font-size: 1rem; line-height: 1.625; }
.srv-j__title { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; margin-top: 0px; }
.srv-j__item div .srv-j__p { font-size: .75rem }
.srv-j__list{ display:grid; gap:.65rem; margin:0 0 1rem; padding:0; list-style:none; }
.srv-j__item{ display:flex; align-items:flex-start; font-size:.95rem; color:#0f172a; }
.srv-j__item div { font-size: .875rem; line-height: 1.25rem; font-weight: 500; padding-left: .6rem; }
.srv-j__item svg { width: 16px; height: 16px; flex-shrink: 0; padding-top:2px; }
.srv-j__ok{ width:20px; height:20px; border-radius:9999px; background:hsl(var(--primary)); position:relative; display:inline-block; top:.2rem; flex-shrink:0; }
.srv-j__ok::after{ content:""; position:absolute; inset:4px; border:2px solid #fff; border-left:0; border-top:0; transform: rotate(45deg); }

/* Media (imagen con marco inclinado y luces) */
.srv-figure { position: relative; }
.srv-figure__bg{ position: absolute; inset: 0; border-radius: 24px; transform: rotate(3deg); background: linear-gradient(135deg, hsla(var(--secondary)/.10), hsla(var(--primary)/.10)); z-index: 0; }
.srv-figure__frame{ position: relative; background:#fff; padding: 1rem; border-radius: 24px; box-shadow: 0 20px 40px rgba(2,6,23,.14); transform: rotate(-1deg); transition: transform .5s ease; z-index: 1; overflow: hidden; }
.srv-figure__frame:hover{ transform: rotate(0deg); }
.srv-figure__media{ display:block; width:100%; height:auto; max-height: 265px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
@keyframes pulseGlow { 0%,100% { transform: scale(1);   opacity: .9; } 50% { transform: scale(1.06); opacity: .7; } }
.srv-figure__glow{ position:absolute; border-radius:9999px; filter: blur(24px); opacity:.75; pointer-events:none; z-index: 2; }
.srv-figure__glow--a{ width:110px; height:110px; right:-28px; top:-28px; background: radial-gradient(closest-side, hsla(var(--secondary)/.25), transparent 70%); animation: pulseGlow 2.2s ease-in-out infinite; }
.srv-figure__glow--b{ width:140px; height:140px; left:-32px; bottom:-24px; background: radial-gradient(closest-side, hsla(var(--primary)/.20), transparent 70%); }

/* Botón ancho en tarjetas */
.srv-journey__card .btn{ width:100%; }

/* Pequeñas animaciones de entrada (opcional) */
.srv-journey [data-in] { opacity:0; transform: translateY(12px); transition: all .5s ease; }
.srv-journey [data-in].is-in { opacity:1; transform:none; }

/* --- Toggle de secciones (educación/organizaciones) --- */
.srv-section.is-collapsed { display: none; }
.srv-section.is-open { display: block; }

/* opcional: estado visual en la card seleccionada */
.service-card.is-active {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 0;
}
.service-card.is-active .srv--secondary { color: hsl(var(--secondary)); }

/* ========================
   Ajustes MOBILE Servicios
   ======================== */
@media (max-width: 767px) {
  /* HERO */
  .srv-hero {
    padding: 3rem 1rem;
  }
  .srv-hero__title-brand,
  .srv-hero__title-accent {
    font-size: 2rem;
    line-height: 1.2;
  }
  .srv-hero__lead {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: .5rem;
  }

  /* SELECTOR CARDS */
  .srv-grid-two {
    gap: 1.25rem;
  }
  .srv-card__media {
    height: 10rem;
  }
  .srv-card__btn {
    width: 100%;
  }

  /* DETALLE EDUCACIÓN */
  .srv-edu__grid {
    gap: 1.25rem;
  }
  .srv-feats {
    grid-template-columns: 1fr;
  }
  .srv-bubbles {
    grid-template-columns: 1fr;
    padding: .75rem;
  }

  /* Texto más legible */
  .srv-card__p,
  .srv-info__p,
  .srv-j__p {
    font-size: .9rem;
    line-height: 1.5;
  }

  /* Journey */
  .srv-journey__row {
    gap: 1rem;
    margin: 1.5rem 0 2rem;
  }
  .srv-journey__card {
    padding: 1.25rem;
  }
  .srv-figure__frame {
    padding: .5rem;
  }
}

.srv-feats, .srv-actions, .srv-info {
      display: none;
}

#linkImpulsa {
    display: inline-flex;
}

@media (min-width: 1024px) {
    .srv-feats, .srv-actions {
        display: grid;
    }
    .srv-info {
     display: block
    }
    #linkImpulsa {
        display: none;
    }
}