/* ═══════════════════════════════════════════════════════════════
   CREATIVE AGENCY — el hero de dos bandas.

   Arriba, blanca, con el nombre de la marca ocupando todo el ancho.
   Abajo, oscura, con vídeo a sangre y una frase.
   ═══════════════════════════════════════════════════════════════ */

.ca-hero { position: relative; }

/* ── Banda 1: el nombre ────────────────────────────────────────── */
.ca-banda-marca {
  background: #fff;
  /* Deja sitio al header, que va fijo encima. */
  padding: calc(var(--nav-alto) + clamp(30px, 7vh, 90px)) var(--hd-pad) clamp(18px, 3vh, 40px);
  display: flex; align-items: flex-end;
  overflow: hidden;
}

.ca-marca {
  /* El tamaño lo pone js/creative-agency.js midiendo el ancho real:
     un clamp en vw solo acierta por casualidad, porque depende de qué
     letras tenga la palabra. Este valor es solo el punto de partida
     antes de que el JavaScript mida. */
  font-size: 12vw;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .82;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;

  /* El barrido metálico. Es un degradado recortado por el texto, más
     ancho que él, que se desplaza despacio: eso es lo que da el brillo
     que cruza las letras en vez de un gris plano. */
  background: linear-gradient(
    100deg,
    #9a9a9d  0%,
    #b9b9bd 18%,
    #f2e9ec 30%,
    #cfd8d4 38%,
    #a8a8ac 46%,
    #d8d3cd 58%,
    #f4eee7 66%,
    #b4b4b8 78%,
    #97979a 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ca-brillo 9s linear infinite;
}

@keyframes ca-brillo {
  from { background-position:   0% 50%; }
  to   { background-position: 220% 50%; }
}

/* ── Banda 2: el vídeo ─────────────────────────────────────────── */
.ca-banda-video {
  position: relative;
  height: clamp(420px, 62vh, 660px);
  overflow: hidden;
  background: #0a0a0c;
  isolation: isolate;
}

.ca-fondo { position: absolute; inset: 0; }
.ca-fondo img,
.ca-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* El vídeo entra por encima del poster cuando ya tiene fotogramas que
   mostrar; antes es transparente y se ve el poster. Sin esto se cuela
   un negro al arrancar. */
.ca-video { opacity: 0; z-index: 1; transition: opacity .5s ease; }
.ca-video.esta-jugando { opacity: 1; }

/* Más denso abajo a la izquierda, que es donde vive la frase, y se
   abre hacia arriba para no tapar el sujeto del plano. */
.ca-velo {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(0deg,  rgba(6,6,10,.78) 0%, rgba(6,6,10,.28) 34%, transparent 62%),
    linear-gradient(90deg, rgba(6,6,10,.5) 0%, transparent 46%);
}

/* Pegada al filo izquierdo, al mismo margen que el nombre gigante de
   la banda de arriba: son las dos piezas que el ojo compara, y tienen
   que arrancar en la misma vertical.

   OJO con max-inline-size: en escritura horizontal ES max-width. Antes
   había un `max-inline-size: 15ch` aquí para forzar el corte de línea y
   pisaba al max-width del contenedor: la frase quedaba en una caja de
   quince caracteres centrada por el margin:auto. El corte ahora lo
   decide el PHP, con la frase partida en dos. */
.ca-frase {
  position: absolute; z-index: 3;
  left: 0; bottom: clamp(34px, 7vh, 74px);
  padding: 0 var(--hd-pad);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 400; line-height: 1.24; letter-spacing: -.025em;
  color: #fff;
  text-align: left;
  /* Entra una vez, al cargar. */
  opacity: 0; transform: translateY(18px);
  animation: ca-entra .9s cubic-bezier(.16,1,.3,1) .35s forwards;
}
/* Cada línea, en su renglón. */
.ca-frase span { display: block; }
@keyframes ca-entra { to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .ca-banda-video { height: clamp(380px, 56vh, 520px); }
}

@media (prefers-reduced-motion: reduce) {
  .ca-marca { animation: none; }
  .ca-frase { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Las secciones claras que van bajo el hero.

   Cambian de registro a propósito: el hero es oscuro y cinematográfico,
   y aquí la página se abre en blanco para que se lea el texto. Es lo
   que hace la referencia.
   ═══════════════════════════════════════════════════════════════ */

.ca-intro {
  background: #fff;
  padding: clamp(90px, 13vh, 170px) var(--hd-pad) clamp(50px, 8vh, 100px);
}
/* 900px topaba al titular y lo partía en dos: "Crafted Solutions" a
   150px mide ~1480px. Ahora manda el titular y es el párrafo el que
   lleva su propio ancho de lectura. */
.ca-intro-caja { max-width: min(1600px, 100%); margin: 0 auto; text-align: center; }

.ca-titular {
  position: relative;
  display: inline-block;      /* la anotación se ancla a la palabra, no a la columna */
  /* 150 px de tope, no 108: en la referencia el titular ocupa el 75%
     del ancho y con el tope anterior se quedaba en el 53%. */
  /* nowrap + el ajuste por medida de js/creative-agency.js: el cuerpo
     baja lo justo para que quepa en una línea, sea cual sea el texto.
     Este clamp es solo el punto de partida antes de que mida. */
  white-space: nowrap;
  font-size: clamp(30px, 8vw, 150px);
  /* 700 y casi sin apretar. Con 800 y -.045em las letras se tocaban y
     perdía el aire geométrico del original. */
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
  color: #232936;
  margin-bottom: clamp(26px, 4vh, 46px);
}

.ca-parrafo {
  /* La referencia lo tiene en ~26 px, no en 18: es un subtítulo, no
     letra pequeña. Y ocupa la mitad del ancho, en tres líneas. */
  max-width: 68ch; margin: 0 auto;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: 1.5; color: #4a5160;
}

/* ── La anotación manuscrita ───────────────────────────────────────
   Va ENCIMA del titular, solapando el extremo por el que entra la
   flecha. Antes la puse al lado (right:100% / left:100%), que la
   mandaba al margen lateral: por eso no se parecía.

   Cuelga del titular y no va posicionada por su cuenta: así viaja con
   la palabra a cualquier tamaño en vez de descolocarse al cambiar el
   ancho de la ventana.

   Va en el naranja de la marca, no en el rosa de la referencia: ese
   rosa es de otro sitio y aquí pelearía con todo lo demás. Para
   cambiarlo, --acento en base.css. */
.ca-nota {
  position: absolute;
  bottom: 100%;              /* apoyada sobre el borde superior */
  margin-bottom: -.06em;     /* baja hasta rozar la altura de mayúsculas */
  display: block;
  color: var(--acento, #ff7a1a);
  pointer-events: none;
}
/* "Who we are": empieza donde acaba el titular, flecha abajo-izquierda. */
.ca-nota-dcha { left: 100%; margin-left: -.45em; }
/* "The services we provide": arranca un poco antes del titular y la
   flecha baja hacia su primera letra. */
.ca-nota-izda { left: 0; margin-left: -.35em; text-align: right; }

.ca-nota-txt {
  display: block; white-space: nowrap;
  font-family: 'Caveat', cursive;
  font-size: clamp(20px, 2.3vw, 34px);
  font-weight: 600; letter-spacing: .01em; line-height: 1;
}
.ca-nota-flecha {
  display: block;
  width: clamp(34px, 3.4vw, 52px); height: auto;
  margin-top: .12em;
  color: inherit;
}
.ca-nota-izda .ca-nota-flecha { margin-left: auto; }
/* Por debajo de cierto ancho no hay sitio a los lados del titular: la
   anotación se pone encima y centrada en vez de salirse de pantalla. */
/* En pantalla estrecha el titular ya ocupa casi todo el ancho y la
   anotación se saldría por un lado. Se pone centrada encima, con la
   flecha girada para que siga apuntando al titular. */
@media (max-width: 900px) {
  .ca-titular { display: flex; flex-direction: column; align-items: center; }
  .ca-nota {
    position: static;
    order: -1;
    margin: 0 auto clamp(4px, 1.2vh, 12px);
    text-align: center;
  }
  .ca-nota-izda { text-align: center; }
  .ca-nota-flecha { margin: .05em auto 0; transform: rotate(90deg); }
  .ca-nota-izda .ca-nota-flecha { margin: .05em auto 0; transform: rotate(90deg) scaleY(-1); }
}

/* ── La tira de fotos ──────────────────────────────────────────────
   Tres marcos que SUMAN el ancho de la ventana, con anchos desiguales
   —estrecho, medio, ancho— como en la referencia. Cada uno declara su
   proporción en --peso y flex la reparte.

   No se desplaza la tira: no sobresale nada que desplazar. Lo que se
   mueve es la FOTO dentro de su marco, que es más alta que él. Eso es
   el "scroll interno": el marco queda quieto y la imagen recorre su
   sobrante mientras la sección cruza la ventana.
   ═══════════════════════════════════════════════════════════════ */
.ca-tira {
  background: #fff;
  padding: clamp(30px, 5vh, 60px) var(--hd-pad) clamp(70px, 11vh, 130px);
}
.ca-tira-pista {
  display: flex;
  gap: clamp(12px, 1.7vw, 34px);
  max-width: var(--ancho-max);
  margin: 0 auto;
}
.ca-foto {
  /* flex-grow proporcional al peso: 360 / 635 / 885. flex-basis 0 para
     que el reparto lo decida el peso y no el contenido. */
  flex: var(--peso) 1 0;
  min-width: 0;
  height: clamp(280px, 33vw, 620px);
  margin: 0;
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;          /* el marco recorta: aquí vive el efecto */
  background: #ececed;
}
.ca-foto img {
  display: block;
  width: 100%;
  /* Más alta que el marco: ese 24% de sobrante es el recorrido que
     tiene la foto para moverse dentro sin descubrir un borde. */
  height: 124%;
  object-fit: cover;
  transform: translateY(-12%);   /* punto medio, por si el JS no corre */
  will-change: transform;
}
/* ── Las tarjetas de servicio ──────────────────────────────────── */
.ca-servicios {
  background: #fff;
  padding: clamp(20px, 3vh, 40px) var(--hd-pad) clamp(90px, 13vh, 160px);
}
.ca-servicios-rejilla {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
}

.ca-tarjeta {
  display: flex; flex-direction: column;
  /* El hueco entre cabecera y párrafo es lo que da el aire de la
     referencia: el texto queda abajo y el título arriba, separados. */
  justify-content: space-between;
  min-height: clamp(300px, 34vh, 380px);
  padding: clamp(24px, 2.2vw, 36px);
  background: #f3f3f5;
  border-radius: clamp(14px, 1.4vw, 22px);
}

.ca-tarjeta-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.ca-tarjeta-nota {
  font-family: 'Caveat', cursive;
  font-size: clamp(17px, 1.3vw, 21px); font-weight: 600; line-height: 1;
  color: var(--acento, #ff7a1a);
  margin-bottom: .5em;
}
.ca-tarjeta-tit {
  font-size: clamp(17px, 1.5vw, 22px); font-weight: 700;
  letter-spacing: -.005em; text-transform: uppercase; line-height: 1.15;
  color: #14161c;
}
.ca-tarjeta-num {
  flex-shrink: 0;
  font-size: clamp(38px, 4vw, 62px); font-weight: 700;
  letter-spacing: -.04em; line-height: .8;
  color: #dedee2;
}
.ca-tarjeta-txt {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6; color: #4a5160;
  margin-top: clamp(28px, 4vh, 56px);
}

@media (max-width: 980px) {
  .ca-servicios-rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ca-servicios-rejilla { grid-template-columns: 1fr; }
  .ca-tarjeta { min-height: 0; }
  .ca-tarjeta-txt { margin-top: 22px; }
  /* En vertical las tres en fila quedan como sellos: se apilan. */
  .ca-tira-pista { flex-direction: column; }
  .ca-foto { height: clamp(240px, 62vw, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  /* La foto se queda en su punto medio y no recorre nada. */
  .ca-foto img { transform: translateY(-12%) !important; will-change: auto; }
}


/* ═══════════════════════════════════════════════════════════════
   Trabajos, equipo, FAQ y testimonios.
   ═══════════════════════════════════════════════════════════════ */

/* El gris de las secciones que no van en blanco. */
.ca-intro.es-gris,
.es-gris { background: #f2f3f5; }

/* ── La lista de trabajos ──────────────────────────────────────────
   Filas, no tarjetas: el nombre grande a la izquierda y los datos
   pequeños a la derecha, separados por una línea fina. Cada fila es un
   enlace entero, no solo el nombre. */
.ca-obras { padding: clamp(10px, 2vh, 30px) var(--hd-pad) clamp(80px, 12vh, 150px); }
.ca-obras-caja { max-width: var(--ancho-max); margin: 0 auto; }

.ca-obra {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: clamp(16px, 2.2vh, 28px) 0;
  border-top: 1px solid rgba(20,22,28,.09);
  text-decoration: none; color: inherit;
  transition: padding-left .4s cubic-bezier(.16,1,.3,1);
}
.ca-obra:last-child { border-bottom: 1px solid rgba(20,22,28,.09); }
/* Al acercarse, la fila se adentra un poco. Es el gesto de una lista
   que responde sin necesidad de subrayados ni flechas. */
.ca-obra:hover { padding-left: clamp(10px, 1.2vw, 22px); }

.ca-obra-nombre {
  font-size: clamp(24px, 3.4vw, 52px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
  color: #14161c;
}
.ca-obra-meta {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 56px);
  flex-shrink: 0;
  font-size: clamp(12px, 1vw, 15px); color: #7b818d;
}
.ca-obra-anio { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .ca-obra { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ca-obra-meta { gap: 14px; }
}

/* ── El equipo ─────────────────────────────────────────────────────
   Fichas en 4:5. La que tiene retrato lo pinta a sangre; la que no, las
   iniciales sobre su color. Las dos usan el mismo .ca-ficha-foto y el
   resto de la ficha no cambia.

   ERAN CUADRADAS, y con retrato no funcionaba: los retratos del sitio
   son 4:5 (1000x1250) y un marco cuadrado le recorta a la foto un 10%
   arriba y otro abajo. Sobre el papel es poco; en pantalla la cabeza
   quedaba pegada al borde de arriba y la ficha entera se leía como una
   ampliación de la cara. El cuadrado venía de cuando aquí solo había
   iniciales, donde daba igual la proporción.

   4:5 es además la MISMA proporción que .eq-retrato en css/equipo.css.
   Las dos fichas del sitio enseñan ahora la foto igual, que es lo que
   se espera de la misma persona en dos páginas. */
.ca-equipo { background: #fff; padding: clamp(10px, 2vh, 30px) var(--hd-pad) clamp(80px, 12vh, 150px); }
/* auto-fit con un mínimo, en vez de cuatro columnas fijas. Eran cuatro
   porque había cuatro personas y tres estaban inventadas; al quedar una
   sola, una ficha cuadrada ocupaba un cuarto de la fila y los otros tres
   cuartos se quedaban en blanco.

   Con auto-fit la fila se llena con las fichas que haya y cada una
   crece hasta 320px como mucho — sin ese techo, una sola se estiraría a
   los 1440px del contenedor y, con la ficha en 4:5, mediría 1800px de
   alto y se comería la pantalla. El techo importa MÁS desde que la
   ficha dejó de ser cuadrada, no menos. */
.ca-equipo-rejilla {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 320px));
  justify-content: center;
  gap: clamp(14px, 1.6vw, 26px);
}
.ca-ficha {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: clamp(14px, 1.6vw, 26px);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(20,22,28,.08);
}
.ca-ficha-foto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--tono) 0%, #14161c 120%);
}
.ca-ficha-foto span {
  font-size: clamp(48px, 6vw, 92px); font-weight: 700;
  letter-spacing: -.04em; color: rgba(255,255,255,.22);
}
/* EL RETRATO. El <picture> se saca del flujo del flex —que está puesto
   para centrar las iniciales— y se estira a la ficha entera; si se
   dejara como elemento del flex, mediría lo que midiera la imagen y no
   llenaría el marco.

   cover y no contain, igual que en css/equipo.css: un retrato tiene que
   llenar su marco, y con contain una foto de otra proporción dejaría
   franjas a los lados. Con la ficha ya en 4:5 no sobra nada que
   recortar, así que hoy cover y contain se ven igual.

   object-position: center top es el seguro para el día que alguien
   suba un retrato más alto que 4:5: lo que se recorta entonces son los
   pies y no la cara. Misma decisión, y por lo mismo, que .eq-retrato. */
.ca-ficha-foto picture { position: absolute; inset: 0; }
.ca-ficha-foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* El pie se apoya en un degradado y no en una barra: sobre una foto
   real, una barra sólida le cortaría los hombros al retrato. */
.ca-ficha-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 24px);
  text-align: center;
  background: linear-gradient(0deg, rgba(8,9,12,.78) 0%, rgba(8,9,12,.34) 55%, transparent 100%);
}
.ca-ficha-nombre {
  font-size: clamp(15px, 1.35vw, 21px); font-weight: 600;
  letter-spacing: -.015em; color: #fff;
}
.ca-ficha-rol {
  font-family: 'Caveat', cursive;
  font-size: clamp(15px, 1.35vw, 21px); font-weight: 600;
  color: var(--acento, #ff7a1a);
  margin-top: .15em;
}

@media (max-width: 900px) { .ca-equipo-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ca-equipo-rejilla { grid-template-columns: 1fr; } }

/* ── El FAQ ────────────────────────────────────────────────────────
   Dos columnas: el texto a la izquierda y el acordeón a la derecha,
   dentro de un panel blanco que lo despega del gris de la sección. */
.ca-faq { padding: clamp(10px, 2vh, 30px) var(--hd-pad) clamp(80px, 12vh, 150px); }
.ca-faq-caja {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.ca-faq-texto h3 {
  font-size: clamp(19px, 1.7vw, 25px); font-weight: 700;
  letter-spacing: -.02em; color: #14161c; margin-bottom: 16px;
}
.ca-faq-texto p { font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.65; color: #4a5160; }
.ca-faq-texto ul { margin: 20px 0 20px 20px; display: grid; gap: 10px; }
.ca-faq-texto li { font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.55; color: #4a5160; }
.ca-faq-texto li b { color: #14161c; font-weight: 600; }

.ca-faq-panel {
  background: #fff;
  border-radius: clamp(16px, 1.8vw, 28px);
  padding: clamp(16px, 1.8vw, 28px);
  display: grid; gap: 10px;
}
.ca-faq-item { background: #f4f4f6; border-radius: 99px; }
/* Al abrirse deja de ser una píldora: con el radio de 99px una respuesta
   de varias líneas quedaría con los bordes de un óvalo. */
.ca-faq-item.abierta { border-radius: clamp(14px, 1.4vw, 22px); }

.ca-faq-p {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 13px 13px clamp(16px, 1.5vw, 24px);
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: clamp(14px, 1.05vw, 16.5px);
  text-align: left; color: #14161c;
}
/* El signo se dibuja con dos barras y no con un carácter: así girar una
   de ellas lo convierte en menos, sin tocar el texto. */
.ca-faq-mas {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,22,28,.12);
}
.ca-faq-mas::before,
.ca-faq-mas::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px;
  background: #14161c; border-radius: 2px;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.ca-faq-mas::after { transform: rotate(90deg); }
.ca-faq-item.abierta .ca-faq-mas::after { transform: rotate(0deg); }

.ca-faq-r { padding: 0 clamp(16px, 1.5vw, 24px) 16px; }
.ca-faq-r p { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.62; color: #4a5160; }

@media (max-width: 860px) {
  .ca-faq-caja { grid-template-columns: 1fr; }
}

/* ── Los testimonios ───────────────────────────────────────────────
   La cita va en una caja blanca dentro de la ficha gris, y el autor
   debajo sobre el gris: eso separa lo que dice el cliente de quién lo
   dice, sin necesidad de una línea divisoria. */
.ca-testi { padding: clamp(10px, 2vh, 30px) var(--hd-pad) clamp(90px, 13vh, 160px); }
.ca-testi-rejilla {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
}
.ca-testi-ficha {
  margin: 0;
  background: #eceded;
  border-radius: clamp(16px, 1.8vw, 28px);
  padding: clamp(8px, .8vw, 12px);
}
.ca-testi-cita {
  margin: 0;
  background: #fff;
  border-radius: clamp(12px, 1.3vw, 20px);
  padding: clamp(18px, 1.8vw, 28px);
}
.ca-testi-estrellas {
  display: flex; gap: 3px; margin-bottom: 12px;
  color: var(--acento, #ff7a1a); font-size: 14px;
}
.ca-testi-cita p { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: #2c313b; }

.ca-testi-autor {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(14px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px) clamp(8px, .8vw, 12px);
}
.ca-testi-avatar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(155deg, var(--tono) 0%, #14161c 130%);
  color: rgba(255,255,255,.75);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.ca-testi-nombre { display: block; font-size: 15px; font-weight: 600; color: #14161c; }
.ca-testi-rol {
  display: block; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #8b909a; margin-top: 2px;
}

@media (max-width: 900px) { .ca-testi-rejilla { grid-template-columns: 1fr; } }