/*
 * 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
 *  15–24. Aspecto de app (1.1.0): ver el índice al final del archivo
 */

/* ------------------------------------------------------------------ */
/* 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) {
	/* La rejilla de la tienda está en la sección 20 (1.1.0): dos columnas con el hueco de cada foto reservado */
	.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.
	 * (La rejilla de productos ya no va aquí: ver la sección 20.)
	 */
	.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 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; }
}

/* ================================================================== */
/* 1.1.0 — ASPECTO DE APP                                              */
/* Todo lo de aquí abajo es nuevo en 1.1.0 y sigue la misma regla de   */
/* oro: solo dentro de @media (max-width: 1024px) o (max-width: 767px).*/
/*  15. Entradas: foto a todo lo ancho y cabecera tipo app             */
/*  16. Archivos: tarjetas de noticia                                  */
/*  17. Barra lateral: categorías en chips                             */
/*  18. Barra superior en una sola fila                                */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 15. Entradas (OceanWP «estilo 6»)                                   */
/*     Antes: la foto salía dos veces (fondo y otra vez dentro del     */
/*     artículo), el título también, y la caja negra del título tapaba */
/*     la foto y ocupaba la pantalla entera con un avatar de 80 px.    */
/*     Ahora: foto 16:9 a todo lo ancho, debajo el título y una línea  */
/*     de autor y fecha, como en una app de noticias.                  */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.single-header-ocean-6 { display: flex; flex-direction: column; background: var(--ddcr-negro); }
	.single-header-ocean-6 .post-thumbnail { margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; }
	.single-header-ocean-6 .post-thumbnail > img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
	.single-header-ocean-6 .sh-container.head-row { margin: 0; padding: 0; }
	/* La caja negra deja de subir 150 px sobre la foto */
	.single-header-ocean-6 .blog-post-title,
	.single-header-ocean-6.header-has-post-thumbnail .blog-post-title {
		margin: 0; max-width: none; border-radius: 0;
		padding: 20px var(--ddcr-gutter) 22px;
		background: var(--ddcr-negro);
	}
	.single-header-ocean-6 .blog-post-title .single-post-title {
		font-size: clamp(25px, 6.6vw, 36px); line-height: 1.18; letter-spacing: -.3px;
		margin: 0 0 14px; max-width: 760px;
	}
	/* Autor y fecha en una sola línea: avatar de 36 px, sin «Escrito por» repetido */
	.single-header-ocean-6 .blog-post-author { display: none; }
	.single-header-ocean-6 ul.meta-item, .single-header-ocean-6 ul.meta-style-2 {
		display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 12px;
		margin: 0; padding: 0; max-width: none; text-align: left;
		font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78);
	}
	.single-header-ocean-6 ul.meta-item li { display: inline-flex; align-items: center; margin: 0; padding: 0; float: none; }
	.single-header-ocean-6 ul.meta-item li::before, .single-header-ocean-6 ul.meta-item li::after { display: none; }
	.single-header-ocean-6 ul.meta-item li a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; min-height: var(--ddcr-tactil); }
	.single-header-ocean-6 ul.meta-item li.meta-date { color: rgba(255, 255, 255, .7); }

	/* La misma foto y el mismo título, repetidos dentro del artículo: fuera */
	.single-header-ocean-6.header-has-post-thumbnail ~ #content-wrap article > .thumbnail,
	.single-header-ocean-6 ~ #content-wrap article > .entry-header { display: none; }
	/* De la segunda fila de datos quedan la categoría y los comentarios, en chips */
	.single-header-ocean-6 ~ #content-wrap article > ul.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li.meta-author,
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li.meta-date { display: none; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li { margin: 0; padding: 0; float: none; display: inline-flex; align-items: center; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li::after { display: none; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li i { display: none; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li a {
		display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
		border-radius: 999px; background: #f1f1f1; color: #1a1a1a; font-size: 13px; font-weight: 600; line-height: 1;
	}
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li.meta-cat a { background: var(--ddcr-rojo); color: #fff; }
	.single-header-ocean-6 ~ #content-wrap article > ul.meta li.meta-cat { gap: 6px; flex-wrap: wrap; font-size: 0; }
	body.single-post #main #content-wrap { padding-top: 20px; }
	/* Subtítulos del texto: la Advent Pro a 500 se queda muy fina en una pantalla pequeña */
	.single-post article .entry-content > :is(h2, h3) { font-weight: 700; color: #111; margin-top: 1.6em; }

	/* Fotos dentro del texto: de borde a borde del texto, con esquinas suaves */
	.single-post article .entry-content figure.wp-block-image img,
	.single-post article .entry-content > p > img,
	.single-post article .entry-content .wp-block-image img { border-radius: 8px; height: auto; }
	.single-post article .entry-content .wp-block-embed iframe { border-radius: 8px; }
}
@media (max-width: 767px) {
	/* El texto pegado al borde no se lee bien: 16 px de margen como en una app */
	.single-post #content-wrap.container { width: auto; max-width: none; padding-left: var(--ddcr-gutter); padding-right: var(--ddcr-gutter); }
}

/* ------------------------------------------------------------------ */
/* 16. Archivos (categorías, etiquetas, autor, búsqueda): tarjetas     */
/*     Antes: foto suelta de alto variable, pie de foto centrado y     */
/*     botón «Continuar leyendo» de 10 px. Ahora: tarjeta con foto     */
/*     16:9 fija (no salta al cargar), titular, fecha y categoría,     */
/*     extracto de 3 líneas, y toda la tarjeta se puede pulsar.        */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#blog-entries .blog-entry:is(.large-entry, .grid-entry) { margin: 0 0 18px; padding: 0; border: 0; }
	#blog-entries .blog-entry:is(.large-entry, .grid-entry) .blog-entry-inner {
		position: relative; display: flex; flex-direction: column;
		background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 22px -14px rgba(0, 0, 0, .35);
		padding: 0 0 16px; text-align: left;
	}
	#blog-entries .blog-entry .thumbnail { margin: 0 0 14px; position: relative; }
	#blog-entries .blog-entry .thumbnail a.thumbnail-link { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #141414; }
	#blog-entries .blog-entry .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
	#blog-entries .blog-entry .thumbnail .overlay { display: none; }
	#blog-entries .blog-entry .thumbnail-caption { margin: 6px 16px 0; font-size: 11.5px; line-height: 1.4; color: #8a8a8a; text-align: left; }
	#blog-entries .blog-entry :is(.blog-entry-header, ul.meta, .blog-entry-summary, .blog-entry-readmore) { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
	#blog-entries .blog-entry .blog-entry-header { margin-bottom: 8px; }
	#blog-entries .blog-entry .blog-entry-header .entry-title { font-size: clamp(21px, 5.6vw, 25px); line-height: 1.15; margin: 0; }
	/* Toda la tarjeta lleva a la noticia (los enlaces de categoría siguen funcionando encima) */
	#blog-entries .blog-entry .blog-entry-header .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
	#blog-entries .blog-entry ul.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-bottom: 8px; font-size: 13px; color: #777; }
	#blog-entries .blog-entry ul.meta li { padding: 0; margin: 0; float: none; }
	#blog-entries .blog-entry ul.meta li::after { display: none; }
	#blog-entries .blog-entry ul.meta li a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; }
	#blog-entries .blog-entry .blog-entry-summary { margin-bottom: 4px; }
	#blog-entries .blog-entry .blog-entry-summary p {
		margin: 0; font-size: 15px; line-height: 1.55; color: #444;
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
	}
	#blog-entries .blog-entry .blog-entry-readmore { margin-top: 6px; }
	#blog-entries .blog-entry .blog-entry-readmore a {
		position: relative; z-index: 2; border: 0; padding: 0; background: none;
		color: var(--ddcr-rojo); font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
	}
	/* El texto de la categoría arriba del listado: legible y sin cajón gris */
	.tax-desc { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* Tablet: dos tarjetas por fila */
	#blog-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	#blog-entries::before, #blog-entries::after { display: none; }
	#blog-entries .blog-entry:is(.large-entry, .grid-entry) { width: auto !important; float: none; margin: 0; } /* OceanWP fija el ancho de columna con !important */
	#blog-entries .blog-entry .blog-entry-inner { height: 100%; }
	#blog-entries > :not(.blog-entry) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ */
/* 17. Cabecera de página (título y migas) y barra lateral             */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* Título de página compacto: antes 34 px de relleno arriba y abajo y las migas en dos líneas */
	.page-header { padding: 18px 0 10px; }
	.page-header .page-header-inner { width: auto; max-width: none; margin: 0 var(--ddcr-gutter); }
	.page-header .page-header-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.12; margin: 0 0 4px; }
	.page-header .page-subheading { font-size: 14px; line-height: 1.5; margin: 4px 0 0; }
	.page-header .site-breadcrumbs { position: static; float: none; width: auto; margin: 0; max-width: 100%; }
	/* Migas en una sola línea que se desliza si no cabe */
	.page-header .site-breadcrumbs ol.trail-items {
		display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; white-space: nowrap;
		scrollbar-width: none; margin: 0; padding: 0;
	}
	.page-header .site-breadcrumbs ol.trail-items::-webkit-scrollbar { display: none; }
	.page-header .site-breadcrumbs .trail-item { display: inline-flex; align-items: center; flex: none; }
	.page-header .site-breadcrumbs .breadcrumb-sep { margin: 0 6px; opacity: .5; }

	/* Categorías de la barra lateral: chips que se pulsan con el dedo, no una lista de 30 filas */
	:is(#right-sidebar, #left-sidebar) .widget_categories > ul,
	:is(#right-sidebar, #left-sidebar) .widget_product_categories > ul {
		display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0;
	}
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li { display: contents; }
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) ul.children { display: contents; }
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li .count { display: none; }
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li a {
		display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin: 0;
		border: 1px solid #e3e3e3; border-radius: 999px; background: #fff;
		font-size: 14px; line-height: 1; color: #1a1a1a; white-space: nowrap;
	}
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li a::before { display: none; }
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li.current-cat > a,
	:is(#right-sidebar, #left-sidebar) :is(.widget_categories, .widget_product_categories) li.current-cat-parent > a { background: var(--ddcr-negro); border-color: var(--ddcr-negro); color: #fff; }
	/* Widgets de la barra lateral como bloques separados */
	:is(#right-sidebar, #left-sidebar) .sidebar-box { margin-bottom: 28px; }
	:is(#right-sidebar, #left-sidebar) .sidebar-box img { border-radius: 10px; height: auto; }
}

/* ------------------------------------------------------------------ */
/* 18. Barra superior en una sola fila (antes dos: 90 px)              */
/*     Las redes se deslizan a la izquierda y «Accede a tu cuenta»     */
/*     queda fija a la derecha. El lema no se repite aquí: es el mismo */
/*     texto que lleva la portada y el logo ya dice qué es la web.     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
	#top-bar-wrap #top-bar-inner { flex-direction: row; align-items: stretch; }
	#top-bar-wrap #top-bar-social { order: 0; flex: 1 1 auto; min-width: 0; width: auto; border-top: 0; }
	#top-bar-wrap #top-bar-content { order: 1; flex: none; width: auto; }
	#top-bar-wrap .topbar-content { font-size: 0; gap: 0; }
	#top-bar-wrap #ddc-account-links { font-size: 12px; }
	#top-bar-wrap #ddc-account-links a { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .14); }
	#top-bar-wrap #top-bar-social li a { width: 40px; }
	#top-bar-wrap #top-bar-social li:last-child { margin-right: 24px; }
}

/* ------------------------------------------------------------------ */
/* 19. Pie inferior: enlaces legales en dos columnas, sin las «|»      */
/*     que quedaban colgando al final de cada línea                    */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#footer-bottom #footer-bottom-menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; text-align: left; }
	#footer-bottom #footer-bottom-menu li { float: none; }
	#footer-bottom #footer-bottom-menu li::after { display: none; }
	#footer-bottom #footer-bottom-menu a { width: 100%; justify-content: flex-start; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	#footer-bottom #copyright { margin-top: 14px; font-size: 12px; opacity: .75; }
}

/* ------------------------------------------------------------------ */
/* 20. Tienda: escaparate en dos columnas, como una app de compras     */
/*     La 1.0.0 dejó una sola columna porque la rejilla de 2 subía el  */
/*     CLS (las fotos cambiaban de alto al cargar). Ahora cada foto    */
/*     tiene su hueco cuadrado reservado desde el primer pintado, así  */
/*     que no se mueve nada al llegar.                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.woocommerce ul.products.oceanwp-row {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
		margin: 0 0 28px; padding: 0;
	}
	.woocommerce ul.products.oceanwp-row::before, .woocommerce ul.products.oceanwp-row::after { display: none; }
	.woocommerce ul.products.oceanwp-row > li.product {
		width: auto !important; /* OceanWP: .products.mobile-1-col .product{width:100%!important} */
		float: none; clear: none; margin: 0; padding: 0;
	}
	.woocommerce ul.products > li.product .product-inner {
		height: 100%; display: flex; flex-direction: column;
		background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; padding: 0 0 12px;
		box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .4);
	}
	.woocommerce ul.products > li.product .woo-entry-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin: 0 0 10px; background: #f6f6f6; }
	.woocommerce ul.products > li.product .woo-entry-image a:has(img) { display: block; height: 100%; }
	/* El HTML de las categorías trae un enlace vacío antes del de la foto: empujaba la foto fuera del hueco */
	.woocommerce ul.products > li.product .woo-entry-image > a:not(:has(img)) { display: none; }
	.woocommerce ul.products > li.product .woo-entry-image img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
	.woocommerce ul.products > li.product .woo-entry-image img.woo-entry-image-secondary { position: absolute; inset: 0; }
	.woocommerce ul.products > li.product .woo-entry-inner { padding: 0 10px; flex: 1; display: flex; flex-direction: column; }
	.woocommerce ul.products > li.product .woo-entry-inner > li, .woocommerce ul.products > li.product ul.woo-entry-inner > li { padding: 0; }
	.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: 14px; line-height: 1.3; }
	.woocommerce ul.products li.product .woocommerce-loop-category__title { padding: 0 10px; margin: 0; font-weight: 600; }
	.woocommerce ul.products li.product .woocommerce-loop-category__title mark.count { background: none; color: #999; font-weight: 400; font-size: 12px; }
	.woocommerce ul.products li.product.product-category .woo-desc { display: none; }
	.woocommerce ul.products li.product .price { font-size: 16px; margin: 4px 0 8px; }
	.woocommerce ul.products li.product .woo-entry-inner li.category { margin-bottom: 4px; }
	.woocommerce ul.products li.product .woo-entry-inner li.btn-wrap { margin-top: auto; }
	.woocommerce ul.products li.product .button { width: 100%; padding: 0 6px; font-size: 12px; letter-spacing: .2px; border-radius: 8px; }
	.woocommerce ul.products li.product .star-rating { margin: 0 auto 6px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.woocommerce ul.products.oceanwp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ------------------------------------------------------------------ */
/* 21. Ficha de producto: galería a todo lo ancho                      */
/*     Antes la foto ocupaba un 40 % de la pantalla con el título      */
/*     repetido arriba en la cabecera gris.                            */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product div.images { width: 100% !important; float: none; margin: 0 0 18px; } /* OceanWP fija el ancho de columna con !important */
	.single-product div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; }
	.single-product div.product div.images .woocommerce-product-gallery__image img { width: 100%; height: auto; border-radius: 12px; }
	.single-product div.product .summary { width: 100% !important; float: none; } /* idem */
	/*
	 * Estabilidad al cargar: hasta que arranca el carrusel, WooCommerce apila todas
	 * las fotos (la galería llegó a medir 10.900 px) y luego añade la tira de
	 * miniaturas; el precio y el botón entraban en pantalla de golpe (CLS 0,07).
	 * Se reserva desde el principio el hueco cuadrado de la foto y el de la tira.
	 */
	.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
	.single-product div.product .woocommerce-product-gallery > .flex-viewport { aspect-ratio: 1 / 1; overflow: hidden; }
	.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) { padding-bottom: 72px; }
	.single-product div.product .flex-control-thumbs { display: flex; gap: 8px; height: 64px; margin: 8px 0 0; overflow-x: auto; scrollbar-width: none; }
	.single-product div.product .flex-control-thumbs li { flex: 0 0 64px; width: 64px !important; padding: 0; float: none; } /* idem */
	.single-product div.product .flex-control-thumbs li img { border-radius: 8px; }
}

/* ------------------------------------------------------------------ */
/* 22. Fotos que no encajan en su hueco (carteles verticales, fotos    */
/*     cuadradas en un hueco 16:9): en vez de recortarlas, se ven      */
/*     enteras sobre un fondo hecho con la misma foto difuminada.      */
/*     La clase .ddcr-encaja y la variable --ddcr-fondo las pone       */
/*     ddc-responsive.js cuando la foto ya ha cargado y se sabe su     */
/*     proporción real. El hueco no cambia: no hay salto de diseño.    */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.ddcr-encaja { position: relative; isolation: isolate; overflow: hidden; }
	.ddcr-encaja::before {
		content: ""; position: absolute; inset: -30px; z-index: -1;
		background: var(--ddcr-fondo) center / cover no-repeat;
		filter: blur(24px) saturate(1.1) brightness(.5);
	}
	/* !important: gana a los object-fit:cover de las secciones 15 y 16 (selectores con #id) */
	.ddcr-encaja img { object-fit: contain !important; background: transparent; }
}

/* ------------------------------------------------------------------ */
/* 23. Huecos y desbordes sueltos                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* 50 px en blanco entre la cabecera y el contenido de listados, tienda y entradas */
	body:is(.archive, .search, .blog, .woocommerce-page, .single-post) #main #content-wrap { padding-top: 20px; }
}
@media (max-width: 767px) {
	/* Portada, bloque de Leone y YouTube al final: márgenes negativos de escritorio
	   cortaban la foto 55 px por la izquierda y 65 por la derecha */
	.elementor-element-22b2558 > .elementor-widget-container,
	.elementor-element-0641a05 > .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; } /* Elementor los pone con !important en su CSS por página */
	.elementor-element-22b2558 img, .elementor-element-0641a05 img { width: 100%; height: auto; }
}
@media (max-width: 1024px) {
	/* Pie de foto de las tarjetas: 12 px como mínimo */
	#blog-entries .blog-entry .thumbnail-caption { font-size: 12px; }
	/* Portada, rejilla de vídeos de YouTube: el titular iba a 9,5 px y la fecha a 8,5 */
	.ddcyt-ficha .ddcyt-txt { font-size: 13px; line-height: 1.35; }
	.ddcyt-ficha .ddcyt-fecha { font-size: 11.5px; }
}

/* ------------------------------------------------------------------ */
/* 24. Eventos: ficha con los datos en una tarjeta a todo lo ancho     */
/*     Antes «Detalles» y «Recinto» iban en dos columnas de 150 px y   */
/*     la dirección se partía letra a letra («MadridEs paña»).         */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tribe-events-single .tribe-events-event-meta { flex-direction: column; gap: 0; background: #f6f6f6; border: 0; border-radius: 14px; padding: 16px; margin: 20px 0; }
	.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group { flex: none; width: 100% !important; padding: 0 0 12px; margin: 0; } /* The Events Calendar fija el ancho con !important */
	.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group + .tribe-events-meta-group { border-top: 1px solid #e4e4e4; padding-top: 14px; }
	.tribe-events-single .tribe-events-event-meta :is(dd, dt, a, .tribe-street-address, .tribe-locality) { overflow-wrap: anywhere; }
	.tribe-events-single .tribe-events-single-event-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.12; }
	.tribe-events-single .tribe-events-event-image img { width: 100%; height: auto; border-radius: 12px; }
}
@media (max-width: 1024px) {
	/* Lista de eventos: carteles con esquinas suaves y a todo el ancho de su columna */
	.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper { width: 100%; }
	.tribe-events .tribe-events-calendar-list__event-featured-image { width: 100%; height: auto; border-radius: 12px; }
}