@charset "utf-8";

/* ==========================================================================
         TECHND CATALOG COMPONENT — ESTILOS DEL COMPONENTE
         --------------------------------------------------------------------------
         PROPÓSITO:
         Define la presentación visual del componente reutilizable de catálogo de
         TechND. El mismo componente puede mostrar contenido en variante "classic"
         o sesiones con fecha en variante "calendar", sin duplicar la estructura
         visual principal de las tarjetas.

         ALCANCE:
         Este archivo controla únicamente la interfaz del catálogo: toolbar,
         filtros, paginación, buscador, grid, tarjetas, estados visuales,
         comportamiento hover/focus y ajustes responsive.

         CONTRATO CON EL HTML Y JAVASCRIPT:
         - El contenedor raíz debe usar .technd-catalog-component.
         - data-variant selecciona el comportamiento visual "classic" o "calendar".
         - data-tabs permite mostrar u ocultar los filtros por categoría.
         - data-buttons permite reservar o eliminar el espacio de acciones.
         - data-pagination es actualizado por JavaScript para indicar si existe
           más de una página de resultados.
         - JavaScript agrega o retira .is-active y controla qué tarjetas se muestran.
         - Las clases technd-catalog-* y technd-calendar-* forman parte del contrato
           interno del componente y no deben renombrarse sin actualizar PHP/HTML/JS.

         CONVIVENCIA CON OITECH Y EL DOMINIO:
         El componente utiliza clases propias para evitar colisiones con las tarjetas
         nativas de Oitech. La clase .sec-title se conserva intencionalmente porque
         permite heredar la tipografía y comportamiento responsive del template;
         aquí solamente se ajusta su separación inferior dentro del componente.

         AISLAMIENTO:
         Ninguna regla nueva debe modificar :root, html, body, selectores universales
         globales ni elementos generales del dominio. Todo estilo propio debe quedar
         encapsulado bajo .technd-catalog-component para impedir que el plugin cambie
         otros módulos de TechND.

         REGLA DE MANTENIMIENTO:
         Cuando se agregue una clase nueva, usar el prefijo technd-catalog- o
         technd-calendar- y mantenerla bajo .technd-catalog-component. Evitar clases
         genéricas del template como .inner-box, .image-box, .date, .content-box,
         .bottom-box o .read-more.
         ========================================================================== */

/* ===================== VARIABLES VISUALES LOCALES =====================
   Centraliza los colores principales utilizados por este componente.
   Las variables se declaran en el wrapper para que sólo existan dentro del
   catálogo y puedan modificarse en un único punto sin afectar el resto del sitio.
   ========================================================================== */

.technd-catalog-component{
    --technd-training-blue:#83a5c6;
    --technd-training-deep:#094987;
    --technd-ink:#0d223d;
    --technd-muted:#5e6873;
    --technd-border:#e3e8ef;
    --technd-bg:transparent;
    --technd-accent:#2d63c8;
}

/* ===================== NORMALIZACIÓN INTERNA Y HERENCIA CONTROLADA =====================
   Aplica box-sizing uniforme a todos los elementos internos para que padding
   y border formen parte del tamaño calculado. Los enlaces heredan el color del
   contexto y los controles de formulario heredan la tipografía de la plantilla.
   .sec-title conserva el estilo Oitech, pero reduce su margen únicamente dentro
   del componente para mantener la separación visual prevista.
   ========================================================================== */

.technd-catalog-component,
.technd-catalog-component *,
.technd-catalog-component *::before,
.technd-catalog-component *::after{box-sizing:border-box}

.technd-catalog-component a{color:inherit;text-decoration:none}
.technd-catalog-component button,
.technd-catalog-component input{font:inherit}
.technd-catalog-component button{cursor:pointer}
.technd-catalog-component .sec-title{margin-bottom:34px}

.technd-catalog-component .sec-title .sub-title{
    color:var(--technd-training-deep);
}








/* ===================== TOOLBAR Y FILTROS POR CATEGORÍA =====================
   La toolbar reúne los filtros de categoría y la paginación superior en una
   misma franja. Los botones .technd-calendar-tab representan filtros, no tabs
   ARIA; JavaScript cambia .is-active y aria-pressed según la categoría elegida.
   El borde inferior crea la línea visual compartida entre filtros y paginación.
   ========================================================================== */

.technd-catalog-component{position:relative;background:var(--technd-bg)}
.technd-catalog-component .technd-calendar-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;border-bottom:1px solid var(--technd-training-blue)}
.technd-catalog-component .technd-calendar-tabs{display:flex;gap:7px;flex-wrap:wrap}
.technd-catalog-component .technd-calendar-tab{min-height:42px;padding:10px 19px;border:1px solid var(--technd-training-blue);border-bottom:0;border-radius:4px 4px 0 0;background:#fff;color:var(--technd-training-deep);font-size:12px;line-height:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.technd-catalog-component .technd-calendar-tab:hover{background:#f0f5fa;border-color:var(--technd-training-blue)}
.technd-catalog-component .technd-calendar-tab.is-active{background:var(--technd-training-deep);border-color:var(--technd-training-deep);color:#fff}

/* ===================== PAGINACIÓN =====================
   Define el contenedor y los botones de navegación creados por JavaScript.
   La clase .is-active identifica visualmente la página actual; el script añade
   también aria-current="page" para exponer el mismo estado a tecnologías
   de asistencia. El mismo estilo se usa arriba y abajo del listado.
   ========================================================================== */

.technd-catalog-component .technd-calendar-pagination{min-height:42px;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-bottom:8px}

.technd-catalog-component .technd-calendar-page-btn{width:34px;height:34px;border:1px solid var(--technd-training-blue);border-radius:3px;background:#fff;color:var(--technd-training-deep);font-size:12px;font-weight:700}
.technd-catalog-component .technd-calendar-page-btn:hover{background:#eef4fa}
.technd-catalog-component .technd-calendar-page-btn.is-active{background:var(--technd-training-deep);border-color:var(--technd-training-deep);color:#fff}

/* ===================== BUSCADOR Y CONTADOR DE RESULTADOS =====================
   Presenta el campo de búsqueda que JavaScript utiliza para filtrar las tarjetas
   ya cargadas en el DOM. El estado focus conserva un indicador visible alrededor
   del input. .technd-calendar-meta contiene el contador de resultados y mantiene
   separada la información del buscador respecto del grid.
   ========================================================================== */

.technd-catalog-component .technd-calendar-search-wrap{margin-bottom:22px}
.technd-catalog-component .technd-calendar-search{width:100%;height:62px;padding:0 22px;border:1px solid var(--technd-training-blue);border-radius:5px;background:#fff;color:#26384e;outline:0;font-size:15px;font-weight:600;box-shadow:none}
.technd-catalog-component .technd-calendar-search:hover,.technd-catalog-component .technd-calendar-search:focus{border-color:var(--technd-training-blue);box-shadow:0 0 0 3px rgba(131,165,198,.14)}
.technd-catalog-component .technd-calendar-meta{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;color:var(--technd-muted);/*color:#738092;*/font-size:12px}

/* ===================== GRID Y NÚMERO DE COLUMNAS =====================
   Organiza las tarjetas visibles mediante CSS Grid. Las clases modificadoras
   --2 y --3 son asignadas desde PHP según la configuración del componente.
   Estas columnas son la disposición de escritorio; los media queries posteriores
   reducen el grid a dos o una columna cuando disminuye el ancho disponible.
   ========================================================================== */

.technd-catalog-component .technd-calendar-grid{display:grid;gap:26px 24px;align-items:start}
.technd-catalog-component .technd-calendar-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.technd-catalog-component .technd-calendar-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ===================== TARJETA — ESTRUCTURA BASE =====================
   Define el contenedor estable de cada resultado y su caja interior.
   La altura fija en escritorio evita que una tarjeta cambie el alto del grid
   cuando aparece la descripción durante hover/focus. isolation:isolate crea
   un contexto de apilamiento propio para que los z-index internos no interfieran
   con encabezados sticky u otros elementos de la plantilla.
   ========================================================================== */
.technd-catalog-component .technd-catalog-card{
    position:relative;
    min-width:0;
    height:472px;
    display:flex;
    --technd-training-blue:#83a5c6;
    --technd-training-deep:#094987;
    z-index:0;
    isolation:isolate;
}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    margin:6px 5px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e3e8ef;
    border-radius:0 0 12px 12px;
    overflow:visible;
    box-shadow:none;
}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__inner::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-6px;
    right:-5px;
    bottom:-6px;
    left:-5px;
    border:1px solid var(--technd-training-blue);
    border-radius:6px 6px 12px 12px;
    pointer-events:none;
}
/* ===================== TARJETA — IMAGEN, ENLACES Y EFECTO HOVER =====================
   Controla la zona visual superior de la tarjeta. En escritorio la imagen reduce
   su altura durante hover/focus para liberar espacio al contenido descriptivo,
   mientras la fotografía aplica un zoom ligero. Los enlaces superpuestos
   mantienen clicable la zona de imagen sin reutilizar clases nativas de Oitech.
   ========================================================================== */

.technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box{
    position:relative;
    flex:0 0 238px;
    height:238px;
    overflow:hidden;
    border-radius:0;
    transition:flex-basis .28s ease,height .28s ease;
}
.technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__image-box,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__image-box{flex-basis:188px;height:188px}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box .technd-catalog-card__image{position:relative;width:100%;height:100%;overflow:hidden;margin:0;background:#0d223d}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box .technd-catalog-card__image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(5,13,24,.46) 0%,rgba(5,13,24,.13) 45%,rgba(5,13,24,.38) 100%);
    pointer-events:none;
}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box .technd-catalog-card__image img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .28s ease}
.technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__image-box .technd-catalog-card__image img,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__image-box .technd-catalog-card__image img{transform:scale(1.045)}
.technd-catalog-component .technd-catalog-card__full-image-link{position:absolute;z-index:9;inset:0;display:block;background:transparent}
.technd-catalog-component .technd-catalog-card__media-link{display:block;width:100%;height:100%}

/* ===================== TARJETA — IDENTIDAD, TÍTULO, TIPO Y FECHA =====================
   Coloca sobre la imagen la identificación del contenido: marca, título visual,
   etiqueta de tipo y, cuando corresponde a Calendar, bloque de día/mes.
   Los z-index mantienen cada elemento por encima del degradado. La etiqueta de
   tipo se desplaza en hover/focus para dejar libre la esquina donde aparece el
   indicador visual de enlace.
   ========================================================================== */

.technd-catalog-component .technd-catalog-card__brand{position:absolute;z-index:3;left:22px;top:18px;color:#fff;font-size:13px;line-height:1;font-weight:700;letter-spacing:.035em;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.technd-catalog-component .technd-catalog-card__image-title{position:absolute;z-index:3;left:22px;right:105px;top:47px;max-width:82%;color:#fff;font-family:var(--title-font,Arial,Helvetica,sans-serif);font-size:18px;line-height:1.18;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.55);transform:scale(1);transform-origin:left top;transition:transform .28s ease;}
.technd-catalog-component .technd-catalog-card__type{position:absolute;z-index:10;right:15px;top:15px;display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:999px;background:var(--technd-training-deep);color:#fff;font-size:10px;line-height:1;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 9px rgba(255,255,255,.38);transition:right .22s ease}
.technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__type,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__type{right:68px}

.technd-catalog-component .technd-catalog-card .technd-catalog-card__date{position:absolute;z-index:11;left:16px;bottom:15px;width:68px;overflow:hidden;background:var(--technd-training-deep);border-radius:7px;text-align:center;box-shadow:0 7px 20px rgba(0,0,0,.22)}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__date>a{display:block}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__date b{display:block;padding:8px 5px 5px;background:#fff;color:var(--technd-training-deep);font-size:25px;line-height:27px;font-weight:700}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__date span{display:block;padding:6px 5px;background:var(--technd-training-deep);color:#fff;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em}

/* ===================== TARJETA — CONTENIDO QUE APARECE EN HOVER =====================
   Este bloque ocupa el espacio disponible debajo de la imagen y contiene
   modalidad, horario, título y descripción. Al hacer hover/focus la imagen
   reduce su altura y libera espacio dentro de la misma tarjeta; la descripción
   utiliza ese espacio sin aumentar el alto exterior, por lo que las tarjetas
   vecinas y la paginación permanecen en la misma posición.
   ========================================================================== */
.technd-catalog-component .technd-catalog-card__moving-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:0 0 12px 12px}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__content{flex:1 1 auto;min-height:0;padding:20px 24px 18px;border:0;overflow:hidden}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__meta-list{margin:0 0 8px;padding:0;list-style:none}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__meta-list li{color:#5e6873;font-size:13px;font-weight:600}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__meta-list li::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#83a5c6;vertical-align:1px}
.technd-catalog-component .technd-catalog-card__time{display:flex;align-items:center;gap:7px;margin-top:8px;color:#5e6873;font-size:13px;line-height:1.4;font-weight:600}
.technd-catalog-component .technd-catalog-card__time-icon{color:var(--technd-training-deep);font-size:15px;line-height:1}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__title{min-height:52px;margin:10px 0 0;color:#0d223d;font-size:18px;line-height:1.28;font-weight:700}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__title a:hover{color:var(--technd-training-deep)}
.technd-catalog-component .technd-catalog-card__description{max-height:0;margin:0;overflow:hidden;opacity:0;transform:translateY(8px);color:#49586a;font-size:13px;line-height:1.45;font-weight:700;transition:max-height .28s ease,opacity .2s ease,transform .28s ease,margin-top .28s ease}
.technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__description,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__description{max-height:72px;margin-top:12px;opacity:1;transform:translateY(0)}

/* ===================== TARJETA — ACCIONES DE CALENDAR =====================
   Define el pie de acciones utilizado por las tarjetas con botones habilitados.
   El enlace principal abre el detalle de la sesión y el secundario se integra
   con el flujo de registro. En la variante classic PHP no genera estas acciones
   y data-buttons="false" evita reservar espacio visual para ellas.
   ========================================================================== */

.technd-catalog-component .technd-catalog-card .technd-catalog-card__actions{flex:0 0 64px;min-height:64px;padding:10px 18px;gap:12px;display:flex;align-items:center;background:#f4f5f8;border-top:1px solid #edf1f5;border-radius:0 0 12px 12px}
.technd-catalog-component .technd-catalog-card__primary{flex:0 0 auto;padding:9px 13px;border-radius:3px;background:var(--technd-training-deep);color:#fff;font-size:10px;line-height:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.technd-catalog-component .technd-catalog-card__primary:hover{background:#13344e;color:#fff}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__actions .technd-catalog-card__secondary{margin-left:auto;flex:1 1 135px;min-width:0;display:inline-flex;align-items:center;justify-content:center;color:var(--technd-training-deep);font-size:14px;line-height:1.2;font-weight:700;text-align:center}
.technd-catalog-component .technd-catalog-card .technd-catalog-card__actions .technd-catalog-card__secondary:hover{color:#13344e}

/* ===================== TARJETA — INDICADOR VISUAL DE ENLACE =====================
   Crea el pequeño indicador que aparece en la esquina superior derecha durante
   hover/focus. El icono se dibuja con un SVG embebido para no depender de una
   imagen externa. pointer-events:none evita que este elemento decorativo capture
   clics; la navegación real sigue perteneciendo a los enlaces de la tarjeta.
   ========================================================================== */

.technd-catalog-component .technd-catalog-card__outer-link-clip{position:absolute;z-index:20;top:0;right:0;width:58px;height:54px;display:block;overflow:hidden;pointer-events:none;border-radius:0 6px 0 18px}
.technd-catalog-component .technd-catalog-card__outer-link-area{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:0 6px 0 18px;background:#83a5c6;color:#fff;transform:translate(100%,-100%);transition:transform .22s ease}
.technd-catalog-component .technd-catalog-card__outer-link-area::before{
    content:"";display:block;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:22px 22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20l1.15-1.15'/%3E%3C/svg%3E");
}
.technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__outer-link-area,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__outer-link-area{transform:translate(-1px,1px)}

/* ===================== BÚSQUEDA INTERNA, ESTADO VACÍO Y ELEMENTOS AUXILIARES =====================
   Agrupa elementos de soporte que participan en el funcionamiento del catálogo
   pero no forman parte permanente de la presentación principal.

   .technd-catalog-card__hidden-search:
   Mantiene disponible en el DOM una representación textual auxiliar de los términos
   de búsqueda preparados por PHP. La búsqueda principal utiliza el atributo
   data-search de cada tarjeta; este elemento se conserva como soporte textual interno
   y permanece visualmente oculto para no modificar la presentación ni el layout.

   .technd-calendar-empty:
   Es el mensaje de "sin resultados". Permanece oculto normalmente y JavaScript
   lo muestra cuando la búsqueda o el filtro seleccionado no encuentran tarjetas.

   .technd-calendar-pagination-bottom:
   Añade separación antes de la paginación inferior para que no quede pegada al grid.

   .technd-calendar-footnote:
   Reserva el estilo para una nota informativa inferior del componente cuando sea
   necesaria, manteniendo tipografía y separación coherentes con el catálogo.
   ========================================================================== */

.technd-catalog-component .technd-catalog-card__hidden-search{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.technd-catalog-component .technd-calendar-empty{display:none;padding:70px 20px;text-align:center;color:#708095;font-size:18px}
.technd-catalog-component .technd-calendar-pagination-bottom{margin-top:22px}
.technd-catalog-component .technd-calendar-footnote{margin-top:34px;padding-top:17px;border-top:1px solid #dde5ed;color:#7a8795;font-size:11px;line-height:1.5}



/* ===================== PROTECCIÓN FRENTE A ESTILOS NATIVOS DE OITECH =====================
   Neutraliza transformaciones, márgenes y pseudo-elementos que podrían llegar
   desde reglas heredadas o selectores amplios de la plantilla. La tarjeta ya
   no utiliza las clases nativas .news-block, .inner-box, .image-box, .date,
   .content-box, .bottom-box ni .read-more; estas reglas funcionan como una
   segunda barrera para conservar el aspecto propio del componente.
   ========================================================================== */
.technd-catalog-component .technd-catalog-card,
.technd-catalog-component .technd-catalog-card__inner,
.technd-catalog-component .technd-catalog-card__image-box,
.technd-catalog-component .technd-catalog-card__image,
.technd-catalog-component .technd-catalog-card__content,
.technd-catalog-component .technd-catalog-card__actions{
    transform:none;
}

.technd-catalog-component .technd-catalog-card:hover,
.technd-catalog-component .technd-catalog-card:focus-within,
.technd-catalog-component .technd-catalog-card__inner:hover{
    transform:none;
}

.technd-catalog-component .technd-catalog-card__image{
    margin:0;
}

.technd-catalog-component .technd-catalog-card__actions::before,
.technd-catalog-component .technd-catalog-card__actions::after,
.technd-catalog-component .technd-catalog-card__content::before,
.technd-catalog-component .technd-catalog-card__content::after{
    content:none;
    display:none;
}

/* ===================== RESPONSIVE — TABLET Y ANCHOS INTERMEDIOS =====================
   Ajusta la estructura antes de llegar al modo móvil. A 1100px tanto el layout
   de 2 como el de 3 columnas se muestran en dos columnas. A 900px la toolbar
   apila filtros y paginación para evitar compresión horizontal. A 760px el grid
   pasa finalmente a una sola columna.
   ========================================================================== */

@media (max-width:1100px){
    .technd-catalog-component .technd-calendar-grid--2,.technd-catalog-component .technd-calendar-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
    .technd-catalog-component .technd-calendar-toolbar{align-items:stretch;flex-direction:column;border-bottom:0}
    .technd-catalog-component .technd-calendar-tabs{border-bottom:1px solid var(--technd-training-blue)}
    .technd-catalog-component .technd-calendar-pagination{padding-bottom:0}
}
@media (max-width:760px){
    .technd-catalog-component .technd-calendar-grid--2,.technd-catalog-component .technd-calendar-grid--3{grid-template-columns:1fr}
}
/* ===================== RESPONSIVE — MÓVIL =====================
   En móvil se elimina la altura fija de las tarjetas y la imagen adopta relación
   16:9 para permitir que el contenido crezca de forma natural. La descripción
   deja de depender de hover y permanece visible, ya que los dispositivos táctiles
   no ofrecen el mismo comportamiento de puntero. Las acciones se apilan para
   conservar botones legibles y fáciles de tocar.
   ========================================================================== */

@media (max-width:575.98px){
    .technd-catalog-component .technd-calendar-tab{flex:1 1 auto;min-width:110px;text-align:center}
    .technd-catalog-component .technd-catalog-card{height:auto}
    .technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box{height:auto;flex-basis:auto}
    .technd-catalog-component .technd-catalog-card .technd-catalog-card__image-box .technd-catalog-card__image{aspect-ratio:16/9;height:auto}
    .technd-catalog-component .technd-catalog-card:hover .technd-catalog-card__image-box,.technd-catalog-component .technd-catalog-card:focus-within .technd-catalog-card__image-box{height:auto;flex-basis:auto}
    .technd-catalog-component .technd-catalog-card__description{max-height:none;margin-top:12px;opacity:1;transform:none}
    .technd-catalog-component .technd-catalog-card .technd-catalog-card__actions{align-items:flex-start;flex-direction:column;height:auto;flex-basis:auto;padding:14px 18px}
    .technd-catalog-component .technd-catalog-card__primary{width:100%;text-align:center}
    .technd-catalog-component .technd-catalog-card .technd-catalog-card__actions .technd-catalog-card__secondary{margin-left:0;width:100%;justify-content:flex-start}
}

/* ===================== DESKTOP — CONFIGURACIÓN DE 2 COLUMNAS =====================
   Cuando el componente se configura con dos columnas en pantallas amplias, cada
   tarjeta dispone de mayor ancho. Este bloque aumenta su altura inicial, amplía
   la imagen y ajusta títulos para aprovechar ese espacio sin alterar el diseño
   de la configuración estándar de tres columnas.
   ========================================================================== */

@media (min-width:1101px){
    .technd-catalog-component .technd-calendar-grid--2{column-gap:30px}
    .technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card{height:505px}
    .technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card .technd-catalog-card__image-box{flex-basis:306px;height:306px}
    .technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card:hover .technd-catalog-card__image-box,.technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card:focus-within .technd-catalog-card__image-box{flex-basis:238px;height:238px}
    .technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card__image-title{font-size:22px}
    .technd-catalog-component .technd-calendar-grid--2 .technd-catalog-card .technd-catalog-card__title{font-size:20px}
}


/* ===================== CONFIGURACIÓN MEDIANTE ATRIBUTOS DATA-* =====================
   Permite que el mismo HTML/CSS se adapte a la configuración enviada por PHP.
   data-tabs controla la presencia de filtros, data-pagination permite ocultar
   una toolbar que ya no tiene contenido útil y data-buttons elimina las acciones
   cuando la variante no las necesita. No son preferencias del usuario final:
   forman parte de la configuración interna del componente.
   ========================================================================== */
.technd-catalog-component[data-tabs="false"] .technd-calendar-tabs{display:none}
.technd-catalog-component[data-tabs="false"] .technd-calendar-toolbar{justify-content:flex-end}
.technd-catalog-component[data-tabs="false"][data-pagination="false"] .technd-calendar-toolbar{display:none}

.technd-catalog-component[data-buttons="false"] .technd-catalog-card__actions{display:none}

/* ===================== VARIANTE CLASSIC =====================
   Adapta la misma tarjeta para páginas permanentes del catálogo. Se ocultan los
   elementos exclusivos de una sesión fechada —marca contextual, fecha, modalidad
   y horario— y el título de imagen se centra verticalmente. En hover/focus el
   contenido se desplaza hacia arriba y la descripción gana espacio dentro de la
   tarjeta, manteniendo el comportamiento general del componente.
   ========================================================================== */

.technd-catalog-component[data-variant="classic"] .technd-catalog-card__brand,
.technd-catalog-component[data-variant="classic"] .technd-catalog-card__date,
.technd-catalog-component[data-variant="classic"] .technd-catalog-card__meta-list,
.technd-catalog-component[data-variant="classic"] .technd-catalog-card__time{display:none}

.technd-catalog-component[data-variant="classic"] .technd-catalog-card__image-title{top:50%;font-size:22px;line-height:1.16;transform:translateY(-50%) scale(1);transform-origin:left center}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card .technd-catalog-card__title{font-size:21px;line-height:1.25}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card .technd-catalog-card__content{display:flex;flex-direction:column}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:not(:hover):not(:focus-within) .technd-catalog-card__content{justify-content:center}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:not(:hover):not(:focus-within) .technd-catalog-card__title{margin:0}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:hover .technd-catalog-card__content,
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:focus-within .technd-catalog-card__content{justify-content:flex-start}
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:hover .technd-catalog-card__image-title,
.technd-catalog-component[data-variant="classic"] .technd-catalog-card:focus-within .technd-catalog-card__image-title{transform:translateY(-50%) scale(.82)}

/* ===================== VARIANTE CALENDAR =====================
   Mantiene visibles los datos propios de la ocurrencia —fecha, modalidad y hora—
   y reduce ligeramente el título superpuesto durante hover/focus. La escala menor
   evita que el texto compita con la etiqueta de tipo y el indicador de enlace
   cuando la imagen disminuye de altura.
   ========================================================================== */

.technd-catalog-component[data-variant="calendar"] .technd-catalog-card:hover .technd-catalog-card__image-title,
.technd-catalog-component[data-variant="calendar"] .technd-catalog-card:focus-within .technd-catalog-card__image-title{transform:scale(.91)}

/* ===================== ALTURA CUANDO NO EXISTEN ACCIONES =====================
   Cuando data-buttons="false" no existe el pie de acciones, por lo que la tarjeta
   reduce su altura para no conservar un espacio vacío. La segunda regla aplica la
   misma compensación al layout de dos columnas en escritorio, cuya tarjeta base es
   más alta que la configuración estándar.
   ========================================================================== */

@media(min-width:576px){
    .technd-catalog-component[data-buttons="false"] .technd-catalog-card{height:408px}
}

@media(min-width:1101px){
    .technd-catalog-component[data-buttons="false"] .technd-calendar-grid--2 .technd-catalog-card{height:441px}
}