/* ============================================================================
   SPICA STUDIO · V6 · SERVICES (r13, 1-sep-2026)
   Hoja exclusiva de services.html. Carga la ULTIMA, asi que manda sobre
   tokens/base/sections/demos SOLO en esta pagina. Ningun token se redefine:
   las variables locales (--svc-accent y compania) viven en su componente,
   igual que --which-accent y --grow-accent ya lo hacian.

   La pagina habla en LA HOJA (el Home habla en LA APP): la informacion se
   ordena sola sobre papel. Cuatro registros de superficie y solo cuatro:
   PAPEL (las siete lineas) · BANDA de acento a sangre (las 3 aperturas de
   especialidad) · SLATE (Regla 01, el modelo de pago unico, "no confundir
   con la 1.1") · MIST (el board, el cierre y las dos puertas).

   Cero pines, cero scrub y cero video. Decision firmada del plan r13.
   ========================================================================== */

/* ---- nav: estado activo ---------------------------------------------------- */
.site-nav a[aria-current="page"] { color: var(--violet); }
.site-nav a[aria-current="page"]::after { right: 0; }

/* 0 · Aqui se habian rescatado .sc-card, .sc-dot, .sc-dot--live y .sc-check de
   css/scenes.css al retirar esa hoja. NINGUNA la usa ningun HTML ni JS del
   proyecto, asi que se retiran: con ellas se va la unica animacion `infinite`
   de la pagina, que ademas quedaba fuera del gate `.demo.is-halted`. */

/* ============================================================================
   1 · REMEDIO C35, SIN MEDIA QUERY
   Todo hijo de una grilla que pueda contener una escena baja de su
   min-content. Va SIN media query a proposito: el arreglo de r6 quedo
   encerrado en max-width:1080px y por eso el fallo sobrevivio a 1081.
   A 1440 y 1920 la regla es inerte, la columna natural ya es mas ancha.
   ========================================================================== */
.service > *,
.svc-rule__grid > *,
.svc-own__grid > *,
.svc-board__top > *,
.svc-board__group > *,
.svc-board__set > *,
.svc-models > *,
.svc-split > *,
.svc-vs__grid > *,
.svc-act__body > * { min-width: 0; }

/* ============================================================================
   2 · HERO · papel
   Sin cluster 3D (el WebGL es firma del Home) y sin escena (svc-index monta
   dentro del board). Titular, lead y las dos puertas.
   ========================================================================== */
.svc-hero { padding: clamp(8.5rem, 20vh, 12rem) 0 var(--rhythm-half); }
/* el bloque del hero NO se centra: comparte el borde izquierdo del shell con
   el resto de la pagina. El tope de 54rem va en los hijos, no en el .shell,
   que si se le pone ahi arrastra su propio margin-inline:auto y desplaza el
   titular 216px a la derecha del resto (medido a 1440). */
/* r14 pasada de ritmo: el hero abria con el 40 % derecho en papel liso hasta
   abajo (REVISION-VISUAL 2.2). Pasa a las dos columnas de las hojas (7fr/5fr,
   alineadas al pie) con los tres sellos de verdad a la derecha. */
.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.svc-hero__grid > * { min-width: 0; }
.svc-hero__inner {
  display: grid;
  justify-items: start;
  gap: 1.2rem;
}
.svc-hero__chips {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  align-content: end;
  padding-bottom: 0.35rem;
}
.svc-hero__chips .chip {
  padding: 0.5rem 0.95rem;
  font-size: 0.72rem;
}
/* bajo 1081 el hero es una sola columna (como el de las hojas) y los sellos
   pasan a fila envuelta debajo de las dos puertas */
@media (max-width: 1080px) {
  .svc-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
  .svc-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0; }
  .svc-hero__chips .chip { white-space: normal; }
}
.svc-hero__inner > * { max-width: 54rem; }
.svc-hero .lead { max-width: 62ch; }
.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

/* ============================================================================
   3 · WHICH DOOR · papel
   ========================================================================== */
.which { padding-bottom: var(--rhythm-half); }
.which__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.which-card {
  --which-accent: var(--violet);
  --which-soft: var(--lavender-light);
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--which-accent);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.9rem;
  transition:
    transform var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out),
    background var(--dur-state) var(--ease);
}
.which-card--teal {
  --which-accent: var(--teal);
  --which-soft: var(--teal-light);
}
/* r13 P2-5: la tercera especialidad. --amber-text y no --amber, que es la
   regla de la casa: el ambar nunca pinta texto (2,84 sobre papel). El borde
   superior es grafico y si toma el ambar pleno. */
.which-card--amber {
  --which-accent: var(--amber-text);
  --which-soft: var(--amber-light);
  border-top-color: var(--amber);
}
.which-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  background: var(--which-soft);
}
.which-card__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 460;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--which-accent);
}
.which-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--ls-heading);
}
.which-card__copy {
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 34ch;
}
.which-card__arrow {
  position: absolute;
  right: 1.6rem;
  bottom: 1.3rem;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--which-accent);
  transition: transform var(--dur-state) var(--ease);
}
.which-card__arrow svg { width: 100%; height: 100%; }
.which-card:hover .which-card__arrow { transform: translateY(5px); }

/* ============================================================================
   4 · SLATE · los tres intertitulos
   Regla 01 (pais), el modelo de pago unico y "no confundir con la 1.1".
   Bloque insertado y redondeado, como .pillar--dark del Home, pero con clase
   propia: la palabra "pillar" ya no existe en esta pagina.
   ========================================================================== */
.svc-slate {
  background: var(--slate);
  color: var(--paper);
  border-radius: clamp(20px, 3.4vw, 44px);
  margin-inline: clamp(0.5rem, 1.2vw, 1.2rem);
  padding: var(--rhythm) 0;
}
.svc-slate .kicker { color: rgba(246, 245, 241, 0.65); }
.svc-slate .kicker__num { color: var(--teal-bright); }
.svc-slate .h2,
.svc-slate .h3 { color: var(--paper); }
.svc-slate .lead { color: rgba(246, 245, 241, 0.72); }
.svc-slate p { color: rgba(246, 245, 241, 0.82); }
.svc-slate a { color: var(--teal-bright); }
.svc-slate .service__list li { color: rgba(246, 245, 241, 0.78); }
.svc-slate .service__list b { color: var(--paper); }
.svc-slate .service__list li::before { color: var(--teal-bright); }
.svc-slate .chip {
  background: rgba(246, 245, 241, 0.06);
  border-color: var(--line-on-dark);
  color: rgba(246, 245, 241, 0.82);
}
/* r13 P2-10: --teal-bright sobre el relleno del chip medía 3,74:1 con 10,9px
   de cuerpo, y estos chips no son adorno de escena: son la prosa que dice
   donde vive cada una de las tres excepciones. Un paso hacia el papel, mismo
   hue y mismo dueno, deja el ratio en AA. */
.svc-slate .chip--us {
  background: rgba(86, 168, 143, 0.14);
  border-color: var(--teal-bright);
  color: color-mix(in srgb, var(--teal-bright) 78%, var(--paper));
}
.svc-slate .scene-caption { color: rgba(246, 245, 241, 0.58); }
/* r13 A11Y: el outline global es --violet, que sobre --slate mide 2,41:1 y
   reprueba el umbral de 3:1 de elemento no textual. Sobre slate el foco de
   teclado seria invisible. --violet-bright mide 3,80:1 y pasa. Acotado a la
   superficie oscura de ESTA pagina: el Home no se toca. */
.svc-slate :focus-visible { outline-color: var(--violet-bright); }

/* r13 P2-11: y las otras dos superficies oscuras de la pagina, que no cuelgan
   de .svc-slate y por eso se quedaban fuera de la regla de arriba. Con
   outline-offset 3px el anillo se pinta sobre la superficie del PADRE, no
   sobre el boton: medido, --violet daba 1,98:1 sobre --violet-deep y entre
   1,66 y 1,12 sobre el degradado del door-strip. Y son los dos CTA del
   cierre. --paper da 10,94 y 6,17 respectivamente. */
.door-strip :focus-visible,
.svc-close .door-card--violet :focus-visible { outline-color: var(--paper); }

/* ============================================================================
   5 · LAS DOS REGLAS · Regla 01 en slate, Regla 02 en papel
   Arriba y como promesa: una regla al final de la pagina se lee como una
   condicion que te acaban de descubrir; la misma regla al principio se lee
   como una definicion del servicio.
   ========================================================================== */
.svc-rule--industry { padding: var(--rhythm) 0; }
.svc-rule .section-head { margin-bottom: var(--rhythm-half); }
.svc-rule__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.svc-rule__copy { display: grid; gap: 1.1rem; max-width: 40rem; }
.svc-rule__copy > p { font-size: 1.02rem; line-height: 1.6; }
.svc-rule__media { display: grid; gap: 0.7rem; }

/* ---- las tres excepciones, dichas como transparencia ----------------------- */
.svc-exceptions {
  margin-top: var(--rhythm-half);
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--rhythm-half);
  display: grid;
  gap: 1rem;
}
.svc-exceptions__lead {
  max-width: 56ch;
  font-size: var(--text-lead);
  line-height: 1.55;
}
.svc-exceptions__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 0.6rem;
}
.svc-exceptions__list > li {
  border: 1px solid var(--line-on-dark);
  border-top: 3px solid var(--teal-bright);
  border-radius: var(--radius-md);
  background: rgba(246, 245, 241, 0.035);
  padding: 1.3rem 1.4rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.svc-exceptions__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--paper) !important;
}
.svc-exceptions__list p:not(.svc-exceptions__tag) { font-size: 0.95rem; line-height: 1.55; }
.svc-exceptions__close {
  margin-top: 0.4rem;
  max-width: 62ch;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: rgba(246, 245, 241, 0.62) !important;
}

/* ============================================================================
   6 · BOARD · el catalogo entero en una pantalla, sobre mist
   Es la seccion firma y el anti-pin deliberado: siete lineas visibles a la
   vez y cada celda un ancla. svc-index monta encima y su estado final ES la
   seccion. NUNCA repeat(3, 1fr): ese es el bug de r6 (1fr no baja del
   min-content y la tercera tarjeta se salia 65px del viewport).
   ========================================================================== */
.svc-board { background: var(--mist); padding: var(--rhythm) 0; }
.svc-board .section-head { margin-bottom: 0; }
/* la escena escribe la hoja arriba; el indice de abajo es el que se pulsa.
   Nada de display:none en el stage vacio: un [data-demo] sin caja no cruza
   nunca el IntersectionObserver de montaje y la escena no arranca jamas. */
.svc-board__top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: var(--rhythm-half);
}
.svc-board__top .section-head .lead { max-width: 40ch; }
.svc-board__figure { display: grid; gap: 0.7rem; }
.svc-board__stage { display: grid; gap: 1.4rem; }
.svc-board__set {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 2rem);
  align-items: start;
}
.svc-board__group {
  --svc-accent: var(--violet);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
/* Sobre --mist los acentos se hunden un paso dentro de su propia familia
   (r4 C6): teal 3,90 no llega, la mezcla mide 4,77; el ambar de texto 4,34
   no llega, la mezcla mide 5,0; el violeta base pasa solo con 4,75. */
.svc-board__group--systems { --svc-accent: color-mix(in srgb, var(--teal) 70%, var(--teal-deep)); }
.svc-board__group--strategy { --svc-accent: color-mix(in srgb, var(--amber-text) 90%, var(--ink)); }
.svc-board__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-accent);
}
.svc-board__group > .h3 { line-height: 1; }
.svc-board__group > .h3 a { color: inherit; text-decoration: none; }
.svc-board__group > .h3 a:hover { color: var(--svc-accent); }
.svc-board__sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.svc-board__cells { list-style: none; display: grid; gap: 0.55rem; }
.svc-board__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num name" "num kick";
  column-gap: 0.85rem;
  align-items: baseline;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  min-height: 44px;
  text-decoration: none;
  transition:
    border-color var(--dur-state) var(--ease),
    transform var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out);
}
.svc-board__cell b {
  grid-area: num;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 520;
  letter-spacing: 0.04em;
  color: var(--svc-accent);
}
.svc-board__cell span {
  grid-area: name;
  font-weight: 570;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.svc-board__cell i {
  grid-area: kick;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* r13 P2-6: la pagina promete marcar las excepciones donde aparecen, y el
   board es una aparicion de la 2.1. Va en la columna del kicker, en su misma
   linea, para no cambiar el alto de la celda. */
.svc-board__cell--us {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "num name us" "num kick us";
}
.svc-board__us {
  grid-area: us;
  align-self: center;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 520;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-light);
  border-radius: 999px;
  padding: 0.16em 0.6em;
  white-space: nowrap;
}
.svc-board__cell:hover,
.svc-board__cell:focus-visible {
  border-left-color: var(--svc-accent);
  transform: translateX(3px);
  box-shadow: var(--shadow-lift);
}
/* la columna de Strategy tiene una celda contra tres de las otras dos. El
   hueco no se rellena con nada inventado: se le da el dato que es suyo. */
.svc-board__note {
  margin-top: 0.5rem;
  border-left: 3px solid var(--svc-accent);
  padding: 0.55rem 0 0.55rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--svc-accent);
}

/* ============================================================================
   7 · LOS TRES CORTES A SANGRE · lavanda, teal-light, ambar-light
   Un solo pase, sin scheduler: wipe lateral del acento (520ms), el numero
   sube (620ms, retardo 140), y la copy entra con el [data-reveal] del
   sistema. En ?static y reduced-motion, el estado final directo.
   ========================================================================== */
.svc-act { padding-bottom: var(--rhythm); }
.svc-cut {
  --svc-accent: var(--violet);
  --svc-band: var(--lavender-light);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 6.5vw, 5.5rem) 0;
  margin-bottom: var(--rhythm-half);
}
.svc-cut--systems {
  --svc-accent: var(--teal-deep);
  --svc-band: var(--teal-light);
}
.svc-cut--strategy {
  --svc-accent: var(--amber-text);
  --svc-band: var(--amber-light);
}
.svc-cut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--svc-band);
  transform-origin: left center;
  transition: transform 0.52s var(--ease-out);
}
/* el estado plegado SOLO existe si hay JS: sin el, la banda nace entera */
.js .svc-cut::before { transform: scaleX(0); }
.js .svc-cut.is-in::before { transform: scaleX(1); }
/* el folio grande va a la DERECHA y la copy conserva el borde izquierdo del
   shell: con el numero delante, el titular de la banda caia 181px a la
   derecha del titular de las lineas que cuelgan de ella (medido a 1440). */
.svc-cut__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3.5vw, 3rem);
  align-items: start;
}
.svc-cut__copy { grid-column: 1; grid-row: 1; }
.svc-cut__num { grid-column: 2; grid-row: 1; }
.svc-cut__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.78;
  letter-spacing: var(--ls-display);
  color: var(--svc-accent);
  opacity: 0;
  transform: translateY(0.22em);
  transition:
    opacity 0.62s var(--ease-out) 0.14s,
    transform 0.62s var(--ease-out) 0.14s;
}
.svc-cut.is-in .svc-cut__num,
html:not(.js) .svc-cut__num { opacity: 1; transform: none; }
.svc-cut__copy { display: grid; gap: 1.1rem; max-width: 46rem; }
.svc-cut__copy .lead { max-width: 52ch; color: var(--ink-soft); }
.svc-cut--systems .kicker__num { color: var(--svc-accent); }
.svc-cut__actions { margin-top: 0.3rem; }

@media (prefers-reduced-motion: reduce) {
  .js .svc-cut::before { transform: none; }
  .svc-cut__num { opacity: 1; transform: none; }
}

/* ============================================================================
   8 · EL HILO · un acento vertical por especialidad
   No es un tercer mecanismo de scroll: es una columna sticky de 1px con el
   color del duenio. El relleno lo pinta js/spine.js en los tres motores.
   r13: aqui vivia un bloque `@supports (animation-timeline: view())`. Se
   retiro. `view()` mide el recorrido de la caja del PROPIO sujeto, y el sujeto
   es un svg sticky de 200px: en cuanto se pega, su progreso deja de avanzar.
   Medido en Chrome, el hilo se llenaba al 25% del acto y quedaba muerto el 75%
   restante, mientras en Safari (donde mandaba el modulo) se veia bien.
   Por debajo de 1200px no se dibuja: el margen no da y su trabajo lo hace el
   numero de cada corte.
   ========================================================================== */
.svc-act__body { display: block; position: relative; }
.svc-spine { display: none; }
.svc-act__lines { min-width: 0; }

/* El hilo cuelga en el MARGEN, no en una columna: si se le da columna propia,
   las siete lineas se desplazan 30px y dejan de compartir borde con su banda.
   A 1200 el gutter mide 60px y el hilo ocupa 34, asi que nunca desborda. */
@media (min-width: 1200px) {
  .svc-spine {
    display: block;
    position: absolute;
    left: -34px;
    top: 0;
    bottom: 0;
    width: 6px;
  }
  .svc-spine__svg {
    position: sticky;
    top: 7rem;
    display: block;
    width: 6px;
    height: 200px;
    overflow: visible;
  }
  .svc-spine__track { stroke: var(--line); stroke-width: 2; fill: none; }
  .svc-spine__fill {
    stroke: var(--svc-spine-accent, var(--violet));
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 100;
    /* sin JavaScript el hilo se queda entero: es una linea de acento, no un
       indicador que pueda quedarse vacio y mentir. */
    stroke-dashoffset: 0;
  }
  /* con JS manda js/spine.js, que lo pinta desde vacio en los tres motores */
  .js .svc-spine__fill { stroke-dashoffset: 100; }
  .svc-act--systems { --svc-spine-accent: var(--teal); }
  .svc-act--strategy { --svc-spine-accent: var(--amber-text); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-spine__fill,
  .js .svc-spine__fill { stroke-dashoffset: 0; }
}

/* ============================================================================
   9 · LAS SIETE LINEAS · papel
   .service viene de sections.css (dos columnas 7fr/5fr alternadas). Aqui solo
   entra la tercera fila, a ancho completo, con el detalle del catalogo.
   ========================================================================== */
.svc-wide {
  grid-column: 1 / -1;
  order: 3;
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

/* la escena, mientras no monte, es una hoja en blanco y no un hueco.
   Sin JavaScript no puede montar nunca, asi que ahi la caja desaparece: el
   catalogo se lee entero en texto y no quedan once rectangulos vacios. */
html:not(.js) .demo--svc { display: none; }
.demo--svc { width: 100%; }
/* el hueco vacio conserva el min-height de css/demos/svc.css (460px) a
   proposito: si el placeholder midiera menos, al montar la escena el
   documento crecería y todo lo que estuviera debajo se desplazaria, que es
   justo como se rompe un aterrizaje de ancla. */
.demo--svc:empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.svc-slate .demo--svc:empty {
  border-color: var(--line-on-dark);
  background: rgba(246, 245, 241, 0.04);
}

/* ---- 1.1 · los dos modelos, en dos columnas SIEMPRE visibles ---------------
   Nada de toggle: un panel con [hidden] se pierde entero sin JavaScript, y el
   catalogo no puede depender de que arranque un modulo. La spec de copy ya
   admitia las dos formas ("dos columnas o toggle"). */
.svc-models {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.svc-model {
  border: 1px solid var(--line);
  border-top: 3px solid var(--violet);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 1.5rem 1.6rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.svc-model__tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--violet);
}
.svc-model p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.svc-model__ticket {
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
  font-weight: 540;
  color: var(--ink) !important;
}
.svc-model .service__chips { margin-top: 0.2rem; }

/* ---- lista numerada de beneficio (los cinco canales) ----------------------- */
.svc-numlist__head {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.98rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  max-width: 42ch;
}
.svc-numlist {
  list-style: none;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  overflow: hidden;
  /* medida de lectura: a ancho de shell la descripcion de cada canal daba
     lineas de 150 caracteres. La caja se acota y el parrafo tambien. */
  max-width: 62rem;
}
.svc-numlist > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.05rem 1.4rem;
  transition: background var(--dur-micro) var(--ease);
}
.svc-numlist > li + li { border-top: 1px solid var(--line); }
.svc-numlist > li:hover { background: var(--lavender-light); }
.svc-numlist__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--violet);
  padding-top: 0.28rem;
}
.svc-numlist__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-weight: 570;
  color: var(--ink);
  margin-bottom: 0.28rem;
}
.svc-numlist__where {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.svc-numlist p:not(.svc-numlist__title) {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 74ch;
}

/* ---- add-ons, notas y disponibilidad --------------------------------------- */
.svc-addons,
.svc-note,
.svc-who {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  padding: 1.4rem 1.6rem;
  display: grid;
  gap: 0.7rem;
  max-width: 62rem;
}
.svc-addons__label,
.svc-note__label,
.svc-who__label,
.svc-split__label,
.svc-stage__label,
.svc-rule-block__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--violet);
}
.svc-note p:not(.svc-note__label) { color: var(--ink-soft); font-size: 0.98rem; }
.svc-avail {
  display: grid;
  gap: 0.4rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--line-strong);
  padding-left: 1.1rem;
}
.svc-avail__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- 1.2 · marca y desarrollo, dos columnas -------------------------------- */
.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.svc-split__col { display: grid; gap: 0.8rem; align-content: start; }
.svc-rule-block { display: grid; gap: 0.5rem; max-width: 62rem; }

/* ---- 1.3 · las tres etapas ------------------------------------------------- */
.svc-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.svc-stages { max-width: 72rem; }
.svc-stage {
  border: 1px solid var(--line);
  border-top: 3px solid var(--violet);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

/* ---- listas de beneficio a dos columnas en escritorio ---------------------- */
.svc-list--two { column-count: 2; column-gap: clamp(1.6rem, 3vw, 3rem); max-width: 68rem; }
.svc-list--two li { break-inside: avoid; margin-bottom: 0.55rem; }

/* la 2.x vive sobre papel, asi que el marcador vuelve al acento de su
   especialidad: teal en Systems, ambar en Strategy */
.svc-act--systems .service__list li::before { color: var(--teal); }
.svc-act--systems .service__rule { border-left-color: var(--teal); }
.svc-act--systems .svc-addons__label,
.svc-act--systems .svc-note__label,
.svc-act--systems .svc-who__label { color: var(--teal); }
.svc-act--strategy .service__list li::before { color: var(--amber-text); }
.svc-act--strategy .service__rule { border-left-color: var(--amber); }
.svc-act--strategy .svc-who__label { color: var(--amber-text); }

/* ---- modelo de entrega, sobre slate ---------------------------------------- */
.svc-own { margin-top: 0; margin-bottom: var(--rhythm-half); }
.svc-own__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.svc-own .ownership { margin-top: 0; max-width: none; }
.ownership__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-bright) !important;
}
.svc-own__media { display: grid; gap: 0.7rem; }

/* ============================================================================
   10 · svc-vs · "no confundir con la 1.1", sobre slate
   Dos reglas graduadas que se dibujan por stroke-dashoffset al entrar.
   Un solo pase, sin scheduler, sin JavaScript nuevo.
   ========================================================================== */
.svc-vs { margin-top: var(--rhythm-half); }
.svc-vs__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--amber-bright) !important;
}
.svc-vs__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--ls-heading);
  color: var(--paper) !important;
  margin-top: 0.5rem;
}
.svc-vs__copy { max-width: 64ch; margin-top: 0.8rem; line-height: 1.6; }
.svc-vs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}
.svc-vs__col { display: grid; gap: 0.55rem; }
.svc-vs__tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(246, 245, 241, 0.72) !important;
}
.svc-vs__rule { width: 100%; height: 34px; overflow: visible; }
.svc-vs__line,
.svc-vs__ticks {
  fill: none;
  stroke: var(--svc-vs-accent, var(--violet-bright));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.svc-vs__col--later { --svc-vs-accent: var(--amber-bright); }
.js .svc-vs__line,
.js .svc-vs__ticks { stroke-dashoffset: 100; }
.js .svc-vs.is-in .svc-vs__line { animation: svc-vs-draw 0.72s var(--ease-out) forwards; }
.js .svc-vs.is-in .svc-vs__ticks { animation: svc-vs-draw 0.72s var(--ease-out) 0.18s forwards; }
.js .svc-vs.is-in .svc-vs__col--later .svc-vs__line { animation-delay: 0.18s; }
.js .svc-vs.is-in .svc-vs__col--later .svc-vs__ticks { animation-delay: 0.36s; }
@keyframes svc-vs-draw { to { stroke-dashoffset: 0; } }
.svc-vs__unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-vs-accent, var(--violet-bright)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .js .svc-vs__line,
  .js .svc-vs__ticks { stroke-dashoffset: 0; animation: none; }
}

/* ============================================================================
   11 · GROW · start with one, grow into all of it (mist)
   ========================================================================== */
.grow {
  padding: var(--rhythm) 0 var(--rhythm-half);
  background: var(--mist);
}
.grow__figure {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}
.grow__diagram {
  width: min(100%, 46rem);
  height: auto;
  overflow: visible;
}
.grow__line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
}
/* la linea se dibuja al entrar: [data-reveal] recibe .is-in del sistema */
.grow__figure.is-in .grow__line {
  animation: grow-draw 1.5s var(--ease-out) 0.2s forwards;
}
@keyframes grow-draw {
  to { stroke-dashoffset: 0; }
}
.grow__node {
  opacity: 0;
  transform: translateY(8px);
  transform-box: fill-box;
  transform-origin: center;
}
.grow__figure.is-in .grow__node {
  animation: grow-node 0.6s var(--ease-scene) forwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.22s);
}
@keyframes grow-node {
  to { opacity: 1; transform: none; }
}
.grow__node--violet { --grow-accent: var(--violet); }
.grow__node--teal { --grow-accent: var(--teal); }
.grow__node--amber { --grow-accent: var(--amber); }
.grow__dot { fill: var(--grow-accent); }
.grow__ring { fill: var(--grow-accent); opacity: 0.16; }
.grow__label {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--ink);
  text-anchor: middle;
}
.grow__caption { text-align: center; }

/* sin JS la linea nunca recibe .is-in: nace dibujada */
html:not(.js) .grow__line { stroke-dashoffset: 0; }
html:not(.js) .grow__node { opacity: 1; transform: none; }

/* reduced motion: el diagrama queda compuesto, sin dibujo */
@media (prefers-reduced-motion: reduce) {
  .grow__line { stroke-dashoffset: 0; }
  .grow__node { opacity: 1; transform: none; }
}

/* ============================================================================
   12 · CIERRE · las dos puertas, sobre la misma mist que grow
   ========================================================================== */
.svc-close {
  padding: var(--rhythm-half) 0 var(--rhythm);
  background: var(--mist);
}
.svc-close .section-head { margin-bottom: var(--rhythm-half); }
.svc-close .doors__grid { max-width: 62rem; }
.svc-close .door-card { background: var(--paper-raised); }
.svc-close .door-card--violet { background: var(--violet-deep); }
.svc-takeaways {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 62rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
.svc-takeaways li {
  border-top: 2px solid var(--line-strong);
  padding-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.svc-takeaways b { color: var(--ink); font-weight: 570; }

/* ============================================================================
   13 · FAQ · papel, debajo del cierre
   ========================================================================== */
.faq { padding: var(--rhythm) 0; }

/* ============================================================================
   14 · RESPONSIVE
   Escalones, de arriba abajo: 1363+ (escritorio aprobado) · 1081-1362 (la
   banda que ya reventó una vez: TODOS los iPad apaisados menos el de 13
   pulgadas, y cualquier ventana estrecha) · 900-1080 · 768-899 · 431-767 ·
   <=430. Hasta r12 esta hoja no tenia una sola regla por encima de 1080.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   14.1 · PISO DE LEGIBILIDAD. Toda etiqueta mono baja de 12px por debajo de
   1081. La condicion tactil recupera los iPad apaisados de mas de 1080
   (mini 6 = 1133, Air 11 = 1180, Pro 11 = 1194, 13 pulgadas = 1366): un
   equipo con raton reporta hover: hover y nunca puede cumplirla.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .kicker,
  .chip,
  .scene-caption,
  .which-card__tag,
  .door-card__tag,
  .distinction__label,
  .service__doorline span,
  .strategy li span,
  .plan span,
  .svc-board__label,
  .svc-board__cell b,
  .svc-board__cell i,
  .svc-board__note,
  .svc-model__tag,
  .svc-numlist__num,
  .svc-numlist__where,
  .svc-addons__label,
  .svc-note__label,
  .svc-who__label,
  .svc-split__label,
  .svc-stage__label,
  .svc-rule-block__label,
  .svc-avail__label,
  .ownership__label,
  .svc-exceptions__close,
  .svc-vs__label,
  .svc-vs__tag,
  .svc-vs__unit,
  .footer__partners-label,
  .footer__legal { font-size: 0.75rem; }
}

/* ---------------------------------------------------------------------------
   14.2 · 1081 a 1362 · LA BANDA QUE YA REVENTÓ UNA VEZ (fallo C35 de r7).
   Tres medidas y las tres hacen falta: el gap de .service baja un paso, la
   copy se acota, y las rejas de tres columnas que no caben pasan a dos. Sin
   un solo scale() y sin tocar la tipografia, que es la regla con la que se
   arreglo C35. El remedio de min-width:0 va arriba, sin media query.
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) and (max-width: 1362px) {
  .service { gap: clamp(1.4rem, 3vw, 3rem); }
  .service__copy { max-width: 34rem; }
  .svc-rule__grid,
  .svc-own__grid { gap: clamp(1.6rem, 3vw, 3rem); }
  .svc-cut__inner { gap: clamp(1rem, 2.4vw, 2rem); }
  .svc-cut__num { font-size: clamp(3rem, 6vw, 5rem); }
  /* tres tarjetas de excepcion a 1194 dejan 340px cada una y el titulo de la
     tercera parte en tres lineas: pasan a dos columnas, la tercera ancha */
  .svc-exceptions__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-exceptions__list > li:last-child { grid-column: 1 / -1; }
  .svc-stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-stages > li:last-child { grid-column: 1 / -1; }
  .svc-list--two { column-count: 1; }
  .svc-board__cell { padding: 0.8rem 0.9rem; }
}

/* ---------------------------------------------------------------------------
   14.3 · iPad apaisado y ventanas medianas (900 a 1080). Vuelve la doble
   columna de .service, con el gap un paso mas corto: sin esto la escena se
   estiraba a los 972px del shell y el salto a 1081 era brutal.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1080px) {
  .service {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 3.4rem);
  }
  .service--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .service--flip .service__copy { order: 2; }
  .service--flip .service__media { order: 1; }
  .doors__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   14.4 · Tablet y iPad retrato (768 a 1080). El board pasa a dos columnas
   (con tres a 768 cada celda queda en ~230px y "Design & Development" parte
   en tres lineas), y las rejas de tres bajan a dos.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1080px) {
  .svc-hero { padding: clamp(7.5rem, 14vh, 9.5rem) 0 var(--rhythm-half); }
  .svc-board__top { grid-template-columns: 1fr; gap: 2rem; }
  .svc-board__figure { width: min(100%, 34rem); }
  .svc-board__set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-board__group--strategy { grid-column: 1 / -1; }
  .svc-board__group--strategy .svc-board__cells { max-width: 26rem; }
  .svc-exceptions__list,
  .svc-stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-exceptions__list > li:last-child,
  .svc-stages > li:last-child { grid-column: 1 / -1; }
  .svc-rule__grid,
  .svc-own__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .svc-rule__media,
  .svc-own__media { width: min(100%, 34rem); }
  .svc-list--two { column-count: 1; }
  .svc-takeaways { grid-template-columns: 1fr; gap: 1.1rem; }
  .footer__nav, .footer__social { gap: 0.1rem; }
  .footer__nav a, .footer__social a {
    min-height: 44px;
    min-width: 3rem;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   14.5 · Telefono grande e iPad retrato (431 a 899). Sigue apilado, pero la
   escena deja de ocupar todo el shell: a 899 eso daba una caja de 850px de
   ancho con tres tarjetitas dentro.
   --------------------------------------------------------------------------- */
@media (min-width: 431px) and (max-width: 899px) {
  .service__media { width: min(100%, 34rem); }
  .service__copy { max-width: 40rem; }
}

/* r13 P2-5: con tres tarjetas la fila necesita mas aire. Entre 768 y 1080 se
   parten en dos filas (2 + 1) en vez de estrujar tres columnas de 220px. */
@media (min-width: 768px) and (max-width: 1080px) {
  .which__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   14.6 · TELEFONO (<=767). Todo a una columna, targets tactiles de 44px.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .which__grid { grid-template-columns: 1fr; gap: 1rem; }

  /* la flecha absoluta se comia la ultima linea de copy en las tarjetas de
     dos lineas: a esta anchura baja al flujo, alineada a la derecha */
  .which-card { padding: 1.4rem 1.3rem 1.2rem; gap: 0.45rem; }
  .which-card__copy { max-width: none; }
  .which-card__arrow {
    position: static;
    justify-self: end;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
  }

  .svc-rule__grid,
  .svc-own__grid,
  .svc-models,
  .svc-split,
  .svc-vs__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .svc-exceptions__list,
  .svc-stages,
  .svc-takeaways { grid-template-columns: 1fr; gap: 1rem; }
  .svc-exceptions__list > li:last-child,
  .svc-stages > li:last-child { grid-column: auto; }
  .svc-list--two { column-count: 1; }

  /* el board a una columna: siete celdas seguidas con tres etiquetas no es
     una lista caida, es un indice, y por eso aqui si se lee bien */
  .svc-board__top { grid-template-columns: 1fr; gap: 1.4rem; }
  .svc-board__set { grid-template-columns: 1fr; gap: 1.8rem; }
  .svc-board__cell { padding: 0.85rem 0.95rem; }

  .svc-cut { padding: clamp(2.4rem, 8vw, 3.4rem) 0; }
  .svc-cut__inner { grid-template-columns: 1fr; gap: 0.6rem; }
  .svc-cut__copy { grid-column: 1; grid-row: 2; }
  .svc-cut__num { grid-column: 1; grid-row: 1; font-size: clamp(2.8rem, 16vw, 4.2rem); }

  .svc-numlist > li { grid-template-columns: 1fr; gap: 0.35rem; padding: 1rem 1.1rem; }
  .svc-model,
  .svc-stage { padding: 1.2rem 1.2rem; }
  .svc-addons, .svc-note, .svc-who { padding: 1.2rem 1.2rem; }

  /* la lista 3.1 ya se apila a <=720 en sections.css: aqui solo el aire
     lateral, que a 375 dejaba la descripcion en 263px */
  .strategy li { padding: 0.9rem 1.1rem; }
  .distinction { padding: 1.3rem 1.3rem; }
  .ownership { padding: 1.3rem 1.3rem; }

  /* footer: los enlaces median 24px de alto */
  .footer__nav, .footer__social { gap: 0.1rem; }
  .footer__nav a, .footer__social a {
    min-height: 44px;
    min-width: 3rem;
    display: flex;
    align-items: center;
  }
  .footer__partners { gap: 1rem; }
  .footer__partners ul { margin-left: 0; gap: 1.1rem 1.5rem; }
}

/* ---------------------------------------------------------------------------
   14.7 · iPhone (<=430). Aire mas corto y CTAs de ancho completo, que a 375
   quedaban a media pantalla con un hueco muerto al lado.
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .svc-hero { padding: 6.75rem 0 var(--rhythm-half); }
  .svc-hero__inner { gap: 1rem; }
  .svc-hero__actions { gap: 0.7rem; }
  .svc-hero__actions .btn,
  .door-strip .btn,
  .service__doorline .btn,
  .svc-cut__actions .btn,
  .door-card .btn {
    width: 100%;
    justify-content: center;
  }
  .service__doorline { gap: 0.8rem; }
  .service__doorline span { max-width: none; }
  .door-card .btn { align-self: stretch; }
  .strategy li { padding: 0.85rem 1rem; }
  .distinction { padding: 1.2rem 1.1rem; }
  .ownership { padding: 1.2rem 1.1rem; }
  .door-strip { gap: 1.2rem; }
  .svc-slate { margin-inline: 0; border-radius: 0; }
}

/* el diagrama de 5 nodos es un SVG que escala con el shell: a 375 sus
   etiquetas de 24px se renderizaban a 11.9px. Se compensa en el propio SVG. */
@media (max-width: 420px) {
  .grow__label { font-size: 26px; }
}

/* ---------------------------------------------------------------------------
   14.8 · TARGETS TACTILES. 44px de lado en todo lo tocable. Misma condicion
   de la casa: (hover:none) and (pointer:coarse) and (max-width:1400px) suma
   los iPad apaisados de mas de 1080; un equipo con raton nunca la cumple.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .svc-board__cell { min-height: 56px; align-content: center; }
  .svc-board__group > .h3 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .faq__item summary { min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------------------------
   14.9 · TACTIL SIN PUNTERO FINO. Al tocar una tarjeta el :hover se queda
   pegado (levantada y con fondo de acento hasta que se toca otra cosa). Las
   del sistema las neutraliza css/responsive.css; las de esta pagina, aqui.
   --------------------------------------------------------------------------- */
@media (hover: none) {
  .which-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--paper-raised);
  }
  .which-card:hover .which-card__arrow { transform: none; }
  .svc-board__cell:hover {
    border-left-color: transparent;
    transform: none;
    box-shadow: none;
  }
  .svc-board__group > .h3 a:hover { color: inherit; }
  .svc-numlist > li:hover { background: transparent; }
  .strategy li:hover { background: transparent; }
  .plan:hover { transform: none; box-shadow: none; }
  .door-card:hover { transform: none; box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   14.10 · Correcciones de sistema acotadas a ESTA pagina.
   .service__plans llega de sections.css con repeat(3, 1fr), que es
   exactamente el patron que reventó en r6: 1fr no baja del min-content y la
   tercera tarjeta se sale del viewport. Aqui va con minmax(0, 1fr).
   --------------------------------------------------------------------------- */
.service__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .service__plans { grid-template-columns: 1fr; }
}

/* ============================================================================
   15 · CORRECCIONES DE CONTRASTE MEDIDAS (r13 QA)
   Los siete fallos que salieron de medir el ratio real de cada nodo de texto
   contra su fondo pintado. Todas acotadas a esta pagina.
   ========================================================================== */

/* 15.1 · Sobre --mist, --ink-faint mide 4,23 y reprueba AA. El texto de
   metadatos sobre mist va con --ink-soft, que mide 6,29 (r3 U-08). */
.svc-board .scene-caption,
.grow .scene-caption,
.svc-close .scene-caption { color: var(--ink-soft); }

/* 15.2 · door-strip. El extremo claro del degradado dejaba la copy blanca al
   72 % en 4,39:1. Se oscurece el degradado y sube la opacidad de la copy:
   blanco 6,73 y copy 5,17 sobre el punto mas claro de la banda. */
.door-strip {
  background: linear-gradient(120deg, var(--teal-deep), color-mix(in srgb, var(--teal) 55%, var(--teal-deep)));
}
.door-strip__copy { color: rgba(255, 255, 255, 0.8); }

/* 15.3 · svc-vs. El trazo violeta pasa como grafico (3,80 sobre slate, umbral
   3:1) pero su etiqueta de 12px necesita 4,5. El texto va un paso mas claro
   dentro de la misma familia: 5,18. El ambar ya pasa con 6,32. */
.svc-vs__unit { color: var(--svc-vs-text, color-mix(in srgb, var(--violet-bright) 78%, var(--paper))) !important; }
.svc-vs__col--later { --svc-vs-text: var(--amber-bright); }

/* 15.4 · La etiqueta de la puerta violeta media 3,12 sobre --violet-deep con
   15,7px de cuerpo. Un paso mas claro la deja en 5,78.
   NOTA: el mismo fallo existe en el Home (misma .door-card--violet en
   sections.css). NO se corrige alli: sections.css es hoja compartida y el
   Home esta aprobado. Queda reportado en el informe. */
.svc-close .door-card--violet .door-card__tag {
  color: color-mix(in srgb, var(--violet-bright) 55%, var(--paper));
}

/* 15.5 · La linea legal del footer medía 3,60 con 10,2px de cuerpo. Se sube
   la opacidad sin tocar sections.css, que es del Home. Mismo apunte: el Home
   arrastra el fallo y se reporta, no se corrige por mi cuenta. */
.footer__legal { color: rgba(246, 245, 241, 0.66); }

/* ============================================================================
   16 · PISO TACTIL DE 12px DENTRO DE LAS ESCENAS (r13 QA)
   Aqui vivia una lista blanca de 24 selectores, y era la causa de dos fallos:
   estaba encerrada en la condicion tactil, asi que en escritorio de mas de
   1080px no se aplicaba y la hoja escribia a 9,28px; y cualquier clase nueva
   nacia por debajo del piso hasta que alguien la anadia a mano. El piso base
   se mudo al minimo de los clamps de svc.css, donde se define la escala. Aqui
   solo queda el escalon tactil, y sube por TOKEN, no por lista.
   ========================================================================== */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .demo--svc .svc-sheet {
    --svc-mono: 0.75rem;
    --svc-micro: 0.75rem;
    --svc-small: 0.78rem;
  }
}

/* ============================================================================
   17 · TARGETS TACTILES QUE FALTABAN A MAS DE 1080
   css/responsive.css da 44px de ALTO a los enlaces del nav y del footer en la
   condicion tactil, pero no de ancho: "Home" medía 40x44 en un iPad apaisado.
   Los enlaces en linea dentro de un parrafo quedan fuera a proposito: WCAG
   2.5.8 los exceptua explicitamente.
   ========================================================================== */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .site-nav a,
  .footer__nav a,
  .footer__social a { min-width: 3rem; justify-content: center; }

  /* r13: la marca de la 2.1 en el board medía 10,88px en tactil (medido en
     WebKit a 834 y a 390). Es el mismo dato que las tres excepciones: tiene
     que estar Y tiene que leerse. */
  .svc-board__us { font-size: 0.75rem; }
}