/* ROMAGMK · Página de Servicios.
   Cada servicio tiene su propia composición: laboratorio responsive (web),
   resultado de búsqueda y lista técnica (SEO), tienda de muestra (e-commerce),
   campus de muestra (educación) y centro de operaciones (soporte).
   Se apoya en los tokens y capas de main.css. */

@layer sections {
  /* ---------- Base de cada bloque ---------- */
  .svc { position: relative; padding: clamp(48px, min(9vw, 10vh), 128px) 0; overflow: clip; }
  .svc__title { max-width: 17ch; font-size: clamp(1.9rem, min(1.3rem + 2.7vw, 0.8rem + 5.2vh), 3.9rem); }
  .svc__lead { margin-top: 20px; max-width: 52ch; color: var(--text-2); font-size: var(--step-1); line-height: 1.5; }

  /* Entrada coreografiada: el bloque aparece por partes al llegar a él. */
  .js .svc :is(.svc__title, .svc__lead, .svc-group, .rlab, .serp, .seo-list, .shop, .svc-shop__points li, .campus, .edu-facts li, .ops, .route, .svc-seo__honest, .svc-seo__copy > .btn, .svc-web__copy > .btn, .svc-edu__copy > .btn, .svc-shop__cta, .svc-support__cta) {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms + var(--base, 0ms));
  }
  .js .svc.is-in :is(.svc__title, .svc__lead, .svc-group, .rlab, .serp, .seo-list, .shop, .svc-shop__points li, .campus, .edu-facts li, .ops, .route, .svc-seo__honest, .svc-seo__copy > .btn, .svc-web__copy > .btn, .svc-edu__copy > .btn, .svc-shop__cta, .svc-support__cta) {
    opacity: 1;
    translate: 0 0;
  }
  .svc .svc__lead { --base: 120ms; }
  .svc :is(.rlab, .serp, .shop, .campus, .ops) { --base: 200ms; }
  .svc :is(.seo-list, .route) { --base: 380ms; }
  .svc .btn { --base: 420ms; }

  /* ---------- Diseño web: laboratorio responsive ---------- */
  .svc--web { background: var(--ice); }
  .svc-web { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .svc-web__groups { display: grid; gap: 22px; margin: 32px 0 34px; }
  .svc-group h3 { font-size: 1.05rem; color: var(--cobalt); letter-spacing: -0.01em; }
  .svc-group ul { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; padding: 0; list-style: none; }
  .svc-group li {
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.92rem;
    font-weight: 560;
  }

  .rlab { display: grid; gap: 16px; width: 100%; max-width: min(100%, calc((100svh - 230px) / 0.82)); justify-self: center; }
  .rlab__bar { display: inline-flex; justify-self: start; gap: 4px; padding: 5px; border-radius: 999px; background: var(--frost); }
  .rlab__bar button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font-weight: 650;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  .rlab__bar button[aria-checked="true"] { background: var(--indigo); color: var(--white); }
  .rlab__bar button:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 2px; }
  /* Escenario oscuro: los equipos de aluminio se leen con claridad. */
  .rlab__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    border-radius: calc(var(--radius) * 1.4);
    background:
      radial-gradient(55% 60% at 50% 42%, rgb(47 105 169 / 0.55), transparent 72%),
      radial-gradient(40% 40% at 85% 90%, rgb(34 167 203 / 0.25), transparent 70%),
      var(--night);
  }
  .rlab__stage::before {
    /* Reflejo del piso bajo el equipo. */
    content: "";
    position: absolute;
    left: 15%; right: 15%; bottom: 6%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(112 196 219 / 0.28), transparent);
  }
  /* El equipo cambia de forma con un resorte: monitor, tablet o celular. */
  .rlab__device {
    position: relative;
    z-index: 1;
    width: 82%;
    height: 64%;
    margin-bottom: 70px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(165deg, #f4f7fb 0%, #cfd8e6 45%, #a9b5c9 100%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.9),
      inset 0 -2px 0 rgb(80 92 120 / 0.35),
      0 40px 80px -30px rgb(0 0 0 / 0.8),
      0 0 120px -30px rgb(112 196 219 / 0.55);
    transition:
      width 0.85s var(--spring),
      height 0.85s var(--spring),
      margin 0.85s var(--spring),
      padding 0.5s var(--ease-out),
      border-radius 0.6s var(--ease-out);
  }
  .rlab__stage[data-device="tablet"] .rlab__device { width: 52%; height: 90%; margin-bottom: 0; padding: 14px; border-radius: 28px; }
  .rlab__stage[data-device="phone"] .rlab__device { width: 31%; height: 88%; margin-bottom: 0; padding: 8px; border-radius: 34px; }
  .rlab__screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 5px solid #0b0d24;
    border-radius: 9px;
    background: #111317;
    transition: border-radius 0.6s var(--ease-out), border-width 0.5s;
  }
  .rlab__stage[data-device="tablet"] .rlab__screen { border-radius: 14px; border-width: 6px; }
  .rlab__stage[data-device="phone"] .rlab__screen { border-radius: 26px; border-width: 5px; }
  .rlab__screen::after {
    /* Reflejo suave sobre el vidrio. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(115deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 36%);
    pointer-events: none;
  }
  .rlab__browser {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    background: #e9edf3;
    color: #4b5568;
    font-size: 0.68rem;
    transition: opacity 0.35s, translate 0.45s var(--ease-out);
  }
  .rlab__browser i { width: 7px; height: 7px; border-radius: 50%; background: #c3cad6; }
  .rlab__browser i:first-child { background: #e0736b; }
  .rlab__browser span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--white); }
  .rlab__stage:not([data-device="desktop"]) .rlab__browser { opacity: 0; translate: 0 -100%; }
  /* Cada versión del sitio entra con un barrido desde abajo, como si se reacomodara. */
  .rlab__view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transition: opacity 0.4s, clip-path 0.75s var(--ease-out) 0.18s;
  }
  .rlab__view.is-on { opacity: 1; clip-path: inset(0 0 0 0); }
  .rlab__view.is-leaving { opacity: 0; clip-path: inset(0 0 0 0); scale: 0.97; filter: blur(4px); transition: opacity 0.35s, scale 0.35s, filter 0.35s; }
  .rlab__view[data-view="desktop"] { top: 22px; }
  .rlab__view img { display: block; width: 100%; height: auto; }
  /* El sitio se recorre solo dentro de la pantalla. */
  /* El recorrido arranca solo cuando el equipo ya está a la vista (clase is-live). */
  .rlab__stage.is-live .rlab__view.is-on img { animation: rlab-scroll 30s cubic-bezier(0.45, 0, 0.55, 1) 0.6s infinite alternate both; }
  @keyframes rlab-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + var(--view-h, 300px))); } }
  .rlab__screen:hover .rlab__view img { animation-play-state: paused; }
  /* Cámara del tablet e isla del celular. */
  .rlab__cam {
    position: absolute;
    left: 50%; top: 0;
    z-index: 5;
    translate: -50% 0;
    opacity: 0;
    background: #0b0d24;
    transition: opacity 0.4s, width 0.5s var(--ease-out), height 0.5s, top 0.5s;
  }
  .rlab__stage[data-device="tablet"] .rlab__cam { opacity: 1; top: 5px; width: 6px; height: 6px; border-radius: 50%; }
  .rlab__stage[data-device="phone"] .rlab__cam { opacity: 1; top: 19px; width: 26%; height: 12px; border-radius: 999px; }
  /* Soporte del monitor: cuello y base salen del propio equipo, solo en escritorio. */
  .rlab__device::after {
    content: "";
    position: absolute;
    left: 50%; top: 100%;
    width: 30%;
    height: 64px;
    translate: -50% 0;
    background: linear-gradient(90deg, #9ea9be, #e9eef5 45%, #b3bed0);
    clip-path: polygon(36% 0, 64% 0, 70% 84%, 100% 84%, 100% 100%, 0 100%, 0 84%, 30% 84%);
    transition: opacity 0.3s;
  }
  .rlab__stage:not([data-device="desktop"]) .rlab__device::after { opacity: 0; }
  .rlab__caption { min-height: 3em; color: var(--text); line-height: 1.5; }
  .rlab__caption.is-swap { animation: serp-in 0.45s var(--ease-out); }
  .rlab__caption strong { color: var(--cobalt); }
  .rlab__note { color: var(--text-2); font-size: 0.92rem; }
  .rlab__note a { font-weight: 650; }

  /* ---------- SEO: resultado de búsqueda + lista técnica ---------- */
  .svc--seo {
    color: var(--text-on-dark);
    background:
      radial-gradient(45% 60% at 92% 8%, rgb(34 167 203 / 0.3), transparent 70%),
      radial-gradient(50% 60% at 0% 100%, rgb(47 105 169 / 0.35), transparent 70%),
      var(--night);
  }
  .svc--seo .svc__title { color: var(--white); }
  .svc--seo .svc__lead { color: var(--text-on-dark-2); }
  .svc-seo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .svc-seo__copy { position: sticky; top: calc(var(--header-h) + 40px); }
  .svc-seo__honest { margin: 22px 0 30px; padding-left: 16px; border-left: 3px solid var(--aqua); max-width: 44ch; color: var(--text-on-dark); line-height: 1.5; }
  .svc-seo__demo { display: grid; gap: 22px; }

  .serp { padding: 18px; border-radius: var(--radius); background: var(--white); color: #1f2937; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.6); }
  .serp__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--frost); }
  .serp__tabs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-weight: 650; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
  .serp__tabs button[aria-selected="true"] { background: var(--indigo); color: var(--white); }
  .serp__tabs button:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 2px; }
  .serp__box { position: relative; margin-top: 16px; padding: 18px 18px 16px; border: 1px solid #e5e7eb; border-radius: 14px; }
  .serp__result { animation: serp-in 0.5s var(--ease-out); }
  .serp__result[hidden] { display: none; }
  @keyframes serp-in { from { opacity: 0; translate: 0 10px; } }
  .serp__url { font-size: 0.85rem; color: #3c4043; }
  .serp__title { margin-top: 4px; font-size: 1.3rem; line-height: 1.3; color: #1a3cb8; }
  .serp__desc { margin-top: 6px; font-size: 0.95rem; line-height: 1.5; color: #4d5156; }
  .serp__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0; list-style: none; }
  .serp__flags li { padding: 5px 11px; border-radius: 999px; background: #fdecea; color: #a52a1f; font-size: 0.82rem; font-weight: 650; }
  .serp__flags--ok li { background: #e4f4ea; color: #17653a; }
  .serp__note { margin-top: 12px; color: #5b6475; font-size: 0.82rem; }

  .seo-list { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgb(255 255 255 / 0.04); }
  .seo-list h3 { color: var(--white); font-size: 1.15rem; }
  .seo-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 18px; padding: 0; list-style: none; }
  .seo-checks li {
    position: relative;
    padding-left: 34px;
    color: var(--text-on-dark-2);
    line-height: 1.45;
  }
  .seo-checks strong { color: var(--white); font-weight: 650; }
  /* Cada punto se marca en secuencia al entrar el bloque. */
  .seo-checks li::before {
    content: "";
    position: absolute;
    left: 0; top: 1px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid rgb(112 196 219 / 0.4);
    transition: background-color 0.4s, border-color 0.4s;
    transition-delay: calc(600ms + var(--i) * 140ms);
  }
  .seo-checks li::after {
    content: "";
    position: absolute;
    left: 7px; top: 6px;
    width: 6px; height: 11px;
    border: solid var(--night);
    border-width: 0 2.5px 2.5px 0;
    rotate: 45deg;
    scale: 0;
    transition: scale 0.4s var(--spring);
    transition-delay: calc(700ms + var(--i) * 140ms);
  }
  .svc--seo.is-in .seo-checks li::before { background: var(--aqua); border-color: var(--aqua); }
  .svc--seo.is-in .seo-checks li::after { scale: 1; }
  .seo-list__more { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-dark); color: var(--text-on-dark-2); }

  /* ---------- E-commerce: tienda de muestra ---------- */
  .svc--shop { background: var(--white); }
  .svc-shop {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas: "copy copy" "shop points" "shop cta";
    gap: 28px clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .svc-shop__copy { grid-area: copy; }
  .shop { grid-area: shop; }
  .svc-shop__points { grid-area: points; display: grid; gap: 12px; padding: 0; list-style: none; }
  .svc-shop__cta { grid-area: cta; justify-self: start; }
  .svc-shop__points li {
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    background: var(--ice);
    border-left: 3px solid var(--cerulean);
    color: var(--text-2);
  }
  .svc-shop__points strong { color: var(--indigo); font-family: var(--display); font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; }

  .shop__window {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 1.2);
    background: var(--ice);
    box-shadow: 0 40px 80px -48px rgb(20 22 117 / 0.55);
  }
  .shop__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--white); border-bottom: 1px solid var(--line); }
  .shop__brand { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: #5a3a1a; }
  .shop__cart { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--indigo); font-weight: 700; }
  .shop__cart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .shop__cart b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--indigo); color: var(--white); font-size: 0.8rem; }
  .shop__cart.is-bump b { animation: cart-bump 0.5s var(--spring); }
  @keyframes cart-bump { 40% { scale: 1.45; } }
  .shop__filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 0; }
  .shop__filters button { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); color: var(--indigo); font-weight: 600; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
  .shop__filters button[aria-checked="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--white); }
  .shop__views { position: relative; padding: 16px 20px 20px; min-height: 360px; }
  .shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
  .shop__grid li { transition: opacity 0.4s var(--ease-out), scale 0.4s var(--ease-out); }
  .shop__grid li.is-out { opacity: 0.15; scale: 0.94; pointer-events: none; }
  .shop__grid li.is-gone { display: none; }
  .product {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 10px 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    text-align: left;
    cursor: pointer;
    transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s;
  }
  .product:hover, .product:focus-visible { translate: 0 -4px; border-color: rgb(20 22 117 / 0.3); box-shadow: 0 16px 30px -20px rgb(20 22 117 / 0.5); }
  .product:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 2px; }
  .product__name { font-weight: 650; color: var(--indigo); line-height: 1.2; }
  .product__price { color: var(--text-2); font-size: 0.9rem; }
  /* Envase ilustrado con CSS: bolsa o frasco sobre fondo de color del producto. */
  .product__img {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--c2), var(--c1));
    overflow: hidden;
  }
  .product__img::before {
    content: "";
    position: absolute;
    left: 30%; right: 30%; top: 24%; bottom: 14%;
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.7));
    box-shadow: 0 14px 20px -12px rgb(0 0 0 / 0.5);
  }
  .product__img::after {
    content: "";
    position: absolute;
    left: 38%; right: 38%; top: 40%; height: 18%;
    border-radius: 4px;
    background: var(--c1);
    opacity: 0.85;
  }
  .shop__detail { animation: detail-in 0.55s var(--ease-out); }
  .shop__detail[hidden] { display: none; }
  @keyframes detail-in { from { opacity: 0; translate: 24px 0; } }
  .shop__back { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--frost); color: var(--indigo); font-weight: 650; cursor: pointer; }
  .shop__detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: center; margin-top: 16px; }
  .product__img--big { border-radius: var(--radius); }
  .shop__detail-name { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--indigo); }
  .shop__detail-price { margin-top: 4px; font-size: 1.2rem; font-weight: 700; color: var(--cobalt); }
  .shop__detail-text { margin-top: 10px; color: var(--text-2); line-height: 1.5; }
  .shop__add { margin-top: 16px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--indigo); color: var(--white); font-weight: 700; cursor: pointer; transition: background-color 0.3s, scale 0.2s; }
  .shop__add:hover { background: var(--cobalt); }
  .shop__add:active { scale: 0.97; }
  .shop__note { margin-top: 12px; color: var(--text-2); font-size: 0.9rem; }

  /* ---------- Plataformas educativas: campus de muestra ---------- */
  .svc--edu { background: linear-gradient(180deg, var(--frost), #d6eef6); }
  .svc-edu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .campus { overflow: hidden; border-radius: calc(var(--radius) * 1.2); background: var(--white); box-shadow: 0 40px 80px -46px rgb(20 22 117 / 0.6); }
  .campus__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; background: var(--indigo); color: var(--white); font-weight: 650; }
  .campus__progress { position: relative; width: 120px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
  .campus__progress i { position: absolute; inset: 0; background: var(--aqua); transform-origin: 0 50%; scale: 0.2 1; transition: scale 0.6s var(--ease-out); }
  .campus__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 340px; }
  .campus__nav { display: grid; align-content: start; gap: 4px; margin: 0; padding: 16px 12px; list-style: none; background: var(--ice); border-right: 1px solid var(--line); counter-reset: mod; }
  .campus__nav button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    counter-increment: mod;
    transition: background-color 0.3s, color 0.3s;
  }
  .campus__nav button::before { content: counter(mod); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--frost-2); color: var(--indigo); font-size: 0.78rem; font-weight: 700; transition: background-color 0.3s, color 0.3s; }
  .campus__nav button[aria-selected="true"] { background: var(--white); color: var(--indigo); box-shadow: 0 6px 16px -10px rgb(20 22 117 / 0.4); }
  .campus__nav button[aria-selected="true"]::before { background: var(--cerulean); color: var(--white); }
  .campus__nav button:focus-visible { outline: 3px solid var(--cerulean); outline-offset: -3px; }
  .campus__panels { position: relative; padding: 22px; }
  .campus__panel { display: grid; gap: 14px; align-content: start; animation: panel-in 0.5s var(--ease-out); }
  .campus__panel[hidden] { display: none; }
  @keyframes panel-in { from { opacity: 0; translate: 0 14px; } }
  .campus__h { font-family: var(--display); font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; color: var(--indigo); }
  .campus__panel > p:not(.campus__h) { color: var(--text-2); line-height: 1.5; }
  .campus__video { position: relative; aspect-ratio: 16 / 8; border-radius: 12px; background: radial-gradient(70% 90% at 30% 20%, var(--cobalt), var(--night)); overflow: hidden; }
  .campus__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: rgb(255 255 255 / 0.92); }
  .campus__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 16px solid var(--indigo); border-block: 11px solid transparent; }
  .campus__video i { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
  .campus__video i::after { content: ""; position: absolute; inset: 0; background: var(--aqua); transform-origin: 0 50%; animation: video-play 6s linear infinite; }
  @keyframes video-play { from { scale: 0 1; } to { scale: 1 1; } }
  .campus__files, .campus__tasks { display: grid; gap: 8px; padding: 0; list-style: none; }
  .campus__files li, .campus__tasks li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--ice); color: var(--indigo); font-weight: 560; }
  .campus__files li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--cobalt); }
  .campus__files li[data-kind="audio"]::before { background: var(--cerulean); }
  .campus__files li[data-kind="doc"]::before { background: var(--indigo); }
  .campus__tasks b { flex: none; min-width: 64px; padding: 4px 8px; border-radius: 6px; background: var(--frost-2); font-size: 0.78rem; text-align: center; }
  .campus__quiz { display: grid; gap: 8px; }
  .campus__quiz button { min-height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); color: var(--indigo); font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
  .campus__quiz button[aria-checked="true"][data-ok="true"] { border-color: #17653a; background: #e4f4ea; }
  .campus__quiz button[aria-checked="true"][data-ok="false"] { border-color: #a52a1f; background: #fdecea; }
  .campus__feedback { min-height: 1.5em; font-weight: 650; color: var(--indigo); }
  .campus__diploma {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 34px 20px;
    border: 2px solid var(--cerulean);
    border-radius: 12px;
    outline: 6px solid var(--frost);
    outline-offset: -14px;
    text-align: center;
    animation: diploma-in 0.7s var(--spring);
  }
  @keyframes diploma-in { from { scale: 0.9; opacity: 0; } }
  .campus__diploma span { color: var(--cobalt); font-weight: 650; }
  .campus__diploma strong { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.03em; color: var(--indigo); }
  .campus__diploma em { color: var(--text-2); font-style: normal; }
  .campus__note { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 0.88rem; }
  .edu-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 32px; padding: 0; list-style: none; }
  .edu-facts li { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.75); color: var(--text-2); font-size: 0.92rem; line-height: 1.4; }
  .edu-facts strong { color: var(--indigo); font-family: var(--display); font-size: 0.98rem; font-weight: 650; letter-spacing: -0.02em; }

  /* ---------- Soporte: centro de operaciones ---------- */
  .svc--support { background: var(--ice); }
  .svc-support__head { margin-bottom: clamp(32px, 4vw, 52px); }
  .ops { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
  .ops__map {
    position: relative;
    aspect-ratio: 600 / 420;
    border-radius: calc(var(--radius) * 1.4);
    background:
      radial-gradient(circle at 50% 50%, rgb(34 167 203 / 0.16), transparent 55%),
      var(--white);
    border: 1px solid var(--line);
  }
  .ops__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ops__lines path { fill: none; stroke: rgb(47 105 169 / 0.25); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 9; animation: ops-flow 1.4s linear infinite; transition: stroke 0.4s, stroke-width 0.4s; }
  .ops__lines path.is-on { stroke: var(--cerulean); stroke-width: 3.5; stroke-dasharray: 10 8; animation-duration: 0.7s; }
  @keyframes ops-flow { to { stroke-dashoffset: -24; } }
  .ops__core {
    position: absolute;
    left: 50%; top: 50%;
    display: grid;
    place-items: center;
    width: clamp(112px, 13vw, 132px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--cobalt), var(--indigo));
    color: var(--white);
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 650;
    text-align: center;
    box-shadow: 0 0 0 10px rgb(34 167 203 / 0.12), 0 20px 40px -18px rgb(20 22 117 / 0.7);
  }
  .ops__core span { max-width: 9ch; line-height: 1.2; }
  .ops__core::before, .ops__core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cerulean); animation: core-ping 3s var(--ease-out) infinite; }
  .ops__core::after { animation-delay: 1.5s; }
  @keyframes core-ping { from { opacity: 0.7; scale: 1; } to { opacity: 0; scale: 1.8; } }
  .ops__node {
    position: absolute;
    left: var(--x); top: var(--y);
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 128px;
    padding: 14px 14px 12px;
    translate: -50% -50%;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--indigo);
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 14px 28px -20px rgb(20 22 117 / 0.5);
    transition: border-color 0.3s, background-color 0.3s, color 0.3s, scale 0.4s var(--spring);
  }
  .ops__node svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ops__node:hover { scale: 1.05; }
  .ops__node[aria-selected="true"] { border-color: var(--indigo); background: var(--indigo); color: var(--white); scale: 1.06; }
  .ops__node:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 3px; }
  .ops__detail {
    min-height: 260px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: calc(var(--radius) * 1.2);
    color: var(--text-on-dark);
    background:
      radial-gradient(70% 80% at 100% 0%, rgb(34 167 203 / 0.35), transparent 60%),
      var(--indigo);
  }
  .ops__detail.is-swap > * { animation: panel-in 0.45s var(--ease-out) both; }
  .ops__detail.is-swap > :nth-child(2) { animation-delay: 60ms; }
  .ops__detail.is-swap > :nth-child(3) { animation-delay: 120ms; }
  .ops__detail-title { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--white); }
  .ops__detail-text { margin-top: 10px; color: var(--text-on-dark-2); line-height: 1.55; }
  .ops__detail-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
  .ops__detail-list li { padding: 7px 13px; border-radius: 999px; background: rgb(255 255 255 / 0.12); font-size: 0.9rem; font-weight: 600; }

  .route { position: relative; margin-top: clamp(36px, 5vw, 64px); }
  .route__label { color: var(--text-2); font-weight: 650; }
  .route__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; padding: 0 0 22px; list-style: none; }
  .route__steps li { display: grid; gap: 6px; padding-top: 18px; border-top: 3px solid var(--frost-2); color: var(--text-2); transition: border-color 0.5s, color 0.5s; }
  .route__steps strong { font-family: var(--display); font-size: 1.05rem; color: var(--indigo); letter-spacing: -0.02em; }
  .route__steps li.is-on { border-top-color: var(--cerulean); }
  .route__steps li.is-on strong { color: var(--cobalt); }
  .route__track { display: none; }
  .svc-support__cta { margin-top: 28px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .svc-web, .svc-seo, .svc-edu, .ops { grid-template-columns: minmax(0, 1fr); }
    .svc-seo__copy { position: static; }
    .svc-shop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "shop" "points" "cta"; }
    .svc-shop__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-edu .campus { order: 2; }
  }
  @media (max-width: 700px) {
    .rlab__stage { aspect-ratio: 1 / 1.1; }
    .rlab__device { height: 50%; margin-bottom: 52px; padding: 7px; }
    .rlab__device::after { height: 48px; }
    .rlab__stage[data-device="tablet"] .rlab__device { width: 68%; height: 90%; padding: 10px; }
    .rlab__stage[data-device="phone"] .rlab__device { width: 46%; height: 90%; padding: 7px; }
    .rlab__bar { justify-self: stretch; }
    .rlab__bar button { flex: 1; padding: 0 8px; }
    .seo-checks { grid-template-columns: minmax(0, 1fr); }
    .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop__detail-body { grid-template-columns: minmax(0, 1fr); }
    .product__img--big { max-width: 220px; }
    .svc-shop__points, .edu-facts { grid-template-columns: minmax(0, 1fr); }
    .campus__body { grid-template-columns: minmax(0, 1fr); }
    .campus__nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
    .campus__nav li { flex: none; }
    .campus__nav button { white-space: nowrap; }
    /* El mapa se vuelve una cuadrícula de módulos: sin líneas ni núcleo. */
    .ops__map { aspect-ratio: auto; padding: 16px; }
    .ops__lines, .ops__core { display: none; }
    .ops__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ops__node { position: static; translate: none; min-width: 0; }
    .route__steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .route__steps li { padding: 12px 0 12px 16px; border-top: 0; border-left: 3px solid var(--frost-2); }
    .route__steps li.is-on { border-left-color: var(--cerulean); }
  }
}

/* ------------------------------------------------------------------------ */
/* Cabecera de Servicios: selector de soluciones + mazo de tarjetas en 3D.  */
@layer sections {
  /* El abanico de tarjetas puede asomar por los lados: se recorta para no ensanchar la página. */
  .shero { overflow-x: clip; padding-top: calc(var(--header-h) + clamp(18px, min(5vw, 5vh), 72px)); padding-bottom: clamp(40px, min(7vw, 8vh), 96px); }
  .shero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }

  /* Titular en tres líneas que suben una tras otra. */
  .shero__title { font-size: clamp(2rem, min(0.8rem + 2.8vw, 0.5rem + 5.6vh), 3.8rem); line-height: 0.98; letter-spacing: -0.045em; }
  .shero__line { display: block; animation: line-in 1s var(--ease-out) both; animation-delay: calc(0.08s + var(--i) * 0.1s); }
  .shero__line:last-child { background: linear-gradient(90deg, var(--indigo), var(--cobalt) 55%, var(--cerulean)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
  .shero__lead { max-width: 50ch; margin-top: clamp(10px, 2.2vh, 18px); color: var(--text-2); font-size: var(--step-1); line-height: 1.5; animation: fade-in 0.9s var(--ease-out) 0.4s both; }
  .shero__actions { margin-top: clamp(14px, 3vh, 26px); animation: fade-in 0.8s var(--ease-out) 0.9s both; }

  /* Selector: seis soluciones en dos columnas; la activa muestra su avance. */
  .srail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: clamp(14px, 3vh, 26px); }
  .srail button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: clamp(44px, 6.6vh, 54px);
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.85);
    color: var(--indigo);
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    animation: type-in 0.7s var(--ease-out) both;
    transition: background-color 0.35s, color 0.35s, border-color 0.35s, translate 0.4s var(--ease-out);
  }
  .srail button:nth-child(1) { animation-delay: 0.5s; }
  .srail button:nth-child(2) { animation-delay: 0.56s; }
  .srail button:nth-child(3) { animation-delay: 0.62s; }
  .srail button:nth-child(4) { animation-delay: 0.68s; }
  .srail button:nth-child(5) { animation-delay: 0.74s; }
  .srail button:nth-child(6) { animation-delay: 0.8s; }
  @keyframes type-in { from { opacity: 0; translate: 0 16px; } }
  .srail svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--cobalt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
  .srail button:hover { translate: 0 -2px; border-color: rgb(20 22 117 / 0.35); }
  .srail button[aria-selected="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--white); }
  .srail button[aria-selected="true"] svg { stroke: var(--aqua); }
  .srail button:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 2px; }
  /* Barra de avance mientras el mazo rota solo. */
  .srail i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--aqua); transform-origin: 0 50%; scale: 0 1; }
  .srail.is-auto button[aria-selected="true"] i { animation: rail-progress var(--auto-ms, 4500ms) linear both; }
  @keyframes rail-progress { to { scale: 1 1; } }

  /* ---------- Mazo: la tarjeta elegida al frente, el resto en abanico ---------- */
  /* El mazo nunca es más alto que la pantalla disponible. */
  .deck { position: relative; width: 100%; max-width: min(100%, calc((100svh - 150px) / 0.92)); margin-inline: auto; animation: fade-in 1s var(--ease-out) 0.3s both; }
  .deck::before {
    /* Halo de color detrás del mazo. */
    content: "";
    position: absolute;
    inset: 8% 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(34 167 203 / 0.28), rgb(47 105 169 / 0.12) 60%, transparent);
    filter: blur(10px);
  }
  .deck__stage { position: relative; aspect-ratio: 1 / 0.92; perspective: 1400px; }
  .dcard {
    --dx: 0%; --dy: 0%; --s: 1; --rz: 0deg; --ry: 0deg; --o: 1; --b: 1;
    position: absolute;
    left: 50%; top: 50%;
    z-index: var(--z, 1);
    width: min(64%, 400px);
    overflow: hidden;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 40px 70px -34px rgb(8 9 58 / 0.55), 0 0 0 1px rgb(20 22 117 / 0.06);
    translate: calc(-50% + var(--dx)) calc(-50% + var(--dy));
    scale: var(--s);
    rotate: var(--rz);
    transform: rotateY(var(--ry));
    opacity: var(--o);
    filter: brightness(var(--b));
    cursor: pointer;
    transition:
      translate 0.9s var(--spring), scale 0.9s var(--spring), rotate 0.9s var(--spring),
      transform 0.9s var(--spring), opacity 0.5s var(--ease-out), filter 0.5s var(--ease-out);
    animation: card-in 0.9s var(--ease-out) backwards;
    animation-delay: calc(0.35s + var(--k, 0) * 0.08s);
  }
  @keyframes card-in { from { opacity: 0; translate: -50% -20%; } }
  /* Posiciones del abanico (las fija el script en data-pos). */
  .dcard[data-pos="0"] { --z: 6; }
  .dcard[data-pos="1"] { --dx: 30%; --dy: -3%; --s: 0.86; --rz: 6deg; --ry: -16deg; --z: 5; --b: 0.92; }
  .dcard[data-pos="2"] { --dx: 50%; --dy: -6%; --s: 0.72; --rz: 11deg; --ry: -24deg; --z: 4; --o: 0.6; --b: 0.85; }
  .dcard[data-pos="-1"] { --dx: -30%; --dy: -3%; --s: 0.86; --rz: -6deg; --ry: 16deg; --z: 5; --b: 0.92; }
  .dcard[data-pos="-2"] { --dx: -50%; --dy: -6%; --s: 0.72; --rz: -11deg; --ry: 24deg; --z: 4; --o: 0.6; --b: 0.85; }
  .dcard[data-pos="3"] { --dy: -12%; --s: 0.6; --z: 1; --o: 0; }
  .dcard:not([data-pos="0"]):hover { --b: 1; }
  .dcard:not([data-pos="0"]) .dcard__body { opacity: 0.55; }

  .dcard__top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 128px;
    padding: 18px 20px;
    background:
      radial-gradient(rgb(255 255 255 / 0.18) 1px, transparent 1.4px) 0 0 / 16px 16px,
      linear-gradient(135deg, var(--g1), var(--g2));
    color: var(--white);
  }
  .dcard__top::after {
    /* Brillo que cruza la tarjeta activa. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.22) 45%, transparent 60%);
    translate: -100% 0;
  }
  .dcard[data-pos="0"] .dcard__top::after { animation: card-shine 1.4s var(--ease-out) 0.35s; }
  @keyframes card-shine { to { translate: 100% 0; } }
  .dcard__top svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .dcard[data-pos="0"] .dcard__top svg { animation: icon-float 3s ease-in-out infinite; }
  @keyframes icon-float { 50% { translate: 0 -5px; } }
  .dcard__tag { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.16); font-size: 0.78rem; font-weight: 650; backdrop-filter: blur(4px); }
  .dcard__body { display: grid; gap: 10px; padding: 20px 22px 22px; transition: opacity 0.4s; }
  .dcard__title { font-size: 1.45rem; letter-spacing: -0.03em; }
  .dcard__body p { color: var(--text-2); line-height: 1.45; font-size: 0.95rem; }
  .dcard__body ul { display: grid; gap: 7px; margin-top: 2px; padding: 0; list-style: none; }
  .dcard__body li { position: relative; padding-left: 26px; font-weight: 600; font-size: 0.93rem; color: var(--indigo); }
  .dcard__body li::before {
    content: "";
    position: absolute;
    left: 0; top: 2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--frost-2);
  }
  .dcard__body li::after {
    content: "";
    position: absolute;
    left: 6px; top: 5px;
    width: 4px; height: 8px;
    border: solid var(--cobalt);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
  }
  .dcard__body a { justify-self: start; margin-top: 4px; font-weight: 700; color: var(--cobalt); }

  /* Pantallas muy bajas (laptops pequeñas): el texto de apoyo se compacta. */
  @media (max-height: 640px) and (min-width: 1025px) {
    .shero__lead { font-size: 1.02rem; line-height: 1.45; }
    .srail button { min-height: 42px; }
  }
  @media (max-width: 1024px) {
    .shero__grid { grid-template-columns: minmax(0, 1fr); }
    .deck { max-width: 620px; width: 100%; margin-inline: auto; }
  }
  @media (max-width: 640px) {
    .srail button { min-height: 52px; padding: 0 10px; font-size: 0.88rem; gap: 8px; }
    .srail svg { width: 20px; height: 20px; }
    .deck__stage { aspect-ratio: 1 / 1.25; }
    .dcard { width: 80%; }
    .dcard[data-pos="1"] { --dx: 18%; }
    .dcard[data-pos="-1"] { --dx: -18%; }
    .dcard[data-pos="2"], .dcard[data-pos="-2"] { --o: 0; }
  }
}