/*
 * DDC Responsive — maquetación de móvil y tablet de deportedecontacto.com
 *
 * REGLA DE ORO: escritorio (≥ 1025 px) no se toca. Todas las reglas de este
 * archivo viven dentro de @media (max-width: 1024px) o (max-width: 767px), y el
 * propio <link> se carga con media="(max-width: 1024px)": a partir de 1025 px el
 * navegador no lo aplica.
 *
 * Tampoco se toca el contenido: nada se oculta ni se reordena editorialmente.
 * Solo se cambia cómo se presenta (tamaños, rejillas, espaciados, zonas táctiles).
 *
 * Sobre los !important: solo donde el tema u otro plugin ya usa !important o
 * estilos en línea, y se anota al lado el motivo.
 *
 * Secciones:
 *   1. Sistema (variables, base, tipografía)
 *   2. Barra superior (lema, cuenta y redes)
 *   3. Cabecera compacta y fija
 *   4. Menú móvil a pantalla completa y buscador
 *   5. Formularios (sin zoom en iPhone)
 *   6. Aviso de cookies propio (DDC Cookies)
 *   7. Contenido de entradas y páginas (OceanWP)
 *   8. Cabecera de las entradas (OceanWP «estilo 6»)
 *   9. Archivos: categorías, etiquetas, autor y búsqueda
 *  10. Barra lateral y pie
 *  11. Anuncios
 *  12. Tienda (WooCommerce)
 *  13. Eventos (The Events Calendar)
 *  13 bis. Portada (DDC Portada)
 *  13 ter. Imágenes de Elementor que se salían por los lados
 *  14. Tablet: ajustes propios de 768–1024 px
 */

/* ------------------------------------------------------------------ */
/* 1. Sistema                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	:root {
		--ddcr-rojo: #e10600;
		--ddcr-negro: #0a0808;
		--ddcr-texto: #3a3a3a;
		--ddcr-borde: #e6e6e6;
		--ddcr-gutter: 24px;
		--ddcr-cab: 64px;            /* alto de la cabecera compacta */
		--ddcr-tactil: 44px;         /* zona táctil mínima */
		--ddcr-radio: 10px;
		--ddcr-s1: 4px; --ddcr-s2: 8px; --ddcr-s3: 12px; --ddcr-s4: 16px; --ddcr-s5: 24px; --ddcr-s6: 32px;
	}

	/*
	 * El tema pone html,body{overflow-x:hidden!important}. «hidden» convierte a
	 * <body> en contenedor de scroll y rompe position:sticky. «clip» recorta
	 * igual sin crear contenedor. Lleva !important para ganar al del tema.
	 * Donde clip no exista (Safari < 16) se queda el hidden del tema.
	 */
	html, body { overflow-x: clip !important; }

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-padding-top: calc(var(--ddcr-cab) + 12px);
	}
	body { -webkit-tap-highlight-color: rgba(225, 6, 0, .15); }

	/* Imágenes, vídeos e iframes nunca más anchos que su caja (sin tocar su
	   altura: las landings y los Shorts verticales tienen la suya) */
	/* :where() deja la especificidad a cero: cualquier regla propia de una landing gana */
	:where(#main, #footer) :where(img, video, iframe) { max-width: 100%; }

	/* Estado de pulsación visible en botones y enlaces-botón */
	#main .button:active, #main button:active, .woocommerce .button:active,
	.blog-entry-readmore a:active, .elementor-button:active { transform: translateY(1px); filter: brightness(.92); }
}

@media (max-width: 767px) {
	:root { --ddcr-gutter: 16px; --ddcr-cab: 60px; }
}

/* ------------------------------------------------------------------ */
/* 2. Barra superior: lema + «Accede a tu cuenta» + redes              */
/*    Antes: 122 px de alto con iconos de 18 × 24 px.                  */
/*    Ahora: dos filas de 44 px, iconos de 44 × 44 px.                 */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#top-bar-wrap #top-bar { padding: 0; width: auto; max-width: none; margin: 0; }
	#top-bar-wrap #top-bar-inner {
		display: flex;
		flex-direction: column;
		padding: 0 !important; /* OceanWP mete un padding-bottom en línea para colocar las redes */
		margin: 0 var(--ddcr-gutter);
	}
	#top-bar-wrap #top-bar-content {
		float: none; width: 100%; padding: 0; margin: 0; text-align: left;
	}
	#top-bar-wrap .topbar-content {
		display: flex; align-items: center; justify-content: space-between; gap: var(--ddcr-s3);
		min-height: var(--ddcr-tactil);
		font-size: 12px; line-height: 1.35; letter-spacing: .2px;
	}
	/* El CSS personalizado de la web lo coloca en absoluto con !important en
	   todas sus propiedades; aquí vuelve al flujo, también con !important. */
	#top-bar-wrap #ddc-account-links {
		position: static !important; transform: none !important;
		left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
		flex: none; margin: 0; text-align: right !important; white-space: nowrap !important;
	}
	#top-bar-wrap #ddc-account-links a {
		display: inline-flex; align-items: center; min-height: var(--ddcr-tactil);
		padding: 0 0 0 var(--ddcr-s2); margin-left: 0 !important;
		font-size: 12px !important; font-weight: 600; letter-spacing: .6px; white-space: nowrap;
	}
	#top-bar-wrap #top-bar-social {
		position: static !important; float: none; width: 100%; margin: 0; padding: 0;
		height: auto !important; /* el tema le da 20 px de alto: los iconos de 44 se salían por debajo */
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
	#top-bar-wrap #top-bar-social ul {
		display: flex; justify-content: center; flex-wrap: nowrap; margin: 0; padding: 0;
	}
	#top-bar-wrap #top-bar-social li { display: block; flex: none; }
	#top-bar-wrap #top-bar-social li a {
		display: flex; align-items: center; justify-content: center;
		width: var(--ddcr-tactil); height: var(--ddcr-tactil); padding: 0; margin: 0; font-size: 16px;
	}
}
@media (max-width: 767px) {
	/* En móvil no caben 11 iconos de 44 px: se deslizan, con un fundido que lo indica */
	#top-bar-wrap #top-bar-social ul {
		justify-content: flex-start;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x proximity; scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
	}
	#top-bar-wrap #top-bar-social ul::-webkit-scrollbar { display: none; }
	#top-bar-wrap #top-bar-social li { scroll-snap-align: start; }
	#top-bar-wrap #top-bar-social li:last-child { margin-right: 40px; }
}

/* ------------------------------------------------------------------ */
/* 3. Cabecera compacta y fija tipo app                                */
/*    Se fija solo donde la página no trae su propia barra fija        */
/*    (landings, promotoras y disciplinas tienen la suya).             */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#site-header #site-header-inner {
		height: var(--ddcr-cab) !important; /* el tema la fija en línea con data-height */
		width: auto; max-width: none;
		margin: 0 max(var(--ddcr-gutter), env(safe-area-inset-left));
		display: flex; align-items: center; justify-content: space-between;
	}
	#site-header #site-header-inner::after, #site-header #site-header-inner::before { display: none; }
	#site-header #site-logo { float: none; height: var(--ddcr-cab); display: flex; align-items: center; }
	#site-header #site-logo #site-logo-inner { display: flex; align-items: center; height: var(--ddcr-cab); }
	#site-header #site-logo img.responsive-logo { max-height: 34px; width: auto; }
	/* Solo el logo móvil: el de escritorio (a.custom-logo-link) lo oculta el tema y debe seguir oculto */
	#site-header #site-logo a.responsive-logo-link { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	#site-header .oceanwp-mobile-menu-icon { float: none; display: flex; align-items: center; margin-left: auto; }
	#site-header .oceanwp-mobile-menu-icon a {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: var(--ddcr-tactil); height: var(--ddcr-tactil); line-height: 1; padding: 0 var(--ddcr-s1);
	}
	#site-header .oceanwp-mobile-menu-icon a.mobile-menu { padding: 0 var(--ddcr-s2); }

	/* html.ddcr-ancla-arriba: lo pone ddc-responsive.js cuando un anuncio ancla de AdSense
	   ocupa la parte de arriba; entonces la cabecera no se fija (quedaría tapada) */
	html:not(.ddc-landing):not(.ddcr-ancla-arriba) body:not(:has(#ddcpr, .ddc-di, header#nav, nav#nav, nav.nav)) #site-header {
		position: sticky; top: 0; z-index: 1001;
		background-color: #fff;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 18px -12px rgba(0, 0, 0, .35);
	}
}
@media (max-width: 767px) {
	#site-header #site-logo img.responsive-logo { max-height: 30px; max-width: 150px; }
}

/* ------------------------------------------------------------------ */
/* 4. Menú móvil a pantalla completa y buscador                        */
/*    Mismos enlaces que el menú actual: solo cambia la presentación.  */
/*    --ddcr-menu-top lo pone ddc-responsive.js con el borde inferior  */
/*    de la cabecera, para que «Cerrar» quede siempre a la vista.      */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#site-header #mobile-dropdown {
		position: fixed; left: 0; right: 0;
		top: var(--ddcr-menu-top, var(--ddcr-cab));
		bottom: 0;
		height: auto !important; /* jQuery slideToggle escribe una altura en línea durante la animación */
		max-height: none;
		overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		background: #fff;
		padding: var(--ddcr-s2) max(var(--ddcr-gutter), env(safe-area-inset-left)) calc(var(--ddcr-s6) + env(safe-area-inset-bottom));
		border-top: 3px solid var(--ddcr-rojo);
		box-shadow: none;
		z-index: 1000;
	}
	#site-header #mobile-dropdown > nav { max-width: 640px; margin: 0 auto; }
	#site-header #mobile-dropdown ul li a {
		display: flex; align-items: center; gap: var(--ddcr-s3);
		min-height: 52px; padding: 0 56px 0 var(--ddcr-s1);
		font-size: 17px; line-height: 1.3; font-weight: 500; color: #1a1a1a;
		border-bottom: 1px solid var(--ddcr-borde);
	}
	#site-header #mobile-dropdown ul li a .icon { font-size: 18px; }
	#site-header #mobile-dropdown ul.sub-menu { background: #f6f6f6; border-radius: var(--ddcr-radio); margin: var(--ddcr-s1) 0 var(--ddcr-s2); padding: 0; }
	#site-header #mobile-dropdown ul.sub-menu li a { padding-left: var(--ddcr-s4); font-size: 16px; font-weight: 400; min-height: 48px; }
	#site-header #mobile-dropdown ul.sub-menu li:last-child > a { border-bottom: 0; }
	/* El «+» que abre cada submenú: zona táctil de 52 × 52 */
	#site-header #mobile-dropdown .dropdown-toggle {
		position: absolute; right: 0; top: 0;
		width: 52px; height: 52px; line-height: 52px; text-align: center;
		display: flex; align-items: center; justify-content: center;
		font-size: 20px; border: 0;
	}
	#site-header #mobile-dropdown li { position: relative; }
	/* Iconos sociales del final del menú, si los hay */
	#site-header #mobile-dropdown .oceanwp-social-menu ul,
	#site-header #mobile-dropdown .social-menu-inner ul { display: flex; flex-wrap: wrap; justify-content: center; }
	#site-header #mobile-dropdown .oceanwp-social-menu a { min-width: var(--ddcr-tactil); min-height: var(--ddcr-tactil); border: 0; justify-content: center; }

	/* Con el menú abierto, la página de detrás no se desplaza */
	html:has(#site-header .oceanwp-mobile-menu-icon a.mobile-menu[aria-expanded="true"]) body { overflow: hidden; }

	/* Buscador desplegable: a todo lo ancho, campo grande */
	#site-header #icon-searchform-dropdown {
		position: absolute; left: 0; right: 0; width: auto;
		padding: var(--ddcr-s3) var(--ddcr-gutter);
		border-top-color: var(--ddcr-rojo);
	}
	#site-header #icon-searchform-dropdown input:not([type="hidden"]):not([type="submit"]) {
		height: 48px; padding: 0 var(--ddcr-s4); border-radius: var(--ddcr-radio);
	}
}

/* ------------------------------------------------------------------ */
/* 5. Formularios: ningún campo por debajo de 16 px (iPhone hace zoom) */
/*    !important porque los campos llevan reglas con #id (MailPoet,    */
/*    buscadores de OceanWP) y estilos en línea.                       */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	:is(#site-header, #top-bar-wrap, #right-sidebar, #left-sidebar, #footer, .woocommerce, .woocommerce-page #main, .tribe-events, .tribe-events-single, .mailpoet_form, form.searchform, .search-results #main, .error404 #main, #ddc-ck, #busca)
		:is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea),
	input#busca, input#not-busca, :is(#c-web, #c-nombre, #c-email, #c-club, #c-tel, #c-plan, #c-msg, #sp-round-min, #sp-rest-min, #sp-rounds),
	form.ddcn-soy-medio :is(input, select, textarea) {
		font-size: 16px !important;
	}
	/* No en landings, promotoras ni disciplinas: sus formularios tienen su propio diseño */
	html:not(.ddc-landing) body:not(:has(#ddcpr, .ddc-di)) #main :is(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"], input[type="number"], select),
	#footer input[type="email"], #footer input[type="text"], #footer input[type="search"] {
		min-height: var(--ddcr-tactil);
	}
	.mailpoet_form .mailpoet_submit, #footer .mailpoet_submit, #main .mailpoet_submit {
		min-height: var(--ddcr-tactil) !important; /* MailPoet lo fija en línea */
		font-size: 15px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 6. Aviso de cookies propio (#ddc-ck)                                */
/*    Sus tamaños van en rem sobre una raíz de 10 px: el texto queda   */
/*    a 9,5 px. Aquí pasan a px legibles y los botones a una fila.     */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#ddc-ck {
		padding: 0 var(--ddcr-s2) calc(var(--ddcr-s2) + env(safe-area-inset-bottom));
	}
	#ddc-ck .ddc-ck-caja { max-width: 640px; margin: 0 auto; border-radius: 14px; }
	#ddc-ck .ddc-ck-cuerpo { padding: var(--ddcr-s4) var(--ddcr-s4) 0; }
	#ddc-ck .ddc-ck-titulo { font-size: 18px; line-height: 1.2; margin: 0 0 var(--ddcr-s2); }
	#ddc-ck .ddc-ck-texto { font-size: 14px; line-height: 1.45; margin: 0 0 var(--ddcr-s3); }
	#ddc-ck .ddc-ck-texto a { display: inline-block; padding: 2px 0; }
	#ddc-ck .ddc-ck-opciones { font-size: 14px; line-height: 1.45; max-height: 45dvh; overflow-y: auto; }
	#ddc-ck .ddc-ck-fila { padding: var(--ddcr-s2) 0; }
	#ddc-ck .ddc-ck-fila input { width: 22px; height: 22px; }
	/* Aceptar y Rechazar, iguales y lado a lado; Elegir (y Guardar) debajo */
	#ddc-ck .ddc-ck-botones {
		display: grid; grid-template-columns: 1fr 1fr; gap: var(--ddcr-s2);
		padding: 0 var(--ddcr-s4) var(--ddcr-s4);
	}
	#ddc-ck .ddc-ck-btn {
		width: auto; min-height: var(--ddcr-tactil); margin: 0; padding: 0 var(--ddcr-s2);
		font-size: 14px; line-height: 1.15; white-space: nowrap;
		display: flex; align-items: center; justify-content: center; text-align: center;
		border-radius: var(--ddcr-radio);
	}
	#ddc-ck .ddc-ck-btn:not(.ddc-ck-btn-si):not(.ddc-ck-btn-no) { grid-column: 1 / -1; }
	#ddc-ck .ddc-ck-btn[hidden] { display: none; } /* respetar los botones que el plugin oculta */
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* En tablet caben los tres botones en una fila: el aviso tapa menos pantalla */
	#ddc-ck .ddc-ck-botones { grid-template-columns: repeat(3, 1fr); }
	#ddc-ck .ddc-ck-btn:not(.ddc-ck-btn-si):not(.ddc-ck-btn-no) { grid-column: auto; }
}

/* ------------------------------------------------------------------ */
/* 7. Contenido de entradas y páginas                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* Cuerpo a 16–17 px con interlineado cómodo */
	.single-post article .entry-content > p, .single-post article .entry-content > ul li, .single-post article .entry-content > ol li,
	.single-page-article .entry > p, .single-page-article .entry > ul li, .single-page-article .entry > ol li,
	#content .entry > p {
		font-size: clamp(16px, 1.1rem + .4vw, 17px);
		line-height: 1.7;
	}
	/*
	 * El CSS personalizado de la web justifica los párrafos. En una columna
	 * estrecha deja huecos enormes entre palabras («Plataforma   para   el»).
	 * Se alinea a la izquierda respetando los párrafos centrados a propósito.
	 */
	article .entry-content p:not([class*="has-text-align"]):not([style*="text-align"]),
	article .entry-content ul li:not([class*="has-text-align"]):not([style*="text-align"]) {
		text-align: left;
		-webkit-hyphens: auto; hyphens: auto;
	}
	.single-post article .entry-content > h2 { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.2; }
	.single-post article .entry-content > h3 { font-size: clamp(19px, 4.6vw, 23px); line-height: 1.25; }
	.single-post article .entry-content > figure, .single-post article .entry-content > .wp-block-image { margin-left: 0; margin-right: 0; }
	article .entry-content figcaption, article .entry-content .wp-element-caption { font-size: 13px; line-height: 1.45; }
	/* Tablas: desplazamiento horizontal limpio dentro de su caja, nunca de la página */
	article .entry-content .wp-block-table, .single-page-article .entry .wp-block-table {
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		background:
			linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
			linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left / 10px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right / 10px 100% no-repeat scroll;
	}
	article .entry-content .wp-block-table table { min-width: 520px; }
	/*
	 * Vídeos de YouTube incrustados como bloque: el CSS personalizado de la web
	 * los pone a height:60vh !important. En un móvil son 500 px de marco para un
	 * vídeo 16:9 (franjas negras arriba y abajo). Dentro del bloque de WordPress,
	 * que ya reserva la proporción del vídeo (16:9 o 9:16 para los Shorts), el
	 * iframe ocupa justo esa caja. Lleva !important para ganar al de la web.
	 */
	.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe[src*="youtube.com"] {
		position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important;
	}
	/* Botones dentro del texto: cómodos y en una línea */
	article .entry-content .wp-block-button__link { min-height: var(--ddcr-tactil); display: inline-flex; align-items: center; justify-content: center; }
	/* Etiquetas y navegación entre entradas */
	.single .post-tags { line-height: 1.6; }
	.single .post-tags a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); padding: 0 2px; }
	.single .post-author-name a, .single .post-author-avatar a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	.single .blog-post-title ul.meta a, .single ul.meta li a { display: inline-block; padding: 6px 0; }
	.single nav.post-navigation .nav-links a { display: block; padding: var(--ddcr-s2) 0; }
	/* Compartir (AddToAny): iconos de 44 px */
	.addtoany_list a, .a2a_kit a { min-width: var(--ddcr-tactil); min-height: var(--ddcr-tactil); display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* 8. Cabecera de las entradas (OceanWP «single-header-ocean-6»)       */
/*    Antes: caja de 280 px con el título a 200 px de ancho: 7 líneas. */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.single-header-ocean-6 .sh-container.head-row {
		max-width: none; width: auto;
		margin: 0 var(--ddcr-gutter);
		padding: 0;
	}
	.single-header-ocean-6 .sh-container .col-xs-12 { width: 100%; padding: 0; }
	.single-header-ocean-6 .blog-post-title {
		max-width: none; width: auto;
		padding: var(--ddcr-s5) var(--ddcr-s5) var(--ddcr-s4);
		border-radius: var(--ddcr-radio);
	}
	.single-header-ocean-6 .blog-post-title .single-post-title {
		max-width: none; width: auto;
		font-size: clamp(24px, 6.2vw, 34px); line-height: 1.22; letter-spacing: -.2px;
		margin-bottom: var(--ddcr-s4);
	}
	/*
	 * Foto de cabecera: mientras carga, su hueco salía casi cuadrado y al llegar
	 * la foto todo subía ~180 px (CLS 0,11 en Lighthouse, ya antes del plugin).
	 * Se reserva su proporción 16:9 desde el primer pintado, pero solo cuando los
	 * atributos de la imagen dicen que es 16:9 (el 93 % de las destacadas): las
	 * de otra proporción se ven como siempre, sin recortar.
	 */
	.single-header-ocean-6 .post-thumbnail:has(> img:is([width="1280"][height="720"], [width="1920"][height="1080"], [width="1200"][height="675"], [width="1600"][height="900"], [width="1024"][height="576"], [width="800"][height="450"], [width="768"][height="432"], [width="640"][height="360"])) {
		aspect-ratio: 16 / 9; overflow: hidden; height: auto; min-height: 0;
	}
	.single-header-ocean-6 .post-thumbnail:has(> img:is([width="1280"][height="720"], [width="1920"][height="1080"], [width="1200"][height="675"], [width="1600"][height="900"], [width="1024"][height="576"], [width="800"][height="450"], [width="768"][height="432"], [width="640"][height="360"])) > img {
		width: 100%; height: 100%; object-fit: cover;
	}
	.single-header-ocean-6 .blog-post-author { gap: var(--ddcr-s3); align-items: center; }
	.single-header-ocean-6 ul.meta, .single-header-ocean-6 .meta-item { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 767px) {
	.single-header-ocean-6 .blog-post-title { padding: var(--ddcr-s4); }
}

/* ------------------------------------------------------------------ */
/* 9. Archivos: categorías, etiquetas, autor y búsqueda                */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.blog-entry .blog-entry-summary p { font-size: 16px; line-height: 1.6; }
	.blog-entry ul.meta { font-size: 13px; line-height: 1.5; }
	.blog-entry ul.meta li { padding-bottom: var(--ddcr-s1); }
	.blog-entry .blog-entry-readmore a {
		display: inline-flex; align-items: center; min-height: var(--ddcr-tactil);
		padding: 0 var(--ddcr-s4); font-size: 13px; letter-spacing: .6px;
	}
	.blog-entry .blog-entry-header .entry-title { line-height: 1.15; }
	.blog-entry .thumbnail img { width: 100%; border-radius: var(--ddcr-radio); }
	.blog-entry .thumbnail .wp-caption-text, .blog-entry .thumbnail-caption { font-size: 13px; line-height: 1.45; }
	/* Paginación */
	.oceanwp-pagination ul.page-numbers li a, .oceanwp-pagination ul.page-numbers li span,
	.page-numbers a, .page-numbers span.current { min-width: var(--ddcr-tactil); min-height: var(--ddcr-tactil); display: inline-flex; align-items: center; justify-content: center; }
	/* Página de título de archivo y migas */
	.page-header .site-breadcrumbs, .page-header nav.site-breadcrumbs { font-size: 13px; line-height: 1.6; }
	.site-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	.site-breadcrumbs .trail-begin a { min-width: var(--ddcr-tactil); }
}

/* ------------------------------------------------------------------ */
/* 10. Barra lateral y pie                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* Listas de la barra lateral (categorías, archivos): filas de 44 px */
	.sidebar-box ul li a, .widget_categories ul li a, .widget_archive ul li a,
	.woocommerce-widget-layered-nav-list li a, .widget_product_categories ul li a {
		display: flex; align-items: center; min-height: var(--ddcr-tactil);
		font-size: 15px;
	}
	.sidebar-box ul li, .widget_categories ul li { padding-top: 0; padding-bottom: 0; }
	/* Artículos recientes de OceanWP */
	.oceanwp-recent-posts li { padding: var(--ddcr-s2) 0; }
	.oceanwp-recent-posts .recent-posts-title { font-size: 15px; line-height: 1.4; display: block; padding: var(--ddcr-s1) 0; }
	.oceanwp-recent-posts .recent-posts-date, .oceanwp-recent-posts .recent-posts-comments,
	.oceanwp-recent-posts .recent-posts-comments a { font-size: 12px; }
	.sidebar-box .widget-title, #footer-widgets .widget-title { font-size: 14px; letter-spacing: 1px; }
	/* Enlaces sueltos de widgets de texto («Anúnciate con nosotros», «Envíanos tu noticia») */
	.sidebar-box .textwidget a, #footer-widgets .textwidget a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	/* Enlaces que envuelven una imagen: la zona táctil es la imagen entera */
	.widget_media_image a, .code-block > a, .textwidget > a:has(> img) { display: inline-block; max-width: 100%; }
	/* Insignias de App Store y Google Play: tamaño de insignia, no de cartel */
	#footer-widgets img[src*="app-store" i], #footer-widgets img[src*="appstore" i],
	#footer-widgets img[src*="google-play" i], #footer-widgets img[src*="googleplay" i] { max-width: 200px; }

	/* Pie inferior: enlaces legales con zona táctil */
	#footer-bottom { padding: var(--ddcr-s4) 0 calc(var(--ddcr-s4) + env(safe-area-inset-bottom)); }
	#footer-bottom #footer-bottom-inner { margin: 0 var(--ddcr-gutter); width: auto; }
	#footer-bottom #footer-bottom-menu, #footer-bottom #copyright { float: none; width: 100%; text-align: center; padding: 0; }
	#footer-bottom #footer-bottom-menu a, #footer-bottom #copyright a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); padding: 0 var(--ddcr-s1); }
	#footer-bottom, #footer-bottom #copyright { font-size: 13px; line-height: 1.6; }
	/* Botón de subir: lejos del borde y de la barra de gestos */
	#scroll-top { width: var(--ddcr-tactil); height: var(--ddcr-tactil); line-height: var(--ddcr-tactil); right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ */
/* 11. Anuncios (AdSense / Ad Inserter): nunca más anchos que su caja  */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.code-block, .custom-html-widget, .textwidget:has(> ins.adsbygoogle) { max-width: 100%; overflow: hidden; }
	ins.adsbygoogle { max-width: 100% !important; /* AdSense pone el ancho en línea */ }
}

/* ------------------------------------------------------------------ */
/* 12. Tienda (WooCommerce)                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/*
	 * Sin rejilla propia: la tienda conserva sus columnas (1 en móvil, las del
	 * tema en tablet). Probado con Lighthouse: una rejilla de 2 columnas
	 * multiplicaba el salto que ya dan las imágenes de categoría al cargar
	 * (CLS 0,07 → 0,27) y la orden exige que el CLS no empeore.
	 */
	.woocommerce ul.products li.product .woocommerce-loop-category__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product li.title a { font-size: 16px; line-height: 1.3; }
	.woocommerce ul.products li.product .price { font-size: 17px; }
	.woocommerce ul.products li.product .button {
		display: inline-flex; align-items: center; justify-content: center;
		min-height: var(--ddcr-tactil); padding: 0 var(--ddcr-s3); font-size: 13px; line-height: 1.2; white-space: normal;
	}
	.woocommerce ul.products li.product .woo-entry-inner li.category, .woocommerce ul.products li.product .woo-entry-inner li.category a { font-size: 12px; }
	.woocommerce .oceanwp-toolbar { gap: var(--ddcr-s2); }
	.woocommerce .oceanwp-grid-list a { width: var(--ddcr-tactil); height: var(--ddcr-tactil); display: inline-flex; align-items: center; justify-content: center; }

	/* Ficha de producto */
	.single-product div.product .product_title { font-size: clamp(24px, 6vw, 32px); line-height: 1.15; }
	.single-product div.product .summary p.price, .single-product div.product .summary span.price { font-size: 26px; }
	.single-product div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--ddcr-s3); align-items: stretch; }
	.single-product div.product form.cart.variations_form { display: block; }
	.single-product div.product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--ddcr-s3); align-items: stretch; }
	.single-product div.product .quantity { margin: 0 !important; display: inline-flex; height: 48px; }
	.single-product div.product .quantity .qty { width: 52px; height: 48px; font-size: 16px; }
	.single-product div.product .quantity .minus, .single-product div.product .quantity .plus {
		width: var(--ddcr-tactil); height: 48px; line-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
	}
	/* En una sola línea; si no cabe junto a la cantidad, baja a su propia fila a todo el ancho */
	.single-product div.product .single_add_to_cart_button {
		flex: 1 1 auto; min-height: 48px; margin: 0 !important;
		padding: 0 var(--ddcr-s4) !important;
		font-size: 15px !important; /* OceanWP lo deja a 10 px con !important */
		letter-spacing: .5px; line-height: 1.2; white-space: nowrap;
	}
	.single-product div.product table.variations th, .single-product div.product table.variations td { display: block; width: 100%; padding: var(--ddcr-s1) 0; text-align: left; }
	.single-product div.product table.variations select, .single-product div.product .theme-select { width: 100% !important; min-height: 48px; }
	.single-product div.product .theme-selectInner { line-height: 46px; }
	.single-product div.product .reset_variations { display: inline-flex; min-height: var(--ddcr-tactil); align-items: center; }
	.single-product .tinv-wraper a, .single-product .tinvwl_add_to_wishlist_button { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	.single-product div.product .product_meta { font-size: 14px; line-height: 1.7; }
	.single-product div.product .product_meta a { display: inline-block; padding: 2px 0; }
	/* Sin tocar su display: en tablet el tema oculta los textos «Producto anterior/siguiente» */
	.single-product .owp-product-nav li a { padding-top: 12px; padding-bottom: 12px; }
	.single-product .owp-product-nav li .owp-nav-thumb { display: none; } /* miniatura flotante de hover: en táctil queda fuera de pantalla (-99981 px) y no se puede ver */
	/* Pestañas: zona táctil y texto legible */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: flex; align-items: center; justify-content: center; min-height: var(--ddcr-tactil); font-size: 14px; padding: 0 var(--ddcr-s3); }
	.woocommerce div.product .woocommerce-tabs .panel { font-size: 16px; line-height: 1.65; }
	.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li { padding: 3px; }
	/* Botones de pago exprés (Woo Payments) y de carrito */
	.woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #payment #place_order { min-height: 52px; font-size: 16px !important; }
	/* Carrito: la tabla se apila en tarjetas */
	.woocommerce-cart table.shop_table td { font-size: 15px; }
	.woocommerce-cart table.cart td.actions .coupon .input-text { width: 100% !important; margin: 0 0 var(--ddcr-s2) !important; }
	.woocommerce-cart table.cart td.actions .button { width: 100%; min-height: var(--ddcr-tactil); }
	.woocommerce .quantity .qty { font-size: 16px; }
	/* Mi cuenta */
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; min-height: var(--ddcr-tactil); }
	.woocommerce form .form-row label { font-size: 15px; }
	.woocommerce form .form-row .input-text, .woocommerce form .form-row select { min-height: 48px; }
	.woocommerce form .woocommerce-form-login__submit, .woocommerce form .woocommerce-form-register__submit, .woocommerce button.button { min-height: var(--ddcr-tactil); font-size: 15px; }
}
@media (max-width: 767px) {
	/*
	 * Estabilidad al cargar (CLS): LiteSpeed pinta primero con un CSS mínimo y la
	 * hoja del tema llega después; la barra de vista y la rejilla de la tienda se
	 * recolocaban al llegar (CLS 0,07 ya antes del plugin). Aquí van sus valores
	 * finales, los mismos que pone el tema, para que estén desde el primer pintado.
	 */
	.woocommerce .oceanwp-toolbar { display: block; text-align: center; margin: 0 0 20px; padding: 10px 0; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
	.woocommerce .oceanwp-toolbar .oceanwp-grid-list { display: inline-block; float: none; margin: 0; }
	.woocommerce .oceanwp-toolbar .result-count { display: none; }
	.woocommerce ul.products.oceanwp-row { margin: 0 -10px; padding: 0; }
	.woocommerce ul.products > li.product-category { float: left; width: 100%; margin: 0 0 12.5px; padding: 0 6.25px 20px; clear: both; text-align: center; }
	.woocommerce ul.products > li.product-category a img { display: block; margin: 0 auto; }
	.woocommerce ul.products li.product .button { font-size: 13px; letter-spacing: .3px; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* 13. Eventos (The Events Calendar)                                   */
/*     El tema hereda texto justificado y deja letras de 10–12 px.     */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tribe-events .tribe-events-calendar-list__event-details,
	.tribe-events .tribe-events-calendar-list__event-details * ,
	.tribe-events .tribe-events-c-nav { text-align: left; }
	.tribe-events .tribe-events-calendar-list__event-datetime { font-size: 14px; }
	.tribe-events .tribe-events-calendar-list__event-title { font-size: 20px; line-height: 1.25; }
	.tribe-events .tribe-events-calendar-list__event-venue,
	.tribe-events .tribe-events-calendar-list__event-description p { font-size: 15px; line-height: 1.5; }
	.tribe-events .tribe-events-c-small-cta__price { font-size: 15px; }
	.tribe-events .tribe-events-c-nav__list-item a, .tribe-events .tribe-events-c-nav__today,
	.tribe-events .tribe-events-c-subscribe-dropdown__button { min-height: var(--ddcr-tactil); display: inline-flex; align-items: center; font-size: 14px; }
	.tribe-events .tribe-events-c-nav__prev-label, .tribe-events .tribe-events-c-nav__next-label { font-size: 13px; white-space: nowrap; }
	.tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next { white-space: nowrap; min-height: var(--ddcr-tactil); }
	.tribe-events .tribe-events-c-subscribe-dropdown__button-text { font-size: 14px; }
	.tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-c-events-bar__search-button,
	.tribe-events .tribe-events-c-view-selector__button { min-width: var(--ddcr-tactil); min-height: var(--ddcr-tactil); }
	/* Ficha de evento */
	.tribe-events-single .tribe-events-schedule { flex-wrap: wrap; gap: var(--ddcr-s1) var(--ddcr-s3); }
	.tribe-events-single .tribe-events-schedule .tribe-events-cost { margin-left: var(--ddcr-s2); display: inline-block; }
	.tribe-events-single .tribe-events-event-meta, .tribe-events-single .tribe-events-meta-list { font-size: 15px; line-height: 1.6; }
	.tribe-events-single .tribe-events-meta-group { width: 100% !important; float: none; padding: 0 0 var(--ddcr-s4); }
	.tribe-events-single .tribe-events-back a, .tribe-events-single .tribe-events-nav-pagination a { display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); font-size: 15px; }
	.tribe-events-single .tribe-events-content p { font-size: 16px; line-height: 1.7; }
}

/* ------------------------------------------------------------------ */
/* 13 bis. Portada (DDC Portada)                                       */
/*     Chips de categoría a 10 px y extractos a 13 px.                 */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.ddc-po .ddc-po-cats a { font-size: 12px; display: inline-flex; align-items: center; min-height: 28px; padding-top: 0; padding-bottom: 0; }
	.ddc-po p.ddc-po-ext { font-size: 15px; line-height: 1.55; }
	.ddc-po .ddc-po-mcats a, .ddc-po .ddc-po-autor a { display: inline-block; padding: 6px 0; }
}

/* ------------------------------------------------------------------ */
/* 13 ter. Imágenes de Elementor que se salían por los lados           */
/*     Tienen márgenes negativos (o un ancho fijo) puestos para        */
/*     escritorio que se heredan en móvil: la imagen se cortaba.       */
/*     Comprobado píxel a píxel: solo se tocan las que perdían imagen  */
/*     de verdad (el logo de Kickong solo pierde margen transparente). */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* Portada: el gorila del bloque Kickong (perdía un 4 % por lado en móvil y hasta 140 px en tablet) */
	.elementor-element-c6c0e4b > .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; } /* Elementor los pone con !important en su CSS por página */
}
@media (max-width: 767px) {
	/* Colecciones Kamae y Koala: foto de cabecera (−15 px por cada lado) */
	.elementor-element-3ec7404 > .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; } /* Elementor los pone con !important en su CSS por página */
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* Veladas Dojo Arena 2024: el logo de la federación lleva 400 px de relleno
	   por cada lado (de escritorio); a 768 px no le quedaba sitio y desaparecía */
	body .elementor-element.elementor-element-407ee70.elementor-widget > .elementor-widget-container { padding-left: 25%; padding-right: 25%; }
}

/* ------------------------------------------------------------------ */
/* 14. Tablet (768–1024): rejillas de 2 columnas donde tiene sentido   */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Barra lateral bajo el contenido: sus widgets en dos columnas */
	#right-sidebar-inner, #left-sidebar-inner {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ddcr-s6);
	}
	.content-full-width #right-sidebar-inner { display: block; }
	/* Pie: los widgets en dos columnas */
	#footer-widgets .footer-widgets-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ddcr-s5) var(--ddcr-s6); }
	#footer-widgets .footer-widgets-inner > .footer-box { width: auto !important; float: none; padding: 0; } /* OceanWP fija el ancho de columna con !important */
	#footer-widgets .footer-widgets-inner::after, #footer-widgets .footer-widgets-inner::before { display: none; }
}