/* Imágenes con ancho/alto en el HTML (evitan saltos de diseño, CLS): con prioridad cero, cualquier regla
   del sitio que defina el tamaño manda; sin regla, la imagen conserva su tamaño natural */
:where(img[data-dim]){width:auto;height:auto;max-width:100%}
/* Enlace "Saltar al contenido": invisible hasta que se navega con teclado */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;background:var(--bright,#6dfd8c);color:#063635;font:700 14px Outfit,sans-serif;padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}

/* ===== Fuentes servidas desde el propio sitio (antes Google Fonts): sin hojas de estilo externas.
   Outfit y Montserrat · SIL Open Font License (ver assets/fonts/OFL-*.txt) ===== */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/outfit-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/outfit-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/outfit-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/outfit-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/outfit-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/outfit-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/montserrat-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-700-italic.woff2') format('woff2')}

/* =========================================================
   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: 1.1em;
      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: 1.1em
    }

    .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: 1.1em;
      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: 1.1em;
      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: 1.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: 1.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://periferiaitgroup.com/assets/img/perifuturo-inicio.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: 1.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: 1.1em;
      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-strategy / it-leadership / it-staffing /
   products-platforms.
   ========================================================= */

.wrap{width:100%;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:1.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:1.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:1.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 1.1em/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:1.1em}}

/* ---------- 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:1.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:1.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;
  height:200px;            /* todas las tarjetas del mismo tamaño */
  min-height:0;
  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:152px;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:opacity .25s ease;
}
.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:1.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:1.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:1.1em;line-height:1.5;color:#000000;margin:0}

/* ---------- Método en pasos (it-strategy) ---------- */
.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:#6dfd8c;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: manual;
    overflow-wrap: normal;
  }
}

/* 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))}
}

/* Footer: íconos de redes que bajan de línea si no caben (7 íconos en móvil) */
div:has(> .footer-icon-link){flex-wrap:wrap;row-gap:10px}
@media(max-width:420px){
  div:has(> .footer-icon-link){gap:10px !important}
  .footer-icon-link{width:36px;height:36px}
  .footer-icon-link img{width:24px;height:24px}
}

/* Footer: columnas de enlaces (Soluciones / Periferia / Contacto) que bajan de línea en móvil */
@media(max-width:620px){
  /* cada bloque del footer en su propia fila, a todo el ancho */
  footer > .wrap > div{flex:1 1 100% !important;max-width:none !important;min-width:0 !important}
  footer div[style*="flex:2.2;display:flex"]{flex-wrap:wrap;gap:24px 36px !important}
}
@media(max-width:620px){
  footer > div[style*="justify-content:space-between"]{row-gap:8px;line-height:1.5}
}

/* Resultados en tablet y móvil: todas las tarjetas con el mismo ancho */
@media(max-width:1000px){
  .results--banner-style .result-card{width:100%;max-width:460px;box-sizing:border-box}
}

/* ===== Contacto: pasos numerados de "Cómo empezamos" ===== */
.start-steps{margin:10px 0 0;padding-left:22px}
.start-steps li{margin-bottom:8px;line-height:1.5}
.start-steps li::marker{color:var(--bright);font-weight:700}

/* Autor de los artículos (E-E-A-T) */
.hero .byline{margin:12px 0 18px;font:500 .95em Montserrat,sans-serif;color:#cfe9da}
.hero .byline span{color:var(--bright);font-weight:600}

/* IT Staffing: métricas de casos siempre visibles (el hover queda solo como efecto) */
.cases--open .case-card-hover{max-height:none;opacity:1;overflow:visible;margin-top:10px}

/* Bloque "frontera" entre staffing y Software Engineering */
.scope-note{background:#ECFFF0;padding-top:32px;padding-bottom:32px}
.scope-note__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.scope-note__inner p{margin:0;font:600 1.1em/1.4 Outfit,sans-serif;color:var(--ink);max-width:720px}

/* Subtexto de certificaciones y campo opcional */
.certs .certs-sub{max-width:720px;margin:8px auto 22px;text-align:center;color:#2a3a36}
.form .optional{font-weight:400;color:#6b7b77}


/* ===================================================================
   HEADER INTELIGENTE: fijo arriba, se oculta al bajar y reaparece al subir
   (overflow-x:clip en lugar de hidden: evita el scroll lateral sin anular sticky)
   =================================================================== */
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-padding-top:84px}
/* Se fija el contenedor del header (el header solo mide lo mismo que su contenedor) */
/* Se oculta moviendo "top" (no transform): así el menú móvil, que vive dentro, sigue fijo a la pantalla */
.home-header-wrap{position:sticky;top:0;z-index:1000;transition:top .32s ease,box-shadow .32s ease}
.home-header-wrap.header--hidden{top:-90px}
.home-header-wrap.header--scrolled{box-shadow:0 8px 22px rgba(0,0,0,.28)}
.home-header-wrap.header--menu-open{position:fixed;top:0 !important;left:0;right:0}
@media(prefers-reduced-motion:reduce){.home-header-wrap{transition:none}}

/* ===== Subtítulos sobre los títulos (eyebrow): espaciado estándar en todo el sitio ===== */
.eyebrow{letter-spacing:.05em !important}

/* ===== Sin guiones al cortar palabras: la palabra baja completa ===== */
h1,h2,h3,h4,p,li,span,a,label,strong{hyphens:manual}

/* ===== Banners de Partners: texto centrado horizontal y verticalmente ===== */
.hero--partner{display:flex !important;flex-direction:column;align-items:center !important;justify-content:center !important;text-align:center}
.hero--partner .hero-copy{margin:0 auto;max-width:960px;text-align:center}
.hero--partner .hero-copy h1{margin-left:auto;margin-right:auto}
.hero--partners:not(.hero--contacto) .hero-bottom-text{top:50%;bottom:auto !important;transform:translate(-50%,-50%)}
/* El contenedor .page usaba overflow:hidden en móvil, lo que anulaba el header fijo */
.page{overflow-x:clip !important;overflow-y:visible !important}



/* Banner de Política de privacidad: capa oscura para asegurar la lectura del texto sobre la imagen */
.hero--legal{position:relative;isolation:isolate}
.hero--legal::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.15) 100%)}

/* ===== Home · Perifuturo: eyebrow en verde brillante y sección más alta para ver la imagen completa ===== */
.perifuturo .eyebrow,.perifuturo .eyebrow.gs-105a1fce{color:var(--bright) !important}
section.perifuturo{min-height:560px;background-position:center !important;justify-content:center;gap:18px}
@media(max-width:1000px){section.perifuturo{min-height:460px}}
@media(max-width:620px){section.perifuturo{min-height:520px}}

/* ===== Botón flotante "Contáctanos" (prueba opción C: solo en el home) ===== */
.float-contact{
  position:fixed;right:24px;bottom:24px;z-index:900;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  background:var(--bright);color:#063635;text-decoration:none;
  font:700 15px/1 Outfit,sans-serif;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,box-shadow .2s ease;
}
.float-contact[hidden]{display:inline-flex}
.float-contact.is-visible{opacity:1;transform:none;pointer-events:auto}
.float-contact:hover,.float-contact:focus-visible{box-shadow:0 14px 34px rgba(0,0,0,.34);outline:2px solid #fff;outline-offset:2px}
.float-contact svg{flex:none}
@media(max-width:620px){
  .float-contact{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:16px;border-radius:50%}
  .float-contact__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.float-contact{transition:none}}
/* En móvil el banner de cookies ocupa el ancho inferior: el botón espera a que se cierre */
@media(max-width:620px){
  body:has(.cookie-banner:not([hidden])) .float-contact{opacity:0;transform:translateY(16px);pointer-events:none}
}


/* ===================== Página Casos de éxito (diseño nuevo) ===================== */
/* Hero: mismo banner de los servicios; segunda línea del título en verde */
.hero--casos h1 .accent{color:var(--bright);display:block}
/* Tarjetas de casos */
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.story-card{display:flex;flex-direction:column;background:#fff}
.story-card__img{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#e9efed}
.story-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.story-card:hover .story-card__img img{transform:scale(1.04)}
.story-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:16px;flex:1}
.story-card__tag{display:inline-block;background:#d9fbe2;color:#15601d;font:700 11px/1.2 Outfit,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.story-card h3{font:700 1.08em/1.35 Outfit,sans-serif;color:#0d1b17;margin:2px 0 0}
.story-card p{font-size:1.1em;line-height:1.55;color:#3b4a46;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.story-card__btn{margin-top:auto;display:inline-block;background:#063635;color:var(--bright);font:700 12px/1 Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:11px 22px;border-radius:999px;transition:background .2s ease,color .2s ease}
.story-card__btn:hover,.story-card__btn:focus-visible{background:var(--bright);color:#063635}
.story-card__btn:visited{color:var(--bright)}
@media(max-width:1000px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.story-grid{grid-template-columns:1fr;gap:32px}}

/* Resultados con título */
.results--with-title{flex-wrap:wrap}
.results--with-title > h2{flex-basis:100%;grid-column:1/-1;text-align:center;color:#fff;font-size:2.2em;margin:0 0 32px}
@media(max-width:620px){.results--with-title > h2{font-size:1.7em}}

/* Resultados de Casos de éxito: ícono arriba, cifra verde, texto blanco (componente de servicios) */
.results--casos .result-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:30px 26px}
.results--casos .result-stack-icon{display:block;opacity:.9}
.results--casos .result-text{display:flex;flex-direction:column;align-items:center;gap:8px}
.results--casos .result-text b{font:700 2.8em/1 Outfit,sans-serif;color:var(--bright)}
.results--casos .result-text span{color:#fff;font-size:.95em;line-height:1.4;max-width:230px}
@media(max-width:620px){.results--casos .result-text b{font-size:2.3em}}

/* ===================== Página de detalle de caso de éxito (cd-) ===================== */
/* Espacios de imagen pendientes (se reemplazan por la imagen real) */
.cd-img-slot{background:#eef3f1}

/* Hero: tarjeta de testimonio a la izquierda y título a la derecha */
.cd-hero{position:relative;min-height:640px;background:#eef3f1;overflow:hidden;isolation:isolate}
.cd-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:-1;background:linear-gradient(180deg,rgba(6,54,53,0) 0%,#063635 100%)}
.cd-hero__inner{max-width:none;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:56px;align-items:center;min-height:640px;padding:80px 6% 0 0}
.cd-hero__quote{align-self:end;background:linear-gradient(180deg,#ccffd6 0%,#ccffd6 55%,rgba(204,255,214,.55) 100%);border-radius:0 64px 0 0;padding:52px 48px 0 9%;display:flex;flex-direction:column;gap:22px}
.cd-hero__quote blockquote{margin:0}
.cd-hero__quote blockquote p{font:italic 400 1.1em/1.6 Montserrat,sans-serif;color:#0d1b17;margin:0 0 18px}
.cd-hero__quote blockquote footer{font:700 1.05em Outfit,sans-serif;color:#15601d}
.cd-hero__art{aspect-ratio:4/3;width:100%;border-radius:18px 18px 0 0;background:rgba(255,255,255,.45)}
.cd-hero__title{font:800 2.7em/1.15 Outfit,sans-serif;color:#fff;margin:0;max-width:560px;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.cd-hero__title .accent{color:var(--bright)}

/* Contexto: texto centrado y destacado */
.cd-intro{background:#063635;padding:64px 8%}
.cd-intro__inner{max-width:820px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.cd-intro__inner p{margin:0;color:#fff;font:600 1.1em/1.55 Outfit,sans-serif}
.cd-highlight{display:inline-flex;align-items:center;gap:22px;background:#15601d;border-radius:999px;padding:10px 40px 10px 10px}
.cd-highlight__icon{flex:none;width:58px;height:58px;border-radius:50%;background:#ccffd6;display:grid;place-items:center;box-shadow:0 0 22px rgba(109,253,140,.55)}
.cd-highlight strong{font:600 1.12em/1.3 Outfit,sans-serif;color:var(--bright);text-align:left}

/* Desafío: texto a la izquierda, imagen a la derecha */
.cd-split{display:grid;grid-template-columns:1fr 1fr;min-height:440px;background:#fff}
.cd-split__text{padding:64px 8% 64px 10%;display:flex;flex-direction:column;justify-content:center}
.cd-split__text h2{font:800 2.1em/1.2 Outfit,sans-serif;color:#0d1b17;margin:0 0 22px;max-width:440px}
.cd-split__text p{margin:0 0 16px;color:#2a3a36;line-height:1.6;max-width:480px}
.cd-split__img{min-height:440px}

/* Modernización: fondo verde menta con dos paneles oscuros */
.cd-modern{background:#ccffd6}
.cd-modern__head{max-width:760px}
.cd-modern__head .eyebrow{color:#15601d}
.cd-modern__head h2{font-size:2.3em;line-height:1.15}
.cd-modern__head p{color:#1b2b28;line-height:1.6;margin:0 0 14px}
.cd-modern__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;max-width:860px}
.cd-panel{background:#063635;border-radius:14px;padding:28px 24px;box-shadow:0 6px 18px rgba(6,54,53,.18)}
.cd-panel h3{font:700 1.15em/1.35 Outfit,sans-serif;color:#fff;margin:0 0 20px}
.cd-pills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cd-pill{display:flex;align-items:center;gap:14px;background:var(--bright);color:#063635;border-radius:999px;padding:11px 22px;font:600 .98em/1.3 Montserrat,sans-serif}
.cd-pill svg{flex:none;color:#063635}

/* Tablet y móvil */
@media(max-width:1000px){
  .cd-hero__inner{grid-template-columns:1fr;gap:36px;padding:56px 6% 0}
  .cd-hero__title{order:-1;font-size:2.2em}
  .cd-hero__quote{border-radius:0 48px 0 0;padding:40px 32px 0}
  .cd-split{grid-template-columns:1fr}
  .cd-split__text{padding:56px 6%}
  .cd-split__img{min-height:300px}
  .cd-modern__grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .cd-hero__title{font-size:1.8em}
  .cd-intro__inner p{font-size:1.1em}
  .cd-highlight{padding:8px 22px 8px 8px;gap:14px}
  .cd-highlight__icon{width:48px;height:48px}
  .cd-modern__head h2{font-size:1.7em}
  .cd-split__text h2{font-size:1.7em}
}
/* Ajustes del hero del caso */
.cd-hero{background:#1f3b33;min-height:0}
.cd-hero .cd-hero__inner{margin:0;width:100%;box-sizing:border-box;min-height:640px;padding:96px 6% 0 0;align-items:end}
.cd-hero__quote{align-self:stretch;margin-top:0}
.cd-hero__title{align-self:center;padding-bottom:40px}
.cd-hero__quote blockquote footer{background:none !important;padding:0 !important;margin:0;display:block}
@media(max-width:1000px){.cd-hero .cd-hero__inner{padding:56px 0 0;min-height:0}.cd-hero__title{padding:0 6%}.cd-hero__quote{margin-right:6%}}
/* Las secciones del sitio traen relleno general (70px 10%): el hero del caso va de borde a borde */
section.cd-hero{padding:0}
section.cd-intro{padding:64px 8%}
section.cd-split{padding:0}
.cd-hero__quote blockquote footer{border:0 !important;box-shadow:none !important}

/* Banner de Casos de éxito: mismo alto que los servicios y texto más angosto (título en 3 líneas) */
.hero--casos{min-height:608px;box-sizing:border-box;display:flex;align-items:center}
.hero--casos .hero-copy{max-width:620px}
.hero--casos .hero-copy > p{max-width:470px}
@media(max-width:620px){.hero--casos{min-height:520px}}
.results--casos img.result-stack-icon{width:48px;height:48px;object-fit:contain}

/* Hero del caso: imagen de fondo con degradado de arriba hacia abajo (Figma: #063635 0% en 20% → 100% en 95%) */
.cd-hero::after{inset:0;height:auto;background:linear-gradient(180deg,rgba(6,54,53,0) 20%,#063635 95%)}
/* Ilustración debajo del testimonio */
img.cd-hero__art{display:block;width:100%;height:auto;aspect-ratio:auto;background:none;border-radius:0;object-fit:contain}

/* Hero del caso, ajuste al diseño final */
.cd-hero .cd-hero__inner{padding-top:28px;min-height:620px;align-items:stretch}
.cd-hero__quote{
  position:relative;overflow:visible;
  background:linear-gradient(180deg,#ccffd6 0%,#ccffd6 42%,rgba(204,255,214,.55) 70%,rgba(204,255,214,0) 100%);
  padding:56px 48px 0 9%;gap:18px;
}
img.cd-hero__art{width:118%;max-width:none;margin-top:auto;margin-left:-4%;position:relative;z-index:1}
.cd-hero__title{align-self:center}
@media(max-width:1000px){
  .cd-hero .cd-hero__inner{padding-top:40px;min-height:0}
  img.cd-hero__art{width:108%;margin-left:-4%}
}
@media(max-width:620px){img.cd-hero__art{width:112%;margin-left:-6%}}

/* IT Leadership: enlace de la fuente en "Por qué ahora" */
#evidencia .evidencia-intro-grid > p a{color:var(--dark);text-decoration:underline}

/* ===== Hero del caso: reglas actualizadas ===== */
.cd-hero .cd-hero__inner{padding-top:8%;height:auto;align-items:stretch}
img.cd-hero__art{width:150%;max-width:none;margin-top:-5%;margin-left:-5%;position:relative;z-index:1}
.cd-hero__title{align-self:flex-start;padding-top:5%}
/* En tablet y móvil se mantiene una ilustración proporcionada a la pantalla */
@media(max-width:1000px){img.cd-hero__art{width:112%;margin-top:0;margin-left:-6%}.cd-hero__title{padding-top:0}}

/* ===== Caso: capacidades con recuadro interactivo ===== */
.cd-modern__grid--tabs{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:end;max-width:760px}
.cd-panel--list{padding:30px 30px 18px}
.cd-caps{list-style:none;margin:0;padding:0}
.cd-caps li + li{border-top:1px solid rgba(204,255,214,.28)}
.cd-cap{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;padding:14px 4px;cursor:pointer;color:var(--bright);font:600 1em/1.3 Montserrat,sans-serif;text-align:left;transition:background .2s ease,padding .2s ease;border-radius:8px}
.cd-cap svg{flex:none;color:#ccffd6}
.cd-cap:hover,.cd-cap:focus-visible,.cd-cap[aria-pressed="true"]{background:rgba(109,253,140,.1);padding-left:12px;outline:none}
.cd-cap[aria-pressed="true"] span{text-decoration:underline;text-underline-offset:4px}
.cd-detail{background:#c3ecc9;border-left:4px solid #15601d;border-radius:12px;padding:22px 20px;color:#0d1b17;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:opacity .2s ease}
.cd-detail.is-changing{opacity:.35}
.cd-detail__img{width:100%;aspect-ratio:16/10;border-radius:8px;background:rgba(255,255,255,.35)}
img.cd-detail__img{object-fit:contain;background:none}
.cd-detail__text{margin:0;font-size:.95em;line-height:1.45}
.cd-detail__strong{margin:0;font:700 .98em/1.4 Outfit,sans-serif}
@media(max-width:800px){.cd-modern__grid--tabs{grid-template-columns:1fr;max-width:none}}

/* ===== Caso: "De la modernización a la operación real" (fondo negro, imagen + texto) ===== */
section.cd-validation{background:#000;padding:72px 6%}
.cd-validation__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.cd-validation__img{width:100%;aspect-ratio:3/4;max-height:640px;background:#1c2a26}
img.cd-validation__img{object-fit:cover;display:block}
.cd-validation__text .eyebrow{color:#ccffd6}
.cd-validation__text h2{font:800 2.2em/1.15 Outfit,sans-serif;color:#fff;margin:12px 0 26px}
.cd-validation__text p{color:#e9f3ee;line-height:1.6;margin:0 0 18px;max-width:520px}
.cd-validation__text .cd-validation__highlight{color:var(--bright);font-weight:700}
@media(max-width:900px){
  .cd-validation__inner{grid-template-columns:1fr;gap:32px}
  .cd-validation__img{aspect-ratio:16/11}
  .cd-validation__text h2{font-size:1.8em}
}

/* IT Leadership · Por qué ahora: mismo diseño, tarjetas con más ancho para los textos largos */
#evidencia .evidencia-intro-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
#evidencia .metric-card{padding:26px 24px}
#evidencia .metric-card strong{margin-bottom:10px}
#evidencia .metric-card span{display:block;font-size:1em;line-height:1.5}
@media(max-width:900px){#evidencia .evidencia-intro-grid{grid-template-columns:1fr}}
@media(max-width:560px){#evidencia .metrics-strip{grid-template-columns:1fr !important}}

/* IT Leadership · Cómo funciona: título en negrita y el texto debajo */
#como-funciona .deliverable-item{align-items:flex-start}
#como-funciona .deliverable-item .check-icon{margin-top:2px}
#como-funciona .deliverable-item strong{display:block;font-weight:700;color:#fff;margin-bottom:4px}

/* ===================== Caso: diseño final de secciones ===================== */
/* Modernizar: subtítulo verde y dos tarjetas blancas */
.cd-modern__head p{max-width:720px}
.cd-modern__sub{font:700 1.3em/1.35 Outfit,sans-serif;color:#15601d;margin:28px 0 18px}
.cd-modern__grid--cards{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:stretch;max-width:760px}
.cd-card{background:#fff;border-radius:14px;border-left:4px solid var(--bright);padding:20px 24px;box-shadow:0 4px 14px rgba(6,54,53,.08)}
.cd-card--list .cd-caps li + li{border-top:1px solid #8fd6a2}
.cd-card--list .cd-cap{color:#0d1b17;font-weight:500;padding:12px 4px}
.cd-card--list .cd-cap svg{color:#063635}
.cd-card--list .cd-cap:hover,.cd-card--list .cd-cap:focus-visible,.cd-card--list .cd-cap[aria-pressed="true"]{background:#ecfff0}
.cd-card--result{display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0;background:#fff;border-left:4px solid var(--bright)}
.cd-card--result .cd-detail__text{font-size:.98em;color:#0d1b17;max-width:200px}
.cd-time{display:inline-flex;align-items:center;gap:14px;background:#c3ecc9;border-radius:999px;padding:6px 26px 6px 6px;align-self:flex-start}
.cd-time__icon{width:44px;height:44px;border-radius:50%;background:#063635;display:grid;place-items:center}
.cd-time strong{font:800 1.35em Outfit,sans-serif;color:#063635}
.cd-card--result .cd-detail__strong{color:#15601d;font:700 .98em/1.4 Outfit,sans-serif;max-width:230px}
@media(max-width:800px){.cd-modern__grid--cards{grid-template-columns:1fr;max-width:none}}

/* Validación: imagen con fuente a la izquierda y panel verde oscuro a la derecha */
section.cd-validation{background:#063635;padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.cd-validation__media{position:relative;min-height:420px}
.cd-validation__media .cd-validation__img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:cover}
.cd-source{position:absolute;left:24px;bottom:24px;max-width:340px;background:rgba(6,54,53,.88);border-radius:8px;padding:12px 16px;color:#fff;font-size:.82em;line-height:1.45}
.cd-source strong{display:block;color:var(--bright);margin-bottom:4px;font-family:Outfit,sans-serif}
.cd-source a{color:#fff;font-style:italic;text-decoration:underline;text-underline-offset:3px}
.cd-validation__text{padding:72px 8% 72px 7%;display:flex;flex-direction:column;justify-content:center}
.cd-validation__text h2{margin-top:0}
@media(max-width:900px){section.cd-validation{grid-template-columns:1fr}.cd-validation__media{min-height:320px}.cd-validation__text{padding:48px 6%}}

/* Modernizar para estar preparados */
section.cd-next{background:#fff;padding:64px 10%}
.cd-next__inner{max-width:900px}
.cd-next h2{font:800 2em/1.2 Outfit,sans-serif;color:#15601d;margin:0 0 20px}
.cd-next p{color:#1b2b28;line-height:1.6;margin:0 0 16px}

/* Tres prioridades */
section.cd-priorities{background:#063635;padding:72px 10%}
.cd-priorities__inner{max-width:1000px}
.cd-priorities h2{font:800 2em/1.2 Outfit,sans-serif;color:#fff;margin:0 0 12px;max-width:620px}
.cd-priorities__inner > div > p{color:#e6f5ec;margin:0 0 26px}
.cd-priorities__list{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cd-priorities__list li{background:rgba(255,255,255,.06);border:1px solid rgba(109,253,140,.25);border-left:3px solid var(--bright);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.cd-num{width:24px;height:24px;border-radius:6px;background:#ccffd6;color:#063635;display:grid;place-items:center;font:800 .8em Outfit,sans-serif}
.cd-priorities__list strong{color:#fff;font:700 1em/1.35 Outfit,sans-serif}
.cd-priorities__close{color:var(--bright);font-weight:700;margin:0}
@media(max-width:800px){.cd-priorities__list{grid-template-columns:1fr}}

/* Llamado a la acción */
section.cd-cta{background:#ccffd6;padding:64px 8%}
.cd-cta__inner{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cd-cta h2{font:800 1.8em/1.25 Outfit,sans-serif;color:#15601d;margin:0}
.cd-cta p{margin:0;color:#1b2b28;line-height:1.6;max-width:480px}

/* Te puede interesar */
.cd-related__title{text-align:center;font-size:2.2em;margin:0 0 36px}
.cd-related__more{text-align:center;margin-top:40px}

/* Caso de energías limpias: imágenes e íconos reales */
img.cd-split__img{width:100%;height:100%;min-height:440px;object-fit:cover;display:block}
.cd-highlight__icon img,.cd-time__icon img{display:block;object-fit:contain}
.cd-cap__icon{flex:none;width:26px;height:26px;object-fit:contain}
@media(max-width:1000px){img.cd-split__img{min-height:300px}}

/* ===== Caso · Modernizar: sección fija (sin hover ni interacción), proporciones del diseño ===== */
.cd-modern__head{max-width:1100px}
.cd-modern__head h2{max-width:1060px}
.cd-modern__head p{max-width:1100px}
.cd-modern__grid--cards{grid-template-columns:475px 370px;gap:28px;max-width:none;align-items:stretch}
.cd-cap-item{display:flex;align-items:center;gap:16px;padding:13px 4px;color:#0d1b17;font:500 1em/1.3 Montserrat,sans-serif}
.cd-card--list .cd-caps li + li{border-top:1px solid #8fd6a2}
.cd-card--result{justify-content:center;gap:14px}
.cd-result__text{margin:0;font-size:.98em;line-height:1.45;color:#0d1b17;max-width:200px}
.cd-result__strong{margin:0;color:#15601d;font:700 .98em/1.4 Outfit,sans-serif;max-width:230px}
.cd-time{background:var(--bright)}
.cd-time__icon{background:#000}
@media(max-width:960px){.cd-modern__grid--cards{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.cd-modern__grid--cards{grid-template-columns:1fr}}

/* ===== Caso: recuadro de la fuente (negro al 30%, borde verde) ===== */
.cd-source {
    left: 50%;
    bottom: 32px;
    max-width: 430px;
    background: rgba(0,0,0,.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 0;
    border-left: 3px solid var(--bright);
    padding: 14px 20px;
    font-size: .9em;
}
.cd-source strong{color:#fff;font:700 1.05em Outfit,sans-serif;margin-bottom:6px}
.cd-source a{color:#fff;font-style:italic;text-decoration:underline;text-underline-offset:3px}

/* ===== Caso: "Modernizar para estar preparados" en dos columnas ===== */
section.cd-next{padding:72px 10%}
.cd-next__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1180px}
.cd-next__inner{max-width:520px}
.cd-next h2{color:#000;font-size:1.8em;max-width:420px}
.cd-next__diagram{width:100%;aspect-ratio:16/10;border-radius:16px}
img.cd-next__diagram{display:block;height:auto;aspect-ratio:auto;object-fit:contain;background:none}
@media(max-width:900px){.cd-next__grid{grid-template-columns:1fr;gap:36px}.cd-next__inner{max-width:none}}

/* =====================================================================
   CASO DE ÉXITO · DISEÑO FINAL (cx-)
   Tamaños de letra del proyecto: H1 56px · H2 40px · párrafo 17.6px
   ===================================================================== */
section.cx-hero,section.cx-intro,section.cx-text,section.cx-validation,section.cx-next,section.cx-result,section.cx-cta{padding:72px 10%}
.cx-wrap{width:100%;margin:0 auto}
.cx-hero h1,.cx-text h2,.cx-validation h2,.cx-next h2,.cx-result h2,.cx-cta h2{font-family:Outfit,sans-serif;font-weight:800}
.cx-text p,.cx-validation p,.cx-next p,.cx-result p,.cx-cta p,.cx-callout p,.cx-card p{font-size:1.1em;line-height:1.6;margin:0 0 16px}
.accent{color:var(--bright)}

/* 1. Banner: ilustración a la izquierda, título y testimonio a la derecha */
section.cx-hero{position:relative;isolation:isolate;background:#063635 center/cover no-repeat;min-height:620px;display:flex;align-items:center;padding-top:56px;padding-bottom:56px}
section.cx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,54,53,.35) 0%,rgba(6,54,53,.55) 55%,#063635 100%)}
.cx-hero__inner{width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center} /* ilustración más grande, como en el diseño */
.cx-hero__art{width:100%;height:auto;justify-self:center;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.cx-hero h1{font-size:2.5em;line-height:1.07;color:#fff;margin:0 0 26px}
.cx-quote{margin:0}
.cx-quote p{font-size:1.1em;line-height:1.45;font-style:italic;color:#fff;margin:0 0 18px;max-width:560px}
.cx-quote footer{background:none !important;border:0 !important;padding:0 !important;font:700 18px Outfit,sans-serif;color:#fff}

/* 2. Contexto: texto y píldora de la subasta */
section.cx-intro{background:#BFE8C0;padding-top:56px;padding-bottom:56px}
.cx-intro__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.cx-intro__inner > p{margin:0;font:700 1.1em/1.45 Outfit,sans-serif;color:#0d1b17;max-width:480px}
.cx-pill{display:inline-flex;align-items:center;gap:22px;border:1.5px solid #15601d;border-radius:999px;padding:8px 40px 8px 8px;background:#ccffd6;justify-self:start}
.cx-pill__icon{flex:none;width:68px;height:68px;border-radius:50%;background:#b3f0c0;display:grid;place-items:center}
.cx-pill strong{font:600 20px/1.3 Outfit,sans-serif;color:#15601d}

/* 3. Desafío y modernización: texto corrido */
section.cx-text{background:#fff}
.cx-text__inner{width:100%}
.cx-label{font:700 1.1em/1.4 Outfit,sans-serif;color:#15601d;margin:0 0 8px}
.cx-text h2{font-size:40px;line-height:1.15;color:#000;margin:36px 0 18px}
.cx-text p{color:#1b2b28}
.cx-text strong{color:#000}
.cx-callout{display:flex;align-items:center;gap:22px;background:#bfe8c0;border-left:4px solid #15601d;border-radius:14px;padding:20px 28px;margin-top:22px;width:60%}
.cx-callout img{flex:none}
.cx-callout p{margin:0;color:#0d1b17}

/* 4. Validación: foto de fondo con texto a la izquierda */
section.cx-validation{position:relative;isolation:isolate;background:#063635 center/cover no-repeat}
section.cx-validation::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000000 35%,rgba(0,0,0,0) 95%)} /* Figma: #000 100% en 35% → #000 0% en 95% */
.cx-validation__inner{width:100%}
.cx-validation__inner > *{width:60%}
.cx-validation h2{font-size:40px;line-height:1.15;color:#fff;margin:0 0 18px}
.cx-validation p{color:#fff}
.cx-card{background:#fff;border-left:4px solid var(--bright);border-radius:14px;padding:18px 22px;margin:8px 0 22px}
.cx-card p{margin:0;color:#0d1b17}
.cx-validation__close{font-weight:700}
.cx-source {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    width: auto !important;               /* una sola línea: se ajusta a su texto */
    background: rgba(109,253,140,.2);       /* verde brillante #6dfd8c al 20% */
    -webkit-backdrop-filter: blur(8px);     /* desenfoque de la foto detrás */
    backdrop-filter: blur(8px);
    border: 0;
    color: #ffffff;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 1.1em !important;
    margin: 14px 0 0 !important;
    max-width: none !important;
}
.cx-source strong{color:#fff;font-family:Outfit,sans-serif}
.cx-source a{color:#fff;font-style:italic;text-decoration:underline;text-underline-offset:3px}

/* 5. Preparados para lo que sigue */
section.cx-next{background:#fff}
.cx-next__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cx-next h2{font-size:40px;line-height:1.15;color:#000;margin:0 0 18px}
.cx-next p{color:#1b2b28}
.cx-next strong{color:#000}
.cx-next__img{width:100%;height:auto;display:block}

/* 6. Resultado */
section.cx-result{background:#ccffd6}
.cx-result h2{font-size:40px;line-height:1.15;color:#000;margin:0 0 16px}
.cx-result p{color:#0d1b17;max-width:900px}
.cx-result .cx-result__highlight{color:#15601d;font-weight:700;margin:0}

/* 7. Llamado a la acción */
section.cx-cta{background:#063635}
.cx-cta__inner{width:80%;text-align:center;display:flex;flex-direction:column;align-items:center}
.cx-cta h2{font-size:40px;line-height:1.15;color:var(--bright);margin:0 0 16px}
.cx-cta p{color:#fff;width:80%;margin-bottom:26px}

/* Tablet y móvil */
@media(max-width:1000px){
  .cx-hero__inner,.cx-intro__inner,.cx-next__grid{grid-template-columns:1fr;gap:32px}
  .cx-hero__art{max-width:340px;order:2}
  .cx-hero h1{font-size:44px}
  .cx-pill{justify-self:start}
}
@media(max-width:620px){
  section.cx-hero,section.cx-intro,section.cx-text,section.cx-validation,section.cx-next,section.cx-result,section.cx-cta{padding:52px 6%}
  section.cx-hero{min-height:0}
  .cx-hero h1{font-size:34px}
  .cx-text h2,.cx-validation h2,.cx-next h2,.cx-result h2,.cx-cta h2{font-size:30px}
  .cx-pill{padding-right:22px;gap:14px}
  .cx-pill__icon{width:54px;height:54px}
  .cx-pill strong{font-size:17px}
  .cx-callout{flex-direction:column;align-items:flex-start;padding:18px 20px}
  .cx-source{border-radius:16px}
}
@media(max-width:620px){.cx-callout,.cx-validation__inner > *,.cx-cta__inner,.cx-cta p{width:100%}}

/* ===== Todos los párrafos del sitio en 1.1em (gana sobre reglas anteriores y estilos escritos en el HTML) ===== */
p{font-size:1.1em !important}
.cx-hero__art{transform:scale(1.08);transform-origin:center}
@media(max-width:1000px){.cx-hero__art{transform:none}}

/* "Ver todos los casos de éxito" (Te puede interesar): el hover ponía el fondo blanco sobre la sección blanca */
.cd-related__more .btn-primary{transition:background .2s ease,color .2s ease,transform .2s ease}
.cd-related__more .btn-primary:hover,.cd-related__more .btn-primary:focus-visible{background:#063635;color:var(--bright);border-color:#063635;transform:translateY(-2px)}

/* ===== Flecha "Volver arriba" (encima del botón Contáctanos) ===== */
.to-top{
  position:fixed;right:24px;bottom:90px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#063635;color:var(--bright);border:1px solid rgba(109,253,140,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,bottom .3s ease,background .2s ease,color .2s ease;
}
.to-top[hidden]{display:grid}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top--alone{bottom:24px}
.to-top:hover,.to-top:focus-visible{background:var(--bright);color:#063635;outline:2px solid #fff;outline-offset:2px}
@media(max-width:620px){
  .to-top{right:20px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:46px;height:46px}
  .to-top--alone{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body:has(.cookie-banner:not([hidden])) .to-top{opacity:0;transform:translateY(16px);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ===== Flecha "Volver arriba": ícono icon-retorno.svg ===== */
.to-top__icon{display:block;width:22px;height:22px;object-fit:contain}

/* ===== Sección global: GIF a toda la altura de la sección, países en cajas ===== */
section.global{position:relative;overflow:hidden;align-items:center;min-height:440px}
section.global > div{position:relative;z-index:1;max-width:52%}
section.global img.global__media{position:absolute;top:0;right:0;bottom:0;width:44%;height:100%;max-width:none;object-fit:cover;border-radius:0;margin:0;animation:none}
.global .country-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.global .country-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#fff;border:1px solid #d6ede0;border-radius:10px;font-size:16px;font-weight:600;line-height:1.2;box-shadow:0 2px 6px rgba(6,54,53,.06)}
.global .flag-img{width:22px;height:15px;object-fit:cover;border:0;border-radius:0;box-shadow:none;margin:0;padding:0}
.global .country-item--active{border-color:var(--bright);box-shadow:inset 0 -3px 0 var(--bright)}
@media(max-width:1024px){
  section.global{display:block;min-height:0;padding-bottom:0 !important}
  section.global > div{max-width:none}
  section.global img.global__media{position:relative;display:block;width:calc(100% + 40px);height:300px;margin:32px -20px 0}
}

/* ===== Animación escalonada: al terminar la entrada se quitan los retrasos,
   para que el hover responda al instante (p. ej. logos de la página Partners) ===== */
.reveal-stagger.reveal-done > *{transition-delay:0s !important}

/* ===== Flecha "Volver arriba" a la derecha de Contáctanos: el ícono ocupa todo el botón ===== */
.to-top{right:24px;bottom:24px;width:50px;height:50px;padding:0;background:none;border:0;box-shadow:none;border-radius:50%;transition:opacity .3s ease,transform .3s ease}
.to-top--alone{bottom:24px}
.to-top .to-top__icon{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.to-top:hover,.to-top:focus-visible{background:none;transform:translateY(-2px) scale(1.05);outline:2px solid #fff;outline-offset:3px}
.to-top:hover{outline:0}
.float-contact{transition:opacity .3s ease,transform .3s ease,right .3s ease,box-shadow .2s ease}
.float-contact.float-contact--with-top{right:86px}
@media(max-width:620px){
  .to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px}
  .to-top--alone{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .float-contact.float-contact--with-top{right:74px}
}

/* =====================================================================
   SECCIÓN GLOBAL · diseño con el planeta de fondo y banderas circulares
   ===================================================================== */
section.global.global--map{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:32px;min-height:600px;background:#000 url('/assets/img/Video-global.gif') center bottom / cover no-repeat;color:#fff;text-align:center;padding:56px 6% 36px !important} /* el GIF es el fondo de la sección */
section.global.global--map > div{max-width:none}
section.global.global--map img.global__media{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center bottom;border-radius:0;z-index:-2}
section.global.global--map::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.global__content{max-width:760px}
.global--map .eyebrow{color:var(--bright) !important}
.global--map h2{color:#fff;font-size:2.5em;line-height:1.1;margin:10px 0 12px}
.global--map .global__content p{color:#fff;margin:0}

/* Banderas circulares: al pasar el mouse (o en la del país activo) se expande la píldora con el nombre */
.global__flags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.flag-chip{display:inline-flex;align-items:center;gap:0;height:40px;padding:4px;border-radius:999px;border:1px solid transparent;color:#fff;text-decoration:none;cursor:pointer;transition:background .25s ease,border-color .25s ease,padding .25s ease,gap .25s ease}
section.global .flag-chip img.flag-chip__flag{width:30px;height:30px;max-width:none;margin:0;padding:0;border-radius:50%;object-fit:cover;border:0;box-shadow:none;animation:none;flex:none;display:block}
.flag-chip__name,.flag-chip__arrow{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font:700 14px Outfit,sans-serif;transition:max-width .3s ease,opacity .2s ease}
.flag-chip__arrow{font-size:16px;line-height:1}
.flag-chip:hover,.flag-chip:focus-visible,.flag-chip.is-active{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.75);gap:8px;padding-right:14px;outline:none}
.flag-chip:hover .flag-chip__name,.flag-chip:focus-visible .flag-chip__name,.flag-chip.is-active .flag-chip__name{max-width:160px;opacity:1}
.flag-chip:hover .flag-chip__arrow,.flag-chip:focus-visible .flag-chip__arrow,.flag-chip.is-active .flag-chip__arrow{max-width:20px;opacity:1}
@media(prefers-reduced-motion:reduce){.flag-chip,.flag-chip__name,.flag-chip__arrow{transition:none}}

@media(max-width:1024px){
  section.global.global--map{display:flex;min-height:520px;padding:48px 6% 28px !important}
  section.global.global--map img.global__media{position:absolute;width:100%;height:100%;margin:0}
}
@media(max-width:620px){
  section.global.global--map{min-height:480px}
  .global--map h2{font-size:1.9em}
  .global__flags{gap:6px}
  .flag-chip{height:36px}
  section.global .flag-chip img.flag-chip__flag{width:26px;height:26px}
}

/* ===== Botones flotantes en una sola fila: Contáctanos a la izquierda, flecha a la derecha =====
   El contenedor fija la posición; cada botón solo aparece/desaparece. */
.float-actions{position:fixed;right:24px;bottom:24px;z-index:900;display:flex;align-items:center;gap:12px;pointer-events:none}
.float-actions .float-contact,.float-actions .to-top{position:static;right:auto;bottom:auto;margin:0}
.float-actions .float-contact.is-visible,.float-actions .to-top.is-visible{pointer-events:auto}
.float-actions .float-contact.float-contact--with-top{right:auto}
/* la flecha oculta no ocupa espacio: Contáctanos queda en la esquina */
.float-actions .to-top{transition:opacity .3s ease,transform .3s ease,width .3s ease,margin .3s ease}
.float-actions .to-top:not(.is-visible){width:0;margin-left:-12px;overflow:hidden}
@media(max-width:620px){
  .float-actions{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:10px}
  .float-actions .to-top:not(.is-visible){margin-left:-10px}
}

/* Respaldo para páginas generadas con la estructura anterior del parcial foot
   (flecha y Contáctanos sueltos, sin .float-actions): Contáctanos se corre a la izquierda */
body > .to-top.is-visible + .float-contact{right:86px}
@media(max-width:620px){body > .to-top.is-visible + .float-contact{right:74px}}

/* ===== Landings por país: banner de escritorio y portada móvil propios (img/Banners-paises) ===== */
.hero.hero--index.hero--pais{background-image:var(--hero-desktop) !important;background-size:cover;background-position:center top;background-repeat:no-repeat}
@media(max-width:620px){
  .hero.hero--index.hero--pais{background-image:var(--hero-movil) !important;background-position:center !important}
}

/* ===== Menú móvil: todos los ítems con el mismo tamaño de letra (tengan o no subítems) ===== */
.mobile-menu > a:not(.button){font-size:1.2em !important;font-weight:300 !important;font-family:Outfit,sans-serif;border-bottom:1px solid rgba(255,255,255,.08)}

/* ===== Íconos de redes: el ícono ocupa todo su círculo (sin espacio interno) ===== */
.footer-icon-link{padding:0 !important}
.footer-icon-link img,.mobile-menu-socials a img{width:100% !important;height:100% !important;max-width:none;object-fit:contain;display:block}
.mobile-menu-socials a{padding:0 !important}

/* ===== Caso de energías limpias: ajustes según el diseño final ===== */
/* Contexto en fondo blanco, continuo con la sección de texto */
section.cx-intro{background:#fff;padding-bottom:24px}
section.cx-intro + section.cx-text{padding-top:24px}
.cx-pill{background:#fff;border-color:#15601d;width:fit-content;max-width:100%;justify-self:start;padding-right:32px}
.cx-pill__icon{background:#c3ecc9}
/* Subtítulos del desafío en negro */
.cx-label{color:#000}
/* Recuadro de los 6 meses: blanco, borde suave, línea verde y texto verde */
.cx-callout{background:#fff;border:1px solid #cfe6d4;border-left:4px solid #15601d;box-shadow:0 2px 10px rgba(6,54,53,.06)}
.cx-callout p{color:#15601d;font-weight:500}
.cx-callout strong{color:#15601d;font-weight:800}

/* ===== Headers de países y EE. UU.: bandera junto al logo y selector de países (ícono del mundo) ===== */
.brand-wrap{display:flex;align-items:center;gap:12px;flex:none}
.brand-flag{display:inline-flex;line-height:0;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.brand-flag .flag-img{width:26px;height:18px;object-fit:cover;display:block;border-radius:0}
.nav-dropdown--paises{margin-left:6px}
.nav-globe{width:42px;height:42px;padding:0 !important;justify-content:center;border-radius:50% !important;border:1px solid rgba(255,255,255,.35) !important}
.nav-globe svg{display:block}
.nav-dropdown-menu--paises{grid-template-columns:repeat(4,1fr) !important}
.nav-dropdown-menu--paises a{display:flex !important;align-items:center;gap:12px}
.nav-dropdown-menu--paises .flag-img,.mobile-menu-panel--paises .flag-img{width:24px;height:17px;object-fit:cover;border-radius:2px;flex:none}
.mobile-menu-panel--paises a{display:flex !important;align-items:center;gap:10px}
@media(max-width:1024px){.nav-dropdown-menu--paises{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:620px){
  .nav-dropdown--paises{display:none}
  .brand-flag .flag-img{width:22px;height:15px}
  .brand-wrap{gap:10px}
}

/* ===== Caso: recuadro de los 6 meses (borde sólido verde oscuro, más angosto, 3 líneas) ===== */
.cx-callout{width:fit-content !important;max-width:100%;background:#fff;border:1px solid #15601d;border-left:4px solid #15601d;box-shadow:none;padding:24px 40px 24px 32px;gap:26px}
.cx-callout p{line-height:1.6}

/* ===== Caso: fuente siempre en dos líneas ("Fuente" | enlace) ===== */
.cx-source.cx-source--two-lines{display:inline-grid !important;grid-template-columns:auto 1fr;align-items:center;gap:0 16px;width:auto !important;max-width:820px !important;flex-wrap:nowrap;border-radius:999px;padding:12px 28px;font-size:1.1em !important} /* nota de fuente: letra de pie de foto */
.cx-source--two-lines strong{margin:0}
.cx-source--two-lines a{line-height:1.45}

/* ===== Caso: "Un resultado…" dentro de la sección blanca ===== */
.cx-next__result{margin-top:56px}
.cx-next__result h2{font-size:40px;line-height:1.15;color:#000;margin:0 0 14px}
.cx-next__result p{color:#1b2b28;margin:0 0 14px}
.cx-next__result .cx-next__highlight{color:#15601d;font-weight:700;margin:0;max-width:900px}
@media(max-width:620px){
  .cx-callout{padding:20px;gap:16px}
  .cx-source.cx-source--two-lines{max-width:100% !important;border-radius:18px}
  .cx-next__result h2{font-size:30px}
}

/* ===== Botón "VER MÁS" de los casos: en hover fondo verde brillante y texto verde azulado,
   también en enlaces ya visitados (la regla :visited estaba anulando el hover) ===== */
.story-card__btn:hover,.story-card__btn:focus-visible,
.story-card__btn:visited:hover,.story-card__btn:visited:focus-visible{background:var(--bright);color:#063635 !important}

/* Selector de países: se oculta en el mismo ancho que el menú de escritorio (1024px); en su lugar está el grupo "Países" del menú móvil */
@media(max-width:1024px){.nav-dropdown--paises{display:none !important}}