/* =========================================================
   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: #000000;
      --space-2: 12px;
      --space-4: 20px;
      --space-5: 26px;
      --space-6: 34px
    }

    * {
      box-sizing: border-box
    }

    html {
      overflow-x: hidden;
      max-width: 100%;
    }

    img, svg, video {
      max-width: 100%;
      height: auto;
    }

    body {
      margin: 0;
      background: #fff;
      color: var(--ink);
      font-family: Montserrat, sans-serif;
      overflow-x: hidden;
      max-width: 100%;
    }

    .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;
    }

    .footer-icon-link{
      width:40px;
      height:40px;
      flex:none;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#6dfd8c;
      overflow:hidden;
    }
    .footer-icon-link img{
      width:28px;
      height:28px;
      object-fit:contain;
      display:block;
    }

    @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') top/cover no-repeat;
      color: #fff;
      padding: 94px 64px 78px
    }

    .hero-copy {
      max-width: 730px;
      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: #fff;
      margin: 0 0 30px
    }

    .hero--slideshow {
      position: relative;
      overflow: hidden;
      background: #000
    }

    .hero--slideshow .hero-copy {
      position: relative;
      z-index: 1
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: top;
      background-repeat: no-repeat;
      opacity: 0;
      animation: heroSlideFade 18s ease-in-out infinite
    }

    /* 3 imágenes, 6s cada una (delays 0s, 6s, 12s) con fundido cruzado */
    @keyframes heroSlideFade {
      0% { opacity: 0 }
      5.56% { opacity: 1 }
      33.33% { opacity: 1 }
      38.89% { opacity: 0 }
      100% { opacity: 0 }
    }

    .results {
      position: relative;
      overflow: hidden;
      background: var(--teal);
      color: #fff;
      padding: 28px 10%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      gap: 18px;
    }

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

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

    .result-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background: radial-gradient(120% 160% at 25% 15%, #0e2e2b 0%, #04120f 75%);
      border: 1px solid rgba(109, 253, 140, .45);
      border-radius: 20px;
      padding: 16px 20px;
      box-shadow: 0 0 0 1px rgba(109, 253, 140, .08), 0 8px 24px rgba(0, 0, 0, .35);
    }

    .results--liferay .result-card {
      padding: 26px 24px;
      min-height: 96px;
    }
    .results--liferay .result-card span{
      color:#fff;
    }

    .results--index-first{
      padding-top: 56px;
      padding-bottom: 56px;
    }
    .results--index-second{
      padding-top: 56px;
      padding-bottom: 56px;
    }
    .results--index-second .result-card,
    .results--liferay .result-card{
      border: 1px solid transparent;
      background:
        radial-gradient(120% 160% at 25% 15%, #0e2e2b 0%, #04120f 75%) padding-box,
        linear-gradient(135deg, #fff 0%, #CCFFD6 50%, #6DFD8C 100%) border-box;
    }
    .results--banner-style{
      padding-top: 56px;
      padding-bottom: 56px;
      align-items: stretch;
    }
    .results--banner-style .result-card{
      background: linear-gradient(180deg, #000000 30%, #063635 110%);
      border: none;
      box-shadow: none;
      min-height: 128px;
      padding: 24px 26px;
      align-items: flex-start;
      flex: 1;
    }
    .results--banner-style .result-text b{
      color: var(--bright);
      white-space: nowrap;
    }
    .results--index-first .result-card{
      background: linear-gradient(180deg, #000000 30%, #063635 110%);
      border: none;
      box-shadow: none;
      min-height: 128px;
      padding: 24px 26px;
    }
    .results--index-first .result-text b{
      color: var(--bright);
      white-space: nowrap;
    }
    .results--index-first .result-row{
      align-items: stretch;
    }
    .results--index-first .result-card{
      align-items: flex-start;
    }

    .result-icon {
      width: 46px;
      height: 46px;
      border: none;
      background: none;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .result-icon img {
      width: 35px;
      height: auto;
      object-fit: contain;
    }

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

    .result-card span {
      font-size: 1.1em;
      color: white;
    }

    .results .result-row {
      width: 100%;
      justify-content: center;
    }

    .benefits-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;max-width:1100px;margin-left:auto;margin-right:auto}
    @media(max-width:900px){
      .benefits-result-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:700px){
      .benefits-result-grid{grid-template-columns:1fr}
    }

    .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: #000000
    }

    .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: top
    }

    .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: #000000
    }

    .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;
      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') top/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: #fff;
      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: #fff
    }

    .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: #fff;
      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
      }

      .hero--blogpost,
      .hero--partner {
        min-height: 450px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding-top: 24px !important;
        padding-bottom: 12px !important
      }

      .hero--index {
        background-image: url('https://periferiaitgroup.com/assets/img/BannerInicioMobile.webp') !important;
      }

      /* Home · fondos móviles de Nosotros y Perifuturo */
      #nosotros.gs-4c91eb68 {
        background-image: url('https://periferiaitgroup.com/assets/img/Home-nosotros-Movil.webp') !important;
        background-position: center !important;
      }

      .perifuturo {
        background-image: url('https://periferiaitgroup.com/assets/img/Home-Perifuturo-Movil.webp') !important;
        background-position: center !important;
      }

      /* Banners móviles de servicios */
      .hero--itstrategy {
        background-image: url('https://periferiaitgroup.com/assets/img/mobile/ItStrategyMovil.webp') !important;
      }

      .hero--itstaffing {
        background-image: url('https://periferiaitgroup.com/assets/img/mobile/Ai-AugmentedMovil.webp') !important;
      }

      .hero--software {
        background-image: url('https://periferiaitgroup.com/assets/img/mobile/SoftwareEngineeringMovil.webp') !important;
      }

      .hero--products {
        background-image: url('https://periferiaitgroup.com/assets/img/mobile/Products-platformsMovil.webp') !important;
      }

      .hero--leadership {
        background-image: url('https://periferiaitgroup.com/assets/img/mobile/IT-LeadershipMovil.webp') !important;
      }

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

      .hero h1 {
        font-size: 40px
      }

      .results .result-card {
        padding: 14px 16px;
      }

      .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: row;
      flex-wrap: wrap;
      align-items: center;
      align-content: flex-start;
      justify-content: flex-start;
      gap: 13px 12px;
      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 {
      flex: 1;
      min-width: 0;
      font: 700 16px/1.25 Outfit, sans-serif
    }

    .need-btn .letter,
    .need-btn .icon {
      flex: none
    }

    .need-details {
      flex-basis: 100%
    }

    .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: 600 1em Outfit, sans-serif;
      text-decoration: none;
    }

    .need-details a.cap-more {
      display: block;
      width: fit-content;
      margin-top: 12px;
      padding: 9px 18px;
      border-radius: 999px;
      background: var(--bright);
      color: #111;
      transition: background .2s ease, transform .2s ease;
    }
    .need-details a.cap-more:hover,
    .need-details a.cap-more:focus-visible {
      background: var(--teal);
      color: #fff;
      transform: translateY(-2px);
      outline: none;
    }

    .need-panel {
      display: none
    }

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

      .need-btn {
        min-height: 164px;
        overflow: visible
      }

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

      .need-details {
        max-height: none;
        opacity: 1;
        overflow: visible
      }
    }

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

    @media(max-width:1024px) {
      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: 10px !important;
        background: rgba(109, 253, 140, .08) !important;
        color: var(--bright);
        overflow: hidden;
        flex-shrink: 0;
      }

      .menu-toggle-icon {
        width: 22px;
        height: 22px;
        display: block
      }

      .menu-toggle-icon--close {
        display: none
      }

      .menu-toggle.is-open .menu-toggle-icon--open {
        display: none
      }

      .menu-toggle.is-open .menu-toggle-icon--close {
        display: block
      }

      .mobile-menu {
        position: fixed;
        z-index: 10;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - 64px);
        display: grid;
        align-content: start;
        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;
        overflow-y: auto;
        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;
        color: var(--teal)
      }

      .mobile-menu-group {
        border-bottom: 1px solid rgba(255,255,255,.08)
      }

      .mobile-menu-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: none;
        border: none;
        padding: 12px 0;
        margin: 0;
        color: #fff;
        font: 300 1.2em Outfit, sans-serif;
        text-align: left;
        cursor: pointer
      }

      .mobile-menu-caret {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex: none
      }

      .mobile-menu-trigger[aria-expanded="true"] .mobile-menu-caret {
        transform: rotate(-135deg)
      }

      .mobile-menu-panel {
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: max-height .3s ease
      }

      .mobile-menu-trigger[aria-expanded="true"] + .mobile-menu-panel {
        max-height: 480px
      }

      .mobile-menu .mobile-menu-panel a {
        padding: 10px 0 10px 16px;
        color: #fff;
        font: 500 1.1em Outfit, sans-serif;
        text-decoration: none;
        border-left: 2px solid var(--bright);
        border-bottom: 2px solid transparent
      }

      .mobile-menu .mobile-menu-panel a:hover,
      .mobile-menu .mobile-menu-panel a:focus-visible {
        border-bottom-color: var(--bright)
      }

      .mobile-menu-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.08)
      }

      .mobile-menu .mobile-menu-socials a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #6dfd8c;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0
      }

      .mobile-menu-socials img {
        width: 20px;
        height: auto
      }

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

      .hero-copy {
        padding: 20px
      }

      .hero h1 {
        font-size: 42px
      }

      .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:1025px) {

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

.need-btn {
              border-left: 5px solid #6dfd8c !important;
              border-right-width: 1px !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:#000000;font-size:1.1em;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:#fff;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)}
.pillars-grid--stack{grid-template-columns: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:1.1em;line-height:1.5;color:#000000}
.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:1.1em;line-height:1.5;color:#000000}

.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;object-position:top}

/* ---------- 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;object-position:top;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:#000000}
@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;object-position:top;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;object-position:top;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:1.1em;line-height:1.6;color:#000000}
@media(max-width:900px){
  .evidencia-intro-grid{grid-template-columns:1fr}
}
.metric-card{
  background: radial-gradient(120% 160% at 25% 15%, #0e2e2b 0%, #04120f 75%);
  border: 1px solid rgba(109, 253, 140, .45);
  box-shadow: 0 0 0 1px rgba(109, 253, 140, .08), 0 8px 24px rgba(0, 0, 0, .35);
  color:#fff;border-radius:16px;padding:22px;text-align:center;
}
.metric-card .metric-icon{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--bright);
  background:rgba(109,253,140,.08);
  display:grid;place-items:center;
  margin:0 auto 12px;
}
.metric-card .metric-icon img{width:24px;height:24px;object-fit:contain}
.metric-card strong{display:block;font:800 28px Outfit,sans-serif;color:var(--bright)}
.metric-card span{font-size:1.1em;color:#fff}
.footprint-strip{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:#000000}
.footprint-strip strong{color:var(--dark)}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inspira-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
@media(max-width:700px){.inspira-grid{grid-template-columns:1fr}}
.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;object-position:top;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:1em;line-height:1.5;color:#000000;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 1em 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:#000000}
.case-card h3{font-size:17px;margin:2px 0}
.case-card p{font-size:1em;line-height:1.5;color:#000000;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:1em;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 img{width:24px;height:24px;object-fit:contain}

.accordion-panel-inner{display:flex;align-items:center;gap:28px}
.accordion-panel-icon-card{
  width:150px;height:150px;flex-shrink:0;
  background:var(--teal);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  box-shadow:0 10px 24px rgba(6,54,53,.25);
}
.accordion-panel-icon-card img{width:100%;height:100%;object-fit:contain}
.accordion-panel-text{flex:1;min-width:0}
@media(max-width:620px){
  .accordion-panel-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .accordion-panel-icon-card{width:120px;height:120px}
}
.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)}

/* ---------- Liferay: banner de alianza (una sola tarjeta con degradado) ---------- */
.alliance-banner{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  margin-top:32px;
  padding:40px 60px;
  border-radius:130px;
  background:linear-gradient(90deg, #6DFD8C 0%, #063635 55%);
}
.alliance-banner-pill{
  display:flex;align-items:center;
  width:100%;
  max-width:340px;
}
.alliance-banner-pill img{width:100%;height:auto;object-fit:contain}
.alliance-banner-copy{flex:1;min-width:260px}
.alliance-banner-union{width:55%;height:auto;object-fit:contain;margin-top:8px}
.alliance-banner-copy p{color:#fff;font-size:1em;line-height:1.6;margin:0 0 16px}
.alliance-banner-tag{display:flex;align-items:center;gap:14px}
.alliance-banner-tag img{width:26px;height:26px;object-fit:contain}
.alliance-banner-tag span{display:flex;align-items:center;gap:10px;color:#fff;font:700 15px Outfit,sans-serif;padding-left:14px;border-left:1px solid rgba(255,255,255,.4)}
.alliance-banner-tag span b{display:block;font:700 11px Outfit,sans-serif;letter-spacing:.03em;color:#fff}
@media(max-width:700px){
  .alliance-banner{padding:26px;border-radius:28px;grid-template-columns:1fr}
}

/* ---------- Results: en responsive, cards centradas y del ancho de su texto (no ancho completo) ---------- */
@media(max-width:900px){
  .results{flex-direction:column;flex-wrap:nowrap;align-items:center}
  .results .result-card{flex:0 0 auto;width:auto;max-width:100%}
}
@media(max-width:480px){
  .results{gap:14px}
  .results .result-card{padding:20px 22px}
  .results--index-first .result-text b,
  .results--banner-style .result-text b{
    white-space: normal;
  }
}
@media(max-width:900px){
  .result-row.gs-886008cc{flex-wrap:wrap;gap:16px}
  .result-row.gs-886008cc .result-card{flex:1 1 220px}
}

/* ---------- Carrusel de certificaciones más grande (para que quepan los badges completos) ---------- */
.clients-carousel--lg .logo-card{width:230px;height:170px;padding:14px}
.clients-carousel--lg .logo-card img{max-height:150px}
@media(max-width:620px){
  .clients-carousel--lg .logo-card{width:180px;height:140px}
  .clients-carousel--lg .logo-card img{max-height:120px}
}

/* ---------- Cards de ícono para prácticas validadas (en vez de imagen tipo banner) ---------- */
.case-card-icon{height:150px;display:flex;align-items:center;justify-content:center;background:#fff;padding:24px}
.case-card-icon img{max-width:65%;max-height:65%;width:auto;height:auto;object-fit:contain}

/* ---------- Tarjetas de certificación Associate/Expert (Microsoft) ---------- */
.cert-badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.cert-badge-card{background:#fff;border:1px solid var(--muted);border-left:5px solid var(--bright);border-radius:14px;padding:26px}
.cert-badge-card img{width:88px;height:88px;object-fit:contain;display:block;margin-bottom:16px}
.cert-badge-card h3{font-size:17px;margin:0 0 16px;color:var(--dark)}
.cert-badge-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.cert-badge-card ul li{display:flex;gap:10px;align-items:flex-start;font-size:1em;line-height:1.4;color:#000000}
.cert-badge-card .door-icon--deliverable{flex-shrink:0;width:26px;height:26px;background:var(--light)}
.cert-badge-card .door-icon--deliverable .icon{width:13px;height:13px;stroke:var(--dark)}
@media(max-width:700px){
  .cert-badge-grid{grid-template-columns:1fr}
}

/* ---------- Cita destacada (pull-quote) ---------- */
.pull-quote{max-width:820px;margin:0 auto;text-align:center}
.pull-quote p{font:600 26px/1.45 Outfit,sans-serif;color:var(--teal);margin:0}
.pull-quote p::before{content:'\201C';color:var(--teal)}
.pull-quote p::after{content:'\201D';color:var(--teal)}
@media(max-width:620px){.pull-quote p{font-size:20px}}

/* ---------- Metric card con detalle (bullets) ---------- */
.metric-card .metric-title{display:block;font:700 15px Outfit,sans-serif;color:#fff;margin-top:2px}
.metric-card ul{text-align:left;margin:12px 0 0;padding-left:18px;font-size:1em;line-height:1.6;color:#fff}
.metric-card ul li{margin-bottom:4px}

/* ---------- Línea de tiempo horizontal (AWS) ---------- */
.aws-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:16px}
.aws-timeline::before{content:'';position:absolute;top:60px;left:6%;right:6%;height:2px;background:var(--muted)}
.aws-timeline-item{position:relative;padding:0 16px;text-align:center}
.aws-timeline-node{width:120px;height:120px;border-radius:24px;background:#fff;border:2px solid var(--bright);display:grid;place-items:center;margin:0 auto;position:relative;z-index:1;overflow:hidden;padding:14px;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease}
.aws-timeline-node img{width:100%;height:100%;object-fit:contain}
.aws-timeline-item:hover .aws-timeline-node{transform:translateY(-4px);box-shadow:0 10px 22px rgba(21,96,29,.18)}
.aws-timeline-item h3{font-size:1em;margin:16px 0 6px}
.aws-timeline-info{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease;margin-top:0}
.aws-timeline-item:hover .aws-timeline-info{max-height:180px;opacity:1;margin-top:6px}
.aws-timeline-item p{font-size:1em;line-height:1.5;color:#000000;margin:0}
@media(max-width:900px){
  .aws-timeline{grid-template-columns:1fr;gap:28px}
  .aws-timeline::before{left:60px;top:6%;bottom:6%;right:auto;width:2px;height:auto}
  .aws-timeline-item{text-align:left;padding-left:140px;min-height:120px}
  .aws-timeline-node{position:absolute;left:0;top:0;margin:0}
  .aws-timeline-info{max-height:none;opacity:1;overflow:visible;margin-top:8px}
}
@media(hover:none){
  .aws-timeline-info{max-height:none;opacity:1;overflow:visible;margin-top:8px}
}

/* ---------- Certificaciones agrupadas (Calificaciones validadas por AWS) ---------- */
.certs--aws{text-align:left;background:var(--teal)}
.certs--aws .eyebrow,.certs--aws h2{text-align:left}
.certs--aws h2{color:#fff}
.certs--aws .deliverable-item,.certs--aws .deliverable-item span{color:#fff !important}

.qualification-grid{display:grid;gap:14px}
.check-icon{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--bright);
  background:rgba(109,253,140,.08);
  display:grid;place-items:center;flex-shrink:0;
}
.check-icon .icon{width:16px;height:16px;stroke:#fff}
.qualification-card{
  display:flex;align-items:center;gap:14px;
}
.qualification-card span{color:#fff;font:600 1em Outfit,sans-serif}
.deliverables-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:none;width:100%;margin:24px auto 0;text-align:left}
.deliverables-group{margin-top:0;max-width:none;margin-left:0;margin-right:0;text-align:left}
.deliverables-group-title{display:block;font:700 13px Outfit,sans-serif;color:var(--bright);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;text-align:left}
.deliverables-grid.deliverables-grid--2col{grid-template-columns:repeat(2,1fr);max-width:none;margin-left:0;margin-right:0}
.deliverables-grid.deliverables-grid--1col{grid-template-columns:1fr;max-width:none;margin-left:0;margin-right:0}
@media(max-width:900px){
  .deliverables-columns{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
  .deliverables-grid.deliverables-grid--2col{grid-template-columns:1fr}
}

/* ---------- Listas dentro del hover de case-card (prácticas validadas) ---------- */
.case-card-hover ul{margin:0;padding-left:18px}
.case-card-hover ul li{font-size:1em;line-height:1.5;color:#000000;margin-bottom:5px}

/* ---------- Hero de Partners: solo texto centrado inferior, tamaño título ---------- */
.hero--partners{position:relative;min-height:460px}
.hero--partners .hero-bottom-text{
  position:absolute;
  left:50%;
  bottom:56px;
  transform:translateX(-50%);
  margin:0;
  text-align:center;
  font:800 52px/1.15 Outfit,sans-serif;
  z-index:1;
  width:100%;
  padding:0 20px;
}
.hero-bottom-text .line-white{color:#fff;display:block}
.hero-bottom-text .line-bright{color:var(--bright);display:block}
@media(max-width:900px){
  .hero--partners{min-height:340px}
  .hero--partners .hero-bottom-text{font-size:34px;bottom:36px}
}
@media(max-width:620px){
  .hero--partners{min-height:260px}
  .hero--partners .hero-bottom-text{font-size:24px;bottom:22px}
}

/* ---------- Sección con imagen de fondo: texto alineado a la izquierda ---------- */
.pdc-feature{min-height:480px;display:flex;align-items:center}
.pdc-feature-copy{max-width:560px;margin-right:auto;text-align:left;color:#fff}
.pdc-feature-copy h2{color:#fff;margin:0 0 18px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.pdc-feature-copy p{color:#e2fbe8;font-size:1em;line-height:1.6;margin:0 0 14px;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.pdc-feature-copy p:last-child{margin-bottom:0}
@media(max-width:700px){
  .pdc-feature-copy{max-width:100%;margin-right:0;text-align:left}
}

/* ---------- Cards de logos de partners (sección "Conoce nuestros partners") ---------- */
.partner-logo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:32px;
}
.partner-logo-card{
  position:relative;
  background:#fff;
  border:1px solid var(--bright);
  border-radius:14px;
  min-height:110px;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.partner-logo-card img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:72%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:opacity .25s ease;
}
.partner-logo-card--tight img{max-height:34px}
.partner-logo-card:has(.cap-more){min-height:154px;padding-bottom:56px}
.partner-logo-card:has(.cap-more) img{transition:opacity .25s ease, top .25s ease}
.partner-logo-card:has(.cap-more):hover img{top:calc(50% - 28px)}
.partner-logo-card .logo-hover{opacity:0}
.partner-logo-card:hover{
  background:var(--teal);
  border-color:var(--teal);
  box-shadow:0 16px 34px rgba(6,54,53,.22);
  transform:translateY(-3px);
}
.partner-logo-card:hover .logo-default{opacity:0}
.partner-logo-card:hover .logo-hover{opacity:1}
.partner-logo-card .cap-more{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  margin-top:0;
  padding:9px 18px;
  font-size:1.1em;
  opacity:0;
  transition:opacity .25s ease;
  z-index:2;
  white-space:nowrap;
}
.partner-logo-card:hover .cap-more{opacity:1}
.partner-logo-card .cap-more:hover,
.partner-logo-card .cap-more:focus-visible{
  transform:translateX(-50%) translateY(-2px);
}
@media(hover:none){
  .partner-logo-card .cap-more{opacity:1}
}
@media(max-width:480px){
  .partner-logo-card .cap-more{font-size:0.85em;padding:7px 12px}
}
/* Fallback: partners sin versión blanca dedicada (ej. SAP) siguen usando el filtro de inversión */
.partner-logo-card--filter img{filter:none}
.partner-logo-card--filter:hover img{filter:brightness(0) invert(1)}
@media(max-width:900px){
  .partner-logo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(hover:none){
  .partner-logo-card{background:var(--teal);border-color:var(--teal)}
  .partner-logo-card .logo-default{opacity:0}
  .partner-logo-card .logo-hover{opacity:1}
  .partner-logo-card--filter 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:600 1em 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:1em;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:1em;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:1em;line-height:1.5;color:#000000;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:600 1.2em 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 1.3em 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,padding-bottom .35s ease}
.accordion-item.is-open .accordion-panel{max-height:1400px}
.accordion-panel p{color:#fff;font-size:1em;line-height:1.6;margin:0 0 10px;padding:0 4px}
.accordion-panel ul{margin:0 0 24px;padding-left:0;list-style:none}
.accordion-panel ul li{color:#fff;font-size:1em;line-height:1.6;margin-bottom:6px;position:relative;padding-left:28px}
.accordion-panel ul li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background-color:var(--bright);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") no-repeat center / contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") no-repeat center / contain}

/* ---------- 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 0 68px}
.accordion--light .accordion-item.is-open .accordion-panel{padding:0 22px 22px 68px}
.accordion--light .accordion-panel p{color:#000000;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 0 68px}
.accordion--light-plain .accordion-item.is-open .accordion-panel{padding:0 4px 22px 68px}
.accordion--light-plain .accordion-panel p{color:#000;margin:0}
.accordion--light-plain .accordion-panel ul{margin:0 0 4px;padding-left:0;list-style:none}
.accordion--light-plain .accordion-panel ul li{color:#000;position:relative;padding-left:28px}
.accordion--light-plain .accordion-panel ul li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background-color:var(--bright);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") no-repeat center / contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") no-repeat center / contain}

.cap-grid--reveal .cap-card{min-height:150px;align-content:center}
.cap-grid--reveal .cap-card h3{flex-basis:100%}

/* ---------- 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);
  align-content:center;
  gap:10px 12px;
  min-height:80px;
  transition:transform .3s ease, background .25s ease, box-shadow .25s ease;
}
.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{
  flex-basis:100%;
  color:#fff;
  font-size:1.8em;
  margin:0;
  transition:font-size .25s ease;
}
.cap-grid--dark .cap-card:hover h3{font-size:1.4em}
.cap-grid--dark .cap-sub{color:#fff}
.cap-grid--dark .cap-card ul{text-align:left}
.cap-grid--dark .cap-card ul li{color:#fff}
.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;object-position:top;display:block}
@media(max-width:900px){
  .cap-grid--dark{grid-template-columns:1fr}
}
.cap-grid--reveal .cap-card .cap-hover-wrap{
  flex-basis:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease;
}
.cap-grid--reveal .cap-card:hover .cap-hover-wrap{
  max-height:260px;
  opacity:1;
  margin-top:8px;
}
.cap-grid--reveal .cap-card .cap-hover-wrap .cap-sub{margin-bottom:10px}
.cap-grid--reveal .cap-card .cap-hover-wrap ul{margin:0 0 10px;padding-left:18px}
.cap-grid--reveal .cap-card .cap-hover-wrap .cap-more{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-hover-wrap{
    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:1em;line-height:1.5;color:#000000;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:1em;line-height:1.45;color:#000000}

/* ---------- 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:white;font:500 1.1em Montserrat,sans-serif}
.door-icon--deliverable{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--bright);background:rgba(109,253,140,.08)}
.door-icon--deliverable .icon{stroke:#fff;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:#fff}
.cap-card--teal ul li{color:#fff}
.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 !important}
  .metrics-strip{grid-template-columns:1fr 1fr !important}
  .about-grid{grid-template-columns:1fr}
  .offer-hero-grid{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .metrics-strip{grid-template-columns:1fr !important}
}

/* ===== 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') top/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:1em;font-weight:500;color:#fff;font-family:Montserrat;}

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

@media(max-width:900px){
  .gs-4c91eb68{padding:60px 24px}
  .gs-9469f2b5{width:100%}
  .gs-4fd1f528{max-width:100%;padding:20px 12px}
  .gs-ac8f6ee8{font-size:1.6em}
  .gs-5a5a7f17{font-size:0.85em}
  .gs-e35d22eb{height:38px}
}
@media(max-width:480px){
  .gs-4c91eb68{padding:48px 20px}
  .gs-4fd1f528{padding:16px 8px}
  .gs-ac8f6ee8{font-size:1.35em}
  .gs-5a5a7f17{font-size:0.78em}
}

.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://periferiaitgroup.com/assets/img/it-strategy/ITStrategy.webp');}

.gs-f591c067{background-image:url('https://periferiaitgroup.com/assets/img/it-staffing/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://periferiaitgroup.com/assets/img/Itleadership/ITLeadership.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:#000000;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:#000000;}

.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:#000000;}

.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:1.1em;line-height:1.6;}

.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;}
/* Need cards: letra + ícono + título en una sola fila (desktop) */
@media (min-width: 1280px) {
  .need-btn {
    align-content: center;
    align-items: flex-start;
    gap: 13px 8px;
    padding: 20px 14px;
  }
  .need-btn .letter {
    width: 30px;
    height: 30px;
  }
  .need-btn .icon {
    width: 22px;
    height: 30px;
  }
  .need-btn .label {
    font-size: 15px;
    padding-top: 5px;
    min-height: calc(2.5em + 5px);
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Need cards en tablet y laptops pequeñas (701–1279px): una columna, detalle siempre visible (sin hover en táctil) */
@media (min-width: 701px) and (max-width: 1279px) {
  .need-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .need-btn {
    min-height: 0;
    overflow: visible;
  }
  .need-btn:hover,
  .need-btn:focus-visible {
    flex: auto;
  }
  .need-details {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
}

/* Need cards en laptops (1280–1439px): versión compacta para que el título no se corte */
@media (min-width: 1280px) and (max-width: 1439px) {
  .need-btn {
    gap: 13px 6px;
    padding: 20px 12px;
  }
  .need-btn .letter {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .need-btn .icon {
    width: 18px;
    height: 28px;
  }
  .need-btn .label {
    font-size: 14px;
    padding-top: 4px;
  }
  .need-btn:hover,
  .need-btn:focus-visible {
    flex: 1.3;
  }
}

/* Formulario de contacto: anti-spam */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-turnstile{margin:4px 0 16px;min-height:65px}

/* Acordeón con etiqueta (Products & Platforms):
   desktop y tablet en una sola fila (comportamiento base);
   móvil en dos filas: etiqueta arriba, título abajo */
@media(max-width:620px){
  .accordion-trigger:has(.accordion-tag){
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"icon tag plus" "icon title plus";
    align-items:center;
    column-gap:12px;
    row-gap:6px;
  }
  .accordion-trigger:has(.accordion-tag) .door-icon{grid-area:icon;margin-right:0}
  .accordion-trigger:has(.accordion-tag) .accordion-tag{grid-area:tag;justify-self:start;font-size:1em;white-space:normal}
  .accordion-trigger:has(.accordion-tag) .accordion-title{grid-area:title;min-width:0}
  .accordion-trigger:has(.accordion-tag) .accordion-icon{grid-area:plus}
  /* Texto del panel alineado con el título */
  .accordion--light-plain .accordion-item:has(.accordion-tag) .accordion-panel,
  .accordion--light-plain .accordion-item.is-open:has(.accordion-tag) .accordion-panel{padding-left:56px}
}

/* Landing US: grilla de 3 modelos de trabajo */
.pillars-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pillars-grid--3{grid-template-columns:1fr}}

/* Perifuturo · Objetivos: ícono + etiqueta dentro de una píldora, título abajo */
.cap-grid--pill .cap-card{padding:28px 26px;gap:22px}
.cap-grid--pill .cap-pill{
  display:inline-flex;align-items:center;gap:28px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  padding:7px 36px 7px 7px;
  max-width:100%;
}
.cap-grid--pill .cap-pill .door-icon{width:64px;height:64px;background:#d9fbe2}
.cap-grid--pill .cap-pill .door-icon .icon{width:30px;height:30px;stroke:var(--teal)}
.cap-grid--pill .cap-pill .door-icon img{width:36px;height:36px}
.cap-grid--pill .cap-pill .tag-cap{background:none;padding:0;color:var(--bright);font-weight:700}
.cap-grid--pill .cap-card h3{font-weight:700;line-height:1.25}
@media(max-width:620px){
  .cap-grid--pill .cap-card{padding:22px 18px}
  .cap-grid--pill .cap-pill{gap:16px;padding-right:22px}
  .cap-grid--pill .cap-pill .door-icon{width:52px;height:52px}
  .cap-grid--pill .cap-card h3{font-size:1.4em}
}

/* Página Contáctanos: formulario en fondo blanco junto a una imagen */
.contact-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.contact-page-media{border-radius:18px;overflow:hidden;background:var(--light);min-height:420px}
.contact-page-media img{width:100%;height:100%;object-fit:cover;display:block}
.contact-page .gs-cf1ef740{border:1px solid var(--muted);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(6,54,53,.10)}
@media(max-width:900px){
  .contact-page-grid{grid-template-columns:1fr;gap:28px}
  .contact-page-media{min-height:260px}
}

/* Perifuturo · Objetivos en 3 columnas (2 en tablet, 1 en móvil) */
.cap-grid--dark.cap-grid--pill{grid-template-columns:repeat(3,1fr)}
.cap-grid--pill .cap-card h3{font-size:1.5em}
.cap-grid--pill .cap-card:hover h3{font-size:1.25em}
@media(max-width:1100px){.cap-grid--dark.cap-grid--pill{grid-template-columns:repeat(2,1fr)}}
.cap-grid--pill .cap-card{align-content:flex-start}
.cap-grid--pill .cap-pill{gap:20px;padding-right:26px}
.cap-grid--pill .cap-pill .tag-cap{white-space:nowrap}

/* Perifuturo · frase destacada */
.perifuturo-quote{
  max-width:650px;
  margin:40px auto 0;
  text-align:center;
  font-style:italic;
  font-size:1.1em;
  color:#CCFFD6;
  font-weight:500;
  line-height:1.5em;
}

/* Perifuturo · resultados: ícono arriba, número y texto centrados
   (mismo degradado que los resultados de las páginas de servicios) */
.results--perifuturo .result-card{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:30px 24px;
  min-height:0;
}
.results--perifuturo .result-stack-icon{width:48px;height:48px;object-fit:contain;display:block}
.results--perifuturo .result-text{display:flex;flex-direction:column;align-items:center;gap:6px}
.results--perifuturo .result-text b{font:700 2.8em/1 Outfit,sans-serif;color:var(--bright)}
.results--perifuturo .result-text span{line-height:1.35;color:#fff}
@media(max-width:1000px){
  .results.results--perifuturo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .results--perifuturo .result-card{width:100%}
}
@media(max-width:620px){
  .results.results--perifuturo{grid-template-columns:1fr}
  .results--perifuturo .result-card{padding:24px 18px}
  .results--perifuturo .result-text b{font-size:2.4em}
}

/* Perifuturo · Nuestro equipo, nuestro impacto (mismo formato que "Nosotros" del home) */
.work--perifuturo.gs-4c91eb68{
  background:#063635 url('https://periferiaitgroup.com/assets/img/perifuturo/nuestroequipo-nuestroimpacto.webp') center/cover no-repeat;
  min-height:520px;
}
.work--perifuturo .gs-9469f2b5{width:55%}
.work--perifuturo .gs-55f09f0c{max-width:560px}
@media(max-width:900px){.work--perifuturo .gs-9469f2b5{width:100%}.work--perifuturo.gs-4c91eb68{min-height:0}}

/* Perifuturo · Cita del CEO con firma */
.ceo-quote .wrap{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.ceo-quote-text{font:500 1.25em/1.5 Outfit,sans-serif;color:#000;margin:0;max-width:640px}
.ceo-quote-signature{width:220px;max-width:70%;height:auto;margin:44px 0 28px;display:block}
.ceo-quote-role{display:inline-block;border:1px solid #000;border-radius:999px;padding:9px 16px;font:700 .85em Outfit,sans-serif;color:#000}
@media(max-width:620px){
  .ceo-quote-text{font-size:1.05em}
  .ceo-quote-signature{width:180px;margin:32px 0 22px}
}

/* Acordeón con guiones simples en lugar de check (Play Digital Consulting) */
.accordion--dash .accordion-panel ul{padding-left:4px}
.accordion--dash .accordion-panel ul li{padding-left:18px}
.accordion--dash .accordion-panel ul li::before{
  content:"–";top:0;width:auto;height:auto;
  background:none;-webkit-mask:none;mask:none;
  color:currentColor;font-weight:600;
}

/* Nosotros · ¿Por qué trabajar con nosotros?: cajas con el formato de resultados de servicios */
.benefits-result-grid .result-card{
  background:linear-gradient(180deg,#000000 30%,#063635 110%);
  border:none;
  box-shadow:none;
  min-height:128px;
  padding:24px 26px;
}
.benefits-result-grid .result-text span{color:#fff}

/* Nosotros · Qué buscamos: texto a la izquierda, imagen a la derecha */
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media .section-head{margin:0;max-width:none}
.section--split-media{padding-top:2%;padding-bottom:2%}
.split-media-img{background:none;display:flex;justify-content:center;align-items:center}
.split-media-img img{width:70%;height:auto;display:block}
@media(max-width:900px){
  .split-media{grid-template-columns:1fr;gap:28px}
}

/* Landings por país: país activo en el menú y en "Presencia" */
.nav-country{display:inline-flex;align-items:center;gap:8px}
.nav-country .flag-img{width:20px;height:14px;object-fit:cover;border-radius:2px}
.country-item--active{color:var(--dark);box-shadow:inset 0 -3px 0 var(--bright)}

/* Subtítulo del banner (Products & Platforms) */
.hero .hero-subtitle{font:600 1.5em/1.3 Outfit,sans-serif;color:var(--bright);margin:4px 0 14px}
@media(max-width:620px){.hero .hero-subtitle{font-size:1.2em}}

/* Problema en un solo bloque (Products & Platforms) */
.problem-grid--single{grid-template-columns:1fr}
.problem-grid--single .problem-card p{max-width:900px}

/* Preguntas frecuentes: acordeón sin ícono ni etiqueta */
.accordion--faq .accordion-panel,
.accordion--faq .accordion-item.is-open .accordion-panel{padding-left:4px}
.accordion--faq .accordion-title{font-size:1.15em}

/* Contáctanos: solo formulario, fondo degradado #ECFFF0 → blanco */
.contact-page--form-only{background:linear-gradient(180deg,#ECFFF0 0%,#FFFFFF 100%)}
.contact-page--form-only .contact-page-grid{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}

/* Contáctanos: formulario sin tarjeta (solo en esta página) */
.contact-page--form-only .form {
  background: none;
  border: none;
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-page--form-only .gs-cf1ef740 {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ===== Formulario: mensajes de envío visibles sobre fondo blanco ===== */
.form .form-success,
.form .form-error,
.form .form-status{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  font:500 15px/1.5 Montserrat,sans-serif;
}
.form .form-success[hidden],.form .form-error[hidden],.form .form-status[hidden]{display:none}
.form .form-success{background:#E9FDEE;border:1.5px solid #2BB24C;color:#0B4D22}
.form .form-error{background:#FFF1F1;border:1.5px solid #E5484D;color:#8A1C1C}
.form .form-status{background:#F3F6F5;border:1.5px solid #C9D6D1;color:#233}
.form .form-success::before,.form .form-error::before{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font:700 14px/1 Outfit,sans-serif;color:#fff;
}
.form .form-success::before{content:"✓";background:#2BB24C}
.form .form-error::before{content:"!";background:#E5484D}
.form .form-status::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:2.5px solid #C9D6D1;border-top-color:var(--teal);animation:formSpin .8s linear infinite;
}
@keyframes formSpin{to{transform:rotate(360deg)}}

/* Botón mientras se envía */
.form button[aria-busy="true"]{opacity:.7;cursor:progress}

/* Botón de envío: hover visible sobre la tarjeta blanca del formulario */
.form .btn-primary:hover,
.form .btn-primary:focus-visible{background:var(--teal);color:#fff}

/* ===== Página legal (Política de privacidad) ===== */
.hero--legal{background:#063635;padding-top:72px;padding-bottom:56px}
.hero--legal h1{max-width:820px}
.legal-section{padding-top:56px}

/* Dos columnas: índice fijo a la izquierda, texto a la derecha */
/* overflow-x:hidden en html/body anula position:sticky; clip evita igual el scroll lateral */
html:has(.legal-layout),body:has(.legal-layout){overflow-x:clip}
.legal-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start}
.legal-aside{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto}
nav.legal-toc{display:block;background:#F5FBF7;border:1px solid #D6EDE0;border-radius:14px;padding:22px 20px}
nav.legal-toc strong{display:block;font:700 1em Outfit,sans-serif;color:var(--ink);margin-bottom:12px}
nav.legal-toc ol{display:block;margin:0;padding-left:22px;font:500 14px/1.4 Montserrat,sans-serif}
nav.legal-toc li{margin-bottom:9px;color:var(--dark)}
nav.legal-toc a{color:var(--dark);text-decoration:none}
nav.legal-toc a:hover,nav.legal-toc a:focus-visible{text-decoration:underline}
nav.legal-toc a:visited{color:var(--dark)}

.legal-body{max-width:820px;color:#1b2b28;font-size:1.05em;line-height:1.7}
.legal-body h2{font:700 1.45em/1.3 Outfit,sans-serif;color:var(--dark);margin:44px 0 14px;scroll-margin-top:110px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font:700 1.15em/1.3 Outfit,sans-serif;color:var(--ink);margin:28px 0 10px}
.legal-body p{margin:0 0 14px}
.legal-body ul{margin:0 0 16px;padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.legal-note{background:#ECFFF0;border-left:4px solid var(--bright);padding:14px 18px;border-radius:8px}

/* Tablet y móvil: índice arriba, sin columna fija */
@media(max-width:1000px){
  .legal-layout{grid-template-columns:1fr;gap:32px}
  .legal-aside{position:static;max-height:none;overflow:visible}
  nav.legal-toc ol{columns:2;column-gap:28px}
  nav.legal-toc li{break-inside:avoid}
}
@media(max-width:620px){
  nav.legal-toc ol{columns:1}
  .legal-body h2{font-size:1.25em}
}

/* ===== Casilla de autorización de datos en formularios ===== */
.form .form-consent{display:flex;align-items:flex-start;gap:10px;margin:2px 0;font:400 13.5px/1.5 Montserrat,sans-serif;color:#2a3a36;cursor:pointer}
.form .form-consent input{flex:none;width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--teal);cursor:pointer}
.form .form-consent a{color:var(--dark);font-weight:600;text-decoration:underline}

/* ===== reCAPTCHA: insignia oculta + aviso legal obligatorio de Google =====
   Google permite ocultar la insignia solo si se muestra este texto en el formulario.
   Se usa visibility (no display:none) para no romper la verificación. */
.grecaptcha-badge{visibility:hidden !important}
.form .recaptcha-note{margin:0;font:400 11.5px/1.5 Montserrat,sans-serif;color:#5b6b67;text-align:center}
.form .recaptcha-note a{color:inherit;text-decoration:underline}

/* ===== Banner de cookies ===== */
.cookie-banner{
  position:fixed;z-index:9999;left:24px;bottom:24px;
  max-width:420px;padding:20px 22px;border-radius:16px;
  background:#063635;color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  font:400 14px/1.55 Montserrat,sans-serif;
}
.cookie-banner[hidden]{display:none}
.cookie-banner__title{display:block;font:700 16px Outfit,sans-serif;color:var(--bright);margin-bottom:6px}
.cookie-banner__text{margin:0 0 14px;color:#e6f5ec}
.cookie-banner__text a{color:#fff;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner__btn{
  flex:1 1 auto;padding:10px 18px;border-radius:999px;border:1.5px solid var(--bright);
  background:var(--bright);color:#063635;font:700 14px Outfit,sans-serif;cursor:pointer
}
.cookie-banner__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cookie-banner__btn:hover,.cookie-banner__btn:focus-visible{filter:brightness(1.08);outline:2px solid #fff;outline-offset:2px}
@media(max-width:620px){
  .cookie-banner{left:12px;right:12px;bottom:12px;max-width:none;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}