/* Acceso a Servicios desde la franja de disciplinas. */
.service-ribbon {padding-block: 12px;}
.ribbon-inner {display: flex; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 64px);}
.service-ribbon .ribbon-track {margin: 0; width: auto; gap: clamp(12px, 2.6vw, 36px);}
.ribbon-inner > a {
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 4px; min-height: 44px;
  font: 600 16px/1.4 var(--display); color: var(--pink-dark); border-bottom: 1px solid var(--pink);
}

/* El caso de Legán abre la sección. */
.services {padding-block: clamp(42px, 5.5vw, 86px); border-top: 1px solid var(--line);}
.services-intro, .web-feature, .web-examples, .other-services, .profile-facts {
  display: grid; align-items: start; gap: clamp(24px, 4.2vw, 68px);
}
.services-intro {grid-template-columns: 1.15fr 1fr; align-items: end; margin-bottom: 38px;}
.services-intro h2 {font: 600 clamp(38px, 4.6vw, 65px)/1.08 var(--display); letter-spacing: -.055em;}
.services-intro > p {max-width: 44ch; justify-self: end; color: var(--muted); font-size: 15px; line-height: 1.85;}
.web-feature {grid-template-columns: 1.35fr 1fr; align-items: center;}
.services h3 {letter-spacing: -.045em; text-wrap: balance;}
.services h4 {font-size: 15px; font-weight: 600; margin: 1.35em 0 .45em; line-height: 1.45; letter-spacing: -.025em;}
.service-copy > p:not(.service-index), .web-examples p, .service-process p {
  font-size: 14px; line-height: 1.82; color: #554f4d; text-wrap: pretty;
}
.service-index {display: flex; align-items: center; gap: 10px; color: var(--pink-dark); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;}
.service-index > span {letter-spacing: .05em; padding-right: 11px; border-right: 1px solid #cfa8af;}
.service-copy h3 {font-size: clamp(24px, 2.5vw, 36px); line-height: 1.18; margin: 12px 0 17px;}
.service-image {margin: 0; min-width: 0;}
.service-image > a {display: block; position: relative; background: var(--pink-light);}
.service-image img {width: 100%; height: auto;}
.enlarge-symbol {
  position: absolute; bottom: 12px; right: 12px; display: grid; place-items: center;
  width: 32px; height: 32px; background: white; border-radius: 50%; color: var(--ink); font-size: 18px;
}
.image-credit {display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 10px;}
.image-credit > span:last-child {color: var(--pink-dark);}
.service-cta {margin-top: 16px; color: var(--pink-dark); border-color: var(--pink); min-height: 44px; font-weight: 600;}
.web-cases {margin: 28px 0 clamp(34px, 4vw, 58px); border-block: 1px solid var(--line);}
.web-cases summary {display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; padding: 17px 0; font-weight: 600; font-size: 14px; list-style: none;}
.web-cases summary::-webkit-details-marker {display: none;}
.web-cases summary:focus-visible {outline: 2px solid var(--pink-dark); outline-offset: 4px;}
.web-cases small {font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 12px;}
.detail-toggle {height: 16px; width: 16px; flex: none; position: relative;}
.detail-toggle::before, .detail-toggle::after {content: ""; position: absolute; background: var(--pink-dark);}
.detail-toggle::before {height: 1px; inset: 7px 0 auto;}
.detail-toggle::after {width: 1px; inset: 0 auto 0 7px;}
.web-cases[open] .detail-toggle::after {display: none;}
.web-examples, .other-services {grid-template-columns: 1fr 1fr;}
.web-examples {padding: 12px 0 30px;}
.web-examples h4 {margin-top: 16px;}
.web-examples p + p {margin-top: 8px;}
.web-examples .service-image > a {aspect-ratio: 3/2; background: #f4f1f0;}
.web-examples img {height: 100%; object-fit: contain;}
.other-services {align-items: stretch;}
.service-tile {display: flex; flex-direction: column; align-items: flex-start; min-width: 0;}
.service-tile .service-image {width: 100%;}
.service-tile .service-image img {aspect-ratio: 3/2; object-fit: cover;}
.service-tile .service-copy {margin-top: 24px; flex: 1;}
.inline-case {color: var(--pink-dark); text-decoration: underline; text-underline-offset: 3px;}
.service-process {background: var(--pink-light); border-radius: 14px; margin-top: 44px; padding: clamp(22px, 3vw, 36px);}
.service-process h3 {font-size: 22px;}
.service-process p {margin-top: 4px;}
.service-process ol {display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 8px; padding: 0; margin: 17px 0 0; list-style: none; font-size: 13px; font-weight: 500;}
.service-process li:not(:last-child)::after {content: "→"; margin-left: 14px; color: var(--pink-dark);}
.profile-facts {grid-template-columns: 1fr 1.13fr; gap: clamp(30px, 6vw, 95px); border-top: 1px solid #d9c8ca; margin-top: 32px; padding-top: 24px;}
.profile-facts h3 {font-size: 14px; letter-spacing: -.025em; margin: 0 0 12px;}
.profile-facts p {font-size: 12px; line-height: 1.7; margin: 0 0 8px;}
.profile-facts p span {color: var(--muted);}
.software-tools {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 0; margin: 0; list-style: none;}
.software-tools li {display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.35;}
.software-tools img {width: 25px; height: 25px; flex: none; object-fit: contain;}
@media (max-width: 850px) {
  .profile-facts {grid-template-columns: .9fr 1.2fr; gap: 25px;}
  .web-feature {grid-template-columns: 1.1fr 1fr;}
}
@media (max-width: 760px) {
  .services-intro, .web-feature, .web-examples, .other-services, .profile-facts {grid-template-columns: 1fr;}
  .services-intro {gap: 14px; margin-bottom: 25px;}
  .services-intro > p {justify-self: start; max-width: 52ch; font-size: 14px;}
  .other-services {gap: 42px;}
  .service-tile .service-copy {margin-top: 19px;}
  .web-cases small {display: block; margin: 3px 0 0;}
  .ribbon-inner {justify-content: space-between; gap: 10px;}
  .ribbon-inner > a {font-size: 13px; gap: 5px; flex: none;}
  .service-ribbon .ribbon-track {transform: none !important; gap: clamp(5px, 1.6vw, 12px); font-size: clamp(10px, 2.7vw, 14px);}
  .service-ribbon .ribbon-dot {width: 3px; height: 3px;}
}
@media (max-width: 380px) {
  .software-tools {grid-template-columns: repeat(2, minmax(0, 1fr));}
}