/*
 * PORTADA — Creativity Media
 * ===========================================================================
 *
 * Se carga SOLO en la portada (functions.php la encola de forma condicional).
 * Todo lo que hay aquí es composición: las piezas, los botones y los colores
 * salen de tokens.css y base.css.
 *
 * LA REGLA QUE GOBIERNA ESTE ARCHIVO: ninguna sección repite la maqueta de la
 * anterior. Hero a sangre → dos columnas con una fija → mosaico irregular →
 * banda de cifras → fila de pasos → cita grande con dos pequeñas → dos columnas
 * invertidas. Siete secciones, siete composiciones.
 */

/* =========================================================================
 * 1. HERO
 * ====================================================================== */

.cm-hero {
  display: flex;
  align-items: flex-end;
  /* svh y no vh: en el móvil, `100vh` cuenta la barra del navegador que se
     esconde al bajar, así que el hero mide más que la pantalla y el nombre
     queda cortado justo al abrir. svh mide la altura REAL disponible. */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--alto-cabecera) + var(--e-6)) var(--e-6);
  /* Fondo de respaldo: si el operador todavía no ha subido imagen ni vídeo, el
     hero no es un rectángulo vacío sino una superficie con intención. */
  background: var(--degradado-pieza);
}

.cm-hero__foto,
.cm-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * EL ENCUADRE DEL MÓVIL SE ELIGE, NO SE DEJA AL AZAR.
 *
 * El banner es apaisado (16:9) y la pantalla de un teléfono es vertical: al
 * recortar por el centro, lo que queda en pantalla es el brazo y la cámara de
 * Enrique, con la cara fuera. Se compararon cuatro encuadres en pantalla real
 * (20 / 38 / 58 / 68 %) y el 58 % es el único que cumple las dos cosas: su cara
 * entra entera arriba y el texto sigue cayendo sobre la zona oscura.
 *
 * En escritorio NO se toca: ahí cabe el banner casi entero y la composición
 * original ya funciona.
 */
@media (max-width: 700px) {
  .cm-hero__foto { object-position: 58% center; }

  /*
   * Y EL VELO SE REFUERZA, PORQUE EL ENCUADRE LO EXIGE.
   *
   * Al traer a Enrique a cuadro entra con él el bloque AMARILLO del banner, y
   * ahí la etiqueta —que es ámbar— caía sobre ámbar: 2.45:1 medido, cuando el
   * mínimo legible es 4.5. El lema se quedaba en 4.43. Ninguno de los dos se
   * veía «mal» a simple vista; se cazaron muestreando los píxeles del fondo
   * real bajo cada línea de texto.
   *
   * El velo arranca suave para no apagar su cara y cierra fuerte desde la mitad,
   * que es donde empieza el texto. En escritorio no hace falta: allí el mismo
   * texto mide entre 8:1 y 9:1.
   */
  .cm-capa__velo--hero {
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, .50) 0%,
      rgba(10, 10, 10, .44) 26%,
      rgba(10, 10, 10, .88) 46%,
      rgba(10, 10, 10, .95) 100%
    );
  }
}

/*
 * El vídeo empieza invisible y aparece cuando tema.js confirma que se ha
 * cargado. Sin esto, mientras descarga se ve un rectángulo negro encima de la
 * fotografía —el fotograma vacío del elemento— y el hero parpadea al entrar.
 */
.cm-hero__video { opacity: 0; transition: opacity var(--transicion-lenta); }
.cm-hero__video[data-cargado='true'] { opacity: 1; }

.cm-hero__cuerpo { width: 100%; }

.cm-hero__etiqueta { color: var(--ambar); }

.cm-hero__nombre {
  /* Se deja fluir: en escritorio entra en una línea y en el móvil parte solo.
     Forzar el corte a mano dejaría una viuda («MEDIA» sola) en anchuras donde no
     hacía ninguna falta. */
  text-wrap: normal;
  margin-bottom: var(--e-3);
  color: var(--hueso);
}

/*
 * EL TEXTO SE QUEDA EN LA MITAD IZQUIERDA — y no es una preferencia de maqueta.
 *
 * El banner de la agencia (BANNER-CREATIVITY) está COMPUESTO: Enrique con su
 * cámara ocupa la mitad derecha y la izquierda es fondo negro con destellos,
 * vacío a propósito. A todo el ancho, «MEDIA» aterrizaba justo encima de su
 * cara — se comprobó en pantalla.
 *
 * Se acota cada pieza de texto en vez del contenedor: el contenedor está
 * centrado con márgenes automáticos y estrecharlo empujaría el bloque al medio
 * de la pantalla en lugar de dejarlo pegado a la izquierda. La cinta de
 * servicios del fondo queda FUERA de la regla: es una línea de ancho completo y
 * ahí no estorba a nadie.
 *
 * Solo desde 1024px: por debajo, la imagen se recorta y Enrique ya no está en
 * la mitad derecha, así que acotar el texto solo dejaría un hueco muerto.
 */
@media (min-width: 1024px) {
  .cm-hero__etiqueta,
  .cm-hero__nombre,
  .cm-hero__lema,
  .cm-hero__acciones { max-width: min(48%, 620px); }
}

.cm-hero__lema {
  max-width: 30ch;
  margin-bottom: var(--e-4);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--hueso);
}

.cm-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
}

/* La cinta de servicios cierra el hero: dice a qué se dedica el estudio sin
   obligar a bajar, y con una línea encima que la separa de las acciones. */
.cm-hero__cinta {
  margin: 0;
  padding-top: var(--e-3);
  border-top: 1px solid rgba(242, 239, 233, .22);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--humo);
}

@media (max-width: 640px) {
  /* En vertical las acciones ocupan el ancho: son los dos únicos objetivos
     táctiles de la primera pantalla y no deben fallarse. */
  .cm-hero__acciones { flex-direction: column; align-items: stretch; }
  .cm-hero__cinta { line-height: 1.8; }
}


/* =========================================================================
 * 2. QUÉ HACEMOS
 * ====================================================================== */

.cm-servicios {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-6) var(--e-7);
  align-items: start;
}

/*
 * La introducción se queda fija mientras la lista pasa por delante. No es un
 * adorno: mantiene visible el «qué es esto» durante la lectura de los seis
 * servicios, que es justo cuando el visitante decide si sigue o se va.
 */
.cm-servicios__intro { position: sticky; top: calc(var(--alto-cabecera) + var(--e-5)); }
.cm-servicios__intro .cm-entradilla { margin-bottom: var(--e-3); }

.cm-servicios__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

/*
 * LAS FILAS — 2026-08-26, tercera pasada.
 *
 * La segunda version era numero chico + titular a cuerpo de parrafo: seis
 * renglones correctos y sosos («esta no me gusta», dijo el dueño mirandola
 * — aunque lo que veia ademas estaba roto por la colision de nombres que
 * cuenta base.css). Esta es el indice grande de las paginas de servicio
 * traido al Home: titular en Anton a cuerpo de cartel, numero perfilado,
 * flecha que solo existe porque la fila ENTERA es un enlace.
 */
.cm-servicio { border-top: 1px solid var(--linea-clara); }
.cm-servicio:first-child { border-top: 0; }
.cm-servicio:first-child .cm-servicio__fila { padding-top: 0; }

.cm-servicio__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: start;
  padding-block: clamp(26px, 3.4vw, 40px);
  color: inherit;
  text-decoration: none;
}

a.cm-servicio__fila:focus-visible {
  outline: 3px solid var(--brasa-texto);
  outline-offset: 4px;
}

.cm-servicio__num {
  font-family: var(--fuente-display);
  letter-spacing: .06em;
}

.cm-servicio__titulo {
  /*
   * El relleno y los margenes negativos se anulan entre si: la maqueta no se
   * mueve un pixel. Estan porque `background-clip: text` solo pinta DENTRO de
   * la caja del elemento, y con line-height .95 la tilde de VIDEOGRAFIA
   * sobresale por arriba: al pasar el raton, titular en degradado... y tilde
   * invisible. Con este aire, la caja alcanza a los acentos.
   */
  padding-block: 0.16em;
  margin: -0.16em 0 calc(var(--e-1) - 0.16em);
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: .95;
  text-transform: uppercase;
  color: var(--tinta);
  transition: color 0.25s ease;
}

/* Al pasar, el titular se llena del calor de la casa. El color plano va
   PRIMERO: es el remate para quien no recorta fondos por texto. */
.cm-servicio__fila:hover .cm-servicio__titulo,
a.cm-servicio__fila:focus-visible .cm-servicio__titulo {
  color: var(--brasa-texto);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cm-servicio__fila:hover .cm-servicio__titulo,
  a.cm-servicio__fila:focus-visible .cm-servicio__titulo {
    background: var(--degradado-calor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.cm-servicio__texto {
  margin: 0;
  max-width: 56ch;
  color: var(--apagado);
}

/* La flecha de las filas-enlace: dormida abajo-izquierda, despierta al pasar.
   Es el mismo gesto honesto de «Tambien hacemos»: solo la llevan las filas
   que de verdad van a algun sitio. */
.cm-servicio__flecha {
  align-self: center;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1;
  color: var(--brasa-texto);
  opacity: 0.3;
  transform: translate(-6px, 6px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cm-servicio__fila:hover .cm-servicio__flecha,
a.cm-servicio__fila:focus-visible .cm-servicio__flecha {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 900px) {
  .cm-servicios { grid-template-columns: 1fr; gap: var(--e-5); }
  /* En una columna, un elemento fijo se quedaría pegado tapando la lista. */
  .cm-servicios__intro { position: static; }
  /*
   * AQUÍ HABÍA UNA LÍNEA QUE BAJABA EL PRIMER SERVICIO A --fs-h3.
   *
   * Hacía lo contrario de lo que pretendía: el mínimo de --fs-h3 (1,35rem =
   * 21,6 px) es EXACTAMENTE el tamaño de los otros cinco titulares en el
   * teléfono, así que el elemento que ancla la composición asimétrica quedaba
   * indistinguible del resto. Seis renglones iguales. La jerarquía que sostiene
   * la sección desaparecía justo en la pantalla donde no hay ancho para
   * sostenerla de otra manera.
   *
   * El tamaño de los seis lo fija ahora el bloque «SEIS RENGLONES PASAN A SEIS
   * RÓTULOS» del final del archivo, que además impide que ninguno parta en dos
   * líneas.
   */
}


/* =========================================================================
 * 3. PORTAFOLIO DESTACADO — mosaico
 * ====================================================================== */

.cm-titular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}
.cm-titular h2 { margin: 0; }

/*
 * MOSAICO IRREGULAR sobre doce columnas.
 *   fila 1 → una pieza de 7 y otra de 5
 *   fila 2 → tres piezas de 4
 * Las dos primeras se estiran a la misma altura solas (el `stretch` que la
 * rejilla aplica por defecto), así que no hay que igualarlas a mano.
 */
.cm-mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-2);
}

.cm-mosaico > * { grid-column: span 4; }
.cm-mosaico > *:nth-child(1) { grid-column: span 7; }
.cm-mosaico > *:nth-child(2) { grid-column: span 5; }

/* La altura de las piezas pequeñas se fija AQUÍ y con un selector más
   específico que el de base.css: si se pusiera en `.cm-mosaico > *` pisaría
   también las alturas de las dos grandes, que son las que sostienen la
   composición. */
.cm-mosaico > *:nth-child(n+3) { min-height: clamp(280px, 28vw, 380px); }

@media (max-width: 900px) {
  /* En móvil el mosaico se convierte en una columna: una rejilla irregular en
     360 px de ancho no es irregular, es ilegible. */
  .cm-mosaico > *,
  .cm-mosaico > *:nth-child(1),
  .cm-mosaico > *:nth-child(2) { grid-column: 1 / -1; }
  .cm-mosaico > *:nth-child(n+3) { min-height: 300px; }
}


/* =========================================================================
 * 4. CIFRAS — banda ámbar
 * ====================================================================== */

.cm-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--e-4);
}

.cm-cifra { border-top: 2px solid var(--ambar-tinta); padding-top: var(--e-2); }

.cm-cifra__valor {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: .9;
  letter-spacing: var(--tracking-cartel);
  color: var(--ambar-tinta);
}
/* La celda de la zona lleva una palabra en vez de un número: al mismo cuerpo
   que las cifras se comería la línea siguiente. */
.cm-cifra__valor--corto { font-size: clamp(2.2rem, 5vw, 3.6rem); }

.cm-cifra__texto {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ambar-tinta);
}


/* =========================================================================
 * 5. PROCESO
 * ====================================================================== */

.cm-proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--e-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-paso { border-top: 1px solid var(--negro-borde); padding-top: var(--e-3); }

.cm-paso__num {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--fuente-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brasa);
}

.cm-paso__titulo { margin: 0 0 var(--e-1); font-size: var(--fs-h4); color: var(--hueso); }
.cm-paso__texto { margin: 0; font-size: var(--fs-chico); color: var(--humo); }


/* =========================================================================
 * 6. TESTIMONIOS
 * ====================================================================== */

/*
 * Una cita grande a la izquierda y las secundarias apiladas a la derecha. La
 * grande ocupa las dos filas: es la que se lee, las otras dos la respaldan.
 */
.cm-opiniones {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-4);
  align-items: start;
}

.cm-opinion {
  margin: 0;
  padding: var(--e-4);
  background: var(--blanco);
  border-radius: var(--radio-pieza);
  box-shadow: var(--sombra-1);
}

/*
 * La primera columna es `auto` y el ancho lo pone la propia foto. Con un valor
 * fijo (160px), un testimonio cuyo proyecto no tenga imagen destacada dejaría
 * una columna vacía de 160 px y la cita aparecería descolgada hacia la derecha
 * sin motivo visible. Con `auto`, si no hay foto la columna no ocupa nada.
 */
.cm-opinion--grande {
  grid-row: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}
.cm-opinion--grande .cm-opinion__foto { width: 160px; }

/* Con un solo testimonio publicado, la columna derecha quedaría vacía y la
   sección parecería a medio cargar. */
.cm-opiniones > :only-child { grid-column: 1 / -1; }

.cm-opinion__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio-pieza);
}

.cm-opinion__cita { margin: 0; }
.cm-opinion__cita p {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--tinta);
}
/* Las comillas las pone el CSS y no el editor: así ninguna cita sale con unas y
   otra sin ellas según quién la escribiera. */
.cm-opinion__cita p::before { content: '\201C'; }
.cm-opinion__cita p::after  { content: '\201D'; }

.cm-opinion--grande .cm-opinion__cita p { font-size: clamp(1.2rem, 2vw, 1.6rem); }

.cm-opinion__pie {
  margin-top: var(--e-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1);
  font-size: var(--fs-chico);
}
.cm-opinion__autor { font-weight: var(--peso-fuerte); color: var(--tinta); }
.cm-opinion__proyecto { color: var(--brasa-texto); }

/* En la cita grande, el pie va bajo el texto y no bajo la foto. */
.cm-opinion--grande .cm-opinion__cita,
.cm-opinion--grande .cm-opinion__pie { grid-column: 2; }

@media (max-width: 900px) {
  .cm-opiniones { grid-template-columns: 1fr; }
  .cm-opinion--grande { grid-row: auto; grid-template-columns: 1fr; }
  .cm-opinion--grande .cm-opinion__foto { max-width: 160px; }
  .cm-opinion--grande .cm-opinion__cita,
  .cm-opinion--grande .cm-opinion__pie { grid-column: 1; }
}


/* =========================================================================
 * 7. CONTACTO
 * ====================================================================== */

/*
 * Se invierte la proporción respecto a la sección de servicios (allí 5/7, aquí
 * 5/7 pero con el peso visual a la derecha, en el formulario). El texto
 * convence; el formulario convierte, así que es el que ocupa.
 */
.cm-contacto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-6) var(--e-7);
  align-items: start;
}

.cm-contacto__intro .cm-entradilla { margin-bottom: var(--e-4); }

/* El teléfono es el canal que SIEMPRE funciona, incluso si el correo del
   servidor está caído. Por eso se pinta como dato principal, no como un enlace
   más de un párrafo. */
.cm-contacto__telefono {
  display: inline-block;
  min-height: 48px;
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-titulo);
  color: var(--hueso);
  text-decoration: none;
}
.cm-contacto__telefono:hover { color: var(--ambar); }

.cm-contacto__caja {
  padding: var(--e-4);
  background: var(--negro-suave);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-pieza);
}

.cm-formulario__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0 var(--e-3);
}

@media (max-width: 900px) {
  .cm-contacto { grid-template-columns: 1fr; gap: var(--e-5); }
  .cm-contacto__caja { padding: var(--e-3); }
}


/* =========================================================================
 * EL TELÉFONO — el cartel vuelve a ser un cartel
 * -------------------------------------------------------------------------
 * Todo lo de aquí abajo existe por una sola medida: de escritorio a teléfono,
 * el H1 del hero pasa de 176 px a 54,6 px y su bloque de ocupar el 34,4 % de
 * la primera pantalla a ocupar el 5,7 %. En 1440 «CREATIVITY / MEDIA» es un
 * cartel de dos líneas; en 390 era un renglón perdido entre una foto y un
 * botón. La identidad de esta casa ES ese cartel, y en el teléfono estaba
 * apagada.
 * ====================================================================== */

/*
 * UNA PALABRA POR LÍNEA, EN TODAS LAS PANTALLAS.
 *
 * El corte se hace en el marcado (un <span> por palabra, ver front-page.php) y
 * no se deja al azar del ancho disponible: con 22vw el nombre partía en dos a
 * 360 y en una sola línea a 390, así que el mismo hero se veía distinto según
 * el teléfono. Además es lo que ya hace el escritorio por su cuenta: en 1440
 * «CREATIVITY» y «MEDIA» caen en líneas separadas. Aquí solo se hace explícito.
 */
.cm-cartel__linea { display: block; }

@media (max-width: 900px) {

  /*
   * EL SEGURO DE ANCHO.
   *
   * Medida real de Anton: «CREATIVITY» ocupa 3,995 px de ancho por cada píxel
   * de cuerpo. Con 22vw en una pantalla de 320 px sobran 2,8 px — o sea, no
   * sobran: cualquier redondeo o el respaldo de fuente mientras Anton carga se
   * sale por el lado derecho.
   *
   * El `min()` mide la palabra MÁS LARGA DEL NOMBRE REAL DEL SITIO
   * (--cartel-caracteres lo pone functions.php) y el 0.435 es la métrica de
   * Anton en mayúsculas con un 9 % de margen para nombres con letras más
   * anchas. Si el dueño renombra el sitio, el cuerpo baja solo en vez de
   * desbordar: eso es lo que separa esto de un número mágico.
   */
  .cm-hero__nombre {
    font-size: min(
      var(--fs-cartel),
      calc((100vw - var(--canal) * 2) / (var(--cartel-caracteres, 10) * 0.435))
    );
    margin-bottom: var(--e-3);
  }

  /*
   * LA ETIQUETA PASA A SER UN SELLO ÁMBAR CON TINTA NEGRA.
   *
   * No es maquillaje: es la corrección de un fallo de contraste real. La
   * etiqueta va en ámbar sobre la fotografía, y el banner de la agencia tiene
   * un BLOQUE AMARILLO detrás de Enrique. Muestreando el píxel del fondo real
   * (no el color declarado) daba 3,10:1 a 360 y 3,21:1 a 320 — por debajo del
   * 4,5 obligatorio. A 390 se salvaba por poco (5,13:1) porque el nombre cabía
   * en una línea y el bloque de texto quedaba más abajo; al subir el cartel a
   * dos líneas, la etiqueta sube con él y el fallo se extendería a todos los
   * anchos.
   *
   * Reforzar el velo lo arreglaría pero apagaría la cara de Enrique, que ES la
   * marca. El sello lleva su propio fondo: da 10,3:1 pase lo que pase detrás
   * —hoy, con otra fotografía o con el vídeo del Personalizador— y de paso es
   * más de cartel que un texto flotando.
   */
  .cm-hero__etiqueta {
    padding: 7px 12px;
    background: var(--ambar);
    color: var(--ambar-tinta);
    letter-spacing: .14em;
  }

  /* Ver la nota larga en front-page.php: con las tres ciudades el sello parte
     en dos líneas y tapa la cara de Enrique. El dato sigue en el lema, en la
     banda de cifras y en el pie. */
  .cm-hero__zona { display: none; }
}


/* -------------------------------------------------------------------------
 * LOS REELS SUBEN AL SEGUNDO PUESTO: LA COSTURA
 * -------------------------------------------------------------------------
 * El hero acaba en negro y la sección de reels empieza en negro, así que sin
 * nada en medio las dos superficies se leen como una sola y el cartel pierde
 * su suelo. La costura es una línea ámbar a todo lo ancho: no es decoración,
 * es el borde inferior del cartel.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cm-hero { border-bottom: 3px solid var(--ambar); }
}


/* -------------------------------------------------------------------------
 * DEUDAS TÁCTILES QUE YA EXISTÍAN
 * -------------------------------------------------------------------------
 * Medido a 390: treinta y cinco objetivos por debajo de 44x44 px. Los de los
 * reels se arreglan en reels.css; estos son los de la portada y la cinta.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  /*
   * LOS SEIS SERVICIOS SON ENLACES DE 32 PX DE ALTO.
   *
   * El <a> va dentro del <h3> y es `inline`, así que su caja es la de la línea
   * de texto —21,2 px— y no la del titular. Con `inline-block` y 12 px de
   * relleno arriba y abajo la zona pulsable llega a 45,2, y el margen negativo
   * del titular devuelve esos 12 px para que la maqueta no se mueva ni un
   * píxel: 21,2 + 24 de relleno − 24 de margen = exactamente donde estaba.
   */
  /* (Aqui vivia el remiendo del <a> inline de 32 px dentro del titular.
     Ya no hace falta: la fila entera es el enlace y mide mas de 90 px.) */

  .cm-contacto__intro a { display: inline-flex; align-items: center; min-height: 44px; }
  .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
}


/* =========================================================================
 * EL CARTEL TAMBIÉN CABE EN EL TELÉFONO
 * -------------------------------------------------------------------------
 * El hero ya se arregló arriba. Esto es todo lo que viene DEBAJO del hero, que
 * se quedó con la escala plana. Medido a 390 contra 1440, antes de este bloque:
 *
 *   titular de sección   32 px  ·  57,6      primer servicio  21,6  ·  54,4
 *   cifra                51,2   ·  96        teléfono         28,8  ·  44,8
 *
 * En el escritorio la página es un cartel; en el teléfono era un folleto. Y el
 * teléfono es donde mira casi todo el mundo el trabajo de un estudio.
 *
 * Cero bytes nuevos: ni una imagen, ni una fuente, ni una línea de guion.
 * ====================================================================== */


/* --- Los seis renglones pasan a seis rótulos -------------------------- */

@media (max-width: 900px) {
  /*
   * El número sale de la columna izquierda y se convierte en etiqueta encima.
   * No es un capricho de maqueta: en una sola columna el número se comía entre
   * 28 y 34 px de los 354 disponibles, que es justo lo que le falta al titular
   * para no partirse en dos líneas.
   */
  .cm-servicio__fila {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-1) var(--e-2);
  }

  /* El numero-etiqueta arriba, el cuerpo debajo, la flecha centrada al lado. */
  .cm-servicio__cuerpo { grid-column: 1; }

  .cm-servicio__flecha {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* (El numero ya no baja a etiqueta: el bloque de numeros perfilados de
     mas abajo manda tambien aqui, y a proposito — es el idioma de las
     paginas de servicio, tambien en el telefono.) */

  /*
   * LOS SEIS AL MISMO TAMAÑO Y GRANDES, con el primero manteniendo su papel por
   * la ausencia de línea superior y por el aire de arriba, no por el cuerpo.
   *
   * El `min()` es el seguro: 6.8 es «Desarrollo web» —el titular más ancho—
   * medido en anchos de em de la cara real con un margen del 6 %. Si el dueño
   * añade un servicio de nombre más largo desde el Personalizador, el cuerpo
   * baja solo en vez de partir la palabra o desbordar. Sin el seguro esto sería
   * un número mágico que aguanta hasta el día que alguien escriba
   * «Producción audiovisual».
   */
  .cm-servicio__titulo,
  .cm-servicio:first-child .cm-servicio__titulo {
    font-size: min(
      clamp(1.9rem, 11.5vw, 3rem),
      calc((100vw - var(--canal) * 2) / 6.8)
    );
    line-height: .98;
  }

  .cm-servicio__texto { font-size: var(--fs-chico); }
}


/* --- La banda ámbar recupera cuerpo de cartel -------------------------- */

@media (max-width: 700px) {
  .cm-cifras { gap: var(--e-5); }
  .cm-cifra__valor        { font-size: clamp(3.2rem, 22vw, 6rem); }     /* 85,8 px, era 51,2 */
  .cm-cifra__valor--corto { font-size: clamp(2.2rem, 15vw, 3.6rem); }
}


/* --- El proceso: hoy manda el número sobre el nombre del paso ---------- */

/*
 * Medido: el número mide 38,4 px y el nombre del paso 18,4. Es decir, en la
 * sección que explica CÓMO se trabaja, lo que se lee primero es «02».
 *
 * El número pasa a contorno —es orientación, no contenido— y se coloca al lado
 * en vez de encima, que además devuelve una línea de alto por paso.
 */
@media (max-width: 900px) {
  .cm-paso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--e-2);
  }
  .cm-paso__num {
    grid-row: span 2;
    margin: 0;
    font-size: 2.6rem;
    line-height: .86;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--brasa);
  }
  .cm-paso__titulo {
    font-size: clamp(1.5rem, 7vw, 1.9rem);   /* 27,3 px, era 18,4 */
    align-self: end;
  }
  .cm-paso__texto { grid-column: 2; }
}

/* Un navegador sin -webkit-text-stroke dejaría el número INVISIBLE, no en
   contorno. Se le devuelve el relleno. */
@supports not (-webkit-text-stroke: 1px red) {
  .cm-paso__num { color: var(--brasa); }
}


/* --- El teléfono es el botón que nunca falla -------------------------- */

/*
 * Si el correo del servidor está caído, el formulario no sirve y el teléfono
 * sigue funcionando. En el escritorio se pinta a 44,8 px y en el teléfono
 * —donde además se puede PULSAR para llamar— se quedaba en 28,8.
 */
@media (max-width: 700px) {
  .cm-contacto__telefono { font-size: clamp(1.8rem, 11vw, 2.8rem); }
}

/* =========================================================================
 * LOS NÚMEROS, PERFILADOS — la pasada del 2026-08-26
 * =========================================================================
 * El dueño pidió subir el nivel de las secciones bajo el hero en TODO el
 * sitio. El gesto que las une es el de las páginas de servicio: número
 * grande solo perfilado que se rellena al pasar, con la barra de calor
 * creciendo por la izquierda.
 *
 * Cada fondo usa su tinta: sobre hueso el ámbar puro no contrasta (2.1:1),
 * así que ahí el perfil es el terracota oscurecido de los enlaces.
 * ====================================================================== */

/* ---- «Qué hacemos» (fondo hueso) ---- */

.cm-servicio {
  position: relative;
  padding-left: 22px;
}

.cm-servicio::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--degradado-calor);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.cm-servicio:hover::before,
.cm-servicio:focus-within::before { transform: scaleY(1); }

.cm-servicio__num {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brasa-texto);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.cm-servicio:hover .cm-servicio__num,
.cm-servicio:focus-within .cm-servicio__num { color: var(--brasa-texto); }

@supports not (-webkit-text-stroke: 1px black) {
  .cm-servicio__num { color: var(--brasa-texto); }
}

/* ---- «Cómo trabajamos» (fondo negro) ---- */

.cm-paso {
  position: relative;
  padding-left: 20px;
}

.cm-paso::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--degradado-calor);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.cm-paso:hover::before { transform: scaleY(1); }

.cm-paso__num {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ambar);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.cm-paso:hover .cm-paso__num { color: var(--ambar); }

@supports not (-webkit-text-stroke: 1px black) {
  .cm-paso__num { color: var(--ambar); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-servicio::before,
  .cm-paso::before,
  .cm-servicio__num,
  .cm-paso__num,
  .cm-servicio__titulo,
  .cm-servicio__flecha { transition: none; }

  .cm-servicio__flecha { transform: none; opacity: 0.6; }
}

/* =========================================================================
 * EL HOME, SEGUNDA PASADA — 2026-08-26
 * =========================================================================
 * El dueño: «lo que no me gusta es el Home». Tres gestos más, con las
 * mismas dos tipografías y la misma paleta:
 *
 *   · El titular del hero mezcla relleno y perfil: CREATIVITY sólido,
 *     MEDIA solo perfilado. Es el gesto tipográfico de la casa aplicado a
 *     la palabra más grande del sitio.
 *   · Las cifras de la banda ámbar, perfiladas en negro y rellenándose al
 *     pasar — el mismo idioma que los números del resto del sitio.
 *   · El panel del formulario con la esquina cortada: la firma geométrica
 *     que evita el enésimo rectángulo redondeado.
 * ====================================================================== */

/* ---- El titular: sólido + perfil ----
   Va por :last-child y no con una clase en el marcado: el H1 se parte por
   palabras desde PHP para sobrevivir a un renombre del sitio, y esta regla
   hereda esa misma virtud. Con una sola palabra no habría perfil — con el
   nombre actual (dos palabras) perfila la segunda. */

.cm-hero__nombre .cm-cartel__linea:last-child {
  color: transparent;
  -webkit-text-stroke: 2px var(--hueso);
}

@supports not (-webkit-text-stroke: 1px black) {
  .cm-hero__nombre .cm-cartel__linea:last-child { color: var(--hueso); }
}

/* ---- Las cifras, perfiladas sobre el ámbar ---- */

.cm-cifra__valor {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ambar-tinta);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.cm-cifra:hover .cm-cifra__valor { color: var(--ambar-tinta); }

@supports not (-webkit-text-stroke: 1px black) {
  .cm-cifra__valor { color: var(--ambar-tinta); }
}

/* ---- El panel del formulario: la esquina cortada ---- */

.cm-contacto__caja {
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cm-cifra__valor { transition: none; }
}

/* =========================================================================
 * LA PANTALLA DE CARGA — la cámara que dispara
 * =========================================================================
 * Markup en front-page.php · guion en assets/js/carga.js
 *
 * El velo existe SOLO si el script en línea puso `cm-cargando` en <html>:
 * sin JavaScript esa clase no existe y esto se queda en display:none. Con
 * menos-movimiento, fuera de raíz — un fogonazo a pantalla completa es lo
 * primero que esa preferencia viene a evitar.
 * ====================================================================== */

.cm-carga { display: none; }

html.cm-cargando { overflow: hidden; }

html.cm-cargando .cm-carga {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--negro);
  color: var(--hueso);
}

@media (prefers-reduced-motion: reduce) {
  .cm-carga { display: none !important; }
  html.cm-cargando { overflow: auto; }
}

/* =========================================================================
 * SEGUNDA VERSION — 2026-08-27: la coreografia
 * -------------------------------------------------------------------------
 * El dueño: «quiero que sea mucho mas elaborada». Cinco gestos, en orden:
 * el visor entra, la camara se dibuja trazo a trazo, el anillo de enfoque
 * busca el punto, la barra de progreso crece, y al estar lista: foco
 * clavado, fogonazo y el obturador que se abre en dos hojas.
 *
 * Todo esta en CSS. carga.js solo pone tres clases: --lista, --flash y
 * --fuera. Cada `animation-delay` de aqui es un compas de la partitura.
 * ====================================================================== */

/* ---- Las dos hojas del obturador ----
   Del mismo negro que el velo: invisibles hasta que se abren. */
.cm-carga__mitad {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--negro);
  transition: transform 0.62s cubic-bezier(0.7, 0, 0.2, 1);
}

.cm-carga__mitad--arriba { top: 0; }
.cm-carga__mitad--abajo  { bottom: 0; }

/* ---- El visor: el marco de una camara ---- */
.cm-carga__visor {
  position: relative;
  z-index: 1;
  width: min(520px, 86vw);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  animation: cm-visor-entra 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes cm-visor-entra {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: none;        opacity: 1; }
}

/* Las cuatro esquinas, dibujadas con dos bordes cada una. */
.cm-carga__esquina {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--hueso);
  opacity: 0;
  animation: cm-esquina 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}

.cm-carga__esquina--ai { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.cm-carga__esquina--ad { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.cm-carga__esquina--bi { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.cm-carga__esquina--bd { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

@keyframes cm-esquina {
  from { opacity: 0;   transform: scale(0.4); }
  to   { opacity: 0.7; transform: none; }
}

/* Los datos de rodaje: pequeños, apagados, de camara de verdad. */
.cm-carga__dato {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-texto);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--humo);
  opacity: 0;
  animation: cm-dato 0.5s ease-out 0.5s forwards;
}

.cm-carga__dato--ai { top: 10px;    left: 32px; }
.cm-carga__dato--ad { top: 10px;    right: 32px; }
.cm-carga__dato--bi { bottom: 10px; left: 32px; }
.cm-carga__dato--bd { bottom: 10px; right: 32px; }

@keyframes cm-dato { to { opacity: 0.8; } }

/* El punto de REC: parpadea a golpes, como el de verdad. */
.cm-carga__rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  animation: cm-rec 1s steps(1) infinite;
}

@keyframes cm-rec { 50% { opacity: 0; } }

/* ---- El cuerpo: camara, rotulo y barra ---- */
.cm-carga__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3, 20px);
}

.cm-carga__camara {
  width: clamp(96px, 13vw, 140px);
  height: auto;
  overflow: visible;
}

/*
 * LA CAMARA SE DIBUJA A SI MISMA. Cada trazo lleva pathLength="1" en el
 * marcado, asi que su longitud es 1 y el dibujo es llevar el desfase de la
 * raya de 1 a 0 — sin medir nada. Empieza invisible y se enciende en los
 * primeros milisegundos: con remate redondo, un trazo de longitud cero se
 * pintaria como un punto, y eso se veia.
 */
.cm-carga__trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: cm-trazo 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cm-carga__trazo--1 { animation-delay: 0.2s; }
.cm-carga__trazo--2 { animation-delay: 0.55s; animation-duration: 0.45s; }
.cm-carga__trazo--3 { animation-delay: 0.8s;  animation-duration: 0.6s; }
.cm-carga__trazo--4 { animation-delay: 1.15s; animation-duration: 0.35s; stroke: var(--ambar); }

@keyframes cm-trazo {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  6%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* El anillo de enfoque: marcas alrededor de la lente que giran buscando. */
.cm-carga__anillo {
  stroke: var(--humo);
  stroke-width: 1.2;
  stroke-dasharray: 0.6 2.4;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation:
    cm-anillo-entra 0.4s ease-out 1s forwards,
    cm-enfoque 2.4s cubic-bezier(0.45, 0, 0.2, 1) 1s infinite;
}

@keyframes cm-anillo-entra { to { opacity: 0.55; } }

@keyframes cm-enfoque {
  0%   { transform: rotate(0); }
  40%  { transform: rotate(28deg); }
  70%  { transform: rotate(-12deg); }
  100% { transform: rotate(0); }
}

/* El iris aparece cuando la lente termina de dibujarse, y respira con el anillo. */
.cm-carga__iris {
  fill: var(--ambar);
  stroke: none;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation:
    cm-iris-entra 0.3s ease-out 1.25s forwards,
    cm-iris 2.4s ease-in-out 1.25s infinite;
}

@keyframes cm-iris-entra { to { opacity: 1; } }

@keyframes cm-iris {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(0.55); }
  70%      { transform: scale(1.18); }
}

/* El rotulo: las letras vienen de lejos y se asientan en su espaciado. */
.cm-carga__rotulo {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--humo);
  opacity: 0;
  animation: cm-rotulo 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s forwards;
}

@keyframes cm-rotulo {
  from { opacity: 0; letter-spacing: 0.7em; }
  to   { opacity: 1; letter-spacing: 0.26em; }
}

/* La barra: crece sola hasta el 88 % y al estar lista salta al 100. Una
   barra que llega sola al 100 y se queda quieta miente. */
.cm-carga__barra {
  width: 168px;
  height: 2px;
  background: rgba(242, 239, 233, 0.14);
  overflow: hidden;
}

.cm-carga__progreso {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ambar);
  animation: cm-progreso 2s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s forwards;
  transition: width 0.25s ease-out;
}

@keyframes cm-progreso { to { width: 88%; } }

/* ---- LISTA: foco conseguido ---- */
.cm-carga--lista .cm-carga__progreso { animation: none; width: 100%; }
.cm-carga--lista .cm-carga__iris     { animation: none; opacity: 1; transform: scale(1); }
.cm-carga--lista .cm-carga__anillo   { animation: none; opacity: 0.55; transform: none; }

/* ---- El disparo ---- */
.cm-carga__flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--blanco);
  opacity: 0;
  pointer-events: none;
}

.cm-carga--flash .cm-carga__flash {
  animation: cm-fogonazo 0.45s ease-out forwards;
}

/* La camara «encoge» al disparar, como un obturador que se aprieta. */
.cm-carga--flash .cm-carga__cuerpo {
  animation: cm-obturador 0.45s ease-out;
}

@keyframes cm-fogonazo {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cm-obturador {
  0%   { transform: scale(1); }
  18%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ---- La salida: el obturador se abre ----
   El velo suelta su fondo, el visor se apaga, y las dos hojas se van cada
   una por su lado descubriendo la portada. La especificidad es la que es
   porque el fondo negro lo fija tambien el CSS critico en linea del
   marcado, y hay que ganarle. */
html.cm-cargando .cm-carga.cm-carga--fuera {
  background: transparent;
  pointer-events: none;
}

/*
 * EL VISOR SE QUITA EN EL ACTO, Y CON display — 2026-08-27.
 *
 * La primera version lo desvanecia con `opacity: 0`. En produccion se
 * quedaba pintado encima de la portada: el visor entra con una animacion de
 * `animation-fill-mode: both`, y el valor final de una animacion GANA a
 * cualquier declaracion normal de la cascada — el `opacity: 0` nunca llego
 * a aplicarse. El dueño lo vio: «queda la silueta». `display: none` no
 * compite con la animacion: la corta. Y ademas es lo que pidio: que se
 * quite instantaneamente en cuanto se abre el obturador.
 */
.cm-carga--fuera .cm-carga__visor {
  display: none;
  animation: none;
}

.cm-carga--fuera .cm-carga__mitad--arriba { transform: translateY(-100%); }
.cm-carga--fuera .cm-carga__mitad--abajo  { transform: translateY(100%); }

/* =========================================================================
 * EL MANIFIESTO — la banda ambar, tercera vida (2026-08-26)
 * =========================================================================
 * Antes: tres cifras perfiladas (37 / 6 / Aqui). El dueño: «que no sea de
 * numeros, que sea algo diferente». Ahora es la promesa de estandar de la
 * casa a cuerpo de cartel, con el gesto del hero (linea llena + linea
 * perfilada), la palabra fantasma detras y la zona como etiqueta. Las
 * reglas de .cm-cifra quedan mas arriba [sin uso] por la regla de la casa.
 * ====================================================================== */

/* El fantasma de base.css perfila en hueso (esta pensado para fondo negro).
   Sobre ambar se perfila en tinta, apenas insinuado. */
.cm-manifiesto .cm-fantasma {
  -webkit-text-stroke-color: rgba(18, 17, 16, 0.09);
}

.cm-manifiesto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-5) var(--e-7);
  align-items: end;
}

/* .cm-etiqueta es ambar de serie: sobre la propia banda ambar seria
   invisible. Aqui todo escribe con la tinta del fondo. */
.cm-manifiesto__etiqueta { color: var(--ambar-tinta); }

.cm-manifiesto__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ambar-tinta);
}

.cm-manifiesto__linea { display: block; }

.cm-manifiesto__linea--perfil {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ambar-tinta);
}

@supports not (-webkit-text-stroke: 1px black) {
  .cm-manifiesto__linea--perfil { color: var(--ambar-tinta); }
}

.cm-manifiesto__lado {
  border-top: 2px solid var(--ambar-tinta);
  padding-top: var(--e-3);
}

.cm-manifiesto__lado p {
  margin: 0 0 var(--e-3);
  max-width: 46ch;
  color: var(--ambar-tinta);
}

.cm-manifiesto__enlace { color: var(--ambar-tinta); }
.cm-manifiesto__enlace::after { background: var(--ambar-tinta); }

@media (max-width: 900px) {
  .cm-manifiesto__rejilla {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
}

/* --- Las cifras, como pie de la banda del manifiesto ------------------ */

/*
 * DELIBERADAMENTE PEQUEÑAS. El dueño pidió que esta banda «no sea de
 * números» y también recuperar las cifras del sitio anterior. Se cumplen
 * las dos porque el manifiesto sigue mandando a cuerpo de cartel y esto
 * es una línea al pie: el valor en Anton a tamaño de párrafo grande, el
 * rótulo encima en versalitas. Se leen, no gritan.
 *
 * <dl> y no <ul>: cada cifra es un término y su valor. El rótulo va de
 * <dt> y el número de <dd>, aunque visualmente el número quede debajo —
 * el orden de lectura y el visual coinciden gracias a `column`.
 */
.cm-manifiesto__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  margin: var(--e-5) 0 0;
  padding-top: var(--e-3);
  border-top: 1px solid rgba(18, 17, 16, 0.25);
}

.cm-manifiesto__cifra {
  display: flex;
  flex-direction: column;
}

.cm-manifiesto__cifra-texto {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambar-tinta);
  opacity: .75;
}

.cm-manifiesto__cifra-valor {
  margin: 2px 0 0;
  font-family: var(--fuente-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: var(--ambar-tinta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .cm-manifiesto__cifras { gap: var(--e-3) var(--e-4); }
}