/*
 * BASE — Creativity Media
 * ===========================================================================
 *
 * El esqueleto que comparten TODAS las páginas: reinicio, tipografía, cabecera,
 * pie, botones, formularios, prosa, la pieza de portafolio compartida y las
 * utilidades de composición (capas sobre fotografía, sangrado, apariciones).
 *
 * Aquí NO hay ni un color, ni un tamaño, ni un radio escrito a mano: todo sale
 * de tokens.css. Si aparece un #hex en este archivo, es un error.
 *
 * ORDEN DE LECTURA
 *   1. Reinicio y documento          7. Cabecera y navegación
 *   2. Accesibilidad                 8. Pie
 *   3. Maqueta y fondos              9. Formularios
 *   4. Titulares y prosa            10. Pieza de portafolio (compartida)
 *   5. Utilidades de composición    11. Listados y paginación
 *   6. Botones                      12. Movimiento y cursor
 */

/* =========================================================================
 * 1. REINICIO Y DOCUMENTO
 * ====================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* La cabecera es fija: sin esto, pulsar un enlace de ancla deja el destino
     escondido DEBAJO del menú y el visitante cree que el enlace no funciona. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-3));
  scroll-behavior: smooth;
}

/* El desplazamiento suave es decorativo: quien pide menos movimiento lo pierde. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--fuente-texto);
  font-size: var(--fs-texto);
  font-weight: var(--peso-texto);
  line-height: var(--interlineado);
  /* La grotesca de Archivo mejora mucho con estas dos: sin ellas los textos
     largos sobre negro se ven más gruesos de lo que son. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Las páginas SIN hero a pantalla completa empiezan bajo la cabecera fija. Las
   que sí lo tienen (portada y ficha de proyecto) lo hacen a propósito por
   debajo, y por eso la clase se pone desde PHP y no al revés. */
body:not(.cm-con-hero) { padding-top: var(--alto-cabecera); }

/* Mientras el menú móvil está abierto, la página de detrás no debe seguir
   desplazándose bajo el panel: al cerrarlo el visitante habría perdido el sitio
   donde estaba leyendo. */
body.cm-bloqueado { overflow: hidden; }

img,
picture,
video,
svg,
iframe { max-width: 100%; display: block; }

img,
video { height: auto; }

/* Las fotografías del portafolio nunca se deforman: se recortan. Un logo de
   cliente estirado es peor que no enseñarlo. */
img { object-fit: cover; }

a { color: var(--ambar); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ambar-oscuro); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

::selection { background: var(--ambar); color: var(--ambar-tinta); }

/* Barras de scroll: la clara del sistema corta el negro con una franja blanca
   en el borde derecho de todas las pantallas. */
html { scrollbar-color: var(--negro-borde) var(--negro); }


/* =========================================================================
 * 2. ACCESIBILIDAD
 * ====================================================================== */

/* Visible SOLO para lectores de pantalla. */
.cm-solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: aparece al tabular, primero de todo. */
.cm-saltar {
  position: absolute;
  top: -100px; left: var(--canal);
  z-index: 200;
  padding: 12px 20px;
  background: var(--ambar);
  color: var(--ambar-tinta);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: top var(--transicion);
}
.cm-saltar:focus { top: 12px; color: var(--ambar-tinta); }

/*
 * Anillo de foco. :focus-visible y no :focus, para que el anillo aparezca al
 * navegar con teclado y no al hacer clic con el ratón — que es lo que lleva a
 * los desarrolladores a quitarlo con outline:none y dejar el sitio inutilizable
 * para quien no usa ratón.
 * El desplazamiento hacia fuera es obligatorio: sobre una fotografía, un anillo
 * pegado al borde se confunde con el propio marco de la imagen.
 */
:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}

/* Objetivo táctil mínimo de 44 px en todo lo que se pulsa. */
a,
button,
[role='button'],
summary,
input[type='submit'] { touch-action: manipulation; }


/* =========================================================================
 * 3. MAQUETA Y FONDOS
 * ====================================================================== */

.cm-principal {
  /* `clip` y no `hidden`: recorta el desbordamiento horizontal de las piezas a
     sangre SIN convertir el elemento en un contenedor de scroll, que es lo que
     rompería position:sticky dentro. */
  overflow-x: clip;
}

.cm-contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.cm-contenedor--medio { max-width: var(--contenedor-medio); }
.cm-contenedor--texto { max-width: var(--contenedor-texto); }

/* ÚNICO padding vertical de sección de todo el sitio. */
.cm-seccion { padding-block: var(--seccion-y); position: relative; }

/*
 * RITMO DE FONDOS. La alternancia es obligatoria y nunca puede haber dos
 * secciones seguidas con el mismo fondo — es lo que separa una página compuesta
 * de una lista infinita de bloques. Cada fondo trae SU color de texto: un fondo
 * sin su tinta es cómo aparece el titular claro sobre papel claro.
 */
.cm-fondo--negro  { background: var(--negro);       color: var(--hueso); }
.cm-fondo--suave  { background: var(--negro-suave); color: var(--hueso); }
.cm-fondo--hueso  { background: var(--hueso);       color: var(--tinta); }
.cm-fondo--ambar  { background: var(--ambar);       color: var(--ambar-tinta); }

/* En sección clara, el texto secundario y los enlaces cambian de tono o pierden
   el contraste. Se resuelve aquí, una vez, y no en cada sección. */
.cm-fondo--hueso .cm-apagado { color: var(--apagado); }
.cm-fondo--hueso a:not(.cm-btn) { color: var(--brasa-texto); }
.cm-fondo--hueso a:not(.cm-btn):hover { color: var(--tinta); }
.cm-fondo--ambar .cm-apagado,
.cm-fondo--ambar a:not(.cm-btn) { color: var(--ambar-tinta); }
.cm-apagado { color: var(--humo); }

/*
 * SANGRADO. Rompe el contenedor y ocupa el ancho de la ventana.
 * Se apoya en el `overflow-x: clip` de .cm-principal: 100vw incluye el ancho de
 * la barra de scroll, así que sin ese recorte esto provocaría scroll horizontal
 * en escritorio — el fallo clásico de las piezas a sangre.
 */
.cm-sangrado {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}


/* =========================================================================
 * 4. TITULARES Y PROSA
 * ====================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-display);
  font-weight: 400;               /* Anton solo tiene una grosura: pedirle 700
                                     obliga al navegador a fingirla y el trazo
                                     se ensucia */
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
  text-wrap: balance;             /* evita la línea huérfana de una palabra */
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

/* El nombre a tamaño de cartel. Solo el hero y la banda final del pie. */
.cm-cartel {
  font-family: var(--fuente-display);
  font-size: var(--fs-cartel);
  line-height: var(--interlineado-cartel);
  letter-spacing: var(--tracking-cartel);
  text-transform: uppercase;
  margin: 0;
}

/* Etiqueta de sección. UN solo estilo en todo el sitio. */
.cm-etiqueta {
  display: inline-block;
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-texto);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ambar);
}
.cm-fondo--hueso .cm-etiqueta { color: var(--brasa-texto); }
.cm-fondo--ambar .cm-etiqueta { color: var(--ambar-tinta); }

/* Entradilla: el párrafo que acompaña al titular de sección. */
.cm-entradilla {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--humo);
}
.cm-fondo--hueso .cm-entradilla { color: var(--apagado); }
.cm-fondo--ambar .cm-entradilla { color: var(--ambar-tinta); }

/*
 * PROSA. El contenido que escribe el operador desde el editor: páginas, fichas
 * y entradas. Se limita la MEDIDA a 66 caracteres porque una línea de 1440 px
 * de ancho es físicamente incómoda de leer: el ojo pierde el renglón al volver.
 */
.cm-prosa {
  max-width: var(--contenedor-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.cm-prosa > * + * { margin-top: var(--e-3); }
.cm-prosa h2 { margin-top: var(--e-6); font-size: var(--fs-h3); }
.cm-prosa h3 { margin-top: var(--e-5); font-size: var(--fs-h4); }
.cm-prosa ul,
.cm-prosa ol { padding-left: 1.25em; }
.cm-prosa li + li { margin-top: var(--e-1); }
.cm-prosa img,
.cm-prosa figure { border-radius: var(--radio-pieza); }
.cm-prosa figcaption {
  margin-top: var(--e-1);
  font-size: var(--fs-chico);
  color: var(--humo);
}
.cm-prosa blockquote {
  margin: var(--e-5) 0;
  padding-left: var(--e-3);
  border-left: 3px solid var(--brasa);
  font-size: var(--fs-h4);
}
.cm-prosa code,
.cm-prosa pre {
  background: var(--negro-suave);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-chico);
}
.cm-prosa pre { padding: var(--e-3); overflow-x: auto; }
.cm-prosa code { padding: .15em .4em; }

/* Tablas del editor: sin esto, una tabla ancha desborda la página entera en
   móvil en lugar de desplazarse dentro de su propia caja. */
.cm-prosa table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.cm-prosa th,
.cm-prosa td { padding: var(--e-2); border-bottom: 1px solid var(--linea); text-align: left; }

.cm-fondo--hueso .cm-prosa figcaption { color: var(--apagado); }
.cm-fondo--hueso .cm-prosa code,
.cm-fondo--hueso .cm-prosa pre { background: var(--hueso-honda); border-color: var(--linea-clara); }
.cm-fondo--hueso .cm-prosa th,
.cm-fondo--hueso .cm-prosa td { border-color: var(--linea-clara); }


/* =========================================================================
 * 5. UTILIDADES DE COMPOSICIÓN
 * ====================================================================== */

/*
 * CAPA. La profundidad del sitio en tres líneas: fotografía al fondo, velo
 * encima, contenido arriba. Cualquier pieza con texto sobre imagen usa esto y
 * ninguna inventa su propio apilado.
 */
.cm-capa { position: relative; isolation: isolate; overflow: hidden; }
.cm-capa__medio { position: absolute; inset: 0; z-index: 0; }
.cm-capa__medio img,
.cm-capa__medio video { width: 100%; height: 100%; object-fit: cover; }
.cm-capa__velo {
  position: absolute; inset: 0; z-index: 1;
  background: var(--velo-foto);
  pointer-events: none;   /* el velo no puede robarle el clic al enlace de debajo */
}
.cm-capa__velo--corto { background: var(--velo-corto); }
.cm-capa__velo--hero  { background: var(--velo-hero); }
.cm-capa__cuerpo { position: relative; z-index: 2; }

/* Relación de aspecto de las piezas. Se declara en el contenedor para que la
   página no dé el salto de maqueta cuando cargan las imágenes. */
.cm-ratio--ancho    { aspect-ratio: 16 / 9; }
.cm-ratio--tarjeta  { aspect-ratio: 4 / 3; }
.cm-ratio--cuadro   { aspect-ratio: 1 / 1; }
.cm-ratio--alto     { aspect-ratio: 3 / 4; }

/* Filas de sellos (servicios, año, cliente). */
.cm-sellos { display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.cm-sello {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radio-pildora);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  line-height: 1.4;
}
.cm-sello--lleno {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--ambar-tinta);
}

/* Cabecera de sección: etiqueta + titular + entradilla, alineada a la izquierda
   por defecto. La alternancia de alineación la deciden las hojas de módulo. */
.cm-encabezado { max-width: 46ch; margin-bottom: var(--e-6); }
.cm-encabezado--ancho { max-width: 62ch; }


/* =========================================================================
 * 6. BOTONES
 * ====================================================================== */

/*
 * UNA sola forma, UN solo hover, para todo el sitio.
 * Rectangular y en mayúsculas: es el mismo gesto de cartel que los titulares.
 * El hover OSCURECE el mismo ámbar y levanta 1 px; nunca salta a otro color,
 * que es lo que hace que un botón parezca otro botón justo antes del clic.
 */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 48px;             /* objetivo táctil holgado: 44 px es el mínimo */
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.cm-btn:hover { transform: translateY(-1px); }
.cm-btn:active { transform: translateY(0); }

.cm-btn--principal {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--ambar-tinta);
}
.cm-btn--principal:hover {
  background: var(--ambar-oscuro);
  border-color: var(--ambar-oscuro);
  color: var(--ambar-tinta);
}

/* Fantasma: borde de la propia tinta del fondo, relleno invertido al pasar. */
.cm-btn--fantasma {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.cm-btn--fantasma:hover {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--negro);
}
.cm-fondo--hueso .cm-btn--fantasma:hover,
.cm-fondo--ambar .cm-btn--fantasma:hover {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--hueso);
}

.cm-btn--chico { min-height: 44px; padding: 10px 20px; font-size: var(--fs-etiqueta); }

/* Enlace con flecha: la alternativa de menor peso a un botón, para navegación
   dentro de una sección. La flecha avanza al pasar por encima. */
.cm-enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 44px;
  font-weight: var(--peso-fuerte);
  font-size: var(--fs-chico);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.cm-enlace::after {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  transition: width var(--transicion);
}
.cm-enlace:hover::after { width: 40px; }


/* =========================================================================
 * 7. CABECERA Y NAVEGACIÓN
 * ====================================================================== */

/*
 * POR QUÉ ES FIJA Y CAMBIA DE FONDO
 * Sobre el hero a pantalla completa la cabecera va transparente: taparlo con una
 * barra opaca desperdicia la única pantalla en la que el vídeo del portafolio se
 * ve entero. Pero en cuanto se baja, el fondo pasa a negro sólido — un logo
 * claro sobre una fotografía clara cae muy por debajo del contraste mínimo, y
 * eso es exactamente lo que ocurría en el sitio anterior.
 * El estado lo pone tema.js en data-solido; el CSS solo lo pinta.
 */
.cm-cabecera {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 80;
  background: var(--negro);
  border-bottom: 1px solid var(--negro-borde);
  transition: background var(--transicion), border-color var(--transicion);
}

/* Solo las páginas con hero arrancan con la cabecera transparente. */
body.cm-con-hero .cm-cabecera {
  background: transparent;
  border-bottom-color: transparent;
}
body.cm-con-hero .cm-cabecera[data-solido='true'] {
  background: var(--negro);
  border-bottom-color: var(--negro-borde);
}

.cm-cabecera__barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-cabecera);
}

/* Marca. Sin logo cargado se pinta el nombre en tipografía de cartel: nunca
   queda un hueco donde debería estar la identidad. */
.cm-marca { margin-right: auto; display: flex; align-items: center; }
.cm-marca img { max-height: calc(var(--alto-cabecera) - 26px); width: auto; object-fit: contain; }
.cm-marca__texto {
  font-family: var(--fuente-display);
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hueso);
  text-decoration: none;
  line-height: 1;
}
.cm-marca__texto:hover { color: var(--ambar); }

.cm-panel { display: flex; align-items: center; gap: var(--e-4); }

.cm-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  list-style: none;
  margin: 0; padding: 0;
}
.cm-nav__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hueso);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
/* Subrayado que crece: la misma gramática que la flecha de .cm-enlace. */
.cm-nav__lista a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 10px;
  width: 0; height: 2px;
  background: var(--ambar);
  transition: width var(--transicion);
}
.cm-nav__lista a:hover { color: var(--ambar); }
.cm-nav__lista a:hover::after { width: 100%; }
/* La página en la que ya se está: marcada de forma permanente, no al pasar. */
.cm-nav__lista .current-menu-item > a::after,
.cm-nav__lista .current_page_item > a::after,
.cm-nav__lista .current-menu-parent > a::after { width: 100%; }

/* Submenús: se abren al pasar Y al enfocar con teclado. Sin :focus-within, un
   submenú es inalcanzable sin ratón. */
.cm-nav__lista .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  margin: 0; padding: var(--e-1) 0;
  list-style: none;
  background: var(--negro-suave);
  border: 1px solid var(--negro-borde);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), visibility var(--transicion);
}
.cm-nav__lista li { position: relative; }
.cm-nav__lista li:hover > .sub-menu,
.cm-nav__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.cm-nav__lista .sub-menu a { padding: 0 var(--e-2); width: 100%; }

/* Botón hamburguesa: oculto en escritorio, donde el panel es una barra. */
.cm-hamburguesa {
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--hueso);
}
.cm-hamburguesa__barras { display: block; width: 26px; margin: 0 auto; }
.cm-hamburguesa__barras span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--transicion), opacity var(--transicion);
}
.cm-hamburguesa__barras span + span { margin-top: 6px; }
/* Aspa al abrir: el estado se lee del propio aria-expanded, así que no puede
   desincronizarse de lo que anuncia el lector de pantalla. */
.cm-hamburguesa[aria-expanded='true'] .cm-hamburguesa__barras span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cm-hamburguesa[aria-expanded='true'] .cm-hamburguesa__barras span:nth-child(2) { opacity: 0; }
.cm-hamburguesa[aria-expanded='true'] .cm-hamburguesa__barras span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/*
 * CAJÓN A PANTALLA COMPLETA (móvil y tableta).
 * Se activa SOLO si hay JavaScript (html.cm-js). Sin JS el botón no haría nada,
 * así que el menú se queda apilado y visible bajo la cabecera: el sitio sigue
 * siendo navegable en vez de quedarse sin navegación.
 */
@media (max-width: 960px) {
  .cm-hamburguesa { display: block; }

  /*
   * EL LOGOTIPO Y LA ASPA, POR ENCIMA DEL CAJON — arreglo del 2026-08-08.
   *
   * El dueno lo vio: «cuando se abre el menu no aparece la X para cerrar». La
   * aspa SI existia —la hamburguesa gira a aspa sola con `aria-expanded`— pero
   * quedaba DEBAJO del panel. Y no solo invisible: medido con
   * `elementFromPoint` sobre el centro del boton, lo que habia ahi era
   * `cm-panel`, asi que el toque tampoco llegaba al boton.
   *
   * LA CAUSA, QUE NO ERA LA OBVIA: el cajon es HIJO de la cabecera en el
   * marcado. Su `z-index: 90` no compite con la cabecera sino DENTRO de ella,
   * contra sus hermanos — el logotipo y el boton, que no llevaban ninguno. Por
   * eso subir el z-index de la cabecera entera no arreglaba nada: se probo y el
   * panel seguia encima.
   *
   * Lo que sube son los dos hermanos que tienen que quedar a la vista, con un
   * valor por encima del que lleva el panel.
   */
  .cm-js .cm-marca,
  .cm-js .cm-hamburguesa {
    position: relative;
    z-index: 95;
  }

  body.cm-menu-abierto .cm-cabecera,
  body.cm-menu-abierto .cm-cabecera[data-solido='true'] {
    background: transparent;
    border-bottom-color: transparent;
  }

  .cm-js .cm-panel {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e-4);
    padding: calc(var(--alto-cabecera) + var(--e-5)) var(--canal) var(--e-6);
    background: var(--negro);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .cm-js .cm-panel[data-abierto='true'] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* En el cajón los enlaces pasan a tamaño de cartel: es la única navegación de
     la pantalla, así que se comporta como una portada y no como una lista. */
  .cm-js .cm-nav { width: 100%; }
  .cm-js .cm-nav__lista { flex-direction: column; align-items: flex-start; gap: var(--e-2); width: 100%; }
  .cm-js .cm-nav__lista > li { width: 100%; }
  .cm-js .cm-nav__lista > li > a {
    font-family: var(--fuente-display);
    font-size: clamp(1.9rem, 8vw, 3rem);
    letter-spacing: var(--tracking-titulo);
    min-height: 56px;
  }
  .cm-js .cm-nav__lista > li > a::after { bottom: 6px; }
  /* Los submenús se despliegan siempre: en un cajón no hay «pasar por encima». */
  .cm-js .cm-nav__lista .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    padding-left: var(--e-3);
  }
  .cm-js .cm-panel__cta { width: 100%; }
  .cm-js .cm-panel__cta .cm-btn { width: 100%; }
}


/* =========================================================================
 * 8. PIE
 * ====================================================================== */

.cm-pie {
  background: var(--negro-hondo);
  border-top: 1px solid var(--negro-borde);
  padding-block: var(--seccion-y) var(--e-5);
}

/* La banda de cierre: el nombre a tamaño de cartel y el teléfono como acción.
   El sitio TERMINA en un momento de conversión, nunca en una sección muerta. */
.cm-pie__llamada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--e-4) var(--e-6);
  padding-bottom: var(--e-6);
  border-bottom: 1px solid var(--negro-borde);
}

/*
 * EL CARTEL DEL PIE NO ES EL DEL HERO — 2026-08-27.
 *
 * `.cm-cartel` trae `--fs-cartel`, que es la escala del titular de portada:
 * el nombre del estudio a pantalla completa. Repetirla aquí ponía dos
 * carteles del mismo tamaño en la misma página y deshacía la jerarquía; en
 * escritorio, además, el cierre medía media pantalla de alto. Este baja a
 * dos tercios largos: sigue siendo un cartel, pero cierra en vez de abrir.
 */
.cm-pie__cartel {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
}

/* Las acciones, juntas y alineadas con la base del titular: el teléfono y el
   botón son la misma decisión tomada por dos vías distintas, así que se leen
   como un bloque y no como dos párrafos sueltos. */
.cm-pie__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}

.cm-pie__invitacion {
  margin: 0;
  max-width: 34ch;
  color: var(--apagado-oscuro, #9A948B);
}

.cm-pie__boton { margin-top: var(--e-1); }

@media (max-width: 900px) {
  /* En una columna el cierre vuelve a ser una pila, que es lo correcto
     cuando no hay ancho que repartir. */
  .cm-pie__llamada {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
}
.cm-pie__cartel { color: var(--hueso); }
.cm-pie__cartel em { font-style: normal; color: var(--ambar); }

.cm-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-5);
  padding-block: var(--e-6);
}
.cm-pie__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: var(--e-2);
}
.cm-pie ul { list-style: none; margin: 0; padding: 0; }
.cm-pie li + li { margin-top: var(--e-1); }
.cm-pie a {
  display: inline-flex;
  align-items: center;
  /* 44 y no 40: es el mínimo táctil, y aquí hay diez enlaces seguidos con 8 px
     de separación. Cuatro píxeles de más por enlace no alargan el pie de forma
     perceptible y quitan diez fallos de pulgar. */
  min-height: 44px;
  color: var(--humo);
  text-decoration: none;
}
.cm-pie a:hover { color: var(--hueso); text-decoration: underline; }

/*
 * EL BOTÓN DEL PIE ES UN BOTÓN, NO UN ENLACE DE LISTA.
 *
 * `.cm-pie a` (0-1-1) le ganaba a `.cm-btn--principal` (0-1-0) y le imponía el
 * gris de texto secundario. Resultado medido: --humo #A9A29A sobre el ámbar
 * #F7AD06 del botón = 1,31:1. La ÚLTIMA llamada a la acción de toda la página
 * —«CONTAR MI PROYECTO»— era prácticamente invisible, y no se ve «mal» de un
 * vistazo: se ve como un rectángulo ámbar vacío. Con esto vuelve a 10,3:1.
 *
 * Se escriben las dos variantes aunque hoy el pie solo use la principal: el día
 * que alguien meta un botón fantasma ahí, se encontrará el mismo fallo.
 */
.cm-pie a.cm-btn--principal { color: var(--ambar-tinta); }
.cm-pie a.cm-btn--fantasma  { color: var(--hueso); }

/* El teléfono es el canal principal del negocio: se pinta como dato, grande y
   legible, no como un enlace más de una lista. */
.cm-pie__telefono {
  display: inline-flex;
  align-items: center;
  font-family: var(--fuente-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: var(--tracking-titulo);
  color: var(--hueso) !important;
  min-height: 48px;
}
.cm-pie__telefono:hover { color: var(--ambar) !important; text-decoration: none !important; }

.cm-pie__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--negro-borde);
  font-size: var(--fs-chico);
  color: var(--humo);
}
.cm-pie__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
/* Esta lista va en FILA, asi que no le vale el separador vertical de las
   otras del pie: empujaba «Terminos» 8px por debajo de «Privacidad». */
.cm-pie__legal li + li { margin-top: 0; }


/* =========================================================================
 * 9. FORMULARIOS
 * ====================================================================== */

.cm-campo { display: block; margin-bottom: var(--e-3); }
.cm-campo__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--humo);
}

.cm-control {
  width: 100%;
  min-height: 52px;             /* holgado a propósito: estos campos se rellenan
                                   con el pulgar, de pie y con prisa */
  padding: 14px 16px;
  background: var(--negro-suave);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-chico);
  color: var(--hueso);
  transition: border-color var(--transicion), background var(--transicion);
}
.cm-control::placeholder { color: var(--humo); opacity: 1; }
.cm-control:hover { border-color: var(--humo); }
.cm-control:focus { border-color: var(--ambar); background: var(--negro); }
textarea.cm-control { min-height: 140px; resize: vertical; }

.cm-fondo--hueso .cm-campo__etiqueta { color: var(--apagado); }
.cm-fondo--hueso .cm-control {
  background: var(--blanco);
  border-color: var(--linea-clara);
  color: var(--tinta);
}
.cm-fondo--hueso .cm-control::placeholder { color: var(--apagado); }

/* Aviso de resultado del formulario. role="status" en el HTML lo anuncia; aquí
   solo se le da forma. */
.cm-aviso {
  padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
  border-left: 3px solid var(--ambar);
  background: var(--negro-suave);
  font-size: var(--fs-chico);
}
.cm-aviso--error { border-left-color: var(--brasa); }
.cm-fondo--hueso .cm-aviso { background: var(--hueso-honda); }

/* Trampa antispam. Se saca de la pantalla en vez de con display:none porque
   algunos robots ignoran los campos ocultos con display, y porque un lector de
   pantalla necesita poder saltárselo: de eso se encarga el aria-hidden del HTML. */
.cm-trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Buscador */
.cm-buscador { display: flex; gap: var(--e-1); width: 100%; max-width: 520px; }
.cm-buscador .cm-control { flex: 1 1 auto; }


/* =========================================================================
 * 10. PIEZA DE PORTAFOLIO (COMPARTIDA)
 * ====================================================================== *
 * UNA sola pieza para la portada, el archivo, la taxonomía y la búsqueda. Que
 * el mismo proyecto se viera distinto en tres pantallas es precisamente lo que
 * hacía que el sitio anterior pareciera montado a trozos.
 *
 * NINGUNA pieza se queda sin imagen. Si el proyecto no tiene destacada se pinta
 * el respaldo diseñado —degradado, inicial gigante y servicio— que ocupa su
 * sitio con intención, en lugar del hueco gris del tema por defecto.
 */

.cm-pieza {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 260px;
  background: var(--degradado-pieza);
  border-radius: var(--radio-pieza);
  isolation: isolate;
  transition: transform var(--transicion);
}
.cm-pieza:hover { transform: translateY(var(--eleva-hover)); }

.cm-pieza__medio { position: absolute; inset: 0; z-index: 0; }
.cm-pieza__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}
.cm-pieza:hover .cm-pieza__foto { transform: scale(var(--zoom-hover)); }

.cm-pieza__velo { position: absolute; inset: 0; z-index: 1; background: var(--velo-foto); pointer-events: none; }

/* El respaldo sin fotografía. La inicial es DECORATIVA (aria-hidden en el HTML):
   el nombre completo ya está en el titular, y un lector de pantalla que leyera
   «C, Campaña de verano» sonaría a error. */
.cm-pieza__inicial {
  position: absolute;
  z-index: 1;
  right: -.06em; bottom: -.28em;
  font-family: var(--fuente-display);
  font-size: clamp(9rem, 26vw, 20rem);
  line-height: .8;
  color: var(--brasa);
  opacity: .22;
  pointer-events: none;
  user-select: none;
}

/*
 * OJO CON `position` AQUÍ. Este bloque NO puede ser `position: relative`.
 *
 * El enlace extendido de abajo se estira con `inset: 0`, que se mide contra el
 * ANTEPASADO POSICIONADO más cercano. Si este cuerpo estuviera posicionado, el
 * área pulsable se quedaría reducida al recuadro del texto en vez de cubrir la
 * tarjeta entera, y la mitad de la pieza dejaría de responder al clic sin que
 * nada lo delatara a simple vista.
 *
 * El `z-index` funciona igual sin `position` porque esto es un elemento flexible
 * (`.cm-pieza` es flex), y a los elementos flexibles el z-index sí les aplica
 * aunque su posición sea estática. Así se queda por encima del velo sin robarle
 * el punto de referencia al enlace.
 */
.cm-pieza__cuerpo {
  z-index: 2;
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.cm-pieza__titulo {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--hueso);
}
.cm-pieza__titulo a {
  color: inherit;
  text-decoration: none;
}
/*
 * ENLACE EXTENDIDO. El área pulsable es la tarjeta ENTERA, no solo el titular:
 * en un móvil, acertarle a un renglón de texto con el pulgar es una lotería.
 * Se hace con ::after sobre un único <a> real en lugar de envolver toda la
 * pieza en un enlace, porque envolverla obligaría a que los sellos de servicio
 * fueran enlaces anidados dentro de otro enlace — HTML inválido que los
 * lectores de pantalla anuncian de forma impredecible.
 */
.cm-pieza__titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}
.cm-pieza__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ambar);
}
.cm-pieza__meta span + span::before {
  content: '·';
  margin-right: var(--e-1);
  color: var(--humo);
}
.cm-pieza__resumen {
  margin: 0;
  font-size: var(--fs-chico);
  color: var(--humo);
  /* Dos líneas y punto: si el operador escribe un extracto largo, la rejilla no
     se descuadra. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tamaños de pieza. Los usan la portada y el mosaico del archivo. */
.cm-pieza--alta   { min-height: clamp(340px, 46vw, 560px); }
.cm-pieza--grande { min-height: clamp(380px, 54vw, 660px); }
.cm-pieza--grande .cm-pieza__titulo { font-size: var(--fs-h2); }
.cm-pieza--grande .cm-pieza__cuerpo { padding: var(--e-4); }


/* =========================================================================
 * 11. LISTADOS Y PAGINACIÓN
 * ====================================================================== */

.cm-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--e-3);
}

/* Estado vacío. Nunca se deja una pantalla en blanco: se dice qué pasa y se
   ofrece la siguiente acción. */
.cm-vacio {
  padding: var(--e-6) 0;
  text-align: center;
  color: var(--humo);
}
.cm-vacio h2 { color: var(--hueso); }

.cm-paginacion { margin-top: var(--e-6); }
.cm-paginacion .nav-links { display: flex; flex-wrap: wrap; gap: var(--e-1); justify-content: center; }
.cm-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px; min-height: 48px;
  padding: 0 var(--e-2);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-chico);
  color: var(--hueso);
  text-decoration: none;
  font-weight: var(--peso-medio);
}
.cm-paginacion .page-numbers:hover { border-color: var(--ambar); color: var(--ambar); }
.cm-paginacion .page-numbers.current {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--ambar-tinta);
}

/*
 * Cabecera de archivo / página / búsqueda: un titular sobre negro con aire.
 *
 * NO se suma aquí el alto de la cabecera. Estas pantallas NO llevan
 * `cm-con-hero`, así que el <body> ya trae su `padding-top` para dejar sitio a
 * la barra fija; sumarlo otra vez abría un agujero negro de 150 px sobre cada
 * título.
 */
.cm-portadilla { padding-block: var(--e-7) var(--e-6); }
.cm-portadilla h1 { margin-bottom: var(--e-2); }
.cm-portadilla__buscador { margin-top: var(--e-4); }

/* Imagen a sangre de una página o una entrada. La altura se acota: una foto
   vertical subida desde el móvil ocuparía tres pantallas y el visitante creería
   que la página se ha quedado ahí. */
.cm-pagina__foto {
  width: 100%;
  max-height: min(70vh, 640px);
  object-fit: cover;
}

/* --- 404 --------------------------------------------------------------- */

/* Es la única página del sitio sin fotografía que enseñar, así que manda la
   tipografía: el número ocupa como ocuparía una imagen. */
.cm-error__numero {
  color: var(--brasa);
  margin-bottom: var(--e-2);
  line-height: .85;
}
.cm-error__titulo { max-width: 18ch; }
.cm-error__texto { margin-bottom: var(--e-4); }
.cm-error__buscador { margin-bottom: var(--e-5); }
.cm-error__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

@media (max-width: 640px) {
  .cm-error__acciones { flex-direction: column; align-items: stretch; }
}


/* =========================================================================
 * 12. MOVIMIENTO Y CURSOR
 * ====================================================================== */

/*
 * APARICIÓN AL DESPLAZAR. El estado oculto se aplica SOLO si hay JavaScript
 * (html.cm-js): sin JS nadie quitaría la clase y la página entera quedaría
 * invisible para siempre. Es el fallo más caro de este patrón y se evita con
 * un único selector.
 */
.cm-js .cm-aparece {
  opacity: 0;
  transform: translateY(var(--aparece-desplazamiento));
  transition: opacity var(--aparicion), transform var(--aparicion);
}
.cm-js .cm-aparece.es-visible { opacity: 1; transform: none; }

/*
 * CASCADA. El retardo se calcula en CSS con :nth-child y NO se inyecta desde
 * JavaScript con element.style: la regla de la casa prohíbe los estilos en
 * línea, y además así el escalonado sigue siendo correcto aunque el observador
 * revele varios hermanos en el mismo fotograma.
 */
.cm-escalona > *:nth-child(1) { transition-delay: calc(var(--aparece-escalon) * 0); }
.cm-escalona > *:nth-child(2) { transition-delay: calc(var(--aparece-escalon) * 1); }
.cm-escalona > *:nth-child(3) { transition-delay: calc(var(--aparece-escalon) * 2); }
.cm-escalona > *:nth-child(4) { transition-delay: calc(var(--aparece-escalon) * 3); }
.cm-escalona > *:nth-child(5) { transition-delay: calc(var(--aparece-escalon) * 4); }
.cm-escalona > *:nth-child(6) { transition-delay: calc(var(--aparece-escalon) * 5); }
.cm-escalona > *:nth-child(7) { transition-delay: calc(var(--aparece-escalon) * 6); }
.cm-escalona > *:nth-child(n+8) { transition-delay: calc(var(--aparece-escalon) * 7); }

/*
 * CURSOR PERSONALIZADO sobre las piezas del portafolio.
 *
 * Existe solo cuando tiene sentido: tema.js añade .cm-cursor-fino al <html>
 * únicamente si el puntero es fino (ratón o trackpad) y el visitante no ha
 * pedido menos movimiento. En un móvil no hay cursor que seguir, y arrastrar un
 * elemento con el dedo solo consumiría batería.
 *
 * pointer-events:none es obligatorio: sin él, el propio cursor se interpondría
 * entre el ratón y el enlace que está intentando pulsar.
 */
.cm-cursor { display: none; }

.cm-cursor-fino .cm-cursor {
  display: grid;
  place-items: center;
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--ambar-tinta);
  font-family: var(--fuente-display);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  /* La posición llega en dos propiedades personalizadas que actualiza el JS.
     Se usan variables y no un `style.transform` completo para que la fórmula
     —el centrado y la escala— siga viviendo aquí, en la hoja de estilos. */
  transform: translate3d(var(--cm-cursor-x, -200px), var(--cm-cursor-y, -200px), 0)
             translate(-50%, -50%) scale(.4);
  transition: opacity 200ms linear, transform 220ms cubic-bezier(.22, .61, .36, 1);
}
.cm-cursor-fino .cm-cursor[data-activo='true'] {
  opacity: 1;
  transform: translate3d(var(--cm-cursor-x, -200px), var(--cm-cursor-y, -200px), 0)
             translate(-50%, -50%) scale(1);
}
/* Al haber cursor propio se esconde el del sistema, o se ven los dos. */
.cm-cursor-fino [data-cm-cursor]:hover { cursor: none; }
.cm-cursor-fino [data-cm-cursor]:hover a { cursor: none; }


/* =========================================================================
 * 13. AJUSTES DE PANTALLA PEQUEÑA
 * ====================================================================== */

@media (max-width: 640px) {
  .cm-pie__cierre { justify-content: flex-start; }
  .cm-btn { width: 100%; }          /* a ancho completo el pulgar no falla */
  .cm-btn--chico { width: auto; }
  .cm-buscador { flex-direction: column; }
  .cm-buscador .cm-btn { width: 100%; }
}

/*
 * IMPRESIÓN. Un cliente que imprime la ficha de un proyecto para enseñarla en
 * una reunión no necesita el menú ni el fondo negro — que además vacía el
 * cartucho de tinta.
 */
@media print {
  .cm-cabecera,
  .cm-hamburguesa,
  .cm-cursor,
  .cm-saltar,
  .cm-paginacion { display: none !important; }

  body { background: #fff; color: #000; padding-top: 0; }
  .cm-fondo--negro,
  .cm-fondo--suave,
  .cm-fondo--ambar { background: #fff !important; color: #000 !important; }
  a { color: #000; }
}


/* ====================================================================
 * ZONA PULSABLE DEL LOGOTIPO — VA AQUÍ Y NO EN portada.css
 * --------------------------------------------------------------------
 * Este arreglo existía, pero vivía en `portada.css`, y `portada.css` solo
 * se encola en la portada. Resultado medido: en / el logotipo cumplía los
 * 44 px y en /servicios/, /nosotros/, /proyectos/ y /contacto-creativity/
 * medía 127x36 — o sea, el enlace que devuelve al inicio era el único
 * objetivo pequeño de la cabecera, y precisamente en las páginas desde las
 * que hace falta volver.
 *
 * La cabecera está en TODAS las páginas, así que su CSS tiene que estar en
 * la hoja que también está en todas. Es la misma lección que ya nos costó
 * una tarde: un arreglo correcto en el archivo equivocado es un arreglo que
 * no existe.
 *
 * Sin tope de ancho a propósito: el alto es lo que faltaba, y `inline-flex`
 * no cambia ni un píxel de la maqueta porque el logotipo ya centra solo.
 * ==================================================================== */
@media (max-width: 900px) {
  .custom-logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   LA PÁGINA DE UN SERVICIO — /servicios/fotografia/ y sus cinco hermanas
   ==========================================================================
   PHP: taxonomy-cm_servicio.php · inc/servicio-detalle.php
   Segunda pasada (2026-08-26): el dueño vio la primera y dijo «lo veo muy
   normal». Esta versión gasta la energía en cuatro gestos —nombre fantasma,
   cinta rodante, números perfilados que se rellenan, y UN momento a todo
   color en el cierre— sin salirse de la paleta ni de las dos tipografías.

   Nada de aquí introduce un color nuevo: todo son los tokens de tokens.css.
   ========================================================================== */

/*
 * OJO CON EL NOMBRE — 2026-08-26. Esto se llamaba `.cm-servicio` y ese
 * nombre YA ERA de cada fila de la lista «Que hacemos» del Home: esta hoja
 * carga en todas las paginas, asi que las seis filas salian como cajas
 * negras sueltas sobre el fondo hueso. El dueño lo vio: «esta no me gusta».
 * El envoltorio de la pagina de servicio es ahora `.cm-servicio-pagina`.
 */
.cm-servicio-pagina {
  background: var(--negro);
  color: var(--hueso);
}

/* ---- 1. La portada, con el nombre fantasma ---- */

.cm-serv-porta {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 13vh, 150px) 0 clamp(56px, 8vh, 96px);
  background: var(--degradado-pieza, var(--negro));
}

/*
 * El nombre del servicio, gigante y solo perfilado, detrás del contenido.
 * Perfil al 7% sobre negro: se percibe como textura, no se lee dos veces.
 * `pointer-events: none` porque es decorado: no roba ni un clic.
 */
/*
 * `.cm-fantasma` es la misma pieza para el resto del sitio: las portadillas
 * de /servicios/, /proyectos/, /nosotros/ y /contacto/ la usan con su propia
 * palabra. Un solo bloque de reglas, dos nombres.
 */
.cm-serv-porta__fantasma,
.cm-fantasma {
  position: absolute;
  right: -3%;
  bottom: -0.12em;
  font-family: var(--fuente-titulo);
  font-size: clamp(7rem, 24vw, 22rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 239, 233, 0.07);
  pointer-events: none;
  user-select: none;
}

/* Sin soporte de perfilado, mejor nada que un manchón sólido. */
@supports not (-webkit-text-stroke: 1px black) {
  .cm-serv-porta__fantasma,
  .cm-fantasma { display: none; }
}

/*
 * Cualquier portadilla puede llevar el fantasma: se recorta ella misma y su
 * contenido queda por delante. En las portadillas el fantasma va algo mas
 * pequeno que en la pagina de servicio — son cabeceras mas bajas.
 */
.cm-portadilla {
  position: relative;
  overflow: hidden;
}

.cm-portadilla > .cm-contenedor { position: relative; }

.cm-portadilla .cm-fantasma {
  font-size: clamp(5rem, 18vw, 15rem);
  bottom: -0.14em;
}

.cm-serv-porta > .cm-contenedor { position: relative; }

.cm-serv-porta__rotulo {
  margin: 0 0 var(--e-2, 12px);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cm-serv-porta__rotulo a { color: inherit; text-decoration: none; }
.cm-serv-porta__rotulo a:hover { text-decoration: underline; }

.cm-serv-porta__titulo {
  margin: 0 0 var(--e-3, 20px);
  font-family: var(--fuente-titulo);
  font-size: clamp(2.8rem, 10vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.cm-serv-porta__entrada {
  margin: 0 0 var(--e-4, 32px);
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--humo);
}

.cm-serv-porta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2, 12px);
}

/* ---- 2. La cinta rodante ----
   Compartida: la portada y /proyectos/ tambien la usan. Es UNA pieza. */

.cm-serv-cinta {
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

/*
 * Dos copias del mismo texto y un desplazamiento del 50%: cuando la primera
 * sale por la izquierda, la segunda está exactamente donde empezó la primera
 * y el bucle no se nota. Con una sola copia habría un hueco en cada vuelta.
 */
.cm-serv-cinta__pista {
  display: flex;
  width: max-content;
  animation: cm-rodar 36s linear infinite;
}

/* La caja comun: tipografia y ritmo. El COLOR lo pone cada voz. */
.cm-serv-cinta__pista span {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: 0.28em;
}

/*
 * LAS TRES VOCES - 2026-08-27.
 *
 * La cinta entera iba perfilada en gris: correcta y monotona. El dueño pidio
 * «una palabra deslineada, una palabra blanca y una palabra amarilla», y el
 * ciclo de tres da variedad sin meter ni un color nuevo: los tres salen de
 * tokens.css.
 *
 * El AMBAR solo vale aqui porque la cinta va sobre fondo oscuro; sobre hueso
 * daria 2.1:1, el contraste prohibido de la casa.
 */
.cm-serv-cinta__voz--perfil {
  color: transparent;
  -webkit-text-stroke: 1px var(--humo);
  opacity: 0.55;
}

.cm-serv-cinta__voz--claro {
  color: var(--hueso);
  opacity: 0.9;
}

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

/* Los separadores no compiten con las palabras: se quedan de fondo. */
.cm-serv-cinta__punto {
  color: var(--humo);
  opacity: 0.4;
}

/* Sin perfilado, la voz «deslineada» se pinta apagada en vez de invisible. */
@supports not (-webkit-text-stroke: 1px black) {
  .cm-serv-cinta__voz--perfil { color: var(--apagado); opacity: 1; }
}

@keyframes cm-rodar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 3. El catálogo, con la columna quieta ---- */

.cm-serv-lista { padding: clamp(64px, 9vh, 110px) 0; }

.cm-serv-lista__rejilla {
  display: grid;
  grid-template-columns: minmax(230px, 320px) 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

/*
 * La columna izquierda se queda QUIETA mientras la lista rueda: el conteo
 * acompaña la lectura entera en vez de perderse arriba. `align-self: start`
 * es obligatorio: sin él, la celda mide como la lista y sticky no actúa.
 */
.cm-serv-lista__lado {
  position: sticky;
  top: 96px;
  align-self: start;
}

.cm-serv-lista__titulo {
  margin: 0 0 var(--e-3, 20px);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
}

.cm-serv-lista__conteo {
  margin: 0 0 var(--e-3, 20px);
  display: flex;
  flex-direction: column;
}

.cm-serv-lista__cifra {
  font-family: var(--fuente-titulo);
  font-size: clamp(5rem, 10vw, 8.5rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--ambar);
  font-variant-numeric: tabular-nums;
}

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

.cm-serv-lista__palabra {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
}

.cm-serv-lista__nota {
  margin: 0;
  max-width: 26ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--apagado);
}

.cm-serv-lista__items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

.cm-serv-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--e-3, 20px);
  align-items: baseline;
  padding: clamp(20px, 3vh, 30px) 0 clamp(20px, 3vh, 30px) 22px;
  border-bottom: 1px solid var(--linea);
}

/*
 * La barra de calor: crece desde arriba al pasar. Es el degradado de la casa
 * a 3px de ancho — presencia sin ruido.
 */
.cm-serv-item::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-serv-item:hover::before { transform: scaleY(1); }

/*
 * El número: perfilado en reposo, relleno de ámbar al pasar. Son los números
 * del catálogo del dueño —el 11 aquí es el 11 en /servicios/— y por eso van
 * grandes: se usan para hablar por teléfono.
 */
.cm-serv-item__n {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ambar);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.cm-serv-item:hover .cm-serv-item__n { color: var(--ambar); }

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

.cm-serv-item__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cm-serv-item__titulo {
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  font-weight: 700;
  line-height: 1.3;
}

.cm-serv-item__desc {
  max-width: 60ch;
  color: var(--humo);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .cm-serv-lista__rejilla { grid-template-columns: 1fr; }
  /* En una columna el lado deja de pegarse: pegado taparía la lista. */
  .cm-serv-lista__lado { position: static; }
  .cm-serv-lista__cifra { font-size: 4rem; -webkit-text-stroke-width: 1.5px; }
  .cm-serv-lista__conteo { flex-direction: row; align-items: baseline; gap: 12px; }
}

@media (max-width: 560px) {
  .cm-serv-item { grid-template-columns: 1fr; gap: 8px; }
  .cm-serv-item__n { font-size: 1.6rem; -webkit-text-stroke-width: 1px; }
}

/* ---- 5. Las otras cinco, como índice grande ---- */

.cm-serv-otras {
  padding: clamp(64px, 9vh, 100px) 0;
  border-top: 1px solid var(--linea);
}

.cm-serv-otras__titulo {
  margin: 0 0 var(--e-3, 20px);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
}

.cm-serv-otras__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

/*
 * Cada hermana es una fila grande en Anton, no una píldora: un índice de
 * servicios en una agencia creativa ES contenido, y se le da tamaño de
 * contenido. La flecha aquí es honesta: estas filas sí son enlaces.
 */
.cm-serv-otras__enlace {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: clamp(14px, 3vw, 32px);
  padding: clamp(16px, 2.6vh, 24px) 0;
  border-bottom: 1px solid var(--linea);
  color: var(--hueso);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.3s ease;
}

.cm-serv-otras__enlace:hover,
.cm-serv-otras__enlace:focus-visible {
  color: var(--ambar);
  padding-left: 16px;
}

.cm-serv-otras__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.7rem, 4.6vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
}

.cm-serv-otras__cuenta {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
}

.cm-serv-otras__flecha {
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  transition: transform 0.25s ease;
}

.cm-serv-otras__enlace:hover .cm-serv-otras__flecha {
  transform: translate(4px, -4px);
}

@media (max-width: 560px) {
  .cm-serv-otras__cuenta { display: none; }
}

/* ---- Las apariciones ----
   Solo actúan bajo `cm-anima`, que la pone el guion — y el guion no la pone
   si el sistema pide menos movimiento. Sin JavaScript, todo visible. */

html.cm-anima .cm-apar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

html.cm-anima .cm-apar--ya {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cm-serv-cinta__pista { animation: none; }
  .cm-serv-item::before,
  .cm-serv-item__n,
  .cm-serv-otras__enlace,
  .cm-serv-otras__flecha { transition: none; }
}

/* ====================================================================
 * DIRECCIÓN Y HORARIO EN EL PIE — 2026-08-26
 * --------------------------------------------------------------------
 * Van aquí y no en portada.css por la lección que ya costó una tarde:
 * el pie está en todas las páginas, así que su CSS tiene que estar en
 * la hoja que también está en todas.
 *
 * El <address> del navegador viene en cursiva por defecto; aquí no es
 * una cita, son los datos de la casa.
 * ==================================================================== */

.cm-pie__direccion {
  margin: 0 0 var(--e-2);
  font-style: normal;
  color: var(--apagado);
}

.cm-pie__horario {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--e-2);
}

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

/* ====================================================================
 * EL CAMBIO DE IDIOMA — 2026-08-27
 * --------------------------------------------------------------------
 * PHP: header.php · JS: assets/js/tema.js
 *
 * Las banderitas flotantes de GTranslate se posicionaban arriba a la
 * derecha y caian encima del boton «Hablemos». Se esconden y en su
 * lugar va este par ES|EN con la tipografia de las etiquetas del sitio
 * y el ambar de la marca para el idioma activo.
 *
 * El motor sigue siendo GTranslate: solo se le cambia la cara.
 * ==================================================================== */

/*
 * LAS BANDERITAS SE ESCONDEN, PERO NO CON `display: none`.
 *
 * Ese fue el primer intento y dejo el conmutador muerto: GTranslate monta por
 * dentro el widget de Google Translate, y `doGTranslate()` —la funcion que
 * hace el cambio— busca el <select> que ese widget crea. Con `display: none`
 * el widget no llega a inicializarse, el select no existe y pulsar ES/EN no
 * hacia absolutamente nada. Medido: la cookie `googtrans` no se escribia y el
 * texto de la pagina no cambiaba.
 *
 * Asi que se esconde a la vista SIN sacarlo del renderizado: fuera de
 * pantalla, de 1x1 y recortado. El motor sigue vivo; solo se le quita la cara.
 */
.gtranslate_wrapper,
.gt_float_switcher,
.gt_switcher_wrapper {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* La barra que Google inyecta arriba al traducir descoloca la cabecera
   fija: se neutraliza. */
body > .skiptranslate { display: none !important; }
body { top: 0 !important; }

.cm-idiomas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.cm-idiomas__opcion {
  padding: 6px 4px;
  min-height: 44px;   /* objetivo tactil, aunque el texto mida dos letras */
  border: 0;
  background: none;
  font-family: var(--fuente-texto);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .14em;
  color: var(--hueso);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transicion), color var(--transicion);
}

.cm-idiomas__opcion:hover { opacity: 1; }

.cm-idiomas__opcion:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  opacity: 1;
}

/* El idioma activo, en ambar y a plena opacidad: se lee de un vistazo
   cual esta puesto sin tener que comparar los dos. */
.cm-idiomas__opcion[aria-pressed='true'] {
  color: var(--ambar);
  opacity: 1;
}

.cm-idiomas__barra {
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.3;
}

@media (max-width: 960px) {
  /* En el cajon movil se separa del boton para que no parezca su rotulo. */
  .cm-idiomas { margin-block: var(--e-2); }
}

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