/* Tarjetas del catálogo que enlazan a otra página: «Ver la ficha» en las categorías,
   «Leer el tutorial» en las fichas. Tarjeta evmu8cdF.

   Medido en el CMS el 2026-09-13:
   1. El diseño «clean-vertical» con fondo baja el botón media altura (top: 28.5px)
      para que monte sobre el borde. Con los botones de 57 px de este tema quedaba
      medio botón fuera de la tarjeta blanca.
   2. Avada iguala la altura con un min-height calculado por JS antes de que la
      maqueta se asiente. Un nombre en dos líneas («Docker + Portainer CE») empujaba
      su botón por debajo y la fila quedaba desalineada.

   Decisión (David): sin botón, la tarjeta entera es el enlace. El título ya enlaza
   al mismo sitio; su enlace se estira sobre toda la tarjeta y el botón se oculta.
   Un solo enlace por tarjeta: con teclado se llega una vez, y el foco se ve en la
   tarjeta entera. Las filas son flex, así que las tarjetas miden lo mismo.

   Sólo afecta a las cajas CON enlace (las que traen el botón de Avada): las de
   «Para qué sirve», «Quién la usa» o «Dónde seguir» no llevan y no cambian. Sin
   :has() —navegadores viejos— se ven como antes, con su botón. */

.fusion-content-boxes.content-boxes-clean-vertical:has(.fusion-content-box-button){display:flex;flex-wrap:wrap}
.fusion-content-boxes.content-boxes-clean-vertical:has(.fusion-content-box-button)>.fusion-clearfix{display:none}
.fusion-content-boxes.content-boxes-clean-vertical:has(.fusion-content-box-button)>.content-box-column{display:flex;float:none}

.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button){
  display:flex;flex-direction:column;width:100%;min-height:0!important;height:auto!important;
  padding-bottom:30px;position:relative;border:1px solid #dfe7ee;border-radius:14px;
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.content-boxes-clean-vertical .content-box-wrapper>.fusion-content-box-button{display:none!important}

/* El enlace del título cubre la tarjeta. */
.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button) .heading-link::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:14px}

.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button):hover{
  box-shadow:0 10px 28px rgba(0,45,90,.14);transform:translateY(-2px);border-color:#b9d3ea}
.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button):hover .content-box-heading{text-decoration:underline}
.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button):focus-within{outline:2px solid #0070c9;outline-offset:3px}
.content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button) a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  .content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button){transition:none}
  .content-boxes-clean-vertical .content-box-wrapper:has(>.fusion-content-box-button):hover{transform:none}}


/* «Lo que ya escribimos sobre esto» en las fichas: tarjetas con el estilo de
   «Artículos relacionados» del blog (tarjeta se7xOPbG). Medido en un artículo el
   2026-09-13: fondo blanco, borde 1px #e1e6eb, radio 14px, imagen arriba a 16:10,
   título 21px/600 #0b0f14 con 24px de margen, fecha 14px #4a5560; al pasar el
   ratón el borde se oscurece y el título se pone azul. Las variables son las del
   tema del blog, con su valor medido de respaldo. */
.cxl-arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px;margin:20px 0 0}
.cxl-art{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--cxl-borde,#e1e6eb);border-radius:14px;overflow:hidden;text-align:left;
  transition:border-color .18s}
.cxl-art:hover{border-color:#aeb9c4}
.cxl-art-img{aspect-ratio:16/10;overflow:hidden;background:#eef3f8}
.cxl-art-img img{width:100%;height:100%;object-fit:cover;display:block}
.cxl-art-titulo{margin:0!important;padding:24px 24px 0;font-size:21px!important;line-height:1.3!important;
  font-weight:600!important;letter-spacing:-.01em}
.cxl-art-titulo a{color:var(--cxl-titulo,#0b0f14);text-decoration:none}
.cxl-art-titulo a::after{content:"";position:absolute;inset:0;border-radius:14px}
.cxl-art:hover .cxl-art-titulo a{color:var(--cxl-azul,#0070c9)}
.cxl-art:focus-within{outline:2px solid #0070c9;outline-offset:3px}
.cxl-art a:focus-visible{outline:none}
.cxl-art-nota{margin:10px 0 0!important;padding:0 24px;font-size:15px;line-height:1.5;color:#333c45}
.cxl-art-fecha{margin:auto 0 0!important;padding:14px 24px 28px;font-size:14px;line-height:1.45;color:#4a5560}
@media (prefers-reduced-motion:reduce){.cxl-art{transition:none}}

/* Pósters de las fichas en su categoría (tarjeta ONO7FQSa). Inspirados en las
   tarjetas «Hoy» de la App Store: cada una con el color, el logotipo, la voz y la
   captura de su aplicación. Los colores llegan en variables por tarjeta desde PHP
   (--fondo con texto blanco a 7:1 o más, --icono a 3:1). */
.cxl-posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;margin:24px 0 8px}
.cxl-poster{position:relative;display:flex;flex-direction:column;min-height:520px;padding:26px 26px 0;border-radius:24px;
  overflow:hidden;isolation:isolate;text-decoration:none!important;color:#fff!important;background:var(--fondo);
  background:radial-gradient(120% 80% at var(--brillo-x) 110%,color-mix(in srgb,var(--brillo) 55%,transparent) 0%,transparent 60%),
             linear-gradient(160deg,color-mix(in srgb,var(--fondo) 86%,#fff) 0%,var(--fondo) 55%);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 34px rgba(10,30,60,.14);transition:transform .2s ease,box-shadow .2s ease}
.cxl-poster:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.08),0 22px 46px rgba(10,30,60,.22)}
.cxl-poster:focus-visible{outline:3px solid #0070c9;outline-offset:4px}
.cxl-poster-cab{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cxl-poster-ico{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--icono);color:#fff;display:flex;
  align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.25)}
.cxl-poster-ico svg{width:30px;height:30px;display:block}
.cxl-poster-ico b{font-size:24px;font-weight:800;line-height:1}
.cxl-poster-antetitulo{font-size:12px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.78)}
.cxl-poster .cxl-poster-nombre{margin:0 0 10px!important;padding:0!important;font-size:34px!important;line-height:1.05!important;font-weight:800!important;
  letter-spacing:-.02em;color:#fff!important;text-wrap:balance}
.cxl-poster-texto{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 16px;
  font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.cxl-poster-frase{display:block;margin:0 0 10px;font-size:19px;line-height:1.3;font-weight:600;color:#fff;text-wrap:balance}
.cxl-poster-texto-corto{-webkit-line-clamp:3;font-size:14.5px;color:rgba(255,255,255,.8)}
.cxl-poster-rotulos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.cxl-poster-rotulos span{font-size:12px;line-height:1.2;font-weight:700;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cxl-poster-arte{position:relative;margin:auto -26px 0;height:200px}
.cxl-poster-marco{position:absolute;left:12%;right:-12%;top:14px;border-radius:12px 12px 0 0;overflow:hidden;background:#0b1220;
  transform:rotate(var(--giro));transform-origin:top left;box-shadow:0 -10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .25s ease}
.cxl-poster-marco img{display:block;width:100%;height:auto}
.cxl-poster:hover .cxl-poster-marco{transform:rotate(var(--giro)) translateY(-6px)}
.cxl-poster-glifo{position:absolute;right:-14%;bottom:-24%;width:300px;height:300px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.16);transform:rotate(var(--giro));transition:transform .3s ease;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--brillo) 60%,transparent))}
.cxl-poster-glifo svg{width:100%;height:100%;display:block}
.cxl-poster-glifo b{font-size:300px;line-height:1;font-weight:800;letter-spacing:-.04em}
.cxl-poster-glifo-agua{right:-70px;bottom:auto;top:-60px;width:260px;height:260px;z-index:-1;color:rgba(255,255,255,.07);filter:none}
.cxl-poster-glifo-agua b{font-size:260px}
.cxl-poster:hover .cxl-poster-arte-logo .cxl-poster-glifo{transform:rotate(var(--giro)) scale(1.04)}
@media (max-width:480px){.cxl-poster{min-height:480px}.cxl-poster .cxl-poster-nombre{font-size:30px!important}}
@media (prefers-reduced-motion:reduce){
  .cxl-poster,.cxl-poster-marco,.cxl-poster-glifo{transition:none}
  .cxl-poster:hover,.cxl-poster:hover .cxl-poster-marco,.cxl-poster:hover .cxl-poster-arte-logo .cxl-poster-glifo{transform:rotate(var(--giro))}
  .cxl-poster:hover{transform:none}}