/* ============================================================================
   SPICA STUDIO · CATALOGO DE LAS SIETE SOLUCIONES (r33)
   ----------------------------------------------------------------------------
   r32 convirtio la reja de r28 en un carril que se desplazaba a mano. r33
   cambia el motor, no el aspecto: Cesar pidio que las tarjetas "vayan pasando
   o algo asi, osea como infinito", asi que el carril se mueve solo en bucle
   continuo y esta hoja deja de ser un contenedor desplazable.

   Lo que sigue vivo de r28 se queda escrito donde toca, porque explica
   decisiones que NO se han vuelto a discutir: el punto de 6 px como
   identificador de grupo, la tarjeta sin filete de color, los tres acentos de
   texto medidos en r4 C6, el chip fuera del h3 y el enlace unico estirado.

   Cuatro decisiones de esta ronda:

   1 · EL CARRIL RECORTA, EL TRACK SE MUEVE. .catalog__rail es una ventana con
       overflow: hidden y .catalog__track un flex de width: max-content que
       viaja con transform. No hay scroll-snap, ni barra nativa, ni
       overscroll-behavior: ya no queda nada que desplazar, de modo que las
       reglas que gobernaban esas tres cosas se han retirado. El movimiento va
       en transform y no en scrollLeft a proposito: scrollLeft redondea a
       enteros en algunos motores y a 0,6 px por cuadro tiembla, y Cesar mira
       el sitio en Safari.

   2 · TARJETAS MAS CHICAS (r32, intacto). 248 px en escritorio contra el tope
       de 300 px de r28, o sea un 15% menos de ancho. La cifra y el h3 bajan en
       la misma proporcion para que la tarjeta no quede con la cabeza mas grande
       que el cuerpo; el copy no cambia ni una palabra, solo su tamano. En
       telefono la tarjeta pasa a min(76vw, 288px).

   3 · EL CARRIL VA A SANGRE Y SE FUNDE EN LOS DOS BORDES. Desde r33 el carril
       es hijo directo de la seccion, fuera del shell, y mide el viewport
       entero: en un bucle sin extremos no hay una "primera" tarjeta que
       alinear con el titular. Los bordes llevan mascara para que las tarjetas
       se desvanezcan al entrar y al salir en vez de cortarse en seco. El aire
       de arriba y de abajo sigue siendo padding por dentro con margen negativo
       por fuera, porque de la tarjeta se salen tres cosas que el overflow
       recortaria: el hover, la sombra y el anillo del foco.

   4 · LOS DOS BOTONES VIVEN EN LA CABECERA. Redondos, a la derecha y en la
       misma fila de rejilla que el h2, para que queden centrados con el
       titular sin depender de cuanto mida. Por debajo de 767 px el titular ya
       no deja sitio a su lado y el par baja a su propia linea, todavia a la
       derecha. La flecha es SVG con currentColor, nunca un emoji (regla de la
       casa). Ya no se apagan nunca: en un bucle infinito no hay extremo.

   Desde r33 esta hoja la piden DOCE paginas: las dos portadas, las ocho de
   industria y las dos de landing-ca. El marcado sale de
   src/components/CatalogoSoluciones.astro, uno solo para las doce, y el propio
   componente carga su modulo.

   Nada de esto vive en sections.css a proposito (regla 15): lo nuevo va en
   archivo nuevo y el CSS aprobado no se toca.
   ========================================================================== */

.catalog {
  /* Las dos medidas del carril viven juntas y arriba porque el paso de los
     botones es la suma de las dos, y js/catalog-rail.js la lee del DOM en
     lugar de repetirla. Cambiar una aqui cambia el carril entero. */
  /* r32, medido en Chromium: con 256 px el paso sale de 272 px y a 1440 (el
     ancho de referencia de la casa) las tarjetas caian justo cortadas contra el
     borde. Con 248 el paso baja a 264, que es un numero redondo y reparte mejor
     el ancho. Sigue dentro de la horquilla de 240 a 268 del contrato y es MAS
     chica que los 300 de r28, que era lo que Cesar pedia. */
  --cat-card-w: 248px;
  --cat-gap: 1rem;
  /* Aire que el carril se reserva por dentro para no recortar el hover, la
     sombra y el foco. Arriba bastan 14 px: la tarjeta sube 4 px al hover y el
     outline del foco pide otros 5. Abajo hace falta casi el triple: la sombra
     cae 18 px y se difumina 50, o sea que su cola llega a unos 39 px por
     debajo de la tarjeta ya levantada, y 2.6rem son 41,6 px. */
  --cat-aire-sup: 0.9rem;
  --cat-aire-inf: 2.6rem;
  /* Ancho del desvanecimiento de cada borde del carril. Vive aqui y no dentro
     de la mascara porque la misma medida aparece cuatro veces (dos bordes por
     dos prefijos) y porque js/catalog-rail.js replica esta horquilla para
     decidir a que distancia del corte deja una tarjeta que acaba de recibir el
     foco: mas cerca que esto y su anillo se leeria a medio desvanecer. */
  --cat-fade: clamp(24px, 4vw, 72px);
  padding: calc(var(--rhythm) * 0.7) 0;
}

/* ---- la cabecera, con los dos controles a la derecha --------------------- */
/* El .section-head compartido es una rejilla de una columna con tope de 52rem.
   Aqui se le quita el tope para que la columna llegue al ancho del shell: solo
   asi los botones se apoyan en el borde derecho de la seccion y no a 288 px
   de el. El texto no se mueve, porque .section-head--center lo centra en la
   columna y el lead ya trae su propio max-width de 44ch. */
.catalog__head { max-width: none; }
.catalog .section-head { margin-bottom: calc(var(--rhythm-half) * 0.75); }

/* El titular y el lead se colocan a mano en sus filas. Sin esto no hay nada
   que compartir celda con los botones: el reparto automatico de la rejilla
   coloca primero lo que tiene posicion fija (el par de botones), y luego SALTA
   la celda ocupada, o sea que el h2 caeria a la fila 2 y los botones quedarian
   en una linea propia por encima del titular. Medido: 69 px de desvio. */
.catalog__head .h2 { grid-area: 1 / 1; }
.catalog__head .lead { grid-area: 2 / 1; }

/* Misma celda que el h2 (fila 1) y alineacion al final: los botones quedan
   centrados con el titular sea de una linea o de dos, sin numeros magicos. Se
   superponen a la celda del h2, no la desplazan, asi que el titular sigue
   centrado en la seccion; el z-index deja el par por encima si el titular
   creciera hasta rozarlo. */
.catalog__nav {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: center;
  z-index: 1;
  display: inline-flex;
  gap: 0.5rem;
}

.catalog__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px, el objetivo tactil minimo comodo: el mismo boton sirve para el
     dedo y para el raton, y no hay una version chica que mantener. */
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--ink-soft);
  transition: color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease),
    background var(--dur-state) var(--ease), opacity var(--dur-state) var(--ease);
}
.catalog__ctrl svg { width: 1.15rem; height: 1.15rem; }
.catalog__ctrl:hover:not(:disabled) {
  color: var(--violet);
  border-color: var(--violet);
  background: var(--lavender-light);
}
/* r33 · se conserva por si algun dia vuelve un carril con extremos, pero hoy
   nadie activa ese estado: en un bucle infinito los dos botones siempre valen. */
.catalog__ctrl:disabled { opacity: 0.32; cursor: default; }
/* El :focus-visible global de base.css impone border-radius: 4px, que en un
   boton redondo dibuja un cuadrado alrededor. Se le devuelve su forma. */
.catalog__ctrl:focus-visible { border-radius: 50%; }

/* ---- el carril: una ventana, y dentro un track que viaja --------------------
   overflow: hidden recorta lo que sale por los lados, que es todo el bucle
   menos lo que cabe en pantalla. touch-action: pan-y cede el gesto vertical a
   la pagina y se queda con el horizontal, que es el del arrastre; sin eso, en
   iOS el dedo mueve las dos cosas a la vez. user-select: none evita que un
   arrastre largo acabe seleccionando el texto de tres tarjetas. */
.catalog__rail {
  overflow: hidden;
  width: 100%;
  /* r33, supervision: aunque el desplazamiento nativo esta apagado, la caja
     sigue siendo un scroller por su overflow, y esta regla le corta al gesto
     lateral de Safari la salida hacia la pagina (el "volver atras"). */
  overscroll-behavior-x: contain;
  padding-block: var(--cat-aire-sup) var(--cat-aire-inf);
  margin-block: calc(var(--cat-aire-sup) * -1) calc(var(--cat-aire-inf) * -1);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Las tarjetas se funden al entrar y al salir en vez de cortarse contra el
     borde de la pantalla. Es lo unico que dice "esto sigue" sin una barra de
     desplazamiento ni una flecha de adorno. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cat-fade), #000 calc(100% - var(--cat-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--cat-fade), #000 calc(100% - var(--cat-fade)), transparent 100%);
}
.catalog__rail.is-dragging { cursor: grabbing; }
/* Mientras el dedo manda, la tarjeta no debe ir por detras con su propia
   transicion de hover: el contenido tiene que pegarse al puntero. */
.catalog__rail.is-dragging .cat-card { transition: none; }
/* El carril es una parada de teclado (tabindex="0" en el marcado). Su outline
   se dibuja HACIA DENTRO porque el elemento llega hasta el borde de la
   pantalla y por fuera no habria donde pintarlo. */
.catalog__rail:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* width: max-content es lo que permite el bucle: el track mide lo que suman
   sus juegos de tarjetas (el original mas los clones que crea el modulo) y no
   lo que mide su ventana, asi que siempre hay contenido esperando fuera de
   cuadro. El transform lo escribe js/catalog-rail.js en cada cuadro. */
.catalog__track {
  display: flex;
  gap: var(--cat-gap);
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* SIN JAVASCRIPT no hay clones ni movimiento, asi que el carril vuelve a ser
   lo que era: una fila que se arrastra, con su sangrado y sin mascara (un
   desvanecimiento sobre un contenido que nadie va a mover solo esconde la
   primera y la ultima tarjeta). Las siete siguen alcanzables. */
html:not(.js) .catalog__rail {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
html:not(.js) .catalog__track { padding-inline: var(--gutter); }

/* ---- acentos por grupo --------------------------------------------------- */
/* --cat-accent es el color de TEXTO medido en r4 C6, y desde r28 es lo unico
   que queda de color por grupo: el punto del rotulo, la cifra y el enlace.
   Violeta base 4.75, teal 70/30 teal-deep 4.77 y amber-text 90/10 ink 5.0,
   todos sobre --paper-raised, que es mas claro que la mist donde se midieron,
   de modo que el contraste solo puede subir. */
.cat-card--growth { --cat-accent: var(--violet); }
.cat-card--systems { --cat-accent: color-mix(in srgb, var(--teal) 70%, var(--teal-deep)); }
.cat-card--strategy { --cat-accent: color-mix(in srgb, var(--amber-text) 90%, var(--ink)); }

/* ---- la tarjeta ---------------------------------------------------------- */
/* flex: 0 0 es el corazon del carril. El 0 de shrink impide que las siete se
   repartan el ancho disponible, que es justo lo que haria desaparecer el
   bucle. position: relative se queda donde estaba: es el bloque contenedor del
   ::after que estira el enlace, y por eso el transform del track no le roba el
   papel, aunque si crea capa propia. */
.cat-card {
  flex: 0 0 var(--cat-card-w);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease);
}
.cat-card > * { min-width: 0; }
/* r33, correccion · EL LEVANTON DEL HOVER ESTABA MUERTO. Las tarjetas
   originales llevan [data-reveal] y base.css escribe `transform: none` en
   `.js [data-reveal].is-in`, que con (0,3,0) pisaba a `.cat-card:hover`
   (0,2,0): la sombra aparecia y la tarjeta no se movia. Se notaba poco hasta
   que r33 metio clones, que no llevan data-reveal y si se levantaban, de modo
   que en la misma fila unas tarjetas subian y otras no. El selector empata en
   especificidad y gana por orden (esta hoja carga despues de base.css). Los
   4 px ya estaban presupuestados en --cat-aire-sup. */
.catalog__track .cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
/* Ni el enlace ni la foto arrancan el arrastre nativo de imagenes y enlaces,
   que en mitad de un gesto deja el fantasma de la tarjeta pegado al puntero. */
.cat-card a,
.cat-card img { -webkit-user-drag: none; }

/* ---- la foto ------------------------------------------------------------- */
/* El recorte lo hace la imagen (720 x 450 ya en 16:10), el aspect-ratio esta
   aqui para que el carril no salte mientras la foto carga. El acercamiento del
   hover es el mismo gesto lento de las escenas: 0.9s con --ease-out. */
.cat-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mist);
}
.cat-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }

/* ---- el cuerpo ----------------------------------------------------------- */
.cat-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.95rem 1rem;
}
.cat-card__body > * { min-width: 0; }

/* ---- el identificador de grupo ------------------------------------------- */
/* r28, y sigue vigente: el rotulo va desnudo de rayitas (r3: "se ven
   horribles") y lleva delante el punto de 6 px con el que el selector de
   idioma marca el idioma vigente (chrome.css .langsel__opt--current::before).
   Discreto y ya conocido por el ojo del visitante. El padding izquierdo abre
   el carril donde vive el punto, que va posicionado y no empuja al texto. */
.cat-card__group {
  position: relative;
  padding-left: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--violet));
}
.cat-card__group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--cat-accent, var(--violet));
}

/* ---- la cifra, que es lo primero que se lee ------------------------------ */
/* El techo baja de 2.5rem a 2.2rem: en una tarjeta de 256 px quedan 224 px de
   texto util, y "Un solo" a 40 px se partia en dos lineas y empujaba al
   titular hacia abajo. El piso baja lo mismo para que la escala siga siendo
   una sola curva. */
.cat-card__result {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.1rem;
}
.cat-card__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cat-accent, var(--violet));
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.cat-card__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ---- el nombre y su chip ------------------------------------------------- */
/* El chip "US only" va FUERA del h3 a proposito: en espanol dice
   "Solo EE. UU." y dentro de un titular eso son dos puntos de cierre, que es
   justo lo que prohibe la regla 3 y lo que caza qa/r18-reglas.mjs.
   Visualmente queda igual. */
.cat-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.cat-card__head .h3 {
  font-size: 0.98rem;
  line-height: 1.15;
}
/* El chip vive en el grupo Systems, cuyo dueno es el teal: sin esto se queda
   con el violeta por defecto de .chip--us y aparece un badge morado dentro de
   una tarjeta verde. Los mismos tres valores que ya usaba .pin-slide--sys
   .chip--us en el pin de las siete (sections.css:1431), donde el par
   teal-deep sobre teal-light quedo medido en 5.0. */
.cat-card--systems .chip--us {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal-deep);
}
/* r32, correccion: al bajar la tarjeta de 300 a 248 px el chip ya no cabia al
   lado del titulo y caia a una linea propia (medido: 26 px de separacion entre
   su borde superior y el del h3, en espanol a 1440 y a 1024, y en ingles a
   1024). Se aprieta en la misma proporcion en que se apreto la tarjeta. */
.cat-card .chip { font-size: 0.56rem; padding: 0.18rem 0.44rem; letter-spacing: 0.05em; }

/* ---- la lista, una linea corrida en letra chica -------------------------- */
/* El separador lo pinta el CSS y no el marcado: asi el texto que copia un
   lector de pantalla sigue siendo una lista limpia. El punto medio va DETRAS
   de cada item menos el ultimo, para que al partir la linea nunca quede un
   separador huerfano al principio de la fila. */
.cat-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.cat-card__list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.cat-card__list li:not(:last-child)::after {
  content: "\00b7";
  color: var(--ink-faint);
}

.cat-card__note {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---- el enlace, que es toda la tarjeta ----------------------------------- */
.cat-card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 520;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--violet));
  /* r32, correccion · LA FLECHA SE QUEDABA SOLA EN UNA TERCERA LINEA. Con
     display: inline-flex el rotulo y la flecha son dos cajas hermanas: cuando
     el texto se parte en dos lineas (pasa en espanol con "Como automatizamos el
     seguimiento", que a 248 px ya no cabe), el texto ocupa el ancho entero y la
     flecha baja a una linea propia, separada del final de la frase. En flujo de
     texto normal eso no puede ocurrir, porque la flecha es una palabra mas:
     viaja pegada a la ultima. El espacio antes de la flecha lo da el margen y
     no un gap, que solo existe en flex. */
  display: block;
}
.cat-card__more em {
  font-style: normal;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.45rem;
  width: 1em;
  height: 1em;
  transition: transform var(--dur-state) var(--ease);
}
.cat-card__more em svg { width: 100%; height: 100%; }
/* un solo <a> por tarjeta: su ::after la cubre entera, asi no hay enlaces
   anidados ni onclick y el teclado sigue teniendo una sola parada. El z-index
   lo deja por encima de la foto, que tiene su propia capa por el overflow.
   Sigue funcionando dentro del bucle porque el bloque contenedor del ::after es
   la tarjeta (position: relative): el transform del track queda por encima de
   ella en el arbol y no puede reclamar ese papel. */
.cat-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cat-card:hover .cat-card__more em { transform: translateX(4px); }
.cat-card:focus-within {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.cat-card__more:focus-visible { outline: none; }

/* ============================================================================
   RESPONSIVE · en orden descendente, como el resto del sitio
   Solo cambian las dos medidas del carril y, en el escalon del telefono, la
   colocacion de los botones. La velocidad del bucle cambia en el mismo corte
   de 767 px, pero esa la lleva js/catalog-rail.js.
   ========================================================================== */

/* --- iPad apaisado y ventanas medianas (<=1080) --------------------------- */
@media (max-width: 1080px) {
  .catalog {
    /* r32, correccion: antes bajaba a 244 px y con eso los rotulos de dos
       palabras largas se partian en una linea mas, que en una fila unica se
       paga en TODAS las tarjetas (heredan el alto de la mas alta) y deja un
       hueco medido de hasta 84 px entre la lista y el enlace de las cortas.
       Manteniendo 248 la dispersion baja a 52 px y el carril sigue entrando. */
    --cat-card-w: 248px;
    --cat-gap: 0.9rem;
  }
}

/* --- tablet en vertical y telefono (<=767) -------------------------------- */
@media (max-width: 767px) {
  .catalog {
    /* El tope de 288 px manda en cualquier telefono de 380 px para arriba; el
       76vw solo entra en pantallas muy estrechas, donde una tarjeta fija se
       comeria el asomo de la siguiente. */
    --cat-card-w: min(76vw, 288px);
    --cat-gap: 0.75rem;
  }
  /* A este ancho el titular ocupa casi toda la linea y el par de botones
     encima de el se leeria como un choque. Baja a su propia fila, a la
     derecha, que es donde el ojo ya los busca. */
  .catalog__nav {
    /* fila 3, debajo del lead: se le suelta la posicion fija y el reparto
       automatico lo manda a la primera fila libre, que ya es la suya. */
    grid-area: auto;
    justify-self: end;
  }
}

/* --- tactil ---------------------------------------------------------------- */
/* la afordancia del enlace no puede depender del hover */
@media (hover: none) {
  .cat-card__more em { opacity: 1; }
}