/* Hero de categoría: templates/category/partials/category_hero.html. Un solo componente para
   todas las categorías. Réplica del banner de referencias/FreelanClick_AREA_LEGAL (1929 × 504).

   Escritorio (desde 1041 px, como la referencia): el hero mantiene la proporción de la lámina y
   --u es 1 px de ella (1/1929 del ancho del hero, hasta 1929 px). Cada medida es la coordenada
   de la referencia. Bajo 1041 px: columna única (migas, tarjeta con etiqueta, título,
   descripción, la composición de la derecha entera y los beneficios), como su versión móvil.
   Letra: Inter Tight, solo dentro del hero. */
.ch{--ch-azul:#0a5ff5;--ch-marino:#080b4c;--ch-gris:#6584b1;
  position:relative;width:100%;overflow:hidden;font-family:'Inter Tight','Inter',Arial,sans-serif;color:var(--ch-marino);
  background:linear-gradient(180deg,#ebf5fe,#e8f4fe)}
/* El fondo ocupa todo el ancho; la composición (la lámina) va centrada encima, hasta 1929 px.
   Sus manchas difusas pueden salir del lienzo y fundirse con el fondo. */
/* 2026-10-15: la composición se detiene en el eje del sitio, no en los 1929 px de la
   lámina. A 1920 px el banner medía 1920 de ancho y 502 de alto mientras el resto de
   la página iba a 1280: se veía de otro proyecto y demasiado alto. La proporción no
   cambia (todas las medidas salen de --u), solo el tope. */
.ch__lienzo{--u:calc(100cqw/1929);position:relative;width:100%;max-width:var(--fc-ancho-sitio);margin:0 auto;aspect-ratio:1929/504;container-type:inline-size}
.ch__lienzo>*{--u:calc(100cqw/1929)}
/* Sin la franja del padding de la página: el hero empieza pegado a la cabecera. */
main.categoria-detalle:has(>.ch){padding-top:0}
.ch :where(h1,p,ul,li,a,span,strong,nav){margin:0;padding:0;font:inherit;letter-spacing:0;line-height:1;color:inherit;text-decoration:none;list-style:none}
.ch-defs{position:absolute;width:0;height:0;overflow:hidden}
.ch-arte{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ch-visual{display:none}
/* En la composición de móvil (viewBox 1068 36 861 449) la insignia va en su mismo lugar, en %. */
.ch-visual{position:relative;container-type:inline-size}
.ch-visual .ch-insignia{left:72.59%;top:54.12%;width:16.14%;height:31.85%;border-radius:22%/21.5%;
  box-shadow:0 1.2cqw 2.8cqw rgba(255,122,26,.42)}
.ch-visual .ch-insignia>i{font-size:10.7cqw}

/* ---------- Migas ---------- */
.ch-miga{position:absolute;left:calc(49*var(--u));top:calc(32*var(--u));z-index:2;display:flex;align-items:center;gap:calc(13*var(--u));
  color:#7f97c7;font-size:calc(20.6*var(--u));font-weight:400;white-space:nowrap}
.ch-miga a{color:#7f97c7}
.ch-miga a:hover{color:var(--ch-azul)}
.ch-miga [aria-current]{color:var(--ch-marino);font-weight:700}
.ch-miga__flecha{flex:none;width:calc(8*var(--u));height:calc(13*var(--u));margin-right:calc(4*var(--u));color:#7f97c7}

/* ---------- Texto ---------- */
.ch-texto{position:absolute;inset:0;z-index:2;pointer-events:none}
.ch-texto>*{pointer-events:auto}
.ch-etiqueta{position:absolute;left:calc(100*var(--u));top:calc(114*var(--u));display:flex;align-items:center;gap:calc(16*var(--u));
  height:calc(51*var(--u));padding:0 calc(20*var(--u)) 0 calc(20*var(--u));padding-top:calc(3*var(--u));border-radius:999px;background:#d8ecfe;color:#1463f3;
  font-size:calc(21.2*var(--u));font-weight:800;text-transform:uppercase;white-space:nowrap}
.ch-etiqueta>svg{flex:none;width:calc(26*var(--u));height:calc(26*var(--u));margin-top:calc(-3*var(--u));fill:#1463f3}
/* Ícono de la etiqueta desde el admin (o el de respaldo): al tamaño del maletín de la referencia. */
.ch-etiqueta>img{flex:none;width:calc(28*var(--u));height:calc(28*var(--u));margin-top:calc(-3*var(--u));border-radius:calc(6*var(--u));object-fit:contain}
.ch-etiqueta>i{flex:none;margin-top:calc(-3*var(--u));font-size:calc(27*var(--u));line-height:1}

/* ---------- Insignia naranja con el ícono de la categoría ----------
   El ícono subido en el admin se pinta en blanco; sin él, el ícono de respaldo de su slug. */
.ch-insignia{position:absolute;z-index:1;left:calc(1693*var(--u));top:calc(279*var(--u));display:grid;place-items:center;
  width:calc(139*var(--u));height:calc(143*var(--u));border-radius:calc(34*var(--u));
  background:linear-gradient(135deg,#ff9a2e 0%,#ff7410 55%,#ff5a00 100%);
  box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) rgba(255,122,26,.42),inset 0 calc(2*var(--u)) calc(6*var(--u)) rgba(255,255,255,.25);color:#fff}
.ch-insignia>img{width:66%;height:66%;object-fit:contain;filter:brightness(0) invert(1)}
.ch-insignia>i{font-size:calc(92*var(--u));line-height:1}
.ch-titulo{position:absolute;left:calc(103*var(--u));top:calc(187*var(--u));color:var(--ch-marino);font-size:calc(73*var(--u));font-weight:900;
  letter-spacing:-.006em;white-space:nowrap}
.ch-titulo span{color:var(--ch-azul)}
.ch-descripcion{position:absolute;left:calc(104*var(--u));top:calc(280*var(--u));color:var(--ch-gris);font-size:calc(31.5*var(--u));font-weight:500;white-space:nowrap}

/* ---------- Beneficios ---------- */
.ch-beneficios{position:absolute;left:calc(94*var(--u));top:calc(344*var(--u));display:flex;align-items:center}
/* Cada beneficio ocupa al menos su lugar de la lámina (separadores en x 474 y 782); un texto
   más largo empuja a los siguientes en vez de montarse. */
.ch-beneficio{position:relative;display:flex;align-items:center;gap:calc(12*var(--u))}
.ch-beneficio:nth-child(1){min-width:calc(380*var(--u))}
.ch-beneficio:nth-child(2){min-width:calc(308*var(--u))}
.ch-beneficio+.ch-beneficio{padding-left:calc(12*var(--u))}
.ch-beneficio+.ch-beneficio::before{content:"";position:absolute;left:0;top:calc(13*var(--u));width:calc(2*var(--u));height:calc(68*var(--u));background:#e1edfb}
.ch-beneficio__icono{flex:none;display:grid;place-items:center;width:calc(88*var(--u));height:calc(88*var(--u));border-radius:50%;background:#fff;
  box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(95,150,225,.22)}
.ch-beneficio__icono svg{fill:url(#ch-g-icono)}
.ch-beneficio__icono--verificados svg{width:calc(47*var(--u));height:calc(52*var(--u))}
.ch-beneficio__icono--seguro svg{width:calc(40*var(--u));height:calc(50*var(--u))}
.ch-beneficio__icono--respuesta svg{width:calc(49*var(--u));height:calc(46*var(--u))}
.ch-beneficio__texto{display:flex;flex-direction:column;gap:calc(13*var(--u));padding-top:calc(6*var(--u));white-space:nowrap}
.ch-beneficio__texto strong{color:var(--ch-marino);font-size:calc(20.9*var(--u));font-weight:700}
.ch-beneficio__texto span{color:var(--ch-gris);font-size:calc(18*var(--u));font-weight:400}

.ch a:focus-visible{outline:3px solid var(--ch-azul);outline-offset:2px;border-radius:4px}

/* ---------- Bajo 1041 px: una columna, como la versión móvil de la referencia ---------- */
@media (max-width:1040px){
  .ch{background:linear-gradient(135deg,#eaf6ff,#f2faff 62%,#dfefff)}
  .ch__lienzo{aspect-ratio:auto;padding:12px 16px 24px}
  .ch-arte,.ch-insignia--escritorio{display:none}
  .ch-miga{position:static;display:flex;flex-wrap:wrap;gap:0 8px;margin-bottom:12px;font-size:12px;line-height:20px}
  .ch-miga a,.ch-miga [aria-current]{display:inline-flex;align-items:center;min-height:44px;line-height:20px}
  .ch-miga__flecha{width:6px;height:10px;margin:0}
  .ch-texto{position:static;max-width:820px;margin:0 auto;padding:24px 20px 20px;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 9px 28px rgba(164,208,244,.17)}
  .ch-etiqueta{position:static;width:fit-content;gap:9px;height:auto;padding:7px 13px;font-size:13px;line-height:21px}
  .ch-etiqueta>svg,.ch-etiqueta>img{width:22px;height:22px;margin-top:0}
  .ch-etiqueta>i{margin-top:0;font-size:20px}
  .ch-titulo{position:static;margin-top:14px;font-size:clamp(30px,5.2vw,48px);line-height:1.12;letter-spacing:-.02em;white-space:normal;text-wrap:balance}
  .ch-titulo span{display:block}
  .ch-descripcion{position:static;margin-top:14px;font-size:16px;line-height:25px;white-space:normal}
  .ch-visual{display:block;width:100%;aspect-ratio:861/449;margin:16px 0 20px;overflow:hidden;background:linear-gradient(#ecf7ff,#eaf6ff)}
  .ch-visual svg{display:block;width:100%;height:100%}
  .ch-beneficios{position:static;display:grid;align-items:start;gap:14px}
  .ch-beneficio{gap:12px}
  .ch-beneficio:nth-child(n){min-width:0}
  .ch-beneficio+.ch-beneficio{padding:0}
  .ch-beneficio+.ch-beneficio::before{display:none}
  .ch-beneficio__texto{padding-top:0}
  .ch-beneficio__icono{width:54px;height:54px;box-shadow:0 4px 12px rgba(95,150,225,.2)}
  .ch-beneficio__icono--verificados svg{width:27px;height:26px}
  .ch-beneficio__icono--seguro svg{width:23px;height:28px}
  .ch-beneficio__icono--respuesta svg{width:27px;height:26px}
  .ch-beneficio__texto{gap:4px;white-space:normal}
  .ch-beneficio__texto strong{font-size:15px;line-height:22px}
  .ch-beneficio__texto span{font-size:13px;line-height:20px}
}
@media (min-width:700px) and (max-width:1040px){
  .ch-texto{padding:28px 32px}
  .ch-beneficios{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .ch-beneficio{align-items:flex-start;gap:9px}
  .ch-beneficio__icono{width:46px;height:46px}
  .ch-beneficio__texto strong{font-size:13px;line-height:20px}
  .ch-beneficio__texto span{font-size:12px;line-height:18px}
}
/* CMS Fase 5 (2026-10-09): ícono de un beneficio elegido en el admin (Remix o imagen) en el
   mismo círculo que los dibujos; sin cambios en el admin no se usa. */
.ch-beneficio__icono--ri,.ch-beneficio__icono--img{container-type:size}
.ch-beneficio__icono--ri i{font-size:50cqh;line-height:1;color:#1f73fb}
.ch-beneficio__icono--img img{width:56cqh;height:56cqh;object-fit:contain}