/* ══════════════════════════════════════════════════════════════════════
   Homepage (post 111) — SCOPEADO exclusivamente a esta página.
   Reduce el padding-top del carrusel de marcas (post 5325, clase
   .oz-marcas-compact vía advanced.preset_class del propio preset del
   plugin OZ-Sliders). Sin este ajuste, la variante nativa del plugin para
   carruseles SIN header (".ozs:not(.ozs--banner):not(.ozs--has-header)")
   reserva ~60px de padding-top pensado para un carril de flechas con
   título encima — este carrusel nunca tuvo título (confirmado en el
   legacy), por lo que ese espacio queda vacío y las flechas (posicionadas
   por JS en base a ese mismo padding, --ozs-nav-top) quedan flotando muy
   arriba de los logos.
   No se toca oz-sliders.css (compartido) ni el cálculo JS de
   --ozs-nav-top: al reducir el padding-top aquí, el propio JS existente
   recalcula la posición de las flechas centradas al nuevo alto, sin
   ningún override manual de posición.
   ══════════════════════════════════════════════════════════════════════ */
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) {
	/* !important requerido: la regla original en oz-sliders.css usa
	   !important, así que sin esta misma prioridad la especificidad
	   mayor de este selector no alcanza para ganar la cascada. */
	padding-top: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Flechas en extremos (patrón replicado de .ozs--nav-outside nativo del
   plugin, NO activado globalmente — ese ajuste es un option compartido
   por TODO el sitio vía oz_sliders_settings.nav_position, sin override
   por preset). Aquí se reproduce el mismo CSS scopeado únicamente a
   .oz-marcas-compact:
     - reserva lateral ≈ tamaño real del botón + margen (mismo criterio
       que .ozs--nav-outside: nav-size + 12px, aquí con el tamaño
       renderizado real del botón, ya que --oz-nav-size real es 36px
       pero el ancho pintado del botón es 44/38/34px por breakpoint,
       fijado con !important en la regla "unificada" global);
     - cada botón vuelve a position:absolute anclado a su extremo,
       contrarrestando .ozs:not(...):not(.ozs--has-header) > .ozs__nav
       .ozs__nav-btn { position:relative; left/right:auto !important }
       con la misma prioridad (!important) y mayor especificidad
       (.oz-marcas-compact agrega una clase extra al selector).
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper: pasa de "ancho automático, ancla arriba-derecha" a "ancho
   completo del viewport, cada botón se ubica por su cuenta en left/right" */
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) > .ozs__nav {
	top: 50% !important;
	right: 0 !important;
	left: 0 !important;
	width: 100% !important;
	transform: translateY(-50%) !important;
	justify-content: space-between !important;
	align-items: center !important;
}

/* Reserva lateral en el carrusel para que el track de logos no quede
   debajo de las flechas (mismo criterio que .ozs--nav-outside nativo) */
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) {
	padding-left: 50px !important;
	padding-right: 50px !important;
}

/* Cada botón vuelve a position:absolute anclado a su extremo, venciendo
   el position:relative + left/right:auto !important heredado del modo
   sin-header (misma especificidad de selector + !important) */
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) > .ozs__nav .ozs__nav-btn {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) > .ozs__nav .ozs__nav-btn--prev {
	left: 6px !important;
	right: auto !important;
}
.oz-marcas-compact.ozs:not(.ozs--banner):not(.ozs--has-header) > .ozs__nav .ozs__nav-btn--next {
	right: 6px !important;
	left: auto !important;
}

/* Sin escalonado por breakpoint: se confirmó en Chrome (1366/1024/768/
   480/320) que el tamaño real del botón es SIEMPRE 44px. oz-sliders.css
   tiene dos sistemas de tamaño en pugna — uno antiguo con media queries
   (42→38→34px) y uno "unificado" posterior sin media query que fija
   44px !important de forma incondicional
   (html body .ozs:not(.ozs--banner) .ozs__nav-btn{width:44px!important}),
   con mayor especificidad que el sistema antiguo — el unificado gana
   siempre y el botón nunca se achica. La reserva lateral de 50px (44px
   botón + 6px de aire hacia el borde) es correcta en los 5 anchos, no
   solo en desktop; escalonarla a 44/40px (como se había planteado antes
   de confirmar esto en Chrome) dejaba menos espacio del necesario y
   producía overlap de 6-10px con el segundo logo visible. El carrusel
   tampoco entra en modo stacked/static en ningún ancho probado
   (data-stack-mobile y data-hide-nav-mobile permanecen "false" en los
   5), así que no hay ningún breakpoint donde deba retirarse la reserva. */

/* ═══════════════════════════════════════════════════════════════════
   Presentación de las flechas — chevron fucsia simple, sin fondo/botón/
   círculo/borde/sombra (solo apariencia; posición, padding y reserva
   lateral de arriba quedan intactos, tal como se pidió).
   No se reutiliza el botón sólido verde/fucsia global de OZ-Sliders:
   se sobrescribe el propio contenedor .ozs__nav-btn a transparente y
   se reemplaza el ícono (antes un ::before con background-image SVG de
   trazo negro fijo #01111a, confirmado inspeccionando el CSS servido)
   por un chevron SVG propio ya coloreado en fucsia #ff0047 — más fiable
   que aplicar filter/hue-rotate sobre el SVG negro original, que no da
   un fucsia exacto. El área clickeable del <button> (44px, position,
   left/right ya fijados arriba) se conserva sin cambios; solo cambia su
   apariencia visual.
   Especificidad: igual criterio que antes — .oz-marcas-compact.ozs +
   .ozs__nav-btn--prev/--next = (0,4,2), por encima de la regla global
   "unificada" html body .ozs:not(.ozs--banner) .ozs__nav-btn = (0,3,2). */
html body .oz-marcas-compact.ozs .ozs__nav-btn--prev,
html body .oz-marcas-compact.ozs .ozs__nav-btn--next {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: 40px !important;
	height: 40px !important;
}
html body .oz-marcas-compact.ozs .ozs__nav-btn--prev:hover,
html body .oz-marcas-compact.ozs .ozs__nav-btn--prev:focus-visible,
html body .oz-marcas-compact.ozs .ozs__nav-btn--next:hover,
html body .oz-marcas-compact.ozs .ozs__nav-btn--next:focus-visible {
	background: transparent !important;
	opacity: 0.7;
}

/* Chevron simple (‹ / ›), trazo medio, fucsia #ff0047 — reemplaza el
   ícono SVG nativo (antes negro, vía filter en un intento previo; ahora
   un SVG propio ya coloreado, sin depender de filter). Sin la reducción
   de tamaño ni el fondo/box-shadow del ::before nativo. */
html body .oz-marcas-compact.ozs .ozs__nav-btn--prev::before,
html body .oz-marcas-compact.ozs .ozs__nav-btn--next::before {
	content: '' !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 auto !important;
	border: none !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 24px 24px !important;
	filter: none !important;
	transform: none !important;
}
html body .oz-marcas-compact.ozs .ozs__nav-btn--prev::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%23ff0047' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html body .oz-marcas-compact.ozs .ozs__nav-btn--next::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23ff0047' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Academia Virtual (banda oscura, columna izquierda) — clase única
   confirmada en el HTML real: oz-pb-comp-text-p111-sh1jiqlx.
   El markup es un único <p><strong>...!</strong> texto... <a>ACCEDER</a></p>
   corrido, sin saltos de línea reales entre el "!Conviértete...!", el
   párrafo descriptivo y el link — por eso hoy se ve todo pegado con
   "ACCEDER" como texto subrayado inline. La referencia pide 3 líneas
   separadas (frase destacada / párrafo / botón en su propia línea) sin
   tocar el HTML: se logra con display:block en <strong> y en el <a>
   (ambos inline por defecto dentro del <p>), más el <a> convertido en
   botón real (outline, padding, radio) en vez de link de texto. */
body.home .oz-pb-comp-text-p111-sh1jiqlx h2 {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 14px;
}
body.home .oz-pb-comp-text-p111-sh1jiqlx p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}
body.home .oz-pb-comp-text-p111-sh1jiqlx p strong {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
}
body.home .oz-pb-comp-text-p111-sh1jiqlx p a {
	display: table;
	margin-top: 22px;
	padding: 12px 28px;
	border: 1px solid #ffffff;
	border-radius: 100px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}
body.home .oz-pb-comp-text-p111-sh1jiqlx p a:hover {
	background: #ffffff;
	color: #17181c;
}

/* ═══════════════════════════════════════════════════════════════════
   Academia Virtual — bordes redondeados en la banda completa (fondo
   oscuro + imagen).
   Corrección del diagnóstico inicial: el maquetador SÍ tiene un
   mecanismo nativo que consume --oz-pb-border-radius-desktop (inyectado
   en <style id="oz-pb-spacing-runtime">: "html body .oz-pb-root
   .oz-pb-spacing-scope{border-radius:var(--oz-pb-border-radius-desktop)}"
   con su propia cascada por breakpoint) — no es un campo muerto como se
   pensó al principio. El radio SÍ se aplicaba desde siempre a la propia
   <section class="oz-pb-spacing-scope oz-pb-r-3">. El problema real es
   que esa <section> es TRANSPARENTE y más ancha que el contenido visual
   (el fondo oscuro + imagen viven en su hijo .oz-pb-inner, con
   max-width:1200px centrado en desktop) — el radio estaba ahí pero sin
   overflow:hidden en el elemento que realmente pinta el fondo, no
   recortaba nada visible. Se agrega overflow:hidden + el mismo radio en
   .oz-pb-inner (redundante con el radio ya aplicado en el <section>
   padre, pero es lo que faltaba para que se note).
   Segundo hallazgo: en breakpoints ≤768px .oz-pb-inner pasa a ocupar el
   100% del ancho de pantalla (edge-to-edge, sin --oz-pb-margin-left/right
   configurado ahí) — el radio se sigue aplicando pero las esquinas
   quedan pegadas al borde de la ventana, indistinguibles de esquinas
   rectas. Se agrega un margen lateral scopeado en esos anchos para que
   el radio sea visible también ahí, sin tocar el layout edge-to-edge
   del resto de secciones del sitio (oz-pb-r-3 es único en esta página). */
.oz-pb-r-3,
.oz-pb-r-3 > .oz-pb-inner {
	border-radius: 12px;
	overflow: hidden;
}
@media (max-width: 1024px) {
	.oz-pb-r-3 > .oz-pb-inner {
		margin-left: 16px;
		margin-right: 16px;
		width: calc(100% - 32px);
	}
}
@media (max-width: 480px) {
	.oz-pb-r-3 > .oz-pb-inner {
		margin-left: 12px;
		margin-right: 12px;
		width: calc(100% - 24px);
	}
}

/* ═══════════════════════════════════════════════════════════════════
   TEMAS DE INTERÉS — encabezado (título + link "Ver más Publicaciones").
   Bloque de texto propio del maquetador (no del plugin OZ-Sliders),
   clase única confirmada en el HTML real: oz-pb-comp-text-p111-r4-b0
   (id generado por el propio maquetador para este bloque específico de
   esta página — no requiere body.home para aislarlo de Video Tutoriales,
   ya es único, pero se mantiene el prefijo por consistencia con el
   resto de este archivo).
   Layout pedido: título a la izquierda, botón "chip" con ícono a la
   derecha, ambos en la misma fila, con una línea divisoria completa
   debajo de toda la fila. El markup real es <div class="oz-pb-text">
   <h2>...</h2><p><a>...</a></p></div> — h2 y p son hermanos directos,
   así que .oz-pb-text pasa a flex con justify-content:space-between
   para ponerlos en fila sin tocar el HTML. */
body.home .oz-pb-comp-text-p111-r4-b0 .oz-pb-text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4e3df;
}
body.home .oz-pb-comp-text-p111-r4-b0 h2 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #17181c;
	margin: 0;
}
body.home .oz-pb-comp-text-p111-r4-b0 p {
	margin: 0;
}
body.home .oz-pb-comp-text-p111-r4-b0 p a {
	font-size: 14px;
	font-weight: 600;
	color: #17181c;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid #e4e3df;
	border-radius: 100px;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.home .oz-pb-comp-text-p111-r4-b0 p a:hover {
	border-color: #ff0047;
	box-shadow: 0 2px 8px rgba(255, 0, 71, 0.12);
}
body.home .oz-pb-comp-text-p111-r4-b0 p a::before {
	content: '%';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ff0047;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TEMAS DE INTERÉS — rediseño de tarjetas (shortcode [academia-virtual],
   slider_type "blog", clase fija .oz-academia-virtual que el propio
   shortcode ya agrega vía $extra_classes en render_slider() — no hace
   falta ningún preset_class nuevo). Scopeado con body.home además de
   .oz-academia-virtual porque el shortcode es compartido con Video
   Tutoriales (post 1385): sin el prefijo body.home, estas reglas
   también pintarían esa página. body.home viene de body_class() de
   WordPress (confirmado presente en el <body> real de esta Homepage).
   Ninguna regla nativa tocada aquí usa !important ni "html body", así
   que no hace falta igualar esa especificidad — un selector de 2 clases
   (body.home + .oz-academia-virtual) alcanza sin necesidad de reforzar. */

/* Aire arriba/abajo del bloque completo: sin esto, el carrusel queda
   pegado al texto de arriba ("Ver más Publicaciones") y los dots quedan
   cortados casi al ras del borde inferior — se ve como si la sección
   estuviera incompleta. Los dots ya traen su propio margin-top:12px
   nativo (.ozs__dots), pero nada reserva espacio por debajo de ellos.
   !important requerido: oz-sliders.css trae "body .ozs{margin:0
   !important;padding:0 !important}" (bloque "sin margen/padding en el
   contenedor raíz, de eso se encarga el maquetador padre") — mi selector
   ya tenía mayor especificidad (2 clases vs 1 clase+1 elemento) pero sin
   !important seguía perdiendo contra esa regla, igual que pasó antes con
   el padding-top del carrusel de marcas. */
body.home .oz-academia-virtual {
	margin-top: 28px !important;
	padding-bottom: 24px !important;
}

/* El viewport del carrusel (.ozs__viewport) tiene overflow:hidden nativo
   (necesario para el scroll horizontal, no se puede quitar) pegado
   directamente al borde de cada tarjeta. Como las tarjetas ahora tienen
   sombra propia y se elevan 3px en :hover (translateY), sin este
   "colchón" interno la sombra se corta abajo en reposo y la tarjeta se
   corta arriba al elevarse en hover — el padding queda dentro del propio
   overflow:hidden, así que no cambia el layout visible del carrusel,
   solo le da aire a esos dos efectos. */
body.home .oz-academia-virtual .ozs__viewport {
	padding-top: 6px !important;
	padding-bottom: 10px !important;
}

/* Contenedor de cada tarjeta: fondo propio, radio, sombra y borde sutil,
   sustituyendo el card plano original (sin fondo/sombra propios). */
body.home .oz-academia-virtual .oz-blog-card__link,
body.home .oz-academia-virtual .ozs-blog__link {
	background: #ffffff;
	border: 1px solid #e4e3df;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
}
body.home .oz-academia-virtual .oz-blog-card__link:hover,
body.home .oz-academia-virtual .ozs-blog__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.1);
}

/* Misma altura entre tarjetas: el plugin ya tiene un mecanismo nativo
   para esto (clase .ozs--equal-height → .ozs__track{align-items:stretch}
   + .ozs__slide{display:flex} + .ozs__slide>*{height:100%}), pero solo
   se activa si el shortcode pasa options['equal_height']=true, y
   academia-virtual.php no lo hace (confirmado). En vez de tocar ese PHP
   compartido con Video Tutoriales, se replica el mismo patrón acá,
   scopeado — mismas 3 reglas, mismo efecto. */
body.home .oz-academia-virtual .ozs__track {
	align-items: stretch;
}
body.home .oz-academia-virtual .ozs__slide {
	display: flex;
}
body.home .oz-academia-virtual .ozs__slide > * {
	height: 100%;
	width: 100%;
}
body.home .oz-academia-virtual .oz-blog-card__body,
body.home .oz-academia-virtual .ozs-blog__body {
	flex: 1;
}

/* Imagen: proporción fija 16/10 (evita que cada tarjeta tenga una altura
   de imagen distinta según el thumbnail que traiga cada post — hoy sin
   ratio fijo, aspect-ratio cae a "auto" y depende del tamaño real de
   cada imagen). No es el causante de las franjas negras reportadas: esas
   vienen del propio placeholder que sirve YouTube para videos no
   disponibles (contenido roto, no corregible con CSS) — igual se fija un
   ratio consistente porque hace que el resto de las tarjetas se vea
   parejo, que era parte del problema visual general. */
body.home .oz-academia-virtual .oz-blog-card__media,
body.home .oz-academia-virtual .ozs-blog__media,
body.home .oz-academia-virtual .ozs__media,
body.home .oz-academia-virtual .oz-slide__media,
body.home .oz-academia-virtual .oz-academia-card__media {
	aspect-ratio: 16 / 10;
	background: #e4e3df;
}

/* Cuerpo: mismo padding/gap que el mockup aprobado */
body.home .oz-academia-virtual .oz-blog-card__body,
body.home .oz-academia-virtual .ozs-blog__body {
	padding: 18px 20px 20px;
	gap: 10px;
}
/* Título: antes 16px/inherit (heredaba el mismo gris apagado del cuerpo
   del tema en vez de un negro propio, sin tope de líneas — títulos largos
   empujaban la tarjeta más que las demás). Ahora peso/tamaño mayor, color
   fijo oscuro, tope de 2 líneas con elipsis para que la diferencia de
   longitud entre títulos no sea la causa principal de alturas dispares
   (el align-items:stretch de arriba ya iguala el resto). */
body.home .oz-academia-virtual .oz-blog-card__title,
body.home .oz-academia-virtual .ozs-blog__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #17181c;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(17px * 1.35 * 2);
}
body.home .oz-academia-virtual .oz-blog-card__excerpt,
body.home .oz-academia-virtual .ozs-blog__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: #55585f;
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botón "Ver más": de outline gris/negro (var(--oz-accent,#111)) a
   sólido en fucsia de marca — mismo mecanismo del CTA del mockup A. Sin
   !important: la regla nativa (.oz-blog-card__readmore,.ozs-blog__readmore)
   no lo usa, así que la especificidad de body.home+.oz-academia-virtual
   ya gana sin reforzar. */
body.home .oz-academia-virtual .oz-blog-card__readmore,
body.home .oz-academia-virtual .ozs-blog__readmore {
	background: #ff0047;
	border-color: #ff0047;
	color: #ffffff;
	border-radius: 8px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	padding: 9px 16px;
}
body.home .oz-academia-virtual .oz-blog-card__readmore:hover,
body.home .oz-academia-virtual .ozs-blog__readmore:hover {
	background: #cc0039;
	border-color: #cc0039;
	color: #ffffff;
}

/* Dots: el motor genera 1 dot por post (confirmado — con loop=true,
   getMaxLogicalIndex() devuelve originalCount-1, no "páginas" de N
   columnas; no hay parámetro de opciones para agruparlos por página sin
   tocar JS/PHP compartido). Se los deja funcionales pero visualmente
   discretos en vez de ~30 puntos grandes iguales, y el activo se alarga
   en vez de solo cambiar de color, para que se note cuál es sin
   necesitar contarlos. */
body.home .oz-academia-virtual .ozs__dot {
	width: 6px;
	height: 6px;
	background: #e4e3df;
}
body.home .oz-academia-virtual .ozs__dot.is-active {
	background: #ff0047;
	width: 18px;
	border-radius: 3px;
}