/* ====== SERVICIOS — calcado del Figma ====== */
.sv-page { --azul-oscuro:#082843; --azul:#0E487A; --azul-claro:#E7EDF2; --gris:#C4C4C4; }
body > footer[data-footer] { margin-top:0; }

/* Placeholders grises */
.sv-ph {
  background: repeating-linear-gradient(45deg, #E4E8EC, #E4E8EC 10px, #D8DDE3 10px, #D8DDE3 20px);
  color:#6B7280; display:grid; place-items:center; text-align:center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.5;
}

/* ---------- SECCIÓN 1 · HERO ---------- */
.sv-hero { position:relative; overflow:hidden; background:#082843; min-height:600px; display:flex; align-items:flex-end; }
.sv-hero canvas { z-index:0; }
.sv-hero__video {
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease;
  /* El video es muy azul y el texto (sobre todo el título celeste) pierde
     contraste. Se desatura hacia gris/plomo y se oscurece un poco para que las
     letras resalten mejor. Solo afecta al video; el degradado no cambia. */
  filter:grayscale(0.92) brightness(0.8);
}
.sv-hero__video.is-ready { opacity:1; }
.sv-hero__overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Degradado según el Figma de la UX (Servicios 1 · Hero Institucional), 2 capas:
     1) horizontal: negro .8 (izq) → azul #0E487A .55 (centro) → azul #0E487A .2 (der),
        mantiene un tinte azul en todo el ancho (no se vuelve transparente);
     2) vertical: negro .6 (abajo) → transparente (arriba), oscurece el pie donde va
        el texto. La capa vertical va primero (encima) para respetar el orden del Figma. */
  background:
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(14,72,122,0.55) 50%, rgba(14,72,122,0.2) 100%);
}
/* misma geometría que .wrap para que el texto alinee con el logo del nav */
.sv-hero__inner { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 3rem); padding-bottom:120px; }
/* Móvil usa el MISMO degradado del Figma que desktop (se quitó el override
   vertical que tenía antes), por pedido del cliente. */
.sv-hero h1 {
  font-family:'Bitter',serif; font-weight:700; color:#FFFFFF;
  font-size:clamp(2.2rem, 1.5rem + 3vw, 3.4rem); line-height:1.1; letter-spacing:-0.01em;
  max-width:none; text-wrap:balance;
}
.sv-hero p {
  font-family:'Poppins',sans-serif; font-weight:400; font-size:1rem;
  color:rgba(255,255,255,0.82); line-height:1.6; max-width:none; margin-top:1.25rem;
}

/* ---------- SECCIÓN 2 · MODELO DE TRABAJO ---------- */
.sv-model { background:var(--bg-2); padding:120px 0; }
.sv-model__title {
  text-align:center; font-family:'Bitter',serif; font-weight:700; color:var(--text);
  font-size:clamp(2rem, 1.3rem + 2.6vw, 3.06rem); line-height:1.1; margin-bottom:80px;
}
.sv-flow { position:relative; width:100%; max-width:1163px; margin:0 auto; aspect-ratio:1163/360; }
.sv-flow__svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sv-flow__svg g { stroke:var(--accent); }
.sv-flow__svg marker path { fill:var(--accent); }
.sv-circle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:17.2%; aspect-ratio:1; border-radius:50%;
  background:transparent; border:2px solid var(--accent);
  display:grid; place-items:center; text-align:center; padding:6px;
  font-family:'Bitter',serif; font-weight:700; color:var(--accent);
  font-size:clamp(.7rem,.4rem+0.9vw,1.25rem); letter-spacing:.03em;
}
.sv-circle--1 { left:8.6%; }
.sv-circle--2 { left:29.3%; }
.sv-circle--3 { left:50%; }
.sv-circle--4 { left:70.7%; }
.sv-circle--5 { left:91.4%; }

/* ---------- SECCIÓN 3 · SERVICIOS QUE OFRECEMOS (calcado del Figma) ---------- */
.sv-services { background:#FFFFFF; padding:180px 0; }
.sv-services__title {
  text-align:center; font-family:'Bitter',serif; font-weight:700; color:#000000;
  font-size:clamp(2rem, 1.4rem + 2.6vw, 48.83px); line-height:1.05; letter-spacing:0; margin:0 auto 80px;
}
.svo-wrap { width:100%; max-width:1163px; margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 40px); box-sizing:border-box; display:flex; flex-direction:column; gap:80px; }

/* elementos compartidos */
.svo-eyebrow { font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; line-height:1; letter-spacing:0; text-transform:uppercase; color:#000000; margin:0; }
.svo-icon { width:80px; height:80px; border-radius:50%; flex:none; object-fit:cover; object-position:center top; background:#d8dde3; display:block; }
.svo-titleblock { display:flex; flex-direction:column; gap:18px; }
/* Nombre del gerente + LinkedIn: más pegado a la foto (se sube el bloque hacia
   el avatar) y más separado del título (gap del titleblock, arriba). El subir se
   escala según el espacio propio de cada bloque: hero (32px) y tarjeta (16px). */
.svo-hero__text .svo-titleblock { margin-top:-20px; }
.svo-card__text .svo-titleblock { margin-top:-8px; }
.svo-title { font-family:'Bitter',serif; font-weight:700; font-size:31.25px; line-height:1.1; letter-spacing:0; color:#000000; margin:0; text-wrap:balance; }
.svo-mgr { font-family:'Poppins',sans-serif; font-weight:400; font-size:16px; line-height:1.3; color:#5b6976; margin:0; }
.svo-mgr-row { display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; }
.svo-linkedin { display:inline-flex; align-items:center; gap:0.3rem; color:#0a66c2; font-family:'Poppins',sans-serif; font-size:14px; font-weight:500; }
.svo-linkedin svg { width:16px; height:16px; display:block; flex:none; }
.svo-linkedin:hover { text-decoration:underline; }
.svo-desc { font-family:'Poppins',sans-serif; font-weight:400; font-size:16px; line-height:1.6; letter-spacing:0; color:#000000; margin:0; }

/* tarjeta HERO destacada · franja a todo el ancho */
.svo-hero {
  width:100%; background:#E7EDF2; border:0; border-radius:0; box-sizing:border-box;
  padding-block:80px; padding-inline:clamp(1.25rem, 4vw, 40px); margin-bottom:80px;
}
.svo-hero__inner {
  display:flex; align-items:center; gap:56px;
  width:100%; max-width:1163px; margin-inline:auto;
}
.svo-hero__text { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.svo-hero__img { flex:none; width:600px; max-width:50%; aspect-ratio:3/2; border-radius:24px; object-fit:cover; display:block; box-shadow:0 20px 48px -16px rgba(8,40,67,0.35); }

/* tarjetas de servicio */
.svo-card {
  background:#FFFFFF; border:1px solid #C4C4C4; border-radius:15px;
  box-shadow:0px 8px 16px -4px rgba(0,0,0,0.08);
  display:flex; align-items:center; gap:40px; padding:48px 56px;
}
.svo-card__text { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
/* aspect-ratio 3/2 = proporción real de las fotos (1200×800). Debe COINCIDIR con
   la foto: si la caja tiene otra proporción, object-fit:cover recorta y Chromium
   renderiza la imagen borrosa (ruta "directly composited image" con reescalado
   bilineal de GPU) — se ve pixelada en Windows. Con 3/2 no hay recorte → nítida. */
.svo-card__img { flex:none; width:47%; max-width:520px; aspect-ratio:3/2; border-radius:24px; object-fit:cover; display:block; box-shadow:0 20px 48px -16px rgba(8,40,67,0.35); }
.svo-more {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; background:none; padding:0;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:12.8px; line-height:1; letter-spacing:0; color:#0E487A;
  transition:gap .2s ease;
}
.svo-more svg { width:14px; height:14px; transition:transform .2s ease; }
.svo-more:hover { gap:13px; }
.svo-card__subs-data { display:none; }

/* ---------- MODAL DE SERVICIO (rediseño Figma) ---------- */
.svo-modal {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center;
  padding:24px; overflow-y:auto; background:rgba(0,0,0,0.58);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.svo-modal.is-open { opacity:1; visibility:visible; }
.svo-modal__panel {
  position:relative; background:#FFFFFF; border-radius:15px; width:100%; max-width:890px; margin:auto; overflow:hidden;
  box-shadow:0 8px 16px -4px rgba(0,0,0,0.08);
  transform:scale(.95) translateY(12px); opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.svo-modal.is-open .svo-modal__panel { transform:none; opacity:1; }

/* cabecera: foto del servicio + degradados + gerente + título */
.svo-modal__header { position:relative; height:220px; overflow:hidden; flex:none; }
.svo-modal__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.svo-modal__header-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(14,72,122,0.80) 0%, rgba(14,72,122,0) 100%),
    linear-gradient(90deg, rgba(14,72,122,0.80) 0%, rgba(14,72,122,0.50) 33.46%, rgba(14,72,122,0) 66.93%);
}
.svo-modal__close {
  position:absolute; top:24px; right:24px; z-index:3; width:34px; height:34px;
  display:grid; place-items:center; border:0; background:none; color:#FFFFFF; cursor:pointer;
  transition:transform .25s ease, opacity .2s ease;
}
.svo-modal__close svg { width:24px; height:24px; }
.svo-modal__close:hover { transform:rotate(90deg); opacity:.85; }
.svo-modal__heading { position:absolute; left:32px; right:64px; bottom:26px; z-index:2; display:flex; align-items:flex-end; gap:18px; }
.svo-modal__mgr { flex:none; width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:center top; display:block; }
.svo-modal__title { font-family:'Bitter',serif; font-weight:700; font-size:31.25px; line-height:1.1; color:#FFFFFF; margin:0; text-wrap:balance; }

/* cuerpo */
.svo-modal__body { padding:26px 32px 28px; }
.svo-modal__desc { display:flex; flex-direction:column; gap:14px; margin:0 0 22px; }
.svo-modal__desc p { font-family:'Poppins',sans-serif; font-weight:400; font-size:16px; line-height:1.55; color:#404040; margin:0; }
.svo-modal__subs-title { font-family:'Bitter',serif; font-weight:700; font-size:20px; line-height:1.1; color:#14A0BB; margin:0 0 16px; }
.svo-modal__subs { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; list-style:none; padding:0; margin:0; }
.svo-modal__subs li { display:flex; align-items:center; gap:14px; padding:8px 0; }
.svo-modal__subic { flex:none; width:36px; height:36px; border-radius:6px; background:rgba(14,72,122,0.08); color:#0E487A; display:grid; place-items:center; }
.svo-modal__subic svg { width:16px; height:16px; display:block; }
.svo-modal__subs li > span:last-child { font-family:'Poppins',sans-serif; font-weight:400; font-size:14px; line-height:1.4; color:#404040; }
body.svo-noscroll { overflow:hidden; }

/* ---------- SECCIÓN 4 · CAPACIDADES TECNOLÓGICAS ---------- */
.sv-caps { background:var(--bg); padding:120px 0; }
.sv-caps__title {
  text-align:center; font-family:'Bitter',serif; font-weight:700; color:var(--text);
  font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.44rem); line-height:1.1; margin-bottom:56px;
}
.sv-caps__row {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:64px; max-width:1163px; margin:0 auto; padding-inline:clamp(1.15rem,4vw,3rem);
}
.sv-logo { height:72px; width:auto; max-width:210px; object-fit:contain; display:block; }
html[data-theme="dark"] .sv-logo { background:#FFFFFF; padding:14px 22px; border-radius:12px; box-sizing:content-box; }

/* ---------- SECCIÓN 5 · CTA TRABAJA CON NOSOTROS ---------- */
.sv-cta { position:relative; padding:120px 0; color:#FFFFFF; overflow:hidden; }
.sv-cta__bg {
  position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 24px),
    #0a2236;
}
.sv-cta__bg-label {
  position:absolute; top:14px; left:18px; z-index:2;
  font-family:ui-monospace, Menlo, monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.sv-cta__overlay { position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.40); }
.sv-cta__inner {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:48px; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1.15rem, 4vw, 3rem);
}
.sv-cta__logo { width:190px; flex:none; height:auto; display:block; }
.sv-cta__title { font-family:'Bitter',serif; font-weight:700; color:#FFFFFF; text-align:left; font-size:clamp(1.5rem, 1rem + 1.6vw, 2.1rem); line-height:1.15; }
.sv-cta__sub { margin-top:12px; font-family:'Poppins',sans-serif; font-weight:400; color:rgba(255,255,255,.88); font-size:clamp(.95rem, .9rem + .25vw, 1.1rem); line-height:1.5; max-width:560px; }
.sv-cta__btn {
  flex:none; background:#FFFFFF; color:#0E487A; border-radius:10px; padding:12px 44px;
  font-family:'Poppins',sans-serif; font-weight:500; font-size:1rem; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
.sv-cta__btn:hover { background:#E7EDF2; transform:translateY(-2px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .svo-wrap { gap:56px; }
  .svo-hero { padding-block:48px; margin-bottom:56px; }
  .svo-hero__inner, .svo-card { flex-direction:column; align-items:stretch; gap:40px; }
  .svo-card { padding:48px 32px; }
  .svo-hero__img, .svo-card__img { width:100%; max-width:none; }
  .svo-hero__img { aspect-ratio:3/2; }
  .svo-card__img { aspect-ratio:3/2; min-height:0; order:0; max-width:none; }
}
@media (max-width:860px) {
  .sv-hero { min-height:480px; }
  .sv-hero__inner { padding-bottom:80px; }
  .sv-model { padding:80px 0; }
  .sv-services { padding:100px 0; }
  .sv-model__title, .sv-services__title { margin-bottom:56px; }
  .sv-flow { aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:28px; }
  .sv-flow__svg { display:none; }
  .sv-circle { position:static; transform:none; width:190px; }
}
@media (max-width:860px) {
  .sv-caps { padding:80px 0; }
  .sv-cta { padding:80px 0; }
  .sv-cta__inner { flex-direction:column; text-align:center; gap:28px; }
  .sv-cta__title { text-align:center; }
}
@media (max-width:760px) {
  .svo-modal { padding:0; }
  .svo-modal__panel { border-radius:0; min-height:100%; max-width:none; }
  .svo-modal__header { height:210px; }
  .svo-modal__close { top:16px; right:16px; }
  .svo-modal__heading { left:20px; right:20px; bottom:20px; gap:14px; }
  .svo-modal__mgr { width:38px; height:38px; }
  .svo-modal__title { font-size:23px; }
  .svo-modal__body { padding:24px 20px 40px; }
  .svo-modal__subs li { padding:12px 6px; gap:12px; }
}
@media (max-width:560px) {
  .svo-modal__subs { grid-template-columns:1fr; }
}