/*
Theme: Govisan
File: home.css (clean)
Scope: Estilos específicos de la Home
Secciones: Hero (overrides), Over 25, Partners, Solutions, Specialization,
           Success Stories, Insights, Contact, Final CTA
Nota: Header/Hero base, CTAs, KPIs y Footer están en style.css
*/

/* ==============================
   01) HERO  overrides Home
   ============================== */
.hero{
  padding: clamp(80px, 12vw, 140px) 0 64px;
  color:#fff;
  background:#0b0b0b;
}
.hero.has-bg{
  background:
    linear-gradient(180deg, rgba(10,10,10,.78), rgba(10,10,10,.64)),
    var(--hero-bg,#0b0b0b);
  background-size:cover; background-position:center;
}
.hero h1{
  font-size:clamp(36px,5vw,64px);
  line-height:1.03; letter-spacing:-.02em;
  margin:0 0 12px;
}
.hero .subtitle{
  font-size:clamp(16px,2.2vw,22px);
  opacity:.9; margin:0 0 14px;
}
.hero .desc{
  font-size:clamp(15px,1.6vw,18px);
  opacity:.95; max-width:820px; margin:0 auto;
}

/* ==============================
   02) OVER 25 YEARS
   ============================== */
.over25{ padding: clamp(56px, 8vw, 96px) 0; }
.over25__grid{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:28px;
}
.over25__kicker{
  display:inline-block; font-weight:800; color:#a66a00;
  background:#fde7ad; padding:8px 14px; border-radius:999px;
}
.over25__title{ font-size: clamp(28px,4vw,44px); line-height:1.08; margin:.5rem 0; }
.over25__lead{ color:#5b6f82; font-size:18px; line-height:1.7; }
.over25__right{ display:grid; gap:16px; align-content:start; }
.over25__card{
  background:#fff; border:1px solid #e9eef5; border-radius:18px; padding:18px;
  box-shadow:0 10px 28px rgba(16,24,40,.06);
}
.over25__card h3{ margin:.2rem 0 .4rem; font-size:20px; }
.over25__icon{ font-size:22px; }

/* ==============================
   03) TRUSTED PARTNERS (swiper)
   ============================== */
.partners{ padding:72px 0 88px; background:#f6f7f9; }
.partners .section-head{ text-align:center; margin:0 auto 28px; }
.partners .section-head h2{
  font-weight:800; color:#0e2235;
  font-size:clamp(28px, 4vw, 44px); line-height:1.05;
}
.partners .section-head p{ color:#5b798f; font-weight:600; font-size:clamp(15px,2vw,20px); }

.partner-swiper{ position:relative; padding: 2px 72px !important; }
.partner-swiper::before,
.partner-swiper::after{
  content:""; position:absolute; z-index:3; top:0; bottom:46px; width:56px; pointer-events:none;
  background: linear-gradient(90deg, rgba(246,247,249,1), rgba(246,247,249,0));
}
.partner-swiper::before{ left:0; }
.partner-swiper::after{ right:0; transform: scaleX(-1); }

.partner-swiper .swiper-wrapper{ align-items:stretch; }
.partner-swiper .swiper-slide{
  display:grid; align-content:start; padding:0 12px !important; text-decoration:none;
}

.card-surface{
  background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:22px;
  height:128px; display:grid; place-items:center; padding:20px;
  box-shadow: 0 18px 52px rgba(15,23,42,.10), 0 7px 20px rgba(15,23,42,.08);
  position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background-image: radial-gradient(240px 240px at var(--mx, -200px) var(--my, -200px), rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%);
  background-blend-mode: screen;
}
.card-surface::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(60% 50% at 50% 110%, rgba(15,23,42,.10), transparent 60%);
  opacity:.6;
}
.card-surface:hover{ transform: translateY(-3px); box-shadow: 0 22px 56px rgba(15,23,42,.16); border-color: rgba(15,23,42,.14); }
.card-surface img{
  max-height:72px; max-width:88%; width:auto; height:auto;
  filter:grayscale(100%); opacity:.95; transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.card-surface:hover img{ filter:none; opacity:1; transform: scale(1.02); }
.partner-caption{
  text-align:center; margin-top:10px; color:#98a2b3; font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* Flechas/paginación Swiper */
.partner-swiper .swiper-button-prev, .partner-swiper .swiper-button-next{
  color:#9ca3af; width:36px; height:36px; top:50%; transform: translateY(-50%);
  z-index:5; filter: drop-shadow(0 8px 20px rgba(15,23,42,.10));
}
.partner-swiper .swiper-button-prev{ left:18px !important; }
.partner-swiper .swiper-button-next{ right:18px !important; }
.partner-swiper .swiper-button-prev:hover,
.partner-swiper .swiper-button-next:hover{ color:#334155; }
.partner-swiper .swiper-button-prev::after,
.partner-swiper .swiper-button-next::after{ font-size:18px; }
.partner-swiper .swiper-pagination{ position:relative; margin-top:14px; }

/* ==============================
   04) SOLUTIONS & SERVICES
   ============================== */
.solutions{ padding: clamp(60px,9vw,120px) 0; }
.sol-header{ text-align:center; max-width:980px; margin:0 auto 28px; }
.sol-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fde7ad; color:#7a5a00; font-weight:700; padding:8px 12px; border-radius:999px;
}
.sol-title{ font-size: clamp(28px,4vw,44px); margin:12px 0 8px; }
.sol-lead{ color:#5a6c7d; }

/* GRID: 3 columnas en desktop (3x2 con 6 cards), 2 en tablet, 1 en móvil */
.solutions .sol-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
}
@media (max-width:1100px){
  .solutions .sol-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width:620px){
  .solutions .sol-grid{ grid-template-columns: 1fr !important; }
}

.sol-card{
  background:#0f1f2e;
  color:#e7f1ff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
}

/* === TOKENS/ICONOS (actualizado a master azuldorado) === */
.sol-token{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 15% 115%, rgba(234,184,76,.65) 0%, rgba(234,184,76,0) 45%),
    radial-gradient(120% 120% at 110% -10%, #2a7fff 0%, rgba(42,127,255,0) 55%),
    linear-gradient(135deg, #eab84c 0%, #0b6bff 100%);
  box-shadow: 0 10px 24px rgba(11,107,255,.18), 0 6px 18px rgba(234,184,76,.18);
  margin-bottom:10px;
}
.sol-token svg,
.sol-token svg *,
.sol-token i{
  color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
}

.sol-card__title{ margin:.3rem 0 .4rem; font-size:20px; color:#fff; }
.sol-card__desc{ color:#cfe0ef; }
.sol-list{ margin:10px 0 0; padding-left:18px; }

/* ==============================
   05) SPECIALIZATION
   ============================== */
.spec{ padding: clamp(56px,8vw,110px) 0; }
.spec-head{ text-align:center; max-width:980px; margin:0 auto 28px; }
.spec-title{ font-size: clamp(28px,4vw,44px); margin:0 0 8px; }
.spec-lead{ color:#5a6c7d; }

.spec-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width:1100px){ .spec-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:700px){ .spec-grid{ grid-template-columns: 1fr; } }

.spec-card{
  position:relative; overflow:hidden; border-radius:18px;
  background:#0f1f2e; color:#e7f1ff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px rgba(0,0,0,.14);
  padding:18px;
}
.spec-card__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;
}
.spec-card__glass{
  position:absolute; inset:0; backdrop-filter: blur(6px) saturate(120%);
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
}
.spec-card__head{ position:relative; display:flex; align-items:center; gap:10px; }
.spec-card__icon{ font-size:20px; }
.spec-card__title{ margin:.2rem 0; font-size:20px; color:#fff; }
.spec-card__lead{ position:relative; color:#d9e8f5; }
.spec-card__list{ position:relative; margin:10px 0 0; padding-left:18px; }

/* ==============================
   06) SUCCESS STORIES
   ============================== */
.ss{ padding: clamp(60px, 9vw, 120px) 0; background:#f8fafc; }
.ss-head{ text-align:center; max-width:1000px; margin:0 auto 28px; }
.ss-kicker{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#fde7ad; color:#7a5a00; font-weight:700; font-size:.95rem;
}
.ss-title{ font-size: clamp(28px,4vw,44px); margin:12px 0 8px; }
.ss-lead{ color:#5a6c7d; }

.ss-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width:1100px){ .ss-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:700px){ .ss-grid{ grid-template-columns: 1fr; } }

.ss-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:18px;
  background:#fff; border:1px solid #eef2f6; box-shadow:0 12px 40px rgba(16,24,40,.06);
}
.ss-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.ss-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ss-card:hover .ss-media img{ transform:scale(1.04); }
.ss-badges{
  position:absolute; left:10px; bottom:10px; display:flex; gap:8px; flex-wrap:wrap;
}
.ss-badge{
  background:#fff; color:#0f172a; border-radius:999px; padding:6px 10px; font-weight:700; font-size:.85rem;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.ss-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.ss-title-sm{ font-size:20px; margin:0; }
.ss-desc{ color:#475569; }
.ss-list{ margin:6px 0 0; padding-left:18px; color:#334155; }
.ss-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 0; color:#0f172a; font-weight:700; text-decoration:none;
}
.ss-more-wrap{ display:flex; justify-content:center; margin-top:20px; }
.ss-more{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; background:#fff;
  border:1px solid #e7edf5; text-decoration:none; font-weight:700; color:#0f172a;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
}

/* ==============================
   07) INSIGHTS (blog resumen)
   ============================== */
.ins{ padding: clamp(60px,9vw,120px) 0; }
.ins-head{ text-align:center; max-width:1000px; margin:0 auto 36px; }
.ins-badge-pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#fde7ad; color:#7a5a00; font-weight:700; font-size:.9rem;
}
.ins-title{ margin:14px 0 10px; font-size:clamp(28px,4vw,44px); line-height:1.15; }
.ins-lead{ opacity:.8; font-size:clamp(16px,2vw,20px); }

.ins-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(260px, 340px));
  justify-content:center;
}
@media (max-width:1200px){
  .ins-grid{ grid-template-columns: repeat(3, minmax(240px, 300px)); }
}
@media (max-width:980px){
  .ins-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width:620px){
  .ins-grid{ grid-template-columns:1fr; }
  .ins-lead{ text-align:center; }
}

.ins-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:16px;
  box-shadow:0 10px 28px rgba(16,24,40,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ins-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(16,24,40,.10); }

.ins-media{ position:relative; display:block; overflow:hidden; aspect-ratio:16/9; }
.ins-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ins-card:hover .ins-media img{ transform:scale(1.04); }

.ins-cat{
  position:absolute; left:12px; top:12px; background:#ffd676; color:#6b4b00;
  font-weight:700; padding:6px 10px; border-radius:999px; font-size:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.ins-fallback{
  display:flex; align-items:center; justify-content:center; height:100%;
  font-size:64px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(135deg,#e3edf9,#eaf8f3); color:#0f172a;
}

.ins-meta{ display:flex; gap:12px; align-items:center; padding:12px 18px 0; color:#6b7280; font-size:14px; }
.ins-meta .ins-time::after{ content:"•"; margin-left:12px; color:#94a3b8; }
.ins-h3{ font-size:clamp(16px,1.8vw,20px); line-height:1.25; padding:6px 18px 0; margin:0 0 2px; }
.ins-h3 a{ color:#0f172a; text-decoration:none; }
.ins-excerpt{ padding:8px 18px 0 18px; color:#475569; }
.ins-more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; padding:14px 18px 18px; color:#0f172a; font-weight:600; text-decoration:none; }

.ins-cta{ display:flex; justify-content:center; margin-top:28px; }
#insights .ins-cta{ margin-bottom: clamp(28px, 5vw, 72px); }

/* ==============================
   08) CONTACT
   ============================== */
#contact.section{ padding-top:80px; padding-bottom:96px; position:relative; scroll-margin-top:96px; }
#contact .container{ max-width:1120px; margin:0 auto; padding:0 clamp(16px,3vw,24px); }

.contact-head{ text-align:center; max-width:900px; margin:0 auto 28px; }
.contact-head h2{ font-size:clamp(32px,4vw,42px); line-height:1.15; margin:0 0 10px; }
.contact-head p{ max-width:820px; margin:0 auto 36px; font-size:18px; line-height:1.6; opacity:.85; }

.contact-grid{
  display:grid;
  grid-template-columns: 380px minmax(0,1fr);
  gap: clamp(22px, 5vw, 42px);
  align-items:start; justify-content:center;
}
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; gap:22px; } }

.contact-info h3{ font-size:28px; margin:0 0 18px; }
.office{
  background:#fff; border:1px solid #eef2f6; border-radius:18px;
  padding:22px 22px 20px; box-shadow:0 10px 30px rgba(16,24,40,.06);
  margin:0 0 16px;
}
.office h4{ font-size:22px; margin:0 0 10px; }
.office .addr{ white-space:pre-line; line-height:1.65; color:#334155; }
.office a{ color:#1d4ed8; text-decoration:none; }
.office a:hover{ text-decoration:underline; }

.contact-card{
  background:#fff; border:1px solid #eef2f6; border-radius:20px; padding:24px 24px 26px;
  box-shadow:0 12px 40px rgba(16,24,40,.07);
}
.contact-card h3{ margin:0 0 14px; font-size:28px; }

#contact-form .row{ margin:0 0 14px; }
#contact-form label{ display:block; font-weight:600; margin:0 0 6px; font-size:14px; }
#contact-form input, #contact-form textarea{
  width:100%; border:1px solid #e7edf5; border-radius:12px; padding:12px 14px; font:inherit;
  background:#fbfdff; height:52px; font-size:16px; outline:none; transition:border-color .2s, box-shadow .2s, background-color .2s;
}
#contact-form textarea{ min-height:140px; height:auto; resize:vertical; }
#contact-form input:focus, #contact-form textarea:focus{
  border-color:#c7d8ff; box-shadow:0 0 0 3px rgba(71,131,255,.15); background:#fff;
}
.contact-msg{ min-height:20px; margin:6px 0 0; font-size:14px; }
.contact-msg.ok{ color:#15803d; }
.contact-msg.err{ color:#b91c1c; }

/* CTA del menú que apunta a #contact (sin clase extra) */
.site-header .menu a[href="#contact"]{
  display:inline-block; white-space:nowrap;
  background:linear-gradient(180deg, #f6ca67 0%, #e4ac44 100%);
  color:#fff !important; border-radius:18px; padding:10px 18px;
  font-weight:700; font-size:16px; line-height:1;
  box-shadow:0 10px 24px rgba(234,175,58,.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none !important; border:none;
  margin-left:12px;
}
.site-header .menu a[href="#contact"]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(234,175,58,.42);
  background:linear-gradient(180deg, #ffd173 0%, #e3a53a 100%);
}
@media (max-width:980px){
  .site-header .menu a[href="#contact"]{ width:100%; text-align:center; margin:12px 0 0; }
}

/* ==============================
   09) FINAL CTA (banner)
   ============================== */
.final-cta{
  background:
    radial-gradient(1200px 600px at 80% 120%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(135deg, #0b1f2e 0%, #103a6b 45%, #0b6bff 100%);
  color:#fff; text-align:center;
  padding: clamp(60px, 9vw, 140px) 0;
  position:relative; overflow:hidden;
}
.final-cta h2{
  margin:0 0 14px; color:#fff;
  font-size:clamp(30px, 4.5vw, 64px); line-height:1.12; letter-spacing:-.02em; text-wrap:balance;
}
.final-cta p{
  max-width:1100px; margin:0 auto; padding:clamp(10px,1.2vw,16px) 0 0;
  color:rgba(255,255,255,.94); font-size:clamp(16px, 1.4vw, 22px); line-height:1.6; text-wrap:pretty;
}

/* ==============================
   10) Utilidades Home
   ============================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(16px); }
  .reveal.in-view{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
  .reveal.delay-1{ transition-delay:.06s }
  .reveal.delay-2{ transition-delay:.12s }
  .reveal.delay-3{ transition-delay:.18s }
}

/* Ajustes responsive menores */
@media (max-width:640px){
  .partner-swiper{ padding: 2px 52px !important; }
  .card-surface{ height:96px; padding:14px; }
  .card-surface img{ max-height:48px; }
  .partner-caption{ font-size:14px; margin-top:8px; }
}

/*  CTAs amarillos (Primary) -> texto blanco  */
a.btn.btn-primary,
button.btn.btn-primary,
input[type="submit"].btn.btn-primary,
input[type="button"].btn.btn-primary {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}

.btn.btn-primary .arr,
.btn.btn-primary svg,
.btn.btn-primary i {
  color: #fff !important;
  fill: #fff !important;
}

a.btn.btn-primary:hover,
a.btn.btn-primary:active,
a.btn.btn-primary:visited,
button.btn.btn-primary:hover,
button.btn.btn-primary:active {
  color: #fff !important;
}

/*  CTA "View All Success Stories" como primary amarillo  */
.ss-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  background: linear-gradient(180deg, #f6ca67 0%, #e4ac44 100%);
  color:#fff !important;
  font-weight:800;
  text-decoration:none;
  border:none;
  box-shadow: 0 10px 24px rgba(234,175,58,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ss-more:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(234,175,58,.42);
  background: linear-gradient(180deg, #ffd173 0%, #e3a53a 100%);
  color:#fff !important;
}
.ss-more span,
.ss-more svg,
.ss-more i{ color:#fff !important; fill:#fff !important; }

/* Botón flotante: volver arriba */
#back-to-top{
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  width: 64px; height: 64px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #0f2233;
  color: #fff;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, .22),
    0 1px 0 rgba(255,255,255,.15) inset;
  text-decoration: none;
  opacity: 0; transform: translateY(10px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, filter .18s ease;
  z-index: 999;
}
#back-to-top:hover{ filter: brightness(1.05); }
#back-to-top.is-visible{
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
@media (max-width: 520px){
  #back-to-top{ width: 56px; height: 56px; }
}

/* Quitar espacio antes del footer */
.site-main{ margin-bottom:0 !important; padding-bottom:0 !important; }
.section:last-of-type{ margin-bottom:0 !important; padding-bottom:0 !important; }
#final-cta, .final-cta{ margin-bottom:0 !important; }
.wave-sep, .wave-bottom{ margin:0 !important; }
.gv-footer{ margin-top:0 !important; }

/* ==== Case Studies cards ==== */
.cs-wrap { margin-top: 12px; }
.cs-grid { display: grid; gap: 28px; }
.cs-grid.cols-3 { grid-template-columns: repeat(1,1fr); }
@media (min-width:720px){ .cs-grid.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1080px){ .cs-grid.cols-3 { grid-template-columns: repeat(3,1fr); } }

.cs-card {
  background: #0b1f2e;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(2,12,22,.26);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cs-card:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(2,12,22,.34); }

.cs-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.cs-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .35s ease; display:block; }
.cs-card:hover .cs-media img { transform: scale(1.06); }
.cs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
  pointer-events: none;
}

.cs-body { padding: 18px 18px 20px; color: #eef5fb; }
.cs-title { font-size: clamp(18px, 1.05rem, 22px); margin: 0 0 6px; line-height: 1.25; }
.cs-title a { color: #fff; text-decoration: none; }
.cs-title a:hover { text-decoration: underline; }

.cs-loc { display:flex; align-items:center; gap:8px; color:#c7d8e6; font-size: 14px; margin-bottom: 8px; opacity:.9; }
.cs-loc svg { flex:0 0 16px; }

.cs-desc { color:#dce8f3; font-size: 15px; line-height: 1.5; margin: 0 0 12px; }

.cs-cta {
  display:inline-flex; align-items:center; gap:8px;
  background: #ffc436; color:#0b1f2e; font-weight:700;
  padding: 10px 14px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(255,196,54,.35);
}
.cs-cta span { transition: transform .2s ease; }
.cs-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,196,54,.45); }
.cs-more { text-align:center; margin-top: 22px; }

/* Pager */
.cs-pager ul { display:flex; gap:8px; list-style:none; justify-content:center; padding:0; }
.cs-pager a, .cs-pager span {
  display:inline-block; padding:8px 12px; border-radius:10px; background:#0f2a3b; color:#fff; text-decoration:none;
}
.cs-pager .current { background:#ffc436; color:#0b1f2e; font-weight:700; }

/* === Success Stories: más aire lateral y centrado de tarjetas === */
#success-stories .container{
  padding-inline: clamp(24px, 6vw, 72px);
}
#success-stories .ss-grid{
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
  justify-content: center;
}
#success-stories .ss-card{
  width: min(100%, 560px);
  margin-inline: auto;
}
#success-stories.section{
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
#success-stories .ss-cta { display: none !important; }

/* === Success Stories: centrar textos y ocultar CTA === */
#success-stories .ss-card .ss-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#success-stories .ss-card .ss-title-sm{ text-align:center; margin:10px 0 6px; }
#success-stories .ss-card .ss-meta,
#success-stories .ss-card .ss-loc{
  display:flex; align-items:center; justify-content:center; gap:.5rem; margin:4px 0 10px;
}
#success-stories .ss-card .ss-desc{
  text-align:center; max-width:60ch; margin:6px auto 0;
}

/*  Our Specialization: respiración lateral y gaps  */
#specialization .container{
  padding-left: clamp(22px, 4vw, 80px);
  padding-right: clamp(22px, 4vw, 80px);
}
#specialization .spec-grid{
  gap: clamp(16px, 2.2vw, 32px);
}
#specialization .spec-card{
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 34px);
}

/* Home: oculta CTAs de tarjetas (pero NO el enlace del título) y centra textos */
.home .ss-card .ss-cta,
.home .ss-card a[class*="btn"],
.home .ss-card [class*="button"],
.home .ss-card [class*="cta"],
.home .cs-card .ss-cta,
.home .cs-card a[class*="btn"],
.home .cs-card [class*="button"],
.home .cs-card [class*="cta"],
.home .ss-grid .btn.btn-primary,
.home .cs-grid .btn.btn-primary{
  display:none !important;
}

/* Mantener visible el botón grande inferior de la sección */
.ss-more { display: inline-flex !important; }

/* Centrado de contenidos en las cards */
.home .ss-card .ss-body,
.home .cs-card .cs-body{ text-align:center; align-items:center; }
.home .ss-card .ss-title-sm,
.home .cs-card .cs-title{ text-align:center !important; }
.home .ss-card .ss-loc,
.home .ss-card .ss-meta,
.home .cs-card .cs-loc{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.home .ss-card .ss-desc,
.home .cs-card .cs-desc{
  text-align:center; margin-left:auto; margin-right:auto; max-width:60ch;
}

/* Fuerza de visibilidad del título (por si quedó oculto por reglas anteriores) */
.home .ss-card .ss-title-sm,
.home .ss-card .ss-title-sm a,
.home .cs-card .cs-title,
.home .cs-card .cs-title a{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  margin:10px 0 6px !important;
  pointer-events:auto !important;
  color:inherit;
  text-decoration:none;
}

/*  Insights: más aire arriba, menos abajo  */
#insights{
  padding-top: clamp(44px, 6vw, 88px);
  padding-bottom: clamp(20px, 3.2vw, 36px);
}
.section-wave + #insights,
.wave-sep + #insights{
  padding-top: clamp(44px, 6vw, 88px) !important;
}
#insights .ins-head{
  margin-bottom: clamp(12px, 2.2vw, 20px);
}

/* Our Services igual que Case Studies (pill amarillo con texto blanco) */
.solutions .sol-badge{
  background: linear-gradient(180deg, #f6ca67 0%, #e4ac44 100%) !important;
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  border:none !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
}
.solutions .sol-badge svg,
.solutions .sol-badge svg *{
  fill:#fff !important;
  stroke:#fff !important;
}
/* Oculta icono/estrella del pill si la hay y ajusta padding */
.solutions .sol-badge svg,
.solutions .sol-badge .ico,
.solutions .sol-badge i,
.solutions .sol-badge::before{ display: none !important; content: none !important; }
.solutions .sol-badge{ gap:0 !important; padding:8px 18px !important; }

/* Pills unificadas para Services y Specialization */
.solutions .sol-badge,
.spec .sol-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:16px;
  color:#fff !important;
  background: linear-gradient(180deg, #f6ca67 0%, #e4ac44 100%) !important;
  box-shadow: 0 10px 24px rgba(234,184,76,.35);
  border: none;
  margin-bottom:10px;
}
.solutions .sol-badge .ico,
.spec .sol-badge .ico{ display:none !important; }

/* ===== Insights Hub (Archive) ===== */
.ins-archive__hero{
  padding: clamp(48px, 7vw, 80px) 0 10px;
  text-align:center;
}
.ins-archive__hero .container{ max-width: 1100px; }
.ins-archive__title{
  font-size: clamp(28px,4.8vw,44px);
  line-height:1.12;
  margin: 10px 0 8px;
}
.ins-archive__lead{
  color:#475569;
  font-size: clamp(16px,1.8vw,19px);
  max-width: 900px;
  margin: 0 auto;
}

/* Filtros */
.ins-archive__filters{ padding: 10px 0 14px; }
.ins-filter .ins-filter__row{
  display:grid; gap:14px;
  grid-template-columns: 1fr 220px 220px auto;
  align-items:center;
}
@media (max-width: 960px){
  .ins-filter .ins-filter__row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .ins-filter .ins-filter__row{ grid-template-columns: 1fr; }
}
.ins-filter__group select,
.ins-filter__group input[type="search"]{
  width:100%;
  height: 48px;
  border:1px solid #e7edf5;
  border-radius: 14px;
  padding: 0 14px;
  font-weight:600;
  color:#0f172a;
  background:#fff;
}
.ins-filter__actions{ display:flex; gap:10px; justify-content:flex-end; }
.ins-filter .btn.btn-primary span{ margin-left:8px; }
.ins-filter__chips{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.ins-filter__chips .chip{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:#f6e4b8; color:#7a5a00; font-weight:700; font-size:13px;
}

/* Grid de tarjetas (reusa clases de Home) */
.ins-archive__grid{ padding: 8px 0 64px; }
.ins-archive__grid .container{ max-width: 1200px; }
.ins-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width: 1100px){
  .ins-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .ins-grid{ grid-template-columns: 1fr; }
}

/* Paginación */
.ins-pagination{
  margin-top: 22px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.ins-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: 12px; border:1px solid #e7edf5; background:#fff; color:#0f172a; text-decoration:none; font-weight:700;
}
.ins-pagination .current,
.ins-pagination .page-numbers:hover{
  background: linear-gradient(180deg, #f6ca67 0%, #e4ac44 100%);
  color:#fff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(234,184,76,.25);
}

/* Vacío */
.ins-empty{ text-align:center; color:#64748b; font-weight:600; padding: 18px 0 8px; }

/* === HOME  Over 25 years: convertir el kicker en pill dorada === */
.over25__left :is(.wp-block-group, .wp-block-heading, .wp-block-paragraph).has-background{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important; max-width:100%;
  padding:12px 22px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#f6ca67 0%, #e4ac44 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(234,184,76,.28) !important;
  border:0 !important;
  margin:0 auto 10px !important;
}
.over25__left :is(.wp-block-group, .wp-block-heading, .wp-block-paragraph).has-background
  :is(p, strong, a, span){
  color:#fff !important; margin:0 !important; font-weight:800; letter-spacing:.2px;
}
.over25__left :is(.wp-block-group, .wp-block-heading, .wp-block-paragraph).has-background.alignwide,
.over25__left :is(.wp-block-group, .wp-block-heading, .wp-block-paragraph).has-background.alignfull{
  width:auto !important; max-width:100% !important;
}
/* Opción 2 con clase .gv-pill */
.over25__left .gv-pill{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important; max-width:100%;
  padding:12px 22px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#f6ca67 0%, #e4ac44 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(234,184,76,.28) !important;
  border:0 !important;
  margin:0 auto 10px !important;
}
.over25__left .gv-pill :is(p, strong, a, span){ color:#fff !important; margin:0 !important; }

/* Home  Get in Touch: compactar */
#contact .contact-card h2,
#contact .contact-card h3{ margin-bottom: 10px !important; }
#contact .contact-card p,
#contact .contact-card address,
#contact .contact-card .wp-block-paragraph{ line-height: 1.45 !important; margin: 4px 0 !important; }
#contact .contact-card li{ margin: 6px 0 !important; }
#contact .contact-card{ padding-top: 22px !important; padding-bottom: 22px !important; }

/* Fallbacks */
#contact .office-card{ padding: 18px 22px !important; }
#contact .office-card p,
#contact .office-card address{ line-height: 1.30 !important; margin: 0 !important; }
#contact .office-card p + p,
#contact .office-card address + p{ margin-top: 4px !important; }

.wp-block-group.has-background:has(> h3) { padding: 18px 22px !important; }
.wp-block-group.has-background:has(> h3) p,
.wp-block-group.has-background:has(> h3) address,
.wp-block-group.has-background:has(> h3) li{ line-height: 1.28 !important; margin: 0 !important; }
.wp-block-group.has-background:has(> h3) p + p,
.wp-block-group.has-background:has(> h3) address + p,
.wp-block-group.has-background:has(> h3) li + li{ margin-top: 4px !important; }

/* MENU  Forzar visibilidad de "Insights" sin tocar el CTA */
.site-header .header-wrap .primary-nav .menu > li > a[href*="/insight"]{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  background:transparent !important;
  text-shadow:none !important;
  box-shadow:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
.site-header .header-wrap .primary-nav .menu > li > a[href*="/insight"] *,
.site-header .header-wrap .primary-nav .menu > li > a[href*="/insight"] .ins-badge-pill{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.site-header .header-wrap .primary-nav .menu > li.current-menu-item > a[href*="/insight"],
.site-header .header-wrap .primary-nav .menu > li.current_page_item > a[href*="/insight"],
.site-header .header-wrap .primary-nav .menu > li.current-menu-ancestor > a[href*="/insight"],
.site-header .header-wrap .primary-nav .menu > li > a[href*="/insight"][aria-current="page"]{
  color:#EAB84C !important;
  -webkit-text-fill-color:#EAB84C !important;
  font-weight:800 !important;
  pointer-events:none;
}

/* -------------------------------------------------------
   GOVISAN Enhancements appended (safe, non-destructive)
   ------------------------------------------------------- */
:root{ --header-offset:88px; }
@media (max-width:782px){ :root{ --header-offset:72px; } }
:target{ scroll-margin-top: var(--header-offset); }
section[id],
#over-25-years,#solutions,#specialization,#success-stories,#insights,#contact{
  scroll-margin-top: var(--header-offset);
}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}
@supports not (aspect-ratio: 16 / 9){
  .cs-media{position:relative;padding-top:56.25%}
  .cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* === Contact cards (compact) === */
.contact-cards .contact-card{
  padding: 20px 22px; /* un pelín menos de padding */
}

.contact-cards .contact-card h3{
  margin: 0 0 10px;
  line-height: 1.2;
}

.contact-cards .contact-card address,
.contact-cards .contact-card p,
.contact-cards .contact-card li{
  font-style: normal;       /* <address> sin cursiva */
  line-height: 1.38;        /* antes ~1.6–1.8 */
  margin: 2px 0;            /* líneas pegadas con respiración */
}

.contact-cards .contact-card .group + .group{
  margin-top: 10px;         /* espacio solo entre bloques */
}

/* filas con icono (teléfono, email) */
.contact-cards .contact-card .row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.contact-cards .contact-card svg{
  flex: 0 0 18px;
}

.contact-cards .contact-card a{
  text-decoration: none;
  word-break: break-word;   /* evita desbordes en emails largos */
}
/* === SPECIALIZATION — hover anim (lift + shadow + bg zoom + glass) === */
@media (hover:hover) and (pointer:fine){
  #specialization .spec-card{
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform, box-shadow;
  }
  #specialization .spec-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.12);
  }

  /* Fondo con micro-zoom (Ken Burns muy sutil) */
  #specialization .spec-card__bg{
    transform: scale(1.02);
    transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
    will-change: transform;
  }
  #specialization .spec-card:hover .spec-card__bg{
    transform: scale(1.06) translateY(-2px);
  }

  /* Capa de “vidrio” más viva al hover */
  #specialization .spec-card__glass{
    transition: backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease, background .25s ease, opacity .25s ease;
  }
  #specialization .spec-card:hover .spec-card__glass{
    backdrop-filter: blur(8px) saturate(135%);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.32));
    opacity: .95;
  }

  /* Pequeñísimo lift del contenido para dar profundidad */
  #specialization .spec-card__head,
  #specialization .spec-card__lead,
  #specialization .spec-card__list{
    transition: transform .25s ease, opacity .25s ease;
    will-change: transform;
  }
  #specialization .spec-card:hover .spec-card__head,
  #specialization .spec-card:hover .spec-card__lead,
  #specialization .spec-card:hover .spec-card__list{
    transform: translateY(-1px);
  }
}

/* Sin animaciones si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  #specialization .spec-card,
  #specialization .spec-card__bg,
  #specialization .spec-card__glass,
  #specialization .spec-card__head,
  #specialization .spec-card__lead,
  #specialization .spec-card__list{
    transition: none !important;
    transform: none !important;
  }
}
/* ===== NEW SPECIALIZATIONS — scoped, anulando estilos antiguos ===== */
.gv-specializations .container{ max-width:1100px; margin-inline:auto; padding-inline:48px; }
.gv-specializations .spec-head{ text-align:center; margin: 0 auto clamp(18px,2.4vw,28px); max-width:980px; }
.gv-specializations .spec-title{ margin:0 0 8px; text-shadow:none !important; filter:none !important; }
.gv-specializations .sol-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:16px;
  color:#fff; background:linear-gradient(180deg,#f6ca67 0%,#e4ac44 100%);
  box-shadow:0 10px 24px rgba(234,184,76,.35); margin-bottom:.6rem;
}

/* Grid y tarjeta (evita que .spec-grid/.spec-card globales te pisen) */
.gv-specializations .spec-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr)) !important;
  gap: clamp(16px, 2.5vw, 28px) !important;
}
.gv-specializations .spec-card{
  position:relative; border-radius:20px; overflow:hidden; isolation:isolate;
  background:transparent !important; border:0 !important; padding:0 !important;
  box-shadow:0 6px 24px rgba(0,0,0,.08); transform:translateY(8px); opacity:0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
.gv-specializations .spec-card.in{ transform:translateY(0); opacity:1; }
.gv-specializations .spec-inner{ position:relative; display:block; padding: clamp(20px, 2.8vw, 26px); min-height: 380px; color:#fff; }

/* Fondo y overlay (imagen más visible) */
.gv-specializations .spec-bgi{
  position:absolute; inset:0; z-index:-3;
  background: var(--spec-bg) center/cover no-repeat;
  transform: scale(1.02); transition: transform .8s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.05) brightness(.95);
}
.gv-specializations .spec-overlay{
  position:absolute; inset:0; z-index:-2;
  background: linear-gradient(180deg, rgba(3,12,22,.25), rgba(3,12,22,.55));
  opacity:.95; transition: opacity .35s ease;
}
.gv-specializations .spec-sheen{
  position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.28) 50%, transparent 55%);
  transform: translateX(-120%) rotate(8deg); opacity:0;
}

/* Tipografía + clamp en descripción para evitar “tarjeta gigante” */
.gv-specializations .spec-title h3{ font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.2; margin:.1rem 0; }
.gv-specializations .spec-sub{
  margin:.25rem 0 0; font-weight:500; opacity:.95;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gv-specializations .spec-list{ margin:.75rem 0 0; list-style:none; padding:0; }
.gv-specializations .spec-list li{ position:relative; padding-left:1.05rem; line-height:1.55; }
.gv-specializations .spec-list li::before{ content:"•"; position:absolute; left:.1rem; top:0; opacity:.85; }

/* Hover estilo VCN */
@media (hover:hover) and (pointer:fine){
  .gv-specializations .spec-card:hover,
  .gv-specializations .spec-card:focus-within{ transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.14); }
  .gv-specializations .spec-card:hover .spec-bgi,
  .gv-specializations .spec-card:focus-within .spec-bgi{ transform:scale(1.08); filter:saturate(1.1) contrast(1.08) brightness(.98); }
  .gv-specializations .spec-card:hover .spec-sheen,
  .gv-specializations .spec-card:focus-within .spec-sheen{ opacity:1; animation: gvSheen 900ms ease forwards; }
}
@keyframes gvSheen{ to{ transform:translateX(130%) rotate(8deg); opacity:0; } }

/* Apaga la versión antigua dentro de la nueva sección (por si quedó mezclado) */
.gv-specializations .spec-card__bg,
.gv-specializations .spec-card__glass,
.gv-specializations .spec-card__head{ display:none !important; }
/* ===== Specializations: layout + animación tipo video ===== */
#specialization.gv-specializations{ --r:20px; }
#specialization .spec-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.2vw,28px);
}

/* Tarjeta base */
#specialization .spec-card{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:transparent; box-shadow:0 10px 30px rgba(3,12,22,.10);
  transform:translateY(8px); opacity:0; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;
}
#specialization .spec-card.in{ transform:translateY(0); opacity:1; }
#specialization .spec-inner{
  position:relative; min-height: 360px; padding:clamp(18px,2.6vw,24px);
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}

/* Fondo + overlay (más clara que antes) */
#specialization .spec-bgi{
  position:absolute; inset:0; z-index:-3;
  background:var(--spec-bg) center/cover no-repeat;
  transform:scale(1.02); transition:transform .8s ease, filter .35s ease;
  filter:saturate(1.05) contrast(1.06) brightness(.98);
}
#specialization .spec-overlay{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg,rgba(2,12,22,.20),rgba(2,12,22,.45));
  transition:opacity .35s ease; opacity:.90;
}
#specialization .spec-sheen{
  position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.28) 50%,transparent 55%);
  transform:translateX(-120%) rotate(8deg);
}

/* Tipografías controladas (evita textos gigantes) */
#specialization .spec-title h3{
  margin:0 0 .35rem;
  font-weight:800;
  font-size:clamp(1.05rem, 1.05vw + .7rem, 1.35rem) !important;
  line-height:1.22;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word; hyphens:auto;
}
#specialization .spec-sub{
  margin:0 0 .35rem; font-weight:600; opacity:.95;
  font-size:clamp(.92rem, .5vw + .7rem, 1rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Bullets ocultos inicialmente; aparecen en hover/focus */
#specialization .spec-list{
  list-style:none; padding:0; margin:.4rem 0 0;
  max-height:0; opacity:0; overflow:hidden;
  transform:translateY(6px); transition:max-height .45s ease, opacity .35s ease, transform .45s ease;
}
#specialization .spec-list li{ position:relative; padding-left:1rem; line-height:1.5; font-size:.95rem; }
#specialization .spec-list li::before{ content:"•"; position:absolute; left:.15rem; top:0; opacity:.85; }

/* Hover/focus — efecto del vídeo */
@media (hover:hover) and (pointer:fine){
  #specialization .spec-card:hover,
  #specialization .spec-card:focus-within{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(3,12,22,.16);
  }
  #specialization .spec-card:hover .spec-bgi,
  #specialization .spec-card:focus-within .spec-bgi{
    transform:scale(1.08); filter:saturate(1.12) contrast(1.08) brightness(1);
  }
  #specialization .spec-card:hover .spec-overlay,
  #specialization .spec-card:focus-within .spec-overlay{ opacity:.78; }
  #specialization .spec-card:hover .spec-sheen,
  #specialization .spec-card:focus-within .spec-sheen{ opacity:1; animation:gvSheen 900ms ease forwards; }

  /* Revelado de bullets y micro movimiento de títulos */
  #specialization .spec-card:hover .spec-list,
  #specialization .spec-card:focus-within .spec-list{ max-height:360px; opacity:1; transform:translateY(0); }
  #specialization .spec-card:hover .spec-title h3,
  #specialization .spec-card:focus-within .spec-title h3{ transform:translateY(-2px); transition:transform .35s ease; }
}
@keyframes gvSheen{ to{ transform:translateX(130%) rotate(8deg); opacity:0; } }

/* Mobile tune */
@media (max-width: 560px){
  #specialization .spec-inner{ min-height:300px; }
  #specialization .spec-sub{ -webkit-line-clamp:1; }
}
/* ===== Specializations — Slide-in panel desde la derecha ===== */

/* Paleta overlay (elige con clase en el <section>) */
#specialization.spec--panel-blue { --panel-bg: rgba(16, 44, 77, 0.88); --panel-color: #fff; --accent: #e9f1fb; }
#specialization.spec--panel-white{ --panel-bg: rgba(255,255,255,0.94); --panel-color: #0e2237; --accent: #0e2237; }
/* default = azul */
#specialization:not(.spec--panel-white){ --panel-bg: rgba(16, 44, 77, 0.88); --panel-color:#fff; --accent:#e9f1fb; }

#specialization .spec-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2.4vw,28px);
}

#specialization .spec-card{
  position:relative; overflow:hidden; border-radius:20px; isolation:isolate;
  background:transparent; box-shadow:0 10px 30px rgba(3,12,22,.10);
  transform:translateY(8px); opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
#specialization .spec-card.in{ transform:translateY(0); opacity:1; }

#specialization .spec-inner{ position:relative; min-height:380px; }

/* Imagen de fondo */
#specialization .spec-bgi{
  position:absolute; inset:0; z-index:-3;
  background:var(--spec-bg) center/cover no-repeat;
  transform:scale(1.02);
  transition:transform .8s ease, filter .35s ease;
  filter:saturate(1.05) contrast(1.06) brightness(.98);
}

/* Título previo al hover, centrado */
#specialization .spec-caption{
  position:absolute; inset:0; z-index:1; display:grid; place-items:start;
  padding:clamp(18px,2.6vw,24px);
  transition:opacity .35s ease, transform .35s ease;
}
#specialization .spec-caption__title{
  margin:0; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35);
  font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.2rem,1.1vw + .9rem,1.6rem);
  line-height:1.2;
}

/* Panel que entra desde la derecha */
#specialization .spec-panel{
  position:absolute; inset:clamp(18px,2.6vw,24px); z-index:2;
  right:0; left:auto; width:auto; max-width:92%;
  background:var(--panel-bg); color:var(--panel-color);
  border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateX(105%); /* escondido a la derecha */
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  opacity:.98;
}
#specialization .spec-panel__inner{
  max-height:calc(100% - 24px); overflow:auto;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  scrollbar-width:thin;
}
#specialization .spec-panel__title{
  margin:0 0 .5rem; font-weight:800;
  font-size:clamp(1.05rem,1.05vw + .7rem,1.35rem);
  line-height:1.18;
  border-bottom:2px solid rgba(255,255,255,.25);
  border-color: color-mix(in srgb, var(--panel-color) 35%, transparent);
  padding-bottom:.35rem;
}
#specialization .spec-panel__desc{
  margin:.5rem 0 .35rem; font-weight:600; opacity:.95;
  font-size:clamp(.92rem, .5vw + .7rem, 1rem);
}
#specialization .spec-panel__list{
  list-style:none; padding:0; margin:.4rem 0 0;
}
#specialization .spec-panel__list li{
  position:relative; padding-left:1rem; line-height:1.55;
  font-size:clamp(.92rem, .45vw + .7rem, 1rem);
}
#specialization .spec-panel__list li::before{
  content:"•"; position:absolute; left:.15rem; top:0; opacity:.85;
  color: var(--accent);
}

/* Overlay y sheen sutiles */
#specialization .spec-overlay{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(3,12,22,.18), rgba(3,12,22,.42));
  transition:opacity .35s ease; opacity:.95;
}
#specialization .spec-sheen{
  position:absolute; inset:-40% -60%; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.28) 50%,transparent 55%);
  transform:translateX(-120%) rotate(8deg);
}

/* Interacción: hover/focus — entra panel desde la derecha */
@media (hover:hover) and (pointer:fine){
  #specialization .spec-card:hover,
  #specialization .spec-card:focus-within{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(3,12,22,.16);
  }
  #specialization .spec-card:hover .spec-bgi,
  #specialization .spec-card:focus-within .spec-bgi{
    transform:scale(1.08);
    filter:saturate(1.12) contrast(1.08) brightness(1);
  }
  #specialization .spec-card:hover .spec-caption,
  #specialization .spec-card:focus-within .spec-caption{
    opacity:0; transform:translateY(-4px); pointer-events:none;
  }
  #specialization .spec-card:hover .spec-panel,
  #specialization .spec-card:focus-within .spec-panel{
    transform:translateX(0);
  }
  #specialization .spec-card:hover .spec-sheen,
  #specialization .spec-card:focus-within .spec-sheen{
    opacity:1; animation: gvSheen 900ms ease forwards;
  }
}
@keyframes gvSheen{ to{ transform:translateX(130%) rotate(8deg); opacity:0; } }

/* Accesibilidad / Mobile: sin hover mostramos SIEMPRE el panel */
@media (hover:none){
  #specialization .spec-caption{ opacity:0; pointer-events:none; }
  #specialization .spec-panel{ transform:none; }
}
/* ===== Specializations – ajustes visuales pedidos ===== */

/* Tema azul del panel */
#specialization.spec--panel-blue{
  --panel-bg: rgba(13,39,71,.92);     /* azul profundo translúcido */
  --panel-color: #fff;                /* textos blancos */
  --accent: #8fc5ff;                  /* bullets/acentos */
}

/* Gradiente azul encima de la foto (pre-hover) */
#specialization .spec-overlay{
  background:linear-gradient(180deg,
    rgba(12,33,57,.22) 0%,
    rgba(12,33,57,.58) 100%
  );
  opacity:.95;
}

/* Título visible antes del hover: siempre blanco y legible */
#specialization .spec-caption__title{
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* Panel que entra desde la derecha */
#specialization .spec-panel{
  background:var(--panel-bg);
  color:var(--panel-color);
  /* ya entra con translateX(105%) -> 0 en hover (de tu CSS anterior) */
}

/* Asegurar color blanco en todo el panel y quitar clamps/ellipsis globales */
#specialization .spec-panel,
#specialization .spec-panel *{
  color:var(--panel-color) !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}

/* Ver TODAS las líneas: si el contenido es largo, scroll suave en el panel */
#specialization .spec-panel__inner{
  max-height:calc(100% - 24px);
  overflow:auto;
  scrollbar-width:thin;
}

/* Bullets más visibles sobre azul */
#specialization .spec-panel__list li::before{
  color:var(--accent);
  opacity:1;
}

/* Reveal: mostrar cuando tu home.js añade .in-view */
#specialization .spec-card{
  transform:translateY(8px);
  opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
#specialization .spec-card.in,
#specialization .spec-card.in-view{  /* <- clave para que aparezcan */
  transform:translateY(0);
  opacity:1;
}

/* Opcional: imagen con un pelín más de contraste al hover */
@media (hover:hover){
  #specialization .spec-card:hover .spec-bgi{ filter:saturate(1.12) contrast(1.08) brightness(1); }
}
/* ===== SPECIALIZATION — Flip cards v2 (scoped) ===== */
#specialization.spec--flip .spec-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(3, minmax(260px,1fr));
}
@media (max-width:1100px){ #specialization.spec--flip .spec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){  #specialization.spec--flip .spec-grid{ grid-template-columns:1fr; } }

#specialization.spec--flip .spec-card.gv-flip{
  position:relative; border-radius:20px; overflow:hidden; isolation:isolate;
  box-shadow:0 12px 36px rgba(15,23,42,.10);
  background:transparent; border:1px solid rgba(15,23,42,.08);
  height: clamp(280px, 28vw, 340px); /* altura tipo Services */
  perspective: 1200px;
}

#specialization.spec--flip .spec-3d{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  transform-style:preserve-3d;
  transition: transform .72s cubic-bezier(.2,.7,.2,1);
}
#specialization.spec--flip .spec-card.gv-flip.is-flipped .spec-3d{ transform: rotateY(180deg); }

#specialization.spec--flip .face{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  backface-visibility: hidden; -webkit-backface-visibility:hidden;
  display:flex; align-items:stretch; justify-content:stretch;
}
#specialization.spec--flip .face .bg{
  position:absolute; inset:0; background: var(--spec-bg) center/cover no-repeat; z-index:-2;
}
#specialization.spec--flip .face .glass.dark{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(10,20,32,.55) 0%, rgba(10,20,32,.10) 100%);
}
#specialization.spec--flip .face .glass.light{
  position:absolute; inset:0; z-index:-1;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}

/* Frente: texto arriba y alineado entre tarjetas */
#specialization.spec--flip .front-body{
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding: clamp(18px, 2.4vw, 24px);
  width:100%;
}
#specialization.spec--flip .front-body .desc{
  margin:0; color:#fff; font-weight:600; line-height:1.55;
  max-width: 90%; cursor:pointer;
  text-wrap:balance;
}

/* Detrás: título centrado + (opcional) lista */
#specialization.spec--flip .face-back{ transform: rotateY(180deg); }
#specialization.spec--flip .back-body{
  position:relative; z-index:1; display:grid; place-items:center;
  text-align:center; padding: clamp(18px, 2.2vw, 24px);
  width:100%; height:100%;
  color:#0b1f2e;
}
#specialization.spec--flip .back-body .title{
  margin:0 0 8px; font-size: clamp(18px,2.2vw,22px); font-weight:800; cursor:pointer;
}
#specialization.spec--flip .back-body .list{
  list-style: none; padding:0; margin:6px 0 0; color:#18324a;
}
#specialization.spec--flip .back-body .list li{
  margin:4px 0; position:relative; padding-left:12px;
}
#specialization.spec--flip .back-body .list li::before{
  content:"•"; position:absolute; left:0; top:0; color:#0b6bff; opacity:.9;
}

/* Único botón redondo de flip */
#specialization.spec--flip .spec-toggle{
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:44px; height:44px; border:0; border-radius:999px;
  background:#0b1f2e; color:#fff; box-shadow:0 12px 30px rgba(2,12,22,.26);
  display:grid; place-items:center; cursor:pointer;
}
#specialization.spec--flip .spec-toggle:focus-visible{
  outline:3px solid #ffd067; outline-offset:2px;
}

/* Aparición al hacer scroll (como tenías) */
#specialization.spec--flip .spec-card.gv-flip{ transform: translateY(8px); opacity:0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s; }
#specialization.spec--flip .spec-card.gv-flip.in{ transform: none; opacity:1; }

/* Hovers sutiles */
@media (hover:hover){
  #specialization.spec--flip .spec-card.gv-flip:hover .face .bg{ filter: saturate(1.08) contrast(1.05) brightness(.98); transform: scale(1.02); transition: transform .45s ease, filter .3s ease; }
}
/* ===== Specialization · Mobile: igual que Our Services (centrado + gutter) ===== */
@media (max-width: 768px){
  /* 1) Devolvemos el padding del container como el resto de secciones */
  #specialization .container{
    /* usa el gutter típico del tema y respeta el safe-area del iPhone */
    padding-left: max(clamp(16px, 4vw, 24px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(16px, 4vw, 24px), env(safe-area-inset-right)) !important;
  }

  /* 2) Una sola columna y separación cómoda */
  #specialization .spec-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 3) CLAVE: la card ocupa el ancho útil del container (no vw),
        centrada, sin “pegadas” a los bordes */
  #specialization .spec-card{
    width: 100% !important;         /* rellena el container como en Our Services */
    max-width: 700px !important;    /* límite razonable para tablet; sube/baja si quieres */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Altura cómoda en móvil */
  #specialization .spec-inner{ min-height: 540px !important; }
}