/* Sitio institucional (1/10/2026): piezas nuevas. Colores de marca 2026 (variables --ot-* de styles.css):
   azul #0E2A5C, azul profundo #081936, celeste #53BDEB solo sobre fondo oscuro, papel #F7F5F0.
   Sin degradés de color; las fotos no se tiñen. Todo movimiento se apaga con "reducir movimiento". */

/* ── Hero de la home: rótulo chico y titular ── */
.ins-hero-rotulo{font-size:clamp(20px,1.9vw,28px);line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--ot-celeste,#53BDEB);margin:0}
.ins-hero-h1{font-size:clamp(2.35rem,6.3vw,6.4rem);line-height:1.02;letter-spacing:-.05em;text-wrap:balance;margin:0}

/* ── Rótulo chico arriba del titular de un hero con foto ── */
.h8-media-hero p.ins-rotulo{font-size:clamp(17px,1.4vw,20px);line-height:1.2;font-weight:600;letter-spacing:0;margin:0 0 20px;max-width:none;color:#F7F5F0}

/* ── Titulares de /servicios y /nosotros con frases más largas que una palabra ── */
#sp-servicios.h8-page .h8-index-hero h1{font-size:clamp(52px,10.5vw,190px)!important;white-space:normal;text-wrap:balance}
@media(max-width:767px){#sp-servicios.h8-page .h8-index-hero h1{font-size:17.5vw!important}}

/* ── Pila de servicios: el cuerpo debajo de la frase ── */
.ins-pila-cuerpo{font-size:clamp(16px,1.35vw,20px);max-width:46ch;opacity:.85}
@media(max-width:767px){.ins-pila-tarjeta{padding-top:40px;padding-bottom:40px}.ins-pila-tarjeta h2{font-size:clamp(40px,12vw,56px)}}

/* ── Cierre oscuro de /servicios y de las páginas de servicio ── */
.ins-cierre{background:#081936;color:#F7F5F0;padding:clamp(72px,9vw,140px) var(--h8-gutter)}
.ins-cierre h2{font-size:clamp(52px,8vw,140px);line-height:.98;margin-bottom:32px}
.ins-cierre p{font-size:clamp(22px,2.3vw,38px);line-height:1.12;max-width:30ch;font-weight:600;letter-spacing:-.04em;margin-bottom:48px}
.ins-boton{display:inline-flex;align-items:center;justify-content:center;padding:20px 32px;border-radius:999px;background:#F7F5F0;color:#0E2A5C;font-weight:600;font-size:18px;line-height:1;text-decoration:none;transition:background-color .25s,color .25s}
.ins-boton:focus-visible{outline:3px solid #53BDEB;outline-offset:4px}
.ins-boton--azul{background:#0E2A5C;color:#F7F5F0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.ins-cierre .ins-boton:hover{background:#53BDEB;color:#081936}.ins-boton--azul:hover{background:#081936}}

/* ── /contacto ── */
.ins-contacto-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-top:40px}
.ins-contacto-acciones p a{text-decoration:underline;text-underline-offset:4px}

/* ══════════════ EQUIPO ══════════════ */

/* ── Foto de una persona: 4:5, azul plano; o la placa de marca (monograma al 8% y el puesto) ── */
.ins-foto{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid #d9d7d0;border-radius:8px;background:#F7F5F0}
.ins-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ins-placa{background:#0E2A5C;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#F7F5F0}
.ins-placa__marca{position:absolute;left:50%;top:44%;width:80%;height:auto;transform:translate(-50%,-50%);opacity:.08;color:#F7F5F0}
.ins-placa__puesto{position:relative;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em}

/* ── Home: grilla de logos 3 x 3 ── */

/* ── Home: Antes de Otaviani (la rueda con una tarjeta por empresa) ──
   Son 35 tarjetas: la rueda es más grande y el paso más corto, para que no se pisen ni den la vuelta. */
.ins-antes-link{display:flex;height:100%;color:inherit;text-decoration:none}
.ins-antes-link:focus-visible{outline:3px solid #53BDEB;outline-offset:4px;border-radius:16px}
.ins-rueda[data-radial-cards-marquee-list]{--radius:176em;--step:6.6deg}
@media(min-width:1024px){.ins-rueda[data-radial-cards-marquee-list]{--step:7.3deg}}
.ins-rueda>li{display:flex}
.ins-antes{display:flex;flex-direction:column;width:315px;height:100%;overflow:hidden;border-radius:16px;background:#eeece7;color:#0E2A5C}
@media(min-width:1024px){.ins-antes{width:440px}}
.ins-hito{width:300px;min-height:360px;padding:0;color:#F7F5F0}
@media(min-width:1024px){.ins-hito{width:340px;min-height:400px}}
.ins-antes__medio{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;background:#F7F5F0}
.ins-antes__imagen{display:block;width:100%;height:100%;object-fit:cover}
.ins-antes__logo{max-width:58%;max-height:52%;object-fit:contain}
.ins-antes__nombre{padding:20px;text-align:center;font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.03em}
.ins-antes__pie{padding:18px 20px 22px;font-size:17px;line-height:1.3;letter-spacing:-.01em}

/* ── Home: El equipo, una fila horizontal ── */
.ins-equipo-home{padding-block:var(--section-gap-lg)}
.ins-fila{grid-column:full;overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--page-margin) 24px;scrollbar-width:thin;scrollbar-color:#0E2A5C #eeece7}
.ins-fila__lista{display:flex;gap:16px;list-style:none;margin:0;padding:0;width:max-content}
.ins-persona{flex:0 0 min(70vw,280px);scroll-snap-align:start}
@media(min-width:1024px){.ins-persona{flex-basis:300px}}
.ins-persona a{display:block;color:inherit;text-decoration:none}
.ins-persona__nombre{display:block;margin-top:16px;font-size:clamp(20px,1.7vw,26px);font-weight:600;line-height:1.05;letter-spacing:-.03em}
.ins-persona__puesto{display:block;margin-top:6px;font-size:16px;line-height:1.25;color:#EDEDEA}
.ins-persona a:focus-visible{outline:3px solid #0E2A5C;outline-offset:6px}

/* ── /nosotros#equipo ── */
.ins-equipo{scroll-margin-top:80px}
.h8-page .ins-equipo__bajada{max-width:34ch;margin:-24px 0 56px;font-size:clamp(22px,2.2vw,34px);line-height:1.15;font-weight:600;letter-spacing:-.04em}
.ins-equipo__grid{display:grid;grid-template-columns:1fr;gap:56px 16px;list-style:none;margin:0;padding:0}
@media(min-width:640px){.ins-equipo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.ins-equipo__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ins-tarjeta{display:flex;flex-direction:column;gap:20px;min-width:0;border-radius:12px;overflow:hidden;background:#F7F5F0;color:#0E2A5C;border:1px solid #d9d7d0}
.ins-tarjeta--azul{background:#0E2A5C;color:#F7F5F0;border-color:#0E2A5C}
.ins-tarjeta--celeste{background:#53BDEB;color:#081936;border-color:#53BDEB}
.ins-tarjeta .ins-foto{border:0;border-radius:0;background:transparent}
.ins-tarjeta:focus-visible{outline:3px solid #0E2A5C;outline-offset:6px}
.ins-tarjeta__texto{padding:0 20px}
.ins-tarjeta__texto h3{font-size:clamp(24px,2vw,30px);line-height:1.05;letter-spacing:-.04em;color:inherit}
.h8-page .ins-tarjeta__puesto{margin-top:6px;font-size:17px;line-height:1.25;font-weight:600;color:inherit}
.h8-page .ins-tarjeta__bio{margin-top:12px;font-size:16px;line-height:1.4;max-width:none!important;color:inherit}
.ins-empresas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin:auto 12px 12px;padding:18px 14px;list-style:none;border-radius:8px;background:#F7F5F0;color:#0E2A5C}
.ins-empresa{display:flex;flex-direction:column;gap:6px;min-width:0}
.ins-empresa img{align-self:flex-start;width:auto;max-width:100%;height:26px;object-fit:contain;object-position:left center}
.ins-empresa__nombre{font-size:15px;font-weight:600;line-height:1.15}
.ins-empresa__rol{font-size:13px;line-height:1.25;color:#575e60}

/* ── /casos parte 2: Trayectoria del equipo ── */
.h8-page .ins-tray__bajada{max-width:36ch;margin:-24px 0 56px;font-size:clamp(22px,2.2vw,34px);line-height:1.15;font-weight:600;letter-spacing:-.04em}
.ins-tray__grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;list-style:none;margin:0;padding:0}
@media(min-width:640px){.ins-tray__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.ins-tray__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1440px){.ins-tray__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ins-tray__item{min-width:0}
.ins-trayecto{display:block;overflow:hidden;border:1px solid #d9d7d0;border-radius:12px;background:#eeece7;color:#0E2A5C}
.ins-trayecto>summary{display:block;position:relative;cursor:pointer;list-style:none}
.ins-trayecto>summary::-webkit-details-marker{display:none}
.ins-trayecto>summary:focus-visible{outline:3px solid #0E2A5C;outline-offset:-3px}
.ins-trayecto__medio{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;background:#F7F5F0}
.ins-trayecto__medio img{display:block;width:100%;height:100%;object-fit:cover}
.ins-trayecto__medio img.ins-trayecto__logocolor{width:auto;height:auto;max-width:58%;max-height:52%;object-fit:contain}
.ins-trayecto__sinlogo{padding:16px;text-align:center;font-size:clamp(20px,1.8vw,26px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.ins-trayecto__cab{display:flex;flex-direction:column;gap:6px;padding:16px 52px 18px 16px}
.ins-trayecto__logo{align-self:flex-start;width:auto;max-width:70%;height:22px;margin-bottom:6px;object-fit:contain;object-position:left center}
.ins-trayecto__empresa{font-size:20px;font-weight:600;line-height:1.1;letter-spacing:-.03em}
.ins-trayecto__quien{font-size:14.5px;line-height:1.3}
.ins-trayecto__mas{position:absolute;right:14px;bottom:16px;width:28px;height:28px;border:1px solid #0E2A5C;border-radius:50%}
.ins-trayecto__mas:before,.ins-trayecto__mas:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#0E2A5C;transform:translate(-50%,-50%)}
.ins-trayecto__mas:after{transform:translate(-50%,-50%) rotate(90deg)}
.ins-trayecto[open] .ins-trayecto__mas:after{display:none}
.ins-trayecto__hizo{padding:0 16px 20px;font-size:15px;line-height:1.4}
.h8-page .ins-tray__pie{margin-top:40px;font-size:13px;line-height:1.35;color:#575e60}

/* ── Movimiento: solo con permiso. Con "reducir movimiento" no se mueve nada. ── */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .ins-foto img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .ins-persona a:hover .ins-foto img,.ins-tarjeta:hover .ins-foto img{transform:scale(1.05)}
}
}

/* Crédito de las fotos con licencia CC BY-SA */
.ins-trayecto__medio,.ins-antes__medio{position:relative}
.ins-credito{position:absolute;left:8px;right:8px;bottom:6px;font-size:10px;line-height:1.3;color:#F7F5F0;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:auto}
.ins-credito a{color:inherit;text-decoration:underline}

/* ── Casos del equipo ── */
.case-media--papel{display:flex;align-items:center;justify-content:center;background:#F7F5F0}
.case-media--papel .case-media__logo{position:static;width:auto;height:auto;max-width:56%;max-height:42%;object-fit:contain}
.case-media--papel .case-media__nombre{position:static;font-size:clamp(32px,5vw,72px);font-weight:600;letter-spacing:-.04em;color:#0E2A5C;text-align:center}
.h8-work--papel{background:#F7F5F0;color:#0E2A5C;border:1px solid #d9d7d0}
.h8-work--papel:before{display:none}
.h8-work--papel p{color:#0E2A5C}
.ins-rotulo-lista{display:block;margin-bottom:12px;font-size:clamp(14px,1.2vw,17px);font-weight:600}
.ins-panel--papel{background:#F7F5F0}
.ins-panel--papel:after{display:none!important}
.ins-panel--papel .text-white,.ins-panel--papel .text-white\/50{color:#0E2A5C!important}
[data-horizontal-scroll-panel] .ins-panel--papel .text-white\/50{color:#0E2A5C!important}
.h8-media-hero.ins-hero-papel{background:#F7F5F0;color:#0E2A5C;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;min-height:100svh}
.h8-media-hero.ins-hero-papel:after{display:none}
.h8-media-hero.ins-hero-papel p.ins-rotulo{color:#0E2A5C}
.ins-hero-papel__medio{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:24px;min-height:50svh}
.ins-hero-papel__logo{width:auto;max-width:70%;max-height:160px;object-fit:contain}
.ins-hero-papel__nombre{font-size:clamp(36px,5vw,72px);font-weight:600;letter-spacing:-.04em}
.ins-hero-papel__persona{width:min(320px,70%);height:auto;aspect-ratio:4/5;object-fit:contain}
@media(max-width:767px){.h8-media-hero.ins-hero-papel{grid-template-columns:1fr;align-items:start}.ins-hero-papel__medio{min-height:0}}
.ins-credito-pagina{padding:12px var(--h8-gutter) 0;font-size:12px;color:#575e60}
.ins-credito-pagina a{text-decoration:underline}

/* ── Servicios de la home: foto en cada tarjeta ── */
.ins-pila-foto{flex:1 1 0;min-height:96px;overflow:hidden;border-radius:12px;background:#eeece7}
.ins-pila-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* En mobile la tarjeta es baja (la altura sale de la pantalla): la foto va de fondo, con el texto en papel. */
@media(max-width:1023px){
  /* La imagen va limpia, arriba en 3:2; abajo el número, el título y la bajada sobre el fondo de la tarjeta. */
  .ins-pila-alta>div{justify-content:flex-start!important;gap:20px}
  .ins-pila-alta .ins-pila-foto{order:-1;flex:none;aspect-ratio:3/2;min-height:0;width:100%}
}

/* ── Cómo trabajamos: foto en cada tarjeta ── */
.h9-stack .h9-stack-surface.ins-stack-con-foto{grid-template-columns:1fr 1fr;align-items:stretch}
.ins-stack-foto{grid-column:2;grid-row:1/span 2;display:block;width:100%;height:100%;min-height:200px;object-fit:cover;border-radius:12px}
@media(max-width:767px){.h9-stack .h9-stack-surface.ins-stack-con-foto{grid-template-columns:1fr;grid-auto-rows:auto}.ins-stack-foto{grid-column:1;grid-row:auto;height:200px;min-height:0}}

/* ── Página de caso del equipo ── */
.h8-media-hero.ins-hero-caso{align-items:flex-end;padding:140px var(--h8-gutter) 56px}
.ins-hero-caso__texto{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;max-width:100%}
.ins-hero-caso__logo{display:inline-flex;align-items:center;justify-content:center;height:64px;max-width:min(240px,70vw);padding:12px 20px;margin-bottom:28px;border-radius:10px;background:#F7F5F0}
.ins-hero-caso__logo img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain}
.ins-hero-caso__texto h1{overflow-wrap:anywhere}
.ins-caso-foto{margin-top:0}
.h8-image.ins-caso-foto{aspect-ratio:2.2}
@media(max-width:767px){.h8-image.ins-caso-foto{aspect-ratio:4/3}.h8-media-hero.ins-hero-caso{padding-top:120px;padding-bottom:40px}}
.ins-creditos{margin:16px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.4;color:#575e60}
.ins-creditos li+li{margin-top:6px}
.ins-fuente{margin-top:20px!important}

/* ── Fin de pagina: el pie termina en azul profundo ──
   El pie sube 25% antes de entrar (parallax); el hueco que dejaba mostraba
   el fondo de la pagina, que a mitad del cambio de tema se veia gris. */
.footer-wrap { background-color: #081936; }
@media (max-width: 767px) {
  .footer-wrap [data-footer-parallax-inner] { transform: none !important; }
  .footer-wrap__dark { display: none; }
}

/* ── Mobile: ninguna seccion fija con scroll (debajo de 768) ──
   "Nuestro trabajo" y "Dónde trabajó el equipo" dejan de pegarse y de
   mover el contenido con el scroll vertical: son filas horizontales
   nativas con scroll-snap. motion.js no las engancha en este ancho. */
@media (max-width:767px){
  [data-horizontal-scroll-section]{display:block!important;height:auto!important;padding-top:24px!important;padding-bottom:40px}
  [data-horizontal-scroll-wrap]{display:flex!important;flex-direction:row!important;flex:none!important;gap:12px;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--page-margin);scroll-padding:0 var(--page-margin);overscroll-behavior-x:contain}
  [data-horizontal-scroll-wrap]::-webkit-scrollbar{display:none}
  [data-horizontal-scroll-panel]{flex:0 0 84%!important;width:84%!important;height:min(72svh,520px)!important;min-height:0!important;scroll-snap-align:center;transform:none!important}
  [data-horizontal-scroll-panel]>.size-full{padding:0!important}

  .radial-cards-marquee{min-height:0;padding-top:24px;padding-bottom:40px;overflow:visible}
  .radial-cards-marquee:after{display:none}
  .radial-cards-marquee__cluster{gap:24px}
  .radial-cards-marquee__collection{align-self:stretch;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--page-margin);scroll-padding:0 var(--page-margin);overscroll-behavior-x:contain}
  .radial-cards-marquee__collection::-webkit-scrollbar{display:none}
  .radial-cards-marquee__collection>div{width:max-content}
  [data-radial-cards-marquee-list]{display:flex!important;gap:12px;transform:none!important}
  [data-radial-cards-marquee-list]>*{transform:none!important;flex:0 0 auto;scroll-snap-align:center}
  .ins-antes{width:min(78vw,340px)}
}


/* ── Home: logos en dos grupos rotulados ──
   "Clientes." (fila fija) y "Dónde trabajó el equipo." (grilla que rota). Todo a una tinta #0E2A5C,
   sin fondo en las celdas. Cada logo trae --k (tamaño óptico: un cuadrado o circular queda ~1,4 veces
   más alto que uno apaisado) y --ar (proporción); la altura base es --logo-h. */
.ins-logos{--logo-h:34px;padding-block:var(--section-gap-lg);row-gap:clamp(56px,8vw,112px)}
@media(min-width:768px){.ins-logos{--logo-h:44px}}
.ins-logos__rotulo{margin:0 0 clamp(20px,2.4vw,36px);font-size:clamp(28px,3vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.035em;color:#0E2A5C}
.ins-logos__fila,.ins-logos__grid{display:grid;list-style:none;margin:0;padding:0}
.ins-logos__fila{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px;--logo-h:42px}
.ins-logos__cliente{display:flex;align-items:center;justify-content:center;height:clamp(96px,28vw,120px)}
@media(min-width:768px){.ins-logos__fila{grid-template-columns:repeat(6,minmax(0,1fr));--logo-h:56px}.ins-logos__cliente{height:150px}}
.ins-logos__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:768px){.ins-logos__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ins-logos__celda{position:relative;aspect-ratio:1/1}
@media(min-width:768px){.ins-logos__celda{aspect-ratio:4/3}}
.ins-logos__enlace{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#0E2A5C}
.ins-logos__celda .ins-logos__enlace{position:absolute;inset:0}
.ins-logos__enlace:focus-visible{outline:3px solid #0E2A5C;outline-offset:-3px}
.ins-logos__marco{position:absolute;inset:0;display:block;overflow:hidden;container-type:size}
.ins-logos__logo{display:block;width:min(calc(var(--logo-h) * var(--k,1) * var(--ar,3)),82%);height:calc(var(--logo-h) * var(--k,1));object-fit:contain}
.ins-logos__marco .ins-logos__logo{position:absolute;left:50%;top:50%;translate:-50% -50%}
@media(prefers-reduced-motion:no-preference){.ins-logos__logo{transition:opacity 1.4s ease}}
.ins-logos__logo.is-entra{opacity:0}
.ins-logos__logo.is-sale{opacity:0}

/* Retratos normalizados del sistema (3-MARCA/SISTEMA-2026/retratos): ya traen el fondo papel; la tarjeta no agrega nada. */
.ins-foto--norm{border:0;background:transparent}

/* /casos: dos bloques rotulados */
.h8-work-list .ins-bloque-rotulo{margin:clamp(24px,4vw,56px) 0 8px;font-size:clamp(32px,4vw,64px);font-weight:600;line-height:1.02;letter-spacing:-.04em;color:#0E2A5C}
.h8-work-list+.h8-work-list{margin-top:clamp(40px,6vw,96px)}

/* Recortes dirigidos: el recorte ya viene en la proporción de la ranura, así que la ranura lo muestra sin recortarlo de nuevo. */
@media(max-width:767px){
  .h8-work{min-height:0;aspect-ratio:4/5}
  .h8-image,.h8-image.ins-caso-foto{aspect-ratio:4/3}
  [data-horizontal-scroll-panel]{height:auto!important;aspect-ratio:4/5}
}
.h8-image picture{display:block;width:100%;height:100%}
.ins-antes__medio picture{display:block;width:100%;height:100%}.ins-antes__medio picture img{display:block;width:100%;height:100%;object-fit:cover}

/* Texto sobre foto: degradé de azul profundo #081936, de 0 a 60 % de opacidad, nunca un velo gris ni negro.
   Con 60 % el texto blanco llega a 4,8:1 aun sobre una foto blanca (AA). */
.h8-work:before{background:linear-gradient(0deg,rgba(8,25,54,.6) 0%,rgba(8,25,54,.6) 38%,rgba(8,25,54,0) 100%)}
.h8-media-hero:after{background:linear-gradient(0deg,rgba(8,25,54,.6) 0%,rgba(8,25,54,.6) 45%,rgba(8,25,54,0) 100%),linear-gradient(180deg,rgba(8,25,54,.45) 0%,rgba(8,25,54,0) 22%)}
[data-horizontal-scroll-panel] article:after,#sp-casos article:after{background:linear-gradient(0deg,rgba(8,25,54,.6) 0%,rgba(8,25,54,.6) 45%,rgba(8,25,54,0) 100%)}

/* Fotos de Cómo trabajamos (3:2 y 4:3): en mobile la foto conserva 3:2, sin recortarse a una franja. */
@media(max-width:767px){.h9-stack .h9-stack-surface.ins-stack-con-foto .ins-stack-foto{height:auto;min-height:0;aspect-ratio:3/2}}

/* Mobile: los respiros entre secciones de la home no dejan pantallas medio vacías. */
@media(max-width:767px){
  #home-page>section.layout-grid.py-48{padding-block:56px}
  #home-page>.image-trail-section{row-gap:32px!important;padding-block:56px!important}
  #home-page>.ins-logos{padding-block:56px;row-gap:56px}
}

/* Crédito de la foto: pie de la foto en la página de cada caso y línea chica en la portada. */
.ins-figura{margin:0}
.ins-pie-foto{margin:10px var(--h8-gutter) 0;font-size:13px;line-height:1.35;color:#575e60}
.ins-pie-hero{position:absolute;right:var(--h8-gutter);bottom:14px;max-width:min(60ch,60vw);text-align:right;font-size:12px;line-height:1.3;color:#F7F5F0}
@media(max-width:767px){.ins-pie-hero{left:var(--h8-gutter);right:auto;text-align:left;max-width:none;bottom:10px}}

/* Crédito de la foto, dentro de la tarjeta de "Dónde trabajó el equipo": una línea de 11 px debajo del texto. */
.ins-antes__credito{display:block;padding:0 20px 14px;margin-top:-8px;font-size:11px;line-height:1.3;color:#4B5872}

/* Una sola grilla de logos, con un pie chico debajo. */
.ins-logos__pie{margin:20px 0 0;font-size:14px;line-height:1.3;color:#4B5872}
/* Dentro de cada caso del equipo: quién trabajó con la empresa, arriba y bien visible. */
.ins-trabajo-con{display:flex;align-items:center;gap:20px;margin:32px var(--h8-gutter);padding:16px;border-radius:12px;background:#F7F5F0;border:1px solid #d9d7d0;color:#0E2A5C}
.ins-trabajo-con__foto{flex:none;display:block;width:96px;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.ins-trabajo-con__texto{margin:0;font-size:clamp(20px,2.4vw,32px);line-height:1.15;font-weight:600;letter-spacing:-.03em}
@media(max-width:767px){.ins-trabajo-con{gap:14px}.ins-trabajo-con__foto{width:72px}}

/* Titulares grandes: salto de línea y tamaño con clamp, sin nowrap ni recorte. */
.subpage.h8-page .h8-index-hero h1{white-space:normal!important;text-wrap:balance;overflow-wrap:break-word;max-width:100%}
#sp-casos.h8-page .h8-index-hero h1{font-size:clamp(48px,9.5vw,170px)!important;line-height:.98!important}
@media(max-width:767px){#sp-casos.h8-page .h8-index-hero h1{font-size:15vw!important}}

/* Servicios con cajas: el margen del componente es el de la página. */
.sc{--ot-margen:var(--page-margin,clamp(20px,5vw,64px))}

/* Cómo trabajamos: las ilustraciones de cajas ocupan el lugar de la foto. */
.h9-stack .h9-stack-surface.ins-stack-con-foto .pc{grid-column:2;grid-row:1/span 3;align-self:center;width:100%}
.h9-stack .h9-stack-surface.ins-stack-con-foto .ins-stack-texto{grid-column:1;margin:0;max-width:44ch;font-size:clamp(16px,1.3vw,20px);line-height:1.4;opacity:.85}
@media(max-width:767px){.h9-stack .h9-stack-surface.ins-stack-con-foto .pc{grid-column:1;grid-row:auto}.h9-stack .h9-stack-surface.ins-stack-con-foto .ins-stack-texto{grid-column:1}}
.metodo-paso__cajas{max-width:300px;width:100%}
.metodo-paso__cajas .pc{width:100%}

/* /nosotros: números y banda oscura (COPY-WEB-2026-10-02.md, sección 5). */
.ins-numeros{padding:clamp(40px,6vw,96px) var(--h8-gutter)}
.ins-numeros ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.ins-numeros strong{display:block;font-size:clamp(44px,8vw,128px);line-height:.95;letter-spacing:-.05em;font-weight:600;color:#0E2A5C}
.ins-numeros span{display:block;margin-top:10px;font-size:clamp(15px,1.4vw,22px);line-height:1.2;color:#0E2A5C}
@media(max-width:767px){.ins-numeros ul{grid-template-columns:1fr}}
.ins-banda{background:#081936;color:#F7F5F0;padding:clamp(56px,8vw,128px) var(--h8-gutter);display:grid;gap:clamp(16px,2vw,28px)}
.ins-banda p{margin:0;font-size:clamp(32px,6vw,104px);line-height:1;letter-spacing:-.045em;font-weight:600;text-wrap:balance;max-width:20ch}
.ins-pie-marcas{margin:24px var(--h8-gutter) 0;font-size:13px;line-height:1.35;color:#4B5872}
.landing-hero__extra{margin-top:16px;max-width:60ch}
.talento-intro{display:grid;gap:16px}

/* Historia: tarjetas más grandes. El año en grande, el mes debajo al tamaño de un h3 y el cuerpo a 22 px o más, sin cortarse. */
.ins-hito{width:min(80vw,340px);min-height:420px;padding:28px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;box-sizing:border-box}
@media(min-width:1024px){.ins-hito{width:440px;min-height:500px;padding:36px 34px}}
.ins-hito__ano{margin:0;font-size:clamp(56px,6vw,96px);line-height:1.4;letter-spacing:-.05em;font-weight:600}
.ins-hito__mes{margin:4px 0 0;font-size:clamp(24px,2.2vw,32px);line-height:1.3;letter-spacing:-.03em;font-weight:600;color:#53BDEB;white-space:nowrap}
.ins-hito__texto{margin:0;font-size:clamp(22px,1.9vw,28px);line-height:1.3;letter-spacing:-.02em;font-weight:600;text-wrap:balance;overflow-wrap:break-word}
@media(min-width:1024px){.ins-rueda[data-radial-cards-marquee-list]{--step:9.6deg}}

/* Retratos del equipo en la banda oscura: ocho, todos del mismo alto, sin texto encima. */
.ins-banda__retratos{list-style:none;margin:clamp(24px,3vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,1vw,14px)}
.ins-banda__retratos li{margin:0}
.ins-banda__retratos img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
@media(max-width:767px){.ins-banda__retratos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1023px){.ins-rueda[data-radial-cards-marquee-list]{--step:7.6deg}}