/* =========================================================
   PERIFERIA IT GROUP · style.css (Home)
   Generado desde 03-home.html: bloques <style> + estilos en línea
   ========================================================= */


.global .flag-img {
      width: 20px;
      height: 14px;
      object-fit: contain;
      border-radius: 3px;
      flex: none;
    }

:root {
      --black: #000;
      --bright: #6dfd8c;
      --dark: #15601d;
      --teal: #063635;
      --light: #ccffd6;
      --muted: #bfe8c0;
      --ink: #212121;
      --space-2: 12px;
      --space-4: 20px;
      --space-5: 26px;
      --space-6: 34px
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: #fff;
      color: var(--ink);
      font-family: Montserrat, sans-serif
    }

    .page {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      background: #fff
    }

    header {
      height: 74px;
      padding: 0 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--black);
      color: #fff
    }

    header strong {
      font: 800 20px Outfit, sans-serif
    }

    header small {
      color: var(--bright);
      font-size: 9px;
      letter-spacing: .16em
    }

    .brand {
      display: flex;
      align-items: center;
      text-decoration: none;
      line-height: 0;
      flex: none
    }

    .brand img {
      height: 38px;
      width: auto;
      display: block
    }

    nav {
      display: flex;
      gap: 28px;
      font-size: 1em;
      font-weight: 600
    }

    header>nav:not(.mobile-menu) a {
      color: #fff;
      text-decoration: none;
      padding: 7px 10px;
      border-radius: 7px;
      transition: background .16s, color .16s
    }

    header>nav:not(.mobile-menu) a:hover,
    header>nav:not(.mobile-menu) a:focus-visible {
      background: var(--bright);
      color: #111;
      outline: none
    }

    /* ---------- Dropdown "Soluciones" en el header (mega-menú oscuro) ---------- */
    .nav-dropdown{position:relative}
    .nav-dropdown-trigger{
      background:none !important;border:0;cursor:pointer;
      color:#fff !important;font:inherit;font-size:1em;font-weight:600;
      padding:7px 10px !important;border-radius:7px !important;
      display:inline-flex;align-items:center;gap:5px;
      transition:background .16s,color .16s;
    }
    .nav-dropdown-trigger:hover,.nav-dropdown-trigger:focus-visible{background:var(--bright) !important;color:#111 !important;outline:none}
    .nav-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;flex:none}
    .nav-dropdown:hover .nav-caret,.nav-dropdown-trigger[aria-expanded="true"] .nav-caret{transform:rotate(-135deg) translateY(1px)}
    .nav-dropdown-menu{
      display:grid !important;
      grid-template-columns:repeat(2,1fr);
      gap:6px 24px;
      position:fixed;top:74px;left:0;right:0;width:100%;margin:0;
      background:#0a0a0a !important;
      border-top:2px solid var(--bright);
      box-shadow:0 24px 48px rgba(0,0,0,.5);
      padding:28px 64px;
      opacity:0;visibility:hidden;
      transform:translateY(-8px);
      transition:opacity .22s ease,transform .22s ease,visibility .22s;
      z-index:200;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-menu:focus-within,
    .nav-dropdown-trigger[aria-expanded="true"]+.nav-dropdown-menu{
      opacity:1 !important;visibility:visible !important;transform:none !important;
    }
    .nav-dropdown-menu a{
      display:block !important;
      padding:14px 16px !important;
      border-radius:10px;
      color:#fff !important;
      text-decoration:none !important;
      font:200 1.5em Outfit,sans-serif !important;
      background:transparent !important;
      border:0 !important;
    }
    .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{
      background:rgba(109,253,140,.14) !important;
      color:var(--bright) !important;
      outline:none;
    }
    @media(max-width:700px){
      .nav-dropdown{display:none}
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      background: #fff;
      color: #111;
      outline: 2px solid var(--bright);
      outline-offset: 2px
    }

    button,
    .button {
      border: 0;
      border-radius: 999px;
      padding: 11px 18px;
      font: 700 14px Montserrat, sans-serif;
      cursor: pointer
    }

    .button {
      display: inline-block;
      text-decoration: none
    }

    .button--bright {
      background: var(--bright);
      color: #111;
      transition: background .2s ease, transform .2s ease;
    }

    .button--bright:hover,
    .button--bright:focus-visible {
      background: #fff;
      transform: translateY(-2px);
      outline: none;
    }

    .button--dark {
      background: var(--dark);
      color: #fff;
      transition: background .2s ease, transform .2s ease;
    }

    .button--dark:hover,
    .button--dark:focus-visible {
      background: var(--teal);
      transform: translateY(-2px);
      outline: none;
    }

    .eyebrow {
      font: 700 1em Outfit, sans-serif;
      letter-spacing: .15em;
      color: var(--dark);
      text-transform: uppercase
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: Outfit, sans-serif;
      font-weight: 800
    }

    p {
      font-family: Montserrat, sans-serif
    }

    section {
      padding: 70px 10%;
      width: 100%;
      box-sizing: border-box;
      max-width: 100%
    }

    .hero {
      background: #000 url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/banner-web-periferia2026.webp') center/cover no-repeat;
      color: #fff;
      padding: 94px 64px 78px
    }

    .hero-copy {
      max-width: 730px;
      background: rgba(0, 0, 0, .24);
      padding: 24px 28px;
      border-radius: 18px
    }

    .hero .eyebrow {
      color: var(--bright);
      font-size: 15px
    }

    .hero h1 {
      font-size: 56px;
      line-height: 1.07;
      margin: 20px 0
    }

    .hero h1 span {
      color: var(--bright)
    }

    .hero p {
      max-width: 570px;
      font-size: 18px;
      line-height: 1.45;
      color: #e2fbe8;
      margin: 0 0 30px
    }

    .results {
      position: relative;
      overflow: hidden;
      background: var(--teal);
      color: #fff;
      padding: 28px 10%;
      display: grid;
      grid-template-columns: 1.45fr repeat(3, 1fr);
      gap: 18px;
    }

    .results>*:not(.flow-field) {
      position: relative;
      z-index: 1
    }

    .results strong {
      font: 600 1.5em Outfit, sans-serif
    }

    .results b {
      display: block;
      font: 800 2.3em Outfit, sans-serif;
      color: var(--bright)
    }

    .results span {
      font-size: 16px;
      color: #e2fbe8
    }

    .flow-field {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none
    }

    .flow-field svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .flow-field .flow-line {
      fill: none;
      stroke: rgba(255, 255, 255, .14);
      stroke-width: 1.4
    }

    .flow-field .flow-pulse {
      fill: none;
      stroke: var(--bright);
      stroke-width: 2.2;
      stroke-linecap: round;
      opacity: .8
    }

    .flow-field .node {
      fill: var(--bright);
      opacity: .5
    }

    .flow-field .p1 {
      stroke-dasharray: 10 340;
      animation: flow-run 4.6s linear infinite
    }

    .flow-field .p2 {
      stroke-dasharray: 8 300;
      animation: flow-run 5.3s linear infinite;
      animation-delay: .6s
    }

    .flow-field .p3 {
      stroke-dasharray: 9 320;
      animation: flow-run 6.1s linear infinite;
      animation-delay: 1.4s
    }

    .flow-field .p4 {
      stroke-dasharray: 7 280;
      animation: flow-run 4.9s linear infinite;
      animation-delay: .3s
    }

    .flow-field .p5 {
      stroke-dasharray: 11 360;
      animation: flow-run 5.7s linear infinite;
      animation-delay: 1.9s
    }

    @keyframes flow-run {
      to {
        stroke-dashoffset: -1700
      }
    }

    .need-selector {
      max-width: 900px;
      margin: auto
    }

    .need-selector h2 {
      margin: 0;
      font-size: 2.5em
    }

    .need-selector>p {
      margin: 12px 0 20px;
      color: #555;
      font-size: 15px
    }

    .need-list {
      display: grid;
      gap: 10px
    }

    .need-btn {
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 11px 18px;
      border: 1px solid #dceadd;
      border-radius: 14px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      transition: .2s
    }

    .need-btn:hover,
    .need-btn.is-active {
      border-color: var(--dark);
      box-shadow: 0 5px 20px rgba(21, 96, 29, .10);
      transform: translateX(3px)
    }

    .need-btn.is-active {
      background: #f5fef7
    }

    .letter {
      width: 30px;
      height: 30px;
      flex: none;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--dark);
      color: #fff;
      font: 800 13px Outfit, sans-serif
    }

    .icon {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: var(--dark);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .label {
      flex: 1;
      font: 600 15px Montserrat, sans-serif
    }

    .need-panel {
      margin-top: 14px;
      padding: 18px 24px;
      border: 1px solid var(--muted);
      border-radius: 16px;
      background: #eafcee
    }

    .need-panel .tag {
      color: var(--dark);
      font: 700 11px Montserrat, sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .need-panel p {
      margin: 8px 0 12px;
      font-size: 14px;
      line-height: 1.55
    }

    .btn-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--dark);
      text-decoration: none;
      font: 700 14px Outfit, sans-serif
    }

    .circle-arrow {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--dark);
      color: #fff
    }

    .work {
      display: flex;
      gap: 60px;
      align-items: center;
      background: #ccffd6
    }

    .work h2 {
      font-size: 2.5em;
      line-height: 1.09;
      margin: 12px 0
    }

    .work p {
      font-size: 16px;
      line-height: 1.69;
      max-width: 520px
    }

    .work img {
      width: 100%;
      max-width: 350px;
      height: 234px;
      object-fit: contain;
      border-radius: 21px
    }

    .value {
      padding-bottom: 60px
    }

    .value h2 {
      font-size: 2.5em;
      margin: 12px 0 7px
    }

    .value>p {
      max-width: 650px;
      line-height: 1.6;
      margin: 0;
      color: #454545
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      margin-top: 24px
    }

    .capa-card {
      min-width: 0;
      height: 260px;
      border: 1.5px solid var(--muted);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      color: #fff;
      background-size: cover;
      background-position: center
    }

    .capa-card:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .76), rgba(0, 0, 0, .08));
      transition: .2s
    }

    .capa-card:hover:before {
      background: rgba(0, 0, 0, .74);
      backdrop-filter: blur(5px)
    }

    .capa-front,
    .capa-hover {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      transition: .2s
    }

    .capa-front {
      align-items: flex-end;
      justify-content: center;
      padding: 20px;
      text-align: center;
      font: 800 18px Outfit, sans-serif
    }

    .capa-hover {
      opacity: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 22px;
      text-align: center
    }

    .capa-hover p {
      font-size: 1em;
      line-height: 1.5;
      margin: 0
    }

    .capa-cta {
      display: inline-block;
      margin-top: 16px;
      padding: 9px 18px;
      border-radius: 999px;
      background: var(--bright);
      color: #111;
      font: 700 13px Outfit, sans-serif;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .capa-cta:hover,
    .capa-cta:focus-visible {
      background: #fff;
      transform: translateY(-2px);
      outline: none;
    }

    .capa-card:hover .capa-front {
      opacity: 0
    }

    .capa-card:hover .capa-hover {
      opacity: 1
    }

    .clients {
      padding-bottom: 68px;
      background: var(--teal);
      color: #fff
    }

    .clients .eyebrow {
      color: var(--bright)
    }

    .clients h2 {
      font-size: 2.5em;
      margin: 12px 0
    }

    .clients>p {
      margin: 0 0 22px;
      font-size: 1em;
      line-height: 1.6;
      max-width: 620px;
      color: #fff
    }

    .pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 18px 0 26px
    }

    .pill {
      border: 1px solid var(--muted);
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 1em;
      background: #fff;
      cursor: pointer;
      transition: border-color .2s ease, background .2s ease;
    }

    .pill:hover {
      border-color: var(--dark);
      background: var(--light);
    }

    .pill--active {
      background: var(--dark);
      border-color: var(--dark);
      color: #fff;
      font-weight: 700
    }

    .pill-count {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: var(--muted);
      color: var(--dark);
    }

    .pill--active .pill-count {
      background: rgba(255,255,255,.28);
      color: var(--teal);
    }

    .clients-carousel {
      display: grid;
      gap: 12px;
      overflow: hidden
    }

    .client-track {
      overflow: hidden;
      padding: 3px 0
    }

    .client-rail {
      display: flex;
      width: max-content;
      gap: 12px;
      animation: client-scroll 36s linear infinite
    }

    .client-track:nth-child(2) .client-rail {
      animation-direction: reverse;
      animation-duration: 42s
    }

    .client-track:nth-child(3) .client-rail {
      animation-duration: 48s
    }

    .clients-carousel:hover .client-rail {
      animation-play-state: paused
    }

    .logo-card {
      width: 180px;
      height: 96px;
      flex: none;
      padding: 6px;
      background: #fff;
      border: 1px solid #dceadd;
      border-radius: 14px;
      display: grid;
      place-items: center
    }

    .logo-card img {
      max-width: 100%;
      max-height: 70px;
      width: auto;
      height: auto;
      object-fit: contain
    }

    .logo-card span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0)
    }

    @keyframes client-scroll {
      to {
        transform: translateX(calc(-50% - 6px))
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .client-rail {
        animation: none
      }
    }

    .case {
      background: var(--light);
      display: flex;
      justify-content: space-between;
      gap: 34px;
      align-items: center;
      flex-wrap: wrap
    }

    .case>div:first-child {
      flex: 1;
      min-width: 280px
    }

    .case h2 {
      font-size: 2.5em;
      margin: 15px 0 8px
    }

    .case-success {
      background: #063635;
      border-radius: 15px;
      padding: 24px 28px;
      max-width: 370px;
      box-shadow: 0 4px 24px #15601d18;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: .25s cubic-bezier(.7, .2, .25, 1);
      will-change: transform, box-shadow
    }

    .case-success:hover {
      box-shadow: 0 8px 36px #15601d34;
      transform: translateY(-4px) scale(1.035)
    }

    .case-success,
    .case-success .case-chip,
    .case-success .case-title,
    .case-success .case-desc {
      color: #fff
    }

    .case-success .case-chip {
      background: #6dfd8c;
      color: #063635
    }

    .case-success .case-title {
      color: #fff
    }

    .case-success .case-desc {
      color: #e1ffe9
    }

    .case-success .case-metrics b {
      color: #6dfd8c
    }

    .case-success .case-metrics span {
      color: #bfe8c0
    }

    .case-chip {
      align-self: flex-start;
      padding: 4px 18px 4px 14px;
      background: #bfe8c0;
      font: 800 13px Montserrat, sans-serif;
      border-radius: 15px;
      margin-bottom: 5px;
      color: #15601d;
      letter-spacing: .02em
    }

    .case-sub {
      font: 600 12px Montserrat, sans-serif;
      color: #406c52
    }

    .case-title {
      font: 800 17px/1.22 Outfit, sans-serif;
      margin: 3px 0 0 0;
      color: #212121
    }

    .case-desc {
      font: 14px/1.45 Montserrat, sans-serif;
      color: #363636;
      margin-bottom: 2px
    }

    .case-dots hr {
      border: none;
      border-top: 1px dashed #86d7a9;
      margin: 10px 0 9px
    }

    .case-metrics {
      display: flex;
      gap: 28px;
      margin-top: 8px
    }

    .case-metrics b {
      font: 800 28px Outfit, sans-serif;
      color: #15601d;
      display: block
    }

    .case-metrics span {
      font: 700 11px Montserrat, sans-serif;
      color: #1d5930;
      letter-spacing: .01em;
      display: block;
      margin-top: 2px
    }

    .case-success {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center
    }

    .global {
      display: flex;
      gap: 50px;
      align-items: center;
      justify-content: space-between
    }

    .global img {
      width: 100%;
      max-width: 380px;
      height: 260px;
      object-fit: contain;
      border-radius: 21px;
      flex: none
    }

    .global h2 {
      font-size: 2.5em;
      line-height: 1.1;
      margin: 13px 0
    }

    .country-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 30px;
      margin: 22px 0
    }

    .country-list span {
      padding: 10px 0;
      border-bottom: 1px solid #dceadd;
      font-size: 1.5em
    }

    .partners {
      background: #f5fef7
    }

    .partners h2 {
      font-size: 2.5em;
      margin: 12px 0
    }

    .partner-carousel {
      overflow: hidden;
      margin-top: 24px;
      padding: 4px 0
    }

    .partner-grid {
      display: flex;
      width: max-content;
      gap: 14px;
      animation: partner-scroll 28s linear infinite
    }

    .partner-carousel:hover .partner-grid {
      animation-play-state: paused
    }

    .partner-grid div {
      width: 176px;
      height: 88px;
      flex: none;
      background: #fff;
      border-radius: 16px;
      display: grid;
      place-items: center;
      padding: 14px
    }

    .partner-grid img {
      display: block;
      max-width: 100%;
      max-height: 52px;
      width: auto;
      height: auto;
      object-fit: contain
    }

    @keyframes partner-scroll {
      to {
        transform: translateX(calc(-50% - 7px))
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .partner-grid {
        animation: none
      }
    }

    .perifuturo {
      background: var(--dark) url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/imagen-perifuturo.webp') center/cover no-repeat;
      color: #fff;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .perifuturo .eyebrow {
      color: var(--teal);
    }

    .perifuturo h2 {
      font-size: 2.5em;
      margin: 12px 0
    }

    .perifuturo .button--bright {
      align-self: flex-start
    }

    .certs {
      text-align: center;
      padding: 58px 10%
    }

    .certs h2 {
      font-size: 2.5em;
      margin: 12px 0
    }

    .cert-grid {
      display: flex;
      justify-content: center;
      gap: 18px
    }

    .cert-grid div {
      width: 112px;
      height: 90px;
      border: 1px solid #dceadd;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font: 800 15px Outfit, sans-serif
    }

    .cert-grid img {
      max-width: 92px;
      max-height: 72px;
      width: auto;
      height: auto;
      object-fit: contain
    }

    .contact-section {
      position: relative;
      overflow: hidden;
      background: #000;
      color: #fff
    }

    .contact-section .wrap {
      position: relative;
      z-index: 1
    }


    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      position: relative;
      z-index: 1;
    }

    .contact-copy .eyebrow.on-dark {
      color: var(--bright)
    }

    .contact-section h2 {
      font-size: 2.5em;
      line-height: 1.15;
      margin: 13px 0
    }

    .contact-copy .lead {
      line-height: 1.7;
      color: #d7e0d7;
      font-size: 16px;
      margin: 0 0 26px
    }
.callout {
    background: #fff;
    border: 1px solid #bfe8c0;
    border-left: 4px solid #15601d;
    border-radius: 14px;
}
    .callout.on-dark {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .06);
      border-left-color: #6dfd8c;
      border-radius: 14px;
      padding: 18px 22px
    }

    .callout.on-dark p {
      margin: 0;
      font-size: 1em;
      line-height: 1.65;
      color: #d7e0d7
    }

    .callout.on-dark strong {
      color: #6dfd8c
    }

    .contact-alt {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .contact-alt .icon-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(109, 253, 140, .14);
      color: var(--bright);
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 18px;
      flex: none
    }

    .contact-alt strong {
      display: block;
      color: #fff;
      font-size: 1em;
    }

    .contact-alt span {
      color: #b7ffd1;
      font-size:1em;
    }

    .form {
      background: #fff;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form label {
      display: block;
      font: 700 14px Montserrat, sans-serif;
      color: #000000;
      margin-bottom: 6px;
    }

    .form input,
    .form select,
    .form textarea {
      width: 100%;
      background: #fff;
      border: 1px solid #15601d;
      border-radius: 8px;
      padding: 12px;
      color: #000000;
      font: 14px Montserrat, sans-serif;
    }

    .form-note {
      margin: 0;
      font-size: 12px;
      color: #000000;
      text-align: center;
    }




    .form-fields {
      display: grid;
      gap: 14px
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }





    .form textarea {
      resize: vertical
    }

    .form .btn {
      border: 0;
      border-radius: 999px;
      padding: 14px 18px;
      font: 700 15px Montserrat, sans-serif;
      cursor: pointer
    }

    .form .btn-primary {
      background: var(--bright);
      color: #111
    }

    .form .btn-block {
      width: 100%
    }

    .form button:disabled {
      opacity: .6;
      cursor: not-allowed
    }



    .form-success {
      background: rgba(109, 253, 140, .14);
      border: 1px solid var(--bright);
      color: #eafff0;
      padding: 14px;
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.5
    }

    .form-error {
      background: rgba(255, 90, 90, .14);
      border: 1px solid #ff5a5a;
      color: #ffe3e3;
      padding: 14px;
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.5
    }

    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s ease, transform .6s ease
    }

    .reveal.is-visible {
      opacity: 1;
      transform: none
    }

    /* ---------- Entrada escalonada para grids de tarjetas ---------- */
    .reveal-stagger>* {
      opacity: 0;
      transform: translateY(22px) scale(.98);
      transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
    }
    .reveal-stagger.is-visible>* {
      opacity: 1;
      transform: none;
    }
    .reveal-stagger.is-visible>*:nth-child(1){transition-delay:.05s}
    .reveal-stagger.is-visible>*:nth-child(2){transition-delay:.15s}
    .reveal-stagger.is-visible>*:nth-child(3){transition-delay:.25s}
    .reveal-stagger.is-visible>*:nth-child(4){transition-delay:.35s}
    .reveal-stagger.is-visible>*:nth-child(5){transition-delay:.45s}
    .reveal-stagger.is-visible>*:nth-child(6){transition-delay:.55s}

    /* ---------- Hover moderno para tarjetas ---------- */
    .pillar-card,
    .problem-card,
    .case-card,
    .crosssell-card {
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      will-change: transform;
    }
    .pillar-card:hover,
    .problem-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 34px rgba(21,96,29,.16);
    }
    .case-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 34px rgba(21,96,29,.16);
    }
    .crosssell-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(21,96,29,.14);
    }
    .pillar-card .pillar-num,
    .process-step .pillar-num {
      transition: transform .3s ease, background .3s ease;
    }
    .pillar-card:hover .pillar-num,
    .process-step:hover .pillar-num {
      transform: scale(1.12) rotate(-6deg);
      background: var(--teal);
    }

    footer {
      background: #000;
      color: var(--bright);
      border-top: 2px solid #191919
    }

    footer a {
      color: #b7ffd1;
      text-decoration: none
    }

    footer a:hover {
      color: var(--bright)
    }

    .footer-main {
      display: flex;
      max-width: 1180px;
      margin: auto;
      gap: 70px;
      align-items: flex-start;
      padding: 28px 30px 24px
    }

    .footer-main p {
      font-size: 13px;
      color: #b7ffd1;
      line-height: 1.45;
      max-width: 250px
    }

    .footer-links {
      flex: 1;
      display: flex;
      gap: 46px;
      justify-content: flex-end
    }

    .footer-links div div {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 13px
    }

    .footer-links strong {
      display: block;
      margin-bottom: 8px;
      font-size: 13px;
      letter-spacing: .05em
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      max-width: 1190px;
      margin: auto;
      padding: 12px 30px;
      font-size: 13px;
      color: #b7ffd1;
      border-top: 1px solid #232323
    }

    @media(max-width:1000px) {

      header,
      section,
      .hero,
      .results {
        padding-left: 28px;
        padding-right: 28px
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .work,
      .case {
        gap: 30px
      }

      .case-proof {
        max-width: none
      }

      .contact-grid {
        grid-template-columns: 1fr
      }

      .footer-main {
        gap: 30px
      }

      .footer-links {
        gap: 20px
      }
    }

    @media(max-width:620px) {
      header {
        padding: 0 20px
      }

      header nav {
        display: none
      }

      header button {
        padding: 9px 12px;
        font-size: 11px
      }

      section,
      .hero,
      .results {
        padding: 48px 20px
      }

      .hero h1 {
        font-size: 40px
      }

      .results {
        grid-template-columns: 1fr 1fr
      }

      .results strong {
        grid-column: 1/-1
      }

      .work,
      .case,
      .global,
      .perifuturo {
        display: block
      }

      .proof-grid {
        grid-template-columns: 1fr 1fr 1fr
      }

      .case-card,
      .case-proof {
        max-width: none;
        margin-top: 24px
      }

      .work img {
        margin-top: 24px
      }

      .cards {
        grid-template-columns: 1fr
      }

      .partner-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .cert-grid {
        flex-wrap: wrap
      }

      .contact-section {
        padding: 52px 20px
      }

      .form-row {
        grid-template-columns: 1fr
      }

      .footer-main,
      .footer-links,
      .copyright {
        display: block
      }

      .footer-links {
        margin-top: 24px
      }

      .footer-links>div {
        margin-bottom: 20px
      }

      .copyright div+div {
        margin-top: 8px
      }

      .need-selector h2,
      .clients h2,
      .global h2 {
        font-size: 2.5em
      }
    }

    .need-selector {
      max-width: 100%
    }

    .need-selector>p {
      margin-bottom: 24px
    }

    .need-list {
      display: flex;
      gap: 12px
    }

    .need-btn {
      position: relative;
      flex: 1;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 13px;
      padding: 22px 18px;
      border: 1px solid #dceadd;
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
      transform: none !important
    }

    .need-btn:hover,
    .need-btn:focus-visible {
      flex: 1.65;
      border-color: var(--dark);
      background: #f5fef7;
      box-shadow: 0 8px 24px rgba(21, 96, 29, .13)
    }

    .need-btn .letter {
      width: 34px;
      height: 34px
    }

    .need-btn .icon {
      width: 28px;
      height: 28px
    }

    .need-btn .label {
      font: 700 16px/1.25 Outfit, sans-serif
    }

    .need-details {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .25s ease, opacity .2s ease;
      font: 500 1em Montserrat, sans-serif;
      color: #314334
    }

    .need-btn:hover .need-details,
    .need-btn:focus-visible .need-details {
      max-height: 130px;
      opacity: 1
    }

    .need-details a {
      display: inline-flex;
      margin-top: 12px;
      color: var(--dark);
      font: 700 12px Outfit, sans-serif;
      text-decoration: none
    }

    .need-panel {
      display: none
    }

    @media(max-width:700px) {
      .need-list {
        display: grid;
        grid-template-columns: 1fr 1fr
      }

      .need-btn {
        min-height: 164px
      }

      .need-btn:hover,
      .need-btn:focus-visible {
        flex: auto
      }

      .need-details {
        max-height: 130px;
        opacity: 1
      }
    }

    @media(max-width:420px) {
      .need-list {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:700px) {
      body {
        overflow-x: hidden
      }

      .page {
        width: 100%;
        overflow: hidden
      }

      header {
        position: relative;
        height: 64px;
        padding: 0 20px
      }

      header>img,
      .brand img {
        height: 32px !important;
        margin: 0 !important
      }

      header>nav:not(.mobile-menu) {
        display: none
      }

      .header-cta {
        display: none
      }

      .menu-toggle {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0 !important;
        border: none !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--bright)
      }

      .menu-toggle span {
        display: block !important;
        width: 22px;
        height: 2px;
        background: currentColor !important;
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease
      }

      .menu-toggle span+span {
        margin-top: 4px
      }

      .menu-toggle.is-open span:first-child {
        transform: translateY(6px) rotate(45deg)
      }

      .menu-toggle.is-open span:nth-child(2) {
        opacity: 0
      }

      .menu-toggle.is-open span:last-child {
        transform: translateY(-6px) rotate(-45deg)
      }

      .mobile-menu {
        position: absolute;
        z-index: 10;
        top: 64px;
        left: 0;
        right: 0;
        display: grid;
        gap: 4px;
        padding: 18px 20px 22px;
        background: #000;
        border-top: 1px solid rgba(109, 253, 140, .25);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease
      }

      .mobile-menu.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto
      }

      .mobile-menu a {
        padding: 12px 0;
        color: #fff;
        font: 700 15px Outfit, sans-serif;
        text-decoration: none
      }

      .mobile-menu .button--bright {
        margin-top: 8px;
        text-align: center
      }

      .hero {
        padding: 70px 20px 54px
      }

      .hero-copy {
        padding: 20px
      }

      .hero h1 {
        font-size: 42px
      }
.results {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;
  /* O de forma abreviada: padding: 0 10%; */
}
      
      .work {
        padding: 60px 20px
      }

      .work h2 br {
        display: none
      }

      .pasos-nosotros {
        display: flex !important;
        flex-direction: column;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100%;
        margin-top: 28px !important
      }

      .pasos-nosotros>span {
        display: none
      }

      .pasos-nosotros>div {
        width: 100%;
        min-width: 0
      }

      .pasos-nosotros>div>span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 15px !important
      }

      .work>img {
        max-width: 100% !important;
        margin-top: 30px !important
      }

      section {
        padding: 60px 20px
      }

      .value,
      .clients,
      .case,
      .global,
      .partners,
      .perifuturo,
      .certs {
        padding-left: 20px !important;
        padding-right: 20px !important
      }
    }

    @media(min-width:701px) {

      .menu-toggle,
      .mobile-menu {
        display: none
      }
    }

.need-btn {
              border-left: 5px solid #6dfd8c !important;
              border-right-width: 1px !important;
            }

            .need-details a {
              display: none !important
            }

.pill {
          border: 2px solid #6dfd8c;
          background: #fff;
          color: #212;
          font-weight: 600;
        }

        .pill--active {
          background: #6dfd8c;
          color: #212;
          border-color: #6dfd8c !important;
        }

        .pills {
          margin-bottom: 15px;
        }

.partner-grid img {
              display: block;
              max-width: 100%;
              max-height: 70px;
              width: auto;
              height: auto;
              object-fit: contain;
            }

            .flag-img {
              display: inline-block;
              width: 16px;
              height: 12px;
              object-fit: cover;
              margin-right: 8px;
              padding: 0
            }


/* =========================================================
   Sistema de componentes de página de SERVICIO (global)
   Reutiliza los tokens de marca de arriba (--bright, --dark,
   --teal, --light, --muted, --ink). Pensado para digital-
   engineering / it-estrategia / it-leadership / it-staffing /
   products-platforms.
   ========================================================= */

.wrap{max-width:1180px;margin:0 auto}
.section{padding:70px 10%}
.section-sm{padding:40px 10%}
.section-white{background:#fff}
.section-mint{background:var(--light)}
.section-head{max-width:680px;margin:0 0 40px;text-align:left}
.section-head h2{font-size:2.5em;margin:12px 0 10px}
.section-head p{color:#454545;font-size:16px;line-height:1.6;margin:0}
.eyebrow.on-dark{color:var(--bright)}
.lead{font-size:1em;line-height:1.6}

/* ---------- Hero de oferta (dark, con flow-field animado) ---------- */
.offer-hero{position:relative;overflow:hidden;background:#000;color:#fff;padding:100px 10%}
.offer-hero-grid{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.offer-hero h1{font-size:44px;line-height:1.14;margin:16px 0;max-width:640px}
.offer-hero .lead{max-width:560px;color:#d9f8df;margin:0 0 28px}
.offer-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.offer-icon-badge{width:120px;height:120px;border-radius:50%;background:rgba(109,253,140,.12);border:1px solid rgba(109,253,140,.35);display:grid;place-items:center;flex:none}
.offer-icon-badge .icon{width:52px;height:52px;filter:brightness(0) invert(1)}
.flow-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flow-field svg{width:100%;height:100%;display:block}
.flow-field .flow-line{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.4}
.flow-field .flow-pulse{fill:none;stroke:var(--bright);stroke-width:2.2;stroke-linecap:round;opacity:.75}
.flow-field .node{fill:var(--bright);opacity:.5}
.flow-field .p1{stroke-dasharray:10 340;animation:flow-run 4.6s linear infinite}
.flow-field .p3{stroke-dasharray:9 320;animation:flow-run 6.1s linear infinite;animation-delay:1.4s}
.flow-field .p5{stroke-dasharray:11 360;animation:flow-run 5.7s linear infinite;animation-delay:1.9s}
@keyframes flow-run{to{stroke-dashoffset:-1700}}

/* ---------- Botones de contenido ---------- */
.btn{display:inline-block;border:0;border-radius:999px;padding:13px 22px;font:700 14px Montserrat,sans-serif;cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--bright);color:#111}
.btn-primary:hover{background:#fff}
.btn-block{width:100%}
.btn-sm{padding:10px 16px;font-size:13px}
.btn-outline-light{display:inline-block;border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:12px 20px;font:700 14px Montserrat,sans-serif;text-decoration:none}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-link{display:inline-flex;align-items:center;gap:10px;color:var(--dark);text-decoration:none;font:700 14px Outfit,sans-serif}
.btn-link:hover,.btn-link:focus-visible{color:var(--teal);outline:none}
.btn-link:hover .circle-arrow,.btn-link:focus-visible .circle-arrow{background:var(--bright);color:var(--dark);transform:translateX(3px)}
.circle-arrow{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--dark);color:#fff;flex:none;transition:background .2s ease,color .2s ease,transform .2s ease}

/* ---------- El problema / Capacidades (tarjetas) ---------- */
.problem-grid,.pillars-grid{display:grid;gap:14px}
.problem-grid{grid-template-columns:repeat(3,1fr)}
.pillars-grid{grid-template-columns:repeat(2,1fr)}
.problem-card,.pillar-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:18px 20px}
.problem-card p{margin:0;font-size:14px;line-height:1.5;color:#333}
.pillar-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--dark);color:#fff !important;font:800 12px Outfit,sans-serif;margin-bottom:8px}
.pillar-card h3{margin:0 0 4px;font-size:1.2em;font-weight:600}
.pillar-card p{margin:0;font-size:1em;line-height:1.5;color:#333}

.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center}

/* ---------- Variante: imagen al 50% del ancho y 100% del alto ---------- */
.about-grid.about-grid--full{grid-template-columns:2fr 3fr;align-items:stretch}
.about-grid--full-media{align-self:stretch;min-height:560px}
.about-grid--full-media img{width:100%;height:100%;min-height:560px;object-fit:cover}

/* ---------- Variante "bleed": imagen pegada arriba y a la derecha, 60% de TODA la sección ---------- */
.about-grid--bleed-section{position:relative;overflow:hidden;padding-top:0;padding-right:0;min-height:560px}
.about-grid--bleed-section .wrap{position:relative;z-index:1;max-width:none;margin:0;padding-top:70px;padding-bottom:70px}
.about-grid--bleed-section .about-grid--full-cards{max-width:48%}
.about-grid--bleed-section .pillars-grid--stack{grid-template-columns:1fr;gap:14px}
.about-grid--bleed-media{position:absolute;top:0;right:0;bottom:0;width:40%;z-index:1}

/* ---------- Variante: imagen a la izquierda ---------- */
.about-grid--bleed-section--left{padding-left:0 !important;padding-right:10% !important}
.about-grid--bleed-section--left .about-grid--full-cards{margin-left:auto}
.about-grid--bleed-section--left .about-grid--bleed-media{left:0;right:auto}
@media(max-width:900px){
  .about-grid--bleed-section--left{padding-left:10% !important}
}
.about-grid--bleed-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Variante oscura (fondo teal + animación) ---------- */
.about-grid--bleed-dark .pillar-card{background:#fff}
.about-grid--bleed-dark .pillar-card h3{color:var(--ink)}
.about-grid--bleed-dark .pillar-card p{color:#333}
@media(max-width:900px){
  .about-grid--bleed-section{padding-right:10%;min-height:0}
  .about-grid--bleed-section .about-grid--full-cards{max-width:100% !important}
  .about-grid--bleed-media{position:static;width:100%;height:260px;margin-top:24px}
}
.about-grid--full-cards{display:flex;flex-direction:column;justify-content:center;gap:16px}
.about-grid--full-cards .pillars-grid.reveal-stagger>*{
  opacity:0;transform:translateX(-28px);
  transition:opacity .6s ease,transform .6s ease;
}
.about-grid--full-cards .pillars-grid.reveal-stagger.is-visible>*{opacity:1;transform:none}
.about-grid--full-cards .pillars-grid.reveal-stagger.is-visible>*:nth-child(2){transition-delay:.18s}
@media(max-width:900px){
  .about-grid.about-grid--full{grid-template-columns:1fr}
  .about-grid--full-media img{min-height:240px}
}

/* ---------- Imagen sticky: se queda fija mientras el contenido a su lado hace scroll ---------- */
.sticky-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.sticky-split .photo-feature{position:sticky;top:100px;height:540px;border-radius:16px;overflow:hidden}
.sticky-split .photo-feature img{width:100%;height:100%;object-fit:cover;display:block}
.sticky-split .pillars-grid{grid-template-columns:1fr}
.sticky-split .cap-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){
  .sticky-split{grid-template-columns:1fr}
  .sticky-split .photo-feature{position:static;height:240px}
  .sticky-split .cap-grid{grid-template-columns:1fr}
}
.photo-feature{position:relative;border-radius:14px;overflow:hidden}
.photo-feature img{width:100%;height:260px;object-fit:cover;display:block;border-radius:14px}
.photo-caption{position:absolute;left:18px;bottom:18px;background:rgba(0,0,0,.65);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px}

/* ---------- Evidencia / métricas / casos ---------- */
.metrics-strip{display:grid;gap:16px}
.evidencia-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.evidencia-intro-grid p{margin:0;font-size:16px;line-height:1.6;color:#454545}
@media(max-width:900px){
  .evidencia-intro-grid{grid-template-columns:1fr}
}
.metric-card{background:var(--teal);color:#fff;border-radius:16px;padding:22px;text-align:center}
.metric-card strong{display:block;font:800 28px Outfit,sans-serif;color:var(--bright)}
.metric-card span{font-size:13px;color:#d9f8df}
.footprint-strip{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:#333}
.footprint-strip strong{color:var(--dark)}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card{position:relative;background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}

/* ---------- Variante: imagen arriba, categoría, solo título; texto y datos al hover ---------- */
.case-card--media{padding:0;overflow:hidden;gap:0}
.case-card-media2{height:150px;overflow:hidden}
.case-card-media2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.case-card--media:hover .case-card-media2 img{transform:scale(1.07)}
.case-card-body2{padding:16px 20px 20px}
.case-card-body2 .case-tags{margin-bottom:8px}
.case-card-body2 h3{font-size:17px;margin:0}
.case-card-hover{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;
}
.case-card--media:hover .case-card-hover{
  max-height:260px;
  opacity:1;
  margin-top:10px;
}
.case-card-hover p{font-size:14px;line-height:1.5;color:#333;margin:0 0 10px}
.case-card-hover .case-metrics{display:flex;gap:20px}
@media(hover:none){
  .case-card-hover{max-height:none;opacity:1;overflow:visible;margin-top:10px}
}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-industry,.tag-cap{font:600 0.9em Outfit,sans-serif;padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.tag-industry{background:var(--light);color:var(--dark)}
.tag-cap{background:#eef2ee;color:#333}
.case-card h3{font-size:17px;margin:2px 0}
.case-card p{font-size:14px;line-height:1.5;color:#333;margin:0}
.case-metrics{display:flex;gap:20px;margin-top:4px}
.case-metrics strong{display:block;font:800 28px Outfit,sans-serif;color:var(--dark)}
.case-metrics span{font-size:11px;color:#555}

/* ---------- Cross-sell ---------- */
.crosssell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.crosssell-card{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--dark);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:.2s;box-shadow:0 4px 14px rgba(21,96,29,.08)}
.crosssell-card:hover{border-color:var(--dark);transform:translateY(-2px)}
.door-icon{width:44px;height:44px;border-radius:50%;background:var(--light);display:grid;place-items:center;flex:none}
.door-icon--logo{background:transparent;width:110px;height:44px;border-radius:0}

/* ---------- Tarjeta de partner: solo logo, hover oscuro con botón ---------- */
.partner-tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.partner-tile{
  background:#fff;
  border:1px solid var(--muted);
  border-radius:14px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.partner-tile img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:filter .25s ease;
}
.partner-tile:hover{
  background:var(--teal);
  border-color:var(--teal);
  box-shadow:0 16px 34px rgba(6,54,53,.22);
}
.partner-tile:hover img{filter:brightness(0) invert(1)}
.partner-tile .cap-more{
  flex-basis:auto;
  margin-top:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  transition:max-height .3s ease,opacity .25s ease,padding .3s ease;
}
.partner-tile:hover .cap-more{
  max-height:44px;
  opacity:1;
  padding-top:9px;
  padding-bottom:9px;
}
@media(max-width:900px){
  .partner-tile-grid{grid-template-columns:repeat(2,1fr)}
}
@media(hover:none){
  .partner-tile .cap-more{
    max-height:none;
    opacity:1;
    overflow:visible;
    padding-top:9px;
    padding-bottom:9px;
  }
  .partner-tile{background:var(--teal);border-color:var(--teal)}
  .partner-tile img{filter:brightness(0) invert(1)}
}
.door-icon--logo img{width:100%;height:100%;object-fit:contain;transition:filter .25s ease}
.cap-card:hover .door-icon--logo img{filter:brightness(0) invert(1)}

.cap-more{
  display:inline-block;
  margin-top:8px;
  padding:9px 18px;
  border-radius:999px;
  background:var(--bright);
  color:#111;
  font:700 13px Outfit,sans-serif;
  text-decoration:none;
  flex-basis:100%;
  width:fit-content;
  transition:background .2s ease, transform .2s ease;
}
.cap-more:hover,.cap-more:focus-visible{background:#fff;transform:translateY(-2px);outline:none}
.crosssell-card strong{display:block;font-size:15px;margin-bottom:2px}
.crosssell-card p{margin:0;font-size:13px;color:#555}
.crosssell-card .arrow{margin-left:auto;font-size:20px;color:var(--dark)}

/* ---------- Breadcrumb (ruta de navegación) ---------- */
.breadcrumb{padding:14px 10%;background:#f5fef7;border-bottom:1px solid var(--muted)}
.breadcrumb .wrap{max-width:none;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 13px Montserrat,sans-serif}
.breadcrumb a{color:var(--dark);text-decoration:none}
/* ---------- Espacio reservado para imágenes (a completar por el cliente) ---------- */
.img-placeholder{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
  border:2px dashed var(--muted);
  border-radius:14px;
  background:repeating-linear-gradient(45deg,#f5fef7,#f5fef7 12px,#eaf7ec 12px,#eaf7ec 24px);
  color:var(--dark);
  text-align:center;
  padding:24px;
}
.img-placeholder span{
  font:700 13px Outfit,sans-serif;
  letter-spacing:.02em;
  opacity:.8;
  max-width:320px;
}
.img-placeholder--wide{min-height:300px}
.img-placeholder--tall{min-height:380px}

.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:#9db89f}
.breadcrumb .current{color:var(--ink);font-weight:700}

/* ---------- Capacidades detalladas (digital-engineering / products-platforms) ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cap-card{position:relative;background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;transition:transform .25s ease,box-shadow .25s ease}
.cap-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(21,96,29,.16)}
.cap-card .door-icon{margin-bottom:0;flex:none}
.cap-card h3{font-size:1.4em;margin:0;flex:1 1 auto;font-weight:600}
.cap-sub{display:block;font-size:13px;color:#555;margin-bottom:10px;flex-basis:100%}
.cap-card ul{margin:0;padding-left:18px;flex-basis:100%}
.cap-card ul li{font-size:0.9em;line-height:1.5;color:#333;margin-bottom:4px}
.cap-card--teal ul li{color:#fff}

/* ---------- Variante: solo título visible, descripción al hover (Plataformas especializadas) ---------- */
/* ---------- Acordeón (Plataformas especializadas) ---------- */
.accordion{border-top:1px solid rgba(255,255,255,.18)}
.accordion-item{border-bottom:1px solid rgba(255,255,255,.18)}
.accordion-trigger{
  width:100%;display:flex;align-items:center;gap:18px;
  background:none;border:0;cursor:pointer;
  padding:24px 4px;color:#fff;text-align:left;
  transition:opacity .2s ease;
}
.accordion-trigger:hover,.accordion-trigger:focus-visible{opacity:.8;outline:none}
.accordion-tag{
  font:700 11px Outfit,sans-serif;letter-spacing:.02em;
  background:rgba(109,253,140,.15);color:var(--bright);
  padding:5px 12px;border-radius:999px;flex:none;
}
.accordion-title{font:800 20px Outfit,sans-serif;flex:1}
.accordion-icon{position:relative;width:20px;height:20px;flex:none}
.accordion-icon::before,.accordion-icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:var(--bright);
  transform:translate(-50%,-50%);
}
.accordion-icon::before{width:16px;height:2px}
.accordion-icon::after{width:2px;height:16px;transition:transform .25s ease}
.accordion-item.is-open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-item.is-open .accordion-panel{max-height:420px}
.accordion-panel p{color:#d9f8df;font-size:14px;line-height:1.6;margin:0 0 10px;padding:0 4px}
.accordion-panel ul{margin:0 0 24px;padding-left:22px}
.accordion-panel ul li{color:#d9f8df;font-size:14px;line-height:1.6;margin-bottom:6px}

/* ---------- Variante tarjeta oscura (Plataformas especializadas) ---------- */
.accordion--cards{border-top:0}
.accordion--cards .accordion-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--bright);
  border-radius:14px;
  margin-bottom:14px;
  overflow:hidden;
  transition:background .25s ease;
}
.accordion--cards .accordion-item:hover{background:rgba(255,255,255,.09)}
.accordion--cards .accordion-item:last-child{margin-bottom:0}
.accordion--cards .accordion-trigger{padding:20px 22px}
.accordion--cards .accordion-panel{padding:0 22px}
.accordion--cards .accordion-item.is-open .accordion-panel{padding:0 22px 24px}

/* ---------- Variante tarjeta clara (Soluciones propias) ---------- */
.accordion--light{border-top:0}
.accordion--light .accordion-item{
  background:#fff;
  border:1px solid var(--muted);
  border-left:4px solid var(--bright);
  border-radius:14px;
  margin-bottom:14px;
  overflow:hidden;
  transition:box-shadow .25s ease;
}
.accordion--light .accordion-item:hover{box-shadow:0 10px 26px rgba(21,96,29,.12)}
.accordion--light .accordion-item:last-child{margin-bottom:0}
.accordion--light .accordion-trigger{padding:18px 22px;color:var(--ink)}
.accordion--light .accordion-trigger .door-icon{margin-right:2px}
.accordion--light .accordion-tag{background:var(--light);color:var(--dark)}
.accordion--light .accordion-title{color:var(--ink)}
.accordion--light .accordion-icon::before,.accordion--light .accordion-icon::after{background:var(--dark)}
.accordion--light .accordion-panel{padding:0 22px}
.accordion--light .accordion-item.is-open .accordion-panel{padding:0 22px 22px 68px}
.accordion--light .accordion-panel p{color:#454545;margin:0}

/* ---------- Variante clara SIN forma de tarjeta (acordeón normal, líneas) ---------- */
.accordion--light-plain{border-top:1px solid var(--bright)}
.accordion--light-plain .accordion-item{border-bottom:1px solid var(--bright)}
.accordion--light-plain .accordion-trigger{padding:20px 4px;color:var(--ink)}
.accordion--light-plain .accordion-trigger .door-icon{margin-right:4px;background:var(--bright)}
.accordion--light-plain .accordion-tag{background:var(--bright);color:var(--ink)}
.accordion--light-plain .accordion-title{color:var(--ink)}
.accordion--light-plain .accordion-icon::before,.accordion--light-plain .accordion-icon::after{background:var(--dark)}
.accordion--light-plain .accordion-panel{padding:0 4px}
.accordion--light-plain .accordion-item.is-open .accordion-panel{padding:0 4px 22px 68px}
.accordion--light-plain .accordion-panel p{color:#454545;margin:0}

.cap-grid--reveal .cap-card{min-height:150px}

/* ---------- Variante oscura de cap-card (Plataformas, 2 columnas + imagen intercalada) ---------- */
.cap-grid--dark{grid-template-columns:repeat(2,1fr)}
.cap-grid--dark .cap-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-left:5px solid var(--bright);
}
.cap-grid--dark .cap-card:hover{background:rgba(255,255,255,.09);box-shadow:0 16px 34px rgba(0,0,0,.25)}
.cap-grid--dark .cap-card h3{color:#fff}
.cap-grid--dark .cap-sub{color:#d9f8df}
.cap-grid--dark .cap-card ul li{color:#d9f8df}
.cap-grid--dark .tag-cap{background:rgba(109,253,140,.15);color:var(--bright)}
.cap-grid-media{border-radius:14px;overflow:hidden;min-height:150px}
.cap-grid-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .cap-grid--dark{grid-template-columns:1fr}
}
.cap-grid--reveal .cap-card .cap-sub,
.cap-grid--reveal .cap-card ul,
.cap-grid--reveal .cap-card .cap-more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;
}
.cap-grid--reveal .cap-card:hover .cap-sub,
.cap-grid--reveal .cap-card:hover ul,
.cap-grid--reveal .cap-card:hover .cap-more{
  max-height:220px;
  opacity:1;
  margin-top:8px;
}
/* En touch (sin hover real) mostrar siempre el contenido, para no ocultarlo permanentemente */
@media(hover:none){
  .cap-grid--reveal .cap-card .cap-sub,
  .cap-grid--reveal .cap-card ul,
  .cap-grid--reveal .cap-card .cap-more{
    max-height:none;
    opacity:1;
    overflow:visible;
    margin-top:8px;
  }
}

/* ---------- Soluciones propias / producto (products-platforms) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{position:relative;background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:20px;text-align:left;transition:transform .25s ease,box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(21,96,29,.16)}
.product-card .door-icon{margin-bottom:10px}
.product-card h3{font-size:17px;margin:6px 0 4px}
.product-card p{font-size:14px;line-height:1.5;color:#333;margin:0}

/* ---------- Método en pasos (it-estrategia) ---------- */
.process-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.process-step{position:relative;background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:16px 18px;transition:transform .25s ease,box-shadow .25s ease}
.process-step:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(21,96,29,.16)}
.process-step b{display:block;font:800 15px Outfit,sans-serif;color:var(--dark);margin-bottom:4px}
.process-step span{font-size:13px;line-height:1.45;color:#333}

/* ---------- Qué recibes al cierre (checklist sobre fondo teal) ---------- */
.deliverables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin-top:8px}
.deliverable-item{display:flex;align-items:center;gap:12px;color:#f5fef7;font:600 15px Montserrat,sans-serif}
.door-icon--deliverable{background:var(--bright);width:34px;height:34px}
.door-icon--deliverable .icon{stroke:var(--teal);width:16px;height:16px}

/* ---------- Variante de círculo en verde azulado (teal) ---------- */
.door-icon--teal{background:var(--bright)}
.door-icon--teal .icon{stroke:var(--teal)}
.cap-card--teal{background:var(--teal);border-color:var(--teal);border-left-color:var(--bright)}
.cap-card--teal h3{color:#fff}
.cap-card--teal .cap-sub{color:#d9f8df}
.cap-card--teal ul li{color:#d9f8df}
.cap-card--teal .tag-cap{background:var(--bright);color:var(--teal)}
@media(max-width:700px){
  .deliverables-grid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .problem-grid,.pillars-grid,.case-grid,.crosssell-grid,.cap-grid,.product-grid,.process-flow{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .offer-hero-grid{flex-direction:column;align-items:flex-start}
}

/* ===== Estilos extraídos de atributos style="" en línea ===== */

.gs-38ed6c17{position:absolute;}

.gs-6153b8eb{height:38px;vertical-align:middle;margin-right:9px;}

.gs-43895a36{display: flex; flex-direction: column; padding-left: 10%; padding-right: 10%;}

.gs-11cc23cd{margin-bottom:19px; text-align: left;}

.gs-8dac80cd{font-size:25px;font-family:Outfit,sans-serif; display:inline-block;}

.gs-886008cc{display:flex;flex-wrap:nowrap;gap:48px;align-items: baseline;width:100%;}

.gs-bd85c57a{flex:1; text-align:left;}

.gs-ef69e1a4{font-size:38px; display:block;}

.gs-bf83cf1c{font-size:18px;}

.gs-d893502a{gap:19px;}

.gs-4c91eb68{background:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/banner-nosotros-periferia.webp') center/cover no-repeat;padding:70px 10% 70px 10%;display:flex;justify-content:flex-start;}

.gs-9469f2b5{width:60%;margin-left:0;margin-right:auto;text-align:left;}

.gs-42e244e8{text-transform:uppercase;font-size:17px;font-family:Outfit,sans-serif;font-weight:700;color:#6dfd8c;letter-spacing:0.05em;}

.gs-4eb23a89{color:#fff;}

.gs-55f09f0c{color:#fff;margin-top:20px;margin-bottom:0;font-size:18px;font-family:Montserrat;font-weight:400;line-height:1.5;}

.gs-4fd1f528{margin:38px 0 0 0;display:flex;gap:0;flex-direction:row;justify-content:flex-start;font-family:Montserrat,sans-serif;align-items:center;background:#0636356b;border-radius:21px;padding:27px 0;box-shadow:0 3px 15px #06363522;max-width:700px;text-align:center;}

.gs-da5cd676{flex:1;}

.gs-ac8f6ee8{display:block;font:800 2.3em Outfit,sans-serif;color:#6dfd8c;line-height:1;}

.gs-5a5a7f17{display:block;font-size:15px;font-weight:500;color:#fff;font-family:Montserrat;}

.gs-e35d22eb{border-left:2px solid #6dfd8c;height:50px;margin:0;}

.gs-42e7e652{text-transform:uppercase;font-size:17px;font-family:Outfit,sans-serif;font-weight:700;color:#15601d;letter-spacing:0.05em;}

.gs-75f63705{background-image:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/1ItStrategy-copia.webp');}

.gs-f591c067{background-image:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/1-IT-Staffing.webp');}

.gs-73fb3f40{background-image:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/1-Software-Engineering-copia.webp');}

.gs-a46061ec{background-image:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/1Products-Platforms.webp');}

.gs-d6201747{background-image:url('https://temp.periferiaitgroup.com/wp-content/uploads/2026/09/IT-Leadership-copia.webp');}

.gs-032360c6{background:#fff;padding:65px 7% 56px 7%;}

.gs-9e37ccec{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}

.gs-01b08f90{flex:1 1 520px;max-width:720px;}

.gs-c2cfb380{font-size:2.3rem;color:#111;line-height:1.1;font-family:Outfit,sans-serif;font-weight:900;margin:18px 0 0 0;}

.gs-994beb75{color:#273230;margin:13px 0 0 0;font-size:18px;line-height:1.4;max-width:620px;}

.gs-9a59aded{flex:0 0 auto;padding-bottom:6px;}

.gs-d47af40a{font-size:16px;padding:12px 38px;display:inline-block;white-space:nowrap;}

.gs-3a4e0d50{display:flex;gap:28px;flex-wrap:wrap;margin:42px 0 0 0;align-items:stretch;}

.gs-07a68c4a{background:#fff;border:1.5px solid #dceadd;border-radius:20px;padding:28px;flex:1 1 320px;min-width:300px;box-shadow:0 3px 18px #00000008;display:flex;flex-direction:column;}

.gs-967f10e8{background:#ccffd6;color:#212121;font-weight:700;font-size:14px;border-radius:12px;padding:5px 18px 5px 12px;display:inline-block;margin-bottom:15px;}

.gs-941d28a6{color:#888;font:15px Montserrat,sans-serif;margin-bottom:4px;}

.gs-692aaa34{font:800 19px/1.19 Outfit,sans-serif;margin:8px 0 8px 0;color:#212121;}

.gs-4bd9ffef{color:#363636;font:14px/1.45 Montserrat,sans-serif;margin-bottom:2px;}

.gs-bea23445{margin:auto 0 0 0;padding-top:18px;display:flex;gap:32px;}

.gs-7fecaf6a{font:800 28px Outfit;color:#15601d;}

.gs-a6c3316d{color:#1d5930;font-size:0.9em;}

.gs-2409c192{font:800 19px/1.22 Outfit,sans-serif;margin:8px 0 8px 0;color:#212121;}

.gs-dfcfb8f9{margin:auto 0 0 0;padding-top:16px;}

.gs-08a9b1d4{font-size:12.5px;font-weight:700;margin-bottom:6px;color:#232930;}

.gs-8416c583{display:flex;gap:22px;margin-top:5px;}

.gs-143fada4{font:800 28px Outfit;color:#15601d;margin-bottom:2px;}

.gs-d76398fc{font-size:30px;font-family:Outfit,sans-serif;font-weight:800;color:#fff;text-shadow:0 1px 10px #15601d;letter-spacing:0;display:inline-block;}

.gs-1c18a0e6{flex:1;text-align:left;}

.gs-7c1175cc{color:#6dfd8c;font:800 28px Outfit;text-shadow:0 1px 10px #023;}

.gs-ea8875ef{color:#fff;font-size:18px;line-height:1.25;white-space:normal;}

.gs-63f1ad9d{color:#6dfd8c;font:800 28px Outfit;text-shadow:0 1px 10px #023;}

.gs-662c12aa{font:800 28px Outfit,sans-serif;color:#6dfd8c;margin-bottom:7px;line-height:1.16;}

.gs-7a1e295f{color:#fff;font-size:18px;white-space:normal;}

.gs-4d9ccae8{display: flex; flex-wrap: wrap; gap: 9px 38px; margin-top: 20px;}

.gs-eb99c1d2{display: flex; align-items: center; font-size: 19px; font-weight: 600; gap: 8px; flex-basis: calc(50% - 19px);}

.gs-a08cac1e{width:100%;max-width:600px;height:auto;margin:38px 0 24px 0;animation:globe-float 6s ease-in-out infinite;}
@keyframes globe-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media(prefers-reduced-motion:reduce){.gs-a08cac1e{animation:none}}

.gs-d4c1a0f2{background:#063635;}

.gs-ea58555b{color:#fff;font-size:1em;}

.gs-89ac00ef{min-height:70px;}

.gs-105a1fce{text-transform:uppercase;font-size:17px;font-family:Outfit,sans-serif;font-weight:700;color:#063635;letter-spacing:0.05em;}

.gs-ba87a763{margin-top:10px;font-size:34px;font-family:Outfit,sans-serif;font-weight:700;color:#fff;text-shadow:0 2px 14px #212;}

.gs-c1c73f94{margin-bottom:var(--space-5);}

.gs-cf1ef740{transition-delay:.08s;}

.gs-cbb6ae12{background:#000; color:#fff; font-family:Montserrat,sans-serif; font-size:15px;}

.gs-ad1cde02{max-width:1210px;margin:auto;padding:44px 22px 0 22px;display:flex;gap:20px 36px;flex-wrap:wrap;align-items:flex-start;}

.gs-ebf90023{flex:1;min-width:245px;max-width:328px;}

.gs-18dc6d14{height:44px;}

.gs-9de62d13{margin-bottom:22px;line-height:1.6;color:#d3ffe6;}

.gs-09f6fd1d{display:flex;gap:16px;margin-bottom:2px;}

.gs-c3a211ea{background:#111;border:2px solid #6dfd8c;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;}

.gs-1865d07d{flex:2.2;display:flex;gap:38px;min-width:280px;}

.gs-c8310c8d{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:#6dfd8c;letter-spacing:.04em;margin-bottom:13px;}

.gs-eff3147d{color:#fff;text-decoration:none;display:block;margin-bottom:7px;}

.gs-3b83feca{margin:36px 0 0 0;height:1.5px;background:#2c3b32;width:100%;}

.gs-df0fb85e{max-width:1210px;margin:auto;padding:10px 22px 25px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;color:#bfe8c0;}