/* ==========================================================================
   CREZIR · Componentes del sistema.
   Adaptación por clases del código ya construido y corregido del Grupo 2
   (codigo/componentes.html y codigo/maquetas.html). La estructura, las
   proporciones y los colores son los de ese código: aquí sólo cambian de
   estilos en línea a clases, y se les añade el comportamiento móvil
   descrito en CREZIR_Reticula-y-ritmo-vertical.md §3.

   Regla de contraste que gobierna todo este archivo:
   ningún texto en `acento` se compone sobre `papel`. Sobre papel, la cifra
   pasa a `acento-oscuro` y el metadato a `gris-dato-oscuro`.
   ========================================================================== */

/* ==========================================================================
   1 · LLAMADAS A LA ACCIÓN
   ========================================================================== */

.crezir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--crezir-space-3);
  min-height: var(--crezir-toque-min);
  padding: var(--crezir-space-4) var(--crezir-space-6);
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-cuerpo);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--crezir-radius-none);
  cursor: pointer;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}

/* Llamada primaria del sitio: solicitar el diagnóstico de Línea Base. */
.crezir-btn--acento {
  background: var(--crezir-acento);
  color: var(--crezir-fondo);
  border-color: var(--crezir-acento);
}
.crezir-btn--acento:hover,
.crezir-btn--acento:focus-visible {
  background: var(--crezir-acento-oscuro);
  border-color: var(--crezir-acento-oscuro);
  color: var(--crezir-fondo);
}

.crezir-btn--azul {
  background: var(--crezir-azul-profundo);
  color: var(--crezir-fondo);
  border-color: var(--crezir-azul-profundo);
}
.crezir-btn--azul:hover,
.crezir-btn--azul:focus-visible {
  background: var(--crezir-tinta);
  border-color: var(--crezir-tinta);
  color: var(--crezir-fondo);
}

.crezir-btn--linea {
  background: transparent;
  color: var(--crezir-tinta);
  border-bottom: 1px solid var(--crezir-filete-fuerte);
  padding-inline: 0;
  font-weight: 400;
}
.crezir-btn--linea:hover,
.crezir-btn--linea:focus-visible { color: var(--crezir-tinta); border-bottom-color: var(--crezir-tinta); }

.crezir-btn--claro {
  background: var(--crezir-fondo);
  color: var(--crezir-tinta);
  border-color: var(--crezir-fondo);
}
.crezir-btn--claro:hover { background: var(--crezir-papel); border-color: var(--crezir-papel); color: var(--crezir-tinta); }

.crezir-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crezir-space-5);
  margin-top: var(--crezir-space-7);
}
@media (min-width: 600px) { .crezir-acciones { gap: var(--crezir-space-6); } }

/* ==========================================================================
   2 · CABECERA
   ========================================================================== */

.crezir-cabecera {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--crezir-fondo);
  border-bottom: var(--crezir-border-hairline);
}
.admin-bar .crezir-cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .crezir-cabecera { top: 46px; } }

.crezir-cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--crezir-space-5);
  min-height: 64px;
  padding-block: var(--crezir-space-4);
}

.crezir-marca { display: block; border-bottom: 0; line-height: 0; }
.crezir-marca:hover { border-bottom: 0; }
.crezir-marca img,
.crezir-marca svg { width: 132px; height: auto; }
@media (min-width: 1024px) { .crezir-marca img, .crezir-marca svg { width: 156px; } }

.crezir-cabecera__conmutador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--crezir-space-3);
  min-height: var(--crezir-toque-min);
  min-width: var(--crezir-toque-min);
  padding: var(--crezir-space-3) var(--crezir-space-4);
  background: transparent;
  border: 1px solid var(--crezir-filete);
  color: var(--crezir-tinta);
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-etiqueta);
  letter-spacing: var(--crezir-tr-etiqueta);
  text-transform: uppercase;
  cursor: pointer;
}
.crezir-cabecera__conmutador-barras {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.crezir-cabecera__conmutador-barras::before,
.crezir-cabecera__conmutador-barras::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.crezir-cabecera__conmutador-barras::before { top: -6px; }
.crezir-cabecera__conmutador-barras::after { top: 6px; }

.crezir-navegacion { display: none; }
.crezir-navegacion.esta-abierta {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--crezir-fondo);
  border-bottom: var(--crezir-border-fuerte);
  padding: var(--crezir-space-5) var(--crezir-margen) var(--crezir-space-7);
}
.crezir-navegacion ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.crezir-navegacion li { border-bottom: var(--crezir-border-hairline); }
.crezir-navegacion a {
  display: flex;
  align-items: center;
  min-height: var(--crezir-toque-min);
  padding-block: var(--crezir-space-4);
  color: var(--crezir-tinta-suave);
  font-size: var(--crezir-size-cuerpo);
  border-bottom: 0;
}
.crezir-navegacion a:hover { color: var(--crezir-tinta); }
.crezir-navegacion .current-menu-item > a,
.crezir-navegacion .current_page_item > a,
.crezir-navegacion [aria-current='page'] {
  color: var(--crezir-tinta);
  font-weight: 600;
}
.crezir-cabecera__accion { display: none; }
.crezir-navegacion__accion { margin-top: var(--crezir-space-6); }
.crezir-navegacion__accion .crezir-btn { width: 100%; }

@media (min-width: 1024px) {
  .crezir-cabecera__conmutador { display: none; }
  .crezir-navegacion { display: block; }
  .crezir-navegacion.esta-abierta { position: static; border-bottom: 0; padding: 0; }
  .crezir-navegacion ul { flex-direction: row; align-items: center; gap: var(--crezir-space-7); }
  .crezir-navegacion li { border-bottom: 0; }
  .crezir-navegacion a { font-size: var(--crezir-size-cuerpo-s); padding-block: var(--crezir-space-3); }
  .crezir-navegacion .current-menu-item > a,
  .crezir-navegacion .current_page_item > a { border-bottom: 2px solid var(--crezir-acento); }
  .crezir-navegacion__accion { display: none; }
  .crezir-cabecera__accion { display: inline-flex; }
  .crezir-cabecera__accion .crezir-btn { font-size: var(--crezir-size-cuerpo-s); padding: var(--crezir-space-4) var(--crezir-space-5); }
}

/* ==========================================================================
   3 · BLOQUE DE DATO DESTACADO
   El componente más importante del sistema. Tres tratamientos según fondo.
   ========================================================================== */

.crezir-dato { padding: var(--crezir-space-6); }
@media (min-width: 600px) { .crezir-dato { padding: var(--crezir-space-6) var(--crezir-space-7); } }

.crezir-dato__cifra {
  font-family: var(--crezir-font-titulares);
  font-weight: 700;
  font-size: var(--crezir-size-dato-xxl);
  line-height: var(--crezir-lh-dato-xxl);
  letter-spacing: var(--crezir-tr-dato-xxl);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  margin-top: var(--crezir-space-3);
  overflow-wrap: break-word;
}
.crezir-dato__frase {
  display: block;
  font-size: var(--crezir-size-cuerpo);
  line-height: 1.5;
  margin-top: var(--crezir-space-4);
  max-width: 26ch;
}
.crezir-dato__fuente {
  display: block;
  border-top: var(--crezir-border-hairline);
  margin-top: var(--crezir-space-5);
  padding-top: var(--crezir-space-4);
}

/* Sobre fondo · acento 4,99:1 · filete superior de 3 px en acento */
.crezir-dato--fondo {
  background: var(--crezir-fondo);
  border: var(--crezir-border-hairline);
  border-top: var(--crezir-border-acento);
}
.crezir-dato--fondo .crezir-dato__cifra { color: var(--crezir-acento); }
.crezir-dato--fondo .crezir-dato__frase { color: var(--crezir-tinta); }

/* Sobre tinta · acento-claro 5,76:1 · el fondo es la marca, sin filete */
.crezir-dato--tinta { background: var(--crezir-tinta); }
.crezir-dato--tinta .crezir-dato__cifra { color: var(--crezir-acento-claro); }
.crezir-dato--tinta .crezir-dato__frase { color: var(--crezir-fondo); }
.crezir-dato--tinta .crezir-etiqueta,
.crezir-dato--tinta .crezir-fuente { color: var(--crezir-gris-dato-claro); }
.crezir-dato--tinta .crezir-dato__fuente { border-top-color: var(--crezir-tinta-suave); }

/* Sobre papel · acento-oscuro 4,80:1 · barra lateral de 3 px en azul profundo */
.crezir-dato--papel {
  background: var(--crezir-papel);
  border-left: 3px solid var(--crezir-azul-profundo);
}
.crezir-dato--papel .crezir-dato__cifra { color: var(--crezir-acento-oscuro); }
.crezir-dato--papel .crezir-dato__frase { color: var(--crezir-tinta); }
.crezir-dato--papel .crezir-etiqueta,
.crezir-dato--papel .crezir-fuente { color: var(--crezir-gris-dato-oscuro); }
.crezir-dato--papel .crezir-dato__fuente { border-top-color: var(--crezir-filete-fuerte); }

.crezir-datos-fila { display: grid; gap: var(--crezir-space-6); }
@media (min-width: 600px) { .crezir-datos-fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .crezir-datos-fila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Tres bloques en fila reciben una caja más estrecha que el bloque suelto
     de la portada: la cifra baja un paso para que nunca parta en dos líneas. */
  .crezir-datos-fila--3 .crezir-dato__cifra { font-size: 96px; }
}

/* ==========================================================================
   4 · TABLA COMPARATIVA
   Cabecera en azul profundo, filas alternas, cifras a la derecha,
   sin bordes verticales dentro del cuerpo.
   En móvil NO hay desplazamiento horizontal: cada fila se reorganiza como
   un bloque con su rótulo de columna delante de cada valor.
   ========================================================================== */

.crezir-tabla-envoltura { margin-top: var(--crezir-space-6); }

.crezir-tabla {
  width: 100%;
  border-collapse: collapse;
  border: var(--crezir-border-fuerte);
  font-size: var(--crezir-size-cuerpo-s);
  background: var(--crezir-fondo);
}
.crezir-tabla caption {
  text-align: left;
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-h4);
  font-weight: 600;
  color: var(--crezir-tinta);
  margin-bottom: var(--crezir-space-4);
}
.crezir-tabla th,
.crezir-tabla td { text-align: left; vertical-align: top; }
.crezir-tabla thead th {
  background: var(--crezir-azul-profundo);
  color: var(--crezir-fondo);
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  font-weight: 500;
  letter-spacing: var(--crezir-tr-etiqueta);
  text-transform: uppercase;
  padding: var(--crezir-space-4) var(--crezir-space-4);
}
.crezir-tabla tbody th,
.crezir-tabla tbody td {
  padding: var(--crezir-space-4);
  border-top: var(--crezir-border-hairline);
  color: var(--crezir-tinta-suave);
  line-height: 1.5;
}
.crezir-tabla tbody th { font-weight: 600; color: var(--crezir-tinta); font-size: 15px; }
.crezir-tabla tbody tr:nth-child(odd) { background: var(--crezir-fondo); }
.crezir-tabla tbody tr:nth-child(even) { background: var(--crezir-papel); }

/* Metadato sobre papel: gris-dato-oscuro, nunca gris-dato (3,84:1). */
.crezir-tabla .crezir-celda-mono {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crezir-gris-dato-oscuro);
}
.crezir-tabla .crezir-celda-mono--incluido { color: var(--crezir-azul-profundo); }
.crezir-tabla .crezir-celda-num {
  font-family: var(--crezir-font-datos);
  font-variant-numeric: tabular-nums;
  color: var(--crezir-gris-dato-oscuro);
}
.crezir-tabla .crezir-celda-derecha { text-align: right; }

/* Destacado: filete de 3 px en acento sobre el borde izquierdo. Una fila máximo. */
.crezir-tabla tbody tr.esta-destacada > *:first-child { box-shadow: inset 3px 0 0 0 var(--crezir-acento); }

.crezir-tabla__fuente { margin-top: var(--crezir-space-4); }

/* --- Reorganización en móvil (≤ 1023 px) --------------------------------- */
@media (max-width: 1023px) {
  .crezir-tabla { border: 0; background: transparent; }
  /* La cabecera deja de verse pero sigue existiendo para el lector de
     pantalla; se saca del flujo hacia la izquierda para que ni sus celdas
     ni su ancho intervengan en el desplazamiento de la página. */
  .crezir-tabla thead {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .crezir-tabla tbody tr {
    display: block;
    border: var(--crezir-border-fuerte);
    margin-bottom: var(--crezir-space-5);
    padding: var(--crezir-space-2) var(--crezir-space-5) var(--crezir-space-4);
  }
  .crezir-tabla tbody tr:last-child { margin-bottom: 0; }
  .crezir-tabla tbody th,
  .crezir-tabla tbody td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--crezir-space-1);
    padding: var(--crezir-space-4) 0;
    border-top: var(--crezir-border-hairline);
  }
  .crezir-tabla tbody tr > *:first-child { border-top: 0; }
  .crezir-tabla tbody th::before,
  .crezir-tabla tbody td::before {
    content: attr(data-etiqueta);
    font-family: var(--crezir-font-datos);
    font-size: var(--crezir-size-fuente);
    font-weight: 500;
    letter-spacing: var(--crezir-tr-etiqueta);
    text-transform: uppercase;
    color: var(--crezir-gris-dato-oscuro);
  }
  .crezir-tabla tbody th[data-etiqueta='']::before,
  .crezir-tabla tbody td[data-etiqueta='']::before { content: none; }
  .crezir-tabla .crezir-celda-derecha { text-align: left; }
  .crezir-tabla tbody tr.esta-destacada { border-left: var(--crezir-border-acento); }
  .crezir-tabla tbody tr.esta-destacada > *:first-child { box-shadow: none; }
}

@media (min-width: 1024px) {
  .crezir-tabla { font-size: var(--crezir-size-cuerpo-s); }
  .crezir-tabla thead th,
  .crezir-tabla tbody th,
  .crezir-tabla tbody td { padding: var(--crezir-space-4) var(--crezir-space-4); }
}

/* ==========================================================================
   5 · TARJETA DE PROGRAMA
   Orden fijo: escalón, duración, nombre, promesa, participantes,
   medición, precio.
   ========================================================================== */

.crezir-programas { display: grid; gap: var(--crezir-space-6); }
@media (min-width: 600px) { .crezir-programas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crezir-programas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crezir-programas--4 { }
@media (min-width: 1024px) { .crezir-programas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.crezir-programa {
  display: flex;
  flex-direction: column;
  gap: var(--crezir-space-4);
  border: var(--crezir-border-hairline);
  background: var(--crezir-fondo);
  padding: var(--crezir-space-6);
}
.crezir-programa__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--crezir-space-3);
}
.crezir-programa__escalon { color: var(--crezir-acento); }
.crezir-programa__duracion {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crezir-gris-dato-oscuro);
}
.crezir-programa__nombre {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  font-weight: 600;
  letter-spacing: var(--crezir-tr-h3);
  line-height: var(--crezir-lh-h3);
  margin: 0;
}
.crezir-programa__nombre a { color: inherit; border-bottom: 0; }
.crezir-programa__nombre a:hover { color: var(--crezir-acento); }
.crezir-programa__promesa {
  font-size: 15px;
  line-height: 1.55;
  color: var(--crezir-tinta-suave);
  margin: 0;
}
.crezir-programa__ficha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--crezir-space-2) var(--crezir-space-5);
  align-items: baseline;
  font-size: var(--crezir-size-cuerpo-s);
  line-height: 1.5;
  color: var(--crezir-tinta-suave);
  border-top: var(--crezir-border-hairline);
  padding-top: var(--crezir-space-4);
  margin-top: auto;
}
.crezir-programa__ficha dt {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crezir-gris-dato-oscuro);
  margin: 0;
}
.crezir-programa__ficha dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.crezir-programa__precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--crezir-space-4);
  border-top: var(--crezir-border-fuerte);
  padding-top: var(--crezir-space-4);
}
.crezir-programa__precio-cifra {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--crezir-tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crezir-programa__acreditable {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crezir-azul-profundo);
}
.crezir-programa__enlace { margin-top: var(--crezir-space-2); }

/* Escalera completa: cinco pasos de altura creciente, el último en acento. */
.crezir-escalera {
  border: var(--crezir-border-hairline);
  background: var(--crezir-papel);
  padding: var(--crezir-space-6);
  display: grid;
  gap: var(--crezir-space-6);
}
@media (min-width: 1024px) { .crezir-escalera { grid-template-columns: minmax(0, 1fr) 330px; align-items: end; } }
.crezir-escalera__pasos {
  display: flex;
  align-items: flex-end;
  gap: var(--crezir-space-3);
  height: 76px;
  margin-top: var(--crezir-space-5);
}
.crezir-escalera__paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--crezir-space-3);
}
.crezir-escalera__rotulo {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  color: var(--crezir-gris-dato-oscuro);
}
.crezir-escalera__barra { background: var(--crezir-filete-fuerte); }
.crezir-escalera__paso:nth-child(1) .crezir-escalera__barra { height: 16px; }
.crezir-escalera__paso:nth-child(2) .crezir-escalera__barra { height: 28px; background: var(--crezir-gris-dato-claro); }
.crezir-escalera__paso:nth-child(3) .crezir-escalera__barra { height: 40px; background: var(--crezir-azul-profundo); }
.crezir-escalera__paso:nth-child(4) .crezir-escalera__barra { height: 52px; background: var(--crezir-azul-profundo); }
.crezir-escalera__paso:nth-child(5) .crezir-escalera__barra { height: 64px; }
/* El último escalón siempre en acento, haya cinco productos publicados o cuatro. */
.crezir-escalera__paso:last-child .crezir-escalera__barra { background: var(--crezir-acento); }
.crezir-escalera__nota { font-size: var(--crezir-size-cuerpo-s); line-height: 1.6; color: var(--crezir-tinta-suave); }

/* ==========================================================================
   6 · TARJETA DE CASO
   Línea base y segunda medición al mismo tamaño; la variación es la única
   cifra grande y va en franja de papel con acento-oscuro.
   ========================================================================== */

.crezir-caso { border: var(--crezir-border-hairline); background: var(--crezir-fondo); }
.crezir-caso__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--crezir-space-3);
  padding: var(--crezir-space-5) var(--crezir-space-6);
  border-bottom: var(--crezir-border-hairline);
}
.crezir-caso__cuerpo { padding: var(--crezir-space-6); }
.crezir-caso__indicador {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  font-weight: 600;
  letter-spacing: var(--crezir-tr-h3);
  line-height: var(--crezir-lh-h3);
  margin: var(--crezir-space-2) 0 0;
}
.crezir-caso__indicador a { color: inherit; border-bottom: 0; }
.crezir-caso__indicador a:hover { color: var(--crezir-acento); }
.crezir-caso__mediciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--crezir-border-hairline);
  margin-top: var(--crezir-space-6);
}
.crezir-caso__medicion { padding: var(--crezir-space-5) 0; }
.crezir-caso__medicion + .crezir-caso__medicion { border-top: var(--crezir-border-hairline); }
.crezir-caso__valor {
  font-family: var(--crezir-font-titulares);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--crezir-space-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crezir-caso__variacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--crezir-space-4);
  background: var(--crezir-papel);
  border-top: var(--crezir-border-fuerte);
  margin-inline: calc(var(--crezir-space-6) * -1);
  padding: var(--crezir-space-5) var(--crezir-space-6);
}
.crezir-caso__variacion .crezir-etiqueta { color: var(--crezir-gris-dato-oscuro); }
.crezir-caso__variacion-cifra {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-dato-xl);
  font-weight: 700;
  letter-spacing: var(--crezir-tr-dato-xl);
  line-height: 0.95;
  color: var(--crezir-acento-oscuro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crezir-caso__pie {
  border-top: var(--crezir-border-hairline);
  margin-top: var(--crezir-space-5);
  padding-top: var(--crezir-space-4);
}
.crezir-caso__cita {
  border-left: var(--crezir-border-estructural);
  padding-left: var(--crezir-space-5);
  margin: var(--crezir-space-6) 0 0;
  font-size: var(--crezir-size-cuerpo);
  line-height: 1.6;
  color: var(--crezir-tinta);
}
.crezir-caso__cita cite { display: block; margin-top: var(--crezir-space-3); font-style: normal; }

@media (min-width: 600px) {
  .crezir-caso__mediciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crezir-caso__medicion { padding: var(--crezir-space-5) var(--crezir-space-5) var(--crezir-space-5) 0; }
  .crezir-caso__medicion + .crezir-caso__medicion {
    border-top: 0;
    border-left: var(--crezir-border-hairline);
    padding: var(--crezir-space-5) 0 var(--crezir-space-5) var(--crezir-space-5);
  }
  .crezir-caso__variacion { grid-column: 1 / -1; }
}

.crezir-casos { display: grid; gap: var(--crezir-space-6); }
@media (min-width: 1024px) { .crezir-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   7 · MÉTODO, CALENDARIO, LISTA NUMERADA Y NOTAS
   ========================================================================== */

.crezir-metodo { display: grid; gap: var(--crezir-space-7); margin-top: var(--crezir-space-7); }
@media (min-width: 600px) { .crezir-metodo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--crezir-space-8); } }
.crezir-metodo__paso-marca { display: flex; align-items: flex-end; height: 8px; }
.crezir-metodo__paso-marca span { display: block; width: 56px; background: var(--crezir-gris-dato); height: 2px; }
.crezir-metodo__paso:nth-child(2) .crezir-metodo__paso-marca span { height: 4px; background: var(--crezir-gris-dato-claro); }
.crezir-metodo__paso:nth-child(3) .crezir-metodo__paso-marca span { height: 8px; background: var(--crezir-acento-claro); }
.crezir-metodo__titulo {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  font-weight: 600;
  margin: var(--crezir-space-4) 0 var(--crezir-space-3);
}
.crezir-metodo__texto { font-size: 15px; line-height: 1.6; margin: 0; }

.crezir-calendario {
  display: grid;
  gap: 0;
  margin-top: var(--crezir-space-6);
  border-top: 1px solid var(--crezir-tinta-suave);
}
@media (min-width: 600px) { .crezir-calendario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crezir-calendario { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crezir-calendario__hito { padding: var(--crezir-space-6) var(--crezir-space-6) var(--crezir-space-6) 0; }
@media (min-width: 600px) { .crezir-calendario__hito { border-right: 1px solid var(--crezir-tinta-suave); padding-left: var(--crezir-space-6); } }
@media (min-width: 600px) { .crezir-calendario__hito:first-child { padding-left: 0; } }
.crezir-calendario__hito:last-child { border-right: 0; }
.crezir-calendario__marca { display: block; width: 6px; height: 20px; background: var(--crezir-gris-dato); }
.crezir-calendario__hito--medicion .crezir-calendario__marca { background: var(--crezir-acento-claro); }
.crezir-calendario__texto { font-size: var(--crezir-size-cuerpo); line-height: 1.5; margin: var(--crezir-space-2) 0 0; color: var(--crezir-fondo); }

.crezir-lista-numerada { list-style: none; margin: var(--crezir-space-5) 0 0; padding: 0; display: grid; gap: var(--crezir-space-4); }
.crezir-lista-numerada li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--crezir-space-4);
  font-size: 15px;
  line-height: 1.5;
}
.crezir-lista-numerada li::before {
  content: counter(crezir-num, decimal-leading-zero);
  counter-increment: crezir-num;
  font-family: var(--crezir-font-datos);
  font-size: 12px;
  color: var(--crezir-acento-oscuro);
}
.crezir-lista-numerada { counter-reset: crezir-num; }

.crezir-nota {
  border: var(--crezir-border-hairline);
  padding: var(--crezir-space-5) var(--crezir-space-6);
  background: var(--crezir-fondo);
}
.crezir-nota__texto { font-size: 15px; line-height: 1.6; color: var(--crezir-tinta-suave); margin: var(--crezir-space-3) 0 0; }
.crezir-nota--papel { background: var(--crezir-papel); border-left: 3px solid var(--crezir-azul-profundo); }
.crezir-nota--papel .crezir-etiqueta { color: var(--crezir-azul-profundo); }
.crezir-nota--acento { background: var(--crezir-acento-tenue); border: 1px solid var(--crezir-acento); }
.crezir-nota--acento .crezir-etiqueta { color: var(--crezir-acento-oscuro); }
.crezir-nota--acento .crezir-nota__texto { color: var(--crezir-tinta); }

/* Ficha de programa: duración, participantes, precio, condición. */
.crezir-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--crezir-border-fuerte);
  margin-top: var(--crezir-space-6);
}
@media (min-width: 600px) { .crezir-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crezir-ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crezir-ficha__campo { padding: var(--crezir-space-5) var(--crezir-space-6); border-top: var(--crezir-border-hairline); }
.crezir-ficha__campo:first-child { border-top: 0; }
@media (min-width: 600px) {
  .crezir-ficha__campo { border-top: 0; border-left: var(--crezir-border-hairline); }
  .crezir-ficha__campo:first-child { border-left: 0; }
}
.crezir-ficha__valor { font-size: var(--crezir-size-cuerpo); line-height: 1.5; margin: var(--crezir-space-3) 0 0; color: var(--crezir-tinta); }

/* Bloque de aval del Estado. */
.crezir-aval {
  border: var(--crezir-border-hairline);
  border-left: var(--crezir-border-estructural);
  background: var(--crezir-azul-tenue);
  padding: var(--crezir-space-6);
}
.crezir-aval__texto { margin: var(--crezir-space-3) 0 0; color: var(--crezir-tinta); }

/* Cita de la casa. */
.crezir-frase {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h1);
  font-weight: 700;
  letter-spacing: var(--crezir-tr-h1);
  line-height: 1.12;
  margin: 0;
  text-wrap: pretty;
}

/* ==========================================================================
   8 · CIERRE DE CONVERSIÓN
   Sección guardada, insertada al final de toda página y de todo artículo.
   ========================================================================== */

.crezir-cierre { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .crezir-cierre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crezir-cierre__declaracion { padding: var(--crezir-space-8) 0; }
.crezir-cierre__accion {
  background: var(--crezir-papel);
  padding: var(--crezir-space-8) var(--crezir-space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--crezir-space-5);
  margin-inline: calc(var(--crezir-margen) * -1);
}
@media (min-width: 1024px) {
  .crezir-cierre__declaracion { padding-right: var(--crezir-space-8); }
  .crezir-cierre__accion { margin-inline: 0; padding: var(--crezir-space-8); }
}
.crezir-cierre__texto {
  font-size: var(--crezir-size-cuerpo-l);
  line-height: var(--crezir-lh-cuerpo-l);
  color: var(--crezir-tinta);
  margin: 0;
}
.crezir-cierre__accion .crezir-btn { align-self: flex-start; }

/* ==========================================================================
   9 · FORMULARIO DE DIAGNÓSTICO
   ========================================================================== */

.crezir-formulario { max-width: 720px; }
.crezir-formulario__grupo { margin-bottom: var(--crezir-space-6); }
.crezir-formulario__fila { display: grid; gap: var(--crezir-space-6); }
@media (min-width: 600px) { .crezir-formulario__fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.crezir-formulario label {
  display: block;
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-cuerpo-s);
  font-weight: 600;
  color: var(--crezir-tinta);
  margin-bottom: var(--crezir-space-3);
}
.crezir-formulario__ayuda {
  display: block;
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: var(--crezir-tr-fuente);
  font-weight: 400;
  color: var(--crezir-gris-dato-oscuro);
  margin-top: var(--crezir-space-1);
  text-transform: none;
}
.crezir-formulario__obligatorio { color: var(--crezir-acento); font-weight: 700; }

.crezir-formulario input[type='text'],
.crezir-formulario input[type='email'],
.crezir-formulario input[type='tel'],
.crezir-formulario select,
.crezir-formulario textarea {
  width: 100%;
  min-height: var(--crezir-toque-min);
  padding: var(--crezir-space-4);
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-cuerpo);
  line-height: 1.5;
  color: var(--crezir-tinta);
  background: var(--crezir-fondo);
  border: 1px solid var(--crezir-filete-fuerte);
  border-radius: var(--crezir-radius-none);
  appearance: none;
}
.crezir-formulario textarea { min-height: 120px; resize: vertical; }
.crezir-formulario select {
  background-image: linear-gradient(45deg, transparent 50%, var(--crezir-tinta) 50%),
                    linear-gradient(135deg, var(--crezir-tinta) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--crezir-space-9);
}
.crezir-formulario input:focus,
.crezir-formulario select:focus,
.crezir-formulario textarea:focus { border-color: var(--crezir-azul-profundo); }
.crezir-formulario input[aria-invalid='true'],
.crezir-formulario select[aria-invalid='true'],
.crezir-formulario textarea[aria-invalid='true'] { border-color: var(--crezir-acento-oscuro); border-width: 2px; }

.crezir-formulario__consentimiento {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--crezir-space-4);
  align-items: start;
  border-top: var(--crezir-border-hairline);
  padding-top: var(--crezir-space-6);
}
.crezir-formulario__consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--crezir-acento); }
.crezir-formulario__consentimiento label { font-weight: 400; font-size: var(--crezir-size-cuerpo-s); line-height: 1.55; margin: 0; }

.crezir-formulario__error {
  display: block;
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: var(--crezir-tr-fuente);
  color: var(--crezir-acento-oscuro);
  margin-top: var(--crezir-space-2);
}
.crezir-aviso {
  border: var(--crezir-border-fuerte);
  border-left: var(--crezir-border-acento);
  background: var(--crezir-acento-tenue);
  padding: var(--crezir-space-5) var(--crezir-space-6);
  margin-bottom: var(--crezir-space-7);
}
.crezir-aviso--ok { border-left-color: var(--crezir-azul-profundo); background: var(--crezir-azul-tenue); }
.crezir-aviso p { margin: 0; color: var(--crezir-tinta); }

.crezir-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   10 · AVISO DE COOKIES
   Aparece antes de que se cargue cualquier etiqueta de medición.
   ========================================================================== */

.crezir-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  background: var(--crezir-tinta);
  color: var(--crezir-fondo);
  border-top: var(--crezir-border-acento);
  padding: var(--crezir-space-6) var(--crezir-margen);
}
.crezir-cookies[hidden] { display: none !important; }
.crezir-cookies__interior {
  max-width: var(--crezir-contenido-max);
  margin-inline: auto;
  display: grid;
  gap: var(--crezir-space-5);
}
@media (min-width: 1024px) {
  .crezir-cookies__interior { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--crezir-space-8); }
}
.crezir-cookies__texto { font-size: var(--crezir-size-cuerpo-s); line-height: 1.6; color: var(--crezir-papel); margin: 0; max-width: 72ch; }
.crezir-cookies__texto a { color: var(--crezir-acento-claro); border-bottom-color: var(--crezir-tinta-suave); }
.crezir-cookies__botones { display: flex; flex-wrap: wrap; gap: var(--crezir-space-4); }
.crezir-cookies__botones .crezir-btn { flex: 1 1 auto; }
@media (min-width: 600px) { .crezir-cookies__botones .crezir-btn { flex: 0 0 auto; } }
.crezir-btn--fantasma {
  background: transparent;
  color: var(--crezir-fondo);
  border-color: var(--crezir-gris-dato-claro);
}
.crezir-btn--fantasma:hover { background: var(--crezir-tinta-suave); color: var(--crezir-fondo); border-color: var(--crezir-fondo); }

/* ==========================================================================
   11 · PIE DE PÁGINA
   ========================================================================== */

.crezir-pie { background: var(--crezir-tinta); color: var(--crezir-papel); margin-top: var(--crezir-ritmo-seccion); }
.crezir-pie__cuerpo { display: grid; gap: var(--crezir-space-7); padding-block: var(--crezir-space-8); }
@media (min-width: 600px) { .crezir-pie__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crezir-pie__cuerpo { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--crezir-space-8); } }
.crezir-pie__titulo {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-etiqueta);
  font-weight: 500;
  letter-spacing: var(--crezir-tr-etiqueta);
  text-transform: uppercase;
  color: var(--crezir-gris-dato-claro);
  margin: 0 0 var(--crezir-space-5);
}
.crezir-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--crezir-space-4); }
.crezir-pie a { color: var(--crezir-papel); border-bottom: 0; font-size: var(--crezir-size-cuerpo-s); }
.crezir-pie a:hover { color: var(--crezir-fondo); border-bottom: 1px solid var(--crezir-fondo); }
.crezir-pie__marca img, .crezir-pie__marca svg { width: 140px; }
.crezir-pie__texto { font-size: var(--crezir-size-cuerpo-s); line-height: 1.6; color: var(--crezir-papel); margin: var(--crezir-space-5) 0 0; max-width: 44ch; }
.crezir-pie__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--crezir-space-4) var(--crezir-space-6);
  justify-content: space-between;
  border-top: 1px solid var(--crezir-tinta-suave);
  padding-block: var(--crezir-space-6);
}
.crezir-pie__barra p { font-family: var(--crezir-font-datos); font-size: var(--crezir-size-fuente); letter-spacing: var(--crezir-tr-fuente); text-transform: uppercase; color: var(--crezir-gris-dato-claro); margin: 0; }
.crezir-pie__preferencias {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  letter-spacing: var(--crezir-tr-fuente);
  text-transform: uppercase;
  color: var(--crezir-gris-dato-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: var(--crezir-toque-min);
}
.crezir-pie__preferencias:hover { color: var(--crezir-fondo); }

/* ==========================================================================
   12 · ENTRADAS, ARCHIVOS Y TEXTO LEGAL
   ========================================================================== */

.crezir-encabezado-pagina { padding-block: var(--crezir-space-8) var(--crezir-space-7); }
@media (min-width: 1024px) { .crezir-encabezado-pagina { padding-block: var(--crezir-space-9) var(--crezir-space-8); } }
.crezir-encabezado-pagina__rotulo { margin-bottom: var(--crezir-space-4); }
.crezir-encabezado-pagina h1 { max-width: 26ch; }

.crezir-prosa > * + * { margin-top: var(--crezir-space-6); }
.crezir-prosa p, .crezir-prosa li { max-width: var(--crezir-medida-linea-max); }
.crezir-prosa h2 { margin-top: var(--crezir-space-8); margin-bottom: var(--crezir-space-5); }
.crezir-prosa h3 { margin-top: var(--crezir-space-7); margin-bottom: var(--crezir-space-4); }
.crezir-prosa ul, .crezir-prosa ol { padding-left: var(--crezir-space-6); margin-block: 0; }
.crezir-prosa li + li { margin-top: var(--crezir-space-4); }
.crezir-prosa strong { font-weight: 600; }

.crezir-legal .crezir-prosa h2 {
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  border-top: var(--crezir-border-hairline);
  padding-top: var(--crezir-space-6);
}
.crezir-legal__actualizacion { margin-top: var(--crezir-space-8); border-top: var(--crezir-border-fuerte); padding-top: var(--crezir-space-4); }

.crezir-lista-entradas { display: grid; gap: var(--crezir-space-6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .crezir-lista-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crezir-lista-entradas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crezir-entrada { border: var(--crezir-border-hairline); background: var(--crezir-fondo); padding: var(--crezir-space-6); display: flex; flex-direction: column; gap: var(--crezir-space-4); }
.crezir-entrada__titulo { font-family: var(--crezir-font-titulares); font-size: var(--crezir-size-h3); font-weight: 600; letter-spacing: var(--crezir-tr-h3); line-height: var(--crezir-lh-h3); margin: 0; }
.crezir-entrada__titulo a { color: inherit; border-bottom: 0; }
.crezir-entrada__titulo a:hover { color: var(--crezir-acento); }
.crezir-entrada__extracto { font-size: 15px; line-height: 1.55; color: var(--crezir-tinta-suave); margin: 0; }
.crezir-entrada__pie { margin-top: auto; border-top: var(--crezir-border-hairline); padding-top: var(--crezir-space-4); }

.crezir-vacio { border: var(--crezir-border-fuerte); border-left: var(--crezir-border-estructural); background: var(--crezir-papel); padding: var(--crezir-space-7); }
.crezir-vacio p { color: var(--crezir-tinta); margin: var(--crezir-space-3) 0 0; }

.crezir-paginacion { margin-top: var(--crezir-space-8); display: flex; flex-wrap: wrap; gap: var(--crezir-space-4); }
.crezir-paginacion .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--crezir-toque-min); min-height: var(--crezir-toque-min);
  padding-inline: var(--crezir-space-4);
  border: var(--crezir-border-hairline); border-bottom: var(--crezir-border-hairline);
  font-family: var(--crezir-font-datos); font-size: var(--crezir-size-cuerpo-s);
  color: var(--crezir-tinta);
}
.crezir-paginacion .page-numbers.current { background: var(--crezir-azul-profundo); color: var(--crezir-fondo); border-color: var(--crezir-azul-profundo); }

/* ==========================================================================
   13 · CONVIVENCIA CON ELEMENTOR
   Los widgets propios heredan el ancho de la retícula del tema y no el
   del contenedor de Elementor, para que el ritmo no se rompa al editar.
   ========================================================================== */

.elementor-widget-container > .crezir-componente { width: 100%; }
.crezir-componente > *:first-child { margin-top: 0; }
.crezir-componente > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   14 · UTILIDADES DE RITMO
   El sistema no admite estilos en línea: cuando una plantilla necesita un
   espacio concreto, lo pide por su clase y el valor sigue viniendo de los
   tokens.
   ========================================================================== */

.crezir-lista-plana { list-style: none; margin: 0; padding: 0; }
.crezir-escalera__pasos.crezir-lista-plana { margin-top: var(--crezir-space-5); }
.crezir-cierre__atribucion { margin-top: var(--crezir-space-5); }
.crezir-calendario__momento { margin-top: var(--crezir-space-4); }
.crezir-bloque-fuentes { margin-top: var(--crezir-space-8); }
.crezir-nota--separada { margin-top: var(--crezir-space-6); }
.crezir-prosa--ajustada { margin-top: var(--crezir-space-4); }
.crezir-articulo__imagen { margin: 0 0 var(--crezir-space-8); }

/* ==========================================================================
   15 · RETRATO DEL AUTOR
   Un solo retrato por página, con la credencial al lado de la cara
   (D11 · dirección fotográfica §4). El sistema no usa sombras ni viñeteado:
   la fotografía se enmarca con el mismo filete de 1 px que todo lo demás.
   ========================================================================== */

.crezir-retrato { margin: 0; }
.crezir-retrato__imagen { display: block; border: var(--crezir-border-hairline); background: var(--crezir-papel); }
.crezir-retrato__imagen img { display: block; width: 100%; height: auto; }
.crezir-retrato__pie {
  border-top: var(--crezir-border-hairline);
  margin-top: var(--crezir-space-4);
  padding-top: var(--crezir-space-3);
}

/* Sobre franja oscura el filete se apaga: la propia foto es el borde. */
.crezir-franja--tinta .crezir-retrato__imagen { border-color: var(--crezir-tinta-suave); background: var(--crezir-tinta); }

/* ==========================================================================
   16 · CONTACTO DIRECTO
   Teléfono y correo institucionales. En móvil la zona pulsable del teléfono
   cumple los 44 px mínimos: marcar desde el móvil es la vía más corta a una
   conversación de venta corporativa.
   ========================================================================== */

.crezir-contacto__vias {
  list-style: none;
  margin: var(--crezir-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--crezir-space-4);
}
.crezir-contacto__vias li { display: grid; gap: var(--crezir-space-1); }
.crezir-contacto__valor {
  display: inline-flex;
  align-items: center;
  min-height: var(--crezir-toque-min);
  font-family: var(--crezir-font-titulares);
  font-size: var(--crezir-size-h3);
  font-weight: 600;
  letter-spacing: var(--crezir-tr-h3);
  color: var(--crezir-tinta);
  border-bottom: 1px solid var(--crezir-filete-fuerte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crezir-contacto__valor:hover,
.crezir-contacto__valor:focus-visible { color: var(--crezir-acento-oscuro); border-bottom-color: var(--crezir-acento-oscuro); }

/* El correo es más largo que el teléfono y no debe desbordar en móvil. */
.crezir-contacto__vias li:last-child .crezir-contacto__valor {
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-cuerpo);
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Contacto del pie, bajo la marca. */
.crezir-pie__contacto {
  list-style: none;
  margin: var(--crezir-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--crezir-space-3);
}
.crezir-pie__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: var(--crezir-toque-min);
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-cuerpo-s);
  letter-spacing: 0.02em;
  color: var(--crezir-papel);
  border-bottom: 0;
}
.crezir-pie__contacto a:hover { color: var(--crezir-fondo); border-bottom: 1px solid var(--crezir-fondo); }