/* ==========================================================================
   Ajustes del tema sobre la plantilla Adina.
   Solo lo que hace falta corregir; main.css no se toca nunca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra superior y pie
   -------------------------------------------------------------------------- */
.td-header-top-menu ul li a{text-transform:none;}

/* El menú del panel móvil también viene en `capitalize`. */
.td-main-menu-mobile ul li a{text-transform:none;}
.td-footer-widget-content ul li a,
.td-footer-widget-content-2 ul li a{text-transform:none;}

/* El tamaño del menú del pie es el de la plantilla. Se bajó cuando las
   divisiones eran frases largas en español; ahora son de una palabra y a 32px
   la más ancha ocupa 143px en una columna de 330. */

/* ==========================================================================
   Mega menú
   Sustituye al menú horizontal de la plantilla: en escritorio, después del
   logotipo solo queda la hamburguesa, y al pulsarla se despliega un panel con
   las cuatro divisiones y sus aplicaciones a la vista de una vez.

   Vive solo de 992px arriba. Por debajo manda el panel lateral de la
   plantilla, que es otro botón y otro panel: no se pisan.
   ========================================================================== */

.cy-mega-lanzador{text-align:right;}

/* --- El botón ------------------------------------------------------------- */
.cy-mega-btn{
  display:inline-block;
  padding:8px 0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--td-theme-primary);
}
.cy-mega-btn span{
  display:block;
  width:34px;
  height:2px;
  margin:6px 0;
  background-color:currentColor;
  transition:transform .28s ease, opacity .2s ease, width .28s ease;
}
.cy-mega-btn span:nth-child(2){width:26px;}
.cy-mega-btn:hover span:nth-child(2){width:34px;}

/* Abierto, las tres barras se cruzan: el mismo botón cierra. */
.cy-mega-btn[aria-expanded="true"] span{width:34px;}
.cy-mega-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.cy-mega-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.cy-mega-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* --- El panel ------------------------------------------------------------- */
/* `fixed`, no `absolute`: la plantilla fija la fila de la cabecera al hacer
   scroll, y el panel tiene que acompañarla. El `top` lo pone el JS a partir del
   borde inferior de esa fila. */
.cy-mega{
  position:fixed;
  left:0;
  right:0;
  z-index:99;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--td-common-white,#fff);
  border-bottom:1px solid var(--td-common-line);
  box-shadow:0 24px 48px -24px rgba(11,11,12,.18);
}
.cy-mega[hidden]{display:none;}

.cy-mega__panel{padding:28px 0 34px;}

/* Ritmo vertical apretado a propósito: el panel tiene que caber sin scroll en
   un portátil de 720px de alto, y con siete divisiones el margen es poco.

   Columnas que se empaquetan, no una retícula.

   Con `grid`, todas las celdas de una fila miden lo que la más alta: como
   Intelligence tiene dos productos y Process & Operations tres, debajo de
   Intelligence quedaba un hueco en blanco antes de la siguiente división. Con
   `columns` cada división cae justo debajo de la anterior en su columna, y el
   navegador reparte la altura.

   De paso, `column-rule` da el filete separador a toda la altura, que con
   `grid` había que fingir con un `border-left` por celda y salía desigual. */
.cy-mega__grid{
  columns:3;
  column-gap:80px;
  column-rule:1px solid var(--td-common-line);
  margin:0;
  padding:0;
  list-style:none;
}
.cy-mega__col{
  /* Una división no se parte entre dos columnas: el título tiene que quedarse
     con sus productos. */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 30px;
}

/* Título de división. Etiqueta, no enlace: las divisiones no son páginas.
   Sin `font-family`: hereda la de la plantilla. Outfit es solo del logotipo. */
.cy-mega__titulo{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--td-grey-2,#6E7278);
  margin:0 0 14px;
}

.cy-mega__lista{list-style:none;margin:0;padding:0;}
.cy-mega__lista li + li{margin-top:0;}
.cy-mega__lista a{
  display:block;
  padding:7px 0;
  text-decoration:none;
  color:var(--td-theme-primary);
}
.cy-mega__nombre{
  display:block;
  font-size:17px;
  font-weight:400;
  line-height:1.25;
}
.cy-mega__desc{
  display:block;
  margin-top:3px;
  font-size:13.5px;
  font-weight:300;
  line-height:1.45;
  color:var(--td-grey-2,#6E7278);
  max-width:34ch;
}
/* Al pasar por encima cambia el nombre, no la descripción: si se mueve todo el
   bloque de color, el enlace deja de leerse como una jerarquía. */
.cy-mega__lista a:hover .cy-mega__nombre,
.cy-mega__lista a:focus-visible .cy-mega__nombre{color:var(--td-grey-2,#6E7278);}

/* Enlaces sin división —Contacto— al pie del panel, sobre su propio filete. */
.cy-mega__sueltos{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0 40px;
  margin:44px 0 0;
  padding:26px 0 0;
  border-top:1px solid var(--td-common-line);
}
.cy-mega__sueltos a{
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--td-theme-primary);
  text-decoration:none;
}
.cy-mega__sueltos a:hover{color:var(--td-grey-2,#6E7278);}

/* La cabecera se queda por encima del velo: si se oscurece, parece que el
   botón de cerrar está desactivado. */
.cy-mega-abierto .td-header-area{position:relative;z-index:100;}

/* --- El velo -------------------------------------------------------------- */
.cy-mega__velo{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;              /* el JS lo baja al borde inferior de la cabecera */
  z-index:98;
  background:rgba(11,11,12,.28);
}
.cy-mega__velo[hidden]{display:none;}

/* --- Fuera del escritorio ------------------------------------------------- */
@media (max-width:991px){
  .cy-mega,
  .cy-mega__velo,
  .cy-mega-lanzador{display:none !important;}
}

@media (max-width:1399px){
  .cy-mega__grid{columns:2;column-gap:56px;}
  .cy-mega__nombre{font-size:16px;}
}

@media (prefers-reduced-motion:reduce){
  .cy-mega-btn span{transition:none;}
}

/* ==========================================================================
   Pie
   Cuatro columnas: los datos legales y tres listas de enlaces. La retícula de
   Adina era un bloque centrado con logotipo y botón; esto es propio, pero
   dentro de su contenedor y sobre su fondo.
   ========================================================================== */

.cy-pie{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:0 40px;
  padding:110px 0 100px;
}

/* --- Columna legal -------------------------------------------------------- */
.cy-pie__copy{
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  margin:0 0 26px;
  max-width:26ch;
  color:var(--td-theme-primary);
}
.cy-pie__cookies{
  margin:0 0 30px;
  padding:22px 0 0;
  border-top:1px solid var(--td-common-line);
  max-width:26ch;
}
.cy-pie__cookies a{
  font-size:15px;
  color:var(--td-theme-primary);
}
.cy-pie__cookies a:hover{color:var(--td-grey-2,#6E7278);}

/* Redes. Botón de contorno, como el resto de la marca: sin relleno de color. */
.cy-pie__redes{
  list-style:none;
  display:flex;
  gap:10px;
  margin:0;
  padding:22px 0 0;
  border-top:1px solid var(--td-common-line);
  max-width:26ch;
}
.cy-pie__redes a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--td-common-line);
  border-radius:50%;
  color:var(--td-theme-primary);
  transition:border-color .2s ease;
}
.cy-pie__redes a:hover{border-color:var(--td-theme-primary);}
.cy-pie__redes svg{width:14px;height:14px;fill:currentColor;}

/* --- Columnas de enlaces -------------------------------------------------- */
/* El mismo tratamiento que los títulos de división del mega menú: es la misma
   clase de etiqueta y conviene que se lean igual en los dos sitios. */
.cy-pie__t{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--td-grey-2,#6E7278);
  margin:0 0 20px;
}
.cy-pie__lista{list-style:none;margin:0;padding:0;}
.cy-pie__lista a{
  display:block;
  padding:6px 0;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  color:var(--td-theme-primary);
}
.cy-pie__lista a:hover{color:var(--td-grey-2,#6E7278);}

@media (max-width:1399px){
  .cy-pie{grid-template-columns:repeat(3,1fr);gap:56px 40px;padding:80px 0 70px;}
}
@media (max-width:991px){
  .cy-pie{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:575px){
  .cy-pie{grid-template-columns:1fr;gap:44px 0;padding:64px 0 56px;}
}

/* ==========================================================================
   Banner de la portada
   Banda de una sola tinta con una frase. Monocroma, como manda el manual: el
   negro de la marca y el texto en blanco. Si el campo está vacío, la banda no
   se pinta.
   ========================================================================== */
.cy-banner{
  background:#0B0B0C;
  padding:64px 0;
}
.cy-banner__t{
  margin:0;
  max-width:24ch;
  color:#FFFFFF;
  font-size:clamp(28px,3.4vw,52px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.025em;
}
@media (max-width:767px){
  .cy-banner{padding:48px 0;}
  .cy-banner__t{max-width:none;}
}

/* ==========================================================================
   Cabecera · el contenedor ancho por debajo de 1400px

   `container-1750` es `.container` de Bootstrap más una regla que le sube el
   ancho máximo a 1750px… **solo a partir de 1400px**. Por debajo manda el
   `.container` de siempre, con sus anchos escalonados —540, 720, 960, 1140—, así
   que en tablet la cabecera se quedaba encajonada en 720px sobre una pantalla de
   900: setenta píxeles muertos a cada lado, con las líneas y el logotipo metidos
   hacia dentro.

   Se le quita el tope por debajo de 1400px y queda fluida, que es justo lo que ya
   hace entre 1400 y 1750. Afecta a los tres sitios que usan este contenedor —las
   dos filas de la cabecera y el panel del mega menú—, y en los tres es lo que se
   quiere: son bandas a todo lo ancho.
   ========================================================================== */
@media (max-width:1399.98px){
  .container-1750{max-width:none;}
}

/* ==========================================================================
   Cabecera · el logotipo centrado en tablet

   Adina alinea el logotipo a la izquierda de 0 a 991px:

       .td-header-logo{ text-align:left !important; margin-right:0; }

   En un teléfono está bien —logotipo a la izquierda, hamburguesa a la derecha—,
   pero en tablet no: ahí ya hay sitio de sobra y el logotipo debe ir centrado,
   como en escritorio. Lo que centra el logotipo en escritorio es un apaño de la
   plantilla —una columna estrecha con `text-end` y `mr-90`, que de casualidad
   cae cerca del centro—, y ese apaño no sobrevive al reparto de columnas de
   tablet.

   Así que aquí se centra de verdad: la columna del logotipo ocupa la fila entera
   y se centra su contenido, y la de las acciones se saca del flujo y se ancla a
   la derecha. El resultado es un logotipo centrado respecto a la pantalla, no
   respecto a una columna.

   Solo entre 768 y 991px. Por debajo sigue mandando Adina, que ahí acierta.
   ========================================================================== */
@media (min-width:768px) and (max-width:991.98px){
  .td-header-bottom .td-header-mobile-space > .row{position:relative;}

  .cy-cab-logo{width:100%;}
  .td-header-logo{
    text-align:center !important;   /* la de Adina también lleva !important */
    margin-right:0 !important;      /* anula el mr-90 del escritorio */
  }

  /* Anclada a los dos bordes verticales y centrada con flex, en vez de con
     `top:50%`: la fila lleva encima la columna del buscador, que en tablet está
     oculta pero sigue contando como línea de altura cero, y con un porcentaje
     eso se nota. */
  .cy-cab-acciones{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:auto;
    display:flex;
    align-items:center;
  }
}

/* ==========================================================================
   Cabecera · el logotipo centrado también en escritorio

   Lo de tablet no era un caso aparte: el logotipo **nunca** estuvo centrado de
   verdad. Adina lo coloca metiéndolo en una columna estrecha con `text-end` y un
   `mr-90`, y eso solo se acerca al centro a ciertos anchos. Medido, el desvío
   respecto al centro de la pantalla era:

       992px  −154px      1280px  −121px      1600px  −48px
       1100px −181px      1400px  −65px       1920px  −34px

   Siempre a la izquierda, y siempre distinto. Se arregla igual que en tablet:
   la columna del logotipo se saca del flujo y se centra sobre la fila entera, de
   modo que el centro es el de la pantalla y no el de una columna. El buscador se
   queda a la izquierda, y a la columna de acciones un `margin-left:auto` la
   empuja al borde derecho, que es donde estaba cuando ocupaba sitio en la fila.

   `pointer-events` es la única sutileza: la capa del logotipo cruza la fila de
   lado a lado, así que si atrapara el ratón dejaría el buscador sin poder
   pulsarse. La capa los deja pasar y el enlace del logotipo los recupera.
   ========================================================================== */
@media (min-width:992px){
  .td-header-bottom .td-header-mobile-space > .row{position:relative;}

  .cy-cab-logo{
    position:absolute;
    inset:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .cy-cab-logo .td-header-logo{
    margin-right:0 !important;   /* anula el mr-90 */
    text-align:center !important;
  }
  .cy-cab-logo .cyntia-logo{pointer-events:auto;}

  /* Al salir el logotipo del flujo, la fila queda con buscador y acciones. Esto
     devuelve las acciones al borde derecho, donde estaban. */
  .cy-cab-acciones{margin-left:auto;}
}

/* ==========================================================================
   Solo para lectores de pantalla
   Se saca de la vista sin usar `display:none` ni `visibility:hidden`, que lo
   esconderían también de quien lo escucha, que es justo a quien va dirigido.
   ========================================================================== */
.cy-solo-lectores{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ==========================================================================
   Héroe

   Una pantalla completa de vídeo con una secuencia de texto encima. Sustituye
   por entero al de Adina.

   **Ocupa exactamente el alto de la pantalla.** Se usa `svh` y no `vh` ni `dvh`:
   en el móvil, `vh` cuenta la pantalla sin la barra del navegador, así que el
   héroe sobresale y aparece un desplazamiento que no debería estar; y `dvh`
   cambia de valor mientras esa barra se esconde al hacer scroll, lo que
   reajusta el alto en pleno movimiento y da un salto. `svh` es el alto con la
   barra visible: estable, y garantiza que entra entero. `vh` queda de respaldo
   para los navegadores que no conocen la unidad.
   ========================================================================== */
.cy-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#0B0B0C;            /* el fondo mientras no haya vídeo, y bajo él */
  color:#FFFFFF;
  isolation:isolate;             /* el velo se mezcla con el vídeo, no con la página */
}

.cy-hero__fondo{
  position:absolute;
  inset:0;
  z-index:0;
}
.cy-hero__video{
  width:100%;
  height:100%;
  object-fit:cover;              /* llena sin deformar; recorta lo que sobre */
  object-position:center;
  display:block;
}

/* El velo. Sin él, el texto blanco pierde contraste en cuanto el vídeo pasa por
   un fotograma claro. Más oscuro arriba y abajo —donde caen la cabecera y la
   nota al pie— y más suave en el centro, para no matar la imagen. */
.cy-hero__velo{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.35) 26%,
                            rgba(11,11,12,.35) 74%, rgba(11,11,12,.78) 100%),
    rgba(11,11,12,.28);
}

.cy-hero__centro{
  position:relative;
  z-index:2;
  width:100%;
  /* Aire arriba para que la cabecera no se apoye sobre el texto en pantallas
     bajas, y abajo para la nota al pie. */
  padding:120px 0 100px;
}

/* --------------------------------------------------------------------------
   La secuencia

   Las tres partes —apertura, palabras y cierre— ocupan **la misma celda** de una
   retícula de uno por uno. Así se relevan en el sitio sin sacarlas del flujo con
   `position:absolute`: la caja mide lo que mida la más alta y el texto queda
   centrado de verdad, sin números puestos a ojo.
   -------------------------------------------------------------------------- */
.cy-hero__secuencia{
  display:grid;
  place-items:center;
  margin:0;
  text-align:center;
  min-height:1.6em;
}
.cy-hero__intro,
.cy-hero__palabras,
.cy-hero__remate{
  grid-area:1 / 1;
}

/* Las tres partes de la secuencia comparten tipografía: mismo tamaño, mismo peso
   y mismo interletraje. El aire técnico sale del peso ligero y del tamaño, sin
   meter una tipografía nueva —el manual reserva Outfit para el logotipo y todo lo
   demás hereda la del sitio.

   Las palabras sueltas iban antes más grandes, en caja alta y muy espaciadas.
   Ahora se leen como una frase más de la secuencia, y **la caja la decide quien
   escribe**: si en el escritorio pone «AI» sale «AI», y si pone «Data» sale
   «Data». Forzar mayúsculas desde el CSS le quitaba esa decisión y, de paso,
   convertía «AI» y «ai» en lo mismo. */
.cy-hero__intro,
.cy-hero__remate,
.cy-hero__palabra{
  display:block;
  max-width:18ch;
  font-size:clamp(30px, 5.4vw, 74px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;             /* reparte las líneas; si no se admite, se ignora */
}

/* Las palabras se relevan en la misma celda, una encima de otra. */
.cy-hero__palabras{
  display:grid;
  place-items:center;
}
.cy-hero__palabra{
  grid-area:1 / 1;
  opacity:0;
}

/* --------------------------------------------------------------------------
   Los tiempos

   Los calcula PHP y llegan en el `style` del héroe, porque dependen de cuántas
   palabras haya y eso se administra:

     `--t-intro`    la casilla de la frase de apertura
     `--t-cruce`    lo que la apertura anima **de mas**, para cruzarse con la
                    primera palabra en vez de dejar un hueco a oscuras
     `--t-palabras` cuándo entra la primera palabra
     `--t-pal`      cada cuánto entra la siguiente
     `--t-solape`   cuánto dura cada una, en pasos
     `--t-remate`   cuándo entra la frase de cierre

   `--i` es el número de cada palabra y `--j` el de cada letra del cierre.
   -------------------------------------------------------------------------- */
/* La duracion de la animacion es la casilla **mas** el desborde: la apertura
   sigue sonando cuando ya empezo la primera palabra, y por eso se cruzan.

   Es a proposito que el desborde vaya aqui y no restando en PHP. Restando, las
   palabras arrancaban 0,3 s antes de lo escrito en el panel y ningun tiempo
   calculado a mano cuadraba. Desbordando, la casilla mide lo que dice y el
   cruce sale igual. */
.cy-hero__intro{
  animation:cy-hero-intro calc(var(--t-intro,2.4s) + var(--t-cruce,.3s)) ease both;
}
@keyframes cy-hero-intro{
  0%   {opacity:0; transform:translateY(.3em); filter:blur(10px);}
  16%  {opacity:1; transform:none;             filter:blur(0);}
  84%  {opacity:1; transform:none;             filter:blur(0);}
  100% {opacity:0; transform:translateY(-.22em); filter:blur(10px);}
}

/* La palabra dura más que el hueco entre dos —`--t-solape`—, así que la que se
   va y la que llega se cruzan. Con la duración igual al paso quedaba un
   fotograma con la pantalla vacía entre una y otra: parpadeo, no relevo. */
.cy-hero__palabra{
  animation:cy-hero-palabra calc(var(--t-pal,.42s) * var(--t-solape,1.75)) ease both;
  animation-delay:calc(var(--t-palabras,2.1s) + var(--i,0) * var(--t-pal,.42s));
}
@keyframes cy-hero-palabra{
  0%   {opacity:0; transform:scale(1.12); filter:blur(12px);}
  18%  {opacity:1; transform:scale(1);    filter:blur(0);}
  62%  {opacity:1; transform:scale(1);    filter:blur(0);}
  100% {opacity:0; transform:scale(.95);  filter:blur(12px);}
}

/* El cierre entra letra a letra y **se queda**: es el remate del héroe. */
.cy-hero__remate{position:relative;}
/* Cada palabra del cierre es una caja que no se parte: las letras son
   `inline-block` y sin esto el navegador cortaría la línea entre dos
   cualesquiera, partiendo «connected» por la mitad. */
.cy-hero__palabra-remate{
  display:inline-block;
  white-space:nowrap;
}
.cy-hero__hueco{display:inline-block;}

.cy-hero__letra{
  display:inline-block;
  opacity:0;
  animation:cy-hero-letra .58s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:calc(var(--t-remate,4.9s) + var(--j,0) * .026s);
}
@keyframes cy-hero-letra{
  from{opacity:0; transform:translateY(.42em) rotateX(-72deg); filter:blur(6px);}
  to  {opacity:1; transform:none;                              filter:blur(0);}
}

/* Y una línea que se abre por debajo cuando ya han caído todas. */
.cy-hero__remate::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.34em;
  height:1px;
  width:0;
  background:currentColor;
  opacity:.55;
  transform:translateX(-50%);
  animation:cy-hero-linea .9s cubic-bezier(.16,.84,.24,1) both;
  animation-delay:calc(var(--t-remate,4.9s) + .42s);
}
@keyframes cy-hero-linea{
  from{width:0;}
  to  {width:min(100%, 22ch);}
}

/* --------------------------------------------------------------------------
   La nota al pie
   -------------------------------------------------------------------------- */
.cy-hero__pie{
  position:absolute;
  z-index:2;
  left:0;right:0;
  bottom:clamp(18px, 4vh, 44px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:0 20px;
  text-align:center;
  /* Entra al principio, con la primera frase, y se queda. Antes esperaba al
     cierre —`--t-remate`—, y en una pantalla completa que tarda catorce segundos
     en dar la vuelta eso dejaba el pie de la pantalla vacío casi todo el rato.

     No entra en la vuelta que relanza `cy-hero.js`: aparece una vez y se queda.
     Reiniciarlo cada ciclo lo haría parpadear sin motivo. */
  animation:cy-hero-pie .8s ease both;
  animation-delay:.5s;
}
.cy-hero__nota{
  font-size:13px;
  font-weight:400;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:.72;
}
.cy-hero__flecha{
  width:1px;
  height:38px;
  background:linear-gradient(180deg, transparent, currentColor);
  opacity:.5;
  animation:cy-hero-flecha 2.2s ease-in-out infinite;
}
@keyframes cy-hero-pie{
  from{opacity:0; transform:translateY(10px);}
  to  {opacity:1; transform:none;}
}
@keyframes cy-hero-flecha{
  0%,100%{transform:scaleY(.55); transform-origin:top; opacity:.28;}
  50%    {transform:scaleY(1);   transform-origin:top; opacity:.6;}
}

/* --------------------------------------------------------------------------
   Pantallas bajas y apaisadas

   Un móvil de lado deja poco más de 350px de alto. Ahí el texto a tamaño de
   pantalla completa no cabe, así que se recorta y se retira la nota al pie.
   -------------------------------------------------------------------------- */
@media (max-height:520px){
  .cy-hero__centro{padding:86px 0 40px;}
  .cy-hero__intro,
  .cy-hero__remate,
  .cy-hero__palabra{font-size:clamp(24px, 6vh, 40px);}
  .cy-hero__pie{display:none;}
}

/* --------------------------------------------------------------------------
   Menos animación

   Quien pide menos movimiento en su sistema no debe perderse el mensaje. Se
   apaga la secuencia y se enseñan a la vez la frase de apertura y la de cierre,
   una debajo de otra: las palabras sueltas sí sobran, porque fuera de la
   animación no dicen nada por su cuenta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cy-hero__secuencia{display:block;}
  .cy-hero__intro,
  .cy-hero__remate{
    max-width:none;
    animation:none;
    opacity:1;
    transform:none;
    filter:none;
  }
  .cy-hero__intro{margin-bottom:.5em;}
  .cy-hero__palabras{display:none;}
  .cy-hero__letra{animation:none; opacity:1; transform:none; filter:none;}
  .cy-hero__remate::after{animation:none; width:min(100%,22ch);}
  .cy-hero__pie{animation:none; opacity:1; transform:none;}
  .cy-hero__flecha{animation:none;}
}

/* ==========================================================================
   La cabecera sobre el héroe

   La cabecera de Adina es `position:absolute` sobre el documento, así que se
   apoya sobre el héroe sin ocupar sitio: el vídeo se le ve por detrás. Eso es lo
   que se quería, pero deja todo su contenido —logotipo, enlaces, buscador,
   hamburguesa— en tinta oscura sobre un fondo oscuro, es decir, invisible.

   Aquí se pasa a negativo. Va acotado a `.home` porque **solo la portada tiene
   el héroe**: en cualquier otra página la cabecera se apoya sobre fondo claro y
   la tinta oscura es la correcta.

   Y se excluye la cabecera ya fija —`.td-header-sticky`, que al pasar de 100px
   de scroll se vuelve `position:fixed` con fondo blanco—, porque ahí vuelve a
   estar sobre claro. La barra de arriba no necesita esa excepción: se va con el
   scroll y nunca llega a verse sobre otra cosa que el héroe.
   ========================================================================== */

/* La cabecera, por encima del héroe.

   Sin esto no se ve: el héroe es `position:relative` para colocar dentro el
   vídeo y el velo, y dos elementos posicionados sin `z-index` se pintan en el
   orden del documento. El `<header>` va antes que el `<main>`, así que el héroe
   le pasaba por encima y se lo comía entero.

   Un 5 basta —el héroe no declara nivel— y no estorba a los que ya hay: la
   cabecera fija sube a 99 y el mega menú la sube a 100 mientras está abierto. */
.td-header-area.td-transparent{z-index:5;}

/* --------------------------------------------------------------------------
   La tinta de la cabecera, en una variable

   La cabecera se apoya sobre fondos distintos y en unos vuelve a ser clara:

     · sobre fondo oscuro      → tinta blanca
       (el héroe de la portada, y el encabezado negro de una ficha)
     · ya fija (`td-header-sticky`) → fondo blanco → tinta oscura
     · con el mega menú abierto → panel blanco  → tinta oscura

   En vez de repetir cada regla, el color vive en una variable y solo se cambia
   la variable. `cy-mega-abierto` la pone el JavaScript en el `<html>`, así que la
   clase del `<body>` queda por dentro.

   **Quién lleva `cy-cab-oscura` lo decide PHP**, en `inc/tipos.php`. Antes estas
   reglas iban bajo `.home` y por eso solo servían en la portada: en la ficha de
   un caso de uso la cabecera quedaba oscura sobre el negro de marca y no se veía
   ni el logotipo ni el icono del menú.
   -------------------------------------------------------------------------- */
.cy-cab-oscura .td-header-area{
  --cab-tinta:#FFFFFF;
  --cab-tinta-suave:rgba(255,255,255,.6);
  --cab-linea:rgba(255,255,255,.22);
  --cab-logo-negativo:1;
  --cab-logo-tinta:0;
}
.cy-cab-oscura .td-header-sticky,
.cy-mega-abierto .cy-cab-oscura .td-header-area{
  --cab-tinta:var(--td-theme-primary,#20282d);
  --cab-tinta-suave:var(--td-grey-3,#8b9aa4);
  --cab-linea:rgba(0,0,0,.1);
  --cab-logo-negativo:0;
  --cab-logo-tinta:1;
}

/* --- El logotipo: dos archivos, uno encima del otro --- */
.cyntia-logo{position:relative;}
.cy-logo-negativo{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .25s ease;
}
.cy-logo-tinta{transition:opacity .25s ease;}

.cy-cab-oscura .td-header-area .cy-logo-negativo{opacity:var(--cab-logo-negativo,0);}
.cy-cab-oscura .td-header-area .cy-logo-tinta{opacity:var(--cab-logo-tinta,1);}

/* --- El resto del contenido de la cabecera --- */
.cy-cab-oscura .td-header-area{color:var(--cab-tinta);}
.cy-cab-oscura .td-header-top-menu ul li a,
.cy-cab-oscura .td-header-lang-toggle{color:var(--cab-tinta);}
.cy-cab-oscura .td-header-top-menu ul li a:hover,
.cy-cab-oscura .td-header-lang-toggle:hover{opacity:.7;}

/* Las dos líneas que separan las filas de la cabecera. */
.cy-cab-oscura .td-header-top .border-bottom,
.cy-cab-oscura .td-header-bottom .border-bottom-2{
  border-color:var(--cab-linea) !important;
}

/* El buscador. El `::placeholder` va aparte porque no hereda el `color`. */
.cy-cab-oscura .td-header-input input{color:var(--cab-tinta);}
.cy-cab-oscura .td-header-input input::placeholder{color:var(--cab-tinta-suave);}
.cy-cab-oscura .td-header-search-btn{color:var(--cab-tinta);}

/* Las dos hamburguesas: la del escritorio pinta sus barras con `currentColor`,
   así que le basta el color; la del móvil las trae con un fondo fijo. */
.cy-cab-oscura .cy-mega-btn{color:var(--cab-tinta);}
.cy-cab-oscura .td-offcanvas-open-btn span{background-color:var(--cab-tinta);}

/* ==========================================================================
   Pasos · el rótulo girado de la tarjeta cerrada

   Adina lo resuelve con una caja de **200 px de ancho fijo**, girada 90° y
   colocada con `translate()` de píxeles a mano: nueve valores distintos —tres
   tarjetas × tres breakpoints— que además no coinciden entre sí por unos pocos
   píxeles sin razón estructural.

   Eso aguanta mientras el texto quepa en 200 px. Con los rótulos en español
   —«Inteligencia Artificial», «Cliente y mejora continua»— ya no cabe y parte en
   dos líneas, aunque la columna mide 640 px de alto y sobran casi 600 para
   escribir. Añadir un décimo número mágico volvería a romperse al siguiente
   cambio de texto.

   Aquí se cambia por texto vertical de verdad —`writing-mode`—, que es lo que
   hay para esto: el rótulo ocupa lo que mida, sin caja fija y sin `translate`.
   El `rotate(180deg)` es lo que lo deja leyéndose de abajo arriba, como estaba.
   ========================================================================== */
.td-panel-item{height:100%;}

/* Número arriba, rótulo abajo, que es donde estaban. Antes lo conseguía el
   `translate`; ahora lo hace la propia caja. */
.td-panel-item .td-panel-content{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}

.td-panel-item .td-panel-title{
  width:auto;                  /* fuera la caja de 200px */
  transform:rotate(180deg);    /* pisa los nueve translate de Adina */
  writing-mode:vertical-rl;
  white-space:nowrap;          /* una sola línea, pase lo que pase */
  font-size:32px;
  line-height:1.1;
  margin:0;
}

/* Donde la columna es más baja hay menos recorrido para escribir, así que el
   rótulo baja de tamaño en la misma proporción. */
@media (min-width:992px) and (max-width:1199px){
  .td-panel-item .td-panel-title{font-size:26px;}
}
@media (min-width:768px) and (max-width:991px){
  .td-panel-item .td-panel-title{font-size:27px;}
}

/* ==========================================================================
   Respaldo · el párrafo y la parrilla de métricas

   Ocupa el sitio de la sección de premios de Adina, que era una lista de filas.
   Unas métricas piden parrilla, así que la maquetación es propia; la tipografía
   no: la cifra toma el mismo peso y tamaño que los contadores de la sección de
   números —`.td-counter-count`, 500 y 64px— y la etiqueta el mismo gris. Dos
   sitios distintos de la misma página diciendo números tienen que verse igual.
   ========================================================================== */
.cy-respaldo__texto{
  margin:22px auto 0;
  max-width:64ch;
  color:var(--td-grey-2,#666);
  line-height:1.6;
}

.cy-metrica__cifra{
  margin:0 0 6px;
  font-weight:500;
  font-size:64px;
  line-height:1.16;
  color:var(--td-theme-primary,#20282d);
  white-space:nowrap;          /* la unidad no se cae a la línea de abajo */
}
/* La unidad va pegada a la cifra y en pequeño: es «15+ years», no dos datos. */
.cy-metrica__unidad{
  margin-left:.22em;
  font-size:.34em;
  font-weight:400;
  color:var(--td-grey-2,#666);
  letter-spacing:.02em;
}
.cy-metrica__etiqueta{
  margin:0;
  max-width:22ch;
  margin-inline:auto;
  line-height:1.5;
  color:var(--td-grey-2,#666);
}

@media (max-width:767px){
  .cy-metrica__cifra{font-size:44px;}
}

/* ==========================================================================
   Pie en negro

   Adina lo pinta con `.td-grey-bg`, el mismo azul muy claro que usan las
   secciones de equipo y de logos de clientes. Aquí se cambia **solo el pie**, no
   la clase: tocarla habría oscurecido de paso tres secciones más.

   La tinta se invierte entera, y las líneas y los bordes de los iconos pasan a
   blanco translúcido: un gris fijo que funcionaba sobre el azul claro se pierde
   sobre negro.
   ========================================================================== */
.td-footer-area{
  background:#0B0B0C;
  color:#FFFFFF;
}
.td-footer-area .cy-pie__copy,
.td-footer-area .cy-pie__t{color:#FFFFFF;}

.td-footer-area .cy-pie__cookies a,
.td-footer-area .cy-pie__lista a{color:rgba(255,255,255,.72);}
.td-footer-area .cy-pie__cookies a:hover,
.td-footer-area .cy-pie__lista a:hover{color:#FFFFFF;}

.td-footer-area .cy-pie__redes a{
  color:#FFFFFF;
  border-color:rgba(255,255,255,.28);
}
.td-footer-area .cy-pie__redes a:hover{border-color:#FFFFFF;}

/* Cualquier línea divisoria que traiga la plantilla dentro del pie. */
.td-footer-area [class*="border"]{border-color:rgba(255,255,255,.16) !important;}

/* ==========================================================================
   Pasos · las tarjetas cerradas, en negro

   Adina las pinta con `--td-grey-1`. En negro, la tarjeta cerrada se lee como
   una pestaña y la abierta destaca por contraste, que es justo lo que hace esa
   sección: una abierta y las demás esperando.

   Solo las cerradas: la abierta enseña su imagen y su texto, y ahí el fondo
   claro es el que toca.
   ========================================================================== */
.col-custom:not(.active){
  background:#0B0B0C;
}
.col-custom:not(.active) .td-panel-title,
.col-custom:not(.active) .td-panel-content span{
  color:#FFFFFF;
}

/* En el móvil, Adina abre todas las tarjetas —les pone `active` con JavaScript—,
   así que ninguna se queda en negro y no hace falta excepción. */

/* ==========================================================================
   La letra de fondo de la sección de productos

   Era un PNG con una «A», de la plantilla. Ahora es texto: se ve igual, hereda
   la tipografía del sitio y cambiarla es cambiar un carácter en `front-page.php`
   en vez de exportar otra imagen.

   Conserva la clase de posición de Adina —`.td-about-text-big`—, que es la que
   la coloca y la manda detrás del contenido con `z-index:-1`.
   ========================================================================== */
.cy-marca-agua{
  display:block;
  font-size:540px;
  font-weight:700;
  line-height:.78;
  letter-spacing:-.04em;
  color:var(--td-grey-1,#f5f9ff);
  user-select:none;
  pointer-events:none;
}


/* La sección de cifras arrancaba pegada a la banda: sus columnas de texto
   empezaban en el mismo píxel en que acababa el negro.

   El aire se le da **a las columnas de texto, no a la sección**: la imagen va a
   sangre por la izquierda y que salga del negro sin costura es lo que hace que
   las dos piezas se lean como una. Meter el margen arriba de la sección entera
   habría abierto una franja blanca por encima de la foto. */
.td-counter-area .td-counter-content,
.td-counter-area .td-counter-count-wrap{
  padding-top:clamp(44px, 4.5vw, 84px);
}

/* ==========================================================================
   Casos de uso · el carrusel

   Desplazamiento **nativo**: `overflow-x` con `scroll-snap`. Sale gratis lo que
   con una biblioteca de carrusel cuesta y se rompe: arrastrar con el dedo, la
   rueda del ratón en horizontal, las flechas del teclado y la barra de
   desplazamiento del sistema. El JavaScript solo sincroniza las pastillas.

   Las tarjetas sobresalen del contenedor a propósito —la pista va a sangre y
   solo el primer margen respeta la retícula—, así se ve que hay más a la
   derecha sin tener que poner flechas.
   ========================================================================== */
.cy-casos{
  padding:40px 0 40px;
  background:#f0f0f0;
  overflow:hidden;              /* la pista sangra; sin esto aparece scroll en la página */
}

/* --- Las pastillas -------------------------------------------------------- */
.cy-casos__pastillas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:34px;
}
.cy-casos__pastilla{
  appearance:none;
  /* `relative` y `clip` por la barra de avance, que va pegada al borde de abajo
     por dentro de la pastilla. `clip` la recorta con el redondeo y —al revés que
     `hidden`— no convierte la pastilla en contenedor de desplazamiento. */
  position:relative;
  overflow:hidden;
  overflow:clip;
  border:1px solid transparent;
  border-radius:999px;
  background:none;
  padding:8px 16px;
  font-size:15px;
  font-weight:400;
  line-height:1.2;
  color:var(--td-grey-2,#666);
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.cy-casos__pastilla:hover{
  color:var(--td-theme-primary,#20282d);
  border-color:rgba(0,0,0,.12);
}
.cy-casos__pastilla.es-actual{
  background:var(--td-theme-primary,#20282d);
  border-color:var(--td-theme-primary,#20282d);
  color:#FFFFFF;
}
/* --- El indicador de que ya va a pasar ---
   Una línea que se llena dentro de la pastilla activa. La crea el JavaScript y
   **la anima con la API de animaciones, no con CSS**: así la barra y la espera
   son el mismo reloj y no pueden separarse al pausar, al volver de otra pestaña
   o al reiniciar tras un clic.

   Aquí solo se dice cómo se ve, y que se ve **solo en la activa**. */
.cy-casos__avance{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.7);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
}
.cy-casos__pastilla.es-actual .cy-casos__avance{opacity:1;}

/* Las flechas y «ver todos» van juntos al final de la fila: los mandos a un
   lado y los filtros al otro. */
.cy-casos__mandos{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.cy-casos__flecha-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  background:none;
  color:var(--td-theme-primary,#20282d);
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.cy-casos__flecha-btn:hover{
  background:var(--td-theme-primary,#20282d);
  border-color:var(--td-theme-primary,#20282d);
  color:#FFFFFF;
}
.cy-casos__flecha-btn:focus-visible{outline:2px solid var(--td-theme-primary);outline-offset:2px;}
/* Nunca se desactivan: con la vuelta puesta, las dos siempre llevan a algún
   sitio. Un botón apagado aquí sería mentira. */

/* El de «ver todos» no es una pastilla más, es salir. */
.cy-casos__todos{
  border:1px solid rgba(0,0,0,.16);
  padding:8px 18px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--td-theme-primary,#20282d);
  text-decoration:none;
  transition:background-color .22s ease, color .22s ease;
}
.cy-casos__todos:hover{
  background:var(--td-theme-primary,#20282d);
  color:#FFFFFF;
}

/* --- La pista ------------------------------------------------------------- */
.cy-casos__pista{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-x:contain;   /* que no arrastre la página al llegar al borde */
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* El primer margen respeta la retícula; a la derecha se deja sangrar. */
  padding:0 24px 0 max(24px, calc((100vw - 1750px) / 2 + 12px));
  scroll-padding-left:max(24px, calc((100vw - 1750px) / 2 + 12px));
  /* La barra se esconde: el carrusel ya se entiende por las pastillas y por la
     tarjeta cortada de la derecha. Sigue funcionando con rueda y teclado. */
  scrollbar-width:none;
}
.cy-casos__pista::-webkit-scrollbar{display:none;}
.cy-casos__pista:focus-visible{outline:2px solid var(--td-theme-primary);outline-offset:4px;}

.cy-casos__tarjeta{
  flex:0 0 auto;
  width:min(74vw, 980px);
  scroll-snap-align:start;
}

.cy-casos__enlace{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#0B0B0C;           /* el fondo mientras la imagen no ha bajado */
  text-decoration:none;
  color:#FFFFFF;
}
.cy-casos__foto,
.cy-casos__foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cy-casos__enlace img{transition:transform .6s cubic-bezier(.16,.84,.24,1);}
.cy-casos__enlace:hover img{transform:scale(1.03);}

/* --- El panel de texto --------------------------------------------------- */
.cy-casos__panel{
  position:absolute;
  top:0;
  left:0;
  max-width:min(76%, 520px);
  padding:30px 34px 34px;
  background:rgba(11,11,12,.88);
  /* El texto va sobre una foto que no controlamos; un panel opaco es lo único
     que garantiza el contraste sea cual sea el fotograma que haya debajo. */
}
.cy-casos__etiqueta{
  display:block;
  margin-bottom:14px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.cy-casos__titular{
  margin:0;
  font-size:clamp(20px, 1.9vw, 30px);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.01em;
  color:#FFFFFF;
}
.cy-casos__flecha{
  display:inline-block;
  margin-left:.34em;
  transition:transform .3s cubic-bezier(.16,.84,.24,1);
}
.cy-casos__enlace:hover .cy-casos__flecha{transform:translate(3px,-3px);}

@media (max-width:991px){
  .cy-casos{padding:64px 0 72px;}
  .cy-casos__tarjeta{width:min(86vw, 620px);}
  .cy-casos__pista{gap:16px;padding-left:20px;padding-right:20px;scroll-padding-left:20px;}
  .cy-casos__panel{max-width:none;right:0;padding:22px 24px 26px;}
  .cy-casos__mandos{margin-left:0;width:100%;}
  .cy-casos__todos{margin-left:auto;}
}
@media (max-width:575px){
  /* En vertical la tarjeta se pone alta: es el encuadre de la imagen de móvil. */
  .cy-casos__enlace{aspect-ratio:4 / 5;}
}

@media (prefers-reduced-motion:reduce){
  .cy-casos__pista{scroll-behavior:auto;}
  .cy-casos__enlace img,
  .cy-casos__flecha{transition:none;}
  .cy-casos__enlace:hover img{transform:none;}
}

/* ==========================================================================
   Ficha y listado de casos de uso

   Plantillas provisionales mientras no haya diseño propio, así que el estilo es
   deliberadamente sobrio: el encabezado sobre el negro de marca —donde la
   cabecera transparente se sigue leyendo en blanco sin excepciones— y el cuerpo
   sobre blanco, con la medida de línea corta que pide un texto largo.
   ========================================================================== */
.cy-ficha__cabeza{
  background:#0B0B0C;
  color:#FFFFFF;
  padding:150px 0 55px;        /* el de arriba deja sitio a la cabecera, que va encima */
}
.cy-ficha__etiqueta{
  display:block;
  margin-bottom:20px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.cy-ficha__titular{
  margin:0;
  max-width:26ch;
  font-size:clamp(30px, 4.4vw, 62px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.02em;
  color:#FFFFFF;
}
.cy-ficha__resumen{
  margin:26px 0 0;
  max-width:60ch;
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* La imagen sube y muerde el negro: ata el encabezado con el cuerpo en vez de
   dejar dos bloques sueltos uno encima del otro. */
.cy-ficha__foto{
  background:linear-gradient(180deg, #0B0B0C 0 50%, transparent 50% 100%);
}

/* --- La foto: anclada a la pantalla, con el recuadro pasando por encima ------

   Es el paralaje de fondo fijo: la imagen **no se mueve**, se queda clavada en la
   pantalla, y lo que se desplaza es el recuadro que la enseña. Al bajar, la
   ventana recorre la foto y va descubriendo partes distintas.

   **Lo mueve `assets/js/cy-paralaje.js`, y aquí no hay animación de CSS.** No es
   por comodidad: se intentó con `animation-timeline: view()` y no puede hacer
   este efecto. `view()` toma como sujeto **el propio elemento que anima** —la
   imagen, de una pantalla de alto— y no el recuadro, así que su rango abarca
   `pantalla + alto de la imagen` en vez de `pantalla + alto del recuadro`. Se
   midió: la imagen se movía 189px en pantalla en lugar de quedarse quieta.

   Se puede corregir declarando la línea de tiempo con nombre en el recuadro, pero
   eso solo funciona en Chromium: otros motores no resuelven un nombre declarado
   en un ancestro. Entre un camino que funciona en todas partes y dos caminos que
   hay que mantener en paralelo, uno.

   El coste es un `transform` por fotograma **mientras la foto se ve** —fuera de
   pantalla el `IntersectionObserver` deja de pedirlos—, que para un solo elemento
   no se nota.
   --------------------------------------------------------------------------- */
.cy-ficha__foto{
  /* El alto del recuadro. Cuanto más bajo, más se nota que la foto está quieta
     detrás, porque la franja recorre más imagen. */
  --cy-ventana:58vh;

  /* Y el alto de la imagen. **Una pantalla, y este mismo número es el recorrido
     de la animación**: si se separan, la imagen deja de quedarse quieta y nadie
     entiende por qué. Por eso vive en una variable y no escrito dos veces. */
  --cy-foto-alto:100vh;
}

.cy-ficha__foto picture,
.cy-ficha__foto > .container > picture{
  display:block;
  position:relative;
  height:var(--cy-ventana);
  /* `clip` y no `hidden`: los dos recortan igual, pero `hidden` convierte la caja
     en contenedor de desplazamiento aunque nadie pueda desplazarla, y eso trae
     efectos raros a cualquier cosa que dependa del desplazamiento. */
  overflow:hidden;
  overflow:clip;
}

/* Sin JavaScript, la imagen llena su recuadro y se queda quieta: una foto normal,
   bien encuadrada. Es el punto de partida, no un caso degradado. */
.cy-ficha__foto img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Con el efecto encendido, la imagen pasa a medir una pantalla de alto: es el
   margen que necesita para quedarse quieta mientras el recuadro la recorre.

   La clase `cy-anclada` la pone `cy-paralaje.js`, así que **si el JavaScript no
   corre, nada de esto se aplica** y queda una imagen bien encuadrada en su
   recuadro en lugar de una a medio hacer. */
.cy-ficha__foto.cy-anclada img{
  height:var(--cy-foto-alto);
  will-change:transform;
}

/* --- Quién lo mueve ---------------------------------------------------------

   **El CSS cuando puede, y si no el JavaScript.** No es redundancia: una
   animación de línea de tiempo de vista corre en el compositor, así que va fina
   pase lo que pase; el JavaScript depende de que el navegador le entregue la
   posición a tiempo, y en macOS con trackpad no siempre lo hace.

   La clave está en el valor final del recorrido, y aquí me equivoqué una vez:
   **`view()` toma como sujeto el elemento que anima —la imagen—, no el
   recuadro.** Su rango va de cuando el borde de arriba de la imagen entra por
   abajo a cuando su borde de abajo sale por arriba, o sea
   `pantalla + alto de la imagen` de desplazamiento. Para que la imagen quede
   fija tiene que recorrer exactamente eso, así que el final es **el alto de la
   imagen**. Puse el del recuadro y la imagen se movía 189px en pantalla en vez
   de quedarse quieta; lo di por imposible cuando solo era un número mal.
   --------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cy-ficha__foto.cy-anclada img{
      animation:cy-ficha-anclada linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes cy-ficha-anclada{
  from{transform:translateY(calc(var(--cy-foto-alto) * -1));}
  to  {transform:translateY(var(--cy-foto-alto));}
}

/* En un teléfono, una franja más baja: ocupa menos pantalla y el recorrido sobre
   la foto se nota igual. */
@media (max-width:767px){
  .cy-ficha__foto{--cy-ventana:44vh;}
}

.cy-ficha__cuerpo{padding:80px 0 120px;}

/* La columna de lectura va **centrada**, no pegada a la izquierda.
   Con el contenedor de 1750px y el texto a 72ch, el párrafo se quedaba en el
   borde izquierdo y sobraba media pantalla en blanco a la derecha: no se leía
   como una decisión, se leía como algo a medio maquetar. Centrada, el blanco
   queda a los dos lados y la página se sostiene.

   La medida se conserva: un párrafo a 1750px de ancho no se puede seguir con la
   vista. */
.cy-ficha__cuerpo > .container{max-width:1180px;}
.cy-ficha__texto{
  max-width:72ch;
  margin-inline:auto;
}

/* El primer párrafo, de entrada: algo más grande y más claro. Da un punto de
   arranque a la lectura en vez de empezar en plano. */
.cy-ficha__texto > p:first-child{
  font-size:clamp(19px, 1.6vw, 23px);
  line-height:1.62;
  color:var(--td-theme-primary,#20282d);
}
.cy-ficha__texto > * + *{margin-top:1.15em;}
.cy-ficha__texto h2{margin-top:2em;font-size:clamp(24px,2.4vw,34px);font-weight:400;}
.cy-ficha__texto h3{margin-top:1.7em;font-size:clamp(20px,1.9vw,26px);font-weight:400;}
.cy-ficha__texto img{max-width:100%;height:auto;}
.cy-ficha__texto ul,
.cy-ficha__texto ol{padding-left:1.3em;}
.cy-ficha__texto li + li{margin-top:.5em;}

/* Las citas del editor. Salen de un bloque `core/quote`, y sin estilos se
   renderizan **idénticas a un párrafo** —16px, sin sangría, sin marca—: se midió,
   y así una cita no cumple ninguna función, solo repite una frase.

   Se marca con una línea a la izquierda y cuerpo mayor, no con comillas
   tipográficas: la marca es monocroma y sobria, y unas comillas gigantes serían
   lo único decorativo de la página.
   -------------------------------------------------------------------------- */
.cy-ficha__texto blockquote{
  margin:2.4em 0;
  padding:2px 0 2px 28px;
  border-left:2px solid var(--td-theme-primary, #20282d);
}
.cy-ficha__texto blockquote p{
  margin:0;
  font-size:clamp(19px, 1.7vw, 24px);
  line-height:1.5;
  font-weight:300;
}
.cy-ficha__texto blockquote p + p{margin-top:.6em;}
/* La atribución, si algún día se usa. */
.cy-ficha__texto blockquote cite{
  display:block;
  margin-top:14px;
  font-size:13px;
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}

@media (max-width:600px){
  .cy-ficha__texto blockquote{margin:1.8em 0;padding-left:20px;}
}

/* Las tablas del editor. Salen de un bloque `core/table`, que WordPress no estila
   por su cuenta: sin esto se ven con el aspecto por omisión del navegador, con
   bordes de 1px grises y sin aire, y desentonan con el resto del texto.

   Aquí sirven para comparar un antes con un después, así que lo que importa es
   que las filas se lean de un tirón: sin bordes verticales, con una línea fina
   entre filas y la primera columna con algo más de peso. */
.cy-ficha__texto .wp-block-table{margin:2em 0;}
.cy-ficha__texto table{
  width:100%;
  border:0;
  border-collapse:collapse;
  font-size:16px;
}
.cy-ficha__texto th,
.cy-ficha__texto td{
  padding:14px 18px 14px 0;
  text-align:left;
  vertical-align:top;
  /* `border:0` primero, y solo después el inferior. Adina pone un borde
     completo a las celdas en su propia hoja, así que añadir el de abajo sin
     quitar los demás deja la reja de bordes verticales: se vio en pantalla. */
  border:0;
  border-bottom:1px solid var(--td-border-1, #e4e6ea);
}
.cy-ficha__texto th{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}
/* La primera columna es la etiqueta de la fila —«Recepción», «Validación»—, así
   que se lee antes que el resto. */
.cy-ficha__texto tbody td:first-child{
  font-weight:600;
  padding-right:28px;
}

/* Una tabla no se puede estrechar más allá de su contenido, así que en pantalla
   pequeña se desplaza dentro de su propia caja en vez de empujar la página a lo
   ancho, que es el fallo clásico. */
@media (max-width:600px){
  .cy-ficha__texto .wp-block-table{overflow-x:auto;}
  .cy-ficha__texto table{min-width:420px;}
  .cy-ficha__texto th,
  .cy-ficha__texto td{padding:11px 14px 11px 0;font-size:15px;}
}

/* Alineado con la columna de texto, no con el borde del contenedor: si no,
   el enlace se queda suelto a la izquierda mientras el texto va centrado. */
.cy-ficha__volver{
  margin:70px auto 0;
  max-width:72ch;
}
.cy-ficha__volver a{
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--td-theme-primary,#20282d);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  text-decoration:none;
}

/* El listado reusa las clases de la tarjeta del carrusel: son la misma pieza en
   otra retícula, y verlas iguales es lo que hace que se reconozcan. */
.cy-lista-casos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
.cy-lista-casos .cy-casos__enlace{aspect-ratio:16 / 11;}
@media (max-width:767px){
  .cy-ficha__cabeza{padding:140px 0 60px;}
  .cy-ficha__cuerpo{padding:56px 0 80px;}
  .cy-lista-casos{grid-template-columns:1fr;gap:18px;}
  .cy-lista-casos .cy-casos__enlace{aspect-ratio:4 / 5;}
}

/* ==========================================================================
   Productos y servicios · la lista

   Empezó siendo un acordeón —horizontal en Adina, luego vertical con
   `<details>`— y acabó en lista: las filas van siempre abiertas, así que no hay
   nada que desplegar.

   Cada fila son **cuatro columnas**: número, imagen, nombre y descripción. El
   nombre y la descripción iban antes apilados en una sola, y con el nombre a
   cuerpo grande cada fila crecía a lo alto; al lado, la fila mide lo que mida el
   más largo de los dos.
   ========================================================================== */
.cy-productos{
  padding:50px;
  background:#FFFFFF;
}

.cy-productos__cabeza{margin-bottom:56px;}

/* El titular de la sección. Estuvo un rato a 116px por una lectura mía
   equivocada —el «muy grande» era para el nombre de cada producto, no para
   esto—; vuelve a su tamaño, que ya funcionaba. */
.cy-productos__titulo{
  margin:0;
  max-width:34ch;
  font-size:clamp(32px, 4vw, 60px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.cy-productos__subtitulo{
  margin:30px 0 0;
  max-width:58ch;
  font-size:clamp(16px, 1.3vw, 20px);
  line-height:1.6;
  color:var(--td-grey-2,#666);
}

/* --- La lista ------------------------------------------------------------- */
.cy-productos__lista{border-top:1px solid rgba(0,0,0,.1);}

/* Las tres columnas de contenido —imagen, nombre y descripción— van en
   horizontal, una al lado de otra. Con el nombre a 48px necesita más sitio que
   la descripción, así que la reparte 1.15 contra 1 en vez de al revés. */
.cy-producto{
  display:grid;
  grid-template-columns:3ch 190px minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
  gap:0 34px;
  padding:30px 0;
  border-bottom:1px solid rgba(0,0,0,.1);
}
/* Sin imagen se cae su columna; sin descripción, la última. Las dos a la vez
   dejan número y nombre, que es lo mínimo que tiene una fila. */
.cy-producto.sin-foto{grid-template-columns:3ch minmax(0,1.15fr) minmax(0,1fr);}

.cy-producto__num{
  padding-top:.5em;
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--td-grey-3,#8b9aa4);
}

/* **Fondo negro y el logotipo centrado, no recortado.** Aquí antes había fotos
   y `object-fit:cover` era lo correcto: una foto se recorta y no pasa nada. Lo
   que hay ahora son los logotipos de cada producto, en blanco, así que
   recortarlos les corta el nombre y sobre fondo claro no se ven. Con `contain`
   el logotipo entra entero, con el negro de marca detrás y centrado en la caja.

   La caja conserva su proporción para que la retícula no se mueva: lo que
   cambia es que el logotipo se centra dentro en vez de llenarla. */
.cy-producto__foto{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16 / 11;
  padding:12% 14%;
  background:#0B0B0C;
  border-radius:3px;
}
/* `max-*` y no `width/height:100%`: así el logotipo se centra con el flex del
   padre y no depende de que el `aspect-ratio` resuelva una altura. Con
   `height:100%` bastaba con que la fila de la retícula impusiera otro alto para
   que la imagen se estirara. */
.cy-producto__foto img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

/* El nombre de cada producto, **grande**: es lo que se busca al recorrer la
   lista, y a 27px se leía como una etiqueta más. */
.cy-producto__nombre{
  margin:0;
  font-size:clamp(26px, 3.4vw, 48px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.025em;
}
.cy-producto__rotulo{
  display:block;
  margin:10px 0 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--td-grey-3,#8b9aa4);
}
.cy-producto__desc p{
  margin:0;
  padding-top:.35em;      /* alinea la primera línea con la del nombre */
  font-size:16px;
  line-height:1.6;
  color:var(--td-grey-2,#666);
}

/* --- El enlace a la ficha ---
   Solo lo llevan los productos que ya tienen página; los demás se pintan igual
   pero sin él, que es mejor que un enlace a un 404.

   **Se estira sobre toda la fila** con el pseudoelemento, así que se puede
   pulsar la fila entera y aun así hay un solo enlace en el árbol de
   accesibilidad. La otra opción —enlazar también el nombre— daba dos enlaces al
   mismo sitio en cada fila, que en la lista de enlaces de un lector de pantalla
   se lee como catorce destinos donde hay siete. */
.cy-producto.es-enlazado{position:relative;}
.cy-producto__mas{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--td-theme-primary,#20282d);
  text-decoration:none;
  /* El subrayado se dibuja con el borde y no con `text-decoration`, para poder
     animarlo de izquierda a derecha sin que salte el alto de la línea. */
  border-bottom:1.5px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, gap .2s ease;
}
.cy-producto__mas svg{
  width:16px;
  height:12px;
  flex:0 0 auto;
  transition:transform .2s ease;
}
.cy-producto__mas::after{
  /* La zona pulsable: toda la fila. */
  content:"";
  position:absolute;
  inset:0;
}
.cy-producto.es-enlazado:hover .cy-producto__mas,
.cy-producto__mas:focus-visible{border-bottom-color:var(--td-theme-primary,#20282d);}
.cy-producto.es-enlazado:hover .cy-producto__mas svg{transform:translateX(3px);}

/* El foco se dibuja sobre **la fila entera**, no sobre las tres palabras del
   enlace: la zona pulsable es la fila, así que un anillo alrededor de «Ver más»
   estaría señalando algo más pequeño de lo que se va a activar. */
.cy-producto__mas:focus-visible{outline:none;}
.cy-producto.es-enlazado:focus-within{outline:2px solid var(--td-theme-primary,#20282d);outline-offset:4px;}

/* Sin movimiento, los dos desplazamientos se quedan quietos: no dicen nada que
   el subrayado no diga ya. */
@media (prefers-reduced-motion: reduce){
  .cy-producto__mas,
  .cy-producto__mas svg{transition:none;}
  .cy-producto.es-enlazado:hover .cy-producto__mas svg{transform:none;}
}

@media (max-width:991px){
  /* Por debajo de 991px ya no caben tres columnas de contenido con el nombre a
     ese cuerpo, así que la descripción baja debajo del nombre y ocupa su hueco
     y el de la imagen, para no quedarse en una tira estrecha. Antes esto pasaba
     a 1199px y en un portátil se perdía la horizontal. */
  .cy-producto{grid-template-columns:3ch 170px minmax(0,1fr);}
  .cy-producto__desc{grid-column:3;}
  .cy-producto__desc p{padding-top:14px;}
  .cy-producto.sin-foto{grid-template-columns:3ch minmax(0,1fr);}
  .cy-producto.sin-foto .cy-producto__desc{grid-column:2;}
}

@media (max-width:767px){
  /* 50px por los cuatro lados también aquí, como se pidió. En una pantalla de
     390px eso son 100px de aire lateral —el 26% del ancho— y la columna de
     texto se queda en 290px: cabe un párrafo, pero es la medida más estrecha de
     la portada. Si algún día se ve apretada, este es el número a bajar. */
  .cy-productos{padding:50px;}
  .cy-productos__cabeza{margin-bottom:34px;}
  /* En vertical solo caben el número y una columna: la imagen se va arriba, a
     todo el ancho de esa columna, y debajo el nombre y la descripción. */
  .cy-producto,
  .cy-producto.sin-foto{
    grid-template-columns:3ch minmax(0,1fr);
    gap:0 14px;
    padding:22px 0;
  }
  .cy-producto__foto{grid-column:2;margin-bottom:14px;aspect-ratio:16 / 9;padding:8% 10%;}
  .cy-producto__id,
  .cy-producto__desc{grid-column:2;}
  .cy-producto__num{font-size:12px;}
}

/* ==========================================================================
   Banda de productos · todas las tarjetas en una línea

   Adina la reparte con las clases `row-cols-*` de Bootstrap: cinco por fila en
   escritorio, tres, dos, dos y una según se estrecha. En una tablet eso partía
   la banda en tres líneas, y la banda es justamente eso, una banda.

   Aquí se reparte el ancho entre las tarjetas que haya —`flex:1 1 0` con
   `flex-wrap:nowrap`—, así que da igual que sean cinco o siete: nunca salta de
   línea. El número deja de estar escrito en una clase del HTML.
   ========================================================================== */
.cy-banda-productos{
  display:flex;
  flex-wrap:nowrap;
}
.cy-banda-productos > .col{
  flex:1 1 0;
  min-width:0;                 /* sin esto, un título largo ensancha su columna */
}

/* A partir de aquí las columnas son tan estrechas que el título horizontal no
   cabe: se apoya en la etiqueta girada, que sí sube en vertical, y el título se
   queda para cuando hay sitio. */
@media (max-width:991px){
  .cy-banda-productos .td-service-title{font-size:15px;line-height:1.2;}
  .cy-banda-productos .td-service-number{font-size:28px;}
}
@media (max-width:575px){
  .cy-banda-productos .td-service-number{font-size:22px;}
  /* Por debajo de 576px la columna baja de 115px y el título horizontal ya no
     cabe: se cortaba a media palabra —«Documen e informaci»—. Se retira, porque
     **la etiqueta vertical dice exactamente lo mismo** y ahí sí entra completa.
     No se pierde información, se deja de repetir la que no cabe. */
  .cy-banda-productos .td-service-title{display:none;}
}
/* Que el título parta por palabras en vez de salirse, en los anchos donde sí
   cabe pero va justo. */
.cy-banda-productos .td-service-title{overflow-wrap:break-word;}

/* --------------------------------------------------------------------------
   Banda de productos · la etiqueta girada

   Adina la coloca con `transform:rotate(90deg)` sobre una caja en línea y la
   empuja a su sitio con píxeles a mano: `right:-26px; top:50px` en la base, y
   otros cuatro juegos distintos —`-21`, `-33/61`, `-52/82`, `-36/66`— uno por
   variante de color. Eso aguanta con las etiquetas cortas del demo
   («Business», «Finance») y se sale de la tarjeta con las nuestras: en tablet,
   «Procesos y operaciones» perdía las dos primeras letras.

   Se cambia por texto vertical de verdad, que ocupa lo que mida y no necesita
   compensaciones. `vertical-rl` sin rotar es lo que reproduce la dirección
   original: se lee de arriba abajo.
   -------------------------------------------------------------------------- */
.cy-banda-productos .td-service-cetagory,
.cy-banda-productos .td-service-cetagory-2,
.cy-banda-productos .td-service-cetagory-3,
.cy-banda-productos .td-service-cetagory-4,
.cy-banda-productos .td-service-cetagory-5{
  right:14px;
  top:22px;
  transform:none;
  writing-mode:vertical-rl;
  white-space:nowrap;
  max-height:calc(100% - 44px);   /* si aun así no cabe, se recorta, no se sale */
}

/* --------------------------------------------------------------------------
   Los aplicativos, en la cabecera negra de la ficha

   Se espera SVG blanco con fondo transparente. El alto se fija y el ancho se
   deja libre —`width:auto`— porque los logos no son cuadrados ni tienen todos
   la misma proporción: fijar el ancho los deformaría.

   `max-width` está por si alguien sube un logo muy alargado: preferimos que se
   quede pequeño antes de que empuje la fila fuera de la pantalla.
   -------------------------------------------------------------------------- */
.cy-ficha__apps{
  margin-top:46px;
  padding-top:26px;
  /* Una línea tenue en vez de un bloque aparte: separa sin partir la cabecera. */
  border-top:1px solid rgba(255,255,255,.16);
}

.cy-ficha__apps-rotulo{
  display:block;
  margin-bottom:16px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.55;
}

.cy-ficha__apps-lista{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 34px;
  margin:0;
  padding:0;
  list-style:none;
}

.cy-ficha__app img{
  display:block;
  height:30px;
  width:auto;
  /* `100%` y no un número: lo que hay que evitar es que un logo se salga de la
     fila, no que sea ancho. Estuvo un rato en 190px y eso peleaba con el alto —
     un logotipo de palabra es de 6,84:1, o sea 205px a 30px de alto, así que el
     tope ganaba y lo dejaba en 27,8px—. El resultado era logos de distinto alto
     según su proporción, que es justo lo que fijar el alto venía a evitar. */
  max-width:100%;
}

/* El respaldo cuando todavía no hay archivo de logo: el nombre, con el mismo
   peso visual que tendría el logo, para que la fila no se vea a medio hacer. */
.cy-ficha__app span{
  font-size:19px;
  font-weight:600;
  opacity:.9;
}

@media (max-width:767px){
  .cy-ficha__apps{margin-top:32px; padding-top:20px;}
  .cy-ficha__apps-lista{gap:12px 24px;}
  .cy-ficha__app img{height:24px;}
  .cy-ficha__app span{font-size:16px;}
}

/* ==========================================================================
   Resultados de búsqueda

   Reusan `.cy-ficha` —encabezado negro, cuerpo blanco— para que el buscador no
   parezca otra web. Lo propio de aquí es la lista y el campo de búsqueda.
   ========================================================================== */

/* --- El campo, dentro de la cabecera negra --- */
.cy-buscador{
  display:flex;
  gap:12px;
  margin-top:38px;
  max-width:640px;
}
.cy-buscador__campo{
  flex:1 1 auto;
  min-width:0;
  padding:15px 20px;
  color:#FFFFFF;
  background:rgba(255,255,255,.06);
  /* Un borde tenue y no una caja blanca: sobre el negro de marca, un campo
     blanco sería lo más luminoso de la pantalla y se comería el titular. */
  border:1px solid rgba(255,255,255,.22);
  border-radius:2px;
  font-size:16px;
}
.cy-buscador__campo::placeholder{color:rgba(255,255,255,.45);}
.cy-buscador__campo:focus{
  outline:none;
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.1);
}
.cy-buscador__btn{
  flex:0 0 auto;
  padding:15px 26px;
  color:#0B0B0C;
  background:#FFFFFF;
  border:1px solid #FFFFFF;
  border-radius:2px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s ease;
}
.cy-buscador__btn:hover{opacity:.86;}

/* El cuerpo de la ficha centra su columna a 1180px, que es la medida de lectura
   de un texto largo. Una lista de resultados no es eso: si se centra, queda
   desplazada respecto al titular de la cabecera y se lee como un descuadre. Con
   el modificador ocupa el mismo ancho que la cabecera. */
.cy-ficha--lista .cy-ficha__cuerpo > .container{max-width:none;}

/* --- La lista --- */
/* Es una `<ol>` porque el orden significa algo —relevancia—, no es decoración.
   Se le quita el número, que no aporta al leer. */
.cy-resultados{
  margin:0;
  padding:0;
  list-style:none;
  max-width:1180px;
}
.cy-resultado{border-top:1px solid var(--td-border-1, #e4e6ea);}
.cy-resultado:last-child{border-bottom:1px solid var(--td-border-1, #e4e6ea);}

/* Todo el bloque es el enlace, no solo el titular: un área de clic de una línea
   en una lista de resultados es un blanco difícil, sobre todo en un móvil. */
.cy-resultado__enlace{
  display:block;
  padding:30px 0;
  text-decoration:none;
  color:inherit;
  transition:opacity .2s ease;
}
.cy-resultado__enlace:hover{opacity:.62;}

.cy-resultado__tipo{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-resultado__titulo{
  margin:0;
  font-size:clamp(22px, 2.2vw, 30px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.01em;
}
.cy-resultado__resumen{
  margin:12px 0 0;
  max-width:78ch;
  font-size:16px;
  line-height:1.6;
  color:var(--td-grey-3, #8b9aa4);
}

/* --- Paginación y vacío --- */
.cy-resultados__paginas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:50px;
}
.cy-resultados__paginas .page-numbers{
  display:inline-block;
  min-width:42px;
  padding:10px 14px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--td-border-1, #e4e6ea);
  border-radius:2px;
  font-size:14px;
}
.cy-resultados__paginas .page-numbers.current{
  color:#FFFFFF;
  background:#0B0B0C;
  border-color:#0B0B0C;
}

.cy-resultados__vacio{max-width:62ch;font-size:17px;line-height:1.6;}
.cy-resultados__cta{
  display:inline-block;
  margin-top:18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--td-theme-primary, #20282d);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  text-decoration:none;
}

@media (max-width:575px){
  .cy-buscador{flex-direction:column;}
  .cy-buscador__btn{width:100%;}
  .cy-resultado__enlace{padding:24px 0;}
}

/* ==========================================================================
   Contacto

   Una pantalla partida: negro a la izquierda con lo que se dice, blanco a la
   derecha con el formulario. Partida y no centrada porque un formulario solo en
   medio de una página en blanco no dice nada de quién lo recibe; y de paso la
   mitad negra hace que la cabecera transparente se lea en claro, que es lo que
   ya sabe hacer.

   La reja es de dos columnas iguales y **no** de `50vw` cada una: con `1fr 1fr`
   dentro del ancho disponible, la partición sigue el contenedor del sitio en vez
   de pelearse con la barra de desplazamiento.
   ========================================================================== */
/* **La pantalla de contacto mide exactamente una ventana y no se desplaza.**
   Antes pedía `min-height` y el `main` ya cabía justo —900 px en una ventana de
   900, medido—; lo que sobraba era el pie, 746 px por debajo. El pie se esconde
   con `.cy-sin-pie` y su parte obligatoria vuelve dentro, en `legal-corto`.

   `minmax(0, 1fr)` en la fila de abajo y `overflow:auto` en las dos columnas
   son la válvula: en una ventana muy baja se desplaza **la columna**, no la
   página, que es lo que se pidió. */
.cy-contacto__reja{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto minmax(0, 1fr);
  height:100svh;
}
/* **El pie solo se esconde donde la pantalla es de una sola ventana**, o sea
   en escritorio. Abajo de 992 las dos columnas se apilan, la página se desplaza
   igual y esconder el pie sería perder navegación a cambio de nada. */
@media (min-width:992px){
  .cy-sin-pie footer{display:none;}
}

/* La franja del alto de la cabecera, a todo lo ancho. El logotipo va centrado y
   con la pantalla partida en dos mitades iguales caía justo en la costura: se
   veía partido, con su mitad izquierda negra sobre negro. Medido: la cabecera
   mide 94px a 1440 y 108px a 991, así que 120 la cubre con holgura. */
.cy-contacto__tope{
  grid-column:1 / -1;
  height:120px;
  background:#0B0B0C;
}

/* --- La mitad que habla --- */
/* El relleno va en `vh` con tope: en una ventana de 720 los 160 px fijos que
   había no dejaban sitio al formulario, que mide 506. Con `clamp` la pantalla
   se aprieta sola en las bajas y respira en las altas. */
/* `hidden` y no `auto`: **la marca de agua es lo que hay que recortar aquí.**
   Es un carácter de hasta 380 px posicionado absoluto y sobresaliendo por
   abajo a propósito, así que con `auto` la columna pasaba a tener barra de
   desplazamiento aunque el texto cupiera de sobra. La válvula de seguridad se
   queda solo en la columna del formulario, que es la que puede crecer. */
.cy-contacto__decir{
  position:relative;
  overflow:hidden;
  background:#0B0B0C;
  color:#FFFFFF;
  display:flex;
  flex-direction:column;
  /* El hueco de la cabecera lo pone la franja de arriba, no este relleno. */
  padding:clamp(28px, 5vh, 70px) 6vw clamp(24px, 4vh, 44px);
}
/* Los márgenes automáticos centran el bloque y dejan la línea legal abajo. */
.cy-contacto__decir-dentro{position:relative;z-index:1;max-width:34rem;margin:auto 0;}

.cy-contacto__etiqueta{
  display:block;
  margin-bottom:22px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.cy-contacto__titular{
  margin:0;
  font-size:clamp(34px, 4.6vw, 68px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.02em;
  color:#FFFFFF;
}
.cy-contacto__texto{
  margin-top:28px;
  max-width:46ch;
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.65;
  color:rgba(255,255,255,.76);
}
.cy-contacto__texto > * + *{margin-top:1em;}
.cy-contacto__texto a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.4);text-decoration:none;}
.cy-contacto__texto a:hover{border-bottom-color:#FFFFFF;}

/* La marca de agua. Muy grande, muy tenue y recortada por el propio panel: da
   fondo sin competir con el titular. */
.cy-contacto__marca{
  position:absolute;
  right:-.14em;
  bottom:-.42em;
  z-index:0;
  font-size:clamp(280px, 34vw, 560px);
  font-weight:300;
  line-height:.7;
  color:rgba(255,255,255,.045);
  pointer-events:none;
  user-select:none;
}

/* --- La mitad del formulario --- */
.cy-contacto__form-lado{
  display:flex;
  align-items:center;
  overflow:auto;
  background:#FFFFFF;
  padding:clamp(32px, 6vh, 80px) 6vw clamp(32px, 6vh, 90px);
}
.cy-contacto__form-dentro{width:100%;max-width:34rem;}

/* --- El formulario --- */
.cy-form__campo + .cy-form__campo{margin-top:26px;}

.cy-form__etiqueta{
  display:block;
  margin-bottom:9px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-theme-primary, #20282d);
}
.cy-form__opcional{
  margin-left:8px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-form__requerido{margin-left:4px;color:var(--td-grey-3, #8b9aa4);}

/* Los campos: solo una línea abajo, sin caja. Sobre el blanco, tres cajas con
   borde completo pesan más que el contenido; la línea basta para decir dónde se
   escribe, y al enfocar se engrosa y se oscurece. */
/* `.cy-form` delante **no sobra**: Adina estila `input[type=text]`,
   `input[type=email]` y compañía con altura de 56px, relleno de 26px y borde
   completo. Eso es especificidad (0,1,1) y le gana a una clase suelta (0,1,0),
   así que los campos salían como cajas con el texto desplazado; el `<textarea>`,
   que ahí se estila solo por su etiqueta, sí obedecía. Con el contenedor
   delante son (0,2,0) y manda esta regla. */
.cy-form .cy-form__control{
  display:block;
  width:100%;
  height:auto;
  line-height:1.5;
  padding:12px 2px;
  color:var(--td-theme-primary, #20282d);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--td-border-1, #e4e6ea);
  border-radius:0;
  font-size:17px;
  line-height:1.5;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cy-form .cy-form__control::placeholder{color:var(--td-grey-3, #8b9aa4);}
.cy-form .cy-form__control:focus{
  outline:none;
  border-bottom-color:#0B0B0C;
  /* La segunda línea se pinta con `box-shadow` y no con `border-width`: cambiar
     el grosor del borde movería el campo un píxel al enfocarlo. */
  box-shadow:0 1px 0 0 #0B0B0C;
}
.cy-form .cy-form__area{resize:vertical;min-height:150px;}

/* El error, en el campo y con su mensaje debajo. El color no es lo único que lo
   dice —el mensaje está escrito—, porque el color solo no lo ve todo el mundo. */
.cy-form .cy-form__control.es-error{
  border-bottom-color:#b3261e;
  box-shadow:0 1px 0 0 #b3261e;
}
.cy-form__error{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.45;
  color:#b3261e;
}

/* La trampa para robots: fuera de la pantalla, no `display:none`. Hay robots que
   saltan los campos escondidos con `display`, y este además queda fuera del
   teclado por su `tabindex`. */
.cy-form__trampa{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.cy-form__captcha{margin-top:26px;min-height:65px;}

.cy-form__enviar{
  margin-top:34px;
  padding:17px 34px;
  color:#FFFFFF;
  background:#0B0B0C;
  border:1px solid #0B0B0C;
  border-radius:2px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s ease;
}
.cy-form__enviar:hover{opacity:.84;}
.cy-form__enviar:disabled{cursor:progress;opacity:.6;}

.cy-form__aviso{
  margin:20px 0 0;
  font-size:15px;
  line-height:1.5;
  color:var(--td-theme-primary, #20282d);
}
.cy-form__aviso.es-mal{color:#b3261e;}

/* El estado de éxito sustituye al formulario. */
.cy-form__gracias{max-width:34rem;}
.cy-form__gracias:focus{outline:none;}
.cy-form__gracias-titulo{
  margin:0;
  font-size:clamp(30px, 3.2vw, 46px);
  font-weight:300;
  letter-spacing:-.02em;
}
.cy-form__gracias-texto{
  margin:16px 0 0;
  font-size:18px;
  line-height:1.6;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-form__otro{
  margin-top:28px;
  padding:0 0 3px;
  color:var(--td-theme-primary, #20282d);
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

/* --- Apilado ---
   Por debajo de 992px las dos mitades se apilan. `min-height` deja de ser una
   pantalla: apilado, dos mitades de pantalla completa serían dos pantallas de
   scroll para un formulario de tres campos. */
@media (max-width:991px){
  /* Apiladas, y con el alto que pidan: forzar una ventana aquí aplastaría las
     dos columnas y las dejaría con desplazamiento propio cada una. */
  .cy-contacto__reja{grid-template-columns:1fr;height:auto;min-height:0;}
  /* Apilado, el panel negro ya ocupa el sitio de arriba: la franja sería otro
     bloque negro encima de un bloque negro. */
  .cy-contacto__tope{display:none;}
  .cy-contacto__decir{padding:140px 24px 70px;}
  .cy-contacto__decir-dentro{max-width:none;}
  .cy-contacto__form-lado{padding:60px 24px 90px;}
  .cy-contacto__form-dentro{max-width:none;}
  .cy-contacto__marca{font-size:clamp(200px, 52vw, 380px);}
}
@media (max-width:575px){
  .cy-contacto__decir{padding:120px 20px 56px;}
  .cy-contacto__form-lado{padding:48px 20px 80px;}
  .cy-form__enviar{width:100%;}
}

/* ==========================================================================
   Página de producto

   Secciones a todo lo ancho que alternan negro y blanco. La alternancia no es
   decoración: cada cambio de fondo dice «aquí empieza otra idea», y con seis
   secciones seguidas sobre el mismo fondo la página se lee como un muro.
   ========================================================================== */

/* --- Encabezado --- */
.cy-prod__cabeza{
  position:relative;
  overflow:hidden;
  background:#0B0B0C;
  color:#FFFFFF;
  padding:135px 0 60px;       /* arriba deja sitio a la cabecera, que va encima */
}
.cy-prod__cabeza > .container{position:relative;z-index:2;}

/* --- El fondo del encabezado ---
   Detrás de todo, recortado por el `overflow:hidden` de la sección. El negro de
   la sección sigue debajo, así que mientras el vídeo carga no hay un hueco
   blanco. */
.cy-prod__fondo{
  position:absolute;
  inset:0;
  z-index:0;
}
.cy-prod__fondo-video{
  width:100%;
  height:100%;
  object-fit:cover;              /* llena sin deformar; recorta lo que sobre */
  object-position:center;
  display:block;
}

/* El velo. **Más oscuro a la izquierda**, que es donde cae el texto, y más
   suelto a la derecha para que el vídeo se vea. En el héroe el degradado va de
   arriba abajo porque el texto está centrado; aquí el titular y la entradilla
   ocupan la mitad izquierda, así que el velo va de lado.

   Medido sobre los fotogramas más claros del fondo de Intelligence: el titular
   queda en 13,4:1 y la entradilla en 8,1:1. El mínimo exigible para texto
   grande es 3:1. */
.cy-prod__velo{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.82) 38%,
                           rgba(11,11,12,.55) 72%, rgba(11,11,12,.42) 100%),
    rgba(11,11,12,.22);
}

/* En un teléfono el texto ocupa todo el ancho, así que el velo se pone plano y
   más cerrado: un degradado de lado dejaría la última línea del párrafo sobre la
   parte clara del vídeo. */
@media (max-width:767px){
  .cy-prod__velo{
    background:
      linear-gradient(180deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.8) 70%,
                              rgba(11,11,12,.72) 100%),
      rgba(11,11,12,.3);
  }
}

.cy-prod__rotulo{
  display:block;
  margin-bottom:26px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
/* El logotipo completo del producto. Se le pone alto y no ancho: el lockup mide
   1021×136, así que fijando el alto el ancho sale solo y no se deforma. */
.cy-prod__marca{margin-bottom:40px;}

/* El lockup subido como imagen destacada. Se le fija el **alto** y el ancho va
   libre: el lockup de un producto es más ancho o más estrecho según el largo del
   apellido —«CYNTIA Index» y «CYNTIA Onboarding» no miden lo mismo— y fijar el
   ancho los dejaría a distinto alto, que es justo lo que no debe pasar entre
   páginas de la misma familia.

   `max-width:100%` para que un archivo exportado muy ancho no empuje la página;
   en ese caso baja de alto, que es preferible a un desbordamiento horizontal. */
.cy-prod__lockup{
  display:block;
  height:38px;
  width:auto;
  max-width:100%;
}
@media (max-width:991px){ .cy-prod__lockup{height:30px;} }
@media (max-width:575px){ .cy-prod__lockup{height:25px;} }

.cy-prod__marca .cyntia-logo{
  display:inline-flex;
  align-items:center;
  gap:16px;
}
.cy-prod__marca .cyntia-logo img{height:30px;width:auto;}

/* **La versión en negativo, a la vista.** El logotipo lleva el color dentro del
   archivo, así que hay dos: uno con tinta negra y uno blanco, y el CSS enseña el
   que toque. Esa conmutación estaba escrita solo para la cabecera, así que aquí
   quedaba el negro sobre el negro de marca: se veía el apellido suelto, sin
   símbolo ni «CYNTIA». */
.cy-prod__marca .cy-logo-negativo{opacity:1;}
.cy-prod__marca .cy-logo-tinta{opacity:0;}

/* El apellido, al mismo cuerpo que la palabra del logotipo y en peso 400, que es
   lo que manda el manual de marca. */
.cy-prod__marca .cyntia-logo em{
  font-style:normal;
  font-size:30px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
}

.cy-prod__titular{
  margin:0;
  max-width:22ch;
  font-size:clamp(38px, 6vw, 96px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.03em;
  color:#FFFFFF;
}
.cy-prod__entradilla{
  margin:32px 0 0;
  max-width:56ch;
  font-size:clamp(17px, 1.5vw, 22px);
  line-height:1.6;
  color:rgba(255,255,255,.76);
}
.cy-prod__entradilla--oscura{color:var(--td-grey-3, #8b9aa4);}

/* La marca de agua, como en el héroe y en contacto: el mismo recurso repetido
   es lo que hace que las páginas se reconozcan entre sí. */
/* La «C» de agua sube al z-index del velo: con el fondo puesto, en la capa 0 se
   quedaba **debajo del vídeo** y desaparecía. */
.cy-prod__agua{
  position:absolute;
  right:-.1em;
  bottom:-.4em;
  z-index:1;
  font-size:clamp(300px, 38vw, 620px);
  font-weight:300;
  line-height:.7;
  color:rgba(255,255,255,.04);
  pointer-events:none;
  user-select:none;
}

/* --- Títulos de sección --- */
.cy-prod__titulo{
  margin:0 0 18px;
  max-width:30ch;
  font-size:clamp(30px, 3.6vw, 56px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
}
.cy-prod__titulo--claro{color:#FFFFFF;}

/* --- El contraste: dos diagramas --- */
.cy-prod__contraste{background:#FFFFFF;padding:120px 0;}
.cy-prod__dos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:60px;
  margin-top:64px;
}
.cy-prod__caso{
  padding:40px 40px 44px;
  border:1px solid var(--td-border-1, #e4e6ea);
  border-radius:3px;
}
/* El lado bueno se distingue por el borde, no por un color: la marca es
   monocroma y un verde aquí sería lo único con color de la página. */
.cy-prod__caso.es-bueno{
  border-color:#0B0B0C;
  box-shadow:0 1px 0 0 #0B0B0C;
}
.cy-prod__diag-caja{margin-bottom:34px;}
.cy-prod__caso-rotulo{
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-prod__caso.es-bueno .cy-prod__caso-rotulo{color:var(--td-theme-primary, #20282d);}
.cy-prod__caso-texto{
  margin:0;
  font-size:17px;
  line-height:1.62;
  color:var(--td-theme-primary, #20282d);
}

/* Texto que solo leen los lectores de pantalla. Lo usa el enlace «Ver más» de
   la portada para llevar detrás el nombre del producto: sin él, la página tiene
   siete enlaces llamados igual y en una lista de enlaces no se distinguen.

   Está aquí y no se usa la de Bootstrap a propósito: la hoja de Bootstrap se
   carga por la plantilla de Adina y no es del tema, así que el día que se
   adelgace la lista de assets esto se caería sin ruido. */
.cy-oculto{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- El diagrama --- */
.cy-diag{display:block;width:100%;height:auto;color:var(--td-theme-primary, #20282d);}
.cy-diag__caja rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55;}
.cy-diag__linea line{stroke:currentColor;stroke-width:1.2;opacity:.5;}
/* Los tramos de espera van de puntos largos: se leen como tiempo, no como
   camino. */
.cy-diag__linea--espera line{stroke-dasharray:5 5;opacity:.42;}
.cy-diag__linea--viva line{opacity:.9;}
.cy-diag__decision path{fill:none;stroke:currentColor;stroke-width:1.6;}
.cy-diag__punto circle{fill:currentColor;}
/* La bandeja de fuera: caja de puntos, porque no es parte del sistema. */
.cy-diag__fuera rect{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:4 4;opacity:.5;}
.cy-diag__pausa rect{fill:currentColor;opacity:.55;}

/* Lo que añade el contraste del modelo. El marco de puntos hace doble papel: en
   el lado malo encierra al modelo suelto —«esto no lo sujeta nada»— y en el
   bueno es lo que lo sujeta. Es el mismo trazo diciendo lo mismo: lo de puntos
   no es del sistema. */
.cy-diag__marco rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-dasharray:6 5;
  opacity:.45;
}
/* La caja del modelo enmarcado va a tinta entera: es el único elemento firme del
   dibujo, y es justo lo que el producto añade. */
.cy-diag__caja--firme rect{opacity:1;stroke-width:1.6;}
/* Las reglas, como renglones de una lista escrita. */
.cy-diag__regla line{stroke:currentColor;stroke-width:1.6;opacity:.4;stroke-linecap:round;}
/* Los renglones de dentro de las tres respuestas distintas. */
.cy-diag__barra rect{fill:currentColor;opacity:.42;}
/* Las tres salidas del modelo suelto: de puntos, porque ninguna está garantizada. */
.cy-diag__linea--suelta line{stroke-dasharray:4 4;opacity:.4;}

/* Los mismos trazos, en curva. El contraste del molde necesita una flecha que
   vuelva del final al principio, y una vuelta no se dibuja con segmentos: los
   selectores de arriba solo alcanzaban a `line`, así que un `path` salía negro y
   relleno. `fill:none` va aquí y no en el atributo por la misma razón que el
   resto del trazo: el dibujo no decide su tinta, la hereda. */
.cy-diag__linea path{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.5;}
.cy-diag__linea--suelta path{stroke-dasharray:4 4;opacity:.4;}
.cy-diag__aviso path{fill:currentColor;opacity:.85;}

/* La cifra grande del contraste del avance. Al tamaño del `viewBox`, así que
   crece con el diagrama como los rótulos. */
.cy-diag__cifra text{
  fill:currentColor;
  font-size:23px;
  font-weight:300;
  letter-spacing:-.02em;
}
/* Las celdas de las que sale la cifra: vacías de contorno, hechas rellenas. Se
   pueden contar, y la cuenta da el porcentaje de arriba. Las mismas celdas
   sirven de campos de un formulario en el contraste de la captura. */
.cy-diag__celda rect{fill:none;stroke:currentColor;stroke-width:1;opacity:.35;}
.cy-diag__celda rect.es-hecha{fill:currentColor;opacity:.5;}
/* La marca del campo que hay que mirar. A tinta casi entera: es lo único del
   dibujo que pide atención, y tiene que pedirla. */
.cy-diag__aviso rect{fill:currentColor;opacity:.85;}
/* La lupa: un círculo y su mango. */
.cy-diag__lupa circle,
.cy-diag__lupa line{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;stroke-linecap:round;}

/* Los rótulos. El tamaño va en unidades del `viewBox`, así que crece con el
   diagrama: a 8 unidades sobre un lienzo de 300 se ve a unos 23px en escritorio
   y a 15 en un teléfono, que es donde tenía que quedar. */
.cy-diag__texto text{
  fill:currentColor;
  font-size:8px;
  font-weight:500;
  letter-spacing:.02em;
}
.cy-diag__texto--chico text{font-size:6.6px;opacity:.6;}

/* El trazo del lado bueno se dibuja al entrar en pantalla. Es la única animación
   de la página, y va en el diagrama que explica el producto: ahí sí aporta. */
.cy-prod__caso.es-bueno .cy-diag__linea--viva line{
  stroke-dasharray:200;
  stroke-dashoffset:200;
}
[data-cy-revelar].es-visible .cy-prod__caso.es-bueno .cy-diag__linea--viva line{
  animation:cy-diag-trazo 1.1s ease forwards;
}
[data-cy-revelar].es-visible .cy-prod__caso.es-bueno .cy-diag__linea--viva line:nth-child(2){animation-delay:.18s;}
[data-cy-revelar].es-visible .cy-prod__caso.es-bueno .cy-diag__linea--viva line:nth-child(3){animation-delay:.36s;}
[data-cy-revelar].es-visible .cy-prod__caso.es-bueno .cy-diag__linea--viva line:nth-child(4){animation-delay:.54s;}
@keyframes cy-diag-trazo{to{stroke-dashoffset:0;}}

/* --- El vídeo, enmarcado como una pantalla --- */
.cy-prod__video{background:#0B0B0C;padding:120px 0;}
.cy-pantalla{
  margin:56px 0 0;
  border-radius:6px;
  overflow:hidden;
  background:#141416;
  border:1px solid rgba(255,255,255,.12);
  /* Una sombra ancha y muy suave: separa la pantalla del fondo sin que se vea
     la sombra en sí. */
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.cy-pantalla__barra{
  display:flex;
  align-items:center;
  gap:7px;
  padding:13px 16px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cy-pantalla__barra span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
}
.cy-pantalla__medio{display:block;width:100%;height:auto;}
.cy-pantalla__pie{
  margin:0;
  padding:20px 22px 22px;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.62);
  border-top:1px solid rgba(255,255,255,.08);
}

/* --- Las piezas --- */
/* Gris muy claro y no blanco: al pasar el vídeo delante del contraste, esta
   sección quedó justo detrás de una blanca, y dos blancos seguidos se leen
   como un solo bloque. De paso, las celdas blancas de la retícula resaltan
   sobre el gris en vez de desaparecer sobre el blanco. */
.cy-prod__piezas{background:#f4f5f6;padding:120px 0;}
.cy-piezas{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1px;                        /* el hueco lo hace de línea */
  margin:64px 0 0;
  padding:0;
  list-style:none;
}
/* Retícula con líneas de un píxel. La línea la pone **cada tarjeta**, con una
   sombra de un píxel alrededor: en el hueco de 1px se encuentran las sombras de
   las dos vecinas y se lee como una sola raya, y en el borde de fuera la ponen
   las tarjetas de la orilla.

   Antes lo hacía el fondo del contenedor asomando por los huecos, que es más
   corto de escribir pero pinta **también las celdas vacías**: con siete módulos
   en una fila de seis, la séptima dejaba un rectángulo gris del ancho de cinco
   tarjetas. Con la sombra, lo que no es tarjeta no se pinta. */
.cy-pieza{
  background:#FFFFFF;
  padding:30px 26px 34px;
  box-shadow:0 0 0 1px var(--td-border-1, #e4e6ea);
}
.cy-pieza__num{
  display:block;
  margin-bottom:16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-pieza__nombre{
  margin:0 0 10px;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.01em;
}
.cy-pieza__texto{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--td-grey-3, #8b9aa4);
}

/* --- Dónde ya funciona --- */
.cy-prod__casos{background:#0B0B0C;padding:120px 0;}
.cy-prod__casos-lista{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:26px;
  margin:56px 0 0;
  padding:0;
  list-style:none;
}
.cy-prod__caso-item a{
  display:block;
  text-decoration:none;
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;
  overflow:hidden;
  transition:border-color .22s ease;
}
.cy-prod__caso-item a:hover{border-color:rgba(255,255,255,.42);}
.cy-prod__caso-foto{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.cy-prod__caso-foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.cy-prod__caso-item a:hover .cy-prod__caso-foto img{transform:scale(1.04);}
.cy-prod__caso-eti{
  display:block;
  padding:22px 24px 0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.cy-prod__caso-tit{
  display:block;
  padding:10px 24px 26px;
  font-size:20px;
  font-weight:400;
  line-height:1.3;
}

/* --- Cierre --- */
.cy-prod__cierre{background:#FFFFFF;padding:120px 0 130px;text-align:center;}
.cy-prod__cierre-titulo{
  margin:0 auto;
  max-width:24ch;
  font-size:clamp(32px, 4.4vw, 64px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.02em;
}
.cy-prod__cierre-texto{
  margin:24px auto 0;
  max-width:58ch;
  font-size:18px;
  line-height:1.6;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-prod__cta{
  display:inline-block;
  margin-top:38px;
  padding:17px 38px;
  color:#FFFFFF;
  background:#0B0B0C;
  border:1px solid #0B0B0C;
  border-radius:2px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity .2s ease;
}
.cy-prod__cta:hover{opacity:.84;color:#FFFFFF;}

/* --- Aparecer al entrar en pantalla ---
   Un desplazamiento corto y una opacidad. Nada de rebotes ni de escalas: la
   página ya es contrastada, y un movimiento largo en cada sección la vuelve
   cansada de leer. */
[data-cy-revelar]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-cy-revelar].es-visible{opacity:1;transform:none;}

/* Sin JavaScript nunca llegaría la clase y la página quedaría invisible: por eso
   el propio script marca el documento antes de observar nada, y hasta entonces
   todo se ve. */
html:not(.cy-con-revelar) [data-cy-revelar]{opacity:1;transform:none;transition:none;}

@media (prefers-reduced-motion: reduce){
  [data-cy-revelar]{opacity:1;transform:none;transition:none;}
  .cy-prod__caso.es-bueno .cy-diag__linea--viva line{stroke-dasharray:none;stroke-dashoffset:0;}
  [data-cy-revelar].es-visible .cy-prod__caso.es-bueno .cy-diag__linea--viva line{animation:none;}
  .cy-prod__caso-foto img,
  .cy-prod__caso-item a:hover .cy-prod__caso-foto img{transition:none;transform:none;}
}

/* --- Apilado --- */
@media (max-width:991px){
  .cy-prod__cabeza{padding:150px 0 80px;}
  .cy-prod__contraste,
  .cy-prod__video,
  .cy-prod__piezas,
  .cy-prod__casos{padding:80px 0;}
  .cy-prod__cierre{padding:80px 0 90px;}
  .cy-prod__dos{grid-template-columns:1fr;gap:24px;margin-top:44px;}
  .cy-prod__caso{padding:30px 26px 34px;}
  .cy-prod__marca .cyntia-logo img,
  .cy-prod__marca .cyntia-logo em{height:26px;font-size:26px;}
}
@media (max-width:575px){
  .cy-prod__cabeza{padding:130px 0 64px;}
  .cy-pantalla{margin-top:36px;}
  .cy-piezas{grid-template-columns:1fr;margin-top:44px;}
  .cy-prod__cta{width:100%;text-align:center;}
}

/* ==========================================================================
   Cómo funciona un BPM · diagrama animado

   El recorrido de cada testigo se declara con `offset-path`, así que el trazado
   vive en el SVG y aquí solo se mueve el punto por él. La alternativa —animar
   `cx` y `cy` a mano— obligaría a repetir las coordenadas del dibujo en la hoja
   de estilos, y cualquier cambio en el diagrama habría que hacerlo dos veces.

   Los tiempos: 5,5 s la vuelta del testigo rápido. Los retardos de los pasos van
   en el `style` de cada uno dentro del SVG, porque dependen de dónde está cada
   paso en el recorrido.
   ========================================================================== */
.cy-bpm{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* Los caminos. Finos y tenues: son la vía, no el contenido. */
.cy-bpm__via line,
.cy-bpm__via path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  opacity:.32;
}

/* Los pasos. En reposo van a media tinta y se encienden cuando el caso llega. */
.cy-bpm__nodo rect,
.cy-bpm__nodo path{
  fill:#FFFFFF;
  stroke:currentColor;
  stroke-width:1.3;
}
.cy-bpm__nodo text{
  fill:currentColor;
  font-size:13px;
  font-weight:500;
}
.cy-bpm__nodo{opacity:.42;}

/* El nodo de la IA y el de la persona se distinguen por el trazo, no por color:
   la marca es monocroma. El de la IA va entero, el de la persona de puntos —es
   el que espera a alguien. */
.cy-bpm__nodo--ia rect{stroke-width:1.8;}
.cy-bpm__nodo--gente rect{stroke-dasharray:5 4;}

/* Los testigos: el caso que recorre el flujo.

   **Escondidos por omisión.** Su posición la da entera `offset-path`, así que en
   un navegador que no la soporte los círculos se quedarían en su posición de
   partida —el 0,0 del lienzo, la esquina de arriba a la izquierda— y se verían
   dos puntos sueltos fuera del diagrama. Escondidos, el diagrama queda estático y
   correcto. La leyenda del caso se esconde con ellos: nombrar algo que no se ve
   es peor que no nombrarlo. */
.cy-bpm__caso,
.cy-cog__caso,
.cy-kan__viaja,
.cy-ana__dato,
.cy-prod__bpm-pie li.es-caso{display:none;}

@supports (offset-path: path("M0,0 H1")){
  .cy-bpm__caso,
  .cy-cog__caso,
  .cy-kan__viaja,
  .cy-ana__dato{display:block;}
  .cy-prod__bpm-pie li.es-caso{display:flex;}
}

.cy-bpm__caso{
  fill:currentColor;
  offset-rotate:0deg;          /* que no gire: es un punto, y girar no diría nada */
  offset-distance:0%;
  opacity:0;                   /* la sube la animación; ver el marco de análisis */
}
/* El trazado **arranca en el borde derecho de la primera caja** (x=110) y no en
   su borde izquierdo (x=10). Con x=10 el punto quieto se comía dos píxeles de la
   «E» de «Entra un caso», que llena la caja casi entera: se midió, no se vio. */
.cy-bpm__caso--rapido{
  offset-path:path("M110,140 H395 V80 H585 V140 H701");
}
.cy-bpm__caso--lento{
  offset-path:path("M110,140 H395 V200 H585 V140 H701");
  --op:.34;                    /* más tenue: es el caso de excepción */
  r:5;
}

@media (prefers-reduced-motion: no-preference){
  /* El recorrido, con esperas. Las mesetas de los fotogramas clave son lo que
     hace que el caso **se detenga** en cada paso en vez de deslizarse de un
     tirón: un BPM no es una cinta transportadora, es una sucesión de pasos que
     tardan algo. */
  .cy-bpm__caso--rapido{animation:cy-bpm-va 5.5s linear infinite;}
  /* El lento tarde casi el doble y arranca después: se cruzan, y eso es
     precisamente lo que se quiere decir. */
  .cy-bpm__caso--lento{animation:cy-bpm-va-lento 9s linear infinite 1.2s;}

  .cy-bpm__nodo{animation:cy-bpm-pulso 5.5s linear infinite var(--t, 0s);}
  /* El de la persona sigue el reloj del testigo lento. */
  .cy-bpm__nodo--gente{animation:cy-bpm-pulso 9s linear infinite var(--t, 0s);}
}

/* **El caso espera en el hueco de antes de cada paso, no dentro de él.** Las
   paradas viejas eran los centros de las cajas —25%, 66%, 94%— y dejaban el
   punto casi un segundo encima de «Paso automático», «Intelligence» y
   «Cerrado». Las de ahora caen en el aire que hay entre una caja y la siguiente,
   sobre el trazado de 711 unidades:

     5,6%  → x=150, en el hueco de antes de «Paso automático»
     31,6% → x=335, el centro del rombo. Ahí sí, porque su rótulo va **debajo**
             del rombo y no dentro, así que el punto no tapa nada.
     52%   → x=420, en el hueco de antes de «Intelligence» / «Una persona»
     85,8% → x=600, en el hueco de antes de «Cerrado»
     100%  → x=701, dentro de «Cerrado» pero pasado su rótulo: es la llegada.

   Y los momentos se repartieron según **cuánto hay que recorrer** entre parada y
   parada, no a ojo: con los tiempos viejos el primer tramo se hacía cinco veces
   más lento que el segundo. Los retardos de los pasos, que van en el `style` de
   cada uno dentro del SVG, se movieron con ellos. */
@keyframes cy-bpm-va{
  0%   {offset-distance:0%;    opacity:0;}
  2%   {offset-distance:0%;    opacity:var(--op, 1);}
  4%   {offset-distance:5.6%;}
  16%  {offset-distance:5.6%;}
  30%  {offset-distance:31.6%;}
  42%  {offset-distance:31.6%;}
  53%  {offset-distance:52%;}
  65%  {offset-distance:52%;}
  84%  {offset-distance:85.8%;}
  92%  {offset-distance:100%;}
  97%  {offset-distance:100%;  opacity:var(--op, 1);}
  100% {offset-distance:100%;  opacity:0;}
}
@keyframes cy-bpm-va-lento{
  0%   {offset-distance:0%;    opacity:0;}
  2%   {offset-distance:0%;    opacity:var(--op, 1);}
  3%   {offset-distance:5.6%;}
  11%  {offset-distance:5.6%;}
  20%  {offset-distance:31.6%;}
  27%  {offset-distance:31.6%;}
  36%  {offset-distance:52%;}
  /* La espera larga: aquí el caso está en la bandeja de una persona. */
  70%  {offset-distance:52%;}
  88%  {offset-distance:85.8%;}
  95%  {offset-distance:100%;}
  98%  {offset-distance:100%;  opacity:var(--op, 1);}
  100% {offset-distance:100%;  opacity:0;}
}
@keyframes cy-bpm-pulso{
  0%,  100% {opacity:.42;}
  3%        {opacity:1;}
  11%       {opacity:1;}
  18%       {opacity:.42;}
}

/* --- La sección --- */
/* Fondo gris muy claro y no blanco: la sección que viene después también es
   blanca, y dos blancos seguidos se leen como un solo bloque largo. */
.cy-prod__bpm{background:#f4f5f6;padding:110px 0;}
.cy-prod__bpm-caja{
  margin-top:56px;
  padding:44px 40px;
  background:#FFFFFF;
  border:1px solid var(--td-border-1, #e4e6ea);
  border-radius:3px;
}
.cy-prod__bpm-pie{
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  margin:34px 0 0;
  padding:0;
  list-style:none;
}
.cy-prod__bpm-pie li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--td-grey-3, #8b9aa4);
}
/* La leyenda repite el trazo de cada nodo, no un color: así se reconoce en el
   diagrama sin tener que adivinar. */
.cy-prod__bpm-pie i{
  width:26px;
  height:14px;
  border:1.4px solid var(--td-theme-primary, #20282d);
  border-radius:2px;
  flex:0 0 auto;
}
.cy-prod__bpm-pie li.es-gente i{border-style:dashed;}
.cy-prod__bpm-pie li.es-caso i{
  width:12px;
  height:12px;
  border:0;
  border-radius:50%;
  background:var(--td-theme-primary, #20282d);
}
/* Cuando lo que se mueve es una tarjeta y no un punto, la marca de la leyenda
   tiene que ser una tarjeta rellena: una bolita no se reconoce en el dibujo. */
.cy-prod__bpm-pie li.es-caso.es-lleno i{
  width:26px;
  height:14px;
  border-radius:2px;
}
/* Marca rellena para lo que **no** es un testigo con recorrido —una barra que
   crece, por ejemplo—: lleva el relleno pero no se esconde con los testigos. */
.cy-prod__bpm-pie li.es-solido i{
  border:0;
  background:var(--td-theme-primary, #20282d);
}
/* Marca de documento: alta y estrecha, como la marquita de los renglones de
   resultado. Existe porque **cada fila de la leyenda tiene que corresponder a
   algo que está en el dibujo**: la del embudo prometía una marca de puntos y en
   ese diagrama no hay nada de puntos. */
.cy-prod__bpm-pie li.es-doc i{
  width:12px;
  height:15px;
  border:0;
  border-radius:1px;
  background:var(--td-theme-primary, #20282d);
}

@media (max-width:991px){
  .cy-prod__bpm{padding:70px 0;}
  .cy-prod__bpm-caja{margin-top:40px;padding:26px 20px;}
}

/* En un teléfono el diagrama **se desplaza a lo ancho** en vez de encogerse.
   El texto va en unidades del `viewBox`, así que al escalar el lienzo de 720 a
   350px los rótulos quedaban a 6px: ordenado e ilegible. Con un ancho mínimo se
   leen a 11px y se recorre con el dedo, que es lo que ya se hace con las tablas
   anchas en la ficha. */
@media (max-width:767px){
  .cy-prod__bpm-caja{
    overflow-x:auto;
    /* El indicador de que hay más a la derecha: un degradado en el borde. Sin
       algo así, nadie sabe que se puede desplazar. */
    background:
      linear-gradient(to right, #FFFFFF 70%, rgba(255,255,255,0)) left center / 40px 100% no-repeat,
      linear-gradient(to left,  #FFFFFF 70%, rgba(255,255,255,0)) right center / 40px 100% no-repeat,
      #FFFFFF;
    background-attachment:local, local, scroll;
  }
  .cy-bpm{min-width:620px;}
  .cy-cog{min-width:620px;}
  .cy-prod__bpm-pie{min-width:620px;}
}

/* ==========================================================================
   Cómo funciona un proceso cognitivo · diagrama animado

   El hermano del diagrama del BPM, y a propósito **no** se parece: ahí lo que
   avanza es un caso por unos pasos, aquí lo que entra es un archivo o un audio y
   lo que hay que ver es que el modelo trabaja **dentro** de un marco de reglas.
   De ahí las dos decisiones de dibujo que sostienen todo lo demás: el marco se
   dibuja alrededor —no al lado— y va de puntos, que en este sitio ya significa
   «esto no es una caja más, es lo que contiene».

   Los tiempos: 6 s la vuelta de cada entrada, con dos entradas en el aire a la
   vez —la segunda a media vuelta—. Por eso el pulso de los nodos late en 3 s, la
   mitad: así cada nodo se enciende **las dos veces** que le llega algo, con un
   solo retardo. Los retardos van en el `style` de cada nodo dentro del SVG,
   porque dependen de dónde está cada uno en el recorrido.
   ========================================================================== */
.cy-cog{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* Las vías. La de la llamada va de puntos: no es el camino del dato, es alguien
   pidiendo que el proceso corra. */
.cy-cog__via line{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.32;}
.cy-cog__via--llamada line{stroke-dasharray:3 4;opacity:.42;}

/* El marco. Encierra al modelo y a las reglas, y es lo único que el producto
   añade sobre «tener un modelo». */
.cy-cog__marco rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-dasharray:6 5;
  opacity:.45;
}
/* Los dos sitios desde donde se llama al proceso. Pastilla y no caja: no son
   pasos del dibujo, son de fuera. */
.cy-cog__llama rect{
  fill:#FFFFFF;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-dasharray:4 4;
  opacity:.5;
}

/* Los nodos. En reposo a media tinta, se encienden cuando la entrada llega. */
.cy-cog__nodo rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.3;}
.cy-cog__nodo text{fill:currentColor;font-size:13px;font-weight:500;}
.cy-cog__nodo{opacity:.42;}
/* El modelo, con el trazo más grueso: es el nodo del que habla la sección. Las
   entradas, de puntos: cualquiera de las tres, no las tres. */
.cy-cog__nodo--modelo rect{stroke-width:1.8;}
.cy-cog__nodo--entrada rect{stroke-dasharray:5 4;}

.cy-cog__texto text{fill:currentColor;font-size:13px;font-weight:500;}
.cy-cog__texto--chico text{font-size:11px;opacity:.5;}
.cy-cog__texto--pie text{font-size:11px;opacity:.5;}
/* El rótulo del marco, en versalitas y tenue: nombra una región del dibujo, no
   es un título. */
.cy-cog__texto--marco text{
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.42;
}

/* Los testigos. Escondidos por omisión —la regla está arriba, con los del BPM—
   porque su posición la da entera `offset-path`: sin soporte se quedarían en el
   0,0 del lienzo, dos puntos sueltos fuera del dibujo. */
.cy-cog__caso{
  fill:currentColor;
  offset-rotate:0deg;
  offset-distance:0%;
  opacity:0;                   /* la sube la animación; ver el marco de análisis */
}
.cy-cog__caso--a{offset-path:path("M50,69 H126 V122 H700");}
.cy-cog__caso--b{
  offset-path:path("M50,175 H126 V122 H700");
  --op:.34;                    /* más tenue: es la segunda entrada */
  r:5;
}

@media (prefers-reduced-motion: no-preference){
  /* Las mesetas de los fotogramas clave son lo que hace que la entrada **se
     detenga** en cada nodo en vez de deslizarse de un tirón. */
  .cy-cog__caso{animation:cy-cog-va 6s linear infinite;}
  /* La segunda entrada, a media vuelta. Va después para que el atajo de arriba
     no le borre el retardo. */
  .cy-cog__caso--b{animation-delay:3s;}

  .cy-cog__nodo{animation:cy-cog-pulso 3s linear infinite var(--t, 0s);}
  /* Las entradas laten en la vuelta entera: a cada una le toca una sola vez. */
  .cy-cog__nodo--entrada{animation:cy-cog-pulso 6s linear infinite var(--t, 0s);}
}

/* La entrada **espera en la puerta** de cada nodo, no en su centro: parada en el
   centro, el punto se queda casi un segundo encima del rótulo y se lo come. En
   la puerta se lee mejor lo que en realidad pasa —algo esperando a que ese paso
   lo tome— y el rótulo se sigue leyendo. Los porcentajes son la distancia del
   borde izquierdo de cada nodo sobre el trazado de 703 unidades. */
@keyframes cy-cog-va{
  0%   {offset-distance:0%; opacity:0;}
  3%   {offset-distance:0%; opacity:var(--op, 1);}
  14%  {offset-distance:24.6%;}
  24%  {offset-distance:24.6%;}
  34%  {offset-distance:42.8%;}
  /* La espera larga es la del modelo: es donde de verdad se tarda, y estirarla
     ahí es lo único que el dibujo puede decir del coste. */
  50%  {offset-distance:42.8%;}
  60%  {offset-distance:61.9%;}
  70%  {offset-distance:61.9%;}
  84%  {offset-distance:85.2%;}
  92%  {offset-distance:100%;}
  96%  {offset-distance:100%; opacity:var(--op, 1);}
  100% {offset-distance:100%; opacity:0;}
}
@keyframes cy-cog-pulso{
  0%,  100% {opacity:.42;}
  4%        {opacity:1;}
  20%       {opacity:1;}
  30%       {opacity:.42;}
}

/* ==========================================================================
   Los canales · un agente al otro lado de todos

   Sobre negro, entre el contraste blanco y las piezas grises: es la sección más
   sencilla de la página —un embudo— y el fondo oscuro es lo que le da el peso
   que el dibujo por sí solo no tiene.

   El diagrama lo calcula el PHP a partir de cuántos canales haya, así que aquí
   no hay ni una coordenada: solo el trazo y el turno.
   ========================================================================== */
.cy-prod__canales{background:#0B0B0C;padding:120px 0;}
.cy-prod__can-caja{
  margin-top:56px;
  padding:44px 40px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;
}
.cy-prod__can-nota{
  margin:26px 0 0;
  max-width:70ch;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.5);
}

.cy-can{display:block;width:100%;height:auto;color:#FFFFFF;}
.cy-can__via line{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.3;}
/* Lo que el agente usa cuelga de una línea de puntos: es una dependencia, no un
   camino por el que pase la conversación. */
.cy-can__via--fina{opacity:.22;stroke-dasharray:4 4;}

.cy-can__nodo rect{fill:none;stroke:currentColor;stroke-width:1.2;}
.cy-can__nodo text{fill:currentColor;font-size:15px;}
.cy-can__nodo{opacity:.45;}
.cy-can__nodo--usa rect{stroke-dasharray:5 4;}
.cy-can__nodo--usa text{font-size:11px;}

/* El agente en negativo: es el único nodo relleno de la página, y tiene que
   leerse como el sitio donde pasa algo y no como una caja más grande. */
.cy-can__agente rect{fill:#FFFFFF;}
.cy-can__agente text{fill:#0B0B0C;font-size:17px;font-weight:600;}

@media (prefers-reduced-motion: no-preference){
  /* Los canales se encienden por turnos, uno por vuelta. Encendidos todos a la
     vez se leería «hacen falta los seis», y es lo contrario de lo que dice la
     sección. El reloj lo pone el SVG en `--can-vuelta`, que sabe cuántos son. */
  .cy-can__nodo{animation:cy-can-turno var(--can-vuelta, 6s) linear infinite var(--t, 0s);}
  /* Lo que el agente usa no hace turno: está siempre. */
  .cy-can__nodo--usa{animation:none;}
}
@keyframes cy-can-turno{
  0%,  100% {opacity:.45;}
  6%        {opacity:1;}
  18%       {opacity:1;}
  26%       {opacity:.45;}
}

@media (max-width:991px){
  .cy-prod__canales{padding:70px 0;}
  .cy-prod__can-caja{margin-top:40px;padding:26px 20px;}
}

/* En un teléfono se desplaza a lo ancho, igual que el otro diagrama: los
   rótulos van en unidades del `viewBox` y encogerlo los deja ilegibles. El
   degradado de los bordes es lo que avisa de que hay más. */
@media (max-width:767px){
  .cy-prod__can-caja{
    overflow-x:auto;
    background:
      linear-gradient(to right, #121214 70%, rgba(18,18,20,0)) left center / 40px 100% no-repeat,
      linear-gradient(to left,  #121214 70%, rgba(18,18,20,0)) right center / 40px 100% no-repeat,
      rgba(255,255,255,.03);
    background-attachment:local, local, scroll;
  }
  .cy-can{min-width:620px;}
}

/* ==========================================================================
   El tablero kanban · diagrama animado

   El tercero de la familia, y el que menos se parece a los otros dos: aquí no
   viaja un punto, viaja **una tarjeta entera**. `offset-path` sobre un grupo
   funciona igual que sobre el círculo de los otros porque `offset-rotate:0deg`
   deja la transformación en una traslación pura, y una traslación no depende del
   origen: el contenido del grupo se dibuja alrededor del 0,0 y aterriza centrado
   en el trazado.

   Los tiempos: 7,5 s la vuelta. La parada larga es la de «en progreso», que es
   donde de verdad se está el rato.
   ========================================================================== */
.cy-kan{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* La columna. Fondo apenas gris y borde de puntos: es un contenedor, y tiene que
   quedar por detrás de sus tarjetas sin competir con ellas. */
.cy-kan__columna rect{
  fill:rgba(11,11,12,.025);
  stroke:currentColor;
  stroke-width:1;
  stroke-dasharray:5 4;
  opacity:.45;
}

/* La cabecera de la columna. En reposo a media tinta y se enciende cuando la
   tarjeta entra: es lo que ata la animación al tablero. */
.cy-kan__cabeza{opacity:.5;}
.cy-kan__cabeza text{
  fill:currentColor;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}
/* Los tres estados, por relleno y no por color. En el producto son un punto
   gris, uno azul y uno verde; aquí la marca es monocroma, y vacío, medio y lleno
   dicen exactamente lo mismo. */
.cy-kan__pinta{fill:none;stroke:currentColor;stroke-width:1.6;}
.cy-kan__pinta--1{fill:currentColor;fill-opacity:.45;}
.cy-kan__pinta--2{fill:currentColor;fill-opacity:1;}

/* Las tarjetas quietas. */
.cy-kan__tarjeta rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1;opacity:.5;}

/* La que se mueve: a tinta entera y con el trazo más grueso. Es la única cosa del
   dibujo que hay que seguir con la vista. */
.cy-kan__viaja rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.6;}
.cy-kan__viaja{
  offset-path:path("M116,168 H604");
  offset-rotate:0deg;
  offset-distance:0%;
}

/* Los renglones de dentro de las tarjetas. El selector lleva la clase del
   renglón **y** la de la tarjeta porque `.cy-kan__tarjeta rect` ya pinta todos
   los rectángulos de dentro: con la clase sola perdería, y resolverlo con
   `!important` sería tapar el problema en vez de nombrarlo. */
.cy-kan__tarjeta rect.cy-kan__renglon,
.cy-kan__viaja rect.cy-kan__renglon{stroke:none;fill:currentColor;opacity:.32;}
.cy-kan__viaja rect.cy-kan__renglon{opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  .cy-kan__viaja{animation:cy-kan-va 7.5s linear infinite;}
  .cy-kan__cabeza{animation:cy-kan-pulso 7.5s linear infinite var(--t, 0s);}
}

/* **La tarjeta se desvanece al final y aparece al principio.** Los otros
   diagramas animados reinician de golpe y en un punto de 12px de diámetro no se
   nota; en una tarjeta de 196 unidades, el salto de la última columna a la
   primera se lee como un error del dibujo. */
@keyframes cy-kan-va{
  0%   {offset-distance:0%;   opacity:0;}
  4%   {offset-distance:0%;   opacity:1;}
  14%  {offset-distance:0%;   opacity:1;}
  26%  {offset-distance:50%;  opacity:1;}
  54%  {offset-distance:50%;  opacity:1;}
  66%  {offset-distance:100%; opacity:1;}
  94%  {offset-distance:100%; opacity:1;}
  99%  {offset-distance:100%; opacity:0;}
  100% {offset-distance:100%; opacity:0;}
}
@keyframes cy-kan-pulso{
  0%,  100% {opacity:.5;}
  2%        {opacity:1;}
  14%       {opacity:1;}
  20%       {opacity:.5;}
}

@media (max-width:767px){
  .cy-kan{min-width:660px;}
}

/* ==========================================================================
   El marco de análisis · diagrama animado

   El cuarto de la familia. Lo que lo distingue de los otros tres: **los tres
   recorridos no miden lo mismo**. El del carril del medio va recto y los de
   arriba y abajo hacen un codo, así que el mismo punto del dibujo —la puerta del
   modelo, digamos— cae en un porcentaje distinto en cada uno.

   La solución es que los fotogramas usen variables y **cada carril traiga sus
   porcentajes desde el SVG**. Con un juego de fotogramas por carril habría que
   repetir tres veces la misma coreografía, y cualquier cambio en el dibujo
   habría que hacerlo tres veces.

   Los tiempos: 7 s la vuelta de cada carril, escalonados a un tercio. La meseta
   larga está **dentro** de la caja del modelo, que es donde se tarda.
   ========================================================================== */
.cy-ana{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

.cy-ana__via line{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.32;}

/* El marco. Es el producto, así que es lo único que envuelve a lo demás. */
.cy-ana__marco rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-dasharray:6 5;
  opacity:.45;
}

.cy-ana__nodo rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.3;}
.cy-ana__nodo text{fill:currentColor;font-size:13px;font-weight:500;}
.cy-ana__nodo{opacity:.42;}
/* Los dos rectángulos de detrás de la fuente: dicen «muchos datos» sin escribir
   nada. Sin relleno propio, para que no tapen al de delante. */
.cy-ana__pila{fill:#FFFFFF;opacity:.5;}
/* El modelo a medida y el de IA, con el trazo más grueso: son los dos que no
   trae ninguna herramienta de tablero, y son de lo que habla la sección. */
.cy-ana__nodo--propio rect,
.cy-ana__nodo--ia rect{stroke-width:1.8;}
.cy-ana__nodo--salida rect{stroke-width:1.6;}

.cy-ana__texto text{fill:currentColor;font-size:13px;font-weight:500;}
.cy-ana__texto--pie text{font-size:11px;opacity:.5;}
.cy-ana__texto--marco text{
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.42;
}

/* Los testigos: los mismos datos pasando por cada carril. Escondidos por
   omisión, con la regla de arriba: su sitio lo da entero `offset-path`. */
/* **Opacidad 0 en reposo, y la animación la sube.** Un testigo con retardo está
   quieto en el arranque de su recorrido hasta que le toca, y ahí se veía: tres
   puntos apilados sobre el borde de la fuente. Con la base a 0, mientras el
   retardo corre no se ve nada, y `--op` deja que cada uno tenga su propia tinta
   sin que los fotogramas la pisen. */
.cy-ana__dato{
  fill:currentColor;
  offset-rotate:0deg;
  offset-distance:0%;
  opacity:0;
}
/* Los recorridos van **de borde a borde**, no de centro a centro: del borde
   derecho de la fuente al borde izquierdo de la salida. Así el punto nunca se
   queda parado encima de un rótulo. */
.cy-ana__dato--a{offset-path:path("M130,105 H160 V48 H576");}
.cy-ana__dato--b{offset-path:path("M130,105 H576");}
.cy-ana__dato--c{offset-path:path("M130,105 H160 V162 H576");}
.cy-ana__dato--b{--op:.55;}
.cy-ana__dato--c{--op:.4;}

@media (prefers-reduced-motion: no-preference){
  .cy-ana__dato{animation:cy-ana-va 7s linear infinite;}
  /* Los retardos van después del atajo, que si no se los lleva por delante. */
  .cy-ana__dato--b{animation-delay:2.33s;}
  .cy-ana__dato--c{animation-delay:4.67s;}

  .cy-ana__nodo{animation:cy-ana-pulso 7s linear infinite var(--t, 0s);}
  /* La fuente y la salida laten cada tercio de vuelta: por ellas pasan los tres
     carriles, no uno. Su retardo también sale del dibujo. */
  .cy-ana__nodo--fuente,
  .cy-ana__nodo--salida{animation:cy-ana-pulso 2.333s linear infinite var(--t, 0s);}
}

/* Las paradas salen de `--puerta` y `--sale`, que cada carril trae puestas en su
   `style` porque su recorrido mide distinto. La meseta larga es la de la puerta
   del modelo: es donde se tarda, y es lo único que el dibujo puede decir de eso
   sin dejar el punto encima del rótulo. */
@keyframes cy-ana-va{
  0%   {offset-distance:0%;   opacity:0;}
  3%   {offset-distance:0%;   opacity:var(--op, 1);}
  14%  {offset-distance:var(--puerta, 20%);}
  46%  {offset-distance:var(--puerta, 20%);}
  58%  {offset-distance:var(--sale, 78%);}
  68%  {offset-distance:var(--sale, 78%);}
  82%  {offset-distance:100%;}
  94%  {offset-distance:100%; opacity:var(--op, 1);}
  100% {offset-distance:100%; opacity:0;}
}
@keyframes cy-ana-pulso{
  0%,  100% {opacity:.42;}
  4%        {opacity:1;}
  48%       {opacity:1;}
  56%       {opacity:.42;}
}

/* ==========================================================================
   Sin movimiento, sin testigos

   Todos los testigos de los diagramas animados **dicen algo solo si se mueven**:
   la leyenda los llama «un caso, avanzando», «una tarea, avanzando», «los mismos
   datos, pasando». Quietos son un punto en el borde de una caja, y quien pidió no
   ver movimiento se queda mirando un dibujo con una mancha inexplicable.

   Así que con `prefers-reduced-motion: reduce` no se enseñan, y su fila de la
   leyenda tampoco: nombrar algo que no se ve es peor que no nombrarlo. El resto
   del diagrama —las cajas, las vías, los rótulos— queda entero y correcto.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .cy-bpm__caso,
  .cy-cog__caso,
  .cy-kan__viaja,
  .cy-ana__dato,
  .cy-prod__bpm-pie li.es-caso{display:none;}
}

@media (max-width:767px){
  .cy-ana{min-width:660px;}
}

/* ==========================================================================
   El expediente que se cierra · diagrama animado

   El quinto de la familia y el único en que **no viaja nada**: lo que se mueve
   es el relleno. Un onboarding no es un caso recorriendo pasos —eso ya lo cuenta
   el diagrama de Workflow— sino un expediente que tiene que quedar completo, y
   lo que hay que ver es que se llena casi solo.

   Por eso aquí no hay `offset-path` sino **cuatro juegos de fotogramas**, uno por
   requisito. Suena a repetición y no lo es: para que los requisitos se acumulen
   y se reinicien todos juntos tienen que compartir la fase, y un
   `animation-delay` por requisito la rompe —cada uno reiniciaría en su propio
   momento y nunca se verían los cuatro marcados—. Con la fase compartida, el
   umbral de cada uno tiene que ir en sus fotogramas.

   Los tiempos: 9 s la vuelta. Los umbrales de los requisitos caen justo después
   de la etapa que los cierra: dos en «Documentos», uno en «Validación» y el
   último en «Firma».
   ========================================================================== */
.cy-exp{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* El riel de las etapas va por detrás; las pastillas lo tapan con su relleno. */
.cy-exp__riel line{stroke:currentColor;stroke-width:1.2;opacity:.3;}

.cy-exp__etapa rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.2;}
.cy-exp__etapa text{fill:currentColor;font-size:11px;font-weight:600;letter-spacing:.02em;}
.cy-exp__etapa{opacity:.42;}

.cy-exp__caja rect{
  fill:#FFFFFF;
  stroke:currentColor;
  stroke-width:1.4;
}
.cy-exp__texto text{fill:currentColor;font-size:13px;}
.cy-exp__texto--rotulo text{
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.42;
}

/* La barra de completitud: la pista tenue y el relleno a tinta entera. */
.cy-exp__barra rect{fill:currentColor;opacity:.14;}
.cy-exp__barra rect.cy-exp__lleno{opacity:.85;}

/* Los requisitos. El de la persona se distingue por el trazo de puntos de su
   casilla, igual que el nodo de la persona en el diagrama del BPM. */
.cy-exp__casilla{fill:none;stroke:currentColor;stroke-width:1.3;opacity:.5;}
.cy-exp__req.es-gente .cy-exp__casilla{stroke-dasharray:3 2.5;}
.cy-exp__que{fill:currentColor;font-size:13px;opacity:.8;}
.cy-exp__quien{fill:currentColor;font-size:11px;opacity:.45;}

/* La marca de cerrado. Escondida de base: la enseñan los fotogramas, cada uno
   en su umbral. */
.cy-exp__tic{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
}

@media (prefers-reduced-motion: no-preference){
  .cy-exp__etapa{animation:cy-exp-etapa 9s linear infinite var(--t, 0s);}
  /* Sin retardo, a propósito: los cuatro comparten la fase. */
  .cy-exp__tic--1{animation:cy-exp-tic-1 9s linear infinite;}
  .cy-exp__tic--2{animation:cy-exp-tic-2 9s linear infinite;}
  .cy-exp__tic--3{animation:cy-exp-tic-3 9s linear infinite;}
  .cy-exp__tic--4{animation:cy-exp-tic-4 9s linear infinite;}
  .cy-exp__lleno{animation:cy-exp-barra 9s linear infinite;}
}

/* Sin movimiento se enseña **el expediente terminado**, que es el estado que
   significa algo: los cuatro requisitos cerrados y la barra llena. Dejarlo vacío
   sería enseñar un formulario en blanco y llamarlo diagrama. */
@media (prefers-reduced-motion: reduce){
  .cy-exp__tic{opacity:1;}
  .cy-exp__lleno{width:168px;}
  .cy-exp__etapa{opacity:1;}
}

@keyframes cy-exp-etapa{
  0%,  100% {opacity:.42;}
  2%        {opacity:1;}
  12%       {opacity:1;}
  18%       {opacity:.42;}
}
@keyframes cy-exp-tic-1{ 0%,27%{opacity:0;} 29%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-exp-tic-2{ 0%,33%{opacity:0;} 35%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-exp-tic-3{ 0%,41%{opacity:0;} 43%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-exp-tic-4{ 0%,67%{opacity:0;} 69%,96%{opacity:1;} 100%{opacity:0;} }

/* El relleno crece **a saltos**, uno por requisito: un porcentaje que subiera
   suave diría que el expediente se llena de a poquitos, y no — se llena de golpe
   cada vez que algo cierra. */
@keyframes cy-exp-barra{
  0%,  27% {width:0px;}
  29%, 33% {width:42px;}
  35%, 41% {width:84px;}
  43%, 67% {width:126px;}
  69%, 96% {width:168px;}
  100%     {width:0px;}
}

@media (max-width:767px){
  .cy-exp{min-width:660px;}
}

/* ==========================================================================
   El inventario · las cifras y la lista entera

   La sección que existe porque **ocho tarjetas hacen parecer pequeño un sistema
   de treinta y dos módulos**. Cuando el tamaño es parte de lo que se vende, la
   única forma de que se note es enseñarlo todo: las cifras dan la medida de un
   vistazo y la lista de abajo es lo que la sostiene. Una cifra sin la lista es
   una promesa.

   Por eso la lista va **densa y sin descripciones**: es un inventario, no un
   catálogo. Cuarenta nombres pequeños en columnas se leen como «esto es grande»;
   los mismos cuarenta en tarjetas con párrafo serían diez pantallas y nadie
   llegaría al final.
   ========================================================================== */
.cy-prod__inventario{background:#FFFFFF;padding:120px 0;}

/* **Dos blancos seguidos se leen como un solo bloque largo**, y aquí pasa cuando
   el inventario no lleva casos de uso detrás —el producto todavía no está citado
   en ninguno— y cae directo en el cierre. La raya de un píxel hace el trabajo
   que en el resto de la página hace el cambio de fondo. Se midió: sin ella, las
   dos secciones daban el mismo color y se leían como una. */
.cy-prod__inventario + .cy-prod__cierre{
  border-top:1px solid var(--td-border-1, #e4e6ea);
}

/* --- Las cifras --- */
.cy-cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px;
  margin:56px 0 0;
  padding:0;
  list-style:none;
}
.cy-cifras li{
  padding:26px 24px 28px;
  box-shadow:0 0 0 1px var(--td-border-1, #e4e6ea);
  background:#FFFFFF;
}
.cy-cifras__num{
  display:block;
  font-size:clamp(38px, 4.4vw, 62px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--td-theme-primary, #20282d);
  /* Cifras tabulares: en una fila de números, los anchos distintos de cada
     dígito hacen que parezcan mal alineados aunque lo estén. */
  font-variant-numeric:tabular-nums;
}
.cy-cifras__que{
  display:block;
  margin-top:12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}

/* --- La lista, en columnas por familia --- */
.cy-inv{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:44px 40px;
  margin-top:72px;
}
.cy-inv__titulo{
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--td-border-1, #e4e6ea);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--td-grey-3, #8b9aa4);
}
.cy-inv__lista{
  margin:0;
  padding:0;
  list-style:none;
}
.cy-inv__lista li{
  padding:5px 0;
  font-size:15px;
  line-height:1.45;
  color:var(--td-theme-primary, #20282d);
}

@media (max-width:991px){
  .cy-prod__inventario{padding:70px 0;}
  .cy-cifras{margin-top:40px;}
  .cy-cifras li{padding:20px 18px 22px;}
  .cy-inv{gap:34px 28px;margin-top:52px;}
}

/* En un teléfono, **dos columnas forzadas**. Con el mínimo de 220px cabía una
   sola y la sección medía 2.843px de alto medidos: un muro de nombres es la
   idea, pero no un muro de tres pantallas. A dos columnas se parte por la mitad,
   y que un nombre largo pase a dos renglones en una lista no molesta. */
@media (max-width:575px){
  .cy-inv{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:30px 22px;
  }
  .cy-inv__lista li{font-size:14px;}
}

/* ==========================================================================
   El embudo de una búsqueda · diagrama animado

   El de Index, y el que tiene el trabajo más difícil: **explicar por qué es
   rápido**, que no es lo mismo que decir que es rápido. Lo hace enseñando el
   embudo — entra un filtro, la cuenta de candidatos baja; entra otro, baja más—,
   y solo al final aparecen los resultados y el tiempo que tardaron.

   Las cifras que bajan son cuatro `<text>` en el mismo sitio, cada uno con su
   ventana: **en CSS no se interpola texto**, así que un contador que cambia se
   hace enseñando y escondiendo. Misma técnica que los requisitos del expediente
   y por la misma razón: comparten la fase para acumularse y reiniciar juntos, y
   con la fase compartida el umbral de cada uno tiene que ir en sus fotogramas.

   Los tiempos: 8 s la vuelta. Filtros a 8%, 20% y 32%; resultados a 40%, 44% y
   48%; todo se apaga en el 96% para que el reinicio no se vea como un salto.
   ========================================================================== */
.cy-idx{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

.cy-idx__campo rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.4;}
.cy-idx__lupa circle,
.cy-idx__lupa line{fill:none;stroke:currentColor;stroke-width:1.8;opacity:.5;stroke-linecap:round;}

/* Las pastillas de los filtros: rellenas, porque son lo que el usuario puso. */
.cy-idx__pastilla rect{fill:currentColor;opacity:.1;}
.cy-idx__pastilla text{fill:currentColor;font-size:13px;font-weight:500;}
.cy-idx__pastilla{opacity:0;}

/* Los candidatos. La pista mide el total y el relleno lo que queda. */
.cy-idx__pista rect{fill:currentColor;opacity:.08;}
.cy-idx__quedan{fill:currentColor;opacity:.8;}

.cy-idx__cifra text{
  fill:currentColor;
  font-size:30px;
  font-weight:300;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Todas escondidas menos la primera: sin animación se ve el estado de partida. */
.cy-idx__cifra{opacity:0;}
.cy-idx__cifra--1{opacity:1;}

.cy-idx__texto--pie text{fill:currentColor;font-size:11px;opacity:.5;}

/* Los renglones de resultado. */
.cy-idx__fila{opacity:0;}
.cy-idx__marco{fill:none;stroke:currentColor;stroke-width:1;opacity:.35;}
.cy-idx__doc{fill:currentColor;opacity:.7;}
.cy-idx__meta{fill:currentColor;opacity:.3;}

/* El tiempo, en negativo: es la cifra que vende el producto. */
.cy-idx__tiempo{opacity:0;}
.cy-idx__tiempo rect{fill:currentColor;}
.cy-idx__tiempo text{fill:#FFFFFF;font-size:15px;font-weight:600;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-idx__sale--08{animation:cy-idx-sale-08 8s linear infinite;}
  .cy-idx__sale--20{animation:cy-idx-sale-20 8s linear infinite;}
  .cy-idx__sale--32{animation:cy-idx-sale-32 8s linear infinite;}
  .cy-idx__sale--40{animation:cy-idx-sale-40 8s linear infinite;}
  .cy-idx__sale--44{animation:cy-idx-sale-44 8s linear infinite;}
  .cy-idx__sale--48{animation:cy-idx-sale-48 8s linear infinite;}
  .cy-idx__cifra--1{animation:cy-idx-cifra-1 8s linear infinite;}
  .cy-idx__cifra--2{animation:cy-idx-cifra-2 8s linear infinite;}
  .cy-idx__cifra--3{animation:cy-idx-cifra-3 8s linear infinite;}
  .cy-idx__cifra--4{animation:cy-idx-cifra-4 8s linear infinite;}
  .cy-idx__quedan{animation:cy-idx-quedan 8s linear infinite;}
}

/* Sin movimiento se enseña **la búsqueda ya hecha**: los tres filtros puestos,
   la cuenta en doce, los resultados y el tiempo. Es el estado que significa
   algo; el de partida es un campo vacío. */
@media (prefers-reduced-motion: reduce){
  .cy-idx__pastilla,
  .cy-idx__fila,
  .cy-idx__tiempo{opacity:1;}
  .cy-idx__cifra--1{opacity:0;}
  .cy-idx__cifra--4{opacity:1;}
  .cy-idx__quedan{width:20px;}
}

@keyframes cy-idx-sale-08{ 0%,8%{opacity:0;}  10%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-idx-sale-20{ 0%,20%{opacity:0;} 22%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-idx-sale-32{ 0%,32%{opacity:0;} 34%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-idx-sale-40{ 0%,40%{opacity:0;} 42%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-idx-sale-44{ 0%,44%{opacity:0;} 46%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-idx-sale-48{ 0%,48%{opacity:0;} 50%,96%{opacity:1;} 100%{opacity:0;} }

@keyframes cy-idx-cifra-1{ 0%,8%{opacity:1;}  10%,100%{opacity:0;} }
@keyframes cy-idx-cifra-2{ 0%,8%{opacity:0;}  10%,20%{opacity:1;} 22%,100%{opacity:0;} }
@keyframes cy-idx-cifra-3{ 0%,20%{opacity:0;} 22%,32%{opacity:1;} 34%,100%{opacity:0;} }
@keyframes cy-idx-cifra-4{ 0%,32%{opacity:0;} 34%,96%{opacity:1;} 100%{opacity:0;} }

/* La barra baja **a saltos y no en proporción**: de 128.400 a 12 en escala
   lineal, el último tramo sería medio píxel. Los saltos dicen «cada filtro quita
   mucho», que es lo cierto. */
@keyframes cy-idx-quedan{
  0%        {width:560px; opacity:0;}
  2%,   8%  {width:560px; opacity:.8;}
  10%,  20% {width:240px;}
  22%,  32% {width:70px;}
  34%,  96% {width:20px;  opacity:.8;}
  /* **Se apaga en su sitio en vez de estirarse de vuelta.** Con el ancho
     volviendo a 560 en el último 4%, la barra crecía a la vista durante 0,32 s
     mientras la cuenta seguía diciendo 12: se leía como si la búsqueda se
     des-filtrara. Apagándola, el salto de ancho pasa cuando no se ve. */
  100%      {width:20px;  opacity:0;}
}

@media (max-width:767px){
  .cy-idx{min-width:660px;}
}

/* ==========================================================================
   Cómo funciona un lienzo de plantilla · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-lienzo.php`, el «cómo funciona» de Studio. Tres tiempos de
   izquierda a derecha: se arrastran tres campos sobre una hoja, la plantilla se
   publica y se vuelve un token, y a la derecha el servicio devuelve documentos
   mientras una cuenta sube. El argumento es **la desproporción**, y por eso hay
   una persona en el primer tercio y en los otros dos no.

   La ficha que vuela y el campo que queda son **dos elementos distintos**: la
   primera se apaga al llegar y el segundo se enciende. Interpolar el ancho de 32
   a 104 durante el vuelo se veía como una mancha que crece, no como un campo que
   se suelta.

   El destino de cada vuelo va en dos variables CSS que escribe el PHP —`--cy-dx`
   y `--cy-dy`, la resta de las dos posiciones—, así que mover un campo en el PHP
   no obliga a tocar estos fotogramas. Los tres juegos de fotogramas están
   repetidos a propósito: **son la misma trayectoria en tres momentos**, y
   escalonarlos con `animation-delay` habría desfasado su reinicio del token y de
   la pila, que sí comparten fase.

   Los tiempos: 8 s la vuelta. Los vuelos en 6-14%, 16-24% y 26-34%; el token en
   el 40% y su flecha de salida en el 46%; las seis hojas de la pila del 52% al
   82% de seis en seis; todo se apaga en el 96% para que el reinicio no se vea
   como un salto.
   ========================================================================== */
.cy-stu{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* La paleta y sus fichas: la zona de la que se arrastra. */
.cy-stu__paleta rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.35;}
.cy-stu__ficha rect{fill:currentColor;opacity:.18;}

/* La hoja, en blanco sobre el blanco de la caja: la separa el contorno, no un
   relleno gris. Un gris la habría hecho parecer deshabilitada. */
.cy-stu__hoja rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.4;opacity:.9;}
.cy-stu__sello rect{fill:currentColor;opacity:.35;}
/* Lo que ya está impreso en la plantilla y no cambia nunca: a media tinta, para
   que los campos que llegan sean lo que se mira. */
.cy-stu__impreso rect{fill:currentColor;opacity:.22;}

/* La ficha en vuelo. Va más sólida que la de la paleta: está agarrada. */
.cy-stu__vuela rect{fill:currentColor;opacity:.55;}
.cy-stu__vuela{opacity:0;}

/* El campo puesto: contorno firme y relleno tenue, como un campo de formulario
   que ya tiene nombre. */
.cy-stu__campo rect{fill:currentColor;fill-opacity:.1;stroke:currentColor;stroke-width:1.2;}
.cy-stu__campo text{
  fill:currentColor;
  font-size:11px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.cy-stu__campo{opacity:0;}

.cy-stu__linea line{stroke:currentColor;stroke-width:1.4;opacity:.5;}
.cy-stu__linea path{fill:currentColor;opacity:.5;}
.cy-stu__linea{opacity:0;}

/* El token, en negativo: es la bisagra del dibujo. A su izquierda hay alguien
   arrastrando y a su derecha ya no vuelve a haber nadie. */
.cy-stu__token{opacity:0;}
.cy-stu__token rect{fill:currentColor;}
.cy-stu__token text{fill:#FFFFFF;font-size:13px;font-weight:600;letter-spacing:.04em;}

/* Las hojas que devuelve el servicio. Contorno y blanco, igual que la plantilla:
   es el mismo documento, y lo que cambia es que este viene lleno. */
.cy-stu__salida{opacity:0;}
.cy-stu__salida rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.2;opacity:.75;}
.cy-stu__lleno{opacity:0;}
.cy-stu__lleno rect{fill:currentColor;opacity:.42;}

.cy-stu__cifra text{
  fill:currentColor;
  font-size:30px;
  font-weight:300;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Todas escondidas menos la primera: sin animación se ve el estado de partida. */
.cy-stu__cifra{opacity:0;}
.cy-stu__cifra--1{opacity:1;}

.cy-stu__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-stu__texto--chico text{font-size:11px;opacity:.5;}
.cy-stu__texto--pie text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-stu__vuela--1{animation:cy-stu-vuela-1 8s linear infinite;}
  .cy-stu__vuela--2{animation:cy-stu-vuela-2 8s linear infinite;}
  .cy-stu__vuela--3{animation:cy-stu-vuela-3 8s linear infinite;}
  .cy-stu__campo--1{animation:cy-stu-campo-1 8s linear infinite;}
  .cy-stu__campo--2{animation:cy-stu-campo-2 8s linear infinite;}
  .cy-stu__campo--3{animation:cy-stu-campo-3 8s linear infinite;}
  .cy-stu__sale--40{animation:cy-stu-sale-40 8s linear infinite;}
  .cy-stu__sale--46{animation:cy-stu-sale-46 8s linear infinite;}
  .cy-stu__sale--52{animation:cy-stu-sale-52 8s linear infinite;}
  .cy-stu__sale--58{animation:cy-stu-sale-58 8s linear infinite;}
  .cy-stu__sale--64{animation:cy-stu-sale-64 8s linear infinite;}
  .cy-stu__sale--70{animation:cy-stu-sale-70 8s linear infinite;}
  .cy-stu__sale--76{animation:cy-stu-sale-76 8s linear infinite;}
  .cy-stu__sale--82{animation:cy-stu-sale-82 8s linear infinite;}
  .cy-stu__cifra--1{animation:cy-stu-cifra-1 8s linear infinite;}
  .cy-stu__cifra--2{animation:cy-stu-cifra-2 8s linear infinite;}
  .cy-stu__cifra--3{animation:cy-stu-cifra-3 8s linear infinite;}
  .cy-stu__cifra--4{animation:cy-stu-cifra-4 8s linear infinite;}
}

/* Sin movimiento se enseña **la plantilla ya hecha y llenándose**: los tres
   campos puestos, el token, la pila entera y la cuenta en su tope. El estado de
   partida —una hoja vacía y una paleta— no dice nada del producto. Las fichas en
   vuelo se quedan fuera: quietas en mitad del camino serían tres rectángulos
   flotando sobre la hoja. */
@media (prefers-reduced-motion: reduce){
  .cy-stu__campo,
  .cy-stu__linea,
  .cy-stu__token,
  .cy-stu__salida,
  .cy-stu__lleno{opacity:1;}
  .cy-stu__vuela{opacity:0;}
  .cy-stu__cifra--1{opacity:0;}
  .cy-stu__cifra--4{opacity:1;}
}

/* Los vuelos. La ficha aparece agarrada, viaja y se apaga al llegar, justo
   cuando se enciende el campo que deja puesto. */
@keyframes cy-stu-vuela-1{
  0%,  6%  {transform:translate(0,0); opacity:0;}
  7%       {transform:translate(0,0); opacity:.9;}
  14%      {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:.9;}
  15%,100% {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:0;}
}
@keyframes cy-stu-vuela-2{
  0%,  16% {transform:translate(0,0); opacity:0;}
  17%      {transform:translate(0,0); opacity:.9;}
  24%      {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:.9;}
  25%,100% {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:0;}
}
@keyframes cy-stu-vuela-3{
  0%,  26% {transform:translate(0,0); opacity:0;}
  27%      {transform:translate(0,0); opacity:.9;}
  34%      {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:.9;}
  35%,100% {transform:translate(var(--cy-dx),var(--cy-dy)); opacity:0;}
}

@keyframes cy-stu-campo-1{ 0%,14%{opacity:0;} 15%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-campo-2{ 0%,24%{opacity:0;} 25%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-campo-3{ 0%,34%{opacity:0;} 35%,96%{opacity:1;} 100%{opacity:0;} }

@keyframes cy-stu-sale-40{ 0%,40%{opacity:0;} 42%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-46{ 0%,46%{opacity:0;} 48%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-52{ 0%,52%{opacity:0;} 54%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-58{ 0%,58%{opacity:0;} 60%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-64{ 0%,64%{opacity:0;} 66%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-70{ 0%,70%{opacity:0;} 72%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-76{ 0%,76%{opacity:0;} 78%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-stu-sale-82{ 0%,82%{opacity:0;} 84%,96%{opacity:1;} 100%{opacity:0;} }

/* La cuenta sube con la pila: cada tramo cambia cuando han caído dos hojas más.
   Va redondeada —«500 mil», «1,2 M»— y no con cifras exactas: es una rampa hacia
   el único dato real, y una cifra intermedia con precisión de unidad sería un
   dato inventado. */
@keyframes cy-stu-cifra-1{ 0%,52%{opacity:1;} 54%,100%{opacity:0;} }
@keyframes cy-stu-cifra-2{ 0%,52%{opacity:0;} 54%,64%{opacity:1;} 66%,100%{opacity:0;} }
@keyframes cy-stu-cifra-3{ 0%,64%{opacity:0;} 66%,76%{opacity:1;} 78%,100%{opacity:0;} }
@keyframes cy-stu-cifra-4{ 0%,76%{opacity:0;} 78%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){
  .cy-stu{min-width:680px;}
}

/* ==========================================================================
   Cómo funciona una consulta contra una fuente oficial · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-consulta.php`, el «cómo funciona» de Verify. Tres tiempos de
   izquierda a derecha, y **el del medio es el único que se paga**: se escriben
   los trece dígitos, el verificador se comprueba dentro de la tarjeta, y solo
   entonces sale la flecha hacia la fuente que toca. La respuesta no vuelve al
   formulario: vuelve al registro, que es donde de verdad acaba.

   Dos cosas del reparto de tinta, que aquí es lo que cuenta:

   - **Las tres fuentes están siempre y solo se enciende una.** Las dos que no se
     usan quedan a contorno tenue: hay más de una puerta, pero no se abren todas.
     Un dibujo donde la consulta llega a las tres diría que se pagan tres.
   - **Las dos primeras filas del registro están desde el principio.** Un registro
     que arranca vacío diría que esta es la primera consulta de la historia; lo
     que se quiere decir es que se apuntan todas, así que la nueva llega a una
     lista que ya existía.

   Los tiempos: 8 s la vuelta. Los tres grupos de dígitos a 8%, 14% y 20%; el
   verificador a 28%; la salida a 38% y la fuente a 44%; la vuelta a 54% y la
   línea nueva a 60%; todo se apaga en el 96% para que el reinicio no se vea como
   un salto.
   ========================================================================== */
.cy-vfy{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

.cy-vfy__tarjeta rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-vfy__campo rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.4;opacity:.85;}

.cy-vfy__cifras text{
  fill:currentColor;
  font-size:17px;
  font-weight:500;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.cy-vfy__cifras{opacity:0;}

/* El visto del verificador, en negativo: es lo único de la tarjeta que afirma
   algo, y es gratis. */
.cy-vfy__visto{opacity:0;}
.cy-vfy__visto rect{fill:currentColor;}
.cy-vfy__visto text{fill:#FFFFFF;font-size:11px;font-weight:600;}
.cy-vfy__palomita{stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.cy-vfy__linea path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;}
.cy-vfy__linea .cy-vfy__punta{fill:currentColor;stroke:none;opacity:.55;}
.cy-vfy__linea{opacity:0;}

/* Las fuentes. La que no se usa queda a contorno tenue; la que se usa se rellena
   y su rótulo pasa a negativo. */
.cy-vfy__fuente rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.3;}
.cy-vfy__fuente text{fill:currentColor;font-size:13px;font-weight:600;opacity:.45;}
.cy-vfy__fuente--usada{opacity:0;}
.cy-vfy__fuente--usada rect{fill:currentColor;stroke:none;opacity:1;}
.cy-vfy__fuente--usada text{fill:#FFFFFF;opacity:1;}

/* Las filas del registro. Las viejas a contorno, la nueva rellena: se ve cuál
   acaba de escribirse sin necesidad de una flecha que lo diga. */
.cy-vfy__fila rect{fill:none;stroke:currentColor;stroke-width:1;opacity:.3;}
.cy-vfy__dato{fill:currentColor;stroke:none;opacity:.3;}
.cy-vfy__fila--nueva{opacity:0;}
.cy-vfy__fila--nueva rect{stroke:currentColor;stroke-width:1.4;opacity:.9;}
.cy-vfy__fila--nueva .cy-vfy__dato{opacity:.65;}

.cy-vfy__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-vfy__texto--chico text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-vfy__sale--08{animation:cy-vfy-sale-08 8s linear infinite;}
  .cy-vfy__sale--14{animation:cy-vfy-sale-14 8s linear infinite;}
  .cy-vfy__sale--20{animation:cy-vfy-sale-20 8s linear infinite;}
  .cy-vfy__sale--28{animation:cy-vfy-sale-28 8s linear infinite;}
  .cy-vfy__sale--38{animation:cy-vfy-sale-38 8s linear infinite;}
  .cy-vfy__sale--44{animation:cy-vfy-sale-44 8s linear infinite;}
  .cy-vfy__sale--54{animation:cy-vfy-sale-54 8s linear infinite;}
  .cy-vfy__sale--60{animation:cy-vfy-sale-60 8s linear infinite;}
}

/* Sin movimiento se enseña **la consulta ya hecha**: el CUI escrito, el
   verificador en verde, la fuente encendida y la línea nueva en el registro. El
   estado de partida es un formulario vacío, que no dice nada del producto. */
@media (prefers-reduced-motion: reduce){
  .cy-vfy__cifras,
  .cy-vfy__visto,
  .cy-vfy__linea,
  .cy-vfy__fuente--usada,
  .cy-vfy__fila--nueva{opacity:1;}
}

@keyframes cy-vfy-sale-08{ 0%,8%{opacity:0;}  10%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-14{ 0%,14%{opacity:0;} 16%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-20{ 0%,20%{opacity:0;} 22%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-28{ 0%,28%{opacity:0;} 30%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-38{ 0%,38%{opacity:0;} 40%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-44{ 0%,44%{opacity:0;} 46%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-54{ 0%,54%{opacity:0;} 56%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-vfy-sale-60{ 0%,60%{opacity:0;} 62%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){
  .cy-vfy{min-width:680px;}
}

/* ==========================================================================
   Cómo funciona una conversación atendida · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-conversacion.php`, el «cómo funciona» de Engage. Un hilo con
   la persona arriba, los mensajes llegando por tres canales distintos, el
   copiloto al lado y el embudo al final.

   Dos cosas que **no** hay que deshacer, porque las dos dirían otra cosa:

   - **El armazón está quieto.** El panel, el copiloto, quien contesta y las
     etapas del embudo no se animan: es lo que hay antes de que llegue nadie, y
     en la pantalla de verdad siempre está. Lo que aparece y desaparece son los
     mensajes y la etapa a la que llega la conversación. Encendiéndolo todo por
     turnos, como hacen los otros diagramas, el armazón parpadeaba.
   - **La flecha del copiloto apunta a la persona, no al hilo.** El copiloto
     propone y la persona manda. Con la flecha al hilo, este diagrama sería el de
     otro producto.

   La etiqueta de canal va **dentro del mismo grupo que su globo**, así que entra
   y sale con él: un mensaje sin su etiqueta es un mensaje del que no se sabe por
   dónde entró, que es justo lo que el producto arregla.

   Los tiempos: 8 s la vuelta. El primer mensaje a 10%, el copiloto sugiere a
   18%, la respuesta a 26%, los otros dos mensajes a 38% y 50%, la etapa del
   embudo a 62% y la cotización a 72%; todo se apaga en el 96%.
   ========================================================================== */
.cy-eng{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

.cy-eng__panel rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-eng__copi rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}

/* La persona de la que es el hilo, arriba y una sola vez. */
.cy-eng__quien circle{fill:currentColor;opacity:.32;}
.cy-eng__barra rect{fill:currentColor;opacity:.3;}

.cy-eng__linea line{stroke:currentColor;stroke-width:1.2;opacity:.28;}
.cy-eng__linea path{fill:currentColor;stroke:none;opacity:.28;}
.cy-eng__linea--viva line,
.cy-eng__linea--viva path{opacity:.6;}

/* Los mensajes. El que entra va a contorno y el que sale —el de la casa— va
   relleno: es la conmutación de cualquier hilo de chat, y aquí además distingue
   lo que dijo el cliente de lo que alguien decidió contestar. */
.cy-eng__mensaje{opacity:0;}
.cy-eng__globo{fill:#FFFFFF;stroke:currentColor;stroke-width:1.2;opacity:.75;}
.cy-eng__dicho{fill:currentColor;opacity:.35;}
.cy-eng__mensaje--mio .cy-eng__globo{fill:currentColor;stroke:none;opacity:.9;}
.cy-eng__mensaje--mio .cy-eng__dicho{fill:#FFFFFF;opacity:.75;}

/* La etiqueta del canal, rellena: es un dato del mensaje, no su contorno. */
.cy-eng__etiqueta rect{fill:currentColor;opacity:.14;}
.cy-eng__etiqueta text{fill:currentColor;font-size:9px;font-weight:600;}

.cy-eng__sugerido{opacity:0;}
.cy-eng__sugerido rect{fill:currentColor;opacity:.4;}

/* Quien contesta, en negativo: es el único nodo del dibujo que decide. */
.cy-eng__persona rect{fill:currentColor;}
.cy-eng__persona text{fill:#FFFFFF;font-size:12px;font-weight:600;}

/* El embudo. Las etapas por las que no ha pasado, a contorno. */
.cy-eng__etapa rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.3;}
.cy-eng__etapa--lograda{opacity:0;}
.cy-eng__etapa--lograda rect{fill:currentColor;stroke:none;opacity:.85;}

.cy-eng__papel{opacity:0;}
.cy-eng__papel rect{fill:#FFFFFF;stroke:currentColor;stroke-width:1.2;opacity:.8;}

.cy-eng__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-eng__texto--chico text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-eng__sale--10{animation:cy-eng-sale-10 8s linear infinite;}
  .cy-eng__sale--18{animation:cy-eng-sale-18 8s linear infinite;}
  .cy-eng__sale--26{animation:cy-eng-sale-26 8s linear infinite;}
  .cy-eng__sale--38{animation:cy-eng-sale-38 8s linear infinite;}
  .cy-eng__sale--50{animation:cy-eng-sale-50 8s linear infinite;}
  .cy-eng__sale--62{animation:cy-eng-sale-62 8s linear infinite;}
  .cy-eng__sale--72{animation:cy-eng-sale-72 8s linear infinite;}
}

/* Sin movimiento se enseña **la conversación entera y ya resuelta**: los cuatro
   mensajes, la sugerencia, la etapa alcanzada y la cotización. El estado de
   partida es un hilo vacío, que del producto no dice nada. */
@media (prefers-reduced-motion: reduce){
  .cy-eng__mensaje,
  .cy-eng__sugerido,
  .cy-eng__etapa--lograda,
  .cy-eng__papel{opacity:1;}
}

@keyframes cy-eng-sale-10{ 0%,10%{opacity:0;} 12%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-18{ 0%,18%{opacity:0;} 20%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-26{ 0%,26%{opacity:0;} 28%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-38{ 0%,38%{opacity:0;} 40%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-50{ 0%,50%{opacity:0;} 52%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-62{ 0%,62%{opacity:0;} 64%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-eng-sale-72{ 0%,72%{opacity:0;} 74%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){
  .cy-eng{min-width:680px;}
}

/* ==========================================================================
   Cómo funciona una llamada escuchada entera · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-escucha.php`, el «cómo funciona» de Quality. Sale de la
   infografía de su caso de uso: los turnos separados, los cuatro puntos del
   speech pactado y el momento clave con su marca de tiempo.

   **Va en dos filas y no en tres columnas** como el resto, y no es capricho: la
   fila de arriba es una línea de tiempo de verdad, con los turnos repartidos a
   lo largo y el momento clave marcado **en el punto en que ocurrió**. Ese es el
   argumento del producto —no te da una nota, te da un segundo— y en tres
   columnas se perdía.

   Tres cosas del reparto de tinta:

   - **La onda se queda quieta.** Lo que el producto añade no es el audio, que ya
     estaba: es saber quién habló en cada tramo. Animando la onda, el dibujo
     diría que trae el sonido.
   - **El turno del agente y el del cliente se distinguen por relleno**, no por
     color: el sitio es monocromo y dos grises no se diferencian de un vistazo.
   - **El punto que falla lleva la tinta fuerte.** Es el único sitio del dibujo
     donde hay una mala noticia, y es lo que el supervisor va a mirar primero.

   Los tiempos: 8 s la vuelta. Los turnos a 12%, la marca del momento a 34%, los
   cuatro puntos del speech a 46%, 52%, 58% y 64%, la nota a 74% y la
   recomendación a 82%; todo se apaga en el 96%.
   ========================================================================== */
.cy-qly{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

/* La onda: lo que ya había antes de que llegara nadie. */
.cy-qly__onda rect{fill:currentColor;opacity:.22;}

/* Los turnos. El del agente a contorno y el del cliente relleno: es la única
   conmutación que se lee de un vistazo en un sitio sin color. */
.cy-qly__turno{opacity:0;}
.cy-qly__turno rect{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7;}
.cy-qly__turno--suyo rect{fill:currentColor;stroke:none;opacity:.55;}

/* La marca del momento, de arriba abajo: cruza la onda y los dos carriles
   porque es un instante de la llamada, no un dato de una tarjeta. */
.cy-qly__marca{opacity:0;}
.cy-qly__marca line{stroke:currentColor;stroke-width:1.4;opacity:.75;stroke-dasharray:3 3;}
.cy-qly__marca circle{fill:currentColor;}
.cy-qly__marca text{
  fill:currentColor;
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Los puntos del speech. El cumplido va a contorno y el omitido a tinta entera:
   es la única mala noticia del dibujo y es lo primero que se mira. */
.cy-qly__punto{opacity:0;}
.cy-qly__punto rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.4;}
.cy-qly__punto circle{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;}
.cy-qly__punto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-qly__signo{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cy-qly__punto--falla rect{opacity:.9;stroke-width:1.6;}
.cy-qly__punto--falla circle{fill:currentColor;stroke:none;opacity:1;}
.cy-qly__punto--falla .cy-qly__signo{stroke:#FFFFFF;}
.cy-qly__punto--falla text{font-weight:600;}

/* La nota, a contorno; la recomendación, en negativo. Al revés de lo que se
   esperaría, y a propósito: **lo que se lleva el supervisor no es el número**.
   La copia lo dice —«una nota le dice por qué agentes preocuparse, esto le dice
   qué decirle»— y el dibujo tiene que decir lo mismo. */
.cy-qly__nota{opacity:0;}
.cy-qly__nota rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.4;}
.cy-qly__nota text{
  fill:currentColor;
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cy-qly__reco{opacity:0;}
.cy-qly__reco rect{fill:currentColor;}
.cy-qly__reco text{fill:#FFFFFF;font-size:11px;font-weight:600;}

.cy-qly__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-qly__texto--chico text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-qly__sale--12{animation:cy-qly-sale-12 8s linear infinite;}
  .cy-qly__sale--34{animation:cy-qly-sale-34 8s linear infinite;}
  .cy-qly__sale--46{animation:cy-qly-sale-46 8s linear infinite;}
  .cy-qly__sale--52{animation:cy-qly-sale-52 8s linear infinite;}
  .cy-qly__sale--58{animation:cy-qly-sale-58 8s linear infinite;}
  .cy-qly__sale--64{animation:cy-qly-sale-64 8s linear infinite;}
  .cy-qly__sale--74{animation:cy-qly-sale-74 8s linear infinite;}
  .cy-qly__sale--82{animation:cy-qly-sale-82 8s linear infinite;}
}

/* Sin movimiento se enseña **la llamada ya revisada**: los turnos, el momento
   marcado, los cuatro puntos con el suyo fallando, la nota y la recomendación.
   El estado de partida es una onda sola, que es justo el «antes». */
@media (prefers-reduced-motion: reduce){
  .cy-qly__turno,
  .cy-qly__marca,
  .cy-qly__punto,
  .cy-qly__nota,
  .cy-qly__reco{opacity:1;}
}

@keyframes cy-qly-sale-12{ 0%,12%{opacity:0;} 14%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-34{ 0%,34%{opacity:0;} 36%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-46{ 0%,46%{opacity:0;} 48%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-52{ 0%,52%{opacity:0;} 54%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-58{ 0%,58%{opacity:0;} 60%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-64{ 0%,64%{opacity:0;} 66%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-74{ 0%,74%{opacity:0;} 76%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-qly-sale-82{ 0%,82%{opacity:0;} 84%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){
  .cy-qly{min-width:680px;}
}

/* ==========================================================================
   Aquí no hay nada · el 404 y la sección vacía
   --------------------------------------------------------------------------
   `partes/nada-aqui.php`, que comparten `404.php` y la rama vacía de
   `index.php`. Va sobre el negro de marca, como el encabezado de una ficha de
   producto: una página de error que se ve como una página del sitio molesta
   mucho menos que una que se ve como un error del servidor.

   **El dibujo es el único del tema que no es igual para todos**: se arma con la
   dirección que pidió cada visitante. Por eso el viaje del punto va en una
   variable CSS que escribe el PHP —`--cy-viaje`, cuánto tiene que recorrer—: los
   fotogramas son los mismos para todos y lo que cambia es la distancia. Es la
   misma técnica que las fichas que vuelan en el lienzo de Studio.

   El punto **se para y se queda parado** el resto de la vuelta, en vez de
   desaparecer al llegar. Aquí eso sí significa algo: el recorrido terminó ahí.
   Es la excepción a lo que hacen los testigos de los otros diagramas, que van y
   vuelven porque describen algo que se repite.
   ========================================================================== */
.cy-nada{background:#0B0B0C;}
.cy-nada__cabeza{
  position:relative;
  overflow:hidden;
  padding:150px 0 120px;
  color:#FFFFFF;
}
.cy-nada__rotulo{
  display:block;
  margin-bottom:20px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.24em;
  color:rgba(255,255,255,.45);
}
.cy-nada__titular{
  margin:0 0 22px;
  max-width:16ch;
  font-size:clamp(34px, 5vw, 64px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  color:#FFFFFF;
}
.cy-nada__entradilla{
  margin:0;
  max-width:56ch;
  font-size:18px;
  line-height:1.66;
  color:rgba(255,255,255,.66);
}

/* --- La marca de agua, la misma que la ficha de producto --- */
.cy-nada__agua{
  position:absolute;
  right:-.08em;
  bottom:-.34em;
  font-size:30vw;
  font-weight:700;
  line-height:1;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  user-select:none;
}

/* --- El dibujo de la ruta --- */
.cy-nada__dibujo{margin:52px 0 48px;}
/* El ancho lo pone el propio dibujo, en `--cy-ancho`, para que las cajas se
   vean del mismo tamaño tenga la dirección dos tramos o cuatro. */
.cy-ruta{
  display:block;
  width:100%;
  max-width:var(--cy-ancho, 720px);
  height:auto;
  color:#FFFFFF;
}
.cy-ruta__caja rect{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.9;}
.cy-ruta__caja text{
  fill:currentColor;
  font-size:15px;
  font-weight:500;
  opacity:.9;
}
/* La que no existe, de puntos y a media tinta: la misma convención que los
   contrastes del sitio, y aquí es literalmente el mensaje. */
.cy-ruta__caja--rota rect{stroke-dasharray:6 5;opacity:.4;}
.cy-ruta__caja--rota text{opacity:.4;}

.cy-ruta__tramo line{stroke:currentColor;stroke-width:1.6;opacity:.55;}
.cy-ruta__tramo--roto line{stroke-dasharray:5 5;opacity:.3;}

.cy-ruta__viaje circle{fill:currentColor;}
.cy-ruta__viaje{opacity:0;}

/* La barra donde el punto se detiene: corta el camino. */
.cy-ruta__alto line{stroke:currentColor;stroke-width:2.4;opacity:0;stroke-linecap:round;}

@media (prefers-reduced-motion: no-preference){
  .cy-ruta__viaje{animation:cy-ruta-viaje 5s cubic-bezier(.35,0,.2,1) infinite;}
  .cy-ruta__alto line{animation:cy-ruta-alto 5s linear infinite;}
}

/* Sin movimiento se enseña **el final del recorrido**: el punto parado donde se
   rompió la dirección y la barra que lo detuvo. Es el estado que significa algo;
   el de partida es un punto en el borde de la primera caja. */
@media (prefers-reduced-motion: reduce){
  .cy-ruta__viaje{opacity:1;transform:translateX(var(--cy-viaje, 0));}
  .cy-ruta__alto line{opacity:.85;}
}

@keyframes cy-ruta-viaje{
  0%       {transform:translateX(0); opacity:0;}
  6%       {transform:translateX(0); opacity:1;}
  /* Llega al 52% y **se queda ahí** el resto de la vuelta: el recorrido terminó,
     y un punto que volviera al principio diría que vuelve a intentarlo. */
  52%, 92% {transform:translateX(var(--cy-viaje, 0)); opacity:1;}
  100%     {transform:translateX(var(--cy-viaje, 0)); opacity:0;}
}
@keyframes cy-ruta-alto{
  0%, 52%  {opacity:0;}
  56%, 92% {opacity:.85;}
  100%     {opacity:0;}
}

/* --- Las salidas --- */
.cy-nada__salidas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:40px;
}
.cy-nada__salida{
  display:inline-flex;
  align-items:center;
  padding:14px 26px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;
  font-size:15px;
  font-weight:600;
  color:#FFFFFF;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.cy-nada__salida:hover,
.cy-nada__salida:focus-visible{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.5);
  color:#FFFFFF;
}
/* La vuelta corta —el último tramo que sí existía— va en sólido: de todas las
   salidas es la que más veces va a ser la buena. */
.cy-nada__salida.es-fuerte{
  background:#FFFFFF;
  border-color:#FFFFFF;
  color:#0B0B0C;
}
.cy-nada__salida.es-fuerte:hover,
.cy-nada__salida.es-fuerte:focus-visible{
  background:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.86);
  color:#0B0B0C;
}

.cy-nada__buscador{max-width:560px;}

@media (max-width:991px){
  .cy-nada__cabeza{padding:120px 0 90px;}
  .cy-nada__dibujo{margin:40px 0 36px;}
}
/* En un teléfono el dibujo **se desplaza a lo ancho** en vez de encogerse, igual
   que los diagramas de producto: los rótulos van en unidades del `viewBox` y a
   350 px de ancho quedarían a 7 px. */
@media (max-width:767px){
  .cy-nada__dibujo{
    overflow-x:auto;
    background:
      linear-gradient(to right, #0B0B0C 70%, rgba(11,11,12,0)) left center / 40px 100% no-repeat,
      linear-gradient(to left,  #0B0B0C 70%, rgba(11,11,12,0)) right center / 40px 100% no-repeat;
    background-attachment:local, local;
  }
  .cy-ruta{min-width:min(var(--cy-ancho, 720px), 560px);}
  .cy-nada__salida{padding:12px 20px;font-size:14px;}
}

/* ==========================================================================
   Una tienda con dos mostradores · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-mostrador.php`, el «cómo funciona» de Payments. Sale de su
   tablero, donde «Órdenes en progreso» se parte en POS y Tienda: los dos
   mostradores son el mismo contador.

   **El número de existencias es el diagrama entero**, y por eso es lo único
   grande del dibujo. Baja dos veces, una por cada mostrador, y que sea el mismo
   número el que baja las dos veces es toda la diferencia entre una tienda que
   tiene página y una tienda cuya página es la tienda.

   Las dos ventas **no son simultáneas**: primero la caja y después la web, con
   hueco entre ellas. Simultáneas se leerían como dos cosas paralelas, y lo que
   se quiere leer es que se turnan sobre lo mismo.

   Los tiempos: 8 s la vuelta. La venta en caja a 10% y su orden a 26%, la de la
   web a 40% y su orden a 56%; el número baja a 16% y a 46%. Todo se apaga en el
   96%.
   ========================================================================== */
.cy-com{
  display:block;
  width:100%;
  height:auto;
  color:var(--td-theme-primary, #20282d);
}

.cy-com__puerta{opacity:0;}
.cy-com__puerta rect{fill:currentColor;}
.cy-com__puerta text{fill:#FFFFFF;font-size:13px;font-weight:600;}

.cy-com__linea{opacity:0;}
.cy-com__linea line{stroke:currentColor;stroke-width:1.4;opacity:.55;}
.cy-com__linea path{fill:currentColor;stroke:none;opacity:.55;}

.cy-com__stock rect{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.9;}
.cy-com__cifra text{
  fill:currentColor;
  font-size:34px;
  font-weight:300;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Todas escondidas menos la primera: sin animación se ve el estado de partida. */
.cy-com__cifra{opacity:0;}
.cy-com__cifra--1{opacity:1;}

.cy-com__lista rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-com__fila rect{fill:none;stroke:currentColor;stroke-width:1;opacity:.28;}
.cy-com__dato{fill:currentColor;stroke:none;opacity:.3;}
.cy-com__fila--nueva{opacity:0;}
.cy-com__fila--nueva rect{stroke-width:1.4;opacity:.85;}
.cy-com__fila--nueva .cy-com__dato{opacity:.55;}
/* La etiqueta del mostrador: unificar no es borrar de dónde vino cada orden,
   que es lo que el tablero reporta por canal. */
.cy-com__eti{fill:currentColor;stroke:none;opacity:.14;}
.cy-com__fila text{fill:currentColor;font-size:9px;font-weight:600;}

.cy-com__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-com__texto--chico text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-com__sale--10{animation:cy-com-sale-10 8s linear infinite;}
  .cy-com__sale--26{animation:cy-com-sale-26 8s linear infinite;}
  .cy-com__sale--40{animation:cy-com-sale-40 8s linear infinite;}
  .cy-com__sale--56{animation:cy-com-sale-56 8s linear infinite;}
  .cy-com__cifra--1{animation:cy-com-cifra-1 8s linear infinite;}
  .cy-com__cifra--2{animation:cy-com-cifra-2 8s linear infinite;}
  .cy-com__cifra--3{animation:cy-com-cifra-3 8s linear infinite;}
}

/* Sin movimiento se enseña **el día ya cerrado**: los dos mostradores, el
   número en su tope de abajo y las dos órdenes en la lista. El estado de
   partida es un inventario sin vender nada. */
@media (prefers-reduced-motion: reduce){
  .cy-com__puerta,
  .cy-com__linea,
  .cy-com__fila--nueva{opacity:1;}
  .cy-com__cifra--1{opacity:0;}
  .cy-com__cifra--3{opacity:1;}
}

@keyframes cy-com-sale-10{ 0%,10%{opacity:0;} 12%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-com-sale-26{ 0%,26%{opacity:0;} 28%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-com-sale-40{ 0%,40%{opacity:0;} 42%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-com-sale-56{ 0%,56%{opacity:0;} 58%,96%{opacity:1;} 100%{opacity:0;} }

/* El número baja justo después de cada venta, no a la vez: la venta pasa y el
   inventario se entera. */
@keyframes cy-com-cifra-1{ 0%,16%{opacity:1;} 18%,100%{opacity:0;} }
@keyframes cy-com-cifra-2{ 0%,16%{opacity:0;} 18%,46%{opacity:1;} 48%,100%{opacity:0;} }
@keyframes cy-com-cifra-3{ 0%,46%{opacity:0;} 48%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){
  .cy-com{min-width:680px;}
}

/* --- La línea legal de la pantalla de contacto ---
   Repone lo obligatorio del pie, que esa pantalla esconde para caber en una
   ventana. Ver `partes/legal-corto.php`. */
.cy-legalito{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 22px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;
  color:rgba(255,255,255,.5);
}
.cy-legalito__copy{margin:0;}
.cy-legalito__enlaces{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:0;
  padding:0;
  list-style:none;
}
.cy-legalito__enlaces a{color:rgba(255,255,255,.5);}
.cy-legalito__enlaces a:hover,
.cy-legalito__enlaces a:focus-visible{color:#FFFFFF;}

/* ==========================================================================
   Un enlace acortado · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-enlace.php`, el «cómo funciona» de Links. Tres tiempos: una
   dirección larga se vuelve un enlace corto, los clics entran por él, y la
   cuenta vuelve a quien lo acuñó.

   **El enlace corto es lo único a tinta entera.** Es lo que se cobra —por
   enlace acuñado, no por clic— y es lo único del dibujo que el producto crea:
   la dirección larga ya existía y los clics los pone otro.

   Los clics entran **de uno en uno y por el mismo sitio**, que es la razón de
   que se puedan contar; llegando cada uno por su lado, el dibujo no explicaría
   de dónde sale el número.

   Los tiempos: 8 s la vuelta. El enlace a 12%, los cuatro clics a 34, 44, 54 y
   64%, y la cuenta cambia con ellos. Todo se apaga en el 96%.
   ========================================================================== */
.cy-lnk{display:block;width:100%;height:auto;color:var(--td-theme-primary, #20282d);}

.cy-lnk__larga rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.35;}
.cy-lnk__larga text{fill:currentColor;font-size:13px;opacity:.5;}

.cy-lnk__linea{opacity:0;}
.cy-lnk__linea line{stroke:currentColor;stroke-width:1.4;opacity:.55;}
.cy-lnk__linea path{fill:currentColor;stroke:none;opacity:.55;}

.cy-lnk__corto{opacity:0;}
.cy-lnk__corto rect{fill:currentColor;}
.cy-lnk__corto text{fill:#FFFFFF;font-size:15px;font-weight:600;letter-spacing:.02em;}

.cy-lnk__clic circle{fill:currentColor;opacity:.75;}
.cy-lnk__clic line{stroke:currentColor;stroke-width:1.2;opacity:.4;stroke-dasharray:3 3;}
.cy-lnk__clic > g{opacity:0;}

.cy-lnk__cuenta rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-lnk__cifra text{
  fill:currentColor;
  font-size:28px;
  font-weight:300;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cy-lnk__cifra{opacity:0;}
.cy-lnk__cifra--1{opacity:1;}

.cy-lnk__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-lnk__texto--chico text{font-size:11px;opacity:.5;}

@media (prefers-reduced-motion: no-preference){
  /* Sin retardos, a propósito: todos comparten la fase. */
  .cy-lnk__sale--12{animation:cy-lnk-sale-12 8s linear infinite;}
  .cy-lnk__sale--34{animation:cy-lnk-sale-34 8s linear infinite;}
  .cy-lnk__sale--44{animation:cy-lnk-sale-44 8s linear infinite;}
  .cy-lnk__sale--54{animation:cy-lnk-sale-54 8s linear infinite;}
  .cy-lnk__sale--64{animation:cy-lnk-sale-64 8s linear infinite;}
  .cy-lnk__cifra--1{animation:cy-lnk-cifra-1 8s linear infinite;}
  .cy-lnk__cifra--2{animation:cy-lnk-cifra-2 8s linear infinite;}
  .cy-lnk__cifra--3{animation:cy-lnk-cifra-3 8s linear infinite;}
}

/* Sin movimiento se enseña **el enlace ya repartido**: el corto puesto, los
   cuatro clics y la cuenta en su tope. El de partida es una dirección larga. */
@media (prefers-reduced-motion: reduce){
  .cy-lnk__corto,
  .cy-lnk__linea,
  .cy-lnk__clic > g{opacity:1;}
  .cy-lnk__cifra--1{opacity:0;}
  .cy-lnk__cifra--3{opacity:1;}
}

@keyframes cy-lnk-sale-12{ 0%,12%{opacity:0;} 14%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-lnk-sale-34{ 0%,34%{opacity:0;} 36%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-lnk-sale-44{ 0%,44%{opacity:0;} 46%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-lnk-sale-54{ 0%,54%{opacity:0;} 56%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-lnk-sale-64{ 0%,64%{opacity:0;} 66%,96%{opacity:1;} 100%{opacity:0;} }

@keyframes cy-lnk-cifra-1{ 0%,34%{opacity:1;} 36%,100%{opacity:0;} }
@keyframes cy-lnk-cifra-2{ 0%,34%{opacity:0;} 36%,54%{opacity:1;} 56%,100%{opacity:0;} }
@keyframes cy-lnk-cifra-3{ 0%,54%{opacity:0;} 56%,96%{opacity:1;} 100%{opacity:0;} }

@media (max-width:767px){ .cy-lnk{min-width:680px;} }

/* ==========================================================================
   Una revisión de seguridad · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-revision.php`, el «cómo funciona» de Security. **La flecha
   que vuelve es el diagrama**: un informe de hallazgos que nadie comprueba
   después es un PDF, y esa es la diferencia entre una auditoría y un servicio.
   Por eso es lo último que aparece y va a tinta entera.

   El hallazgo grave lleva la marca fuerte y va arriba: un informe que no
   prioriza le deja al cliente el trabajo por el que llamó.

   Es de los pocos diagramas del sitio que describen **un servicio y no una
   pantalla**, así que aquí no hay campos ni tablas: hay pasos y una vuelta.

   Los tiempos: 8 s. Revisión a 12%, los tres hallazgos a 34, 40 y 46%,
   corregido a 56% y la vuelta a 70%.
   ========================================================================== */
.cy-sec{display:block;width:100%;height:auto;color:var(--td-theme-primary, #20282d);}
.cy-sec__caja rect{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.9;}
.cy-sec__caja text{fill:currentColor;font-size:13px;font-weight:600;}
.cy-sec__nodo{opacity:0;}
.cy-sec__nodo rect{fill:currentColor;}
.cy-sec__nodo text{fill:#FFFFFF;font-size:13px;font-weight:600;}
.cy-sec__linea{opacity:0;}
.cy-sec__linea line{stroke:currentColor;stroke-width:1.4;opacity:.55;}
.cy-sec__linea path{fill:currentColor;stroke:none;opacity:.55;}
.cy-sec__lista rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-sec__hallazgo{opacity:0;}
.cy-sec__hallazgo circle{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.5;}
.cy-sec__hallazgo rect{fill:currentColor;opacity:.3;}
/* El grave, relleno: es lo único del informe que no admite discusión de orden. */
.cy-sec__hallazgo--grave circle{fill:currentColor;stroke:none;opacity:.95;}
.cy-sec__hallazgo--grave rect{opacity:.6;}
.cy-sec__vuelta{opacity:0;}
.cy-sec__vuelta path{fill:none;stroke:currentColor;stroke-width:1.8;opacity:.85;stroke-dasharray:6 5;}
.cy-sec__vuelta .cy-sec__punta{fill:currentColor;stroke:none;opacity:.85;stroke-dasharray:none;}
.cy-sec__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-sec__texto--chico text{font-size:11px;opacity:.5;}
@media (prefers-reduced-motion: no-preference){
  .cy-sec__sale--12{animation:cy-sec-sale-12 8s linear infinite;}
  .cy-sec__sale--34{animation:cy-sec-sale-34 8s linear infinite;}
  .cy-sec__sale--40{animation:cy-sec-sale-40 8s linear infinite;}
  .cy-sec__sale--46{animation:cy-sec-sale-46 8s linear infinite;}
  .cy-sec__sale--56{animation:cy-sec-sale-56 8s linear infinite;}
  .cy-sec__sale--70{animation:cy-sec-sale-70 8s linear infinite;}
}
/* Sin movimiento, la revisión completa y cerrada: es el estado que significa
   algo. El de partida es un aplicativo sin revisar. */
@media (prefers-reduced-motion: reduce){
  .cy-sec__nodo, .cy-sec__linea, .cy-sec__hallazgo, .cy-sec__vuelta{opacity:1;}
}
@keyframes cy-sec-sale-12{ 0%,12%{opacity:0;} 14%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-sec-sale-34{ 0%,34%{opacity:0;} 36%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-sec-sale-40{ 0%,40%{opacity:0;} 42%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-sec-sale-46{ 0%,46%{opacity:0;} 48%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-sec-sale-56{ 0%,56%{opacity:0;} 58%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-sec-sale-70{ 0%,70%{opacity:0;} 72%,96%{opacity:1;} 100%{opacity:0;} }
@media (max-width:767px){ .cy-sec{min-width:680px;} }

/* ==========================================================================
   Un curso que se sigue · diagrama animado
   --------------------------------------------------------------------------
   `partes/diagrama-curso.php`, el «cómo funciona» de Academy. El curso se arma
   una vez y es el mismo para todos; **la columna de la derecha es el
   diagrama**, porque es lo único que cambia por persona y es la diferencia
   entre mandar material y enseñar.

   Las tres barras son de distinto largo a propósito y una está llena. Con las
   tres iguales el dibujo diría «todos lo terminan» —mentira— y de paso haría
   inútil la columna: si todos avanzan igual, no hace falta medirlo.

   Los tiempos: 8 s. Las tres personas a 30, 42 y 54%.
   ========================================================================== */
.cy-aca{display:block;width:100%;height:auto;color:var(--td-theme-primary, #20282d);}
.cy-aca__curso rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.38;}
.cy-aca__modulo rect{fill:none;stroke:currentColor;stroke-width:1;opacity:.32;}
.cy-aca__dato{fill:currentColor;stroke:none;opacity:.32;}
.cy-aca__persona{opacity:0;}
.cy-aca__persona circle{fill:currentColor;opacity:.5;}
.cy-aca__hilo{stroke:currentColor;stroke-width:1.2;opacity:.4;}
.cy-aca__pista{fill:currentColor;opacity:.12;}
/* Lo recorrido, a tinta entera: es el dato por el que existe la pantalla. */
.cy-aca__lleno{fill:currentColor;opacity:.85;}
.cy-aca__texto text{fill:currentColor;font-size:11px;font-weight:500;}
.cy-aca__texto--chico text{font-size:11px;opacity:.5;}
@media (prefers-reduced-motion: no-preference){
  .cy-aca__sale--30{animation:cy-aca-sale-30 8s linear infinite;}
  .cy-aca__sale--42{animation:cy-aca-sale-42 8s linear infinite;}
  .cy-aca__sale--54{animation:cy-aca-sale-54 8s linear infinite;}
}
/* Sin movimiento, las tres personas con su avance: el estado de partida es un
   curso que no lleva nadie. */
@media (prefers-reduced-motion: reduce){ .cy-aca__persona{opacity:1;} }
@keyframes cy-aca-sale-30{ 0%,30%{opacity:0;} 32%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-aca-sale-42{ 0%,42%{opacity:0;} 44%,96%{opacity:1;} 100%{opacity:0;} }
@keyframes cy-aca-sale-54{ 0%,54%{opacity:0;} 56%,96%{opacity:1;} 100%{opacity:0;} }
@media (max-width:767px){ .cy-aca{min-width:680px;} }