/* ==========================================================================
   Tipografía — lo que se aparta del original a propósito
   --------------------------------------------------------------------------
   El original titula en «Helvetica» del sistema y escribe en Roboto: correcto
   pero plano. Aquí se busca algo más elegante sin tocar colores ni medidas:

   - **DM Serif Display** para los títulos grandes (encabezado, «Hablemos de
     tu proyecto», tarjetas, blog, popup). Una serif de contraste alto que da
     el aire editorial de una agencia de comunicación.
   - **Manrope** para todo lo demás —menú, texto, campos, botones, pie—:
     geométrica como el logo de CID, más fina y más abierta que Roboto.

   Va en su propia hoja, al final, para que las de arriba sigan diciendo qué
   valores tenía el original: quitar este archivo devuelve el 1-1.
   ========================================================================== */
@font-face { font-family: "DM Serif Display"; src: url("/assets/fonts/DMSerifDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "DM Serif Display"; src: url("/assets/fonts/DMSerifDisplay-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --titular: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Manrope", "Helvetica Neue", Arial, sans-serif;
  --pie:     "Manrope", "Helvetica Neue", Arial, sans-serif;
}

body { font-feature-settings: "ss01", "cv05"; letter-spacing: .005em; }

/* --- Títulos en serif ------------------------------------------------------ */
.cid-encabezado-titulo,
.cid-cta-titulo,
.cid-tarjeta h4,
.cid-popup-cuerpo h2,
.cid-pie-columna h6,
.cid-blog-tarjeta h3,
.cid-entrada-cuerpo h2,
.cid-entrada-cuerpo h3,
.cid-panel-titulo,
.cid-entrar-caja h2,
.cid-escritorio-tarjeta strong,
.cid-heroe-cuerpo h1,
.cid-titulo-grande,
.cid-titulo-seccion,
.cid-quienes-texto h2,
.cid-vm h4,
.cid-valor h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

.cid-encabezado-titulo { font-size: 46px; line-height: 1.05; }

.cid-cta-titulo { font-size: 52px; line-height: 1.1; }

.cid-tarjeta h4 { font-size: 26px; text-transform: none; }

.cid-popup-cuerpo h2 { font-size: 34px; letter-spacing: 0; }

.cid-pie-columna h6 { font-size: 24px; }

.cid-blog-tarjeta h3 { font-size: 26px; line-height: 1.15; }

.cid-panel-titulo { font-size: 38px; }

.cid-escritorio-tarjeta strong { font-size: 24px; }

.cid-heroe-cuerpo h1 { font-size: 64px; line-height: 1.02; }

/* La parte en rojo del héroe, en itálica de la misma serif. */
.cid-heroe-cuerpo h1 strong { font-style: italic; font-weight: 400; }

.cid-titulo-grande { font-size: 50px; line-height: 1.08; }

.cid-titulo-seccion { font-size: 42px; }

.cid-quienes-texto h2 { font-size: 40px; }

.cid-vm h4 { font-size: 38px; }

.cid-valor h3 { font-size: 24px; }

.cid-antetitulo { font-family: var(--titular); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.cid-opinion blockquote { font-family: var(--display); font-size: 19px; line-height: 1.5; }

.cid-boton-rojo,
.cid-boton-borde { font-weight: 600; letter-spacing: .02em; }

/* La palabra que rota, en itálica: lo que cambia se lee como cita. */
.cid-animada { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.15em; }

/* --- Menú y texto ------------------------------------------------------------ */
.cid-nav a { font-size: 15px; font-weight: 600; letter-spacing: .3px; }

.cid-migas { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

.cid-tarjeta p,
.cid-pie-marca p,
.cid-blog-tarjeta p,
.cid-entrada-cuerpo { font-weight: 400; }

.cid-cta-texto { font-weight: 300; letter-spacing: .01em; }

.cid-cta-boton,
.cid-enviar { font-weight: 600; letter-spacing: .02em; }

.cid-entrada-resumen { font-family: var(--display); font-size: 24px; line-height: 1.4; }

.cid-entrada-cuerpo blockquote { font-family: var(--display); font-size: 24px; }

@media (max-width: 1024px) {
  .cid-cta-titulo { font-size: 44px; }

  .cid-heroe-cuerpo h1 { font-size: 52px; }

  .cid-titulo-grande { font-size: 42px; }
}

@media (max-width: 767px) {
  .cid-encabezado-titulo { font-size: 36px; }

  .cid-cta-titulo { font-size: 32px; }

  .cid-tarjeta h4 { font-size: 22px; }

  .cid-heroe-cuerpo h1 { font-size: 40px; }

  .cid-titulo-grande { font-size: 34px; }

  .cid-titulo-seccion { font-size: 32px; }
}